v1.11.9-rc.1

Prepare changelog for v1.11.9-rc.1
Upgrade matrix-react-sdk to 3.58.0-rc.1
2022-10-04 14:46:47 +01:00 · 2022-10-04 14:46:46 +01:00 · 2022-10-04 14:44:19 +01:00 · 2022-10-04 14:26:21 +01:00 · 2022-10-04 13:54:41 +01:00 · 2022-09-30 18:27:59 +01:00
74 changed files with 5248 additions and 4068 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,6 +23,8 @@ module.exports = {
            "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",
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "github>matrix-org/renovate-config-element-web"
+  ]
+}
--- a/.github/workflows/backport.yml
+++ b/.github/workflows/backport.yml
@@ -0,0 +1,30 @@
+name: Backport
+on:
+  pull_request_target:
+    types:
+      - closed
+      - labeled
+    branches:
+      - develop
+
+jobs:
+  backport:
+    name: Backport
+    runs-on: ubuntu-latest
+    # Only react to merged PRs for security reasons.
+    # See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
+    if: >
+      github.event.pull_request.merged
+      && (
+        github.event.action == 'closed'
+        || (
+          github.event.action == 'labeled'
+          && contains(github.event.label.name, 'backport')
+        )
+      )
+    steps:
+      - uses: tibdex/backport@v2
+        with:
+          labels_template: "<%= JSON.stringify([...labels, 'X-Release-Blocker']) %>"
+          # We can't use GITHUB_TOKEN here or CI won't run on the new PR
+          github_token: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: Build and Package
+name: Build
 on:
  pull_request: { }
  push:
@@ -22,5 +22,5 @@ jobs:
      - name: Install Dependencies
        run: "./scripts/layered.sh"

-      - name: Build & Package
-        run: "./scripts/ci_package.sh"
+      - name: Build
+        run: "yarn build"
--- a/.github/workflows/build_develop.yml
+++ b/.github/workflows/build_develop.yml
@@ -6,6 +6,9 @@ on:
    branches: [ develop ]
  repository_dispatch:
    types: [ element-web-notify ]
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
+  cancel-in-progress: true
 jobs:
  build:
    name: "Build & Upload source maps to Sentry"
@@ -29,13 +32,30 @@ jobs:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
          SENTRY_URL: ${{ secrets.SENTRY_URL }}
-          SENTRY_ORG: sentry
+          SENTRY_ORG: element
          SENTRY_PROJECT: riot-web

-      - run: mv dist/element-*.tar.gz webapp.tar.gz
+      - run: mv dist/element-*.tar.gz dist/develop.tar.gz
+
+      # We keep the latest develop.tar.gz as the artifact uploaded later expires after 24 and requires auth to download
+      # Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
+      - name: Deploy develop.tar.gz to Github Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          single-commit: true

      - uses: actions/upload-artifact@v3
        with:
          name: webapp
-          path: webapp.tar.gz
+          path: dist/develop.tar.gz
          retention-days: 1
+
+      - name: Wait for other steps to succeed
+        uses: lewagon/wait-on-check-action@v1.1.2
+        with:
+          ref: ${{ github.ref }}
+          running-workflow-name: 'Build & Upload source maps to Sentry'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+          check-regexp: ^((?!SonarQube|issues|board).)*$
--- a/.github/workflows/dockerhub.yaml
+++ b/.github/workflows/dockerhub.yaml
@@ -0,0 +1,61 @@
+name: Dockerhub
+on:
+  workflow_dispatch: { }
+  push:
+    tags: [ v* ]
+  schedule:
+    # This job can take a while, and we have usage limits, so just publish develop only twice a day
+    - cron: '0 7/12 * * *'
+concurrency: ${{ github.ref_name }}
+jobs:
+  buildx:
+    name: Docker Buildx
+    runs-on: ubuntu-latest
+    environment: dockerhub
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # needed for docker-package to be able to calculate the version
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          install: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: |
+            vectorim/element-web
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+          flavor: |
+            latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Update repo description
+        uses: peter-evans/dockerhub-description@v2
+        continue-on-error: true
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          repository: vectorim/element-web
--- a/.github/workflows/issue_closed.yml
+++ b/.github/workflows/issue_closed.yml
@@ -10,6 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/github-script@v5
+        id: main
        with:
          # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
          github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -127,13 +128,7 @@ jobs:

              // Duplicate was closed with wrong reason, fix it
              if (stateReason === "COMPLETED") {
-                await github.graphql(`mutation($id:ID!) {
-                  closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
-                    clientMutationId
-                  }
-                }`, {
-                  id: context.payload.issue.node_id,
-                });
+                core.setOutput("closeAsNotPlanned", "true");
              }
            } else {
              // This issue was closed, close all related rageshakes
@@ -146,3 +141,16 @@ jobs:
                });
              }
            }
+      - uses: actions/github-script@v5
+        name: Close duplicate as Not Planned
+        if: steps.main.outputs.closeAsNotPlanned
+        with:
+          # We do this step separately, and with the default token so as to not re-trigger this workflow when re-closing
+          script: |
+            await github.graphql(`mutation($id:ID!) {
+              closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
+                clientMutationId
+              }
+            }`, {
+              id: context.payload.issue.node_id,
+            });
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -57,9 +57,25 @@ jobs:
        with:
          cache: 'yarn'

-      # Does not need branch matching as only analyses this layer
-      - name: Install Deps
-        run: "yarn install --pure-lockfile"
+      # Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
+      - name: Install Dependencies
+        run: "./scripts/layered.sh"

      - name: Run Linter
        run: "yarn run lint:style"
+
+  analyse_dead_code:
+    name: "Analyse Dead Code"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          cache: 'yarn'
+
+      - name: Install Deps
+        run: "scripts/layered.sh"
+
+      - name: Dead Code Analysis
+        run: "yarn run analyse:unused-exports"
--- a/.github/workflows/triage-assigned.yml
+++ b/.github/workflows/triage-assigned.yml
@@ -11,7 +11,7 @@ jobs:
      contains(github.event.issue.assignees.*.login, 't3chguy') ||
      contains(github.event.issue.assignees.*.login, 'turt2live')
    steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
        with:
          project: Web App Team
          column: "In Progress"
--- a/.github/workflows/triage-incoming.yml
+++ b/.github/workflows/triage-incoming.yml
@@ -8,7 +8,7 @@ jobs:
  automate-project-columns:
    runs-on: ubuntu-latest
    steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
        with:
          project: Issue triage
          column: Incoming
--- a/.github/workflows/triage-labelled.yml
+++ b/.github/workflows/triage-labelled.yml
@@ -33,7 +33,7 @@ jobs:
    name: X-Needs-Info issues to Need info column on triage board
    runs-on: ubuntu-latest
    steps:
-      - uses: konradpabjan/move-labeled-or-milestoned-issue@219d384e03fa4b6460cd24f9f37d19eb033a4338
+      - uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
        with:
          action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
          project-url: "https://github.com/vector-im/element-web/projects/27"
@@ -44,14 +44,7 @@ jobs:
    name: P1 X-Needs-Design to Design project board
    runs-on: ubuntu-latest
    if: >
-      contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
-      (contains(github.event.issue.labels.*.name, 'S-Critical') &&
-       (contains(github.event.issue.labels.*.name, 'O-Frequent') ||
-        contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
-       contains(github.event.issue.labels.*.name, 'S-Major') &&
-       contains(github.event.issue.labels.*.name, 'O-Frequent') ||
-       contains(github.event.issue.labels.*.name, 'A11y') &&
-       contains(github.event.issue.labels.*.name, 'O-Frequent'))
+      contains(github.event.issue.labels.*.name, 'X-Needs-Design')
    steps:
      - uses: octokit/graphql-action@v2.x
        id: add_to_project
@@ -100,6 +93,9 @@ jobs:
    runs-on: ubuntu-latest
    if: >
      contains(github.event.issue.labels.*.name, 'A-New-Search-Experience') ||
+      (contains(github.event.issue.labels.*.name, 'A-Threads') &&
+        (contains(github.event.issue.labels.*.name, 'S-Major') ||
+         contains(github.event.issue.labels.*.name, 'S-Critical'))) ||
      contains(github.event.issue.labels.*.name, 'Team: Delight') ||
      contains(github.event.issue.labels.*.name, 'Z-NewUserJourney')
    steps:
@@ -119,6 +115,29 @@ jobs:
        env:
          PROJECT_ID: "PN_kwDOAM0swc1HvQ"
          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+  
+  Search_issues_to_board:
+    name: Search issues to project board
+    runs-on: ubuntu-latest
+    if: >
+      contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
+    steps:
+      - uses: octokit/graphql-action@v2.x
+        with:
+          headers: '{"GraphQL-Features": "projects_next_graphql"}'
+          query: |
+            mutation add_to_project($projectid:ID!,$contentid:ID!) {
+              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
+                projectNextItem {
+                  id
+                }
+              }
+            }
+          projectid: ${{ env.PROJECT_ID }}
+          contentid: ${{ github.event.issue.node_id }}
+        env:
+          PROJECT_ID: "PN_kwDOAM0swc4ADtaO"
+          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

  move_voice-message_issues:
    name: A-Voice Messages to voice message board
@@ -142,30 +161,6 @@ jobs:
        env:
          PROJECT_ID: "PN_kwDOAM0swc2KCw"
          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
-  move_threads_issues:
-    name: A-Threads to Thread board
-    runs-on: ubuntu-latest
-    if: >
-      contains(github.event.issue.labels.*.name, 'A-Threads')
-    steps:
-      - uses: octokit/graphql-action@v2.x
-        with:
-          headers: '{"GraphQL-Features": "projects_next_graphql"}'
-          query: |
-            mutation add_to_project($projectid:ID!,$contentid:ID!) {
-              addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }
-          projectid: ${{ env.PROJECT_ID }}
-          contentid: ${{ github.event.issue.node_id }}
-        env:
-          PROJECT_ID: "PN_kwDOAM0swc0rRA"
-          GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
-
  move_message_bubbles_issues:
    name: A-Message-Bubbles to Message bubbles board
    runs-on: ubuntu-latest
--- a/.github/workflows/triage-priority-bugs.yml
+++ b/.github/workflows/triage-priority-bugs.yml
@@ -23,7 +23,7 @@ jobs:
       contains(github.event.issue.labels.*.name, 'A11y') &&
       contains(github.event.issue.labels.*.name, 'O-Frequent'))
    steps:
-      - uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+      - uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
        with:
          project: Crypto Team
          column: Ready
--- a/.github/workflows/triage-unlabelled.yml
+++ b/.github/workflows/triage-unlabelled.yml
@@ -35,7 +35,7 @@ jobs:
            fi
          fi
      - name: Move issue
-        uses: alex-page/github-project-automation-plus@bb266ff4dde9242060e2d5418e120a133586d488
+        uses: alex-page/github-project-automation-plus@be108970955040d35dd6d053c3aff3faaf678026
        if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
        with:
          project: Issue triage
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,26 +1,3 @@
-// Copied from react-sdk
-// TODO: Only keep one copy of this for synchronization purposes
 module.exports = {
-    "extends": "stylelint-config-standard",
-    "plugins": [
-        "stylelint-scss",
-    ],
-    "rules": {
-        "indentation": 4,
-        "comment-empty-line-before": null,
-        "declaration-empty-line-before": null,
-        "length-zero-no-unit": null,
-        "rule-empty-line-before": null,
-        "color-hex-length": null,
-        "max-empty-lines": null,
-        "number-no-trailing-zeros": null,
-        "number-leading-zero": null,
-        "selector-list-comma-newline-after": null,
-        "at-rule-no-unknown": null,
-        "no-descending-specificity": null,
-        "scss/at-rule-no-unknown": [true, {
-            // https://github.com/vector-im/element-web/issues/10544
-            "ignoreAtRules": ["define-mixin"],
-        }],
-    }
+    ...require("matrix-react-sdk/.stylelintrc.js"),
 };
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,203 @@
+Changes in [1.11.9-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.11.9-rc.1) (2022-10-04)
+=========================================================================================================
+
+## ✨ Features
+ * Device manager - select all devices ([\#9330](https://github.com/matrix-org/matrix-react-sdk/pull/9330)). Contributed by @kerryarchibald.
+ * New group call experience: Call tiles ([\#9332](https://github.com/matrix-org/matrix-react-sdk/pull/9332)).
+ * Add Shift key to FormatQuote keyboard shortcut ([\#9298](https://github.com/matrix-org/matrix-react-sdk/pull/9298)). Contributed by @owi92.
+ * Device manager - sign out of multiple sessions ([\#9325](https://github.com/matrix-org/matrix-react-sdk/pull/9325)). Contributed by @kerryarchibald.
+ * Display push toggle for web sessions (MSC3890) ([\#9327](https://github.com/matrix-org/matrix-react-sdk/pull/9327)).
+ * Add device notifications enabled switch ([\#9324](https://github.com/matrix-org/matrix-react-sdk/pull/9324)).
+ * Implement push notification toggle in device detail ([\#9308](https://github.com/matrix-org/matrix-react-sdk/pull/9308)).
+ * New group call experience: Starting and ending calls ([\#9318](https://github.com/matrix-org/matrix-react-sdk/pull/9318)).
+ * New group call experience: Room header call buttons ([\#9311](https://github.com/matrix-org/matrix-react-sdk/pull/9311)).
+ * Make device ID copyable in device list ([\#9297](https://github.com/matrix-org/matrix-react-sdk/pull/9297)). Contributed by @duxovni.
+ * Use display name instead of user ID when rendering power events ([\#9295](https://github.com/matrix-org/matrix-react-sdk/pull/9295)).
+ * Read receipts for threads ([\#9239](https://github.com/matrix-org/matrix-react-sdk/pull/9239)). Fixes #23191.
+
+## 🐛 Bug Fixes
+ * Fix device selection in pre-join screen for Element Call video rooms ([\#9321](https://github.com/matrix-org/matrix-react-sdk/pull/9321)). Fixes #23331.
+ * Don't render a 1px high room topic if the room topic is empty ([\#9317](https://github.com/matrix-org/matrix-react-sdk/pull/9317)). Contributed by @Arnei.
+ * Don't show feedback prompts when that UIFeature is disabled ([\#9305](https://github.com/matrix-org/matrix-react-sdk/pull/9305)). Fixes #23327.
+ * Fix soft crash around unknown room pills ([\#9301](https://github.com/matrix-org/matrix-react-sdk/pull/9301)). Fixes matrix-org/element-web-rageshakes#15465.
+ * Fix spaces feedback prompt wrongly showing when feedback is disabled ([\#9302](https://github.com/matrix-org/matrix-react-sdk/pull/9302)). Fixes #23314.
+ * Fix tile soft crash in ReplyInThreadButton ([\#9300](https://github.com/matrix-org/matrix-react-sdk/pull/9300)). Fixes matrix-org/element-web-rageshakes#15493.
+
+Changes in [1.11.8](https://github.com/vector-im/element-web/releases/tag/v1.11.8) (2022-09-28)
+===============================================================================================
+
+## 🐛 Bug Fixes
+ * Bump IDB crypto store version ([\#2705](https://github.com/matrix-org/matrix-js-sdk/pull/2705)).
+
+Changes in [1.11.7](https://github.com/vector-im/element-web/releases/tag/v1.11.7) (2022-09-28)
+===============================================================================================
+
+## 🔒 Security
+* Fix for [CVE-2022-39249](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39249)
+* Fix for [CVE-2022-39250](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39250)
+* Fix for [CVE-2022-39251](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39251)
+* Fix for [CVE-2022-39236](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D39236)
+
+Changes in [1.11.6](https://github.com/vector-im/element-web/releases/tag/v1.11.6) (2022-09-20)
+=========================================================================================================
+
+## ✨ Features
+ * Element Call video rooms ([\#9267](https://github.com/matrix-org/matrix-react-sdk/pull/9267)).
+ * Device manager - rename session ([\#9282](https://github.com/matrix-org/matrix-react-sdk/pull/9282)).
+ * Allow widgets to read related events ([\#9210](https://github.com/matrix-org/matrix-react-sdk/pull/9210)). Contributed by @dhenneke.
+ * Device manager - logout of other session ([\#9280](https://github.com/matrix-org/matrix-react-sdk/pull/9280)).
+ * Device manager - logout current session ([\#9275](https://github.com/matrix-org/matrix-react-sdk/pull/9275)).
+ * Device manager - verify other devices ([\#9274](https://github.com/matrix-org/matrix-react-sdk/pull/9274)).
+ * Allow integration managers to remove users ([\#9211](https://github.com/matrix-org/matrix-react-sdk/pull/9211)).
+ * Device manager - add verify current session button ([\#9252](https://github.com/matrix-org/matrix-react-sdk/pull/9252)).
+ * Add NotifPanel dot back. ([\#9242](https://github.com/matrix-org/matrix-react-sdk/pull/9242)). Fixes #17641.
+ * Implement MSC3575: Sliding Sync ([\#8328](https://github.com/matrix-org/matrix-react-sdk/pull/8328)).
+ * Add the clipboard read permission for widgets ([\#9250](https://github.com/matrix-org/matrix-react-sdk/pull/9250)). Contributed by @stefanmuhle.
+
+## 🐛 Bug Fixes
+ * Make autocomplete pop-up wider in thread view ([\#9289](https://github.com/matrix-org/matrix-react-sdk/pull/9289)).
+ * Fix soft crash around inviting invalid MXIDs in start DM on first message flow ([\#9281](https://github.com/matrix-org/matrix-react-sdk/pull/9281)). Fixes matrix-org/element-web-rageshakes#15060 and matrix-org/element-web-rageshakes#15140.
+ * Fix in-reply-to previews not disappearing when swapping rooms ([\#9278](https://github.com/matrix-org/matrix-react-sdk/pull/9278)).
+ * Fix invalid instanceof operand window.OffscreenCanvas ([\#9276](https://github.com/matrix-org/matrix-react-sdk/pull/9276)). Fixes #23275.
+ * Fix memory leak caused by unremoved listener ([\#9273](https://github.com/matrix-org/matrix-react-sdk/pull/9273)).
+ * Fix thumbnail generation when offscreen canvas fails ([\#9272](https://github.com/matrix-org/matrix-react-sdk/pull/9272)). Fixes #23265.
+ * Prevent sliding sync from showing a room under multiple sublists ([\#9266](https://github.com/matrix-org/matrix-react-sdk/pull/9266)).
+ * Fix tile crash around tooltipify links ([\#9270](https://github.com/matrix-org/matrix-react-sdk/pull/9270)). Fixes #23253.
+ * Device manager - filter out nulled metadatas in device tile properly ([\#9251](https://github.com/matrix-org/matrix-react-sdk/pull/9251)).
+ * Fix a sliding sync bug which could cause rooms to loop ([\#9268](https://github.com/matrix-org/matrix-react-sdk/pull/9268)).
+ * Remove the grey gradient on images in bubbles in the timeline ([\#9241](https://github.com/matrix-org/matrix-react-sdk/pull/9241)). Fixes #21651.
+ * Fix html export not including images ([\#9260](https://github.com/matrix-org/matrix-react-sdk/pull/9260)). Fixes #22059.
+ * Fix possible soft crash from a race condition in space hierarchies ([\#9254](https://github.com/matrix-org/matrix-react-sdk/pull/9254)). Fixes matrix-org/element-web-rageshakes#15225.
+ * Disable all types of autocorrect, -complete, -capitalize, etc on Spotlight's search field ([\#9259](https://github.com/matrix-org/matrix-react-sdk/pull/9259)).
+ * Handle M_INVALID_USERNAME on /register/available ([\#9237](https://github.com/matrix-org/matrix-react-sdk/pull/9237)). Fixes #23161.
+ * Fix issue with quiet zone around QR code ([\#9243](https://github.com/matrix-org/matrix-react-sdk/pull/9243)). Fixes #23199.
+
+Changes in [1.11.5](https://github.com/vector-im/element-web/releases/tag/v1.11.5) (2022-09-13)
+===============================================================================================
+
+## ✨ Features
+ * Device manager - hide unverified security recommendation when only current session is unverified ([\#9228](https://github.com/matrix-org/matrix-react-sdk/pull/9228)). Contributed by @kerryarchibald.
+ * Device manager - scroll to filtered list from security recommendations ([\#9227](https://github.com/matrix-org/matrix-react-sdk/pull/9227)). Contributed by @kerryarchibald.
+ * Device manager - updated dropdown style in filtered device list ([\#9226](https://github.com/matrix-org/matrix-react-sdk/pull/9226)). Contributed by @kerryarchibald.
+ * Device manager - device type and verification icons on device tile ([\#9197](https://github.com/matrix-org/matrix-react-sdk/pull/9197)). Contributed by @kerryarchibald.
+
+## 🐛 Bug Fixes
+ * Description of DM room with more than two other people is now being displayed correctly ([\#9231](https://github.com/matrix-org/matrix-react-sdk/pull/9231)). Fixes #23094.
+ * Fix voice messages with multiple composers ([\#9208](https://github.com/matrix-org/matrix-react-sdk/pull/9208)). Fixes #23023. Contributed by @grimhilt.
+ * Fix suggested rooms going missing ([\#9236](https://github.com/matrix-org/matrix-react-sdk/pull/9236)). Fixes #23190.
+ * Fix tooltip infinitely recursing ([\#9235](https://github.com/matrix-org/matrix-react-sdk/pull/9235)). Fixes matrix-org/element-web-rageshakes#15107, matrix-org/element-web-rageshakes#15093 matrix-org/element-web-rageshakes#15092 and matrix-org/element-web-rageshakes#15077.
+ * Fix plain text export saving ([\#9230](https://github.com/matrix-org/matrix-react-sdk/pull/9230)). Contributed by @jryans.
+ * Add missing space in SecurityRoomSettingsTab ([\#9222](https://github.com/matrix-org/matrix-react-sdk/pull/9222)). Contributed by @gefgu.
+ * Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\#9209](https://github.com/matrix-org/matrix-react-sdk/pull/9209)). Fixes #21369.
+ * Fix progress bar regression throughout the app ([\#9219](https://github.com/matrix-org/matrix-react-sdk/pull/9219)). Fixes #23121.
+ * Reuse empty string & space string logic for event types in devtools ([\#9218](https://github.com/matrix-org/matrix-react-sdk/pull/9218)). Fixes #23115.
+
+Changes in [1.11.4](https://github.com/vector-im/element-web/releases/tag/v1.11.4) (2022-08-31)
+===============================================================================================
+
+## 🔒 Security
+* Fixes for [CVE-2022-36059](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D36059) and [CVE-2022-36060](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE%2D2022%2D36060)
+
+Learn more about what we've been up to at https://element.io/blog/element-web-desktop-1-11-4-a-security-update-deferred-dms-and-more/
+Find more details of the vulnerabilities at https://matrix.org/blog/2022/08/31/security-releases-matrix-js-sdk-19-4-0-and-matrix-react-sdk-3-53-0
+
+## ✨ Features
+ * Device manager - scroll to filtered list from security recommendations ([\#9227](https://github.com/matrix-org/matrix-react-sdk/pull/9227)). Contributed by @kerryarchibald.
+ * Device manager - updated dropdown style in filtered device list ([\#9226](https://github.com/matrix-org/matrix-react-sdk/pull/9226)). Contributed by @kerryarchibald.
+ * Device manager - device type and verification icons on device tile ([\#9197](https://github.com/matrix-org/matrix-react-sdk/pull/9197)). Contributed by @kerryarchibald.
+ * Ignore unreads in low priority rooms in the space panel ([\#6518](https://github.com/matrix-org/matrix-react-sdk/pull/6518)). Fixes #16836.
+ * Release message right-click context menu out of labs ([\#8613](https://github.com/matrix-org/matrix-react-sdk/pull/8613)).
+ * Device manager - expandable session details in device list ([\#9188](https://github.com/matrix-org/matrix-react-sdk/pull/9188)). Contributed by @kerryarchibald.
+ * Device manager - device list filtering ([\#9181](https://github.com/matrix-org/matrix-react-sdk/pull/9181)). Contributed by @kerryarchibald.
+ * Device manager - add verification details to session details ([\#9187](https://github.com/matrix-org/matrix-react-sdk/pull/9187)). Contributed by @kerryarchibald.
+ * Device manager - current session expandable details ([\#9185](https://github.com/matrix-org/matrix-react-sdk/pull/9185)). Contributed by @kerryarchibald.
+ * Device manager - security recommendations section ([\#9179](https://github.com/matrix-org/matrix-react-sdk/pull/9179)). Contributed by @kerryarchibald.
+ * The Welcome Home Screen: Return Button ([\#9089](https://github.com/matrix-org/matrix-react-sdk/pull/9089)). Fixes #22917. Contributed by @justjanne.
+ * Device manager - label devices as inactive ([\#9175](https://github.com/matrix-org/matrix-react-sdk/pull/9175)). Contributed by @kerryarchibald.
+ * Device manager - other sessions list ([\#9155](https://github.com/matrix-org/matrix-react-sdk/pull/9155)). Contributed by @kerryarchibald.
+ * Implement MSC3846: Allowing widgets to access TURN servers ([\#9061](https://github.com/matrix-org/matrix-react-sdk/pull/9061)).
+ * Allow widgets to send/receive to-device messages ([\#8885](https://github.com/matrix-org/matrix-react-sdk/pull/8885)).
+
+## 🐛 Bug Fixes
+ * Add super cool feature ([\#9222](https://github.com/matrix-org/matrix-react-sdk/pull/9222)). Contributed by @gefgu.
+ * Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\#9209](https://github.com/matrix-org/matrix-react-sdk/pull/9209)). Fixes #21369.
+ * Fix progress bar regression throughout the app ([\#9219](https://github.com/matrix-org/matrix-react-sdk/pull/9219)). Fixes #23121.
+ * Reuse empty string & space string logic for event types in devtools ([\#9218](https://github.com/matrix-org/matrix-react-sdk/pull/9218)). Fixes #23115.
+ * Reduce amount of requests done by the onboarding task list ([\#9194](https://github.com/matrix-org/matrix-react-sdk/pull/9194)). Fixes #23085. Contributed by @justjanne.
+ * Avoid hardcoding branding in user onboarding ([\#9206](https://github.com/matrix-org/matrix-react-sdk/pull/9206)). Fixes #23111. Contributed by @justjanne.
+ * End jitsi call when member is banned ([\#8879](https://github.com/matrix-org/matrix-react-sdk/pull/8879)). Contributed by @maheichyk.
+ * Fix context menu being opened when clicking message action bar buttons ([\#9200](https://github.com/matrix-org/matrix-react-sdk/pull/9200)). Fixes #22279 and #23100.
+ * Add gap between checkbox and text in report dialog following the same pattern (8px) used in the gap between the two buttons. It fixes vector-im/element-web#23060 ([\#9195](https://github.com/matrix-org/matrix-react-sdk/pull/9195)). Contributed by @gefgu.
+ * Fix url preview AXE and layout issue & add percy test ([\#9189](https://github.com/matrix-org/matrix-react-sdk/pull/9189)). Fixes #23083.
+ * Wrap long space names ([\#9201](https://github.com/matrix-org/matrix-react-sdk/pull/9201)). Fixes #23095.
+ * Attempt to fix `Failed to execute 'removeChild' on 'Node'` ([\#9196](https://github.com/matrix-org/matrix-react-sdk/pull/9196)).
+ * Fix soft crash around space hierarchy changing between spaces ([\#9191](https://github.com/matrix-org/matrix-react-sdk/pull/9191)). Fixes matrix-org/element-web-rageshakes#14613.
+ * Fix soft crash around room view store metrics ([\#9190](https://github.com/matrix-org/matrix-react-sdk/pull/9190)). Fixes matrix-org/element-web-rageshakes#14361.
+ * Fix the same person appearing multiple times when searching for them. ([\#9177](https://github.com/matrix-org/matrix-react-sdk/pull/9177)). Fixes #22851.
+ * Fix space panel subspace indentation going missing ([\#9167](https://github.com/matrix-org/matrix-react-sdk/pull/9167)). Fixes #23049.
+ * Fix invisible power levels tile when showing hidden events ([\#9162](https://github.com/matrix-org/matrix-react-sdk/pull/9162)). Fixes #23013.
+ * Space panel accessibility improvements ([\#9157](https://github.com/matrix-org/matrix-react-sdk/pull/9157)). Fixes #22995.
+ * Fix inverted logic for showing UserWelcomeTop component ([\#9164](https://github.com/matrix-org/matrix-react-sdk/pull/9164)). Fixes #23037.
+
+Changes in [1.11.3](https://github.com/vector-im/element-web/releases/tag/v1.11.3) (2022-08-16)
+===============================================================================================
+
+## ✨ Features
+ * Improve auth aria attributes and semantics ([\#22948](https://github.com/vector-im/element-web/pull/22948)).
+ * Device manager - New device tile info design ([\#9122](https://github.com/matrix-org/matrix-react-sdk/pull/9122)). Contributed by @kerryarchibald.
+ * Device manager generic settings subsection component ([\#9147](https://github.com/matrix-org/matrix-react-sdk/pull/9147)). Contributed by @kerryarchibald.
+ * Migrate the hidden read receipts flag to new "send read receipts" option ([\#9141](https://github.com/matrix-org/matrix-react-sdk/pull/9141)).
+ * Live location sharing - share location at most every 5 seconds ([\#9148](https://github.com/matrix-org/matrix-react-sdk/pull/9148)). Contributed by @kerryarchibald.
+ * Increase max length of voice messages to 15m ([\#9133](https://github.com/matrix-org/matrix-react-sdk/pull/9133)). Fixes #18620.
+ * Move pin drop out of labs ([\#9135](https://github.com/matrix-org/matrix-react-sdk/pull/9135)).
+ * Start DM on first message ([\#8612](https://github.com/matrix-org/matrix-react-sdk/pull/8612)). Fixes #14736.
+ * Remove "Add Space" button from RoomListHeader when user cannot create spaces ([\#9129](https://github.com/matrix-org/matrix-react-sdk/pull/9129)).
+ * The Welcome Home Screen: Dedicated Download Apps Dialog ([\#9120](https://github.com/matrix-org/matrix-react-sdk/pull/9120)). Fixes #22921. Contributed by @justjanne.
+ * The Welcome Home Screen: "Submit Feedback" pane ([\#9090](https://github.com/matrix-org/matrix-react-sdk/pull/9090)). Fixes #22918. Contributed by @justjanne.
+ * New User Onboarding Task List ([\#9083](https://github.com/matrix-org/matrix-react-sdk/pull/9083)). Fixes #22919. Contributed by @justjanne.
+ * Add support for disabling spell checking ([\#8604](https://github.com/matrix-org/matrix-react-sdk/pull/8604)). Fixes #21901.
+ * Live location share - leave maximised map open when beacons expire ([\#9098](https://github.com/matrix-org/matrix-react-sdk/pull/9098)). Contributed by @kerryarchibald.
+
+## 🐛 Bug Fixes
+ * Some slash-commands (`/myroomnick`) have temporarily been disabled before the first message in a DM is sent. ([\#9193](https://github.com/matrix-org/matrix-react-sdk/pull/9193)).
+ * Use stable reference for active tab in tabbedView ([\#9145](https://github.com/matrix-org/matrix-react-sdk/pull/9145)). Contributed by @kerryarchibald.
+ * Fix pillification sometimes doubling up ([\#9152](https://github.com/matrix-org/matrix-react-sdk/pull/9152)). Fixes #23036.
+ * Fix highlights not being applied to plaintext messages ([\#9126](https://github.com/matrix-org/matrix-react-sdk/pull/9126)). Fixes #22787.
+ * Fix dismissing edit composer when change was undone ([\#9109](https://github.com/matrix-org/matrix-react-sdk/pull/9109)). Fixes #22932.
+ * 1-to-1 DM rooms with bots now act like DM rooms instead of multi-user-rooms before ([\#9124](https://github.com/matrix-org/matrix-react-sdk/pull/9124)). Fixes #22894.
+ * Apply inline start padding to selected lines on modern layout only ([\#9006](https://github.com/matrix-org/matrix-react-sdk/pull/9006)). Fixes #22768. Contributed by @luixxiul.
+ * Peek into world-readable rooms from spotlight ([\#9115](https://github.com/matrix-org/matrix-react-sdk/pull/9115)). Fixes #22862.
+ * Use default styling on nested numbered lists due to MD being sensitive ([\#9110](https://github.com/matrix-org/matrix-react-sdk/pull/9110)). Fixes #22935.
+ * Fix replying using chat effect commands ([\#9101](https://github.com/matrix-org/matrix-react-sdk/pull/9101)). Fixes #22824.
+
+Changes in [1.11.2](https://github.com/vector-im/element-web/releases/tag/v1.11.2) (2022-08-03)
+===============================================================================================
+
+## ✨ Features
+ * Live location share -  focus on user location on list item click ([\#9051](https://github.com/matrix-org/matrix-react-sdk/pull/9051)). Contributed by @kerryarchibald.
+ * Live location sharing - don't trigger unread counts for beacon location events ([\#9071](https://github.com/matrix-org/matrix-react-sdk/pull/9071)). Contributed by @kerryarchibald.
+ * Support for sending voice messages as replies and in threads ([\#9097](https://github.com/matrix-org/matrix-react-sdk/pull/9097)). Fixes #22031.
+ * Add `Reply in thread` button to the right-click message context-menu ([\#9004](https://github.com/matrix-org/matrix-react-sdk/pull/9004)). Fixes #22745.
+ * Starred_Messages_Feature_Contd_II/Outreachy ([\#9086](https://github.com/matrix-org/matrix-react-sdk/pull/9086)).
+ * Use "frequently used emojis" for autocompletion in composer ([\#8998](https://github.com/matrix-org/matrix-react-sdk/pull/8998)). Fixes #18978. Contributed by @grimhilt.
+ * Improve clickability of view source event toggle button  ([\#9068](https://github.com/matrix-org/matrix-react-sdk/pull/9068)). Fixes #21856. Contributed by @luixxiul.
+ * Improve clickability of "collapse" link button on bubble layout ([\#9037](https://github.com/matrix-org/matrix-react-sdk/pull/9037)). Fixes #22864. Contributed by @luixxiul.
+ * Starred_Messages_Feature/Outreachy ([\#8842](https://github.com/matrix-org/matrix-react-sdk/pull/8842)).
+ * Implement Use Case Selection screen ([\#8984](https://github.com/matrix-org/matrix-react-sdk/pull/8984)). Contributed by @justjanne.
+ * Live location share - handle insufficient permissions in location sharing ([\#9047](https://github.com/matrix-org/matrix-react-sdk/pull/9047)). Contributed by @kerryarchibald.
+ * Improve _FilePanel.scss ([\#9031](https://github.com/matrix-org/matrix-react-sdk/pull/9031)). Contributed by @luixxiul.
+ * Improve spotlight accessibility by adding context menus ([\#8907](https://github.com/matrix-org/matrix-react-sdk/pull/8907)). Fixes #20875 and #22675. Contributed by @justjanne.
+
+## 🐛 Bug Fixes
+ * Replace mask-images with svg components in MessageActionBar ([\#9088](https://github.com/matrix-org/matrix-react-sdk/pull/9088)). Fixes #22912. Contributed by @kerryarchibald.
+ * Unbreak in-app permalink tooltips ([\#9087](https://github.com/matrix-org/matrix-react-sdk/pull/9087)). Fixes #22874.
+ * Show a back button when viewing a space member ([\#9095](https://github.com/matrix-org/matrix-react-sdk/pull/9095)). Fixes #22898.
+ * Align the right edge of info tile lines with normal ones on IRC layout ([\#9058](https://github.com/matrix-org/matrix-react-sdk/pull/9058)). Fixes #22871. Contributed by @luixxiul.
+ * Prevent email verification from overriding existing sessions ([\#9075](https://github.com/matrix-org/matrix-react-sdk/pull/9075)). Fixes #22881. Contributed by @justjanne.
+ * Fix wrong buttons being used when exploring public rooms ([\#9062](https://github.com/matrix-org/matrix-react-sdk/pull/9062)). Fixes #22862.
+ * Re-add padding to generic event list summary on IRC layout ([\#9063](https://github.com/matrix-org/matrix-react-sdk/pull/9063)). Fixes #22869. Contributed by @luixxiul.
+ * Joining federated rooms via the spotlight search should no longer cause a "No known servers" error. ([\#9055](https://github.com/matrix-org/matrix-react-sdk/pull/9055)). Fixes #22845. Contributed by @Half-Shot.
+
 Changes in [1.11.1](https://github.com/vector-im/element-web/releases/tag/v1.11.1) (2022-07-26)
 ===============================================================================================

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,283 @@
-Contributing code to Element
-============================
+Contributing code to Element Web
+================================

-Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).
+Everyone is welcome to contribute code to Element Web, provided that they are
+willing to license their contributions under the same license as the project
+itself. We follow a simple 'inbound=outbound' model for contributions: the act
+of submitting an 'inbound' contribution means that the contributor agrees to
+license the code under the same terms as the project's overall 'outbound'
+license - in this case, Apache Software License v2 (see
+[LICENSE](LICENSE)).
+
+How to contribute
+-----------------
+
+The preferred and easiest way to contribute changes to the project is to fork
+it on github, and then create a pull request to ask us to pull your changes
+into our repo (https://help.github.com/articles/using-pull-requests/)
+
+We use GitHub's pull request workflow to review the contribution, and either
+ask you to make any refinements needed or merge it and make them ourselves.
+
+Things that should go into your PR description:
+ * A changelog entry in the `Notes` section (see below)
+ * References to any bugs fixed by the change (in GitHub's `Fixes` notation)
+ * Describe the why and what is changing in the PR description so it's easy for
+   onlookers and reviewers to onboard and context switch. This information is
+   also helpful when we come back to look at this in 6 months and ask "why did
+   we do it like that?" we have a chance of finding out.
+      * Why didn't it work before? Why does it work now? What use cases does it
+        unlock?
+      * If you find yourself adding information on how the code works or why you
+        chose to do it the way you did, make sure this information is instead
+        written as comments in the code itself.
+      * Sometimes a PR can change considerably as it is developed. In this case,
+        the description should be updated to reflect the most recent state of
+        the PR. (It can be helpful to retain the old content under a suitable
+        heading, for additional context.)
+ * Include both **before** and **after** screenshots to easily compare and discuss
+   what's changing.
+ * Include a step-by-step testing strategy so that a reviewer can check out the
+   code locally and easily get to the point of testing your change.
+ * Add comments to the diff for the reviewer that might help them to understand
+   why the change is necessary or how they might better understand and review it.
+
+We rely on information in pull request to populate the information that goes into 
+the changelogs our users see, both for Element Web itself and other projects on
+which it is based. This is picked up from both labels on the pull request and
+the `Notes:` annotation in the description. By default, the PR title will be
+used for the changelog entry, but you can specify more options, as follows.
+
+To add a longer, more detailed description of the change for the changelog:
+
+
+*Fix llama herding bug*
+
+```
+Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where the 'Herd' button would not herd more than 8 Llamas if the moon was in the waxing gibbous phase
+```
+
+For some PRs, it's not useful to have an entry in the user-facing changelog (this is
+the default for PRs labelled with `T-Task`):
+
+*Remove outdated comment from `Ungulates.ts`*
+```
+Notes: none
+```
+
+Sometimes, you're fixing a bug in a downstream project, in which case you want
+an entry in that project's changelog. You can do that too:
+
+*Fix another herding bug*
+```
+Notes: Fix a bug where the `herd()` function would only work on Tuesdays
+element-web notes: Fix a bug where the 'Herd' button only worked on Tuesdays
+```
+
+This example is for Element Web. You can specify:
+ * matrix-react-sdk
+ * element-web
+ * element-desktop
+
+If your PR introduces a breaking change, use the `Notes` section in the same
+way, additionally adding the `X-Breaking-Change` label (see below). There's no need
+to specify in the notes that it's a breaking change - this will be added
+automatically based on the label - but remember to tell the developer how to
+migrate:
+
+*Remove legacy class*
+
+```
+Notes: Remove legacy `Camelopard` class. `Giraffe` should be used instead.
+```
+
+Other metadata can be added using labels.
+ * `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a *major* version bump.
+ * `T-Enhancement`: A new feature - adding this label will mean the change causes a *minor* version bump.
+ * `T-Defect`: A bug fix (in either code or docs).
+ * `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
+
+If you don't have permission to add labels, your PR reviewer(s) can work with you
+to add them: ask in the PR description or comments.
+
+We use continuous integration, and all pull requests get automatically tested:
+if your change breaks the build, then the PR will show that there are failed
+checks, so please check back after a few minutes.
+
+Tests
+-----
+Your PR should include tests.
+
+For new user facing features in `matrix-js-sdk`, `matrix-react-sdk` or `element-web`, you
+must include:
+
+1. Comprehensive unit tests written in Jest. These are located in `/test`.
+2. "happy path" end-to-end tests.
+   These are located in `/cypress/e2e` in `matrix-react-sdk`, and
+   are run using `element-web`. Ideally, you would also include tests for edge
+   and error cases.
+
+Unit tests are expected even when the feature is in labs. It's good practice
+to write tests alongside the code as it ensures the code is testable from
+the start, and gives you a fast feedback loop while you're developing the
+functionality. End-to-end tests should be added prior to the feature
+leaving labs, but don't have to be present from the start (although it might
+be beneficial to have some running early, so you can test things faster).
+
+For bugs in those repos, your change must include at least one unit test or
+end-to-end test; which is best depends on what sort of test most concisely
+exercises the area.
+
+Changes to must be accompanied by unit tests written in Jest.
+These are located in `/spec/` in `matrix-js-sdk` or `/test/` in `element-web` 
+and `matrix-react-sdk`.
+
+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.
+
+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
+an istanbul magic comment as [documented here][1]. See example:
+```javascript
+/* istanbul ignore if */
+if (process.env.NODE_ENV !== "test") {
+    logger.error("Log line that is noisy enough in tests to want to skip");
+}
+```
+
+Tests validate that your change works as intended and also document
+concisely what is being changed. Ideally, your new tests fail
+prior to your change, and succeed once it has been applied. You may
+find this simpler to achieve if you write the tests first.
+
+If you're spiking some code that's experimental and not being used to support
+production features, exceptions can be made to requirements for tests.
+Note that tests will still be required in order to ship the feature, and it's
+strongly encouraged to think about tests early in the process, as adding
+tests later will become progressively more difficult.
+
+If you're not sure how to approach writing tests for your change, ask for help
+in [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
+
+Code style
+----------
+Element Web aims to target TypeScript/ES6. All new files should be written in
+TypeScript and existing files should use ES6 principles where possible.
+
+Members should not be exported as a default export in general - it causes problems
+with the architecture of the SDK (index file becomes less clear) and could
+introduce naming problems (as default exports get aliased upon import). In
+general, avoid using `export default`.
+
+The remaining code style is documented in [code_style.md](./code_style.md).
+Contributors are encouraged to it and follow the principles set out there.
+
+Please ensure your changes match the cosmetic style of the existing project,
+and ***never*** mix cosmetic and functional changes in the same commit, as it
+makes it horribly hard to review otherwise.
+
+Attribution
+-----------
+Everyone who contributes anything to Matrix is welcome to be listed in the
+AUTHORS.rst file for the project in question. Please feel free to include a
+change to AUTHORS.rst in your pull request to list yourself and a short
+description of the area(s) you've worked on. Also, we sometimes have swag to
+give away to contributors - if you feel that Matrix-branded apparel is missing
+from your life, please mail us your shipping address to matrix at matrix.org
+and we'll try to fix it :)
+
+Sign off
+--------
+In order to have a concrete record that your contribution is intentional
+and you agree to license it under the same terms as the project's license, we've
+adopted the same lightweight approach that the Linux Kernel
+(https://www.kernel.org/doc/Documentation/SubmittingPatches), Docker
+(https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other
+projects use: the DCO (Developer Certificate of Origin:
+http://developercertificate.org/). This is a simple declaration that you wrote
+the contribution or otherwise have the right to contribute it to Matrix:
+
+```
+Developer Certificate of Origin
+Version 1.1
+
+Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
+660 York Street, Suite 102,
+San Francisco, CA 94110 USA
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+(a) The contribution was created in whole or in part by me and I
+    have the right to submit it under the open source license
+    indicated in the file; or
+
+(b) The contribution is based upon previous work that, to the best
+    of my knowledge, is covered under an appropriate open source
+    license and I have the right under that license to submit that
+    work with modifications, whether created in whole or in part
+    by me, under the same open source license (unless I am
+    permitted to submit under a different license), as indicated
+    in the file; or
+
+(c) The contribution was provided directly to me by some other
+    person who certified (a), (b) or (c) and I have not modified
+    it.
+
+(d) I understand and agree that this project and the contribution
+    are public and that a record of the contribution (including all
+    personal information I submit with it, including my sign-off) is
+    maintained indefinitely and may be redistributed consistent with
+    this project or the open source license(s) involved.
+```
+
+If you agree to this for your contribution, then all that's needed is to
+include the line in your commit or pull request comment:
+
+```
+Signed-off-by: Your Name <your@email.example.org>
+```
+
+We accept contributions under a legally identifiable name, such as your name on
+government documentation or common-law names (names claimed by legitimate usage
+or repute). Unfortunately, we cannot accept anonymous contributions at this
+time.
+
+Git allows you to add this signoff automatically when using the `-s` flag to
+`git commit`, which uses the name and email set in your `user.name` and
+`user.email` git configs.
+
+If you forgot to sign off your commits before making your pull request and are
+on Git 2.17+ you can mass signoff using rebase:
+
+```
+git rebase --signoff origin/develop
+```
+
+Review expectations
+===================
+
+See https://github.com/vector-im/element-meta/wiki/Review-process
+
+
+Merge Strategy
+==============
+
+The preferred method for merging pull requests is squash merging to keep the
+commit history trim, but it is up to the discretion of the team member merging
+the change. We do not support rebase merges due to `allchange` being unable to
+handle them. When merging make sure to leave the default commit title, or 
+at least leave the PR number at the end in brackets like by default.
+When stacking pull requests, you may wish to do the following:
+
+1. Branch from develop to your branch (branch1), push commits onto it and open a pull request
+2. Branch from your base branch (branch1) to your work branch (branch2), push commits and open a pull request configuring the base to be branch1, saying in the description that it is based on your other PR.
+3. Merge the first PR using a merge commit otherwise your stacked PR will need a rebase. Github will automatically adjust the base branch of your other PR to be develop.
+
+
+[1]: https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
--- a/3
+++ b/3
@@ -27,9 +27,6 @@ FROM nginx:alpine

 COPY --from=builder /src/webapp /app

-# Insert wasm type into Nginx mime.types file so they load correctly.
-RUN sed -i '3i\ \ \ \ application/wasm wasm\;' /etc/nginx/mime.types
-
 # Override default nginx config
 COPY /nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf

--- a/README.md
+++ b/README.md
@@ -117,6 +117,13 @@ add_header X-Content-Type-Options nosniff;
 add_header X-XSS-Protection "1; mode=block";
 add_header Content-Security-Policy "frame-ancestors 'none'";
 ```
+For Apache, the configuration looks like:
+```
+Header set X-Frame-Options SAMEORIGIN
+Header set X-Content-Type-Options nosniff
+Header set X-XSS-Protection "1; mode=block"
+Header set Content-Security-Policy "frame-ancestors 'none'"
+```

 Note: In case you are already setting a `Content-Security-Policy` header
 elsewhere, you should modify it to include the `frame-ancestors` directive
--- a/code_style.md
+++ b/code_style.md
@@ -0,0 +1,455 @@
+# Element Web/Desktop code style guide
+
+This code style applies to projects which the element-web team directly maintains or is reasonably
+adjacent to. As of writing, these are:
+
+* element-desktop
+* element-web
+* matrix-react-sdk
+* matrix-js-sdk
+
+Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
+has stricter code organization to reduce the maintenance burden. These projects will declare their code
+style within their own repos.
+
+Note that some requirements will be layer-specific. Where the requirements don't make sense for the
+project, they are used to the best of their ability, used in spirit, or ignored if not applicable,
+in that order.
+
+## Guiding principles
+
+1. We want the lint rules to feel natural for most team members. No one should have to think too much
+   about the linter.
+2. We want to stay relatively close to [industry standards](https://google.github.io/styleguide/tsguide.html)
+   to make onboarding easier.
+3. We describe what good code looks like rather than point out bad examples. We do this to avoid
+   excessively punishing people for writing code which fails the linter.
+4. When something isn't covered by the style guide, we come up with a reasonable rule rather than
+   claim that it "passes the linter". We update the style guide and linter accordingly.
+5. While we aim to improve readability, understanding, and other aspects of the code, we deliberately
+   do not let solely our personal preferences drive decisions.
+6. We aim to have an understandable guide.
+
+## Coding practices
+
+1. Lint rules enforce decisions made by this guide. The lint rules and this guide are kept in
+   perfect sync.
+2. Commit messages are descriptive for the changes. When the project supports squash merging,
+   only the squashed commit needs to have a descriptive message.
+3. When there is disagreement with a code style approved by the linter, a PR is opened against
+   the lint rules rather than making exceptions on the responsible code PR.
+4. Rules which are intentionally broken (via eslint-ignore, @ts-ignore, etc) have a comment
+   included in the immediate vicinity for why. Determination of whether this is valid applies at
+   code review time.
+5. When editing a file, nearby code is updated to meet the modern standards. "Nearby" is subjective,
+   but should be whatever is reasonable at review time. Such an example might be to update the
+   class's code style, but not the file's.
+    1. These changes should be minor enough to include in the same commit without affecting a code
+       reviewer's job.
+
+## All code
+
+Unless otherwise specified, the following applies to all code:
+
+1. 120 character limit per line. Match existing code in the file if it is using a lower guide.
+2. A tab/indentation is 4 spaces.
+3. Newlines are Unix.
+4. A file has a single empty line at the end.
+5. Lines are trimmed of all excess whitespace, including blank lines.
+6. Long lines are broken up for readability.
+
+## TypeScript / JavaScript {#typescript-javascript}
+
+1. Write TypeScript. Turn JavaScript into TypeScript when working in the area.
+2. Use named exports.
+3. Break long lines to appear as follows:
+
+    ```typescript
+    // Function arguments
+    function doThing(
+        arg1: string,
+        arg2: string,
+        arg3: string,
+    ): boolean {
+        return !!arg1 
+            && !!arg2 
+            && !!arg3;
+    }
+
+    // Calling a function
+    doThing(
+        "String 1",
+        "String 2",
+        "String 3",
+    );
+
+    // Reduce line verbosity when possible/reasonable
+    doThing(
+        "String1", "String 2",
+        "A much longer string 3",
+    );
+
+    // Chaining function calls
+    something.doThing()
+        .doOtherThing()
+        .doMore()
+        .somethingElse(it =>
+            useIt(it)
+        );
+    ```
+4. Use semicolons for block/line termination.
+    1. Except when defining interfaces, classes, and non-arrow functions specifically.
+5. When a statement's body is a single line, it may be written without curly braces, so long as the body is placed on
+   the same line as the statement.
+
+    ```typescript
+    if (x) doThing();
+    ```
+6. Blocks for `if`, `for`, `switch` and so on must have a space surrounding the condition, but not
+   within the condition.
+
+    ```typescript
+    if (x) {
+        doThing();
+    }
+    ```
+7. Mixing of logical operands requires brackets to explicitly define boolean logic.
+
+    ```typescript
+    if ((a > b && b > c) || (d < e)) return true;
+    ```
+8. Ternaries use the same rules as `if` statements, plus the following:
+
+    ```typescript
+    // Single line is acceptable
+    const val = a > b ? doThing() : doOtherThing();
+
+    // Multiline is also okay
+    const val = a > b
+        ? doThing()
+        : doOtherThing();
+
+    // Use brackets when using multiple conditions.
+    // Maximum 3 conditions, prefer 2 or less.
+    const val = (a > b && b > c) ? doThing() : doOtherThing();
+    ```
+9. lowerCamelCase is used for function and variable naming.
+10. UpperCamelCase is used for general naming.
+11. Interface names should not be marked with an uppercase `I`.
+12. One variable declaration per line.
+13. If a variable is not receiving a value on declaration, its type must be defined.
+
+    ```typescript
+    let errorMessage: Optional<string>;
+    ```
+14. Objects, arrays, enums and so on must have each line terminated with a comma:
+
+    ```typescript
+    const obj = {
+        prop: 1,
+        else: 2,
+    };
+
+    const arr = [
+        "one",
+        "two",
+    ];
+
+    enum Thing {
+        Foo,
+        Bar,
+    }
+
+    doThing(
+        "arg1",
+        "arg2",
+    );
+    ```
+15. Objects can use shorthand declarations, including mixing of types.
+
+    ```typescript
+    {
+        room,
+        prop: this.prop,
+    }
+    // ... or ...
+    { room, prop: this.prop }
+    ```
+16. Object keys should always be non-strings when possible.
+
+    ```typescript
+    {
+        property: "value",
+        "m.unavoidable": true,
+        [EventType.RoomMessage]: true,
+    }
+    ```
+17. Explicitly cast to a boolean.
+
+    ```typescript
+    !!stringVar || Boolean(stringVar)
+    ```
+18. Use `switch` statements when checking against more than a few enum-like values.
+19. Use `const` for constants, `let` for mutability.
+20. Describe types exhaustively (ensure noImplictAny would pass).
+    1. Notable exceptions are arrow functions used as parameters, when a void return type is
+       obvious, and when declaring and assigning a variable in the same line.
+21. Declare member visibility (public/private/protected).
+22. Private members are private and not prefixed unless required for naming conflicts.
+    1. Convention is to use an underscore or the word "internal" to denote conflicted member names.
+    2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
+23. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
+24. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
+    1. Note that an explicit type is optional if not expected to be used outside of the function call,
+       unlike in this example:
+
+        ```typescript
+        interface MyObject {
+            hasString: boolean;
+        }
+
+        type Options = MyObject | string;
+
+        function doThing(arg: Options) {
+            // ...
+        }
+        ```
+25. Variables/properties which are `public static` should also be `readonly` when possible.
+26. Interface and type properties are terminated with semicolons, not commas.
+27. Prefer arrow formatting when declaring functions for interfaces/types:
+
+    ```typescript
+    interface Test {
+        myCallback: (arg: string) => Promise<void>;
+    }
+    ```
+28. Prefer a type definition over an inline type. For example, define an interface.
+29. Always prefer to add types or declare a type over the use of `any`. Prefer inferred types
+    when they are not `any`.
+    1. When using `any`, a comment explaining why must be present.
+30. `import` should be used instead of `require`, as `require` does not have types.
+31. Export only what can be reused.
+32. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
+    of truly optional parameters.
+    1. A notable exception is when the likelihood of a bug is minimal, such as when a function
+       takes an argument that is more often not required than required. An example where the
+       `?` operator is inappropriate is when taking a room ID: typically the caller should
+       supply the room ID if it knows it, otherwise deliberately acknowledge that it doesn't
+       have one with `null`.
+
+        ```typescript
+        function doThingWithRoom(
+            thing: string,
+            room: Optional<string>, // require the caller to specify
+        ) {
+            // ...
+        }
+        ```
+33. There should be approximately one interface, class, or enum per file unless the file is named
+    "types.ts", "global.d.ts", or ends with "-types.ts".
+    1. The file name should match the interface, class, or enum name.
+34. Bulk functions can be declared in a single file, though named as "foo-utils.ts" or "utils/foo.ts".
+35. Imports are grouped by external module imports first, then by internal imports.
+36. File ordering is not strict, but should generally follow this sequence:
+    1. Licence header
+    2. Imports
+    3. Constants
+    4. Enums
+    5. Interfaces
+    6. Functions
+    7. Classes
+        1. Public/protected/private static properties
+        2. Public/protected/private properties
+        3. Constructors
+        4. Public/protected/private getters & setters
+        5. Protected and abstract functions
+        6. Public/private functions
+        7. Public/protected/private static functions
+37. Variable names should be noticeably unique from their types. For example, "str: string" instead
+    of "string: string".
+38. Use double quotes to enclose strings. You may use single quotes if the string contains double quotes.
+
+    ```typescript
+    const example1 = "simple string";
+    const example2 = 'string containing "double quotes"';
+    ```
+39. Prefer async-await to promise-chaining
+
+    ```typescript
+    async function () {
+        const result = await anotherAsyncFunction();
+        // ...
+    }
+    ```
+
+## React
+
+Inheriting all the rules of TypeScript, the following additionally apply:
+
+1. Types for lifecycle functions are not required (render, componentDidMount, and so on).
+2. Class components must always have a `Props` interface declared immediately above them. It can be
+   empty if the component accepts no props.
+3. Class components should have an `State` interface declared immediately above them, but after `Props`.
+4. Props and State should not be exported. Use `React.ComponentProps<typeof ComponentNameHere>`
+   instead.
+5. One component per file, except when a component is a utility component specifically for the "primary"
+   component. The utility component should not be exported.
+6. Exported constants, enums, interfaces, functions, etc must be separate from files containing components
+   or stores.
+7. Stores should use a singleton pattern with a static instance property:
+
+    ```typescript
+    class FooStore {
+        public static readonly instance = new FooStore();
+
+        // or if the instance can't be created eagerly:
+        private static _instance: FooStore;
+        public static get instance(): FooStore {
+            if (!FooStore._instance) {
+                FooStore._instance = new FooStore();
+            }
+            return FooStore._instance;
+        }
+    }
+    ```
+8. Stores must support using an alternative MatrixClient and dispatcher instance.
+9. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
+   cycles during runtime where components accidentally include more of the app than they intended.
+10. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
+    if at all possible.
+11. A component should only use CSS class names in line with the component name.
+    1. When knowingly using a class name from another component, document it.
+12. Break components over multiple lines like so:
+
+    ```typescript
+    function render() {
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        />;
+
+        // or
+
+        return (
+            <Component
+                prop1="test"
+                prop2={this.state.variable}
+            />
+        );
+
+        // or if children are needed (infer parens usage)
+
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        >{ _t("Short string here") }</Component>;
+
+
+
+        return <Component
+            prop1="test"
+            prop2={this.state.variable}
+        >
+            { _t("Longer string here") }
+        </Component>;
+    }
+    ```
+13. Curly braces within JSX should be padded with a space, however properties on those components should not.
+    See above code example.
+14. Functions used as properties should either be defined on the class or stored in a variable. They should not
+    be inline unless mocking/short-circuiting the value.
+15. Prefer hooks (functional components) over class components. Be consistent with the existing area if unsure
+    which should be used.
+    1. Unless the component is considered a "structure", in which case use classes.
+16. Write more views than structures. Structures are chunks of functionality like MatrixChat while views are
+    isolated components.
+17. Components should serve a single, or near-single, purpose.
+18. Prefer to derive information from component properties rather than establish state.
+19. Do not use `React.Component::forceUpdate`.
+
+## Stylesheets (\*.pcss = PostCSS + Plugins)
+
+Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
+
+1. Class names must be prefixed with "mx_".
+2. Class names should denote the component which defines them, followed by any context:
+    1. mx_MyFoo
+    2. mx_MyFoo_avatar
+    3. mx_MyFoo_avatar--user
+3. Use the `$font` and `$spacing` variables instead of manual values.
+4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
+5. Use the whole class name instead of shortcuts:
+
+    ```scss
+    .mx_MyFoo {
+        & .mx_MyFoo_avatar { // instead of &_avatar
+            // ...
+        }
+    }
+    ```
+6. Break multiple selectors over multiple lines this way:
+
+    ```scss
+    .mx_MyFoo,
+    .mx_MyBar,
+    .mx_MyFooBar {
+        // ...
+    }
+    ```
+7. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
+8. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
+   documented for what the values mean:
+
+    ```scss
+    .mx_MyFoo {
+        width: calc(100% - 12px); // 12px for read receipts
+        top: -2px; // visually centred vertically
+        z-index: 10; // above user avatar, but below dialogs
+    }
+    ```
+9. Avoid the use of `!important`. If necessary, add a comment.
+
+## Tests
+
+1. Tests must be written in TypeScript.
+2. Jest mocks are declared below imports, but above everything else.
+3. Use the following convention template:
+
+    ```typescript
+    // Describe the class, component, or file name.
+    describe("FooComponent", () => {
+        // all test inspecific variables go here
+
+        beforeEach(() => {
+            // exclude if not used.
+        });
+
+        afterEach(() => {
+            // exclude if not used.
+        });
+
+        // Use "it should..." terminology
+        it("should call the correct API", async () => {
+            // test-specific variables go here
+
+            // function calls/state changes go here
+
+            // expectations go here
+        });
+    });
+
+    // If the file being tested is a utility class:
+    describe("foo-utils", () => {
+        describe("firstUtilFunction", () => {
+            it("should...", async () => {
+                // ...
+            });
+        });
+
+        describe("secondUtilFunction", () => {
+            it("should...", async () => {
+                // ...
+            });
+        });
+    });
+    ```
--- a/config.sample.json
+++ b/config.sample.json
@@ -44,5 +44,8 @@
    "jitsi": {
        "preferred_domain": "meet.element.io"
    },
+    "element_call": {
+        "url": "https://call.element.io"
+    },
    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }
--- a/docs/config.md
+++ b/docs/config.md
@@ -1,8 +1,12 @@
 # Configuration

-You can configure the app by copying `config.sample.json` to `config.json` and customising it. The possible options are
-described here. If you run into issues, please visit [#element-web:matrix.org](https://matrix.to/#/#element-web:matrix.org)
-on Matrix.
+You can configure the app by copying `config.sample.json` to `config.json` or `config.$domain.json` and customising it.
+Element will attempt to load first `config.$domain.json` and if it fails `config.json`. This mechanism allows different
+configuration options depending on if you're hitting e.g. `app1.example.com` or `app2.example.com`. Configs are not mixed
+in any way, it either entirely uses the domain config, or entirely uses `config.json`.
+
+The possible configuration options are described here. If you run into issues, please visit
+[#element-web:matrix.org](https://matrix.to/#/#element-web:matrix.org) on Matrix.

 For a good example of a production-tuned config, see https://app.element.io/config.json

@@ -243,8 +247,9 @@ When Element is deployed alongside a homeserver with SSO-only login, some option

 ## VoIP / Jitsi calls

-Currently, Element uses Jitsi to offer conference calls in rooms. A set of defaults are applied, pointing at our Jitsi instance,
-to ensure conference calling works, however you can point Element at your own Jitsi if you prefer.
+Currently, Element uses Jitsi to offer conference calls in rooms, with an experimental Element Call implementation in the works.
+A set of defaults are applied, pointing at our Jitsi and Element Call instances, to ensure conference calling works, however you
+can point Element at your own if you prefer.

 More information about the Jitsi setup can be found [here](./jitsi.md).

@@ -313,6 +318,11 @@ The VoIP and Jitsi options are:
   as defined by the `io.element.widgets.layout` state event.
 5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
   at any time without notice.
+6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
+   - `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
+      and may be removed at any time without notice. Defaults to `https://call.element.io`.
+   - `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`.

 ## Bug reporting

--- a/docs/labs.md
+++ b/docs/labs.md
@@ -108,10 +108,6 @@ To enable message previews for reactions in DMs only, enable `feature_roomlist_p
 Allows users to receive encrypted messages by creating a device that is stored
 encrypted on the server, as described in [MSC2697](https://github.com/matrix-org/matrix-doc/pull/2697).

-## Hidden read receipts (`feature_hidden_read_receipts`)
-
-Enables sending hidden read receipts as per [MSC2285](https://github.com/matrix-org/matrix-doc/pull/2285)
-
 ## Breadcrumbs v2 (`feature_breadcrumbs_v2`)

 Instead of showing the horizontal list of breadcrumbs under the filter field, the new UX is an interactive context menu
@@ -146,14 +142,6 @@ If no right panel state is known for the room or it was closed on the last room
 visit, it will default to the room member list. Otherwise, the saved card last
 used in that room is shown.

-## Show current profile of users on historical messages (`feature_use_only_current_profiles`)
-
-An experimental flag to determine how the app would behave if a user's current display
-name and avatar (profile) were shown on historical messages instead of the profile details
-at the time when the message was sent.
-
-When enabled, historical messages will use the current profile for the sender.
-
 ## Pin drop location sharing (`feature_location_share_pin_drop`) [In Development]

 Enables sharing a pin drop location to the timeline.
@@ -170,16 +158,22 @@ Threads can be access by clicking their summary below the root event on the room

 This feature might work in degraded mode if the homeserver a user is connected to does not advertise support for the unstable feature `org.matrix.msc3440`  when calling the `/versions` API endpoint.

-## Right-click Message Context Menu (`feature_message_right_click_context_menu`)
-
-Enables showing a right-click context menu when right-clicking messages in the
-timeline. This menu shows options that can usually be found in the message
-action bar or in the message options.
-
 ## Video rooms (`feature_video_rooms`)

 Enables support for creating and joining video rooms, which are persistent video chats that users can jump in and out of.

+## Element Call video rooms (`feature_element_call_video_rooms`) [In Development]
+
+Enables support for video rooms that use Element Call rather than Jitsi, and causes the 'New video room' option to create Element Call video rooms rather than Jitsi ones.
+
+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 and join 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.
+
 ## Rich text in room topics (`feature_html_topic`) [In Development]

 Enables rendering of MD / HTML in room topics.
@@ -188,3 +182,7 @@ Enables rendering of MD / HTML in room topics.

 Enables exploring public spaces in the new search dialog. Requires the server to
 have [MSC3827](https://github.com/matrix-org/matrix-spec-proposals/pull/3827) enabled.
+
+## Favourite Messages (`feature_favourite_messages`) [In Development]
+
+Enables users to bookmark a message or content for a later reference.
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -11,11 +11,11 @@ As of March 2022, skins are not fully supported; Element is the only available s
 To define a theme for Element:

 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
- 2. Fork `src/skins/vector/css/themes/dark.scss` to be `teal.scss`
- 3. Fork `src/skins/vector/css/themes/_base.scss` to be `_teal.scss`
- 4. Override variables in `_teal.scss` as desired. You may wish to delete ones
-    which don't differ from `_base.scss`, to make it clear which are being
-    overridden. If every single colour is being changed (as per `_dark.scss`)
+ 2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
+ 3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
+ 4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
+    which don't differ from `_base.pcss`, to make it clear which are being
+    overridden. If every single colour is being changed (as per `_dark.pcss`)
    then you might as well keep them all.
 5. Add the theme to the list of entrypoints in webpack.config.js
 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
--- a/element.io/app/deploy.py
+++ b/element.io/app/deploy.py
@@ -1,191 +0,0 @@
-#!/usr/bin/env python
-#
-# download and unpack a element-web tarball.
-#
-# Allows `bundles` to be extracted to a common directory, and a link to
-# config.json to be added.
-
-from __future__ import print_function
-
-import argparse
-import os
-import os.path
-import subprocess
-import sys
-import tarfile
-import shutil
-import glob
-
-try:
-    # python3
-    from urllib.request import urlretrieve
-except ImportError:
-    # python2
-    from urllib import urlretrieve
-
-class DeployException(Exception):
-    pass
-
-def create_relative_symlink(linkname, target):
-    relpath = os.path.relpath(target, os.path.dirname(linkname))
-    print ("Symlink %s -> %s" % (linkname, relpath))
-    os.symlink(relpath, linkname)
-
-
-def move_bundles(source, dest):
-    """Move the contents of the 'bundles' directory to a common dir
-
-    We check that we will not be overwriting anything before we proceed.
-
-    Args:
-        source (str): path to 'bundles' within the extracted tarball
-        dest (str): target common directory
-    """
-
-    if not os.path.isdir(dest):
-        os.mkdir(dest)
-
-    # build a map from source to destination, checking for non-existence as we go.
-    renames = {}
-    for f in os.listdir(source):
-        dst = os.path.join(dest, f)
-        if os.path.exists(dst):
-            print (
-                "Skipping bundle. The bundle includes '%s' which we have previously deployed."
-                % f
-            )
-        else:
-            renames[os.path.join(source, f)] = dst
-
-    for (src, dst) in renames.iteritems():
-        print ("Move %s -> %s" % (src, dst))
-        os.rename(src, dst)
-
-class Deployer:
-    def __init__(self):
-        self.packages_path = "."
-        self.bundles_path = None
-        self.should_clean = False
-        # filename -> symlink path e.g 'config.localhost.json' => '../localhost/config.json'
-        self.symlink_paths = {}
-        self.verify_signature = True
-
-    def deploy(self, tarball, extract_path):
-        """Download a tarball if necessary, and unpack it
-
-        Returns:
-            (str) the path to the unpacked deployment
-        """
-        print("Deploying %s to %s" % (tarball, extract_path))
-
-        name_str = os.path.basename(tarball).replace(".tar.gz", "")
-        extracted_dir = os.path.join(extract_path, name_str)
-        if os.path.exists(extracted_dir):
-            raise DeployException('Cannot unpack %s: %s already exists' % (
-                tarball, extracted_dir))
-
-        downloaded = False
-        if tarball.startswith("http://") or tarball.startswith("https://"):
-            tarball = self.download_and_verify(tarball)
-            print("Downloaded file: %s" % tarball)
-            downloaded = True
-
-        try:
-            with tarfile.open(tarball) as tar:
-                tar.extractall(extract_path)
-        finally:
-            if self.should_clean and downloaded:
-                os.remove(tarball)
-
-        print ("Extracted into: %s" % extracted_dir)
-
-        if self.symlink_paths:
-            for link_path, file_path in self.symlink_paths.iteritems():
-                create_relative_symlink(
-                    target=file_path,
-                    linkname=os.path.join(extracted_dir, link_path)
-                )
-
-        if self.bundles_path:
-            extracted_bundles = os.path.join(extracted_dir, 'bundles')
-            move_bundles(source=extracted_bundles, dest=self.bundles_path)
-
-            # replace the extracted_bundles dir (which may not be empty if some
-            # bundles were skipped) with a symlink to the common dir.
-            shutil.rmtree(extracted_bundles)
-            create_relative_symlink(
-                target=self.bundles_path,
-                linkname=extracted_bundles,
-            )
-        return extracted_dir
-
-    def download_and_verify(self, url):
-        tarball = self.download_file(url)
-
-        if self.verify_signature:
-            sigfile = self.download_file(url + ".asc")
-            subprocess.check_call(["gpg", "--verify", sigfile, tarball])
-
-        return tarball
-
-    def download_file(self, url):
-        if not os.path.isdir(self.packages_path):
-            os.mkdir(self.packages_path)
-        local_filename = os.path.join(self.packages_path,
-                                      url.split('/')[-1])
-        sys.stdout.write("Downloading %s -> %s..." % (url, local_filename))
-        sys.stdout.flush()
-        urlretrieve(url, local_filename)
-        print ("Done")
-        return local_filename
-
-if __name__ == "__main__":
-    parser = argparse.ArgumentParser("Deploy a Riot build on a web server.")
-    parser.add_argument(
-        "-p", "--packages-dir", default="./packages", help=(
-            "The directory to download the tarball into. (Default: '%(default)s')"
-        )
-    )
-    parser.add_argument(
-        "-e", "--extract-path", default="./deploys", help=(
-            "The location to extract .tar.gz files to. (Default: '%(default)s')"
-        )
-    )
-    parser.add_argument(
-        "-b", "--bundles-dir", nargs='?', default="./bundles", help=(
-            "A directory to move the contents of the 'bundles' directory to. A \
-            symlink to the bundles directory will also be written inside the \
-            extracted tarball. Example: './bundles'. \
-            (Default: '%(default)s')"
-        )
-    )
-    parser.add_argument(
-        "-c", "--clean", action="store_true", default=False, help=(
-            "Remove .tar.gz files after they have been downloaded and extracted. \
-            (Default: %(default)s)"
-        )
-    )
-    parser.add_argument(
-        "--include", nargs='*', default=['./config*.json'], help=(
-            "Symlink these files into the root of the deployed tarball. \
-             Useful for config files and home pages. Supports glob syntax. \
-             (Default: '%(default)s')"
-        )
-    )
-    parser.add_argument(
-        "tarball", help=(
-            "filename of tarball, or URL to download."
-        ),
-    )
-
-    args = parser.parse_args()
-
-    deployer = Deployer()
-    deployer.packages_path = args.packages_dir
-    deployer.bundles_path = args.bundles_dir
-    deployer.should_clean = args.clean
-
-    for include in args.include:
-        deployer.symlink_paths.update({ os.path.basename(pth): pth for pth in glob.iglob(include) })
-
-    deployer.deploy(args.tarball, args.extract_path)
--- a/element.io/develop/config.json
+++ b/element.io/develop/config.json
@@ -58,5 +58,8 @@
        "feature_spotlight": true,
        "feature_video_rooms": true
    },
+    "element_call": {
+        "url": "https://element-call.netlify.app"
+    },
    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-web",
-  "version": "1.11.1",
+  "version": "1.11.9-rc.1",
  "description": "A feature-rich client for Matrix.org",
  "author": "New Vector Ltd.",
  "repository": {
@@ -49,25 +49,26 @@
    "lint:js": "eslint --max-warnings 0 src module_system",
    "lint:js-fix": "eslint --fix src module_system",
    "lint:types": "tsc --noEmit --jsx react && tsc --noEmit --project ./tsconfig.module_system.json",
-    "lint:style": "stylelint \"res/css/**/*.scss\"",
+    "lint:style": "stylelint \"res/css/**/*.pcss\"",
    "test": "jest",
-    "coverage": "yarn test --coverage"
+    "coverage": "yarn test --coverage",
+    "analyse:unused-exports": "node ./scripts/analyse_unused_exports.js"
  },
  "dependencies": {
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
    "@matrix-org/react-sdk-module-api": "^0.0.3",
    "browser-request": "^0.3.3",
    "gfm.css": "^1.1.2",
    "jsrsasign": "^10.5.25",
-    "katex": "^0.12.0",
-    "matrix-js-sdk": "19.1.0",
-    "matrix-react-sdk": "3.49.0",
-    "matrix-widget-api": "^0.1.0-beta.18",
+    "katex": "^0.16.0",
+    "matrix-js-sdk": "20.1.0-rc.1",
+    "matrix-react-sdk": "3.58.0-rc.1",
+    "matrix-widget-api": "^1.1.1",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sanitize-html": "^2.3.2",
-    "ua-parser-js": "^0.7.24"
+    "ua-parser-js": "^0.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
@@ -89,29 +90,31 @@
    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
    "@sentry/webpack-plugin": "^1.18.1",
    "@svgr/webpack": "^5.5.0",
+    "@testing-library/react": "^12.1.5",
    "@types/flux": "^3.1.9",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^29.0.0",
    "@types/modernizr": "^3.5.3",
-    "@types/node": "^14.14.22",
-    "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.9",
+    "@types/node": "^14.18.28",
+    "@types/react": "^17.0.49",
+    "@types/react-dom": "^17.0.17",
    "@types/sanitize-html": "^2.3.1",
    "@types/ua-parser-js": "^0.7.36",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "allchange": "^1.0.6",
-    "autoprefixer": "^9.8.6",
-    "babel-jest": "^26.6.3",
+    "autoprefixer": "^10.4.8",
+    "babel-jest": "^29.0.0",
    "babel-loader": "^8.2.2",
    "chokidar": "^3.5.1",
    "concurrently": "^5.3.0",
    "cpx": "^1.5.0",
    "css-loader": "^3.6.0",
-    "dotenv": "^10.0.0",
-    "eslint": "8.9.0",
+    "dotenv": "^16.0.2",
+    "eslint": "8.23.1",
    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-deprecate": "^0.7.0",
    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-matrix-org": "^0.4.0",
+    "eslint-plugin-matrix-org": "^0.6.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
@@ -119,8 +122,10 @@
    "file-loader": "^5.1.0",
    "fs-extra": "^0.30.0",
    "html-webpack-plugin": "^4.5.2",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest": "^29.0.0",
+    "jest-canvas-mock": "^2.3.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "jest-mock": "^27.5.1",
    "jest-raw-loader": "^1.0.1",
    "jest-sonar-reporter": "^2.0.0",
    "json-loader": "^0.5.7",
@@ -128,22 +133,22 @@
    "matrix-mock-request": "^2.0.0",
    "matrix-react-test-utils": "^0.2.3",
    "matrix-web-i18n": "^1.3.0",
-    "mini-css-extract-plugin": "^0.12.0",
+    "mini-css-extract-plugin": "^1",
    "minimist": "^1.2.6",
    "mkdirp": "^1.0.4",
    "modernizr": "^3.12.0",
    "node-fetch": "^2.6.7",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss": "^8.4.16",
    "postcss-easings": "^2.0.0",
-    "postcss-hexrgba": "^2.0.1",
+    "postcss-hexrgba": "2.0.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-mixins": "^6.2.3",
    "postcss-nested": "^4.2.3",
    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^2.1.1",
+    "postcss-scss": "^4.0.4",
    "postcss-simple-vars": "^5.0.2",
-    "postcss-strip-inline-comments": "^0.1.5",
    "raw-loader": "^4.0.2",
    "rimraf": "^3.0.2",
    "semver": "^7.3.7",
@@ -151,11 +156,12 @@
    "simple-proxy-agent": "^1.1.0",
    "string-replace-loader": "2",
    "style-loader": "2",
-    "stylelint": "^13.9.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-scss": "^4.2.0",
    "terser-webpack-plugin": "^2.3.8",
-    "typescript": "^4.5.3",
+    "ts-prune": "^0.10.3",
+    "typescript": "4.7.4",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
@@ -163,19 +169,22 @@
    "worklet-loader": "^2.0.0",
    "yaml": "^2.0.1"
  },
-  "resolutions": {
-    "@types/react": "17.0.14"
-  },
  "jest": {
-    "testEnvironment": "jest-environment-jsdom-sixteen",
+    "testEnvironment": "jsdom",
+    "testEnvironmentOptions": {
+      "url": "http://localhost/"
+    },
    "testMatch": [
      "<rootDir>/test/**/*-test.[tj]s?(x)"
    ],
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
    "setupFilesAfterEnv": [
      "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
    ],
    "moduleNameMapper": {
-      "\\.(css|scss)$": "<rootDir>/__mocks__/cssMock.js",
+      "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
      "\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
      "\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
      "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
--- a/release.sh
+++ b/release.sh
@@ -1,68 +1,9 @@
 #!/bin/bash
 #
 # Script to perform a release of element-web.
-#
-# Requires github-changelog-generator; to install, do
-#   pip install git+https://github.com/matrix-org/github-changelog-generator.git

 set -e

-orig_args=$@
+cd "$(dirname "$0")"

-# chomp any args starting with '-' as these need to go
-# through to the release script and otherwise we'll get
-# confused about what the version arg is.
-while [[ "$1" == -* ]]; do
-    shift
-done
-
-cd `dirname $0`
-
-for i in matrix-js-sdk matrix-react-sdk
-do
-    echo "Checking version of $i..."
-    depver=`cat package.json | jq -r .dependencies[\"$i\"]`
-    latestver=`yarn info -s $i dist-tags.next`
-    if [ "$depver" != "$latestver" ]
-    then
-        echo "The latest version of $i is $latestver but package.json depends on $depver."
-        echo -n "Type 'u' to auto-upgrade, 'c' to continue anyway, or 'a' to abort:"
-        read resp
-        if [ "$resp" != "u" ] && [ "$resp" != "c" ]
-        then
-            echo "Aborting."
-            exit 1
-        fi
-        if [ "$resp" == "u" ]
-        then
-            echo "Upgrading $i to $latestver..."
-            yarn add -E $i@$latestver
-            git add -u
-            git commit -m "Upgrade $i to $latestver"
-        fi
-    fi
-done
-
-./node_modules/matrix-js-sdk/release.sh -n "$orig_args"
-
-release="${1#v}"
-tag="v${release}"
-prerelease=0
-# We check if this build is a prerelease by looking to
-# see if the version has a hyphen in it. Crude,
-# but semver doesn't support postreleases so anything
-# with a hyphen is a prerelease.
-echo $release | grep -q '-' && prerelease=1
-
-if [ $prerelease -eq 0 ]
-then
-    # For a release, reset SDK deps back to the `develop` branch.
-    for i in matrix-js-sdk matrix-react-sdk
-    do
-        echo "Resetting $i to develop branch..."
-        yarn add github:matrix-org/$i#develop
-        git add -u
-        git commit -m "Reset $i back to develop branch"
-    done
-    git push origin develop
-fi
+./node_modules/matrix-js-sdk/release.sh "$@"
--- a/release_config.yaml
+++ b/release_config.yaml
@@ -2,3 +2,5 @@ signing_id: releases@riot.im
 subprojects:
    matrix-react-sdk:
        includeByDefault: true
+    matrix-js-sdk:
+        includeByDefault: false
--- a/res/css/structures/ErrorView.pcss
+++ b/res/css/structures/ErrorView.pcss
@@ -14,16 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// import font-size variables manually, ideally this scss would get loaded by the theme which has all variables in context
-@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.scss";
+// import font-size variables manually,
+// ideally this file would get loaded by the theme which has all variables in context
+@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.pcss";

 .mx_ErrorView {
    background: #c5e0f7;
    background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
+    /* stylelint-disable-next-line function-no-unknown */
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol";
    width: 100%;
    min-height: 100%;
    height: auto;
--- a/scripts/analyse_unused_exports.js
+++ b/scripts/analyse_unused_exports.js
@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require("fs");
+const { exec } = require("node:child_process");
+
+const includeJSSDK = process.argv.includes("--include-js-sdk");
+const ignore = [];
+
+ignore.push(...Object.values(JSON.parse(fs.readFileSync(`${__dirname}/../components.json`))));
+ignore.push("/index.ts");
+// We ignore js-sdk by default as it may export for other non element-web projects
+if (!includeJSSDK) ignore.push("matrix-js-sdk");
+
+const command = `yarn ts-prune --ignore "${ignore.join("|")}" | grep -v "(used in module)"`;
+
+exec(command, (error, stdout, stderr) => {
+    if (error) throw error;
+    // We have to do this as piping the output of ts-prune causes the return
+    // code to be 0
+    if (stderr) throw Error(stderr);
+
+    let lines = stdout.split("\n");
+    // Remove the first line as that is the command that was being run and we
+    // log that only in case of an error
+    lines.splice(0, 1);
+    // Remove the last line as it is empty
+    lines.pop();
+
+    // ts-prune has bug where if the unused export is in a dependency, the path
+    // won't have an "/" character at the start, so we try to fix that for
+    // better UX
+    // TODO: This might break on Windows
+    lines = lines.reduce((newLines, line) => {
+        if (!line.startsWith("/")) newLines.push("/" + line);
+        else newLines.push(line);
+        return newLines;
+    }, []);
+
+    // If an unused export has been found, we error
+    if (lines.length > 0) {
+        console.log(`Command that was run: ${command}`);
+        console.log(lines.join("\n"));
+        throw Error("Unused exports found!");
+    }
+
+    console.log("Success - no unused exports found!");
+});
--- a/scripts/deploy.py
+++ b/scripts/deploy.py
@@ -1,13 +1,12 @@
-#!/usr/bin/env python
+#!/usr/bin/env python3
 #
 # download and unpack a element-web tarball.
 #
 # Allows `bundles` to be extracted to a common directory, and a link to
 # config.json to be added.

-from __future__ import print_function
-
 import argparse
+import errno
 import os
 import os.path
 import subprocess
@@ -15,21 +14,26 @@ import sys
 import tarfile
 import shutil
 import glob
+from urllib.request import urlretrieve

-try:
-    # python3
-    from urllib.request import urlretrieve
-except ImportError:
-    # python2
-    from urllib import urlretrieve

 class DeployException(Exception):
    pass

+
 def create_relative_symlink(linkname, target):
    relpath = os.path.relpath(target, os.path.dirname(linkname))
-    print ("Symlink %s -> %s" % (linkname, relpath))
-    os.symlink(relpath, linkname)
+    print("Symlink %s -> %s" % (linkname, relpath))
+
+    try:
+        os.symlink(relpath, linkname)
+    except OSError as e:
+        if e.errno == errno.EEXIST:
+            # atomic modification
+            os.symlink(relpath, linkname + ".tmp")
+            os.rename(linkname + ".tmp", linkname)
+        else:
+            raise e


 def move_bundles(source, dest):
@@ -50,33 +54,35 @@ def move_bundles(source, dest):
    for f in os.listdir(source):
        dst = os.path.join(dest, f)
        if os.path.exists(dst):
-            print (
+            print(
                "Skipping bundle. The bundle includes '%s' which we have previously deployed."
                % f
            )
        else:
            renames[os.path.join(source, f)] = dst

-    for (src, dst) in renames.iteritems():
-        print ("Move %s -> %s" % (src, dst))
+    for (src, dst) in renames.items():
+        print("Move %s -> %s" % (src, dst))
        os.rename(src, dst)

+
 class Deployer:
    def __init__(self):
        self.packages_path = "."
        self.bundles_path = None
        self.should_clean = False
+        self.symlink_latest = None
        # filename -> symlink path e.g 'config.localhost.json' => '../localhost/config.json'
        self.symlink_paths = {}
        self.verify_signature = True

-    def deploy(self, tarball, extract_path):
-        """Download a tarball if necessary, and unpack it
+    def fetch(self, tarball, extract_path):
+        """Download a tarball, verifies it if needed, and unpacks it

        Returns:
-            (str) the path to the unpacked deployment
+            (str) the path to the unpacked directory
        """
-        print("Deploying %s to %s" % (tarball, extract_path))
+        print("Fetching %s to %s" % (tarball, extract_path))

        name_str = os.path.basename(tarball).replace(".tar.gz", "")
        extracted_dir = os.path.join(extract_path, name_str)
@@ -97,10 +103,15 @@ class Deployer:
            if self.should_clean and downloaded:
                os.remove(tarball)

-        print ("Extracted into: %s" % extracted_dir)
+        print("Extracted into: %s" % extracted_dir)
+        return extracted_dir
+
+    def deploy(self, extracted_dir):
+        """Applies symlinks and handles the bundles directory on an extracted tarball"""
+        print("Deploying %s" % extracted_dir)

        if self.symlink_paths:
-            for link_path, file_path in self.symlink_paths.iteritems():
+            for link_path, file_path in self.symlink_paths.items():
                create_relative_symlink(
                    target=file_path,
                    linkname=os.path.join(extracted_dir, link_path)
@@ -117,7 +128,12 @@ class Deployer:
                target=self.bundles_path,
                linkname=extracted_bundles,
            )
-        return extracted_dir
+
+        if self.symlink_latest:
+            create_relative_symlink(
+                target=extracted_dir,
+                linkname=self.symlink_latest,
+            )

    def download_and_verify(self, url):
        tarball = self.download_file(url)
@@ -139,6 +155,7 @@ class Deployer:
        print ("Done")
        return local_filename

+
 if __name__ == "__main__":
    parser = argparse.ArgumentParser("Deploy a Riot build on a web server.")
    parser.add_argument(
@@ -173,8 +190,15 @@ if __name__ == "__main__":
        )
    )
    parser.add_argument(
-        "tarball", help=(
-            "filename of tarball, or URL to download."
+        "-s", "--symlink", dest="symlink", default="./latest", help=(
+            "Write a symlink to this location pointing to the extracted tarball. \
+            New builds will keep overwriting this symlink. The symlink will point \
+            to the webapp directory INSIDE the tarball."
+        )
+    )
+    parser.add_argument(
+        "target", help=(
+            "filename of extracted directory, tarball, or URL to download."
        ),
    )

@@ -184,8 +208,18 @@ if __name__ == "__main__":
    deployer.packages_path = args.packages_dir
    deployer.bundles_path = args.bundles_dir
    deployer.should_clean = args.clean
+    deployer.symlink_latest = args.symlink

    for include in args.include:
        deployer.symlink_paths.update({ os.path.basename(pth): pth for pth in glob.iglob(include) })

-    deployer.deploy(args.tarball, args.extract_path)
+    if os.path.isdir(args.target):
+        # If the given directory contains a single directory then use that instead, the ci package wraps in an extra dir
+        files = os.listdir(args.target)
+        if len(files) == 1 and os.path.isdir(os.path.join(args.target, files[0])):
+            extracted_dir = os.path.join(args.target, files[0])
+        else:
+            extracted_dir = args.target
+    else:
+        extracted_dir = deployer.fetch(args.target, args.extract_path)
+    deployer.deploy(extracted_dir)
--- a/scripts/docker-link-repos.sh
+++ b/scripts/docker-link-repos.sh
@@ -5,7 +5,7 @@ set -ex
 # Automatically link to develop if we're building develop, but only if the caller
 # hasn't asked us to build something else
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
-if [ $USE_CUSTOM_SDKS == false ] && [ $BRANCH == 'develop' ]
+if [[ $USE_CUSTOM_SDKS == false ]] && [[ $BRANCH == 'develop' ]]
 then
    echo "using develop dependencies for react-sdk and js-sdk"
    USE_CUSTOM_SDKS=true
@@ -13,21 +13,21 @@ then
    REACT_SDK_BRANCH='develop'
 fi

-if [ $USE_CUSTOM_SDKS == false ]
+if [[ $USE_CUSTOM_SDKS == false ]]
 then
    echo "skipping react-sdk and js-sdk installs: USE_CUSTOM_SDKS is false"
    exit 0
 fi

 echo "Linking js-sdk"
-git clone --depth 1 --branch $JS_SDK_BRANCH $JS_SDK_REPO js-sdk
+git clone --depth 1 --branch $JS_SDK_BRANCH "$JS_SDK_REPO" js-sdk
 cd js-sdk
 yarn link
 yarn --network-timeout=100000 install
 cd ../

 echo "Linking react-sdk"
-git clone --depth 1 --branch $REACT_SDK_BRANCH $REACT_SDK_REPO react-sdk
+git clone --depth 1 --branch $REACT_SDK_BRANCH "$REACT_SDK_REPO" react-sdk
 cd react-sdk
 yarn link
 yarn link matrix-js-sdk
--- a/scripts/docker-package.sh
+++ b/scripts/docker-package.sh
@@ -1,21 +1,20 @@
-#!/bin/sh
+#!/bin/bash

 set -ex

-TAG=$(git describe --tags)
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
-DIST_VERSION=$TAG
+DIST_VERSION=$(git describe --abbrev=0 --tags)
+
+DIR=$(dirname "$0")

 # If the branch comes out as HEAD then we're probably checked out to a tag, so if the thing is *not*
 # coming out as HEAD then we're on a branch. When we're on a branch, we want to resolve ourselves to
 # a few SHAs rather than a version.
-# Docker Hub doesn't always check out the tag and sometimes checks out the branch, so we should look
-# for an appropriately tagged branch as well (heads/v1.2.3).
 if [[ $BRANCH != HEAD && ! $BRANCH =~ heads/v.+ ]]
 then
-    DIST_VERSION=`$(dirname $0)/get-version-from-git.sh`
+    DIST_VERSION=$("$DIR"/get-version-from-git.sh)
 fi

-DIST_VERSION=`$(dirname $0)/normalize-version.sh ${DIST_VERSION}`
+DIST_VERSION=$("$DIR"/normalize-version.sh "$DIST_VERSION")
 VERSION=$DIST_VERSION yarn build
-echo $DIST_VERSION > /src/webapp/version
+echo "$DIST_VERSION" > /src/webapp/version
--- a/scripts/redeploy.py
+++ b/scripts/redeploy.py
@@ -12,10 +12,9 @@
 #   - flask
 #
 from __future__ import print_function
-import json, requests, tarfile, argparse, os, errno
+import requests, argparse, os, errno
 import time
 import traceback
-from urlparse import urljoin
 import glob
 import re
 import shutil
@@ -30,22 +29,11 @@ app = Flask(__name__)

 deployer = None
 arg_extract_path = None
-arg_symlink = None
 arg_webhook_token = None
 arg_api_token = None

 workQueue = Queue()

-def create_symlink(source, linkname):
-    try:
-        os.symlink(source, linkname)
-    except OSError, e:
-        if e.errno == errno.EEXIST:
-            # atomic modification
-            os.symlink(source, linkname + ".tmp")
-            os.rename(linkname + ".tmp", linkname)
-        else:
-            raise e

 def req_headers():
    return {
@@ -128,7 +116,7 @@ def on_receive_buildkite_poke():
    artifacts_resp = requests.get(artifacts_url, headers=req_headers())
    artifacts_resp.raise_for_status()
    artifacts_array = artifacts_resp.json()
-    
+
    artifact_to_deploy = None
    for artifact in artifacts_array:
        if re.match(r"dist/.*.tar.gz", artifact['path']):
@@ -173,7 +161,6 @@ def deploy_buildkite_artifact(artifact, pipeline_name, build_num):
        traceback.print_exc()
        abort(400, e.message)

-    create_symlink(source=extracted_dir, linkname=arg_symlink)

 def deploy_tarball(artifact, build_dir):
    """Download a tarball from jenkins and unpack it
@@ -274,7 +261,6 @@ if __name__ == "__main__":

    args = parser.parse_args()
    arg_extract_path = args.extract
-    arg_symlink = args.symlink
    arg_webbook_token = args.webhook_token
    arg_api_token = args.api_token
    arg_buildkite_org = args.buildkite_org
@@ -285,6 +271,7 @@ if __name__ == "__main__":
    deployer = Deployer()
    deployer.bundles_path = args.bundles_dir
    deployer.should_clean = args.clean
+    deployer.symlink_latest = args.symlink

    for include in args.include:
        deployer.symlink_paths.update({ os.path.basename(pth): pth for pth in glob.iglob(include) })
@@ -298,7 +285,7 @@ if __name__ == "__main__":
            (args.port,
             arg_extract_path,
             " (clean after)" if deployer.should_clean else "",
-             arg_symlink,
+             args.symlink,
             deployer.symlink_paths,
            )
        )
--- a/src/async-components/structures/CompatibilityView.tsx
+++ b/src/async-components/structures/CompatibilityView.tsx
@@ -19,8 +19,8 @@ import { _t } from "matrix-react-sdk/src/languageHandler";
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';

 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
-// scss variables will be accessible.
-import "../../../res/css/structures/ErrorView.scss";
+// PostCSS variables will be accessible.
+import "../../../res/css/structures/ErrorView.pcss";

 interface IProps {
    onAccept(): void;
--- a/src/async-components/structures/ErrorView.tsx
+++ b/src/async-components/structures/ErrorView.tsx
@@ -18,8 +18,8 @@ import * as React from "react";
 import { _t } from "matrix-react-sdk/src/languageHandler";

 // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
-// scss variables will be accessible.
-import "../../../res/css/structures/ErrorView.scss";
+// PostCSS variables will be accessible.
+import "../../../res/css/structures/ErrorView.pcss";

 interface IProps {
    // both of these should already be internationalised
--- a/src/components/views/auth/VectorAuthFooter.tsx
+++ b/src/components/views/auth/VectorAuthFooter.tsx
@@ -37,10 +37,10 @@ const VectorAuthFooter = () => {
    }

    return (
-        <div className="mx_AuthFooter">
+        <footer className="mx_AuthFooter" role="contentinfo">
            { authFooterLinks }
            <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t('Powered by Matrix') }</a>
-        </div>
+        </footer>
    );
 };

--- a/src/components/views/auth/VectorAuthHeaderLogo.tsx
+++ b/src/components/views/auth/VectorAuthHeaderLogo.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
+import * as React from 'react';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';

 export default class VectorAuthHeaderLogo extends React.PureComponent {
@@ -24,9 +24,9 @@ export default class VectorAuthHeaderLogo extends React.PureComponent {
        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";

        return (
-            <div className="mx_AuthHeaderLogo">
+            <aside className="mx_AuthHeaderLogo">
                <img src={logoUrl} alt="Element" />
-            </div>
+            </aside>
        );
    }
 }
--- a/src/components/views/auth/VectorAuthPage.tsx
+++ b/src/components/views/auth/VectorAuthPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { CSSProperties } from 'react';
+import * as React from 'react';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';

 import VectorAuthFooter from "./VectorAuthFooter";
@@ -47,12 +47,12 @@ export default class VectorAuthPage extends React.PureComponent {
            background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
        };

-        const modalStyle: CSSProperties = {
+        const modalStyle: React.CSSProperties = {
            position: 'relative',
            background: 'initial',
        };

-        const blurStyle: CSSProperties = {
+        const blurStyle: React.CSSProperties = {
            position: 'absolute',
            top: 0,
            right: 0,
@@ -62,7 +62,7 @@ export default class VectorAuthPage extends React.PureComponent {
            background: pageStyle.background,
        };

-        const modalContentStyle: CSSProperties = {
+        const modalContentStyle: React.CSSProperties = {
            display: 'flex',
            zIndex: 1,
            background: 'rgba(255, 255, 255, 0.59)',
--- a/src/favicon.ts
+++ b/src/favicon.ts
@@ -84,12 +84,19 @@ export default class Favicon {
        }
    }

-    private reset() {
+    private reset(): void {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
    }

-    private options(n: number | string, params: IParams) {
+    private options(n: number | string, params: IParams): {
+        n: string | number;
+        len: number;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } {
        const opt = {
            n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n,
            len: ("" + n).length,
@@ -124,7 +131,7 @@ export default class Favicon {
        return opt;
    }

-    private circle(n: number | string, opts?: Partial<IParams>) {
+    private circle(n: number | string, opts?: Partial<IParams>): void {
        const params = { ...this.params, ...opts };
        const opt = this.options(n, params);

@@ -177,19 +184,19 @@ export default class Favicon {
        this.context.closePath();
    }

-    private ready() {
+    private ready(): void {
        if (this.isReady) return;
        this.isReady = true;
        this.readyCb?.();
    }

-    private setIcon(canvas) {
+    private setIcon(canvas: HTMLCanvasElement): void {
        setImmediate(() => {
            this.setIconSrc(canvas.toDataURL("image/png"));
        });
    }

-    private setIconSrc(url) {
+    private setIconSrc(url: string): void {
        // if is attached to fav icon
        if (this.browser.ff || this.browser.opera) {
            // for FF we need to "recreate" element, attach to dom and remove old <link>
@@ -200,9 +207,7 @@ export default class Favicon {
            newIcon.setAttribute("type", "image/png");
            window.document.getElementsByTagName("head")[0].appendChild(newIcon);
            newIcon.setAttribute("href", url);
-            if (old.parentNode) {
-                old.parentNode.removeChild(old);
-            }
+            old.parentNode?.removeChild(old);
        } else {
            this.icons.forEach(icon => {
                icon.setAttribute("href", url);
@@ -210,7 +215,7 @@ export default class Favicon {
        }
    }

-    public badge(content: number | string, opts?: Partial<IParams>) {
+    public badge(content: number | string, opts?: Partial<IParams>): void {
        if (!this.isReady) {
            this.readyCb = () => {
                this.badge(content, opts);
@@ -227,7 +232,7 @@ export default class Favicon {
        this.setIcon(this.canvas);
    }

-    private static getLinks() {
+    private static getLinks(): HTMLLinkElement[] {
        const icons: HTMLLinkElement[] = [];
        const links = window.document.getElementsByTagName("head")[0].getElementsByTagName("link");
        for (const link of links) {
@@ -238,7 +243,7 @@ export default class Favicon {
        return icons;
    }

-    private static getIcons() {
+    private static getIcons(): HTMLLinkElement[] {
        // get favicon link elements
        let elms = Favicon.getLinks();
        if (elms.length === 0) {
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -5,7 +5,7 @@
    "Sign In": "Anmelden",
    "Create Account": "Konto erstellen",
    "Explore rooms": "Räume erkunden",
-    "Unexpected error preparing the app. See console for details.": "Unerwarteter Fehler bei der Vorbereitung der App. Siehe in die Konsole für mehr Details.",
+    "Unexpected error preparing the app. See console for details.": "Unerwarteter Fehler bei der Vorbereitung der App; mehr Details in der Konsole.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Ungültige Konfiguration: Es kann nur eine der Optionen default_server_config, default_server_name oder default_hs_url angegeben werden.",
    "Invalid configuration: no default server specified.": "Ungültige Konfiguration: Es wurde kein Standardserver angegeben.",
    "The message from the parser is: %(message)s": "Die Nachricht des Parsers ist: %(message)s",
@@ -21,7 +21,7 @@
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Du kannst deinen aktuellen Browser weiterhin verwenden. Es ist aber möglich, dass nicht alles richtig funktioniert oder das Aussehen der App inkorrekt ist.",
    "I understand the risks and wish to continue": "Ich verstehe die Risiken und möchte fortfahren",
    "Your Element is misconfigured": "Dein Element ist falsch konfiguriert",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Deine Elementkonfiguration enthält ungültiges JSON. Bitte korrigiere das Problem und lade die Seite neu.",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Deine Element-Konfiguration enthält ungültiges JSON. Bitte korrigiere das Problem und lade die Seite neu.",
    "Download Completed": "Herunterladen fertiggestellt",
    "Open": "Öffnen",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s verwendet erweiterte Browserfunktionen, die von deinem Browser nicht unterstützt werden.",
--- a/src/i18n/strings/fa.json
+++ b/src/i18n/strings/fa.json
@@ -27,5 +27,6 @@
    "Go to element.io": "برو به element.io",
    "Failed to start": "خطا در شروع",
    "Powered by Matrix": "راه اندازی شده با استفاده از ماتریکس",
-    "Use %(brand)s on mobile": "از %(brand)s گوشی استفاده کنید"
+    "Use %(brand)s on mobile": "از %(brand)s گوشی استفاده کنید",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "همکاری چت غیرمتمرکز و رمزگذاری شده &amp; توسعه یافته با استفاده از $matrixLogo"
 }
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -14,7 +14,7 @@
    "Unable to load config file: please refresh the page to try again.": "A konfigurációs fájlt nem sikerült betölteni: frissítse az oldalt és próbálja meg újra.",
    "%(brand)s Desktop (%(platformName)s)": "Asztali %(brand)s (%(platformName)s)",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
-    "Unsupported browser": "A böngésző nem támogatott",
+    "Unsupported browser": "Nem támogatott böngésző",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "A legjobb élmény érdékében telepítsen <chromeLink>Chrome-ot</chromeLink>, <firefoxLink>Firefoxot</firefoxLink> vagy <safariLink>Safarit</safariLink>.",
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Folytathatja a jelenlegi böngészőjével, de néhány vagy az összes funkció használhatatlan lehet, vagy hibák lehetnek az alkalmazás kinézetében és viselkedésében.",
    "I understand the risks and wish to continue": "Megértettem a kockázatot és folytatom",
@@ -25,8 +25,8 @@
    "Your Element is misconfigured": "Az Element hibásan van beállítva",
    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Az Element érvénytelen JSON-t tartalmazó konfigurációval rendelkezik. Javítsa és töltse újra az oldalt.",
    "Your browser can't run %(brand)s": "A böngészője nem tudja futtatni ezt: %(brand)s",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s speciális böngészőfunkciókat használ, amelyeket a jelenlegi böngészője nem támogat.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "A(z) %(brand)s speciális böngészőfunkciókat használ, amelyeket a jelenlegi böngészője nem támogat.",
    "Powered by Matrix": "A gépházban: Matrix",
-    "Use %(brand)s on mobile": "Mobilon használd ezt: %(brand)s",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Elosztott, titkosított csevegés &amp; együttműködés ezzel: $matrixLogo"
+    "Use %(brand)s on mobile": "Mobilon használja ezt: %(brand)s",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Elosztott, titkosított csevegés és együttműködés ezzel: $matrixLogo"
 }
--- a/src/i18n/strings/id.json
+++ b/src/i18n/strings/id.json
@@ -1,21 +1,21 @@
 {
    "Dismiss": "Abaikan",
-    "Unknown device": "Perangkat tidak dikenal",
+    "Unknown device": "Perangkat tidak diketahui",
    "Welcome to Element": "Selamat datang di Element",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda berisi JSON yang tidak valid. Mohon perbaiki masalahnya dan muat ulang halamannya.",
-    "Invalid configuration: no default server specified.": "Konfigurasi tidak valid: server bawaan belum ditentukan.",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfigurasi Element Anda berisi JSON yang tidak absah. Mohon perbaiki masalahnya dan muat ulang laman ini.",
+    "Invalid configuration: no default server specified.": "Konfigurasi tidak absah: server bawaan belum ditentukan.",
    "Explore rooms": "Jelajahi ruangan",
    "Create Account": "Buat Akun",
-    "Go to your browser to complete Sign In": "Buka browser Anda untuk menyelesaikan Sign In",
+    "Go to your browser to complete Sign In": "Buka peramban Anda untuk menyelesaikan Sign In",
    "Sign In": "Masuk",
    "Failed to start": "Gagal untuk memulai",
    "Go to element.io": "Buka element.io",
    "I understand the risks and wish to continue": "Saya memahami risikonya dan ingin melanjutkan",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Anda dapat lanjut menggunakan browser Anda saat ini, tetapi beberapa atau semua fitur mungkin tidak berfungsi dan tampilan serta nuansa aplikasi mungkin salah.",
-    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Mohon instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman yang terbaik.",
-    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s menggunakan fitur browser lanjutan yang tidak didukung oleh browser Anda saat ini.",
-    "Your browser can't run %(brand)s": "Browser Anda tidak dapat menjalankan %(brand)s",
-    "Unsupported browser": "Browser tidak didukung",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Anda dapat melanjutkan menggunakan peramban Anda saat ini, tetapi beberapa atau semua fitur mungkin tidak berfungsi dan tampilan serta nuansa aplikasi mungkin tidak benar.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Silakan instal <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, atau <safariLink>Safari</safariLink> untuk pengalaman yang terbaik.",
+    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s menggunakan fitur peramban tingkat lanjut yang tidak didukung oleh peramban Anda saat ini.",
+    "Your browser can't run %(brand)s": "Peramban Anda tidak dapat menjalankan %(brand)s",
+    "Unsupported browser": "Peramban tidak didukung",
    "Use %(brand)s on mobile": "Gunakan %(brand)s di ponsel",
    "Powered by Matrix": "Diberdayakan oleh Matrix",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
@@ -23,10 +23,10 @@
    "Open": "Buka",
    "Download Completed": "Unduhan Selesai",
    "Unexpected error preparing the app. See console for details.": "Kesalahan tak terduga saat menyiapkan aplikasi. Lihat konsol untuk detail.",
-    "Unable to load config file: please refresh the page to try again.": "Tidak dapat memuat file konfigurasi: mohon muat ulang halaman ini untuk mencoba lagi.",
-    "Invalid JSON": "JSON tidak valid",
+    "Unable to load config file: please refresh the page to try again.": "Tidak dapat memuat file konfigurasi: mohon muat ulang laman ini untuk mencoba lagi.",
+    "Invalid JSON": "JSON tidak absah",
    "The message from the parser is: %(message)s": "Pesan dari pengurai adalah: %(message)s",
-    "Your Element is misconfigured": "Anda mengatur Element dengan salah",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Konfigurasi tidak valid: hanya bisa menentukan satu dari default_server_config, default_server_name, atau default_hs_url.",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Obrolan &amp; kolaborasi terdesentralisasi dan terenkripsi, diberdayakan oleh $matrixLogo"
+    "Your Element is misconfigured": "Anda salah mengatur Element",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Konfigurasi tidak absah: hanya bisa menentukan satu dari default_server_config, default_server_name, atau default_hs_url.",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Obrolan &amp; kolaborasi terdesentralisasi dan terenkripsi diberdayakan oleh $matrixLogo"
 }
--- a/src/i18n/strings/ko.json
+++ b/src/i18n/strings/ko.json
@@ -3,7 +3,7 @@
    "Unknown device": "알 수 없는 기기",
    "Welcome to Element": "Element에 오신 것을 환영합니다",
    "The message from the parser is: %(message)s": "파서에서 온 메시지: %(message)s",
-    "Invalid JSON": "잘못된 JSON",
+    "Invalid JSON": "유효하지 않은 JSON",
    "Unexpected error preparing the app. See console for details.": "앱을 준비하는 동안 예기치 않은 오류가 발생했습니다. 자세한 내용은 콘솔을 확인하세요.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "잘못된 설정: default_server_config 와 defalut_server_name, default_hs_url 중 하나만 지정할 수 있습니다.",
    "Invalid configuration: no default server specified.": "잘못된 설정: 기본 서버가 지정되지 않았습니다.",
@@ -16,9 +16,9 @@
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "Unsupported browser": "지원되지 않는 브라우저",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "최상의 경험을 위해 <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, 또는 <safariLink>Safari</safariLink>를 설치해주세요.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "현재 사용중이신 브라우저를 계속 사용하셔도 됩니다, 다만 일부 기능들이 작동하지 않을 수 있으며 애플리케이션이 잘못돼 보일 수 있습니다.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "현재 사용 중인 브라우저를 계속 사용할 수 있지만, 일부 기능들이 작동하지 않거나 애플리케이션이 올바르게 보여지지 않을 수 있습니다.",
    "I understand the risks and wish to continue": "위험하다는 것을 이해했으며 계속하고 싶습니다",
-    "Go to element.io": "element.io으로 가기",
+    "Go to element.io": "element.io 로 이동",
    "Failed to start": "시작 실패",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s 는 당신의 브라우저에서 지원되지 않는 고급 기능을 사용합니다.",
    "Your browser can't run %(brand)s": "당신의 브라우저는 %(brand)s 를 작동할 수 없습니다",
--- a/src/i18n/strings/lt.json
+++ b/src/i18n/strings/lt.json
@@ -27,5 +27,6 @@
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s naudoja išplėstines naršyklės funkcijas, kurių jūsų dabartinė naršyklė nepalaiko.",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Geriausiam veikimui suinstaliuokite <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, arba <safariLink>Safari</safariLink>.",
    "Powered by Matrix": "Veikia su Matrix",
-    "Use %(brand)s on mobile": "Naudoti %(brand)s mobiliajame telefone"
+    "Use %(brand)s on mobile": "Naudoti %(brand)s mobiliajame telefone",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Decentralizuotas, užšifruotų pokalbių &amp; bendradarbiavimas, paremtas $matrixLogo"
 }
--- a/src/i18n/strings/lv.json
+++ b/src/i18n/strings/lv.json
@@ -27,5 +27,6 @@
    "Your Element is misconfigured": "Jūsu Element ir nokonfigurēts kļūdaini",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s Galdvirsmas (%(platformName)s)",
-    "Use %(brand)s on mobile": "Mobilajā tālrunī izmanojiet %(brand)s"
+    "Use %(brand)s on mobile": "Mobilajā tālrunī izmanojiet %(brand)s",
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Decentralizēta, šifrēta saziņa &amp; sadarbība, ko nodrošina $matrixLogo"
 }
--- a/src/i18n/strings/pl.json
+++ b/src/i18n/strings/pl.json
@@ -16,7 +16,7 @@
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "Unsupported browser": "Niewspierana przeglądarka",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Zainstaluj <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, lub <safariLink>Safari</safariLink> w celu zapewnienia najlepszego działania.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Możesz kontynuować używanie obecnej przeglądarki, lecz niektóre lub wszystkie funkcje mogą nie działać oraz wygląd aplikacji może być niepoprawny.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Możesz kontynuować używając obecnej przeglądarki, lecz niektóre lub wszystkie funkcje mogą nie działać oraz wygląd aplikacji może być niepoprawny.",
    "I understand the risks and wish to continue": "Rozumiem ryzyko i chcę kontynuować",
    "Go to element.io": "Przejdź do element.io",
    "Failed to start": "Nie udało się wystartować",
@@ -24,12 +24,12 @@
    "Open": "Otwórz",
    "Your browser can't run %(brand)s": "Twoja przeglądarka nie obsługuje %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s używa zaawansowanych funkcji które nie są dostępne w obecnej przeglądarce.",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Konfiguracja Elementa zawiera niepoprawny JSON. Popraw konfiguracje i odśwież stronę.",
-    "Your Element is misconfigured": "Element jest nieprawidłowo skonfigurowany",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Twoja konfiguracja Elementa zawiera niepoprawny JSON. Rozwiąż problem i odśwież stronę.",
+    "Your Element is misconfigured": "Twój Element jest nieprawidłowo skonfigurowany",
    "Powered by Matrix": "Zasilane przez Matrix",
    "Use %(brand)s on mobile": "Użyj %(brand)s w telefonie",
    "Switch to space by number": "Przełącz na przestrzeń według numeru",
    "Next recently visited room or community": "Następne ostatnio odwiedzone pokoje i społeczności",
    "Previous recently visited room or community": "Ostatnio odwiedzone pokoje i społeczności",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Zdecentralizowany, szyfrowany czat i współpraca wspierana przez $matrixLogo"
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Zdecentralizowany, szyfrowany czat i współpraca oparte na $matrixLogo"
 }
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -4,7 +4,7 @@
    "Welcome to Element": "Добро пожаловать в Element",
    "Sign In": "Войти",
    "Create Account": "Создать учётную запись",
-    "Explore rooms": "Список комнат",
+    "Explore rooms": "Обзор комнат",
    "Unexpected error preparing the app. See console for details.": "Неожиданная ошибка при подготовке приложения. Подробности см. в консоли.",
    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "Неверная конфигурация: можно указывать только один из следующих параметров: default_server_config, default_server_name или default_hs_url.",
    "Invalid configuration: no default server specified.": "Неверная конфигурация: сервер по умолчанию не указан.",
@@ -16,7 +16,7 @@
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "Unsupported browser": "Неподдерживаемый браузер",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Пожалуйста поставьте <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, или <safariLink>Safari</safariLink> для лучшей совместимости.",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Вы можете продолжать пользоваться этим браузером но некоторые возможности будут недоступны и интерфейс может быть отрисован неправильно.",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Вы можете продолжать пользоваться этим браузером, но некоторые возможности будут недоступны и интерфейс может быть отрисован неправильно.",
    "I understand the risks and wish to continue": "Я понимаю риск и хочу продолжить",
    "Go to element.io": "К element.io",
    "Failed to start": "Старт не удался",
--- a/src/i18n/strings/sl.json
+++ b/src/i18n/strings/sl.json
@@ -26,5 +26,6 @@
    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "Lahko nadaljujete z uporabo vašega trenutnega brskalnika, vendar lahko to privede do manjkajočih funkcionalnosti ali napačnega izgleda aplikacije.",
    "I understand the risks and wish to continue": "Razumem riziko in želim vseeno nadaljevati",
    "Go to element.io": "Pojdi na element.io",
-    "Failed to start": "Neuspel zagon"
+    "Failed to start": "Neuspel zagon",
+    "Use %(brand)s on mobile": "Uporabi %(brand)s na mobilni napravi"
 }
--- a/src/i18n/strings/te.json
+++ b/src/i18n/strings/te.json
@@ -1,4 +1,14 @@
 {
-    "Dismiss": "రద్దుచేసే",
-    "Unknown device": "తెలుయని పరికరం"
+    "Dismiss": "రద్దుచేయి",
+    "Unknown device": "తెలియని పరికరము",
+    "Go to element.io": "element.io కు వెళ్ళు",
+    "I understand the risks and wish to continue": "నాకు పర్యవసానాలు తెలిసే ముందుకు కొనసాగుతా",
+    "Explore rooms": "గదులను అన్వేెషించు",
+    "Welcome to Element": "ఎలిమెంట్ కు స్వాగతం",
+    "Failed to start": "ప్రారంభించుటలో విఫలం",
+    "Create Account": "ఖాతా తెరువు",
+    "Open": "తెరువు",
+    "Download Completed": "దిగుమతి పూర్తయినది",
+    "%(brand)s Desktop (%(platformName)s)": "%(brand)s డస్కటాప్ (%(platformName)s)",
+    "Unexpected error preparing the app. See console for details.": "ఆప్ ని తయారు చేసే ప్రక్రియాలో అనుకోని లోపం తలెత్తింది. మరిన్ని వివరాల కోసం కాన్సోల్ ను చూడండి."
 }
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -25,7 +25,7 @@
    "Go to your browser to complete Sign In": "Перейдіть у ваш браузер щоб завершити вхід",
    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
    "Powered by Matrix": "Працює на Matrix",
-    "Your browser can't run %(brand)s": "Ваш переглядач неспроможний запустити %(brand)s",
+    "Your browser can't run %(brand)s": "Ваш браузер не може запустити %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s використовує передові властивості, які ваш браузер не підтримує.",
    "Use %(brand)s on mobile": "Користуйтеся %(brand)s на мобільному",
    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "Децентралізована, зашифрована бесіда та співпраця на основі $matrixLogo"
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -3,31 +3,31 @@
    "Unknown device": "未知设备",
    "Welcome to Element": "欢迎来到 Element",
    "Sign In": "登录",
-    "Create Account": "创建账号",
-    "Explore rooms": "探索聊天室",
-    "The message from the parser is: %(message)s": "语法分析器的信息：%(message)s",
+    "Create Account": "创建账户",
+    "Explore rooms": "探索房间",
+    "The message from the parser is: %(message)s": "来自解析器的消息：%(message)s",
    "Invalid JSON": "无效的 JSON",
-    "Unexpected error preparing the app. See console for details.": "软件准备时出错，详细信息请查看控制台。",
-    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "配置无效: 只能设置 default_server_config、default_server_name 或 default_hs_url。",
-    "Invalid configuration: no default server specified.": "配置无效：没有设置默认服务器。",
-    "Unable to load config file: please refresh the page to try again.": "无法加载配置文件：请再次刷新页面。",
+    "Unexpected error preparing the app. See console for details.": "准备软件时出现意外错误，详细信息请查看控制台。",
+    "Invalid configuration: can only specify one of default_server_config, default_server_name, or default_hs_url.": "配置无效：只能指定default_server_config、default_server_name或default_hs_url其中之一。",
+    "Invalid configuration: no default server specified.": "配置无效：没有指定默认服务器。",
+    "Unable to load config file: please refresh the page to try again.": "无法加载配置文件：请刷新页面以重试。",
    "%(brand)s Desktop (%(platformName)s)": "%(brand)s 桌面版（%(platformName)s）",
    "Go to your browser to complete Sign In": "转到您的浏览器以完成登录",
-    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)",
+    "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s（%(browserName)s，%(osName)s）",
    "Unsupported browser": "不支持的浏览器",
    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "请安装 <chromeLink>Chrome</chromeLink>、<firefoxLink>Firefox</firefoxLink> 或 <safariLink>Safari</safariLink> 以获得最佳体验。",
-    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "您可以继续使用您目前的浏览器，但部分或全部的功能可能无法正常工作，应用程序的外观可能也看起来不正确。",
+    "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.": "您可以继续使用您目前的浏览器，但部分或全部功能可能无法正常工作，应用程序的外观可能也看起来不正确。",
    "I understand the risks and wish to continue": "我了解风险并希望继续",
    "Go to element.io": "前往 element.io",
    "Failed to start": "启动失败",
    "Your Element is misconfigured": "Element 配置错误",
-    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Element 配置文件中包含无效的 JSON，请改正错误并重新加载页面。",
-    "Download Completed": "下载成功",
+    "Your Element configuration contains invalid JSON. Please correct the problem and reload the page.": "Element 配置文件中包含无效的 JSON。请改正错误并重新加载页面。",
+    "Download Completed": "下载完成",
    "Open": "打开",
-    "Your browser can't run %(brand)s": "浏览器无法运行 %(brand)s",
+    "Your browser can't run %(brand)s": "你的浏览器无法运行 %(brand)s",
    "%(brand)s uses advanced browser features which aren't supported by your current browser.": "当前浏览器不支持 %(brand)s 所需的高级浏览器特性。",
    "Powered by Matrix": "由 Matrix 驱动",
    "Use %(brand)s on mobile": "在移动设备上使用 %(brand)s",
    "Switch to space by number": "按数字切换空间",
-    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "去中心化、加密的聊天与协作，威力本源 $matrixLogo"
+    "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo": "去中心化、加密的聊天与协作，由 $matrixLogo 驱动"
 }
--- a/src/vector/jitsi/index.pcss
+++ b/src/vector/jitsi/index.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// TODO: Match the user's theme: https://github.com/vector-im/element-web/issues/12794
+/* TODO: Match the user's theme: https://github.com/vector-im/element-web/issues/12794 */

@font-face {
    font-family: 'Nunito';
@@ -57,8 +57,8 @@ body, html {
    height: 100%;
    width: 100%;

-    // Hidden by default to avoid flashing the prejoin screen at the user when
-    // we're supposed to skip it anyways
+    /* Hidden by default to avoid flashing the prejoin screen at the user when */
+    /* we're supposed to skip it anyways */
    visibility: hidden;
 }

@@ -75,7 +75,7 @@ body, html {
 }

 #joinButton {
-    // A mix of AccessibleButton styles
+    /* A mix of AccessibleButton styles */
    cursor: pointer;
    padding: 7px 18px;
    text-align: center;
@@ -89,7 +89,7 @@ body, html {

 .icon {
    $icon-size: 42px;
-    margin-top: -$icon-size; // to visually center the form
+    margin-top: -$icon-size; /* to visually center the form */

    &::before {
        content: '';
@@ -102,7 +102,7 @@ body, html {
        display: block;
        width: $icon-size;
        height: $icon-size;
-        margin: 0 auto; // center
+        margin: 0 auto; /* center */
    }
 }

--- a/src/vector/jitsi/index.ts
+++ b/src/vector/jitsi/index.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 New Vector Ltd.
+Copyright 2020-2022 New Vector Ltd.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,8 +18,11 @@ import { KJUR } from 'jsrsasign';
 import {
    IOpenIDCredentials,
    IWidgetApiRequest,
+    IWidgetApiRequestData,
+    IWidgetApiResponseData,
    VideoConferenceCapabilities,
    WidgetApi,
+    WidgetApiAction,
 } from "matrix-widget-api";
 import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -29,7 +32,7 @@ import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
 import { getVectorConfig } from "../getconfig";

 // We have to trick webpack into loading our CSS for us.
-require("./index.scss");
+require("./index.pcss");

 const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';

@@ -58,9 +61,7 @@ let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
 let skipOurWelcomeScreen = false;

-const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev.detail, {});
-
-(async function() {
+const setupCompleted = (async () => {
    try {
        // Queue a config.json lookup asap, so we can use it later on. We want this to be concurrent with
        // other setup work and therefore do not block.
@@ -90,24 +91,88 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
        }

        // Set this up as early as possible because Element will be hitting it almost immediately.
-        let readyPromise: Promise<[void, void]>;
+        let widgetApiReady: Promise<void>;
        if (parentUrl && widgetId) {
            const parentOrigin = new URL(qsParam('parentUrl')).origin;
            widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
+
+            widgetApiReady = new Promise<void>(resolve => widgetApi.once("ready", resolve));
            widgetApi.requestCapabilities(VideoConferenceCapabilities);
-            readyPromise = Promise.all([
-                new Promise<void>(resolve => {
-                    widgetApi.once(`action:${ElementWidgetActions.ClientReady}`, ev => {
-                        ev.preventDefault();
-                        resolve();
-                        widgetApi.transport.reply(ev.detail, {});
-                    });
-                }),
-                new Promise<void>(resolve => {
-                    widgetApi.once("ready", () => resolve());
-                }),
-            ]);
            widgetApi.start();
+
+            const handleAction = (
+                action: WidgetApiAction,
+                handler: (request: IWidgetApiRequestData) => void,
+            ): void => {
+                widgetApi.on(`action:${action}`, async (ev: CustomEvent<IWidgetApiRequest>) => {
+                    ev.preventDefault();
+                    await setupCompleted;
+
+                    let response: IWidgetApiResponseData;
+                    try {
+                        await handler(ev.detail.data);
+                        response = {};
+                    } catch (e) {
+                        if (e instanceof Error) {
+                            response = { error: { message: e.message } };
+                        } else {
+                            throw e;
+                        }
+                    }
+
+                    await widgetApi.transport.reply(ev.detail, response);
+                });
+            };
+
+            handleAction(ElementWidgetActions.JoinCall, async ({ audioInput, videoInput }) => {
+                joinConference(audioInput as string | null, videoInput as string | null);
+            });
+            handleAction(ElementWidgetActions.HangupCall, async ({ force }) => {
+                if (force === true) {
+                    meetApi?.dispose();
+                    notifyHangup();
+                    meetApi = null;
+                    closeConference();
+                } else {
+                    meetApi?.executeCommand('hangup');
+                }
+            });
+            handleAction(ElementWidgetActions.MuteAudio, async () => {
+                if (meetApi && !await meetApi.isAudioMuted()) {
+                    meetApi.executeCommand('toggleAudio');
+                }
+            });
+            handleAction(ElementWidgetActions.UnmuteAudio, async () => {
+                if (meetApi && await meetApi.isAudioMuted()) {
+                    meetApi.executeCommand('toggleAudio');
+                }
+            });
+            handleAction(ElementWidgetActions.MuteVideo, async () => {
+                if (meetApi && !await meetApi.isVideoMuted()) {
+                    meetApi.executeCommand('toggleVideo');
+                }
+            });
+            handleAction(ElementWidgetActions.UnmuteVideo, async () => {
+                if (meetApi && await meetApi.isVideoMuted()) {
+                    meetApi.executeCommand('toggleVideo');
+                }
+            });
+            handleAction(ElementWidgetActions.TileLayout, async () => {
+                meetApi?.executeCommand('setTileView', true);
+            });
+            handleAction(ElementWidgetActions.SpotlightLayout, async () => {
+                meetApi?.executeCommand('setTileView', false);
+            });
+            handleAction(ElementWidgetActions.StartLiveStream, async ({ rtmpStreamKey }) => {
+                if (!meetApi) throw new Error("Conference not joined");
+                meetApi.executeCommand('startRecording', {
+                    mode: 'stream',
+                    // this looks like it should be rtmpStreamKey but we may be on too old
+                    // a version of jitsi meet
+                    //rtmpStreamKey,
+                    youtubeStreamKey: rtmpStreamKey,
+                });
+            });
        } else {
            logger.warn("No parent URL or no widget ID - assuming no widget API is available");
        }
@@ -136,7 +201,7 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
        toggleConferenceVisibility(skipOurWelcomeScreen);

        if (widgetApi) {
-            await readyPromise;
+            await widgetApiReady;

            // See https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
            if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
@@ -144,99 +209,6 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
                openIdToken = await widgetApi.requestOpenIDConnectToken();
                logger.log("Got OpenID Connect token");
            }
-
-            widgetApi.on(`action:${ElementWidgetActions.JoinCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    const { audioDevice, videoDevice } = ev.detail.data;
-                    joinConference(audioDevice as string | null, videoDevice as string | null);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.HangupCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('hangup');
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.ForceHangupCall}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.dispose();
-                    notifyHangup();
-                    meetApi = null;
-                    closeConference();
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.MuteAudio}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && !await meetApi.isAudioMuted()) {
-                        meetApi.executeCommand('toggleAudio');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.UnmuteAudio}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && await meetApi.isAudioMuted()) {
-                        meetApi.executeCommand('toggleAudio');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.MuteVideo}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && !await meetApi.isVideoMuted()) {
-                        meetApi.executeCommand('toggleVideo');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.UnmuteVideo}`,
-                async (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi && await meetApi.isVideoMuted()) {
-                        meetApi.executeCommand('toggleVideo');
-                    }
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.TileLayout}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('setTileView', true);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.SpotlightLayout}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    meetApi?.executeCommand('setTileView', false);
-                    ack(ev);
-                },
-            );
-            widgetApi.on(`action:${ElementWidgetActions.StartLiveStream}`,
-                (ev: CustomEvent<IWidgetApiRequest>) => {
-                    ev.preventDefault();
-                    if (meetApi) {
-                        meetApi.executeCommand('startRecording', {
-                            mode: 'stream',
-                            // this looks like it should be rtmpStreamKey but we may be on too old
-                            // a version of jitsi meet
-                            //rtmpStreamKey: ev.detail.data.rtmpStreamKey,
-                            youtubeStreamKey: ev.detail.data.rtmpStreamKey,
-                        });
-                        ack(ev);
-                    } else {
-                        widgetApi.transport.reply(ev.detail, { error: { message: "Conference not joined" } });
-                    }
-                },
-            );
        }

        // Now that everything should be set up, skip to the Jitsi splash screen if needed
@@ -245,13 +217,6 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
        }

        enableJoinButton(); // always enable the button
-
-        // Inform the client that we're ready to receive events
-        try {
-            await widgetApi?.transport.send(ElementWidgetActions.WidgetReady, {});
-        } catch (e) {
-            logger.error(e);
-        }
    } catch (e) {
        logger.error("Error setting up Jitsi widget", e);
        document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
@@ -346,11 +311,11 @@ function closeConference() {
 }

 // event handler bound in HTML
-// An audio device of undefined instructs Jitsi to start unmuted with whatever
-// audio device it can find, while a device of null instructs it to start muted,
-// and a non-nullish device specifies the label of a specific device to use.
-// Same for video devices.
-function joinConference(audioDevice?: string | null, videoDevice?: string | null) {
+// An audio input of undefined instructs Jitsi to start unmuted with whatever
+// audio input it can find, while an input of null instructs it to start muted,
+// and a non-nullish input specifies the label of a specific device to use.
+// Same for video inputs.
+function joinConference(audioInput?: string | null, videoInput?: string | null) {
    let jwt;
    if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
        if (!openIdToken?.access_token) { // eslint-disable-line camelcase
@@ -376,8 +341,8 @@ function joinConference(audioDevice?: string | null, videoDevice?: string | null
        parentNode: document.querySelector("#jitsiContainer"),
        roomName: conferenceId,
        devices: {
-            audioInput: audioDevice,
-            videoInput: videoDevice,
+            audioInput,
+            videoInput,
        },
        userInfo: {
            displayName,
@@ -392,8 +357,8 @@ function joinConference(audioDevice?: string | null, videoDevice?: string | null
        configOverwrite: {
            subject: roomName,
            startAudioOnly,
-            startWithAudioMuted: audioDevice === null,
-            startWithVideoMuted: videoDevice === null,
+            startWithAudioMuted: audioInput === null,
+            startWithVideoMuted: videoInput === null,
            // Request some log levels for inclusion in rageshakes
            // Ideally we would capture all possible log levels, but this can
            // cause Jitsi Meet to try to post various circular data structures
--- a/src/vector/platform/ElectronPlatform.tsx
+++ b/src/vector/platform/ElectronPlatform.tsx
@@ -175,9 +175,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
     * Return true if platform supports multi-language
     * spell-checking, otherwise false.
     */
-    public supportsMultiLanguageSpellCheck(): boolean {
-        // Electron uses OS spell checking on macOS, so no need for in-app options
-        if (isMac) return false;
+    public supportsSpellCheckSettings(): boolean {
        return true;
    }

@@ -305,7 +303,18 @@ export default class ElectronPlatform extends VectorBasePlatform {
        return this.ipc.call('setLanguage', preferredLangs);
    }

-    public setSpellCheckLanguages(preferredLangs: string[]) {
+    public setSpellCheckEnabled(enabled: boolean): void {
+        this.ipc.call('setSpellCheckEnabled', enabled).catch(error => {
+            logger.log("Failed to send setSpellCheckEnabled IPC to Electron");
+            logger.error(error);
+        });
+    }
+
+    public async getSpellCheckEnabled(): Promise<boolean> {
+        return this.ipc.call('getSpellCheckEnabled');
+    }
+
+    public setSpellCheckLanguages(preferredLangs: string[]): void {
        this.ipc.call('setSpellCheckLanguages', preferredLangs).catch(error => {
            logger.log("Failed to send setSpellCheckLanguages IPC to Electron");
            logger.error(error);
--- a/test/app-tests/joining-test.tsx
+++ b/test/app-tests/joining-test.tsx
@@ -1,229 +0,0 @@
-/*
-Copyright 2016 OpenMarket 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.
-*/
-
-/* joining.js: tests for the various paths when joining a room */
-
-import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
-import WebPlatform from '../../src/vector/platform/WebPlatform';
-import * as jssdk from "matrix-js-sdk/src/matrix";
-import "../jest-mocks";
-import React from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
-import {sleep} from "../test-utils";
-import MockHttpBackend from "matrix-mock-request";
-import "fake-indexeddb/auto";
-import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView';
-import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
-import RoomDirectory from "matrix-react-sdk/src/components/structures/RoomDirectory";
-import RoomPreviewBar from "matrix-react-sdk/src/components/views/rooms/RoomPreviewBar";
-
-const HS_URL='http://localhost';
-const IS_URL='http://localhost';
-const USER_ID='@me:localhost';
-const ACCESS_TOKEN='access_token';
-
-describe('joining a room', function() {
-    describe('over federation', function() {
-        let parentDiv;
-        let httpBackend;
-        let matrixChat;
-
-        beforeEach(function() {
-            httpBackend = new MockHttpBackend();
-            jssdk.request(httpBackend.requestFn);
-            parentDiv = document.createElement('div');
-
-            // uncomment this to actually add the div to the UI, to help with
-            // debugging (but slow things down)
-            // document.body.appendChild(parentDiv);
-        });
-
-        afterEach(function() {
-            if (parentDiv) {
-                ReactDOM.unmountComponentAtNode(parentDiv);
-                parentDiv.remove();
-                parentDiv = null;
-            }
-        });
-
-        // TODO: Re-enable test
-        // The test is currently disabled because the room directory now resides in a dialog,
-        // which is not accessible from the MatrixChat component anymore. Convincing react that
-        // the dialog does exist and is under a different tree is incredibly difficult though,
-        // so for now the test has been disabled. We should revisit this test when someone has
-        // the time to kill to figure this out. Problem area is highlighted within the test.
-        xit('should not get stuck at a spinner', function() {
-            const ROOM_ALIAS = '#alias:localhost';
-            const ROOM_ID = '!id:localhost';
-
-            httpBackend.when('GET', '/pushrules').respond(200, {});
-            httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
-
-            // note that we deliberately do *not* set an expectation for a
-            // presence update - setting one makes the first httpBackend.flush
-            // return before the first /sync arrives.
-
-            // start with a logged-in client
-            localStorage.setItem("mx_hs_url", HS_URL );
-            localStorage.setItem("mx_is_url", IS_URL );
-            localStorage.setItem("mx_access_token", ACCESS_TOKEN );
-            localStorage.setItem("mx_user_id", USER_ID);
-
-            PlatformPeg.set(new WebPlatform());
-
-            const config = {
-                validated_server_config: makeType(ValidatedServerConfig, {
-                    hsUrl: HS_URL,
-                    hsName: "TEST_ENVIRONMENT",
-                    hsNameIsDifferent: false, // yes, we lie
-                    isUrl: IS_URL,
-                }),
-            };
-
-            const mc = (
-                <MatrixChat
-                    config={config}
-                    serverConfig={config.validated_server_config}
-                    makeRegistrationUrl={()=>{throw new Error("unimplemented");}}
-                    initialScreenAfterLogin={{
-                        screen: 'directory',
-                    }}
-                />
-            );
-            matrixChat = ReactDOM.render(mc, parentDiv);
-
-            let roomView;
-
-            // wait for /sync to happen. This may take some time, as the client
-            // has to initialise indexeddb.
-            console.log("waiting for /sync");
-            httpBackend.when('GET', '/sync')
-                .respond(200, {});
-
-            return httpBackend.flushAllExpected({
-                timeout: 1000,
-            }).then(() => {
-                // wait for the directory requests
-                httpBackend.when('POST', '/publicRooms').respond(200, {chunk: []});
-                httpBackend.when('GET', '/thirdparty/protocols').respond(200, {});
-                return httpBackend.flushAllExpected();
-            }).then(() => {
-                console.log(`${Date.now()} App made requests for directory view; switching to a room.`);
-
-                // TODO: Make this look in the right spot for the directory dialog.
-                // See the comment block at the top of the test for a bit more information. The short
-                // story here is that the RoomDirectory does not exist under matrixChat anymore, or even
-                // the parentDiv we have access to. Asking React to find the RoomDirectory as a child of
-                // the document results in it complaining that you didn't give it a component tree to
-                // search in. When you do get a reference to the component tree based off the document
-                // root and ask it to search, it races and can't find the component in time. To top it
-                // all off, MatrixReactTestUtils can't find the element in time either even with a very
-                // high number of attempts. Assuming we can get a reference to the RoomDirectory in a
-                // dialog, the rest of the test should be fine.
-                const roomDir = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomDirectory,
-                );
-
-                // enter an alias in the input, and simulate enter
-                const input = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    roomDir, 'input') as HTMLInputElement;
-                input.value = ROOM_ALIAS;
-                ReactTestUtils.Simulate.change(input);
-                ReactTestUtils.Simulate.keyUp(input, {key: 'Enter'});
-
-                // that should create a roomview which will start a peek; wait
-                // for the peek.
-                httpBackend.when('GET', '/directory/room/'+encodeURIComponent(ROOM_ALIAS)).respond(200, { room_id: ROOM_ID });
-                httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ID)+"/initialSync")
-                    .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'});
-
-                return httpBackend.flushAllExpected();
-            }).then(() => {
-                console.log(`${Date.now()} App made room preview request`);
-
-                // we should now have a roomview
-                roomView = ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, RoomViewClass);
-
-                // the preview bar may take a tick to be displayed
-                return sleep(1);
-            }).then(() => {
-                const previewBar = ReactTestUtils.findRenderedComponentWithType(
-                    roomView, RoomPreviewBar);
-
-                const joinLink = ReactTestUtils.findRenderedDOMComponentWithTag(
-                    previewBar, 'a');
-
-                ReactTestUtils.Simulate.click(joinLink);
-
-                httpBackend.when('POST', '/join/'+encodeURIComponent(ROOM_ALIAS))
-                    .respond(200, {room_id: ROOM_ID});
-            }).then(() => {
-                // wait for the join request to be made
-                return sleep(1);
-            }).then(() => {
-                // and again, because the state update has to go to the store and
-                // then one dispatch within the store, then to the view
-                // XXX: This is *super flaky*: a better way would be to declare
-                // that we expect a certain state transition to happen, then wait
-                // for that transition to occur.
-                return sleep(1);
-            }).then(() => {
-                // the roomview should now be loading
-                expect(roomView.state.room).toBe(null);
-                expect(roomView.state.joining).toBe(true);
-
-                // there should be a spinner
-                ReactTestUtils.findRenderedDOMComponentWithClass(
-                    roomView, "mx_Spinner");
-
-                // flush it through
-                return httpBackend.flush('/join/'+encodeURIComponent(ROOM_ALIAS));
-            }).then(() => {
-                httpBackend.verifyNoOutstandingExpectation();
-
-                return sleep(1);
-            }).then(() => {
-                // NB. we don't expect the 'joining' flag to reset at any point:
-                // it will stay set and we observe whether we have Room object for
-                // the room and whether our member event shows we're joined.
-
-                // now send the room down the /sync pipe
-                httpBackend.when('GET', '/sync').
-                    respond(200, {
-                        rooms: {
-                            join: {
-                                [ROOM_ID]: {
-                                    state: {},
-                                    timeline: {
-                                        events: [],
-                                        limited: true,
-                                    },
-                                },
-                            },
-                        },
-                    });
-                return httpBackend.flush();
-            }).then(() => {
-                // now the room should have loaded
-                expect(roomView.state.room).toBeTruthy();
-            });
-        });
-    });
-});
--- a/test/app-tests/loading-test.tsx
+++ b/test/app-tests/loading-test.tsx
@@ -32,7 +32,7 @@ import * as test_utils from '../test-utils';
 import MockHttpBackend from 'matrix-mock-request';
 import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';
 import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from 'matrix-react-sdk/src/utils/ValidatedServerConfig';
 import {sleep} from "../test-utils";
 import "fake-indexeddb/auto";
 import {cleanLocalstorage} from "../test-utils";
--- a/test/unit-tests/snapshots/favicon-test.ts.snap
+++ b/test/unit-tests/snapshots/favicon-test.ts.snap
@@ -0,0 +1,431 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Favicon should clear a badge if called with a zero value 1`] = `
+[
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  {
+    "props": {
+      "fillRule": "nonzero",
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        {
+          "props": {
+            "x": 16.159999999999997,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        {
+          "props": {
+            "x": 22.4,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 31.999999999999996,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 9.92,
+            "y": 32,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 0.3200000000000003,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  {
+    "props": {
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  {
+    "props": {
+      "maxWidth": null,
+      "text": "123",
+      "x": 16,
+      "y": 29,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
+  },
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+]
+`;
+
+exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
+[
+  {
+    "props": {
+      "height": 32,
+      "width": 32,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  {
+    "props": {
+      "dHeight": 32,
+      "dWidth": 32,
+      "dx": 0,
+      "dy": 0,
+      "img": <img
+        height="32"
+        width="32"
+      />,
+      "sHeight": 32,
+      "sWidth": 32,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+  {
+    "props": {
+      "fillRule": "nonzero",
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        {
+          "props": {
+            "x": 16.159999999999997,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        {
+          "props": {
+            "x": 22.4,
+            "y": 12.8,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 31.999999999999996,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 9.92,
+            "y": 32,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+        {
+          "props": {
+            "x": 0.3200000000000003,
+            "y": 22.4,
+          },
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "lineTo",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  {
+    "props": {
+      "path": [
+        {
+          "props": {},
+          "transform": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+      ],
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  {
+    "props": {
+      "maxWidth": null,
+      "text": "123",
+      "x": 16,
+      "y": 29,
+    },
+    "transform": [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
+  },
+]
+`;
--- a/test/unit-tests/async-components/structures/ErrorView-test.tsx
+++ b/test/unit-tests/async-components/structures/ErrorView-test.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import ErrorView from "../../../../src/async-components/structures/ErrorView";
+
+describe("<ErrorView />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<ErrorView title="TITLE" messages={["MSG1", "MSG2"]} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
--- a/test/unit-tests/async-components/structures/snapshots/ErrorView-test.tsx.snap
+++ b/test/unit-tests/async-components/structures/snapshots/ErrorView-test.tsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorView /> should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_ErrorView"
+  >
+    <div
+      class="mx_ErrorView_container"
+    >
+      <div
+        class="mx_HomePage_header"
+      >
+        <span
+          class="mx_HomePage_logo"
+        >
+          <img
+            alt="Element"
+            height="42"
+            src="themes/element/img/logos/element-logo.svg"
+          />
+        </span>
+        <h1>
+          Failed to start
+        </h1>
+      </div>
+      <div
+        class="mx_HomePage_col"
+      >
+        <div
+          class="mx_HomePage_row"
+        >
+          <div>
+            <h2
+              id="step1_heading"
+            >
+              TITLE
+            </h2>
+            <p>
+              MSG1
+            </p>
+            <p>
+              MSG2
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_HomePage_row mx_Center mx_Spacer"
+      >
+        <p
+          class="mx_Spacer"
+        >
+          <a
+            class="mx_FooterLink"
+            href="https://element.io"
+            target="_blank"
+          >
+            Go to element.io
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
--- a/test/unit-tests/components/views/auth/VectorAuthFooter-test.tsx
+++ b/test/unit-tests/components/views/auth/VectorAuthFooter-test.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthFooter from "../../../../../src/components/views/auth/VectorAuthFooter";
+
+describe("<VectorAuthFooter />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthFooter />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
--- a/test/unit-tests/components/views/auth/VectorAuthHeaderLogo-test.tsx
+++ b/test/unit-tests/components/views/auth/VectorAuthHeaderLogo-test.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthHeaderLogo from "../../../../../src/components/views/auth/VectorAuthHeaderLogo";
+
+describe("<VectorAuthHeaderLogo />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthHeaderLogo />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
--- a/test/unit-tests/components/views/auth/VectorAuthPage-test.tsx
+++ b/test/unit-tests/components/views/auth/VectorAuthPage-test.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 * as React from "react";
+import { render } from "@testing-library/react";
+
+import VectorAuthPage from "../../../../../src/components/views/auth/VectorAuthPage";
+
+describe("<VectorAuthPage />", () => {
+    it("should match snapshot", () => {
+        const { asFragment } = render(<VectorAuthPage />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
--- a/test/unit-tests/components/views/auth/snapshots/VectorAuthFooter-test.tsx.snap
+++ b/test/unit-tests/components/views/auth/snapshots/VectorAuthFooter-test.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthFooter /> should match snapshot 1`] = `
+<DocumentFragment>
+  <footer
+    class="mx_AuthFooter"
+    role="contentinfo"
+  >
+    <a
+      href="https://element.io/blog"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Blog
+    </a>
+    <a
+      href="https://twitter.com/element_hq"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Twitter
+    </a>
+    <a
+      href="https://github.com/vector-im/element-web"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://matrix.org"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Powered by Matrix
+    </a>
+  </footer>
+</DocumentFragment>
+`;
--- a/test/unit-tests/components/views/auth/snapshots/VectorAuthHeaderLogo-test.tsx.snap
+++ b/test/unit-tests/components/views/auth/snapshots/VectorAuthHeaderLogo-test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthHeaderLogo /> should match snapshot 1`] = `
+<DocumentFragment>
+  <aside
+    class="mx_AuthHeaderLogo"
+  >
+    <img
+      alt="Element"
+      src="themes/element/img/logos/element-logo.svg"
+    />
+  </aside>
+</DocumentFragment>
+`;
--- a/test/unit-tests/components/views/auth/snapshots/VectorAuthPage-test.tsx.snap
+++ b/test/unit-tests/components/views/auth/snapshots/VectorAuthPage-test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VectorAuthPage /> should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AuthPage"
+  >
+    <div
+      class="mx_AuthPage_modal"
+      style="position: relative;"
+    >
+      <div
+        class="mx_AuthPage_modalBlur"
+        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
+      />
+      <div
+        class="mx_AuthPage_modalContent"
+        style="display: flex; z-index: 1; background: rgba(255, 255, 255, 0.59); border-radius: 8px;"
+      />
+    </div>
+    <footer
+      class="mx_AuthFooter"
+      role="contentinfo"
+    >
+      <a
+        href="https://element.io/blog"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Blog
+      </a>
+      <a
+        href="https://twitter.com/element_hq"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Twitter
+      </a>
+      <a
+        href="https://github.com/vector-im/element-web"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        GitHub
+      </a>
+      <a
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        Powered by Matrix
+      </a>
+    </footer>
+  </div>
+</DocumentFragment>
+`;
--- a/test/unit-tests/favicon-test.ts
+++ b/test/unit-tests/favicon-test.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 "jest-canvas-mock";
+
+import Favicon from "../../src/favicon";
+
+jest.useFakeTimers();
+
+describe("Favicon", () => {
+    beforeEach(() => {
+        const head = document.createElement("head");
+        window.document.documentElement.prepend(head);
+    });
+
+    it("should create a link element if one doesn't yet exist", () => {
+        const favicon = new Favicon();
+        expect(favicon).toBeTruthy();
+        const link = window.document.querySelector("link");
+        expect(link.rel).toContain("icon");
+    });
+
+    it("should draw a badge if called with a non-zero value", () => {
+        const favicon = new Favicon();
+        favicon.badge(123);
+        jest.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();
+        favicon.badge(0);
+        expect(favicon["context"].__getDrawCalls()).toMatchSnapshot();
+    });
+
+    it("should recreate link element for firefox and opera", () => {
+        window["InstallTrigger"] = {};
+        window["opera"] = {};
+        const favicon = new Favicon();
+        const originalLink = window.document.querySelector("link");
+        favicon.badge(123);
+        jest.runAllTimers();
+        const newLink = window.document.querySelector("link");
+        expect(originalLink).not.toStrictEqual(newLink);
+    });
+});
--- a/test/unit-tests/vector/platform/PWAPlatform-test.ts
+++ b/test/unit-tests/vector/platform/PWAPlatform-test.ts
@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { mocked } from "jest-mock";
+
 import PWAPlatform from "../../../../src/vector/platform/PWAPlatform";
+import WebPlatform from "../../../../src/vector/platform/WebPlatform";
+
+jest.mock("../../../../src/vector/platform/WebPlatform");

 describe('PWAPlatform', () => {
    beforeEach(() => {
@@ -29,5 +34,29 @@ describe('PWAPlatform', () => {
            platform.setNotificationCount(123);
            expect(navigator.setAppBadge).toHaveBeenCalledWith(123);
        });
+
+        it("should no-op if the badge count isn't changing", () => {
+            navigator.setAppBadge = jest.fn().mockResolvedValue(undefined);
+            const platform = new PWAPlatform();
+            platform.setNotificationCount(123);
+            expect(navigator.setAppBadge).toHaveBeenCalledTimes(1);
+            platform.setNotificationCount(123);
+            expect(navigator.setAppBadge).toHaveBeenCalledTimes(1);
+        });
+
+        it("should fall back to WebPlatform::setNotificationCount if no Navigator::setAppBadge", () => {
+            navigator.setAppBadge = undefined;
+            const platform = new PWAPlatform();
+            const superMethod = 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);
+            const platform = new PWAPlatform();
+            expect(() => platform.setNotificationCount(123)).not.toThrow();
+        });
    });
 });
--- a/test/unit-tests/vector/platform/WebPlatform-test.ts
+++ b/test/unit-tests/vector/platform/WebPlatform-test.ts
@@ -37,6 +37,45 @@ describe('WebPlatform', () => {
        expect(navigator.serviceWorker.register).toHaveBeenCalled();
    });

+    it("should call reload on window location object", () => {
+        delete window.location;
+        window.location = {
+            reload: jest.fn(),
+        } as unknown as Location;
+
+        const platform = new WebPlatform();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        platform.reload();
+        expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    it("should call reload to install update", () => {
+        delete window.location;
+        window.location = {
+            reload: jest.fn(),
+        } as unknown as Location;
+
+        const platform = new WebPlatform();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        platform.installUpdate();
+        expect(window.location.reload).toHaveBeenCalled();
+    });
+
+    describe("getDefaultDeviceDisplayName", () => {
+        it.each([[
+            "https://develop.element.io/#/room/!foo:bar",
+            "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",
+            "develop.element.io (Chrome, macOS)",
+        ]])("%s & %s = %s", (url, userAgent, result) => {
+            delete window.navigator;
+            window.navigator = { userAgent } as unknown as Navigator;
+            delete window.location;
+            window.location = { href: url } as unknown as Location;
+            const platform = new WebPlatform();
+            expect(platform.getDefaultDeviceDisplayName()).toEqual(result);
+        });
+    });
+
    describe('notification support', () => {
        const mockNotification = {
            requestPermission: jest.fn(),
--- a/test/unit-tests/vector/routing-test.ts
+++ b/test/unit-tests/vector/routing-test.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 { onNewScreen } from "../../../src/vector/routing";
+
+describe("onNewScreen", () => {
+    it("should replace history if stripping via fields", () => {
+        delete window.location;
+        window.location = {
+            hash: "#/room/!room:server?via=abc",
+            replace: jest.fn(),
+            assign: jest.fn(),
+        } as unknown as Location;
+        onNewScreen("room/!room:server");
+        expect(window.location.assign).not.toHaveBeenCalled();
+        expect(window.location.replace).toHaveBeenCalled();
+    });
+
+    it("should not replace history if changing rooms", () => {
+        delete window.location;
+        window.location = {
+            hash: "#/room/!room1:server?via=abc",
+            replace: jest.fn(),
+            assign: jest.fn(),
+        } as unknown as Location;
+        onNewScreen("room/!room2:server");
+        expect(window.location.assign).toHaveBeenCalled();
+        expect(window.location.replace).not.toHaveBeenCalled();
+    });
+});
--- a/test/unit-tests/vector/url_utils-test.ts
+++ b/test/unit-tests/vector/url_utils-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { parseQsFromFragment, parseQs } from "../../src/vector/url_utils";
+import { parseQsFromFragment, parseQs } from "../../../src/vector/url_utils";

 describe("url_utils.ts", function() {
    // @ts-ignore
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,14 +21,14 @@ if (!process.env.VERSION) {

 const cssThemes = {
    // CSS themes
-    "theme-legacy-light": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
-    "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
-    "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+    "theme-legacy-light": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.pcss",
+    "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.pcss",
+    "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.pcss",
    "theme-light-high-contrast":
-        "./node_modules/matrix-react-sdk/res/themes/light-high-contrast/css/light-high-contrast.scss",
-    "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
-    "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
-    "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
+        "./node_modules/matrix-react-sdk/res/themes/light-high-contrast/css/light-high-contrast.pcss",
+    "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.pcss",
+    "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.pcss",
+    "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss",
 };

 function getActiveThemes() {
@@ -187,8 +187,9 @@ module.exports = (env, argv) => {
                "react": path.resolve(__dirname, 'node_modules/react'),
                "react-dom": path.resolve(__dirname, 'node_modules/react-dom'),

-                // same goes for js-sdk - we don't need two copies.
+                // Same goes for js/react-sdk - we don't need two copies.
                "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
+                "matrix-react-sdk": path.resolve(__dirname, 'node_modules/matrix-react-sdk'),
                // and prop-types and sanitize-html
                "prop-types": path.resolve(__dirname, 'node_modules/prop-types'),
                "sanitize-html": path.resolve(__dirname, 'node_modules/sanitize-html'),
@@ -286,7 +287,6 @@ module.exports = (env, argv) => {
                                    // plain CSS together for the bundler.

                                    require("postcss-simple-vars")(),
-                                    require("postcss-strip-inline-comments")(),
                                    require("postcss-hexrgba")(),

                                    // It's important that this plugin is last otherwise we end
@@ -300,10 +300,10 @@ module.exports = (env, argv) => {
                    ],
                },
                {
-                    test: /\.scss$/,
+                    test: /\.pcss$/,
                    use: [
                        /**
-                         * This code is hopeful that no .scss outside of our themes will be directly imported in any
+                         * This code is hopeful that no .pcss outside of our themes will be directly imported in any
                         * of the JS/TS files.
                         * Should be MUCH better with webpack 5, but we're stuck to this solution for now.
                         */
@@ -349,14 +349,12 @@ module.exports = (env, argv) => {
                            options: {
                                sourceMap: true,
                                plugins: () => [
-                                    // Note that we use slightly different plugins for SCSS.
-
+                                    // Note that we use slightly different plugins for PostCSS.
                                    require('postcss-import')(),
                                    require("postcss-mixins")(),
                                    require("postcss-simple-vars")(),
                                    require("postcss-nested")(),
                                    require("postcss-easings")(),
-                                    require("postcss-strip-inline-comments")(),
                                    require("postcss-hexrgba")(),

                                    // It's important that this plugin is last otherwise we end
@@ -502,7 +500,7 @@ module.exports = (env, argv) => {
                },
                {
                    test: /\.svg$/,
-                    issuer: /\.(scss|css)$/,
+                    issuer: /\.(pcss|scss|css)$/,
                    use: [
                        {
                            loader: 'file-loader',
@@ -528,7 +526,7 @@ module.exports = (env, argv) => {
                    oneOf: [
                        {
                            // Assets referenced in CSS files
-                            issuer: /\.(scss|css)$/,
+                            issuer: /\.(pcss|scss|css)$/,
                            loader: 'file-loader',
                            options: {
                                esModule: false,
@@ -633,6 +631,10 @@ module.exports = (env, argv) => {
                new SentryCliPlugin({
                    release: process.env.VERSION,
                    include: "./webapp/bundles",
+                    errorHandler: (err, invokeErr, compilation) => {
+                        compilation.warnings.push('Sentry CLI Plugin: ' + err.message);
+                        console.log(`::warning title=Sentry error::${err.message}`);
+                    },
                }),
            new webpack.EnvironmentPlugin(['VERSION']),
        ].filter(Boolean),
--- a/yarn.lock
+++ b/yarn.lock