From 53db386731422c88d4e24e299e9e56a150dad3cf Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 10 Aug 2020 22:06:30 -0600
Subject: [PATCH 001/358] Add support for blurhash (MSC2448)

MSC: https://github.com/matrix-org/matrix-doc/pull/2448

While the image loads, we can show a blurred version of it (calculated at upload time) so we don't have a blank space in the timeline.
---
 package.json                                  |  1 +
 src/ContentMessages.tsx                       | 10 +++-
 .../views/elements/BlurhashPlaceholder.tsx    | 56 +++++++++++++++++++
 src/components/views/messages/MImageBody.js   | 18 +++---
 yarn.lock                                     |  5 ++
 5 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 src/components/views/elements/BlurhashPlaceholder.tsx

diff --git a/package.json b/package.json
index 548b33f353..989672d414 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@babel/runtime": "^7.10.5",
     "await-lock": "^2.0.1",
     "blueimp-canvas-to-blob": "^3.27.0",
+    "blurhash": "^1.1.3",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.2.6",
diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 6f55a75d0c..7e57b34ff7 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -334,6 +334,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
             if (file.type) {
                 encryptInfo.mimetype = file.type;
             }
+            // TODO: Blurhash for encrypted media?
             return {"file": encryptInfo};
         });
         (prom as IAbortablePromise<any>).abort = () => {
@@ -344,11 +345,15 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
     } else {
         const basePromise = matrixClient.uploadContent(file, {
             progressHandler: progressHandler,
+            onlyContentUri: false,
         });
-        const promise1 = basePromise.then(function(url) {
+        const promise1 = basePromise.then(function(body) {
             if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
-            return {"url": url};
+            return {
+                "url": body.content_uri,
+                "blurhash": body["xyz.amorgan.blurhash"], // TODO: Use `body.blurhash` when MSC2448 lands
+            };
         });
         promise1.abort = () => {
             canceled = true;
@@ -550,6 +555,7 @@ export default class ContentMessages {
             return upload.promise.then(function(result) {
                 content.file = result.file;
                 content.url = result.url;
+                content.info['xyz.amorgan.blurhash'] = result.blurhash; // TODO: Use `blurhash` when MSC2448 lands
             });
         }).then(() => {
             // Await previous message being sent into the room
diff --git a/src/components/views/elements/BlurhashPlaceholder.tsx b/src/components/views/elements/BlurhashPlaceholder.tsx
new file mode 100644
index 0000000000..bed45bfe5a
--- /dev/null
+++ b/src/components/views/elements/BlurhashPlaceholder.tsx
@@ -0,0 +1,56 @@
+/*
+ Copyright 2020 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 React from 'react';
+import {decode} from "blurhash";
+
+interface IProps {
+    blurhash: string;
+    width: number;
+    height: number;
+}
+
+export default class BlurhashPlaceholder extends React.PureComponent<IProps> {
+    private canvas: React.RefObject<HTMLCanvasElement> = React.createRef();
+
+    public componentDidMount() {
+        this.draw();
+    }
+
+    public componentDidUpdate() {
+        this.draw();
+    }
+
+    private draw() {
+        if (!this.canvas.current) return;
+
+        try {
+            const {width, height} = this.props;
+
+            const pixels = decode(this.props.blurhash, Math.ceil(width), Math.ceil(height));
+            const ctx = this.canvas.current.getContext("2d");
+            const imgData = ctx.createImageData(width, height);
+            imgData.data.set(pixels);
+            ctx.putImageData(imgData, 0, 0);
+        } catch (e) {
+            console.error("Error rendering blurhash: ", e);
+        }
+    }
+
+    public render() {
+        return <canvas height={this.props.height} width={this.props.width} ref={this.canvas} />;
+    }
+}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index c92ae475bf..e0ac24c641 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -27,6 +27,7 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import InlineSpinner from '../elements/InlineSpinner';
+import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
 
 export default class MImageBody extends React.Component {
     static propTypes = {
@@ -53,6 +54,8 @@ export default class MImageBody extends React.Component {
         this.onClick = this.onClick.bind(this);
         this._isGif = this._isGif.bind(this);
 
+        const imageInfo = this.props.mxEvent.getContent().info;
+
         this.state = {
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
@@ -63,6 +66,7 @@ export default class MImageBody extends React.Component {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
+            blurhash: imageInfo ? imageInfo['xyz.amorgan.blurhash'] : null, // TODO: Use `blurhash` when MSC2448 lands.
         };
 
         this._image = createRef();
@@ -329,7 +333,8 @@ export default class MImageBody extends React.Component {
             infoWidth = content.info.w;
             infoHeight = content.info.h;
         } else {
-            // Whilst the image loads, display nothing.
+            // Whilst the image loads, display nothing. We also don't display a blurhash image
+            // because we don't really know what size of image we'll end up with.
             //
             // Once loaded, use the loaded image dimensions stored in `loadedImageDimensions`.
             //
@@ -368,8 +373,7 @@ export default class MImageBody extends React.Component {
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             placeholder = <InlineSpinner w={32} h={32} />;
         } else if (!this.state.imgLoaded) {
-            // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
-            placeholder = this.getPlaceholder();
+            placeholder = this.getPlaceholder(maxWidth, maxHeight);
         }
 
         let showPlaceholder = Boolean(placeholder);
@@ -391,7 +395,7 @@ export default class MImageBody extends React.Component {
 
         if (!this.state.showImage) {
             img = <HiddenImagePlaceholder style={{ maxWidth: maxWidth + "px" }} />;
-            showPlaceholder = false; // because we're hiding the image, so don't show the sticker icon.
+            showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
         }
 
         if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
@@ -433,9 +437,9 @@ export default class MImageBody extends React.Component {
     }
 
     // Overidden by MStickerBody
-    getPlaceholder() {
-        // MImageBody doesn't show a placeholder whilst the image loads, (but it could do)
-        return null;
+    getPlaceholder(width, height) {
+        if (!this.state.blurhash) return null;
+        return <BlurhashPlaceholder blurhash={this.state.blurhash} width={width} height={height} />;
     }
 
     // Overidden by MStickerBody
diff --git a/yarn.lock b/yarn.lock
index 98fe42ef13..f1cace67a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2493,6 +2493,11 @@ blueimp-canvas-to-blob@^3.27.0:
   resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.27.0.tgz#a2bd5c43587b95dedf0f6998603452d1bfcc9b9e"
   integrity sha512-AcIj+hCw6WquxzJuzC6KzgYmqxLFeTWe88KuY2BEIsW1zbEOfoinDAGlhyvFNGt+U3JElkVSK7anA1FaSdmmfA==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
   version "4.11.9"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"

From 3df9557df2f886db13185872641b2f763baf41aa Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Wed, 24 Mar 2021 14:00:09 +0530
Subject: [PATCH 002/358] Dial Pad UI fix

---
 res/css/views/voip/_DialPad.scss            | 1 +
 res/css/views/voip/_DialPadContextMenu.scss | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
index 0c7bff0ce8..fd7c5f56f6 100644
--- a/res/css/views/voip/_DialPad.scss
+++ b/res/css/views/voip/_DialPad.scss
@@ -30,6 +30,7 @@ limitations under the License.
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
+    color: #15191e;
 }
 
 .mx_DialPad_deleteButton, .mx_DialPad_dialButton {
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 520f51cf93..c400060b6c 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -27,9 +27,11 @@ limitations under the License.
 }
 
 .mx_DialPadContextMenu_dialled {
-    height: 1em;
+    height: 1.5em;
     font-size: 18px;
     font-weight: 600;
+    max-width: 150px;
+    overflow: auto;
 }
 
 .mx_DialPadContextMenu_dialPad {

From 1488457c3322b6d5dd6ef7882d5b14d9bf49e20f Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Thu, 25 Mar 2021 01:31:45 +0530
Subject: [PATCH 003/358] Added the class -button-bg-color for all themes

---
 res/css/views/voip/_DialPad.scss               | 3 +--
 res/themes/dark/css/_dark.scss                 | 2 ++
 res/themes/legacy-dark/css/_legacy-dark.scss   | 1 +
 res/themes/legacy-light/css/_legacy-light.scss | 2 ++
 res/themes/light/css/_light.scss               | 2 ++
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.scss
index fd7c5f56f6..483b131bfe 100644
--- a/res/css/views/voip/_DialPad.scss
+++ b/res/css/views/voip/_DialPad.scss
@@ -23,14 +23,13 @@ limitations under the License.
 .mx_DialPad_button {
     width: 40px;
     height: 40px;
-    background-color: $theme-button-bg-color;
+    background-color: $dialpad-button-bg-color;
     border-radius: 40px;
     font-size: 18px;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     line-height: 40px;
-    color: #15191e;
 }
 
 .mx_DialPad_deleteButton, .mx_DialPad_dialButton {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 7a751ad9c1..42d592c1e1 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -114,6 +114,8 @@ $voipcall-plinth-color: #21262c;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #545454;
+
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $bg-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 764b8f302a..ae98141d06 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -111,6 +111,7 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #545454;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 9ad154dd93..4313e3c0b6 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -178,6 +178,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #e3e8f0;
+
 
 $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 25fbd0201b..81330d07c9 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -169,6 +169,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
+$dialpad-button-bg-color: #e3e8f0;
+
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: #ffffff;

From 3201ed2f0fe0e378c741d57d9a147d79b267b842 Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Mon, 26 Apr 2021 01:40:10 +0530
Subject: [PATCH 004/358] Added color scheme for the numbers

---
 res/css/views/voip/_DialPadContextMenu.scss  | 2 +-
 res/themes/dark/css/_dark.scss               | 3 ++-
 res/themes/legacy-dark/css/_legacy-dark.scss | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index c400060b6c..9879b7da1c 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,7 +30,7 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 150px;
+    max-width: 155px;
     overflow: auto;
 }
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 42d592c1e1..b83bd52f76 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -114,7 +114,8 @@ $voipcall-plinth-color: #21262c;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #545454;
+$dialpad-button-bg-color: #6F7882;
+;
 
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index ae98141d06..ff85375d35 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -111,7 +111,8 @@ $voipcall-plinth-color: #f2f5f8;
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
-$dialpad-button-bg-color: #545454;
+$dialpad-button-bg-color: #6F7882;
+;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-filter-active-bg-color: $roomlist-button-bg-color;

From 7509481bb9339e038027efa6564df9746b73518a Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Wed, 28 Apr 2021 02:46:43 +0530
Subject: [PATCH 005/358] Added the LTR support for the dialpad

---
 res/css/views/voip/_DialPadContextMenu.scss        | 14 ++++++++++++--
 .../views/context_menus/DialpadContextMenu.tsx     | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 9879b7da1c..c01ce0f2d9 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -30,8 +30,18 @@ limitations under the License.
     height: 1.5em;
     font-size: 18px;
     font-weight: 600;
-    max-width: 155px;
-    overflow: auto;
+    max-width: 150px;
+    border: none;
+    margin: 0px;
+  
+}
+.mx_DialPadContextMenu_dialled input{
+    font-size: 18px;
+    font-weight: 600;
+    overflow: hidden;
+    text-align: left;
+    direction: rtl;
+    background-color: rgb(0, 0, 0, 0);
 }
 
 .mx_DialPadContextMenu_dialPad {
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 17abce0c61..0a1d8184f2 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -18,6 +18,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { ContextMenu, IProps as IContextMenuProps } from '../../structures/ContextMenu';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import Field from "../elements/Field";
 import Dialpad from '../voip/DialPad';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
@@ -44,13 +45,23 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         this.setState({value: this.state.value + digit});
     }
 
+    onChange = (ev) => {
+        this.setState({value: ev.target.value});
+    }
+    
+
     render() {
         return <ContextMenu {...this.props}>
             <div className="mx_DialPadContextMenu_header">
                 <div>
                     <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
                 </div>
-                <div className="mx_DialPadContextMenu_dialled">{this.state.value}</div>
+                <form >
+                    <Field className="mx_DialPadContextMenu_dialled"
+                        value={this.state.value} autoFocus={true}
+                        onChange={this.onChange}
+                    />
+                </form>
             </div>
             <div className="mx_DialPadContextMenu_horizSep" />
             <div className="mx_DialPadContextMenu_dialPad">

From b42872daa409d27ad4634d2418fee2bfa7dccfea Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Sun, 2 May 2021 22:10:15 +0530
Subject: [PATCH 006/358] Fixed the Dial Pad and finalized the changes

---
 res/css/views/voip/_DialPadContextMenu.scss          |  5 +++--
 .../views/context_menus/DialpadContextMenu.tsx       | 12 +++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index c01ce0f2d9..31327113cf 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -33,14 +33,15 @@ limitations under the License.
     max-width: 150px;
     border: none;
     margin: 0px;
-  
 }
-.mx_DialPadContextMenu_dialled input{
+.mx_DialPadContextMenu_dialled input {
     font-size: 18px;
     font-weight: 600;
     overflow: hidden;
+    max-width: 150px;
     text-align: left;
     direction: rtl;
+    padding: 8px 0px;
     background-color: rgb(0, 0, 0, 0);
 }
 
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 0a1d8184f2..8879629055 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -48,7 +48,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
     onChange = (ev) => {
         this.setState({value: ev.target.value});
     }
-    
+
 
     render() {
         return <ContextMenu {...this.props}>
@@ -56,12 +56,10 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
                 <div>
                     <span className="mx_DialPadContextMenu_title">{_t("Dial pad")}</span>
                 </div>
-                <form >
-                    <Field className="mx_DialPadContextMenu_dialled"
-                        value={this.state.value} autoFocus={true}
-                        onChange={this.onChange}
-                    />
-                </form>
+                <Field className="mx_DialPadContextMenu_dialled"
+                    value={this.state.value} autoFocus={true}
+                    onChange={this.onChange}
+                />
             </div>
             <div className="mx_DialPadContextMenu_horizSep" />
             <div className="mx_DialPadContextMenu_dialPad">

From 24bf1b22a440ef810fac33b975015c65d1a3f03d Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Mon, 3 May 2021 13:54:42 +0530
Subject: [PATCH 007/358] Removes the override on the Bubble Container

---
 res/css/views/rooms/_EventTile.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2b3e179c54..5e110f9c6d 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -123,8 +123,6 @@ $left-gutter: 64px;
     .mx_EventTile_line {
         margin-right: 0;
         grid-column: 1 / 3;
-        // override default padding of mx_EventTile_line so that we can be centered
-        padding: 0 !important;
     }
 
     .mx_EventTile_msgOption {

From f367d617c506325237b4f56b76a97819e5f715f8 Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Fri, 7 May 2021 14:37:28 +0530
Subject: [PATCH 008/358] Added the extra classes

---
 res/css/views/rooms/_EventTile.scss     | 7 +++++++
 src/components/views/rooms/EventTile.js | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 5e110f9c6d..35a5d8fc15 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -123,11 +123,18 @@ $left-gutter: 64px;
     .mx_EventTile_line {
         margin-right: 0;
         grid-column: 1 / 3;
+        // override default padding of mx_EventTile_line so that we can be centered
+        padding: 0 !important;
     }
 
     .mx_EventTile_msgOption {
         grid-column: 2;
     }
+
+    .hidden {
+        // override the overriden padding for hidden events
+        padding-left: 64px !important;
+    }
 }
 
 .mx_EventTile_reply {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f6fb83c064..9e8f66705c 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -1101,7 +1101,7 @@ export default class EventTile extends React.Component {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
-                        <div className="mx_EventTile_line">
+                        <div className={`mx_EventTile_line ${ isBubbleMessage && tileHandler == "messages.ViewSourceEvent" ? "hidden" : ""}`}>
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }

From c84338704393d0598eaa30a29fda21ec52a950de Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Fri, 7 May 2021 18:32:38 +0530
Subject: [PATCH 009/358] Merge branch 'develop' into Bubble-bericht

---
 .eslintrc.js                                  |   1 -
 .gitignore                                    |   1 +
 CHANGELOG.md                                  | 118 +++
 README.md                                     |   2 +-
 package.json                                  |  19 +-
 res/css/_components.scss                      |   3 +
 res/css/structures/_RoomStatusBar.scss        |  97 ++-
 res/css/structures/_SpacePanel.scss           |  33 +-
 res/css/structures/_SpaceRoomDirectory.scss   | 108 +--
 res/css/structures/_SpaceRoomView.scss        | 108 +--
 .../dialogs/_AddExistingToSpaceDialog.scss    | 195 +++--
 res/css/views/elements/_AccessibleButton.scss |   8 +-
 res/css/views/elements/_ImageView.scss        |   3 +-
 res/css/views/elements/_ProgressBar.scss      |   2 +-
 res/css/views/messages/_MFileBody.scss        |   8 +-
 .../views/messages/_MVoiceMessageBody.scss    |  19 +
 res/css/views/messages/_MessageActionBar.scss |   8 +
 .../views/messages/_ReactionsRowButton.scss   |   4 +
 res/css/views/rooms/_EventTile.scss           |   4 -
 .../views/rooms/_VoiceRecordComposerTile.scss |  62 +-
 .../tabs/user/_HelpUserSettingsTab.scss       |  31 +
 .../voice_messages/_PlayPauseButton.scss      |  51 ++
 .../voice_messages/_PlaybackContainer.scss    |  53 ++
 res/css/views/voip/_CallView.scss             |  16 +-
 res/css/views/voip/_VideoFeed.scss            |  24 +-
 res/img/element-icons/pause.svg               |   4 +
 res/img/element-icons/play.svg                |   3 +
 res/img/element-icons/retry.svg               |   3 +
 res/img/element-icons/trashcan.svg            |   3 +
 res/themes/dark/css/_dark.scss                |  20 +-
 res/themes/legacy-dark/css/_legacy-dark.scss  |  20 +-
 .../legacy-light/css/_legacy-light.scss       |  29 +-
 res/themes/light/css/_light.scss              |  31 +-
 scripts/compare-file.js                       |  10 -
 scripts/gen-i18n.js                           | 304 --------
 scripts/prune-i18n.js                         |  68 --
 src/@types/global.d.ts                        |  22 +-
 src/Avatar.ts                                 |  15 +-
 src/BasePlatform.ts                           |   2 +-
 src/CallHandler.tsx                           | 119 +--
 src/CallMediaHandler.js                       |   5 +-
 src/GroupAddressPicker.js                     |  18 +-
 src/IdentityAuthClient.js                     |   2 +-
 src/KeyBindingsManager.ts                     |   6 +-
 src/Login.ts                                  |   7 +-
 src/PasswordReset.js                          |   2 +-
 src/Resend.js                                 |  10 +-
 ...calarAuthClient.js => ScalarAuthClient.ts} |  64 +-
 src/SlashCommands.tsx                         |   4 +-
 src/{Terms.js => Terms.ts}                    |  46 +-
 src/TextForEvent.js                           |  18 +-
 src/Unread.js                                 |   2 +-
 src/VoipUserMapper.ts                         |   6 +-
 ...exDialog.js => ManageEventIndexDialog.tsx} |  34 +-
 .../dialogs/security/CreateKeyBackupDialog.js |   8 +-
 .../security/CreateSecretStorageDialog.js     |  10 +-
 .../dialogs/security/ExportE2eKeysDialog.js   |   7 +-
 .../dialogs/security/ImportE2eKeysDialog.js   |  56 +-
 src/components/structures/FilePanel.js        |   8 +-
 src/components/structures/GroupFilterPanel.js |  20 +-
 src/components/structures/GroupView.js        |  95 +--
 src/components/structures/LeftPanel.tsx       |   4 +-
 src/components/structures/LoggedInView.tsx    |  20 +
 src/components/structures/MatrixChat.tsx      |   4 +-
 src/components/structures/MessagePanel.js     |  26 +-
 src/components/structures/RightPanel.js       |   5 +-
 src/components/structures/RoomSearch.tsx      |  21 +-
 src/components/structures/RoomStatusBar.js    | 155 ++--
 src/components/structures/RoomView.tsx        |  12 +-
 src/components/structures/ScrollPanel.js      |  26 +-
 .../structures/SpaceRoomDirectory.tsx         | 190 +++--
 src/components/structures/SpaceRoomView.tsx   | 189 ++++-
 src/components/structures/TimelinePanel.js    |  20 +-
 src/components/structures/auth/Login.tsx      |   4 +-
 .../structures/auth/Registration.tsx          |   4 +-
 .../auth/{SoftLogout.js => SoftLogout.tsx}    |  49 +-
 .../auth/InteractiveAuthEntryComponents.js    |   4 +-
 src/components/views/avatars/MemberAvatar.tsx |   4 +-
 src/components/views/avatars/RoomAvatar.tsx   |  11 +-
 .../views/context_menus/MessageContextMenu.js |  93 +--
 .../dialogs/AddExistingToSpaceDialog.tsx      | 310 +++++---
 .../views/dialogs/BugReportDialog.js          |   2 +-
 .../views/dialogs/ChangelogDialog.js          |   2 +-
 .../views/dialogs/ConfirmWipeDeviceDialog.js  |   9 +-
 .../views/dialogs/DevtoolsDialog.js           |  94 +--
 .../views/dialogs/IncomingSasDialog.js        |   2 +-
 .../dialogs/IntegrationsDisabledDialog.js     |   9 +-
 .../dialogs/IntegrationsImpossibleDialog.js   |   9 +-
 src/components/views/dialogs/InviteDialog.tsx |   2 +-
 .../dialogs/KeySignatureUploadFailedDialog.js |  10 +-
 .../views/dialogs/MessageEditHistoryDialog.js |   8 +-
 .../views/dialogs/RoomSettingsDialog.js       |   8 +-
 .../views/dialogs/ServerPickerDialog.tsx      |   6 +-
 .../dialogs/SessionRestoreErrorDialog.js      |   2 +-
 .../views/dialogs/StorageEvictedDialog.js     |  10 +-
 .../views/dialogs/UserSettingsDialog.js       |   8 +-
 .../dialogs/VerificationRequestDialog.js      |  12 +-
 .../dialogs/WidgetOpenIDPermissionsDialog.js  |   9 +-
 .../ConfirmDestroyCrossSigningDialog.js       |   9 +-
 .../security/RestoreKeyBackupDialog.js        |  59 +-
 src/components/views/elements/ActionButton.js |   4 +-
 src/components/views/elements/AppTile.js      |   2 +-
 .../views/elements/EditableItemList.js        |  26 +-
 src/components/views/elements/EditableText.js |  16 +-
 src/components/views/elements/ImageView.tsx   | 197 +++--
 .../views/elements/LabelledToggleSwitch.js    |   8 +-
 .../views/elements/LanguageDropdown.js        |   6 +-
 src/components/views/elements/Pill.js         |  24 +-
 .../views/elements/PowerSelector.js           |  15 +-
 .../views/elements/RoomAliasField.js          |  23 +-
 .../views/elements/ServerPicker.tsx           |   4 +-
 src/components/views/elements/TintableSvg.js  |  14 +-
 .../views/groups/GroupMemberList.js           |  12 +-
 .../views/groups/GroupPublicityToggle.js      |   6 +-
 src/components/views/groups/GroupRoomList.js  |  13 +-
 .../views/messages/EditHistoryMessage.js      |   1 -
 src/components/views/messages/MImageBody.js   |  35 +-
 .../messages/MKeyVerificationConclusion.js    |   4 +-
 .../views/messages/MVoiceMessageBody.tsx      | 106 +++
 .../views/messages/MVoiceOrAudioBody.tsx      |  39 +
 .../views/messages/MessageActionBar.js        | 125 ++-
 src/components/views/messages/MessageEvent.js |   6 +-
 .../views/messages/ReactionsRowButton.js      |   3 +-
 src/components/views/messages/TextualBody.js  |  11 +-
 src/components/views/right_panel/UserInfo.tsx |  18 +-
 .../views/room_settings/AliasSettings.js      |  17 +-
 .../room_settings/RoomProfileSettings.js      |  34 +-
 .../views/room_settings/UrlPreviewSettings.js |  14 +-
 src/components/views/rooms/EntityTile.js      |   7 +-
 .../rooms/{EventTile.js => EventTile.tsx}     | 461 ++++++-----
 .../views/rooms/LinkPreviewWidget.js          |   4 +-
 src/components/views/rooms/MemberList.js      |   5 +-
 ...MessageComposer.js => MessageComposer.tsx} | 160 ++--
 .../views/rooms/NotificationBadge.tsx         |   2 +-
 src/components/views/rooms/PinnedEventTile.js |  13 +-
 .../views/rooms/PinnedEventsPanel.js          |  20 +-
 .../views/rooms/ReadReceiptMarker.js          |   3 +-
 src/components/views/rooms/ReplyPreview.js    |   9 +-
 src/components/views/rooms/RoomDetailRow.js   |   8 +-
 src/components/views/rooms/RoomList.tsx       |   8 +-
 .../views/rooms/RoomListNumResults.tsx        |   6 +-
 src/components/views/rooms/RoomSublist.tsx    |   8 +-
 src/components/views/rooms/RoomTile.tsx       |  69 +-
 .../views/rooms/SendMessageComposer.js        |   5 +-
 src/components/views/rooms/Stickerpicker.js   |  38 +-
 ...MemberInfo.js => ThirdPartyMemberInfo.tsx} |  26 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   | 231 ++++--
 src/components/views/settings/ChangeAvatar.js |   2 +-
 .../views/settings/ChangePassword.js          |   4 +-
 .../views/settings/CrossSigningPanel.js       |   2 +-
 src/components/views/settings/DevicesPanel.js |   2 +-
 ...eAdvancedPanel.js => E2eAdvancedPanel.tsx} |   0
 ...EventIndexPanel.js => EventIndexPanel.tsx} | 140 ++--
 .../views/settings/Notifications.js           |  34 +-
 .../views/settings/ProfileSettings.js         |   8 +-
 .../{SetIdServer.js => SetIdServer.tsx}       |  78 +-
 .../views/settings/account/EmailAddresses.js  |  39 +-
 .../views/settings/account/PhoneNumbers.js    |  21 +-
 .../tabs/room/GeneralRoomSettingsTab.js       |  12 +-
 .../tabs/room/NotificationSettingsTab.js      |   6 +-
 ...ettingsTab.js => RolesRoomSettingsTab.tsx} |  71 +-
 ...ingsTab.js => SecurityRoomSettingsTab.tsx} | 144 ++--
 .../tabs/user/GeneralUserSettingsTab.js       |  19 +-
 ...SettingsTab.js => HelpUserSettingsTab.tsx} | 159 ++--
 ...tingsTab.js => MjolnirUserSettingsTab.tsx} |  54 +-
 ...sTab.js => PreferencesUserSettingsTab.tsx} |  64 +-
 .../tabs/user/SecurityUserSettingsTab.js      |  21 +-
 .../tabs/user/VoiceUserSettingsTab.js         |  12 +-
 .../views/spaces/SpaceTreeLevel.tsx           |   6 +-
 .../verification/VerificationCancelled.js     |  16 +-
 src/components/views/voice_messages/Clock.tsx |  10 +-
 .../voice_messages/LiveRecordingClock.tsx     |   8 +-
 .../voice_messages/LiveRecordingWaveform.tsx  |   8 +-
 .../views/voice_messages/PlayPauseButton.tsx  |  61 ++
 .../views/voice_messages/PlaybackClock.tsx    |  71 ++
 .../views/voice_messages/PlaybackWaveform.tsx |  68 ++
 .../voice_messages/RecordingPlayback.tsx      |  62 ++
 .../views/voice_messages/Waveform.tsx         |  17 +-
 src/components/views/voip/AudioFeed.tsx       |  97 +++
 .../views/voip/AudioFeedArrayForCall.tsx      |  60 ++
 src/components/views/voip/CallPreview.tsx     |  24 +-
 src/components/views/voip/CallView.tsx        | 162 +++-
 src/components/views/voip/CallViewForRoom.tsx |  16 +-
 src/components/views/voip/IncomingCallBox.tsx |   6 +-
 src/components/views/voip/VideoFeed.tsx       | 125 ++-
 src/customisations/Media.ts                   |   7 +
 src/editor/autocomplete.ts                    |   6 +-
 src/editor/model.ts                           |   2 +-
 src/editor/parts.ts                           |  43 +-
 src/editor/serialize.ts                       |   8 +-
 src/i18n/strings/cs.json                      | 163 ++--
 src/i18n/strings/da.json                      |   6 +-
 src/i18n/strings/de_DE.json                   | 140 ++--
 src/i18n/strings/en_EN.json                   |  68 +-
 src/i18n/strings/en_US.json                   |  10 +-
 src/i18n/strings/eo.json                      |  32 +-
 src/i18n/strings/es.json                      |  25 +-
 src/i18n/strings/et.json                      |  25 +-
 src/i18n/strings/fa.json                      | 322 +++++++-
 src/i18n/strings/fr.json                      |  37 +-
 src/i18n/strings/gl.json                      |  25 +-
 src/i18n/strings/hu.json                      |  25 +-
 src/i18n/strings/it.json                      |  25 +-
 src/i18n/strings/nl.json                      |  25 +-
 src/i18n/strings/ru.json                      |   3 +-
 src/i18n/strings/sq.json                      |  24 +-
 src/i18n/strings/sv.json                      |  25 +-
 src/i18n/strings/tzm.json                     | 121 ++-
 src/i18n/strings/zh_Hant.json                 |  25 +-
 src/indexing/BaseEventIndexManager.ts         |   6 +-
 src/indexing/EventIndex.js                    |  37 +-
 .../{EventIndexPeg.js => EventIndexPeg.ts}    |  19 +-
 src/linkify-matrix.js                         |   2 +-
 src/mjolnir/{BanList.js => BanList.ts}        |   0
 src/mjolnir/{ListRule.js => ListRule.ts}      |   0
 src/mjolnir/{Mjolnir.js => Mjolnir.ts}        |   0
 src/settings/Settings.ts                      |   5 +-
 src/stores/BreadcrumbsStore.ts                |   2 +-
 src/stores/CustomRoomTagStore.js              |   4 +-
 src/stores/GroupFilterOrderStore.js           |   8 +-
 src/stores/RoomViewStore.tsx                  |  19 +-
 src/stores/SpaceStore.tsx                     | 172 +++--
 src/stores/{TypingStore.js => TypingStore.ts} |  24 +-
 src/stores/VoiceRecordingStore.ts             |   2 +
 ...{WidgetEchoStore.js => WidgetEchoStore.ts} |  39 +-
 .../notifications/StaticNotificationState.ts  |   2 +
 src/stores/room-list/RoomListStore.ts         |  22 +-
 src/stores/room-list/algorithms/Algorithm.ts  |   9 +-
 .../algorithms/tag-sorting/RecentAlgorithm.ts | 140 ++--
 .../room-list/filters/VisibilityProvider.ts   |   8 +-
 ...scoveryUtils.js => AutoDiscoveryUtils.tsx} |  32 +-
 src/utils/DMRoomMap.ts                        |   9 +
 src/utils/ErrorUtils.js                       |   6 -
 src/utils/{MatrixGlob.js => MatrixGlob.ts}    |   0
 src/utils/MegolmExportEncryption.js           |   3 +-
 .../{StorageManager.js => StorageManager.ts}  |  12 +-
 src/utils/{Timer.js => Timer.ts}              |  70 +-
 src/utils/{TypeUtils.js => TypeUtils.ts}      |   0
 src/utils/arrays.ts                           |  26 +-
 ...ctor.js => ElementPermalinkConstructor.ts} |  24 +-
 ...Constructor.js => PermalinkConstructor.ts} |   0
 .../{Permalinks.js => Permalinks.ts}          | 167 ++--
 ...tructor.js => SpecPermalinkConstructor.ts} |   0
 src/utils/space.tsx                           |   1 +
 src/voice/Playback.ts                         | 147 ++++
 src/voice/PlaybackClock.ts                    |  78 ++
 src/voice/VoiceRecording.ts                   |  69 +-
 test/CallHandler-test.ts                      | 214 ++++++
 test/ScalarAuthClient-test.js                 |   2 +-
 test/autocomplete/QueryMatcher-test.js        |   2 +-
 .../dialogs/AccessSecretStorageDialog-test.js |  24 +-
 .../elements/MemberEventListSummary-test.js   |   9 +-
 .../components/views/rooms/MemberList-test.js |   2 +-
 test/components/views/rooms/RoomList-test.js  |  10 +-
 test/editor/deserialize-test.js               |   2 +-
 test/end-to-end-tests/src/session.js          |   8 +-
 test/end-to-end-tests/yarn.lock               |   6 +-
 test/stores/SpaceStore-test.ts                | 714 ++++++++++++++++++
 test/test-utils.js                            |  32 +-
 test/utils/MegolmExportEncryption-test.js     |  30 +-
 test/utils/ShieldUtils-test.js                |   6 +-
 test/utils/arrays-test.ts                     |  33 +
 test/utils/test-utils.ts                      |  33 +
 yarn.lock                                     | 113 ++-
 264 files changed, 7383 insertions(+), 3268 deletions(-)
 create mode 100644 res/css/views/messages/_MVoiceMessageBody.scss
 create mode 100644 res/css/views/voice_messages/_PlayPauseButton.scss
 create mode 100644 res/css/views/voice_messages/_PlaybackContainer.scss
 create mode 100644 res/img/element-icons/pause.svg
 create mode 100644 res/img/element-icons/play.svg
 create mode 100644 res/img/element-icons/retry.svg
 create mode 100644 res/img/element-icons/trashcan.svg
 delete mode 100644 scripts/compare-file.js
 delete mode 100755 scripts/gen-i18n.js
 delete mode 100755 scripts/prune-i18n.js
 rename src/{ScalarAuthClient.js => ScalarAuthClient.ts} (84%)
 rename src/{Terms.js => Terms.ts} (87%)
 rename src/async-components/views/dialogs/eventindex/{ManageEventIndexDialog.js => ManageEventIndexDialog.tsx} (90%)
 rename src/components/structures/auth/{SoftLogout.js => SoftLogout.tsx} (92%)
 create mode 100644 src/components/views/messages/MVoiceMessageBody.tsx
 create mode 100644 src/components/views/messages/MVoiceOrAudioBody.tsx
 rename src/components/views/rooms/{EventTile.js => EventTile.tsx} (79%)
 rename src/components/views/rooms/{MessageComposer.js => MessageComposer.tsx} (80%)
 rename src/components/views/rooms/{ThirdPartyMemberInfo.js => ThirdPartyMemberInfo.tsx} (91%)
 rename src/components/views/settings/{E2eAdvancedPanel.js => E2eAdvancedPanel.tsx} (100%)
 rename src/components/views/settings/{EventIndexPanel.js => EventIndexPanel.tsx} (65%)
 rename src/components/views/settings/{SetIdServer.js => SetIdServer.tsx} (89%)
 rename src/components/views/settings/tabs/room/{RolesRoomSettingsTab.js => RolesRoomSettingsTab.tsx} (89%)
 rename src/components/views/settings/tabs/room/{SecurityRoomSettingsTab.js => SecurityRoomSettingsTab.tsx} (79%)
 rename src/components/views/settings/tabs/user/{HelpUserSettingsTab.js => HelpUserSettingsTab.tsx} (64%)
 rename src/components/views/settings/tabs/user/{MjolnirUserSettingsTab.js => MjolnirUserSettingsTab.tsx} (90%)
 rename src/components/views/settings/tabs/user/{PreferencesUserSettingsTab.js => PreferencesUserSettingsTab.tsx} (80%)
 create mode 100644 src/components/views/voice_messages/PlayPauseButton.tsx
 create mode 100644 src/components/views/voice_messages/PlaybackClock.tsx
 create mode 100644 src/components/views/voice_messages/PlaybackWaveform.tsx
 create mode 100644 src/components/views/voice_messages/RecordingPlayback.tsx
 create mode 100644 src/components/views/voip/AudioFeed.tsx
 create mode 100644 src/components/views/voip/AudioFeedArrayForCall.tsx
 rename src/indexing/{EventIndexPeg.js => EventIndexPeg.ts} (94%)
 rename src/mjolnir/{BanList.js => BanList.ts} (100%)
 rename src/mjolnir/{ListRule.js => ListRule.ts} (100%)
 rename src/mjolnir/{Mjolnir.js => Mjolnir.ts} (100%)
 rename src/stores/{TypingStore.js => TypingStore.ts} (84%)
 rename src/stores/{WidgetEchoStore.js => WidgetEchoStore.ts} (71%)
 rename src/utils/{AutoDiscoveryUtils.js => AutoDiscoveryUtils.tsx} (91%)
 rename src/utils/{MatrixGlob.js => MatrixGlob.ts} (100%)
 rename src/utils/{StorageManager.js => StorageManager.ts} (96%)
 rename src/utils/{Timer.js => Timer.ts} (60%)
 rename src/utils/{TypeUtils.js => TypeUtils.ts} (100%)
 rename src/utils/permalinks/{ElementPermalinkConstructor.js => ElementPermalinkConstructor.ts} (82%)
 rename src/utils/permalinks/{PermalinkConstructor.js => PermalinkConstructor.ts} (100%)
 rename src/utils/permalinks/{Permalinks.js => Permalinks.ts} (76%)
 rename src/utils/permalinks/{SpecPermalinkConstructor.js => SpecPermalinkConstructor.ts} (100%)
 create mode 100644 src/voice/Playback.ts
 create mode 100644 src/voice/PlaybackClock.ts
 create mode 100644 test/CallHandler-test.ts
 create mode 100644 test/stores/SpaceStore-test.ts
 create mode 100644 test/utils/test-utils.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 99695b7a03..4959b133a0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,6 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-        "indent": "off",
     },
 
     overrides: [{
diff --git a/.gitignore b/.gitignore
index e1dd7726e1..50aa10fbfd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /*.log
 package-lock.json
 
+/coverage
 /node_modules
 /lib
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec73756ff9..d459b4e94a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,121 @@
+Changes in [3.19.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0) (2021-04-26)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.19.0-rc.1...v3.19.0)
+
+ * Upgrade to JS SDK 10.0.0
+ * [Release] Dynamic max and min zoom in the new ImageView
+   [\#5927](https://github.com/matrix-org/matrix-react-sdk/pull/5927)
+ * [Release] Add a WheelEvent normalization function
+   [\#5911](https://github.com/matrix-org/matrix-react-sdk/pull/5911)
+ * Add a WheelEvent normalization function
+   [\#5904](https://github.com/matrix-org/matrix-react-sdk/pull/5904)
+ * [Release] Use floats for image background opacity
+   [\#5907](https://github.com/matrix-org/matrix-react-sdk/pull/5907)
+
+Changes in [3.19.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0-rc.1) (2021-04-21)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0...v3.19.0-rc.1)
+
+ * Upgrade to JS SDK 10.0.0-rc.1
+ * Translations update from Weblate
+   [\#5896](https://github.com/matrix-org/matrix-react-sdk/pull/5896)
+ * Fix sticky tags header in room list
+   [\#5895](https://github.com/matrix-org/matrix-react-sdk/pull/5895)
+ * Fix spaces filtering sometimes lagging behind or behaving oddly
+   [\#5893](https://github.com/matrix-org/matrix-react-sdk/pull/5893)
+ * Fix issue with spaces context switching looping and breaking
+   [\#5894](https://github.com/matrix-org/matrix-react-sdk/pull/5894)
+ * Improve RoomList render time when filtering
+   [\#5874](https://github.com/matrix-org/matrix-react-sdk/pull/5874)
+ * Avoid being stuck in a space
+   [\#5891](https://github.com/matrix-org/matrix-react-sdk/pull/5891)
+ * [Spaces] Context switching
+   [\#5795](https://github.com/matrix-org/matrix-react-sdk/pull/5795)
+ * Warn when you attempt to leave room that you are the only member of
+   [\#5415](https://github.com/matrix-org/matrix-react-sdk/pull/5415)
+ * Ensure PersistedElement are unmounted on application logout
+   [\#5884](https://github.com/matrix-org/matrix-react-sdk/pull/5884)
+ * Add missing space in seshat dialog and the corresponding string
+   [\#5866](https://github.com/matrix-org/matrix-react-sdk/pull/5866)
+ * A tiny change to make the Add existing rooms dialog a little nicer
+   [\#5885](https://github.com/matrix-org/matrix-react-sdk/pull/5885)
+ * Remove weird margin from the file panel
+   [\#5889](https://github.com/matrix-org/matrix-react-sdk/pull/5889)
+ * Trigger lazy loading when filtering using spaces
+   [\#5882](https://github.com/matrix-org/matrix-react-sdk/pull/5882)
+ * Fix typo in method call in add existing to space dialog
+   [\#5883](https://github.com/matrix-org/matrix-react-sdk/pull/5883)
+ * New Image View fixes/improvements
+   [\#5872](https://github.com/matrix-org/matrix-react-sdk/pull/5872)
+ * Limit voice recording length
+   [\#5871](https://github.com/matrix-org/matrix-react-sdk/pull/5871)
+ * Clean up add existing to space dialog and include DMs in it too
+   [\#5881](https://github.com/matrix-org/matrix-react-sdk/pull/5881)
+ * Fix unknown slash command error exploding
+   [\#5853](https://github.com/matrix-org/matrix-react-sdk/pull/5853)
+ * Switch to a spec conforming email validation Regexp
+   [\#5852](https://github.com/matrix-org/matrix-react-sdk/pull/5852)
+ * Cleanup unused state in MessageComposer
+   [\#5877](https://github.com/matrix-org/matrix-react-sdk/pull/5877)
+ * Pulse animation for voice messages recording state
+   [\#5869](https://github.com/matrix-org/matrix-react-sdk/pull/5869)
+ * Don't include invisible rooms in notify summary
+   [\#5875](https://github.com/matrix-org/matrix-react-sdk/pull/5875)
+ * Properly disable composer access when recording a voice message
+   [\#5870](https://github.com/matrix-org/matrix-react-sdk/pull/5870)
+ * Stabilise starting a DM with multiple people flow
+   [\#5862](https://github.com/matrix-org/matrix-react-sdk/pull/5862)
+ * Render msgOption only if showReadReceipts is enabled
+   [\#5864](https://github.com/matrix-org/matrix-react-sdk/pull/5864)
+ * Labs: Add quick/cheap "do not disturb" flag
+   [\#5873](https://github.com/matrix-org/matrix-react-sdk/pull/5873)
+ * Fix ReadReceipts animations
+   [\#5836](https://github.com/matrix-org/matrix-react-sdk/pull/5836)
+ * Add tooltips to message previews
+   [\#5859](https://github.com/matrix-org/matrix-react-sdk/pull/5859)
+ * IRC Layout fix layout spacing in replies
+   [\#5855](https://github.com/matrix-org/matrix-react-sdk/pull/5855)
+ * Move user to welcome_page if continuing with previous session
+   [\#5849](https://github.com/matrix-org/matrix-react-sdk/pull/5849)
+ * Improve image view
+   [\#5521](https://github.com/matrix-org/matrix-react-sdk/pull/5521)
+ * Add a button to reset personal encryption state during login
+   [\#5819](https://github.com/matrix-org/matrix-react-sdk/pull/5819)
+ * Fix js-sdk import in SlashCommands
+   [\#5850](https://github.com/matrix-org/matrix-react-sdk/pull/5850)
+ * Fix useRoomPowerLevels hook
+   [\#5854](https://github.com/matrix-org/matrix-react-sdk/pull/5854)
+ * Prevent state events being rendered with invalid state keys
+   [\#5851](https://github.com/matrix-org/matrix-react-sdk/pull/5851)
+ * Give server ACLs a name in 'roles & permissions' tab
+   [\#5838](https://github.com/matrix-org/matrix-react-sdk/pull/5838)
+ * Don't hide notification badge on the home space button as it has no menu
+   [\#5845](https://github.com/matrix-org/matrix-react-sdk/pull/5845)
+ * User Info hide disambiguation as we always show MXID anyway
+   [\#5843](https://github.com/matrix-org/matrix-react-sdk/pull/5843)
+ * Improve kick state to not show if the target was not joined to begin with
+   [\#5846](https://github.com/matrix-org/matrix-react-sdk/pull/5846)
+ * Fix space store wrongly switching to a non-space filter
+   [\#5844](https://github.com/matrix-org/matrix-react-sdk/pull/5844)
+ * Tweak appearance of invite reason
+   [\#5847](https://github.com/matrix-org/matrix-react-sdk/pull/5847)
+ * Update Inter font to v3.18
+   [\#5840](https://github.com/matrix-org/matrix-react-sdk/pull/5840)
+ * Enable sharing historical keys on invite
+   [\#5839](https://github.com/matrix-org/matrix-react-sdk/pull/5839)
+ * Add ability to hide post-login encryption setup with customisation point
+   [\#5834](https://github.com/matrix-org/matrix-react-sdk/pull/5834)
+ * Use LaTeX and TeX delimiters by default
+   [\#5515](https://github.com/matrix-org/matrix-react-sdk/pull/5515)
+ * Clone author's deps fork for Netlify previews
+   [\#5837](https://github.com/matrix-org/matrix-react-sdk/pull/5837)
+ * Show drop file UI only if dragging a file
+   [\#5827](https://github.com/matrix-org/matrix-react-sdk/pull/5827)
+ * Ignore punctuation when filtering rooms
+   [\#5824](https://github.com/matrix-org/matrix-react-sdk/pull/5824)
+ * Resizable CallView
+   [\#5710](https://github.com/matrix-org/matrix-react-sdk/pull/5710)
+
 Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0)
diff --git a/README.md b/README.md
index 73afe34df0..b3e96ef001 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ Platform Targets:
  * WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
  * Mobile Web is not currently a target platform - instead please use the native
    iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
-   (https://github.com/matrix-org/matrix-android-sdk) SDKs.
+   (https://github.com/matrix-org/matrix-android-sdk2) SDKs.
 
 All code lands on the `develop` branch - `master` is only used for stable releases.
 **Please file PRs against `develop`!!**
diff --git a/package.json b/package.json
index 7c190c68bf..be195e2e9e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -23,9 +23,7 @@
     "package.json"
   ],
   "bin": {
-    "reskindex": "scripts/reskindex.js",
-    "matrix-gen-i18n": "scripts/gen-i18n.js",
-    "matrix-prune-i18n": "scripts/prune-i18n.js"
+    "reskindex": "scripts/reskindex.js"
   },
   "main": "./src/index.js",
   "matrix_src_main": "./src/index.js",
@@ -35,7 +33,7 @@
     "prepublishOnly": "yarn build",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
-    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
+    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "reskindex": "node scripts/reskindex.js -h header",
     "reskindex:watch": "node scripts/reskindex.js -h header -w",
     "rethemendex": "res/css/rethemendex.sh",
@@ -51,7 +49,8 @@
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
-    "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080"
+    "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080",
+    "coverage": "yarn test --coverage"
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
@@ -133,6 +132,7 @@
     "@types/modernizr": "^3.5.3",
     "@types/node": "^14.14.22",
     "@types/pako": "^1.0.1",
+    "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
     "@types/react": "^16.9",
     "@types/react-dom": "^16.9.10",
@@ -160,6 +160,7 @@
     "jest-fetch-mock": "^3.0.3",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
+    "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
@@ -189,6 +190,12 @@
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"
+    ],
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/*.{js,ts,tsx}"
+    ],
+    "coverageReporters": [
+      "text"
     ]
   }
 }
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 253f97bf42..ec9592f3a1 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -161,6 +161,7 @@
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
+@import "./views/messages/_MVoiceMessageBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
@@ -248,6 +249,8 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
+@import "./views/voice_messages/_PlayPauseButton.scss";
+@import "./views/voice_messages/_PlaybackContainer.scss";
 @import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 5bf2aee3ae..8cc00aba0f 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomStatusBar {
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
     margin-left: 65px;
     min-height: 50px;
 }
@@ -68,6 +68,99 @@ limitations under the License.
     min-height: 58px;
 }
 
+.mx_RoomStatusBar_unsentMessages {
+    > div[role="alert"] {
+        // cheat some basic alignment
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        margin: 12px;
+        padding-left: 16px;
+        background-color: $header-panel-bg-color;
+        border-radius: 4px;
+    }
+
+    .mx_RoomStatusBar_unsentBadge {
+        margin-right: 12px;
+
+        .mx_NotificationBadge {
+            // Override sizing from the default badge
+            width: 24px !important;
+            height: 24px !important;
+            border-radius: 24px !important;
+
+            .mx_NotificationBadge_count {
+                font-size: $font-16px !important; // override default
+            }
+        }
+    }
+
+    .mx_RoomStatusBar_unsentTitle {
+        color: $warning-color;
+        font-size: $font-15px;
+    }
+
+    .mx_RoomStatusBar_unsentDescription {
+        font-size: $font-12px;
+    }
+
+    .mx_RoomStatusBar_unsentButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+        color: $muted-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 5px 10px;
+            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            display: inline-block;
+            position: relative;
+
+            &:nth-child(2) {
+                border-left: 1px solid $resend-button-divider-color;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 10px; // inset for regular button padding
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url('$(res)/img/element-icons/trashcan.svg');
+                width: 12px;
+                height: 16px;
+                top: calc(50% - 8px); // text sizes are dynamic
+            }
+
+            &.mx_RoomStatusBar_unsentResendAllBtn {
+                padding-left: 34px; // 28px from above, but +6px to account for the wider icon
+
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/retry.svg');
+                    width: 18px;
+                    height: 18px;
+                    top: calc(50% - 9px); // text sizes are dynamic
+                }
+            }
+        }
+
+        .mx_InlineSpinner {
+            vertical-align: middle;
+            margin-right: 5px;
+            top: 1px; // just to help the vertical alignment be slightly better
+
+            & + span {
+                margin-right: 10px; // same margin/padding as the rightmost button
+            }
+        }
+    }
+}
+
 .mx_RoomStatusBar_connectionLostBar img {
     padding-left: 10px;
     padding-right: 10px;
@@ -103,7 +196,7 @@ limitations under the License.
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_RoomStatusBar {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
         min-height: 40px;
     }
 
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 59f2ea947c..c433ccf275 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -79,6 +79,10 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
     }
 
     .mx_SpaceItem.collapsed {
@@ -233,7 +237,6 @@ $activeBorderColor: $secondary-fg-color;
 
     .mx_SpacePanel_badgeContainer {
         position: absolute;
-        height: 16px;
 
         // Create a flexbox to make aligning dot badges easier
         display: flex;
@@ -245,23 +248,37 @@ $activeBorderColor: $secondary-fg-color;
 
         .mx_NotificationBadge_dot {
             // make the smaller dot occupy the same width for centering
-            margin-left: 7px;
-            margin-right: 7px;
+            margin: 0 7px;
         }
     }
 
     &.collapsed {
         .mx_SpaceButton {
             .mx_SpacePanel_badgeContainer {
-                right: -3px;
-                top: -3px;
+                right: 0;
+                top: 0;
+
+                .mx_NotificationBadge {
+                    background-clip: padding-box;
+                }
+
+                .mx_NotificationBadge_dot {
+                    margin: 0 -1px 0 0;
+                    border: 3px solid $groupFilterPanel-bg-color;
+                }
+
+                .mx_NotificationBadge_2char,
+                .mx_NotificationBadge_3char {
+                    margin: -5px -5px 0 0;
+                    border: 2px solid $groupFilterPanel-bg-color;
+                }
             }
 
             &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
                 // when we draw the selection border we move the relative bounds of our parent
                 // so update our position within the bounds of the parent to maintain position overall
-                right: -6px;
-                top: -6px;
+                right: -3px;
+                top: -3px;
             }
         }
     }
@@ -275,7 +292,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home) {
+            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
diff --git a/res/css/structures/_SpaceRoomDirectory.scss b/res/css/structures/_SpaceRoomDirectory.scss
index dcceee6371..7925686bf1 100644
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@@ -26,7 +26,10 @@ limitations under the License.
     word-break: break-word;
     display: flex;
     flex-direction: column;
+}
 
+.mx_SpaceRoomDirectory,
+.mx_SpaceRoomView_landing {
     .mx_Dialog_title {
         display: flex;
 
@@ -56,65 +59,68 @@ limitations under the License.
         }
     }
 
-    .mx_Dialog_content {
-        .mx_AccessibleButton_kind_link {
-            padding: 0;
-        }
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
 
-        .mx_SearchBox {
-            margin: 24px 0 16px;
-        }
+    .mx_SearchBox {
+        margin: 24px 0 16px;
+    }
 
-        .mx_SpaceRoomDirectory_noResults {
-            text-align: center;
+    .mx_SpaceRoomDirectory_noResults {
+        text-align: center;
 
-            > div {
-                font-size: $font-15px;
-                line-height: $font-24px;
-                color: $secondary-fg-color;
-            }
-        }
-
-        .mx_SpaceRoomDirectory_listHeader {
-            display: flex;
-            min-height: 32px;
-            align-items: center;
+        > div {
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $primary-fg-color;
+            color: $secondary-fg-color;
+        }
+    }
 
-            .mx_AccessibleButton {
-                padding: 2px 8px;
-                font-weight: normal;
+    .mx_SpaceRoomDirectory_listHeader {
+        display: flex;
+        min-height: 32px;
+        align-items: center;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-fg-color;
 
-                & + .mx_AccessibleButton {
-                    margin-left: 16px;
-                }
-            }
+        .mx_AccessibleButton {
+            padding: 4px 12px;
+            font-weight: normal;
 
-            > span {
-                margin-left: auto;
+            & + .mx_AccessibleButton {
+                margin-left: 16px;
             }
         }
 
-        .mx_SpaceRoomDirectory_error {
-            position: relative;
-            font-weight: $font-semi-bold;
-            color: $notice-primary-color;
-            font-size: $font-15px;
-            line-height: $font-18px;
-            margin: 20px auto 12px;
-            padding-left: 24px;
-            width: max-content;
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; // to account for the 1px border
+        }
 
-            &::before {
-                content: "";
-                position: absolute;
-                height: 16px;
-                width: 16px;
-                left: 0;
-                background-image: url("$(res)/img/element-icons/warning-badge.svg");
-            }
+        > span {
+            margin-left: auto;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_error {
+        position: relative;
+        font-weight: $font-semi-bold;
+        color: $notice-primary-color;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        margin: 20px auto 12px;
+        padding-left: 24px;
+        width: max-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 16px;
+            width: 16px;
+            left: 0;
+            background-image: url("$(res)/img/element-icons/warning-badge.svg");
         }
     }
 }
@@ -245,11 +251,17 @@ limitations under the License.
             grid-row: 1/3;
 
             .mx_AccessibleButton {
-                padding: 8px 18px;
+                line-height: $font-24px;
+                padding: 4px 16px;
                 display: inline-block;
                 visibility: hidden;
             }
 
+            .mx_AccessibleButton_kind_danger_outline,
+            .mx_AccessibleButton_kind_primary_outline {
+                padding: 3px 16px; // to account for the 1px border
+            }
+
             .mx_Checkbox {
                 display: inline-flex;
                 vertical-align: middle;
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 269f16beb7..ff51e28b7b 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -81,6 +81,16 @@ $SpaceRoomViewInnerWidth: 428px;
             color: $secondary-fg-color;
             margin-top: 12px;
             margin-bottom: 24px;
+            max-width: $SpaceRoomViewInnerWidth;
+        }
+
+        .mx_AddExistingToSpace {
+            max-width: $SpaceRoomViewInnerWidth;
+
+            .mx_AddExistingToSpace_content {
+                height: calc(100vh - 360px);
+                max-height: 400px;
+            }
         }
 
         .mx_SpaceRoomView_buttons {
@@ -228,7 +238,8 @@ $SpaceRoomViewInnerWidth: 428px;
 
             .mx_SpaceRoomView_landing_inviteButton {
                 position: relative;
-                padding-left: 40px;
+                padding: 4px 18px 4px 40px;
+                line-height: $font-24px;
                 height: min-content;
 
                 &::before {
@@ -244,6 +255,27 @@ $SpaceRoomViewInnerWidth: 428px;
                     mask-image: url('$(res)/img/element-icons/room/invite.svg');
                 }
             }
+
+            .mx_SpaceRoomView_landing_settingsButton {
+                position: relative;
+                margin-left: 16px;
+                width: 24px;
+                height: 24px;
+
+                &::before {
+                    position: absolute;
+                    content: "";
+                    left: 0;
+                    top: 0;
+                    height: 24px;
+                    width: 24px;
+                    background: $tertiary-fg-color;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    mask-image: url('$(res)/img/element-icons/settings.svg');
+                }
+            }
         }
 
         .mx_SpaceRoomView_landing_topic {
@@ -258,80 +290,6 @@ $SpaceRoomViewInnerWidth: 428px;
             background-color: $groupFilterPanel-bg-color;
         }
 
-        .mx_SpaceRoomView_landing_adminButtons {
-            margin-top: 24px;
-
-            .mx_AccessibleButton {
-                position: relative;
-                width: 160px;
-                height: 124px;
-                box-sizing: border-box;
-                padding: 72px 16px 0;
-                border-radius: 12px;
-                border: 1px solid $input-border-color;
-                margin-right: 28px;
-                margin-bottom: 20px;
-                font-size: $font-14px;
-                display: inline-block;
-                vertical-align: bottom;
-
-                &:last-child {
-                    margin-right: 0;
-                }
-
-                &:hover {
-                    background-color: rgba(141, 151, 165, 0.1);
-                }
-
-                &::before, &::after {
-                    position: absolute;
-                    content: "";
-                    left: 16px;
-                    top: 16px;
-                    height: 40px;
-                    width: 40px;
-                    border-radius: 20px;
-                }
-
-                &::after {
-                    mask-position: center;
-                    mask-size: 30px;
-                    mask-repeat: no-repeat;
-                    background: #ffffff; // white icon fill
-                }
-
-                &.mx_SpaceRoomView_landing_addButton {
-                    &::before {
-                        background-color: #ac3ba8;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
-                    }
-                }
-
-                &.mx_SpaceRoomView_landing_createButton {
-                    &::before {
-                        background-color: #368bd6;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
-                    }
-                }
-
-                &.mx_SpaceRoomView_landing_settingsButton {
-                    &::before {
-                        background-color: #5c56f5;
-                    }
-
-                    &::after {
-                        mask-image: url('$(res)/img/element-icons/settings.svg');
-                    }
-                }
-            }
-        }
-
         .mx_SearchBox {
             margin: 0 0 20px;
         }
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 247df52b4a..524f107165 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -21,6 +21,66 @@ limitations under the License.
     }
 }
 
+.mx_AddExistingToSpace {
+    .mx_SearchBox {
+        // To match the space around the title
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_AddExistingToSpace_content {
+        flex-grow: 1;
+    }
+
+    .mx_AddExistingToSpace_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_AddExistingToSpace_section {
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
+
+        > h3 {
+            margin: 0;
+            color: $secondary-fg-color;
+            font-size: $font-12px;
+            font-weight: $font-semi-bold;
+            line-height: $font-15px;
+        }
+
+        .mx_AddExistingToSpace_entry {
+            display: flex;
+            margin-top: 12px;
+
+            .mx_BaseAvatar {
+                margin-right: 12px;
+            }
+
+            .mx_AddExistingToSpace_entry_name {
+                font-size: $font-15px;
+                line-height: 30px;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-right: 12px;
+            }
+
+            .mx_Checkbox {
+                align-items: center;
+            }
+        }
+    }
+
+    .mx_AddExistingToSpace_section_spaces {
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+    }
+}
+
 .mx_AddExistingToSpaceDialog {
     width: 480px;
     color: $primary-fg-color;
@@ -41,7 +101,7 @@ limitations under the License.
 
         .mx_BaseAvatar {
             display: inline-flex;
-            margin: 5px 16px 5px 5px;
+            margin: auto 16px auto 5px;
             vertical-align: middle;
         }
 
@@ -100,85 +160,32 @@ limitations under the License.
         }
     }
 
-    .mx_SearchBox {
-        // To match the space around the title
-        margin: 0 0 15px 0;
-        flex-grow: 0;
-    }
-
-    .mx_AddExistingToSpaceDialog_errorText {
-        font-weight: $font-semi-bold;
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $notice-primary-color;
-        margin-bottom: 28px;
-    }
-
-    .mx_AddExistingToSpaceDialog_content {
-        flex-grow: 1;
-
-        .mx_AddExistingToSpaceDialog_noResults {
-            display: block;
-            margin-top: 24px;
-        }
-    }
-
-    .mx_AddExistingToSpaceDialog_section {
-        &:not(:first-child) {
-            margin-top: 24px;
-        }
-
-        > h3 {
-            margin: 0;
-            color: $secondary-fg-color;
-            font-size: $font-12px;
-            font-weight: $font-semi-bold;
-            line-height: $font-15px;
-        }
-
-        .mx_AddExistingToSpaceDialog_entry {
-            display: flex;
-            margin-top: 12px;
-
-            .mx_BaseAvatar {
-                margin-right: 12px;
-            }
-
-            .mx_AddExistingToSpaceDialog_entry_name {
-                font-size: $font-15px;
-                line-height: 30px;
-                flex-grow: 1;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                margin-right: 12px;
-            }
-
-            .mx_Checkbox {
-                align-items: center;
-            }
-        }
-    }
-
-    .mx_AddExistingToSpaceDialog_section_spaces {
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
+    .mx_AddExistingToSpace {
+        display: contents;
     }
 
     .mx_AddExistingToSpaceDialog_footer {
         display: flex;
-        margin-top: 32px;
+        margin-top: 20px;
 
         > span {
             flex-grow: 1;
-            font-size: $font-14px;
+            font-size: $font-12px;
             line-height: $font-15px;
-            font-weight: $font-semi-bold;
+            color: $secondary-fg-color;
 
-            .mx_AccessibleButton {
-                font-size: inherit;
-                display: inline-block;
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_AddExistingToSpaceDialog_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
             }
 
             > * {
@@ -186,8 +193,54 @@ limitations under the License.
             }
         }
 
+        .mx_AddExistingToSpaceDialog_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_AddExistingToSpaceDialog_errorHeading {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $notice-primary-color;
+            }
+
+            .mx_AddExistingToSpaceDialog_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-fg-color;
+            }
+        }
+
         .mx_AccessibleButton {
             display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+        }
+
+        .mx_AddExistingToSpaceDialog_retryButton {
+            margin-left: 12px;
+            padding-left: 24px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                background-color: $primary-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/retry.svg');
+                width: 18px;
+                height: 18px;
+                left: 0;
+            }
         }
 
         .mx_AccessibleButton_kind_link {
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss
index 0075dcb511..2997c83cfd 100644
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@@ -76,12 +76,16 @@ limitations under the License.
     border: 1px solid $button-danger-bg-color;
 }
 
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
-.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
     color: $button-danger-disabled-fg-color;
     background-color: $button-danger-disabled-bg-color;
 }
 
+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-bg-color;
+    border-color: $button-danger-disabled-bg-color;
+}
+
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
     padding: 5px 12px;
     color: $button-danger-fg-color;
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index 93ebcc2d56..71035dadc3 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -31,8 +31,7 @@ limitations under the License.
 
 .mx_ImageView_image {
     pointer-events: all;
-    max-width: 95%;
-    max-height: 95%;
+    flex-shrink: 0;
 }
 
 .mx_ImageView_panel {
diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss
index 770978e921..c075ac74ff 100644
--- a/res/css/views/elements/_ProgressBar.scss
+++ b/res/css/views/elements/_ProgressBar.scss
@@ -21,7 +21,7 @@ progress.mx_ProgressBar {
     appearance: none;
     border: none;
 
-    @mixin ProgressBarBorderRadius "6px";
+    @mixin ProgressBarBorderRadius 6px;
     @mixin ProgressBarColour $progressbar-fg-color;
     @mixin ProgressBarBgColour $progressbar-bg-color;
     ::-webkit-progress-value {
diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index b45126acf8..c215d69ec2 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -61,9 +61,9 @@ limitations under the License.
 
 .mx_MFileBody_info {
     background-color: $message-body-panel-bg-color;
-    border-radius: 4px;
-    width: 270px;
-    padding: 8px;
+    border-radius: 12px;
+    width: 243px; // same width as a playable voice message, accounting for padding
+    padding: 6px 12px;
     color: $message-body-panel-fg-color;
 
     .mx_MFileBody_info_icon {
@@ -82,7 +82,7 @@ limitations under the License.
             mask-position: center;
             mask-size: cover;
             mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
-            background-color: $message-body-panel-fg-color;
+            background-color: $message-body-panel-icon-fg-color;
             width: 13px;
             height: 15px;
 
diff --git a/res/css/views/messages/_MVoiceMessageBody.scss b/res/css/views/messages/_MVoiceMessageBody.scss
new file mode 100644
index 0000000000..3dfb98f778
--- /dev/null
+++ b/res/css/views/messages/_MVoiceMessageBody.scss
@@ -0,0 +1,19 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_MVoiceMessageBody {
+    display: inline-block; // makes the playback controls magically line up
+}
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 1254b496b5..3ecbef0d1f 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -105,3 +105,11 @@ limitations under the License.
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/element-icons/context-menu.svg');
 }
+
+.mx_MessageActionBar_resendButton::after {
+    mask-image: url('$(res)/img/element-icons/retry.svg');
+}
+
+.mx_MessageActionBar_cancelButton::after {
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 7158ffc027..c132fa5a0f 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -34,6 +34,10 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+
     .mx_ReactionsRowButton_content {
         max-width: 100px;
         overflow: hidden;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 35a5d8fc15..a6ccde93d3 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -219,10 +219,6 @@ $left-gutter: 64px;
     color: $accent-fg-color;
 }
 
-.mx_EventTile_notSent {
-    color: $event-notsent-color;
-}
-
 .mx_EventTile_receiptSent,
 .mx_EventTile_receiptSending {
     // We don't use `position: relative` on the element because then it won't line
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 8100a03890..b87211a847 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -35,44 +35,42 @@ limitations under the License.
     }
 }
 
-.mx_VoiceRecordComposerTile_waveformContainer {
-    padding: 5px;
-    padding-right: 4px; // there's 1px from the waveform itself, so account for that
-    padding-left: 15px; // +10px for the live circle, +5px for regular padding
-    background-color: $voice-record-waveform-bg-color;
-    border-radius: 12px;
-    margin-right: 12px; // isolate from stop button
+.mx_VoiceRecordComposerTile_delete {
+    width: 14px; // w&h are size of icon
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
+    background-color: $voice-record-icon-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}
 
-    // Cheat at alignment a bit
-    display: flex;
-    align-items: center;
+.mx_VoiceRecordComposerTile_recording.mx_VoiceMessagePrimaryContainer {
+    // Note: remaining class properties are in the PlayerContainer CSS.
+
+    margin: 6px; // force the composer area to put a gutter around us
+    margin-right: 12px; // isolate from stop button
 
     position: relative; // important for the live circle
 
-    color: $voice-record-waveform-fg-color;
-    font-size: $font-14px;
+    &.mx_VoiceRecordComposerTile_recording {
+        // We are putting the circle in this padding, so we need +10px from the regular
+        // padding on the left side.
+        padding-left: 22px;
 
-    &::before {
-        animation: recording-pulse 2s infinite;
+        &::before {
+            animation: recording-pulse 2s infinite;
 
-        content: '';
-        background-color: $voice-record-live-circle-color;
-        width: 10px;
-        height: 10px;
-        position: absolute;
-        left: 8px;
-        top: 16px; // vertically center
-        border-radius: 10px;
-    }
-
-    .mx_Waveform_bar {
-        background-color: $voice-record-waveform-fg-color;
-    }
-
-    .mx_Clock {
-        padding-right: 8px; // isolate from waveform
-        padding-left: 10px; // isolate from live circle
-        width: 42px; // we're not using a monospace font, so fake it
+            content: '';
+            background-color: $voice-record-live-circle-color;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            left: 12px; // 12px from the left edge for container padding
+            top: 18px; // vertically center (middle align with clock)
+            border-radius: 10px;
+        }
     }
 }
 
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
index 109edfff81..0f879d209e 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
@@ -22,3 +22,34 @@ limitations under the License.
 .mx_HelpUserSettingsTab span.mx_AccessibleButton {
     word-break: break-word;
 }
+
+.mx_HelpUserSettingsTab code {
+    word-break: break-all;
+    user-select: all;
+}
+
+.mx_HelpUserSettingsTab_accessToken {
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    border: solid 1px $light-fg-color;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy {
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: 20px;
+    display: inherit;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy > div {
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
+    margin-left: 5px;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+}
diff --git a/res/css/views/voice_messages/_PlayPauseButton.scss b/res/css/views/voice_messages/_PlayPauseButton.scss
new file mode 100644
index 0000000000..6caedafa29
--- /dev/null
+++ b/res/css/views/voice_messages/_PlayPauseButton.scss
@@ -0,0 +1,51 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_PlayPauseButton {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
+    background-color: $voice-playback-button-bg-color;
+
+    &::before {
+        content: '';
+        position: absolute; // sizing varies by icon
+        background-color: $voice-playback-button-fg-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
+
+    &.mx_PlayPauseButton_disabled::before {
+        opacity: 0.5;
+    }
+
+    &.mx_PlayPauseButton_play::before {
+        width: 13px;
+        height: 16px;
+        top: 8px; // center
+        left: 12px; // center
+        mask-image: url('$(res)/img/element-icons/play.svg');
+    }
+
+    &.mx_PlayPauseButton_pause::before {
+        width: 10px;
+        height: 12px;
+        top: 10px; // center
+        left: 11px; // center
+        mask-image: url('$(res)/img/element-icons/pause.svg');
+    }
+}
diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/voice_messages/_PlaybackContainer.scss
new file mode 100644
index 0000000000..64e8f445e1
--- /dev/null
+++ b/res/css/views/voice_messages/_PlaybackContainer.scss
@@ -0,0 +1,53 @@
+/*
+Copyright 2021 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.
+*/
+
+// Dev note: there's no actual component called <PlaybackContainer />. These classes
+// are shared amongst multiple voice message components.
+
+// Container for live recording and playback controls
+.mx_VoiceMessagePrimaryContainer {
+    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
+    // has a 1px padding on it that we want to account for.
+    padding: 7px 12px 7px 11px;
+    background-color: $voice-record-waveform-bg-color;
+    border-radius: 12px;
+
+    // Cheat at alignment a bit
+    display: flex;
+    align-items: center;
+
+    color: $voice-record-waveform-fg-color;
+    font-size: $font-14px;
+    line-height: $font-24px;
+
+    .mx_Waveform {
+        .mx_Waveform_bar {
+            background-color: $voice-record-waveform-incomplete-fg-color;
+
+            &.mx_Waveform_bar_100pct {
+                // Small animation to remove the mechanical feel of progress
+                transition: background-color 250ms ease;
+                background-color: $voice-record-waveform-fg-color;
+            }
+        }
+    }
+
+    .mx_Clock {
+        width: 42px; // we're not using a monospace font, so fake it
+        padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
+        padding-left: 8px; // isolate from recording circle / play control
+    }
+}
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index d13272c8c0..0be75be28c 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_CallView {
     border-radius: 8px;
-    background-color: $voipcall-plinth-color;
+    background-color: $dark-panel-bg-color;
     padding-left: 8px;
     padding-right: 8px;
     // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
@@ -40,7 +40,8 @@ limitations under the License.
     width: 320px;
     padding-bottom: 8px;
     margin-top: 10px;
-    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+    background-color: $voipcall-plinth-color;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;
 
     .mx_CallView_voice {
@@ -64,14 +65,17 @@ limitations under the License.
     }
 }
 
-.mx_CallView_voice {
+.mx_CallView_content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    border-radius: 8px;
+}
+
+.mx_CallView_voice {
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     background-color: $inverted-bg-color;
-    border-radius: 8px;
 }
 
 .mx_CallView_voice_avatarsContainer {
@@ -108,9 +112,7 @@ limitations under the License.
 .mx_CallView_video {
     width: 100%;
     height: 100%;
-    position: relative;
     z-index: 30;
-    border-radius: 8px;
     overflow: hidden;
 }
 
diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss
index 8ead8bba3e..7d85ac264e 100644
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -14,21 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_VideoFeed_voice {
+    // We don't want to collide with the call controls that have 52px of height
+    padding-bottom: 52px;
+    background-color: $inverted-bg-color;
+}
+
+
 .mx_VideoFeed_remote {
     width: 100%;
     height: 100%;
-    background-color: #000;
-    z-index: 50;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.mx_VideoFeed_video {
+        background-color: #000;
+    }
 }
 
 .mx_VideoFeed_local {
-    width: 25%;
-    height: 25%;
+    max-width: 25%;
+    max-height: 25%;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 100;
     border-radius: 4px;
+
+    &.mx_VideoFeed_video {
+        background-color: transparent;
+    }
 }
 
 .mx_VideoFeed_mirror {
diff --git a/res/img/element-icons/pause.svg b/res/img/element-icons/pause.svg
new file mode 100644
index 0000000000..293c0a10d8
--- /dev/null
+++ b/res/img/element-icons/pause.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V11C3 11.5523 2.55228 12 2 12H1C0.447715 12 0 11.5523 0 11V1Z" fill="#737D8C"/>
+<path d="M7 1C7 0.447715 7.44772 0 8 0H9C9.55228 0 10 0.447715 10 1V11C10 11.5523 9.55228 12 9 12H8C7.44772 12 7 11.5523 7 11V1Z" fill="#737D8C"/>
+</svg>
diff --git a/res/img/element-icons/play.svg b/res/img/element-icons/play.svg
new file mode 100644
index 0000000000..339e20b729
--- /dev/null
+++ b/res/img/element-icons/play.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14.2104V1.78956C0 1.00724 0.857827 0.527894 1.5241 0.937906L11.6161 7.14834C12.2506 7.53883 12.2506 8.46117 11.6161 8.85166L1.5241 15.0621C0.857828 15.4721 0 14.9928 0 14.2104Z" fill="#737D8C"/>
+</svg>
diff --git a/res/img/element-icons/retry.svg b/res/img/element-icons/retry.svg
new file mode 100644
index 0000000000..09448d6458
--- /dev/null
+++ b/res/img/element-icons/retry.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="#737D8C"/>
+</svg>
diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg
new file mode 100644
index 0000000000..f8fb8b5c46
--- /dev/null
+++ b/res/img/element-icons/trashcan.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/>
+</svg>
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 925d268eb0..2d0e3d2a8b 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -9,6 +9,7 @@ $header-panel-text-primary-color: #B9BEC6;
 $header-panel-text-secondary-color: #c8c8cd;
 $text-primary-color: #ffffff;
 $text-secondary-color: #B9BEC6;
+$quaternary-fg-color: #6F7882;
 $search-bg-color: #181b21;
 $search-placeholder-color: #61708b;
 $room-highlight-color: #343a46;
@@ -63,6 +64,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: $bg-color;
 
+$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
+
 // scrollbars
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $scrollbar-track-color: transparent;
@@ -110,7 +113,7 @@ $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #21262c;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
@@ -203,9 +206,18 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #21262c82;
-$message-body-panel-icon-bg-color: #8e99a4;
-$message-body-panel-fg-color: $primary-fg-color;
+$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-bg-color: #394049; // "Dark Tile"
+$message-body-panel-icon-fg-color: #21262C; // "Separator"
+$message-body-panel-icon-bg-color: $tertiary-fg-color;
+
+$voice-record-stop-border-color: $quaternary-fg-color;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
+$voice-record-icon-color: $quaternary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 28e6e22326..a852ad94e9 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -61,6 +61,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: $bg-color;
 
+$resend-button-divider-color: $muted-fg-color;
+
 // scrollbars
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $scrollbar-track-color: transparent;
@@ -107,7 +109,7 @@ $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #394049;
 
 // ********************
 
@@ -198,9 +200,19 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #21262c82;
-$message-body-panel-icon-bg-color: #8e99a4;
-$message-body-panel-fg-color: $primary-fg-color;
+$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-bg-color: #394049;
+$message-body-panel-icon-fg-color: $primary-bg-color;
+$message-body-panel-icon-bg-color: $secondary-fg-color;
+
+// See non-legacy dark for variable information
+$voice-record-stop-border-color: #6F7882;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: #6F7882;
+$voice-record-icon-color: #6F7882;
+$voice-playback-button-bg-color: $tertiary-fg-color;
+$voice-playback-button-fg-color: #21262C;
 
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 7b6bdad4a4..84666bc662 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -97,6 +97,8 @@ $input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: #ffffff;
 
+$resend-button-divider-color: $input-darker-bg-color;
+
 $button-bg-color: $accent-color;
 $button-fg-color: white;
 
@@ -174,7 +176,7 @@ $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #F4F6FA;
 
 // ********************
 
@@ -189,13 +191,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-// See non-legacy _light for variable information
-$voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: #ff4b55;
-$voice-record-waveform-bg-color: #E3E8F0;
-$voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: #ff4b55;
-
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #fff;
@@ -328,9 +323,21 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #e3e8f082;
-$message-body-panel-icon-bg-color: #ffffff;
-$message-body-panel-fg-color: $muted-fg-color;
+$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-bg-color: #E3E8F0;
+$message-body-panel-icon-fg-color: $secondary-fg-color;
+$message-body-panel-icon-bg-color: $primary-bg-color;
+
+// See non-legacy _light for variable information
+$voice-record-stop-symbol-color: #ff4b55;
+$voice-record-live-circle-color: #ff4b55;
+$voice-record-stop-border-color: #E3E8F0;
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: #C1C6CD;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 5b46138dae..c889f43d0b 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -21,6 +21,7 @@ $notice-primary-bg-color: rgba(255, 75, 85, 0.16);
 $primary-fg-color: #2e2f32;
 $secondary-fg-color: #737D8C;
 $tertiary-fg-color: #8D99A5;
+$quaternary-fg-color: #C1C6CD;
 $header-panel-bg-color: #f3f8fd;
 
 // typical text (dark-on-white in light skin)
@@ -91,6 +92,8 @@ $field-focused-label-bg-color: #ffffff;
 $button-bg-color: $accent-color;
 $button-fg-color: white;
 
+$resend-button-divider-color: $input-darker-bg-color;
+
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
@@ -165,7 +168,7 @@ $composer-e2e-icon-color: #91A1C0;
 $header-divider-color: #91A1C0;
 
 // this probably shouldn't have it's own colour
-$voipcall-plinth-color: #f2f5f8;
+$voipcall-plinth-color: #F4F6FA;
 
 // ********************
 
@@ -180,12 +183,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
-$voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
-$voice-record-waveform-bg-color: #E3E8F0;
-$voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
-
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #FFF;
@@ -325,9 +322,23 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-$message-body-panel-bg-color: #e3e8f082;
-$message-body-panel-icon-bg-color: #ffffff;
-$message-body-panel-fg-color: $muted-fg-color;
+$message-body-panel-fg-color: $secondary-fg-color;
+$message-body-panel-bg-color: #E3E8F0; // "Separator"
+$message-body-panel-icon-fg-color: $secondary-fg-color;
+$message-body-panel-icon-bg-color: $primary-bg-color;
+
+// These two don't change between themes. They are the $warning-color, but we don't
+// want custom themes to affect them by accident.
+$voice-record-stop-symbol-color: #ff4b55;
+$voice-record-live-circle-color: #ff4b55;
+
+$voice-record-stop-border-color: #E3E8F0; // "Separator"
+$voice-record-waveform-bg-color: $message-body-panel-bg-color;
+$voice-record-waveform-fg-color: $message-body-panel-fg-color;
+$voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
+$voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
diff --git a/scripts/compare-file.js b/scripts/compare-file.js
deleted file mode 100644
index f53275ebfa..0000000000
--- a/scripts/compare-file.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const fs = require("fs");
-
-if (process.argv.length < 4) throw new Error("Missing source and target file arguments");
-
-const sourceFile = fs.readFileSync(process.argv[2], 'utf8');
-const targetFile = fs.readFileSync(process.argv[3], 'utf8');
-
-if (sourceFile !== targetFile) {
-    throw new Error("Files do not match");
-}
diff --git a/scripts/gen-i18n.js b/scripts/gen-i18n.js
deleted file mode 100755
index 91733469f7..0000000000
--- a/scripts/gen-i18n.js
+++ /dev/null
@@ -1,304 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Copyright 2017 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.
-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.
-*/
-
-/**
- * Regenerates the translations en_EN file by walking the source tree and
- * parsing each file with the appropriate parser. Emits a JSON file with the
- * translatable strings mapped to themselves in the order they appeared
- * in the files and grouped by the file they appeared in.
- *
- * Usage: node scripts/gen-i18n.js
- */
-const fs = require('fs');
-const path = require('path');
-
-const walk = require('walk');
-
-const parser = require("@babel/parser");
-const traverse = require("@babel/traverse");
-
-const TRANSLATIONS_FUNCS = ['_t', '_td'];
-
-const INPUT_TRANSLATIONS_FILE = 'src/i18n/strings/en_EN.json';
-const OUTPUT_FILE = 'src/i18n/strings/en_EN.json';
-
-// NB. The sync version of walk is broken for single files so we walk
-// all of res rather than just res/home.html.
-// https://git.daplie.com/Daplie/node-walk/merge_requests/1 fixes it,
-// or if we get bored waiting for it to be merged, we could switch
-// to a project that's actively maintained.
-const SEARCH_PATHS = ['src', 'res'];
-
-function getObjectValue(obj, key) {
-    for (const prop of obj.properties) {
-        if (prop.key.type === 'Identifier' && prop.key.name === key) {
-            return prop.value;
-        }
-    }
-    return null;
-}
-
-function getTKey(arg) {
-    if (arg.type === 'Literal' || arg.type === "StringLiteral") {
-        return arg.value;
-    } else if (arg.type === 'BinaryExpression' && arg.operator === '+') {
-        return getTKey(arg.left) + getTKey(arg.right);
-    } else if (arg.type === 'TemplateLiteral') {
-        return arg.quasis.map((q) => {
-            return q.value.raw;
-        }).join('');
-    }
-    return null;
-}
-
-function getFormatStrings(str) {
-    // Match anything that starts with %
-    // We could make a regex that matched the full placeholder, but this
-    // would just not match invalid placeholders and so wouldn't help us
-    // detect the invalid ones.
-    // Also note that for simplicity, this just matches a % character and then
-    // anything up to the next % character (or a single %, or end of string).
-    const formatStringRe = /%([^%]+|%|$)/g;
-    const formatStrings = new Set();
-
-    let match;
-    while ( (match = formatStringRe.exec(str)) !== null ) {
-        const placeholder = match[1]; // Minus the leading '%'
-        if (placeholder === '%') continue; // Literal % is %%
-
-        const placeholderMatch = placeholder.match(/^\((.*?)\)(.)/);
-        if (placeholderMatch === null) {
-            throw new Error("Invalid format specifier: '"+match[0]+"'");
-        }
-        if (placeholderMatch.length < 3) {
-            throw new Error("Malformed format specifier");
-        }
-        const placeholderName = placeholderMatch[1];
-        const placeholderFormat = placeholderMatch[2];
-
-        if (placeholderFormat !== 's') {
-            throw new Error(`'${placeholderFormat}' used as format character: you probably meant 's'`);
-        }
-
-        formatStrings.add(placeholderName);
-    }
-
-    return formatStrings;
-}
-
-function getTranslationsJs(file) {
-    const contents = fs.readFileSync(file, { encoding: 'utf8' });
-
-    const trs = new Set();
-
-    try {
-        const plugins = [
-            // https://babeljs.io/docs/en/babel-parser#plugins
-            "classProperties",
-            "objectRestSpread",
-            "throwExpressions",
-            "exportDefaultFrom",
-            "decorators-legacy",
-        ];
-
-        if (file.endsWith(".js") || file.endsWith(".jsx")) {
-            // all JS is assumed to be flow or react
-            plugins.push("flow", "jsx");
-        } else if (file.endsWith(".ts")) {
-            // TS can't use JSX unless it's a TSX file (otherwise angle casts fail)
-            plugins.push("typescript");
-        } else if (file.endsWith(".tsx")) {
-            // When the file is a TSX file though, enable JSX parsing
-            plugins.push("typescript", "jsx");
-        }
-
-        const babelParsed = parser.parse(contents, {
-            allowImportExportEverywhere: true,
-            errorRecovery: true,
-            sourceFilename: file,
-            tokens: true,
-            plugins,
-        });
-        traverse.default(babelParsed, {
-            enter: (p) => {
-                const node = p.node;
-                if (p.isCallExpression() && node.callee && TRANSLATIONS_FUNCS.includes(node.callee.name)) {
-                    const tKey = getTKey(node.arguments[0]);
-
-                    // This happens whenever we call _t with non-literals (ie. whenever we've
-                    // had to use a _td to compensate) so is expected.
-                    if (tKey === null) return;
-
-                    // check the format string against the args
-                    // We only check _t: _td has no args
-                    if (node.callee.name === '_t') {
-                        try {
-                            const placeholders = getFormatStrings(tKey);
-                            for (const placeholder of placeholders) {
-                                if (node.arguments.length < 2) {
-                                    throw new Error(`Placeholder found ('${placeholder}') but no substitutions given`);
-                                }
-                                const value = getObjectValue(node.arguments[1], placeholder);
-                                if (value === null) {
-                                    throw new Error(`No value found for placeholder '${placeholder}'`);
-                                }
-                            }
-
-                            // Validate tag replacements
-                            if (node.arguments.length > 2) {
-                                const tagMap = node.arguments[2];
-                                for (const prop of tagMap.properties || []) {
-                                    if (prop.key.type === 'Literal') {
-                                        const tag = prop.key.value;
-                                        // RegExp same as in src/languageHandler.js
-                                        const regexp = new RegExp(`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`);
-                                        if (!tKey.match(regexp)) {
-                                            throw new Error(`No match for ${regexp} in ${tKey}`);
-                                        }
-                                    }
-                                }
-                            }
-
-                        } catch (e) {
-                            console.log();
-                            console.error(`ERROR: ${file}:${node.loc.start.line} ${tKey}`);
-                            console.error(e);
-                            process.exit(1);
-                        }
-                    }
-
-                    let isPlural = false;
-                    if (node.arguments.length > 1 && node.arguments[1].type === 'ObjectExpression') {
-                        const countVal = getObjectValue(node.arguments[1], 'count');
-                        if (countVal) {
-                            isPlural = true;
-                        }
-                    }
-
-                    if (isPlural) {
-                        trs.add(tKey + "|other");
-                        const plurals = enPlurals[tKey];
-                        if (plurals) {
-                            for (const pluralType of Object.keys(plurals)) {
-                                trs.add(tKey + "|" + pluralType);
-                            }
-                        }
-                    } else {
-                        trs.add(tKey);
-                    }
-                }
-            },
-        });
-    } catch (e) {
-        console.error(e);
-        process.exit(1);
-    }
-
-    return trs;
-}
-
-function getTranslationsOther(file) {
-    const contents = fs.readFileSync(file, { encoding: 'utf8' });
-
-    const trs = new Set();
-
-    // Taken from element-web src/components/structures/HomePage.js
-    const translationsRegex = /_t\(['"]([\s\S]*?)['"]\)/mg;
-    let matches;
-    while (matches = translationsRegex.exec(contents)) {
-        trs.add(matches[1]);
-    }
-    return trs;
-}
-
-// gather en_EN plural strings from the input translations file:
-// the en_EN strings are all in the source with the exception of
-// pluralised strings, which we need to pull in from elsewhere.
-const inputTranslationsRaw = JSON.parse(fs.readFileSync(INPUT_TRANSLATIONS_FILE, { encoding: 'utf8' }));
-const enPlurals = {};
-
-for (const key of Object.keys(inputTranslationsRaw)) {
-    const parts = key.split("|");
-    if (parts.length > 1) {
-        const plurals = enPlurals[parts[0]] || {};
-        plurals[parts[1]] = inputTranslationsRaw[key];
-        enPlurals[parts[0]] = plurals;
-    }
-}
-
-const translatables = new Set();
-
-const walkOpts = {
-    listeners: {
-        names: function(root, nodeNamesArray) {
-            // Sort the names case insensitively and alphabetically to
-            // maintain some sense of order between the different strings.
-            nodeNamesArray.sort((a, b) => {
-                a = a.toLowerCase();
-                b = b.toLowerCase();
-                if (a > b) return 1;
-                if (a < b) return -1;
-                return 0;
-            });
-        },
-        file: function(root, fileStats, next) {
-            const fullPath = path.join(root, fileStats.name);
-
-            let trs;
-            if (fileStats.name.endsWith('.js') || fileStats.name.endsWith('.ts') || fileStats.name.endsWith('.tsx')) {
-                trs = getTranslationsJs(fullPath);
-            } else if (fileStats.name.endsWith('.html')) {
-                trs = getTranslationsOther(fullPath);
-            } else {
-                return;
-            }
-            console.log(`${fullPath} (${trs.size} strings)`);
-            for (const tr of trs.values()) {
-                // Convert DOS line endings to unix
-                translatables.add(tr.replace(/\r\n/g, "\n"));
-            }
-        },
-    }
-};
-
-for (const path of SEARCH_PATHS) {
-    if (fs.existsSync(path)) {
-        walk.walkSync(path, walkOpts);
-    }
-}
-
-const trObj = {};
-for (const tr of translatables) {
-    if (tr.includes("|")) {
-        if (inputTranslationsRaw[tr]) {
-            trObj[tr] = inputTranslationsRaw[tr];
-        } else {
-            trObj[tr] = tr.split("|")[0];
-        }
-    } else {
-        trObj[tr] = tr;
-    }
-}
-
-fs.writeFileSync(
-    OUTPUT_FILE,
-    JSON.stringify(trObj, translatables.values(), 4) + "\n"
-);
-
-console.log();
-console.log(`Wrote ${translatables.size} strings to ${OUTPUT_FILE}`);
diff --git a/scripts/prune-i18n.js b/scripts/prune-i18n.js
deleted file mode 100755
index b4fe8d69f5..0000000000
--- a/scripts/prune-i18n.js
+++ /dev/null
@@ -1,68 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Copyright 2017 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.
-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.
-*/
-
-/*
- * Looks through all the translation files and removes any strings
- * which don't appear in en_EN.json.
- * Use this if you remove a translation, but merge any outstanding changes
- * from weblate first or you'll need to resolve the conflict in weblate.
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const I18NDIR = 'src/i18n/strings';
-
-const enStringsRaw = JSON.parse(fs.readFileSync(path.join(I18NDIR, 'en_EN.json')));
-
-const enStrings = new Set();
-for (const str of Object.keys(enStringsRaw)) {
-    const parts = str.split('|');
-    if (parts.length > 1) {
-        enStrings.add(parts[0]);
-    } else {
-        enStrings.add(str);
-    }
-}
-
-for (const filename of fs.readdirSync(I18NDIR)) {
-    if (filename === 'en_EN.json') continue;
-    if (filename === 'basefile.json') continue;
-    if (!filename.endsWith('.json')) continue;
-
-    const trs = JSON.parse(fs.readFileSync(path.join(I18NDIR, filename)));
-    const oldLen = Object.keys(trs).length;
-    for (const tr of Object.keys(trs)) {
-        const parts = tr.split('|');
-        const trKey = parts.length > 1 ? parts[0] : tr;
-        if (!enStrings.has(trKey)) {
-            delete trs[tr];
-        }
-    }
-
-    const removed = oldLen - Object.keys(trs).length;
-    if (removed > 0) {
-        console.log(`${filename}: removed ${removed} translations`);
-        // XXX: This is totally relying on the impl serialising the JSON object in the
-        // same order as they were parsed from the file. JSON.stringify() has a specific argument
-        // that can be used to control the order, but JSON.parse() lacks any kind of equivalent.
-        // Empirically this does maintain the order on my system, so I'm going to leave it like
-        // this for now.
-        fs.writeFileSync(path.join(I18NDIR, filename), JSON.stringify(trs, undefined, 4) + "\n");
-    }
-}
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 41257c21f0..e8f2f1bc08 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -39,7 +39,9 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
 import {SpaceStoreClass} from "../stores/SpaceStore";
-import {VoiceRecording} from "../voice/VoiceRecording";
+import TypingStore from "../stores/TypingStore";
+import { EventIndexPeg } from "../indexing/EventIndexPeg";
+import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
 
 declare global {
     interface Window {
@@ -71,12 +73,16 @@ declare global {
         mxModalWidgetStore: ModalWidgetStore;
         mxVoipUserMapper: VoipUserMapper;
         mxSpaceStore: SpaceStoreClass;
-        mxVoiceRecorder: typeof VoiceRecording;
+        mxVoiceRecordingStore: VoiceRecordingStore;
+        mxTypingStore: TypingStore;
+        mxEventIndexPeg: EventIndexPeg;
     }
 
     interface Document {
         // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
         hasStorageAccess?: () => Promise<boolean>;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccess
+        requestStorageAccess?: () => Promise<undefined>;
 
         // Safari & IE11 only have this prefixed: we used prefixed versions
         // previously so let's continue to support them for now
@@ -112,6 +118,16 @@ declare global {
 
     interface HTMLAudioElement {
         type?: string;
+        // sinkId & setSinkId are experimental and typescript doesn't know about them
+        sinkId: string;
+        setSinkId(outputId: string);
+    }
+
+    interface HTMLVideoElement {
+        type?: string;
+        // sinkId & setSinkId are experimental and typescript doesn't know about them
+        sinkId: string;
+        setSinkId(outputId: string);
     }
 
     interface Element {
diff --git a/src/Avatar.ts b/src/Avatar.ts
index 76c88faa1c..a6499c688e 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -20,6 +20,7 @@ import {Room} from "matrix-js-sdk/src/models/room";
 
 import DMRoomMap from './utils/DMRoomMap';
 import {mediaFromMxc} from "./customisations/Media";
+import SettingsStore from "./settings/SettingsStore";
 
 export type ResizeMethod = "crop" | "scale";
 
@@ -27,11 +28,7 @@ export type ResizeMethod = "crop" | "scale";
 export function avatarUrlForMember(member: RoomMember, width: number, height: number, resizeMethod: ResizeMethod) {
     let url: string;
     if (member?.getMxcAvatarUrl()) {
-        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-            Math.floor(width * window.devicePixelRatio),
-            Math.floor(height * window.devicePixelRatio),
-            resizeMethod,
-        );
+        url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
     }
     if (!url) {
         // member can be null here currently since on invites, the JS SDK
@@ -44,11 +41,7 @@ export function avatarUrlForMember(member: RoomMember, width: number, height: nu
 
 export function avatarUrlForUser(user: User, width: number, height: number, resizeMethod?: ResizeMethod) {
     if (!user.avatarUrl) return null;
-    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(
-        Math.floor(width * window.devicePixelRatio),
-        Math.floor(height * window.devicePixelRatio),
-        resizeMethod,
-    );
+    return mediaFromMxc(user.avatarUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
 }
 
 function isValidHexColor(color: string): boolean {
@@ -151,7 +144,7 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi
     }
 
     // space rooms cannot be DMs so skip the rest
-    if (room.isSpaceRoom()) return null;
+    if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return null;
 
     let otherMember = null;
     const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
diff --git a/src/BasePlatform.ts b/src/BasePlatform.ts
index b6012d7597..5483ea6874 100644
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@@ -258,7 +258,7 @@ export default abstract class BasePlatform {
         return null;
     }
 
-    setLanguage(preferredLangs: string[]) {}
+    async setLanguage(preferredLangs: string[]) {}
 
     setSpellCheckLanguages(preferredLangs: string[]) {}
 
diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index be687a4474..0268ebfe46 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -59,7 +59,6 @@ import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-import { createNewMatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
@@ -86,6 +85,9 @@ import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
 import { randomUppercaseString, randomLowercaseString } from "matrix-js-sdk/src/randomstring";
+import EventEmitter from 'events';
+import SdkConfig from './SdkConfig';
+import { ensureDMExists, findDMForUser } from './createRoom';
 
 export const PROTOCOL_PSTN = 'm.protocol.pstn';
 export const PROTOCOL_PSTN_PREFIXED = 'im.vector.protocol.pstn';
@@ -137,22 +139,12 @@ export enum PlaceCallType {
     ScreenSharing = 'screensharing',
 }
 
-function getRemoteAudioElement(): HTMLAudioElement {
-    // this needs to be somewhere at the top of the DOM which
-    // always exists to avoid audio interruptions.
-    // Might as well just use DOM.
-    const remoteAudioElement = document.getElementById("remoteAudio") as HTMLAudioElement;
-    if (!remoteAudioElement) {
-        console.error(
-            "Failed to find remoteAudio element - cannot play audio!" +
-            "You need to add an <audio/> to the DOM.",
-        );
-        return null;
-    }
-    return remoteAudioElement;
+export enum CallHandlerEvent {
+    CallsChanged = "calls_changed",
+    CallChangeRoom = "call_change_room",
 }
 
-export default class CallHandler {
+export default class CallHandler extends EventEmitter {
     private calls = new Map<string, MatrixCall>(); // roomId -> call
     // Calls started as an attended transfer, ie. with the intention of transferring another
     // call with a different party to this one.
@@ -167,6 +159,11 @@ export default class CallHandler {
     private invitedRoomsAreVirtual = new Map<string, boolean>();
     private invitedRoomCheckInProgress = false;
 
+    // Map of the asserted identity users after we've looked them up using the API.
+    // We need to be be able to determine the mapped room synchronously, so we
+    // do the async lookup when we get new information and then store these mappings here
+    private assertedIdentityNativeUsers = new Map<string, string>();
+
     static sharedInstance() {
         if (!window.mxCallHandler) {
             window.mxCallHandler = new CallHandler()
@@ -179,8 +176,19 @@ export default class CallHandler {
      * Gets the user-facing room associated with a call (call.roomId may be the call "virtual room"
      * if a voip_mxid_translate_pattern is set in the config)
      */
-    public static roomIdForCall(call: MatrixCall): string {
+    public roomIdForCall(call: MatrixCall): string {
         if (!call) return null;
+
+        const voipConfig = SdkConfig.get()['voip'];
+
+        if (voipConfig && voipConfig.obeyAssertedIdentity) {
+            const nativeUser = this.assertedIdentityNativeUsers[call.callId];
+            if (nativeUser) {
+                const room = findDMForUser(MatrixClientPeg.get(), nativeUser);
+                if (room) return room.roomId
+            }
+        }
+
         return VoipUserMapper.sharedInstance().nativeRoomForVirtualRoom(call.roomId) || call.roomId;
     }
 
@@ -379,14 +387,14 @@ export default class CallHandler {
         // We don't allow placing more than one call per room, but that doesn't mean there
         // can't be more than one, eg. in a glare situation. This checks that the given call
         // is the call we consider 'the' call for its room.
-        const mappedRoomId = CallHandler.roomIdForCall(call);
+        const mappedRoomId = this.roomIdForCall(call);
 
         const callForThisRoom = this.getCallForRoom(mappedRoomId);
         return callForThisRoom && call.callId === callForThisRoom.callId;
     }
 
     private setCallListeners(call: MatrixCall) {
-        const mappedRoomId = CallHandler.roomIdForCall(call);
+        let mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
 
         call.on(CallEvent.Error, (err: CallError) => {
             if (!this.matchesCallForThisRoom(call)) return;
@@ -497,9 +505,43 @@ export default class CallHandler {
             }
 
             this.calls.set(mappedRoomId, newCall);
+            this.emit(CallHandlerEvent.CallsChanged, this.calls);
             this.setCallListeners(newCall);
             this.setCallState(newCall, newCall.state);
         });
+        call.on(CallEvent.AssertedIdentityChanged, async () => {
+            if (!this.matchesCallForThisRoom(call)) return;
+
+            console.log(`Call ID ${call.callId} got new asserted identity:`, call.getRemoteAssertedIdentity());
+
+            const newAssertedIdentity = call.getRemoteAssertedIdentity().id;
+            let newNativeAssertedIdentity = newAssertedIdentity;
+            if (newAssertedIdentity) {
+                const response = await this.sipNativeLookup(newAssertedIdentity);
+                if (response.length) newNativeAssertedIdentity = response[0].userid;
+            }
+            console.log(`Asserted identity ${newAssertedIdentity} mapped to ${newNativeAssertedIdentity}`);
+
+            if (newNativeAssertedIdentity) {
+                this.assertedIdentityNativeUsers[call.callId] = newNativeAssertedIdentity;
+
+                // If we don't already have a room with this user, make one. This will be slightly odd
+                // if they called us because we'll be inviting them, but there's not much we can do about
+                // this if we want the actual, native room to exist (which we do). This is why it's
+                // important to only obey asserted identity in trusted environments, since anyone you're
+                // on a call with can cause you to send a room invite to someone.
+                await ensureDMExists(MatrixClientPeg.get(), newNativeAssertedIdentity);
+
+                const newMappedRoomId = this.roomIdForCall(call);
+                console.log(`Old room ID: ${mappedRoomId}, new room ID: ${newMappedRoomId}`);
+                if (newMappedRoomId !== mappedRoomId) {
+                    this.removeCallForRoom(mappedRoomId);
+                    mappedRoomId = newMappedRoomId;
+                    this.calls.set(mappedRoomId, call);
+                    this.emit(CallHandlerEvent.CallChangeRoom, call);
+                }
+            }
+        });
     }
 
     private async logCallStats(call: MatrixCall, mappedRoomId: string) {
@@ -545,13 +587,8 @@ export default class CallHandler {
         }
     }
 
-    private setCallAudioElement(call: MatrixCall) {
-        const audioElement = getRemoteAudioElement();
-        if (audioElement) call.setRemoteAudioElement(audioElement);
-    }
-
     private setCallState(call: MatrixCall, status: CallState) {
-        const mappedRoomId = CallHandler.roomIdForCall(call);
+        const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
 
         console.log(
             `Call state in ${mappedRoomId} changed to ${status}`,
@@ -566,6 +603,7 @@ export default class CallHandler {
 
     private removeCallForRoom(roomId: string) {
         this.calls.delete(roomId);
+        this.emit(CallHandlerEvent.CallsChanged, this.calls);
     }
 
     private showICEFallbackPrompt() {
@@ -626,11 +664,7 @@ export default class CallHandler {
         }, null, true);
     }
 
-    private async placeCall(
-        roomId: string, type: PlaceCallType,
-        localElement: HTMLVideoElement, remoteElement: HTMLVideoElement,
-        transferee: MatrixCall,
-    ) {
+    private async placeCall(roomId: string, type: PlaceCallType, transferee: MatrixCall) {
         Analytics.trackEvent('voip', 'placeCall', 'type', type);
         CountlyAnalytics.instance.trackStartCall(roomId, type === PlaceCallType.Video, false);
 
@@ -639,25 +673,22 @@ export default class CallHandler {
 
         const timeUntilTurnCresExpire = MatrixClientPeg.get().getTurnServersExpiry() - Date.now();
         console.log("Current turn creds expire in " + timeUntilTurnCresExpire + " ms");
-        const call = createNewMatrixCall(MatrixClientPeg.get(), mappedRoomId);
+        const call = MatrixClientPeg.get().createCall(mappedRoomId);
 
         this.calls.set(roomId, call);
+        this.emit(CallHandlerEvent.CallsChanged, this.calls);
         if (transferee) {
             this.transferees[call.callId] = transferee;
         }
 
         this.setCallListeners(call);
-        this.setCallAudioElement(call);
 
         this.setActiveCallRoomId(roomId);
 
         if (type === PlaceCallType.Voice) {
             call.placeVoiceCall();
         } else if (type === 'video') {
-            call.placeVideoCall(
-                remoteElement,
-                localElement,
-            );
+            call.placeVideoCall();
         } else if (type === PlaceCallType.ScreenSharing) {
             const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
             if (screenCapErrorString) {
@@ -671,13 +702,12 @@ export default class CallHandler {
             }
 
             call.placeScreenSharingCall(
-                remoteElement,
-                localElement,
-                async () : Promise<DesktopCapturerSource> => {
+                async (): Promise<DesktopCapturerSource> => {
                     const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
                     const [source] = await finished;
                     return source;
-                });
+                },
+            );
         } else {
             console.error("Unknown conf call type: " + type);
         }
@@ -734,17 +764,12 @@ export default class CallHandler {
                     } else if (members.length === 2) {
                         console.info(`Place ${payload.type} call in ${payload.room_id}`);
 
-                        this.placeCall(
-                            payload.room_id, payload.type, payload.local_element, payload.remote_element,
-                            payload.transferee,
-                        );
+                        this.placeCall(payload.room_id, payload.type, payload.transferee);
                     } else { // > 2
                         dis.dispatch({
                             action: "place_conference_call",
                             room_id: payload.room_id,
                             type: payload.type,
-                            remote_element: payload.remote_element,
-                            local_element: payload.local_element,
                         });
                     }
                 }
@@ -772,7 +797,7 @@ export default class CallHandler {
 
                     const call = payload.call as MatrixCall;
 
-                    const mappedRoomId = CallHandler.roomIdForCall(call);
+                    const mappedRoomId = CallHandler.sharedInstance().roomIdForCall(call);
                     if (this.getCallForRoom(mappedRoomId)) {
                         // ignore multiple incoming calls to the same room
                         return;
@@ -780,6 +805,7 @@ export default class CallHandler {
 
                     Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
                     this.calls.set(mappedRoomId, call)
+                    this.emit(CallHandlerEvent.CallsChanged, this.calls);
                     this.setCallListeners(call);
 
                     // get ready to send encrypted events in the room, so if the user does answer
@@ -822,7 +848,6 @@ export default class CallHandler {
 
                 const call = this.calls.get(payload.room_id);
                 call.answer();
-                this.setCallAudioElement(call);
                 this.setActiveCallRoomId(payload.room_id);
                 CountlyAnalytics.instance.trackJoinCall(payload.room_id, call.type === CallType.Video, false);
                 dis.dispatch({
diff --git a/src/CallMediaHandler.js b/src/CallMediaHandler.js
index 7c7940cab5..634f0bb336 100644
--- a/src/CallMediaHandler.js
+++ b/src/CallMediaHandler.js
@@ -16,7 +16,7 @@
 
 import SettingsStore from "./settings/SettingsStore";
 import {SettingLevel} from "./settings/SettingLevel";
-import {setMatrixCallAudioInput, setMatrixCallAudioOutput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix";
+import {setMatrixCallAudioInput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix";
 
 export default {
     hasAnyLabeledDevices: async function() {
@@ -50,18 +50,15 @@ export default {
     },
 
     loadDevices: function() {
-        const audioOutDeviceId = SettingsStore.getValue("webrtc_audiooutput");
         const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
         const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
 
-        setMatrixCallAudioOutput(audioOutDeviceId);
         setMatrixCallAudioInput(audioDeviceId);
         setMatrixCallVideoInput(videoDeviceId);
     },
 
     setAudioOutput: function(deviceId) {
         SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
-        setMatrixCallAudioOutput(deviceId);
     },
 
     setAudioInput: function(deviceId) {
diff --git a/src/GroupAddressPicker.js b/src/GroupAddressPicker.js
index e7ae3217bb..d956189f0d 100644
--- a/src/GroupAddressPicker.js
+++ b/src/GroupAddressPicker.js
@@ -148,13 +148,15 @@ function _onGroupAddRoomFinished(groupId, addrs, addRoomsPublicly) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog(
             'Failed to add the following room to the group',
-            '', ErrorDialog,
-        {
-            title: _t(
-                "Failed to add the following rooms to %(groupId)s:",
-                {groupId},
-            ),
-            description: errorList.join(", "),
-        });
+            '',
+            ErrorDialog,
+            {
+                title: _t(
+                    "Failed to add the following rooms to %(groupId)s:",
+                    {groupId},
+                ),
+                description: errorList.join(", "),
+            },
+        );
     });
 }
diff --git a/src/IdentityAuthClient.js b/src/IdentityAuthClient.js
index 1687adf13b..9239c1bc75 100644
--- a/src/IdentityAuthClient.js
+++ b/src/IdentityAuthClient.js
@@ -163,7 +163,7 @@ export default class IdentityAuthClient {
                     </div>
                 ),
                 button: _t("Trust"),
-            });
+                });
             const [confirmed] = await finished;
             if (confirmed) {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
diff --git a/src/KeyBindingsManager.ts b/src/KeyBindingsManager.ts
index d862f10c02..aac14bde20 100644
--- a/src/KeyBindingsManager.ts
+++ b/src/KeyBindingsManager.ts
@@ -231,8 +231,10 @@ export class KeyBindingsManager {
     /**
      * Finds a matching KeyAction for a given KeyboardEvent
      */
-    private getAction<T extends string>(getters: KeyBindingGetter<T>[], ev: KeyboardEvent | React.KeyboardEvent)
-        : T | undefined {
+    private getAction<T extends string>(
+        getters: KeyBindingGetter<T>[],
+        ev: KeyboardEvent | React.KeyboardEvent,
+    ): T | undefined {
         for (const getter of getters) {
             const bindings = getter();
             const binding = bindings.find(it => isKeyComboMatch(ev, it.keyCombo, isMac));
diff --git a/src/Login.ts b/src/Login.ts
index db3c4c11e4..d584df7dfe 100644
--- a/src/Login.ts
+++ b/src/Login.ts
@@ -1,9 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2020 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.
@@ -59,7 +56,7 @@ export type LoginFlow = ISSOFlow | IPasswordFlow;
 // TODO: Move this to JS SDK
 /* eslint-disable camelcase */
 interface ILoginParams {
-    identifier?: string;
+    identifier?: object;
     password?: string;
     token?: string;
     device_id?: string;
diff --git a/src/PasswordReset.js b/src/PasswordReset.js
index 6fe6ca82cc..88ae00d088 100644
--- a/src/PasswordReset.js
+++ b/src/PasswordReset.js
@@ -54,7 +54,7 @@ export default class PasswordReset {
             return res;
         }, function(err) {
             if (err.errcode === 'M_THREEPID_NOT_FOUND') {
-                 err.message = _t('This email address was not found');
+                err.message = _t('This email address was not found');
             } else if (err.httpStatus) {
                 err.message = err.message + ` (Status ${err.httpStatus})`;
             }
diff --git a/src/Resend.js b/src/Resend.js
index bf69e59c1a..f1e5fb38f5 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -21,11 +21,11 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 export default class Resend {
     static resendUnsentEvents(room) {
-        room.getPendingEvents().filter(function(ev) {
+        return Promise.all(room.getPendingEvents().filter(function(ev) {
             return ev.status === EventStatus.NOT_SENT;
-        }).forEach(function(event) {
-            Resend.resend(event);
-        });
+        }).map(function(event) {
+            return Resend.resend(event);
+        }));
     }
 
     static cancelUnsentEvents(room) {
@@ -38,7 +38,7 @@ export default class Resend {
 
     static resend(event) {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
-        MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
+        return MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event,
diff --git a/src/ScalarAuthClient.js b/src/ScalarAuthClient.ts
similarity index 84%
rename from src/ScalarAuthClient.js
rename to src/ScalarAuthClient.ts
index 200b4fd7b9..a09c3494a8 100644
--- a/src/ScalarAuthClient.js
+++ b/src/ScalarAuthClient.ts
@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2016, 2019, 2021 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.
@@ -17,13 +16,14 @@ limitations under the License.
 
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
-import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
+import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError } from './Terms';
 import {MatrixClientPeg} from "./MatrixClientPeg";
 import request from "browser-request";
 
 import SdkConfig from "./SdkConfig";
 import {WidgetType} from "./widgets/WidgetType";
 import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
@@ -31,9 +31,11 @@ const imApiVersion = "1.1";
 // TODO: Generify the name of this class and all components within - it's not just for Scalar.
 
 export default class ScalarAuthClient {
-    constructor(apiUrl, uiUrl) {
-        this.apiUrl = apiUrl;
-        this.uiUrl = uiUrl;
+    private scalarToken: string;
+    private termsInteractionCallback: TermsInteractionCallback;
+    private isDefaultManager: boolean;
+
+    constructor(private apiUrl: string, private uiUrl: string) {
         this.scalarToken = null;
         // `undefined` to allow `startTermsFlow` to fallback to a default
         // callback if this is unset.
@@ -46,7 +48,7 @@ export default class ScalarAuthClient {
         this.isDefaultManager = apiUrl === configApiUrl && configUiUrl === uiUrl;
     }
 
-    _writeTokenToStore() {
+    private writeTokenToStore() {
         window.localStorage.setItem("mx_scalar_token_at_" + this.apiUrl, this.scalarToken);
         if (this.isDefaultManager) {
             // We remove the old token from storage to migrate upwards. This is safe
@@ -56,7 +58,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _readTokenFromStore() {
+    private readTokenFromStore(): string {
         let token = window.localStorage.getItem("mx_scalar_token_at_" + this.apiUrl);
         if (!token && this.isDefaultManager) {
             token = window.localStorage.getItem("mx_scalar_token");
@@ -64,33 +66,33 @@ export default class ScalarAuthClient {
         return token;
     }
 
-    _readToken() {
+    private readToken(): string {
         if (this.scalarToken) return this.scalarToken;
-        return this._readTokenFromStore();
+        return this.readTokenFromStore();
     }
 
     setTermsInteractionCallback(callback) {
         this.termsInteractionCallback = callback;
     }
 
-    connect() {
+    connect(): Promise<void> {
         return this.getScalarToken().then((tok) => {
             this.scalarToken = tok;
         });
     }
 
-    hasCredentials() {
+    hasCredentials(): boolean {
         return this.scalarToken != null; // undef or null
     }
 
     // Returns a promise that resolves to a scalar_token string
-    getScalarToken() {
-        const token = this._readToken();
+    getScalarToken(): Promise<string> {
+        const token = this.readToken();
 
         if (!token) {
             return this.registerForToken();
         } else {
-            return this._checkToken(token).catch((e) => {
+            return this.checkToken(token).catch((e) => {
                 if (e instanceof TermsNotSignedError) {
                     // retrying won't help this
                     throw e;
@@ -100,7 +102,7 @@ export default class ScalarAuthClient {
         }
     }
 
-    _getAccountName(token) {
+    private getAccountName(token: string): Promise<string> {
         const url = this.apiUrl + "/account";
 
         return new Promise(function(resolve, reject) {
@@ -125,8 +127,8 @@ export default class ScalarAuthClient {
         });
     }
 
-    _checkToken(token) {
-        return this._getAccountName(token).then(userId => {
+    private checkToken(token: string): Promise<string> {
+        return this.getAccountName(token).then(userId => {
             const me = MatrixClientPeg.get().getUserId();
             if (userId !== me) {
                 throw new Error("Scalar token is owned by someone else: " + me);
@@ -154,7 +156,7 @@ export default class ScalarAuthClient {
                 parsedImRestUrl.pathname = '';
                 return startTermsFlow([new Service(
                     SERVICE_TYPES.IM,
-                    parsedImRestUrl.format(),
+                    url.format(parsedImRestUrl),
                     token,
                 )], this.termsInteractionCallback).then(() => {
                     return token;
@@ -165,22 +167,22 @@ export default class ScalarAuthClient {
         });
     }
 
-    registerForToken() {
+    registerForToken(): Promise<string> {
         // Get openid bearer token from the HS as the first part of our dance
         return MatrixClientPeg.get().getOpenIdToken().then((tokenObject) => {
             // Now we can send that to scalar and exchange it for a scalar token
             return this.exchangeForScalarToken(tokenObject);
         }).then((token) => {
             // Validate it (this mostly checks to see if the IM needs us to agree to some terms)
-            return this._checkToken(token);
+            return this.checkToken(token);
         }).then((token) => {
             this.scalarToken = token;
-            this._writeTokenToStore();
+            this.writeTokenToStore();
             return token;
         });
     }
 
-    exchangeForScalarToken(openidTokenObject) {
+    exchangeForScalarToken(openidTokenObject: any): Promise<string> {
         const scalarRestUrl = this.apiUrl;
 
         return new Promise(function(resolve, reject) {
@@ -194,7 +196,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body || !body.scalar_token) {
                     reject(new Error("Missing scalar_token in response"));
                 } else {
@@ -204,7 +206,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarPageTitle(url) {
+    getScalarPageTitle(url: string): Promise<string> {
         let scalarPageLookupUrl = this.apiUrl + '/widgets/title_lookup';
         scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
         scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
@@ -218,7 +220,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Missing page title in response"));
                 } else {
@@ -240,10 +242,10 @@ export default class ScalarAuthClient {
      * @param  {string} widgetId   The widget ID to disable assets for
      * @return {Promise}           Resolves on completion
      */
-    disableWidgetAssets(widgetType: WidgetType, widgetId) {
+    disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise<void> {
         let url = this.apiUrl + '/widgets/set_assets_state';
         url = this.getStarterLink(url);
-        return new Promise((resolve, reject) => {
+        return new Promise<void>((resolve, reject) => {
             request({
                 method: 'GET', // XXX: Actions shouldn't be GET requests
                 uri: url,
@@ -257,7 +259,7 @@ export default class ScalarAuthClient {
                 if (err) {
                     reject(err);
                 } else if (response.statusCode / 100 !== 2) {
-                    reject({statusCode: response.statusCode});
+                    reject(new Error(`Scalar request failed: ${response.statusCode}`));
                 } else if (!body) {
                     reject(new Error("Failed to set widget assets state"));
                 } else {
@@ -267,7 +269,7 @@ export default class ScalarAuthClient {
         });
     }
 
-    getScalarInterfaceUrlForRoom(room, screen, id) {
+    getScalarInterfaceUrlForRoom(room: Room, screen: string, id: string): string {
         const roomId = room.roomId;
         const roomName = room.name;
         let url = this.uiUrl;
@@ -284,7 +286,7 @@ export default class ScalarAuthClient {
         return url;
     }
 
-    getStarterLink(starterLinkUrl) {
+    getStarterLink(starterLinkUrl: string): string {
         return starterLinkUrl + "?scalar_token=" + encodeURIComponent(this.scalarToken);
     }
 }
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 6ce1439164..4a7b37b5e5 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -38,7 +38,7 @@ import {isPermalinkHost, parsePermalink} from "./utils/permalinks/Permalinks";
 import {inviteUsersToRoom} from "./RoomInvite";
 import { WidgetType } from "./widgets/WidgetType";
 import { Jitsi } from "./widgets/Jitsi";
-import { parseFragment as parseHtml } from "parse5";
+import { parseFragment as parseHtml, Element as ChildElement } from "parse5";
 import BugReportDialog from "./components/views/dialogs/BugReportDialog";
 import { ensureDMExists } from "./createRoom";
 import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
@@ -856,7 +856,7 @@ export const Commands = [
                 // some superfast regex over the text so we don't have to.
                 const embed = parseHtml(widgetUrl);
                 if (embed && embed.childNodes && embed.childNodes.length === 1) {
-                    const iframe = embed.childNodes[0];
+                    const iframe = embed.childNodes[0] as ChildElement;
                     if (iframe.tagName.toLowerCase() === 'iframe' && iframe.attrs) {
                         const srcAttr = iframe.attrs.find(a => a.name === 'src');
                         console.log("Pulling URL out of iframe (embed code)");
diff --git a/src/Terms.js b/src/Terms.ts
similarity index 87%
rename from src/Terms.js
rename to src/Terms.ts
index 6ae89f9a2c..1bdff36cbc 100644
--- a/src/Terms.js
+++ b/src/Terms.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from 'classnames';
 
 import {MatrixClientPeg} from './MatrixClientPeg';
-import * as sdk from './';
+import * as sdk from '.';
 import Modal from './Modal';
 
 export class TermsNotSignedError extends Error {}
@@ -32,13 +32,30 @@ export class Service {
      * @param {string} baseUrl The Base URL of the service (ie. before '/_matrix')
      * @param {string} accessToken The user's access token for the service
      */
-    constructor(serviceType, baseUrl, accessToken) {
-        this.serviceType = serviceType;
-        this.baseUrl = baseUrl;
-        this.accessToken = accessToken;
+    constructor(public serviceType: string, public baseUrl: string, public accessToken: string) {
     }
 }
 
+interface Policy {
+    // @ts-ignore: No great way to express indexed types together with other keys
+    version: string;
+    [lang: string]: {
+        url: string;
+    };
+}
+type Policies = {
+    [policy: string]: Policy,
+};
+
+export type TermsInteractionCallback = (
+    policiesAndServicePairs: {
+        service: Service,
+        policies: Policies,
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+) => Promise<string[]>;
+
 /**
  * Start a flow where the user is presented with terms & conditions for some services
  *
@@ -51,8 +68,8 @@ export class Service {
  *     if they cancel.
  */
 export async function startTermsFlow(
-    services,
-    interactionCallback = dialogTermsInteractionCallback,
+    services: Service[],
+    interactionCallback: TermsInteractionCallback = dialogTermsInteractionCallback,
 ) {
     const termsPromises = services.map(
         (s) => MatrixClientPeg.get().getTerms(s.serviceType, s.baseUrl),
@@ -77,7 +94,7 @@ export async function startTermsFlow(
      * }
      */
 
-    const terms = await Promise.all(termsPromises);
+    const terms: { policies: Policies }[] = await Promise.all(termsPromises);
     const policiesAndServicePairs = terms.map((t, i) => { return { 'service': services[i], 'policies': t.policies }; });
 
     // fetch the set of agreed policy URLs from account data
@@ -158,10 +175,13 @@ export async function startTermsFlow(
 }
 
 export function dialogTermsInteractionCallback(
-    policiesAndServicePairs,
-    agreedUrls,
-    extraClassNames,
-) {
+    policiesAndServicePairs: {
+        service: Service,
+        policies: { [policy: string]: Policy },
+    }[],
+    agreedUrls: string[],
+    extraClassNames?: string,
+): Promise<string[]> {
     return new Promise((resolve, reject) => {
         console.log("Terms that need agreement", policiesAndServicePairs);
         const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index a6787c647d..86f9ff20f4 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -547,17 +547,23 @@ function textForMjolnirEvent(event) {
 
     // else the entity !== prevEntity - count as a removal & add
     if (USER_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     } else if (ROOM_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     } else if (SERVER_RULE_TYPES.includes(event.getType())) {
-        return _t("%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
+        return _t(
+            "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+        );
     }
 
     // Unknown type. We'll say something but we shouldn't end up here.
diff --git a/src/Unread.js b/src/Unread.js
index ddf225ac64..12c15eb6af 100644
--- a/src/Unread.js
+++ b/src/Unread.js
@@ -45,7 +45,7 @@ export function eventTriggersUnreadCount(ev) {
 }
 
 export function doesRoomHaveUnreadMessages(room) {
-    const myUserId = MatrixClientPeg.get().credentials.userId;
+    const myUserId = MatrixClientPeg.get().getUserId();
 
     // get the most recent read receipt sent by our account.
     // N.B. this is NOT a read marker (RM, aka "read up to marker"),
diff --git a/src/VoipUserMapper.ts b/src/VoipUserMapper.ts
index 4f5613b4a8..e5bed2e812 100644
--- a/src/VoipUserMapper.ts
+++ b/src/VoipUserMapper.ts
@@ -57,7 +57,11 @@ export default class VoipUserMapper {
         if (!virtualRoom) return null;
         const virtualRoomEvent = virtualRoom.getAccountData(VIRTUAL_ROOM_EVENT_TYPE);
         if (!virtualRoomEvent || !virtualRoomEvent.getContent()) return null;
-        return virtualRoomEvent.getContent()['native_room'] || null;
+        const nativeRoomID = virtualRoomEvent.getContent()['native_room'];
+        const nativeRoom = MatrixClientPeg.get().getRoom(nativeRoomID);
+        if (!nativeRoom || nativeRoom.getMyMembership() !== 'join') return null;
+
+        return nativeRoomID;
     }
 
     public isVirtualRoom(room: Room): boolean {
diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
similarity index 90%
rename from src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
rename to src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
index be3368b87b..0710c513da 100644
--- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js
+++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../../index';
-import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';
 import SdkConfig from '../../../../SdkConfig';
 import SettingsStore from "../../../../settings/SettingsStore";
@@ -26,14 +25,23 @@ import {formatBytes, formatCountLong} from "../../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
 import {SettingLevel} from "../../../../settings/SettingLevel";
 
+interface IProps {
+    onFinished: (confirmed: boolean) => void;
+}
+
+interface IState {
+    eventIndexSize: number;
+    eventCount: number;
+    crawlingRoomsCount: number;
+    roomCount: number;
+    currentRoom: string;
+    crawlerSleepTime: number;
+}
+
 /*
  * Allows the user to introspect the event index state and disable it.
  */
-export default class ManageEventIndexDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
-
+export default class ManageEventIndexDialog extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
@@ -84,7 +92,7 @@ export default class ManageEventIndexDialog extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    async componentDidMount(): Promise<void> {
         let eventIndexSize = 0;
         let crawlingRoomsCount = 0;
         let roomCount = 0;
@@ -123,14 +131,14 @@ export default class ManageEventIndexDialog extends React.Component {
         });
     }
 
-    _onDisable = async () => {
+    private onDisable = async () => {
         Modal.createTrackedDialogAsync("Disable message search", "Disable message search",
             import("./DisableEventIndexDialog"),
             null, null, /* priority = */ false, /* static = */ true,
         );
     };
 
-    _onCrawlerSleepTimeChange = (e) => {
+    private onCrawlerSleepTimeChange = (e) => {
         this.setState({crawlerSleepTime: e.target.value});
         SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     };
@@ -144,7 +152,7 @@ export default class ManageEventIndexDialog extends React.Component {
             crawlerState = _t("Not currently indexing messages for any room.");
         } else {
             crawlerState = (
-                    _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
+                _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
             );
         }
 
@@ -169,7 +177,7 @@ export default class ManageEventIndexDialog extends React.Component {
                         label={_t('Message downloading sleep time(ms)')}
                         type='number'
                         value={this.state.crawlerSleepTime}
-                        onChange={this._onCrawlerSleepTimeChange} />
+                        onChange={this.onCrawlerSleepTimeChange} />
                 </div>
             </div>
         );
@@ -188,7 +196,7 @@ export default class ManageEventIndexDialog extends React.Component {
                     onPrimaryButtonClick={this.props.onFinished}
                     primaryButtonClass="primary"
                     cancelButton={_t("Disable")}
-                    onCancel={this._onDisable}
+                    onCancel={this.onDisable}
                     cancelButtonClass="danger"
                 />
             </BaseDialog>
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
index 863ee2b427..549494b5cb 100644
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
@@ -310,7 +310,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
-                "Please enter your Security Phrase a second time to confirm.",
+                "Enter your Security Phrase a second time to confirm it.",
             )}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
@@ -498,9 +498,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 title={this._titleForPhase(this.state.phase)}
                 hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
             >
-            <div>
-                {content}
-            </div>
+                <div>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
index 84cb58536a..6d5703a768 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
@@ -647,7 +647,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         }
         return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
-                "Enter your recovery passphrase a second time to confirm it.",
+                "Enter your Security Phrase a second time to confirm it.",
             )}</p>
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
                 <Field
@@ -655,7 +655,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     onChange={this._onPassPhraseConfirmChange}
                     value={this.state.passPhraseConfirm}
                     className="mx_CreateSecretStorageDialog_passPhraseField"
-                    label={_t("Confirm your recovery passphrase")}
+                    label={_t("Confirm your Security Phrase")}
                     autoFocus={true}
                     autoComplete="new-password"
                 />
@@ -856,9 +856,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
                 fixedWidth={false}
             >
-            <div>
-                {content}
-            </div>
+                <div>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }
diff --git a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
index eeb68b94bd..60f2ca9168 100644
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
@@ -170,8 +170,11 @@ export default class ExportE2eKeysDialog extends React.Component {
                         </div>
                     </div>
                     <div className='mx_Dialog_buttons'>
-                        <input className='mx_Dialog_primary' type='submit' value={_t('Export')}
-                             disabled={disableForm}
+                        <input
+                            className='mx_Dialog_primary'
+                            type='submit'
+                            value={_t('Export')}
+                            disabled={disableForm}
                         />
                         <button onClick={this._onCancelClick} disabled={disableForm}>
                             { _t("Cancel") }
diff --git a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
index 670cb28b94..70fc997230 100644
--- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
@@ -140,36 +140,36 @@ export default class ImportE2eKeysDialog extends React.Component {
                         </div>
                         <div className='mx_E2eKeysDialog_inputTable'>
                             <div className='mx_E2eKeysDialog_inputRow'>
-                               <div className='mx_E2eKeysDialog_inputLabel'>
-                                   <label htmlFor='importFile'>
-                                       { _t("File to import") }
-                                   </label>
-                               </div>
-                               <div className='mx_E2eKeysDialog_inputCell'>
-                                   <input
-                                       ref={this._file}
-                                       id='importFile'
-                                       type='file'
-                                       autoFocus={true}
-                                       onChange={this._onFormChange}
-                                       disabled={disableForm} />
-                               </div>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='importFile'>
+                                        { _t("File to import") }
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input
+                                        ref={this._file}
+                                        id='importFile'
+                                        type='file'
+                                        autoFocus={true}
+                                        onChange={this._onFormChange}
+                                        disabled={disableForm} />
+                                </div>
                             </div>
                             <div className='mx_E2eKeysDialog_inputRow'>
-                               <div className='mx_E2eKeysDialog_inputLabel'>
-                                   <label htmlFor='passphrase'>
-                                       { _t("Enter passphrase") }
-                                   </label>
-                               </div>
-                               <div className='mx_E2eKeysDialog_inputCell'>
-                                   <input
-                                       ref={this._passphrase}
-                                       id='passphrase'
-                                       size='64'
-                                       type='password'
-                                       onChange={this._onFormChange}
-                                       disabled={disableForm} />
-                               </div>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='passphrase'>
+                                        { _t("Enter passphrase") }
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input
+                                        ref={this._passphrase}
+                                        id='passphrase'
+                                        size='64'
+                                        type='password'
+                                        onChange={this._onFormChange}
+                                        disabled={disableForm} />
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 32db5c251c..d5e4b092e2 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -200,10 +200,10 @@ class FilePanel extends React.Component {
                 previousPhase={RightPanelPhases.RoomSummary}
             >
                 <div className="mx_RoomView_empty">
-                { _t("You must <a>register</a> to use this functionality",
-                    {},
-                    { 'a': (sub) => <a href="#/register" key="sub">{ sub }</a> })
-                }
+                    { _t("You must <a>register</a> to use this functionality",
+                        {},
+                        { 'a': (sub) => <a href="#/register" key="sub">{ sub }</a> })
+                    }
                 </div>
             </BaseCard>;
         } else if (this.noRoom) {
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index 976b2d81a5..7c050e7433 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -153,17 +153,17 @@ class GroupFilterPanel extends React.Component {
                     type="draggable-TagTile"
                 >
                     { (provided, snapshot) => (
-                            <div
-                                className="mx_GroupFilterPanel_tagTileContainer"
-                                ref={provided.innerRef}
-                            >
-                                { this.renderGlobalIcon() }
-                                { tags }
-                                <div>
-                                    {createButton}
-                                </div>
-                                { provided.placeholder }
+                        <div
+                            className="mx_GroupFilterPanel_tagTileContainer"
+                            ref={provided.innerRef}
+                        >
+                            { this.renderGlobalIcon() }
+                            { tags }
+                            <div>
+                                {createButton}
                             </div>
+                            { provided.placeholder }
+                        </div>
                     ) }
                 </Droppable>
             </AutoHideScrollbar>
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index ed6167cbe7..3ab009d7b8 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -43,7 +43,7 @@ import {mediaFromMxc} from "../../customisations/Media";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 
 const LONG_DESC_PLACEHOLDER = _td(
-`<h1>HTML for your community's page</h1>
+    `<h1>HTML for your community's page</h1>
 <p>
     Use the long description to introduce new members to the community, or distribute
     some important <a href="foo">links</a>
@@ -110,14 +110,16 @@ class CategoryRoomList extends React.Component {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createTrackedDialog(
                         'Failed to add the following room to the group summary',
-                        '', ErrorDialog,
-                    {
-                        title: _t(
-                            "Failed to add the following rooms to the summary of %(groupId)s:",
-                            {groupId: this.props.groupId},
-                        ),
-                        description: errorList.join(", "),
-                    });
+                        '',
+                        ErrorDialog,
+                        {
+                            title: _t(
+                                "Failed to add the following rooms to the summary of %(groupId)s:",
+                                {groupId: this.props.groupId},
+                            ),
+                            description: errorList.join(", "),
+                        },
+                    );
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
@@ -146,8 +148,8 @@ class CategoryRoomList extends React.Component {
         let catHeader = <div />;
         if (this.props.category && this.props.category.profile) {
             catHeader = <div className="mx_GroupView_featuredThings_category">
-            { this.props.category.profile.name }
-        </div>;
+                { this.props.category.profile.name }
+            </div>;
         }
         return <div className="mx_GroupView_featuredThings_container">
             { catHeader }
@@ -190,13 +192,14 @@ class FeaturedRoom extends React.Component {
             Modal.createTrackedDialog(
                 'Failed to remove room from group summary',
                 '', ErrorDialog,
-            {
-                title: _t(
-                    "Failed to remove the room from the summary of %(groupId)s",
-                    {groupId: this.props.groupId},
-                ),
-                description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
-            });
+                {
+                    title: _t(
+                        "Failed to remove the room from the summary of %(groupId)s",
+                        {groupId: this.props.groupId},
+                    ),
+                    description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
+                },
+            );
         });
     };
 
@@ -283,13 +286,14 @@ class RoleUserList extends React.Component {
                     Modal.createTrackedDialog(
                         'Failed to add the following users to the community summary',
                         '', ErrorDialog,
-                    {
-                        title: _t(
-                            "Failed to add the following users to the summary of %(groupId)s:",
-                            {groupId: this.props.groupId},
-                        ),
-                        description: errorList.join(", "),
-                    });
+                        {
+                            title: _t(
+                                "Failed to add the following users to the summary of %(groupId)s:",
+                                {groupId: this.props.groupId},
+                            ),
+                            description: errorList.join(", "),
+                        },
+                    );
                 });
             },
         }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
@@ -299,11 +303,11 @@ class RoleUserList extends React.Component {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                 <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
-                 <div className="mx_GroupView_featuredThings_addButton_label">
-                     { _t('Add a User') }
-                 </div>
-             </AccessibleButton>) : <div />;
+                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
+                <div className="mx_GroupView_featuredThings_addButton_label">
+                    { _t('Add a User') }
+                </div>
+            </AccessibleButton>) : <div />;
         const userNodes = this.props.users.map((u) => {
             return <FeaturedUser
                 key={u.user_id}
@@ -352,14 +356,16 @@ class FeaturedUser extends React.Component {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog(
                 'Failed to remove user from community summary',
-                '', ErrorDialog,
-            {
-                title: _t(
-                    "Failed to remove a user from the summary of %(groupId)s",
-                    {groupId: this.props.groupId},
-                ),
-                description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
-            });
+                '',
+                ErrorDialog,
+                {
+                    title: _t(
+                        "Failed to remove a user from the summary of %(groupId)s",
+                        {groupId: this.props.groupId},
+                    ),
+                    description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
+                },
+            );
         });
     };
 
@@ -767,8 +773,8 @@ export default class GroupView extends React.Component {
             title: _t("Leave Community"),
             description: (
                 <span>
-                { _t("Leave %(groupName)s?", {groupName: this.props.groupId}) }
-                { warnings }
+                    { _t("Leave %(groupName)s?", {groupName: this.props.groupId}) }
+                    { warnings }
                 </span>
             ),
             button: _t("Leave"),
@@ -1055,10 +1061,11 @@ export default class GroupView extends React.Component {
             return null;
         }
 
-        const membershipButtonClasses = classnames([
-            'mx_RoomHeader_textButton',
-            'mx_GroupView_textButton',
-        ],
+        const membershipButtonClasses = classnames(
+            [
+                'mx_RoomHeader_textButton',
+                'mx_GroupView_textButton',
+            ],
             membershipButtonExtraClasses,
         );
 
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index e4762e35ad..7f9ef7516e 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -347,7 +347,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             if (element) {
                 classes = element.classList;
             }
-        } while (element && !cssClasses.some(c => classes.contains(c)));
+        } while (element && (!cssClasses.some(c => classes.contains(c)) || element.offsetParent === null));
 
         if (element) {
             element.focus();
@@ -416,7 +416,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         const roomList = <RoomList
             onKeyDown={this.onKeyDown}
-            resizeNotifier={null}
+            resizeNotifier={this.props.resizeNotifier}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 0255a3bf35..c4b9696807 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -59,6 +59,9 @@ import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBi
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import CallHandler, { CallHandlerEvent } from '../../CallHandler';
+import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
+import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -119,6 +122,7 @@ interface IState {
     usageLimitEventContent?: IUsageLimit;
     usageLimitEventTs?: number;
     useCompactLayout: boolean;
+    activeCalls: Array<MatrixCall>;
 }
 
 /**
@@ -160,6 +164,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             usageLimitDismissed: false,
+            activeCalls: [],
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -175,6 +180,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     componentDidMount() {
         document.addEventListener('keydown', this._onNativeKeyDown, false);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
 
         this._updateServerNoticeEvents();
 
@@ -199,6 +205,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     componentWillUnmount() {
         document.removeEventListener('keydown', this._onNativeKeyDown, false);
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
@@ -206,6 +213,12 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.resizer.detach();
     }
 
+    private onCallsChanged = () => {
+        this.setState({
+            activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
+        });
+    };
+
     // Child components assume that the client peg will not be null, so give them some
     // sort of assurance here by only allowing a re-render if the client is truthy.
     //
@@ -661,6 +674,12 @@ class LoggedInView extends React.Component<IProps, IState> {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
+        const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
+            return (
+                <AudioFeedArrayForCall call={call} key={call.callId} />
+            );
+        });
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
@@ -685,6 +704,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 <CallContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />
+                {audioFeedArraysForCalls}
             </MatrixClientContext.Provider>
         );
     }
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 078b296295..e330dc7d38 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1094,7 +1094,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     private leaveRoomWarnings(roomId: string) {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
-        const isSpace = roomToLeave?.isSpaceRoom();
+        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
         // Show a warning if there are additional complications.
         const warnings = [];
 
@@ -1133,7 +1133,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
         const warnings = this.leaveRoomWarnings(roomId);
 
-        const isSpace = roomToLeave?.isSpaceRoom();
+        const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
         Modal.createTrackedDialog(isSpace ? "Leave space" : "Leave room", '', QuestionDialog, {
             title: isSpace ? _t("Leave space") : _t("Leave room"),
             description: (
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 132d9ab4c3..c93f07fa0f 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -427,8 +427,10 @@ export default class MessagePanel extends React.Component {
             // we get a new DOM node (restarting the animation) when the ghost
             // moves to a different event.
             return (
-                <li key={"_readuptoghost_"+eventId}
-                      className="mx_RoomView_myReadMarker_container">
+                <li
+                    key={"_readuptoghost_"+eventId}
+                    className="mx_RoomView_myReadMarker_container"
+                >
                     { hr }
                 </li>
             );
@@ -1014,13 +1016,13 @@ class CreationGrouper {
 
         ret.push(
             <EventListSummary
-                 key="roomcreationsummary"
-                 events={this.events}
-                 onToggle={panel._onHeightChanged} // Update scroll state
-                 summaryMembers={[ev.sender]}
-                 summaryText={summaryText}
+                key="roomcreationsummary"
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                summaryMembers={[ev.sender]}
+                summaryText={summaryText}
             >
-                 { eventTiles }
+                { eventTiles }
             </EventListSummary>,
         );
 
@@ -1222,11 +1224,11 @@ class MemberGrouper {
 
         ret.push(
             <MemberEventListSummary key={key}
-                 events={this.events}
-                 onToggle={panel._onHeightChanged} // Update scroll state
-                 startExpanded={highlightInMels}
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                startExpanded={highlightInMels}
             >
-                 { eventTiles }
+                { eventTiles }
             </MemberEventListSummary>,
         );
 
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 5bcb3b2450..d8c763eabd 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -35,6 +35,7 @@ import {Action} from "../../dispatcher/actions";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import SettingsStore from "../../settings/SettingsStore";
 
 @replaceableComponent("structures.RightPanel")
 export default class RightPanel extends React.Component {
@@ -85,7 +86,9 @@ export default class RightPanel extends React.Component {
                 return RightPanelPhases.GroupMemberList;
             }
             return rps.groupPanelPhase;
-        } else if (this.props.room?.isSpaceRoom() && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)) {
+        } else if (SettingsStore.getValue("feature_spaces") && this.props.room?.isSpaceRoom()
+            && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)
+        ) {
             return RightPanelPhases.SpaceMemberList;
         } else if (userForPanel) {
             // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index a64feed42c..34682877e0 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -17,6 +17,8 @@ limitations under the License.
 import * as React from "react";
 import { createRef } from "react";
 import classNames from "classnames";
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import { ActionPayload } from "../../dispatcher/payloads";
@@ -26,7 +28,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore";
 import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import SpaceStore, {UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES} from "../../stores/SpaceStore";
 
 interface IProps {
     isMinimized: boolean;
@@ -40,6 +42,7 @@ interface IProps {
 interface IState {
     query: string;
     focused: boolean;
+    inSpaces: boolean;
 }
 
 @replaceableComponent("structures.RoomSearch")
@@ -54,11 +57,13 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.state = {
             query: "",
             focused: false,
+            inSpaces: false,
         };
 
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         // clear filter when changing spaces, in future we may wish to maintain a filter per-space
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.clearInput);
+        SpaceStore.instance.on(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
@@ -79,8 +84,15 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     public componentWillUnmount() {
         defaultDispatcher.unregister(this.dispatcherRef);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.clearInput);
+        SpaceStore.instance.off(UPDATE_TOP_LEVEL_SPACES, this.onSpaces);
     }
 
+    private onSpaces = (spaces: Room[]) => {
+        this.setState({
+            inSpaces: spaces.length > 0,
+        });
+    };
+
     private onAction = (payload: ActionPayload) => {
         if (payload.action === 'view_room' && payload.clear_search) {
             this.clearInput();
@@ -152,6 +164,11 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
             'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
         });
 
+        let placeholder = _t("Filter");
+        if (this.state.inSpaces) {
+            placeholder = _t("Filter all spaces");
+        }
+
         let icon = (
             <div className='mx_RoomSearch_icon' />
         );
@@ -165,7 +182,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onBlur={this.onBlur}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
-                placeholder={_t("Filter")}
+                placeholder={placeholder}
                 autoComplete="off"
             />
         );
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 54b6fee233..b2f0c70bd7 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015-2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 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.
@@ -20,16 +20,20 @@ import { _t, _td } from '../../languageHandler';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
-import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {messageForResourceLimitError} from '../../utils/ErrorUtils';
 import {Action} from "../../dispatcher/actions";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 import {EventStatus} from "matrix-js-sdk/src/models/event";
+import NotificationBadge from "../views/rooms/NotificationBadge";
+import {StaticNotificationState} from "../../stores/notifications/StaticNotificationState";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import InlineSpinner from "../views/elements/InlineSpinner";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
 const STATUS_BAR_EXPANDED_LARGE = 2;
 
-function getUnsentMessages(room) {
+export function getUnsentMessages(room) {
     if (!room) { return []; }
     return room.getPendingEvents().filter(function(ev) {
         return ev.status === EventStatus.NOT_SENT;
@@ -76,6 +80,7 @@ export default class RoomStatusBar extends React.Component {
         syncState: MatrixClientPeg.get().getSyncState(),
         syncStateData: MatrixClientPeg.get().getSyncStateData(),
         unsentMessages: getUnsentMessages(this.props.room),
+        isResending: false,
     };
 
     componentDidMount() {
@@ -109,7 +114,10 @@ export default class RoomStatusBar extends React.Component {
     };
 
     _onResendAllClick = () => {
-        Resend.resendUnsentEvents(this.props.room);
+        Resend.resendUnsentEvents(this.props.room).then(() => {
+            this.setState({isResending: false});
+        });
+        this.setState({isResending: true});
         dis.fire(Action.FocusComposer);
     };
 
@@ -120,9 +128,10 @@ export default class RoomStatusBar extends React.Component {
 
     _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
         if (room.roomId !== this.props.room.roomId) return;
-
+        const messages = getUnsentMessages(this.props.room);
         this.setState({
-            unsentMessages: getUnsentMessages(this.props.room),
+            unsentMessages: messages,
+            isResending: messages.length > 0 && this.state.isResending,
         });
     };
 
@@ -141,7 +150,7 @@ export default class RoomStatusBar extends React.Component {
     _getSize() {
         if (this._shouldShowConnectionError()) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0) {
+        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -162,7 +171,6 @@ export default class RoomStatusBar extends React.Component {
 
     _getUnsentMessageContent() {
         const unsentMessages = this.state.unsentMessages;
-        if (!unsentMessages.length) return null;
 
         let title;
 
@@ -192,89 +200,92 @@ export default class RoomStatusBar extends React.Component {
         } else if (resourceLimitError) {
             title = messageForResourceLimitError(
                 resourceLimitError.data.limit_type,
-                resourceLimitError.data.admin_contact, {
-                'monthly_active_user': _td(
-                    "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
-                    "Please <a>contact your service administrator</a> to continue using the service.",
-                ),
-                'hs_disabled': _td(
-                    "Your message wasn't sent because this homeserver has been blocked by it's administrator. " +
-                    "Please <a>contact your service administrator</a> to continue using the service.",
-                ),
-                '': _td(
-                    "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
-                    "Please <a>contact your service administrator</a> to continue using the service.",
-                ),
-            });
-        } else if (
-            unsentMessages.length === 1 &&
-            unsentMessages[0].error &&
-            unsentMessages[0].error.data &&
-            unsentMessages[0].error.data.error
-        ) {
-            title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
+                resourceLimitError.data.admin_contact,
+                {
+                    'monthly_active_user': _td(
+                        "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
+                        "Please <a>contact your service administrator</a> to continue using the service.",
+                    ),
+                    'hs_disabled': _td(
+                        "Your message wasn't sent because this homeserver has been blocked by it's administrator. " +
+                        "Please <a>contact your service administrator</a> to continue using the service.",
+                    ),
+                    '': _td(
+                        "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
+                        "Please <a>contact your service administrator</a> to continue using the service.",
+                    ),
+                },
+            );
         } else {
-            title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
+            title = _t('Some of your messages have not been sent');
         }
 
-        const content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> " +
-            "now. You can also select individual messages to resend or cancel.",
-            { count: unsentMessages.length },
-            {
-                'resendText': (sub) =>
-                    <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
-                'cancelText': (sub) =>
-                    <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
-            },
-        );
+        let buttonRow = <>
+            <AccessibleButton onClick={this._onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
+                {_t("Delete all")}
+            </AccessibleButton>
+            <AccessibleButton onClick={this._onResendAllClick} className="mx_RoomStatusBar_unsentResendAllBtn">
+                {_t("Retry all")}
+            </AccessibleButton>
+        </>;
+        if (this.state.isResending) {
+            buttonRow = <>
+                <InlineSpinner w={20} h={20} />
+                {/* span for css */}
+                <span>{_t("Sending")}</span>
+            </>;
+        }
 
-        return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title={_t("Warning")} alt="" />
-            <div>
-                <div className="mx_RoomStatusBar_connectionLostBar_title">
-                    { title }
-                </div>
-                <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                    { content }
+        return <>
+            <div className="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages">
+                <div role="alert">
+                    <div className="mx_RoomStatusBar_unsentBadge">
+                        <NotificationBadge
+                            notification={StaticNotificationState.RED_EXCLAMATION}
+                        />
+                    </div>
+                    <div>
+                        <div className="mx_RoomStatusBar_unsentTitle">
+                            { title }
+                        </div>
+                        <div className="mx_RoomStatusBar_unsentDescription">
+                            { _t("You can select all or individual messages to retry or delete") }
+                        </div>
+                    </div>
+                    <div className="mx_RoomStatusBar_unsentButtonBar">
+                        {buttonRow}
+                    </div>
                 </div>
             </div>
-        </div>;
+        </>;
     }
 
-    // return suitable content for the main (text) part of the status bar.
-    _getContent() {
+    render() {
         if (this._shouldShowConnectionError()) {
             return (
-                <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title="/!\ " alt="/!\ " />
-                    <div>
-                        <div className="mx_RoomStatusBar_connectionLostBar_title">
-                            { _t('Connectivity to the server has been lost.') }
-                        </div>
-                        <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                            { _t('Sent messages will be stored until your connection has returned.') }
+                <div className="mx_RoomStatusBar">
+                    <div role="alert">
+                        <div className="mx_RoomStatusBar_connectionLostBar">
+                            <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24"
+                                height="24" title="/!\ " alt="/!\ " />
+                            <div>
+                                <div className="mx_RoomStatusBar_connectionLostBar_title">
+                                    {_t('Connectivity to the server has been lost.')}
+                                </div>
+                                <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                                    {_t('Sent messages will be stored until your connection has returned.')}
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             );
         }
 
-        if (this.state.unsentMessages.length > 0) {
+        if (this.state.unsentMessages.length > 0 || this.state.isResending) {
             return this._getUnsentMessageContent();
         }
 
         return null;
     }
-
-    render() {
-        const content = this._getContent();
-
-        return (
-            <div className="mx_RoomStatusBar">
-                <div role="alert">
-                    { content }
-                </div>
-            </div>
-        );
-    }
 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 7168b7d139..58a87e6641 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -190,6 +190,9 @@ export interface IState {
     rejectError?: Error;
     hasPinnedWidgets?: boolean;
     dragCounter: number;
+    // whether or not a spaces context switch brought us here,
+    // if it did we don't want the room to be marked as read as soon as it is loaded.
+    wasContextSwitch?: boolean;
 }
 
 @replaceableComponent("structures.RoomView")
@@ -326,6 +329,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
             showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
+            wasContextSwitch: RoomViewStore.getWasContextSwitch(),
         };
 
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
@@ -1746,7 +1750,10 @@ export default class RoomView extends React.Component<IProps, IState> {
         }
 
         const myMembership = this.state.room.getMyMembership();
-        if (myMembership === "invite" && !this.state.room.isSpaceRoom()) { // SpaceRoomView handles invites itself
+        if (myMembership === "invite"
+            // SpaceRoomView handles invites itself
+            && (!SettingsStore.getValue("feature_spaces") || !this.state.room.isSpaceRoom())
+        ) {
             if (this.state.joining || this.state.rejecting) {
                 return (
                     <ErrorBoundary>
@@ -1888,7 +1895,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                     room={this.state.room}
                 />
             );
-            if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {
+            if (!this.state.canPeek && (!SettingsStore.getValue("feature_spaces") || !this.state.room?.isSpaceRoom())) {
                 return (
                     <div className="mx_RoomView">
                         { previewBar }
@@ -2014,6 +2021,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 timelineSet={this.state.room.getUnfilteredTimelineSet()}
                 showReadReceipts={this.state.showReadReceipts}
                 manageReadReceipts={!this.state.isPeeking}
+                sendReadReceiptOnLoad={!this.state.wasContextSwitch}
                 manageReadMarkers={!this.state.isPeeking}
                 hidden={hideMessagePanel}
                 highlightedEventId={highlightedEventId}
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 976734680c..5c5062633d 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -525,7 +525,7 @@ export default class ScrollPanel extends React.Component {
      */
     scrollRelative = mult => {
         const scrollNode = this._getScrollNode();
-        const delta = mult * scrollNode.clientHeight * 0.5;
+        const delta = mult * scrollNode.clientHeight * 0.9;
         scrollNode.scrollBy(0, delta);
         this._saveScrollState();
     };
@@ -884,16 +884,20 @@ export default class ScrollPanel extends React.Component {
 
         // give the <ol> an explicit role=list because Safari+VoiceOver seems to think an ordered-list with
         // list-style-type: none; is no longer a list
-        return (<AutoHideScrollbar wrappedRef={this._collectScroll}
+        return (
+            <AutoHideScrollbar
+                wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
-                className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
-                    { this.props.fixedChildren }
-                    <div className="mx_RoomView_messageListWrapper">
-                        <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
-                            { this.props.children }
-                        </ol>
-                    </div>
-                </AutoHideScrollbar>
-            );
+                className={`mx_ScrollPanel ${this.props.className}`}
+                style={this.props.style}
+            >
+                { this.props.fixedChildren }
+                <div className="mx_RoomView_messageListWrapper">
+                    <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
+                        { this.props.children }
+                    </ol>
+                </div>
+            </AutoHideScrollbar>
+        );
     }
 }
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 930cfa15a9..74415cc58f 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useState} from "react";
+import React, {ReactNode, useMemo, useState} from "react";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
@@ -24,7 +24,7 @@ import {sortBy} from "lodash";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
 import {_t} from "../../languageHandler";
-import AccessibleButton from "../views/elements/AccessibleButton";
+import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
@@ -39,11 +39,14 @@ import {mediaFromMxc} from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import {useStateToggle} from "../../hooks/useStateToggle";
+import {getOrder} from "../../stores/SpaceStore";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 interface IHierarchyProps {
     space: Room;
     initialText?: string;
     refreshToken?: any;
+    additionalButtons?: ReactNode;
     showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
 }
 
@@ -106,8 +109,16 @@ const Tile: React.FC<ITileProps> = ({
     const cliRoom = cli.getRoom(room.room_id);
     const myMembership = cliRoom?.getMyMembership();
 
-    const onPreviewClick = () => onViewRoomClick(false);
-    const onJoinClick = () => onViewRoomClick(true);
+    const onPreviewClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(false);
+    }
+    const onJoinClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onViewRoomClick(true);
+    }
 
     let button;
     if (myMembership === "join") {
@@ -136,7 +147,7 @@ const Tile: React.FC<ITileProps> = ({
 
     let url: string;
     if (room.avatar_url) {
-        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(Math.floor(20 * window.devicePixelRatio));
+        url = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(20);
     }
 
     let description = _t("%(count)s members", { count: room.num_joined_members });
@@ -254,7 +265,11 @@ export const HierarchyLevel = ({
     const space = cli.getRoom(spaceId);
     const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
 
-    const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
+    const children = Array.from(relations.get(spaceId)?.values() || []);
+    const sortedChildren = sortBy(children, ev => {
+        // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
+        return getOrder(ev.content.order, null, ev.state_key);
+    });
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
         const roomId = ev.state_key;
         if (!rooms.has(roomId)) return result;
@@ -312,11 +327,12 @@ export const HierarchyLevel = ({
 
 // mutate argument refreshToken to force a reload
 export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: any): [
+    null,
     ISpaceSummaryRoom[],
-    Map<string, Map<string, ISpaceSummaryEvent>>,
-    Map<string, Set<string>>,
-    Map<string, Set<string>>,
-] | [] => {
+    Map<string, Map<string, ISpaceSummaryEvent>>?,
+    Map<string, Set<string>>?,
+    Map<string, Set<string>>?,
+] | [Error] => {
     // TODO pagination
     return useAsyncMemo(async () => {
         try {
@@ -336,13 +352,12 @@ export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: a
                 }
             });
 
-            return [data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
+            return [null, data.rooms as ISpaceSummaryRoom[], parentChildRelations, viaMap, childParentRelations];
         } catch (e) {
             console.error(e); // TODO
+            return [e];
         }
-
-        return [];
-    }, [space, refreshToken], []);
+    }, [space, refreshToken], [undefined]);
 };
 
 export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
@@ -350,6 +365,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     initialText = "",
     showRoom,
     refreshToken,
+    additionalButtons,
     children,
 }) => {
     const cli = MatrixClientPeg.get();
@@ -358,7 +374,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
 
     const [selected, setSelected] = useState(new Map<string, Set<string>>()); // Map<parentId, Set<childId>>
 
-    const [rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
+    const [summaryError, rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
 
     const roomsMap = useMemo(() => {
         if (!rooms) return null;
@@ -397,6 +413,10 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
     const [removing, setRemoving] = useState(false);
     const [saving, setSaving] = useState(false);
 
+    if (summaryError) {
+        return <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+    }
+
     let content;
     if (roomsMap) {
         const numRooms = Array.from(roomsMap.values()).filter(r => r.room_type !== RoomType.Space).length;
@@ -411,78 +431,83 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
             countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
         }
 
-        let editSection;
+        let manageButtons;
         if (space.getMyMembership() === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
             const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
                 return [...selected.get(parentId).values()].map(childId => [parentId, childId]) as [string, string][];
             });
 
-            let buttons;
-            if (selectedRelations.length) {
-                const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
-                    return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
-                });
+            const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
+                return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
+            });
 
-                const disabled = removing || saving;
+            const disabled = !selectedRelations.length || removing || saving;
 
-                buttons = <>
-                    <AccessibleButton
-                        onClick={async () => {
-                            setRemoving(true);
-                            try {
-                                for (const [parentId, childId] of selectedRelations) {
-                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
-                                    parentChildMap.get(parentId).get(childId).content = {};
-                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                                }
-                            } catch (e) {
-                                setError(_t("Failed to remove some rooms. Try again later"));
-                            }
-                            setRemoving(false);
-                        }}
-                        kind="danger_outline"
-                        disabled={disabled}
-                    >
-                        { removing ? _t("Removing...") : _t("Remove") }
-                    </AccessibleButton>
-                    <AccessibleButton
-                        onClick={async () => {
-                            setSaving(true);
-                            try {
-                                for (const [parentId, childId] of selectedRelations) {
-                                    const suggested = !selectionAllSuggested;
-                                    const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
-                                    if (!existingContent || existingContent.suggested === suggested) continue;
-
-                                    const content = {
-                                        ...existingContent,
-                                        suggested: !selectionAllSuggested,
-                                    };
-
-                                    await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
-
-                                    parentChildMap.get(parentId).get(childId).content = content;
-                                    parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
-                                }
-                            } catch (e) {
-                                setError("Failed to update some suggestions. Try again later");
-                            }
-                            setSaving(false);
-                        }}
-                        kind="primary_outline"
-                        disabled={disabled}
-                    >
-                        { saving
-                            ? _t("Saving...")
-                            : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
-                        }
-                    </AccessibleButton>
-                </>;
+            let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+            let props = {};
+            if (!selectedRelations.length) {
+                Button = AccessibleTooltipButton;
+                props = {
+                    tooltip: _t("Select a room below first"),
+                    yOffset: -40,
+                };
             }
 
-            editSection = <span>
-                { buttons }
-            </span>;
+            manageButtons = <>
+                <Button
+                    {...props}
+                    onClick={async () => {
+                        setRemoving(true);
+                        try {
+                            for (const [parentId, childId] of selectedRelations) {
+                                await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
+                                parentChildMap.get(parentId).get(childId).content = {};
+                                parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                            }
+                        } catch (e) {
+                            setError(_t("Failed to remove some rooms. Try again later"));
+                        }
+                        setRemoving(false);
+                    }}
+                    kind="danger_outline"
+                    disabled={disabled}
+                >
+                    { removing ? _t("Removing...") : _t("Remove") }
+                </Button>
+                <Button
+                    {...props}
+                    onClick={async () => {
+                        setSaving(true);
+                        try {
+                            for (const [parentId, childId] of selectedRelations) {
+                                const suggested = !selectionAllSuggested;
+                                const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
+                                if (!existingContent || existingContent.suggested === suggested) continue;
+
+                                const content = {
+                                    ...existingContent,
+                                    suggested: !selectionAllSuggested,
+                                };
+
+                                await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
+
+                                parentChildMap.get(parentId).get(childId).content = content;
+                                parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
+                            }
+                        } catch (e) {
+                            setError("Failed to update some suggestions. Try again later");
+                        }
+                        setSaving(false);
+                    }}
+                    kind="primary_outline"
+                    disabled={disabled}
+                >
+                    { saving
+                        ? _t("Saving...")
+                        : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
+                    }
+                </Button>
+            </>;
         }
 
         let results;
@@ -528,7 +553,10 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
         content = <>
             <div className="mx_SpaceRoomDirectory_listHeader">
                 { countsStr }
-                { editSection }
+                <span>
+                    { additionalButtons }
+                    { manageButtons }
+                </span>
             </div>
             { error && <div className="mx_SpaceRoomDirectory_error">
                 { error }
@@ -538,10 +566,8 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
                 { children }
             </AutoHideScrollbar>
         </>;
-    } else if (!rooms) {
-        content = <Spinner />;
     } else {
-        content = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+        content = <Spinner />;
     }
 
     // TODO loading state/error state
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index 31358a3731..5db54815b7 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -51,6 +51,15 @@ import MemberAvatar from "../views/avatars/MemberAvatar";
 import {useStateToggle} from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
 import FacePile from "../views/elements/FacePile";
+import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
+import {sleep} from "../../utils/promise";
+import {calculateRoomVia} from "../../utils/permalinks/Permalinks";
+import {ChevronFace, ContextMenuButton, useContextMenu} from "./ContextMenu";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../views/context_menus/IconizedContextMenu";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 interface IProps {
     space: Room;
@@ -214,6 +223,67 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
     </div>;
 };
 
+const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
+    const cli = useContext(MatrixClientContext);
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const rect = handle.current.getBoundingClientRect();
+        contextMenu = <IconizedContextMenu
+            left={rect.left + window.pageXOffset + 0}
+            top={rect.bottom + window.pageYOffset + 8}
+            chevronFace={ChevronFace.None}
+            onFinished={closeMenu}
+            className="mx_RoomTile_contextMenu"
+            compact
+        >
+            <IconizedContextMenuOptionList first>
+                <IconizedContextMenuOption
+                    label={_t("Create new room")}
+                    iconClassName="mx_RoomList_iconPlus"
+                    onClick={async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+
+                        if (await showCreateNewRoom(cli, space)) {
+                            onNewRoomAdded();
+                        }
+                    }}
+                />
+                <IconizedContextMenuOption
+                    label={_t("Add existing room")}
+                    iconClassName="mx_RoomList_iconHash"
+                    onClick={async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+
+                        const [added] = await showAddExistingRooms(cli, space);
+                        if (added) {
+                            onNewRoomAdded();
+                        }
+                    }}
+                />
+            </IconizedContextMenuOptionList>
+        </IconizedContextMenu>;
+    }
+
+    return <>
+        <ContextMenuButton
+            kind="primary"
+            inputRef={handle}
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+            label={_t("Add")}
+        >
+            { _t("Add") }
+        </ContextMenuButton>
+        { contextMenu }
+    </>;
+};
+
 const SpaceLanding = ({ space }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
@@ -238,32 +308,20 @@ const SpaceLanding = ({ space }) => {
 
     const [refreshToken, forceUpdate] = useStateToggle(false);
 
-    let addRoomButtons;
+    let addRoomButton;
     if (canAddRooms) {
-        addRoomButtons = <React.Fragment>
-            <AccessibleButton className="mx_SpaceRoomView_landing_addButton" onClick={async () => {
-                const [added] = await showAddExistingRooms(cli, space);
-                if (added) {
-                    forceUpdate();
-                }
-            }}>
-                { _t("Add existing rooms & spaces") }
-            </AccessibleButton>
-            <AccessibleButton className="mx_SpaceRoomView_landing_createButton" onClick={() => {
-                showCreateNewRoom(cli, space);
-            }}>
-                { _t("Create a new room") }
-            </AccessibleButton>
-        </React.Fragment>;
+        addRoomButton = <SpaceLandingAddButton space={space} onNewRoomAdded={forceUpdate} />;
     }
 
     let settingsButton;
     if (shouldShowSpaceSettings(cli, space)) {
-        settingsButton = <AccessibleButton className="mx_SpaceRoomView_landing_settingsButton" onClick={() => {
-            showSpaceSettings(cli, space);
-        }}>
-            { _t("Settings") }
-        </AccessibleButton>;
+        settingsButton = <AccessibleTooltipButton
+            className="mx_SpaceRoomView_landing_settingsButton"
+            onClick={() => {
+                showSpaceSettings(cli, space);
+            }}
+            title={_t("Settings")}
+        />;
     }
 
     const onMembersClick = () => {
@@ -290,17 +348,19 @@ const SpaceLanding = ({ space }) => {
             <SpaceInfo space={space} />
             <FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
             { inviteButton }
+            { settingsButton }
         </div>
         <div className="mx_SpaceRoomView_landing_topic">
             <RoomTopic room={space} />
         </div>
         <hr />
-        <div className="mx_SpaceRoomView_landing_adminButtons">
-            { addRoomButtons }
-            { settingsButton }
-        </div>
 
-        <SpaceHierarchy space={space} showRoom={showRoom} refreshToken={refreshToken} />
+        <SpaceHierarchy
+            space={space}
+            showRoom={showRoom}
+            refreshToken={refreshToken}
+            additionalButtons={addRoomButton}
+        />
     </div>;
 };
 
@@ -354,7 +414,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     let buttonLabel = _t("Skip for now");
     if (roomNames.some(name => name.trim())) {
         onClick = onNextClick;
-        buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
+        buttonLabel = busy ? _t("Creating rooms...") : _t("Continue");
     }
 
     return <div>
@@ -376,6 +436,74 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
     </div>;
 };
 
+const SpaceAddExistingRooms = ({ space, onFinished }) => {
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
+
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    let onClick = onFinished;
+    let buttonLabel = _t("Skip for now");
+    if (selectedToAdd.size > 0) {
+        onClick = async () => {
+            setBusy(true);
+
+            for (const room of selectedToAdd) {
+                const via = calculateRoomVia(room);
+                try {
+                    await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                        if (e.errcode === "M_LIMIT_EXCEEDED") {
+                            await sleep(e.data.retry_after_ms);
+                            return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                        }
+
+                        throw e;
+                    });
+                } catch (e) {
+                    console.error("Failed to add rooms to space", e);
+                    setError(_t("Failed to add rooms to space"));
+                    break;
+                }
+            }
+            setBusy(false);
+        };
+        buttonLabel = busy ? _t("Adding...") : _t("Add");
+    }
+
+    return <div>
+        <h1>{ _t("What do you want to organise?") }</h1>
+        <div className="mx_SpaceRoomView_description">
+            { _t("Pick rooms or conversations to add. This is just a space for you, " +
+                "no one will be informed. You can add more later.") }
+        </div>
+
+        { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
+
+        <AddExistingToSpace
+            space={space}
+            selected={selectedToAdd}
+            onChange={(checked, room) => {
+                if (checked) {
+                    selectedToAdd.add(room);
+                } else {
+                    selectedToAdd.delete(room);
+                }
+                setSelectedToAdd(new Set(selectedToAdd));
+            }}
+        />
+
+        <div className="mx_SpaceRoomView_buttons">
+            <AccessibleButton
+                kind="primary"
+                disabled={busy}
+                onClick={onClick}
+            >
+                { buttonLabel }
+            </AccessibleButton>
+        </div>
+    </div>;
+};
+
 const SpaceSetupPublicShare = ({ space, onFinished }) => {
     return <div className="mx_SpaceRoomView_publicShare">
         <h1>{ _t("Share %(name)s", { name: space.name }) }</h1>
@@ -659,7 +787,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
                 return <SpaceSetupPrivateScope
                     space={this.props.space}
                     onFinished={(invite: boolean) => {
-                        this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
+                        this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateExistingRooms });
                     }}
                 />;
             case Phase.PrivateInvite:
@@ -675,6 +803,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
                         "You can add more later too, including already existing ones.")}
                     onFinished={() => this.setState({ phase: Phase.Landing })}
                 />;
+            case Phase.PrivateExistingRooms:
+                return <SpaceAddExistingRooms
+                    space={this.props.space}
+                    onFinished={() => this.setState({ phase: Phase.Landing })}
+                />;
         }
     }
 
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 12f5d6e890..8cc344f66b 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -68,6 +68,7 @@ class TimelinePanel extends React.Component {
         showReadReceipts: PropTypes.bool,
         // Enable managing RRs and RMs. These require the timelineSet to have a room.
         manageReadReceipts: PropTypes.bool,
+        sendReadReceiptOnLoad: PropTypes.bool,
         manageReadMarkers: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
@@ -126,6 +127,7 @@ class TimelinePanel extends React.Component {
         // event tile heights. (See _unpaginateEvents)
         timelineCap: Number.MAX_VALUE,
         className: 'mx_RoomView_messagePanel',
+        sendReadReceiptOnLoad: true,
     };
 
     constructor(props) {
@@ -785,8 +787,10 @@ class TimelinePanel extends React.Component {
             return;
         }
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
-        this._setReadMarker(lastDisplayedEvent.getId(),
-                            lastDisplayedEvent.getTs());
+        this._setReadMarker(
+            lastDisplayedEvent.getId(),
+            lastDisplayedEvent.getTs(),
+        );
 
         // the read-marker should become invisible, so that if the user scrolls
         // down, they don't see it.
@@ -872,7 +876,7 @@ class TimelinePanel extends React.Component {
             // The messagepanel knows where the RM is, so we must have loaded
             // the relevant event.
             this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
-                                                 0, 1/3);
+                0, 1/3);
             return;
         }
 
@@ -1044,12 +1048,14 @@ class TimelinePanel extends React.Component {
                 }
                 if (eventId) {
                     this._messagePanel.current.scrollToEvent(eventId, pixelOffset,
-                                                         offsetBase);
+                        offsetBase);
                 } else {
                     this._messagePanel.current.scrollToBottom();
                 }
 
-                this.sendReadReceipt();
+                if (this.props.sendReadReceiptOnLoad) {
+                    this.sendReadReceipt();
+                }
             });
         };
 
@@ -1418,8 +1424,8 @@ class TimelinePanel extends React.Component {
             ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
         const events = this.state.firstVisibleEventIndex
-              ? this.state.events.slice(this.state.firstVisibleEventIndex)
-              : this.state.events;
+            ? this.state.events.slice(this.state.firstVisibleEventIndex)
+            : this.state.events;
         return (
             <MessagePanel
                 ref={this._messagePanel}
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index 3ab73fb9ac..34a5410928 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2017, 2018, 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 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.
@@ -94,7 +94,7 @@ interface IState {
     // be seeing.
     serverIsAlive: boolean;
     serverErrorIsFatal: boolean;
-    serverDeadError: string;
+    serverDeadError?: ReactNode;
 }
 
 /*
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 73955e7832..96fb9bdc82 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2017, 2018, 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 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.
@@ -95,7 +95,7 @@ interface IState {
     // be seeing.
     serverIsAlive: boolean;
     serverErrorIsFatal: boolean;
-    serverDeadError: string;
+    serverDeadError?: ReactNode;
 
     // Our matrix client - part of state because we can't render the UI auth
     // component without it.
diff --git a/src/components/structures/auth/SoftLogout.js b/src/components/structures/auth/SoftLogout.tsx
similarity index 92%
rename from src/components/structures/auth/SoftLogout.js
rename to src/components/structures/auth/SoftLogout.tsx
index 08db3b2efe..fa9207efdd 100644
--- a/src/components/structures/auth/SoftLogout.js
+++ b/src/components/structures/auth/SoftLogout.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -15,14 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import * as Lifecycle from '../../../Lifecycle';
 import Modal from '../../../Modal';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {sendLoginRequest} from "../../../Login";
+import {ISSOFlow, LoginFlow, sendLoginRequest} from "../../../Login";
 import AuthPage from "../../views/auth/AuthPage";
 import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY} from "../../../BasePlatform";
 import SSOButtons from "../../views/elements/SSOButtons";
@@ -42,26 +41,38 @@ const FLOWS_TO_VIEWS = {
     "m.login.sso": LOGIN_VIEW.SSO,
 };
 
-@replaceableComponent("structures.auth.SoftLogout")
-export default class SoftLogout extends React.Component {
-    static propTypes = {
-        // Query parameters from MatrixChat
-        realQueryParams: PropTypes.object, // {loginToken}
-
-        // Called when the SSO login completes
-        onTokenLoginCompleted: PropTypes.func,
+interface IProps {
+    // Query parameters from MatrixChat
+    realQueryParams: {
+        loginToken?: string;
     };
+    fragmentAfterLogin?: string;
 
-    constructor() {
-        super();
+    // Called when the SSO login completes
+    onTokenLoginCompleted: () => void,
+}
+
+interface IState {
+    loginView: number;
+    keyBackupNeeded: boolean;
+    busy: boolean;
+    password: string;
+    errorText: string;
+    flows: LoginFlow[];
+}
+
+@replaceableComponent("structures.auth.SoftLogout")
+export default class SoftLogout extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             loginView: LOGIN_VIEW.LOADING,
             keyBackupNeeded: true, // assume we do while we figure it out (see componentDidMount)
-
             busy: false,
             password: "",
             errorText: "",
+            flows: [],
         };
     }
 
@@ -72,7 +83,7 @@ export default class SoftLogout extends React.Component {
             return;
         }
 
-        this._initLogin();
+        this.initLogin();
 
         const cli = MatrixClientPeg.get();
         if (cli.isCryptoEnabled()) {
@@ -94,7 +105,7 @@ export default class SoftLogout extends React.Component {
         });
     };
 
-    async _initLogin() {
+    private async initLogin() {
         const queryParams = this.props.realQueryParams;
         const hasAllParams = queryParams && queryParams['loginToken'];
         if (hasAllParams) {
@@ -189,7 +200,7 @@ export default class SoftLogout extends React.Component {
         });
     }
 
-    _renderSignInSection() {
+    private renderSignInSection() {
         if (this.state.loginView === LOGIN_VIEW.LOADING) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
@@ -247,7 +258,7 @@ export default class SoftLogout extends React.Component {
             } // else we already have a message and should use it (key backup warning)
 
             const loginType = this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso";
-            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType);
+            const flow = this.state.flows.find(flow => flow.type === "m.login." + loginType) as ISSOFlow;
 
             return (
                 <div>
@@ -289,7 +300,7 @@ export default class SoftLogout extends React.Component {
 
                     <h3>{_t("Sign in")}</h3>
                     <div>
-                        {this._renderSignInSection()}
+                        {this.renderSignInSection()}
                     </div>
 
                     <h3>{_t("Clear personal data")}</h3>
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 6cbecd22ee..e34349c474 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -169,7 +169,7 @@ export class PasswordAuthEntry extends React.Component {
                         { submitButtonOrSpinner }
                     </div>
                 </form>
-            { errorSection }
+                { errorSection }
             </div>
         );
     }
@@ -375,7 +375,7 @@ export class TermsAuthEntry extends React.Component {
         if (this.props.showContinue !== false) {
             // XXX: button classes
             submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
-                                   onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
+                onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
         }
 
         return (
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index c79cbc0d32..3205ca372c 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -68,8 +68,8 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
             let imageUrl = null;
             if (props.member.getMxcAvatarUrl()) {
                 imageUrl = mediaFromMxc(props.member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(
-                    Math.floor(props.width * window.devicePixelRatio),
-                    Math.floor(props.height * window.devicePixelRatio),
+                    props.width,
+                    props.height,
                     props.resizeMethod,
                 );
             }
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index ad0eb45a52..4693d907ba 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -93,8 +93,8 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         let oobAvatar = null;
         if (props.oobData.avatarUrl) {
             oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
+                props.width,
+                props.height,
                 props.resizeMethod,
             );
         }
@@ -109,12 +109,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
-        return Avatar.avatarUrlForRoom(
-            props.room,
-            Math.floor(props.width * window.devicePixelRatio),
-            Math.floor(props.height * window.devicePixelRatio),
-            props.resizeMethod,
-        );
+        return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
     private onRoomAvatarClick = () => {
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index f86cd26f32..35efd12c9c 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016, 2018, 2019, 2021 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.
@@ -34,7 +32,7 @@ import {MenuItem} from "../../structures/ContextMenu";
 import {EventType} from "matrix-js-sdk/src/@types/event";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-function canCancel(eventStatus) {
+export function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
@@ -98,21 +96,6 @@ export default class MessageContextMenu extends React.Component {
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     }
 
-    onResendClick = () => {
-        Resend.resend(this.props.mxEvent);
-        this.closeMenu();
-    };
-
-    onResendEditClick = () => {
-        Resend.resend(this.props.mxEvent.replacingEvent());
-        this.closeMenu();
-    };
-
-    onResendRedactionClick = () => {
-        Resend.resend(this.props.mxEvent.localRedactionEvent());
-        this.closeMenu();
-    };
-
     onResendReactionsClick = () => {
         for (const reaction of this._getUnsentReactions()) {
             Resend.resend(reaction);
@@ -170,29 +153,6 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onCancelSendClick = () => {
-        const mxEvent = this.props.mxEvent;
-        const editEvent = mxEvent.replacingEvent();
-        const redactEvent = mxEvent.localRedactionEvent();
-        const pendingReactions = this._getPendingReactions();
-
-        if (editEvent && canCancel(editEvent.status)) {
-            Resend.removeFromQueue(editEvent);
-        }
-        if (redactEvent && canCancel(redactEvent.status)) {
-            Resend.removeFromQueue(redactEvent);
-        }
-        if (pendingReactions.length) {
-            for (const reaction of pendingReactions) {
-                Resend.removeFromQueue(reaction);
-            }
-        }
-        if (canCancel(mxEvent.status)) {
-            Resend.removeFromQueue(this.props.mxEvent);
-        }
-        this.closeMenu();
-    };
-
     onForwardClick = () => {
         if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
@@ -285,20 +245,9 @@ export default class MessageContextMenu extends React.Component {
         const me = cli.getUserId();
         const mxEvent = this.props.mxEvent;
         const eventStatus = mxEvent.status;
-        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
-        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
         const unsentReactionsCount = this._getUnsentReactions().length;
-        const pendingReactionsCount = this._getPendingReactions().length;
-        const allowCancel = canCancel(mxEvent.status) ||
-            canCancel(editStatus) ||
-            canCancel(redactStatus) ||
-            pendingReactionsCount !== 0;
-        let resendButton;
-        let resendEditButton;
         let resendReactionsButton;
-        let resendRedactionButton;
         let redactButton;
-        let cancelButton;
         let forwardButton;
         let pinButton;
         let unhidePreviewButton;
@@ -309,22 +258,6 @@ export default class MessageContextMenu extends React.Component {
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
-            if (eventStatus === EventStatus.NOT_SENT) {
-                resendButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
-                        { _t('Resend') }
-                    </MenuItem>
-                );
-            }
-
-            if (editStatus === EventStatus.NOT_SENT) {
-                resendEditButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendEditClick}>
-                        { _t('Resend edit') }
-                    </MenuItem>
-                );
-            }
-
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
                     <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
@@ -334,14 +267,6 @@ export default class MessageContextMenu extends React.Component {
             }
         }
 
-        if (redactStatus === EventStatus.NOT_SENT) {
-            resendRedactionButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendRedactionClick}>
-                    { _t('Resend removal') }
-                </MenuItem>
-            );
-        }
-
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
@@ -350,14 +275,6 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        if (allowCancel) {
-            cancelButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
-                    { _t('Cancel Sending') }
-                </MenuItem>
-            );
-        }
-
         if (isContentActionable(mxEvent)) {
             forwardButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
@@ -433,7 +350,7 @@ export default class MessageContextMenu extends React.Component {
                 >
                     { _t('Source URL') }
                 </MenuItem>
-          );
+            );
         }
 
         if (this.props.collapseReplyThread) {
@@ -455,12 +372,8 @@ export default class MessageContextMenu extends React.Component {
 
         return (
             <div className="mx_MessageContextMenu">
-                { resendButton }
-                { resendEditButton }
                 { resendReactionsButton }
-                { resendRedactionButton }
                 { redactButton }
-                { cancelButton }
                 { forwardButton }
                 { pinButton }
                 { viewSourceButton }
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 0f58a624f3..a33248200c 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, {useContext, useMemo, useState} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClient} from "matrix-js-sdk/src/client";
@@ -29,10 +29,13 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import {getDisplayAliasForRoom} from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {allSettled} from "../../../utils/promise";
+import {sleep} from "../../../utils/promise";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import ProgressBar from "../elements/ProgressBar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -41,45 +44,128 @@ interface IProps extends IDialogProps {
 }
 
 const Entry = ({ room, checked, onChange }) => {
-    return <div className="mx_AddExistingToSpaceDialog_entry">
+    return <label className="mx_AddExistingToSpace_entry">
         <RoomAvatar room={room} height={32} width={32} />
-        <span className="mx_AddExistingToSpaceDialog_entry_name">{ room.name }</span>
-        <StyledCheckbox onChange={(e) => onChange(e.target.checked)} checked={checked} />
-    </div>;
+        <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
+        <StyledCheckbox
+            onChange={onChange ? (e) => onChange(e.target.checked) : null}
+            checked={checked}
+            disabled={!onChange}
+        />
+    </label>;
 };
 
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+interface IAddExistingToSpaceProps {
+    space: Room;
+    selected: Set<Room>;
+    onChange(checked: boolean, room: Room): void;
+}
+
+export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({ space, selected, onChange }) => {
+    const cli = useContext(MatrixClientContext);
+    const visibleRooms = useMemo(() => sortRooms(cli.getVisibleRooms()), [cli]);
+
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
 
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
     const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
     const existingSubspacesSet = new Set(existingSubspaces);
     const existingRoomsSet = new Set(SpaceStore.instance.getChildRooms(space.roomId));
 
-    const joinRule = selectedSpace.getJoinRule();
-    const [spaces, rooms, dms] = cli.getVisibleRooms().reduce((arr, room) => {
+    const joinRule = space.getJoinRule();
+    const [spaces, rooms, dms] = visibleRooms.reduce((arr, room) => {
         if (room.getMyMembership() !== "join") return arr;
         if (!room.name.toLowerCase().includes(lcQuery)) return arr;
 
         if (room.isSpaceRoom()) {
-            if (room !== space && room !== selectedSpace && !existingSubspacesSet.has(room)) {
+            if (room !== space && !existingSubspacesSet.has(room)) {
                 arr[0].push(room);
             }
-        } else if (!existingRoomsSet.has(room) && joinRule !== "public") {
-            // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
-            arr[DMRoomMap.shared().getUserIdForRoomId(room.roomId) ? 2 : 1].push(room);
+        } else if (!existingRoomsSet.has(room)) {
+            if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                arr[1].push(room);
+            } else if (joinRule !== "public") {
+                // Only show DMs for non-public spaces as they make very little sense in spaces other than "Just Me" ones.
+                arr[2].push(room);
+            }
         }
         return arr;
     }, [[], [], []]);
 
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
+    return <div className="mx_AddExistingToSpace">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={ _t("Filter your rooms and spaces") }
+            onSearch={setQuery}
+            autoComplete={true}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
+            { rooms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Rooms") }</h3>
+                    { rooms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selected.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : undefined }
+
+            { spaces.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
+                    <h3>{ _t("Spaces") }</h3>
+                    { spaces.map(space => {
+                        return <Entry
+                            key={space.roomId}
+                            room={space}
+                            checked={selected.has(space)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, space);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { dms.length > 0 ? (
+                <div className="mx_AddExistingToSpace_section">
+                    <h3>{ _t("Direct Messages") }</h3>
+                    { dms.map(room => {
+                        return <Entry
+                            key={room.roomId}
+                            room={room}
+                            checked={selected.has(room)}
+                            onChange={onChange ? (checked) => {
+                                onChange(checked, room);
+                            } : null}
+                        />;
+                    }) }
+                </div>
+            ) : null }
+
+            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
+
+    const [progress, setProgress] = useState<number>(null);
+    const [error, setError] = useState<Error>(null);
 
     let spaceOptionSection;
-    if (existingSubspacesSet.size > 0) {
+    if (existingSubspaces.length > 0) {
         const options = [space, ...existingSubspaces].map((space) => {
             const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
                 mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
@@ -116,116 +202,106 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
         </div>
     </React.Fragment>;
 
-    return <BaseDialog
-        title={title}
-        className="mx_AddExistingToSpaceDialog"
-        contentId="mx_AddExistingToSpaceDialog"
-        onFinished={onFinished}
-        fixedWidth={false}
-    >
-        { error && <div className="mx_AddExistingToSpaceDialog_errorText">{ error }</div> }
+    const addRooms = async () => {
+        setError(null);
+        setProgress(0);
 
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={ _t("Filter your rooms and spaces") }
-            onSearch={setQuery}
-            autoComplete={true}
-        />
-        <AutoHideScrollbar className="mx_AddExistingToSpaceDialog_content" id="mx_AddExistingToSpaceDialog">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selectedToAdd.has(room)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(room);
-                                } else {
-                                    selectedToAdd.delete(room);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
-            ) : undefined }
+        let error;
 
-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section mx_AddExistingToSpaceDialog_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selectedToAdd.has(space)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
-            ) : null }
+        for (const room of selectedToAdd) {
+            const via = calculateRoomVia(room);
+            try {
+                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
+                    if (e.errcode === "M_LIMIT_EXCEEDED") {
+                        await sleep(e.data.retry_after_ms);
+                        return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                    }
 
-            { dms.length > 0 ? (
-                <div className="mx_AddExistingToSpaceDialog_section">
-                    <h3>{ _t("Direct Messages") }</h3>
-                    { dms.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selectedToAdd.has(space)}
-                            onChange={(checked) => {
-                                if (checked) {
-                                    selectedToAdd.add(space);
-                                } else {
-                                    selectedToAdd.delete(space);
-                                }
-                                setSelectedToAdd(new Set(selectedToAdd));
-                            }}
-                        />;
-                    }) }
-                </div>
-            ) : null }
+                    throw e;
+                });
+                setProgress(i => i + 1);
+            } catch (e) {
+                console.error("Failed to add rooms to space", e);
+                setError(error = e);
+                break;
+            }
+        }
 
-            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpaceDialog_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
+        if (!error) {
+            onFinished(true);
+        }
+    };
 
-        <div className="mx_AddExistingToSpaceDialog_footer">
+    const busy = progress !== null;
+
+    let footer;
+    if (error) {
+        footer = <>
+            <img
+                src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                height="24"
+                width="24"
+                alt=""
+            />
+
+            <span className="mx_AddExistingToSpaceDialog_error">
+                <div className="mx_AddExistingToSpaceDialog_errorHeading">{ _t("Not all selected were added") }</div>
+                <div className="mx_AddExistingToSpaceDialog_errorCaption">{ _t("Try again") }</div>
+            </span>
+
+            <AccessibleButton className="mx_AddExistingToSpaceDialog_retryButton" onClick={addRooms}>
+                { _t("Retry") }
+            </AccessibleButton>
+        </>;
+    } else if (busy) {
+        footer = <span>
+            <ProgressBar value={progress} max={selectedToAdd.size} />
+            <div className="mx_AddExistingToSpaceDialog_progressText">
+                { _t("Adding rooms... (%(progress)s out of %(count)s)", {
+                    count: selectedToAdd.size,
+                    progress,
+                }) }
+            </div>
+        </span>;
+    } else {
+        footer = <>
             <span>
-                <div>{ _t("Don't want to add an existing room?") }</div>
+                <div>{ _t("Want to add a new room instead?") }</div>
                 <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
                     { _t("Create a new room") }
                 </AccessibleButton>
             </span>
 
-            <AccessibleButton
-                kind="primary"
-                disabled={busy || selectedToAdd.size < 1}
-                onClick={async () => {
-                    setBusy(true);
-                    try {
-                        await allSettled(Array.from(selectedToAdd).map((room) =>
-                            SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
-                        onFinished(true);
-                    } catch (e) {
-                        console.error("Failed to add rooms to space", e);
-                        setError(_t("Failed to add rooms to space"));
-                    }
-                    setBusy(false);
-                }}
-            >
-                { busy ? _t("Adding...") : _t("Add") }
+            <AccessibleButton kind="primary" disabled={selectedToAdd.size < 1} onClick={addRooms}>
+                { _t("Add") }
             </AccessibleButton>
+        </>;
+    }
+
+    return <BaseDialog
+        title={title}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpace"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={cli}>
+            <AddExistingToSpace
+                space={space}
+                selected={selectedToAdd}
+                onChange={!busy && !error ? (checked, room) => {
+                    if (checked) {
+                        selectedToAdd.add(room);
+                    } else {
+                        selectedToAdd.delete(room);
+                    }
+                    setSelectedToAdd(new Set(selectedToAdd));
+                } : null}
+            />
+        </MatrixClientContext.Provider>
+
+        <div className="mx_AddExistingToSpaceDialog_footer">
+            { footer }
         </div>
     </BaseDialog>;
 };
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index 8948c14c7c..cbe0130649 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -184,7 +184,7 @@ export default class BugReportDialog extends React.Component {
 
         return (
             <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
-                    title={_t('Submit debug logs')}
+                title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
diff --git a/src/components/views/dialogs/ChangelogDialog.js b/src/components/views/dialogs/ChangelogDialog.js
index 50bc13cff5..efbeba3977 100644
--- a/src/components/views/dialogs/ChangelogDialog.js
+++ b/src/components/views/dialogs/ChangelogDialog.js
@@ -95,7 +95,7 @@ export default class ChangelogDialog extends React.Component {
                 description={content}
                 button={_t("Update")}
                 onFinished={this.props.onFinished}
-                />
+            />
         );
     }
 }
diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.js b/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
index 4faaad0f7e..333e1522f1 100644
--- a/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
+++ b/src/components/views/dialogs/ConfirmWipeDeviceDialog.js
@@ -39,9 +39,12 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_ConfirmWipeDeviceDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Clear all data in this session?")}>
+            <BaseDialog
+                className='mx_ConfirmWipeDeviceDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Clear all data in this session?")}
+            >
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
                         {_t(
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9f5513e0a3..8a035263cc 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -70,8 +70,16 @@ class GenericEditor extends React.PureComponent {
     }
 
     textInput(id, label) {
-        return <Field id={id} label={label} size="42" autoFocus={true} type="text" autoComplete="on"
-                      value={this.state[id]} onChange={this._onChange} />;
+        return <Field
+            id={id}
+            label={label}
+            size="42"
+            autoFocus={true}
+            type="text"
+            autoComplete="on"
+            value={this.state[id]}
+            onChange={this._onChange}
+        />;
     }
 }
 
@@ -155,7 +163,7 @@ export class SendCustomEvent extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -239,7 +247,7 @@ class SendAccountData extends GenericEditor {
                 <br />
 
                 <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
-                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
+                    autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -315,15 +323,15 @@ class FilteredList extends React.PureComponent {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
             <Field label={_t('Filter results')} autoFocus={true} size={64}
-                   type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
-                   className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
-                   // force re-render so that autoFocus is applied when this component is re-used
-                   key={this.props.children[0] ? this.props.children[0].key : ''} />
+                type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
+                className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                // force re-render so that autoFocus is applied when this component is re-used
+                key={this.props.children[0] ? this.props.children[0].key : ''} />
 
             <TruncatedList getChildren={this.getChildren}
-                           getChildCount={this.getChildCount}
-                           truncateAt={this.state.truncateAt}
-                           createOverflowElement={this.createOverflowElement} />
+                getChildCount={this.getChildCount}
+                truncateAt={this.state.truncateAt}
+                createOverflowElement={this.createOverflowElement} />
         </div>;
     }
 }
@@ -647,7 +655,7 @@ function VerificationRequest({txnId, request}) {
 
         /* Note that request.timeout is a getter, so its value changes */
         const id = setInterval(() => {
-           setRequestTimeout(request.timeout);
+            setRequestTimeout(request.timeout);
         }, 500);
 
         return () => { clearInterval(id); };
@@ -941,35 +949,35 @@ class SettingsExplorer extends React.Component {
                         />
                         <table>
                             <thead>
-                            <tr>
-                                <th>{_t("Setting ID")}</th>
-                                <th>{_t("Value")}</th>
-                                <th>{_t("Value in this room")}</th>
-                            </tr>
+                                <tr>
+                                    <th>{_t("Setting ID")}</th>
+                                    <th>{_t("Value")}</th>
+                                    <th>{_t("Value in this room")}</th>
+                                </tr>
                             </thead>
                             <tbody>
-                            {allSettings.map(i => (
-                                <tr key={i}>
-                                    <td>
-                                        <a href="" onClick={(e) => this.onViewClick(e, i)}>
-                                            <code>{i}</code>
-                                        </a>
-                                        <a href="" onClick={(e) => this.onEditClick(e, i)}
-                                           className='mx_DevTools_SettingsExplorer_edit'
-                                        >
+                                {allSettings.map(i => (
+                                    <tr key={i}>
+                                        <td>
+                                            <a href="" onClick={(e) => this.onViewClick(e, i)}>
+                                                <code>{i}</code>
+                                            </a>
+                                            <a href="" onClick={(e) => this.onEditClick(e, i)}
+                                                className='mx_DevTools_SettingsExplorer_edit'
+                                            >
                                             ✏
-                                        </a>
-                                    </td>
-                                    <td>
-                                        <code>{this.renderSettingValue(SettingsStore.getValue(i))}</code>
-                                    </td>
-                                    <td>
-                                        <code>
-                                            {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
-                                        </code>
-                                    </td>
-                                </tr>
-                            ))}
+                                            </a>
+                                        </td>
+                                        <td>
+                                            <code>{this.renderSettingValue(SettingsStore.getValue(i))}</code>
+                                        </td>
+                                        <td>
+                                            <code>
+                                                {this.renderSettingValue(SettingsStore.getValue(i, room.roomId))}
+                                            </code>
+                                        </td>
+                                    </tr>
+                                ))}
                             </tbody>
                         </table>
                     </div>
@@ -998,11 +1006,11 @@ class SettingsExplorer extends React.Component {
                         <div>
                             <table>
                                 <thead>
-                                <tr>
-                                    <th>{_t("Level")}</th>
-                                    <th>{_t("Settable at global")}</th>
-                                    <th>{_t("Settable at room")}</th>
-                                </tr>
+                                    <tr>
+                                        <th>{_t("Level")}</th>
+                                        <th>{_t("Settable at global")}</th>
+                                        <th>{_t("Settable at room")}</th>
+                                    </tr>
                                 </thead>
                                 <tbody>
                                     {LEVEL_ORDER.map(lvl => (
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index f18b7a9d0c..5df02d7a6f 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -130,7 +130,7 @@ export default class IncomingSasDialog extends React.Component {
         const oppProfile = this.state.opponentProfile;
         if (oppProfile) {
             const url = oppProfile.avatar_url
-                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(Math.floor(48 * window.devicePixelRatio))
+                ? mediaFromMxc(oppProfile.avatar_url).getSquareThumbnailHttp(48)
                 : null;
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
                 <BaseAvatar name={oppProfile.displayname}
diff --git a/src/components/views/dialogs/IntegrationsDisabledDialog.js b/src/components/views/dialogs/IntegrationsDisabledDialog.js
index 0e9878f4bc..dd7a51420e 100644
--- a/src/components/views/dialogs/IntegrationsDisabledDialog.js
+++ b/src/components/views/dialogs/IntegrationsDisabledDialog.js
@@ -42,9 +42,12 @@ export default class IntegrationsDisabledDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsDisabledDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations are disabled")}>
+            <BaseDialog
+                className='mx_IntegrationsDisabledDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations are disabled")}
+            >
                 <div className='mx_IntegrationsDisabledDialog_content'>
                     <p>{_t("Enable 'Manage Integrations' in Settings to do this.")}</p>
                 </div>
diff --git a/src/components/views/dialogs/IntegrationsImpossibleDialog.js b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
index 9bc9d02ba6..e14d40aaef 100644
--- a/src/components/views/dialogs/IntegrationsImpossibleDialog.js
+++ b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
@@ -37,9 +37,12 @@ export default class IntegrationsImpossibleDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_IntegrationsImpossibleDialog' hasCancel={false}
-                        onFinished={this.props.onFinished}
-                        title={_t("Integrations not allowed")}>
+            <BaseDialog
+                className='mx_IntegrationsImpossibleDialog'
+                hasCancel={false}
+                onFinished={this.props.onFinished}
+                title={_t("Integrations not allowed")}
+            >
                 <div className='mx_IntegrationsImpossibleDialog_content'>
                     <p>
                         {_t(
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 2ebc84ec7c..ec9c71ccbe 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -1312,7 +1312,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             goButtonFn = this._startDm;
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
-            const isSpace = room?.isSpaceRoom();
+            const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
             title = isSpace
                 ? _t("Invite to %(spaceName)s", {
                     spaceName: room.name || _t("Unnamed Space"),
diff --git a/src/components/views/dialogs/KeySignatureUploadFailedDialog.js b/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
index 25eb7a90d2..bcb4d4f9b9 100644
--- a/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
+++ b/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
@@ -24,7 +24,7 @@ export default function KeySignatureUploadFailedDialog({
         source,
         continuation,
         onFinished,
-    }) {
+}) {
     const RETRIES = 2;
     const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -84,10 +84,10 @@ export default function KeySignatureUploadFailedDialog({
     } else {
         body = (<div>
             {success ?
-              <span>{_t("Upload completed")}</span> :
-              cancelled ?
-                <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unable to upload")}</span>}
+                <span>{_t("Upload completed")}</span> :
+                cancelled ?
+                    <span>{_t("Cancelled signature upload")}</span> :
+                    <span>{_t("Unable to upload")}</span>}
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}
diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.js b/src/components/views/dialogs/MessageEditHistoryDialog.js
index 7585561c0c..beb11e70e4 100644
--- a/src/components/views/dialogs/MessageEditHistoryDialog.js
+++ b/src/components/views/dialogs/MessageEditHistoryDialog.js
@@ -164,8 +164,12 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         }
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <BaseDialog className='mx_MessageEditHistoryDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Message edits")}>
+            <BaseDialog
+                className='mx_MessageEditHistoryDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Message edits")}
+            >
                 {content}
             </BaseDialog>
         );
diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js
index 9c2f23ef22..b6c4d42243 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.js
+++ b/src/components/views/dialogs/RoomSettingsDialog.js
@@ -116,8 +116,12 @@ export default class RoomSettingsDialog extends React.Component {
 
         const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
         return (
-            <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Room Settings - %(roomName)s", {roomName})}>
+            <BaseDialog
+                className='mx_RoomSettingsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Room Settings - %(roomName)s", {roomName})}
+            >
                 <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} />
                 </div>
diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx
index 4abc0a88b1..62a2b95c68 100644
--- a/src/components/views/dialogs/ServerPickerDialog.tsx
+++ b/src/components/views/dialogs/ServerPickerDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -110,7 +110,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                 console.error(e);
 
                 const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
-                if (stateForError.isFatalError) {
+                if (stateForError.serverErrorIsFatal) {
                     let error = _t("Unable to validate homeserver");
                     if (e.translatedMessage) {
                         error = e.translatedMessage;
@@ -168,7 +168,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
             text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
         }
 
-        let defaultServerName = this.defaultServer.hsName;
+        let defaultServerName: React.ReactNode = this.defaultServer.hsName;
         if (this.defaultServer.hsNameIsDifferent) {
             defaultServerName = (
                 <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index 50d7fbea09..43e73a2f83 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -98,7 +98,7 @@ export default class SessionRestoreErrorDialog extends React.Component {
                         "may be incompatible with this version. Close this window and return " +
                         "to the more recent version.",
                         { brand },
-                     ) }</p>
+                    ) }</p>
 
                     <p>{ _t(
                         "Clearing your browser's storage may fix the problem, but will sign you " +
diff --git a/src/components/views/dialogs/StorageEvictedDialog.js b/src/components/views/dialogs/StorageEvictedDialog.js
index 15c5347644..1e17ab1738 100644
--- a/src/components/views/dialogs/StorageEvictedDialog.js
+++ b/src/components/views/dialogs/StorageEvictedDialog.js
@@ -45,10 +45,12 @@ export default class StorageEvictedDialog extends React.Component {
         let logRequest;
         if (SdkConfig.get().bug_report_endpoint_url) {
             logRequest = _t(
-                "To help us prevent this in future, please <a>send us logs</a>.", {},
-            {
-                a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
-            });
+                "To help us prevent this in future, please <a>send us logs</a>.",
+                {},
+                {
+                    a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
+                },
+            );
         }
 
         return (
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index eb9eaeb5dd..e7f6953589 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -155,8 +155,12 @@ export default class UserSettingsDialog extends React.Component {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
         return (
-            <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Settings")}>
+            <BaseDialog
+                className='mx_UserSettingsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Settings")}
+            >
                 <div className='mx_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js
index 205597a1c4..9281275e6a 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.js
@@ -52,11 +52,13 @@ export default class VerificationRequestDialog extends React.Component {
         const title = request && request.isSelfVerification ?
             _t("Verify other login") : _t("Verification Request");
 
-        return <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
-                contentId="mx_Dialog_content"
-                title={title}
-                hasCancel={true}
-            >
+        return <BaseDialog
+            className="mx_InfoDialog"
+            onFinished={this.props.onFinished}
+            contentId="mx_Dialog_content"
+            title={title}
+            hasCancel={true}
+        >
             <EncryptionPanel
                 layout="dialog"
                 verificationRequest={this.props.verificationRequest}
diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
index f45adf9738..f77661c54e 100644
--- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
+++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
@@ -70,9 +70,12 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
-            <BaseDialog className='mx_WidgetOpenIDPermissionsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished}
-                        title={_t("Allow this widget to verify your identity")}>
+            <BaseDialog
+                className='mx_WidgetOpenIDPermissionsDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Allow this widget to verify your identity")}
+            >
                 <div className='mx_WidgetOpenIDPermissionsDialog_content'>
                     <p>
                         {_t("The widget will verify your user ID, but won't be able to perform actions for you:")}
diff --git a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
index 43fb25f152..e71983b074 100644
--- a/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
+++ b/src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.js
@@ -40,10 +40,11 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component {
 
         return (
             <BaseDialog
-                    className='mx_ConfirmDestroyCrossSigningDialog'
-                    hasCancel={true}
-                    onFinished={this.props.onFinished}
-                    title={_t("Destroy cross-signing keys?")}>
+                className='mx_ConfirmDestroyCrossSigningDialog'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                title={_t("Destroy cross-signing keys?")}
+            >
                 <div className='mx_ConfirmDestroyCrossSigningDialog_content'>
                     <p>
                         {_t(
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
index 1fafe03d95..4ac15ab5a3 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@@ -373,21 +373,24 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 {_t(
                     "If you've forgotten your Security Phrase you can "+
                     "<button1>use your Security Key</button1> or " +
-                    "<button2>set up new recovery options</button2>"
-                , {}, {
-                    button1: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onUseRecoveryKeyClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                    button2: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
+                    "<button2>set up new recovery options</button2>",
+                    {},
+                    {
+                        button1: s => <AccessibleButton
+                            className="mx_linkButton"
+                            element="span"
+                            onClick={this._onUseRecoveryKeyClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                        button2: s => <AccessibleButton
+                            className="mx_linkButton"
+                            element="span"
+                            onClick={this._onResetRecoveryClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    })}
             </div>;
         } else {
             title = _t("Enter Security Key");
@@ -435,15 +438,17 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 </div>
                 {_t(
                     "If you've forgotten your Security Key you can "+
-                    "<button>set up new recovery options</button>"
-                , {}, {
-                    button: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
+                    "<button>set up new recovery options</button>",
+                    {},
+                    {
+                        button: s => <AccessibleButton className="mx_linkButton"
+                            element="span"
+                            onClick={this._onResetRecoveryClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    },
+                )}
             </div>;
         }
 
@@ -452,9 +457,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div className='mx_RestoreKeyBackupDialog_content'>
-                {content}
-            </div>
+                <div className='mx_RestoreKeyBackupDialog_content'>
+                    {content}
+                </div>
             </BaseDialog>
         );
     }
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 1714891cb5..9903c631b2 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -70,8 +70,8 @@ export default class ActionButton extends React.Component {
         }
 
         const icon = this.props.iconPath ?
-                (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
-                undefined;
+            (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
+            undefined;
 
         const classNames = ["mx_RoleButton"];
         if (this.props.className) {
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index e206fda797..b898ad2ebc 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -109,7 +109,7 @@ export default class AppTile extends React.Component {
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:",
-            parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
+                parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
             return true;
         }
         return false;
diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index ff62f169fa..d8ec5af278 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -65,12 +65,18 @@ export class EditableItem extends React.Component {
                     <span className="mx_EditableItem_promptText">
                         {_t("Are you sure?")}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
-                                      className="mx_EditableItem_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="primary_sm"
+                        className="mx_EditableItem_confirmBtn"
+                    >
                         {_t("Yes")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
-                                      className="mx_EditableItem_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="danger_sm"
+                        className="mx_EditableItem_confirmBtn"
+                    >
                         {_t("No")}
                     </AccessibleButton>
                 </div>
@@ -121,11 +127,15 @@ export default class EditableItemList extends React.Component {
 
     _renderNewItemField() {
         return (
-            <form onSubmit={this._onItemAdded} autoComplete="off"
-                  noValidate={true} className="mx_EditableItemList_newItem">
+            <form
+                onSubmit={this._onItemAdded}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_EditableItemList_newItem"
+            >
                 <Field label={this.props.placeholder} type="text"
-                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
-                       list={this.props.suggestionsListId} />
+                    autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
+                    list={this.props.suggestionsListId} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
                     {_t("Add")}
                 </AccessibleButton>
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 638fd02553..7c38ac1777 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -221,13 +221,15 @@ export default class EditableText extends React.Component {
             </div>;
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
-            editableEl = <div ref={this._editable_div}
-                              contentEditable={true}
-                              className={className}
-                              onKeyDown={this.onKeyDown}
-                              onKeyUp={this.onKeyUp}
-                              onFocus={this.onFocus}
-                              onBlur={this.onBlur} />;
+            editableEl = <div
+                ref={this._editable_div}
+                contentEditable={true}
+                className={className}
+                onKeyDown={this.onKeyDown}
+                onKeyUp={this.onKeyUp}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            />;
         }
 
         return editableEl;
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index cbced07bfe..05d487a9eb 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -34,16 +34,15 @@ import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import {normalizeWheelEvent} from "../../../utils/Mouse";
 
-const MIN_ZOOM = 100;
-const MAX_ZOOM = 300;
+// Max scale to keep gaps around the image
+const MAX_SCALE = 0.95;
 // This is used for the buttons
-const ZOOM_STEP = 10;
+const ZOOM_STEP = 0.10;
 // This is used for mouse wheel events
-const ZOOM_COEFFICIENT = 0.5;
+const ZOOM_COEFFICIENT = 0.0025;
 // If we have moved only this much we can zoom
 const ZOOM_DISTANCE = 10;
 
-
 interface IProps {
     src: string, // the source of the image being displayed
     name?: string, // the main title ('name') for the image
@@ -62,8 +61,10 @@ interface IProps {
 }
 
 interface IState {
-    rotation: number,
     zoom: number,
+    minZoom: number,
+    maxZoom: number,
+    rotation: number,
     translationX: number,
     translationY: number,
     moving: boolean,
@@ -75,8 +76,10 @@ export default class ImageView extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
         this.state = {
+            zoom: 0,
+            minZoom: MAX_SCALE,
+            maxZoom: MAX_SCALE,
             rotation: 0,
-            zoom: MIN_ZOOM,
             translationX: 0,
             translationY: 0,
             moving: false,
@@ -87,6 +90,8 @@ export default class ImageView extends React.Component<IProps, IState> {
     // XXX: Refs to functional components
     private contextMenuButton = createRef<any>();
     private focusLock = createRef<any>();
+    private imageWrapper = createRef<HTMLDivElement>();
+    private image = createRef<HTMLImageElement>();
 
     private initX = 0;
     private initY = 0;
@@ -99,12 +104,89 @@ export default class ImageView extends React.Component<IProps, IState> {
         // We have to use addEventListener() because the listener
         // needs to be passive in order to work with Chromium
         this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
+        // We want to recalculate zoom whenever the window's size changes
+        window.addEventListener("resize", this.calculateZoom);
+        // After the image loads for the first time we want to calculate the zoom
+        this.image.current.addEventListener("load", this.calculateZoom);
+        // Try to precalculate the zoom from width and height props
+        this.calculateZoom();
     }
 
     componentWillUnmount() {
         this.focusLock.current.removeEventListener('wheel', this.onWheel);
+        window.removeEventListener("resize", this.calculateZoom);
+        this.image.current.removeEventListener("load", this.calculateZoom);
     }
 
+    private calculateZoom = () => {
+        const image = this.image.current;
+        const imageWrapper = this.imageWrapper.current;
+
+        const width = this.props.width || image.naturalWidth;
+        const height = this.props.height || image.naturalHeight;
+
+        const zoomX = imageWrapper.clientWidth / width;
+        const zoomY = imageWrapper.clientHeight / height;
+
+        // If the image is smaller in both dimensions set its the zoom to 1 to
+        // display it in its original size
+        if (zoomX >= 1 && zoomY >= 1) {
+            this.setState({
+                zoom: 1,
+                minZoom: 1,
+                maxZoom: 1,
+            });
+            return;
+        }
+        // We set minZoom to the min of the zoomX and zoomY to avoid overflow in
+        // any direction. We also multiply by MAX_SCALE to get a gap around the
+        // image by default
+        const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
+
+        if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
+        this.setState({
+            minZoom: minZoom,
+            maxZoom: 1,
+        });
+    }
+
+    private zoom(delta: number) {
+        const newZoom = this.state.zoom + delta;
+
+        if (newZoom <= this.state.minZoom) {
+            this.setState({
+                zoom: this.state.minZoom,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        if (newZoom >= this.state.maxZoom) {
+            this.setState({zoom: this.state.maxZoom});
+            return;
+        }
+
+        this.setState({
+            zoom: newZoom,
+        });
+    }
+
+    private onWheel = (ev: WheelEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        const {deltaY} = normalizeWheelEvent(ev);
+        this.zoom(-(deltaY * ZOOM_COEFFICIENT));
+    };
+
+    private onZoomInClick = () => {
+        this.zoom(ZOOM_STEP);
+    };
+
+    private onZoomOutClick = () => {
+        this.zoom(-ZOOM_STEP);
+    };
+
     private onKeyDown = (ev: KeyboardEvent) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
@@ -113,31 +195,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         }
     };
 
-    private onWheel = (ev: WheelEvent) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-
-        const {deltaY} = normalizeWheelEvent(ev);
-        const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT);
-
-        if (newZoom <= MIN_ZOOM) {
-            this.setState({
-                zoom: MIN_ZOOM,
-                translationX: 0,
-                translationY: 0,
-            });
-            return;
-        }
-        if (newZoom >= MAX_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
-            return;
-        }
-
-        this.setState({
-            zoom: newZoom,
-        });
-    };
-
     private onRotateCounterClockwiseClick = () => {
         const cur = this.state.rotation;
         const rotationDegrees = cur - 90;
@@ -150,31 +207,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         this.setState({ rotation: rotationDegrees });
     };
 
-    private onZoomInClick = () => {
-        if (this.state.zoom >= MAX_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
-            return;
-        }
-
-        this.setState({
-            zoom: this.state.zoom + ZOOM_STEP,
-        });
-    };
-
-    private onZoomOutClick = () => {
-        if (this.state.zoom <= MIN_ZOOM) {
-            this.setState({
-                zoom: MIN_ZOOM,
-                translationX: 0,
-                translationY: 0,
-            });
-            return;
-        }
-        this.setState({
-            zoom: this.state.zoom - ZOOM_STEP,
-        });
-    };
-
     private onDownloadClick = () => {
         const a = document.createElement("a");
         a.href = this.props.src;
@@ -217,8 +249,8 @@ export default class ImageView extends React.Component<IProps, IState> {
         if (ev.button !== 0) return;
 
         // Zoom in if we are completely zoomed out
-        if (this.state.zoom === MIN_ZOOM) {
-            this.setState({zoom: MAX_ZOOM});
+        if (this.state.zoom === this.state.minZoom) {
+            this.setState({zoom: this.state.maxZoom});
             return;
         }
 
@@ -251,7 +283,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
         ) {
             this.setState({
-                zoom: MIN_ZOOM,
+                zoom: this.state.minZoom,
                 translationX: 0,
                 translationY: 0,
             });
@@ -286,17 +318,20 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     render() {
         const showEventMeta = !!this.props.mxEvent;
+        const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
 
         let cursor;
         if (this.state.moving) {
             cursor= "grabbing";
-        } else if (this.state.zoom === MIN_ZOOM) {
+        } else if (zoomingDisabled) {
+            cursor = "default";
+        } else if (this.state.zoom === this.state.minZoom) {
             cursor = "zoom-in";
         } else {
             cursor = "zoom-out";
         }
         const rotationDegrees = this.state.rotation + "deg";
-        const zoomPercentage = this.state.zoom/100;
+        const zoom = this.state.zoom;
         const translatePixelsX = this.state.translationX + "px";
         const translatePixelsY = this.state.translationY + "px";
         // The order of the values is important!
@@ -308,7 +343,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             transition: this.state.moving ? null : "transform 200ms ease 0s",
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
-                        scale(${zoomPercentage})
+                        scale(${zoom})
                         rotate(${rotationDegrees})`,
         };
 
@@ -380,6 +415,25 @@ export default class ImageView extends React.Component<IProps, IState> {
             );
         }
 
+        let zoomOutButton;
+        let zoomInButton;
+        if (!zoomingDisabled) {
+            zoomOutButton = (
+                <AccessibleTooltipButton
+                    className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                    title={_t("Zoom out")}
+                    onClick={this.onZoomOutClick}>
+                </AccessibleTooltipButton>
+            );
+            zoomInButton = (
+                <AccessibleTooltipButton
+                    className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                    title={_t("Zoom in")}
+                    onClick={ this.onZoomInClick }>
+                </AccessibleTooltipButton>
+            );
+        }
+
         return (
             <FocusLock
                 returnFocus={true}
@@ -403,16 +457,8 @@ export default class ImageView extends React.Component<IProps, IState> {
                             title={_t("Rotate Left")}
                             onClick={ this.onRotateCounterClockwiseClick }>
                         </AccessibleTooltipButton>
-                        <AccessibleTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                            title={_t("Zoom out")}
-                            onClick={ this.onZoomOutClick }>
-                        </AccessibleTooltipButton>
-                        <AccessibleTooltipButton
-                            className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                            title={_t("Zoom in")}
-                            onClick={ this.onZoomInClick }>
-                        </AccessibleTooltipButton>
+                        {zoomOutButton}
+                        {zoomInButton}
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("Download")}
@@ -427,11 +473,14 @@ export default class ImageView extends React.Component<IProps, IState> {
                         {this.renderContextMenu()}
                     </div>
                 </div>
-                <div className="mx_ImageView_image_wrapper">
+                <div
+                    className="mx_ImageView_image_wrapper"
+                    ref={this.imageWrapper}>
                     <img
                         src={this.props.src}
                         title={this.props.name}
                         style={style}
+                        ref={this.image}
                         className="mx_ImageView_image"
                         draggable={true}
                         onMouseDown={this.onStartMoving}
diff --git a/src/components/views/elements/LabelledToggleSwitch.js b/src/components/views/elements/LabelledToggleSwitch.js
index e6378f0e6a..ef60eeed7b 100644
--- a/src/components/views/elements/LabelledToggleSwitch.js
+++ b/src/components/views/elements/LabelledToggleSwitch.js
@@ -46,8 +46,12 @@ export default class LabelledToggleSwitch extends React.Component {
         // This is a minimal version of a SettingsFlag
 
         let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
-        let secondPart = <ToggleSwitch checked={this.props.value} disabled={this.props.disabled}
-                                         onChange={this.props.onChange} aria-label={this.props.label} />;
+        let secondPart = <ToggleSwitch
+            checked={this.props.value}
+            disabled={this.props.disabled}
+            onChange={this.props.onChange}
+            aria-label={this.props.label}
+        />;
 
         if (this.props.toggleInFront) {
             const temp = firstPart;
diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js
index 2e961be700..b8734c5afb 100644
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.js
@@ -60,10 +60,10 @@ export default class LanguageDropdown extends React.Component {
             // doesn't know this, therefore we do this.
             const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
             if (language) {
-              this.props.onOptionChange(language);
+                this.props.onOptionChange(language);
             } else {
-              const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
-              this.props.onOptionChange(language);
+                const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
+                this.props.onOptionChange(language);
             }
         }
     }
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index a8e16813e6..ace41db39d 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -225,19 +225,19 @@ class Pill extends React.Component {
             }
                 break;
             case Pill.TYPE_USER_MENTION: {
-                    // If this user is not a member of this room, default to the empty member
-                    const member = this.state.member;
-                    if (member) {
-                        userId = member.userId;
-                        member.rawDisplayName = member.rawDisplayName || '';
-                        linkText = member.rawDisplayName;
-                        if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
-                        }
-                        pillClass = 'mx_UserPill';
-                        href = null;
-                        onClick = this.onUserPillClicked;
+                // If this user is not a member of this room, default to the empty member
+                const member = this.state.member;
+                if (member) {
+                    userId = member.userId;
+                    member.rawDisplayName = member.rawDisplayName || '';
+                    linkText = member.rawDisplayName;
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
                     }
+                    pillClass = 'mx_UserPill';
+                    href = null;
+                    onClick = this.onUserPillClicked;
+                }
             }
                 break;
             case Pill.TYPE_ROOM_MENTION: {
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index 622bed9890..a7a65425a3 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -135,9 +135,13 @@ export default class PowerSelector extends React.Component {
         if (this.state.custom) {
             picker = (
                 <Field type="number"
-                       label={label} max={this.props.maxValue}
-                       onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} onChange={this.onCustomChange}
-                       value={String(this.state.customValue)} disabled={this.props.disabled} />
+                    label={label} max={this.props.maxValue}
+                    onBlur={this.onCustomBlur}
+                    onKeyDown={this.onCustomKeyDown}
+                    onChange={this.onCustomChange}
+                    value={String(this.state.customValue)}
+                    disabled={this.props.disabled}
+                />
             );
         } else {
             // Each level must have a definition in this.state.levelRoleMap
@@ -154,8 +158,9 @@ export default class PowerSelector extends React.Component {
 
             picker = (
                 <Field element="select"
-                       label={label} onChange={this.onSelectChange}
-                       value={String(this.state.selectValue)} disabled={this.props.disabled}>
+                    label={label} onChange={this.onSelectChange}
+                    value={String(this.state.selectValue)} disabled={this.props.disabled}
+                >
                     {options}
                 </Field>
             );
diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.js
index 1db154c2cd..813dd8b5cc 100644
--- a/src/components/views/elements/RoomAliasField.js
+++ b/src/components/views/elements/RoomAliasField.js
@@ -46,17 +46,18 @@ export default class RoomAliasField extends React.PureComponent {
         const domain = (<span title={aliasPostfix}>{aliasPostfix}</span>);
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
-                <Field
-                    label={_t("Room address")}
-                    className="mx_RoomAliasField"
-                    prefixComponent={poundSign}
-                    postfixComponent={domain}
-                    ref={ref => this._fieldRef = ref}
-                    onValidate={this._onValidate}
-                    placeholder={_t("e.g. my-room")}
-                    onChange={this._onChange}
-                    value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
-                    maxLength={maxlength} />
+            <Field
+                label={_t("Room address")}
+                className="mx_RoomAliasField"
+                prefixComponent={poundSign}
+                postfixComponent={domain}
+                ref={ref => this._fieldRef = ref}
+                onValidate={this._onValidate}
+                placeholder={_t("e.g. my-room")}
+                onChange={this._onChange}
+                value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
+                maxLength={maxlength}
+            />
         );
     }
 
diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx
index 4551a49deb..9f06e2618c 100644
--- a/src/components/views/elements/ServerPicker.tsx
+++ b/src/components/views/elements/ServerPicker.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -67,7 +67,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
         </AccessibleButton>;
     }
 
-    let serverName = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
+    let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
     if (serverConfig.hsNameIsDifferent) {
         serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
             {serverConfig.hsName}
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 690deeedcd..670f3e9bb9 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -59,13 +59,13 @@ class TintableSvg extends React.Component {
     render() {
         return (
             <object className={"mx_TintableSvg " + (this.props.className ? this.props.className : "")}
-                    type="image/svg+xml"
-                    data={this.props.src}
-                    width={this.props.width}
-                    height={this.props.height}
-                    onLoad={this.onLoad}
-                    tabIndex="-1"
-                />
+                type="image/svg+xml"
+                data={this.props.src}
+                width={this.props.width}
+                height={this.props.height}
+                onLoad={this.onLoad}
+                tabIndex="-1"
+            />
         );
     }
 }
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index d5b3f9aec7..fec90ce8e7 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -178,9 +178,15 @@ export default class GroupMemberList extends React.Component {
         }
 
         const inputBox = (
-            <input className="mx_GroupMemberList_query mx_textinput" id="mx_GroupMemberList_query" type="text"
-                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                    placeholder={_t('Filter community members')} autoComplete="off" />
+            <input
+                className="mx_GroupMemberList_query mx_textinput"
+                id="mx_GroupMemberList_query"
+                type="text"
+                onChange={this.onSearchQueryChanged}
+                value={this.state.searchQuery}
+                placeholder={_t('Filter community members')}
+                autoComplete="off"
+            />
         );
 
         const joined = this.state.members ? <div className="mx_MemberList_joined">
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index 5399125d9f..c06d827550 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -67,11 +67,11 @@ export default class GroupPublicityToggle extends React.Component {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         return <div className="mx_GroupPublicity_toggle">
             <GroupTile groupId={this.props.groupId} showDescription={false}
-                       avatarHeight={40} draggable={false}
+                avatarHeight={40} draggable={false}
             />
             <ToggleSwitch checked={this.state.isGroupPublicised}
-                          disabled={!this.state.ready || this.state.busy}
-                          onChange={this._onPublicityToggle} />
+                disabled={!this.state.ready || this.state.busy}
+                onChange={this._onPublicityToggle} />
         </div>;
     }
 }
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index f8a90f9222..2921ac79ee 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -141,9 +141,14 @@ export default class GroupRoomList extends React.Component {
             );
         }
         const inputBox = (
-            <input className="mx_GroupRoomList_query mx_textinput" id="mx_GroupRoomList_query" type="text"
-                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                    placeholder={_t('Filter community rooms')} autoComplete="off" />
+            <input
+                className="mx_GroupRoomList_query mx_textinput" id="mx_GroupRoomList_query"
+                type="text"
+                onChange={this.onSearchQueryChanged}
+                value={this.state.searchQuery}
+                placeholder={_t('Filter community rooms')}
+                autoComplete="off"
+            />
         );
 
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
@@ -152,7 +157,7 @@ export default class GroupRoomList extends React.Component {
                 { inviteButton }
                 <AutoHideScrollbar className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
-                            createOverflowElement={this._createOverflowTile}>
+                        createOverflowElement={this._createOverflowTile}>
                         { this.makeGroupRoomTiles(this.state.searchQuery) }
                     </TruncatedList>
                 </AutoHideScrollbar>
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index e2eda1e12a..dc4e0187d3 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -160,7 +160,6 @@ export default class EditHistoryMessage extends React.PureComponent {
             "mx_EventTile": true,
             // Note: we keep the `sending` state class for tests, not for our styles
             "mx_EventTile_sending": isSending,
-            "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
         });
         return (
             <li>
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 5af2063c84..6505b1d66a 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -125,9 +125,9 @@ export default class MImageBody extends React.Component {
     _isGif() {
         const content = this.props.mxEvent.getContent();
         return (
-          content &&
-          content.info &&
-          content.info.mimetype === "image/gif"
+            content &&
+            content.info &&
+            content.info.mimetype === "image/gif"
         );
     }
 
@@ -185,9 +185,8 @@ export default class MImageBody extends React.Component {
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
         // thumbnail resolution will be unnecessarily reduced.
         // custom timeline widths seems preferable.
-        const pixelRatio = window.devicePixelRatio;
-        const thumbWidth = Math.round(800 * pixelRatio);
-        const thumbHeight = Math.round(600 * pixelRatio);
+        const thumbWidth = 800;
+        const thumbHeight = 600;
 
         const content = this.props.mxEvent.getContent();
         const media = mediaFromContent(content);
@@ -218,7 +217,7 @@ export default class MImageBody extends React.Component {
             const info = content.info;
             if (
                 this._isGif() ||
-                pixelRatio === 1.0 ||
+                window.devicePixelRatio === 1.0 ||
                 (!info || !info.w || !info.h || !info.size)
             ) {
                 return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
@@ -347,9 +346,9 @@ export default class MImageBody extends React.Component {
                 } else {
                     imageElement = (
                         <img style={{display: 'none'}} src={thumbUrl} ref={this._image}
-                             alt={content.body}
-                             onError={this.onImageError}
-                             onLoad={this.onImageLoad}
+                            alt={content.body}
+                            onError={this.onImageError}
+                            onLoad={this.onImageLoad}
                         />
                     );
                 }
@@ -385,12 +384,12 @@ export default class MImageBody extends React.Component {
             // mx_MImageBody_thumbnail resizes img to exactly container size
             img = (
                 <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref={this._image}
-                     style={{ maxWidth: maxWidth + "px" }}
-                     alt={content.body}
-                     onError={this.onImageError}
-                     onLoad={this.onImageLoad}
-                     onMouseEnter={this.onImageEnter}
-                     onMouseLeave={this.onImageLeave} />
+                    style={{ maxWidth: maxWidth + "px" }}
+                    alt={content.body}
+                    onError={this.onImageError}
+                    onLoad={this.onImageLoad}
+                    onMouseEnter={this.onImageEnter}
+                    onMouseLeave={this.onImageLeave} />
             );
         }
 
@@ -468,9 +467,9 @@ export default class MImageBody extends React.Component {
         const contentUrl = this._getContentUrl();
         let thumbUrl;
         if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
-          thumbUrl = contentUrl;
+            thumbUrl = contentUrl;
         } else {
-          thumbUrl = this._getThumbUrl();
+            thumbUrl = this._getThumbUrl();
         }
 
         const thumbnail = this._messageContent(contentUrl, thumbUrl, content);
diff --git a/src/components/views/messages/MKeyVerificationConclusion.js b/src/components/views/messages/MKeyVerificationConclusion.js
index 75d20131c0..c9489711aa 100644
--- a/src/components/views/messages/MKeyVerificationConclusion.js
+++ b/src/components/views/messages/MKeyVerificationConclusion.js
@@ -82,9 +82,7 @@ export default class MKeyVerificationConclusion extends React.Component {
         }
 
         // User isn't actually verified
-        if (!MatrixClientPeg.get()
-                            .checkUserTrust(request.otherUserId)
-                            .isCrossSigningVerified()) {
+        if (!MatrixClientPeg.get().checkUserTrust(request.otherUserId).isCrossSigningVerified()) {
             return false;
         }
 
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
new file mode 100644
index 0000000000..4a2a83465d
--- /dev/null
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -0,0 +1,106 @@
+/*
+Copyright 2021 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 React from "react";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Playback} from "../../../voice/Playback";
+import MFileBody from "./MFileBody";
+import InlineSpinner from '../elements/InlineSpinner';
+import {_t} from "../../../languageHandler";
+import {mediaFromContent} from "../../../customisations/Media";
+import {decryptFile} from "../../../utils/DecryptFile";
+import RecordingPlayback from "../voice_messages/RecordingPlayback";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    error?: Error;
+    playback?: Playback;
+    decryptedBlob?: Blob;
+}
+
+@replaceableComponent("views.messages.MVoiceMessageBody")
+export default class MVoiceMessageBody extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {};
+    }
+
+    public async componentDidMount() {
+        let buffer: ArrayBuffer;
+        const content = this.props.mxEvent.getContent();
+        const media = mediaFromContent(content);
+        if (media.isEncrypted) {
+            try {
+                const blob = await decryptFile(content.file);
+                buffer = await blob.arrayBuffer();
+                this.setState({decryptedBlob: blob});
+            } catch (e) {
+                this.setState({error: e});
+                console.warn("Unable to decrypt voice message", e);
+                return; // stop processing the audio file
+            }
+        } else {
+            try {
+                buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
+            } catch (e) {
+                this.setState({error: e});
+                console.warn("Unable to download voice message", e);
+                return; // stop processing the audio file
+            }
+        }
+
+        const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024);
+
+        // We should have a buffer to work with now: let's set it up
+        const playback = new Playback(buffer, waveform);
+        this.setState({playback});
+        // Note: the RecordingPlayback component will handle preparing the Playback class for us.
+    }
+
+    public render() {
+        if (this.state.error) {
+            // TODO: @@TR: Verify error state
+            return (
+                <span className="mx_MVoiceMessageBody">
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    { _t("Error processing voice message") }
+                </span>
+            );
+        }
+
+        if (!this.state.playback) {
+            // TODO: @@TR: Verify loading/decrypting state
+            return (
+                <span className="mx_MVoiceMessageBody">
+                    <InlineSpinner />
+                </span>
+            );
+        }
+
+        // At this point we should have a playable state
+        return (
+            <span className="mx_MVoiceMessageBody">
+                <RecordingPlayback playback={this.state.playback} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+            </span>
+        )
+    }
+}
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
new file mode 100644
index 0000000000..0cebcf3440
--- /dev/null
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -0,0 +1,39 @@
+/*
+Copyright 2021 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 React from "react";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import MAudioBody from "./MAudioBody";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
+import MVoiceMessageBody from "./MVoiceMessageBody";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+@replaceableComponent("views.messages.MVoiceOrAudioBody")
+export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
+    public render() {
+        const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice'];
+        const voiceMessagesEnabled = SettingsStore.getValue("feature_voice_messages");
+        if (isVoiceMessage && voiceMessagesEnabled) {
+            return <MVoiceMessageBody {...this.props} />;
+        } else {
+            return <MAudioBody {...this.props} />;
+        }
+    }
+}
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 5a6e7d87b7..b2f7f8a692 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -29,6 +29,8 @@ import RoomContext from "../../../contexts/RoomContext";
 import Toolbar from "../../../accessibility/Toolbar";
 import {RovingAccessibleTooltipButton, useRovingTabIndex} from "../../../accessibility/RovingTabIndex";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {canCancel} from "../context_menus/MessageContextMenu";
+import Resend from "../../../Resend";
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -169,45 +171,118 @@ export default class MessageActionBar extends React.PureComponent {
         });
     };
 
-    render() {
-        let reactButton;
-        let replyButton;
-        let editButton;
+    /**
+     * Runs a given fn on the set of possible events to test. The first event
+     * that passes the checkFn will have fn executed on it. Both functions take
+     * a MatrixEvent object. If no particular conditions are needed, checkFn can
+     * be null/undefined. If no functions pass the checkFn, no action will be
+     * taken.
+     * @param {Function} fn The execution function.
+     * @param {Function} checkFn The test function.
+     */
+    runActionOnFailedEv(fn, checkFn) {
+        if (!checkFn) checkFn = () => true;
 
-        if (isContentActionable(this.props.mxEvent)) {
-            if (this.context.canReact) {
-                reactButton = (
-                    <ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} onFocusChange={this.onFocusChange} />
-                );
-            }
-            if (this.context.canReply) {
-                replyButton = <RovingAccessibleTooltipButton
-                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
-                    title={_t("Reply")}
-                    onClick={this.onReplyClick}
-                />;
+        const mxEvent = this.props.mxEvent;
+        const editEvent = mxEvent.replacingEvent();
+        const redactEvent = mxEvent.localRedactionEvent();
+        const tryOrder = [redactEvent, editEvent, mxEvent];
+        for (const ev of tryOrder) {
+            if (ev && checkFn(ev)) {
+                fn(ev);
+                break;
             }
         }
+    }
+
+    onResendClick = (ev) => {
+        this.runActionOnFailedEv((tarEv) => Resend.resend(tarEv));
+    };
+
+    onCancelClick = (ev) => {
+        this.runActionOnFailedEv(
+            (tarEv) => Resend.removeFromQueue(tarEv),
+            (testEv) => canCancel(testEv.status),
+        );
+    };
+
+    render() {
+        const toolbarOpts = [];
         if (canEditContent(this.props.mxEvent)) {
-            editButton = <RovingAccessibleTooltipButton
+            toolbarOpts.push(<RovingAccessibleTooltipButton
                 className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
                 title={_t("Edit")}
                 onClick={this.onEditClick}
-            />;
+                key="edit"
+            />);
         }
 
-        // aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
-        return <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
-            {reactButton}
-            {replyButton}
-            {editButton}
-            <OptionsButton
+        const cancelSendingButton = <RovingAccessibleTooltipButton
+            className="mx_MessageActionBar_maskButton mx_MessageActionBar_cancelButton"
+            title={_t("Delete")}
+            onClick={this.onCancelClick}
+            key="cancel"
+        />;
+
+        // We show a different toolbar for failed events, so detect that first.
+        const mxEvent = this.props.mxEvent;
+        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
+        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
+        const allowCancel = canCancel(mxEvent.status) || canCancel(editStatus) || canCancel(redactStatus);
+        const isFailed = [mxEvent.status, editStatus, redactStatus].includes("not_sent");
+        if (allowCancel && isFailed) {
+            // The resend button needs to appear ahead of the edit button, so insert to the
+            // start of the opts
+            toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
+                className="mx_MessageActionBar_maskButton mx_MessageActionBar_resendButton"
+                title={_t("Retry")}
+                onClick={this.onResendClick}
+                key="resend"
+            />);
+
+            // The delete button should appear last, so we can just drop it at the end
+            toolbarOpts.push(cancelSendingButton);
+        } else {
+            if (isContentActionable(this.props.mxEvent)) {
+                // Like the resend button, the react and reply buttons need to appear before the edit.
+                // The only catch is we do the reply button first so that we can make sure the react
+                // button is the very first button without having to do length checks for `splice()`.
+                if (this.context.canReply) {
+                    toolbarOpts.splice(0, 0, <RovingAccessibleTooltipButton
+                        className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
+                        title={_t("Reply")}
+                        onClick={this.onReplyClick}
+                        key="reply"
+                    />);
+                }
+                if (this.context.canReact) {
+                    toolbarOpts.splice(0, 0, <ReactButton
+                        mxEvent={this.props.mxEvent}
+                        reactions={this.props.reactions}
+                        onFocusChange={this.onFocusChange}
+                        key="react"
+                    />);
+                }
+            }
+
+            if (allowCancel) {
+                toolbarOpts.push(cancelSendingButton);
+            }
+
+            // The menu button should be last, so dump it there.
+            toolbarOpts.push(<OptionsButton
                 mxEvent={this.props.mxEvent}
                 getReplyThread={this.props.getReplyThread}
                 getTile={this.props.getTile}
                 permalinkCreator={this.props.permalinkCreator}
                 onFocusChange={this.onFocusChange}
-            />
+                key="menu"
+            />);
+        }
+
+        // aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
+        return <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
+            {toolbarOpts}
         </Toolbar>;
     }
 }
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 60f7631c8e..78e0dc422d 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -72,12 +72,8 @@ export default class MessageEvent extends React.Component {
             'm.emote': sdk.getComponent('messages.TextualBody'),
             'm.image': sdk.getComponent('messages.MImageBody'),
             'm.file': sdk.getComponent('messages.MFileBody'),
-            'm.audio': sdk.getComponent('messages.MAudioBody'),
+            'm.audio': sdk.getComponent('messages.MVoiceOrAudioBody'),
             'm.video': sdk.getComponent('messages.MVideoBody'),
-
-            // TODO: @@ TravisR: Use labs flag determination.
-            // MSC: https://github.com/matrix-org/matrix-doc/pull/2516
-            'org.matrix.msc2516.voice': sdk.getComponent('messages.MAudioBody'),
         };
         const evTypes = {
             'm.sticker': sdk.getComponent('messages.MStickerBody'),
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 06421c02a2..b37a949e57 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -129,12 +129,13 @@ export default class ReactionsRowButton extends React.PureComponent {
                 },
             );
         }
-
+        const isPeeking = room.getMyMembership() !== "join";
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return <AccessibleButton
             className={classes}
             aria-label={label}
             onClick={this.onClick}
+            disabled={isPeeking}
             onMouseOver={this.onMouseOver}
             onMouseLeave={this.onMouseLeave}
         >
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 353f40b6a9..b963e741a1 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -521,11 +521,12 @@ export default class TextualBody extends React.Component {
             const LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
             widgets = this.state.links.map((link)=>{
                 return <LinkPreviewWidget
-                            key={link}
-                            link={link}
-                            mxEvent={this.props.mxEvent}
-                            onCancelClick={this.onCancelClick}
-                            onHeightChanged={this.props.onHeightChanged} />;
+                    key={link}
+                    link={link}
+                    mxEvent={this.props.mxEvent}
+                    onCancelClick={this.onCancelClick}
+                    onHeightChanged={this.props.onHeightChanged}
+                />;
             });
         }
 
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index be152d91bd..2fa5fd89d3 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -440,7 +440,7 @@ const UserOptionsSection: React.FC<{
     );
 };
 
-const warnSelfDemote = async (isSpace) => {
+const warnSelfDemote = async (isSpace: boolean) => {
     const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
         title: _t("Demote yourself?"),
         description:
@@ -727,7 +727,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({member, room, powerLevels,
         // if muting self, warn as it may be irreversible
         if (target === cli.getUserId()) {
             try {
-                if (!(await warnSelfDemote(room?.isSpaceRoom()))) return;
+                if (!(await warnSelfDemote(SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
                 return;
@@ -816,7 +816,7 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     if (canAffectUser && me.powerLevel >= kickPowerLevel) {
         kickButton = <RoomKickButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
     }
-    if (me.powerLevel >= redactPowerLevel && !room.isSpaceRoom()) {
+    if (me.powerLevel >= redactPowerLevel && (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom())) {
         redactButton = (
             <RedactMessagesButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />
         );
@@ -1095,7 +1095,7 @@ const PowerLevelEditor: React.FC<{
         } else if (myUserId === target) {
             // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
             try {
-                if (!(await warnSelfDemote(room?.isSpaceRoom()))) return;
+                if (!(await warnSelfDemote(SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()))) return;
             } catch (e) {
                 console.error("Failed to warn about self demotion: ", e);
             }
@@ -1325,10 +1325,10 @@ const BasicUserInfo: React.FC<{
     if (!isRoomEncrypted) {
         if (!cryptoEnabled) {
             text = _t("This client does not support end-to-end encryption.");
-        } else if (room && !room.isSpaceRoom()) {
+        } else if (room && (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom())) {
             text = _t("Messages in this room are not end-to-end encrypted.");
         }
-    } else if (!room.isSpaceRoom()) {
+    } else if (!SettingsStore.getValue("feature_spaces") || !room.isSpaceRoom()) {
         text = _t("Messages in this room are end-to-end encrypted.");
     }
 
@@ -1405,7 +1405,7 @@ const BasicUserInfo: React.FC<{
             canInvite={roomPermissions.canInvite}
             isIgnored={isIgnored}
             member={member}
-            isSpace={room?.isSpaceRoom()}
+            isSpace={SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()}
         />
 
         { adminToolsContainer }
@@ -1567,7 +1567,7 @@ const UserInfo: React.FC<Props> = ({
         previousPhase = RightPanelPhases.RoomMemberInfo;
         refireParams = {member: member};
     } else if (room) {
-        previousPhase = previousPhase = room.isSpaceRoom()
+        previousPhase = previousPhase = SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()
             ? RightPanelPhases.SpaceMemberList
             : RightPanelPhases.RoomMemberList;
     }
@@ -1616,7 +1616,7 @@ const UserInfo: React.FC<Props> = ({
     }
 
     let scopeHeader;
-    if (room?.isSpaceRoom()) {
+    if (SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()) {
         scopeHeader = <div className="mx_RightPanel_scopeHeader">
             <RoomAvatar room={room} height={32} width={32} />
             <RoomName room={room} />
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index ee8232ebd7..80e0099ab3 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -310,9 +310,14 @@ export default class AliasSettings extends React.Component {
         let found = false;
         const canonicalValue = this.state.canonicalAlias || "";
         const canonicalAliasSection = (
-            <Field onChange={this.onCanonicalAliasChange} value={canonicalValue}
-                   disabled={this.state.updatingCanonicalAlias || !this.props.canSetCanonicalAlias}
-                   element='select' id='canonicalAlias' label={_t('Main address')}>
+            <Field
+                onChange={this.onCanonicalAliasChange}
+                value={canonicalValue}
+                disabled={this.state.updatingCanonicalAlias || !this.props.canSetCanonicalAlias}
+                element='select'
+                id='canonicalAlias'
+                label={_t('Main address')}
+            >
                 <option value="" key="unset">{ _t('not specified') }</option>
                 {
                     this._getAliases().map((alias, i) => {
@@ -326,9 +331,9 @@ export default class AliasSettings extends React.Component {
                 }
                 {
                     found || !this.state.canonicalAlias ? '' :
-                    <option value={ this.state.canonicalAlias } key='arbitrary'>
-                        { this.state.canonicalAlias }
-                    </option>
+                        <option value={ this.state.canonicalAlias } key='arbitrary'>
+                            { this.state.canonicalAlias }
+                        </option>
                 }
             </Field>
         );
diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js
index 3dbe2b2b7f..b6885887b1 100644
--- a/src/components/views/room_settings/RoomProfileSettings.js
+++ b/src/components/views/room_settings/RoomProfileSettings.js
@@ -205,16 +205,34 @@ export default class RoomProfileSettings extends React.Component {
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
-                <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
-                       onChange={this._onAvatarChanged} accept="image/*" />
+                <input
+                    type="file"
+                    ref={this._avatarUpload}
+                    className="mx_ProfileSettings_avatarUpload"
+                    onChange={this._onAvatarChanged}
+                    accept="image/*"
+                />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
-                        <Field label={_t("Room Name")}
-                               type="text" value={this.state.displayName} autoComplete="off"
-                               onChange={this._onDisplayNameChanged} disabled={!this.state.canSetName} />
-                        <Field className="mx_ProfileSettings_controls_topic" id="profileTopic" label={_t("Room Topic")} disabled={!this.state.canSetTopic}
-                               type="text" value={this.state.topic} autoComplete="off"
-                               onChange={this._onTopicChanged} element="textarea" />
+                        <Field
+                            label={_t("Room Name")}
+                            type="text"
+                            value={this.state.displayName}
+                            autoComplete="off"
+                            onChange={this._onDisplayNameChanged}
+                            disabled={!this.state.canSetName}
+                        />
+                        <Field
+                            className="mx_ProfileSettings_controls_topic"
+                            id="profileTopic"
+                            label={_t("Room Topic")}
+                            disabled={!this.state.canSetTopic}
+                            type="text"
+                            value={this.state.topic}
+                            autoComplete="off"
+                            onChange={this._onTopicChanged}
+                            element="textarea"
+                        />
                     </div>
                     <AvatarSetting
                         avatarUrl={this.state.avatarUrl}
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index 7b04e296e5..f797ffeb96 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -68,10 +68,12 @@ export default class UrlPreviewSettings extends React.Component {
             if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
                 previewsForRoom = (
                     <label>
-                        <SettingsFlag name="urlPreviewsEnabled"
-                                      level={SettingLevel.ROOM}
-                                      roomId={roomId}
-                                      isExplicit={true} />
+                        <SettingsFlag
+                            name="urlPreviewsEnabled"
+                            level={SettingLevel.ROOM}
+                            roomId={roomId}
+                            isExplicit={true}
+                        />
                     </label>
                 );
             } else {
@@ -91,8 +93,8 @@ export default class UrlPreviewSettings extends React.Component {
 
         const previewsForRoomAccount = ( // in an e2ee room we use a special key to enforce per-room opt-in
             <SettingsFlag name={isEncrypted ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled'}
-                          level={SettingLevel.ROOM_ACCOUNT}
-                          roomId={roomId} />
+                level={SettingLevel.ROOM_ACCOUNT}
+                roomId={roomId} />
         );
 
         return (
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 75b03739b9..a92d87643c 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -176,8 +176,11 @@ class EntityTile extends React.Component {
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
             <div ref={(c) => this.container = c} >
-                <AccessibleButton className={classNames(mainClassNames)} title={this.props.title}
-                                  onClick={this.props.onClick}>
+                <AccessibleButton
+                    className={classNames(mainClassNames)}
+                    title={this.props.title}
+                    onClick={this.props.onClick}
+                >
                     <div className="mx_EntityTile_avatar">
                         { av }
                         { e2eIcon }
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.tsx
similarity index 79%
rename from src/components/views/rooms/EventTile.js
rename to src/components/views/rooms/EventTile.tsx
index 9e8f66705c..4e2183aff1 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1,6 +1,6 @@
 /*
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 - 2021 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.
@@ -15,11 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from "classnames";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {EventStatus} from 'matrix-js-sdk/src/models/event';
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Relations } from "matrix-js-sdk/src/models/relations";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import ReplyThread from "../elements/ReplyThread";
 import { _t } from '../../../languageHandler';
@@ -27,7 +29,7 @@ import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout, LayoutPropType} from "../../../settings/Layout";
+import {Layout} from "../../../settings/Layout";
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
@@ -40,6 +42,10 @@ import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStor
 import {objectHasDiff} from "../../../utils/objects";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import Tooltip from "../elements/Tooltip";
+import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
+import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import NotificationBadge from "./NotificationBadge";
 
 const eventTileTypes = {
     [EventType.RoomMessage]: 'messages.MessageEvent',
@@ -169,101 +175,130 @@ const MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
+interface IReadReceiptProps {
+    userId: string;
+    roomMember: RoomMember;
+    ts: number;
+}
+
+interface IProps {
+    // the MatrixEvent to show
+    mxEvent: MatrixEvent;
+
+    // true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
+    // might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
+    // references the same this.props.mxEvent.
+    isRedacted?: boolean;
+
+    // true if this is a continuation of the previous event (which has the
+    // effect of not showing another avatar/displayname
+    continuation?: boolean;
+
+    // true if this is the last event in the timeline (which has the effect
+    // of always showing the timestamp)
+    last?: boolean;
+
+    // true if the event is the last event in a section (adds a css class for
+    // targeting)
+    lastInSection?: boolean;
+
+    // True if the event is the last successful (sent) event.
+    lastSuccessful?: boolean;
+
+    // true if this is search context (which has the effect of greying out
+    // the text
+    contextual?: boolean;
+
+    // a list of words to highlight, ordered by longest first
+    highlights?: string[];
+
+    // link URL for the highlights
+    highlightLink?: string;
+
+    // should show URL previews for this event
+    showUrlPreview?: boolean;
+
+    // is this the focused event
+    isSelectedEvent?: boolean;
+
+    // callback called when dynamic content in events are loaded
+    onHeightChanged?: () => void;
+
+    // a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
+    readReceipts?: IReadReceiptProps[];
+
+    // opaque readreceipt info for each userId; used by ReadReceiptMarker
+    // to manage its animations. Should be an empty object when the room
+    // first loads
+    readReceiptMap?: any;
+
+    // A function which is used to check if the parent panel is being
+    // unmounted, to avoid unnecessary work. Should return true if we
+    // are being unmounted.
+    checkUnmounting?: () => boolean;
+
+    // the status of this event - ie, mxEvent.status. Denormalised to here so
+    // that we can tell when it changes.
+    eventSendStatus?: string;
+
+    // the shape of the tile. by default, the layout is intended for the
+    // normal room timeline.  alternative values are: "file_list", "file_grid"
+    // and "notif".  This could be done by CSS, but it'd be horribly inefficient.
+    // It could also be done by subclassing EventTile, but that'd be quite
+    // boiilerplatey.  So just make the necessary render decisions conditional
+    // for now.
+    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+
+    // show twelve hour timestamps
+    isTwelveHour?: boolean;
+
+    // helper function to access relations for this event
+    getRelationsForEvent?: (eventId: string, relationType: string, eventType: string) => Relations;
+
+    // whether to show reactions for this event
+    showReactions?: boolean;
+
+    // which layout to use
+    layout: Layout;
+
+    // whether or not to show flair at all
+    enableFlair?: boolean;
+
+    // whether or not to show read receipts
+    showReadReceipts?: boolean;
+
+    // Used while editing, to pass the event, and to preserve editor state
+    // from one editor instance to another when remounting the editor
+    // upon receiving the remote echo for an unsent event.
+    editState?: EditorStateTransfer;
+
+    // Event ID of the event replacing the content of this event, if any
+    replacingEventId?: string;
+
+    // Helper to build permalinks for the room
+    permalinkCreator?: RoomPermalinkCreator;
+}
+
+interface IState {
+    // Whether the action bar is focused.
+    actionBarFocused: boolean;
+    // Whether all read receipts are being displayed. If not, only display
+    // a truncation of them.
+    allReadAvatars: boolean;
+    // Whether the event's sender has been verified.
+    verified: string;
+    // Whether onRequestKeysClick has been called since mounting.
+    previouslyRequestedKeys: boolean;
+    // The Relations model from the JS SDK for reactions to `mxEvent`
+    reactions: Relations;
+}
+
 @replaceableComponent("views.rooms.EventTile")
-export default class EventTile extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-
-        /* true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
-         * might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
-         * references the same this.props.mxEvent.
-         */
-        isRedacted: PropTypes.bool,
-
-        /* true if this is a continuation of the previous event (which has the
-         * effect of not showing another avatar/displayname
-         */
-        continuation: PropTypes.bool,
-
-        /* true if this is the last event in the timeline (which has the effect
-         * of always showing the timestamp)
-         */
-        last: PropTypes.bool,
-
-        // true if the event is the last event in a section (adds a css class for
-        // targeting)
-        lastInSection: PropTypes.bool,
-
-        // True if the event is the last successful (sent) event.
-        isLastSuccessful: PropTypes.bool,
-
-        /* true if this is search context (which has the effect of greying out
-         * the text
-         */
-        contextual: PropTypes.bool,
-
-        /* a list of words to highlight, ordered by longest first */
-        highlights: PropTypes.array,
-
-        /* link URL for the highlights */
-        highlightLink: PropTypes.string,
-
-        /* should show URL previews for this event */
-        showUrlPreview: PropTypes.bool,
-
-        /* is this the focused event */
-        isSelectedEvent: PropTypes.bool,
-
-        /* callback called when dynamic content in events are loaded */
-        onHeightChanged: PropTypes.func,
-
-        /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
-        readReceipts: PropTypes.arrayOf(PropTypes.object),
-
-        /* opaque readreceipt info for each userId; used by ReadReceiptMarker
-         * to manage its animations. Should be an empty object when the room
-         * first loads
-         */
-        readReceiptMap: PropTypes.object,
-
-        /* A function which is used to check if the parent panel is being
-         * unmounted, to avoid unnecessary work. Should return true if we
-         * are being unmounted.
-         */
-        checkUnmounting: PropTypes.func,
-
-        /* the status of this event - ie, mxEvent.status. Denormalised to here so
-         * that we can tell when it changes. */
-        eventSendStatus: PropTypes.string,
-
-        /* the shape of the tile. by default, the layout is intended for the
-         * normal room timeline.  alternative values are: "file_list", "file_grid"
-         * and "notif".  This could be done by CSS, but it'd be horribly inefficient.
-         * It could also be done by subclassing EventTile, but that'd be quite
-         * boiilerplatey.  So just make the necessary render decisions conditional
-         * for now.
-         */
-        tileShape: PropTypes.string,
-
-        // show twelve hour timestamps
-        isTwelveHour: PropTypes.bool,
-
-        // helper function to access relations for this event
-        getRelationsForEvent: PropTypes.func,
-
-        // whether to show reactions for this event
-        showReactions: PropTypes.bool,
-
-        // which layout to use
-        layout: LayoutPropType,
-
-        // whether or not to show flair at all
-        enableFlair: PropTypes.bool,
-
-        // whether or not to show read receipts
-        showReadReceipts: PropTypes.bool,
-    };
+export default class EventTile extends React.Component<IProps, IState> {
+    private suppressReadReceiptAnimation: boolean;
+    private isListeningForReceipts: boolean;
+    private tile = React.createRef();
+    private replyThread = React.createRef();
 
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
@@ -290,26 +325,22 @@ export default class EventTile extends React.Component {
         };
 
         // don't do RR animations until we are mounted
-        this._suppressReadReceiptAnimation = true;
-
-        this._tile = createRef();
-        this._replyThread = createRef();
+        this.suppressReadReceiptAnimation = true;
 
         // Throughout the component we manage a read receipt listener to see if our tile still
         // qualifies for a "sent" or "sending" state (based on their relevant conditions). We
         // don't want to over-subscribe to the read receipt events being fired, so we use a flag
         // to determine if we've already subscribed and use a combination of other flags to find
         // out if we should even be subscribed at all.
-        this._isListeningForReceipts = false;
+        this.isListeningForReceipts = false;
     }
 
     /**
      * When true, the tile qualifies for some sort of special read receipt. This could be a 'sending'
      * or 'sent' receipt, for example.
      * @returns {boolean}
-     * @private
      */
-    get _isEligibleForSpecialReceipt() {
+    private get isEligibleForSpecialReceipt() {
         // First, if there are other read receipts then just short-circuit this.
         if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
         if (!this.props.mxEvent) return false;
@@ -338,9 +369,9 @@ export default class EventTile extends React.Component {
         return true;
     }
 
-    get _shouldShowSentReceipt() {
+    private get shouldShowSentReceipt() {
         // If we're not even eligible, don't show the receipt.
-        if (!this._isEligibleForSpecialReceipt) return false;
+        if (!this.isEligibleForSpecialReceipt) return false;
 
         // We only show the 'sent' receipt on the last successful event.
         if (!this.props.lastSuccessful) return false;
@@ -358,9 +389,9 @@ export default class EventTile extends React.Component {
         return true;
     }
 
-    get _shouldShowSendingReceipt() {
+    private get shouldShowSendingReceipt() {
         // If we're not even eligible, don't show the receipt.
-        if (!this._isEligibleForSpecialReceipt) return false;
+        if (!this.isEligibleForSpecialReceipt) return false;
 
         // Check the event send status to see if we are pending. Null/undefined status means the
         // message was sent, so check for that and 'sent' explicitly.
@@ -374,22 +405,22 @@ export default class EventTile extends React.Component {
     // TODO: [REACT-WARNING] Move into constructor
     // eslint-disable-next-line camelcase
     UNSAFE_componentWillMount() {
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
     }
 
     componentDidMount() {
-        this._suppressReadReceiptAnimation = false;
+        this.suppressReadReceiptAnimation = false;
         const client = this.context;
         client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.on("userTrustStatusChanged", this.onUserVerificationChanged);
-        this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
+        this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
         }
 
-        if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
-            client.on("Room.receipt", this._onRoomReceipt);
-            this._isListeningForReceipts = true;
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+            client.on("Room.receipt", this.onRoomReceipt);
+            this.isListeningForReceipts = true;
         }
     }
 
@@ -399,7 +430,7 @@ export default class EventTile extends React.Component {
         // re-check the sender verification as outgoing events progress through
         // the send process.
         if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
-            this._verifyEvent(nextProps.mxEvent);
+            this.verifyEvent(nextProps.mxEvent);
         }
     }
 
@@ -408,35 +439,35 @@ export default class EventTile extends React.Component {
             return true;
         }
 
-        return !this._propsEqual(this.props, nextProps);
+        return !this.propsEqual(this.props, nextProps);
     }
 
     componentWillUnmount() {
         const client = this.context;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
-        client.removeListener("Room.receipt", this._onRoomReceipt);
-        this._isListeningForReceipts = false;
-        this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+        client.removeListener("Room.receipt", this.onRoomReceipt);
+        this.isListeningForReceipts = false;
+        this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
         if (this.props.showReactions) {
-            this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+            this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         }
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         // If we're not listening for receipts and expect to be, register a listener.
-        if (!this._isListeningForReceipts && (this._shouldShowSentReceipt || this._shouldShowSendingReceipt)) {
-            this.context.on("Room.receipt", this._onRoomReceipt);
-            this._isListeningForReceipts = true;
+        if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
+            this.context.on("Room.receipt", this.onRoomReceipt);
+            this.isListeningForReceipts = true;
         }
     }
 
-    _onRoomReceipt = (ev, room) => {
+    private onRoomReceipt = (ev, room) => {
         // ignore events for other rooms
         const tileRoom = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         if (room !== tileRoom) return;
 
-        if (!this._shouldShowSentReceipt && !this._shouldShowSendingReceipt && !this._isListeningForReceipts) {
+        if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
             return;
         }
 
@@ -444,36 +475,36 @@ export default class EventTile extends React.Component {
         // the getters we use here to determine what needs rendering.
         this.forceUpdate(() => {
             // Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
-            if (!this._shouldShowSentReceipt && !this._shouldShowSendingReceipt) {
-                this.context.removeListener("Room.receipt", this._onRoomReceipt);
-                this._isListeningForReceipts = false;
+            if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
+                this.context.removeListener("Room.receipt", this.onRoomReceipt);
+                this.isListeningForReceipts = false;
             }
         });
     };
 
     /** called when the event is decrypted after we show it.
      */
-    _onDecrypted = () => {
+    private onDecrypted = () => {
         // we need to re-verify the sending device.
-        // (we call onHeightChanged in _verifyEvent to handle the case where decryption
+        // (we call onHeightChanged in verifyEvent to handle the case where decryption
         // has caused a change in size of the event tile)
-        this._verifyEvent(this.props.mxEvent);
+        this.verifyEvent(this.props.mxEvent);
         this.forceUpdate();
     };
 
-    onDeviceVerificationChanged = (userId, device) => {
+    private onDeviceVerificationChanged = (userId, device) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    onUserVerificationChanged = (userId, _trustStatus) => {
+    private onUserVerificationChanged = (userId, _trustStatus) => {
         if (userId === this.props.mxEvent.getSender()) {
-            this._verifyEvent(this.props.mxEvent);
+            this.verifyEvent(this.props.mxEvent);
         }
     };
 
-    async _verifyEvent(mxEvent) {
+    private async verifyEvent(mxEvent) {
         if (!mxEvent.isEncrypted()) {
             return;
         }
@@ -527,7 +558,7 @@ export default class EventTile extends React.Component {
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
-    _propsEqual(objA, objB) {
+    private propsEqual(objA, objB) {
         const keysA = Object.keys(objA);
         const keysB = Object.keys(objB);
 
@@ -594,7 +625,7 @@ export default class EventTile extends React.Component {
     };
 
     getReadAvatars() {
-        if (this._shouldShowSentReceipt || this._shouldShowSendingReceipt) {
+        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
             return <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
         }
 
@@ -641,7 +672,7 @@ export default class EventTile extends React.Component {
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
-                    suppressAnimation={this._suppressReadReceiptAnimation}
+                    suppressAnimation={this.suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
                     showTwelveHour={this.props.isTwelveHour}
@@ -698,7 +729,7 @@ export default class EventTile extends React.Component {
         });
     };
 
-    _renderE2EPadlock() {
+    private renderE2EPadlock() {
         const ev = this.props.mxEvent;
 
         // event could not be decrypted
@@ -747,9 +778,9 @@ export default class EventTile extends React.Component {
         });
     };
 
-    getTile = () => this._tile.current;
+    getTile = () => this.tile.current;
 
-    getReplyThread = () => this._replyThread.current;
+    getReplyThread = () => this.replyThread.current;
 
     getReactions = () => {
         if (
@@ -769,11 +800,11 @@ export default class EventTile extends React.Component {
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     };
 
-    _onReactionsCreated = (relationType, eventType) => {
+    private onReactionsCreated = (relationType, eventType) => {
         if (relationType !== "m.annotation" || eventType !== "m.reaction") {
             return;
         }
-        this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+        this.props.mxEvent.removeListener("Event.relationsCreated", this.onReactionsCreated);
         this.setState({
             reactions: this.getReactions(),
         });
@@ -838,7 +869,6 @@ export default class EventTile extends React.Component {
             mx_EventTile_12hr: this.props.isTwelveHour,
             // Note: we keep the `sending` state class for tests, not for our styles
             mx_EventTile_sending: !isEditing && isSending,
-            mx_EventTile_notSent: this.props.eventSendStatus === 'not_sent',
             mx_EventTile_highlight: this.props.tileShape === 'notif' ? false : this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
@@ -895,7 +925,7 @@ export default class EventTile extends React.Component {
             // so that the correct avatar is shown as the text is
             // `$target accepted the invitation for $email`
             if (this.props.mxEvent.getContent().third_party_invite) {
-               member = this.props.mxEvent.target;
+                member = this.props.mxEvent.target;
             } else {
                 member = this.props.mxEvent.sender;
             }
@@ -912,8 +942,9 @@ export default class EventTile extends React.Component {
         if (needsSenderProfile) {
             if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
-                                        mxEvent={this.props.mxEvent}
-                                        enableFlair={this.props.enableFlair} />;
+                    mxEvent={this.props.mxEvent}
+                    enableFlair={this.props.enableFlair}
+                />;
             } else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }
@@ -976,18 +1007,18 @@ export default class EventTile extends React.Component {
         }
 
         const linkedTimestamp = <a
-                href={permalink}
-                onClick={this.onPermalinkClicked}
-                aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
-            >
-                { timestamp }
-            </a>;
+            href={permalink}
+            onClick={this.onPermalinkClicked}
+            aria-label={formatTime(new Date(this.props.mxEvent.getTs()), this.props.isTwelveHour)}
+        >
+            { timestamp }
+        </a>;
 
         const useIRCLayout = this.props.layout == Layout.IRC;
         const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
         const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
-        const groupPadlock = !useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
-        const ircPadlock = useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
+        const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
+        const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
 
         let msgOption;
         if (this.props.showReadReceipts) {
@@ -1018,12 +1049,13 @@ export default class EventTile extends React.Component {
                             </a>
                         </div>
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                     </div>
                 );
@@ -1032,13 +1064,14 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_line">
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           tileShape={this.props.tileShape}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                tileShape={this.props.tileShape}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                         </div>
                         <a
                             className="mx_EventTile_senderDetailsLink"
@@ -1062,7 +1095,7 @@ export default class EventTile extends React.Component {
                         this.props.mxEvent,
                         this.props.onHeightChanged,
                         this.props.permalinkCreator,
-                        this._replyThread,
+                        this.replyThread,
                     );
                 }
                 return (
@@ -1075,13 +1108,14 @@ export default class EventTile extends React.Component {
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           onHeightChanged={this.props.onHeightChanged}
-                                           replacingEventId={this.props.replacingEventId}
-                                           showUrlPreview={false} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                onHeightChanged={this.props.onHeightChanged}
+                                replacingEventId={this.props.replacingEventId}
+                                showUrlPreview={false}
+                            />
                         </div>
                     </div>
                 );
@@ -1091,7 +1125,7 @@ export default class EventTile extends React.Component {
                     this.props.mxEvent,
                     this.props.onHeightChanged,
                     this.props.permalinkCreator,
-                    this._replyThread,
+                    this.replyThread,
                     this.props.layout,
                 );
 
@@ -1105,15 +1139,16 @@ export default class EventTile extends React.Component {
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }
-                            <EventTileType ref={this._tile}
-                                           mxEvent={this.props.mxEvent}
-                                           replacingEventId={this.props.replacingEventId}
-                                           editState={this.props.editState}
-                                           highlights={this.props.highlights}
-                                           highlightLink={this.props.highlightLink}
-                                           showUrlPreview={this.props.showUrlPreview}
-                                           permalinkCreator={this.props.permalinkCreator}
-                                           onHeightChanged={this.props.onHeightChanged} />
+                            <EventTileType ref={this.tile}
+                                mxEvent={this.props.mxEvent}
+                                replacingEventId={this.props.replacingEventId}
+                                editState={this.props.editState}
+                                highlights={this.props.highlights}
+                                highlightLink={this.props.highlightLink}
+                                showUrlPreview={this.props.showUrlPreview}
+                                permalinkCreator={this.props.permalinkCreator}
+                                onHeightChanged={this.props.onHeightChanged}
+                            />
                             { keyRequestInfo }
                             { reactionsRow }
                             { actionBar }
@@ -1182,18 +1217,26 @@ function E2ePadlockUnknown(props) {
 
 function E2ePadlockUnauthenticated(props) {
     return (
-        <E2ePadlock title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")} icon="unauthenticated" {...props} />
+        <E2ePadlock
+            title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")}
+            icon="unauthenticated"
+            {...props}
+        />
     );
 }
 
-class E2ePadlock extends React.Component {
-    static propTypes = {
-        icon: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired,
-    };
+interface IE2ePadlockProps {
+    icon: string;
+    title: string;
+}
 
-    constructor() {
-        super();
+interface IE2ePadlockState {
+    hover: boolean;
+}
+
+class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             hover: false,
@@ -1211,14 +1254,13 @@ class E2ePadlock extends React.Component {
     render() {
         let tooltip = null;
         if (this.state.hover) {
-            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
+            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;
         }
 
         const classes = `mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`;
         return (
             <div
                 className={classes}
-                onClick={this.onClick}
                 onMouseEnter={this.onHoverStart}
                 onMouseLeave={this.onHoverEnd}
             >{tooltip}</div>
@@ -1235,8 +1277,8 @@ interface ISentReceiptState {
 }
 
 class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptState> {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             hover: false,
@@ -1253,11 +1295,19 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
 
     render() {
         const isSent = !this.props.messageState || this.props.messageState === 'sent';
+        const isFailed = this.props.messageState === 'not_sent';
         const receiptClasses = classNames({
             'mx_EventTile_receiptSent': isSent,
-            'mx_EventTile_receiptSending': !isSent,
+            'mx_EventTile_receiptSending': !isSent && !isFailed,
         });
 
+        let nonCssBadge = null;
+        if (isFailed) {
+            nonCssBadge = <NotificationBadge
+                notification={StaticNotificationState.RED_EXCLAMATION}
+            />;
+        }
+
         let tooltip = null;
         if (this.state.hover) {
             let label = _t("Sending your message...");
@@ -1265,6 +1315,8 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
                 label = _t("Encrypting your message...");
             } else if (isSent) {
                 label = _t("Your message was sent");
+            } else if (isFailed) {
+                label = _t("Failed to send");
             }
             // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
             // with the read receipt.
@@ -1273,6 +1325,7 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
 
         return <span className="mx_EventTile_readAvatars">
             <span className={receiptClasses} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
+                {nonCssBadge}
                 {tooltip}
             </span>
         </span>;
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index c04bb6cb7c..904040a067 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -128,8 +128,8 @@ export default class LinkPreviewWidget extends React.Component {
         let img;
         if (image) {
             img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
-                    <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
-                  </div>;
+                <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={image} onClick={this.onImageClick} />
+            </div>;
         }
 
         // The description includes &-encoded HTML entities, we decode those as React treats the thing as an
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 593132a283..fbc0e477a1 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -30,6 +30,7 @@ import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -460,7 +461,7 @@ export default class MemberList extends React.Component {
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {
                 inviteButtonText = _t("Invite to this community");
-            } else if (room.isSpaceRoom()) {
+            } else if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) {
                 inviteButtonText = _t("Invite to this space");
             }
 
@@ -492,7 +493,7 @@ export default class MemberList extends React.Component {
         let previousPhase = RightPanelPhases.RoomSummary;
         // We have no previousPhase for when viewing a MemberList from a Space
         let scopeHeader;
-        if (room?.isSpaceRoom()) {
+        if (SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom()) {
             previousPhase = undefined;
             scopeHeader = <div className="mx_RightPanel_scopeHeader">
                 <RoomAvatar room={room} height={32} width={32} />
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.tsx
similarity index 80%
rename from src/components/views/rooms/MessageComposer.js
rename to src/components/views/rooms/MessageComposer.tsx
index 5178d52305..3671069903 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2015-2018, 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015-2021 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.
@@ -13,15 +13,18 @@ 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 React, {createRef} from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
 import dis from '../../../dispatcher/dispatcher';
+import { ActionPayload } from "../../../dispatcher/payloads";
 import Stickerpicker from './Stickerpicker';
-import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
+import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -35,19 +38,26 @@ import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {RecordingState} from "../../../voice/VoiceRecording";
 import Tooltip, {Alignment} from "../elements/Tooltip";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import SendMessageComposer from "./SendMessageComposer";
 
-function ComposerAvatar(props) {
+interface IComposerAvatarProps {
+    me: object;
+}
+
+function ComposerAvatar(props: IComposerAvatarProps) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
     return <div className="mx_MessageComposer_avatar">
         <MemberStatusMessageAvatar member={props.me} width={24} height={24} />
     </div>;
 }
 
-ComposerAvatar.propTypes = {
-    me: PropTypes.object.isRequired,
-};
+interface ISendButtonProps {
+    onClick: () => void;
+}
 
-function SendButton(props) {
+function SendButton(props: ISendButtonProps) {
     return (
         <AccessibleTooltipButton
             className="mx_MessageComposer_sendMessage"
@@ -57,10 +67,6 @@ function SendButton(props) {
     );
 }
 
-SendButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
-};
-
 const EmojiButton = ({addEmoji}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
@@ -68,7 +74,7 @@ const EmojiButton = ({addEmoji}) => {
     if (menuDisplayed) {
         const buttonRect = button.current.getBoundingClientRect();
         const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
         </ContextMenu>;
     }
@@ -98,39 +104,39 @@ const EmojiButton = ({addEmoji}) => {
     </React.Fragment>;
 };
 
-class UploadButton extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    }
+interface IUploadButtonProps {
+    roomId: string;
+}
+
+class UploadButton extends React.Component<IUploadButtonProps> {
+    private uploadInput = React.createRef<HTMLInputElement>();
+    private dispatcherRef: string;
 
     constructor(props) {
         super(props);
-        this.onUploadClick = this.onUploadClick.bind(this);
-        this.onUploadFileInputChange = this.onUploadFileInputChange.bind(this);
 
-        this._uploadInput = createRef();
-        this._dispatcherRef = dis.register(this.onAction);
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        dis.unregister(this.dispatcherRef);
     }
 
-    onAction = payload => {
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === "upload_file") {
             this.onUploadClick();
         }
     };
 
-    onUploadClick(ev) {
+    private onUploadClick = () => {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;
         }
-        this._uploadInput.current.click();
+        this.uploadInput.current.click();
     }
 
-    onUploadFileInputChange(ev) {
+    private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
         if (ev.target.files.length === 0) return;
 
         // take a copy so we can safely reset the value of the form control
@@ -160,7 +166,7 @@ class UploadButton extends React.Component {
                 title={_t('Upload file')}
             >
                 <input
-                    ref={this._uploadInput}
+                    ref={this.uploadInput}
                     type="file"
                     style={uploadInputStyle}
                     multiple
@@ -171,19 +177,35 @@ class UploadButton extends React.Component {
     }
 }
 
+interface IProps {
+    room: Room;
+    resizeNotifier: ResizeNotifier;
+    permalinkCreator: RoomPermalinkCreator;
+    replyToEvent?: MatrixEvent;
+    e2eStatus?: E2EStatus;
+}
+
+interface IState {
+    tombstone: MatrixEvent;
+    canSendMessages: boolean;
+    isComposerEmpty: boolean;
+    haveRecording: boolean;
+    recordingTimeLeftSeconds?: number;
+    me?: RoomMember;
+}
+
 @replaceableComponent("views.rooms.MessageComposer")
-export default class MessageComposer extends React.Component {
+export default class MessageComposer extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+    private messageComposerInput: SendMessageComposer;
+    private voiceRecordingButton: VoiceRecordComposerTile;
+
     constructor(props) {
         super(props);
-        this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
-        this._onTombstoneClick = this._onTombstoneClick.bind(this);
-        this.renderPlaceholderText = this.renderPlaceholderText.bind(this);
-        VoiceRecordingStore.instance.on(UPDATE_EVENT, this._onVoiceStoreUpdate);
-        this._dispatcherRef = null;
+        VoiceRecordingStore.instance.on(UPDATE_EVENT, this.onVoiceStoreUpdate);
 
         this.state = {
-            tombstone: this._getRoomTombstone(),
+            tombstone: this.getRoomTombstone(),
             canSendMessages: this.props.room.maySendMessage(),
             isComposerEmpty: true,
             haveRecording: false,
@@ -191,7 +213,13 @@ export default class MessageComposer extends React.Component {
         };
     }
 
-    onAction = (payload) => {
+    componentDidMount() {
+        this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+        this.waitForOwnMember();
+    }
+
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === 'reply_to_event') {
             // add a timeout for the reply preview to be rendered, so
             // that the ScrollPanel listening to the resizeNotifier can
@@ -203,13 +231,7 @@ export default class MessageComposer extends React.Component {
         }
     };
 
-    componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-        this._waitForOwnMember();
-    }
-
-    _waitForOwnMember() {
+    private waitForOwnMember() {
         // if we have the member already, do that
         const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
         if (me) {
@@ -227,34 +249,28 @@ export default class MessageComposer extends React.Component {
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
         }
-        VoiceRecordingStore.instance.off(UPDATE_EVENT, this._onVoiceStoreUpdate);
+        VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
     }
 
-    _onRoomStateEvents(ev, state) {
+    private onRoomStateEvents = (ev, state) => {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
         if (ev.getType() === 'm.room.tombstone') {
-            this.setState({tombstone: this._getRoomTombstone()});
+            this.setState({tombstone: this.getRoomTombstone()});
         }
         if (ev.getType() === 'm.room.power_levels') {
             this.setState({canSendMessages: this.props.room.maySendMessage()});
         }
     }
 
-    _getRoomTombstone() {
+    private getRoomTombstone() {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
     }
 
-    onInputStateChanged(inputState) {
-        // Merge the new input state with old to support partial updates
-        inputState = Object.assign({}, this.state.inputState, inputState);
-        this.setState({inputState});
-    }
-
-    _onTombstoneClick(ev) {
+    private onTombstoneClick = (ev) => {
         ev.preventDefault();
 
         const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
@@ -284,7 +300,7 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    renderPlaceholderText() {
+    private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
             if (this.props.e2eStatus) {
                 return _t('Send an encrypted reply…');
@@ -307,7 +323,15 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    sendMessage = () => {
+    sendMessage = async () => {
+        if (this.state.haveRecording && this.voiceRecordingButton) {
+            // There shouldn't be any text message to send when a voice recording is active, so
+            // just send out the voice recording.
+            await this.voiceRecordingButton.send();
+            return;
+        }
+
+        // XXX: Private function access
         this.messageComposerInput._sendMessage();
     }
 
@@ -317,7 +341,7 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    _onVoiceStoreUpdate = () => {
+    private onVoiceStoreUpdate = () => {
         const recording = VoiceRecordingStore.instance.activeRecording;
         this.setState({haveRecording: !!recording});
         if (recording) {
@@ -372,6 +396,7 @@ export default class MessageComposer extends React.Component {
             if (SettingsStore.getValue("feature_voice_messages")) {
                 controls.push(<VoiceRecordComposerTile
                     key="controls_voice_record"
+                    ref={c => this.voiceRecordingButton = c}
                     room={this.props.room} />);
             }
 
@@ -386,7 +411,7 @@ export default class MessageComposer extends React.Component {
             const continuesLink = replacementRoomId ? (
                 <a href={makeRoomPermalink(replacementRoomId)}
                     className="mx_MessageComposer_roomReplaced_link"
-                    onClick={this._onTombstoneClick}
+                    onClick={this.onTombstoneClick}
                 >
                     {_t("The conversation continues here.")}
                 </a>
@@ -394,7 +419,9 @@ export default class MessageComposer extends React.Component {
 
             controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
-                    <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
+                    <img className="mx_MessageComposer_roomReplaced_icon"
+                        src={require("../../../../res/img/room_replaced.svg")}
+                    />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         {_t("This room has been replaced and is no longer active.")}
                     </span><br />
@@ -431,14 +458,3 @@ export default class MessageComposer extends React.Component {
         );
     }
 }
-
-MessageComposer.propTypes = {
-    // js-sdk Room object
-    room: PropTypes.object.isRequired,
-
-    // string representing the current voip call state
-    callState: PropTypes.string,
-
-    // string representing the current room app drawer state
-    showApps: PropTypes.bool,
-};
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 36a52e260d..4b843bfc29 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -30,7 +30,7 @@ interface IProps {
      * If true, the badge will show a count if at all possible. This is typically
      * used to override the user's preference for things like room sublists.
      */
-    forceCount: boolean;
+    forceCount?: boolean;
 
     /**
      * The room ID, if any, the badge represents.
diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js
index 2259cad7fb..78cf422cc6 100644
--- a/src/components/views/rooms/PinnedEventTile.js
+++ b/src/components/views/rooms/PinnedEventTile.js
@@ -53,9 +53,9 @@ export default class PinnedEventTile extends React.Component {
             if (index !== -1) {
                 pinned.splice(index, 1);
                 MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '')
-                .then(() => {
-                    if (this.props.onUnpinned) this.props.onUnpinned();
-                });
+                    .then(() => {
+                        if (this.props.onUnpinned) this.props.onUnpinned();
+                    });
             } else if (this.props.onUnpinned) this.props.onUnpinned();
         }
     };
@@ -98,8 +98,11 @@ export default class PinnedEventTile extends React.Component {
                     { formatFullDate(new Date(this.props.mxEvent.getTs())) }
                 </span>
                 <div className="mx_PinnedEventTile_message">
-                    <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
-                                  onHeightChanged={() => {}} // we need to give this, apparently
+                    <MessageEvent
+                        mxEvent={this.props.mxEvent}
+                        className="mx_PinnedEventTile_body"
+                        maxImageHeight={150}
+                        onHeightChanged={() => {}} // we need to give this, apparently
                     />
                 </div>
             </div>
diff --git a/src/components/views/rooms/PinnedEventsPanel.js b/src/components/views/rooms/PinnedEventsPanel.js
index 285829bf63..4b310dbbca 100644
--- a/src/components/views/rooms/PinnedEventsPanel.js
+++ b/src/components/views/rooms/PinnedEventsPanel.js
@@ -64,10 +64,10 @@ export default class PinnedEventsPanel extends React.Component {
 
             pinnedEvents.getContent().pinned.map((eventId) => {
                 promises.push(cli.getEventTimeline(this.props.room.getUnfilteredTimelineSet(), eventId, 0).then(
-                (timeline) => {
-                    const event = timeline.getEvents().find((e) => e.getId() === eventId);
-                    return {eventId, timeline, event};
-                }).catch((err) => {
+                    (timeline) => {
+                        const event = timeline.getEvents().find((e) => e.getId() === eventId);
+                        return {eventId, timeline, event};
+                    }).catch((err) => {
                     console.error("Error looking up pinned event " + eventId + " in room " + this.props.room.roomId);
                     console.error(err);
                     return null; // return lack of context to avoid unhandled errors
@@ -113,10 +113,14 @@ export default class PinnedEventsPanel extends React.Component {
         }
 
         return this.state.pinned.map((context) => {
-            return (<PinnedEventTile key={context.event.getId()}
-                                     mxRoom={this.props.room}
-                                     mxEvent={context.event}
-                                     onUnpinned={this._updatePinnedMessages} />);
+            return (
+                <PinnedEventTile
+                    key={context.event.getId()}
+                    mxRoom={this.props.room}
+                    mxEvent={context.event}
+                    onUnpinned={this._updatePinnedMessages}
+                />
+            );
         });
     }
 
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 709e6a0db0..64f2c1160b 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -187,8 +187,7 @@ export default class ReadReceiptMarker extends React.PureComponent {
         }
 
         return (
-            <NodeAnimator
-                    startStyles={this.state.startStyles} >
+            <NodeAnimator startStyles={this.state.startStyles}>
                 <MemberAvatar
                     member={this.props.member}
                     fallbackUserId={this.props.fallbackUserId}
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 0d99be4f53..d7f8c74d73 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -79,8 +79,13 @@ export default class ReplyPreview extends React.Component {
                     { _t('Replying') }
                 </div>
                 <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
-                    <img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18"
-                         onClick={cancelQuoting} />
+                    <img
+                        className="mx_filterFlipColor"
+                        src={require("../../../../res/img/cancel.svg")}
+                        width="18"
+                        height="18"
+                        onClick={cancelQuoting}
+                    />
                 </div>
                 <div className="mx_ReplyPreview_clear" />
                 <EventTile
diff --git a/src/components/views/rooms/RoomDetailRow.js b/src/components/views/rooms/RoomDetailRow.js
index 62960930f2..ad073f3278 100644
--- a/src/components/views/rooms/RoomDetailRow.js
+++ b/src/components/views/rooms/RoomDetailRow.js
@@ -88,11 +88,11 @@ export default class RoomDetailRow extends React.Component {
         const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
 
         const guestRead = room.worldReadable ? (
-                <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
-            ) : <div />;
+            <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
+        ) : <div />;
         const guestJoin = room.guestCanJoin ? (
-                <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
-            ) : <div />;
+            <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
+        ) : <div />;
 
         const perms = (guestRead || guestJoin) ? (<div className="mx_RoomDirectory_perms">
             { guestRead }&nbsp;
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index e4e638fc67..fdf38784cf 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2018, 2020, 2021 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.
@@ -37,7 +35,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import GroupAvatar from "../avatars/GroupAvatar";
 import ExtraTile from "./ExtraTile";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
@@ -492,7 +489,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     isSelected={false}
                     displayName={g.name}
                     avatar={avatar}
-                    notificationState={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
+                    notificationState={StaticNotificationState.RED_EXCLAMATION}
                     onClick={openGroup}
                     key={`temporaryGroupTile_${g.groupId}`}
                 />
@@ -542,6 +539,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     onResize={this.props.onResize}
                     showSkeleton={showSkeleton}
                     extraTiles={extraTiles}
+                    resizeNotifier={this.props.resizeNotifier}
                     alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
                 />
             });
diff --git a/src/components/views/rooms/RoomListNumResults.tsx b/src/components/views/rooms/RoomListNumResults.tsx
index fcac91a56a..01cbecf05d 100644
--- a/src/components/views/rooms/RoomListNumResults.tsx
+++ b/src/components/views/rooms/RoomListNumResults.tsx
@@ -19,6 +19,7 @@ import React, {useState} from "react";
 import { _t } from "../../../languageHandler";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import SpaceStore from "../../../stores/SpaceStore";
 
 const RoomListNumResults: React.FC = () => {
     const [count, setCount] = useState<number>(null);
@@ -34,7 +35,10 @@ const RoomListNumResults: React.FC = () => {
     if (typeof count !== "number") return null;
 
     return <div className="mx_LeftPanel_roomListFilterCount">
-        {_t("%(count)s results", { count })}
+        { SpaceStore.instance.spacePanelSpaces.length
+            ? _t("%(count)s results in all spaces", { count })
+            : _t("%(count)s results", { count })
+        }
     </div>;
 };
 
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index a726ab99fc..dd80e9d40a 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -44,6 +44,7 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import { polyfillTouchEvent } from "../../../@types/polyfill";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
 import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
@@ -75,7 +76,7 @@ interface IProps {
     onResize: () => void;
     showSkeleton?: boolean;
     alwaysVisible?: boolean;
-
+    resizeNotifier: ResizeNotifier;
     extraTiles?: ReactComponentElement<typeof ExtraTile>[];
 
     // TODO: Account for https://github.com/vector-im/element-web/issues/14179
@@ -528,6 +529,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                 tiles.push(<RoomTile
                     room={room}
                     key={`room-${room.roomId}`}
+                    resizeNotifier={this.props.resizeNotifier}
                     showMessagePreview={this.layout.showPreviews}
                     isMinimized={this.props.isMinimized}
                     tag={this.props.tagId}
@@ -763,7 +765,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             'mx_RoomSublist': true,
             'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition,
             'mx_RoomSublist_minimized': this.props.isMinimized,
-            'mx_RoomSublist_hidden': !this.state.rooms.length && this.props.alwaysVisible !== true,
+            'mx_RoomSublist_hidden': (
+                !this.state.rooms.length && !this.props.extraTiles?.length && this.props.alwaysVisible !== true
+            ),
         });
 
         let content = null;
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index b2a07d7e06..7303f36489 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -1,8 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
 Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015-2017, 2019-2021 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.
@@ -19,6 +17,7 @@ limitations under the License.
 
 import React, { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import classNames from "classnames";
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
@@ -51,13 +50,17 @@ import IconizedContextMenu, {
     IconizedContextMenuRadio,
 } from "../context_menus/IconizedContextMenu";
 import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { getUnsentMessages } from "../../structures/RoomStatusBar";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { ResizeNotifier } from "../../../utils/ResizeNotifier";
 
 interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
     tag: TagID;
+    resizeNotifier: ResizeNotifier;
 }
 
 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
@@ -67,6 +70,7 @@ interface IState {
     notificationsMenuPosition: PartialDOMRect;
     generalMenuPosition: PartialDOMRect;
     messagePreview?: string;
+    hasUnsentEvents: boolean;
 }
 
 const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
@@ -93,12 +97,20 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
             notificationsMenuPosition: null,
             generalMenuPosition: null,
+            hasUnsentEvents: this.countUnsentEvents() > 0,
 
             // generatePreview() will return nothing if the user has previews disabled
             messagePreview: this.generatePreview(),
         };
         this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
         this.roomProps = EchoChamber.forRoom(this.props.room);
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+        }
+    }
+
+    private countUnsentEvents(): number {
+        return getUnsentMessages(this.props.room).length;
     }
 
     private onRoomNameUpdate = (room) => {
@@ -109,6 +121,17 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.forceUpdate(); // notification state changed - update
     };
 
+    private onResize = () => {
+        if (this.showMessagePreview && !this.state.messagePreview) {
+            this.setState({messagePreview: this.generatePreview()});
+        }
+    };
+
+    private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
+        if (!room?.roomId === this.props.room.roomId) return;
+        this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
+    };
+
     private onRoomPropertyUpdate = (property: CachedRoomKey) => {
         if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate();
         // else ignore - not important for this tile
@@ -167,6 +190,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
             this.onCommunityUpdate,
         );
+        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     public componentWillUnmount() {
@@ -182,6 +206,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             );
             this.props.room.off("Room.name", this.onRoomNameUpdate);
         }
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.off("middlePanelResized", this.onResize);
+        }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         defaultDispatcher.unregister(this.dispatcherRef);
         this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
@@ -191,6 +218,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId),
             this.onCommunityUpdate,
         );
+        MatrixClientPeg.get()?.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -554,17 +582,30 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         />;
 
         let badge: React.ReactNode;
-        if (!this.props.isMinimized && this.notificationState) {
+        if (!this.props.isMinimized) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
-            badge = (
-                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                    <NotificationBadge
-                        notification={this.notificationState}
-                        forceCount={false}
-                        roomId={this.props.room.roomId}
-                    />
-                </div>
-            );
+            if (this.state.hasUnsentEvents) {
+                // hardcode the badge to a danger state when there's unsent messages
+                badge = (
+                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
+                        <NotificationBadge
+                            notification={StaticNotificationState.RED_EXCLAMATION}
+                            forceCount={false}
+                            roomId={this.props.room.roomId}
+                        />
+                    </div>
+                );
+            } else if (this.notificationState) {
+                badge = (
+                    <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
+                        <NotificationBadge
+                            notification={this.notificationState}
+                            forceCount={false}
+                            roomId={this.props.room.roomId}
+                        />
+                    </div>
+                );
+            }
         }
 
         let messagePreview = null;
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 0d3a174766..d60eba00ec 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -506,9 +506,8 @@ export default class SendMessageComposer extends React.Component {
             member.rawDisplayName : userId;
         const caret = this._editorRef.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // index is -1 if there are no parts but we only care for if this would be the part in position 0
-        const insertIndex = position.index > 0 ? position.index : 0;
-        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
+        // Insert suffix only if the caret is at the start of the composer
+        const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
         model.transform(() => {
             const addedLen = model.insert(parts, position);
             return model.positionForOffset(caret.offset + addedLen, true);
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 44d31d7146..82e8cf640c 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -266,25 +266,25 @@ export default class Stickerpicker extends React.Component {
                             width: this.popoverWidth,
                         }}
                     >
-                    <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
-                        <AppTile
-                            app={stickerApp}
-                            room={this.props.room}
-                            fullWidth={true}
-                            userId={MatrixClientPeg.get().credentials.userId}
-                            creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
-                            waitForIframeLoad={true}
-                            showMenubar={true}
-                            onEditClick={this._launchManageIntegrations}
-                            onDeleteClick={this._removeStickerpickerWidgets}
-                            showTitle={false}
-                            showCancel={false}
-                            showPopout={false}
-                            onMinimiseClick={this._onHideStickersClick}
-                            handleMinimisePointerEvents={true}
-                            userWidget={true}
-                        />
-                    </PersistedElement>
+                        <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
+                            <AppTile
+                                app={stickerApp}
+                                room={this.props.room}
+                                fullWidth={true}
+                                userId={MatrixClientPeg.get().credentials.userId}
+                                creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
+                                waitForIframeLoad={true}
+                                showMenubar={true}
+                                onEditClick={this._launchManageIntegrations}
+                                onDeleteClick={this._removeStickerpickerWidgets}
+                                showTitle={false}
+                                showCancel={false}
+                                showPopout={false}
+                                onMinimiseClick={this._onHideStickersClick}
+                                handleMinimisePointerEvents={true}
+                                userWidget={true}
+                            />
+                        </PersistedElement>
                     </div>
                 </div>
             );
diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.js b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
similarity index 91%
rename from src/components/views/rooms/ThirdPartyMemberInfo.js
rename to src/components/views/rooms/ThirdPartyMemberInfo.tsx
index 67b86538c9..792e6ac8f7 100644
--- a/src/components/views/rooms/ThirdPartyMemberInfo.js
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd.
+Copyright 2019-2021 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.
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
 import {_t} from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
@@ -26,12 +26,24 @@ import {isValid3pidInvite} from "../../../RoomInvite";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SettingsStore from "../../../settings/SettingsStore";
+
+interface IProps {
+    event: MatrixEvent;
+}
+
+interface IState {
+    stateKey: string;
+    roomId: string;
+    displayName: string;
+    invited: boolean;
+    canKick: boolean;
+    senderName: string;
+}
 
 @replaceableComponent("views.rooms.ThirdPartyMemberInfo")
-export default class ThirdPartyMemberInfo extends React.Component {
-    static propTypes = {
-        event: PropTypes.instanceOf(MatrixEvent).isRequired,
-    };
+export default class ThirdPartyMemberInfo extends React.Component<IProps, IState> {
+    private room: Room;
 
     constructor(props) {
         super(props);
@@ -124,7 +136,7 @@ export default class ThirdPartyMemberInfo extends React.Component {
         }
 
         let scopeHeader;
-        if (this.room.isSpaceRoom()) {
+        if (SettingsStore.getValue("feature_spaces") && this.room.isSpaceRoom()) {
             scopeHeader = <div className="mx_RightPanel_scopeHeader">
                 <RoomAvatar room={this.room} height={32} width={32} />
                 <RoomName room={this.room} />
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 9b7f0da472..2102071bf3 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {_t} from "../../../languageHandler";
-import React from "react";
-import {VoiceRecording} from "../../../voice/VoiceRecording";
+import React, {ReactNode} from "react";
+import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import classNames from "classnames";
@@ -25,6 +25,12 @@ import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import {MsgType} from "matrix-js-sdk/src/@types/event";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import CallMediaHandler from "../../../CallMediaHandler";
 
 interface IProps {
     room: Room;
@@ -32,6 +38,7 @@ interface IProps {
 
 interface IState {
     recorder?: VoiceRecording;
+    recordingPhase?: RecordingState;
 }
 
 /**
@@ -43,87 +50,181 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         super(props);
 
         this.state = {
-            recorder: null, // not recording by default
+            recorder: null, // no recording started by default
         };
     }
 
-    private onStartStopVoiceMessage = async () => {
-        // TODO: @@ TravisR: We do not want to auto-send on stop.
-        if (this.state.recorder) {
-            await this.state.recorder.stop();
-            const mxc = await this.state.recorder.upload();
-            MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
-                "body": "Voice message",
-                "msgtype": "org.matrix.msc2516.voice",
-                //"msgtype": MsgType.Audio,
-                "url": mxc,
-                "info": {
-                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
-                    mimetype: this.state.recorder.contentType,
-                    size: this.state.recorder.contentLength,
-                },
+    public async componentWillUnmount() {
+        await VoiceRecordingStore.instance.disposeRecording();
+    }
 
-                // MSC1767 experiment
-                "org.matrix.msc1767.text": "Voice message",
-                "org.matrix.msc1767.file": {
-                    url: mxc,
-                    name: "Voice message.ogg",
-                    mimetype: this.state.recorder.contentType,
-                    size: this.state.recorder.contentLength,
-                },
-                "org.matrix.msc1767.audio": {
-                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
-                    // TODO: @@ TravisR: Waveform? (MSC1767 decision)
-                },
-                "org.matrix.experimental.msc2516.voice": { // MSC2516+MSC1767 experiment
-                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
-
-                    // Events can't have floats, so we try to maintain resolution by using 1024
-                    // as a maximum value. The waveform contains values between zero and 1, so this
-                    // should come out largely sane.
-                    //
-                    // We're expecting about one data point per second of audio.
-                    waveform: this.state.recorder.finalWaveform.map(v => Math.round(v * 1024)),
-                },
-            });
-            await VoiceRecordingStore.instance.disposeRecording();
-            this.setState({recorder: null});
-            return;
+    // called by composer
+    public async send() {
+        if (!this.state.recorder) {
+            throw new Error("No recording started - cannot send anything");
         }
-        const recorder = VoiceRecordingStore.instance.startRecording();
-        await recorder.start();
-        this.setState({recorder});
+
+        await this.state.recorder.stop();
+        const mxc = await this.state.recorder.upload();
+        MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
+            "body": "Voice message",
+            //"msgtype": "org.matrix.msc2516.voice",
+            "msgtype": MsgType.Audio,
+            "url": mxc,
+            "info": {
+                duration: Math.round(this.state.recorder.durationSeconds * 1000),
+                mimetype: this.state.recorder.contentType,
+                size: this.state.recorder.contentLength,
+            },
+
+            // MSC1767 experiment
+            "org.matrix.msc1767.text": "Voice message",
+            "org.matrix.msc1767.file": {
+                url: mxc,
+                name: "Voice message.ogg",
+                mimetype: this.state.recorder.contentType,
+                size: this.state.recorder.contentLength,
+            },
+            "org.matrix.msc1767.audio": {
+                duration: Math.round(this.state.recorder.durationSeconds * 1000),
+
+                // Events can't have floats, so we try to maintain resolution by using 1024
+                // as a maximum value. The waveform contains values between zero and 1, so this
+                // should come out largely sane.
+                //
+                // We're expecting about one data point per second of audio.
+                waveform: this.state.recorder.getPlayback().waveform.map(v => Math.round(v * 1024)),
+            },
+            "org.matrix.msc2516.voice": {}, // No content, this is a rendering hint
+        });
+        await this.disposeRecording();
+    }
+
+    private async disposeRecording() {
+        await VoiceRecordingStore.instance.disposeRecording();
+
+        // Reset back to no recording, which means no phase (ie: restart component entirely)
+        this.setState({recorder: null, recordingPhase: null});
+    }
+
+    private onCancel = async () => {
+        await this.disposeRecording();
     };
 
-    private renderWaveformArea() {
-        if (!this.state.recorder) return null;
+    private onRecordStartEndClick = async () => {
+        if (this.state.recorder) {
+            await this.state.recorder.stop();
+            return;
+        }
 
-        return <div className='mx_VoiceRecordComposerTile_waveformContainer'>
+        // The "microphone access error" dialogs are used a lot, so let's functionify them
+        const accessError = () => {
+            Modal.createTrackedDialog('Microphone Access Error', '', ErrorDialog, {
+                title: _t("Unable to access your microphone"),
+                description: <>
+                    <p>{_t(
+                        "We were unable to access your microphone. Please check your browser settings and try again.",
+                    )}</p>
+                </>,
+            });
+        };
+
+        // Do a sanity test to ensure we're about to grab a valid microphone reference. Things might
+        // change between this and recording, but at least we will have tried.
+        try {
+            const devices = await CallMediaHandler.getDevices();
+            if (!devices?.['audioinput']?.length) {
+                Modal.createTrackedDialog('No Microphone Error', '', ErrorDialog, {
+                    title: _t("No microphone found"),
+                    description: <>
+                        <p>{_t(
+                            "We didn't find a microphone on your device. Please check your settings and try again.",
+                        )}</p>
+                    </>,
+                });
+                return;
+            }
+            // else we probably have a device that is good enough
+        } catch (e) {
+            console.error("Error getting devices: ", e);
+            accessError();
+            return;
+        }
+
+        try {
+            const recorder = VoiceRecordingStore.instance.startRecording();
+            await recorder.start();
+
+            // We don't need to remove the listener: the recorder will clean that up for us.
+            recorder.on(UPDATE_EVENT, (ev: RecordingState) => {
+                if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
+                this.setState({recordingPhase: ev});
+            });
+
+            this.setState({recorder, recordingPhase: RecordingState.Started});
+        } catch (e) {
+            console.error("Error starting recording: ", e);
+            accessError();
+
+            // noinspection ES6MissingAwait - if this goes wrong we don't want it to affect the call stack
+            VoiceRecordingStore.instance.disposeRecording();
+        }
+    };
+
+    private renderWaveformArea(): ReactNode {
+        if (!this.state.recorder) return null; // no recorder means we're not recording: no waveform
+
+        if (this.state.recordingPhase !== RecordingState.Started) {
+            // TODO: @@ TR: Should we disable this during upload? What does a failed upload look like?
+            return <RecordingPlayback playback={this.state.recorder.getPlayback()} />;
+        }
+
+        // only other UI is the recording-in-progress UI
+        return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
             <LiveRecordingClock recorder={this.state.recorder} />
             <LiveRecordingWaveform recorder={this.state.recorder} />
         </div>;
     }
 
-    public render() {
-        const classes = classNames({
-            'mx_MessageComposer_button': !this.state.recorder,
-            'mx_MessageComposer_voiceMessage': !this.state.recorder,
-            'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
-        });
+    public render(): ReactNode {
+        let recordingInfo;
+        let deleteButton;
+        if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
+            const classes = classNames({
+                'mx_MessageComposer_button': !this.state.recorder,
+                'mx_MessageComposer_voiceMessage': !this.state.recorder,
+                'mx_VoiceRecordComposerTile_stop': this.state.recorder?.isRecording,
+            });
 
-        let tooltip = _t("Record a voice message");
-        if (!!this.state.recorder) {
-            // TODO: @@ TravisR: Change to match behaviour
-            tooltip = _t("Stop & send recording");
+            let tooltip = _t("Record a voice message");
+            if (!!this.state.recorder) {
+                tooltip = _t("Stop the recording");
+            }
+
+            let stopOrRecordBtn = <AccessibleTooltipButton
+                className={classes}
+                onClick={this.onRecordStartEndClick}
+                title={tooltip}
+            />;
+            if (this.state.recorder && !this.state.recorder?.isRecording) {
+                stopOrRecordBtn = null;
+            }
+
+            recordingInfo = stopOrRecordBtn;
+        }
+
+        if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
+            deleteButton = <AccessibleTooltipButton
+                className='mx_VoiceRecordComposerTile_delete'
+                title={_t("Delete recording")}
+                onClick={this.onCancel}
+            />;
         }
 
         return (<>
+            {deleteButton}
             {this.renderWaveformArea()}
-            <AccessibleTooltipButton
-                className={classes}
-                onClick={this.onStartStopVoiceMessage}
-                title={tooltip}
-            />
+            {recordingInfo}
         </>);
     }
 }
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 0b6739df64..6c73fa7f90 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -154,7 +154,7 @@ export default class ChangeAvatar extends React.Component {
             const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
-                        name='?' idName={MatrixClientPeg.get().getUserIdLocalpart()} url={this.state.avatarUrl} />;
+                name='?' idName={MatrixClientPeg.get().getUserIdLocalpart()} url={this.state.avatarUrl} />;
         }
 
         let uploadSection;
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 3a7fb2e2b3..1f45bf61eb 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -206,7 +206,7 @@ export default class ChangePassword extends React.Component {
                 test: ({ value, allowEmpty }) => allowEmpty || !!value,
                 invalid: () => _t("Passwords can't be empty"),
             },
-         ],
+        ],
     });
 
     onChangeNewPassword = (ev) => {
@@ -245,7 +245,7 @@ export default class ChangePassword extends React.Component {
                 },
                 invalid: () => _t("Passwords don't match"),
             },
-         ],
+        ],
     });
 
     onClickChange = async (ev) => {
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index e5f57d1af2..c0f23cb906 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -259,7 +259,7 @@ export default class CrossSigningPanel extends React.PureComponent {
                             <td>{_t("Homeserver feature support:")}</td>
                             <td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
                         </tr>
-                   </tbody></table>
+                    </tbody></table>
                 </details>
                 {errorSection}
                 {actionRow}
diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index e7d300b0f8..b1ad605a37 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/src/components/views/settings/DevicesPanel.js
@@ -214,7 +214,7 @@ export default class DevicesPanel extends React.Component {
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
             <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
-               { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length}) }
+                { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length})}
             </AccessibleButton>;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
diff --git a/src/components/views/settings/E2eAdvancedPanel.js b/src/components/views/settings/E2eAdvancedPanel.tsx
similarity index 100%
rename from src/components/views/settings/E2eAdvancedPanel.js
rename to src/components/views/settings/E2eAdvancedPanel.tsx
diff --git a/src/components/views/settings/EventIndexPanel.js b/src/components/views/settings/EventIndexPanel.tsx
similarity index 65%
rename from src/components/views/settings/EventIndexPanel.js
rename to src/components/views/settings/EventIndexPanel.tsx
index d1a02de16d..fa84063ee8 100644
--- a/src/components/views/settings/EventIndexPanel.js
+++ b/src/components/views/settings/EventIndexPanel.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -28,10 +28,17 @@ import {SettingLevel} from "../../../settings/SettingLevel";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
+interface IState {
+    enabling: boolean;
+    eventIndexSize: number;
+    roomCount: number;
+    eventIndexingEnabled: boolean;
+}
+
 @replaceableComponent("views.settings.EventIndexPanel")
-export default class EventIndexPanel extends React.Component {
-    constructor() {
-        super();
+export default class EventIndexPanel extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             enabling: false,
@@ -68,7 +75,7 @@ export default class EventIndexPanel extends React.Component {
         }
     }
 
-    async componentDidMount(): void {
+    componentDidMount(): void {
         this.updateState();
     }
 
@@ -102,8 +109,10 @@ export default class EventIndexPanel extends React.Component {
         });
     }
 
-    _onManage = async () => {
+    private onManage = async () => {
         Modal.createTrackedDialogAsync('Message search', 'Message search',
+            // @ts-ignore: TS doesn't seem to like the type of this now that it
+            // has also been converted to TS as well, but I can't figure out why...
             import('../../../async-components/views/dialogs/eventindex/ManageEventIndexDialog'),
             {
                 onFinished: () => {},
@@ -111,7 +120,7 @@ export default class EventIndexPanel extends React.Component {
         );
     }
 
-    _onEnable = async () => {
+    private onEnable = async () => {
         this.setState({
             enabling: true,
         });
@@ -123,14 +132,13 @@ export default class EventIndexPanel extends React.Component {
         await this.updateState();
     }
 
-    _confirmEventStoreReset = () => {
-        const self = this;
+    private confirmEventStoreReset = () => {
         const { close } = Modal.createDialog(SeshatResetDialog, {
             onFinished: async (success) => {
                 if (success) {
                     await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
                     await EventIndexPeg.deleteEventIndex();
-                    await self._onEnable();
+                    await this.onEnable();
                     close();
                 }
             },
@@ -145,20 +153,19 @@ export default class EventIndexPanel extends React.Component {
         if (EventIndexPeg.get() !== null) {
             eventIndexingSettings = (
                 <div>
-                    <div className='mx_SettingsTab_subsectionText'>
-                        {_t("Securely cache encrypted messages locally for them " +
-                            "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
-                            {
-                                size: formatBytes(this.state.eventIndexSize, 0),
-                                // This drives the singular / plural string
-                                // selection for "room" / "rooms" only.
-                                count: this.state.roomCount,
-                                rooms: formatCountLong(this.state.roomCount),
-                            },
-                        )}
-                    </div>
+                    <div className='mx_SettingsTab_subsectionText'>{_t(
+                        "Securely cache encrypted messages locally for them " +
+                        "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
+                        {
+                            size: formatBytes(this.state.eventIndexSize, 0),
+                            // This drives the singular / plural string
+                            // selection for "room" / "rooms" only.
+                            count: this.state.roomCount,
+                            rooms: formatCountLong(this.state.roomCount),
+                        },
+                    )}</div>
                     <div>
-                        <AccessibleButton kind="primary" onClick={this._onManage}>
+                        <AccessibleButton kind="primary" onClick={this.onManage}>
                             {_t("Manage")}
                         </AccessibleButton>
                     </div>
@@ -167,13 +174,13 @@ export default class EventIndexPanel extends React.Component {
         } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
             eventIndexingSettings = (
                 <div>
-                    <div className='mx_SettingsTab_subsectionText'>
-                        {_t( "Securely cache encrypted messages locally for them to " +
-                             "appear in search results.")}
-                    </div>
+                    <div className='mx_SettingsTab_subsectionText'>{_t(
+                        "Securely cache encrypted messages locally for them to " +
+                        "appear in search results.",
+                    )}</div>
                     <div>
                         <AccessibleButton kind="primary" disabled={this.state.enabling}
-                            onClick={this._onEnable}>
+                            onClick={this.onEnable}>
                             {_t("Enable")}
                         </AccessibleButton>
                         {this.state.enabling ? <InlineSpinner /> : <div />}
@@ -188,40 +195,36 @@ export default class EventIndexPanel extends React.Component {
             );
 
             eventIndexingSettings = (
-                <div className='mx_SettingsTab_subsectionText'>
+                <div className='mx_SettingsTab_subsectionText'>{_t(
+                    "%(brand)s is missing some components required for securely " +
+                    "caching encrypted messages locally. If you'd like to " +
+                    "experiment with this feature, build a custom %(brand)s Desktop " +
+                    "with <nativeLink>search components added</nativeLink>.",
                     {
-                        _t( "%(brand)s is missing some components required for securely " +
-                            "caching encrypted messages locally. If you'd like to " +
-                            "experiment with this feature, build a custom %(brand)s Desktop " +
-                            "with <nativeLink>search components added</nativeLink>.",
-                            {
-                                brand,
-                            },
-                            {
-                                'nativeLink': (sub) => <a href={nativeLink} target="_blank"
-                                    rel="noreferrer noopener">{sub}</a>,
-                            },
-                        )
-                    }
-                </div>
+                        brand,
+                    },
+                    {
+                        nativeLink: sub => <a href={nativeLink}
+                            target="_blank" rel="noreferrer noopener"
+                        >{sub}</a>,
+                    },
+                )}</div>
             );
         } else if (!EventIndexPeg.platformHasSupport()) {
             eventIndexingSettings = (
-                <div className='mx_SettingsTab_subsectionText'>
+                <div className='mx_SettingsTab_subsectionText'>{_t(
+                    "%(brand)s can't securely cache encrypted messages locally " +
+                    "while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
+                    "for encrypted messages to appear in search results.",
                     {
-                        _t( "%(brand)s can't securely cache encrypted messages locally " +
-                            "while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
-                            "for encrypted messages to appear in search results.",
-                            {
-                                brand,
-                            },
-                            {
-                                'desktopLink': (sub) => <a href="https://element.io/get-started"
-                                    target="_blank" rel="noreferrer noopener">{sub}</a>,
-                            },
-                        )
-                    }
-                </div>
+                        brand,
+                    },
+                    {
+                        desktopLink: sub => <a href="https://element.io/get-started"
+                            target="_blank" rel="noreferrer noopener"
+                        >{sub}</a>,
+                    },
+                )}</div>
             );
         } else {
             eventIndexingSettings = (
@@ -233,19 +236,18 @@ export default class EventIndexPanel extends React.Component {
                         }
                     </p>
                     {EventIndexPeg.error && (
-                    <details>
-                        <summary>{_t("Advanced")}</summary>
-                        <code>
-                            {EventIndexPeg.error.message}
-                        </code>
-                        <p>
-                            <AccessibleButton key="delete" kind="danger" onClick={this._confirmEventStoreReset}>
-                                {_t("Reset")}
-                            </AccessibleButton>
-                        </p>
-                    </details>
+                        <details>
+                            <summary>{_t("Advanced")}</summary>
+                            <code>
+                                {EventIndexPeg.error.message}
+                            </code>
+                            <p>
+                                <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
+                                    {_t("Reset")}
+                                </AccessibleButton>
+                            </p>
+                        </details>
                     )}
-
                 </div>
             );
         }
diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 25fe434994..5756536085 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -100,7 +100,7 @@ export default class Notifications extends React.Component {
         MatrixClientPeg.get().setPushRuleEnabled(
             'global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked,
         ).then(function() {
-           self._refreshFromServer();
+            self._refreshFromServer();
         });
     };
 
@@ -580,12 +580,12 @@ export default class Notifications extends React.Component {
                         "vectorRuleId": "_keywords",
                         "description": (
                             <span>
-                            { _t('Messages containing <span>keywords</span>',
-                                {},
-                                { 'span': (sub) =>
-                                    <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>,
-                                },
-                            )}
+                                { _t('Messages containing <span>keywords</span>',
+                                    {},
+                                    { 'span': (sub) =>
+                                        <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>,
+                                    },
+                                )}
                             </span>
                         ),
                         "vectorState": self.state.vectorContentRules.vectorState,
@@ -743,8 +743,8 @@ export default class Notifications extends React.Component {
 
     emailNotificationsRow(address, label) {
         return <LabelledToggleSwitch value={this.hasEmailPusher(this.state.pushers, address)}
-                                     onChange={this.onEnableEmailNotificationsChange.bind(this, address)}
-                                     label={label} key={`emailNotif_${label}`} />;
+            onChange={this.onEnableEmailNotificationsChange.bind(this, address)}
+            label={label} key={`emailNotif_${label}`} />;
     }
 
     render() {
@@ -757,8 +757,8 @@ export default class Notifications extends React.Component {
         let masterPushRuleDiv;
         if (this.state.masterPushRule) {
             masterPushRuleDiv = <LabelledToggleSwitch value={!this.state.masterPushRule.enabled}
-                                                      onChange={this.onEnableNotificationsChange}
-                                                      label={_t('Enable notifications for this account')} />;
+                onChange={this.onEnableNotificationsChange}
+                label={_t('Enable notifications for this account')} />;
         }
 
         let clearNotificationsButton;
@@ -874,16 +874,16 @@ export default class Notifications extends React.Component {
                     { spinner }
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationsEnabled")}
-                                          onChange={this.onEnableDesktopNotificationsChange}
-                                          label={_t('Enable desktop notifications for this session')} />
+                        onChange={this.onEnableDesktopNotificationsChange}
+                        label={_t('Enable desktop notifications for this session')} />
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationBodyEnabled")}
-                                          onChange={this.onEnableDesktopNotificationBodyChange}
-                                          label={_t('Show message in desktop notification')} />
+                        onChange={this.onEnableDesktopNotificationBodyChange}
+                        label={_t('Show message in desktop notification')} />
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("audioNotificationsEnabled")}
-                                          onChange={this.onEnableAudioNotificationsChange}
-                                          label={_t('Enable audible notifications for this session')} />
+                        onChange={this.onEnableAudioNotificationsChange}
+                        label={_t('Enable audible notifications for this session')} />
 
                     { emailNotificationsRows }
 
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index 971b868751..9ecf369eba 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -170,8 +170,12 @@ export default class ProfileSettings extends React.Component {
                 noValidate={true}
                 className="mx_ProfileSettings_profileForm"
             >
-                <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
-                       onChange={this._onAvatarChanged} accept="image/*" />
+                <input
+                    type="file"
+                    ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
+                    onChange={this._onAvatarChanged}
+                    accept="image/*"
+                />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_controls">
                         <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
diff --git a/src/components/views/settings/SetIdServer.js b/src/components/views/settings/SetIdServer.tsx
similarity index 89%
rename from src/components/views/settings/SetIdServer.js
rename to src/components/views/settings/SetIdServer.tsx
index fa2a36476d..05d1f83387 100644
--- a/src/components/views/settings/SetIdServer.js
+++ b/src/components/views/settings/SetIdServer.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -16,7 +16,6 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -28,6 +27,7 @@ import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";
 import { getDefaultIdentityServerUrl, doesIdentityServerHaveTerms } from '../../../utils/IdentityServerUtils';
 import {timeout} from "../../../utils/promise";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ActionPayload } from '../../../dispatcher/payloads';
 
 // We'll wait up to this long when checking for 3PID bindings on the IS.
 const REACHABILITY_TIMEOUT = 10000; // ms
@@ -59,16 +59,28 @@ async function checkIdentityServerUrl(u) {
     }
 }
 
-@replaceableComponent("views.settings.SetIdServer")
-export default class SetIdServer extends React.Component {
-    static propTypes = {
-        // Whether or not the ID server is missing terms. This affects the text
-        // shown to the user.
-        missingTerms: PropTypes.bool,
-    };
+interface IProps {
+    // Whether or not the ID server is missing terms. This affects the text
+    // shown to the user.
+    missingTerms: boolean;
+}
 
-    constructor() {
-        super();
+interface IState {
+    defaultIdServer?: string;
+    currentClientIdServer: string;
+    idServer?: string;
+    error?: string;
+    busy: boolean;
+    disconnectBusy: boolean;
+    checking: boolean;
+}
+
+@replaceableComponent("views.settings.SetIdServer")
+export default class SetIdServer extends React.Component<IProps, IState> {
+    private dispatcherRef: string;
+
+    constructor(props) {
+        super(props);
 
         let defaultIdServer = '';
         if (!MatrixClientPeg.get().getIdentityServerUrl() && getDefaultIdentityServerUrl()) {
@@ -96,7 +108,7 @@ export default class SetIdServer extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
-    onAction = (payload) => {
+    private onAction = (payload: ActionPayload) => {
         // We react to changes in the ID server in the event the user is staring at this form
         // when changing their identity server on another device.
         if (payload.action !== "id_server_changed") return;
@@ -106,13 +118,13 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _onIdentityServerChanged = (ev) => {
+    private onIdentityServerChanged = (ev) => {
         const u = ev.target.value;
 
         this.setState({idServer: u});
     };
 
-    _getTooltip = () => {
+    private getTooltip = () => {
         if (this.state.checking) {
             const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
             return <div>
@@ -126,11 +138,11 @@ export default class SetIdServer extends React.Component {
         }
     };
 
-    _idServerChangeEnabled = () => {
+    private idServerChangeEnabled = () => {
         return !!this.state.idServer && !this.state.busy;
     };
 
-    _saveIdServer = (fullUrl) => {
+    private saveIdServer = (fullUrl) => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: fullUrl,
@@ -143,7 +155,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _checkIdServer = async (e) => {
+    private checkIdServer = async (e) => {
         e.preventDefault();
         const { idServer, currentClientIdServer } = this.state;
 
@@ -166,14 +178,14 @@ export default class SetIdServer extends React.Component {
                 // Double check that the identity server even has terms of service.
                 const hasTerms = await doesIdentityServerHaveTerms(fullUrl);
                 if (!hasTerms) {
-                    const [confirmed] = await this._showNoTermsWarning(fullUrl);
+                    const [confirmed] = await this.showNoTermsWarning(fullUrl);
                     save = confirmed;
                 }
 
                 // Show a general warning, possibly with details about any bound
                 // 3PIDs that would be left behind.
                 if (save && currentClientIdServer && fullUrl !== currentClientIdServer) {
-                    const [confirmed] = await this._showServerChangeWarning({
+                    const [confirmed] = await this.showServerChangeWarning({
                         title: _t("Change identity server"),
                         unboundMessage: _t(
                             "Disconnect from the identity server <current /> and " +
@@ -189,7 +201,7 @@ export default class SetIdServer extends React.Component {
                 }
 
                 if (save) {
-                    this._saveIdServer(fullUrl);
+                    this.saveIdServer(fullUrl);
                 }
             } catch (e) {
                 console.error(e);
@@ -204,7 +216,7 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _showNoTermsWarning(fullUrl) {
+    private showNoTermsWarning(fullUrl) {
         const QuestionDialog = sdk.getComponent("views.dialogs.QuestionDialog");
         const { finished } = Modal.createTrackedDialog('No Terms Warning', '', QuestionDialog, {
             title: _t("Identity server has no terms of service"),
@@ -223,10 +235,10 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _onDisconnectClicked = async () => {
+    private onDisconnectClicked = async () => {
         this.setState({disconnectBusy: true});
         try {
-            const [confirmed] = await this._showServerChangeWarning({
+            const [confirmed] = await this.showServerChangeWarning({
                 title: _t("Disconnect identity server"),
                 unboundMessage: _t(
                     "Disconnect from the identity server <idserver />?", {},
@@ -235,14 +247,14 @@ export default class SetIdServer extends React.Component {
                 button: _t("Disconnect"),
             });
             if (confirmed) {
-                this._disconnectIdServer();
+                this.disconnectIdServer();
             }
         } finally {
             this.setState({disconnectBusy: false});
         }
     };
 
-    async _showServerChangeWarning({ title, unboundMessage, button }) {
+    private async showServerChangeWarning({ title, unboundMessage, button }) {
         const { currentClientIdServer } = this.state;
 
         let threepids = [];
@@ -318,7 +330,7 @@ export default class SetIdServer extends React.Component {
         return finished;
     }
 
-    _disconnectIdServer = () => {
+    private disconnectIdServer = () => {
         // Account data change will update localstorage, client, etc through dispatcher
         MatrixClientPeg.get().setAccountData("m.identity_server", {
             base_url: null, // clear
@@ -371,7 +383,7 @@ export default class SetIdServer extends React.Component {
 
         let discoSection;
         if (idServerUrl) {
-            let discoButtonContent = _t("Disconnect");
+            let discoButtonContent: React.ReactNode = _t("Disconnect");
             let discoBodyText = _t(
                 "Disconnecting from your identity server will mean you " +
                 "won't be discoverable by other users and you won't be " +
@@ -391,14 +403,14 @@ export default class SetIdServer extends React.Component {
             }
             discoSection = <div>
                 <span className="mx_SettingsTab_subsectionText">{discoBodyText}</span>
-                <AccessibleButton onClick={this._onDisconnectClicked} kind="danger_sm">
+                <AccessibleButton onClick={this.onDisconnectClicked} kind="danger_sm">
                     {discoButtonContent}
                 </AccessibleButton>
             </div>;
         }
 
         return (
-            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this._checkIdServer}>
+            <form className="mx_SettingsTab_section mx_SetIdServer" onSubmit={this.checkIdServer}>
                 <span className="mx_SettingsTab_subheading">
                     {sectionTitle}
                 </span>
@@ -411,15 +423,15 @@ export default class SetIdServer extends React.Component {
                     autoComplete="off"
                     placeholder={this.state.defaultIdServer}
                     value={this.state.idServer}
-                    onChange={this._onIdentityServerChanged}
-                    tooltipContent={this._getTooltip()}
+                    onChange={this.onIdentityServerChanged}
+                    tooltipContent={this.getTooltip()}
                     tooltipClassName="mx_SetIdServer_tooltip"
                     disabled={this.state.busy}
                     forceValidity={this.state.error ? false : null}
                 />
                 <AccessibleButton type="submit" kind="primary_sm"
-                    onClick={this._checkIdServer}
-                    disabled={!this._idServerChangeEnabled()}
+                    onClick={this.checkIdServer}
+                    disabled={!this.idServerChangeEnabled()}
                 >{_t("Change")}</AccessibleButton>
                 {discoSection}
             </form>
diff --git a/src/components/views/settings/account/EmailAddresses.js b/src/components/views/settings/account/EmailAddresses.js
index 1ebd374173..a36369cf88 100644
--- a/src/components/views/settings/account/EmailAddresses.js
+++ b/src/components/views/settings/account/EmailAddresses.js
@@ -90,12 +90,18 @@ export class ExistingEmailAddress extends React.Component {
                     <span className="mx_ExistingEmailAddress_promptText">
                         {_t("Remove %(email)s?", {email: this.props.email.address} )}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
-                                      className="mx_ExistingEmailAddress_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="danger_sm"
+                        className="mx_ExistingEmailAddress_confirmBtn"
+                    >
                         {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
-                                      className="mx_ExistingEmailAddress_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="link_sm"
+                        className="mx_ExistingEmailAddress_confirmBtn"
+                    >
                         {_t("Cancel")}
                     </AccessibleButton>
                 </div>
@@ -228,21 +234,28 @@ export default class EmailAddresses extends React.Component {
         );
         if (this.state.verifying) {
             addButton = (
-              <div>
-                  <div>{_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}</div>
-                  <AccessibleButton onClick={this._onContinueClick} kind="primary"
-                                    disabled={this.state.continueDisabled}>
-                      {_t("Continue")}
-                  </AccessibleButton>
-              </div>
+                <div>
+                    <div>{_t("We've sent you an email to verify your address. Please follow the instructions there and then click the button below.")}</div>
+                    <AccessibleButton
+                        onClick={this._onContinueClick}
+                        kind="primary"
+                        disabled={this.state.continueDisabled}
+                    >
+                        {_t("Continue")}
+                    </AccessibleButton>
+                </div>
             );
         }
 
         return (
             <div className="mx_EmailAddresses">
                 {existingEmailElements}
-                <form onSubmit={this._onAddClick} autoComplete="off"
-                      noValidate={true} className="mx_EmailAddresses_new">
+                <form
+                    onSubmit={this._onAddClick}
+                    autoComplete="off"
+                    noValidate={true}
+                    className="mx_EmailAddresses_new"
+                >
                     <Field
                         type="text"
                         label={_t("Email Address")}
diff --git a/src/components/views/settings/account/PhoneNumbers.js b/src/components/views/settings/account/PhoneNumbers.js
index 5725fdb909..e154068128 100644
--- a/src/components/views/settings/account/PhoneNumbers.js
+++ b/src/components/views/settings/account/PhoneNumbers.js
@@ -85,12 +85,18 @@ export class ExistingPhoneNumber extends React.Component {
                     <span className="mx_ExistingPhoneNumber_promptText">
                         {_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
-                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onActuallyRemove}
+                        kind="danger_sm"
+                        className="mx_ExistingPhoneNumber_confirmBtn"
+                    >
                         {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
-                                      className="mx_ExistingPhoneNumber_confirmBtn">
+                    <AccessibleButton
+                        onClick={this._onDontRemove}
+                        kind="link_sm"
+                        className="mx_ExistingPhoneNumber_confirmBtn"
+                    >
                         {_t("Cancel")}
                     </AccessibleButton>
                 </div>
@@ -246,8 +252,11 @@ export default class PhoneNumbers extends React.Component {
                             value={this.state.newPhoneNumberCode}
                             onChange={this._onChangeNewPhoneNumberCode}
                         />
-                        <AccessibleButton onClick={this._onContinueClick} kind="primary"
-                                          disabled={this.state.continueDisabled}>
+                        <AccessibleButton
+                            onClick={this._onContinueClick}
+                            kind="primary"
+                            disabled={this.state.continueDisabled}
+                        >
                             {_t("Continue")}
                         </AccessibleButton>
                     </form>
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index cd4a043622..139cfd5fbd 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -80,9 +80,11 @@ export default class GeneralRoomSettingsTab extends React.Component {
             flairSection = <>
                 <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <RelatedGroupSettings roomId={room.roomId}
-                                          canSetRelatedGroups={canChangeGroups}
-                                          relatedGroupsEvent={groupsEvent} />
+                    <RelatedGroupSettings
+                        roomId={room.roomId}
+                        canSetRelatedGroups={canChangeGroups}
+                        relatedGroupsEvent={groupsEvent}
+                    />
                 </div>
             </>;
         }
@@ -97,8 +99,8 @@ export default class GeneralRoomSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <AliasSettings roomId={this.props.roomId}
-                                   canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
-                                   canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
+                        canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
+                        canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 </div>
                 <div className="mx_SettingsTab_heading">{_t("Other")}</div>
                 { flairSection }
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
index baefb5ae20..fa56fa2cb6 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
@@ -155,7 +155,7 @@ export default class NotificationsSettingsTab extends React.Component {
                     <div>
                         <span>{_t("Notification sound")}: <code>{this.state.currentSound}</code></span><br />
                         <AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this._clearSound.bind(this)} kind="primary">
-                                {_t("Reset")}
+                            {_t("Reset")}
                         </AccessibleButton>
                     </div>
                     <div>
@@ -167,11 +167,11 @@ export default class NotificationsSettingsTab extends React.Component {
                         {currentUploadedFile}
 
                         <AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
-                                {_t("Browse")}
+                            {_t("Browse")}
                         </AccessibleButton>
 
                         <AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
-                                {_t("Save")}
+                            {_t("Save")}
                         </AccessibleButton>
                         <br />
                     </div>
diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
similarity index 89%
rename from src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
index 59a175906d..4fa521f598 100644
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, _td} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -23,6 +22,9 @@ import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 import {EventType} from "matrix-js-sdk/src/@types/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 const plEventsToLabels = {
     // These will be translated for us later.
@@ -63,15 +65,15 @@ function parseIntWithDefault(val, def) {
     return isNaN(res) ? def : res;
 }
 
-export class BannedUser extends React.Component {
-    static propTypes = {
-        canUnban: PropTypes.bool,
-        member: PropTypes.object.isRequired, // js-sdk RoomMember
-        by: PropTypes.string.isRequired,
-        reason: PropTypes.string,
-    };
+interface IBannedUserProps {
+    canUnban?: boolean;
+    member: RoomMember;
+    by: string;
+    reason?: string;
+}
 
-    _onUnbanClick = (e) => {
+export class BannedUser extends React.Component<IBannedUserProps> {
+    private onUnbanClick = (e) => {
         MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to unban: " + err);
@@ -87,8 +89,10 @@ export class BannedUser extends React.Component {
 
         if (this.props.canUnban) {
             unbanButton = (
-                <AccessibleButton kind='danger_sm' onClick={this._onUnbanClick}
-                                  className='mx_RolesRoomSettingsTab_unbanBtn'>
+                <AccessibleButton className='mx_RolesRoomSettingsTab_unbanBtn'
+                    kind='danger_sm'
+                    onClick={this.onUnbanClick}
+                >
                     { _t('Unban') }
                 </AccessibleButton>
             );
@@ -107,29 +111,29 @@ export class BannedUser extends React.Component {
     }
 }
 
-@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
-export default class RolesRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
+interface IProps {
+    roomId: string;
+}
 
-    componentDidMount(): void {
-        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership);
+@replaceableComponent("views.settings.tabs.room.RolesRoomSettingsTab")
+export default class RolesRoomSettingsTab extends React.Component<IProps> {
+    componentDidMount() {
+        MatrixClientPeg.get().on("RoomState.members", this.onRoomMembership);
     }
 
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         const client = MatrixClientPeg.get();
         if (client) {
-            client.removeListener("RoomState.members", this._onRoomMembership);
+            client.removeListener("RoomState.members", this.onRoomMembership);
         }
     }
 
-    _onRoomMembership = (event, state, member) => {
+    private onRoomMembership = (event: MatrixEvent, state: RoomState, member: RoomMember) => {
         if (state.roomId !== this.props.roomId) return;
         this.forceUpdate();
     };
 
-    _populateDefaultPlEvents(eventsSection, stateLevel, eventsLevel) {
+    private populateDefaultPlEvents(eventsSection: Record<string, number>, stateLevel: number, eventsLevel: number) {
         for (const desiredEvent of Object.keys(plEventsToShow)) {
             if (!(desiredEvent in eventsSection)) {
                 eventsSection[desiredEvent] = (plEventsToShow[desiredEvent].isState ? stateLevel : eventsLevel);
@@ -137,7 +141,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         }
     }
 
-    _onPowerLevelsChanged = (value, powerLevelKey) => {
+    private onPowerLevelsChanged = (inputValue: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -148,7 +152,7 @@ export default class RolesRoomSettingsTab extends React.Component {
 
         const eventsLevelPrefix = "event_levels_";
 
-        value = parseInt(value);
+        const value = parseInt(inputValue);
 
         if (powerLevelKey.startsWith(eventsLevelPrefix)) {
             // deep copy "events" object, Object.assign itself won't deep copy
@@ -182,7 +186,7 @@ export default class RolesRoomSettingsTab extends React.Component {
         });
     };
 
-    _onUserPowerLevelChanged = (value, powerLevelKey) => {
+    private onUserPowerLevelChanged = (value: string, powerLevelKey: string) => {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
@@ -266,7 +270,7 @@ export default class RolesRoomSettingsTab extends React.Component {
             currentUserLevel = defaultUserLevel;
         }
 
-        this._populateDefaultPlEvents(
+        this.populateDefaultPlEvents(
             eventsLevels,
             parseIntWithDefault(plContent.state_default, powerLevelDescriptors.state_default.defaultValue),
             parseIntWithDefault(plContent.events_default, powerLevelDescriptors.events_default.defaultValue),
@@ -288,7 +292,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 } else if (userLevels[user] < defaultUserLevel) { // muted
@@ -299,7 +303,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             label={user}
                             key={user}
                             powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this._onUserPowerLevelChanged}
+                            onChange={this.onUserPowerLevelChanged}
                         />,
                     );
                 }
@@ -345,8 +349,9 @@ export default class RolesRoomSettingsTab extends React.Component {
                             if (sender) bannedBy = sender.name;
                             return (
                                 <BannedUser key={member.userId} canUnban={canBanUsers}
-                                            member={member} reason={banEvent.reason}
-                                            by={bannedBy} />
+                                    member={member} reason={banEvent.reason}
+                                    by={bannedBy}
+                                />
                             );
                         })}
                     </ul>
@@ -373,7 +378,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                     usersDefault={defaultUserLevel}
                     disabled={!canChangeLevels || currentUserLevel < value}
                     powerLevelKey={key} // Will be sent as the second parameter to `onChange`
-                    onChange={this._onPowerLevelsChanged}
+                    onChange={this.onPowerLevelsChanged}
                 />
             </div>;
         });
@@ -398,7 +403,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                         usersDefault={defaultUserLevel}
                         disabled={!canChangeLevels || currentUserLevel < eventsLevels[eventType]}
                         powerLevelKey={"event_levels_" + eventType}
-                        onChange={this._onPowerLevelsChanged}
+                        onChange={this.onPowerLevelsChanged}
                     />
                 </div>
             );
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
similarity index 79%
rename from src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index ce883c6d23..02bbcfb751 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 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.
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import {_t} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
@@ -26,64 +26,92 @@ import StyledRadioGroup from '../../../elements/StyledRadioGroup';
 import {SettingLevel} from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import {UIFeature} from "../../../../../settings/UIFeature";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+// Knock and private are reserved keywords which are not yet implemented.
+enum JoinRule {
+    Public = "public",
+    Knock = "knock",
+    Invite = "invite",
+    Private = "private",
+}
+
+enum GuestAccess {
+    CanJoin = "can_join",
+    Forbidden = "forbidden",
+}
+
+enum HistoryVisibility {
+    Invited = "invited",
+    Joined = "joined",
+    Shared = "shared",
+    WorldReadable = "world_readable",
+}
+
+interface IProps {
+    roomId: string;
+}
+
+interface IState {
+    joinRule: JoinRule;
+    guestAccess: GuestAccess;
+    history: HistoryVisibility;
+    hasAliases: boolean;
+    encrypted: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
-export default class SecurityRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
-
-    constructor() {
-        super();
+export default class SecurityRoomSettingsTab extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
-            joinRule: "invite",
-            guestAccess: "can_join",
-            history: "shared",
+            joinRule: JoinRule.Invite,
+            guestAccess: GuestAccess.CanJoin,
+            history: HistoryVisibility.Shared,
             hasAliases: false,
             encrypted: false,
         };
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
-    async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase
-        MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
+    async UNSAFE_componentWillMount() { // eslint-disable-line camelcase
+        MatrixClientPeg.get().on("RoomState.events", this.onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         const state = room.currentState;
 
-        const joinRule = this._pullContentPropertyFromEvent(
+        const joinRule: JoinRule = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.join_rules", ""),
             'join_rule',
-            'invite',
+            JoinRule.Invite,
         );
-        const guestAccess = this._pullContentPropertyFromEvent(
+        const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.guest_access", ""),
             'guest_access',
-            'forbidden',
+            GuestAccess.Forbidden,
         );
-        const history = this._pullContentPropertyFromEvent(
+        const history: HistoryVisibility = this.pullContentPropertyFromEvent(
             state.getStateEvents("m.room.history_visibility", ""),
             'history_visibility',
-            'shared',
+            HistoryVisibility.Shared,
         );
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
         this.setState({joinRule, guestAccess, history, encrypted});
-        const hasAliases = await this._hasAliases();
+        const hasAliases = await this.hasAliases();
         this.setState({hasAliases});
     }
 
-    _pullContentPropertyFromEvent(event, key, defaultValue) {
+    private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
         if (!event || !event.getContent()) return defaultValue;
         return event.getContent()[key] || defaultValue;
     }
 
-    componentWillUnmount(): void {
-        MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
+    componentWillUnmount() {
+        MatrixClientPeg.get().removeListener("RoomState.events", this.onStateEvent);
     }
 
-    _onStateEvent = (e) => {
+    private onStateEvent = (e: MatrixEvent) => {
         const refreshWhenTypes = [
             'm.room.join_rules',
             'm.room.guest_access',
@@ -93,7 +121,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
     };
 
-    _onEncryptionChange = (e) => {
+    private onEncryptionChange = (e: React.ChangeEvent) => {
         Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, {
             title: _t('Enable encryption?'),
             description: _t(
@@ -102,10 +130,9 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 "may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>",
                 {},
                 {
-                    'a': (sub) => {
-                        return <a rel='noreferrer noopener' target='_blank'
-                                  href='https://element.io/help#encryption'>{sub}</a>;
-                    },
+                    a: sub => <a href="https://element.io/help#encryption"
+                        rel="noreferrer noopener" target="_blank"
+                    >{sub}</a>,
                 },
             ),
             onFinished: (confirm) => {
@@ -127,12 +154,12 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _fixGuestAccess = (e) => {
+    private fixGuestAccess = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const joinRule = "invite";
-        const guestAccess = "can_join";
+        const joinRule = JoinRule.Invite;
+        const guestAccess = GuestAccess.CanJoin;
 
         const beforeJoinRule = this.state.joinRule;
         const beforeGuestAccess = this.state.guestAccess;
@@ -149,7 +176,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onRoomAccessRadioToggle = (roomAccess) => {
+    private onRoomAccessRadioToggle = (roomAccess: string) => {
         //                         join_rule
         //                      INVITE  |  PUBLIC
         //        ----------------------+----------------
@@ -163,20 +190,20 @@ export default class SecurityRoomSettingsTab extends React.Component {
         // invite them, you clearly want them to join, whether they're a
         // guest or not.  In practice, guest_access should probably have
         // been implemented as part of the join_rules enum.
-        let joinRule = "invite";
-        let guestAccess = "can_join";
+        let joinRule = JoinRule.Invite;
+        let guestAccess = GuestAccess.CanJoin;
 
         switch (roomAccess) {
             case "invite_only":
                 // no change - use defaults above
                 break;
             case "public_no_guests":
-                joinRule = "public";
-                guestAccess = "forbidden";
+                joinRule = JoinRule.Public;
+                guestAccess = GuestAccess.Forbidden;
                 break;
             case "public_with_guests":
-                joinRule = "public";
-                guestAccess = "can_join";
+                joinRule = JoinRule.Public;
+                guestAccess = GuestAccess.CanJoin;
                 break;
         }
 
@@ -195,7 +222,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _onHistoryRadioToggle = (history) => {
+    private onHistoryRadioToggle = (history: HistoryVisibility) => {
         const beforeHistory = this.state.history;
         this.setState({history: history});
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
@@ -206,11 +233,11 @@ export default class SecurityRoomSettingsTab extends React.Component {
         });
     };
 
-    _updateBlacklistDevicesFlag = (checked) => {
+    private updateBlacklistDevicesFlag = (checked: boolean) => {
         MatrixClientPeg.get().getRoom(this.props.roomId).setBlacklistUnverifiedDevices(checked);
     };
 
-    async _hasAliases() {
+    private async hasAliases(): Promise<boolean> {
         const cli = MatrixClientPeg.get();
         if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
             const response = await cli.unstableGetLocalAliases(this.props.roomId);
@@ -224,7 +251,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         }
     }
 
-    _renderRoomAccess() {
+    private renderRoomAccess() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const joinRule = this.state.joinRule;
@@ -240,7 +267,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                     <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
                     <span>
                         {_t("Guests cannot join this room even if explicitly invited.")}&nbsp;
-                        <a href="" onClick={this._fixGuestAccess}>{_t("Click here to fix")}</a>
+                        <a href="" onClick={this.fixGuestAccess}>{_t("Click here to fix")}</a>
                     </span>
                 </div>
             );
@@ -265,7 +292,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 <StyledRadioGroup
                     name="roomVis"
                     value={joinRule}
-                    onChange={this._onRoomAccessRadioToggle}
+                    onChange={this.onRoomAccessRadioToggle}
                     definitions={[
                         {
                             value: "invite_only",
@@ -291,7 +318,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         );
     }
 
-    _renderHistory() {
+    private renderHistory() {
         const client = MatrixClientPeg.get();
         const history = this.state.history;
         const state = client.getRoom(this.props.roomId).currentState;
@@ -306,25 +333,25 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 <StyledRadioGroup
                     name="historyVis"
                     value={history}
-                    onChange={this._onHistoryRadioToggle}
+                    onChange={this.onHistoryRadioToggle}
                     definitions={[
                         {
-                            value: "world_readable",
+                            value: HistoryVisibility.WorldReadable,
                             disabled: !canChangeHistory,
                             label: _t("Anyone"),
                         },
                         {
-                            value: "shared",
+                            value: HistoryVisibility.Shared,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since the point in time of selecting this option)'),
                         },
                         {
-                            value: "invited",
+                            value: HistoryVisibility.Invited,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since they were invited)'),
                         },
                         {
-                            value: "joined",
+                            value: HistoryVisibility.Joined,
                             disabled: !canChangeHistory,
                             label: _t('Members only (since they joined)'),
                         },
@@ -348,7 +375,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
             encryptionSettings = <SettingsFlag
                 name="blacklistUnverifiedDevices"
                 level={SettingLevel.ROOM_DEVICE}
-                onChange={this._updateBlacklistDevicesFlag}
+                onChange={this.updateBlacklistDevicesFlag}
                 roomId={this.props.roomId}
             />;
         }
@@ -356,7 +383,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         let historySection = (<>
             <span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
             <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                {this._renderHistory()}
+                {this.renderHistory()}
             </div>
         </>);
         if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
@@ -373,15 +400,16 @@ export default class SecurityRoomSettingsTab extends React.Component {
                         <div className='mx_SettingsTab_subsectionText'>
                             <span>{_t("Once enabled, encryption cannot be disabled.")}</span>
                         </div>
-                        <LabelledToggleSwitch value={isEncrypted} onChange={this._onEncryptionChange}
-                                              label={_t("Encrypted")} disabled={!canEnableEncryption} />
+                        <LabelledToggleSwitch value={isEncrypted} onChange={this.onEncryptionChange}
+                            label={_t("Encrypted")} disabled={!canEnableEncryption}
+                        />
                     </div>
                     {encryptionSettings}
                 </div>
 
                 <span className='mx_SettingsTab_subheading'>{_t("Who can access this room?")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    {this._renderRoomAccess()}
+                    {this.renderRoomAccess()}
                 </div>
 
                 {historySection}
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index b1ad9f3d23..5118414903 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -192,7 +192,11 @@ export default class GeneralUserSettingsTab extends React.Component {
 
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
         this.setState({language: newLanguage});
-        PlatformPeg.get().reload();
+        const platform = PlatformPeg.get();
+        if (platform) {
+            platform.setLanguage(newLanguage);
+            platform.reload();
+        }
     };
 
     _onSpellCheckLanguagesChange = (languages) => {
@@ -319,8 +323,11 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
-                <LanguageDropdown className="mx_GeneralUserSettingsTab_languageInput"
-                                  onOptionChange={this._onLanguageChange} value={this.state.language} />
+                <LanguageDropdown
+                    className="mx_GeneralUserSettingsTab_languageInput"
+                    onOptionChange={this._onLanguageChange}
+                    value={this.state.language}
+                />
             </div>
         );
     }
@@ -329,8 +336,10 @@ export default class GeneralUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Spell check dictionaries")}</span>
-                <SpellCheckSettings languages={this.state.spellCheckLanguages}
-                                    onLanguagesChange={this._onSpellCheckLanguagesChange} />
+                <SpellCheckSettings
+                    languages={this.state.spellCheckLanguages}
+                    onLanguagesChange={this._onSpellCheckLanguagesChange}
+                />
             </div>
         );
     }
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
similarity index 64%
rename from src/components/views/settings/tabs/user/HelpUserSettingsTab.js
rename to src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index e16ee686f5..3fa0be478c 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -16,27 +15,37 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import {_t, getCurrentLanguage} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
 import Modal from "../../../../../Modal";
-import * as sdk from "../../../../../";
+import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import UpdateCheckButton from "../../UpdateCheckButton";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { copyPlaintext } from "../../../../../utils/strings";
+import * as ContextMenu from "../../../../structures/ContextMenu";
+import { toRightOf } from "../../../../structures/ContextMenu";
+
+interface IProps {
+    closeSettingsFn: () => {};
+}
+
+interface IState {
+    appVersion: string;
+    canUpdate: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.user.HelpUserSettingsTab")
-export default class HelpUserSettingsTab extends React.Component {
-    static propTypes = {
-        closeSettingsFn: PropTypes.func.isRequired,
-    };
+export default class HelpUserSettingsTab extends React.Component<IProps, IState> {
+    protected closeCopiedTooltip: () => void;
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             appVersion: null,
@@ -53,7 +62,13 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     }
 
-    _onClearCacheAndReload = (e) => {
+    componentWillUnmount() {
+        // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
+        // the tooltip otherwise, such as pressing Escape
+        if (this.closeCopiedTooltip) this.closeCopiedTooltip();
+    }
+
+    private onClearCacheAndReload = (e) => {
         if (!PlatformPeg.get()) return;
 
         // Dev note: please keep this log line, it's useful when troubleshooting a MatrixClient suddenly
@@ -65,7 +80,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _onBugReport = (e) => {
+    private onBugReport = (e) => {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         if (!BugReportDialog) {
             return;
@@ -73,7 +88,7 @@ export default class HelpUserSettingsTab extends React.Component {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
-    _onStartBotChat = (e) => {
+    private onStartBotChat = (e) => {
         this.props.closeSettingsFn();
         createRoom({
             dmUserId: SdkConfig.get().welcomeUserId,
@@ -81,7 +96,7 @@ export default class HelpUserSettingsTab extends React.Component {
         });
     };
 
-    _showSpoiler = (event) => {
+    private showSpoiler = (event) => {
         const target = event.target;
         target.innerHTML = target.getAttribute('data-spoiler');
 
@@ -93,7 +108,7 @@ export default class HelpUserSettingsTab extends React.Component {
         selection.addRange(range);
     };
 
-    _renderLegal() {
+    private renderLegal() {
         const tocLinks = SdkConfig.get().terms_and_conditions_links;
         if (!tocLinks) return null;
 
@@ -114,7 +129,7 @@ export default class HelpUserSettingsTab extends React.Component {
         );
     }
 
-    _renderCredits() {
+    private renderCredits() {
         // Note: This is not translated because it is legal text.
         // Also, &nbsp; is ugly but necessary.
         return (
@@ -122,34 +137,48 @@ export default class HelpUserSettingsTab extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Credits")}</span>
                 <ul>
                     <li>
-                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener" target="_blank">
-                        default cover photo</a> is ©&nbsp;
-                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener" target="_blank">Jesús Roncero</a>{' '}
-                        used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener" target="_blank">
-                        CC-BY-SA 4.0</a>.
+                        The <a href="themes/element/img/backgrounds/lake.jpg" rel="noreferrer noopener"
+                            target="_blank">default cover photo</a> is ©&nbsp;
+                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener"
+                            target="_blank">Jesús Roncero</a> used under the terms of&nbsp;
+                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener"
+                            target="_blank">CC-BY-SA 4.0</a>.
                     </li>
                     <li>
                         The <a href="https://github.com/matrix-org/twemoji-colr" rel="noreferrer noopener"
-                               target="_blank"> twemoji-colr</a> font is ©&nbsp;
-                        <a href="https://mozilla.org" rel="noreferrer noopener" target="_blank">Mozilla Foundation</a>{' '}
-                        used under the terms of&nbsp;
-                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">
-                        Apache 2.0</a>.
+                            target="_blank">twemoji-colr</a> font is ©&nbsp;
+                        <a href="https://mozilla.org" rel="noreferrer noopener"
+                            target="_blank">Mozilla Foundation</a> used under the terms of&nbsp;
+                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener"
+                            target="_blank">Apache 2.0</a>.
                     </li>
                     <li>
-                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">
-                        Twemoji</a> emoji art is ©&nbsp;
-                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">Twitter, Inc and other
-                        contributors</a> used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener" target="_blank">
-                        CC-BY 4.0</a>.
+                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
+                            target="_blank">Twemoji</a> emoji art is ©&nbsp;
+                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener"
+                            target="_blank">Twitter, Inc and other contributors</a> used under the terms of&nbsp;
+                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener"
+                            target="_blank">CC-BY 4.0</a>.
                     </li>
                 </ul>
             </div>
         );
     }
 
+    onAccessTokenCopyClick = async (e) => {
+        e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
+
+        const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
+        const buttonRect = target.getBoundingClientRect();
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+            ...toRightOf(buttonRect, 2),
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        });
+        this.closeCopiedTooltip = target.onmouseleave = close;
+    }
+
     render() {
         const brand = SdkConfig.get().brand;
 
@@ -188,7 +217,7 @@ export default class HelpUserSettingsTab extends React.Component {
                         },
                     )}
                     <div>
-                        <AccessibleButton onClick={this._onStartBotChat} kind='primary'>
+                        <AccessibleButton onClick={this.onStartBotChat} kind='primary'>
                             {_t("Chat with %(brand)s Bot", { brand })}
                         </AccessibleButton>
                     </div>
@@ -212,28 +241,27 @@ export default class HelpUserSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_section">
                     <span className='mx_SettingsTab_subheading'>{_t('Bug reporting')}</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        {
-                            _t( "If you've submitted a bug via GitHub, debug logs can help " +
-                                "us track down the problem. Debug logs contain application " +
-                                "usage data including your username, the IDs or aliases of " +
-                                "the rooms or groups you have visited and the usernames of " +
-                                "other users. They do not contain messages.",
-                            )
-                        }
+                        {_t(
+                            "If you've submitted a bug via GitHub, debug logs can help " +
+                            "us track down the problem. Debug logs contain application " +
+                            "usage data including your username, the IDs or aliases of " +
+                            "the rooms or groups you have visited and the usernames of " +
+                            "other users. They do not contain messages.",
+                        )}
                         <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onBugReport} kind='primary'>
+                            <AccessibleButton onClick={this.onBugReport} kind='primary'>
                                 {_t("Submit debug logs")}
                             </AccessibleButton>
                         </div>
-                        {
-                            _t( "To report a Matrix-related security issue, please read the Matrix.org " +
-                                "<a>Security Disclosure Policy</a>.", {},
-                                {
-                                    'a': (sub) =>
-                                        <a href="https://matrix.org/security-disclosure-policy/"
-                                           rel="noreferrer noopener" target="_blank">{sub}</a>,
-                                })
-                        }
+                        {_t(
+                            "To report a Matrix-related security issue, please read the Matrix.org " +
+                            "<a>Security Disclosure Policy</a>.", {},
+                            {
+                                a: sub => <a href="https://matrix.org/security-disclosure-policy/"
+                                    rel="noreferrer noopener" target="_blank"
+                                >{sub}</a>,
+                            },
+                        )}
                     </div>
                 </div>
             );
@@ -260,20 +288,29 @@ export default class HelpUserSettingsTab extends React.Component {
                         {updateButton}
                     </div>
                 </div>
-                {this._renderLegal()}
-                {this._renderCredits()}
+                {this.renderLegal()}
+                {this.renderCredits()}
                 <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
                     <span className='mx_SettingsTab_subheading'>{_t("Advanced")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
                         {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code><br />
                         {_t("Identity Server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code><br />
-                        {_t("Access Token:") + ' '}
-                        <AccessibleButton element="span" onClick={this._showSpoiler}
-                                          data-spoiler={MatrixClientPeg.get().getAccessToken()}>
-                            &lt;{ _t("click to reveal") }&gt;
-                        </AccessibleButton>
+                        <br />
+                        <details>
+                            <summary>{_t("Access Token")}</summary><br />
+                            <b>{_t("Your access token gives full access to your account."
+                               + " Do not share it with anyone." )}</b>
+                            <div className="mx_HelpUserSettingsTab_accessToken">
+                                <code>{MatrixClientPeg.get().getAccessToken()}</code>
+                                <AccessibleTooltipButton
+                                    title={_t("Copy")}
+                                    onClick={this.onAccessTokenCopyClick}
+                                    className="mx_HelpUserSettingsTab_accessToken_copy"
+                                />
+                            </div>
+                        </details><br />
                         <div className='mx_HelpUserSettingsTab_debugButton'>
-                            <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
+                            <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
                                 {_t("Clear cache and reload")}
                             </AccessibleButton>
                         </div>
diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
similarity index 90%
rename from src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
rename to src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
index 91f6728a7a..6997defea9 100644
--- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -25,10 +25,16 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
 import {replaceableComponent} from "../../../../../utils/replaceableComponent";
 
+interface IState {
+    busy: boolean;
+    newPersonalRule: string;
+    newList: string;
+}
+
 @replaceableComponent("views.settings.tabs.user.MjolnirUserSettingsTab")
-export default class MjolnirUserSettingsTab extends React.Component {
-    constructor() {
-        super();
+export default class MjolnirUserSettingsTab extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
 
         this.state = {
             busy: false,
@@ -37,15 +43,15 @@ export default class MjolnirUserSettingsTab extends React.Component {
         };
     }
 
-    _onPersonalRuleChanged = (e) => {
+    private onPersonalRuleChanged = (e) => {
         this.setState({newPersonalRule: e.target.value});
     };
 
-    _onNewListChanged = (e) => {
+    private onNewListChanged = (e) => {
         this.setState({newList: e.target.value});
     };
 
-    _onAddPersonalRule = async (e) => {
+    private onAddPersonalRule = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -72,7 +78,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    _onSubscribeList = async (e) => {
+    private onSubscribeList = async (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -94,7 +100,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     };
 
-    async _removePersonalRule(rule: ListRule) {
+    private async removePersonalRule(rule: ListRule) {
         this.setState({busy: true});
         try {
             const list = Mjolnir.sharedInstance().getPersonalList();
@@ -112,7 +118,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    async _unsubscribeFromList(list: BanList) {
+    private async unsubscribeFromList(list: BanList) {
         this.setState({busy: true});
         try {
             await Mjolnir.sharedInstance().unsubscribeFromList(list.roomId);
@@ -130,7 +136,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         }
     }
 
-    _viewListRules(list: BanList) {
+    private viewListRules(list: BanList) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         const room = MatrixClientPeg.get().getRoom(list.roomId);
@@ -161,7 +167,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         });
     }
 
-    _renderPersonalBanListRules() {
+    private renderPersonalBanListRules() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const list = Mjolnir.sharedInstance().getPersonalList();
@@ -174,7 +180,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 <li key={rule.entity} className="mx_MjolnirUserSettingsTab_listItem">
                     <AccessibleButton
                         kind="danger_sm"
-                        onClick={() => this._removePersonalRule(rule)}
+                        onClick={() => this.removePersonalRule(rule)}
                         disabled={this.state.busy}
                     >
                         {_t("Remove")}
@@ -192,7 +198,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
         );
     }
 
-    _renderSubscribedBanLists() {
+    private renderSubscribedBanLists() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const personalList = Mjolnir.sharedInstance().getPersonalList();
@@ -209,14 +215,14 @@ export default class MjolnirUserSettingsTab extends React.Component {
                 <li key={list.roomId} className="mx_MjolnirUserSettingsTab_listItem">
                     <AccessibleButton
                         kind="danger_sm"
-                        onClick={() => this._unsubscribeFromList(list)}
+                        onClick={() => this.unsubscribeFromList(list)}
                         disabled={this.state.busy}
                     >
                         {_t("Unsubscribe")}
                     </AccessibleButton>&nbsp;
                     <AccessibleButton
                         kind="primary_sm"
-                        onClick={() => this._viewListRules(list)}
+                        onClick={() => this.viewListRules(list)}
                         disabled={this.state.busy}
                     >
                         {_t("View rules")}
@@ -271,21 +277,21 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}
                     </div>
                     <div>
-                        {this._renderPersonalBanListRules()}
+                        {this.renderPersonalBanListRules()}
                     </div>
                     <div>
-                        <form onSubmit={this._onAddPersonalRule} autoComplete="off">
+                        <form onSubmit={this.onAddPersonalRule} autoComplete="off">
                             <Field
                                 type="text"
                                 label={_t("Server or user ID to ignore")}
                                 placeholder={_t("eg: @bot:* or example.org")}
                                 value={this.state.newPersonalRule}
-                                onChange={this._onPersonalRuleChanged}
+                                onChange={this.onPersonalRuleChanged}
                             />
                             <AccessibleButton
                                 type="submit"
                                 kind="primary"
-                                onClick={this._onAddPersonalRule}
+                                onClick={this.onAddPersonalRule}
                                 disabled={this.state.busy}
                             >
                                 {_t("Ignore")}
@@ -303,20 +309,20 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         )}</span>
                     </div>
                     <div>
-                        {this._renderSubscribedBanLists()}
+                        {this.renderSubscribedBanLists()}
                     </div>
                     <div>
-                        <form onSubmit={this._onSubscribeList} autoComplete="off">
+                        <form onSubmit={this.onSubscribeList} autoComplete="off">
                             <Field
                                 type="text"
                                 label={_t("Room ID or address of ban list")}
                                 value={this.state.newList}
-                                onChange={this._onNewListChanged}
+                                onChange={this.onNewListChanged}
                             />
                             <AccessibleButton
                                 type="submit"
                                 kind="primary"
-                                onClick={this._onSubscribeList}
+                                onClick={this.onSubscribeList}
                                 disabled={this.state.busy}
                             >
                                 {_t("Subscribe")}
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
similarity index 80%
rename from src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
rename to src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 0cd3dd6698..f02c5c9ce0 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,10 +23,24 @@ import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IState {
+    autoLaunch: boolean;
+    autoLaunchSupported: boolean;
+    warnBeforeExit: boolean;
+    warnBeforeExitSupported: boolean;
+    alwaysShowMenuBarSupported: boolean;
+    alwaysShowMenuBar: boolean;
+    minimizeToTraySupported: boolean;
+    minimizeToTray: boolean;
+    autocompleteDelay: string;
+    readMarkerInViewThresholdMs: string;
+    readMarkerOutOfViewThresholdMs: string;
+}
 
 @replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component {
+export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
     static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
     ];
@@ -68,8 +82,8 @@ export default class PreferencesUserSettingsTab extends React.Component {
         // Autocomplete delay (niche text box)
     ];
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             autoLaunch: false,
@@ -89,7 +103,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         };
     }
 
-    async componentDidMount(): void {
+    async componentDidMount() {
         const platform = PlatformPeg.get();
 
         const autoLaunchSupported = await platform.supportsAutoLaunch();
@@ -128,38 +142,38 @@ export default class PreferencesUserSettingsTab extends React.Component {
         });
     }
 
-    _onAutoLaunchChange = (checked) => {
+    private onAutoLaunchChange = (checked: boolean) => {
         PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
     };
 
-    _onWarnBeforeExitChange = (checked) => {
+    private onWarnBeforeExitChange = (checked: boolean) => {
         PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
     }
 
-    _onAlwaysShowMenuBarChange = (checked) => {
+    private onAlwaysShowMenuBarChange = (checked: boolean) => {
         PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
     };
 
-    _onMinimizeToTrayChange = (checked) => {
+    private onMinimizeToTrayChange = (checked: boolean) => {
         PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
     };
 
-    _onAutocompleteDelayChange = (e) => {
+    private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({autocompleteDelay: e.target.value});
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerInViewThresholdMs = (e) => {
+    private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({readMarkerInViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _onReadMarkerOutOfViewThresholdMs = (e) => {
+    private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    _renderGroup(settingIds) {
+    private renderGroup(settingIds: string[]): React.ReactNodeArray {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return settingIds.filter(SettingsStore.isEnabled).map(i => {
             return <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />;
@@ -171,7 +185,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.autoLaunchSupported) {
             autoLaunchOption = <LabelledToggleSwitch
                 value={this.state.autoLaunch}
-                onChange={this._onAutoLaunchChange}
+                onChange={this.onAutoLaunchChange}
                 label={_t('Start automatically after system login')} />;
         }
 
@@ -179,7 +193,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.warnBeforeExitSupported) {
             warnBeforeExitOption = <LabelledToggleSwitch
                 value={this.state.warnBeforeExit}
-                onChange={this._onWarnBeforeExitChange}
+                onChange={this.onWarnBeforeExitChange}
                 label={_t('Warn before quitting')} />;
         }
 
@@ -187,7 +201,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.alwaysShowMenuBarSupported) {
             autoHideMenuOption = <LabelledToggleSwitch
                 value={this.state.alwaysShowMenuBar}
-                onChange={this._onAlwaysShowMenuBarChange}
+                onChange={this.onAlwaysShowMenuBarChange}
                 label={_t('Always show the window menu bar')} />;
         }
 
@@ -195,7 +209,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         if (this.state.minimizeToTraySupported) {
             minimizeToTrayOption = <LabelledToggleSwitch
                 value={this.state.minimizeToTray}
-                onChange={this._onMinimizeToTrayChange}
+                onChange={this.onMinimizeToTrayChange}
                 label={_t('Show tray icon and minimize window to it on close')} />;
         }
 
@@ -205,22 +219,22 @@ export default class PreferencesUserSettingsTab extends React.Component {
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
                 </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("General")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
+                    {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
                     {minimizeToTrayOption}
                     {autoHideMenuOption}
                     {autoLaunchOption}
@@ -229,17 +243,17 @@ export default class PreferencesUserSettingsTab extends React.Component {
                         label={_t('Autocomplete delay (ms)')}
                         type='number'
                         value={this.state.autocompleteDelay}
-                        onChange={this._onAutocompleteDelayChange} />
+                        onChange={this.onAutocompleteDelayChange} />
                     <Field
                         label={_t('Read Marker lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerInViewThresholdMs}
-                        onChange={this._onReadMarkerInViewThresholdMs} />
+                        onChange={this.onReadMarkerInViewThresholdMs} />
                     <Field
                         label={_t('Read Marker off-screen lifetime (ms)')}
                         type='number'
                         value={this.state.readMarkerOutOfViewThresholdMs}
-                        onChange={this._onReadMarkerOutOfViewThresholdMs} />
+                        onChange={this.onReadMarkerOutOfViewThresholdMs} />
                 </div>
             </div>
         );
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
index 8a70811399..53ed511b0a 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@@ -255,15 +255,18 @@ export default class SecurityUserSettingsTab extends React.Component {
     _renderIgnoredUsers() {
         const {waitingUnignored, ignoredUserIds} = this.state;
 
-        if (!ignoredUserIds || ignoredUserIds.length === 0) return null;
-
-        const userIds = ignoredUserIds
-            .map((u) => <IgnoredUser
-             userId={u}
-             onUnignored={this._onUserUnignored}
-             key={u}
-             inProgress={waitingUnignored.includes(u)}
-             />);
+        const userIds = !ignoredUserIds?.length
+            ? _t('You have no ignored users.')
+            : ignoredUserIds.map((u) => {
+                return (
+                    <IgnoredUser
+                        userId={u}
+                        onUnignored={this._onUserUnignored}
+                        key={u}
+                        inProgress={waitingUnignored.includes(u)}
+                    />
+                );
+            });
 
         return (
             <div className='mx_SettingsTab_section'>
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index d8adab55f6..362059f8ed 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -176,8 +176,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioOutputs);
                 speakerDropdown = (
                     <Field element="select" label={_t("Audio Output")}
-                           value={this.state.activeAudioOutput || defaultDevice}
-                           onChange={this._setAudioOutput}>
+                        value={this.state.activeAudioOutput || defaultDevice}
+                        onChange={this._setAudioOutput}>
                         {this._renderDeviceOptions(audioOutputs, 'audioOutput')}
                     </Field>
                 );
@@ -188,8 +188,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(audioInputs);
                 microphoneDropdown = (
                     <Field element="select" label={_t("Microphone")}
-                           value={this.state.activeAudioInput || defaultDevice}
-                           onChange={this._setAudioInput}>
+                        value={this.state.activeAudioInput || defaultDevice}
+                        onChange={this._setAudioInput}>
                         {this._renderDeviceOptions(audioInputs, 'audioInput')}
                     </Field>
                 );
@@ -200,8 +200,8 @@ export default class VoiceUserSettingsTab extends React.Component {
                 const defaultDevice = getDefaultDevice(videoInputs);
                 webcamDropdown = (
                     <Field element="select" label={_t("Camera")}
-                           value={this.state.activeVideoInput || defaultDevice}
-                           onChange={this._setVideoInput}>
+                        value={this.state.activeVideoInput || defaultDevice}
+                        onChange={this._setVideoInput}>
                         {this._renderDeviceOptions(videoInputs, 'videoInput')}
                     </Field>
                 );
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 6825d84013..e48e1d5dc2 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -297,15 +297,19 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const isActive = activeSpaces.includes(space);
         const itemClasses = classNames({
             "mx_SpaceItem": true,
+            "mx_SpaceItem_narrow": isNarrow,
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });
+
+        const isInvite = space.getMyMembership() === "invite";
         const classes = classNames("mx_SpaceButton", {
             mx_SpaceButton_active: isActive,
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
             mx_SpaceButton_narrow: isNarrow,
+            mx_SpaceButton_invite: isInvite,
         });
-        const notificationState = space.getMyMembership() === "invite"
+        const notificationState = isInvite
             ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
             : SpaceStore.instance.getNotificationState(space.roomId);
 
diff --git a/src/components/views/verification/VerificationCancelled.js b/src/components/views/verification/VerificationCancelled.js
index 0bbaea1804..c57094d9b5 100644
--- a/src/components/views/verification/VerificationCancelled.js
+++ b/src/components/views/verification/VerificationCancelled.js
@@ -29,14 +29,14 @@ export default class VerificationCancelled extends React.Component {
     render() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-                <p>{_t(
-                    "The other party cancelled the verification.",
-                )}</p>
-                <DialogButtons
-                    primaryButton={_t('OK')}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this.props.onDone}
-                />
+            <p>{_t(
+                "The other party cancelled the verification.",
+            )}</p>
+            <DialogButtons
+                primaryButton={_t('OK')}
+                hasCancel={false}
+                onPrimaryButtonClick={this.props.onDone}
+            />
         </div>;
     }
 }
diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/voice_messages/Clock.tsx
index 6c256957e9..23e6762c52 100644
--- a/src/components/views/voice_messages/Clock.tsx
+++ b/src/components/views/voice_messages/Clock.tsx
@@ -29,14 +29,20 @@ interface IState {
  * displayed, making it possible to see "82:29".
  */
 @replaceableComponent("views.voice_messages.Clock")
-export default class Clock extends React.PureComponent<IProps, IState> {
+export default class Clock extends React.Component<IProps, IState> {
     public constructor(props) {
         super(props);
     }
 
+    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
+        const currentFloor = Math.floor(this.props.seconds);
+        const nextFloor = Math.floor(nextProps.seconds);
+        return currentFloor !== nextFloor;
+    }
+
     public render() {
         const minutes = Math.floor(this.props.seconds / 60).toFixed(0).padStart(2, '0');
-        const seconds = Math.round(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
+        const seconds = Math.floor(this.props.seconds % 60).toFixed(0).padStart(2, '0'); // hide millis
         return <span className='mx_Clock'>{minutes}:{seconds}</span>;
     }
 }
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
index 5e9006c6ab..b82539eb16 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -31,7 +31,7 @@ interface IState {
  * A clock for a live recording.
  */
 @replaceableComponent("views.voice_messages.LiveRecordingClock")
-export default class LiveRecordingClock extends React.Component<IProps, IState> {
+export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
 
@@ -39,12 +39,6 @@ export default class LiveRecordingClock extends React.Component<IProps, IState>
         this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
     }
 
-    shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
-        const currentFloor = Math.floor(this.state.seconds);
-        const nextFloor = Math.floor(nextState.seconds);
-        return currentFloor !== nextFloor;
-    }
-
     private onRecordingUpdate = (update: IRecordingUpdate) => {
         this.setState({seconds: update.timeSeconds});
     };
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index c1f5e97fff..aab89f6ab1 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
+import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {arrayFastResample, arraySeed} from "../../../utils/arrays";
 import {percentageOf} from "../../../utils/numbers";
@@ -29,8 +29,6 @@ interface IState {
     heights: number[];
 }
 
-const DOWNSAMPLE_TARGET = 35; // number of bars we want
-
 /**
  * A waveform which shows the waveform of a live recording
  */
@@ -39,14 +37,14 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
     public constructor(props) {
         super(props);
 
-        this.state = {heights: arraySeed(0, DOWNSAMPLE_TARGET)};
+        this.state = {heights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES)};
         this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
     }
 
     private onRecordingUpdate = (update: IRecordingUpdate) => {
         // The waveform and the downsample target are pretty close, so we should be fine to
         // do this, despite the docs on arrayFastResample.
-        const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
+        const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
         this.setState({
             // The incoming data is between zero and one, but typically even screaming into a
             // microphone won't send you over 0.6, so we artificially adjust the gain for the
diff --git a/src/components/views/voice_messages/PlayPauseButton.tsx b/src/components/views/voice_messages/PlayPauseButton.tsx
new file mode 100644
index 0000000000..1f87eb012d
--- /dev/null
+++ b/src/components/views/voice_messages/PlayPauseButton.tsx
@@ -0,0 +1,61 @@
+/*
+Copyright 2021 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 React, {ReactNode} from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {_t} from "../../../languageHandler";
+import {Playback, PlaybackState} from "../../../voice/Playback";
+import classNames from "classnames";
+
+interface IProps {
+    // Playback instance to manipulate. Cannot change during the component lifecycle.
+    playback: Playback;
+
+    // The playback phase to render. Able to change during the component lifecycle.
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * Displays a play/pause button (activating the play/pause function of the recorder)
+ * to be displayed in reference to a recording.
+ */
+@replaceableComponent("views.voice_messages.PlayPauseButton")
+export default class PlayPauseButton extends React.PureComponent<IProps> {
+    public constructor(props) {
+        super(props);
+    }
+
+    private onClick = async () => {
+        await this.props.playback.toggle();
+    };
+
+    public render(): ReactNode {
+        const isPlaying = this.props.playback.isPlaying;
+        const isDisabled = this.props.playbackPhase === PlaybackState.Decoding;
+        const classes = classNames('mx_PlayPauseButton', {
+            'mx_PlayPauseButton_play': !isPlaying,
+            'mx_PlayPauseButton_pause': isPlaying,
+            'mx_PlayPauseButton_disabled': isDisabled,
+        });
+        return <AccessibleTooltipButton
+            className={classes}
+            title={isPlaying ? _t("Pause") : _t("Play")}
+            onClick={this.onClick}
+            disabled={isDisabled}
+        />;
+    }
+}
diff --git a/src/components/views/voice_messages/PlaybackClock.tsx b/src/components/views/voice_messages/PlaybackClock.tsx
new file mode 100644
index 0000000000..2e8ec9a3e7
--- /dev/null
+++ b/src/components/views/voice_messages/PlaybackClock.tsx
@@ -0,0 +1,71 @@
+/*
+Copyright 2021 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 React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import {Playback, PlaybackState} from "../../../voice/Playback";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    seconds: number;
+    durationSeconds: number;
+    playbackPhase: PlaybackState;
+}
+
+/**
+ * A clock for a playback of a recording.
+ */
+@replaceableComponent("views.voice_messages.PlaybackClock")
+export default class PlaybackClock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            seconds: this.props.playback.clockInfo.timeSeconds,
+            // we track the duration on state because we won't really know what the clip duration
+            // is until the first time update, and as a PureComponent we are trying to dedupe state
+            // updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
+            // member property to track "did we get a duration".
+            durationSeconds: this.props.playback.clockInfo.durationSeconds,
+            playbackPhase: PlaybackState.Stopped, // assume not started, so full clock
+        };
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        // Convert Decoding -> Stopped because we don't care about the distinction here
+        if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
+        this.setState({playbackPhase: ev});
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        this.setState({seconds: time[0], durationSeconds: time[1]});
+    };
+
+    public render() {
+        let seconds = this.state.seconds;
+        if (this.state.playbackPhase === PlaybackState.Stopped) {
+            seconds = this.state.durationSeconds;
+        }
+        return <Clock seconds={seconds} />;
+    }
+}
diff --git a/src/components/views/voice_messages/PlaybackWaveform.tsx b/src/components/views/voice_messages/PlaybackWaveform.tsx
new file mode 100644
index 0000000000..123af5dfa5
--- /dev/null
+++ b/src/components/views/voice_messages/PlaybackWaveform.tsx
@@ -0,0 +1,68 @@
+/*
+Copyright 2021 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 React from "react";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
+import Waveform from "./Waveform";
+import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
+import {percentageOf} from "../../../utils/numbers";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    heights: number[];
+    progress: number;
+}
+
+/**
+ * A waveform which shows the waveform of a previously recorded recording
+ */
+@replaceableComponent("views.voice_messages.PlaybackWaveform")
+export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            heights: this.toHeights(this.props.playback.waveform),
+            progress: 0, // default no progress
+        };
+
+        this.props.playback.waveformData.onUpdate(this.onWaveformUpdate);
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private toHeights(waveform: number[]) {
+        const seed = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
+        return arrayTrimFill(waveform, PLAYBACK_WAVEFORM_SAMPLES, seed);
+    }
+
+    private onWaveformUpdate = (waveform: number[]) => {
+        this.setState({heights: this.toHeights(waveform)});
+    };
+
+    private onTimeUpdate = (time: number[]) => {
+        // Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
+        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
+        this.setState({progress});
+    };
+
+    public render() {
+        return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
+    }
+}
diff --git a/src/components/views/voice_messages/RecordingPlayback.tsx b/src/components/views/voice_messages/RecordingPlayback.tsx
new file mode 100644
index 0000000000..776997cec2
--- /dev/null
+++ b/src/components/views/voice_messages/RecordingPlayback.tsx
@@ -0,0 +1,62 @@
+/*
+Copyright 2021 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 {Playback, PlaybackState} from "../../../voice/Playback";
+import React, {ReactNode} from "react";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import PlaybackWaveform from "./PlaybackWaveform";
+import PlayPauseButton from "./PlayPauseButton";
+import PlaybackClock from "./PlaybackClock";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+}
+
+interface IState {
+    playbackPhase: PlaybackState;
+}
+
+export default class RecordingPlayback extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            playbackPhase: PlaybackState.Decoding, // default assumption
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+
+        // Don't wait for the promise to complete - it will emit a progress update when it
+        // is done, and it's not meant to take long anyhow.
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.prepare();
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        this.setState({playbackPhase: ev});
+    };
+
+    public render(): ReactNode {
+        return <div className='mx_VoiceMessagePrimaryContainer'>
+            <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
+            <PlaybackClock playback={this.props.playback} />
+            <PlaybackWaveform playback={this.props.playback} />
+        </div>
+    }
+}
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx
index 5fa68dcadc..840a5a12b3 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/voice_messages/Waveform.tsx
@@ -16,9 +16,11 @@ limitations under the License.
 
 import React from "react";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import classNames from "classnames";
 
 interface IProps {
     relHeights: number[]; // relative heights (0-1)
+    progress: number; // percent complete, 0-1, default 100%
 }
 
 interface IState {
@@ -28,9 +30,16 @@ interface IState {
  * A simple waveform component. This renders bars (centered vertically) for each
  * height provided in the component properties. Updating the properties will update
  * the rendered waveform.
+ *
+ * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
+ * "filled", as a demonstration of the progress property.
  */
 @replaceableComponent("views.voice_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
+    public static defaultProps = {
+        progress: 1,
+    };
+
     public constructor(props) {
         super(props);
     }
@@ -38,7 +47,13 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className='mx_Waveform'>
             {this.props.relHeights.map((h, i) => {
-                return <span key={i} style={{height: (h * 100) + '%'}} className='mx_Waveform_bar' />;
+                const progress = this.props.progress;
+                const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
+                const classes = classNames({
+                    'mx_Waveform_bar': true,
+                    'mx_Waveform_bar_100pct': isCompleteBar,
+                });
+                return <span key={i} style={{height: (h * 100) + '%'}} className={classes} />;
             })}
         </div>;
     }
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
new file mode 100644
index 0000000000..c78f0c0fc8
--- /dev/null
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -0,0 +1,97 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 React, {createRef} from 'react';
+import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
+import { logger } from 'matrix-js-sdk/src/logger';
+import CallMediaHandler from "../../../CallMediaHandler";
+
+interface IProps {
+    feed: CallFeed,
+}
+
+export default class AudioFeed extends React.Component<IProps> {
+    private element = createRef<HTMLAudioElement>();
+
+    componentDidMount() {
+        this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.playMedia();
+    }
+
+    componentWillUnmount() {
+        this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.stopMedia();
+    }
+
+    private playMedia() {
+        const element = this.element.current;
+        const audioOutput = CallMediaHandler.getAudioOutput();
+
+        if (audioOutput) {
+            try {
+                // This seems quite unreliable in Chrome, although I haven't yet managed to make a jsfiddle where
+                // it fails.
+                // It seems reliable if you set the sink ID after setting the srcObject and then set the sink ID
+                // back to the default after the call is over - Dave
+                element.setSinkId(audioOutput);
+            } catch (e) {
+                console.error("Couldn't set requested audio output device: using default", e);
+                logger.warn("Couldn't set requested audio output device: using default", e);
+            }
+        }
+
+        element.muted = false;
+        element.srcObject = this.props.feed.stream;
+        element.autoplay = true;
+
+        try {
+            // A note on calling methods on media elements:
+            // We used to have queues per media element to serialise all calls on those elements.
+            // The reason given for this was that load() and play() were racing. However, we now
+            // never call load() explicitly so this seems unnecessary. However, serialising every
+            // operation was causing bugs where video would not resume because some play command
+            // had got stuck and all media operations were queued up behind it. If necessary, we
+            // should serialise the ones that need to be serialised but then be able to interrupt
+            // them with another load() which will cancel the pending one, but since we don't call
+            // load() explicitly, it shouldn't be a problem. - Dave
+            element.play()
+        } catch (e) {
+            logger.info("Failed to play media element with feed", this.props.feed, e);
+        }
+    }
+
+    private stopMedia() {
+        const element = this.element.current;
+
+        element.pause();
+        element.src = null;
+
+        // As per comment in componentDidMount, setting the sink ID back to the
+        // default once the call is over makes setSinkId work reliably. - Dave
+        // Since we are not using the same element anymore, the above doesn't
+        // seem to be necessary - Šimon
+    }
+
+    private onNewStream = () => {
+        this.playMedia();
+    };
+
+    render() {
+        return (
+            <audio ref={this.element} />
+        );
+    }
+}
diff --git a/src/components/views/voip/AudioFeedArrayForCall.tsx b/src/components/views/voip/AudioFeedArrayForCall.tsx
new file mode 100644
index 0000000000..bfe232d799
--- /dev/null
+++ b/src/components/views/voip/AudioFeedArrayForCall.tsx
@@ -0,0 +1,60 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 React from "react";
+import AudioFeed from "./AudioFeed"
+import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+
+interface IProps {
+    call: MatrixCall;
+}
+
+interface IState {
+    feeds: Array<CallFeed>;
+}
+
+export default class AudioFeedArrayForCall extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            feeds: [],
+        };
+    }
+
+    componentDidMount() {
+        this.props.call.addListener(CallEvent.FeedsChanged, this.onFeedsChanged);
+    }
+
+    componentWillUnmount() {
+        this.props.call.removeListener(CallEvent.FeedsChanged, this.onFeedsChanged);
+    }
+
+    onFeedsChanged = () => {
+        this.setState({
+            feeds: this.props.call.getRemoteFeeds(),
+        });
+    }
+
+    render() {
+        return this.state.feeds.map((feed, i) => {
+            return (
+                <AudioFeed feed={feed} key={i} />
+            );
+        });
+    }
+}
diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 29de068b0c..80fd64a820 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 
 import CallView from "./CallView";
 import RoomViewStore from '../../../stores/RoomViewStore';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import PersistentApp from "../elements/PersistentApp";
@@ -109,12 +109,14 @@ export default class CallPreview extends React.Component<IProps, IState> {
     }
 
     public componentDidMount() {
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
     }
 
     public componentWillUnmount() {
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCalls);
         MatrixClientPeg.get().removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
         if (this.roomStoreToken) {
             this.roomStoreToken.remove();
@@ -143,19 +145,23 @@ export default class CallPreview extends React.Component<IProps, IState> {
             // listen for call state changes to prod the render method, which
             // may hide the global CallView if the call it is tracking is dead
             case 'call_state': {
-                const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
-                    CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
-                );
-
-                this.setState({
-                    primaryCall: primaryCall,
-                    secondaryCall: secondaryCalls[0],
-                });
+                this.updateCalls();
                 break;
             }
         }
     };
 
+    private updateCalls = () => {
+        const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
+            CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
+        );
+
+        this.setState({
+            primaryCall: primaryCall,
+            secondaryCall: secondaryCalls[0],
+        });
+    };
+
     private onCallRemoteHold = () => {
         const [primaryCall, secondaryCalls] = getPrimarySecondaryCalls(
             CallHandler.sharedInstance().getAllActiveCallsNotInRoom(this.state.roomId),
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 8a6ed75fee..c084dacaa8 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -20,10 +20,9 @@ import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t, _td } from '../../../languageHandler';
-import VideoFeed, { VideoFeedType } from "./VideoFeed";
+import VideoFeed from './VideoFeed';
 import RoomAvatar from "../avatars/RoomAvatar";
-import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import { CallEvent } from 'matrix-js-sdk/src/webrtc/call';
+import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
 import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
@@ -31,6 +30,7 @@ import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} f
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
+import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
@@ -40,11 +40,11 @@ interface IProps {
         // Another ongoing call to display information about
         secondaryCall?: MatrixCall,
 
-        // a callback which is called when the content in the callview changes
+        // a callback which is called when the content in the CallView changes
         // in a way that is likely to cause a resize.
         onResize?: any;
 
-        // Whether this call view is for picture-in-pictue mode
+        // Whether this call view is for picture-in-picture mode
         // otherwise, it's the larger call view when viewing the room the call is in.
         // This is sort of a proxy for a number of things but we currently have no
         // need to control those things separately, so this is simpler.
@@ -60,6 +60,7 @@ interface IState {
     controlsVisible: boolean,
     showMoreMenu: boolean,
     showDialpad: boolean,
+    feeds: CallFeed[],
 }
 
 function getFullScreenElement() {
@@ -115,6 +116,7 @@ export default class CallView extends React.Component<IProps, IState> {
             controlsVisible: true,
             showMoreMenu: false,
             showDialpad: false,
+            feeds: this.props.call.getFeeds(),
         }
 
         this.updateCallListeners(null, this.props.call);
@@ -172,11 +174,13 @@ export default class CallView extends React.Component<IProps, IState> {
             oldCall.removeListener(CallEvent.State, this.onCallState);
             oldCall.removeListener(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
             oldCall.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
+            oldCall.removeListener(CallEvent.FeedsChanged, this.onFeedsChanged);
         }
         if (newCall) {
             newCall.on(CallEvent.State, this.onCallState);
             newCall.on(CallEvent.LocalHoldUnhold, this.onCallLocalHoldUnhold);
             newCall.on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHoldUnhold);
+            newCall.on(CallEvent.FeedsChanged, this.onFeedsChanged);
         }
     }
 
@@ -186,6 +190,10 @@ export default class CallView extends React.Component<IProps, IState> {
         });
     };
 
+    private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
+        this.setState({feeds: newFeeds});
+    };
+
     private onCallLocalHoldUnhold = () => {
         this.setState({
             isLocalOnHold: this.props.call.isLocalOnHold(),
@@ -208,7 +216,7 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onExpandClick = () => {
-        const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
+        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
         dis.dispatch({
             action: 'view_room',
             room_id: userFacingRoomId,
@@ -304,7 +312,7 @@ export default class CallView extends React.Component<IProps, IState> {
     }
 
     // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
-    // Note that this assumes we always have a callview on screen at any given time
+    // Note that this assumes we always have a CallView on screen at any given time
     // CallHandler would probably be a better place for this
     private onNativeKeyDown = ev => {
         let handled = false;
@@ -337,7 +345,7 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onRoomAvatarClick = () => {
-        const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
+        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
         dis.dispatch({
             action: 'view_room',
             room_id: userFacingRoomId,
@@ -345,7 +353,7 @@ export default class CallView extends React.Component<IProps, IState> {
     }
 
     private onSecondaryRoomAvatarClick = () => {
-        const userFacingRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
+        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
 
         dis.dispatch({
             action: 'view_room',
@@ -354,7 +362,7 @@ export default class CallView extends React.Component<IProps, IState> {
     }
 
     private onCallResumeClick = () => {
-        const userFacingRoomId = CallHandler.roomIdForCall(this.props.call);
+        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
         CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
     }
 
@@ -365,8 +373,8 @@ export default class CallView extends React.Component<IProps, IState> {
 
     public render() {
         const client = MatrixClientPeg.get();
-        const callRoomId = CallHandler.roomIdForCall(this.props.call);
-        const secondaryCallRoomId = CallHandler.roomIdForCall(this.props.secondaryCall);
+        const callRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
+        const secondaryCallRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
         const callRoom = client.getRoom(callRoomId);
         const secCallRoom = this.props.secondaryCall ? client.getRoom(secondaryCallRoomId) : null;
 
@@ -474,6 +482,8 @@ export default class CallView extends React.Component<IProps, IState> {
             {contextMenuButton}
         </div>;
 
+        const avatarSize = this.props.pipMode ? 76 : 160;
+
         // The 'content' for the call, ie. the videos for a video call and profile picture
         // for voice calls (fills the bg)
         let contentView: React.ReactNode;
@@ -482,11 +492,13 @@ export default class CallView extends React.Component<IProps, IState> {
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
         let holdTransferContent;
         if (transfereeCall) {
-            const transferTargetRoom = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.props.call));
+            const transferTargetRoom = MatrixClientPeg.get().getRoom(
+                CallHandler.sharedInstance().roomIdForCall(this.props.call),
+            );
             const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("unknown person");
 
             const transfereeRoom = MatrixClientPeg.get().getRoom(
-                CallHandler.roomIdForCall(transfereeCall),
+                CallHandler.sharedInstance().roomIdForCall(transfereeCall),
             );
             const transfereeName = transfereeRoom ? transfereeRoom.name : _t("unknown person");
 
@@ -522,41 +534,85 @@ export default class CallView extends React.Component<IProps, IState> {
             </div>;
         }
 
-        if (this.props.call.type === CallType.Video) {
-            let localVideoFeed = null;
-            let onHoldBackground = null;
-            const backgroundStyle: CSSProperties = {};
-            const containerClasses = classNames({
-                mx_CallView_video: true,
-                mx_CallView_video_hold: isOnHold,
-            });
-            if (isOnHold) {
+        // This is a bit messy. I can't see a reason to have two onHold/transfer screens
+        if (isOnHold || transfereeCall) {
+            if (this.props.call.type === CallType.Video) {
+                const containerClasses = classNames({
+                    mx_CallView_content: true,
+                    mx_CallView_video: true,
+                    mx_CallView_video_hold: isOnHold,
+                });
+                let onHoldBackground = null;
+                const backgroundStyle: CSSProperties = {};
                 const backgroundAvatarUrl = avatarUrlForMember(
-                    // is it worth getting the size of the div to pass here?
+                // is it worth getting the size of the div to pass here?
                     this.props.call.getOpponentMember(), 1024, 1024, 'crop',
                 );
                 backgroundStyle.backgroundImage = 'url(' + backgroundAvatarUrl + ')';
                 onHoldBackground = <div className="mx_CallView_video_holdBackground" style={backgroundStyle} />;
-            }
-            if (!this.state.vidMuted) {
-                localVideoFeed = <VideoFeed type={VideoFeedType.Local} call={this.props.call} />;
-            }
 
-            contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
-                {onHoldBackground}
-                <VideoFeed type={VideoFeedType.Remote} call={this.props.call} onResize={this.props.onResize} />
-                {localVideoFeed}
-                {holdTransferContent}
-                {callControls}
-            </div>;
-        } else {
-            const avatarSize = this.props.pipMode ? 76 : 160;
+                contentView = (
+                    <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
+                        {onHoldBackground}
+                        {holdTransferContent}
+                        {callControls}
+                    </div>
+                );
+            } else {
+                const classes = classNames({
+                    mx_CallView_content: true,
+                    mx_CallView_voice: true,
+                    mx_CallView_voice_hold: isOnHold,
+                });
+
+                contentView =(
+                    <div className={classes} onMouseMove={this.onMouseMove}>
+                        <div className="mx_CallView_voice_avatarsContainer">
+                            <div
+                                className="mx_CallView_voice_avatarContainer"
+                                style={{width: avatarSize, height: avatarSize}}
+                            >
+                                <RoomAvatar
+                                    room={callRoom}
+                                    height={avatarSize}
+                                    width={avatarSize}
+                                />
+                            </div>
+                        </div>
+                        {holdTransferContent}
+                        {callControls}
+                    </div>
+                );
+            }
+        } else if (this.props.call.noIncomingFeeds()) {
+            // Here we're reusing the css classes from voice on hold, because
+            // I am lazy. If this gets merged, the CallView might be subject
+            // to change anyway - I might take an axe to this file in order to
+            // try to get other things working
             const classes = classNames({
+                mx_CallView_content: true,
                 mx_CallView_voice: true,
-                mx_CallView_voice_hold: isOnHold,
             });
 
+            const feeds = this.props.call.getLocalFeeds().map((feed, i) => {
+                // Here we check to hide local audio feeds to achieve the same UI/UX
+                // as before. But once again this might be subject to change
+                if (feed.isVideoMuted()) return;
+                return (
+                    <VideoFeed
+                        key={i}
+                        feed={feed}
+                        call={this.props.call}
+                        pipMode={this.props.pipMode}
+                        onResize={this.props.onResize}
+                    />
+                );
+            });
+
+            // Saying "Connecting" here isn't really true, but the best thing
+            // I can come up with, but this might be subject to change as well
             contentView = <div className={classes} onMouseMove={this.onMouseMove}>
+                {feeds}
                 <div className="mx_CallView_voice_avatarsContainer">
                     <div className="mx_CallView_voice_avatarContainer" style={{width: avatarSize, height: avatarSize}}>
                         <RoomAvatar
@@ -566,7 +622,35 @@ export default class CallView extends React.Component<IProps, IState> {
                         />
                     </div>
                 </div>
-                {holdTransferContent}
+                <div className="mx_CallView_holdTransferContent">{_t("Connecting")}</div>
+                {callControls}
+            </div>;
+        } else {
+            const containerClasses = classNames({
+                mx_CallView_content: true,
+                mx_CallView_video: true,
+            });
+
+            // TODO: Later the CallView should probably be reworked to support
+            // any number of feeds but now we can always expect there to be two
+            // feeds. This is because the js-sdk ignores any new incoming streams
+            const feeds = this.state.feeds.map((feed, i) => {
+                // Here we check to hide local audio feeds to achieve the same UI/UX
+                // as before. But once again this might be subject to change
+                if (feed.isVideoMuted() && feed.isLocal()) return;
+                return (
+                    <VideoFeed
+                        key={i}
+                        feed={feed}
+                        call={this.props.call}
+                        pipMode={this.props.pipMode}
+                        onResize={this.props.onResize}
+                    />
+                );
+            });
+
+            contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
+                {feeds}
                 {callControls}
             </div>;
         }
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 878b6af20f..0c785f758d 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import React from 'react';
-import CallHandler from '../../../CallHandler';
+import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
 import {Resizable} from "re-resizable";
@@ -54,24 +54,30 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
+        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
     }
 
     public componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
+        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallChangeRoom, this.updateCall);
     }
 
     private onAction = (payload) => {
         switch (payload.action) {
             case 'call_state': {
-                const newCall = this.getCall();
-                if (newCall !== this.state.call) {
-                    this.setState({call: newCall});
-                }
+                this.updateCall();
                 break;
             }
         }
     };
 
+    private updateCall = () => {
+        const newCall = this.getCall();
+        if (newCall !== this.state.call) {
+            this.setState({call: newCall});
+        }
+    };
+
     private getCall(): MatrixCall {
         const call = CallHandler.sharedInstance().getCallForRoom(this.props.roomId);
 
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index 0ca2a196c2..2abdc0641d 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -72,7 +72,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         e.stopPropagation();
         dis.dispatch({
             action: 'answer',
-            room_id: CallHandler.roomIdForCall(this.state.incomingCall),
+            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
         });
     };
 
@@ -80,7 +80,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
         e.stopPropagation();
         dis.dispatch({
             action: 'reject',
-            room_id: CallHandler.roomIdForCall(this.state.incomingCall),
+            room_id: CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall),
         });
     };
 
@@ -91,7 +91,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
 
         let room = null;
         if (this.state.incomingCall) {
-            room = MatrixClientPeg.get().getRoom(CallHandler.roomIdForCall(this.state.incomingCall));
+            room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(this.state.incomingCall));
         }
 
         const caller = room ? room.name : _t("Unknown caller");
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 2981fb6c04..d22fa055ce 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -18,52 +18,102 @@ import classnames from 'classnames';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import React, {createRef} from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
+import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
+import { logger } from 'matrix-js-sdk/src/logger';
+import MemberAvatar from "../avatars/MemberAvatar"
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-export enum VideoFeedType {
-    Local,
-    Remote,
-}
-
 interface IProps {
     call: MatrixCall,
 
-    type: VideoFeedType,
+    feed: CallFeed,
+
+    // Whether this call view is for picture-in-picture mode
+    // otherwise, it's the larger call view when viewing the room the call is in.
+    // This is sort of a proxy for a number of things but we currently have no
+    // need to control those things separately, so this is simpler.
+    pipMode?: boolean;
 
     // a callback which is called when the video element is resized
     // due to a change in video metadata
     onResize?: (e: Event) => void,
 }
 
-@replaceableComponent("views.voip.VideoFeed")
-export default class VideoFeed extends React.Component<IProps> {
-    private vid = createRef<HTMLVideoElement>();
+interface IState {
+    audioMuted: boolean;
+    videoMuted: boolean;
+}
 
-    componentDidMount() {
-        this.vid.current.addEventListener('resize', this.onResize);
-        this.setVideoElement();
+@replaceableComponent("views.voip.VideoFeed")
+export default class VideoFeed extends React.Component<IProps, IState> {
+    private element = createRef<HTMLVideoElement>();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            audioMuted: this.props.feed.isAudioMuted(),
+            videoMuted: this.props.feed.isVideoMuted(),
+        };
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.call !== prevProps.call) {
-            this.setVideoElement();
-        }
+    componentDidMount() {
+        this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.playMedia();
     }
 
     componentWillUnmount() {
-        this.vid.current.removeEventListener('resize', this.onResize);
+        this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+        this.element.current?.removeEventListener('resize', this.onResize);
+        this.stopMedia();
     }
 
-    private setVideoElement() {
-        if (this.props.type === VideoFeedType.Local) {
-            this.props.call.setLocalVideoElement(this.vid.current);
-        } else {
-            this.props.call.setRemoteVideoElement(this.vid.current);
+    private playMedia() {
+        const element = this.element.current;
+        if (!element) return;
+        // We play audio in AudioFeed, not here
+        element.muted = true;
+        element.srcObject = this.props.feed.stream;
+        element.autoplay = true;
+        try {
+            // A note on calling methods on media elements:
+            // We used to have queues per media element to serialise all calls on those elements.
+            // The reason given for this was that load() and play() were racing. However, we now
+            // never call load() explicitly so this seems unnecessary. However, serialising every
+            // operation was causing bugs where video would not resume because some play command
+            // had got stuck and all media operations were queued up behind it. If necessary, we
+            // should serialise the ones that need to be serialised but then be able to interrupt
+            // them with another load() which will cancel the pending one, but since we don't call
+            // load() explicitly, it shouldn't be a problem. - Dave
+            element.play()
+        } catch (e) {
+            logger.info("Failed to play media element with feed", this.props.feed, e);
         }
     }
 
-    onResize = (e) => {
-        if (this.props.onResize) {
+    private stopMedia() {
+        const element = this.element.current;
+        if (!element) return;
+
+        element.pause();
+        element.src = null;
+
+        // As per comment in componentDidMount, setting the sink ID back to the
+        // default once the call is over makes setSinkId work reliably. - Dave
+        // Since we are not using the same element anymore, the above doesn't
+        // seem to be necessary - Šimon
+    }
+
+    private onNewStream = () => {
+        this.setState({
+            audioMuted: this.props.feed.isAudioMuted(),
+            videoMuted: this.props.feed.isVideoMuted(),
+        });
+        this.playMedia();
+    };
+
+    private onResize = (e) => {
+        if (this.props.onResize && !this.props.feed.isLocal()) {
             this.props.onResize(e);
         }
     };
@@ -71,14 +121,33 @@ export default class VideoFeed extends React.Component<IProps> {
     render() {
         const videoClasses = {
             mx_VideoFeed: true,
-            mx_VideoFeed_local: this.props.type === VideoFeedType.Local,
-            mx_VideoFeed_remote: this.props.type === VideoFeedType.Remote,
+            mx_VideoFeed_local: this.props.feed.isLocal(),
+            mx_VideoFeed_remote: !this.props.feed.isLocal(),
+            mx_VideoFeed_voice: this.state.videoMuted,
+            mx_VideoFeed_video: !this.state.videoMuted,
             mx_VideoFeed_mirror: (
-                this.props.type === VideoFeedType.Local &&
+                this.props.feed.isLocal() &&
                 SettingsStore.getValue('VideoView.flipVideoHorizontally')
             ),
         };
 
-        return <video className={classnames(videoClasses)} ref={this.vid} />;
+        if (this.state.videoMuted) {
+            const member = this.props.feed.getMember();
+            const avatarSize = this.props.pipMode ? 76 : 160;
+
+            return (
+                <div className={classnames(videoClasses)} >
+                    <MemberAvatar
+                        member={member}
+                        height={avatarSize}
+                        width={avatarSize}
+                    />
+                </div>
+            );
+        } else {
+            return (
+                <video className={classnames(videoClasses)} ref={this.element} />
+            );
+        }
     }
 }
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index b651e40a3b..f9d957b60c 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -96,6 +96,9 @@ export class Media {
      */
     public getThumbnailHttp(width: number, height: number, mode: ResizeMethod = "scale"): string | null | undefined {
         if (!this.hasThumbnail) return null;
+        // scale using the device pixel ratio to keep images clear
+        width = Math.floor(width * window.devicePixelRatio);
+        height = Math.floor(height * window.devicePixelRatio);
         return this.client.mxcUrlToHttp(this.thumbnailMxc, width, height, mode);
     }
 
@@ -107,6 +110,9 @@ export class Media {
      * @returns {string} The HTTP URL which points to the thumbnail.
      */
     public getThumbnailOfSourceHttp(width: number, height: number, mode: ResizeMethod = "scale"): string {
+        // scale using the device pixel ratio to keep images clear
+        width = Math.floor(width * window.devicePixelRatio);
+        height = Math.floor(height * window.devicePixelRatio);
         return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode);
     }
 
@@ -117,6 +123,7 @@ export class Media {
      * @returns {string} An HTTP URL for the thumbnail.
      */
     public getSquareThumbnailHttp(dim: number): string {
+        dim = Math.floor(dim * window.devicePixelRatio); // scale using the device pixel ratio to keep images clear
         if (this.hasThumbnail) {
             return this.getThumbnailHttp(dim, dim, 'crop');
         }
diff --git a/src/editor/autocomplete.ts b/src/editor/autocomplete.ts
index 2f56494ea0..240ed2d96b 100644
--- a/src/editor/autocomplete.ts
+++ b/src/editor/autocomplete.ts
@@ -125,10 +125,8 @@ export default class AutocompleteWrapperModel {
             case "at-room":
                 return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)];
             case "user":
-                // not using suffix here, because we also need to calculate
-                // the suffix when clicking a display name to insert a mention,
-                // which happens in createMentionParts
-                return this.partCreator.createMentionParts(this.partIndex, text, completionId);
+                // Insert suffix only if the pill is the part with index 0 - we are at the start of the composer
+                return this.partCreator.createMentionParts(this.partIndex === 0, text, completionId);
             case "command":
                 // command needs special handling for auto complete, but also renders as plain texts
                 return [(this.partCreator as CommandPartCreator).command(text)];
diff --git a/src/editor/model.ts b/src/editor/model.ts
index 2e70b872e9..f1b6f90957 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -158,7 +158,7 @@ export default class EditorModel {
         }
     }
 
-    reset(serializedParts: SerializedPart[], caret: Caret, inputType: string) {
+    reset(serializedParts: SerializedPart[], caret?: Caret, inputType?: string) {
         this._parts = serializedParts.map(p => this._partCreator.deserializePart(p));
         if (!caret) {
             caret = this.getPositionAtEnd();
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index ccd90da3e2..6e3f35371d 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -34,7 +34,7 @@ interface ISerializedPart {
 interface ISerializedPillPart {
     type: Type.AtRoomPill | Type.RoomPill | Type.UserPill;
     text: string;
-    resourceId: string;
+    resourceId?: string;
 }
 
 export type SerializedPart = ISerializedPart | ISerializedPillPart;
@@ -287,6 +287,14 @@ abstract class PillPart extends BasePart implements IPillPart {
         }
     }
 
+    serialize(): ISerializedPillPart {
+        return {
+            type: this.type,
+            text: this.text,
+            resourceId: this.resourceId,
+        };
+    }
+
     get canEdit() {
         return false;
     }
@@ -341,11 +349,7 @@ class RoomPillPart extends PillPart {
 
     setAvatar(node: HTMLElement) {
         let initialLetter = "";
-        let avatarUrl = Avatar.avatarUrlForRoom(
-            this.room,
-            16 * window.devicePixelRatio,
-            16 * window.devicePixelRatio,
-            "crop");
+        let avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
         if (!avatarUrl) {
             initialLetter = Avatar.getInitialLetter(this.room ? this.room.name : this.resourceId);
             avatarUrl = Avatar.defaultAvatarUrlForString(this.room ? this.room.roomId : this.resourceId);
@@ -370,6 +374,13 @@ class AtRoomPillPart extends RoomPillPart {
     get type(): IPillPart["type"] {
         return Type.AtRoomPill;
     }
+
+    serialize(): ISerializedPillPart {
+        return {
+            type: this.type,
+            text: this.text,
+        };
+    }
 }
 
 class UserPillPart extends PillPart {
@@ -383,11 +394,7 @@ class UserPillPart extends PillPart {
         }
         const name = this.member.name || this.member.userId;
         const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this.member.userId);
-        const avatarUrl = Avatar.avatarUrlForMember(
-            this.member,
-            16 * window.devicePixelRatio,
-            16 * window.devicePixelRatio,
-            "crop");
+        const avatarUrl = Avatar.avatarUrlForMember(this.member, 16, 16, "crop");
         let initialLetter = "";
         if (avatarUrl === defaultAvatarUrl) {
             initialLetter = Avatar.getInitialLetter(name);
@@ -402,14 +409,6 @@ class UserPillPart extends PillPart {
     get className() {
         return "mx_UserPill mx_Pill";
     }
-
-    serialize(): ISerializedPillPart {
-        return {
-            type: this.type,
-            text: this.text,
-            resourceId: this.resourceId,
-        };
-    }
 }
 
 class PillCandidatePart extends PlainBasePart implements IPillCandidatePart {
@@ -503,7 +502,7 @@ export class PartCreator {
             case Type.PillCandidate:
                 return this.pillCandidate(part.text);
             case Type.RoomPill:
-                return this.roomPill(part.text);
+                return this.roomPill(part.resourceId);
             case Type.UserPill:
                 return this.userPill(part.text, part.resourceId);
         }
@@ -543,9 +542,9 @@ export class PartCreator {
         return new UserPillPart(userId, displayName, member);
     }
 
-    createMentionParts(partIndex: number, displayName: string, userId: string) {
+    createMentionParts(insertTrailingCharacter: boolean, displayName: string, userId: string) {
         const pill = this.userPill(displayName, userId);
-        const postfix = this.plain(partIndex === 0 ? ": " : " ");
+        const postfix = this.plain(insertTrailingCharacter ? ": " : " ");
         return [pill, postfix];
     }
 }
diff --git a/src/editor/serialize.ts b/src/editor/serialize.ts
index 5167e3d376..7cf9d9bb9d 100644
--- a/src/editor/serialize.ts
+++ b/src/editor/serialize.ts
@@ -61,9 +61,9 @@ export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} =
                 // const inlinePattern = "(?:^|\\s)(?<!\\\\)\\$(?!\\s)(([^$]|\\\\\\$)+?)(?<!\\\\|\\s)\\$";
 
                 // conditions for display math detection $$...$$:
-                // - pattern starts at beginning of line or is not prefixed with backslash or dollar
+                // - pattern starts and ends on a new line
                 // - left delimiter ($$) is not escaped by backslash
-                "display": "(^|[^\\\\$])\\$\\$(([^$]|\\\\\\$)+?)\\$\\$",
+                "display": "(^)\\$\\$(([^$]|\\\\\\$)+?)\\$\\$$",
 
                 // conditions for inline math detection $...$:
                 // - pattern starts at beginning of line, follows whitespace character or punctuation
@@ -78,9 +78,9 @@ export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} =
                 // detect math with latex delimiters, inline: \(...\), display \[...\]
 
                 // conditions for display math detection \[...\]:
-                // - pattern starts at beginning of line or is not prefixed with backslash
+                // - pattern starts and ends on a new line
                 // - pattern is not empty
-                "display": "(^|[^\\\\])\\\\\\[(?!\\\\\\])(.*?)\\\\\\]",
+                "display": "(^)\\\\\\[(?!\\\\\\])(.*?)\\\\\\]$",
 
                 // conditions for inline math detection \(...\):
                 // - pattern starts at beginning of line or is not prefixed with backslash
diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index 7f9ff9341c..8633146420 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -323,7 +323,7 @@
     "%(senderName)s removed their display name (%(oldDisplayName)s).": "%(senderName)s odstranil(a) své zobrazované jméno (%(oldDisplayName)s).",
     "%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s zrušil(a) pozvání pro uživatele %(targetName)s.",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s nastavil(a) viditelnost budoucích zpráv v této místnosti pro všechny její členy, a to od chvíle jejich pozvání.",
-    "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s nastavil(a) viditelnost budoucích zpráv v této místnosti pro všechny její členy, a to od chvíle jejich vstupu.",
+    "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s nastavil(a) viditelnost budoucích zpráv v této místnosti pro všechny její členy od chvíle jejich vstupu.",
     "%(senderName)s made future room history visible to all room members.": "%(senderName)s nastavil(a) viditelnost budoucích zpráv v této místnosti pro všechny její členy.",
     "%(senderName)s made future room history visible to anyone.": "%(senderName)s nastavil(a) viditelnost budoucích zpráv pro kohokoliv.",
     "%(senderName)s changed the pinned messages for the room.": "%(senderName)s změnil(a) připíchnuté zprávy této místnosti.",
@@ -744,7 +744,7 @@
     "e.g. <CurrentPageURL>": "např. <CurrentPageURL>",
     "Your device resolution": "Rozlišení obrazovky vašeho zařízení",
     "The information being sent to us to help make %(brand)s better includes:": "Abychom mohli %(brand)s zlepšovat, posíláte nám následující informace:",
-    "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "V případě, že se na stránce vyskytují identifikační údaje, jako například název místnosti, ID uživatele, místnosti a nebo skupiny, jsou tyto údaje před odesláním na server odstraněny.",
+    "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "Pokud tato stránka obsahuje identifikovatelné údaje, například ID místnosti, uživatele nebo skupiny, jsou tyto údaje před odesláním na server odstraněny.",
     "Call in Progress": "Probíhající hovor",
     "A call is currently being placed!": "Právě probíhá jiný hovor!",
     "A call is already in progress!": "Jeden hovor už probíhá!",
@@ -896,7 +896,7 @@
     "Prompt before sending invites to potentially invalid matrix IDs": "Potvrdit odeslání pozvánky potenciálně neplatným Matrix ID",
     "Show avatar changes": "Zobrazovat změny avatarů",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Zobrazovat zprávy o vstupu/opuštění (netýká se pozvánek/vykopnutí/vykázání)",
-    "Show a placeholder for removed messages": "Zobrazovat smazané zprávy jako zamazané",
+    "Show a placeholder for removed messages": "Zobrazovat smazané zprávy",
     "Show display name changes": "Zobrazovat změny zobrazovaného jména",
     "Messages containing my username": "Zprávy obsahující moje uživatelské jméno",
     "Messages containing @room": "Zprávy obsahující @room",
@@ -990,7 +990,7 @@
     "Straight rows of keys are easy to guess": "Řádky na klávesnici je moc jednoduché uhodnout",
     "Short keyboard patterns are easy to guess": "Krátké sekvence kláves je moc jednoduché uhodnout",
     "There was an error joining the room": "Při vstupu do místnosti došlo k chybě",
-    "Sorry, your homeserver is too old to participate in this room.": "Jejda, váš domovský server je moc zastaralý abyste do této místnosti mohli vstoupit.",
+    "Sorry, your homeserver is too old to participate in this room.": "Omlouváme se, ale váš domovský server je příliš zastaralý pro vstup do této místnosti.",
     "Please contact your homeserver administrator.": "Kontaktujte prosím správce domovského serveru.",
     "The other party cancelled the verification.": "Druhá strana ověření zrušila.",
     "Verified!": "Ověřeno!",
@@ -1130,9 +1130,9 @@
     "Without setting up Secure Message Recovery, you'll lose your secure message history when you log out.": "Bez nastavení bezpečného obnovení zpráv přijdete po odhlášení o historii šifrované komunikace.",
     "Show a reminder to enable Secure Message Recovery in encrypted rooms": "V šifrovaných konverzacích zobrazovat upozornění na možnost aktivovat bezpečné obnovení zpráv",
     "Gets or sets the room topic": "Nastaví nebo zjistí téma místnosti",
-    "Forces the current outbound group session in an encrypted room to be discarded": "Zahodí aktuálně používanou kryptografickou session na odchozí zprávy",
+    "Forces the current outbound group session in an encrypted room to be discarded": "Vynutí zahození aktuálně používané relace skupiny v zašifrované místnosti",
     "Custom user status messages": "Vlastní statusy",
-    "Group & filter rooms by custom tags (refresh to apply changes)": "Skupinkování a filtování místností podle štítků (vyžaduje znovunačtení stránky)",
+    "Group & filter rooms by custom tags (refresh to apply changes)": "Seskupování a filtrování místností podle vlastních štítků (vyžaduje znovunačtení stránky)",
     "Render simple counters in room header": "Zobrazovat stavová počítadla v hlavičce místnosti",
     "Enable Community Filter Panel": "Povolit panel Filtr skupiny",
     "Show developer tools": "Zobrazit nástroje pro vývojáře",
@@ -1205,7 +1205,7 @@
     "Remove messages": "Mazat zprávy",
     "Notify everyone": "Oznámení pro celou místnost",
     "Enable encryption?": "Povolit šifrování?",
-    "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>": "Po zapnutí už nelze šifrování v této místnosti vypnout. Zprávy v šifrovaných místnostech mohou číst jenom členové místnosti, server se k obsahu nedostane. Šifrování místností nepodporuje většina botů a propojení. <a>Více informací o šifrování.</a>",
+    "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>": "Po zapnutí již nelze šifrování v této místnosti vypnout. Zprávy v šifrovaných místnostech mohou číst jen členové místnosti, server se k obsahu nedostane. Šifrování místností nepodporuje většina botů a propojení. <a>Více informací o šifrování.</a>",
     "Error updating main address": "Nepovedlo se změnit hlavní adresu",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "Nastala chyba při pokusu o nastavení hlavní adresy místnosti. Mohl to zakázat server, nebo to může být dočasná chyba.",
     "Power level": "Úroveň oprávnění",
@@ -1219,7 +1219,7 @@
     "Your Matrix account on %(serverName)s": "Váš účet Matrix na serveru %(serverName)s",
     "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "Zda používáte funkci „breadcrumb“ (ikony nad seznamem místností)",
     "Replying With Files": "Odpovídání souborem",
-    "At this time it is not possible to reply with a file. Would you like to upload this file without replying?": "Aktuálně nelze odpovědět souborem. Chcete soubor nahrát a poslat bez odpovídání?",
+    "At this time it is not possible to reply with a file. Would you like to upload this file without replying?": "V tuto chvíli není možné odpovědět souborem. Chcete tento soubor nahrát bez odpovědi?",
     "The file '%(fileName)s' failed to upload.": "Soubor '%(fileName)s' se nepodařilo nahrát.",
     "The server does not support the room version specified.": "Server nepodporuje určenou verzi místnosti.",
     "Name or Matrix ID": "Jméno nebo Matrix ID",
@@ -1354,12 +1354,12 @@
     "Unexpected error resolving identity server configuration": "Chyba při hledání konfigurace serveru identity",
     "Use lowercase letters, numbers, dashes and underscores only": "Používejte pouze malá písmena, čísla, pomlčky a podtržítka",
     "Cannot reach identity server": "Nelze se připojit k serveru identity",
-    "You can register, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete se zaregistrovat, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se vám toto varování zobrazuje pořád, tak zkontrolujte svojí konfiguraci a nebo kontaktujte správce serveru.",
-    "You can reset your password, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete si změnit heslo, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se vám toto varování zobrazuje pořád, tak zkontrolujte svojí konfiguraci a nebo kontaktujte správce serveru.",
-    "You can log in, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete se přihlásit, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se vám toto varování zobrazuje pořád, tak zkontrolujte svojí konfiguraci a nebo kontaktujte správce serveru.",
+    "You can register, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete se zaregistrovat, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se vám toto varování zobrazuje i nadále, zkontrolujte svojí konfiguraci nebo kontaktujte správce serveru.",
+    "You can reset your password, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete si změnit heslo, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se toto varování zobrazuje i nadále, zkontrolujte svojí konfiguraci nebo kontaktujte správce serveru.",
+    "You can log in, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "Můžete se přihlásit, ale některé funkce nebudou dostupné dokud nezačne server identity fungovat. Pokud se vám toto varování zobrazuje i nadále, zkontrolujte svojí konfiguraci nebo kontaktujte správce serveru.",
     "Call failed due to misconfigured server": "Volání selhalo, protože je rozbitá konfigurace serveru",
-    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "Zeptejte se správce (<code>%(homeserverDomain)s</code>) jestli by nemohl nakonfigurovat server TURN, aby začalo fungoval volání.",
-    "Alternatively, you can try to use the public server at <code>turn.matrix.org</code>, but this will not be as reliable, and it will share your IP address with that server. You can also manage this in Settings.": "Případně můžete zkusit použít veřejný server <code>turn.matrix.org</code>, což nemusí fungovat tak spolehlivě a řekne to tomu cizímu serveru vaší IP adresu. Můžete to udělat v Nastavení.",
+    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "Požádejte správce svého homeserveru (<code>%(homeserverDomain)s</code>) jestli by nemohl nakonfigurovat TURN server, aby volání fungovala spolehlivě.",
+    "Alternatively, you can try to use the public server at <code>turn.matrix.org</code>, but this will not be as reliable, and it will share your IP address with that server. You can also manage this in Settings.": "Můžete také zkusit použít veřejný server na adrese <code>turn.matrix.org</code>, ale ten nebude tak spolehlivý a bude sdílet vaši IP adresu s tímto serverem. To můžete spravovat také v Nastavení.",
     "Try using turn.matrix.org": "Zkuste použít turn.matrix.org",
     "Messages": "Zprávy",
     "Actions": "Akce",
@@ -1368,7 +1368,7 @@
     "Changes the avatar of the current room": "Změní avatar této místnosti",
     "Changes your avatar in all rooms": "Změní váš avatar pro všechny místnosti",
     "Use an identity server": "Používat server identit",
-    "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Použít server identit k odeslání e-mailové pozvánky. Pokračováním použijete výchozí server identit (%(defaultIdentityServerName)s) nebo ho můžete změnit v Nastavení.",
+    "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "K pozvání e-mailem použijte server identit. Pokračováním použijete výchozí server identit (%(defaultIdentityServerName)s) nebo ho můžete změnit v Nastavení.",
     "Use an identity server to invite by email. Manage in Settings.": "Použít server identit na odeslání e-mailové pozvánky. Můžete spravovat v Nastavení.",
     "Displays list of commands with usages and descriptions": "Zobrazuje seznam příkazu s popiskem",
     "%(senderName)s made no change.": "%(senderName)s neudělal žádnou změnu.",
@@ -1708,7 +1708,7 @@
     "Backup has a <validity>invalid</validity> signature from this user": "Záloha má <validity>neplatný</validity> podpis od tohoto uživatele",
     "Backup has a signature from <verify>unknown</verify> user with ID %(deviceId)s": "Záloha je podepsaná <verify>neznámým</verify> uživatelem %(deviceId)s",
     "Close preview": "Zavřít náhled",
-    "Hide verified sessions": "Schovat ověřené relace",
+    "Hide verified sessions": "Skrýt ověřené relace",
     "%(count)s verified sessions|other": "%(count)s ověřených relací",
     "%(count)s verified sessions|one": "1 ověřená relace",
     "Language Dropdown": "Menu jazyků",
@@ -1721,8 +1721,8 @@
     "Unknown (user, session) pair:": "Neznámý pár (uživatel, relace):",
     "Session already verified!": "Relace je už ověřená!",
     "WARNING: Session already verified, but keys do NOT MATCH!": "VAROVÁNÍ: Relace je už ověřená, ale klíče NEODPOVÍDAJÍ!",
-    "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "VAROVÁNÍ: OVĚŘENÍ KLÍČŮ SELHALO! Podpisový klíč pro uživatele %(userId)s a relaci %(deviceId)s je „%(fprint)s“, což neodpovídá klíči „%(fingerprint)s“. Může to znamenat, že je vaše komunikace rušena!",
-    "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "Zadaný podpisový klíč odpovídá klíči relace %(deviceId)s od uživatele %(userId)s. Relace byla označena za platnou.",
+    "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "VAROVÁNÍ: OVĚŘENÍ KLÍČE SE NEZDAŘILO! Podpisový klíč pro uživatele %(userId)s a relaci %(deviceId)s je „%(fprint)s“, což neodpovídá klíči „%(fingerprint)s“. To by mohlo znamenat, že vaše komunikace je zachycována!",
+    "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "Zadaný podpisový klíč odpovídá klíči relace %(deviceId)s od uživatele %(userId)s. Relace byla označena jako ověřená.",
     "a few seconds ago": "před pár vteřinami",
     "about a minute ago": "před minutou",
     "%(num)s minutes ago": "před %(num)s minutami",
@@ -1917,8 +1917,8 @@
     "Compare unique emoji": "Porovnejte jedinečnou kombinaci emoji",
     "Compare a unique set of emoji if you don't have a camera on either device": "Pokud na žádném zařízení nemáte kameru, porovnejte jedinečnou kombinaci emoji",
     "Not Trusted": "Nedůvěryhodné",
-    "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) se přihlásil do nové relace a neověřil ji:",
-    "Ask this user to verify their session, or manually verify it below.": "Poproste tohoto uživatele aby svojí relaci ověřil a nebo jí níže můžete ověřit manuálně.",
+    "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) se přihlásil do nové relace bez ověření:",
+    "Ask this user to verify their session, or manually verify it below.": "Požádejte tohoto uživatele, aby ověřil svou relaci, nebo jí níže můžete ověřit manuálně.",
     "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what %(brand)s supports. Try with a different client.": "Relace, kterou se snažíte ověřit, neumožňuje ověření QR kódem ani pomocí emoji, což je to, co %(brand)s podporuje. Zkuste použít jiného klienta.",
     "Verify by scanning": "Ověřte naskenováním",
     "You declined": "Odmítli jste",
@@ -1936,7 +1936,7 @@
     "If disabled, messages from encrypted rooms won't appear in search results.": "Když je to zakázané, zprávy v šifrovaných místnostech se nebudou objevovat ve výsledcích vyhledávání.",
     "Disable": "Zakázat",
     "%(brand)s is securely caching encrypted messages locally for them to appear in search results:": "%(brand)s si bezpečně uchovává šifrované zprávy lokálně, aby v nich mohl vyhledávat:",
-    "Space used:": "Použitý prostor:",
+    "Space used:": "Použité místo:",
     "Indexed messages:": "Indexované zprávy:",
     "Indexed rooms:": "Indexované místnosti:",
     "Message downloading sleep time(ms)": "Čas na stažení zprávy (ms)",
@@ -2032,8 +2032,8 @@
     "Could not find user in room": "Nepovedlo se najít uživatele v místnosti",
     "Please supply a widget URL or embed code": "Zadejte prosím URL widgetu nebo jeho kód",
     "Send a bug report with logs": "Zaslat hlášení o chybě",
-    "You signed in to a new session without verifying it:": "Přihlásili jste se do nové relace, ale neoveřili jste ji:",
-    "Verify your other session using one of the options below.": "Ověřte ostatní relací jedním z následujících způsobů.",
+    "You signed in to a new session without verifying it:": "Přihlásili jste se do nové relace, aniž byste ji ověřili:",
+    "Verify your other session using one of the options below.": "Ověřte další relaci jedním z následujících způsobů.",
     "Click the button below to confirm deleting these sessions.|other": "Zmáčknutím tlačítka potvrdíte smazání těchto relací.",
     "Click the button below to confirm deleting these sessions.|one": "Zmáčknutím tlačítka potvrdíte smazání této relace.",
     "Delete sessions|other": "Smazat relace",
@@ -2093,7 +2093,7 @@
     "Please verify the room ID or address and try again.": "Ověřte prosím, že ID místnosti je správné a zkuste to znovu.",
     "Room ID or address of ban list": "ID nebo adresa seznamu zablokovaných",
     "Help us improve %(brand)s": "Pomozte nám zlepšovat %(brand)s",
-    "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Zasílat <UsageDataLink>anonymní data o použití aplikace</UsageDataLink>, která nám pomáhají %(brand)s zlepšovat. Bedeme na to používat <PolicyLink>soubory cookie</PolicyLink>.",
+    "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve %(brand)s. This will use a <PolicyLink>cookie</PolicyLink>.": "Zasílat <UsageDataLink>anonymní údaje o použití aplikace</UsageDataLink>, která nám pomáhají %(brand)s zlepšovat. K tomu se použije <PolicyLink>soubor cookie</PolicyLink>.",
     "I want to help": "Chci pomoci",
     "Your homeserver has exceeded its user limit.": "Na vašem domovském serveru byl překročen limit počtu uživatelů.",
     "Your homeserver has exceeded one of its resource limits.": "Na vašem domovském serveru byl překročen limit systémových požadavků.",
@@ -2166,8 +2166,8 @@
     "Signature upload failed": "Podpis se nepodařilo nahrát",
     "If the other version of %(brand)s is still open in another tab, please close it as using %(brand)s on the same host with both lazy loading enabled and disabled simultaneously will cause issues.": "Je-li jiná verze programu %(brand)s stále otevřená na jiné kartě, tak ji prosím zavřete, neboť užívání programu %(brand)s stejným hostitelem se zpožděným nahráváním současně povoleným i zakázaným bude působit problémy.",
     "Unexpected server error trying to leave the room": "Neočekávaná chyba serveru při odcházení z místnosti",
-    "The person who invited you already left the room.": "Uživatel který vás pozval už místnosti není.",
-    "The person who invited you already left the room, or their server is offline.": "Uživatel který vás pozvat už odešel z místnosti a nebo je jeho server offline.",
+    "The person who invited you already left the room.": "Uživatel, který vás pozval, již opustil místnost.",
+    "The person who invited you already left the room, or their server is offline.": "Uživatel, který vás pozval, již opustil místnost nebo je jeho server offline.",
     "You left the call": "Odešli jste z hovoru",
     "%(senderName)s left the call": "%(senderName)s opustil/a hovor",
     "Call ended": "Hovor skončil",
@@ -2954,13 +2954,13 @@
     "Mobile experience": "Zážitek na mobilních zařízeních",
     "Element Web is currently experimental on mobile. The native apps are recommended for most people.": "Element Web je v současné době experimentální na mobilních zařízeních. Nativní aplikace se doporučují pro většinu lidí.",
     "Use app for a better experience": "Pro lepší zážitek použijte aplikaci",
-    "Element Web is experimental on mobile. For a better experience and the latest features, use our free native app.": "Element Web je experimentální na mobilních zařízeních. Pro lepší zážitek a nejnovější funkce použijte naši bezplatnou nativní aplikaci.",
+    "Element Web is experimental on mobile. For a better experience and the latest features, use our free native app.": "Element Web je v mobilní verzi experimentální. Chcete-li získat lepší zážitek a nejnovější funkce, použijte naši bezplatnou nativní aplikaci.",
     "Use app": "Použijte aplikaci",
     "Something went wrong in confirming your identity. Cancel and try again.": "Při ověřování vaší identity se něco pokazilo. Zrušte to a zkuste to znovu.",
-    "Your homeserver rejected your log in attempt. This could be due to things just taking too long. Please try again. If this continues, please contact your homeserver administrator.": "Váš domovský server odmítl váš pokus o přihlášení. Může to být způsobeno tím, že věci trvají příliš dlouho. Prosím zkuste to znovu. Pokud to bude pokračovat, obraťte se na správce domovského serveru.",
+    "Your homeserver rejected your log in attempt. This could be due to things just taking too long. Please try again. If this continues, please contact your homeserver administrator.": "Váš domovský server odmítl váš pokus o přihlášení. To může to být způsobeno tím, že vše trvá příliš dlouho. Zkuste to prosím znovu. Pokud tento problém přetrvává, obraťte se na správce domovského serveru.",
     "Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "Váš domovský server nebyl dosažitelný a nemohl vás přihlásit. Zkuste to prosím znovu. Pokud to bude pokračovat, obraťte se na správce domovského serveru.",
     "Try again": "Zkuste to znovu",
-    "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "Požádali jsme prohlížeč, aby si pamatoval, který domovský server používáte k přihlášení, ale váš prohlížeč to bohužel zapomněl. Přejděte na přihlašovací stránku a zkuste to znovu.",
+    "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "Požádali jsme prohlížeč, aby si zapamatoval, který domovský server používáte k přihlášení, ale váš prohlížeč to bohužel zapomněl. Přejděte na přihlašovací stránku a zkuste to znovu.",
     "We couldn't log you in": "Nemohli jsme vás přihlásit",
     "Show stickers button": "Tlačítko Zobrazit nálepky",
     "Windows": "Okna",
@@ -3012,8 +3012,8 @@
     "Inviting...": "Pozvání...",
     "Invite by username": "Pozvat podle uživatelského jména",
     "Invite your teammates": "Pozvěte své spolupracovníky",
-    "Failed to invite the following users to your space: %(csvUsers)s": "Nepodařilo se pozvat následující uživatele do vašeho space: %(csvUsers)s",
-    "A private space for you and your teammates": "Soukromý space pro Vás a vaše spolupracovníky",
+    "Failed to invite the following users to your space: %(csvUsers)s": "Nepodařilo se pozvat následující uživatele do vašeho prostoru: %(csvUsers)s",
+    "A private space for you and your teammates": "Soukromý prostor pro Vás a vaše spolupracovníky",
     "Me and my teammates": "Já a moji spolupracovníci",
     "A private space just for you": "Soukromý space právě pro vás",
     "Just Me": "Pouze já",
@@ -3022,7 +3022,7 @@
     "At the moment only you can see it.": "V tuto chvíli to vidíte jen Vy.",
     "Creating rooms...": "Vytváření místností...",
     "Skip for now": "Prozatím přeskočit",
-    "Failed to create initial space rooms": "Vytvoření počátečních místností ve space se nezdařilo",
+    "Failed to create initial space rooms": "Vytvoření počátečních místností v prostoru se nezdařilo",
     "Random": "Náhodný",
     "Your private space <name/>": "Váš soukromý space <name/>",
     "Your public space <name/>": "Váš veřejný space <name/>",
@@ -3030,9 +3030,9 @@
     "<inviter/> invited you to <name/>": "<inviter/> vás pozval do <name/>",
     "%(count)s members|one": "%(count)s člen",
     "%(count)s members|other": "%(count)s členů",
-    "Your server does not support showing space hierarchies.": "Váš server nepodporuje zobrazování hierarchií spaces.",
+    "Your server does not support showing space hierarchies.": "Váš server nepodporuje zobrazování hierarchií prostorů.",
     "Default Rooms": "Výchozí místnosti",
-    "Add existing rooms & spaces": "Přidat stávající místnosti a spaces",
+    "Add existing rooms & spaces": "Přidat stávající místnosti a prostory",
     "Accept Invite": "Přijmout pozvání",
     "Find a room...": "Najít místnost...",
     "Manage rooms": "Spravovat místnosti",
@@ -3044,68 +3044,68 @@
     "Remove from Space": "Odebrat ze space",
     "Undo": "Vrátit",
     "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Vaše zpráva nebyla odeslána, protože tento domovský server byl zablokován jeho správcem. <a>Kontaktujte svého správce služby</a>, abyste mohli službu nadále používat.",
-    "Are you sure you want to leave the space '%(spaceName)s'?": "Opravdu chcete opustit space '%(spaceName)s'?",
-    "This space is not public. You will not be able to rejoin without an invite.": "Tento space není veřejný. Bez pozvánky se nebudete moci znovu připojit.",
+    "Are you sure you want to leave the space '%(spaceName)s'?": "Opravdu chcete opustit prostor '%(spaceName)s'?",
+    "This space is not public. You will not be able to rejoin without an invite.": "Tento prostor není veřejný. Bez pozvánky se nebudete moci znovu připojit.",
     "Start audio stream": "Zahájit audio přenos",
     "Failed to start livestream": "Nepodařilo spustit živý přenos",
     "Unable to start audio streaming.": "Nelze spustit streamování zvuku.",
     "View dev tools": "Zobrazit nástroje pro vývojáře",
-    "Leave Space": "Opustit space",
-    "Make this space private": "Nastavit tento space jako soukromý",
-    "Edit settings relating to your space.": "Upravte nastavení týkající se vašeho space.",
-    "Space settings": "Nastavení space",
-    "Failed to save space settings.": "Nastavení space se nepodařilo uložit.",
-    "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Pozvěte někoho pomocí jeho jména, uživatelského jména (například <userId/>) nebo <a>sdílejte tento space</a>.",
-    "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Pozvěte někoho pomocí jeho jména, e-mailové adresy, uživatelského jména (například <userId/>) nebo <a>sdílejte tento space</a>.",
-    "Unnamed Space": "Nejmenovaný space",
+    "Leave Space": "Opustit prostor",
+    "Make this space private": "Nastavit tento prostor jako soukromý",
+    "Edit settings relating to your space.": "Upravte nastavení týkající se vašeho prostoru.",
+    "Space settings": "Nastavení prostoru",
+    "Failed to save space settings.": "Nastavení prostoru se nepodařilo uložit.",
+    "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Pozvěte někoho pomocí jeho jména, uživatelského jména (například <userId/>) nebo <a>sdílejte tento prostor</a>.",
+    "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Pozvěte někoho pomocí jeho jména, e-mailové adresy, uživatelského jména (například <userId/>) nebo <a>sdílejte tento prostor</a>.",
+    "Unnamed Space": "Nejmenovaný prostor",
     "Invite to %(spaceName)s": "Pozvat do %(spaceName)s",
-    "Failed to add rooms to space": "Nepodařilo se přidat místnosti do space",
+    "Failed to add rooms to space": "Nepodařilo se přidat místnosti do prostoru",
     "Applying...": "Potvrzuji...",
     "Apply": "Použít",
     "Create a new room": "Vytvořit novou místnost",
     "Don't want to add an existing room?": "Nechcete přidat existující místnost?",
-    "Spaces": "Spaces",
-    "Filter your rooms and spaces": "Filtrujte své místnosti a spaces",
+    "Spaces": "Prostory",
+    "Filter your rooms and spaces": "Filtrujte své místnosti a prostory",
     "Add existing spaces/rooms": "Přidat existující space/místnost",
-    "Space selection": "Výběr space",
-    "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the space it will be impossible to regain privileges.": "Tuto změnu nebudete moci vrátit zpět, protože budete degradováni, pokud jste posledním privilegovaným uživatelem v daném space, nebude možné znovu získat oprávnění.",
+    "Space selection": "Výběr prostoru",
+    "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the space it will be impossible to regain privileges.": "Tuto změnu nebudete moci vrátit zpět, protože budete degradováni, pokud jste posledním privilegovaným uživatelem v daném prostoru, nebude možné znovu získat oprávnění.",
     "Empty room": "Prázdná místnost",
     "Suggested Rooms": "Doporučené místnosti",
     "Explore space rooms": "Prozkoumat místnosti space",
-    "You do not have permissions to add rooms to this space": "Nemáte oprávnění k přidávání místností do tohoto space",
+    "You do not have permissions to add rooms to this space": "Nemáte oprávnění k přidávání místností do tohoto prostoru",
     "Add existing room": "Přidat existující místnost",
-    "You do not have permissions to create new rooms in this space": "Nemáte oprávnění k vytváření nových místností v tomto space",
+    "You do not have permissions to create new rooms in this space": "Nemáte oprávnění k vytváření nových místností v tomto prostoru",
     "Send message": "Poslat zprávu",
-    "Invite to this space": "Pozvat do tohoto space",
+    "Invite to this space": "Pozvat do tohoto prostoru",
     "Your message was sent": "Zpráva byla odeslána",
     "Encrypting your message...": "Šifrování zprávy...",
     "Sending your message...": "Odesílání zprávy...",
     "Spell check dictionaries": "Slovníky pro kontrolu pravopisu",
-    "Space options": "Nastavení space",
+    "Space options": "Nastavení prostoru",
     "Space Home": "Domov space",
     "New room": "Nová místnost",
-    "Leave space": "Opusit space",
+    "Leave space": "Opusit prostor",
     "Invite people": "Pozvat lidi",
-    "Share your public space": "Sdílejte svůj veřejný space",
+    "Share your public space": "Sdílejte svůj veřejný prostor",
     "Invite members": "Pozvat členy",
     "Invite by email or username": "Pozvěte e-mailem nebo uživatelským jménem",
     "Share invite link": "Sdílet odkaz na pozvánku",
     "Click to copy": "Kliknutím zkopírujte",
-    "Expand space panel": "Rozbalit space panel",
-    "Collapse space panel": "Sbalit space panel",
+    "Expand space panel": "Rozbalit panel prostoru",
+    "Collapse space panel": "Sbalit panel prostoru",
     "Creating...": "Vytváření...",
     "You can change these at any point.": "Můžete je kdykoli změnit.",
     "Give it a photo, name and description to help you identify it.": "Přiřaďte mu obrázek, jméno a popis, abyste jej mohli lépe identifikovat.",
-    "Your private space": "Váš soukromý space",
-    "Your public space": "Váš veřejný space",
+    "Your private space": "Váš soukromý prostor",
+    "Your public space": "Váš veřejný prostor",
     "You can change this later": "Toto můžete změnit později",
     "Invite only, best for yourself or teams": "Pouze pozvat, nejlepší pro sebe nebo pro týmy",
     "Private": "Soukromý",
-    "Open space for anyone, best for communities": "Otevřený space pro kohokoli, nejlepší pro komunity",
+    "Open space for anyone, best for communities": "Otevřený prostor pro kohokoli, nejlepší pro komunity",
     "Public": "Veřejný",
-    "Create a space": "Vytvořit space",
+    "Create a space": "Vytvořit prostor",
     "Jump to the bottom of the timeline when you send a message": "Při odesílání zprávy přeskočit na konec časové osy",
-    "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.": "Spaces prototyp. Nejsou kompatibilní se skupinami, skupinami v2 a vlastními štítky. Pro některé funkce je vyžadován kompatibilní domovský server.",
+    "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.": "Prototyp prostorů. Nejsou kompatibilní se skupinami, skupinami v2 a vlastními štítky. Pro některé funkce je vyžadován kompatibilní domovský server.",
     "This homeserver has been blocked by its administrator.": "Tento domovský server byl zablokován jeho správcem.",
     "You're already in a call with this person.": "S touto osobou již telefonujete.",
     "Already in call": "Již máte hovor",
@@ -3123,13 +3123,13 @@
     "We'll create rooms for each of them. You can add more later too, including already existing ones.": "Pro každého z nich vytvoříme místnost. Později můžete přidat další, včetně již existujících.",
     "Let's create a room for each of them. You can add more later too, including already existing ones.": "Vytvořme místnost pro každého z nich. Později můžete přidat i další, včetně již existujících.",
     "Make sure the right people have access. You can invite more later.": "Zajistěte přístup pro správné lidi. Další můžete pozvat později.",
-    "A private space to organise your rooms": "Soukromý space pro uspořádání vašich místností",
+    "A private space to organise your rooms": "Soukromý prostor pro uspořádání vašich místností",
     "Make sure the right people have access to %(name)s": "Zajistěte, aby do %(name)s měli přístup správní lidé",
     "Go to my first room": "Jít do mé první místnosti",
     "It's just you at the moment, it will be even better with others.": "V tuto chvíli to jste jen vy, s ostatními to bude ještě lepší.",
     "Share %(name)s": "Sdílet %(name)s",
-    "Private space": "Soukromý space",
-    "Public space": "Veřejný space",
+    "Private space": "Soukromý prostor",
+    "Public space": "Veřejný prostor",
     "<inviter/> invites you": "<inviter/> vás zve",
     "Search names and description": "Prohledat jména a popisy",
     "Create room": "Vytvořit místnost",
@@ -3139,10 +3139,10 @@
     "Mark as not suggested": "Označit jako nedoporučené",
     "Removing...": "Odebírání...",
     "Failed to remove some rooms. Try again later": "Odebrání některých místností se nezdařilo. Zkuste to později znovu",
-    "%(count)s rooms and 1 space|one": "%(count)s místnost a 1 space",
-    "%(count)s rooms and 1 space|other": "%(count)s místností a 1 space",
-    "%(count)s rooms and %(numSpaces)s spaces|one": "%(count)s místnost a %(numSpaces)s space",
-    "%(count)s rooms and %(numSpaces)s spaces|other": "%(count)s místností a %(numSpaces)s spaces",
+    "%(count)s rooms and 1 space|one": "%(count)s místnost a 1 prostor",
+    "%(count)s rooms and 1 space|other": "%(count)s místností a 1 prostor",
+    "%(count)s rooms and %(numSpaces)s spaces|one": "%(count)s místnost a %(numSpaces)s prostorů",
+    "%(count)s rooms and %(numSpaces)s spaces|other": "%(count)s místností a %(numSpaces)s prostorů",
     "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.": "Pokud nemůžete najít místnost, kterou hledáte, požádejte o pozvánku nebo <a>vytvořte novou místnost</a>.",
     "This room is suggested as a good one to join": "Tato místnost je doporučena jako dobrá pro připojení",
     "Suggested": "Doporučeno",
@@ -3156,7 +3156,7 @@
     "Invite with email or username": "Pozvěte e-mailem nebo uživatelským jménem",
     "You can change these anytime.": "Tyto údaje můžete kdykoli změnit.",
     "Add some details to help people recognise it.": "Přidejte několik podrobností, aby to lidé lépe rozpoznali.",
-    "Spaces are new ways to group rooms and people. To join an existing space you'll need an invite.": "Spaces jsou nový způsob, jak seskupovat místnosti a lidi. Chcete-li se připojit ke stávajícímu space, budete potřebovat pozvánku.",
+    "Spaces are new ways to group rooms and people. To join an existing space you'll need an invite.": "Prostory jsou nový způsob, jak seskupovat místnosti a lidi. Chcete-li se připojit ke stávajícímu prostoru, budete potřebovat pozvánku.",
     "A new login is accessing your account: %(name)s (%(deviceID)s) at %(ip)s": "K vašemu účtu přistupuje nové přihlášení: %(name)s (%(deviceID)s) pomocí %(ip)s",
     "From %(deviceName)s (%(deviceId)s) at %(ip)s": "Z %(deviceName)s (%(deviceId)s) pomocí %(ip)s",
     "Verify this login to access your encrypted messages and prove to others that this login is really you.": "Ověřte toto přihlášení, abyste získali přístup k šifrovaným zprávám a dokázali ostatním, že jste to opravdu vy.",
@@ -3202,5 +3202,28 @@
     "What are some things you want to discuss in %(spaceName)s?": "O kterých tématech chcete diskutovat v %(spaceName)s?",
     "Let's create a room for each of them.": "Vytvořme pro každé z nich místnost.",
     "Use another login": "Použijte jiné přihlašovací jméno",
-    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Bez ověření nebudete mít přístup ke všem svým zprávám a ostatním se můžete zobrazit jako nedůvěryhodný."
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Bez ověření nebudete mít přístup ke všem svým zprávám a ostatním se můžete zobrazit jako nedůvěryhodný.",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Jste zde jediná osoba. Pokud odejdete, nikdo se v budoucnu nebude moci připojit, včetně vás.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Pokud vše resetujete, začnete bez důvěryhodných relací, bez důvěryhodných uživatelů a možná nebudete moci zobrazit minulé zprávy.",
+    "Only do this if you have no other device to complete verification with.": "Udělejte to, pouze pokud nemáte žádné jiné zařízení, se kterým byste mohli dokončit ověření.",
+    "Reset everything": "Resetovat vše",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Zapomněli nebo ztratili jste všechny metody obnovy? <a>Obnovit vše</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Pokud tak učiníte, nezapomeňte, že žádná z vašich zpráv nebude smazána, ale vyhledávání může být na několik okamžiků zpomaleno během opětovného vytvoření indexu",
+    "View message": "Zobrazit zprávu",
+    "Zoom in": "Přiblížit",
+    "Zoom out": "Oddálit",
+    "%(seconds)ss left": "Zbývá %(seconds)ss",
+    "Change server ACLs": "Změnit seznamy přístupů serveru",
+    "Show options to enable 'Do not disturb' mode": "Zobrazit možnosti pro povolení režimu „Nerušit“",
+    "You can select all or individual messages to retry or delete": "Můžete vybrat všechny nebo jednotlivé zprávy, které chcete zkusit poslat znovu nebo odstranit",
+    "Sending": "Odesílání",
+    "Retry all": "Zkusit všechny znovu",
+    "Delete all": "Smazat všechny",
+    "Some of your messages have not been sent": "Některé z vašich zpráv nebyly odeslány",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s členů včetně %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Včetně %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Zobrazit jednoho člena",
+    "View all %(count)s members|other": "Zobrazit všech %(count)s členů",
+    "Failed to send": "Odeslání se nezdařilo"
 }
diff --git a/src/i18n/strings/da.json b/src/i18n/strings/da.json
index ca28295c4f..15ce2986da 100644
--- a/src/i18n/strings/da.json
+++ b/src/i18n/strings/da.json
@@ -71,7 +71,7 @@
     "No rooms to show": "Ingen rum at vise",
     "This email address is already in use": "Denne email adresse er allerede i brug",
     "This phone number is already in use": "Dette telefonnummer er allerede i brug",
-    "Failed to verify email address: make sure you clicked the link in the email": "Kunne ikke bekræfte emailaddressen: vær sikker på at klikke på linket i emailen",
+    "Failed to verify email address: make sure you clicked the link in the email": "Kunne ikke bekræfte emailaddressen: vær sikker på at klikke på linket i e-mailen",
     "Call Timeout": "Opkalds Timeout",
     "The remote side failed to pick up": "Den anden side tog den ikke",
     "Unable to capture screen": "Kunne ikke optage skærm",
@@ -473,9 +473,9 @@
     "Show a placeholder for removed messages": "Vis en pladsholder for fjernede beskeder",
     "Whether you're using %(brand)s on a device where touch is the primary input mechanism": "Hvorvidt du benytter %(brand)s på en enhed, hvor touch er den primære input-grænseflade",
     "Your user agent": "Din user agent",
-    "Use Single Sign On to continue": "Brug Single Sign On til at fortsætte",
+    "Use Single Sign On to continue": "Brug engangs login for at fortsætte",
     "Confirm adding this email address by using Single Sign On to prove your identity.": "Bekræft tilføjelsen af denne email adresse ved at bruge Single Sign On til at bevise din identitet.",
-    "Single Sign On": "Single Sign On",
+    "Single Sign On": "Engangs login",
     "Confirm adding email": "Bekræft tilføjelse af email",
     "Click the button below to confirm adding this email address.": "Klik på knappen herunder for at bekræfte tilføjelsen af denne email adresse.",
     "Confirm": "Bekræft",
diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 9551f00e55..7f0d6a2747 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -47,7 +47,7 @@
     "For security, this session has been signed out. Please sign in again.": "Aus Sicherheitsgründen wurde diese Sitzung beendet. Bitte melde dich erneut an.",
     "Guests cannot join this room even if explicitly invited.": "Gäste können diesem Raum nicht beitreten, auch wenn sie explizit eingeladen wurden.",
     "Hangup": "Auflegen",
-    "Homeserver is": "Der Heimserver ist",
+    "Homeserver is": "Dein Heimserver ist",
     "Identity Server is": "Der Identitätsserver ist",
     "I have verified my email address": "Ich habe meine E-Mail-Adresse verifiziert",
     "Import E2E room keys": "E2E-Raumschlüssel importieren",
@@ -78,7 +78,7 @@
     "Someone": "Jemand",
     "Success": "Erfolg",
     "This doesn't appear to be a valid email address": "Dies scheint keine gültige E-Mail-Adresse zu sein",
-    "This room is not accessible by remote Matrix servers": "Ferngesteuerte Matrixserver können auf diesen Raum nicht zugreifen",
+    "This room is not accessible by remote Matrix servers": "Dieser Raum ist von Personen auf anderen Matrix-Servern nicht betretbar",
     "Admin": "Administrator",
     "Server may be unavailable, overloaded, or you hit a bug.": "Server ist nicht verfügbar, überlastet oder du bist auf einen Softwarefehler gestoßen.",
     "Labs": "Labor",
@@ -125,7 +125,7 @@
     "Sat": "Sa",
     "Jan": "Jan",
     "Feb": "Feb",
-    "Mar": "Mrz",
+    "Mar": "Mär",
     "Apr": "Apr",
     "May": "Mai",
     "Jun": "Jun",
@@ -207,7 +207,7 @@
     "Failed to kick": "Rauswurf fehlgeschlagen",
     "Failed to mute user": "Stummschalten des Nutzers fehlgeschlagen",
     "Failed to reject invite": "Ablehnen der Einladung ist fehlgeschlagen",
-    "Failed to set display name": "Anzeigename konnte nicht gesetzt werden",
+    "Failed to set display name": "Anzeigename konnte nicht geändert werden",
     "Fill screen": "Fülle Bildschirm",
     "Incorrect verification code": "Falscher Verifizierungscode",
     "Join Room": "Raum beitreten",
@@ -215,7 +215,7 @@
     "not specified": "nicht angegeben",
     "No more results": "Keine weiteren Ergebnisse",
     "No results": "Keine Ergebnisse",
-    "OK": "OK",
+    "OK": "Ok",
     "Search": "Suchen",
     "Search failed": "Suche ist fehlgeschlagen",
     "Server error": "Serverfehler",
@@ -349,7 +349,7 @@
     "If you already have a Matrix account you can <a>log in</a> instead.": "Wenn du bereits ein Matrix-Benutzerkonto hast, kannst du dich stattdessen auch direkt <a>anmelden</a>.",
     "Home": "Startseite",
     "Username invalid: %(errMessage)s": "Ungültiger Benutzername: %(errMessage)s",
-    "Accept": "Akzeptieren",
+    "Accept": "Annehmen",
     "Active call (%(roomName)s)": "Aktiver Anruf (%(roomName)s)",
     "Admin Tools": "Administratorwerkzeuge",
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Verbindung zum Heimserver fehlgeschlagen - bitte überprüfe die Internetverbindung und stelle sicher, dass dem <a>SSL-Zertifikat deines Heimservers</a> vertraut wird und dass Anfragen nicht durch eine Browser-Erweiterung blockiert werden.",
@@ -362,7 +362,7 @@
     "Incoming video call from %(name)s": "Eingehender Videoanruf von %(name)s",
     "Incoming voice call from %(name)s": "Eingehender Sprachanruf von %(name)s",
     "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.": "Per <voiceText>Sprachanruf</voiceText> oder <videoText>Videoanruf</videoText> beitreten.",
-    "Last seen": "Zuletzt gesehen",
+    "Last seen": "Zuletzt gesehen um",
     "No display name": "Kein Anzeigename",
     "Private Chat": "Privater Chat",
     "Public Chat": "Öffentlicher Chat",
@@ -430,7 +430,7 @@
     "Banned by %(displayName)s": "Verbannt von %(displayName)s",
     "Description": "Beschreibung",
     "Unable to accept invite": "Einladung kann nicht angenommen werden",
-    "Failed to invite users to %(groupId)s": "Benutzer konnten nicht in %(groupId)s eingeladen werden",
+    "Failed to invite users to %(groupId)s": "Einige Leute konnten nicht in %(groupId)s eingeladen werden",
     "Unable to reject invite": "Einladung konnte nicht abgelehnt werden",
     "Who would you like to add to this summary?": "Wen möchtest zu dieser Übersicht hinzufügen?",
     "Add to summary": "Zur Übersicht hinzufügen",
@@ -469,7 +469,7 @@
     "Which rooms would you like to add to this community?": "Welche Räume sollen zu dieser Community hinzugefügt werden?",
     "Add rooms to the community": "Räume zur Community hinzufügen",
     "Add to community": "Zur Community hinzufügen",
-    "Failed to invite users to community": "Benutzer konnten nicht in die Community eingeladen werden",
+    "Failed to invite users to community": "Einige Leute konnten nicht in die Community eingeladen werden",
     "Communities": "Communities",
     "Invalid community ID": "Ungültige Community-ID",
     "'%(groupId)s' is not a valid community ID": "'%(groupId)s' ist keine gültige Community-ID",
@@ -504,7 +504,7 @@
     "Delete Widget": "Widget löschen",
     "Mention": "Erwähnen",
     "Invite": "Einladen",
-    "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?": "Das Löschen eines Widgets entfernt es für alle Nutzer in diesem Raum. Möchtest du es wirklich löschen?",
+    "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?": "Das Löschen des Widgets entfernt es für alle in diesem Raum. Wirklich löschen?",
     "Mirror local video feed": "Lokalen Video-Feed spiegeln",
     "Failed to withdraw invitation": "Die Einladung konnte nicht zurückgezogen werden",
     "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Community-IDs dürfen nur die folgenden Zeichen enthalten: a-z, 0-9, or '=_-./'",
@@ -582,13 +582,13 @@
     "Notify the whole room": "Alle im Raum benachrichtigen",
     "Room Notification": "Raum-Benachrichtigung",
     "These rooms are displayed to community members on the community page. Community members can join the rooms by clicking on them.": "Diese Räume werden Community-Mitgliedern auf der Community-Seite angezeigt. Community-Mitglieder können diesen Räumen beitreten, indem sie diese anklicken.",
-    "Show these rooms to non-members on the community page and room list?": "Sollen diese Räume öffentlich auf der Community-Seite und in der Raum-Liste angezeigt werden?",
+    "Show these rooms to non-members on the community page and room list?": "Sollen diese Räume öffentlich auf der Communityseite und in der Raumliste angezeigt werden?",
     "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n": "<h1>HTML für deine Community-Seite</h1>\n<p>\n    Nutze die ausführliche Beschreibung, um neuen Mitgliedern diese Community vorzustellen\n    oder um wichtige <a href=\"foo\">Links</a> bereitzustellen.\n</p>\n<p>\n    Du kannst sogar 'img'-Tags (HTML) verwenden\n</p>\n",
     "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Deine Community hat noch keine ausführliche Beschreibung, d. h. eine HTML-Seite, die Community-Mitgliedern angezeigt wird.<br />Hier klicken, um die Einstellungen zu öffnen und eine Beschreibung zu erstellen!",
     "Enable inline URL previews by default": "URL-Vorschau standardmäßig aktivieren",
     "Enable URL previews for this room (only affects you)": "URL-Vorschau für dich in diesem Raum",
     "Enable URL previews by default for participants in this room": "URL-Vorschau für Raummitglieder",
-    "Please note you are logging into the %(hs)s server, not matrix.org.": "Du meldest dich gerade am %(hs)s-Server an, nicht auf matrix.org.",
+    "Please note you are logging into the %(hs)s server, not matrix.org.": "Du meldest dich gerade am Server von %(hs)s an, nicht auf matrix.org.",
     "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?": "Sonst ist hier aktuell niemand. Möchtest du <inviteText>Benutzer einladen</inviteText> oder die <nowarnText>Warnmeldung bezüglich des leeren Raums deaktivieren</nowarnText>?",
     "URL previews are disabled by default for participants in this room.": "URL-Vorschau ist für Mitglieder des Raumes standardmäßig deaktiviert.",
     "URL previews are enabled by default for participants in this room.": "URL-Vorschau ist für Mitglieder des Raumes standardmäßig aktiviert.",
@@ -647,14 +647,14 @@
     "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Wenn du einen Fehler via GitHub meldest, können Fehlerberichte uns helfen um das Problem zu finden. Sie enthalten Anwendungsdaten wie deinen Nutzernamen, Raum- und Gruppen-IDs und Aliase, die du besucht hast sowie Nutzernamen anderer Nutzer mit denen du schreibst. Sie enthalten keine Nachrichten.",
     "Submit debug logs": "Fehlerberichte einreichen",
     "Code": "Code",
-    "Opens the Developer Tools dialog": "Öffnet die Entwicklerwerkzeuge",
+    "Opens the Developer Tools dialog": "Entwickler-Werkzeuge öffnen",
     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Von %(displayName)s (%(userName)s) um %(dateTime)s gesehen",
     "Unable to join community": "Community konnte nicht betreten werden",
     "Unable to leave community": "Community konnte nicht verlassen werden",
     "Changes made to your community <bold1>name</bold1> and <bold2>avatar</bold2> might not be seen by other users for up to 30 minutes.": "Änderungen am <bold1>Namen</bold1> und <bold2>Bild</bold2> deiner Community werden evtl. erst nach 30 Minuten von anderen Nutzern gesehen werden.",
     "Join this community": "Community beitreten",
     "Leave this community": "Community verlassen",
-    "You don't currently have any stickerpacks enabled": "Du hast aktuell keine Stickerpakete aktiviert",
+    "You don't currently have any stickerpacks enabled": "Keine Stickerpakete aktiviert",
     "Hide Stickers": "Sticker ausblenden",
     "Show Stickers": "Sticker anzeigen",
     "Who can join this community?": "Wer kann dieser Community beitreten?",
@@ -708,7 +708,7 @@
     "Messages containing <span>keywords</span>": "Nachrichten mit <span>Schlüsselwörtern</span>",
     "Error saving email notification preferences": "Fehler beim Speichern der E-Mail-Benachrichtigungseinstellungen",
     "Tuesday": "Dienstag",
-    "Enter keywords separated by a comma:": "Schlüsselwörter kommagetrennt eingeben:",
+    "Enter keywords separated by a comma:": "Gib die Schlüsselwörter durch einen Beistrich getrennt ein:",
     "Forward Message": "Nachricht weiterleiten",
     "You have successfully set a password and an email address!": "Du hast erfolgreich ein Passwort und eine E-Mail-Adresse gesetzt!",
     "Remove %(name)s from the directory?": "Soll der Raum %(name)s aus dem Verzeichnis entfernt werden?",
@@ -781,7 +781,7 @@
     "Thank you!": "Danke!",
     "Uploaded on %(date)s by %(user)s": "Hochgeladen: %(date)s von %(user)s",
     "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "In deinem aktuell verwendeten Browser können Aussehen und Handhabung der Anwendung unter Umständen noch komplett fehlerhaft sein, so dass einige bzw. im Extremfall alle Funktionen nicht zur Verfügung stehen. Du kannst es trotzdem versuchen und fortfahren, bist dabei aber bezüglich aller auftretenden Probleme auf dich allein gestellt!",
-    "Checking for an update...": "Nach Aktualisierung suchen...",
+    "Checking for an update...": "Nach Aktualisierungen suchen...",
     "Missing roomId.": "Fehlende Raum-ID.",
     "Every page you use in the app": "Jede Seite, die du in der App benutzt",
     "e.g. <CurrentPageURL>": "z. B. <CurrentPageURL>",
@@ -903,7 +903,7 @@
     "Avoid repeated words and characters": "Vermeide wiederholte Worte und Zeichen",
     "Avoid sequences": "Vermeide Sätze",
     "Avoid recent years": "Vermeide die letzten Jahre",
-    "Avoid years that are associated with you": "Vermeide Jahre, die mit dir zusammenhängen",
+    "Avoid years that are associated with you": "Vermeide Jahreszahlen, die mit dir zu tun haben",
     "Avoid dates and years that are associated with you": "Vermeide Daten und Jahre, die mit dir in Verbindung stehen",
     "Capitalization doesn't help very much": "Großschreibung hilft nicht viel",
     "All-uppercase is almost as easy to guess as all-lowercase": "Alles groß zu schreiben ist genauso einfach zu erraten, wie alles klein zu schreiben",
@@ -978,7 +978,7 @@
     "%(names)s and %(lastPerson)s are typing …": "%(names)s und %(lastPerson)s tippen…",
     "Render simple counters in room header": "Einfache Zähler in Raumkopfzeile anzeigen",
     "Enable Emoji suggestions while typing": "Emojivorschläge während Eingabe",
-    "Show a placeholder for removed messages": "Zeigt einen Platzhalter für gelöschte Nachrichten an",
+    "Show a placeholder for removed messages": "Platzhalter für gelöschte Nachrichten",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Betreten oder Verlassen von Benutzern (ausgen. Einladungen/Rauswürfe/Banne)",
     "Show avatar changes": "Avataränderungen anzeigen",
     "Show display name changes": "Änderungen von Anzeigenamen",
@@ -1036,7 +1036,7 @@
     "%(senderDisplayName)s has allowed guests to join the room.": "%(senderDisplayName)s erlaubte Gäste diesem Raum beizutreten.",
     "%(senderDisplayName)s has prevented guests from joining the room.": "%(senderDisplayName)s hat Gästen verboten, diesem Raum beizutreten.",
     "%(senderDisplayName)s changed guest access to %(rule)s": "%(senderDisplayName)s änderte den Gastzugriff auf '%(rule)s'",
-    "Group & filter rooms by custom tags (refresh to apply changes)": "Gruppiere und filtere Räume nach eigenen Tags (neu laden um Änderungen zu übernehmen)",
+    "Group & filter rooms by custom tags (refresh to apply changes)": "[Veraltet] Gruppiere und filtere Räume nach eigenen Tags (neu laden um Änderungen zu übernehmen)",
     "Unable to find a supported verification method.": "Konnte keine unterstützte Verifikationsmethode finden.",
     "Dog": "Hund",
     "Cat": "Katze",
@@ -1101,12 +1101,12 @@
     "Folder": "Ordner",
     "Pin": "Anheften",
     "Timeline": "Chatverlauf",
-    "Autocomplete delay (ms)": "Verzögerung zur Autovervollständigung (ms)",
+    "Autocomplete delay (ms)": "Verzögerung vor Autovervollständigung (ms)",
     "Roles & Permissions": "Rollen und Berechtigungen",
     "Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.": "Änderungen an der Sichtbarkeit des Chatverlaufs gelten nur für zukünftige Nachrichten. Die Sichtbarkeit des existierenden Verlaufs bleibt unverändert.",
     "Security & Privacy": "Sicherheit",
     "Encryption": "Verschlüsselung",
-    "Once enabled, encryption cannot be disabled.": "Sobald aktiviert, kann die Verschlüsselung nicht mehr deaktiviert werden.",
+    "Once enabled, encryption cannot be disabled.": "Sobald du die Verschlüsselung aktivierst, kann du sie nicht mehr deaktivieren.",
     "Encrypted": "Verschlüsselt",
     "Ignored users": "Blockierte Benutzer",
     "Key backup": "Schlüsselsicherung",
@@ -1190,7 +1190,7 @@
     "Bulk options": "Sammeloptionen",
     "Join millions for free on the largest public server": "Schließe dich kostenlos auf dem größten öffentlichen Server Millionen von Menschen an",
     "Prepends ¯\\_(ツ)_/¯ to a plain-text message": "Stellt ¯\\_(ツ)_/¯ einer Klartextnachricht voran",
-    "Changes your display nickname in the current room only": "Ändert den Anzeigenamen ausschließlich für den aktuellen Raum",
+    "Changes your display nickname in the current room only": "Ändert deinen Anzeigenamen nur für den aktuellen Raum",
     "%(senderDisplayName)s enabled flair for %(groups)s in this room.": "%(senderDisplayName)s hat Abzeichen der Gruppen %(groups)s für diesen Raum aktiviert.",
     "%(senderDisplayName)s disabled flair for %(groups)s in this room.": "%(senderDisplayName)s hat Abzeichen der Gruppen %(groups)s in diesem Raum deaktiviert.",
     "%(senderDisplayName)s enabled flair for %(newGroups)s and disabled flair for %(oldGroups)s in this room.": "%(senderDisplayName)s hat Abzeichen von %(newGroups)s aktiviert und von %(oldGroups)s deaktiviert.",
@@ -1203,9 +1203,9 @@
     "Change room avatar": "Ändere Raumbild",
     "Change room name": "Ändere Raumname",
     "Change main address for the room": "Ändere Hauptadresse für den Raum",
-    "Change history visibility": "Ändere Sichtbarkeit der Historie",
+    "Change history visibility": "Sichtbarkeit des Verlaufs ändern",
     "Change permissions": "Ändere Berechtigungen",
-    "Change topic": "Ändere das Thema",
+    "Change topic": "Thema ändern",
     "Modify widgets": "Widgets bearbeiten",
     "Default role": "Standard-Rolle",
     "Send messages": "Nachrichten senden",
@@ -1249,7 +1249,7 @@
     "Please supply a https:// or http:// widget URL": "Bitte gib eine mit https:// oder http:// beginnende Widget-URL an",
     "Sends the given emote coloured as a rainbow": "Zeigt Aktionen in Regenbogenfarben",
     "%(senderName)s made no change.": "%(senderName)s hat keine Änderung vorgenommen.",
-    "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s hat die Einladung zum Raumbeitritt für %(targetDisplayName)s zurückgezogen.",
+    "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s hat die Einladung für %(targetDisplayName)s zurückgezogen.",
     "Cannot reach homeserver": "Der Heimserver ist nicht erreichbar",
     "Ensure you have a stable internet connection, or get in touch with the server admin": "Stelle sicher, dass du eine stabile Internetverbindung hast oder wende dich an deinen Serveradministrator",
     "Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.": "Wende dich an deinen %(brand)s-Admin um <a>deine Konfiguration</a> auf ungültige oder doppelte Einträge zu überprüfen.",
@@ -1446,7 +1446,7 @@
     "Go": "Los",
     "Command Help": "Befehl Hilfe",
     "To help us prevent this in future, please <a>send us logs</a>.": "Um uns zu helfen, dies in Zukunft zu vermeiden, <a>sende uns bitte die Protokolldateien</a>.",
-    "Notification settings": "Benachrichtigungseinstellungen",
+    "Notification settings": "Benachrichtigungen",
     "Help": "Hilf uns",
     "Filter": "Filtern",
     "Filter rooms…": "Räume filtern…",
@@ -1459,7 +1459,7 @@
     "Your key share request has been sent - please check your other sessions for key share requests.": "Deine Schlüsselanfrage wurde gesendet - sieh in deinen anderen Sitzungen nach der Schlüsselanfrage.",
     "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.": "Schlüsselanfragen werden automatisch an deine anderen Sitzungen gesendet. Wenn du sie abgelehnt oder ignoriert hast, klicke hier, um die Schlüssel erneut anzufordern.",
     "If your other sessions do not have the key for this message you will not be able to decrypt them.": "Wenn deine anderen Sitzungen nicht über den Schlüssel für diese Nachricht verfügen, kannst du die Nachricht nicht entschlüsseln.",
-    "<requestLink>Re-request encryption keys</requestLink> from your other sessions.": "<requestLink>Fordere die Schlüssel aus deinen anderen Sitzungen erneut an</requestLink>.",
+    "<requestLink>Re-request encryption keys</requestLink> from your other sessions.": "<requestLink>Schlüssel aus deinen anderen Sitzungen erneut anfordern</requestLink>.",
     "Room %(name)s": "Raum %(name)s",
     "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Ein Aktualisierung dieses Raums deaktiviert die aktuelle Instanz des Raums und erstellt einen aktualisierten Raum mit demselben Namen.",
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) hat sich zu einer neuen Sitzung angemeldet, ohne sie zu verifizieren:",
@@ -2028,7 +2028,7 @@
     "Doesn't look like a valid email address": "Das sieht nicht nach einer gültigen E-Mail-Adresse aus",
     "Enter phone number (required on this homeserver)": "Telefonnummer eingeben (auf diesem Heimserver erforderlich)",
     "Doesn't look like a valid phone number": "Das sieht nicht nach einer gültigen Telefonnummer aus",
-    "Sign in with SSO": "Mit Single-Sign-On anmelden",
+    "Sign in with SSO": "Einmalanmeldung verwenden",
     "Welcome to %(appName)s": "Willkommen bei %(appName)s",
     "Send a Direct Message": "Direktnachricht senden",
     "Create a Group Chat": "Gruppenchat erstellen",
@@ -2107,7 +2107,7 @@
     "Failed to re-authenticate due to a homeserver problem": "Erneute Authentifizierung aufgrund eines Problems im Heimserver fehlgeschlagen",
     "Failed to re-authenticate": "Erneute Authentifizierung fehlgeschlagen",
     "Command Autocomplete": "Autovervollständigung aktivieren",
-    "Community Autocomplete": "Community-Auto-Vervollständigung",
+    "Community Autocomplete": "Community-Autovervollständigung",
     "DuckDuckGo Results": "DuckDuckGo Ergebnisse",
     "Great! This recovery passphrase looks strong enough.": "Super! Diese Wiederherstellungspassphrase sieht stark genug aus.",
     "Enter a recovery passphrase": "Gib eine Wiederherstellungspassphrase ein",
@@ -2129,12 +2129,12 @@
     "Navigation": "Navigation",
     "Calls": "Anrufe",
     "Room List": "Raumliste",
-    "Autocomplete": "Auto-Vervollständigung",
+    "Autocomplete": "Autovervollständigung",
     "Alt": "Alt",
-    "Toggle microphone mute": "Schalte Mikrofon stumm/an",
-    "Toggle video on/off": "Schalte Video an/aus",
+    "Toggle microphone mute": "Mikrofon an-/ausschalten",
+    "Toggle video on/off": "Video an-/ausschalten",
     "Jump to room search": "Zur Raumsuche springen",
-    "Close dialog or context menu": "Schließe Dialog oder Kontextmenü",
+    "Close dialog or context menu": "Dialog oder Kontextmenü schließen",
     "Cancel autocomplete": "Autovervollständigung deaktivieren",
     "Unable to revoke sharing for email address": "Dem Teilen der E-Mail-Adresse kann nicht widerrufen werden",
     "Unable to validate homeserver/identity server": "Heimserver/Identitätsserver nicht validierbar",
@@ -2172,13 +2172,13 @@
     "Activate selected button": "Ausgewählten Button aktivieren",
     "Toggle right panel": "Rechtes Panel ein-/ausblenden",
     "Toggle this dialog": "Diesen Dialog ein-/ausblenden",
-    "Move autocomplete selection up/down": "Auto-Vervollständigung nach oben/unten verschieben",
+    "Move autocomplete selection up/down": "Autovervollständigung nach oben/unten verschieben",
     "Opens chat with the given user": "Öffnet einen Chat mit diesem Benutzer",
     "Sends a message to the given user": "Sendet diesem Benutzer eine Nachricht",
     "Waiting for your other session to verify…": "Warte auf die Verifikation deiner anderen Sitzungen…",
     "You've successfully verified your device!": "Du hast dein Gerät erfolgreich verifiziert!",
     "QR Code": "QR-Code",
-    "To continue, use Single Sign On to prove your identity.": "Zum Fortfahren, nutze Single Sign-On um deine Identität zu bestätigen.",
+    "To continue, use Single Sign On to prove your identity.": "Zum Fortfahren nutze die Einmalanmeldung um deine Identität zu bestätigen.",
     "Confirm to continue": "Bestätige um fortzufahren",
     "Click the button below to confirm your identity.": "Klicke den Button unten um deine Identität zu bestätigen.",
     "Confirm encryption setup": "Bestätige die Einrichtung der Verschlüsselung",
@@ -2257,8 +2257,8 @@
     "Light": "Hell",
     "Dark": "Dunkel",
     "Use the improved room list (will refresh to apply changes)": "Verwende die verbesserte Raumliste (lädt die Anwendung neu)",
-    "Use custom size": "Verwende individuelle Größe",
-    "Hey you. You're the best!": "Hey du. Du bist großartig.",
+    "Use custom size": "Andere Schriftgröße verwenden",
+    "Hey you. You're the best!": "Hey du. Du bist großartig!",
     "Message layout": "Nachrichtenlayout",
     "Compact": "Kompakt",
     "Modern": "Modern",
@@ -2421,7 +2421,7 @@
     "Download logs": "Protokolle herunterladen",
     "Unexpected server error trying to leave the room": "Unerwarteter Serverfehler beim Versuch den Raum zu verlassen",
     "Error leaving room": "Fehler beim Verlassen des Raums",
-    "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.": "Communities v2 Prototyp. Benötigt einen kompatiblen Heimserver. Höchst experimentell - mit Vorsicht verwenden.",
+    "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.": "[Veraltet] Communities v2 Prototyp. Benötigt einen kompatiblen Heimserver. Höchst experimentell - mit Vorsicht verwenden.",
     "Explore rooms in %(communityName)s": "Räume in %(communityName)s erkunden",
     "Set up Secure Backup": "Schlüsselsicherung einrichten",
     "Information": "Information",
@@ -2570,7 +2570,7 @@
     "Change the avatar of this room": "Icon von diesem Raum ändern",
     "See when the avatar changes in this room": "Sehen, wenn sich das Icon des Raums ändert",
     "Change the avatar of your active room": "Den Avatar deines aktiven Raums ändern",
-    "See when the avatar changes in your active room": "Sehen wenn ein Avatar in deinem aktiven Raum geändert wird",
+    "See when the avatar changes in your active room": "Sehen, wenn das Icon in deinem aktiven Raum geändert wird",
     "Send stickers to this room as you": "Einen Sticker in diesen Raum senden",
     "See when a sticker is posted in this room": "Sehe wenn ein Sticker in diesen Raum gesendet wird",
     "Send stickers to your active room as you": "Einen Sticker als du in deinen aktiven Raum senden",
@@ -2597,7 +2597,7 @@
     "See videos posted to your active room": "In deinen aktiven Raum gesendete Videos anzeigen",
     "See videos posted to this room": "In diesen Raum gesendete Videos anzeigen",
     "Send images as you in this room": "Bilder als du in diesen Raum senden",
-    "Send images as you in your active room": "Bilder als du in deinem aktiven Raum senden",
+    "Send images as you in your active room": "Sende Bilder als deine Person in den aktiven Raum.",
     "See images posted to this room": "In diesen Raum gesendete Bilder anzeigen",
     "See images posted to your active room": "In deinen aktiven Raum gesendete Bilder anzeigen",
     "Send videos as you in this room": "Videos als du in diesen Raum senden",
@@ -2621,7 +2621,7 @@
     "Call Paused": "Anruf pausiert",
     "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|other": "Verschlüsselte Nachrichten sicher lokal zwischenspeichern, um sie in Suchergebnissen finden zu können. Es werden %(size)s benötigt, um die Nachrichten von %(rooms)s Räumen zu speichern.",
     "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|one": "Verschlüsselte Nachrichten sicher lokal zwischenspeichern, um sie in Suchergebnissen finden zu können. Es werden %(size)s benötigt, um die Nachrichten vom Raum %(rooms)s zu speichern.",
-    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Nur ihr zwei seid in dieser Konversation, außer ihr ladet jemanden Neues ein.",
+    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Nur ihr beide nehmt an dieser Konversation teil, es sei denn, ihr ladet jemanden ein.",
     "This is the beginning of your direct message history with <displayName/>.": "Dies ist der Beginn deiner Direktnachrichten mit <displayName/>.",
     "Topic: %(topic)s (<a>edit</a>)": "Thema: %(topic)s (<a>ändern</a>)",
     "Topic: %(topic)s ": "Thema: %(topic)s ",
@@ -2945,7 +2945,7 @@
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Element with an existing Matrix account on a different homeserver.": "Du kannst in den benutzerdefinierten Serveroptionen eine andere Heimserver-URL angeben, um dich bei anderen Matrixservern anzumelden.",
     "Server Options": "Servereinstellungen",
     "No other application is using the webcam": "keine andere Anwendung auf die Webcam zugreift",
-    "Permission is granted to use the webcam": "auf die Webcam zugegriffen werden darf",
+    "Permission is granted to use the webcam": "Zugriff auf die Webcam ist gestattet.",
     "A microphone and webcam are plugged in and set up correctly": "Mikrofon und Webcam eingesteckt und richtig eingerichtet sind",
     "Call failed because no microphone could not be accessed. Check that a microphone is plugged in and set up correctly.": "Der Anruf ist fehlgeschlagen weil nicht auf das Mikrofon zugegriffen werden konnte. Stelle sicher, dass das Mikrofon richtig eingesteckt und eingerichtet ist.",
     "Call failed because no webcam or microphone could not be accessed. Check that:": "Der Anruf ist fehlgeschlagen weil nicht auf das Mikrofon oder die Webcam zugegriffen werden konnte. Stelle sicher, dass:",
@@ -2954,7 +2954,7 @@
     "Host account on": "Benutzer*innenkonto betreiben an",
     "Hold": "Halten",
     "Resume": "Fortsetzen",
-    "We call the places where you can host your account ‘homeservers’.": "Den Ort, an dem du dein Benutzer*innenkonto betreibst, nennen wir „Heimserver“.",
+    "We call the places where you can host your account ‘homeservers’.": "Den Ort, an dem du dein Konto betreibst, nennen wir „Heimserver“.",
     "Invalid URL": "Ungültiger Link",
     "Unable to validate homeserver": "Überprüfung des Heimservers nicht möglich",
     "%(name)s paused": "%(name)s hat pausiert",
@@ -3003,7 +3003,7 @@
     "Workspace: <networkLink/>": "Arbeitsraum: <networkLink/>",
     "Dial pad": "Wähltastatur",
     "There was an error looking up the phone number": "Beim Suchen der Telefonnummer ist ein Fehler aufgetreten",
-    "Change which room, message, or user you're viewing": "Ändere welchen Raum, Nachricht oder Nutzer du siehst",
+    "Change which room, message, or user you're viewing": "Ändere den sichtbaren Raum, Nachricht oder Nutzer",
     "Unable to look up phone number": "Telefonnummer konnte nicht gefunden werden",
     "This session has detected that your Security Phrase and key for Secure Messages have been removed.": "In dieser Sitzung wurde festgestellt, dass deine Sicherheitsphrase und dein Schlüssel für sichere Nachrichten entfernt wurden.",
     "A new Security Phrase and key for Secure Messages have been detected.": "Eine neue Sicherheitsphrase und ein neuer Schlüssel für sichere Nachrichten wurden erkannt.",
@@ -3025,7 +3025,7 @@
     "Security Key mismatch": "Nicht übereinstimmende Sicherheitsschlüssel",
     "Set my room layout for everyone": "Diese Raumgestaltung für alle setzen",
     "%(senderName)s has updated the widget layout": "%(senderName)s hat das Widget-Layout aktualisiert",
-    "Search (must be enabled)": "Suche (muss aktiviert sein)",
+    "Search (must be enabled)": "Suchen (muss in den Einstellungen aktiviert sein)",
     "Remember this": "Dies merken",
     "The widget will verify your user ID, but won't be able to perform actions for you:": "Das Widget überprüft deine Nutzer-ID, kann jedoch keine Aktionen für dich ausführen:",
     "Allow this widget to verify your identity": "Erlaube diesem Widget deine Identität zu überprüfen",
@@ -3085,7 +3085,7 @@
     "Save changes": "Änderungen speichern",
     "Undo": "Rückgängig",
     "Save Changes": "Änderungen Speichern",
-    "View dev tools": "Entwicklerwerkzeuge anzeigen",
+    "View dev tools": "Entwicklerwerkzeuge",
     "Apply": "Anwenden",
     "Create a new room": "Neuen Raum erstellen",
     "Suggested Rooms": "Vorgeschlagene Räume",
@@ -3094,7 +3094,7 @@
     "New room": "Neuer Raum",
     "Share invite link": "Einladungslink teilen",
     "Click to copy": "Klicken um zu kopieren",
-    "Collapse space panel": "Space-Feld zuklappen",
+    "Collapse space panel": "Space-Feld einklappen",
     "Expand space panel": "Space-Feld aufklappen",
     "Creating...": "Erstelle...",
     "You can change these at any point.": "Du kannst diese jederzeit ändern.",
@@ -3161,7 +3161,7 @@
     "Invite to %(spaceName)s": "Leute zu %(spaceName)s einladen",
     "Spaces": "Spaces",
     "Invite People": "Personen einladen",
-    "Invite with email or username": "Personen mit E-Mail oder Benutzername einladen",
+    "Invite with email or username": "Personen mit E-Mail oder Benutzernamen einladen",
     "You can change these anytime.": "Du kannst diese jederzeit ändern.",
     "From %(deviceName)s (%(deviceId)s) at %(ip)s": "Von %(deviceName)s (%(deviceId)s) mit der Adresse %(ip)s",
     "A new login is accessing your account: %(name)s (%(deviceID)s) at %(ip)s": "Neue Anmeldung: %(name)s (%(deviceID)s) mit der IP-Adresse %(ip)s",
@@ -3222,7 +3222,7 @@
     "Manage & explore rooms": "Räume entdecken und verwalten",
     "unknown person": "unbekannte Person",
     "Send and receive voice messages (in development)": "Sprachnachrichten senden und empfangen (in der Entwicklung)",
-    "Check your devices": "Überprüfe dein Gerät",
+    "Check your devices": "Überprüfe deine Sitzungen",
     "%(deviceId)s from %(ip)s": "%(deviceId)s von %(ip)s",
     "This homeserver has been blocked by it's administrator.": "Dieser Heimserver wurde von seiner Administration blockiert.",
     "You have unverified logins": "Du hast nicht-bestätigte Anmeldungen",
@@ -3243,8 +3243,44 @@
     "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Soll die Host-Erstellung wirklich abgebrochen werden? Dieser Prozess kann nicht wieder fortgesetzt werden.",
     "Invite to just this room": "Nur für diesen Raum einladen",
     "Consult first": "Konsultiere zuerst",
-    "Reset event store?": "Ereigniss-Speicher zurück setzen?",
-    "You most likely do not want to reset your event index store": "Es ist wahrscheinlich, dass du den Ereigniss-Index-Speicher nicht zurück setzen möchtest",
+    "Reset event store?": "Ereignisspeicher zurück setzen?",
+    "You most likely do not want to reset your event index store": "Es ist wahrscheinlich, dass du den Ereignis-Indexspeicher nicht zurück setzen möchtest",
     "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few momentswhilst the index is recreated": "Falls du dies tust, werden keine deiner Nachrichten gelöscht. Allerdings wird die Such-Funktion eine Weile lang schlecht funktionieren, bis der Index wieder hergestellt ist",
-    "Reset event store": "Ereignis-Speicher zurück setzen"
+    "Reset event store": "Ereignisspeicher zurück setzen",
+    "Show options to enable 'Do not disturb' mode": "Optionen für den \"Nicht-Stören-Modus\" anzeigen",
+    "You can add more later too, including already existing ones.": "Natürlich kannst du jederzeit weitere Räume hinzufügen.",
+    "Let's create a room for each of them.": "Wir erstellen dir für jedes Thema einen Raum.",
+    "What are some things you want to discuss in %(spaceName)s?": "Welche Themen willst du in %(spaceName)s besprechen?",
+    "Inviting...": "Einladen...",
+    "Failed to create initial space rooms": "Fehler beim Initialisieren des Space",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Du bist hier noch alleine. Wenn du den Space verlässt, ist er für immer verloren (eine lange Zeit).",
+    "Edit settings relating to your space.": "Einstellungen vom Space bearbeiten.",
+    "Please choose a strong password": "Bitte gib ein sicheres Passwort ein",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Wenn du alles zurücksetzt, gehen alle verifizierten Anmeldungen, Benutzer und verschlüsselte Nachrichten verloren.",
+    "Only do this if you have no other device to complete verification with.": "Verwende es nur, wenn du kein Gerät, mit dem du dich verifizieren, kannst bei dir hast.",
+    "Reset everything": "Alles zurücksetzen",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Hast du alle Wiederherstellungsmethoden vergessen? <a>Setze sie hier zurück</a>",
+    "View message": "Nachricht anzeigen",
+    "Zoom in": "Vergrößern",
+    "Zoom out": "Verkleinern",
+    "%(seconds)ss left": "%(seconds)s vergangen",
+    "Change server ACLs": "ACLs des Servers bearbeiten",
+    "Failed to send": "Fehler beim Senden",
+    "View all %(count)s members|other": "Alle %(count)s Mitglieder anzeigen",
+    "View all %(count)s members|one": "Mitglied anzeigen",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "Some of your messages have not been sent": "Einige Nachrichten konnten nicht gesendet werden",
+    "Original event source": "Ursprüngliche Rohdaten",
+    "Decrypted event source": "Entschlüsselte Rohdaten",
+    "Sending": "Senden",
+    "You can select all or individual messages to retry or delete": "Du kannst einzelne oder alle Nachrichten erneut senden oder löschen",
+    "Delete all": "Alle löschen",
+    "Retry all": "Alle erneut senden",
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Ohne deine Verifikation kannst du keine deiner verschlüsselten Nachrichten lesen und andere vertrauen dir möglicherweise nicht.",
+    "Verify your identity to access encrypted messages and prove your identity to others.": "Verifiziere diese Anmeldung, um auf verschlüsselte Nachrichten zuzugreifen und dich anderen gegenüber zu identifizieren.",
+    "Use another login": "Mit anderem Gerät verifizeren",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Falls du es wirklich willst: Es werden keine Nachrichten gelöscht. Außerdem wird die Suche, während der Index erstellt wird, etwas langsamer sein",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s Mitglieder inklusive %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Inklusive%(commaSeparatedMembers)s",
+    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Beratung mit %(transferTarget)s. <a>Übertragung zu %(transferee)s</a>"
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f1b700540f..dcad970300 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -658,7 +658,6 @@
     "No homeserver URL provided": "No homeserver URL provided",
     "Unexpected error resolving homeserver configuration": "Unexpected error resolving homeserver configuration",
     "Unexpected error resolving identity server configuration": "Unexpected error resolving identity server configuration",
-    "The message you are trying to send is too large.": "The message you are trying to send is too large.",
     "This homeserver has hit its Monthly Active User limit.": "This homeserver has hit its Monthly Active User limit.",
     "This homeserver has been blocked by its administrator.": "This homeserver has been blocked by its administrator.",
     "This homeserver has exceeded one of its resource limits.": "This homeserver has exceeded one of its resource limits.",
@@ -834,7 +833,7 @@
     "Match system theme": "Match system theme",
     "Use a system font": "Use a system font",
     "System font name": "System font name",
-    "Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls",
+    "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)",
     "Send analytics data": "Send analytics data",
     "Never send encrypted messages to unverified sessions from this session": "Never send encrypted messages to unverified sessions from this session",
     "Never send encrypted messages to unverified sessions in this room from this session": "Never send encrypted messages to unverified sessions in this room from this session",
@@ -886,6 +885,7 @@
     "You held the call <a>Switch</a>": "You held the call <a>Switch</a>",
     "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
     "%(peerName)s held the call": "%(peerName)s held the call",
+    "Connecting": "Connecting",
     "Video Call": "Video Call",
     "Voice Call": "Voice Call",
     "Fill Screen": "Fill Screen",
@@ -900,6 +900,8 @@
     "Incoming call": "Incoming call",
     "Decline": "Decline",
     "Accept": "Accept",
+    "Pause": "Pause",
+    "Play": "Play",
     "The other party cancelled the verification.": "The other party cancelled the verification.",
     "Verified!": "Verified!",
     "You've successfully verified this user.": "You've successfully verified this user.",
@@ -1251,8 +1253,9 @@
     "olm version:": "olm version:",
     "Homeserver is": "Homeserver is",
     "Identity Server is": "Identity Server is",
-    "Access Token:": "Access Token:",
-    "click to reveal": "click to reveal",
+    "Access Token": "Access Token",
+    "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
+    "Copy": "Copy",
     "Clear cache and reload": "Clear cache and reload",
     "Labs": "Labs",
     "Customise your experience with experimental labs features. <a>Learn more</a>.": "Customise your experience with experimental labs features. <a>Learn more</a>.",
@@ -1306,6 +1309,7 @@
     "Cryptography": "Cryptography",
     "Session ID:": "Session ID:",
     "Session key:": "Session key:",
+    "You have no ignored users.": "You have no ignored users.",
     "Bulk options": "Bulk options",
     "Accept all %(invitedRooms)s invites": "Accept all %(invitedRooms)s invites",
     "Reject all %(invitedRooms)s invites": "Reject all %(invitedRooms)s invites",
@@ -1453,6 +1457,7 @@
     "Sending your message...": "Sending your message...",
     "Encrypting your message...": "Encrypting your message...",
     "Your message was sent": "Your message was sent",
+    "Failed to send": "Failed to send",
     "Please select the destination room for this message": "Please select the destination room for this message",
     "Scroll to most recent messages": "Scroll to most recent messages",
     "Close preview": "Close preview",
@@ -1549,6 +1554,8 @@
     "Explore all public rooms": "Explore all public rooms",
     "Quick actions": "Quick actions",
     "Use the + to make a new room or explore existing ones below": "Use the + to make a new room or explore existing ones below",
+    "%(count)s results in all spaces|other": "%(count)s results in all spaces",
+    "%(count)s results in all spaces|one": "%(count)s result in all spaces",
     "%(count)s results|other": "%(count)s results",
     "%(count)s results|one": "%(count)s result",
     "This room": "This room",
@@ -1644,8 +1651,13 @@
     "Invited by %(sender)s": "Invited by %(sender)s",
     "Jump to first unread message.": "Jump to first unread message.",
     "Mark all as read": "Mark all as read",
+    "Unable to access your microphone": "Unable to access your microphone",
+    "We were unable to access your microphone. Please check your browser settings and try again.": "We were unable to access your microphone. Please check your browser settings and try again.",
+    "No microphone found": "No microphone found",
+    "We didn't find a microphone on your device. Please check your settings and try again.": "We didn't find a microphone on your device. Please check your settings and try again.",
     "Record a voice message": "Record a voice message",
-    "Stop & send recording": "Stop & send recording",
+    "Stop the recording": "Stop the recording",
+    "Delete recording": "Delete recording",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",
@@ -1811,8 +1823,9 @@
     "The encryption used by this room isn't supported.": "The encryption used by this room isn't supported.",
     "Error decrypting audio": "Error decrypting audio",
     "React": "React",
-    "Reply": "Reply",
     "Edit": "Edit",
+    "Retry": "Retry",
+    "Reply": "Reply",
     "Message Actions": "Message Actions",
     "Attachment": "Attachment",
     "Error decrypting attachment": "Error decrypting attachment",
@@ -1841,6 +1854,7 @@
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
     "Error decrypting video": "Error decrypting video",
+    "Error processing voice message": "Error processing voice message",
     "Show all": "Show all",
     "Reactions": "Reactions",
     "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
@@ -1923,10 +1937,10 @@
     "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
     "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
     "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
-    "Rotate Right": "Rotate Right",
-    "Rotate Left": "Rotate Left",
     "Zoom out": "Zoom out",
     "Zoom in": "Zoom in",
+    "Rotate Right": "Rotate Right",
+    "Rotate Left": "Rotate Left",
     "Download": "Download",
     "Information": "Information",
     "View message": "View message",
@@ -2016,15 +2030,16 @@
     "Add a new server...": "Add a new server...",
     "%(networkName)s rooms": "%(networkName)s rooms",
     "Matrix rooms": "Matrix rooms",
-    "Space selection": "Space selection",
-    "Add existing rooms": "Add existing rooms",
     "Filter your rooms and spaces": "Filter your rooms and spaces",
     "Spaces": "Spaces",
     "Direct Messages": "Direct Messages",
-    "Don't want to add an existing room?": "Don't want to add an existing room?",
+    "Space selection": "Space selection",
+    "Add existing rooms": "Add existing rooms",
+    "Not all selected were added": "Not all selected were added",
+    "Adding rooms... (%(progress)s out of %(count)s)|other": "Adding rooms... (%(progress)s out of %(count)s)",
+    "Adding rooms... (%(progress)s out of %(count)s)|one": "Adding room...",
+    "Want to add a new room instead?": "Want to add a new room instead?",
     "Create a new room": "Create a new room",
-    "Failed to add rooms to space": "Failed to add rooms to space",
-    "Adding...": "Adding...",
     "Matrix ID": "Matrix ID",
     "Matrix Room ID": "Matrix Room ID",
     "email address": "email address",
@@ -2335,7 +2350,6 @@
     "Share Community": "Share Community",
     "Share Room Message": "Share Room Message",
     "Link to selected message": "Link to selected message",
-    "Copy": "Copy",
     "Command Help": "Command Help",
     "Failed to save space settings.": "Failed to save space settings.",
     "Space settings": "Space settings",
@@ -2397,7 +2411,6 @@
     "Confirm encryption setup": "Confirm encryption setup",
     "Click the button below to confirm setting up encryption.": "Click the button below to confirm setting up encryption.",
     "Unable to set up keys": "Unable to set up keys",
-    "Retry": "Retry",
     "Restoring keys from backup": "Restoring keys from backup",
     "Fetching keys from server...": "Fetching keys from server...",
     "%(completed)s of %(total)s keys restored": "%(completed)s of %(total)s keys restored",
@@ -2426,10 +2439,7 @@
     "Reject invitation": "Reject invitation",
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
-    "Resend edit": "Resend edit",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
-    "Resend removal": "Resend removal",
-    "Cancel Sending": "Cancel Sending",
     "Forward Message": "Forward Message",
     "Pin Message": "Pin Message",
     "Unhide Preview": "Unhide Preview",
@@ -2611,16 +2621,18 @@
     "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.",
     "Explore rooms in %(communityName)s": "Explore rooms in %(communityName)s",
     "Filter": "Filter",
+    "Filter all spaces": "Filter all spaces",
     "Clear filter": "Clear filter",
     "Filter rooms and people": "Filter rooms and people",
     "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
     "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
     "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.",
     "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.",
-    "%(count)s of your messages have not been sent.|other": "Some of your messages have not been sent.",
-    "%(count)s of your messages have not been sent.|one": "Your message was not sent.",
-    "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.",
-    "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Resend message</resendText> or <cancelText>cancel message</cancelText> now.",
+    "Some of your messages have not been sent": "Some of your messages have not been sent",
+    "Delete all": "Delete all",
+    "Retry all": "Retry all",
+    "Sending": "Sending",
+    "You can select all or individual messages to retry or delete": "You can select all or individual messages to retry or delete",
     "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
     "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
     "You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
@@ -2640,24 +2652,24 @@
     "%(count)s rooms|one": "%(count)s room",
     "This room is suggested as a good one to join": "This room is suggested as a good one to join",
     "Suggested": "Suggested",
+    "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.",
     "%(count)s rooms and %(numSpaces)s spaces|other": "%(count)s rooms and %(numSpaces)s spaces",
     "%(count)s rooms and %(numSpaces)s spaces|one": "%(count)s room and %(numSpaces)s spaces",
     "%(count)s rooms and 1 space|other": "%(count)s rooms and 1 space",
     "%(count)s rooms and 1 space|one": "%(count)s room and 1 space",
+    "Select a room below first": "Select a room below first",
     "Failed to remove some rooms. Try again later": "Failed to remove some rooms. Try again later",
     "Removing...": "Removing...",
     "Mark as not suggested": "Mark as not suggested",
     "Mark as suggested": "Mark as suggested",
     "No results found": "No results found",
     "You may want to try a different search or check for typos.": "You may want to try a different search or check for typos.",
-    "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.",
     "Search names and description": "Search names and description",
     "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
     "Create room": "Create room",
     "Public space": "Public space",
     "Private space": "Private space",
     "<inviter/> invites you": "<inviter/> invites you",
-    "Add existing rooms & spaces": "Add existing rooms & spaces",
     "Welcome to <name/>": "Welcome to <name/>",
     "Random": "Random",
     "Support": "Support",
@@ -2665,6 +2677,10 @@
     "Failed to create initial space rooms": "Failed to create initial space rooms",
     "Skip for now": "Skip for now",
     "Creating rooms...": "Creating rooms...",
+    "Failed to add rooms to space": "Failed to add rooms to space",
+    "Adding...": "Adding...",
+    "What do you want to organise?": "What do you want to organise?",
+    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.",
     "Share %(name)s": "Share %(name)s",
     "It's just you at the moment, it will be even better with others.": "It's just you at the moment, it will be even better with others.",
     "Go to my first room": "Go to my first room",
@@ -2801,7 +2817,7 @@
     "Use a different passphrase?": "Use a different passphrase?",
     "That doesn't match.": "That doesn't match.",
     "Go back to set it again.": "Go back to set it again.",
-    "Please enter your Security Phrase a second time to confirm.": "Please enter your Security Phrase a second time to confirm.",
+    "Enter your Security Phrase a second time to confirm it.": "Enter your Security Phrase a second time to confirm it.",
     "Repeat your Security Phrase...": "Repeat your Security Phrase...",
     "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.",
     "Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
@@ -2831,8 +2847,6 @@
     "You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
     "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
     "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.": "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.",
-    "Enter your recovery passphrase a second time to confirm it.": "Enter your recovery passphrase a second time to confirm it.",
-    "Confirm your recovery passphrase": "Confirm your recovery passphrase",
     "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.",
     "Unable to query secret storage status": "Unable to query secret storage status",
     "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
diff --git a/src/i18n/strings/en_US.json b/src/i18n/strings/en_US.json
index 003da7ef8f..4a97b60a2e 100644
--- a/src/i18n/strings/en_US.json
+++ b/src/i18n/strings/en_US.json
@@ -657,5 +657,13 @@
     "Confirm adding email": "Confirm adding email",
     "Single Sign On": "Single Sign On",
     "Confirm adding this email address by using Single Sign On to prove your identity.": "Confirm adding this email address by using Single Sign On to prove your identity.",
-    "Use Single Sign On to continue": "Use Single Sign On to continue"
+    "Use Single Sign On to continue": "Use Single Sign On to continue",
+    "Message search initilisation failed": "Message search initialization failed",
+    "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait while we resynchronize with the server!",
+    "Customise your experience with experimental labs features. <a>Learn more</a>.": "Customize your experience with experimental labs features. <a>Learn more</a>.",
+    "Customise your appearance": "Customize your appearance",
+    "Unrecognised command: %(commandText)s": "Unrecognized command: %(commandText)s",
+    "Add some details to help people recognise it.": "Add some details to help people recognize it.",
+    "Unrecognised room address:": "Unrecognized room address:",
+    "A private space to organise your rooms": "A private space to organize your rooms"
 }
diff --git a/src/i18n/strings/eo.json b/src/i18n/strings/eo.json
index 62e8e1f98a..f4d30b40b7 100644
--- a/src/i18n/strings/eo.json
+++ b/src/i18n/strings/eo.json
@@ -3188,5 +3188,35 @@
     "Space options": "Agordoj de aro",
     "Space Home": "Hejmo de aro",
     "with state key %(stateKey)s": "kun statŝlosilo %(stateKey)s",
-    "with an empty state key": "kun malplena statŝlosilo"
+    "with an empty state key": "kun malplena statŝlosilo",
+    "Invited people will be able to read old messages.": "Invititoj povos legi malnovajn mesaĝojn.",
+    "Adding...": "Aldonante…",
+    "Add existing rooms": "Aldoni jamajn ĉambrojn",
+    "View message": "Montri mesaĝon",
+    "Zoom in": "Zomi",
+    "Zoom out": "Malzomi",
+    "%(count)s people you know have already joined|one": "%(count)s persono, kiun vi konas, jam aliĝis",
+    "%(count)s people you know have already joined|other": "%(count)s personoj, kiujn vi konas, jam aliĝis",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s anoj inkluzive je %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Inkluzive je %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Montri 1 anon",
+    "View all %(count)s members|other": "Montri ĉiujn %(count)s anojn",
+    "Accept on your other login…": "Akceptu per via alia saluto…",
+    "Stop & send recording": "Ĉesi kaj sendi registrajon",
+    "Record a voice message": "Registri voĉmesaĝon",
+    "Quick actions": "Rapidaj agoj",
+    "Invite to just this room": "Inviti nur al ĉi tiu ĉambro",
+    "%(seconds)ss left": "%(seconds)s sekundoj restas",
+    "Failed to send": "Malsukcesis sendi",
+    "Change server ACLs": "Ŝanĝi servilblokajn listojn",
+    "Warn before quitting": "Averti antaŭ ĉesigo",
+    "Workspace: <networkLink/>": "Laborspaco: <networkLink/>",
+    "Manage & explore rooms": "Administri kaj esplori ĉambrojn",
+    "unknown person": "nekonata persono",
+    "Send and receive voice messages (in development)": "Sendi kaj ricevi voĉmesaĝojn (evoluigate)",
+    "Show options to enable 'Do not disturb' mode": "Montri elekteblojn por ŝalti sendistran reĝimon",
+    "%(deviceId)s from %(ip)s": "%(deviceId)s de %(ip)s",
+    "Review to ensure your account is safe": "Kontrolu por certigi sekurecon de via konto",
+    "Sends the given message as a spoiler": "Sendas la donitan mesaĝon kiel malkaŝon de intrigo"
 }
diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index d396cc318f..155aed321b 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -3225,5 +3225,28 @@
     "Use another login": "Usar otro inicio de sesión",
     "Verify your identity to access encrypted messages and prove your identity to others.": "Verifica tu identidad para acceder a mensajes cifrados y probar tu identidad a otros.",
     "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Si no verificas no tendrás acceso a todos tus mensajes y puede que aparezcas como no confiable para otros usuarios.",
-    "Invite messages are hidden by default. Click to show the message.": "Los mensajes de invitación no se muestran por defecto. Haz clic para mostrarlo."
+    "Invite messages are hidden by default. Click to show the message.": "Los mensajes de invitación no se muestran por defecto. Haz clic para mostrarlo.",
+    "You can select all or individual messages to retry or delete": "Puedes seleccionar uno o todos los mensajes para reintentar o eliminar",
+    "Sending": "Enviando",
+    "Retry all": "Reintentar todo",
+    "Delete all": "Borrar todo",
+    "Some of your messages have not been sent": "Algunos de tus mensajes no se han enviado",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Eres la única persona aquí. Si te vas, no podrá unirse nadie en el futuro, incluyéndote a ti.",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "¿Has olvidado o perdido todos los métodos de recuperación? <a>Restablecer todo</a>",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Si restableces todo, volverás a empezar sin sesiones ni usuarios de confianza, y puede que no puedas ver mensajes anteriores.",
+    "Only do this if you have no other device to complete verification with.": "Solo haz esto si no tienes ningún otro dispositivo con el que completar la verificación.",
+    "Reset everything": "Restablecer todo",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Si lo haces, ten en cuenta que ninguno de tus mensajes serán eliminados, pero la experiencia de búsqueda será peor durante unos momentos mientras recreamos el índice",
+    "View message": "Ver mensaje",
+    "Zoom in": "Acercar",
+    "Zoom out": "Alejar",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s miembros, incluyendo a %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Incluyendo %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Ver 1 miembro",
+    "View all %(count)s members|other": "Ver los %(count)s miembros",
+    "%(seconds)ss left": "%(seconds)ss restantes",
+    "Failed to send": "No se ha podido mandar",
+    "Change server ACLs": "Cambiar los ACLs del servidor",
+    "Show options to enable 'Do not disturb' mode": "Mostrar opciones para activar el modo «no molestar»"
 }
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index 444475deea..56f456b6e4 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -3263,5 +3263,28 @@
     "Use another login": "Pruugi muud kasutajakontot",
     "Verify your identity to access encrypted messages and prove your identity to others.": "Tagamaks ligipääsu oma krüptitud sõnumitele ja tõestamaks oma isikut teistele kasutajatale, verifitseeri end.",
     "Let's create a room for each of them.": "Teeme siis iga teema jaoks oma jututoa.",
-    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Ilma verifitseerimiseta sul puudub ligipääs kõikidele oma sõnumitele ning teised ei näe sinu kasutajakontot usaldusväärsena."
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Ilma verifitseerimiseta sul puudub ligipääs kõikidele oma sõnumitele ning teised ei näe sinu kasutajakontot usaldusväärsena.",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Sa oled siin viimane osaleja. Kui sa nüüd lahkud, siis mitte keegi, kaasa arvatud sa ise, ei saa hiljem enam liituda.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Kui sa kõik krüptoseosed lähtestad, siis sul esimese hooga pole ühtegi usaldusväärseks tunnistatud sessiooni ega kasutajat ning ilmselt ei saa sa lugeda vanu sõnumeid.",
+    "Only do this if you have no other device to complete verification with.": "Toimi nii vaid siis, kui sul pole jäänud ühtegi seadet, millega verifitseerimist lõpuni teha.",
+    "Reset everything": "Alusta kõigega algusest",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Unustasid või oled kaotanud kõik võimalused ligipääsu taastamiseks? <a>Lähtesta kõik ühe korraga</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Kui sa siiski soovid seda teha, siis sinu sõnumeid me ei kustuta, aga seniks kuni sõnumite indeks taustal uuesti luuakse, toimib otsing aeglaselt ja ebatõhusalt",
+    "View message": "Vaata sõnumit",
+    "Zoom in": "Suumi sisse",
+    "Zoom out": "Suumi välja",
+    "%(seconds)ss left": "jäänud %(seconds)s sekundit",
+    "Change server ACLs": "Muuda serveri ligipääsuõigusi",
+    "Show options to enable 'Do not disturb' mode": "Näita valikuid „Ära sega“ režiimi sisse lülitamiseks",
+    "You can select all or individual messages to retry or delete": "Sa võid valida kas kõik või mõned sõnumid kas kustutamiseks või uuesti saatmiseks",
+    "Sending": "Saadan",
+    "Retry all": "Proovi kõikidega uuesti",
+    "Delete all": "Kustuta kõik",
+    "Some of your messages have not been sent": "Mõned sinu sõnumid on saatmata",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s liiget, sealhulgas %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Sealhulgas %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Vaata üht liiget",
+    "View all %(count)s members|other": "Vaata kõiki %(count)s liiget",
+    "Failed to send": "Saatmine ei õnnestunud"
 }
diff --git a/src/i18n/strings/fa.json b/src/i18n/strings/fa.json
index d036a55c23..5948048561 100644
--- a/src/i18n/strings/fa.json
+++ b/src/i18n/strings/fa.json
@@ -223,7 +223,7 @@
     "Home": "خانه",
     "Hangup": "قطع",
     "For security, this session has been signed out. Please sign in again.": "برای امنیت، این نشست نامعتبر شده است. لطفاً دوباره وارد سیستم شوید.",
-    "We couldn't log you in": "ما نتوانستیم شما را وارد حسابتان کنیم",
+    "We couldn't log you in": "نتوانستیم شما را وارد کنیم",
     "Trust": "اعتماد کن",
     "Only continue if you trust the owner of the server.": "تنها در صورتی که به صاحب سرور اطمینان دارید، ادامه دهید.",
     "Identity server has no terms of service": "سرور هویت‌سنجی، شرایط استفاده از خدمت (terms of service) را مشخص نکرده‌است",
@@ -314,5 +314,323 @@
     "e.g. %(exampleValue)s": "برای مثال %(exampleValue)s",
     "Explore rooms": "کاوش اتاق",
     "Sign In": "ورود",
-    "Create Account": "ایجاد اکانت"
+    "Create Account": "ایجاد اکانت",
+    "Use an identity server": "از سرور هویت‌سنجی استفاده کنید",
+    "Invites user with given id to current room": "کاربر با شناسه داده شده را به اتاق فعلی دعوت کن",
+    "Sets the room name": "نام اتاق را تنظیم می کند",
+    "This room has no topic.": "این اتاق هیچ موضوعی ندارد.",
+    "Failed to set topic": "تنظیم موضوع موفقیت‌آمیز نبود",
+    "Gets or sets the room topic": "موضوع اتاق را دریافت یا تنظیم می‌کند",
+    "Changes your avatar in all rooms": "تصویر نمایه خود را در همه‌ی اتاق‌ها تغییر دهید",
+    "Changes your avatar in this current room only": "تصویر نمایه خود را تنها در این اتاق تغییر دهید",
+    "Changes the avatar of the current room": "تصویر نمایه اتاق فعلی را تغییر دهید",
+    "Changes your display nickname": "نام نمایشی خود را تغییر دهید",
+    "Changes your display nickname in the current room only": "نام نمایشی خود را تنها در اتاق فعلی تغییر دهید",
+    "Double check that your server supports the room version chosen and try again.": "بررسی کنید که کارگزار شما از نسخه اتاق انتخاب‌شده پشتیبانی کرده و دوباره امتحان کنید.",
+    "Error upgrading room": "خطا در ارتقاء نسخه اتاق",
+    "You do not have the required permissions to use this command.": "شما مجوزهای لازم را برای استفاده از این دستور ندارید.",
+    "Upgrades a room to a new version": "یک اتاق را به نسخه جدید ارتقا دهید",
+    "To use it, just wait for autocomplete results to load and tab through them.": "برای استفاده از آن ، لطفا منتظر بمانید تا نتایج تکمیل خودکار بارگیری شده و آنها را مرور کنید.",
+    "Searches DuckDuckGo for results": "در سایت DuckDuckGo جستجو می‌کند",
+    "Sends a message as html, without interpreting it as markdown": "پیام را به صورت html می فرستد ، بدون اینکه آن را به عنوان markdown تفسیر کند",
+    "Sends a message as plain text, without interpreting it as markdown": "پیام را به صورت متن ساده و بدون تفسیر آن به عنوان markdown ارسال می کند",
+    "Prepends ( ͡° ͜ʖ ͡°) to a plain-text message": "(͡ ° ͜ʖ ͡ °) را به ابتدای یک پیام متنی ساده اضافه می‌کند",
+    "Prepends ┬──┬ ノ( ゜-゜ノ) to a plain-text message": "┬──┬ ノ (゜ - ゜ ノ) را به ابتدای یک پیام متنی ساده اضافه می‌کند",
+    "Prepends (╯°□°）╯︵ ┻━┻ to a plain-text message": "(╯ ° □ °） ╯︵ ┻━┻) را به ابتدای یک پیام متنی ساده اضافه می‌کند",
+    "Prepends ¯\\_(ツ)_/¯ to a plain-text message": "¯ \\ _ (ツ) _ / ¯ را به ابتدای یک پیام متنی ساده اضافه می‌کند",
+    "Sends the given message as a spoiler": "پیام داده شده را به عنوان اسپویلر ارسال می کند",
+    "Usage": "استفاده",
+    "Other": "دیگر",
+    "Effects": "جلوه‌ها",
+    "Actions": "اقدامات",
+    "Messages": "پیام ها",
+    "Setting up keys": "تنظیم کلیدها",
+    "Go Back": "برگرد",
+    "Are you sure you want to cancel entering passphrase?": "آیا مطمئن هستید که می خواهید وارد کردن عبارت امنیتی را لغو کنید؟",
+    "Cancel entering passphrase?": "وارد کردن عبارت امنیتی لغو شود؟",
+    "Missing room_id in request": "room_id در صورت درخواست وجود ندارد",
+    "Missing user_id in request": "user_id در صورت درخواست وجود ندارد",
+    "Room %(roomId)s not visible": "اتاق %(roomId)s قابل مشاهده نیست",
+    "You do not have permission to do that in this room.": "شما مجاز به انجام این کار در این اتاق نیستید.",
+    "You are not in this room.": "شما در این اتاق نیستید.",
+    "Power level must be positive integer.": "سطح قدرت باید عدد صحیح مثبت باشد.",
+    "This room is not recognised.": "این اتاق شناخته نشده است.",
+    "Missing roomId.": "شناسه‌ی اتاق گم‌شده",
+    "Unable to create widget.": "ایجاد ابزارک امکان پذیر نیست.",
+    "You need to be able to invite users to do that.": "نیاز است که شما قادر به دعوت کاربران به آن باشید.",
+    "You need to be logged in.": "شما باید وارد شوید.",
+    "Failed to invite the following users to the %(roomName)s room:": "دعوت کاربران زیر به اتاق %(roomName)s موفقیت‌آمیز نبود:",
+    "Failed to invite users to the room:": "دعوت کاربران به اتاق موفقیت‌آمیز نبود:",
+    "Failed to invite": "دعوت موفقیت‌آمیز نبود",
+    "Custom (%(level)s)": "%(level)s دلخواه",
+    "Moderator": "معاون",
+    "Restricted": "ممنوع",
+    "Use your account or create a new one to continue.": "برای ادامه کار از حساب کاربری خود استفاده کرده و یا حساب کاربری جدیدی ایجاد کنید.",
+    "Sign In or Create Account": "وارد شوید یا حساب کاربری بسازید",
+    "Zimbabwe": "زیمبابوه",
+    "Zambia": "زامبیا",
+    "Yemen": "یمن",
+    "Western Sahara": "صحرای غربی",
+    "Wallis & Futuna": "والیس و فوتونا",
+    "Vietnam": "ویتنام",
+    "Venezuela": "ونزوئلا",
+    "Vatican City": "شهر واتیکان",
+    "Vanuatu": "وانواتو",
+    "Uzbekistan": "ازبکستان",
+    "Uruguay": "اروگوئه",
+    "United Arab Emirates": "امارات متحده عربی",
+    "Ukraine": "اوکراین",
+    "Uganda": "اوگاندا",
+    "U.S. Virgin Islands": "جزایر ویرجین ایالات متحده",
+    "Tuvalu": "تووالو",
+    "Turks & Caicos Islands": "جزایر ترک و کایکوس",
+    "Turkmenistan": "ترکمنستان",
+    "Turkey": "بوقلمون",
+    "Tunisia": "تونس",
+    "Trinidad & Tobago": "ترینیداد و توباگو",
+    "Tonga": "تونگا",
+    "Tokelau": "توكلائو",
+    "Togo": "رفتن",
+    "Timor-Leste": "تیمور-لسته",
+    "Thailand": "تایلند",
+    "Tanzania": "تانزانیا",
+    "Tajikistan": "تاجیکستان",
+    "Taiwan": "تایوان",
+    "São Tomé & Príncipe": "سائو تومه و پرنسیپ",
+    "Syria": "سوریه",
+    "Switzerland": "سوئیس",
+    "Sweden": "سوئد",
+    "Swaziland": "سوازیلند",
+    "Svalbard & Jan Mayen": "سوالبارد و جان ماین",
+    "Suriname": "سورینام",
+    "Sudan": "سودان",
+    "St. Vincent & Grenadines": "سنت وینسنت و گرنادین ها",
+    "St. Pierre & Miquelon": "سنت پیر و میکلون",
+    "St. Martin": "سنت مارتین",
+    "St. Lucia": "سنت لوسیا",
+    "St. Kitts & Nevis": "سنت کیتس و نویس",
+    "St. Helena": "سنت هلنا",
+    "St. Barthélemy": "سنت بارتلمی",
+    "Sri Lanka": "سری لانکا",
+    "Spain": "اسپانیا",
+    "South Sudan": "سودان جنوبی",
+    "South Korea": "کره جنوبی",
+    "South Georgia & South Sandwich Islands": "جزایر جورجیا جنوبی",
+    "South Africa": "آفریقای جنوبی",
+    "Somalia": "سومالی",
+    "Solomon Islands": "جزایر سلیمان",
+    "Slovenia": "اسلوونی",
+    "Slovakia": "اسلواکی",
+    "Sint Maarten": "سینت مارتن",
+    "Singapore": "سنگاپور",
+    "Sierra Leone": "سیرا لئون",
+    "Seychelles": "سیشل",
+    "Serbia": "صربستان",
+    "Senegal": "سنگال",
+    "Saudi Arabia": "عربستان سعودی",
+    "San Marino": "سان مارینو",
+    "Samoa": "ساموآ",
+    "Réunion": "ریونیون",
+    "Rwanda": "رواندا",
+    "Russia": "روسیه",
+    "Romania": "رومانی",
+    "Qatar": "قطر",
+    "Puerto Rico": "پورتوریکو",
+    "Portugal": "کشور پرتغال",
+    "Poland": "لهستان",
+    "Pitcairn Islands": "جزایر پیتکرن",
+    "Philippines": "فیلیپین",
+    "Peru": "پرو",
+    "Paraguay": "پاراگوئه",
+    "Papua New Guinea": "پاپوآ گینه نو",
+    "Panama": "پاناما",
+    "Palestine": "فلسطین",
+    "Palau": "پالائو",
+    "Pakistan": "پاکستان",
+    "Oman": "عمان",
+    "Norway": "نروژ",
+    "Northern Mariana Islands": "جزایر ماریانای شمالی",
+    "North Korea": "کره شمالی",
+    "Norfolk Island": "جزیره نورفولک",
+    "Niue": "نیوئه",
+    "Nigeria": "نیجریه",
+    "Niger": "نیجر",
+    "Nicaragua": "نیکاراگوئه",
+    "New Zealand": "نیوزلند",
+    "New Caledonia": "کالدونیای جدید",
+    "Netherlands": "هلند",
+    "Nepal": "نپال",
+    "Nauru": "نائورو",
+    "Namibia": "ناميبيا",
+    "Myanmar": "میانمار",
+    "Mozambique": "موزامبیک",
+    "Morocco": "مراکش",
+    "Montserrat": "مونتسرات",
+    "Montenegro": "مونته نگرو",
+    "Mongolia": "مغولستان",
+    "Monaco": "موناکو",
+    "Moldova": "مولداوی",
+    "Micronesia": "میکرونزی",
+    "Mexico": "مکزیک",
+    "Mayotte": "مایوت",
+    "Mauritius": "موریس",
+    "Mauritania": "موریتانی",
+    "Martinique": "مارتینیک",
+    "Marshall Islands": "جزایر مارشال",
+    "Malta": "مالت",
+    "Mali": "مالی",
+    "Maldives": "مالدیو",
+    "Malaysia": "مالزی",
+    "Malawi": "مالاوی",
+    "Madagascar": "ماداگاسکار",
+    "Macedonia": "مقدونیه",
+    "Macau": "ماکائو",
+    "Luxembourg": "لوکزامبورگ",
+    "Lithuania": "لیتوانی",
+    "Liechtenstein": "لیختن اشتاین",
+    "Libya": "لیبی",
+    "Liberia": "لیبریا",
+    "Lesotho": "لسوتو",
+    "Lebanon": "لبنان",
+    "Latvia": "لتونی",
+    "Laos": "لائوس",
+    "Kyrgyzstan": "قرقیزستان",
+    "Kuwait": "کویت",
+    "Kosovo": "کوزوو",
+    "Kiribati": "کیریباتی",
+    "Kenya": "کنیا",
+    "Kazakhstan": "قزاقستان",
+    "Jordan": "اردن",
+    "Jersey": "جرسی",
+    "Japan": "ژاپن",
+    "Jamaica": "جامائیکا",
+    "Italy": "ایتالیا",
+    "Israel": "رژیم غاصب صهیونیستی",
+    "Isle of Man": "جزیره من",
+    "Ireland": "ایرلند",
+    "Iraq": "عراق",
+    "Iran": "ایران",
+    "Indonesia": "اندونزی",
+    "India": "هند",
+    "Iceland": "ایسلند",
+    "Hungary": "مجارستان",
+    "Hong Kong": "هنگ کنگ",
+    "Honduras": "هندوراس",
+    "Heard & McDonald Islands": "جزایر هرد و مک دونالد",
+    "Haiti": "هائیتی",
+    "Guyana": "گویان",
+    "Guinea-Bissau": "گینه بیسائو",
+    "Guinea": "گینه",
+    "Guernsey": "گرنزی",
+    "Guatemala": "گواتمالا",
+    "Guam": "گوام",
+    "Guadeloupe": "گوادلوپ",
+    "Grenada": "گرنادا",
+    "Greenland": "گرینلند",
+    "Greece": "یونان",
+    "Gibraltar": "جبل الطارق",
+    "Ghana": "غنا",
+    "Germany": "آلمان",
+    "Georgia": "گرجستان",
+    "Gambia": "گامبیا",
+    "Gabon": "گابن",
+    "French Southern Territories": "سرزمین های جنوبی فرانسه",
+    "French Polynesia": "پلینزی فرانسه",
+    "French Guiana": "گویان فرانسه",
+    "France": "فرانسه",
+    "Finland": "فنلاند",
+    "Fiji": "فیجی",
+    "Faroe Islands": "جزایر فارو",
+    "Falkland Islands": "جزایر فالکلند",
+    "Ethiopia": "اتیوپی",
+    "Estonia": "استونی",
+    "Eritrea": "اریتره",
+    "Equatorial Guinea": "گینه استوایی",
+    "El Salvador": "السالوادور",
+    "Egypt": "مصر",
+    "Ecuador": "اکوادور",
+    "Dominican Republic": "جمهوری دومینیکن",
+    "Dominica": "دومینیکا",
+    "Djibouti": "جیبوتی",
+    "Denmark": "دانمارک",
+    "Côte d’Ivoire": "ساحل عاج",
+    "Czech Republic": "جمهوری چک",
+    "Cyprus": "قبرس",
+    "Curaçao": "کوراسائو",
+    "Cuba": "کوبا",
+    "Croatia": "کرواسی",
+    "Costa Rica": "کاستاریکا",
+    "Cook Islands": "جزایر کوک",
+    "Congo - Kinshasa": "کنگو - کینشاسا",
+    "Congo - Brazzaville": "کنگو - برازاویل",
+    "Comoros": "کومور",
+    "Colombia": "کلمبیا",
+    "Cocos (Keeling) Islands": "جزایر کوکوس (کیلینگ)",
+    "Christmas Island": "جزیره کریسمس",
+    "China": "چین",
+    "Chile": "شیلی",
+    "Chad": "چاد",
+    "Central African Republic": "جمهوری آفریقای مرکزی",
+    "Cayman Islands": "جزایر کیمن",
+    "Caribbean Netherlands": "کارائیب هلند",
+    "Cape Verde": "کیپ ورد",
+    "Canada": "کانادا",
+    "Cameroon": "کامرون",
+    "Cambodia": "کامبوج",
+    "Burundi": "بوروندی",
+    "Burkina Faso": "بورکینافاسو",
+    "Bulgaria": "بلغارستان",
+    "Brunei": "برونئی",
+    "British Virgin Islands": "جزایر ویرجین بریتانیا",
+    "British Indian Ocean Territory": "قلمرو اقیانوس هند بریتانیا",
+    "Brazil": "برزیل",
+    "Bouvet Island": "جزیره بووت",
+    "Botswana": "بوتسوانا",
+    "Bosnia": "بوسنی",
+    "Bolivia": "بولیوی",
+    "Bhutan": "بوتان",
+    "Bermuda": "برمودا",
+    "Benin": "بنین",
+    "Belize": "بلیز",
+    "Belgium": "بلژیک",
+    "Belarus": "بلاروس",
+    "Barbados": "باربادوس",
+    "Bangladesh": "بنگلادش",
+    "Bahrain": "بحرین",
+    "Bahamas": "باهاما",
+    "Azerbaijan": "آذربایجان",
+    "Austria": "اتریش",
+    "Australia": "استرالیا",
+    "Aruba": "آروبا",
+    "Armenia": "ارمنستان",
+    "Argentina": "آرژانتین",
+    "Antigua & Barbuda": "آنتیگوا و باربودا",
+    "Antarctica": "جنوبگان",
+    "Anguilla": "آنگویلا",
+    "Angola": "آنگولا",
+    "Andorra": "آندورا",
+    "American Samoa": "ساموآ آمریکایی",
+    "Algeria": "الجزایر",
+    "Albania": "آلبانی",
+    "Åland Islands": "جزایر الند",
+    "Afghanistan": "افغانستان",
+    "United States": "ایالات متحده",
+    "United Kingdom": "انگلستان",
+    "Your email address does not appear to be associated with a Matrix ID on this Homeserver.": "به نظر نمی‌رسد آدرس ایمیل شما با هیچ کدام از شناسه ماتریکس در این سرور مرتبط باشد.",
+    "This email address was not found": "این آدرس ایمیل یافت نشد",
+    "Unable to enable Notifications": "فعال کردن اعلان ها امکان پذیر نیست",
+    "%(brand)s was not given permission to send notifications - please try again": "به %(brand)s اجازه ارسال اعلان داده نشده است - لطفاً دوباره امتحان کنید",
+    "%(brand)s does not have permission to send you notifications - please check your browser settings": "%(brand)s اجازه ارسال اعلان به شما را ندارد - لطفاً تنظیمات مرورگر خود را بررسی کنید",
+    "%(name)s is requesting verification": "%(name)s درخواست تائید دارد",
+    "Your homeserver rejected your log in attempt. This could be due to things just taking too long. Please try again. If this continues, please contact your homeserver administrator.": "سرور درخواست ورود شما را رد کرد. این می‌تواند به خاطر طولانی شدن فرآیندها باشد. لطفا دوباره امتحان کنید. اگر این مشکل ادامه داشت، لطفا با مدیر سرور تماس بگیرید.",
+    "Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "سرور شما در دسترس نبود و امکان ورود شما میسر نیست. لطفا دوباره امتحان کنید. اگر مشکل ادامه داشت، لطفا با مدیر سرور تماس بگیرید.",
+    "Try again": "دوباره امتحان کنید",
+    "Whether you're using %(brand)s on a device where touch is the primary input mechanism": "این که شما از %(brand)s روی دستگاهی استفاده می‌کنید که در آن لامسه مکانیزم اصلی ورودی است",
+    "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "ما از مرورگر خواستیم تا سروری را که شما برای ورود استفاده می‌کنید به خاطر بسپارد، اما متاسفانه مرورگر شما آن را فراموش کرده‌است. به صفحه‌ی ورود بروید و دوباره امتحان کنید.",
+    "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.": "این اقدام نیاز به دسترسی به سرور هویت‌سنجی پیش‌فرض <server /> برای تایید آدرس ایمیل یا شماره تماس دارد، اما کارگزار هیچ گونه شرایط خدماتی (terms of service) ندارد.",
+    "The remote side failed to pick up": "طرف دیگر قادر به پاسخ‌دادن نیست",
+    "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "هرگاه این صفحه شامل اطلاعات قابل شناسایی مانند شناسه‌ی اتاق ، کاربر یا گروه باشد ، این داده‌ها قبل از ارسال به سرور حذف می شوند.",
+    "Your user agent": "نماینده کاربری شما",
+    "Whether you're using %(brand)s as an installed Progressive Web App": "این که آیا شما از%(brand)s به عنوان یک PWA استفاده می‌کنید یا نه",
+    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "این که آیا از ویژگی 'breadcrumbs' (نمایه‌ی کاربری بالای فهرست اتاق‌ها) استفاده می‌کنید یا خیر"
 }
diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index fcc5ec9afe..984dce8595 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -3043,7 +3043,7 @@
     "Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "Votre serveur d’accueil n’est pas accessible, nous n’avons pas pu vous connecter. Merci de réessayer. Si cela persiste, merci de contacter l’administrateur de votre serveur d’accueil.",
     "Try again": "Réessayez",
     "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.": "Nous avons demandé à votre navigateur de mémoriser votre serveur d’accueil, mais il semble l’avoir oublié. Rendez-vous à la page de connexion et réessayez.",
-    "We couldn't log you in": "Impossible de vous déconnecter",
+    "We couldn't log you in": "Nous n’avons pas pu vous connecter",
     "Upgrade to %(hostSignupBrand)s": "Mettre à jour vers %(hostSignupBrand)s",
     "Edit Values": "Modifier les valeurs",
     "Values at explicit levels in this room:": "Valeurs pour les rangs explicites de ce salon :",
@@ -3071,7 +3071,7 @@
     "Original event source": "Événement source original",
     "Decrypted event source": "Événement source déchiffré",
     "We'll create rooms for each of them. You can add existing rooms after setup.": "Nous allons créer un salon pour chacun d’entre eux. Vous pourrez ajouter des salons après l’initialisation.",
-    "What projects are you working on?": "Sur quels projets travaillez vous ?",
+    "What projects are you working on?": "Sur quels projets travaillez-vous ?",
     "We'll create rooms for each topic.": "Nous allons créer un salon pour chaque sujet.",
     "What are some things you want to discuss?": "De quoi voulez vous discuter ?",
     "Inviting...": "Invitation…",
@@ -3083,7 +3083,7 @@
     "A private space just for you": "Un espace privé seulement pour vous",
     "Just Me": "Seulement moi",
     "Ensure the right people have access to the space.": "Vérifiez que les bonnes personnes ont accès à cet espace.",
-    "Who are you working with?": "Avec qui travaillez vous ?",
+    "Who are you working with?": "Avec qui travaillez-vous ?",
     "Finish": "Finir",
     "At the moment only you can see it.": "Pour l’instant vous seul pouvez le voir.",
     "Creating rooms...": "Création des salons…",
@@ -3112,7 +3112,7 @@
     "Remove from Space": "Supprimer de l’espace",
     "Undo": "Annuler",
     "Your message wasn't sent because this homeserver has been blocked by it's administrator. Please <a>contact your service administrator</a> to continue using the service.": "Votre message n’a pas été envoyé car ce serveur d’accueil a été banni par son administrateur. Merci de <a>contacter votre administrateur de service</a> pour poursuivre l’usage de ce service.",
-    "Are you sure you want to leave the space '%(spaceName)s'?": "Êtes vous sûr de vouloir quitter l’espace « %(spaceName)s » ?",
+    "Are you sure you want to leave the space '%(spaceName)s'?": "Êtes-vous sûr de vouloir quitter l’espace « %(spaceName)s » ?",
     "This space is not public. You will not be able to rejoin without an invite.": "Cet espace n’est pas public. Vous ne pourrez pas le rejoindre sans invitation.",
     "Start audio stream": "Démarrer une diffusion audio",
     "Failed to start livestream": "Échec lors du démarrage de la diffusion en direct",
@@ -3188,7 +3188,7 @@
     "This room is suggested as a good one to join": "Ce salon recommandé peut être intéressant à rejoindre",
     "Verify this login to access your encrypted messages and prove to others that this login is really you.": "Vérifiez cette connexion pour accéder à vos messages chiffrés et prouver aux autres qu’il s’agit bien de vous.",
     "Verify with another session": "Vérifier avec une autre session",
-    "We'll create rooms for each of them. You can add more later too, including already existing ones.": "Nous allons créer un salon pour chaque. Vous pourrez en ajouter plus tard, y compris certains déjà existant.",
+    "We'll create rooms for each of them. You can add more later too, including already existing ones.": "Nous allons créer un salon pour chacun d’entre eux. Vous pourrez aussi en ajouter plus tard, y compris certains déjà existant.",
     "Let's create a room for each of them. You can add more later too, including already existing ones.": "Créons un salon pour chacun d’entre eux. Vous pourrez en ajouter plus tard, y compris certains déjà existant.",
     "Make sure the right people have access. You can invite more later.": "Assurez-vous que les accès sont accordés aux bonnes personnes. Vous pourrez en inviter d’autres plus tard.",
     "A private space to organise your rooms": "Un espace privé pour organiser vos salons",
@@ -3232,7 +3232,7 @@
     "Please choose a strong password": "Merci de choisir un mot de passe fort",
     "You can add more later too, including already existing ones.": "Vous pourrez en ajouter plus tard, y compris certains déjà existant.",
     "Let's create a room for each of them.": "Créons un salon pour chacun d’entre eux.",
-    "What are some things you want to discuss in %(spaceName)s?": "De quoi voulez vous discuter dans %(spaceName)s ?",
+    "What are some things you want to discuss in %(spaceName)s?": "De quoi voulez-vous discuter dans %(spaceName)s ?",
     "Verification requested": "Vérification requise",
     "Avatar": "Avatar",
     "Verify other login": "Vérifier l’autre connexion",
@@ -3262,5 +3262,28 @@
     "Send and receive voice messages (in development)": "Envoyez et recevez des messages vocaux (en développement)",
     "%(deviceId)s from %(ip)s": "%(deviceId)s depuis %(ip)s",
     "Review to ensure your account is safe": "Vérifiez pour assurer la sécurité de votre compte",
-    "Sends the given message as a spoiler": "Envoie le message flouté"
+    "Sends the given message as a spoiler": "Envoie le message flouté",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Vous êtes la seule personne ici. Si vous partez, plus personne ne pourra rejoindre cette conversation, y compris vous.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Si vous réinitialisez tout, vous allez repartir sans session et utilisateur de confiance. Vous pourriez ne pas voir certains messages passés.",
+    "Only do this if you have no other device to complete verification with.": "Poursuivez seulement si vous n’avez aucun autre appareil avec lequel procéder à la vérification.",
+    "Reset everything": "Tout réinitialiser",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Vous avez perdu ou oublié tous vos moyens de récupération ? <a>Tout réinitialiser</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Si vous le faites, notez qu’aucun de vos messages ne sera supprimé, mais la recherche pourrait être dégradée pendant quelques instants, le temps de recréer l’index",
+    "View message": "Afficher le message",
+    "Zoom in": "Zoomer",
+    "Zoom out": "Dé-zoomer",
+    "%(seconds)ss left": "%(seconds)s secondes restantes",
+    "Change server ACLs": "Modifier les ACL du serveur",
+    "Show options to enable 'Do not disturb' mode": "Afficher une option pour activer le mode « Ne pas déranger »",
+    "You can select all or individual messages to retry or delete": "Vous pouvez choisir de renvoyer ou supprimer tous les messages ou seulement certains",
+    "Sending": "Envoi",
+    "Retry all": "Tout renvoyer",
+    "Delete all": "Tout supprimer",
+    "Some of your messages have not been sent": "Certains de vos messages n’ont pas été envoyés",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s membres dont %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Dont %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Afficher le membre",
+    "View all %(count)s members|other": "Afficher les %(count)s membres",
+    "Failed to send": "Échec de l’envoi"
 }
diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json
index f6ebce684f..7b816e94cd 100644
--- a/src/i18n/strings/gl.json
+++ b/src/i18n/strings/gl.json
@@ -3285,5 +3285,28 @@
     "What are some things you want to discuss in %(spaceName)s?": "Sobre que temas queres conversar en %(spaceName)s?",
     "Let's create a room for each of them.": "Crea unha sala para cada un deles.",
     "You can add more later too, including already existing ones.": "Podes engadir máis posteriormente, incluíndo os xa existentes.",
-    "Use another login": "Usar outra conexión"
+    "Use another login": "Usar outra conexión",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Es a única persoa aquí. Se saes, ninguén poderá unirse no futuro, incluíndote a ti.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Se restableces todo, volverás a comezar sen sesións verificadas, usuarias de confianza, e poderías non poder ver as mensaxes anteriores.",
+    "Only do this if you have no other device to complete verification with.": "Fai isto únicamente se non tes outro dispositivo co que completar a verificación.",
+    "Reset everything": "Restablecer todo",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Perdidos ou esquecidos tódolos métodos de recuperación? <a>Restabléceos</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Se o fas, ten en conta que non se borrará ningunha das túas mensaxes, mais a experiencia de busca podería degradarse durante uns momentos ata que se recrea o índice",
+    "View message": "Ver mensaxe",
+    "Zoom in": "Achegar",
+    "Zoom out": "Alonxar",
+    "%(seconds)ss left": "%(seconds)ss restantes",
+    "Change server ACLs": "Cambiar ACLs do servidor",
+    "Show options to enable 'Do not disturb' mode": "Mostrar opcións para activar o modo 'Non molestar'",
+    "You can select all or individual messages to retry or delete": "Podes elexir todo ou mensaxes individuais para reintentar ou eliminar",
+    "Sending": "Enviando",
+    "Retry all": "Reintentar todo",
+    "Delete all": "Eliminar todo",
+    "Some of your messages have not been sent": "Algunha das túas mensaxes non se enviou",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s membros, incluíndo a %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Incluíndo a %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Ver 1 membro",
+    "View all %(count)s members|other": "Ver tódolos %(count)s membros",
+    "Failed to send": "Fallou o envío"
 }
diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index 2ec5af8a17..e6e5575674 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3280,5 +3280,28 @@
     "Send and receive voice messages (in development)": "Hang üzenetek küldése és fogadása (fejlesztés alatt)",
     "%(deviceId)s from %(ip)s": "%(deviceId)s innen: %(ip)s",
     "Review to ensure your account is safe": "Tekintse át, hogy meggyőződjön arról, hogy a fiókja biztonságban van",
-    "Sends the given message as a spoiler": "A megadott üzenet szpojlerként küldése"
+    "Sends the given message as a spoiler": "A megadott üzenet szpojlerként küldése",
+    "Change server ACLs": "Kiszolgáló ACL-ek módosítása",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Csak ön van itt. Ha kilép, akkor a jövőben senki nem tud majd ide belépni, beleértve önt is.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Ha mindent alapállapotba helyez, nem lesz megbízható munkamenete, nem lesznek megbízható felhasználók és a régi üzenetekhez sem biztos, hogy hozzáfér majd.",
+    "Only do this if you have no other device to complete verification with.": "Csak akkor tegye meg, ha nincs egyetlen másik eszköze sem az ellenőrzés elvégzéséhez.",
+    "Reset everything": "Minden visszaállítása",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Elfelejtette vagy elveszett minden visszaállítási lehetőség? <a>Mind alaphelyzetbe állítása</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Ha ezt teszi, tudnia kell, hogy az üzenetek nem kerülnek törlésre de keresés nem lesz tökéletes amíg az indexek nem készülnek el újra",
+    "View message": "Üzenet megjelenítése",
+    "Zoom in": "Nagyít",
+    "Zoom out": "Kicsinyít",
+    "%(seconds)ss left": "%(seconds)s mp van vissza",
+    "Show options to enable 'Do not disturb' mode": "Mutassa a lehetőséget a „Ne zavarjanak” módhoz",
+    "You can select all or individual messages to retry or delete": "Újraküldéshez vagy törléshez kiválaszthatja az üzeneteket egyenként vagy az összeset együtt",
+    "Retry all": "Mind újraküldése",
+    "Sending": "Küldés",
+    "Delete all": "Mind törlése",
+    "Some of your messages have not been sent": "Néhány üzenete nem lett elküldve",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s résztvevő beleértve: %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Beleértve: %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "1 résztvevő megmutatása",
+    "View all %(count)s members|other": "Az összes %(count)s résztvevő megmutatása",
+    "Failed to send": "Küldés sikertelen"
 }
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 2d0edb77e6..98272f9e49 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3285,5 +3285,28 @@
     "You can add more later too, including already existing ones.": "Puoi aggiungerne anche altri in seguito, inclusi quelli già esistenti.",
     "Use another login": "Usa un altro accesso",
     "Verify your identity to access encrypted messages and prove your identity to others.": "Verifica la tua identità per accedere ai messaggi cifrati e provare agli altri che sei tu.",
-    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Senza la verifica, non avrai accesso a tutti i tuoi messaggi e potresti apparire agli altri come non fidato."
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Senza la verifica, non avrai accesso a tutti i tuoi messaggi e potresti apparire agli altri come non fidato.",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Sei l'unica persona qui. Se esci, nessuno potrà entrare in futuro, incluso te.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Se reimposti tutto, ricomincerai senza sessioni fidate, senza utenti fidati e potresti non riuscire a vedere i messaggi passati.",
+    "Only do this if you have no other device to complete verification with.": "Fallo solo se non hai altri dispositivi con cui completare la verifica.",
+    "Reset everything": "Reimposta tutto",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Hai dimenticato o perso tutti i metodi di recupero? <a>Reimposta tutto</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Se lo fai, ricorda che nessuno dei tuoi messaggi verrà eliminato, ma l'esperienza di ricerca potrà peggiorare per qualche momento mentre l'indice viene ricreato",
+    "View message": "Vedi messaggio",
+    "Zoom in": "Ingrandisci",
+    "Zoom out": "Rimpicciolisci",
+    "%(seconds)ss left": "%(seconds)ss rimanenti",
+    "Change server ACLs": "Modifica le ACL del server",
+    "Show options to enable 'Do not disturb' mode": "Mostra opzioni per attivare la modalità \"Non disturbare\"",
+    "You can select all or individual messages to retry or delete": "Puoi selezionare tutti o alcuni messaggi da riprovare o eliminare",
+    "Sending": "Invio in corso",
+    "Retry all": "Riprova tutti",
+    "Delete all": "Elimina tutti",
+    "Some of your messages have not been sent": "Alcuni tuoi messaggi non sono stati inviati",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s membri inclusi %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Inclusi %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Vedi 1 membro",
+    "View all %(count)s members|other": "Vedi tutti i %(count)s membri",
+    "Failed to send": "Invio fallito"
 }
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index de98a878e8..8b2dea7885 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -3171,5 +3171,28 @@
     "Send and receive voice messages (in development)": "Verstuur en ontvang audioberichten (in ontwikkeling)",
     "%(deviceId)s from %(ip)s": "%(deviceId)s van %(ip)s",
     "Review to ensure your account is safe": "Controleer om u te verzekeren dat uw account veilig is",
-    "Sends the given message as a spoiler": "Verstuurt het bericht als een spoiler"
+    "Sends the given message as a spoiler": "Verstuurt het bericht als een spoiler",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "U bent de enige persoon hier. Als u weggaat, zal niemand in de toekomst kunnen toetreden, u ook niet.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Als u alles reset, zult u opnieuw opstarten zonder vertrouwde sessies, zonder vertrouwde gebruikers, en zult u misschien geen vroegere berichten meer kunnen zien.",
+    "Only do this if you have no other device to complete verification with.": "Doe dit alleen als u geen ander apparaat hebt om de verificatie mee uit te voeren.",
+    "Reset everything": "Alles opnieuw instellen",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Alles vergeten of alle herstelmethoden verloren? <a>Alles opnieuw instellen</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Als u dat doet, let wel geen van uw berichten wordt verwijderd, maar de zoekresultaten zullen gedurende enkele ogenblikken verslechteren terwijl de index opnieuw wordt aangemaakt",
+    "View message": "Bericht bekijken",
+    "Zoom in": "Inzoomen",
+    "Zoom out": "Uitzoomen",
+    "%(seconds)ss left": "%(seconds)s's over",
+    "Change server ACLs": "Wijzig server ACL's",
+    "Show options to enable 'Do not disturb' mode": "Toon opties om de 'Niet storen' modus in te schakelen",
+    "You can select all or individual messages to retry or delete": "U kunt alles selecteren of per individueel bericht opnieuw verzenden of verwijderen",
+    "Sending": "Wordt verstuurd",
+    "Retry all": "Alles opnieuw proberen",
+    "Delete all": "Verwijder alles",
+    "Some of your messages have not been sent": "Enkele van uw berichten zijn niet verstuurd",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s leden inclusief %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Inclusief %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Bekijk 1 lid",
+    "View all %(count)s members|other": "Bekijk alle %(count)s leden",
+    "Failed to send": "Verzenden is mislukt"
 }
diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json
index 7db3758fd8..da42347b49 100644
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -3210,5 +3210,6 @@
     "Removing...": "Удаление…",
     "Failed to remove some rooms. Try again later": "Не удалось удалить несколько комнат. Попробуйте позже",
     "%(count)s rooms and 1 space|one": "%(count)s комната и одно пространство",
-    "%(count)s rooms and 1 space|other": "%(count)s комнат и одно пространство"
+    "%(count)s rooms and 1 space|other": "%(count)s комнат и одно пространство",
+    "Sends the given message as a spoiler": "Отправить данное сообщение под спойлером"
 }
diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json
index ad768b59cb..305e7dc610 100644
--- a/src/i18n/strings/sq.json
+++ b/src/i18n/strings/sq.json
@@ -3272,5 +3272,27 @@
     "Share decryption keys for room history when inviting users": "Ndani me përdorues kyçe shfshehtëzimi, kur ftohen përdorues",
     "Send and receive voice messages (in development)": "Dërgoni dhe merrni mesazhe zanorë (në zhvillim)",
     "%(deviceId)s from %(ip)s": "%(deviceId)s prej %(ip)s",
-    "Review to ensure your account is safe": "Shqyrtojeni për t’u siguruar se llogaria është e parrezik"
+    "Review to ensure your account is safe": "Shqyrtojeni për t’u siguruar se llogaria është e parrezik",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Jeni i vetmi person këtu. Nëse e braktisni, askush s’do të jetë në gjendje të hyjë në të ardhmen, përfshi ju.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Nëse riktheni gjithçka te parazgjedhjet, do të rifilloni pa sesione të besuara, pa përdorues të besuar, dhe mund të mos jeni në gjendje të shihni mesazhe të dikurshëm.",
+    "Only do this if you have no other device to complete verification with.": "Bëjeni këtë vetëm nëse s’keni pajisje tjetër me të cilën të plotësoni verifikimin.",
+    "Reset everything": "Kthe gjithçka te parazgjedhjet",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Harruat, ose humbët krejt metodat e rimarrjes? <a>Riujdisini të gjitha</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Nëse e bëni, ju lutemi, kini parasysh se s’do të fshihet asnjë nga mesazhet tuaj, por puna me kërkimin mund degradojë për pak çaste, ndërkohë që rikrijohet treguesi",
+    "View message": "Shihni mesazh",
+    "%(seconds)ss left": "Edhe %(seconds)ss",
+    "Change server ACLs": "Ndryshoni ACL-ra shërbyesi",
+    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Po kryhet këshillim me %(transferTarget)s. <a>Shpërngule te %(transferee)s</a>",
+    "Show options to enable 'Do not disturb' mode": "Shfaq mundësi për aktivizim të mënyrës “Mos më shqetësoni”",
+    "You can select all or individual messages to retry or delete": "Për riprovim ose fshirje mund të përzgjidhni krejt mesazhet, ose të tillë individualë",
+    "Sending": "Po dërgohet",
+    "Retry all": "Riprovoji krejt",
+    "Delete all": "Fshiji krejt",
+    "Some of your messages have not been sent": "Disa nga mesazhet tuaj s’janë dërguar",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s anëtarë, përfshi %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Prfshi %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "Shihni 1 anëtar",
+    "View all %(count)s members|other": "Shihni krejt %(count)s anëtarët",
+    "Failed to send": "S’u arrit të dërgohet"
 }
diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json
index 42a7f78268..64cd8ae6ac 100644
--- a/src/i18n/strings/sv.json
+++ b/src/i18n/strings/sv.json
@@ -3216,5 +3216,28 @@
     "Please choose a strong password": "Vänligen välj ett starkt lösenord",
     "Use another login": "Använd annan inloggning",
     "Verify your identity to access encrypted messages and prove your identity to others.": "Verifiera din identitet för att komma åt krypterade meddelanden och bevisa din identitet för andra.",
-    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Om du inte verifierar så kommer du inte ha åtkomst till alla dina meddelanden och kan synas som ej betrodd för andra."
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "Om du inte verifierar så kommer du inte ha åtkomst till alla dina meddelanden och kan synas som ej betrodd för andra.",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Du är den enda personen här. Om du lämnar så kommer ingen kunna gå med igen, inklusive du.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Om du återställer allt så kommer du att börja om utan betrodda sessioner eller betrodda användare, och kommer kanske inte kunna se gamla meddelanden.",
+    "Only do this if you have no other device to complete verification with.": "Gör detta endast om du inte har någon annan enhet att slutföra verifikationen med.",
+    "Reset everything": "Återställ allt",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "Glömt eller förlorat alla återställningsalternativ? <a>Återställ allt</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Om du gör det, observera att inga av dina meddelanden kommer att raderas, men sökupplevelsen kan degraderas en stund medans registret byggs upp igen",
+    "View message": "Visa meddelande",
+    "Zoom in": "Zooma in",
+    "Zoom out": "Zooma ut",
+    "%(seconds)ss left": "%(seconds)ss kvar",
+    "Change server ACLs": "Ändra server-ACLer",
+    "Show options to enable 'Do not disturb' mode": "Visa alternativ för att aktivera 'Stör ej'-läget",
+    "Delete all": "Radera alla",
+    "View all %(count)s members|one": "Visa 1 medlem",
+    "View all %(count)s members|other": "Visa alla %(count)s medlemmar",
+    "You can select all or individual messages to retry or delete": "Du kan välja alla eller individuella meddelanden att försöka igen eller radera",
+    "Sending": "Skickar",
+    "Retry all": "Försök alla igen",
+    "Some of your messages have not been sent": "Vissa av dina meddelanden har inte skickats",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s medlemmar inklusive %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "Inklusive %(commaSeparatedMembers)s",
+    "Failed to send": "Misslyckades att skicka"
 }
diff --git a/src/i18n/strings/tzm.json b/src/i18n/strings/tzm.json
index ba63af5fb0..f9ac9cf574 100644
--- a/src/i18n/strings/tzm.json
+++ b/src/i18n/strings/tzm.json
@@ -4,7 +4,7 @@
     "Actions": "Tugawin",
     "Messages": "Tuzinin",
     "Cancel": "Sser",
-    "Create Account": "Ssenflul amiḍan",
+    "Create Account": "senflul amiḍan",
     "Sign In": "Kcem",
     "Name or Matrix ID": "Isem neɣ ID Matrix",
     "Dec": "Duj",
@@ -35,5 +35,122 @@
     "The version of %(brand)s": "Taleqqemt n %(brand)s",
     "Add Phone Number": "Rnu uṭṭun n utilifun",
     "Add Email Address": "Rnu tasna imayl",
-    "Open": "Ṛẓem"
+    "Open": "Ṛẓem",
+    "Permissions": "Tisirag",
+    "Subscribe": "Zemmem",
+    "Change": "Senfel",
+    "Disconnect": "Kkes azday",
+    "exists": "illa",
+    "Santa": "Santa",
+    "Pizza": "Tapizzat",
+    "Corn": "Akbal",
+    "Cloud": "Tagut",
+    "Globe": "Amaḍal",
+    "Flower": "Ajeǧǧig",
+    "Butterfly": "Aferteṭṭu",
+    "Rooster": "Ayaẓiḍ",
+    "Panda": "Apanda",
+    "Upgrade": "Leqqem",
+    "Confirm": "Sentem",
+    "Brazil": "Brazil",
+    "Bolivia": "Bulivya",
+    "Bhutan": "Buṭan",
+    "Bermuda": "Birmuda",
+    "Benin": "Binin",
+    "Belize": "Biliz",
+    "Belgium": "Beljika",
+    "Belarus": "Bilarusya",
+    "Bahamas": "Bahamas",
+    "Aruba": "Aruba",
+    "Angola": "Angula",
+    "Andorra": "Andura",
+    "Algeria": "Dzayer",
+    "Albania": "Albanya",
+    "End": "End",
+    "Space": "Space",
+    "Shift": "Shift",
+    "Super": "Super",
+    "Ctrl": "Ctrl",
+    "Esc": "Esc",
+    "Calls": "Iɣuṛiten",
+    "Emoji": "Imuji",
+    "Afghanistan": "Afɣanistan",
+    "Logout": "Ffeɣ",
+    "Leave": "Fel",
+    "Phone": "Atilifun",
+    "Email": "Imayl",
+    "Go": "Ddu",
+    "Send": "Azen",
+    "example": "amedya",
+    "Example": "Amedya",
+    "Hide": "Ffer",
+    "Name": "Isem",
+    "Flags": "Icenyalen",
+    "Join": "Lkem",
+    "edited": "infel",
+    "Copied!": "inɣel!",
+    "Home": "Asnubeg",
+    "Reply": "Rar",
+    "Yes": "Yah",
+    "About": "Xef",
+    "Search…": "Arezzu…",
+    "A-Z": "A-Ẓ",
+    "Settings": "Tisɣal",
+    "Reject": "Agy",
+    "Re-join": "als-lkem",
+    "People": "Midden",
+    "Search": "Rzu",
+    "%(duration)sd": "%(duration)sas",
+    "Loading...": "Azdam...",
+    "Share": "Bḍu",
+    "Camera": "Takamiṛa",
+    "Microphone": "Amikṛu",
+    "Add": "Rnu",
+    "Ignore": "Nexxel",
+    "None": "Walu",
+    "Account": "Amiḍan",
+    "Theme": "Asgum",
+    "Algorithm:": "Talguritmit:",
+    "Save": "Ḥḍu",
+    "Profile": "Ifres",
+    "ID": "ID",
+    "Remove": "KKes",
+    "Folder": "Asdaw",
+    "Guitar": "Agiṭaṛ",
+    "Ball": "Tacama",
+    "Flag": "Acenyal",
+    "Telephone": "Atilifun",
+    "Key": "Tasarut",
+    "Book": "Adlis",
+    "Gift": "Timucit",
+    "Hat": "Tarazal",
+    "Robot": "Aṛubu",
+    "Heart": "Ul",
+    "Apple": "Tadeffuyt",
+    "Banana": "Tabanant",
+    "Fire": "Timessi",
+    "Moon": "Ayyur",
+    "Mushroom": "Agursel",
+    "Tree": "Aseklu",
+    "Fish": "Aselm",
+    "Turtle": "Ifker",
+    "Rabbit": "Agnin",
+    "Elephant": "Ilew",
+    "Pig": "Ilef",
+    "Close": "Rgel",
+    "Horse": "Ayyis",
+    "Lion": "Izem",
+    "Cat": "Amuc",
+    "Dog": "Aydi",
+    "or": "neɣ",
+    "Decline": "Agy",
+    "Guest": "Anebgi",
+    "Ok": "Wax",
+    "Notifications": "Tineɣmisin",
+    "No": "Uhu",
+    "Dark": "Adeɣmum",
+    "Usage": "Asemres",
+    "Feb": "Bṛa",
+    "Jan": "Yen",
+    "Continue": "Kemmel"
 }
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index c9bb9bb2d7..134f61a435 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3288,5 +3288,28 @@
     "You can add more later too, including already existing ones.": "您稍後可以新增更多內容，包含既有的。",
     "Please choose a strong password": "請選擇強密碼",
     "Use another login": "使用其他登入",
-    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "未經驗證，您將無法存取您的所有訊息，且可能不被其他人信任。"
+    "Without verifying, you won’t have access to all your messages and may appear as untrusted to others.": "未經驗證，您將無法存取您的所有訊息，且可能不被其他人信任。",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "您是這裡唯一的人。如果您離開，包含您在內的任何人都無法加入。",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "如果您重設所有東西，您將會在沒有受信任的工作階段、沒有受信任的使用者，且可能會看不到過去的訊息。",
+    "Only do this if you have no other device to complete verification with.": "當您沒有其他裝置可以完成驗證時，才執行此動作。",
+    "Reset everything": "重設所有東西",
+    "Forgotten or lost all recovery methods? <a>Reset all</a>": "忘記或遺失了所有復原方法？<a>重設全部</a>",
+    "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "如果這樣做，請注意，您的訊息不會被刪除，但在重新建立索引時，搜尋體驗可能會降低片刻",
+    "View message": "檢視訊息",
+    "Zoom in": "放大",
+    "Zoom out": "縮小",
+    "%(seconds)ss left": "剩%(seconds)s秒",
+    "Change server ACLs": "變更伺服器 ACL",
+    "Show options to enable 'Do not disturb' mode": "顯示啟用「勿打擾」模式的選項",
+    "You can select all or individual messages to retry or delete": "您可以選取全部或單獨的訊息來重試或刪除",
+    "Sending": "正在傳送",
+    "Retry all": "重試全部",
+    "Delete all": "刪除全部",
+    "Some of your messages have not been sent": "您的部份訊息未傳送",
+    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
+    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s 個成員包含 %(commaSeparatedMembers)s",
+    "Including %(commaSeparatedMembers)s": "包含 %(commaSeparatedMembers)s",
+    "View all %(count)s members|one": "檢視 1 個成員",
+    "View all %(count)s members|other": "檢視全部 %(count)s 個成員",
+    "Failed to send": "傳送失敗"
 }
diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts
index 2474406618..6349f31524 100644
--- a/src/indexing/BaseEventIndexManager.ts
+++ b/src/indexing/BaseEventIndexManager.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -133,6 +133,10 @@ export default abstract class BaseEventIndexManager {
         throw new Error("Unimplemented");
     }
 
+    async isEventIndexEmpty(): Promise<boolean> {
+        throw new Error("Unimplemented");
+    }
+
     /**
      * Check if our event index is empty.
      */
diff --git a/src/indexing/EventIndex.js b/src/indexing/EventIndex.js
index 2dcdb9e3a3..1cb44f240d 100644
--- a/src/indexing/EventIndex.js
+++ b/src/indexing/EventIndex.js
@@ -127,8 +127,13 @@ export default class EventIndex extends EventEmitter {
                     this.crawlerCheckpoints.push(forwardCheckpoint);
                 }
             } catch (e) {
-                console.log("EventIndex: Error adding initial checkpoints for room",
-                            room.roomId, backCheckpoint, forwardCheckpoint, e);
+                console.log(
+                    "EventIndex: Error adding initial checkpoints for room",
+                    room.roomId,
+                    backCheckpoint,
+                    forwardCheckpoint,
+                    e,
+                );
             }
         }));
     }
@@ -379,8 +384,12 @@ export default class EventIndex extends EventEmitter {
         try {
             await indexManager.addCrawlerCheckpoint(checkpoint);
         } catch (e) {
-            console.log("EventIndex: Error adding new checkpoint for room",
-                        room.roomId, checkpoint, e);
+            console.log(
+                "EventIndex: Error adding new checkpoint for room",
+                room.roomId,
+                checkpoint,
+                e,
+            );
         }
 
         this.crawlerCheckpoints.push(checkpoint);
@@ -459,7 +468,7 @@ export default class EventIndex extends EventEmitter {
             } catch (e) {
                 if (e.httpStatus === 403) {
                     console.log("EventIndex: Removing checkpoint as we don't have ",
-                                "permissions to fetch messages from this room.", checkpoint);
+                        "permissions to fetch messages from this room.", checkpoint);
                     try {
                         await indexManager.removeCrawlerCheckpoint(checkpoint);
                     } catch (e) {
@@ -589,7 +598,7 @@ export default class EventIndex extends EventEmitter {
                 // to do here anymore.
                 if (!newCheckpoint) {
                     console.log("EventIndex: The server didn't return a valid ",
-                                "new checkpoint, not continuing the crawl.", checkpoint);
+                        "new checkpoint, not continuing the crawl.", checkpoint);
                     continue;
                 }
 
@@ -599,12 +608,12 @@ export default class EventIndex extends EventEmitter {
                 // the new checkpoint to be used by the crawler.
                 if (eventsAlreadyAdded === true && newCheckpoint.fullCrawl !== true) {
                     console.log("EventIndex: Checkpoint had already all events",
-                                "added, stopping the crawl", checkpoint);
+                        "added, stopping the crawl", checkpoint);
                     await indexManager.removeCrawlerCheckpoint(newCheckpoint);
                 } else {
                     if (eventsAlreadyAdded === true) {
                         console.log("EventIndex: Checkpoint had already all events",
-                                    "added, but continuing due to a full crawl", checkpoint);
+                            "added, but continuing due to a full crawl", checkpoint);
                     }
                     this.crawlerCheckpoints.push(newCheckpoint);
                 }
@@ -776,8 +785,14 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise<boolean>} Resolves to true if events were added to the
      * timeline, false otherwise.
      */
-    async populateFileTimeline(timelineSet, timeline, room, limit = 10,
-                               fromEvent = null, direction = EventTimeline.BACKWARDS) {
+    async populateFileTimeline(
+        timelineSet,
+        timeline,
+        room,
+        limit = 10,
+        fromEvent = null,
+        direction = EventTimeline.BACKWARDS,
+    ) {
         const matrixEvents = await this.loadFileEvents(room, limit, fromEvent, direction);
 
         // If this is a normal fill request, not a pagination request, we need
@@ -807,7 +822,7 @@ export default class EventIndex extends EventEmitter {
         }
 
         console.log("EventIndex: Populating file panel with", matrixEvents.length,
-                    "events and setting the pagination token to", paginationToken);
+            "events and setting the pagination token to", paginationToken);
 
         timeline.setPaginationToken(paginationToken, EventTimeline.BACKWARDS);
         return ret;
diff --git a/src/indexing/EventIndexPeg.js b/src/indexing/EventIndexPeg.ts
similarity index 94%
rename from src/indexing/EventIndexPeg.js
rename to src/indexing/EventIndexPeg.ts
index 7004efc554..4356d882d5 100644
--- a/src/indexing/EventIndexPeg.js
+++ b/src/indexing/EventIndexPeg.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -27,12 +27,11 @@ import {SettingLevel} from "../settings/SettingLevel";
 
 const INDEX_VERSION = 1;
 
-class EventIndexPeg {
-    constructor() {
-        this.index = null;
-        this._supportIsInstalled = false;
-        this.error = null;
-    }
+export class EventIndexPeg {
+    public index: EventIndex = null;
+    public error: Error = null;
+
+    private _supportIsInstalled = false;
 
     /**
      * Initialize the EventIndexPeg and if event indexing is enabled initialize
@@ -181,7 +180,7 @@ class EventIndexPeg {
     }
 }
 
-if (!global.mxEventIndexPeg) {
-    global.mxEventIndexPeg = new EventIndexPeg();
+if (!window.mxEventIndexPeg) {
+    window.mxEventIndexPeg = new EventIndexPeg();
 }
-export default global.mxEventIndexPeg;
+export default window.mxEventIndexPeg;
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js
index 1a40fde26f..84a131f23a 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.js
@@ -255,7 +255,7 @@ matrixLinkify.options = {
     target: function(href, type) {
         if (type === 'url') {
             const transformed = tryTransformPermalinkToLocalHref(href);
-            if (transformed !== href || href.match(matrixLinkify.ELEMENT_URL_PATTERN)) {
+            if (transformed !== href || decodeURIComponent(href).match(matrixLinkify.ELEMENT_URL_PATTERN)) {
                 return null;
             } else {
                 return '_blank';
diff --git a/src/mjolnir/BanList.js b/src/mjolnir/BanList.ts
similarity index 100%
rename from src/mjolnir/BanList.js
rename to src/mjolnir/BanList.ts
diff --git a/src/mjolnir/ListRule.js b/src/mjolnir/ListRule.ts
similarity index 100%
rename from src/mjolnir/ListRule.js
rename to src/mjolnir/ListRule.ts
diff --git a/src/mjolnir/Mjolnir.js b/src/mjolnir/Mjolnir.ts
similarity index 100%
rename from src/mjolnir/Mjolnir.js
rename to src/mjolnir/Mjolnir.ts
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
index 2a26eeac13..1497a2208d 100644
--- a/src/settings/Settings.ts
+++ b/src/settings/Settings.ts
@@ -438,7 +438,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
     },
     "webRtcAllowPeerToPeer": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
-        displayName: _td('Allow Peer-to-Peer for 1:1 calls'),
+        displayName: _td(
+            "Allow Peer-to-Peer for 1:1 calls " +
+            "(if you enable this, the other party might be able to see your IP address)",
+        ),
         default: true,
         invertedSettingName: 'webRtcForceTURN',
     },
diff --git a/src/stores/BreadcrumbsStore.ts b/src/stores/BreadcrumbsStore.ts
index 393f4f27a1..1a78a1b485 100644
--- a/src/stores/BreadcrumbsStore.ts
+++ b/src/stores/BreadcrumbsStore.ts
@@ -122,7 +122,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
     }
 
     private async appendRoom(room: Room) {
-        if (room.isSpaceRoom() && SettingsStore.getValue("feature_spaces")) return; // hide space rooms
+        if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) return; // hide space rooms
         let updated = false;
         const rooms = (this.state.rooms || []).slice(); // cheap clone
 
diff --git a/src/stores/CustomRoomTagStore.js b/src/stores/CustomRoomTagStore.js
index edfc0003cf..55c9699f7a 100644
--- a/src/stores/CustomRoomTagStore.js
+++ b/src/stores/CustomRoomTagStore.js
@@ -124,15 +124,15 @@ class CustomRoomTagStore extends EventEmitter {
                     const tags = Object.assign({}, oldTags, tag);
                     this._setState({tags});
                 }
+                break;
             }
-            break;
             case 'on_client_not_viable':
             case 'on_logged_out': {
                 // we assume to always have a tags object in the state
                 this._state = {tags: {}};
                 RoomListStore.instance.off(LISTS_UPDATE_EVENT, this._onListsUpdated);
+                break;
             }
-            break;
         }
     }
 
diff --git a/src/stores/GroupFilterOrderStore.js b/src/stores/GroupFilterOrderStore.js
index 492322146e..b18abaa001 100644
--- a/src/stores/GroupFilterOrderStore.js
+++ b/src/stores/GroupFilterOrderStore.js
@@ -168,7 +168,7 @@ class GroupFilterOrderStore extends Store {
 
                 Analytics.trackEvent('FilterStore', 'select_tag');
             }
-            break;
+                break;
             case 'deselect_tags':
                 if (payload.tag) {
                     // if a tag is passed, only deselect that tag
@@ -181,7 +181,7 @@ class GroupFilterOrderStore extends Store {
                     });
                 }
                 Analytics.trackEvent('FilterStore', 'deselect_tags');
-            break;
+                break;
             case 'on_client_not_viable':
             case 'on_logged_out': {
                 // Reset state without pushing an update to the view, which generally assumes that
@@ -207,8 +207,8 @@ class GroupFilterOrderStore extends Store {
             groupIds.forEach(groupId => {
                 const rooms =
                     GroupStore.getGroupRooms(groupId)
-                    .map(r => client.getRoom(r.roomId)) // to Room objects
-                    .filter(r => r !== null && r !== undefined);   // filter out rooms we haven't joined from the group
+                        .map(r => client.getRoom(r.roomId)) // to Room objects
+                        .filter(r => r !== null && r !== undefined);   // filter out rooms we haven't joined from the group
                 const badge = rooms && RoomNotifs.aggregateNotificationCount(rooms);
                 changedBadges[groupId] = (badge && badge.count !== 0) ? badge : undefined;
             });
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index 601c77cdf3..fe2e0a66b2 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -60,6 +60,10 @@ const INITIAL_STATE = {
     replyingToEvent: null,
 
     shouldPeek: false,
+
+    viaServers: [],
+
+    wasContextSwitch: false,
 };
 
 /**
@@ -113,6 +117,8 @@ class RoomViewStore extends Store<ActionPayload> {
                 this.setState({
                     roomId: null,
                     roomAlias: null,
+                    viaServers: [],
+                    wasContextSwitch: false,
                 });
                 break;
             case 'view_room_error':
@@ -191,6 +197,8 @@ class RoomViewStore extends Store<ActionPayload> {
                 replyingToEvent: null,
                 // pull the user out of Room Settings
                 isEditingSettings: false,
+                viaServers: payload.via_servers,
+                wasContextSwitch: payload.context_switch,
             };
 
             // Allow being given an event to be replied to when switching rooms but sanity check its for this room
@@ -226,6 +234,8 @@ class RoomViewStore extends Store<ActionPayload> {
                     roomAlias: payload.room_alias,
                     roomLoading: true,
                     roomLoadError: null,
+                    viaServers: payload.via_servers,
+                    wasContextSwitch: payload.context_switch,
                 });
                 try {
                     const result = await MatrixClientPeg.get().getRoomIdForAlias(payload.room_alias);
@@ -251,6 +261,8 @@ class RoomViewStore extends Store<ActionPayload> {
                 room_alias: payload.room_alias,
                 auto_join: payload.auto_join,
                 oob_data: payload.oob_data,
+                viaServers: payload.via_servers,
+                wasContextSwitch: payload.context_switch,
             });
         }
     }
@@ -272,9 +284,10 @@ class RoomViewStore extends Store<ActionPayload> {
 
         const cli = MatrixClientPeg.get();
         const address = this.state.roomAlias || this.state.roomId;
+        const viaServers = this.state.viaServers || [];
         try {
             await retry<void, MatrixError>(() => cli.joinRoom(address, {
-                viaServers: payload.via_servers,
+                viaServers,
                 ...payload.opts,
             }), NUM_JOIN_RETRY, (err) => {
                 // if we received a Gateway timeout then retry
@@ -419,6 +432,10 @@ class RoomViewStore extends Store<ActionPayload> {
     public shouldPeek() {
         return this.state.shouldPeek;
     }
+
+    public getWasContextSwitch() {
+        return this.state.wasContextSwitch;
+    }
 }
 
 let singletonRoomViewStore = null;
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index e4b180f3ce..4423891c61 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {sortBy, throttle} from "lodash";
+import {ListIteratee, Many, sortBy, throttle} from "lodash";
 import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixEvent} from "matrix-js-sdk/src/models/event";
@@ -61,15 +61,18 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
-const getOrder = (ev: MatrixEvent): string | null => {
-    const content = ev.getContent();
-    if (typeof content.order === "string" && Array.from(content.order).every((c: string) => {
+// For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
+export const getOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
+    let validatedOrder: string = null;
+
+    if (typeof order === "string" && Array.from(order).every((c: string) => {
         const charCode = c.charCodeAt(0);
         return charCode >= 0x20 && charCode <= 0x7F;
     })) {
-        return content.order;
+        validatedOrder = order;
     }
-    return null;
+
+    return [validatedOrder, creationTs, roomId];
 }
 
 const getRoomFn: FetchRoomFn = (room: Room) => {
@@ -112,8 +115,15 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         return this._suggestedRooms;
     }
 
+    /**
+     * Sets the active space, updates room list filters,
+     * optionally switches the user's room back to where they were when they last viewed that space.
+     * @param space which space to switch to.
+     * @param contextSwitch whether to switch the user's context,
+     * should not be done when the space switch is done implicitly due to another event like switching room.
+     */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (space === this.activeSpace) return;
+        if (space === this.activeSpace || (space && !space?.isSpaceRoom())) return;
 
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);
@@ -193,9 +203,16 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     private getChildren(spaceId: string): Room[] {
         const room = this.matrixClient?.getRoom(spaceId);
         const childEvents = room?.currentState.getStateEvents(EventType.SpaceChild).filter(ev => ev.getContent()?.via);
-        return sortBy(childEvents, getOrder)
-            .map(ev => this.matrixClient.getRoom(ev.getStateKey()))
-            .filter(room => room?.getMyMembership() === "join") || [];
+        return sortBy(childEvents, ev => {
+            const roomId = ev.getStateKey();
+            const childRoom = this.matrixClient?.getRoom(roomId);
+            const createTs = childRoom?.currentState.getStateEvents(EventType.RoomCreate, "")?.getTs();
+            return getOrder(ev.getContent().order, createTs, roomId);
+        }).map(ev => {
+            return this.matrixClient.getRoom(ev.getStateKey());
+        }).filter(room => {
+            return room?.getMyMembership() === "join" || room?.getMyMembership() === "invite";
+        }) || [];
     }
 
     public getChildRooms(spaceId: string): Room[] {
@@ -203,7 +220,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     }
 
     public getChildSpaces(spaceId: string): Room[] {
-        return this.getChildren(spaceId).filter(r => r.isSpaceRoom());
+        // don't show invited subspaces as they surface at the top level for better visibility
+        return this.getChildren(spaceId).filter(r => r.isSpaceRoom() && r.getMyMembership() === "join");
     }
 
     public getParents(roomId: string, canonicalOnly = false): Room[] {
@@ -304,7 +322,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 
         // if the currently selected space no longer exists, remove its selection
         if (this._activeSpace && detachedNodes.has(this._activeSpace)) {
-            this.setActiveSpace(null);
+            this.setActiveSpace(null, false);
         }
 
         this.onRoomsUpdate(); // TODO only do this if a change has happened
@@ -405,36 +423,76 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 
         this.spaceFilteredRooms.forEach((roomIds, s) => {
             // Update NotificationStates
-            this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => roomIds.has(room.roomId)));
+            this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => {
+                if (roomIds.has(room.roomId)) {
+                    // Don't aggregate notifications for DMs except in the Home Space
+                    if (s !== HOME_SPACE) {
+                        return !DMRoomMap.shared().getUserIdForRoomId(room.roomId)
+                            || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite);
+                    }
+
+                    return true;
+                }
+
+                return false;
+            }));
         });
     }, 100, {trailing: true, leading: true});
 
-    private onRoom = (room: Room, membership?: string, oldMembership?: string) => {
-        if ((membership || room.getMyMembership()) === "invite") {
-            this._invitedSpaces.add(room);
-            this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
-        } else if (oldMembership === "invite") {
-            this._invitedSpaces.delete(room);
-            this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
-        } else if (room?.isSpaceRoom()) {
-            this.onSpaceUpdate();
-            this.emit(room.roomId);
-        } else {
-            // this.onRoomUpdate(room);
-            this.onRoomsUpdate();
+    private switchToRelatedSpace = (roomId: string) => {
+        if (this.suggestedRooms.find(r => r.room_id === roomId)) return;
+
+        let parent = this.getCanonicalParent(roomId);
+        if (!parent) {
+            parent = this.rootSpaces.find(s => this.spaceFilteredRooms.get(s.roomId)?.has(roomId));
+        }
+        if (!parent) {
+            const parents = Array.from(this.parentMap.get(roomId) || []);
+            parent = parents.find(p => this.matrixClient.getRoom(p));
         }
 
-        if (room.getMyMembership() === "join") {
-            if (!room.isSpaceRoom()) {
+        // don't trigger a context switch when we are switching a space to match the chosen room
+        this.setActiveSpace(parent || null, false);
+    };
+
+    private onRoom = (room: Room, newMembership?: string, oldMembership?: string) => {
+        const membership = newMembership || room.getMyMembership();
+
+        if (!room.isSpaceRoom()) {
+            // this.onRoomUpdate(room);
+            this.onRoomsUpdate();
+
+            if (membership === "join") {
+                // the user just joined a room, remove it from the suggested list if it was there
                 const numSuggestedRooms = this._suggestedRooms.length;
                 this._suggestedRooms = this._suggestedRooms.filter(r => r.room_id !== room.roomId);
                 if (numSuggestedRooms !== this._suggestedRooms.length) {
                     this.emit(SUGGESTED_ROOMS, this._suggestedRooms);
                 }
-            } else if (room.roomId === RoomViewStore.getRoomId()) {
-                // if the user was looking at the space and then joined: select that space
-                this.setActiveSpace(room);
+
+                // if the room currently being viewed was just joined then switch to its related space
+                if (newMembership === "join" && room.roomId === RoomViewStore.getRoomId()) {
+                    this.switchToRelatedSpace(room.roomId);
+                }
             }
+            return;
+        }
+
+        // Space
+        if (membership === "invite") {
+            this._invitedSpaces.add(room);
+            this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
+        } else if (oldMembership === "invite" && membership !== "join") {
+            this._invitedSpaces.delete(room);
+            this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
+        } else {
+            this.onSpaceUpdate();
+            this.emit(room.roomId);
+        }
+
+        if (membership === "join" && room.roomId === RoomViewStore.getRoomId()) {
+            // if the user was looking at the space and then joined: select that space
+            this.setActiveSpace(room, false);
         }
     };
 
@@ -498,6 +556,17 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     };
 
+    protected async reset() {
+        this.rootSpaces = [];
+        this.orphanedRooms = new Set();
+        this.parentMap = new EnhancedMap();
+        this.notificationStateMap = new Map();
+        this.spaceFilteredRooms = new Map();
+        this._activeSpace = null;
+        this._suggestedRooms = [];
+        this._invitedSpaces = new Set();
+    }
+
     protected async onNotReady() {
         if (!SettingsStore.getValue("feature_spaces")) return;
         if (this.matrixClient) {
@@ -507,7 +576,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
             this.matrixClient.removeListener("accountData", this.onAccountData);
         }
-        await this.reset({});
+        await this.reset();
     }
 
     protected async onReady() {
@@ -523,10 +592,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         // restore selected state from last session if any and still valid
         const lastSpaceId = window.localStorage.getItem(ACTIVE_SPACE_LS_KEY);
         if (lastSpaceId) {
-            const space = this.rootSpaces.find(s => s.roomId === lastSpaceId);
-            if (space) {
-                this.setActiveSpace(space);
-            }
+            this.setActiveSpace(this.matrixClient.getRoom(lastSpaceId));
         }
     }
 
@@ -534,28 +600,18 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (!SettingsStore.getValue("feature_spaces")) return;
         switch (payload.action) {
             case "view_room": {
-                const room = this.matrixClient?.getRoom(payload.room_id);
-
                 // Don't auto-switch rooms when reacting to a context-switch
                 // as this is not helpful and can create loops of rooms/space switching
-                if (!room || payload.context_switch) break;
+                if (payload.context_switch) break;
 
-                // persist last viewed room from a space
-
-                if (room.isSpaceRoom()) {
-                    this.setActiveSpace(room);
-                } else if (!this.getSpaceFilteredRoomIds(this.activeSpace).has(room.roomId)) {
-                    // TODO maybe reverse these first 2 clauses once space panel active is fixed
-                    let parent = this.rootSpaces.find(s => this.spaceFilteredRooms.get(s.roomId)?.has(room.roomId));
-                    if (!parent) {
-                        parent = this.getCanonicalParent(room.roomId);
-                    }
-                    if (!parent) {
-                        const parents = Array.from(this.parentMap.get(room.roomId) || []);
-                        parent = parents.find(p => this.matrixClient.getRoom(p));
-                    }
-                    // don't trigger a context switch when we are switching a space to match the chosen room
-                    this.setActiveSpace(parent || null, false);
+                const roomId = payload.room_id;
+                const room = this.matrixClient?.getRoom(roomId);
+                if (room?.isSpaceRoom()) {
+                    // Don't context switch when navigating to the space room
+                    // as it will cause you to end up in the wrong room
+                    this.setActiveSpace(room, false);
+                } else if (!this.getSpaceFilteredRoomIds(this.activeSpace).has(roomId)) {
+                    this.switchToRelatedSpace(roomId);
                 }
 
                 // Persist last viewed room from a space
@@ -566,7 +622,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             }
             case "after_leave_room":
                 if (this._activeSpace && payload.room_id === this._activeSpace.roomId) {
-                    this.setActiveSpace(null);
+                    this.setActiveSpace(null, false);
                 }
                 break;
         }
@@ -582,7 +638,9 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         return state;
     }
 
-    // traverse space tree with DFS calling fn on each space including the given root one
+    // traverse space tree with DFS calling fn on each space including the given root one,
+    // if includeRooms is true then fn will be called on each leaf room, if it is present in multiple sub-spaces
+    // then fn will be called with it multiple times.
     public traverseSpace(
         spaceId: string,
         fn: (roomId: string) => void,
diff --git a/src/stores/TypingStore.js b/src/stores/TypingStore.ts
similarity index 84%
rename from src/stores/TypingStore.js
rename to src/stores/TypingStore.ts
index e86d698eac..d5177a33a0 100644
--- a/src/stores/TypingStore.js
+++ b/src/stores/TypingStore.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -25,15 +25,23 @@ const TYPING_SERVER_TIMEOUT = 30000;
  * Tracks typing state for users.
  */
 export default class TypingStore {
+    private typingStates: {
+        [roomId: string]: {
+            isTyping: boolean,
+            userTimer: Timer,
+            serverTimer: Timer,
+        },
+    };
+
     constructor() {
         this.reset();
     }
 
     static sharedInstance(): TypingStore {
-        if (global.mxTypingStore === undefined) {
-            global.mxTypingStore = new TypingStore();
+        if (window.mxTypingStore === undefined) {
+            window.mxTypingStore = new TypingStore();
         }
-        return global.mxTypingStore;
+        return window.mxTypingStore;
     }
 
     /**
@@ -41,7 +49,7 @@ export default class TypingStore {
      * MatrixClientPeg client changes.
      */
     reset() {
-        this._typingStates = {
+        this.typingStates = {
             // "roomId": {
             //     isTyping: bool,     // Whether the user is typing or not
             //     userTimer: Timer,   // Local timeout for "user has stopped typing"
@@ -59,14 +67,14 @@ export default class TypingStore {
         if (!SettingsStore.getValue('sendTypingNotifications')) return;
         if (SettingsStore.getValue('lowBandwidth')) return;
 
-        let currentTyping = this._typingStates[roomId];
+        let currentTyping = this.typingStates[roomId];
         if ((!isTyping && !currentTyping) || (currentTyping && currentTyping.isTyping === isTyping)) {
             // No change in state, so don't do anything. We'll let the timer run its course.
             return;
         }
 
         if (!currentTyping) {
-            currentTyping = this._typingStates[roomId] = {
+            currentTyping = this.typingStates[roomId] = {
                 isTyping: isTyping,
                 serverTimer: new Timer(TYPING_SERVER_TIMEOUT),
                 userTimer: new Timer(TYPING_USER_TIMEOUT),
@@ -78,7 +86,7 @@ export default class TypingStore {
         if (isTyping) {
             if (!currentTyping.serverTimer.isRunning()) {
                 currentTyping.serverTimer.restart().finished().then(() => {
-                    const currentTyping = this._typingStates[roomId];
+                    const currentTyping = this.typingStates[roomId];
                     if (currentTyping) currentTyping.isTyping = false;
 
                     // The server will (should) time us out on typing, so we don't
diff --git a/src/stores/VoiceRecordingStore.ts b/src/stores/VoiceRecordingStore.ts
index cc999f23f8..8ee44359fb 100644
--- a/src/stores/VoiceRecordingStore.ts
+++ b/src/stores/VoiceRecordingStore.ts
@@ -78,3 +78,5 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
         return this.updateState({recording: null});
     }
 }
+
+window.mxVoiceRecordingStore = VoiceRecordingStore.instance;
diff --git a/src/stores/WidgetEchoStore.js b/src/stores/WidgetEchoStore.ts
similarity index 71%
rename from src/stores/WidgetEchoStore.js
rename to src/stores/WidgetEchoStore.ts
index 3aef1beb3e..09120d6108 100644
--- a/src/stores/WidgetEchoStore.js
+++ b/src/stores/WidgetEchoStore.ts
@@ -1,6 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2018-2021 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.
@@ -16,6 +15,8 @@ limitations under the License.
 */
 
 import EventEmitter from 'events';
+import { IWidget } from 'matrix-widget-api';
+import MatrixEvent from "matrix-js-sdk/src/models/event";
 import {WidgetType} from "../widgets/WidgetType";
 
 /**
@@ -23,14 +24,20 @@ import {WidgetType} from "../widgets/WidgetType";
  * proxying through state from the js-sdk.
  */
 class WidgetEchoStore extends EventEmitter {
+    private roomWidgetEcho: {
+        [roomId: string]: {
+            [widgetId: string]: IWidget,
+        },
+    };
+
     constructor() {
         super();
 
-        this._roomWidgetEcho = {
+        this.roomWidgetEcho = {
             // Map as below. Object is the content of the widget state event,
             // so for widgets that have been deleted locally, the object is empty.
             // roomId: {
-            //     widgetId: [object]
+            //     widgetId: IWidget
             // }
         };
     }
@@ -42,14 +49,14 @@ class WidgetEchoStore extends EventEmitter {
      * and we don't really need the actual widget events anyway since we just want to
      * show a spinner / prevent widgets being added twice.
      *
-     * @param {Room} roomId The ID of the room to get widgets for
+     * @param {string} roomId The ID of the room to get widgets for
      * @param {MatrixEvent[]} currentRoomWidgets Current widgets for the room
      * @returns {MatrixEvent[]} List of widgets in the room, minus any pending removal
      */
-    getEchoedRoomWidgets(roomId, currentRoomWidgets) {
+    getEchoedRoomWidgets(roomId: string, currentRoomWidgets: MatrixEvent[]): MatrixEvent[] {
         const echoedWidgets = [];
 
-        const roomEchoState = Object.assign({}, this._roomWidgetEcho[roomId]);
+        const roomEchoState = Object.assign({}, this.roomWidgetEcho[roomId]);
 
         for (const w of currentRoomWidgets) {
             const widgetId = w.getStateKey();
@@ -65,8 +72,8 @@ class WidgetEchoStore extends EventEmitter {
         return echoedWidgets;
     }
 
-    roomHasPendingWidgetsOfType(roomId, currentRoomWidgets, type: WidgetType) {
-        const roomEchoState = Object.assign({}, this._roomWidgetEcho[roomId]);
+    roomHasPendingWidgetsOfType(roomId: string, currentRoomWidgets: MatrixEvent[], type?: WidgetType): boolean {
+        const roomEchoState = Object.assign({}, this.roomWidgetEcho[roomId]);
 
         // any widget IDs that are already in the room are not pending, so
         // echoes for them don't count as pending.
@@ -85,20 +92,20 @@ class WidgetEchoStore extends EventEmitter {
         }
     }
 
-    roomHasPendingWidgets(roomId, currentRoomWidgets) {
+    roomHasPendingWidgets(roomId: string, currentRoomWidgets: MatrixEvent[]): boolean {
         return this.roomHasPendingWidgetsOfType(roomId, currentRoomWidgets);
     }
 
-    setRoomWidgetEcho(roomId, widgetId, state) {
-        if (this._roomWidgetEcho[roomId] === undefined) this._roomWidgetEcho[roomId] = {};
+    setRoomWidgetEcho(roomId: string, widgetId: string, state: IWidget) {
+        if (this.roomWidgetEcho[roomId] === undefined) this.roomWidgetEcho[roomId] = {};
 
-        this._roomWidgetEcho[roomId][widgetId] = state;
+        this.roomWidgetEcho[roomId][widgetId] = state;
         this.emit('update', roomId, widgetId);
     }
 
-    removeRoomWidgetEcho(roomId, widgetId) {
-        delete this._roomWidgetEcho[roomId][widgetId];
-        if (Object.keys(this._roomWidgetEcho[roomId]).length === 0) delete this._roomWidgetEcho[roomId];
+    removeRoomWidgetEcho(roomId: string, widgetId: string) {
+        delete this.roomWidgetEcho[roomId][widgetId];
+        if (Object.keys(this.roomWidgetEcho[roomId]).length === 0) delete this.roomWidgetEcho[roomId];
         this.emit('update', roomId, widgetId);
     }
 }
diff --git a/src/stores/notifications/StaticNotificationState.ts b/src/stores/notifications/StaticNotificationState.ts
index 0392ed3716..b18aa78e0f 100644
--- a/src/stores/notifications/StaticNotificationState.ts
+++ b/src/stores/notifications/StaticNotificationState.ts
@@ -18,6 +18,8 @@ import { NotificationColor } from "./NotificationColor";
 import { NotificationState } from "./NotificationState";
 
 export class StaticNotificationState extends NotificationState {
+    public static readonly RED_EXCLAMATION = StaticNotificationState.forSymbol("!", NotificationColor.Red);
+
     constructor(symbol: string, count: number, color: NotificationColor) {
         super();
         this._symbol = symbol;
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index caab46a0c2..58eb6ed317 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -426,6 +426,10 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
             return; // don't do anything on rooms that aren't visible
         }
 
+        if (cause === RoomUpdateCause.NewRoom && !this.prefilterConditions.every(c => c.isVisible(room))) {
+            return; // don't do anything on new rooms which ought not to be shown
+        }
+
         const shouldUpdate = await this.algorithm.handleRoomUpdate(room, cause);
         if (shouldUpdate) {
             if (SettingsStore.getValue("advancedRoomListLogging")) {
@@ -601,7 +605,11 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
 
         let rooms = this.matrixClient.getVisibleRooms().filter(r => VisibilityProvider.instance.isRoomVisible(r));
 
-        if (this.prefilterConditions.length > 0) {
+        // if spaces are enabled only consider the prefilter conditions when there are no runtime conditions
+        // for the search all spaces feature
+        if (this.prefilterConditions.length > 0
+            && (!SettingsStore.getValue("feature_spaces") || !this.filterConditions.length)
+        ) {
             rooms = rooms.filter(r => {
                 for (const filter of this.prefilterConditions) {
                     if (!filter.isVisible(r)) {
@@ -660,7 +668,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
      * and thus might not cause an update to the store immediately.
      * @param {IFilterCondition} filter The filter condition to add.
      */
-    public addFilter(filter: IFilterCondition): void {
+    public async addFilter(filter: IFilterCondition): Promise<void> {
         if (SettingsStore.getValue("advancedRoomListLogging")) {
             // TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
             console.log("Adding filter condition:", filter);
@@ -672,6 +680,12 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
             promise = this.recalculatePrefiltering();
         } else {
             this.filterConditions.push(filter);
+            // Runtime filters with spaces disable prefiltering for the search all spaces effect
+            if (SettingsStore.getValue("feature_spaces")) {
+                // this has to be awaited so that `setKnownRooms` is called in time for the `addFilterCondition` below
+                // this way the runtime filters are only evaluated on one dataset and not both.
+                await this.recalculatePrefiltering();
+            }
             if (this.algorithm) {
                 this.algorithm.addFilterCondition(filter);
             }
@@ -698,6 +712,10 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
 
             if (this.algorithm) {
                 this.algorithm.removeFilterCondition(filter);
+                // Runtime filters with spaces disable prefiltering for the search all spaces effect
+                if (SettingsStore.getValue("feature_spaces")) {
+                    promise = this.recalculatePrefiltering();
+                }
             }
         }
         idx = this.prefilterConditions.indexOf(filter);
diff --git a/src/stores/room-list/algorithms/Algorithm.ts b/src/stores/room-list/algorithms/Algorithm.ts
index 83ee803115..024c484c41 100644
--- a/src/stores/room-list/algorithms/Algorithm.ts
+++ b/src/stores/room-list/algorithms/Algorithm.ts
@@ -199,8 +199,10 @@ export class Algorithm extends EventEmitter {
     }
 
     private async doUpdateStickyRoom(val: Room) {
-        // no-op sticky rooms for spaces - they're effectively virtual rooms
-        if (val?.isSpaceRoom() && val.getMyMembership() !== "invite") val = null;
+        if (SettingsStore.getValue("feature_spaces") && val?.isSpaceRoom() && val.getMyMembership() !== "invite") {
+            // no-op sticky rooms for spaces - they're effectively virtual rooms
+            val = null;
+        }
 
         // Note throughout: We need async so we can wait for handleRoomUpdate() to do its thing,
         // otherwise we risk duplicating rooms.
@@ -577,9 +579,8 @@ export class Algorithm extends EventEmitter {
 
         await this.generateFreshTags(newTags);
 
-        this.cachedRooms = newTags;
+        this.cachedRooms = newTags; // this recalculates the filtered rooms for us
         this.updateTagsFromCache();
-        this.recalculateFilteredRooms();
 
         // Now that we've finished generation, we need to update the sticky room to what
         // it was. It's entirely possible that it changed lists though, so if it did then
diff --git a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
index 7c8c879cf6..49cfd9e520 100644
--- a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
@@ -21,79 +21,83 @@ import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import * as Unread from "../../../../Unread";
 import { EffectiveMembership, getEffectiveMembership } from "../../../../utils/membership";
 
+export const sortRooms = (rooms: Room[]): Room[] => {
+    // We cache the timestamp lookup to avoid iterating forever on the timeline
+    // of events. This cache only survives a single sort though.
+    // We wouldn't need this if `.sort()` didn't constantly try and compare all
+    // of the rooms to each other.
+
+    // TODO: We could probably improve the sorting algorithm here by finding changes.
+    // See https://github.com/vector-im/element-web/issues/14459
+    // For example, if we spent a little bit of time to determine which elements have
+    // actually changed (probably needs to be done higher up?) then we could do an
+    // insertion sort or similar on the limited set of changes.
+
+    // TODO: Don't assume we're using the same client as the peg
+    // See https://github.com/vector-im/element-web/issues/14458
+    let myUserId = '';
+    if (MatrixClientPeg.get()) {
+        myUserId = MatrixClientPeg.get().getUserId();
+    }
+
+    const tsCache: { [roomId: string]: number } = {};
+    const getLastTs = (r: Room) => {
+        if (tsCache[r.roomId]) {
+            return tsCache[r.roomId];
+        }
+
+        const ts = (() => {
+            // Apparently we can have rooms without timelines, at least under testing
+            // environments. Just return MAX_INT when this happens.
+            if (!r || !r.timeline) {
+                return Number.MAX_SAFE_INTEGER;
+            }
+
+            // If the room hasn't been joined yet, it probably won't have a timeline to
+            // parse. We'll still fall back to the timeline if this fails, but chances
+            // are we'll at least have our own membership event to go off of.
+            const effectiveMembership = getEffectiveMembership(r.getMyMembership());
+            if (effectiveMembership !== EffectiveMembership.Join) {
+                const membershipEvent = r.currentState.getStateEvents("m.room.member", myUserId);
+                if (membershipEvent && !Array.isArray(membershipEvent)) {
+                    return membershipEvent.getTs();
+                }
+            }
+
+            for (let i = r.timeline.length - 1; i >= 0; --i) {
+                const ev = r.timeline[i];
+                if (!ev.getTs()) continue; // skip events that don't have timestamps (tests only?)
+
+                if (ev.getSender() === myUserId || Unread.eventTriggersUnreadCount(ev)) {
+                    return ev.getTs();
+                }
+            }
+
+            // we might only have events that don't trigger the unread indicator,
+            // in which case use the oldest event even if normally it wouldn't count.
+            // This is better than just assuming the last event was forever ago.
+            if (r.timeline.length && r.timeline[0].getTs()) {
+                return r.timeline[0].getTs();
+            } else {
+                return Number.MAX_SAFE_INTEGER;
+            }
+        })();
+
+        tsCache[r.roomId] = ts;
+        return ts;
+    };
+
+    return rooms.sort((a, b) => {
+        return getLastTs(b) - getLastTs(a);
+    });
+};
+
 /**
  * Sorts rooms according to the last event's timestamp in each room that seems
  * useful to the user.
  */
 export class RecentAlgorithm implements IAlgorithm {
     public async sortRooms(rooms: Room[], tagId: TagID): Promise<Room[]> {
-        // We cache the timestamp lookup to avoid iterating forever on the timeline
-        // of events. This cache only survives a single sort though.
-        // We wouldn't need this if `.sort()` didn't constantly try and compare all
-        // of the rooms to each other.
-
-        // TODO: We could probably improve the sorting algorithm here by finding changes.
-        // See https://github.com/vector-im/element-web/issues/14459
-        // For example, if we spent a little bit of time to determine which elements have
-        // actually changed (probably needs to be done higher up?) then we could do an
-        // insertion sort or similar on the limited set of changes.
-
-        // TODO: Don't assume we're using the same client as the peg
-        // See https://github.com/vector-im/element-web/issues/14458
-        let myUserId = '';
-        if (MatrixClientPeg.get()) {
-            myUserId = MatrixClientPeg.get().getUserId();
-        }
-
-        const tsCache: { [roomId: string]: number } = {};
-        const getLastTs = (r: Room) => {
-            if (tsCache[r.roomId]) {
-                return tsCache[r.roomId];
-            }
-
-            const ts = (() => {
-                // Apparently we can have rooms without timelines, at least under testing
-                // environments. Just return MAX_INT when this happens.
-                if (!r || !r.timeline) {
-                    return Number.MAX_SAFE_INTEGER;
-                }
-
-                // If the room hasn't been joined yet, it probably won't have a timeline to
-                // parse. We'll still fall back to the timeline if this fails, but chances
-                // are we'll at least have our own membership event to go off of.
-                const effectiveMembership = getEffectiveMembership(r.getMyMembership());
-                if (effectiveMembership !== EffectiveMembership.Join) {
-                    const membershipEvent = r.currentState.getStateEvents("m.room.member", myUserId);
-                    if (membershipEvent && !Array.isArray(membershipEvent)) {
-                        return membershipEvent.getTs();
-                    }
-                }
-
-                for (let i = r.timeline.length - 1; i >= 0; --i) {
-                    const ev = r.timeline[i];
-                    if (!ev.getTs()) continue; // skip events that don't have timestamps (tests only?)
-
-                    if (ev.getSender() === myUserId || Unread.eventTriggersUnreadCount(ev)) {
-                        return ev.getTs();
-                    }
-                }
-
-                // we might only have events that don't trigger the unread indicator,
-                // in which case use the oldest event even if normally it wouldn't count.
-                // This is better than just assuming the last event was forever ago.
-                if (r.timeline.length && r.timeline[0].getTs()) {
-                    return r.timeline[0].getTs();
-                } else {
-                    return Number.MAX_SAFE_INTEGER;
-                }
-            })();
-
-            tsCache[r.roomId] = ts;
-            return ts;
-        };
-
-        return rooms.sort((a, b) => {
-            return getLastTs(b) - getLastTs(a);
-        });
+        return sortRooms(rooms);
     }
 }
diff --git a/src/stores/room-list/filters/VisibilityProvider.ts b/src/stores/room-list/filters/VisibilityProvider.ts
index 388bb061e3..c07c2b0b26 100644
--- a/src/stores/room-list/filters/VisibilityProvider.ts
+++ b/src/stores/room-list/filters/VisibilityProvider.ts
@@ -37,7 +37,11 @@ export class VisibilityProvider {
         await VoipUserMapper.sharedInstance().onNewInvitedRoom(room);
     }
 
-    public isRoomVisible(room: Room): boolean {
+    public isRoomVisible(room?: Room): boolean {
+        if (!room) {
+            return false;
+        }
+
         if (
             CallHandler.sharedInstance().getSupportsVirtualRooms() &&
             VoipUserMapper.sharedInstance().isVirtualRoom(room)
@@ -46,7 +50,7 @@ export class VisibilityProvider {
         }
 
         // hide space rooms as they'll be shown in the SpacePanel
-        if (room.isSpaceRoom() && SettingsStore.getValue("feature_spaces")) {
+        if (SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()) {
             return false;
         }
 
diff --git a/src/utils/AutoDiscoveryUtils.js b/src/utils/AutoDiscoveryUtils.tsx
similarity index 91%
rename from src/utils/AutoDiscoveryUtils.js
rename to src/utils/AutoDiscoveryUtils.tsx
index 614aa4cea8..e3a7fd2d0b 100644
--- a/src/utils/AutoDiscoveryUtils.js
+++ b/src/utils/AutoDiscoveryUtils.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 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.
@@ -15,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
 import {_t, _td, newTranslatableError} from "../languageHandler";
 import {makeType} from "./TypeUtils";
 import SdkConfig from '../SdkConfig';
 
-const LIVELINESS_DISCOVERY_ERRORS = [
+const LIVELINESS_DISCOVERY_ERRORS: string[] = [
     AutoDiscovery.ERROR_INVALID_HOMESERVER,
     AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER,
 ];
@@ -40,17 +39,23 @@ export class ValidatedServerConfig {
     warning: string;
 }
 
+export interface IAuthComponentState {
+    serverIsAlive: boolean;
+    serverErrorIsFatal: boolean;
+    serverDeadError?: ReactNode;
+}
+
 export default class AutoDiscoveryUtils {
     /**
      * Checks if a given error or error message is considered an error
      * relating to the liveliness of the server. Must be an error returned
      * from this AutoDiscoveryUtils class.
-     * @param {string|Error} error The error to check
+     * @param {string | Error} error The error to check
      * @returns {boolean} True if the error is a liveliness error.
      */
-    static isLivelinessError(error: string|Error): boolean {
+    static isLivelinessError(error: string | Error): boolean {
         if (!error) return false;
-        return !!LIVELINESS_DISCOVERY_ERRORS.find(e => e === error || e === error.message);
+        return !!LIVELINESS_DISCOVERY_ERRORS.find(e => typeof error === "string" ? e === error : e === error.message);
     }
 
     /**
@@ -61,7 +66,7 @@ export default class AutoDiscoveryUtils {
      * implementation for known values.
      * @returns {*} The state for the component, given the error.
      */
-    static authComponentStateForError(err: string | Error | null, pageName = "login"): Object {
+    static authComponentStateForError(err: string | Error | null, pageName = "login"): IAuthComponentState {
         if (!err) {
             return {
                 serverIsAlive: true,
@@ -70,7 +75,7 @@ export default class AutoDiscoveryUtils {
             };
         }
         let title = _t("Cannot reach homeserver");
-        let body = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
+        let body: ReactNode = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
         if (!AutoDiscoveryUtils.isLivelinessError(err)) {
             const brand = SdkConfig.get().brand;
             title = _t("Your %(brand)s is misconfigured", { brand });
@@ -92,7 +97,7 @@ export default class AutoDiscoveryUtils {
         }
 
         let isFatalError = true;
-        const errorMessage = err.message ? err.message : err;
+        const errorMessage = typeof err === "string" ? err : err.message;
         if (errorMessage === AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER) {
             isFatalError = false;
             title = _t("Cannot reach identity server");
@@ -141,7 +146,10 @@ export default class AutoDiscoveryUtils {
      * @returns {Promise<ValidatedServerConfig>} Resolves to the validated configuration.
      */
     static async validateServerConfigWithStaticUrls(
-        homeserverUrl: string, identityUrl: string, syntaxOnly = false): ValidatedServerConfig {
+        homeserverUrl: string,
+        identityUrl?: string,
+        syntaxOnly = false,
+    ): Promise<ValidatedServerConfig> {
         if (!homeserverUrl) {
             throw newTranslatableError(_td("No homeserver URL provided"));
         }
@@ -171,7 +179,7 @@ export default class AutoDiscoveryUtils {
      * @param {string} serverName The homeserver domain name (eg: "matrix.org") to validate.
      * @returns {Promise<ValidatedServerConfig>} Resolves to the validated configuration.
      */
-    static async validateServerName(serverName: string): ValidatedServerConfig {
+    static async validateServerName(serverName: string): Promise<ValidatedServerConfig> {
         const result = await AutoDiscovery.findClientConfig(serverName);
         return AutoDiscoveryUtils.buildValidatedConfigFromDiscovery(serverName, result);
     }
diff --git a/src/utils/DMRoomMap.ts b/src/utils/DMRoomMap.ts
index e49b74c380..b166674043 100644
--- a/src/utils/DMRoomMap.ts
+++ b/src/utils/DMRoomMap.ts
@@ -55,6 +55,15 @@ export default class DMRoomMap {
         return DMRoomMap.sharedInstance;
     }
 
+    /**
+     * Set the shared instance to the instance supplied
+     * Used by tests
+     * @param inst the new shared instance
+     */
+    public static setShared(inst: DMRoomMap) {
+        DMRoomMap.sharedInstance = inst;
+    }
+
     /**
      * Returns a shared instance of the class
      * that uses the singleton matrix client
diff --git a/src/utils/ErrorUtils.js b/src/utils/ErrorUtils.js
index 2c6acd5503..b5bd5b0af0 100644
--- a/src/utils/ErrorUtils.js
+++ b/src/utils/ErrorUtils.js
@@ -49,12 +49,6 @@ export function messageForResourceLimitError(limitType, adminContact, strings, e
     }
 }
 
-export function messageForSendError(errorData) {
-    if (errorData.errcode === "M_TOO_LARGE") {
-        return _t("The message you are trying to send is too large.");
-    }
-}
-
 export function messageForSyncError(err) {
     if (err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
         const limitError = messageForResourceLimitError(
diff --git a/src/utils/MatrixGlob.js b/src/utils/MatrixGlob.ts
similarity index 100%
rename from src/utils/MatrixGlob.js
rename to src/utils/MatrixGlob.ts
diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index be7472901a..6f5c7104b1 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -310,8 +310,7 @@ function unpackMegolmKeyFile(data) {
     // look for the end line
     while (1) {
         const lineEnd = fileStr.indexOf('\n', lineStart);
-        const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd)
-              .trim();
+        const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim();
         if (line === TRAILER_LINE) {
             break;
         }
diff --git a/src/utils/StorageManager.js b/src/utils/StorageManager.ts
similarity index 96%
rename from src/utils/StorageManager.js
rename to src/utils/StorageManager.ts
index 23c27a2d1c..883c032771 100644
--- a/src/utils/StorageManager.js
+++ b/src/utils/StorageManager.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019-2021 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.
@@ -32,15 +32,15 @@ try {
 const SYNC_STORE_NAME = "riot-web-sync";
 const CRYPTO_STORE_NAME = "matrix-js-sdk:crypto";
 
-function log(msg) {
+function log(msg: string) {
     console.log(`StorageManager: ${msg}`);
 }
 
-function error(msg) {
-    console.error(`StorageManager: ${msg}`);
+function error(msg: string, ...args: string[]) {
+    console.error(`StorageManager: ${msg}`, ...args);
 }
 
-function track(action) {
+function track(action: string) {
     Analytics.trackEvent("StorageManager", action);
 }
 
@@ -73,7 +73,7 @@ export async function checkConsistency() {
         dataInLocalStorage = localStorage.length > 0;
         log(`Local storage contains data? ${dataInLocalStorage}`);
 
-        cryptoInited = localStorage.getItem("mx_crypto_initialised");
+        cryptoInited = !!localStorage.getItem("mx_crypto_initialised");
         log(`Crypto initialised? ${cryptoInited}`);
     } else {
         healthy = false;
diff --git a/src/utils/Timer.js b/src/utils/Timer.ts
similarity index 60%
rename from src/utils/Timer.js
rename to src/utils/Timer.ts
index ca06237fbf..9760631d09 100644
--- a/src/utils/Timer.js
+++ b/src/utils/Timer.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2021 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.
@@ -26,44 +26,48 @@ Once a timer is finished or aborted, it can't be started again
 a new one through `clone()` or `cloneIfRun()`.
 */
 export default class Timer {
-    constructor(timeout) {
-        this._timeout = timeout;
-        this._onTimeout = this._onTimeout.bind(this);
-        this._setNotStarted();
+    private timerHandle: NodeJS.Timeout;
+    private startTs: number;
+    private promise: Promise<void>;
+    private resolve: () => void;
+    private reject: (Error) => void;
+
+    constructor(private timeout: number) {
+        this.setNotStarted();
     }
 
-    _setNotStarted() {
-        this._timerHandle = null;
-        this._startTs = null;
-        this._promise = new Promise((resolve, reject) => {
-            this._resolve = resolve;
-            this._reject = reject;
+    private setNotStarted() {
+        this.timerHandle = null;
+        this.startTs = null;
+        this.promise = new Promise<void>((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
         }).finally(() => {
-            this._timerHandle = null;
+            this.timerHandle = null;
         });
     }
 
-    _onTimeout() {
+    private onTimeout = () => {
         const now = Date.now();
-        const elapsed = now - this._startTs;
-        if (elapsed >= this._timeout) {
-            this._resolve();
-            this._setNotStarted();
+        const elapsed = now - this.startTs;
+        if (elapsed >= this.timeout) {
+            this.resolve();
+            this.setNotStarted();
         } else {
-            const delta = this._timeout - elapsed;
-            this._timerHandle = setTimeout(this._onTimeout, delta);
+            const delta = this.timeout - elapsed;
+            this.timerHandle = setTimeout(this.onTimeout, delta);
         }
     }
 
-    changeTimeout(timeout) {
-        if (timeout === this._timeout) {
+    changeTimeout(timeout: number) {
+        if (timeout === this.timeout) {
             return;
         }
-        const isSmallerTimeout = timeout < this._timeout;
-        this._timeout = timeout;
+        const isSmallerTimeout = timeout < this.timeout;
+        this.timeout = timeout;
         if (this.isRunning() && isSmallerTimeout) {
-            clearTimeout(this._timerHandle);
-            this._onTimeout();
+            clearTimeout(this.timerHandle);
+            this.onTimeout();
         }
     }
 
@@ -73,8 +77,8 @@ export default class Timer {
      */
     start() {
         if (!this.isRunning()) {
-            this._startTs = Date.now();
-            this._timerHandle = setTimeout(this._onTimeout, this._timeout);
+            this.startTs = Date.now();
+            this.timerHandle = setTimeout(this.onTimeout, this.timeout);
         }
         return this;
     }
@@ -89,7 +93,7 @@ export default class Timer {
             // can be called in fast succession,
             // instead just take note and compare
             // when the already running timeout expires
-            this._startTs = Date.now();
+            this.startTs = Date.now();
             return this;
         } else {
             return this.start();
@@ -103,9 +107,9 @@ export default class Timer {
      */
     abort() {
         if (this.isRunning()) {
-            clearTimeout(this._timerHandle);
-            this._reject(new Error("Timer was aborted."));
-            this._setNotStarted();
+            clearTimeout(this.timerHandle);
+            this.reject(new Error("Timer was aborted."));
+            this.setNotStarted();
         }
         return this;
     }
@@ -116,10 +120,10 @@ export default class Timer {
      *@return {Promise}
      */
     finished() {
-        return this._promise;
+        return this.promise;
     }
 
     isRunning() {
-        return this._timerHandle !== null;
+        return this.timerHandle !== null;
     }
 }
diff --git a/src/utils/TypeUtils.js b/src/utils/TypeUtils.ts
similarity index 100%
rename from src/utils/TypeUtils.js
rename to src/utils/TypeUtils.ts
diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
index cea377bfe9..1e130bd605 100644
--- a/src/utils/arrays.ts
+++ b/src/utils/arrays.ts
@@ -36,14 +36,12 @@ export function arrayFastResample(input: number[], points: number): number[] {
         }
     } else {
         // Smaller inputs mean we have to spread the values over the desired length. We
-        // end up overshooting the target length in doing this, so we'll resample down
-        // before returning. This recursion is risky, but mathematically should not go
-        // further than 1 level deep.
+        // end up overshooting the target length in doing this, but we're not looking to
+        // be super accurate so we'll let the sanity trims do their job.
         const spreadFactor = Math.ceil(points / input.length);
         for (const val of input) {
             samples.push(...arraySeed(val, spreadFactor));
         }
-        samples = arrayFastResample(samples, points);
     }
 
     // Sanity fill, just in case
@@ -73,6 +71,26 @@ export function arraySeed<T>(val: T, length: number): T[] {
     return a;
 }
 
+/**
+ * Trims or fills the array to ensure it meets the desired length. The seed array
+ * given is pulled from to fill any missing slots - it is recommended that this be
+ * at least `len` long. The resulting array will be exactly `len` long, either
+ * trimmed from the source or filled with the some/all of the seed array.
+ * @param {T[]} a The array to trim/fill.
+ * @param {number} len The length to trim or fill to, as needed.
+ * @param {T[]} seed Values to pull from if the array needs filling.
+ * @returns {T[]} The resulting array of `len` length.
+ */
+export function arrayTrimFill<T>(a: T[], len: number, seed: T[]): T[] {
+    // Dev note: we do length checks because the spread operator can result in some
+    // performance penalties in more critical code paths. As a utility, it should be
+    // as fast as possible to not cause a problem for the call stack, no matter how
+    // critical that stack is.
+    if (a.length === len) return a;
+    if (a.length > len) return a.slice(0, len);
+    return a.concat(seed.slice(0, len - a.length));
+}
+
 /**
  * Clones an array as fast as possible, retaining references of the array's values.
  * @param a The array to clone. Must be defined.
diff --git a/src/utils/permalinks/ElementPermalinkConstructor.js b/src/utils/permalinks/ElementPermalinkConstructor.ts
similarity index 82%
rename from src/utils/permalinks/ElementPermalinkConstructor.js
rename to src/utils/permalinks/ElementPermalinkConstructor.ts
index da7f5797ea..cd7f2b9d2c 100644
--- a/src/utils/permalinks/ElementPermalinkConstructor.js
+++ b/src/utils/permalinks/ElementPermalinkConstructor.ts
@@ -20,31 +20,31 @@ import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
  * Generates permalinks that self-reference the running webapp
  */
 export default class ElementPermalinkConstructor extends PermalinkConstructor {
-    _elementUrl: string;
+    private elementUrl: string;
 
     constructor(elementUrl: string) {
         super();
-        this._elementUrl = elementUrl;
+        this.elementUrl = elementUrl;
 
-        if (!this._elementUrl.startsWith("http:") && !this._elementUrl.startsWith("https:")) {
+        if (!this.elementUrl.startsWith("http:") && !this.elementUrl.startsWith("https:")) {
             throw new Error("Element prefix URL does not appear to be an HTTP(S) URL");
         }
     }
 
     forEvent(roomId: string, eventId: string, serverCandidates: string[]): string {
-        return `${this._elementUrl}/#/room/${roomId}/${eventId}${this.encodeServerCandidates(serverCandidates)}`;
+        return `${this.elementUrl}/#/room/${roomId}/${eventId}${this.encodeServerCandidates(serverCandidates)}`;
     }
 
-    forRoom(roomIdOrAlias: string, serverCandidates: string[]): string {
-        return `${this._elementUrl}/#/room/${roomIdOrAlias}${this.encodeServerCandidates(serverCandidates)}`;
+    forRoom(roomIdOrAlias: string, serverCandidates?: string[]): string {
+        return `${this.elementUrl}/#/room/${roomIdOrAlias}${this.encodeServerCandidates(serverCandidates)}`;
     }
 
     forUser(userId: string): string {
-        return `${this._elementUrl}/#/user/${userId}`;
+        return `${this.elementUrl}/#/user/${userId}`;
     }
 
     forGroup(groupId: string): string {
-        return `${this._elementUrl}/#/group/${groupId}`;
+        return `${this.elementUrl}/#/group/${groupId}`;
     }
 
     forEntity(entityId: string): string {
@@ -58,11 +58,11 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
     }
 
     isPermalinkHost(testHost: string): boolean {
-        const parsedUrl = new URL(this._elementUrl);
+        const parsedUrl = new URL(this.elementUrl);
         return testHost === (parsedUrl.host || parsedUrl.hostname); // one of the hosts should match
     }
 
-    encodeServerCandidates(candidates: string[]) {
+    encodeServerCandidates(candidates?: string[]) {
         if (!candidates || candidates.length === 0) return '';
         return `?via=${candidates.map(c => encodeURIComponent(c)).join("&via=")}`;
     }
@@ -71,11 +71,11 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
     // https://github.com/turt2live/matrix-js-bot-sdk/blob/7c4665c9a25c2c8e0fe4e509f2616505b5b66a1c/src/Permalinks.ts#L33-L61
     // Adapted for Element's URL format
     parsePermalink(fullUrl: string): PermalinkParts {
-        if (!fullUrl || !fullUrl.startsWith(this._elementUrl)) {
+        if (!fullUrl || !fullUrl.startsWith(this.elementUrl)) {
             throw new Error("Does not appear to be a permalink");
         }
 
-        const parts = fullUrl.substring(`${this._elementUrl}/#/`.length);
+        const parts = fullUrl.substring(`${this.elementUrl}/#/`.length);
         return ElementPermalinkConstructor.parseAppRoute(parts);
     }
 
diff --git a/src/utils/permalinks/PermalinkConstructor.js b/src/utils/permalinks/PermalinkConstructor.ts
similarity index 100%
rename from src/utils/permalinks/PermalinkConstructor.js
rename to src/utils/permalinks/PermalinkConstructor.ts
diff --git a/src/utils/permalinks/Permalinks.js b/src/utils/permalinks/Permalinks.ts
similarity index 76%
rename from src/utils/permalinks/Permalinks.js
rename to src/utils/permalinks/Permalinks.ts
index bcf4d87136..015ecca22e 100644
--- a/src/utils/permalinks/Permalinks.js
+++ b/src/utils/permalinks/Permalinks.ts
@@ -17,6 +17,9 @@ limitations under the License.
 import isIp from "is-ip";
 import * as utils from "matrix-js-sdk/src/utils";
 import {Room} from "matrix-js-sdk/src/models/room";
+import {EventType} from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import SpecPermalinkConstructor, {baseUrl as matrixtoBaseUrl} from "./SpecPermalinkConstructor";
@@ -74,29 +77,35 @@ const MAX_SERVER_CANDIDATES = 3;
 // the list and magically have the link work.
 
 export class RoomPermalinkCreator {
+    private room: Room;
+    private roomId: string;
+    private highestPlUserId: string;
+    private populationMap: { [serverName: string]: number };
+    private bannedHostsRegexps: RegExp[];
+    private allowedHostsRegexps: RegExp[];
+    private _serverCandidates: string[];
+    private started: boolean;
+
     // We support being given a roomId as a fallback in the event the `room` object
     // doesn't exist or is not healthy for us to rely on. For example, loading a
     // permalink to a room which the MatrixClient doesn't know about.
-    constructor(room, roomId = null) {
-        this._room = room;
-        this._roomId = room ? room.roomId : roomId;
-        this._highestPlUserId = null;
-        this._populationMap = null;
-        this._bannedHostsRegexps = null;
-        this._allowedHostsRegexps = null;
+    constructor(room: Room, roomId: string = null) {
+        this.room = room;
+        this.roomId = room ? room.roomId : roomId;
+        this.highestPlUserId = null;
+        this.populationMap = null;
+        this.bannedHostsRegexps = null;
+        this.allowedHostsRegexps = null;
         this._serverCandidates = null;
-        this._started = false;
+        this.started = false;
 
-        if (!this._roomId) {
+        if (!this.roomId) {
             throw new Error("Failed to resolve a roomId for the permalink creator to use");
         }
-
-        this.onMembership = this.onMembership.bind(this);
-        this.onRoomState = this.onRoomState.bind(this);
     }
 
     load() {
-        if (!this._room || !this._room.currentState) {
+        if (!this.room || !this.room.currentState) {
             // Under rare and unknown circumstances it is possible to have a room with no
             // currentState, at least potentially at the early stages of joining a room.
             // To avoid breaking everything, we'll just warn rather than throw as well as
@@ -104,23 +113,23 @@ export class RoomPermalinkCreator {
             console.warn("Tried to load a permalink creator with no room state");
             return;
         }
-        this._updateAllowedServers();
-        this._updateHighestPlUser();
-        this._updatePopulationMap();
-        this._updateServerCandidates();
+        this.updateAllowedServers();
+        this.updateHighestPlUser();
+        this.updatePopulationMap();
+        this.updateServerCandidates();
     }
 
     start() {
         this.load();
-        this._room.on("RoomMember.membership", this.onMembership);
-        this._room.on("RoomState.events", this.onRoomState);
-        this._started = true;
+        this.room.on("RoomMember.membership", this.onMembership);
+        this.room.on("RoomState.events", this.onRoomState);
+        this.started = true;
     }
 
     stop() {
-        this._room.removeListener("RoomMember.membership", this.onMembership);
-        this._room.removeListener("RoomState.events", this.onRoomState);
-        this._started = false;
+        this.room.removeListener("RoomMember.membership", this.onMembership);
+        this.room.removeListener("RoomState.events", this.onRoomState);
+        this.started = false;
     }
 
     get serverCandidates() {
@@ -128,44 +137,44 @@ export class RoomPermalinkCreator {
     }
 
     isStarted() {
-        return this._started;
+        return this.started;
     }
 
-    forEvent(eventId) {
-        return getPermalinkConstructor().forEvent(this._roomId, eventId, this._serverCandidates);
+    forEvent(eventId: string): string {
+        return getPermalinkConstructor().forEvent(this.roomId, eventId, this._serverCandidates);
     }
 
-    forShareableRoom() {
-        if (this._room) {
+    forShareableRoom(): string {
+        if (this.room) {
             // Prefer to use canonical alias for permalink if possible
-            const alias = this._room.getCanonicalAlias();
+            const alias = this.room.getCanonicalAlias();
             if (alias) {
                 return getPermalinkConstructor().forRoom(alias, this._serverCandidates);
             }
         }
-        return getPermalinkConstructor().forRoom(this._roomId, this._serverCandidates);
+        return getPermalinkConstructor().forRoom(this.roomId, this._serverCandidates);
     }
 
-    forRoom() {
-        return getPermalinkConstructor().forRoom(this._roomId, this._serverCandidates);
+    forRoom(): string {
+        return getPermalinkConstructor().forRoom(this.roomId, this._serverCandidates);
     }
 
-    onRoomState(event) {
+    private onRoomState = (event: MatrixEvent) => {
         switch (event.getType()) {
-            case "m.room.server_acl":
-                this._updateAllowedServers();
-                this._updateHighestPlUser();
-                this._updatePopulationMap();
-                this._updateServerCandidates();
+            case EventType.RoomServerAcl:
+                this.updateAllowedServers();
+                this.updateHighestPlUser();
+                this.updatePopulationMap();
+                this.updateServerCandidates();
                 return;
-            case "m.room.power_levels":
-                this._updateHighestPlUser();
-                this._updateServerCandidates();
+            case EventType.RoomPowerLevels:
+                this.updateHighestPlUser();
+                this.updateServerCandidates();
                 return;
         }
     }
 
-    onMembership(evt, member, oldMembership) {
+    private onMembership = (evt: MatrixEvent, member: RoomMember, oldMembership: string) => {
         const userId = member.userId;
         const membership = member.membership;
         const serverName = getServerName(userId);
@@ -173,17 +182,17 @@ export class RoomPermalinkCreator {
         const hasLeft = oldMembership === "join" && membership !== "join";
 
         if (hasLeft) {
-            this._populationMap[serverName]--;
+            this.populationMap[serverName]--;
         } else if (hasJoined) {
-            this._populationMap[serverName]++;
+            this.populationMap[serverName]++;
         }
 
-        this._updateHighestPlUser();
-        this._updateServerCandidates();
+        this.updateHighestPlUser();
+        this.updateServerCandidates();
     }
 
-    _updateHighestPlUser() {
-        const plEvent = this._room.currentState.getStateEvents("m.room.power_levels", "");
+    private updateHighestPlUser() {
+        const plEvent = this.room.currentState.getStateEvents("m.room.power_levels", "");
         if (plEvent) {
             const content = plEvent.getContent();
             if (content) {
@@ -191,14 +200,14 @@ export class RoomPermalinkCreator {
                 if (users) {
                     const entries = Object.entries(users);
                     const allowedEntries = entries.filter(([userId]) => {
-                        const member = this._room.getMember(userId);
+                        const member = this.room.getMember(userId);
                         if (!member || member.membership !== "join") {
                             return false;
                         }
                         const serverName = getServerName(userId);
                         return !isHostnameIpAddress(serverName) &&
-                            !isHostInRegex(serverName, this._bannedHostsRegexps) &&
-                            isHostInRegex(serverName, this._allowedHostsRegexps);
+                            !isHostInRegex(serverName, this.bannedHostsRegexps) &&
+                            isHostInRegex(serverName, this.allowedHostsRegexps);
                     });
                     const maxEntry = allowedEntries.reduce((max, entry) => {
                         return (entry[1] > max[1]) ? entry : max;
@@ -206,20 +215,20 @@ export class RoomPermalinkCreator {
                     const [userId, powerLevel] = maxEntry;
                     // object wasn't empty, and max entry wasn't a demotion from the default
                     if (userId !== null && powerLevel >= 50) {
-                        this._highestPlUserId = userId;
+                        this.highestPlUserId = userId;
                         return;
                     }
                 }
             }
         }
-        this._highestPlUserId = null;
+        this.highestPlUserId = null;
     }
 
-    _updateAllowedServers() {
+    private updateAllowedServers() {
         const bannedHostsRegexps = [];
         let allowedHostsRegexps = [new RegExp(".*")]; // default allow everyone
-        if (this._room.currentState) {
-            const aclEvent = this._room.currentState.getStateEvents("m.room.server_acl", "");
+        if (this.room.currentState) {
+            const aclEvent = this.room.currentState.getStateEvents("m.room.server_acl", "");
             if (aclEvent && aclEvent.getContent()) {
                 const getRegex = (hostname) => new RegExp("^" + utils.globToRegexp(hostname, false) + "$");
 
@@ -231,35 +240,35 @@ export class RoomPermalinkCreator {
                 allowed.forEach(h => allowedHostsRegexps.push(getRegex(h)));
             }
         }
-        this._bannedHostsRegexps = bannedHostsRegexps;
-        this._allowedHostsRegexps = allowedHostsRegexps;
+        this.bannedHostsRegexps = bannedHostsRegexps;
+        this.allowedHostsRegexps = allowedHostsRegexps;
     }
 
-    _updatePopulationMap() {
+    private updatePopulationMap() {
         const populationMap: { [server: string]: number } = {};
-        for (const member of this._room.getJoinedMembers()) {
+        for (const member of this.room.getJoinedMembers()) {
             const serverName = getServerName(member.userId);
             if (!populationMap[serverName]) {
                 populationMap[serverName] = 0;
             }
             populationMap[serverName]++;
         }
-        this._populationMap = populationMap;
+        this.populationMap = populationMap;
     }
 
-    _updateServerCandidates() {
+    private updateServerCandidates() {
         let candidates = [];
-        if (this._highestPlUserId) {
-            candidates.push(getServerName(this._highestPlUserId));
+        if (this.highestPlUserId) {
+            candidates.push(getServerName(this.highestPlUserId));
         }
 
-        const serversByPopulation = Object.keys(this._populationMap)
-            .sort((a, b) => this._populationMap[b] - this._populationMap[a])
+        const serversByPopulation = Object.keys(this.populationMap)
+            .sort((a, b) => this.populationMap[b] - this.populationMap[a])
             .filter(a => {
                 return !candidates.includes(a) &&
                     !isHostnameIpAddress(a) &&
-                    !isHostInRegex(a, this._bannedHostsRegexps) &&
-                    isHostInRegex(a, this._allowedHostsRegexps);
+                    !isHostInRegex(a, this.bannedHostsRegexps) &&
+                    isHostInRegex(a, this.allowedHostsRegexps);
             });
 
         const remainingServers = serversByPopulation.slice(0, MAX_SERVER_CANDIDATES - candidates.length);
@@ -273,11 +282,11 @@ export function makeGenericPermalink(entityId: string): string {
     return getPermalinkConstructor().forEntity(entityId);
 }
 
-export function makeUserPermalink(userId) {
+export function makeUserPermalink(userId: string): string {
     return getPermalinkConstructor().forUser(userId);
 }
 
-export function makeRoomPermalink(roomId) {
+export function makeRoomPermalink(roomId: string): string {
     if (!roomId) {
         throw new Error("can't permalink a falsey roomId");
     }
@@ -296,7 +305,7 @@ export function makeRoomPermalink(roomId) {
     return permalinkCreator.forRoom();
 }
 
-export function makeGroupPermalink(groupId) {
+export function makeGroupPermalink(groupId: string): string {
     return getPermalinkConstructor().forGroup(groupId);
 }
 
@@ -337,7 +346,7 @@ export function tryTransformPermalinkToLocalHref(permalink: string): string {
         return permalink;
     }
 
-    const m = permalink.match(matrixLinkify.ELEMENT_URL_PATTERN);
+    const m = decodeURIComponent(permalink).match(matrixLinkify.ELEMENT_URL_PATTERN);
     if (m) {
         return m[1];
     }
@@ -402,8 +411,8 @@ function getPermalinkConstructor(): PermalinkConstructor {
 
 export function parsePermalink(fullUrl: string): PermalinkParts {
     const elementPrefix = SdkConfig.get()['permalinkPrefix'];
-    if (fullUrl.startsWith(matrixtoBaseUrl)) {
-        return new SpecPermalinkConstructor().parsePermalink(fullUrl);
+    if (decodeURIComponent(fullUrl).startsWith(matrixtoBaseUrl)) {
+        return new SpecPermalinkConstructor().parsePermalink(decodeURIComponent(fullUrl));
     } else if (elementPrefix && fullUrl.startsWith(elementPrefix)) {
         return new ElementPermalinkConstructor(elementPrefix).parsePermalink(fullUrl);
     }
@@ -428,24 +437,24 @@ export function parseAppLocalLink(localLink: string): PermalinkParts {
     return null;
 }
 
-function getServerName(userId) {
+function getServerName(userId: string): string {
     return userId.split(":").splice(1).join(":");
 }
 
-function getHostnameFromMatrixDomain(domain) {
+function getHostnameFromMatrixDomain(domain: string): string {
     if (!domain) return null;
     return new URL(`https://${domain}`).hostname;
 }
 
-function isHostInRegex(hostname, regexps) {
+function isHostInRegex(hostname: string, regexps: RegExp[]) {
     hostname = getHostnameFromMatrixDomain(hostname);
     if (!hostname) return true; // assumed
-    if (regexps.length > 0 && !regexps[0].test) throw new Error(regexps[0]);
+    if (regexps.length > 0 && !regexps[0].test) throw new Error(regexps[0].toString());
 
     return regexps.filter(h => h.test(hostname)).length > 0;
 }
 
-function isHostnameIpAddress(hostname) {
+function isHostnameIpAddress(hostname: string): boolean {
     hostname = getHostnameFromMatrixDomain(hostname);
     if (!hostname) return false;
 
diff --git a/src/utils/permalinks/SpecPermalinkConstructor.js b/src/utils/permalinks/SpecPermalinkConstructor.ts
similarity index 100%
rename from src/utils/permalinks/SpecPermalinkConstructor.js
rename to src/utils/permalinks/SpecPermalinkConstructor.ts
diff --git a/src/utils/space.tsx b/src/utils/space.tsx
index 3f2b6f9bb4..c14dc988d2 100644
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@@ -83,6 +83,7 @@ export const showCreateNewRoom = async (cli: MatrixClient, space: Room) => {
     if (shouldCreate) {
         await createRoom(opts);
     }
+    return shouldCreate;
 };
 
 export const showSpaceInvite = (space: Room, initialText = "") => {
diff --git a/src/voice/Playback.ts b/src/voice/Playback.ts
new file mode 100644
index 0000000000..caa5241e1a
--- /dev/null
+++ b/src/voice/Playback.ts
@@ -0,0 +1,147 @@
+/*
+Copyright 2021 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 EventEmitter from "events";
+import {UPDATE_EVENT} from "../stores/AsyncStore";
+import {arrayFastResample, arraySeed} from "../utils/arrays";
+import {SimpleObservable} from "matrix-widget-api";
+import {IDestroyable} from "../utils/IDestroyable";
+import {PlaybackClock} from "./PlaybackClock";
+import {clamp} from "../utils/numbers";
+
+export enum PlaybackState {
+    Decoding = "decoding",
+    Stopped = "stopped", // no progress on timeline
+    Paused = "paused", // some progress on timeline
+    Playing = "playing", // active progress through timeline
+}
+
+export const PLAYBACK_WAVEFORM_SAMPLES = 39;
+const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
+
+export class Playback extends EventEmitter implements IDestroyable {
+    private readonly context: AudioContext;
+    private source: AudioBufferSourceNode;
+    private state = PlaybackState.Decoding;
+    private audioBuf: AudioBuffer;
+    private resampledWaveform: number[];
+    private waveformObservable = new SimpleObservable<number[]>();
+    private readonly clock: PlaybackClock;
+
+    /**
+     * Creates a new playback instance from a buffer.
+     * @param {ArrayBuffer} buf The buffer containing the sound sample.
+     * @param {number[]} seedWaveform Optional seed waveform to present until the proper waveform
+     * can be calculated. Contains values between zero and one, inclusive.
+     */
+    constructor(private buf: ArrayBuffer, seedWaveform = DEFAULT_WAVEFORM) {
+        super();
+        this.context = new AudioContext();
+        this.resampledWaveform = arrayFastResample(seedWaveform ?? DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES);
+        this.waveformObservable.update(this.resampledWaveform);
+        this.clock = new PlaybackClock(this.context);
+    }
+
+    public get waveform(): number[] {
+        return this.resampledWaveform;
+    }
+
+    public get waveformData(): SimpleObservable<number[]> {
+        return this.waveformObservable;
+    }
+
+    public get clockInfo(): PlaybackClock {
+        return this.clock;
+    }
+
+    public get currentState(): PlaybackState {
+        return this.state;
+    }
+
+    public get isPlaying(): boolean {
+        return this.currentState === PlaybackState.Playing;
+    }
+
+    public emit(event: PlaybackState, ...args: any[]): boolean {
+        this.state = event;
+        super.emit(event, ...args);
+        super.emit(UPDATE_EVENT, event, ...args);
+        return true; // we don't ever care if the event had listeners, so just return "yes"
+    }
+
+    public destroy() {
+        // noinspection JSIgnoredPromiseFromCall - not concerned about being called async here
+        this.stop();
+        this.removeAllListeners();
+        this.clock.destroy();
+        this.waveformObservable.close();
+    }
+
+    public async prepare() {
+        this.audioBuf = await this.context.decodeAudioData(this.buf);
+
+        // Update the waveform to the real waveform once we have channel data to use. We don't
+        // exactly trust the user-provided waveform to be accurate...
+        const waveform = Array.from(this.audioBuf.getChannelData(0)).map(v => clamp(v, 0, 1));
+        this.resampledWaveform = arrayFastResample(waveform, PLAYBACK_WAVEFORM_SAMPLES);
+        this.waveformObservable.update(this.resampledWaveform);
+
+        this.emit(PlaybackState.Stopped); // signal that we're not decoding anymore
+        this.clock.durationSeconds = this.audioBuf.duration;
+    }
+
+    private onPlaybackEnd = async () => {
+        await this.context.suspend();
+        this.emit(PlaybackState.Stopped);
+    };
+
+    public async play() {
+        // We can't restart a buffer source, so we need to create a new one if we hit the end
+        if (this.state === PlaybackState.Stopped) {
+            if (this.source) {
+                this.source.disconnect();
+                this.source.removeEventListener("ended", this.onPlaybackEnd);
+            }
+
+            this.source = this.context.createBufferSource();
+            this.source.connect(this.context.destination);
+            this.source.buffer = this.audioBuf;
+            this.source.start(); // start immediately
+            this.source.addEventListener("ended", this.onPlaybackEnd);
+        }
+
+        // We use the context suspend/resume functions because it allows us to pause a source
+        // node, but that still doesn't help us when the source node runs out (see above).
+        await this.context.resume();
+        this.clock.flagStart();
+        this.emit(PlaybackState.Playing);
+    }
+
+    public async pause() {
+        await this.context.suspend();
+        this.emit(PlaybackState.Paused);
+    }
+
+    public async stop() {
+        await this.onPlaybackEnd();
+        this.clock.flagStop();
+    }
+
+    public async toggle() {
+        if (this.isPlaying) await this.pause();
+        else await this.play();
+    }
+}
diff --git a/src/voice/PlaybackClock.ts b/src/voice/PlaybackClock.ts
new file mode 100644
index 0000000000..06d6381691
--- /dev/null
+++ b/src/voice/PlaybackClock.ts
@@ -0,0 +1,78 @@
+/*
+Copyright 2021 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 {SimpleObservable} from "matrix-widget-api";
+import {IDestroyable} from "../utils/IDestroyable";
+
+// Because keeping track of time is sufficiently complicated...
+export class PlaybackClock implements IDestroyable {
+    private clipStart = 0;
+    private stopped = true;
+    private lastCheck = 0;
+    private observable = new SimpleObservable<number[]>();
+    private timerId: number;
+    private clipDuration = 0;
+
+    public constructor(private context: AudioContext) {
+    }
+
+    public get durationSeconds(): number {
+        return this.clipDuration;
+    }
+
+    public set durationSeconds(val: number) {
+        this.clipDuration = val;
+        this.observable.update([this.timeSeconds, this.clipDuration]);
+    }
+
+    public get timeSeconds(): number {
+        return (this.context.currentTime - this.clipStart) % this.clipDuration;
+    }
+
+    public get liveData(): SimpleObservable<number[]> {
+        return this.observable;
+    }
+
+    private checkTime = () => {
+        const now = this.timeSeconds;
+        if (this.lastCheck !== now) {
+            this.observable.update([now, this.durationSeconds]);
+            this.lastCheck = now;
+        }
+    };
+
+    public flagStart() {
+        if (this.stopped) {
+            this.clipStart = this.context.currentTime;
+            this.stopped = false;
+        }
+
+        if (!this.timerId) {
+            // case to number because the types are wrong
+            // 100ms interval to make sure the time is as accurate as possible
+            this.timerId = <number><any>setInterval(this.checkTime, 100);
+        }
+    }
+
+    public flagStop() {
+        this.stopped = true;
+    }
+
+    public destroy() {
+        this.observable.close();
+        if (this.timerId) clearInterval(this.timerId);
+    }
+}
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index b0cc3cd407..c4a0a78ce5 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -24,7 +24,8 @@ import EventEmitter from "events";
 import {IDestroyable} from "../utils/IDestroyable";
 import {Singleflight} from "../utils/Singleflight";
 import {PayloadEvent, WORKLET_NAME} from "./consts";
-import {arrayFastClone} from "../utils/arrays";
+import {UPDATE_EVENT} from "../stores/AsyncStore";
+import {Playback} from "./Playback";
 
 const CHANNELS = 1; // stereo isn't important
 const SAMPLE_RATE = 48000; // 48khz is what WebRTC uses. 12khz is where we lose quality.
@@ -32,6 +33,8 @@ const BITRATE = 24000; // 24kbps is pretty high quality for our use case in opus
 const TARGET_MAX_LENGTH = 120; // 2 minutes in seconds. Somewhat arbitrary, though longer == larger files.
 const TARGET_WARN_TIME_LEFT = 10; // 10 seconds, also somewhat arbitrary.
 
+export const RECORDING_PLAYBACK_SAMPLES = 44;
+
 export interface IRecordingUpdate {
     waveform: number[]; // floating points between 0 (low) and 1 (high).
     timeSeconds: number; // float
@@ -52,20 +55,17 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorderStream: MediaStream;
     private recorderFFT: AnalyserNode;
     private recorderWorklet: AudioWorkletNode;
-    private buffer = new Uint8Array(0);
+    private buffer = new Uint8Array(0); // use this.audioBuffer to access
     private mxc: string;
     private recording = false;
     private observable: SimpleObservable<IRecordingUpdate>;
     private amplitudes: number[] = []; // at each second mark, generated
+    private playback: Playback;
 
     public constructor(private client: MatrixClient) {
         super();
     }
 
-    public get finalWaveform(): number[] {
-        return arrayFastClone(this.amplitudes);
-    }
-
     public get contentType(): string {
         return "audio/ogg";
     }
@@ -79,6 +79,16 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         return this.recorderContext.currentTime;
     }
 
+    public get isRecording(): boolean {
+        return this.recording;
+    }
+
+    public emit(event: string, ...args: any[]): boolean {
+        super.emit(event, ...args);
+        super.emit(UPDATE_EVENT, event, ...args);
+        return true; // we don't ever care if the event had listeners, so just return "yes"
+    }
+
     private async makeRecorder() {
         this.recorderStream = await navigator.mediaDevices.getUserMedia({
             audio: {
@@ -154,6 +164,12 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         };
     }
 
+    private get audioBuffer(): Uint8Array {
+        // We need a clone of the buffer to avoid accidentally changing the position
+        // on the real thing.
+        return this.buffer.slice(0);
+    }
+
     public get liveData(): SimpleObservable<IRecordingUpdate> {
         if (!this.recording) throw new Error("No observable when not recording");
         return this.observable;
@@ -203,8 +219,19 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
 
         // Now that we've updated the data/waveform, let's do a time check. We don't want to
         // go horribly over the limit. We also emit a warning state if needed.
-        const secondsLeft = TARGET_MAX_LENGTH - timeSeconds;
-        if (secondsLeft <= 0) {
+        //
+        // We use the recorder's perspective of time to make sure we don't cut off the last
+        // frame of audio, otherwise we end up with a 1:59 clip (119.68 seconds). This extra
+        // safety can allow us to overshoot the target a bit, but at least when we say 2min
+        // maximum we actually mean it.
+        //
+        // In testing, recorder time and worker time lag by about 400ms, which is roughly the
+        // time needed to encode a sample/frame.
+        //
+        // Ref for recorderSeconds: https://github.com/chris-rudmin/opus-recorder#instance-fields
+        const recorderSeconds = this.recorder.encodedSamplePosition / 48000;
+        const secondsLeft = TARGET_MAX_LENGTH - recorderSeconds;
+        if (secondsLeft < 0) { // go over to make sure we definitely capture that last frame
             // noinspection JSIgnoredPromiseFromCall - we aren't concerned with it overlapping
             this.stop();
         } else if (secondsLeft <= TARGET_WARN_TIME_LEFT) {
@@ -239,9 +266,9 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
             }
 
             // Disconnect the source early to start shutting down resources
+            await this.recorder.stop(); // stop first to flush the last frame
             this.recorderSource.disconnect();
             this.recorderWorklet.disconnect();
-            await this.recorder.stop();
 
             // close the context after the recorder so the recorder doesn't try to
             // connect anything to the context (this would generate a warning)
@@ -255,15 +282,33 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
             await this.recorder.close();
             this.emit(RecordingState.Ended);
 
-            return this.buffer;
+            return this.audioBuffer;
         });
     }
 
+    /**
+     * Gets a playback instance for this voice recording. Note that the playback will not
+     * have been prepared fully, meaning the `prepare()` function needs to be called on it.
+     *
+     * The same playback instance is returned each time.
+     *
+     * @returns {Playback} The playback instance.
+     */
+    public getPlayback(): Playback {
+        this.playback = Singleflight.for(this, "playback").do(() => {
+            return new Playback(this.audioBuffer.buffer, this.amplitudes); // cast to ArrayBuffer proper;
+        });
+        return this.playback;
+    }
+
     public destroy() {
         // noinspection JSIgnoredPromiseFromCall - not concerned about stop() being called async here
         this.stop();
         this.removeAllListeners();
         Singleflight.forgetAllFor(this);
+        // noinspection JSIgnoredPromiseFromCall - not concerned about being called async here
+        this.playback?.destroy();
+        this.observable.close();
     }
 
     public async upload(): Promise<string> {
@@ -274,7 +319,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         if (this.mxc) return this.mxc;
 
         this.emit(RecordingState.Uploading);
-        this.mxc = await this.client.uploadContent(new Blob([this.buffer], {
+        this.mxc = await this.client.uploadContent(new Blob([this.audioBuffer], {
             type: this.contentType,
         }), {
             onlyContentUri: false, // to stop the warnings in the console
@@ -283,5 +328,3 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         return this.mxc;
     }
 }
-
-window.mxVoiceRecorder = VoiceRecording;
diff --git a/test/CallHandler-test.ts b/test/CallHandler-test.ts
new file mode 100644
index 0000000000..1e3f92e788
--- /dev/null
+++ b/test/CallHandler-test.ts
@@ -0,0 +1,214 @@
+/*
+Copyright 2021 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 './skinned-sdk';
+
+import CallHandler, { PlaceCallType, CallHandlerEvent } from '../src/CallHandler';
+import { stubClient, mkStubRoom } from './test-utils';
+import { MatrixClientPeg } from '../src/MatrixClientPeg';
+import dis from '../src/dispatcher/dispatcher';
+import { CallEvent, CallState } from 'matrix-js-sdk/src/webrtc/call';
+import DMRoomMap from '../src/utils/DMRoomMap';
+import EventEmitter from 'events';
+import { Action } from '../src/dispatcher/actions';
+import SdkConfig from '../src/SdkConfig';
+
+const REAL_ROOM_ID = '$room1:example.org';
+const MAPPED_ROOM_ID = '$room2:example.org';
+const MAPPED_ROOM_ID_2 = '$room3:example.org';
+
+function mkStubDM(roomId, userId) {
+    const room = mkStubRoom(roomId);
+    room.getJoinedMembers = jest.fn().mockReturnValue([
+        {
+            userId: '@me:example.org',
+            name: 'Member',
+            rawDisplayName: 'Member',
+            roomId: roomId,
+            membership: 'join',
+            getAvatarUrl: () => 'mxc://avatar.url/image.png',
+            getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
+        },
+        {
+            userId: userId,
+            name: 'Member',
+            rawDisplayName: 'Member',
+            roomId: roomId,
+            membership: 'join',
+            getAvatarUrl: () => 'mxc://avatar.url/image.png',
+            getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
+        },
+    ]);
+    room.currentState.getMembers = room.getJoinedMembers;
+
+    return room;
+}
+
+class FakeCall extends EventEmitter {
+    roomId: string;
+    callId = "fake call id";
+
+    constructor(roomId) {
+        super();
+
+        this.roomId = roomId;
+    }
+
+    setRemoteOnHold() {}
+    setRemoteAudioElement() {}
+
+    placeVoiceCall() {
+        this.emit(CallEvent.State, CallState.Connected, null);
+    }
+}
+
+describe('CallHandler', () => {
+    let dmRoomMap;
+    let callHandler;
+    let audioElement;
+    let fakeCall;
+
+    beforeEach(() => {
+        stubClient();
+        MatrixClientPeg.get().createCall = roomId => {
+            if (fakeCall && fakeCall.roomId !== roomId) {
+                throw new Error("Only one call is supported!");
+            }
+            fakeCall = new FakeCall(roomId);
+            return fakeCall;
+        };
+
+        callHandler = new CallHandler();
+        callHandler.start();
+
+        dmRoomMap = {
+            getUserIdForRoomId: roomId => {
+                if (roomId === REAL_ROOM_ID) {
+                    return '@user1:example.org';
+                } else if (roomId === MAPPED_ROOM_ID) {
+                    return '@user2:example.org';
+                } else if (roomId === MAPPED_ROOM_ID_2) {
+                    return '@user3:example.org';
+                } else {
+                    return null;
+                }
+            },
+            getDMRoomsForUserId: userId => {
+                if (userId === '@user2:example.org') {
+                    return [MAPPED_ROOM_ID];
+                } else if (userId === '@user3:example.org') {
+                    return [MAPPED_ROOM_ID_2];
+                } else {
+                    return [];
+                }
+            },
+        };
+        DMRoomMap.setShared(dmRoomMap);
+
+        audioElement = document.createElement('audio');
+        audioElement.id = "remoteAudio";
+        document.body.appendChild(audioElement);
+    });
+
+    afterEach(() => {
+        callHandler.stop();
+        DMRoomMap.setShared(null);
+        // @ts-ignore
+        window.mxCallHandler = null;
+        MatrixClientPeg.unset();
+
+        document.body.removeChild(audioElement);
+        SdkConfig.unset();
+    });
+
+    it('should move calls between rooms when remote asserted identity changes', async () => {
+        const realRoom = mkStubDM(REAL_ROOM_ID, '@user1:example.org');
+        const mappedRoom = mkStubDM(MAPPED_ROOM_ID, '@user2:example.org');
+        const mappedRoom2 = mkStubDM(MAPPED_ROOM_ID_2, '@user3:example.org');
+
+        MatrixClientPeg.get().getRoom = roomId => {
+            switch (roomId) {
+                case REAL_ROOM_ID:
+                    return realRoom;
+                case MAPPED_ROOM_ID:
+                    return mappedRoom;
+                case MAPPED_ROOM_ID_2:
+                    return mappedRoom2;
+            }
+        };
+
+        dis.dispatch({
+            action: 'place_call',
+            type: PlaceCallType.Voice,
+            room_id: REAL_ROOM_ID,
+        }, true);
+
+        let dispatchHandle;
+        // wait for the call to be set up
+        await new Promise<void>(resolve => {
+            dispatchHandle = dis.register(payload => {
+                if (payload.action === 'call_state') {
+                    resolve();
+                }
+            });
+        });
+        dis.unregister(dispatchHandle);
+
+        // should start off in the actual room ID it's in at the protocol level
+        expect(callHandler.getCallForRoom(REAL_ROOM_ID)).toBe(fakeCall);
+
+        let callRoomChangeEventCount = 0;
+        const roomChangePromise = new Promise<void>(resolve => {
+            callHandler.addListener(CallHandlerEvent.CallChangeRoom, () => {
+                ++callRoomChangeEventCount;
+                resolve();
+            });
+        });
+
+        // Now emit an asserted identity for user2: this should be ignored
+        // because we haven't set the config option to obey asserted identity
+        fakeCall.getRemoteAssertedIdentity = jest.fn().mockReturnValue({
+            id: "@user2:example.org",
+        });
+        fakeCall.emit(CallEvent.AssertedIdentityChanged);
+
+        // Now set the config option
+        SdkConfig.put({
+            voip: {
+                obeyAssertedIdentity: true,
+            },
+        });
+
+        // ...and send another asserted identity event for a different user
+        fakeCall.getRemoteAssertedIdentity = jest.fn().mockReturnValue({
+            id: "@user3:example.org",
+        });
+        fakeCall.emit(CallEvent.AssertedIdentityChanged);
+
+        await roomChangePromise;
+        callHandler.removeAllListeners();
+
+        // If everything's gone well, we should have seen only one room change
+        // event and the call should now be in user 3's room.
+        // If it's not obeying any, the call will still be in REAL_ROOM_ID.
+        // If it incorrectly obeyed both asserted identity changes, either it will
+        // have just processed one and the call will be in the wrong room, or we'll
+        // have seen two room change dispatches.
+        expect(callRoomChangeEventCount).toEqual(1);
+        expect(callHandler.getCallForRoom(REAL_ROOM_ID)).toBeNull();
+        expect(callHandler.getCallForRoom(MAPPED_ROOM_ID_2)).toBe(fakeCall);
+    });
+});
diff --git a/test/ScalarAuthClient-test.js b/test/ScalarAuthClient-test.js
index 83f357811a..3435f70932 100644
--- a/test/ScalarAuthClient-test.js
+++ b/test/ScalarAuthClient-test.js
@@ -29,7 +29,7 @@ describe('ScalarAuthClient', function() {
     it('should request a new token if the old one fails', async function() {
         const sac = new ScalarAuthClient();
 
-        sac._getAccountName = jest.fn((arg) => {
+        sac.getAccountName = jest.fn((arg) => {
             switch (arg) {
                 case "brokentoken":
                     return Promise.reject({
diff --git a/test/autocomplete/QueryMatcher-test.js b/test/autocomplete/QueryMatcher-test.js
index 3d383f08d7..cae71841d4 100644
--- a/test/autocomplete/QueryMatcher-test.js
+++ b/test/autocomplete/QueryMatcher-test.js
@@ -177,7 +177,7 @@ describe('QueryMatcher', function() {
         const qm = new QueryMatcher(NONWORDOBJECTS, {
             keys: ["name"],
             shouldMatchWordsOnly: false,
-         });
+        });
 
         const results = qm.match('bob');
         expect(results.length).toBe(1);
diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.js b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
index 13b39ab0d0..d9e07a2d74 100644
--- a/test/components/views/dialogs/AccessSecretStorageDialog-test.js
+++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
@@ -26,9 +26,9 @@ describe("AccessSecretStorageDialog", function() {
     it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", (done) => {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
-              checkPrivateKey={(p) => p && p.recoveryKey && p.recoveryKey == "a"}
-              onFinished={(v) => {
-                  if (v) { done(); }
+                checkPrivateKey={(p) => p && p.recoveryKey && p.recoveryKey == "a"}
+                onFinished={(v) => {
+                    if (v) { done(); }
                 }}
             />,
         );
@@ -43,7 +43,7 @@ describe("AccessSecretStorageDialog", function() {
     it("Considers a valid key to be valid", async function() {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
-              checkPrivateKey={() => true}
+                checkPrivateKey={() => true}
             />,
         );
         const v = "asdf";
@@ -61,7 +61,7 @@ describe("AccessSecretStorageDialog", function() {
     it("Notifies the user if they input an invalid Security Key", async function(done) {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
-              checkPrivateKey={async () => false}
+                checkPrivateKey={async () => false}
             />,
         );
         const e = { target: { value: "a" } };
@@ -87,12 +87,14 @@ describe("AccessSecretStorageDialog", function() {
     it("Notifies the user if they input an invalid passphrase", async function(done) {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
-              checkPrivateKey={() => false}
-              onFinished={() => {}}
-              keyInfo={ { passphrase: {
-                  salt: 'nonempty',
-                  iterations: 2,
-              } } }
+                checkPrivateKey={() => false}
+                onFinished={() => {}}
+                keyInfo={{
+                    passphrase: {
+                        salt: 'nonempty',
+                        iterations: 2,
+                    },
+                }}
             />,
         );
         const e = { target: { value: "a" } };
diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index dd6febc7d7..95bf206d02 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -245,8 +245,7 @@ describe('MemberEventListSummary', function() {
         );
     });
 
-    it('truncates multiple sequences of repetitions with other events between',
-    function() {
+    it('truncates multiple sequences of repetitions with other events between', function() {
         const events = generateEvents([
             {
                 userId: "@user_1:some.domain",
@@ -395,8 +394,7 @@ describe('MemberEventListSummary', function() {
         );
     });
 
-    it('correctly orders sequences of transitions by the order of their first event',
-    function() {
+    it('correctly orders sequences of transitions by the order of their first event', function() {
         const events = generateEvents([
             {
                 userId: "@user_2:some.domain",
@@ -568,8 +566,7 @@ describe('MemberEventListSummary', function() {
         );
     });
 
-    it('handles invitation plurals correctly when there are multiple invites',
-    function() {
+    it('handles invitation plurals correctly when there are multiple invites', function() {
         const events = generateEvents([
             {
                 userId: "@user_1:some.domain",
diff --git a/test/components/views/rooms/MemberList-test.js b/test/components/views/rooms/MemberList-test.js
index 068d358dcd..093e5588d0 100644
--- a/test/components/views/rooms/MemberList-test.js
+++ b/test/components/views/rooms/MemberList-test.js
@@ -100,7 +100,7 @@ describe('MemberList', () => {
             memberList = r;
         };
         root = ReactDOM.render(<WrappedMemberList roomId={memberListRoom.roomId}
-                                                  wrappedRef={gatherWrappedRef} />, parentDiv);
+            wrappedRef={gatherWrappedRef} />, parentDiv);
     });
 
     afterEach((done) => {
diff --git a/test/components/views/rooms/RoomList-test.js b/test/components/views/rooms/RoomList-test.js
index fcdd71629e..bfb8e1afd4 100644
--- a/test/components/views/rooms/RoomList-test.js
+++ b/test/components/views/rooms/RoomList-test.js
@@ -29,7 +29,10 @@ function waitForRoomListStoreUpdate() {
 
 describe('RoomList', () => {
     function createRoom(opts) {
-        const room = new Room(generateRoomId(), null, client.getUserId());
+        const room = new Room(generateRoomId(), MatrixClientPeg.get(), client.getUserId(), {
+            // The room list now uses getPendingEvents(), so we need a detached ordering.
+            pendingEventOrdering: "detached",
+        });
         if (opts) {
             Object.assign(room, opts);
         }
@@ -67,8 +70,9 @@ describe('RoomList', () => {
         root = ReactDOM.render(
             <DragDropContext>
                 <WrappedRoomList searchFilter="" onResize={() => {}} />
-            </DragDropContext>
-        , parentDiv);
+            </DragDropContext>,
+            parentDiv,
+        );
         ReactTestUtils.findRenderedComponentWithType(root, RoomList);
 
         movingRoom = createRoom({name: 'Moving room'});
diff --git a/test/editor/deserialize-test.js b/test/editor/deserialize-test.js
index 07b75aaae5..7c7a2f84fb 100644
--- a/test/editor/deserialize-test.js
+++ b/test/editor/deserialize-test.js
@@ -178,7 +178,7 @@ describe('editor/deserialize', function() {
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
             expect(parts[0]).toStrictEqual({type: "plain", text: "Try "});
-            expect(parts[1]).toStrictEqual({type: "room-pill", text: "#room:hs.tld"});
+            expect(parts[1]).toStrictEqual({type: "room-pill", text: "#room:hs.tld", resourceId: "#room:hs.tld"});
             expect(parts[2]).toStrictEqual({type: "plain", text: "?"});
         });
         it('@room pill', function() {
diff --git a/test/end-to-end-tests/src/session.js b/test/end-to-end-tests/src/session.js
index 433baa5e48..4c611ef877 100644
--- a/test/end-to-end-tests/src/session.js
+++ b/test/end-to-end-tests/src/session.js
@@ -93,10 +93,10 @@ module.exports = class ElementSession {
             const type = req.resourceType();
             const response = await req.response();
             //if (type === 'xhr' || type === 'fetch') {
-                buffer += `${type} ${response.status()} ${req.method()} ${req.url()} \n`;
-                // if (req.method() === "POST") {
-                //   buffer += "  Post data: " + req.postData();
-                // }
+            buffer += `${type} ${response.status()} ${req.method()} ${req.url()} \n`;
+            // if (req.method() === "POST") {
+            //   buffer += "  Post data: " + req.postData();
+            // }
             //}
         });
         return {
diff --git a/test/end-to-end-tests/yarn.lock b/test/end-to-end-tests/yarn.lock
index 7f2cefb92e..97b348fe50 100644
--- a/test/end-to-end-tests/yarn.lock
+++ b/test/end-to-end-tests/yarn.lock
@@ -435,9 +435,9 @@ jsprim@^1.2.2:
     verror "1.10.0"
 
 lodash@^4.15.0, lodash@^4.17.11:
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 mime-db@~1.38.0:
   version "1.38.0"
diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts
new file mode 100644
index 0000000000..aef788647d
--- /dev/null
+++ b/test/stores/SpaceStore-test.ts
@@ -0,0 +1,714 @@
+/*
+Copyright 2021 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 { EventEmitter } from "events";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import "../skinned-sdk"; // Must be first for skinning to work
+import SpaceStore, {
+    UPDATE_INVITED_SPACES,
+    UPDATE_SELECTED_SPACE,
+    UPDATE_TOP_LEVEL_SPACES
+} from "../../src/stores/SpaceStore";
+import { resetAsyncStoreWithClient, setupAsyncStoreWithClient } from "../utils/test-utils";
+import { mkEvent, mkStubRoom, stubClient } from "../test-utils";
+import { EnhancedMap } from "../../src/utils/maps";
+import SettingsStore from "../../src/settings/SettingsStore";
+import DMRoomMap from "../../src/utils/DMRoomMap";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import defaultDispatcher from "../../src/dispatcher/dispatcher";
+
+type MatrixEvent = any; // importing from js-sdk upsets things
+
+jest.useFakeTimers();
+
+const mockStateEventImplementation = (events: MatrixEvent[]) => {
+    const stateMap = new EnhancedMap<string, Map<string, MatrixEvent>>();
+    events.forEach(event => {
+        stateMap.getOrCreate(event.getType(), new Map()).set(event.getStateKey(), event);
+    });
+
+    return (eventType: string, stateKey?: string) => {
+        if (stateKey || stateKey === "") {
+            return stateMap.get(eventType)?.get(stateKey) || null;
+        }
+        return Array.from(stateMap.get(eventType)?.values() || []);
+    };
+};
+
+const emitPromise = (e: EventEmitter, k: string | symbol) => new Promise(r => e.once(k, r));
+
+const testUserId = "@test:user";
+
+let rooms = [];
+
+const mkRoom = (roomId: string) => {
+    const room = mkStubRoom(roomId);
+    room.currentState.getStateEvents.mockImplementation(mockStateEventImplementation([]));
+    rooms.push(room);
+    return room;
+};
+
+const mkSpace = (spaceId: string, children: string[] = []) => {
+    const space = mkRoom(spaceId);
+    space.isSpaceRoom.mockReturnValue(true);
+    space.currentState.getStateEvents.mockImplementation(mockStateEventImplementation(children.map(roomId =>
+        mkEvent({
+            event: true,
+            type: EventType.SpaceChild,
+            room: spaceId,
+            user: testUserId,
+            skey: roomId,
+            content: { via: [] },
+            ts: Date.now(),
+        }),
+    )));
+    return space;
+};
+
+const getValue = jest.fn();
+SettingsStore.getValue = getValue;
+
+const getUserIdForRoomId = jest.fn();
+// @ts-ignore
+DMRoomMap.sharedInstance = { getUserIdForRoomId };
+
+const fav1 = "!fav1:server";
+const fav2 = "!fav2:server";
+const fav3 = "!fav3:server";
+const dm1 = "!dm1:server";
+const dm1Partner = "@dm1Partner:server";
+const dm2 = "!dm2:server";
+const dm2Partner = "@dm2Partner:server";
+const dm3 = "!dm3:server";
+const dm3Partner = "@dm3Partner:server";
+const orphan1 = "!orphan1:server";
+const orphan2 = "!orphan2:server";
+const invite1 = "!invite1:server";
+const invite2 = "!invite2:server";
+const room1 = "!room1:server";
+const room2 = "!room2:server";
+const space1 = "!space1:server";
+const space2 = "!space2:server";
+const space3 = "!space3:server";
+
+describe("SpaceStore", () => {
+    stubClient();
+    const store = SpaceStore.instance;
+    const client = MatrixClientPeg.get();
+
+    const viewRoom = roomId => defaultDispatcher.dispatch({ action: "view_room", room_id: roomId }, true);
+
+    const run = async () => {
+        client.getRoom.mockImplementation(roomId => rooms.find(room => room.roomId === roomId));
+        await setupAsyncStoreWithClient(store, client);
+        jest.runAllTimers();
+    };
+
+    beforeEach(() => {
+        jest.runAllTimers();
+        client.getVisibleRooms.mockReturnValue(rooms = []);
+        getValue.mockImplementation(settingName => {
+            if (settingName === "feature_spaces") {
+                return true;
+            }
+        });
+    });
+    afterEach(async () => {
+        await resetAsyncStoreWithClient(store);
+    });
+
+    describe("static hierarchy resolution tests", () => {
+        it("handles no spaces", async () => {
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+        });
+
+        it("handles 3 joined top level spaces", async () => {
+            mkSpace("!space1:server");
+            mkSpace("!space2:server");
+            mkSpace("!space3:server");
+            await run();
+
+            expect(store.spacePanelSpaces.sort()).toStrictEqual(client.getVisibleRooms().sort());
+            expect(store.invitedSpaces).toStrictEqual([]);
+        });
+
+        it("handles a basic hierarchy", async () => {
+            mkSpace("!space1:server");
+            mkSpace("!space2:server");
+            mkSpace("!company:server", [
+                mkSpace("!company_dept1:server", [
+                    mkSpace("!company_dept1_group1:server").roomId,
+                ]).roomId,
+                mkSpace("!company_dept2:server").roomId,
+            ]);
+            await run();
+
+            expect(store.spacePanelSpaces.map(r => r.roomId).sort()).toStrictEqual([
+                "!space1:server",
+                "!space2:server",
+                "!company:server",
+            ].sort());
+            expect(store.invitedSpaces).toStrictEqual([]);
+
+            expect(store.getChildRooms("!space1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!space1:server")).toStrictEqual([]);
+            expect(store.getChildRooms("!space2:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!space2:server")).toStrictEqual([]);
+            expect(store.getChildRooms("!company:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company:server")).toStrictEqual([
+                client.getRoom("!company_dept1:server"),
+                client.getRoom("!company_dept2:server"),
+            ]);
+            expect(store.getChildRooms("!company_dept1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept1:server")).toStrictEqual([
+                client.getRoom("!company_dept1_group1:server"),
+            ]);
+            expect(store.getChildRooms("!company_dept1_group1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept1_group1:server")).toStrictEqual([]);
+            expect(store.getChildRooms("!company_dept2:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept2:server")).toStrictEqual([]);
+        });
+
+        it("handles a sub-space existing in multiple places in the space tree", async () => {
+            const subspace = mkSpace("!subspace:server");
+            mkSpace("!space1:server");
+            mkSpace("!space2:server");
+            mkSpace("!company:server", [
+                mkSpace("!company_dept1:server", [
+                    mkSpace("!company_dept1_group1:server", [subspace.roomId]).roomId,
+                ]).roomId,
+                mkSpace("!company_dept2:server", [subspace.roomId]).roomId,
+                subspace.roomId,
+            ]);
+            await run();
+
+            expect(store.spacePanelSpaces.map(r => r.roomId).sort()).toStrictEqual([
+                "!space1:server",
+                "!space2:server",
+                "!company:server",
+            ].sort());
+            expect(store.invitedSpaces).toStrictEqual([]);
+
+            expect(store.getChildRooms("!space1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!space1:server")).toStrictEqual([]);
+            expect(store.getChildRooms("!space2:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!space2:server")).toStrictEqual([]);
+            expect(store.getChildRooms("!company:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company:server")).toStrictEqual([
+                client.getRoom("!company_dept1:server"),
+                client.getRoom("!company_dept2:server"),
+                subspace,
+            ]);
+            expect(store.getChildRooms("!company_dept1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept1:server")).toStrictEqual([
+                client.getRoom("!company_dept1_group1:server"),
+            ]);
+            expect(store.getChildRooms("!company_dept1_group1:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept1_group1:server")).toStrictEqual([subspace]);
+            expect(store.getChildRooms("!company_dept2:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!company_dept2:server")).toStrictEqual([subspace]);
+        });
+
+        it("handles full cycles", async () => {
+            mkSpace("!a:server", [
+                mkSpace("!b:server", [
+                    mkSpace("!c:server", [
+                        "!a:server",
+                    ]).roomId,
+                ]).roomId,
+            ]);
+            await run();
+
+            expect(store.spacePanelSpaces.map(r => r.roomId)).toStrictEqual(["!a:server"]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+
+            expect(store.getChildRooms("!a:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!a:server")).toStrictEqual([client.getRoom("!b:server")]);
+            expect(store.getChildRooms("!b:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!b:server")).toStrictEqual([client.getRoom("!c:server")]);
+            expect(store.getChildRooms("!c:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!c:server")).toStrictEqual([client.getRoom("!a:server")]);
+        });
+
+        it("handles partial cycles", async () => {
+            mkSpace("!b:server", [
+                mkSpace("!a:server", [
+                    mkSpace("!c:server", [
+                        "!a:server",
+                    ]).roomId,
+                ]).roomId,
+            ]);
+            await run();
+
+            expect(store.spacePanelSpaces.map(r => r.roomId)).toStrictEqual(["!b:server"]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+
+            expect(store.getChildRooms("!b:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!b:server")).toStrictEqual([client.getRoom("!a:server")]);
+            expect(store.getChildRooms("!a:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!a:server")).toStrictEqual([client.getRoom("!c:server")]);
+            expect(store.getChildRooms("!c:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!c:server")).toStrictEqual([client.getRoom("!a:server")]);
+        });
+
+        it("handles partial cycles with additional spaces coming off them", async () => {
+            // TODO this test should be failing right now
+            mkSpace("!a:server", [
+                mkSpace("!b:server", [
+                    mkSpace("!c:server", [
+                        "!a:server",
+                        mkSpace("!d:server").roomId,
+                    ]).roomId,
+                ]).roomId,
+            ]);
+            await run();
+
+            expect(store.spacePanelSpaces.map(r => r.roomId)).toStrictEqual(["!a:server"]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+
+            expect(store.getChildRooms("!a:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!a:server")).toStrictEqual([client.getRoom("!b:server")]);
+            expect(store.getChildRooms("!b:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!b:server")).toStrictEqual([client.getRoom("!c:server")]);
+            expect(store.getChildRooms("!c:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!c:server")).toStrictEqual([
+                client.getRoom("!a:server"),
+                client.getRoom("!d:server"),
+            ]);
+            expect(store.getChildRooms("!d:server")).toStrictEqual([]);
+            expect(store.getChildSpaces("!d:server")).toStrictEqual([]);
+        });
+
+        it("invite to a subspace is only shown at the top level", async () => {
+            mkSpace(invite1).getMyMembership.mockReturnValue("invite");
+            mkSpace(space1, [invite1]);
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([client.getRoom(space1)]);
+            expect(store.getChildSpaces(space1)).toStrictEqual([]);
+            expect(store.getChildRooms(space1)).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([client.getRoom(invite1)]);
+        });
+
+        describe("test fixture 1", () => {
+            beforeEach(async () => {
+                [fav1, fav2, fav3, dm1, dm2, dm3, orphan1, orphan2, invite1, invite2, room1].forEach(mkRoom);
+                mkSpace(space1, [fav1, room1]);
+                mkSpace(space2, [fav1, fav2, fav3, room1]);
+                mkSpace(space3, [invite2]);
+
+                [fav1, fav2, fav3].forEach(roomId => {
+                    client.getRoom(roomId).tags = {
+                        "m.favourite": {
+                            order: 0.5,
+                        },
+                    };
+                });
+
+                [invite1, invite2].forEach(roomId => {
+                    client.getRoom(roomId).getMyMembership.mockReturnValue("invite");
+                });
+
+                getUserIdForRoomId.mockImplementation(roomId => {
+                    return {
+                        [dm1]: dm1Partner,
+                        [dm2]: dm2Partner,
+                        [dm3]: dm3Partner,
+                    }[roomId];
+                });
+                await run();
+            });
+
+            it("home space contains orphaned rooms", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(orphan1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(null).has(orphan2)).toBeTruthy();
+            });
+
+            it("home space contains favourites", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(fav1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(null).has(fav2)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(null).has(fav3)).toBeTruthy();
+            });
+
+            it("home space contains dm rooms", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(dm1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(null).has(dm2)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(null).has(dm3)).toBeTruthy();
+            });
+
+            it("home space contains invites", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(invite1)).toBeTruthy();
+            });
+
+            it("home space contains invites even if they are also shown in a space", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(invite2)).toBeTruthy();
+            });
+
+            it("home space does not contain rooms/low priority from rooms within spaces", () => {
+                expect(store.getSpaceFilteredRoomIds(null).has(room1)).toBeFalsy();
+            });
+
+            it("space contains child rooms", () => {
+                const space = client.getRoom(space1);
+                expect(store.getSpaceFilteredRoomIds(space).has(fav1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(space).has(room1)).toBeTruthy();
+            });
+
+            it("space contains child favourites", () => {
+                const space = client.getRoom(space2);
+                expect(store.getSpaceFilteredRoomIds(space).has(fav1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(space).has(fav2)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(space).has(fav3)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(space).has(room1)).toBeTruthy();
+            });
+
+            it("space contains child invites", () => {
+                const space = client.getRoom(space3);
+                expect(store.getSpaceFilteredRoomIds(space).has(invite2)).toBeTruthy();
+            });
+        });
+    });
+
+    describe("hierarchy resolution update tests", () => {
+        let emitter: EventEmitter;
+        beforeEach(async () => {
+            emitter = new EventEmitter();
+            client.on.mockImplementation(emitter.on.bind(emitter));
+            client.removeListener.mockImplementation(emitter.removeListener.bind(emitter));
+        });
+        afterEach(() => {
+            client.on.mockReset();
+            client.removeListener.mockReset();
+        });
+
+        it("updates state when spaces are joined", async () => {
+            await run();
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            const space = mkSpace(space1);
+            const prom = emitPromise(store, UPDATE_TOP_LEVEL_SPACES);
+            emitter.emit("Room", space);
+            await prom;
+            expect(store.spacePanelSpaces).toStrictEqual([space]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+        });
+
+        it("updates state when spaces are left", async () => {
+            const space = mkSpace(space1);
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([space]);
+            space.getMyMembership.mockReturnValue("leave");
+            const prom = emitPromise(store, UPDATE_TOP_LEVEL_SPACES);
+            emitter.emit("Room.myMembership", space, "leave", "join");
+            await prom;
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+        });
+
+        it("updates state when space invite comes in", async () => {
+            await run();
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+            const space = mkSpace(space1);
+            space.getMyMembership.mockReturnValue("invite");
+            const prom = emitPromise(store, UPDATE_INVITED_SPACES);
+            emitter.emit("Room", space);
+            await prom;
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([space]);
+        });
+
+        it("updates state when space invite is accepted", async () => {
+            const space = mkSpace(space1);
+            space.getMyMembership.mockReturnValue("invite");
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([space]);
+            space.getMyMembership.mockReturnValue("join");
+            const prom = emitPromise(store, UPDATE_TOP_LEVEL_SPACES);
+            emitter.emit("Room.myMembership", space, "join", "invite");
+            await prom;
+            expect(store.spacePanelSpaces).toStrictEqual([space]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+        });
+
+        it("updates state when space invite is rejected", async () => {
+            const space = mkSpace(space1);
+            space.getMyMembership.mockReturnValue("invite");
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([space]);
+            space.getMyMembership.mockReturnValue("leave");
+            const prom = emitPromise(store, UPDATE_INVITED_SPACES);
+            emitter.emit("Room.myMembership", space, "leave", "invite");
+            await prom;
+            expect(store.spacePanelSpaces).toStrictEqual([]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+        });
+
+        it("room invite gets added to relevant space filters", async () => {
+            const space = mkSpace(space1, [invite1]);
+            await run();
+
+            expect(store.spacePanelSpaces).toStrictEqual([space]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+            expect(store.getChildSpaces(space1)).toStrictEqual([]);
+            expect(store.getChildRooms(space1)).toStrictEqual([]);
+            expect(store.getSpaceFilteredRoomIds(client.getRoom(space1)).has(invite1)).toBeFalsy();
+            expect(store.getSpaceFilteredRoomIds(null).has(invite1)).toBeFalsy();
+
+            const invite = mkRoom(invite1);
+            invite.getMyMembership.mockReturnValue("invite");
+            const prom = emitPromise(store, space1);
+            emitter.emit("Room", space);
+            await prom;
+
+            expect(store.spacePanelSpaces).toStrictEqual([space]);
+            expect(store.invitedSpaces).toStrictEqual([]);
+            expect(store.getChildSpaces(space1)).toStrictEqual([]);
+            expect(store.getChildRooms(space1)).toStrictEqual([invite]);
+            expect(store.getSpaceFilteredRoomIds(client.getRoom(space1)).has(invite1)).toBeTruthy();
+            expect(store.getSpaceFilteredRoomIds(null).has(invite1)).toBeTruthy();
+        });
+    });
+
+    describe("active space switching tests", () => {
+        const fn = jest.spyOn(store, "emit");
+
+        beforeEach(async () => {
+            mkRoom(room1); // not a space
+            mkSpace(space1, [
+                mkSpace(space2).roomId,
+            ]);
+            mkSpace(space3).getMyMembership.mockReturnValue("invite");
+            await run();
+            await store.setActiveSpace(null);
+            expect(store.activeSpace).toBe(null);
+        });
+        afterEach(() => {
+            fn.mockClear();
+        });
+
+        it("switch to home space", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            fn.mockClear();
+
+            await store.setActiveSpace(null);
+            expect(fn).toHaveBeenCalledWith(UPDATE_SELECTED_SPACE, null);
+            expect(store.activeSpace).toBe(null);
+        });
+
+        it("switch to invited space", async () => {
+            const space = client.getRoom(space3);
+            await store.setActiveSpace(space);
+            expect(fn).toHaveBeenCalledWith(UPDATE_SELECTED_SPACE, space);
+            expect(store.activeSpace).toBe(space);
+        });
+
+        it("switch to top level space", async () => {
+            const space = client.getRoom(space1);
+            await store.setActiveSpace(space);
+            expect(fn).toHaveBeenCalledWith(UPDATE_SELECTED_SPACE, space);
+            expect(store.activeSpace).toBe(space);
+        });
+
+        it("switch to subspace", async () => {
+            const space = client.getRoom(space2);
+            await store.setActiveSpace(space);
+            expect(fn).toHaveBeenCalledWith(UPDATE_SELECTED_SPACE, space);
+            expect(store.activeSpace).toBe(space);
+        });
+
+        it("switch to unknown space is a nop", async () => {
+            expect(store.activeSpace).toBe(null);
+            const space = client.getRoom(room1); // not a space
+            await store.setActiveSpace(space);
+            expect(fn).not.toHaveBeenCalledWith(UPDATE_SELECTED_SPACE, space);
+            expect(store.activeSpace).toBe(null);
+        });
+    });
+
+    describe("context switching tests", () => {
+        const fn = jest.spyOn(defaultDispatcher, "dispatch");
+
+        beforeEach(async () => {
+            [room1, room2, orphan1].forEach(mkRoom);
+            mkSpace(space1, [room1, room2]);
+            mkSpace(space2, [room2]);
+            await run();
+        });
+        afterEach(() => {
+            fn.mockClear();
+            localStorage.clear();
+        });
+
+        const getCurrentRoom = () => fn.mock.calls.reverse().find(([p]) => p.action === "view_room")?.[0].room_id;
+
+        it("last viewed room in target space is the current viewed and in both spaces", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room2);
+            await store.setActiveSpace(client.getRoom(space2));
+            viewRoom(room2);
+            await store.setActiveSpace(client.getRoom(space1));
+            expect(getCurrentRoom()).toBe(room2);
+        });
+
+        it("last viewed room in target space is in the current space", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room2);
+            await store.setActiveSpace(client.getRoom(space2));
+            expect(getCurrentRoom()).toBe(space2);
+            await store.setActiveSpace(client.getRoom(space1));
+            expect(getCurrentRoom()).toBe(room2);
+        });
+
+        it("last viewed room in target space is not in the current space", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room1);
+            await store.setActiveSpace(client.getRoom(space2));
+            viewRoom(room2);
+            await store.setActiveSpace(client.getRoom(space1));
+            expect(getCurrentRoom()).toBe(room1);
+        });
+
+        it("last viewed room is target space is not known", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room1);
+            localStorage.setItem(`mx_space_context_${space2}`, orphan2);
+            await store.setActiveSpace(client.getRoom(space2));
+            expect(getCurrentRoom()).toBe(space2);
+        });
+
+        it("no last viewed room in target space", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room1);
+            await store.setActiveSpace(client.getRoom(space2));
+            expect(getCurrentRoom()).toBe(space2);
+        });
+
+        it("no last viewed room in home space", async () => {
+            await store.setActiveSpace(client.getRoom(space1));
+            viewRoom(room1);
+            await store.setActiveSpace(null);
+            expect(fn.mock.calls[fn.mock.calls.length - 1][0]).toStrictEqual({ action: "view_home_page" });
+        });
+    });
+
+    describe("space auto switching tests", () => {
+        beforeEach(async () => {
+            [room1, room2, orphan1].forEach(mkRoom);
+            mkSpace(space1, [room1, room2]);
+            mkSpace(space2, [room1, room2]);
+
+            client.getRoom(room2).currentState.getStateEvents.mockImplementation(mockStateEventImplementation([
+                mkEvent({
+                    event: true,
+                    type: EventType.SpaceParent,
+                    room: room2,
+                    user: testUserId,
+                    skey: space2,
+                    content: { via: [], canonical: true },
+                    ts: Date.now(),
+                }),
+            ]));
+            await run();
+        });
+
+        it("no switch required, room is in current space", async () => {
+            viewRoom(room1);
+            await store.setActiveSpace(client.getRoom(space1), false);
+            viewRoom(room2);
+            expect(store.activeSpace).toBe(client.getRoom(space1));
+        });
+
+        it("switch to canonical parent space for room", async () => {
+            viewRoom(room1);
+            await store.setActiveSpace(null, false);
+            viewRoom(room2);
+            expect(store.activeSpace).toBe(client.getRoom(space2));
+        });
+
+        it("switch to first containing space for room", async () => {
+            viewRoom(room2);
+            await store.setActiveSpace(null, false);
+            viewRoom(room1);
+            expect(store.activeSpace).toBe(client.getRoom(space1));
+        });
+
+        it("switch to home for orphaned room", async () => {
+            viewRoom(room1);
+            await store.setActiveSpace(client.getRoom(space1), false);
+            viewRoom(orphan1);
+            expect(store.activeSpace).toBeNull();
+        });
+    });
+
+    describe("traverseSpace", () => {
+        beforeEach(() => {
+            mkSpace("!a:server", [
+                mkSpace("!b:server", [
+                    mkSpace("!c:server", [
+                        "!a:server",
+                        mkRoom("!c-child:server").roomId,
+                        mkRoom("!shared-child:server").roomId,
+                    ]).roomId,
+                    mkRoom("!b-child:server").roomId,
+                ]).roomId,
+                mkRoom("!a-child:server").roomId,
+                "!shared-child:server",
+            ]);
+        });
+
+        it("avoids cycles", () => {
+            const fn = jest.fn();
+            store.traverseSpace("!b:server", fn);
+
+            expect(fn).toBeCalledTimes(3);
+            expect(fn).toBeCalledWith("!a:server");
+            expect(fn).toBeCalledWith("!b:server");
+            expect(fn).toBeCalledWith("!c:server");
+        });
+
+        it("including rooms", () => {
+            const fn = jest.fn();
+            store.traverseSpace("!b:server", fn, true);
+
+            expect(fn).toBeCalledTimes(8); // twice for shared-child
+            expect(fn).toBeCalledWith("!a:server");
+            expect(fn).toBeCalledWith("!a-child:server");
+            expect(fn).toBeCalledWith("!b:server");
+            expect(fn).toBeCalledWith("!b-child:server");
+            expect(fn).toBeCalledWith("!c:server");
+            expect(fn).toBeCalledWith("!c-child:server");
+            expect(fn).toBeCalledWith("!shared-child:server");
+        });
+
+        it("excluding rooms", () => {
+            const fn = jest.fn();
+            store.traverseSpace("!b:server", fn, false);
+
+            expect(fn).toBeCalledTimes(3);
+            expect(fn).toBeCalledWith("!a:server");
+            expect(fn).toBeCalledWith("!b:server");
+            expect(fn).toBeCalledWith("!c:server");
+        });
+    });
+});
diff --git a/test/test-utils.js b/test/test-utils.js
index d259fcb95f..6dc02463a5 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -64,6 +64,11 @@ export function createTestClient() {
         getRoomIdForAlias: jest.fn().mockResolvedValue(undefined),
         getRoomDirectoryVisibility: jest.fn().mockResolvedValue(undefined),
         getProfileInfo: jest.fn().mockResolvedValue({}),
+        getThirdpartyProtocols: jest.fn().mockResolvedValue({}),
+        getClientWellKnown: jest.fn().mockReturnValue(null),
+        supportsVoip: jest.fn().mockReturnValue(true),
+        getTurnServersExpiry: jest.fn().mockReturnValue(2^32),
+        getThirdpartyUser: jest.fn().mockResolvedValue([]),
         getAccountData: (type) => {
             return mkEvent({
                 type,
@@ -79,6 +84,17 @@ export function createTestClient() {
         generateClientSecret: () => "t35tcl1Ent5ECr3T",
         isGuest: () => false,
         isCryptoEnabled: () => false,
+        getSpaceSummary: jest.fn().mockReturnValue({
+            rooms: [],
+            events: [],
+        }),
+
+        // Used by various internal bits we aren't concerned with (yet)
+        _sessionStore: {
+            store: {
+                getItem: jest.fn(),
+            },
+        },
     };
 }
 
@@ -88,8 +104,8 @@ export function createTestClient() {
  * @param {string} opts.type The event.type
  * @param {string} opts.room The event.room_id
  * @param {string} opts.user The event.user_id
- * @param {string} opts.skey Optional. The state key (auto inserts empty string)
- * @param {Number} opts.ts   Optional. Timestamp for the event
+ * @param {string=} opts.skey Optional. The state key (auto inserts empty string)
+ * @param {number=} opts.ts   Optional. Timestamp for the event
  * @param {Object} opts.content The event.content
  * @param {boolean} opts.event True to make a MatrixEvent.
  * @return {Object} a JSON object representing this event.
@@ -224,7 +240,7 @@ export function mkStubRoom(roomId = null) {
         hasMembershipState: () => null,
         getVersion: () => '1',
         shouldUpgradeToVersion: () => null,
-        getMyMembership: () => "join",
+        getMyMembership: jest.fn().mockReturnValue("join"),
         maySendMessage: jest.fn().mockReturnValue(true),
         currentState: {
             getStateEvents: jest.fn(),
@@ -233,17 +249,17 @@ export function mkStubRoom(roomId = null) {
             maySendEvent: jest.fn().mockReturnValue(true),
             members: [],
         },
-        tags: {
-            "m.favourite": {
-                order: 0.5,
-            },
-        },
+        tags: {},
         setBlacklistUnverifiedDevices: jest.fn(),
         on: jest.fn(),
         removeListener: jest.fn(),
         getDMInviter: jest.fn(),
         getAvatarUrl: () => 'mxc://avatar.url/room.png',
         getMxcAvatarUrl: () => 'mxc://avatar.url/room.png',
+        isSpaceRoom: jest.fn(() => false),
+        getUnreadNotificationCount: jest.fn(() => 0),
+        getEventReadUpTo: jest.fn(() => null),
+        timeline: [],
     };
 }
 
diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
index e0ed5ba26a..07ec03860b 100644
--- a/test/utils/MegolmExportEncryption-test.js
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -84,22 +84,22 @@ describe('MegolmExportEncryption', function() {
         it('should handle missing header', function() {
             const input=stringToArray(`-----`);
             return MegolmExportEncryption.decryptMegolmKeyFile(input, '')
-            .then((res) => {
-                throw new Error('expected to throw');
-            }, (error) => {
-                expect(error.message).toEqual('Header line not found');
-            });
+                .then((res) => {
+                    throw new Error('expected to throw');
+                }, (error) => {
+                    expect(error.message).toEqual('Header line not found');
+                });
         });
 
         it('should handle missing trailer', function() {
             const input=stringToArray(`-----BEGIN MEGOLM SESSION DATA-----
 -----`);
             return MegolmExportEncryption.decryptMegolmKeyFile(input, '')
-            .then((res) => {
-                throw new Error('expected to throw');
-            }, (error) => {
-                expect(error.message).toEqual('Trailer line not found');
-            });
+                .then((res) => {
+                    throw new Error('expected to throw');
+                }, (error) => {
+                    expect(error.message).toEqual('Trailer line not found');
+                });
         });
 
         it('should handle a too-short body', function() {
@@ -109,11 +109,11 @@ cissyYBxjsfsAn
 -----END MEGOLM SESSION DATA-----
 `);
             return MegolmExportEncryption.decryptMegolmKeyFile(input, '')
-            .then((res) => {
-                throw new Error('expected to throw');
-            }, (error) => {
-                expect(error.message).toEqual('Invalid file: too short');
-            });
+                .then((res) => {
+                    throw new Error('expected to throw');
+                }, (error) => {
+                    expect(error.message).toEqual('Invalid file: too short');
+                });
         });
 
         // TODO find a subtlecrypto shim which doesn't break this test
diff --git a/test/utils/ShieldUtils-test.js b/test/utils/ShieldUtils-test.js
index 8e3b19c1c4..fdf4f527ee 100644
--- a/test/utils/ShieldUtils-test.js
+++ b/test/utils/ShieldUtils-test.js
@@ -26,7 +26,7 @@ describe("mkClient self-test", function() {
         ["@TF:h", true],
         ["@FT:h", false],
         ["@FF:h", false]],
-        )("behaves well for user trust %s", (userId, trust) => {
+    )("behaves well for user trust %s", (userId, trust) => {
         expect(mkClient().checkUserTrust(userId).isCrossSigningVerified()).toBe(trust);
     });
 
@@ -35,7 +35,7 @@ describe("mkClient self-test", function() {
         ["@TF:h", false],
         ["@FT:h", true],
         ["@FF:h", false]],
-        )("behaves well for device trust %s", (userId, trust) => {
+    )("behaves well for device trust %s", (userId, trust) => {
         expect(mkClient().checkDeviceTrust(userId, "device").isVerified()).toBe(trust);
     });
 });
@@ -128,7 +128,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
 
 describe("shieldStatusForMembership other-trust behaviour", function() {
     beforeAll(() => {
-        DMRoomMap._sharedInstance = {
+        DMRoomMap.sharedInstance = {
             getUserIdForRoomId: (roomId) => roomId === "DM" ? "@any:h" : null,
         };
     });
diff --git a/test/utils/arrays-test.ts b/test/utils/arrays-test.ts
index ececd274b2..c5be59ab43 100644
--- a/test/utils/arrays-test.ts
+++ b/test/utils/arrays-test.ts
@@ -22,6 +22,7 @@ import {
     arrayHasOrderChange,
     arrayMerge,
     arraySeed,
+    arrayTrimFill,
     arrayUnion,
     ArrayUtil,
     GroupedArray,
@@ -64,6 +65,38 @@ describe('arrays', () => {
         });
     });
 
+    describe('arrayTrimFill', () => {
+        it('should shrink arrays', () => {
+            const input = [1, 2, 3];
+            const output = [1, 2];
+            const seed = [4, 5, 6];
+            const result = arrayTrimFill(input, output.length, seed);
+            expect(result).toBeDefined();
+            expect(result).toHaveLength(output.length);
+            expect(result).toEqual(output);
+        });
+
+        it('should expand arrays', () => {
+            const input = [1, 2, 3];
+            const output = [1, 2, 3, 4, 5];
+            const seed = [4, 5, 6];
+            const result = arrayTrimFill(input, output.length, seed);
+            expect(result).toBeDefined();
+            expect(result).toHaveLength(output.length);
+            expect(result).toEqual(output);
+        });
+
+        it('should keep arrays the same', () => {
+            const input = [1, 2, 3];
+            const output = [1, 2, 3];
+            const seed = [4, 5, 6];
+            const result = arrayTrimFill(input, output.length, seed);
+            expect(result).toBeDefined();
+            expect(result).toHaveLength(output.length);
+            expect(result).toEqual(output);
+        });
+    });
+
     describe('arraySeed', () => {
         it('should create an array of given length', () => {
             const val = 1;
diff --git a/test/utils/test-utils.ts b/test/utils/test-utils.ts
new file mode 100644
index 0000000000..af92987a3d
--- /dev/null
+++ b/test/utils/test-utils.ts
@@ -0,0 +1,33 @@
+/*
+Copyright 2021 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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { AsyncStoreWithClient } from "../../src/stores/AsyncStoreWithClient";
+
+// These methods make some use of some private methods on the AsyncStoreWithClient to simplify getting into a consistent
+// ready state without needing to wire up a dispatcher and pretend to be a js-sdk client.
+
+export const setupAsyncStoreWithClient = async (store: AsyncStoreWithClient<any>, client: MatrixClient) => {
+    // @ts-ignore
+    store.readyStore.useUnitTestClient(client);
+    // @ts-ignore
+    await store.onReady();
+};
+
+export const resetAsyncStoreWithClient = async (store: AsyncStoreWithClient<any>) => {
+    // @ts-ignore
+    await store.onNotReady();
+};
diff --git a/yarn.lock b/yarn.lock
index 66329cfa89..8b4ac35d6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,6 +26,13 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
+"@babel/code-frame@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
+  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+  dependencies:
+    "@babel/highlight" "^7.12.13"
+
 "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
@@ -61,6 +68,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.13.16":
+  version "7.13.16"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
+  integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
+  dependencies:
+    "@babel/types" "^7.13.16"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
@@ -130,6 +146,15 @@
     "@babel/template" "^7.12.7"
     "@babel/types" "^7.12.11"
 
+"@babel/helper-function-name@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
+  integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.12.13"
+    "@babel/template" "^7.12.13"
+    "@babel/types" "^7.12.13"
+
 "@babel/helper-get-function-arity@^7.12.10":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz#b158817a3165b5faa2047825dfa61970ddcc16cf"
@@ -137,6 +162,13 @@
   dependencies:
     "@babel/types" "^7.12.10"
 
+"@babel/helper-get-function-arity@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
+  integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
+  dependencies:
+    "@babel/types" "^7.12.13"
+
 "@babel/helper-hoist-variables@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
@@ -225,6 +257,13 @@
   dependencies:
     "@babel/types" "^7.12.11"
 
+"@babel/helper-split-export-declaration@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
+  integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
+  dependencies:
+    "@babel/types" "^7.12.13"
+
 "@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
@@ -263,11 +302,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.12.13":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
+  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.7.0":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
   integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
 
+"@babel/parser@^7.12.13", "@babel/parser@^7.13.16":
+  version "7.13.16"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
+  integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
+
 "@babel/plugin-proposal-async-generator-functions@^7.12.1":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz#04b8f24fd4532008ab4e79f788468fd5a8476566"
@@ -980,6 +1033,15 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
+"@babel/template@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
+  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/parser" "^7.12.13"
+    "@babel/types" "^7.12.13"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.12", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
@@ -995,6 +1057,20 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.13.17":
+  version "7.13.17"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.17.tgz#c85415e0c7d50ac053d758baec98b28b2ecfeea3"
+  integrity sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.13.16"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.13.16"
+    "@babel/types" "^7.13.17"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299"
@@ -1004,6 +1080,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.13", "@babel/types@^7.13.16", "@babel/types@^7.13.17":
+  version "7.13.17"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
+  integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1510,6 +1594,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/parse5@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.0.tgz#38590dc2c3cf5717154064e3ee9b6947ee21b299"
+  integrity sha512-oPwPSj4a1wu9rsXTEGIJz91ISU725t0BmSnUhb57sI+M8XEmvUop84lzuiYdq0Y5M6xLY8DBPg0C2xEQKLyvBA==
+
 "@types/prettier@^2.0.0":
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.6.tgz#f4b1efa784e8db479cdb8b14403e2144b1e9ff03"
@@ -5496,9 +5585,9 @@ lodash.sortby@^4.7.0:
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
 lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^4.0.0:
   version "4.0.0"
@@ -5588,8 +5677,8 @@ mathml-tag-names@^2.1.3:
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "9.11.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e277de6e3d9bbb98fbfbbedd47d86ee85f6f47e5"
+  version "10.0.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/c8f69c0b7937b9064938c134d708c4d064b71315"
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
@@ -5614,6 +5703,14 @@ matrix-react-test-utils@^0.2.2:
   resolved "https://registry.yarnpkg.com/matrix-react-test-utils/-/matrix-react-test-utils-0.2.2.tgz#c87144d3b910c7edc544a6699d13c7c2bf02f853"
   integrity sha512-49+7gfV6smvBIVbeloql+37IeWMTD+fiywalwCqk8Dnz53zAFjKSltB3rmWHso1uecLtQEcPtCijfhzcLXAxTQ==
 
+"matrix-web-i18n@github:matrix-org/matrix-web-i18n":
+  version "1.1.2"
+  resolved "https://codeload.github.com/matrix-org/matrix-web-i18n/tar.gz/63f9119bc0bc304e83d4e8e22364caa7850e7671"
+  dependencies:
+    "@babel/parser" "^7.13.16"
+    "@babel/traverse" "^7.13.17"
+    walk "^2.3.14"
+
 matrix-widget-api@^0.1.0-beta.13:
   version "0.1.0-beta.13"
   resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.13.tgz#ebddc83eaef39bbb87b621a02a35902e1a29b9ef"
@@ -7978,9 +8075,9 @@ typescript@^4.1.3:
   integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 ua-parser-js@^0.7.18:
-  version "0.7.23"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
-  integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
+  version "0.7.28"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
 
 unhomoglyph@^1.0.6:
   version "1.0.6"

From 39402ec971d1f5c258f0f34f0c75a9e438d0160a Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Fri, 7 May 2021 19:14:29 +0530
Subject: [PATCH 010/358] Lint errors

---
 src/components/views/rooms/EventTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 4e2183aff1..533aa6cfab 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1135,7 +1135,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
-                        <div className={`mx_EventTile_line ${ isBubbleMessage && tileHandler == "messages.ViewSourceEvent" ? "hidden" : ""}`}>
+                        <div className={`mx_EventTile_line ${ isBubbleMessage
+                             && tileHandler == "messages.ViewSourceEvent" ? "hidden" : ""}`}>
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }

From 44b143c8c3063be7ca2bf24e6cfdb81be9351c75 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Sat, 8 May 2021 21:17:05 -0400
Subject: [PATCH 011/358] Match requested avatar size to displayed size

Reduces the blurriness of avatars in the EventTilePreview.

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index b15fbbed2b..95f9a97058 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -61,7 +61,7 @@ interface IState {
     message: string;
 }
 
-const AVATAR_SIZE = 32;
+const AVATAR_SIZE = 30;
 
 @replaceableComponent("views.elements.EventTilePreview")
 export default class EventTilePreview extends React.Component<IProps, IState> {

From e46bc931781095447a1929938a5cb5bdbdb7de4d Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Sat, 8 May 2021 21:22:31 -0400
Subject: [PATCH 012/358] Fall back to MXID when no display name is present

MemberAvatar requires a display name, or else it refuses to render.

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 95f9a97058..6d2ea687de 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -101,7 +101,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
         // Fake it more
         event.sender = {
-            name: this.props.displayName,
+            name: this.props.displayName || this.props.userId,
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(

From 00d093b4ffb83e4d100b706757e0e44a8f1fb376 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 19 May 2021 08:56:14 +0100
Subject: [PATCH 013/358] yarn lock

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 19c0646d32..57b1198019 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2180,6 +2180,11 @@ blueimp-canvas-to-blob@^3.28.0:
   resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz#c8ab4dc6bb08774a7f273798cdf94b0776adf6c8"
   integrity sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg==
 
+blurhash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.3.tgz#dc325af7da836d07a0861d830bdd63694382483e"
+  integrity sha512-yUhPJvXexbqbyijCIE/T2NCXcj9iNPhWmOKbPTuR/cm7Q5snXYIfnVnz6m7MWOXxODMz/Cr3UcVkRdHiuDVRDw==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"

From c21445c406fd077e17fd17661590739069a82995 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 13:23:17 +0100
Subject: [PATCH 014/358] switch from MatrixClientPeg in ContentMessages for
 consistency

---
 src/ContentMessages.tsx                 | 19 +++++++++----------
 src/components/structures/UploadBar.tsx |  5 ++++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 65b6f1aba4..ba84b30733 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -18,7 +18,6 @@ limitations under the License.
 
 import React from "react";
 import dis from './dispatcher/dispatcher';
-import {MatrixClientPeg} from './MatrixClientPeg';
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import * as sdk from './index';
 import { _t } from './languageHandler';
@@ -344,7 +343,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
         });
         (prom as IAbortablePromise<any>).abort = () => {
             canceled = true;
-            if (uploadPromise) MatrixClientPeg.get().cancelUpload(uploadPromise);
+            if (uploadPromise) matrixClient.cancelUpload(uploadPromise);
         };
         return prom;
     } else {
@@ -362,7 +361,7 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
         });
         promise1.abort = () => {
             canceled = true;
-            MatrixClientPeg.get().cancelUpload(basePromise);
+            matrixClient.cancelUpload(basePromise);
         };
         return promise1;
     }
@@ -372,9 +371,9 @@ export default class ContentMessages {
     private inprogress: IUpload[] = [];
     private mediaConfig: IMediaConfig = null;
 
-    sendStickerContentToRoom(url: string, roomId: string, info: string, text: string, matrixClient: MatrixClient) {
+    sendStickerContentToRoom(url: string, roomId: string, info: object, text: string, matrixClient: MatrixClient) {
         const startTime = CountlyAnalytics.getTimestamp();
-        const prom = MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => {
+        const prom = matrixClient.sendStickerMessage(roomId, url, info, text).catch((e) => {
             console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
             throw e;
         });
@@ -416,7 +415,7 @@ export default class ContentMessages {
 
         if (!this.mediaConfig) { // hot-path optimization to not flash a spinner if we don't need to
             const modal = Modal.createDialog(Spinner, null, 'mx_Dialog_spinner');
-            await this.ensureMediaConfigFetched();
+            await this.ensureMediaConfigFetched(matrixClient);
             modal.close();
         }
 
@@ -471,7 +470,7 @@ export default class ContentMessages {
         return this.inprogress.filter(u => !u.canceled);
     }
 
-    cancelUpload(promise: Promise<any>) {
+    cancelUpload(promise: Promise<any>, matrixClient: MatrixClient) {
         let upload: IUpload;
         for (let i = 0; i < this.inprogress.length; ++i) {
             if (this.inprogress[i].promise === promise) {
@@ -481,7 +480,7 @@ export default class ContentMessages {
         }
         if (upload) {
             upload.canceled = true;
-            MatrixClientPeg.get().cancelUpload(upload.promise);
+            matrixClient.cancelUpload(upload.promise);
             dis.dispatch<UploadCanceledPayload>({action: Action.UploadCanceled, upload});
         }
     }
@@ -623,11 +622,11 @@ export default class ContentMessages {
         return true;
     }
 
-    private ensureMediaConfigFetched() {
+    private ensureMediaConfigFetched(matrixClient: MatrixClient) {
         if (this.mediaConfig !== null) return;
 
         console.log("[Media Config] Fetching");
-        return MatrixClientPeg.get().getMediaConfig().then((config) => {
+        return matrixClient.getMediaConfig().then((config) => {
             console.log("[Media Config] Fetched config:", config);
             return config;
         }).catch(() => {
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index e19e312f58..269c615698 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -26,6 +26,7 @@ import ProgressBar from "../views/elements/ProgressBar";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { IUpload } from "../../models/IUpload";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 interface IProps {
     room: Room;
@@ -38,6 +39,8 @@ interface IState {
 
 @replaceableComponent("structures.UploadBar")
 export default class UploadBar extends React.Component<IProps, IState> {
+    static contextType = MatrixClientContext;
+
     private dispatcherRef: string;
     private mounted: boolean;
 
@@ -82,7 +85,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
 
     private onCancelClick = (ev) => {
         ev.preventDefault();
-        ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise);
+        ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise, this.context);
     };
 
     render() {

From ba7604fd44679d020335160ed5f30f20f294184b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 13:24:19 +0100
Subject: [PATCH 015/358] fix types around sending stickers

---
 src/components/structures/RoomView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index c0f3c59457..1595bc6c53 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1196,7 +1196,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         });
     };
 
-    private injectSticker(url, info, text) {
+    private injectSticker(url: string, info: object, text: string) {
         if (this.context.isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;

From 563e6433b9eec30ec404abed1cbfcf2bb2279119 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 20 May 2021 15:47:11 +0100
Subject: [PATCH 016/358] Don't store blurhash in state, its immutable and
 pointless

---
 src/components/views/messages/MImageBody.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 14043b95f3..34320f1b31 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -60,7 +60,6 @@ export default class MImageBody extends React.Component {
         this.onClick = this.onClick.bind(this);
         this._isGif = this._isGif.bind(this);
 
-        const imageInfo = this.props.mxEvent.getContent().info;
 
         this.state = {
             decryptedUrl: null,
@@ -72,7 +71,6 @@ export default class MImageBody extends React.Component {
             loadedImageDimensions: null,
             hover: false,
             showImage: SettingsStore.getValue("showImages"),
-            blurhash: imageInfo ? imageInfo['xyz.amorgan.blurhash'] : null, // TODO: Use `blurhash` when MSC2448 lands.
         };
 
         this._image = createRef();
@@ -442,8 +440,9 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
-        if (!this.state.blurhash) return null;
-        return <BlurhashPlaceholder blurhash={this.state.blurhash} width={width} height={height} />;
+        const blurhash = this.props.mxEvent.getContent().info['xyz.amorgan.blurhash'];
+        if (!blurhash) return null;
+        return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
     }
 
     // Overidden by MStickerBody

From 8368b864406453d35c3d47b096a2febd9a83273c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 14:52:27 +0100
Subject: [PATCH 017/358] Wire up local blurhash encoding

---
 src/ContentMessages.tsx | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index ba84b30733..9d9709a04d 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -17,6 +17,8 @@ limitations under the License.
 */
 
 import React from "react";
+import { encode } from "blurhash";
+
 import dis from './dispatcher/dispatcher';
 import {MatrixClient} from "matrix-js-sdk/src/client";
 import * as sdk from './index';
@@ -47,6 +49,10 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
+const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC 2448
+const BLURHASH_X_COMPONENTS = 8;
+const BLURHASH_Y_COMPONENTS = 8;
+
 export class UploadCanceledError extends Error {}
 
 type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
@@ -77,6 +83,7 @@ interface IThumbnail {
         };
         w: number;
         h: number;
+        [BLURHASH_FIELD]: string;
     };
     thumbnail: Blob;
 }
@@ -124,7 +131,16 @@ function createThumbnail(
         const canvas = document.createElement("canvas");
         canvas.width = targetWidth;
         canvas.height = targetHeight;
-        canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight);
+        const context = canvas.getContext("2d");
+        context.drawImage(element, 0, 0, targetWidth, targetHeight);
+        const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+        const blurhash = encode(
+            imageData.data,
+            imageData.width,
+            imageData.height,
+            BLURHASH_X_COMPONENTS,
+            BLURHASH_Y_COMPONENTS,
+        );
         canvas.toBlob(function(thumbnail) {
             resolve({
                 info: {
@@ -136,8 +152,9 @@ function createThumbnail(
                     },
                     w: inputWidth,
                     h: inputHeight,
+                    [BLURHASH_FIELD]: blurhash,
                 },
-                thumbnail: thumbnail,
+                thumbnail,
             });
         }, mimeType);
     });
@@ -338,7 +355,6 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
             if (file.type) {
                 encryptInfo.mimetype = file.type;
             }
-            // TODO: Blurhash for encrypted media?
             return {"file": encryptInfo};
         });
         (prom as IAbortablePromise<any>).abort = () => {
@@ -349,15 +365,11 @@ function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blo
     } else {
         const basePromise = matrixClient.uploadContent(file, {
             progressHandler: progressHandler,
-            onlyContentUri: false,
         });
-        const promise1 = basePromise.then(function(body) {
+        const promise1 = basePromise.then(function(url) {
             if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
-            return {
-                "url": body.content_uri,
-                "blurhash": body["xyz.amorgan.blurhash"], // TODO: Use `body.blurhash` when MSC2448 lands
-            };
+            return { url };
         });
         promise1.abort = () => {
             canceled = true;
@@ -565,7 +577,6 @@ export default class ContentMessages {
             return upload.promise.then(function(result) {
                 content.file = result.file;
                 content.url = result.url;
-                content.info['xyz.amorgan.blurhash'] = result.blurhash; // TODO: Use `blurhash` when MSC2448 lands
             });
         }).then(() => {
             // Await previous message being sent into the room

From 6672cbcf8029f93a3e5b89724ec4346404fb5de0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 15:29:17 +0100
Subject: [PATCH 018/358] fix typo

---
 src/ContentMessages.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 9d9709a04d..626e5cbf69 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -49,7 +49,7 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
-const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC 2448
+const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
 const BLURHASH_X_COMPONENTS = 8;
 const BLURHASH_Y_COMPONENTS = 8;
 

From 3ed421dacf5e9df2f346dcfd549b69555bf6707b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:04:22 +0100
Subject: [PATCH 019/358] Tweak blurhash size

---
 src/ContentMessages.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 626e5cbf69..0914bff41a 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -50,8 +50,8 @@ const MAX_HEIGHT = 600;
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
 const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
-const BLURHASH_X_COMPONENTS = 8;
-const BLURHASH_Y_COMPONENTS = 8;
+const BLURHASH_X_COMPONENTS = 6;
+const BLURHASH_Y_COMPONENTS = 6;
 
 export class UploadCanceledError extends Error {}
 

From 254697644e956e032451b11c500de46d49410564 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:04:36 +0100
Subject: [PATCH 020/358] Fix video thumbnailer

---
 src/ContentMessages.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 0914bff41a..98a4554a07 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -237,7 +237,8 @@ function infoForImageFile(matrixClient, roomId, imageFile) {
 }
 
 /**
- * Load a file into a newly created video element.
+ * Load a file into a newly created video element and pull some strings
+ * in an attempt to guarantee the first frame will be showing.
  *
  * @param {File} videoFile The file to load in an video element.
  * @return {Promise} A promise that resolves with the video image element.
@@ -246,20 +247,25 @@ function loadVideoElement(videoFile): Promise<HTMLVideoElement> {
     return new Promise((resolve, reject) => {
         // Load the file into an html element
         const video = document.createElement("video");
+        video.preload = "metadata";
+        video.playsInline = true;
+        video.muted = true;
 
         const reader = new FileReader();
 
         reader.onload = function(ev) {
-            video.src = ev.target.result as string;
-
-            // Once ready, returns its size
             // Wait until we have enough data to thumbnail the first frame.
-            video.onloadeddata = function() {
+            video.onloadeddata = async function() {
                 resolve(video);
+                video.pause();
             };
             video.onerror = function(e) {
                 reject(e);
             };
+
+            video.src = ev.target.result as string;
+            video.load();
+            video.play();
         };
         reader.onerror = function(e) {
             reject(e);

From dbca9b4625fbde6c32edef7522f2a2668b484829 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:19:41 +0100
Subject: [PATCH 021/358] use const for blurhash field

---
 src/ContentMessages.tsx                     | 2 +-
 src/components/views/messages/MImageBody.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 98a4554a07..44bb3edca9 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -49,7 +49,7 @@ const MAX_HEIGHT = 600;
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
 const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
-const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
+export const BLURHASH_FIELD = "xyz.amorgan.blurhash"; // MSC2448
 const BLURHASH_X_COMPONENTS = 6;
 const BLURHASH_Y_COMPONENTS = 6;
 
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 34320f1b31..6062375243 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -30,6 +30,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromContent} from "../../../customisations/Media";
 import BlurhashPlaceholder from "../elements/BlurhashPlaceholder";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 @replaceableComponent("views.messages.MImageBody")
 export default class MImageBody extends React.Component {
@@ -440,7 +441,7 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
-        const blurhash = this.props.mxEvent.getContent().info['xyz.amorgan.blurhash'];
+        const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (!blurhash) return null;
         return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
     }

From 3a2e5389f6ccad7fc1ed3e039544d3fe596a104a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:20:00 +0100
Subject: [PATCH 022/358] Support blurhash for video posters

---
 src/components/views/messages/MVideoBody.tsx | 67 +++++++++++++++++---
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2efdce506e..44b246f0ad 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -16,6 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
+import { decode } from "blurhash";
+
 import MFileBody from './MFileBody';
 import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
@@ -23,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromContent} from "../../../customisations/Media";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 interface IProps {
     /* the MatrixEvent to show */
@@ -37,6 +40,8 @@ interface IState {
     decryptedBlob: Blob|null,
     error: any|null,
     fetchingData: boolean,
+    posterLoading: boolean;
+    blurhashUrl: string;
 }
 
 @replaceableComponent("views.messages.MVideoBody")
@@ -51,10 +56,12 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
             error: null,
+            posterLoading: false,
+            blurhashUrl: null,
         }
     }
 
-    thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
+    thumbScale(fullWidth: number, fullHeight: number, thumbWidth = 480, thumbHeight = 360) {
         if (!fullWidth || !fullHeight) {
             // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
             // log this because it's spammy
@@ -92,8 +99,11 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
     private getThumbUrl(): string|null {
         const content = this.props.mxEvent.getContent();
         const media = mediaFromContent(content);
-        if (media.isEncrypted) {
+
+        if (media.isEncrypted && this.state.decryptedThumbnailUrl) {
             return this.state.decryptedThumbnailUrl;
+        } else if (this.state.posterLoading) {
+            return this.state.blurhashUrl;
         } else if (media.hasThumbnail) {
             return media.thumbnailHttp;
         } else {
@@ -101,18 +111,57 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
         }
     }
 
+    private loadBlurhash() {
+        const info = this.props.mxEvent.getContent()?.info;
+        if (!info[BLURHASH_FIELD]) return;
+
+        const canvas = document.createElement("canvas");
+
+        let width = info.w;
+        let height = info.h;
+        const scale = this.thumbScale(info.w, info.h);
+        if (scale) {
+            width = Math.floor(info.w * scale);
+            height = Math.floor(info.h * scale);
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const pixels = decode(info[BLURHASH_FIELD], width, height);
+        const ctx = canvas.getContext("2d");
+        const imgData = ctx.createImageData(width, height);
+        imgData.data.set(pixels);
+        ctx.putImageData(imgData, 0, 0);
+
+        this.setState({
+            blurhashUrl: canvas.toDataURL(),
+            posterLoading: true,
+        });
+
+        const content = this.props.mxEvent.getContent();
+        const media = mediaFromContent(content);
+        if (media.hasThumbnail) {
+            const image = new Image();
+            image.onload = () => {
+                this.setState({ posterLoading: false });
+            };
+            image.src = media.thumbnailHttp;
+        }
+    }
+
     async componentDidMount() {
         const autoplay = SettingsStore.getValue("autoplayGifsAndVideos") as boolean;
         const content = this.props.mxEvent.getContent();
+        this.loadBlurhash();
+
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
-            if (content.info && content.info.thumbnail_file) {
-                thumbnailPromise = decryptFile(
-                    content.info.thumbnail_file,
-                ).then(function(blob) {
-                    return URL.createObjectURL(blob);
-                });
+            if (content?.info?.thumbnail_file) {
+                thumbnailPromise = decryptFile(content.info.thumbnail_file)
+                    .then(blob => URL.createObjectURL(blob));
             }
+
             try {
                 const thumbnailUrl = await thumbnailPromise;
                 if (autoplay) {
@@ -218,7 +267,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
         let poster = null;
         let preload = "metadata";
         if (content.info) {
-            const scale = this.thumbScale(content.info.w, content.info.h, 480, 360);
+            const scale = this.thumbScale(content.info.w, content.info.h);
             if (scale) {
                 width = Math.floor(content.info.w * scale);
                 height = Math.floor(content.info.h * scale);

From 9c599b567df828ed5e888c846aa080b93c535ae2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:39:38 +0100
Subject: [PATCH 023/358] Fix alignment of image blurhashes and interplay with
 spinners

---
 src/components/views/messages/MImageBody.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6062375243..8d3f1c4c10 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -372,10 +372,7 @@ export default class MImageBody extends React.Component {
         let placeholder = null;
         let gifLabel = null;
 
-        // e2e image hasn't been decrypted yet
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            placeholder = <InlineSpinner w={32} h={32} />;
-        } else if (!this.state.imgLoaded) {
+        if (!this.state.imgLoaded) {
             placeholder = this.getPlaceholder(maxWidth, maxHeight);
         }
 
@@ -414,9 +411,7 @@ export default class MImageBody extends React.Component {
                         // Constrain width here so that spinner appears central to the loaded thumbnail
                         maxWidth: infoWidth + "px",
                     }}>
-                        <div className="mx_MImageBody_thumbnail_spinner">
-                            { placeholder }
-                        </div>
+                        { placeholder }
                     </div>
                 }
 
@@ -442,8 +437,10 @@ export default class MImageBody extends React.Component {
     // Overidden by MStickerBody
     getPlaceholder(width, height) {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
-        if (!blurhash) return null;
-        return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
+        if (blurhash) return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
+        return <div className="mx_MImageBody_thumbnail_spinner">
+            <InlineSpinner w={32} h={32} />
+        </div>;
     }
 
     // Overidden by MStickerBody

From 3f9b6caacd76608cb1d22403442460223ab7090a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 May 2021 21:46:18 +0100
Subject: [PATCH 024/358] fix missing rounded corners on blurhash placeholder

---
 res/css/views/messages/_MImageBody.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 1c773c2f06..d04b3d5c93 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$timelineImageBorderRadius: 4px;
+
 .mx_MImageBody {
     display: block;
     margin-right: 34px;
@@ -25,7 +27,11 @@ limitations under the License.
     height: 100%;
     left: 0;
     top: 0;
-    border-radius: 4px;
+    border-radius: $timelineImageBorderRadius;
+
+    > canvas {
+        border-radius: $timelineImageBorderRadius;
+    }
 }
 
 .mx_MImageBody_thumbnail_container {

From 44e14a7d4305639b928e3a78a0b6f368f33f8424 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 10:06:17 +0100
Subject: [PATCH 025/358] Support blurhashes on stickers

---
 src/components/views/messages/MStickerBody.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index 54eb7649b4..d3dea2bfa4 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -18,6 +18,7 @@ import React from 'react';
 import MImageBody from './MImageBody';
 import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {BLURHASH_FIELD} from "../../../ContentMessages";
 
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
@@ -41,7 +42,8 @@ export default class MStickerBody extends MImageBody {
 
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
-    getPlaceholder() {
+    getPlaceholder(width, height) {
+        if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         const TintableSVG = sdk.getComponent('elements.TintableSvg');
         return <TintableSVG src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }

From 42ffc5c9e8ffd1673f14268a18c83bed31378984 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 18:08:43 +0100
Subject: [PATCH 026/358] Add support to keyboard shortcuts dialog for [digits]

---
 src/accessibility/KeyboardShortcuts.tsx | 3 +++
 src/i18n/strings/en_EN.json             | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/accessibility/KeyboardShortcuts.tsx b/src/accessibility/KeyboardShortcuts.tsx
index 2a3e576e31..1cd5408210 100644
--- a/src/accessibility/KeyboardShortcuts.tsx
+++ b/src/accessibility/KeyboardShortcuts.tsx
@@ -57,6 +57,8 @@ export enum Modifiers {
 
 // Meta-modifier: isMac ? CMD : CONTROL
 export const CMD_OR_CTRL = isMac ? Modifiers.COMMAND : Modifiers.CONTROL;
+// Meta-key representing the digits [0-9] often found at the top of standard keyboard layouts
+export const DIGITS = "digits";
 
 interface IKeybind {
     modifiers?: Modifiers[];
@@ -319,6 +321,7 @@ const alternateKeyName: Record<string, string> = {
     [Key.SPACE]: _td("Space"),
     [Key.HOME]: _td("Home"),
     [Key.END]: _td("End"),
+    [DIGITS]: _td("[number]"),
 };
 const keyIcon: Record<string, string> = {
     [Key.ARROW_UP]: "↑",
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7ceb039822..251c70e241 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2973,5 +2973,6 @@
     "Esc": "Esc",
     "Enter": "Enter",
     "Space": "Space",
-    "End": "End"
+    "End": "End",
+    "[number]": "[number]"
 }

From 63ae84a72ed441853bb0c95857afc755eefe8486 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 May 2021 18:23:04 +0100
Subject: [PATCH 027/358] Wire space switch shortcut via dispatcher to prevent
 app load explosion due to skinning

---
 src/dispatcher/actions.ts                     |  5 ++++
 src/dispatcher/payloads/SwitchSpacePayload.ts | 27 +++++++++++++++++++
 src/stores/SpaceStore.tsx                     |  7 +++++
 3 files changed, 39 insertions(+)
 create mode 100644 src/dispatcher/payloads/SwitchSpacePayload.ts

diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index cd32c3743f..79e1edeee9 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -138,4 +138,9 @@ export enum Action {
      * Fired when an upload is cancelled by the user. Should be used with UploadCanceledPayload.
      */
     UploadCanceled = "upload_canceled",
+
+    /**
+     * Switches space. Should be used with SwitchSpacePayload.
+     */
+    SwitchSpace = "switch_space",
 }
diff --git a/src/dispatcher/payloads/SwitchSpacePayload.ts b/src/dispatcher/payloads/SwitchSpacePayload.ts
new file mode 100644
index 0000000000..04eb744334
--- /dev/null
+++ b/src/dispatcher/payloads/SwitchSpacePayload.ts
@@ -0,0 +1,27 @@
+/*
+Copyright 2021 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 { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+export interface SwitchSpacePayload extends ActionPayload {
+    action: Action.SwitchSpace;
+
+    /**
+     * The number of the space to switch to, 1-indexed, 0 is Home.
+     */
+    num: number;
+}
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..0d09357fc1 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -33,6 +33,7 @@ import {EnhancedMap, mapDiff} from "../utils/maps";
 import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
+import {Action} from "../dispatcher/actions";
 
 interface IState {}
 
@@ -565,6 +566,12 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                     this.setActiveSpace(null, false);
                 }
                 break;
+            case Action.SwitchSpace:
+                if (payload.num === 0) {
+                    this.setActiveSpace(null);
+                } else if (this.spacePanelSpaces.length >= payload.num) {
+                    this.setActiveSpace(this.spacePanelSpaces[payload.num - 1]);
+                }
         }
     }
 

From 0b7d3f007aece9a15d53e53f0f953fa203da8457 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 1 Jun 2021 17:30:57 +0100
Subject: [PATCH 028/358] Remove react-beautiful-dnd

---
 package.json                                  |   1 -
 src/components/structures/GroupFilterPanel.js |  32 ++---
 src/components/structures/LoggedInView.tsx    |  65 ++-------
 src/components/views/elements/DNDTagTile.js   |  32 ++---
 .../views/groups/GroupPublicityToggle.js      |   4 +-
 src/components/views/groups/GroupTile.js      |  44 +-----
 test/components/views/rooms/RoomList-test.js  |   5 +-
 yarn.lock                                     | 130 +-----------------
 8 files changed, 36 insertions(+), 277 deletions(-)

diff --git a/package.json b/package.json
index 13047b69cf..270c86ddba 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
     "react": "^16.14.0",
-    "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.14.0",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index 2ff91e4976..f1c28d588a 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -24,7 +24,6 @@ import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import { _t } from '../../languageHandler';
 
-import { Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
@@ -83,7 +82,7 @@ class GroupFilterPanel extends React.Component {
         }
     };
 
-    onMouseDown = e => {
+    onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({action: 'deselect_tags'});
@@ -151,28 +150,15 @@ class GroupFilterPanel extends React.Component {
         return <div className={classes} onClick={this.onClearFilterClick}>
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
-                // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
-                // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6253
-                onMouseDown={this.onMouseDown}
+                onClick={this.onClick}
             >
-                <Droppable
-                    droppableId="tag-panel-droppable"
-                    type="draggable-TagTile"
-                >
-                    { (provided, snapshot) => (
-                        <div
-                            className="mx_GroupFilterPanel_tagTileContainer"
-                            ref={provided.innerRef}
-                        >
-                            { this.renderGlobalIcon() }
-                            { tags }
-                            <div>
-                                {createButton}
-                            </div>
-                            { provided.placeholder }
-                        </div>
-                    ) }
-                </Droppable>
+                <div className="mx_GroupFilterPanel_tagTileContainer">
+                    { this.renderGlobalIcon() }
+                    { tags }
+                    <div>
+                        { createButton }
+                    </div>
+                </div>
             </AutoHideScrollbar>
         </div>;
     }
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index ad5c759f0d..f5df99d8c9 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -19,7 +19,6 @@ limitations under the License.
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { DragDropContext } from 'react-beautiful-dnd';
 
 import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
@@ -569,50 +568,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
     };
 
-    _onDragEnd = (result) => {
-        // Dragged to an invalid destination, not onto a droppable
-        if (!result.destination) {
-            return;
-        }
-
-        const dest = result.destination.droppableId;
-
-        if (dest === 'tag-panel-droppable') {
-            // Could be "GroupTile +groupId:domain"
-            const draggableId = result.draggableId.split(' ').pop();
-
-            // Dispatch synchronously so that the GroupFilterPanel receives an
-            // optimistic update from GroupFilterOrderStore before the previous
-            // state is shown.
-            dis.dispatch(TagOrderActions.moveTag(
-                this._matrixClient,
-                draggableId,
-                result.destination.index,
-            ), true);
-        } else if (dest.startsWith('room-sub-list-droppable_')) {
-            this._onRoomTileEndDrag(result);
-        }
-    };
-
-    _onRoomTileEndDrag = (result) => {
-        let newTag = result.destination.droppableId.split('_')[1];
-        let prevTag = result.source.droppableId.split('_')[1];
-        if (newTag === 'undefined') newTag = undefined;
-        if (prevTag === 'undefined') prevTag = undefined;
-
-        const roomId = result.draggableId.split('_')[1];
-
-        const oldIndex = result.source.index;
-        const newIndex = result.destination.index;
-
-        dis.dispatch(RoomListActions.tagRoom(
-            this._matrixClient,
-            this._matrixClient.getRoom(roomId),
-            prevTag, newTag,
-            oldIndex, newIndex,
-        ), true);
-    };
-
     render() {
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -679,17 +634,15 @@ class LoggedInView extends React.Component<IProps, IState> {
                     aria-hidden={this.props.hideToSRUsers}
                 >
                     <ToastContainer />
-                    <DragDropContext onDragEnd={this._onDragEnd}>
-                        <div ref={this._resizeContainer} className={bodyClasses}>
-                            { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
-                            <LeftPanel
-                                isMinimized={this.props.collapseLhs || false}
-                                resizeNotifier={this.props.resizeNotifier}
-                            />
-                            <ResizeHandle />
-                            { pageElement }
-                        </div>
-                    </DragDropContext>
+                    <div ref={this._resizeContainer} className={bodyClasses}>
+                        { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                        <LeftPanel
+                            isMinimized={this.props.collapseLhs || false}
+                            resizeNotifier={this.props.resizeNotifier}
+                        />
+                        <ResizeHandle />
+                        { pageElement }
+                    </div>
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />
diff --git a/src/components/views/elements/DNDTagTile.js b/src/components/views/elements/DNDTagTile.js
index 67572d4508..eaaa0f183b 100644
--- a/src/components/views/elements/DNDTagTile.js
+++ b/src/components/views/elements/DNDTagTile.js
@@ -18,7 +18,6 @@ limitations under the License.
 import TagTile from './TagTile';
 
 import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
 import * as sdk from '../../../index';
 
@@ -35,28 +34,13 @@ export default function DNDTagTile(props) {
             </ContextMenu>
         );
     }
-    return <div>
-        <Draggable
-            key={props.tag}
-            draggableId={props.tag}
-            index={props.index}
-            type="draggable-TagTile"
-        >
-            {(provided, snapshot) => (
-                <div
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
-                >
-                    <TagTile
-                        {...props}
-                        contextMenuButtonRef={handle}
-                        menuDisplayed={menuDisplayed}
-                        openMenu={openMenu}
-                    />
-                </div>
-            )}
-        </Draggable>
+    return <>
+        <TagTile
+            {...props}
+            contextMenuButtonRef={handle}
+            menuDisplayed={menuDisplayed}
+            openMenu={openMenu}
+        />
         {contextMenu}
-    </div>;
+    </>;
 }
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index c06d827550..6bef141cb8 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -66,9 +66,7 @@ export default class GroupPublicityToggle extends React.Component {
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         return <div className="mx_GroupPublicity_toggle">
-            <GroupTile groupId={this.props.groupId} showDescription={false}
-                avatarHeight={40} draggable={false}
-            />
+            <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
             <ToggleSwitch checked={this.state.isGroupPublicised}
                 disabled={!this.state.ready || this.state.busy}
                 onChange={this._onPublicityToggle} />
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index 42a977fb79..ce42662462 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import FlairStore from '../../../stores/FlairStore';
@@ -24,8 +23,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
 
-function nop() {}
-
 @replaceableComponent("views.groups.GroupTile")
 class GroupTile extends React.Component {
     static propTypes = {
@@ -34,7 +31,6 @@ class GroupTile extends React.Component {
         showDescription: PropTypes.bool,
         // Height of the group avatar in pixels
         avatarHeight: PropTypes.number,
-        draggable: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -42,7 +38,6 @@ class GroupTile extends React.Component {
     static defaultProps = {
         showDescription: true,
         avatarHeight: 50,
-        draggable: true,
     };
 
     state = {
@@ -57,7 +52,7 @@ class GroupTile extends React.Component {
         });
     }
 
-    onMouseDown = e => {
+    onClick = e => {
         e.preventDefault();
         dis.dispatch({
             action: 'view_group',
@@ -78,7 +73,7 @@ class GroupTile extends React.Component {
             ? mediaFromMxc(profile.avatarUrl).getSquareThumbnailHttp(avatarHeight)
             : null;
 
-        let avatarElement = (
+        const avatarElement = (
             <div className="mx_GroupTile_avatar">
                 <BaseAvatar
                     name={name}
@@ -88,41 +83,8 @@ class GroupTile extends React.Component {
                     height={avatarHeight} />
             </div>
         );
-        if (this.props.draggable) {
-            const avatarClone = avatarElement;
-            avatarElement = (
-                <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
-                    { (droppableProvided, droppableSnapshot) => (
-                        <div ref={droppableProvided.innerRef}>
-                            <Draggable
-                                key={"GroupTile " + this.props.groupId}
-                                draggableId={"GroupTile " + this.props.groupId}
-                                index={this.props.groupId}
-                                type="draggable-TagTile"
-                            >
-                                { (provided, snapshot) => (
-                                    <div>
-                                        <div
-                                            ref={provided.innerRef}
-                                            {...provided.draggableProps}
-                                            {...provided.dragHandleProps}
-                                        >
-                                            {avatarClone}
-                                        </div>
-                                        { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
-                                        { provided.placeholder ? avatarClone : <div /> }
-                                    </div>
-                                ) }
-                            </Draggable>
-                        </div>
-                    ) }
-                </Droppable>
-            );
-        }
 
-        // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
-        // instead of onClick. Otherwise we experience https://github.com/vector-im/element-web/issues/6156
-        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
+        return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
             { avatarElement }
             <div className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
diff --git a/test/components/views/rooms/RoomList-test.js b/test/components/views/rooms/RoomList-test.js
index bfb8e1afd4..6aad6a90fd 100644
--- a/test/components/views/rooms/RoomList-test.js
+++ b/test/components/views/rooms/RoomList-test.js
@@ -6,7 +6,6 @@ import * as TestUtils from '../../../test-utils';
 
 import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
 import sdk from '../../../skinned-sdk';
-import { DragDropContext } from 'react-beautiful-dnd';
 
 import dis from '../../../../src/dispatcher/dispatcher';
 import DMRoomMap from '../../../../src/utils/DMRoomMap';
@@ -68,9 +67,7 @@ describe('RoomList', () => {
         const RoomList = sdk.getComponent('views.rooms.RoomList');
         const WrappedRoomList = TestUtils.wrapInMatrixClientContext(RoomList);
         root = ReactDOM.render(
-            <DragDropContext>
-                <WrappedRoomList searchFilter="" onResize={() => {}} />
-            </DragDropContext>,
+            <WrappedRoomList searchFilter="" onResize={() => {}} />,
             parentDiv,
         );
         ReactTestUtils.findRenderedComponentWithType(root, RoomList);
diff --git a/yarn.lock b/yarn.lock
index 0ff235a660..2c84237730 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1017,7 +1017,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -2114,14 +2114,6 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -2645,11 +2637,6 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4215,13 +4202,6 @@ highlight.js@^10.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
 
-hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -4430,13 +4410,6 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -5556,11 +5529,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.2.1:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
-  integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
-
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -5581,7 +5549,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5749,11 +5717,6 @@ mdurl@~1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
-memoize-one@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
-  integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
-
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -6374,11 +6337,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-performance-now@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
-  integrity sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6597,7 +6555,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6674,12 +6632,7 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-raf-schd@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.2.tgz#ec622b5167f2912089f054dc03ebd5bcf33c8f62"
-  integrity sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g==
-
-raf@^3.1.0, raf@^3.4.1:
+raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -6706,22 +6659,6 @@ re-resizable@^6.9.0:
   dependencies:
     fast-memoize "^2.5.1"
 
-react-beautiful-dnd@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-4.0.1.tgz#3b0a49bf6be75af351176c904f012611dd292b81"
-  integrity sha512-d73RMu4QOFCyjUELLWFyY/EuclnfqulI9pECx+2gIuJvV0ycf1uR88o+1x0RSB9ILD70inHMzCBKNkWVbbt+vA==
-  dependencies:
-    babel-runtime "^6.26.0"
-    invariant "^2.2.2"
-    memoize-one "^3.0.1"
-    prop-types "^15.6.0"
-    raf-schd "^2.1.0"
-    react-motion "^0.5.2"
-    react-redux "^5.0.6"
-    redux "^3.7.2"
-    redux-thunk "^2.2.0"
-    reselect "^3.0.1"
-
 react-clientside-effect@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.3.tgz#95c95f520addfb71743608b990bfe01eb002012b"
@@ -6751,7 +6688,7 @@ react-focus-lock@^2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6761,33 +6698,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-lifecycles-compat@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-motion@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
-  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
-  dependencies:
-    performance-now "^0.2.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
-react-redux@^5.0.6:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
-  integrity sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    loose-envify "^1.1.0"
-    prop-types "^15.6.1"
-    react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
-
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -6908,21 +6818,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
-  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
-
-redux@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
-  dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
-
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -6940,11 +6835,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -7102,11 +6992,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-reselect@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
-  integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
-
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -7813,11 +7698,6 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-symbol-observable@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From bc3c759feb2d3f062d0dbc9489e5741fa7d8af13 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 11:33:25 +0100
Subject: [PATCH 029/358] Add temporary mechanism for managing communities
 without dnd

---
 .../context_menus/_TagTileContextMenu.scss    |  9 ++++
 src/components/structures/MyGroups.js         |  3 +-
 .../views/context_menus/TagTileContextMenu.js | 49 ++++++++++++++-----
 src/components/views/elements/DNDTagTile.js   |  2 +-
 src/components/views/groups/GroupTile.js      | 23 +++++++++
 src/i18n/strings/en_EN.json                   |  4 +-
 6 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index 8929c8906e..d707f4ce7c 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -38,6 +38,15 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/view-community.svg');
 }
 
+.mx_TagTileContextMenu_moveUp::before {
+    transform: rotate(180deg);
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
+.mx_TagTileContextMenu_moveDown::before {
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
 .mx_TagTileContextMenu_hideCommunity::before {
     mask-image: url('$(res)/img/element-icons/hide.svg');
 }
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 1fab6c4348..d0a2fbff41 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -82,8 +82,7 @@ export default class MyGroups extends React.Component {
                         </p>
                         <p>
                             { _t(
-                                "To set up a filter, drag a community avatar over to the filter panel on " +
-                                "the far left hand side of the screen. You can click on an avatar in the " +
+                                "You can click on an avatar in the " +
                                 "filter panel at any time to see only the rooms and people associated " +
                                 "with that community.",
                             ) }
diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index 8dea62690c..4e381643ba 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -23,45 +23,70 @@ import TagOrderActions from '../../../actions/TagOrderActions';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.context_menus.TagTileContextMenu")
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
         tag: PropTypes.string.isRequired,
+        index: PropTypes.number.isRequired,
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func.isRequired,
     };
 
     static contextType = MatrixClientContext;
 
-    constructor() {
-        super();
-
-        this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
-        this._onRemoveClick = this._onRemoveClick.bind(this);
-    }
-
-    _onViewCommunityClick() {
+    _onViewCommunityClick = () => {
         dis.dispatch({
             action: 'view_group',
             group_id: this.props.tag,
         });
         this.props.onFinished();
-    }
+    };
 
-    _onRemoveClick() {
+    _onRemoveClick = () => {
         dis.dispatch(TagOrderActions.removeTag(this.context, this.props.tag));
         this.props.onFinished();
-    }
+    };
+
+    _onMoveUp = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index - 1));
+        this.props.onFinished();
+    };
+
+    _onMoveDown = () => {
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index + 1));
+        this.props.onFinished();
+    };
 
     render() {
+        let moveUp;
+        let moveDown;
+        if (this.props.index > 0) {
+            moveUp = (
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_moveUp" onClick={this._onMoveUp}>
+                    { _t("Move up") }
+                </MenuItem>
+            );
+        }
+        if (this.props.index < (GroupFilterOrderStore.getOrderedTags() || []).length - 1) {
+            moveDown = (
+                <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_moveDown" onClick={this._onMoveDown}>
+                    { _t("Move down") }
+                </MenuItem>
+            );
+        }
+
         return <div>
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
             </MenuItem>
+            { (moveUp || moveDown) ? <hr className="mx_TagTileContextMenu_separator" role="separator" /> : null }
+            { moveUp }
+            { moveDown }
             <hr className="mx_TagTileContextMenu_separator" role="separator" />
             <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
-                { _t('Hide') }
+                { _t("Unpin") }
             </MenuItem>
         </div>;
     }
diff --git a/src/components/views/elements/DNDTagTile.js b/src/components/views/elements/DNDTagTile.js
index eaaa0f183b..2e88d37882 100644
--- a/src/components/views/elements/DNDTagTile.js
+++ b/src/components/views/elements/DNDTagTile.js
@@ -30,7 +30,7 @@ export default function DNDTagTile(props) {
         const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
         contextMenu = (
             <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
-                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} index={props.index} />
             </ContextMenu>
         );
     }
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index ce42662462..dd8366bbe0 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -22,6 +22,9 @@ import FlairStore from '../../../stores/FlairStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import {mediaFromMxc} from "../../../customisations/Media";
+import { _t } from "../../../languageHandler";
+import TagOrderActions from "../../../actions/TagOrderActions";
+import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.groups.GroupTile")
 class GroupTile extends React.Component {
@@ -60,6 +63,18 @@ class GroupTile extends React.Component {
         });
     };
 
+    onPinClick = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch(TagOrderActions.moveTag(this.context, this.props.groupId, 0));
+    };
+
+    onUnpinClick = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch(TagOrderActions.removeTag(this.context, this.props.groupId));
+    };
+
     render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -90,6 +105,14 @@ class GroupTile extends React.Component {
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }
                 <div className="mx_GroupTile_groupId">{ this.props.groupId }</div>
+                { !(GroupFilterOrderStore.getOrderedTags() || []).includes(this.props.groupId)
+                    ? <AccessibleButton kind="link" onClick={this.onPinClick}>
+                        { _t("Pin") }
+                    </AccessibleButton>
+                    : <AccessibleButton kind="link" onClick={this.onUnpinClick}>
+                        { _t("Unpin") }
+                    </AccessibleButton>
+                }
             </div>
         </AccessibleButton>;
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3d6fcb8643..85647a17e5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2477,6 +2477,8 @@
     "Update status": "Update status",
     "Set status": "Set status",
     "Set a new status...": "Set a new status...",
+    "Move up": "Move up",
+    "Move down": "Move down",
     "View Community": "View Community",
     "Unable to start audio streaming.": "Unable to start audio streaming.",
     "Failed to start livestream": "Failed to start livestream",
@@ -2623,7 +2625,7 @@
     "%(count)s messages deleted.|one": "%(count)s message deleted.",
     "Your Communities": "Your Communities",
     "Did you know: you can use communities to filter your %(brand)s experience!": "Did you know: you can use communities to filter your %(brand)s experience!",
-    "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
+    "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",

From 35948374e91d4cf6e3110de4218d043be9ff4db0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 11:56:49 +0100
Subject: [PATCH 030/358] remove unused imports

---
 src/components/structures/LoggedInView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index f5df99d8c9..388616c55e 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -29,8 +29,6 @@ import dis from '../../dispatcher/dispatcher';
 import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
-import TagOrderActions from '../../actions/TagOrderActions';
-import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
 import {Resizer, CollapseDistributor} from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";

From 079a5c10ad8191d6d3c357400c948253b0738997 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Jun 2021 16:43:38 +0100
Subject: [PATCH 031/358] Respect space ordering field in m.tag for top level
 spaces

---
 .../structures/SpaceRoomDirectory.tsx         |  4 +--
 src/stores/SpaceStore.tsx                     | 33 ++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 8d59fe6c68..2b4fb24c1b 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -39,7 +39,7 @@ import {mediaFromMxc} from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import {useStateToggle} from "../../hooks/useStateToggle";
-import {getOrder} from "../../stores/SpaceStore";
+import {getChildOrder} from "../../stores/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import {linkifyElement} from "../../HtmlUtils";
 
@@ -286,7 +286,7 @@ export const HierarchyLevel = ({
     const children = Array.from(relations.get(spaceId)?.values() || []);
     const sortedChildren = sortBy(children, ev => {
         // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
-        return getOrder(ev.content.order, null, ev.state_key);
+        return getChildOrder(ev.content.order, null, ev.state_key);
     });
     const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
         const roomId = ev.state_key;
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..1333fc5d37 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -33,6 +33,7 @@ import {EnhancedMap, mapDiff} from "../utils/maps";
 import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
+import { arrayHasOrderChange } from "../utils/arrays";
 
 interface IState {}
 
@@ -60,8 +61,16 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
+const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
+
+const getSpaceTagOrdering = (space: Room): number | undefined => {
+    return space?.getAccountData(EventType.Tag)?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+};
+
+const sortRootSpaces = (spaces: Room[]): Room[] => sortBy(spaces, [getSpaceTagOrdering, "roomId"]);
+
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
-export const getOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
+export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
     let validatedOrder: string = null;
 
     if (typeof order === "string" && Array.from(order).every((c: string) => {
@@ -214,7 +223,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             const roomId = ev.getStateKey();
             const childRoom = this.matrixClient?.getRoom(roomId);
             const createTs = childRoom?.currentState.getStateEvents(EventType.RoomCreate, "")?.getTs();
-            return getOrder(ev.getContent().order, createTs, roomId);
+            return getChildOrder(ev.getContent().order, createTs, roomId);
         }).map(ev => {
             return this.matrixClient.getRoom(ev.getStateKey());
         }).filter(room => {
@@ -326,7 +335,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         //     rootSpaces.push(space);
         // });
 
-        this.rootSpaces = rootSpaces;
+        this.rootSpaces = sortRootSpaces(rootSpaces);
         this.parentMap = backrefs;
 
         // if the currently selected space no longer exists, remove its selection
@@ -338,7 +347,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
 
         // build initial state of invited spaces as we would have missed the emitted events about the room at launch
-        this._invitedSpaces = new Set(invitedSpaces);
+        this._invitedSpaces = new Set(sortRootSpaces(invitedSpaces));
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
     }, 100, {trailing: true, leading: true});
 
@@ -472,6 +481,20 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     };
 
+    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
+        if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
+
+        const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        if (order !== lastOrder) {
+            const rootSpaces = sortRootSpaces(this.rootSpaces);
+            if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
+                this.rootSpaces = rootSpaces;
+                this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
+            }
+        }
+    };
+
     private onRoomState = (ev: MatrixEvent) => {
         const room = this.matrixClient.getRoom(ev.getRoomId());
         if (!room) return;
@@ -516,6 +539,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (this.matrixClient) {
             this.matrixClient.removeListener("Room", this.onRoom);
             this.matrixClient.removeListener("Room.myMembership", this.onRoom);
+            this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
             this.matrixClient.removeListener("RoomState.events", this.onRoomState);
         }
         await this.reset();
@@ -525,6 +549,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (!SettingsStore.getValue("feature_spaces")) return;
         this.matrixClient.on("Room", this.onRoom);
         this.matrixClient.on("Room.myMembership", this.onRoom);
+        this.matrixClient.on("Room.accountData", this.onRoomAccountData);
         this.matrixClient.on("RoomState.events", this.onRoomState);
 
         await this.onSpaceUpdate(); // trigger an initial update

From 3f12b7280d801ac505caec71d2a2c095ab68d3c9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:31:06 +0100
Subject: [PATCH 032/358] Make AutoHideScrollbar pass through all unknown props

---
 .../structures/AutoHideScrollbar.tsx           | 18 +++++++++++-------
 .../structures/IndicatorScrollbar.js           | 11 +++++++----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index 66f998b616..e5fa124fed 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, {HTMLAttributes} from "react";
 
-interface IProps {
+interface IProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     onScroll?: () => void;
     onWheel?: () => void;
@@ -52,14 +52,18 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
     }
 
     public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;
+
         return (<div
+            {...otherProps}
             ref={this.containerRef}
-            style={this.props.style}
-            className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
-            onWheel={this.props.onWheel}
-            tabIndex={this.props.tabIndex}
+            style={style}
+            className={["mx_AutoHideScrollbar", className].join(" ")}
+            onWheel={onWheel}
+            tabIndex={tabIndex}
         >
-            { this.props.children }
+            { children }
         </div>);
     }
 }
diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index 51a3b287f0..25dcaeed39 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -185,21 +185,24 @@ export default class IndicatorScrollbar extends React.Component {
     };
 
     render() {
+        // eslint-disable-next-line no-unused-vars
+        const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
+
         const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
         const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
-        const leftOverflowIndicator = this.props.trackHorizontalOverflow
+        const leftOverflowIndicator = trackHorizontalOverflow
             ? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
-        const rightOverflowIndicator = this.props.trackHorizontalOverflow
+        const rightOverflowIndicator = trackHorizontalOverflow
             ? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
 
         return (<AutoHideScrollbar
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
             onWheel={this.onMouseWheel}
-            {...this.props}
+            {...otherProps}
         >
             { leftOverflowIndicator }
-            { this.props.children }
+            { children }
             { rightOverflowIndicator }
         </AutoHideScrollbar>);
     }

From e334ce81920723832c9260b0f009df88805e22a1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:32:36 +0100
Subject: [PATCH 033/358] First cut of space panel drag-and-drop ordering

---
 package.json                                  |   2 +
 res/css/structures/_SpacePanel.scss           |   7 +-
 src/components/views/spaces/SpacePanel.tsx    | 136 +++++++++++-------
 .../views/spaces/SpaceTreeLevel.tsx           |  27 ++--
 src/stores/SpaceStore.tsx                     |  71 +++++++--
 yarn.lock                                     | 100 ++++++++++++-
 6 files changed, 263 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 270c86ddba..2d2506e1df 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
     "react": "^16.14.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
@@ -135,6 +136,7 @@
     "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
     "@types/react": "^16.9",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^16.9.10",
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index c433ccf275..e64057d16c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -31,7 +31,6 @@ $activeBorderColor: $secondary-fg-color;
     // Create another flexbox so the Panel fills the container
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
@@ -69,6 +68,12 @@ $activeBorderColor: $secondary-fg-color;
         cursor: pointer;
     }
 
+    .mx_SpaceItem_dragging {
+        .mx_SpaceButton_toggleCollapse {
+            visibility: hidden;
+        }
+    }
+
     .mx_SpaceTreeLevel {
         display: flex;
         flex-direction: column;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index eb63b21f0e..27f097e9d4 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React, { useEffect, useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import {_t} from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -204,58 +205,89 @@ const SpacePanel = () => {
     };
 
     const activeSpaces = activeSpace ? [activeSpace] : [];
-    const expandCollapseButtonTitle = isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel");
-    // TODO drag and drop for re-arranging order
-    return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
-        {({onKeyDownHandler}) => (
-            <ul
-                className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
-                onKeyDown={onKeyDownHandler}
-            >
-                <AutoHideScrollbar className="mx_SpacePanel_spaceTreeWrapper">
-                    <div className="mx_SpaceTreeLevel">
-                        <SpaceButton
-                            className="mx_SpaceButton_home"
-                            onClick={() => SpaceStore.instance.setActiveSpace(null)}
-                            selected={!activeSpace}
-                            tooltip={_t("All rooms")}
-                            notificationState={RoomNotificationStateStore.instance.globalState}
-                            isNarrow={isPanelCollapsed}
+    return (
+        <DragDropContext onDragEnd={result => {
+            if (!result.destination) return; // dropped outside the list
+            SpaceStore.instance.moveRootSpace(result.source.index, result.destination.index);
+        }}>
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+                {({onKeyDownHandler}) => (
+                    <ul
+                        className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
+                        onKeyDown={onKeyDownHandler}
+                    >
+                        <Droppable droppableId="top-level-spaces">
+                            {(provided, snapshot) => (
+                                <AutoHideScrollbar
+                                    {...provided.droppableProps}
+                                    wrappedRef={provided.innerRef}
+                                    className="mx_SpacePanel_spaceTreeWrapper"
+                                    style={snapshot.isDraggingOver ? {
+                                        pointerEvents: "none",
+                                    } : undefined}
+                                >
+                                    <div className="mx_SpaceTreeLevel">
+                                        <SpaceButton
+                                            className="mx_SpaceButton_home"
+                                            onClick={() => SpaceStore.instance.setActiveSpace(null)}
+                                            selected={!activeSpace}
+                                            tooltip={_t("All rooms")}
+                                            notificationState={RoomNotificationStateStore.instance.globalState}
+                                            isNarrow={isPanelCollapsed}
+                                        />
+                                        { invites.map(s => (
+                                            <SpaceItem
+                                                key={s.roomId}
+                                                space={s}
+                                                activeSpaces={activeSpaces}
+                                                isPanelCollapsed={isPanelCollapsed}
+                                                onExpand={() => setPanelCollapsed(false)}
+                                            />
+                                        )) }
+                                        { spaces.map((s, i) => (
+                                            <Draggable key={s.roomId} draggableId={s.roomId} index={i}>
+                                                {(provided, snapshot) => (
+                                                    <SpaceItem
+                                                        {...provided.draggableProps}
+                                                        {...provided.dragHandleProps}
+                                                        key={s.roomId}
+                                                        innerRef={provided.innerRef}
+                                                        className={snapshot.isDragging
+                                                            ? "mx_SpaceItem_dragging"
+                                                            : undefined}
+                                                        space={s}
+                                                        activeSpaces={activeSpaces}
+                                                        isPanelCollapsed={isPanelCollapsed}
+                                                        onExpand={() => setPanelCollapsed(false)}
+                                                    />
+                                                )}
+                                            </Draggable>
+                                        )) }
+                                        { provided.placeholder }
+                                    </div>
+                                    <SpaceButton
+                                        className={newClasses}
+                                        tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
+                                        onClick={menuDisplayed ? closeMenu : () => {
+                                            if (!isPanelCollapsed) setPanelCollapsed(true);
+                                            openMenu();
+                                        }}
+                                        isNarrow={isPanelCollapsed}
+                                    />
+                                </AutoHideScrollbar>
+                            )}
+                        </Droppable>
+                        <AccessibleTooltipButton
+                            className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
+                            onClick={() => setPanelCollapsed(!isPanelCollapsed)}
+                            title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")}
                         />
-                        { invites.map(s => <SpaceItem
-                            key={s.roomId}
-                            space={s}
-                            activeSpaces={activeSpaces}
-                            isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => setPanelCollapsed(false)}
-                        />) }
-                        { spaces.map(s => <SpaceItem
-                            key={s.roomId}
-                            space={s}
-                            activeSpaces={activeSpaces}
-                            isPanelCollapsed={isPanelCollapsed}
-                            onExpand={() => setPanelCollapsed(false)}
-                        />) }
-                    </div>
-                    <SpaceButton
-                        className={newClasses}
-                        tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
-                        onClick={menuDisplayed ? closeMenu : () => {
-                            if (!isPanelCollapsed) setPanelCollapsed(true);
-                            openMenu();
-                        }}
-                        isNarrow={isPanelCollapsed}
-                    />
-                </AutoHideScrollbar>
-                <AccessibleTooltipButton
-                    className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
-                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
-                    title={expandCollapseButtonTitle}
-                />
-                { contextMenu }
-            </ul>
-        )}
-    </RovingTabIndexProvider>
+                        { contextMenu }
+                    </ul>
+                )}
+            </RovingTabIndexProvider>
+        </DragDropContext>
+    );
 };
 
 export default SpacePanel;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index f34baf256b..7ac863b239 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, {InputHTMLAttributes, LegacyRef} from "react";
 import classNames from "classnames";
 import {Room} from "matrix-js-sdk/src/models/room";
 
@@ -49,13 +49,14 @@ import {EventType} from "matrix-js-sdk/src/@types/event";
 import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
 import {NotificationColor} from "../../../stores/notifications/NotificationColor";
 
-interface IItemProps {
+interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     space?: Room;
     activeSpaces: Room[];
     isNested?: boolean;
     isPanelCollapsed?: boolean;
     onExpand?: Function;
     parents?: Set<string>;
+    innerRef?: LegacyRef<HTMLLIElement>;
 }
 
 interface IItemState {
@@ -300,18 +301,18 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     }
 
     render() {
-        const {space, activeSpaces, isNested} = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef,
+            ...otherProps } = this.props;
 
-        const forceCollapsed = this.props.isPanelCollapsed;
-        const isNarrow = this.props.isPanelCollapsed;
-        const collapsed = this.state.collapsed || forceCollapsed;
+        const collapsed = this.state.collapsed || isPanelCollapsed;
 
         const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
-            .filter(s => !this.props.parents?.has(s.roomId));
+            .filter(s => !parents?.has(s.roomId));
         const isActive = activeSpaces.includes(space);
-        const itemClasses = classNames({
+        const itemClasses = classNames(this.props.className, {
             "mx_SpaceItem": true,
-            "mx_SpaceItem_narrow": isNarrow,
+            "mx_SpaceItem_narrow": isPanelCollapsed,
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });
@@ -320,7 +321,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const classes = classNames("mx_SpaceButton", {
             mx_SpaceButton_active: isActive,
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
-            mx_SpaceButton_narrow: isNarrow,
+            mx_SpaceButton_narrow: isPanelCollapsed,
             mx_SpaceButton_invite: isInvite,
         });
         const notificationState = isInvite
@@ -333,7 +334,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 spaces={childSpaces}
                 activeSpaces={activeSpaces}
                 isNested={true}
-                parents={new Set(this.props.parents).add(this.props.space.roomId)}
+                parents={new Set(parents).add(space.roomId)}
             />;
         }
 
@@ -353,7 +354,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             /> : null;
 
         let button;
-        if (isNarrow) {
+        if (isPanelCollapsed) {
             button = (
                 <RovingAccessibleTooltipButton
                     className={classes}
@@ -391,7 +392,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         }
 
         return (
-            <li className={itemClasses}>
+            <li {...otherProps} className={itemClasses} ref={innerRef}>
                 { button }
                 { childItems }
             </li>
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 1333fc5d37..9ef961ce2d 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -63,12 +63,6 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
 
 const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
 
-const getSpaceTagOrdering = (space: Room): number | undefined => {
-    return space?.getAccountData(EventType.Tag)?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
-};
-
-const sortRootSpaces = (spaces: Room[]): Room[] => sortBy(spaces, [getSpaceTagOrdering, "roomId"]);
-
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
 export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
     let validatedOrder: string = null;
@@ -104,6 +98,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     private _activeSpace?: Room = null;
     private _suggestedRooms: ISuggestedRoom[] = [];
     private _invitedSpaces = new Set<Room>();
+    private spaceOrderLocalEchoMap = new Map<string, number>();
 
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
@@ -335,7 +330,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         //     rootSpaces.push(space);
         // });
 
-        this.rootSpaces = sortRootSpaces(rootSpaces);
+        this.rootSpaces = this.sortRootSpaces(rootSpaces);
         this.parentMap = backrefs;
 
         // if the currently selected space no longer exists, remove its selection
@@ -347,7 +342,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
 
         // build initial state of invited spaces as we would have missed the emitted events about the room at launch
-        this._invitedSpaces = new Set(sortRootSpaces(invitedSpaces));
+        this._invitedSpaces = new Set(this.sortRootSpaces(invitedSpaces));
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
     }, 100, {trailing: true, leading: true});
 
@@ -484,17 +479,22 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
         if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
 
+        this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
         const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
         const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
         if (order !== lastOrder) {
-            const rootSpaces = sortRootSpaces(this.rootSpaces);
-            if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
-                this.rootSpaces = rootSpaces;
-                this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
-            }
+            this.notifyIfOrderChanged();
         }
     };
 
+    private notifyIfOrderChanged(): void {
+        const rootSpaces = this.sortRootSpaces(this.rootSpaces);
+        if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
+            this.rootSpaces = rootSpaces;
+            this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces);
+        }
+    }
+
     private onRoomState = (ev: MatrixEvent) => {
         const room = this.matrixClient.getRoom(ev.getRoomId());
         if (!room) return;
@@ -624,6 +624,51 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
         childSpaces.forEach(s => this.traverseSpace(s.roomId, fn, includeRooms, newPath));
     }
+
+    private getSpaceTagOrdering = (space: Room): number | undefined => {
+        if (this.spaceOrderLocalEchoMap.has(space.roomId)) return this.spaceOrderLocalEchoMap.get(space.roomId);
+        return space.tags?.[SpaceTagOrderingField]?.order;
+    };
+
+    private sortRootSpaces(spaces: Room[]): Room[] {
+        return sortBy(spaces, [this.getSpaceTagOrdering, "roomId"]);
+    }
+
+    public moveRootSpace(fromIndex: number, toIndex: number): void {
+        if (
+            fromIndex < 0 || toIndex < 0 ||
+            fromIndex > this.rootSpaces.length || toIndex > this.rootSpaces.length ||
+            fromIndex === toIndex
+        ) {
+            return;
+        }
+        const space = this.rootSpaces[fromIndex];
+        const orders = this.rootSpaces.map(this.getSpaceTagOrdering);
+
+        let prevOrder = orders[toIndex - 1];
+        let nextOrder = orders[toIndex]; // accounts for downwards displacement of existing inhabitant of this index
+
+        if (prevOrder === undefined && nextOrder === undefined) {
+            // TODO WHAT A PAIN
+        }
+
+        prevOrder = prevOrder || 0.0;
+        nextOrder = nextOrder || 1.0;
+
+        if (prevOrder !== nextOrder) {
+            const order = prevOrder + ((nextOrder - prevOrder) / 2);
+            this.spaceOrderLocalEchoMap.set(space.roomId, order);
+            this.matrixClient.setRoomAccountData(space.roomId, EventType.Tag, {
+                tags: {
+                    ...space.tags,
+                    [SpaceTagOrderingField]: { order },
+                },
+            });
+            this.notifyIfOrderChanged();
+        } else {
+            // TODO REBUILD
+        }
+    }
 }
 
 export default class SpaceStore {
diff --git a/yarn.lock b/yarn.lock
index 2c84237730..7e24c220e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,6 +1024,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -1504,6 +1511,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1620,6 +1635,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/react-beautiful-dnd@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4"
+  integrity sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.10":
   version "16.9.10"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f"
@@ -1627,6 +1649,16 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -2696,6 +2728,13 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-select@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.2.tgz#8b52b6714ed3a80d8221ec971c543f3b12653286"
@@ -4202,6 +4241,13 @@ highlight.js@^10.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -5717,6 +5763,11 @@ mdurl@~1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -6632,6 +6683,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -6659,6 +6715,19 @@ re-resizable@^6.9.0:
   dependencies:
     fast-memoize "^2.5.1"
 
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
+
 react-clientside-effect@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.3.tgz#95c95f520addfb71743608b990bfe01eb002012b"
@@ -6688,7 +6757,7 @@ react-focus-lock@^2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6698,6 +6767,18 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-redux@^7.2.0:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -6818,6 +6899,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -7765,6 +7853,11 @@ through@^2.3.6:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+tiny-invariant@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tmatch@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
@@ -8070,6 +8163,11 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use-sidecar@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.4.tgz#38398c3723727f9f924bed2343dfa3db6aaaee46"

From dbaa394d65c640581f3ef89f52aba13e4801cc3a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 3 Jun 2021 08:54:30 +0100
Subject: [PATCH 034/358] i18n

---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 85647a17e5..2a5297122f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1018,9 +1018,9 @@
     "You can change these anytime.": "You can change these anytime.",
     "Creating...": "Creating...",
     "Create": "Create",
+    "All rooms": "All rooms",
     "Expand space panel": "Expand space panel",
     "Collapse space panel": "Collapse space panel",
-    "All rooms": "All rooms",
     "Click to copy": "Click to copy",
     "Copied!": "Copied!",
     "Failed to copy": "Failed to copy",

From 43921500d3459896a8a220c870a2b46d49d34303 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Sat, 5 Jun 2021 22:21:10 -0400
Subject: [PATCH 035/358] Revert "Match requested avatar size to displayed
 size"

This reverts commit 44b143c8c3063be7ca2bf24e6cfdb81be9351c75.
---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 6d2ea687de..77db94b5dd 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -61,7 +61,7 @@ interface IState {
     message: string;
 }
 
-const AVATAR_SIZE = 30;
+const AVATAR_SIZE = 32;
 
 @replaceableComponent("views.elements.EventTilePreview")
 export default class EventTilePreview extends React.Component<IProps, IState> {

From b2b95257a8571edde2cf1a7ed110eb1a65652252 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 08:54:41 +0100
Subject: [PATCH 036/358] Convert RoomAliasField to Typescript

---
 src/components/views/elements/Field.tsx       |  7 +-
 .../{RoomAliasField.js => RoomAliasField.tsx} | 75 ++++++++++---------
 src/i18n/strings/en_EN.json                   |  2 +-
 3 files changed, 48 insertions(+), 36 deletions(-)
 rename src/components/views/elements/{RoomAliasField.js => RoomAliasField.tsx} (67%)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 59d9a11596..1373c2df0e 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -29,6 +29,11 @@ function getId() {
     return `${BASE_ID}_${count++}`;
 }
 
+export interface IValidateOpts {
+    focused?: boolean;
+    allowEmpty?: boolean;
+}
+
 interface IProps {
     // The field's ID, which binds the input and label together. Immutable.
     id?: string;
@@ -180,7 +185,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         }
     };
 
-    public async validate({ focused, allowEmpty = true }: {focused?: boolean, allowEmpty?: boolean}) {
+    public async validate({ focused, allowEmpty = true }: IValidateOpts) {
         if (!this.props.onValidate) {
             return;
         }
diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.tsx
similarity index 67%
rename from src/components/views/elements/RoomAliasField.js
rename to src/components/views/elements/RoomAliasField.tsx
index 813dd8b5cc..7eff529c46 100644
--- a/src/components/views/elements/RoomAliasField.js
+++ b/src/components/views/elements/RoomAliasField.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 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.
@@ -13,67 +13,74 @@ 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 React, { createRef } from "react";
+
 import { _t } from '../../../languageHandler';
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import withValidation from './Validation';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Field, { IValidateOpts } from "./Field";
+
+interface IProps {
+    domain: string;
+    value: string;
+    label?: string;
+    placeholder?: string;
+    onChange?(value: string): void;
+}
+
+interface IState {
+    isValid: boolean;
+}
 
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 @replaceableComponent("views.elements.RoomAliasField")
-export default class RoomAliasField extends React.PureComponent {
-    static propTypes = {
-        domain: PropTypes.string.isRequired,
-        onChange: PropTypes.func,
-        value: PropTypes.string.isRequired,
+export default class RoomAliasField extends React.PureComponent<IProps, IState> {
+    private fieldRef = createRef<Field>();
+
+    public state = {
+        isValid: true,
     };
 
-    constructor(props) {
-        super(props);
-        this.state = {isValid: true};
-    }
-
-    _asFullAlias(localpart) {
+    private asFullAlias(localpart: string): string {
         return `#${localpart}:${this.props.domain}`;
     }
 
     render() {
-        const Field = sdk.getComponent('views.elements.Field');
         const poundSign = (<span>#</span>);
         const aliasPostfix = ":" + this.props.domain;
         const domain = (<span title={aliasPostfix}>{aliasPostfix}</span>);
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
             <Field
-                label={_t("Room address")}
+                label={this.props.label || _t("Room address")}
                 className="mx_RoomAliasField"
                 prefixComponent={poundSign}
                 postfixComponent={domain}
-                ref={ref => this._fieldRef = ref}
-                onValidate={this._onValidate}
-                placeholder={_t("e.g. my-room")}
-                onChange={this._onChange}
+                ref={this.fieldRef}
+                onValidate={this.onValidate}
+                placeholder={this.props.placeholder || _t("e.g. my-room")}
+                onChange={this.onChange}
                 value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)}
                 maxLength={maxlength}
             />
         );
     }
 
-    _onChange = (ev) => {
+    private onChange = (ev) => {
         if (this.props.onChange) {
-            this.props.onChange(this._asFullAlias(ev.target.value));
+            this.props.onChange(this.asFullAlias(ev.target.value));
         }
     };
 
-    _onValidate = async (fieldState) => {
-        const result = await this._validationRules(fieldState);
+    private onValidate = async (fieldState) => {
+        const result = await this.validationRules(fieldState);
         this.setState({isValid: result.valid});
         return result;
     };
 
-    _validationRules = withValidation({
+    private validationRules = withValidation({
         rules: [
             {
                 key: "safeLocalpart",
@@ -81,7 +88,7 @@ export default class RoomAliasField extends React.PureComponent {
                     if (!value) {
                         return true;
                     }
-                    const fullAlias = this._asFullAlias(value);
+                    const fullAlias = this.asFullAlias(value);
                     // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
                     return !value.includes("#") && !value.includes(":") && !value.includes(",") &&
                         encodeURI(fullAlias) === fullAlias;
@@ -90,7 +97,7 @@ export default class RoomAliasField extends React.PureComponent {
             }, {
                 key: "required",
                 test: async ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Please provide a room address"),
+                invalid: () => _t("Please provide an address"),
             }, {
                 key: "taken",
                 final: true,
@@ -100,7 +107,7 @@ export default class RoomAliasField extends React.PureComponent {
                     }
                     const client = MatrixClientPeg.get();
                     try {
-                        await client.getRoomIdForAlias(this._asFullAlias(value));
+                        await client.getRoomIdForAlias(this.asFullAlias(value));
                         // we got a room id, so the alias is taken
                         return false;
                     } catch (err) {
@@ -120,11 +127,11 @@ export default class RoomAliasField extends React.PureComponent {
         return this.state.isValid;
     }
 
-    validate(options) {
-        return this._fieldRef.validate(options);
+    validate(options: IValidateOpts) {
+        return this.fieldRef.current?.validate(options);
     }
 
     focus() {
-        this._fieldRef.focus();
+        this.fieldRef.current?.focus();
     }
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9e85ea28c8..02662aa508 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2014,7 +2014,7 @@
     "Room address": "Room address",
     "e.g. my-room": "e.g. my-room",
     "Some characters not allowed": "Some characters not allowed",
-    "Please provide a room address": "Please provide a room address",
+    "Please provide an address": "Please provide an address",
     "This address is available to use": "This address is available to use",
     "This address is already in use": "This address is already in use",
     "Server Options": "Server Options",

From 8c34a8461ee64949b670715cafac5948bedbca57 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 08:57:39 +0100
Subject: [PATCH 037/358] Add way to specify address during public space
 creation

---
 res/css/views/spaces/_SpaceBasicSettings.scss |  2 +-
 .../views/spaces/SpaceCreateMenu.tsx          | 45 +++++++++++++++----
 src/i18n/strings/en_EN.json                   |  2 +
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
index 204ccab2b7..e6e06e7181 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SpaceBasicSettings {
     .mx_Field {
-        margin: 32px 0;
+        margin: 24px 0;
     }
 
     .mx_SpaceBasicSettings_avatarContainer {
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 0ebf511018..a65b53a045 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -33,6 +33,7 @@ import {USER_LABS_TAB} from "../dialogs/UserSettingsDialog";
 import Field from "../elements/Field";
 import withValidation from "../elements/Validation";
 import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import RoomAliasField from "../elements/RoomAliasField";
 
 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
     return (
@@ -58,6 +59,11 @@ const spaceNameValidator = withValidation({
     ],
 });
 
+const nameToAlias = (name: string, domain: string): string => {
+    const localpart = name.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9_-]+/gi, "");
+    return `#${localpart}:${domain}`;
+};
+
 const SpaceCreateMenu = ({ onFinished }) => {
     const cli = useContext(MatrixClientContext);
     const [visibility, setVisibility] = useState<Visibility>(null);
@@ -65,6 +71,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
     const [name, setName] = useState("");
     const spaceNameField = useRef<Field>();
+    const [alias, setAlias] = useState("");
+    const spaceAliasField = useRef<RoomAliasField>();
     const [avatar, setAvatar] = useState<File>(null);
     const [topic, setTopic] = useState<string>("");
 
@@ -80,6 +88,13 @@ const SpaceCreateMenu = ({ onFinished }) => {
             setBusy(false);
             return;
         }
+        // validate the space name alias field but do not require it
+        if (visibility === Visibility.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            setBusy(false);
+            return;
+        }
 
         const initialState: IStateEvent[] = [
             {
@@ -97,12 +112,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
                 content: { url },
             });
         }
-        if (topic) {
-            initialState.push({
-                type: EventType.RoomTopic,
-                content: { topic },
-            });
-        }
 
         try {
             await createRoom({
@@ -110,7 +119,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
                     preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
                     name,
                     creation_content: {
-                        // Based on MSC1840
                         [RoomCreateTypeField]: RoomType.Space,
                     },
                     initial_state: initialState,
@@ -119,6 +127,8 @@ const SpaceCreateMenu = ({ onFinished }) => {
                         events_default: 100,
                         ...Visibility.Public ? { invite: 0 } : {},
                     },
+                    room_alias_name: alias ? alias.substr(1, alias.indexOf(":") - 1) : undefined,
+                    topic,
                 },
                 spinner: false,
                 encryption: false,
@@ -157,6 +167,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
             <SpaceFeedbackPrompt onClick={onFinished} />
         </React.Fragment>;
     } else {
+        const domain = cli.getDomain();
         body = <React.Fragment>
             <AccessibleTooltipButton
                 className="mx_SpaceCreateMenu_back"
@@ -185,12 +196,30 @@ const SpaceCreateMenu = ({ onFinished }) => {
                     label={_t("Name")}
                     autoFocus={true}
                     value={name}
-                    onChange={ev => setName(ev.target.value)}
+                    onChange={ev => {
+                        const newName = ev.target.value;
+                        if (!alias || alias === nameToAlias(name, domain)) {
+                            setAlias(nameToAlias(newName, domain));
+                        }
+                        setName(newName);
+                    }}
                     ref={spaceNameField}
                     onValidate={spaceNameValidator}
                     disabled={busy}
                 />
 
+                { visibility === Visibility.Public
+                    ? <RoomAliasField
+                        ref={spaceAliasField}
+                        onChange={setAlias}
+                        domain={domain}
+                        value={alias}
+                        placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")}
+                        label={_t("Address")}
+                    />
+                    : null
+                }
+
                 <Field
                     name="spaceTopic"
                     element="textarea"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 02662aa508..a744d8e7be 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1016,6 +1016,8 @@
     "Your private space": "Your private space",
     "Add some details to help people recognise it.": "Add some details to help people recognise it.",
     "You can change these anytime.": "You can change these anytime.",
+    "e.g. my-space": "e.g. my-space",
+    "Address": "Address",
     "Creating...": "Creating...",
     "Create": "Create",
     "Expand space panel": "Expand space panel",

From 271f5446371b44dad91e0e60dd76d45ffd98620e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 08:59:57 +0100
Subject: [PATCH 038/358] Stash

---
 src/stores/SpaceStore.tsx | 62 +++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 9ef961ce2d..5e09b617a7 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -61,8 +61,6 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
-const SpaceTagOrderingField = "org.matrix.mscXXXX.space";
-
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
 export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
     let validatedOrder: string = null;
@@ -98,7 +96,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     private _activeSpace?: Room = null;
     private _suggestedRooms: ISuggestedRoom[] = [];
     private _invitedSpaces = new Set<Room>();
-    private spaceOrderLocalEchoMap = new Map<string, number>();
+    private spaceOrderLocalEchoMap = new Map<string, string>();
 
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
@@ -477,11 +475,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     };
 
     private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
-        if (!room.isSpaceRoom() || ev.getType() !== EventType.Tag) return;
+        if (!room.isSpaceRoom() || ev.getType() !== EventType.SpaceOrder) return;
 
         this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
-        const order = ev.getContent()?.tags?.[SpaceTagOrderingField]?.order;
-        const lastOrder = lastEv?.getContent()?.tags?.[SpaceTagOrderingField]?.order;
+        const order = ev.getContent()?.order;
+        const lastOrder = lastEv?.getContent()?.order;
         if (order !== lastOrder) {
             this.notifyIfOrderChanged();
         }
@@ -625,15 +623,21 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         childSpaces.forEach(s => this.traverseSpace(s.roomId, fn, includeRooms, newPath));
     }
 
-    private getSpaceTagOrdering = (space: Room): number | undefined => {
+    private getSpaceTagOrdering = (space: Room): string | undefined => {
         if (this.spaceOrderLocalEchoMap.has(space.roomId)) return this.spaceOrderLocalEchoMap.get(space.roomId);
-        return space.tags?.[SpaceTagOrderingField]?.order;
+        const order = space.getAccountData(EventType.SpaceOrder)?.getContent()?.order;
+        return typeof order === "string" ? order : undefined;
     };
 
     private sortRootSpaces(spaces: Room[]): Room[] {
         return sortBy(spaces, [this.getSpaceTagOrdering, "roomId"]);
     }
 
+    private setRootSpaceOrder(space: Room, order: string): void {
+        this.spaceOrderLocalEchoMap.set(space.roomId, order);
+        this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order });
+    }
+
     public moveRootSpace(fromIndex: number, toIndex: number): void {
         if (
             fromIndex < 0 || toIndex < 0 ||
@@ -645,29 +649,43 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         const space = this.rootSpaces[fromIndex];
         const orders = this.rootSpaces.map(this.getSpaceTagOrdering);
 
-        let prevOrder = orders[toIndex - 1];
-        let nextOrder = orders[toIndex]; // accounts for downwards displacement of existing inhabitant of this index
+        let prevOrder: string;
+        let nextOrder: string;
 
-        if (prevOrder === undefined && nextOrder === undefined) {
-            // TODO WHAT A PAIN
+        if (toIndex > fromIndex) {
+            prevOrder = toIndex >= 0 ? orders[toIndex] : "aaaaa";
+            nextOrder = toIndex <= orders.length ? orders[toIndex + 1] : "zzzzz";
+        } else {
+            // accounts for downwards displacement of existing inhabitant of this index
+            prevOrder = toIndex > 0 ? orders[toIndex - 1] : "aaaaa";
+            nextOrder = toIndex < orders.length ? orders[toIndex] : "zzzzz";
         }
+        console.log("@@ start", {fromIndex, toIndex, orders, prevOrder, nextOrder});
 
-        prevOrder = prevOrder || 0.0;
-        nextOrder = nextOrder || 1.0;
+        if (prevOrder === undefined) {
+            const firstUndefinedIndex = orders.indexOf(undefined);
+            const numUndefined = orders.length - firstUndefinedIndex;
+            const lastOrder = orders[firstUndefinedIndex - 1];
+            console.log("@@ precalc", {firstUndefinedIndex, numUndefined, lastOrder});
+            nextOrder = lastOrder + step;
+            for (let i = firstUndefinedIndex; i < toIndex; i++, nextOrder += step) {
+                console.log("@@ preset", {i, nextOrder});
+                this.setRootSpaceOrder(this.rootSpaces[i], nextOrder);
+            }
+
+            prevOrder = nextOrder;
+            nextOrder += step;
+        }
 
         if (prevOrder !== nextOrder) {
             const order = prevOrder + ((nextOrder - prevOrder) / 2);
-            this.spaceOrderLocalEchoMap.set(space.roomId, order);
-            this.matrixClient.setRoomAccountData(space.roomId, EventType.Tag, {
-                tags: {
-                    ...space.tags,
-                    [SpaceTagOrderingField]: { order },
-                },
-            });
-            this.notifyIfOrderChanged();
+            console.log("@@ set", {prevOrder, nextOrder, order});
+            this.setRootSpaceOrder(space, order);
         } else {
             // TODO REBUILD
         }
+
+        this.notifyIfOrderChanged();
     }
 }
 

From a7eb09af1ebbffd5f700250dc52dd00238e847f1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 15:48:55 +0100
Subject: [PATCH 039/358] Convert EditableItemList & AliasSettings to
 Typescript

---
 ...itableItemList.js => EditableItemList.tsx} | 133 +++++++++--------
 .../{AliasSettings.js => AliasSettings.tsx}   | 134 ++++++++++--------
 2 files changed, 146 insertions(+), 121 deletions(-)
 rename src/components/views/elements/{EditableItemList.js => EditableItemList.tsx} (54%)
 rename src/components/views/room_settings/{AliasSettings.js => AliasSettings.tsx} (78%)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.tsx
similarity index 54%
rename from src/components/views/elements/EditableItemList.js
rename to src/components/views/elements/EditableItemList.tsx
index d8ec5af278..89e2e1b8a0 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2017, 2019 New Vector Ltd.
+Copyright 2017-2021 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.
@@ -14,48 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
+import React from "react";
+
+import { _t } from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-export class EditableItem extends React.Component {
-    static propTypes = {
-        index: PropTypes.number,
-        value: PropTypes.string,
-        onRemove: PropTypes.func,
+interface IItemProps {
+    index?: number;
+    value?: string;
+    onRemove?(index: number): void;
+}
+
+interface IItemState {
+    verifyRemove: boolean;
+}
+
+export class EditableItem extends React.Component<IItemProps, IItemState> {
+    public state = {
+        verifyRemove: false,
     };
 
-    constructor() {
-        super();
-
-        this.state = {
-            verifyRemove: false,
-        };
-    }
-
-    _onRemove = (e) => {
+    private onRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: true});
+        this.setState({ verifyRemove: true });
     };
 
-    _onDontRemove = (e) => {
+    private onDontRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
-    _onActuallyRemove = (e) => {
+    private onActuallyRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onRemove) this.props.onRemove(this.props.index);
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
     render() {
@@ -66,14 +66,14 @@ export class EditableItem extends React.Component {
                         {_t("Are you sure?")}
                     </span>
                     <AccessibleButton
-                        onClick={this._onActuallyRemove}
+                        onClick={this.onActuallyRemove}
                         kind="primary_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
                         {_t("Yes")}
                     </AccessibleButton>
                     <AccessibleButton
-                        onClick={this._onDontRemove}
+                        onClick={this.onDontRemove}
                         kind="danger_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
@@ -85,59 +85,68 @@ export class EditableItem extends React.Component {
 
         return (
             <div className="mx_EditableItem">
-                <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
+                <div onClick={this.onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
                 <span className="mx_EditableItem_item">{this.props.value}</span>
             </div>
         );
     }
 }
 
+interface IProps {
+    id: string;
+    items: string[];
+    itemsLabel?: string;
+    noItemsLabel?: string;
+    placeholder?: string;
+    newItem?: string;
+    canEdit?: boolean;
+    canRemove?: boolean;
+    suggestionsListId?: string;
+    onItemAdded?(item: string): void;
+    onItemRemoved?(index: number): void;
+    onNewItemChanged?(item: string): void;
+}
+
 @replaceableComponent("views.elements.EditableItemList")
-export default class EditableItemList extends React.Component {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(PropTypes.string).isRequired,
-        itemsLabel: PropTypes.string,
-        noItemsLabel: PropTypes.string,
-        placeholder: PropTypes.string,
-        newItem: PropTypes.string,
-
-        onItemAdded: PropTypes.func,
-        onItemRemoved: PropTypes.func,
-        onNewItemChanged: PropTypes.func,
-
-        canEdit: PropTypes.bool,
-        canRemove: PropTypes.bool,
-    };
-
-    _onItemAdded = (e) => {
+export default class EditableItemList<P = {}> extends React.PureComponent<IProps & P> {
+    protected onItemAdded = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
     };
 
-    _onItemRemoved = (index) => {
+    protected onItemRemoved = (index) => {
         if (this.props.onItemRemoved) this.props.onItemRemoved(index);
     };
 
-    _onNewItemChanged = (e) => {
+    protected onNewItemChanged = (e) => {
         if (this.props.onNewItemChanged) this.props.onNewItemChanged(e.target.value);
     };
 
-    _renderNewItemField() {
+    protected renderNewItemField() {
         return (
             <form
-                onSubmit={this._onItemAdded}
+                onSubmit={this.onItemAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
-                <Field label={this.props.placeholder} type="text"
-                    autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
-                    list={this.props.suggestionsListId} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
-                    {_t("Add")}
+                <Field
+                    label={this.props.placeholder}
+                    type="text"
+                    autoComplete="off"
+                    value={this.props.newItem || ""}
+                    onChange={this.onNewItemChanged}
+                    list={this.props.suggestionsListId}
+                />
+                <AccessibleButton
+                    onClick={this.onItemAdded}
+                    kind="primary"
+                    type="submit"
+                    disabled={!this.props.newItem}
+                >
+                    { _t("Add") }
                 </AccessibleButton>
             </form>
         );
@@ -153,19 +162,21 @@ export default class EditableItemList extends React.Component {
                 key={item}
                 index={index}
                 value={item}
-                onRemove={this._onItemRemoved}
+                onRemove={this.onItemRemoved}
             />;
         });
 
         const editableItemsSection = this.props.canRemove ? editableItems : <ul>{editableItems}</ul>;
         const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
 
-        return (<div className="mx_EditableItemList">
-            <div className="mx_EditableItemList_label">
-                { label }
+        return (
+            <div className="mx_EditableItemList">
+                <div className="mx_EditableItemList_label">
+                    { label }
+                </div>
+                { editableItemsSection }
+                { this.props.canEdit ? this.renderNewItemField() : <div /> }
             </div>
-            { editableItemsSection }
-            { this.props.canEdit ? this._renderNewItemField() : <div /> }
-        </div>);
+        );
     }
 }
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.tsx
similarity index 78%
rename from src/components/views/room_settings/AliasSettings.js
rename to src/components/views/room_settings/AliasSettings.tsx
index 80e0099ab3..d6e79c4ee9 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2018, 2019 New Vector Ltd
+Copyright 2016-2021 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.
@@ -15,59 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React, { ChangeEvent, createRef } from "react";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import EditableItemList from "../elements/EditableItemList";
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import * as sdk from "../../../index";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
+import Spinner from "../elements/Spinner";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
 import RoomPublishSetting from "./RoomPublishSetting";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomAliasField from "../elements/RoomAliasField";
 
-class EditableAliasesList extends EditableItemList {
-    constructor(props) {
-        super(props);
+interface IEditableAliasesListProps {
+    domain?: string;
+}
 
-        this._aliasField = createRef();
-    }
+class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
+    private aliasField = createRef<RoomAliasField>();
 
-    _onAliasAdded = async () => {
-        await this._aliasField.current.validate({ allowEmpty: false });
+    private onAliasAdded = async () => {
+        await this.aliasField.current.validate({ allowEmpty: false });
 
-        if (this._aliasField.current.isValid) {
+        if (this.aliasField.current.isValid) {
             if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
             return;
         }
 
-        this._aliasField.current.focus();
-        this._aliasField.current.validate({ allowEmpty: false, focused: true });
+        this.aliasField.current.focus();
+        this.aliasField.current.validate({ allowEmpty: false, focused: true });
     };
 
-    _renderNewItemField() {
+    protected renderNewItemField() {
         // if we don't need the RoomAliasField,
-        // we don't need to overriden version of _renderNewItemField
+        // we don't need to overriden version of renderNewItemField
         if (!this.props.domain) {
-            return super._renderNewItemField();
+            return super.renderNewItemField();
         }
-        const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
-        const onChange = (alias) => this._onNewItemChanged({target: {value: alias}});
+        const onChange = (alias) => this.onNewItemChanged({target: {value: alias}});
         return (
             <form
-                onSubmit={this._onAliasAdded}
+                onSubmit={this.onAliasAdded}
                 autoComplete="off"
                 noValidate={true}
                 className="mx_EditableItemList_newItem"
             >
                 <RoomAliasField
-                    ref={this._aliasField}
+                    ref={this.aliasField}
                     onChange={onChange}
                     value={this.props.newItem || ""}
                     domain={this.props.domain} />
-                <AccessibleButton onClick={this._onAliasAdded} kind="primary">
+                <AccessibleButton onClick={this.onAliasAdded} kind="primary">
                     { _t("Add") }
                 </AccessibleButton>
             </form>
@@ -75,15 +75,27 @@ class EditableAliasesList extends EditableItemList {
     }
 }
 
-@replaceableComponent("views.room_settings.AliasSettings")
-export default class AliasSettings extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        canSetCanonicalAlias: PropTypes.bool.isRequired,
-        canSetAliases: PropTypes.bool.isRequired,
-        canonicalAliasEvent: PropTypes.object, // MatrixEvent
-    };
+interface IProps {
+    roomId: string;
+    canSetCanonicalAlias: boolean;
+    canSetAliases: boolean;
+    canonicalAliasEvent?: MatrixEvent;
+    aliasEvents?: MatrixEvent[];
+}
 
+interface IState {
+    altAliases: string[];
+    localAliases: string[];
+    canonicalAlias?: string;
+    updatingCanonicalAlias: boolean;
+    localAliasesLoading: boolean;
+    detailsOpen: boolean;
+    newAlias?: string;
+    newAltAlias?: string;
+}
+
+@replaceableComponent("views.room_settings.AliasSettings")
+export default class AliasSettings extends React.Component<IProps, IState> {
     static defaultProps = {
         canSetAliases: false,
         canSetCanonicalAlias: false,
@@ -122,7 +134,7 @@ export default class AliasSettings extends React.Component {
         }
     }
 
-    async loadLocalAliases() {
+    private async loadLocalAliases() {
         this.setState({ localAliasesLoading: true });
         try {
             const cli = MatrixClientPeg.get();
@@ -139,7 +151,7 @@ export default class AliasSettings extends React.Component {
         }
     }
 
-    changeCanonicalAlias(alias) {
+    private changeCanonicalAlias(alias: string) {
         if (!this.props.canSetCanonicalAlias) return;
 
         const oldAlias = this.state.canonicalAlias;
@@ -170,7 +182,7 @@ export default class AliasSettings extends React.Component {
         });
     }
 
-    changeAltAliases(altAliases) {
+    private changeAltAliases(altAliases: string[]) {
         if (!this.props.canSetCanonicalAlias) return;
 
         this.setState({
@@ -181,7 +193,7 @@ export default class AliasSettings extends React.Component {
         const eventContent = {};
 
         if (this.state.canonicalAlias) {
-            eventContent.alias = this.state.canonicalAlias;
+            eventContent["alias"] = this.state.canonicalAlias;
         }
         if (altAliases) {
             eventContent["alt_aliases"] = altAliases;
@@ -202,11 +214,11 @@ export default class AliasSettings extends React.Component {
         });
     }
 
-    onNewAliasChanged = (value) => {
-        this.setState({newAlias: value});
+    private onNewAliasChanged = (value: string) => {
+        this.setState({ newAlias: value });
     };
 
-    onLocalAliasAdded = (alias) => {
+    private onLocalAliasAdded = (alias: string) => {
         if (!alias || alias.length === 0) return; // ignore attempts to create blank aliases
 
         const localDomain = MatrixClientPeg.get().getDomain();
@@ -232,7 +244,7 @@ export default class AliasSettings extends React.Component {
         });
     };
 
-    onLocalAliasDeleted = (index) => {
+    private onLocalAliasDeleted = (index: number) => {
         const alias = this.state.localAliases[index];
         // TODO: In future, we should probably be making sure that the alias actually belongs
         // to this room. See https://github.com/vector-im/element-web/issues/7353
@@ -261,7 +273,7 @@ export default class AliasSettings extends React.Component {
         });
     };
 
-    onLocalAliasesToggled = (event) => {
+    private onLocalAliasesToggled = (event: ChangeEvent<HTMLDetailsElement>) => {
         // expanded
         if (event.target.open) {
             // if local aliases haven't been preloaded yet at component mount
@@ -269,37 +281,37 @@ export default class AliasSettings extends React.Component {
                 this.loadLocalAliases();
             }
         }
-        this.setState({detailsOpen: event.target.open});
+        this.setState({ detailsOpen: event.currentTarget.open });
     };
 
-    onCanonicalAliasChange = (event) => {
+    private onCanonicalAliasChange = (event: ChangeEvent<HTMLSelectElement>) => {
         this.changeCanonicalAlias(event.target.value);
     };
 
-    onNewAltAliasChanged = (value) => {
-        this.setState({newAltAlias: value});
+    private onNewAltAliasChanged = (value: string) => {
+        this.setState({ newAltAlias: value });
     }
 
-    onAltAliasAdded = (alias) => {
+    private onAltAliasAdded = (alias: string) => {
         const altAliases = this.state.altAliases.slice();
         if (!altAliases.some(a => a.trim() === alias.trim())) {
             altAliases.push(alias.trim());
             this.changeAltAliases(altAliases);
-            this.setState({newAltAlias: ""});
+            this.setState({ newAltAlias: "" });
         }
     }
 
-    onAltAliasDeleted = (index) => {
+    private onAltAliasDeleted = (index: number) => {
         const altAliases = this.state.altAliases.slice();
         altAliases.splice(index, 1);
         this.changeAltAliases(altAliases);
     }
 
-    _getAliases() {
-        return this.state.altAliases.concat(this._getLocalNonAltAliases());
+    private getAliases() {
+        return this.state.altAliases.concat(this.getLocalNonAltAliases());
     }
 
-    _getLocalNonAltAliases() {
+    private getLocalNonAltAliases() {
         const {altAliases} = this.state;
         return this.state.localAliases.filter(alias => !altAliases.includes(alias));
     }
@@ -320,7 +332,7 @@ export default class AliasSettings extends React.Component {
             >
                 <option value="" key="unset">{ _t('not specified') }</option>
                 {
-                    this._getAliases().map((alias, i) => {
+                    this.getAliases().map((alias, i) => {
                         if (alias === this.state.canonicalAlias) found = true;
                         return (
                             <option value={alias} key={i}>
@@ -340,12 +352,10 @@ export default class AliasSettings extends React.Component {
 
         let localAliasesList;
         if (this.state.localAliasesLoading) {
-            const Spinner = sdk.getComponent("elements.Spinner");
             localAliasesList = <Spinner />;
         } else {
             localAliasesList = (<EditableAliasesList
                 id="roomAliases"
-                className={"mx_RoomSettings_localAliases"}
                 items={this.state.localAliases}
                 newItem={this.state.newAlias}
                 onNewItemChanged={this.onNewAliasChanged}
@@ -367,13 +377,12 @@ export default class AliasSettings extends React.Component {
                 {canonicalAliasSection}
                 <RoomPublishSetting roomId={this.props.roomId} canSetCanonicalAlias={this.props.canSetCanonicalAlias} />
                 <datalist id="mx_AliasSettings_altRecommendations">
-                    {this._getLocalNonAltAliases().map(alias => {
+                    {this.getLocalNonAltAliases().map(alias => {
                         return <option value={alias} key={alias} />;
                     })};
                 </datalist>
                 <EditableAliasesList
                     id="roomAltAliases"
-                    className={"mx_RoomSettings_altAliases"}
                     items={this.state.altAliases}
                     newItem={this.state.newAltAlias}
                     onNewItemChanged={this.onNewAltAliasChanged}
@@ -386,11 +395,16 @@ export default class AliasSettings extends React.Component {
                     noItemsLabel={_t('No other published addresses yet, add one below')}
                     placeholder={_t('New published address (e.g. #alias:server)')}
                 />
-                <span className='mx_SettingsTab_subheading mx_AliasSettings_localAliasHeader'>{_t("Local Addresses")}</span>
-                <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
+                <span className='mx_SettingsTab_subheading mx_AliasSettings_localAliasHeader'>
+                    { _t("Local Addresses") }
+                </span>
+                <p>
+                    { _t("Set addresses for this room so users can find this room " +
+                        "through your homeserver (%(localDomain)s)", { localDomain }) }
+                </p>
                 <details onToggle={this.onLocalAliasesToggled}>
                     <summary>{ this.state.detailsOpen ? _t('Show less') : _t("Show more")}</summary>
-                    {localAliasesList}
+                    { localAliasesList }
                 </details>
             </div>
         );

From 4725a9e8fa954b3858f4dd8e8d4212f6a0d61488 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 7 Jun 2021 16:42:59 +0100
Subject: [PATCH 040/358] Extract useRoomState hook into hooks directory

---
 .../views/right_panel/PinnedMessagesCard.tsx  | 19 +--------
 src/hooks/useRoomState.ts                     | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useRoomState.ts

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index a3f1f2d9df..ad62619593 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -28,6 +28,7 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import PinningUtils from "../../../utils/PinningUtils";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
 import PinnedEventTile from "../rooms/PinnedEventTile";
+import { useRoomState } from "../../../hooks/useRoomState";
 
 interface IProps {
     room: Room;
@@ -75,24 +76,6 @@ export const useReadPinnedEvents = (room: Room): Set<string> => {
     return readPinnedEvents;
 };
 
-const useRoomState = <T extends any>(room: Room, mapper: (state: RoomState) => T): T => {
-    const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
-
-    const update = useCallback(() => {
-        if (!room) return;
-        setValue(mapper(room.currentState));
-    }, [room, mapper]);
-
-    useEventEmitter(room?.currentState, "RoomState.events", update);
-    useEffect(() => {
-        update();
-        return () => {
-            setValue(undefined);
-        };
-    }, [update]);
-    return value;
-};
-
 const PinnedMessagesCard = ({ room, onClose }: IProps) => {
     const cli = useContext(MatrixClientContext);
     const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts
new file mode 100644
index 0000000000..ded51c3900
--- /dev/null
+++ b/src/hooks/useRoomState.ts
@@ -0,0 +1,40 @@
+/*
+Copyright 2021 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 { useCallback, useEffect, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+
+import { useEventEmitter } from "./useEventEmitter";
+
+// Hook to simplify watching Matrix Room state
+export const useRoomState = <T extends any>(room: Room, mapper: (state: RoomState) => T): T => {
+    const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
+
+    const update = useCallback(() => {
+        if (!room) return;
+        setValue(mapper(room.currentState));
+    }, [room, mapper]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setValue(undefined);
+        };
+    }, [update]);
+    return value;
+};

From 5e3ad621892786890692c987d95f74881bebe232 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 7 Jun 2021 19:03:04 -0400
Subject: [PATCH 041/358] Remove mysterious dot from EventTilePreviews

It was a bullet point, since EventTiles now get created as li by
default :P

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/views/elements/EventTilePreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 77db94b5dd..20d6cbaeb3 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -128,6 +128,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
                 mxEvent={event}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                as="div"
             />
         </div>;
     }

From 9454a4e6c79f0ecfa5ebd91bd7af689e478ca559 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:28:02 +0100
Subject: [PATCH 042/358] Convert AdvancedRoomSettingsTab to Typescript

---
 ...ingsTab.js => AdvancedRoomSettingsTab.tsx} | 87 ++++++++++---------
 1 file changed, 47 insertions(+), 40 deletions(-)
 rename src/components/views/settings/tabs/room/{AdvancedRoomSettingsTab.js => AdvancedRoomSettingsTab.tsx} (73%)

diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
similarity index 73%
rename from src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js
rename to src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index 28aad65129..f587210095 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 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.
@@ -15,68 +15,75 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {_t} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-import * as sdk from "../../../../..";
+
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
+import RoomUpgradeDialog from "../../../dialogs/RoomUpgradeDialog";
+import DevtoolsDialog from "../../../dialogs/DevtoolsDialog";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+
+interface IProps {
+    roomId: string;
+    closeSettingsFn(): void;
+}
+
+interface IRecommendedVersion {
+    version: string;
+    needsUpgrade: boolean;
+    urgent: boolean;
+}
+
+interface IState {
+    upgradeRecommendation?: IRecommendedVersion;
+    oldRoomId?: string;
+    oldEventId?: string;
+    upgraded?: boolean;
+}
 
 @replaceableComponent("views.settings.tabs.room.AdvancedRoomSettingsTab")
-export default class AdvancedRoomSettingsTab extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        closeSettingsFn: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
+export default class AdvancedRoomSettingsTab extends React.Component<IProps, IState> {
+    constructor(props, context) {
+        super(props, context);
 
         this.state = {
             // This is eventually set to the value of room.getRecommendedVersion()
             upgradeRecommendation: null,
         };
-    }
 
-    // TODO: [REACT-WARNING] Move this to constructor
-    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         // we handle lack of this object gracefully later, so don't worry about it failing here.
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         room.getRecommendedVersion().then((v) => {
             const tombstone = room.currentState.getStateEvents("m.room.tombstone", "");
 
-            const additionalStateChanges = {};
+            const additionalStateChanges: Partial<IState> = {};
             const createEvent = room.currentState.getStateEvents("m.room.create", "");
             const predecessor = createEvent ? createEvent.getContent().predecessor : null;
             if (predecessor && predecessor.room_id) {
-                additionalStateChanges['oldRoomId'] = predecessor.room_id;
-                additionalStateChanges['oldEventId'] = predecessor.event_id;
-                additionalStateChanges['hasPreviousRoom'] = true;
+                additionalStateChanges.oldRoomId = predecessor.room_id;
+                additionalStateChanges.oldEventId = predecessor.event_id;
             }
 
-
             this.setState({
-                upgraded: tombstone && tombstone.getContent().replacement_room,
+                upgraded: !!tombstone?.getContent().replacement_room,
                 upgradeRecommendation: v,
                 ...additionalStateChanges,
             });
         });
     }
 
-    _upgradeRoom = (e) => {
-        const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
+    private upgradeRoom = (e) => {
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, {room: room});
     };
 
-    _openDevtools = (e) => {
-        const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
+    private openDevtools = (e) => {
         Modal.createDialog(DevtoolsDialog, {roomId: this.props.roomId});
     };
 
-    _onOldRoomClicked = (e) => {
+    private onOldRoomClicked = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -113,7 +120,7 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                             },
                         )}
                     </p>
-                    <AccessibleButton onClick={this._upgradeRoom} kind='primary'>
+                    <AccessibleButton onClick={this.upgradeRoom} kind='primary'>
                         {_t("Upgrade this room to the recommended room version")}
                     </AccessibleButton>
                 </div>
@@ -121,13 +128,13 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         }
 
         let oldRoomLink;
-        if (this.state.hasPreviousRoom) {
+        if (this.state.oldRoomId) {
             let name = _t("this room");
             const room = MatrixClientPeg.get().getRoom(this.props.roomId);
             if (room && room.name) name = room.name;
             oldRoomLink = (
-                <AccessibleButton element='a' onClick={this._onOldRoomClicked}>
-                    {_t("View older messages in %(roomName)s.", {roomName: name})}
+                <AccessibleButton element='a' onClick={this.onOldRoomClicked}>
+                    { _t("View older messages in %(roomName)s.", { roomName: name }) }
                 </AccessibleButton>
             );
         }
@@ -139,23 +146,23 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                     <span className='mx_SettingsTab_subheading'>{_t("Room information")}</span>
                     <div>
                         <span>{_t("Internal room ID:")}</span>&nbsp;
-                        {this.props.roomId}
+                        { this.props.roomId }
                     </div>
-                    {unfederatableSection}
+                    { unfederatableSection }
                 </div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <span className='mx_SettingsTab_subheading'>{_t("Room version")}</span>
                     <div>
                         <span>{_t("Room version:")}</span>&nbsp;
-                        {room.getVersion()}
+                        { room.getVersion() }
                     </div>
-                    {oldRoomLink}
-                    {roomUpgradeButton}
+                    { oldRoomLink }
+                    { roomUpgradeButton }
                 </div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <span className='mx_SettingsTab_subheading'>{_t("Developer options")}</span>
-                    <AccessibleButton onClick={this._openDevtools} kind='primary'>
-                        {_t("Open Devtools")}
+                    <span className='mx_SettingsTab_subheading'>{ _t("Developer options") }</span>
+                    <AccessibleButton onClick={this.openDevtools} kind='primary'>
+                        { _t("Open Devtools") }
                     </AccessibleButton>
                 </div>
             </div>

From 8d4ac90265839a98aeb83277834ef8673fc2b97e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:28:37 +0100
Subject: [PATCH 043/358] Convert RoomPublishSetting and LabelledToggleSwitch
 to Typescript

---
 ...ggleSwitch.js => LabelledToggleSwitch.tsx} | 47 +++++++++----------
 ...blishSetting.js => RoomPublishSetting.tsx} | 47 ++++++++++++-------
 2 files changed, 51 insertions(+), 43 deletions(-)
 rename src/components/views/elements/{LabelledToggleSwitch.js => LabelledToggleSwitch.tsx} (63%)
 rename src/components/views/room_settings/{RoomPublishSetting.js => RoomPublishSetting.tsx} (62%)

diff --git a/src/components/views/elements/LabelledToggleSwitch.js b/src/components/views/elements/LabelledToggleSwitch.tsx
similarity index 63%
rename from src/components/views/elements/LabelledToggleSwitch.js
rename to src/components/views/elements/LabelledToggleSwitch.tsx
index ef60eeed7b..957e3dbc97 100644
--- a/src/components/views/elements/LabelledToggleSwitch.js
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 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.
@@ -14,38 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from "prop-types";
+import React from "react";
+
 import ToggleSwitch from "./ToggleSwitch";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // The value for the toggle switch
+    value: boolean;
+    // The translated label for the switch
+    label: string;
+    // Whether or not to disable the toggle switch
+    disabled?: boolean;
+    // True to put the toggle in front of the label
+    // Default false.
+    toggleInFront?: boolean;
+    // Additional class names to append to the switch. Optional.
+    className?: string;
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
+
 @replaceableComponent("views.elements.LabelledToggleSwitch")
-export default class LabelledToggleSwitch extends React.Component {
-    static propTypes = {
-        // The value for the toggle switch
-        value: PropTypes.bool.isRequired,
-
-        // The function to call when the value changes
-        onChange: PropTypes.func.isRequired,
-
-        // The translated label for the switch
-        label: PropTypes.string.isRequired,
-
-        // Whether or not to disable the toggle switch
-        disabled: PropTypes.bool,
-
-        // True to put the toggle in front of the label
-        // Default false.
-        toggleInFront: PropTypes.bool,
-
-        // Additional class names to append to the switch. Optional.
-        className: PropTypes.string,
-    };
-
+export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
     render() {
         // This is a minimal version of a SettingsFlag
 
-        let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
+        let firstPart = <span className="mx_SettingsFlag_label">{ this.props.label }</span>;
         let secondPart = <ToggleSwitch
             checked={this.props.value}
             disabled={this.props.disabled}
diff --git a/src/components/views/room_settings/RoomPublishSetting.js b/src/components/views/room_settings/RoomPublishSetting.tsx
similarity index 62%
rename from src/components/views/room_settings/RoomPublishSetting.js
rename to src/components/views/room_settings/RoomPublishSetting.tsx
index 6cc3ce26ba..24df5f1c84 100644
--- a/src/components/views/room_settings/RoomPublishSetting.js
+++ b/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 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.
@@ -14,20 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    roomId: string;
+    label?: string;
+    canSetCanonicalAlias?: boolean;
+}
+
+interface IState {
+    isRoomPublished: boolean;
+}
 
 @replaceableComponent("views.room_settings.RoomPublishSetting")
-export default class RoomPublishSetting extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {isRoomPublished: false};
-    }
+export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
+    public state = {
+        isRoomPublished: false,
+    };
 
-    onRoomPublishChange = (e) => {
+    private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
         const newValue = !valueBefore;
         this.setState({isRoomPublished: newValue});
@@ -52,11 +62,14 @@ export default class RoomPublishSetting extends React.PureComponent {
     render() {
         const client = MatrixClientPeg.get();
 
-        return (<LabelledToggleSwitch value={this.state.isRoomPublished}
-            onChange={this.onRoomPublishChange}
-            disabled={!this.props.canSetCanonicalAlias}
-            label={_t("Publish this room to the public in %(domain)s's room directory?", {
-              domain: client.getDomain(),
-            })} />);
+        return (
+            <LabelledToggleSwitch value={this.state.isRoomPublished}
+                onChange={this.onRoomPublishChange}
+                disabled={!this.props.canSetCanonicalAlias}
+                label={_t("Publish this room to the public in %(domain)s's room directory?", {
+                  domain: client.getDomain(),
+                })}
+            />
+        );
     }
 }

From 13a2f779b962e8498ae09d9675a91baeca3cd671 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:29:06 +0100
Subject: [PATCH 044/358] improve defaults for useRoomState and useStateToggle
 hooks

---
 src/hooks/useRoomState.ts   | 5 ++++-
 src/hooks/useStateToggle.ts | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts
index ded51c3900..11ac7de49e 100644
--- a/src/hooks/useRoomState.ts
+++ b/src/hooks/useRoomState.ts
@@ -20,8 +20,11 @@ import { RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { useEventEmitter } from "./useEventEmitter";
 
+type Mapper<T> = (roomState: RoomState) => T;
+const defaultMapper: Mapper<RoomState> = (roomState: RoomState) => roomState;
+
 // Hook to simplify watching Matrix Room state
-export const useRoomState = <T extends any>(room: Room, mapper: (state: RoomState) => T): T => {
+export const useRoomState = <T extends any = RoomState>(room: Room, mapper: Mapper<T> = defaultMapper): T => {
     const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
 
     const update = useCallback(() => {
diff --git a/src/hooks/useStateToggle.ts b/src/hooks/useStateToggle.ts
index b50a923234..33701c4f16 100644
--- a/src/hooks/useStateToggle.ts
+++ b/src/hooks/useStateToggle.ts
@@ -18,7 +18,7 @@ import {Dispatch, SetStateAction, useState} from "react";
 
 // Hook to simplify toggling of a boolean state value
 // Returns value, method to toggle boolean value and method to set the boolean value
-export const useStateToggle = (initialValue: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>] => {
+export const useStateToggle = (initialValue = false): [boolean, () => void, Dispatch<SetStateAction<boolean>>] => {
     const [value, setValue] = useState(initialValue);
     const toggleValue = () => {
         setValue(!value);

From 5c85ee1ea03097325680ed4574006c559fcccaa9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:30:46 +0100
Subject: [PATCH 045/358] Make AdvancedRoomSettingsTab space-aware

---
 .../views/settings/tabs/room/AdvancedRoomSettingsTab.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index f587210095..7e7d9cba90 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -76,7 +76,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
 
     private upgradeRoom = (e) => {
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, {room: room});
+        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room });
     };
 
     private openDevtools = (e) => {
@@ -143,7 +143,9 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <span className='mx_SettingsTab_subheading'>{_t("Room information")}</span>
+                    <span className='mx_SettingsTab_subheading'>
+                        { room?.isSpaceRoom() ? _t("Space information") : _t("Room information") }
+                    </span>
                     <div>
                         <span>{_t("Internal room ID:")}</span>&nbsp;
                         { this.props.roomId }

From 78debcc93b99eea96f270cbff8a5266a10a52db5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:31:39 +0100
Subject: [PATCH 046/358] Add method to disable StyledRadioGroup and wrap
 description in element with a className

---
 .../views/elements/StyledRadioGroup.tsx         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx
index 6b9e992f92..744b6f2059 100644
--- a/src/components/views/elements/StyledRadioGroup.tsx
+++ b/src/components/views/elements/StyledRadioGroup.tsx
@@ -34,10 +34,19 @@ interface IProps<T extends string> {
     definitions: IDefinition<T>[];
     value?: T; // if not provided no options will be selected
     outlined?: boolean;
+    disabled?: boolean;
     onChange(newValue: T): void;
 }
 
-function StyledRadioGroup<T extends string>({name, definitions, value, className, outlined, onChange}: IProps<T>) {
+function StyledRadioGroup<T extends string>({
+    name,
+    definitions,
+    value,
+    className,
+    outlined,
+    disabled,
+    onChange,
+}: IProps<T>) {
     const _onChange = e => {
         onChange(e.target.value);
     };
@@ -50,12 +59,12 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
                 checked={d.checked !== undefined ? d.checked : d.value === value}
                 name={name}
                 value={d.value}
-                disabled={d.disabled}
+                disabled={disabled || d.disabled}
                 outlined={outlined}
             >
-                {d.label}
+                { d.label }
             </StyledRadioButton>
-            {d.description}
+            { d.description ? <span>{ d.description }</span> : null }
         </React.Fragment>)}
     </React.Fragment>;
 }

From fdecba2fe54a5bfd4e5b9e6974e1fd9467858539 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:32:43 +0100
Subject: [PATCH 047/358] Make AliasSettings space-aware, remove stale unused
 props

---
 .../views/room_settings/AliasSettings.tsx     | 34 ++++++++++++++-----
 .../tabs/room/GeneralRoomSettingsTab.js       |  3 +-
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx
index d6e79c4ee9..6f83d64eaf 100644
--- a/src/components/views/room_settings/AliasSettings.tsx
+++ b/src/components/views/room_settings/AliasSettings.tsx
@@ -80,7 +80,7 @@ interface IProps {
     canSetCanonicalAlias: boolean;
     canSetAliases: boolean;
     canonicalAliasEvent?: MatrixEvent;
-    aliasEvents?: MatrixEvent[];
+    hidePublishSetting?: boolean;
 }
 
 interface IState {
@@ -99,7 +99,6 @@ export default class AliasSettings extends React.Component<IProps, IState> {
     static defaultProps = {
         canSetAliases: false,
         canSetCanonicalAlias: false,
-        aliasEvents: [],
     };
 
     constructor(props) {
@@ -317,7 +316,9 @@ export default class AliasSettings extends React.Component<IProps, IState> {
     }
 
     render() {
-        const localDomain = MatrixClientPeg.get().getDomain();
+        const cli = MatrixClientPeg.get();
+        const localDomain = cli.getDomain();
+        const isSpaceRoom = cli.getRoom(this.props.roomId)?.isSpaceRoom();
 
         let found = false;
         const canonicalValue = this.state.canonicalAlias || "";
@@ -363,7 +364,9 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                 canEdit={this.props.canSetAliases}
                 onItemAdded={this.onLocalAliasAdded}
                 onItemRemoved={this.onLocalAliasDeleted}
-                noItemsLabel={_t('This room has no local addresses')}
+                noItemsLabel={isSpaceRoom
+                    ? _t("This space has no local addresses")
+                    : _t("This room has no local addresses")}
                 placeholder={_t('Local address')}
                 domain={localDomain}
             />);
@@ -372,10 +375,20 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         return (
             <div className='mx_AliasSettings'>
                 <span className='mx_SettingsTab_subheading'>{_t("Published Addresses")}</span>
-                <p>{_t("Published addresses can be used by anyone on any server to join your room. " +
-                    "To publish an address, it needs to be set as a local address first.")}</p>
-                {canonicalAliasSection}
-                <RoomPublishSetting roomId={this.props.roomId} canSetCanonicalAlias={this.props.canSetCanonicalAlias} />
+                <p>
+                    { isSpaceRoom
+                        ? _t("Published addresses can be used by anyone on any server to join your space.")
+                        : _t("Published addresses can be used by anyone on any server to join your room.")}
+                    &nbsp;
+                    { _t("To publish an address, it needs to be set as a local address first.") }
+                </p>
+                { canonicalAliasSection }
+                { this.props.hidePublishSetting
+                    ? null
+                    : <RoomPublishSetting
+                        roomId={this.props.roomId}
+                        canSetCanonicalAlias={this.props.canSetCanonicalAlias}
+                    /> }
                 <datalist id="mx_AliasSettings_altRecommendations">
                     {this.getLocalNonAltAliases().map(alias => {
                         return <option value={alias} key={alias} />;
@@ -399,7 +412,10 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     { _t("Local Addresses") }
                 </span>
                 <p>
-                    { _t("Set addresses for this room so users can find this room " +
+                    { isSpaceRoom
+                        ? _t("Set addresses for this space so users can find this space " +
+                            "through your homeserver (%(localDomain)s)", { localDomain })
+                        : _t("Set addresses for this room so users can find this room " +
                         "through your homeserver (%(localDomain)s)", { localDomain }) }
                 </p>
                 <details onToggle={this.onLocalAliasesToggled}>
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index 139cfd5fbd..10c93c5dca 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -60,7 +60,6 @@ export default class GeneralRoomSettingsTab extends React.Component {
         const canSetAliases = true; // Previously, we arbitrarily only allowed admins to do this
         const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client);
         const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", '');
-        const aliasEvents = room.currentState.getStateEvents("m.room.aliases");
 
         const canChangeGroups = room.currentState.mayClientSendStateEvent("m.room.related_groups", client);
         const groupsEvent = room.currentState.getStateEvents("m.room.related_groups", "");
@@ -100,7 +99,7 @@ export default class GeneralRoomSettingsTab extends React.Component {
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <AliasSettings roomId={this.props.roomId}
                         canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
-                        canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
+                        canonicalAliasEvent={canonicalAliasEv} />
                 </div>
                 <div className="mx_SettingsTab_heading">{_t("Other")}</div>
                 { flairSection }

From 856a5682b90fa1e4ac3c4dbf907c1b5cb55bf0f8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:33:06 +0100
Subject: [PATCH 048/358] Improve useRoomPowerLevels hook

---
 src/components/views/right_panel/UserInfo.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index d6c97f9cf2..48336de400 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -502,19 +502,15 @@ const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) =>
     return member.powerLevel < levelToSend;
 };
 
+const getPowerLevels = room => room.currentState.getStateEvents(EventType.RoomPowerLevels, "")?.getContent() || {};
+
 export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
-    const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>({});
+    const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>(getPowerLevels(room));
 
     const update = useCallback((ev?: MatrixEvent) => {
         if (!room) return;
         if (ev && ev.getType() !== EventType.RoomPowerLevels) return;
-
-        const event = room.currentState.getStateEvents(EventType.RoomPowerLevels, "");
-        if (event) {
-            setPowerLevels(event.getContent());
-        } else {
-            setPowerLevels({});
-        }
+        setPowerLevels(getPowerLevels(room));
     }, [room]);
 
     useEventEmitter(cli, "RoomState.events", update);

From 90bb7c1482c38a234099d023b4bb1a4ae0232f57 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:33:47 +0100
Subject: [PATCH 049/358] Switch Space Settings for a tabbed view with a bunch
 more settings exposed

---
 res/css/views/dialogs/_SettingsDialog.scss    |   2 +-
 .../views/dialogs/_SpaceSettingsDialog.scss   |  51 ++++-
 res/img/element-icons/eye.svg                 |   3 +
 .../views/dialogs/SpaceSettingsDialog.tsx     | 172 +++++------------
 .../tabs/room/SecurityRoomSettingsTab.tsx     |   6 +-
 .../views/spaces/SpaceSettingsGeneralTab.tsx  | 143 ++++++++++++++
 .../spaces/SpaceSettingsVisibilityTab.tsx     | 181 ++++++++++++++++++
 src/i18n/strings/en_EN.json                   |  40 ++--
 8 files changed, 456 insertions(+), 142 deletions(-)
 create mode 100644 res/img/element-icons/eye.svg
 create mode 100644 src/components/views/spaces/SpaceSettingsGeneralTab.tsx
 create mode 100644 src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss
index 6c4ed35c5a..b3b6802c3d 100644
--- a/res/css/views/dialogs/_SettingsDialog.scss
+++ b/res/css/views/dialogs/_SettingsDialog.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 // Not actually a component but things shared by settings components
-.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
+.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog {
     width: 90vw;
     max-width: 1000px;
     // set the height too since tabbed view scrolls itself.
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss
index 6e5fd9c8c8..fa074fdbe8 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_SpaceSettingsDialog {
-    width: 480px;
     color: $primary-fg-color;
 
     .mx_SpaceSettings_errorText {
@@ -32,8 +31,44 @@ limitations under the License.
         margin-left: 16px;
     }
 
-    .mx_AccessibleButton_kind_danger {
-        margin-top: 28px;
+    .mx_SettingsTab_section {
+        .mx_SettingsTab_section_caption {
+            margin-top: 12px;
+            margin-bottom: 20px;
+        }
+
+        & + .mx_SettingsTab_subheading {
+            border-top: 1px solid $message-body-panel-bg-color;
+            margin-top: 0;
+            padding-top: 24px;
+        }
+
+        .mx_RadioButton {
+            margin-top: 8px;
+            margin-bottom: 4px;
+
+            .mx_RadioButton_content {
+                font-weight: $font-semi-bold;
+                line-height: $font-18px;
+                color: $primary-fg-color;
+            }
+
+            & + span {
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $secondary-fg-color;
+                margin-left: 26px;
+            }
+        }
+
+        .mx_SettingsTab_showAdvanced {
+            margin: 16px 0;
+            padding: 0;
+        }
+
+        .mx_SettingsFlag {
+            margin-top: 24px;
+        }
     }
 
     .mx_SpaceSettingsDialog_buttons {
@@ -52,4 +87,14 @@ limitations under the License.
     .mx_AccessibleButton_hasKind {
         padding: 8px 22px;
     }
+
+    .mx_TabbedView_tabLabel {
+        .mx_SpaceSettingsDialog_generalIcon::before {
+            mask-image: url('$(res)/img/element-icons/settings.svg');
+        }
+
+        .mx_SpaceSettingsDialog_visibilityIcon::before {
+            mask-image: url('$(res)/img/element-icons/eye.svg');
+        }
+    }
 }
diff --git a/res/img/element-icons/eye.svg b/res/img/element-icons/eye.svg
new file mode 100644
index 0000000000..0460a6201d
--- /dev/null
+++ b/res/img/element-icons/eye.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3094 5.96587C15.3206 7.15704 15.3417 8.85457 14.3412 10.0548C13.0889 11.5571 10.9822 13.3332 8.02104 13.3332C5.05992 13.3332 2.9532 11.5571 1.70087 10.0548C0.700398 8.85457 0.721506 7.15704 1.7327 5.96587C3.01174 4.45918 5.1391 2.6665 8.02104 2.6665C10.903 2.6665 13.0303 4.45918 14.3094 5.96587ZM11.5556 7.99984C11.5556 9.96352 9.96369 11.5554 8.00001 11.5554C6.03633 11.5554 4.44446 9.96352 4.44446 7.99984C4.44446 6.03616 6.03633 4.44428 8.00001 4.44428C9.96369 4.44428 11.5556 6.03616 11.5556 7.99984ZM8.00001 9.77761C8.98185 9.77761 9.77779 8.98168 9.77779 7.99984C9.77779 7.018 8.98185 6.22206 8.00001 6.22206C7.01817 6.22206 6.22224 7.018 6.22224 7.99984C6.22224 8.98168 7.01817 9.77761 8.00001 9.77761Z" fill="white"/>
+</svg>
diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index a135b6bc16..1273f06401 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -14,24 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import React, { useMemo } from 'react';
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import {_t} from '../../../languageHandler';
-import {IDialogProps} from "./IDialogProps";
+import { _t, _td } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import DevtoolsDialog from "./DevtoolsDialog";
-import SpaceBasicSettings from '../spaces/SpaceBasicSettings';
-import {getTopic} from "../elements/RoomTopic";
-import {avatarUrlForRoom} from "../../../Avatar";
-import ToggleSwitch from "../elements/ToggleSwitch";
-import AccessibleButton from "../elements/AccessibleButton";
-import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {useDispatcher} from "../../../hooks/useDispatcher";
-import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import { useDispatcher } from "../../../hooks/useDispatcher";
+import TabbedView, { Tab } from "../../structures/TabbedView";
+import SpaceSettingsGeneralTab from '../spaces/SpaceSettingsGeneralTab';
+import SpaceSettingsVisibilityTab from "../spaces/SpaceSettingsVisibilityTab";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
+import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
+
+export enum SpaceSettingsTab {
+    General = "SPACE_GENERAL_TAB",
+    Visibility = "SPACE_VISIBILITY_TAB",
+    Advanced = "SPACE_ADVANCED_TAB",
+}
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -45,63 +48,30 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
         }
     });
 
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-
-    const userId = cli.getUserId();
-
-    const [newAvatar, setNewAvatar] = useState<File>(null); // undefined means to remove avatar
-    const canSetAvatar = space.currentState.maySendStateEvent(EventType.RoomAvatar, userId);
-    const avatarChanged = newAvatar !== null;
-
-    const [name, setName] = useState<string>(space.name);
-    const canSetName = space.currentState.maySendStateEvent(EventType.RoomName, userId);
-    const nameChanged = name !== space.name;
-
-    const currentTopic = getTopic(space);
-    const [topic, setTopic] = useState<string>(currentTopic);
-    const canSetTopic = space.currentState.maySendStateEvent(EventType.RoomTopic, userId);
-    const topicChanged = topic !== currentTopic;
-
-    const currentJoinRule = space.getJoinRule();
-    const [joinRule, setJoinRule] = useState(currentJoinRule);
-    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
-    const joinRuleChanged = joinRule !== currentJoinRule;
-
-    const onSave = async () => {
-        setBusy(true);
-        const promises = [];
-
-        if (avatarChanged) {
-            if (newAvatar) {
-                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
-                    url: await cli.uploadContent(newAvatar),
-                }, ""));
-            } else {
-                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {}, ""));
-            }
-        }
-
-        if (nameChanged) {
-            promises.push(cli.setRoomName(space.roomId, name));
-        }
-
-        if (topicChanged) {
-            promises.push(cli.setRoomTopic(space.roomId, topic));
-        }
-
-        if (joinRuleChanged) {
-            promises.push(cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, { join_rule: joinRule }, ""));
-        }
-
-        const results = await Promise.allSettled(promises);
-        setBusy(false);
-        const failures = results.filter(r => r.status === "rejected");
-        if (failures.length > 0) {
-            console.error("Failed to save space settings: ", failures);
-            setError(_t("Failed to save space settings."));
-        }
-    };
+    const tabs = useMemo(() => {
+        return [
+            new Tab(
+                SpaceSettingsTab.General,
+                _td("General"),
+                "mx_SpaceSettingsDialog_generalIcon",
+                <SpaceSettingsGeneralTab matrixClient={cli} space={space} onFinished={onFinished} />,
+            ),
+            new Tab(
+                SpaceSettingsTab.Visibility,
+                _td("Visibility"),
+                "mx_SpaceSettingsDialog_visibilityIcon",
+                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} />,
+            ),
+            SettingsStore.getValue(UIFeature.AdvancedSettings)
+                ? new Tab(
+                    SpaceSettingsTab.Advanced,
+                    _td("Advanced"),
+                    "mx_RoomSettingsDialog_warningIcon",
+                    <AdvancedRoomSettingsTab roomId={space.roomId} closeSettingsFn={onFinished} />,
+                )
+                : null,
+        ].filter(Boolean);
+    }, [cli, space, onFinished]);
 
     return <BaseDialog
         title={_t("Space settings")}
@@ -110,58 +80,12 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
         onFinished={onFinished}
         fixedWidth={false}
     >
-        <div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
-            <div>{ _t("Edit settings relating to your space.") }</div>
-
-            { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-
-            <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
-
-            <SpaceBasicSettings
-                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
-                avatarDisabled={busy || !canSetAvatar}
-                setAvatar={setNewAvatar}
-                name={name}
-                nameDisabled={busy || !canSetName}
-                setName={setName}
-                topic={topic}
-                topicDisabled={busy || !canSetTopic}
-                setTopic={setTopic}
-            />
-
-            <div>
-                { _t("Make this space private") }
-                <ToggleSwitch
-                    checked={joinRule !== "public"}
-                    onChange={checked => setJoinRule(checked ? "invite" : "public")}
-                    disabled={!canSetJoinRule}
-                    aria-label={_t("Make this space private")}
-                />
-            </div>
-
-            <AccessibleButton
-                kind="danger"
-                onClick={() => {
-                    defaultDispatcher.dispatch({
-                        action: "leave_room",
-                        room_id: space.roomId,
-                    });
-                }}
-            >
-                { _t("Leave Space") }
-            </AccessibleButton>
-
-            <div className="mx_SpaceSettingsDialog_buttons">
-                <AccessibleButton onClick={() => Modal.createDialog(DevtoolsDialog, {roomId: space.roomId})}>
-                    { _t("View dev tools") }
-                </AccessibleButton>
-                <AccessibleButton onClick={onFinished} disabled={busy} kind="link">
-                    { _t("Cancel") }
-                </AccessibleButton>
-                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
-                    { busy ? _t("Saving...") : _t("Save Changes") }
-                </AccessibleButton>
-            </div>
+        <div
+            className="mx_SpaceSettingsDialog_content"
+            id="mx_SpaceSettingsDialog"
+            title={_t("Settings - %(spaceName)s", { spaceName: space.name })}
+        >
+            <TabbedView tabs={tabs} />
         </div>
     </BaseDialog>;
 };
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 02bbcfb751..99f525364e 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -29,19 +29,19 @@ import {UIFeature} from "../../../../../settings/UIFeature";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 // Knock and private are reserved keywords which are not yet implemented.
-enum JoinRule {
+export enum JoinRule {
     Public = "public",
     Knock = "knock",
     Invite = "invite",
     Private = "private",
 }
 
-enum GuestAccess {
+export enum GuestAccess {
     CanJoin = "can_join",
     Forbidden = "forbidden",
 }
 
-enum HistoryVisibility {
+export enum HistoryVisibility {
     Invited = "invited",
     Joined = "joined",
     Shared = "shared",
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
new file mode 100644
index 0000000000..db0a180846
--- /dev/null
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -0,0 +1,143 @@
+/*
+Copyright 2021 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 React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
+import SpaceBasicSettings from "./SpaceBasicSettings";
+import { avatarUrlForRoom } from "../../../Avatar";
+import { IDialogProps } from "../dialogs/IDialogProps";
+import { getTopic } from "../elements/RoomTopic";
+import { defaultDispatcher } from "../../../dispatcher/dispatcher";
+
+interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
+    space: Room;
+}
+
+const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProps) => {
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    const userId = cli.getUserId();
+
+    const [newAvatar, setNewAvatar] = useState<File>(null); // undefined means to remove avatar
+    const canSetAvatar = space.currentState.maySendStateEvent(EventType.RoomAvatar, userId);
+    const avatarChanged = newAvatar !== null;
+
+    const [name, setName] = useState<string>(space.name);
+    const canSetName = space.currentState.maySendStateEvent(EventType.RoomName, userId);
+    const nameChanged = name !== space.name;
+
+    const currentTopic = getTopic(space);
+    const [topic, setTopic] = useState<string>(currentTopic);
+    const canSetTopic = space.currentState.maySendStateEvent(EventType.RoomTopic, userId);
+    const topicChanged = topic !== currentTopic;
+
+    const onCancel = () => {
+        setNewAvatar(null);
+        setName(space.name);
+        setTopic(currentTopic);
+    };
+
+    const onSave = async () => {
+        setBusy(true);
+        const promises = [];
+
+        if (avatarChanged) {
+            if (newAvatar) {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
+                    url: await cli.uploadContent(newAvatar),
+                }, ""));
+            } else {
+                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {}, ""));
+            }
+        }
+
+        if (nameChanged) {
+            promises.push(cli.setRoomName(space.roomId, name));
+        }
+
+        if (topicChanged) {
+            promises.push(cli.setRoomTopic(space.roomId, topic));
+        }
+
+        const results = await Promise.allSettled(promises);
+        setBusy(false);
+        const failures = results.filter(r => r.status === "rejected");
+        if (failures.length > 0) {
+            console.error("Failed to save space settings: ", failures);
+            setError(_t("Failed to save space settings."));
+        }
+    };
+
+    return <div className="mx_SettingsTab">
+        <div className="mx_SettingsTab_heading">{_t("General")}</div>
+
+        <div>{ _t("Edit settings relating to your space.") }</div>
+
+        { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
+
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
+
+        <div className="mx_SettingsTab_section">
+            <SpaceBasicSettings
+                avatarUrl={avatarUrlForRoom(space, 80, 80, "crop")}
+                avatarDisabled={busy || !canSetAvatar}
+                setAvatar={setNewAvatar}
+                name={name}
+                nameDisabled={busy || !canSetName}
+                setName={setName}
+                topic={topic}
+                topicDisabled={busy || !canSetTopic}
+                setTopic={setTopic}
+            />
+
+            <AccessibleButton
+                onClick={onCancel}
+                disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
+                kind="link"
+            >
+                { _t("Cancel") }
+            </AccessibleButton>
+            <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
+                { busy ? _t("Saving...") : _t("Save Changes") }
+            </AccessibleButton>
+        </div>
+
+        <span className="mx_SettingsTab_subheading">{_t("Leave Space")}</span>
+        <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
+            <AccessibleButton
+                kind="danger"
+                onClick={() => {
+                    defaultDispatcher.dispatch({
+                        action: "leave_room",
+                        room_id: space.roomId,
+                    });
+                }}
+            >
+                { _t("Leave Space") }
+            </AccessibleButton>
+        </div>
+    </div>;
+};
+
+export default SpaceSettingsGeneralTab;
diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
new file mode 100644
index 0000000000..7fc3514b2d
--- /dev/null
+++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -0,0 +1,181 @@
+/*
+Copyright 2021 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 React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import AliasSettings from "../room_settings/AliasSettings";
+import { useStateToggle } from "../../../hooks/useStateToggle";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import { GuestAccess, HistoryVisibility, JoinRule } from "../settings/tabs/room/SecurityRoomSettingsTab";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+
+interface IProps {
+    matrixClient: MatrixClient;
+    space: Room;
+}
+
+enum SpaceVisibility {
+    Unlisted = "unlisted",
+    Private = "private",
+}
+
+const useLocalEcho = <T extends any>(
+    currentFactory: () => T,
+    setterFn: (value: T) => Promise<void>,
+    errorFn: (error: Error) => void,
+): [value: T, handler: (value: T) => void] => {
+    const [value, setValue] = useState(currentFactory);
+    const handler = async (value: T) => {
+        setValue(value);
+        try {
+            await setterFn(value);
+        } catch (e) {
+            setValue(currentFactory());
+            errorFn(e);
+        }
+    };
+
+    return [value, handler];
+};
+
+const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+
+    const userId = cli.getUserId();
+
+    const [visibility, setVisibility] = useLocalEcho<SpaceVisibility>(
+        () => space.getJoinRule() === JoinRule.Private ? SpaceVisibility.Private : SpaceVisibility.Unlisted,
+        visibility => cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, {
+            join_rule: visibility === SpaceVisibility.Unlisted ? JoinRule.Public : JoinRule.Private,
+        }, ""),
+        () => setError(_t("Failed to update the visibility of this space")),
+    );
+    const [guestAccessEnabled, setGuestAccessEnabled] = useLocalEcho<boolean>(
+        () => space.currentState.getStateEvents(EventType.RoomGuestAccess, "")
+            ?.getContent()?.guest_access === GuestAccess.CanJoin,
+        guestAccessEnabled => cli.sendStateEvent(space.roomId, EventType.RoomGuestAccess, {
+            guest_access: guestAccessEnabled ? GuestAccess.CanJoin : GuestAccess.Forbidden,
+        }, ""),
+        () => setError(_t("Failed to update the guest access of this space")),
+    );
+    const [historyVisibility, setHistoryVisibility] = useLocalEcho<HistoryVisibility>(
+        () => space.currentState.getStateEvents(EventType.RoomHistoryVisibility, "")
+            ?.getContent()?.history_visibility || HistoryVisibility.Shared,
+        historyVisibility => cli.sendStateEvent(space.roomId, EventType.RoomHistoryVisibility, {
+            history_visibility: historyVisibility,
+        }, ""),
+        () => setError(_t("Failed to update the history visibility of this space")),
+    );
+
+    const [showAdvancedSection, toggleAdvancedSection] = useStateToggle();
+
+    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
+    const canSetGuestAccess = space.currentState.maySendStateEvent(EventType.RoomGuestAccess, userId);
+    const canSetHistoryVisibility = space.currentState.maySendStateEvent(EventType.RoomHistoryVisibility, userId);
+    const canSetCanonical = space.currentState.mayClientSendStateEvent(EventType.RoomCanonicalAlias, cli);
+    const canonicalAliasEv = space.currentState.getStateEvents(EventType.RoomCanonicalAlias, "");
+
+    let advancedSection;
+    if (showAdvancedSection) {
+        advancedSection = <>
+            <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
+                { _t("Hide advanced") }
+            </AccessibleButton>
+
+            <LabelledToggleSwitch
+                value={guestAccessEnabled}
+                onChange={setGuestAccessEnabled}
+                disabled={!canSetGuestAccess}
+                label={_t("Enable guest access")}
+            />
+            <p>
+                { _t("Guests can join a space without having an account.") }
+                <br />
+                { _t("This may be useful for public spaces.") }
+            </p>
+        </>;
+    } else {
+        advancedSection = <>
+            <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
+                { _t("Show advanced") }
+            </AccessibleButton>
+        </>;
+    }
+
+    return <div className="mx_SettingsTab">
+        <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
+
+        { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
+
+        <div className="mx_SettingsTab_section">
+            <div className="mx_SettingsTab_section_caption">
+                { _t("Decide who can view and join %(spaceName)s.", { spaceName: space.name }) }
+            </div>
+
+            <div>
+                <StyledRadioGroup
+                    name="spaceVisibility"
+                    value={visibility}
+                    onChange={setVisibility}
+                    disabled={!canSetJoinRule}
+                    definitions={[
+                        {
+                            value: SpaceVisibility.Unlisted,
+                            label: _t("Public"),
+                            description: _t("anyone with the link can view and join"),
+                        }, {
+                            value: SpaceVisibility.Private,
+                            label: _t("Invite only"),
+                            description: _t("only invited people can view and join"),
+                        },
+                    ]}
+                />
+            </div>
+
+            { advancedSection }
+
+            <LabelledToggleSwitch
+                value={historyVisibility === HistoryVisibility.WorldReadable}
+                onChange={(checked: boolean) => {
+                    setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
+                }}
+                disabled={!canSetHistoryVisibility}
+                label={_t("Preview Space")}
+            />
+            <div>{ _t("Allow people to preview your space before they join.") }</div>
+            <b>{ _t("Recommended for public spaces.") }</b>
+        </div>
+
+        <span className="mx_SettingsTab_subheading">{_t("Address")}</span>
+        <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
+            <AliasSettings
+                roomId={space.roomId}
+                canSetCanonicalAlias={canSetCanonical}
+                canSetAliases={true}
+                canonicalAliasEvent={canonicalAliasEv}
+                hidePublishSetting={true}
+            />
+        </div>
+    </div>;
+};
+
+export default SpaceSettingsVisibilityTab;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a744d8e7be..8c04a81807 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1029,6 +1029,28 @@
     "Share invite link": "Share invite link",
     "Invite people": "Invite people",
     "Invite with email or username": "Invite with email or username",
+    "Failed to save space settings.": "Failed to save space settings.",
+    "General": "General",
+    "Edit settings relating to your space.": "Edit settings relating to your space.",
+    "Saving...": "Saving...",
+    "Save Changes": "Save Changes",
+    "Leave Space": "Leave Space",
+    "Failed to update the visibility of this space": "Failed to update the visibility of this space",
+    "Failed to update the guest access of this space": "Failed to update the guest access of this space",
+    "Failed to update the history visibility of this space": "Failed to update the history visibility of this space",
+    "Hide advanced": "Hide advanced",
+    "Enable guest access": "Enable guest access",
+    "Guests can join a space without having an account.": "Guests can join a space without having an account.",
+    "This may be useful for public spaces.": "This may be useful for public spaces.",
+    "Show advanced": "Show advanced",
+    "Visibility": "Visibility",
+    "Decide who can view and join %(spaceName)s.": "Decide who can view and join %(spaceName)s.",
+    "anyone with the link can view and join": "anyone with the link can view and join",
+    "Invite only": "Invite only",
+    "only invited people can view and join": "only invited people can view and join",
+    "Preview Space": "Preview Space",
+    "Allow people to preview your space before they join.": "Allow people to preview your space before they join.",
+    "Recommended for public spaces.": "Recommended for public spaces.",
     "Settings": "Settings",
     "Leave space": "Leave space",
     "Create new room": "Create new room",
@@ -1223,8 +1245,6 @@
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
-    "Hide advanced": "Hide advanced",
-    "Show advanced": "Show advanced",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Set the name of a font installed on your system & %(brand)s will attempt to use it.",
     "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
     "Customise your appearance": "Customise your appearance",
@@ -1245,7 +1265,6 @@
     "Deactivate Account": "Deactivate Account",
     "Deactivate account": "Deactivate account",
     "Discovery": "Discovery",
-    "General": "General",
     "Legal": "Legal",
     "Credits": "Credits",
     "For help with using %(brand)s, click <a>here</a>.": "For help with using %(brand)s, click <a>here</a>.",
@@ -1351,6 +1370,7 @@
     "Upgrade this room to the recommended room version": "Upgrade this room to the recommended room version",
     "this room": "this room",
     "View older messages in %(roomName)s.": "View older messages in %(roomName)s.",
+    "Space information": "Space information",
     "Room information": "Room information",
     "Internal room ID:": "Internal room ID:",
     "Room version": "Room version",
@@ -1675,14 +1695,18 @@
     "Error removing address": "Error removing address",
     "Main address": "Main address",
     "not specified": "not specified",
+    "This space has no local addresses": "This space has no local addresses",
     "This room has no local addresses": "This room has no local addresses",
     "Local address": "Local address",
     "Published Addresses": "Published Addresses",
-    "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.",
+    "Published addresses can be used by anyone on any server to join your space.": "Published addresses can be used by anyone on any server to join your space.",
+    "Published addresses can be used by anyone on any server to join your room.": "Published addresses can be used by anyone on any server to join your room.",
+    "To publish an address, it needs to be set as a local address first.": "To publish an address, it needs to be set as a local address first.",
     "Other published addresses:": "Other published addresses:",
     "No other published addresses yet, add one below": "No other published addresses yet, add one below",
     "New published address (e.g. #alias:server)": "New published address (e.g. #alias:server)",
     "Local Addresses": "Local Addresses",
+    "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)",
     "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)",
     "Show more": "Show more",
     "Error updating flair": "Error updating flair",
@@ -2370,14 +2394,8 @@
     "Share Room Message": "Share Room Message",
     "Link to selected message": "Link to selected message",
     "Command Help": "Command Help",
-    "Failed to save space settings.": "Failed to save space settings.",
     "Space settings": "Space settings",
-    "Edit settings relating to your space.": "Edit settings relating to your space.",
-    "Make this space private": "Make this space private",
-    "Leave Space": "Leave Space",
-    "View dev tools": "View dev tools",
-    "Saving...": "Saving...",
-    "Save Changes": "Save Changes",
+    "Settings - %(spaceName)s": "Settings - %(spaceName)s",
     "To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
     "Missing session data": "Missing session data",
     "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",

From 54241f44c2b50f559862d78b795b3b714ed30746 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 8 Jun 2021 16:40:01 +0100
Subject: [PATCH 050/358] delint

---
 src/components/views/right_panel/PinnedMessagesCard.tsx         | 1 -
 .../views/settings/tabs/room/SecurityRoomSettingsTab.tsx        | 2 +-
 src/components/views/spaces/SpaceSettingsVisibilityTab.tsx      | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index ad62619593..3b1db91689 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, {useCallback, useContext, useEffect, useState} from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from 'matrix-js-sdk/src/@types/event';
 
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 99f525364e..bb7e194253 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -121,7 +121,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
     };
 
-    private onEncryptionChange = (e: React.ChangeEvent) => {
+    private onEncryptionChange = () => {
         Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, {
             title: _t('Enable encryption?'),
             description: _t(
diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
index 7fc3514b2d..9eb4c6eb02 100644
--- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -57,7 +57,6 @@ const useLocalEcho = <T extends any>(
 };
 
 const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
-    const [busy, setBusy] = useState(false);
     const [error, setError] = useState("");
 
     const userId = cli.getUserId();

From 21fc386317d8bc41f5bdbf416c17263a4f7e055d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 10 Jun 2021 11:40:10 +0100
Subject: [PATCH 051/358] Move over to new lexicographic string sorting

---
 src/stores/SpaceStore.tsx           | 65 +++++++++++++++----------
 src/utils/stringOrderField.ts       | 56 ++++++++++++++++++++++
 test/utils/stringOrderField-test.ts | 73 +++++++++++++++++++++++++++++
 3 files changed, 170 insertions(+), 24 deletions(-)
 create mode 100644 src/utils/stringOrderField.ts
 create mode 100644 test/utils/stringOrderField-test.ts

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 5e09b617a7..47c735285c 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -34,6 +34,12 @@ import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
 import { arrayHasOrderChange } from "../utils/arrays";
+import {
+    ALPHABET_END,
+    ALPHABET_START,
+    averageBetweenStrings,
+    midPointsBetweenStrings,
+} from "../utils/stringOrderField";
 
 interface IState {}
 
@@ -61,18 +67,19 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
-// For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
-export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
-    let validatedOrder: string = null;
-
-    if (typeof order === "string" && Array.from(order).every((c: string) => {
+const validOrder = (order: string): string | null => {
+    if (typeof order === "string" && order.length <= 50 && Array.from(order).every((c: string) => {
         const charCode = c.charCodeAt(0);
         return charCode >= 0x20 && charCode <= 0x7E;
     })) {
-        validatedOrder = order;
+        return order;
     }
+    return undefined;
+};
 
-    return [validatedOrder, creationTs, roomId];
+// For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
+export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
+    return [validOrder(order), creationTs, roomId];
 }
 
 const getRoomFn: FetchRoomFn = (room: Room) => {
@@ -625,8 +632,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 
     private getSpaceTagOrdering = (space: Room): string | undefined => {
         if (this.spaceOrderLocalEchoMap.has(space.roomId)) return this.spaceOrderLocalEchoMap.get(space.roomId);
-        const order = space.getAccountData(EventType.SpaceOrder)?.getContent()?.order;
-        return typeof order === "string" ? order : undefined;
+        return validOrder(space.getAccountData(EventType.SpaceOrder)?.getContent()?.order);
     };
 
     private sortRootSpaces(spaces: Room[]): Room[] {
@@ -635,7 +641,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 
     private setRootSpaceOrder(space: Room, order: string): void {
         this.spaceOrderLocalEchoMap.set(space.roomId, order);
-        this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order });
+        this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order }); // TODO retrying, failure
     }
 
     public moveRootSpace(fromIndex: number, toIndex: number): void {
@@ -653,32 +659,42 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         let nextOrder: string;
 
         if (toIndex > fromIndex) {
-            prevOrder = toIndex >= 0 ? orders[toIndex] : "aaaaa";
-            nextOrder = toIndex <= orders.length ? orders[toIndex + 1] : "zzzzz";
+            // moving down
+            prevOrder = orders[toIndex];
+            nextOrder = orders[toIndex + 1];
         } else {
             // accounts for downwards displacement of existing inhabitant of this index
-            prevOrder = toIndex > 0 ? orders[toIndex - 1] : "aaaaa";
-            nextOrder = toIndex < orders.length ? orders[toIndex] : "zzzzz";
+            prevOrder = toIndex > 0 ? orders[toIndex - 1] : String.fromCharCode(ALPHABET_START).repeat(5); // TODO
+            nextOrder = orders[toIndex];
         }
         console.log("@@ start", {fromIndex, toIndex, orders, prevOrder, nextOrder});
 
         if (prevOrder === undefined) {
+            // to be able to move to this toIndex we will first need to insert a bunch of orders for earlier elements
             const firstUndefinedIndex = orders.indexOf(undefined);
             const numUndefined = orders.length - firstUndefinedIndex;
-            const lastOrder = orders[firstUndefinedIndex - 1];
-            console.log("@@ precalc", {firstUndefinedIndex, numUndefined, lastOrder});
-            nextOrder = lastOrder + step;
-            for (let i = firstUndefinedIndex; i < toIndex; i++, nextOrder += step) {
-                console.log("@@ preset", {i, nextOrder});
-                this.setRootSpaceOrder(this.rootSpaces[i], nextOrder);
-            }
+            const lastOrder = orders[firstUndefinedIndex - 1] ?? String.fromCharCode(ALPHABET_START); // TODO
+            nextOrder = String.fromCharCode(ALPHABET_END).repeat(lastOrder.length + 1);
+            const newOrders = midPointsBetweenStrings(lastOrder, nextOrder, numUndefined);
 
-            prevOrder = nextOrder;
-            nextOrder += step;
+            if (newOrders.length === numUndefined) {
+                console.log("@@ precalc", {firstUndefinedIndex, numUndefined, lastOrder, newOrders});
+                for (let i = firstUndefinedIndex, j = 0; i <= toIndex; i++, j++) {
+                    if (i === toIndex && toIndex < fromIndex) continue;
+                    if (i === fromIndex) continue;
+                    const newOrder = newOrders[j];
+                    console.log("@@ preset", {i, j, newOrder});
+                    this.setRootSpaceOrder(this.rootSpaces[i], newOrder);
+                }
+
+                prevOrder = newOrders[newOrders.length - 1];
+            } else {
+                prevOrder = nextOrder; // rebuild
+            }
         }
 
         if (prevOrder !== nextOrder) {
-            const order = prevOrder + ((nextOrder - prevOrder) / 2);
+            const order = averageBetweenStrings(prevOrder, nextOrder ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length + 1));
             console.log("@@ set", {prevOrder, nextOrder, order});
             this.setRootSpaceOrder(space, order);
         } else {
@@ -686,6 +702,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
 
         this.notifyIfOrderChanged();
+        console.log("@@ done", this.rootSpaces.map(this.getSpaceTagOrdering));
     }
 }
 
diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
new file mode 100644
index 0000000000..fce859ddb8
--- /dev/null
+++ b/src/utils/stringOrderField.ts
@@ -0,0 +1,56 @@
+/*
+Copyright 2021 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.
+*/
+
+export const ALPHABET_START = 0x20;
+export const ALPHABET_END = 0x7E;
+export const ALPHABET = new Array(1 + ALPHABET_END - ALPHABET_START)
+    .fill(undefined)
+    .map((_, i) => String.fromCharCode(ALPHABET_START + i))
+    .join("");
+
+export const baseToString = (base: number, alphabet = ALPHABET): string => {
+    base = Math.floor(base);
+    if (base < alphabet.length) return alphabet[base];
+    return baseToString(Math.floor(base / alphabet.length), alphabet) + alphabet[base % alphabet.length];
+};
+
+export const stringToBase = (str: string, alphabet = ALPHABET): number => {
+    let result = 0;
+    for (let i = str.length - 1, j = 0; i >= 0; i--, j++) {
+        result += (str.charCodeAt(i) - alphabet.charCodeAt(0)) * (alphabet.length ** j);
+    }
+    return result;
+};
+
+const pad = (str: string, length: number, alphabet = ALPHABET): string => str.padEnd(length, alphabet[0]);
+
+export const averageBetweenStrings = (a: string, b: string, alphabet = ALPHABET): string => {
+    const n = Math.max(a.length, b.length);
+    const aBase = stringToBase(pad(a, n, alphabet), alphabet);
+    const bBase = stringToBase(pad(b, n, alphabet), alphabet);
+    return baseToString((aBase + bBase) / 2, alphabet);
+};
+
+export const midPointsBetweenStrings = (a: string, b: string, count: number, alphabet = ALPHABET): string[] => {
+    const n = Math.max(a.length, b.length);
+    const aBase = stringToBase(pad(a, n, alphabet), alphabet);
+    const bBase = stringToBase(pad(b, n, alphabet), alphabet);
+    const step = (bBase - aBase) / (count + 1);
+    if (step < 1) {
+        return [];
+    }
+    return Array(count).fill(undefined).map((_, i) => baseToString(aBase + step + (i * step), alphabet));
+};
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
new file mode 100644
index 0000000000..5b8c2f3feb
--- /dev/null
+++ b/test/utils/stringOrderField-test.ts
@@ -0,0 +1,73 @@
+/*
+Copyright 2021 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 {
+    ALPHABET,
+    averageBetweenStrings,
+    baseToString,
+    midPointsBetweenStrings,
+    stringToBase,
+} from "../../src/utils/stringOrderField";
+
+describe("stringOrderField", () => {
+    it("stringToBase", () => {
+        expect(stringToBase(" ")).toBe(0);
+        expect(stringToBase("a")).toBe(65);
+        expect(stringToBase("aa")).toBe(6240);
+        expect(stringToBase("cat")).toBe(610934);
+        expect(stringToBase("doggo")).toBe(5607022724);
+        expect(stringToBase(" ")).toEqual(0);
+        expect(stringToBase("a", "abcdefghijklmnopqrstuvwxyz")).toEqual(0);
+        expect(stringToBase("a")).toEqual(65);
+        expect(stringToBase("c", "abcdefghijklmnopqrstuvwxyz")).toEqual(2);
+        expect(stringToBase("ab")).toEqual(6241);
+        expect(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz")).toEqual(53);
+    });
+
+    it("baseToString", () => {
+        expect(baseToString(10)).toBe(ALPHABET[10]);
+        expect(baseToString(10, "abcdefghijklmnopqrstuvwxyz")).toEqual("k");
+        expect(baseToString(6241)).toEqual("ab");
+        expect(baseToString(53, "abcdefghijklmnopqrstuvwxyz")).toEqual("cb");
+        expect(baseToString(1234)).toBe(",~");
+    });
+
+    it("averageBetweenStrings", () => {
+        [
+            { a: "a", b: "z", output: `m` },
+            { a: "ba", b: "z", output: `n@` },
+            { a: "z", b: "ba", output: `n@` },
+            { a: "#    ", b: "$8888", output: `#[[[[` },
+            { a: "cat", b: "doggo", output: `d9>Cw` },
+            { a: "cat", b: "doggo", output: "cumqh", alphabet: "abcdefghijklmnopqrstuvwxyz" },
+            { a: "aa", b: "zz", output: "mz", alphabet: "abcdefghijklmnopqrstuvwxyz" },
+            { a: "a", b: "z", output: "m", alphabet: "abcdefghijklmnopqrstuvwxyz" },
+            { a: "AA", b: "zz", output: "^." },
+            { a: "A", b: "z", output: "]" },
+        ].forEach((c) => {
+            // assert that the output string falls lexicographically between `a` and `b`
+            expect([c.a, c.b, c.output].sort()[1]).toBe(c.output);
+            expect(averageBetweenStrings(c.a, c.b, c.alphabet)).toBe(c.output);
+        });
+    });
+
+    it("midPointsBetweenStrings", () => {
+        expect(midPointsBetweenStrings("a", "e", 3)).toStrictEqual(["b", "c", "d"]);
+        expect(midPointsBetweenStrings("a", "e", 0)).toStrictEqual([]);
+        expect(midPointsBetweenStrings("a", "e", 4)).toStrictEqual([]);
+    });
+});
+

From a4fa2779d4a40bd8a2eeeb65d96fa61cacd836e5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 11 Jun 2021 10:33:00 +0100
Subject: [PATCH 052/358] Iterate lexicographic ordering implementation

---
 src/stores/SpaceStore.tsx           | 69 ++++---------------------
 src/utils/arrays.ts                 | 17 ++++++-
 src/utils/stringOrderField.ts       | 79 +++++++++++++++++++++++++++++
 test/utils/stringOrderField-test.ts | 76 +++++++++++++++++++++++++++
 4 files changed, 180 insertions(+), 61 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 47c735285c..d0ec573306 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -34,12 +34,7 @@ import {setHasDiff} from "../utils/sets";
 import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
 import { arrayHasOrderChange } from "../utils/arrays";
-import {
-    ALPHABET_END,
-    ALPHABET_START,
-    averageBetweenStrings,
-    midPointsBetweenStrings,
-} from "../utils/stringOrderField";
+import { reorderLexicographically } from "../utils/stringOrderField";
 
 interface IState {}
 
@@ -645,64 +640,18 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     }
 
     public moveRootSpace(fromIndex: number, toIndex: number): void {
-        if (
-            fromIndex < 0 || toIndex < 0 ||
-            fromIndex > this.rootSpaces.length || toIndex > this.rootSpaces.length ||
-            fromIndex === toIndex
-        ) {
-            return;
-        }
-        const space = this.rootSpaces[fromIndex];
-        const orders = this.rootSpaces.map(this.getSpaceTagOrdering);
+        const currentOrders = this.rootSpaces.map(this.getSpaceTagOrdering);
+        const changes = reorderLexicographically(currentOrders, fromIndex, toIndex);
 
-        let prevOrder: string;
-        let nextOrder: string;
+        changes.forEach(({ index, order }) => {
+            this.setRootSpaceOrder(this.rootSpaces[index], order);
+        });
 
-        if (toIndex > fromIndex) {
-            // moving down
-            prevOrder = orders[toIndex];
-            nextOrder = orders[toIndex + 1];
+        if (changes.length) {
+            this.notifyIfOrderChanged();
         } else {
-            // accounts for downwards displacement of existing inhabitant of this index
-            prevOrder = toIndex > 0 ? orders[toIndex - 1] : String.fromCharCode(ALPHABET_START).repeat(5); // TODO
-            nextOrder = orders[toIndex];
+            // TODO
         }
-        console.log("@@ start", {fromIndex, toIndex, orders, prevOrder, nextOrder});
-
-        if (prevOrder === undefined) {
-            // to be able to move to this toIndex we will first need to insert a bunch of orders for earlier elements
-            const firstUndefinedIndex = orders.indexOf(undefined);
-            const numUndefined = orders.length - firstUndefinedIndex;
-            const lastOrder = orders[firstUndefinedIndex - 1] ?? String.fromCharCode(ALPHABET_START); // TODO
-            nextOrder = String.fromCharCode(ALPHABET_END).repeat(lastOrder.length + 1);
-            const newOrders = midPointsBetweenStrings(lastOrder, nextOrder, numUndefined);
-
-            if (newOrders.length === numUndefined) {
-                console.log("@@ precalc", {firstUndefinedIndex, numUndefined, lastOrder, newOrders});
-                for (let i = firstUndefinedIndex, j = 0; i <= toIndex; i++, j++) {
-                    if (i === toIndex && toIndex < fromIndex) continue;
-                    if (i === fromIndex) continue;
-                    const newOrder = newOrders[j];
-                    console.log("@@ preset", {i, j, newOrder});
-                    this.setRootSpaceOrder(this.rootSpaces[i], newOrder);
-                }
-
-                prevOrder = newOrders[newOrders.length - 1];
-            } else {
-                prevOrder = nextOrder; // rebuild
-            }
-        }
-
-        if (prevOrder !== nextOrder) {
-            const order = averageBetweenStrings(prevOrder, nextOrder ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length + 1));
-            console.log("@@ set", {prevOrder, nextOrder, order});
-            this.setRootSpaceOrder(space, order);
-        } else {
-            // TODO REBUILD
-        }
-
-        this.notifyIfOrderChanged();
-        console.log("@@ done", this.rootSpaces.map(this.getSpaceTagOrdering));
     }
 }
 
diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
index e527f43c29..d319631d93 100644
--- a/src/utils/arrays.ts
+++ b/src/utils/arrays.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {percentageOf, percentageWithin} from "./numbers";
+import { percentageOf, percentageWithin } from "./numbers";
 
 /**
  * Quickly resample an array to have less/more data points. If an input which is larger
@@ -223,6 +223,21 @@ export function arrayMerge<T>(...a: T[][]): T[] {
     }, new Set<T>()));
 }
 
+/**
+ * Moves a single element from fromIndex to toIndex.
+ * @param list the list from which to construct the new list.
+ * @param fromIndex the index of the element to move.
+ * @param toIndex the index of where to put the element.
+ * @returns A new array with the requested value moved.
+ */
+export function reorder<T>(list: T[], fromIndex: number, toIndex: number): T[] {
+    const result = Array.from(list);
+    const [removed] = result.splice(fromIndex, 1);
+    result.splice(toIndex, 0, removed);
+
+    return result;
+}
+
 /**
  * Helper functions to perform LINQ-like queries on arrays.
  */
diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index fce859ddb8..ab65a46cb2 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { reorder } from "./arrays";
+
 export const ALPHABET_START = 0x20;
 export const ALPHABET_END = 0x7E;
 export const ALPHABET = new Array(1 + ALPHABET_END - ALPHABET_START)
@@ -54,3 +56,80 @@ export const midPointsBetweenStrings = (a: string, b: string, count: number, alp
     }
     return Array(count).fill(undefined).map((_, i) => baseToString(aBase + step + (i * step), alphabet));
 };
+
+interface IEntry {
+    index: number;
+    order: string;
+}
+
+export const reorderLexicographically = (
+    orders: Array<string | undefined>,
+    fromIndex: number,
+    toIndex: number,
+): IEntry[] => {
+    if (
+        fromIndex < 0 || toIndex < 0 ||
+        fromIndex > orders.length || toIndex > orders.length ||
+        fromIndex === toIndex
+    ) {
+        return [];
+    }
+
+    const ordersWithIndices: IEntry[] = orders.map((order, index) => ({ index, order }));
+    const newOrder = reorder(ordersWithIndices, fromIndex, toIndex);
+
+    const isMoveTowardsRight = toIndex > fromIndex;
+    const orderToLeftUndefined = newOrder[toIndex - 1]?.order === undefined;
+
+    let leftBoundIdx = toIndex;
+    let rightBoundIdx = toIndex;
+
+    const canDisplaceLeft = isMoveTowardsRight || orderToLeftUndefined || true; // TODO
+    if (canDisplaceLeft) {
+        const nextBase = newOrder[toIndex + 1]?.order !== undefined
+            ? stringToBase(newOrder[toIndex + 1].order)
+            : Number.MAX_VALUE;
+        for (let i = toIndex - 1, j = 0; i >= 0; i--, j++) {
+            if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
+            leftBoundIdx = i;
+        }
+    }
+
+    const canDisplaceRight = !orderToLeftUndefined;
+    // TODO check if there is enough space on the right hand side at all,
+    // I guess find the last set order and then compare it to prevBase + $requiredGap
+    if (canDisplaceRight) {
+        const prevBase = newOrder[toIndex - 1]?.order !== undefined
+            ? stringToBase(newOrder[toIndex - 1]?.order)
+            : Number.MIN_VALUE;
+        for (let i = toIndex + 1, j = 0; i < newOrder.length; i++, j++) {
+            if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break; // TODO verify
+            rightBoundIdx = i;
+        }
+    }
+
+    const leftDiff = toIndex - leftBoundIdx;
+    const rightDiff = rightBoundIdx - toIndex;
+
+    if (orderToLeftUndefined || leftDiff < rightDiff) {
+        rightBoundIdx = toIndex;
+    } else {
+        leftBoundIdx = toIndex;
+    }
+
+    const prevOrder = newOrder[leftBoundIdx - 1]?.order
+        ?? String.fromCharCode(ALPHABET_START).repeat(5); // TODO
+    const nextOrder = newOrder[rightBoundIdx + 1]?.order
+        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length + 1); // TODO
+
+    const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx);
+    // TODO If we exceed maxLen then reorder EVERYTHING
+
+    console.log("@@ test", { prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined });
+
+    return changes.map((order, i) => {
+        const index = newOrder[leftBoundIdx + i].index;
+
+        return { index, order };
+    });
+};
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index 5b8c2f3feb..8e3ae06b79 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -14,14 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { sortBy } from "lodash";
+
 import {
     ALPHABET,
     averageBetweenStrings,
     baseToString,
     midPointsBetweenStrings,
+    reorderLexicographically,
     stringToBase,
 } from "../../src/utils/stringOrderField";
 
+const moveLexicographicallyTest = (
+    orders: Array<string | undefined>,
+    fromIndex: number,
+    toIndex: number,
+    expectedIndices: number[],
+): void => {
+    const ops = reorderLexicographically(orders, fromIndex, toIndex);
+    expect(ops.map(o => o.index).sort()).toStrictEqual(expectedIndices.sort());
+
+    const zipped: Array<[number, string | undefined]> = orders.map((o, i) => [i, o]);
+    ops.forEach(({ index, order }) => {
+        zipped[index][1] = order;
+    });
+
+    const newOrders = sortBy(zipped, i => i[1]);
+    console.log("@@ moveLexicographicallyTest", {orders, zipped, newOrders, fromIndex, toIndex, ops});
+    expect(newOrders[toIndex][0]).toBe(fromIndex);
+};
+
 describe("stringOrderField", () => {
     it("stringToBase", () => {
         expect(stringToBase(" ")).toBe(0);
@@ -35,6 +57,9 @@ describe("stringOrderField", () => {
         expect(stringToBase("c", "abcdefghijklmnopqrstuvwxyz")).toEqual(2);
         expect(stringToBase("ab")).toEqual(6241);
         expect(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz")).toEqual(53);
+        expect(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")).toEqual(4.5115969857961825e+78);
+        expect(stringToBase("~".repeat(50))).toEqual(7.694497527671333e+98);
+        // expect(typeof stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")).toEqual("bigint");
     });
 
     it("baseToString", () => {
@@ -57,11 +82,18 @@ describe("stringOrderField", () => {
             { a: "a", b: "z", output: "m", alphabet: "abcdefghijklmnopqrstuvwxyz" },
             { a: "AA", b: "zz", output: "^." },
             { a: "A", b: "z", output: "]" },
+            {
+                a: "A".repeat(50),
+                b: "Z".repeat(50),
+                output: "M}M}M}N ba`54Qpt\\\\Z+kNA#O(9}z>@2jJm]%Y^$m<8lRzz/2[Y",
+            },
         ].forEach((c) => {
             // assert that the output string falls lexicographically between `a` and `b`
             expect([c.a, c.b, c.output].sort()[1]).toBe(c.output);
             expect(averageBetweenStrings(c.a, c.b, c.alphabet)).toBe(c.output);
         });
+
+        expect(averageBetweenStrings("Q#!x+k", "V6yr>L")).toBe("S\\Mu5,");
     });
 
     it("midPointsBetweenStrings", () => {
@@ -69,5 +101,49 @@ describe("stringOrderField", () => {
         expect(midPointsBetweenStrings("a", "e", 0)).toStrictEqual([]);
         expect(midPointsBetweenStrings("a", "e", 4)).toStrictEqual([]);
     });
+
+    it("moveLexicographically left", () => {
+        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 2, 1, [2]);
+    });
+
+    it("moveLexicographically right", () => {
+        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 1, 2, [1]);
+    });
+
+    it("moveLexicographically all undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined, undefined, undefined],
+            4,
+            1,
+            [0, 4],
+        );
+    });
+
+    it("moveLexicographically all undefined to end", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined, undefined, undefined],
+            1,
+            4,
+            [0, 1, 2, 3, 4],
+        );
+    });
+
+    it("moveLexicographically some undefined move left", () => {
+        moveLexicographicallyTest(
+            ["a", "c", "e", undefined, undefined, undefined],
+            5,
+            2,
+            [5],
+        );
+    });
+
+    it("moveLexicographically some undefined move left close", () => {
+        moveLexicographicallyTest(
+            ["a", "a", "e", undefined, undefined, undefined],
+            5,
+            1,
+            [1, 5],
+        );
+    });
 });
 

From 3d4411390f0f041241768dad7524f9e2cb465983 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 11 Jun 2021 16:28:07 +0100
Subject: [PATCH 053/358] write a shedload more tests

---
 src/utils/stringOrderField.ts       |  46 ++++---
 test/utils/stringOrderField-test.ts | 191 ++++++++++++++++++++++------
 2 files changed, 181 insertions(+), 56 deletions(-)

diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index ab65a46cb2..8c5d7260e7 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -39,21 +39,32 @@ export const stringToBase = (str: string, alphabet = ALPHABET): number => {
 
 const pad = (str: string, length: number, alphabet = ALPHABET): string => str.padEnd(length, alphabet[0]);
 
-export const averageBetweenStrings = (a: string, b: string, alphabet = ALPHABET): string => {
-    const n = Math.max(a.length, b.length);
-    const aBase = stringToBase(pad(a, n, alphabet), alphabet);
-    const bBase = stringToBase(pad(b, n, alphabet), alphabet);
-    return baseToString((aBase + bBase) / 2, alphabet);
-};
-
-export const midPointsBetweenStrings = (a: string, b: string, count: number, alphabet = ALPHABET): string[] => {
-    const n = Math.max(a.length, b.length);
-    const aBase = stringToBase(pad(a, n, alphabet), alphabet);
-    const bBase = stringToBase(pad(b, n, alphabet), alphabet);
-    const step = (bBase - aBase) / (count + 1);
-    if (step < 1) {
+export const midPointsBetweenStrings = (
+    a: string,
+    b: string,
+    count: number,
+    maxLen: number,
+    alphabet = ALPHABET,
+): string[] => {
+    const n = Math.min(maxLen, Math.max(a.length, b.length));
+    const aPadded = pad(a, n, alphabet);
+    const bPadded = pad(b, n, alphabet);
+    const aBase = stringToBase(aPadded, alphabet);
+    const bBase = stringToBase(bPadded, alphabet);
+    if (bBase - aBase - 1 < count) {
+        if (n < maxLen) {
+            // this recurses once at most due to the new limit of n+1
+            return midPointsBetweenStrings(
+                pad(aPadded, n + 1, alphabet),
+                pad(bPadded, n + 1, alphabet),
+                count,
+                n + 1,
+                alphabet,
+            );
+        }
         return [];
     }
+    const step = (bBase - aBase) / (count + 1);
     return Array(count).fill(undefined).map((_, i) => baseToString(aBase + step + (i * step), alphabet));
 };
 
@@ -66,6 +77,7 @@ export const reorderLexicographically = (
     orders: Array<string | undefined>,
     fromIndex: number,
     toIndex: number,
+    maxLen = 50,
 ): IEntry[] => {
     if (
         fromIndex < 0 || toIndex < 0 ||
@@ -89,7 +101,7 @@ export const reorderLexicographically = (
         const nextBase = newOrder[toIndex + 1]?.order !== undefined
             ? stringToBase(newOrder[toIndex + 1].order)
             : Number.MAX_VALUE;
-        for (let i = toIndex - 1, j = 0; i >= 0; i--, j++) {
+        for (let i = toIndex - 1, j = 1; i >= 0; i--, j++) {
             if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
             leftBoundIdx = i;
         }
@@ -102,7 +114,7 @@ export const reorderLexicographically = (
         const prevBase = newOrder[toIndex - 1]?.order !== undefined
             ? stringToBase(newOrder[toIndex - 1]?.order)
             : Number.MIN_VALUE;
-        for (let i = toIndex + 1, j = 0; i < newOrder.length; i++, j++) {
+        for (let i = toIndex + 1, j = 1; i < newOrder.length; i++, j++) {
             if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break; // TODO verify
             rightBoundIdx = i;
         }
@@ -122,10 +134,10 @@ export const reorderLexicographically = (
     const nextOrder = newOrder[rightBoundIdx + 1]?.order
         ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length + 1); // TODO
 
-    const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx);
+    const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx, maxLen);
     // TODO If we exceed maxLen then reorder EVERYTHING
 
-    console.log("@@ test", { prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined });
+    console.log("@@ test", { prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined, leftDiff, rightDiff });
 
     return changes.map((order, i) => {
         const index = newOrder[leftBoundIdx + i].index;
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index 8e3ae06b79..335db028a8 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -18,7 +18,6 @@ import { sortBy } from "lodash";
 
 import {
     ALPHABET,
-    averageBetweenStrings,
     baseToString,
     midPointsBetweenStrings,
     reorderLexicographically,
@@ -29,10 +28,10 @@ const moveLexicographicallyTest = (
     orders: Array<string | undefined>,
     fromIndex: number,
     toIndex: number,
-    expectedIndices: number[],
+    expectedChanges: number,
+    maxLength?: number,
 ): void => {
-    const ops = reorderLexicographically(orders, fromIndex, toIndex);
-    expect(ops.map(o => o.index).sort()).toStrictEqual(expectedIndices.sort());
+    const ops = reorderLexicographically(orders, fromIndex, toIndex, maxLength);
 
     const zipped: Array<[number, string | undefined]> = orders.map((o, i) => [i, o]);
     ops.forEach(({ index, order }) => {
@@ -42,6 +41,7 @@ const moveLexicographicallyTest = (
     const newOrders = sortBy(zipped, i => i[1]);
     console.log("@@ moveLexicographicallyTest", {orders, zipped, newOrders, fromIndex, toIndex, ops});
     expect(newOrders[toIndex][0]).toBe(fromIndex);
+    expect(ops).toHaveLength(expectedChanges);
 };
 
 describe("stringOrderField", () => {
@@ -70,44 +70,20 @@ describe("stringOrderField", () => {
         expect(baseToString(1234)).toBe(",~");
     });
 
-    it("averageBetweenStrings", () => {
-        [
-            { a: "a", b: "z", output: `m` },
-            { a: "ba", b: "z", output: `n@` },
-            { a: "z", b: "ba", output: `n@` },
-            { a: "#    ", b: "$8888", output: `#[[[[` },
-            { a: "cat", b: "doggo", output: `d9>Cw` },
-            { a: "cat", b: "doggo", output: "cumqh", alphabet: "abcdefghijklmnopqrstuvwxyz" },
-            { a: "aa", b: "zz", output: "mz", alphabet: "abcdefghijklmnopqrstuvwxyz" },
-            { a: "a", b: "z", output: "m", alphabet: "abcdefghijklmnopqrstuvwxyz" },
-            { a: "AA", b: "zz", output: "^." },
-            { a: "A", b: "z", output: "]" },
-            {
-                a: "A".repeat(50),
-                b: "Z".repeat(50),
-                output: "M}M}M}N ba`54Qpt\\\\Z+kNA#O(9}z>@2jJm]%Y^$m<8lRzz/2[Y",
-            },
-        ].forEach((c) => {
-            // assert that the output string falls lexicographically between `a` and `b`
-            expect([c.a, c.b, c.output].sort()[1]).toBe(c.output);
-            expect(averageBetweenStrings(c.a, c.b, c.alphabet)).toBe(c.output);
-        });
-
-        expect(averageBetweenStrings("Q#!x+k", "V6yr>L")).toBe("S\\Mu5,");
-    });
-
     it("midPointsBetweenStrings", () => {
-        expect(midPointsBetweenStrings("a", "e", 3)).toStrictEqual(["b", "c", "d"]);
-        expect(midPointsBetweenStrings("a", "e", 0)).toStrictEqual([]);
-        expect(midPointsBetweenStrings("a", "e", 4)).toStrictEqual([]);
+        const midpoints = ["a", ...midPointsBetweenStrings("a", "e", 3, 1), "e"].sort();
+        expect(midpoints[0]).toBe("a");
+        expect(midpoints[4]).toBe("e");
+        expect(midPointsBetweenStrings("a", "e", 0, 1)).toStrictEqual([]);
+        expect(midPointsBetweenStrings("a", "e", 4, 1)).toStrictEqual([]);
     });
 
     it("moveLexicographically left", () => {
-        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 2, 1, [2]);
+        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 2, 1, 1);
     });
 
     it("moveLexicographically right", () => {
-        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 1, 2, [1]);
+        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 1, 2, 1);
     });
 
     it("moveLexicographically all undefined", () => {
@@ -115,7 +91,7 @@ describe("stringOrderField", () => {
             [undefined, undefined, undefined, undefined, undefined, undefined],
             4,
             1,
-            [0, 4],
+            2,
         );
     });
 
@@ -124,7 +100,7 @@ describe("stringOrderField", () => {
             [undefined, undefined, undefined, undefined, undefined, undefined],
             1,
             4,
-            [0, 1, 2, 3, 4],
+            5,
         );
     });
 
@@ -133,7 +109,7 @@ describe("stringOrderField", () => {
             ["a", "c", "e", undefined, undefined, undefined],
             5,
             2,
-            [5],
+            1,
         );
     });
 
@@ -142,7 +118,144 @@ describe("stringOrderField", () => {
             ["a", "a", "e", undefined, undefined, undefined],
             5,
             1,
-            [1, 5],
+            2,
+        );
+    });
+
+    it("test A moving to the start when all is undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined],
+            2,
+            0,
+            1,
+        );
+    });
+
+    it("test B moving to the end when all is undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined],
+            1,
+            3,
+            4,
+        );
+    });
+
+    it("test C moving left when all is undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined, undefined, undefined],
+            4,
+            1,
+            2,
+        );
+    });
+
+    it("test D moving right when all is undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined],
+            1,
+            2,
+            3,
+        );
+    });
+
+    it("test E moving more right when all is undefined", () => {
+        moveLexicographicallyTest(
+            [undefined, undefined, undefined, undefined, undefined, /**/ undefined, undefined],
+            1,
+            4,
+            5,
+        );
+    });
+
+    it("test F moving left when right is undefined", () => {
+        moveLexicographicallyTest(
+            ["20", undefined, undefined, undefined, undefined, undefined],
+            4,
+            2,
+            2,
+        );
+    });
+
+    it("test G moving right when right is undefined", () => {
+        moveLexicographicallyTest(
+            ["50", undefined, undefined, undefined, undefined, /**/ undefined, undefined],
+            1,
+            4,
+            4,
+        );
+    });
+
+    it("test H moving left when right is defined", () => {
+        moveLexicographicallyTest(
+            ["10", "20", "30", "40", undefined, undefined],
+            3,
+            1,
+            1,
+        );
+    });
+
+    it("test I moving right when right is defined", () => {
+        moveLexicographicallyTest(
+            ["10", "20", "30", "40", "50", undefined],
+            1,
+            3,
+            1,
+        );
+    });
+
+    it("test J moving left when all is defined", () => {
+        moveLexicographicallyTest(
+            ["11", "13", "15", "17", "19"],
+            2,
+            1,
+            1,
+        );
+    });
+
+    it("test K moving right when all is defined", () => {
+        moveLexicographicallyTest(
+            ["11", "13", "15", "17", "19"],
+            1,
+            2,
+            1,
+        );
+    });
+
+    it("test L moving left into no left space", () => {
+        moveLexicographicallyTest(
+            ["11", "12", "13", "14", "19"],
+            3,
+            1,
+            2,
+            2,
+        );
+    });
+
+    it("test M moving right into no right space", () => {
+        moveLexicographicallyTest(
+            ["15", "16", "17", "18", "19"],
+            1,
+            3,
+            2,
+            2,
+        );
+    });
+
+    it("test N moving right into no left space", () => {
+        moveLexicographicallyTest(
+            ["11", "12", "13", "14", "15", "16", undefined],
+            1,
+            3,
+            3,
+        );
+    });
+
+    it("test O moving left into no right space", () => {
+        moveLexicographicallyTest(
+            ["15", "16", "17", "18", "19"],
+            4,
+            3,
+            2,
         );
     });
 });

From bd71bcca5a83380796ee63400c546edd43499fd5 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Fri, 11 Jun 2021 17:38:16 +0200
Subject: [PATCH 054/358] Allow modal widget buttons to be disabled when the
 modal opens

---
 src/components/views/dialogs/ModalWidgetDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index 0c474b160c..df2ed6b335 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -63,7 +63,8 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
 
     state: IState = {
-        disabledButtonIds: [],
+        disabledButtonIds: (this.props.widgetDefinition.buttons || []).filter(b => b.disabled)
+            .map(b => b.id),
     };
 
     constructor(props) {

From 5ae1b1444f4927f923356709d6eadd8c8c30604b Mon Sep 17 00:00:00 2001
From: Aaron Raimist <aaron@raim.ist>
Date: Fri, 11 Jun 2021 23:24:05 -0500
Subject: [PATCH 055/358] Open local addresses section by default when there
 are no existing local addresses

Signed-off-by: Aaron Raimist <aaron@raim.ist>
---
 src/components/views/room_settings/AliasSettings.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 80e0099ab3..e493cba96f 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -134,6 +134,10 @@ export default class AliasSettings extends React.Component {
                 }
             }
             this.setState({ localAliases });
+
+            if (localAliases.length === 0) {
+                this.setState({ detailsOpen: true });
+            }
         } finally {
             this.setState({ localAliasesLoading: false });
         }
@@ -388,7 +392,7 @@ export default class AliasSettings extends React.Component {
                 />
                 <span className='mx_SettingsTab_subheading mx_AliasSettings_localAliasHeader'>{_t("Local Addresses")}</span>
                 <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
-                <details onToggle={this.onLocalAliasesToggled}>
+                <details onToggle={this.onLocalAliasesToggled} open={this.state.detailsOpen}>
                     <summary>{ this.state.detailsOpen ? _t('Show less') : _t("Show more")}</summary>
                     {localAliasesList}
                 </details>

From b8458c0ae323f80525211bdc048a8f01f5f36763 Mon Sep 17 00:00:00 2001
From: Aaron Raimist <aaron@raim.ist>
Date: Fri, 11 Jun 2021 23:58:16 -0500
Subject: [PATCH 056/358] fix test maybe

Signed-off-by: Aaron Raimist <aaron@raim.ist>
---
 test/end-to-end-tests/src/usecases/room-settings.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/end-to-end-tests/src/usecases/room-settings.js b/test/end-to-end-tests/src/usecases/room-settings.js
index abd4488db2..654c461296 100644
--- a/test/end-to-end-tests/src/usecases/room-settings.js
+++ b/test/end-to-end-tests/src/usecases/room-settings.js
@@ -140,8 +140,6 @@ async function changeRoomSettings(session, settings) {
 
     if (settings.alias) {
         session.log.step(`sets alias to ${settings.alias}`);
-        const summary = await session.query(".mx_RoomSettingsDialog .mx_AliasSettings summary");
-        await summary.click();
         const aliasField = await session.query(".mx_RoomSettingsDialog .mx_AliasSettings details input[type=text]");
         await session.replaceInputText(aliasField, settings.alias.substring(1, settings.alias.lastIndexOf(":")));
         const addButton = await session.query(".mx_RoomSettingsDialog .mx_AliasSettings details .mx_AccessibleButton");

From 4af2675e235ec1cee07d4a1c760653b94274b58c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Jun 2021 14:37:05 +0100
Subject: [PATCH 057/358] stash bigint support

---
 src/utils/stringOrderField.ts       |  77 +++++++++------
 test/utils/stringOrderField-test.ts | 147 +++++++++++++++++++++-------
 2 files changed, 160 insertions(+), 64 deletions(-)

diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index 8c5d7260e7..d837dd4cbf 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -23,16 +23,17 @@ export const ALPHABET = new Array(1 + ALPHABET_END - ALPHABET_START)
     .map((_, i) => String.fromCharCode(ALPHABET_START + i))
     .join("");
 
-export const baseToString = (base: number, alphabet = ALPHABET): string => {
-    base = Math.floor(base);
-    if (base < alphabet.length) return alphabet[base];
-    return baseToString(Math.floor(base / alphabet.length), alphabet) + alphabet[base % alphabet.length];
+export const baseToString = (base: bigint, alphabet = ALPHABET): string => {
+    const len = BigInt(alphabet.length);
+    if (base < len) return alphabet[Number(base)];
+    return baseToString(base / len, alphabet) + alphabet[Number(base % len)];
 };
 
-export const stringToBase = (str: string, alphabet = ALPHABET): number => {
-    let result = 0;
-    for (let i = str.length - 1, j = 0; i >= 0; i--, j++) {
-        result += (str.charCodeAt(i) - alphabet.charCodeAt(0)) * (alphabet.length ** j);
+export const stringToBase = (str: string, alphabet = ALPHABET): bigint => {
+    let result = BigInt(0);
+    const len = BigInt(alphabet.length);
+    for (let i = str.length - 1, j = BigInt(0); i >= 0; i--, j++) {
+        result += BigInt(str.charCodeAt(i) - alphabet.charCodeAt(0)) * (len ** j);
     }
     return result;
 };
@@ -51,7 +52,7 @@ export const midPointsBetweenStrings = (
     const bPadded = pad(b, n, alphabet);
     const aBase = stringToBase(aPadded, alphabet);
     const bBase = stringToBase(bPadded, alphabet);
-    if (bBase - aBase - 1 < count) {
+    if (bBase - aBase - BigInt(1) < count) {
         if (n < maxLen) {
             // this recurses once at most due to the new limit of n+1
             return midPointsBetweenStrings(
@@ -64,8 +65,9 @@ export const midPointsBetweenStrings = (
         }
         return [];
     }
-    const step = (bBase - aBase) / (count + 1);
-    return Array(count).fill(undefined).map((_, i) => baseToString(aBase + step + (i * step), alphabet));
+    const step = (bBase - aBase) / BigInt(count + 1);
+    const start = BigInt(aBase + step);
+    return Array(count).fill(undefined).map((_, i) => baseToString(start + (BigInt(i) * step), alphabet));
 };
 
 interface IEntry {
@@ -79,6 +81,7 @@ export const reorderLexicographically = (
     toIndex: number,
     maxLen = 50,
 ): IEntry[] => {
+    // sanity check inputs
     if (
         fromIndex < 0 || toIndex < 0 ||
         fromIndex > orders.length || toIndex > orders.length ||
@@ -87,41 +90,56 @@ export const reorderLexicographically = (
         return [];
     }
 
+    // zip orders with their indices to simplify later index wrangling
     const ordersWithIndices: IEntry[] = orders.map((order, index) => ({ index, order }));
+    // apply the fundamental order update to the zipped array
     const newOrder = reorder(ordersWithIndices, fromIndex, toIndex);
 
-    const isMoveTowardsRight = toIndex > fromIndex;
     const orderToLeftUndefined = newOrder[toIndex - 1]?.order === undefined;
 
     let leftBoundIdx = toIndex;
     let rightBoundIdx = toIndex;
 
-    const canDisplaceLeft = isMoveTowardsRight || orderToLeftUndefined || true; // TODO
-    if (canDisplaceLeft) {
-        const nextBase = newOrder[toIndex + 1]?.order !== undefined
-            ? stringToBase(newOrder[toIndex + 1].order)
-            : Number.MAX_VALUE;
-        for (let i = toIndex - 1, j = 1; i >= 0; i--, j++) {
-            if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
-            leftBoundIdx = i;
-        }
+    let canMoveLeft = true;
+    const nextBase = newOrder[toIndex + 1]?.order !== undefined
+        ? stringToBase(newOrder[toIndex + 1].order)
+        : BigInt(Number.MAX_VALUE);
+
+    for (let i = toIndex - 1, j = 1; i >= 0; i--, j++) {
+        if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
+        leftBoundIdx = i;
+    }
+
+    if (leftBoundIdx === 0 &&
+        newOrder[0].order !== undefined &&
+        nextBase - stringToBase(newOrder[0].order) < toIndex
+    ) {
+        canMoveLeft = false;
     }
 
     const canDisplaceRight = !orderToLeftUndefined;
-    // TODO check if there is enough space on the right hand side at all,
-    // I guess find the last set order and then compare it to prevBase + $requiredGap
+    let canMoveRight = canDisplaceRight;
     if (canDisplaceRight) {
         const prevBase = newOrder[toIndex - 1]?.order !== undefined
             ? stringToBase(newOrder[toIndex - 1]?.order)
-            : Number.MIN_VALUE;
+            : BigInt(Number.MIN_VALUE);
+
         for (let i = toIndex + 1, j = 1; i < newOrder.length; i++, j++) {
             if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break; // TODO verify
             rightBoundIdx = i;
         }
+
+        if (rightBoundIdx === newOrder.length - 1 &&
+            (newOrder[rightBoundIdx]
+                ? stringToBase(newOrder[rightBoundIdx].order)
+                : BigInt(Number.MAX_VALUE)) - prevBase <= (rightBoundIdx - toIndex)
+        ) {
+            canMoveRight = false;
+        }
     }
 
-    const leftDiff = toIndex - leftBoundIdx;
-    const rightDiff = rightBoundIdx - toIndex;
+    const leftDiff = canMoveLeft ? toIndex - leftBoundIdx : Number.MAX_SAFE_INTEGER;
+    const rightDiff = canMoveRight ? rightBoundIdx - toIndex : Number.MAX_SAFE_INTEGER;
 
     if (orderToLeftUndefined || leftDiff < rightDiff) {
         rightBoundIdx = toIndex;
@@ -130,14 +148,13 @@ export const reorderLexicographically = (
     }
 
     const prevOrder = newOrder[leftBoundIdx - 1]?.order
-        ?? String.fromCharCode(ALPHABET_START).repeat(5); // TODO
+        ?? String.fromCharCode(ALPHABET_START).repeat(5);
     const nextOrder = newOrder[rightBoundIdx + 1]?.order
-        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length + 1); // TODO
+        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length);
 
     const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx, maxLen);
-    // TODO If we exceed maxLen then reorder EVERYTHING
 
-    console.log("@@ test", { prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined, leftDiff, rightDiff });
+    console.log("@@ test", { canMoveLeft, canMoveRight, prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined, leftDiff, rightDiff });
 
     return changes.map((order, i) => {
         const index = newOrder[leftBoundIdx + i].index;
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index 335db028a8..9f92774acb 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -46,28 +46,28 @@ const moveLexicographicallyTest = (
 
 describe("stringOrderField", () => {
     it("stringToBase", () => {
-        expect(stringToBase(" ")).toBe(0);
-        expect(stringToBase("a")).toBe(65);
-        expect(stringToBase("aa")).toBe(6240);
-        expect(stringToBase("cat")).toBe(610934);
-        expect(stringToBase("doggo")).toBe(5607022724);
-        expect(stringToBase(" ")).toEqual(0);
-        expect(stringToBase("a", "abcdefghijklmnopqrstuvwxyz")).toEqual(0);
-        expect(stringToBase("a")).toEqual(65);
-        expect(stringToBase("c", "abcdefghijklmnopqrstuvwxyz")).toEqual(2);
-        expect(stringToBase("ab")).toEqual(6241);
-        expect(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz")).toEqual(53);
-        expect(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")).toEqual(4.5115969857961825e+78);
-        expect(stringToBase("~".repeat(50))).toEqual(7.694497527671333e+98);
+        expect(Number(stringToBase(" "))).toBe(0);
+        expect(Number(stringToBase("a"))).toBe(65);
+        expect(Number(stringToBase("aa"))).toBe(6240);
+        expect(Number(stringToBase("cat"))).toBe(610934);
+        expect(Number(stringToBase("doggo"))).toBe(5607022724);
+        expect(Number(stringToBase(" "))).toEqual(0);
+        expect(Number(stringToBase("a", "abcdefghijklmnopqrstuvwxyz"))).toEqual(0);
+        expect(Number(stringToBase("a"))).toEqual(65);
+        expect(Number(stringToBase("c", "abcdefghijklmnopqrstuvwxyz"))).toEqual(2);
+        expect(Number(stringToBase("ab"))).toEqual(6241);
+        expect(Number(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz"))).toEqual(53);
+        expect(Number(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))).toEqual(4.511596985796182e+78);
+        expect(Number(stringToBase("~".repeat(50)))).toEqual(7.694497527671333e+98);
         // expect(typeof stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")).toEqual("bigint");
     });
 
     it("baseToString", () => {
-        expect(baseToString(10)).toBe(ALPHABET[10]);
-        expect(baseToString(10, "abcdefghijklmnopqrstuvwxyz")).toEqual("k");
-        expect(baseToString(6241)).toEqual("ab");
-        expect(baseToString(53, "abcdefghijklmnopqrstuvwxyz")).toEqual("cb");
-        expect(baseToString(1234)).toBe(",~");
+        expect(baseToString(BigInt(10))).toBe(ALPHABET[10]);
+        expect(baseToString(BigInt(10), "abcdefghijklmnopqrstuvwxyz")).toEqual("k");
+        expect(baseToString(BigInt(6241))).toEqual("ab");
+        expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("cb");
+        expect(baseToString(BigInt(1234))).toBe(",~");
     });
 
     it("midPointsBetweenStrings", () => {
@@ -122,7 +122,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test A moving to the start when all is undefined", () => {
+    it("test moving to the start when all is undefined", () => {
         moveLexicographicallyTest(
             [undefined, undefined, undefined, undefined],
             2,
@@ -131,7 +131,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test B moving to the end when all is undefined", () => {
+    it("test moving to the end when all is undefined", () => {
         moveLexicographicallyTest(
             [undefined, undefined, undefined, undefined],
             1,
@@ -140,7 +140,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test C moving left when all is undefined", () => {
+    it("test moving left when all is undefined", () => {
         moveLexicographicallyTest(
             [undefined, undefined, undefined, undefined, undefined, undefined],
             4,
@@ -149,7 +149,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test D moving right when all is undefined", () => {
+    it("test moving right when all is undefined", () => {
         moveLexicographicallyTest(
             [undefined, undefined, undefined, undefined],
             1,
@@ -158,7 +158,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test E moving more right when all is undefined", () => {
+    it("test moving more right when all is undefined", () => {
         moveLexicographicallyTest(
             [undefined, undefined, undefined, undefined, undefined, /**/ undefined, undefined],
             1,
@@ -167,7 +167,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test F moving left when right is undefined", () => {
+    it("test moving left when right is undefined", () => {
         moveLexicographicallyTest(
             ["20", undefined, undefined, undefined, undefined, undefined],
             4,
@@ -176,7 +176,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test G moving right when right is undefined", () => {
+    it("test moving right when right is undefined", () => {
         moveLexicographicallyTest(
             ["50", undefined, undefined, undefined, undefined, /**/ undefined, undefined],
             1,
@@ -185,7 +185,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test H moving left when right is defined", () => {
+    it("test moving left when right is defined", () => {
         moveLexicographicallyTest(
             ["10", "20", "30", "40", undefined, undefined],
             3,
@@ -194,7 +194,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test I moving right when right is defined", () => {
+    it("test moving right when right is defined", () => {
         moveLexicographicallyTest(
             ["10", "20", "30", "40", "50", undefined],
             1,
@@ -203,7 +203,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test J moving left when all is defined", () => {
+    it("test moving left when all is defined", () => {
         moveLexicographicallyTest(
             ["11", "13", "15", "17", "19"],
             2,
@@ -212,7 +212,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test K moving right when all is defined", () => {
+    it("test moving right when all is defined", () => {
         moveLexicographicallyTest(
             ["11", "13", "15", "17", "19"],
             1,
@@ -221,7 +221,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test L moving left into no left space", () => {
+    it.skip("test moving left into no left space", () => {
         moveLexicographicallyTest(
             ["11", "12", "13", "14", "19"],
             3,
@@ -231,17 +231,17 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test M moving right into no right space", () => {
+    it("test moving right into no right space", () => {
         moveLexicographicallyTest(
             ["15", "16", "17", "18", "19"],
             1,
             3,
-            2,
+            3,
             2,
         );
     });
 
-    it("test N moving right into no left space", () => {
+    it("test moving right into no left space", () => {
         moveLexicographicallyTest(
             ["11", "12", "13", "14", "15", "16", undefined],
             1,
@@ -250,13 +250,92 @@ describe("stringOrderField", () => {
         );
     });
 
-    it("test O moving left into no right space", () => {
+    it("test moving left into no right space", () => {
         moveLexicographicallyTest(
             ["15", "16", "17", "18", "19"],
             4,
             3,
+            4,
             2,
         );
     });
+
+    it("test moving left into no left space", () => {
+        moveLexicographicallyTest(
+            [
+                ALPHABET.charAt(0),
+                ALPHABET.charAt(1),
+                ALPHABET.charAt(2),
+                ALPHABET.charAt(3),
+                ALPHABET.charAt(4),
+                ALPHABET.charAt(5),
+            ],
+            5,
+            1,
+            5,
+            1,
+        );
+    });
+
+    it("test moving right into no right space", () => {
+        moveLexicographicallyTest(
+            [
+                ALPHABET.charAt(ALPHABET.length - 5),
+                ALPHABET.charAt(ALPHABET.length - 4),
+                ALPHABET.charAt(ALPHABET.length - 3),
+                ALPHABET.charAt(ALPHABET.length - 2),
+                ALPHABET.charAt(ALPHABET.length - 1),
+            ],
+            1,
+            3,
+            3,
+            1,
+        );
+    });
+
+    it("test moving right into no left space", () => {
+        moveLexicographicallyTest(
+            ["0", "1", "2", "3", "4", "5"],
+            1,
+            3,
+            3,
+            1,
+        );
+    });
+
+    it("test moving left into no right space", () => {
+        moveLexicographicallyTest(
+            [
+                ALPHABET.charAt(ALPHABET.length - 5),
+                ALPHABET.charAt(ALPHABET.length - 4),
+                ALPHABET.charAt(ALPHABET.length - 3),
+                ALPHABET.charAt(ALPHABET.length - 2),
+                ALPHABET.charAt(ALPHABET.length - 1),
+            ],
+            4,
+            3,
+            4,
+            1,
+        );
+    });
+
+    const prev = (str: string) => baseToString(stringToBase(str) - BigInt(1));
+    const next = (str: string) => baseToString(stringToBase(str) + BigInt(1));
+
+    it("baseN calculation is correctly consecutive", () => {
+        const str = "this-is-a-test";
+        expect(next(prev(str))).toBe(str);
+    });
+
+    it("rolls over sanely", () => {
+        const maxSpaceValue = "~".repeat(50);
+        const fiftyFirstChar = "!" + " ".repeat(50);
+        expect(next(maxSpaceValue)).toBe(fiftyFirstChar);
+        expect(prev(fiftyFirstChar)).toBe(maxSpaceValue);
+        expect(stringToBase(ALPHABET[0])).toEqual(BigInt(0));
+        expect(stringToBase(ALPHABET[1])).toEqual(BigInt(1));
+        expect(ALPHABET[ALPHABET.length - 1]).toBe("~");
+        expect(ALPHABET[0]).toBe(" ");
+    });
 });
 

From 8fd72fcf795659d5d40e25e066dec0e68ad7efbb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Jun 2021 21:28:32 +0100
Subject: [PATCH 058/358] Iterate algorithm, base it on new js-sdk string lib

---
 src/utils/stringOrderField.ts       |  77 ++++++++----------
 test/utils/stringOrderField-test.ts | 121 +++++++++++++++-------------
 2 files changed, 98 insertions(+), 100 deletions(-)

diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index d837dd4cbf..e09f7fbea4 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { alphabetPad, baseToString, stringToBase } from "matrix-js-sdk/src/utils";
+
 import { reorder } from "./arrays";
 
 export const ALPHABET_START = 0x20;
@@ -23,23 +25,6 @@ export const ALPHABET = new Array(1 + ALPHABET_END - ALPHABET_START)
     .map((_, i) => String.fromCharCode(ALPHABET_START + i))
     .join("");
 
-export const baseToString = (base: bigint, alphabet = ALPHABET): string => {
-    const len = BigInt(alphabet.length);
-    if (base < len) return alphabet[Number(base)];
-    return baseToString(base / len, alphabet) + alphabet[Number(base % len)];
-};
-
-export const stringToBase = (str: string, alphabet = ALPHABET): bigint => {
-    let result = BigInt(0);
-    const len = BigInt(alphabet.length);
-    for (let i = str.length - 1, j = BigInt(0); i >= 0; i--, j++) {
-        result += BigInt(str.charCodeAt(i) - alphabet.charCodeAt(0)) * (len ** j);
-    }
-    return result;
-};
-
-const pad = (str: string, length: number, alphabet = ALPHABET): string => str.padEnd(length, alphabet[0]);
-
 export const midPointsBetweenStrings = (
     a: string,
     b: string,
@@ -47,26 +32,28 @@ export const midPointsBetweenStrings = (
     maxLen: number,
     alphabet = ALPHABET,
 ): string[] => {
-    const n = Math.min(maxLen, Math.max(a.length, b.length));
-    const aPadded = pad(a, n, alphabet);
-    const bPadded = pad(b, n, alphabet);
-    const aBase = stringToBase(aPadded, alphabet);
-    const bBase = stringToBase(bPadded, alphabet);
-    if (bBase - aBase - BigInt(1) < count) {
-        if (n < maxLen) {
+    const padN = Math.min(Math.max(a.length, b.length), maxLen);
+    const padA = alphabetPad(a, padN, alphabet);
+    const padB = alphabetPad(b, padN, alphabet);
+    const baseA = stringToBase(padA, alphabet);
+    const baseB = stringToBase(padB, alphabet);
+
+    if (baseB - baseA - BigInt(1) < count) {
+        if (padN < maxLen) {
             // this recurses once at most due to the new limit of n+1
             return midPointsBetweenStrings(
-                pad(aPadded, n + 1, alphabet),
-                pad(bPadded, n + 1, alphabet),
+                alphabetPad(padA, padN + 1, alphabet),
+                alphabetPad(padB, padN + 1, alphabet),
                 count,
-                n + 1,
+                padN + 1,
                 alphabet,
             );
         }
         return [];
     }
-    const step = (bBase - aBase) / BigInt(count + 1);
-    const start = BigInt(aBase + step);
+
+    const step = (baseB - baseA) / BigInt(count + 1);
+    const start = BigInt(baseA + step);
     return Array(count).fill(undefined).map((_, i) => baseToString(start + (BigInt(i) * step), alphabet));
 };
 
@@ -95,6 +82,7 @@ export const reorderLexicographically = (
     // apply the fundamental order update to the zipped array
     const newOrder = reorder(ordersWithIndices, fromIndex, toIndex);
 
+    // check if we have to fill undefined orders to complete placement
     const orderToLeftUndefined = newOrder[toIndex - 1]?.order === undefined;
 
     let leftBoundIdx = toIndex;
@@ -105,14 +93,19 @@ export const reorderLexicographically = (
         ? stringToBase(newOrder[toIndex + 1].order)
         : BigInt(Number.MAX_VALUE);
 
+    // check how far left we would have to mutate to fit in that direction
     for (let i = toIndex - 1, j = 1; i >= 0; i--, j++) {
         if (newOrder[i]?.order !== undefined && nextBase - stringToBase(newOrder[i].order) > j) break;
         leftBoundIdx = i;
     }
 
+    // verify the left move would be sufficient
+    const firstOrderBase = newOrder[0].order === undefined ? undefined : stringToBase(newOrder[0].order);
+    const bigToIndex = BigInt(toIndex);
     if (leftBoundIdx === 0 &&
-        newOrder[0].order !== undefined &&
-        nextBase - stringToBase(newOrder[0].order) < toIndex
+        firstOrderBase !== undefined &&
+        nextBase - firstOrderBase <= bigToIndex &&
+        firstOrderBase <= bigToIndex
     ) {
         canMoveLeft = false;
     }
@@ -124,11 +117,13 @@ export const reorderLexicographically = (
             ? stringToBase(newOrder[toIndex - 1]?.order)
             : BigInt(Number.MIN_VALUE);
 
+        // check how far right we would have to mutate to fit in that direction
         for (let i = toIndex + 1, j = 1; i < newOrder.length; i++, j++) {
-            if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break; // TODO verify
+            if (newOrder[i]?.order === undefined || stringToBase(newOrder[i].order) - prevBase > j) break;
             rightBoundIdx = i;
         }
 
+        // verify the right move would be sufficient
         if (rightBoundIdx === newOrder.length - 1 &&
             (newOrder[rightBoundIdx]
                 ? stringToBase(newOrder[rightBoundIdx].order)
@@ -138,27 +133,23 @@ export const reorderLexicographically = (
         }
     }
 
+    // pick the cheaper direction
     const leftDiff = canMoveLeft ? toIndex - leftBoundIdx : Number.MAX_SAFE_INTEGER;
     const rightDiff = canMoveRight ? rightBoundIdx - toIndex : Number.MAX_SAFE_INTEGER;
-
     if (orderToLeftUndefined || leftDiff < rightDiff) {
         rightBoundIdx = toIndex;
     } else {
         leftBoundIdx = toIndex;
     }
 
-    const prevOrder = newOrder[leftBoundIdx - 1]?.order
-        ?? String.fromCharCode(ALPHABET_START).repeat(5);
+    const prevOrder = newOrder[leftBoundIdx - 1]?.order ?? "";
     const nextOrder = newOrder[rightBoundIdx + 1]?.order
-        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length);
+        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length || 1);
 
     const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx, maxLen);
 
-    console.log("@@ test", { canMoveLeft, canMoveRight, prevOrder, nextOrder, changes, leftBoundIdx, rightBoundIdx, orders, fromIndex, toIndex, newOrder, orderToLeftUndefined, leftDiff, rightDiff });
-
-    return changes.map((order, i) => {
-        const index = newOrder[leftBoundIdx + i].index;
-
-        return { index, order };
-    });
+    return changes.map((order, i) => ({
+        index: newOrder[leftBoundIdx + i].index,
+        order,
+    }));
 };
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index 9f92774acb..d5671ebe76 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -15,13 +15,12 @@ limitations under the License.
 */
 
 import { sortBy } from "lodash";
+import { stringToBase, baseToString, averageBetweenStrings } from "matrix-js-sdk/src/utils";
 
 import {
     ALPHABET,
-    baseToString,
     midPointsBetweenStrings,
     reorderLexicographically,
-    stringToBase,
 } from "../../src/utils/stringOrderField";
 
 const moveLexicographicallyTest = (
@@ -39,43 +38,58 @@ const moveLexicographicallyTest = (
     });
 
     const newOrders = sortBy(zipped, i => i[1]);
-    console.log("@@ moveLexicographicallyTest", {orders, zipped, newOrders, fromIndex, toIndex, ops});
     expect(newOrders[toIndex][0]).toBe(fromIndex);
     expect(ops).toHaveLength(expectedChanges);
 };
 
 describe("stringOrderField", () => {
     it("stringToBase", () => {
-        expect(Number(stringToBase(" "))).toBe(0);
-        expect(Number(stringToBase("a"))).toBe(65);
-        expect(Number(stringToBase("aa"))).toBe(6240);
-        expect(Number(stringToBase("cat"))).toBe(610934);
-        expect(Number(stringToBase("doggo"))).toBe(5607022724);
-        expect(Number(stringToBase(" "))).toEqual(0);
-        expect(Number(stringToBase("a", "abcdefghijklmnopqrstuvwxyz"))).toEqual(0);
-        expect(Number(stringToBase("a"))).toEqual(65);
-        expect(Number(stringToBase("c", "abcdefghijklmnopqrstuvwxyz"))).toEqual(2);
-        expect(Number(stringToBase("ab"))).toEqual(6241);
-        expect(Number(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz"))).toEqual(53);
-        expect(Number(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))).toEqual(4.511596985796182e+78);
-        expect(Number(stringToBase("~".repeat(50)))).toEqual(7.694497527671333e+98);
-        // expect(typeof stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")).toEqual("bigint");
+        expect(Number(stringToBase(""))).toBe(0);
+        expect(Number(stringToBase(" "))).toBe(1);
+        expect(Number(stringToBase("a"))).toBe(66);
+        expect(Number(stringToBase(" !"))).toBe(97);
+        expect(Number(stringToBase("aa"))).toBe(6336);
+        expect(Number(stringToBase("cat"))).toBe(620055);
+        expect(Number(stringToBase("doggo"))).toBe(5689339845);
+        expect(Number(stringToBase("a", "abcdefghijklmnopqrstuvwxyz"))).toEqual(1);
+        expect(Number(stringToBase("a"))).toEqual(66);
+        expect(Number(stringToBase("c", "abcdefghijklmnopqrstuvwxyz"))).toEqual(3);
+        expect(Number(stringToBase("ab"))).toEqual(6337);
+        expect(Number(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz"))).toEqual(80);
+        expect(Number(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))).toEqual(4.648312045971824e+78);
+        expect(Number(stringToBase("~".repeat(50)))).toEqual(7.776353884348688e+98);
+        expect(Number(stringToBase("      "))).toEqual(7820126496);
+        expect(Number(stringToBase("  "))).toEqual(96);
+        expect(Number(stringToBase(" !"))).toEqual(97);
+        expect(Number(stringToBase("S:J\\~"))).toEqual(4258975590);
+        expect(Number(stringToBase("!'Tu:}"))).toEqual(16173443434);
     });
 
     it("baseToString", () => {
-        expect(baseToString(BigInt(10))).toBe(ALPHABET[10]);
-        expect(baseToString(BigInt(10), "abcdefghijklmnopqrstuvwxyz")).toEqual("k");
-        expect(baseToString(BigInt(6241))).toEqual("ab");
-        expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("cb");
-        expect(baseToString(BigInt(1234))).toBe(",~");
+        expect(baseToString(BigInt(10))).toBe(ALPHABET[9]);
+        expect(baseToString(BigInt(10), "abcdefghijklmnopqrstuvwxyz")).toEqual("j");
+        expect(baseToString(BigInt(6241))).toEqual("`a");
+        expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("ba");
+        expect(baseToString(BigInt(1234))).toBe("+}");
+        expect(baseToString(BigInt(0))).toBe(""); // TODO
+        expect(baseToString(BigInt(1))).toBe(" ");
+        expect(baseToString(BigInt(95))).toBe("~");
+        expect(baseToString(BigInt(96))).toBe("  ");
+        expect(baseToString(BigInt(97))).toBe(" !");
+        expect(baseToString(BigInt(98))).toBe(' "');
+        expect(baseToString(BigInt(1))).toBe(" ");
     });
 
     it("midPointsBetweenStrings", () => {
+        expect(averageBetweenStrings("!!", "##")).toBe('""');
         const midpoints = ["a", ...midPointsBetweenStrings("a", "e", 3, 1), "e"].sort();
         expect(midpoints[0]).toBe("a");
         expect(midpoints[4]).toBe("e");
         expect(midPointsBetweenStrings("a", "e", 0, 1)).toStrictEqual([]);
         expect(midPointsBetweenStrings("a", "e", 4, 1)).toStrictEqual([]);
+        expect(midPointsBetweenStrings("      ", "!'Tu:}", 1, 50)).toStrictEqual([" S:J\\~"]);
+        expect(averageBetweenStrings("  ", "!!")).toBe(" P");
+        expect(averageBetweenStrings("! ", "!!")).toBe("!  ");
     });
 
     it("moveLexicographically left", () => {
@@ -221,7 +235,7 @@ describe("stringOrderField", () => {
         );
     });
 
-    it.skip("test moving left into no left space", () => {
+    it("test moving left into no left space", () => {
         moveLexicographicallyTest(
             ["11", "12", "13", "14", "19"],
             3,
@@ -229,41 +243,11 @@ describe("stringOrderField", () => {
             2,
             2,
         );
-    });
 
-    it("test moving right into no right space", () => {
-        moveLexicographicallyTest(
-            ["15", "16", "17", "18", "19"],
-            1,
-            3,
-            3,
-            2,
-        );
-    });
-
-    it("test moving right into no left space", () => {
-        moveLexicographicallyTest(
-            ["11", "12", "13", "14", "15", "16", undefined],
-            1,
-            3,
-            3,
-        );
-    });
-
-    it("test moving left into no right space", () => {
-        moveLexicographicallyTest(
-            ["15", "16", "17", "18", "19"],
-            4,
-            3,
-            4,
-            2,
-        );
-    });
-
-    it("test moving left into no left space", () => {
         moveLexicographicallyTest(
             [
                 ALPHABET.charAt(0),
+                // Target
                 ALPHABET.charAt(1),
                 ALPHABET.charAt(2),
                 ALPHABET.charAt(3),
@@ -278,6 +262,14 @@ describe("stringOrderField", () => {
     });
 
     it("test moving right into no right space", () => {
+        moveLexicographicallyTest(
+            ["15", "16", "17", "18", "19"],
+            1,
+            3,
+            3,
+            2,
+        );
+
         moveLexicographicallyTest(
             [
                 ALPHABET.charAt(ALPHABET.length - 5),
@@ -294,6 +286,13 @@ describe("stringOrderField", () => {
     });
 
     it("test moving right into no left space", () => {
+        moveLexicographicallyTest(
+            ["11", "12", "13", "14", "15", "16", undefined],
+            1,
+            3,
+            3,
+        );
+
         moveLexicographicallyTest(
             ["0", "1", "2", "3", "4", "5"],
             1,
@@ -304,6 +303,14 @@ describe("stringOrderField", () => {
     });
 
     it("test moving left into no right space", () => {
+        moveLexicographicallyTest(
+            ["15", "16", "17", "18", "19"],
+            4,
+            3,
+            4,
+            2,
+        );
+
         moveLexicographicallyTest(
             [
                 ALPHABET.charAt(ALPHABET.length - 5),
@@ -329,11 +336,11 @@ describe("stringOrderField", () => {
 
     it("rolls over sanely", () => {
         const maxSpaceValue = "~".repeat(50);
-        const fiftyFirstChar = "!" + " ".repeat(50);
+        const fiftyFirstChar = " ".repeat(51);
         expect(next(maxSpaceValue)).toBe(fiftyFirstChar);
         expect(prev(fiftyFirstChar)).toBe(maxSpaceValue);
-        expect(stringToBase(ALPHABET[0])).toEqual(BigInt(0));
-        expect(stringToBase(ALPHABET[1])).toEqual(BigInt(1));
+        expect(Number(stringToBase(ALPHABET[0]))).toEqual(1);
+        expect(Number(stringToBase(ALPHABET[1]))).toEqual(2);
         expect(ALPHABET[ALPHABET.length - 1]).toBe("~");
         expect(ALPHABET[0]).toBe(" ");
     });

From 2879b9086c1ace24fc3307e6af5b404fff0059c2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Jun 2021 21:32:11 +0100
Subject: [PATCH 059/358] Use alphabet from js-sdk

---
 src/utils/stringOrderField.ts       | 13 ++------
 test/utils/stringOrderField-test.ts | 50 +++++++++++++----------------
 2 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index e09f7fbea4..4336583b9d 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { alphabetPad, baseToString, stringToBase } from "matrix-js-sdk/src/utils";
+import { alphabetPad, baseToString, stringToBase, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
 
 import { reorder } from "./arrays";
 
-export const ALPHABET_START = 0x20;
-export const ALPHABET_END = 0x7E;
-export const ALPHABET = new Array(1 + ALPHABET_END - ALPHABET_START)
-    .fill(undefined)
-    .map((_, i) => String.fromCharCode(ALPHABET_START + i))
-    .join("");
-
 export const midPointsBetweenStrings = (
     a: string,
     b: string,
     count: number,
     maxLen: number,
-    alphabet = ALPHABET,
+    alphabet = DEFAULT_ALPHABET,
 ): string[] => {
     const padN = Math.min(Math.max(a.length, b.length), maxLen);
     const padA = alphabetPad(a, padN, alphabet);
@@ -144,7 +137,7 @@ export const reorderLexicographically = (
 
     const prevOrder = newOrder[leftBoundIdx - 1]?.order ?? "";
     const nextOrder = newOrder[rightBoundIdx + 1]?.order
-        ?? String.fromCharCode(ALPHABET_END).repeat(prevOrder.length || 1);
+        ?? DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1).repeat(prevOrder.length || 1);
 
     const changes = midPointsBetweenStrings(prevOrder, nextOrder, 1 + rightBoundIdx - leftBoundIdx, maxLen);
 
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index d5671ebe76..a8bc00eeb9 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -15,13 +15,9 @@ limitations under the License.
 */
 
 import { sortBy } from "lodash";
-import { stringToBase, baseToString, averageBetweenStrings } from "matrix-js-sdk/src/utils";
+import { stringToBase, baseToString, averageBetweenStrings, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
 
-import {
-    ALPHABET,
-    midPointsBetweenStrings,
-    reorderLexicographically,
-} from "../../src/utils/stringOrderField";
+import { midPointsBetweenStrings, reorderLexicographically } from "../../src/utils/stringOrderField";
 
 const moveLexicographicallyTest = (
     orders: Array<string | undefined>,
@@ -66,7 +62,7 @@ describe("stringOrderField", () => {
     });
 
     it("baseToString", () => {
-        expect(baseToString(BigInt(10))).toBe(ALPHABET[9]);
+        expect(baseToString(BigInt(10))).toBe(DEFAULT_ALPHABET[9]);
         expect(baseToString(BigInt(10), "abcdefghijklmnopqrstuvwxyz")).toEqual("j");
         expect(baseToString(BigInt(6241))).toEqual("`a");
         expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("ba");
@@ -246,13 +242,13 @@ describe("stringOrderField", () => {
 
         moveLexicographicallyTest(
             [
-                ALPHABET.charAt(0),
+                DEFAULT_ALPHABET.charAt(0),
                 // Target
-                ALPHABET.charAt(1),
-                ALPHABET.charAt(2),
-                ALPHABET.charAt(3),
-                ALPHABET.charAt(4),
-                ALPHABET.charAt(5),
+                DEFAULT_ALPHABET.charAt(1),
+                DEFAULT_ALPHABET.charAt(2),
+                DEFAULT_ALPHABET.charAt(3),
+                DEFAULT_ALPHABET.charAt(4),
+                DEFAULT_ALPHABET.charAt(5),
             ],
             5,
             1,
@@ -272,11 +268,11 @@ describe("stringOrderField", () => {
 
         moveLexicographicallyTest(
             [
-                ALPHABET.charAt(ALPHABET.length - 5),
-                ALPHABET.charAt(ALPHABET.length - 4),
-                ALPHABET.charAt(ALPHABET.length - 3),
-                ALPHABET.charAt(ALPHABET.length - 2),
-                ALPHABET.charAt(ALPHABET.length - 1),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
             ],
             1,
             3,
@@ -313,11 +309,11 @@ describe("stringOrderField", () => {
 
         moveLexicographicallyTest(
             [
-                ALPHABET.charAt(ALPHABET.length - 5),
-                ALPHABET.charAt(ALPHABET.length - 4),
-                ALPHABET.charAt(ALPHABET.length - 3),
-                ALPHABET.charAt(ALPHABET.length - 2),
-                ALPHABET.charAt(ALPHABET.length - 1),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
+                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
             ],
             4,
             3,
@@ -339,10 +335,10 @@ describe("stringOrderField", () => {
         const fiftyFirstChar = " ".repeat(51);
         expect(next(maxSpaceValue)).toBe(fiftyFirstChar);
         expect(prev(fiftyFirstChar)).toBe(maxSpaceValue);
-        expect(Number(stringToBase(ALPHABET[0]))).toEqual(1);
-        expect(Number(stringToBase(ALPHABET[1]))).toEqual(2);
-        expect(ALPHABET[ALPHABET.length - 1]).toBe("~");
-        expect(ALPHABET[0]).toBe(" ");
+        expect(Number(stringToBase(DEFAULT_ALPHABET[0]))).toEqual(1);
+        expect(Number(stringToBase(DEFAULT_ALPHABET[1]))).toEqual(2);
+        expect(DEFAULT_ALPHABET[DEFAULT_ALPHABET.length - 1]).toBe("~");
+        expect(DEFAULT_ALPHABET[0]).toBe(" ");
     });
 });
 

From b9f86d54c3712bcf438038376a01fb9a90c96e9f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 Jun 2021 22:07:25 +0100
Subject: [PATCH 060/358] Update yarn.lock

---
 yarn.lock | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 8e6b4fa732..289d33088f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6659,7 +6659,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6809,7 +6809,12 @@ react-focus-lock@^2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

From a63d9220d2474ffd592c728371107bcfda1ae070 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 15 Jun 2021 08:26:46 +0100
Subject: [PATCH 061/358] Clear outstanding TODOs

---
 src/stores/SpaceStore.tsx           | 17 ++++++++++-------
 test/utils/stringOrderField-test.ts |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d0ec573306..9ffb4eb776 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -634,9 +634,16 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         return sortBy(spaces, [this.getSpaceTagOrdering, "roomId"]);
     }
 
-    private setRootSpaceOrder(space: Room, order: string): void {
+    private async setRootSpaceOrder(space: Room, order: string): Promise<void> {
         this.spaceOrderLocalEchoMap.set(space.roomId, order);
-        this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order }); // TODO retrying, failure
+        try {
+            await this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order });
+        } catch (e) {
+            console.log("Failed to set root space order", e);
+            if (this.spaceOrderLocalEchoMap.get(space.roomId) === order) {
+                this.spaceOrderLocalEchoMap.delete(space.roomId);
+            }
+        }
     }
 
     public moveRootSpace(fromIndex: number, toIndex: number): void {
@@ -647,11 +654,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             this.setRootSpaceOrder(this.rootSpaces[index], order);
         });
 
-        if (changes.length) {
-            this.notifyIfOrderChanged();
-        } else {
-            // TODO
-        }
+        this.notifyIfOrderChanged();
     }
 }
 
diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index a8bc00eeb9..a523872023 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -67,7 +67,7 @@ describe("stringOrderField", () => {
         expect(baseToString(BigInt(6241))).toEqual("`a");
         expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("ba");
         expect(baseToString(BigInt(1234))).toBe("+}");
-        expect(baseToString(BigInt(0))).toBe(""); // TODO
+        expect(baseToString(BigInt(0))).toBe("");
         expect(baseToString(BigInt(1))).toBe(" ");
         expect(baseToString(BigInt(95))).toBe("~");
         expect(baseToString(BigInt(96))).toBe("  ");

From 5130d5e111bf32ced37df78096b85467496b9ee2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 15 Jun 2021 12:26:09 +0100
Subject: [PATCH 062/358] Hide addresses section for private spaces

---
 .../spaces/SpaceSettingsVisibilityTab.tsx     | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
index 9eb4c6eb02..2f80ad97a6 100644
--- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -120,6 +120,22 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
         </>;
     }
 
+    let addressesSection;
+    if (visibility !== SpaceVisibility.Private) {
+        addressesSection = <>
+            <span className="mx_SettingsTab_subheading">{_t("Address")}</span>
+            <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
+                <AliasSettings
+                    roomId={space.roomId}
+                    canSetCanonicalAlias={canSetCanonical}
+                    canSetAliases={true}
+                    canonicalAliasEvent={canonicalAliasEv}
+                    hidePublishSetting={true}
+                />
+            </div>
+        </>;
+    }
+
     return <div className="mx_SettingsTab">
         <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
 
@@ -164,16 +180,7 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
             <b>{ _t("Recommended for public spaces.") }</b>
         </div>
 
-        <span className="mx_SettingsTab_subheading">{_t("Address")}</span>
-        <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-            <AliasSettings
-                roomId={space.roomId}
-                canSetCanonicalAlias={canSetCanonical}
-                canSetAliases={true}
-                canonicalAliasEvent={canonicalAliasEv}
-                hidePublishSetting={true}
-            />
-        </div>
+        { addressesSection }
     </div>;
 };
 

From 5098a304c9850c139aa73e8e594648b622a4710c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 15 Jun 2021 12:33:46 +0100
Subject: [PATCH 063/358] delint

---
 src/components/views/dialogs/RoomSettingsDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index 1a664951c5..303f17c342 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -108,7 +108,10 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
                 ROOM_ADVANCED_TAB,
                 _td("Advanced"),
                 "mx_RoomSettingsDialog_warningIcon",
-                <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,
+                <AdvancedRoomSettingsTab
+                    roomId={this.props.roomId}
+                    closeSettingsFn={() => this.props.onFinished(true)}
+                />,
             ));
         }
 

From b3912dc5b8b499528a2316af790b317a8d5df4ee Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 15 Jun 2021 16:16:42 +0100
Subject: [PATCH 064/358] Upgrade matrix-js-sdk to 12.0.0-rc.1

---
 package.json | 4 ++--
 yarn.lock    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d8c26098ca..7ac73a60e4 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "12.0.0-rc.1",
     "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
@@ -139,12 +139,12 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "eslint": "7.18.0",
     "eslint-config-matrix-org": "^0.2.0",
     "eslint-plugin-babel": "^5.3.1",
diff --git a/yarn.lock b/yarn.lock
index 7c232d2aa1..14cd11d769 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5711,9 +5711,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "11.2.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/35ecbed29d16982deff27a8c37b05167738225a2"
+matrix-js-sdk@12.0.0-rc.1:
+  version "12.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0-rc.1.tgz#b94a72f0549f3000763efb8c7b6fa1f8808e56f6"
+  integrity sha512-bzozc4w9dF6Dl8xXXLXMpe3FqL/ncczKdB9Y8dL1mPaujVrmLWAai+BYmC9/c4SIw+1zUap9P5W16ej3z7prig==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From cdb9d3a41be4c3252781a50a1913b6db4223bb7d Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 15 Jun 2021 16:22:33 +0100
Subject: [PATCH 065/358] Prepare changelog for v3.24.0-rc.1

---
 CHANGELOG.md | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94c9530941..a14a0f308e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,121 @@
+Changes in [3.24.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0-rc.1) (2021-06-15)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0...v3.24.0-rc.1)
+
+ * Upgrade to JS SDK 12.0.0-rc.1
+ * Translations update from Weblate
+   [\#6192](https://github.com/matrix-org/matrix-react-sdk/pull/6192)
+ * Disable comment-on-alert for PR coming from a fork
+   [\#6189](https://github.com/matrix-org/matrix-react-sdk/pull/6189)
+ * Add JS benchmark tracking in CI
+   [\#6177](https://github.com/matrix-org/matrix-react-sdk/pull/6177)
+ * Upgrade matrix-react-test-utils for React 17 peer deps
+   [\#6187](https://github.com/matrix-org/matrix-react-sdk/pull/6187)
+ * Fix display name overlaps on the IRC layout
+   [\#6186](https://github.com/matrix-org/matrix-react-sdk/pull/6186)
+ * Small fixes to the spaces experience
+   [\#6184](https://github.com/matrix-org/matrix-react-sdk/pull/6184)
+ * Add footer and privacy note to the start dm dialog
+   [\#6111](https://github.com/matrix-org/matrix-react-sdk/pull/6111)
+ * Format mxids when disambiguation needed
+   [\#5880](https://github.com/matrix-org/matrix-react-sdk/pull/5880)
+ * Move various createRoom types to the js-sdk
+   [\#6183](https://github.com/matrix-org/matrix-react-sdk/pull/6183)
+ * Fix HTML tag for Event Tile when not rendered in a list
+   [\#6175](https://github.com/matrix-org/matrix-react-sdk/pull/6175)
+ * Remove legacy polyfills and unused dependencies
+   [\#6176](https://github.com/matrix-org/matrix-react-sdk/pull/6176)
+ * Fix buggy hovering/selecting of event tiles
+   [\#6173](https://github.com/matrix-org/matrix-react-sdk/pull/6173)
+ * Add room intro warning when e2ee is not enabled
+   [\#5929](https://github.com/matrix-org/matrix-react-sdk/pull/5929)
+ * Migrate end to end tests to GitHub actions
+   [\#6156](https://github.com/matrix-org/matrix-react-sdk/pull/6156)
+ * Fix expanding last collapsed sticky session when zoomed in
+   [\#6171](https://github.com/matrix-org/matrix-react-sdk/pull/6171)
+ * ⚛️ Upgrade to React@17
+   [\#6165](https://github.com/matrix-org/matrix-react-sdk/pull/6165)
+ * Revert refreshStickyHeaders optimisations
+   [\#6168](https://github.com/matrix-org/matrix-react-sdk/pull/6168)
+ * Add logging for which rooms calls are in
+   [\#6170](https://github.com/matrix-org/matrix-react-sdk/pull/6170)
+ * Restore read receipt animation from event to event
+   [\#6169](https://github.com/matrix-org/matrix-react-sdk/pull/6169)
+ * Restore copy button icon when sharing permalink
+   [\#6166](https://github.com/matrix-org/matrix-react-sdk/pull/6166)
+ * Restore Page Up/Down key bindings when focusing the composer
+   [\#6167](https://github.com/matrix-org/matrix-react-sdk/pull/6167)
+ * Timeline rendering optimizations
+   [\#6143](https://github.com/matrix-org/matrix-react-sdk/pull/6143)
+ * Bump css-what from 5.0.0 to 5.0.1
+   [\#6164](https://github.com/matrix-org/matrix-react-sdk/pull/6164)
+ * Bump ws from 6.2.1 to 6.2.2 in /test/end-to-end-tests
+   [\#6145](https://github.com/matrix-org/matrix-react-sdk/pull/6145)
+ * Bump trim-newlines from 3.0.0 to 3.0.1
+   [\#6163](https://github.com/matrix-org/matrix-react-sdk/pull/6163)
+ * Fix upgrade to element home button in top left menu
+   [\#6162](https://github.com/matrix-org/matrix-react-sdk/pull/6162)
+ * Fix unpinning of pinned messages and panel empty state
+   [\#6140](https://github.com/matrix-org/matrix-react-sdk/pull/6140)
+ * Better handling for widgets that fail to load
+   [\#6161](https://github.com/matrix-org/matrix-react-sdk/pull/6161)
+ * Improved forwarding UI
+   [\#5999](https://github.com/matrix-org/matrix-react-sdk/pull/5999)
+ * Fixes for sharing room links
+   [\#6118](https://github.com/matrix-org/matrix-react-sdk/pull/6118)
+ * Fix setting watchers
+   [\#6160](https://github.com/matrix-org/matrix-react-sdk/pull/6160)
+ * Fix Stickerpicker context menu
+   [\#6152](https://github.com/matrix-org/matrix-react-sdk/pull/6152)
+ * Add warning to private space creation flow
+   [\#6155](https://github.com/matrix-org/matrix-react-sdk/pull/6155)
+ * Add prop to alwaysShowTimestamps on TimelinePanel
+   [\#6159](https://github.com/matrix-org/matrix-react-sdk/pull/6159)
+ * Fix notif panel timestamp padding
+   [\#6157](https://github.com/matrix-org/matrix-react-sdk/pull/6157)
+ * Fixes and refactoring for the ImageView
+   [\#6149](https://github.com/matrix-org/matrix-react-sdk/pull/6149)
+ * Fix timestamps
+   [\#6148](https://github.com/matrix-org/matrix-react-sdk/pull/6148)
+ * Make it easier to pan images in the lightbox
+   [\#6147](https://github.com/matrix-org/matrix-react-sdk/pull/6147)
+ * Fix scroll token for EventTile and EventListSummary node type
+   [\#6154](https://github.com/matrix-org/matrix-react-sdk/pull/6154)
+ * Convert bunch of things to Typescript
+   [\#6153](https://github.com/matrix-org/matrix-react-sdk/pull/6153)
+ * Lint the typescript tests
+   [\#6142](https://github.com/matrix-org/matrix-react-sdk/pull/6142)
+ * Fix jumping to bottom without a highlighted event
+   [\#6146](https://github.com/matrix-org/matrix-react-sdk/pull/6146)
+ * Repair event status position in timeline
+   [\#6141](https://github.com/matrix-org/matrix-react-sdk/pull/6141)
+ * Adapt for js-sdk MatrixClient conversion to TS
+   [\#6132](https://github.com/matrix-org/matrix-react-sdk/pull/6132)
+ * Improve pinned messages in Labs
+   [\#6096](https://github.com/matrix-org/matrix-react-sdk/pull/6096)
+ * Map phone number lookup results to their native rooms
+   [\#6136](https://github.com/matrix-org/matrix-react-sdk/pull/6136)
+ * Fix mx_Event containment rules and empty read avatar row
+   [\#6138](https://github.com/matrix-org/matrix-react-sdk/pull/6138)
+ * Improve switch room rendering
+   [\#6079](https://github.com/matrix-org/matrix-react-sdk/pull/6079)
+ * Add CSS containment rules for shorter reflow operations
+   [\#6127](https://github.com/matrix-org/matrix-react-sdk/pull/6127)
+ * ignore hash/fragment when de-duplicating links for url previews
+   [\#6135](https://github.com/matrix-org/matrix-react-sdk/pull/6135)
+ * Clicking jump to bottom resets room hash
+   [\#5823](https://github.com/matrix-org/matrix-react-sdk/pull/5823)
+ * Use passive option for scroll handlers
+   [\#6113](https://github.com/matrix-org/matrix-react-sdk/pull/6113)
+ * Optimise memberSort performance for large list
+   [\#6130](https://github.com/matrix-org/matrix-react-sdk/pull/6130)
+ * Tweak event border radius to match action bar
+   [\#6133](https://github.com/matrix-org/matrix-react-sdk/pull/6133)
+ * Log when we ignore a second call in a room
+   [\#6131](https://github.com/matrix-org/matrix-react-sdk/pull/6131)
+ * Performance monitoring measurements
+   [\#6041](https://github.com/matrix-org/matrix-react-sdk/pull/6041)
+
 Changes in [3.23.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.23.0) (2021-06-07)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0-rc.1...v3.23.0)

From 2eb7d35ea16ce593d7e8fd666327d5a2b2bc495c Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 15 Jun 2021 16:22:34 +0100
Subject: [PATCH 066/358] v3.24.0-rc.1

---
 package.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7ac73a60e4..644793e265 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.23.0",
+  "version": "3.24.0-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -25,7 +25,7 @@
   "bin": {
     "reskindex": "scripts/reskindex.js"
   },
-  "main": "./src/index.js",
+  "main": "./lib/index.js",
   "matrix_src_main": "./src/index.js",
   "matrix_lib_main": "./lib/index.js",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -197,5 +197,6 @@
     "coverageReporters": [
       "text"
     ]
-  }
+  },
+  "typings": "./lib/index.d.ts"
 }

From 5dc87869ebe432cf94986792734155e41d8e733b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 15 Jun 2021 17:21:14 +0200
Subject: [PATCH 067/358] Also override mx_SenderProfile_mxid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_IRCLayout.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index ae8d22a462..541329e294 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -178,7 +178,7 @@ $irc-line-height: $font-18px;
         overflow: hidden;
         display: flex;
 
-        > .mx_SenderProfile_displayName {
+        > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
             overflow: hidden;
             text-overflow: ellipsis;
             min-width: var(--name-width);
@@ -207,7 +207,7 @@ $irc-line-height: $font-18px;
             background: transparent;
 
             > span {
-                > .mx_SenderProfile_displayName {
+                > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
                     min-width: inherit;
                 }
             }

From b4fbc791bb5a7cde05390bb3a077a7065365f0a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:01:13 +0100
Subject: [PATCH 068/358] Add experimental options to the Spaces beta

---
 res/css/views/beta/_BetaCard.scss             |   8 +-
 src/components/views/beta/BetaCard.tsx        |  11 +-
 .../views/dialogs/BetaFeedbackDialog.tsx      |   7 +-
 src/components/views/spaces/SpacePanel.tsx    |  10 +-
 src/i18n/strings/en_EN.json                   |   6 +-
 src/rageshake/submit-rageshake.ts             |  12 +-
 src/settings/Settings.tsx                     |  26 ++-
 src/stores/SpaceStore.tsx                     | 148 ++++++++++++++----
 src/stores/room-list/SpaceWatcher.ts          |  15 +-
 .../room-list/filters/SpaceFilterCondition.ts |   8 +-
 10 files changed, 203 insertions(+), 48 deletions(-)

diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index 3463a653fc..fd87b1c824 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -42,7 +42,7 @@ limitations under the License.
             margin-bottom: 20px;
         }
 
-        .mx_AccessibleButton {
+        .mx_BetaCard_buttons .mx_AccessibleButton {
             display: block;
             margin: 12px 0;
             padding: 7px 40px;
@@ -55,6 +55,12 @@ limitations under the License.
             color: $secondary-fg-color;
             margin-top: 20px;
         }
+
+        .mx_BetaCard_relatedSettings {
+            summary + .mx_SettingsFlag {
+                margin-top: 4px;
+            }
+        }
     }
 
     > img {
diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index 821c448f4f..56770c3385 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -25,6 +25,7 @@ import TextWithTooltip from "../elements/TextWithTooltip";
 import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../../SdkConfig";
+import SettingsFlag from "../elements/SettingsFlag";
 
 interface IProps {
     title?: string;
@@ -66,7 +67,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const info = SettingsStore.getBetaInfo(featureId);
     if (!info) return null; // Beta is invalid/disabled
 
-    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading } = info;
+    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading, extraSettings } = info;
     const value = SettingsStore.getValue(featureId);
 
     let feedbackButton;
@@ -88,7 +89,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                 <BetaPill />
             </h3>
             <span className="mx_BetaCard_caption">{ _t(caption) }</span>
-            <div>
+            <div className="mx_BetaCard_buttons">
                 { feedbackButton }
                 <AccessibleButton
                     onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
@@ -100,6 +101,12 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
             { disclaimer && <div className="mx_BetaCard_disclaimer">
                 { disclaimer(value) }
             </div> }
+            { extraSettings && <details className="mx_BetaCard_relatedSettings">
+                <summary>{ _t("Experimental options") }</summary>
+                { extraSettings.map(key => (
+                    <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
+                )) }
+            </details> }
         </div>
         <img src={image} alt="" />
     </div>;
diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx
index 1ae50dd66f..635f743c76 100644
--- a/src/components/views/dialogs/BetaFeedbackDialog.tsx
+++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx
@@ -44,7 +44,12 @@ const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
     const sendFeedback = async (ok: boolean) => {
         if (!ok) return onFinished(false);
 
-        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact);
+        const extraData = SettingsStore.getBetaInfo(featureId)?.extraSettings.reduce((o, k) => {
+            o[k] = SettingsStore.getValue(k);
+            return o;
+        }, {});
+
+        submitFeedback(SdkConfig.get().bug_report_endpoint_url, info.feedbackLabel, comment, canContact, extraData);
         onFinished(true);
 
         Modal.createTrackedDialog("Beta Dialog Sent", featureId, InfoDialog, {
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index eb63b21f0e..fbda34a03c 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -26,6 +26,7 @@ import {SpaceItem} from "./SpaceTreeLevel";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import SpaceStore, {
+    HOME_SPACE,
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
     UPDATE_TOP_LEVEL_SPACES,
@@ -40,6 +41,7 @@ import {
 import {Key} from "../../../Keyboard";
 import {RoomNotificationStateStore} from "../../../stores/notifications/RoomNotificationStateStore";
 import {NotificationState} from "../../../stores/notifications/NotificationState";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IButtonProps {
     space?: Room;
@@ -205,6 +207,10 @@ const SpacePanel = () => {
 
     const activeSpaces = activeSpace ? [activeSpace] : [];
     const expandCollapseButtonTitle = isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel");
+
+    const homeNotificationState = SettingsStore.getValue("feature_spaces.all_rooms")
+        ? RoomNotificationStateStore.instance.globalState : SpaceStore.instance.getNotificationState(HOME_SPACE);
+
     // TODO drag and drop for re-arranging order
     return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
         {({onKeyDownHandler}) => (
@@ -218,8 +224,8 @@ const SpacePanel = () => {
                             className="mx_SpaceButton_home"
                             onClick={() => SpaceStore.instance.setActiveSpace(null)}
                             selected={!activeSpace}
-                            tooltip={_t("All rooms")}
-                            notificationState={RoomNotificationStateStore.instance.globalState}
+                            tooltip={SettingsStore.getValue("feature_spaces.all_rooms") ? _t("All rooms") : _t("Home")}
+                            notificationState={homeNotificationState}
                             isNarrow={isPanelCollapsed}
                         />
                         { invites.map(s => <SpaceItem
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 17d6f64c46..044e3a3079 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -793,6 +793,9 @@
     "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "You can leave the beta any time from settings or tapping on a beta badge, like the one above.",
     "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Your feedback will help make spaces better. The more detail you can go into, the better.",
+    "Use an all rooms space instead of a home space.": "Use an all rooms space instead of a home space.",
+    "Show DMs for joined/invited members in the space.": "Show DMs for joined/invited members in the space.",
+    "Show notification badges for DMs in spaces.": "Show notification badges for DMs in spaces.",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages": "Send and receive voice messages",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
@@ -1021,6 +1024,7 @@
     "Expand space panel": "Expand space panel",
     "Collapse space panel": "Collapse space panel",
     "All rooms": "All rooms",
+    "Home": "Home",
     "Click to copy": "Click to copy",
     "Copied!": "Copied!",
     "Failed to copy": "Failed to copy",
@@ -2027,7 +2031,6 @@
     "Continue with %(provider)s": "Continue with %(provider)s",
     "Sign in with single sign-on": "Sign in with single sign-on",
     "And %(count)s more...|other": "And %(count)s more...",
-    "Home": "Home",
     "Enter a server name": "Enter a server name",
     "Looks good": "Looks good",
     "You are not allowed to view this server's rooms list": "You are not allowed to view this server's rooms list",
@@ -2507,6 +2510,7 @@
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
+    "Experimental options": "Experimental options",
     "Avatar": "Avatar",
     "This room is public": "This room is public",
     "Away": "Away",
diff --git a/src/rageshake/submit-rageshake.ts b/src/rageshake/submit-rageshake.ts
index 08d8ccfd13..859fdf046a 100644
--- a/src/rageshake/submit-rageshake.ts
+++ b/src/rageshake/submit-rageshake.ts
@@ -263,7 +263,13 @@ function uint8ToString(buf: Buffer) {
     return out;
 }
 
-export async function submitFeedback(endpoint: string, label: string, comment: string, canContact = false) {
+export async function submitFeedback(
+    endpoint: string,
+    label: string,
+    comment: string,
+    canContact = false,
+    extraData: Record<string, string> = {},
+) {
     let version = "UNKNOWN";
     try {
         version = await PlatformPeg.get().getAppVersion();
@@ -279,6 +285,10 @@ export async function submitFeedback(endpoint: string, label: string, comment: s
     body.append("platform", PlatformPeg.get().getHumanReadableName());
     body.append("user_id", MatrixClientPeg.get()?.getUserId());
 
+    for (const k in extraData) {
+        body.append(k, extraData[k]);
+    }
+
     await _submitReport(SdkConfig.get().bug_report_endpoint_url, body, () => {});
 }
 
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 155d039572..a291cd1fba 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Travis Ralston
-Copyright 2018, 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018 - 2021 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.
@@ -127,6 +127,7 @@ export interface ISetting {
         image: string; // require(...)
         feedbackSubheading?: string;
         feedbackLabel?: string;
+        extraSettings?: string[];
     };
 }
 
@@ -167,8 +168,31 @@ export const SETTINGS: {[setting: string]: ISetting} = {
             feedbackSubheading: _td("Your feedback will help make spaces better. " +
                 "The more detail you can go into, the better."),
             feedbackLabel: "spaces-feedback",
+            extraSettings: [
+                "feature_spaces.all_rooms",
+                "feature_spaces.space_member_dms",
+                "feature_spaces.space_dm_badges",
+            ],
         },
     },
+    "feature_spaces.all_rooms": {
+        displayName: _td("Use an all rooms space instead of a home space."),
+        supportedLevels: LEVELS_FEATURE,
+        default: true,
+        controller: new ReloadOnChangeController(),
+    },
+    "feature_spaces.space_member_dms": {
+        displayName: _td("Show DMs for joined/invited members in the space."),
+        supportedLevels: LEVELS_FEATURE,
+        default: true,
+        controller: new ReloadOnChangeController(),
+    },
+    "feature_spaces.space_dm_badges": {
+        displayName: _td("Show notification badges for DMs in spaces."),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+        controller: new ReloadOnChangeController(),
+    },
     "feature_dnd": {
         isFeature: true,
         displayName: _td("Show options to enable 'Do not disturb' mode"),
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..31c53e897d 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -14,36 +14,41 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ListIteratee, Many, sortBy, throttle} from "lodash";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { ListIteratee, Many, sortBy, throttle } from "lodash";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {AsyncStoreWithClient} from "./AsyncStoreWithClient";
+import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 import defaultDispatcher from "../dispatcher/dispatcher";
-import {ActionPayload} from "../dispatcher/payloads";
+import { ActionPayload } from "../dispatcher/payloads";
 import RoomListStore from "./room-list/RoomListStore";
 import SettingsStore from "../settings/SettingsStore";
 import DMRoomMap from "../utils/DMRoomMap";
-import {FetchRoomFn} from "./notifications/ListNotificationState";
-import {SpaceNotificationState} from "./notifications/SpaceNotificationState";
-import {RoomNotificationStateStore} from "./notifications/RoomNotificationStateStore";
-import {DefaultTagID} from "./room-list/models";
-import {EnhancedMap, mapDiff} from "../utils/maps";
-import {setHasDiff} from "../utils/sets";
-import {ISpaceSummaryEvent, ISpaceSummaryRoom} from "../components/structures/SpaceRoomDirectory";
+import { FetchRoomFn } from "./notifications/ListNotificationState";
+import { SpaceNotificationState } from "./notifications/SpaceNotificationState";
+import { RoomNotificationStateStore } from "./notifications/RoomNotificationStateStore";
+import { DefaultTagID } from "./room-list/models";
+import { EnhancedMap, mapDiff } from "../utils/maps";
+import { setHasDiff } from "../utils/sets";
+import { ISpaceSummaryEvent, ISpaceSummaryRoom } from "../components/structures/SpaceRoomDirectory";
 import RoomViewStore from "./RoomViewStore";
+import { arrayHasDiff } from "../utils/arrays";
+import { objectDiff } from "../utils/objects";
+
+type SpaceKey = string | symbol;
 
 interface IState {}
 
 const ACTIVE_SPACE_LS_KEY = "mx_active_space";
 
+export const HOME_SPACE = Symbol("home-space");
 export const SUGGESTED_ROOMS = Symbol("suggested-rooms");
 
 export const UPDATE_TOP_LEVEL_SPACES = Symbol("top-level-spaces");
 export const UPDATE_INVITED_SPACES = Symbol("invited-spaces");
 export const UPDATE_SELECTED_SPACE = Symbol("selected-space");
-// Space Room ID will be emitted when a Space's children change
+// Space Room ID/HOME_SPACE will be emitted when a Space's children change
 
 export interface ISuggestedRoom extends ISpaceSummaryRoom {
     viaServers: string[];
@@ -51,7 +56,8 @@ export interface ISuggestedRoom extends ISpaceSummaryRoom {
 
 const MAX_SUGGESTED_ROOMS = 20;
 
-const getSpaceContextKey = (space?: Room) => `mx_space_context_${space?.roomId || "ALL_ROOMS"}`;
+const homeSpaceKey = SettingsStore.getValue("feature_spaces.all_rooms") ? "ALL_ROOMS" : "HOME_SPACE";
+const getSpaceContextKey = (space?: Room) => `mx_space_context_${space?.roomId || homeSpaceKey}`;
 
 const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces, rooms]
     return arr.reduce((result, room: Room) => {
@@ -85,13 +91,15 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 
     // The spaces representing the roots of the various tree-like hierarchies
     private rootSpaces: Room[] = [];
+    // The list of rooms not present in any currently joined spaces
+    private orphanedRooms = new Set<string>();
     // Map from room ID to set of spaces which list it as a child
     private parentMap = new EnhancedMap<string, Set<string>>();
-    // Map from spaceId to SpaceNotificationState instance representing that space
-    private notificationStateMap = new Map<string, SpaceNotificationState>();
+    // Map from SpaceKey to SpaceNotificationState instance representing that space
+    private notificationStateMap = new Map<SpaceKey, SpaceNotificationState>();
     // Map from space key to Set of room IDs that should be shown as part of that space's filter
-    private spaceFilteredRooms = new Map<string, Set<string>>();
-    // The space currently selected in the Space Panel - if null then All Rooms is selected
+    private spaceFilteredRooms = new Map<SpaceKey, Set<string>>();
+    // The space currently selected in the Space Panel - if null then Home is selected
     private _activeSpace?: Room = null;
     private _suggestedRooms: ISuggestedRoom[] = [];
     private _invitedSpaces = new Set<Room>();
@@ -251,7 +259,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
     }
 
     public getSpaceFilteredRoomIds = (space: Room | null): Set<string> => {
-        if (!space) {
+        if (!space && SettingsStore.getValue("feature_spaces.all_rooms")) {
             return new Set(this.matrixClient.getVisibleRooms().map(r => r.roomId));
         }
         return this.spaceFilteredRooms.get(space.roomId) || new Set();
@@ -285,7 +293,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             });
         });
 
-        const [rootSpaces] = partitionSpacesAndRooms(Array.from(unseenChildren));
+        const [rootSpaces, orphanedRooms] = partitionSpacesAndRooms(Array.from(unseenChildren));
 
         // somewhat algorithm to handle full-cycles
         const detachedNodes = new Set<Room>(spaces);
@@ -326,6 +334,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         //     rootSpaces.push(space);
         // });
 
+        this.orphanedRooms = new Set(orphanedRooms);
         this.rootSpaces = rootSpaces;
         this.parentMap = backrefs;
 
@@ -342,10 +351,30 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
     }, 100, {trailing: true, leading: true});
 
-    onSpaceUpdate = () => {
+    private onSpaceUpdate = () => {
         this.rebuild();
     }
 
+    private showInHomeSpace = (room: Room) => {
+        if (SettingsStore.getValue("feature_spaces.all_rooms")) return true;
+        if (room.isSpaceRoom()) return false;
+        return !this.parentMap.get(room.roomId)?.size // put all orphaned rooms in the Home Space
+            || DMRoomMap.shared().getUserIdForRoomId(room.roomId) // put all DMs in the Home Space
+            || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite) // show all favourites
+    };
+
+    // Update a given room due to its tag changing (e.g DM-ness or Fav-ness)
+    // This can only change whether it shows up in the HOME_SPACE or not
+    private onRoomUpdate = (room: Room) => {
+        if (this.showInHomeSpace(room)) {
+            this.spaceFilteredRooms.get(HOME_SPACE)?.add(room.roomId);
+            this.emit(HOME_SPACE);
+        } else if (!this.orphanedRooms.has(room.roomId)) {
+            this.spaceFilteredRooms.get(HOME_SPACE)?.delete(room.roomId);
+            this.emit(HOME_SPACE);
+        }
+    };
+
     private onSpaceMembersChange = (ev: MatrixEvent) => {
         // skip this update if we do not have a DM with this user
         if (DMRoomMap.shared().getDMRoomsForUserId(ev.getStateKey()).length < 1) return;
@@ -359,6 +388,18 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         const oldFilteredRooms = this.spaceFilteredRooms;
         this.spaceFilteredRooms = new Map();
 
+        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+            // put all room invites in the Home Space
+            const invites = visibleRooms.filter(r => !r.isSpaceRoom() && r.getMyMembership() === "invite");
+            this.spaceFilteredRooms.set(HOME_SPACE, new Set<string>(invites.map(room => room.roomId)));
+
+            visibleRooms.forEach(room => {
+                if (this.showInHomeSpace(room)) {
+                    this.spaceFilteredRooms.get(HOME_SPACE).add(room.roomId);
+                }
+            });
+        }
+
         this.rootSpaces.forEach(s => {
             // traverse each space tree in DFS to build up the supersets as you go up,
             // reusing results from like subtrees.
@@ -374,13 +415,15 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 const roomIds = new Set(childRooms.map(r => r.roomId));
                 const space = this.matrixClient?.getRoom(spaceId);
 
-                // Add relevant DMs
-                space?.getMembers().forEach(member => {
-                    if (member.membership !== "join" && member.membership !== "invite") return;
-                    DMRoomMap.shared().getDMRoomsForUserId(member.userId).forEach(roomId => {
-                        roomIds.add(roomId);
+                if (SettingsStore.getValue("feature_spaces.space_member_dms")) {
+                    // Add relevant DMs
+                    space?.getMembers().forEach(member => {
+                        if (member.membership !== "join" && member.membership !== "invite") return;
+                        DMRoomMap.shared().getDMRoomsForUserId(member.userId).forEach(roomId => {
+                            roomIds.add(roomId);
+                        });
                     });
-                });
+                }
 
                 const newPath = new Set(parentPath).add(spaceId);
                 childSpaces.forEach(childSpace => {
@@ -406,6 +449,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             // Update NotificationStates
             this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => {
                 if (roomIds.has(room.roomId)) {
+                    if (s !== HOME_SPACE && SettingsStore.getValue("feature_spaces.space_dm_badges")) return true;
+
                     return !DMRoomMap.shared().getUserIdForRoomId(room.roomId)
                         || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite);
                 }
@@ -489,6 +534,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 // TODO confirm this after implementing parenting behaviour
                 if (room.isSpaceRoom()) {
                     this.onSpaceUpdate();
+                } else if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+                    this.onRoomUpdate(room);
                 }
                 this.emit(room.roomId);
                 break;
@@ -501,8 +548,38 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     };
 
+    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEvent?: MatrixEvent) => {
+        if (ev.getType() === EventType.Tag && !room.isSpaceRoom()) {
+            // If the room was in favourites and now isn't or the opposite then update its position in the trees
+            const oldTags = lastEvent?.getContent()?.tags || {};
+            const newTags = ev.getContent()?.tags || {};
+            if (!!oldTags[DefaultTagID.Favourite] !== !!newTags[DefaultTagID.Favourite]) {
+                this.onRoomUpdate(room);
+            }
+        }
+    }
+
+    private onAccountData = (ev: MatrixEvent, lastEvent: MatrixEvent) => {
+        if (ev.getType() === EventType.Direct) {
+            const lastContent = lastEvent.getContent();
+            const content = ev.getContent();
+
+            const diff = objectDiff<Record<string, string[]>>(lastContent, content);
+            // filter out keys which changed by reference only by checking whether the sets differ
+            const changed = diff.changed.filter(k => arrayHasDiff(lastContent[k], content[k]));
+            // DM tag changes, refresh relevant rooms
+            new Set([...diff.added, ...diff.removed, ...changed]).forEach(roomId => {
+                const room = this.matrixClient?.getRoom(roomId);
+                if (room) {
+                    this.onRoomUpdate(room);
+                }
+            });
+        }
+    };
+
     protected async reset() {
         this.rootSpaces = [];
+        this.orphanedRooms = new Set();
         this.parentMap = new EnhancedMap();
         this.notificationStateMap = new Map();
         this.spaceFilteredRooms = new Map();
@@ -517,6 +594,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             this.matrixClient.removeListener("Room", this.onRoom);
             this.matrixClient.removeListener("Room.myMembership", this.onRoom);
             this.matrixClient.removeListener("RoomState.events", this.onRoomState);
+            if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+                this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
+                this.matrixClient.removeListener("accountData", this.onAccountData);
+            }
         }
         await this.reset();
     }
@@ -526,6 +607,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.matrixClient.on("Room", this.onRoom);
         this.matrixClient.on("Room.myMembership", this.onRoom);
         this.matrixClient.on("RoomState.events", this.onRoomState);
+        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+            this.matrixClient.on("Room.accountData", this.onRoomAccountData);
+            this.matrixClient.on("accountData", this.onAccountData);
+        }
 
         await this.onSpaceUpdate(); // trigger an initial update
 
@@ -550,7 +635,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                     // Don't context switch when navigating to the space room
                     // as it will cause you to end up in the wrong room
                     this.setActiveSpace(room, false);
-                } else if (this.activeSpace && !this.getSpaceFilteredRoomIds(this.activeSpace).has(roomId)) {
+                } else if (
+                    (!SettingsStore.getValue("feature_spaces.all_rooms") || this.activeSpace) &&
+                    !this.getSpaceFilteredRoomIds(this.activeSpace).has(roomId)
+                ) {
                     this.switchToRelatedSpace(roomId);
                 }
 
@@ -568,7 +656,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     }
 
-    public getNotificationState(key: string): SpaceNotificationState {
+    public getNotificationState(key: SpaceKey): SpaceNotificationState {
         if (this.notificationStateMap.has(key)) {
             return this.notificationStateMap.get(key);
         }
diff --git a/src/stores/room-list/SpaceWatcher.ts b/src/stores/room-list/SpaceWatcher.ts
index 0b1b78bc75..a989e9c147 100644
--- a/src/stores/room-list/SpaceWatcher.ts
+++ b/src/stores/room-list/SpaceWatcher.ts
@@ -19,6 +19,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomListStoreClass } from "./RoomListStore";
 import { SpaceFilterCondition } from "./filters/SpaceFilterCondition";
 import SpaceStore, { UPDATE_SELECTED_SPACE } from "../SpaceStore";
+import SettingsStore from "../../settings/SettingsStore";
 
 /**
  * Watches for changes in spaces to manage the filter on the provided RoomListStore
@@ -28,6 +29,10 @@ export class SpaceWatcher {
     private activeSpace: Room = SpaceStore.instance.activeSpace;
 
     constructor(private store: RoomListStoreClass) {
+        if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+            this.updateFilter();
+            store.addFilter(this.filter);
+        }
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated);
     }
 
@@ -35,7 +40,7 @@ export class SpaceWatcher {
         this.activeSpace = activeSpace;
 
         if (this.filter) {
-            if (activeSpace) {
+            if (activeSpace || !SettingsStore.getValue("feature_spaces.all_rooms")) {
                 this.updateFilter();
             } else {
                 this.store.removeFilter(this.filter);
@@ -49,9 +54,11 @@ export class SpaceWatcher {
     };
 
     private updateFilter = () => {
-        SpaceStore.instance.traverseSpace(this.activeSpace.roomId, roomId => {
-            this.store.matrixClient?.getRoom(roomId)?.loadMembersIfNeeded();
-        });
+        if (this.activeSpace) {
+            SpaceStore.instance.traverseSpace(this.activeSpace.roomId, roomId => {
+                this.store.matrixClient?.getRoom(roomId)?.loadMembersIfNeeded();
+            });
+        }
         this.filter.updateSpace(this.activeSpace);
     };
 }
diff --git a/src/stores/room-list/filters/SpaceFilterCondition.ts b/src/stores/room-list/filters/SpaceFilterCondition.ts
index 6a06bee0d8..0d1886c38f 100644
--- a/src/stores/room-list/filters/SpaceFilterCondition.ts
+++ b/src/stores/room-list/filters/SpaceFilterCondition.ts
@@ -19,7 +19,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 
 import { FILTER_CHANGED, FilterKind, IFilterCondition } from "./IFilterCondition";
 import { IDestroyable } from "../../../utils/IDestroyable";
-import SpaceStore from "../../SpaceStore";
+import SpaceStore, { HOME_SPACE } from "../../SpaceStore";
 import { setHasDiff } from "../../../utils/sets";
 
 /**
@@ -55,12 +55,10 @@ export class SpaceFilterCondition extends EventEmitter implements IFilterConditi
         }
     };
 
-    private getSpaceEventKey = (space: Room) => space.roomId;
+    private getSpaceEventKey = (space: Room | null) => space ? space.roomId : HOME_SPACE;
 
     public updateSpace(space: Room) {
-        if (this.space) {
-            SpaceStore.instance.off(this.getSpaceEventKey(this.space), this.onStoreUpdate);
-        }
+        SpaceStore.instance.off(this.getSpaceEventKey(this.space), this.onStoreUpdate);
         SpaceStore.instance.on(this.getSpaceEventKey(this.space = space), this.onStoreUpdate);
         this.onStoreUpdate(); // initial update from the change to the space
     }

From a75fb98fbc2de2b39e6f4beb44e889a7d61b3ba2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:07:55 +0100
Subject: [PATCH 069/358] Fix some NPEs

---
 src/stores/SpaceStore.tsx            | 2 +-
 src/stores/room-list/SpaceWatcher.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 31c53e897d..2b5a25e707 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -262,7 +262,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         if (!space && SettingsStore.getValue("feature_spaces.all_rooms")) {
             return new Set(this.matrixClient.getVisibleRooms().map(r => r.roomId));
         }
-        return this.spaceFilteredRooms.get(space.roomId) || new Set();
+        return this.spaceFilteredRooms.get(space?.roomId || HOME_SPACE) || new Set();
     };
 
     private rebuild = throttle(() => {
diff --git a/src/stores/room-list/SpaceWatcher.ts b/src/stores/room-list/SpaceWatcher.ts
index a989e9c147..a1f7786578 100644
--- a/src/stores/room-list/SpaceWatcher.ts
+++ b/src/stores/room-list/SpaceWatcher.ts
@@ -30,6 +30,7 @@ export class SpaceWatcher {
 
     constructor(private store: RoomListStoreClass) {
         if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
+            this.filter = new SpaceFilterCondition();
             this.updateFilter();
             store.addFilter(this.filter);
         }

From 9e20e5dfc44c33eb896234d05b60e8804493d9b3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:14:07 +0100
Subject: [PATCH 070/358] mock new settings in tests

---
 test/stores/SpaceStore-test.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts
index 01bd528b87..4cbd9f43c8 100644
--- a/test/stores/SpaceStore-test.ts
+++ b/test/stores/SpaceStore-test.ts
@@ -123,8 +123,15 @@ describe("SpaceStore", () => {
         jest.runAllTimers();
         client.getVisibleRooms.mockReturnValue(rooms = []);
         getValue.mockImplementation(settingName => {
-            if (settingName === "feature_spaces") {
-                return true;
+            switch (settingName) {
+                case "feature_spaces":
+                    return true;
+                case "feature_spaces.all_rooms":
+                    return true;
+                case "feature_spaces.space_member_dms":
+                    return true;
+                case "feature_spaces.space_dm_badges":
+                    return false;
             }
         });
     });

From cee294f5a7378737bc0cbaf9707250eeea5a195d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:23:06 +0100
Subject: [PATCH 071/358] iterate PR

---
 .../structures/AutoHideScrollbar.tsx          |  2 +-
 .../structures/SpaceRoomDirectory.tsx         | 28 +++++++++----------
 .../views/spaces/SpaceTreeLevel.tsx           | 28 +++++++++----------
 src/stores/SpaceStore.tsx                     |  5 ++--
 src/utils/arrays.ts                           |  2 +-
 src/utils/stringOrderField.ts                 |  4 +--
 6 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index e5fa124fed..8650224fb3 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {HTMLAttributes} from "react";
+import React, { HTMLAttributes } from "react";
 
 interface IProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 2b4fb24c1b..497f525a00 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -14,34 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode, useMemo, useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
+import React, { ReactNode, useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import classNames from "classnames";
-import {sortBy} from "lodash";
+import { sortBy } from "lodash";
 
-import {MatrixClientPeg} from "../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import dis from "../../dispatcher/dispatcher";
-import {_t} from "../../languageHandler";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import { _t } from "../../languageHandler";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import BaseDialog from "../views/dialogs/BaseDialog";
 import Spinner from "../views/elements/Spinner";
 import SearchBox from "./SearchBox";
 import RoomAvatar from "../views/avatars/RoomAvatar";
 import RoomName from "../views/elements/RoomName";
-import {useAsyncMemo} from "../../hooks/useAsyncMemo";
-import {EnhancedMap} from "../../utils/maps";
+import { useAsyncMemo } from "../../hooks/useAsyncMemo";
+import { EnhancedMap } from "../../utils/maps";
 import StyledCheckbox from "../views/elements/StyledCheckbox";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import BaseAvatar from "../views/avatars/BaseAvatar";
-import {mediaFromMxc} from "../../customisations/Media";
+import { mediaFromMxc } from "../../customisations/Media";
 import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
-import {useStateToggle} from "../../hooks/useStateToggle";
-import {getChildOrder} from "../../stores/SpaceStore";
+import { useStateToggle } from "../../hooks/useStateToggle";
+import { getChildOrder } from "../../stores/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import {linkifyElement} from "../../HtmlUtils";
+import { linkifyElement } from "../../HtmlUtils";
 
 interface IHierarchyProps {
     space: Room;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 7ac863b239..416b4cc6f1 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -14,23 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {InputHTMLAttributes, LegacyRef} from "react";
+import React, { InputHTMLAttributes, LegacyRef } from "react";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
 import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
-import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton";
-import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton";
+import { RovingAccessibleButton } from "../../../accessibility/roving/RovingAccessibleButton";
+import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
-import {_t} from "../../../languageHandler";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
-import {toRightOf} from "../../structures/ContextMenu";
+import { _t } from "../../../languageHandler";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { toRightOf } from "../../structures/ContextMenu";
 import {
     shouldShowSpaceSettings,
     showAddExistingRooms,
@@ -39,15 +39,15 @@ import {
     showSpaceSettings,
 } from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import RoomViewStore from "../../../stores/RoomViewStore";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
-import {NotificationColor} from "../../../stores/notifications/NotificationColor";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 
 interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     space?: Room;
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 9ffb4eb776..b0099b3306 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -62,14 +62,13 @@ const partitionSpacesAndRooms = (arr: Room[]): [Room[], Room[]] => { // [spaces,
     }, [[], []]);
 };
 
-const validOrder = (order: string): string | null => {
+const validOrder = (order: string): string | undefined => {
     if (typeof order === "string" && order.length <= 50 && Array.from(order).every((c: string) => {
         const charCode = c.charCodeAt(0);
         return charCode >= 0x20 && charCode <= 0x7E;
     })) {
         return order;
     }
-    return undefined;
 };
 
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
@@ -639,7 +638,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         try {
             await this.matrixClient.setRoomAccountData(space.roomId, EventType.SpaceOrder, { order });
         } catch (e) {
-            console.log("Failed to set root space order", e);
+            console.warn("Failed to set root space order", e);
             if (this.spaceOrderLocalEchoMap.get(space.roomId) === order) {
                 this.spaceOrderLocalEchoMap.delete(space.roomId);
             }
diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
index d319631d93..148861e5d3 100644
--- a/src/utils/arrays.ts
+++ b/src/utils/arrays.ts
@@ -230,7 +230,7 @@ export function arrayMerge<T>(...a: T[][]): T[] {
  * @param toIndex the index of where to put the element.
  * @returns A new array with the requested value moved.
  */
-export function reorder<T>(list: T[], fromIndex: number, toIndex: number): T[] {
+export function moveElement<T>(list: T[], fromIndex: number, toIndex: number): T[] {
     const result = Array.from(list);
     const [removed] = result.splice(fromIndex, 1);
     result.splice(toIndex, 0, removed);
diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index 4336583b9d..b312b85b08 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { alphabetPad, baseToString, stringToBase, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
 
-import { reorder } from "./arrays";
+import { moveElement } from "./arrays";
 
 export const midPointsBetweenStrings = (
     a: string,
@@ -73,7 +73,7 @@ export const reorderLexicographically = (
     // zip orders with their indices to simplify later index wrangling
     const ordersWithIndices: IEntry[] = orders.map((order, index) => ({ index, order }));
     // apply the fundamental order update to the zipped array
-    const newOrder = reorder(ordersWithIndices, fromIndex, toIndex);
+    const newOrder = moveElement(ordersWithIndices, fromIndex, toIndex);
 
     // check if we have to fill undefined orders to complete placement
     const orderToLeftUndefined = newOrder[toIndex - 1]?.order === undefined;

From bceee7978edc0a972f67cc612a250d5f0f717dfd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:30:47 +0100
Subject: [PATCH 072/358] improve naming of tests

---
 test/utils/stringOrderField-test.ts | 495 +++++++++++++---------------
 1 file changed, 221 insertions(+), 274 deletions(-)

diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index a523872023..ece3043d86 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -39,306 +39,253 @@ const moveLexicographicallyTest = (
 };
 
 describe("stringOrderField", () => {
-    it("stringToBase", () => {
-        expect(Number(stringToBase(""))).toBe(0);
-        expect(Number(stringToBase(" "))).toBe(1);
-        expect(Number(stringToBase("a"))).toBe(66);
-        expect(Number(stringToBase(" !"))).toBe(97);
-        expect(Number(stringToBase("aa"))).toBe(6336);
-        expect(Number(stringToBase("cat"))).toBe(620055);
-        expect(Number(stringToBase("doggo"))).toBe(5689339845);
-        expect(Number(stringToBase("a", "abcdefghijklmnopqrstuvwxyz"))).toEqual(1);
-        expect(Number(stringToBase("a"))).toEqual(66);
-        expect(Number(stringToBase("c", "abcdefghijklmnopqrstuvwxyz"))).toEqual(3);
-        expect(Number(stringToBase("ab"))).toEqual(6337);
-        expect(Number(stringToBase("cb", "abcdefghijklmnopqrstuvwxyz"))).toEqual(80);
-        expect(Number(stringToBase("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"))).toEqual(4.648312045971824e+78);
-        expect(Number(stringToBase("~".repeat(50)))).toEqual(7.776353884348688e+98);
-        expect(Number(stringToBase("      "))).toEqual(7820126496);
-        expect(Number(stringToBase("  "))).toEqual(96);
-        expect(Number(stringToBase(" !"))).toEqual(97);
-        expect(Number(stringToBase("S:J\\~"))).toEqual(4258975590);
-        expect(Number(stringToBase("!'Tu:}"))).toEqual(16173443434);
+    describe("midPointsBetweenStrings", () => {
+        it("should work", () => {
+            expect(averageBetweenStrings("!!", "##")).toBe('""');
+            const midpoints = ["a", ...midPointsBetweenStrings("a", "e", 3, 1), "e"].sort();
+            expect(midpoints[0]).toBe("a");
+            expect(midpoints[4]).toBe("e");
+            expect(midPointsBetweenStrings("      ", "!'Tu:}", 1, 50)).toStrictEqual([" S:J\\~"]);
+        });
+
+        it("should return empty array when the request is not possible", () => {
+            expect(midPointsBetweenStrings("a", "e", 0, 1)).toStrictEqual([]);
+            expect(midPointsBetweenStrings("a", "e", 4, 1)).toStrictEqual([]);
+        });
     });
 
-    it("baseToString", () => {
-        expect(baseToString(BigInt(10))).toBe(DEFAULT_ALPHABET[9]);
-        expect(baseToString(BigInt(10), "abcdefghijklmnopqrstuvwxyz")).toEqual("j");
-        expect(baseToString(BigInt(6241))).toEqual("`a");
-        expect(baseToString(BigInt(53), "abcdefghijklmnopqrstuvwxyz")).toEqual("ba");
-        expect(baseToString(BigInt(1234))).toBe("+}");
-        expect(baseToString(BigInt(0))).toBe("");
-        expect(baseToString(BigInt(1))).toBe(" ");
-        expect(baseToString(BigInt(95))).toBe("~");
-        expect(baseToString(BigInt(96))).toBe("  ");
-        expect(baseToString(BigInt(97))).toBe(" !");
-        expect(baseToString(BigInt(98))).toBe(' "');
-        expect(baseToString(BigInt(1))).toBe(" ");
-    });
+    describe("reorderLexicographically", () => {
+        it("should work when moving left", () => {
+            moveLexicographicallyTest(["a", "c", "e", "g", "i"], 2, 1, 1);
+        });
 
-    it("midPointsBetweenStrings", () => {
-        expect(averageBetweenStrings("!!", "##")).toBe('""');
-        const midpoints = ["a", ...midPointsBetweenStrings("a", "e", 3, 1), "e"].sort();
-        expect(midpoints[0]).toBe("a");
-        expect(midpoints[4]).toBe("e");
-        expect(midPointsBetweenStrings("a", "e", 0, 1)).toStrictEqual([]);
-        expect(midPointsBetweenStrings("a", "e", 4, 1)).toStrictEqual([]);
-        expect(midPointsBetweenStrings("      ", "!'Tu:}", 1, 50)).toStrictEqual([" S:J\\~"]);
-        expect(averageBetweenStrings("  ", "!!")).toBe(" P");
-        expect(averageBetweenStrings("! ", "!!")).toBe("!  ");
-    });
+        it("should work when moving right", () => {
+            moveLexicographicallyTest(["a", "c", "e", "g", "i"], 1, 2, 1);
+        });
 
-    it("moveLexicographically left", () => {
-        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 2, 1, 1);
-    });
+        it("should work when all orders are undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined, undefined, undefined],
+                4,
+                1,
+                2,
+            );
+        });
 
-    it("moveLexicographically right", () => {
-        moveLexicographicallyTest(["a", "c", "e", "g", "i"], 1, 2, 1);
-    });
+        it("should work when moving to end and all orders are undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined, undefined, undefined],
+                1,
+                4,
+                5,
+            );
+        });
 
-    it("moveLexicographically all undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined, undefined, undefined],
-            4,
-            1,
-            2,
-        );
-    });
+        it("should work when moving left and some orders are undefined", () => {
+            moveLexicographicallyTest(
+                ["a", "c", "e", undefined, undefined, undefined],
+                5,
+                2,
+                1,
+            );
 
-    it("moveLexicographically all undefined to end", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined, undefined, undefined],
-            1,
-            4,
-            5,
-        );
-    });
+            moveLexicographicallyTest(
+                ["a", "a", "e", undefined, undefined, undefined],
+                5,
+                1,
+                2,
+            );
+        });
 
-    it("moveLexicographically some undefined move left", () => {
-        moveLexicographicallyTest(
-            ["a", "c", "e", undefined, undefined, undefined],
-            5,
-            2,
-            1,
-        );
-    });
+        it("should work moving to the start when all is undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined],
+                2,
+                0,
+                1,
+            );
+        });
 
-    it("moveLexicographically some undefined move left close", () => {
-        moveLexicographicallyTest(
-            ["a", "a", "e", undefined, undefined, undefined],
-            5,
-            1,
-            2,
-        );
-    });
+        it("should work moving to the end when all is undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined],
+                1,
+                3,
+                4,
+            );
+        });
 
-    it("test moving to the start when all is undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined],
-            2,
-            0,
-            1,
-        );
-    });
+        it("should work moving left when all is undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined, undefined, undefined],
+                4,
+                1,
+                2,
+            );
+        });
 
-    it("test moving to the end when all is undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined],
-            1,
-            3,
-            4,
-        );
-    });
+        it("should work moving right when all is undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined],
+                1,
+                2,
+                3,
+            );
+        });
 
-    it("test moving left when all is undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined, undefined, undefined],
-            4,
-            1,
-            2,
-        );
-    });
+        it("should work moving more right when all is undefined", () => {
+            moveLexicographicallyTest(
+                [undefined, undefined, undefined, undefined, undefined, /**/ undefined, undefined],
+                1,
+                4,
+                5,
+            );
+        });
 
-    it("test moving right when all is undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined],
-            1,
-            2,
-            3,
-        );
-    });
+        it("should work moving left when right is undefined", () => {
+            moveLexicographicallyTest(
+                ["20", undefined, undefined, undefined, undefined, undefined],
+                4,
+                2,
+                2,
+            );
+        });
 
-    it("test moving more right when all is undefined", () => {
-        moveLexicographicallyTest(
-            [undefined, undefined, undefined, undefined, undefined, /**/ undefined, undefined],
-            1,
-            4,
-            5,
-        );
-    });
+        it("should work moving right when right is undefined", () => {
+            moveLexicographicallyTest(
+                ["50", undefined, undefined, undefined, undefined, /**/ undefined, undefined],
+                1,
+                4,
+                4,
+            );
+        });
 
-    it("test moving left when right is undefined", () => {
-        moveLexicographicallyTest(
-            ["20", undefined, undefined, undefined, undefined, undefined],
-            4,
-            2,
-            2,
-        );
-    });
+        it("should work moving left when right is defined", () => {
+            moveLexicographicallyTest(
+                ["10", "20", "30", "40", undefined, undefined],
+                3,
+                1,
+                1,
+            );
+        });
 
-    it("test moving right when right is undefined", () => {
-        moveLexicographicallyTest(
-            ["50", undefined, undefined, undefined, undefined, /**/ undefined, undefined],
-            1,
-            4,
-            4,
-        );
-    });
+        it("should work moving right when right is defined", () => {
+            moveLexicographicallyTest(
+                ["10", "20", "30", "40", "50", undefined],
+                1,
+                3,
+                1,
+            );
+        });
 
-    it("test moving left when right is defined", () => {
-        moveLexicographicallyTest(
-            ["10", "20", "30", "40", undefined, undefined],
-            3,
-            1,
-            1,
-        );
-    });
+        it("should work moving left when all is defined", () => {
+            moveLexicographicallyTest(
+                ["11", "13", "15", "17", "19"],
+                2,
+                1,
+                1,
+            );
+        });
 
-    it("test moving right when right is defined", () => {
-        moveLexicographicallyTest(
-            ["10", "20", "30", "40", "50", undefined],
-            1,
-            3,
-            1,
-        );
-    });
+        it("should work moving right when all is defined", () => {
+            moveLexicographicallyTest(
+                ["11", "13", "15", "17", "19"],
+                1,
+                2,
+                1,
+            );
+        });
 
-    it("test moving left when all is defined", () => {
-        moveLexicographicallyTest(
-            ["11", "13", "15", "17", "19"],
-            2,
-            1,
-            1,
-        );
-    });
+        it("should work moving left into no left space", () => {
+            moveLexicographicallyTest(
+                ["11", "12", "13", "14", "19"],
+                3,
+                1,
+                2,
+                2,
+            );
 
-    it("test moving right when all is defined", () => {
-        moveLexicographicallyTest(
-            ["11", "13", "15", "17", "19"],
-            1,
-            2,
-            1,
-        );
-    });
+            moveLexicographicallyTest(
+                [
+                    DEFAULT_ALPHABET.charAt(0),
+                    // Target
+                    DEFAULT_ALPHABET.charAt(1),
+                    DEFAULT_ALPHABET.charAt(2),
+                    DEFAULT_ALPHABET.charAt(3),
+                    DEFAULT_ALPHABET.charAt(4),
+                    DEFAULT_ALPHABET.charAt(5),
+                ],
+                5,
+                1,
+                5,
+                1,
+            );
+        });
 
-    it("test moving left into no left space", () => {
-        moveLexicographicallyTest(
-            ["11", "12", "13", "14", "19"],
-            3,
-            1,
-            2,
-            2,
-        );
+        it("should work moving right into no right space", () => {
+            moveLexicographicallyTest(
+                ["15", "16", "17", "18", "19"],
+                1,
+                3,
+                3,
+                2,
+            );
 
-        moveLexicographicallyTest(
-            [
-                DEFAULT_ALPHABET.charAt(0),
-                // Target
-                DEFAULT_ALPHABET.charAt(1),
-                DEFAULT_ALPHABET.charAt(2),
-                DEFAULT_ALPHABET.charAt(3),
-                DEFAULT_ALPHABET.charAt(4),
-                DEFAULT_ALPHABET.charAt(5),
-            ],
-            5,
-            1,
-            5,
-            1,
-        );
-    });
+            moveLexicographicallyTest(
+                [
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
+                ],
+                1,
+                3,
+                3,
+                1,
+            );
+        });
 
-    it("test moving right into no right space", () => {
-        moveLexicographicallyTest(
-            ["15", "16", "17", "18", "19"],
-            1,
-            3,
-            3,
-            2,
-        );
+        it("should work moving right into no left space", () => {
+            moveLexicographicallyTest(
+                ["11", "12", "13", "14", "15", "16", undefined],
+                1,
+                3,
+                3,
+            );
 
-        moveLexicographicallyTest(
-            [
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
-            ],
-            1,
-            3,
-            3,
-            1,
-        );
-    });
+            moveLexicographicallyTest(
+                ["0", "1", "2", "3", "4", "5"],
+                1,
+                3,
+                3,
+                1,
+            );
+        });
 
-    it("test moving right into no left space", () => {
-        moveLexicographicallyTest(
-            ["11", "12", "13", "14", "15", "16", undefined],
-            1,
-            3,
-            3,
-        );
+        it("should work moving left into no right space", () => {
+            moveLexicographicallyTest(
+                ["15", "16", "17", "18", "19"],
+                4,
+                3,
+                4,
+                2,
+            );
 
-        moveLexicographicallyTest(
-            ["0", "1", "2", "3", "4", "5"],
-            1,
-            3,
-            3,
-            1,
-        );
-    });
-
-    it("test moving left into no right space", () => {
-        moveLexicographicallyTest(
-            ["15", "16", "17", "18", "19"],
-            4,
-            3,
-            4,
-            2,
-        );
-
-        moveLexicographicallyTest(
-            [
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
-                DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
-            ],
-            4,
-            3,
-            4,
-            1,
-        );
-    });
-
-    const prev = (str: string) => baseToString(stringToBase(str) - BigInt(1));
-    const next = (str: string) => baseToString(stringToBase(str) + BigInt(1));
-
-    it("baseN calculation is correctly consecutive", () => {
-        const str = "this-is-a-test";
-        expect(next(prev(str))).toBe(str);
-    });
-
-    it("rolls over sanely", () => {
-        const maxSpaceValue = "~".repeat(50);
-        const fiftyFirstChar = " ".repeat(51);
-        expect(next(maxSpaceValue)).toBe(fiftyFirstChar);
-        expect(prev(fiftyFirstChar)).toBe(maxSpaceValue);
-        expect(Number(stringToBase(DEFAULT_ALPHABET[0]))).toEqual(1);
-        expect(Number(stringToBase(DEFAULT_ALPHABET[1]))).toEqual(2);
-        expect(DEFAULT_ALPHABET[DEFAULT_ALPHABET.length - 1]).toBe("~");
-        expect(DEFAULT_ALPHABET[0]).toBe(" ");
+            moveLexicographicallyTest(
+                [
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 5),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 4),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 3),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 2),
+                    DEFAULT_ALPHABET.charAt(DEFAULT_ALPHABET.length - 1),
+                ],
+                4,
+                3,
+                4,
+                1,
+            );
+        });
     });
 });
 

From d4e376201f986223c16932229598c7e45a032c82 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 09:44:37 +0100
Subject: [PATCH 073/358] Break down the SpacePanel component

---
 src/components/views/spaces/SpacePanel.tsx | 134 ++++++++++++---------
 1 file changed, 76 insertions(+), 58 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 27f097e9d4..2e3bfd157a 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from "react";
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar";
-import {useContextMenu} from "../../structures/ContextMenu";
+import { useContextMenu } from "../../structures/ContextMenu";
 import SpaceCreateMenu from "./SpaceCreateMenu";
-import {SpaceItem} from "./SpaceTreeLevel";
+import { SpaceItem } from "./SpaceTreeLevel";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import SpaceStore, {
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
@@ -38,9 +38,9 @@ import {
     RovingAccessibleTooltipButton,
     RovingTabIndexProvider,
 } from "../../../accessibility/RovingTabIndex";
-import {Key} from "../../../Keyboard";
-import {RoomNotificationStateStore} from "../../../stores/notifications/RoomNotificationStateStore";
-import {NotificationState} from "../../../stores/notifications/NotificationState";
+import { Key } from "../../../Keyboard";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
 
 interface IButtonProps {
     space?: Room;
@@ -121,11 +121,62 @@ const useSpaces = (): [Room[], Room[], Room | null] => {
     return [invites, spaces, activeSpace];
 };
 
+interface IInnerSpacePanelProps {
+    children?: ReactNode;
+    isPanelCollapsed: boolean;
+    setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
+}
+
+// Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation
+const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCollapsed, setPanelCollapsed }) => {
+    const [invites, spaces, activeSpace] = useSpaces();
+    const activeSpaces = activeSpace ? [activeSpace] : [];
+
+    return <div className="mx_SpaceTreeLevel">
+        <SpaceButton
+            className="mx_SpaceButton_home"
+            onClick={() => SpaceStore.instance.setActiveSpace(null)}
+            selected={!activeSpace}
+            tooltip={_t("All rooms")}
+            notificationState={RoomNotificationStateStore.instance.globalState}
+            isNarrow={isPanelCollapsed}
+        />
+        { invites.map(s => (
+            <SpaceItem
+                key={s.roomId}
+                space={s}
+                activeSpaces={activeSpaces}
+                isPanelCollapsed={isPanelCollapsed}
+                onExpand={() => setPanelCollapsed(false)}
+            />
+        )) }
+        { spaces.map((s, i) => (
+            <Draggable key={s.roomId} draggableId={s.roomId} index={i}>
+                {(provided, snapshot) => (
+                    <SpaceItem
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        key={s.roomId}
+                        innerRef={provided.innerRef}
+                        className={snapshot.isDragging
+                            ? "mx_SpaceItem_dragging"
+                            : undefined}
+                        space={s}
+                        activeSpaces={activeSpaces}
+                        isPanelCollapsed={isPanelCollapsed}
+                        onExpand={() => setPanelCollapsed(false)}
+                    />
+                )}
+            </Draggable>
+        )) }
+        { children }
+    </div>;
+});
+
 const SpacePanel = () => {
     // We don't need the handle as we position the menu in a constant location
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<void>();
-    const [invites, spaces, activeSpace] = useSpaces();
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
 
     useEffect(() => {
@@ -134,10 +185,6 @@ const SpacePanel = () => {
         }
     }, [isPanelCollapsed]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const newClasses = classNames("mx_SpaceButton_new", {
-        mx_SpaceButton_newCancel: menuDisplayed,
-    });
-
     let contextMenu = null;
     if (menuDisplayed) {
         contextMenu = <SpaceCreateMenu onFinished={closeMenu} />;
@@ -204,7 +251,11 @@ const SpacePanel = () => {
         }
     };
 
-    const activeSpaces = activeSpace ? [activeSpace] : [];
+    const onNewClick = menuDisplayed ? closeMenu : () => {
+        if (!isPanelCollapsed) setPanelCollapsed(true);
+        openMenu();
+    };
+
     return (
         <DragDropContext onDragEnd={result => {
             if (!result.destination) return; // dropped outside the list
@@ -226,59 +277,26 @@ const SpacePanel = () => {
                                         pointerEvents: "none",
                                     } : undefined}
                                 >
-                                    <div className="mx_SpaceTreeLevel">
-                                        <SpaceButton
-                                            className="mx_SpaceButton_home"
-                                            onClick={() => SpaceStore.instance.setActiveSpace(null)}
-                                            selected={!activeSpace}
-                                            tooltip={_t("All rooms")}
-                                            notificationState={RoomNotificationStateStore.instance.globalState}
-                                            isNarrow={isPanelCollapsed}
-                                        />
-                                        { invites.map(s => (
-                                            <SpaceItem
-                                                key={s.roomId}
-                                                space={s}
-                                                activeSpaces={activeSpaces}
-                                                isPanelCollapsed={isPanelCollapsed}
-                                                onExpand={() => setPanelCollapsed(false)}
-                                            />
-                                        )) }
-                                        { spaces.map((s, i) => (
-                                            <Draggable key={s.roomId} draggableId={s.roomId} index={i}>
-                                                {(provided, snapshot) => (
-                                                    <SpaceItem
-                                                        {...provided.draggableProps}
-                                                        {...provided.dragHandleProps}
-                                                        key={s.roomId}
-                                                        innerRef={provided.innerRef}
-                                                        className={snapshot.isDragging
-                                                            ? "mx_SpaceItem_dragging"
-                                                            : undefined}
-                                                        space={s}
-                                                        activeSpaces={activeSpaces}
-                                                        isPanelCollapsed={isPanelCollapsed}
-                                                        onExpand={() => setPanelCollapsed(false)}
-                                                    />
-                                                )}
-                                            </Draggable>
-                                        )) }
+                                    <InnerSpacePanel
+                                        isPanelCollapsed={isPanelCollapsed}
+                                        setPanelCollapsed={setPanelCollapsed}
+                                    >
                                         { provided.placeholder }
-                                    </div>
+                                    </InnerSpacePanel>
+
                                     <SpaceButton
-                                        className={newClasses}
+                                        className={classNames("mx_SpaceButton_new", {
+                                            mx_SpaceButton_newCancel: menuDisplayed,
+                                        })}
                                         tooltip={menuDisplayed ? _t("Cancel") : _t("Create a space")}
-                                        onClick={menuDisplayed ? closeMenu : () => {
-                                            if (!isPanelCollapsed) setPanelCollapsed(true);
-                                            openMenu();
-                                        }}
+                                        onClick={onNewClick}
                                         isNarrow={isPanelCollapsed}
                                     />
                                 </AutoHideScrollbar>
                             )}
                         </Droppable>
                         <AccessibleTooltipButton
-                            className={classNames("mx_SpacePanel_toggleCollapse", {expanded: !isPanelCollapsed})}
+                            className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
                             onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                             title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")}
                         />

From 27e27b7a871f6eeb4fb37f9ee2d9dc2560442535 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 10:18:32 +0100
Subject: [PATCH 074/358] Convert MultiInviter, RoomInvite and UserAddress to
 Typescript

---
 src/{RoomInvite.js => RoomInvite.tsx}         |  44 +++---
 src/{UserAddress.js => UserAddress.ts}        |  35 +++--
 .../{MultiInviter.js => MultiInviter.ts}      | 143 +++++++++++-------
 3 files changed, 127 insertions(+), 95 deletions(-)
 rename src/{RoomInvite.js => RoomInvite.tsx} (76%)
 rename src/{UserAddress.js => UserAddress.ts} (69%)
 rename src/utils/{MultiInviter.js => MultiInviter.ts} (66%)

diff --git a/src/RoomInvite.js b/src/RoomInvite.tsx
similarity index 76%
rename from src/RoomInvite.js
rename to src/RoomInvite.tsx
index aa758ecbdc..7c75b5d46b 100644
--- a/src/RoomInvite.js
+++ b/src/RoomInvite.tsx
@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2021 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.
@@ -16,15 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import {MatrixClientPeg} from './MatrixClientPeg';
-import MultiInviter from './utils/MultiInviter';
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { MatrixClientPeg } from './MatrixClientPeg';
+import MultiInviter, { CompletionStates } from './utils/MultiInviter';
 import Modal from './Modal';
 import * as sdk from './';
 import { _t } from './languageHandler';
-import InviteDialog, {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
+import InviteDialog, { KIND_DM, KIND_INVITE } from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
-import {CommunityPrototypeStore} from "./stores/CommunityPrototypeStore";
+import { CommunityPrototypeStore } from "./stores/CommunityPrototypeStore";
 
 /**
  * Invites multiple addresses to a room
@@ -32,15 +33,18 @@ import {CommunityPrototypeStore} from "./stores/CommunityPrototypeStore";
  * no option to cancel.
  *
  * @param {string} roomId The ID of the room to invite to
- * @param {string[]} addrs Array of strings of addresses to invite. May be matrix IDs or 3pids.
+ * @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids.
  * @returns {Promise} Promise
  */
-export function inviteMultipleToRoom(roomId, addrs) {
+export function inviteMultipleToRoom(
+    roomId: string,
+    addresses: string[],
+): Promise<{ states: CompletionStates, inviter: MultiInviter }> {
     const inviter = new MultiInviter(roomId);
-    return inviter.invite(addrs).then(states => Promise.resolve({states, inviter}));
+    return inviter.invite(addresses).then(states => Promise.resolve({ states, inviter }));
 }
 
-export function showStartChatInviteDialog(initialText) {
+export function showStartChatInviteDialog(initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
     Modal.createTrackedDialog(
@@ -49,7 +53,7 @@ export function showStartChatInviteDialog(initialText) {
     );
 }
 
-export function showRoomInviteDialog(roomId, initialText = "") {
+export function showRoomInviteDialog(roomId: string, initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createTrackedDialog(
         "Invite Users", "", InviteDialog, {
@@ -61,14 +65,14 @@ export function showRoomInviteDialog(roomId, initialText = "") {
     );
 }
 
-export function showCommunityRoomInviteDialog(roomId, communityName) {
+export function showCommunityRoomInviteDialog(roomId: string, communityName: string): void {
     Modal.createTrackedDialog(
         'Invite Users to Community', '', CommunityPrototypeInviteDialog, {communityName, roomId},
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
     );
 }
 
-export function showCommunityInviteDialog(communityId) {
+export function showCommunityInviteDialog(communityId: string): void {
     const chat = CommunityPrototypeStore.instance.getGeneralChat(communityId);
     if (chat) {
         const name = CommunityPrototypeStore.instance.getCommunityName(communityId);
@@ -83,7 +87,7 @@ export function showCommunityInviteDialog(communityId) {
  * @param {MatrixEvent} event The event to check
  * @returns {boolean} True if valid, false otherwise
  */
-export function isValid3pidInvite(event) {
+export function isValid3pidInvite(event: MatrixEvent): boolean {
     if (!event || event.getType() !== "m.room.third_party_invite") return false;
 
     // any events without these keys are not valid 3pid invites, so we ignore them
@@ -96,7 +100,7 @@ export function isValid3pidInvite(event) {
     return true;
 }
 
-export function inviteUsersToRoom(roomId, userIds) {
+export function inviteUsersToRoom(roomId: string, userIds: string[]): Promise<void> {
     return inviteMultipleToRoom(roomId, userIds).then((result) => {
         const room = MatrixClientPeg.get().getRoom(roomId);
         showAnyInviteErrors(result.states, room, result.inviter);
@@ -110,9 +114,9 @@ export function inviteUsersToRoom(roomId, userIds) {
     });
 }
 
-export function showAnyInviteErrors(addrs, room, inviter) {
+export function showAnyInviteErrors(states: CompletionStates, room: Room, inviter: MultiInviter): boolean {
     // Show user any errors
-    const failedUsers = Object.keys(addrs).filter(a => addrs[a] === 'error');
+    const failedUsers = Object.keys(states).filter(a => states[a] === 'error');
     if (failedUsers.length === 1 && inviter.fatal) {
         // Just get the first message because there was a fatal problem on the first
         // user. This usually means that no other users were attempted, making it
@@ -126,7 +130,7 @@ export function showAnyInviteErrors(addrs, room, inviter) {
     } else {
         const errorList = [];
         for (const addr of failedUsers) {
-            if (addrs[addr] === "error") {
+            if (states[addr] === "error") {
                 const reason = inviter.getErrorText(addr);
                 errorList.push(addr + ": " + reason);
             }
diff --git a/src/UserAddress.js b/src/UserAddress.ts
similarity index 69%
rename from src/UserAddress.js
rename to src/UserAddress.ts
index e7501a0d91..a2c546deb7 100644
--- a/src/UserAddress.js
+++ b/src/UserAddress.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2021 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.
@@ -14,15 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const emailRegex = /^\S+@\S+\.\S+$/;
+import PropTypes from "prop-types";
 
+const emailRegex = /^\S+@\S+\.\S+$/;
 const mxUserIdRegex = /^@\S+:\S+$/;
 const mxRoomIdRegex = /^!\S+:\S+$/;
 
-import PropTypes from 'prop-types';
-export const addressTypes = [
-    'mx-user-id', 'mx-room-id', 'email',
-];
+export const addressTypes = ['mx-user-id', 'mx-room-id', 'email'];
+
+export enum AddressType {
+    Email = "email",
+    MatrixUserId = "mx-user-id",
+    MatrixRoomId = "mx-room-id",
+}
 
 // PropType definition for an object describing
 // an address that can be invited to a room (which
@@ -40,18 +44,13 @@ export const UserAddressType = PropTypes.shape({
     isKnown: PropTypes.bool,
 });
 
-export function getAddressType(inputText) {
-    const isEmailAddress = emailRegex.test(inputText);
-    const isUserId = mxUserIdRegex.test(inputText);
-    const isRoomId = mxRoomIdRegex.test(inputText);
-
-    // sanity check the input for user IDs
-    if (isEmailAddress) {
-        return 'email';
-    } else if (isUserId) {
-        return 'mx-user-id';
-    } else if (isRoomId) {
-        return 'mx-room-id';
+export function getAddressType(inputText: string): AddressType | null {
+    if (emailRegex.test(inputText)) {
+        return AddressType.Email;
+    } else if (mxUserIdRegex.test(inputText)) {
+        return AddressType.MatrixUserId;
+    } else if (mxRoomIdRegex.test(inputText)) {
+        return AddressType.MatrixRoomId;
     } else {
         return null;
     }
diff --git a/src/utils/MultiInviter.js b/src/utils/MultiInviter.ts
similarity index 66%
rename from src/utils/MultiInviter.js
rename to src/utils/MultiInviter.ts
index 78f956b91b..f6a994484e 100644
--- a/src/utils/MultiInviter.js
+++ b/src/utils/MultiInviter.ts
@@ -1,6 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
+Copyright 2016 - 2021 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.
@@ -15,23 +14,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
-import {getAddressType} from '../UserAddress';
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+
+import { MatrixClientPeg } from '../MatrixClientPeg';
+import { AddressType, getAddressType } from '../UserAddress';
 import GroupStore from '../stores/GroupStore';
-import {_t} from "../languageHandler";
-import * as sdk from "../index";
+import { _t } from "../languageHandler";
 import Modal from "../Modal";
 import SettingsStore from "../settings/SettingsStore";
-import {defer} from "./promise";
+import { defer, IDeferred } from "./promise";
+import AskInviteAnywayDialog from "../components/views/dialogs/AskInviteAnywayDialog";
+
+export enum InviteState {
+    Invited = "invited",
+    Error = "error",
+}
+
+interface IError {
+    errorText: string;
+    errcode: string;
+}
+
+const UNKNOWN_PROFILE_ERRORS = ['M_NOT_FOUND', 'M_USER_NOT_FOUND', 'M_PROFILE_UNDISCLOSED', 'M_PROFILE_NOT_FOUND'];
+
+export type CompletionStates = Record<string, InviteState>;
 
 /**
  * Invites multiple addresses to a room or group, handling rate limiting from the server
  */
 export default class MultiInviter {
+    private readonly roomId?: string;
+    private readonly groupId?: string;
+
+    private canceled = false;
+    private addresses: string[] = [];
+    private busy = false;
+    private _fatal = false;
+    private completionStates: CompletionStates = {}; // State of each address (invited or error)
+    private errors: Record<string, IError> = {}; // { address: {errorText, errcode} }
+    private deferred: IDeferred<CompletionStates> = null;
+    private reason: string = null;
+
     /**
      * @param {string} targetId The ID of the room or group to invite to
      */
-    constructor(targetId) {
+    constructor(targetId: string) {
         if (targetId[0] === '+') {
             this.roomId = null;
             this.groupId = targetId;
@@ -39,41 +66,38 @@ export default class MultiInviter {
             this.roomId = targetId;
             this.groupId = null;
         }
+    }
 
-        this.canceled = false;
-        this.addrs = [];
-        this.busy = false;
-        this.completionStates = {}; // State of each address (invited or error)
-        this.errors = {}; // { address: {errorText, errcode} }
-        this.deferred = null;
+    public get fatal() {
+        return this._fatal;
     }
 
     /**
      * Invite users to this room. This may only be called once per
      * instance of the class.
      *
-     * @param {array} addrs Array of addresses to invite
+     * @param {array} addresses Array of addresses to invite
      * @param {string} reason Reason for inviting (optional)
      * @returns {Promise} Resolved when all invitations in the queue are complete
      */
-    invite(addrs, reason) {
-        if (this.addrs.length > 0) {
+    public invite(addresses, reason?: string): Promise<CompletionStates> {
+        if (this.addresses.length > 0) {
             throw new Error("Already inviting/invited");
         }
-        this.addrs.push(...addrs);
+        this.addresses.push(...addresses);
         this.reason = reason;
 
-        for (const addr of this.addrs) {
+        for (const addr of this.addresses) {
             if (getAddressType(addr) === null) {
-                this.completionStates[addr] = 'error';
+                this.completionStates[addr] = InviteState.Error;
                 this.errors[addr] = {
                     errcode: 'M_INVALID',
                     errorText: _t('Unrecognised address'),
                 };
             }
         }
-        this.deferred = defer();
-        this._inviteMore(0);
+        this.deferred = defer<CompletionStates>();
+        this.inviteMore(0);
 
         return this.deferred.promise;
     }
@@ -81,33 +105,36 @@ export default class MultiInviter {
     /**
      * Stops inviting. Causes promises returned by invite() to be rejected.
      */
-    cancel() {
+    public cancel(): void {
         if (!this.busy) return;
 
-        this._canceled = true;
+        this.canceled = true;
         this.deferred.reject(new Error('canceled'));
     }
 
-    getCompletionState(addr) {
+    public getCompletionState(addr: string): InviteState {
         return this.completionStates[addr];
     }
 
-    getErrorText(addr) {
+    public getErrorText(addr: string): string {
         return this.errors[addr] ? this.errors[addr].errorText : null;
     }
 
-    async _inviteToRoom(roomId, addr, ignoreProfile) {
+    private async inviteToRoom(roomId: string, addr: string, ignoreProfile = false): Promise<{}> {
         const addrType = getAddressType(addr);
 
-        if (addrType === 'email') {
+        if (addrType === AddressType.Email) {
             return MatrixClientPeg.get().inviteByEmail(roomId, addr);
-        } else if (addrType === 'mx-user-id') {
+        } else if (addrType === AddressType.MatrixUserId) {
             const room = MatrixClientPeg.get().getRoom(roomId);
             if (!room) throw new Error("Room not found");
 
             const member = room.getMember(addr);
             if (member && ['join', 'invite'].includes(member.membership)) {
-                throw {errcode: "RIOT.ALREADY_IN_ROOM", error: "Member already invited"};
+                throw new new MatrixError({
+                    errcode: "RIOT.ALREADY_IN_ROOM",
+                    error: "Member already invited",
+                });
             }
 
             if (!ignoreProfile && SettingsStore.getValue("promptBeforeInviteUnknownUsers", this.roomId)) {
@@ -124,28 +151,28 @@ export default class MultiInviter {
         }
     }
 
-    _doInvite(address, ignoreProfile) {
-        return new Promise((resolve, reject) => {
+    private doInvite(address: string, ignoreProfile = false): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
             console.log(`Inviting ${address}`);
 
             let doInvite;
             if (this.groupId !== null) {
                 doInvite = GroupStore.inviteUserToGroup(this.groupId, address);
             } else {
-                doInvite = this._inviteToRoom(this.roomId, address, ignoreProfile);
+                doInvite = this.inviteToRoom(this.roomId, address, ignoreProfile);
             }
 
             doInvite.then(() => {
-                if (this._canceled) {
+                if (this.canceled) {
                     return;
                 }
 
-                this.completionStates[address] = 'invited';
+                this.completionStates[address] = InviteState.Invited;
                 delete this.errors[address];
 
                 resolve();
             }).catch((err) => {
-                if (this._canceled) {
+                if (this.canceled) {
                     return;
                 }
 
@@ -161,7 +188,7 @@ export default class MultiInviter {
                 } else if (err.errcode === 'M_LIMIT_EXCEEDED') {
                     // we're being throttled so wait a bit & try again
                     setTimeout(() => {
-                        this._doInvite(address, ignoreProfile).then(resolve, reject);
+                        this.doInvite(address, ignoreProfile).then(resolve, reject);
                     }, 5000);
                     return;
                 } else if (['M_NOT_FOUND', 'M_USER_NOT_FOUND'].includes(err.errcode)) {
@@ -171,7 +198,7 @@ export default class MultiInviter {
                 } else if (err.errcode === 'M_PROFILE_NOT_FOUND' && !ignoreProfile) {
                     // Invite without the profile check
                     console.warn(`User ${address} does not have a profile - inviting anyways automatically`);
-                    this._doInvite(address, true).then(resolve, reject);
+                    this.doInvite(address, true).then(resolve, reject);
                 } else if (err.errcode === "M_BAD_STATE") {
                     errorText = _t("The user must be unbanned before they can be invited.");
                 } else if (err.errcode === "M_UNSUPPORTED_ROOM_VERSION") {
@@ -180,14 +207,14 @@ export default class MultiInviter {
                     errorText = _t('Unknown server error');
                 }
 
-                this.completionStates[address] = 'error';
-                this.errors[address] = {errorText, errcode: err.errcode};
+                this.completionStates[address] = InviteState.Error;
+                this.errors[address] = { errorText, errcode: err.errcode };
 
                 this.busy = !fatal;
-                this.fatal = fatal;
+                this._fatal = fatal;
 
                 if (fatal) {
-                    reject();
+                    reject(err);
                 } else {
                     resolve();
                 }
@@ -195,22 +222,22 @@ export default class MultiInviter {
         });
     }
 
-    _inviteMore(nextIndex, ignoreProfile) {
-        if (this._canceled) {
+    private inviteMore(nextIndex: number, ignoreProfile = false): void {
+        if (this.canceled) {
             return;
         }
 
-        if (nextIndex === this.addrs.length) {
+        if (nextIndex === this.addresses.length) {
             this.busy = false;
             if (Object.keys(this.errors).length > 0 && !this.groupId) {
                 // There were problems inviting some people - see if we can invite them
                 // without caring if they exist or not.
-                const unknownProfileErrors = ['M_NOT_FOUND', 'M_USER_NOT_FOUND', 'M_PROFILE_UNDISCLOSED', 'M_PROFILE_NOT_FOUND'];
-                const unknownProfileUsers = Object.keys(this.errors).filter(a => unknownProfileErrors.includes(this.errors[a].errcode));
+                const unknownProfileUsers = Object.keys(this.errors)
+                    .filter(a => UNKNOWN_PROFILE_ERRORS.includes(this.errors[a].errcode));
 
                 if (unknownProfileUsers.length > 0) {
                     const inviteUnknowns = () => {
-                        const promises = unknownProfileUsers.map(u => this._doInvite(u, true));
+                        const promises = unknownProfileUsers.map(u => this.doInvite(u, true));
                         Promise.all(promises).then(() => this.deferred.resolve(this.completionStates));
                     };
 
@@ -219,15 +246,17 @@ export default class MultiInviter {
                         return;
                     }
 
-                    const AskInviteAnywayDialog = sdk.getComponent("dialogs.AskInviteAnywayDialog");
                     console.log("Showing failed to invite dialog...");
                     Modal.createTrackedDialog('Failed to invite', '', AskInviteAnywayDialog, {
-                        unknownProfileUsers: unknownProfileUsers.map(u => {return {userId: u, errorText: this.errors[u].errorText};}),
+                        unknownProfileUsers: unknownProfileUsers.map(u => ({
+                            userId: u,
+                            errorText: this.errors[u].errorText,
+                        })),
                         onInviteAnyways: () => inviteUnknowns(),
                         onGiveUp: () => {
                             // Fake all the completion states because we already warned the user
                             for (const addr of unknownProfileUsers) {
-                                this.completionStates[addr] = 'invited';
+                                this.completionStates[addr] = InviteState.Invited;
                             }
                             this.deferred.resolve(this.completionStates);
                         },
@@ -239,25 +268,25 @@ export default class MultiInviter {
             return;
         }
 
-        const addr = this.addrs[nextIndex];
+        const addr = this.addresses[nextIndex];
 
         // don't try to invite it if it's an invalid address
         // (it will already be marked as an error though,
         // so no need to do so again)
         if (getAddressType(addr) === null) {
-            this._inviteMore(nextIndex + 1);
+            this.inviteMore(nextIndex + 1);
             return;
         }
 
         // don't re-invite (there's no way in the UI to do this, but
         // for sanity's sake)
-        if (this.completionStates[addr] === 'invited') {
-            this._inviteMore(nextIndex + 1);
+        if (this.completionStates[addr] === InviteState.Invited) {
+            this.inviteMore(nextIndex + 1);
             return;
         }
 
-        this._doInvite(addr, ignoreProfile).then(() => {
-            this._inviteMore(nextIndex + 1, ignoreProfile);
+        this.doInvite(addr, ignoreProfile).then(() => {
+            this.inviteMore(nextIndex + 1, ignoreProfile);
         }).catch(() => this.deferred.resolve(this.completionStates));
     }
 }

From 47ddd33d2121ed8e74962c2ef02b1271837d6680 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 10:24:51 +0100
Subject: [PATCH 075/358] Remove explicit `.js` imports

---
 src/components/structures/MatrixChat.tsx            | 2 +-
 src/components/views/dialogs/AddressPickerDialog.js | 2 +-
 src/components/views/elements/AddressTile.js        | 6 +++---
 src/components/views/messages/SenderProfile.tsx     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 0af2d3d635..2cb0fbf3f6 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -48,7 +48,7 @@ import createRoom, {IOpts} from "../../createRoom";
 import {_t, _td, getCurrentLanguage} from '../../languageHandler';
 import SettingsStore from "../../settings/SettingsStore";
 import ThemeController from "../../settings/controllers/ThemeController";
-import { startAnyRegistrationFlow } from "../../Registration.js";
+import { startAnyRegistrationFlow } from "../../Registration";
 import { messageForSyncError } from '../../utils/ErrorUtils';
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils";
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 929d688e47..77c69abc4e 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -24,7 +24,7 @@ import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
-import { addressTypes, getAddressType } from '../../../UserAddress.js';
+import { addressTypes, getAddressType } from '../../../UserAddress';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
 import IdentityAuthClient from '../../../IdentityAuthClient';
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index df66d10a71..f8fa294b71 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -20,9 +20,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
-import { UserAddressType } from '../../../UserAddress.js';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { UserAddressType } from '../../../UserAddress';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.elements.AddressTile")
 export default class AddressTile extends React.Component {
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index 805f842fbc..de1549dffa 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import Flair from '../elements/Flair.js';
+import Flair from '../elements/Flair';
 import FlairStore from '../../../stores/FlairStore';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";

From 384bb3af2e6a43fb28f3c17a8cb7d2612121ba4a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 10:37:34 +0100
Subject: [PATCH 076/358] Fix layout regression in the invite dialog for few
 results

---
 res/css/views/dialogs/_InviteDialog.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 2e48b5d8e9..175b1cc556 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -294,6 +294,7 @@ limitations under the License.
     flex-direction: column;
 
     .mx_InviteDialog_content {
+        height: 100%;
         overflow: hidden;
     }
 }

From 590ce5674055f8094c69c7ec3d490e40747dcc5d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 11:48:14 +0100
Subject: [PATCH 077/358] Use MultiInviter error messages in InviteDialog for
 room invites

---
 src/RoomInvite.tsx                            | 10 +++++---
 src/components/views/dialogs/InviteDialog.tsx | 25 ++++++++-----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index 7c75b5d46b..16141a87e8 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -27,6 +27,11 @@ import InviteDialog, { KIND_DM, KIND_INVITE } from "./components/views/dialogs/I
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
 import { CommunityPrototypeStore } from "./stores/CommunityPrototypeStore";
 
+export interface IInviteResult {
+    states: CompletionStates;
+    inviter: MultiInviter;
+}
+
 /**
  * Invites multiple addresses to a room
  * Simpler interface to utils/MultiInviter but with
@@ -36,10 +41,7 @@ import { CommunityPrototypeStore } from "./stores/CommunityPrototypeStore";
  * @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids.
  * @returns {Promise} Promise
  */
-export function inviteMultipleToRoom(
-    roomId: string,
-    addresses: string[],
-): Promise<{ states: CompletionStates, inviter: MultiInviter }> {
+export function inviteMultipleToRoom(roomId: string, addresses: string[]): Promise<IInviteResult> {
     const inviter = new MultiInviter(roomId);
     return inviter.invite(addresses).then(states => Promise.resolve({ states, inviter }));
 }
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 778744b783..f50f2f23d6 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -34,7 +34,12 @@ import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {
     canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
 } from "../../../createRoom";
-import {inviteMultipleToRoom, showCommunityInviteDialog} from "../../../RoomInvite";
+import {
+    IInviteResult,
+    inviteMultipleToRoom,
+    showAnyInviteErrors,
+    showCommunityInviteDialog,
+} from "../../../RoomInvite";
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
 import {DefaultTagID} from "../../../stores/room-list/models";
@@ -601,19 +606,9 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         return members.map(m => ({userId: m.member.userId, user: m.member}));
     }
 
-    private shouldAbortAfterInviteError(result): boolean {
-        const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
-        if (failedUsers.length > 0) {
-            console.log("Failed to invite users: ", result);
-            this.setState({
-                busy: false,
-                errorText: _t("Failed to invite the following users to chat: %(csvUsers)s", {
-                    csvUsers: failedUsers.join(", "),
-                }),
-            });
-            return true; // abort
-        }
-        return false;
+    private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
+        this.setState({ busy: false });
+        return !showAnyInviteErrors(result.states, room, result.inviter);
     }
 
     private convertFilter(): Member[] {
@@ -731,7 +726,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         try {
             const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
-            if (!this.shouldAbortAfterInviteError(result)) { // handles setting error message too
+            if (!this.shouldAbortAfterInviteError(result, room)) { // handles setting error message too
                 this.props.onFinished();
             }
 

From e7fde2686f43da4b9e680eb12ba8b4054f903d8d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 12:12:00 +0100
Subject: [PATCH 078/358] remove unused imports

---
 test/utils/stringOrderField-test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/utils/stringOrderField-test.ts b/test/utils/stringOrderField-test.ts
index ece3043d86..331627dfc0 100644
--- a/test/utils/stringOrderField-test.ts
+++ b/test/utils/stringOrderField-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { sortBy } from "lodash";
-import { stringToBase, baseToString, averageBetweenStrings, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
+import { averageBetweenStrings, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
 
 import { midPointsBetweenStrings, reorderLexicographically } from "../../src/utils/stringOrderField";
 

From dbdb61c820bf0f071c6d199e0061ba6ec54de086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 16 Jun 2021 17:21:29 +0200
Subject: [PATCH 079/358] Improve the mxid overlap situation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_IRCLayout.scss           | 53 ++++++++-----------
 .../views/messages/SenderProfile.tsx          |  2 +-
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 541329e294..8e5a26b333 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -49,18 +49,6 @@ $irc-line-height: $font-18px;
             }
         }
 
-        > .mx_SenderProfile {
-            order: 2;
-            flex-shrink: 0;
-            width: var(--name-width);
-            text-overflow: ellipsis;
-            text-align: left;
-            display: flex;
-            align-items: center;
-            overflow: visible;
-            justify-content: flex-end;
-        }
-
         .mx_EventTile_line, .mx_EventTile_reply {
             padding: 0;
             display: flex;
@@ -173,27 +161,37 @@ $irc-line-height: $font-18px;
         border-left: 0;
     }
 
-    .mx_SenderProfile_hover {
-        background-color: $primary-bg-color;
-        overflow: hidden;
+    .mx_SenderProfile {
+        width: var(--name-width);
         display: flex;
+        order: 2;
+        flex-shrink: 0;
+        justify-content: flex-start;
+        align-items: center;
 
-        > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
+        > .mx_SenderProfile_displayName {
+            width: 100%;
+            text-align: end;
             overflow: hidden;
             text-overflow: ellipsis;
-            min-width: var(--name-width);
-            text-align: end;
+        }
+
+        > .mx_SenderProfile_mxid {
+            visibility: collapse;
         }
     }
 
     .mx_SenderProfile:hover {
-        justify-content: flex-start;
-    }
-
-    .mx_SenderProfile_hover:hover {
         overflow: visible;
-        width: max(auto, 100%);
         z-index: 10;
+
+        > .mx_SenderProfile_displayName {
+            overflow: visible;
+        }
+
+        > .mx_SenderProfile_mxid {
+            visibility: visible;
+        }
     }
 
     .mx_ReplyThread {
@@ -201,16 +199,7 @@ $irc-line-height: $font-18px;
         .mx_SenderProfile {
             width: unset;
             max-width: var(--name-width);
-        }
-
-        .mx_SenderProfile_hover {
             background: transparent;
-
-            > span {
-                > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
-                    min-width: inherit;
-                }
-            }
         }
 
         .mx_EventTile_emote {
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index 805f842fbc..a9a733b584 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -140,7 +140,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
+            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <span className={`mx_SenderProfile_displayName ${colorClass}`}>
                     { displayName }
                 </span>

From 100de336a1aaf944a2a5b03b3eb016703394457a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 16 Jun 2021 20:12:31 +0100
Subject: [PATCH 080/358] i18n

---
 src/i18n/strings/en_EN.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 17d6f64c46..57bf5fa739 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2241,7 +2241,6 @@
     "Confirm to continue": "Confirm to continue",
     "Click the button below to confirm your identity.": "Click the button below to confirm your identity.",
     "Invite by email": "Invite by email",
-    "Failed to invite the following users to chat: %(csvUsers)s": "Failed to invite the following users to chat: %(csvUsers)s",
     "We couldn't create your DM.": "We couldn't create your DM.",
     "Something went wrong trying to invite the users.": "Something went wrong trying to invite the users.",
     "We couldn't invite those users. Please check the users you want to invite and try again.": "We couldn't invite those users. Please check the users you want to invite and try again.",

From 79bf7bee560856be766493cd1a6dda8043bbe932 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Wed, 16 Jun 2021 18:23:44 -0400
Subject: [PATCH 081/358] Fix EventTilePreview display names

Because of 91df392a2a79383fa9a8a35cc9e4def6d3d4caab, we now need to
additionally set rawDisplayName to properly fake our display name for an
event.

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/views/elements/EventTilePreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 20d6cbaeb3..d39557c9bb 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -102,6 +102,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         // Fake it more
         event.sender = {
             name: this.props.displayName || this.props.userId,
+            rawDisplayName: this.props.displayName,
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(

From 7c6161d83ad60df8e332656ca0389ce90797ec3e Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 16 Jun 2021 18:00:06 +0100
Subject: [PATCH 082/358] Stop requesting null next replies from the server

A recent change (47e007e08f9bedaf47cf59a63c9bd04219195d76) introduced a
regression where we failed to check whether a reply thread has a next reply.
This meant that we would end up sending `/context/undefined` requests to the
server for every reply thread on every room view.

Fixes https://github.com/vector-im/element-web/issues/17563
Regressed by https://github.com/matrix-org/matrix-react-sdk/pull/6079
---
 src/components/views/elements/ReplyThread.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 81ed360b17..a9b24a306b 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -297,6 +297,7 @@ export default class ReplyThread extends React.Component {
     }
 
     async getEvent(eventId) {
+        if (!eventId) return null;
         const event = this.room.findEventById(eventId);
         if (event) return event;
 

From 0367b5bcced808ce75e19f0a7669f3ab5b61524c Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 17 Jun 2021 08:45:09 +0100
Subject: [PATCH 083/358] remove stray bullet point in reply preview

---
 src/components/views/elements/ReplyThread.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 81ed360b17..0f6aef37eb 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -392,6 +392,7 @@ export default class ReplyThread extends React.Component {
                     alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                     replacingEventId={ev.replacingEventId()}
+                    as="div"
                 />
             </blockquote>;
         });

From 1597b2a971bb3e0194c4a8cf8bb5530923f17438 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 16 Jun 2021 10:01:23 +0100
Subject: [PATCH 084/358] Keep composer reply when scrolling away from a
 highlighted event

---
 src/components/structures/RoomView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index fe90d2f873..c0ce6ba4c9 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -701,6 +701,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 room_id: this.state.room.roomId,
                 event_id: this.state.initialEventId,
                 highlighted: false,
+                replyingToEvent: this.state.replyToEvent,
             });
         }
     }

From 7d90612371a31f699d879366262f84fd1082bd9b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Jun 2021 16:22:40 +0100
Subject: [PATCH 085/358] Iterate PR

---
 res/css/views/beta/_BetaCard.scss             | 93 +++++++++++--------
 src/components/views/beta/BetaCard.tsx        | 49 +++++-----
 .../views/elements/SettingsFlag.tsx           | 10 +-
 src/i18n/strings/en_EN.json                   |  8 +-
 src/settings/Settings.tsx                     | 11 ++-
 src/settings/SettingsStore.ts                 | 10 ++
 6 files changed, 107 insertions(+), 74 deletions(-)

diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index fd87b1c824..1a8241b65f 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -19,55 +19,68 @@ limitations under the License.
     padding: 24px;
     background-color: $settings-profile-placeholder-bg-color;
     border-radius: 8px;
-    display: flex;
     box-sizing: border-box;
 
-    > div {
-        .mx_BetaCard_title {
-            font-weight: $font-semi-bold;
-            font-size: $font-18px;
-            line-height: $font-22px;
-            color: $primary-fg-color;
-            margin: 4px 0 14px;
+    .mx_BetaCard_columns {
+        display: flex;
 
-            .mx_BetaCard_betaPill {
-                margin-left: 12px;
+        > div {
+            .mx_BetaCard_title {
+                font-weight: $font-semi-bold;
+                font-size: $font-18px;
+                line-height: $font-22px;
+                color: $primary-fg-color;
+                margin: 4px 0 14px;
+
+                .mx_BetaCard_betaPill {
+                    margin-left: 12px;
+                }
+            }
+
+            .mx_BetaCard_caption {
+                font-size: $font-15px;
+                line-height: $font-20px;
+                color: $secondary-fg-color;
+                margin-bottom: 20px;
+            }
+
+            .mx_BetaCard_buttons .mx_AccessibleButton {
+                display: block;
+                margin: 12px 0;
+                padding: 7px 40px;
+                width: auto;
+            }
+
+            .mx_BetaCard_disclaimer {
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+                margin-top: 20px;
             }
         }
 
-        .mx_BetaCard_caption {
-            font-size: $font-15px;
-            line-height: $font-20px;
-            color: $secondary-fg-color;
-            margin-bottom: 20px;
-        }
-
-        .mx_BetaCard_buttons .mx_AccessibleButton {
-            display: block;
-            margin: 12px 0;
-            padding: 7px 40px;
-            width: auto;
-        }
-
-        .mx_BetaCard_disclaimer {
-            font-size: $font-12px;
-            line-height: $font-15px;
-            color: $secondary-fg-color;
-            margin-top: 20px;
-        }
-
-        .mx_BetaCard_relatedSettings {
-            summary + .mx_SettingsFlag {
-                margin-top: 4px;
-            }
+        > img {
+            margin: auto 0 auto 20px;
+            width: 300px;
+            object-fit: contain;
+            height: 100%;
         }
     }
 
-    > img {
-        margin: auto 0 auto 20px;
-        width: 300px;
-        object-fit: contain;
-        height: 100%;
+    .mx_BetaCard_relatedSettings {
+        .mx_SettingsFlag {
+            margin: 16px 0 0;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $primary-fg-color;
+
+            .mx_SettingsFlag_microcopy {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+            }
+        }
     }
 }
 
diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index 56770c3385..aa4fe49f63 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -83,32 +83,33 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     }
 
     return <div className="mx_BetaCard">
-        <div>
-            <h3 className="mx_BetaCard_title">
-                { titleOverride || _t(title) }
-                <BetaPill />
-            </h3>
-            <span className="mx_BetaCard_caption">{ _t(caption) }</span>
-            <div className="mx_BetaCard_buttons">
-                { feedbackButton }
-                <AccessibleButton
-                    onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
-                    kind={feedbackButton ? "primary_outline" : "primary"}
-                >
-                    { value ? _t("Leave the beta") : _t("Join the beta") }
-                </AccessibleButton>
+        <div className="mx_BetaCard_columns">
+            <div>
+                <h3 className="mx_BetaCard_title">
+                    { titleOverride || _t(title) }
+                    <BetaPill />
+                </h3>
+                <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+                <div className="mx_BetaCard_buttons">
+                    { feedbackButton }
+                    <AccessibleButton
+                        onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+                        kind={feedbackButton ? "primary_outline" : "primary"}
+                    >
+                        { value ? _t("Leave the beta") : _t("Join the beta") }
+                    </AccessibleButton>
+                </div>
+                { disclaimer && <div className="mx_BetaCard_disclaimer">
+                    { disclaimer(value) }
+                </div> }
             </div>
-            { disclaimer && <div className="mx_BetaCard_disclaimer">
-                { disclaimer(value) }
-            </div> }
-            { extraSettings && <details className="mx_BetaCard_relatedSettings">
-                <summary>{ _t("Experimental options") }</summary>
-                { extraSettings.map(key => (
-                    <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
-                )) }
-            </details> }
+            <img src={image} alt="" />
         </div>
-        <img src={image} alt="" />
+        { extraSettings && <div className="mx_BetaCard_relatedSettings">
+            { extraSettings.map(key => (
+                <SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
+            )) }
+        </div> }
     </div>;
 };
 
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 4f885ab47d..24a21e1a33 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -77,9 +77,10 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
-        let label = this.props.label;
-        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
-        else label = _t(label);
+        const label = this.props.label
+            ? _t(this.props.label)
+            : SettingsStore.getDisplayName(this.props.name, this.props.level);
+        const description = SettingsStore.getDescription(this.props.name);
 
         if (this.props.useCheckbox) {
             return <StyledCheckbox
@@ -99,6 +100,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                         disabled={this.props.disabled || !canChange}
                         aria-label={label}
                     />
+                    { description && <div className="mx_SettingsFlag_microcopy">
+                        { description }
+                    </div> }
                 </div>
             );
         }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 044e3a3079..179b58b617 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -793,9 +793,10 @@
     "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "You can leave the beta any time from settings or tapping on a beta badge, like the one above.",
     "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Your feedback will help make spaces better. The more detail you can go into, the better.",
-    "Use an all rooms space instead of a home space.": "Use an all rooms space instead of a home space.",
-    "Show DMs for joined/invited members in the space.": "Show DMs for joined/invited members in the space.",
-    "Show notification badges for DMs in spaces.": "Show notification badges for DMs in spaces.",
+    "Show all rooms in Home": "Show all rooms in Home",
+    "Show people in spaces": "Show people in spaces",
+    "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.",
+    "Show notification badges for DMs in Spaces.": "Show notification badges for DMs in Spaces.",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages": "Send and receive voice messages",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
@@ -2510,7 +2511,6 @@
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
-    "Experimental options": "Experimental options",
     "Avatar": "Avatar",
     "This room is public": "This room is public",
     "Away": "Away",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index a291cd1fba..af026f4103 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -94,6 +94,9 @@ export interface ISetting {
         [level: SettingLevel]: string;
     };
 
+    // Optional description which will be shown as microCopy under SettingsFlags
+    description?: string;
+
     // The supported levels are required. Preferably, use the preset arrays
     // at the top of this file to define this rather than a custom array.
     supportedLevels?: SettingLevel[];
@@ -176,19 +179,21 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         },
     },
     "feature_spaces.all_rooms": {
-        displayName: _td("Use an all rooms space instead of a home space."),
+        displayName: _td("Show all rooms in Home"),
         supportedLevels: LEVELS_FEATURE,
         default: true,
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_member_dms": {
-        displayName: _td("Show DMs for joined/invited members in the space."),
+        displayName: _td("Show people in spaces"),
+        description: _td("If disabled, you can still add Direct Messages to Personal Spaces. " +
+            "If enabled, you'll automatically see everyone who is a member of the Space."),
         supportedLevels: LEVELS_FEATURE,
         default: true,
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_dm_badges": {
-        displayName: _td("Show notification badges for DMs in spaces."),
+        displayName: _td("Show notification badges for DMs in Spaces."),
         supportedLevels: LEVELS_FEATURE,
         default: false,
         controller: new ReloadOnChangeController(),
diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts
index e1e300e185..44f3d5d838 100644
--- a/src/settings/SettingsStore.ts
+++ b/src/settings/SettingsStore.ts
@@ -248,6 +248,16 @@ export default class SettingsStore {
         return _t(displayName as string);
     }
 
+    /**
+     * Gets the translated description for a given setting
+     * @param {string} settingName The setting to look up.
+     * @return {String} The description for the setting, or null if not found.
+     */
+    public static getDescription(settingName: string) {
+        if (!SETTINGS[settingName]?.description) return null;
+        return _t(SETTINGS[settingName].description);
+    }
+
     /**
      * Determines if a setting is also a feature.
      * @param {string} settingName The setting to look up.

From 1394e5b0a4a950cb8f2a17758b09fc72862493a2 Mon Sep 17 00:00:00 2001
From: Ayush PS <ayushpratap16@gmail.com>
Date: Fri, 18 Jun 2021 00:12:39 +0530
Subject: [PATCH 086/358] Updated changes for the tile

Signed-off-by: Ayush PS <ayushpratap16@gmail.com>
---
 res/css/views/rooms/_EventTile.scss      | 5 -----
 src/components/views/rooms/EventTile.tsx | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a6ccde93d3..5d1dd04383 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -130,11 +130,6 @@ $left-gutter: 64px;
     .mx_EventTile_msgOption {
         grid-column: 2;
     }
-
-    .hidden {
-        // override the overriden padding for hidden events
-        padding-left: 64px !important;
-    }
 }
 
 .mx_EventTile_reply {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 533aa6cfab..35ccefde1e 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -824,7 +824,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         let tileHandler = getHandlerTile(this.props.mxEvent);
 
         // Info messages are basically information about commands processed on a room
-        const isBubbleMessage = eventType.startsWith("m.key.verification") ||
+        let isBubbleMessage = eventType.startsWith("m.key.verification") ||
             (eventType === EventType.RoomMessage && msgtype && msgtype.startsWith("m.key.verification")) ||
             (eventType === EventType.RoomCreate) ||
             (eventType === EventType.RoomEncryption) ||
@@ -840,6 +840,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         // duplicate of the thing they are replacing).
         if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
             tileHandler = "messages.ViewSourceEvent";
+            isBubbleMessage = false;
             // Reuse info message avatar and sender profile styling
             isInfoMessage = true;
         }
@@ -1135,8 +1136,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
-                        <div className={`mx_EventTile_line ${ isBubbleMessage
-                             && tileHandler == "messages.ViewSourceEvent" ? "hidden" : ""}`}>
+                        <div className="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
                             { thread }

From 9cce5ef10f116a13167a04ae42954adc8569c1f3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 15:31:12 +0100
Subject: [PATCH 087/358] Consolidate types with js-sdk changes

---
 src/Avatar.ts                          | 3 +--
 src/components/structures/RoomView.tsx | 8 ++------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/Avatar.ts b/src/Avatar.ts
index 8ea0b0c9fa..4c4bd1c265 100644
--- a/src/Avatar.ts
+++ b/src/Avatar.ts
@@ -17,13 +17,12 @@ limitations under the License.
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
 
 import DMRoomMap from './utils/DMRoomMap';
 import { mediaFromMxc } from "./customisations/Media";
 import SettingsStore from "./settings/SettingsStore";
 
-export type ResizeMethod = "crop" | "scale";
-
 // Not to be used for BaseAvatar urls as that has similar default avatar fallback already
 export function avatarUrlForMember(
     member: RoomMember,
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 1e3adcb518..d9f2d5231b 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -23,7 +23,7 @@ limitations under the License.
 
 import React, { createRef } from 'react';
 import classNames from 'classnames';
-import { Room } from "matrix-js-sdk/src/models/room";
+import { IRecommendedVersion, Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 import { EventSubscription } from "fbemitter";
@@ -172,11 +172,7 @@ export interface IState {
     // We load this later by asking the js-sdk to suggest a version for us.
     // This object is the result of Room#getRecommendedVersion()
 
-    upgradeRecommendation?: {
-        version: string;
-        needsUpgrade: boolean;
-        urgent: boolean;
-    };
+    upgradeRecommendation?: IRecommendedVersion;
     canReact: boolean;
     canReply: boolean;
     layout: Layout;

From 058cbbbd0c6c2534e390d000844ccde74683f690 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 16:13:55 +0100
Subject: [PATCH 088/358] Fix imports

---
 src/autocomplete/Autocompleter.ts             |  7 ++--
 src/autocomplete/NotifProvider.tsx            |  3 +-
 src/autocomplete/RoomProvider.tsx             | 12 +++---
 src/components/views/avatars/BaseAvatar.tsx   |  9 +++--
 src/components/views/avatars/GroupAvatar.tsx  |  7 ++--
 src/components/views/avatars/MemberAvatar.tsx | 10 ++---
 src/components/views/avatars/RoomAvatar.tsx   | 12 +++---
 src/components/views/elements/RoomName.tsx    |  8 ++--
 .../views/rooms/WhoIsTypingTile.tsx           |  2 +-
 src/customisations/Media.ts                   |  9 +++--
 src/utils/ShieldUtils.ts                      | 39 ++++++++++---------
 11 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts
index 5409825f45..ea8eddbb8d 100644
--- a/src/autocomplete/Autocompleter.ts
+++ b/src/autocomplete/Autocompleter.ts
@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ReactElement} from 'react';
-import Room from 'matrix-js-sdk/src/models/room';
+import { ReactElement } from 'react';
+import { Room } from 'matrix-js-sdk/src/models/room';
+
 import CommandProvider from './CommandProvider';
 import CommunityProvider from './CommunityProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
@@ -24,7 +25,7 @@ import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
 import EmojiProvider from './EmojiProvider';
 import NotifProvider from './NotifProvider';
-import {timeout} from "../utils/promise";
+import { timeout } from "../utils/promise";
 import AutocompleteProvider, {ICommand} from "./AutocompleteProvider";
 import SettingsStore from "../settings/SettingsStore";
 import SpaceProvider from "./SpaceProvider";
diff --git a/src/autocomplete/NotifProvider.tsx b/src/autocomplete/NotifProvider.tsx
index 0bc7ead097..827f4aa885 100644
--- a/src/autocomplete/NotifProvider.tsx
+++ b/src/autocomplete/NotifProvider.tsx
@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import Room from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import AutocompleteProvider from './AutocompleteProvider';
 import { _t } from '../languageHandler';
 import {MatrixClientPeg} from '../MatrixClientPeg';
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index ad55b19101..a82a757a78 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -17,16 +17,16 @@ limitations under the License.
 */
 
 import React from "react";
-import {uniqBy, sortBy} from "lodash";
-import Room from "matrix-js-sdk/src/models/room";
+import { uniqBy, sortBy } from "lodash";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
-import {PillCompletion} from './Components';
-import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
-import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { PillCompletion } from './Components';
+import { makeRoomPermalink } from "../utils/permalinks/Permalinks";
+import { ICompletion, ISelectionRange } from "./Autocompleter";
 import RoomAvatar from '../components/views/avatars/RoomAvatar';
 import SettingsStore from "../settings/SettingsStore";
 
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 6949c14636..f98f8c88a1 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -17,16 +17,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useContext, useEffect, useState} from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {toPx} from "../../../utils/units";
-import {ResizeMethod} from "../../../Avatar";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { toPx } from "../../../utils/units";
 import { _t } from '../../../languageHandler';
 
 interface IProps {
diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx
index 3734ba9504..13dbbfec09 100644
--- a/src/components/views/avatars/GroupAvatar.tsx
+++ b/src/components/views/avatars/GroupAvatar.tsx
@@ -15,10 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+
 import BaseAvatar from './BaseAvatar';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 export interface IProps {
         groupId?: string;
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 3205ca372c..862563a8b4 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -16,14 +16,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 
 import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import BaseAvatar from "./BaseAvatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {ResizeMethod} from "../../../Avatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember;
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index 4693d907ba..bd820509c5 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -13,17 +13,17 @@ 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 React, {ComponentProps} from 'react';
-import Room from 'matrix-js-sdk/src/models/room';
+import React, { ComponentProps } from 'react';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
-import {ResizeMethod} from "../../../Avatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
diff --git a/src/components/views/elements/RoomName.tsx b/src/components/views/elements/RoomName.tsx
index 9178155d19..cdd83aedc2 100644
--- a/src/components/views/elements/RoomName.tsx
+++ b/src/components/views/elements/RoomName.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect, useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { useEffect, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 
 interface IProps {
     room: Room;
@@ -34,7 +34,7 @@ const RoomName = ({ room, children }: IProps): JSX.Element => {
     }, [room]);
 
     if (children) return children(name);
-    return name || "";
+    return <>{ name || "" }</>;
 };
 
 export default RoomName;
diff --git a/src/components/views/rooms/WhoIsTypingTile.tsx b/src/components/views/rooms/WhoIsTypingTile.tsx
index 3a1d2051b4..93078ff645 100644
--- a/src/components/views/rooms/WhoIsTypingTile.tsx
+++ b/src/components/views/rooms/WhoIsTypingTile.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import Room from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index f9d957b60c..37e91fc54b 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import {MatrixClientPeg} from "../MatrixClientPeg";
-import {IMediaEventContent, IPreparedMedia, prepEventContentAsMedia} from "./models/IMediaEventContent";
-import {ResizeMethod} from "../Avatar";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { IMediaEventContent, IPreparedMedia, prepEventContentAsMedia } from "./models/IMediaEventContent";
 
 // Populate this class with the details of your customisations when copying it.
 
diff --git a/src/utils/ShieldUtils.ts b/src/utils/ShieldUtils.ts
index 5fe653fed0..c855b81bf8 100644
--- a/src/utils/ShieldUtils.ts
+++ b/src/utils/ShieldUtils.ts
@@ -1,30 +1,31 @@
+/*
+Copyright 2021 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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import DMRoomMap from './DMRoomMap';
 
-/* For now, a cut-down type spec for the client */
-interface Client {
-    getUserId: () => string;
-    checkUserTrust: (userId: string) => {
-        isCrossSigningVerified: () => boolean
-        wasCrossSigningVerified: () => boolean
-    };
-    getStoredDevicesForUser: (userId: string) => [{ deviceId: string }];
-    checkDeviceTrust: (userId: string, deviceId: string) => {
-        isVerified: () => boolean
-    };
-}
-
-interface Room {
-    getEncryptionTargetMembers: () => Promise<[{userId: string}]>;
-    roomId: string;
-}
-
 export enum E2EStatus {
     Warning = "warning",
     Verified = "verified",
     Normal = "normal"
 }
 
-export async function shieldStatusForRoom(client: Client, room: Room): Promise<E2EStatus> {
+export async function shieldStatusForRoom(client: MatrixClient, room: Room): Promise<E2EStatus> {
     const members = (await room.getEncryptionTargetMembers()).map(({userId}) => userId);
     const inDMMap = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId);
 

From 3b7c92fd9ee02961566eb52471f5883cbe12db8a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 16:18:42 +0100
Subject: [PATCH 089/358] Use new js-sdk types properly

---
 src/components/structures/RoomView.tsx | 4 ++--
 src/mjolnir/BanList.ts                 | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index d9f2d5231b..bfc7a1972d 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -23,7 +23,7 @@ limitations under the License.
 
 import React, { createRef } from 'react';
 import classNames from 'classnames';
-import { IRecommendedVersion, Room } from "matrix-js-sdk/src/models/room";
+import { IRecommendedVersion, NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 import { EventSubscription } from "fbemitter";
@@ -2054,7 +2054,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
             const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
             jumpToBottom = (<JumpToBottomButton
-                highlight={this.state.room.getUnreadNotificationCount('highlight') > 0}
+                highlight={this.state.room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0}
                 numUnreadMessages={this.state.numUnreadMessages}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 roomId={this.state.roomId}
diff --git a/src/mjolnir/BanList.ts b/src/mjolnir/BanList.ts
index 21cd5d4cf7..89eec89500 100644
--- a/src/mjolnir/BanList.ts
+++ b/src/mjolnir/BanList.ts
@@ -92,7 +92,7 @@ export class BanList {
         if (!room) return;
 
         for (const eventType of ALL_RULE_TYPES) {
-            const events = room.currentState.getStateEvents(eventType, undefined);
+            const events = room.currentState.getStateEvents(eventType);
             for (const ev of events) {
                 if (!ev.getStateKey()) continue;
 

From 0ae4e7b11de934dcd28645f55f73646722b507ee Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 16:21:46 +0100
Subject: [PATCH 090/358] Fix typescript types

---
 src/SlashCommands.tsx                         |  7 +++---
 .../views/right_panel/EncryptionPanel.tsx     | 23 ++++++++++---------
 src/components/views/right_panel/UserInfo.tsx |  4 ++--
 src/components/views/rooms/NewRoomIntro.tsx   | 21 +++++++++--------
 src/dispatcher/payloads/ViewUserPayload.ts    |  3 ++-
 src/stores/RoomViewStore.tsx                  |  2 +-
 .../room-list/filters/SpaceFilterCondition.ts |  2 +-
 src/utils/WidgetUtils.ts                      | 23 ++++++++++---------
 8 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 9700c57d67..bd2133f3d9 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -17,8 +17,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import * as React from 'react';
+import { User } from "matrix-js-sdk/src/models/user";
 
 import * as ContentHelpers from 'matrix-js-sdk/src/content-helpers';
 import {MatrixClientPeg} from './MatrixClientPeg';
@@ -1019,9 +1019,8 @@ export const Commands = [
             const member = MatrixClientPeg.get().getRoom(roomId).getMember(userId);
             dis.dispatch<ViewUserPayload>({
                 action: Action.ViewUser,
-                // XXX: We should be using a real member object and not assuming what the
-                // receiver wants.
-                member: member || {userId},
+                // XXX: We should be using a real member object and not assuming what the receiver wants.
+                member: member || { userId } as User,
             });
             return success();
         },
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index c237a4ade6..3a26427246 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -14,28 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { User } from "matrix-js-sdk/src/models/user";
+import { PHASE_REQUESTED, PHASE_UNSENT } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {ensureDMExists} from "../../../createRoom";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { ensureDMExists } from "../../../createRoom";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import Modal from "../../../Modal";
-import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import * as sdk from "../../../index";
-import {_t} from "../../../languageHandler";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
 interface IProps {
-    member: RoomMember;
+    member: RoomMember | User;
     onClose: () => void;
     verificationRequest: VerificationRequest;
     verificationRequestPromise: Promise<VerificationRequest>;
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 0b37fb9dd6..8833cb6862 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -1594,7 +1594,7 @@ const UserInfo: React.FC<IProps> = ({
             content = (
                 <BasicUserInfo
                     room={room}
-                    member={member}
+                    member={member as User}
                     groupId={groupId as string}
                     devices={devices}
                     isRoomEncrypted={isRoomEncrypted} />
@@ -1605,7 +1605,7 @@ const UserInfo: React.FC<IProps> = ({
             content = (
                 <EncryptionPanel
                     {...props as React.ComponentProps<typeof EncryptionPanel>}
-                    member={member}
+                    member={member as User | RoomMember}
                     onClose={onEncryptionPanelClose}
                     isRoomEncrypted={isRoomEncrypted}
                 />
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index 3bf9a9db33..2b2958e3f3 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -14,25 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext} from "react";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import React, { useContext } from "react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { User } from "matrix-js-sdk/src/models/user";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RoomContext from "../../../contexts/RoomContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
-import MiniAvatarUploader, {AVATAR_SIZE} from "../elements/MiniAvatarUploader";
+import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader";
 import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
-import {Action} from "../../../dispatcher/actions";
+import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
+import { Action } from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
-import {showSpaceInvite} from "../../../utils/space";
-
+import { showSpaceInvite } from "../../../utils/space";
 import { privateShouldBeEncrypted } from "../../../createRoom";
-
 import EventTileBubble from "../messages/EventTileBubble";
 import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
 
@@ -61,7 +62,7 @@ const NewRoomIntro = () => {
                 defaultDispatcher.dispatch<ViewUserPayload>({
                     action: Action.ViewUser,
                     // XXX: We should be using a real member object and not assuming what the receiver wants.
-                    member: member || {userId: dmPartner},
+                    member: member || { userId: dmPartner } as User,
                 });
             }} />
 
diff --git a/src/dispatcher/payloads/ViewUserPayload.ts b/src/dispatcher/payloads/ViewUserPayload.ts
index c2838d0dbb..c4d73aea6a 100644
--- a/src/dispatcher/payloads/ViewUserPayload.ts
+++ b/src/dispatcher/payloads/ViewUserPayload.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { User } from "matrix-js-sdk/src/models/user";
 import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
 
@@ -25,5 +26,5 @@ export interface ViewUserPayload extends ActionPayload {
      * The member to view. May be null or falsy to indicate that no member
      * should be shown (hide whichever relevant components).
      */
-    member?: RoomMember;
+    member?: RoomMember | User;
 }
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index cc3eafffcd..87978df471 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -276,7 +276,7 @@ class RoomViewStore extends Store<ActionPayload> {
         const address = this.state.roomAlias || this.state.roomId;
         const viaServers = this.state.viaServers || [];
         try {
-            await retry<void, MatrixError>(() => cli.joinRoom(address, {
+            await retry<any, MatrixError>(() => cli.joinRoom(address, {
                 viaServers,
                 ...payload.opts,
             }), NUM_JOIN_RETRY, (err) => {
diff --git a/src/stores/room-list/filters/SpaceFilterCondition.ts b/src/stores/room-list/filters/SpaceFilterCondition.ts
index 6a06bee0d8..79e258927d 100644
--- a/src/stores/room-list/filters/SpaceFilterCondition.ts
+++ b/src/stores/room-list/filters/SpaceFilterCondition.ts
@@ -29,7 +29,7 @@ import { setHasDiff } from "../../../utils/sets";
  *  + All DMs
  */
 export class SpaceFilterCondition extends EventEmitter implements IFilterCondition, IDestroyable {
-    private roomIds = new Set<Room>();
+    private roomIds = new Set<string>();
     private space: Room = null;
 
     public get kind(): FilterKind {
diff --git a/src/utils/WidgetUtils.ts b/src/utils/WidgetUtils.ts
index 7ff0529363..926278a20a 100644
--- a/src/utils/WidgetUtils.ts
+++ b/src/utils/WidgetUtils.ts
@@ -16,19 +16,20 @@ limitations under the License.
 */
 
 import * as url from "url";
+import { Capability, IWidget, IWidgetData, MatrixCapabilities } from "matrix-widget-api";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import SdkConfig from "../SdkConfig";
 import dis from '../dispatcher/dispatcher';
 import WidgetEchoStore from '../stores/WidgetEchoStore';
 import SettingsStore from "../settings/SettingsStore";
-import {IntegrationManagers} from "../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {WidgetType} from "../widgets/WidgetType";
-import {objectClone} from "./objects";
-import {_t} from "../languageHandler";
-import {Capability, IWidget, IWidgetData, MatrixCapabilities} from "matrix-widget-api";
-import {IApp} from "../stores/WidgetStore";
+import { IntegrationManagers } from "../integrations/IntegrationManagers";
+import { WidgetType } from "../widgets/WidgetType";
+import { objectClone } from "./objects";
+import { _t } from "../languageHandler";
+import { IApp } from "../stores/WidgetStore";
 
 // How long we wait for the state event echo to come back from the server
 // before waitFor[Room/User]Widget rejects its promise
@@ -377,9 +378,9 @@ export default class WidgetUtils {
         return widgets.filter(w => w.content && w.content.type === "m.integration_manager");
     }
 
-    static getRoomWidgetsOfType(room: Room, type: WidgetType): IWidgetEvent[] {
-        const widgets = WidgetUtils.getRoomWidgets(room);
-        return (widgets || []).filter(w => {
+    static getRoomWidgetsOfType(room: Room, type: WidgetType): MatrixEvent[] {
+        const widgets = WidgetUtils.getRoomWidgets(room) || [];
+        return widgets.filter(w => {
             const content = w.getContent();
             return content.url && type.matches(content.type);
         });

From 233e2aa425266791f99c99aeb4f77f827c986ff9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 16:22:31 +0100
Subject: [PATCH 091/358] Fix bugs identified by the typescripting

---
 src/components/views/rooms/AuxPanel.tsx | 12 ++++++------
 src/components/views/rooms/RoomTile.tsx |  4 ++--
 src/stores/CommunityPrototypeStore.ts   | 13 ++++++++++---
 src/stores/SpaceStore.tsx               | 12 +++++++++---
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 74609cca13..f6cc0f4d45 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -15,10 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { Room } from 'matrix-js-sdk/src/models/room'
-import AppsDrawer from './AppsDrawer';
 import classNames from 'classnames';
+import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
+import { Room } from 'matrix-js-sdk/src/models/room'
+
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import AppsDrawer from './AppsDrawer';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
@@ -106,9 +108,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
 
         if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
             const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
-            stateEvs.sort((a, b) => {
-                return a.getStateKey() < b.getStateKey();
-            });
+            stateEvs.sort((a, b) => lexicographicCompare(a.getStateKey(), b.getStateKey()));
 
             for (const ev of stateEvs) {
                 const title = ev.getContent().title;
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index aae182eca4..310ff29010 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -119,7 +119,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     };
 
     private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
-        if (!room?.roomId === this.props.room.roomId) return;
+        if (room?.roomId !== this.props.room.roomId) return;
         this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
     };
 
@@ -316,7 +316,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                 0,
             ));
         } else {
-            console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`);
+            console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.roomId}`);
         }
 
         if ((ev as React.KeyboardEvent).key === Key.ENTER) {
diff --git a/src/stores/CommunityPrototypeStore.ts b/src/stores/CommunityPrototypeStore.ts
index 023845c9ee..a6f4574a58 100644
--- a/src/stores/CommunityPrototypeStore.ts
+++ b/src/stores/CommunityPrototypeStore.ts
@@ -107,8 +107,9 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
 
         const pl = generalChat.currentState.getStateEvents("m.room.power_levels", "");
         if (!pl) return this.isAdminOf(communityId);
+        const plContent = pl.getContent();
 
-        const invitePl = isNullOrUndefined(pl.invite) ? 50 : Number(pl.invite);
+        const invitePl = isNullOrUndefined(plContent.invite) ? 50 : Number(plContent.invite);
         return invitePl <= myMember.powerLevel;
     }
 
@@ -159,10 +160,16 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
             const data = this.matrixClient.getAccountData("im.vector.group_info." + roomId);
             if (data && data.getContent()) {
-                return {displayName: data.getContent().name, avatarMxc: data.getContent().avatar_url};
+                return {
+                    displayName: data.getContent().name,
+                    avatarMxc: data.getContent().avatar_url,
+                };
             }
         }
-        return {displayName: room.name, avatarMxc: room.avatar_url};
+        return {
+            displayName: room.name,
+            avatarMxc: room.getMxcAvatarUrl(),
+        };
     }
 
     protected async onReady(): Promise<any> {
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 40997d30a8..9463949aff 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -133,7 +133,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             // if the space being selected is an invite then always view that invite
             // else if the last viewed room in this space is joined then view that
             // else view space home or home depending on what is being clicked on
-            if (space?.getMyMembership !== "invite" &&
+            if (space?.getMyMembership() !== "invite" &&
                 this.matrixClient?.getRoom(roomId)?.getMyMembership() === "join"
             ) {
                 defaultDispatcher.dispatch({
@@ -423,8 +423,14 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             parent = this.rootSpaces.find(s => this.spaceFilteredRooms.get(s.roomId)?.has(roomId));
         }
         if (!parent) {
-            const parents = Array.from(this.parentMap.get(roomId) || []);
-            parent = parents.find(p => this.matrixClient.getRoom(p));
+            const parentIds = Array.from(this.parentMap.get(roomId) || []);
+            for (const parentId of parentIds) {
+                const room = this.matrixClient.getRoom(parentId);
+                if (room) {
+                    parent = room;
+                    break;
+                }
+            }
         }
 
         // don't trigger a context switch when we are switching a space to match the chosen room

From ab94b284b8325f5da9cf7e662a6f92288b887149 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 16:29:10 +0100
Subject: [PATCH 092/358] Updates around the use of private fields out of class

---
 src/components/views/rooms/NewRoomIntro.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index 2b2958e3f3..cae86846d9 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -37,8 +37,8 @@ import { privateShouldBeEncrypted } from "../../../createRoom";
 import EventTileBubble from "../messages/EventTileBubble";
 import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
 
-function hasExpectedEncryptionSettings(room): boolean {
-    const isEncrypted: boolean = room._client?.isRoomEncrypted(room.roomId);
+function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
+    const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
     const isPublic: boolean = room.getJoinRule() === "public";
     return isPublic || !privateShouldBeEncrypted() || isEncrypted;
 }
@@ -195,7 +195,7 @@ const NewRoomIntro = () => {
 
     return <div className="mx_NewRoomIntro">
 
-        { !hasExpectedEncryptionSettings(room) && (
+        { !hasExpectedEncryptionSettings(cli, room) && (
             <EventTileBubble
                 className="mx_cryptoEvent mx_cryptoEvent_icon_warning"
                 title={_t("End-to-end encryption isn't enabled")}

From 335b1055063d8eb9af8d0d8a3eca54405f6426d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 18 Jun 2021 17:29:12 +0200
Subject: [PATCH 093/358] Add PR template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .github/PULL_REQUEST_TEMPLATE.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000000..c9d11f02c8
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,3 @@
+<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst before submitting your pull request -->
+
+<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst#sign-off -->

From 8a3dc1bbdf6e5482e54b8bf159911a1b273a2e18 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 17:56:18 +0100
Subject: [PATCH 094/358] fix tests

---
 test/components/structures/MessagePanel-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 8f0242eb30..d32970a278 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -42,7 +42,7 @@ import DMRoomMap from "../../../src/utils/DMRoomMap";
 configure({ adapter: new Adapter() });
 
 let client;
-const room = new Matrix.Room();
+const room = new Matrix.Room("!roomId:server_name");
 
 // wrap MessagePanel with a component which provides the MatrixClient in the context.
 class WrappedMessagePanel extends React.Component {

From 958d4df957f065d321c08e04e73428c5020a6455 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 18:32:45 +0100
Subject: [PATCH 095/358] Naive attempt at improving our end-to-end tests in
 Github Actions

---
 .github/workflows/develop.yml                 |  7 +++++--
 ...d-tests.sh => prepare-end-to-end-tests.sh} | 11 +----------
 scripts/ci/run-end-to-end-tests.sh            | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)
 rename scripts/ci/{end-to-end-tests.sh => prepare-end-to-end-tests.sh} (65%)
 create mode 100755 scripts/ci/run-end-to-end-tests.sh

diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 6410bd28fa..3c3807e33b 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -11,10 +11,13 @@ jobs:
         steps:
             - name: Checkout code
               uses: actions/checkout@v2
-            - name: End-to-End tests
-              run: ./scripts/ci/end-to-end-tests.sh
+            - name: Prepare End-to-End tests
+              run: ./scripts/ci/prepare-end-to-end-tests.sh
+            - name: Run End-to-End tests
+              run: ./scripts/ci/run-end-to-end-tests.sh
             - name: Archive logs
               uses: actions/upload-artifact@v2
+              if: ${{ always() }}
               with:
                 path: |
                     test/end-to-end-tests/logs/**/*
diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/prepare-end-to-end-tests.sh
similarity index 65%
rename from scripts/ci/end-to-end-tests.sh
rename to scripts/ci/prepare-end-to-end-tests.sh
index edb8870d8e..147e1f6445 100755
--- a/scripts/ci/end-to-end-tests.sh
+++ b/scripts/ci/prepare-end-to-end-tests.sh
@@ -1,8 +1,4 @@
 #!/bin/bash
-#
-# script which is run by the CI build (after `yarn test`).
-#
-# clones element-web develop and runs the tests against our version of react-sdk.
 
 set -ev
 
@@ -19,7 +15,7 @@ cd element-web
 element_web_dir=`pwd`
 CI_PACKAGE=true yarn build
 cd ..
-# run end to end tests
+# prepare end to end tests
 pushd test/end-to-end-tests
 ln -s $element_web_dir element/element-web
 # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh
@@ -28,9 +24,4 @@ echo "--- Install synapse & other dependencies"
 ./install.sh
 # install static webserver to server symlinked local copy of element
 ./element/install-webserver.sh
-rm -r logs || true
-mkdir logs
-echo "+++ Running end-to-end tests"
-TESTS_STARTED=1
-./run.sh --no-sandbox --log-directory logs/
 popd
diff --git a/scripts/ci/run-end-to-end-tests.sh b/scripts/ci/run-end-to-end-tests.sh
new file mode 100755
index 0000000000..3c99391fc7
--- /dev/null
+++ b/scripts/ci/run-end-to-end-tests.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -ev
+
+handle_error() {
+    EXIT_CODE=$?
+    exit $EXIT_CODE
+}
+
+trap 'handle_error' ERR
+
+# run end to end tests
+pushd test/end-to-end-tests
+rm -r logs || true
+mkdir logs
+echo "--- Running end-to-end tests"
+TESTS_STARTED=1
+./run.sh --no-sandbox --log-directory logs/
+popd

From be10e77704b1635dc514b7b98201b7ee11b24d10 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 19 Jun 2021 15:37:06 +0100
Subject: [PATCH 096/358] Improve typing of Event Index Manager / Seshat

---
 src/indexing/BaseEventIndexManager.ts | 78 +++++++++++++--------------
 src/indexing/EventIndex.ts            | 16 +++---
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts
index debcb213ca..9478b2987b 100644
--- a/src/indexing/BaseEventIndexManager.ts
+++ b/src/indexing/BaseEventIndexManager.ts
@@ -17,7 +17,7 @@ limitations under the License.
 // The following interfaces take their names and member names from seshat and the spec
 /* eslint-disable camelcase */
 
-export interface MatrixEvent {
+export interface IMatrixEvent {
     type: string;
     sender: string;
     content: {};
@@ -27,37 +27,37 @@ export interface MatrixEvent {
     roomId: string;
 }
 
-export interface MatrixProfile {
+export interface IMatrixProfile {
     avatar_url: string;
     displayname: string;
 }
 
-export interface CrawlerCheckpoint {
+export interface ICrawlerCheckpoint {
     roomId: string;
     token: string;
     fullCrawl?: boolean;
     direction: string;
 }
 
-export interface ResultContext {
-    events_before: [MatrixEvent];
-    events_after: [MatrixEvent];
-    profile_info: Map<string, MatrixProfile>;
+export interface IResultContext {
+    events_before: [IMatrixEvent];
+    events_after: [IMatrixEvent];
+    profile_info: Map<string, IMatrixProfile>;
 }
 
-export interface ResultsElement {
+export interface IResultsElement {
     rank: number;
-    result: MatrixEvent;
-    context: ResultContext;
+    result: IMatrixEvent;
+    context: IResultContext;
 }
 
-export interface SearchResult {
+export interface ISearchResult {
     count: number;
-    results: [ResultsElement];
+    results: [IResultsElement];
     highlights: [string];
 }
 
-export interface SearchArgs {
+export interface ISearchArgs {
     search_term: string;
     before_limit: number;
     after_limit: number;
@@ -65,19 +65,19 @@ export interface SearchArgs {
     room_id?: string;
 }
 
-export interface EventAndProfile {
-    event: MatrixEvent;
-    profile: MatrixProfile;
+export interface IEventAndProfile {
+    event: IMatrixEvent;
+    profile: IMatrixProfile;
 }
 
-export interface LoadArgs {
+export interface ILoadArgs {
     roomId: string;
     limit: number;
     fromEvent?: string;
     direction?: string;
 }
 
-export interface IndexStats {
+export interface IIndexStats {
     size: number;
     eventCount: number;
     roomCount: number;
@@ -119,13 +119,13 @@ export default abstract class BaseEventIndexManager {
      * Queue up an event to be added to the index.
      *
      * @param {MatrixEvent} ev The event that should be added to the index.
-     * @param {MatrixProfile} profile The profile of the event sender at the
+     * @param {IMatrixProfile} profile The profile of the event sender at the
      * time of the event receival.
      *
      * @return {Promise} A promise that will resolve when the was queued up for
      * addition.
      */
-    async addEventToIndex(ev: MatrixEvent, profile: MatrixProfile): Promise<void> {
+    async addEventToIndex(ev: IMatrixEvent, profile: IMatrixProfile): Promise<void> {
         throw new Error("Unimplemented");
     }
 
@@ -160,10 +160,10 @@ export default abstract class BaseEventIndexManager {
     /**
      * Get statistical information of the index.
      *
-     * @return {Promise<IndexStats>} A promise that will resolve to the index
+     * @return {Promise<IIndexStats>} A promise that will resolve to the index
      * statistics.
      */
-    async getStats(): Promise<IndexStats> {
+    async getStats(): Promise<IIndexStats> {
         throw new Error("Unimplemented");
     }
 
@@ -203,13 +203,13 @@ export default abstract class BaseEventIndexManager {
     /**
      * Search the event index using the given term for matching events.
      *
-     * @param {SearchArgs} searchArgs The search configuration for the search,
+     * @param {ISearchArgs} searchArgs The search configuration for the search,
      * sets the search term and determines the search result contents.
      *
-     * @return {Promise<[SearchResult]>} A promise that will resolve to an array
+     * @return {Promise<[ISearchResult]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
-    async searchEventIndex(searchArgs: SearchArgs): Promise<SearchResult> {
+    async searchEventIndex(searchArgs: ISearchArgs): Promise<ISearchResult> {
         throw new Error("Unimplemented");
     }
 
@@ -218,12 +218,12 @@ export default abstract class BaseEventIndexManager {
      *
      * This is used to add a batch of events to the index.
      *
-     * @param {[EventAndProfile]} events The list of events and profiles that
+     * @param {[IEventAndProfile]} events The list of events and profiles that
      * should be added to the event index.
-     * @param {[CrawlerCheckpoint]} checkpoint A new crawler checkpoint that
+     * @param {[ICrawlerCheckpoint]} checkpoint A new crawler checkpoint that
      * should be stored in the index which should be used to continue crawling
      * the room.
-     * @param {[CrawlerCheckpoint]} oldCheckpoint The checkpoint that was used
+     * @param {[ICrawlerCheckpoint]} oldCheckpoint The checkpoint that was used
      * to fetch the current batch of events. This checkpoint will be removed
      * from the index.
      *
@@ -231,9 +231,9 @@ export default abstract class BaseEventIndexManager {
      * were already added to the index, false otherwise.
      */
     async addHistoricEvents(
-        events: [EventAndProfile],
-        checkpoint: CrawlerCheckpoint | null,
-        oldCheckpoint: CrawlerCheckpoint | null,
+        events: IEventAndProfile[],
+        checkpoint: ICrawlerCheckpoint | null,
+        oldCheckpoint: ICrawlerCheckpoint | null,
     ): Promise<boolean> {
         throw new Error("Unimplemented");
     }
@@ -241,36 +241,36 @@ export default abstract class BaseEventIndexManager {
     /**
      * Add a new crawler checkpoint to the index.
      *
-     * @param {CrawlerCheckpoint} checkpoint The checkpoint that should be added
+     * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be added
      * to the index.
      *
      * @return {Promise} A promise that will resolve once the checkpoint has
      * been stored.
      */
-    async addCrawlerCheckpoint(checkpoint: CrawlerCheckpoint): Promise<void> {
+    async addCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
         throw new Error("Unimplemented");
     }
 
     /**
      * Add a new crawler checkpoint to the index.
      *
-     * @param {CrawlerCheckpoint} checkpoint The checkpoint that should be
+     * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be
      * removed from the index.
      *
      * @return {Promise} A promise that will resolve once the checkpoint has
      * been removed.
      */
-    async removeCrawlerCheckpoint(checkpoint: CrawlerCheckpoint): Promise<void> {
+    async removeCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
         throw new Error("Unimplemented");
     }
 
     /**
      * Load the stored checkpoints from the index.
      *
-     * @return {Promise<[CrawlerCheckpoint]>} A promise that will resolve to an
+     * @return {Promise<[ICrawlerCheckpoint]>} A promise that will resolve to an
      * array of crawler checkpoints once they have been loaded from the index.
      */
-    async loadCheckpoints(): Promise<[CrawlerCheckpoint]> {
+    async loadCheckpoints(): Promise<ICrawlerCheckpoint[]> {
         throw new Error("Unimplemented");
     }
 
@@ -286,11 +286,11 @@ export default abstract class BaseEventIndexManager {
      * @param  {string} args.direction The direction to which we should continue
      * loading events from. This is used only if fromEvent is used as well.
      *
-     * @return {Promise<[EventAndProfile]>} A promise that will resolve to an
+     * @return {Promise<[IEventAndProfile]>} A promise that will resolve to an
      * array of Matrix events that contain mxc URLs accompanied with the
      * historic profile of the sender.
      */
-    async loadFileEvents(args: LoadArgs): Promise<[EventAndProfile]> {
+    async loadFileEvents(args: ILoadArgs): Promise<IEventAndProfile[]> {
         throw new Error("Unimplemented");
     }
 
diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index c36f96f368..978a2ac813 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -28,7 +28,7 @@ import { MatrixClientPeg } from "../MatrixClientPeg";
 import { sleep } from "../utils/promise";
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
-import {CrawlerCheckpoint, LoadArgs, SearchArgs} from "./BaseEventIndexManager";
+import { ICrawlerCheckpoint, ILoadArgs, ISearchArgs } from "./BaseEventIndexManager";
 
 // The time in ms that the crawler will wait loop iterations if there
 // have not been any checkpoints to consume in the last iteration.
@@ -45,9 +45,9 @@ interface ICrawler {
  * Event indexing class that wraps the platform specific event indexing.
  */
 export default class EventIndex extends EventEmitter {
-    private crawlerCheckpoints: CrawlerCheckpoint[] = [];
+    private crawlerCheckpoints: ICrawlerCheckpoint[] = [];
     private crawler: ICrawler = null;
-    private currentCheckpoint: CrawlerCheckpoint = null;
+    private currentCheckpoint: ICrawlerCheckpoint = null;
 
     public async init() {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
@@ -111,14 +111,14 @@ export default class EventIndex extends EventEmitter {
             const timeline = room.getLiveTimeline();
             const token = timeline.getPaginationToken("b");
 
-            const backCheckpoint: CrawlerCheckpoint = {
+            const backCheckpoint: ICrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "b",
                 fullCrawl: true,
             };
 
-            const forwardCheckpoint: CrawlerCheckpoint = {
+            const forwardCheckpoint: ICrawlerCheckpoint = {
                 roomId: room.roomId,
                 token: token,
                 direction: "f",
@@ -668,13 +668,13 @@ export default class EventIndex extends EventEmitter {
     /**
      * Search the event index using the given term for matching events.
      *
-     * @param {SearchArgs} searchArgs The search configuration for the search,
+     * @param {ISearchArgs} searchArgs The search configuration for the search,
      * sets the search term and determines the search result contents.
      *
      * @return {Promise<[SearchResult]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
-    public async search(searchArgs: SearchArgs) {
+    public async search(searchArgs: ISearchArgs) {
         const indexManager = PlatformPeg.get().getEventIndexingManager();
         return indexManager.searchEventIndex(searchArgs);
     }
@@ -709,7 +709,7 @@ export default class EventIndex extends EventEmitter {
         const client = MatrixClientPeg.get();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
 
-        const loadArgs: LoadArgs = {
+        const loadArgs: ILoadArgs = {
             roomId: room.roomId,
             limit: limit,
         };

From a2a515841138a3c545b6a44477df3e9ef3992b93 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 19 Jun 2021 15:37:48 +0100
Subject: [PATCH 097/358] Fix View Source accessing renamed private field on
 MatrixEvent

---
 src/components/structures/ViewSource.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 6fe99dd464..b69a92dd61 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -55,7 +55,7 @@ export default class ViewSource extends React.Component {
     viewSourceContent() {
         const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
         const isEncrypted = mxEvent.isEncrypted();
-        const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private
+        const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private
         const originalEventSource = mxEvent.event;
 
         if (isEncrypted) {

From 2c5ddea1d9687bfe7ce406741e824074be56ddfb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 19 Jun 2021 15:57:07 +0100
Subject: [PATCH 098/358] Fix ConfirmUserActionDialog returning an input field
 rather than text

---
 src/components/views/dialogs/ConfirmUserActionDialog.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
index 05f8c63ace..5cdb4c664b 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
@@ -38,7 +38,7 @@ interface IProps {
     // be the string entered.
     askReason?: boolean;
     danger?: boolean;
-    onFinished: (success: boolean, reason?: HTMLInputElement) => void;
+    onFinished: (success: boolean, reason?: string) => void;
 }
 
 /*
@@ -59,11 +59,7 @@ export default class ConfirmUserActionDialog extends React.Component<IProps> {
     };
 
     public onOk = (): void => {
-        let reason;
-        if (this.reasonField) {
-            reason = this.reasonField.current;
-        }
-        this.props.onFinished(true, reason);
+        this.props.onFinished(true, this.reasonField.current?.value);
     };
 
     public onCancel = (): void => {

From 21a960acc7f1b0a55d307e9c2dc1906a60d11e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 19 Jun 2021 17:53:00 +0200
Subject: [PATCH 099/358] Fix timestamp issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_IRCLayout.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 8e5a26b333..5e61c3b8a3 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -29,6 +29,7 @@ $irc-line-height: $font-18px;
         // timestamps are links which shouldn't be underlined
         > a {
             text-decoration: none;
+            min-width: 45px;
         }
 
         display: flex;

From 8e2a7cc3f6badace1d1cb0dacb90d449689ac8cd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 19 Jun 2021 19:41:45 +0100
Subject: [PATCH 100/358] Convert crypto index to TS

---
 src/rageshake/submit-rageshake.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rageshake/submit-rageshake.ts b/src/rageshake/submit-rageshake.ts
index 08d8ccfd13..64d7405f17 100644
--- a/src/rageshake/submit-rageshake.ts
+++ b/src/rageshake/submit-rageshake.ts
@@ -86,8 +86,8 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true) {
             body.append('cross_signing_key', client.getCrossSigningId());
 
             // add cross-signing status information
-            const crossSigning = client.crypto._crossSigningInfo;
-            const secretStorage = client.crypto._secretStorage;
+            const crossSigning = client.crypto.crossSigningInfo;
+            const secretStorage = client.crypto.secretStorage;
 
             body.append("cross_signing_ready", String(await client.isCrossSigningReady()));
             body.append("cross_signing_supported_by_hs",

From 4dbf739fb8210bc851e3526f9c0c843452df488f Mon Sep 17 00:00:00 2001
From: libexus <Asterixeins324@gmail.com>
Date: Fri, 18 Jun 2021 16:48:23 +0000
Subject: [PATCH 101/358] Translated using Weblate (German)

Currently translated at 99.4% (2977 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 9d1c1fa071..3eb0996792 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -1321,7 +1321,7 @@
     "Disconnect from the identity server <idserver />?": "Verbindung zum Identitätsserver <idserver /> trennen?",
     "Add Email Address": "E-Mail-Adresse hinzufügen",
     "Add Phone Number": "Telefonnummer hinzufügen",
-    "Changes the avatar of the current room": "Ändert den Avatar für diesen Raum",
+    "Changes the avatar of the current room": "Ändert den Avatar des Raums",
     "Deactivate account": "Benutzerkonto deaktivieren",
     "Show previews/thumbnails for images": "Vorschauen für Bilder",
     "View": "Vorschau",
@@ -1388,7 +1388,7 @@
     "Backup key stored: ": "Backup Schlüssel gespeichert: ",
     "Clear notifications": "Benachrichtigungen löschen",
     "Disconnect from the identity server <current /> and connect to <new /> instead?": "Vom Identitätsserver <current /> trennen, und stattdessen eine Verbindung zu <new /> aufbauen?",
-    "The identity server you have chosen does not have any terms of service.": "Der von dir gewählte Identitätsserver hat keine Nutzungsbedingungen.",
+    "The identity server you have chosen does not have any terms of service.": "Der von dir gewählte Identitätsserver gibt keine Nutzungsbedingungen an.",
     "Disconnect identity server": "Verbindung zum Identitätsserver trennen",
     "contact the administrators of identity server <idserver />": "Administration des Identitätsservers <idserver /> kontaktieren",
     "wait and try again later": "warte und versuche es später erneut",
@@ -1634,7 +1634,7 @@
     "Show rooms with unread notifications first": "Räume mit ungelesenen Benachrichtigungen zuerst zeigen",
     "Show shortcuts to recently viewed rooms above the room list": "Kürzlich besuchte Räume anzeigen",
     "Use Single Sign On to continue": "Einmalanmeldung zum Fortfahren nutzen",
-    "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige das Hinzufügen dieser E-Mail-Adresse durch Single Sign-on, um deine Identität nachzuweisen.",
+    "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige die neue E-Mail-Adresse mit Single-Sign-On, um deine Identität nachzuweisen.",
     "Single Sign On": "Einmalanmeldung",
     "Confirm adding email": "Hinzugefügte E-Mail-Addresse bestätigen",
     "Confirm adding this phone number by using Single Sign On to prove your identity.": "Bestätige die hinzugefügte Telefonnummer, indem du deine Identität mittels der Einmalanmeldung nachweist.",
@@ -3102,7 +3102,7 @@
     "Your public space": "Dein öffentlicher Space",
     "You can change this later": "Du kannst die Sichtbarkeit später ändern",
     "Invite only, best for yourself or teams": "Nur Eingeladene können beitreten - am besten für dich selbst oder Teams",
-    "Open space for anyone, best for communities": "Öffne den Space für alle - am Besten für Communities",
+    "Open space for anyone, best for communities": "Öffne den Space für alle - am besten für Communities",
     "Private": "Privat",
     "Public": "Öffentlich",
     "Spaces are new ways to group rooms and people. To join an existing space you’ll need an invite": "Spaces sind ein neuer Weg Räume und Leute zu gruppieren. Um einen bestehenden Space zu betreten brauchst du eine Einladung",
@@ -3302,7 +3302,7 @@
     "Join the beta": "Beta beitreten",
     "Leave the beta": "Beta verlassen",
     "Beta": "Beta",
-    "Tap for more info": "Klicke für mehr Infos",
+    "Tap for more info": "Für mehr Infos hier klicken",
     "Spaces is a beta feature": "Spaces sind noch in der Entwicklung und möglicherweise instabil",
     "Want to add a new room instead?": "Willst du einen neuen Raum hinzufügen?",
     "Adding rooms... (%(progress)s out of %(count)s)|one": "Raum wird hinzugefügt...",
@@ -3352,5 +3352,21 @@
     "See when people join, leave, or are invited to this room": "Anzeigen, wenn Leute eingeladen werden oder den Raum betreten und verlassen",
     "The user you called is busy.": "Der angerufene Benutzer ist momentan beschäftigt.",
     "User Busy": "Benutzer beschäftigt",
-    "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\""
+    "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\"",
+    "Some suggestions may be hidden for privacy.": "Um deine Privatsphäre zu schützen, werden einige Vorschläge möglicherweise ausgeblendet.",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Dieser Raum ist offenbar nicht verschlüsselt. Das kann an einem veralteten Gerät oder an manchen Verfahren wie E-Mail-Einladungen liegen. <a>Verschlüsselung aktivieren.</a>",
+    "We're working on this as part of the beta, but just want to let you know.": "Dies ist noch Teil der Beta, wir wollten dir es aber schon jetzt zeigen.",
+    "Or send invite link": "Oder versende einen Einladungslink",
+    "If you can't see who you’re looking for, send them your invite link below.": "Niemanden gefunden? Sende ihnen stattdessen einen Einladungslink.",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Du kannst, sofern du die Berechtigung dazu hast, Nachrichten in ihrem Menü <b>hier anpinnen</b>.",
+    "Search for rooms or people": "Räume oder Leute suchen",
+    "Forward message": "Nachricht weiterleiten",
+    "Open link": "Link öffnen",
+    "Sent": "Gesendet",
+    "You don't have permission to do this": "Du bist dazu nicht berechtigt",
+    "Error loading Widget": "Fehler beim Laden des Widgets",
+    "Pinned messages": "Angeheftete Nachrichten",
+    "Nothing pinned, yet": "Es ist nichts angepinnt. Noch nicht.",
+    "End-to-end encryption isn't enabled": "Ende-zu-Ende-Verschlüsselung ist deaktiviert",
+    "See when people join, leave, or are invited to your active room": "Anzeigen, wenn Leute den aktuellen Raum betreten, verlassen oder in ihn eingeladen werden"
 }

From c4b252d941fda74b6b027d5d10e49d04c3fd1e2d Mon Sep 17 00:00:00 2001
From: Bamstam <am-em-am@posteo.de>
Date: Wed, 16 Jun 2021 15:22:07 +0000
Subject: [PATCH 102/358] Translated using Weblate (German)

Currently translated at 99.4% (2977 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 3eb0996792..e86025dc83 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -709,7 +709,7 @@
     "Error saving email notification preferences": "Fehler beim Speichern der E-Mail-Benachrichtigungseinstellungen",
     "Tuesday": "Dienstag",
     "Enter keywords separated by a comma:": "Gib die Schlüsselwörter durch einen Beistrich getrennt ein:",
-    "Forward Message": "Nachricht weiterleiten",
+    "Forward Message": "Weiterleiten",
     "You have successfully set a password and an email address!": "Du hast erfolgreich ein Passwort und eine E-Mail-Adresse gesetzt!",
     "Remove %(name)s from the directory?": "Soll der Raum %(name)s aus dem Verzeichnis entfernt werden?",
     "%(brand)s uses many advanced browser features, some of which are not available or experimental in your current browser.": "%(brand)s nutzt zahlreiche fortgeschrittene Browser-Funktionen, die teilweise in deinem aktuell verwendeten Browser noch nicht verfügbar sind oder sich noch im experimentellen Status befinden.",

From 3d34e8e8075c0211abd8565892ad71edb6de5a9f Mon Sep 17 00:00:00 2001
From: Michael Sasser <Michael@MichaelSasser.org>
Date: Wed, 16 Jun 2021 15:14:41 +0000
Subject: [PATCH 103/358] Translated using Weblate (German)

Currently translated at 99.4% (2977 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index e86025dc83..90530b5b07 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -1635,7 +1635,7 @@
     "Show shortcuts to recently viewed rooms above the room list": "Kürzlich besuchte Räume anzeigen",
     "Use Single Sign On to continue": "Einmalanmeldung zum Fortfahren nutzen",
     "Confirm adding this email address by using Single Sign On to prove your identity.": "Bestätige die neue E-Mail-Adresse mit Single-Sign-On, um deine Identität nachzuweisen.",
-    "Single Sign On": "Einmalanmeldung",
+    "Single Sign On": "Single Sign-on",
     "Confirm adding email": "Hinzugefügte E-Mail-Addresse bestätigen",
     "Confirm adding this phone number by using Single Sign On to prove your identity.": "Bestätige die hinzugefügte Telefonnummer, indem du deine Identität mittels der Einmalanmeldung nachweist.",
     "Click the button below to confirm adding this phone number.": "Klicke unten die Schaltfläche, um die hinzugefügte Telefonnummer zu bestätigen.",

From 3b39eca70ff7b5ac4ead3f1a34ceb7cbf4f40874 Mon Sep 17 00:00:00 2001
From: iaiz <git@iapellaniz.com>
Date: Wed, 16 Jun 2021 13:19:42 +0000
Subject: [PATCH 104/358] Translated using Weblate (Spanish)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/es/
---
 src/i18n/strings/es.json | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json
index 5e8e57bacd..c1fb8e6542 100644
--- a/src/i18n/strings/es.json
+++ b/src/i18n/strings/es.json
@@ -82,7 +82,7 @@
     "Fill screen": "Llenar pantalla",
     "Filter room members": "Filtrar miembros de la sala",
     "Forget room": "Olvidar sala",
-    "For security, this session has been signed out. Please sign in again.": "Por seguridad, esta sesión ha sido cerrada. Por favor inicia sesión nuevamente.",
+    "For security, this session has been signed out. Please sign in again.": "Esta sesión ha sido cerrada. Por favor, inicia sesión de nuevo.",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s de %(fromPowerLevel)s a %(toPowerLevel)s",
     "Guests cannot join this room even if explicitly invited.": "Los invitados no pueden unirse a esta sala incluso si se les invita explícitamente.",
     "Hangup": "Colgar",
@@ -168,7 +168,7 @@
     "Search": "Buscar",
     "Search failed": "Falló la búsqueda",
     "Seen by %(userName)s at %(dateTime)s": "Visto por %(userName)s el %(dateTime)s",
-    "Send Reset Email": "Enviar correo electrónico de restauración",
+    "Send Reset Email": "Enviar correo de restauración",
     "%(senderDisplayName)s sent an image.": "%(senderDisplayName)s envió una imagen.",
     "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s invitó a %(targetDisplayName)s a unirse a la sala.",
     "Server error": "Error del servidor",
@@ -2021,7 +2021,7 @@
     "Your Matrix account on <underlinedServerName />": "Su cuenta de Matrix en <underlinedServerName />",
     "No identity server is configured: add one in server settings to reset your password.": "No hay ningún servidor de identidad configurado: añada uno en la configuración del servidor para poder restablecer su contraseña.",
     "Sign in instead": "Iniciar sesión",
-    "A verification email will be sent to your inbox to confirm setting your new password.": "Se enviará un correo electrónico de verificación a su bandeja de entrada para confirmar la configuración de su nueva contraseña.",
+    "A verification email will be sent to your inbox to confirm setting your new password.": "Te enviaremos un correo electrónico de verificación para cambiar tu contraseña.",
     "Your password has been reset.": "Su contraseña ha sido restablecida.",
     "You have been logged out of all sessions and will no longer receive push notifications. To re-enable notifications, sign in again on each device.": "Ha cerrado todas las sesiones y ya no recibirá más notificaciones push. Para volver a activar las notificaciones, inicie sesión de nuevo en cada dispositivo.",
     "Set a new password": "Elegir una nueva contraseña",
@@ -3321,5 +3321,23 @@
     "Currently joining %(count)s rooms|other": "Entrando en %(count)s salas",
     "No results for \"%(query)s\"": "Ningún resultado para «%(query)s»",
     "The user you called is busy.": "La persona a la que has llamado está ocupada.",
-    "User Busy": "Persona ocupada"
+    "User Busy": "Persona ocupada",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Normalmente tus mensajes privados están cifrados, pero esta sala no lo está. Esto puede ser debido a un dispositivo o método no soportado, como las invitaciones por correo. <a>Activa el cifrado en ajustes</a>.",
+    "End-to-end encryption isn't enabled": "El cifrado de extremo a extremo no está activado",
+    "If you can't see who you’re looking for, send them your invite link below.": "Si no encuentras abajo a quien buscas, envíale tu enlace de invitación.",
+    "Teammates might not be able to view or join any private rooms you make.": "Las personas de tu equipo no podrán ver o unirse a ninguna sala privada que crees.",
+    "We're working on this as part of the beta, but just want to let you know.": "Estamos trabajando en ello como parte de la beta, pero te lo queríamos contar.",
+    "Or send invite link": "O envía un enlace de invitación",
+    "Some suggestions may be hidden for privacy.": "Puede que se hayan ocultado algunas sugerencias por motivos de privacidad.",
+    "Search for rooms or people": "Busca salas o gente",
+    "Message preview": "Vista previa del mensaje",
+    "Forward message": "Reenviar mensaje",
+    "Open link": "Abrir enlace",
+    "Sent": "Enviado",
+    "You don't have permission to do this": "No tienes permisos para hacer eso",
+    "Error - Mixed content": "Error - Contenido mezclado",
+    "Error loading Widget": "Error al cargar el widget",
+    "Pinned messages": "Mensajes fijados",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Si tienes permisos, abre el menú de cualquier mensaje y selecciona <b>Fijar</b> para colocarlo aquí.",
+    "Nothing pinned, yet": "Nada fijado, todavía"
 }

From 103577f0e6fe5eaa6835314fdaba9693c5b07dd3 Mon Sep 17 00:00:00 2001
From: Szimszon <github@oregpreshaz.eu>
Date: Tue, 15 Jun 2021 19:52:03 +0000
Subject: [PATCH 105/358] Translated using Weblate (Hungarian)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/
---
 src/i18n/strings/hu.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index b290f20076..cb749f12a5 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3376,5 +3376,22 @@
     "No results for \"%(query)s\"": "Nincs találat ehhez: %(query)s",
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Próbáljon ki más szavakat vagy keressen elgépelést. Néhány találat azért nem látszik, mert privát és meghívóra van szüksége, hogy csatlakozhasson.",
     "The user you called is busy.": "A hívott felhasználó foglalt.",
-    "User Busy": "Felhasználó foglalt"
+    "User Busy": "Felhasználó foglalt",
+    "If you can't see who you’re looking for, send them your invite link below.": "Ha nem található a keresett személy, küldje el az alábbi hivatkozást neki.",
+    "Some suggestions may be hidden for privacy.": "Adatvédelem miatt néhány javaslat esetleg rejtve van.",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Ha van hozzá jogosultsága, nyissa meg a menüt bármelyik üzenetben és válassza a <b>Kitűz</b> menüpontot a kitűzéshez.",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "A személyes beszélgetések általában titkosítottak, de ez a szoba nem az. Ez azért lehet, mert nem támogatott eszköz vagy mód használt mint például e-mail meghívók. <a>Titkosítás engedélyezése a beállításokban.</a>",
+    "We're working on this as part of the beta, but just want to let you know.": "A béta funkció ezen részén dolgozunk, csak tudatni szerettük volna.",
+    "Teammates might not be able to view or join any private rooms you make.": "Csapattagok lehet, hogy nem láthatják vagy léphetnek be az ön által készített privát szobákba.",
+    "Or send invite link": "Vagy meghívó link küldése",
+    "Search for rooms or people": "Szobák vagy emberek keresése",
+    "Forward message": "Üzenet továbbítása",
+    "Open link": "Hivatkozás megnyitása",
+    "Sent": "Elküldve",
+    "You don't have permission to do this": "Nincs jogosultsága ehhez",
+    "Error - Mixed content": "Hiba - Vegyes tartalom",
+    "Error loading Widget": "Kisalkalmazás betöltési hiba",
+    "Pinned messages": "Kitűzött üzenetek",
+    "Nothing pinned, yet": "Semmi sincs kitűzve egyenlőre",
+    "End-to-end encryption isn't enabled": "Végpontok közötti titkosítás nincs engedélyezve"
 }

From ed306d74562f3be4454d8cfc6a7a8efa54ea7673 Mon Sep 17 00:00:00 2001
From: jelv <post@jelv.nl>
Date: Wed, 16 Jun 2021 11:39:17 +0000
Subject: [PATCH 106/358] Translated using Weblate (Dutch)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/
---
 src/i18n/strings/nl.json | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index 7299e9d161..1818a64e54 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -1177,7 +1177,7 @@
     "Homeserver URL": "Thuisserver-URL",
     "Identity Server URL": "Identiteitsserver-URL",
     "Free": "Gratis",
-    "Join millions for free on the largest public server": "Doe mee met miljoenen anderen op de grootste openbare server",
+    "Join millions for free on the largest public server": "Neem deel aan de grootste openbare server met miljoenen anderen",
     "Premium": "Premium",
     "Premium hosting for organisations <a>Learn more</a>": "Premium hosting voor organisaties <a>Lees meer</a>",
     "Other": "Overige",
@@ -1513,7 +1513,7 @@
     "View": "Bekijken",
     "Find a room…": "Zoek een gesprek…",
     "Find a room… (e.g. %(exampleRoom)s)": "Zoek een gesprek… (bv. %(exampleRoom)s)",
-    "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "Als u het gesprek dat u zoekt niet kunt vinden, vraag dan een uitnodiging, of <a>Maak een nieuw gesprek aan</a>.",
+    "If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.": "Als u het gesprek dat u zoekt niet kunt vinden, vraag dan een uitnodiging of <a>maak een nieuw gesprek aan</a>.",
     "Explore rooms": "Gesprekken ontdekken",
     "Show previews/thumbnails for images": "Miniaturen voor afbeeldingen tonen",
     "Clear cache and reload": "Cache wissen en herladen",
@@ -1932,7 +1932,7 @@
     "Jump to first unread room.": "Ga naar het eerste ongelezen gesprek.",
     "Jump to first invite.": "Ga naar de eerste uitnodiging.",
     "Session verified": "Sessie geverifieerd",
-    "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. U heeft nu toegang tot uw versleutelde berichten, en deze sessie zal voor andere gebruikers als vertrouwd gemarkeerd worden.",
+    "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. U heeft nu toegang tot uw versleutelde berichten en deze sessie zal voor andere gebruikers als vertrouwd gemarkeerd worden.",
     "Your new session is now verified. Other users will see it as trusted.": "Uw nieuwe sessie is nu geverifieerd. Ze zal voor andere gebruikers als vertrouwd gemarkeerd worden.",
     "Without completing security on this session, it won’t have access to encrypted messages.": "Als u de beveiliging van deze sessie niet vervolledigt, zal ze geen toegang hebben tot uw versleutelde berichten.",
     "Go Back": "Terugkeren",
@@ -3267,5 +3267,23 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Probeer andere woorden of controleer op typefouten. Sommige resultaten zijn mogelijk niet zichtbaar omdat ze privé zijn of u een uitnodiging nodig heeft om deel te nemen.",
     "No results for \"%(query)s\"": "Geen resultaten voor \"%(query)s\"",
     "The user you called is busy.": "De gebruiker die u belde is bezet.",
-    "User Busy": "Gebruiker Bezet"
+    "User Busy": "Gebruiker Bezet",
+    "We're working on this as part of the beta, but just want to let you know.": "We werken hieraan als onderdeel van de beta, maar we willen het u gewoon laten weten.",
+    "Teammates might not be able to view or join any private rooms you make.": "Teamgenoten zijn mogelijk niet in staat zijn om privégesprekken die u maakt te bekijken of er lid van te worden.",
+    "Or send invite link": "Of verstuur uw uitnodigingslink",
+    "If you can't see who you’re looking for, send them your invite link below.": "Als u niet kunt vinden wie u zoekt, stuur ze dan uw uitnodigingslink hieronder.",
+    "Some suggestions may be hidden for privacy.": "Sommige suggesties kunnen om privacyredenen verborgen zijn.",
+    "Search for rooms or people": "Zoek naar gesprekken of personen",
+    "Message preview": "Voorbeeld van bericht",
+    "Forward message": "Bericht doorsturen",
+    "Open link": "Koppeling openen",
+    "Sent": "Verstuurd",
+    "You don't have permission to do this": "U heeft geen rechten om dit te doen",
+    "Error - Mixed content": "Fout - Gemengde inhoud",
+    "Error loading Widget": "Fout bij laden Widget",
+    "Pinned messages": "Vastgeprikte berichten",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Als u de rechten heeft, open dan het menu op elk bericht en selecteer <b>Vastprikken</b> om ze hier te zetten.",
+    "Nothing pinned, yet": "Nog niks vastgeprikt",
+    "End-to-end encryption isn't enabled": "Eind-tot-eind-versleuteling is uitgeschakeld",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Uw privéberichten zijn normaal gesproken versleuteld, maar dit gesprek niet. Meestal is dit te wijten aan een niet-ondersteund apparaat of methode die wordt gebruikt, zoals e-mailuitnodigingen. <a>Versleuting inschakelen in instellingen.</a>"
 }

From 3ddb103dd6e2a494f87e57a7547a985322dbf708 Mon Sep 17 00:00:00 2001
From: LinAGKar <linus.kardell@gmail.com>
Date: Thu, 17 Jun 2021 08:20:23 +0000
Subject: [PATCH 107/358] Translated using Weblate (Swedish)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/
---
 src/i18n/strings/sv.json | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json
index f026e0fe02..6033b561bd 100644
--- a/src/i18n/strings/sv.json
+++ b/src/i18n/strings/sv.json
@@ -3311,5 +3311,23 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Testa andra ord eller kolla efter felskrivningar. Vissa resultat kanske inte visas för att de är privata och du behöver en inbjudan för att gå med i dem.",
     "No results for \"%(query)s\"": "Inga resultat för \"%(query)s\"",
     "The user you called is busy.": "Användaren du ringde är upptagen.",
-    "User Busy": "Användare upptagen"
+    "User Busy": "Användare upptagen",
+    "We're working on this as part of the beta, but just want to let you know.": "Vi jobbar på detta som en del av betan, men vi ville låta dig veta.",
+    "Teammates might not be able to view or join any private rooms you make.": "Teammedlemmar kanske inte kan se eller gå med i privata rum du skapar.",
+    "Or send invite link": "Eller skicka inbjudningslänk",
+    "If you can't see who you’re looking for, send them your invite link below.": "Om du inte kan se den du letar efter, skicka dem din inbjudningslänk nedan.",
+    "Some suggestions may be hidden for privacy.": "Vissa förslag kan vara dolda av sekretesskäl.",
+    "Search for rooms or people": "Sök efter rum eller personer",
+    "Message preview": "Meddelandeförhandsvisning",
+    "Forward message": "Vidarebefordra meddelande",
+    "Open link": "Öppna länk",
+    "Sent": "Skickat",
+    "You don't have permission to do this": "Du har inte behörighet att göra detta",
+    "Error - Mixed content": "Fel - blandat innehåll",
+    "Error loading Widget": "Fel vid laddning av widget",
+    "Pinned messages": "Fästa meddelanden",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Om du har behörighet, öppna menyn på ett meddelande och välj <b>Fäst</b> för att fösta dem här.",
+    "Nothing pinned, yet": "Inget fäst än",
+    "End-to-end encryption isn't enabled": "Totalsträckskryptering är inte aktiverat",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Dina privata meddelanden är normalt krypterade, men det här rummet är inte det. Oftast så beror detta på att en enhet eller metod som används ej stöds, som e-postinbjudningar. <a>Aktivera kryptering i inställningarna.</a>"
 }

From a9d33cbe1f258b8b37dcbfaa8c401c51bd79b95f Mon Sep 17 00:00:00 2001
From: Percy <perrsig@gmail.com>
Date: Wed, 16 Jun 2021 16:00:16 +0000
Subject: [PATCH 108/358] Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/
---
 src/i18n/strings/zh_Hans.json | 40 +++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json
index 3267060d64..7aa0d75539 100644
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -510,8 +510,8 @@
     "Restricted": "受限用户",
     "To use it, just wait for autocomplete results to load and tab through them.": "若要使用自动补全，只要等待自动补全结果加载完成，按 Tab 键切换即可。",
     "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s 将他们的昵称修改成了 %(displayName)s 。",
-    "Stickerpack": "贴图集",
-    "You don't currently have any stickerpacks enabled": "你目前没有启用任何贴图集",
+    "Stickerpack": "贴纸包",
+    "You don't currently have any stickerpacks enabled": "你目前未启用任何贴纸包",
     "Key request sent.": "已发送密钥共享请求。",
     "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.": "如果你是房间中最后一位有权限的用户，在你降低自己的权限等级后将无法撤回此修改，因为你将无法重新获得权限。",
     "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.": "你将无法撤回此修改，因为你正在将此用户的滥权等级提升至与你相同。",
@@ -1071,10 +1071,10 @@
     "Ignored users": "已忽略的用户",
     "Bulk options": "批量选择",
     "Key backup": "密钥备份",
-    "Security & Privacy": "安全与隐私",
+    "Security & Privacy": "隐私安全",
     "Missing media permissions, click the button below to request.": "缺少媒体权限，点击下面的按钮以请求权限。",
     "Request media permissions": "请求媒体权限",
-    "Voice & Video": "语音与视频",
+    "Voice & Video": "语音视频",
     "Room information": "聊天室信息",
     "Internal room ID:": "内部聊天室 ID：",
     "Room version": "聊天室版本",
@@ -1566,7 +1566,7 @@
     "If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.": "如果你不想使用 <server /> 以发现你认识的现存联系人并被其发现，请在下方输入另一个身份服务器。",
     "Identity Server": "身份服务器",
     "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "你现在没有使用身份服务器。若想发现你认识的现存联系人并被其发现，请在下方添加一个身份服务器。",
-    "Disconnecting from your identity server will mean you won't be discoverable by other users and you won't be able to invite others by email or phone.": "从你的身份服务器断开连接意味着你将不可被别的用户发现，同时你也将不能用邮箱或电话邀请别人。",
+    "Disconnecting from your identity server will mean you won't be discoverable by other users and you won't be able to invite others by email or phone.": "断开身份服务器连接意味着你将无法被其他用户发现，同时你也将无法使用电子邮件或电话邀请别人。",
     "Using an identity server is optional. If you choose not to use an identity server, you won't be discoverable by other users and you won't be able to invite others by email or phone.": "使用身份服务器是可选的。如果你选择不使用身份服务器，你将不能被别的用户发现，也不能用邮箱或电话邀请别人。",
     "Do not use an identity server": "不使用身份服务器",
     "Enter a new identity server": "输入一个新的身份服务器",
@@ -1686,9 +1686,9 @@
     "Cannot connect to integration manager": "不能连接到集成管理器",
     "The integration manager is offline or it cannot reach your homeserver.": "此集成管理器为离线状态或者其不能访问你的主服务器。",
     "check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "检查你的浏览器是否安装有可能屏蔽身份服务器的插件（例如 Privacy Badger）",
-    "Use an Integration Manager <b>(%(serverName)s)</b> to manage bots, widgets, and sticker packs.": "使用集成管理器 <b>（%(serverName)s）</b> 以管理机器人、挂件和贴图集。",
-    "Use an Integration Manager to manage bots, widgets, and sticker packs.": "使用集成管理器以管理机器人、挂件和贴图集。",
-    "Manage integrations": "管理集成",
+    "Use an Integration Manager <b>(%(serverName)s)</b> to manage bots, widgets, and sticker packs.": "使用集成管理器 <b>（%(serverName)s）</b> 以管理机器人、挂件和贴纸包。",
+    "Use an Integration Manager to manage bots, widgets, and sticker packs.": "使用集成管理器以管理机器人、挂件和贴纸包。",
+    "Manage integrations": "集成管理",
     "Integration Managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "集成管理器接收配置数据，并可以以你的名义修改挂件、发送聊天室邀请及设置权限级别。",
     "Use between %(min)s pt and %(max)s pt": "请使用介于 %(min)s pt 和 %(max)s pt 之间的大小",
     "Deactivate account": "停用账号",
@@ -1995,7 +1995,7 @@
     "Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.": "验证此设备以将其标记为已信任。在收发端对端加密消息时，信任设备可让你与其他用户更加放心。",
     "Verifying this device will mark it as trusted, and users who have verified with you will trust this device.": "验证此设备会将其标记为已信任，与此同时，其他验证了你的用户也会信任此设备。",
     "Integrations are disabled": "集成已禁用",
-    "Enable 'Manage Integrations' in Settings to do this.": "在设置中启用「管理集成」以执行此操作。",
+    "Enable 'Manage Integrations' in Settings to do this.": "在设置中启用「管理管理」以执行此操作。",
     "Integrations not allowed": "集成未被允许",
     "Your %(brand)s doesn't allow you to use an Integration Manager to do this. Please contact an admin.": "你的 %(brand)s 不允许你使用集成管理器来完成此操作。请联系管理员。",
     "To continue, use Single Sign On to prove your identity.": "要继续，请使用单点登录证明你的身份。",
@@ -2077,7 +2077,7 @@
     "Integration Manager": "集成管理器",
     "Find others by phone or email": "通过电话或邮箱寻找别人",
     "Be found by phone or email": "通过电话或邮箱被寻找",
-    "Use bots, bridges, widgets and sticker packs": "使用机器人、桥接、挂件和贴图集",
+    "Use bots, bridges, widgets and sticker packs": "使用机器人、桥接、挂件和贴纸包",
     "Terms of Service": "服务协议",
     "To continue you need to accept the terms of this service.": "要继续，你需要接受此服务协议。",
     "Service": "服务",
@@ -3280,5 +3280,23 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "尝试不同的单词或检查拼写错误。某些结果可能不可见，因为它们属于私有的，你需要一个邀请才能加入。",
     "No results for \"%(query)s\"": "「%(query)s」没有结果",
     "The user you called is busy.": "你所拨打的用户正在忙碌中。",
-    "User Busy": "用户正在忙"
+    "User Busy": "用户正在忙",
+    "We're working on this as part of the beta, but just want to let you know.": "我们正在研究让它成为测试版的一部分，但只想让你找到。",
+    "Teammates might not be able to view or join any private rooms you make.": "队友可能无法查看或加入你所创建的任何一个私有聊天室。",
+    "Or send invite link": "或发送邀请链接",
+    "If you can't see who you’re looking for, send them your invite link below.": "如果你找不到你正在寻找的人，请在下方向他们发送你的邀请链接。",
+    "Some suggestions may be hidden for privacy.": "出于隐私考虑，部分建议可能会被隐藏。",
+    "Search for rooms or people": "搜索聊天室或用户",
+    "Message preview": "消息预览",
+    "Forward message": "转发消息",
+    "Open link": "打开链接",
+    "Sent": "已发送",
+    "You don't have permission to do this": "你无权执行此操作",
+    "Error - Mixed content": "错误 - 混合内容",
+    "Error loading Widget": "加载挂件时发生错误",
+    "Pinned messages": "已置顶的消息",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "如果你拥有权限，请打开任何消息的菜单并选择<b>置顶</b>将它们粘贴至此。",
+    "Nothing pinned, yet": "没有置顶",
+    "End-to-end encryption isn't enabled": "未启用端对端加密",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "你的私人信息通常是被加密的，但此聊天室并未加密。一般而言，这可能是因为使用了不受支持的设备或方法，如电子邮件邀请。<a>在设置中启用加密。</a>"
 }

From c0bc019e660c973e7707f680125330ca9718c853 Mon Sep 17 00:00:00 2001
From: Jeff Huang <s8321414@gmail.com>
Date: Wed, 16 Jun 2021 02:14:34 +0000
Subject: [PATCH 109/358] Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/
---
 src/i18n/strings/zh_Hant.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index 053839f937..d9429fc1c3 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3384,5 +3384,22 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "嘗試不同的詞或是檢查拼字。某些結果可能不可見，因為其為私人的，您必須要有邀請才能加入。",
     "No results for \"%(query)s\"": "「%(query)s」沒有結果",
     "The user you called is busy.": "您想要通話的使用者目前忙碌中。",
-    "User Busy": "使用者忙碌"
+    "User Busy": "使用者忙碌",
+    "We're working on this as part of the beta, but just want to let you know.": "我們正將此作為測試版的一部分來處理，但只是想讓您知道。",
+    "Teammates might not be able to view or join any private rooms you make.": "隊友可能無法檢視或加入您建立的任何私人聊天室。",
+    "Or send invite link": "或傳送邀請連結",
+    "If you can't see who you’re looking for, send them your invite link below.": "如果您看不到您要找的人，請在下方向他們傳送您的邀請連結。",
+    "Some suggestions may be hidden for privacy.": "出於隱私考量，可能會隱藏一些建議。",
+    "Search for rooms or people": "搜尋聊天室或夥伴",
+    "Forward message": "轉寄訊息",
+    "Open link": "開啟連結",
+    "Sent": "已傳送",
+    "You don't have permission to do this": "您無權執行此動作",
+    "Error - Mixed content": "錯誤 - 混合內容",
+    "Error loading Widget": "載入小工具時發生錯誤",
+    "Pinned messages": "已釘選的訊息",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "如果您有權限，請開啟任何訊息的選單，並選取<b>釘選</b>以將它們貼到這裡。",
+    "Nothing pinned, yet": "尚未釘選任何東西",
+    "End-to-end encryption isn't enabled": "端到端加密未啟用",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "您的私人訊息通常是被加密的，但此聊天室不是。一般來說，這可能是因為使用了不支援的裝置或方法，例如電子郵件邀請。<a>在設定中啟用加密。</a>"
 }

From 1013c1ec2953d77951d2c3797c97c903e89142b3 Mon Sep 17 00:00:00 2001
From: random <dictionary@tutamail.com>
Date: Thu, 17 Jun 2021 08:27:19 +0000
Subject: [PATCH 110/358] Translated using Weblate (Italian)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/
---
 src/i18n/strings/it.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index c83800e82a..207ff24d58 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3381,5 +3381,22 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Prova parole diverse o controlla errori di battitura. Alcuni risultati potrebbero non essere visibili dato che sono privati e ti servirebbe un invito per unirti.",
     "No results for \"%(query)s\"": "Nessun risultato per \"%(query)s\"",
     "The user you called is busy.": "L'utente che hai chiamato è occupato.",
-    "User Busy": "Utente occupato"
+    "User Busy": "Utente occupato",
+    "We're working on this as part of the beta, but just want to let you know.": "Stiamo lavorando a questo come parte della beta, ma vogliamo almeno fartelo sapere.",
+    "Teammates might not be able to view or join any private rooms you make.": "I tuoi compagni potrebbero non riuscire a vedere o unirsi a qualsiasi stanza privata che crei.",
+    "Or send invite link": "O manda un collegamento di invito",
+    "If you can't see who you’re looking for, send them your invite link below.": "Se non vedi chi stai cercando, mandagli il collegamento di invito sottostante.",
+    "Some suggestions may be hidden for privacy.": "Alcuni suggerimenti potrebbero essere nascosti per privacy.",
+    "Search for rooms or people": "Cerca stanze o persone",
+    "Forward message": "Inoltra messaggio",
+    "Open link": "Apri collegamento",
+    "Sent": "Inviato",
+    "You don't have permission to do this": "Non hai il permesso per farlo",
+    "Error - Mixed content": "Errore - Contenuto misto",
+    "Error loading Widget": "Errore di caricamento del widget",
+    "Nothing pinned, yet": "Non c'è ancora nulla di ancorato",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Se ne hai il permesso, apri il menu di qualsiasi messaggio e seleziona <b>Fissa</b> per ancorarlo qui.",
+    "Pinned messages": "Messaggi ancorati",
+    "End-to-end encryption isn't enabled": "La crittografia end-to-end non è attiva",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "I tuoi messaggi privati normalmente sono cifrati, ma questa stanza non lo è. Di solito ciò è dovuto ad un dispositivo non supportato o dal metodo usato, come gli inviti per email. <a>Attiva la crittografia nelle impostazioni.</a>"
 }

From f1a8c838f63ca9085ad042b6d2026308112cd0cd Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Wed, 16 Jun 2021 07:16:47 +0000
Subject: [PATCH 111/358] Translated using Weblate (Czech)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/
---
 src/i18n/strings/cs.json | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index a84a10f21c..27235665aa 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3298,5 +3298,23 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Vyzkoušejte jiná slova nebo zkontrolujte překlepy. Některé výsledky nemusí být viditelné, protože jsou soukromé a potřebujete k nim pozvánku.",
     "No results for \"%(query)s\"": "Žádné výsledky pro \"%(query)s\"",
     "The user you called is busy.": "Volaný uživatel je zaneprázdněn.",
-    "User Busy": "Uživatel zaneprázdněn"
+    "User Busy": "Uživatel zaneprázdněn",
+    "We're working on this as part of the beta, but just want to let you know.": "Pracujeme na tom v rámci beta verze, ale jen vás o tom chceme informovat.",
+    "Teammates might not be able to view or join any private rooms you make.": "Je možné, že spolupracovníci nebudou moci zobrazit soukromé místnosti, které jste vytvořili, nebo se k nim připojit.",
+    "Or send invite link": "Nebo pošlete pozvánku",
+    "If you can't see who you’re looking for, send them your invite link below.": "Pokud jste nenašli, koho hledáte, pošlete mu odkaz na pozvánku níže.",
+    "Some suggestions may be hidden for privacy.": "Některé návrhy mohou být z důvodu ochrany soukromí skryty.",
+    "Search for rooms or people": "Hledat místnosti nebo osoby",
+    "Message preview": "Náhled zprávy",
+    "Forward message": "Přeposlat zprávu",
+    "Open link": "Otevřít odkaz",
+    "Sent": "Odesláno",
+    "You don't have permission to do this": "K tomu nemáte povolení",
+    "Error - Mixed content": "Chyba - Smíšený obsah",
+    "Error loading Widget": "Chyba při načítání widgetu",
+    "Pinned messages": "Připnuté zprávy",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Pokud máte oprávnění, otevřete nabídku na libovolné zprávě a výběrem možnosti <b>Připnout</b> je sem vložte.",
+    "Nothing pinned, yet": "Zatím není nic připnuto",
+    "End-to-end encryption isn't enabled": "Není povoleno koncové šifrování",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Vaše soukromé zprávy jsou obvykle šifrované, ale tato místnost není. Obvykle je to způsobeno nepodporovaným zařízením nebo použitou metodou, například emailovými pozvánkami. <a>Zapněte šifrování v nastavení.</a>"
 }

From fcf31240e319f0e4b76b05d427473c3900b8c23e Mon Sep 17 00:00:00 2001
From: XoseM <correoxm@disroot.org>
Date: Wed, 16 Jun 2021 06:03:11 +0000
Subject: [PATCH 112/358] Translated using Weblate (Galician)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/gl/
---
 src/i18n/strings/gl.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json
index abb4776a55..b880c5b548 100644
--- a/src/i18n/strings/gl.json
+++ b/src/i18n/strings/gl.json
@@ -3381,5 +3381,22 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Intentao con outras palabras e fíxate nos erros de escritura. Algúns resultados poderían non ser visibles porque son privados e precisas un convite.",
     "No results for \"%(query)s\"": "Sen resultados para \"%(query)s\"",
     "The user you called is busy.": "A persoa á que chamas está ocupada.",
-    "User Busy": "Usuaria ocupada"
+    "User Busy": "Usuaria ocupada",
+    "We're working on this as part of the beta, but just want to let you know.": "Estamos traballando nesto como parte da beta, só queriamos que o soubeses.",
+    "Teammates might not be able to view or join any private rooms you make.": "As outras compañeiras de grupo poderían non ver ou unirse ás salas privadas que creas.",
+    "Or send invite link": "Ou envía ligazón de convite",
+    "If you can't see who you’re looking for, send them your invite link below.": "Se non podes a quen estás a buscar, envíalle ti esta ligazón de convite.",
+    "Some suggestions may be hidden for privacy.": "Algunhas suxestións poderían estar agochadas por privacidade.",
+    "Search for rooms or people": "Busca salas ou persoas",
+    "Forward message": "Reenviar mensaxe",
+    "Open link": "Abrir ligazón",
+    "Sent": "Enviado",
+    "You don't have permission to do this": "Non tes permiso para facer isto",
+    "Error - Mixed content": "Erro - Contido variado",
+    "Error loading Widget": "Erro ao cargar o Widget",
+    "Pinned messages": "Mensaxes fixadas",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Se tes permisos, abre o menú en calquera mensaxe e elixe <b>Fixar</b> para pegalos aquí.",
+    "Nothing pinned, yet": "Nada fixado, por agora",
+    "End-to-end encryption isn't enabled": "Non está activado o cifrado de extremo-a-extremo",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "As túas mensaxes privadas normalmente están cifradas, pero esta sala non. Habitualmente esto é debido a que se utiliza un dispositivo ou métodos no soportados, como convites por email. <a>Activa o cifrado nos axustes.</a>"
 }

From e7b05963802f9eb6b8b1192c9a9e95dfa8958ff0 Mon Sep 17 00:00:00 2001
From: Besnik Bleta <besnik@programeshqip.org>
Date: Wed, 16 Jun 2021 10:14:11 +0000
Subject: [PATCH 113/358] Translated using Weblate (Albanian)

Currently translated at 99.7% (2985 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sq/
---
 src/i18n/strings/sq.json | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json
index 4996decbaf..b2101151e1 100644
--- a/src/i18n/strings/sq.json
+++ b/src/i18n/strings/sq.json
@@ -3370,5 +3370,21 @@
     "The user you called is busy.": "Përdoruesi që thirrët është i zënë.",
     "User Busy": "Përdoruesi Është i Zënë",
     "Kick, ban, or invite people to your active room, and make you leave": "Përzini, dëboni, ose ftoni persona te dhoma juaj aktive, dhe bëni largimin tuaj",
-    "Kick, ban, or invite people to this room, and make you leave": "Përzini, dëboni, ose ftoni persona në këtë dhomë, dhe bëni largimin tuaj"
+    "Kick, ban, or invite people to this room, and make you leave": "Përzini, dëboni, ose ftoni persona në këtë dhomë, dhe bëni largimin tuaj",
+    "We're working on this as part of the beta, but just want to let you know.": "Po merremi me këtë, si pjesë e versionit beta, thjesht duam ta dini.",
+    "Teammates might not be able to view or join any private rooms you make.": "Anëtarët e ekipit mund të mos jenë në gjendje të shohin ose hyjnë në çfarëdo dhome private që krijoni.",
+    "Or send invite link": "Ose dërgoni një lidhje ftese",
+    "If you can't see who you’re looking for, send them your invite link below.": "Nëse s’e shihni atë që po kërkoni, dërgojini nga më poshtë një lidhje ftese.",
+    "Some suggestions may be hidden for privacy.": "Disa sugjerime mund të jenë fshehur, për arsye privatësie.",
+    "Search for rooms or people": "Kërkoni për dhoma ose persona",
+    "Forward message": "Përcille mesazhin",
+    "Open link": "Hape lidhjen",
+    "You don't have permission to do this": "S’keni leje ta bëni këtë",
+    "Error - Mixed content": "Gabim - Lëndë e përzierë",
+    "Error loading Widget": "Gabim në ngarkim Widget-i",
+    "Pinned messages": "Mesazhe të fiksuar",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Nëse keni leje, hapni menunë për çfarëdo mesazhi dhe përzgjidhni <b>Fiksoje</b>, për ta ngjitur këtu.",
+    "Nothing pinned, yet": "Ende pa fiksuar gjë",
+    "End-to-end encryption isn't enabled": "Fshehtëzimi skaj-më-skaj s’është i aktivizuar",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Mesazhet tuaja private normalisht fshehtëzohen, por kjo dhomë nuk fshehtëzohet. Zakonisht kjo vjen si pasojë e përdorimit të një pajisjeje apo metode të pambuluar, bie fjala, ftesa me email. <a>Aktivizoni fshehtëzimin që nga rregullimet.</a>"
 }

From d33cfd6869e61e79b2f1d7d8f9da30dfbec9a943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Fri, 18 Jun 2021 21:35:18 +0000
Subject: [PATCH 114/358] Translated using Weblate (Estonian)

Currently translated at 99.8% (2988 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
 src/i18n/strings/et.json | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index a8e267fb01..9454efd956 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -126,7 +126,7 @@
     "Explore Public Rooms": "Sirvi avalikke jututubasid",
     "Explore": "Uuri",
     "Filter rooms…": "Filtreeri jututubasid…",
-    "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Liites kokku kasutajaid ja jututubasid loo oma kogukond! Loo kogukonna koduleht, et märkida oma koht Matrix'i universumis.",
+    "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Liites kokku kasutajaid ja jututubasid loo oma kogukond! Kogukonna kodulehega tähistad oma koha Matrix'i universumis.",
     "Explore rooms": "Uuri jututubasid",
     "If you've joined lots of rooms, this might take a while": "Kui oled liitunud paljude jututubadega, siis see võib natuke aega võtta",
     "If disabled, messages from encrypted rooms won't appear in search results.": "Kui see seadistus pole kasutusel, siis krüptitud jututubade sõnumeid otsing ei vaata.",
@@ -2218,7 +2218,7 @@
     "%(brand)s can't securely cache encrypted messages locally while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> for encrypted messages to appear in search results.": "%(brand)s ei võimalda veebibrauseris töötades krüptitud sõnumeid turvaliselt puhverdada. Selleks, et krüptitud sõnumeid saaks otsida, kasuta <desktopLink>%(brand)s Desktop</desktopLink> rakendust Matrix'i kliendina.",
     "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Krüptitud sõnumid kasutavad läbivat krüptimist. Ainult sinul ja saaja(te)l on võtmed selliste sõnumite lugemiseks.",
     "Unable to load key backup status": "Võtmete varunduse oleku laadimine ei õnnestunud",
-    "Restore from Backup": "Taasta varundusest",
+    "Restore from Backup": "Taasta varukoopiast",
     "This session is backing up your keys. ": "See sessioon varundab sinu krüptovõtmeid. ",
     "This session is <b>not backing up your keys</b>, but you do have an existing backup you can restore from and add to going forward.": "See sessioon <b>ei varunda sinu krüptovõtmeid</b>, aga sul on olemas varundus, millest saad taastada ning millele saad võtmeid lisada.",
     "Success": "Õnnestus",
@@ -3298,7 +3298,7 @@
     "You have no ignored users.": "Sa ei ole veel kedagi eiranud.",
     "Play": "Esita",
     "Pause": "Peata",
-    "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Kas sa tahaksid katsetada? Sa tutvud meie rakenduse uuendustega teistest varem ja võib-olla isegi saad mõjutada arenduse lõpptulemust. <a>Lisateavet liad siit</a>.",
+    "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Kas sa tahaksid katsetada? Sa tutvud meie rakenduse uuendustega teistest varem ja võib-olla isegi saad mõjutada arenduse lõpptulemust. <a>Lisateavet leiad siit</a>.",
     "<b>This is an experimental feature.</b> For now, new users receiving an invite will have to open the invite on <link/> to actually join.": "<b>See on katseline funktsionaalsus.</b> Seetõttu uued kutse saanud kasutajad peavad tegelikuks liitumiseks avama kutse siin <link/>.",
     "To join %(spaceName)s, turn on the <a>Spaces beta</a>": "%(spaceName)s kogukonnakeskusega liitumiseks lülita sisse <a>vastav katseline funktsionaalsus</a>",
     "To view %(spaceName)s, turn on the <a>Spaces beta</a>": "%(spaceName)s kogukonnakeskuse vaatamiseks lülita sisse <a>vastav katseline funktsionaalsus</a>",
@@ -3327,9 +3327,9 @@
     "Please enter a name for the space": "Palun sisesta kogukonnakeskuse nimi",
     "Connecting": "Kõne on ühendamisel",
     "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Kasuta võrdõigusvõrku 1:1 kõnede jaoks (kui sa P2P-võrgu sisse lülitad, siis teine osapool ilmselt näeb sinu IP-aadressi)",
-    "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Kõik funtsionaalsused ei pruugi sinu koduserveri poolt olla toetatud.",
+    "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Kõik funktsionaalsused ei pruugi sinu koduserveri poolt olla toetatud.",
     "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "Sa võid beetaversiooni kasutamise lõpetada niipea, kui tahad. Selleks klõpsi beeta-silti, mida näed siin samas ülal.",
-    "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.": "Käivitame %(brand)s uuesti nii, et kogukonnakeskused on kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid on siis välja lülitatud.",
+    "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.": "Käivitame %(brand)s'i uuesti nii, et kogukonnakeskused on kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid on siis välja lülitatud.",
     "%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Käivitame %(brand)s uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.",
     "Beta available for web, desktop and Android. Thank you for trying the beta.": "Rakenduse beetaversioon on saadaval veebirakendusena, töölauarakendusena ja Androidi jaoks. Tänud, et oled huviline katsetama meie rakendust.",
     "Spaces are a new way to group rooms and people.": "Kogukonnakeskused on uus viis jututubade ja inimeste ühendamiseks.",
@@ -3344,7 +3344,7 @@
     "Add reaction": "Lisa reaktsioon",
     "Send and receive voice messages": "Saada ja võta vastu häälsõnumeid",
     "Your feedback will help make spaces better. The more detail you can go into, the better.": "Sinu tagasiside aitab teha kogukonnakeskuseid paremaks. Mida detailsemalt sa oma arvamust kirjeldad, seda parem.",
-    "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Kui sa lahkud, siis käivitame %(brand)s uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.",
+    "If you leave, %(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "Kui sa lahkud, siis käivitame %(brand)s'i uuesti nii, et kogukonnakeskused ei ole kasutusel. Vana tüüpi kogukonnad ja kohandatud sildid saavad jälle olema kasutusel.",
     "Message search initialisation failed": "Sõnumite otsingu alustamine ei õnnestunud",
     "sends space invaders": "korraldab ühe pisikese tulnukate vallutusretke",
     "Sends the given message with a space themed effect": "Saadab antud sõnumi kosmoseteemalise efektiga",
@@ -3354,5 +3354,22 @@
     "No results for \"%(query)s\"": "Päringule „%(query)s“ pole vastuseid",
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Proovi muid otsingusõnu või kontrolli, et neis polnud trükivigu. Kuna mõned otsingutulemused on privaatsed ja sa vajad kutset nende nägemiseks, siis kõiki tulemusi siin ei pruugi näha olla.",
     "Currently joining %(count)s rooms|other": "Parasjagu liitun %(count)s jututoaga",
-    "Currently joining %(count)s rooms|one": "Parasjagu liitun %(count)s jututoaga"
+    "Currently joining %(count)s rooms|one": "Parasjagu liitun %(count)s jututoaga",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Sinu isiklikud sõnumid on tavaliselt läbivalt krüptitud, aga see jututuba ei ole. Tavaliselt on põhjuseks, et kasutusel on mõni seade või meetod nagu e-posti põhised kutsed, mis krüptimist veel ei toeta. <a>Läbiva krüptimise saad sisse lülitada seadistustes.</a>",
+    "We're working on this as part of the beta, but just want to let you know.": "Me küll alles arendame seda beetafunktsionaalsust, aga soovime, et sa sellest juba teaksid.",
+    "Teammates might not be able to view or join any private rooms you make.": "Kui muudad jututoa privaatseks, siis sinu kaaslased ei pruugi seda näha ega temaga liituda.",
+    "If you can't see who you’re looking for, send them your invite link below.": "Kui sa ei leia otsitavaid, siis saada neile kutse.",
+    "Or send invite link": "Või saada kutse link",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Kui sul on vastavad õigused olemas, siis ava sõnumi juuresolev menüü ning püsisõnumi tekitamiseks vali <b>Klammerda</b>.",
+    "Pinned messages": "Klammerdatud sõnumid",
+    "Nothing pinned, yet": "Klammerdatud sõnumeid veel pole",
+    "End-to-end encryption isn't enabled": "Läbiv krüptimine pole kasutusel",
+    "Some suggestions may be hidden for privacy.": "Mõned soovitused võivad privaatsusseadistuste tõttu olla peidetud.",
+    "Search for rooms or people": "Otsi jututubasid või inimesi",
+    "Forward message": "Edasta sõnum",
+    "Open link": "Ava link",
+    "Sent": "Saadetud",
+    "You don't have permission to do this": "Sul puuduvad selleks toiminguks õigused",
+    "Error - Mixed content": "Viga - erinev sisu",
+    "Error loading Widget": "Viga vidina laadimisel"
 }

From d0ea842f1e0aa3bbd3d99009c2ce31284c76eacf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Jun 2021 10:29:08 +0200
Subject: [PATCH 115/358] Remove sorting by index as it is already done here:
 https://github.com/matrix-org/matrix-react-sdk/blob/e9ea3cad76173c5e5b8f4d7d618a3d8a17548102/src/autocomplete/QueryMatcher.ts#L120
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/autocomplete/RoomProvider.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index ad55b19101..04dc9720e6 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -32,15 +32,6 @@ import SettingsStore from "../settings/SettingsStore";
 
 const ROOM_REGEX = /\B#\S*/g;
 
-function score(query: string, space: string) {
-    const index = space.indexOf(query);
-    if (index === -1) {
-        return Infinity;
-    } else {
-        return index;
-    }
-}
-
 function matcherObject(room: Room, displayedAlias: string, matchName = "") {
     return {
         room,
@@ -106,7 +97,6 @@ export default class RoomProvider extends AutocompleteProvider {
             const matchedString = command[0];
             completions = this.matcher.match(matchedString, limit);
             completions = sortBy(completions, [
-                (c) => score(matchedString, c.displayedAlias),
                 (c) => c.displayedAlias.length,
             ]);
             completions = uniqBy(completions, (match) => match.room);

From 7bf230e66502679c3f9894e8e642b215e48fd30d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 20 Jun 2021 10:41:36 +0200
Subject: [PATCH 116/358] Prefer canonical aliases over non-canonical ones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/autocomplete/RoomProvider.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index 04dc9720e6..f784a57821 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -32,6 +32,11 @@ import SettingsStore from "../settings/SettingsStore";
 
 const ROOM_REGEX = /\B#\S*/g;
 
+// Prefer canonical aliases over non-canonical ones
+function canonicalScore(displayedAlias: string, room: Room): number {
+    return displayedAlias === room.getCanonicalAlias() ? 0 : 1;
+}
+
 function matcherObject(room: Room, displayedAlias: string, matchName = "") {
     return {
         room,
@@ -97,6 +102,7 @@ export default class RoomProvider extends AutocompleteProvider {
             const matchedString = command[0];
             completions = this.matcher.match(matchedString, limit);
             completions = sortBy(completions, [
+                (c) => canonicalScore(c.displayedAlias, c.room),
                 (c) => c.displayedAlias.length,
             ]);
             completions = uniqBy(completions, (match) => match.room);

From 6c64f564e4ccba567564edfaeb9417fcefa9e05b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 18 Jun 2021 18:32:45 +0100
Subject: [PATCH 117/358] Naive attempt at improving our end-to-end tests in
 Github Actions

---
 .github/workflows/develop.yml                 |  7 +++++--
 ...d-tests.sh => prepare-end-to-end-tests.sh} | 11 +----------
 scripts/ci/run-end-to-end-tests.sh            | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 12 deletions(-)
 rename scripts/ci/{end-to-end-tests.sh => prepare-end-to-end-tests.sh} (65%)
 create mode 100755 scripts/ci/run-end-to-end-tests.sh

diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 6410bd28fa..3c3807e33b 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -11,10 +11,13 @@ jobs:
         steps:
             - name: Checkout code
               uses: actions/checkout@v2
-            - name: End-to-End tests
-              run: ./scripts/ci/end-to-end-tests.sh
+            - name: Prepare End-to-End tests
+              run: ./scripts/ci/prepare-end-to-end-tests.sh
+            - name: Run End-to-End tests
+              run: ./scripts/ci/run-end-to-end-tests.sh
             - name: Archive logs
               uses: actions/upload-artifact@v2
+              if: ${{ always() }}
               with:
                 path: |
                     test/end-to-end-tests/logs/**/*
diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/prepare-end-to-end-tests.sh
similarity index 65%
rename from scripts/ci/end-to-end-tests.sh
rename to scripts/ci/prepare-end-to-end-tests.sh
index edb8870d8e..147e1f6445 100755
--- a/scripts/ci/end-to-end-tests.sh
+++ b/scripts/ci/prepare-end-to-end-tests.sh
@@ -1,8 +1,4 @@
 #!/bin/bash
-#
-# script which is run by the CI build (after `yarn test`).
-#
-# clones element-web develop and runs the tests against our version of react-sdk.
 
 set -ev
 
@@ -19,7 +15,7 @@ cd element-web
 element_web_dir=`pwd`
 CI_PACKAGE=true yarn build
 cd ..
-# run end to end tests
+# prepare end to end tests
 pushd test/end-to-end-tests
 ln -s $element_web_dir element/element-web
 # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh
@@ -28,9 +24,4 @@ echo "--- Install synapse & other dependencies"
 ./install.sh
 # install static webserver to server symlinked local copy of element
 ./element/install-webserver.sh
-rm -r logs || true
-mkdir logs
-echo "+++ Running end-to-end tests"
-TESTS_STARTED=1
-./run.sh --no-sandbox --log-directory logs/
 popd
diff --git a/scripts/ci/run-end-to-end-tests.sh b/scripts/ci/run-end-to-end-tests.sh
new file mode 100755
index 0000000000..3c99391fc7
--- /dev/null
+++ b/scripts/ci/run-end-to-end-tests.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -ev
+
+handle_error() {
+    EXIT_CODE=$?
+    exit $EXIT_CODE
+}
+
+trap 'handle_error' ERR
+
+# run end to end tests
+pushd test/end-to-end-tests
+rm -r logs || true
+mkdir logs
+echo "--- Running end-to-end tests"
+TESTS_STARTED=1
+./run.sh --no-sandbox --log-directory logs/
+popd

From e79b7d7adb7b8f5214d0b498cd555957ccc5f1ba Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 19 Jun 2021 15:37:48 +0100
Subject: [PATCH 118/358] Fix View Source accessing renamed private field on
 MatrixEvent

---
 src/components/structures/ViewSource.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 6fe99dd464..b69a92dd61 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -55,7 +55,7 @@ export default class ViewSource extends React.Component {
     viewSourceContent() {
         const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit
         const isEncrypted = mxEvent.isEncrypted();
-        const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private
+        const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private
         const originalEventSource = mxEvent.event;
 
         if (isEncrypted) {

From 2d9e97a3e13bb481431f812178c47f6c75e395c6 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 09:47:46 +0100
Subject: [PATCH 119/358] Fix branch matching to work with GitHub Actions and
 BuildKite

---
 scripts/fetchdep.sh | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index fe1f49c361..9844fdc9db 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -22,15 +22,18 @@ clone() {
 }
 
 # Try the PR author's branch in case it exists on the deps as well.
-# First we check if BUILDKITE_BRANCH is defined,
+# First we check if GITHUB_HEAD_REF is defined,
+# Then we check if BUILDKITE_BRANCH is defined,
 # if it isn't we can assume this is a Netlify build
-if [ -z ${BUILDKITE_BRANCH+x} ]; then 
+if [ -n ${GITHUB_HEAD_REF+x} ]; then
+	head=$GITHUB_HEAD_REF
+elif [ -n ${BUILDKITE_BRANCH+x} ]; then
+	head=$BUILDKITE_BRANCH
+else
 	# Netlify doesn't give us info about the fork so we have to get it from GitHub API
 	apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
 	apiEndpoint+=$REVIEW_ID
 	head=$(curl $apiEndpoint | jq -r '.head.label')
-else 
-	head=$BUILDKITE_BRANCH
 fi
 
 # If head is set, it will contain either:
@@ -39,12 +42,18 @@ fi
 # We can split on `:` into an array to check.
 BRANCH_ARRAY=(${head//:/ })
 if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
-    clone $deforg $defrepo $BUILDKITE_BRANCH
+    clone $deforg $defrepo $head
 elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
     clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]}
 fi
+
 # Try the target branch of the push or PR.
-clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
+if [ -n ${GITHUB_BASE_REF+x} ]; then
+    clone $deforg $defrepo $GITHUB_BASE_REF
+elif [ -n ${BUILDKITE_PULL_REQUEST_BASE_BRANCH+x} ]; then
+    clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
+fi
+
 # Try HEAD which is the branch name in Netlify (not BRANCH which is pull/xxxx/head for PR builds)
 clone $deforg $defrepo $HEAD
 # Use the default branch as the last resort.

From 9756a99220a34a1a4bae9c0b15c14871ef161818 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 12:14:30 +0100
Subject: [PATCH 120/358] Migrate TruncatedList to TypeScript

---
 .../{TruncatedList.js => TruncatedList.tsx}   | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)
 rename src/components/views/elements/{TruncatedList.js => TruncatedList.tsx} (65%)

diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.tsx
similarity index 65%
rename from src/components/views/elements/TruncatedList.js
rename to src/components/views/elements/TruncatedList.tsx
index 0509775545..395caa9222 100644
--- a/src/components/views/elements/TruncatedList.js
+++ b/src/components/views/elements/TruncatedList.tsx
@@ -16,31 +16,29 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.TruncatedList")
-export default class TruncatedList extends React.Component {
-    static propTypes = {
-        // The number of elements to show before truncating. If negative, no truncation is done.
-        truncateAt: PropTypes.number,
-        // The className to apply to the wrapping div
-        className: PropTypes.string,
-        // A function that returns the children to be rendered into the element.
-        // function getChildren(start: number, end: number): Array<React.Node>
-        // The start element is included, the end is not (as in `slice`).
-        // If omitted, the React child elements will be used. This parameter can be used
-        // to avoid creating unnecessary React elements.
-        getChildren: PropTypes.func,
-        // A function that should return the total number of child element available.
-        // Required if getChildren is supplied.
-        getChildCount: PropTypes.func,
-        // A function which will be invoked when an overflow element is required.
-        // This will be inserted after the children.
-        createOverflowElement: PropTypes.func,
-    };
+interface IProps {
+    // The number of elements to show before truncating. If negative, no truncation is done.
+    truncateAt?: number;
+    // The className to apply to the wrapping div
+    className?: string;
+    // A function that returns the children to be rendered into the element.
+    // The start element is included, the end is not (as in `slice`).
+    // If omitted, the React child elements will be used. This parameter can be used
+    // to avoid creating unnecessary React elements.
+    getChildren?: (start: number, end: number) => Array<React.ReactNode>;
+    // A function that should return the total number of child element available.
+    // Required if getChildren is supplied.
+    getChildCount?: () => number;
+    // A function which will be invoked when an overflow element is required.
+    // This will be inserted after the children.
+    createOverflowElement?: (overflowCount: number, totalCount: number) => React.ReactNode;
+}
 
+@replaceableComponent("views.elements.TruncatedList")
+export default class TruncatedList extends React.Component<IProps> {
     static defaultProps ={
         truncateAt: 2,
         createOverflowElement(overflowCount, totalCount) {
@@ -50,7 +48,7 @@ export default class TruncatedList extends React.Component {
         },
     };
 
-    _getChildren(start, end) {
+    private getChildren(start: number, end: number): Array<React.ReactNode> {
         if (this.props.getChildren && this.props.getChildCount) {
             return this.props.getChildren(start, end);
         } else {
@@ -63,7 +61,7 @@ export default class TruncatedList extends React.Component {
         }
     }
 
-    _getChildCount() {
+    private getChildCount(): number {
         if (this.props.getChildren && this.props.getChildCount) {
             return this.props.getChildCount();
         } else {
@@ -73,10 +71,10 @@ export default class TruncatedList extends React.Component {
         }
     }
 
-    render() {
+    public render() {
         let overflowNode = null;
 
-        const totalChildren = this._getChildCount();
+        const totalChildren = this.getChildCount();
         let upperBound = totalChildren;
         if (this.props.truncateAt >= 0) {
             const overflowCount = totalChildren - this.props.truncateAt;
@@ -87,7 +85,7 @@ export default class TruncatedList extends React.Component {
                 upperBound = this.props.truncateAt;
             }
         }
-        const childNodes = this._getChildren(0, upperBound);
+        const childNodes = this.getChildren(0, upperBound);
 
         return (
             <div className={this.props.className}>

From d2595dcd61876d9f1def0b5e197918588692c07b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 12:29:59 +0100
Subject: [PATCH 121/358] use TruncatedList to improve ForwardDialog rendering
 time

---
 .../views/dialogs/ForwardDialog.tsx           | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index a83f3f177c..b04fd9ef76 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -39,6 +39,9 @@ import NotificationBadge from "../rooms/NotificationBadge";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import TruncatedList from "../elements/TruncatedList";
+import EntityTile from "../rooms/EntityTile";
+import BaseAvatar from "../avatars/BaseAvatar";
 
 const AVATAR_SIZE = 30;
 
@@ -195,6 +198,17 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
         }).match(lcQuery);
     }
 
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount, totalCount) {
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={() => setTruncateAt(totalCount)} />
+        );
+    }
+
     return <BaseDialog
         title={_t("Forward message")}
         className="mx_ForwardDialog"
@@ -227,15 +241,20 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             <AutoHideScrollbar className="mx_ForwardList_content">
                 { rooms.length > 0 ? (
                     <div className="mx_ForwardList_results">
-                        { rooms.map(room =>
-                            <Entry
-                                key={room.roomId}
-                                room={room}
-                                event={event}
-                                matrixClient={cli}
-                                onFinished={onFinished}
-                            />,
-                        ) }
+                        <TruncatedList
+                            truncateAt={truncateAt}
+                            createOverflowElement={overflowTile}
+                            getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                                <Entry
+                                    key={room.roomId}
+                                    room={room}
+                                    event={event}
+                                    matrixClient={cli}
+                                    onFinished={onFinished}
+                                />,
+                            )}
+                            getChildCount={() => rooms.length}
+                        />
                     </div>
                 ) : <span className="mx_ForwardList_noResults">
                     { _t("No results") }

From ca123d3c4daaf18e8ab0dcd9ced019fcd6762f37 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 14:05:56 +0100
Subject: [PATCH 122/358] Migrate MKeyVerificationRequest to TypeScript

---
 ...Request.js => MKeyVerificationRequest.tsx} | 64 +++++++++----------
 1 file changed, 29 insertions(+), 35 deletions(-)
 rename src/components/views/messages/{MKeyVerificationRequest.js => MKeyVerificationRequest.tsx} (77%)

diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.tsx
similarity index 77%
rename from src/components/views/messages/MKeyVerificationRequest.js
rename to src/components/views/messages/MKeyVerificationRequest.tsx
index 988606a766..df35c47706 100644
--- a/src/components/views/messages/MKeyVerificationRequest.js
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@@ -15,41 +15,40 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixEvent } from 'matrix-js-sdk/src';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {getNameForEventRoom, userLabelForEventRoom}
+import { getNameForEventRoom, userLabelForEventRoom }
     from '../../../utils/KeyVerificationStateObserver';
 import dis from "../../../dispatcher/dispatcher";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
 import EventTileBubble from "./EventTileBubble";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    mxEvent: MatrixEvent
+}
 
 @replaceableComponent("views.messages.MKeyVerificationRequest")
-export default class MKeyVerificationRequest extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-
-    componentDidMount() {
+export default class MKeyVerificationRequest extends React.Component<IProps> {
+    public componentDidMount() {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
-            request.on("change", this._onRequestChanged);
+            request.on("change", this.onRequestChanged);
         }
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
-            request.off("change", this._onRequestChanged);
+            request.off("change", this.onRequestChanged);
         }
     }
 
-    _openRequest = () => {
-        const {verificationRequest} = this.props.mxEvent;
+    private openRequest = () => {
+        const { verificationRequest } = this.props.mxEvent;
         const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
         dis.dispatch({
             action: Action.SetRightPanelPhase,
@@ -58,15 +57,15 @@ export default class MKeyVerificationRequest extends React.Component {
         });
     };
 
-    _onRequestChanged = () => {
+    private onRequestChanged = () => {
         this.forceUpdate();
     };
 
-    _onAcceptClicked = async () => {
+    private onAcceptClicked = async () => {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
-                this._openRequest();
+                this.openRequest();
                 await request.accept();
             } catch (err) {
                 console.error(err.message);
@@ -74,7 +73,7 @@ export default class MKeyVerificationRequest extends React.Component {
         }
     };
 
-    _onRejectClicked = async () => {
+    private onRejectClicked = async () => {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
@@ -85,7 +84,7 @@ export default class MKeyVerificationRequest extends React.Component {
         }
     };
 
-    _acceptedLabel(userId) {
+    private acceptedLabel(userId: string) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
         if (userId === myUserId) {
@@ -95,7 +94,7 @@ export default class MKeyVerificationRequest extends React.Component {
         }
     }
 
-    _cancelledLabel(userId) {
+    private cancelledLabel(userId: string) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
         const {cancellationCode} = this.props.mxEvent.verificationRequest;
@@ -115,7 +114,7 @@ export default class MKeyVerificationRequest extends React.Component {
         }
     }
 
-    render() {
+    public render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const FormButton = sdk.getComponent("elements.FormButton");
 
@@ -134,11 +133,11 @@ export default class MKeyVerificationRequest extends React.Component {
             let stateLabel;
             const accepted = request.ready || request.started || request.done;
             if (accepted) {
-                stateLabel = (<AccessibleButton onClick={this._openRequest}>
-                    {this._acceptedLabel(request.receivingUserId)}
+                stateLabel = (<AccessibleButton onClick={this.openRequest}>
+                    {this.acceptedLabel(request.receivingUserId)}
                 </AccessibleButton>);
             } else if (request.cancelled) {
-                stateLabel = this._cancelledLabel(request.cancellingUserId);
+                stateLabel = this.cancelledLabel(request.cancellingUserId);
             } else if (request.accepting) {
                 stateLabel = _t("Accepting …");
             } else if (request.declining) {
@@ -153,8 +152,8 @@ export default class MKeyVerificationRequest extends React.Component {
             subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
-                    <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
-                    <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
+                    <FormButton kind="danger" onClick={this.onRejectClicked} label={_t("Decline")} />
+                    <FormButton onClick={this.onAcceptClicked} label={_t("Accept")} />
                 </div>);
             }
         } else { // request sent by us
@@ -174,8 +173,3 @@ export default class MKeyVerificationRequest extends React.Component {
         return null;
     }
 }
-
-MKeyVerificationRequest.propTypes = {
-    /* the MatrixEvent to show */
-    mxEvent: PropTypes.object.isRequired,
-};

From adb42b792782b5151773089bc5243c6563718a8c Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 14:16:37 +0100
Subject: [PATCH 123/358] Deprecate FormButton to use AccessibleButton
 everywhere

---
 res/css/_components.scss                      |  1 -
 res/css/structures/_ToastContainer.scss       |  3 +-
 res/css/views/elements/_FormButton.scss       | 42 -------------------
 res/css/views/right_panel/_UserInfo.scss      | 10 -----
 .../views/right_panel/_VerificationPanel.scss |  2 +-
 res/css/views/spaces/_SpaceBasicSettings.scss |  2 +-
 src/components/views/elements/FormButton.js   | 28 -------------
 .../messages/MKeyVerificationRequest.tsx      |  9 ++--
 .../views/right_panel/VerificationPanel.tsx   | 20 +++------
 src/components/views/toasts/GenericToast.tsx  | 10 +++--
 src/components/views/voip/IncomingCallBox.tsx | 16 +++----
 11 files changed, 31 insertions(+), 112 deletions(-)
 delete mode 100644 res/css/views/elements/_FormButton.scss
 delete mode 100644 src/components/views/elements/FormButton.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 56403ea190..ec3af8655e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -123,7 +123,6 @@
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
-@import "./views/elements/_FormButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 09f834a6e3..14e4c01389 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -134,8 +134,9 @@ limitations under the License.
         .mx_Toast_buttons {
             float: right;
             display: flex;
+            gap: 5px;
 
-            .mx_FormButton {
+            .mx_AccessibleButton {
                 min-width: 96px;
                 box-sizing: border-box;
             }
diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss
deleted file mode 100644
index eda201ff03..0000000000
--- a/res/css/views/elements/_FormButton.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
-Copyright 2019 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.
-*/
-
-.mx_FormButton {
-    line-height: $font-16px;
-    padding: 5px 15px;
-    font-size: $font-12px;
-    height: min-content;
-
-    &:not(:last-child) {
-        margin-right: 8px;
-    }
-
-    &.mx_AccessibleButton_kind_primary {
-        color: $accent-color;
-        background-color: $accent-bg-color;
-    }
-
-    &.mx_AccessibleButton_kind_danger {
-        color: $notice-primary-color;
-        background-color: $notice-primary-bg-color;
-    }
-
-    &.mx_AccessibleButton_kind_secondary {
-        color: $secondary-fg-color;
-        border: 1px solid $secondary-fg-color;
-        background-color: unset;
-    }
-}
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 87420ae4e7..6632ccddf9 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -259,16 +259,6 @@ limitations under the License.
 
     .mx_AccessibleButton.mx_AccessibleButton_hasKind {
         padding: 8px 18px;
-
-        &.mx_AccessibleButton_kind_primary {
-            color: $accent-color;
-            background-color: $accent-bg-color;
-        }
-
-        &.mx_AccessibleButton_kind_danger {
-            color: $notice-primary-color;
-            background-color: $notice-primary-bg-color;
-        }
     }
 
     .mx_VerificationShowSas .mx_AccessibleButton,
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index a8466a1626..12148b09de 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -58,7 +58,7 @@ limitations under the License.
     }
 
     .mx_VerificationPanel_reciprocate_section {
-        .mx_FormButton {
+        .mx_AccessibleButton {
             width: 100%;
             box-sizing: border-box;
             padding: 10px;
diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
index 204ccab2b7..32454b9530 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -73,7 +73,7 @@ limitations under the License.
         }
     }
 
-    .mx_FormButton {
+    .mx_AccessibleButton {
         padding: 8px 22px;
         margin-left: auto;
         display: block;
diff --git a/src/components/views/elements/FormButton.js b/src/components/views/elements/FormButton.js
deleted file mode 100644
index f6b4c986f5..0000000000
--- a/src/components/views/elements/FormButton.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright 2019 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 React from 'react';
-import AccessibleButton from "./AccessibleButton";
-
-export default function FormButton(props) {
-    const {className, label, kind, ...restProps} = props;
-    const newClassName = (className || "") + " mx_FormButton";
-    const allProps = Object.assign({}, restProps,
-        {className: newClassName, kind: kind || "primary", children: [label]});
-    return React.createElement(AccessibleButton, allProps);
-}
-
-FormButton.propTypes = AccessibleButton.propTypes;
diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx
index df35c47706..69467cfa50 100644
--- a/src/components/views/messages/MKeyVerificationRequest.tsx
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@@ -116,7 +116,6 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
 
     public render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        const FormButton = sdk.getComponent("elements.FormButton");
 
         const {mxEvent} = this.props;
         const request = mxEvent.verificationRequest;
@@ -152,8 +151,12 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
-                    <FormButton kind="danger" onClick={this.onRejectClicked} label={_t("Decline")} />
-                    <FormButton onClick={this.onAcceptClicked} label={_t("Accept")} />
+                    <AccessibleButton kind="danger" onClick={this.onRejectClicked}>
+                        {_t("Decline")}
+                    </AccessibleButton>
+                    <AccessibleButton onClick={this.onAcceptClicked}>
+                        {_t("Accept")}
+                    </AccessibleButton>
                 </div>);
             }
         } else { // request sent by us
diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx
index edfe0e3483..ce39141391 100644
--- a/src/components/views/right_panel/VerificationPanel.tsx
+++ b/src/components/views/right_panel/VerificationPanel.tsx
@@ -195,14 +195,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
 
     private renderQRReciprocatePhase() {
         const {member, request} = this.props;
-        let Button;
-        // a bit of a hack, but the FormButton should only be used in the right panel
-        // they should probably just be the same component with a css class applied to it?
-        if (this.props.inDialog) {
-            Button = sdk.getComponent("elements.AccessibleButton");
-        } else {
-            Button = sdk.getComponent("elements.FormButton");
-        }
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const description = request.isSelfVerification ?
             _t("Almost there! Is your other session showing the same shield?") :
             _t("Almost there! Is %(displayName)s showing the same shield?", {
@@ -211,21 +204,18 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
         let body: JSX.Element;
         if (this.state.reciprocateQREvent) {
             // Element Web doesn't support scanning yet, so assume here we're the client being scanned.
-            //
-            // we're passing both a label and a child string to Button as
-            // FormButton and AccessibleButton expect this differently
             body = <React.Fragment>
                 <p>{description}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
                 <div className="mx_VerificationPanel_reciprocateButtons">
-                    <Button
+                    <AccessibleButton
                         label={_t("No")} kind="danger"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this.onReciprocateNoClick}>{_t("No")}</Button>
-                    <Button
+                        onClick={this.onReciprocateNoClick} />
+                    <AccessibleButton
                         label={_t("Yes")} kind="primary"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this.onReciprocateYesClick}>{_t("Yes")}</Button>
+                        onClick={this.onReciprocateYesClick} />
                 </div>
             </React.Fragment>;
         } else {
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index 209babbf9d..ae01e8bfb7 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React, {ReactNode} from "react";
+import AccessibleButton from "../elements/AccessibleButton";
 
-import FormButton from "../elements/FormButton";
 import {XOR} from "../../../@types/common";
 
 export interface IProps {
@@ -50,8 +50,12 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
             {detailContent}
         </div>
         <div className="mx_Toast_buttons" aria-live="off">
-            {onReject && rejectLabel && <FormButton label={rejectLabel} kind="danger" onClick={onReject} /> }
-            <FormButton label={acceptLabel} onClick={onAccept} />
+            {onReject && rejectLabel && <AccessibleButton kind="danger" onClick={onReject}>
+                {rejectLabel}
+            </AccessibleButton> }
+            <AccessibleButton onClick={onAccept} kind="primary">
+                {acceptLabel}
+            </AccessibleButton>
         </div>
     </div>;
 };
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index a0660318bc..10b102832d 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import CallHandler, { AudioID } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
-import FormButton from '../elements/FormButton';
+import AccesibleButton from '../elements/AccessibleButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
@@ -143,19 +143,21 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                 />
             </div>
             <div className="mx_IncomingCallBox_buttons">
-                <FormButton
+                <AccesibleButton
                     className={"mx_IncomingCallBox_decline"}
                     onClick={this.onRejectClick}
                     kind="danger"
-                    label={_t("Decline")}
-                />
+                >
+                    {_t("Decline")}
+                </AccesibleButton>
                 <div className="mx_IncomingCallBox_spacer" />
-                <FormButton
+                <AccesibleButton
                     className={"mx_IncomingCallBox_accept"}
                     onClick={this.onAnswerClick}
                     kind="primary"
-                    label={_t("Accept")}
-                />
+                >
+                    {_t("Accept")}
+                </AccesibleButton>
             </div>
         </div>;
     }

From 7f635c68c519e0df9ba20e34c8f278ea33b20720 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 14:50:21 +0100
Subject: [PATCH 124/358] Migrate SearchBar to TypeScript

---
 src/components/structures/RoomView.tsx        |  9 +--
 .../rooms/{SearchBar.js => SearchBar.tsx}     | 69 ++++++++++++++-----
 2 files changed, 55 insertions(+), 23 deletions(-)
 rename src/components/views/rooms/{SearchBar.js => SearchBar.tsx} (55%)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 1e3adcb518..c1dcb81e08 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -60,7 +60,7 @@ import ScrollPanel from "./ScrollPanel";
 import TimelinePanel from "./TimelinePanel";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import RoomPreviewBar from "../views/rooms/RoomPreviewBar";
-import SearchBar from "../views/rooms/SearchBar";
+import SearchBar, { SearchScope } from "../views/rooms/SearchBar";
 import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
 import AuxPanel from "../views/rooms/AuxPanel";
 import RoomHeader from "../views/rooms/RoomHeader";
@@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
+import Search from '../views/emojipicker/Search';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -139,7 +140,7 @@ export interface IState {
     draggingFile: boolean;
     searching: boolean;
     searchTerm?: string;
-    searchScope?: "All" | "Room";
+    searchScope?: SearchScope;
     searchResults?: XOR<{}, {
         count: number;
         highlights: string[];
@@ -1267,7 +1268,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             });
     }
 
-    private onSearch = (term: string, scope) => {
+    private onSearch = (term: string, scope: SearchScope) => {
         this.setState({
             searchTerm: term,
             searchScope: scope,
@@ -1288,7 +1289,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.searchId = new Date().getTime();
 
         let roomId;
-        if (scope === "Room") roomId = this.state.room.roomId;
+        if (scope === SearchScope.Room) roomId = this.state.room.roomId;
 
         debuglog("sending search request");
         const searchPromise = eventSearch(term, roomId);
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.tsx
similarity index 55%
rename from src/components/views/rooms/SearchBar.js
rename to src/components/views/rooms/SearchBar.tsx
index 029516c932..de99305d81 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, {createRef, RefObject} from 'react';
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
@@ -23,27 +23,42 @@ import {Key} from "../../../Keyboard";
 import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    onCancelClick: () => void;
+    onSearch: (query: string, scope: string) => void;
+    searchInProgress?: boolean;
+    isRoomEncrypted?: boolean;
+}
+
+interface IState {
+    scope: SearchScope;
+}
+
+export enum SearchScope {
+    Room = "Room",
+    All = "All",
+}
+
 @replaceableComponent("views.rooms.SearchBar")
-export default class SearchBar extends React.Component {
-    constructor(props) {
+export default class SearchBar extends React.Component<IProps, IState> {
+    private searchTerm: RefObject<HTMLInputElement> = createRef();
+
+    constructor(props: IProps) {
         super(props);
-
-        this._search_term = createRef();
-
         this.state = {
-            scope: 'Room',
+            scope: SearchScope.Room,
         };
     }
 
-    onThisRoomClick = () => {
-        this.setState({ scope: 'Room' }, () => this._searchIfQuery());
+    public onThisRoomClick = () => {
+        this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery());
     };
 
-    onAllRoomsClick = () => {
-        this.setState({ scope: 'All' }, () => this._searchIfQuery());
+    public onAllRoomsClick = () => {
+        this.setState({ scope: SearchScope.All }, () => this._searchIfQuery());
     };
 
-    onSearchChange = (e) => {
+    public onSearchChange = (e: React.KeyboardEvent) => {
         switch (e.key) {
             case Key.ENTER:
                 this.onSearch();
@@ -55,13 +70,13 @@ export default class SearchBar extends React.Component {
     };
 
     _searchIfQuery() {
-        if (this._search_term.current.value) {
+        if (this.searchTerm.current.value) {
             this.onSearch();
         }
     }
 
     onSearch = () => {
-        this.props.onSearch(this._search_term.current.value, this.state.scope);
+        this.props.onSearch(this.searchTerm.current.value, this.state.scope);
     };
 
     render() {
@@ -69,25 +84,41 @@ export default class SearchBar extends React.Component {
             mx_SearchBar_searching: this.props.searchInProgress,
         });
         const thisRoomClasses = classNames("mx_SearchBar_button", {
-            mx_SearchBar_unselected: this.state.scope !== 'Room',
+            mx_SearchBar_unselected: this.state.scope !== SearchScope.Room,
         });
         const allRoomsClasses = classNames("mx_SearchBar_button", {
-            mx_SearchBar_unselected: this.state.scope !== 'All',
+            mx_SearchBar_unselected: this.state.scope !== SearchScope.All,
         });
 
         return (
             <>
                 <div className="mx_SearchBar">
                     <div className="mx_SearchBar_buttons" role="radiogroup">
-                        <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
+                        <AccessibleButton
+                            className={ thisRoomClasses }
+                            onClick={this.onThisRoomClick}
+                            aria-checked={this.state.scope === SearchScope.Room}
+                            role="radio"
+                        >
                             {_t("This Room")}
                         </AccessibleButton>
-                        <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
+                        <AccessibleButton
+                            className={ allRoomsClasses }
+                            onClick={this.onAllRoomsClick}
+                            aria-checked={this.state.scope === SearchScope.All}
+                            role="radio"
+                        >
                             {_t("All Rooms")}
                         </AccessibleButton>
                     </div>
                     <div className="mx_SearchBar_input mx_textinput">
-                        <input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
+                        <input
+                            ref={this.searchTerm}
+                            type="text"
+                            autoFocus={true}
+                            placeholder={_t("Search…")}
+                            onKeyDown={this.onSearchChange}
+                        />
                         <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
                     </div>
                     <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />

From 7825c30bf773185c967c61ef3cb2a448bdf8f791 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 15:41:47 +0100
Subject: [PATCH 125/358] Improve event index initialisation failure message in
 search bar for supported platforms

---
 .../views/elements/DesktopBuildsNotice.tsx    | 19 ++++++++++++++++++-
 src/i18n/strings/en_EN.json                   |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx
index fd1c7848aa..e5e94d4bd4 100644
--- a/src/components/views/elements/DesktopBuildsNotice.tsx
+++ b/src/components/views/elements/DesktopBuildsNotice.tsx
@@ -14,10 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from "react";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import React from "react";
+
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserSettingsDialog";
+
 
 export enum WarningKind {
     Files,
@@ -33,6 +38,18 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
     if (!isRoomEncrypted) return null;
     if (EventIndexPeg.get()) return null;
 
+    if (EventIndexPeg.error) {
+        return _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+            a: sub => (<a onClick={(evt) => {
+                evt.preventDefault();
+                dis.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.Security,
+                });
+            }}>{sub}</a>),
+        });
+    }
+
     const {desktopBuilds, brand} = SdkConfig.get();
 
     let text = null;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index b88dc79da5..37f6416460 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1933,6 +1933,7 @@
     "Error loading Widget": "Error loading Widget",
     "Error - Mixed content": "Error - Mixed content",
     "Popout widget": "Popout widget",
+    "Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",
     "Use the <a>Desktop app</a> to see all encrypted files": "Use the <a>Desktop app</a> to see all encrypted files",
     "Use the <a>Desktop app</a> to search encrypted messages": "Use the <a>Desktop app</a> to search encrypted messages",
     "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files",

From 88d25ad6af058d098f147553e7289606cf57a38d Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 15:44:09 +0100
Subject: [PATCH 126/358] Fix typo in default import name

---
 src/components/views/voip/IncomingCallBox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index 10b102832d..cd1a3afd10 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -23,7 +23,7 @@ import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import CallHandler, { AudioID } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
-import AccesibleButton from '../elements/AccessibleButton';
+import AccessibleButton from '../elements/AccessibleButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
@@ -143,21 +143,21 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                 />
             </div>
             <div className="mx_IncomingCallBox_buttons">
-                <AccesibleButton
+                <AccessibleButton
                     className={"mx_IncomingCallBox_decline"}
                     onClick={this.onRejectClick}
                     kind="danger"
                 >
                     {_t("Decline")}
-                </AccesibleButton>
+                </AccessibleButton>
                 <div className="mx_IncomingCallBox_spacer" />
-                <AccesibleButton
+                <AccessibleButton
                     className={"mx_IncomingCallBox_accept"}
                     onClick={this.onAnswerClick}
                     kind="primary"
                 >
                     {_t("Accept")}
-                </AccesibleButton>
+                </AccessibleButton>
             </div>
         </div>;
     }

From ca5f8f97bb80d4cdeaee584b7e9ba0c83207a2b2 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 21 Jun 2021 16:18:13 +0100
Subject: [PATCH 127/358] Branch matching support for forked repository on
 GitHub actions

---
 scripts/fetchdep.sh | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 9844fdc9db..02af402951 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -36,13 +36,19 @@ else
 	head=$(curl $apiEndpoint | jq -r '.head.label')
 fi
 
-# If head is set, it will contain either:
+# If head is set, it will contain on BuilKite either:
 #   * "branch" when the author's branch and target branch are in the same repo
 #   * "fork:branch" when the author's branch is in their fork or if this is a Netlify build
 # We can split on `:` into an array to check.
+# For GitHub Actions we need to inspect GITHUB_REPOSITORY and GITHUB_ACTOR
+# to determine whether the branch is from a fork or not
 BRANCH_ARRAY=(${head//:/ })
 if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
-    clone $deforg $defrepo $head
+    if [[ "$GITHUB_REPOSITORY" = "$deforg/$defrepo" ]]; then
+        clone $deforg $defrepo $head
+    else
+        clone $GITHUB_ACTOR $defrepo $head
+    fi
 elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
     clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]}
 fi

From 174a43f1ef901168f69f535515eedb8e6c7f864c Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 21 Jun 2021 16:37:49 +0100
Subject: [PATCH 128/358] Upgrade matrix-js-sdk to 12.0.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 644793e265..4a4a326a89 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "12.0.0-rc.1",
+    "matrix-js-sdk": "12.0.0",
     "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 14cd11d769..82ee9a070e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5711,10 +5711,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-matrix-js-sdk@12.0.0-rc.1:
-  version "12.0.0-rc.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0-rc.1.tgz#b94a72f0549f3000763efb8c7b6fa1f8808e56f6"
-  integrity sha512-bzozc4w9dF6Dl8xXXLXMpe3FqL/ncczKdB9Y8dL1mPaujVrmLWAai+BYmC9/c4SIw+1zUap9P5W16ej3z7prig==
+matrix-js-sdk@12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0.tgz#8ee7cc37661476341d0c792a1a12bc78b19f9fdd"
+  integrity sha512-DHeq87Sx9Dv37FYyvZkmA1VYsQUNaVgc3QzMUkFwoHt1T4EZzgyYpdsp3uYruJzUW0ACvVJcwFdrU4e1VS97dQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From ddbf0fa77fd798495ce3c5940e4c4f44a607d766 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 21 Jun 2021 16:46:20 +0100
Subject: [PATCH 129/358] Prepare changelog for v3.24.0

---
 CHANGELOG.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a14a0f308e..0f979b4802 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+Changes in [3.24.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0) (2021-06-21)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.24.0-rc.1...v3.24.0)
+
+ * Upgrade to JS SDK 12.0.0
+ * [Release] Keep composer reply when scrolling away from a highlighted event
+   [\#6211](https://github.com/matrix-org/matrix-react-sdk/pull/6211)
+ * [Release] Remove stray bullet point in reply preview
+   [\#6210](https://github.com/matrix-org/matrix-react-sdk/pull/6210)
+ * [Release] Stop requesting null next replies from the server
+   [\#6209](https://github.com/matrix-org/matrix-react-sdk/pull/6209)
+
 Changes in [3.24.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.24.0-rc.1) (2021-06-15)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.23.0...v3.24.0-rc.1)

From d89710defe12a133cfbc9fee664996dcc17761e2 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 21 Jun 2021 16:53:20 +0100
Subject: [PATCH 130/358] v3.24.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4a4a326a89..d592d426a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.24.0-rc.1",
+  "version": "3.24.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From 54c3832b5b9dde5981eb1934f599e7b75eac00e8 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Mon, 21 Jun 2021 16:54:41 +0100
Subject: [PATCH 131/358] Resetting package fields for development

---
 package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d592d426a6..f232d4301b 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "bin": {
     "reskindex": "scripts/reskindex.js"
   },
-  "main": "./lib/index.js",
+  "main": "./src/index.js",
   "matrix_src_main": "./src/index.js",
   "matrix_lib_main": "./lib/index.js",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -197,6 +197,5 @@
     "coverageReporters": [
       "text"
     ]
-  },
-  "typings": "./lib/index.d.ts"
+  }
 }

From 903f898beeb1e1ddbc3de960197b1b5cc16e36d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 21 Jun 2021 18:28:30 +0200
Subject: [PATCH 132/358] Remove ComposerInsertPayload as this is a JS file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/context_menus/MessageContextMenu.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 2fb2ac4d0e..5a1da1376d 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -33,7 +33,6 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
 import ForwardDialog from "../dialogs/ForwardDialog";
-import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
 
 export function canCancel(eventStatus) {
@@ -201,7 +200,7 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onQuoteClick = () => {
-        dis.dispatch<ComposerInsertPayload>({
+        dis.dispatch({
             action: Action.ComposerInsert,
             event: this.props.mxEvent,
         });

From dda4c8ec4c9fc5e00c5d9cc5525433acbf8539d9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 21 Jun 2021 21:04:29 +0100
Subject: [PATCH 133/358] Move Promise::allSettled typing from react-sdk to
 js-sdk

---
 src/@types/global.d.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 0c6b63dd33..7eff341095 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -113,19 +113,6 @@ declare global {
         usageDetails?: {[key: string]: number};
     }
 
-    export interface ISettledFulfilled<T> {
-        status: "fulfilled";
-        value: T;
-    }
-    export interface ISettledRejected {
-        status: "rejected";
-        reason: any;
-    }
-
-    interface PromiseConstructor {
-        allSettled<T>(promises: Promise<T>[]): Promise<Array<ISettledFulfilled<T> | ISettledRejected>>;
-    }
-
     interface HTMLAudioElement {
         type?: string;
         // sinkId & setSinkId are experimental and typescript doesn't know about them

From de4065719475d6f9d6214406ffbbbfd2a393f1c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 22 Jun 2021 09:12:41 +0200
Subject: [PATCH 134/358] Don't show room if we don't click on buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/structures/RoomDirectory.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 1e0605f263..eb7208f98d 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -337,11 +337,10 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
     }
 
     private onRoomClicked = (room: IRoom, ev: ButtonEvent) => {
+        // If room was shift-clicked, remove it from the room directory
         if (ev.shiftKey && !this.state.selectedCommunityId) {
             ev.preventDefault();
             this.removeFromDirectory(room);
-        } else {
-            this.showRoom(room);
         }
     };
 

From a59deeb49165429acc91032280bf8205d2b013e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 22 Jun 2021 09:16:45 +0200
Subject: [PATCH 135/358] Add onClick handlers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/structures/RoomDirectory.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index eb7208f98d..731e2387cc 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -589,12 +589,23 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 onMouseDown={(ev) => {ev.preventDefault();}}
                 className="mx_RoomDirectory_roomDescription"
             >
-                <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
-                <div className="mx_RoomDirectory_topic"
-                    onClick={ (ev) => { ev.stopPropagation(); } }
+                <div
+                    className="mx_RoomDirectory_name"
+                    onClick={(ev) => this.onRoomClicked(room, ev)}
+                >
+                    { name }
+                </div>&nbsp;
+                <div
+                    className="mx_RoomDirectory_topic"
+                    onClick={(ev) => this.onRoomClicked(room, ev)}
                     dangerouslySetInnerHTML={{ __html: topic }}
                 />
-                <div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div>
+                <div
+                    className="mx_RoomDirectory_alias"
+                    onClick={(ev) => this.onRoomClicked(room, ev)}
+                >
+                    { getDisplayAliasForRoom(room) }
+                </div>
             </div>,
             <div key={ `${room.room_id}_memberCount` }
                 onClick={(ev) => this.onRoomClicked(room, ev)}

From deb075777d4d59cefff26c98c7149651eb729540 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 08:17:09 +0100
Subject: [PATCH 136/358] Upgrade @types/react and @types/react-dom

---
 package.json |  4 ++--
 yarn.lock    | 26 ++++++++++++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index f232d4301b..8ebb90f342 100644
--- a/package.json
+++ b/package.json
@@ -132,8 +132,8 @@
     "@types/pako": "^1.0.1",
     "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
-    "@types/react": "^16.9",
-    "@types/react-dom": "^16.9.10",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
diff --git a/yarn.lock b/yarn.lock
index 952d08d0f6..4f17b63337 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1620,12 +1620,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/react-dom@^16.9.10":
-  version "16.9.10"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f"
-  integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw==
+"@types/react-dom@^17.0.2":
+  version "17.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.8.tgz#3180de6d79bf53762001ad854e3ce49f36dd71fc"
+  integrity sha512-0ohAiJAx1DAUEcY9UopnfwCE9sSMDGnY/oXjWMax6g3RpzmTt2GMyMVAXcbn0mo8XAff0SbQJl2/SBU+hjSZ1A==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "*"
 
 "@types/react-transition-group@^4.4.0":
   version "4.4.0"
@@ -1634,7 +1634,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16", "@types/react@^16.14", "@types/react@^16.9":
+"@types/react@*", "@types/react@^16.14":
   version "16.14.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
   integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
@@ -1642,6 +1642,15 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.2":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/sanitize-html@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.3.1.tgz#094d696b83b7394b016e96342bbffa6a028795ce"
@@ -1649,6 +1658,11 @@
   dependencies:
     htmlparser2 "^6.0.0"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"

From 066ef18db2eb56561bb5736b58c95b41426cb244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 22 Jun 2021 09:24:42 +0200
Subject: [PATCH 137/358] Replace onClick by onMouseDown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/structures/RoomDirectory.tsx | 45 ++++++++++-----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 731e2387cc..62944a9d98 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -567,11 +567,11 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         let avatarUrl = null;
         if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32);
 
+        // We use onMouseDown instead of onClick, so that we can avoid text getting selected
         return [
-            <div key={ `${room.room_id}_avatar` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_avatar` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomAvatar"
             >
                 <BaseAvatar
@@ -583,53 +583,50 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                     url={avatarUrl}
                 />
             </div>,
-            <div key={ `${room.room_id}_description` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_description` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomDescription"
             >
                 <div
                     className="mx_RoomDirectory_name"
-                    onClick={(ev) => this.onRoomClicked(room, ev)}
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 >
                     { name }
                 </div>&nbsp;
                 <div
                     className="mx_RoomDirectory_topic"
-                    onClick={(ev) => this.onRoomClicked(room, ev)}
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                     dangerouslySetInnerHTML={{ __html: topic }}
                 />
                 <div
                     className="mx_RoomDirectory_alias"
-                    onClick={(ev) => this.onRoomClicked(room, ev)}
+                    onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 >
                     { getDisplayAliasForRoom(room) }
                 </div>
             </div>,
-            <div key={ `${room.room_id}_memberCount` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_memberCount` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_roomMemberCount"
             >
                 { room.num_joined_members }
             </div>,
-            <div key={ `${room.room_id}_preview` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
+            <div
+                key={ `${room.room_id}_preview` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
                 className="mx_RoomDirectory_preview"
             >
-                {previewButton}
+                { previewButton }
             </div>,
-            <div key={ `${room.room_id}_join` }
-                onClick={(ev) => this.onRoomClicked(room, ev)}
-                // cancel onMouseDown otherwise shift-clicking highlights text
-                onMouseDown={(ev) => {ev.preventDefault();}}
+            <div
+                key={ `${room.room_id}_join` }
+                onMouseDown={(ev) => this.onRoomClicked(room, ev)}
                 className="mx_RoomDirectory_join"
             >
-                {joinOrViewButton}
+                { joinOrViewButton }
             </div>,
         ];
     }

From 8090d2b583f33f4baf5bf8b8dbb2ff1c6cdfa1de Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 09:31:15 +0100
Subject: [PATCH 138/358] Fix branch matching for BuildKite

---
 scripts/fetchdep.sh | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 02af402951..246add7e31 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -25,18 +25,20 @@ clone() {
 # First we check if GITHUB_HEAD_REF is defined,
 # Then we check if BUILDKITE_BRANCH is defined,
 # if it isn't we can assume this is a Netlify build
-if [ -n ${GITHUB_HEAD_REF+x} ]; then
-	head=$GITHUB_HEAD_REF
-elif [ -n ${BUILDKITE_BRANCH+x} ]; then
-	head=$BUILDKITE_BRANCH
+if [ -z ${BUILDKITE_BRANCH+x} ]; then
+    if [ -z ${GITHUB_HEAD_REF+x} ]; then
+        # Netlify doesn't give us info about the fork so we have to get it from GitHub API
+        apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
+        apiEndpoint+=$REVIEW_ID
+        head=$(curl $apiEndpoint | jq -r '.head.label')
+    else
+    	head=$GITHUB_HEAD_REF
+    fi
 else
-	# Netlify doesn't give us info about the fork so we have to get it from GitHub API
-	apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
-	apiEndpoint+=$REVIEW_ID
-	head=$(curl $apiEndpoint | jq -r '.head.label')
+	head=$BUILDKITE_BRANCH
 fi
 
-# If head is set, it will contain on BuilKite either:
+# If head is set, it will contain on BuildKite either:
 #   * "branch" when the author's branch and target branch are in the same repo
 #   * "fork:branch" when the author's branch is in their fork or if this is a Netlify build
 # We can split on `:` into an array to check.
@@ -44,11 +46,16 @@ fi
 # to determine whether the branch is from a fork or not
 BRANCH_ARRAY=(${head//:/ })
 if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
-    if [[ "$GITHUB_REPOSITORY" = "$deforg/$defrepo" ]]; then
-        clone $deforg $defrepo $head
+    if [ -z ${BUILDKITE_BRANCH+x} ]; then
+        if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then
+            clone $deforg $defrepo $GITHUB_HEAD_REF
+        else
+            clone $GITHUB_ACTOR $defrepo $GITHUB_HEAD_REF
+        fi
     else
-        clone $GITHUB_ACTOR $defrepo $head
+        clone $deforg $defrepo $BUILDKITE_BRANCH
     fi
+
 elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
     clone ${BRANCH_ARRAY[0]} $defrepo ${BRANCH_ARRAY[1]}
 fi

From 3c725692704a3cecfe721c011ec4b076e816f491 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 09:53:58 +0100
Subject: [PATCH 139/358] Fix modal opening race condition

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

React 17 is hitting a race condition when a modal is closing and is trying to open another one within the same tick.
A proper long term fix would be using React.createPortal to avoid manually mounting and unmounting new React roots
---
 src/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index ce11c571b6..2f2d5a2d52 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -385,7 +385,7 @@ export class ModalManager {
                 </div>
             );
 
-            ReactDOM.render(dialog, ModalManager.getOrCreateContainer());
+            setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));
         } else {
             // This is safe to call repeatedly if we happen to do that
             ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());

From e9d87478e2c6a4b48658de90fb70862f74ca52bb Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Tue, 22 Jun 2021 10:06:31 +0100
Subject: [PATCH 140/358] Spaces before/after curlies

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/toasts/GenericToast.tsx  | 4 ++--
 src/components/views/voip/IncomingCallBox.tsx | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index ae01e8bfb7..45b65ae1fb 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -51,10 +51,10 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
         </div>
         <div className="mx_Toast_buttons" aria-live="off">
             {onReject && rejectLabel && <AccessibleButton kind="danger" onClick={onReject}>
-                {rejectLabel}
+                { rejectLabel }
             </AccessibleButton> }
             <AccessibleButton onClick={onAccept} kind="primary">
-                {acceptLabel}
+                { acceptLabel }
             </AccessibleButton>
         </div>
     </div>;
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index cd1a3afd10..c09043da24 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -148,7 +148,7 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                     onClick={this.onRejectClick}
                     kind="danger"
                 >
-                    {_t("Decline")}
+                    { _t("Decline") }
                 </AccessibleButton>
                 <div className="mx_IncomingCallBox_spacer" />
                 <AccessibleButton
@@ -156,10 +156,9 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
                     onClick={this.onAnswerClick}
                     kind="primary"
                 >
-                    {_t("Accept")}
+                    { _t("Accept") }
                 </AccessibleButton>
             </div>
         </div>;
     }
 }
-

From db9ffe9b3ebb4c07b645808c3048fe76df9ab8c3 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 10:18:09 +0100
Subject: [PATCH 141/358] Fix AccessibleButton label for VerificationRequest

---
 .../views/right_panel/VerificationPanel.tsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx
index ce39141391..d3f2ba8cbf 100644
--- a/src/components/views/right_panel/VerificationPanel.tsx
+++ b/src/components/views/right_panel/VerificationPanel.tsx
@@ -209,13 +209,19 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
                 <div className="mx_VerificationPanel_reciprocateButtons">
                     <AccessibleButton
-                        label={_t("No")} kind="danger"
+                        kind="danger"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this.onReciprocateNoClick} />
+                        onClick={this.onReciprocateNoClick}
+                    >
+                        { _t("No") }
+                    </AccessibleButton>
                     <AccessibleButton
-                        label={_t("Yes")} kind="primary"
+                        kind="primary"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this.onReciprocateYesClick} />
+                        onClick={this.onReciprocateYesClick}
+                    >
+                        { _t("Yes") }
+                    </AccessibleButton>
                 </div>
             </React.Fragment>;
         } else {

From 3d3c4284555ab95a9bc798844c16db517b0f111b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 10:26:49 +0100
Subject: [PATCH 142/358] Fix DesktopBuildsNotice return type

---
 src/components/structures/RoomView.tsx        |  1 -
 .../views/elements/DesktopBuildsNotice.tsx    | 23 +++++++++++--------
 src/components/views/rooms/SearchBar.tsx      | 20 ++++++++--------
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index c1dcb81e08..a4338e832a 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -82,7 +82,6 @@ import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
-import Search from '../views/emojipicker/Search';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx
index e5e94d4bd4..426554f31e 100644
--- a/src/components/views/elements/DesktopBuildsNotice.tsx
+++ b/src/components/views/elements/DesktopBuildsNotice.tsx
@@ -18,7 +18,6 @@ import React from "react";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserSettingsDialog";
@@ -39,15 +38,19 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
     if (EventIndexPeg.get()) return null;
 
     if (EventIndexPeg.error) {
-        return _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
-            a: sub => (<a onClick={(evt) => {
-                evt.preventDefault();
-                dis.dispatch({
-                    action: Action.ViewUserSettings,
-                    initialTabId: UserTab.Security,
-                });
-            }}>{sub}</a>),
-        });
+        return <>
+            {_t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+                a: sub => (<a onClick={(evt) => {
+                    evt.preventDefault();
+                    dis.dispatch({
+                        action: Action.ViewUserSettings,
+                        initialTabId: UserTab.Security,
+                    });
+                }}>
+                    {sub}
+                </a>),
+            })}
+        </>;
     }
 
     const {desktopBuilds, brand} = SdkConfig.get();
diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx
index de99305d81..47994f5251 100644
--- a/src/components/views/rooms/SearchBar.tsx
+++ b/src/components/views/rooms/SearchBar.tsx
@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef, RefObject} from 'react';
+import React, { createRef, RefObject } from 'react';
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
 import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onCancelClick: () => void;
@@ -50,15 +50,15 @@ export default class SearchBar extends React.Component<IProps, IState> {
         };
     }
 
-    public onThisRoomClick = () => {
-        this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery());
+    private onThisRoomClick = () => {
+        this.setState({ scope: SearchScope.Room }, () => this.searchIfQuery());
     };
 
-    public onAllRoomsClick = () => {
-        this.setState({ scope: SearchScope.All }, () => this._searchIfQuery());
+    private onAllRoomsClick = () => {
+        this.setState({ scope: SearchScope.All }, () => this.searchIfQuery());
     };
 
-    public onSearchChange = (e: React.KeyboardEvent) => {
+    private onSearchChange = (e: React.KeyboardEvent) => {
         switch (e.key) {
             case Key.ENTER:
                 this.onSearch();
@@ -69,17 +69,17 @@ export default class SearchBar extends React.Component<IProps, IState> {
         }
     };
 
-    _searchIfQuery() {
+    private searchIfQuery(): void {
         if (this.searchTerm.current.value) {
             this.onSearch();
         }
     }
 
-    onSearch = () => {
+    private onSearch = (): void => {
         this.props.onSearch(this.searchTerm.current.value, this.state.scope);
     };
 
-    render() {
+    public render() {
         const searchButtonClasses = classNames("mx_SearchBar_searchButton", {
             mx_SearchBar_searching: this.props.searchInProgress,
         });

From dd58c9f413abd9a4c654e19c675f54864f24143b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 10:52:33 +0100
Subject: [PATCH 143/358] Add TruncatedList in AddExistingToSpaceDialog

---
 .../dialogs/AddExistingToSpaceDialog.tsx      | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 822ffc2827..8997e4a5f8 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -39,6 +39,9 @@ import ProgressBar from "../elements/ProgressBar";
 import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import TruncatedList from "../elements/TruncatedList";
+import EntityTile from "../rooms/EntityTile";
+import BaseAvatar from "../avatars/BaseAvatar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -204,6 +207,17 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         setSelectedToAdd(new Set(selectedToAdd));
     } : null;
 
+    const [truncateAt, setTruncateAt] = useState(20);
+    function overflowTile(overflowCount, totalCount) {
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={() => setTruncateAt(totalCount)} />
+        );
+    }
+
     return <div className="mx_AddExistingToSpace">
         <SearchBox
             className="mx_textinput_icon mx_textinput_search"
@@ -216,16 +230,21 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
             { rooms.length > 0 ? (
                 <div className="mx_AddExistingToSpace_section">
                     <h3>{ _t("Rooms") }</h3>
-                    { rooms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selectedToAdd.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
+                    <TruncatedList
+                        truncateAt={truncateAt}
+                        createOverflowElement={overflowTile}
+                        getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                            <Entry
+                                key={room.roomId}
+                                room={room}
+                                checked={selectedToAdd.has(room)}
+                                onChange={onChange ? (checked) => {
+                                    onChange(checked, room);
+                                } : null}
+                            />,
+                        )}
+                        getChildCount={() => rooms.length}
+                    />
                 </div>
             ) : undefined }
 

From 66b3feb802b913b9500ee38c8807f2535eb4ec99 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 11:50:00 +0100
Subject: [PATCH 144/358] Fix keyboard accessibility of the space panel

---
 .../views/elements/AccessibleButton.tsx       |   6 +
 .../views/spaces/SpaceTreeLevel.tsx           | 145 +++++++++++-------
 2 files changed, 98 insertions(+), 53 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index e634057a21..05bcca24b2 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -62,6 +62,8 @@ export default function AccessibleButton({
     disabled,
     inputRef,
     className,
+    onKeyDown,
+    onKeyUp,
     ...restProps
 }: IProps) {
     const newProps: IAccessibleButtonProps = restProps;
@@ -83,6 +85,8 @@ export default function AccessibleButton({
             if (e.key === Key.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();
+            } else {
+                onKeyDown?.(e);
             }
         };
         newProps.onKeyUp = (e) => {
@@ -94,6 +98,8 @@ export default function AccessibleButton({
             if (e.key === Key.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
+            } else {
+                onKeyUp?.(e);
             }
         };
     }
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index f34baf256b..b3577e436a 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -14,23 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { createRef } from "react";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
 import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
-import {RovingAccessibleButton} from "../../../accessibility/roving/RovingAccessibleButton";
-import {RovingAccessibleTooltipButton} from "../../../accessibility/roving/RovingAccessibleTooltipButton";
+import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
-import {_t} from "../../../languageHandler";
-import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
-import {toRightOf} from "../../structures/ContextMenu";
+import { _t } from "../../../languageHandler";
+import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import { toRightOf } from "../../structures/ContextMenu";
 import {
     shouldShowSpaceSettings,
     showAddExistingRooms,
@@ -39,15 +38,16 @@ import {
     showSpaceSettings,
 } from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import RoomViewStore from "../../../stores/RoomViewStore";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
-import {NotificationColor} from "../../../stores/notifications/NotificationColor";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 
 interface IItemProps {
     space?: Room;
@@ -61,11 +61,14 @@ interface IItemProps {
 interface IItemState {
     collapsed: boolean;
     contextMenuPosition: Pick<DOMRect, "right" | "top" | "height">;
+    childSpaces: Room[];
 }
 
 export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     static contextType = MatrixClientContext;
 
+    private buttonRef = createRef<HTMLDivElement>();
+
     constructor(props) {
         super(props);
 
@@ -78,14 +81,36 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         this.state = {
             collapsed: collapsed,
             contextMenuPosition: null,
+            childSpaces: this.childSpaces,
         };
+
+        SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
     }
 
-    private toggleCollapse(evt) {
-        if (this.props.onExpand && this.state.collapsed) {
+    componentWillUnmount() {
+        SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
+    }
+
+    private onSpaceUpdate = () => {
+        this.setState({
+            childSpaces: this.childSpaces,
+        });
+    };
+
+    private get childSpaces() {
+        return SpaceStore.instance.getChildSpaces(this.props.space.roomId)
+            .filter(s => !this.props.parents?.has(s.roomId));
+    }
+
+    private get isCollapsed() {
+        return this.state.collapsed || this.props.isPanelCollapsed;
+    }
+
+    private toggleCollapse = evt => {
+        if (this.props.onExpand && this.isCollapsed) {
             this.props.onExpand();
         }
-        const newCollapsedState = !this.state.collapsed;
+        const newCollapsedState = !this.isCollapsed;
 
         SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
             this.props.space.roomId,
@@ -96,7 +121,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         // don't bubble up so encapsulating button for space
         // doesn't get triggered
         evt.stopPropagation();
-    }
+    };
 
     private onContextMenu = (ev: React.MouseEvent) => {
         if (this.props.space.getMyMembership() !== "join") return;
@@ -111,6 +136,43 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         });
     }
 
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        let handled = true;
+        const action = getKeyBindingsManager().getRoomListAction(ev);
+        const hasChildren = this.state.childSpaces?.length;
+        switch (action) {
+            case RoomListAction.CollapseSection:
+                if (hasChildren && !this.isCollapsed) {
+                    this.toggleCollapse(ev);
+                } else {
+                    const parentItem = this.buttonRef?.current?.parentElement?.parentElement;
+                    const parentButton = parentItem?.previousElementSibling as HTMLElement;
+                    parentButton?.focus();
+                }
+                break;
+
+            case RoomListAction.ExpandSection:
+                if (hasChildren) {
+                    if (this.isCollapsed) {
+                        this.toggleCollapse(ev);
+                    } else {
+                        const childLevel = this.buttonRef?.current?.nextElementSibling;
+                        const firstSpaceItemChild = childLevel?.querySelector<HTMLLIElement>(".mx_SpaceItem");
+                        firstSpaceItemChild?.querySelector<HTMLDivElement>(".mx_SpaceButton")?.focus();
+                    }
+                }
+                break;
+
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
     private onClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -302,18 +364,15 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     render() {
         const {space, activeSpaces, isNested} = this.props;
 
-        const forceCollapsed = this.props.isPanelCollapsed;
         const isNarrow = this.props.isPanelCollapsed;
-        const collapsed = this.state.collapsed || forceCollapsed;
+        const collapsed = this.isCollapsed;
 
-        const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
-            .filter(s => !this.props.parents?.has(s.roomId));
         const isActive = activeSpaces.includes(space);
         const itemClasses = classNames({
             "mx_SpaceItem": true,
             "mx_SpaceItem_narrow": isNarrow,
             "collapsed": collapsed,
-            "hasSubSpaces": childSpaces && childSpaces.length,
+            "hasSubSpaces": this.state.childSpaces?.length,
         });
 
         const isInvite = space.getMyMembership() === "invite";
@@ -328,9 +387,9 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             : SpaceStore.instance.getNotificationState(space.roomId);
 
         let childItems;
-        if (childSpaces && !collapsed) {
+        if (this.state.childSpaces?.length && !collapsed) {
             childItems = <SpaceTreeLevel
-                spaces={childSpaces}
+                spaces={this.state.childSpaces}
                 activeSpaces={activeSpaces}
                 isNested={true}
                 parents={new Set(this.props.parents).add(this.props.space.roomId)}
@@ -346,53 +405,33 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
         const avatarSize = isNested ? 24 : 32;
 
-        const toggleCollapseButton = childSpaces && childSpaces.length ?
+        const toggleCollapseButton = this.state.childSpaces?.length ?
             <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
-                onClick={evt => this.toggleCollapse(evt)}
+                onClick={this.toggleCollapse}
             /> : null;
 
-        let button;
-        if (isNarrow) {
-            button = (
+        return (
+            <li className={itemClasses}>
                 <RovingAccessibleTooltipButton
                     className={classes}
                     title={space.name}
                     onClick={this.onClick}
                     onContextMenu={this.onContextMenu}
-                    forceHide={!!this.state.contextMenuPosition}
+                    forceHide={!isNarrow || !!this.state.contextMenuPosition}
                     role="treeitem"
+                    inputRef={this.buttonRef}
+                    onKeyDown={this.onKeyDown}
                 >
                     { toggleCollapseButton }
                     <div className="mx_SpaceButton_selectionWrapper">
                         <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
+                        { !isNarrow && <span className="mx_SpaceButton_name">{ space.name }</span> }
                         { notifBadge }
                         { this.renderContextMenu() }
                     </div>
                 </RovingAccessibleTooltipButton>
-            );
-        } else {
-            button = (
-                <RovingAccessibleButton
-                    className={classes}
-                    onClick={this.onClick}
-                    onContextMenu={this.onContextMenu}
-                    role="treeitem"
-                >
-                    { toggleCollapseButton }
-                    <div className="mx_SpaceButton_selectionWrapper">
-                        <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
-                        <span className="mx_SpaceButton_name">{ space.name }</span>
-                        { notifBadge }
-                        { this.renderContextMenu() }
-                    </div>
-                </RovingAccessibleButton>
-            );
-        }
 
-        return (
-            <li className={itemClasses}>
-                { button }
                 { childItems }
             </li>
         );

From 1f0fdb95cd2f52731cc1ca2253a249a00fe8a83c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 11:59:04 +0100
Subject: [PATCH 145/358] Improve accessibility of subspaces in the space panel

---
 src/components/views/spaces/SpaceTreeLevel.tsx | 3 +++
 src/i18n/strings/en_EN.json                    | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index b3577e436a..cbc1cab86b 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -409,6 +409,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={this.toggleCollapse}
+                tabIndex={-1}
+                aria-label={collapsed ? _t("Expand") : _t("Collapse")}
             /> : null;
 
         return (
@@ -420,6 +422,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     onContextMenu={this.onContextMenu}
                     forceHide={!isNarrow || !!this.state.contextMenuPosition}
                     role="treeitem"
+                    aria-expanded={!collapsed}
                     inputRef={this.buttonRef}
                     onKeyDown={this.onKeyDown}
                 >
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index b88dc79da5..a2fb93dc17 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1038,6 +1038,8 @@
     "Manage & explore rooms": "Manage & explore rooms",
     "Explore rooms": "Explore rooms",
     "Space options": "Space options",
+    "Expand": "Expand",
+    "Collapse": "Collapse",
     "Remove": "Remove",
     "This bridge was provisioned by <user />.": "This bridge was provisioned by <user />.",
     "This bridge is managed by <user />.": "This bridge is managed by <user />.",

From 27d255f30e1fd023bc6a2f18bf368e007d83989a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 12:27:54 +0100
Subject: [PATCH 146/358] Reduce audio waveform layout trashing

---
 .../views/voice_messages/_PlaybackContainer.scss  |  4 ++++
 src/components/views/voice_messages/Waveform.tsx  | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/voice_messages/_PlaybackContainer.scss
index 20def16d6a..944378fb19 100644
--- a/res/css/views/voice_messages/_PlaybackContainer.scss
+++ b/res/css/views/voice_messages/_PlaybackContainer.scss
@@ -33,9 +33,13 @@ limitations under the License.
     font-size: $font-14px;
     line-height: $font-24px;
 
+    contain: content;
+
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
+            height: 100%;
+            transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx
index 840a5a12b3..ae880933e6 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/voice_messages/Waveform.tsx
@@ -34,16 +34,19 @@ interface IState {
  * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
  * "filled", as a demonstration of the progress property.
  */
+
+import { CSSProperties } from "react";
+
+export interface WaveformCSSProperties extends CSSProperties {
+    '--barHeight': number;
+}
+
 @replaceableComponent("views.voice_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,
     };
 
-    public constructor(props) {
-        super(props);
-    }
-
     public render() {
         return <div className='mx_Waveform'>
             {this.props.relHeights.map((h, i) => {
@@ -53,7 +56,9 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
                     'mx_Waveform_bar': true,
                     'mx_Waveform_bar_100pct': isCompleteBar,
                 });
-                return <span key={i} style={{height: (h * 100) + '%'}} className={classes} />;
+                return <span key={i} style={{
+                    "--barHeight": h,
+                } as WaveformCSSProperties} className={classes} />;
             })}
         </div>;
     }

From a85c6c67e059a92b4c57dda42cd88217cb3b3c3f Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 12:28:23 +0100
Subject: [PATCH 147/358] Make waveform update match the screen refresh rate

---
 .../views/rooms/VoiceRecordComposerTile.tsx   | 69 ++++++++++++++++---
 .../voice_messages/LiveRecordingClock.tsx     | 49 -------------
 .../voice_messages/LiveRecordingWaveform.tsx  | 60 ----------------
 3 files changed, 59 insertions(+), 119 deletions(-)
 delete mode 100644 src/components/views/voice_messages/LiveRecordingClock.tsx
 delete mode 100644 src/components/views/voice_messages/LiveRecordingWaveform.tsx

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 20d8c9c5d4..6fe6a5ab1c 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -15,19 +15,26 @@ limitations under the License.
 */
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import React, {ReactNode} from "react";
-import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
+import {
+    IRecordingUpdate,
+    RECORDING_PLAYBACK_SAMPLES,
+    RecordingState,
+    VoiceRecording,
+} from "../../../voice/VoiceRecording";
 import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
-import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
+import Waveform from "../voice_messages/Waveform";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arrayFastResample, arraySeed } from "../../../utils/arrays";
+import { percentageOf } from "../../../utils/numbers";
+import Clock from "../voice_messages/Clock";
+import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
-import {MsgType} from "matrix-js-sdk/src/@types/event";
+import { MsgType } from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import CallMediaHandler from "../../../CallMediaHandler";
@@ -39,6 +46,8 @@ interface IProps {
 interface IState {
     recorder?: VoiceRecording;
     recordingPhase?: RecordingState;
+    relHeights: number[];
+    seconds: number;
 }
 
 /**
@@ -46,18 +55,58 @@ interface IState {
  */
 @replaceableComponent("views.rooms.VoiceRecordComposerTile")
 export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
+    private waveform: number[] = [];
+    private seconds = 0;
+    private scheduledAnimationFrame = false;
+
     public constructor(props) {
         super(props);
 
         this.state = {
             recorder: null, // no recording started by default
+            seconds: 0,
+            relHeights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES),
         };
     }
 
+    public componentDidUpdate(prevProps, prevState) {
+        if (!prevState.recorder && this.state.recorder) {
+            this.state.recorder.liveData.onUpdate(this.onRecordingUpdate);
+        }
+    }
+
     public async componentWillUnmount() {
         await VoiceRecordingStore.instance.disposeRecording();
     }
 
+    private onRecordingUpdate = (update: IRecordingUpdate): void => {
+        this.waveform = update.waveform;
+        this.seconds = update.timeSeconds;
+
+        if (this.scheduledAnimationFrame) {
+            return;
+        }
+
+        this.scheduledAnimationFrame = true;
+        // The audio recorder flushes data faster than the screen refresh rate
+        // Using requestAnimationFrame makes sure that we only flush the data
+        // to react once per tick to avoid unneeded work.
+        requestAnimationFrame(() => {
+            // The waveform and the downsample target are pretty close, so we should be fine to
+            // do this, despite the docs on arrayFastResample.
+            const bars = arrayFastResample(Array.from(this.waveform), RECORDING_PLAYBACK_SAMPLES);
+            this.setState({
+                // The incoming data is between zero and one, but typically even screaming into a
+                // microphone won't send you over 0.6, so we artificially adjust the gain for the
+                // waveform. This results in a slightly more cinematic/animated waveform for the
+                // user.
+                relHeights: bars.map(b => percentageOf(b, 0, 0.50)),
+                seconds: this.seconds,
+            });
+            this.scheduledAnimationFrame = false;
+        });
+    }
+
     // called by composer
     public async send() {
         if (!this.state.recorder) {
@@ -178,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         // only other UI is the recording-in-progress UI
         return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
-            <LiveRecordingClock recorder={this.state.recorder} />
-            <LiveRecordingWaveform recorder={this.state.recorder} />
+            <Clock seconds={this.state.seconds} />
+            <Waveform relHeights={this.state.relHeights} />
         </div>;
     }
 
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
deleted file mode 100644
index b82539eb16..0000000000
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
-Copyright 2021 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 React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import Clock from "./Clock";
-
-interface IProps {
-    recorder: VoiceRecording;
-}
-
-interface IState {
-    seconds: number;
-}
-
-/**
- * A clock for a live recording.
- */
-@replaceableComponent("views.voice_messages.LiveRecordingClock")
-export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
-    public constructor(props) {
-        super(props);
-
-        this.state = {seconds: 0};
-        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
-    }
-
-    private onRecordingUpdate = (update: IRecordingUpdate) => {
-        this.setState({seconds: update.timeSeconds});
-    };
-
-    public render() {
-        return <Clock seconds={this.state.seconds} />;
-    }
-}
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
deleted file mode 100644
index aab89f6ab1..0000000000
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
-Copyright 2021 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 React from "react";
-import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {arrayFastResample, arraySeed} from "../../../utils/arrays";
-import {percentageOf} from "../../../utils/numbers";
-import Waveform from "./Waveform";
-
-interface IProps {
-    recorder: VoiceRecording;
-}
-
-interface IState {
-    heights: number[];
-}
-
-/**
- * A waveform which shows the waveform of a live recording
- */
-@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
-export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
-    public constructor(props) {
-        super(props);
-
-        this.state = {heights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES)};
-        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
-    }
-
-    private onRecordingUpdate = (update: IRecordingUpdate) => {
-        // The waveform and the downsample target are pretty close, so we should be fine to
-        // do this, despite the docs on arrayFastResample.
-        const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
-        this.setState({
-            // The incoming data is between zero and one, but typically even screaming into a
-            // microphone won't send you over 0.6, so we artificially adjust the gain for the
-            // waveform. This results in a slightly more cinematic/animated waveform for the
-            // user.
-            heights: bars.map(b => percentageOf(b, 0, 0.50)),
-        });
-    };
-
-    public render() {
-        return <Waveform relHeights={this.state.heights} />;
-    }
-}

From a7daf558bb8f911eaedbf96cd7b8564869624e92 Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Tue, 22 Jun 2021 13:03:55 +0100
Subject: [PATCH 148/358] Use proper capitalisation for Buildkite

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 scripts/fetchdep.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 246add7e31..c7d8daeda5 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -38,7 +38,7 @@ else
 	head=$BUILDKITE_BRANCH
 fi
 
-# If head is set, it will contain on BuildKite either:
+# If head is set, it will contain on Buildkite either:
 #   * "branch" when the author's branch and target branch are in the same repo
 #   * "fork:branch" when the author's branch is in their fork or if this is a Netlify build
 # We can split on `:` into an array to check.

From 660f3900f8a1369a1dabea3d8e273a5c4861e673 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 14:11:41 +0100
Subject: [PATCH 149/358] Change if statement syntax to use positive
 expressions

---
 scripts/fetchdep.sh | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index c7d8daeda5..55f068e49d 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -25,17 +25,15 @@ clone() {
 # First we check if GITHUB_HEAD_REF is defined,
 # Then we check if BUILDKITE_BRANCH is defined,
 # if it isn't we can assume this is a Netlify build
-if [ -z ${BUILDKITE_BRANCH+x} ]; then
-    if [ -z ${GITHUB_HEAD_REF+x} ]; then
-        # Netlify doesn't give us info about the fork so we have to get it from GitHub API
-        apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
-        apiEndpoint+=$REVIEW_ID
-        head=$(curl $apiEndpoint | jq -r '.head.label')
-    else
-    	head=$GITHUB_HEAD_REF
-    fi
-else
+if [ -n "$BUILDKITE_BRANCH" ]; then
 	head=$BUILDKITE_BRANCH
+elif [ -n "$GITHUB_HEAD_REF" ]; then
+    head=$GITHUB_HEAD_REF
+else
+    # Netlify doesn't give us info about the fork so we have to get it from GitHub API
+    apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"
+    apiEndpoint+=$REVIEW_ID
+    head=$(curl $apiEndpoint | jq -r '.head.label')
 fi
 
 # If head is set, it will contain on Buildkite either:
@@ -46,7 +44,8 @@ fi
 # to determine whether the branch is from a fork or not
 BRANCH_ARRAY=(${head//:/ })
 if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
-    if [ -z ${BUILDKITE_BRANCH+x} ]; then
+
+    if [ -n "$GITHUB_HEAD_REF" ]; then
         if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then
             clone $deforg $defrepo $GITHUB_HEAD_REF
         else
@@ -61,9 +60,9 @@ elif [[ "${#BRANCH_ARRAY[@]}" == "2" ]]; then
 fi
 
 # Try the target branch of the push or PR.
-if [ -n ${GITHUB_BASE_REF+x} ]; then
+if [ -n $GITHUB_BASE_REF ]; then
     clone $deforg $defrepo $GITHUB_BASE_REF
-elif [ -n ${BUILDKITE_PULL_REQUEST_BASE_BRANCH+x} ]; then
+elif [ -n $BUILDKITE_PULL_REQUEST_BASE_BRANCH ]; then
     clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH
 fi
 

From c42f0fd2e4774c60283e33c0233f93993604184f Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 14:17:11 +0100
Subject: [PATCH 150/358] split GITHUB_REPOSITORY rather than using
 GITHUB_ACTOR

---
 scripts/fetchdep.sh | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 55f068e49d..7d893a6039 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -49,7 +49,8 @@ if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then
         if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then
             clone $deforg $defrepo $GITHUB_HEAD_REF
         else
-            clone $GITHUB_ACTOR $defrepo $GITHUB_HEAD_REF
+            REPO_ARRAY=(${GITHUB_REPOSITORY//\// })
+            clone $REPO_ARRAY[0] $defrepo $GITHUB_HEAD_REF
         fi
     else
         clone $deforg $defrepo $BUILDKITE_BRANCH

From ded738ce8c820cffb9b2a49f659e5febf130e4f1 Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Tue, 22 Jun 2021 14:57:44 +0100
Subject: [PATCH 151/358] Add spaces around curlies

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/SearchBar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx
index 47994f5251..d71bb8da73 100644
--- a/src/components/views/rooms/SearchBar.tsx
+++ b/src/components/views/rooms/SearchBar.tsx
@@ -19,8 +19,8 @@ import React, { createRef, RefObject } from 'react';
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
-import {Key} from "../../../Keyboard";
-import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
+import { Key } from "../../../Keyboard";
+import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
@@ -95,7 +95,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                 <div className="mx_SearchBar">
                     <div className="mx_SearchBar_buttons" role="radiogroup">
                         <AccessibleButton
-                            className={ thisRoomClasses }
+                            className={thisRoomClasses}
                             onClick={this.onThisRoomClick}
                             aria-checked={this.state.scope === SearchScope.Room}
                             role="radio"
@@ -103,7 +103,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             {_t("This Room")}
                         </AccessibleButton>
                         <AccessibleButton
-                            className={ allRoomsClasses }
+                            className={allRoomsClasses}
                             onClick={this.onAllRoomsClick}
                             aria-checked={this.state.scope === SearchScope.All}
                             role="radio"

From 3c9cd938d00eaba592d3927f26078a9ea844ac33 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 15:29:53 +0100
Subject: [PATCH 152/358] remove spurious full stop

---
 src/i18n/strings/en_EN.json | 2 +-
 src/settings/Settings.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 179b58b617..a9a0d15ac4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -796,7 +796,7 @@
     "Show all rooms in Home": "Show all rooms in Home",
     "Show people in spaces": "Show people in spaces",
     "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.",
-    "Show notification badges for DMs in Spaces.": "Show notification badges for DMs in Spaces.",
+    "Show notification badges for DMs in Spaces": "Show notification badges for DMs in Spaces",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages": "Send and receive voice messages",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index af026f4103..3937b7d821 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -193,7 +193,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_dm_badges": {
-        displayName: _td("Show notification badges for DMs in Spaces."),
+        displayName: _td("Show notification badges for DMs in Spaces"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
         controller: new ReloadOnChangeController(),

From fca2feaae8ad83cdef7eb1d426873e33bc3e9c00 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 16:09:33 +0100
Subject: [PATCH 153/358] make github env variable check first as it is new
 home for ci

---
 scripts/fetchdep.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 7d893a6039..0b15db6a23 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -25,10 +25,10 @@ clone() {
 # First we check if GITHUB_HEAD_REF is defined,
 # Then we check if BUILDKITE_BRANCH is defined,
 # if it isn't we can assume this is a Netlify build
-if [ -n "$BUILDKITE_BRANCH" ]; then
-	head=$BUILDKITE_BRANCH
-elif [ -n "$GITHUB_HEAD_REF" ]; then
+if [ -n "$GITHUB_HEAD_REF" ]; then
     head=$GITHUB_HEAD_REF
+elif [ -n "$BUILDKITE_BRANCH" ]; then
+	head=$BUILDKITE_BRANCH
 else
     # Netlify doesn't give us info about the fork so we have to get it from GitHub API
     apiEndpoint="https://api.github.com/repos/matrix-org/matrix-react-sdk/pulls/"

From b092686453604cb37df602e6fcc796418688c022 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 22 Jun 2021 16:14:01 +0100
Subject: [PATCH 154/358] improve comment grammar

---
 scripts/fetchdep.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
index 0b15db6a23..0990af70ce 100755
--- a/scripts/fetchdep.sh
+++ b/scripts/fetchdep.sh
@@ -24,7 +24,7 @@ clone() {
 # Try the PR author's branch in case it exists on the deps as well.
 # First we check if GITHUB_HEAD_REF is defined,
 # Then we check if BUILDKITE_BRANCH is defined,
-# if it isn't we can assume this is a Netlify build
+# if they aren't we can assume this is a Netlify build
 if [ -n "$GITHUB_HEAD_REF" ]; then
     head=$GITHUB_HEAD_REF
 elif [ -n "$BUILDKITE_BRANCH" ]; then

From 6d92953311ed49567a0dad80e2ff81df9cbcd417 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 17:22:38 +0100
Subject: [PATCH 155/358] Convert bunch of utils to TS

---
 ...tateTransfer.js => EditorStateTransfer.ts} | 30 ++++----
 src/utils/{ErrorUtils.js => ErrorUtils.tsx}   | 16 +++--
 src/utils/{EventUtils.js => EventUtils.ts}    | 17 +++--
 ...yServerUtils.js => IdentityServerUtils.ts} | 11 +--
 ...ssageDiffUtils.js => MessageDiffUtils.tsx} | 68 ++++++++++---------
 .../{PinningUtils.js => PinningUtils.ts}      |  4 +-
 src/utils/{Receipt.js => Receipt.ts}          |  6 +-
 .../{ResizeNotifier.js => ResizeNotifier.ts}  | 45 ++++++------
 ...eMatrixClient.js => createMatrixClient.ts} | 21 +++---
 9 files changed, 120 insertions(+), 98 deletions(-)
 rename src/utils/{EditorStateTransfer.js => EditorStateTransfer.ts} (58%)
 rename src/utils/{ErrorUtils.js => ErrorUtils.tsx} (84%)
 rename src/utils/{EventUtils.js => EventUtils.ts} (85%)
 rename src/utils/{IdentityServerUtils.js => IdentityServerUtils.ts} (82%)
 rename src/utils/{MessageDiffUtils.js => MessageDiffUtils.tsx} (84%)
 rename src/utils/{PinningUtils.js => PinningUtils.ts} (89%)
 rename src/utils/{Receipt.js => Receipt.ts} (83%)
 rename src/utils/{ResizeNotifier.js => ResizeNotifier.ts} (62%)
 rename src/utils/{createMatrixClient.js => createMatrixClient.ts} (76%)

diff --git a/src/utils/EditorStateTransfer.js b/src/utils/EditorStateTransfer.ts
similarity index 58%
rename from src/utils/EditorStateTransfer.js
rename to src/utils/EditorStateTransfer.ts
index c7782a9ea8..42e1a316d6 100644
--- a/src/utils/EditorStateTransfer.js
+++ b/src/utils/EditorStateTransfer.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,36 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+import { SerializedPart } from "../editor/parts";
+import { Caret } from "../editor/caret";
+
 /**
  * Used while editing, to pass the event, and to preserve editor state
  * from one editor instance to another when remounting the editor
  * upon receiving the remote echo for an unsent event.
  */
 export default class EditorStateTransfer {
-    constructor(event) {
-        this._event = event;
-        this._serializedParts = null;
-        this.caret = null;
-    }
+    private serializedParts: SerializedPart[] = null;
+    private caret: Caret = null;
 
-    setEditorState(caret, serializedParts) {
-        this._caret = caret;
-        this._serializedParts = serializedParts;
+    constructor(private readonly event: MatrixEvent) {}
+
+    setEditorState(caret: Caret, serializedParts: SerializedPart[]) {
+        this.caret = caret;
+        this.serializedParts = serializedParts;
     }
 
     hasEditorState() {
-        return !!this._serializedParts;
+        return !!this.serializedParts;
     }
 
     getSerializedParts() {
-        return this._serializedParts;
+        return this.serializedParts;
     }
 
     getCaret() {
-        return this._caret;
+        return this.caret;
     }
 
     getEvent() {
-        return this._event;
+        return this.event;
     }
 }
diff --git a/src/utils/ErrorUtils.js b/src/utils/ErrorUtils.tsx
similarity index 84%
rename from src/utils/ErrorUtils.js
rename to src/utils/ErrorUtils.tsx
index b5bd5b0af0..c39ee21f09 100644
--- a/src/utils/ErrorUtils.js
+++ b/src/utils/ErrorUtils.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018 - 2021 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.
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { _t, _td } from '../languageHandler';
+import React, { ReactNode } from "react";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+
+import { _t, _td, Tags, TranslatedString } from '../languageHandler';
 
 /**
  * Produce a translated error message for a
@@ -30,7 +33,12 @@ import { _t, _td } from '../languageHandler';
  *     for any tags in the strings apart from 'a'
  * @returns {*} Translated string or react component
  */
-export function messageForResourceLimitError(limitType, adminContact, strings, extraTranslations) {
+export function messageForResourceLimitError(
+    limitType: string,
+    adminContact: string,
+    strings: Record<string, string>,
+    extraTranslations?: Tags,
+): TranslatedString {
     let errString = strings[limitType];
     if (errString === undefined) errString = strings[''];
 
@@ -49,7 +57,7 @@ export function messageForResourceLimitError(limitType, adminContact, strings, e
     }
 }
 
-export function messageForSyncError(err) {
+export function messageForSyncError(err: MatrixError | Error): ReactNode {
     if (err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
         const limitError = messageForResourceLimitError(
             err.data.limit_type,
diff --git a/src/utils/EventUtils.js b/src/utils/EventUtils.ts
similarity index 85%
rename from src/utils/EventUtils.js
rename to src/utils/EventUtils.ts
index be21896417..3d9c60d9cd 100644
--- a/src/utils/EventUtils.js
+++ b/src/utils/EventUtils.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 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.
@@ -14,9 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { MatrixEvent, EventStatus } from 'matrix-js-sdk/src/models/event';
+
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
+
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.
  * which effectively checks whether it's a regular message that has been sent and that we
@@ -25,7 +28,7 @@ import shouldHideEvent from "../shouldHideEvent";
  * @param {MatrixEvent} mxEvent The event to check
  * @returns {boolean} true if actionable
  */
-export function isContentActionable(mxEvent) {
+export function isContentActionable(mxEvent: MatrixEvent): boolean {
     const { status: eventStatus } = mxEvent;
 
     // status is SENT before remote-echo, null after
@@ -45,7 +48,7 @@ export function isContentActionable(mxEvent) {
     return false;
 }
 
-export function canEditContent(mxEvent) {
+export function canEditContent(mxEvent: MatrixEvent): boolean {
     if (mxEvent.status === EventStatus.CANCELLED || mxEvent.getType() !== "m.room.message" || mxEvent.isRedacted()) {
         return false;
     }
@@ -56,7 +59,7 @@ export function canEditContent(mxEvent) {
         mxEvent.getSender() === MatrixClientPeg.get().getUserId();
 }
 
-export function canEditOwnEvent(mxEvent) {
+export function canEditOwnEvent(mxEvent: MatrixEvent): boolean {
     // for now we only allow editing
     // your own events. So this just call through
     // In the future though, moderators will be able to
@@ -67,7 +70,7 @@ export function canEditOwnEvent(mxEvent) {
 }
 
 const MAX_JUMP_DISTANCE = 100;
-export function findEditableEvent(room, isForward, fromEventId = undefined) {
+export function findEditableEvent(room: Room, isForward: boolean, fromEventId: string = undefined): MatrixEvent {
     const liveTimeline = room.getLiveTimeline();
     const events = liveTimeline.getEvents().concat(room.getPendingEvents());
     const maxIdx = events.length - 1;
diff --git a/src/utils/IdentityServerUtils.js b/src/utils/IdentityServerUtils.ts
similarity index 82%
rename from src/utils/IdentityServerUtils.js
rename to src/utils/IdentityServerUtils.ts
index 5ece308954..2476adca19 100644
--- a/src/utils/IdentityServerUtils.js
+++ b/src/utils/IdentityServerUtils.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -15,14 +15,15 @@ limitations under the License.
 */
 
 import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
+
 import SdkConfig from '../SdkConfig';
 import {MatrixClientPeg} from '../MatrixClientPeg';
 
-export function getDefaultIdentityServerUrl() {
+export function getDefaultIdentityServerUrl(): string {
     return SdkConfig.get()['validated_server_config']['isUrl'];
 }
 
-export function useDefaultIdentityServer() {
+export function useDefaultIdentityServer(): void {
     const url = getDefaultIdentityServerUrl();
     // Account data change will update localstorage, client, etc through dispatcher
     MatrixClientPeg.get().setAccountData("m.identity_server", {
@@ -30,7 +31,7 @@ export function useDefaultIdentityServer() {
     });
 }
 
-export async function doesIdentityServerHaveTerms(fullUrl) {
+export async function doesIdentityServerHaveTerms(fullUrl: string): Promise<boolean> {
     let terms;
     try {
         terms = await MatrixClientPeg.get().getTerms(SERVICE_TYPES.IS, fullUrl);
@@ -46,7 +47,7 @@ export async function doesIdentityServerHaveTerms(fullUrl) {
     return terms && terms["policies"] && (Object.keys(terms["policies"]).length > 0);
 }
 
-export function doesAccountDataHaveIdentityServer() {
+export function doesAccountDataHaveIdentityServer(): boolean {
     const event = MatrixClientPeg.get().getAccountData("m.identity_server");
     return event && event.getContent() && event.getContent()['base_url'];
 }
diff --git a/src/utils/MessageDiffUtils.js b/src/utils/MessageDiffUtils.tsx
similarity index 84%
rename from src/utils/MessageDiffUtils.js
rename to src/utils/MessageDiffUtils.tsx
index 7398173fdd..b5d5e31432 100644
--- a/src/utils/MessageDiffUtils.js
+++ b/src/utils/MessageDiffUtils.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,31 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
-import DiffMatchPatch from 'diff-match-patch';
-import {DiffDOM} from "diff-dom";
-import { checkBlockNode, bodyToHtml } from "../HtmlUtils";
+import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch';
+import { Action, DiffDOM, IDiff } from "diff-dom";
+import { IContent } from "matrix-js-sdk/src/models/event";
+
+import { bodyToHtml, checkBlockNode, IOptsReturnString } from "../HtmlUtils";
 
 const decodeEntities = (function() {
     let textarea = null;
-    return function(string) {
+    return function(str: string): string {
         if (!textarea) {
             textarea = document.createElement("textarea");
         }
-        textarea.innerHTML = string;
+        textarea.innerHTML = str;
         return textarea.value;
     };
 })();
 
-function textToHtml(text) {
+function textToHtml(text: string): string {
     const container = document.createElement("div");
     container.textContent = text;
     return container.innerHTML;
 }
 
-function getSanitizedHtmlBody(content) {
-    const opts = {
+function getSanitizedHtmlBody(content: IContent): string {
+    const opts: IOptsReturnString = {
         stripReplyFallback: true,
         returnString: true,
     };
@@ -57,21 +59,21 @@ function getSanitizedHtmlBody(content) {
     }
 }
 
-function wrapInsertion(child) {
+function wrapInsertion(child: Node): HTMLElement {
     const wrapper = document.createElement(checkBlockNode(child) ? "div" : "span");
     wrapper.className = "mx_EditHistoryMessage_insertion";
     wrapper.appendChild(child);
     return wrapper;
 }
 
-function wrapDeletion(child) {
+function wrapDeletion(child: Node): HTMLElement {
     const wrapper = document.createElement(checkBlockNode(child) ? "div" : "span");
     wrapper.className = "mx_EditHistoryMessage_deletion";
     wrapper.appendChild(child);
     return wrapper;
 }
 
-function findRefNodes(root, route, isAddition) {
+function findRefNodes(root: Node, route: number[], isAddition = false) {
     let refNode = root;
     let refParentNode;
     const end = isAddition ? route.length - 1 : route.length;
@@ -79,7 +81,7 @@ function findRefNodes(root, route, isAddition) {
         refParentNode = refNode;
         refNode = refNode.childNodes[route[i]];
     }
-    return {refNode, refParentNode};
+    return { refNode, refParentNode };
 }
 
 function diffTreeToDOM(desc) {
@@ -101,7 +103,7 @@ function diffTreeToDOM(desc) {
     }
 }
 
-function insertBefore(parent, nextSibling, child) {
+function insertBefore(parent: Node, nextSibling: Node | null, child: Node): void {
     if (nextSibling) {
         parent.insertBefore(child, nextSibling);
     } else {
@@ -109,7 +111,7 @@ function insertBefore(parent, nextSibling, child) {
     }
 }
 
-function isRouteOfNextSibling(route1, route2) {
+function isRouteOfNextSibling(route1: number[], route2: number[]): boolean {
     // routes are arrays with indices,
     // to be interpreted as a path in the dom tree
 
@@ -127,7 +129,7 @@ function isRouteOfNextSibling(route1, route2) {
     return route2[lastD1Idx] >= route1[lastD1Idx];
 }
 
-function adjustRoutes(diff, remainingDiffs) {
+function adjustRoutes(diff: IDiff, remainingDiffs: IDiff[]): void {
     if (diff.action === "removeTextElement" || diff.action === "removeElement") {
         // as removed text is not removed from the html, but marked as deleted,
         // we need to readjust indices that assume the current node has been removed.
@@ -140,14 +142,14 @@ function adjustRoutes(diff, remainingDiffs) {
     }
 }
 
-function stringAsTextNode(string) {
+function stringAsTextNode(string: string): Text {
     return document.createTextNode(decodeEntities(string));
 }
 
-function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
+function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatch: DiffMatchPatch): void {
     const {refNode, refParentNode} = findRefNodes(originalRootNode, diff.route);
     switch (diff.action) {
-        case "replaceElement": {
+        case Action.ReplaceElement: {
             const container = document.createElement("span");
             const delNode = wrapDeletion(diffTreeToDOM(diff.oldValue));
             const insNode = wrapInsertion(diffTreeToDOM(diff.newValue));
@@ -156,22 +158,22 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
             refNode.parentNode.replaceChild(container, refNode);
             break;
         }
-        case "removeTextElement": {
+        case Action.RemoveTextElement: {
             const delNode = wrapDeletion(stringAsTextNode(diff.value));
             refNode.parentNode.replaceChild(delNode, refNode);
             break;
         }
-        case "removeElement": {
+        case Action.RemoveElement: {
             const delNode = wrapDeletion(diffTreeToDOM(diff.element));
             refNode.parentNode.replaceChild(delNode, refNode);
             break;
         }
-        case "modifyTextElement": {
+        case Action.ModifyTextElement: {
             const textDiffs = diffMathPatch.diff_main(diff.oldValue, diff.newValue);
             diffMathPatch.diff_cleanupSemantic(textDiffs);
             const container = document.createElement("span");
             for (const [modifier, text] of textDiffs) {
-                let textDiffNode = stringAsTextNode(text);
+                let textDiffNode: Node = stringAsTextNode(text);
                 if (modifier < 0) {
                     textDiffNode = wrapDeletion(textDiffNode);
                 } else if (modifier > 0) {
@@ -182,12 +184,12 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
             refNode.parentNode.replaceChild(container, refNode);
             break;
         }
-        case "addElement": {
+        case Action.AddElement: {
             const insNode = wrapInsertion(diffTreeToDOM(diff.element));
             insertBefore(refParentNode, refNode, insNode);
             break;
         }
-        case "addTextElement": {
+        case Action.AddTextElement: {
             // XXX: sometimes diffDOM says insert a newline when there shouldn't be one
             // but we must insert the node anyway so that we don't break the route child IDs.
             // See https://github.com/fiduswriter/diffDOM/issues/100
@@ -197,11 +199,11 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
         }
         // e.g. when changing a the href of a link,
         // show the link with old href as removed and with the new href as added
-        case "removeAttribute":
-        case "addAttribute":
-        case "modifyAttribute": {
+        case Action.RemoveAttribute:
+        case Action.AddAttribute:
+        case Action.ModifyAttribute: {
             const delNode = wrapDeletion(refNode.cloneNode(true));
-            const updatedNode = refNode.cloneNode(true);
+            const updatedNode = refNode.cloneNode(true) as HTMLElement;
             if (diff.action === "addAttribute" || diff.action === "modifyAttribute") {
                 updatedNode.setAttribute(diff.name, diff.newValue);
             } else {
@@ -220,12 +222,12 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
     }
 }
 
-function routeIsEqual(r1, r2) {
+function routeIsEqual(r1: number[], r2: number[]): boolean {
     return r1.length === r2.length && !r1.some((e, i) => e !== r2[i]);
 }
 
 // workaround for https://github.com/fiduswriter/diffDOM/issues/90
-function filterCancelingOutDiffs(originalDiffActions) {
+function filterCancelingOutDiffs(originalDiffActions: IDiff[]): IDiff[] {
     const diffActions = originalDiffActions.slice();
 
     for (let i = 0; i < diffActions.length; ++i) {
@@ -252,7 +254,7 @@ function filterCancelingOutDiffs(originalDiffActions) {
  * @param {object} editContent the content for the edit message
  * @return {object} a react element similar to what `bodyToHtml` returns
  */
-export function editBodyDiffToHtml(originalContent, editContent) {
+export function editBodyDiffToHtml(originalContent: IContent, editContent: IContent): ReactNode {
     // wrap the body in a div, DiffDOM needs a root element
     const originalBody = `<div>${getSanitizedHtmlBody(originalContent)}</div>`;
     const editBody = `<div>${getSanitizedHtmlBody(editContent)}</div>`;
diff --git a/src/utils/PinningUtils.js b/src/utils/PinningUtils.ts
similarity index 89%
rename from src/utils/PinningUtils.js
rename to src/utils/PinningUtils.ts
index 90d26cc988..ec1eeccf1f 100644
--- a/src/utils/PinningUtils.js
+++ b/src/utils/PinningUtils.ts
@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 export default class PinningUtils {
     /**
      * Determines if the given event may be pinned.
      * @param {MatrixEvent} event The event to check.
      * @return {boolean} True if the event may be pinned, false otherwise.
      */
-    static isPinnable(event) {
+    static isPinnable(event: MatrixEvent): boolean {
         if (!event) return false;
         if (event.getType() !== "m.room.message") return false;
         if (event.isRedacted()) return false;
diff --git a/src/utils/Receipt.js b/src/utils/Receipt.ts
similarity index 83%
rename from src/utils/Receipt.js
rename to src/utils/Receipt.ts
index d88c67fb18..2a626decc4 100644
--- a/src/utils/Receipt.js
+++ b/src/utils/Receipt.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2016 - 2021 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.
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 /**
  * Given MatrixEvent containing receipts, return the first
  * read receipt from the given user ID, or null if no such
@@ -23,7 +25,7 @@ limitations under the License.
  * @param {string} userId A user ID
  * @returns {Object} Read receipt
  */
-export function findReadReceiptFromUserId(receiptEvent, userId) {
+export function findReadReceiptFromUserId(receiptEvent: MatrixEvent, userId: string): object | null {
     const receiptKeys = Object.keys(receiptEvent.getContent());
     for (let i = 0; i < receiptKeys.length; ++i) {
         const rcpt = receiptEvent.getContent()[receiptKeys[i]];
diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.ts
similarity index 62%
rename from src/utils/ResizeNotifier.js
rename to src/utils/ResizeNotifier.ts
index 4d46d10f6c..8bb7f52e57 100644
--- a/src/utils/ResizeNotifier.js
+++ b/src/utils/ResizeNotifier.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2021 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.
@@ -22,59 +22,58 @@ limitations under the License.
  * Fires when the middle panel has been resized by a pixel.
  * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy"
  */
+
 import { EventEmitter } from "events";
 import { throttle } from "lodash";
 
 export default class ResizeNotifier extends EventEmitter {
-    constructor() {
-        super();
-        // with default options, will call fn once at first call, and then every x ms
-        // if there was another call in that timespan
-        this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
-        this._isResizing = false;
-    }
+    private _isResizing = false;
 
-    get isResizing() {
+    // with default options, will call fn once at first call, and then every x ms
+    // if there was another call in that timespan
+    private throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
+
+    public get isResizing() {
         return this._isResizing;
     }
 
-    startResizing() {
+    public startResizing() {
         this._isResizing = true;
         this.emit("isResizing", true);
     }
 
-    stopResizing() {
+    public stopResizing() {
         this._isResizing = false;
         this.emit("isResizing", false);
     }
 
-    _noisyMiddlePanel() {
+    private noisyMiddlePanel() {
         this.emit("middlePanelResizedNoisy");
     }
 
-    _updateMiddlePanel() {
-        this._throttledMiddlePanel();
-        this._noisyMiddlePanel();
+    private updateMiddlePanel() {
+        this.throttledMiddlePanel();
+        this.noisyMiddlePanel();
     }
 
     // can be called in quick succession
-    notifyLeftHandleResized() {
+    public notifyLeftHandleResized() {
         // don't emit event for own region
-        this._updateMiddlePanel();
+        this.updateMiddlePanel();
     }
 
     // can be called in quick succession
-    notifyRightHandleResized() {
-        this._updateMiddlePanel();
+    public notifyRightHandleResized() {
+        this.updateMiddlePanel();
     }
 
-    notifyTimelineHeightChanged() {
-        this._updateMiddlePanel();
+    public notifyTimelineHeightChanged() {
+        this.updateMiddlePanel();
     }
 
     // can be called in quick succession
-    notifyWindowResized() {
-        this._updateMiddlePanel();
+    public notifyWindowResized() {
+        this.updateMiddlePanel();
     }
 }
 
diff --git a/src/utils/createMatrixClient.js b/src/utils/createMatrixClient.ts
similarity index 76%
rename from src/utils/createMatrixClient.js
rename to src/utils/createMatrixClient.ts
index f5e196d846..caaf75616d 100644
--- a/src/utils/createMatrixClient.js
+++ b/src/utils/createMatrixClient.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2017 - 2021 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.
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {createClient} from "matrix-js-sdk/src/matrix";
-import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
-import {WebStorageSessionStore} from "matrix-js-sdk/src/store/session/webstorage";
-import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";
+import { createClient, ICreateClientOpts } from "matrix-js-sdk/src/matrix";
+import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import { WebStorageSessionStore } from "matrix-js-sdk/src/store/session/webstorage";
+import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
 
 const localStorage = window.localStorage;
 
@@ -41,8 +41,8 @@ try {
  *
  * @returns {MatrixClient} the newly-created MatrixClient
  */
-export default function createMatrixClient(opts) {
-    const storeOpts = {
+export default function createMatrixClient(opts: ICreateClientOpts) {
+    const storeOpts: Partial<ICreateClientOpts> = {
         useAuthorizationHeader: true,
     };
 
@@ -65,9 +65,10 @@ export default function createMatrixClient(opts) {
         );
     }
 
-    opts = Object.assign(storeOpts, opts);
-
-    return createClient(opts);
+    return createClient({
+        ...storeOpts,
+        ...opts,
+    });
 }
 
 createMatrixClient.indexedDbWorkerScript = null;

From a839d0f3963eb00f22db2f205c4d285d34125a3a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 17:23:13 +0100
Subject: [PATCH 156/358] More typescript conversion

---
 package.json                                  |  1 +
 src/@types/diff-dom.ts                        | 50 +++++++++++++++++
 ...Tracker.js => DecryptionFailureTracker.ts} | 53 ++++++++++---------
 src/HtmlUtils.tsx                             | 50 +++++++++--------
 src/{Rooms.js => Rooms.ts}                    | 16 +++---
 src/{Unread.js => Unread.ts}                  | 47 +++++++++-------
 src/components/structures/MatrixChat.tsx      |  2 +-
 src/components/views/rooms/AuxPanel.tsx       |  2 +-
 src/components/views/rooms/EventTile.tsx      | 27 +++++-----
 src/components/views/rooms/RoomList.tsx       |  2 +-
 src/components/views/rooms/RoomSublist.tsx    |  2 +-
 src/languageHandler.tsx                       |  2 +-
 yarn.lock                                     |  5 ++
 13 files changed, 166 insertions(+), 93 deletions(-)
 create mode 100644 src/@types/diff-dom.ts
 rename src/{DecryptionFailureTracker.js => DecryptionFailureTracker.ts} (80%)
 rename src/{Rooms.js => Rooms.ts} (89%)
 rename src/{Unread.js => Unread.ts} (75%)

diff --git a/package.json b/package.json
index f232d4301b..756604269d 100644
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "@sinonjs/fake-timers": "^7.0.2",
     "@types/classnames": "^2.2.11",
     "@types/counterpart": "^0.18.1",
+    "@types/diff-match-patch": "^1.0.5",
     "@types/flux": "^3.1.9",
     "@types/jest": "^26.0.20",
     "@types/linkifyjs": "^2.1.3",
diff --git a/src/@types/diff-dom.ts b/src/@types/diff-dom.ts
new file mode 100644
index 0000000000..884ee6126d
--- /dev/null
+++ b/src/@types/diff-dom.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2021 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.
+*/
+
+declare module "diff-dom" {
+    enum Action {
+        AddElement = "addElement",
+        AddTextElement = "addTextElement",
+        RemoveTextElement = "removeTextElement",
+        RemoveElement = "removeElement",
+        ReplaceElement = "replaceElement",
+        ModifyTextElement = "modifyTextElement",
+        AddAttribute = "addAttribute",
+        RemoveAttribute = "removeAttribute",
+        ModifyAttribute = "modifyAttribute",
+    }
+
+    export interface IDiff {
+        action: Action;
+        name: string;
+        text?: string;
+        route: number[];
+        value: string;
+        element: unknown;
+        oldValue: string;
+        newValue: string;
+    }
+
+    interface IOpts {
+    }
+
+    export class DiffDOM {
+        public constructor(opts?: IOpts);
+        public apply(tree: unknown, diffs: IDiff[]): unknown;
+        public undo(tree: unknown, diffs: IDiff[]): unknown;
+        public diff(a: HTMLElement | string, b: HTMLElement | string): IDiff[];
+    }
+}
diff --git a/src/DecryptionFailureTracker.js b/src/DecryptionFailureTracker.ts
similarity index 80%
rename from src/DecryptionFailureTracker.js
rename to src/DecryptionFailureTracker.ts
index b02a5e937b..960d844e9e 100644
--- a/src/DecryptionFailureTracker.js
+++ b/src/DecryptionFailureTracker.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018 - 2021 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.
@@ -14,34 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 export class DecryptionFailure {
-    constructor(failedEventId, errorCode) {
-        this.failedEventId = failedEventId;
-        this.errorCode = errorCode;
+    public readonly ts: number;
+
+    constructor(public readonly failedEventId: string, public readonly errorCode: string) {
         this.ts = Date.now();
     }
 }
 
+type Fn = (count: number, trackedErrCode: string) => void;
+type ErrCodeMapFn = (errcode: string) => string;
+
 export class DecryptionFailureTracker {
     // Array of items of type DecryptionFailure. Every `CHECK_INTERVAL_MS`, this list
     // is checked for failures that happened > `GRACE_PERIOD_MS` ago. Those that did
     // are accumulated in `failureCounts`.
-    failures = [];
+    public failures: DecryptionFailure[] = [];
 
     // A histogram of the number of failures that will be tracked at the next tracking
     // interval, split by failure error code.
-    failureCounts = {
+    public failureCounts: Record<string, number> = {
         // [errorCode]: 42
     };
 
     // Event IDs of failures that were tracked previously
-    trackedEventHashMap = {
+    public trackedEventHashMap: Record<string, boolean> = {
         // [eventId]: true
     };
 
     // Set to an interval ID when `start` is called
-    checkInterval = null;
-    trackInterval = null;
+    public checkInterval: NodeJS.Timeout = null;
+    public trackInterval: NodeJS.Timeout = null;
 
     // Spread the load on `Analytics` by tracking at a low frequency, `TRACK_INTERVAL_MS`.
     static TRACK_INTERVAL_MS = 60000;
@@ -67,7 +73,7 @@ export class DecryptionFailureTracker {
      * @param {function?} errorCodeMapFn The function used to map error codes to the
      * trackedErrorCode. If not provided, the `.code` of errors will be used.
      */
-    constructor(fn, errorCodeMapFn) {
+    constructor(private readonly fn: Fn, private readonly errorCodeMapFn?: ErrCodeMapFn) {
         if (!fn || typeof fn !== 'function') {
             throw new Error('DecryptionFailureTracker requires tracking function');
         }
@@ -75,9 +81,6 @@ export class DecryptionFailureTracker {
         if (errorCodeMapFn && typeof errorCodeMapFn !== 'function') {
             throw new Error('DecryptionFailureTracker second constructor argument should be a function');
         }
-
-        this._trackDecryptionFailure = fn;
-        this._mapErrorCode = errorCodeMapFn;
     }
 
     // loadTrackedEventHashMap() {
@@ -88,7 +91,7 @@ export class DecryptionFailureTracker {
     //     localStorage.setItem('mx-decryption-failure-event-id-hashes', JSON.stringify(this.trackedEventHashMap));
     // }
 
-    eventDecrypted(e, err) {
+    public eventDecrypted(e: MatrixEvent, err: MatrixError | Error): void {
         if (err) {
             this.addDecryptionFailure(new DecryptionFailure(e.getId(), err.code));
         } else {
@@ -97,18 +100,18 @@ export class DecryptionFailureTracker {
         }
     }
 
-    addDecryptionFailure(failure) {
+    public addDecryptionFailure(failure: DecryptionFailure): void {
         this.failures.push(failure);
     }
 
-    removeDecryptionFailuresForEvent(e) {
+    public removeDecryptionFailuresForEvent(e: MatrixEvent): void {
         this.failures = this.failures.filter((f) => f.failedEventId !== e.getId());
     }
 
     /**
      * Start checking for and tracking failures.
      */
-    start() {
+    public start(): void {
         this.checkInterval = setInterval(
             () => this.checkFailures(Date.now()),
             DecryptionFailureTracker.CHECK_INTERVAL_MS,
@@ -123,7 +126,7 @@ export class DecryptionFailureTracker {
     /**
      * Clear state and stop checking for and tracking failures.
      */
-    stop() {
+    public stop(): void {
         clearInterval(this.checkInterval);
         clearInterval(this.trackInterval);
 
@@ -132,11 +135,11 @@ export class DecryptionFailureTracker {
     }
 
     /**
-     * Mark failures that occured before nowTs - GRACE_PERIOD_MS as failures that should be
+     * Mark failures that occurred before nowTs - GRACE_PERIOD_MS as failures that should be
      * tracked. Only mark one failure per event ID.
      * @param {number} nowTs the timestamp that represents the time now.
      */
-    checkFailures(nowTs) {
+    public checkFailures(nowTs: number): void {
         const failuresGivenGrace = [];
         const failuresNotReady = [];
         while (this.failures.length > 0) {
@@ -175,10 +178,10 @@ export class DecryptionFailureTracker {
 
         const dedupedFailures = dedupedFailuresMap.values();
 
-        this._aggregateFailures(dedupedFailures);
+        this.aggregateFailures(dedupedFailures);
     }
 
-    _aggregateFailures(failures) {
+    private aggregateFailures(failures: DecryptionFailure[]): void {
         for (const failure of failures) {
             const errorCode = failure.errorCode;
             this.failureCounts[errorCode] = (this.failureCounts[errorCode] || 0) + 1;
@@ -189,12 +192,12 @@ export class DecryptionFailureTracker {
      * If there are failures that should be tracked, call the given trackDecryptionFailure
      * function with the number of failures that should be tracked.
      */
-    trackFailures() {
+    public trackFailures(): void {
         for (const errorCode of Object.keys(this.failureCounts)) {
             if (this.failureCounts[errorCode] > 0) {
-                const trackedErrorCode = this._mapErrorCode ? this._mapErrorCode(errorCode) : errorCode;
+                const trackedErrorCode = this.errorCodeMapFn ? this.errorCodeMapFn(errorCode) : errorCode;
 
-                this._trackDecryptionFailure(this.failureCounts[errorCode], trackedErrorCode);
+                this.fn(this.failureCounts[errorCode], trackedErrorCode);
                 this.failureCounts[errorCode] = 0;
             }
         }
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index ef5ac383e3..5803029030 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -17,11 +17,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import sanitizeHtml from 'sanitize-html';
-import { IExtendedSanitizeOptions } from './@types/sanitize-html';
+import cheerio from 'cheerio';
 import * as linkify from 'linkifyjs';
-import linkifyMatrix from './linkify-matrix';
 import _linkifyElement from 'linkifyjs/element';
 import _linkifyString from 'linkifyjs/string';
 import classNames from 'classnames';
@@ -29,13 +28,15 @@ import EMOJIBASE_REGEX from 'emojibase-regex';
 import url from 'url';
 import katex from 'katex';
 import { AllHtmlEntities } from 'html-entities';
-import SettingsStore from './settings/SettingsStore';
-import cheerio from 'cheerio';
+import { IContent } from 'matrix-js-sdk/src/models/event';
 
-import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks";
-import {SHORTCODE_TO_EMOJI, getEmojiFromUnicode} from "./emoji";
+import { IExtendedSanitizeOptions } from './@types/sanitize-html';
+import linkifyMatrix from './linkify-matrix';
+import SettingsStore from './settings/SettingsStore';
+import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
+import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji";
 import ReplyThread from "./components/views/elements/ReplyThread";
-import {mediaFromMxc} from "./customisations/Media";
+import { mediaFromMxc } from "./customisations/Media";
 
 linkifyMatrix(linkify);
 
@@ -66,7 +67,7 @@ export const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'
  * need emojification.
  * unicodeToImage uses this function.
  */
-function mightContainEmoji(str: string) {
+function mightContainEmoji(str: string): boolean {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
@@ -76,7 +77,7 @@ function mightContainEmoji(str: string) {
  * @param {String} char The emoji character
  * @return {String} The shortcode (such as :thumbup:)
  */
-export function unicodeToShortcode(char: string) {
+export function unicodeToShortcode(char: string): string {
     const data = getEmojiFromUnicode(char);
     return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : '');
 }
@@ -87,7 +88,7 @@ export function unicodeToShortcode(char: string) {
  * @param {String} shortcode The shortcode (such as :thumbup:)
  * @return {String} The emoji character; null if none exists
  */
-export function shortcodeToUnicode(shortcode: string) {
+export function shortcodeToUnicode(shortcode: string): string {
     shortcode = shortcode.slice(1, shortcode.length - 1);
     const data = SHORTCODE_TO_EMOJI.get(shortcode);
     return data ? data.unicode : null;
@@ -124,13 +125,13 @@ export function processHtmlForSending(html: string): string {
  * Given an untrusted HTML string, return a React node with an sanitized version
  * of that HTML.
  */
-export function sanitizedHtmlNode(insaneHtml: string) {
+export function sanitizedHtmlNode(insaneHtml: string): ReactNode {
     const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
 
     return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
 }
 
-export function getHtmlText(insaneHtml: string) {
+export function getHtmlText(insaneHtml: string): string {
     return sanitizeHtml(insaneHtml, {
         allowedTags: [],
         allowedAttributes: {},
@@ -148,7 +149,7 @@ export function getHtmlText(insaneHtml: string) {
  * other places we need to sanitise URLs.
  * @return true if permitted, otherwise false
  */
-export function isUrlPermitted(inputUrl: string) {
+export function isUrlPermitted(inputUrl: string): boolean {
     try {
         const parsed = url.parse(inputUrl);
         if (!parsed.protocol) return false;
@@ -351,13 +352,6 @@ class HtmlHighlighter extends BaseHighlighter<string> {
     }
 }
 
-interface IContent {
-    format?: string;
-    // eslint-disable-next-line camelcase
-    formatted_body?: string;
-    body: string;
-}
-
 interface IOpts {
     highlightLink?: string;
     disableBigEmoji?: boolean;
@@ -367,6 +361,14 @@ interface IOpts {
     ref?: React.Ref<any>;
 }
 
+export interface IOptsReturnNode extends IOpts {
+    returnString: false;
+}
+
+export interface IOptsReturnString extends IOpts {
+    returnString: true;
+}
+
 /* turn a matrix event body into html
  *
  * content: 'content' of the MatrixEvent
@@ -380,6 +382,8 @@ interface IOpts {
  * opts.forComposerQuote: optional param to lessen the url rewriting done by sanitization, for quoting into composer
  * opts.ref: React ref to attach to any React components returned (not compatible with opts.returnString)
  */
+export function bodyToHtml(content: IContent, highlights: string[], opts: IOptsReturnString): string;
+export function bodyToHtml(content: IContent, highlights: string[], opts: IOptsReturnNode): ReactNode;
 export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts = {}) {
     const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
     let bodyHasEmoji = false;
@@ -523,7 +527,7 @@ export function linkifyElement(element: HTMLElement, options = linkifyMatrix.opt
  * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
  * @returns {string}
  */
-export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrix.options) {
+export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrix.options): string {
     return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams);
 }
 
@@ -534,7 +538,7 @@ export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatri
  * @param {Node} node
  * @returns {bool}
  */
-export function checkBlockNode(node: Node) {
+export function checkBlockNode(node: Node): boolean {
     switch (node.nodeName) {
         case "H1":
         case "H2":
diff --git a/src/Rooms.js b/src/Rooms.ts
similarity index 89%
rename from src/Rooms.js
rename to src/Rooms.ts
index 955498faaa..19d1c9ee05 100644
--- a/src/Rooms.js
+++ b/src/Rooms.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2021 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.
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { MatrixClientPeg } from './MatrixClientPeg';
 
 /**
  * Given a room object, return the alias we should use for it,
@@ -25,11 +27,11 @@ import {MatrixClientPeg} from './MatrixClientPeg';
  * @param {Object} room The room object
  * @returns {string} A display alias for the given room
  */
-export function getDisplayAliasForRoom(room) {
+export function getDisplayAliasForRoom(room: Room): string {
     return room.getCanonicalAlias() || room.getAltAliases()[0];
 }
 
-export function looksLikeDirectMessageRoom(room, myUserId) {
+export function looksLikeDirectMessageRoom(room: Room, myUserId: string): boolean {
     const myMembership = room.getMyMembership();
     const me = room.getMember(myUserId);
 
@@ -48,7 +50,7 @@ export function looksLikeDirectMessageRoom(room, myUserId) {
     return false;
 }
 
-export function guessAndSetDMRoom(room, isDirect) {
+export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise<void> {
     let newTarget;
     if (isDirect) {
         const guessedUserId = guessDMRoomTargetId(
@@ -70,7 +72,7 @@ export function guessAndSetDMRoom(room, isDirect) {
                    this room as a DM room
  * @returns {object} A promise
  */
-export function setDMRoom(roomId, userId) {
+export function setDMRoom(roomId: string, userId: string): Promise<void> {
     if (MatrixClientPeg.get().isGuest()) {
         return Promise.resolve();
     }
@@ -114,7 +116,7 @@ export function setDMRoom(roomId, userId) {
  * @param {string} myUserId User ID of the current user
  * @returns {string} User ID of the user that the room is probably a DM with
  */
-function guessDMRoomTargetId(room, myUserId) {
+function guessDMRoomTargetId(room: Room, myUserId: string): string {
     let oldestTs;
     let oldestUser;
 
diff --git a/src/Unread.js b/src/Unread.ts
similarity index 75%
rename from src/Unread.js
rename to src/Unread.ts
index 25c425aa9a..b733f4175a 100644
--- a/src/Unread.js
+++ b/src/Unread.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2021 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.
@@ -14,9 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from "./MatrixClientPeg";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
+
+import { MatrixClientPeg } from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
-import {haveTileForEvent} from "./components/views/rooms/EventTile";
+import { haveTileForEvent } from "./components/views/rooms/EventTile";
 
 /**
  * Returns true iff this event arriving in a room should affect the room's
@@ -25,28 +29,33 @@ import {haveTileForEvent} from "./components/views/rooms/EventTile";
  * @param {Object} ev The event
  * @returns {boolean} True if the given event should affect the unread message count
  */
-export function eventTriggersUnreadCount(ev) {
+export function eventTriggersUnreadCount(ev: MatrixEvent): boolean {
     if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) {
         return false;
-    } else if (ev.getType() == 'm.room.member') {
-        return false;
-    } else if (ev.getType() == 'm.room.third_party_invite') {
-        return false;
-    } else if (ev.getType() == 'm.call.answer' || ev.getType() == 'm.call.hangup') {
-        return false;
-    } else if (ev.getType() == 'm.room.message' && ev.getContent().msgtype == 'm.notify') {
-        return false;
-    } else if (ev.getType() == 'm.room.aliases' || ev.getType() == 'm.room.canonical_alias') {
-        return false;
-    } else if (ev.getType() == 'm.room.server_acl') {
-        return false;
-    } else if (ev.isRedacted()) {
-        return false;
     }
+
+    switch (ev.getType()) {
+        case EventType.RoomMember:
+        case EventType.RoomThirdPartyInvite:
+        case EventType.CallAnswer:
+        case EventType.CallHangup:
+        case EventType.RoomAliases:
+        case EventType.RoomCanonicalAlias:
+        case EventType.RoomServerAcl:
+            return false;
+
+        case EventType.RoomMessage:
+            if (ev.getContent().msgtype === MsgType.Notice) {
+                return false;
+            }
+            break;
+    }
+
+    if (ev.isRedacted()) return false;
     return haveTileForEvent(ev);
 }
 
-export function doesRoomHaveUnreadMessages(room) {
+export function doesRoomHaveUnreadMessages(room: Room): boolean {
     const myUserId = MatrixClientPeg.get().getUserId();
 
     // get the most recent read receipt sent by our account.
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 0af2d3d635..27d628fecf 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1461,7 +1461,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
 
         const dft = new DecryptionFailureTracker((total, errorCode) => {
-            Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total);
+            Analytics.trackEvent('E2E', 'Decryption failure', errorCode, String(total));
             CountlyAnalytics.instance.track("decryption_failure", { errorCode }, null, { sum: total });
         }, (errorCode) => {
             // Map JS-SDK error codes to tracker codes for aggregation
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 74609cca13..cb01df05d1 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -23,7 +23,7 @@ import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { UIFeature } from "../../../settings/UIFeature";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
 import CallViewForRoom from '../voip/CallViewForRoom';
 import { objectHasDiff } from "../../../utils/objects";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 0099bf73fb..3d674efe04 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 
 import React from 'react';
 import classNames from "classnames";
-
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
@@ -29,24 +28,24 @@ import { hasText } from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout} from "../../../settings/Layout";
-import {formatTime} from "../../../DateUtils";
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
+import { Layout } from "../../../settings/Layout";
+import { formatTime } from "../../../DateUtils";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { ALL_RULE_TYPES } from "../../../mjolnir/BanList";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {E2E_STATE} from "./E2EIcon";
-import {toRem} from "../../../utils/units";
-import {WidgetType} from "../../../widgets/WidgetType";
+import { E2E_STATE } from "./E2EIcon";
+import { toRem } from "../../../utils/units";
+import { WidgetType } from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
-import {WIDGET_LAYOUT_EVENT_TYPE} from "../../../stores/widgets/WidgetLayoutStore";
-import {objectHasDiff} from "../../../utils/objects";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { WIDGET_LAYOUT_EVENT_TYPE } from "../../../stores/widgets/WidgetLayoutStore";
+import { objectHasDiff } from "../../../utils/objects";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Tooltip from "../elements/Tooltip";
-import { EditorStateTransfer } from "../../../utils/EditorStateTransfer";
+import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "./NotificationBadge";
-import {ComposerInsertPayload} from "../../../dispatcher/payloads/ComposerInsertPayload";
+import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from '../../../dispatcher/actions';
 
 const eventTileTypes = {
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 5a1c3a24b3..d277a69907 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -22,7 +22,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import { _t, _td } from "../../../languageHandler";
 import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import RoomViewStore from "../../../stores/RoomViewStore";
 import { ITagMap } from "../../../stores/room-list/algorithms/models";
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index ba8bbffbcc..61166b4230 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -45,7 +45,7 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import { polyfillTouchEvent } from "../../../@types/polyfill";
-import { ResizeNotifier } from "../../../utils/ResizeNotifier";
+import ResizeNotifier from "../../../utils/ResizeNotifier";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
 import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx
index 16950dc008..cc129fb6b9 100644
--- a/src/languageHandler.tsx
+++ b/src/languageHandler.tsx
@@ -112,7 +112,7 @@ export interface IVariables {
     [key: string]: SubstitutionValue;
 }
 
-type Tags = Record<string, SubstitutionValue>;
+export type Tags = Record<string, SubstitutionValue>;
 
 export type TranslatedString = string | React.ReactNode;
 
diff --git a/yarn.lock b/yarn.lock
index 952d08d0f6..5bd409e612 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1479,6 +1479,11 @@
   resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"
   integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ==
 
+"@types/diff-match-patch@^1.0.32":
+  version "1.0.32"
+  resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"
+  integrity sha512-bPYT5ECFiblzsVzyURaNhljBH2Gh1t9LowgUwciMrNAhFewLkHT2H0Mto07Y4/3KCOGZHRQll3CTtQZ0X11D/A==
+
 "@types/events@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"

From 4a667942368305799e34ac8b0ea7d569a5207a36 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 17:26:19 +0100
Subject: [PATCH 157/358] update copy

---
 src/i18n/strings/en_EN.json | 2 +-
 src/settings/Settings.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a9a0d15ac4..17160a6b89 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -796,7 +796,7 @@
     "Show all rooms in Home": "Show all rooms in Home",
     "Show people in spaces": "Show people in spaces",
     "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.",
-    "Show notification badges for DMs in Spaces": "Show notification badges for DMs in Spaces",
+    "Show notification badges for People in Spaces": "Show notification badges for People in Spaces",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages": "Send and receive voice messages",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 3937b7d821..f22882abc4 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -193,7 +193,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         controller: new ReloadOnChangeController(),
     },
     "feature_spaces.space_dm_badges": {
-        displayName: _td("Show notification badges for DMs in Spaces"),
+        displayName: _td("Show notification badges for People in Spaces"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
         controller: new ReloadOnChangeController(),

From 28c61cca2798f0c41fea47a468057a4a9ecf2c58 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 17:56:52 +0100
Subject: [PATCH 158/358] Remove pinned resolution for @types/react to 16.x

---
 package.json |  3 ---
 yarn.lock    | 10 +---------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 8ebb90f342..9ca1224baa 100644
--- a/package.json
+++ b/package.json
@@ -167,9 +167,6 @@
     "typescript": "^4.1.3",
     "walk": "^2.3.14"
   },
-  "resolutions": {
-    "**/@types/react": "^16.14"
-  },
   "jest": {
     "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
diff --git a/yarn.lock b/yarn.lock
index 4f17b63337..b19a188014 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1634,15 +1634,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.14":
-  version "16.14.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
-  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17.0.2":
+"@types/react@*", "@types/react@^17.0.2":
   version "17.0.11"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
   integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==

From cd04fb76dc3dd2aa4b921e61a367015fd104f7df Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 18:01:29 +0100
Subject: [PATCH 159/358] Fix type error

---
 src/stores/SpaceStore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index d371086b45..f11589485a 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -335,7 +335,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         //     rootSpaces.push(space);
         // });
 
-        this.orphanedRooms = new Set(orphanedRooms);
+        this.orphanedRooms = new Set(orphanedRooms.map(r => r.roomId));
         this.rootSpaces = rootSpaces;
         this.parentMap = backrefs;
 

From cecf0ce299b7208fc2fe03e54c7c7adbeb06a98d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 20:41:26 +0100
Subject: [PATCH 160/358] Convert MessagePanel, TimelinePanel, ScrollPanel, and
 more to Typescript

---
 src/@types/global.d.ts                        |  32 +-
 .../structures/AutoHideScrollbar.tsx          |   6 +-
 .../{MessagePanel.js => MessagePanel.tsx}     | 723 +++++++++---------
 .../structures/NotificationPanel.tsx          |   3 +-
 src/components/structures/RoomDirectory.tsx   |  17 +-
 src/components/structures/RoomView.tsx        |   7 +-
 .../{ScrollPanel.js => ScrollPanel.tsx}       | 431 ++++++-----
 .../{TimelinePanel.js => TimelinePanel.tsx}   | 637 ++++++++-------
 .../views/dialogs/ForwardDialog.tsx           |  33 +-
 .../{ErrorBoundary.js => ErrorBoundary.tsx}   |  35 +-
 .../views/elements/EventListSummary.tsx       |  14 +-
 .../views/elements/EventTilePreview.tsx       |  11 +-
 .../views/elements/MemberEventListSummary.tsx |  14 +-
 .../{DateSeparator.js => DateSeparator.tsx}   |  26 +-
 ...ErrorBoundary.js => TileErrorBoundary.tsx} |  28 +-
 src/components/views/rooms/EventTile.tsx      |  18 +-
 16 files changed, 1087 insertions(+), 948 deletions(-)
 rename src/components/structures/{MessagePanel.js => MessagePanel.tsx} (64%)
 rename src/components/structures/{ScrollPanel.js => ScrollPanel.tsx} (73%)
 rename src/components/structures/{TimelinePanel.js => TimelinePanel.tsx} (75%)
 rename src/components/views/elements/{ErrorBoundary.js => ErrorBoundary.tsx} (80%)
 rename src/components/views/messages/{DateSeparator.js => DateSeparator.tsx} (82%)
 rename src/components/views/messages/{TileErrorBoundary.js => TileErrorBoundary.tsx} (77%)

diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 7eff341095..f75c17aaf4 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -16,6 +16,7 @@ limitations under the License.
 
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
 import * as ModernizrStatic from "modernizr";
+
 import ContentMessages from "../ContentMessages";
 import { IMatrixClientPeg } from "../MatrixClientPeg";
 import ToastStore from "../stores/ToastStore";
@@ -23,25 +24,25 @@ import DeviceListener from "../DeviceListener";
 import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
 import { PlatformPeg } from "../PlatformPeg";
 import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
-import {IntegrationManagers} from "../integrations/IntegrationManagers";
-import {ModalManager} from "../Modal";
+import { IntegrationManagers } from "../integrations/IntegrationManagers";
+import { ModalManager } from "../Modal";
 import SettingsStore from "../settings/SettingsStore";
-import {ActiveRoomObserver} from "../ActiveRoomObserver";
-import {Notifier} from "../Notifier";
-import type {Renderer} from "react-dom";
+import { ActiveRoomObserver } from "../ActiveRoomObserver";
+import { Notifier } from "../Notifier";
+import type { Renderer } from "react-dom";
 import RightPanelStore from "../stores/RightPanelStore";
 import WidgetStore from "../stores/WidgetStore";
 import CallHandler from "../CallHandler";
-import {Analytics} from "../Analytics";
+import { Analytics } from "../Analytics";
 import CountlyAnalytics from "../CountlyAnalytics";
 import UserActivity from "../UserActivity";
-import {ModalWidgetStore} from "../stores/ModalWidgetStore";
+import { ModalWidgetStore } from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
-import {SpaceStoreClass} from "../stores/SpaceStore";
+import { SpaceStoreClass } from "../stores/SpaceStore";
 import TypingStore from "../stores/TypingStore";
 import { EventIndexPeg } from "../indexing/EventIndexPeg";
-import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
+import { VoiceRecordingStore } from "../stores/VoiceRecordingStore";
 import PerformanceMonitor from "../performance";
 import UIStore from "../stores/UIStore";
 import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
@@ -127,11 +128,24 @@ declare global {
         setSinkId(outputId: string);
     }
 
+    // Add Chrome-specific `instant` ScrollBehaviour
+    type _ScrollBehavior = ScrollBehavior | "instant";
+
+    interface _ScrollOptions {
+        behavior?: _ScrollBehavior;
+    }
+
+    interface _ScrollIntoViewOptions extends _ScrollOptions {
+        block?: ScrollLogicalPosition;
+        inline?: ScrollLogicalPosition;
+    }
+
     interface Element {
         // Safari & IE11 only have this prefixed: we used prefixed versions
         // previously so let's continue to support them for now
         webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
         msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
+        scrollIntoView(arg?: boolean | _ScrollIntoViewOptions): void;
     }
 
     interface Error {
diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index 66f998b616..3b7fee3a08 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -15,12 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { WheelEvent } from "react";
 
 interface IProps {
     className?: string;
-    onScroll?: () => void;
-    onWheel?: () => void;
+    onScroll?: (event: Event) => void;
+    onWheel?: (event: WheelEvent) => void;
     style?: React.CSSProperties
     tabIndex?: number,
     wrappedRef?: (ref: HTMLDivElement) => void;
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.tsx
similarity index 64%
rename from src/components/structures/MessagePanel.js
rename to src/components/structures/MessagePanel.tsx
index eb9611a6fc..492d9d9a53 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.tsx
@@ -1,7 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2021 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.
@@ -16,32 +14,46 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef, KeyboardEvent, ReactNode, SyntheticEvent, TransitionEvent } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import shouldHideEvent from '../../shouldHideEvent';
-import {wantsDateSeparator} from '../../DateUtils';
-import * as sdk from '../../index';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { Relations } from "matrix-js-sdk/src/models/relations";
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import shouldHideEvent from '../../shouldHideEvent';
+import { wantsDateSeparator } from '../../DateUtils';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
 import RoomContext from "../../contexts/RoomContext";
-import {Layout, LayoutPropType} from "../../settings/Layout";
-import {_t} from "../../languageHandler";
-import {haveTileForEvent} from "../views/rooms/EventTile";
-import {hasText} from "../../TextForEvent";
+import { Layout } from "../../settings/Layout";
+import { _t } from "../../languageHandler";
+import EventTile, { haveTileForEvent, IReadReceiptProps, TileShape } from "../views/rooms/EventTile";
+import { hasText } from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
+import WhoIsTypingTile from '../views/rooms/WhoIsTypingTile';
+import ScrollPanel, { IScrollState } from "./ScrollPanel";
+import EventListSummary from '../views/elements/EventListSummary';
+import MemberEventListSummary from '../views/elements/MemberEventListSummary';
+import DateSeparator from '../views/messages/DateSeparator';
+import ErrorBoundary from '../views/elements/ErrorBoundary';
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import Spinner from "../views/elements/Spinner";
+import TileErrorBoundary from '../views/messages/TileErrorBoundary';
+import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import EditorStateTransfer from "../../utils/EditorStateTransfer";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
-const continuedTypes = ['m.sticker', 'm.room.message'];
+const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
 
 // check if there is a previous event and it has the same sender as this event
 // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
-function shouldFormContinuation(prevEvent, mxEvent) {
+function shouldFormContinuation(prevEvent: MatrixEvent, mxEvent: MatrixEvent): boolean {
     // sanity check inputs
     if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
     // check if within the max continuation period
@@ -52,8 +64,8 @@ function shouldFormContinuation(prevEvent, mxEvent) {
 
     // Some events should appear as continuations from previous events of different types.
     if (mxEvent.getType() !== prevEvent.getType() &&
-        (!continuedTypes.includes(mxEvent.getType()) ||
-            !continuedTypes.includes(prevEvent.getType()))) return false;
+        (!continuedTypes.includes(mxEvent.getType() as EventType) ||
+            !continuedTypes.includes(prevEvent.getType() as EventType))) return false;
 
     // Check if the sender is the same and hasn't changed their displayname/avatar between these events
     if (mxEvent.sender.userId !== prevEvent.sender.userId ||
@@ -66,96 +78,161 @@ function shouldFormContinuation(prevEvent, mxEvent) {
     return true;
 }
 
-const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite';
+const isMembershipChange = (e: MatrixEvent): boolean => {
+    return e.getType() === EventType.RoomMember || e.getType() === EventType.RoomThirdPartyInvite;
+}
+
+interface IProps {
+    // the list of MatrixEvents to display
+    events: MatrixEvent[];
+
+    // true to give the component a 'display: none' style.
+    hidden?: boolean;
+
+    // true to show a spinner at the top of the timeline to indicate
+    // back-pagination in progress
+    backPaginating?: boolean;
+
+    // true to show a spinner at the end of the timeline to indicate
+    // forward-pagination in progress
+    forwardPaginating?: boolean;
+
+    // ID of an event to highlight. If undefined, no event will be highlighted.
+    highlightedEventId?: string;
+
+    // The room these events are all in together, if any.
+    // (The notification panel won't have a room here, for example.)
+    room?: Room;
+
+    // Should we show URL Previews
+    showUrlPreview?: boolean;
+
+    // event after which we should show a read marker
+    readMarkerEventId?: string;
+
+    // whether the read marker should be visible
+    readMarkerVisible?: boolean;
+
+    // the userid of our user. This is used to suppress the read marker
+    // for pending messages.
+    ourUserId?: string;
+
+    // true to suppress the date at the start of the timeline
+    suppressFirstDateSeparator?: boolean;
+
+    // whether to show read receipts
+    showReadReceipts?: boolean;
+
+    // true if updates to the event list should cause the scroll panel to
+    // scroll down when we are at the bottom of the window. See ScrollPanel
+    // for more details.
+    stickyBottom?: boolean;
+
+    // className for the panel
+    className: string;
+
+    // shape parameter to be passed to EventTiles
+    tileShape?: TileShape;
+
+    // show twelve hour timestamps
+    isTwelveHour?: boolean;
+
+    // show timestamps always
+    alwaysShowTimestamps?: boolean;
+
+    // whether to show reactions for an event
+    showReactions?: boolean;
+
+    // which layout to use
+    layout?: Layout;
+
+    // whether or not to show flair at all
+    enableFlair?: boolean;
+
+    resizeNotifier: ResizeNotifier;
+    permalinkCreator?: RoomPermalinkCreator;
+    editState?: EditorStateTransfer;
+
+    // callback which is called when the panel is scrolled.
+    onScroll?(event: Event): void;
+
+    // callback which is called when the user interacts with the room timeline
+    onUserScroll(event: SyntheticEvent): void;
+
+    // callback which is called when more content is needed.
+    onFillRequest?(backwards: boolean): Promise<boolean>;
+
+    // helper function to access relations for an event
+    onUnfillRequest?(backwards: boolean, scrollToken: string): void;
+
+    getRelationsForEvent?(eventId: string, relationType: string, eventType: string): Relations;
+}
+
+interface IState {
+    ghostReadMarkers: string[];
+    showTypingNotifications: boolean;
+}
+
+interface IReadReceiptForUser {
+    lastShownEventId: string;
+    receipt: IReadReceiptProps;
+}
 
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 @replaceableComponent("structures.MessagePanel")
-export default class MessagePanel extends React.Component {
-    static propTypes = {
-        // true to give the component a 'display: none' style.
-        hidden: PropTypes.bool,
-
-        // true to show a spinner at the top of the timeline to indicate
-        // back-pagination in progress
-        backPaginating: PropTypes.bool,
-
-        // true to show a spinner at the end of the timeline to indicate
-        // forward-pagination in progress
-        forwardPaginating: PropTypes.bool,
-
-        // the list of MatrixEvents to display
-        events: PropTypes.array.isRequired,
-
-        // ID of an event to highlight. If undefined, no event will be highlighted.
-        highlightedEventId: PropTypes.string,
-
-        // The room these events are all in together, if any.
-        // (The notification panel won't have a room here, for example.)
-        room: PropTypes.object,
-
-        // Should we show URL Previews
-        showUrlPreview: PropTypes.bool,
-
-        // event after which we should show a read marker
-        readMarkerEventId: PropTypes.string,
-
-        // whether the read marker should be visible
-        readMarkerVisible: PropTypes.bool,
-
-        // the userid of our user. This is used to suppress the read marker
-        // for pending messages.
-        ourUserId: PropTypes.string,
-
-        // true to suppress the date at the start of the timeline
-        suppressFirstDateSeparator: PropTypes.bool,
-
-        // whether to show read receipts
-        showReadReceipts: PropTypes.bool,
-
-        // true if updates to the event list should cause the scroll panel to
-        // scroll down when we are at the bottom of the window. See ScrollPanel
-        // for more details.
-        stickyBottom: PropTypes.bool,
-
-        // callback which is called when the panel is scrolled.
-        onScroll: PropTypes.func,
-
-        // callback which is called when the user interacts with the room timeline
-        onUserScroll: PropTypes.func,
-
-        // callback which is called when more content is needed.
-        onFillRequest: PropTypes.func,
-
-        // className for the panel
-        className: PropTypes.string.isRequired,
-
-        // shape parameter to be passed to EventTiles
-        tileShape: PropTypes.string,
-
-        // show twelve hour timestamps
-        isTwelveHour: PropTypes.bool,
-
-        // show timestamps always
-        alwaysShowTimestamps: PropTypes.bool,
-
-        // helper function to access relations for an event
-        getRelationsForEvent: PropTypes.func,
-
-        // whether to show reactions for an event
-        showReactions: PropTypes.bool,
-
-        // which layout to use
-        layout: LayoutPropType,
-
-        // whether or not to show flair at all
-        enableFlair: PropTypes.bool,
-    };
-
+export default class MessagePanel extends React.Component<IProps, IState> {
     static contextType = RoomContext;
 
-    constructor(props) {
-        super(props);
+    // opaque readreceipt info for each userId; used by ReadReceiptMarker
+    // to manage its animations
+    private readonly readReceiptMap: Record<string, object> = {};
+
+    // Track read receipts by event ID. For each _shown_ event ID, we store
+    // the list of read receipts to display:
+    //   [
+    //       {
+    //           userId: string,
+    //           member: RoomMember,
+    //           ts: number,
+    //       },
+    //   ]
+    // This is recomputed on each render. It's only stored on the component
+    // for ease of passing the data around since it's computed in one pass
+    // over all events.
+    private readReceiptsByEvent: Record<string, IReadReceiptProps[]> = {};
+
+    // Track read receipts by user ID. For each user ID we've ever shown a
+    // a read receipt for, we store an object:
+    //   {
+    //       lastShownEventId: string,
+    //       receipt: {
+    //           userId: string,
+    //           member: RoomMember,
+    //           ts: number,
+    //       },
+    //   }
+    // so that we can always keep receipts displayed by reverting back to
+    // the last shown event for that user ID when needed. This may feel like
+    // it duplicates the receipt storage in the room, but at this layer, we
+    // are tracking _shown_ event IDs, which the JS SDK knows nothing about.
+    // This is recomputed on each render, using the data from the previous
+    // render as our fallback for any user IDs we can't match a receipt to a
+    // displayed event in the current render cycle.
+    private readReceiptsByUserId: Record<string, IReadReceiptForUser> = {};
+
+    private readonly showHiddenEventsInTimeline: boolean;
+    private isMounted = false;
+
+    private readMarkerNode = createRef<HTMLLIElement>();
+    private whoIsTyping = createRef<WhoIsTypingTile>();
+    private scrollPanel = createRef<ScrollPanel>();
+
+    private readonly showTypingNotificationsWatcherRef: string;
+    private eventNodes: Record<string, HTMLElement>;
+
+    constructor(props, context) {
+        super(props, context);
 
         this.state = {
             // previous positions the read marker has been in, so we can
@@ -164,65 +241,21 @@ export default class MessagePanel extends React.Component {
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
         };
 
-        // opaque readreceipt info for each userId; used by ReadReceiptMarker
-        // to manage its animations
-        this._readReceiptMap = {};
-
-        // Track read receipts by event ID. For each _shown_ event ID, we store
-        // the list of read receipts to display:
-        //   [
-        //       {
-        //           userId: string,
-        //           member: RoomMember,
-        //           ts: number,
-        //       },
-        //   ]
-        // This is recomputed on each render. It's only stored on the component
-        // for ease of passing the data around since it's computed in one pass
-        // over all events.
-        this._readReceiptsByEvent = {};
-
-        // Track read receipts by user ID. For each user ID we've ever shown a
-        // a read receipt for, we store an object:
-        //   {
-        //       lastShownEventId: string,
-        //       receipt: {
-        //           userId: string,
-        //           member: RoomMember,
-        //           ts: number,
-        //       },
-        //   }
-        // so that we can always keep receipts displayed by reverting back to
-        // the last shown event for that user ID when needed. This may feel like
-        // it duplicates the receipt storage in the room, but at this layer, we
-        // are tracking _shown_ event IDs, which the JS SDK knows nothing about.
-        // This is recomputed on each render, using the data from the previous
-        // render as our fallback for any user IDs we can't match a receipt to a
-        // displayed event in the current render cycle.
-        this._readReceiptsByUserId = {};
-
         // Cache hidden events setting on mount since Settings is expensive to
         // query, and we check this in a hot code path.
-        this._showHiddenEventsInTimeline =
-            SettingsStore.getValue("showHiddenEventsInTimeline");
+        this.showHiddenEventsInTimeline = SettingsStore.getValue("showHiddenEventsInTimeline");
 
-        this._isMounted = false;
-
-        this._readMarkerNode = createRef();
-        this._whoIsTyping = createRef();
-        this._scrollPanel = createRef();
-
-        this._showTypingNotificationsWatcherRef =
+        this.showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
     }
 
     componentDidMount() {
-        this._isMounted = true;
+        this.isMounted = true;
     }
 
     componentWillUnmount() {
-        this._isMounted = false;
-        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+        this.isMounted = false;
+        SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -235,14 +268,14 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    onShowTypingNotificationsChange = () => {
+    private onShowTypingNotificationsChange = (): void => {
         this.setState({
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
         });
     };
 
     /* get the DOM node representing the given event */
-    getNodeForEventId(eventId) {
+    public getNodeForEventId(eventId: string): HTMLElement {
         if (!this.eventNodes) {
             return undefined;
         }
@@ -252,8 +285,8 @@ export default class MessagePanel extends React.Component {
 
     /* return true if the content is fully scrolled down right now; else false.
      */
-    isAtBottom() {
-        return this._scrollPanel.current && this._scrollPanel.current.isAtBottom();
+    public isAtBottom(): boolean {
+        return this.scrollPanel.current?.isAtBottom();
     }
 
     /* get the current scroll state. See ScrollPanel.getScrollState for
@@ -261,8 +294,8 @@ export default class MessagePanel extends React.Component {
      *
      * returns null if we are not mounted.
      */
-    getScrollState() {
-        return this._scrollPanel.current ? this._scrollPanel.current.getScrollState() : null;
+    public getScrollState(): IScrollState {
+        return this.scrollPanel.current?.getScrollState() ?? null;
     }
 
     // returns one of:
@@ -271,15 +304,15 @@ export default class MessagePanel extends React.Component {
     //  -1: read marker is above the window
     //   0: read marker is within the window
     //  +1: read marker is below the window
-    getReadMarkerPosition() {
-        const readMarker = this._readMarkerNode.current;
-        const messageWrapper = this._scrollPanel.current;
+    public getReadMarkerPosition(): number {
+        const readMarker = this.readMarkerNode.current;
+        const messageWrapper = this.scrollPanel.current;
 
         if (!readMarker || !messageWrapper) {
             return null;
         }
 
-        const wrapperRect = ReactDOM.findDOMNode(messageWrapper).getBoundingClientRect();
+        const wrapperRect = (ReactDOM.findDOMNode(messageWrapper) as HTMLElement).getBoundingClientRect();
         const readMarkerRect = readMarker.getBoundingClientRect();
 
         // the read-marker pretends to have zero height when it is actually
@@ -295,17 +328,17 @@ export default class MessagePanel extends React.Component {
 
     /* jump to the top of the content.
      */
-    scrollToTop() {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.scrollToTop();
+    public scrollToTop(): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.scrollToTop();
         }
     }
 
     /* jump to the bottom of the content.
      */
-    scrollToBottom() {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.scrollToBottom();
+    public scrollToBottom(): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.scrollToBottom();
         }
     }
 
@@ -314,9 +347,9 @@ export default class MessagePanel extends React.Component {
      *
      * @param {number} mult: -1 to page up, +1 to page down
      */
-    scrollRelative(mult) {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.scrollRelative(mult);
+    public scrollRelative(mult: number): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.scrollRelative(mult);
         }
     }
 
@@ -325,9 +358,9 @@ export default class MessagePanel extends React.Component {
      *
      * @param {KeyboardEvent} ev: the keyboard event to handle
      */
-    handleScrollKey(ev) {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.handleScrollKey(ev);
+    public handleScrollKey(ev: KeyboardEvent): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.handleScrollKey(ev);
         }
     }
 
@@ -341,38 +374,41 @@ export default class MessagePanel extends React.Component {
      * node (specifically, the bottom of it) will be positioned. If omitted, it
      * defaults to 0.
      */
-    scrollToEvent(eventId, pixelOffset, offsetBase) {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.scrollToToken(eventId, pixelOffset, offsetBase);
+    public scrollToEvent(eventId: string, pixelOffset: number, offsetBase: number): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.scrollToToken(eventId, pixelOffset, offsetBase);
         }
     }
 
-    scrollToEventIfNeeded(eventId) {
+    public scrollToEventIfNeeded(eventId: string): void {
         const node = this.eventNodes[eventId];
         if (node) {
-            node.scrollIntoView({block: "nearest", behavior: "instant"});
+            node.scrollIntoView({
+                block: "nearest",
+                behavior: "instant",
+            });
         }
     }
 
     /* check the scroll state and send out pagination requests if necessary.
      */
-    checkFillState() {
-        if (this._scrollPanel.current) {
-            this._scrollPanel.current.checkFillState();
+    public checkFillState(): void {
+        if (this.scrollPanel.current) {
+            this.scrollPanel.current.checkFillState();
         }
     }
 
-    _isUnmounting = () => {
-        return !this._isMounted;
+    private isUnmounting = (): boolean => {
+        return !this.isMounted;
     };
 
     // TODO: Implement granular (per-room) hide options
-    _shouldShowEvent(mxEv) {
+    public shouldShowEvent(mxEv: MatrixEvent): boolean {
         if (mxEv.sender && MatrixClientPeg.get().isUserIgnored(mxEv.sender.userId)) {
             return false; // ignored = no show (only happens if the ignore happens after an event was received)
         }
 
-        if (this._showHiddenEventsInTimeline) {
+        if (this.showHiddenEventsInTimeline) {
             return true;
         }
 
@@ -386,7 +422,7 @@ export default class MessagePanel extends React.Component {
         return !shouldHideEvent(mxEv, this.context);
     }
 
-    _readMarkerForEvent(eventId, isLastEvent) {
+    public readMarkerForEvent(eventId: string, isLastEvent: boolean): ReactNode {
         const visible = !isLastEvent && this.props.readMarkerVisible;
 
         if (this.props.readMarkerEventId === eventId) {
@@ -405,7 +441,7 @@ export default class MessagePanel extends React.Component {
 
             return (
                 <li key={"readMarker_"+eventId}
-                    ref={this._readMarkerNode}
+                    ref={this.readMarkerNode}
                     className="mx_RoomView_myReadMarker_container"
                     data-scroll-tokens={eventId}
                 >
@@ -424,8 +460,8 @@ export default class MessagePanel extends React.Component {
             // transition (ie. the read markers do but the event tiles do not)
             // and TransitionGroup requires that all its children are Transitions.
             const hr = <hr className="mx_RoomView_myReadMarker"
-                ref={this._collectGhostReadMarker}
-                onTransitionEnd={this._onGhostTransitionEnd}
+                ref={this.collectGhostReadMarker}
+                onTransitionEnd={this.onGhostTransitionEnd}
                 data-eventid={eventId}
             />;
 
@@ -445,7 +481,7 @@ export default class MessagePanel extends React.Component {
         return null;
     }
 
-    _collectGhostReadMarker = (node) => {
+    private collectGhostReadMarker = (node: HTMLElement): void => {
         if (node) {
             // now the element has appeared, change the style which will trigger the CSS transition
             requestAnimationFrame(() => {
@@ -455,15 +491,15 @@ export default class MessagePanel extends React.Component {
         }
     };
 
-    _onGhostTransitionEnd = (ev) => {
+    private onGhostTransitionEnd = (ev: TransitionEvent): void => {
         // we can now clean up the ghost element
-        const finishedEventId = ev.target.dataset.eventid;
+        const finishedEventId = (ev.target as HTMLElement).dataset.eventid;
         this.setState({
             ghostReadMarkers: this.state.ghostReadMarkers.filter(eid => eid !== finishedEventId),
         });
     };
 
-    _getNextEventInfo(arr, i) {
+    private getNextEventInfo(arr: MatrixEvent[], i: number): { nextEvent: MatrixEvent, nextTile: MatrixEvent } {
         const nextEvent = i < arr.length - 1
             ? arr[i + 1]
             : null;
@@ -472,16 +508,16 @@ export default class MessagePanel extends React.Component {
         // when rendering the tile. The shouldShowEvent function is pretty quick at what
         // it does, so this should have no significant cost even when a room is used for
         // not-chat purposes.
-        const nextTile = arr.slice(i + 1).find(e => this._shouldShowEvent(e));
+        const nextTile = arr.slice(i + 1).find(e => this.shouldShowEvent(e));
 
-        return {nextEvent, nextTile};
+        return { nextEvent, nextTile };
     }
 
-    get _roomHasPendingEdit() {
+    private get roomHasPendingEdit(): string {
         return this.props.room && localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
     }
 
-    _getEventTiles() {
+    private getEventTiles(): ReactNode[] {
         this.eventNodes = {};
 
         let i;
@@ -497,7 +533,7 @@ export default class MessagePanel extends React.Component {
         let lastShownNonLocalEchoIndex = -1;
         for (i = this.props.events.length-1; i >= 0; i--) {
             const mxEv = this.props.events[i];
-            if (!this._shouldShowEvent(mxEv)) {
+            if (!this.shouldShowEvent(mxEv)) {
                 continue;
             }
 
@@ -521,18 +557,18 @@ export default class MessagePanel extends React.Component {
         // Note: the EventTile might still render a "sent/sending receipt" independent of
         // this information. When not providing read receipt information, the tile is likely
         // to assume that sent receipts are to be shown more often.
-        this._readReceiptsByEvent = {};
+        this.readReceiptsByEvent = {};
         if (this.props.showReadReceipts) {
-            this._readReceiptsByEvent = this._getReadReceiptsByShownEvent();
+            this.readReceiptsByEvent = this.getReadReceiptsByShownEvent();
         }
 
-        let grouper = null;
+        let grouper: BaseGrouper = null;
 
         for (i = 0; i < this.props.events.length; i++) {
             const mxEv = this.props.events[i];
             const eventId = mxEv.getId();
             const last = (mxEv === lastShownEvent);
-            const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
+            const { nextEvent, nextTile } = this.getNextEventInfo(this.props.events, i);
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
@@ -553,26 +589,25 @@ export default class MessagePanel extends React.Component {
                 }
             }
             if (!grouper) {
-                const wantTile = this._shouldShowEvent(mxEv);
+                const wantTile = this.shouldShowEvent(mxEv);
                 const isGrouped = false;
                 if (wantTile) {
-                    // make sure we unpack the array returned by _getTilesForEvent,
+                    // make sure we unpack the array returned by getTilesForEvent,
                     // otherwise react will auto-generate keys and we will end up
                     // replacing all of the DOM elements every time we paginate.
-                    ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, isGrouped,
-                        nextEvent, nextTile));
+                    ret.push(...this.getTilesForEvent(prevEvent, mxEv, last, isGrouped, nextEvent, nextTile));
                     prevEvent = mxEv;
                 }
 
-                const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
+                const readMarker = this.readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
                 if (readMarker) ret.push(readMarker);
             }
         }
 
-        if (!this.props.editState && this._roomHasPendingEdit) {
+        if (!this.props.editState && this.roomHasPendingEdit) {
             defaultDispatcher.dispatch({
                 action: "edit_event",
-                event: this.props.room.findEventById(this._roomHasPendingEdit),
+                event: this.props.room.findEventById(this.roomHasPendingEdit),
             });
         }
 
@@ -583,10 +618,14 @@ export default class MessagePanel extends React.Component {
         return ret;
     }
 
-    _getTilesForEvent(prevEvent, mxEv, last, isGrouped=false, nextEvent, nextEventWithTile) {
-        const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
-        const EventTile = sdk.getComponent('rooms.EventTile');
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+    public getTilesForEvent(
+        prevEvent: MatrixEvent,
+        mxEv: MatrixEvent,
+        last = false,
+        isGrouped = false,
+        nextEvent?: MatrixEvent,
+        nextEventWithTile?: MatrixEvent,
+    ): ReactNode[] {
         const ret = [];
 
         const isEditing = this.props.editState &&
@@ -601,7 +640,7 @@ export default class MessagePanel extends React.Component {
         }
 
         // do we need a date separator since the last event?
-        const wantsDateSeparator = this._wantsDateSeparator(prevEvent, eventDate);
+        const wantsDateSeparator = this.wantsDateSeparator(prevEvent, eventDate);
         if (wantsDateSeparator && !isGrouped) {
             const dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} /></li>;
             ret.push(dateSeparator);
@@ -609,7 +648,7 @@ export default class MessagePanel extends React.Component {
 
         let willWantDateSeparator = false;
         if (nextEvent) {
-            willWantDateSeparator = this._wantsDateSeparator(mxEv, nextEvent.getDate() || new Date());
+            willWantDateSeparator = this.wantsDateSeparator(mxEv, nextEvent.getDate() || new Date());
         }
 
         // is this a continuation of the previous message?
@@ -618,12 +657,12 @@ export default class MessagePanel extends React.Component {
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
 
-        const readReceipts = this._readReceiptsByEvent[eventId];
+        const readReceipts = this.readReceiptsByEvent[eventId];
 
         let isLastSuccessful = false;
         const isSentState = s => !s || s === 'sent';
         const isSent = isSentState(mxEv.getAssociatedStatus());
-        const hasNextEvent = nextEvent && this._shouldShowEvent(nextEvent);
+        const hasNextEvent = nextEvent && this.shouldShowEvent(nextEvent);
         if (!hasNextEvent && isSent) {
             isLastSuccessful = true;
         } else if (hasNextEvent && isSent && !isSentState(nextEvent.getAssociatedStatus())) {
@@ -649,18 +688,18 @@ export default class MessagePanel extends React.Component {
             <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
                 <EventTile
                     as="li"
-                    ref={this._collectEventNode.bind(this, eventId)}
+                    ref={this.collectEventNode.bind(this, eventId)}
                     alwaysShowTimestamps={this.props.alwaysShowTimestamps}
                     mxEvent={mxEv}
                     continuation={continuation}
                     isRedacted={mxEv.isRedacted()}
                     replacingEventId={mxEv.replacingEventId()}
                     editState={isEditing && this.props.editState}
-                    onHeightChanged={this._onHeightChanged}
+                    onHeightChanged={this.onHeightChanged}
                     readReceipts={readReceipts}
-                    readReceiptMap={this._readReceiptMap}
+                    readReceiptMap={this.readReceiptMap}
                     showUrlPreview={this.props.showUrlPreview}
-                    checkUnmounting={this._isUnmounting}
+                    checkUnmounting={this.isUnmounting}
                     eventSendStatus={mxEv.getAssociatedStatus()}
                     tileShape={this.props.tileShape}
                     isTwelveHour={this.props.isTwelveHour}
@@ -681,7 +720,7 @@ export default class MessagePanel extends React.Component {
         return ret;
     }
 
-    _wantsDateSeparator(prevEvent, nextEventDate) {
+    public wantsDateSeparator(prevEvent: MatrixEvent, nextEventDate: Date): boolean {
         if (prevEvent == null) {
             // first event in the panel: depends if we could back-paginate from
             // here.
@@ -692,7 +731,7 @@ export default class MessagePanel extends React.Component {
 
     // Get a list of read receipts that should be shown next to this event
     // Receipts are objects which have a 'userId', 'roomMember' and 'ts'.
-    _getReadReceiptsForEvent(event) {
+    private getReadReceiptsForEvent(event: MatrixEvent): IReadReceiptProps[] {
         const myUserId = MatrixClientPeg.get().credentials.userId;
 
         // get list of read receipts, sorted most recent first
@@ -700,7 +739,7 @@ export default class MessagePanel extends React.Component {
         if (!room) {
             return null;
         }
-        const receipts = [];
+        const receipts: IReadReceiptProps[] = [];
         room.getReceiptsForEvent(event).forEach((r) => {
             if (!r.userId || r.type !== "m.read" || r.userId === myUserId) {
                 return; // ignore non-read receipts and receipts from self.
@@ -721,13 +760,13 @@ export default class MessagePanel extends React.Component {
     // Get an object that maps from event ID to a list of read receipts that
     // should be shown next to that event. If a hidden event has read receipts,
     // they are folded into the receipts of the last shown event.
-    _getReadReceiptsByShownEvent() {
+    private getReadReceiptsByShownEvent(): Record<string, IReadReceiptProps[]> {
         const receiptsByEvent = {};
         const receiptsByUserId = {};
 
         let lastShownEventId;
         for (const event of this.props.events) {
-            if (this._shouldShowEvent(event)) {
+            if (this.shouldShowEvent(event)) {
                 lastShownEventId = event.getId();
             }
             if (!lastShownEventId) {
@@ -735,7 +774,7 @@ export default class MessagePanel extends React.Component {
             }
 
             const existingReceipts = receiptsByEvent[lastShownEventId] || [];
-            const newReceipts = this._getReadReceiptsForEvent(event);
+            const newReceipts = this.getReadReceiptsForEvent(event);
             receiptsByEvent[lastShownEventId] = existingReceipts.concat(newReceipts);
 
             // Record these receipts along with their last shown event ID for
@@ -754,16 +793,16 @@ export default class MessagePanel extends React.Component {
         // someone which had one in the last. By looking through our previous
         // mapping of receipts by user ID, we can cover recover any receipts
         // that would have been lost by using the same event ID from last time.
-        for (const userId in this._readReceiptsByUserId) {
+        for (const userId in this.readReceiptsByUserId) {
             if (receiptsByUserId[userId]) {
                 continue;
             }
-            const { lastShownEventId, receipt } = this._readReceiptsByUserId[userId];
+            const { lastShownEventId, receipt } = this.readReceiptsByUserId[userId];
             const existingReceipts = receiptsByEvent[lastShownEventId] || [];
             receiptsByEvent[lastShownEventId] = existingReceipts.concat(receipt);
             receiptsByUserId[userId] = { lastShownEventId, receipt };
         }
-        this._readReceiptsByUserId = receiptsByUserId;
+        this.readReceiptsByUserId = receiptsByUserId;
 
         // After grouping receipts by shown events, do another pass to sort each
         // receipt list.
@@ -776,21 +815,21 @@ export default class MessagePanel extends React.Component {
         return receiptsByEvent;
     }
 
-    _collectEventNode = (eventId, node) => {
+    private collectEventNode = (eventId: string, node: EventTile): void => {
         this.eventNodes[eventId] = node?.ref?.current;
     }
 
     // once dynamic content in the events load, make the scrollPanel check the
     // scroll offsets.
-    _onHeightChanged = () => {
-        const scrollPanel = this._scrollPanel.current;
+    public onHeightChanged = (): void => {
+        const scrollPanel = this.scrollPanel.current;
         if (scrollPanel) {
             scrollPanel.checkScroll();
         }
     };
 
-    _onTypingShown = () => {
-        const scrollPanel = this._scrollPanel.current;
+    private onTypingShown = (): void => {
+        const scrollPanel = this.scrollPanel.current;
         // this will make the timeline grow, so checkScroll
         scrollPanel.checkScroll();
         if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
@@ -798,8 +837,8 @@ export default class MessagePanel extends React.Component {
         }
     };
 
-    _onTypingHidden = () => {
-        const scrollPanel = this._scrollPanel.current;
+    private onTypingHidden = (): void => {
+        const scrollPanel = this.scrollPanel.current;
         if (scrollPanel) {
             // as hiding the typing notifications doesn't
             // update the scrollPanel, we tell it to apply
@@ -811,12 +850,12 @@ export default class MessagePanel extends React.Component {
         }
     };
 
-    updateTimelineMinHeight() {
-        const scrollPanel = this._scrollPanel.current;
+    public updateTimelineMinHeight(): void {
+        const scrollPanel = this.scrollPanel.current;
 
         if (scrollPanel) {
             const isAtBottom = scrollPanel.isAtBottom();
-            const whoIsTyping = this._whoIsTyping.current;
+            const whoIsTyping = this.whoIsTyping.current;
             const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
             // when messages get added to the timeline,
             // but somebody else is still typing,
@@ -828,18 +867,14 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    onTimelineReset() {
-        const scrollPanel = this._scrollPanel.current;
+    public onTimelineReset(): void {
+        const scrollPanel = this.scrollPanel.current;
         if (scrollPanel) {
             scrollPanel.clearPreventShrinking();
         }
     }
 
     render() {
-        const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary');
-        const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-        const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
-        const Spinner = sdk.getComponent("elements.Spinner");
         let topSpinner;
         let bottomSpinner;
         if (this.props.backPaginating) {
@@ -855,9 +890,9 @@ export default class MessagePanel extends React.Component {
         if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
                 room={this.props.room}
-                onShown={this._onTypingShown}
-                onHidden={this._onTypingHidden}
-                ref={this._whoIsTyping} />
+                onShown={this.onTypingShown}
+                onHidden={this.onTypingHidden}
+                ref={this.whoIsTyping} />
             );
         }
 
@@ -873,11 +908,10 @@ export default class MessagePanel extends React.Component {
         return (
             <ErrorBoundary>
                 <ScrollPanel
-                    ref={this._scrollPanel}
+                    ref={this.scrollPanel}
                     className={this.props.className}
                     onScroll={this.props.onScroll}
                     onUserScroll={this.props.onUserScroll}
-                    onResize={this.onResize}
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}
                     style={style}
@@ -886,7 +920,7 @@ export default class MessagePanel extends React.Component {
                     fixedChildren={ircResizer}
                 >
                     { topSpinner }
-                    { this._getEventTiles() }
+                    { this.getEventTiles() }
                     { whoIsTyping }
                     { bottomSpinner }
                 </ScrollPanel>
@@ -895,6 +929,31 @@ export default class MessagePanel extends React.Component {
     }
 }
 
+abstract class BaseGrouper {
+    static canStartGroup = (panel: MessagePanel, ev: MatrixEvent): boolean => true;
+
+    public events: MatrixEvent[] = [];
+    // events that we include in the group but then eject out and place above the group.
+    public ejectedEvents: MatrixEvent[] = [];
+    public readMarker: ReactNode;
+
+    constructor(
+        public readonly panel: MessagePanel,
+        public readonly event: MatrixEvent,
+        public readonly prevEvent: MatrixEvent,
+        public readonly lastShownEvent: MatrixEvent,
+        public readonly nextEvent?: MatrixEvent,
+        public readonly nextEventTile?: MatrixEvent,
+    ) {
+        this.readMarker = panel.readMarkerForEvent(event.getId(), event === lastShownEvent);
+    }
+
+    public abstract shouldGroup(ev: MatrixEvent): boolean;
+    public abstract add(ev: MatrixEvent): void;
+    public abstract getTiles(): ReactNode[];
+    public abstract getNewPrevEvent(): MatrixEvent;
+}
+
 /* Grouper classes determine when events can be grouped together in a summary.
  * Groupers should have the following methods:
  * - canStartGroup (static): determines if a new group should be started with the
@@ -910,36 +969,21 @@ export default class MessagePanel extends React.Component {
 // Wrap initial room creation events into an EventListSummary
 // Grouping only events sent by the same user that sent the `m.room.create` and only until
 // the first non-state event or membership event which is not regarding the sender of the `m.room.create` event
-class CreationGrouper {
-    static canStartGroup = function(panel, ev) {
-        return ev.getType() === "m.room.create";
+class CreationGrouper extends BaseGrouper {
+    static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean {
+        return ev.getType() === EventType.RoomCreate;
     };
 
-    constructor(panel, createEvent, prevEvent, lastShownEvent) {
-        this.panel = panel;
-        this.createEvent = createEvent;
-        this.prevEvent = prevEvent;
-        this.lastShownEvent = lastShownEvent;
-        this.events = [];
-        // events that we include in the group but then eject out and place
-        // above the group.
-        this.ejectedEvents = [];
-        this.readMarker = panel._readMarkerForEvent(
-            createEvent.getId(),
-            createEvent === lastShownEvent,
-        );
-    }
-
-    shouldGroup(ev) {
+    public shouldGroup(ev: MatrixEvent): boolean {
         const panel = this.panel;
-        const createEvent = this.createEvent;
-        if (!panel._shouldShowEvent(ev)) {
+        const createEvent = this.event;
+        if (!panel.shouldShowEvent(ev)) {
             return true;
         }
-        if (panel._wantsDateSeparator(this.createEvent, ev.getDate())) {
+        if (panel.wantsDateSeparator(this.event, ev.getDate())) {
             return false;
         }
-        if (ev.getType() === "m.room.member"
+        if (ev.getType() === EventType.RoomMember
             && (ev.getStateKey() !== createEvent.getSender() || ev.getContent()["membership"] !== "join")) {
             return false;
         }
@@ -949,37 +993,35 @@ class CreationGrouper {
         return false;
     }
 
-    add(ev) {
+    public add(ev: MatrixEvent): void {
         const panel = this.panel;
-        this.readMarker = this.readMarker || panel._readMarkerForEvent(
+        this.readMarker = this.readMarker || panel.readMarkerForEvent(
             ev.getId(),
             ev === this.lastShownEvent,
         );
-        if (!panel._shouldShowEvent(ev)) {
+        if (!panel.shouldShowEvent(ev)) {
             return;
         }
-        if (ev.getType() === "m.room.encryption") {
+        if (ev.getType() === EventType.RoomEncryption) {
             this.ejectedEvents.push(ev);
         } else {
             this.events.push(ev);
         }
     }
 
-    getTiles() {
+    public getTiles(): ReactNode[] {
         // If we don't have any events to group, don't even try to group them. The logic
         // below assumes that we have a group of events to deal with, but we might not if
         // the events we were supposed to group were redacted.
         if (!this.events || !this.events.length) return [];
 
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
         const panel = this.panel;
         const ret = [];
         const isGrouped = true;
-        const createEvent = this.createEvent;
+        const createEvent = this.event;
         const lastShownEvent = this.lastShownEvent;
 
-        if (panel._wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
+        if (panel.wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
             const ts = createEvent.getTs();
             ret.push(
                 <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
@@ -987,13 +1029,13 @@ class CreationGrouper {
         }
 
         // If this m.room.create event should be shown (room upgrade) then show it before the summary
-        if (panel._shouldShowEvent(createEvent)) {
+        if (panel.shouldShowEvent(createEvent)) {
             // pass in the createEvent as prevEvent as well so no extra DateSeparator is rendered
-            ret.push(...panel._getTilesForEvent(createEvent, createEvent));
+            ret.push(...panel.getTilesForEvent(createEvent, createEvent));
         }
 
         for (const ejected of this.ejectedEvents) {
-            ret.push(...panel._getTilesForEvent(
+            ret.push(...panel.getTilesForEvent(
                 createEvent, ejected, createEvent === lastShownEvent, isGrouped,
             ));
         }
@@ -1003,7 +1045,7 @@ class CreationGrouper {
             // of EventListSummary, render each member event as if the previous
             // one was itself. This way, the timestamp of the previous event === the
             // timestamp of the current event, and no DateSeparator is inserted.
-            return panel._getTilesForEvent(e, e, e === lastShownEvent, isGrouped);
+            return panel.getTilesForEvent(e, e, e === lastShownEvent, isGrouped);
         }).reduce((a, b) => a.concat(b), []);
         // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
         const ev = this.events[this.events.length - 1];
@@ -1023,7 +1065,7 @@ class CreationGrouper {
             <EventListSummary
                 key="roomcreationsummary"
                 events={this.events}
-                onToggle={panel._onHeightChanged} // Update scroll state
+                onToggle={panel.onHeightChanged} // Update scroll state
                 summaryMembers={[ev.sender]}
                 summaryText={summaryText}
             >
@@ -1038,62 +1080,59 @@ class CreationGrouper {
         return ret;
     }
 
-    getNewPrevEvent() {
-        return this.createEvent;
+    public getNewPrevEvent(): MatrixEvent {
+        return this.event;
     }
 }
 
-class RedactionGrouper {
-    static canStartGroup = function(panel, ev) {
-        return panel._shouldShowEvent(ev) && ev.isRedacted();
+class RedactionGrouper extends BaseGrouper {
+    static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean {
+        return panel.shouldShowEvent(ev) && ev.isRedacted();
     }
 
-    constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) {
-        this.panel = panel;
-        this.readMarker = panel._readMarkerForEvent(
-            ev.getId(),
-            ev === lastShownEvent,
-        );
+    constructor(
+        panel: MessagePanel,
+        ev: MatrixEvent,
+        prevEvent: MatrixEvent,
+        lastShownEvent: MatrixEvent,
+        nextEvent: MatrixEvent,
+        nextEventTile: MatrixEvent,
+    ) {
+        super(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile);
         this.events = [ev];
-        this.prevEvent = prevEvent;
-        this.lastShownEvent = lastShownEvent;
-        this.nextEvent = nextEvent;
-        this.nextEventTile = nextEventTile;
     }
 
-    shouldGroup(ev) {
+    public shouldGroup(ev: MatrixEvent): boolean {
         // absorb hidden events so that they do not break up streams of messages & redaction events being grouped
-        if (!this.panel._shouldShowEvent(ev)) {
+        if (!this.panel.shouldShowEvent(ev)) {
             return true;
         }
-        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+        if (this.panel.wantsDateSeparator(this.events[0], ev.getDate())) {
             return false;
         }
         return ev.isRedacted();
     }
 
-    add(ev) {
-        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+    public add(ev: MatrixEvent): void {
+        this.readMarker = this.readMarker || this.panel.readMarkerForEvent(
             ev.getId(),
             ev === this.lastShownEvent,
         );
-        if (!this.panel._shouldShowEvent(ev)) {
+        if (!this.panel.shouldShowEvent(ev)) {
             return;
         }
         this.events.push(ev);
     }
 
-    getTiles() {
+    public getTiles(): ReactNode[] {
         if (!this.events || !this.events.length) return [];
 
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
         const isGrouped = true;
         const panel = this.panel;
         const ret = [];
         const lastShownEvent = this.lastShownEvent;
 
-        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+        if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
                 <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
@@ -1104,11 +1143,11 @@ class RedactionGrouper {
             this.prevEvent ? this.events[0].getId() : "initial"
         );
 
-        const senders = new Set();
+        const senders = new Set<RoomMember>();
         let eventTiles = this.events.map((e, i) => {
             senders.add(e.sender);
             const prevEvent = i === 0 ? this.prevEvent : this.events[i - 1];
-            return panel._getTilesForEvent(
+            return panel.getTilesForEvent(
                 prevEvent, e, e === lastShownEvent, isGrouped, this.nextEvent, this.nextEventTile);
         }).reduce((a, b) => a.concat(b), []);
 
@@ -1121,7 +1160,7 @@ class RedactionGrouper {
                 key={key}
                 threshold={2}
                 events={this.events}
-                onToggle={panel._onHeightChanged} // Update scroll state
+                onToggle={panel.onHeightChanged} // Update scroll state
                 summaryMembers={Array.from(senders)}
                 summaryText={_t("%(count)s messages deleted.", { count: eventTiles.length })}
             >
@@ -1136,61 +1175,58 @@ class RedactionGrouper {
         return ret;
     }
 
-    getNewPrevEvent() {
+    public getNewPrevEvent(): MatrixEvent {
         return this.events[this.events.length - 1];
     }
 }
 
 // Wrap consecutive member events in a ListSummary, ignore if redacted
-class MemberGrouper {
-    static canStartGroup = function(panel, ev) {
-        return panel._shouldShowEvent(ev) && isMembershipChange(ev);
+class MemberGrouper extends BaseGrouper {
+    static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean {
+        return panel.shouldShowEvent(ev) && isMembershipChange(ev);
     }
 
-    constructor(panel, ev, prevEvent, lastShownEvent) {
-        this.panel = panel;
-        this.readMarker = panel._readMarkerForEvent(
-            ev.getId(),
-            ev === lastShownEvent,
-        );
-        this.events = [ev];
-        this.prevEvent = prevEvent;
-        this.lastShownEvent = lastShownEvent;
+    constructor(
+        public readonly panel: MessagePanel,
+        public readonly event: MatrixEvent,
+        public readonly prevEvent: MatrixEvent,
+        public readonly lastShownEvent: MatrixEvent,
+    ) {
+        super(panel, event, prevEvent, lastShownEvent);
+        this.events = [event];
     }
 
-    shouldGroup(ev) {
-        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+    public shouldGroup(ev: MatrixEvent): boolean {
+        if (this.panel.wantsDateSeparator(this.events[0], ev.getDate())) {
             return false;
         }
         return isMembershipChange(ev);
     }
 
-    add(ev) {
-        if (ev.getType() === 'm.room.member') {
+    public add(ev: MatrixEvent): void {
+        if (ev.getType() === EventType.RoomMember) {
             // We can ignore any events that don't actually have a message to display
             if (!hasText(ev)) return;
         }
-        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+        this.readMarker = this.readMarker || this.panel.readMarkerForEvent(
             ev.getId(),
             ev === this.lastShownEvent,
         );
         this.events.push(ev);
     }
 
-    getTiles() {
+    public getTiles(): ReactNode[] {
         // If we don't have any events to group, don't even try to group them. The logic
         // below assumes that we have a group of events to deal with, but we might not if
         // the events we were supposed to group were redacted.
         if (!this.events || !this.events.length) return [];
 
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
         const isGrouped = true;
         const panel = this.panel;
         const lastShownEvent = this.lastShownEvent;
         const ret = [];
 
-        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+        if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
                 <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
@@ -1218,7 +1254,7 @@ class MemberGrouper {
             // of MemberEventListSummary, render each member event as if the previous
             // one was itself. This way, the timestamp of the previous event === the
             // timestamp of the current event, and no DateSeparator is inserted.
-            return panel._getTilesForEvent(e, e, e === lastShownEvent, isGrouped);
+            return panel.getTilesForEvent(e, e, e === lastShownEvent, isGrouped);
         }).reduce((a, b) => a.concat(b), []);
 
         if (eventTiles.length === 0) {
@@ -1226,9 +1262,10 @@ class MemberGrouper {
         }
 
         ret.push(
-            <MemberEventListSummary key={key}
+            <MemberEventListSummary
+                key={key}
                 events={this.events}
-                onToggle={panel._onHeightChanged} // Update scroll state
+                onToggle={panel.onHeightChanged} // Update scroll state
                 startExpanded={highlightInMels}
             >
                 { eventTiles }
@@ -1242,7 +1279,7 @@ class MemberGrouper {
         return ret;
     }
 
-    getNewPrevEvent() {
+    public getNewPrevEvent(): MatrixEvent {
         return this.events[0];
     }
 }
diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx
index 6c22835447..8c8fab7ece 100644
--- a/src/components/structures/NotificationPanel.tsx
+++ b/src/components/structures/NotificationPanel.tsx
@@ -22,6 +22,7 @@ import BaseCard from "../views/right_panel/BaseCard";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
+import { TileShape } from "../views/rooms/EventTile";
 
 interface IProps {
     onClose(): void;
@@ -48,7 +49,7 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
                     manageReadMarkers={false}
                     timelineSet={timelineSet}
                     showUrlPreview={false}
-                    tileShape="notif"
+                    tileShape={TileShape.Notif}
                     empty={emptyState}
                     alwaysShowTimestamps={true}
                 />
diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 1e0605f263..7770b32f04 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -207,9 +207,9 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         this.getMoreRooms();
     };
 
-    private getMoreRooms() {
-        if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms
-        if (!MatrixClientPeg.get()) return Promise.resolve();
+    private getMoreRooms(): Promise<boolean> {
+        if (this.state.selectedCommunityId) return Promise.resolve(false); // no more rooms
+        if (!MatrixClientPeg.get()) return Promise.resolve(false);
 
         this.setState({
             loading: true,
@@ -239,12 +239,12 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 // if the filter or server has changed since this request was sent,
                 // throw away the result (don't even clear the busy flag
                 // since we must still have a request in flight)
-                return;
+                return false;
             }
 
             if (this.unmounted) {
                 // if we've been unmounted, we don't care either.
-                return;
+                return false;
             }
 
             if (this.state.filterString) {
@@ -264,14 +264,13 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 filterString != this.state.filterString ||
                 roomServer != this.state.roomServer ||
                 nextBatch != this.nextBatch) {
-                // as above: we don't care about errors for old
-                // requests either
-                return;
+                // as above: we don't care about errors for old requests either
+                return false;
             }
 
             if (this.unmounted) {
                 // if we've been unmounted, we don't care either.
-                return;
+                return false;
             }
 
             console.error("Failed to get publicRooms: %s", JSON.stringify(err));
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 885851e8e6..338da29875 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1125,7 +1125,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         }
     }
 
-    private onSearchResultsFillRequest = (backwards: boolean) => {
+    private onSearchResultsFillRequest = (backwards: boolean): Promise<boolean> => {
         if (!backwards) {
             return Promise.resolve(false);
         }
@@ -1291,7 +1291,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.handleSearchResult(searchPromise);
     };
 
-    private handleSearchResult(searchPromise: Promise<any>) {
+    private handleSearchResult(searchPromise: Promise<any>): Promise<boolean> {
         // keep a record of the current search id, so that if the search terms
         // change before we get a response, we can ignore the results.
         const localSearchId = this.searchId;
@@ -1304,7 +1304,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             debuglog("search complete");
             if (this.unmounted || !this.state.searching || this.searchId != localSearchId) {
                 console.error("Discarding stale search results");
-                return;
+                return false;
             }
 
             // postgres on synapse returns us precise details of the strings
@@ -1336,6 +1336,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 description: ((error && error.message) ? error.message :
                     _t("Server may be unavailable, overloaded, or search timed out :(")),
             });
+            return false;
         }).finally(() => {
             this.setState({
                 searchInProgress: false,
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.tsx
similarity index 73%
rename from src/components/structures/ScrollPanel.js
rename to src/components/structures/ScrollPanel.tsx
index f6e1530537..b8e0cdbc34 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2021 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.
@@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from "react";
-import PropTypes from 'prop-types';
+import React, { createRef, CSSProperties, ReactNode, SyntheticEvent, KeyboardEvent } from "react";
+
 import Timer from '../../utils/Timer';
 import AutoHideScrollbar from "./AutoHideScrollbar";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { getKeyBindingsManager, RoomAction } from "../../KeyBindingsManager";
+import ResizeNotifier from "../../utils/ResizeNotifier";
 
 const DEBUG_SCROLL = false;
 
 // The amount of extra scroll distance to allow prior to unfilling.
-// See _getExcessHeight.
+// See getExcessHeight.
 const UNPAGINATION_PADDING = 6000;
 // The number of milliseconds to debounce calls to onUnfillRequest, to prevent
 // many scroll events causing many unfilling requests.
@@ -43,6 +44,75 @@ if (DEBUG_SCROLL) {
     debuglog = function() {};
 }
 
+interface IProps {
+    /* stickyBottom: if set to true, then once the user hits the bottom of
+     * the list, any new children added to the list will cause the list to
+     * scroll down to show the new element, rather than preserving the
+     * existing view.
+     */
+    stickyBottom?: boolean;
+
+    /* startAtBottom: if set to true, the view is assumed to start
+     * scrolled to the bottom.
+     * XXX: It's likely this is unnecessary and can be derived from
+     * stickyBottom, but I'm adding an extra parameter to ensure
+     * behaviour stays the same for other uses of ScrollPanel.
+     * If so, let's remove this parameter down the line.
+     */
+    startAtBottom?: boolean;
+
+    /* className: classnames to add to the top-level div
+     */
+    className?: string;
+
+    /* style: styles to add to the top-level div
+     */
+    style?: CSSProperties;
+
+    /* resizeNotifier: ResizeNotifier to know when middle column has changed size
+     */
+    resizeNotifier?: ResizeNotifier;
+
+    /* fixedChildren: allows for children to be passed which are rendered outside
+     * of the wrapper
+     */
+    fixedChildren?: ReactNode;
+
+    /* onFillRequest(backwards): a callback which is called on scroll when
+     * the user nears the start (backwards = true) or end (backwards =
+     * false) of the list.
+     *
+     * This should return a promise; no more calls will be made until the
+     * promise completes.
+     *
+     * The promise should resolve to true if there is more data to be
+     * retrieved in this direction (in which case onFillRequest may be
+     * called again immediately), or false if there is no more data in this
+     * directon (at this time) - which will stop the pagination cycle until
+     * the user scrolls again.
+     */
+    onFillRequest?(backwards: boolean): Promise<boolean>;
+
+    /* onUnfillRequest(backwards): a callback which is called on scroll when
+     * there are children elements that are far out of view and could be removed
+     * without causing pagination to occur.
+     *
+     * This function should accept a boolean, which is true to indicate the back/top
+     * of the panel and false otherwise, and a scroll token, which refers to the
+     * first element to remove if removing from the front/bottom, and last element
+     * to remove if removing from the back/top.
+     */
+    onUnfillRequest?(backwards: boolean, scrollToken: string): void;
+
+    /* onScroll: a callback which is called whenever any scroll happens.
+     */
+    onScroll?(event: Event): void;
+
+    /* onUserScroll: callback which is called when the user interacts with the room timeline
+     */
+    onUserScroll?(event: SyntheticEvent): void;
+}
+
 /* This component implements an intelligent scrolling list.
  *
  * It wraps a list of <li> children; when items are added to the start or end
@@ -84,97 +154,54 @@ if (DEBUG_SCROLL) {
  * offset as normal.
  */
 
+export interface IScrollState {
+    stuckAtBottom: boolean;
+    trackedNode?: HTMLElement;
+    trackedScrollToken?: string;
+    bottomOffset?: number;
+    pixelOffset?: number;
+}
+
+interface IPreventShrinkingState {
+    offsetFromBottom: number;
+    offsetNode: HTMLElement;
+}
+
 @replaceableComponent("structures.ScrollPanel")
-export default class ScrollPanel extends React.Component {
-    static propTypes = {
-        /* stickyBottom: if set to true, then once the user hits the bottom of
-         * the list, any new children added to the list will cause the list to
-         * scroll down to show the new element, rather than preserving the
-         * existing view.
-         */
-        stickyBottom: PropTypes.bool,
-
-        /* startAtBottom: if set to true, the view is assumed to start
-         * scrolled to the bottom.
-         * XXX: It's likely this is unnecessary and can be derived from
-         * stickyBottom, but I'm adding an extra parameter to ensure
-         * behaviour stays the same for other uses of ScrollPanel.
-         * If so, let's remove this parameter down the line.
-         */
-        startAtBottom: PropTypes.bool,
-
-        /* onFillRequest(backwards): a callback which is called on scroll when
-         * the user nears the start (backwards = true) or end (backwards =
-         * false) of the list.
-         *
-         * This should return a promise; no more calls will be made until the
-         * promise completes.
-         *
-         * The promise should resolve to true if there is more data to be
-         * retrieved in this direction (in which case onFillRequest may be
-         * called again immediately), or false if there is no more data in this
-         * directon (at this time) - which will stop the pagination cycle until
-         * the user scrolls again.
-         */
-        onFillRequest: PropTypes.func,
-
-        /* onUnfillRequest(backwards): a callback which is called on scroll when
-         * there are children elements that are far out of view and could be removed
-         * without causing pagination to occur.
-         *
-         * This function should accept a boolean, which is true to indicate the back/top
-         * of the panel and false otherwise, and a scroll token, which refers to the
-         * first element to remove if removing from the front/bottom, and last element
-         * to remove if removing from the back/top.
-         */
-        onUnfillRequest: PropTypes.func,
-
-        /* onScroll: a callback which is called whenever any scroll happens.
-         */
-        onScroll: PropTypes.func,
-
-        /* onUserScroll: callback which is called when the user interacts with the room timeline
-         */
-        onUserScroll: PropTypes.func,
-
-        /* className: classnames to add to the top-level div
-         */
-        className: PropTypes.string,
-
-        /* style: styles to add to the top-level div
-         */
-        style: PropTypes.object,
-
-        /* resizeNotifier: ResizeNotifier to know when middle column has changed size
-         */
-        resizeNotifier: PropTypes.object,
-
-        /* fixedChildren: allows for children to be passed which are rendered outside
-         * of the wrapper
-         */
-        fixedChildren: PropTypes.node,
-    };
-
+export default class ScrollPanel extends React.Component<IProps> {
     static defaultProps = {
         stickyBottom: true,
         startAtBottom: true,
-        onFillRequest: function(backwards) { return Promise.resolve(false); },
-        onUnfillRequest: function(backwards, scrollToken) {},
+        onFillRequest: function(backwards: boolean) { return Promise.resolve(false); },
+        onUnfillRequest: function(backwards: boolean, scrollToken: string) {},
         onScroll: function() {},
     };
 
-    constructor(props) {
-        super(props);
+    private readonly pendingFillRequests: Record<"b" | "f", boolean> = {
+        b: null,
+        f: null,
+    };
+    private readonly itemlist = createRef<HTMLOListElement>();
+    private unmounted = false;
+    private scrollTimeout: Timer;
+    private isFilling: boolean;
+    private fillRequestWhileRunning: boolean;
+    private scrollState: IScrollState;
+    private preventShrinkingState: IPreventShrinkingState;
+    private unfillDebouncer: NodeJS.Timeout;
+    private bottomGrowth: number;
+    private pages: number;
+    private heightUpdateInProgress: boolean;
+    private divScroll: HTMLDivElement;
 
-        this._pendingFillRequests = {b: null, f: null};
+    constructor(props, context) {
+        super(props, context);
 
         if (this.props.resizeNotifier) {
             this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
         }
 
         this.resetScrollState();
-
-        this._itemlist = createRef();
     }
 
     componentDidMount() {
@@ -203,18 +230,18 @@ export default class ScrollPanel extends React.Component {
         }
     }
 
-    onScroll = ev => {
+    private onScroll = ev => {
         // skip scroll events caused by resizing
         if (this.props.resizeNotifier && this.props.resizeNotifier.isResizing) return;
-        debuglog("onScroll", this._getScrollNode().scrollTop);
-        this._scrollTimeout.restart();
-        this._saveScrollState();
+        debuglog("onScroll", this.getScrollNode().scrollTop);
+        this.scrollTimeout.restart();
+        this.saveScrollState();
         this.updatePreventShrinking();
         this.props.onScroll(ev);
         this.checkFillState();
     };
 
-    onResize = () => {
+    private onResize = () => {
         debuglog("onResize");
         this.checkScroll();
         // update preventShrinkingState if present
@@ -225,11 +252,11 @@ export default class ScrollPanel extends React.Component {
 
     // after an update to the contents of the panel, check that the scroll is
     // where it ought to be, and set off pagination requests if necessary.
-    checkScroll = () => {
+    public checkScroll = () => {
         if (this.unmounted) {
             return;
         }
-        this._restoreSavedScrollState();
+        this.restoreSavedScrollState();
         this.checkFillState();
     };
 
@@ -238,8 +265,8 @@ export default class ScrollPanel extends React.Component {
     // note that this is independent of the 'stuckAtBottom' state - it is simply
     // about whether the content is scrolled down right now, irrespective of
     // whether it will stay that way when the children update.
-    isAtBottom = () => {
-        const sn = this._getScrollNode();
+    public isAtBottom = () => {
+        const sn = this.getScrollNode();
         // fractional values (both too big and too small)
         // for scrollTop happen on certain browsers/platforms
         // when scrolled all the way down. E.g. Chrome 72 on debian.
@@ -278,10 +305,10 @@ export default class ScrollPanel extends React.Component {
     //   |#########|   -                                   |
     //   |#########|                                       |
     //   `---------'                                       -
-    _getExcessHeight(backwards) {
-        const sn = this._getScrollNode();
-        const contentHeight = this._getMessagesHeight();
-        const listHeight = this._getListHeight();
+    private getExcessHeight(backwards: boolean): number {
+        const sn = this.getScrollNode();
+        const contentHeight = this.getMessagesHeight();
+        const listHeight = this.getListHeight();
         const clippedHeight = contentHeight - listHeight;
         const unclippedScrollTop = sn.scrollTop + clippedHeight;
 
@@ -293,13 +320,13 @@ export default class ScrollPanel extends React.Component {
     }
 
     // check the scroll state and send out backfill requests if necessary.
-    checkFillState = async (depth=0) => {
+    public checkFillState = async (depth = 0): Promise<void> => {
         if (this.unmounted) {
             return;
         }
 
         const isFirstCall = depth === 0;
-        const sn = this._getScrollNode();
+        const sn = this.getScrollNode();
 
         // if there is less than a screenful of messages above or below the
         // viewport, try to get some more messages.
@@ -330,17 +357,17 @@ export default class ScrollPanel extends React.Component {
         // do make a note when a new request comes in while already running one,
         // so we can trigger a new chain of calls once done.
         if (isFirstCall) {
-            if (this._isFilling) {
-                debuglog("_isFilling: not entering while request is ongoing, marking for a subsequent request");
-                this._fillRequestWhileRunning = true;
+            if (this.isFilling) {
+                debuglog("isFilling: not entering while request is ongoing, marking for a subsequent request");
+                this.fillRequestWhileRunning = true;
                 return;
             }
-            debuglog("_isFilling: setting");
-            this._isFilling = true;
+            debuglog("isFilling: setting");
+            this.isFilling = true;
         }
 
-        const itemlist = this._itemlist.current;
-        const firstTile = itemlist && itemlist.firstElementChild;
+        const itemlist = this.itemlist.current;
+        const firstTile = itemlist && itemlist.firstElementChild as HTMLElement;
         const contentTop = firstTile && firstTile.offsetTop;
         const fillPromises = [];
 
@@ -348,13 +375,13 @@ export default class ScrollPanel extends React.Component {
         // try backward filling
         if (!firstTile || (sn.scrollTop - contentTop) < sn.clientHeight) {
             // need to back-fill
-            fillPromises.push(this._maybeFill(depth, true));
+            fillPromises.push(this.maybeFill(depth, true));
         }
         // if scrollTop gets to 2 screens from the end (so 1 screen below viewport),
         // try forward filling
         if ((sn.scrollHeight - sn.scrollTop) < sn.clientHeight * 2) {
             // need to forward-fill
-            fillPromises.push(this._maybeFill(depth, false));
+            fillPromises.push(this.maybeFill(depth, false));
         }
 
         if (fillPromises.length) {
@@ -365,26 +392,26 @@ export default class ScrollPanel extends React.Component {
             }
         }
         if (isFirstCall) {
-            debuglog("_isFilling: clearing");
-            this._isFilling = false;
+            debuglog("isFilling: clearing");
+            this.isFilling = false;
         }
 
-        if (this._fillRequestWhileRunning) {
-            this._fillRequestWhileRunning = false;
+        if (this.fillRequestWhileRunning) {
+            this.fillRequestWhileRunning = false;
             this.checkFillState();
         }
     };
 
     // check if unfilling is possible and send an unfill request if necessary
-    _checkUnfillState(backwards) {
-        let excessHeight = this._getExcessHeight(backwards);
+    private checkUnfillState(backwards: boolean): void {
+        let excessHeight = this.getExcessHeight(backwards);
         if (excessHeight <= 0) {
             return;
         }
 
         const origExcessHeight = excessHeight;
 
-        const tiles = this._itemlist.current.children;
+        const tiles = this.itemlist.current.children;
 
         // The scroll token of the first/last tile to be unpaginated
         let markerScrollToken = null;
@@ -413,11 +440,11 @@ export default class ScrollPanel extends React.Component {
         if (markerScrollToken) {
             // Use a debouncer to prevent multiple unfill calls in quick succession
             // This is to make the unfilling process less aggressive
-            if (this._unfillDebouncer) {
-                clearTimeout(this._unfillDebouncer);
+            if (this.unfillDebouncer) {
+                clearTimeout(this.unfillDebouncer);
             }
-            this._unfillDebouncer = setTimeout(() => {
-                this._unfillDebouncer = null;
+            this.unfillDebouncer = setTimeout(() => {
+                this.unfillDebouncer = null;
                 debuglog("unfilling now", backwards, origExcessHeight);
                 this.props.onUnfillRequest(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
@@ -425,9 +452,9 @@ export default class ScrollPanel extends React.Component {
     }
 
     // check if there is already a pending fill request. If not, set one off.
-    _maybeFill(depth, backwards) {
+    private maybeFill(depth: number, backwards: boolean): Promise<void> {
         const dir = backwards ? 'b' : 'f';
-        if (this._pendingFillRequests[dir]) {
+        if (this.pendingFillRequests[dir]) {
             debuglog("Already a "+dir+" fill in progress - not starting another");
             return;
         }
@@ -436,7 +463,7 @@ export default class ScrollPanel extends React.Component {
 
         // onFillRequest can end up calling us recursively (via onScroll
         // events) so make sure we set this before firing off the call.
-        this._pendingFillRequests[dir] = true;
+        this.pendingFillRequests[dir] = true;
 
         // wait 1ms before paginating, because otherwise
         // this will block the scroll event handler for +700ms
@@ -445,13 +472,13 @@ export default class ScrollPanel extends React.Component {
         return new Promise(resolve => setTimeout(resolve, 1)).then(() => {
             return this.props.onFillRequest(backwards);
         }).finally(() => {
-            this._pendingFillRequests[dir] = false;
+            this.pendingFillRequests[dir] = false;
         }).then((hasMoreResults) => {
             if (this.unmounted) {
                 return;
             }
             // Unpaginate once filling is complete
-            this._checkUnfillState(!backwards);
+            this.checkUnfillState(!backwards);
 
             debuglog(""+dir+" fill complete; hasMoreResults:"+hasMoreResults);
             if (hasMoreResults) {
@@ -477,7 +504,7 @@ export default class ScrollPanel extends React.Component {
      *   the number of pixels the bottom of the tracked child is above the
      *   bottom of the scroll panel.
      */
-    getScrollState = () => this.scrollState;
+    public getScrollState = (): IScrollState => this.scrollState;
 
     /* reset the saved scroll state.
      *
@@ -491,35 +518,35 @@ export default class ScrollPanel extends React.Component {
      * no use if no children exist yet, or if you are about to replace the
      * child list.)
      */
-    resetScrollState = () => {
+    public resetScrollState = (): void => {
         this.scrollState = {
             stuckAtBottom: this.props.startAtBottom,
         };
-        this._bottomGrowth = 0;
-        this._pages = 0;
-        this._scrollTimeout = new Timer(100);
-        this._heightUpdateInProgress = false;
+        this.bottomGrowth = 0;
+        this.pages = 0;
+        this.scrollTimeout = new Timer(100);
+        this.heightUpdateInProgress = false;
     };
 
     /**
      * jump to the top of the content.
      */
-    scrollToTop = () => {
-        this._getScrollNode().scrollTop = 0;
-        this._saveScrollState();
+    public scrollToTop = (): void => {
+        this.getScrollNode().scrollTop = 0;
+        this.saveScrollState();
     };
 
     /**
      * jump to the bottom of the content.
      */
-    scrollToBottom = () => {
+    public scrollToBottom = (): void => {
         // the easiest way to make sure that the scroll state is correctly
         // saved is to do the scroll, then save the updated state. (Calculating
         // it ourselves is hard, and we can't rely on an onScroll callback
         // happening, since there may be no user-visible change here).
-        const sn = this._getScrollNode();
+        const sn = this.getScrollNode();
         sn.scrollTop = sn.scrollHeight;
-        this._saveScrollState();
+        this.saveScrollState();
     };
 
     /**
@@ -527,18 +554,18 @@ export default class ScrollPanel extends React.Component {
      *
      * @param {number} mult: -1 to page up, +1 to page down
      */
-    scrollRelative = mult => {
-        const scrollNode = this._getScrollNode();
+    public scrollRelative = (mult: number): void => {
+        const scrollNode = this.getScrollNode();
         const delta = mult * scrollNode.clientHeight * 0.9;
         scrollNode.scrollBy(0, delta);
-        this._saveScrollState();
+        this.saveScrollState();
     };
 
     /**
      * Scroll up/down in response to a scroll key
      * @param {object} ev the keyboard event
      */
-    handleScrollKey = ev => {
+    public handleScrollKey = (ev: KeyboardEvent) => {
         let isScrolling = false;
         const roomAction = getKeyBindingsManager().getRoomAction(ev);
         switch (roomAction) {
@@ -575,17 +602,17 @@ export default class ScrollPanel extends React.Component {
      * node (specifically, the bottom of it) will be positioned. If omitted, it
      * defaults to 0.
      */
-    scrollToToken = (scrollToken, pixelOffset, offsetBase) => {
+    public scrollToToken = (scrollToken: string, pixelOffset: number, offsetBase: number): void => {
         pixelOffset = pixelOffset || 0;
         offsetBase = offsetBase || 0;
 
-        // set the trackedScrollToken so we can get the node through _getTrackedNode
+        // set the trackedScrollToken so we can get the node through getTrackedNode
         this.scrollState = {
             stuckAtBottom: false,
             trackedScrollToken: scrollToken,
         };
-        const trackedNode = this._getTrackedNode();
-        const scrollNode = this._getScrollNode();
+        const trackedNode = this.getTrackedNode();
+        const scrollNode = this.getScrollNode();
         if (trackedNode) {
             // set the scrollTop to the position we want.
             // note though, that this might not succeed if the combination of offsetBase and pixelOffset
@@ -595,34 +622,34 @@ export default class ScrollPanel extends React.Component {
             // enough so it ends up in the top of the viewport.
             debuglog("scrollToken: setting scrollTop", {offsetBase, pixelOffset, offsetTop: trackedNode.offsetTop});
             scrollNode.scrollTop = (trackedNode.offsetTop - (scrollNode.clientHeight * offsetBase)) + pixelOffset;
-            this._saveScrollState();
+            this.saveScrollState();
         }
     };
 
-    _saveScrollState() {
+    private saveScrollState(): void {
         if (this.props.stickyBottom && this.isAtBottom()) {
             this.scrollState = { stuckAtBottom: true };
             debuglog("saved stuckAtBottom state");
             return;
         }
 
-        const scrollNode = this._getScrollNode();
+        const scrollNode = this.getScrollNode();
         const viewportBottom = scrollNode.scrollHeight - (scrollNode.scrollTop + scrollNode.clientHeight);
 
-        const itemlist = this._itemlist.current;
+        const itemlist = this.itemlist.current;
         const messages = itemlist.children;
         let node = null;
 
         // TODO: do a binary search here, as items are sorted by offsetTop
         // loop backwards, from bottom-most message (as that is the most common case)
-        for (let i = messages.length-1; i >= 0; --i) {
-            if (!messages[i].dataset.scrollTokens) {
+        for (let i = messages.length - 1; i >= 0; --i) {
+            if (!(messages[i] as HTMLElement).dataset.scrollTokens) {
                 continue;
             }
             node = messages[i];
             // break at the first message (coming from the bottom)
             // that has it's offsetTop above the bottom of the viewport.
-            if (this._topFromBottom(node) > viewportBottom) {
+            if (this.topFromBottom(node) > viewportBottom) {
                 // Use this node as the scrollToken
                 break;
             }
@@ -634,7 +661,7 @@ export default class ScrollPanel extends React.Component {
         }
         const scrollToken = node.dataset.scrollTokens.split(',')[0];
         debuglog("saving anchored scroll state to message", node && node.innerText, scrollToken);
-        const bottomOffset = this._topFromBottom(node);
+        const bottomOffset = this.topFromBottom(node);
         this.scrollState = {
             stuckAtBottom: false,
             trackedNode: node,
@@ -644,35 +671,35 @@ export default class ScrollPanel extends React.Component {
         };
     }
 
-    async _restoreSavedScrollState() {
+    private async restoreSavedScrollState(): Promise<void> {
         const scrollState = this.scrollState;
 
         if (scrollState.stuckAtBottom) {
-            const sn = this._getScrollNode();
+            const sn = this.getScrollNode();
             if (sn.scrollTop !== sn.scrollHeight) {
                 sn.scrollTop = sn.scrollHeight;
             }
         } else if (scrollState.trackedScrollToken) {
-            const itemlist = this._itemlist.current;
-            const trackedNode = this._getTrackedNode();
+            const itemlist = this.itemlist.current;
+            const trackedNode = this.getTrackedNode();
             if (trackedNode) {
-                const newBottomOffset = this._topFromBottom(trackedNode);
+                const newBottomOffset = this.topFromBottom(trackedNode);
                 const bottomDiff = newBottomOffset - scrollState.bottomOffset;
-                this._bottomGrowth += bottomDiff;
+                this.bottomGrowth += bottomDiff;
                 scrollState.bottomOffset = newBottomOffset;
-                const newHeight = `${this._getListHeight()}px`;
+                const newHeight = `${this.getListHeight()}px`;
                 if (itemlist.style.height !== newHeight) {
                     itemlist.style.height = newHeight;
                 }
                 debuglog("balancing height because messages below viewport grew by", bottomDiff);
             }
         }
-        if (!this._heightUpdateInProgress) {
-            this._heightUpdateInProgress = true;
+        if (!this.heightUpdateInProgress) {
+            this.heightUpdateInProgress = true;
             try {
-                await this._updateHeight();
+                await this.updateHeight();
             } finally {
-                this._heightUpdateInProgress = false;
+                this.heightUpdateInProgress = false;
             }
         } else {
             debuglog("not updating height because request already in progress");
@@ -680,11 +707,11 @@ export default class ScrollPanel extends React.Component {
     }
 
     // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
-    async _updateHeight() {
+    private async updateHeight(): Promise<void> {
         // wait until user has stopped scrolling
-        if (this._scrollTimeout.isRunning()) {
+        if (this.scrollTimeout.isRunning()) {
             debuglog("updateHeight waiting for scrolling to end ... ");
-            await this._scrollTimeout.finished();
+            await this.scrollTimeout.finished();
         } else {
             debuglog("updateHeight getting straight to business, no scrolling going on.");
         }
@@ -694,14 +721,14 @@ export default class ScrollPanel extends React.Component {
             return;
         }
 
-        const sn = this._getScrollNode();
-        const itemlist = this._itemlist.current;
-        const contentHeight = this._getMessagesHeight();
+        const sn = this.getScrollNode();
+        const itemlist = this.itemlist.current;
+        const contentHeight = this.getMessagesHeight();
         const minHeight = sn.clientHeight;
         const height = Math.max(minHeight, contentHeight);
-        this._pages = Math.ceil(height / PAGE_SIZE);
-        this._bottomGrowth = 0;
-        const newHeight = `${this._getListHeight()}px`;
+        this.pages = Math.ceil(height / PAGE_SIZE);
+        this.bottomGrowth = 0;
+        const newHeight = `${this.getListHeight()}px`;
 
         const scrollState = this.scrollState;
         if (scrollState.stuckAtBottom) {
@@ -713,7 +740,7 @@ export default class ScrollPanel extends React.Component {
             }
             debuglog("updateHeight to", newHeight);
         } else if (scrollState.trackedScrollToken) {
-            const trackedNode = this._getTrackedNode();
+            const trackedNode = this.getTrackedNode();
             // if the timeline has been reloaded
             // this can be called before scrollToBottom or whatever has been called
             // so don't do anything if the node has disappeared from
@@ -735,17 +762,17 @@ export default class ScrollPanel extends React.Component {
         }
     }
 
-    _getTrackedNode() {
+    private getTrackedNode(): HTMLElement {
         const scrollState = this.scrollState;
         const trackedNode = scrollState.trackedNode;
 
         if (!trackedNode || !trackedNode.parentElement) {
             let node;
-            const messages = this._itemlist.current.children;
+            const messages = this.itemlist.current.children;
             const scrollToken = scrollState.trackedScrollToken;
 
             for (let i = messages.length-1; i >= 0; --i) {
-                const m = messages[i];
+                const m = messages[i] as HTMLElement;
                 // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
                 // There might only be one scroll token
                 if (m.dataset.scrollTokens &&
@@ -768,45 +795,45 @@ export default class ScrollPanel extends React.Component {
         return scrollState.trackedNode;
     }
 
-    _getListHeight() {
-        return this._bottomGrowth + (this._pages * PAGE_SIZE);
+    private getListHeight(): number {
+        return this.bottomGrowth + (this.pages * PAGE_SIZE);
     }
 
-    _getMessagesHeight() {
-        const itemlist = this._itemlist.current;
-        const lastNode = itemlist.lastElementChild;
+    private getMessagesHeight(): number {
+        const itemlist = this.itemlist.current;
+        const lastNode = itemlist.lastElementChild as HTMLElement;
         const lastNodeBottom = lastNode ? lastNode.offsetTop + lastNode.clientHeight : 0;
-        const firstNodeTop = itemlist.firstElementChild ? itemlist.firstElementChild.offsetTop : 0;
+        const firstNodeTop = itemlist.firstElementChild ? (itemlist.firstElementChild as HTMLElement).offsetTop : 0;
         // 18 is itemlist padding
         return lastNodeBottom - firstNodeTop + (18 * 2);
     }
 
-    _topFromBottom(node) {
+    private topFromBottom(node: HTMLElement): number {
         // current capped height - distance from top = distance from bottom of container to top of tracked element
-        return this._itemlist.current.clientHeight - node.offsetTop;
+        return this.itemlist.current.clientHeight - node.offsetTop;
     }
 
     /* get the DOM node which has the scrollTop property we care about for our
      * message panel.
      */
-    _getScrollNode() {
+    private getScrollNode(): HTMLDivElement {
         if (this.unmounted) {
             // this shouldn't happen, but when it does, turn the NPE into
             // something more meaningful.
-            throw new Error("ScrollPanel._getScrollNode called when unmounted");
+            throw new Error("ScrollPanel.getScrollNode called when unmounted");
         }
 
-        if (!this._divScroll) {
+        if (!this.divScroll) {
             // Likewise, we should have the ref by this point, but if not
             // turn the NPE into something meaningful.
-            throw new Error("ScrollPanel._getScrollNode called before AutoHideScrollbar ref collected");
+            throw new Error("ScrollPanel.getScrollNode called before AutoHideScrollbar ref collected");
         }
 
-        return this._divScroll;
+        return this.divScroll;
     }
 
-    _collectScroll = divScroll => {
-        this._divScroll = divScroll;
+    private collectScroll = (divScroll: HTMLDivElement) => {
+        this.divScroll = divScroll;
     };
 
     /**
@@ -814,15 +841,15 @@ export default class ScrollPanel extends React.Component {
     anything below it changes, by calling updatePreventShrinking, to keep
     the same minimum bottom offset, effectively preventing the timeline to shrink.
     */
-    preventShrinking = () => {
-        const messageList = this._itemlist.current;
+    public preventShrinking = (): void => {
+        const messageList = this.itemlist.current;
         const tiles = messageList && messageList.children;
         if (!messageList) {
             return;
         }
         let lastTileNode;
         for (let i = tiles.length - 1; i >= 0; i--) {
-            const node = tiles[i];
+            const node = tiles[i] as HTMLElement;
             if (node.dataset.scrollTokens) {
                 lastTileNode = node;
                 break;
@@ -841,8 +868,8 @@ export default class ScrollPanel extends React.Component {
     };
 
     /** Clear shrinking prevention. Used internally, and when the timeline is reloaded. */
-    clearPreventShrinking = () => {
-        const messageList = this._itemlist.current;
+    public clearPreventShrinking = (): void => {
+        const messageList = this.itemlist.current;
         const balanceElement = messageList && messageList.parentElement;
         if (balanceElement) balanceElement.style.paddingBottom = null;
         this.preventShrinkingState = null;
@@ -857,11 +884,11 @@ export default class ScrollPanel extends React.Component {
     from the bottom of the marked tile grows larger than
     what it was when marking.
     */
-    updatePreventShrinking = () => {
+    public updatePreventShrinking = (): void => {
         if (this.preventShrinkingState) {
-            const sn = this._getScrollNode();
+            const sn = this.getScrollNode();
             const scrollState = this.scrollState;
-            const messageList = this._itemlist.current;
+            const messageList = this.itemlist.current;
             const {offsetNode, offsetFromBottom} = this.preventShrinkingState;
             // element used to set paddingBottom to balance the typing notifs disappearing
             const balanceElement = messageList.parentElement;
@@ -898,13 +925,15 @@ export default class ScrollPanel extends React.Component {
         // list-style-type: none; is no longer a list
         return (
             <AutoHideScrollbar
-                wrappedRef={this._collectScroll}
+                wrappedRef={this.collectScroll}
                 onScroll={this.onScroll}
                 onWheel={this.props.onUserScroll}
-                className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
+                className={`mx_ScrollPanel ${this.props.className}`}
+                style={this.props.style}
+            >
                 { this.props.fixedChildren }
                 <div className="mx_RoomView_messageListWrapper">
-                    <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
+                    <ol ref={this.itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
                         { this.props.children }
                     </ol>
                 </div>
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.tsx
similarity index 75%
rename from src/components/structures/TimelinePanel.js
rename to src/components/structures/TimelinePanel.tsx
index 03d0b5c6d7..c2e7a6f346 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.tsx
@@ -1,8 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 New Vector Ltd
-Copyright 2019-2020 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2021 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.
@@ -17,13 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import SettingsStore from "../../settings/SettingsStore";
-import { LayoutPropType } from "../../settings/Layout";
-import React, { createRef } from 'react';
+import React, { createRef, ReactNode, SyntheticEvent } from 'react';
 import ReactDOM from "react-dom";
-import PropTypes from 'prop-types';
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { TimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
 import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
 import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+
+import SettingsStore from "../../settings/SettingsStore";
+import { Layout } from "../../settings/Layout";
 import { _t } from '../../languageHandler';
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import RoomContext from "../../contexts/RoomContext";
@@ -35,11 +35,19 @@ import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
-import { haveTileForEvent } from "../views/rooms/EventTile";
+import { haveTileForEvent, TileShape } from "../views/rooms/EventTile";
 import { UIFeature } from "../../settings/UIFeature";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { arrayFastClone } from "../../utils/arrays";
 import { Action } from "../../dispatcher/actions";
+import MessagePanel from "./MessagePanel";
+import { SyncState } from 'matrix-js-sdk/src/sync.api';
+import { IScrollState } from "./ScrollPanel";
+import { ActionPayload } from "../../dispatcher/payloads";
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import Spinner from "../views/elements/Spinner";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -47,90 +55,159 @@ const READ_RECEIPT_INTERVAL_MS = 500;
 
 const DEBUG = false;
 
-let debuglog = function() {};
+let debuglog = function(...s: any[]) {};
 if (DEBUG) {
     // using bind means that we get to keep useful line numbers in the console
     debuglog = console.log.bind(console);
 }
 
+interface IProps {
+    // The js-sdk EventTimelineSet object for the timeline sequence we are
+    // representing.  This may or may not have a room, depending on what it's
+    // a timeline representing.  If it has a room, we maintain RRs etc for
+    // that room.
+    timelineSet: TimelineSet;
+    showReadReceipts?: boolean;
+    // Enable managing RRs and RMs. These require the timelineSet to have a room.
+    manageReadReceipts?: boolean;
+    sendReadReceiptOnLoad?: boolean;
+    manageReadMarkers?: boolean;
+
+    // true to give the component a 'display: none' style.
+    hidden?: boolean;
+
+    // ID of an event to highlight. If undefined, no event will be highlighted.
+    // typically this will be either 'eventId' or undefined.
+    highlightedEventId?: string;
+
+    // id of an event to jump to. If not given, will go to the end of the live timeline.
+    eventId?: string;
+
+    // where to position the event given by eventId, in pixels from the bottom of the viewport.
+    // If not given, will try to put the event half way down the viewport.
+    eventPixelOffset?: number;
+
+    // Should we show URL Previews
+    showUrlPreview?: boolean;
+
+    // maximum number of events to show in a timeline
+    timelineCap?: number;
+
+    // classname to use for the messagepanel
+    className?: string;
+
+    // shape property to be passed to EventTiles
+    tileShape?: TileShape;
+
+    // placeholder to use if the timeline is empty
+    empty?: ReactNode;
+
+    // whether to show reactions for an event
+    showReactions?: boolean;
+
+    // which layout to use
+    layout?: Layout;
+
+    // whether to always show timestamps for an event
+    alwaysShowTimestamps?: boolean;
+
+    resizeNotifier?: ResizeNotifier;
+    editState?: EditorStateTransfer;
+    permalinkCreator?: RoomPermalinkCreator;
+    membersLoaded?: boolean;
+
+    // callback which is called when the panel is scrolled.
+    onScroll?(event: Event): void;
+
+    // callback which is called when the user interacts with the room timeline
+    onUserScroll?(event: SyntheticEvent): void;
+
+    // callback which is called when the read-up-to mark is updated.
+    onReadMarkerUpdated?(): void;
+
+    // callback which is called when we wish to paginate the timeline window.
+    onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise<boolean>,
+}
+
+interface IState {
+    events: MatrixEvent[];
+    liveEvents: MatrixEvent[];
+    // track whether our room timeline is loading
+    timelineLoading: boolean;
+
+    // the index of the first event that is to be shown
+    firstVisibleEventIndex: number;
+
+    // canBackPaginate == false may mean:
+    //
+    // * we haven't (successfully) loaded the timeline yet, or:
+    //
+    // * we have got to the point where the room was created, or:
+    //
+    // * the server indicated that there were no more visible events
+    //  (normally implying we got to the start of the room), or:
+    //
+    // * we gave up asking the server for more events
+    canBackPaginate: boolean;
+
+    // canForwardPaginate == false may mean:
+    //
+    // * we haven't (successfully) loaded the timeline yet
+    //
+    // * we have got to the end of time and are now tracking the live
+    //   timeline, or:
+    //
+    // * the server indicated that there were no more visible events
+    //   (not sure if this ever happens when we're not at the live
+    //   timeline), or:
+    //
+    // * we are looking at some historical point, but gave up asking
+    //   the server for more events
+    canForwardPaginate: boolean;
+
+    // start with the read-marker visible, so that we see its animated
+    // disappearance when switching into the room.
+    readMarkerVisible: boolean;
+
+    readMarkerEventId: string;
+
+    backPaginating: boolean;
+    forwardPaginating: boolean;
+
+    // cache of matrixClient.getSyncState() (but from the 'sync' event)
+    clientSyncState: SyncState;
+
+    // should the event tiles have twelve hour times
+    isTwelveHour: boolean;
+
+    // always show timestamps on event tiles?
+    alwaysShowTimestamps: boolean;
+
+    // how long to show the RM for when it's visible in the window
+    readMarkerInViewThresholdMs: number;
+
+    // how long to show the RM for when it's scrolled off-screen
+    readMarkerOutOfViewThresholdMs: number;
+
+    editState?: EditorStateTransfer;
+}
+
+interface IEventIndexOpts {
+    ignoreOwn?: boolean;
+    allowPartial?: boolean;
+}
+
 /*
  * Component which shows the event timeline in a room view.
  *
  * Also responsible for handling and sending read receipts.
  */
 @replaceableComponent("structures.TimelinePanel")
-class TimelinePanel extends React.Component {
-    static propTypes = {
-        // The js-sdk EventTimelineSet object for the timeline sequence we are
-        // representing.  This may or may not have a room, depending on what it's
-        // a timeline representing.  If it has a room, we maintain RRs etc for
-        // that room.
-        timelineSet: PropTypes.object.isRequired,
-
-        showReadReceipts: PropTypes.bool,
-        // Enable managing RRs and RMs. These require the timelineSet to have a room.
-        manageReadReceipts: PropTypes.bool,
-        sendReadReceiptOnLoad: PropTypes.bool,
-        manageReadMarkers: PropTypes.bool,
-
-        // true to give the component a 'display: none' style.
-        hidden: PropTypes.bool,
-
-        // ID of an event to highlight. If undefined, no event will be highlighted.
-        // typically this will be either 'eventId' or undefined.
-        highlightedEventId: PropTypes.string,
-
-        // id of an event to jump to. If not given, will go to the end of the
-        // live timeline.
-        eventId: PropTypes.string,
-
-        // where to position the event given by eventId, in pixels from the
-        // bottom of the viewport. If not given, will try to put the event
-        // half way down the viewport.
-        eventPixelOffset: PropTypes.number,
-
-        // Should we show URL Previews
-        showUrlPreview: PropTypes.bool,
-
-        // callback which is called when the panel is scrolled.
-        onScroll: PropTypes.func,
-
-        // callback which is called when the user interacts with the room timeline
-        onUserScroll: PropTypes.func,
-
-        // callback which is called when the read-up-to mark is updated.
-        onReadMarkerUpdated: PropTypes.func,
-
-        // callback which is called when we wish to paginate the timeline
-        // window.
-        onPaginationRequest: PropTypes.func,
-
-        // maximum number of events to show in a timeline
-        timelineCap: PropTypes.number,
-
-        // classname to use for the messagepanel
-        className: PropTypes.string,
-
-        // shape property to be passed to EventTiles
-        tileShape: PropTypes.string,
-
-        // placeholder to use if the timeline is empty
-        empty: PropTypes.node,
-
-        // whether to show reactions for an event
-        showReactions: PropTypes.bool,
-
-        // which layout to use
-        layout: LayoutPropType,
-
-        // whether to always show timestamps for an event
-        alwaysShowTimestamps: PropTypes.bool,
-    }
-
+class TimelinePanel extends React.Component<IProps, IState> {
     static contextType = RoomContext;
 
     // a map from room id to read marker event timestamp
-    static roomReadMarkerTsMap = {};
+    static roomReadMarkerTsMap: Record<string, number> = {};
 
     static defaultProps = {
         // By default, disable the timelineCap in favour of unpaginating based on
@@ -140,16 +217,21 @@ class TimelinePanel extends React.Component {
         sendReadReceiptOnLoad: true,
     };
 
-    constructor(props) {
-        super(props);
+    private lastRRSentEventId: string = undefined;
+    private lastRMSentEventId: string = undefined;
+
+    private readonly messagePanel = createRef<MessagePanel>();
+    private readonly dispatcherRef: string;
+    private timelineWindow?: TimelineWindow;
+    private unmounted = false;
+    private readReceiptActivityTimer: Timer;
+    private readMarkerActivityTimer: Timer;
+
+    constructor(props, context) {
+        super(props, context);
 
         debuglog("TimelinePanel: mounting");
 
-        this.lastRRSentEventId = undefined;
-        this.lastRMSentEventId = undefined;
-
-        this._messagePanel = createRef();
-
         // XXX: we could track RM per TimelineSet rather than per Room.
         // but for now we just do it per room for simplicity.
         let initialReadMarker = null;
@@ -158,82 +240,41 @@ class TimelinePanel extends React.Component {
             if (readmarker) {
                 initialReadMarker = readmarker.getContent().event_id;
             } else {
-                initialReadMarker = this._getCurrentReadReceipt();
+                initialReadMarker = this.getCurrentReadReceipt();
             }
         }
 
         this.state = {
             events: [],
             liveEvents: [],
-            timelineLoading: true, // track whether our room timeline is loading
-
-            // the index of the first event that is to be shown
+            timelineLoading: true,
             firstVisibleEventIndex: 0,
-
-            // canBackPaginate == false may mean:
-            //
-            // * we haven't (successfully) loaded the timeline yet, or:
-            //
-            // * we have got to the point where the room was created, or:
-            //
-            // * the server indicated that there were no more visible events
-            //  (normally implying we got to the start of the room), or:
-            //
-            // * we gave up asking the server for more events
             canBackPaginate: false,
-
-            // canForwardPaginate == false may mean:
-            //
-            // * we haven't (successfully) loaded the timeline yet
-            //
-            // * we have got to the end of time and are now tracking the live
-            //   timeline, or:
-            //
-            // * the server indicated that there were no more visible events
-            //   (not sure if this ever happens when we're not at the live
-            //   timeline), or:
-            //
-            // * we are looking at some historical point, but gave up asking
-            //   the server for more events
             canForwardPaginate: false,
-
-            // start with the read-marker visible, so that we see its animated
-            // disappearance when switching into the room.
             readMarkerVisible: true,
-
             readMarkerEventId: initialReadMarker,
-
             backPaginating: false,
             forwardPaginating: false,
-
-            // cache of matrixClient.getSyncState() (but from the 'sync' event)
             clientSyncState: MatrixClientPeg.get().getSyncState(),
-
-            // should the event tiles have twelve hour times
             isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
-
-            // always show timestamps on event tiles?
             alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
-
-            // how long to show the RM for when it's visible in the window
             readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"),
-
-            // how long to show the RM for when it's scrolled off-screen
             readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"),
         };
 
         this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
-        MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
-        MatrixClientPeg.get().on("Room.redaction", this.onRoomRedaction);
+        const cli = MatrixClientPeg.get();
+        cli.on("Room.timeline", this.onRoomTimeline);
+        cli.on("Room.timelineReset", this.onRoomTimelineReset);
+        cli.on("Room.redaction", this.onRoomRedaction);
         // same event handler as Room.redaction as for both we just do forceUpdate
-        MatrixClientPeg.get().on("Room.redactionCancelled", this.onRoomRedaction);
-        MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
-        MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
-        MatrixClientPeg.get().on("Room.accountData", this.onAccountData);
-        MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
-        MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced);
-        MatrixClientPeg.get().on("sync", this.onSync);
+        cli.on("Room.redactionCancelled", this.onRoomRedaction);
+        cli.on("Room.receipt", this.onRoomReceipt);
+        cli.on("Room.localEchoUpdated", this.onLocalEchoUpdated);
+        cli.on("Room.accountData", this.onAccountData);
+        cli.on("Event.decrypted", this.onEventDecrypted);
+        cli.on("Event.replaced", this.onEventReplaced);
+        cli.on("sync", this.onSync);
     }
 
     // TODO: [REACT-WARNING] Move into constructor
@@ -246,7 +287,7 @@ class TimelinePanel extends React.Component {
             this.updateReadMarkerOnUserActivity();
         }
 
-        this._initTimeline(this.props);
+        this.initTimeline(this.props);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -272,7 +313,7 @@ class TimelinePanel extends React.Component {
         if (differentEventId || differentHighlightedEventId) {
             console.log("TimelinePanel switching to eventId " + newProps.eventId +
                         " (was " + this.props.eventId + ")");
-            return this._initTimeline(newProps);
+            return this.initTimeline(newProps);
         }
     }
 
@@ -282,13 +323,13 @@ class TimelinePanel extends React.Component {
         //
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
-        if (this._readReceiptActivityTimer) {
-            this._readReceiptActivityTimer.abort();
-            this._readReceiptActivityTimer = null;
+        if (this.readReceiptActivityTimer) {
+            this.readReceiptActivityTimer.abort();
+            this.readReceiptActivityTimer = null;
         }
-        if (this._readMarkerActivityTimer) {
-            this._readMarkerActivityTimer.abort();
-            this._readMarkerActivityTimer = null;
+        if (this.readMarkerActivityTimer) {
+            this.readMarkerActivityTimer.abort();
+            this.readMarkerActivityTimer = null;
         }
 
         dis.unregister(this.dispatcherRef);
@@ -308,7 +349,7 @@ class TimelinePanel extends React.Component {
         }
     }
 
-    onMessageListUnfillRequest = (backwards, scrollToken) => {
+    private onMessageListUnfillRequest = (backwards: boolean, scrollToken: string): void => {
         // If backwards, unpaginate from the back (i.e. the start of the timeline)
         const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
         debuglog("TimelinePanel: unpaginating events in direction", dir);
@@ -327,21 +368,30 @@ class TimelinePanel extends React.Component {
 
         if (count > 0) {
             debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
-            this._timelineWindow.unpaginate(count, backwards);
+            this.timelineWindow.unpaginate(count, backwards);
 
-            // We can now paginate in the unpaginated direction
-            const canPaginateKey = (backwards) ? 'canBackPaginate' : 'canForwardPaginate';
-            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
-            this.setState({
-                [canPaginateKey]: true,
+            const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
+            const newState: Partial<IState> = {
                 events,
                 liveEvents,
                 firstVisibleEventIndex,
-            });
+            }
+
+            // We can now paginate in the unpaginated direction
+            if (backwards) {
+                newState.canBackPaginate = true;
+            } else {
+                newState.canForwardPaginate = true;
+            }
+            this.setState<null>(newState);
         }
     };
 
-    onPaginationRequest = (timelineWindow, direction, size) => {
+    private onPaginationRequest = (
+        timelineWindow: TimelineWindow,
+        direction: string,
+        size: number,
+    ): Promise<boolean> => {
         if (this.props.onPaginationRequest) {
             return this.props.onPaginationRequest(timelineWindow, direction, size);
         } else {
@@ -350,8 +400,8 @@ class TimelinePanel extends React.Component {
     };
 
     // set off a pagination request.
-    onMessageListFillRequest = backwards => {
-        if (!this._shouldPaginate()) return Promise.resolve(false);
+    private onMessageListFillRequest = (backwards: boolean): Promise<boolean> => {
+        if (!this.shouldPaginate()) return Promise.resolve(false);
 
         const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
         const canPaginateKey = backwards ? 'canBackPaginate' : 'canForwardPaginate';
@@ -362,9 +412,9 @@ class TimelinePanel extends React.Component {
             return Promise.resolve(false);
         }
 
-        if (!this._timelineWindow.canPaginate(dir)) {
+        if (!this.timelineWindow.canPaginate(dir)) {
             debuglog("TimelinePanel: can't", dir, "paginate any further");
-            this.setState({[canPaginateKey]: false});
+            this.setState<null>({ [canPaginateKey]: false });
             return Promise.resolve(false);
         }
 
@@ -374,15 +424,15 @@ class TimelinePanel extends React.Component {
         }
 
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
-        this.setState({[paginatingKey]: true});
+        this.setState<null>({ [paginatingKey]: true });
 
-        return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => {
+        return this.onPaginationRequest(this.timelineWindow, dir, PAGINATE_SIZE).then((r) => {
             if (this.unmounted) { return; }
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
 
-            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
-            const newState = {
+            const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
+            const newState: Partial<IState> = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
                 events,
@@ -395,7 +445,7 @@ class TimelinePanel extends React.Component {
             const otherDirection = backwards ? EventTimeline.FORWARDS : EventTimeline.BACKWARDS;
             const canPaginateOtherWayKey = backwards ? 'canForwardPaginate' : 'canBackPaginate';
             if (!this.state[canPaginateOtherWayKey] &&
-                    this._timelineWindow.canPaginate(otherDirection)) {
+                    this.timelineWindow.canPaginate(otherDirection)) {
                 debuglog('TimelinePanel: can now', otherDirection, 'paginate again');
                 newState[canPaginateOtherWayKey] = true;
             }
@@ -406,9 +456,9 @@ class TimelinePanel extends React.Component {
             // has in memory because we never gave the component a chance to scroll
             // itself into the right place
             return new Promise((resolve) => {
-                this.setState(newState, () => {
+                this.setState<null>(newState, () => {
                     // we can continue paginating in the given direction if:
-                    // - _timelineWindow.paginate says we can
+                    // - timelineWindow.paginate says we can
                     // - we're paginating forwards, or we won't be trying to
                     //   paginate backwards past the first visible event
                     resolve(r && (!backwards || firstVisibleEventIndex === 0));
@@ -417,7 +467,7 @@ class TimelinePanel extends React.Component {
         });
     };
 
-    onMessageListScroll = e => {
+    private onMessageListScroll = e => {
         if (this.props.onScroll) {
             this.props.onScroll(e);
         }
@@ -428,18 +478,18 @@ class TimelinePanel extends React.Component {
             // it goes back off the top of the screen (presumably because the user
             // clicks on the 'jump to bottom' button), we need to re-enable it.
             if (rmPosition < 0) {
-                this.setState({readMarkerVisible: true});
+                this.setState({ readMarkerVisible: true });
             }
 
             // if read marker position goes between 0 and -1/1,
             // (and user is active), switch timeout
-            const timeout = this._readMarkerTimeout(rmPosition);
+            const timeout = this.readMarkerTimeout(rmPosition);
             // NO-OP when timeout already has set to the given value
-            this._readMarkerActivityTimer.changeTimeout(timeout);
+            this.readMarkerActivityTimer.changeTimeout(timeout);
         }
     };
 
-    onAction = payload => {
+    private onAction = (payload: ActionPayload): void => {
         switch (payload.action) {
             case "ignore_state_changed":
                 this.forceUpdate();
@@ -447,9 +497,9 @@ class TimelinePanel extends React.Component {
 
             case "edit_event": {
                 const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
-                this.setState({editState}, () => {
-                    if (payload.event && this._messagePanel.current) {
-                        this._messagePanel.current.scrollToEventIfNeeded(
+                this.setState({ editState }, () => {
+                    if (payload.event && this.messagePanel.current) {
+                        this.messagePanel.current.scrollToEventIfNeeded(
                             payload.event.getId(),
                         );
                     }
@@ -479,7 +529,16 @@ class TimelinePanel extends React.Component {
         }
     };
 
-    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
+    private onRoomTimeline = (
+        ev: MatrixEvent,
+        room: Room,
+        toStartOfTimeline: boolean,
+        removed: boolean,
+        data: {
+            timeline: EventTimeline;
+            liveEvent?: boolean;
+        },
+    ): void => {
         // ignore events for other timeline sets
         if (data.timeline.getTimelineSet() !== this.props.timelineSet) return;
 
@@ -487,9 +546,9 @@ class TimelinePanel extends React.Component {
         // updates from pagination will happen when the paginate completes.
         if (toStartOfTimeline || !data || !data.liveEvent) return;
 
-        if (!this._messagePanel.current) return;
+        if (!this.messagePanel.current) return;
 
-        if (!this._messagePanel.current.getScrollState().stuckAtBottom) {
+        if (!this.messagePanel.current.getScrollState().stuckAtBottom) {
             // we won't load this event now, because we don't want to push any
             // events off the other end of the timeline. But we need to note
             // that we can now paginate.
@@ -506,13 +565,13 @@ class TimelinePanel extends React.Component {
         // timeline window.
         //
         // see https://github.com/vector-im/vector-web/issues/1035
-        this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => {
+        this.timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => {
             if (this.unmounted) { return; }
 
-            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this.getEvents();
             const lastLiveEvent = liveEvents[liveEvents.length - 1];
 
-            const updatedState = {
+            const updatedState: Partial<IState> = {
                 events,
                 liveEvents,
                 firstVisibleEventIndex,
@@ -537,15 +596,15 @@ class TimelinePanel extends React.Component {
                     // we know we're stuckAtBottom, so we can advance the RM
                     // immediately, to save a later render cycle
 
-                    this._setReadMarker(lastLiveEvent.getId(), lastLiveEvent.getTs(), true);
+                    this.setReadMarker(lastLiveEvent.getId(), lastLiveEvent.getTs(), true);
                     updatedState.readMarkerVisible = false;
                     updatedState.readMarkerEventId = lastLiveEvent.getId();
                     callRMUpdated = true;
                 }
             }
 
-            this.setState(updatedState, () => {
-                this._messagePanel.current.updateTimelineMinHeight();
+            this.setState<null>(updatedState, () => {
+                this.messagePanel.current.updateTimelineMinHeight();
                 if (callRMUpdated) {
                     this.props.onReadMarkerUpdated();
                 }
@@ -553,17 +612,17 @@ class TimelinePanel extends React.Component {
         });
     };
 
-    onRoomTimelineReset = (room, timelineSet) => {
+    private onRoomTimelineReset = (room: Room, timelineSet: TimelineSet): void => {
         if (timelineSet !== this.props.timelineSet) return;
 
-        if (this._messagePanel.current && this._messagePanel.current.isAtBottom()) {
-            this._loadTimeline();
+        if (this.messagePanel.current && this.messagePanel.current.isAtBottom()) {
+            this.loadTimeline();
         }
     };
 
-    canResetTimeline = () => this._messagePanel.current && this._messagePanel.current.isAtBottom();
+    public canResetTimeline = () => this.messagePanel?.current.isAtBottom();
 
-    onRoomRedaction = (ev, room) => {
+    private onRoomRedaction = (ev: MatrixEvent, room: Room): void => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -574,7 +633,7 @@ class TimelinePanel extends React.Component {
         this.forceUpdate();
     };
 
-    onEventReplaced = (replacedEvent, room) => {
+    private onEventReplaced = (replacedEvent: MatrixEvent, room: Room): void => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -585,7 +644,7 @@ class TimelinePanel extends React.Component {
         this.forceUpdate();
     };
 
-    onRoomReceipt = (ev, room) => {
+    private onRoomReceipt = (ev: MatrixEvent, room: Room): void => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
@@ -594,22 +653,22 @@ class TimelinePanel extends React.Component {
         this.forceUpdate();
     };
 
-    onLocalEchoUpdated = (ev, room, oldEventId) => {
+    private onLocalEchoUpdated = (ev: MatrixEvent, room: Room, oldEventId: string): void => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
         if (room !== this.props.timelineSet.room) return;
 
-        this._reloadEvents();
+        this.reloadEvents();
     };
 
-    onAccountData = (ev, room) => {
+    private onAccountData = (ev: MatrixEvent, room: Room): void => {
         if (this.unmounted) return;
 
         // ignore events for other rooms
         if (room !== this.props.timelineSet.room) return;
 
-        if (ev.getType() !== "m.fully_read") return;
+        if (ev.getType() !== EventType.FullyRead) return;
 
         // XXX: roomReadMarkerTsMap not updated here so it is now inconsistent. Replace
         // this mechanism of determining where the RM is relative to the view-port with
@@ -619,7 +678,7 @@ class TimelinePanel extends React.Component {
         }, this.props.onReadMarkerUpdated);
     };
 
-    onEventDecrypted = ev => {
+    private onEventDecrypted = (ev: MatrixEvent): void => {
         // Can be null for the notification timeline, etc.
         if (!this.props.timelineSet.room) return;
 
@@ -634,46 +693,46 @@ class TimelinePanel extends React.Component {
         }
     };
 
-    onSync = (state, prevState, data) => {
-        this.setState({clientSyncState: state});
+    private onSync = (clientSyncState: SyncState, prevState: SyncState, data: object): void => {
+        this.setState({ clientSyncState });
     };
 
-    _readMarkerTimeout(readMarkerPosition) {
+    private readMarkerTimeout(readMarkerPosition: number): number {
         return readMarkerPosition === 0 ?
             this.state.readMarkerInViewThresholdMs :
             this.state.readMarkerOutOfViewThresholdMs;
     }
 
-    async updateReadMarkerOnUserActivity() {
-        const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition());
-        this._readMarkerActivityTimer = new Timer(initialTimeout);
+    private async updateReadMarkerOnUserActivity(): Promise<void> {
+        const initialTimeout = this.readMarkerTimeout(this.getReadMarkerPosition());
+        this.readMarkerActivityTimer = new Timer(initialTimeout);
 
-        while (this._readMarkerActivityTimer) { //unset on unmount
-            UserActivity.sharedInstance().timeWhileActiveRecently(this._readMarkerActivityTimer);
+        while (this.readMarkerActivityTimer) { //unset on unmount
+            UserActivity.sharedInstance().timeWhileActiveRecently(this.readMarkerActivityTimer);
             try {
-                await this._readMarkerActivityTimer.finished();
+                await this.readMarkerActivityTimer.finished();
             } catch (e) { continue; /* aborted */ }
             // outside of try/catch to not swallow errors
             this.updateReadMarker();
         }
     }
 
-    async updateReadReceiptOnUserActivity() {
-        this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
-        while (this._readReceiptActivityTimer) { //unset on unmount
-            UserActivity.sharedInstance().timeWhileActiveNow(this._readReceiptActivityTimer);
+    private async updateReadReceiptOnUserActivity(): Promise<void> {
+        this.readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
+        while (this.readReceiptActivityTimer) { //unset on unmount
+            UserActivity.sharedInstance().timeWhileActiveNow(this.readReceiptActivityTimer);
             try {
-                await this._readReceiptActivityTimer.finished();
+                await this.readReceiptActivityTimer.finished();
             } catch (e) { continue; /* aborted */ }
             // outside of try/catch to not swallow errors
             this.sendReadReceipt();
         }
     }
 
-    sendReadReceipt = () => {
+    private sendReadReceipt = (): void => {
         if (SettingsStore.getValue("lowBandwidth")) return;
 
-        if (!this._messagePanel.current) return;
+        if (!this.messagePanel.current) return;
         if (!this.props.manageReadReceipts) return;
         // This happens on user_activity_end which is delayed, and it's
         // very possible have logged out within that timeframe, so check
@@ -684,8 +743,8 @@ class TimelinePanel extends React.Component {
 
         let shouldSendRR = true;
 
-        const currentRREventId = this._getCurrentReadReceipt(true);
-        const currentRREventIndex = this._indexForEventId(currentRREventId);
+        const currentRREventId = this.getCurrentReadReceipt(true);
+        const currentRREventIndex = this.indexForEventId(currentRREventId);
         // We want to avoid sending out read receipts when we are looking at
         // events in the past which are before the latest RR.
         //
@@ -700,11 +759,11 @@ class TimelinePanel extends React.Component {
         // the user eventually hits the live timeline.
         //
         if (currentRREventId && currentRREventIndex === null &&
-                this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
+                this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
             shouldSendRR = false;
         }
 
-        const lastReadEventIndex = this._getLastDisplayedEventIndex({
+        const lastReadEventIndex = this.getLastDisplayedEventIndex({
             ignoreOwn: true,
         });
         if (lastReadEventIndex === null) {
@@ -778,7 +837,7 @@ class TimelinePanel extends React.Component {
 
     // if the read marker is on the screen, we can now assume we've caught up to the end
     // of the screen, so move the marker down to the bottom of the screen.
-    updateReadMarker = () => {
+    private updateReadMarker = (): void => {
         if (!this.props.manageReadMarkers) return;
         if (this.getReadMarkerPosition() === 1) {
             // the read marker is at an event below the viewport,
@@ -788,7 +847,7 @@ class TimelinePanel extends React.Component {
         // move the RM to *after* the message at the bottom of the screen. This
         // avoids a problem whereby we never advance the RM if there is a huge
         // message which doesn't fit on the screen.
-        const lastDisplayedIndex = this._getLastDisplayedEventIndex({
+        const lastDisplayedIndex = this.getLastDisplayedEventIndex({
             allowPartial: true,
         });
 
@@ -796,7 +855,7 @@ class TimelinePanel extends React.Component {
             return;
         }
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
-        this._setReadMarker(
+        this.setReadMarker(
             lastDisplayedEvent.getId(),
             lastDisplayedEvent.getTs(),
         );
@@ -815,13 +874,13 @@ class TimelinePanel extends React.Component {
 
 
     // advance the read marker past any events we sent ourselves.
-    _advanceReadMarkerPastMyEvents() {
+    private advanceReadMarkerPastMyEvents(): void {
         if (!this.props.manageReadMarkers) return;
 
-        // we call `_timelineWindow.getEvents()` rather than using
+        // we call `timelineWindow.getEvents()` rather than using
         // `this.state.liveEvents`, because React batches the update to the
         // latter, so it may not have been updated yet.
-        const events = this._timelineWindow.getEvents();
+        const events = this.timelineWindow.getEvents();
 
         // first find where the current RM is
         let i;
@@ -846,22 +905,22 @@ class TimelinePanel extends React.Component {
         i--;
 
         const ev = events[i];
-        this._setReadMarker(ev.getId(), ev.getTs());
+        this.setReadMarker(ev.getId(), ev.getTs());
     }
 
     /* jump down to the bottom of this room, where new events are arriving
      */
-    jumpToLiveTimeline = () => {
+    public jumpToLiveTimeline = (): void => {
         // if we can't forward-paginate the existing timeline, then there
         // is no point reloading it - just jump straight to the bottom.
         //
         // Otherwise, reload the timeline rather than trying to paginate
         // through all of space-time.
-        if (this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            this._loadTimeline();
+        if (this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
+            this.loadTimeline();
         } else {
-            if (this._messagePanel.current) {
-                this._messagePanel.current.scrollToBottom();
+            if (this.messagePanel.current) {
+                this.messagePanel.current.scrollToBottom();
             }
         }
     };
@@ -869,22 +928,22 @@ class TimelinePanel extends React.Component {
     /* scroll to show the read-up-to marker. We put it 1/3 of the way down
      * the container.
      */
-    jumpToReadMarker = () => {
+    public jumpToReadMarker = (): void => {
         if (!this.props.manageReadMarkers) return;
-        if (!this._messagePanel.current) return;
+        if (!this.messagePanel.current) return;
         if (!this.state.readMarkerEventId) return;
 
         // we may not have loaded the event corresponding to the read-marker
-        // into the _timelineWindow. In that case, attempts to scroll to it
+        // into the timelineWindow. In that case, attempts to scroll to it
         // will fail.
         //
         // a quick way to figure out if we've loaded the relevant event is
         // simply to check if the messagepanel knows where the read-marker is.
-        const ret = this._messagePanel.current.getReadMarkerPosition();
+        const ret = this.messagePanel.current.getReadMarkerPosition();
         if (ret !== null) {
             // The messagepanel knows where the RM is, so we must have loaded
             // the relevant event.
-            this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
+            this.messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
                 0, 1/3);
             return;
         }
@@ -892,15 +951,15 @@ class TimelinePanel extends React.Component {
         // Looks like we haven't loaded the event corresponding to the read-marker.
         // As with jumpToLiveTimeline, we want to reload the timeline around the
         // read-marker.
-        this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
+        this.loadTimeline(this.state.readMarkerEventId, 0, 1/3);
     };
 
     /* update the read-up-to marker to match the read receipt
      */
-    forgetReadMarker = () => {
+    public forgetReadMarker = (): void => {
         if (!this.props.manageReadMarkers) return;
 
-        const rmId = this._getCurrentReadReceipt();
+        const rmId = this.getCurrentReadReceipt();
 
         // see if we know the timestamp for the rr event
         const tl = this.props.timelineSet.getTimelineForEvent(rmId);
@@ -912,17 +971,17 @@ class TimelinePanel extends React.Component {
             }
         }
 
-        this._setReadMarker(rmId, rmTs);
+        this.setReadMarker(rmId, rmTs);
     };
 
     /* return true if the content is fully scrolled down and we are
      * at the end of the live timeline.
      */
-    isAtEndOfLiveTimeline = () => {
-        return this._messagePanel.current
-            && this._messagePanel.current.isAtBottom()
-            && this._timelineWindow
-            && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
+    public isAtEndOfLiveTimeline = (): boolean => {
+        return this.messagePanel.current
+            && this.messagePanel.current.isAtBottom()
+            && this.timelineWindow
+            && !this.timelineWindow.canPaginate(EventTimeline.FORWARDS);
     }
 
 
@@ -931,9 +990,9 @@ class TimelinePanel extends React.Component {
      *
      * returns null if we are not mounted.
      */
-    getScrollState = () => {
-        if (!this._messagePanel.current) { return null; }
-        return this._messagePanel.current.getScrollState();
+    public getScrollState = (): IScrollState => {
+        if (!this.messagePanel.current) { return null; }
+        return this.messagePanel.current.getScrollState();
     };
 
     // returns one of:
@@ -942,11 +1001,11 @@ class TimelinePanel extends React.Component {
     //  -1: read marker is above the window
     //   0: read marker is visible
     //  +1: read marker is below the window
-    getReadMarkerPosition = () => {
+    public getReadMarkerPosition = (): number => {
         if (!this.props.manageReadMarkers) return null;
-        if (!this._messagePanel.current) return null;
+        if (!this.messagePanel.current) return null;
 
-        const ret = this._messagePanel.current.getReadMarkerPosition();
+        const ret = this.messagePanel.current.getReadMarkerPosition();
         if (ret !== null) {
             return ret;
         }
@@ -965,7 +1024,7 @@ class TimelinePanel extends React.Component {
         return null;
     };
 
-    canJumpToReadMarker = () => {
+    public canJumpToReadMarker = (): boolean => {
         // 1. Do not show jump bar if neither the RM nor the RR are set.
         // 3. We want to show the bar if the read-marker is off the top of the screen.
         // 4. Also, if pos === null, the event might not be paginated - show the unread bar
@@ -980,19 +1039,19 @@ class TimelinePanel extends React.Component {
      *
      * We pass it down to the scroll panel.
      */
-    handleScrollKey = ev => {
-        if (!this._messagePanel.current) { return; }
+    public handleScrollKey = ev => {
+        if (!this.messagePanel.current) { return; }
 
         // jump to the live timeline on ctrl-end, rather than the end of the
         // timeline window.
         if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey && ev.key === Key.END) {
             this.jumpToLiveTimeline();
         } else {
-            this._messagePanel.current.handleScrollKey(ev);
+            this.messagePanel.current.handleScrollKey(ev);
         }
     };
 
-    _initTimeline(props) {
+    private initTimeline(props: IProps): void {
         const initialEvent = props.eventId;
         const pixelOffset = props.eventPixelOffset;
 
@@ -1003,7 +1062,7 @@ class TimelinePanel extends React.Component {
             offsetBase = 0.5;
         }
 
-        return this._loadTimeline(initialEvent, pixelOffset, offsetBase);
+        return this.loadTimeline(initialEvent, pixelOffset, offsetBase);
     }
 
     /**
@@ -1019,34 +1078,32 @@ class TimelinePanel extends React.Component {
      * @param {number?} offsetBase the reference point for the pixelOffset. 0
      *     means the top of the container, 1 means the bottom, and fractional
      *     values mean somewhere in the middle. If omitted, it defaults to 0.
-     *
-     * returns a promise which will resolve when the load completes.
      */
-    _loadTimeline(eventId, pixelOffset, offsetBase) {
-        this._timelineWindow = new TimelineWindow(
+    private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number): void {
+        this.timelineWindow = new TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
             {windowLimit: this.props.timelineCap});
 
         const onLoaded = () => {
             // clear the timeline min-height when
             // (re)loading the timeline
-            if (this._messagePanel.current) {
-                this._messagePanel.current.onTimelineReset();
+            if (this.messagePanel.current) {
+                this.messagePanel.current.onTimelineReset();
             }
-            this._reloadEvents();
+            this.reloadEvents();
 
             // If we switched away from the room while there were pending
             // outgoing events, the read-marker will be before those events.
             // We need to skip over any which have subsequently been sent.
-            this._advanceReadMarkerPastMyEvents();
+            this.advanceReadMarkerPastMyEvents();
 
             this.setState({
-                canBackPaginate: this._timelineWindow.canPaginate(EventTimeline.BACKWARDS),
-                canForwardPaginate: this._timelineWindow.canPaginate(EventTimeline.FORWARDS),
+                canBackPaginate: this.timelineWindow.canPaginate(EventTimeline.BACKWARDS),
+                canForwardPaginate: this.timelineWindow.canPaginate(EventTimeline.FORWARDS),
                 timelineLoading: false,
             }, () => {
                 // initialise the scroll state of the message panel
-                if (!this._messagePanel.current) {
+                if (!this.messagePanel.current) {
                     // this shouldn't happen - we know we're mounted because
                     // we're in a setState callback, and we know
                     // timelineLoading is now false, so render() should have
@@ -1056,10 +1113,10 @@ class TimelinePanel extends React.Component {
                     return;
                 }
                 if (eventId) {
-                    this._messagePanel.current.scrollToEvent(eventId, pixelOffset,
+                    this.messagePanel.current.scrollToEvent(eventId, pixelOffset,
                         offsetBase);
                 } else {
-                    this._messagePanel.current.scrollToBottom();
+                    this.messagePanel.current.scrollToBottom();
                 }
 
                 if (this.props.sendReadReceiptOnLoad) {
@@ -1121,10 +1178,10 @@ class TimelinePanel extends React.Component {
         if (timeline) {
             // This is a hot-path optimization by skipping a promise tick
             // by repeating a no-op sync branch in TimelineSet.getTimelineForEvent & MatrixClient.getEventTimeline
-            this._timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time
+            this.timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time
             onLoaded();
         } else {
-            const prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
+            const prom = this.timelineWindow.load(eventId, INITIAL_SIZE);
             this.setState({
                 events: [],
                 liveEvents: [],
@@ -1139,17 +1196,17 @@ class TimelinePanel extends React.Component {
     // handle the completion of a timeline load or localEchoUpdate, by
     // reloading the events from the timelinewindow and pending event list into
     // the state.
-    _reloadEvents() {
+    private reloadEvents(): void {
         // we might have switched rooms since the load started - just bin
         // the results if so.
         if (this.unmounted) return;
 
-        this.setState(this._getEvents());
+        this.setState(this.getEvents());
     }
 
     // get the list of events from the timeline window and the pending event list
-    _getEvents() {
-        const events = this._timelineWindow.getEvents();
+    private getEvents(): Pick<IState, "events" | "liveEvents" | "firstVisibleEventIndex"> {
+        const events: MatrixEvent[] = this.timelineWindow.getEvents();
 
         // `arrayFastClone` performs a shallow copy of the array
         // we want the last event to be decrypted first but displayed last
@@ -1161,14 +1218,14 @@ class TimelinePanel extends React.Component {
                 client.decryptEventIfNeeded(event);
             });
 
-        const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
+        const firstVisibleEventIndex = this.checkForPreJoinUISI(events);
 
         // Hold onto the live events separately. The read receipt and read marker
         // should use this list, so that they don't advance into pending events.
         const liveEvents = [...events];
 
         // if we're at the end of the live timeline, append the pending events
-        if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
+        if (!this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
             events.push(...this.props.timelineSet.getPendingEvents());
         }
 
@@ -1189,7 +1246,7 @@ class TimelinePanel extends React.Component {
      * undecryptable event that was sent while the user was not in the room.  If no
      * such events were found, then it returns 0.
      */
-    _checkForPreJoinUISI(events) {
+    private checkForPreJoinUISI(events: MatrixEvent[]): number {
         const room = this.props.timelineSet.room;
 
         if (events.length === 0 || !room ||
@@ -1253,7 +1310,7 @@ class TimelinePanel extends React.Component {
         return 0;
     }
 
-    _indexForEventId(evId) {
+    private indexForEventId(evId: string): number | null {
         for (let i = 0; i < this.state.events.length; ++i) {
             if (evId == this.state.events[i].getId()) {
                 return i;
@@ -1262,15 +1319,14 @@ class TimelinePanel extends React.Component {
         return null;
     }
 
-    _getLastDisplayedEventIndex(opts) {
-        opts = opts || {};
+    private getLastDisplayedEventIndex(opts: IEventIndexOpts = {}): number | null {
         const ignoreOwn = opts.ignoreOwn || false;
         const allowPartial = opts.allowPartial || false;
 
-        const messagePanel = this._messagePanel.current;
+        const messagePanel = this.messagePanel.current;
         if (!messagePanel) return null;
 
-        const messagePanelNode = ReactDOM.findDOMNode(messagePanel);
+        const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as HTMLElement;
         if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync
         const wrapperRect = messagePanelNode.getBoundingClientRect();
         const myUserId = MatrixClientPeg.get().credentials.userId;
@@ -1347,7 +1403,7 @@ class TimelinePanel extends React.Component {
      *                                    SDK.
      * @return {String} the event ID
      */
-    _getCurrentReadReceipt(ignoreSynthesized) {
+    private getCurrentReadReceipt(ignoreSynthesized = false): string {
         const client = MatrixClientPeg.get();
         // the client can be null on logout
         if (client == null) {
@@ -1358,7 +1414,7 @@ class TimelinePanel extends React.Component {
         return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized);
     }
 
-    _setReadMarker(eventId, eventTs, inhibitSetState) {
+    private setReadMarker(eventId: string, eventTs: number, inhibitSetState = false): void {
         const roomId = this.props.timelineSet.room.roomId;
 
         // don't update the state (and cause a re-render) if there is
@@ -1383,7 +1439,7 @@ class TimelinePanel extends React.Component {
         }, this.props.onReadMarkerUpdated);
     }
 
-    _shouldPaginate() {
+    private shouldPaginate(): boolean {
         // don't try to paginate while events in the timeline are
         // still being decrypted. We don't render events while they're
         // being decrypted, so they don't take up space in the timeline.
@@ -1394,12 +1450,9 @@ class TimelinePanel extends React.Component {
         });
     }
 
-    getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args);
+    private getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args);
 
     render() {
-        const MessagePanel = sdk.getComponent("structures.MessagePanel");
-        const Loader = sdk.getComponent("elements.Spinner");
-
         // just show a spinner while the timeline loads.
         //
         // put it in a div of the right class (mx_RoomView_messagePanel) so
@@ -1414,7 +1467,7 @@ class TimelinePanel extends React.Component {
         if (this.state.timelineLoading) {
             return (
                 <div className="mx_RoomView_messagePanelSpinner">
-                    <Loader />
+                    <Spinner />
                 </div>
             );
         }
@@ -1435,7 +1488,7 @@ class TimelinePanel extends React.Component {
         // forwards, otherwise if somebody hits the bottom of the loaded
         // events when viewing historical messages, we get stuck in a loop
         // of paginating our way through the entire history of the room.
-        const stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
+        const stickyBottom = !this.timelineWindow.canPaginate(EventTimeline.FORWARDS);
 
         // If the state is PREPARED or CATCHUP, we're still waiting for the js-sdk to sync with
         // the HS and fetch the latest events, so we are effectively forward paginating.
@@ -1448,7 +1501,7 @@ class TimelinePanel extends React.Component {
             : this.state.events;
         return (
             <MessagePanel
-                ref={this._messagePanel}
+                ref={this.messagePanel}
                 room={this.props.timelineSet.room}
                 permalinkCreator={this.props.permalinkCreator}
                 hidden={this.props.hidden}
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index a83f3f177c..c78b45e5e6 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -14,30 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useState, useEffect} from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import classnames from "classnames";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
-import {useSettingValue, useFeatureEnabled} from "../../../hooks/useSettings";
-import {UIFeature} from "../../../settings/UIFeature";
-import {Layout} from "../../../settings/Layout";
-import {IDialogProps} from "./IDialogProps";
+import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings";
+import { UIFeature } from "../../../settings/UIFeature";
+import { Layout } from "../../../settings/Layout";
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import {avatarUrlForUser} from "../../../Avatar";
+import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import {Alignment} from '../elements/Tooltip';
+import { Alignment } from '../elements/Tooltip';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "../rooms/NotificationBadge";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
-import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 
 const AVATAR_SIZE = 30;
@@ -166,12 +167,12 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
         userId,
         getAvatarUrl: (..._) => {
             return avatarUrlForUser(
-                { avatarUrl: profileInfo.avatar_url },
+                {avatarUrl: profileInfo.avatar_url},
                 AVATAR_SIZE, AVATAR_SIZE, "crop",
             );
         },
         getMxcAvatarUrl: () => profileInfo.avatar_url,
-    };
+    } as RoomMember;
 
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.tsx
similarity index 80%
rename from src/components/views/elements/ErrorBoundary.js
rename to src/components/views/elements/ErrorBoundary.tsx
index 9037287f49..f967b8c594 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/src/components/views/elements/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,21 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import * as sdk from '../../../index';
+import React, { ErrorInfo } from 'react';
+
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BugReportDialog from '../dialogs/BugReportDialog';
+import AccessibleButton from './AccessibleButton';
+
+interface IState {
+    error: Error;
+}
 
 /**
  * This error boundary component can be used to wrap large content areas and
  * catch exceptions during rendering in the component tree below them.
  */
 @replaceableComponent("views.elements.ErrorBoundary")
-export default class ErrorBoundary extends React.PureComponent {
+export default class ErrorBoundary extends React.PureComponent<{}, IState> {
     constructor(props) {
         super(props);
 
@@ -37,13 +43,13 @@ export default class ErrorBoundary extends React.PureComponent {
         };
     }
 
-    static getDerivedStateFromError(error) {
+    static getDerivedStateFromError(error: Error): Partial<IState> {
         // Side effects are not permitted here, so we only update the state so
         // that the next render shows an error message.
         return { error };
     }
 
-    componentDidCatch(error, { componentStack }) {
+    componentDidCatch(error: Error, { componentStack }: ErrorInfo): void {
         // Browser consoles are better at formatting output when native errors are passed
         // in their own `console.error` invocation.
         console.error(error);
@@ -53,7 +59,7 @@ export default class ErrorBoundary extends React.PureComponent {
         );
     }
 
-    _onClearCacheAndReload = () => {
+    private onClearCacheAndReload = (): void => {
         if (!PlatformPeg.get()) return;
 
         MatrixClientPeg.get().stopClient();
@@ -62,11 +68,7 @@ export default class ErrorBoundary extends React.PureComponent {
         });
     };
 
-    _onBugReport = () => {
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
-        if (!BugReportDialog) {
-            return;
-        }
+    private onBugReport = (): void => {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
             label: 'react-soft-crash',
         });
@@ -74,7 +76,6 @@ export default class ErrorBoundary extends React.PureComponent {
 
     render() {
         if (this.state.error) {
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
 
             let bugReportSection;
@@ -95,7 +96,7 @@ export default class ErrorBoundary extends React.PureComponent {
                         "the rooms or groups you have visited and the usernames of " +
                         "other users. They do not contain messages.",
                     )}</p>
-                    <AccessibleButton onClick={this._onBugReport} kind='primary'>
+                    <AccessibleButton onClick={this.onBugReport} kind='primary'>
                         {_t("Submit debug logs")}
                     </AccessibleButton>
                 </React.Fragment>;
@@ -105,7 +106,7 @@ export default class ErrorBoundary extends React.PureComponent {
                 <div className="mx_ErrorBoundary_body">
                     <h1>{_t("Something went wrong!")}</h1>
                     { bugReportSection }
-                    <AccessibleButton onClick={this._onClearCacheAndReload} kind='danger'>
+                    <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
                         {_t("Clear cache and reload")}
                     </AccessibleButton>
                 </div>
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 86d3e082ad..ab647db9ed 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactChildren, useEffect} from 'react';
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import React, { ReactNode, useEffect } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
-import {useStateToggle} from "../../../hooks/useStateToggle";
+import { useStateToggle } from "../../../hooks/useStateToggle";
 import AccessibleButton from "./AccessibleButton";
 
 interface IProps {
@@ -31,11 +31,11 @@ interface IProps {
     // Whether or not to begin with state.expanded=true
     startExpanded?: boolean,
     // The list of room members for which to show avatars next to the summary
-    summaryMembers?: RoomMember[],
+    summaryMembers?: RoomMember[];
     // The text to show as the summary of this event list
-    summaryText?: string,
+    summaryText?: string;
     // An array of EventTiles to render when expanded
-    children: ReactChildren,
+    children: ReactNode[];
     // Called when the event list expansion is toggled
     onToggle?(): void;
 }
diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index cf3b7a6e61..8e73b3d9ca 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -17,13 +17,14 @@ limitations under the License.
 import React from 'react';
 import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 
 import * as Avatar from '../../../Avatar';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout} from "../../../settings/Layout";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Layout } from "../../../settings/Layout";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     /**
@@ -105,12 +106,12 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(
-                    { avatarUrl: this.props.avatarUrl },
+                    {avatarUrl: this.props.avatarUrl},
                     AVATAR_SIZE, AVATAR_SIZE, "crop",
                 );
             },
             getMxcAvatarUrl: () => this.props.avatarUrl,
-        };
+        } as RoomMember;
 
         return event;
     }
diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx
index f10884ce9d..8d411c5f6c 100644
--- a/src/components/views/elements/MemberEventListSummary.tsx
+++ b/src/components/views/elements/MemberEventListSummary.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactChildren } from 'react';
+import React, { ComponentProps } from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
@@ -26,21 +26,11 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import EventListSummary from "./EventListSummary";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-interface IProps {
-    // An array of member events to summarise
-    events: MatrixEvent[];
+interface IProps extends Omit<ComponentProps<typeof EventListSummary>, "summaryText" | "summaryMembers"> {
     // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
     summaryLength?: number;
     // The maximum number of avatars to display in the summary
     avatarsMaxLength?: number;
-    // The minimum number of events needed to trigger summarisation
-    threshold?: number,
-    // Whether or not to begin with state.expanded=true
-    startExpanded?: boolean,
-    // An array of EventTiles to render when expanded
-    children: ReactChildren;
-    // Called when the MELS expansion is toggled
-    onToggle?(): void,
 }
 
 interface IUserEvents {
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.tsx
similarity index 82%
rename from src/components/views/messages/DateSeparator.js
rename to src/components/views/messages/DateSeparator.tsx
index 82ce8dc4ae..5d43e2182d 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -1,6 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2015 - 2021 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.
@@ -16,12 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import {formatFullDateNoTime} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-function getdaysArray() {
+import { _t } from '../../../languageHandler';
+import { formatFullDateNoTime } from '../../../DateUtils';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+function getDaysArray(): string[] {
     return [
         _t('Sunday'),
         _t('Monday'),
@@ -33,17 +33,17 @@ function getdaysArray() {
     ];
 }
 
-@replaceableComponent("views.messages.DateSeparator")
-export default class DateSeparator extends React.Component {
-    static propTypes = {
-        ts: PropTypes.number.isRequired,
-    };
+interface IProps {
+    ts: number;
+}
 
-    getLabel() {
+@replaceableComponent("views.messages.DateSeparator")
+export default class DateSeparator extends React.Component<IProps> {
+    private getLabel() {
         const date = new Date(this.props.ts);
         const today = new Date();
         const yesterday = new Date();
-        const days = getdaysArray();
+        const days = getDaysArray();
         yesterday.setDate(today.getDate() - 1);
 
         if (date.toDateString() === today.toDateString()) {
diff --git a/src/components/views/messages/TileErrorBoundary.js b/src/components/views/messages/TileErrorBoundary.tsx
similarity index 77%
rename from src/components/views/messages/TileErrorBoundary.js
rename to src/components/views/messages/TileErrorBoundary.tsx
index 0e9a7b6128..967127d275 100644
--- a/src/components/views/messages/TileErrorBoundary.js
+++ b/src/components/views/messages/TileErrorBoundary.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2021 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.
@@ -16,14 +16,24 @@ limitations under the License.
 
 import React from 'react';
 import classNames from 'classnames';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BugReportDialog from '../dialogs/BugReportDialog';
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    error: Error;
+}
 
 @replaceableComponent("views.messages.TileErrorBoundary")
-export default class TileErrorBoundary extends React.Component {
+export default class TileErrorBoundary extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
@@ -32,17 +42,13 @@ export default class TileErrorBoundary extends React.Component {
         };
     }
 
-    static getDerivedStateFromError(error) {
+    static getDerivedStateFromError(error: Error): Partial<IState> {
         // Side effects are not permitted here, so we only update the state so
         // that the next render shows an error message.
         return { error };
     }
 
-    _onBugReport = () => {
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
-        if (!BugReportDialog) {
-            return;
-        }
+    private onBugReport = (): void => {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
             label: 'react-soft-crash-tile',
         });
@@ -60,7 +66,7 @@ export default class TileErrorBoundary extends React.Component {
 
             let submitLogsButton;
             if (SdkConfig.get().bug_report_endpoint_url) {
-                submitLogsButton = <a onClick={this._onBugReport} href="#">
+                submitLogsButton = <a onClick={this.onBugReport} href="#">
                     {_t("Submit logs")}
                 </a>;
             }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 3d674efe04..6c306904f5 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import classNames from "classnames";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -176,12 +176,19 @@ const MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-interface IReadReceiptProps {
+export interface IReadReceiptProps {
     userId: string;
     roomMember: RoomMember;
     ts: number;
 }
 
+export enum TileShape {
+    Notif = "notif",
+    FileGrid = "file_grid",
+    Reply = "reply",
+    ReplyPreview = "reply_preview",
+}
+
 interface IProps {
     // the MatrixEvent to show
     mxEvent: MatrixEvent;
@@ -248,7 +255,7 @@ interface IProps {
     // It could also be done by subclassing EventTile, but that'd be quite
     // boiilerplatey.  So just make the necessary render decisions conditional
     // for now.
-    tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+    tileShape?: TileShape;
 
     // show twelve hour timestamps
     isTwelveHour?: boolean;
@@ -306,10 +313,11 @@ interface IState {
 export default class EventTile extends React.Component<IProps, IState> {
     private suppressReadReceiptAnimation: boolean;
     private isListeningForReceipts: boolean;
-    private ref: React.RefObject<unknown>;
     private tile = React.createRef();
     private replyThread = React.createRef();
 
+    public readonly ref = createRef<HTMLElement>();
+
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
         onHeightChanged: function() {},
@@ -345,8 +353,6 @@ export default class EventTile extends React.Component<IProps, IState> {
         // to determine if we've already subscribed and use a combination of other flags to find
         // out if we should even be subscribed at all.
         this.isListeningForReceipts = false;
-
-        this.ref = React.createRef();
     }
 
     /**

From 7948aa6181ec34cd2c55a3945721af747321bb40 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 21:10:29 +0100
Subject: [PATCH 161/358] Iterate PR, improve jsdoc and switch function style

---
 src/utils/arrays.ts           | 8 ++++----
 src/utils/stringOrderField.ts | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/utils/arrays.ts b/src/utils/arrays.ts
index 148861e5d3..6524debfb7 100644
--- a/src/utils/arrays.ts
+++ b/src/utils/arrays.ts
@@ -225,10 +225,10 @@ export function arrayMerge<T>(...a: T[][]): T[] {
 
 /**
  * Moves a single element from fromIndex to toIndex.
- * @param list the list from which to construct the new list.
- * @param fromIndex the index of the element to move.
- * @param toIndex the index of where to put the element.
- * @returns A new array with the requested value moved.
+ * @param {array} list the list from which to construct the new list.
+ * @param {number} fromIndex the index of the element to move.
+ * @param {number} toIndex the index of where to put the element.
+ * @returns {array} A new array with the requested value moved.
  */
 export function moveElement<T>(list: T[], fromIndex: number, toIndex: number): T[] {
     const result = Array.from(list);
diff --git a/src/utils/stringOrderField.ts b/src/utils/stringOrderField.ts
index b312b85b08..da840792ee 100644
--- a/src/utils/stringOrderField.ts
+++ b/src/utils/stringOrderField.ts
@@ -18,13 +18,13 @@ import { alphabetPad, baseToString, stringToBase, DEFAULT_ALPHABET } from "matri
 
 import { moveElement } from "./arrays";
 
-export const midPointsBetweenStrings = (
+export function midPointsBetweenStrings(
     a: string,
     b: string,
     count: number,
     maxLen: number,
     alphabet = DEFAULT_ALPHABET,
-): string[] => {
+): string[] {
     const padN = Math.min(Math.max(a.length, b.length), maxLen);
     const padA = alphabetPad(a, padN, alphabet);
     const padB = alphabetPad(b, padN, alphabet);
@@ -48,7 +48,7 @@ export const midPointsBetweenStrings = (
     const step = (baseB - baseA) / BigInt(count + 1);
     const start = BigInt(baseA + step);
     return Array(count).fill(undefined).map((_, i) => baseToString(start + (BigInt(i) * step), alphabet));
-};
+}
 
 interface IEntry {
     index: number;

From 99e3aea1e5eb0cc5f25742ab430fa7dcf18edc83 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 21:17:33 +0100
Subject: [PATCH 162/358] i18n and regen yarn lock

---
 src/i18n/strings/en_EN.json |   8 +-
 yarn.lock                   | 200 ++++++++++++++++--------------------
 2 files changed, 94 insertions(+), 114 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a94b608f2b..4ca011f404 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1025,10 +1025,10 @@
     "You can change these anytime.": "You can change these anytime.",
     "Creating...": "Creating...",
     "Create": "Create",
-    "Expand space panel": "Expand space panel",
-    "Collapse space panel": "Collapse space panel",
     "All rooms": "All rooms",
     "Home": "Home",
+    "Expand space panel": "Expand space panel",
+    "Collapse space panel": "Collapse space panel",
     "Click to copy": "Click to copy",
     "Copied!": "Copied!",
     "Failed to copy": "Failed to copy",
@@ -2511,6 +2511,8 @@
     "Update status": "Update status",
     "Set status": "Set status",
     "Set a new status...": "Set a new status...",
+    "Move up": "Move up",
+    "Move down": "Move down",
     "View Community": "View Community",
     "Unable to start audio streaming.": "Unable to start audio streaming.",
     "Failed to start livestream": "Failed to start livestream",
@@ -2657,7 +2659,7 @@
     "%(count)s messages deleted.|one": "%(count)s message deleted.",
     "Your Communities": "Your Communities",
     "Did you know: you can use communities to filter your %(brand)s experience!": "Did you know: you can use communities to filter your %(brand)s experience!",
-    "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
+    "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
diff --git a/yarn.lock b/yarn.lock
index b19a188014..0d424cb93d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1017,13 +1017,20 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -1504,6 +1511,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1620,6 +1635,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/react-beautiful-dnd@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4"
+  integrity sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^17.0.2":
   version "17.0.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.8.tgz#3180de6d79bf53762001ad854e3ce49f36dd71fc"
@@ -1627,6 +1649,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -2122,14 +2154,6 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -2648,11 +2672,6 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2712,6 +2731,13 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-select@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.2.tgz#8b52b6714ed3a80d8221ec971c543f3b12653286"
@@ -4241,7 +4267,7 @@ highlight.js@^10.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
   integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4456,13 +4482,6 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -5600,11 +5619,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.2.1:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
-  integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
-
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -5625,7 +5639,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5794,10 +5808,10 @@ mdurl@~1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
-memoize-one@^3.0.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
-  integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
 meow@^9.0.0:
   version "9.0.0"
@@ -6443,11 +6457,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-performance-now@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
-  integrity sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6657,7 +6666,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6734,12 +6743,12 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-raf-schd@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-2.1.2.tgz#ec622b5167f2912089f054dc03ebd5bcf33c8f62"
-  integrity sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g==
+raf-schd@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
-raf@^3.1.0, raf@^3.4.1:
+raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -6766,21 +6775,18 @@ re-resizable@^6.9.0:
   dependencies:
     fast-memoize "^2.5.1"
 
-react-beautiful-dnd@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-4.0.1.tgz#3b0a49bf6be75af351176c904f012611dd292b81"
-  integrity sha512-d73RMu4QOFCyjUELLWFyY/EuclnfqulI9pECx+2gIuJvV0ycf1uR88o+1x0RSB9ILD70inHMzCBKNkWVbbt+vA==
+react-beautiful-dnd@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
+  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
   dependencies:
-    babel-runtime "^6.26.0"
-    invariant "^2.2.2"
-    memoize-one "^3.0.1"
-    prop-types "^15.6.0"
-    raf-schd "^2.1.0"
-    react-motion "^0.5.2"
-    react-redux "^5.0.6"
-    redux "^3.7.2"
-    redux-thunk "^2.2.0"
-    reselect "^3.0.1"
+    "@babel/runtime" "^7.9.2"
+    css-box-model "^1.2.0"
+    memoize-one "^5.1.1"
+    raf-schd "^4.0.2"
+    react-redux "^7.2.0"
+    redux "^4.0.4"
+    use-memo-one "^1.1.1"
 
 react-clientside-effect@^1.2.2:
   version "1.2.3"
@@ -6815,7 +6821,7 @@ react-focus-lock@^2.5.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6825,32 +6831,17 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-lifecycles-compat@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-motion@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
-  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
+react-redux@^7.2.0:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
   dependencies:
-    performance-now "^0.2.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
-react-redux@^5.0.6:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
-  integrity sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    loose-envify "^1.1.0"
-    prop-types "^15.6.1"
-    react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
 
 react-shallow-renderer@^16.13.1:
   version "16.14.1"
@@ -6979,20 +6970,12 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
-  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
-
-redux@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
   dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
+    "@babel/runtime" "^7.9.2"
 
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
@@ -7006,11 +6989,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -7168,11 +7146,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-reselect@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
-  integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
-
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -7895,11 +7868,6 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-symbol-observable@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -7962,6 +7930,11 @@ through@^2.3.6:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+tiny-invariant@^1.0.6:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tmatch@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
@@ -8277,6 +8250,11 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-memo-one@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use-sidecar@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.4.tgz#38398c3723727f9f924bed2343dfa3db6aaaee46"

From 49d20d253034ad945708da53e8d7b3f19ca7f15d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 21:22:30 +0100
Subject: [PATCH 163/358] consolidate the two onRoomAccountData listeners

---
 src/stores/SpaceStore.tsx | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index 8b4e3a8f3a..e498574467 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -527,17 +527,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     };
 
-    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
-        if (!room.isSpaceRoom() || ev.getType() !== EventType.SpaceOrder) return;
-
-        this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
-        const order = ev.getContent()?.order;
-        const lastOrder = lastEv?.getContent()?.order;
-        if (order !== lastOrder) {
-            this.notifyIfOrderChanged();
-        }
-    };
-
     private notifyIfOrderChanged(): void {
         const rootSpaces = this.sortRootSpaces(this.rootSpaces);
         if (arrayHasOrderChange(this.rootSpaces, rootSpaces)) {
@@ -577,10 +566,19 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     };
 
-    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEvent?: MatrixEvent) => {
-        if (ev.getType() === EventType.Tag && !room.isSpaceRoom()) {
+    private onRoomAccountData = (ev: MatrixEvent, room: Room, lastEv?: MatrixEvent) => {
+        if (!room.isSpaceRoom()) return;
+
+        if (ev.getType() === EventType.SpaceOrder) {
+            this.spaceOrderLocalEchoMap.delete(room.roomId); // clear any local echo
+            const order = ev.getContent()?.order;
+            const lastOrder = lastEv?.getContent()?.order;
+            if (order !== lastOrder) {
+                this.notifyIfOrderChanged();
+            }
+        } else if (ev.getType() === EventType.Tag && !SettingsStore.getValue("feature_spaces.all_rooms")) {
             // If the room was in favourites and now isn't or the opposite then update its position in the trees
-            const oldTags = lastEvent?.getContent()?.tags || {};
+            const oldTags = lastEv?.getContent()?.tags || {};
             const newTags = ev.getContent()?.tags || {};
             if (!!oldTags[DefaultTagID.Favourite] !== !!newTags[DefaultTagID.Favourite]) {
                 this.onRoomUpdate(room);
@@ -625,7 +623,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
             this.matrixClient.removeListener("RoomState.events", this.onRoomState);
             if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
-                this.matrixClient.removeListener("Room.accountData", this.onRoomAccountData);
                 this.matrixClient.removeListener("accountData", this.onAccountData);
             }
         }
@@ -639,7 +636,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.matrixClient.on("Room.accountData", this.onRoomAccountData);
         this.matrixClient.on("RoomState.events", this.onRoomState);
         if (!SettingsStore.getValue("feature_spaces.all_rooms")) {
-            this.matrixClient.on("Room.accountData", this.onRoomAccountData);
             this.matrixClient.on("accountData", this.onAccountData);
         }
 

From 5dc542f18947efadcea7beb4f68af8311bd36357 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 22:01:18 +0100
Subject: [PATCH 164/358] Iterate PR

---
 .../views/dialogs/SpaceSettingsDialog.tsx     |  3 +--
 .../views/elements/LabelledToggleSwitch.tsx   |  2 +-
 .../views/elements/RoomAliasField.tsx         | 18 +++++++------
 .../room_settings/RoomPublishSetting.tsx      | 14 +++++++----
 .../tabs/room/AdvancedRoomSettingsTab.tsx     | 25 ++++++++++---------
 .../views/spaces/SpaceSettingsGeneralTab.tsx  |  2 +-
 .../spaces/SpaceSettingsVisibilityTab.tsx     |  2 +-
 7 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index 1273f06401..5e0cd96740 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -27,7 +27,7 @@ import TabbedView, { Tab } from "../../structures/TabbedView";
 import SpaceSettingsGeneralTab from '../spaces/SpaceSettingsGeneralTab';
 import SpaceSettingsVisibilityTab from "../spaces/SpaceSettingsVisibilityTab";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
 
 export enum SpaceSettingsTab {
@@ -91,4 +91,3 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
 };
 
 export default SpaceSettingsDialog;
-
diff --git a/src/components/views/elements/LabelledToggleSwitch.tsx b/src/components/views/elements/LabelledToggleSwitch.tsx
index 957e3dbc97..d97b698fd8 100644
--- a/src/components/views/elements/LabelledToggleSwitch.tsx
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
diff --git a/src/components/views/elements/RoomAliasField.tsx b/src/components/views/elements/RoomAliasField.tsx
index 7eff529c46..74af311b47 100644
--- a/src/components/views/elements/RoomAliasField.tsx
+++ b/src/components/views/elements/RoomAliasField.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -39,9 +39,13 @@ interface IState {
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
     private fieldRef = createRef<Field>();
 
-    public state = {
-        isValid: true,
-    };
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            isValid: true,
+        };
+    }
 
     private asFullAlias(localpart: string): string {
         return `#${localpart}:${this.props.domain}`;
@@ -123,15 +127,15 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
         ],
     });
 
-    get isValid() {
+    public get isValid() {
         return this.state.isValid;
     }
 
-    validate(options: IValidateOpts) {
+    public validate(options: IValidateOpts) {
         return this.fieldRef.current?.validate(options);
     }
 
-    focus() {
+    public focus() {
         this.fieldRef.current?.focus();
     }
 }
diff --git a/src/components/views/room_settings/RoomPublishSetting.tsx b/src/components/views/room_settings/RoomPublishSetting.tsx
index 24df5f1c84..95b0ac100d 100644
--- a/src/components/views/room_settings/RoomPublishSetting.tsx
+++ b/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 2021 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.
@@ -33,9 +33,13 @@ interface IState {
 
 @replaceableComponent("views.room_settings.RoomPublishSetting")
 export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
-    public state = {
-        isRoomPublished: false,
-    };
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            isRoomPublished: false,
+        };
+    }
 
     private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
@@ -67,7 +71,7 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
                 onChange={this.onRoomPublishChange}
                 disabled={!this.props.canSetCanonicalAlias}
                 label={_t("Publish this room to the public in %(domain)s's room directory?", {
-                  domain: client.getDomain(),
+                    domain: client.getDomain(),
                 })}
             />
         );
diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index 7e7d9cba90..c4963d0154 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
 
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@@ -56,10 +57,10 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
         // we handle lack of this object gracefully later, so don't worry about it failing here.
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         room.getRecommendedVersion().then((v) => {
-            const tombstone = room.currentState.getStateEvents("m.room.tombstone", "");
+            const tombstone = room.currentState.getStateEvents(EventType.RoomTombstone, "");
 
             const additionalStateChanges: Partial<IState> = {};
-            const createEvent = room.currentState.getStateEvents("m.room.create", "");
+            const createEvent = room.currentState.getStateEvents(EventType.RoomCreate, "");
             const predecessor = createEvent ? createEvent.getContent().predecessor : null;
             if (predecessor && predecessor.room_id) {
                 additionalStateChanges.oldRoomId = predecessor.room_id;
@@ -100,9 +101,9 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
         const room = client.getRoom(this.props.roomId);
 
         let unfederatableSection;
-        const createEvent = room.currentState.getStateEvents('m.room.create', '');
+        const createEvent = room.currentState.getStateEvents(EventType.RoomCreate, '');
         if (createEvent && createEvent.getContent()['m.federate'] === false) {
-            unfederatableSection = <div>{_t('This room is not accessible by remote Matrix servers')}</div>;
+            unfederatableSection = <div>{ _t('This room is not accessible by remote Matrix servers') }</div>;
         }
 
         let roomUpgradeButton;
@@ -110,7 +111,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
             roomUpgradeButton = (
                 <div>
                     <p className='mx_SettingsTab_warningText'>
-                        {_t(
+                        { _t(
                             "<b>Warning</b>: Upgrading a room will <i>not automatically migrate room members " +
                             "to the new version of the room.</i> We'll post a link to the new room in the old " +
                             "version of the room - room members will have to click this link to join the new room.",
@@ -118,10 +119,10 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
                                 "b": (sub) => <b>{sub}</b>,
                                 "i": (sub) => <i>{sub}</i>,
                             },
-                        )}
+                        ) }
                     </p>
                     <AccessibleButton onClick={this.upgradeRoom} kind='primary'>
-                        {_t("Upgrade this room to the recommended room version")}
+                        { _t("Upgrade this room to the recommended room version") }
                     </AccessibleButton>
                 </div>
             );
@@ -141,21 +142,21 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
 
         return (
             <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
+                <div className="mx_SettingsTab_heading">{ _t("Advanced") }</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <span className='mx_SettingsTab_subheading'>
                         { room?.isSpaceRoom() ? _t("Space information") : _t("Room information") }
                     </span>
                     <div>
-                        <span>{_t("Internal room ID:")}</span>&nbsp;
+                        <span>{ _t("Internal room ID:") }</span>&nbsp;
                         { this.props.roomId }
                     </div>
                     { unfederatableSection }
                 </div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <span className='mx_SettingsTab_subheading'>{_t("Room version")}</span>
+                    <span className='mx_SettingsTab_subheading'>{ _t("Room version") }</span>
                     <div>
-                        <span>{_t("Room version:")}</span>&nbsp;
+                        <span>{ _t("Room version:") }</span>&nbsp;
                         { room.getVersion() }
                     </div>
                     { oldRoomLink }
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
index db0a180846..3afdc629e4 100644
--- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -90,7 +90,7 @@ const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProp
     };
 
     return <div className="mx_SettingsTab">
-        <div className="mx_SettingsTab_heading">{_t("General")}</div>
+        <div className="mx_SettingsTab_heading">{ _t("General") }</div>
 
         <div>{ _t("Edit settings relating to your space.") }</div>
 
diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
index 2f80ad97a6..263823603b 100644
--- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -137,7 +137,7 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
     }
 
     return <div className="mx_SettingsTab">
-        <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
+        <div className="mx_SettingsTab_heading">{ _t("Visibility") }</div>
 
         { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
 

From 9dc8493a5c845336dafc774193353d08e1ef5971 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 22:07:42 +0100
Subject: [PATCH 165/358] Hide communities invites and the community
 autocompleter when Spaces Beta is enabled

---
 src/autocomplete/Autocompleter.ts       | 3 ++-
 src/components/views/rooms/RoomList.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts
index ea8eddbb8d..7f3f5d2c01 100644
--- a/src/autocomplete/Autocompleter.ts
+++ b/src/autocomplete/Autocompleter.ts
@@ -55,13 +55,14 @@ const PROVIDERS = [
     EmojiProvider,
     NotifProvider,
     CommandProvider,
-    CommunityProvider,
     DuckDuckGoProvider,
 ];
 
 // as the spaces feature is device configurable only, and toggling it refreshes the page, we can do this here
 if (SettingsStore.getValue("feature_spaces")) {
     PROVIDERS.push(SpaceProvider);
+} else {
+    PROVIDERS.push(CommunityProvider);
 }
 
 // Providers will get rejected if they take longer than this.
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 5a1c3a24b3..704c3cf620 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -466,6 +466,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     private renderCommunityInvites(): ReactComponentElement<typeof ExtraTile>[] {
+        if (SettingsStore.getValue("feature_spaces")) return [];
         // TODO: Put community invites in a more sensible place (not in the room list)
         // See https://github.com/vector-im/element-web/issues/14456
         return MatrixClientPeg.get().getGroups().filter(g => {

From 83296b74404c6a6e594c9bd382bbb9d37f4248ab Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 22:19:01 +0100
Subject: [PATCH 166/358] Fix typing

---
 src/hooks/useRoomState.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts
index 11ac7de49e..e778acf8a9 100644
--- a/src/hooks/useRoomState.ts
+++ b/src/hooks/useRoomState.ts
@@ -24,7 +24,10 @@ type Mapper<T> = (roomState: RoomState) => T;
 const defaultMapper: Mapper<RoomState> = (roomState: RoomState) => roomState;
 
 // Hook to simplify watching Matrix Room state
-export const useRoomState = <T extends any = RoomState>(room: Room, mapper: Mapper<T> = defaultMapper): T => {
+export const useRoomState = <T extends any = RoomState>(
+    room: Room,
+    mapper: Mapper<T> = defaultMapper as Mapper<T>,
+): T => {
     const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
 
     const update = useCallback(() => {

From e0ac200e27197617d9be4df78ef957441fed2fde Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 22:23:09 +0100
Subject: [PATCH 167/358] Iterate PR

---
 src/DecryptionFailureTracker.ts  |  4 ++--
 src/HtmlUtils.tsx                |  4 ++--
 src/utils/EditorStateTransfer.ts | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/DecryptionFailureTracker.ts b/src/DecryptionFailureTracker.ts
index 960d844e9e..07c0c546fe 100644
--- a/src/DecryptionFailureTracker.ts
+++ b/src/DecryptionFailureTracker.ts
@@ -25,7 +25,7 @@ export class DecryptionFailure {
     }
 }
 
-type Fn = (count: number, trackedErrCode: string) => void;
+type TrackingFn = (count: number, trackedErrCode: string) => void;
 type ErrCodeMapFn = (errcode: string) => string;
 
 export class DecryptionFailureTracker {
@@ -73,7 +73,7 @@ export class DecryptionFailureTracker {
      * @param {function?} errorCodeMapFn The function used to map error codes to the
      * trackedErrorCode. If not provided, the `.code` of errors will be used.
      */
-    constructor(private readonly fn: Fn, private readonly errorCodeMapFn?: ErrCodeMapFn) {
+    constructor(private readonly fn: TrackingFn, private readonly errorCodeMapFn?: ErrCodeMapFn) {
         if (!fn || typeof fn !== 'function') {
             throw new Error('DecryptionFailureTracker requires tracking function');
         }
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 5803029030..983538d65b 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -505,7 +505,7 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
  * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
  * @returns {string} Linkified string
  */
-export function linkifyString(str: string, options = linkifyMatrix.options) {
+export function linkifyString(str: string, options = linkifyMatrix.options): string {
     return _linkifyString(str, options);
 }
 
@@ -516,7 +516,7 @@ export function linkifyString(str: string, options = linkifyMatrix.options) {
  * @param {object} [options] Options for linkifyElement. Default: linkifyMatrix.options
  * @returns {object}
  */
-export function linkifyElement(element: HTMLElement, options = linkifyMatrix.options) {
+export function linkifyElement(element: HTMLElement, options = linkifyMatrix.options): HTMLElement {
     return _linkifyElement(element, options);
 }
 
diff --git a/src/utils/EditorStateTransfer.ts b/src/utils/EditorStateTransfer.ts
index 42e1a316d6..ba303f9b73 100644
--- a/src/utils/EditorStateTransfer.ts
+++ b/src/utils/EditorStateTransfer.ts
@@ -30,24 +30,24 @@ export default class EditorStateTransfer {
 
     constructor(private readonly event: MatrixEvent) {}
 
-    setEditorState(caret: Caret, serializedParts: SerializedPart[]) {
+    public setEditorState(caret: Caret, serializedParts: SerializedPart[]) {
         this.caret = caret;
         this.serializedParts = serializedParts;
     }
 
-    hasEditorState() {
+    public hasEditorState() {
         return !!this.serializedParts;
     }
 
-    getSerializedParts() {
+    public getSerializedParts() {
         return this.serializedParts;
     }
 
-    getCaret() {
+    public getCaret() {
         return this.caret;
     }
 
-    getEvent() {
+    public getEvent() {
         return this.event;
     }
 }

From ffaa19ef2c27f361c8fcc0367e491dca528e697b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Jun 2021 22:27:12 +0100
Subject: [PATCH 168/358] fix typing

---
 .../views/dialogs/ForwardDialog.tsx           | 31 ++++++++++---------
 .../views/elements/EventTilePreview.tsx       |  9 +++---
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index a83f3f177c..6fbed6fc8b 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -14,30 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useMemo, useState, useEffect} from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import classnames from "classnames";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
-import {useSettingValue, useFeatureEnabled} from "../../../hooks/useSettings";
-import {UIFeature} from "../../../settings/UIFeature";
-import {Layout} from "../../../settings/Layout";
-import {IDialogProps} from "./IDialogProps";
+import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings";
+import { UIFeature } from "../../../settings/UIFeature";
+import { Layout } from "../../../settings/Layout";
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
-import {avatarUrlForUser} from "../../../Avatar";
+import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import {Alignment} from '../elements/Tooltip';
+import { Alignment } from '../elements/Tooltip';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {StaticNotificationState} from "../../../stores/notifications/StaticNotificationState";
+import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "../rooms/NotificationBadge";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
-import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 
 const AVATAR_SIZE = 30;
@@ -171,7 +172,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             );
         },
         getMxcAvatarUrl: () => profileInfo.avatar_url,
-    };
+    } as RoomMember;
 
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase();
diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index cf3b7a6e61..366d918bcf 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -17,13 +17,14 @@ limitations under the License.
 import React from 'react';
 import classnames from 'classnames';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 
 import * as Avatar from '../../../Avatar';
 import EventTile from '../rooms/EventTile';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout} from "../../../settings/Layout";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Layout } from "../../../settings/Layout";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     /**
@@ -110,7 +111,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
                 );
             },
             getMxcAvatarUrl: () => this.props.avatarUrl,
-        };
+        } as RoomMember;
 
         return event;
     }

From 9bceb40820baaab07f5a222641777ecc98f5ba96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 09:26:33 +0200
Subject: [PATCH 169/358] CallMediaHandler -> MediaDeviceHandler
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/CallMediaHandler.js                       | 85 ----------------
 src/MediaDeviceHandler.ts                     | 96 +++++++++++++++++++
 src/components/structures/LoggedInView.tsx    |  4 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   |  6 +-
 .../tabs/user/VoiceUserSettingsTab.js         | 24 ++---
 src/components/views/voip/AudioFeed.tsx       |  4 +-
 src/voice/VoiceRecording.ts                   |  4 +-
 7 files changed, 117 insertions(+), 106 deletions(-)
 delete mode 100644 src/CallMediaHandler.js
 create mode 100644 src/MediaDeviceHandler.ts

diff --git a/src/CallMediaHandler.js b/src/CallMediaHandler.js
deleted file mode 100644
index 634f0bb336..0000000000
--- a/src/CallMediaHandler.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
-
- 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 SettingsStore from "./settings/SettingsStore";
-import {SettingLevel} from "./settings/SettingLevel";
-import {setMatrixCallAudioInput, setMatrixCallVideoInput} from "matrix-js-sdk/src/matrix";
-
-export default {
-    hasAnyLabeledDevices: async function() {
-        const devices = await navigator.mediaDevices.enumerateDevices();
-        return devices.some(d => !!d.label);
-    },
-
-    getDevices: function() {
-        // Only needed for Electron atm, though should work in modern browsers
-        // once permission has been granted to the webapp
-        return navigator.mediaDevices.enumerateDevices().then(function(devices) {
-            const audiooutput = [];
-            const audioinput = [];
-            const videoinput = [];
-
-            devices.forEach((device) => {
-                switch (device.kind) {
-                    case 'audiooutput': audiooutput.push(device); break;
-                    case 'audioinput': audioinput.push(device); break;
-                    case 'videoinput': videoinput.push(device); break;
-                }
-            });
-
-            // console.log("Loaded WebRTC Devices", mediaDevices);
-            return {
-                audiooutput,
-                audioinput,
-                videoinput,
-            };
-        }, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); });
-    },
-
-    loadDevices: function() {
-        const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
-        const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
-
-        setMatrixCallAudioInput(audioDeviceId);
-        setMatrixCallVideoInput(videoDeviceId);
-    },
-
-    setAudioOutput: function(deviceId) {
-        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
-    },
-
-    setAudioInput: function(deviceId) {
-        SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
-        setMatrixCallAudioInput(deviceId);
-    },
-
-    setVideoInput: function(deviceId) {
-        SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
-        setMatrixCallVideoInput(deviceId);
-    },
-
-    getAudioOutput: function() {
-        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput");
-    },
-
-    getAudioInput: function() {
-        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput");
-    },
-
-    getVideoInput: function() {
-        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput");
-    },
-};
diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
new file mode 100644
index 0000000000..96fd764b98
--- /dev/null
+++ b/src/MediaDeviceHandler.ts
@@ -0,0 +1,96 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 SettingsStore from "./settings/SettingsStore";
+import { SettingLevel } from "./settings/SettingLevel";
+import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix";
+
+interface IMediaDevices {
+    audioOutput: Array<MediaDeviceInfo>;
+    audioInput: Array<MediaDeviceInfo>;
+    videoInput: Array<MediaDeviceInfo>;
+}
+
+export default class MediaDeviceHandler {
+    static async hasAnyLabeledDevices(): Promise<boolean> {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        return devices.some(d => Boolean(d.label));
+    }
+
+    static async getDevices(): Promise<IMediaDevices> {
+        // Only needed for Electron atm, though should work in modern browsers
+        // once permission has been granted to the webapp
+
+        try {
+            const devices = await navigator.mediaDevices.enumerateDevices();
+
+            const audioOutput = [];
+            const audioInput = [];
+            const videoInput = [];
+
+            devices.forEach((device) => {
+                switch (device.kind) {
+                    case 'audiooutput': audioOutput.push(device); break;
+                    case 'audioinput': audioInput.push(device); break;
+                    case 'videoinput': videoInput.push(device); break;
+                }
+            });
+
+            return {
+                audioOutput: audioOutput,
+                audioInput: audioInput,
+                videoInput: videoInput,
+            };
+        } catch (error) {
+            console.log('Unable to refresh WebRTC Devices: ', error);
+        }
+    }
+
+    static loadDevices() {
+        const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
+        const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
+
+        setMatrixCallAudioInput(audioDeviceId);
+        setMatrixCallVideoInput(videoDeviceId);
+    }
+
+    static setAudioOutput(deviceId: string) {
+        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
+    }
+
+    static setAudioInput(deviceId: string) {
+        SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
+        setMatrixCallAudioInput(deviceId);
+    }
+
+    static setVideoInput(deviceId: string) {
+        SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
+        setMatrixCallVideoInput(deviceId);
+    }
+
+    static getAudioOutput(): string {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput");
+    }
+
+    static getAudioInput(): string {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput");
+    }
+
+    static getVideoInput(): string {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput");
+    }
+}
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index e3d6b1ab9c..5ad67232a4 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -22,7 +22,7 @@ import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import {Key} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
-import CallMediaHandler from '../../CallMediaHandler';
+import MediaDeviceHandler from '../../MediaDeviceHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
@@ -167,7 +167,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
 
-        CallMediaHandler.loadDevices();
+        MediaDeviceHandler.loadDevices();
 
         fixupColorFonts();
 
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 20d8c9c5d4..122ba0ca0b 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -30,7 +30,7 @@ import RecordingPlayback from "../voice_messages/RecordingPlayback";
 import {MsgType} from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import CallMediaHandler from "../../../CallMediaHandler";
+import MediaDeviceHandler from "../../../MediaDeviceHandler";
 
 interface IProps {
     room: Room;
@@ -129,8 +129,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         // Do a sanity test to ensure we're about to grab a valid microphone reference. Things might
         // change between this and recording, but at least we will have tried.
         try {
-            const devices = await CallMediaHandler.getDevices();
-            if (!devices?.['audioinput']?.length) {
+            const devices = await MediaDeviceHandler.getDevices();
+            if (!devices?.['audioInput']?.length) {
                 Modal.createTrackedDialog('No Microphone Error', '', ErrorDialog, {
                     title: _t("No microphone found"),
                     description: <>
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index 362059f8ed..962f1fcd44 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
-import CallMediaHandler from "../../../../../CallMediaHandler";
+import MediaDeviceHandler from "../../../../../MediaDeviceHandler";
 import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
@@ -41,7 +41,7 @@ export default class VoiceUserSettingsTab extends React.Component {
     }
 
     async componentDidMount() {
-        const canSeeDeviceLabels = await CallMediaHandler.hasAnyLabeledDevices();
+        const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices();
         if (canSeeDeviceLabels) {
             this._refreshMediaDevices();
         }
@@ -49,10 +49,10 @@ export default class VoiceUserSettingsTab extends React.Component {
 
     _refreshMediaDevices = async (stream) => {
         this.setState({
-            mediaDevices: await CallMediaHandler.getDevices(),
-            activeAudioOutput: CallMediaHandler.getAudioOutput(),
-            activeAudioInput: CallMediaHandler.getAudioInput(),
-            activeVideoInput: CallMediaHandler.getVideoInput(),
+            mediaDevices: await MediaDeviceHandler.getDevices(),
+            activeAudioOutput: MediaDeviceHandler.getAudioOutput(),
+            activeAudioInput: MediaDeviceHandler.getAudioInput(),
+            activeVideoInput: MediaDeviceHandler.getVideoInput(),
         });
         if (stream) {
             // kill stream (after we've enumerated the devices, otherwise we'd get empty labels again)
@@ -100,21 +100,21 @@ export default class VoiceUserSettingsTab extends React.Component {
     };
 
     _setAudioOutput = (e) => {
-        CallMediaHandler.setAudioOutput(e.target.value);
+        MediaDeviceHandler.setAudioOutput(e.target.value);
         this.setState({
             activeAudioOutput: e.target.value,
         });
     };
 
     _setAudioInput = (e) => {
-        CallMediaHandler.setAudioInput(e.target.value);
+        MediaDeviceHandler.setAudioInput(e.target.value);
         this.setState({
             activeAudioInput: e.target.value,
         });
     };
 
     _setVideoInput = (e) => {
-        CallMediaHandler.setVideoInput(e.target.value);
+        MediaDeviceHandler.setVideoInput(e.target.value);
         this.setState({
             activeVideoInput: e.target.value,
         });
@@ -171,7 +171,7 @@ export default class VoiceUserSettingsTab extends React.Component {
                 }
             };
 
-            const audioOutputs = this.state.mediaDevices.audiooutput.slice(0);
+            const audioOutputs = this.state.mediaDevices.audioOutput.slice(0);
             if (audioOutputs.length > 0) {
                 const defaultDevice = getDefaultDevice(audioOutputs);
                 speakerDropdown = (
@@ -183,7 +183,7 @@ export default class VoiceUserSettingsTab extends React.Component {
                 );
             }
 
-            const audioInputs = this.state.mediaDevices.audioinput.slice(0);
+            const audioInputs = this.state.mediaDevices.audioInput.slice(0);
             if (audioInputs.length > 0) {
                 const defaultDevice = getDefaultDevice(audioInputs);
                 microphoneDropdown = (
@@ -195,7 +195,7 @@ export default class VoiceUserSettingsTab extends React.Component {
                 );
             }
 
-            const videoInputs = this.state.mediaDevices.videoinput.slice(0);
+            const videoInputs = this.state.mediaDevices.videoInput.slice(0);
             if (videoInputs.length > 0) {
                 const defaultDevice = getDefaultDevice(videoInputs);
                 webcamDropdown = (
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
index c78f0c0fc8..80d658e7ee 100644
--- a/src/components/views/voip/AudioFeed.tsx
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
-import CallMediaHandler from "../../../CallMediaHandler";
+import MediaDeviceHandler from "../../../MediaDeviceHandler";
 
 interface IProps {
     feed: CallFeed,
@@ -38,7 +38,7 @@ export default class AudioFeed extends React.Component<IProps> {
 
     private playMedia() {
         const element = this.element.current;
-        const audioOutput = CallMediaHandler.getAudioOutput();
+        const audioOutput = MediaDeviceHandler.getAudioOutput();
 
         if (audioOutput) {
             try {
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index fde5779fa2..8f9e03bb8e 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import * as Recorder from 'opus-recorder';
 import encoderPath from 'opus-recorder/dist/encoderWorker.min.js';
 import {MatrixClient} from "matrix-js-sdk/src/client";
-import CallMediaHandler from "../CallMediaHandler";
+import MediaDeviceHandler from "../MediaDeviceHandler";
 import {SimpleObservable} from "matrix-widget-api";
 import {clamp, percentageOf, percentageWithin} from "../utils/numbers";
 import EventEmitter from "events";
@@ -97,7 +97,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
                 audio: {
                     channelCount: CHANNELS,
                     noiseSuppression: true, // browsers ignore constraints they can't honour
-                    deviceId: CallMediaHandler.getAudioInput(),
+                    deviceId: MediaDeviceHandler.getAudioInput(),
                 },
             });
             this.recorderContext = createAudioContext({

From 057f46ad9d10370416af0ad951858f17c1caff55 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 23 Jun 2021 08:44:48 +0100
Subject: [PATCH 170/358] fix dependency and lockfile mismatch

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bb703c33f0..6b369e9c27 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "@sinonjs/fake-timers": "^7.0.2",
     "@types/classnames": "^2.2.11",
     "@types/counterpart": "^0.18.1",
-    "@types/diff-match-patch": "^1.0.5",
+    "@types/diff-match-patch": "^1.0.32",
     "@types/flux": "^3.1.9",
     "@types/jest": "^26.0.20",
     "@types/linkifyjs": "^2.1.3",

From 58151d71c5b806ece26345ba2fc37d3a5dbe7a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 09:56:37 +0200
Subject: [PATCH 171/358] Handle mid-call output changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/MediaDeviceHandler.ts                     | 27 ++++++++++++++++---
 .../tabs/user/VoiceUserSettingsTab.js         |  6 ++---
 src/components/views/voip/AudioFeed.tsx       | 18 ++++++++++---
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index 96fd764b98..8780cea359 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -18,6 +18,7 @@ limitations under the License.
 import SettingsStore from "./settings/SettingsStore";
 import { SettingLevel } from "./settings/SettingLevel";
 import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix";
+import EventEmitter from 'events';
 
 interface IMediaDevices {
     audioOutput: Array<MediaDeviceInfo>;
@@ -25,7 +26,22 @@ interface IMediaDevices {
     videoInput: Array<MediaDeviceInfo>;
 }
 
-export default class MediaDeviceHandler {
+export enum MediaDeviceHandlerEvent {
+    AudioOutputChanged = "audio_output_changed",
+    AudioInputChanged = "audio_input_changed",
+    VideoInputChanged = "video_input_changed",
+}
+
+export default class MediaDeviceHandler extends EventEmitter {
+    private static internalInstance;
+
+    public static get instance(): MediaDeviceHandler {
+        if (!MediaDeviceHandler.internalInstance) {
+            MediaDeviceHandler.internalInstance = new MediaDeviceHandler();
+        }
+        return MediaDeviceHandler.internalInstance;
+    }
+
     static async hasAnyLabeledDevices(): Promise<boolean> {
         const devices = await navigator.mediaDevices.enumerateDevices();
         return devices.some(d => Boolean(d.label));
@@ -68,18 +84,21 @@ export default class MediaDeviceHandler {
         setMatrixCallVideoInput(videoDeviceId);
     }
 
-    static setAudioOutput(deviceId: string) {
+    public setAudioOutput(deviceId: string) {
         SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
+        this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId);
     }
 
-    static setAudioInput(deviceId: string) {
+    public setAudioInput(deviceId: string) {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallAudioInput(deviceId);
+        this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId);
     }
 
-    static setVideoInput(deviceId: string) {
+    public setVideoInput(deviceId: string) {
         SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallVideoInput(deviceId);
+        this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId);
     }
 
     static getAudioOutput(): string {
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index 962f1fcd44..f730406eed 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -100,21 +100,21 @@ export default class VoiceUserSettingsTab extends React.Component {
     };
 
     _setAudioOutput = (e) => {
-        MediaDeviceHandler.setAudioOutput(e.target.value);
+        MediaDeviceHandler.instance.setAudioOutput(e.target.value);
         this.setState({
             activeAudioOutput: e.target.value,
         });
     };
 
     _setAudioInput = (e) => {
-        MediaDeviceHandler.setAudioInput(e.target.value);
+        MediaDeviceHandler.instance.setAudioInput(e.target.value);
         this.setState({
             activeAudioInput: e.target.value,
         });
     };
 
     _setVideoInput = (e) => {
-        MediaDeviceHandler.setVideoInput(e.target.value);
+        MediaDeviceHandler.instance.setVideoInput(e.target.value);
         this.setState({
             activeVideoInput: e.target.value,
         });
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
index 80d658e7ee..d29caf789e 100644
--- a/src/components/views/voip/AudioFeed.tsx
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
-import MediaDeviceHandler from "../../../MediaDeviceHandler";
+import MediaDeviceHandler, { MediaDeviceHandlerEvent } from "../../../MediaDeviceHandler";
 
 interface IProps {
     feed: CallFeed,
@@ -27,19 +27,25 @@ export default class AudioFeed extends React.Component<IProps> {
     private element = createRef<HTMLAudioElement>();
 
     componentDidMount() {
+        MediaDeviceHandler.instance.addListener(
+            MediaDeviceHandlerEvent.AudioOutputChanged,
+            this.onAudioOutputChanged,
+        );
         this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
         this.playMedia();
     }
 
     componentWillUnmount() {
+        MediaDeviceHandler.instance.removeListener(
+            MediaDeviceHandlerEvent.AudioOutputChanged,
+            this.onAudioOutputChanged,
+        );
         this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
         this.stopMedia();
     }
 
-    private playMedia() {
+    private onAudioOutputChanged = (audioOutput: string) => {
         const element = this.element.current;
-        const audioOutput = MediaDeviceHandler.getAudioOutput();
-
         if (audioOutput) {
             try {
                 // This seems quite unreliable in Chrome, although I haven't yet managed to make a jsfiddle where
@@ -52,7 +58,11 @@ export default class AudioFeed extends React.Component<IProps> {
                 logger.warn("Couldn't set requested audio output device: using default", e);
             }
         }
+    }
 
+    private playMedia() {
+        const element = this.element.current;
+        this.onAudioOutputChanged(MediaDeviceHandler.getAudioOutput());
         element.muted = false;
         element.srcObject = this.props.feed.stream;
         element.autoplay = true;

From 6c9e0e54e989eb2a1ea0d04645be6bc415380c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 10:27:51 +0200
Subject: [PATCH 172/358] Iterate PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/MediaDeviceHandler.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index 8780cea359..b8b00963b6 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -42,12 +42,12 @@ export default class MediaDeviceHandler extends EventEmitter {
         return MediaDeviceHandler.internalInstance;
     }
 
-    static async hasAnyLabeledDevices(): Promise<boolean> {
+    public static async hasAnyLabeledDevices(): Promise<boolean> {
         const devices = await navigator.mediaDevices.enumerateDevices();
         return devices.some(d => Boolean(d.label));
     }
 
-    static async getDevices(): Promise<IMediaDevices> {
+    public static async getDevices(): Promise<IMediaDevices> {
         // Only needed for Electron atm, though should work in modern browsers
         // once permission has been granted to the webapp
 
@@ -76,7 +76,7 @@ export default class MediaDeviceHandler extends EventEmitter {
         }
     }
 
-    static loadDevices() {
+    public static loadDevices(): void {
         const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
         const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
 
@@ -84,32 +84,32 @@ export default class MediaDeviceHandler extends EventEmitter {
         setMatrixCallVideoInput(videoDeviceId);
     }
 
-    public setAudioOutput(deviceId: string) {
+    public setAudioOutput(deviceId: string): void {
         SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
         this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId);
     }
 
-    public setAudioInput(deviceId: string) {
+    public setAudioInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallAudioInput(deviceId);
         this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId);
     }
 
-    public setVideoInput(deviceId: string) {
+    public setVideoInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallVideoInput(deviceId);
         this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId);
     }
 
-    static getAudioOutput(): string {
+    public static getAudioOutput(): string {
         return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput");
     }
 
-    static getAudioInput(): string {
+    public static getAudioInput(): string {
         return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput");
     }
 
-    static getVideoInput(): string {
+    public static getVideoInput(): string {
         return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput");
     }
 }

From a6367c079620d95141ddcd45c99952d250818568 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 23 Jun 2021 09:33:38 +0100
Subject: [PATCH 173/358] Reintroduce LiveRecording components for maintenance
 reasons

---
 .../views/rooms/VoiceRecordComposerTile.tsx   |  8 ++---
 src/components/views/voice_messages/Clock.tsx |  4 +--
 .../voice_messages/LiveRecordingClock.tsx     | 26 +++++++++++++++++
 .../voice_messages/LiveRecordingWaveform.tsx  | 29 +++++++++++++++++++
 .../views/voice_messages/Waveform.tsx         |  4 +--
 5 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 src/components/views/voice_messages/LiveRecordingClock.tsx
 create mode 100644 src/components/views/voice_messages/LiveRecordingWaveform.tsx

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 6fe6a5ab1c..5868eed02d 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -26,11 +26,11 @@ import {
 import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import Waveform from "../voice_messages/Waveform";
+import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import { percentageOf } from "../../../utils/numbers";
-import Clock from "../voice_messages/Clock";
+import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
@@ -227,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         // only other UI is the recording-in-progress UI
         return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
-            <Clock seconds={this.state.seconds} />
-            <Waveform relHeights={this.state.relHeights} />
+            <LiveRecordingClock seconds={this.state.seconds} />
+            <LiveRecordingWaveform relHeights={this.state.relHeights} />
         </div>;
     }
 
diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/voice_messages/Clock.tsx
index 23e6762c52..1e78cc7bbd 100644
--- a/src/components/views/voice_messages/Clock.tsx
+++ b/src/components/views/voice_messages/Clock.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-interface IProps {
+export interface IProps {
     seconds: number;
 }
 
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
new file mode 100644
index 0000000000..f88bb63ac7
--- /dev/null
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -0,0 +1,26 @@
+/*
+Copyright 2021 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 React from "react";
+import Clock, { IProps as IClockProps } from "./Clock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+/**
+ * A clock for a live recording.
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingClock")
+export default class LiveRecordingClock extends React.PureComponent<IClockProps> {
+    public render() {
+        return <Clock seconds={this.props.seconds} />;
+    }
+}
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
new file mode 100644
index 0000000000..3d3169d764
--- /dev/null
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -0,0 +1,29 @@
+/*
+Copyright 2021 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 React from "react";
+import Waveform, { IProps as IWaveformProps } from "./Waveform";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+/**
+ * A waveform which shows the waveform of a live recording
+ */
+@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+export default class LiveRecordingWaveform extends React.PureComponent<IWaveformProps> {
+    public static defaultProps = {
+        progress: 1,
+    };
+    public render() {
+        return <Waveform relHeights={this.props.relHeights} />;
+    }
+}
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/voice_messages/Waveform.tsx
index ae880933e6..5a4447065a 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/voice_messages/Waveform.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import classNames from "classnames";
 
-interface IProps {
+export interface IProps {
     relHeights: number[]; // relative heights (0-1)
     progress: number; // percent complete, 0-1, default 100%
 }

From 95624b3fa62e4e223911720faf5da99739ac1493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 10:37:15 +0200
Subject: [PATCH 174/358] Add some docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/MediaDeviceHandler.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index b8b00963b6..10099bc7b8 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -76,6 +76,9 @@ export default class MediaDeviceHandler extends EventEmitter {
         }
     }
 
+    /**
+     * Retrieves devices from the SettingsStore and tells the js-sdk to use them
+     */
     public static loadDevices(): void {
         const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
         const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
@@ -89,12 +92,22 @@ export default class MediaDeviceHandler extends EventEmitter {
         this.emit(MediaDeviceHandlerEvent.AudioOutputChanged, deviceId);
     }
 
+    /**
+     * This will not change the device that a potential call uses. The call will
+     * need to be ended and started again for this change to take effect
+     * @param {string} deviceId
+     */
     public setAudioInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallAudioInput(deviceId);
         this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId);
     }
 
+    /**
+     * This will not change the device that a potential call uses. The call will
+     * need to be ended and started again for this change to take effect
+     * @param {string} deviceId
+     */
     public setVideoInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallVideoInput(deviceId);

From 1bef985d46b507f1c0971e4b1ab54381d1c83e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 10:39:10 +0200
Subject: [PATCH 175/358] Remove emmiting that isn't useful for us now
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/MediaDeviceHandler.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index 10099bc7b8..e0375df1a4 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -28,8 +28,6 @@ interface IMediaDevices {
 
 export enum MediaDeviceHandlerEvent {
     AudioOutputChanged = "audio_output_changed",
-    AudioInputChanged = "audio_input_changed",
-    VideoInputChanged = "video_input_changed",
 }
 
 export default class MediaDeviceHandler extends EventEmitter {
@@ -100,7 +98,6 @@ export default class MediaDeviceHandler extends EventEmitter {
     public setAudioInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallAudioInput(deviceId);
-        this.emit(MediaDeviceHandlerEvent.AudioInputChanged, deviceId);
     }
 
     /**
@@ -111,7 +108,6 @@ export default class MediaDeviceHandler extends EventEmitter {
     public setVideoInput(deviceId: string): void {
         SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         setMatrixCallVideoInput(deviceId);
-        this.emit(MediaDeviceHandlerEvent.VideoInputChanged, deviceId);
     }
 
     public static getAudioOutput(): string {

From 0e582c425cfb62bfef1147d7a306199d5992ab86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 10:42:19 +0200
Subject: [PATCH 176/358] Make this look nicer

Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
 src/MediaDeviceHandler.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index e0375df1a4..45ebcd22eb 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -64,11 +64,7 @@ export default class MediaDeviceHandler extends EventEmitter {
                 }
             });
 
-            return {
-                audioOutput: audioOutput,
-                audioInput: audioInput,
-                videoInput: videoInput,
-            };
+            return { audioOutput, audioInput, videoInput };
         } catch (error) {
             console.log('Unable to refresh WebRTC Devices: ', error);
         }

From 4ab9758b671d408f47399fe744290f41507b02ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 10:43:49 +0200
Subject: [PATCH 177/358] log -> warn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/MediaDeviceHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts
index 45ebcd22eb..49ef123def 100644
--- a/src/MediaDeviceHandler.ts
+++ b/src/MediaDeviceHandler.ts
@@ -66,7 +66,7 @@ export default class MediaDeviceHandler extends EventEmitter {
 
             return { audioOutput, audioInput, videoInput };
         } catch (error) {
-            console.log('Unable to refresh WebRTC Devices: ', error);
+            console.warn('Unable to refresh WebRTC Devices: ', error);
         }
     }
 

From cdb97d549493e755922b45ff9d1526a9c9f9c5ba Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Jun 2021 12:29:00 +0100
Subject: [PATCH 178/358] Fix trashcan.svg by exporting it with its viewbox

then fix sizing and alignment of consumers
---
 res/css/structures/_RoomStatusBar.scss            | 11 ++++-------
 res/css/views/rooms/_VoiceRecordComposerTile.scss |  6 +++---
 res/img/element-icons/trashcan.svg                |  4 ++--
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index 8cc00aba0f..a09aa9e3a5 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -112,7 +112,7 @@ limitations under the License.
 
         .mx_AccessibleButton {
             padding: 5px 10px;
-            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
             display: inline-block;
             position: relative;
 
@@ -128,13 +128,13 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
+                width: 18px;
+                height: 18px;
+                top: calc(50% - 9px); // text sizes are dynamic
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
                 mask-image: url('$(res)/img/element-icons/trashcan.svg');
-                width: 12px;
-                height: 16px;
-                top: calc(50% - 8px); // text sizes are dynamic
             }
 
             &.mx_RoomStatusBar_unsentResendAllBtn {
@@ -142,9 +142,6 @@ limitations under the License.
 
                 &::before {
                     mask-image: url('$(res)/img/element-icons/retry.svg');
-                    width: 18px;
-                    height: 18px;
-                    top: calc(50% - 9px); // text sizes are dynamic
                 }
             }
         }
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index a3ee104bd8..5501ab343e 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -36,10 +36,10 @@ limitations under the License.
 }
 
 .mx_VoiceRecordComposerTile_delete {
-    width: 14px; // w&h are size of icon
-    height: 18px;
+    width: 24px;
+    height: 24px;
     vertical-align: middle;
-    margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
+    margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
     background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;
diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg
index f8fb8b5c46..4106f0bd60 100644
--- a/res/img/element-icons/trashcan.svg
+++ b/res/img/element-icons/trashcan.svg
@@ -1,3 +1,3 @@
-<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="#8D99A5"/>
 </svg>

From a8dfc4488ffd51f36d23e16e92d26b2d3750a328 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Jun 2021 14:47:24 +0100
Subject: [PATCH 179/358] Convert more of js-sdk crypto and fix underscored
 field accesses

---
 src/SecurityManager.ts                             | 5 +++--
 src/components/views/dialogs/DevtoolsDialog.tsx    | 2 +-
 src/components/views/settings/CrossSigningPanel.js | 4 ++--
 src/components/views/settings/SecureBackupPanel.js | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts
index 09c8d30614..1ba0d6439b 100644
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ICryptoCallbacks, IDeviceTrustLevel, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matrix';
+import { ICryptoCallbacks, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matrix';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import Modal from './Modal';
 import * as sdk from './index';
@@ -28,6 +28,7 @@ import AccessSecretStorageDialog from './components/views/dialogs/security/Acces
 import RestoreKeyBackupDialog from './components/views/dialogs/security/RestoreKeyBackupDialog';
 import SettingsStore from "./settings/SettingsStore";
 import SecurityCustomisations from "./customisations/Security";
+import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
 
 // This stores the secret storage private keys in memory for the JS SDK. This is
 // only meant to act as a cache to avoid prompting the user multiple times
@@ -244,7 +245,7 @@ async function onSecretRequested(
     deviceId: string,
     requestId: string,
     name: string,
-    deviceTrust: IDeviceTrustLevel,
+    deviceTrust: DeviceTrustLevel,
 ): Promise<string> {
     console.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
     const client = MatrixClientPeg.get();
diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx
index 2690eb67d7..b1749b370a 100644
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -766,7 +766,7 @@ class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     render() {
         const cli = this.context;
         const room = this.props.room;
-        const inRoomChannel = cli.crypto._inRoomVerificationRequests;
+        const inRoomChannel = cli.crypto.inRoomVerificationRequests;
         const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
 
         return (<div>
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index 0cd1a64ada..43a13a48a7 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -79,8 +79,8 @@ export default class CrossSigningPanel extends React.PureComponent {
     async _getUpdatedStatus() {
         const cli = MatrixClientPeg.get();
         const pkCache = cli.getCrossSigningCacheCallbacks();
-        const crossSigning = cli.crypto._crossSigningInfo;
-        const secretStorage = cli.crypto._secretStorage;
+        const crossSigning = cli.crypto.crossSigningInfo;
+        const secretStorage = cli.crypto.secretStorage;
         const crossSigningPublicKeysOnDevice = crossSigning.getId();
         const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage);
         const masterPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("master"));
diff --git a/src/components/views/settings/SecureBackupPanel.js b/src/components/views/settings/SecureBackupPanel.js
index 4f3eb0bdf6..abfd18f0d3 100644
--- a/src/components/views/settings/SecureBackupPanel.js
+++ b/src/components/views/settings/SecureBackupPanel.js
@@ -131,7 +131,7 @@ export default class SecureBackupPanel extends React.PureComponent {
 
     async _getUpdatedDiagnostics() {
         const cli = MatrixClientPeg.get();
-        const secretStorage = cli.crypto._secretStorage;
+        const secretStorage = cli.crypto.secretStorage;
 
         const backupKeyStored = !!(await cli.isKeyBackupKeyStored());
         const backupKeyFromCache = await cli.crypto.getSessionBackupPrivateKey();

From 99c442cea78f2e0ff3666f127d1260be2bf313e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 13:45:55 +0200
Subject: [PATCH 180/358] Convert MemberList to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../rooms/{MemberList.js => MemberList.tsx}   | 292 +++++++++++-------
 1 file changed, 174 insertions(+), 118 deletions(-)
 rename src/components/views/rooms/{MemberList.js => MemberList.tsx} (64%)

diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.tsx
similarity index 64%
rename from src/components/views/rooms/MemberList.js
rename to src/components/views/rooms/MemberList.tsx
index cb50f0fff3..5353eb94ed 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.tsx
@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,17 +21,28 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher/dispatcher';
-import {isValid3pidInvite} from "../../../RoomInvite";
-import rate_limited_func from "../../../ratelimitedfunc";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import * as sdk from "../../../index";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import { isValid3pidInvite } from "../../../RoomInvite";
+import rateLimitedFunction from "../../../ratelimitedfunc";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from "../../../settings/SettingsStore";
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { RoomState } from 'matrix-js-sdk/src/models/room-state';
+import { User } from "matrix-js-sdk/src/models/user";
+import TruncatedList from '../elements/TruncatedList';
+import Spinner from "../elements/Spinner";
+import SearchBox from "../../structures/SearchBox";
+import AccessibleButton from '../elements/AccessibleButton';
+import EntityTile from "./EntityTile";
+import MemberTile from "./MemberTile";
+import BaseAvatar from '../avatars/BaseAvatar';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -40,41 +52,62 @@ const SHOW_MORE_INCREMENT = 100;
 // matches all ASCII punctuation: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
 const SORT_REGEX = /[\x21-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+/g;
 
+interface IProps {
+    roomId: string;
+    onClose(): void;
+}
+
+interface IState {
+    loading: boolean;
+    members: Array<RoomMember>;
+    filteredJoinedMembers: Array<RoomMember>;
+    filteredInvitedMembers: Array<RoomMember | MatrixEvent>;
+    canInvite: boolean;
+    truncateAtJoined: number;
+    truncateAtInvited: number;
+    searchQuery: string;
+}
+
 @replaceableComponent("views.rooms.MemberList")
-export default class MemberList extends React.Component {
+export default class MemberList extends React.Component<IProps, IState> {
+    private showPresence = true;
+    private mounted = false;
+    private collator: Intl.Collator;
+    private sortNames = new Map<RoomMember, string>(); // RoomMember -> sortName
+
     constructor(props) {
         super(props);
 
         const cli = MatrixClientPeg.get();
         if (cli.hasLazyLoadMembersEnabled()) {
             // show an empty list
-            this.state = this._getMembersState([]);
+            this.state = this.getMembersState([]);
         } else {
-            this.state = this._getMembersState(this.roomMembers());
+            this.state = this.getMembersState(this.roomMembers());
         }
 
         cli.on("Room", this.onRoom); // invites & joining after peek
         const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
         const hsUrl = MatrixClientPeg.get().baseUrl;
-        this._showPresence = true;
+        this.showPresence = true;
         if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) {
-            this._showPresence = enablePresenceByHsUrl[hsUrl];
+            this.showPresence = enablePresenceByHsUrl[hsUrl];
         }
     }
 
     // eslint-disable-next-line camelcase
     UNSAFE_componentWillMount() {
         const cli = MatrixClientPeg.get();
-        this._mounted = true;
+        this.mounted = true;
         if (cli.hasLazyLoadMembersEnabled()) {
-            this._showMembersAccordingToMembershipWithLL();
+            this.showMembersAccordingToMembershipWithLL();
             cli.on("Room.myMembership", this.onMyMembership);
         } else {
-            this._listenForMembersChanges();
+            this.listenForMembersChanges();
         }
     }
 
-    _listenForMembersChanges() {
+    private listenForMembersChanges(): void {
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
         cli.on("RoomMember.name", this.onRoomMemberName);
@@ -89,7 +122,7 @@ export default class MemberList extends React.Component {
     }
 
     componentWillUnmount() {
-        this._mounted = false;
+        this.mounted = false;
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.members", this.onRoomStateMember);
@@ -103,7 +136,7 @@ export default class MemberList extends React.Component {
         }
 
         // cancel any pending calls to the rate_limited_funcs
-        this._updateList.cancelPendingCall();
+        this.updateList.cancelPendingCall();
     }
 
     /**
@@ -111,7 +144,7 @@ export default class MemberList extends React.Component {
      * show a spinner and load the members if the user is joined,
      * or show the members available so far if the user is invited
      */
-    async _showMembersAccordingToMembershipWithLL() {
+    private async showMembersAccordingToMembershipWithLL(): Promise<void> {
         const cli = MatrixClientPeg.get();
         if (cli.hasLazyLoadMembersEnabled()) {
             const cli = MatrixClientPeg.get();
@@ -122,31 +155,31 @@ export default class MemberList extends React.Component {
                 try {
                     await room.loadMembersIfNeeded();
                 } catch (ex) {/* already logged in RoomView */}
-                if (this._mounted) {
-                    this.setState(this._getMembersState(this.roomMembers()));
-                    this._listenForMembersChanges();
+                if (this.mounted) {
+                    this.setState(this.getMembersState(this.roomMembers()));
+                    this.listenForMembersChanges();
                 }
             } else {
                 // show the members we already have loaded
-                this.setState(this._getMembersState(this.roomMembers()));
+                this.setState(this.getMembersState(this.roomMembers()));
             }
         }
     }
 
-    get canInvite() {
+    private get canInvite(): boolean {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
         return room && room.canInvite(cli.getUserId());
     }
 
-    _getMembersState(members) {
-        // set the state after determining _showPresence to make sure it's
-        // taken into account while rerendering
+    private getMembersState(members: Array<RoomMember>): IState {
+        // set the state after determining showPresence to make sure it's
+        // taken into account while rendering
         return {
             loading: false,
             members: members,
-            filteredJoinedMembers: this._filterMembers(members, 'join'),
-            filteredInvitedMembers: this._filterMembers(members, 'invite'),
+            filteredJoinedMembers: this.filterMembers(members, 'join'),
+            filteredInvitedMembers: this.filterMembers(members, 'invite'),
             canInvite: this.canInvite,
 
             // ideally we'd size this to the page height, but
@@ -157,72 +190,72 @@ export default class MemberList extends React.Component {
         };
     }
 
-    onUserPresenceChange = (event, user) => {
+    private onUserPresenceChange = (event: MatrixEvent, user: User): void => {
         // Attach a SINGLE listener for global presence changes then locate the
         // member tile and re-render it. This is more efficient than every tile
         // ever attaching their own listener.
         const tile = this.refs[user.userId];
         // console.log(`Got presence update for ${user.userId}. hasTile=${!!tile}`);
         if (tile) {
-            this._updateList(); // reorder the membership list
+            this.updateList(); // reorder the membership list
         }
     };
 
-    onRoom = room => {
+    private onRoom = (room: Room): void => {
         if (room.roomId !== this.props.roomId) {
             return;
         }
         // We listen for room events because when we accept an invite
         // we need to wait till the room is fully populated with state
         // before refreshing the member list else we get a stale list.
-        this._showMembersAccordingToMembershipWithLL();
+        this.showMembersAccordingToMembershipWithLL();
     };
 
-    onMyMembership = (room, membership, oldMembership) => {
+    private onMyMembership = (room: Room, membership: string, oldMembership: string): void => {
         if (room.roomId === this.props.roomId && membership === "join") {
-            this._showMembersAccordingToMembershipWithLL();
+            this.showMembersAccordingToMembershipWithLL();
         }
     };
 
-    onRoomStateMember = (ev, state, member) => {
+    private onRoomStateMember = (ev: MatrixEvent, state: RoomState, member: RoomMember): void => {
         if (member.roomId !== this.props.roomId) {
             return;
         }
-        this._updateList();
+        this.updateList();
     };
 
-    onRoomMemberName = (ev, member) => {
+    private onRoomMemberName = (ev: MatrixEvent, member: RoomMember): void => {
         if (member.roomId !== this.props.roomId) {
             return;
         }
-        this._updateList();
+        this.updateList();
     };
 
-    onRoomStateEvent = (event, state) => {
+    private onRoomStateEvent = (event: MatrixEvent, state: RoomState): void => {
         if (event.getRoomId() === this.props.roomId &&
             event.getType() === "m.room.third_party_invite") {
-            this._updateList();
+            this.updateList();
         }
 
         if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite });
     };
 
-    _updateList = rate_limited_func(() => {
-        this._updateListNow();
+    private updateList = rateLimitedFunction(() => {
+        this.updateListNow();
     }, 500);
 
-    _updateListNow() {
-        // console.log("Updating memberlist");
-        const newState = {
+    private updateListNow(): void {
+        const members = this.roomMembers()
+
+        this.setState({
             loading: false,
-            members: this.roomMembers(),
-        };
-        newState.filteredJoinedMembers = this._filterMembers(newState.members, 'join', this.state.searchQuery);
-        newState.filteredInvitedMembers = this._filterMembers(newState.members, 'invite', this.state.searchQuery);
-        this.setState(newState);
+            members: members,
+            filteredJoinedMembers: this.filterMembers(members, 'join', this.state.searchQuery),
+            filteredInvitedMembers: this.filterMembers(members, 'invite', this.state.searchQuery),
+        });
     }
 
-    getMembersWithUser() {
+    private getMembersWithUser(): Array<RoomMember> {
         if (!this.props.roomId) return [];
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
@@ -230,15 +263,18 @@ export default class MemberList extends React.Component {
 
         const allMembers = Object.values(room.currentState.members);
 
-        allMembers.forEach(function(member) {
+        allMembers.forEach((member) => {
             // work around a race where you might have a room member object
-            // before the user object exists.  This may or may not cause
+            // before the user object exists. This may or may not cause
             // https://github.com/vector-im/vector-web/issues/186
-            if (member.user === null) {
+            if (!member.user) {
                 member.user = cli.getUser(member.userId);
             }
 
-            member.sortName = (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, "");
+            this.sortNames.set(
+                member,
+                (member.name[0] === '@' ? member.name.substr(1) : member.name).replace(SORT_REGEX, ""),
+            );
 
             // XXX: this user may have no lastPresenceTs value!
             // the right solution here is to fix the race rather than leave it as 0
@@ -247,7 +283,7 @@ export default class MemberList extends React.Component {
         return allMembers;
     }
 
-    roomMembers() {
+    private roomMembers(): Array<RoomMember> {
         const allMembers = this.getMembersWithUser();
         const filteredAndSortedMembers = allMembers.filter((m) => {
             return (
@@ -255,23 +291,21 @@ export default class MemberList extends React.Component {
             );
         });
         const language = SettingsStore.getValue("language");
-        this.collator = new Intl.Collator(language, { sensitivity: 'base', usePunctuation: true });
+        this.collator = new Intl.Collator(language, { sensitivity: 'base', ignorePunctuation: false });
         filteredAndSortedMembers.sort(this.memberSort);
         return filteredAndSortedMembers;
     }
 
-    _createOverflowTileJoined = (overflowCount, totalCount) => {
-        return this._createOverflowTile(overflowCount, totalCount, this._showMoreJoinedMemberList);
+    private createOverflowTileJoined = (overflowCount: number, totalCount: number): JSX.Element => {
+        return this.createOverflowTile(overflowCount, totalCount, this.showMoreJoinedMemberList);
     };
 
-    _createOverflowTileInvited = (overflowCount, totalCount) => {
-        return this._createOverflowTile(overflowCount, totalCount, this._showMoreInvitedMemberList);
+    private createOverflowTileInvited = (overflowCount: number, totalCount: number): JSX.Element => {
+        return this.createOverflowTile(overflowCount, totalCount, this.showMoreInvitedMemberList);
     };
 
-    _createOverflowTile = (overflowCount, totalCount, onClick) => {
+    private createOverflowTile = (overflowCount: number, totalCount: number, onClick: () => void): JSX.Element=> {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
-        const EntityTile = sdk.getComponent("rooms.EntityTile");
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
@@ -281,31 +315,48 @@ export default class MemberList extends React.Component {
         );
     };
 
-    _showMoreJoinedMemberList = () => {
+    private showMoreJoinedMemberList = (): void => {
         this.setState({
             truncateAtJoined: this.state.truncateAtJoined + SHOW_MORE_INCREMENT,
         });
     };
 
-    _showMoreInvitedMemberList = () => {
+    private showMoreInvitedMemberList = (): void => {
         this.setState({
             truncateAtInvited: this.state.truncateAtInvited + SHOW_MORE_INCREMENT,
         });
     };
 
-    memberString(member) {
+    /**
+     * SHOULD ONLY BE USED BY TESTS
+     */
+    public memberString(member: RoomMember): string {
         if (!member) {
             return "(null)";
         } else {
             const u = member.user;
-            return "(" + member.name + ", " + member.powerLevel + ", " + (u ? u.lastActiveAgo : "<null>") + ", " + (u ? u.getLastActiveTs() : "<null>") + ", " + (u ? u.currentlyActive : "<null>") + ", " + (u ? u.presence : "<null>") + ")";
+            return (
+                "(" +
+                member.name +
+                ", " +
+                member.powerLevel +
+                ", " +
+                (u ? u.lastActiveAgo : "<null>") +
+                ", " +
+                (u ? u.getLastActiveTs() : "<null>") +
+                ", " +
+                (u ? u.currentlyActive : "<null>") +
+                ", " +
+                (u ? u.presence : "<null>") +
+                ")"
+            );
         }
     }
 
     // returns negative if a comes before b,
     // returns 0 if a and b are equivalent in ordering
     // returns positive if a comes after b.
-    memberSort = (memberA, memberB) => {
+    private memberSort = (memberA: RoomMember, memberB: RoomMember): number => {
         // order by presence, with "active now" first.
         // ...and then by power level
         // ...and then by last active
@@ -325,7 +376,7 @@ export default class MemberList extends React.Component {
         if (!userA && userB) return 1;
 
         // First by presence
-        if (this._showPresence) {
+        if (this.showPresence) {
             const convertPresence = (p) => p === 'unavailable' ? 'online' : p;
             const presenceIndex = p => {
                 const order = ['active', 'online', 'offline'];
@@ -349,31 +400,31 @@ export default class MemberList extends React.Component {
         }
 
         // Third by last active
-        if (this._showPresence && userA.getLastActiveTs() !== userB.getLastActiveTs()) {
+        if (this.showPresence && userA.getLastActiveTs() !== userB.getLastActiveTs()) {
             // console.log("Comparing on last active timestamp - returning");
             return userB.getLastActiveTs() - userA.getLastActiveTs();
         }
 
         // Fourth by name (alphabetical)
-        return this.collator.compare(memberA.sortName, memberB.sortName);
+        return this.collator.compare(this.sortNames.get(memberA), this.sortNames.get(memberB));
     };
 
-    onSearchQueryChanged = searchQuery => {
+    private onSearchQueryChanged = (searchQuery: string): void => {
         this.setState({
             searchQuery,
-            filteredJoinedMembers: this._filterMembers(this.state.members, 'join', searchQuery),
-            filteredInvitedMembers: this._filterMembers(this.state.members, 'invite', searchQuery),
+            filteredJoinedMembers: this.filterMembers(this.state.members, 'join', searchQuery),
+            filteredInvitedMembers: this.filterMembers(this.state.members, 'invite', searchQuery),
         });
     };
 
-    _onPending3pidInviteClick = inviteEvent => {
+    private onPending3pidInviteClick = (inviteEvent: MatrixEvent): void => {
         dis.dispatch({
             action: 'view_3pid_invite',
             event: inviteEvent,
         });
     };
 
-    _filterMembers(members, membership, query) {
+    private filterMembers(members: Array<RoomMember>, membership: string, query?: string): Array<RoomMember> {
         return members.filter((m) => {
             if (query) {
                 query = query.toLowerCase();
@@ -389,7 +440,7 @@ export default class MemberList extends React.Component {
         });
     }
 
-    _getPending3PidInvites() {
+    private getPending3PidInvites(): Array<MatrixEvent> {
         // include 3pid invites (m.room.third_party_invite) state events.
         // The HS may have already converted these into m.room.member invites so
         // we shouldn't add them if the 3pid invite state key (token) is in the
@@ -409,42 +460,40 @@ export default class MemberList extends React.Component {
         }
     }
 
-    _makeMemberTiles(members) {
-        const MemberTile = sdk.getComponent("rooms.MemberTile");
-        const EntityTile = sdk.getComponent("rooms.EntityTile");
-
+    private makeMemberTiles(members: Array<RoomMember | MatrixEvent>) {
         return members.map((m) => {
-            if (m.userId) {
+            if (m instanceof RoomMember) {
                 // Is a Matrix invite
-                return <MemberTile key={m.userId} member={m} ref={m.userId} showPresence={this._showPresence} />;
+                return <MemberTile key={m.userId} member={m} ref={m.userId} showPresence={this.showPresence} />;
             } else {
                 // Is a 3pid invite
                 return <EntityTile key={m.getStateKey()} name={m.getContent().display_name} suppressOnHover={true}
-                    onClick={() => this._onPending3pidInviteClick(m)} />;
+                    onClick={() => this.onPending3pidInviteClick(m)} />;
             }
         });
     }
 
-    _getChildrenJoined = (start, end) => this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
-
-    _getChildCountJoined = () => this.state.filteredJoinedMembers.length;
-
-    _getChildrenInvited = (start, end) => {
-        let targets = this.state.filteredInvitedMembers;
-        if (end > this.state.filteredInvitedMembers.length) {
-            targets = targets.concat(this._getPending3PidInvites());
-        }
-
-        return this._makeMemberTiles(targets.slice(start, end));
+    private getChildrenJoined = (start: number, end: number): Array<JSX.Element> => {
+        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end))
     };
 
-    _getChildCountInvited = () => {
-        return this.state.filteredInvitedMembers.length + (this._getPending3PidInvites() || []).length;
+    private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length;
+
+    private getChildrenInvited = (start: number, end: number): Array<JSX.Element> => {
+        let targets = this.state.filteredInvitedMembers;
+        if (end > this.state.filteredInvitedMembers.length) {
+            targets = targets.concat(this.getPending3PidInvites());
+        }
+
+        return this.makeMemberTiles(targets.slice(start, end));
+    };
+
+    private getChildCountInvited = (): number => {
+        return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
     }
 
     render() {
         if (this.state.loading) {
-            const Spinner = sdk.getComponent("elements.Spinner");
             return <BaseCard
                 className="mx_MemberList"
                 onClose={this.props.onClose}
@@ -454,9 +503,6 @@ export default class MemberList extends React.Component {
             </BaseCard>;
         }
 
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const TruncatedList = sdk.getComponent("elements.TruncatedList");
-
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
         let inviteButton;
@@ -470,22 +516,30 @@ export default class MemberList extends React.Component {
                 inviteButtonText = _t("Invite to this space");
             }
 
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-            inviteButton =
-                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick} disabled={!this.state.canInvite}>
+            inviteButton = (
+                <AccessibleButton
+                    className="mx_MemberList_invite"
+                    onClick={this.onInviteButtonClick}
+                    disabled={!this.state.canInvite}
+                >
                     <span>{ inviteButtonText }</span>
-                </AccessibleButton>;
+                </AccessibleButton>
+            );
         }
 
         let invitedHeader;
         let invitedSection;
-        if (this._getChildCountInvited() > 0) {
+        if (this.getChildCountInvited() > 0) {
             invitedHeader = <h2>{ _t("Invited") }</h2>;
-            invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
-                createOverflowElement={this._createOverflowTileInvited}
-                getChildren={this._getChildrenInvited}
-                getChildCount={this._getChildCountInvited}
-            />;
+            invitedSection = (
+                <TruncatedList
+                    className="mx_MemberList_section mx_MemberList_invited"
+                    truncateAt={this.state.truncateAtInvited}
+                    createOverflowElement={this.createOverflowTileInvited}
+                    getChildren={this.getChildrenInvited}
+                    getChildCount={this.getChildCountInvited}
+                />
+            );
         }
 
         const footer = (
@@ -517,17 +571,19 @@ export default class MemberList extends React.Component {
             previousPhase={previousPhase}
         >
             <div className="mx_MemberList_wrapper">
-                <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
-                    createOverflowElement={this._createOverflowTileJoined}
-                    getChildren={this._getChildrenJoined}
-                    getChildCount={this._getChildCountJoined} />
+                <TruncatedList
+                    className="mx_MemberList_section mx_MemberList_joined"
+                    truncateAt={this.state.truncateAtJoined}
+                    createOverflowElement={this.createOverflowTileJoined}
+                    getChildren={this.getChildrenJoined}
+                    getChildCount={this.getChildCountJoined} />
                 { invitedHeader }
                 { invitedSection }
             </div>
         </BaseCard>;
     }
 
-    onInviteButtonClick = () => {
+    onInviteButtonClick = (): void => {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;

From 0df6200dd0f5ac87c5897a4d7f014ce2d93afed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 14:32:41 +0200
Subject: [PATCH 181/358] Convert MemberList-test to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 ...MemberList-test.js => MemberList-test.tsx} | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)
 rename test/components/views/rooms/{MemberList-test.js => MemberList-test.tsx} (88%)

diff --git a/test/components/views/rooms/MemberList-test.js b/test/components/views/rooms/MemberList-test.tsx
similarity index 88%
rename from test/components/views/rooms/MemberList-test.js
rename to test/components/views/rooms/MemberList-test.tsx
index 28fead770c..8012c43c4b 100644
--- a/test/components/views/rooms/MemberList-test.js
+++ b/test/components/views/rooms/MemberList-test.tsx
@@ -1,21 +1,36 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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 React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
 
 import * as TestUtils from '../../../test-utils';
-
-import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
 import sdk from '../../../skinned-sdk';
-
-import {Room, RoomMember, User} from 'matrix-js-sdk';
-
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { User } from "matrix-js-sdk/src/models/user";
 import { compare } from "../../../../src/utils/strings";
+import MemberList from "../../../../src/components/views/rooms/MemberList";
 
 function generateRoomId() {
     return '!' + Math.random().toString().slice(2, 10) + ':domain';
 }
 
-
 describe('MemberList', () => {
     function createRoom(opts) {
         const room = new Room(generateRoomId(), null, client.getUserId());
@@ -97,13 +112,19 @@ describe('MemberList', () => {
             memberListRoom.currentState.members[member.userId] = member;
         }
 
-        const MemberList = sdk.getComponent('views.rooms.MemberList');
         const WrappedMemberList = TestUtils.wrapInMatrixClientContext(MemberList);
         const gatherWrappedRef = (r) => {
             memberList = r;
         };
-        root = ReactDOM.render(<WrappedMemberList roomId={memberListRoom.roomId}
-            wrappedRef={gatherWrappedRef} />, parentDiv);
+        root = ReactDOM.render(
+            (
+                <WrappedMemberList
+                    roomId={memberListRoom.roomId}
+                    wrappedRef={gatherWrappedRef}
+                />
+            ),
+            parentDiv,
+        );
     });
 
     afterEach((done) => {
@@ -213,8 +234,8 @@ describe('MemberList', () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList._showPresence = enablePresence;
-                memberList._updateListNow();
+                memberList.showPresence = enablePresence;
+                memberList.updateListNow();
 
                 const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
@@ -225,7 +246,7 @@ describe('MemberList', () => {
 
                 // Bypass all the event listeners and skip to the good part
                 memberList._showPresence = enablePresence;
-                memberList._updateListNow();
+                memberList.updateListNow();
 
                 const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
@@ -254,8 +275,8 @@ describe('MemberList', () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList._showPresence = enablePresence;
-                memberList._updateListNow();
+                memberList.showPresence = enablePresence;
+                memberList.updateListNow();
 
                 const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
@@ -273,8 +294,8 @@ describe('MemberList', () => {
                 });
 
                 // Bypass all the event listeners and skip to the good part
-                memberList._showPresence = enablePresence;
-                memberList._updateListNow();
+                memberList.showPresence = enablePresence;
+                memberList.updateListNow();
 
                 const tiles = ReactTestUtils.scryRenderedComponentsWithType(root, MemberTile);
                 expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);

From b7a821a9e4d7bbe99f767b2fb86850936d99ebed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 14:59:36 +0200
Subject: [PATCH 182/358] .tsx can also be tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6b369e9c27..f87abf9e44 100644
--- a/package.json
+++ b/package.json
@@ -172,7 +172,7 @@
   "jest": {
     "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
-      "<rootDir>/test/**/*-test.[jt]s"
+      "<rootDir>/test/**/*-test.[jt]s?(x)"
     ],
     "setupFiles": [
       "jest-canvas-mock"

From 5d93216c94f1f76a99fd30b4bbcd73459446ee2a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Jun 2021 16:10:47 +0100
Subject: [PATCH 183/358] Decrease e2e shield fill mask size so that it doesn't
 overlap

---
 res/css/structures/_ToastContainer.scss         | 2 +-
 res/css/views/messages/_common_CryptoEvent.scss | 2 +-
 res/css/views/rooms/_E2EIcon.scss               | 4 ++--
 res/css/views/rooms/_EventTile.scss             | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 14e4c01389..35d6087a1b 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -71,7 +71,7 @@ limitations under the License.
                 &::before {
                     background-color: #ffffff;
                     mask-image: url('$(res)/img/e2e/normal.svg');
-                    mask-size: 90%;
+                    mask-size: 80%;
                 }
 
                 &::after {
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 4faa4b594f..bcc40f1181 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -21,7 +21,7 @@ limitations under the License.
         mask-image: url('$(res)/img/e2e/normal.svg');
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-size: 90%;
+        mask-size: 80%;
     }
 
     &.mx_cryptoEvent_icon::after {
diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
index a3473dedec..68ad44cf6a 100644
--- a/res/css/views/rooms/_E2EIcon.scss
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -45,7 +45,7 @@ limitations under the License.
     mask-image: url('$(res)/img/e2e/normal.svg');
     mask-repeat: no-repeat;
     mask-position: center;
-    mask-size: 90%;
+    mask-size: 80%;
 }
 
 // transparent-looking border surrounding the shield for when overlain over avatars
@@ -59,7 +59,7 @@ limitations under the License.
     }
     // shrink the infill of the badge
     &::before {
-        mask-size: 65%;
+        mask-size: 60%;
     }
 }
 
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3af266caee..27a83e58f8 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -345,7 +345,7 @@ $hover-select-border: 4px;
         mask-image: url('$(res)/img/e2e/normal.svg');
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-size: 90%;
+        mask-size: 80%;
     }
 }
 

From e696a1d5dc4d6848e47caf64e0c0c58bda659c8a Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 10:31:08 -0600
Subject: [PATCH 184/358] Update membership reason handling, including leave
 reason displaying

Incorporates ideas from https://github.com/matrix-org/matrix-react-sdk/pull/6198
---
 src/TextForEvent.ts         | 47 +++++++++++++++++++++++--------------
 src/i18n/strings/en_EN.json |  6 ++++-
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 649c53664e..55a7813c6f 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -31,8 +31,8 @@ function textForMemberEvent(ev): () => string | null {
     const targetName = ev.target ? ev.target.name : ev.getStateKey();
     const prevContent = ev.getPrevContent();
     const content = ev.getContent();
+    const reason = content.reason;
 
-    const getReason = () => content.reason ? (_t('Reason') + ': ' + content.reason) : '';
     switch (content.membership) {
         case 'invite': {
             const threePidContent = content.third_party_invite;
@@ -43,14 +43,16 @@ function textForMemberEvent(ev): () => string | null {
                         displayName: threePidContent.display_name,
                     });
                 } else {
-                    return () => _t('%(targetName)s accepted an invitation.', {targetName});
+                    return () => _t('%(targetName)s accepted an invitation.', { targetName });
                 }
             } else {
-                return () => _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
+                return () => _t('%(senderName)s invited %(targetName)s.', { senderName, targetName });
             }
         }
         case 'ban':
-            return () => _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + getReason();
+            return () => reason
+                ? _t('%(senderName)s banned %(targetName)s. Reason: %(reason)s', { senderName, targetName, reason })
+                : _t('%(senderName)s banned %(targetName)s.', { senderName, targetName });
         case 'join':
             if (prevContent && prevContent.membership === 'join') {
                 if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) {
@@ -69,38 +71,49 @@ function textForMemberEvent(ev): () => string | null {
                         oldDisplayName: prevContent.displayname,
                     });
                 } else if (prevContent.avatar_url && !content.avatar_url) {
-                    return () => _t('%(senderName)s removed their profile picture.', {senderName});
+                    return () => _t('%(senderName)s removed their profile picture.', { senderName });
                 } else if (prevContent.avatar_url && content.avatar_url &&
                     prevContent.avatar_url !== content.avatar_url) {
-                    return () => _t('%(senderName)s changed their profile picture.', {senderName});
+                    return () => _t('%(senderName)s changed their profile picture.', { senderName });
                 } else if (!prevContent.avatar_url && content.avatar_url) {
-                    return () => _t('%(senderName)s set a profile picture.', {senderName});
+                    return () => _t('%(senderName)s set a profile picture.', { senderName });
                 } else if (SettingsStore.getValue("showHiddenEventsInTimeline")) {
                     // This is a null rejoin, it will only be visible if the Labs option is enabled
-                    return () => _t("%(senderName)s made no change.", {senderName});
+                    return () => _t("%(senderName)s made no change.", { senderName });
                 } else {
                     return null;
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
-                return () => _t('%(targetName)s joined the room.', {targetName});
+                return () => _t('%(targetName)s joined the room.', { targetName });
             }
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 if (prevContent.membership === "invite") {
-                    return () => _t('%(targetName)s rejected the invitation.', {targetName});
+                    return () => _t('%(targetName)s rejected the invitation.', { targetName });
                 } else {
-                    return () => _t('%(targetName)s left the room.', {targetName});
+                    return () => reason
+                        ? _t('%(targetName)s left the room. Reason: %(reason)s', { targetName, reason })
+                        : _t('%(targetName)s left the room.', { targetName });
                 }
             } else if (prevContent.membership === "ban") {
-                return () => _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName});
+                return () => _t('%(senderName)s unbanned %(targetName)s.', { senderName, targetName });
             } else if (prevContent.membership === "invite") {
-                return () => _t('%(senderName)s withdrew %(targetName)s\'s invitation.', {
-                    senderName,
-                    targetName,
-                }) + ' ' + getReason();
+                return () => reason
+                    ? _t('%(senderName)s withdrew %(targetName)s\'s invitation. Reason: %(reason)s', {
+                        senderName,
+                        targetName,
+                        reason,
+                    })
+                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation.', { senderName, targetName })
             } else if (prevContent.membership === "join") {
-                return () => _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + getReason();
+                return () => reason
+                    ? _t('%(senderName)s kicked %(targetName)s. Reason: %(reason)s', {
+                        senderName,
+                        targetName,
+                        reason,
+                    })
+                    : _t('%(senderName)s kicked %(targetName)s.', { senderName, targetName });
             } else {
                 return null;
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7751c2eb32..5bee2e2f2c 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -489,10 +489,10 @@
     "Converts the room to a DM": "Converts the room to a DM",
     "Converts the DM to a room": "Converts the DM to a room",
     "Displays action": "Displays action",
-    "Reason": "Reason",
     "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
     "%(targetName)s accepted an invitation.": "%(targetName)s accepted an invitation.",
     "%(senderName)s invited %(targetName)s.": "%(senderName)s invited %(targetName)s.",
+    "%(senderName)s banned %(targetName)s. Reason: %(reason)s": "%(senderName)s banned %(targetName)s. Reason: %(reason)s",
     "%(senderName)s banned %(targetName)s.": "%(senderName)s banned %(targetName)s.",
     "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s changed their display name to %(displayName)s.",
     "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s set their display name to %(displayName)s.",
@@ -503,9 +503,12 @@
     "%(senderName)s made no change.": "%(senderName)s made no change.",
     "%(targetName)s joined the room.": "%(targetName)s joined the room.",
     "%(targetName)s rejected the invitation.": "%(targetName)s rejected the invitation.",
+    "%(targetName)s left the room. Reason: %(reason)s": "%(targetName)s left the room. Reason: %(reason)s",
     "%(targetName)s left the room.": "%(targetName)s left the room.",
     "%(senderName)s unbanned %(targetName)s.": "%(senderName)s unbanned %(targetName)s.",
+    "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s": "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s",
     "%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s withdrew %(targetName)s's invitation.",
+    "%(senderName)s kicked %(targetName)s. Reason: %(reason)s": "%(senderName)s kicked %(targetName)s. Reason: %(reason)s",
     "%(senderName)s kicked %(targetName)s.": "%(senderName)s kicked %(targetName)s.",
     "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
     "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s removed the room name.",
@@ -1410,6 +1413,7 @@
     "Failed to unban": "Failed to unban",
     "Unban": "Unban",
     "Banned by %(displayName)s": "Banned by %(displayName)s",
+    "Reason": "Reason",
     "Error changing power level requirement": "Error changing power level requirement",
     "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.",
     "Error changing power level": "Error changing power level",

From e290fdaabcb0259b26412b34b3ec4cd11e76164a Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 11:21:56 -0600
Subject: [PATCH 185/358] Update widget-api for
 https://github.com/matrix-org/matrix-react-sdk/pull/6178

---
 package.json | 2 +-
 yarn.lock    | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 6b369e9c27..bc79b791d4 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
     "matrix-js-sdk": "12.0.0",
-    "matrix-widget-api": "^0.1.0-beta.14",
+    "matrix-widget-api": "^0.1.0-beta.15",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
diff --git a/yarn.lock b/yarn.lock
index 32ca30a996..3bcb8de404 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1334,6 +1334,7 @@
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz":
   version "3.2.3"
+  uid cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4
   resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4"
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents":
@@ -5772,10 +5773,10 @@ matrix-react-test-utils@^0.2.3:
     "@babel/traverse" "^7.13.17"
     walk "^2.3.14"
 
-matrix-widget-api@^0.1.0-beta.14:
-  version "0.1.0-beta.14"
-  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.14.tgz#e38beed71c5ebd62c1ac1d79ef262d7150b42c70"
-  integrity sha512-5tC6LO1vCblKg/Hfzf5U1eHPz1nHUZIobAm3gkEKV5vpYPgRpr8KdkLiGB78VZid0tB17CVtAb4VKI8CQ3lhAQ==
+matrix-widget-api@^0.1.0-beta.15:
+  version "0.1.0-beta.15"
+  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.15.tgz#b02511f93fe1a3634868b6e246d736107f182745"
+  integrity sha512-sWmtb8ZarSbHVbk5ni7IHBR9jOh7m1+5R4soky0fEO9VKl+MN7skT0+qNux3J9WuUAu2D80dZW9xPUT9cxfxbg==
   dependencies:
     "@types/events" "^3.0.0"
     events "^3.2.0"

From d5acfc6cf453915deed0bf6ac6bca2b5920d73f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 17:27:53 +0200
Subject: [PATCH 186/358] Convert EntityTile to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../rooms/{EntityTile.js => EntityTile.tsx}   | 94 ++++++++++---------
 1 file changed, 49 insertions(+), 45 deletions(-)
 rename src/components/views/rooms/{EntityTile.js => EntityTile.tsx} (75%)

diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.tsx
similarity index 75%
rename from src/components/views/rooms/EntityTile.js
rename to src/components/views/rooms/EntityTile.tsx
index a92d87643c..53c5900fbf 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -16,14 +16,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
+import React, { createRef } from 'react';
 import AccessibleButton from '../elements/AccessibleButton';
-import { _t } from '../../../languageHandler';
+import { _td } from '../../../languageHandler';
 import classNames from "classnames";
 import E2EIcon from './E2EIcon';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import BaseAvatar from '../avatars/BaseAvatar';
+import PresenceLabel from "./PresenceLabel";
+
+const PowerLabel: Record<string, string> = {
+    "admin": _td("Admin"),
+    "moderator": _td("Mod"),
+}
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
@@ -31,14 +36,14 @@ const PRESENCE_CLASS = {
     "unavailable": "mx_EntityTile_unavailable",
 };
 
-function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
+function presenceClassForMember(presenceState: string, lastActiveAgo: number, showPresence: boolean) {
     if (showPresence === false) {
         return 'mx_EntityTile_online_beenactive';
     }
 
     // offline is split into two categories depending on whether we have
     // a last_active_ago for them.
-    if (presenceState == 'offline') {
+    if (presenceState === 'offline') {
         if (lastActiveAgo) {
             return PRESENCE_CLASS['offline'] + '_beenactive';
         } else {
@@ -51,29 +56,34 @@ function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     }
 }
 
-@replaceableComponent("views.rooms.EntityTile")
-class EntityTile extends React.Component {
-    static propTypes = {
-        name: PropTypes.string,
-        title: PropTypes.string,
-        avatarJsx: PropTypes.any, // <BaseAvatar />
-        className: PropTypes.string,
-        presenceState: PropTypes.string,
-        presenceLastActiveAgo: PropTypes.number,
-        presenceLastTs: PropTypes.number,
-        presenceCurrentlyActive: PropTypes.bool,
-        showInviteButton: PropTypes.bool,
-        shouldComponentUpdate: PropTypes.func,
-        onClick: PropTypes.func,
-        suppressOnHover: PropTypes.bool,
-        showPresence: PropTypes.bool,
-        subtextLabel: PropTypes.string,
-        e2eStatus: PropTypes.string,
-    };
+interface IProps {
+    name?: string,
+    title?: string,
+    avatarJsx?: JSX.Element, // <BaseAvatar />
+    className?: string,
+    presenceState?: string,
+    presenceLastActiveAgo?: number,
+    presenceLastTs?: number,
+    presenceCurrentlyActive?: boolean,
+    showInviteButton?: boolean,
+    shouldComponentUpdate?(nextProps: IProps, nextState: IState): boolean,
+    onClick?(): void,
+    suppressOnHover?: boolean,
+    showPresence?: boolean,
+    subtextLabel?: string,
+    e2eStatus?: string,
+    powerStatus?: string,
+}
 
+interface IState {
+    hover: boolean;
+}
+
+@replaceableComponent("views.rooms.EntityTile")
+export default class EntityTile extends React.Component<IProps, IState> {
     static defaultProps = {
-        shouldComponentUpdate: function(nextProps, nextState) { return true; },
-        onClick: function() {},
+        shouldComponentUpdate: (nextProps: IProps, nextState: IState) => { return true; },
+        onClick: () => {},
         presenceState: "offline",
         presenceLastActiveAgo: 0,
         presenceLastTs: 0,
@@ -81,12 +91,17 @@ class EntityTile extends React.Component {
         suppressOnHover: false,
         showPresence: true,
     };
+    private container = createRef<HTMLDivElement>();
 
-    state = {
-        hover: false,
-    };
+    constructor(props: IProps) {
+        super(props);
 
-    shouldComponentUpdate(nextProps, nextState) {
+        this.state = {
+            hover: false,
+        };
+    }
+
+    shouldComponentUpdate(nextProps: IProps, nextState: IState) {
         if (this.state.hover !== nextState.hover) return true;
         return this.props.shouldComponentUpdate(nextProps, nextState);
     }
@@ -110,7 +125,6 @@ class EntityTile extends React.Component {
             const activeAgo = this.props.presenceLastActiveAgo ?
                 (Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)) : -1;
 
-            const PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
             let presenceLabel = null;
             if (this.props.showPresence) {
                 presenceLabel = <PresenceLabel activeAgo={activeAgo}
@@ -155,10 +169,7 @@ class EntityTile extends React.Component {
         let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            const powerText = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
-                [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
-            }[powerStatus];
+            const powerText = PowerLabel[powerStatus];
             powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
         }
 
@@ -168,14 +179,12 @@ class EntityTile extends React.Component {
             e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
         }
 
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-
         const av = this.props.avatarJsx ||
             <BaseAvatar name={this.props.name} width={36} height={36} aria-hidden="true" />;
 
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
-            <div ref={(c) => this.container = c} >
+            <div ref={this.container} >
                 <AccessibleButton
                     className={classNames(mainClassNames)}
                     title={this.props.title}
@@ -193,8 +202,3 @@ class EntityTile extends React.Component {
         );
     }
 }
-
-EntityTile.POWER_STATUS_MODERATOR = "moderator";
-EntityTile.POWER_STATUS_ADMIN = "admin";
-
-export default EntityTile;

From 87d27593de06f92f9dc39cbe818dc71f25778cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 17:28:02 +0200
Subject: [PATCH 187/358] Convert MemberTile to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../rooms/{MemberTile.js => MemberTile.tsx}   | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)
 rename src/components/views/rooms/{MemberTile.js => MemberTile.tsx} (79%)

diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.tsx
similarity index 79%
rename from src/components/views/rooms/MemberTile.js
rename to src/components/views/rooms/MemberTile.tsx
index f8df7ed78f..e0ee0e5daf 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -17,20 +17,32 @@ limitations under the License.
 
 import SettingsStore from "../../../settings/SettingsStore";
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as sdk from "../../../index";
 import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto";
+
+interface IProps {
+    member: RoomMember,
+    showPresence?: boolean,
+}
+
+interface IState {
+    statusMessage: string,
+    isRoomEncrypted: boolean,
+    e2eStatus: string,
+}
 
 @replaceableComponent("views.rooms.MemberTile")
-export default class MemberTile extends React.Component {
-    static propTypes = {
-        member: PropTypes.any.isRequired, // RoomMember
-        showPresence: PropTypes.bool,
-    };
+export default class MemberTile extends React.Component<IProps, IState> {
+    private userLastModifiedTime: number;
+    private memberLastModifiedTime: number;
 
     static defaultProps = {
         showPresence: true,
@@ -52,7 +64,7 @@ export default class MemberTile extends React.Component {
         if (SettingsStore.getValue("feature_custom_status")) {
             const { user } = this.props.member;
             if (user) {
-                user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+                user.on("User._unstable_statusMessage", this.onStatusMessageCommitted);
             }
         }
 
@@ -80,7 +92,7 @@ export default class MemberTile extends React.Component {
         if (user) {
             user.removeListener(
                 "User._unstable_statusMessage",
-                this._onStatusMessageCommitted,
+                this.onStatusMessageCommitted,
             );
         }
 
@@ -91,8 +103,8 @@ export default class MemberTile extends React.Component {
         }
     }
 
-    onRoomStateEvents = ev => {
-        if (ev.getType() !== "m.room.encryption") return;
+    private onRoomStateEvents = (ev: MatrixEvent): void => {
+        if (ev.getType() !== EventType.RoomEncryption) return;
         const { roomId } = this.props.member;
         if (ev.getRoomId() !== roomId) return;
 
@@ -105,17 +117,17 @@ export default class MemberTile extends React.Component {
         this.updateE2EStatus();
     };
 
-    onUserTrustStatusChanged = (userId, trustStatus) => {
+    private onUserTrustStatusChanged = (userId: string, trustStatus: string): void => {
         if (userId !== this.props.member.userId) return;
         this.updateE2EStatus();
     };
 
-    onDeviceVerificationChanged = (userId, deviceId, deviceInfo) => {
+    private onDeviceVerificationChanged = (userId: string, deviceId: string, deviceInfo: DeviceInfo): void => {
         if (userId !== this.props.member.userId) return;
         this.updateE2EStatus();
     };
 
-    async updateE2EStatus() {
+    private async updateE2EStatus(): Promise<void> {
         const cli = MatrixClientPeg.get();
         const { userId } = this.props.member;
         const isMe = userId === cli.getUserId();
@@ -143,32 +155,32 @@ export default class MemberTile extends React.Component {
         });
     }
 
-    getStatusMessage() {
+    private getStatusMessage(): string {
         const { user } = this.props.member;
         if (!user) {
             return "";
         }
-        return user._unstable_statusMessage;
+        return user.unstable_statusMessage;
     }
 
-    _onStatusMessageCommitted = () => {
+    private onStatusMessageCommitted = (): void => {
         // The `User` object has observed a status message change.
         this.setState({
             statusMessage: this.getStatusMessage(),
         });
     };
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
         if (
-            this.member_last_modified_time === undefined ||
-            this.member_last_modified_time < nextProps.member.getLastModifiedTime()
+            this.memberLastModifiedTime === undefined ||
+            this.memberLastModifiedTime < nextProps.member.getLastModifiedTime()
         ) {
             return true;
         }
         if (
             nextProps.member.user &&
-            (this.user_last_modified_time === undefined ||
-            this.user_last_modified_time < nextProps.member.user.getLastModifiedTime())
+            (this.userLastModifiedTime === undefined ||
+            this.userLastModifiedTime < nextProps.member.user.getLastModifiedTime())
         ) {
             return true;
         }
@@ -181,18 +193,18 @@ export default class MemberTile extends React.Component {
         return false;
     }
 
-    onClick = e => {
+    private onClick = (e: MouseEvent): void => {
         dis.dispatch({
             action: Action.ViewUser,
             member: this.props.member,
         });
     };
 
-    _getDisplayName() {
+    private getDisplayName(): string {
         return this.props.member.name;
     }
 
-    getPowerLabel() {
+    private getPowerLabel(): string {
         return _t("%(userName)s (power %(powerLevelNumber)s)", {
             userName: this.props.member.userId,
             powerLevelNumber: this.props.member.powerLevel,
@@ -204,7 +216,7 @@ export default class MemberTile extends React.Component {
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
         const member = this.props.member;
-        const name = this._getDisplayName();
+        const name = this.getDisplayName();
         const presenceState = member.user ? member.user.presence : null;
 
         let statusMessage = null;
@@ -217,9 +229,9 @@ export default class MemberTile extends React.Component {
         );
 
         if (member.user) {
-            this.user_last_modified_time = member.user.getLastModifiedTime();
+            this.userLastModifiedTime = member.user.getLastModifiedTime();
         }
-        this.member_last_modified_time = member.getLastModifiedTime();
+        this.memberLastModifiedTime = member.getLastModifiedTime();
 
         const powerStatusMap = new Map([
             [100, EntityTile.POWER_STATUS_ADMIN],

From e25940cbdd18630c58e6b4d58f577d85f30fd97b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 23 Jun 2021 19:18:36 +0200
Subject: [PATCH 188/358] Convert PresenceLabel to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../{PresenceLabel.js => PresenceLabel.tsx}   | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)
 rename src/components/views/rooms/{PresenceLabel.js => PresenceLabel.tsx} (69%)

diff --git a/src/components/views/rooms/PresenceLabel.js b/src/components/views/rooms/PresenceLabel.tsx
similarity index 69%
rename from src/components/views/rooms/PresenceLabel.js
rename to src/components/views/rooms/PresenceLabel.tsx
index ca21afe63d..513fecfd43 100644
--- a/src/components/views/rooms/PresenceLabel.js
+++ b/src/components/views/rooms/PresenceLabel.tsx
@@ -15,26 +15,23 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // number of milliseconds ago this user was last active.
+    // zero = unknown
+    activeAgo?: number,
+    // if true, activeAgo is an approximation and "Now" should
+    // be shown instead
+    currentlyActive?: boolean,
+    // offline, online, etc
+    presenceState?: string,
+}
+
 @replaceableComponent("views.rooms.PresenceLabel")
-export default class PresenceLabel extends React.Component {
-    static propTypes = {
-        // number of milliseconds ago this user was last active.
-        // zero = unknown
-        activeAgo: PropTypes.number,
-
-        // if true, activeAgo is an approximation and "Now" should
-        // be shown instead
-        currentlyActive: PropTypes.bool,
-
-        // offline, online, etc
-        presenceState: PropTypes.string,
-    };
-
+export default class PresenceLabel extends React.Component<IProps> {
     static defaultProps = {
         activeAgo: -1,
         presenceState: null,
@@ -42,29 +39,29 @@ export default class PresenceLabel extends React.Component {
 
     // Return duration as a string using appropriate time units
     // XXX: This would be better handled using a culture-aware library, but we don't use one yet.
-    getDuration(time) {
+    private getDuration(time: number): string {
         if (!time) return;
-        const t = parseInt(time / 1000);
+        const t = time / 1000;
         const s = t % 60;
-        const m = parseInt(t / 60) % 60;
-        const h = parseInt(t / (60 * 60)) % 24;
-        const d = parseInt(t / (60 * 60 * 24));
+        const m = t / 60 % 60;
+        const h = t / (60 * 60) % 24;
+        const d = t / (60 * 60 * 24);
         if (t < 60) {
             if (t < 0) {
-                return _t("%(duration)ss", {duration: 0});
+                return _t("%(duration)ss", { duration: 0 });
             }
-            return _t("%(duration)ss", {duration: s});
+            return _t("%(duration)ss", { duration: s });
         }
         if (t < 60 * 60) {
-            return _t("%(duration)sm", {duration: m});
+            return _t("%(duration)sm", { duration: m });
         }
         if (t < 24 * 60 * 60) {
-            return _t("%(duration)sh", {duration: h});
+            return _t("%(duration)sh", { duration: h });
         }
-        return _t("%(duration)sd", {duration: d});
+        return _t("%(duration)sd", { duration: d });
     }
 
-    getPrettyPresence(presence, activeAgo, currentlyActive) {
+    private getPrettyPresence(presence: string, activeAgo: number, currentlyActive: boolean): string {
         if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) {
             const duration = this.getDuration(activeAgo);
             if (presence === "online") return _t("Online for %(duration)s", { duration: duration });

From 0e51fcc761465447ea2983a48ff9a6ef659f77bd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 23 Jun 2021 21:12:25 +0100
Subject: [PATCH 189/358] Fix pinning event in a room which hasn't had events
 pinned in before

---
 src/components/views/context_menus/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 5a1da1376d..eef10c995a 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -179,7 +179,7 @@ export default class MessageContextMenu extends React.Component {
             pinnedIds.push(eventId);
             cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
                 event_ids: [
-                    ...room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids,
+                    ...(room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids || []),
                     eventId,
                 ],
             });

From 72099c1a08eba2425345c09c1eb2c3a68d952564 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 19:42:47 -0600
Subject: [PATCH 190/358] Update punctuation

---
 src/TextForEvent.ts         | 44 ++++++++++++++++++-------------------
 src/i18n/strings/en_EN.json | 42 +++++++++++++++++------------------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/TextForEvent.ts b/src/TextForEvent.ts
index 55a7813c6f..ebf1645303 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.ts
@@ -38,82 +38,82 @@ function textForMemberEvent(ev): () => string | null {
             const threePidContent = content.third_party_invite;
             if (threePidContent) {
                 if (threePidContent.display_name) {
-                    return () => _t('%(targetName)s accepted the invitation for %(displayName)s.', {
+                    return () => _t('%(targetName)s accepted the invitation for %(displayName)s', {
                         targetName,
                         displayName: threePidContent.display_name,
                     });
                 } else {
-                    return () => _t('%(targetName)s accepted an invitation.', { targetName });
+                    return () => _t('%(targetName)s accepted an invitation', { targetName });
                 }
             } else {
-                return () => _t('%(senderName)s invited %(targetName)s.', { senderName, targetName });
+                return () => _t('%(senderName)s invited %(targetName)s', { senderName, targetName });
             }
         }
         case 'ban':
             return () => reason
-                ? _t('%(senderName)s banned %(targetName)s. Reason: %(reason)s', { senderName, targetName, reason })
-                : _t('%(senderName)s banned %(targetName)s.', { senderName, targetName });
+                ? _t('%(senderName)s banned %(targetName)s: %(reason)s', { senderName, targetName, reason })
+                : _t('%(senderName)s banned %(targetName)s', { senderName, targetName });
         case 'join':
             if (prevContent && prevContent.membership === 'join') {
                 if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) {
-                    return () => _t('%(oldDisplayName)s changed their display name to %(displayName)s.', {
+                    return () => _t('%(oldDisplayName)s changed their display name to %(displayName)s', {
                         oldDisplayName: prevContent.displayname,
                         displayName: content.displayname,
                     });
                 } else if (!prevContent.displayname && content.displayname) {
-                    return () => _t('%(senderName)s set their display name to %(displayName)s.', {
+                    return () => _t('%(senderName)s set their display name to %(displayName)s', {
                         senderName: ev.getSender(),
                         displayName: content.displayname,
                     });
                 } else if (prevContent.displayname && !content.displayname) {
-                    return () => _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {
+                    return () => _t('%(senderName)s removed their display name (%(oldDisplayName)s)', {
                         senderName,
                         oldDisplayName: prevContent.displayname,
                     });
                 } else if (prevContent.avatar_url && !content.avatar_url) {
-                    return () => _t('%(senderName)s removed their profile picture.', { senderName });
+                    return () => _t('%(senderName)s removed their profile picture', { senderName });
                 } else if (prevContent.avatar_url && content.avatar_url &&
                     prevContent.avatar_url !== content.avatar_url) {
-                    return () => _t('%(senderName)s changed their profile picture.', { senderName });
+                    return () => _t('%(senderName)s changed their profile picture', { senderName });
                 } else if (!prevContent.avatar_url && content.avatar_url) {
-                    return () => _t('%(senderName)s set a profile picture.', { senderName });
+                    return () => _t('%(senderName)s set a profile picture', { senderName });
                 } else if (SettingsStore.getValue("showHiddenEventsInTimeline")) {
-                    // This is a null rejoin, it will only be visible if the Labs option is enabled
-                    return () => _t("%(senderName)s made no change.", { senderName });
+                    // This is a null rejoin, it will only be visible if using 'show hidden events' (labs)
+                    return () => _t("%(senderName)s made no change", { senderName });
                 } else {
                     return null;
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
-                return () => _t('%(targetName)s joined the room.', { targetName });
+                return () => _t('%(targetName)s joined the room', { targetName });
             }
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 if (prevContent.membership === "invite") {
-                    return () => _t('%(targetName)s rejected the invitation.', { targetName });
+                    return () => _t('%(targetName)s rejected the invitation', { targetName });
                 } else {
                     return () => reason
-                        ? _t('%(targetName)s left the room. Reason: %(reason)s', { targetName, reason })
-                        : _t('%(targetName)s left the room.', { targetName });
+                        ? _t('%(targetName)s left the room: %(reason)s', { targetName, reason })
+                        : _t('%(targetName)s left the room', { targetName });
                 }
             } else if (prevContent.membership === "ban") {
-                return () => _t('%(senderName)s unbanned %(targetName)s.', { senderName, targetName });
+                return () => _t('%(senderName)s unbanned %(targetName)s', { senderName, targetName });
             } else if (prevContent.membership === "invite") {
                 return () => reason
-                    ? _t('%(senderName)s withdrew %(targetName)s\'s invitation. Reason: %(reason)s', {
+                    ? _t('%(senderName)s withdrew %(targetName)s\'s invitation: %(reason)s', {
                         senderName,
                         targetName,
                         reason,
                     })
-                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation.', { senderName, targetName })
+                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation', { senderName, targetName })
             } else if (prevContent.membership === "join") {
                 return () => reason
-                    ? _t('%(senderName)s kicked %(targetName)s. Reason: %(reason)s', {
+                    ? _t('%(senderName)s kicked %(targetName)s: %(reason)s', {
                         senderName,
                         targetName,
                         reason,
                     })
-                    : _t('%(senderName)s kicked %(targetName)s.', { senderName, targetName });
+                    : _t('%(senderName)s kicked %(targetName)s', { senderName, targetName });
             } else {
                 return null;
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5bee2e2f2c..5aa0b56d52 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -489,27 +489,27 @@
     "Converts the room to a DM": "Converts the room to a DM",
     "Converts the DM to a room": "Converts the DM to a room",
     "Displays action": "Displays action",
-    "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
-    "%(targetName)s accepted an invitation.": "%(targetName)s accepted an invitation.",
-    "%(senderName)s invited %(targetName)s.": "%(senderName)s invited %(targetName)s.",
-    "%(senderName)s banned %(targetName)s. Reason: %(reason)s": "%(senderName)s banned %(targetName)s. Reason: %(reason)s",
-    "%(senderName)s banned %(targetName)s.": "%(senderName)s banned %(targetName)s.",
-    "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s changed their display name to %(displayName)s.",
-    "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s set their display name to %(displayName)s.",
-    "%(senderName)s removed their display name (%(oldDisplayName)s).": "%(senderName)s removed their display name (%(oldDisplayName)s).",
-    "%(senderName)s removed their profile picture.": "%(senderName)s removed their profile picture.",
-    "%(senderName)s changed their profile picture.": "%(senderName)s changed their profile picture.",
-    "%(senderName)s set a profile picture.": "%(senderName)s set a profile picture.",
-    "%(senderName)s made no change.": "%(senderName)s made no change.",
-    "%(targetName)s joined the room.": "%(targetName)s joined the room.",
-    "%(targetName)s rejected the invitation.": "%(targetName)s rejected the invitation.",
-    "%(targetName)s left the room. Reason: %(reason)s": "%(targetName)s left the room. Reason: %(reason)s",
-    "%(targetName)s left the room.": "%(targetName)s left the room.",
-    "%(senderName)s unbanned %(targetName)s.": "%(senderName)s unbanned %(targetName)s.",
-    "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s": "%(senderName)s withdrew %(targetName)s's invitation. Reason: %(reason)s",
-    "%(senderName)s withdrew %(targetName)s's invitation.": "%(senderName)s withdrew %(targetName)s's invitation.",
-    "%(senderName)s kicked %(targetName)s. Reason: %(reason)s": "%(senderName)s kicked %(targetName)s. Reason: %(reason)s",
-    "%(senderName)s kicked %(targetName)s.": "%(senderName)s kicked %(targetName)s.",
+    "%(targetName)s accepted the invitation for %(displayName)s": "%(targetName)s accepted the invitation for %(displayName)s",
+    "%(targetName)s accepted an invitation": "%(targetName)s accepted an invitation",
+    "%(senderName)s invited %(targetName)s": "%(senderName)s invited %(targetName)s",
+    "%(senderName)s banned %(targetName)s: %(reason)s": "%(senderName)s banned %(targetName)s: %(reason)s",
+    "%(senderName)s banned %(targetName)s": "%(senderName)s banned %(targetName)s",
+    "%(oldDisplayName)s changed their display name to %(displayName)s": "%(oldDisplayName)s changed their display name to %(displayName)s",
+    "%(senderName)s set their display name to %(displayName)s": "%(senderName)s set their display name to %(displayName)s",
+    "%(senderName)s removed their display name (%(oldDisplayName)s)": "%(senderName)s removed their display name (%(oldDisplayName)s)",
+    "%(senderName)s removed their profile picture": "%(senderName)s removed their profile picture",
+    "%(senderName)s changed their profile picture": "%(senderName)s changed their profile picture",
+    "%(senderName)s set a profile picture": "%(senderName)s set a profile picture",
+    "%(senderName)s made no change": "%(senderName)s made no change",
+    "%(targetName)s joined the room": "%(targetName)s joined the room",
+    "%(targetName)s rejected the invitation": "%(targetName)s rejected the invitation",
+    "%(targetName)s left the room: %(reason)s": "%(targetName)s left the room: %(reason)s",
+    "%(targetName)s left the room": "%(targetName)s left the room",
+    "%(senderName)s unbanned %(targetName)s": "%(senderName)s unbanned %(targetName)s",
+    "%(senderName)s withdrew %(targetName)s's invitation: %(reason)s": "%(senderName)s withdrew %(targetName)s's invitation: %(reason)s",
+    "%(senderName)s withdrew %(targetName)s's invitation": "%(senderName)s withdrew %(targetName)s's invitation",
+    "%(senderName)s kicked %(targetName)s: %(reason)s": "%(senderName)s kicked %(targetName)s: %(reason)s",
+    "%(senderName)s kicked %(targetName)s": "%(senderName)s kicked %(targetName)s",
     "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
     "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s removed the room name.",
     "%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.": "%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.",

From 76308de532680138de8c9fc1679c0090e8a4c843 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 19:34:25 -0600
Subject: [PATCH 191/358] Add optional mark function callback

---
 src/utils/MarkedExecution.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts
index b0b8fdf63d..01cc91adce 100644
--- a/src/utils/MarkedExecution.ts
+++ b/src/utils/MarkedExecution.ts
@@ -26,9 +26,11 @@ export class MarkedExecution {
 
     /**
      * Creates a MarkedExecution for the provided function.
-     * @param fn The function to be called upon trigger if marked.
+     * @param {Function} fn The function to be called upon trigger if marked.
+     * @param {Function} onMarkCallback A function that is called when a new mark is made. Not
+     * called if a mark is already flagged.
      */
-    constructor(private fn: () => void) {
+    constructor(private fn: () => void, private onMarkCallback?: () => void) {
     }
 
     /**
@@ -42,6 +44,7 @@ export class MarkedExecution {
      * Marks the function to be called upon trigger().
      */
     public mark() {
+        if (!this.marked) this.onMarkCallback?.();
         this.marked = true;
     }
 

From 47be728eb2fdb1291aa889c04579cd75eeef5c73 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 09:21:52 +0100
Subject: [PATCH 192/358] Fix invite dialog being cut off when it has limited
 results

---
 res/css/views/dialogs/_InviteDialog.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 2e48b5d8e9..7d9b4c0bc6 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -295,6 +295,7 @@ limitations under the License.
 
     .mx_InviteDialog_content {
         overflow: hidden;
+        height: 100%;
     }
 }
 

From ebe19168c26fb43c20738004836a3b858e203d72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 10:39:45 +0200
Subject: [PATCH 193/358] Add allowClose to payload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/dispatcher/payloads/SetRightPanelPhasePayload.ts | 5 +++++
 src/stores/RightPanelStore.ts                        | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
index a4dcb8cfe1..ea997e4ed1 100644
--- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
+++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
@@ -27,6 +27,11 @@ export interface SetRightPanelPhasePayload extends ActionPayload {
 
     phase: RightPanelPhases;
     refireParams?: SetRightPanelPhaseRefireParams;
+
+    /**
+     * By default SetRightPanelPhase can close the panel, this allows overriding that behaviour
+     */
+    allowClose?: boolean;
 }
 
 export interface SetRightPanelPhaseRefireParams {
diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts
index c539fcdb40..2bad0572b1 100644
--- a/src/stores/RightPanelStore.ts
+++ b/src/stores/RightPanelStore.ts
@@ -161,6 +161,7 @@ export default class RightPanelStore extends Store<ActionPayload> {
             case Action.SetRightPanelPhase: {
                 let targetPhase = payload.phase;
                 let refireParams = payload.refireParams;
+                const allowClose = payload.allowClose ?? true;
                 // redirect to EncryptionPanel if there is an ongoing verification request
                 if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) {
                     const {member} = payload.refireParams;
@@ -192,7 +193,7 @@ export default class RightPanelStore extends Store<ActionPayload> {
                         });
                     }
                 } else {
-                    if (targetPhase === this.state.lastRoomPhase && !refireParams) {
+                    if (targetPhase === this.state.lastRoomPhase && !refireParams && allowClose) {
                         this.setState({
                             showRoomPanel: !this.state.showRoomPanel,
                             previousPhase: null,

From 8d47ea63c2aeb2e31798d10dfd7d430da878fa8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 10:40:30 +0200
Subject: [PATCH 194/358] Make pinned message text clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/messages/_TextualEvent.scss |  5 ++++
 src/{TextForEvent.ts => TextForEvent.tsx} | 34 ++++++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)
 rename src/{TextForEvent.ts => TextForEvent.tsx} (96%)

diff --git a/res/css/views/messages/_TextualEvent.scss b/res/css/views/messages/_TextualEvent.scss
index be7565b3c5..e87fed90de 100644
--- a/res/css/views/messages/_TextualEvent.scss
+++ b/res/css/views/messages/_TextualEvent.scss
@@ -17,4 +17,9 @@ limitations under the License.
 .mx_TextualEvent {
     opacity: 0.5;
     overflow-y: hidden;
+
+    a {
+        color: $accent-color;
+        cursor: pointer;
+    }
 }
diff --git a/src/TextForEvent.ts b/src/TextForEvent.tsx
similarity index 96%
rename from src/TextForEvent.ts
rename to src/TextForEvent.tsx
index 649c53664e..ee9bd53250 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.tsx
@@ -13,6 +13,8 @@ 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 React from 'react';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
@@ -20,6 +22,10 @@ import {isValid3pidInvite} from "./RoomInvite";
 import SettingsStore from "./settings/SettingsStore";
 import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
 import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { RightPanelPhases } from './stores/RightPanelStorePhases';
+import { Action } from './dispatcher/actions';
+import defaultDispatcher from './dispatcher/dispatcher';
+import { SetRightPanelPhasePayload } from './dispatcher/payloads/SetRightPanelPhasePayload';
 
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
@@ -466,9 +472,29 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
-function textForPinnedEvent(event): () => string | null {
+function textForPinnedEvent(event): () => JSX.Element | null {
+    if (!SettingsStore.getValue("feature_pinning")) return null;
+
     const senderName = event.sender ? event.sender.name : event.getSender();
-    return () => _t("%(senderName)s changed the pinned messages for the room.", {senderName});
+    const onPinnedMessagesClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.PinnedMessages,
+            allowClose: false,
+        });
+    }
+
+    return () => (
+        <span>
+            {
+                _t(
+                    "%(senderName)s changed the <a>pinned messages</a> for the room.",
+                    { senderName },
+                    { "a": (sub) => <a onClick={onPinnedMessagesClick}> { sub } </a> },
+                )
+            }
+        </span>
+    );
 }
 
 function textForWidgetEvent(event): () => string | null {
@@ -594,7 +620,7 @@ function textForMjolnirEvent(event): () => string | null {
 }
 
 interface IHandlers {
-    [type: string]: (ev: any) => (() => string | null);
+    [type: string]: (ev: any) => (() => string | JSX.Element | null);
 }
 
 const handlers: IHandlers = {
@@ -635,7 +661,7 @@ export function hasText(ev): boolean {
     return Boolean(handler?.(ev));
 }
 
-export function textForEvent(ev): string {
+export function textForEvent(ev): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev)?.() || '';
 }

From 7eb36426926f3310de0ede9f65e7e6a0782205a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 10:40:35 +0200
Subject: [PATCH 195/358] i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7751c2eb32..c092c2b592 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -558,7 +558,7 @@
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s made future room history visible to unknown (%(visibility)s).",
     "%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s changed the power level of %(powerLevelDiffText)s.",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s",
-    "%(senderName)s changed the pinned messages for the room.": "%(senderName)s changed the pinned messages for the room.",
+    "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s changed the <a>pinned messages</a> for the room.",
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",

From 21caa6df12366848ad06ca5b2bdb1b39d6471b50 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 24 Jun 2021 09:58:11 +0100
Subject: [PATCH 196/358] move live recording logic down the component tree

---
 .../views/rooms/VoiceRecordComposerTile.tsx   |  4 +-
 .../voice_messages/LiveRecordingClock.tsx     | 53 ++++++++++++++++--
 .../voice_messages/LiveRecordingWaveform.tsx  | 54 +++++++++++++++++--
 src/utils/MarkedExecution.ts                  | 17 ++++--
 4 files changed, 115 insertions(+), 13 deletions(-)

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 78babc37eb..4f75b7b87e 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -227,8 +227,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         // only other UI is the recording-in-progress UI
         return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
-            <LiveRecordingClock seconds={this.state.seconds} />
-            <LiveRecordingWaveform relHeights={this.state.relHeights} />
+            <LiveRecordingClock recorder={this.state.recorder} />
+            <LiveRecordingWaveform recorder={this.state.recorder} />
         </div>;
     }
 
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
index f88bb63ac7..6786ae36f8 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -12,15 +12,62 @@ limitations under the License.
 */
 
 import React from "react";
-import Clock, { IProps as IClockProps } from "./Clock";
+import Clock from "./Clock";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+import {
+    IRecordingUpdate,
+    VoiceRecording,
+} from "../../../voice/VoiceRecording";
+
+interface IProps {
+    recorder?: VoiceRecording;
+}
+
+interface IState {
+    seconds: number;
+}
 
 /**
  * A clock for a live recording.
  */
 @replaceableComponent("views.voice_messages.LiveRecordingClock")
-export default class LiveRecordingClock extends React.PureComponent<IClockProps> {
+export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
+    private seconds = 0;
+    private rafId: number;
+
+    state = {
+        seconds: 0,
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            this.seconds = update.timeSeconds;
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => this.onLiveDataUpdate(),
+    )
+
+    private onLiveDataUpdate() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+
+        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
+    }
+
+    private updateClock() {
+        this.setState({
+            seconds: this.seconds,
+        })
+        this.rafId = null;
+    }
+
     public render() {
-        return <Clock seconds={this.props.seconds} />;
+        return <Clock seconds={this.state.seconds} />;
     }
 }
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index 3d3169d764..83449fddc8 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -12,18 +12,66 @@ limitations under the License.
 */
 
 import React from "react";
-import Waveform, { IProps as IWaveformProps } from "./Waveform";
+import Waveform from "./Waveform";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+import {
+    IRecordingUpdate,
+    VoiceRecording,
+} from "../../../voice/VoiceRecording";
+
+interface IProps {
+    recorder?: VoiceRecording;
+}
+
+interface IState {
+    waveform: number[]
+}
 
 /**
  * A waveform which shows the waveform of a live recording
  */
 @replaceableComponent("views.voice_messages.LiveRecordingWaveform")
-export default class LiveRecordingWaveform extends React.PureComponent<IWaveformProps> {
+export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,
     };
+
+    private waveform: number[] = [];
+    private rafId: number;
+
+    state = {
+        waveform: [],
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            this.waveform = update.waveform;
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateWaveform(),
+        () => this.onLiveDataUpdate(),
+    )
+
+    private onLiveDataUpdate() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+
+        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
+    }
+
+    private updateWaveform() {
+        this.setState({
+            waveform: this.waveform,
+        })
+        this.rafId = null;
+    }
+
     public render() {
-        return <Waveform relHeights={this.props.relHeights} />;
+        return <Waveform relHeights={this.state.waveform} />;
     }
 }
diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts
index 01cc91adce..0123d94f71 100644
--- a/src/utils/MarkedExecution.ts
+++ b/src/utils/MarkedExecution.ts
@@ -22,7 +22,7 @@ limitations under the License.
  * The function starts unmarked.
  */
 export class MarkedExecution {
-    private marked = false;
+    private _marked = false;
 
     /**
      * Creates a MarkedExecution for the provided function.
@@ -33,26 +33,33 @@ export class MarkedExecution {
     constructor(private fn: () => void, private onMarkCallback?: () => void) {
     }
 
+    /**
+     * Getter for the _marked property
+     */
+    public get marked() {
+        return this._marked;
+    }
+
     /**
      * Resets the mark without calling the function.
      */
     public reset() {
-        this.marked = false;
+        this._marked = false;
     }
 
     /**
      * Marks the function to be called upon trigger().
      */
     public mark() {
-        if (!this.marked) this.onMarkCallback?.();
-        this.marked = true;
+        if (!this._marked) this.onMarkCallback?.();
+        this._marked = true;
     }
 
     /**
      * If marked, the function will be called, otherwise this does nothing.
      */
     public trigger() {
-        if (!this.marked) return;
+        if (!this._marked) return;
         this.reset(); // reset first just in case the fn() causes a trigger()
         this.fn();
     }

From 09c22c37ffc51d00fa2c6fa6c41fb65324b94030 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 24 Jun 2021 10:01:44 +0100
Subject: [PATCH 197/358] Add comment to specify variable origin

---
 res/css/views/voice_messages/_PlaybackContainer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/voice_messages/_PlaybackContainer.scss
index 944378fb19..f0e29900ab 100644
--- a/res/css/views/voice_messages/_PlaybackContainer.scss
+++ b/res/css/views/voice_messages/_PlaybackContainer.scss
@@ -39,6 +39,7 @@ limitations under the License.
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
             height: 100%;
+            /* Variable set by a JS component */
             transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {

From 26d8c4d2e65a32382660b27ab2048ccd98a9bcaf Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 10:03:32 +0100
Subject: [PATCH 198/358] Improve design of the multi inviter error dialog

---
 res/css/views/dialogs/_InviteDialog.scss      | 39 +++++++++++
 src/RoomInvite.tsx                            | 67 +++++++++++++++++--
 src/components/views/dialogs/InviteDialog.tsx | 67 +++++++------------
 src/i18n/strings/en_EN.json                   |  3 +-
 4 files changed, 129 insertions(+), 47 deletions(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 175b1cc556..ff7c232ad5 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -317,3 +317,42 @@ limitations under the License.
 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
     padding: 0;
 }
+
+.mx_InviteDialog_multiInviterError {
+    > h4 {
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-fg-color;
+        font-weight: normal;
+    }
+
+    > div {
+        .mx_InviteDialog_multiInviterError_entry {
+            margin-bottom: 24px;
+
+            .mx_InviteDialog_multiInviterError_entry_userProfile {
+                .mx_InviteDialog_multiInviterError_entry_name {
+                    margin-left: 6px;
+                    font-size: $font-15px;
+                    line-height: $font-24px;
+                    font-weight: $font-semi-bold;
+                    color: $primary-fg-color;
+                }
+
+                .mx_InviteDialog_multiInviterError_entry_userId {
+                    margin-left: 6px;
+                    font-size: $font-12px;
+                    line-height: $font-15px;
+                    color: $tertiary-fg-color;
+                }
+            }
+
+            .mx_InviteDialog_multiInviterError_entry_error {
+                margin-left: 32px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $notice-primary-color;
+            }
+        }
+    }
+}
diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index 16141a87e8..e04cd03254 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { User } from "matrix-js-sdk/src/models/user";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import MultiInviter, { CompletionStates } from './utils/MultiInviter';
@@ -26,6 +27,8 @@ import { _t } from './languageHandler';
 import InviteDialog, { KIND_DM, KIND_INVITE } from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
 import { CommunityPrototypeStore } from "./stores/CommunityPrototypeStore";
+import BaseAvatar from "./components/views/avatars/BaseAvatar";
+import { mediaFromMxc } from "./customisations/Media";
 
 export interface IInviteResult {
     states: CompletionStates;
@@ -116,7 +119,12 @@ export function inviteUsersToRoom(roomId: string, userIds: string[]): Promise<vo
     });
 }
 
-export function showAnyInviteErrors(states: CompletionStates, room: Room, inviter: MultiInviter): boolean {
+export function showAnyInviteErrors(
+    states: CompletionStates,
+    room: Room,
+    inviter: MultiInviter,
+    userMap?: Map<string, Member>,
+): boolean {
     // Show user any errors
     const failedUsers = Object.keys(states).filter(a => states[a] === 'error');
     if (failedUsers.length === 1 && inviter.fatal) {
@@ -138,13 +146,41 @@ export function showAnyInviteErrors(states: CompletionStates, room: Room, invite
             }
         }
 
+        const cli = MatrixClientPeg.get();
         if (errorList.length > 0) {
             // React 16 doesn't let us use `errorList.join(<br />)` anymore, so this is our solution
-            const description = <div>{errorList.map(e => <div key={e}>{e}</div>)}</div>;
+            const description = <div className="mx_InviteDialog_multiInviterError">
+                <h4>{ _t("We sent the others, but the below people couldn't be invited to <RoomName/>", {}, {
+                    RoomName: () => <b>{ room.name }</b>,
+                }) }</h4>
+                <div>
+                    { failedUsers.map(addr => {
+                        const user = userMap?.get(addr) || cli.getUser(addr);
+                        const name = (user as Member).name || (user as User).rawDisplayName;
+                        const avatarUrl = (user as Member).getMxcAvatarUrl?.() || (user as User).avatarUrl;
+                        return <div key={addr} className="mx_InviteDialog_multiInviterError_entry">
+                            <div className="mx_InviteDialog_multiInviterError_entry_userProfile">
+                                <BaseAvatar
+                                    url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null}
+                                    name={name}
+                                    idName={user.userId}
+                                    width={24}
+                                    height={24}
+                                />
+                                <span className="mx_InviteDialog_multiInviterError_entry_name">{ name }</span>
+                                <span className="mx_InviteDialog_multiInviterError_entry_userId">{ user.userId }</span>
+                            </div>
+                            <div className="mx_InviteDialog_multiInviterError_entry_error">
+                                { inviter.getErrorText(addr) }
+                            </div>
+                        </div>;
+                    }) }
+                </div>
+            </div>;
 
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to invite the following users to the room', '', ErrorDialog, {
-                title: _t("Failed to invite the following users to the %(roomName)s room:", {roomName: room.name}),
+            Modal.createTrackedDialog("Some invites could not be sent", "", ErrorDialog, {
+                title: _t("Some invites couldn't be sent"),
                 description,
             });
             return false;
@@ -153,3 +189,26 @@ export function showAnyInviteErrors(states: CompletionStates, room: Room, invite
 
     return true;
 }
+
+// This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
+// It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
+// for 3PIDs/email addresses.
+export abstract class Member {
+    /**
+     * The display name of this Member. For users this should be their profile's display
+     * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
+     */
+    public abstract get name(): string;
+
+    /**
+     * The ID of this Member. For users this should be their user ID. For 3PIDs this should
+     * be the 3PID address (email).
+     */
+    public abstract get userId(): string;
+
+    /**
+     * Gets the MXC URL of this Member's avatar. For users this should be their profile's
+     * avatar MXC URL or null if none set. For 3PIDs this should always be null.
+     */
+    public abstract getMxcAvatarUrl(): string;
+}
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index b24ed6e4ef..17b4a6dc47 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -17,42 +17,46 @@ limitations under the License.
 import React, { createRef } from 'react';
 import classNames from 'classnames';
 
-import {_t, _td} from "../../../languageHandler";
+import { _t, _td } from "../../../languageHandler";
 import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { makeRoomPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import SdkConfig from "../../../SdkConfig";
 import * as Email from "../../../email";
-import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
-import {abbreviateUrl} from "../../../utils/UrlUtils";
+import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from "../../../utils/IdentityServerUtils";
+import { abbreviateUrl } from "../../../utils/UrlUtils";
 import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
-import {humanizeTime} from "../../../utils/humanize";
+import { humanizeTime } from "../../../utils/humanize";
 import createRoom, {
-    canEncryptToAllUsers, ensureDMExists, findDMForUser, privateShouldBeEncrypted,
+    canEncryptToAllUsers,
+    ensureDMExists,
+    findDMForUser,
+    privateShouldBeEncrypted,
 } from "../../../createRoom";
 import {
     IInviteResult,
     inviteMultipleToRoom,
+    Member,
     showAnyInviteErrors,
     showCommunityInviteDialog,
 } from "../../../RoomInvite";
-import {Key} from "../../../Keyboard";
-import {Action} from "../../../dispatcher/actions";
-import {DefaultTagID} from "../../../stores/room-list/models";
+import { Key } from "../../../Keyboard";
+import { Action } from "../../../dispatcher/actions";
+import { DefaultTagID } from "../../../stores/room-list/models";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {getAddressType} from "../../../UserAddress";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { getAddressType } from "../../../UserAddress";
 import BaseAvatar from '../avatars/BaseAvatar';
 import AccessibleButton from '../elements/AccessibleButton';
 import { compare } from '../../../utils/strings';
@@ -79,35 +83,13 @@ export const KIND_CALL_TRANSFER = "call_transfer";
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
-// This is the interface that is expected by various components in this file. It is a bit
-// awkward because it also matches the RoomMember class from the js-sdk with some extra support
-// for 3PIDs/email addresses.
-abstract class Member {
-    /**
-     * The display name of this Member. For users this should be their profile's display
-     * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
-     */
-    public abstract get name(): string;
-
-    /**
-     * The ID of this Member. For users this should be their user ID. For 3PIDs this should
-     * be the 3PID address (email).
-     */
-    public abstract get userId(): string;
-
-    /**
-     * Gets the MXC URL of this Member's avatar. For users this should be their profile's
-     * avatar MXC URL or null if none set. For 3PIDs this should always be null.
-     */
-    public abstract getMxcAvatarUrl(): string;
-}
-
 class DirectoryMember extends Member {
     private readonly _userId: string;
     private readonly displayName: string;
     private readonly avatarUrl: string;
 
-    constructor(userDirResult: {user_id: string, display_name: string, avatar_url: string}) {
+    // eslint-disable-next-line camelcase
+    constructor(userDirResult: { user_id: string, display_name: string, avatar_url: string }) {
         super();
         this._userId = userDirResult.user_id;
         this.displayName = userDirResult.display_name;
@@ -608,7 +590,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
         this.setState({ busy: false });
-        return !showAnyInviteErrors(result.states, room, result.inviter);
+        const userMap = new Map<string, Member>(this.state.targets.map(member => [member.userId, member]));
+        return !showAnyInviteErrors(result.states, room, result.inviter, userMap);
     }
 
     private convertFilter(): Member[] {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 429ffbedef..586031f27a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -396,7 +396,8 @@
     "Failed to invite": "Failed to invite",
     "Operation failed": "Operation failed",
     "Failed to invite users to the room:": "Failed to invite users to the room:",
-    "Failed to invite the following users to the %(roomName)s room:": "Failed to invite the following users to the %(roomName)s room:",
+    "We sent the others, but the below people couldn't be invited to <RoomName/>": "We sent the others, but the below people couldn't be invited to <RoomName/>",
+    "Some invites couldn't be sent": "Some invites couldn't be sent",
     "You need to be logged in.": "You need to be logged in.",
     "You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
     "Unable to create widget.": "Unable to create widget.",

From 01aadb460df9d31df7353b49a9301794b37c0388 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 11:12:32 +0100
Subject: [PATCH 199/358] Fix cyclic imports

---
 src/RoomInvite.tsx                            | 25 +------------------
 src/components/views/dialogs/InviteDialog.tsx | 24 +++++++++++++++++-
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index e04cd03254..c86f832b90 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -24,7 +24,7 @@ import MultiInviter, { CompletionStates } from './utils/MultiInviter';
 import Modal from './Modal';
 import * as sdk from './';
 import { _t } from './languageHandler';
-import InviteDialog, { KIND_DM, KIND_INVITE } from "./components/views/dialogs/InviteDialog";
+import InviteDialog, { KIND_DM, KIND_INVITE, Member } from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
 import { CommunityPrototypeStore } from "./stores/CommunityPrototypeStore";
 import BaseAvatar from "./components/views/avatars/BaseAvatar";
@@ -189,26 +189,3 @@ export function showAnyInviteErrors(
 
     return true;
 }
-
-// This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
-// It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
-// for 3PIDs/email addresses.
-export abstract class Member {
-    /**
-     * The display name of this Member. For users this should be their profile's display
-     * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
-     */
-    public abstract get name(): string;
-
-    /**
-     * The ID of this Member. For users this should be their user ID. For 3PIDs this should
-     * be the 3PID address (email).
-     */
-    public abstract get userId(): string;
-
-    /**
-     * Gets the MXC URL of this Member's avatar. For users this should be their profile's
-     * avatar MXC URL or null if none set. For 3PIDs this should always be null.
-     */
-    public abstract getMxcAvatarUrl(): string;
-}
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 17b4a6dc47..553c1c544e 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -40,7 +40,6 @@ import createRoom, {
 import {
     IInviteResult,
     inviteMultipleToRoom,
-    Member,
     showAnyInviteErrors,
     showCommunityInviteDialog,
 } from "../../../RoomInvite";
@@ -83,6 +82,29 @@ export const KIND_CALL_TRANSFER = "call_transfer";
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
 const INCREMENT_ROOMS_SHOWN = 5; // Number of rooms to add when 'show more' is clicked
 
+// This is the interface that is expected by various components in the Invite Dialog and RoomInvite.
+// It is a bit awkward because it also matches the RoomMember class from the js-sdk with some extra support
+// for 3PIDs/email addresses.
+export abstract class Member {
+    /**
+     * The display name of this Member. For users this should be their profile's display
+     * name or user ID if none set. For 3PIDs this should be the 3PID address (email).
+     */
+    public abstract get name(): string;
+
+    /**
+     * The ID of this Member. For users this should be their user ID. For 3PIDs this should
+     * be the 3PID address (email).
+     */
+    public abstract get userId(): string;
+
+    /**
+     * Gets the MXC URL of this Member's avatar. For users this should be their profile's
+     * avatar MXC URL or null if none set. For 3PIDs this should always be null.
+     */
+    public abstract getMxcAvatarUrl(): string;
+}
+
 class DirectoryMember extends Member {
     private readonly _userId: string;
     private readonly displayName: string;

From 4993fc3e7a2a2de5522f10ae5fdbd27432a40df5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 11:16:13 +0100
Subject: [PATCH 200/358] Fix edit history modal

defining enums in ts module declarations sadly isn't magic
---
 src/@types/diff-dom.ts         | 14 +-------------
 src/utils/MessageDiffUtils.tsx | 18 +++++++++---------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/@types/diff-dom.ts b/src/@types/diff-dom.ts
index 884ee6126d..38ff6432cf 100644
--- a/src/@types/diff-dom.ts
+++ b/src/@types/diff-dom.ts
@@ -15,20 +15,8 @@ limitations under the License.
 */
 
 declare module "diff-dom" {
-    enum Action {
-        AddElement = "addElement",
-        AddTextElement = "addTextElement",
-        RemoveTextElement = "removeTextElement",
-        RemoveElement = "removeElement",
-        ReplaceElement = "replaceElement",
-        ModifyTextElement = "modifyTextElement",
-        AddAttribute = "addAttribute",
-        RemoveAttribute = "removeAttribute",
-        ModifyAttribute = "modifyAttribute",
-    }
-
     export interface IDiff {
-        action: Action;
+        action: string;
         name: string;
         text?: string;
         route: number[];
diff --git a/src/utils/MessageDiffUtils.tsx b/src/utils/MessageDiffUtils.tsx
index b5d5e31432..f3dc1320dc 100644
--- a/src/utils/MessageDiffUtils.tsx
+++ b/src/utils/MessageDiffUtils.tsx
@@ -149,7 +149,7 @@ function stringAsTextNode(string: string): Text {
 function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatch: DiffMatchPatch): void {
     const {refNode, refParentNode} = findRefNodes(originalRootNode, diff.route);
     switch (diff.action) {
-        case Action.ReplaceElement: {
+        case "replaceElement": {
             const container = document.createElement("span");
             const delNode = wrapDeletion(diffTreeToDOM(diff.oldValue));
             const insNode = wrapInsertion(diffTreeToDOM(diff.newValue));
@@ -158,17 +158,17 @@ function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatc
             refNode.parentNode.replaceChild(container, refNode);
             break;
         }
-        case Action.RemoveTextElement: {
+        case "removeTextElement": {
             const delNode = wrapDeletion(stringAsTextNode(diff.value));
             refNode.parentNode.replaceChild(delNode, refNode);
             break;
         }
-        case Action.RemoveElement: {
+        case "removeElement": {
             const delNode = wrapDeletion(diffTreeToDOM(diff.element));
             refNode.parentNode.replaceChild(delNode, refNode);
             break;
         }
-        case Action.ModifyTextElement: {
+        case "modifyTextElement": {
             const textDiffs = diffMathPatch.diff_main(diff.oldValue, diff.newValue);
             diffMathPatch.diff_cleanupSemantic(textDiffs);
             const container = document.createElement("span");
@@ -184,12 +184,12 @@ function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatc
             refNode.parentNode.replaceChild(container, refNode);
             break;
         }
-        case Action.AddElement: {
+        case "addElement": {
             const insNode = wrapInsertion(diffTreeToDOM(diff.element));
             insertBefore(refParentNode, refNode, insNode);
             break;
         }
-        case Action.AddTextElement: {
+        case "addTextElement": {
             // XXX: sometimes diffDOM says insert a newline when there shouldn't be one
             // but we must insert the node anyway so that we don't break the route child IDs.
             // See https://github.com/fiduswriter/diffDOM/issues/100
@@ -199,9 +199,9 @@ function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatc
         }
         // e.g. when changing a the href of a link,
         // show the link with old href as removed and with the new href as added
-        case Action.RemoveAttribute:
-        case Action.AddAttribute:
-        case Action.ModifyAttribute: {
+        case "removeAttribute":
+        case "addAttribute":
+        case "modifyAttribute": {
             const delNode = wrapDeletion(refNode.cloneNode(true));
             const updatedNode = refNode.cloneNode(true) as HTMLElement;
             if (diff.action === "addAttribute" || diff.action === "modifyAttribute") {

From a8b2c6d36b490b2a0453954dde8b5f37f8b7e10d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 12:24:42 +0200
Subject: [PATCH 201/358] Type event
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/TextForEvent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index ee9bd53250..b7e9deda8d 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -26,6 +26,7 @@ import { RightPanelPhases } from './stores/RightPanelStorePhases';
 import { Action } from './dispatcher/actions';
 import defaultDispatcher from './dispatcher/dispatcher';
 import { SetRightPanelPhasePayload } from './dispatcher/payloads/SetRightPanelPhasePayload';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
@@ -472,7 +473,7 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
-function textForPinnedEvent(event): () => JSX.Element | null {
+function textForPinnedEvent(event: MatrixEvent): () => JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;
 
     const senderName = event.sender ? event.sender.name : event.getSender();

From 6d3e7730ef50bfcf7d3156072078ca26094488e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 11:40:49 +0100
Subject: [PATCH 202/358] Fix two PRs duplicating the css attribute

---
 res/css/views/dialogs/_InviteDialog.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 8092f0f613..c01b43c1c4 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -294,7 +294,6 @@ limitations under the License.
     flex-direction: column;
 
     .mx_InviteDialog_content {
-        height: 100%;
         overflow: hidden;
         height: 100%;
     }

From 6333d4aa364717715df59823093dd74e10df9d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:02:06 +0200
Subject: [PATCH 203/358] Iterate PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/TextForEvent.tsx                          | 53 +++++++++++--------
 src/components/views/messages/TextualEvent.js |  2 +-
 src/i18n/strings/en_EN.json                   |  1 +
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index b7e9deda8d..50bdae8ca9 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -473,29 +473,36 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
-function textForPinnedEvent(event: MatrixEvent): () => JSX.Element | null {
+function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;
-
     const senderName = event.sender ? event.sender.name : event.getSender();
-    const onPinnedMessagesClick = () => {
-        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-            action: Action.SetRightPanelPhase,
-            phase: RightPanelPhases.PinnedMessages,
-            allowClose: false,
-        });
-    }
 
-    return () => (
-        <span>
-            {
-                _t(
-                    "%(senderName)s changed the <a>pinned messages</a> for the room.",
-                    { senderName },
-                    { "a": (sub) => <a onClick={onPinnedMessagesClick}> { sub } </a> },
-                )
-            }
-        </span>
-    );
+    if (allowJSX) {
+        const onPinnedMessagesClick = () => {
+            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                action: Action.SetRightPanelPhase,
+                phase: RightPanelPhases.PinnedMessages,
+                allowClose: false,
+            });
+        }
+
+        return () => (
+            <span>
+                {
+                    _t(
+                        "%(senderName)s changed the <a>pinned messages</a> for the room.",
+                        { senderName },
+                        { "a": (sub) => <a onClick={onPinnedMessagesClick}> { sub } </a> },
+                    )
+                }
+            </span>
+        );
+    } else {
+        return () => _t(
+            "%(senderName)s changed the pinned messages for the room.",
+            { senderName },
+        );
+    }
 }
 
 function textForWidgetEvent(event): () => string | null {
@@ -621,7 +628,7 @@ function textForMjolnirEvent(event): () => string | null {
 }
 
 interface IHandlers {
-    [type: string]: (ev: any) => (() => string | JSX.Element | null);
+    [type: string]: (ev: MatrixEvent, allowJSX?: boolean) => (() => string | JSX.Element | null);
 }
 
 const handlers: IHandlers = {
@@ -662,7 +669,7 @@ export function hasText(ev): boolean {
     return Boolean(handler?.(ev));
 }
 
-export function textForEvent(ev): string | JSX.Element {
+export function textForEvent(ev: MatrixEvent, allowJSX = false): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-    return handler?.(ev)?.() || '';
+    return handler?.(ev, allowJSX)?.() || '';
 }
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index a020cc6c52..25da18da0d 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -28,7 +28,7 @@ export default class TextualEvent extends React.Component {
     };
 
     render() {
-        const text = TextForEvent.textForEvent(this.props.mxEvent);
+        const text = TextForEvent.textForEvent(this.props.mxEvent, true);
         if (text == null || text.length === 0) return null;
         return (
             <div className="mx_TextualEvent">{ text }</div>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c092c2b592..73bf948778 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -559,6 +559,7 @@
     "%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s changed the power level of %(powerLevelDiffText)s.",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s",
     "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s changed the <a>pinned messages</a> for the room.",
+    "%(senderName)s changed the pinned messages for the room.": "%(senderName)s changed the pinned messages for the room.",
     "%(widgetName)s widget modified by %(senderName)s": "%(widgetName)s widget modified by %(senderName)s",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s widget added by %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s",

From a774aed365f66f3104f5ee15d43c7daf4bf7d95c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:07:43 +0200
Subject: [PATCH 204/358] Iterate PR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/MemberList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 5353eb94ed..2d929725b8 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -91,7 +91,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         const hsUrl = MatrixClientPeg.get().baseUrl;
         this.showPresence = true;
         if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) {
-            this.showPresence = enablePresenceByHsUrl[hsUrl];
+            this.showPresence = enablePresenceByHsUrl?.[hsUrl] ?? true;
         }
     }
 

From 0542c69b66686b3c28eba20861a013230b579dbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:13:27 +0200
Subject: [PATCH 205/358] Fix types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/Notifier.ts      | 2 +-
 src/TextForEvent.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Notifier.ts b/src/Notifier.ts
index 4f55046e72..2afc7d9901 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -68,7 +68,7 @@ export const Notifier = {
     // or not
     pendingEncryptedEventIds: [],
 
-    notificationMessageForEvent: function(ev: MatrixEvent) {
+    notificationMessageForEvent: function(ev: MatrixEvent): string {
         if (typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
             return typehandlers[ev.getContent().msgtype](ev);
         }
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 50bdae8ca9..4c2c264439 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -669,6 +669,7 @@ export function hasText(ev): boolean {
     return Boolean(handler?.(ev));
 }
 
+export function textForEvent(ev: MatrixEvent): string
 export function textForEvent(ev: MatrixEvent, allowJSX = false): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev, allowJSX)?.() || '';

From d2d8cb3c24bb682c27bd3c3eebcbf4ffac11f8bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:15:44 +0200
Subject: [PATCH 206/358] Think about what you copy-paste, Simon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/MemberList.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 2d929725b8..5ebe5bea59 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -89,10 +89,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         cli.on("Room", this.onRoom); // invites & joining after peek
         const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
         const hsUrl = MatrixClientPeg.get().baseUrl;
-        this.showPresence = true;
-        if (enablePresenceByHsUrl && enablePresenceByHsUrl[hsUrl] !== undefined) {
-            this.showPresence = enablePresenceByHsUrl?.[hsUrl] ?? true;
-        }
+        this.showPresence = enablePresenceByHsUrl?.[hsUrl] ?? true;
     }
 
     // eslint-disable-next-line camelcase

From cc1ff2ce1c96c45ab3f6fa9f9f06985d247724f2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 13:28:16 +0100
Subject: [PATCH 207/358] Remove unused import

---
 src/utils/MessageDiffUtils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/MessageDiffUtils.tsx b/src/utils/MessageDiffUtils.tsx
index f3dc1320dc..5ee9970ec2 100644
--- a/src/utils/MessageDiffUtils.tsx
+++ b/src/utils/MessageDiffUtils.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch';
-import { Action, DiffDOM, IDiff } from "diff-dom";
+import { DiffDOM, IDiff } from "diff-dom";
 import { IContent } from "matrix-js-sdk/src/models/event";
 
 import { bodyToHtml, checkBlockNode, IOptsReturnString } from "../HtmlUtils";

From 298e505381e96e30535bd1ce28b66b1e523be094 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:29:24 +0200
Subject: [PATCH 208/358] Iterate EntityTile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/EntityTile.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index 53c5900fbf..106449b391 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React from 'react';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _td } from '../../../languageHandler';
 import classNames from "classnames";
@@ -25,7 +25,12 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseAvatar from '../avatars/BaseAvatar';
 import PresenceLabel from "./PresenceLabel";
 
-const PowerLabel: Record<string, string> = {
+enum PowerStatus {
+    Admin = "admin",
+    Moderator = "moderator",
+}
+
+const PowerLabel: Record<PowerStatus, string> = {
     "admin": _td("Admin"),
     "moderator": _td("Mod"),
 }
@@ -36,7 +41,7 @@ const PRESENCE_CLASS = {
     "unavailable": "mx_EntityTile_unavailable",
 };
 
-function presenceClassForMember(presenceState: string, lastActiveAgo: number, showPresence: boolean) {
+function presenceClassForMember(presenceState: string, lastActiveAgo: number, showPresence: boolean): string {
     if (showPresence === false) {
         return 'mx_EntityTile_online_beenactive';
     }
@@ -66,13 +71,12 @@ interface IProps {
     presenceLastTs?: number,
     presenceCurrentlyActive?: boolean,
     showInviteButton?: boolean,
-    shouldComponentUpdate?(nextProps: IProps, nextState: IState): boolean,
     onClick?(): void,
     suppressOnHover?: boolean,
     showPresence?: boolean,
     subtextLabel?: string,
     e2eStatus?: string,
-    powerStatus?: string,
+    powerStatus?: PowerStatus,
 }
 
 interface IState {
@@ -82,7 +86,6 @@ interface IState {
 @replaceableComponent("views.rooms.EntityTile")
 export default class EntityTile extends React.Component<IProps, IState> {
     static defaultProps = {
-        shouldComponentUpdate: (nextProps: IProps, nextState: IState) => { return true; },
         onClick: () => {},
         presenceState: "offline",
         presenceLastActiveAgo: 0,
@@ -91,7 +94,6 @@ export default class EntityTile extends React.Component<IProps, IState> {
         suppressOnHover: false,
         showPresence: true,
     };
-    private container = createRef<HTMLDivElement>();
 
     constructor(props: IProps) {
         super(props);
@@ -103,7 +105,6 @@ export default class EntityTile extends React.Component<IProps, IState> {
 
     shouldComponentUpdate(nextProps: IProps, nextState: IState) {
         if (this.state.hover !== nextState.hover) return true;
-        return this.props.shouldComponentUpdate(nextProps, nextState);
     }
 
     render() {
@@ -184,7 +185,7 @@ export default class EntityTile extends React.Component<IProps, IState> {
 
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
-            <div ref={this.container} >
+            <div>
                 <AccessibleButton
                     className={classNames(mainClassNames)}
                     title={this.props.title}

From e436e28f01dcbc4bdc7290d99f0394b7a64e5eb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:31:04 +0200
Subject: [PATCH 209/358] Make TS happy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/TextForEvent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 4c2c264439..10c787bcb6 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -669,7 +669,8 @@ export function hasText(ev): boolean {
     return Boolean(handler?.(ev));
 }
 
-export function textForEvent(ev: MatrixEvent): string
+export function textForEvent(ev: MatrixEvent): string;
+export function textForEvent(ev: MatrixEvent, allowJSX: true): string | JSX.Element;
 export function textForEvent(ev: MatrixEvent, allowJSX = false): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev, allowJSX)?.() || '';

From 1b64cd0c88bb1092f11e680460c4f983c9d7d0b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:36:22 +0200
Subject: [PATCH 210/358] Iterate PresenceLabel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/PresenceLabel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/PresenceLabel.tsx b/src/components/views/rooms/PresenceLabel.tsx
index 513fecfd43..abedb394b5 100644
--- a/src/components/views/rooms/PresenceLabel.tsx
+++ b/src/components/views/rooms/PresenceLabel.tsx
@@ -17,17 +17,17 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // number of milliseconds ago this user was last active.
     // zero = unknown
-    activeAgo?: number,
+    activeAgo?: number;
     // if true, activeAgo is an approximation and "Now" should
     // be shown instead
-    currentlyActive?: boolean,
+    currentlyActive?: boolean;
     // offline, online, etc
-    presenceState?: string,
+    presenceState?: string;
 }
 
 @replaceableComponent("views.rooms.PresenceLabel")

From 5b21cff24098b62fa45e7c46964ec8841d02a3fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:38:21 +0200
Subject: [PATCH 211/358] Iterate MemberTile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/MemberTile.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index e0ee0e5daf..390cbdbf9f 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -29,14 +29,14 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto";
 
 interface IProps {
-    member: RoomMember,
-    showPresence?: boolean,
+    member: RoomMember;
+    showPresence?: boolean;
 }
 
 interface IState {
-    statusMessage: string,
-    isRoomEncrypted: boolean,
-    e2eStatus: string,
+    statusMessage: string;
+    isRoomEncrypted: boolean;
+    e2eStatus: string;
 }
 
 @replaceableComponent("views.rooms.MemberTile")

From 8fb788ae5679c44b46d70cf9887be01fe50f07ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 14:39:51 +0200
Subject: [PATCH 212/358] Iterate EntityTile once more
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/EntityTile.tsx | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index 106449b391..de37d6caf0 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -62,21 +62,21 @@ function presenceClassForMember(presenceState: string, lastActiveAgo: number, sh
 }
 
 interface IProps {
-    name?: string,
-    title?: string,
-    avatarJsx?: JSX.Element, // <BaseAvatar />
-    className?: string,
-    presenceState?: string,
-    presenceLastActiveAgo?: number,
-    presenceLastTs?: number,
-    presenceCurrentlyActive?: boolean,
-    showInviteButton?: boolean,
-    onClick?(): void,
-    suppressOnHover?: boolean,
-    showPresence?: boolean,
-    subtextLabel?: string,
-    e2eStatus?: string,
-    powerStatus?: PowerStatus,
+    name?: string;
+    title?: string;
+    avatarJsx?: JSX.Element; // <BaseAvatar />
+    className?: string;
+    presenceState?: string;
+    presenceLastActiveAgo?: number;
+    presenceLastTs?: number;
+    presenceCurrentlyActive?: boolean;
+    showInviteButton?: boolean;
+    onClick?(): void;
+    suppressOnHover?: boolean;
+    showPresence?: boolean;
+    subtextLabel?: string;
+    e2eStatus?: string;
+    powerStatus?: PowerStatus;
 }
 
 interface IState {

From f08b92309f95f018fcc7cd972a3ca16577df5196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 16:35:33 +0200
Subject: [PATCH 213/358] Iterate EntityTile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/EntityTile.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index de37d6caf0..fedb0b2964 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -31,8 +31,8 @@ enum PowerStatus {
 }
 
 const PowerLabel: Record<PowerStatus, string> = {
-    "admin": _td("Admin"),
-    "moderator": _td("Mod"),
+    [PowerStatus.Admin]: _td("Admin"),
+    [PowerStatus.Moderator]: _td("Mod"),
 }
 
 const PRESENCE_CLASS = {
@@ -84,7 +84,7 @@ interface IState {
 }
 
 @replaceableComponent("views.rooms.EntityTile")
-export default class EntityTile extends React.Component<IProps, IState> {
+export default class EntityTile extends React.PureComponent<IProps, IState> {
     static defaultProps = {
         onClick: () => {},
         presenceState: "offline",
@@ -103,10 +103,6 @@ export default class EntityTile extends React.Component<IProps, IState> {
         };
     }
 
-    shouldComponentUpdate(nextProps: IProps, nextState: IState) {
-        if (this.state.hover !== nextState.hover) return true;
-    }
-
     render() {
         const mainClassNames = {
             "mx_EntityTile": true,

From c0a1127cb70a0bac98e13126927dd6d5f8450758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 16:43:11 +0200
Subject: [PATCH 214/358] Fix PowerStatus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/EntityTile.tsx | 2 +-
 src/components/views/rooms/MemberTile.tsx | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index fedb0b2964..2032856500 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -25,7 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseAvatar from '../avatars/BaseAvatar';
 import PresenceLabel from "./PresenceLabel";
 
-enum PowerStatus {
+export enum PowerStatus {
     Admin = "admin",
     Moderator = "moderator",
 }
diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index 390cbdbf9f..c6077fb47f 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -27,6 +27,8 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto";
+import EntityTile, { PowerStatus } from "./EntityTile";
+import MemberAvatar from "./../avatars/MemberAvatar";
 
 interface IProps {
     member: RoomMember;
@@ -212,9 +214,6 @@ export default class MemberTile extends React.Component<IProps, IState> {
     }
 
     render() {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        const EntityTile = sdk.getComponent('rooms.EntityTile');
-
         const member = this.props.member;
         const name = this.getDisplayName();
         const presenceState = member.user ? member.user.presence : null;
@@ -234,8 +233,8 @@ export default class MemberTile extends React.Component<IProps, IState> {
         this.memberLastModifiedTime = member.getLastModifiedTime();
 
         const powerStatusMap = new Map([
-            [100, EntityTile.POWER_STATUS_ADMIN],
-            [50, EntityTile.POWER_STATUS_MODERATOR],
+            [100, PowerStatus.Admin],
+            [50, PowerStatus.Moderator],
         ]);
 
         // Find the nearest power level with a badge

From b065f6d1a4b591fce8da33183810598825b088f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 16:48:36 +0200
Subject: [PATCH 215/358] Remove sdk...
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/MemberTile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index c6077fb47f..a97ce6995b 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 
 import SettingsStore from "../../../settings/SettingsStore";
 import React from 'react';
-import * as sdk from "../../../index";
 import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";

From dc2f71bee67b3e65f73b335e4d1d5cb0d15a1534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 16:55:44 +0200
Subject: [PATCH 216/358] Even more fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/MemberTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index a97ce6995b..2f9927a756 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -25,7 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { DeviceInfo } from "matrix-js-sdk/src/crypto";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import EntityTile, { PowerStatus } from "./EntityTile";
 import MemberAvatar from "./../avatars/MemberAvatar";
 
@@ -194,7 +194,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
         return false;
     }
 
-    private onClick = (e: MouseEvent): void => {
+    private onClick = (): void => {
         dis.dispatch({
             action: Action.ViewUser,
             member: this.props.member,

From cc1f68296e84885a18a48828bbe7fc277744c53e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 16:58:56 +0200
Subject: [PATCH 217/358] Iterate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/TextForEvent.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 10c787bcb6..4721e13cec 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -473,19 +473,19 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
+const onPinnedMessagesClick = (): void => {
+    defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+        action: Action.SetRightPanelPhase,
+        phase: RightPanelPhases.PinnedMessages,
+        allowClose: false,
+    });
+}
+
 function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;
     const senderName = event.sender ? event.sender.name : event.getSender();
 
     if (allowJSX) {
-        const onPinnedMessagesClick = () => {
-            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
-                action: Action.SetRightPanelPhase,
-                phase: RightPanelPhases.PinnedMessages,
-                allowClose: false,
-            });
-        }
-
         return () => (
             <span>
                 {
@@ -498,10 +498,7 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
             </span>
         );
     } else {
-        return () => _t(
-            "%(senderName)s changed the pinned messages for the room.",
-            { senderName },
-        );
+        return () => _t("%(senderName)s changed the pinned messages for the room.", { senderName });
     }
 }
 

From e282c4aa54cf15d160ab2da00493d7e4309e3ad8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 17:23:42 +0200
Subject: [PATCH 218/358] Simplifie code

Co-authored-by: Michael Telatynski <7t3chguy@googlemail.com>
---
 src/TextForEvent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index 038c69ac15..ea669d4050 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -510,9 +510,9 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
                 }
             </span>
         );
-    } else {
-        return () => _t("%(senderName)s changed the pinned messages for the room.", { senderName });
     }
+    
+    return () => _t("%(senderName)s changed the pinned messages for the room.", { senderName });
 }
 
 function textForWidgetEvent(event): () => string | null {

From ff11244de82c8459399d94bb300ba1bb53a167f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 17:27:53 +0200
Subject: [PATCH 219/358] Trailing spaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/TextForEvent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index ea669d4050..def0ac2cb8 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -511,7 +511,7 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
             </span>
         );
     }
-    
+
     return () => _t("%(senderName)s changed the pinned messages for the room.", { senderName });
 }
 

From d83a92959bcbbef5182e0e5ae7172052ebd61c44 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 16:30:40 +0100
Subject: [PATCH 220/358] Fix UserInfo not working when rendered without a room

---
 src/components/views/right_panel/UserInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index e22b2d5ff4..111e9dbf38 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -503,7 +503,7 @@ const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent) =>
     return member.powerLevel < levelToSend;
 };
 
-const getPowerLevels = room => room.currentState.getStateEvents(EventType.RoomPowerLevels, "")?.getContent() || {};
+const getPowerLevels = room => room?.currentState?.getStateEvents(EventType.RoomPowerLevels, "")?.getContent() || {};
 
 export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
     const [powerLevels, setPowerLevels] = useState<IPowerLevelsContent>(getPowerLevels(room));

From 3d6c6cea89e3b4a6b5483217468ad993e0439504 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 16:43:12 +0100
Subject: [PATCH 221/358] Fix AutoHideScrollbar typing

---
 src/components/structures/AutoHideScrollbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index c5c9f0a518..e8a9872b48 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React, { HTMLAttributes, WheelEvent } from "react";
 
-interface IProps extends HTMLAttributes<HTMLDivElement> {
+interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll"> {
     className?: string;
     onScroll?: (event: Event) => void;
     onWheel?: (event: WheelEvent) => void;

From 50127da227f09aaad64e7f435e8ffe31ad86e1cb Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 21 Jun 2021 15:11:41 -0600
Subject: [PATCH 222/358] Replace MAudioBody with a voice message body as a
 template

---
 src/components/views/messages/MAudioBody.js  | 112 -------------------
 src/components/views/messages/MAudioBody.tsx | 111 ++++++++++++++++++
 2 files changed, 111 insertions(+), 112 deletions(-)
 delete mode 100644 src/components/views/messages/MAudioBody.js
 create mode 100644 src/components/views/messages/MAudioBody.tsx

diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
deleted file mode 100644
index 0d5e449fc0..0000000000
--- a/src/components/views/messages/MAudioBody.js
+++ /dev/null
@@ -1,112 +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.
- */
-
-import React from 'react';
-import MFileBody from './MFileBody';
-
-import { decryptFile } from '../../../utils/DecryptFile';
-import { _t } from '../../../languageHandler';
-import InlineSpinner from '../elements/InlineSpinner';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromContent} from "../../../customisations/Media";
-
-@replaceableComponent("views.messages.MAudioBody")
-export default class MAudioBody extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            playing: false,
-            decryptedUrl: null,
-            decryptedBlob: null,
-            error: null,
-        };
-    }
-    onPlayToggle() {
-        this.setState({
-            playing: !this.state.playing,
-        });
-    }
-
-    _getContentUrl() {
-        const media = mediaFromContent(this.props.mxEvent.getContent());
-        if (media.isEncrypted) {
-            return this.state.decryptedUrl;
-        } else {
-            return media.srcHttp;
-        }
-    }
-
-    componentDidMount() {
-        const content = this.props.mxEvent.getContent();
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            let decryptedBlob;
-            decryptFile(content.file).then(function(blob) {
-                decryptedBlob = blob;
-                return URL.createObjectURL(decryptedBlob);
-            }).then((url) => {
-                this.setState({
-                    decryptedUrl: url,
-                    decryptedBlob: decryptedBlob,
-                });
-            }, (err) => {
-                console.warn("Unable to decrypt attachment: ", err);
-                this.setState({
-                    error: err,
-                });
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.state.decryptedUrl) {
-            URL.revokeObjectURL(this.state.decryptedUrl);
-        }
-    }
-
-    render() {
-        const content = this.props.mxEvent.getContent();
-
-        if (this.state.error !== null) {
-            return (
-                <span className="mx_MAudioBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
-                    { _t("Error decrypting audio") }
-                </span>
-            );
-        }
-
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            // Need to decrypt the attachment
-            // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a 16x16 spinner.
-            // Not sure how tall the audio player is so not sure how tall it should actually be.
-            return (
-                <span className="mx_MAudioBody">
-                    <InlineSpinner />
-                </span>
-            );
-        }
-
-        const contentUrl = this._getContentUrl();
-
-        return (
-            <span className="mx_MAudioBody">
-                <audio src={contentUrl} controls />
-                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
-            </span>
-        );
-    }
-}
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
new file mode 100644
index 0000000000..9e77bc0893
--- /dev/null
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -0,0 +1,111 @@
+/*
+Copyright 2021 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 React from "react";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {Playback} from "../../../voice/Playback";
+import MFileBody from "./MFileBody";
+import InlineSpinner from '../elements/InlineSpinner';
+import {_t} from "../../../languageHandler";
+import {mediaFromContent} from "../../../customisations/Media";
+import {decryptFile} from "../../../utils/DecryptFile";
+import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+interface IState {
+    error?: Error;
+    playback?: Playback;
+    decryptedBlob?: Blob;
+}
+
+@replaceableComponent("views.messages.MAudioBody")
+export default class MAudioBody extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {};
+    }
+
+    public async componentDidMount() {
+        let buffer: ArrayBuffer;
+        const content: IMediaEventContent = this.props.mxEvent.getContent();
+        const media = mediaFromContent(content);
+        if (media.isEncrypted) {
+            try {
+                const blob = await decryptFile(content.file);
+                buffer = await blob.arrayBuffer();
+                this.setState({decryptedBlob: blob});
+            } catch (e) {
+                this.setState({error: e});
+                console.warn("Unable to decrypt voice message", e);
+                return; // stop processing the audio file
+            }
+        } else {
+            try {
+                buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
+            } catch (e) {
+                this.setState({error: e});
+                console.warn("Unable to download voice message", e);
+                return; // stop processing the audio file
+            }
+        }
+
+        const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024);
+
+        // We should have a buffer to work with now: let's set it up
+        const playback = new Playback(buffer, waveform);
+        this.setState({ playback });
+        // Note: the RecordingPlayback component will handle preparing the Playback class for us.
+    }
+
+    public componentWillUnmount() {
+        this.state.playback?.destroy();
+    }
+
+    public render() {
+        if (this.state.error) {
+            // TODO: @@TR: Verify error state
+            return (
+                <span className="mx_MVoiceMessageBody">
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    { _t("Error processing voice message") }
+                </span>
+            );
+        }
+
+        if (!this.state.playback) {
+            // TODO: @@TR: Verify loading/decrypting state
+            return (
+                <span className="mx_MVoiceMessageBody">
+                    <InlineSpinner />
+                </span>
+            );
+        }
+
+        // At this point we should have a playable state
+        return (
+            <span className="mx_MVoiceMessageBody">
+                <RecordingPlayback playback={this.state.playback} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
+            </span>
+        )
+    }
+}

From 9f2eba4351a8ac4977e783c68811fb71a48a0586 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 21 Jun 2021 15:13:12 -0600
Subject: [PATCH 223/358] Fix class identifiers

---
 res/css/_components.scss                     |  1 +
 res/css/views/messages/_MAudioBody.scss      | 19 +++++++++++++++++++
 src/components/views/messages/MAudioBody.tsx | 16 +++++++---------
 3 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 res/css/views/messages/_MAudioBody.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index ec3af8655e..c997881138 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -156,6 +156,7 @@
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_EventTileBubble.scss";
+@import "./views/messages/_MAudioBody.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
diff --git a/res/css/views/messages/_MAudioBody.scss b/res/css/views/messages/_MAudioBody.scss
new file mode 100644
index 0000000000..2c9b6f7030
--- /dev/null
+++ b/res/css/views/messages/_MAudioBody.scss
@@ -0,0 +1,19 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_MAudioBody {
+    display: inline-block; // makes the playback controls magically line up
+}
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 9e77bc0893..8568899323 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -55,7 +55,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
                 this.setState({decryptedBlob: blob});
             } catch (e) {
                 this.setState({error: e});
-                console.warn("Unable to decrypt voice message", e);
+                console.warn("Unable to decrypt audio message", e);
                 return; // stop processing the audio file
             }
         } else {
@@ -63,15 +63,13 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
                 buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
             } catch (e) {
                 this.setState({error: e});
-                console.warn("Unable to download voice message", e);
+                console.warn("Unable to download audio message", e);
                 return; // stop processing the audio file
             }
         }
 
-        const waveform = content?.["org.matrix.msc1767.audio"]?.waveform?.map(p => p / 1024);
-
         // We should have a buffer to work with now: let's set it up
-        const playback = new Playback(buffer, waveform);
+        const playback = new Playback(buffer);
         this.setState({ playback });
         // Note: the RecordingPlayback component will handle preparing the Playback class for us.
     }
@@ -84,9 +82,9 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
         if (this.state.error) {
             // TODO: @@TR: Verify error state
             return (
-                <span className="mx_MVoiceMessageBody">
+                <span className="mx_MAudioBody">
                     <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
-                    { _t("Error processing voice message") }
+                    { _t("Error processing audio message") }
                 </span>
             );
         }
@@ -94,7 +92,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
         if (!this.state.playback) {
             // TODO: @@TR: Verify loading/decrypting state
             return (
-                <span className="mx_MVoiceMessageBody">
+                <span className="mx_MAudioBody">
                     <InlineSpinner />
                 </span>
             );
@@ -102,7 +100,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
 
         // At this point we should have a playable state
         return (
-            <span className="mx_MVoiceMessageBody">
+            <span className="mx_MAudioBody">
                 <RecordingPlayback playback={this.state.playback} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>

From 470778cbb84f875314643fdbc3e484d2c66e21fc Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 21 Jun 2021 15:18:34 -0600
Subject: [PATCH 224/358] Move voice message components to audio-generic
 directory

---
 res/css/_components.scss                               |  6 +++---
 .../_PlayPauseButton.scss                              |  0
 .../_PlaybackContainer.scss                            |  0
 .../{voice_messages => audio_messages}/_Waveform.scss  |  0
 .../views/{voice_messages => audio_messages}/Clock.tsx |  4 ++--
 .../LiveRecordingClock.tsx                             |  6 +++---
 .../LiveRecordingWaveform.tsx                          | 10 +++++-----
 .../PlayPauseButton.tsx                                | 10 +++++-----
 .../PlaybackClock.tsx                                  |  8 ++++----
 .../PlaybackWaveform.tsx                               | 10 +++++-----
 .../RecordingPlayback.tsx                              |  6 ++++--
 .../{voice_messages => audio_messages}/Waveform.tsx    |  4 ++--
 src/components/views/messages/MAudioBody.tsx           |  2 +-
 src/components/views/messages/MVoiceMessageBody.tsx    |  2 +-
 src/components/views/rooms/VoiceRecordComposerTile.tsx |  6 +++---
 15 files changed, 38 insertions(+), 36 deletions(-)
 rename res/css/views/{voice_messages => audio_messages}/_PlayPauseButton.scss (100%)
 rename res/css/views/{voice_messages => audio_messages}/_PlaybackContainer.scss (100%)
 rename res/css/views/{voice_messages => audio_messages}/_Waveform.scss (100%)
 rename src/components/views/{voice_messages => audio_messages}/Clock.tsx (92%)
 rename src/components/views/{voice_messages => audio_messages}/LiveRecordingClock.tsx (84%)
 rename src/components/views/{voice_messages => audio_messages}/LiveRecordingWaveform.tsx (83%)
 rename src/components/views/{voice_messages => audio_messages}/PlayPauseButton.tsx (86%)
 rename src/components/views/{voice_messages => audio_messages}/PlaybackClock.tsx (90%)
 rename src/components/views/{voice_messages => audio_messages}/PlaybackWaveform.tsx (85%)
 rename src/components/views/{voice_messages => audio_messages}/RecordingPlayback.tsx (88%)
 rename src/components/views/{voice_messages => audio_messages}/Waveform.tsx (93%)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index c997881138..cb921e251c 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -37,6 +37,9 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
+@import "./views/audio_messages/_PlayPauseButton.scss";
+@import "./views/audio_messages/_PlaybackContainer.scss";
+@import "./views/audio_messages/_Waveform.scss";
 @import "./views/auth/_AuthBody.scss";
 @import "./views/auth/_AuthButtons.scss";
 @import "./views/auth/_AuthFooter.scss";
@@ -254,9 +257,6 @@
 @import "./views/toasts/_AnalyticsToast.scss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
 @import "./views/verification/_VerificationShowSas.scss";
-@import "./views/voice_messages/_PlayPauseButton.scss";
-@import "./views/voice_messages/_PlaybackContainer.scss";
-@import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
diff --git a/res/css/views/voice_messages/_PlayPauseButton.scss b/res/css/views/audio_messages/_PlayPauseButton.scss
similarity index 100%
rename from res/css/views/voice_messages/_PlayPauseButton.scss
rename to res/css/views/audio_messages/_PlayPauseButton.scss
diff --git a/res/css/views/voice_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
similarity index 100%
rename from res/css/views/voice_messages/_PlaybackContainer.scss
rename to res/css/views/audio_messages/_PlaybackContainer.scss
diff --git a/res/css/views/voice_messages/_Waveform.scss b/res/css/views/audio_messages/_Waveform.scss
similarity index 100%
rename from res/css/views/voice_messages/_Waveform.scss
rename to res/css/views/audio_messages/_Waveform.scss
diff --git a/src/components/views/voice_messages/Clock.tsx b/src/components/views/audio_messages/Clock.tsx
similarity index 92%
rename from src/components/views/voice_messages/Clock.tsx
rename to src/components/views/audio_messages/Clock.tsx
index 23e6762c52..19ca1cb348 100644
--- a/src/components/views/voice_messages/Clock.tsx
+++ b/src/components/views/audio_messages/Clock.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     seconds: number;
@@ -28,7 +28,7 @@ interface IState {
  * Simply converts seconds into minutes and seconds. Note that hours will not be
  * displayed, making it possible to see "82:29".
  */
-@replaceableComponent("views.voice_messages.Clock")
+@replaceableComponent("views.audio_messages.Clock")
 export default class Clock extends React.Component<IProps, IState> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/audio_messages/LiveRecordingClock.tsx
similarity index 84%
rename from src/components/views/voice_messages/LiveRecordingClock.tsx
rename to src/components/views/audio_messages/LiveRecordingClock.tsx
index b82539eb16..41909dc201 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/audio_messages/LiveRecordingClock.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { IRecordingUpdate, VoiceRecording } from "../../../voice/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
 
 interface IProps {
@@ -30,7 +30,7 @@ interface IState {
 /**
  * A clock for a live recording.
  */
-@replaceableComponent("views.voice_messages.LiveRecordingClock")
+@replaceableComponent("views.audio_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
similarity index 83%
rename from src/components/views/voice_messages/LiveRecordingWaveform.tsx
rename to src/components/views/audio_messages/LiveRecordingWaveform.tsx
index aab89f6ab1..27d165e613 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {arrayFastResample, arraySeed} from "../../../utils/arrays";
-import {percentageOf} from "../../../utils/numbers";
+import { IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording } from "../../../voice/VoiceRecording";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arrayFastResample, arraySeed } from "../../../utils/arrays";
+import { percentageOf } from "../../../utils/numbers";
 import Waveform from "./Waveform";
 
 interface IProps {
@@ -32,7 +32,7 @@ interface IState {
 /**
  * A waveform which shows the waveform of a live recording
  */
-@replaceableComponent("views.voice_messages.LiveRecordingWaveform")
+@replaceableComponent("views.audio_messages.LiveRecordingWaveform")
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
similarity index 86%
rename from src/components/views/voice_messages/PlayPauseButton.tsx
rename to src/components/views/audio_messages/PlayPauseButton.tsx
index 1f87eb012d..399cb169bb 100644
--- a/src/components/views/voice_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode} from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import React, { ReactNode } from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {_t} from "../../../languageHandler";
-import {Playback, PlaybackState} from "../../../voice/Playback";
+import { _t } from "../../../languageHandler";
+import { Playback, PlaybackState } from "../../../voice/Playback";
 import classNames from "classnames";
 
 interface IProps {
@@ -33,7 +33,7 @@ interface IProps {
  * Displays a play/pause button (activating the play/pause function of the recorder)
  * to be displayed in reference to a recording.
  */
-@replaceableComponent("views.voice_messages.PlayPauseButton")
+@replaceableComponent("views.audio_messages.PlayPauseButton")
 export default class PlayPauseButton extends React.PureComponent<IProps> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/PlaybackClock.tsx b/src/components/views/audio_messages/PlaybackClock.tsx
similarity index 90%
rename from src/components/views/voice_messages/PlaybackClock.tsx
rename to src/components/views/audio_messages/PlaybackClock.tsx
index 2e8ec9a3e7..82108ae63c 100644
--- a/src/components/views/voice_messages/PlaybackClock.tsx
+++ b/src/components/views/audio_messages/PlaybackClock.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
-import {Playback, PlaybackState} from "../../../voice/Playback";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { Playback, PlaybackState } from "../../../voice/Playback";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 
 interface IProps {
     playback: Playback;
@@ -33,7 +33,7 @@ interface IState {
 /**
  * A clock for a playback of a recording.
  */
-@replaceableComponent("views.voice_messages.PlaybackClock")
+@replaceableComponent("views.audio_messages.PlaybackClock")
 export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/PlaybackWaveform.tsx b/src/components/views/audio_messages/PlaybackWaveform.tsx
similarity index 85%
rename from src/components/views/voice_messages/PlaybackWaveform.tsx
rename to src/components/views/audio_messages/PlaybackWaveform.tsx
index 2e9f163f5e..bb205e4222 100644
--- a/src/components/views/voice_messages/PlaybackWaveform.tsx
+++ b/src/components/views/audio_messages/PlaybackWaveform.tsx
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
-import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
-import {percentageOf} from "../../../utils/numbers";
+import { Playback, PLAYBACK_WAVEFORM_SAMPLES } from "../../../voice/Playback";
+import { percentageOf } from "../../../utils/numbers";
 
 interface IProps {
     playback: Playback;
@@ -33,7 +33,7 @@ interface IState {
 /**
  * A waveform which shows the waveform of a previously recorded recording
  */
-@replaceableComponent("views.voice_messages.PlaybackWaveform")
+@replaceableComponent("views.audio_messages.PlaybackWaveform")
 export default class PlaybackWaveform extends React.PureComponent<IProps, IState> {
     public constructor(props) {
         super(props);
diff --git a/src/components/views/voice_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
similarity index 88%
rename from src/components/views/voice_messages/RecordingPlayback.tsx
rename to src/components/views/audio_messages/RecordingPlayback.tsx
index 776997cec2..32ce32805d 100644
--- a/src/components/views/voice_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Playback, PlaybackState} from "../../../voice/Playback";
+import { Playback, PlaybackState } from "../../../voice/Playback";
 import React, {ReactNode} from "react";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Playback instance to render. Cannot change during component lifecycle: create
@@ -31,6 +32,7 @@ interface IState {
     playbackPhase: PlaybackState;
 }
 
+@replaceableComponent("views.audio_messages.RecordingPlayback")
 export default class RecordingPlayback extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
diff --git a/src/components/views/voice_messages/Waveform.tsx b/src/components/views/audio_messages/Waveform.tsx
similarity index 93%
rename from src/components/views/voice_messages/Waveform.tsx
rename to src/components/views/audio_messages/Waveform.tsx
index 840a5a12b3..dc7551025e 100644
--- a/src/components/views/voice_messages/Waveform.tsx
+++ b/src/components/views/audio_messages/Waveform.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import classNames from "classnames";
 
 interface IProps {
@@ -34,7 +34,7 @@ interface IState {
  * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
  * "filled", as a demonstration of the progress property.
  */
-@replaceableComponent("views.voice_messages.Waveform")
+@replaceableComponent("views.audio_messages.Waveform")
 export default class Waveform extends React.PureComponent<IProps, IState> {
     public static defaultProps = {
         progress: 1,
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 8568899323..ddcebd7a60 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -23,7 +23,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {_t} from "../../../languageHandler";
 import {mediaFromContent} from "../../../customisations/Media";
 import {decryptFile} from "../../../utils/DecryptFile";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
 
 interface IProps {
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
index a7e3b1cd86..84cd6ce012 100644
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -23,7 +23,7 @@ import InlineSpinner from '../elements/InlineSpinner';
 import {_t} from "../../../languageHandler";
 import {mediaFromContent} from "../../../customisations/Media";
 import {decryptFile} from "../../../utils/DecryptFile";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
 
 interface IProps {
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 122ba0ca0b..d8c481e332 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -21,12 +21,12 @@ import {RecordingState, VoiceRecording} from "../../../voice/VoiceRecording";
 import {Room} from "matrix-js-sdk/src/models/room";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import LiveRecordingWaveform from "../audio_messages/LiveRecordingWaveform";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
-import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
+import LiveRecordingClock from "../audio_messages/LiveRecordingClock";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import {MsgType} from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";

From dda60949c33d6924e9f9053ae04c87df2a5759d0 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 21 Jun 2021 16:18:39 -0600
Subject: [PATCH 225/358] Introduce basic audio playback control

---
 .../views/audio_messages/AudioPlayer.tsx      | 96 +++++++++++++++++++
 .../views/audio_messages/DurationClock.tsx    | 55 +++++++++++
 .../views/audio_messages/PlayPauseButton.tsx  | 18 +++-
 src/components/views/messages/MAudioBody.tsx  | 25 ++---
 src/voice/Playback.ts                         | 11 +++
 src/voice/PlaybackClock.ts                    | 18 +++-
 6 files changed, 203 insertions(+), 20 deletions(-)
 create mode 100644 src/components/views/audio_messages/AudioPlayer.tsx
 create mode 100644 src/components/views/audio_messages/DurationClock.tsx

diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
new file mode 100644
index 0000000000..82372aca74
--- /dev/null
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -0,0 +1,96 @@
+/*
+Copyright 2021 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 { Playback, PlaybackState } from "../../../voice/Playback";
+import React, { createRef, ReactNode, RefObject } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import PlaybackWaveform from "./PlaybackWaveform";
+import PlayPauseButton from "./PlayPauseButton";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { formatBytes } from "../../../utils/FormattingUtils";
+import DurationClock from "./DurationClock";
+import { Key } from "../../../Keyboard";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+}
+
+interface IState {
+    playbackPhase: PlaybackState;
+}
+
+@replaceableComponent("views.audio_messages.AudioPlayer")
+export default class AudioPlayer extends React.PureComponent<IProps, IState> {
+    private playPauseRef: RefObject<PlayPauseButton> = createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            playbackPhase: PlaybackState.Decoding, // default assumption
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
+
+        // Don't wait for the promise to complete - it will emit a progress update when it
+        // is done, and it's not meant to take long anyhow.
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.prepare();
+    }
+
+    private onPlaybackUpdate = (ev: PlaybackState) => {
+        this.setState({ playbackPhase: ev });
+    };
+
+    private onKeyPress = (ev: React.KeyboardEvent) => {
+        if (ev.key === Key.SPACE) {
+            ev.stopPropagation();
+            this.playPauseRef.current?.toggle();
+        }
+    };
+
+    protected renderFileSize(): string {
+        const bytes = this.props.playback.sizeBytes;
+        if (!bytes) return null;
+
+        // Not translated as these are units, and therefore universal
+        return `(${formatBytes(bytes)})`;
+    }
+
+    public render(): ReactNode {
+        // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
+        // events for accessibility
+        return <div className='mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
+            <div className='mx_AudioPlayer_primaryContainer'>
+                <PlayPauseButton
+                    playback={this.props.playback}
+                    playbackPhase={this.state.playbackPhase}
+                    tabIndex={-1} // prevent tabbing into the button
+                    ref={this.playPauseRef}
+                />
+                <div className='mx_AudioPlayer_byline'>
+                    <DurationClock playback={this.props.playback} />
+                    &nbsp; {/* easiest way to introduce a gap between the components */}
+                    { this.renderFileSize() }
+                </div>
+            </div>
+            <PlaybackWaveform playback={this.props.playback} />
+        </div>
+    }
+}
diff --git a/src/components/views/audio_messages/DurationClock.tsx b/src/components/views/audio_messages/DurationClock.tsx
new file mode 100644
index 0000000000..f6271d1cf4
--- /dev/null
+++ b/src/components/views/audio_messages/DurationClock.tsx
@@ -0,0 +1,55 @@
+/*
+Copyright 2021 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 React from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Clock from "./Clock";
+import { Playback } from "../../../voice/Playback";
+
+interface IProps {
+    playback: Playback;
+}
+
+interface IState {
+    durationSeconds: number;
+}
+
+/**
+ * A clock which shows a clip's maximum duration.
+ */
+@replaceableComponent("views.audio_messages.DurationClock")
+export default class DurationClock extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            // we track the duration on state because we won't really know what the clip duration
+            // is until the first time update, and as a PureComponent we are trying to dedupe state
+            // updates as much as possible. This is just the easiest way to avoid a forceUpdate() or
+            // member property to track "did we get a duration".
+            durationSeconds: this.props.playback.clockInfo.durationSeconds,
+        };
+        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
+    }
+
+    private onTimeUpdate = (time: number[]) => {
+        this.setState({durationSeconds: time[1]});
+    };
+
+    public render() {
+        return <Clock seconds={this.state.durationSeconds} />;
+    }
+}
diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
index 399cb169bb..7d881a10e5 100644
--- a/src/components/views/audio_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -21,7 +21,8 @@ import { _t } from "../../../languageHandler";
 import { Playback, PlaybackState } from "../../../voice/Playback";
 import classNames from "classnames";
 
-interface IProps {
+// omitted props are handled by render function
+interface IProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick" | "disabled"> {
     // Playback instance to manipulate. Cannot change during the component lifecycle.
     playback: Playback;
 
@@ -39,13 +40,19 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
         super(props);
     }
 
-    private onClick = async () => {
-        await this.props.playback.toggle();
+    private onClick = () => {
+        // noinspection JSIgnoredPromiseFromCall
+        this.toggle();
     };
 
+    public async toggle() {
+        await this.props.playback.toggle();
+    }
+
     public render(): ReactNode {
-        const isPlaying = this.props.playback.isPlaying;
-        const isDisabled = this.props.playbackPhase === PlaybackState.Decoding;
+        const { playback, playbackPhase, ...restProps } = this.props;
+        const isPlaying = playback.isPlaying;
+        const isDisabled = playbackPhase === PlaybackState.Decoding;
         const classes = classNames('mx_PlayPauseButton', {
             'mx_PlayPauseButton_play': !isPlaying,
             'mx_PlayPauseButton_pause': isPlaying,
@@ -56,6 +63,7 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
             title={isPlaying ? _t("Pause") : _t("Play")}
             onClick={this.onClick}
             disabled={isDisabled}
+            {...restProps}
         />;
     }
 }
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index ddcebd7a60..a8f2304fe9 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -15,16 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {Playback} from "../../../voice/Playback";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Playback } from "../../../voice/Playback";
 import MFileBody from "./MFileBody";
 import InlineSpinner from '../elements/InlineSpinner';
-import {_t} from "../../../languageHandler";
-import {mediaFromContent} from "../../../customisations/Media";
-import {decryptFile} from "../../../utils/DecryptFile";
-import RecordingPlayback from "../audio_messages/RecordingPlayback";
-import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
+import { _t } from "../../../languageHandler";
+import { mediaFromContent } from "../../../customisations/Media";
+import { decryptFile } from "../../../utils/DecryptFile";
+import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+import AudioPlayer from "../audio_messages/AudioPlayer";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -52,9 +52,9 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
             try {
                 const blob = await decryptFile(content.file);
                 buffer = await blob.arrayBuffer();
-                this.setState({decryptedBlob: blob});
+                this.setState({ decryptedBlob: blob });
             } catch (e) {
-                this.setState({error: e});
+                this.setState({ error: e });
                 console.warn("Unable to decrypt audio message", e);
                 return; // stop processing the audio file
             }
@@ -62,7 +62,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
             try {
                 buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
             } catch (e) {
-                this.setState({error: e});
+                this.setState({ error: e });
                 console.warn("Unable to download audio message", e);
                 return; // stop processing the audio file
             }
@@ -70,6 +70,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
 
         // We should have a buffer to work with now: let's set it up
         const playback = new Playback(buffer);
+        playback.clockInfo.populatePlaceholdersFrom(this.props.mxEvent);
         this.setState({ playback });
         // Note: the RecordingPlayback component will handle preparing the Playback class for us.
     }
@@ -101,7 +102,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
         // At this point we should have a playable state
         return (
             <span className="mx_MAudioBody">
-                <RecordingPlayback playback={this.state.playback} />
+                <AudioPlayer playback={this.state.playback} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
         )
diff --git a/src/voice/Playback.ts b/src/voice/Playback.ts
index 61da435151..f1f91310b2 100644
--- a/src/voice/Playback.ts
+++ b/src/voice/Playback.ts
@@ -58,6 +58,7 @@ export class Playback extends EventEmitter implements IDestroyable {
     private resampledWaveform: number[];
     private waveformObservable = new SimpleObservable<number[]>();
     private readonly clock: PlaybackClock;
+    private readonly fileSize: number;
 
     /**
      * Creates a new playback instance from a buffer.
@@ -67,12 +68,22 @@ export class Playback extends EventEmitter implements IDestroyable {
      */
     constructor(private buf: ArrayBuffer, seedWaveform = DEFAULT_WAVEFORM) {
         super();
+        // Capture the file size early as reading the buffer will result in a 0-length buffer left behind
+        this.fileSize = this.buf.byteLength;
         this.context = createAudioContext();
         this.resampledWaveform = arrayFastResample(seedWaveform ?? DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES);
         this.waveformObservable.update(this.resampledWaveform);
         this.clock = new PlaybackClock(this.context);
     }
 
+    /**
+     * Size of the audio clip in bytes. May be zero if unknown. This is updated
+     * when the playback goes through phase changes.
+     */
+    public get sizeBytes(): number {
+        return this.fileSize;
+    }
+
     /**
      * Stable waveform for the playback. Values are guaranteed to be between
      * zero and one, inclusive.
diff --git a/src/voice/PlaybackClock.ts b/src/voice/PlaybackClock.ts
index d6d36e861f..9c2d36923f 100644
--- a/src/voice/PlaybackClock.ts
+++ b/src/voice/PlaybackClock.ts
@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleObservable} from "matrix-widget-api";
-import {IDestroyable} from "../utils/IDestroyable";
+import { SimpleObservable } from "matrix-widget-api";
+import { IDestroyable } from "../utils/IDestroyable";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 // Because keeping track of time is sufficiently complicated...
 export class PlaybackClock implements IDestroyable {
@@ -25,12 +26,13 @@ export class PlaybackClock implements IDestroyable {
     private observable = new SimpleObservable<number[]>();
     private timerId: number;
     private clipDuration = 0;
+    private placeholderDuration = 0;
 
     public constructor(private context: AudioContext) {
     }
 
     public get durationSeconds(): number {
-        return this.clipDuration;
+        return this.clipDuration || this.placeholderDuration;
     }
 
     public set durationSeconds(val: number) {
@@ -54,6 +56,16 @@ export class PlaybackClock implements IDestroyable {
         }
     };
 
+    /**
+     * Populates default information about the audio clip from the event body.
+     * The placeholders will be overridden once known.
+     * @param {MatrixEvent} event The event to use for placeholders.
+     */
+    public populatePlaceholdersFrom(event: MatrixEvent) {
+        const durationSeconds = Number(event.getContent()['info']?.['duration']);
+        if (Number.isFinite(durationSeconds)) this.placeholderDuration = durationSeconds;
+    }
+
     /**
      * Mark the time in the audio context where the clip starts/has been loaded.
      * This is to ensure the clock isn't skewed into thinking it is ~0.5s into

From 8ce77e618f4dbeaa007bc1e3c513717c5998275a Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 13:25:07 -0600
Subject: [PATCH 226/358] Reduce pointless CSS vars by 2

---
 res/css/views/audio_messages/_PlaybackContainer.scss | 6 +++---
 res/themes/dark/css/_dark.scss                       | 2 --
 res/themes/legacy-dark/css/_legacy-dark.scss         | 2 --
 res/themes/legacy-light/css/_legacy-light.scss       | 2 --
 res/themes/light/css/_light.scss                     | 2 --
 5 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index 20def16d6a..e992dd10cc 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -22,14 +22,14 @@ limitations under the License.
     // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
     // has a 1px padding on it that we want to account for.
     padding: 7px 12px 7px 11px;
-    background-color: $voice-record-waveform-bg-color;
+    background-color: $message-body-panel-bg-color;
     border-radius: 12px;
 
     // Cheat at alignment a bit
     display: flex;
     align-items: center;
 
-    color: $voice-record-waveform-fg-color;
+    color: $message-body-panel-fg-color;
     font-size: $font-14px;
     line-height: $font-24px;
 
@@ -40,7 +40,7 @@ limitations under the License.
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress
                 transition: background-color 250ms ease;
-                background-color: $voice-record-waveform-fg-color;
+                background-color: $message-body-panel-fg-color;
             }
         }
     }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8b5fde3bd1..81fd3c892a 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -215,8 +215,6 @@ $message-body-panel-icon-fg-color: #21262C; // "Separator"
 $message-body-panel-icon-bg-color: $tertiary-fg-color;
 
 $voice-record-stop-border-color: $quaternary-fg-color;
-$voice-record-waveform-bg-color: $message-body-panel-bg-color;
-$voice-record-waveform-fg-color: $message-body-panel-fg-color;
 $voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
 $voice-record-icon-color: $quaternary-fg-color;
 $voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index eb6dc40599..a6a038f290 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -209,8 +209,6 @@ $message-body-panel-icon-bg-color: $secondary-fg-color;
 
 // See non-legacy dark for variable information
 $voice-record-stop-border-color: #6F7882;
-$voice-record-waveform-bg-color: $message-body-panel-bg-color;
-$voice-record-waveform-fg-color: $message-body-panel-fg-color;
 $voice-record-waveform-incomplete-fg-color: #6F7882;
 $voice-record-icon-color: #6F7882;
 $voice-playback-button-bg-color: $tertiary-fg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index a6b180bab4..7c1495d935 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -334,8 +334,6 @@ $message-body-panel-icon-bg-color: $primary-bg-color;
 $voice-record-stop-symbol-color: #ff4b55;
 $voice-record-live-circle-color: #ff4b55;
 $voice-record-stop-border-color: #E3E8F0;
-$voice-record-waveform-bg-color: $message-body-panel-bg-color;
-$voice-record-waveform-fg-color: $message-body-panel-fg-color;
 $voice-record-waveform-incomplete-fg-color: #C1C6CD;
 $voice-record-icon-color: $tertiary-fg-color;
 $voice-playback-button-bg-color: $message-body-panel-icon-bg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index d8dab9c9c4..7e958c2af6 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -335,8 +335,6 @@ $voice-record-stop-symbol-color: #ff4b55;
 $voice-record-live-circle-color: #ff4b55;
 
 $voice-record-stop-border-color: #E3E8F0; // "Separator"
-$voice-record-waveform-bg-color: $message-body-panel-bg-color;
-$voice-record-waveform-fg-color: $message-body-panel-fg-color;
 $voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;
 $voice-record-icon-color: $tertiary-fg-color;
 $voice-playback-button-bg-color: $message-body-panel-icon-bg-color;

From ffef2e58cb72fba6551c8f2611007920cb0f62ab Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 13:34:57 -0600
Subject: [PATCH 227/358] Unify audio message types to new media body

---
 res/css/_components.scss                      |  1 +
 .../audio_messages/_PlaybackContainer.scss    |  6 ----
 res/css/views/messages/_MediaBody.scss        | 28 +++++++++++++++++++
 .../views/audio_messages/AudioPlayer.tsx      |  5 ++--
 .../audio_messages/RecordingPlayback.tsx      |  2 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   |  2 +-
 6 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 res/css/views/messages/_MediaBody.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index cb921e251c..d86ce8d017 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -169,6 +169,7 @@
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MVoiceMessageBody.scss";
+@import "./views/messages/_MediaBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index e992dd10cc..c1192f188b 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -22,17 +22,11 @@ limitations under the License.
     // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
     // has a 1px padding on it that we want to account for.
     padding: 7px 12px 7px 11px;
-    background-color: $message-body-panel-bg-color;
-    border-radius: 12px;
 
     // Cheat at alignment a bit
     display: flex;
     align-items: center;
 
-    color: $message-body-panel-fg-color;
-    font-size: $font-14px;
-    line-height: $font-24px;
-
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.scss
new file mode 100644
index 0000000000..12e441750c
--- /dev/null
+++ b/res/css/views/messages/_MediaBody.scss
@@ -0,0 +1,28 @@
+/*
+Copyright 2021 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.
+*/
+
+// A "media body" is any file upload looking thing, apart from images and videos (they
+// have unique styles).
+
+.mx_MediaBody {
+    background-color: $message-body-panel-bg-color;
+    border-radius: 12px;
+
+    color: $message-body-panel-fg-color;
+    font-size: $font-14px;
+    line-height: $font-24px;
+}
+
diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 82372aca74..93bfab3dcd 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import { Playback, PlaybackState } from "../../../voice/Playback";
 import React, { createRef, ReactNode, RefObject } from "react";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { formatBytes } from "../../../utils/FormattingUtils";
@@ -76,7 +75,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
     public render(): ReactNode {
         // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
         // events for accessibility
-        return <div className='mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
+        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
             <div className='mx_AudioPlayer_primaryContainer'>
                 <PlayPauseButton
                     playback={this.props.playback}
@@ -90,7 +89,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                     { this.renderFileSize() }
                 </div>
             </div>
-            <PlaybackWaveform playback={this.props.playback} />
+            <span>TODO: Seek bar</span>
         </div>
     }
 }
diff --git a/src/components/views/audio_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
index 32ce32805d..7c7a0a87c1 100644
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -55,7 +55,7 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     };
 
     public render(): ReactNode {
-        return <div className='mx_VoiceMessagePrimaryContainer'>
+        return <div className='mx_MediaBody mx_VoiceMessagePrimaryContainer'>
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             <PlaybackWaveform playback={this.props.playback} />
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index d8c481e332..d956a3febf 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -177,7 +177,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         // only other UI is the recording-in-progress UI
-        return <div className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
+        return <div className="mx_MediaBody mx_VoiceRecordComposerTile_recording">
             <LiveRecordingClock recorder={this.state.recorder} />
             <LiveRecordingWaveform recorder={this.state.recorder} />
         </div>;

From aaec9857fd2762901bf0356fdef3f48f42cf1064 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 19:34:25 -0600
Subject: [PATCH 228/358] Add optional mark function callback

---
 src/utils/MarkedExecution.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts
index b0b8fdf63d..01cc91adce 100644
--- a/src/utils/MarkedExecution.ts
+++ b/src/utils/MarkedExecution.ts
@@ -26,9 +26,11 @@ export class MarkedExecution {
 
     /**
      * Creates a MarkedExecution for the provided function.
-     * @param fn The function to be called upon trigger if marked.
+     * @param {Function} fn The function to be called upon trigger if marked.
+     * @param {Function} onMarkCallback A function that is called when a new mark is made. Not
+     * called if a mark is already flagged.
      */
-    constructor(private fn: () => void) {
+    constructor(private fn: () => void, private onMarkCallback?: () => void) {
     }
 
     /**
@@ -42,6 +44,7 @@ export class MarkedExecution {
      * Marks the function to be called upon trigger().
      */
     public mark() {
+        if (!this.marked) this.onMarkCallback?.();
         this.marked = true;
     }
 

From 4492627401acd75bc0db3d73c88eb68baada9f42 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 19:20:02 +0100
Subject: [PATCH 229/358] More js-sdk type consolidation

---
 src/BasePlatform.ts | 2 +-
 src/Lifecycle.ts    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/BasePlatform.ts b/src/BasePlatform.ts
index 5483ea6874..82eb67a2d6 100644
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@@ -348,7 +348,7 @@ export default abstract class BasePlatform {
     /**
      * Create and store a pickle key for encrypting libolm objects.
      * @param {string} userId the user ID for the user that the pickle key is for.
-     * @param {string} userId the device ID that the pickle key is for.
+     * @param {string} deviceId the device ID that the pickle key is for.
      * @returns {string|null} the pickle key, or null if the platform does not
      *     support storing pickle keys.
      */
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index b0a1292ba1..dd19e4ea16 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -20,7 +20,7 @@ limitations under the License.
 import { createClient } from 'matrix-js-sdk/src/matrix';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import {decryptAES, encryptAES} from "matrix-js-sdk/src/crypto/aes";
+import { decryptAES, encryptAES, IEncryptedPayload } from "matrix-js-sdk/src/crypto/aes";
 
 import {IMatrixClientCreds, MatrixClientPeg} from './MatrixClientPeg';
 import SecurityCustomisations from "./customisations/Security";
@@ -303,7 +303,7 @@ export interface IStoredSession {
     hsUrl: string;
     isUrl: string;
     hasAccessToken: boolean;
-    accessToken: string | object;
+    accessToken: string | IEncryptedPayload;
     userId: string;
     deviceId: string;
     isGuest: boolean;
@@ -346,11 +346,11 @@ export async function getStoredSessionVars(): Promise<IStoredSession> {
         isGuest = localStorage.getItem("matrix-is-guest") === "true";
     }
 
-    return {hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest};
+    return { hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest };
 }
 
 // The pickle key is a string of unspecified length and format.  For AES, we
-// need a 256-bit Uint8Array.  So we HKDF the pickle key to generate the AES
+// need a 256-bit Uint8Array. So we HKDF the pickle key to generate the AES
 // key.  The AES key should be zeroed after it is used.
 async function pickleKeyToAesKey(pickleKey: string): Promise<Uint8Array> {
     const pickleKeyBuffer = new Uint8Array(pickleKey.length);

From 9c752680ba9689f35df94d8efbdfae688a382849 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 23 Jun 2021 19:34:34 -0600
Subject: [PATCH 230/358] Tile styling and early behaviour

---
 res/css/_components.scss                      |   3 +-
 .../views/audio_messages/_AudioPlayer.scss    |  68 +++++++++++
 .../audio_messages/_PlayPauseButton.scss      |   2 +
 res/css/views/audio_messages/_SeekBar.scss    |  89 ++++++++++++++
 res/css/views/messages/_MAudioBody.scss       |  19 ---
 res/themes/legacy-dark/css/_legacy-dark.scss  |   3 +
 .../legacy-light/css/_legacy-light.scss       |   3 +
 .../views/audio_messages/AudioPlayer.tsx      |  23 +++-
 .../views/audio_messages/PlaybackClock.tsx    |  11 +-
 .../views/audio_messages/SeekBar.tsx          | 110 ++++++++++++++++++
 src/components/views/messages/MAudioBody.tsx  |   2 +-
 src/i18n/strings/en_EN.json                   |   7 +-
 12 files changed, 310 insertions(+), 30 deletions(-)
 create mode 100644 res/css/views/audio_messages/_AudioPlayer.scss
 create mode 100644 res/css/views/audio_messages/_SeekBar.scss
 delete mode 100644 res/css/views/messages/_MAudioBody.scss
 create mode 100644 src/components/views/audio_messages/SeekBar.tsx

diff --git a/res/css/_components.scss b/res/css/_components.scss
index d86ce8d017..1517527034 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -37,8 +37,10 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
+@import "./views/audio_messages/_AudioPlayer.scss";
 @import "./views/audio_messages/_PlayPauseButton.scss";
 @import "./views/audio_messages/_PlaybackContainer.scss";
+@import "./views/audio_messages/_SeekBar.scss";
 @import "./views/audio_messages/_Waveform.scss";
 @import "./views/auth/_AuthBody.scss";
 @import "./views/auth/_AuthButtons.scss";
@@ -159,7 +161,6 @@
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_EventTileBubble.scss";
-@import "./views/messages/_MAudioBody.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
new file mode 100644
index 0000000000..2d3777aeca
--- /dev/null
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -0,0 +1,68 @@
+/*
+Copyright 2021 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.
+*/
+
+.mx_AudioPlayer_container {
+    padding: 16px 12px 11px 12px;
+    width: 267px;
+
+    .mx_AudioPlayer_primaryContainer {
+        display: flex;
+
+        .mx_PlayPauseButton {
+            margin-right: 8px;
+        }
+
+        .mx_AudioPlayer_mediaInfo {
+            flex: 1;
+            overflow: hidden; // makes the ellipsis on the file name work
+
+            & > * {
+                display: block;
+            }
+
+            .mx_AudioPlayer_mediaName {
+                color: $primary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-15px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                padding-bottom: 4px; // mimics the line-height differences in the Figma
+            }
+
+            .mx_AudioPlayer_byline {
+                font-size: $font-12px;
+                line-height: $font-12px;
+            }
+        }
+    }
+
+    .mx_AudioPlayer_seek {
+        display: flex;
+        align-items: center;
+
+        .mx_SeekBar {
+            flex: 1;
+        }
+
+        .mx_Clock {
+            width: $font-42px; // we're not using a monospace font, so fake it
+            min-width: $font-42px; // for flexbox
+            padding-left: 4px; // isolate from seek bar
+            text-align: right;
+        }
+    }
+}
diff --git a/res/css/views/audio_messages/_PlayPauseButton.scss b/res/css/views/audio_messages/_PlayPauseButton.scss
index 6caedafa29..714da3e605 100644
--- a/res/css/views/audio_messages/_PlayPauseButton.scss
+++ b/res/css/views/audio_messages/_PlayPauseButton.scss
@@ -18,6 +18,8 @@ limitations under the License.
     position: relative;
     width: 32px;
     height: 32px;
+    min-width: 32px; // for when the button is used in a flexbox
+    min-height: 32px; // for when the button is used in a flexbox
     border-radius: 32px;
     background-color: $voice-playback-button-bg-color;
 
diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.scss
new file mode 100644
index 0000000000..23fc0bf5db
--- /dev/null
+++ b/res/css/views/audio_messages/_SeekBar.scss
@@ -0,0 +1,89 @@
+/*
+Copyright 2021 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.
+*/
+
+// CSS inspiration from:
+// * https://www.w3schools.com/howto/howto_js_rangeslider.asp
+// * https://stackoverflow.com/a/28283806
+// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+
+.mx_SeekBar {
+    // Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't
+    // need to support IE.
+
+    appearance: none; // default style override
+
+    width: 100%;
+    height: 1px;
+    background: $quaternary-fg-color;
+    outline: none; // remove blue selection border
+    position: relative; // for progress bar support later on
+
+    &::-webkit-slider-thumb {
+        appearance: none; // default style override
+
+        // Dev note: This needs to be duplicated with the -moz-range-thumb selector
+        // because otherwise Edge (webkit) will fail to see the styles and just refuse
+        // to apply them.
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $tertiary-fg-color;
+        cursor: pointer;
+    }
+
+    &::-moz-range-thumb {
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $tertiary-fg-color;
+        cursor: pointer;
+
+        // Firefox adds a border on the thumb
+        border: none;
+    }
+
+    // This is for webkit support, but we can't limit the functionality of it to just webkit
+    // browsers. Firefox responds to webkit-prefixed values now, which means we can't use media
+    // or support queries to selectively apply the rule. An upside is that this CSS doesn't work
+    // in firefox, so it's just wasted CPU/GPU time.
+    &::before { // ::before to ensure it ends up under the thumb
+        content: '';
+        background-color: $tertiary-fg-color;
+
+        // Absolute positioning to ensure it overlaps with the existing bar
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        // Sizing to match the bar
+        width: 100%;
+        height: 1px;
+
+        // And finally dynamic width without overly hurting the rendering engine.
+        transform-origin: 0 100%;
+        transform: scaleX(var(--fillTo));
+    }
+
+    // This is firefox's built-in support for the above, with 100% less hacks.
+    &::-moz-range-progress {
+        background-color: $tertiary-fg-color;
+        height: 1px;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+}
diff --git a/res/css/views/messages/_MAudioBody.scss b/res/css/views/messages/_MAudioBody.scss
deleted file mode 100644
index 2c9b6f7030..0000000000
--- a/res/css/views/messages/_MAudioBody.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright 2021 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.
-*/
-
-.mx_MAudioBody {
-    display: inline-block; // makes the playback controls magically line up
-}
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index a6a038f290..df01efbe1e 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -20,6 +20,9 @@ $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
+// Legacy theme backports
+$quaternary-fg-color: #6F7882;
+
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
 
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 7c1495d935..c7debcdabe 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -28,6 +28,9 @@ $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: #ffffff;
 $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
 
+// Legacy theme backports
+$quaternary-fg-color: #C1C6CD;
+
 // used for dialog box text
 $light-fg-color: #747474;
 
diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 93bfab3dcd..336139e467 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -22,11 +22,16 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { formatBytes } from "../../../utils/FormattingUtils";
 import DurationClock from "./DurationClock";
 import { Key } from "../../../Keyboard";
+import { _t } from "../../../languageHandler";
+import SeekBar from "./SeekBar";
+import PlaybackClock from "./PlaybackClock";
 
 interface IProps {
     // Playback instance to render. Cannot change during component lifecycle: create
     // an all-new component instead.
     playback: Playback;
+
+    mediaName: string;
 }
 
 interface IState {
@@ -83,13 +88,21 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                     tabIndex={-1} // prevent tabbing into the button
                     ref={this.playPauseRef}
                 />
-                <div className='mx_AudioPlayer_byline'>
-                    <DurationClock playback={this.props.playback} />
-                    &nbsp; {/* easiest way to introduce a gap between the components */}
-                    { this.renderFileSize() }
+                <div className='mx_AudioPlayer_mediaInfo'>
+                    <span className='mx_AudioPlayer_mediaName'>
+                        {this.props.mediaName || _t("Unnamed audio")}
+                    </span>
+                    <div className='mx_AudioPlayer_byline'>
+                        <DurationClock playback={this.props.playback} />
+                        &nbsp; {/* easiest way to introduce a gap between the components */}
+                        { this.renderFileSize() }
+                    </div>
                 </div>
             </div>
-            <span>TODO: Seek bar</span>
+            <div className='mx_AudioPlayer_seek'>
+                <SeekBar playback={this.props.playback} tabIndex={-1} playbackPhase={this.state.playbackPhase} />
+                <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
+            </div>
         </div>
     }
 }
diff --git a/src/components/views/audio_messages/PlaybackClock.tsx b/src/components/views/audio_messages/PlaybackClock.tsx
index 82108ae63c..d94e0bed82 100644
--- a/src/components/views/audio_messages/PlaybackClock.tsx
+++ b/src/components/views/audio_messages/PlaybackClock.tsx
@@ -22,6 +22,11 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 
 interface IProps {
     playback: Playback;
+
+    // The default number of seconds to show when the playback has completed or
+    // has not started. Not used during playback, even when paused. Defaults to
+    // clip duration length.
+    defaultDisplaySeconds?: number;
 }
 
 interface IState {
@@ -64,7 +69,11 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     public render() {
         let seconds = this.state.seconds;
         if (this.state.playbackPhase === PlaybackState.Stopped) {
-            seconds = this.state.durationSeconds;
+            if (Number.isFinite(this.props.defaultDisplaySeconds)) {
+                seconds = this.props.defaultDisplaySeconds;
+            } else {
+                seconds = this.state.durationSeconds;
+            }
         }
         return <Clock seconds={seconds} />;
     }
diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx
new file mode 100644
index 0000000000..2561321df3
--- /dev/null
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -0,0 +1,110 @@
+/*
+Copyright 2021 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 { Playback, PlaybackState } from "../../../voice/Playback";
+import React, { ChangeEvent, createRef, CSSProperties, ReactNode, RefObject } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import PlayPauseButton from "./PlayPauseButton";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { formatBytes } from "../../../utils/FormattingUtils";
+import DurationClock from "./DurationClock";
+import { Key } from "../../../Keyboard";
+import { _t } from "../../../languageHandler";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
+import { percentageOf } from "../../../utils/numbers";
+
+interface IProps {
+    // Playback instance to render. Cannot change during component lifecycle: create
+    // an all-new component instead.
+    playback: Playback;
+
+    // Tab index for the underlying component. Useful if the seek bar is in a managed state.
+    // Defaults to zero.
+    tabIndex?: number;
+
+    playbackPhase: PlaybackState;
+}
+
+interface IState {
+    percentage: number;
+}
+
+interface ISeekCSS extends CSSProperties {
+    '--fillTo': number;
+}
+
+@replaceableComponent("views.audio_messages.SeekBar")
+export default class SeekBar extends React.PureComponent<IProps, IState> {
+    // We use an animation frame request to avoid overly spamming prop updates, even if we aren't
+    // really using anything demanding on the CSS front.
+
+    private animationFrameFn = new MarkedExecution(
+        () => this.doUpdate(),
+        () => requestAnimationFrame(() => this.animationFrameFn.trigger()));
+
+    public static defaultProps = {
+        tabIndex: 0,
+    };
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            percentage: 0,
+        };
+
+        // We don't need to de-register: the class handles this for us internally
+        this.props.playback.clockInfo.liveData.onUpdate(() => this.animationFrameFn.mark());
+    }
+
+    private doUpdate() {
+        this.setState({
+            percentage: percentageOf(
+                this.props.playback.clockInfo.timeSeconds,
+                0,
+                this.props.playback.clockInfo.durationSeconds),
+        });
+    }
+
+    public left() {
+        console.log("@@ LEFT");
+    }
+
+    public right() {
+        console.log("@@ RIGHT");
+    }
+
+    private onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        console.log('@@ CHANGE', ev.target.value);
+    };
+
+    public render(): ReactNode {
+        // We use a range input to avoid having to re-invent accessibility handling on
+        // a custom set of divs.
+        return <input
+            type="range"
+            className='mx_SeekBar'
+            tabIndex={this.props.tabIndex}
+            onChange={this.onChange}
+            min={0}
+            max={1}
+            value={this.state.percentage}
+            step={0.001}
+            style={{'--fillTo': this.state.percentage} as ISeekCSS}
+            disabled={this.props.playbackPhase === PlaybackState.Decoding}
+        />;
+    }
+}
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index a8f2304fe9..8791828828 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -102,7 +102,7 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
         // At this point we should have a playable state
         return (
             <span className="mx_MAudioBody">
-                <AudioPlayer playback={this.state.playback} />
+                <AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
         )
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc62868a0f..9da5a41327 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -918,8 +918,6 @@
     "Silence call": "Silence call",
     "Decline": "Decline",
     "Accept": "Accept",
-    "Pause": "Pause",
-    "Play": "Play",
     "The other party cancelled the verification.": "The other party cancelled the verification.",
     "Verified!": "Verified!",
     "You've successfully verified this user.": "You've successfully verified this user.",
@@ -1870,7 +1868,7 @@
     "Ignored attempt to disable encryption": "Ignored attempt to disable encryption",
     "Encryption not enabled": "Encryption not enabled",
     "The encryption used by this room isn't supported.": "The encryption used by this room isn't supported.",
-    "Error decrypting audio": "Error decrypting audio",
+    "Error processing audio message": "Error processing audio message",
     "React": "React",
     "Edit": "Edit",
     "Retry": "Retry",
@@ -2602,6 +2600,9 @@
     "Use email or phone to optionally be discoverable by existing contacts.": "Use email or phone to optionally be discoverable by existing contacts.",
     "Use email to optionally be discoverable by existing contacts.": "Use email to optionally be discoverable by existing contacts.",
     "Sign in with SSO": "Sign in with SSO",
+    "Unnamed audio": "Unnamed audio",
+    "Pause": "Pause",
+    "Play": "Play",
     "Couldn't load page": "Couldn't load page",
     "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
     "You must join the room to see its files": "You must join the room to see its files",

From e4eeafd4852a2669c51ec465c740a4152fc3d0ac Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 21 Feb 2021 18:02:34 +0100
Subject: [PATCH 231/358] migrate the message context menu to
 IconizedContextMenu

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/_components.scss                      |   1 -
 .../context_menus/_MessageContextMenu.scss    |  30 ---
 .../views/context_menus/MessageContextMenu.js | 172 ++++++++++++------
 .../views/messages/MessageActionBar.js        |  17 +-
 4 files changed, 124 insertions(+), 96 deletions(-)
 delete mode 100644 res/css/views/context_menus/_MessageContextMenu.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index ec3af8655e..77f13437a2 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -57,7 +57,6 @@
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
-@import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
deleted file mode 100644
index 2ecb93e734..0000000000
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-Copyright 2015, 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.
-*/
-
-.mx_MessageContextMenu {
-    padding: 6px;
-}
-
-.mx_MessageContextMenu_field {
-    display: block;
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
-    font-weight: bold;
-}
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index eef10c995a..f0ee2cb259 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -22,13 +22,13 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import { MenuItem } from "../../structures/ContextMenu";
+import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
@@ -257,55 +257,62 @@ export default class MessageContextMenu extends React.Component {
         let externalURLButton;
         let quoteButton;
         let collapseReplyThread;
+        const optionLists = [];
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
-                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
+                        onClick={this.onResendReactionsClick}
+                    />
                 );
             }
         }
 
         if (isSent && this.state.canRedact) {
             redactButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Remove') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Remove")}
+                    onClick={this.onRedactClick}
+                />
             );
         }
 
         if (isContentActionable(mxEvent)) {
             forwardButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                    { _t('Forward Message') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Forward Message")}
+                    onClick={this.onForwardClick}
+                />
             );
 
             if (this.state.canPin) {
                 pinButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        onClick={this.onPinClick}
+                    />
                 );
             }
         }
 
         const viewSourceButton = (
-            <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                { _t('View Source') }
-            </MenuItem>
+            <IconizedContextMenuOption
+                label={_t("View Source")}
+                onClick={this.onViewSourceClick}
+            />
         );
 
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        { _t('Unhide Preview') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={_t("Unhide Preview")}
+                        onClick={this.onUnhidePreviewClick}
+                    />
                 );
             }
         }
@@ -316,77 +323,130 @@ export default class MessageContextMenu extends React.Component {
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <MenuItem
-                element="a"
-                className="mx_MessageContextMenu_field"
+            <IconizedContextMenuOption
                 onClick={this.onPermalinkClick}
+                label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
+                    ? _t('Share Permalink') : _t('Share Message') }
+                element="a"
                 href={permalink}
                 target="_blank"
                 rel="noreferrer noopener"
-            >
-                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
-            </MenuItem>
+            />
         );
 
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-                    { _t('Quote') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Quote")}
+                    onClick={this.onQuoteClick}
+                />
             );
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
         if (
-            typeof(mxEvent.event.content.external_url) === "string" &&
+            typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <MenuItem
+                <IconizedContextMenuOption
+                    onClick={this.closeMenu}
+                    label={ _t('Source URL') }
                     element="a"
-                    className="mx_MessageContextMenu_field"
                     target="_blank"
                     rel="noreferrer noopener"
-                    onClick={this.closeMenu}
                     href={mxEvent.event.content.external_url}
-                >
-                    { _t('Source URL') }
-                </MenuItem>
+                />
             );
         }
 
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
-                    { _t('Collapse Reply Thread') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Collapse Reply Thread")}
+                    onClick={this.onCollapseReplyThreadClick}
+                />
             );
         }
 
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
-                    { _t('Report Content') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Report Content")}
+                    onClick={this.onReportEventClick}
+                />
             );
         }
 
+        if (forwardButton || quoteButton || collapseReplyThread) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {quoteButton}
+                    {forwardButton}
+                    {collapseReplyThread}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (resendReactionsButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {resendReactionsButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (externalURLButton || permalinkButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {externalURLButton}
+                    {permalinkButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (pinButton || unhidePreviewButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {pinButton}
+                    {unhidePreviewButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (reportEventButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {reportEventButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (viewSourceButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {viewSourceButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (redactButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList red>
+                    {redactButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
         return (
-            <div className="mx_MessageContextMenu">
-                { resendReactionsButton }
-                { redactButton }
-                { forwardButton }
-                { pinButton }
-                { viewSourceButton }
-                { unhidePreviewButton }
-                { permalinkButton }
-                { quoteButton }
-                { externalURLButton }
-                { collapseReplyThread }
-                { reportEventButton }
-            </div>
+            <IconizedContextMenu
+                {...this.props}
+                className="mx_MessageContextMenu"
+                compact={true}
+            >
+                {optionLists}
+            </IconizedContextMenu>
         );
     }
 }
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 37737519ce..3d434e0ee2 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -48,15 +48,14 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         const replyThread = getReplyThread && getReplyThread();
 
         const buttonRect = button.current.getBoundingClientRect();
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
-            <MessageContextMenu
-                mxEvent={mxEvent}
-                permalinkCreator={permalinkCreator}
-                eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
-                collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
-                onFinished={closeMenu}
-            />
-        </ContextMenu>;
+        contextMenu = <MessageContextMenu
+            {...aboveLeftOf(buttonRect)}
+            mxEvent={mxEvent}
+            permalinkCreator={permalinkCreator}
+            eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
+            collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
+            onFinished={closeMenu}
+        />;
     }
 
     return <React.Fragment>

From 62efea7e1995e95e54512e48daebb4f472ac0b95 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 23 Feb 2021 18:49:11 +0100
Subject: [PATCH 232/358] add message context menu icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/_components.scss                      |  1 +
 .../context_menus/_MessageContextMenu.scss    | 71 +++++++++++++++++++
 res/img/element-icons/message/chevron-up.svg  |  1 +
 .../element-icons/message/corner-up-right.svg |  1 +
 res/img/element-icons/message/link.svg        |  1 +
 res/img/element-icons/message/repeat.svg      |  1 +
 res/img/element-icons/message/share.svg       |  1 +
 .../views/context_menus/MessageContextMenu.js | 11 +++
 8 files changed, 88 insertions(+)
 create mode 100644 res/css/views/context_menus/_MessageContextMenu.scss
 create mode 100644 res/img/element-icons/message/chevron-up.svg
 create mode 100644 res/img/element-icons/message/corner-up-right.svg
 create mode 100644 res/img/element-icons/message/link.svg
 create mode 100644 res/img/element-icons/message/repeat.svg
 create mode 100644 res/img/element-icons/message/share.svg

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 77f13437a2..ec3af8655e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -57,6 +57,7 @@
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
+@import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
new file mode 100644
index 0000000000..d4f5913064
--- /dev/null
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -0,0 +1,71 @@
+.mx_MessageContextMenu {
+
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: block;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_MessageContextMenu_iconCollapse::before {
+        mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
+    }
+
+    .mx_MessageContextMenu_iconReport::before {
+        mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+    }
+
+    .mx_MessageContextMenu_iconLink::before {
+        mask-image: url('$(res)/img/element-icons/message/link.svg');
+    }
+
+    .mx_MessageContextMenu_iconPermalink::before {
+        mask-image: url('$(res)/img/element-icons/message/share.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnhidePreview::before {
+        mask-image: url('$(res)/img/feather-customised/eye.svg');
+    }
+
+    .mx_MessageContextMenu_iconForward::before {
+        mask-image: url('$(res)/img/element-icons/message/corner-up-right.svg');
+    }
+
+    .mx_MessageContextMenu_iconCancel::before {
+        mask-image: url('$(res)/img/cancel.svg');
+    }
+
+    .mx_MessageContextMenu_iconRedact::before {
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+    }
+
+    .mx_MessageContextMenu_iconResend::before {
+        mask-image: url('$(res)/img/element-icons/message/repeat.svg');
+    }
+
+    .mx_MessageContextMenu_iconSource::before {
+        mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
+    }
+
+    .mx_MessageContextMenu_iconQuote::before {
+        mask-image: url('$(res)/img/format/quote.svg');
+    }
+
+    .mx_MessageContextMenu_iconPin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnpin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin.svg');
+    }
+}
diff --git a/res/img/element-icons/message/chevron-up.svg b/res/img/element-icons/message/chevron-up.svg
new file mode 100644
index 0000000000..4eb5ecc33e
--- /dev/null
+++ b/res/img/element-icons/message/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/corner-up-right.svg b/res/img/element-icons/message/corner-up-right.svg
new file mode 100644
index 0000000000..0b8f961b7b
--- /dev/null
+++ b/res/img/element-icons/message/corner-up-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/link.svg b/res/img/element-icons/message/link.svg
new file mode 100644
index 0000000000..c89dd41c23
--- /dev/null
+++ b/res/img/element-icons/message/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/repeat.svg b/res/img/element-icons/message/repeat.svg
new file mode 100644
index 0000000000..c7657b08ed
--- /dev/null
+++ b/res/img/element-icons/message/repeat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/share.svg b/res/img/element-icons/message/share.svg
new file mode 100644
index 0000000000..df38c14d63
--- /dev/null
+++ b/res/img/element-icons/message/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index f0ee2cb259..c3f634231b 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -265,6 +265,7 @@ export default class MessageContextMenu extends React.Component {
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconResend"
                         label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
                         onClick={this.onResendReactionsClick}
                     />
@@ -275,6 +276,7 @@ export default class MessageContextMenu extends React.Component {
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconRedact"
                     label={_t("Remove")}
                     onClick={this.onRedactClick}
                 />
@@ -284,6 +286,7 @@ export default class MessageContextMenu extends React.Component {
         if (isContentActionable(mxEvent)) {
             forwardButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconForward"
                     label={_t("Forward Message")}
                     onClick={this.onForwardClick}
                 />
@@ -292,6 +295,7 @@ export default class MessageContextMenu extends React.Component {
             if (this.state.canPin) {
                 pinButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconPin"
                         label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                         onClick={this.onPinClick}
                     />
@@ -301,6 +305,7 @@ export default class MessageContextMenu extends React.Component {
 
         const viewSourceButton = (
             <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
                 label={_t("View Source")}
                 onClick={this.onViewSourceClick}
             />
@@ -310,6 +315,7 @@ export default class MessageContextMenu extends React.Component {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconUnhidePreview"
                         label={_t("Unhide Preview")}
                         onClick={this.onUnhidePreviewClick}
                     />
@@ -324,6 +330,7 @@ export default class MessageContextMenu extends React.Component {
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
             <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
                 label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
                     ? _t('Share Permalink') : _t('Share Message') }
@@ -337,6 +344,7 @@ export default class MessageContextMenu extends React.Component {
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconQuote"
                     label={_t("Quote")}
                     onClick={this.onQuoteClick}
                 />
@@ -350,6 +358,7 @@ export default class MessageContextMenu extends React.Component {
         ) {
             externalURLButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconLink"
                     onClick={this.closeMenu}
                     label={ _t('Source URL') }
                     element="a"
@@ -363,6 +372,7 @@ export default class MessageContextMenu extends React.Component {
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconCollapse"
                     label={_t("Collapse Reply Thread")}
                     onClick={this.onCollapseReplyThreadClick}
                 />
@@ -373,6 +383,7 @@ export default class MessageContextMenu extends React.Component {
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconReport"
                     label={_t("Report Content")}
                     onClick={this.onReportEventClick}
                 />

From 74f61795eb47dce50a1ae4b0a7b20d0d637557a1 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 23 Feb 2021 19:06:01 +0100
Subject: [PATCH 233/358] add _MessageContextMenu.scss license header

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/_MessageContextMenu.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index d4f5913064..fdce390b17 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
+
+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.
+*/
+
 .mx_MessageContextMenu {
 
     .mx_IconizedContextMenu_icon {

From 8f6904ec1bc51efb678ae8e3609cfb843715a048 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Wed, 24 Feb 2021 18:52:50 +0100
Subject: [PATCH 234/358] tweak the message menu cancel icon size

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/views/context_menus/_MessageContextMenu.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index fdce390b17..c22518387a 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -58,7 +58,12 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconCancel::before {
+        height: 12px;
+        left: 2px;
         mask-image: url('$(res)/img/cancel.svg');
+        position: relative;
+        top: 2px;
+        width: 12px;
     }
 
     .mx_MessageContextMenu_iconRedact::before {

From ffca23344ac7e329e89168e74d4ed6998a579d99 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 12:41:34 +0200
Subject: [PATCH 235/358] tweak context menu order

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index c3f634231b..ffb974f7f6 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -392,7 +392,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (forwardButton || quoteButton || collapseReplyThread) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group1'}>
                     {quoteButton}
                     {forwardButton}
                     {collapseReplyThread}
@@ -402,7 +402,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (resendReactionsButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group2'}>
                     {resendReactionsButton}
                 </IconizedContextMenuOptionList>
             ));
@@ -410,25 +410,16 @@ export default class MessageContextMenu extends React.Component {
 
         if (externalURLButton || permalinkButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group3'}>
                     {externalURLButton}
                     {permalinkButton}
                 </IconizedContextMenuOptionList>
             ));
         }
 
-        if (pinButton || unhidePreviewButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList>
-                    {pinButton}
-                    {unhidePreviewButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
         if (reportEventButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group4'}>
                     {reportEventButton}
                 </IconizedContextMenuOptionList>
             ));
@@ -436,15 +427,24 @@ export default class MessageContextMenu extends React.Component {
 
         if (viewSourceButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group5'}>
                     {viewSourceButton}
                 </IconizedContextMenuOptionList>
             ));
         }
 
+        if (pinButton || unhidePreviewButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList key={'group6'}>
+                    {pinButton}
+                    {unhidePreviewButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
         if (redactButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList red>
+                <IconizedContextMenuOptionList key={'group7'} red>
                     {redactButton}
                 </IconizedContextMenuOptionList>
             ));

From 6ea79b297f5d026f4311dec9fe4c8e6cbbbb16e0 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 13:36:26 +0200
Subject: [PATCH 236/358] tweak message context icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../context_menus/_MessageContextMenu.scss    | 19 +++++--------------
 res/img/element-icons/message/fwd.svg         |  3 +++
 res/img/element-icons/warning-badge.svg       |  7 +++----
 3 files changed, 11 insertions(+), 18 deletions(-)
 create mode 100644 res/img/element-icons/message/fwd.svg

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index c22518387a..4900488bb8 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -38,7 +38,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconReport::before {
-        mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+        mask-image: url('$(res)/img/element-icons/warning-badge.svg');
     }
 
     .mx_MessageContextMenu_iconLink::before {
@@ -46,7 +46,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
-        mask-image: url('$(res)/img/element-icons/message/share.svg');
+        mask-image: url('$(res)/img/element-icons/room/share.svg');
     }
 
     .mx_MessageContextMenu_iconUnhidePreview::before {
@@ -54,20 +54,11 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url('$(res)/img/element-icons/message/corner-up-right.svg');
-    }
-
-    .mx_MessageContextMenu_iconCancel::before {
-        height: 12px;
-        left: 2px;
-        mask-image: url('$(res)/img/cancel.svg');
-        position: relative;
-        top: 2px;
-        width: 12px;
+        mask-image: url('$(res)/img/element-icons/message/fwd.svg');
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-image: url('$(res)/img/element-icons/trashcan.svg');
     }
 
     .mx_MessageContextMenu_iconResend::before {
@@ -79,7 +70,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconQuote::before {
-        mask-image: url('$(res)/img/format/quote.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
     }
 
     .mx_MessageContextMenu_iconPin::before {
diff --git a/res/img/element-icons/message/fwd.svg b/res/img/element-icons/message/fwd.svg
new file mode 100644
index 0000000000..8bcc70d092
--- /dev/null
+++ b/res/img/element-icons/message/fwd.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
+</svg>
diff --git a/res/img/element-icons/warning-badge.svg b/res/img/element-icons/warning-badge.svg
index 1ae4e40ffe..4e2ff75679 100644
--- a/res/img/element-icons/warning-badge.svg
+++ b/res/img/element-icons/warning-badge.svg
@@ -1,5 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="8" cy="8" r="8" fill="#FF4B55"/>
-    <rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
-    <rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+    <path style="fill:#ff4b55"
+          d="M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 3c.554 0 1 .446 1 1v4c0 .554-.446 1-1 1s-1-.446-1-1V4c0-.554.446-1 1-1zm0 8c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1z"/>
 </svg>

From c2d51a115b63769ead82182bd41983ef6a324a24 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 13:40:51 +0200
Subject: [PATCH 237/358] tweak message context labels

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/views/context_menus/MessageContextMenu.js | 9 ++++-----
 src/i18n/strings/en_EN.json                              | 4 +---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index ffb974f7f6..e41f56ff2f 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -287,7 +287,7 @@ export default class MessageContextMenu extends React.Component {
             forwardButton = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconForward"
-                    label={_t("Forward Message")}
+                    label={_t("Forward")}
                     onClick={this.onForwardClick}
                 />
             );
@@ -296,7 +296,7 @@ export default class MessageContextMenu extends React.Component {
                 pinButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconPin"
-                        label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        label={ this._isPinned() ? _t('Unpin') : _t('Pin') }
                         onClick={this.onPinClick}
                     />
                 );
@@ -332,8 +332,7 @@ export default class MessageContextMenu extends React.Component {
             <IconizedContextMenuOption
                 iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
-                label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
+                label= {_t('Share')}
                 element="a"
                 href={permalink}
                 target="_blank"
@@ -352,7 +351,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (
+        if (true ||
             typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc62868a0f..faff21c2dd 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2525,12 +2525,10 @@
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
-    "Forward Message": "Forward Message",
+    "Forward Message": "Forward",
     "Unpin Message": "Unpin Message",
     "Pin Message": "Pin Message",
     "Unhide Preview": "Unhide Preview",
-    "Share Permalink": "Share Permalink",
-    "Share Message": "Share Message",
     "Source URL": "Source URL",
     "Collapse Reply Thread": "Collapse Reply Thread",
     "Clear status": "Clear status",

From 9a1be63baacd86aaad9f77ca0ee5bea43e7e7980 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 22 Jun 2021 19:51:11 +0200
Subject: [PATCH 238/358] reorder message context menu items

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js | 67 +++++--------------
 src/i18n/strings/en_EN.json                   |  2 +-
 2 files changed, 16 insertions(+), 53 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index e41f56ff2f..cd7dd91e4a 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -389,61 +389,24 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        if (forwardButton || quoteButton || collapseReplyThread) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group1'}>
-                    {quoteButton}
-                    {forwardButton}
-                    {collapseReplyThread}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (resendReactionsButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group2'}>
-                    {resendReactionsButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (externalURLButton || permalinkButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group3'}>
-                    {externalURLButton}
-                    {permalinkButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (reportEventButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group4'}>
-                    {reportEventButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (viewSourceButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group5'}>
-                    {viewSourceButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (pinButton || unhidePreviewButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group6'}>
-                    {pinButton}
-                    {unhidePreviewButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
+        optionLists.push((
+            <IconizedContextMenuOptionList key={'group1'}>
+                {quoteButton}
+                {forwardButton}
+                {pinButton}
+                {permalinkButton}
+                {reportEventButton}
+                {externalURLButton}
+                {viewSourceButton}
+                {unhidePreviewButton}
+                {resendReactionsButton}
+                {collapseReplyThread}
+            </IconizedContextMenuOptionList>
+        ));
 
         if (redactButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList key={'group7'} red>
+                <IconizedContextMenuOptionList key={'group2'} red>
                     {redactButton}
                 </IconizedContextMenuOptionList>
             ));
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index faff21c2dd..f95caeff71 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2252,7 +2252,7 @@
     "Sending": "Sending",
     "Sent": "Sent",
     "Open link": "Open link",
-    "Forward message": "Forward message",
+    "Forward": "Forward",
     "Message preview": "Message preview",
     "Search for rooms or people": "Search for rooms or people",
     "Confirm abort of host creation": "Confirm abort of host creation",

From 086042f078754d30ac047c389fb169868f663de8 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 22 Jun 2021 20:11:12 +0200
Subject: [PATCH 239/358] update message context texts and icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../context_menus/_MessageContextMenu.scss    |  7 ++--
 res/img/element-icons/warning-badge.svg       | 34 ++++++++++++++--
 .../views/context_menus/MessageContextMenu.js | 39 +++++++++----------
 src/i18n/strings/en_EN.json                   | 12 +++---
 4 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index 4900488bb8..338841cce4 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -1,4 +1,5 @@
 /*
+Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -42,7 +43,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url('$(res)/img/element-icons/message/link.svg');
+        mask-image: url('$(res)/img/element-icons/link.svg');
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -50,7 +51,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconUnhidePreview::before {
-        mask-image: url('$(res)/img/feather-customised/eye.svg');
+        mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
     }
 
     .mx_MessageContextMenu_iconForward::before {
@@ -62,7 +63,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconResend::before {
-        mask-image: url('$(res)/img/element-icons/message/repeat.svg');
+        mask-image: url('$(res)/img/element-icons/retry.svg');
     }
 
     .mx_MessageContextMenu_iconSource::before {
diff --git a/res/img/element-icons/warning-badge.svg b/res/img/element-icons/warning-badge.svg
index 4e2ff75679..1c8da9aa8e 100644
--- a/res/img/element-icons/warning-badge.svg
+++ b/res/img/element-icons/warning-badge.svg
@@ -1,4 +1,32 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
-    <path style="fill:#ff4b55"
-          d="M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 3c.554 0 1 .446 1 1v4c0 .554-.446 1-1 1s-1-.446-1-1V4c0-.554.446-1 1-1zm0 8c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1z"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   fill="none"
+   viewBox="0 0 24 24"
+   height="24"
+   width="24">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <path
+     id="path2"
+     d="M 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 z M 11.880859 5.5039062 C 12.720859 5.4439063 13.470547 6.0746875 13.560547 6.9296875 L 13.560547 7.1699219 L 13.080078 13.169922 C 13.035078 13.724922 12.570625 14.144531 12.015625 14.144531 L 11.925781 14.144531 C 11.400781 14.099531 10.996172 13.694922 10.951172 13.169922 L 10.470703 7.1699219 C 10.395703 6.3149219 11.025859 5.5639064 11.880859 5.5039062 z M 12 15.763672 C 12.729 15.763672 13.320312 16.354884 13.320312 17.083984 C 13.320313 17.812984 12.729 18.404297 12 18.404297 C 11.271 18.404297 10.679688 17.812984 10.679688 17.083984 C 10.679688 16.354884 11.271 15.763672 12 15.763672 z "
+     style="fill:#ff4b55;fill-opacity:1" />
 </svg>
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index cd7dd91e4a..b61d8b50f0 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -22,13 +22,13 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
@@ -306,7 +306,7 @@ export default class MessageContextMenu extends React.Component {
         const viewSourceButton = (
             <IconizedContextMenuOption
                 iconClassName="mx_MessageContextMenu_iconSource"
-                label={_t("View Source")}
+                label={_t("View source")}
                 onClick={this.onViewSourceClick}
             />
         );
@@ -316,7 +316,7 @@ export default class MessageContextMenu extends React.Component {
                 unhidePreviewButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconUnhidePreview"
-                        label={_t("Unhide Preview")}
+                        label={_t("Show preview")}
                         onClick={this.onUnhidePreviewClick}
                     />
                 );
@@ -351,8 +351,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (true ||
-            typeof (mxEvent.event.content.external_url) === "string" &&
+        if (typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
@@ -372,7 +371,7 @@ export default class MessageContextMenu extends React.Component {
             collapseReplyThread = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconCollapse"
-                    label={_t("Collapse Reply Thread")}
+                    label={_t("Collapse reply thread")}
                     onClick={this.onCollapseReplyThreadClick}
                 />
             );
@@ -383,7 +382,7 @@ export default class MessageContextMenu extends React.Component {
             reportEventButton = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconReport"
-                    label={_t("Report Content")}
+                    label={_t("Report")}
                     onClick={this.onReportEventClick}
                 />
             );
@@ -391,23 +390,23 @@ export default class MessageContextMenu extends React.Component {
 
         optionLists.push((
             <IconizedContextMenuOptionList key={'group1'}>
-                {quoteButton}
-                {forwardButton}
-                {pinButton}
-                {permalinkButton}
-                {reportEventButton}
-                {externalURLButton}
-                {viewSourceButton}
-                {unhidePreviewButton}
-                {resendReactionsButton}
-                {collapseReplyThread}
+                { quoteButton }
+                { forwardButton }
+                { pinButton }
+                { permalinkButton }
+                { reportEventButton }
+                { externalURLButton }
+                { unhidePreviewButton }
+                { viewSourceButton }
+                { resendReactionsButton }
+                { collapseReplyThread }
             </IconizedContextMenuOptionList>
         ));
 
         if (redactButton) {
             optionLists.push((
                 <IconizedContextMenuOptionList key={'group2'} red>
-                    {redactButton}
+                    { redactButton }
                 </IconizedContextMenuOptionList>
             ));
         }
@@ -418,7 +417,7 @@ export default class MessageContextMenu extends React.Component {
                 className="mx_MessageContextMenu"
                 compact={true}
             >
-                {optionLists}
+                { optionLists }
             </IconizedContextMenu>
         );
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f95caeff71..7e1237f1cf 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2252,7 +2252,7 @@
     "Sending": "Sending",
     "Sent": "Sent",
     "Open link": "Open link",
-    "Forward": "Forward",
+    "Forward message": "Forward message",
     "Message preview": "Message preview",
     "Search for rooms or people": "Search for rooms or people",
     "Confirm abort of host creation": "Confirm abort of host creation",
@@ -2525,12 +2525,12 @@
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
-    "Forward Message": "Forward",
-    "Unpin Message": "Unpin Message",
-    "Pin Message": "Pin Message",
-    "Unhide Preview": "Unhide Preview",
+    "Forward": "Forward",
+    "View source": "View source",
+    "Show preview": "Show preview",
     "Source URL": "Source URL",
-    "Collapse Reply Thread": "Collapse Reply Thread",
+    "Collapse reply thread": "Collapse reply thread",
+    "Report": "Report",
     "Clear status": "Clear status",
     "Update status": "Update status",
     "Set status": "Set status",

From 231b40473b991cbb58df82ea13f7466041a07d7d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 24 Jun 2021 21:22:56 +0100
Subject: [PATCH 240/358] fix the upset CI

---
 .../views/dialogs/security/CreateCrossSigningDialog.tsx    | 4 +++-
 src/stores/SetupEncryptionStore.ts                         | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
index 840390f6fb..e16dc448c5 100644
--- a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
+++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
@@ -16,6 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
+import { CrossSigningKeys } from 'matrix-js-sdk/src/client';
+
 import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import { _t } from '../../../../languageHandler';
 import Modal from '../../../../Modal';
@@ -71,7 +73,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
 
     private async queryKeyUploadAuth(): Promise<void> {
         try {
-            await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {});
+            await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {} as CrossSigningKeys);
             // We should never get here: the server should always require
             // UI auth to upload device signing keys. If we do, we upload
             // no keys which would be a no-op.
diff --git a/src/stores/SetupEncryptionStore.ts b/src/stores/SetupEncryptionStore.ts
index 88385d0399..b0a0e8f265 100644
--- a/src/stores/SetupEncryptionStore.ts
+++ b/src/stores/SetupEncryptionStore.ts
@@ -16,11 +16,12 @@ limitations under the License.
 
 import EventEmitter from 'events';
 import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import { IKeyBackupVersion } from "matrix-js-sdk/src/crypto/keybackup";
+import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/matrix";
+import { PHASE_DONE as VERIF_PHASE_DONE } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import { accessSecretStorage, AccessCancelledError } from '../SecurityManager';
-import { PHASE_DONE as VERIF_PHASE_DONE } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 export enum Phase {
     Loading = 0,
@@ -35,7 +36,7 @@ export class SetupEncryptionStore extends EventEmitter {
     private started: boolean;
     public phase: Phase;
     public verificationRequest: VerificationRequest;
-    public backupInfo: IKeyBackupVersion;
+    public backupInfo: IKeyBackupInfo;
     public keyId: string;
     public keyInfo: ISecretStorageKeyInfo;
     public hasDevicesToVerifyAgainst: boolean;

From ebb6f1b602a0f5fb0d2c799db551d4a213c11602 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Jun 2021 20:18:50 -0600
Subject: [PATCH 241/358] Add seeking and notes about clock desync

---
 res/css/views/audio_messages/_SeekBar.scss    |  2 +
 .../views/audio_messages/AudioPlayer.tsx      |  7 ++
 .../views/audio_messages/SeekBar.tsx          | 14 +++-
 src/voice/Playback.ts                         | 81 ++++++++++++++++---
 src/voice/PlaybackClock.ts                    | 56 ++++++++++++-
 5 files changed, 143 insertions(+), 17 deletions(-)

diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.scss
index 23fc0bf5db..ca3f7aa562 100644
--- a/res/css/views/audio_messages/_SeekBar.scss
+++ b/res/css/views/audio_messages/_SeekBar.scss
@@ -31,6 +31,8 @@ limitations under the License.
     outline: none; // remove blue selection border
     position: relative; // for progress bar support later on
 
+    cursor: pointer;
+
     &::-webkit-slider-thumb {
         appearance: none; // default style override
 
diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 336139e467..0767c814d8 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -41,6 +41,7 @@ interface IState {
 @replaceableComponent("views.audio_messages.AudioPlayer")
 export default class AudioPlayer extends React.PureComponent<IProps, IState> {
     private playPauseRef: RefObject<PlayPauseButton> = createRef();
+    private seekRef: RefObject<SeekBar> = createRef();
 
     constructor(props: IProps) {
         super(props);
@@ -66,6 +67,12 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
         if (ev.key === Key.SPACE) {
             ev.stopPropagation();
             this.playPauseRef.current?.toggle();
+        } else if (ev.key === Key.ARROW_LEFT) {
+            ev.stopPropagation();
+            this.seekRef.current?.left();
+        } else if (ev.key === Key.ARROW_RIGHT) {
+            ev.stopPropagation();
+            this.seekRef.current?.right();
         }
     };
 
diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx
index 2561321df3..09beed70b6 100644
--- a/src/components/views/audio_messages/SeekBar.tsx
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -46,6 +46,8 @@ interface ISeekCSS extends CSSProperties {
     '--fillTo': number;
 }
 
+const ARROW_SKIP_SECONDS = 5; // arbitrary
+
 @replaceableComponent("views.audio_messages.SeekBar")
 export default class SeekBar extends React.PureComponent<IProps, IState> {
     // We use an animation frame request to avoid overly spamming prop updates, even if we aren't
@@ -80,15 +82,21 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
     }
 
     public left() {
-        console.log("@@ LEFT");
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds - ARROW_SKIP_SECONDS);
     }
 
     public right() {
-        console.log("@@ RIGHT");
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds + ARROW_SKIP_SECONDS);
     }
 
     private onChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        console.log('@@ CHANGE', ev.target.value);
+        // Thankfully, onChange is only called when the user changes the value, not when we
+        // change the value on the component. We can use this as a reliable "skip to X" function.
+        //
+        // noinspection JSIgnoredPromiseFromCall
+        this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.clockInfo.durationSeconds);
     };
 
     public render(): ReactNode {
diff --git a/src/voice/Playback.ts b/src/voice/Playback.ts
index f1f91310b2..6a120bf924 100644
--- a/src/voice/Playback.ts
+++ b/src/voice/Playback.ts
@@ -161,16 +161,9 @@ export class Playback extends EventEmitter implements IDestroyable {
     public async play() {
         // We can't restart a buffer source, so we need to create a new one if we hit the end
         if (this.state === PlaybackState.Stopped) {
-            if (this.source) {
-                this.source.disconnect();
-                this.source.removeEventListener("ended", this.onPlaybackEnd);
-            }
-
-            this.source = this.context.createBufferSource();
-            this.source.connect(this.context.destination);
-            this.source.buffer = this.audioBuf;
-            this.source.start(); // start immediately
-            this.source.addEventListener("ended", this.onPlaybackEnd);
+            this.disconnectSource();
+            this.makeNewSourceBuffer();
+            this.source.start();
         }
 
         // We use the context suspend/resume functions because it allows us to pause a source
@@ -180,6 +173,18 @@ export class Playback extends EventEmitter implements IDestroyable {
         this.emit(PlaybackState.Playing);
     }
 
+    private disconnectSource() {
+        this.source?.disconnect();
+        this.source?.removeEventListener("ended", this.onPlaybackEnd);
+    }
+
+    private makeNewSourceBuffer() {
+        this.source = this.context.createBufferSource();
+        this.source.buffer = this.audioBuf;
+        this.source.addEventListener("ended", this.onPlaybackEnd);
+        this.source.connect(this.context.destination);
+    }
+
     public async pause() {
         await this.context.suspend();
         this.emit(PlaybackState.Paused);
@@ -194,4 +199,60 @@ export class Playback extends EventEmitter implements IDestroyable {
         if (this.isPlaying) await this.pause();
         else await this.play();
     }
+
+    public async skipTo(timeSeconds: number) {
+        // Dev note: this function talks a lot about clock desyncs. There is a clock running
+        // independently to the audio context and buffer so that accurate human-perceptible
+        // time can be exposed. The PlaybackClock class has more information, but the short
+        // version is that we need to line up the useful time (clip position) with the context
+        // time, and avoid as many deviations as possible as otherwise the user could see the
+        // wrong time, and we stop playback at the wrong time, etc.
+
+        timeSeconds = clamp(timeSeconds, 0, this.clock.durationSeconds);
+
+        // Track playing state so we don't cause seeking to start playing the track.
+        const isPlaying = this.isPlaying;
+
+        if (isPlaying) {
+            // Pause first so we can get an accurate measurement of time
+            await this.context.suspend();
+        }
+
+        // We can't simply tell the context/buffer to jump to a time, so we have to
+        // start a whole new buffer and start it from the new time offset.
+        const now = this.context.currentTime;
+        this.disconnectSource();
+        this.makeNewSourceBuffer();
+
+        // We have to resync the clock because it can get confused about where we're
+        // at in the audio clip.
+        this.clock.syncTo(now, timeSeconds);
+
+        // Always start the source to queue it up. We have to do this now (and pause
+        // quickly if we're not supposed to be playing) as otherwise the clock can desync
+        // when it comes time to the user hitting play. After a couple jumps, the user
+        // will have desynced the clock enough to be about 10-15 seconds off, while this
+        // keeps it as close to perfect as humans can perceive.
+        this.source.start(now, timeSeconds);
+
+        // Dev note: it's critical that the code gap between `this.source.start()` and
+        // `this.pause()` is as small as possible: we do not want to delay *anything*
+        // as that could cause a clock desync, or a buggy feeling as a single note plays
+        // during seeking.
+
+        if (isPlaying) {
+            // If we were playing before, continue the context so the clock doesn't desync.
+            await this.context.resume();
+        } else {
+            // As mentioned above, we'll have to pause the clip if we weren't supposed to
+            // be playing it just yet. If we didn't have this, the audio clip plays but all
+            // the states will be wrong: clock won't advance, pause state doesn't match the
+            // blaring noise leaving the user's speakers, etc.
+            //
+            // Also as mentioned, if the code gap is small enough then this should be
+            // executed immediately after the start time, leaving no feasible time for the
+            // user's speakers to play any sound.
+            await this.pause();
+        }
+    }
 }
diff --git a/src/voice/PlaybackClock.ts b/src/voice/PlaybackClock.ts
index 9c2d36923f..e3f41930de 100644
--- a/src/voice/PlaybackClock.ts
+++ b/src/voice/PlaybackClock.ts
@@ -18,7 +18,42 @@ import { SimpleObservable } from "matrix-widget-api";
 import { IDestroyable } from "../utils/IDestroyable";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-// Because keeping track of time is sufficiently complicated...
+/**
+ * Tracks accurate human-perceptible time for an audio clip, as informed
+ * by managed playback. This clock is tightly coupled with the operation
+ * of the Playback class, making assumptions about how the provided
+ * AudioContext will be used (suspended/resumed to preserve time, etc).
+ *
+ * But why do we need a clock? The AudioContext exposes time information,
+ * and so does the audio buffer, but not in a way that is useful for humans
+ * to perceive. The audio buffer time is often lagged behind the context
+ * time due to internal processing delays of the audio API. Additionally,
+ * the context's time is tracked from when it was first initialized/started,
+ * not related to positioning within the clip. However, the context time
+ * is the most accurate time we can use to determine position within the
+ * clip if we're fast enough to track the pauses and stops.
+ *
+ * As a result, we track every play, pause, stop, and seek event from the
+ * Playback class (kinda: it calls us, which is close enough to the same
+ * thing). These events are then tracked on the AudioContext time scale,
+ * with assumptions that code execution will result in negligible desync
+ * of the clock, or at least no perceptible difference in time. It's
+ * extremely important that the calling code, and the clock's own code,
+ * is extremely fast between the event happening and the clock time being
+ * tracked - anything more than a dozen milliseconds is likely to stack up
+ * poorly, leading to clock desync.
+ *
+ * Clock desync can be dangerous for the stability of the playback controls:
+ * if the clock thinks the user is somewhere else in the clip, it could
+ * inform the playback of the wrong place in time, leading to dead air in
+ * the output or, if severe enough, a clock that won't stop running while
+ * the audio is paused/stopped. Other examples include the clip stopping at
+ * 90% time due to playback ending, the clip playing from the wrong spot
+ * relative to the time, and negative clock time.
+ *
+ * Note that the clip duration is fed to the clock: this is to ensure that
+ * we have the most accurate time possible to present.
+ */
 export class PlaybackClock implements IDestroyable {
     private clipStart = 0;
     private stopped = true;
@@ -41,6 +76,12 @@ export class PlaybackClock implements IDestroyable {
     }
 
     public get timeSeconds(): number {
+        // The modulo is to ensure that we're only looking at the most recent clip
+        // time, as the context is long-running and multiple plays might not be
+        // informed to us (if the control is looping, for example). By taking the
+        // remainder of the division operation, we're assuming that playback is
+        // incomplete or stopped, thus giving an accurate position within the active
+        // clip segment.
         return (this.context.currentTime - this.clipStart) % this.clipDuration;
     }
 
@@ -49,7 +90,7 @@ export class PlaybackClock implements IDestroyable {
     }
 
     private checkTime = () => {
-        const now = this.timeSeconds;
+        const now = this.timeSeconds; // calculated dynamically
         if (this.lastCheck !== now) {
             this.observable.update([now, this.durationSeconds]);
             this.lastCheck = now;
@@ -82,8 +123,9 @@ export class PlaybackClock implements IDestroyable {
         }
 
         if (!this.timerId) {
-            // case to number because the types are wrong
-            // 100ms interval to make sure the time is as accurate as possible
+            // cast to number because the types are wrong
+            // 100ms interval to make sure the time is as accurate as possible without
+            // being overly insane
             this.timerId = <number><any>setInterval(this.checkTime, 100);
         }
     }
@@ -92,6 +134,12 @@ export class PlaybackClock implements IDestroyable {
         this.stopped = true;
     }
 
+    public syncTo(contextTime: number, clipTime: number) {
+        this.clipStart = contextTime - clipTime;
+        this.stopped = false; // count as a mid-stream pause (if we were stopped)
+        this.checkTime();
+    }
+
     public destroy() {
         this.observable.close();
         if (this.timerId) clearInterval(this.timerId);

From c5a72ee6ad1c75307132ffe063450c77f77d51f7 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Jun 2021 20:26:40 -0600
Subject: [PATCH 242/358] Fix arrow seeking

---
 .../views/audio_messages/AudioPlayer.tsx         | 16 ++++++++++++----
 .../views/audio_messages/PlayPauseButton.tsx     |  4 ++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 0767c814d8..2f74c7b069 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -63,10 +63,13 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
         this.setState({ playbackPhase: ev });
     };
 
-    private onKeyPress = (ev: React.KeyboardEvent) => {
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        // stopPropagation() prevents the FocusComposer catch-all from triggering,
+        // but we need to do it on key down instead of press (even though the user
+        // interaction is typically on press).
         if (ev.key === Key.SPACE) {
             ev.stopPropagation();
-            this.playPauseRef.current?.toggle();
+            this.playPauseRef.current?.toggleState();
         } else if (ev.key === Key.ARROW_LEFT) {
             ev.stopPropagation();
             this.seekRef.current?.left();
@@ -87,7 +90,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
     public render(): ReactNode {
         // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
         // events for accessibility
-        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
+        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyDown={this.onKeyDown}>
             <div className='mx_AudioPlayer_primaryContainer'>
                 <PlayPauseButton
                     playback={this.props.playback}
@@ -107,7 +110,12 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                 </div>
             </div>
             <div className='mx_AudioPlayer_seek'>
-                <SeekBar playback={this.props.playback} tabIndex={-1} playbackPhase={this.state.playbackPhase} />
+                <SeekBar
+                    playback={this.props.playback}
+                    tabIndex={-1} // prevent tabbing into the bar
+                    playbackPhase={this.state.playbackPhase}
+                    ref={this.seekRef}
+                />
                 <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
             </div>
         </div>
diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
index 7d881a10e5..a4f1e770f2 100644
--- a/src/components/views/audio_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -42,10 +42,10 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
 
     private onClick = () => {
         // noinspection JSIgnoredPromiseFromCall
-        this.toggle();
+        this.toggleState();
     };
 
-    public async toggle() {
+    public async toggleState() {
         await this.props.playback.toggle();
     }
 

From dd53c25706757e5d373bc7bcedf19f9a2470ddee Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Jun 2021 20:37:34 -0600
Subject: [PATCH 243/358] Fix right panel sizing

---
 res/css/views/audio_messages/_AudioPlayer.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
index 2d3777aeca..3f02e54aab 100644
--- a/res/css/views/audio_messages/_AudioPlayer.scss
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_AudioPlayer_container {
     padding: 16px 12px 11px 12px;
-    width: 267px;
+    max-width: 267px; // use max to make the control fit in the files/pinned panels
 
     .mx_AudioPlayer_primaryContainer {
         display: flex;

From d724af600ff47555b1e108056b9bb383b5aab9dc Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Jun 2021 20:41:00 -0600
Subject: [PATCH 244/358] Remove copy/paste fails

---
 src/components/views/audio_messages/SeekBar.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx
index 09beed70b6..ed07c44482 100644
--- a/src/components/views/audio_messages/SeekBar.tsx
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -15,14 +15,8 @@ limitations under the License.
 */
 
 import { Playback, PlaybackState } from "../../../voice/Playback";
-import React, { ChangeEvent, createRef, CSSProperties, ReactNode, RefObject } from "react";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import PlayPauseButton from "./PlayPauseButton";
+import React, { ChangeEvent, CSSProperties, ReactNode } from "react";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { formatBytes } from "../../../utils/FormattingUtils";
-import DurationClock from "./DurationClock";
-import { Key } from "../../../Keyboard";
-import { _t } from "../../../languageHandler";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
 import { percentageOf } from "../../../utils/numbers";
 

From 76caba0385ee5b333552a7457fd66823e937b668 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 00:10:32 -0600
Subject: [PATCH 245/358] Restore mx_VoiceMessagePrimaryContainer class

---
 src/components/views/rooms/VoiceRecordComposerTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index d956a3febf..036a345af0 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -177,7 +177,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         // only other UI is the recording-in-progress UI
-        return <div className="mx_MediaBody mx_VoiceRecordComposerTile_recording">
+        return <div className="mx_MediaBody mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
             <LiveRecordingClock recorder={this.state.recorder} />
             <LiveRecordingWaveform recorder={this.state.recorder} />
         </div>;

From e0a73a583e5f11ed3b42382c7f90b8554873e5dd Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 00:19:57 -0600
Subject: [PATCH 246/358] Increase clickable area of seek bar

---
 res/css/views/audio_messages/_SeekBar.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.scss
index ca3f7aa562..602ce94916 100644
--- a/res/css/views/audio_messages/_SeekBar.scss
+++ b/res/css/views/audio_messages/_SeekBar.scss
@@ -29,7 +29,7 @@ limitations under the License.
     height: 1px;
     background: $quaternary-fg-color;
     outline: none; // remove blue selection border
-    position: relative; // for progress bar support later on
+    position: relative; // for before+after pseudo elements later on
 
     cursor: pointer;
 
@@ -88,4 +88,16 @@ limitations under the License.
     &:disabled {
         opacity: 0.5;
     }
+
+    // Increase clickable area for the slider (approximately same size as browser default)
+    // We do it this way to keep the same padding and margins of the element, avoiding margin math.
+    // Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
+    &:after {
+        content: '';
+        position: absolute;
+        top: -6px;
+        bottom: -6px;
+        left: 0;
+        right: 0;
+    }
 }

From 7a6ee7d91896f234a54a4def20a3bdba57acb04f Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 00:22:05 -0600
Subject: [PATCH 247/358] I know how CSS works.

---
 res/css/views/audio_messages/_SeekBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.scss
index 602ce94916..d13fe4ac6a 100644
--- a/res/css/views/audio_messages/_SeekBar.scss
+++ b/res/css/views/audio_messages/_SeekBar.scss
@@ -92,7 +92,7 @@ limitations under the License.
     // Increase clickable area for the slider (approximately same size as browser default)
     // We do it this way to keep the same padding and margins of the element, avoiding margin math.
     // Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
-    &:after {
+    &::after {
         content: '';
         position: absolute;
         top: -6px;

From 2b9e2e2e851db76e7570bf074c8ba31d72aa51d9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 10:41:13 +0100
Subject: [PATCH 248/358] Fix private space creation setting an alias anyway

---
 src/components/views/spaces/SpaceCreateMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 2d096e1b9f..0a92bd2dbf 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -129,7 +129,9 @@ const SpaceCreateMenu = ({ onFinished }) => {
                         events_default: 100,
                         ...Visibility.Public ? { invite: 0 } : {},
                     },
-                    room_alias_name: alias ? alias.substr(1, alias.indexOf(":") - 1) : undefined,
+                    room_alias_name: visibility === Visibility.Public && alias
+                        ? alias.substr(1, alias.indexOf(":") - 1)
+                        : undefined,
                     topic,
                 },
                 spinner: false,

From 5facee56b0789fc343fe54a0e9d3b3e6f67cfaa3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 10:41:45 +0100
Subject: [PATCH 249/358] Fix space settings using join rule private instead of
 invite

---
 .../views/settings/tabs/room/SecurityRoomSettingsTab.tsx      | 3 +++
 src/components/views/spaces/SpaceSettingsVisibilityTab.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index bb7e194253..16c620ad84 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -33,6 +33,9 @@ export enum JoinRule {
     Public = "public",
     Knock = "knock",
     Invite = "invite",
+    /**
+     * @deprecated Reserved. Should not be used.
+     */
     Private = "private",
 }
 
diff --git a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
index 263823603b..f27b73a511 100644
--- a/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
@@ -62,9 +62,9 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
     const userId = cli.getUserId();
 
     const [visibility, setVisibility] = useLocalEcho<SpaceVisibility>(
-        () => space.getJoinRule() === JoinRule.Private ? SpaceVisibility.Private : SpaceVisibility.Unlisted,
+        () => space.getJoinRule() === JoinRule.Invite ? SpaceVisibility.Private : SpaceVisibility.Unlisted,
         visibility => cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, {
-            join_rule: visibility === SpaceVisibility.Unlisted ? JoinRule.Public : JoinRule.Private,
+            join_rule: visibility === SpaceVisibility.Unlisted ? JoinRule.Public : JoinRule.Invite,
         }, ""),
         () => setError(_t("Failed to update the visibility of this space")),
     );

From 1c8e24023ef32320dbb9f64c6ed62d04928e27a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 11:00:27 +0100
Subject: [PATCH 250/358] Fix space preview for when user cannot join the space

---
 src/components/structures/SpaceRoomView.tsx | 90 ++++++++++++---------
 1 file changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index aad770888b..a91c47b067 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -14,58 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {RefObject, useContext, useRef, useState} from "react";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {EventSubscription} from "fbemitter";
+import React, { RefObject, useContext, useRef, useState } from "react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { Preset } from "matrix-js-sdk/src/@types/partials";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventSubscription } from "fbemitter";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import RoomAvatar from "../views/avatars/RoomAvatar";
-import {_t} from "../../languageHandler";
+import { _t } from "../../languageHandler";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomName from "../views/elements/RoomName";
 import RoomTopic from "../views/elements/RoomTopic";
 import InlineSpinner from "../views/elements/InlineSpinner";
-import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
-import {useRoomMembers} from "../../hooks/useRoomMembers";
-import createRoom, {IOpts} from "../../createRoom";
+import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
+import { useRoomMembers } from "../../hooks/useRoomMembers";
+import createRoom, { IOpts } from "../../createRoom";
 import Field from "../views/elements/Field";
-import {useEventEmitter} from "../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../hooks/useEventEmitter";
 import withValidation from "../views/elements/Validation";
 import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import {Action} from "../../dispatcher/actions";
+import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
 import ResizeNotifier from "../../utils/ResizeNotifier"
 import MainSplit from './MainSplit';
 import ErrorBoundary from "../views/elements/ErrorBoundary";
-import {ActionPayload} from "../../dispatcher/payloads";
+import { ActionPayload } from "../../dispatcher/payloads";
 import RightPanel from "./RightPanel";
 import RightPanelStore from "../../stores/RightPanelStore";
-import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
-import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
-import {useStateArray} from "../../hooks/useStateArray";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import { SetRightPanelPhasePayload } from "../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { useStateArray } from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
-import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
-import {showRoom, SpaceHierarchy} from "./SpaceRoomDirectory";
+import { shouldShowSpaceSettings, showAddExistingRooms, showCreateNewRoom, showSpaceSettings } from "../../utils/space";
+import { showRoom, SpaceHierarchy } from "./SpaceRoomDirectory";
 import MemberAvatar from "../views/avatars/MemberAvatar";
-import {useStateToggle} from "../../hooks/useStateToggle";
+import { useStateToggle } from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
 import FacePile from "../views/elements/FacePile";
-import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
-import {ChevronFace, ContextMenuButton, useContextMenu} from "./ContextMenu";
+import { AddExistingToSpace } from "../views/dialogs/AddExistingToSpaceDialog";
+import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../views/context_menus/IconizedContextMenu";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import {BetaPill} from "../views/beta/BetaCard";
+import { BetaPill } from "../views/beta/BetaCard";
 import { UserTab } from "../views/dialogs/UserSettingsDialog";
 import SettingsStore from "../../settings/SettingsStore";
-import dis from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
 import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../SdkConfig";
-import { Preset } from "matrix-js-sdk/src/@types/partials";
+import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
+import { JoinRule } from "../views/settings/tabs/room/SecurityRoomSettingsTab";
 
 interface IProps {
     space: Room;
@@ -178,6 +180,9 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
 
     const spacesEnabled = SettingsStore.getValue("feature_spaces");
 
+    const cannotJoin = getEffectiveMembership(myMembership) === EffectiveMembership.Leave
+        && space.getJoinRule() !== JoinRule.Public;
+
     let inviterSection;
     let joinButtons;
     if (myMembership === "join") {
@@ -244,7 +249,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                     setBusy(true);
                     onJoinButtonClicked();
                 }}
-                disabled={!spacesEnabled}
+                disabled={!spacesEnabled || cannotJoin}
             >
                 { _t("Join") }
             </AccessibleButton>
@@ -255,6 +260,30 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         joinButtons = <InlineSpinner />;
     }
 
+    let footer;
+    if (!spacesEnabled) {
+        footer = <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
+            { myMembership === "join"
+                ? _t("To view %(spaceName)s, turn on the <a>Spaces beta</a>", {
+                    spaceName: space.name,
+                }, {
+                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
+                })
+                : _t("To join %(spaceName)s, turn on the <a>Spaces beta</a>", {
+                    spaceName: space.name,
+                }, {
+                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
+                })
+            }
+        </div>;
+    } else if (cannotJoin) {
+        footer = <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
+            { _t("To view %(spaceName)s, you need an invite", {
+                spaceName: space.name,
+            }) }
+        </div>;
+    }
+
     return <div className="mx_SpaceRoomView_preview">
         <BetaPill onClick={onBetaClick} />
         { inviterSection }
@@ -274,20 +303,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>
-        { !spacesEnabled && <div className="mx_SpaceRoomView_preview_spaceBetaPrompt">
-            { myMembership === "join"
-                ? _t("To view %(spaceName)s, turn on the <a>Spaces beta</a>", {
-                    spaceName: space.name,
-                }, {
-                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
-                })
-                : _t("To join %(spaceName)s, turn on the <a>Spaces beta</a>", {
-                    spaceName: space.name,
-                }, {
-                    a: sub => <AccessibleButton onClick={onBetaClick} kind="link">{ sub }</AccessibleButton>,
-                })
-            }
-        </div> }
+        { footer }
     </div>;
 };
 

From a8649ca0915b873991077f92f61dfde8852eab00 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 11:02:33 +0100
Subject: [PATCH 251/358] i18n

---
 src/i18n/strings/en_EN.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc62868a0f..d87781ea14 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2767,6 +2767,7 @@
     "<inviter/> invites you": "<inviter/> invites you",
     "To view %(spaceName)s, turn on the <a>Spaces beta</a>": "To view %(spaceName)s, turn on the <a>Spaces beta</a>",
     "To join %(spaceName)s, turn on the <a>Spaces beta</a>": "To join %(spaceName)s, turn on the <a>Spaces beta</a>",
+    "To view %(spaceName)s, you need an invite": "To view %(spaceName)s, you need an invite",
     "Welcome to <name/>": "Welcome to <name/>",
     "Random": "Random",
     "Support": "Support",

From 620e14eb4bc0c530181ea60ba5eb9797fc783462 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 11:10:37 +0100
Subject: [PATCH 252/358] Fix space avatar management layout being broken

---
 res/css/views/spaces/_SpaceBasicSettings.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss
index 68e8723f11..c73e0715dd 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.scss
@@ -73,7 +73,7 @@ limitations under the License.
         }
     }
 
-    .mx_AccessibleButton {
+    .mx_AccessibleButton_hasKind {
         padding: 8px 22px;
         margin-left: auto;
         display: block;

From a8e2c1bc2a9a8f4ab7850ca540ac6162c3e740fc Mon Sep 17 00:00:00 2001
From: Andrew Morgan <1342360+anoadragon453@users.noreply.github.com>
Date: Fri, 25 Jun 2021 11:45:15 +0100
Subject: [PATCH 253/358] Move the dial pad button next to Explore button from
 Create Room context menu  (#6237)

This commit moves the dial pad from a context menu to sit right by the explore button, in line with the designs in the linked issue. The dial pad button is only shown when PSTN support is detected.
---
 res/css/structures/_LeftPanel.scss      | 29 +++++++++++++
 res/img/element-icons/call/dialpad.svg  |  3 ++
 src/components/structures/LeftPanel.tsx | 25 ++++++++++-
 src/components/views/rooms/RoomList.tsx | 57 ++-----------------------
 src/i18n/strings/en_EN.json             |  3 +-
 5 files changed, 60 insertions(+), 57 deletions(-)
 create mode 100644 res/img/element-icons/call/dialpad.svg

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index c7dd678c07..f254ca3226 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -111,6 +111,29 @@ $roomListCollapsedWidth: 68px;
                 }
             }
 
+            .mx_LeftPanel_dialPadButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $roomlist-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $secondary-fg-color;
+                }
+            }
+
             .mx_LeftPanel_exploreButton {
                 width: 32px;
                 height: 32px;
@@ -185,6 +208,12 @@ $roomListCollapsedWidth: 68px;
                 flex-direction: column;
                 justify-content: center;
 
+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;
diff --git a/res/img/element-icons/call/dialpad.svg b/res/img/element-icons/call/dialpad.svg
new file mode 100644
index 0000000000..a97e80aa0b
--- /dev/null
+++ b/res/img/element-icons/call/dialpad.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14.25C5.175 14.25 4.5 14.925 4.5 15.75C4.5 16.575 5.175 17.25 6 17.25C6.825 17.25 7.5 16.575 7.5 15.75C7.5 14.925 6.825 14.25 6 14.25ZM1.5 0.75C0.675 0.75 0 1.425 0 2.25C0 3.075 0.675 3.75 1.5 3.75C2.325 3.75 3 3.075 3 2.25C3 1.425 2.325 0.75 1.5 0.75ZM1.5 5.25C0.675 5.25 0 5.925 0 6.75C0 7.575 0.675 8.25 1.5 8.25C2.325 8.25 3 7.575 3 6.75C3 5.925 2.325 5.25 1.5 5.25ZM1.5 9.75C0.675 9.75 0 10.425 0 11.25C0 12.075 0.675 12.75 1.5 12.75C2.325 12.75 3 12.075 3 11.25C3 10.425 2.325 9.75 1.5 9.75ZM10.5 3.75C11.325 3.75 12 3.075 12 2.25C12 1.425 11.325 0.75 10.5 0.75C9.675 0.75 9 1.425 9 2.25C9 3.075 9.675 3.75 10.5 3.75ZM6 9.75C5.175 9.75 4.5 10.425 4.5 11.25C4.5 12.075 5.175 12.75 6 12.75C6.825 12.75 7.5 12.075 7.5 11.25C7.5 10.425 6.825 9.75 6 9.75ZM10.5 9.75C9.675 9.75 9 10.425 9 11.25C9 12.075 9.675 12.75 10.5 12.75C11.325 12.75 12 12.075 12 11.25C12 10.425 11.325 9.75 10.5 9.75ZM10.5 5.25C9.675 5.25 9 5.925 9 6.75C9 7.575 9.675 8.25 10.5 8.25C11.325 8.25 12 7.575 12 6.75C12 5.925 11.325 5.25 10.5 5.25ZM6 5.25C5.175 5.25 4.5 5.925 4.5 6.75C4.5 7.575 5.175 8.25 6 8.25C6.825 8.25 7.5 7.575 7.5 6.75C7.5 5.925 6.825 5.25 6 5.25ZM6 0.75C5.175 0.75 4.5 1.425 4.5 2.25C4.5 3.075 5.175 3.75 6 3.75C6.825 3.75 7.5 3.075 7.5 2.25C7.5 1.425 6.825 0.75 6 0.75Z" fill="#737D8C"/>
+</svg>
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index af22db1350..dec4e4c13e 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -24,6 +24,7 @@ import CustomRoomTagPanel from "./CustomRoomTagPanel";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import RoomList from "../views/rooms/RoomList";
+import CallHandler from "../../CallHandler";
 import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import UserMenu from "./UserMenu";
@@ -124,6 +125,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         this.setState({ activeSpace });
     };
 
+    private onDialPad = () => {
+        dis.fire(Action.OpenDialPad);
+    }
+
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
     };
@@ -397,7 +402,20 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     }
 
-    private renderSearchExplore(): React.ReactNode {
+    private renderSearchDialExplore(): React.ReactNode {
+        let dialPadButton = null;
+
+        // If we have dialer support, show a button to bring up the dial pad
+        // to start a new call
+        if (CallHandler.sharedInstance().getSupportsPstnProtocol()) {
+            dialPadButton =
+                <AccessibleTooltipButton
+                    className={classNames("mx_LeftPanel_dialPadButton", {})}
+                    onClick={this.onDialPad}
+                    title={_t("Open dial pad")}
+                />;
+        }
+
         return (
             <div
                 className="mx_LeftPanel_filterContainer"
@@ -410,6 +428,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     onKeyDown={this.onKeyDown}
                     onSelectRoom={this.selectRoom}
                 />
+
+                {dialPadButton}
+
                 <AccessibleTooltipButton
                     className={classNames("mx_LeftPanel_exploreButton", {
                         mx_LeftPanel_exploreButton_space: !!this.state.activeSpace,
@@ -458,7 +479,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
-                    {this.renderSearchExplore()}
+                    {this.renderSearchDialExplore()}
                     {this.renderBreadcrumbs()}
                     <RoomListNumResults onVisibilityChange={this.refreshStickyHeaders} />
                     <div className="mx_LeftPanel_roomListWrapper">
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 0b79f7b52e..eb50224a60 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -45,7 +45,6 @@ import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
 import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
 import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
-import CallHandler from "../../../CallHandler";
 import SpaceStore, {ISuggestedRoom, SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
 import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
@@ -103,38 +102,6 @@ interface ITagAestheticsMap {
     [tagId: TagID]: ITagAesthetics;
 }
 
-// If we have no dialer support, we just show the create chat dialog
-const dmOnAddRoom = (dispatcher?: Dispatcher<ActionPayload>) => {
-    (dispatcher || defaultDispatcher).dispatch({action: 'view_create_chat'});
-};
-
-// If we have dialer support, show a context menu so the user can pick between
-// the dialer and the create chat dialog
-const dmAddRoomContextMenu = (onFinished: () => void) => {
-    return <IconizedContextMenuOptionList first>
-        <IconizedContextMenuOption
-            label={_t("Start a Conversation")}
-            iconClassName="mx_RoomList_iconPlus"
-            onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onFinished();
-                defaultDispatcher.dispatch({action: "view_create_chat"});
-            }}
-        />
-        <IconizedContextMenuOption
-            label={_t("Open dial pad")}
-            iconClassName="mx_RoomList_iconDialpad"
-            onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onFinished();
-                defaultDispatcher.fire(Action.OpenDialPad);
-            }}
-        />
-    </IconizedContextMenuOptionList>;
-};
-
 const TAG_AESTHETICS: ITagAestheticsMap = {
     [DefaultTagID.Invite]: {
         sectionLabel: _td("Invites"),
@@ -151,8 +118,9 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         isInvite: false,
         defaultHidden: false,
         addRoomLabel: _td("Start chat"),
-        // Either onAddRoom or addRoomContextMenu are set depending on whether we
-        // have dialer support.
+        onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
+            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_chat'});
+        },
     },
     [DefaultTagID.Untagged]: {
         sectionLabel: _td("Rooms"),
@@ -271,7 +239,6 @@ function customTagAesthetics(tagId: TagID): ITagAesthetics {
 export default class RoomList extends React.PureComponent<IProps, IState> {
     private dispatcherRef;
     private customTagStoreRef;
-    private tagAesthetics: ITagAestheticsMap;
     private roomStoreToken: fbEmitter.EventSubscription;
 
     constructor(props: IProps) {
@@ -282,10 +249,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
             suggestedRooms: SpaceStore.instance.suggestedRooms,
         };
-
-        // shallow-copy from the template as we need to make modifications to it
-        this.tagAesthetics = objectShallowClone(TAG_AESTHETICS);
-        this.updateDmAddRoomAction();
     }
 
     public componentDidMount(): void {
@@ -311,17 +274,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         });
     };
 
-    private updateDmAddRoomAction() {
-        const dmTagAesthetics = objectShallowClone(TAG_AESTHETICS[DefaultTagID.DM]);
-        if (CallHandler.sharedInstance().getSupportsPstnProtocol()) {
-            dmTagAesthetics.addRoomContextMenu = dmAddRoomContextMenu;
-        } else {
-            dmTagAesthetics.onAddRoom = dmOnAddRoom;
-        }
-
-        this.tagAesthetics[DefaultTagID.DM] = dmTagAesthetics;
-    }
-
     private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.ViewRoomDelta) {
             const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
@@ -335,7 +287,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 });
             }
         } else if (payload.action === Action.PstnSupportUpdated) {
-            this.updateDmAddRoomAction();
             this.updateLists();
         }
     };
@@ -524,7 +475,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
                 const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
                     ? customTagAesthetics(orderedTagId)
-                    : this.tagAesthetics[orderedTagId];
+                    : TAG_AESTHETICS[orderedTagId];
                 if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
                 // The cost of mounting/unmounting this component offsets the cost
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc62868a0f..35f4500bb7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1581,8 +1581,6 @@
     "Search": "Search",
     "Voice call": "Voice call",
     "Video call": "Video call",
-    "Start a Conversation": "Start a Conversation",
-    "Open dial pad": "Open dial pad",
     "Invites": "Invites",
     "Favourites": "Favourites",
     "People": "People",
@@ -2661,6 +2659,7 @@
     "Explore Public Rooms": "Explore Public Rooms",
     "Create a Group Chat": "Create a Group Chat",
     "Upgrade to %(hostSignupBrand)s": "Upgrade to %(hostSignupBrand)s",
+    "Open dial pad": "Open dial pad",
     "Failed to reject invitation": "Failed to reject invitation",
     "Cannot create rooms in this community": "Cannot create rooms in this community",
     "You do not have permission to create rooms in this community.": "You do not have permission to create rooms in this community.",

From 3f104205036446eb87f2fca93e0df5699ed99088 Mon Sep 17 00:00:00 2001
From: libexus <Asterixeins324@gmail.com>
Date: Mon, 21 Jun 2021 18:35:35 +0000
Subject: [PATCH 254/358] Translated using Weblate (German)

Currently translated at 99.6% (2983 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 90530b5b07..2cc68125d7 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -1211,7 +1211,7 @@
     "Send messages": "Nachrichten senden",
     "Invite users": "Benutzer einladen",
     "Change settings": "Einstellungen ändern",
-    "Kick users": "Benutzer rauswerfen",
+    "Kick users": "Benutzer kicken",
     "Ban users": "Benutzer verbannen",
     "Remove messages": "Nachrichten löschen",
     "Notify everyone": "Jeden benachrichtigen",
@@ -1723,7 +1723,7 @@
     "Uploaded sound": "Hochgeladener Ton",
     "Upgrade this room to the recommended room version": "Aktualisiere diesen Raum auf die empfohlene Raumversion",
     "this room": "Dieser Raum",
-    "View older messages in %(roomName)s.": "Zeige alte Nachrichten in %(roomName)s.",
+    "View older messages in %(roomName)s.": "Alte Nachrichten in %(roomName)s anzeigen.",
     "Send a bug report with logs": "Einen Fehlerbericht mit der Protokolldatei senden",
     "Verify all your sessions to ensure your account & messages are safe": "Verifiziere alle deine Sitzungen, um dein Konto und deine Nachrichten zu schützen",
     "Verify your other session using one of the options below.": "Verifiziere deine andere Sitzung mit einer der folgenden Optionen.",
@@ -3242,7 +3242,7 @@
     "Confirm abort of host creation": "Bestätige das Beenden der Host-Erstellung",
     "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Soll die Host-Erstellung wirklich beendet werden? Dieser Prozess kann nicht wieder fortgesetzt werden.",
     "Invite to just this room": "Nur in diesen Raum einladen",
-    "Consult first": "Konsultiere zuerst",
+    "Consult first": "Zuerst Anfragen",
     "Reset event store?": "Ereignisspeicher zurück setzen?",
     "You most likely do not want to reset your event index store": "Es ist wahrscheinlich, dass du den Ereignis-Indexspeicher nicht zurück setzen möchtest",
     "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few momentswhilst the index is recreated": "Falls du dies tust, werden keine deiner Nachrichten gelöscht. Allerdings wird die Such-Funktion eine Weile lang schlecht funktionieren, bis der Index wieder hergestellt ist",
@@ -3256,7 +3256,7 @@
     "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Du bist die einzige Person hier. Wenn du ihn jetzt verlässt, ist er für immer verloren (eine lange Zeit).",
     "Edit settings relating to your space.": "Einstellungen vom Space bearbeiten.",
     "Please choose a strong password": "Bitte gib ein sicheres Passwort ein",
-    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Wenn du alles zurücksetzt, gehen alle verifizierten Anmeldungen, Benutzer und verschlüsselte Nachrichten verloren.",
+    "If you reset everything, you will restart with no trusted sessions, no trusted users, and might not be able to see past messages.": "Wenn du alles zurücksetzt, gehen alle verifizierten Anmeldungen, Benutzer und vergangenen Nachrichten verloren.",
     "Only do this if you have no other device to complete verification with.": "Verwende es nur, wenn du kein Gerät, mit dem du dich verifizieren, kannst bei dir hast.",
     "Reset everything": "Alles zurücksetzen",
     "Forgotten or lost all recovery methods? <a>Reset all</a>": "Hast du alle Wiederherstellungsmethoden vergessen? <a>Setze sie hier zurück</a>",
@@ -3282,12 +3282,12 @@
     "If you do, please note that none of your messages will be deleted, but the search experience might be degraded for a few moments whilst the index is recreated": "Falls du es wirklich willst: Es werden keine Nachrichten gelöscht. Außerdem wird die Suche, während der Index erstellt wird, etwas langsamer sein",
     "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s Mitglieder inklusive %(commaSeparatedMembers)s",
     "Including %(commaSeparatedMembers)s": "Inklusive%(commaSeparatedMembers)s",
-    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Beratung mit %(transferTarget)s. <a>Übertragung zu %(transferee)s</a>",
+    "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "%(transferTarget)s wird angefragt. <a>Übertragung zu %(transferee)s</a>",
     "Play": "Abspielen",
     "Pause": "Pause",
     "What do you want to organise?": "Was willst du organisieren?",
     "Enter your Security Phrase a second time to confirm it.": "Gib dein Kennwort ein zweites Mal zur Bestätigung ein.",
-    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Wähle Räume oder Konversationen die Du hinzufügen möchtest. Dieser Bereich ist nur für Dich, niemand wird informiert. Du kannst später mehr hinzufügen.",
+    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Wähle Räume oder Konversationen die du hinzufügen willst. Dieser Space ist nur für dich, niemand wird informiert. Du kannst später mehr hinzufügen.",
     "Filter all spaces": "Alle Spaces durchsuchen",
     "Delete recording": "Aufnahme löschen",
     "Stop the recording": "Aufnahme stoppen",
@@ -3349,7 +3349,7 @@
     "Currently joining %(count)s rooms|other": "Betrete %(count)s Räume",
     "Go to my space": "Zu meinem Space",
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Überprüfe auf Tippfehler oder verwende andere Suchbegriffe. Beachte, dass Ergebnisse aus privaten Räumen, in die du nicht eingeladen wurdest, nicht angezeigt werden.",
-    "See when people join, leave, or are invited to this room": "Anzeigen, wenn Leute eingeladen werden oder den Raum betreten und verlassen",
+    "See when people join, leave, or are invited to this room": "Anzeigen, wenn Leute eingeladen werden, den Raum betreten oder verlassen",
     "The user you called is busy.": "Der angerufene Benutzer ist momentan beschäftigt.",
     "User Busy": "Benutzer beschäftigt",
     "No results for \"%(query)s\"": "Keine Ergebnisse für \"%(query)s\"",
@@ -3368,5 +3368,7 @@
     "Pinned messages": "Angeheftete Nachrichten",
     "Nothing pinned, yet": "Es ist nichts angepinnt. Noch nicht.",
     "End-to-end encryption isn't enabled": "Ende-zu-Ende-Verschlüsselung ist deaktiviert",
-    "See when people join, leave, or are invited to your active room": "Anzeigen, wenn Leute den aktuellen Raum betreten, verlassen oder in ihn eingeladen werden"
+    "See when people join, leave, or are invited to your active room": "Anzeigen, wenn Leute den aktuellen Raum betreten, verlassen oder in ihn eingeladen werden",
+    "Teammates might not be able to view or join any private rooms you make.": "Mitglieder werden private Räume möglicherweise weder sehen noch betreten können.",
+    "Error - Mixed content": "Fehler - Uneinheitlicher Inhalt"
 }

From 2ff45339f756b34dcab4aaa2c428c80b85f77d24 Mon Sep 17 00:00:00 2001
From: Thibault Martin <mail@thibaultmart.in>
Date: Thu, 24 Jun 2021 07:15:18 +0000
Subject: [PATCH 255/358] Translated using Weblate (French)

Currently translated at 100.0% (2993 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/
---
 src/i18n/strings/fr.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index e199e094e7..16373f0853 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -3358,5 +3358,22 @@
     "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Essayez d'autres mots ou vérifiez les fautes de frappe. Certains salons peuvent ne pas être visibles car ils sont privés et vous devez être invité pour les rejoindre.",
     "No results for \"%(query)s\"": "Aucun résultat pour « %(query)s »",
     "The user you called is busy.": "L’utilisateur que vous avez appelé est indisponible.",
-    "User Busy": "Utilisateur indisponible"
+    "User Busy": "Utilisateur indisponible",
+    "We're working on this as part of the beta, but just want to let you know.": "Nous travaillons sur cette partie en bêta, mais nous voulions vous en faire part.",
+    "Teammates might not be able to view or join any private rooms you make.": "Votre équipe pourrait ne pas voir ou rejoindre les salons privés que vous créez.",
+    "Or send invite link": "Ou envoyer le lien d’invitation",
+    "If you can't see who you’re looking for, send them your invite link below.": "Si vous ne trouvez pas la personne que vous cherchez, envoyez leur le lien d’invitation ci-dessous.",
+    "Some suggestions may be hidden for privacy.": "Certaines suggestions pourraient être masquées pour votre confidentialité.",
+    "Search for rooms or people": "Rechercher des salons ou des gens",
+    "Forward message": "Transférer le message",
+    "Open link": "Ouvrir le lien",
+    "Sent": "Envoyé",
+    "You don't have permission to do this": "Vous n’avez pas les permissions nécessaires pour effectuer cette action",
+    "Error - Mixed content": "Erreur - Contenu mixte",
+    "Error loading Widget": "Erreur lors du chargement du widget",
+    "Pinned messages": "Messages épinglés",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Si vous avez les permissions, ouvrez le menu de n’importe quel message et sélectionnez <b>Épingler</b> pour les afficher ici.",
+    "Nothing pinned, yet": "Rien d’épinglé, pour l’instant",
+    "End-to-end encryption isn't enabled": "Le chiffrement de bout en bout n’est pas activé",
+    "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites. <a>Enable encryption in settings.</a>": "Vous messages privés sont normalement chiffrés, mais ce salon ne l’est pas. Ceci est souvent du à un appareil ou une méthode qui ne le prend pas en charge, comme les invitations par e-mail. <a>Activer le chiffrement dans les paramètres.</a>"
 }

From 628c91485bfc5f79e04bc341e8139d2e3998c569 Mon Sep 17 00:00:00 2001
From: rkfg <rkfg@rkfg.me>
Date: Thu, 24 Jun 2021 13:11:53 +0000
Subject: [PATCH 256/358] Translated using Weblate (Russian)

Currently translated at 94.9% (2842 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/
---
 src/i18n/strings/ru.json | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json
index da42347b49..91b9919d0a 100644
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -272,7 +272,7 @@
     "Server may be unavailable, overloaded, or you hit a bug.": "Возможно, сервер недоступен, перегружен или случилась ошибка.",
     "Server unavailable, overloaded, or something else went wrong.": "Возможно, сервер недоступен, перегружен или что-то еще пошло не так.",
     "Session ID": "ID сессии",
-    "%(senderName)s set a profile picture.": "%(senderName)s установил себе аватар.",
+    "%(senderName)s set a profile picture.": "%(senderName)s установил(а) себе аватар.",
     "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s изменил(а) отображаемое имя на %(displayName)s.",
     "Signed Out": "Выполнен выход",
     "This room is not accessible by remote Matrix servers": "Это комната недоступна из других серверов Matrix",
@@ -853,7 +853,7 @@
     "Sets the room name": "Устанавливает название комнаты",
     "Forces the current outbound group session in an encrypted room to be discarded": "Принудительно отбрасывает текущую групповую сессию для отправки сообщений в зашифрованную комнату",
     "%(senderDisplayName)s upgraded this room.": "%(senderDisplayName)s модернизировал эту комнату.",
-    "%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s установил %(address)s в качестве главного адреса комнаты.",
+    "%(senderName)s set the main address for this room to %(address)s.": "%(senderName)s установил(а) %(address)s в качестве главного адреса комнаты.",
     "%(senderName)s removed the main address for this room.": "%(senderName)s удалил главный адрес комнаты.",
     "%(displayName)s is typing …": "%(displayName)s печатает…",
     "%(names)s and %(count)s others are typing …|other": "%(names)s и %(count)s других печатают…",
@@ -3211,5 +3211,13 @@
     "Failed to remove some rooms. Try again later": "Не удалось удалить несколько комнат. Попробуйте позже",
     "%(count)s rooms and 1 space|one": "%(count)s комната и одно пространство",
     "%(count)s rooms and 1 space|other": "%(count)s комнат и одно пространство",
-    "Sends the given message as a spoiler": "Отправить данное сообщение под спойлером"
+    "Sends the given message as a spoiler": "Отправить данное сообщение под спойлером",
+    "Play": "Воспроизведение",
+    "Pause": "Пауза",
+    "Connecting": "Подключение",
+    "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Разрешить прямые соединения для вызовов 1:1 (при включении данной опции другая сторона может узнать ваш IP адрес)",
+    "Send and receive voice messages": "Отправлять и получать голосовые сообщения",
+    "%(deviceId)s from %(ip)s": "%(deviceId)s с %(ip)s",
+    "The user you called is busy.": "Вызываемый пользователь занят.",
+    "User Busy": "Пользователь занят"
 }

From 037ac3ce8d40758384e5fee28bd61398ec0be5b6 Mon Sep 17 00:00:00 2001
From: m4sk1n <me@m4sk.in>
Date: Tue, 22 Jun 2021 12:55:01 +0000
Subject: [PATCH 257/358] Translated using Weblate (Polish)

Currently translated at 73.2% (2193 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/pl/
---
 src/i18n/strings/pl.json | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/pl.json b/src/i18n/strings/pl.json
index 51ba733cfa..641247e6ee 100644
--- a/src/i18n/strings/pl.json
+++ b/src/i18n/strings/pl.json
@@ -2352,5 +2352,21 @@
     "Converts the room to a DM": "Zmienia pokój w wiadomość bezpośrednią",
     "Sends the given message as a spoiler": "Wysyła podaną wiadomość jako spoiler",
     "User Busy": "Użytkownik zajęty",
-    "The user you called is busy.": "Użytkownik do którego zadzwoniłeś(-aś) jest zajęty."
+    "The user you called is busy.": "Użytkownik do którego zadzwoniłeś(-aś) jest zajęty.",
+    "End-to-end encryption isn't enabled": "Szyfrowanie end-to-end nie jest włączone",
+    "Nothing pinned, yet": "Nie przypięto tu jeszcze niczego",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Jeżeli masz uprawnienia, przejdź do menu dowolnej wiadomości i wybierz <b>Przypnij</b>, aby przyczepić ją tutaj.",
+    "Pinned messages": "Przypięte wiadomości",
+    "Error loading Widget": "Błąd ładowania widżetu",
+    "Error - Mixed content": "Błąd — zawartość mieszana",
+    "You don't have permission to do this": "Nie masz uprawnień aby to zrobić",
+    "Sent": "Wysłano",
+    "Open link": "Otwórz odnośnik",
+    "Forward message": "Przekaż wiadomość",
+    "Message preview": "Podgląd wiadomości",
+    "Search for rooms or people": "Szukaj pokojów i ludzi",
+    "Some suggestions may be hidden for privacy.": "Niektóre propozycje mogą być ukryte z uwagi na prywatność.",
+    "If you can't see who you’re looking for, send them your invite link below.": "Jeżeli nie możesz zobaczyć osób, których szukasz, wyślij im poniższy odnośnik z zaproszeniem.",
+    "Or send invite link": "Lub wyślij odnośnik z zaproszeniem",
+    "We're working on this as part of the beta, but just want to let you know.": "Pracujemy nad tym w ramach bety, ale chcemy, żebyś wiedział(a)."
 }

From 213cd3903033d7d9acade30462cb2a51f82f97e7 Mon Sep 17 00:00:00 2001
From: Kaede <contact+element_translations@kaede.ch>
Date: Wed, 23 Jun 2021 16:50:14 +0000
Subject: [PATCH 258/358] Translated using Weblate (Japanese)

Currently translated at 77.5% (2322 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ja/
---
 src/i18n/strings/ja.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/ja.json b/src/i18n/strings/ja.json
index 495e240051..180d63f33e 100644
--- a/src/i18n/strings/ja.json
+++ b/src/i18n/strings/ja.json
@@ -2502,5 +2502,6 @@
     "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "部屋や会話を追加できます。これはあなた専用のスペースで、他の人からは見えません。後から部屋や会話を追加することもできます。",
     "Support": "サポート",
     "You can change these anytime.": "ここで入力した情報はいつでも編集できます。",
-    "Add some details to help people recognise it.": "情報を入力してください。"
+    "Add some details to help people recognise it.": "情報を入力してください。",
+    "View dev tools": "開発者ツールを表示"
 }

From 4ce5df2fb52caa43a489d67935eed1a7002d29dc Mon Sep 17 00:00:00 2001
From: Ridhubharan <ridhudon@gmail.com>
Date: Tue, 22 Jun 2021 17:24:23 +0000
Subject: [PATCH 259/358] Translated using Weblate (Tamil)

Currently translated at 6.7% (202 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ta/
---
 src/i18n/strings/ta.json | 86 ++++++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/i18n/strings/ta.json b/src/i18n/strings/ta.json
index 4f87230ef3..9dc89b1b94 100644
--- a/src/i18n/strings/ta.json
+++ b/src/i18n/strings/ta.json
@@ -21,7 +21,7 @@
     "Enable email notifications": "மின்னஞ்சல் அறிவிப்புகளை ஏதுவாக்கு",
     "Enable notifications for this account": "இந்த கணக்கிற்கான அறிவிப்புகளை ஏதுவாக்கு",
     "Enable them now": "இப்போது அவற்றை ஏதுவாக்கு",
-    "Error": "கோளாறு",
+    "Error": "பிழை",
     "Failed to add tag %(tagName)s to room": "%(tagName)s எனும் குறிச்சொல்லை அறையில் சேர்ப்பதில் தோல்வி",
     "Failed to change settings": "அமைப்புகள் மாற்றத்தில் தோல்வி",
     "Failed to forget room %(errCode)s": "அறையை மறப்பதில் தோல்வி %(errCode)s",
@@ -125,17 +125,17 @@
     "Register": "பதிவு செய்",
     "Rooms": "அறைகள்",
     "Add rooms to this community": "அறைகளை இந்த சமூகத்தில் சேர்க்கவும்",
-    "This email address is already in use": "இந்த மின் அஞ்சல் முகவரி ஏற்கனவே பயன்பாட்டில் உள்ளது",
-    "This phone number is already in use": "இந்த தொலைபேசி எண் ஏற்கனவே பயன்பாட்டில் உள்ளது",
-    "Failed to verify email address: make sure you clicked the link in the email": "மின்னஞ்சல் முகவரியைச் சரிபார்க்கத் தவறிவிட்டது: மின்னஞ்சலில் உள்ள இணைப்பைக் கிளிக் செய்துள்ளீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்",
+    "This email address is already in use": "இந்த மின்னஞ்சல் முகவரி முன்னதாகவே பயன்பாட்டில் உள்ளது",
+    "This phone number is already in use": "இந்த தொலைபேசி எண் முன்னதாகவே பயன்பாட்டில் உள்ளது",
+    "Failed to verify email address: make sure you clicked the link in the email": "மின்னஞ்சல் முகவரியை சரிபார்க்க முடியவில்லை: மின்னஞ்சலில் உள்ள இணைப்பை அழுத்தியுள்ளீர்களா என்பதை உறுதிப்படுத்தவும்",
     "The platform you're on": "நீங்கள் இருக்கும் தளம்",
     "The version of %(brand)s": "%(brand)s இன் பதிப்பு",
     "Whether or not you're logged in (we don't record your username)": "நீங்கள் உள்நுழைந்திருந்தாலும் இல்லாவிட்டாலும் (உங்கள் பயனர்பெயரை நாங்கள் பதிவு செய்ய மாட்டோம்)",
     "Your language of choice": "நீங்கள் விரும்பும் மொழி",
-    "Which officially provided instance you are using, if any": "நீங்கள் பயன்படுத்தும் அதிகாரப்பூர்வமாக வழங்கப்பட்ட உதாரணம் ஏதேனும் இருந்தால்",
-    "Whether or not you're using the Richtext mode of the Rich Text Editor": "பணக்கார உரை எடிட்டரின் ரிச்ச்டெக்ஸ்ட் பயன்முறையைப் பயன்படுத்துகிறீர்களா இல்லையா",
-    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "நீங்கள் 'breadcrumbs' அம்சத்தைப் பயன்படுத்துகிறீர்களோ இல்லையோ (அறை பட்டியலுக்கு மேலே உள்ள அவதாரங்கள்)",
-    "Your homeserver's URL": "உங்கள் வீட்டு சேவையகத்தின் URL",
+    "Which officially provided instance you are using, if any": "நீங்கள் பயன்படுத்தும் அதிகாரப்பூர்வமாக வழங்கப்பட்ட நிகழ்வு ஏதேனும் இருந்தால்",
+    "Whether or not you're using the Richtext mode of the Rich Text Editor": "நீங்கள் ரிச்டெக்ஸ்ட் உரைத்திருத்தியின் ரிச்டெக்ஸ்ட் பயன்முறையைப் பயன்படுத்துகிறீர்களா இல்லையா",
+    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "நீங்கள் 'breadcrumbs' அம்சத்தைப் பயன்படுத்துகிறீர்களோ இல்லையோ (அறை பட்டியலுக்கு மேலே உள்ள பயனர் படங்கள்)",
+    "Your homeserver's URL": "உங்கள் வீட்டுச்சேவையகத்தின் URL",
     "e.g. %(exampleValue)s": "உதாரணமாக %(exampleValue)s",
     "Every page you use in the app": "பயன்பாட்டில் நீங்கள் பயன்படுத்தும் ஒவ்வொரு பக்கமும்",
     "Your %(brand)s is misconfigured": "உங்கள் %(brand)s தவறாக உள்ளமைக்கப்பட்டுள்ளது",
@@ -143,7 +143,7 @@
     "e.g. <CurrentPageURL>": "உதாரணமாக <CurrentPageURL>",
     "Your device resolution": "உங்கள் சாதனத் தீர்மானம்",
     "Analytics": "பகுப்பாய்வு",
-    "The information being sent to us to help make %(brand)s better includes:": "%(brand)s ஐ சிறப்பாகச் செய்ய எங்களுக்கு அனுப்பப்படும் தகவல்களில் பின்வருவன அடங்கும்:",
+    "The information being sent to us to help make %(brand)s better includes:": "%(brand)s ஐ சிறப்பாக்க எங்களுக்கு அனுப்பப்படும் தகவல்களில் பின்வருவன அடங்கும்:",
     "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "இந்த பக்கம் ஒரு அறை, பயனர் அல்லது குழு ஐடி போன்ற அடையாளம் காணக்கூடிய தகவல்களை உள்ளடக்கியது, அந்த தரவு சேவையகத்திற்கு அனுப்பப்படுவதற்கு முன்பு அகற்றப்படும்.",
     "Call Failed": "அழைப்பு தோல்வியுற்றது",
     "Call Timeout": "அழைப்பு நேரம் முடிந்தது",
@@ -152,19 +152,19 @@
     "Existing Call": "இருக்கும் அழைப்பு",
     "You are already in a call.": "நீங்கள் ஏற்கனவே அழைப்பில் உள்ளீர்கள்.",
     "VoIP is unsupported": "VoIP ஆதரிக்கப்படவில்லை",
-    "You cannot place VoIP calls in this browser.": "இந்த உலாவியில் நீங்கள் VoIP அழைப்புகளை வைக்க முடியாது.",
-    "You cannot place a call with yourself.": "உங்களுடன் அழைப்பை மேற்கொள்ள முடியாது.",
-    "Call in Progress": "அழைப்பு முன்னேற்றத்தில் உள்ளது",
-    "A call is currently being placed!": "தற்போது அழைப்பு வைக்கப்பட்டுள்ளது!",
+    "You cannot place VoIP calls in this browser.": "இந்த உலாவியில் நீங்கள் VoIP அழைப்புகளை மேற்கொள்ள முடியாது.",
+    "You cannot place a call with yourself.": "நீங்கள் உங்களுடனே அழைப்பை மேற்கொள்ள முடியாது.",
+    "Call in Progress": "அழைப்பு நடந்துகொண்டிருக்கிறது",
+    "A call is currently being placed!": "தற்போது ஒரு அழைப்பு செயல்படுத்தப்பட்டுள்ளது!",
     "A call is already in progress!": "அழைப்பு ஏற்கனவே செயலில் உள்ளது!",
     "Permission Required": "அனுமதி தேவை",
-    "You do not have permission to start a conference call in this room": "இந்த அறையில் ஒரு மாநாட்டு அழைப்பைத் தொடங்க உங்களுக்கு அனுமதி இல்லை",
+    "You do not have permission to start a conference call in this room": "இந்த அறையில் ஒரு கூட்டு அழைப்பைத் தொடங்க உங்களுக்கு அனுமதி இல்லை",
     "Replying With Files": "கோப்புகளுடன் பதிலளித்தல்",
     "At this time it is not possible to reply with a file. Would you like to upload this file without replying?": "இந்த நேரத்தில் ஒரு கோப்புடன் பதிலளிக்க முடியாது. பதிலளிக்காமல் இந்த கோப்பை பதிவேற்ற விரும்புகிறீர்களா?",
     "The file '%(fileName)s' failed to upload.": "'%(fileName)s' கோப்பு பதிவேற்றத் தவறிவிட்டது.",
-    "The file '%(fileName)s' exceeds this homeserver's size limit for uploads": "'%(fileName)s' கோப்பு பதிவேற்றங்களுக்கான இந்த ஹோம்சர்வரின் அளவு வரம்பை மீறுகிறது",
+    "The file '%(fileName)s' exceeds this homeserver's size limit for uploads": "'%(fileName)s' கோப்பு இந்த வீட்டுச்சேவையகத்தின் பதிவேற்றங்களுக்கான அளவு வரம்பை மீறுகிறது",
     "Upload Failed": "பதிவேற்றம் தோல்வியுற்றது",
-    "Server may be unavailable, overloaded, or you hit a bug.": "சேவையகம் கிடைக்காமல் போகலாம், அதிக சுமை அல்லது பிழையைத் தாக்கலாம்.",
+    "Server may be unavailable, overloaded, or you hit a bug.": "",
     "The server does not support the room version specified.": "குறிப்பிடப்பட்ட அறை பதிப்பை சேவையகம் ஆதரிக்கவில்லை.",
     "Failure to create room": "அறையை உருவாக்கத் தவறியது",
     "Sun": "ஞாயிறு",
@@ -181,5 +181,57 @@
     "May": "மே",
     "Jun": "ஜூன்",
     "Explore rooms": "அறைகளை ஆராயுங்கள்",
-    "Create Account": "உங்கள் கணக்கை துவங்குங்கள்"
+    "Create Account": "உங்கள் கணக்கை துவங்குங்கள்",
+    "Who would you like to add to this community?": "இந்த சமூகத்தில் யாரைச் சேர்க்க விரும்புகிறீர்கள்?",
+    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s",
+    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
+    "%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s, %(monthName)s %(day)s %(time)s",
+    "%(weekDayName)s %(time)s": "%(weekDayName)s %(time)s",
+    "AM": "காலை",
+    "PM": "மாலை",
+    "Dec": "டிசம்பர்",
+    "Nov": "நவம்பர்",
+    "Oct": "அக்டோபர்",
+    "Sep": "செப்டம்பர்",
+    "Aug": "ஆகஸ்ட்",
+    "Jul": "ஜூலை",
+    "This will end the conference for everyone. Continue?": "இது அனைவருக்கும் கூட்டு அழைப்பை நிறுத்திவிடும். தொடரவா?",
+    "End conference": "கூட்டு அழைப்பை நிறுத்து",
+    "There was an error looking up the phone number": "தொலைபேசி எண்ணைத் தேடுவதில் பிழை ஏற்பட்டது",
+    "Unable to look up phone number": "தொலைபேசி எண்ணைத் தேட முடியவில்லை",
+    "You're already in a call with this person.": "நீங்கள் முன்னதாகவே இந்த நபருடன் அழைப்பில் உள்ளீர்கள்.",
+    "Already in call": "முன்னதாகவே அழைப்பில் உள்ளது",
+    "You've reached the maximum number of simultaneous calls.": "ஒரே நேரத்தில் அழைக்கக்கூடிய அதிகபட்ச அழைப்புகளை நீங்கள் அடைந்துவிட்டீர்கள்.",
+    "Too Many Calls": "மிக அதிக அழைப்புகள்",
+    "No other application is using the webcam": "வேறு எந்த பயன்பாடும் புகைப்படக்கருவியைப் பயன்படுத்துவதில்லை",
+    "Permission is granted to use the webcam": "புகைப்படக்கருவியைப் பயன்படுத்த அனுமதி வழங்கப்பட்டுள்ளது",
+    "A microphone and webcam are plugged in and set up correctly": "ஒரு ஒலிவாங்கி மற்றும் புகைப்படக்கருவி செருகப்பட்டு சரியாக அமைக்கப்பட்டுள்ளது",
+    "Call failed because webcam or microphone could not be accessed. Check that:": "புகைப்படக்கருவி அல்லது ஒலிவாங்கியை அணுக முடியாததால் அழைப்பு தோல்வியடைந்தது. அதை சரிபார்க்கவும்:",
+    "Unable to access webcam / microphone": "புகைப்படக்கருவி / ஒலிவாங்கியை அணுக முடியவில்லை",
+    "Call failed because microphone could not be accessed. Check that a microphone is plugged in and set up correctly.": "ஒலிவாங்கியை அணுக முடியாததால் அழைப்பு தோல்வியடைந்தது. ஒலிவாங்கி செருகப்பட்டுள்ளதா, சரியாக அமைக்கவும் என சரிபார்க்கவும்.",
+    "Unable to access microphone": "ஒலிவாங்கியை அணுக முடியவில்லை",
+    "Try using turn.matrix.org": "turn.matrix.org ஐப் பயன்படுத்த முயற்சிக்கவும்",
+    "Alternatively, you can try to use the public server at <code>turn.matrix.org</code>, but this will not be as reliable, and it will share your IP address with that server. You can also manage this in Settings.": "மாற்றாக, நீங்கள் பொது சேவையகத்தை <code>turn.matrix.org</code> பயன்படுத்தி முயற்சி செய்யலாம், ஆனால் இது அவ்வளவு நம்பகமானதாக இருக்காது, மேலும் அது உங்கள் ஐபி முகவரியை அந்த சேவையகத்துடன் பகிர்ந்து கொள்ளும். இதை அமைப்புகளிலும் நிர்வகிக்கலாம்.",
+    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "அழைப்புகள் நம்பத்தகுந்த வகையில் இயங்குவதற்காக, TURN சேவையகத்தை உள்ளமைக்க உங்கள் வீட்டுசேவையகத்தின் (<code>%(homeserverDomain)s</code>) நிர்வாகியிடம் கேளுங்கள்.",
+    "Call failed due to misconfigured server": "தவறாக உள்ளமைக்கப்பட்ட சேவையகம் காரணமாக அழைப்பு தோல்வியடைந்தது",
+    "The call was answered on another device.": "அழைப்பு மற்றொரு சாதனத்தில் பதிலளிக்கப்பட்டது.",
+    "Answered Elsewhere": "வேறு எங்கோ பதிலளிக்கப்பட்டது",
+    "The call could not be established": "அழைப்பை நிறுவ முடியவில்லை",
+    "The other party declined the call.": "மற்றவர் அழைப்பை மறுத்துவிட்டார்.",
+    "Call Declined": "அழைப்பு மறுக்கப்பட்டது",
+    "Unable to load! Check your network connectivity and try again.": "ஏற்ற முடியவில்லை! உங்கள் பிணைய இணைப்பைச் சரிபார்த்து மீண்டும் முயற்சிக்கவும்.",
+    "Your user agent": "உங்கள் பயனர் முகவர்",
+    "Whether you're using %(brand)s as an installed Progressive Web App": "நிறுவப்பட்ட முற்போக்கான வலை பயன்பாடாக %(brand)s ஐப் பயன்படுத்துகிறீர்களா",
+    "Whether you're using %(brand)s on a device where touch is the primary input mechanism": "தொடுதல் உள்ளீட்டு பொறிமுறை முதன்மையாக இருக்கும் சாதனத்தில் நீங்கள் %(brand)s ஐப் பயன்படுத்துகிறீர்களா",
+    "Add Phone Number": "தொலைபேசி எண்ணை சேர்க்கவும்",
+    "Click the button below to confirm adding this phone number.": "இந்த தொலைபேசி எண்ணைச் சேர்ப்பதை உறுதிப்படுத்த கீழே உள்ள பொத்தானை அழுத்தவும்.",
+    "Confirm adding phone number": "தொலைபேசி எண்ணைச் சேர்ப்பதை உறுதிப்படுத்தவும்",
+    "Confirm adding this phone number by using Single Sign On to prove your identity.": "உங்கள் அடையாளத்தை நிரூபிக்க ஒற்றை உள்நுழைவைப் பயன்படுத்தி இந்த தொலைபேசி எண்ணைச் சேர்ப்பதை உறுதிப்படுத்தவும்.",
+    "Add Email Address": "மின்னஞ்சல் முகவரியை சேர்க்கவும்",
+    "Confirm": "உறுதிப்படுத்தவும்",
+    "Click the button below to confirm adding this email address.": "இந்த மின்னஞ்சல் முகவரியை சேர்ப்பதை உறுதிப்படுத்த கீழே உள்ள பொத்தானை அழுத்தவும்.",
+    "Confirm adding email": "மின்னஞ்சலை சேர்ப்பதை உறுதிப்படுத்தவும்",
+    "Single Sign On": "ஒற்றை உள்நுழைவு",
+    "Confirm adding this email address by using Single Sign On to prove your identity.": "உங்கள் அடையாளத்தை நிரூபிக்க ஒற்றை உள்நுழைவைப் பயன்படுத்தி இந்த மின்னஞ்சல் முகவரியை சேர்ப்பதை உறுதிப்படுத்தவும்.",
+    "Use Single Sign On to continue": "தொடர ஒற்றை உள்நுழைவைப் பயன்படுத்தவும்"
 }

From e539b91d581498049596d724ecd4767264b84a77 Mon Sep 17 00:00:00 2001
From: Andrei <abautu@gmail.com>
Date: Mon, 21 Jun 2021 13:00:38 +0000
Subject: [PATCH 260/358] Translated using Weblate (Romanian)

Currently translated at 3.6% (110 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ro/
---
 src/i18n/strings/ro.json | 40 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/ro.json b/src/i18n/strings/ro.json
index 062a89f2e3..6d0e5fe021 100644
--- a/src/i18n/strings/ro.json
+++ b/src/i18n/strings/ro.json
@@ -74,5 +74,43 @@
     "Explore rooms": "Explorează camerele",
     "Sign In": "Autentificare",
     "Create Account": "Înregistare",
-    "Dismiss": "Închide"
+    "Dismiss": "Închide",
+    "You've reached the maximum number of simultaneous calls.": "Ați atins numărul maxim de apeluri simultane.",
+    "Too Many Calls": "Prea multe apeluri",
+    "No other application is using the webcam": "Nicio altă aplicație nu folosește camera web",
+    "Permission is granted to use the webcam": "Permisiunea de a utiliza camera web este acordată",
+    "A microphone and webcam are plugged in and set up correctly": "Microfonul și camera web sunt conectate și configurate corect",
+    "Call failed because webcam or microphone could not be accessed. Check that:": "Apelul nu a reușit deoarece camera web sau microfonul nu au putut fi accesate. Verifică:",
+    "Unable to access webcam / microphone": "Imposibil de accesat camera web / microfonul",
+    "Call failed because microphone could not be accessed. Check that a microphone is plugged in and set up correctly.": "Apelul nu a reușit deoarece microfonul nu a putut fi accesat. Verificați dacă un microfon este conectat și configurați corect.",
+    "Unable to access microphone": "Nu se poate accesa microfonul",
+    "OK": "OK",
+    "Try using turn.matrix.org": "Încercați să utilizați turn.matrix.org",
+    "Alternatively, you can try to use the public server at <code>turn.matrix.org</code>, but this will not be as reliable, and it will share your IP address with that server. You can also manage this in Settings.": "Alternativ, puteți încerca să utilizați serverul public la <code>turn.matrix.org</code>, dar acest lucru nu va fi la fel de fiabil și va partaja adresa dvs. IP cu acel server. Puteți gestiona acest lucru și în Setări.",
+    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "Vă rugăm să cereți administratorului serverului dvs. (<code>%(homeserverDomain)s</code>) să configureze un server TURN pentru ca apelurile să funcționeze în mod fiabil.",
+    "Call failed due to misconfigured server": "Apelul nu a reușit din cauza serverului configurat greșit",
+    "The call was answered on another device.": "Apelul a primit răspuns pe un alt dispozitiv.",
+    "Answered Elsewhere": "A răspuns în altă parte",
+    "The call could not be established": "Apelul nu a putut fi stabilit",
+    "The user you called is busy.": "Utilizatorul pe care l-ați sunat este ocupat.",
+    "User Busy": "Utilizator ocupat",
+    "The other party declined the call.": "Cealaltă parte a refuzat apelul.",
+    "Call Declined": "Apel refuzat",
+    "Unable to load! Check your network connectivity and try again.": "Imposibil de incarcat! Verificați conectivitatea rețelei și încercați din nou.",
+    "Error": "Eroare",
+    "Your user agent": "Agentul dvs. de utilizator",
+    "Whether you're using %(brand)s as an installed Progressive Web App": "Dacă utilizați %(brand)s ca aplicație web progresivă instalată",
+    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "Dacă utilizați sau nu funcția „breadcrumbs” (avatare deasupra listei de camere)",
+    "Whether you're using %(brand)s on a device where touch is the primary input mechanism": "Dacă utilizați %(brand)s pe un dispozitiv în care atingerea este principalul mecanism de intrare",
+    "Add Phone Number": "Adaugă numărul de telefon",
+    "Click the button below to confirm adding this phone number.": "Faceți clic pe butonul de mai jos pentru a confirma adăugarea acestui număr de telefon.",
+    "Confirm adding phone number": "Confirmați adăugarea numărului de telefon",
+    "Confirm adding this phone number by using Single Sign On to prove your identity.": "Confirmați adăugarea acestui număr de telefon utilizând Single Sign On pentru a vă dovedi identitatea.",
+    "Add Email Address": "Adăugați o adresă de e-mail",
+    "Confirm": "Confirmă",
+    "Click the button below to confirm adding this email address.": "Faceți clic pe butonul de mai jos pentru a confirma adăugarea acestei adrese de e-mail.",
+    "Confirm adding email": "Confirmați adăugarea e-mailului",
+    "Single Sign On": "Single Sign On",
+    "Confirm adding this email address by using Single Sign On to prove your identity.": "Confirmați adăugarea acestei adrese de e-mail utilizând Single Sign On pentru a vă dovedi identitatea.",
+    "Use Single Sign On to continue": "Utilizați Single Sign On pentru a continua"
 }

From 39cb5a7058af6ae04ae718dc1b13ca158880c7dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Tue, 22 Jun 2021 02:53:06 +0000
Subject: [PATCH 261/358] Translated using Weblate (Estonian)

Currently translated at 99.8% (2988 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
 src/i18n/strings/et.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index 9454efd956..2b723758bc 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -2229,7 +2229,7 @@
     "Deactivate Account": "Deaktiveeri konto",
     "Discovery": "Leia kasutajaid",
     "Deactivate account": "Deaktiveeri kasutajakonto",
-    "For help with using %(brand)s, click <a>here</a>.": "Kui otsid lisateavet %(brand)s kasutamise kohta, palun vaata <a>siia</a>.",
+    "For help with using %(brand)s, click <a>here</a>.": "Kui otsid lisateavet %(brand)s'i kasutamise kohta, palun vaata <a>siia</a>.",
     "Add users and servers you want to ignore here. Use asterisks to have %(brand)s match any characters. For example, <code>@bot:*</code> would ignore all users that have the name 'bot' on any server.": "Lisa siia kasutajad ja serverid, mida sa soovid eirata. Kui soovid, et %(brand)s kasutaks üldist asendamist, siis kasuta tärni. Näiteks <code>@bot:*</code> eirab kõikide serverite kasutajat 'bot'.",
     "Use default": "Kasuta vaikimisi väärtusi",
     "Mentions & Keywords": "Mainimised ja võtmesõnad",

From 2672516b6a0626f88888155575ae107cc68df6b6 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 14:47:16 +0100
Subject: [PATCH 262/358] Upgrade puppeteer to use newer version of Chrome

---
 test/end-to-end-tests/package.json |   2 +-
 test/end-to-end-tests/yarn.lock    | 356 +++++++++++++++++------------
 2 files changed, 215 insertions(+), 143 deletions(-)

diff --git a/test/end-to-end-tests/package.json b/test/end-to-end-tests/package.json
index 8372039258..6f0c12e195 100644
--- a/test/end-to-end-tests/package.json
+++ b/test/end-to-end-tests/package.json
@@ -11,7 +11,7 @@
     "dependencies": {
         "cheerio": "^1.0.0-rc.2",
         "commander": "^2.19.0",
-        "puppeteer": "^1.14.0",
+        "puppeteer": "10.0.0",
         "request": "^2.88.0",
         "request-promise-native": "^1.0.7",
         "uuid": "^3.3.2"
diff --git a/test/end-to-end-tests/yarn.lock b/test/end-to-end-tests/yarn.lock
index bc942c4f51..985c883ad6 100644
--- a/test/end-to-end-tests/yarn.lock
+++ b/test/end-to-end-tests/yarn.lock
@@ -7,12 +7,19 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.12.1.tgz#d90123f6c61fdf2f7cddd286ddae891586dd3488"
   integrity sha512-sKDlqv6COJrR7ar0+GqqhrXQDzQlMcqMnF2iEU6m9hLo8kxozoAGUazwPyELHlRVmjsbvlnGXjnzyptSXVmceA==
 
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+"@types/yauzl@^2.9.1":
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
+  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
   dependencies:
-    es6-promisify "^5.0.0"
+    "@types/node" "*"
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
 
 ajv@^6.5.5:
   version "6.10.0"
@@ -36,11 +43,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -61,6 +63,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -68,6 +75,15 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -86,10 +102,13 @@ buffer-crc32@~0.2.3:
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
 
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+buffer@^5.2.1, buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -108,6 +127,11 @@ cheerio@^1.0.0-rc.2:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
@@ -125,17 +149,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-core-util-is@1.0.2, core-util-is@~1.0.0:
+core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
@@ -162,21 +176,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.1.0:
+debug@4, debug@4.3.1, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
   integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
@@ -188,6 +188,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+devtools-protocol@0.0.883894:
+  version "0.0.883894"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.883894.tgz#d403f2c75cd6d71c916aee8dde9258da988a4da9"
+  integrity sha512-33idhm54QJzf3Q7QofMgCvIVSd2o9H3kQPWaKT/fhoZh+digc+WSiMhbkeG3iN79WY4Hwr9G05NpbhEVrsOYAg==
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
@@ -232,37 +237,33 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 entities@^1.1.1, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-extract-zip@^1.6.6:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
-  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
+extract-zip@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
   dependencies:
-    concat-stream "^1.6.2"
-    debug "^2.6.9"
-    mkdirp "^0.5.4"
+    debug "^4.1.1"
+    get-stream "^5.1.0"
     yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
 
 extsprintf@1.3.0:
   version "1.3.0"
@@ -291,6 +292,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -305,11 +314,23 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -363,13 +384,18 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-proxy-agent@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
-  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+https-proxy-agent@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
   dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
+    agent-base "6"
+    debug "4"
+
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 inflight@^1.0.4:
   version "1.0.6"
@@ -379,7 +405,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -394,11 +420,6 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -434,6 +455,13 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash@^4.15.0, lodash@^4.17.11:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -451,11 +479,6 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "~1.38.0"
 
-mime@^2.0.3:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -468,27 +491,22 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-mkdirp@^0.5.4:
+mkdirp@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
   dependencies:
     minimist "^1.2.5"
 
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
 nth-check@~1.0.1:
   version "1.0.2"
@@ -502,13 +520,32 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
   dependencies:
     wrappy "1"
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
 parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -516,6 +553,11 @@ parse5@^3.0.1:
   dependencies:
     "@types/node" "*"
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -531,17 +573,19 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-process-nextick-args@~2.0.0:
+pkg-dir@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+progress@2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.1.tgz#c9242169342b1c29d275889c95734621b1952e31"
+  integrity sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==
 
-progress@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-proxy-from-env@^1.0.0:
+proxy-from-env@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
@@ -551,6 +595,14 @@ psl@^1.1.24, psl@^1.1.28:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
   integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==
 
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
@@ -561,38 +613,29 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-puppeteer@^1.14.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.20.0.tgz#e3d267786f74e1d87cf2d15acc59177f471bbe38"
-  integrity sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==
+puppeteer@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-10.0.0.tgz#1b597c956103e2d989ca17f41ba4693b20a3640c"
+  integrity sha512-AxHvCb9IWmmP3gMW+epxdj92Gglii+6Z4sb+W+zc2hTTu10HF0yg6hGXot5O74uYkVqG3lfDRLfnRpi6WOwi5A==
   dependencies:
-    debug "^4.1.0"
-    extract-zip "^1.6.6"
-    https-proxy-agent "^2.2.1"
-    mime "^2.0.3"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^2.6.1"
-    ws "^6.1.0"
+    debug "4.3.1"
+    devtools-protocol "0.0.883894"
+    extract-zip "2.0.1"
+    https-proxy-agent "5.0.0"
+    node-fetch "2.6.1"
+    pkg-dir "4.2.0"
+    progress "2.0.1"
+    proxy-from-env "1.1.0"
+    rimraf "3.0.2"
+    tar-fs "2.0.0"
+    unbzip2-stream "1.3.3"
+    ws "7.4.6"
 
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-readable-stream@^2.2.2:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readable-stream@^3.1.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.2.0.tgz#de17f229864c120a9f56945756e4f32c4045245d"
@@ -602,6 +645,15 @@ readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 request-promise-core@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.2.tgz#339f6aababcafdb31c799ff158700336301d3346"
@@ -644,14 +696,14 @@ request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-rimraf@^2.6.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+rimraf@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -688,12 +740,31 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+tar-fs@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.0.tgz#677700fc0c8b337a78bee3623fdc235f21d7afad"
+  integrity sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==
   dependencies:
-    safe-buffer "~5.1.0"
+    chownr "^1.1.1"
+    mkdirp "^0.5.1"
+    pump "^3.0.0"
+    tar-stream "^2.0.0"
+
+tar-stream@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
 tough-cookie@^2.3.3:
   version "2.5.0"
@@ -723,10 +794,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+unbzip2-stream@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz#d156d205e670d8d8c393e1c02ebd506422873f6a"
+  integrity sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==
+  dependencies:
+    buffer "^5.2.1"
+    through "^2.3.8"
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -735,7 +809,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -759,12 +833,10 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-ws@^6.1.0:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
-  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
-  dependencies:
-    async-limiter "~1.0.0"
+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
 yauzl@^2.10.0:
   version "2.10.0"

From 2e940b7763f3886972bbb3c6ccae68ed0f418822 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 14:47:17 +0100
Subject: [PATCH 263/358] Update res/css/structures/_RoomStatusBar.scss

Co-authored-by: Germain <germain@souquet.com>
---
 res/css/structures/_RoomStatusBar.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss
index a09aa9e3a5..de9e049165 100644
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@@ -130,7 +130,8 @@ limitations under the License.
                 mask-size: contain;
                 width: 18px;
                 height: 18px;
-                top: calc(50% - 9px); // text sizes are dynamic
+                top: 50%; // text sizes are dynamic
+                transform: translateY(-50%);
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {

From b492072e76527f5f365c77f88e144961a025ffb2 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 15:01:28 +0100
Subject: [PATCH 264/358] add required dependency in Docker image for puppeteer

---
 scripts/ci/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/ci/Dockerfile b/scripts/ci/Dockerfile
index 1d1425c865..6d33987d8c 100644
--- a/scripts/ci/Dockerfile
+++ b/scripts/ci/Dockerfile
@@ -5,4 +5,4 @@ FROM node:14-buster
 RUN apt-get update
 RUN apt-get -y install jq build-essential python3-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev uuid-runtime
 # dependencies for chrome (installed by puppeteer)
-RUN apt-get -y install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+RUN apt-get -y install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm-dev libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

From 4e6260e617b6a62c6e61cb63046c90790833e760 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 25 Jun 2021 20:01:03 +0100
Subject: [PATCH 265/358] delint

---
 src/components/views/elements/EventTilePreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 0696ee566e..332f3ac333 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -107,7 +107,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
             userId: this.props.userId,
             getAvatarUrl: (..._) => {
                 return Avatar.avatarUrlForUser(
-                    {avatarUrl: this.props.avatarUrl},
+                    { avatarUrl: this.props.avatarUrl },
                     AVATAR_SIZE, AVATAR_SIZE, "crop",
                 );
             },

From cb0d2a2c4f49e72713b743c1d5af3323c36da593 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 13:54:05 -0600
Subject: [PATCH 266/358] Encrypt the voice message file if needed

Fixes https://github.com/vector-im/element-web/issues/17729

"oops, should have done that"
---
 src/ContentMessages.tsx                       |  2 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   |  8 +++--
 src/voice/VoiceRecording.ts                   | 31 +++++++++----------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 9042d47243..7a3cf5d50f 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -307,7 +307,7 @@ function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
  *  If the file is unencrypted then the object will have a "url" key.
  *  If the file is encrypted then the object will have a "file" key.
  */
-function uploadFile(
+export function uploadFile(
     matrixClient: MatrixClient,
     roomId: string,
     file: File | Blob,
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 122ba0ca0b..248d196506 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -65,12 +65,13 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         await this.state.recorder.stop();
-        const mxc = await this.state.recorder.upload();
+        const upload = await this.state.recorder.upload(this.props.room.roomId);
         MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
             "body": "Voice message",
             //"msgtype": "org.matrix.msc2516.voice",
             "msgtype": MsgType.Audio,
-            "url": mxc,
+            "url": upload.mxc,
+            "file": upload.encrypted,
             "info": {
                 duration: Math.round(this.state.recorder.durationSeconds * 1000),
                 mimetype: this.state.recorder.contentType,
@@ -81,7 +82,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             // https://github.com/matrix-org/matrix-doc/pull/3245
             "org.matrix.msc1767.text": "Voice message",
             "org.matrix.msc1767.file": {
-                url: mxc,
+                "url": upload.mxc,
+                "file": upload.encrypted,
                 name: "Voice message.ogg",
                 mimetype: this.state.recorder.contentType,
                 size: this.state.recorder.contentLength,
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index 8f9e03bb8e..0304a297ef 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -27,6 +27,8 @@ import {PayloadEvent, WORKLET_NAME} from "./consts";
 import {UPDATE_EVENT} from "../stores/AsyncStore";
 import {Playback} from "./Playback";
 import {createAudioContext} from "./compat";
+import { IEncryptedFile } from "matrix-js-sdk/src/@types/event";
+import { uploadFile } from "../ContentMessages";
 
 const CHANNELS = 1; // stereo isn't important
 export const SAMPLE_RATE = 48000; // 48khz is what WebRTC uses. 12khz is where we lose quality.
@@ -49,6 +51,11 @@ export enum RecordingState {
     Uploaded = "uploaded",
 }
 
+export interface IUpload {
+    mxc?: string; // for unencrypted uploads
+    encrypted?: IEncryptedFile;
+}
+
 export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorder: Recorder;
     private recorderContext: AudioContext;
@@ -58,7 +65,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorderWorklet: AudioWorkletNode;
     private recorderProcessor: ScriptProcessorNode;
     private buffer = new Uint8Array(0); // use this.audioBuffer to access
-    private mxc: string;
+    private lastUpload: IUpload;
     private recording = false;
     private observable: SimpleObservable<IRecordingUpdate>;
     private amplitudes: number[] = []; // at each second mark, generated
@@ -214,13 +221,6 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         return this.buffer.length > 0;
     }
 
-    public get mxcUri(): string {
-        if (!this.mxc) {
-            throw new Error("Recording has not been uploaded yet");
-        }
-        return this.mxc;
-    }
-
     private onAudioProcess = (ev: AudioProcessingEvent) => {
         this.processAudioUpdate(ev.playbackTime);
 
@@ -290,7 +290,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     };
 
     public async start(): Promise<void> {
-        if (this.mxc || this.hasRecording) {
+        if (this.lastUpload || this.hasRecording) {
             throw new Error("Recording already prepared");
         }
         if (this.recording) {
@@ -362,20 +362,19 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         this.observable.close();
     }
 
-    public async upload(): Promise<string> {
+    public async upload(inRoomId: string): Promise<IUpload> {
         if (!this.hasRecording) {
             throw new Error("No recording available to upload");
         }
 
-        if (this.mxc) return this.mxc;
+        if (this.lastUpload) return this.lastUpload;
 
         this.emit(RecordingState.Uploading);
-        this.mxc = await this.client.uploadContent(new Blob([this.audioBuffer], {
+        const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
             type: this.contentType,
-        }), {
-            onlyContentUri: false, // to stop the warnings in the console
-        }).then(r => r['content_uri']);
+        }));
+        this.lastUpload = {mxc, encrypted};
         this.emit(RecordingState.Uploaded);
-        return this.mxc;
+        return this.lastUpload;
     }
 }

From b5bb767b8fac9bd35bafdb38a60971b6241a8eb9 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 25 Jun 2021 14:11:50 -0600
Subject: [PATCH 267/358] Appease the linter

---
 src/components/views/rooms/VoiceRecordComposerTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 248d196506..eb86737d58 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -82,8 +82,8 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             // https://github.com/matrix-org/matrix-doc/pull/3245
             "org.matrix.msc1767.text": "Voice message",
             "org.matrix.msc1767.file": {
-                "url": upload.mxc,
-                "file": upload.encrypted,
+                url: upload.mxc,
+                file: upload.encrypted,
                 name: "Voice message.ogg",
                 mimetype: this.state.recorder.contentType,
                 size: this.state.recorder.contentLength,

From 3c6612df93a77013805bce7755cb0a9e44e5a383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 26 Jun 2021 07:53:42 +0200
Subject: [PATCH 268/358] Fix hyper-precise presence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/rooms/PresenceLabel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/PresenceLabel.tsx b/src/components/views/rooms/PresenceLabel.tsx
index abedb394b5..be324a8437 100644
--- a/src/components/views/rooms/PresenceLabel.tsx
+++ b/src/components/views/rooms/PresenceLabel.tsx
@@ -41,11 +41,11 @@ export default class PresenceLabel extends React.Component<IProps> {
     // XXX: This would be better handled using a culture-aware library, but we don't use one yet.
     private getDuration(time: number): string {
         if (!time) return;
-        const t = time / 1000;
+        const t = Math.round(time / 1000);
         const s = t % 60;
-        const m = t / 60 % 60;
-        const h = t / (60 * 60) % 24;
-        const d = t / (60 * 60 * 24);
+        const m = Math.round(t / 60) % 60;
+        const h = Math.round(t / (60 * 60)) % 24;
+        const d = Math.round(t / (60 * 60 * 24));
         if (t < 60) {
             if (t < 0) {
                 return _t("%(duration)ss", { duration: 0 });

From c16228b8ca3f10c4bc27bf950a12c1bbaddf3a40 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 28 Jun 2021 01:22:05 -0600
Subject: [PATCH 269/358] Update src/voice/VoiceRecording.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/voice/VoiceRecording.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index 0304a297ef..2243d49873 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -373,7 +373,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
             type: this.contentType,
         }));
-        this.lastUpload = {mxc, encrypted};
+        this.lastUpload = { mxc, encrypted };
         this.emit(RecordingState.Uploaded);
         return this.lastUpload;
     }

From d669f55b60677294dbf779731b0d07b20dbfa484 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 28 Jun 2021 08:52:15 +0100
Subject: [PATCH 270/358] Make toast dismiss button less prominent

---
 src/components/views/toasts/GenericToast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index 45b65ae1fb..d84f03dfc0 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -50,7 +50,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
             {detailContent}
         </div>
         <div className="mx_Toast_buttons" aria-live="off">
-            {onReject && rejectLabel && <AccessibleButton kind="danger" onClick={onReject}>
+            {onReject && rejectLabel && <AccessibleButton kind="danger_outline" onClick={onReject}>
                 { rejectLabel }
             </AccessibleButton> }
             <AccessibleButton onClick={onAccept} kind="primary">

From 96857ab7f7b1bd1b07e7e09e884da5d186d03687 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 28 Jun 2021 09:01:04 +0100
Subject: [PATCH 271/358] Fix end-to-end tests rejectToast

---
 test/end-to-end-tests/src/usecases/toasts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/end-to-end-tests/src/usecases/toasts.js b/test/end-to-end-tests/src/usecases/toasts.js
index db78352f2b..d739f3b4ea 100644
--- a/test/end-to-end-tests/src/usecases/toasts.js
+++ b/test/end-to-end-tests/src/usecases/toasts.js
@@ -40,7 +40,7 @@ async function acceptToast(session, expectedTitle) {
 
 async function rejectToast(session, expectedTitle) {
     await assertToast(session, expectedTitle);
-    const btn = await session.query('.mx_Toast_buttons .mx_AccessibleButton_kind_danger');
+    const btn = await session.query('.mx_Toast_buttons .mx_AccessibleButton_kind_danger_outline');
     await btn.click();
 }
 

From 652e06a7b1e9be44c67afd8c3afda53d0a9fbb3e Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 28 Jun 2021 09:24:35 +0100
Subject: [PATCH 272/358] remove cancelAnimationFrame complexity and rely on
 MarkedExecution class

---
 .../voice_messages/LiveRecordingClock.tsx     | 26 +++++++------------
 .../voice_messages/LiveRecordingWaveform.tsx  | 26 +++++++------------
 src/utils/MarkedExecution.ts                  |  7 -----
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
index 6786ae36f8..49d5dd66e1 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -34,10 +34,16 @@ interface IState {
 @replaceableComponent("views.voice_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
     private seconds = 0;
-    private rafId: number;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    )
 
-    state = {
-        seconds: 0,
+    constructor(props) {
+        super(props);
+        this.state = {
+            seconds: 0,
+        }
     }
 
     componentDidMount() {
@@ -47,24 +53,10 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
         });
     }
 
-    private scheduledUpdate = new MarkedExecution(
-        () => this.updateClock(),
-        () => this.onLiveDataUpdate(),
-    )
-
-    private onLiveDataUpdate() {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
-    }
-
     private updateClock() {
         this.setState({
             seconds: this.seconds,
         })
-        this.rafId = null;
     }
 
     public render() {
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index 83449fddc8..640f7eb129 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -38,10 +38,16 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
     };
 
     private waveform: number[] = [];
-    private rafId: number;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateWaveform(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    )
 
-    state = {
-        waveform: [],
+    constructor(props) {
+        super(props);
+        this.state = {
+            waveform: [],
+        }
     }
 
     componentDidMount() {
@@ -51,24 +57,10 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         });
     }
 
-    private scheduledUpdate = new MarkedExecution(
-        () => this.updateWaveform(),
-        () => this.onLiveDataUpdate(),
-    )
-
-    private onLiveDataUpdate() {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger())
-    }
-
     private updateWaveform() {
         this.setState({
             waveform: this.waveform,
         })
-        this.rafId = null;
     }
 
     public render() {
diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts
index 0123d94f71..624ab499de 100644
--- a/src/utils/MarkedExecution.ts
+++ b/src/utils/MarkedExecution.ts
@@ -33,13 +33,6 @@ export class MarkedExecution {
     constructor(private fn: () => void, private onMarkCallback?: () => void) {
     }
 
-    /**
-     * Getter for the _marked property
-     */
-    public get marked() {
-        return this._marked;
-    }
-
     /**
      * Resets the mark without calling the function.
      */

From 56514d51a6ba075662690cfb47c6d6c4b22e8178 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 15:37:28 +0100
Subject: [PATCH 273/358] Fix tiny scrollbar dot on chrome/electron in Forward
 Dialog

---
 res/css/views/dialogs/_ForwardDialog.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.scss
index 1976a43ab9..95d7ce74c4 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@@ -34,7 +34,7 @@ limitations under the License.
     > .mx_ForwardDialog_preview {
         max-height: 30%;
         flex-shrink: 0;
-        overflow: scroll;
+        overflow-y: auto;
 
         div {
             pointer-events: none;

From 208c62048fa873c0c6e7d3ec2b26b93838c9493a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 15:48:13 +0100
Subject: [PATCH 274/358] Fix right panel store cleaning some state when
 permalink within room is clicked

---
 src/stores/RightPanelStore.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts
index 2bad0572b1..03f12832fd 100644
--- a/src/stores/RightPanelStore.ts
+++ b/src/stores/RightPanelStore.ts
@@ -22,6 +22,7 @@ import {RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS} from "./RightPanelStorePha
 import {ActionPayload} from "../dispatcher/payloads";
 import {Action} from '../dispatcher/actions';
 import { SettingLevel } from "../settings/SettingLevel";
+import RoomViewStore from './RoomViewStore';
 
 interface RightPanelStoreState {
     // Whether or not to show the right panel at all. We split out rooms and groups
@@ -147,6 +148,8 @@ export default class RightPanelStore extends Store<ActionPayload> {
         switch (payload.action) {
             case 'view_room':
             case 'view_group':
+                if (payload.room_id === RoomViewStore.getRoomId()) break; // skip this transition, probably a permalink
+
                 // Reset to the member list if we're viewing member info
                 if (MEMBER_INFO_PHASES.includes(this.state.lastRoomPhase)) {
                     this.setState({lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {}});

From 83af38a85f7f57270452bef935a921221c7b51e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 15:56:37 +0100
Subject: [PATCH 275/358] Fix multiple timeline panels handling composer and
 edit events

---
 src/components/structures/RoomView.tsx     |  1 +
 src/components/structures/TimelinePanel.js | 44 ++++++++++++----------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 885851e8e6..3809090bbd 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2025,6 +2025,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 manageReadReceipts={!this.state.isPeeking}
                 sendReadReceiptOnLoad={!this.state.wasContextSwitch}
                 manageReadMarkers={!this.state.isPeeking}
+                manageComposerDispatches={true}
                 hidden={hideMessagePanel}
                 highlightedEventId={highlightedEventId}
                 eventId={this.state.initialEventId}
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 03d0b5c6d7..a1e8fa7ded 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -72,6 +72,8 @@ class TimelinePanel extends React.Component {
         manageReadReceipts: PropTypes.bool,
         sendReadReceiptOnLoad: PropTypes.bool,
         manageReadMarkers: PropTypes.bool,
+        // with this enabled it'll listen and react to Action.ComposerInsert and `edit_event`
+        manageComposerDispatches: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
         hidden: PropTypes.bool,
@@ -446,29 +448,33 @@ class TimelinePanel extends React.Component {
                 break;
 
             case "edit_event": {
-                const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
-                this.setState({editState}, () => {
-                    if (payload.event && this._messagePanel.current) {
-                        this._messagePanel.current.scrollToEventIfNeeded(
-                            payload.event.getId(),
-                        );
-                    }
-                });
+                if (this.props.manageComposerDispatches) {
+                    const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+                    this.setState({editState}, () => {
+                        if (payload.event && this._messagePanel.current) {
+                            this._messagePanel.current.scrollToEventIfNeeded(
+                                payload.event.getId(),
+                            );
+                        }
+                    });
+                }
                 break;
             }
 
             case Action.ComposerInsert: {
-                // re-dispatch to the correct composer
-                if (this.state.editState) {
-                    dis.dispatch({
-                        ...payload,
-                        action: "edit_composer_insert",
-                    });
-                } else {
-                    dis.dispatch({
-                        ...payload,
-                        action: "send_composer_insert",
-                    });
+                if (this.props.manageComposerDispatches) {
+                    // re-dispatch to the correct composer
+                    if (this.state.editState) {
+                        dis.dispatch({
+                            ...payload,
+                            action: "edit_composer_insert",
+                        });
+                    } else {
+                        dis.dispatch({
+                            ...payload,
+                            action: "send_composer_insert",
+                        });
+                    }
                 }
                 break;
             }

From fd9e891647c856478e05ed3647573e57651799f7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 16:02:34 +0100
Subject: [PATCH 276/358] Clean up by pulling listeners up to parent RoomView

---
 src/components/structures/RoomView.tsx     | 29 +++++++++++++++-
 src/components/structures/TimelinePanel.js | 40 ++++------------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 3809090bbd..b92d51d8ed 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView";
 import { IOpts } from "../../createRoom";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
+import EditorStateTransfer from "../../utils/EditorStateTransfer";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -192,6 +193,7 @@ export interface IState {
     // whether or not a spaces context switch brought us here,
     // if it did we don't want the room to be marked as read as soon as it is loaded.
     wasContextSwitch?: boolean;
+    editState?: EditorStateTransfer;
 }
 
 @replaceableComponent("structures.RoomView")
@@ -815,6 +817,32 @@ export default class RoomView extends React.Component<IProps, IState> {
             case 'focus_search':
                 this.onSearchClick();
                 break;
+
+            case "edit_event": {
+                const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
+                this.setState({ editState }, () => {
+                    if (payload.event) {
+                        this.messagePanel?.scrollToEventIfNeeded(payload.event.getId());
+                    }
+                });
+                break;
+            }
+
+            case Action.ComposerInsert: {
+                // re-dispatch to the correct composer
+                if (this.state.editState) {
+                    dis.dispatch({
+                        ...payload,
+                        action: "edit_composer_insert",
+                    });
+                } else {
+                    dis.dispatch({
+                        ...payload,
+                        action: "send_composer_insert",
+                    });
+                }
+                break;
+            }
         }
     };
 
@@ -2025,7 +2053,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 manageReadReceipts={!this.state.isPeeking}
                 sendReadReceiptOnLoad={!this.state.wasContextSwitch}
                 manageReadMarkers={!this.state.isPeeking}
-                manageComposerDispatches={true}
                 hidden={hideMessagePanel}
                 highlightedEventId={highlightedEventId}
                 eventId={this.state.initialEventId}
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index a1e8fa7ded..61b7fc0555 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -447,38 +447,6 @@ class TimelinePanel extends React.Component {
                 this.forceUpdate();
                 break;
 
-            case "edit_event": {
-                if (this.props.manageComposerDispatches) {
-                    const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
-                    this.setState({editState}, () => {
-                        if (payload.event && this._messagePanel.current) {
-                            this._messagePanel.current.scrollToEventIfNeeded(
-                                payload.event.getId(),
-                            );
-                        }
-                    });
-                }
-                break;
-            }
-
-            case Action.ComposerInsert: {
-                if (this.props.manageComposerDispatches) {
-                    // re-dispatch to the correct composer
-                    if (this.state.editState) {
-                        dis.dispatch({
-                            ...payload,
-                            action: "edit_composer_insert",
-                        });
-                    } else {
-                        dis.dispatch({
-                            ...payload,
-                            action: "send_composer_insert",
-                        });
-                    }
-                }
-                break;
-            }
-
             case "scroll_to_bottom":
                 this.jumpToLiveTimeline();
                 break;
@@ -872,6 +840,12 @@ class TimelinePanel extends React.Component {
         }
     };
 
+    scrollToEventIfNeeded = (eventId) => {
+        if (this._messagePanel.current) {
+            this._messagePanel.current.scrollToEventIfNeeded(eventId);
+        }
+    }
+
     /* scroll to show the read-up-to marker. We put it 1/3 of the way down
      * the container.
      */
@@ -1479,7 +1453,7 @@ class TimelinePanel extends React.Component {
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}
                 getRelationsForEvent={this.getRelationsForEvent}
-                editState={this.state.editState}
+                editState={this.props.editState}
                 showReactions={this.props.showReactions}
                 layout={this.props.layout}
                 enableFlair={SettingsStore.getValue(UIFeature.Flair)}

From c708afe21636976eb4009b0f2b2e4bc3b2330e8f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 16:03:52 +0100
Subject: [PATCH 277/358] Pull scroll_to_bottom up a level similarly to prevent
 it firing on NotifPanel/FilePanel when sending a message

---
 src/components/structures/RoomView.tsx     | 4 ++++
 src/components/structures/TimelinePanel.js | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index b92d51d8ed..3e6cfa864a 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -843,6 +843,10 @@ export default class RoomView extends React.Component<IProps, IState> {
                 }
                 break;
             }
+
+            case "scroll_to_bottom":
+                this.messagePanel?.jumpToLiveTimeline();
+                break;
         }
     };
 
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 61b7fc0555..4b51a5ecf5 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -446,10 +446,6 @@ class TimelinePanel extends React.Component {
             case "ignore_state_changed":
                 this.forceUpdate();
                 break;
-
-            case "scroll_to_bottom":
-                this.jumpToLiveTimeline();
-                break;
         }
     };
 

From e43df0e3c664f423faa2abf3fdbe64d51e78a701 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 28 Jun 2021 16:11:38 +0100
Subject: [PATCH 278/358] delint

---
 src/components/structures/TimelinePanel.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 4b51a5ecf5..ad20d38139 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -34,12 +34,10 @@ import * as sdk from "../../index";
 import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
-import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import { haveTileForEvent } from "../views/rooms/EventTile";
 import { UIFeature } from "../../settings/UIFeature";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { arrayFastClone } from "../../utils/arrays";
-import { Action } from "../../dispatcher/actions";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;

From 66072945730e5687f4c399401c62ac82c6429746 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 28 Jun 2021 16:30:48 +0100
Subject: [PATCH 279/358] Deprecate Tinter and TintableSVG

---
 src/Tinter.js                                 | 458 ------------------
 src/components/structures/GroupView.js        |   9 +-
 src/components/structures/MatrixChat.tsx      |  10 -
 src/components/structures/MyGroups.js         |   2 +-
 src/components/structures/RoomView.tsx        |  16 +-
 src/components/views/elements/ActionButton.js |   4 +-
 src/components/views/elements/AddressTile.js  |   3 +-
 src/components/views/elements/TintableSvg.js  |  82 ----
 .../views/rooms/SimpleRoomHeader.js           |   4 +-
 src/i18n/strings/en_EN.json                   |   1 -
 src/settings/Settings.tsx                     |   8 -
 .../handlers/RoomAccountSettingsHandler.ts    |  16 -
 src/theme.js                                  |   2 -
 13 files changed, 8 insertions(+), 607 deletions(-)
 delete mode 100644 src/Tinter.js
 delete mode 100644 src/components/views/elements/TintableSvg.js

diff --git a/src/Tinter.js b/src/Tinter.js
deleted file mode 100644
index ca5a460e16..0000000000
--- a/src/Tinter.js
+++ /dev/null
@@ -1,458 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-Copyright 2017 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.
-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.
-*/
-
-const DEBUG = 0;
-
-// utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue]
-function colorToRgb(color) {
-    if (!color) {
-        return [0, 0, 0];
-    }
-
-    if (color[0] === '#') {
-        color = color.slice(1);
-        if (color.length === 3) {
-            color = color[0] + color[0] +
-                    color[1] + color[1] +
-                    color[2] + color[2];
-        }
-        const val = parseInt(color, 16);
-        const r = (val >> 16) & 255;
-        const g = (val >> 8) & 255;
-        const b = val & 255;
-        return [r, g, b];
-    } else {
-        const match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
-        if (match) {
-            return [
-                parseInt(match[1]),
-                parseInt(match[2]),
-                parseInt(match[3]),
-            ];
-        }
-    }
-    return [0, 0, 0];
-}
-
-// utility to turn [red,green,blue] into #rrggbb
-function rgbToColor(rgb) {
-    const val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
-    return '#' + (0x1000000 + val).toString(16).slice(1);
-}
-
-class Tinter {
-    constructor() {
-        // The default colour keys to be replaced as referred to in CSS
-        // (should be overridden by .mx_theme_accentColor and .mx_theme_secondaryAccentColor)
-        this.keyRgb = [
-            "rgb(118, 207, 166)", // Vector Green
-            "rgb(234, 245, 240)", // Vector Light Green
-            "rgb(211, 239, 225)", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
-        ];
-
-        // Some algebra workings for calculating the tint % of Vector Green & Light Green
-        // x * 118 + (1 - x) * 255 = 234
-        // x * 118 + 255 - 255 * x = 234
-        // x * 118 - x * 255 = 234 - 255
-        // (255 - 118) x = 255 - 234
-        // x = (255 - 234) / (255 - 118) = 0.16
-
-        // The colour keys to be replaced as referred to in SVGs
-        this.keyHex = [
-            "#76CFA6", // Vector Green
-            "#EAF5F0", // Vector Light Green
-            "#D3EFE1", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
-            "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
-            "#000000", // black lowlights of the SVGs (for switching to dark theme)
-        ];
-
-        // track the replacement colours actually being used
-        // defaults to our keys.
-        this.colors = [
-            this.keyHex[0],
-            this.keyHex[1],
-            this.keyHex[2],
-            this.keyHex[3],
-            this.keyHex[4],
-        ];
-
-        // track the most current tint request inputs (which may differ from the
-        // end result stored in this.colors
-        this.currentTint = [
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-        ];
-
-        this.cssFixups = [
-            // { theme: {
-            //      style: a style object that should be fixed up taken from a stylesheet
-            //      attr: name of the attribute to be clobbered, e.g. 'color'
-            //      index: ordinal of primary, secondary or tertiary
-            //   },
-            // }
-        ];
-
-        // CSS attributes to be fixed up
-        this.cssAttrs = [
-            "color",
-            "backgroundColor",
-            "borderColor",
-            "borderTopColor",
-            "borderBottomColor",
-            "borderLeftColor",
-        ];
-
-        this.svgAttrs = [
-            "fill",
-            "stroke",
-        ];
-
-        // List of functions to call when the tint changes.
-        this.tintables = [];
-
-        // the currently loaded theme (if any)
-        this.theme = undefined;
-
-        // whether to force a tint (e.g. after changing theme)
-        this.forceTint = false;
-    }
-
-    /**
-     * Register a callback to fire when the tint changes.
-     * This is used to rewrite the tintable SVGs with the new tint.
-     *
-     * It's not possible to unregister a tintable callback. So this can only be
-     * used to register a static callback. If a set of tintables will change
-     * over time then the best bet is to register a single callback for the
-     * entire set.
-     *
-     * To ensure the tintable work happens at least once, it is also called as
-     * part of registration.
-     *
-     * @param {Function} tintable Function to call when the tint changes.
-     */
-    registerTintable(tintable) {
-        this.tintables.push(tintable);
-        tintable();
-    }
-
-    getKeyRgb() {
-        return this.keyRgb;
-    }
-
-    tint(primaryColor, secondaryColor, tertiaryColor) {
-        return;
-        // eslint-disable-next-line no-unreachable
-        this.currentTint[0] = primaryColor;
-        this.currentTint[1] = secondaryColor;
-        this.currentTint[2] = tertiaryColor;
-
-        this.calcCssFixups();
-
-        if (DEBUG) {
-            console.log("Tinter.tint(" + primaryColor + ", " +
-                secondaryColor + ", " +
-                tertiaryColor + ")");
-        }
-
-        if (!primaryColor) {
-            primaryColor = this.keyRgb[0];
-            secondaryColor = this.keyRgb[1];
-            tertiaryColor = this.keyRgb[2];
-        }
-
-        if (!secondaryColor) {
-            const x = 0.16; // average weighting factor calculated from vector green & light green
-            const rgb = colorToRgb(primaryColor);
-            rgb[0] = x * rgb[0] + (1 - x) * 255;
-            rgb[1] = x * rgb[1] + (1 - x) * 255;
-            rgb[2] = x * rgb[2] + (1 - x) * 255;
-            secondaryColor = rgbToColor(rgb);
-        }
-
-        if (!tertiaryColor) {
-            const x = 0.19;
-            const rgb1 = colorToRgb(primaryColor);
-            const rgb2 = colorToRgb(secondaryColor);
-            rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
-            rgb1[1] = x * rgb1[1] + (1 - x) * rgb2[1];
-            rgb1[2] = x * rgb1[2] + (1 - x) * rgb2[2];
-            tertiaryColor = rgbToColor(rgb1);
-        }
-
-        if (this.forceTint == false &&
-            this.colors[0] === primaryColor &&
-            this.colors[1] === secondaryColor &&
-            this.colors[2] === tertiaryColor) {
-            return;
-        }
-
-        this.forceTint = false;
-
-        this.colors[0] = primaryColor;
-        this.colors[1] = secondaryColor;
-        this.colors[2] = tertiaryColor;
-
-        if (DEBUG) {
-            console.log("Tinter.tint final: (" + primaryColor + ", " +
-                secondaryColor + ", " +
-                tertiaryColor + ")");
-        }
-
-        // go through manually fixing up the stylesheets.
-        this.applyCssFixups();
-
-        // tell all the SVGs to go fix themselves up
-        // we don't do this as a dispatch otherwise it will visually lag
-        this.tintables.forEach(function(tintable) {
-            tintable();
-        });
-    }
-
-    tintSvgWhite(whiteColor) {
-        this.currentTint[3] = whiteColor;
-
-        if (!whiteColor) {
-            whiteColor = this.colors[3];
-        }
-        if (this.colors[3] === whiteColor) {
-            return;
-        }
-        this.colors[3] = whiteColor;
-        this.tintables.forEach(function(tintable) {
-            tintable();
-        });
-    }
-
-    tintSvgBlack(blackColor) {
-        this.currentTint[4] = blackColor;
-
-        if (!blackColor) {
-            blackColor = this.colors[4];
-        }
-        if (this.colors[4] === blackColor) {
-            return;
-        }
-        this.colors[4] = blackColor;
-        this.tintables.forEach(function(tintable) {
-            tintable();
-        });
-    }
-
-
-    setTheme(theme) {
-        this.theme = theme;
-
-        // update keyRgb from the current theme CSS itself, if it defines it
-        if (document.getElementById('mx_theme_accentColor')) {
-            this.keyRgb[0] = window.getComputedStyle(
-                document.getElementById('mx_theme_accentColor')).color;
-        }
-        if (document.getElementById('mx_theme_secondaryAccentColor')) {
-            this.keyRgb[1] = window.getComputedStyle(
-                document.getElementById('mx_theme_secondaryAccentColor')).color;
-        }
-        if (document.getElementById('mx_theme_tertiaryAccentColor')) {
-            this.keyRgb[2] = window.getComputedStyle(
-                document.getElementById('mx_theme_tertiaryAccentColor')).color;
-        }
-
-        this.calcCssFixups();
-        this.forceTint = true;
-
-        this.tint(this.currentTint[0], this.currentTint[1], this.currentTint[2]);
-
-        if (theme === 'dark') {
-            // abuse the tinter to change all the SVG's #fff to #2d2d2d
-            // XXX: obviously this shouldn't be hardcoded here.
-            this.tintSvgWhite('#2d2d2d');
-            this.tintSvgBlack('#dddddd');
-        } else {
-            this.tintSvgWhite('#ffffff');
-            this.tintSvgBlack('#000000');
-        }
-    }
-
-    calcCssFixups() {
-        // cache our fixups
-        if (this.cssFixups[this.theme]) return;
-
-        if (DEBUG) {
-            console.debug("calcCssFixups start for " + this.theme + " (checking " +
-                document.styleSheets.length +
-                " stylesheets)");
-        }
-
-        this.cssFixups[this.theme] = [];
-
-        for (let i = 0; i < document.styleSheets.length; i++) {
-            const ss = document.styleSheets[i];
-            try {
-                if (!ss) continue; // well done safari >:(
-                // Chromium apparently sometimes returns null here; unsure why.
-                // see $14534907369972FRXBx:matrix.org in HQ
-                // ...ah, it's because there's a third party extension like
-                // privacybadger inserting its own stylesheet in there with a
-                // resource:// URI or something which results in a XSS error.
-                // See also #vector:matrix.org/$145357669685386ebCfr:matrix.org
-                // ...except some browsers apparently return stylesheets without
-                // hrefs, which we have no choice but ignore right now
-
-                // XXX seriously? we are hardcoding the name of vector's CSS file in
-                // here?
-                //
-                // Why do we need to limit it to vector's CSS file anyway - if there
-                // are other CSS files affecting the doc don't we want to apply the
-                // same transformations to them?
-                //
-                // Iterating through the CSS looking for matches to hack on feels
-                // pretty horrible anyway. And what if the application skin doesn't use
-                // Vector Green as its primary color?
-                // --richvdh
-
-                // Yes, tinting assumes that you are using the Element skin for now.
-                // The right solution will be to move the CSS over to react-sdk.
-                // And yes, the default assets for the base skin might as well use
-                // Vector Green as any other colour.
-                // --matthew
-
-                // stylesheets we don't have permission to access (eg. ones from extensions) have a null
-                // href and will throw exceptions if we try to access their rules.
-                if (!ss.href || !ss.href.match(new RegExp('/theme-' + this.theme + '.css$'))) continue;
-                if (ss.disabled) continue;
-                if (!ss.cssRules) continue;
-
-                if (DEBUG) console.debug("calcCssFixups checking " + ss.cssRules.length + " rules for " + ss.href);
-
-                for (let j = 0; j < ss.cssRules.length; j++) {
-                    const rule = ss.cssRules[j];
-                    if (!rule.style) continue;
-                    if (rule.selectorText && rule.selectorText.match(/#mx_theme/)) continue;
-                    for (let k = 0; k < this.cssAttrs.length; k++) {
-                        const attr = this.cssAttrs[k];
-                        for (let l = 0; l < this.keyRgb.length; l++) {
-                            if (rule.style[attr] === this.keyRgb[l]) {
-                                this.cssFixups[this.theme].push({
-                                    style: rule.style,
-                                    attr: attr,
-                                    index: l,
-                                });
-                            }
-                        }
-                    }
-                }
-            } catch (e) {
-                // Catch any random exceptions that happen here: all sorts of things can go
-                // wrong with this (nulls, SecurityErrors) and mostly it's for other
-                // stylesheets that we don't want to proces anyway. We should not propagate an
-                // exception out since this will cause the app to fail to start.
-                console.log("Failed to calculate CSS fixups for a stylesheet: " + ss.href, e);
-            }
-        }
-        if (DEBUG) {
-            console.log("calcCssFixups end (" +
-                this.cssFixups[this.theme].length +
-                " fixups)");
-        }
-    }
-
-    applyCssFixups() {
-        if (DEBUG) {
-            console.log("applyCssFixups start (" +
-                this.cssFixups[this.theme].length +
-                " fixups)");
-        }
-        for (let i = 0; i < this.cssFixups[this.theme].length; i++) {
-            const cssFixup = this.cssFixups[this.theme][i];
-            try {
-                cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index];
-            } catch (e) {
-                // Firefox Quantum explodes if you manually edit the CSS in the
-                // inspector and then try to do a tint, as apparently all the
-                // fixups are then stale.
-                console.error("Failed to apply cssFixup in Tinter! ", e.name);
-            }
-        }
-        if (DEBUG) console.log("applyCssFixups end");
-    }
-
-    // XXX: we could just move this all into TintableSvg, but as it's so similar
-    // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
-    // keeping it here for now.
-    calcSvgFixups(svgs) {
-        // go through manually fixing up SVG colours.
-        // we could do this by stylesheets, but keeping the stylesheets
-        // updated would be a PITA, so just brute-force search for the
-        // key colour; cache the element and apply.
-
-        if (DEBUG) console.log("calcSvgFixups start for " + svgs);
-        const fixups = [];
-        for (let i = 0; i < svgs.length; i++) {
-            let svgDoc;
-            try {
-                svgDoc = svgs[i].contentDocument;
-            } catch (e) {
-                let msg = 'Failed to get svg.contentDocument of ' + svgs[i].toString();
-                if (e.message) {
-                    msg += e.message;
-                }
-                if (e.stack) {
-                    msg += ' | stack: ' + e.stack;
-                }
-                console.error(msg);
-            }
-            if (!svgDoc) continue;
-            const tags = svgDoc.getElementsByTagName("*");
-            for (let j = 0; j < tags.length; j++) {
-                const tag = tags[j];
-                for (let k = 0; k < this.svgAttrs.length; k++) {
-                    const attr = this.svgAttrs[k];
-                    for (let l = 0; l < this.keyHex.length; l++) {
-                        if (tag.getAttribute(attr) &&
-                            tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
-                            fixups.push({
-                                node: tag,
-                                attr: attr,
-                                index: l,
-                            });
-                        }
-                    }
-                }
-            }
-        }
-        if (DEBUG) console.log("calcSvgFixups end");
-
-        return fixups;
-    }
-
-    applySvgFixups(fixups) {
-        if (DEBUG) console.log("applySvgFixups start for " + fixups);
-        for (let i = 0; i < fixups.length; i++) {
-            const svgFixup = fixups[i];
-            svgFixup.node.setAttribute(svgFixup.attr, this.colors[svgFixup.index]);
-        }
-        if (DEBUG) console.log("applySvgFixups end");
-    }
-}
-
-if (global.singletonTinter === undefined) {
-    global.singletonTinter = new Tinter();
-}
-export default global.singletonTinter;
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 3a2c611cc9..2442ff5e25 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -126,12 +126,11 @@ class CategoryRoomList extends React.Component {
     };
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -300,10 +299,9 @@ class RoleUserList extends React.Component {
     };
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a User') }
                 </div>
@@ -855,7 +853,6 @@ export default class GroupView extends React.Component {
     _getRoomsNode() {
         const RoomDetailList = sdk.getComponent('rooms.RoomDetailList');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const Spinner = sdk.getComponent('elements.Spinner');
         const TooltipButton = sdk.getComponent('elements.TooltipButton');
 
@@ -871,7 +868,7 @@ export default class GroupView extends React.Component {
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
+                    <img src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 7986da203d..db11ee17a0 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -34,7 +34,6 @@ import dis from "../../dispatcher/dispatcher";
 import Notifier from '../../Notifier';
 
 import Modal from "../../Modal";
-import Tinter from "../../Tinter";
 import * as sdk from '../../index';
 import { showRoomInviteDialog, showStartChatInviteDialog } from '../../RoomInvite';
 import * as Rooms from '../../Rooms';
@@ -283,11 +282,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         this.pageChanging = false;
 
-        // check we have the right tint applied for this theme.
-        // N.B. we don't call the whole of setTheme() here as we may be
-        // racing with the theme CSS download finishing from index.js
-        Tinter.tint();
-
         // For PersistentElement
         this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
 
@@ -1573,10 +1567,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 });
             }
         });
-        // Fire the tinter right on startup to ensure the default theme is applied
-        // A later sync can/will correct the tint to be the right value for the user
-        const colorScheme = SettingsStore.getValue("roomColor");
-        Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
     }
 
     /**
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index d0a2fbff41..62a67ee4db 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -123,7 +123,7 @@ export default class MyGroups extends React.Component {
                 </div>
                 {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
-                        <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
+                        <img src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 885851e8e6..37cce818df 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -37,7 +37,6 @@ import Modal from '../../Modal';
 import * as sdk from '../../index';
 import CallHandler, { PlaceCallType } from '../../CallHandler';
 import dis from '../../dispatcher/dispatcher';
-import Tinter from '../../Tinter';
 import rateLimitedFunc from '../../ratelimitedfunc';
 import * as Rooms from '../../Rooms';
 import eventSearch, { searchPagination } from '../../Searching';
@@ -677,10 +676,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         // cancel any pending calls to the rate_limited_funcs
         this.updateRoomMembers.cancelPendingCall();
 
-        // no need to do this as Dir & Settings are now overlays. It just burnt CPU.
-        // console.log("Tinter.tint from RoomView.unmount");
-        // Tinter.tint(); // reset colourscheme
-
         for (const watcher of this.settingWatchers) {
             SettingsStore.unwatchSetting(watcher);
         }
@@ -1030,10 +1025,6 @@ export default class RoomView extends React.Component<IProps, IState> {
     private updateTint() {
         const room = this.state.room;
         if (!room) return;
-
-        console.log("Tinter.tint from updateTint");
-        const colorScheme = SettingsStore.getValue("roomColor", room.roomId);
-        Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
     }
 
     private onAccountData = (event: MatrixEvent) => {
@@ -1047,12 +1038,7 @@ export default class RoomView extends React.Component<IProps, IState> {
     private onRoomAccountData = (event: MatrixEvent, room: Room) => {
         if (room.roomId == this.state.roomId) {
             const type = event.getType();
-            if (type === "org.matrix.room.color_scheme") {
-                const colorScheme = event.getContent();
-                // XXX: we should validate the event
-                console.log("Tinter.tint from onRoomAccountData");
-                Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
-            } else if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
+            if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
                 // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
                 this.updatePreviewUrlVisibility(room);
             }
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 5013bcec0d..ffc4b47817 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -62,8 +62,6 @@ export default class ActionButton extends React.Component {
     };
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         let tooltip;
         if (this.state.showTooltip) {
             const Tooltip = sdk.getComponent("elements.Tooltip");
@@ -71,7 +69,7 @@ export default class ActionButton extends React.Component {
         }
 
         const icon = this.props.iconPath ?
-            (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
+            (<img src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
             undefined;
 
         const classNames = ["mx_RoleButton"];
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index f8fa294b71..ca85d73a11 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -53,7 +53,6 @@ export default class AddressTile extends React.Component {
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         const nameClasses = classNames({
             "mx_AddressTile_name": true,
@@ -124,7 +123,7 @@ export default class AddressTile extends React.Component {
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
-                    <TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
+                    <img src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
                 </div>
             );
         }
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
deleted file mode 100644
index 670f3e9bb9..0000000000
--- a/src/components/views/elements/TintableSvg.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-Copyright 2019 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 React from 'react';
-import PropTypes from 'prop-types';
-import Tinter from "../../../Tinter";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.elements.TintableSvg")
-class TintableSvg extends React.Component {
-    static propTypes = {
-        src: PropTypes.string.isRequired,
-        width: PropTypes.string.isRequired,
-        height: PropTypes.string.isRequired,
-        className: PropTypes.string,
-    };
-
-    // list of currently mounted TintableSvgs
-    static mounts = {};
-    static idSequence = 0;
-
-    componentDidMount() {
-        this.fixups = [];
-
-        this.id = TintableSvg.idSequence++;
-        TintableSvg.mounts[this.id] = this;
-    }
-
-    componentWillUnmount() {
-        delete TintableSvg.mounts[this.id];
-    }
-
-    tint = () => {
-        // TODO: only bother running this if the global tint settings have changed
-        // since we loaded!
-        Tinter.applySvgFixups(this.fixups);
-    };
-
-    onLoad = event => {
-        // console.log("TintableSvg.onLoad for " + this.props.src);
-        this.fixups = Tinter.calcSvgFixups([event.target]);
-        Tinter.applySvgFixups(this.fixups);
-    };
-
-    render() {
-        return (
-            <object className={"mx_TintableSvg " + (this.props.className ? this.props.className : "")}
-                type="image/svg+xml"
-                data={this.props.src}
-                width={this.props.width}
-                height={this.props.height}
-                onLoad={this.onLoad}
-                tabIndex="-1"
-            />
-        );
-    }
-}
-
-// Register with the Tinter so that we will be told if the tint changes
-Tinter.registerTintable(function() {
-    if (TintableSvg.mounts) {
-        Object.keys(TintableSvg.mounts).forEach((id) => {
-            TintableSvg.mounts[id].tint();
-        });
-    }
-});
-
-export default TintableSvg;
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 35e7d44469..2d070ba55d 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 /*
@@ -35,8 +34,7 @@ export default class SimpleRoomHeader extends React.Component {
     render() {
         let icon;
         if (this.props.icon) {
-            const TintableSvg = sdk.getComponent('elements.TintableSvg');
-            icon = <TintableSvg
+            icon = <img
                 className="mx_RoomHeader_icon" src={this.props.icon}
                 width="25" height="25"
             />;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bfca730776..9dae200520 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -857,7 +857,6 @@
     "Enable inline URL previews by default": "Enable inline URL previews by default",
     "Enable URL previews for this room (only affects you)": "Enable URL previews for this room (only affects you)",
     "Enable URL previews by default for participants in this room": "Enable URL previews by default for participants in this room",
-    "Room Colour": "Room Colour",
     "Enable widget screenshots on supported widgets": "Enable widget screenshots on supported widgets",
     "Prompt before sending invites to potentially invalid matrix IDs": "Prompt before sending invites to potentially invalid matrix IDs",
     "Show developer tools": "Show developer tools",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 6ed5e0c3d8..96820d0ff2 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -606,14 +606,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: false,
         controller: new UIFeatureController(UIFeature.URLPreviews),
     },
-    "roomColor": {
-        supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
-        displayName: _td("Room Colour"),
-        default: {
-            primary_color: null, // Hex string, eg: #000000
-            secondary_color: null, // Hex string, eg: #000000
-        },
-    },
     "notificationsEnabled": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
diff --git a/src/settings/handlers/RoomAccountSettingsHandler.ts b/src/settings/handlers/RoomAccountSettingsHandler.ts
index 416bdddb90..e0345fde8c 100644
--- a/src/settings/handlers/RoomAccountSettingsHandler.ts
+++ b/src/settings/handlers/RoomAccountSettingsHandler.ts
@@ -54,8 +54,6 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
             }
 
             this.watchers.notifyUpdate("urlPreviewsEnabled", roomId, SettingLevel.ROOM_ACCOUNT, val);
-        } else if (event.getType() === "org.matrix.room.color_scheme") {
-            this.watchers.notifyUpdate("roomColor", roomId, SettingLevel.ROOM_ACCOUNT, event.getContent());
         } else if (event.getType() === "im.vector.web.settings") {
             // Figure out what changed and fire those updates
             const prevContent = prevEvent ? prevEvent.getContent() : {};
@@ -79,14 +77,6 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
             return !content['disable'];
         }
 
-        // Special case room color
-        if (settingName === "roomColor") {
-            // The event content should already be in an appropriate format, we just need
-            // to get the right value.
-            // don't fallback to {} because thats truthy and would imply there is an event specifying tint
-            return this.getSettings(roomId, "org.matrix.room.color_scheme");
-        }
-
         // Special case allowed widgets
         if (settingName === "allowedWidgets") {
             return this.getSettings(roomId, ALLOWED_WIDGETS_EVENT_TYPE);
@@ -104,12 +94,6 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
             return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.preview_urls", content);
         }
 
-        // Special case room color
-        if (settingName === "roomColor") {
-            // The new value should match our requirements, we just need to store it in the right place.
-            return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.color_scheme", newValue);
-        }
-
         // Special case allowed widgets
         if (settingName === "allowedWidgets") {
             return MatrixClientPeg.get().setRoomAccountData(roomId, ALLOWED_WIDGETS_EVENT_TYPE, newValue);
diff --git a/src/theme.js b/src/theme.js
index 40fa291cfc..0b73b3f5e2 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -18,7 +18,6 @@ limitations under the License.
 import {_t} from "./languageHandler";
 
 export const DEFAULT_THEME = "light";
-import Tinter from "./Tinter";
 import SettingsStore from "./settings/SettingsStore";
 import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
@@ -214,7 +213,6 @@ export async function setTheme(theme) {
             if (bodyStyles.backgroundColor) {
                 document.querySelector('meta[name="theme-color"]').content = bodyStyles.backgroundColor;
             }
-            Tinter.setTheme(theme);
             resolve();
         };
 

From e685f1239d6bdc588d7d244119d9a9361a756111 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Thu, 24 Jun 2021 22:06:12 +0200
Subject: [PATCH 280/358] use null vars for context menu lists

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js       | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index b61d8b50f0..1d871b484d 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -257,7 +257,7 @@ export default class MessageContextMenu extends React.Component {
         let externalURLButton;
         let quoteButton;
         let collapseReplyThread;
-        const optionLists = [];
+        let redactItemList;
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
@@ -388,7 +388,7 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        optionLists.push((
+        const commonItemsList = (
             <IconizedContextMenuOptionList key={'group1'}>
                 { quoteButton }
                 { forwardButton }
@@ -401,14 +401,14 @@ export default class MessageContextMenu extends React.Component {
                 { resendReactionsButton }
                 { collapseReplyThread }
             </IconizedContextMenuOptionList>
-        ));
+        );
 
         if (redactButton) {
-            optionLists.push((
+            redactItemList = (
                 <IconizedContextMenuOptionList key={'group2'} red>
                     { redactButton }
                 </IconizedContextMenuOptionList>
-            ));
+            );
         }
 
         return (
@@ -417,7 +417,8 @@ export default class MessageContextMenu extends React.Component {
                 className="mx_MessageContextMenu"
                 compact={true}
             >
-                { optionLists }
+                { commonItemsList }
+                { redactItemList }
             </IconizedContextMenu>
         );
     }

From d3bc7fe80633ad6b76db415e8a8e4ef85316d9ec Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sat, 26 Jun 2021 09:51:40 +0200
Subject: [PATCH 281/358] remove list keys

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/views/context_menus/MessageContextMenu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 1d871b484d..5d1aad0600 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -389,7 +389,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         const commonItemsList = (
-            <IconizedContextMenuOptionList key={'group1'}>
+            <IconizedContextMenuOptionList>
                 { quoteButton }
                 { forwardButton }
                 { pinButton }
@@ -405,7 +405,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (redactButton) {
             redactItemList = (
-                <IconizedContextMenuOptionList key={'group2'} red>
+                <IconizedContextMenuOptionList red>
                     { redactButton }
                 </IconizedContextMenuOptionList>
             );

From a11193e24301d52909937490306ed3c3fade9151 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 28 Jun 2021 12:32:38 -0400
Subject: [PATCH 282/358] Group ACLs with MELS

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/structures/MessagePanel.js     |  7 +++----
 .../views/elements/MemberEventListSummary.tsx | 19 +++++++++++++++++--
 src/i18n/strings/en_EN.json                   |  4 ++++
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index eb9611a6fc..49855eb99c 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -38,6 +38,7 @@ import defaultDispatcher from '../../dispatcher/dispatcher';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
+const membershipTypes = ['m.room.member', 'm.room.third_party_invite', 'm.room.server_acl'];
 
 // check if there is a previous event and it has the same sender as this event
 // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
@@ -66,8 +67,6 @@ function shouldFormContinuation(prevEvent, mxEvent) {
     return true;
 }
 
-const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite';
-
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 @replaceableComponent("structures.MessagePanel")
@@ -1144,7 +1143,7 @@ class RedactionGrouper {
 // Wrap consecutive member events in a ListSummary, ignore if redacted
 class MemberGrouper {
     static canStartGroup = function(panel, ev) {
-        return panel._shouldShowEvent(ev) && isMembershipChange(ev);
+        return panel._shouldShowEvent(ev) && membershipTypes.includes(ev.getType());
     }
 
     constructor(panel, ev, prevEvent, lastShownEvent) {
@@ -1162,7 +1161,7 @@ class MemberGrouper {
         if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
             return false;
         }
-        return isMembershipChange(ev);
+        return membershipTypes.includes(ev.getType());
     }
 
     add(ev) {
diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx
index f10884ce9d..bf85cee60e 100644
--- a/src/components/views/elements/MemberEventListSummary.tsx
+++ b/src/components/views/elements/MemberEventListSummary.tsx
@@ -66,6 +66,7 @@ enum TransitionType {
     ChangedName = "changed_name",
     ChangedAvatar = "changed_avatar",
     NoChange = "no_change",
+    ServerAcl = "server_acl",
 }
 
 const SEP = ",";
@@ -298,6 +299,12 @@ export default class MemberEventListSummary extends React.Component<IProps> {
                     ? _t("%(severalUsers)smade no changes %(count)s times", { severalUsers: "", count: repeats })
                     : _t("%(oneUser)smade no changes %(count)s times", { oneUser: "", count: repeats });
                 break;
+            case "server_acl":
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)schanged the server ACLs %(count)s times",
+                        { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)schanged the server ACLs %(count)s times", { oneUser: "", count: repeats });
+                break;
         }
 
         return res;
@@ -324,6 +331,10 @@ export default class MemberEventListSummary extends React.Component<IProps> {
             return TransitionType.Invited;
         }
 
+        if (e.mxEvent.getType() === 'm.room.server_acl') {
+            return TransitionType.ServerAcl;
+        }
+
         switch (e.mxEvent.getContent().membership) {
             case 'invite': return TransitionType.Invited;
             case 'ban': return TransitionType.Banned;
@@ -410,19 +421,23 @@ export default class MemberEventListSummary extends React.Component<IProps> {
         // Object mapping user IDs to an array of IUserEvents
         const userEvents: Record<string, IUserEvents[]> = {};
         eventsToRender.forEach((e, index) => {
-            const userId = e.getStateKey();
+            const userId = e.getType() === 'm.room.server_acl' ? e.getSender() : e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
                 userEvents[userId] = [];
             }
 
-            if (e.target) {
+            if (e.getType() === 'm.room.server_acl') {
+                latestUserAvatarMember.set(userId, e.sender);
+            } else if (e.target) {
                 latestUserAvatarMember.set(userId, e.target);
             }
 
             let displayName = userId;
             if (e.getType() === 'm.room.third_party_invite') {
                 displayName = e.getContent().display_name;
+            } else if (e.getType() === 'm.room.server_acl') {
+                displayName = e.sender.name;
             } else if (e.target) {
                 displayName = e.target.name;
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bfca730776..d8e7c030d5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2050,6 +2050,10 @@
     "%(severalUsers)smade no changes %(count)s times|one": "%(severalUsers)smade no changes",
     "%(oneUser)smade no changes %(count)s times|other": "%(oneUser)smade no changes %(count)s times",
     "%(oneUser)smade no changes %(count)s times|one": "%(oneUser)smade no changes",
+    "%(severalUsers)schanged the server ACLs %(count)s times|other": "%(severalUsers)schanged the server ACLs %(count)s times",
+    "%(severalUsers)schanged the server ACLs %(count)s times|one": "%(severalUsers)schanged the server ACLs",
+    "%(oneUser)schanged the server ACLs %(count)s times|other": "%(oneUser)schanged the server ACLs %(count)s times",
+    "%(oneUser)schanged the server ACLs %(count)s times|one": "%(oneUser)schanged the server ACLs",
     "Power level": "Power level",
     "Custom level": "Custom level",
     "QR Code": "QR Code",

From 188bd548c642c32ad5cd8a9fb025a2c7c89bf0ff Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 28 Jun 2021 20:51:14 +0300
Subject: [PATCH 283/358] Let m.notice messages mark a room as unread

The typescript conversion of Unread.js in matrix-org/matrix-react-sdk#6241
fixed a 6-year-old typo and stopped messages with msgtype=m.notice from being
counted as unread messages. This makes it very difficult to use rooms dedicated
for bot notices (like RSS or GitHub webhook bots).

Signed-off-by: Tulir Asokan <tulir@maunium.net>
---
 src/Unread.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Unread.ts b/src/Unread.ts
index b733f4175a..1f909630b0 100644
--- a/src/Unread.ts
+++ b/src/Unread.ts
@@ -43,12 +43,6 @@ export function eventTriggersUnreadCount(ev: MatrixEvent): boolean {
         case EventType.RoomCanonicalAlias:
         case EventType.RoomServerAcl:
             return false;
-
-        case EventType.RoomMessage:
-            if (ev.getContent().msgtype === MsgType.Notice) {
-                return false;
-            }
-            break;
     }
 
     if (ev.isRedacted()) return false;

From bf556722636fbdb2c0777036dd940983e9c1af5e Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 28 Jun 2021 21:07:58 +0300
Subject: [PATCH 284/358] Remove unused import

Signed-off-by: Tulir Asokan <tulir@maunium.net>
---
 src/Unread.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Unread.ts b/src/Unread.ts
index 1f909630b0..72f0bb4642 100644
--- a/src/Unread.ts
+++ b/src/Unread.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';

From e519e704e9e89be37b90a7f75c4a6e7a61221b9a Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 28 Jun 2021 20:40:11 -0600
Subject: [PATCH 285/358] Apply suggestions from code review

---
 .../views/voice_messages/LiveRecordingClock.tsx        |  6 +++---
 .../views/voice_messages/LiveRecordingWaveform.tsx     |  6 +++---
 src/utils/MarkedExecution.ts                           | 10 +++++-----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx
index 49d5dd66e1..2a20e9bfec 100644
--- a/src/components/views/voice_messages/LiveRecordingClock.tsx
+++ b/src/components/views/voice_messages/LiveRecordingClock.tsx
@@ -37,13 +37,13 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
     private scheduledUpdate = new MarkedExecution(
         () => this.updateClock(),
         () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
-    )
+    );
 
     constructor(props) {
         super(props);
         this.state = {
             seconds: 0,
-        }
+        };
     }
 
     componentDidMount() {
@@ -56,7 +56,7 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
     private updateClock() {
         this.setState({
             seconds: this.seconds,
-        })
+        });
     }
 
     public render() {
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index 640f7eb129..fdff8e87e7 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -25,7 +25,7 @@ interface IProps {
 }
 
 interface IState {
-    waveform: number[]
+    waveform: number[];
 }
 
 /**
@@ -41,13 +41,13 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
     private scheduledUpdate = new MarkedExecution(
         () => this.updateWaveform(),
         () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
-    )
+    );
 
     constructor(props) {
         super(props);
         this.state = {
             waveform: [],
-        }
+        };
     }
 
     componentDidMount() {
diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts
index 624ab499de..01cc91adce 100644
--- a/src/utils/MarkedExecution.ts
+++ b/src/utils/MarkedExecution.ts
@@ -22,7 +22,7 @@ limitations under the License.
  * The function starts unmarked.
  */
 export class MarkedExecution {
-    private _marked = false;
+    private marked = false;
 
     /**
      * Creates a MarkedExecution for the provided function.
@@ -37,22 +37,22 @@ export class MarkedExecution {
      * Resets the mark without calling the function.
      */
     public reset() {
-        this._marked = false;
+        this.marked = false;
     }
 
     /**
      * Marks the function to be called upon trigger().
      */
     public mark() {
-        if (!this._marked) this.onMarkCallback?.();
-        this._marked = true;
+        if (!this.marked) this.onMarkCallback?.();
+        this.marked = true;
     }
 
     /**
      * If marked, the function will be called, otherwise this does nothing.
      */
     public trigger() {
-        if (!this._marked) return;
+        if (!this.marked) return;
         this.reset(); // reset first just in case the fn() causes a trigger()
         this.fn();
     }

From d6cf2346fe3da5881eac8ab5a0b282f7da71848b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 28 Jun 2021 21:00:36 -0600
Subject: [PATCH 286/358] Manually conflict resolve
 https://github.com/matrix-org/matrix-react-sdk/pull/6240

---
 .../audio_messages/_PlaybackContainer.scss    |  5 ++
 .../audio_messages/LiveRecordingClock.tsx     | 30 ++++++++---
 .../audio_messages/LiveRecordingWaveform.tsx  | 49 ++++++++++-------
 .../views/audio_messages/Waveform.tsx         | 13 +++--
 .../views/rooms/VoiceRecordComposerTile.tsx   | 52 ++-----------------
 5 files changed, 68 insertions(+), 81 deletions(-)

diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index c1192f188b..fd01864bba 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -27,9 +27,14 @@ limitations under the License.
     display: flex;
     align-items: center;
 
+    contain: content;
+
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
+            height: 100%;
+            /* Variable set by a JS component */
+            transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress
diff --git a/src/components/views/audio_messages/LiveRecordingClock.tsx b/src/components/views/audio_messages/LiveRecordingClock.tsx
index 41909dc201..a9dbd3c52f 100644
--- a/src/components/views/audio_messages/LiveRecordingClock.tsx
+++ b/src/components/views/audio_messages/LiveRecordingClock.tsx
@@ -18,6 +18,7 @@ import React from "react";
 import { IRecordingUpdate, VoiceRecording } from "../../../voice/VoiceRecording";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
 
 interface IProps {
     recorder: VoiceRecording;
@@ -32,16 +33,31 @@ interface IState {
  */
 @replaceableComponent("views.audio_messages.LiveRecordingClock")
 export default class LiveRecordingClock extends React.PureComponent<IProps, IState> {
-    public constructor(props) {
-        super(props);
+    private seconds = 0;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateClock(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
 
-        this.state = {seconds: 0};
-        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
+    constructor(props) {
+        super(props);
+        this.state = {
+            seconds: 0,
+        };
     }
 
-    private onRecordingUpdate = (update: IRecordingUpdate) => {
-        this.setState({seconds: update.timeSeconds});
-    };
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            this.seconds = update.timeSeconds;
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private updateClock() {
+        this.setState({
+            seconds: this.seconds,
+        });
+    }
 
     public render() {
         return <Clock seconds={this.state.seconds} />;
diff --git a/src/components/views/audio_messages/LiveRecordingWaveform.tsx b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
index 27d165e613..6e88346cae 100644
--- a/src/components/views/audio_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
@@ -20,13 +20,14 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import { percentageOf } from "../../../utils/numbers";
 import Waveform from "./Waveform";
+import { MarkedExecution } from "../../../utils/MarkedExecution";
 
 interface IProps {
     recorder: VoiceRecording;
 }
 
 interface IState {
-    heights: number[];
+    waveform: number[];
 }
 
 /**
@@ -34,27 +35,35 @@ interface IState {
  */
 @replaceableComponent("views.audio_messages.LiveRecordingWaveform")
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
-    public constructor(props) {
-        super(props);
-
-        this.state = {heights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES)};
-        this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
-    }
-
-    private onRecordingUpdate = (update: IRecordingUpdate) => {
-        // The waveform and the downsample target are pretty close, so we should be fine to
-        // do this, despite the docs on arrayFastResample.
-        const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
-        this.setState({
-            // The incoming data is between zero and one, but typically even screaming into a
-            // microphone won't send you over 0.6, so we artificially adjust the gain for the
-            // waveform. This results in a slightly more cinematic/animated waveform for the
-            // user.
-            heights: bars.map(b => percentageOf(b, 0, 0.50)),
-        });
+    public static defaultProps = {
+        progress: 1,
     };
 
+    private waveform: number[] = [];
+    private scheduledUpdate = new MarkedExecution(
+        () => this.updateWaveform(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            waveform: [],
+        };
+    }
+
+    componentDidMount() {
+        this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
+            this.waveform = update.waveform;
+            this.scheduledUpdate.mark();
+        });
+    }
+
+    private updateWaveform() {
+        this.setState({ waveform: this.waveform });
+    }
+
     public render() {
-        return <Waveform relHeights={this.state.heights} />;
+        return <Waveform relHeights={this.state.waveform} />;
     }
 }
diff --git a/src/components/views/audio_messages/Waveform.tsx b/src/components/views/audio_messages/Waveform.tsx
index dc7551025e..3b7a881754 100644
--- a/src/components/views/audio_messages/Waveform.tsx
+++ b/src/components/views/audio_messages/Waveform.tsx
@@ -17,6 +17,11 @@ limitations under the License.
 import React from "react";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import classNames from "classnames";
+import { CSSProperties } from "react";
+
+interface WaveformCSSProperties extends CSSProperties {
+    '--barHeight': number;
+}
 
 interface IProps {
     relHeights: number[]; // relative heights (0-1)
@@ -40,10 +45,6 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
         progress: 1,
     };
 
-    public constructor(props) {
-        super(props);
-    }
-
     public render() {
         return <div className='mx_Waveform'>
             {this.props.relHeights.map((h, i) => {
@@ -53,7 +54,9 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
                     'mx_Waveform_bar': true,
                     'mx_Waveform_bar_100pct': isCompleteBar,
                 });
-                return <span key={i} style={{height: (h * 100) + '%'}} className={classes} />;
+                return <span key={i} style={{
+                    "--barHeight": h,
+                } as WaveformCSSProperties} className={classes} />;
             })}
         </div>;
     }
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index c5a196c377..4e8f258ee8 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -18,22 +18,18 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import React, {ReactNode} from "react";
 import {
-    IRecordingUpdate,
-    RECORDING_PLAYBACK_SAMPLES,
     RecordingState,
     VoiceRecording,
 } from "../../../voice/VoiceRecording";
 import {Room} from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
-import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
+import LiveRecordingWaveform from "../audio_messages/LiveRecordingWaveform";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { arrayFastResample, arraySeed } from "../../../utils/arrays";
-import { percentageOf } from "../../../utils/numbers";
-import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
+import LiveRecordingClock from "../audio_messages/LiveRecordingClock";
 import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
-import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
@@ -46,8 +42,6 @@ interface IProps {
 interface IState {
     recorder?: VoiceRecording;
     recordingPhase?: RecordingState;
-    relHeights: number[];
-    seconds: number;
 }
 
 /**
@@ -55,58 +49,18 @@ interface IState {
  */
 @replaceableComponent("views.rooms.VoiceRecordComposerTile")
 export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
-    private waveform: number[] = [];
-    private seconds = 0;
-    private scheduledAnimationFrame = false;
-
     public constructor(props) {
         super(props);
 
         this.state = {
             recorder: null, // no recording started by default
-            seconds: 0,
-            relHeights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES),
         };
     }
 
-    public componentDidUpdate(prevProps, prevState) {
-        if (!prevState.recorder && this.state.recorder) {
-            this.state.recorder.liveData.onUpdate(this.onRecordingUpdate);
-        }
-    }
-
     public async componentWillUnmount() {
         await VoiceRecordingStore.instance.disposeRecording();
     }
 
-    private onRecordingUpdate = (update: IRecordingUpdate): void => {
-        this.waveform = update.waveform;
-        this.seconds = update.timeSeconds;
-
-        if (this.scheduledAnimationFrame) {
-            return;
-        }
-
-        this.scheduledAnimationFrame = true;
-        // The audio recorder flushes data faster than the screen refresh rate
-        // Using requestAnimationFrame makes sure that we only flush the data
-        // to react once per tick to avoid unneeded work.
-        requestAnimationFrame(() => {
-            // The waveform and the downsample target are pretty close, so we should be fine to
-            // do this, despite the docs on arrayFastResample.
-            const bars = arrayFastResample(Array.from(this.waveform), RECORDING_PLAYBACK_SAMPLES);
-            this.setState({
-                // The incoming data is between zero and one, but typically even screaming into a
-                // microphone won't send you over 0.6, so we artificially adjust the gain for the
-                // waveform. This results in a slightly more cinematic/animated waveform for the
-                // user.
-                relHeights: bars.map(b => percentageOf(b, 0, 0.50)),
-                seconds: this.seconds,
-            });
-            this.scheduledAnimationFrame = false;
-        });
-    }
-
     // called by composer
     public async send() {
         if (!this.state.recorder) {

From 7a4ceec9858c38c3ff90912553df60ec5686f808 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 28 Jun 2021 21:02:42 -0600
Subject: [PATCH 287/358] Restore clamped dimensions on voice recorder waveform

---
 .../views/audio_messages/LiveRecordingWaveform.tsx       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/audio_messages/LiveRecordingWaveform.tsx b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
index 6e88346cae..b9c5f80f05 100644
--- a/src/components/views/audio_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/audio_messages/LiveRecordingWaveform.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import { IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording } from "../../../voice/VoiceRecording";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { arrayFastResample, arraySeed } from "../../../utils/arrays";
+import { arrayFastResample } from "../../../utils/arrays";
 import { percentageOf } from "../../../utils/numbers";
 import Waveform from "./Waveform";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
@@ -54,7 +54,12 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
 
     componentDidMount() {
         this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
-            this.waveform = update.waveform;
+            const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
+            // The incoming data is between zero and one, but typically even screaming into a
+            // microphone won't send you over 0.6, so we artificially adjust the gain for the
+            // waveform. This results in a slightly more cinematic/animated waveform for the
+            // user.
+            this.waveform = bars.map(b => percentageOf(b, 0, 0.50));
             this.scheduledUpdate.mark();
         });
     }

From 298bf30b185595b4bfb71945b5907602e5f6d6aa Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 29 Jun 2021 08:16:43 +0100
Subject: [PATCH 288/358] Fix editState not getting passed through

---
 src/components/structures/RoomView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 3e6cfa864a..aef2fbc9d4 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2071,6 +2071,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 resizeNotifier={this.props.resizeNotifier}
                 showReactions={true}
                 layout={this.state.layout}
+                editState={this.state.editState}
             />);
 
         let topUnreadMessagesBar = null;

From b60c2c5d55fa5fc1624b430bd831d986117e90dd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 29 Jun 2021 10:37:30 +0100
Subject: [PATCH 289/358] Fix e2e test right panel back behaviour

---
 test/end-to-end-tests/src/usecases/rightpanel.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/end-to-end-tests/src/usecases/rightpanel.js b/test/end-to-end-tests/src/usecases/rightpanel.js
index ae6bb2c771..00a8cde5a6 100644
--- a/test/end-to-end-tests/src/usecases/rightpanel.js
+++ b/test/end-to-end-tests/src/usecases/rightpanel.js
@@ -32,7 +32,11 @@ module.exports.goBackToRoomSummaryCard = async function(session) {
             // Sometimes our tests have this opened to MemberInfo
             await backButton.click();
         } catch (e) {
-            break; // stop trying to go further back
+            // explicitly check for TimeoutError as this sometimes returned
+            // `Error: Node is detached from document` due to a re-render race or similar
+            if (e.name === "TimeoutError") {
+                break; // stop trying to go further back
+            }
         }
     }
 };

From 652f57371a3fb7872a664149a77ef0645d30b203 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 29 Jun 2021 11:38:19 +0100
Subject: [PATCH 290/358] Migrate FilePanel to TypeScript

---
 .../{FilePanel.js => FilePanel.tsx}           | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)
 rename src/components/structures/{FilePanel.js => FilePanel.tsx} (89%)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.tsx
similarity index 89%
rename from src/components/structures/FilePanel.js
rename to src/components/structures/FilePanel.tsx
index bb7c1f9642..be467c8d5a 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.tsx
@@ -16,9 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {Filter} from 'matrix-js-sdk/src/filter';
+import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
+import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
+
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
@@ -28,25 +31,33 @@ import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
 import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
 import {replaceableComponent} from "../../utils/replaceableComponent";
 
+import ResizeNotifier from '../../utils/ResizeNotifier';
+
+interface IProps {
+    roomId: string;
+    onClose: () => void;
+    resizeNotifier: ResizeNotifier
+}
+
+interface IState {
+    timelineSet: EventTimelineSet;
+}
+
 /*
  * Component which shows the filtered file using a TimelinePanel
  */
 @replaceableComponent("structures.FilePanel")
-class FilePanel extends React.Component {
-    static propTypes = {
-        roomId: PropTypes.string.isRequired,
-        onClose: PropTypes.func.isRequired,
-    };
-
+class FilePanel extends React.Component<IProps, IState> {
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.
-    decryptingEvents = new Set();
+    private decryptingEvents = new Set<string>();
+    public noRoom: boolean;
 
     state = {
         timelineSet: null,
     };
 
-    onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
+    private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: true, removed: true, data: any) => {
         if (room?.roomId !== this.props?.roomId) return;
         if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
 
@@ -60,7 +71,7 @@ class FilePanel extends React.Component {
         }
     };
 
-    onEventDecrypted = (ev, err) => {
+    private onEventDecrypted = (ev: MatrixEvent, err?: any) => {
         if (ev.getRoomId() !== this.props.roomId) return;
         const eventId = ev.getId();
 
@@ -70,7 +81,7 @@ class FilePanel extends React.Component {
         this.addEncryptedLiveEvent(ev);
     };
 
-    addEncryptedLiveEvent(ev, toStartOfTimeline) {
+    public addEncryptedLiveEvent(ev: MatrixEvent) {
         if (!this.state.timelineSet) return;
 
         const timeline = this.state.timelineSet.getLiveTimeline();
@@ -84,7 +95,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    async componentDidMount() {
+    public async componentDidMount() {
         const client = MatrixClientPeg.get();
 
         await this.updateTimelineSet(this.props.roomId);
@@ -105,7 +116,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -117,7 +128,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    async fetchFileEventsServer(room) {
+    public async fetchFileEventsServer(room: Room) {
         const client = MatrixClientPeg.get();
 
         const filter = new Filter(client.credentials.userId);
@@ -141,7 +152,7 @@ class FilePanel extends React.Component {
         return timelineSet;
     }
 
-    onPaginationRequest = (timelineWindow, direction, limit) => {
+    private onPaginationRequest = (timelineWindow: TimelineWindow, direction: string, limit: number) => {
         const client = MatrixClientPeg.get();
         const eventIndex = EventIndexPeg.get();
         const roomId = this.props.roomId;
@@ -159,7 +170,7 @@ class FilePanel extends React.Component {
         }
     };
 
-    async updateTimelineSet(roomId: string) {
+    public async updateTimelineSet(roomId: string) {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
         const eventIndex = EventIndexPeg.get();
@@ -195,7 +206,7 @@ class FilePanel extends React.Component {
         }
     }
 
-    render() {
+    public render() {
         if (MatrixClientPeg.get().isGuest()) {
             return <BaseCard
                 className="mx_FilePanel mx_RoomView_messageListWrapper"

From 4cfdad8aa2158262882a158201c772acd046712a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 29 Jun 2021 11:59:13 +0100
Subject: [PATCH 291/358] Add spacing between toast buttons with cross browser
 support in mind

---
 res/css/structures/_ToastContainer.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
index 35d6087a1b..d248568740 100644
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@@ -134,12 +134,15 @@ limitations under the License.
         .mx_Toast_buttons {
             float: right;
             display: flex;
-            gap: 5px;
 
             .mx_AccessibleButton {
                 min-width: 96px;
                 box-sizing: border-box;
             }
+
+            .mx_AccessibleButton + .mx_AccessibleButton {
+                margin-left: 5px;
+            }
         }
 
         .mx_Toast_description {

From 56e05041fdb25f1896875c059d7398507a960450 Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Tue, 29 Jun 2021 12:13:41 +0100
Subject: [PATCH 292/358] Import curly spaces

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/FilePanel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index be467c8d5a..971892a2e5 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -17,19 +17,19 @@ limitations under the License.
 
 import React from 'react';
 
-import {Filter} from 'matrix-js-sdk/src/filter';
+import { Filter } from 'matrix-js-sdk/src/filter';
 import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
 import { MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 
 import * as sdk from '../../index';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
 import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
-import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 import ResizeNotifier from '../../utils/ResizeNotifier';
 

From db015519ed81af112f857c5bda0026bcbe0a0626 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 29 Jun 2021 12:18:41 +0100
Subject: [PATCH 293/358] Code style changes for FilePanel

---
 src/components/structures/FilePanel.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index 971892a2e5..7a5f10d3e0 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -19,7 +19,8 @@ import React from 'react';
 
 import { Filter } from 'matrix-js-sdk/src/filter';
 import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
-import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from 'matrix-js-sdk/src/models/room';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 
 import * as sdk from '../../index';
@@ -57,7 +58,7 @@ class FilePanel extends React.Component<IProps, IState> {
         timelineSet: null,
     };
 
-    private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: true, removed: true, data: any) => {
+    private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: true, removed: true, data: any): void => {
         if (room?.roomId !== this.props?.roomId) return;
         if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
 
@@ -71,7 +72,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     };
 
-    private onEventDecrypted = (ev: MatrixEvent, err?: any) => {
+    private onEventDecrypted = (ev: MatrixEvent, err?: any): void => {
         if (ev.getRoomId() !== this.props.roomId) return;
         const eventId = ev.getId();
 
@@ -81,7 +82,7 @@ class FilePanel extends React.Component<IProps, IState> {
         this.addEncryptedLiveEvent(ev);
     };
 
-    public addEncryptedLiveEvent(ev: MatrixEvent) {
+    public addEncryptedLiveEvent(ev: MatrixEvent): void {
         if (!this.state.timelineSet) return;
 
         const timeline = this.state.timelineSet.getLiveTimeline();
@@ -95,7 +96,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public async componentDidMount() {
+    public async componentDidMount(): Promise<void> {
         const client = MatrixClientPeg.get();
 
         await this.updateTimelineSet(this.props.roomId);
@@ -116,7 +117,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         const client = MatrixClientPeg.get();
         if (client === null) return;
 
@@ -128,7 +129,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public async fetchFileEventsServer(room: Room) {
+    public async fetchFileEventsServer(room: Room): Promise<void> {
         const client = MatrixClientPeg.get();
 
         const filter = new Filter(client.credentials.userId);
@@ -152,7 +153,7 @@ class FilePanel extends React.Component<IProps, IState> {
         return timelineSet;
     }
 
-    private onPaginationRequest = (timelineWindow: TimelineWindow, direction: string, limit: number) => {
+    private onPaginationRequest = (timelineWindow: TimelineWindow, direction: string, limit: number): void => {
         const client = MatrixClientPeg.get();
         const eventIndex = EventIndexPeg.get();
         const roomId = this.props.roomId;
@@ -170,7 +171,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     };
 
-    public async updateTimelineSet(roomId: string) {
+    public async updateTimelineSet(roomId: string): Promise<void> {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
         const eventIndex = EventIndexPeg.get();

From 2d3163fef502c65f83a2d76a84b2fddda3803478 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 12 Mar 2021 15:49:47 +0000
Subject: [PATCH 294/358] Remove Flow support

We no longer use Flow, so this removes linting and compiling support. New code
should use TypeScript for static typing.
---
 .flowconfig               |  6 ---
 babel.config.js           |  2 -
 package.json              |  3 --
 src/SendHistoryManager.ts |  1 -
 yarn.lock                 | 84 +++++++++++++++------------------------
 5 files changed, 33 insertions(+), 63 deletions(-)
 delete mode 100644 .flowconfig

diff --git a/.flowconfig b/.flowconfig
deleted file mode 100644
index 81770c6585..0000000000
--- a/.flowconfig
+++ /dev/null
@@ -1,6 +0,0 @@
-[include]
-src/**/*.js
-test/**/*.js
-
-[ignore]
-node_modules/
diff --git a/babel.config.js b/babel.config.js
index 0a3a34a391..f00e83652c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,7 +10,6 @@ module.exports = {
             ],
         }],
         "@babel/preset-typescript",
-        "@babel/preset-flow",
         "@babel/preset-react",
     ],
     "plugins": [
@@ -19,7 +18,6 @@ module.exports = {
         "@babel/plugin-proposal-numeric-separator",
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-transform-flow-comments",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
     ],
diff --git a/package.json b/package.json
index bae7b1e4cf..c3a9e7c568 100644
--- a/package.json
+++ b/package.json
@@ -110,10 +110,8 @@
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-proposal-numeric-separator": "^7.12.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-flow-comments": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
@@ -150,7 +148,6 @@
     "eslint": "7.18.0",
     "eslint-config-matrix-org": "^0.2.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",
diff --git a/src/SendHistoryManager.ts b/src/SendHistoryManager.ts
index e9268ad642..41713a1384 100644
--- a/src/SendHistoryManager.ts
+++ b/src/SendHistoryManager.ts
@@ -1,4 +1,3 @@
-//@flow
 /*
 Copyright 2017 Aviral Dasgupta
 
diff --git a/yarn.lock b/yarn.lock
index 3bcb8de404..8ed1d890f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -59,7 +59,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.12.1", "@babel/generator@^7.12.10", "@babel/generator@^7.12.11":
+"@babel/generator@^7.12.10", "@babel/generator@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
   integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==
@@ -494,13 +494,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz#a77670d9abe6d63e8acadf4c31bb1eb5a506bbdd"
-  integrity sha512-1lBLLmtxrwpm4VKmtVFselI/P3pX+G63fAtUUt6b2Nzgao77KNDwyuRt90Mj2/9pKobtt68FdvjfqohZjg/FCA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
@@ -659,23 +652,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-flow-comments@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-comments/-/plugin-transform-flow-comments-7.12.1.tgz#92fe5a27e635bd6d2e46f616094d60edff895a0b"
-  integrity sha512-jQd0UQUg98j95JJVQL74mOrzES7dYyd8hy+ZDiMj1wjHw1Nj0Pzkk7tKZdqqAoSZV/yTYLp0lJ0/PTozy2cNDg==
-  dependencies:
-    "@babel/generator" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-flow" "^7.12.1"
-
-"@babel/plugin-transform-flow-strip-types@^7.12.1":
-  version "7.12.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.10.tgz#d85e30ecfa68093825773b7b857e5085bbd32c95"
-  integrity sha512-0ti12wLTLeUIzu9U7kjqIn4MyOL7+Wibc7avsHhj4o1l5C0ATs8p2IMHrVYjm9t9wzhfEO6S3kxax0Rpdo8LTg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-flow" "^7.12.1"
-
 "@babel/plugin-transform-for-of@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
@@ -967,14 +943,6 @@
     core-js-compat "^3.8.0"
     semver "^5.5.0"
 
-"@babel/preset-flow@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940"
-  integrity sha512-UAoyMdioAhM6H99qPoKvpHMzxmNVXno8GYU/7vZmGaHk6/KqfDYL1W0NxszVbJ2EP271b7e6Ox+Vk2A9QsB3Sw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-flow-strip-types" "^7.12.1"
-
 "@babel/preset-modules@^0.1.3":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
@@ -3351,14 +3319,6 @@ eslint-plugin-babel@^5.2.1, eslint-plugin-babel@^5.3.1:
   dependencies:
     eslint-rule-composer "^0.3.0"
 
-eslint-plugin-flowtype@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261"
-  integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ==
-  dependencies:
-    lodash "^4.17.15"
-    string-natural-compare "^3.0.1"
-
 eslint-plugin-import@^2.14.0:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
@@ -3559,7 +3519,14 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1, esquery@^1.2.0:
+esquery@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esquery@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
   integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
@@ -4177,11 +4144,16 @@ gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graceful-fs@^4.1.2:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4597,7 +4569,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.1.0:
+is-core-module@^2.1.0, is-core-module@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
   integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
@@ -7179,7 +7151,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.18.1:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.18.1:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
   integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
@@ -7187,6 +7159,14 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.1
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
+resolve@^1.13.1:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -7247,13 +7227,20 @@ run-parallel@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
   integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
 
-rxjs@^6.5.2, rxjs@^6.6.0:
+rxjs@^6.5.2:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
   integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.6.0:
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
+  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -7609,11 +7596,6 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-string-natural-compare@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
-  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
-
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"

From 71116bfa2735d3da7dd3a35e95220dca25f6d1b4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 1 Apr 2021 13:17:09 +0100
Subject: [PATCH 295/358] Migrate to `eslint-plugin-matrix-org`

This migrates to the new plugin form of our custom ESLint configs. As part of
this, some packages are de-duplicated, configs streamlined, etc.
---
 .eslintrc.js      |  35 +-
 package.json      |  11 +-
 test/.eslintrc.js |   2 +-
 yarn.lock         | 794 ++++++++++------------------------------------
 4 files changed, 208 insertions(+), 634 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c759eae9e3..07ec40ef03 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,10 @@
 module.exports = {
-    extends: ["matrix-org", "matrix-org/react-legacy"],
-    parser: "babel-eslint",
-
+    plugins: ["matrix-org"],
+    extends: [
+        "plugin:matrix-org/javascript",
+        "plugin:matrix-org/react",
+    ],
+    parser: "@babel/eslint-parser",
     env: {
         browser: true,
         node: true,
@@ -15,12 +18,30 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-    },
+        "no-extra-boolean-cast": "off",
 
+        // Bind or arrow functions in props causes performance issues (but we
+        // currently use them in some places).
+        // It's disabled here, but we should using it sparingly.
+        "react/jsx-no-bind": "off",
+        "react/jsx-key": ["error"],
+    },
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
-        "extends": ["matrix-org/ts"],
+        "files": [
+            "src/**/*.{ts,tsx}",
+            "test/**/*.{ts,tsx}",
+        ],
+        "extends": [
+            "plugin:matrix-org/typescript",
+            "plugin:matrix-org/react",
+        ],
         "rules": {
+            // Things we do that break the ideal style
+            "prefer-promise-reject-errors": "off",
+            "quotes": "off",
+            "indent": "off",
+            "no-extra-boolean-cast": "off",
+
             // We're okay being explicit at the moment
             "@typescript-eslint/no-empty-interface": "off",
             // We disable this while we're transitioning
@@ -28,8 +49,6 @@ module.exports = {
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
 
-            "quotes": "off",
-            "no-extra-boolean-cast": "off",
             "no-restricted-properties": [
                 "error",
                 ...buildRestrictedPropertiesOptions(
diff --git a/package.json b/package.json
index c3a9e7c568..4ad585ba7d 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,8 @@
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
     "@babel/parser": "^7.12.11",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.12",
@@ -137,17 +139,16 @@
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "eslint": "7.18.0",
-    "eslint-config-matrix-org": "^0.2.0",
-    "eslint-plugin-babel": "^5.3.1",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",
diff --git a/test/.eslintrc.js b/test/.eslintrc.js
index 537f989b62..c46b24aa57 100644
--- a/test/.eslintrc.js
+++ b/test/.eslintrc.js
@@ -5,6 +5,6 @@ module.exports = {
 
     // mocha defines a 'this'
     rules: {
-        "babel/no-invalid-this": "off",
+        "@babel/no-invalid-this": "off",
     },
 };
diff --git a/yarn.lock b/yarn.lock
index 8ed1d890f0..89e11fcea5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,12 +26,12 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
-  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+"@babel/code-frame@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
   dependencies:
-    "@babel/highlight" "^7.12.13"
+    "@babel/highlight" "^7.14.5"
 
 "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
   version "7.12.7"
@@ -59,6 +59,22 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/eslint-parser@^7.12.10":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.13.14.tgz#f80fd23bdd839537221914cb5d17720a5ea6ba3a"
+  integrity sha512-I0HweR36D73Ibn/FfrRDMKlMqJHFwidIUgYdMpH+aXYuQC+waq59YaJ6t9e9N36axJ82v1jR041wwqDrDXEwRA==
+  dependencies:
+    eslint-scope "^5.1.0"
+    eslint-visitor-keys "^1.3.0"
+    semver "^6.3.0"
+
+"@babel/eslint-plugin@^7.12.10":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-plugin/-/eslint-plugin-7.13.10.tgz#6720c32d52a4fef817796c7bb55a87b80320bbe7"
+  integrity sha512-xsNxo099fKnJ2rArkuuMOTPxxTLZSXwbFXdH4GjqQRKTOr6S1odQlE+R3Leid56VFQ3KVAR295vVNG9fqNQVvQ==
+  dependencies:
+    eslint-rule-composer "^0.3.0"
+
 "@babel/generator@^7.12.10", "@babel/generator@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
@@ -68,12 +84,12 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.13.16":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
-  integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
+"@babel/generator@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
+  integrity sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==
   dependencies:
-    "@babel/types" "^7.13.16"
+    "@babel/types" "^7.14.5"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -146,14 +162,14 @@
     "@babel/template" "^7.12.7"
     "@babel/types" "^7.12.11"
 
-"@babel/helper-function-name@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
-  integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
+"@babel/helper-function-name@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
+  integrity sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/types" "^7.12.13"
+    "@babel/helper-get-function-arity" "^7.14.5"
+    "@babel/template" "^7.14.5"
+    "@babel/types" "^7.14.5"
 
 "@babel/helper-get-function-arity@^7.12.10":
   version "7.12.10"
@@ -162,12 +178,12 @@
   dependencies:
     "@babel/types" "^7.12.10"
 
-"@babel/helper-get-function-arity@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
-  integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
+"@babel/helper-get-function-arity@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
+  integrity sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.14.5"
 
 "@babel/helper-hoist-variables@^7.10.4":
   version "7.10.4"
@@ -176,6 +192,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-hoist-variables@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
+  integrity sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
 "@babel/helper-member-expression-to-functions@^7.12.1", "@babel/helper-member-expression-to-functions@^7.12.7":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855"
@@ -257,18 +280,23 @@
   dependencies:
     "@babel/types" "^7.12.11"
 
-"@babel/helper-split-export-declaration@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
-  integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
+"@babel/helper-split-export-declaration@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
+  integrity sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.14.5"
 
 "@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f"
@@ -302,24 +330,24 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+"@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.5"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.7.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
   integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
 
-"@babel/parser@^7.12.13", "@babel/parser@^7.13.16":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
-  integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
+"@babel/parser@^7.13.16", "@babel/parser@^7.14.5", "@babel/parser@^7.14.7":
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.7.tgz#6099720c8839ca865a2637e6c85852ead0bdb595"
+  integrity sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==
 
 "@babel/plugin-proposal-async-generator-functions@^7.12.1":
   version "7.12.12"
@@ -1008,16 +1036,16 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
-"@babel/template@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
-  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
+"@babel/template@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
+  integrity sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==
   dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/parser" "^7.12.13"
-    "@babel/types" "^7.12.13"
+    "@babel/code-frame" "^7.14.5"
+    "@babel/parser" "^7.14.5"
+    "@babel/types" "^7.14.5"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.12", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.12", "@babel/traverse@^7.12.5":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
   integrity sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==
@@ -1033,20 +1061,21 @@
     lodash "^4.17.19"
 
 "@babel/traverse@^7.13.17":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.17.tgz#c85415e0c7d50ac053d758baec98b28b2ecfeea3"
-  integrity sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.7.tgz#64007c9774cfdc3abd23b0780bc18a3ce3631753"
+  integrity sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==
   dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.16"
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.13.16"
-    "@babel/types" "^7.13.17"
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.14.5"
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-hoist-variables" "^7.14.5"
+    "@babel/helper-split-export-declaration" "^7.14.5"
+    "@babel/parser" "^7.14.7"
+    "@babel/types" "^7.14.5"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.12.12"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299"
   integrity sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==
@@ -1055,12 +1084,12 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.13", "@babel/types@^7.13.16", "@babel/types@^7.13.17":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
-  integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
+"@babel/types@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
+  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
 "@bcoe/v8-coverage@^0.2.3":
@@ -1302,7 +1331,6 @@
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz":
   version "3.2.3"
-  uid cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4
   resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4"
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents":
@@ -1533,11 +1561,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
-
 "@types/linkifyjs@^2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.3.tgz#80195c3c88c5e75d9f660e3046ce4a42be2c2fa4"
@@ -1693,13 +1716,13 @@
   resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609"
   integrity sha512-GQLOT+SN20a+AI51y3fAimhyTF4Y0RG+YP3gf91OibIZ7CJmPFgoZi+ZR5a+vRbS01LbQosITWum4ATmJ1Z6Pg==
 
-"@typescript-eslint/eslint-plugin@^4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.14.0.tgz#92db8e7c357ed7d69632d6843ca70b71be3a721d"
-  integrity sha512-IJ5e2W7uFNfg4qh9eHkHRUCbgZ8VKtGwD07kannJvM5t/GU8P8+24NX8gi3Hf5jST5oWPY8kyV1s/WtfiZ4+Ww==
+"@typescript-eslint/eslint-plugin@^4.17.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.20.0.tgz#9d8794bd99aad9153092ad13c96164e3082e9a92"
+  integrity sha512-sw+3HO5aehYqn5w177z2D82ZQlqHCwcKSMboueo7oE4KU9QiC0SAgfS/D4z9xXvpTc8Bt41Raa9fBR8T2tIhoQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.14.0"
-    "@typescript-eslint/scope-manager" "4.14.0"
+    "@typescript-eslint/experimental-utils" "4.20.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     lodash "^4.17.15"
@@ -1707,61 +1730,60 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.14.0.tgz#5aa7b006736634f588a69ee343ca959cd09988df"
-  integrity sha512-6i6eAoiPlXMKRbXzvoQD5Yn9L7k9ezzGRvzC/x1V3650rUk3c3AOjQyGYyF9BDxQQDK2ElmKOZRD0CbtdkMzQQ==
+"@typescript-eslint/experimental-utils@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.20.0.tgz#a8ab2d7b61924f99042b7d77372996d5f41dc44b"
+  integrity sha512-sQNlf6rjLq2yB5lELl3gOE7OuoA/6IVXJUJ+Vs7emrQMva14CkOwyQwD7CW+TkmOJ4Q/YGmoDLmbfFrpGmbKng==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.14.0"
-    "@typescript-eslint/types" "4.14.0"
-    "@typescript-eslint/typescript-estree" "4.14.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/typescript-estree" "4.20.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.14.0.tgz#62d4cd2079d5c06683e9bfb200c758f292c4dee7"
-  integrity sha512-sUDeuCjBU+ZF3Lzw0hphTyScmDDJ5QVkyE21pRoBo8iDl7WBtVFS+WDN3blY1CH3SBt7EmYCw6wfmJjF0l/uYg==
+"@typescript-eslint/parser@^4.17.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.20.0.tgz#8dd403c8b4258b99194972d9799e201b8d083bdd"
+  integrity sha512-m6vDtgL9EABdjMtKVw5rr6DdeMCH3OA1vFb0dAyuZSa3e5yw1YRzlwFnm9knma9Lz6b2GPvoNSa8vOXrqsaglA==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.14.0"
-    "@typescript-eslint/types" "4.14.0"
-    "@typescript-eslint/typescript-estree" "4.14.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/typescript-estree" "4.20.0"
     debug "^4.1.1"
 
-"@typescript-eslint/scope-manager@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.14.0.tgz#55a4743095d684e1f7b7180c4bac2a0a3727f517"
-  integrity sha512-/J+LlRMdbPh4RdL4hfP1eCwHN5bAhFAGOTsvE6SxsrM/47XQiPSgF5MDgLyp/i9kbZV9Lx80DW0OpPkzL+uf8Q==
+"@typescript-eslint/scope-manager@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.20.0.tgz#953ecbf3b00845ece7be66246608be9d126d05ca"
+  integrity sha512-/zm6WR6iclD5HhGpcwl/GOYDTzrTHmvf8LLLkwKqqPKG6+KZt/CfSgPCiybshmck66M2L5fWSF/MKNuCwtKQSQ==
   dependencies:
-    "@typescript-eslint/types" "4.14.0"
-    "@typescript-eslint/visitor-keys" "4.14.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/visitor-keys" "4.20.0"
 
-"@typescript-eslint/types@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.14.0.tgz#d8a8202d9b58831d6fd9cee2ba12f8a5a5dd44b6"
-  integrity sha512-VsQE4VvpldHrTFuVPY1ZnHn/Txw6cZGjL48e+iBxTi2ksa9DmebKjAeFmTVAYoSkTk7gjA7UqJ7pIsyifTsI4A==
+"@typescript-eslint/types@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.20.0.tgz#c6cf5ef3c9b1c8f699a9bbdafb7a1da1ca781225"
+  integrity sha512-cYY+1PIjei1nk49JAPnH1VEnu7OYdWRdJhYI5wiKOUMhLTG1qsx5cQxCUTuwWCmQoyriadz3Ni8HZmGSofeC+w==
 
-"@typescript-eslint/typescript-estree@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.14.0.tgz#4bcd67486e9acafc3d0c982b23a9ab8ac8911ed7"
-  integrity sha512-wRjZ5qLao+bvS2F7pX4qi2oLcOONIB+ru8RGBieDptq/SudYwshveORwCVU4/yMAd4GK7Fsf8Uq1tjV838erag==
+"@typescript-eslint/typescript-estree@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.20.0.tgz#8b3b08f85f18a8da5d88f65cb400f013e88ab7be"
+  integrity sha512-Knpp0reOd4ZsyoEJdW8i/sK3mtZ47Ls7ZHvD8WVABNx5Xnn7KhenMTRGegoyMTx6TiXlOVgMz9r0pDgXTEEIHA==
   dependencies:
-    "@typescript-eslint/types" "4.14.0"
-    "@typescript-eslint/visitor-keys" "4.14.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/visitor-keys" "4.20.0"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
-    lodash "^4.17.15"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/visitor-keys@4.14.0":
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.14.0.tgz#b1090d9d2955b044b2ea2904a22496849acbdf54"
-  integrity sha512-MeHHzUyRI50DuiPgV9+LxcM52FCJFYjJiWHtXlbyC27b80mfOwKeiKI+MHOTEpcpfmoPFm/vvQS88bYIx6PZTA==
+"@typescript-eslint/visitor-keys@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.20.0.tgz#1e84db034da13f208325e6bfc995c3b75f7dbd62"
+  integrity sha512-NXKRM3oOVQL8yNFDNCZuieRIwZ5UtjNLYtmMx2PacEAGmbaEYtGgVHUHVyZvU/0rYZcizdrWjDo+WBtRPSgq+A==
   dependencies:
-    "@typescript-eslint/types" "4.14.0"
+    "@typescript-eslint/types" "4.20.0"
     eslint-visitor-keys "^2.0.0"
 
 "@wojtekmaj/enzyme-adapter-react-17@^0.6.1":
@@ -1802,7 +1824,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@@ -1817,7 +1839,7 @@ acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -1995,11 +2017,6 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -2048,18 +2065,6 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-babel-eslint@^10.0.1, babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
 babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
@@ -2356,7 +2361,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2401,11 +2406,6 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
 cheerio-select@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.4.0.tgz#3a16f21e37a2ef0f211d6d1aa4eff054bb22cdc9"
@@ -2470,18 +2470,6 @@ classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-width@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
-  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
-
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -2611,11 +2599,6 @@ concurrently@^5.3.0:
     tree-kill "^1.2.2"
     yargs "^13.3.0"
 
-contains-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
-  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
-
 content-type@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
@@ -2685,7 +2668,7 @@ cross-fetch@^3.0.4:
   dependencies:
     node-fetch "2.6.1"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -2786,7 +2769,7 @@ date-names@^0.1.11:
   resolved "https://registry.yarnpkg.com/date-names/-/date-names-0.1.13.tgz#c4358f6f77c8056e2f5ea68fdbb05f0bf1e53bd0"
   integrity sha512-IxxoeD9tdx8pXVcmqaRlPvrXIsSrSrIZzfzlOkm9u+hyzKp5Wk/odt9O/gd7Ockzy8n/WHeEpTVJ2bF3mMV4LA==
 
-debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2909,14 +2892,6 @@ discontinuous-range@1.0.0:
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
   integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
 
-doctrine@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
-  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -3114,7 +3089,7 @@ enzyme@^3.11.0:
     rst-selector-parser "^2.2.3"
     string.prototype.trim "^1.2.1"
 
-error-ex@^1.2.0, error-ex@^1.3.1:
+error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -3240,123 +3215,21 @@ escodegen@^1.14.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-esnext@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-esnext/-/eslint-config-esnext-4.1.0.tgz#8695b858fcf40d28c1aedca181f700528c7b60c6"
-  integrity sha512-GhfVEXdqYKEIIj7j+Fw2SQdL9qyZMekgXfq6PyXM66cQw0B435ddjz3P3kxOBVihMRJ0xGYjosaveQz5Y6z0uA==
-  dependencies:
-    babel-eslint "^10.0.1"
-    eslint "^6.8.0"
-    eslint-plugin-babel "^5.2.1"
-    eslint-plugin-import "^2.14.0"
-
 eslint-config-google@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/eslint-config-google/-/eslint-config-google-0.14.0.tgz#4f5f8759ba6e11b424294a219dbfa18c508bcc1a"
   integrity sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==
 
-eslint-config-matrix-org@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-matrix-org/-/eslint-config-matrix-org-0.2.0.tgz#27571c7c3a9ab6cc1e9d0f3d53a3739d1b004a7f"
-  integrity sha512-Hwgm1Qk0atjWgj5SWxpFPvxy6k6bDlPb9Pqjvb1i59nx8Zm6jDPy1C5vKQpkFpc0ntr+gJHa+ejYhuhaofu6Mw==
-  dependencies:
-    "@typescript-eslint/eslint-plugin" "^4.14.0"
-    "@typescript-eslint/parser" "^4.14.0"
-    babel-eslint "^10.1.0"
-    eslint-config-google "^0.14.0"
-    eslint-config-recommended "^4.1.0"
-    eslint-plugin-babel "^5.3.1"
-    typescript "^4.1.3"
-
-eslint-config-node@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-node/-/eslint-config-node-4.1.0.tgz#fc1f13946d83766d6b83b0e67699e2071a56f417"
-  integrity sha512-Wz17xV5O2WFG8fGdMYEBdbiL6TL7YNJSJvSX9V4sXQownewfYmoqlly7wxqLkOUv/57pq6LnnotMiQQrrPjCqQ==
-  dependencies:
-    eslint "^6.8.0"
-    eslint-config-esnext "^4.1.0"
-
-eslint-config-react-native@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-native/-/eslint-config-react-native-4.1.0.tgz#63e9401c7fac146804785f609e7df8f15b3e04eb"
-  integrity sha512-kNND+cs+ztawH7wgajf/K6FfNshjlDsFDAkkFZF9HAXDgH1w1sNMIfTfwzufg0hOcSK7rbiL4qbG/gg/oR507Q==
-  dependencies:
-    eslint "^6.8.0"
-    eslint-config-esnext "^4.1.0"
-    eslint-plugin-react "^7.19.0"
-    eslint-plugin-react-native "^3.8.1"
-
-eslint-config-recommended@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-recommended/-/eslint-config-recommended-4.1.0.tgz#1adff90e0716d439be471d192977f233de171a46"
-  integrity sha512-2evA0SX1VqtyFiExmBI2WAO4XQCKlr7wmNELE8rcT5PyZY2ixsY881ofVZWKuI/dywpgLiES1gR/XUQcnVLRzQ==
-  dependencies:
-    eslint "^6.8.0"
-    eslint-config-esnext "^4.1.0"
-    eslint-config-node "^4.1.0"
-    eslint-config-react-native "^4.1.0"
-
-eslint-import-resolver-node@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
-  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
-  dependencies:
-    debug "^2.6.9"
-    resolve "^1.13.1"
-
-eslint-module-utils@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
-  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
-  dependencies:
-    debug "^2.6.9"
-    pkg-dir "^2.0.0"
-
-eslint-plugin-babel@^5.2.1, eslint-plugin-babel@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-5.3.1.tgz#75a2413ffbf17e7be57458301c60291f2cfbf560"
-  integrity sha512-VsQEr6NH3dj664+EyxJwO4FCYm/00JhYb3Sk3ft8o+fpKuIfQ9TaW6uVUfvwMXHcf/lsnRIoyFPsLMyiWCSL/g==
-  dependencies:
-    eslint-rule-composer "^0.3.0"
-
-eslint-plugin-import@^2.14.0:
-  version "2.22.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
-  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
-  dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flat "^1.2.3"
-    contains-path "^0.1.0"
-    debug "^2.6.9"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-module-utils "^2.6.0"
-    has "^1.0.3"
-    minimatch "^3.0.4"
-    object.values "^1.1.1"
-    read-pkg-up "^2.0.0"
-    resolve "^1.17.0"
-    tsconfig-paths "^3.9.0"
+"eslint-plugin-matrix-org@github:matrix-org/eslint-plugin-matrix-org#main":
+  version "0.3.2"
+  resolved "https://codeload.github.com/matrix-org/eslint-plugin-matrix-org/tar.gz/28d392822533a7468be0dd806d0a4ba573a45d74"
 
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
   integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
 
-eslint-plugin-react-native-globals@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native-globals/-/eslint-plugin-react-native-globals-0.1.2.tgz#ee1348bc2ceb912303ce6bdbd22e2f045ea86ea2"
-  integrity sha512-9aEPf1JEpiTjcFAmmyw8eiIXmcNZOqaZyHO77wgm0/dWfT/oxC1SrIq8ET38pMxHYrcB6Uew+TzUVsBeczF88g==
-
-eslint-plugin-react-native@^3.8.1:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.10.0.tgz#240f7e6979a908af3dfd9ba9652434c33f4d64cd"
-  integrity sha512-4f5+hHYYq5wFhB5eptkPEAR7FfvqbS7AzScUOANfAMZtYw5qgnCxRq45bpfBaQF+iyPMim5Q8pubcpvLv75NAg==
-  dependencies:
-    "@babel/traverse" "^7.7.4"
-    eslint-plugin-react-native-globals "^0.1.1"
-
-eslint-plugin-react@^7.19.0, eslint-plugin-react@^7.22.0:
+eslint-plugin-react@^7.22.0:
   version "7.22.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz#3d1c542d1d3169c45421c1215d9470e341707269"
   integrity sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA==
@@ -3378,7 +3251,7 @@ eslint-rule-composer@^0.3.0:
   resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
   integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
 
-eslint-scope@^5.0.0, eslint-scope@^5.1.1:
+eslint-scope@^5.0.0, eslint-scope@^5.1.0, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -3386,13 +3259,6 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
 eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
@@ -3400,7 +3266,7 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
@@ -3453,58 +3319,6 @@ eslint@7.18.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-eslint@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
-  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.10.0"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^1.4.3"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.1.2"
-    esquery "^1.0.1"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    inquirer "^7.0.0"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.14"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    optionator "^0.8.3"
-    progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^6.1.2"
-    strip-ansi "^5.2.0"
-    strip-json-comments "^3.0.1"
-    table "^5.2.3"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-espree@^6.1.2:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
 espree@^7.3.0, espree@^7.3.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
@@ -3519,13 +3333,6 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
-  dependencies:
-    estraverse "^5.1.0"
-
 esquery@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
@@ -3670,15 +3477,6 @@ extend@^3.0.0, extend@~3.0.2:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -3783,20 +3581,6 @@ fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
-figures@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
-  dependencies:
-    flat-cache "^2.0.1"
-
 file-entry-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a"
@@ -3840,13 +3624,6 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -3862,15 +3639,6 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -3879,11 +3647,6 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flatted@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
-
 flatted@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
@@ -4120,7 +3883,19 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-globby@^11.0.1, globby@^11.0.2:
+globby@^11.0.1:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
+  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
+globby@^11.0.2:
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83"
   integrity sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==
@@ -4149,11 +3924,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
-graceful-fs@^4.1.2:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4339,7 +4109,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4432,25 +4202,6 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-inquirer@^7.0.0:
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
-  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-width "^3.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.19"
-    mute-stream "0.0.8"
-    run-async "^2.4.0"
-    rxjs "^6.6.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-
 internal-slot@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
@@ -4569,7 +4320,7 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.1.0, is-core-module@^2.2.0:
+is-core-module@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
   integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
@@ -4848,7 +4599,7 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -5455,13 +5206,6 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
 json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
@@ -5538,14 +5282,6 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levn@^0.3.0, levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -5554,6 +5290,14 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -5564,24 +5308,6 @@ linkifyjs@^2.1.9:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
   integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
 
-load-json-file@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
-  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
-    strip-bom "^3.0.0"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -5617,7 +5343,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5905,13 +5631,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
 moo-color@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
@@ -5934,11 +5653,6 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
 nanoid@^3.1.20:
   version "3.1.20"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
@@ -6223,7 +5937,7 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
-optionator@^0.8.1, optionator@^0.8.3:
+optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
   integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
@@ -6252,11 +5966,6 @@ opus-recorder@^8.0.3:
   resolved "https://registry.yarnpkg.com/opus-recorder/-/opus-recorder-8.0.3.tgz#f7b44f8f68500c9b96a15042a69f915fd9c1716d"
   integrity sha512-8vXGiRwlJAavT9D3yYzukNVXQ8vEcKHcsQL/zXO24DQtJ0PLXvoPHNQPJrbMCdB4ypJgWDExvHF4JitQDL7dng==
 
-os-tmpdir@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
 p-each-series@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
@@ -6267,13 +5976,6 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -6281,13 +5983,6 @@ p-limit@^2.0.0, p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -6302,11 +5997,6 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -6336,13 +6026,6 @@ parse-entities@^2.0.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-json@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
-  dependencies:
-    error-ex "^1.2.0"
-
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -6423,13 +6106,6 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-path-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
-  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
-  dependencies:
-    pify "^2.0.0"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -6445,11 +6121,6 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-pify@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -6467,13 +6138,6 @@ pirates@^4.0.0, pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -6857,14 +6521,6 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-read-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
-  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^2.0.0"
-
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -6874,15 +6530,6 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
-read-pkg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
-  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
-  dependencies:
-    load-json-file "^2.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^2.0.0"
-
 read-pkg@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
@@ -6995,11 +6642,6 @@ regexp.prototype.flags@^1.3.0:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
-
 regexpp@^3.0.0, regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -7151,7 +6793,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.18.1:
+resolve@^1.10.0, resolve@^1.17.0, resolve@^1.18.1:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
   integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
@@ -7159,22 +6801,6 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.18.1:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.13.1:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
@@ -7190,13 +6816,6 @@ rfc4648@^1.4.0:
   resolved "https://registry.yarnpkg.com/rfc4648/-/rfc4648-1.4.0.tgz#c75b2856ad2e2d588b6ddb985d556f1f7f2a2abd"
   integrity sha512-3qIzGhHlMHA6PoT6+cdPKZ+ZqtxkIvg8DZGKA5z6PQ33/uuhoJ+Ws/D/J9rXW6gXodgH8QYlz2UCl+sdUDmNIg==
 
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -7217,11 +6836,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-run-async@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
-  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
-
 run-parallel@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
@@ -7234,13 +6848,6 @@ rxjs@^6.5.2:
   dependencies:
     tslib "^1.9.0"
 
-rxjs@^6.6.0:
-  version "6.6.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
-  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
-  dependencies:
-    tslib "^1.9.0"
-
 safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -7316,7 +6923,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^6.0.0, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -7406,15 +7013,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
 slice-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
@@ -7701,11 +7299,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
 strip-bom@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
@@ -7728,7 +7321,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -7861,16 +7454,6 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
 table@^6.0.4, table@^6.0.7:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/table/-/table-6.0.7.tgz#e45897ffbcc1bcf9e8a87bf420f2c9e5a7a52a34"
@@ -7913,11 +7496,6 @@ throat@^5.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
   integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-
 tiny-invariant@^1.0.6:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
@@ -7928,13 +7506,6 @@ tmatch@^2.0.1:
   resolved "https://registry.yarnpkg.com/tmatch/-/tmatch-2.0.1.tgz#0c56246f33f30da1b8d3d72895abaf16660f38cf"
   integrity sha1-DFYkbzPzDaG409colauvFmYPOM8=
 
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -8016,16 +7587,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-tsconfig-paths@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
-  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
-    strip-bom "^3.0.0"
-
 tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -8042,9 +7603,9 @@ tslib@^2.2.0:
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
 
 tsutils@^3.17.1:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.19.1.tgz#d8566e0c51c82f32f9c25a4d367cd62409a547a9"
-  integrity sha512-GEdoBf5XI324lu7ycad7s6laADfnAqCw6wLGI+knxvw9vsIYBaJfYdmeCEG3FMMUiSm3OGgNb+m6utsWf5h9Vw==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
   dependencies:
     tslib "^1.8.1"
 
@@ -8483,13 +8044,6 @@ write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
 ws@^7.2.3:
   version "7.4.6"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"

From 4c5720a573591db93871cf6a47d04c842b444b60 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 1 Apr 2021 13:26:00 +0100
Subject: [PATCH 296/358] Update lint comments

---
 src/components/views/elements/Validation.tsx | 2 +-
 src/components/views/rooms/RoomHeader.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx
index 1b0659ab9b..8697c46c30 100644
--- a/src/components/views/elements/Validation.tsx
+++ b/src/components/views/elements/Validation.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* eslint-disable babel/no-invalid-this */
+/* eslint-disable @babel/no-invalid-this */
 import React from "react";
 import classNames from "classnames";
 
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index dc179532af..886317f2bf 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -74,7 +74,7 @@ export default class RoomHeader extends React.Component {
     };
 
     _rateLimitedUpdate = new RateLimitedFunc(function() {
-        /* eslint-disable babel/no-invalid-this */
+        /* eslint-disable @babel/no-invalid-this */
         this.forceUpdate();
     }, 500);
 

From ae0a8b8da42c90da65122a274650aba67f489243 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:11:58 +0100
Subject: [PATCH 297/358] Auto-fix lint errors

---
 src/@types/common.ts                          |   2 +-
 src/@types/global.d.ts                        |  18 +--
 src/AddThreepid.js                            |   5 +-
 src/Analytics.tsx                             |   2 +-
 src/BasePlatform.ts                           |  24 +--
 src/CallHandler.tsx                           |  32 ++--
 src/ContentMessages.tsx                       |  38 ++---
 src/CountlyAnalytics.ts                       |  26 +--
 src/DecryptionFailureTracker.ts               |   2 +-
 src/DeviceListener.ts                         |   2 +-
 src/GroupAddressPicker.js                     |  10 +-
 src/HtmlUtils.tsx                             |   4 +-
 src/IdentityAuthClient.js                     |   2 +-
 src/KeyBindingsDefaults.ts                    |  12 +-
 src/KeyBindingsManager.ts                     |   4 +-
 src/Lifecycle.ts                              |  34 ++--
 src/Login.ts                                  |   3 +-
 src/MatrixClientPeg.ts                        |  12 +-
 src/Modal.tsx                                 |   9 +-
 src/Notifier.ts                               |   6 +-
 src/Presence.ts                               |   8 +-
 src/Registration.js                           |   8 +-
 src/Roles.ts                                  |   2 +-
 src/RoomInvite.tsx                            |   6 +-
 src/RoomNotifs.js                             |   6 +-
 src/Rooms.ts                                  |   1 -
 src/ScalarAuthClient.ts                       |  10 +-
 src/ScalarMessaging.js                        |  11 +-
 src/Searching.js                              |   6 +-
 src/SecurityManager.ts                        |   8 +-
 src/SendHistoryManager.ts                     |   6 +-
 src/SlashCommands.tsx                         |  44 ++---
 src/Terms.ts                                  |   8 +-
 src/TextForEvent.tsx                          |  86 +++++-----
 src/Tinter.js                                 |   1 -
 src/UserActivity.ts                           |   4 +-
 src/WhoIsTyping.ts                            |  10 +-
 src/accessibility/KeyboardShortcuts.tsx       |   4 +-
 src/accessibility/RovingTabIndex.tsx          |  22 +--
 src/accessibility/Toolbar.tsx                 |   8 +-
 src/accessibility/context_menu/MenuGroup.tsx  |   2 +-
 src/accessibility/context_menu/MenuItem.tsx   |   2 +-
 .../context_menu/MenuItemCheckbox.tsx         |   2 +-
 .../context_menu/MenuItemRadio.tsx            |   2 +-
 .../context_menu/StyledMenuItemCheckbox.tsx   |   4 +-
 .../context_menu/StyledMenuItemRadio.tsx      |   4 +-
 .../roving/RovingAccessibleButton.tsx         |   6 +-
 .../roving/RovingAccessibleTooltipButton.tsx  |   6 +-
 .../roving/RovingTabIndexWrapper.tsx          |   8 +-
 src/accessibility/roving/types.ts             |   2 +-
 src/actions/MatrixActionCreators.ts           |   2 +-
 src/actions/RoomListActions.ts                |   4 +-
 src/actions/TagOrderActions.ts                |   8 +-
 src/actions/actionCreators.ts                 |   4 +-
 .../eventindex/DisableEventIndexDialog.js     |   4 +-
 .../eventindex/ManageEventIndexDialog.tsx     |   6 +-
 .../dialogs/security/CreateKeyBackupDialog.js |  24 +--
 .../security/CreateSecretStorageDialog.js     |  20 +--
 .../dialogs/security/ExportE2eKeysDialog.js   |   6 +-
 .../dialogs/security/ImportE2eKeysDialog.js   |   2 +-
 .../security/NewRecoveryMethodDialog.js       |   4 +-
 .../security/RecoveryMethodRemovedDialog.js   |   2 +-
 src/autocomplete/AutocompleteProvider.tsx     |   2 +-
 src/autocomplete/Autocompleter.ts             |   2 +-
 src/autocomplete/CommandProvider.tsx          |  13 +-
 src/autocomplete/CommunityProvider.tsx        |  20 +--
 src/autocomplete/Components.tsx               |   6 +-
 src/autocomplete/DuckDuckGoProvider.tsx       |   6 +-
 src/autocomplete/EmojiProvider.tsx            |  10 +-
 src/autocomplete/NotifProvider.tsx            |   8 +-
 src/autocomplete/QueryMatcher.ts              |   6 +-
 src/autocomplete/RoomProvider.tsx             |   2 +-
 src/autocomplete/SpaceProvider.tsx            |   2 +-
 src/autocomplete/UserProvider.tsx             |   4 +-
 src/components/structures/ContextMenu.tsx     |  30 ++--
 .../structures/CustomRoomTagPanel.js          |   6 +-
 src/components/structures/EmbeddedPage.js     |   2 +-
 src/components/structures/GenericErrorPage.js |   2 +-
 src/components/structures/GroupFilterPanel.js |   6 +-
 src/components/structures/GroupView.js        |  60 +++----
 src/components/structures/HomePage.tsx        |  21 ++-
 .../structures/HostSignupAction.tsx           |   4 +-
 .../structures/IndicatorScrollbar.js          |   7 +-
 src/components/structures/InteractiveAuth.js  |   6 +-
 src/components/structures/LeftPanel.tsx       |  14 +-
 src/components/structures/LeftPanelWidget.tsx |  20 +--
 src/components/structures/LoggedInView.tsx    |  14 +-
 src/components/structures/MainSplit.js        |   4 +-
 src/components/structures/MatrixChat.tsx      |  78 ++++-----
 src/components/structures/MessagePanel.js     |  24 +--
 src/components/structures/MyGroups.js         |  10 +-
 .../structures/NonUrgentToastContainer.tsx    |   4 +-
 src/components/structures/RightPanel.tsx      |   2 +-
 src/components/structures/RoomDirectory.tsx   |  19 ++-
 src/components/structures/RoomSearch.tsx      |  10 +-
 src/components/structures/RoomStatusBar.js    |  16 +-
 src/components/structures/RoomView.tsx        |  30 ++--
 src/components/structures/ScrollPanel.js      |  14 +-
 src/components/structures/SearchBox.js        |  14 +-
 .../structures/SpaceRoomDirectory.tsx         |  12 +-
 src/components/structures/SpaceRoomView.tsx   |  10 +-
 src/components/structures/TabbedView.tsx      |   6 +-
 src/components/structures/TimelinePanel.js    |  14 +-
 src/components/structures/ToastContainer.tsx  |   6 +-
 src/components/structures/UploadBar.tsx       |   6 +-
 src/components/structures/UserMenu.tsx        |  48 +++---
 src/components/structures/UserView.js         |  16 +-
 .../structures/auth/CompleteSecurity.js       |   8 +-
 src/components/structures/auth/E2eSetup.js    |   2 +-
 .../structures/auth/ForgotPassword.js         |   4 +-
 src/components/structures/auth/Login.tsx      |  30 ++--
 .../structures/auth/Registration.tsx          |  28 ++--
 .../structures/auth/SetupEncryptionBody.js    |   2 +-
 src/components/structures/auth/SoftLogout.tsx |  28 ++--
 src/components/views/auth/AuthBody.js         |   2 +-
 src/components/views/auth/AuthFooter.js       |   2 +-
 src/components/views/auth/AuthHeader.js       |   2 +-
 src/components/views/auth/AuthHeaderLogo.js   |   2 +-
 src/components/views/auth/AuthPage.js         |   2 +-
 src/components/views/auth/CaptchaForm.js      |   4 +-
 .../views/auth/CompleteSecurityBody.js        |   2 +-
 src/components/views/auth/CountryDropdown.js  |   4 +-
 .../auth/InteractiveAuthEntryComponents.tsx   |  15 +-
 src/components/views/auth/LanguageSelector.js |   6 +-
 src/components/views/auth/PassphraseField.tsx |  10 +-
 src/components/views/auth/PasswordLogin.tsx   |   8 +-
 .../views/auth/RegistrationForm.tsx           |   4 +-
 src/components/views/auth/Welcome.js          |   6 +-
 src/components/views/avatars/BaseAvatar.tsx   |   4 +-
 .../views/avatars/DecoratedRoomAvatar.tsx     |  12 +-
 src/components/views/avatars/GroupAvatar.tsx  |   2 +-
 src/components/views/avatars/MemberAvatar.tsx |   2 +-
 .../avatars/MemberStatusMessageAvatar.js      |  10 +-
 src/components/views/avatars/RoomAvatar.tsx   |   2 +-
 src/components/views/avatars/WidgetAvatar.tsx |  10 +-
 src/components/views/beta/BetaCard.tsx        |   4 +-
 .../views/context_menus/CallContextMenu.tsx   |  10 +-
 .../context_menus/DialpadContextMenu.tsx      |  13 +-
 .../GenericElementContextMenu.js              |   3 +-
 .../context_menus/GenericTextContextMenu.js   |   2 +-
 .../GroupInviteTileContextMenu.js             |   6 +-
 .../context_menus/IconizedContextMenu.tsx     |   6 +-
 .../context_menus/StatusMessageContextMenu.js |   4 +-
 .../views/context_menus/TagTileContextMenu.js |   4 +-
 .../views/context_menus/WidgetContextMenu.tsx |  18 +--
 .../dialogs/AddExistingToSpaceDialog.tsx      |  20 +--
 .../views/dialogs/AddressPickerDialog.js      |  18 +--
 src/components/views/dialogs/BaseDialog.js    |   4 +-
 .../views/dialogs/BetaFeedbackDialog.tsx      |  10 +-
 .../views/dialogs/BugReportDialog.tsx         |  16 +-
 .../views/dialogs/ChangelogDialog.tsx         |   3 +-
 .../CommunityPrototypeInviteDialog.tsx        |  28 ++--
 .../dialogs/ConfirmAndWaitRedactDialog.tsx    |   6 +-
 .../views/dialogs/ConfirmRedactDialog.tsx     |   2 +-
 .../views/dialogs/ConfirmWipeDeviceDialog.tsx |   4 +-
 .../CreateCommunityPrototypeDialog.tsx        |  20 +--
 .../views/dialogs/CreateGroupDialog.tsx       |  10 +-
 .../views/dialogs/CreateRoomDialog.tsx        |  10 +-
 .../views/dialogs/CryptoStoreTooNewDialog.tsx |   2 +-
 .../views/dialogs/DeactivateAccountDialog.tsx |  20 +--
 .../views/dialogs/DevtoolsDialog.tsx          |  68 ++++----
 .../dialogs/EditCommunityPrototypeDialog.tsx  |  18 +--
 src/components/views/dialogs/ErrorDialog.tsx  |   2 +-
 .../views/dialogs/FeedbackDialog.js           |   3 +-
 .../views/dialogs/HostSignupDialog.tsx        |  20 +--
 .../views/dialogs/IncomingSasDialog.js        |  10 +-
 .../dialogs/IntegrationsDisabledDialog.js     |   6 +-
 .../dialogs/IntegrationsImpossibleDialog.js   |   4 +-
 .../views/dialogs/InteractiveAuthDialog.js    |   8 +-
 src/components/views/dialogs/InviteDialog.tsx |  68 ++++----
 .../dialogs/KeySignatureUploadFailedDialog.js |   2 +-
 src/components/views/dialogs/LogoutDialog.js  |   6 +-
 .../ManualDeviceKeyVerificationDialog.js      |   4 +-
 .../views/dialogs/MessageEditHistoryDialog.js |  12 +-
 .../views/dialogs/ModalWidgetDialog.tsx       |  20 +--
 .../views/dialogs/NewSessionReviewDialog.js   |   2 +-
 .../dialogs/RegistrationEmailPromptDialog.tsx |   4 +-
 .../views/dialogs/ReportEventDialog.tsx       |  13 +-
 .../views/dialogs/RoomSettingsDialog.tsx      |  12 +-
 .../views/dialogs/RoomUpgradeDialog.js        |  12 +-
 .../views/dialogs/RoomUpgradeWarningDialog.js |  14 +-
 .../views/dialogs/ServerOfflineDialog.tsx     |   6 +-
 .../views/dialogs/ServerPickerDialog.tsx      |  10 +-
 .../views/dialogs/SeshatResetDialog.tsx       |   6 +-
 .../dialogs/SessionRestoreErrorDialog.js      |   2 +-
 .../views/dialogs/SetEmailDialog.js           |  11 +-
 src/components/views/dialogs/ShareDialog.tsx  |  22 +--
 .../views/dialogs/SlashCommandHelpDialog.js   |   6 +-
 .../views/dialogs/SpaceSettingsDialog.tsx     |   2 +-
 .../views/dialogs/StorageEvictedDialog.js     |   2 +-
 src/components/views/dialogs/TermsDialog.tsx  |  10 +-
 .../views/dialogs/TextInputDialog.js          |   4 +-
 .../views/dialogs/UntrustedDeviceDialog.tsx   |   4 +-
 .../views/dialogs/UploadConfirmDialog.tsx     |   8 +-
 .../views/dialogs/UploadFailureDialog.js      |   2 +-
 .../views/dialogs/UserSettingsDialog.tsx      |  12 +-
 .../dialogs/VerificationRequestDialog.js      |   6 +-
 .../WidgetCapabilitiesPromptDialog.tsx        |   8 +-
 .../dialogs/WidgetOpenIDPermissionsDialog.js  |  10 +-
 .../security/AccessSecretStorageDialog.tsx    |  22 +--
 .../security/CreateCrossSigningDialog.tsx     |   6 +-
 .../security/RestoreKeyBackupDialog.js        |   6 +-
 .../security/SetupEncryptionDialog.tsx        |   6 +-
 .../views/directory/NetworkDropdown.tsx       |   6 +-
 .../views/elements/AccessibleButton.tsx       |   2 +-
 .../elements/AccessibleTooltipButton.tsx      |   6 +-
 src/components/views/elements/ActionButton.js |  10 +-
 .../views/elements/AddressSelector.js         |   2 +-
 .../views/elements/AppPermission.js           |   8 +-
 src/components/views/elements/AppTile.js      |  40 ++---
 .../views/elements/DesktopBuildsNotice.tsx    |   9 +-
 .../elements/DesktopCapturerSourcePicker.tsx  |  20 +--
 .../views/elements/DialogButtons.js           |   2 +-
 .../views/elements/DirectorySearchBox.js      |   6 +-
 src/components/views/elements/Draggable.tsx   |   2 +-
 src/components/views/elements/Dropdown.js     |   6 +-
 src/components/views/elements/EditableText.js |   8 +-
 .../views/elements/EditableTextContainer.js   |   5 +-
 .../views/elements/EffectsOverlay.tsx         |  10 +-
 .../views/elements/ErrorBoundary.js           |   4 +-
 .../views/elements/EventListSummary.tsx       |   8 +-
 .../views/elements/EventTilePreview.tsx       |   2 +-
 src/components/views/elements/Field.tsx       |  10 +-
 src/components/views/elements/Flair.js        |   5 +-
 .../elements/IRCTimelineProfileResizer.tsx    |   4 +-
 src/components/views/elements/ImageView.tsx   |   6 +-
 src/components/views/elements/InfoTooltip.tsx |   8 +-
 .../views/elements/InlineSpinner.tsx          |   8 +-
 .../views/elements/InviteReason.tsx           |   2 +-
 .../views/elements/LabelledToggleSwitch.tsx   |   2 +-
 .../views/elements/LanguageDropdown.js        |   6 +-
 .../views/elements/LazyRenderList.js          |  14 +-
 .../views/elements/MiniAvatarUploader.tsx     |   8 +-
 .../views/elements/PersistentApp.js           |   4 +-
 src/components/views/elements/Pill.js         |  20 +--
 .../views/elements/PowerSelector.js           |  10 +-
 src/components/views/elements/ProgressBar.tsx |   2 +-
 src/components/views/elements/QRCode.tsx      |   8 +-
 src/components/views/elements/ReplyThread.js  |  26 +--
 .../views/elements/RoomAliasField.tsx         |   4 +-
 src/components/views/elements/RoomTopic.tsx   |  10 +-
 src/components/views/elements/SSOButtons.tsx  |  12 +-
 .../views/elements/ServerPicker.tsx           |   8 +-
 .../views/elements/SettingsFlag.tsx           |   2 +-
 src/components/views/elements/Slider.tsx      |   6 +-
 .../elements/SpellCheckLanguagesDropdown.tsx  |  12 +-
 src/components/views/elements/Spinner.js      |   6 +-
 src/components/views/elements/Spoiler.js      |   2 +-
 .../views/elements/StyledCheckbox.tsx         |   2 +-
 .../views/elements/StyledRadioButton.tsx      |   2 +-
 .../views/elements/SyntaxHighlight.js         |   4 +-
 src/components/views/elements/TagTile.js      |   4 +-
 .../views/elements/TextWithTooltip.js         |   8 +-
 src/components/views/elements/TintableSvg.js  |   2 +-
 .../views/elements/ToggleSwitch.tsx           |   2 +-
 src/components/views/elements/Tooltip.tsx     |   5 +-
 .../views/elements/TooltipButton.tsx          |   2 +-
 .../views/elements/TruncatedList.tsx          |   4 +-
 src/components/views/elements/UserTagTile.tsx |   6 +-
 .../elements/crypto/VerificationQRCode.js     |   4 +-
 src/components/views/emojipicker/Category.tsx |   6 +-
 src/components/views/emojipicker/Emoji.tsx    |   6 +-
 .../views/emojipicker/EmojiPicker.tsx         |   8 +-
 src/components/views/emojipicker/Header.tsx   |   8 +-
 src/components/views/emojipicker/Preview.tsx  |   4 +-
 .../views/emojipicker/QuickReactions.tsx      |   4 +-
 .../views/emojipicker/ReactionPicker.tsx      |   8 +-
 src/components/views/emojipicker/Search.tsx   |   4 +-
 .../views/groups/GroupMemberList.js           |   6 +-
 .../views/groups/GroupMemberTile.js           |   4 +-
 .../views/groups/GroupPublicityToggle.js      |   2 +-
 src/components/views/groups/GroupRoomInfo.js  |  14 +-
 src/components/views/groups/GroupRoomList.js  |   2 +-
 src/components/views/groups/GroupRoomTile.js  |   4 +-
 src/components/views/groups/GroupTile.js      |   6 +-
 .../views/groups/GroupUserSettings.js         |   6 +-
 .../views/host_signup/HostSignupContainer.tsx |   2 +-
 .../views/messages/DateSeparator.js           |   4 +-
 .../views/messages/EditHistoryMessage.js      |  22 +--
 .../views/messages/EncryptionEvent.tsx        |   6 +-
 .../views/messages/EventTileBubble.tsx        |   2 +-
 src/components/views/messages/MAudioBody.js   |   4 +-
 src/components/views/messages/MFileBody.js    |  10 +-
 src/components/views/messages/MImageBody.js   |  14 +-
 .../views/messages/MJitsiWidgetEvent.tsx      |   8 +-
 .../messages/MKeyVerificationConclusion.js    |  14 +-
 .../messages/MKeyVerificationRequest.tsx      |  14 +-
 src/components/views/messages/MStickerBody.js |   4 +-
 src/components/views/messages/MVideoBody.tsx  |   8 +-
 .../views/messages/MVoiceMessageBody.tsx      |  22 +--
 .../views/messages/MVoiceOrAudioBody.tsx      |   4 +-
 .../views/messages/MessageActionBar.js        |  14 +-
 src/components/views/messages/MessageEvent.js |   6 +-
 src/components/views/messages/MjolnirBody.js  |   6 +-
 .../views/messages/ReactionsRow.tsx           |   6 +-
 .../views/messages/ReactionsRowButton.tsx     |   6 +-
 .../views/messages/RedactedBody.tsx           |  10 +-
 .../views/messages/RoomAvatarEvent.js         |   8 +-
 src/components/views/messages/RoomCreate.js   |   4 +-
 .../views/messages/SenderProfile.tsx          |   9 +-
 src/components/views/messages/TextualBody.js  |  10 +-
 src/components/views/messages/TextualEvent.js |   2 +-
 .../views/messages/TileErrorBoundary.js       |   2 +-
 src/components/views/messages/UnknownBody.js  |   4 +-
 .../views/messages/ViewSourceEvent.js         |   4 +-
 src/components/views/right_panel/BaseCard.tsx |  10 +-
 .../views/right_panel/EncryptionInfo.tsx      |   2 +-
 .../views/right_panel/GroupHeaderButtons.tsx  |   6 +-
 .../views/right_panel/HeaderButton.tsx        |   2 +-
 .../views/right_panel/HeaderButtons.tsx       |   4 +-
 .../views/right_panel/PinnedMessagesCard.tsx  |   2 +-
 .../views/right_panel/RoomHeaderButtons.tsx   |   4 +-
 .../views/right_panel/RoomSummaryCard.tsx     |  22 +--
 src/components/views/right_panel/UserInfo.tsx |  63 ++++----
 .../views/right_panel/VerificationPanel.tsx   |  50 +++---
 .../views/room_settings/AliasSettings.tsx     |  18 +--
 .../room_settings/RelatedGroupSettings.js     |   6 +-
 .../room_settings/RoomProfileSettings.js      |  26 +--
 .../room_settings/RoomPublishSetting.tsx      |   6 +-
 .../views/room_settings/UrlPreviewSettings.js |   8 +-
 src/components/views/rooms/AppsDrawer.js      |  18 +--
 src/components/views/rooms/Autocomplete.tsx   |  15 +-
 src/components/views/rooms/AuxPanel.tsx       |   4 +-
 .../views/rooms/BasicMessageComposer.tsx      |  66 ++++----
 src/components/views/rooms/E2EIcon.js         |   8 +-
 .../views/rooms/EditMessageComposer.js        |  26 +--
 src/components/views/rooms/EntityTile.tsx     |   4 +-
 src/components/views/rooms/EventTile.tsx      |  16 +-
 src/components/views/rooms/ExtraTile.tsx      |   4 +-
 .../views/rooms/LinkPreviewWidget.js          |  10 +-
 src/components/views/rooms/MemberList.tsx     |  10 +-
 src/components/views/rooms/MemberTile.tsx     |   2 +-
 .../views/rooms/MessageComposer.tsx           |  38 ++---
 .../views/rooms/MessageComposerFormatBar.js   |   8 +-
 src/components/views/rooms/NewRoomIntro.tsx   |   2 +-
 .../views/rooms/NotificationBadge.tsx         |   6 +-
 .../views/rooms/ReadReceiptMarker.js          |  16 +-
 src/components/views/rooms/ReplyPreview.js    |   6 +-
 .../views/rooms/RoomBreadcrumbs.tsx           |   8 +-
 src/components/views/rooms/RoomDetailList.js  |   4 +-
 src/components/views/rooms/RoomDetailRow.js   |   6 +-
 src/components/views/rooms/RoomList.tsx       |  18 +--
 .../views/rooms/RoomListNumResults.tsx        |   4 +-
 src/components/views/rooms/RoomPreviewBar.js  |  50 +++---
 src/components/views/rooms/RoomSublist.tsx    |  40 ++---
 src/components/views/rooms/RoomTile.tsx       |  34 ++--
 .../views/rooms/RoomUpgradeWarningBar.js      |  10 +-
 .../views/rooms/SearchResultTile.js           |   6 +-
 .../views/rooms/SendMessageComposer.js        |  24 +--
 .../views/rooms/SimpleRoomHeader.js           |   2 +-
 src/components/views/rooms/Stickerpicker.js   |  32 ++--
 .../views/rooms/ThirdPartyMemberInfo.tsx      |  20 +--
 .../views/rooms/TopUnreadMessagesBar.js       |   2 +-
 .../views/rooms/VoiceRecordComposerTile.tsx   |  14 +-
 .../views/rooms/WhoIsTypingTile.tsx           |   4 +-
 .../views/settings/AvatarSetting.js           |   6 +-
 src/components/views/settings/BridgeTile.tsx  |  16 +-
 src/components/views/settings/ChangeAvatar.js |   8 +-
 .../views/settings/ChangeDisplayName.js       |   4 +-
 .../views/settings/ChangePassword.js          |   4 +-
 .../views/settings/CrossSigningPanel.js       |   4 +-
 src/components/views/settings/DevicesPanel.js |  17 +-
 .../views/settings/DevicesPanelEntry.js       |   6 +-
 .../views/settings/E2eAdvancedPanel.tsx       |   4 +-
 .../views/settings/EventIndexPanel.tsx        |  12 +-
 .../views/settings/IntegrationManager.js      |   4 +-
 .../views/settings/Notifications.js           |  15 +-
 .../views/settings/ProfileSettings.js         |  14 +-
 .../views/settings/SecureBackupPanel.js       |  12 +-
 src/components/views/settings/SetIdServer.tsx |  26 +--
 .../views/settings/SetIntegrationManager.js   |  14 +-
 .../views/settings/SpellCheckSettings.tsx     |  10 +-
 .../views/settings/UpdateCheckButton.tsx      |  14 +-
 .../views/settings/account/EmailAddresses.js  |  22 +--
 .../views/settings/account/PhoneNumbers.js    |  26 +--
 .../settings/discovery/EmailAddresses.js      |   4 +-
 .../views/settings/discovery/PhoneNumbers.js  |   6 +-
 .../tabs/room/AdvancedRoomSettingsTab.tsx     |   2 +-
 .../settings/tabs/room/BridgeSettingsTab.tsx  |  10 +-
 .../tabs/room/GeneralRoomSettingsTab.js       |   6 +-
 .../tabs/room/NotificationSettingsTab.js      |  12 +-
 .../tabs/room/RolesRoomSettingsTab.tsx        |  32 ++--
 .../tabs/room/SecurityRoomSettingsTab.tsx     |  42 ++---
 .../tabs/user/AppearanceUserSettingsTab.tsx   |  52 +++---
 .../tabs/user/FlairUserSettingsTab.js         |   4 +-
 .../tabs/user/GeneralUserSettingsTab.js       |  28 ++--
 .../tabs/user/HelpUserSettingsTab.tsx         |  12 +-
 .../settings/tabs/user/LabsUserSettingsTab.js |   6 +-
 .../tabs/user/MjolnirUserSettingsTab.tsx      |  40 ++---
 .../tabs/user/NotificationUserSettingsTab.js  |   4 +-
 .../tabs/user/PreferencesUserSettingsTab.tsx  |  20 +--
 .../tabs/user/SecurityUserSettingsTab.js      |  37 +++--
 .../tabs/user/VoiceUserSettingsTab.js         |  10 +-
 .../views/spaces/SpaceBasicSettings.tsx       |   4 +-
 .../views/spaces/SpaceCreateMenu.tsx          |  18 +--
 src/components/views/spaces/SpacePanel.tsx    |   4 +-
 .../views/spaces/SpacePublicShare.tsx         |  16 +-
 .../views/spaces/SpaceTreeLevel.tsx           |  24 +--
 .../views/terms/InlineTermsAgreement.js       |  12 +-
 .../views/toasts/GenericExpiringToast.tsx     |   2 +-
 src/components/views/toasts/GenericToast.tsx  |   4 +-
 .../toasts/NonUrgentEchoFailureToast.tsx      |   4 +-
 .../views/toasts/VerificationRequestToast.tsx |  37 +++--
 .../verification/VerificationCancelled.js     |   2 +-
 .../verification/VerificationComplete.js      |   2 +-
 .../VerificationQREmojiOptions.js             |   6 +-
 .../views/verification/VerificationShowSas.js |   8 +-
 .../voice_messages/LiveRecordingWaveform.tsx  |   2 +-
 .../views/voice_messages/PlayPauseButton.tsx  |   8 +-
 .../views/voice_messages/PlaybackClock.tsx    |  10 +-
 .../views/voice_messages/PlaybackWaveform.tsx |  12 +-
 .../voice_messages/RecordingPlayback.tsx      |  10 +-
 src/components/views/voip/AudioFeed.tsx       |   6 +-
 .../views/voip/AudioFeedArrayForCall.tsx      |   4 +-
 src/components/views/voip/CallContainer.tsx   |   2 +-
 src/components/views/voip/CallPreview.tsx     |   4 +-
 src/components/views/voip/CallView.tsx        |  44 ++---
 src/components/views/voip/CallViewForRoom.tsx |   8 +-
 src/components/views/voip/DialPad.tsx         |   4 +-
 src/components/views/voip/DialPadModal.tsx    |  22 +--
 src/components/views/voip/IncomingCallBox.tsx |  10 +-
 src/components/views/voip/VideoFeed.tsx       |   8 +-
 src/createRoom.ts                             |   6 +-
 src/customisations/Media.ts                   |   2 +-
 src/dispatcher/dispatcher.ts                  |   2 +-
 .../payloads/CheckUpdatesPayload.ts           |   2 +-
 src/dispatcher/payloads/UploadPayload.ts      |   2 +-
 src/editor/autocomplete.ts                    |  12 +-
 src/editor/caret.ts                           |  28 ++--
 src/editor/deserialize.ts                     |   4 +-
 src/editor/diff.ts                            |   6 +-
 src/editor/dom.ts                             |  14 +-
 src/editor/history.ts                         |   8 +-
 src/editor/model.ts                           |  10 +-
 src/editor/operations.ts                      |  22 +--
 src/editor/parts.ts                           |   8 +-
 src/editor/position.ts                        |   8 +-
 src/editor/range.ts                           |   4 +-
 src/editor/render.ts                          |   2 +-
 src/editor/serialize.ts                       |  14 +-
 src/effects/confetti/index.ts                 |  19 ++-
 src/effects/effect.ts                         |   2 +-
 src/effects/fireworks/index.ts                |  23 ++-
 src/effects/index.ts                          |   1 -
 src/effects/snowfall/index.ts                 |  12 +-
 src/effects/spaceinvaders/index.ts            |  12 +-
 src/effects/utils.ts                          |   2 +-
 src/emojipicker/recent.ts                     |   2 +-
 src/hooks/useAccountData.ts                   |  10 +-
 src/hooks/useDispatcher.ts                    |   6 +-
 src/hooks/useEventEmitter.ts                  |   4 +-
 src/hooks/useIsEncrypted.ts                   |  10 +-
 src/hooks/useLocalStorageState.ts             |   2 +-
 src/hooks/useRoomMembers.ts                   |  14 +-
 src/hooks/useSettings.ts                      |   2 +-
 src/hooks/useStateArray.ts                    |   4 +-
 src/hooks/useStateCallback.ts                 |   2 +-
 src/hooks/useStateToggle.ts                   |   2 +-
 src/hooks/useTimeout.ts                       |   2 +-
 src/indexing/BaseEventIndexManager.ts         |   1 -
 src/indexing/EventIndex.ts                    |  14 +-
 src/indexing/EventIndexPeg.ts                 |   4 +-
 .../IntegrationManagerInstance.ts             |   8 +-
 src/integrations/IntegrationManagers.ts       |  12 +-
 src/languageHandler.tsx                       |   4 +-
 src/linkify-matrix.js                         |   4 +-
 src/mjolnir/BanList.ts                        |   4 +-
 src/mjolnir/ListRule.ts                       |   2 +-
 src/mjolnir/Mjolnir.ts                        |  10 +-
 src/notifications/ContentRules.ts             |   4 +-
 src/notifications/NotificationUtils.ts        |   8 +-
 src/notifications/PushRuleVectorState.ts      |   6 +-
 src/notifications/StandardActions.ts          |  14 +-
 .../VectorPushRulesDefinitions.js             |   6 +-
 src/performance/index.ts                      |  13 +-
 src/rageshake/submit-rageshake.ts             |   2 +-
 src/resizer/distributors/collapse.ts          |   2 +-
 src/resizer/distributors/fixed.ts             |   2 +-
 src/resizer/distributors/percentage.ts        |   2 +-
 src/resizer/index.ts                          |   8 +-
 src/resizer/item.ts                           |   2 +-
 src/resizer/resizer.ts                        |  14 +-
 .../controllers/NotificationControllers.ts    |   4 +-
 src/settings/controllers/ThemeController.ts   |   2 +-
 .../handlers/AccountSettingsHandler.ts        |   8 +-
 .../handlers/ConfigSettingsHandler.ts         |   2 +-
 .../handlers/DeviceSettingsHandler.ts         |   6 +-
 .../handlers/RoomDeviceSettingsHandler.ts     |   2 +-
 src/settings/watchers/FontWatcher.ts          |   2 +-
 src/shouldHideEvent.ts                        |   4 +-
 src/stores/ActiveWidgetStore.js               |   4 +-
 src/stores/BreadcrumbsStore.ts                |  11 +-
 src/stores/CommunityPrototypeStore.ts         |   6 +-
 src/stores/CustomRoomTagStore.js              |  20 +--
 src/stores/GroupFilterOrderStore.js           |   7 +-
 src/stores/GroupStore.js                      |   2 +-
 src/stores/HostSignupStore.ts                 |   6 +-
 src/stores/ModalWidgetStore.ts                |   8 +-
 src/stores/OwnProfileStore.ts                 |   6 +-
 src/stores/RightPanelStore.ts                 |  16 +-
 src/stores/SetupEncryptionStore.ts            |   6 +-
 src/stores/SpaceStore.tsx                     |  12 +-
 src/stores/ThreepidInviteStore.ts             |   2 +-
 src/stores/TypingStore.ts                     |   2 +-
 src/stores/UIStore.ts                         |   2 +-
 src/stores/VoiceRecordingStore.ts             |  10 +-
 src/stores/WidgetStore.ts                     |   4 +-
 src/stores/local-echo/EchoStore.ts            |   4 +-
 src/stores/local-echo/GenericEchoChamber.ts   |   2 +-
 src/stores/notifications/NotificationState.ts |   4 +-
 src/stores/room-list/MessagePreviewStore.ts   |   2 +-
 src/stores/room-list/RoomListStore.ts         |  44 ++---
 .../room-list/filters/NameFilterCondition.ts  |   2 +-
 .../room-list/filters/VisibilityProvider.ts   |   2 +-
 .../previews/CallAnswerEventPreview.ts        |   2 +-
 .../room-list/previews/CallHangupEvent.ts     |   2 +-
 .../previews/CallInviteEventPreview.ts        |   4 +-
 .../room-list/previews/MessageEventPreview.ts |   4 +-
 .../previews/ReactionEventPreview.ts          |   2 +-
 .../room-list/previews/StickerEventPreview.ts |   2 +-
 src/stores/widgets/StopGapWidget.ts           |  22 +--
 src/stores/widgets/StopGapWidgetDriver.ts     |  18 +--
 src/stores/widgets/WidgetLayoutStore.ts       |   6 +-
 src/theme.js                                  |   8 +-
 src/toasts/ServerLimitToast.tsx               |   4 +-
 src/utils/AutoDiscoveryUtils.tsx              |   6 +-
 src/utils/DMRoomMap.ts                        |   8 +-
 src/utils/DecryptFile.ts                      |   6 +-
 src/utils/EventUtils.ts                       |   2 +-
 src/utils/FontManager.js                      |   2 +-
 src/utils/HostingLink.js                      |   2 +-
 src/utils/IdentityServerUtils.ts              |   2 +-
 src/utils/KeyVerificationStateObserver.js     |   4 +-
 src/utils/MegolmExportEncryption.js           |  12 +-
 src/utils/MessageDiffUtils.tsx                |   2 +-
 src/utils/MultiInviter.ts                     |   6 +-
 src/utils/PasswordScorer.ts                   |   2 +-
 src/utils/ShieldUtils.ts                      |   4 +-
 src/utils/Singleflight.ts                     |   2 +-
 src/utils/StorageManager.ts                   |   6 +-
 src/utils/Timer.ts                            |   2 +-
 src/utils/WellKnownUtils.ts                   |   4 +-
 src/utils/Whenable.ts                         |   5 +-
 src/utils/WidgetUtils.ts                      |   2 +-
 src/utils/humanize.ts                         |  12 +-
 src/utils/maps.ts                             |   2 +-
 src/utils/membership.ts                       |   4 +-
 src/utils/objects.ts                          |   2 +-
 .../permalinks/ElementPermalinkConstructor.ts |   2 +-
 src/utils/permalinks/Permalinks.ts            |  15 +-
 .../permalinks/SpecPermalinkConstructor.ts    |   2 +-
 src/utils/pillify.js                          |   4 +-
 src/utils/promise.ts                          |   2 +-
 src/utils/space.tsx                           |  12 +-
 src/utils/strings.ts                          |   1 -
 src/verification.ts                           |  12 +-
 src/voice/PlaybackClock.ts                    |   4 +-
 src/voice/RecorderWorklet.ts                  |   6 +-
 src/voice/VoiceRecording.ts                   |  20 +--
 src/voice/compat.ts                           |   6 +-
 src/widgets/CapabilityText.tsx                |  10 +-
 src/widgets/Jitsi.ts                          |   2 +-
 src/widgets/ManagedHybrid.ts                  |   2 +-
 test/ScalarAuthClient-test.js                 |   2 +-
 test/Terms-test.js                            |   2 +-
 test/accessibility/RovingTabIndex-test.js     |   3 +-
 test/autocomplete/QueryMatcher-test.js        |  29 ++--
 test/components/structures/GroupView-test.js  |   2 +-
 test/components/structures/auth/Login-test.js |   2 +-
 .../structures/auth/Registration-test.js      |   2 +-
 test/components/stub-component.js             |   2 +-
 .../dialogs/AccessSecretStorageDialog-test.js |   2 +-
 .../views/dialogs/ForwardDialog-test.js       |   8 +-
 .../elements/MemberEventListSummary-test.js   | 152 +++++++++---------
 .../views/groups/GroupMemberList-test.js      |   2 +-
 .../views/messages/TextualBody-test.js        |   5 +-
 .../views/rooms/MemberList-test.tsx           |   1 -
 test/components/views/rooms/RoomList-test.js  |  33 ++--
 .../views/rooms/RoomSettings-test.js          |   7 +-
 .../views/rooms/SendMessageComposer-test.js   |  37 +++--
 test/createRoom-test.js                       |   7 +-
 test/editor/caret-test.js                     |  60 +++----
 test/editor/deserialize-test.js               | 138 ++++++++--------
 test/editor/diff-test.js                      |   2 +-
 test/editor/history-test.js                   |  40 ++---
 test/editor/mock.js                           |   6 +-
 test/editor/model-test.js                     |  54 +++----
 test/editor/operations-test.js                |  60 +++----
 test/editor/position-test.js                  |   2 +-
 test/editor/range-test.js                     |   2 +-
 test/editor/serialize-test.js                 |   4 +-
 test/end-to-end-tests/src/rest/consent.js     |   2 +-
 test/end-to-end-tests/src/rest/creator.js     |   8 +-
 test/end-to-end-tests/src/rest/session.js     |   2 +-
 test/end-to-end-tests/src/scenario.js         |   3 +-
 .../src/scenarios/directory.js                |  13 +-
 .../src/scenarios/e2e-encryption.js           |  15 +-
 .../src/scenarios/lazy-loading.js             |  11 +-
 test/end-to-end-tests/src/scenarios/toast.js  |   2 +-
 test/end-to-end-tests/src/session.js          |   6 +-
 .../src/usecases/accept-invite.js             |   6 +-
 .../src/usecases/create-room.js               |   2 +-
 test/end-to-end-tests/src/usecases/join.js    |   3 +-
 .../src/usecases/memberlist.js                |   5 +-
 .../src/usecases/room-settings.js             |  12 +-
 .../end-to-end-tests/src/usecases/settings.js |   2 +-
 .../end-to-end-tests/src/usecases/timeline.js |   1 -
 test/end-to-end-tests/src/usecases/toasts.js  |   2 +-
 test/end-to-end-tests/src/usecases/verify.js  |   2 +-
 test/end-to-end-tests/start.js                |   2 +-
 test/notifications/ContentRules-test.js       |   9 +-
 test/skinned-sdk.js                           |  10 +-
 test/stores/RoomViewStore-test.js             |   4 +-
 test/test-utils.js                            |   8 +-
 test/utils/MegolmExportEncryption-test.js     |   4 +-
 test/utils/ShieldUtils-test.js                |  20 +--
 test/utils/Singleflight-test.ts               |   2 +-
 test/utils/arrays-test.ts                     |  42 ++---
 test/utils/enums-test.ts                      |   2 +-
 test/utils/iterables-test.ts                  |   2 +-
 test/utils/maps-test.ts                       |   4 +-
 test/utils/numbers-test.ts                    |   2 +-
 test/utils/objects-test.ts                    |  68 ++++----
 test/utils/permalinks/Permalinks-test.js      |   4 +-
 test/utils/sets-test.ts                       |   2 +-
 625 files changed, 3170 insertions(+), 3232 deletions(-)

diff --git a/src/@types/common.ts b/src/@types/common.ts
index b887bd4090..1fb9ba4303 100644
--- a/src/@types/common.ts
+++ b/src/@types/common.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import { JSXElementConstructor } from "react";
 
 // Based on https://stackoverflow.com/a/53229857/3532235
-export type Without<T, U> = {[P in Exclude<keyof T, keyof U>] ? : never};
+export type Without<T, U> = {[P in Exclude<keyof T, keyof U>]?: never};
 export type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 7eff341095..24470a3925 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -23,25 +23,25 @@ import DeviceListener from "../DeviceListener";
 import { RoomListStoreClass } from "../stores/room-list/RoomListStore";
 import { PlatformPeg } from "../PlatformPeg";
 import RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
-import {IntegrationManagers} from "../integrations/IntegrationManagers";
-import {ModalManager} from "../Modal";
+import { IntegrationManagers } from "../integrations/IntegrationManagers";
+import { ModalManager } from "../Modal";
 import SettingsStore from "../settings/SettingsStore";
-import {ActiveRoomObserver} from "../ActiveRoomObserver";
-import {Notifier} from "../Notifier";
-import type {Renderer} from "react-dom";
+import { ActiveRoomObserver } from "../ActiveRoomObserver";
+import { Notifier } from "../Notifier";
+import type { Renderer } from "react-dom";
 import RightPanelStore from "../stores/RightPanelStore";
 import WidgetStore from "../stores/WidgetStore";
 import CallHandler from "../CallHandler";
-import {Analytics} from "../Analytics";
+import { Analytics } from "../Analytics";
 import CountlyAnalytics from "../CountlyAnalytics";
 import UserActivity from "../UserActivity";
-import {ModalWidgetStore} from "../stores/ModalWidgetStore";
+import { ModalWidgetStore } from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
-import {SpaceStoreClass} from "../stores/SpaceStore";
+import { SpaceStoreClass } from "../stores/SpaceStore";
 import TypingStore from "../stores/TypingStore";
 import { EventIndexPeg } from "../indexing/EventIndexPeg";
-import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
+import { VoiceRecordingStore } from "../stores/VoiceRecordingStore";
 import PerformanceMonitor from "../performance";
 import UIStore from "../stores/UIStore";
 import { SetupEncryptionStore } from "../stores/SetupEncryptionStore";
diff --git a/src/AddThreepid.js b/src/AddThreepid.js
index f06f7c187d..eb822c6d75 100644
--- a/src/AddThreepid.js
+++ b/src/AddThreepid.js
@@ -16,12 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';
-import {SSOAuthEntry} from "./components/views/auth/InteractiveAuthEntryComponents";
+import { SSOAuthEntry } from "./components/views/auth/InteractiveAuthEntryComponents";
 
 function getIdServerDomain() {
     return MatrixClientPeg.get().idBaseUrl.split("://")[1];
@@ -189,7 +189,6 @@ export default class AddThreepid {
                         // pop up an interactive auth dialog
                         const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
-
                         const dialogAesthetics = {
                             [SSOAuthEntry.PHASE_PREAUTH]: {
                                 title: _t("Use Single Sign On to continue"),
diff --git a/src/Analytics.tsx b/src/Analytics.tsx
index 212bfd3757..8c82639b5f 100644
--- a/src/Analytics.tsx
+++ b/src/Analytics.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 
-import {getCurrentLanguage, _t, _td, IVariables} from './languageHandler';
+import { getCurrentLanguage, _t, _td, IVariables } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
 import Modal from './Modal';
diff --git a/src/BasePlatform.ts b/src/BasePlatform.ts
index 5483ea6874..d93bef9702 100644
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@@ -17,16 +17,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {encodeUnpaddedBase64} from "matrix-js-sdk/src/crypto/olmlib";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { encodeUnpaddedBase64 } from "matrix-js-sdk/src/crypto/olmlib";
 import dis from './dispatcher/dispatcher';
 import BaseEventIndexManager from './indexing/BaseEventIndexManager';
-import {ActionPayload} from "./dispatcher/payloads";
-import {CheckUpdatesPayload} from "./dispatcher/payloads/CheckUpdatesPayload";
-import {Action} from "./dispatcher/actions";
-import {hideToast as hideUpdateToast} from "./toasts/UpdateToast";
-import {MatrixClientPeg} from "./MatrixClientPeg";
-import {idbLoad, idbSave, idbDelete} from "./utils/StorageManager";
+import { ActionPayload } from "./dispatcher/payloads";
+import { CheckUpdatesPayload } from "./dispatcher/payloads/CheckUpdatesPayload";
+import { Action } from "./dispatcher/actions";
+import { hideToast as hideUpdateToast } from "./toasts/UpdateToast";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import { idbLoad, idbSave, idbDelete } from "./utils/StorageManager";
 
 export const SSO_HOMESERVER_URL_KEY = "mx_sso_hs_url";
 export const SSO_ID_SERVER_URL_KEY = "mx_sso_is_url";
@@ -335,7 +335,7 @@ export default abstract class BasePlatform {
 
         try {
             const key = await crypto.subtle.decrypt(
-                {name: "AES-GCM", iv: data.iv, additionalData}, data.cryptoKey,
+                { name: "AES-GCM", iv: data.iv, additionalData }, data.cryptoKey,
                 data.encrypted,
             );
             return encodeUnpaddedBase64(key);
@@ -360,7 +360,7 @@ export default abstract class BasePlatform {
         const randomArray = new Uint8Array(32);
         crypto.getRandomValues(randomArray);
         const cryptoKey = await crypto.subtle.generateKey(
-            {name: "AES-GCM", length: 256}, false, ["encrypt", "decrypt"],
+            { name: "AES-GCM", length: 256 }, false, ["encrypt", "decrypt"],
         );
         const iv = new Uint8Array(32);
         crypto.getRandomValues(iv);
@@ -375,11 +375,11 @@ export default abstract class BasePlatform {
         }
 
         const encrypted = await crypto.subtle.encrypt(
-            {name: "AES-GCM", iv, additionalData}, cryptoKey, randomArray,
+            { name: "AES-GCM", iv, additionalData }, cryptoKey, randomArray,
         );
 
         try {
-            await idbSave("pickleKey", [userId, deviceId], {encrypted, iv, cryptoKey});
+            await idbSave("pickleKey", [userId, deviceId], { encrypted, iv, cryptoKey });
         } catch (e) {
             return null;
         }
diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index 448b1cb780..cb54db3f8a 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -55,7 +55,7 @@ limitations under the License.
 
 import React from 'react';
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
@@ -63,11 +63,11 @@ import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
 import SettingsStore from './settings/SettingsStore';
-import {Jitsi} from "./widgets/Jitsi";
-import {WidgetType} from "./widgets/WidgetType";
-import {SettingLevel} from "./settings/SettingLevel";
+import { Jitsi } from "./widgets/Jitsi";
+import { WidgetType } from "./widgets/WidgetType";
+import { SettingLevel } from "./settings/SettingLevel";
 import { ActionPayload } from "./dispatcher/payloads";
-import {base32} from "rfc4648";
+import { base32 } from "rfc4648";
 
 import QuestionDialog from "./components/views/dialogs/QuestionDialog";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
@@ -77,10 +77,10 @@ import { ElementWidgetActions } from "./stores/widgets/ElementWidgetActions";
 import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty, CallType } from "matrix-js-sdk/src/webrtc/call";
 import Analytics from './Analytics';
 import CountlyAnalytics from "./CountlyAnalytics";
-import {UIFeature} from "./settings/UIFeature";
+import { UIFeature } from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker"
+import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker";
 import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@@ -166,7 +166,7 @@ export default class CallHandler extends EventEmitter {
 
     static sharedInstance() {
         if (!window.mxCallHandler) {
-            window.mxCallHandler = new CallHandler()
+            window.mxCallHandler = new CallHandler();
         }
 
         return window.mxCallHandler;
@@ -185,7 +185,7 @@ export default class CallHandler extends EventEmitter {
             const nativeUser = this.assertedIdentityNativeUsers[call.callId];
             if (nativeUser) {
                 const room = findDMForUser(MatrixClientPeg.get(), nativeUser);
-                if (room) return room.roomId
+                if (room) return room.roomId;
             }
         }
 
@@ -238,7 +238,7 @@ export default class CallHandler extends EventEmitter {
                 this.supportsPstnProtocol = null;
             }
 
-            dis.dispatch({action: Action.PstnSupportUpdated});
+            dis.dispatch({ action: Action.PstnSupportUpdated });
 
             if (protocols[PROTOCOL_SIP_NATIVE] !== undefined && protocols[PROTOCOL_SIP_VIRTUAL] !== undefined) {
                 this.supportsSipNativeVirtual = Boolean(
@@ -246,7 +246,7 @@ export default class CallHandler extends EventEmitter {
                 );
             }
 
-            dis.dispatch({action: Action.VirtualRoomSupportUpdated});
+            dis.dispatch({ action: Action.VirtualRoomSupportUpdated });
         } catch (e) {
             if (maxTries === 1) {
                 console.log("Failed to check for protocol support and no retries remain: assuming no support", e);
@@ -299,7 +299,7 @@ export default class CallHandler extends EventEmitter {
             action: 'incoming_call',
             call: call,
         }, true);
-    }
+    };
 
     getCallForRoom(roomId: string): MatrixCall {
         return this.calls.get(roomId) || null;
@@ -711,7 +711,7 @@ export default class CallHandler extends EventEmitter {
 
             call.placeScreenSharingCall(
                 async (): Promise<DesktopCapturerSource> => {
-                    const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
+                    const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
                     const [source] = await finished;
                     return source;
                 },
@@ -816,7 +816,7 @@ export default class CallHandler extends EventEmitter {
 
                     Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
                     console.log("Adding call for room ", mappedRoomId);
-                    this.calls.set(mappedRoomId, call)
+                    this.calls.set(mappedRoomId, call);
                     this.emit(CallHandlerEvent.CallsChanged, this.calls);
                     this.setCallListeners(call);
 
@@ -872,7 +872,7 @@ export default class CallHandler extends EventEmitter {
                 this.dialNumber(payload.number);
                 break;
         }
-    }
+    };
 
     private async dialNumber(number: string) {
         const results = await this.pstnLookup(number);
@@ -966,7 +966,7 @@ export default class CallHandler extends EventEmitter {
             confId = 'Jitsi' + random;
         }
 
-        let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth});
+        let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({ auth: jitsiAuth });
 
         // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets
         const parsedUrl = new URL(widgetUrl);
diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx
index 7a3cf5d50f..ef0a89a690 100644
--- a/src/ContentMessages.tsx
+++ b/src/ContentMessages.tsx
@@ -18,8 +18,8 @@ limitations under the License.
 
 import React from "react";
 import dis from './dispatcher/dispatcher';
-import {MatrixClientPeg} from './MatrixClientPeg';
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixClientPeg } from './MatrixClientPeg';
+import { MatrixClient } from "matrix-js-sdk/src/client";
 import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
@@ -37,7 +37,7 @@ import {
     UploadProgressPayload,
     UploadStartedPayload,
 } from "./dispatcher/payloads/UploadPayload";
-import {IUpload} from "./models/IUpload";
+import { IUpload } from "./models/IUpload";
 import { IImageInfo } from "matrix-js-sdk/src/@types/partials";
 
 const MAX_WIDTH = 800;
@@ -189,7 +189,7 @@ async function loadImageElement(imageFile: File) {
     const [hidpi] = await Promise.all([parsePromise, imgPromise]);
     const width = hidpi ? (img.width >> 1) : img.width;
     const height = hidpi ? (img.height >> 1) : img.height;
-    return {width, height, img};
+    return { width, height, img };
 }
 
 /**
@@ -343,7 +343,7 @@ export function uploadFile(
             if (file.type) {
                 encryptInfo.mimetype = file.type;
             }
-            return {"file": encryptInfo};
+            return { "file": encryptInfo };
         });
         (prom as IAbortablePromise<any>).abort = () => {
             canceled = true;
@@ -357,7 +357,7 @@ export function uploadFile(
         const promise1 = basePromise.then(function(url) {
             if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
-            return {"url": url};
+            return { "url": url };
         });
         (promise1 as any).abort = () => {
             canceled = true;
@@ -377,7 +377,7 @@ export default class ContentMessages {
             console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
             throw e;
         });
-        CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, false, {msgtype: "m.sticker"});
+        CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, false, { msgtype: "m.sticker" });
         return prom;
     }
 
@@ -391,14 +391,14 @@ export default class ContentMessages {
 
     async sendContentListToRoom(files: File[], roomId: string, matrixClient: MatrixClient) {
         if (matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
             return;
         }
 
         const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
         if (isQuoting) {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
+            const { finished } = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
                 title: _t('Replying With Files'),
                 description: (
                     <div>{_t(
@@ -432,7 +432,7 @@ export default class ContentMessages {
 
         if (tooBigFiles.length > 0) {
             const UploadFailureDialog = sdk.getComponent("dialogs.UploadFailureDialog");
-            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Failure', '', UploadFailureDialog, {
+            const { finished } = Modal.createTrackedDialog<[boolean]>('Upload Failure', '', UploadFailureDialog, {
                 badFiles: tooBigFiles,
                 totalFiles: files.length,
                 contentMessages: this,
@@ -449,7 +449,7 @@ export default class ContentMessages {
         for (let i = 0; i < okFiles.length; ++i) {
             const file = okFiles[i];
             if (!uploadAll) {
-                const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation',
+                const { finished } = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation',
                     '', UploadConfirmDialog, {
                         file,
                         currentIndex: i,
@@ -481,7 +481,7 @@ export default class ContentMessages {
         if (upload) {
             upload.canceled = true;
             MatrixClientPeg.get().cancelUpload(upload.promise);
-            dis.dispatch<UploadCanceledPayload>({action: Action.UploadCanceled, upload});
+            dis.dispatch<UploadCanceledPayload>({ action: Action.UploadCanceled, upload });
         }
     }
 
@@ -542,7 +542,7 @@ export default class ContentMessages {
             promise: prom,
         };
         this.inprogress.push(upload);
-        dis.dispatch<UploadStartedPayload>({action: Action.UploadStarted, upload});
+        dis.dispatch<UploadStartedPayload>({ action: Action.UploadStarted, upload });
 
         // Focus the composer view
         dis.fire(Action.FocusComposer);
@@ -550,7 +550,7 @@ export default class ContentMessages {
         function onProgress(ev) {
             upload.total = ev.total;
             upload.loaded = ev.loaded;
-            dis.dispatch<UploadProgressPayload>({action: Action.UploadProgress, upload});
+            dis.dispatch<UploadProgressPayload>({ action: Action.UploadProgress, upload });
         }
 
         let error;
@@ -577,11 +577,11 @@ export default class ContentMessages {
         }, function(err) {
             error = err;
             if (!upload.canceled) {
-                let desc = _t("The file '%(fileName)s' failed to upload.", {fileName: upload.fileName});
+                let desc = _t("The file '%(fileName)s' failed to upload.", { fileName: upload.fileName });
                 if (err.http_status === 413) {
                     desc = _t(
                         "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",
-                        {fileName: upload.fileName},
+                        { fileName: upload.fileName },
                     );
                 }
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -604,10 +604,10 @@ export default class ContentMessages {
                 if (error && error.http_status === 413) {
                     this.mediaConfig = null;
                 }
-                dis.dispatch<UploadErrorPayload>({action: Action.UploadFailed, upload, error});
+                dis.dispatch<UploadErrorPayload>({ action: Action.UploadFailed, upload, error });
             } else {
-                dis.dispatch<UploadFinishedPayload>({action: Action.UploadFinished, upload});
-                dis.dispatch({action: 'message_sent'});
+                dis.dispatch<UploadFinishedPayload>({ action: Action.UploadFinished, upload });
+                dis.dispatch({ action: 'message_sent' });
             }
         });
     }
diff --git a/src/CountlyAnalytics.ts b/src/CountlyAnalytics.ts
index f494c1eb22..39dcac4048 100644
--- a/src/CountlyAnalytics.ts
+++ b/src/CountlyAnalytics.ts
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {randomString} from "matrix-js-sdk/src/randomstring";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 
-import {getCurrentLanguage} from './languageHandler';
+import { getCurrentLanguage } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
-import {MatrixClientPeg} from "./MatrixClientPeg";
-import {sleep} from "./utils/promise";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import { sleep } from "./utils/promise";
 import RoomViewStore from "./stores/RoomViewStore";
 import { Action } from "./dispatcher/actions";
 
@@ -338,8 +338,8 @@ const getRoomStats = (roomId: string) => {
         "is_encrypted": cli?.isRoomEncrypted(roomId),
         // eslint-disable-next-line camelcase
         "is_public": room?.currentState.getStateEvents("m.room.join_rules", "")?.getContent()?.join_rule === "public",
-    }
-}
+    };
+};
 
 // async wrapper for regex-powered String.prototype.replace
 const strReplaceAsync = async (str: string, regex: RegExp, fn: (...args: string[]) => Promise<string>) => {
@@ -414,7 +414,7 @@ export default class CountlyAnalytics {
 
         this.anonymous = anonymous;
         if (anonymous) {
-            await this.changeUserKey(randomString(64))
+            await this.changeUserKey(randomString(64));
         } else {
             await this.changeUserKey(await hashHex(MatrixClientPeg.get().getUserId()), true);
         }
@@ -438,7 +438,7 @@ export default class CountlyAnalytics {
         await this.track("Opt-Out" );
         this.endSession();
         window.clearInterval(this.heartbeatIntervalId);
-        window.clearTimeout(this.activityIntervalId)
+        window.clearTimeout(this.activityIntervalId);
         this.baseUrl = null;
         // remove listeners bound in trackSessions()
         window.removeEventListener("beforeunload", this.endSession);
@@ -662,14 +662,14 @@ export default class CountlyAnalytics {
     }
 
     private queue(args: Omit<IEvent, "timestamp" | "hour" | "dow" | "count"> & Partial<Pick<IEvent, "count">>) {
-        const {count = 1, ...rest} = args;
+        const { count = 1, ...rest } = args;
         const ev = {
             ...this.getTimeParams(),
             ...rest,
             count,
             platform: this.appPlatform,
             app_version: this.appVersion,
-        }
+        };
 
         this.pendingEvents.push(ev);
         if (this.pendingEvents.length > MAX_PENDING_EVENTS) {
@@ -680,7 +680,7 @@ export default class CountlyAnalytics {
     private getOrientation = (): Orientation => {
         return window.matchMedia("(orientation: landscape)").matches
             ? Orientation.Landscape
-            : Orientation.Portrait
+            : Orientation.Portrait;
     };
 
     private reportOrientation = () => {
@@ -749,7 +749,7 @@ export default class CountlyAnalytics {
             const request: Parameters<typeof CountlyAnalytics.prototype.request>[0] = {
                 begin_session: 1,
                 user_details: JSON.stringify(userDetails),
-            }
+            };
 
             const metrics = this.getMetrics();
             if (metrics) {
@@ -773,7 +773,7 @@ export default class CountlyAnalytics {
 
     private endSession = () => {
         if (this.sessionStarted) {
-            window.removeEventListener("resize", this.reportOrientation)
+            window.removeEventListener("resize", this.reportOrientation);
 
             this.reportViewDuration();
             this.request({
diff --git a/src/DecryptionFailureTracker.ts b/src/DecryptionFailureTracker.ts
index 07c0c546fe..d40574a6db 100644
--- a/src/DecryptionFailureTracker.ts
+++ b/src/DecryptionFailureTracker.ts
@@ -168,7 +168,7 @@ export class DecryptionFailureTracker {
         const trackedEventIds = [...dedupedFailuresMap.keys()];
 
         this.trackedEventHashMap = trackedEventIds.reduce(
-            (result, eventId) => ({...result, [eventId]: true}),
+            (result, eventId) => ({ ...result, [eventId]: true }),
             this.trackedEventHashMap,
         );
 
diff --git a/src/DeviceListener.ts b/src/DeviceListener.ts
index df494e6bdd..d70585e5ec 100644
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from "./dispatcher/dispatcher";
 import {
     hideToast as hideBulkUnverifiedSessionsToast,
diff --git a/src/GroupAddressPicker.js b/src/GroupAddressPicker.js
index 9497d9de4c..ea1813876c 100644
--- a/src/GroupAddressPicker.js
+++ b/src/GroupAddressPicker.js
@@ -19,7 +19,7 @@ import Modal from './Modal';
 import * as sdk from './';
 import MultiInviter from './utils/MultiInviter';
 import { _t } from './languageHandler';
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import GroupStore from './stores/GroupStore';
 import StyledCheckbox from './components/views/elements/StyledCheckbox';
 
@@ -103,7 +103,7 @@ function _onGroupInviteFinished(groupId, addrs) {
         if (errorList.length > 0) {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to invite the following users to the group', '', ErrorDialog, {
-                title: _t("Failed to invite the following users to %(groupId)s:", {groupId: groupId}),
+                title: _t("Failed to invite the following users to %(groupId)s:", { groupId: groupId }),
                 description: errorList.join(", "),
             });
         }
@@ -111,7 +111,7 @@ function _onGroupInviteFinished(groupId, addrs) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Failed to invite users to group', '', ErrorDialog, {
             title: _t("Failed to invite users to community"),
-            description: _t("Failed to invite users to %(groupId)s", {groupId: groupId}),
+            description: _t("Failed to invite users to %(groupId)s", { groupId: groupId }),
         });
     });
 }
@@ -137,7 +137,7 @@ function _onGroupAddRoomFinished(groupId, addrs, addRoomsPublicly) {
                 // Add this group as related
                 if (!groups.includes(groupId)) {
                     groups.push(groupId);
-                    return MatrixClientPeg.get().sendStateEvent(roomId, 'm.room.related_groups', {groups}, '');
+                    return MatrixClientPeg.get().sendStateEvent(roomId, 'm.room.related_groups', { groups }, '');
                 }
             });
     })).then(() => {
@@ -152,7 +152,7 @@ function _onGroupAddRoomFinished(groupId, addrs, addRoomsPublicly) {
             {
                 title: _t(
                     "Failed to add the following rooms to %(groupId)s:",
-                    {groupId},
+                    { groupId },
                 ),
                 description: errorList.join(", "),
             },
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 983538d65b..c80b50c566 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -138,7 +138,7 @@ export function getHtmlText(insaneHtml: string): string {
         selfClosing: [],
         allowedSchemes: [],
         disallowedTagsMode: 'discard',
-    })
+    });
 }
 
 /**
@@ -183,7 +183,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to
         // images" preference is disabled. Future work might expose some UI to reveal them
         // like standalone image events have.
         if (!attribs.src || !attribs.src.startsWith('mxc://') || !SettingsStore.getValue("showImages")) {
-            return { tagName, attribs: {}};
+            return { tagName, attribs: {} };
         }
         const width = Number(attribs.width) || 800;
         const height = Number(attribs.height) || 600;
diff --git a/src/IdentityAuthClient.js b/src/IdentityAuthClient.js
index 9239c1bc75..31a5021317 100644
--- a/src/IdentityAuthClient.js
+++ b/src/IdentityAuthClient.js
@@ -17,7 +17,7 @@ limitations under the License.
 import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
 import { createClient } from 'matrix-js-sdk/src/matrix';
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import Modal from './Modal';
 import * as sdk from './index';
 import { _t } from './languageHandler';
diff --git a/src/KeyBindingsDefaults.ts b/src/KeyBindingsDefaults.ts
index 63c4ac0f86..b2f70abff7 100644
--- a/src/KeyBindingsDefaults.ts
+++ b/src/KeyBindingsDefaults.ts
@@ -156,7 +156,7 @@ const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
         }
     }
     return bindings;
-}
+};
 
 const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
     return [
@@ -207,7 +207,7 @@ const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
             },
         },
     ];
-}
+};
 
 const roomListBindings = (): KeyBinding<RoomListAction>[] => {
     return [
@@ -248,7 +248,7 @@ const roomListBindings = (): KeyBinding<RoomListAction>[] => {
             },
         },
     ];
-}
+};
 
 const roomBindings = (): KeyBinding<RoomAction>[] => {
     const bindings: KeyBinding<RoomAction>[] = [
@@ -312,7 +312,7 @@ const roomBindings = (): KeyBinding<RoomAction>[] => {
     }
 
     return bindings;
-}
+};
 
 const navigationBindings = (): KeyBinding<NavigationAction>[] => {
     return [
@@ -396,7 +396,7 @@ const navigationBindings = (): KeyBinding<NavigationAction>[] => {
             },
         },
     ];
-}
+};
 
 export const defaultBindingsProvider: IKeyBindingsProvider = {
     getMessageComposerBindings: messageComposerBindings,
@@ -404,4 +404,4 @@ export const defaultBindingsProvider: IKeyBindingsProvider = {
     getRoomListBindings: roomListBindings,
     getRoomBindings: roomBindings,
     getNavigationBindings: navigationBindings,
-}
+};
diff --git a/src/KeyBindingsManager.ts b/src/KeyBindingsManager.ts
index aac14bde20..4225d2f449 100644
--- a/src/KeyBindingsManager.ts
+++ b/src/KeyBindingsManager.ts
@@ -140,12 +140,12 @@ export type KeyCombo = {
     ctrlKey?: boolean;
     metaKey?: boolean;
     shiftKey?: boolean;
-}
+};
 
 export type KeyBinding<T extends string> = {
     action: T;
     keyCombo: KeyCombo;
-}
+};
 
 /**
  * Helper method to check if a KeyboardEvent matches a KeyCombo
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index b0a1292ba1..10f4569e54 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -20,9 +20,9 @@ limitations under the License.
 import { createClient } from 'matrix-js-sdk/src/matrix';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import {decryptAES, encryptAES} from "matrix-js-sdk/src/crypto/aes";
+import { decryptAES, encryptAES } from "matrix-js-sdk/src/crypto/aes";
 
-import {IMatrixClientCreds, MatrixClientPeg} from './MatrixClientPeg';
+import { IMatrixClientCreds, MatrixClientPeg } from './MatrixClientPeg';
 import SecurityCustomisations from "./customisations/Security";
 import EventIndexPeg from './indexing/EventIndexPeg';
 import createMatrixClient from './utils/createMatrixClient';
@@ -41,17 +41,17 @@ import * as StorageManager from './utils/StorageManager';
 import SettingsStore from "./settings/SettingsStore";
 import TypingStore from "./stores/TypingStore";
 import ToastStore from "./stores/ToastStore";
-import {IntegrationManagers} from "./integrations/IntegrationManagers";
-import {Mjolnir} from "./mjolnir/Mjolnir";
+import { IntegrationManagers } from "./integrations/IntegrationManagers";
+import { Mjolnir } from "./mjolnir/Mjolnir";
 import DeviceListener from "./DeviceListener";
-import {Jitsi} from "./widgets/Jitsi";
-import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY, SSO_IDP_ID_KEY} from "./BasePlatform";
+import { Jitsi } from "./widgets/Jitsi";
+import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY, SSO_IDP_ID_KEY } from "./BasePlatform";
 import ThreepidInviteStore from "./stores/ThreepidInviteStore";
 import CountlyAnalytics from "./CountlyAnalytics";
 import CallHandler from './CallHandler';
 import LifecycleCustomisations from "./customisations/Lifecycle";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
-import {_t} from "./languageHandler";
+import { _t } from "./languageHandler";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -154,7 +154,7 @@ export async function loadSession(opts: ILoadSessionOpts = {}): Promise<boolean>
  *     return [null, null].
  */
 export async function getStoredSessionOwner(): Promise<[string, boolean]> {
-    const {hsUrl, userId, hasAccessToken, isGuest} = await getStoredSessionVars();
+    const { hsUrl, userId, hasAccessToken, isGuest } = await getStoredSessionVars();
     return hsUrl && userId && hasAccessToken ? [userId, isGuest] : [null, null];
 }
 
@@ -346,7 +346,7 @@ export async function getStoredSessionVars(): Promise<IStoredSession> {
         isGuest = localStorage.getItem("matrix-is-guest") === "true";
     }
 
-    return {hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest};
+    return { hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest };
 }
 
 // The pickle key is a string of unspecified length and format.  For AES, we
@@ -402,7 +402,7 @@ export async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }):
         return false;
     }
 
-    const {hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest} = await getStoredSessionVars();
+    const { hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest } = await getStoredSessionVars();
 
     if (hasAccessToken && !accessToken) {
         abortLogin();
@@ -495,7 +495,7 @@ export async function setLoggedIn(credentials: IMatrixClientCreds): Promise<Matr
         console.log("Pickle key not created");
     }
 
-    return doSetLoggedIn(Object.assign({}, credentials, {pickleKey}), true);
+    return doSetLoggedIn(Object.assign({}, credentials, { pickleKey }), true);
 }
 
 /**
@@ -562,7 +562,7 @@ async function doSetLoggedIn(
     //
     // we fire it *synchronously* to make sure it fires before on_logged_in.
     // (dis.dispatch uses `setTimeout`, which does not guarantee ordering.)
-    dis.dispatch({action: 'on_logging_in'}, true);
+    dis.dispatch({ action: 'on_logging_in' }, true);
 
     if (clearStorageEnabled) {
         await clearStorage();
@@ -745,7 +745,7 @@ export function softLogout(): void {
     // Ensure that we dispatch a view change **before** stopping the client so
     // so that React components unmount first. This avoids React soft crashes
     // that can occur when components try to use a null client.
-    dis.dispatch({action: 'on_client_not_viable'}); // generic version of on_logged_out
+    dis.dispatch({ action: 'on_client_not_viable' }); // generic version of on_logged_out
     stopMatrixClient(/*unsetClient=*/false);
 
     // DO NOT CALL LOGOUT. A soft logout preserves data, logout does not.
@@ -772,7 +772,7 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
     // to add listeners for the 'sync' event so otherwise we'd have
     // a race condition (and we need to dispatch synchronously for this
     // to work).
-    dis.dispatch({action: 'will_start_client'}, true);
+    dis.dispatch({ action: 'will_start_client' }, true);
 
     // reset things first just in case
     TypingStore.sharedInstance().reset();
@@ -814,7 +814,7 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
 
     // dispatch that we finished starting up to wire up any other bits
     // of the matrix client that cannot be set prior to starting up.
-    dis.dispatch({action: 'client_started'});
+    dis.dispatch({ action: 'client_started' });
 
     if (isSoftLogout()) {
         softLogout();
@@ -830,9 +830,9 @@ export async function onLoggedOut(): Promise<void> {
     // Ensure that we dispatch a view change **before** stopping the client so
     // so that React components unmount first. This avoids React soft crashes
     // that can occur when components try to use a null client.
-    dis.dispatch({action: 'on_logged_out'}, true);
+    dis.dispatch({ action: 'on_logged_out' }, true);
     stopMatrixClient();
-    await clearStorage({deleteEverything: true});
+    await clearStorage({ deleteEverything: true });
     LifecycleCustomisations.onLoggedOutAndStorageCleared?.();
 }
 
diff --git a/src/Login.ts b/src/Login.ts
index 7caab22d88..a8848210be 100644
--- a/src/Login.ts
+++ b/src/Login.ts
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 // @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising
-import {createClient} from "matrix-js-sdk/src/matrix";
+import { createClient } from "matrix-js-sdk/src/matrix";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { IMatrixClientCreds } from "./MatrixClientPeg";
 import SecurityCustomisations from "./customisations/Security";
@@ -190,7 +190,6 @@ export default class Login {
     }
 }
 
-
 /**
  * Send a login request to the given server, and format the response
  * as a MatrixClientCreds
diff --git a/src/MatrixClientPeg.ts b/src/MatrixClientPeg.ts
index 7db5ed1a4e..cb6cb5c65c 100644
--- a/src/MatrixClientPeg.ts
+++ b/src/MatrixClientPeg.ts
@@ -18,22 +18,22 @@ limitations under the License.
 */
 
 import { ICreateClientOpts } from 'matrix-js-sdk/src/matrix';
-import {MatrixClient} from 'matrix-js-sdk/src/client';
-import {MemoryStore} from 'matrix-js-sdk/src/store/memory';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { MemoryStore } from 'matrix-js-sdk/src/store/memory';
 import * as utils from 'matrix-js-sdk/src/utils';
-import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import {EventTimelineSet} from 'matrix-js-sdk/src/models/event-timeline-set';
+import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
 import * as sdk from './index';
 import createMatrixClient from './utils/createMatrixClient';
 import SettingsStore from './settings/SettingsStore';
 import MatrixActionCreators from './actions/MatrixActionCreators';
 import Modal from './Modal';
-import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import { verificationMethods } from 'matrix-js-sdk/src/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
 import { crossSigningCallbacks, tryToUnlockSecretStorageWithDehydrationKey } from './SecurityManager';
-import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+import { SHOW_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
 import SecurityCustomisations from "./customisations/Security";
 
 export interface IMatrixClientCreds {
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 2f2d5a2d52..0b0e621e89 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -15,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
 import Analytics from './Analytics';
 import dis from './dispatcher/dispatcher';
-import {defer} from './utils/promise';
+import { defer } from './utils/promise';
 import AsyncWrapper from './AsyncWrapper';
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
@@ -193,7 +192,7 @@ export class ModalManager {
         modal.elem = <AsyncWrapper key={modalCount} prom={prom} {...props} onFinished={closeDialog} />;
         modal.close = closeDialog;
 
-        return {modal, closeDialog, onFinishedProm};
+        return { modal, closeDialog, onFinishedProm };
     }
 
     private getCloseFn<T extends any[]>(
@@ -282,7 +281,7 @@ export class ModalManager {
         isStaticModal = false,
         options: IOptions<T> = {},
     ): IHandle<T> {
-        const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, options);
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, options);
         if (isPriorityModal) {
             // XXX: This is destructive
             this.priorityModal = modal;
@@ -305,7 +304,7 @@ export class ModalManager {
         props?: IProps<T>,
         className?: string,
     ): IHandle<T> {
-        const {modal, closeDialog, onFinishedProm} = this.buildModal<T>(prom, props, className, {});
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, {});
 
         this.modals.push(modal);
         this.reRender();
diff --git a/src/Notifier.ts b/src/Notifier.ts
index 2afc7d9901..2335dc59ac 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -32,11 +32,11 @@ import { _t } from './languageHandler';
 import Modal from './Modal';
 import SettingsStore from "./settings/SettingsStore";
 import { hideToast as hideNotificationsToast } from "./toasts/DesktopNotificationsToast";
-import {SettingLevel} from "./settings/SettingLevel";
-import {isPushNotifyDisabled} from "./settings/controllers/NotificationControllers";
+import { SettingLevel } from "./settings/SettingLevel";
+import { isPushNotifyDisabled } from "./settings/controllers/NotificationControllers";
 import RoomViewStore from "./stores/RoomViewStore";
 import UserActivity from "./UserActivity";
-import {mediaFromMxc} from "./customisations/Media";
+import { mediaFromMxc } from "./customisations/Media";
 
 /*
  * Dispatches:
diff --git a/src/Presence.ts b/src/Presence.ts
index 8f2e127cb4..af35060363 100644
--- a/src/Presence.ts
+++ b/src/Presence.ts
@@ -16,10 +16,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from "./MatrixClientPeg";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 import dis from "./dispatcher/dispatcher";
 import Timer from './utils/Timer';
-import {ActionPayload} from "./dispatcher/payloads";
+import { ActionPayload } from "./dispatcher/payloads";
 
 // Time in ms after that a user is considered as unavailable/away
 const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
@@ -78,7 +78,7 @@ class Presence {
             this.setState(State.Online);
             this.unavailableTimer.restart();
         }
-    }
+    };
 
     /**
      * Set the presence state.
@@ -98,7 +98,7 @@ class Presence {
         }
 
         try {
-            await MatrixClientPeg.get().setPresence({presence: this.state});
+            await MatrixClientPeg.get().setPresence({ presence: this.state });
             console.info("Presence:", newState);
         } catch (err) {
             console.error("Failed to set presence:", err);
diff --git a/src/Registration.js b/src/Registration.js
index 0df2ec3eb3..70dcd38454 100644
--- a/src/Registration.js
+++ b/src/Registration.js
@@ -53,16 +53,16 @@ export async function startAnyRegistrationFlow(options) {
         extraButtons: [
             <button key="start_login" onClick={() => {
                 modal.close();
-                dis.dispatch({action: 'start_login', screenAfterLogin: options.screen_after});
+                dis.dispatch({ action: 'start_login', screenAfterLogin: options.screen_after });
             }}>{ _t('Sign In') }</button>,
         ],
         onFinished: (proceed) => {
             if (proceed) {
-                dis.dispatch({action: 'start_registration', screenAfterLogin: options.screen_after});
+                dis.dispatch({ action: 'start_registration', screenAfterLogin: options.screen_after });
             } else if (options.go_home_on_cancel) {
-                dis.dispatch({action: 'view_home_page'});
+                dis.dispatch({ action: 'view_home_page' });
             } else if (options.go_welcome_on_cancel) {
-                dis.dispatch({action: 'view_welcome_page'});
+                dis.dispatch({ action: 'view_welcome_page' });
             }
         },
     });
diff --git a/src/Roles.ts b/src/Roles.ts
index b4be97fdce..ae0d316d30 100644
--- a/src/Roles.ts
+++ b/src/Roles.ts
@@ -31,6 +31,6 @@ export function textualPowerLevel(level: number, usersDefault: number): string {
     if (LEVEL_ROLE_MAP[level]) {
         return LEVEL_ROLE_MAP[level];
     } else {
-        return _t("Custom (%(level)s)", {level});
+        return _t("Custom (%(level)s)", { level });
     }
 }
diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index c86f832b90..c7f377b6e8 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -53,7 +53,7 @@ export function showStartChatInviteDialog(initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
     Modal.createTrackedDialog(
-        'Start DM', '', InviteDialog, {kind: KIND_DM, initialText},
+        'Start DM', '', InviteDialog, { kind: KIND_DM, initialText },
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
     );
 }
@@ -72,7 +72,7 @@ export function showRoomInviteDialog(roomId: string, initialText = ""): void {
 
 export function showCommunityRoomInviteDialog(roomId: string, communityName: string): void {
     Modal.createTrackedDialog(
-        'Invite Users to Community', '', CommunityPrototypeInviteDialog, {communityName, roomId},
+        'Invite Users to Community', '', CommunityPrototypeInviteDialog, { communityName, roomId },
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
     );
 }
@@ -133,7 +133,7 @@ export function showAnyInviteErrors(
         // pointless for us to list who failed exactly.
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Failed to invite users to the room', '', ErrorDialog, {
-            title: _t("Failed to invite users to the room:", {roomName: room.name}),
+            title: _t("Failed to invite users to the room:", { roomName: room.name }),
             description: inviter.getErrorText(failedUsers[0]),
         });
         return false;
diff --git a/src/RoomNotifs.js b/src/RoomNotifs.js
index 600655f635..5d109094af 100644
--- a/src/RoomNotifs.js
+++ b/src/RoomNotifs.js
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
-import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';
+import { MatrixClientPeg } from './MatrixClientPeg';
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
 
 export const ALL_MESSAGES_LOUD = 'all_messages_loud';
 export const ALL_MESSAGES = 'all_messages';
@@ -52,7 +52,7 @@ export function aggregateNotificationCount(rooms) {
             }
         }
         return result;
-    }, {count: 0, highlight: false});
+    }, { count: 0, highlight: false });
 }
 
 export function getRoomHasBadge(room) {
diff --git a/src/Rooms.ts b/src/Rooms.ts
index 19d1c9ee05..4d1682660b 100644
--- a/src/Rooms.ts
+++ b/src/Rooms.ts
@@ -104,7 +104,6 @@ export function setDMRoom(roomId: string, userId: string): Promise<void> {
         dmRoomMap[userId] = roomList;
     }
 
-
     return MatrixClientPeg.get().setAccountData('m.direct', dmRoomMap);
 }
 
diff --git a/src/ScalarAuthClient.ts b/src/ScalarAuthClient.ts
index a09c3494a8..86dd4b7a0f 100644
--- a/src/ScalarAuthClient.ts
+++ b/src/ScalarAuthClient.ts
@@ -17,12 +17,12 @@ limitations under the License.
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
 import { Service, startTermsFlow, TermsInteractionCallback, TermsNotSignedError } from './Terms';
-import {MatrixClientPeg} from "./MatrixClientPeg";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 import request from "browser-request";
 
 import SdkConfig from "./SdkConfig";
-import {WidgetType} from "./widgets/WidgetType";
-import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { WidgetType } from "./widgets/WidgetType";
+import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
 import { Room } from "matrix-js-sdk/src/models/room";
 
 // The version of the integration manager API we're intending to work with
@@ -109,7 +109,7 @@ export default class ScalarAuthClient {
             request({
                 method: "GET",
                 uri: url,
-                qs: {scalar_token: token, v: imApiVersion},
+                qs: { scalar_token: token, v: imApiVersion },
                 json: true,
             }, (err, response, body) => {
                 if (err) {
@@ -189,7 +189,7 @@ export default class ScalarAuthClient {
             request({
                 method: 'POST',
                 uri: scalarRestUrl + '/register',
-                qs: {v: imApiVersion},
+                qs: { v: imApiVersion },
                 body: openidTokenObject,
                 json: true,
             }, (err, response, body) => {
diff --git a/src/ScalarMessaging.js b/src/ScalarMessaging.js
index 3f75b3788c..600241bc06 100644
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@@ -208,7 +208,6 @@ Example:
     ]
 }
 
-
 membership_state AND bot_options
 --------------------------------
 Get the content of the "m.room.member" or "m.room.bot.options" state event respectively.
@@ -236,15 +235,15 @@ Example:
 }
 */
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import RoomViewStore from './stores/RoomViewStore';
 import { _t } from './languageHandler';
-import {IntegrationManagers} from "./integrations/IntegrationManagers";
-import {WidgetType} from "./widgets/WidgetType";
-import {objectClone} from "./utils/objects";
+import { IntegrationManagers } from "./integrations/IntegrationManagers";
+import { WidgetType } from "./widgets/WidgetType";
+import { objectClone } from "./utils/objects";
 
 function sendResponse(event, res) {
     const data = objectClone(event.data);
@@ -608,7 +607,7 @@ const onMessage = function(event) {
     }
 
     if (roomId !== RoomViewStore.getRoomId()) {
-        sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
+        sendError(event, _t('Room %(roomId)s not visible', { roomId: roomId }));
         return;
     }
 
diff --git a/src/Searching.js b/src/Searching.js
index 596dd2f3d4..d0666b1760 100644
--- a/src/Searching.js
+++ b/src/Searching.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EventIndexPeg from "./indexing/EventIndexPeg";
-import {MatrixClientPeg} from "./MatrixClientPeg";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 
 const SEARCH_LIMIT = 10;
 
@@ -43,7 +43,7 @@ async function serverSideSearch(term, roomId = undefined) {
         },
     };
 
-    const response = await client.search({body: body});
+    const response = await client.search({ body: body });
 
     const result = {
         response: response,
@@ -498,7 +498,7 @@ async function combinedPagination(searchResult) {
     // Fetch events from the server if we have a token for it and if it's the
     // local indexes turn or the local index has exhausted its results.
     if (searchResult.serverSideNextBatch && (oldestEventFrom === "local" || !searchArgs.next_batch)) {
-        const body = {body: searchResult._query, next_batch: searchResult.serverSideNextBatch};
+        const body = { body: searchResult._query, next_batch: searchResult.serverSideNextBatch };
         serverSideResult = await client.search(body);
     }
 
diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts
index 1ba0d6439b..6b372bba28 100644
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@@ -18,7 +18,7 @@ import { ICryptoCallbacks, ISecretStorageKeyInfo } from 'matrix-js-sdk/src/matri
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import Modal from './Modal';
 import * as sdk from './index';
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import { deriveKey } from 'matrix-js-sdk/src/crypto/key_passphrase';
 import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
 import { _t } from './languageHandler';
@@ -135,7 +135,7 @@ async function getSecretStorageKey(
 
     const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
     if (keyFromCustomisations) {
-        console.log("Using key from security customisations (secret storage)")
+        console.log("Using key from security customisations (secret storage)");
         cacheSecretStorageKey(keyId, keyInfo, keyFromCustomisations);
         return [keyId, keyFromCustomisations];
     }
@@ -185,7 +185,7 @@ export async function getDehydrationKey(
 ): Promise<Uint8Array> {
     const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
     if (keyFromCustomisations) {
-        console.log("Using key from security customisations (dehydration)")
+        console.log("Using key from security customisations (dehydration)");
         return keyFromCustomisations;
     }
 
@@ -224,7 +224,7 @@ export async function getDehydrationKey(
     const key = await inputToKey(input);
 
     // need to copy the key because rehydration (unpickling) will clobber it
-    dehydrationCache = {key: new Uint8Array(key), keyInfo};
+    dehydrationCache = { key: new Uint8Array(key), keyInfo };
 
     return key;
 }
diff --git a/src/SendHistoryManager.ts b/src/SendHistoryManager.ts
index 41713a1384..eeba643d81 100644
--- a/src/SendHistoryManager.ts
+++ b/src/SendHistoryManager.ts
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {clamp} from "lodash";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { clamp } from "lodash";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {SerializedPart} from "./editor/parts";
+import { SerializedPart } from "./editor/parts";
 import EditorModel from "./editor/model";
 
 interface IHistoryItem {
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index bd2133f3d9..0f38c5fffc 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -21,21 +21,21 @@ import * as React from 'react';
 import { User } from "matrix-js-sdk/src/models/user";
 
 import * as ContentHelpers from 'matrix-js-sdk/src/content-helpers';
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import dis from './dispatcher/dispatcher';
 import * as sdk from './index';
-import {_t, _td} from './languageHandler';
+import { _t, _td } from './languageHandler';
 import Modal from './Modal';
 import MultiInviter from './utils/MultiInviter';
 import { linkifyAndSanitizeHtml } from './HtmlUtils';
 import QuestionDialog from "./components/views/dialogs/QuestionDialog";
 import WidgetUtils from "./utils/WidgetUtils";
-import {textToHtmlRainbow} from "./utils/colour";
+import { textToHtmlRainbow } from "./utils/colour";
 import { getAddressType } from './UserAddress';
 import { abbreviateUrl } from './utils/UrlUtils';
 import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/IdentityServerUtils';
-import {isPermalinkHost, parsePermalink} from "./utils/permalinks/Permalinks";
-import {inviteUsersToRoom} from "./RoomInvite";
+import { isPermalinkHost, parsePermalink } from "./utils/permalinks/Permalinks";
+import { inviteUsersToRoom } from "./RoomInvite";
 import { WidgetType } from "./widgets/WidgetType";
 import { Jitsi } from "./widgets/Jitsi";
 import { parseFragment as parseHtml, Element as ChildElement } from "parse5";
@@ -46,10 +46,10 @@ import { Action } from "./dispatcher/actions";
 import { EffectiveMembership, getEffectiveMembership, leaveRoomBehaviour } from "./utils/membership";
 import SdkConfig from "./SdkConfig";
 import SettingsStore from "./settings/SettingsStore";
-import {UIFeature} from "./settings/UIFeature";
-import {CHAT_EFFECTS} from "./effects"
+import { UIFeature } from "./settings/UIFeature";
+import { CHAT_EFFECTS } from "./effects";
 import CallHandler from "./CallHandler";
-import {guessAndSetDMRoom} from "./Rooms";
+import { guessAndSetDMRoom } from "./Rooms";
 
 // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
 interface HTMLInputEvent extends Event {
@@ -143,11 +143,11 @@ export class Command {
 }
 
 function reject(error) {
-    return {error};
+    return { error };
 }
 
 function success(promise?: Promise<any>) {
-    return {promise};
+    return { promise };
 }
 
 function successSync(value: any) {
@@ -271,8 +271,8 @@ export const Commands = [
 
                 const RoomUpgradeWarningDialog = sdk.getComponent("dialogs.RoomUpgradeWarningDialog");
 
-                const {finished} = Modal.createTrackedDialog('Slash Commands', 'upgrade room confirmation',
-                    RoomUpgradeWarningDialog, {roomId: roomId, targetVersion: args}, /*className=*/null,
+                const { finished } = Modal.createTrackedDialog('Slash Commands', 'upgrade room confirmation',
+                    RoomUpgradeWarningDialog, { roomId: roomId, targetVersion: args }, /*className=*/null,
                     /*isPriority=*/false, /*isStatic=*/true);
 
                 return success(finished.then(async ([resp]) => {
@@ -288,7 +288,7 @@ export const Commands = [
                         if (resp.invite) {
                             checkForUpgradeFn = async (newRoom) => {
                                 // The upgradePromise should be done by the time we await it here.
-                                const {replacement_room: newRoomId} = await upgradePromise;
+                                const { replacement_room: newRoomId } = await upgradePromise;
                                 if (newRoom.roomId !== newRoomId) return;
 
                                 const toInvite = [
@@ -370,7 +370,7 @@ export const Commands = [
 
             return success(promise.then((url) => {
                 if (!url) return;
-                return MatrixClientPeg.get().sendStateEvent(roomId, 'm.room.avatar', {url}, '');
+                return MatrixClientPeg.get().sendStateEvent(roomId, 'm.room.avatar', { url }, '');
             }));
         },
         category: CommandCategories.actions,
@@ -741,7 +741,7 @@ export const Commands = [
                             Modal.createTrackedDialog('Slash Commands', 'User ignored', InfoDialog, {
                                 title: _t('Ignored user'),
                                 description: <div>
-                                    <p>{ _t('You are now ignoring %(userId)s', {userId}) }</p>
+                                    <p>{ _t('You are now ignoring %(userId)s', { userId }) }</p>
                                 </div>,
                             });
                         }),
@@ -772,7 +772,7 @@ export const Commands = [
                             Modal.createTrackedDialog('Slash Commands', 'User unignored', InfoDialog, {
                                 title: _t('Unignored user'),
                                 description: <div>
-                                    <p>{ _t('You are no longer ignoring %(userId)s', {userId}) }</p>
+                                    <p>{ _t('You are no longer ignoring %(userId)s', { userId }) }</p>
                                 </div>,
                             });
                         }),
@@ -839,7 +839,7 @@ export const Commands = [
         description: _td('Opens the Developer Tools dialog'),
         runFn: function(roomId) {
             const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
-            Modal.createDialog(DevtoolsDialog, {roomId});
+            Modal.createDialog(DevtoolsDialog, { roomId });
             return success();
         },
         category: CommandCategories.advanced,
@@ -951,7 +951,7 @@ export const Commands = [
                                     {
                                         _t('The signing key you provided matches the signing key you received ' +
                                             'from %(userId)s\'s session %(deviceId)s. Session marked as verified.',
-                                        {userId, deviceId})
+                                        { userId, deviceId })
                                     }
                                 </p>
                             </div>,
@@ -1172,11 +1172,11 @@ export const Commands = [
                         };
                         MatrixClientPeg.get().sendMessage(roomId, content);
                     }
-                    dis.dispatch({action: `effects.${effect.command}`});
+                    dis.dispatch({ action: `effects.${effect.command}` });
                 })());
             },
             category: CommandCategories.effects,
-        })
+        });
     }),
 ];
 
@@ -1205,7 +1205,7 @@ export function parseCommandString(input: string) {
         cmd = input;
     }
 
-    return {cmd, args};
+    return { cmd, args };
 }
 
 /**
@@ -1217,7 +1217,7 @@ export function parseCommandString(input: string) {
  * Returns null if the input didn't match a command.
  */
 export function getCommand(input: string) {
-    const {cmd, args} = parseCommandString(input);
+    const { cmd, args } = parseCommandString(input);
 
     if (CommandMap.has(cmd) && CommandMap.get(cmd).isEnabled()) {
         return {
diff --git a/src/Terms.ts b/src/Terms.ts
index a6ea40a6e8..3859cc1c73 100644
--- a/src/Terms.ts
+++ b/src/Terms.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import classNames from 'classnames';
 
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import * as sdk from '.';
 import Modal from './Modal';
 
@@ -117,7 +117,7 @@ export async function startTermsFlow(
     // but that is not a thing the API supports, so probably best to just show
     // things they've not agreed to yet.
     const unagreedPoliciesAndServicePairs = [];
-    for (const {service, policies} of policiesAndServicePairs) {
+    for (const { service, policies } of policiesAndServicePairs) {
         const unagreedPolicies = {};
         for (const [policyName, policy] of Object.entries(policies)) {
             let policyAgreed = false;
@@ -131,7 +131,7 @@ export async function startTermsFlow(
             if (!policyAgreed) unagreedPolicies[policyName] = policy;
         }
         if (Object.keys(unagreedPolicies).length > 0) {
-            unagreedPoliciesAndServicePairs.push({service, policies: unagreedPolicies});
+            unagreedPoliciesAndServicePairs.push({ service, policies: unagreedPolicies });
         }
     }
 
@@ -148,7 +148,7 @@ export async function startTermsFlow(
 
     // We only ever add to the set of URLs, so if anything has changed then we'd see a different length
     if (agreedUrlSet.size !== numAcceptedBeforeAgreement) {
-        const newAcceptedTerms = {accepted: Array.from(agreedUrlSet)};
+        const newAcceptedTerms = { accepted: Array.from(agreedUrlSet) };
         await MatrixClientPeg.get().setAccountData('m.accepted_terms', newAcceptedTerms);
     }
 
diff --git a/src/TextForEvent.tsx b/src/TextForEvent.tsx
index def0ac2cb8..844c79fbae 100644
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClientPeg} from './MatrixClientPeg';
+import { MatrixClientPeg } from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
-import {isValid3pidInvite} from "./RoomInvite";
+import { isValid3pidInvite } from "./RoomInvite";
 import SettingsStore from "./settings/SettingsStore";
-import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
-import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } from "./mjolnir/BanList";
+import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
 import { RightPanelPhases } from './stores/RightPanelStorePhases';
 import { Action } from './dispatcher/actions';
 import defaultDispatcher from './dispatcher/dispatcher';
@@ -112,7 +112,7 @@ function textForMemberEvent(ev): () => string | null {
                         targetName,
                         reason,
                     })
-                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation', { senderName, targetName })
+                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation', { senderName, targetName });
             } else if (prevContent.membership === "join") {
                 return () => reason
                     ? _t('%(senderName)s kicked %(targetName)s: %(reason)s', {
@@ -139,7 +139,7 @@ function textForRoomNameEvent(ev): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
-        return () => _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
+        return () => _t('%(senderDisplayName)s removed the room name.', { senderDisplayName });
     }
     if (ev.getPrevContent().name) {
         return () => _t('%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.', {
@@ -156,7 +156,7 @@ function textForRoomNameEvent(ev): () => string | null {
 
 function textForTombstoneEvent(ev): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    return () => _t('%(senderDisplayName)s upgraded this room.', {senderDisplayName});
+    return () => _t('%(senderDisplayName)s upgraded this room.', { senderDisplayName });
 }
 
 function textForJoinRulesEvent(ev): () => string | null {
@@ -183,9 +183,9 @@ function textForGuestAccessEvent(ev): () => string | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     switch (ev.getContent().guest_access) {
         case "can_join":
-            return () => _t('%(senderDisplayName)s has allowed guests to join the room.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s has allowed guests to join the room.', { senderDisplayName });
         case "forbidden":
-            return () => _t('%(senderDisplayName)s has prevented guests from joining the room.', {senderDisplayName});
+            return () => _t('%(senderDisplayName)s has prevented guests from joining the room.', { senderDisplayName });
         default:
             // There's no other options we can expect, however just for safety's sake we'll do this.
             return () => _t('%(senderDisplayName)s changed guest access to %(rule)s', {
@@ -237,9 +237,9 @@ function textForServerACLEvent(ev): () => string | null {
 
     let getText = null;
     if (prev.deny.length === 0 && prev.allow.length === 0) {
-        getText = () => _t("%(senderDisplayName)s set the server ACLs for this room.", {senderDisplayName});
+        getText = () => _t("%(senderDisplayName)s set the server ACLs for this room.", { senderDisplayName });
     } else {
-        getText = () => _t("%(senderDisplayName)s changed the server ACLs for this room.", {senderDisplayName});
+        getText = () => _t("%(senderDisplayName)s changed the server ACLs for this room.", { senderDisplayName });
     }
 
     if (!Array.isArray(current.allow)) {
@@ -262,7 +262,7 @@ function textForMessageEvent(ev): () => string | null {
         if (ev.getContent().msgtype === "m.emote") {
             message = "* " + senderDisplayName + " " + message;
         } else if (ev.getContent().msgtype === "m.image") {
-            message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+            message = _t('%(senderDisplayName)s sent an image.', { senderDisplayName });
         }
         return message;
     };
@@ -323,7 +323,7 @@ function textForCallAnswerEvent(event): () => string | null {
     return () => {
         const senderName = event.sender ? event.sender.name : _t('Someone');
         const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
-        return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
+        return _t('%(senderName)s answered the call.', { senderName }) + ' ' + supported;
     };
 }
 
@@ -358,16 +358,16 @@ function textForCallHangupEvent(event): () => string | null {
             // Also the correct hangup code as of VoIP v1 (with underscore)
             getReason = () => '';
         } else {
-            getReason = () => _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
+            getReason = () => _t('(unknown failure: %(reason)s)', { reason: eventContent.reason });
         }
     }
-    return () => _t('%(senderName)s ended the call.', {senderName: getSenderName()}) + ' ' + getReason();
+    return () => _t('%(senderName)s ended the call.', { senderName: getSenderName() }) + ' ' + getReason();
 }
 
 function textForCallRejectEvent(event): () => string | null {
     return () => {
         const senderName = event.sender ? event.sender.name : _t('Someone');
-        return _t('%(senderName)s declined the call.', {senderName});
+        return _t('%(senderName)s declined the call.', { senderName });
     };
 }
 
@@ -424,14 +424,14 @@ function textForHistoryVisibilityEvent(event): () => string | null {
     switch (event.getContent().history_visibility) {
         case 'invited':
             return () => _t('%(senderName)s made future room history visible to all room members, '
-                + 'from the point they are invited.', {senderName});
+                + 'from the point they are invited.', { senderName });
         case 'joined':
             return () => _t('%(senderName)s made future room history visible to all room members, '
-                + 'from the point they joined.', {senderName});
+                + 'from the point they joined.', { senderName });
         case 'shared':
-            return () => _t('%(senderName)s made future room history visible to all room members.', {senderName});
+            return () => _t('%(senderName)s made future room history visible to all room members.', { senderName });
         case 'world_readable':
-            return () => _t('%(senderName)s made future room history visible to anyone.', {senderName});
+            return () => _t('%(senderName)s made future room history visible to anyone.', { senderName });
         default:
             return () => _t('%(senderName)s made future room history visible to unknown (%(visibility)s).', {
                 senderName,
@@ -492,7 +492,7 @@ const onPinnedMessagesClick = (): void => {
         phase: RightPanelPhases.PinnedMessages,
         allowClose: false,
     });
-}
+};
 
 function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;
@@ -517,8 +517,8 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
 
 function textForWidgetEvent(event): () => string | null {
     const senderName = event.getSender();
-    const {name: prevName, type: prevType, url: prevUrl} = event.getPrevContent();
-    const {name, type, url} = event.getContent() || {};
+    const { name: prevName, type: prevType, url: prevUrl } = event.getPrevContent();
+    const { name, type, url } = event.getContent() || {};
 
     let widgetName = name || prevName || type || prevType || '';
     // Apply sentence case to widget name
@@ -547,68 +547,68 @@ function textForWidgetEvent(event): () => string | null {
 
 function textForWidgetLayoutEvent(event): () => string | null {
     const senderName = event.sender?.name || event.getSender();
-    return () => _t("%(senderName)s has updated the widget layout", {senderName});
+    return () => _t("%(senderName)s has updated the widget layout", { senderName });
 }
 
 function textForMjolnirEvent(event): () => string | null {
     const senderName = event.getSender();
-    const {entity: prevEntity} = event.getPrevContent();
-    const {entity, recommendation, reason} = event.getContent();
+    const { entity: prevEntity } = event.getPrevContent();
+    const { entity, recommendation, reason } = event.getContent();
 
     // Rule removed
     if (!entity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s removed the rule banning users matching %(glob)s",
-                {senderName, glob: prevEntity});
+                { senderName, glob: prevEntity });
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s removed the rule banning rooms matching %(glob)s",
-                {senderName, glob: prevEntity});
+                { senderName, glob: prevEntity });
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s removed the rule banning servers matching %(glob)s",
-                {senderName, glob: prevEntity});
+                { senderName, glob: prevEntity });
         }
 
         // Unknown type. We'll say something, but we shouldn't end up here.
-        return () => _t("%(senderName)s removed a ban rule matching %(glob)s", {senderName, glob: prevEntity});
+        return () => _t("%(senderName)s removed a ban rule matching %(glob)s", { senderName, glob: prevEntity });
     }
 
     // Invalid rule
-    if (!recommendation || !reason) return () => _t(`%(senderName)s updated an invalid ban rule`, {senderName});
+    if (!recommendation || !reason) return () => _t(`%(senderName)s updated an invalid ban rule`, { senderName });
 
     // Rule updated
     if (entity === prevEntity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s updated the rule banning users matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s updated the rule banning rooms matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s updated the rule banning servers matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         }
 
         // Unknown type. We'll say something but we shouldn't end up here.
         return () => _t("%(senderName)s updated a ban rule matching %(glob)s for %(reason)s",
-            {senderName, glob: entity, reason});
+            { senderName, glob: entity, reason });
     }
 
     // New rule
     if (!prevEntity) {
         if (USER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s created a rule banning users matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         } else if (ROOM_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s created a rule banning rooms matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         } else if (SERVER_RULE_TYPES.includes(event.getType())) {
             return () => _t("%(senderName)s created a rule banning servers matching %(glob)s for %(reason)s",
-                {senderName, glob: entity, reason});
+                { senderName, glob: entity, reason });
         }
 
         // Unknown type. We'll say something but we shouldn't end up here.
         return () => _t("%(senderName)s created a ban rule matching %(glob)s for %(reason)s",
-            {senderName, glob: entity, reason});
+            { senderName, glob: entity, reason });
     }
 
     // else the entity !== prevEntity - count as a removal & add
@@ -616,25 +616,25 @@ function textForMjolnirEvent(event): () => string | null {
         return () => _t(
             "%(senderName)s changed a rule that was banning users matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+            { senderName, oldGlob: prevEntity, newGlob: entity, reason },
         );
     } else if (ROOM_RULE_TYPES.includes(event.getType())) {
         return () => _t(
             "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+            { senderName, oldGlob: prevEntity, newGlob: entity, reason },
         );
     } else if (SERVER_RULE_TYPES.includes(event.getType())) {
         return () => _t(
             "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching " +
             "%(newGlob)s for %(reason)s",
-            {senderName, oldGlob: prevEntity, newGlob: entity, reason},
+            { senderName, oldGlob: prevEntity, newGlob: entity, reason },
         );
     }
 
     // Unknown type. We'll say something but we shouldn't end up here.
     return () => _t("%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s " +
-        "for %(reason)s", {senderName, oldGlob: prevEntity, newGlob: entity, reason});
+        "for %(reason)s", { senderName, oldGlob: prevEntity, newGlob: entity, reason });
 }
 
 interface IHandlers {
diff --git a/src/Tinter.js b/src/Tinter.js
index ca5a460e16..9c50d7d53c 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -256,7 +256,6 @@ class Tinter {
         });
     }
 
-
     setTheme(theme) {
         this.theme = theme;
 
diff --git a/src/UserActivity.ts b/src/UserActivity.ts
index 606075ec7c..c35ced0cc4 100644
--- a/src/UserActivity.ts
+++ b/src/UserActivity.ts
@@ -191,10 +191,10 @@ export default class UserActivity {
             this.lastScreenY = event.screenY;
         }
 
-        dis.dispatch({action: 'user_activity'});
+        dis.dispatch({ action: 'user_activity' });
         if (!this.activeNowTimeout.isRunning()) {
             this.activeNowTimeout.start();
-            dis.dispatch({action: 'user_activity_start'});
+            dis.dispatch({ action: 'user_activity_start' });
 
             UserActivity.runTimersUntilTimeout(this.attachedActiveNowTimers, this.activeNowTimeout);
         } else {
diff --git a/src/WhoIsTyping.ts b/src/WhoIsTyping.ts
index a8ca425ea8..938218d270 100644
--- a/src/WhoIsTyping.ts
+++ b/src/WhoIsTyping.ts
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Room} from "matrix-js-sdk/src/models/room";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import {MatrixClientPeg} from "./MatrixClientPeg";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 import { _t } from './languageHandler';
 
 export function usersTypingApartFromMeAndIgnored(room: Room): RoomMember[] {
@@ -61,7 +61,7 @@ export function whoIsTypingString(whoIsTyping: RoomMember[], limit: number): str
     if (whoIsTyping.length === 0) {
         return '';
     } else if (whoIsTyping.length === 1) {
-        return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
+        return _t('%(displayName)s is typing …', { displayName: whoIsTyping[0].name });
     }
 
     const names = whoIsTyping.map(m => m.name);
@@ -73,6 +73,6 @@ export function whoIsTypingString(whoIsTyping: RoomMember[], limit: number): str
         });
     } else {
         const lastPerson = names.pop();
-        return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
+        return _t('%(names)s and %(lastPerson)s are typing …', { names: names.join(', '), lastPerson: lastPerson });
     }
 }
diff --git a/src/accessibility/KeyboardShortcuts.tsx b/src/accessibility/KeyboardShortcuts.tsx
index 1cd5408210..25c41f9db5 100644
--- a/src/accessibility/KeyboardShortcuts.tsx
+++ b/src/accessibility/KeyboardShortcuts.tsx
@@ -20,7 +20,7 @@ import classNames from "classnames";
 import * as sdk from "../index";
 import Modal from "../Modal";
 import { _t, _td } from "../languageHandler";
-import {isMac, Key} from "../Keyboard";
+import { isMac, Key } from "../Keyboard";
 
 // TS: once languageHandler is TS we can probably inline this into the enum
 _td("Navigation");
@@ -332,7 +332,7 @@ const keyIcon: Record<string, string> = {
 
 const Shortcut: React.FC<{
     shortcut: IShortcut;
-}> = ({shortcut}) => {
+}> = ({ shortcut }) => {
     const classes = classNames({
         "mx_KeyboardShortcutsDialog_inline": shortcut.keybinds.every(k => !k.modifiers || k.modifiers.length === 0),
     });
diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx
index 4cb537f318..87f525bdfc 100644
--- a/src/accessibility/RovingTabIndex.tsx
+++ b/src/accessibility/RovingTabIndex.tsx
@@ -26,8 +26,8 @@ import React, {
     Dispatch,
 } from "react";
 
-import {Key} from "../Keyboard";
-import {FocusHandler, Ref} from "./roving/types";
+import { Key } from "../Keyboard";
+import { FocusHandler, Ref } from "./roving/types";
 
 /**
  * Module to simplify implementing the Roving TabIndex accessibility technique
@@ -156,13 +156,13 @@ interface IProps {
     onKeyDown?(ev: React.KeyboardEvent, state: IState);
 }
 
-export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEnd, onKeyDown}) => {
+export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeEnd, onKeyDown }) => {
     const [state, dispatch] = useReducer<Reducer<IState, IAction>>(reducer, {
         activeRef: null,
         refs: [],
     });
 
-    const context = useMemo<IContext>(() => ({state, dispatch}), [state]);
+    const context = useMemo<IContext>(() => ({ state, dispatch }), [state]);
 
     const onKeyDownHandler = useCallback((ev) => {
         let handled = false;
@@ -196,7 +196,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({children, handleHomeEn
     }, [context.state, onKeyDown, handleHomeEnd]);
 
     return <RovingTabIndexContext.Provider value={context}>
-        { children({onKeyDownHandler}) }
+        { children({ onKeyDownHandler }) }
     </RovingTabIndexContext.Provider>;
 };
 
@@ -218,13 +218,13 @@ export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref]
     useLayoutEffect(() => {
         context.dispatch({
             type: Type.Register,
-            payload: {ref},
+            payload: { ref },
         });
         // teardown
         return () => {
             context.dispatch({
                 type: Type.Unregister,
-                payload: {ref},
+                payload: { ref },
             });
         };
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -232,7 +232,7 @@ export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref]
     const onFocus = useCallback(() => {
         context.dispatch({
             type: Type.SetFocus,
-            payload: {ref},
+            payload: { ref },
         });
     }, [ref, context]);
 
@@ -241,6 +241,6 @@ export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref]
 };
 
 // re-export the semantic helper components for simplicity
-export {RovingTabIndexWrapper} from "./roving/RovingTabIndexWrapper";
-export {RovingAccessibleButton} from "./roving/RovingAccessibleButton";
-export {RovingAccessibleTooltipButton} from "./roving/RovingAccessibleTooltipButton";
+export { RovingTabIndexWrapper } from "./roving/RovingTabIndexWrapper";
+export { RovingAccessibleButton } from "./roving/RovingAccessibleButton";
+export { RovingAccessibleTooltipButton } from "./roving/RovingAccessibleTooltipButton";
diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx
index e756d948e5..8d882fadea 100644
--- a/src/accessibility/Toolbar.tsx
+++ b/src/accessibility/Toolbar.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 
-import {IState, RovingTabIndexProvider} from "./RovingTabIndex";
-import {Key} from "../Keyboard";
+import { IState, RovingTabIndexProvider } from "./RovingTabIndex";
+import { Key } from "../Keyboard";
 
 interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
 }
@@ -25,7 +25,7 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
 // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
 // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
 // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
-const Toolbar: React.FC<IProps> = ({children, ...props}) => {
+const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
     const onKeyDown = (ev: React.KeyboardEvent, state: IState) => {
         const target = ev.target as HTMLElement;
         // Don't interfere with input default keydown behaviour
@@ -62,7 +62,7 @@ const Toolbar: React.FC<IProps> = ({children, ...props}) => {
     };
 
     return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
-        {({onKeyDownHandler}) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
+        {({ onKeyDownHandler }) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
             { children }
         </div>}
     </RovingTabIndexProvider>;
diff --git a/src/accessibility/context_menu/MenuGroup.tsx b/src/accessibility/context_menu/MenuGroup.tsx
index 9334e17a18..97f9694f83 100644
--- a/src/accessibility/context_menu/MenuGroup.tsx
+++ b/src/accessibility/context_menu/MenuGroup.tsx
@@ -23,7 +23,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 // Semantic component for representing a role=group for grouping menu radios/checkboxes
-export const MenuGroup: React.FC<IProps> = ({children, label, ...props}) => {
+export const MenuGroup: React.FC<IProps> = ({ children, label, ...props }) => {
     return <div {...props} role="group" aria-label={label}>
         { children }
     </div>;
diff --git a/src/accessibility/context_menu/MenuItem.tsx b/src/accessibility/context_menu/MenuItem.tsx
index 9a7c1d1f0a..9c0b248274 100644
--- a/src/accessibility/context_menu/MenuItem.tsx
+++ b/src/accessibility/context_menu/MenuItem.tsx
@@ -27,7 +27,7 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
 }
 
 // Semantic component for representing a role=menuitem
-export const MenuItem: React.FC<IProps> = ({children, label, tooltip, ...props}) => {
+export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props }) => {
     const ariaLabel = props["aria-label"] || label;
 
     if (tooltip) {
diff --git a/src/accessibility/context_menu/MenuItemCheckbox.tsx b/src/accessibility/context_menu/MenuItemCheckbox.tsx
index 5eb8cc4819..67da4cc85a 100644
--- a/src/accessibility/context_menu/MenuItemCheckbox.tsx
+++ b/src/accessibility/context_menu/MenuItemCheckbox.tsx
@@ -26,7 +26,7 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
 }
 
 // Semantic component for representing a role=menuitemcheckbox
-export const MenuItemCheckbox: React.FC<IProps> = ({children, label, active, disabled, ...props}) => {
+export const MenuItemCheckbox: React.FC<IProps> = ({ children, label, active, disabled, ...props }) => {
     return (
         <AccessibleButton
             {...props}
diff --git a/src/accessibility/context_menu/MenuItemRadio.tsx b/src/accessibility/context_menu/MenuItemRadio.tsx
index 472f13ff14..eb50d45836 100644
--- a/src/accessibility/context_menu/MenuItemRadio.tsx
+++ b/src/accessibility/context_menu/MenuItemRadio.tsx
@@ -26,7 +26,7 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
 }
 
 // Semantic component for representing a role=menuitemradio
-export const MenuItemRadio: React.FC<IProps> = ({children, label, active, disabled, ...props}) => {
+export const MenuItemRadio: React.FC<IProps> = ({ children, label, active, disabled, ...props }) => {
     return (
         <AccessibleButton
             {...props}
diff --git a/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx b/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
index d373f892c9..66846cc484 100644
--- a/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
+++ b/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from "react";
 
-import {Key} from "../../Keyboard";
+import { Key } from "../../Keyboard";
 import StyledCheckbox from "../../components/views/elements/StyledCheckbox";
 
 interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
@@ -28,7 +28,7 @@ interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
 }
 
 // Semantic component for representing a styled role=menuitemcheckbox
-export const StyledMenuItemCheckbox: React.FC<IProps> = ({children, label, onChange, onClose, ...props}) => {
+export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
     const onKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === Key.ENTER || e.key === Key.SPACE) {
             e.stopPropagation();
diff --git a/src/accessibility/context_menu/StyledMenuItemRadio.tsx b/src/accessibility/context_menu/StyledMenuItemRadio.tsx
index 5e5aa90a38..e3d340ef3e 100644
--- a/src/accessibility/context_menu/StyledMenuItemRadio.tsx
+++ b/src/accessibility/context_menu/StyledMenuItemRadio.tsx
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from "react";
 
-import {Key} from "../../Keyboard";
+import { Key } from "../../Keyboard";
 import StyledRadioButton from "../../components/views/elements/StyledRadioButton";
 
 interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
@@ -28,7 +28,7 @@ interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
 }
 
 // Semantic component for representing a styled role=menuitemradio
-export const StyledMenuItemRadio: React.FC<IProps> = ({children, label, onChange, onClose, ...props}) => {
+export const StyledMenuItemRadio: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
     const onKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === Key.ENTER || e.key === Key.SPACE) {
             e.stopPropagation();
diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx
index 3473ef1bc9..f9ce87db6a 100644
--- a/src/accessibility/roving/RovingAccessibleButton.tsx
+++ b/src/accessibility/roving/RovingAccessibleButton.tsx
@@ -17,15 +17,15 @@ limitations under the License.
 import React from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
-import {useRovingTabIndex} from "../RovingTabIndex";
-import {Ref} from "./types";
+import { useRovingTabIndex } from "../RovingTabIndex";
+import { Ref } from "./types";
 
 interface IProps extends Omit<React.ComponentProps<typeof AccessibleButton>, "onFocus" | "inputRef" | "tabIndex"> {
     inputRef?: Ref;
 }
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
-export const RovingAccessibleButton: React.FC<IProps> = ({inputRef, ...props}) => {
+export const RovingAccessibleButton: React.FC<IProps> = ({ inputRef, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
 };
diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
index 2cb974d60e..d9e393d728 100644
--- a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
+++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 import React from "react";
 
 import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
-import {useRovingTabIndex} from "../RovingTabIndex";
-import {Ref} from "./types";
+import { useRovingTabIndex } from "../RovingTabIndex";
+import { Ref } from "./types";
 
 type ATBProps = React.ComponentProps<typeof AccessibleTooltipButton>;
 interface IProps extends Omit<ATBProps, "onFocus" | "inputRef" | "tabIndex"> {
@@ -26,7 +26,7 @@ interface IProps extends Omit<ATBProps, "onFocus" | "inputRef" | "tabIndex"> {
 }
 
 // Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
-export const RovingAccessibleTooltipButton: React.FC<IProps> = ({inputRef, ...props}) => {
+export const RovingAccessibleTooltipButton: React.FC<IProps> = ({ inputRef, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return <AccessibleTooltipButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
 };
diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx
index 5211f30215..974bb9a388 100644
--- a/src/accessibility/roving/RovingTabIndexWrapper.tsx
+++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 
-import {useRovingTabIndex} from "../RovingTabIndex";
-import {FocusHandler, Ref} from "./types";
+import { useRovingTabIndex } from "../RovingTabIndex";
+import { FocusHandler, Ref } from "./types";
 
 interface IProps {
     inputRef?: Ref;
@@ -29,7 +29,7 @@ interface IProps {
 }
 
 // Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
-export const RovingTabIndexWrapper: React.FC<IProps> = ({children, inputRef}) => {
+export const RovingTabIndexWrapper: React.FC<IProps> = ({ children, inputRef }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
-    return children({onFocus, isActive, ref});
+    return children({ onFocus, isActive, ref });
 };
diff --git a/src/accessibility/roving/types.ts b/src/accessibility/roving/types.ts
index f0a43e5fb8..cc6a98e1d7 100644
--- a/src/accessibility/roving/types.ts
+++ b/src/accessibility/roving/types.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {RefObject} from "react";
+import { RefObject } from "react";
 
 export type Ref = RefObject<HTMLElement>;
 
diff --git a/src/actions/MatrixActionCreators.ts b/src/actions/MatrixActionCreators.ts
index 33e72becd2..70b86f8ee5 100644
--- a/src/actions/MatrixActionCreators.ts
+++ b/src/actions/MatrixActionCreators.ts
@@ -20,7 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
 
 import dis from "../dispatcher/dispatcher";
-import {ActionPayload} from "../dispatcher/payloads";
+import { ActionPayload } from "../dispatcher/payloads";
 
 // TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
 //       become dispatches in the same place.
diff --git a/src/actions/RoomListActions.ts b/src/actions/RoomListActions.ts
index 88946ee26f..81e05f8678 100644
--- a/src/actions/RoomListActions.ts
+++ b/src/actions/RoomListActions.ts
@@ -112,7 +112,7 @@ export default class RoomListActions {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to remove tag " + oldTag + " from room: " + err);
                     Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
-                        title: _t('Failed to remove tag %(tagName)s from room', {tagName: oldTag}),
+                        title: _t('Failed to remove tag %(tagName)s from room', { tagName: oldTag }),
                         description: ((err && err.message) ? err.message : _t('Operation failed')),
                     });
                 });
@@ -132,7 +132,7 @@ export default class RoomListActions {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to add tag " + newTag + " to room: " + err);
                     Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
-                        title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
+                        title: _t('Failed to add tag %(tagName)s to room', { tagName: newTag }),
                         description: ((err && err.message) ? err.message : _t('Operation failed')),
                     });
 
diff --git a/src/actions/TagOrderActions.ts b/src/actions/TagOrderActions.ts
index 021cd11b55..dc538134a1 100644
--- a/src/actions/TagOrderActions.ts
+++ b/src/actions/TagOrderActions.ts
@@ -53,11 +53,11 @@ export default class TagOrderActions {
             Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
             return matrixClient.setAccountData(
                 'im.vector.web.tag_ordering',
-                {tags, removedTags, _storeId: storeId},
+                { tags, removedTags, _storeId: storeId },
             );
         }, () => {
             // For an optimistic update
-            return {tags, removedTags};
+            return { tags, removedTags };
         });
     }
 
@@ -100,11 +100,11 @@ export default class TagOrderActions {
             Analytics.trackEvent('TagOrderActions', 'removeTag');
             return matrixClient.setAccountData(
                 'im.vector.web.tag_ordering',
-                {tags, removedTags, _storeId: storeId},
+                { tags, removedTags, _storeId: storeId },
             );
         }, () => {
             // For an optimistic update
-            return {removedTags};
+            return { removedTags };
         });
     }
 }
diff --git a/src/actions/actionCreators.ts b/src/actions/actionCreators.ts
index c789e3cd07..81e0b95098 100644
--- a/src/actions/actionCreators.ts
+++ b/src/actions/actionCreators.ts
@@ -51,9 +51,9 @@ export function asyncAction(id: string, fn: () => Promise<any>, pendingFn: () =>
             request: typeof pendingFn === 'function' ? pendingFn() : undefined,
         });
         fn().then((result) => {
-            dispatch({action: id + '.success', result});
+            dispatch({ action: id + '.success', result });
         }).catch((err) => {
-            dispatch({action: id + '.failure', err});
+            dispatch({ action: id + '.failure', err });
         });
     };
     return new AsyncActionPayload(helper);
diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js
index de50feaedb..a19494c753 100644
--- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js
+++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js
@@ -22,8 +22,8 @@ import { _t } from '../../../../languageHandler';
 
 import SettingsStore from "../../../../settings/SettingsStore";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
-import {Action} from "../../../../dispatcher/actions";
-import {SettingLevel} from "../../../../settings/SettingLevel";
+import { Action } from "../../../../dispatcher/actions";
+import { SettingLevel } from "../../../../settings/SettingLevel";
 
 /*
  * Allows the user to disable the Event Index.
diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
index 0710c513da..76c3373ba4 100644
--- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
+++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx
@@ -21,9 +21,9 @@ import SdkConfig from '../../../../SdkConfig';
 import SettingsStore from "../../../../settings/SettingsStore";
 
 import Modal from '../../../../Modal';
-import {formatBytes, formatCountLong} from "../../../../utils/FormattingUtils";
+import { formatBytes, formatCountLong } from "../../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../../indexing/EventIndexPeg";
-import {SettingLevel} from "../../../../settings/SettingLevel";
+import { SettingLevel } from "../../../../settings/SettingLevel";
 
 interface IProps {
     onFinished: (confirmed: boolean) => void;
@@ -139,7 +139,7 @@ export default class ManageEventIndexDialog extends React.Component<IProps, ISta
     };
 
     private onCrawlerSleepTimeChange = (e) => {
-        this.setState({crawlerSleepTime: e.target.value});
+        this.setState({ crawlerSleepTime: e.target.value });
         SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     };
 
diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
index 549494b5cb..92fb37ef16 100644
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.js
@@ -15,15 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import FileSaver from 'file-saver';
 import * as sdk from '../../../../index';
-import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
-import {_t, _td} from '../../../../languageHandler';
+import { _t, _td } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';
 import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
-import {copyNode} from "../../../../utils/strings";
+import { copyNode } from "../../../../utils/strings";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";
 
 const PHASE_PASSPHRASE = 0;
@@ -152,11 +152,11 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     }
 
     _onOptOutClick = () => {
-        this.setState({phase: PHASE_OPTOUT_CONFIRM});
+        this.setState({ phase: PHASE_OPTOUT_CONFIRM });
     }
 
     _onSetUpClick = () => {
-        this.setState({phase: PHASE_PASSPHRASE});
+        this.setState({ phase: PHASE_PASSPHRASE });
     }
 
     _onSkipPassPhraseClick = async () => {
@@ -179,7 +179,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
             return;
         }
 
-        this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
+        this.setState({ phase: PHASE_PASSPHRASE_CONFIRM });
     };
 
     _onPassPhraseConfirmNextClick = async (e) => {
@@ -370,21 +370,21 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         if (this.state.copied) {
             introText = _t(
                 "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
-                {}, {b: s => <b>{s}</b>},
+                {}, { b: s => <b>{s}</b> },
             );
         } else if (this.state.downloaded) {
             introText = _t(
                 "Your Security Key is in your <b>Downloads</b> folder.",
-                {}, {b: s => <b>{s}</b>},
+                {}, { b: s => <b>{s}</b> },
             );
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             {introText}
             <ul>
-                <li>{_t("<b>Print it</b> and store it somewhere safe", {}, {b: s => <b>{s}</b>})}</li>
-                <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
-                <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
+                <li>{_t("<b>Print it</b> and store it somewhere safe", {}, { b: s => <b>{s}</b> })}</li>
+                <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, { b: s => <b>{s}</b> })}</li>
+                <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, { b: s => <b>{s}</b> })}</li>
             </ul>
             <DialogButtons primaryButton={_t("Continue")}
                 onPrimaryButtonClick={this._createBackup}
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
index 6d5703a768..e1254929db 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
@@ -15,16 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
-import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import FileSaver from 'file-saver';
-import {_t, _td} from '../../../../languageHandler';
+import { _t, _td } from '../../../../languageHandler';
 import Modal from '../../../../Modal';
 import { promptForBackupPassphrase } from '../../../../SecurityManager';
-import {copyNode} from "../../../../utils/strings";
-import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents";
+import { copyNode } from "../../../../utils/strings";
+import { SSOAuthEntry } from "../../../../components/views/auth/InteractiveAuthEntryComponents";
 import PassphraseField from "../../../../components/views/auth/PassphraseField";
 import StyledRadioButton from '../../../../components/views/elements/StyledRadioButton';
 import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
@@ -155,7 +155,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 backupSigStatus,
             };
         } catch (e) {
-            this.setState({phase: PHASE_LOADERROR});
+            this.setState({ phase: PHASE_LOADERROR });
         }
     }
 
@@ -385,7 +385,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onLoadRetryClick = () => {
-        this.setState({phase: PHASE_LOADING});
+        this.setState({ phase: PHASE_LOADING });
         this._fetchBackupInfo();
     }
 
@@ -394,11 +394,11 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onCancelClick = () => {
-        this.setState({phase: PHASE_CONFIRM_SKIP});
+        this.setState({ phase: PHASE_CONFIRM_SKIP });
     }
 
     _onGoBackClick = () => {
-        this.setState({phase: PHASE_CHOOSE_KEY_PASSPHRASE});
+        this.setState({ phase: PHASE_CHOOSE_KEY_PASSPHRASE });
     }
 
     _onPassPhraseNextClick = async (e) => {
@@ -412,7 +412,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             return;
         }
 
-        this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
+        this.setState({ phase: PHASE_PASSPHRASE_CONFIRM });
     };
 
     _onPassPhraseConfirmNextClick = async (e) => {
diff --git a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
index 60f2ca9168..0435d81968 100644
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import FileSaver from 'file-saver';
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../../languageHandler';
 
@@ -55,11 +55,11 @@ export default class ExportE2eKeysDialog extends React.Component {
 
         const passphrase = this._passphrase1.current.value;
         if (passphrase !== this._passphrase2.current.value) {
-            this.setState({errStr: _t('Passphrases must match')});
+            this.setState({ errStr: _t('Passphrases must match') });
             return false;
         }
         if (!passphrase) {
-            this.setState({errStr: _t('Passphrase must not be empty')});
+            this.setState({ errStr: _t('Passphrase must not be empty') });
             return false;
         }
 
diff --git a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
index 70fc997230..6017d07047 100644
--- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { MatrixClient } from 'matrix-js-sdk/src/client';
diff --git a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
index 8c09cc6d16..4a0aa37da0 100644
--- a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
+++ b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
@@ -18,12 +18,12 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import * as sdk from "../../../../index";
-import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
 import RestoreKeyBackupDialog from "../../../../components/views/dialogs/security/RestoreKeyBackupDialog";
-import {Action} from "../../../../dispatcher/actions";
+import { Action } from "../../../../dispatcher/actions";
 
 export default class NewRecoveryMethodDialog extends React.PureComponent {
     static propTypes = {
diff --git a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
index b60e6fd3cb..f0f8a5273b 100644
--- a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
+++ b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
@@ -21,7 +21,7 @@ import * as sdk from "../../../../index";
 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
-import {Action} from "../../../../dispatcher/actions";
+import { Action } from "../../../../dispatcher/actions";
 
 export default class RecoveryMethodRemovedDialog extends React.PureComponent {
     static propTypes = {
diff --git a/src/autocomplete/AutocompleteProvider.tsx b/src/autocomplete/AutocompleteProvider.tsx
index 2242fec914..51ab2e2cf7 100644
--- a/src/autocomplete/AutocompleteProvider.tsx
+++ b/src/autocomplete/AutocompleteProvider.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import type {ICompletion, ISelectionRange} from './Autocompleter';
+import type { ICompletion, ISelectionRange } from './Autocompleter';
 
 export interface ICommand {
     command: string | null;
diff --git a/src/autocomplete/Autocompleter.ts b/src/autocomplete/Autocompleter.ts
index 7f3f5d2c01..7ab2ae70ea 100644
--- a/src/autocomplete/Autocompleter.ts
+++ b/src/autocomplete/Autocompleter.ts
@@ -26,7 +26,7 @@ import UserProvider from './UserProvider';
 import EmojiProvider from './EmojiProvider';
 import NotifProvider from './NotifProvider';
 import { timeout } from "../utils/promise";
-import AutocompleteProvider, {ICommand} from "./AutocompleteProvider";
+import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
 import SettingsStore from "../settings/SettingsStore";
 import SpaceProvider from "./SpaceProvider";
 
diff --git a/src/autocomplete/CommandProvider.tsx b/src/autocomplete/CommandProvider.tsx
index 9de25c0d84..e9a7742dee 100644
--- a/src/autocomplete/CommandProvider.tsx
+++ b/src/autocomplete/CommandProvider.tsx
@@ -18,12 +18,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from '../languageHandler';
+import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import QueryMatcher from './QueryMatcher';
-import {TextualCompletion} from './Components';
-import {ICompletion, ISelectionRange} from "./Autocompleter";
-import {Command, Commands, CommandMap} from '../SlashCommands';
+import { TextualCompletion } from './Components';
+import { ICompletion, ISelectionRange } from "./Autocompleter";
+import { Command, Commands, CommandMap } from '../SlashCommands';
 
 const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
 
@@ -34,7 +34,7 @@ export default class CommandProvider extends AutocompleteProvider {
         super(COMMAND_RE);
         this.matcher = new QueryMatcher(Commands, {
             keys: ['command', 'args', 'description'],
-            funcs: [({aliases}) => aliases.join(" ")], // aliases
+            funcs: [({ aliases }) => aliases.join(" ")], // aliases
         });
     }
 
@@ -44,7 +44,7 @@ export default class CommandProvider extends AutocompleteProvider {
         force?: boolean,
         limit = -1,
     ): Promise<ICompletion[]> {
-        const {command, range} = this.getCurrentCommand(query, selection);
+        const { command, range } = this.getCurrentCommand(query, selection);
         if (!command) return [];
 
         let matches = [];
@@ -68,7 +68,6 @@ export default class CommandProvider extends AutocompleteProvider {
             }
         }
 
-
         return matches.filter(cmd => cmd.isEnabled()).map((result) => {
             let completion = result.getCommand() + ' ';
             const usedAlias = result.aliases.find(alias => `/${alias}` === command[1]);
diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx
index c9358b0c61..48c1921539 100644
--- a/src/autocomplete/CommunityProvider.tsx
+++ b/src/autocomplete/CommunityProvider.tsx
@@ -19,15 +19,15 @@ import React from 'react';
 import Group from "matrix-js-sdk/src/models/group";
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
-import {PillCompletion} from './Components';
+import { PillCompletion } from './Components';
 import * as sdk from '../index';
-import {sortBy} from "lodash";
-import {makeGroupPermalink} from "../utils/permalinks/Permalinks";
-import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { sortBy } from "lodash";
+import { makeGroupPermalink } from "../utils/permalinks/Permalinks";
+import { ICompletion, ISelectionRange } from "./Autocompleter";
 import FlairStore from "../stores/FlairStore";
-import {mediaFromMxc} from "../customisations/Media";
+import { mediaFromMxc } from "../customisations/Media";
 
 const COMMUNITY_REGEX = /\B\+\S*/g;
 
@@ -66,11 +66,11 @@ export default class CommunityProvider extends AutocompleteProvider {
 
         const cli = MatrixClientPeg.get();
         let completions = [];
-        const {command, range} = this.getCurrentCommand(query, selection, force);
+        const { command, range } = this.getCurrentCommand(query, selection, force);
         if (command) {
-            const joinedGroups = cli.getGroups().filter(({myMembership}) => myMembership === 'join');
+            const joinedGroups = cli.getGroups().filter(({ myMembership }) => myMembership === 'join');
 
-            const groups = (await Promise.all(joinedGroups.map(async ({groupId}) => {
+            const groups = (await Promise.all(joinedGroups.map(async ({ groupId }) => {
                 try {
                     return FlairStore.getGroupProfileCached(cli, groupId);
                 } catch (e) { // if FlairStore failed, fall back to just groupId
@@ -90,7 +90,7 @@ export default class CommunityProvider extends AutocompleteProvider {
             completions = sortBy(completions, [
                 (c) => score(matchedString, c.groupId),
                 (c) => c.groupId.length,
-            ]).map(({avatarUrl, groupId, name}) => ({
+            ]).map(({ avatarUrl, groupId, name }) => ({
                 completion: groupId,
                 suffix: ' ',
                 type: "community",
diff --git a/src/autocomplete/Components.tsx b/src/autocomplete/Components.tsx
index 4b0d35698d..8f155f7f55 100644
--- a/src/autocomplete/Components.tsx
+++ b/src/autocomplete/Components.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef} from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 /* These were earlier stateless functional components but had to be converted
@@ -31,7 +31,7 @@ interface ITextualCompletionProps {
 }
 
 export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props, ref) => {
-    const {title, subtitle, description, className, ...restProps} = props;
+    const { title, subtitle, description, className, ...restProps } = props;
     return (
         <div {...restProps}
             className={classNames('mx_Autocomplete_Completion_block', className)}
@@ -50,7 +50,7 @@ interface IPillCompletionProps extends ITextualCompletionProps {
 }
 
 export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref) => {
-    const {title, subtitle, description, className, children, ...restProps} = props;
+    const { title, subtitle, description, className, children, ...restProps } = props;
     return (
         <div {...restProps}
             className={classNames('mx_Autocomplete_Completion_pill', className)}
diff --git a/src/autocomplete/DuckDuckGoProvider.tsx b/src/autocomplete/DuckDuckGoProvider.tsx
index 3ef9cc2f6f..08750493d3 100644
--- a/src/autocomplete/DuckDuckGoProvider.tsx
+++ b/src/autocomplete/DuckDuckGoProvider.tsx
@@ -20,8 +20,8 @@ import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 
-import {TextualCompletion} from './Components';
-import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { TextualCompletion } from './Components';
+import { ICompletion, ISelectionRange } from "./Autocompleter";
 
 const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERRER = 'vector';
@@ -42,7 +42,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         force = false,
         limit = -1,
     ): Promise<ICompletion[]> {
-        const {command, range} = this.getCurrentCommand(query, selection);
+        const { command, range } = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];
         }
diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx
index b7c4a5120a..2fc77e9a17 100644
--- a/src/autocomplete/EmojiProvider.tsx
+++ b/src/autocomplete/EmojiProvider.tsx
@@ -21,9 +21,9 @@ import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import QueryMatcher from './QueryMatcher';
-import {PillCompletion} from './Components';
-import {ICompletion, ISelectionRange} from './Autocompleter';
-import {uniq, sortBy} from 'lodash';
+import { PillCompletion } from './Components';
+import { ICompletion, ISelectionRange } from './Autocompleter';
+import { uniq, sortBy } from 'lodash';
 import SettingsStore from "../settings/SettingsStore";
 import { shortcodeToUnicode } from '../HtmlUtils';
 import { EMOJI, IEmoji } from '../emoji';
@@ -95,7 +95,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         }
 
         let completions = [];
-        const {command, range} = this.getCurrentCommand(query, selection);
+        const { command, range } = this.getCurrentCommand(query, selection);
         if (command) {
             const matchedString = command[0];
             completions = this.matcher.match(matchedString, limit);
@@ -121,7 +121,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             sorters.push((c) => c._orderBy);
             completions = sortBy(uniq(completions), sorters);
 
-            completions = completions.map(({shortname}) => {
+            completions = completions.map(({ shortname }) => {
                 const unicode = shortcodeToUnicode(shortname);
                 return {
                     completion: unicode,
diff --git a/src/autocomplete/NotifProvider.tsx b/src/autocomplete/NotifProvider.tsx
index 827f4aa885..1d42915ec9 100644
--- a/src/autocomplete/NotifProvider.tsx
+++ b/src/autocomplete/NotifProvider.tsx
@@ -19,10 +19,10 @@ import { Room } from "matrix-js-sdk/src/models/room";
 
 import AutocompleteProvider from './AutocompleteProvider';
 import { _t } from '../languageHandler';
-import {MatrixClientPeg} from '../MatrixClientPeg';
-import {PillCompletion} from './Components';
+import { MatrixClientPeg } from '../MatrixClientPeg';
+import { PillCompletion } from './Components';
 import * as sdk from '../index';
-import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { ICompletion, ISelectionRange } from "./Autocompleter";
 
 const AT_ROOM_REGEX = /@\S*/g;
 
@@ -46,7 +46,7 @@ export default class NotifProvider extends AutocompleteProvider {
 
         if (!this.room.currentState.mayTriggerNotifOfType('room', client.credentials.userId)) return [];
 
-        const {command, range} = this.getCurrentCommand(query, selection, force);
+        const { command, range } = this.getCurrentCommand(query, selection, force);
         if (command && command[0] && '@room'.startsWith(command[0]) && command[0].length > 1) {
             return [{
                 completion: '@room',
diff --git a/src/autocomplete/QueryMatcher.ts b/src/autocomplete/QueryMatcher.ts
index 73bb37ff0f..3948be301c 100644
--- a/src/autocomplete/QueryMatcher.ts
+++ b/src/autocomplete/QueryMatcher.ts
@@ -16,8 +16,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {at, uniq} from 'lodash';
-import {removeHiddenChars} from "matrix-js-sdk/src/utils";
+import { at, uniq } from 'lodash';
+import { removeHiddenChars } from "matrix-js-sdk/src/utils";
 
 interface IOptions<T extends {}> {
     keys: Array<string | keyof T>;
@@ -112,7 +112,7 @@ export default class QueryMatcher<T extends Object> {
             const index = resultKey.indexOf(query);
             if (index !== -1) {
                 matches.push(
-                    ...candidates.map((candidate) => ({index, ...candidate})),
+                    ...candidates.map((candidate) => ({ index, ...candidate })),
                 );
             }
         }
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index 5240db6955..7865a76daa 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -73,7 +73,7 @@ export default class RoomProvider extends AutocompleteProvider {
         limit = -1,
     ): Promise<ICompletion[]> {
         let completions = [];
-        const {command, range} = this.getCurrentCommand(query, selection, force);
+        const { command, range } = this.getCurrentCommand(query, selection, force);
         if (command) {
             // the only reason we need to do this is because Fuse only matches on properties
             let matcherObjects = this.getRooms().reduce((aliases, room) => {
diff --git a/src/autocomplete/SpaceProvider.tsx b/src/autocomplete/SpaceProvider.tsx
index 0361a2c91e..1c99aee5ac 100644
--- a/src/autocomplete/SpaceProvider.tsx
+++ b/src/autocomplete/SpaceProvider.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 
 import { _t } from '../languageHandler';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import RoomProvider from "./RoomProvider";
 
 export default class SpaceProvider extends RoomProvider {
diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx
index 687b477133..470e018e22 100644
--- a/src/autocomplete/UserProvider.tsx
+++ b/src/autocomplete/UserProvider.tsx
@@ -114,7 +114,7 @@ export default class UserProvider extends AutocompleteProvider {
         if (!this.users) this._makeUsers();
 
         let completions = [];
-        const {command, range} = this.getCurrentCommand(rawQuery, selection, force);
+        const { command, range } = this.getCurrentCommand(rawQuery, selection, force);
 
         if (!command) return completions;
 
@@ -158,7 +158,7 @@ export default class UserProvider extends AutocompleteProvider {
         }
 
         const currentUserId = MatrixClientPeg.get().credentials.userId;
-        this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
+        this.users = this.room.getJoinedMembers().filter(({ userId }) => userId !== currentUserId);
         this.users = this.users.concat(this.room.getMembersWithMembership("invite"));
 
         this.users = sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index 9d8665c176..407dc6f04c 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -16,13 +16,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {CSSProperties, RefObject, useRef, useState} from "react";
+import React, { CSSProperties, RefObject, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 
-import {Key} from "../../Keyboard";
-import {Writeable} from "../../@types/common";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { Key } from "../../Keyboard";
+import { Writeable } from "../../@types/common";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
@@ -371,7 +371,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
         return (
             <div
                 className={classNames("mx_ContextualMenu_wrapper", this.props.wrapperClassName)}
-                style={{...position, ...wrapperStyle}}
+                style={{ ...position, ...wrapperStyle }}
                 onKeyDown={this.onKeyDown}
                 onContextMenu={this.onContextMenuPreventBubbling}
             >
@@ -399,7 +399,7 @@ export const toRightOf = (elementRect: Pick<DOMRect, "right" | "top" | "height">
     const left = elementRect.right + window.pageXOffset + 3;
     let top = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
     top -= chevronOffset + 8; // where 8 is half the height of the chevron
-    return {left, top, chevronOffset};
+    return { left, top, chevronOffset };
 };
 
 // Placement method for <ContextMenu /> to position context menu right-aligned and flowing to the left of elementRect,
@@ -498,15 +498,15 @@ export function createMenu(ElementClass, props) {
 
     ReactDOM.render(menu, getOrCreateContainer());
 
-    return {close: onFinished};
+    return { close: onFinished };
 }
 
 // re-export the semantic helper components for simplicity
-export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton";
-export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton";
-export {MenuGroup} from "../../accessibility/context_menu/MenuGroup";
-export {MenuItem} from "../../accessibility/context_menu/MenuItem";
-export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox";
-export {MenuItemRadio} from "../../accessibility/context_menu/MenuItemRadio";
-export {StyledMenuItemCheckbox} from "../../accessibility/context_menu/StyledMenuItemCheckbox";
-export {StyledMenuItemRadio} from "../../accessibility/context_menu/StyledMenuItemRadio";
+export { ContextMenuButton } from "../../accessibility/context_menu/ContextMenuButton";
+export { ContextMenuTooltipButton } from "../../accessibility/context_menu/ContextMenuTooltipButton";
+export { MenuGroup } from "../../accessibility/context_menu/MenuGroup";
+export { MenuItem } from "../../accessibility/context_menu/MenuItem";
+export { MenuItemCheckbox } from "../../accessibility/context_menu/MenuItemCheckbox";
+export { MenuItemRadio } from "../../accessibility/context_menu/MenuItemRadio";
+export { StyledMenuItemCheckbox } from "../../accessibility/context_menu/StyledMenuItemCheckbox";
+export { StyledMenuItemRadio } from "../../accessibility/context_menu/StyledMenuItemRadio";
diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js
index 73359f17a5..037d7c251c 100644
--- a/src/components/structures/CustomRoomTagPanel.js
+++ b/src/components/structures/CustomRoomTagPanel.js
@@ -21,7 +21,7 @@ import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import * as FormattingUtils from '../../utils/FormattingUtils';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.CustomRoomTagPanel")
 class CustomRoomTagPanel extends React.Component {
@@ -34,7 +34,7 @@ class CustomRoomTagPanel extends React.Component {
 
     componentDidMount() {
         this._tagStoreToken = CustomRoomTagStore.addListener(() => {
-            this.setState({tags: CustomRoomTagStore.getSortedTags()});
+            this.setState({ tags: CustomRoomTagStore.getSortedTags() });
         });
     }
 
@@ -64,7 +64,7 @@ class CustomRoomTagPanel extends React.Component {
 
 class CustomRoomTagTile extends React.Component {
     onClick = () => {
-        dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
+        dis.dispatch({ action: 'select_custom_room_tag', tag: this.props.tag.name });
     };
 
     render() {
diff --git a/src/components/structures/EmbeddedPage.js b/src/components/structures/EmbeddedPage.js
index c37ab3df48..628c16f322 100644
--- a/src/components/structures/EmbeddedPage.js
+++ b/src/components/structures/EmbeddedPage.js
@@ -22,7 +22,7 @@ import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
 import dis from '../../dispatcher/dispatcher';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import classnames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
diff --git a/src/components/structures/GenericErrorPage.js b/src/components/structures/GenericErrorPage.js
index cfd2016d47..c9ed4ae622 100644
--- a/src/components/structures/GenericErrorPage.js
+++ b/src/components/structures/GenericErrorPage.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.GenericErrorPage")
 export default class GenericErrorPage extends React.PureComponent {
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index f1c28d588a..5d1be64f25 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -29,7 +29,7 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.GroupFilterPanel")
 class GroupFilterPanel extends React.Component {
@@ -85,12 +85,12 @@ class GroupFilterPanel extends React.Component {
     onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
-            dis.dispatch({action: 'deselect_tags'});
+            dis.dispatch({ action: 'deselect_tags' });
         }
     };
 
     onClearFilterClick = ev => {
-        dis.dispatch({action: 'deselect_tags'});
+        dis.dispatch({ action: 'deselect_tags' });
     };
 
     renderGlobalIcon() {
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 3a2c611cc9..ac798386a9 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import { getHostingLink } from '../../utils/HostingLink';
@@ -34,13 +34,13 @@ import classnames from 'classnames';
 import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
-import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Permalinks";
-import {Group} from "matrix-js-sdk/src/models/group";
-import {sleep} from "../../utils/promise";
+import { makeGroupPermalink, makeUserPermalink } from "../../utils/permalinks/Permalinks";
+import { Group } from "matrix-js-sdk/src/models/group";
+import { sleep } from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
 import AutoHideScrollbar from "./AutoHideScrollbar";
-import {mediaFromMxc} from "../../customisations/Media";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../customisations/Media";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 const LONG_DESC_PLACEHOLDER = _td(
     `<h1>HTML for your community's page</h1>
@@ -115,7 +115,7 @@ class CategoryRoomList extends React.Component {
                         {
                             title: _t(
                                 "Failed to add the following rooms to the summary of %(groupId)s:",
-                                {groupId: this.props.groupId},
+                                { groupId: this.props.groupId },
                             ),
                             description: errorList.join(", "),
                         },
@@ -195,9 +195,9 @@ class FeaturedRoom extends React.Component {
                 {
                     title: _t(
                         "Failed to remove the room from the summary of %(groupId)s",
-                        {groupId: this.props.groupId},
+                        { groupId: this.props.groupId },
                     ),
-                    description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
+                    description: _t("The room '%(roomName)s' could not be removed from the summary.", { roomName }),
                 },
             );
         });
@@ -289,7 +289,7 @@ class RoleUserList extends React.Component {
                         {
                             title: _t(
                                 "Failed to add the following users to the summary of %(groupId)s:",
-                                {groupId: this.props.groupId},
+                                { groupId: this.props.groupId },
                             ),
                             description: errorList.join(", "),
                         },
@@ -361,9 +361,9 @@ class FeaturedUser extends React.Component {
                 {
                     title: _t(
                         "Failed to remove a user from the summary of %(groupId)s",
-                        {groupId: this.props.groupId},
+                        { groupId: this.props.groupId },
                     ),
-                    description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
+                    description: _t("The user '%(displayName)s' could not be removed from the summary.", { displayName }),
                 },
             );
         });
@@ -470,7 +470,7 @@ export default class GroupView extends React.Component {
             // Leave settings - the user might have clicked the "Leave" button
             this._closeSettings();
         }
-        this.setState({membershipBusy: false});
+        this.setState({ membershipBusy: false });
     };
 
     _initGroupStore(groupId, firstInit) {
@@ -491,7 +491,7 @@ export default class GroupView extends React.Component {
                         group_id: groupId,
                     },
                 });
-                dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${groupId}`}});
+                dis.dispatch({ action: 'require_registration', screen_after: { screen: `group/${groupId}` } });
                 willDoOnboarding = true;
             }
             if (stateKey === GroupStore.STATE_KEY.Summary) {
@@ -592,7 +592,7 @@ export default class GroupView extends React.Component {
     };
 
     _closeSettings = () => {
-        dis.dispatch({action: 'close_settings'});
+        dis.dispatch({ action: 'close_settings' });
     };
 
     _onNameChange = (value) => {
@@ -620,7 +620,7 @@ export default class GroupView extends React.Component {
         const file = ev.target.files[0];
         if (!file) return;
 
-        this.setState({uploadingAvatar: true});
+        this.setState({ uploadingAvatar: true });
         this._matrixClient.uploadContent(file).then((url) => {
             const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: url });
             this.setState({
@@ -632,7 +632,7 @@ export default class GroupView extends React.Component {
                 avatarChanged: true,
             });
         }).catch((e) => {
-            this.setState({uploadingAvatar: false});
+            this.setState({ uploadingAvatar: false });
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to upload avatar image", e);
             Modal.createTrackedDialog('Failed to upload image', '', ErrorDialog, {
@@ -649,7 +649,7 @@ export default class GroupView extends React.Component {
     };
 
     _onSaveClick = () => {
-        this.setState({saving: true});
+        this.setState({ saving: true });
         const savePromise = this.state.isUserPrivileged ? this._saveGroup() : Promise.resolve();
         savePromise.then((result) => {
             this.setState({
@@ -688,7 +688,7 @@ export default class GroupView extends React.Component {
     }
 
     _onAcceptInviteClick = async () => {
-        this.setState({membershipBusy: true});
+        this.setState({ membershipBusy: true });
 
         // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
         // spinner disappearing after we have fetched new group data.
@@ -697,7 +697,7 @@ export default class GroupView extends React.Component {
         GroupStore.acceptGroupInvite(this.props.groupId).then(() => {
             // don't reset membershipBusy here: wait for the membership change to come down the sync
         }).catch((e) => {
-            this.setState({membershipBusy: false});
+            this.setState({ membershipBusy: false });
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Error accepting invite', '', ErrorDialog, {
                 title: _t("Error"),
@@ -707,7 +707,7 @@ export default class GroupView extends React.Component {
     };
 
     _onRejectInviteClick = async () => {
-        this.setState({membershipBusy: true});
+        this.setState({ membershipBusy: true });
 
         // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
         // spinner disappearing after we have fetched new group data.
@@ -716,7 +716,7 @@ export default class GroupView extends React.Component {
         GroupStore.leaveGroup(this.props.groupId).then(() => {
             // don't reset membershipBusy here: wait for the membership change to come down the sync
         }).catch((e) => {
-            this.setState({membershipBusy: false});
+            this.setState({ membershipBusy: false });
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Error rejecting invite', '', ErrorDialog, {
                 title: _t("Error"),
@@ -727,11 +727,11 @@ export default class GroupView extends React.Component {
 
     _onJoinClick = async () => {
         if (this._matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
+            dis.dispatch({ action: 'require_registration', screen_after: { screen: `group/${this.props.groupId}` } });
             return;
         }
 
-        this.setState({membershipBusy: true});
+        this.setState({ membershipBusy: true });
 
         // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
         // spinner disappearing after we have fetched new group data.
@@ -740,7 +740,7 @@ export default class GroupView extends React.Component {
         GroupStore.joinGroup(this.props.groupId).then(() => {
             // don't reset membershipBusy here: wait for the membership change to come down the sync
         }).catch((e) => {
-            this.setState({membershipBusy: false});
+            this.setState({ membershipBusy: false });
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Error joining room', '', ErrorDialog, {
                 title: _t("Error"),
@@ -773,7 +773,7 @@ export default class GroupView extends React.Component {
             title: _t("Leave Community"),
             description: (
                 <span>
-                    { _t("Leave %(groupName)s?", {groupName: this.props.groupId}) }
+                    { _t("Leave %(groupName)s?", { groupName: this.props.groupId }) }
                     { warnings }
                 </span>
             ),
@@ -782,7 +782,7 @@ export default class GroupView extends React.Component {
             onFinished: async (confirmed) => {
                 if (!confirmed) return;
 
-                this.setState({membershipBusy: true});
+                this.setState({ membershipBusy: true });
 
                 // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
                 // spinner disappearing after we have fetched new group data.
@@ -791,7 +791,7 @@ export default class GroupView extends React.Component {
                 GroupStore.leaveGroup(this.props.groupId).then(() => {
                     // don't reset membershipBusy here: wait for the membership change to come down the sync
                 }).catch((e) => {
-                    this.setState({membershipBusy: false});
+                    this.setState({ membershipBusy: false });
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createTrackedDialog('Error leaving community', '', ErrorDialog, {
                         title: _t("Error"),
@@ -1336,7 +1336,7 @@ export default class GroupView extends React.Component {
             if (this.state.error.httpStatus === 404) {
                 return (
                     <div className="mx_GroupView_error">
-                        { _t('Community %(groupId)s not found', {groupId: this.props.groupId}) }
+                        { _t('Community %(groupId)s not found', { groupId: this.props.groupId }) }
                     </div>
                 );
             } else {
@@ -1346,7 +1346,7 @@ export default class GroupView extends React.Component {
                 }
                 return (
                     <div className="mx_GroupView_error">
-                        { _t('Failed to load %(groupId)s', {groupId: this.props.groupId }) }
+                        { _t('Failed to load %(groupId)s', { groupId: this.props.groupId }) }
                         { extraText }
                     </div>
                 );
diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index 68bb4322e6..046e07f455 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -15,29 +15,29 @@ limitations under the License.
 */
 
 import * as React from "react";
-import {useContext, useState} from "react";
+import { useContext, useState } from "react";
 
 import AutoHideScrollbar from './AutoHideScrollbar';
-import {getHomePageUrl} from "../../utils/pages";
-import {_t} from "../../languageHandler";
+import { getHomePageUrl } from "../../utils/pages";
+import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import * as sdk from "../../index";
 import dis from "../../dispatcher/dispatcher";
-import {Action} from "../../dispatcher/actions";
+import { Action } from "../../dispatcher/actions";
 import BaseAvatar from "../views/avatars/BaseAvatar";
-import {OwnProfileStore} from "../../stores/OwnProfileStore";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import AccessibleButton from "../views/elements/AccessibleButton";
-import {UPDATE_EVENT} from "../../stores/AsyncStore";
-import {useEventEmitter} from "../../hooks/useEventEmitter";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import { useEventEmitter } from "../../hooks/useEventEmitter";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import MiniAvatarUploader, {AVATAR_SIZE} from "../views/elements/MiniAvatarUploader";
+import MiniAvatarUploader, { AVATAR_SIZE } from "../views/elements/MiniAvatarUploader";
 import Analytics from "../../Analytics";
 import CountlyAnalytics from "../../CountlyAnalytics";
 
 const onClickSendDm = () => {
     Analytics.trackEvent('home_page', 'button', 'dm');
     CountlyAnalytics.instance.track("home_page_button", { button: "dm" });
-    dis.dispatch({action: 'view_create_chat'});
+    dis.dispatch({ action: 'view_create_chat' });
 };
 
 const onClickExplore = () => {
@@ -49,7 +49,7 @@ const onClickExplore = () => {
 const onClickNewRoom = () => {
     Analytics.trackEvent('home_page', 'button', 'create_room');
     CountlyAnalytics.instance.track("home_page_button", { button: "create_room" });
-    dis.dispatch({action: 'view_create_room'});
+    dis.dispatch({ action: 'view_create_room' });
 };
 
 interface IProps {
@@ -117,7 +117,6 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         </React.Fragment>;
     }
 
-
     return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
         <div className="mx_HomePage_default_wrapper">
             { introSection }
diff --git a/src/components/structures/HostSignupAction.tsx b/src/components/structures/HostSignupAction.tsx
index 46e158d6c8..41dc8a6da8 100644
--- a/src/components/structures/HostSignupAction.tsx
+++ b/src/components/structures/HostSignupAction.tsx
@@ -22,7 +22,7 @@ import {
 import { _t } from "../../languageHandler";
 import { HostSignupStore } from "../../stores/HostSignupStore";
 import SdkConfig from "../../SdkConfig";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 interface IProps {
     onClick?(): void;
@@ -35,7 +35,7 @@ export default class HostSignupAction extends React.PureComponent<IProps, IState
     private openDialog = async () => {
         this.props.onClick?.();
         await HostSignupStore.instance.setHostSignupActive(true);
-    }
+    };
 
     public render(): React.ReactNode {
         const hostSignupConfig = SdkConfig.get().hostSignup;
diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index 25dcaeed39..3e1940955b 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import AutoHideScrollbar from "./AutoHideScrollbar";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.IndicatorScrollbar")
 export default class IndicatorScrollbar extends React.Component {
@@ -70,7 +70,6 @@ export default class IndicatorScrollbar extends React.Component {
         this._autoHideScrollbar = autoHideScrollbar;
     }
 
-
     componentDidUpdate(prevProps) {
         const prevLen = prevProps && prevProps.children && prevProps.children.length || 0;
         const curLen = this.props.children && this.props.children.length || 0;
@@ -188,8 +187,8 @@ export default class IndicatorScrollbar extends React.Component {
         // eslint-disable-next-line no-unused-vars
         const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
 
-        const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
-        const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
+        const leftIndicatorStyle = { left: this.state.leftIndicatorOffset };
+        const rightIndicatorStyle = { right: this.state.rightIndicatorOffset };
         const leftOverflowIndicator = trackHorizontalOverflow
             ? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
         const rightOverflowIndicator = trackHorizontalOverflow
diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js
index d419c9de6e..9ff830f66a 100644
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {InteractiveAuth} from "matrix-js-sdk/src/interactive-auth";
-import React, {createRef} from 'react';
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
 
 import * as sdk from '../../index';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
 
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index dec4e4c13e..3d5e386b00 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -40,9 +40,9 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../customisations/Media";
-import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../customisations/Media";
+import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
 
@@ -91,7 +91,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         this.bgImageWatcherRef = SettingsStore.watchSetting(
             "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
-            this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
+            this.setState({ showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel") });
         });
     }
 
@@ -127,7 +127,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     private onDialPad = () => {
         dis.fire(Action.OpenDialPad);
-    }
+    };
 
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
@@ -136,12 +136,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private refreshStickyHeaders = () => {
         if (!this.listContainerRef.current) return; // ignore: no headers to sticky
         this.handleStickyHeaders(this.listContainerRef.current);
-    }
+    };
 
     private onBreadcrumbsUpdate = () => {
         const newVal = BreadcrumbsStore.instance.visible;
         if (newVal !== this.state.showBreadcrumbs) {
-            this.setState({showBreadcrumbs: newVal});
+            this.setState({ showBreadcrumbs: newVal });
 
             // Update the sticky headers too as the breadcrumbs will be popping in or out.
             if (!this.listContainerRef.current) return; // ignore: no headers to sticky
diff --git a/src/components/structures/LeftPanelWidget.tsx b/src/components/structures/LeftPanelWidget.tsx
index 16142069c4..e0b597b883 100644
--- a/src/components/structures/LeftPanelWidget.tsx
+++ b/src/components/structures/LeftPanelWidget.tsx
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useMemo} from "react";
-import {Resizable} from "re-resizable";
+import React, { useContext, useMemo } from "react";
+import { Resizable } from "re-resizable";
 import classNames from "classnames";
 
 import AccessibleButton from "../views/elements/AccessibleButton";
-import {useRovingTabIndex} from "../../accessibility/RovingTabIndex";
-import {Key} from "../../Keyboard";
-import {useLocalStorageState} from "../../hooks/useLocalStorageState";
+import { useRovingTabIndex } from "../../accessibility/RovingTabIndex";
+import { Key } from "../../Keyboard";
+import { useLocalStorageState } from "../../hooks/useLocalStorageState";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import WidgetUtils, {IWidgetEvent} from "../../utils/WidgetUtils";
-import {useAccountData} from "../../hooks/useAccountData";
+import WidgetUtils, { IWidgetEvent } from "../../utils/WidgetUtils";
+import { useAccountData } from "../../hooks/useAccountData";
 import AppTile from "../views/elements/AppTile";
-import {useSettingValue} from "../../hooks/useSettings";
+import { useSettingValue } from "../../hooks/useSettings";
 import UIStore from "../../stores/UIStore";
 
 const MIN_HEIGHT = 100;
@@ -62,14 +62,14 @@ const LeftPanelWidget: React.FC = () => {
     let content;
     if (expanded) {
         content = <Resizable
-            size={{height} as any}
+            size={{ height } as any}
             minHeight={MIN_HEIGHT}
             maxHeight={Math.min(UIStore.instance.windowHeight / 2, MAX_HEIGHT)}
             onResizeStop={(e, dir, ref, d) => {
                 setHeight(height + d.height);
             }}
             handleWrapperClass="mx_LeftPanelWidget_resizerHandles"
-            handleClasses={{top: "mx_LeftPanelWidget_resizerHandle"}}
+            handleClasses={{ top: "mx_LeftPanelWidget_resizerHandle" }}
             className="mx_LeftPanelWidget_resizeBox"
             enable={{ top: true }}
         >
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 5ad67232a4..26bb0fe24a 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -20,7 +20,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 
-import {Key} from '../../Keyboard';
+import { Key } from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import MediaDeviceHandler from '../../MediaDeviceHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
@@ -30,7 +30,7 @@ import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
 import ResizeHandle from '../views/elements/ResizeHandle';
-import {Resizer, CollapseDistributor} from '../../resizer';
+import { Resizer, CollapseDistributor } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
@@ -55,7 +55,7 @@ import HostSignupContainer from '../views/host_signup/HostSignupContainer';
 import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import CallHandler, { CallHandlerEvent } from '../../CallHandler';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
@@ -232,10 +232,10 @@ class LoggedInView extends React.Component<IProps, IState> {
             onCollapsed: (_collapsed) => {
                 collapsed = _collapsed;
                 if (_collapsed) {
-                    dis.dispatch({action: "hide_left_panel"});
+                    dis.dispatch({ action: "hide_left_panel" });
                     window.localStorage.setItem("mx_lhs_size", '0');
                 } else {
-                    dis.dispatch({action: "show_left_panel"});
+                    dis.dispatch({ action: "show_left_panel" });
                 }
             },
             onResized: (_size) => {
@@ -272,7 +272,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     onAccountData = (event) => {
         if (event.getType() === "m.ignored_user_list") {
-            dis.dispatch({action: "ignore_state_changed"});
+            dis.dispatch({ action: "ignore_state_changed" });
         }
     };
 
@@ -319,7 +319,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.setState({
             usageLimitDismissed: true,
         });
-    }
+    };
 
     _calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
         const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js
index 5818d303fc..69d3bd0b51 100644
--- a/src/components/structures/MainSplit.js
+++ b/src/components/structures/MainSplit.js
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import { Resizable } from 're-resizable';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.MainSplit")
 export default class MainSplit extends React.Component {
@@ -73,7 +73,7 @@ export default class MainSplit extends React.Component {
                 onResize={this._onResize}
                 onResizeStop={this._onResizeStop}
                 className="mx_RightPanel_ResizeWrapper"
-                handleClasses={{left: "mx_RightPanel_ResizeHandle"}}
+                handleClasses={{ left: "mx_RightPanel_ResizeHandle" }}
             >
                 { panelView }
             </Resizable>;
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 7986da203d..e683432127 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -44,8 +44,8 @@ import * as Lifecycle from '../../Lifecycle';
 import '../../stores/LifecycleStore';
 import PageTypes from '../../PageTypes';
 
-import createRoom, {IOpts} from "../../createRoom";
-import {_t, _td, getCurrentLanguage} from '../../languageHandler';
+import createRoom, { IOpts } from "../../createRoom";
+import { _t, _td, getCurrentLanguage } from '../../languageHandler';
 import SettingsStore from "../../settings/SettingsStore";
 import ThemeController from "../../settings/controllers/ThemeController";
 import { startAnyRegistrationFlow } from "../../Registration";
@@ -66,7 +66,7 @@ import {
     showToast as showAnalyticsToast,
     hideToast as hideAnalyticsToast,
 } from "../../toasts/AnalyticsToast";
-import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
+import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
@@ -74,15 +74,15 @@ import { SettingLevel } from "../../settings/SettingLevel";
 import { leaveRoomBehaviour } from "../../utils/membership";
 import CreateCommunityPrototypeDialog from "../views/dialogs/CreateCommunityPrototypeDialog";
 import ThreepidInviteStore, { IThreepidInvite, IThreepidInviteWireFormat } from "../../stores/ThreepidInviteStore";
-import {UIFeature} from "../../settings/UIFeature";
+import { UIFeature } from "../../settings/UIFeature";
 import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
 import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
 import { shouldUseLoginForWelcome } from "../../utils/pages";
 import SpaceStore from "../../stores/SpaceStore";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import RoomListStore from "../../stores/room-list/RoomListStore";
-import {RoomUpdateCause} from "../../stores/room-list/models";
+import { RoomUpdateCause } from "../../stores/room-list/models";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import SecurityCustomisations from "../../customisations/Security";
 
@@ -401,7 +401,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
                 this.onLoggedIn();
             } else {
-                this.setStateForNewView({view: Views.COMPLETE_SECURITY});
+                this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
             }
         } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
             this.setStateForNewView({ view: Views.E2E_SETUP });
@@ -454,7 +454,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         let props = this.state.serverConfig;
         if (!props) props = this.props.serverConfig; // for unit tests
         if (!props) props = SdkConfig.get()["validated_server_config"];
-        return {serverConfig: props};
+        return { serverConfig: props };
     }
 
     private loadSession() {
@@ -472,9 +472,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             if (!loadedSession) {
                 // fall back to showing the welcome screen... unless we have a 3pid invite pending
                 if (ThreepidInviteStore.instance.pickBestInvite()) {
-                    dis.dispatch({action: 'start_registration'});
+                    dis.dispatch({ action: 'start_registration' });
                 } else {
-                    dis.dispatch({action: "view_welcome_page"});
+                    dis.dispatch({ action: "view_welcome_page" });
                 }
             } else if (SettingsStore.getValue("analyticsOptIn")) {
                 CountlyAnalytics.instance.enable(/* anonymous = */ false);
@@ -538,7 +538,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 action: 'do_after_sync_prepared',
                 deferred_action: payload,
             });
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
             return;
         }
 
@@ -563,11 +563,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     }
 
                     // redispatch the change with a more specific action
-                    dis.dispatch({action: 'id_server_changed'});
+                    dis.dispatch({ action: 'id_server_changed' });
                 }
                 break;
             case 'logout':
-                dis.dispatch({action: "hangup_all"});
+                dis.dispatch({ action: "hangup_all" });
                 Lifecycle.logout();
                 break;
             case 'require_registration':
@@ -624,7 +624,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                             MatrixClientPeg.get().leave(payload.room_id).then(() => {
                                 modal.close();
                                 if (this.state.currentRoomId === payload.room_id) {
-                                    dis.dispatch({action: 'view_home_page'});
+                                    dis.dispatch({ action: 'view_home_page' });
                                 }
                             }, (err) => {
                                 modal.close();
@@ -657,7 +657,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 const tabPayload = payload as OpenToTabPayload;
                 const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
                 Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
-                    {initialTabId: tabPayload.initialTabId},
+                    { initialTabId: tabPayload.initialTabId },
                     /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
 
                 // View the welcome or home page if we need something to look at
@@ -668,7 +668,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.createRoom(payload.public, payload.defaultName);
                 break;
             case 'view_create_group': {
-                let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
+                let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
                 if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
                     CreateGroupDialog = CreateCommunityPrototypeDialog;
                 }
@@ -727,9 +727,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // We just dispatch the page change rather than have to worry about
                 // what the logic is for each of these branches.
                 if (this.state.page_type === PageTypes.MyGroups) {
-                    dis.dispatch({action: 'view_last_screen'});
+                    dis.dispatch({ action: 'view_last_screen' });
                 } else {
-                    dis.dispatch({action: 'view_my_groups'});
+                    dis.dispatch({ action: 'view_my_groups' });
                 }
                 break;
             case 'hide_left_panel':
@@ -770,7 +770,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.onLoggedOut();
                 break;
             case 'will_start_client':
-                this.setState({ready: false}, () => {
+                this.setState({ ready: false }, () => {
                     // if the client is about to start, we are, by definition, not ready.
                     // Set ready to false now, then it'll be set to true when the sync
                     // listener we set below fires.
@@ -1006,7 +1006,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 return;
             }
             this.notifyNewScreen('user/' + userId);
-            this.setState({currentUserId: userId});
+            this.setState({ currentUserId: userId });
             this.setPage(PageTypes.UserView);
         });
     }
@@ -1131,8 +1131,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             description: (
                 <span>
                     { isSpace
-                        ? _t("Are you sure you want to leave the space '%(spaceName)s'?", {spaceName: roomToLeave.name})
-                        : _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
+                        ? _t("Are you sure you want to leave the space '%(spaceName)s'?", { spaceName: roomToLeave.name })
+                        : _t("Are you sure you want to leave the room '%(roomName)s'?", { roomName: roomToLeave.name }) }
                     { warnings }
                 </span>
             ),
@@ -1170,7 +1170,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }).catch((err) => {
             const errCode = err.errcode || _td("unknown error code");
             Modal.createTrackedDialog("Failed to forget room", '', ErrorDialog, {
-                title: _t("Failed to forget room %(errCode)s", {errCode}),
+                title: _t("Failed to forget room %(errCode)s", { errCode }),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         });
@@ -1254,7 +1254,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 if (welcomeUserRoom === null) {
                     // We didn't redirect to the welcome user room, so show
                     // the homepage.
-                    dis.dispatch({action: 'view_home_page', justRegistered: true});
+                    dis.dispatch({ action: 'view_home_page', justRegistered: true });
                 }
             } else if (ThreepidInviteStore.instance.pickBestInvite()) {
                 // The user has a 3pid invite pending - show them that
@@ -1263,11 +1263,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // HACK: This is a pretty brutal way of threading the invite back through
                 // our systems, but it's the safest we have for now.
                 const params = ThreepidInviteStore.instance.translateToWireFormat(threepidInvite);
-                this.showScreen(`room/${threepidInvite.roomId}`, params)
+                this.showScreen(`room/${threepidInvite.roomId}`, params);
             } else {
                 // The user has just logged in after registering,
                 // so show the homepage.
-                dis.dispatch({action: 'view_home_page', justRegistered: true});
+                dis.dispatch({ action: 'view_home_page', justRegistered: true });
             }
         } else {
             this.showScreenAfterLogin();
@@ -1303,9 +1303,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             this.viewLastRoom();
         } else {
             if (MatrixClientPeg.get().isGuest()) {
-                dis.dispatch({action: 'view_welcome_page'});
+                dis.dispatch({ action: 'view_welcome_page' });
             } else {
-                dis.dispatch({action: 'view_home_page'});
+                dis.dispatch({ action: 'view_home_page' });
             }
         }
     }
@@ -1385,15 +1385,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             // So dispatch directly from here. Ideally we'd use a SyncStateStore that
             // would do this dispatch and expose the sync state itself (by listening to
             // its own dispatch).
-            dis.dispatch({action: 'sync_state', prevState, state});
+            dis.dispatch({ action: 'sync_state', prevState, state });
 
             if (state === "ERROR" || state === "RECONNECTING") {
                 if (data.error instanceof InvalidStoreError) {
                     Lifecycle.handleInvalidStoreError(data.error);
                 }
-                this.setState({syncError: data.error || true});
+                this.setState({ syncError: data.error || true });
             } else if (this.state.syncError) {
-                this.setState({syncError: null});
+                this.setState({ syncError: null });
             }
 
             this.updateStatusIndicator(state, prevState);
@@ -1567,7 +1567,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     key: 'verifreq_' + request.channel.transactionId,
                     title: _t("Verification requested"),
                     icon: "verification",
-                    props: {request},
+                    props: { request },
                     component: sdk.getComponent("toasts.VerificationRequestToast"),
                     priority: 90,
                 });
@@ -1668,7 +1668,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             // TODO if logged in, skip SSO
             let cli = MatrixClientPeg.get();
             if (!cli) {
-                const {hsUrl, isUrl} = this.props.serverConfig;
+                const { hsUrl, isUrl } = this.props.serverConfig;
                 cli = createClient({
                     baseUrl: hsUrl,
                     idBaseUrl: isUrl,
@@ -1792,7 +1792,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     onAliasClick(event: MouseEvent, alias: string) {
         event.preventDefault();
-        dis.dispatch({action: 'view_room', room_alias: alias});
+        dis.dispatch({ action: 'view_room', room_alias: alias });
     }
 
     onUserClick(event: MouseEvent, userId: string) {
@@ -1808,7 +1808,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
     onGroupClick(event: MouseEvent, groupId: string) {
         event.preventDefault();
-        dis.dispatch({action: 'view_group', group_id: groupId});
+        dis.dispatch({ action: 'view_group', group_id: groupId });
     }
 
     onLogoutClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
@@ -1870,14 +1870,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     onSendEvent(roomId: string, event: MatrixEvent) {
         const cli = MatrixClientPeg.get();
         if (!cli) {
-            dis.dispatch({action: 'message_send_failed'});
+            dis.dispatch({ action: 'message_send_failed' });
             return;
         }
 
         cli.sendEvent(roomId, event.getType(), event.getContent()).then(() => {
-            dis.dispatch({action: 'message_sent'});
+            dis.dispatch({ action: 'message_sent' });
         }, (err) => {
-            dis.dispatch({action: 'message_send_failed'});
+            dis.dispatch({ action: 'message_send_failed' });
         });
     }
 
@@ -1924,7 +1924,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     }
 
     onServerConfigChange = (serverConfig: ValidatedServerConfig) => {
-        this.setState({serverConfig});
+        this.setState({ serverConfig });
     };
 
     private makeRegistrationUrl = (params: {[key: string]: string}) => {
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 49855eb99c..62f67c8300 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -16,24 +16,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import shouldHideEvent from '../../shouldHideEvent';
-import {wantsDateSeparator} from '../../DateUtils';
+import { wantsDateSeparator } from '../../DateUtils';
 import * as sdk from '../../index';
 
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
 import RoomContext from "../../contexts/RoomContext";
-import {Layout, LayoutPropType} from "../../settings/Layout";
-import {_t} from "../../languageHandler";
-import {haveTileForEvent} from "../views/rooms/EventTile";
-import {hasText} from "../../TextForEvent";
+import { Layout, LayoutPropType } from "../../settings/Layout";
+import { _t } from "../../languageHandler";
+import { haveTileForEvent } from "../views/rooms/EventTile";
+import { hasText } from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
@@ -349,7 +349,7 @@ export default class MessagePanel extends React.Component {
     scrollToEventIfNeeded(eventId) {
         const node = this.eventNodes[eventId];
         if (node) {
-            node.scrollIntoView({block: "nearest", behavior: "instant"});
+            node.scrollIntoView({ block: "nearest", behavior: "instant" });
         }
     }
 
@@ -398,7 +398,7 @@ export default class MessagePanel extends React.Component {
             // confused.
             if (visible) {
                 hr = <hr className="mx_RoomView_myReadMarker"
-                    style={{opacity: 1, width: '99%'}}
+                    style={{ opacity: 1, width: '99%' }}
                 />;
             }
 
@@ -473,7 +473,7 @@ export default class MessagePanel extends React.Component {
         // not-chat purposes.
         const nextTile = arr.slice(i + 1).find(e => this._shouldShowEvent(e));
 
-        return {nextEvent, nextTile};
+        return { nextEvent, nextTile };
     }
 
     get _roomHasPendingEdit() {
@@ -531,7 +531,7 @@ export default class MessagePanel extends React.Component {
             const mxEv = this.props.events[i];
             const eventId = mxEv.getId();
             const last = (mxEv === lastShownEvent);
-            const {nextEvent, nextTile} = this._getNextEventInfo(this.props.events, i);
+            const { nextEvent, nextTile } = this._getNextEventInfo(this.props.events, i);
 
             if (grouper) {
                 if (grouper.shouldGroup(mxEv)) {
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index d0a2fbff41..39de845776 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -24,7 +24,7 @@ import dis from '../../dispatcher/dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import BetaCard from "../views/beta/BetaCard";
 
 @replaceableComponent("structures.MyGroups")
@@ -41,19 +41,19 @@ export default class MyGroups extends React.Component {
     }
 
     _onCreateGroupClick = () => {
-        dis.dispatch({action: 'view_create_group'});
+        dis.dispatch({ action: 'view_create_group' });
     };
 
     _fetch() {
         this.context.getJoinedGroups().then((result) => {
-            this.setState({groups: result.groups, error: null});
+            this.setState({ groups: result.groups, error: null });
         }, (err) => {
             if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
                 // Indicate that the guest isn't in any groups (which should be true)
-                this.setState({groups: [], error: null});
+                this.setState({ groups: [], error: null });
                 return;
             }
-            this.setState({groups: null, error: err});
+            this.setState({ groups: null, error: err });
         });
     }
 
diff --git a/src/components/structures/NonUrgentToastContainer.tsx b/src/components/structures/NonUrgentToastContainer.tsx
index 7c193ec9d7..b1424a2974 100644
--- a/src/components/structures/NonUrgentToastContainer.tsx
+++ b/src/components/structures/NonUrgentToastContainer.tsx
@@ -18,7 +18,7 @@ import * as React from "react";
 import { ComponentClass } from "../../@types/common";
 import NonUrgentToastStore from "../../stores/NonUrgentToastStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 interface IProps {
 }
@@ -44,7 +44,7 @@ export default class NonUrgentToastContainer extends React.PureComponent<IProps,
     }
 
     private onUpdateToasts = () => {
-        this.setState({toasts: NonUrgentToastStore.instance.components});
+        this.setState({ toasts: NonUrgentToastStore.instance.components });
     };
 
     public render() {
diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index 294865fe08..c608f0eee9 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -104,7 +104,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
         const userForPanel = this.getUserForPanel();
         if (this.props.groupId) {
             if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) {
-                dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList});
+                dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.GroupMemberList });
                 return RightPanelPhases.GroupMemberList;
             }
             return rps.groupPanelPhase;
diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 62944a9d98..1da3d5efc1 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -25,7 +25,7 @@ import { _t } from '../../languageHandler';
 import SdkConfig from '../../SdkConfig';
 import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
 import Analytics from '../../Analytics';
-import {ALL_ROOMS, IFieldType, IInstance, IProtocol, Protocols} from "../views/directory/NetworkDropdown";
+import { ALL_ROOMS, IFieldType, IInstance, IProtocol, Protocols } from "../views/directory/NetworkDropdown";
 import SettingsStore from "../../settings/SettingsStore";
 import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
 import GroupStore from "../../stores/GroupStore";
@@ -34,7 +34,7 @@ import CountlyAnalytics from "../../CountlyAnalytics";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../customisations/Media";
 import { IDialogProps } from "../views/dialogs/IDialogProps";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import BaseAvatar from "../views/avatars/BaseAvatar";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
@@ -45,7 +45,6 @@ import ScrollPanel from "./ScrollPanel";
 import Spinner from "../views/elements/Spinner";
 import { ActionPayload } from "../../dispatcher/payloads";
 
-
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 800;
 
@@ -95,7 +94,7 @@ interface IPublicRoomsRequest {
 @replaceableComponent("structures.RoomDirectory")
 export default class RoomDirectory extends React.Component<IProps, IState> {
     private readonly startTime: number;
-    private unmounted = false
+    private unmounted = false;
     private nextBatch: string = null;
     private filterTimeout: NodeJS.Timeout;
     private protocols: Protocols;
@@ -300,9 +299,9 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
 
         let desc;
         if (alias) {
-            desc = _t('Delete the room address %(alias)s and remove %(name)s from the directory?', {alias, name});
+            desc = _t('Delete the room address %(alias)s and remove %(name)s from the directory?', { alias, name });
         } else {
-            desc = _t('Remove %(name)s from the directory?', {name: name});
+            desc = _t('Remove %(name)s from the directory?', { name: name });
         }
 
         Modal.createTrackedDialog('Remove from Directory', '', QuestionDialog, {
@@ -312,7 +311,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 if (!shouldDelete) return;
 
                 const modal = Modal.createDialog(Spinner);
-                let step = _t('remove %(name)s from the directory.', {name: name});
+                let step = _t('remove %(name)s from the directory.', { name: name });
 
                 MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
                     if (!alias) return;
@@ -483,7 +482,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
             // to the directory.
             if (MatrixClientPeg.get().isGuest()) {
                 if (!room.world_readable && !room.guest_can_join) {
-                    dis.dispatch({action: 'require_registration'});
+                    dis.dispatch({ action: 'require_registration' });
                     return;
                 }
             }
@@ -782,11 +781,11 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         }
         const explanation =
             _t("If you can't find the room you're looking for, ask for an invite or <a>Create a new room</a>.", null,
-                {a: sub => (
+                { a: sub => (
                     <AccessibleButton kind="secondary" onClick={this.onCreateRoomClick}>
                         { sub }
                     </AccessibleButton>
-                )},
+                ) },
             );
 
         const title = this.state.selectedCommunityId
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index bda46aef07..9cdd1efe7e 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -108,22 +108,22 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     };
 
     private openSearch = () => {
-        defaultDispatcher.dispatch({action: "show_left_panel"});
-        defaultDispatcher.dispatch({action: "focus_room_filter"});
+        defaultDispatcher.dispatch({ action: "show_left_panel" });
+        defaultDispatcher.dispatch({ action: "focus_room_filter" });
     };
 
     private onChange = () => {
         if (!this.inputRef.current) return;
-        this.setState({query: this.inputRef.current.value});
+        this.setState({ query: this.inputRef.current.value });
     };
 
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
-        this.setState({focused: true});
+        this.setState({ focused: true });
         ev.target.select();
     };
 
     private onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
-        this.setState({focused: false});
+        this.setState({ focused: false });
     };
 
     private onKeyDown = (ev: React.KeyboardEvent) => {
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 7d74229421..f6e42a4f9c 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -17,15 +17,15 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t, _td } from '../../languageHandler';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import dis from '../../dispatcher/dispatcher';
-import {messageForResourceLimitError} from '../../utils/ErrorUtils';
-import {Action} from "../../dispatcher/actions";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {EventStatus} from "matrix-js-sdk/src/models/event";
+import { messageForResourceLimitError } from '../../utils/ErrorUtils';
+import { Action } from "../../dispatcher/actions";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { EventStatus } from "matrix-js-sdk/src/models/event";
 import NotificationBadge from "../views/rooms/NotificationBadge";
-import {StaticNotificationState} from "../../stores/notifications/StaticNotificationState";
+import { StaticNotificationState } from "../../stores/notifications/StaticNotificationState";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import InlineSpinner from "../views/elements/InlineSpinner";
 
@@ -115,9 +115,9 @@ export default class RoomStatusBar extends React.PureComponent {
 
     _onResendAllClick = () => {
         Resend.resendUnsentEvents(this.props.room).then(() => {
-            this.setState({isResending: false});
+            this.setState({ isResending: false });
         });
-        this.setState({isResending: true});
+        this.setState({ isResending: true });
         dis.fire(Action.FocusComposer);
     };
 
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index aef2fbc9d4..b0b91330a7 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -287,7 +287,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         if (this.state.room) {
             this.checkWidgets(this.state.room);
         }
-    }
+    };
 
     private checkWidgets = (room) => {
         this.setState({
@@ -530,7 +530,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             } else if (room) {
                 // Stop peeking because we have joined this room previously
                 this.context.stopPeeking();
-                this.setState({isPeeking: false});
+                this.setState({ isPeeking: false });
             }
         }
     }
@@ -698,7 +698,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 replyingToEvent: this.state.replyToEvent,
             });
         }
-    }
+    };
 
     private onRightPanelStoreUpdate = () => {
         this.setState({
@@ -882,7 +882,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 // no change
             } else if (!shouldHideEvent(ev, this.state)) {
                 this.setState((state, props) => {
-                    return {numUnreadMessages: state.numUnreadMessages + 1};
+                    return { numUnreadMessages: state.numUnreadMessages + 1 };
                 });
             }
         }
@@ -907,7 +907,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         CHAT_EFFECTS.forEach(effect => {
             if (containsEmoji(ev.getContent(), effect.emojis) || ev.getContent().msgtype === effect.msgType) {
-                dis.dispatch({action: `effects.${effect.command}`});
+                dis.dispatch({ action: `effects.${effect.command}` });
             }
         });
     };
@@ -960,7 +960,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 try {
                     await room.loadMembersIfNeeded();
                     if (!this.unmounted) {
-                        this.setState({membersLoaded: true});
+                        this.setState({ membersLoaded: true });
                     }
                 } catch (err) {
                     const errorMessage = `Fetching room members for ${room.roomId} failed.` +
@@ -988,7 +988,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         }
     }
 
-    private updatePreviewUrlVisibility({roomId}: Room) {
+    private updatePreviewUrlVisibility({ roomId }: Room) {
         // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
         const key = this.context.isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
         this.setState({
@@ -1128,7 +1128,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
             const canReply = room.maySendMessage();
 
-            this.setState({canReact, canReply});
+            this.setState({ canReact, canReply });
         }
     }
 
@@ -1192,7 +1192,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                     room_id: this.getRoomId(),
                 },
             });
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
         } else {
             Promise.resolve().then(() => {
                 const signUrl = this.props.threepidInvite?.signUrl;
@@ -1227,13 +1227,13 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         // We always increment the counter no matter the types, because dragging is
         // still happening. If we didn't, the drag counter would get out of sync.
-        this.setState({dragCounter: this.state.dragCounter + 1});
+        this.setState({ dragCounter: this.state.dragCounter + 1 });
 
         // See:
         // https://docs.w3cub.com/dom/datatransfer/types
         // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
         if (ev.dataTransfer.types.includes("Files") || ev.dataTransfer.types.includes("application/x-moz-file")) {
-            this.setState({draggingFile: true});
+            this.setState({ draggingFile: true });
         }
     };
 
@@ -1282,7 +1282,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
     private injectSticker(url, info, text) {
         if (this.context.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
             return;
         }
 
@@ -1609,7 +1609,7 @@ export default class RoomView extends React.Component<IProps, IState> {
 
         const showBar = this.messagePanel.canJumpToReadMarker();
         if (this.state.showTopUnreadMessagesBar != showBar) {
-            this.setState({showTopUnreadMessagesBar: showBar});
+            this.setState({ showTopUnreadMessagesBar: showBar });
         }
     };
 
@@ -1740,7 +1740,7 @@ export default class RoomView extends React.Component<IProps, IState> {
     onHiddenHighlightsClick = () => {
         const oldRoom = this.getOldRoom();
         if (!oldRoom) return;
-        dis.dispatch({action: "view_room", room_id: oldRoom.roomId});
+        dis.dispatch({ action: "view_room", room_id: oldRoom.roomId });
     };
 
     render() {
@@ -1948,7 +1948,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 >
                     {_t(
                         "You have %(count)s unread notifications in a prior version of this room.",
-                        {count: hiddenHighlightCount},
+                        { count: hiddenHighlightCount },
                     )}
                 </AccessibleButton>
             );
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index f6e1530537..6a5018927d 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from "react";
+import React, { createRef } from "react";
 import PropTypes from 'prop-types';
 import Timer from '../../utils/Timer';
 import AutoHideScrollbar from "./AutoHideScrollbar";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {getKeyBindingsManager, RoomAction} from "../../KeyBindingsManager";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { getKeyBindingsManager, RoomAction } from "../../KeyBindingsManager";
 
 const DEBUG_SCROLL = false;
 
@@ -166,7 +166,7 @@ export default class ScrollPanel extends React.Component {
     constructor(props) {
         super(props);
 
-        this._pendingFillRequests = {b: null, f: null};
+        this._pendingFillRequests = { b: null, f: null };
 
         if (this.props.resizeNotifier) {
             this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
@@ -593,7 +593,7 @@ export default class ScrollPanel extends React.Component {
             // This because when setting the scrollTop only 10 or so events might be loaded,
             // not giving enough content below the trackedNode to scroll downwards
             // enough so it ends up in the top of the viewport.
-            debuglog("scrollToken: setting scrollTop", {offsetBase, pixelOffset, offsetTop: trackedNode.offsetTop});
+            debuglog("scrollToken: setting scrollTop", { offsetBase, pixelOffset, offsetTop: trackedNode.offsetTop });
             scrollNode.scrollTop = (trackedNode.offsetTop - (scrollNode.clientHeight * offsetBase)) + pixelOffset;
             this._saveScrollState();
         }
@@ -730,7 +730,7 @@ export default class ScrollPanel extends React.Component {
                 // yield out of date values and cause a jump
                 // when setting it
                 sn.scrollBy(0, topDiff);
-                debuglog("updateHeight to", {newHeight, topDiff});
+                debuglog("updateHeight to", { newHeight, topDiff });
             }
         }
     }
@@ -862,7 +862,7 @@ export default class ScrollPanel extends React.Component {
             const sn = this._getScrollNode();
             const scrollState = this.scrollState;
             const messageList = this._itemlist.current;
-            const {offsetNode, offsetFromBottom} = this.preventShrinkingState;
+            const { offsetNode, offsetFromBottom } = this.preventShrinkingState;
             // element used to set paddingBottom to balance the typing notifs disappearing
             const balanceElement = messageList.parentElement;
             // if the offsetNode got unmounted, clear
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index abeb858274..5c966d2d3a 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { Key } from '../../Keyboard';
 import dis from '../../dispatcher/dispatcher';
-import {throttle} from 'lodash';
+import { throttle } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import classNames from 'classnames';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 @replaceableComponent("structures.SearchBox")
 export default class SearchBox extends React.Component {
@@ -89,7 +89,7 @@ export default class SearchBox extends React.Component {
 
     onSearch = throttle(() => {
         this.props.onSearch(this._search.current.value);
-    }, 200, {trailing: true, leading: true});
+    }, 200, { trailing: true, leading: true });
 
     _onKeyDown = ev => {
         switch (ev.key) {
@@ -101,7 +101,7 @@ export default class SearchBox extends React.Component {
     };
 
     _onFocus = ev => {
-        this.setState({blurred: false});
+        this.setState({ blurred: false });
         ev.target.select();
         if (this.props.onFocus) {
             this.props.onFocus(ev);
@@ -109,7 +109,7 @@ export default class SearchBox extends React.Component {
     };
 
     _onBlur = ev => {
-        this.setState({blurred: true});
+        this.setState({ blurred: true });
         if (this.props.onBlur) {
             this.props.onBlur(ev);
         }
@@ -147,7 +147,7 @@ export default class SearchBox extends React.Component {
             this.props.placeholder;
         const className = this.props.className || "";
         return (
-            <div className={classNames("mx_SearchBox", "mx_textinput", {"mx_SearchBox_blurred": this.state.blurred})}>
+            <div className={classNames("mx_SearchBox", "mx_textinput", { "mx_SearchBox_blurred": this.state.blurred })}>
                 <input
                     key="searchfield"
                     type="text"
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index 4292b60f41..e5c4372ab6 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -112,12 +112,12 @@ const Tile: React.FC<ITileProps> = ({
         ev.preventDefault();
         ev.stopPropagation();
         onViewRoomClick(false);
-    }
+    };
     const onJoinClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
         onViewRoomClick(true);
-    }
+    };
 
     let button;
     if (joinedRoom) {
@@ -137,7 +137,7 @@ const Tile: React.FC<ITileProps> = ({
         } else {
             checkbox = <TextWithTooltip
                 tooltip={_t("You don't have permission")}
-                onClick={ev => { ev.stopPropagation() }}
+                onClick={ev => { ev.stopPropagation(); }}
             >
                 <StyledCheckbox disabled={true} />
             </TextWithTooltip>;
@@ -340,7 +340,7 @@ export const HierarchyLevel = ({
                 </Tile>
             ))
         }
-    </React.Fragment>
+    </React.Fragment>;
 };
 
 // mutate argument refreshToken to force a reload
@@ -635,9 +635,9 @@ const SpaceRoomDirectory: React.FC<IProps> = ({ space, onFinished, initialText }
             <div className="mx_Dialog_content">
                 { _t("If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
                     null,
-                    {a: sub => {
+                    { a: sub => {
                         return <AccessibleButton kind="link" onClick={onCreateRoomClick}>{sub}</AccessibleButton>;
-                    }},
+                    } },
                 ) }
 
                 <SpaceHierarchy
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index a91c47b067..24b460284f 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -37,7 +37,7 @@ import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import dis from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
-import ResizeNotifier from "../../utils/ResizeNotifier"
+import ResizeNotifier from "../../utils/ResizeNotifier";
 import MainSplit from './MainSplit';
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import { ActionPayload } from "../../dispatcher/payloads";
@@ -162,7 +162,7 @@ const SpaceInfo = ({ space }) => {
                 </AccessibleButton>
             ) : null}
         </RoomMemberCount> }
-    </div>
+    </div>;
 };
 
 const onBetaClick = () => {
@@ -592,14 +592,14 @@ const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
 
         <AccessibleButton
             className="mx_SpaceRoomView_privateScope_justMeButton"
-            onClick={() => { onFinished(false) }}
+            onClick={() => { onFinished(false); }}
         >
             <h3>{ _t("Just me") }</h3>
             <div>{ _t("A private space to organise your rooms") }</div>
         </AccessibleButton>
         <AccessibleButton
             className="mx_SpaceRoomView_privateScope_meAndMyTeammatesButton"
-            onClick={() => { onFinished(true) }}
+            onClick={() => { onFinished(true); }}
         >
             <h3>{ _t("Me and my teammates") }</h3>
             <div>{ _t("A private space for you and your teammates") }</div>
@@ -686,7 +686,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
     let buttonLabel = _t("Skip for now");
     if (emailAddresses.some(name => name.trim())) {
         onClick = onNextClick;
-        buttonLabel = busy ? _t("Inviting...") : _t("Continue")
+        buttonLabel = busy ? _t("Inviting...") : _t("Continue");
     }
 
     return <div className="mx_SpaceRoomView_inviteTeammates">
diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx
index 0097d55cf5..3d77eaeac1 100644
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@@ -17,10 +17,10 @@ limitations under the License.
 */
 
 import * as React from "react";
-import {_t} from '../../languageHandler';
+import { _t } from '../../languageHandler';
 import * as sdk from "../../index";
 import AutoHideScrollbar from './AutoHideScrollbar';
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 /**
  * Represents a tab for the TabbedView.
@@ -75,7 +75,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
     private _setActiveTab(tab: Tab) {
         const idx = this.props.tabs.indexOf(tab);
         if (idx !== -1) {
-            this.setState({activeTabIndex: idx});
+            this.setState({ activeTabIndex: idx });
         } else {
             console.error("Could not find tab " + tab.label + " in tabs");
         }
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index ad20d38139..4cd71056a6 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -364,7 +364,7 @@ class TimelinePanel extends React.Component {
 
         if (!this._timelineWindow.canPaginate(dir)) {
             debuglog("TimelinePanel: can't", dir, "paginate any further");
-            this.setState({[canPaginateKey]: false});
+            this.setState({ [canPaginateKey]: false });
             return Promise.resolve(false);
         }
 
@@ -374,7 +374,7 @@ class TimelinePanel extends React.Component {
         }
 
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
-        this.setState({[paginatingKey]: true});
+        this.setState({ [paginatingKey]: true });
 
         return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => {
             if (this.unmounted) { return; }
@@ -428,7 +428,7 @@ class TimelinePanel extends React.Component {
             // it goes back off the top of the screen (presumably because the user
             // clicks on the 'jump to bottom' button), we need to re-enable it.
             if (rmPosition < 0) {
-                this.setState({readMarkerVisible: true});
+                this.setState({ readMarkerVisible: true });
             }
 
             // if read marker position goes between 0 and -1/1,
@@ -461,7 +461,7 @@ class TimelinePanel extends React.Component {
             // we won't load this event now, because we don't want to push any
             // events off the other end of the timeline. But we need to note
             // that we can now paginate.
-            this.setState({canForwardPaginate: true});
+            this.setState({ canForwardPaginate: true });
             return;
         }
 
@@ -603,7 +603,7 @@ class TimelinePanel extends React.Component {
     };
 
     onSync = (state, prevState, data) => {
-        this.setState({clientSyncState: state});
+        this.setState({ clientSyncState: state });
     };
 
     _readMarkerTimeout(readMarkerPosition) {
@@ -781,7 +781,6 @@ class TimelinePanel extends React.Component {
         this.sendReadReceipt();
     };
 
-
     // advance the read marker past any events we sent ourselves.
     _advanceReadMarkerPastMyEvents() {
         if (!this.props.manageReadMarkers) return;
@@ -899,7 +898,6 @@ class TimelinePanel extends React.Component {
             && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
     }
 
-
     /* get the current scroll state. See ScrollPanel.getScrollState for
      * details.
      *
@@ -999,7 +997,7 @@ class TimelinePanel extends React.Component {
     _loadTimeline(eventId, pixelOffset, offsetBase) {
         this._timelineWindow = new TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
-            {windowLimit: this.props.timelineCap});
+            { windowLimit: this.props.timelineCap });
 
         const onLoaded = () => {
             // clear the timeline min-height when
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index 273c8a079f..79a73735f4 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import * as React from "react";
-import ToastStore, {IToast} from "../../stores/ToastStore";
+import ToastStore, { IToast } from "../../stores/ToastStore";
 import classNames from "classnames";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 interface IState {
     toasts: IToast<any>[];
@@ -58,7 +58,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const {title, icon, key, component, className, props} = topToast;
+            const { title, icon, key, component, className, props } = topToast;
             const toastClasses = classNames("mx_Toast_toast", {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index e19e312f58..b8dce48235 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -25,7 +25,7 @@ import { Action } from "../../dispatcher/actions";
 import ProgressBar from "../views/elements/ProgressBar";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { IUpload } from "../../models/IUpload";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 interface IProps {
     room: Room;
@@ -47,7 +47,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
         // Set initial state to any available upload in this room - we might be mounting
         // earlier than the first progress event, so should show something relevant.
         const uploadsHere = this.getUploadsInRoom();
-        this.state = {currentUpload: uploadsHere[0], uploadsHere};
+        this.state = { currentUpload: uploadsHere[0], uploadsHere };
     }
 
     componentDidMount() {
@@ -74,7 +74,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
             case Action.UploadFailed: {
                 if (!this.mounted) return;
                 const uploadsHere = this.getUploadsInRoom();
-                this.setState({currentUpload: uploadsHere[0], uploadsHere});
+                this.setState({ currentUpload: uploadsHere[0], uploadsHere });
                 break;
             }
         }
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 3cf0dc5f84..d85817486b 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -32,8 +32,8 @@ import FeedbackDialog from "../views/dialogs/FeedbackDialog";
 import Modal from "../../Modal";
 import LogoutDialog from "../views/dialogs/LogoutDialog";
 import SettingsStore from "../../settings/SettingsStore";
-import {getCustomTheme} from "../../theme";
-import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
+import { getCustomTheme } from "../../theme";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import SdkConfig from "../../SdkConfig";
 import { getHomePageUrl } from "../../utils/pages";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
@@ -56,7 +56,7 @@ import HostSignupAction from "./HostSignupAction";
 import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes";
 import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
 import RoomName from "../views/elements/RoomName";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 import InlineSpinner from "../views/elements/InlineSpinner";
 import TooltipButton from "../views/elements/TooltipButton";
 interface IProps {
@@ -123,7 +123,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     private onRoom = (room: Room): void => {
         this.removePendingJoinRoom(room.roomId);
-    }
+    };
 
     private onTagStoreUpdate = () => {
         this.forceUpdate(); // we don't have anything useful in state to update
@@ -152,14 +152,14 @@ export default class UserMenu extends React.Component<IProps, IState> {
     };
 
     private onThemeChanged = () => {
-        this.setState({isDarkTheme: this.isUserOnDarkTheme()});
+        this.setState({ isDarkTheme: this.isUserOnDarkTheme() });
     };
 
     private onAction = (ev: ActionPayload) => {
         switch (ev.action) {
             case Action.ToggleUserMenu:
                 if (this.state.contextMenuPosition) {
-                    this.setState({contextMenuPosition: null});
+                    this.setState({ contextMenuPosition: null });
                 } else {
                     if (this.buttonRef.current) this.buttonRef.current.click();
                 }
@@ -185,7 +185,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (this.state.pendingRoomJoin.delete(roomId)) {
             this.setState({
                 pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin),
-            })
+            });
         }
     }
 
@@ -193,7 +193,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({contextMenuPosition: target.getBoundingClientRect()});
+        this.setState({ contextMenuPosition: target.getBoundingClientRect() });
     };
 
     private onContextMenu = (ev: React.MouseEvent) => {
@@ -210,7 +210,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
     };
 
     private onCloseMenu = () => {
-        this.setState({contextMenuPosition: null});
+        this.setState({ contextMenuPosition: null });
     };
 
     private onSwitchThemeClick = (ev: React.MouseEvent) => {
@@ -228,9 +228,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
+        const payload: OpenToTabPayload = { action: Action.ViewUserSettings, initialTabId: tabId };
         defaultDispatcher.dispatch(payload);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onShowArchived = (ev: ButtonEvent) => {
@@ -247,7 +247,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.stopPropagation();
 
         Modal.createTrackedDialog('Feedback Dialog', '', FeedbackDialog);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onSignOutClick = async (ev: ButtonEvent) => {
@@ -257,30 +257,30 @@ export default class UserMenu extends React.Component<IProps, IState> {
         const cli = MatrixClientPeg.get();
         if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) {
             // log out without user prompt if they have no local megolm sessions
-            dis.dispatch({action: 'logout'});
+            dis.dispatch({ action: 'logout' });
         } else {
             Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
         }
 
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onSignInClick = () => {
         dis.dispatch({ action: 'start_login' });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onRegisterClick = () => {
         dis.dispatch({ action: 'start_registration' });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onHomeClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        defaultDispatcher.dispatch({action: 'view_home_page'});
-        this.setState({contextMenuPosition: null}); // also close the menu
+        defaultDispatcher.dispatch({ action: 'view_home_page' });
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onCommunitySettingsClick = (ev: ButtonEvent) => {
@@ -290,7 +290,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         Modal.createTrackedDialog('Edit Community', '', EditCommunityPrototypeDialog, {
             communityId: CommunityPrototypeStore.instance.getSelectedCommunityId(),
         });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onCommunityMembersClick = (ev: ButtonEvent) => {
@@ -307,7 +307,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 action: 'view_room',
                 room_id: chat.roomId,
             }, true);
-            dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList});
+            dis.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList });
         } else {
             // "This should never happen" clauses go here for the prototype.
             Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, {
@@ -315,7 +315,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 description: _t("Failed to find the general chat for this community"),
             });
         }
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onCommunityInviteClick = (ev: ButtonEvent) => {
@@ -323,7 +323,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.stopPropagation();
 
         showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onDndToggle = (ev) => {
@@ -357,7 +357,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         ),
                     })}
                 </div>
-            )
+            );
         } else if (hostSignupConfig) {
             if (hostSignupConfig && hostSignupConfig.url) {
                 // If hostSignup.domains is set to a non-empty array, only show
@@ -509,7 +509,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         />
                     </IconizedContextMenuOptionList>
                 </React.Fragment>
-            )
+            );
         } else if (MatrixClientPeg.get().isGuest()) {
             primaryOptionList = (
                 <React.Fragment>
diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
index 6b472783bb..eb839be7be 100644
--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@@ -17,14 +17,14 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import {MatrixClientPeg} from "../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import * as sdk from "../../index";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 import HomePage from "./HomePage";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 @replaceableComponent("structures.UserView")
 export default class UserView extends React.Component {
@@ -56,7 +56,7 @@ export default class UserView extends React.Component {
 
     async _loadProfileInfo() {
         const cli = MatrixClientPeg.get();
-        this.setState({loading: true});
+        this.setState({ loading: true });
         let profileInfo;
         try {
             profileInfo = await cli.getProfileInfo(this.props.userId);
@@ -66,13 +66,13 @@ export default class UserView extends React.Component {
                 title: _t('Could not load user profile'),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
-            this.setState({loading: false});
+            this.setState({ loading: false });
             return;
         }
-        const fakeEvent = new MatrixEvent({type: "m.room.member", content: profileInfo});
+        const fakeEvent = new MatrixEvent({ type: "m.room.member", content: profileInfo });
         const member = new RoomMember(null, this.props.userId);
         member.setMembershipEvent(fakeEvent);
-        this.setState({member, loading: false});
+        this.setState({ member, loading: false });
     }
 
     render() {
diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index 654dd9b6c8..d691f6034b 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/src/components/structures/auth/CompleteSecurity.js
@@ -20,7 +20,7 @@ import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import SetupEncryptionBody from "./SetupEncryptionBody";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("structures.auth.CompleteSecurity")
 export default class CompleteSecurity extends React.Component {
@@ -33,12 +33,12 @@ export default class CompleteSecurity extends React.Component {
         const store = SetupEncryptionStore.sharedInstance();
         store.on("update", this._onStoreUpdate);
         store.start();
-        this.state = {phase: store.phase};
+        this.state = { phase: store.phase };
     }
 
     _onStoreUpdate = () => {
         const store = SetupEncryptionStore.sharedInstance();
-        this.setState({phase: store.phase});
+        this.setState({ phase: store.phase });
     };
 
     componentWillUnmount() {
@@ -50,7 +50,7 @@ export default class CompleteSecurity extends React.Component {
     render() {
         const AuthPage = sdk.getComponent("auth.AuthPage");
         const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
-        const {phase} = this.state;
+        const { phase } = this.state;
         let icon;
         let title;
 
diff --git a/src/components/structures/auth/E2eSetup.js b/src/components/structures/auth/E2eSetup.js
index 4e51ae828c..9b627449bc 100644
--- a/src/components/structures/auth/E2eSetup.js
+++ b/src/components/structures/auth/E2eSetup.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import AuthPage from '../../views/auth/AuthPage';
 import CompleteSecurityBody from '../../views/auth/CompleteSecurityBody';
 import CreateCrossSigningDialog from '../../views/dialogs/security/CreateCrossSigningDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("structures.auth.E2eSetup")
 export default class E2eSetup extends React.Component {
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 6188fdb5e4..9f2ac9deed 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -22,13 +22,13 @@ import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from "../../../Modal";
 import PasswordReset from "../../../PasswordReset";
-import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import classNames from 'classnames';
 import AuthPage from "../../views/auth/AuthPage";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import ServerPicker from "../../views/elements/ServerPicker";
 import PassphraseField from '../../views/auth/PassphraseField';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { PASSWORD_MIN_SCORE } from '../../views/auth/RegistrationForm';
 
 // Phases
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index d34582b0c3..61d3759dee 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -14,28 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode} from 'react';
-import {MatrixError} from "matrix-js-sdk/src/http-api";
+import React, { ReactNode } from 'react';
+import { MatrixError } from "matrix-js-sdk/src/http-api";
 
-import {_t, _td} from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import Login, {ISSOFlow, LoginFlow} from '../../../Login';
+import Login, { ISSOFlow, LoginFlow } from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import classNames from "classnames";
 import AuthPage from "../../views/auth/AuthPage";
 import PlatformPeg from '../../../PlatformPeg';
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {IMatrixClientCreds} from "../../../MatrixClientPeg";
+import { IMatrixClientCreds } from "../../../MatrixClientPeg";
 import PasswordLogin from "../../views/auth/PasswordLogin";
 import InlineSpinner from "../../views/elements/InlineSpinner";
 import Spinner from "../../views/elements/Spinner";
 import SSOButtons from "../../views/elements/SSOButtons";
 import ServerPicker from "../../views/elements/ServerPicker";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
@@ -166,7 +166,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
 
     onPasswordLogin = async (username, phoneCountry, phoneNumber, password) => {
         if (!this.state.serverIsAlive) {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             // Do a quick liveliness check on the URLs
             let aliveAgain = true;
             try {
@@ -174,7 +174,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                     this.props.serverConfig.hsUrl,
                     this.props.serverConfig.isUrl,
                 );
-                this.setState({serverIsAlive: true, errorText: ""});
+                this.setState({ serverIsAlive: true, errorText: "" });
             } catch (e) {
                 const componentState = AutoDiscoveryUtils.authComponentStateForError(e);
                 this.setState({
@@ -201,7 +201,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         this.loginLogic.loginViaPassword(
             username, phoneCountry, phoneNumber, password,
         ).then((data) => {
-            this.setState({serverIsAlive: true}); // it must be, we logged in.
+            this.setState({ serverIsAlive: true }); // it must be, we logged in.
             this.props.onLoggedIn(data, password);
         }, (error) => {
             if (this.unmounted) {
@@ -252,7 +252,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                             <div className="mx_Login_smallError">
                                 {_t(
                                     'Please note you are logging into the %(hs)s server, not matrix.org.',
-                                    {hs: this.props.serverConfig.hsName},
+                                    { hs: this.props.serverConfig.hsName },
                                 )}
                             </div>
                         </div>
@@ -363,7 +363,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         }
     };
 
-    private async initLoginLogic({hsUrl, isUrl}: ValidatedServerConfig) {
+    private async initLoginLogic({ hsUrl, isUrl }: ValidatedServerConfig) {
         let isDefaultServer = false;
         if (this.props.serverConfig.isDefault
             && hsUrl === this.props.serverConfig.hsUrl
@@ -501,9 +501,9 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         return <React.Fragment>
             { flows.map(flow => {
                 const stepRenderer = this.stepRendererMap[flow.type];
-                return <React.Fragment key={flow.type}>{ stepRenderer() }</React.Fragment>
+                return <React.Fragment key={flow.type}>{ stepRenderer() }</React.Fragment>;
             }) }
-        </React.Fragment>
+        </React.Fragment>;
     }
 
     private renderPasswordStep = () => {
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 3a4be6f0d6..add536da03 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -14,23 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {createClient} from 'matrix-js-sdk/src/matrix';
-import React, {ReactNode} from 'react';
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { createClient } from 'matrix-js-sdk/src/matrix';
+import React, { ReactNode } from 'react';
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import classNames from "classnames";
 import * as Lifecycle from '../../../Lifecycle';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AuthPage from "../../views/auth/AuthPage";
-import Login, {ISSOFlow} from "../../../Login";
+import Login, { ISSOFlow } from "../../../Login";
 import dis from "../../../dispatcher/dispatcher";
 import SSOButtons from "../../views/elements/SSOButtons";
 import ServerPicker from '../../views/elements/ServerPicker';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     serverConfig: ValidatedServerConfig;
@@ -131,7 +131,7 @@ export default class Registration extends React.Component<IProps, IState> {
             serverDeadError: "",
         };
 
-        const {hsUrl, isUrl} = this.props.serverConfig;
+        const { hsUrl, isUrl } = this.props.serverConfig;
         this.loginLogic = new Login(hsUrl, isUrl, null, {
             defaultDeviceDisplayName: "Element login check", // We shouldn't ever be used
         });
@@ -180,7 +180,7 @@ export default class Registration extends React.Component<IProps, IState> {
             }
         }
 
-        const {hsUrl, isUrl} = serverConfig;
+        const { hsUrl, isUrl } = serverConfig;
         const cli = createClient({
             baseUrl: hsUrl,
             idBaseUrl: isUrl,
@@ -230,7 +230,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 // the user off to the login page to figure their account out.
                 if (ssoFlow) {
                     // Redirect to login page - server probably expects SSO only
-                    dis.dispatch({action: 'start_login'});
+                    dis.dispatch({ action: 'start_login' });
                 } else {
                     this.setState({
                         serverErrorIsFatal: true, // fatal because user cannot continue on this server
@@ -267,7 +267,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 session_id: sessionId,
             }),
         );
-    }
+    };
 
     private onUIAuthFinished = async (success: boolean, response: any) => {
         if (!success) {
@@ -432,7 +432,7 @@ export default class Registration extends React.Component<IProps, IState> {
     private onLoginClickWithCheck = async ev => {
         ev.preventDefault();
 
-        const sessionLoaded = await Lifecycle.loadSession({ignoreGuest: true});
+        const sessionLoaded = await Lifecycle.loadSession({ ignoreGuest: true });
         if (!sessionLoaded) {
             // ok fine, there's still no session: really go to the login page
             this.props.onLoginClick();
@@ -487,7 +487,7 @@ export default class Registration extends React.Component<IProps, IState> {
                         fragmentAfterLogin={this.props.fragmentAfterLogin}
                     />
                     <h3 className="mx_AuthBody_centered">
-                        { _t("%(ssoButtons)s Or %(usernamePassword)s", { ssoButtons: "", usernamePassword: ""}).trim() }
+                        { _t("%(ssoButtons)s Or %(usernamePassword)s", { ssoButtons: "", usernamePassword: "" }).trim() }
                     </h3>
                 </React.Fragment>;
             }
@@ -563,7 +563,7 @@ export default class Registration extends React.Component<IProps, IState> {
                     <p><AccessibleButton element="span" className="mx_linkButton" onClick={async event => {
                         const sessionLoaded = await this.onLoginClickWithCheck(event);
                         if (sessionLoaded) {
-                            dis.dispatch({action: "view_welcome_page"});
+                            dis.dispatch({ action: "view_welcome_page" });
                         }
                     }}>
                         {_t("Continue with previous account")}
diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js
index 90137e084c..f0798b6d1a 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.js
@@ -22,7 +22,7 @@ import Modal from '../../../Modal';
 import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
 import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function keyHasPassphrase(keyInfo) {
     return (
diff --git a/src/components/structures/auth/SoftLogout.tsx b/src/components/structures/auth/SoftLogout.tsx
index fa9207efdd..7fb60a7b5d 100644
--- a/src/components/structures/auth/SoftLogout.tsx
+++ b/src/components/structures/auth/SoftLogout.tsx
@@ -15,17 +15,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import * as Lifecycle from '../../../Lifecycle';
 import Modal from '../../../Modal';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {ISSOFlow, LoginFlow, sendLoginRequest} from "../../../Login";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { ISSOFlow, LoginFlow, sendLoginRequest } from "../../../Login";
 import AuthPage from "../../views/auth/AuthPage";
-import {SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY} from "../../../BasePlatform";
+import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../BasePlatform";
 import SSOButtons from "../../views/elements/SSOButtons";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const LOGIN_VIEW = {
     LOADING: 1,
@@ -79,7 +79,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
     componentDidMount(): void {
         // We've ended up here when we don't need to - navigate to login
         if (!Lifecycle.isSoftLogout()) {
-            dis.dispatch({action: "start_login"});
+            dis.dispatch({ action: "start_login" });
             return;
         }
 
@@ -109,7 +109,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         const queryParams = this.props.realQueryParams;
         const hasAllParams = queryParams && queryParams['loginToken'];
         if (hasAllParams) {
-            this.setState({loginView: LOGIN_VIEW.LOADING});
+            this.setState({ loginView: LOGIN_VIEW.LOADING });
             this.trySsoLogin();
             return;
         }
@@ -125,18 +125,18 @@ export default class SoftLogout extends React.Component<IProps, IState> {
     }
 
     onPasswordChange = (ev) => {
-        this.setState({password: ev.target.value});
+        this.setState({ password: ev.target.value });
     };
 
     onForgotPassword = () => {
-        dis.dispatch({action: 'start_password_recovery'});
+        dis.dispatch({ action: 'start_password_recovery' });
     };
 
     onPasswordLogin = async (ev) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
 
         const hsUrl = MatrixClientPeg.get().getHomeserverUrl();
         const isUrl = MatrixClientPeg.get().getIdentityServerUrl();
@@ -168,12 +168,12 @@ export default class SoftLogout extends React.Component<IProps, IState> {
 
         Lifecycle.hydrateSession(credentials).catch((e) => {
             console.error(e);
-            this.setState({busy: false, errorText: _t("Failed to re-authenticate")});
+            this.setState({ busy: false, errorText: _t("Failed to re-authenticate") });
         });
     };
 
     async trySsoLogin() {
-        this.setState({busy: true});
+        this.setState({ busy: true });
 
         const hsUrl = localStorage.getItem(SSO_HOMESERVER_URL_KEY);
         const isUrl = localStorage.getItem(SSO_ID_SERVER_URL_KEY) || MatrixClientPeg.get().getIdentityServerUrl();
@@ -188,7 +188,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
             credentials = await sendLoginRequest(hsUrl, isUrl, loginType, loginParams);
         } catch (e) {
             console.error(e);
-            this.setState({busy: false, loginView: LOGIN_VIEW.UNSUPPORTED});
+            this.setState({ busy: false, loginView: LOGIN_VIEW.UNSUPPORTED });
             return;
         }
 
@@ -196,7 +196,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
             if (this.props.onTokenLoginCompleted) this.props.onTokenLoginCompleted();
         }).catch((e) => {
             console.error(e);
-            this.setState({busy: false, loginView: LOGIN_VIEW.UNSUPPORTED});
+            this.setState({ busy: false, loginView: LOGIN_VIEW.UNSUPPORTED });
         });
     }
 
diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.js
index 2cb72b5e1d..abe7fd2fd3 100644
--- a/src/components/views/auth/AuthBody.js
+++ b/src/components/views/auth/AuthBody.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthBody")
 export default class AuthBody extends React.PureComponent {
diff --git a/src/components/views/auth/AuthFooter.js b/src/components/views/auth/AuthFooter.js
index f167e16283..e81d2cd969 100644
--- a/src/components/views/auth/AuthFooter.js
+++ b/src/components/views/auth/AuthFooter.js
@@ -18,7 +18,7 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthFooter")
 export default class AuthFooter extends React.Component {
diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.js
index 323299b3a8..d9bd81adcb 100644
--- a/src/components/views/auth/AuthHeader.js
+++ b/src/components/views/auth/AuthHeader.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthHeader")
 export default class AuthHeader extends React.Component {
diff --git a/src/components/views/auth/AuthHeaderLogo.js b/src/components/views/auth/AuthHeaderLogo.js
index b4e04799bb..0adf18dc1c 100644
--- a/src/components/views/auth/AuthHeaderLogo.js
+++ b/src/components/views/auth/AuthHeaderLogo.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthHeaderLogo")
 export default class AuthHeaderLogo extends React.PureComponent {
diff --git a/src/components/views/auth/AuthPage.js b/src/components/views/auth/AuthPage.js
index 82f7270121..6ba47e5288 100644
--- a/src/components/views/auth/AuthPage.js
+++ b/src/components/views/auth/AuthPage.js
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.AuthPage")
 export default class AuthPage extends React.PureComponent {
diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js
index 50de24d403..bea4f89f53 100644
--- a/src/components/views/auth/CaptchaForm.js
+++ b/src/components/views/auth/CaptchaForm.js
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const DIV_ID = 'mx_recaptcha';
 
diff --git a/src/components/views/auth/CompleteSecurityBody.js b/src/components/views/auth/CompleteSecurityBody.js
index 6647bb1200..745d7abbf2 100644
--- a/src/components/views/auth/CompleteSecurityBody.js
+++ b/src/components/views/auth/CompleteSecurityBody.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.auth.CompleteSecurityBody")
 export default class CompleteSecurityBody extends React.PureComponent {
diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.js
index e21f112865..cbc19e0f8d 100644
--- a/src/components/views/auth/CountryDropdown.js
+++ b/src/components/views/auth/CountryDropdown.js
@@ -19,10 +19,10 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 
-import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
+import { COUNTRIES, getEmojiFlag } from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index e819e1e59c..e002eb5717 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -24,7 +24,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import Spinner from "../elements/Spinner";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { LocalisedPolicy, Policies } from '../../../Terms';
 
 /* This file contains a collection of components which are used by the
@@ -354,7 +354,6 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
-
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
@@ -371,7 +370,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
             newToggles[policy.id] = checked;
         }
-        this.setState({"toggledPolicies": newToggles});
+        this.setState({ "toggledPolicies": newToggles });
     }
 
     private trySubmit = () => {
@@ -382,10 +381,10 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         }
 
         if (allChecked) {
-            this.props.submitAuthDict({type: AuthType.Terms});
+            this.props.submitAuthDict({ type: AuthType.Terms });
             CountlyAnalytics.instance.track("onboarding_terms_complete");
         } else {
-            this.setState({errorText: _t("Please review and accept all of the homeserver's policies")});
+            this.setState({ errorText: _t("Please review and accept all of the homeserver's policies") });
         }
     };
 
@@ -518,11 +517,11 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
-        this.setState({requestingToken: true});
+        this.setState({ requestingToken: true });
         this.requestMsisdnToken().catch((e) => {
             this.props.fail(e);
         }).finally(() => {
-            this.setState({requestingToken: false});
+            this.setState({ requestingToken: false });
         });
     }
 
@@ -710,7 +709,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         // context.
 
         this.popupWindow = window.open(this.ssoUrl, "_blank");
-        this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
+        this.setState({ phase: SSOAuthEntry.PHASE_POSTAUTH });
         this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
     };
 
diff --git a/src/components/views/auth/LanguageSelector.js b/src/components/views/auth/LanguageSelector.js
index 0738ee43e4..88293310e7 100644
--- a/src/components/views/auth/LanguageSelector.js
+++ b/src/components/views/auth/LanguageSelector.js
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import SdkConfig from "../../../SdkConfig";
-import {getCurrentLanguage} from "../../../languageHandler";
+import { getCurrentLanguage } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 import PlatformPeg from "../../../PlatformPeg";
 import * as sdk from '../../../index';
 import React from 'react';
-import {SettingLevel} from "../../../settings/SettingLevel";
+import { SettingLevel } from "../../../settings/SettingLevel";
 
 function onChange(newLang) {
     if (getCurrentLanguage() !== newLang) {
@@ -29,7 +29,7 @@ function onChange(newLang) {
     }
 }
 
-export default function LanguageSelector({disabled}) {
+export default function LanguageSelector({ disabled }) {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
diff --git a/src/components/views/auth/PassphraseField.tsx b/src/components/views/auth/PassphraseField.tsx
index 274c244b2a..bab7e59d2a 100644
--- a/src/components/views/auth/PassphraseField.tsx
+++ b/src/components/views/auth/PassphraseField.tsx
@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {PureComponent, RefCallback, RefObject} from "react";
+import React, { PureComponent, RefCallback, RefObject } from "react";
 import classNames from "classnames";
 import zxcvbn from "zxcvbn";
 
 import SdkConfig from "../../../SdkConfig";
-import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
-import {_t, _td} from "../../../languageHandler";
-import Field, {IInputProps} from "../elements/Field";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import { _t, _td } from "../../../languageHandler";
+import Field, { IInputProps } from "../elements/Field";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends Omit<IInputProps, "onValidate"> {
     autoFocus?: boolean;
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
index 2a42804a61..12f55a112c 100644
--- a/src/components/views/auth/PasswordLogin.tsx
+++ b/src/components/views/auth/PasswordLogin.tsx
@@ -19,14 +19,14 @@ import classNames from 'classnames';
 
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import AccessibleButton from "../elements/AccessibleButton";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import withValidation from "../elements/Validation";
 import * as Email from "../../../email";
 import Field from "../elements/Field";
 import CountryDropdown from "./CountryDropdown";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -166,7 +166,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     };
 
     private onPasswordChanged = ev => {
-        this.setState({password: ev.target.value});
+        this.setState({ password: ev.target.value });
     };
 
     private async verifyFieldsBeforeSubmit() {
@@ -322,7 +322,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         const result = await this.validatePasswordRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
-    }
+    };
 
     private renderLoginField(loginType: IState["loginType"], autoFocus: boolean) {
         const classes = {
diff --git a/src/components/views/auth/RegistrationForm.tsx b/src/components/views/auth/RegistrationForm.tsx
index 8f0a293a3c..be6e29a493 100644
--- a/src/components/views/auth/RegistrationForm.tsx
+++ b/src/components/views/auth/RegistrationForm.tsx
@@ -25,12 +25,12 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import PassphraseField from "./PassphraseField";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import Field from '../elements/Field';
 import RegistrationEmailPromptDialog from '../dialogs/RegistrationEmailPromptDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 enum RegistrationField {
     Email = "field_email",
diff --git a/src/components/views/auth/Welcome.js b/src/components/views/auth/Welcome.js
index fca66fcf9b..e3f7a601f2 100644
--- a/src/components/views/auth/Welcome.js
+++ b/src/components/views/auth/Welcome.js
@@ -20,11 +20,11 @@ import classNames from "classnames";
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
-import {_td} from "../../../languageHandler";
+import { _td } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
+import { UIFeature } from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // translatable strings for Welcome pages
 _td("Sign in with SSO");
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index f98f8c88a1..87cdbe7512 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -64,7 +64,7 @@ const calculateUrls = (url, urls, lowBandwidth) => {
     return Array.from(new Set(_urls));
 };
 
-const useImageUrl = ({url, urls}): [string, () => void] => {
+const useImageUrl = ({ url, urls }): [string, () => void] => {
     // Since this is a hot code path and the settings store can be slow, we
     // use the cached lowBandwidth value from the room context if it exists
     const roomContext = useContext(RoomContext);
@@ -115,7 +115,7 @@ const BaseAvatar = (props: IProps) => {
         ...otherProps
     } = props;
 
-    const [imageUrl, onError] = useImageUrl({url, urls});
+    const [imageUrl, onError] = useImageUrl({ url, urls });
 
     if (!imageUrl && defaultToInitialLetter) {
         const initialLetter = AvatarLogic.getInitialLetter(name);
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index 42aef24086..950caefa02 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -24,12 +24,12 @@ import RoomAvatar from "./RoomAvatar";
 import NotificationBadge from '../rooms/NotificationBadge';
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
-import {isPresenceEnabled} from "../../../utils/presence";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {_t} from "../../../languageHandler";
+import { isPresenceEnabled } from "../../../utils/presence";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { _t } from "../../../languageHandler";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     room: Room;
@@ -121,7 +121,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (ev.getType() === 'm.room.join_rules' || ev.getType() === 'm.room.member') {
             const newIcon = this.calculateIcon();
             if (newIcon !== this.state.icon) {
-                this.setState({icon: newIcon});
+                this.setState({ icon: newIcon });
             }
         }
     };
@@ -130,7 +130,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         if (this.isUnmounted) return;
 
         const newIcon = this.getPresenceIcon();
-        if (newIcon !== this.state.icon) this.setState({icon: newIcon});
+        if (newIcon !== this.state.icon) this.setState({ icon: newIcon });
     };
 
     private getPresenceIcon(): Icon {
diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx
index 13dbbfec09..5df58555c4 100644
--- a/src/components/views/avatars/GroupAvatar.tsx
+++ b/src/components/views/avatars/GroupAvatar.tsx
@@ -52,7 +52,7 @@ export default class GroupAvatar extends React.Component<IProps> {
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;
+        const { groupId, groupAvatarUrl, groupName, ...otherProps } = this.props;
 
         return (
             <BaseAvatar
diff --git a/src/components/views/avatars/MemberAvatar.tsx b/src/components/views/avatars/MemberAvatar.tsx
index 862563a8b4..61155e3880 100644
--- a/src/components/views/avatars/MemberAvatar.tsx
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -89,7 +89,7 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
     }
 
     render() {
-        let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
+        let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {
diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.js
index acf190f17f..b8b23dc33e 100644
--- a/src/components/views/avatars/MemberStatusMessageAvatar.js
+++ b/src/components/views/avatars/MemberStatusMessageAvatar.js
@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {_t} from "../../../languageHandler";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { _t } from "../../../languageHandler";
 import MemberAvatar from '../avatars/MemberAvatar';
 import classNames from 'classnames';
 import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
-import {ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.avatars.MemberStatusMessageAvatar")
 export default class MemberStatusMessageAvatar extends React.Component {
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index bd820509c5..c3f49d4a12 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -128,7 +128,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {room, oobData, viewAvatarOnClick, onClick, ...otherProps} = this.props;
+        const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props;
 
         const roomName = room ? room.name : oobData.name;
 
diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx
index cca158269e..264f1f3956 100644
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ComponentProps} from 'react';
+import React, { ComponentProps } from 'react';
 import classNames from 'classnames';
 
-import {IApp} from "../../../stores/WidgetStore";
-import BaseAvatar, {BaseAvatarType} from "./BaseAvatar";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { IApp } from "../../../stores/WidgetStore";
+import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp;
@@ -49,7 +49,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             width={width}
             height={height}
         />
-    )
+    );
 };
 
 export default WidgetAvatar;
diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index aa4fe49f63..3127e1a915 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -17,10 +17,10 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
-import {SettingLevel} from "../../../settings/SettingLevel";
+import { SettingLevel } from "../../../settings/SettingLevel";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
diff --git a/src/components/views/context_menus/CallContextMenu.tsx b/src/components/views/context_menus/CallContextMenu.tsx
index 97473059a6..428e18ed30 100644
--- a/src/components/views/context_menus/CallContextMenu.tsx
+++ b/src/components/views/context_menus/CallContextMenu.tsx
@@ -22,7 +22,7 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import CallHandler from '../../../CallHandler';
 import InviteDialog, { KIND_CALL_TRANSFER } from '../dialogs/InviteDialog';
 import Modal from '../../../Modal';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
@@ -42,21 +42,21 @@ export default class CallContextMenu extends React.Component<IProps> {
     onHoldClick = () => {
         this.props.call.setRemoteOnHold(true);
         this.props.onFinished();
-    }
+    };
 
     onUnholdClick = () => {
         CallHandler.sharedInstance().setActiveCallRoomId(this.props.call.roomId);
 
         this.props.onFinished();
-    }
+    };
 
     onTransferClick = () => {
         Modal.createTrackedDialog(
-            'Transfer Call', '', InviteDialog, {kind: KIND_CALL_TRANSFER, call: this.props.call},
+            'Transfer Call', '', InviteDialog, { kind: KIND_CALL_TRANSFER, call: this.props.call },
             /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
         );
         this.props.onFinished();
-    }
+    };
 
     render() {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");
diff --git a/src/components/views/context_menus/DialpadContextMenu.tsx b/src/components/views/context_menus/DialpadContextMenu.tsx
index 8879629055..28a73ba8d4 100644
--- a/src/components/views/context_menus/DialpadContextMenu.tsx
+++ b/src/components/views/context_menus/DialpadContextMenu.tsx
@@ -20,7 +20,7 @@ import { ContextMenu, IProps as IContextMenuProps } from '../../structures/Conte
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import Field from "../elements/Field";
 import Dialpad from '../voip/DialPad';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
@@ -37,18 +37,17 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
 
         this.state = {
             value: '',
-        }
+        };
     }
 
     onDigitPress = (digit) => {
         this.props.call.sendDtmfDigit(digit);
-        this.setState({value: this.state.value + digit});
-    }
+        this.setState({ value: this.state.value + digit });
+    };
 
     onChange = (ev) => {
-        this.setState({value: ev.target.value});
-    }
-
+        this.setState({ value: ev.target.value });
+    };
 
     render() {
         return <ContextMenu {...this.props}>
diff --git a/src/components/views/context_menus/GenericElementContextMenu.js b/src/components/views/context_menus/GenericElementContextMenu.js
index e04e3f7695..87d44ef0d3 100644
--- a/src/components/views/context_menus/GenericElementContextMenu.js
+++ b/src/components/views/context_menus/GenericElementContextMenu.js
@@ -16,14 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * This component can be used to display generic HTML content in a contextual
  * menu.
  */
 
-
 @replaceableComponent("views.context_menus.GenericElementContextMenu")
 export default class GenericElementContextMenu extends React.Component {
     static propTypes = {
diff --git a/src/components/views/context_menus/GenericTextContextMenu.js b/src/components/views/context_menus/GenericTextContextMenu.js
index 3d3add006f..474732e88b 100644
--- a/src/components/views/context_menus/GenericTextContextMenu.js
+++ b/src/components/views/context_menus/GenericTextContextMenu.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.context_menus.GenericTextContextMenu")
 export default class GenericTextContextMenu extends React.Component {
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index 15078326b3..1529723ac8 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -20,10 +20,10 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {Group} from 'matrix-js-sdk/src/models/group';
+import { Group } from 'matrix-js-sdk/src/models/group';
 import GroupStore from "../../../stores/GroupStore";
-import {MenuItem} from "../../structures/ContextMenu";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MenuItem } from "../../structures/ContextMenu";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
 export default class GroupInviteTileContextMenu extends React.Component {
diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx
index a3fb00a9f4..a9c75bf3ba 100644
--- a/src/components/views/context_menus/IconizedContextMenu.tsx
+++ b/src/components/views/context_menus/IconizedContextMenu.tsx
@@ -90,14 +90,14 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
     </MenuItemCheckbox>;
 };
 
-export const IconizedContextMenuOption: React.FC<IOptionProps> = ({label, iconClassName, ...props}) => {
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, ...props }) => {
     return <MenuItem {...props} label={label}>
         { iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} /> }
         <span className="mx_IconizedContextMenu_label">{label}</span>
     </MenuItem>;
 };
 
-export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first, red, className, children}) => {
+export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({ first, red, className, children }) => {
     const classes = classNames("mx_IconizedContextMenu_optionList", className, {
         mx_IconizedContextMenu_optionList_notFirst: !first,
         mx_IconizedContextMenu_optionList_red: red,
@@ -108,7 +108,7 @@ export const IconizedContextMenuOptionList: React.FC<IOptionListProps> = ({first
     </div>;
 };
 
-const IconizedContextMenu: React.FC<IProps> = ({className, children, compact, ...props}) => {
+const IconizedContextMenu: React.FC<IProps> = ({ className, children, compact, ...props }) => {
     const classes = classNames("mx_IconizedContextMenu", className, {
         mx_IconizedContextMenu_compact: compact,
     });
diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.js
index 41f0e0ba61..23b91fe68f 100644
--- a/src/components/views/context_menus/StatusMessageContextMenu.js
+++ b/src/components/views/context_menus/StatusMessageContextMenu.js
@@ -17,10 +17,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.context_menus.StatusMessageContextMenu")
 export default class StatusMessageContextMenu extends React.Component {
diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index 4e381643ba..c40ff4207b 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -20,9 +20,9 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
-import {MenuItem} from "../../structures/ContextMenu";
+import { MenuItem } from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 
 @replaceableComponent("views.context_menus.TagTileContextMenu")
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index 068bfd6497..b21efdceb9 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext} from "react";
-import {MatrixCapabilities} from "matrix-widget-api";
+import React, { useContext } from "react";
+import { MatrixCapabilities } from "matrix-widget-api";
 
-import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
-import {ChevronFace} from "../../structures/ContextMenu";
-import {_t} from "../../../languageHandler";
-import {IApp} from "../../../stores/WidgetStore";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
+import { ChevronFace } from "../../structures/ContextMenu";
+import { _t } from "../../../languageHandler";
+import { IApp } from "../../../stores/WidgetStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import RoomContext from "../../../contexts/RoomContext";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import {WidgetType} from "../../../widgets/WidgetType";
+import { WidgetType } from "../../../widgets/WidgetType";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
@@ -54,7 +54,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     ...props
 }) => {
     const cli = useContext(MatrixClientContext);
-    const {room, roomId} = useContext(RoomContext);
+    const { room, roomId } = useContext(RoomContext);
 
     const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
     const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 8997e4a5f8..c09097c4b4 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -14,29 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode, useContext, useMemo, useState} from "react";
+import React, { ReactNode, useContext, useMemo, useState } from "react";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
-import {_t} from '../../../languageHandler';
-import {IDialogProps} from "./IDialogProps";
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
 import SpaceStore from "../../../stores/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
-import {getDisplayAliasForRoom} from "../../../Rooms";
+import { getDisplayAliasForRoom } from "../../../Rooms";
 import AccessibleButton from "../elements/AccessibleButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {sleep} from "../../../utils/promise";
+import { sleep } from "../../../utils/promise";
 import DMRoomMap from "../../../utils/DMRoomMap";
-import {calculateRoomVia} from "../../../utils/permalinks/Permalinks";
+import { calculateRoomVia } from "../../../utils/permalinks/Permalinks";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
-import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import TruncatedList from "../elements/TruncatedList";
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index 77c69abc4e..ad4fc8d672 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -17,12 +17,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { addressTypes, getAddressType } from '../../../UserAddress';
 import GroupStore from '../../../stores/GroupStore';
@@ -30,10 +30,10 @@ import * as Email from '../../../email';
 import IdentityAuthClient from '../../../IdentityAuthClient';
 import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../utils/IdentityServerUtils';
 import { abbreviateUrl } from '../../../utils/UrlUtils';
-import {sleep} from "../../../utils/promise";
-import {Key} from "../../../Keyboard";
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { sleep } from "../../../utils/promise";
+import { Key } from "../../../Keyboard";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -457,7 +457,7 @@ export default class AddressPickerDialog extends React.Component {
         const addrType = getAddressType(query);
         if (this.state.validAddressTypes.includes(addrType)) {
             if (addrType === 'email' && !Email.looksValid(query)) {
-                this.setState({searchError: _t("That doesn't look like a valid email address")});
+                this.setState({ searchError: _t("That doesn't look like a valid email address") });
                 return;
             }
             suggestedList.unshift({
@@ -573,13 +573,13 @@ export default class AddressPickerDialog extends React.Component {
     _getFilteredSuggestions() {
         // map addressType => set of addresses to avoid O(n*m) operation
         const selectedAddresses = {};
-        this.state.selectedList.forEach(({address, addressType}) => {
+        this.state.selectedList.forEach(({ address, addressType }) => {
             if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
             selectedAddresses[addressType].add(address);
         });
 
         // Filter out any addresses in the above already selected addresses (matching both type and address)
-        return this.state.suggestedList.filter(({address, addressType}) => {
+        return this.state.suggestedList.filter(({ address, addressType }) => {
             return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
         });
     }
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 0858e53e50..e92bd6315e 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -23,10 +23,10 @@ import classNames from 'classnames';
 
 import { Key } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Basic container for modal dialogs.
diff --git a/src/components/views/dialogs/BetaFeedbackDialog.tsx b/src/components/views/dialogs/BetaFeedbackDialog.tsx
index b8ff803627..5a2f16f169 100644
--- a/src/components/views/dialogs/BetaFeedbackDialog.tsx
+++ b/src/components/views/dialogs/BetaFeedbackDialog.tsx
@@ -14,28 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import SdkConfig from "../../../SdkConfig";
-import {IDialogProps} from "./IDialogProps";
+import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
-import {submitFeedback} from "../../../rageshake/submit-rageshake";
+import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import InfoDialog from "./InfoDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "./UserSettingsDialog";
 
 interface IProps extends IDialogProps {
     featureId: string;
 }
 
-const BetaFeedbackDialog: React.FC<IProps> = ({featureId, onFinished}) => {
+const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
     const info = SettingsStore.getBetaInfo(featureId);
 
     const [comment, setComment] = useState("");
diff --git a/src/components/views/dialogs/BugReportDialog.tsx b/src/components/views/dialogs/BugReportDialog.tsx
index f938340a50..eeb3769bf9 100644
--- a/src/components/views/dialogs/BugReportDialog.tsx
+++ b/src/components/views/dialogs/BugReportDialog.tsx
@@ -22,9 +22,9 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import sendBugReport, {downloadBugReport} from '../../../rageshake/submit-rageshake';
+import sendBugReport, { downloadBugReport } from '../../../rageshake/submit-rageshake';
 import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -68,7 +68,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onSubmit = (): void => {
         if ((!this.state.text || !this.state.text.trim()) && (!this.state.issueUrl || !this.state.issueUrl.trim())) {
@@ -110,7 +110,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                 });
             }
         });
-    }
+    };
 
     private onDownload = async (): Promise<void> => {
         this.setState({ downloadBusy: true });
@@ -139,25 +139,25 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onTextChange = (ev: React.FormEvent<HTMLTextAreaElement>): void => {
         this.setState({ text: ev.currentTarget.value });
-    }
+    };
 
     private onIssueUrlChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.setState({ issueUrl: ev.currentTarget.value });
-    }
+    };
 
     private sendProgressCallback = (progress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ progress });
-    }
+    };
 
     private downloadProgressCallback = (downloadProgress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ downloadProgress });
-    }
+    };
 
     public render() {
         const Loader = sdk.getComponent("elements.Spinner");
diff --git a/src/components/views/dialogs/ChangelogDialog.tsx b/src/components/views/dialogs/ChangelogDialog.tsx
index 0ded33cdcb..8acacd8e73 100644
--- a/src/components/views/dialogs/ChangelogDialog.tsx
+++ b/src/components/views/dialogs/ChangelogDialog.tsx
@@ -49,7 +49,7 @@ export default class ChangelogDialog extends React.Component<IProps> {
                     this.setState({ [REPOS[i]]: response.statusText });
                     return;
                 }
-                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+                this.setState({ [REPOS[i]]: JSON.parse(body).commits });
             });
         }
     }
@@ -93,7 +93,6 @@ export default class ChangelogDialog extends React.Component<IProps> {
             </div>
         );
 
-
         return (
             <QuestionDialog
                 title={_t("Changelog")}
diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
index 2635f95bb7..7627489deb 100644
--- a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
+++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
@@ -26,12 +26,12 @@ import SdkConfig from "../../../SdkConfig";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import InviteDialog from "./InviteDialog";
 import BaseAvatar from "../avatars/BaseAvatar";
-import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
+import { inviteMultipleToRoom, showAnyInviteErrors } from "../../../RoomInvite";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     roomId: string;
@@ -86,7 +86,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         ev.preventDefault();
         ev.stopPropagation();
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             const targets = [...this.state.emailTargets, ...this.state.userTargets];
             const result = await inviteMultipleToRoom(this.props.roomId, targets);
@@ -95,10 +95,10 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
             if (success) {
                 this.props.onFinished(true);
             } else {
-                this.setState({busy: false});
+                this.setState({ busy: false });
             }
         } catch (e) {
-            this.setState({busy: false});
+            this.setState({ busy: false });
             console.error(e);
             Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
                 title: _t("Failed to invite"),
@@ -114,7 +114,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         } else {
             targets[index] = ev.target.value;
         }
-        this.setState({emailTargets: targets});
+        this.setState({ emailTargets: targets });
     };
 
     private onAddressBlur = (index: number) => {
@@ -122,12 +122,12 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         if (index >= targets.length) return; // not important
         if (targets[index].trim() === "") {
             targets.splice(index, 1);
-            this.setState({emailTargets: targets});
+            this.setState({ emailTargets: targets });
         }
     };
 
     private onShowPeopleClick = () => {
-        this.setState({showPeople: !this.state.showPeople});
+        this.setState({ showPeople: !this.state.showPeople });
     };
 
     private setPersonToggle = (person: IPerson, selected: boolean) => {
@@ -137,7 +137,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         } else if (!selected && targets.includes(person.userId)) {
             targets.splice(targets.indexOf(person.userId), 1);
         }
-        this.setState({userTargets: targets});
+        this.setState({ userTargets: targets });
     };
 
     private renderPerson(person: IPerson, key: any) {
@@ -165,7 +165,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
     }
 
     private onShowMorePeople = () => {
-        this.setState({numPeople: this.state.numPeople + 5}); // arbitrary increase
+        this.setState({ numPeople: this.state.numPeople + 5 }); // arbitrary increase
     };
 
     public render() {
@@ -214,7 +214,7 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         if (this.state.people.length > 0) {
             peopleIntro = (
                 <div className="mx_CommunityPrototypeInviteDialog_people">
-                    <span>{_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})}</span>
+                    <span>{_t("People you know on %(brand)s", { brand: SdkConfig.get().brand })}</span>
                     <AccessibleButton onClick={this.onShowPeopleClick}>
                         {this.state.showPeople ? _t("Hide") : _t("Show")}
                     </AccessibleButton>
@@ -225,14 +225,14 @@ export default class CommunityPrototypeInviteDialog extends React.PureComponent<
         let buttonText = _t("Skip");
         const targetCount = this.state.userTargets.length + this.state.emailTargets.length;
         if (targetCount > 0) {
-            buttonText = _t("Send %(count)s invites", {count: targetCount});
+            buttonText = _t("Send %(count)s invites", { count: targetCount });
         }
 
         return (
             <BaseDialog
                 className="mx_CommunityPrototypeInviteDialog"
                 onFinished={this.props.onFinished}
-                title={_t("Invite people to join %(communityName)s", {communityName: this.props.communityName})}
+                title={_t("Invite people to join %(communityName)s", { communityName: this.props.communityName })}
             >
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_Dialog_content">
diff --git a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
index ae7b23c2c9..90b749b959 100644
--- a/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
+++ b/src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx
@@ -53,14 +53,14 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
 
     public onParentFinished = async (proceed: boolean): Promise<void> => {
         if (proceed) {
-            this.setState({isRedacting: true});
+            this.setState({ isRedacting: true });
             try {
                 await this.props.redact();
                 this.props.onFinished(true);
             } catch (error) {
                 const code = error.errcode || error.statusCode;
                 if (typeof code !== "undefined") {
-                    this.setState({redactionErrorCode: code});
+                    this.setState({ redactionErrorCode: code });
                 } else {
                     this.props.onFinished(true);
                 }
@@ -79,7 +79,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
                     <ErrorDialog
                         onFinished={this.props.onFinished}
                         title={_t('Error')}
-                        description={_t('You cannot delete this message. (%(code)s)', {code})}
+                        description={_t('You cannot delete this message. (%(code)s)', { code })}
                     />
                 );
             } else {
diff --git a/src/components/views/dialogs/ConfirmRedactDialog.tsx b/src/components/views/dialogs/ConfirmRedactDialog.tsx
index eee05599e8..94f29a71fc 100644
--- a/src/components/views/dialogs/ConfirmRedactDialog.tsx
+++ b/src/components/views/dialogs/ConfirmRedactDialog.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
diff --git a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
index d95b1fe358..2978179817 100644
--- a/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
+++ b/src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import * as sdk from "../../../index";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
diff --git a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx
index 9b4484d661..29e9a2ad39 100644
--- a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx
+++ b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx
@@ -23,9 +23,9 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import InfoTooltip from "../elements/InfoTooltip";
 import dis from "../../../dispatcher/dispatcher";
-import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
+import { showCommunityRoomInviteDialog } from "../../../RoomInvite";
 import GroupStore from "../../../stores/GroupStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
@@ -58,7 +58,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
     private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
         const localpart = (ev.target.value || "").toLowerCase().replace(/[^a-z0-9.\-_]/g, '-');
-        this.setState({name: ev.target.value, localpart});
+        this.setState({ name: ev.target.value, localpart });
     };
 
     private onSubmit = async (ev) => {
@@ -69,7 +69,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
         // We'll create the community now to see if it's taken, leaving it active in
         // the background for the user to look at while they invite people.
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             let avatarUrl = ''; // must be a string for synapse to accept it
             if (this.state.avatarFile) {
@@ -85,7 +85,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
             });
 
             // Ensure the tag gets selected now that we've created it
-            dis.dispatch({action: 'deselect_tags'}, true);
+            dis.dispatch({ action: 'deselect_tags' }, true);
             dis.dispatch({
                 action: 'select_tag',
                 tag: result.group_id,
@@ -123,13 +123,13 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
     private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
         if (!e.target.files || !e.target.files.length) {
-            this.setState({avatarFile: null});
+            this.setState({ avatarFile: null });
         } else {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             const file = e.target.files[0];
             const reader = new FileReader();
             reader.onload = (ev: ProgressEvent<FileReader>) => {
-                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+                this.setState({ avatarFile: file, busy: false, avatarPreview: ev.target.result as string });
             };
             reader.readAsDataURL(file);
         }
@@ -175,7 +175,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
         let preview = <img src={this.state.avatarPreview} className="mx_CreateCommunityPrototypeDialog_avatar" />;
         if (!this.state.avatarPreview) {
-            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />
+            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />;
         }
 
         return (
@@ -204,7 +204,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
                         </div>
                         <div className="mx_CreateCommunityPrototypeDialog_colAvatar">
                             <input
-                                type="file" style={{display: "none"}}
+                                type="file" style={{ display: "none" }}
                                 ref={this.avatarUploadRef} accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
diff --git a/src/components/views/dialogs/CreateGroupDialog.tsx b/src/components/views/dialogs/CreateGroupDialog.tsx
index 60e4f5efb8..f03a40ddc5 100644
--- a/src/components/views/dialogs/CreateGroupDialog.tsx
+++ b/src/components/views/dialogs/CreateGroupDialog.tsx
@@ -18,8 +18,8 @@ import React from 'react';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -83,7 +83,7 @@ export default class CreateGroupDialog extends React.Component<IProps, IState> {
         if (this.state.groupName !== '') {
             profile.name = this.state.groupName;
         }
-        this.setState({creating: true});
+        this.setState({ creating: true });
         MatrixClientPeg.get().createGroup({
             localpart: this.state.groupId,
             profile: profile,
@@ -95,9 +95,9 @@ export default class CreateGroupDialog extends React.Component<IProps, IState> {
             });
             this.props.onFinished(true);
         }).catch((e) => {
-            this.setState({createError: e});
+            this.setState({ createError: e });
         }).finally(() => {
-            this.setState({creating: false});
+            this.setState({ creating: false });
         });
     };
 
diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx
index 544f593708..b5c0096771 100644
--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -137,9 +137,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         if (activeElement) {
             activeElement.blur();
         }
-        await this.nameField.current.validate({allowEmpty: false});
+        await this.nameField.current.validate({ allowEmpty: false });
         if (this.aliasField.current) {
-            await this.aliasField.current.validate({allowEmpty: false});
+            await this.aliasField.current.validate({ allowEmpty: false });
         }
         // Validation and state updates are async, so we need to wait for them to complete
         // first. Queue a `setState` callback and wait for it to resolve.
@@ -194,7 +194,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
 
     private onNameValidate = async (fieldState: IFieldState) => {
         const result = await CreateRoomDialog.validateRoomName(fieldState);
-        this.setState({nameIsValid: result.valid});
+        this.setState({ nameIsValid: result.valid });
         return result;
     };
 
@@ -276,7 +276,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
-            title = _t("Create a room in %(communityName)s", {communityName: name});
+            title = _t("Create a room in %(communityName)s", { communityName: name });
         }
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
@@ -313,7 +313,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             <LabelledToggleSwitch
                                 label={_t(
                                     "Block anyone not part of %(serverName)s from ever joining this room.",
-                                    {serverName: MatrixClientPeg.getHomeserverName()},
+                                    { serverName: MatrixClientPeg.getHomeserverName() },
                                 )}
                                 onChange={this.onNoFederateChange}
                                 value={this.state.noFederate}
diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
index 2bdf732bc5..2cdaf9cf4f 100644
--- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
+++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx
@@ -43,7 +43,7 @@ export default (props: IProps) => {
             focus: false,
             onFinished: (doLogout) => {
                 if (doLogout) {
-                    dis.dispatch({action: 'logout'});
+                    dis.dispatch({ action: 'logout' });
                     props.onFinished(true);
                 }
             },
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.tsx b/src/components/views/dialogs/DeactivateAccountDialog.tsx
index cf88802340..6df6056670 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.tsx
+++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx
@@ -19,13 +19,13 @@ import React from 'react';
 
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
-import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
-import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import InteractiveAuth, { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import { DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import StyledCheckbox from "../elements/StyledCheckbox";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -100,7 +100,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             if (phaseAesthetics && phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
             if (phaseAesthetics && phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
         }
-        this.setState({bodyText, continueText, continueKind});
+        this.setState({ bodyText, continueText, continueKind });
     };
 
     private onUIAuthFinished = (success: boolean, result: Error) => {
@@ -112,7 +112,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
         }
 
         console.error("Error during UI Auth:", { result });
-        this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+        this.setState({ errStr: _t("There was a problem communicating with the server. Please try again.") });
     };
 
     private onUIAuthComplete = (auth: any): void => {
@@ -123,7 +123,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             this.props.onFinished(true);
         }).catch(e => {
             console.error(e);
-            this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+            this.setState({ errStr: _t("There was a problem communicating with the server. Please try again.") });
         });
     };
 
@@ -153,13 +153,13 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             // We'll try to log something in an vain attempt to record what happened (storage
             // is also obliterated on logout).
             console.warn("User's account got deactivated without confirmation: Server had no auth");
-            this.setState({errStr: _t("Server did not require any authentication")});
+            this.setState({ errStr: _t("Server did not require any authentication") });
         }).catch(e => {
             if (e && e.httpStatus === 401 && e.data) {
                 // Valid UIA response
-                this.setState({authData: e.data, authEnabled: true});
+                this.setState({ authData: e.data, authEnabled: true });
             } else {
-                this.setState({errStr: _t("Server did not return valid authentication information.")});
+                this.setState({ errStr: _t("Server did not return valid authentication information.") });
             }
         });
     }
diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx
index b1749b370a..de958f8e9a 100644
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -62,13 +62,13 @@ abstract class GenericEditor<
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         // @ts-ignore: Unsure how to convince TS this is okay when the state
         // type can be extended.
-        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
-    }
+        this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
+    };
 
     protected abstract send();
 
@@ -119,7 +119,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
     constructor(props) {
         super(props);
 
-        const {eventType, stateKey, evContent} = Object.assign({
+        const { eventType, stateKey, evContent } = Object.assign({
             eventType: '',
             stateKey: '',
             evContent: '{\n\n}',
@@ -158,7 +158,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -187,7 +187,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
-                { showTglFlip && <div style={{float: "right"}}>
+                { showTglFlip && <div style={{ float: "right" }}>
                     <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isStateEvent}
@@ -228,7 +228,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
     constructor(props) {
         super(props);
 
-        const {eventType, evContent} = Object.assign({
+        const { eventType, evContent } = Object.assign({
             eventType: '',
             evContent: '{\n\n}',
         }, this.props.inputs);
@@ -264,7 +264,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -287,7 +287,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
                 { !this.state.message && <button onClick={this.send}>{ _t('Send') }</button> }
-                { !this.state.message && <div style={{float: "right"}}>
+                { !this.state.message && <div style={{ float: "right" }}>
                     <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isRoomAccountData}
@@ -442,19 +442,19 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (filterEventType: string) => {
         this.setState({ queryEventType: filterEventType });
-    }
+    };
 
     private onQueryStateKey = (filterStateKey: string) => {
         this.setState({ queryStateKey: filterStateKey });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -570,19 +570,19 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private onChange = (e: ChangeEvent<HTMLInputElement>) => {
-        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
-    }
+        this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (queryEventType: string) => {
         this.setState({ queryEventType });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -630,7 +630,7 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
-                <div style={{float: "right"}}>
+                <div style={{ float: "right" }}>
                     <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip"
                         type="checkbox"
                         checked={this.state.isRoomAccountData}
@@ -676,7 +676,7 @@ class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRo
 
     private onQuery = (query: string) => {
         this.setState({ query });
-    }
+    };
 
     render() {
         return <div>
@@ -704,7 +704,7 @@ const PHASE_MAP = {
 const VerificationRequestExplorer: React.FC<{
     txnId: string;
     request: VerificationRequest;
-}> = ({txnId, request}) => {
+}> = ({ txnId, request }) => {
     const [, updateState] = useState();
     const [timeout, setRequestTimeout] = useState(request.timeout);
 
@@ -739,7 +739,7 @@ const VerificationRequestExplorer: React.FC<{
             <dd>{JSON.stringify(request.observeOnly)}</dd>
         </dl>
     </div>);
-}
+};
 
 class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     static getLabel() {
@@ -751,7 +751,7 @@ class VerificationExplorer extends React.PureComponent<IExplorerProps> {
 
     private onNewRequest = () => {
         this.forceUpdate();
-    }
+    };
 
     componentDidMount() {
         const cli = this.context;
@@ -806,17 +806,17 @@ class WidgetExplorer extends React.Component<IExplorerProps, IWidgetExplorerStat
     };
 
     private onQueryChange = (query: string) => {
-        this.setState({query});
+        this.setState({ query });
     };
 
     private onEditWidget = (widget: IApp) => {
-        this.setState({editWidget: widget});
+        this.setState({ editWidget: widget });
     };
 
     private onBack = () => {
         const widgets = WidgetStore.instance.getApps(this.props.room.roomId);
         if (this.state.editWidget && widgets.includes(this.state.editWidget)) {
-            this.setState({editWidget: null});
+            this.setState({ editWidget: null });
         } else {
             this.props.onBack();
         }
@@ -908,22 +908,22 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
     }
 
     private onQueryChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        this.setState({query: ev.target.value});
+        this.setState({ query: ev.target.value });
     };
 
     private onExplValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({explicitValues: ev.target.value});
+        this.setState({ explicitValues: ev.target.value });
     };
 
     private onExplRoomValuesEdit = (ev: ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({explicitRoomValues: ev.target.value});
+        this.setState({ explicitRoomValues: ev.target.value });
     };
 
     private onBack = () => {
         if (this.state.editSetting) {
-            this.setState({editSetting: null});
+            this.setState({ editSetting: null });
         } else if (this.state.viewSetting) {
-            this.setState({viewSetting: null});
+            this.setState({ viewSetting: null });
         } else {
             this.props.onBack();
         }
@@ -931,7 +931,7 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
 
     private onViewClick = (ev: MouseEvent, settingId: string) => {
         ev.preventDefault();
-        this.setState({viewSetting: settingId});
+        this.setState({ viewSetting: settingId });
     };
 
     private onEditClick = (ev: MouseEvent, settingId: string) => {
@@ -1221,11 +1221,11 @@ export default class DevtoolsDialog extends React.PureComponent<IProps, IState>
 
     private onBack = () => {
         this.setState({ mode: null });
-    }
+    };
 
     private onCancel = () => {
         this.props.onFinished(false);
-    }
+    };
 
     render() {
         let body;
diff --git a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
index ee3696b427..217e4f2d37 100644
--- a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
+++ b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
@@ -23,8 +23,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import FlairStore from "../../../stores/FlairStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps extends IDialogProps {
     communityId: string;
@@ -60,7 +60,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
     }
 
     private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
-        this.setState({name: ev.target.value});
+        this.setState({ name: ev.target.value });
     };
 
     private onSubmit = async (ev) => {
@@ -71,7 +71,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
 
         // We'll create the community now to see if it's taken, leaving it active in
         // the background for the user to look at while they invite people.
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             let avatarUrl = this.state.currentAvatarUrl || ""; // must be a string for synapse to accept it
             if (this.state.avatarFile) {
@@ -99,13 +99,13 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
 
     private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
         if (!e.target.files || !e.target.files.length) {
-            this.setState({avatarFile: null});
+            this.setState({ avatarFile: null });
         } else {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             const file = e.target.files[0];
             const reader = new FileReader();
             reader.onload = (ev: ProgressEvent<FileReader>) => {
-                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+                this.setState({ avatarFile: file, busy: false, avatarPreview: ev.target.result as string });
             };
             reader.readAsDataURL(file);
         }
@@ -122,7 +122,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                 const url = mediaFromMxc(this.state.currentAvatarUrl).srcHttp;
                 preview = <img src={url} className="mx_EditCommunityPrototypeDialog_avatar" />;
             } else {
-                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />
+                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />;
             }
         }
 
@@ -144,7 +144,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                         </div>
                         <div className="mx_EditCommunityPrototypeDialog_rowAvatar">
                             <input
-                                type="file" style={{display: "none"}}
+                                type="file" style={{ display: "none" }}
                                 ref={this.avatarUploadRef} accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
diff --git a/src/components/views/dialogs/ErrorDialog.tsx b/src/components/views/dialogs/ErrorDialog.tsx
index d50ec7bf36..0f675f0df7 100644
--- a/src/components/views/dialogs/ErrorDialog.tsx
+++ b/src/components/views/dialogs/ErrorDialog.tsx
@@ -28,7 +28,7 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
diff --git a/src/components/views/dialogs/FeedbackDialog.js b/src/components/views/dialogs/FeedbackDialog.js
index d80a935573..88a57cf8cb 100644
--- a/src/components/views/dialogs/FeedbackDialog.js
+++ b/src/components/views/dialogs/FeedbackDialog.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
@@ -30,7 +30,6 @@ const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
     "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
 const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
 
-
 export default (props) => {
     const [rating, setRating] = useState("");
     const [comment, setComment] = useState("");
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index c8bc907136..64c080bf01 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -31,7 +31,7 @@ import {
     IPostmessageResponseData,
     PostmessageAction,
 } from "./HostSignupDialogTypes";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const HOST_SIGNUP_KEY = "host_signup";
 
@@ -86,7 +86,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             case PostmessageAction.CloseDialog:
                 return this.closeDialog();
         }
-    }
+    };
 
     private maximizeDialog = () => {
         this.setState({
@@ -96,7 +96,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Maximize,
         });
-    }
+    };
 
     private minimizeDialog = () => {
         this.setState({
@@ -106,7 +106,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Minimize,
         });
-    }
+    };
 
     private closeDialog = async () => {
         window.removeEventListener("message", this.messageHandler);
@@ -114,7 +114,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         PersistedElement.destroyElement("host_signup");
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
-    }
+    };
 
     private onCloseClick = async () => {
         if (this.state.completed) {
@@ -137,16 +137,16 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 },
             );
         }
-    }
+    };
 
     private sendMessage = (message: IPostmessageResponseData) => {
         this.iframeRef.current.contentWindow.postMessage(message, this.config.url);
-    }
+    };
 
     private async sendAccountDetails() {
         const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
         if (!openIdToken || !openIdToken.access_token) {
-            console.warn("Failed to connect to homeserver for OpenID token.")
+            console.warn("Failed to connect to homeserver for OpenID token.");
             this.setState({
                 completed: true,
                 error: _t("Failed to connect to your homeserver. Please close this dialog and try again."),
@@ -171,7 +171,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             return this.sendAccountDetails();
         }
         return this.closeDialog();
-    }
+    };
 
     private onAccountDetailsRequest = () => {
         const textComponent = (
@@ -215,7 +215,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 onFinished: this.onAccountDetailsDialogFinished,
             },
         );
-    }
+    };
 
     public componentDidMount() {
         window.addEventListener("message", this.messageHandler);
diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js
index 5df02d7a6f..d919b61d38 100644
--- a/src/components/views/dialogs/IncomingSasDialog.js
+++ b/src/components/views/dialogs/IncomingSasDialog.js
@@ -16,11 +16,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 const PHASE_START = 0;
 const PHASE_SHOW_SAS = 1;
@@ -86,9 +86,9 @@ export default class IncomingSasDialog extends React.Component {
     }
 
     _onContinueClick = () => {
-        this.setState({phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM});
+        this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM });
         this.props.verifier.verify().then(() => {
-            this.setState({phase: PHASE_VERIFIED});
+            this.setState({ phase: PHASE_VERIFIED });
         }).catch((e) => {
             console.log("Verification failed", e);
         });
diff --git a/src/components/views/dialogs/IntegrationsDisabledDialog.js b/src/components/views/dialogs/IntegrationsDisabledDialog.js
index dd7a51420e..1e2ff09196 100644
--- a/src/components/views/dialogs/IntegrationsDisabledDialog.js
+++ b/src/components/views/dialogs/IntegrationsDisabledDialog.js
@@ -16,11 +16,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.IntegrationsDisabledDialog")
 export default class IntegrationsDisabledDialog extends React.Component {
diff --git a/src/components/views/dialogs/IntegrationsImpossibleDialog.js b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
index e14d40aaef..2cf9daa7ea 100644
--- a/src/components/views/dialogs/IntegrationsImpossibleDialog.js
+++ b/src/components/views/dialogs/IntegrationsImpossibleDialog.js
@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.IntegrationsImpossibleDialog")
 export default class IntegrationsImpossibleDialog extends React.Component {
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js
index 28a9bf673a..09da72cab0 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.js
+++ b/src/components/views/dialogs/InteractiveAuthDialog.js
@@ -23,9 +23,9 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
-import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
-import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth";
+import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.InteractiveAuthDialog")
 export default class InteractiveAuthDialog extends React.Component {
@@ -117,7 +117,7 @@ export default class InteractiveAuthDialog extends React.Component {
 
     _onUpdateStagePhase = (newStage, newPhase) => {
         // We copy the stage and stage phase params into state for title selection in render()
-        this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
+        this.setState({ uiaStage: newStage, uiaStagePhase: newPhase });
     };
 
     _onDismissClick = () => {
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 553c1c544e..d9dcb8fe00 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -426,8 +426,8 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     }
 
     private onConsultFirstChange = (ev) => {
-        this.setState({consultFirst: ev.target.checked});
-    }
+        this.setState({ consultFirst: ev.target.checked });
+    };
 
     public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
@@ -482,7 +482,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 continue;
             }
 
-            recents.push({userId, user: member, lastActive: lastEventTs});
+            recents.push({ userId, user: member, lastActive: lastEventTs });
         }
         if (!recents) console.warn("[Invite:Recents] No recents to suggest!");
 
@@ -590,7 +590,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             const scoreBoost = Math.max(1, inverseTime / (15 * 60 * 1000)); // 15min segments to keep scores sane
 
             let record = memberScores[userId];
-            if (!record) record = memberScores[userId] = {score: 0};
+            if (!record) record = memberScores[userId] = { score: 0 };
             record.member = member;
             record.score += scoreBoost;
         }
@@ -607,7 +607,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return b.score - a.score;
         });
 
-        return members.map(m => ({userId: m.member.userId, user: m.member}));
+        return members.map(m => ({ userId: m.member.userId, user: m.member }));
     }
 
     private shouldAbortAfterInviteError(result: IInviteResult, room: Room): boolean {
@@ -623,18 +623,18 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         let newMember: Member;
         if (this.state.filterText.startsWith('@')) {
             // Assume mxid
-            newMember = new DirectoryMember({user_id: this.state.filterText, display_name: null, avatar_url: null});
+            newMember = new DirectoryMember({ user_id: this.state.filterText, display_name: null, avatar_url: null });
         } else if (SettingsStore.getValue(UIFeature.IdentityServer)) {
             // Assume email
             newMember = new ThreepidMember(this.state.filterText);
         }
         const newTargets = [...(this.state.targets || []), newMember];
-        this.setState({targets: newTargets, filterText: ''});
+        this.setState({ targets: newTargets, filterText: '' });
         return newTargets;
     }
 
     private startDm = async () => {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         const client = MatrixClientPeg.get();
         const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
@@ -657,7 +657,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             return;
         }
 
-        const createRoomOptions = {inlineErrors: true} as any; // XXX: Type out `createRoomOptions`
+        const createRoomOptions = { inlineErrors: true } as any; // XXX: Type out `createRoomOptions`
 
         if (privateShouldBeEncrypted()) {
             // Check whether all users have uploaded device keys before.
@@ -696,7 +696,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         return roomOptions;
                     },
                     { invite: [], invite_3pid: [] },
-                )
+                );
             }
 
             await createRoom(createRoomOptions);
@@ -712,7 +712,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     private inviteUsers = async () => {
         const startTime = CountlyAnalytics.getTimestamp();
-        this.setState({busy: true});
+        this.setState({ busy: true });
         this.convertFilter();
         const targets = this.convertFilter();
         const targetIds = targets.map(t => t.userId);
@@ -729,7 +729,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
 
         try {
-            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds);
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this.shouldAbortAfterInviteError(result, room)) { // handles setting error message too
                 this.props.onFinished();
@@ -792,10 +792,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             });
             this.props.onFinished();
         } else {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             try {
                 await this.props.call.transfer(targetIds[0]);
-                this.setState({busy: false});
+                this.setState({ busy: false });
                 this.props.onFinished();
             } catch (e) {
                 this.setState({
@@ -826,7 +826,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private updateSuggestions = async (term) => {
-        MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
+        MatrixClientPeg.get().searchUserDirectory({ term }).then(async r => {
             if (term !== this.state.filterText) {
                 // Discard the results - we were probably too slow on the server-side to make
                 // these results useful. This is a race we want to avoid because we could overwrite
@@ -874,14 +874,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }).catch(e => {
             console.error("Error searching user directory:");
             console.error(e);
-            this.setState({serverResultsMixin: []}); // clear results because it's moderately fatal
+            this.setState({ serverResultsMixin: [] }); // clear results because it's moderately fatal
         });
 
         // Whenever we search the directory, also try to search the identity server. It's
         // all debounced the same anyways.
         if (!this.state.canUseIdentityServer) {
             // The user doesn't have an identity server set - warn them of that.
-            this.setState({tryingIdentityServer: true});
+            this.setState({ tryingIdentityServer: true });
             return;
         }
         if (term.indexOf('@') > 0 && Email.looksValid(term) && SettingsStore.getValue(UIFeature.IdentityServer)) {
@@ -889,7 +889,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             // to a real account.
             this.setState({
                 // per above: the userId is a lie here - it's just a regular identifier
-                threepidResultsMixin: [{user: new ThreepidMember(term), userId: term}],
+                threepidResultsMixin: [{ user: new ThreepidMember(term), userId: term }],
             });
             try {
                 const authClient = new IdentityAuthClient();
@@ -929,14 +929,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
             } catch (e) {
                 console.error("Error searching identity server:");
                 console.error(e);
-                this.setState({threepidResultsMixin: []}); // clear results because it's moderately fatal
+                this.setState({ threepidResultsMixin: [] }); // clear results because it's moderately fatal
             }
         }
     };
 
     private updateFilter = (e) => {
         const term = e.target.value;
-        this.setState({filterText: term});
+        this.setState({ filterText: term });
 
         // Debounce server lookups to reduce spam. We don't clear the existing server
         // results because they might still be vaguely accurate, likewise for races which
@@ -950,11 +950,11 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
     };
 
     private showMoreRecents = () => {
-        this.setState({numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN});
+        this.setState({ numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN });
     };
 
     private showMoreSuggestions = () => {
-        this.setState({numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN});
+        this.setState({ numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN });
     };
 
     private toggleMember = (member: Member) => {
@@ -968,7 +968,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 targets.push(member);
                 filterText = ""; // clear the filter when the user accepts a suggestion
             }
-            this.setState({targets, filterText});
+            this.setState({ targets, filterText });
 
             if (this.editorRef && this.editorRef.current) {
                 this.editorRef.current.focus();
@@ -981,7 +981,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         const idx = targets.indexOf(member);
         if (idx >= 0) {
             targets.splice(idx, 1);
-            this.setState({targets});
+            this.setState({ targets });
         }
 
         if (this.editorRef && this.editorRef.current) {
@@ -1051,13 +1051,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 title: _t('Failed to find the following users'),
                 description: _t(
                     "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s",
-                    {csvNames: failed.join(", ")},
+                    { csvNames: failed.join(", ") },
                 ),
                 button: _t('OK'),
             });
         }
 
-        this.setState({targets: [...this.state.targets, ...toAdd]});
+        this.setState({ targets: [...this.state.targets, ...toAdd] });
     };
 
     private onClickInputArea = (e) => {
@@ -1076,7 +1076,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         // Update the IS in account data. Actually using it may trigger terms.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDefaultIdentityServer();
-        this.setState({canUseIdentityServer: true, tryingIdentityServer: false});
+        this.setState({ canUseIdentityServer: true, tryingIdentityServer: false });
     };
 
     private onManageSettingsClick = (e) => {
@@ -1100,7 +1100,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
         if (kind === 'suggestions' && CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
-            sectionSubname = _t("May include members not in %(communityName)s", {communityName});
+            sectionSubname = _t("May include members not in %(communityName)s", { communityName });
         }
 
         if (this.props.kind === KIND_INVITE) {
@@ -1297,21 +1297,21 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 helpText = _t(
                     "Start a conversation with someone using their name, email address or username (like <userId/>).",
                     {},
-                    {userId: () => {
+                    { userId: () => {
                         return (
                             <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
                         );
-                    }},
+                    } },
                 );
             } else {
                 helpText = _t(
                     "Start a conversation with someone using their name or username (like <userId/>).",
                     {},
-                    {userId: () => {
+                    { userId: () => {
                         return (
                             <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>
                         );
-                    }},
+                    } },
                 );
             }
 
@@ -1320,7 +1320,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 const inviteText = _t(
                     "This won't invite them to %(communityName)s. " +
                     "To invite someone to %(communityName)s, click <a>here</a>",
-                    {communityName}, {
+                    { communityName }, {
                         userId: () => {
                             return (
                                 <a
@@ -1365,7 +1365,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         <div />
                     </AccessibleTooltipButton>
                 </div>
-            </div>
+            </div>;
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
             const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();
diff --git a/src/components/views/dialogs/KeySignatureUploadFailedDialog.js b/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
index bcb4d4f9b9..22487af17c 100644
--- a/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
+++ b/src/components/views/dialogs/KeySignatureUploadFailedDialog.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState, useCallback, useRef} from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
diff --git a/src/components/views/dialogs/LogoutDialog.js b/src/components/views/dialogs/LogoutDialog.js
index 7bced46d43..bd9411358b 100644
--- a/src/components/views/dialogs/LogoutDialog.js
+++ b/src/components/views/dialogs/LogoutDialog.js
@@ -22,7 +22,7 @@ import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.LogoutDialog")
 export default class LogoutDialog extends React.Component {
@@ -85,7 +85,7 @@ export default class LogoutDialog extends React.Component {
 
     _onFinished(confirmed) {
         if (confirmed) {
-            dis.dispatch({action: 'logout'});
+            dis.dispatch({ action: 'logout' });
         }
         // close dialog
         this.props.onFinished();
@@ -112,7 +112,7 @@ export default class LogoutDialog extends React.Component {
     }
 
     _onLogoutConfirm() {
-        dis.dispatch({action: 'logout'});
+        dis.dispatch({ action: 'logout' });
 
         // close dialog
         this.props.onFinished();
diff --git a/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js b/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js
index 3151edd796..4387108fac 100644
--- a/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js
+++ b/src/components/views/dialogs/ManualDeviceKeyVerificationDialog.js
@@ -20,11 +20,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.ManualDeviceKeyVerificationDialog")
 export default class ManualDeviceKeyVerificationDialog extends React.Component {
diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.js b/src/components/views/dialogs/MessageEditHistoryDialog.js
index 64d66fe833..b9225f5932 100644
--- a/src/components/views/dialogs/MessageEditHistoryDialog.js
+++ b/src/components/views/dialogs/MessageEditHistoryDialog.js
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import * as sdk from "../../../index";
-import {wantsDateSeparator} from '../../../DateUtils';
+import { wantsDateSeparator } from '../../../DateUtils';
 import SettingsStore from '../../../settings/SettingsStore';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.MessageEditHistoryDialog")
 export default class MessageEditHistoryDialog extends React.PureComponent {
@@ -46,7 +46,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             // bail out on backwards as we only paginate in one direction
             return false;
         }
-        const opts = {from: this.state.nextBatch};
+        const opts = { from: this.state.nextBatch };
         const roomId = this.props.mxEvent.getRoomId();
         const eventId = this.props.mxEvent.getId();
         const client = MatrixClientPeg.get();
@@ -62,7 +62,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             if (error.errcode) {
                 console.error("fetching /relations failed with error", error);
             }
-            this.setState({error}, () => reject(error));
+            this.setState({ error }, () => reject(error));
             return promise;
         }
 
@@ -131,7 +131,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
     render() {
         let content;
         if (this.state.error) {
-            const {error} = this.state;
+            const { error } = this.state;
             if (error.errcode === "M_UNRECOGNIZED") {
                 content = (<p className="mx_MessageEditHistoryDialog_error">
                     {_t("Your homeserver doesn't seem to support this feature.")}
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index df2ed6b335..6bc84b66b4 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -33,13 +33,13 @@ import {
     WidgetApiFromWidgetAction,
     WidgetKind,
 } from "matrix-widget-api";
-import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import { StopGapWidgetDriver } from "../../../stores/widgets/StopGapWidgetDriver";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {ELEMENT_CLIENT_ID} from "../../../identifiers";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
@@ -81,7 +81,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     public componentDidMount() {
         const driver = new StopGapWidgetDriver( [], this.widget, WidgetKind.Modal);
         const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
-        this.setState({messaging});
+        this.setState({ messaging });
     }
 
     public componentWillUnmount() {
@@ -102,14 +102,14 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
 
     private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
         this.props.onFinished(true, ev.detail.data);
-    }
+    };
 
     private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
         ev.preventDefault();
         const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
         if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
             return this.state.messaging.transport.reply(ev.detail, {
-                error: {message: "Invalid button"},
+                error: { message: "Invalid button" },
             } as IWidgetApiErrorResponseData);
         }
 
@@ -122,7 +122,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             tempSet.add(ev.detail.data.button);
             buttonIds = Array.from(tempSet);
         }
-        this.setState({disabledButtonIds: buttonIds});
+        this.setState({ disabledButtonIds: buttonIds });
         this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
     };
 
@@ -160,7 +160,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                         break;
                     case ModalButtonKind.Secondary:
                         kind = "primary_outline";
-                        break
+                        break;
                     case ModalButtonKind.Danger:
                         kind = "danger";
                         break;
diff --git a/src/components/views/dialogs/NewSessionReviewDialog.js b/src/components/views/dialogs/NewSessionReviewDialog.js
index 5172f29405..749f48ef48 100644
--- a/src/components/views/dialogs/NewSessionReviewDialog.js
+++ b/src/components/views/dialogs/NewSessionReviewDialog.js
@@ -22,7 +22,7 @@ import { replaceableComponent } from '../../../utils/replaceableComponent';
 import VerificationRequestDialog from './VerificationRequestDialog';
 import BaseDialog from './BaseDialog';
 import DialogButtons from '../elements/DialogButtons';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
 
 @replaceableComponent("views.dialogs.NewSessionReviewDialog")
diff --git a/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx b/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
index 3f3ad215a5..98f1a79b4f 100644
--- a/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
+++ b/src/components/views/dialogs/RegistrationEmailPromptDialog.tsx
@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { _t } from '../../../languageHandler';
 import { IDialogProps } from "./IDialogProps";
-import {useRef, useState} from "react";
+import { useRef, useState } from "react";
 import Field from "../elements/Field";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import withValidation from "../elements/Validation";
@@ -40,7 +40,7 @@ const validation = withValidation({
     ],
 });
 
-const RegistrationEmailPromptDialog: React.FC<IProps> = ({onFinished}) => {
+const RegistrationEmailPromptDialog: React.FC<IProps> = ({ onFinished }) => {
     const [email, setEmail] = useState("");
     const fieldRef = useRef<Field>();
 
diff --git a/src/components/views/dialogs/ReportEventDialog.tsx b/src/components/views/dialogs/ReportEventDialog.tsx
index 8271239f7f..81a7d569fe 100644
--- a/src/components/views/dialogs/ReportEventDialog.tsx
+++ b/src/components/views/dialogs/ReportEventDialog.tsx
@@ -19,11 +19,11 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { ensureDMExists } from "../../../createRoom";
 import { IDialogProps } from "./IDialogProps";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import SdkConfig from '../../../SdkConfig';
 import Markdown from '../../../Markdown';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from "../../../settings/SettingsStore";
 import StyledRadioButton from "../elements/StyledRadioButton";
 
@@ -40,7 +40,6 @@ interface IState {
     nature?: EXTENDED_NATURE;
 }
 
-
 const MODERATED_BY_STATE_EVENT_TYPE = [
     "org.matrix.msc3215.room.moderation.moderated_by",
     /**
@@ -75,7 +74,7 @@ type Moderation = {
     moderationRoomId: string;
     // The id of the bot in charge of forwarding abuse reports to the moderation room.
     moderationBotUserId: string;
-}
+};
 /*
  * A dialog for reporting an event.
  *
@@ -162,13 +161,13 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
     }
 
     // The user has written down a freeform description of the abuse.
-    private onReasonChange = ({target: {value: reason}}): void => {
+    private onReasonChange = ({ target: { value: reason } }): void => {
         this.setState({ reason });
     };
 
     // The user has clicked on a nature.
     private onNatureChosen = (e: React.FormEvent<HTMLInputElement>): void => {
-        this.setState({ nature: e.currentTarget.value as EXTENDED_NATURE});
+        this.setState({ nature: e.currentTarget.value as EXTENDED_NATURE });
     };
 
     // The user has clicked "cancel".
diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index 303f17c342..005222a94e 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import TabbedView, {Tab} from "../../structures/TabbedView";
-import {_t, _td} from "../../../languageHandler";
+import TabbedView, { Tab } from "../../structures/TabbedView";
+import { _t, _td } from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
 import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
@@ -25,11 +25,11 @@ import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsT
 import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab";
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
 import * as sdk from "../../../index";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
 export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
@@ -127,7 +127,7 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
                 className='mx_RoomSettingsDialog'
                 hasCancel={true}
                 onFinished={this.props.onFinished}
-                title={_t("Room Settings - %(roomName)s", {roomName})}
+                title={_t("Room Settings - %(roomName)s", { roomName })}
             >
                 <div className='mx_SettingsDialog_content'>
                     <TabbedView
diff --git a/src/components/views/dialogs/RoomUpgradeDialog.js b/src/components/views/dialogs/RoomUpgradeDialog.js
index 8f9ed42ada..90092df7a5 100644
--- a/src/components/views/dialogs/RoomUpgradeDialog.js
+++ b/src/components/views/dialogs/RoomUpgradeDialog.js
@@ -17,10 +17,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.RoomUpgradeDialog")
 export default class RoomUpgradeDialog extends React.Component {
@@ -36,7 +36,7 @@ export default class RoomUpgradeDialog extends React.Component {
     async componentDidMount() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
-        this.setState({busy: false});
+        this.setState({ busy: false });
     }
 
     _onCancelClick = () => {
@@ -44,7 +44,7 @@ export default class RoomUpgradeDialog extends React.Component {
     };
 
     _onUpgradeClick = () => {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
             this.props.onFinished(true);
         }).catch((err) => {
@@ -54,7 +54,7 @@ export default class RoomUpgradeDialog extends React.Component {
                 description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")),
             });
         }).finally(() => {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         });
     };
 
@@ -70,7 +70,7 @@ export default class RoomUpgradeDialog extends React.Component {
             buttons = <DialogButtons
                 primaryButton={_t(
                     'Upgrade this room to version %(version)s',
-                    {version: this._targetVersion},
+                    { version: this._targetVersion },
                 )}
                 primaryButtonClass="danger"
                 hasCancel={true}
diff --git a/src/components/views/dialogs/RoomUpgradeWarningDialog.js b/src/components/views/dialogs/RoomUpgradeWarningDialog.js
index c6ef2c6ae2..c73edcd871 100644
--- a/src/components/views/dialogs/RoomUpgradeWarningDialog.js
+++ b/src/components/views/dialogs/RoomUpgradeWarningDialog.js
@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
 export default class RoomUpgradeWarningDialog extends React.Component {
@@ -46,15 +46,15 @@ export default class RoomUpgradeWarningDialog extends React.Component {
     }
 
     _onContinue = () => {
-        this.props.onFinished({continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom});
+        this.props.onFinished({ continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom });
     };
 
     _onCancel = () => {
-        this.props.onFinished({continue: false, invite: false});
+        this.props.onFinished({ continue: false, invite: false });
     };
 
     _onInviteUsersToggle = (newVal) => {
-        this.setState({inviteUsersToNewRoom: newVal});
+        this.setState({ inviteUsersToNewRoom: newVal });
     };
 
     _openBugReportDialog = (e) => {
@@ -86,7 +86,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
             <p>
                 {_t(
                     "This usually only affects how the room is processed on the server. If you're " +
-                    "having problems with your %(brand)s, please report a bug.", {brand},
+                    "having problems with your %(brand)s, please report a bug.", { brand },
                 )}
             </p>
         );
diff --git a/src/components/views/dialogs/ServerOfflineDialog.tsx b/src/components/views/dialogs/ServerOfflineDialog.tsx
index 52ff056907..ebf32e9131 100644
--- a/src/components/views/dialogs/ServerOfflineDialog.tsx
+++ b/src/components/views/dialogs/ServerOfflineDialog.tsx
@@ -28,7 +28,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { IDialogProps } from "./IDialogProps";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends IDialogProps {
 }
@@ -85,7 +85,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                         {entries}
                     </div>
                 </div>
-            )
+            );
         });
     }
 
@@ -108,7 +108,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                     "Below are some of the most likely reasons.",
                 )}</p>
                 <ul>
-                    <li>{_t("The server (%(serverName)s) took too long to respond.", {serverName})}</li>
+                    <li>{_t("The server (%(serverName)s) took too long to respond.", { serverName })}</li>
                     <li>{_t("Your firewall or anti-virus is blocking the request.")}</li>
                     <li>{_t("A browser extension is preventing the request.")}</li>
                     <li>{_t("The server is offline.")}</li>
diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx
index 11fef9e75d..8dafd8a2bc 100644
--- a/src/components/views/dialogs/ServerPickerDialog.tsx
+++ b/src/components/views/dialogs/ServerPickerDialog.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from "react";
-import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
+import React, { createRef } from "react";
+import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
 
-import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
 import BaseDialog from './BaseDialog';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
@@ -25,8 +25,8 @@ import SdkConfig from "../../../SdkConfig";
 import Field from "../elements/Field";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import TextWithTooltip from "../elements/TextWithTooltip";
-import withValidation, {IFieldState} from "../elements/Validation";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import withValidation, { IFieldState } from "../elements/Validation";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     title?: string;
diff --git a/src/components/views/dialogs/SeshatResetDialog.tsx b/src/components/views/dialogs/SeshatResetDialog.tsx
index 63654ca949..863157ec08 100644
--- a/src/components/views/dialogs/SeshatResetDialog.tsx
+++ b/src/components/views/dialogs/SeshatResetDialog.tsx
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 
-import {IDialogProps} from "./IDialogProps";
+import { IDialogProps } from "./IDialogProps";
 
 @replaceableComponent("views.dialogs.SeshatResetDialog")
 export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index 43e73a2f83..b7037d1f4f 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -22,7 +22,7 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.SessionRestoreErrorDialog")
 export default class SessionRestoreErrorDialog extends React.Component {
diff --git a/src/components/views/dialogs/SetEmailDialog.js b/src/components/views/dialogs/SetEmailDialog.js
index 0f8f410a6a..3dad3821fb 100644
--- a/src/components/views/dialogs/SetEmailDialog.js
+++ b/src/components/views/dialogs/SetEmailDialog.js
@@ -22,8 +22,7 @@ import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Prompt the user to set an email address.
@@ -71,14 +70,14 @@ export default class SetEmailDialog extends React.Component {
                 onFinished: this.onEmailDialogFinished,
             });
         }, (err) => {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
             console.error("Unable to add email address " + emailAddress + " " + err);
             Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
                 title: _t("Unable to add email address"),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         });
-        this.setState({emailBusy: true});
+        this.setState({ emailBusy: true });
     };
 
     onCancelled = () => {
@@ -89,7 +88,7 @@ export default class SetEmailDialog extends React.Component {
         if (ok) {
             this.verifyEmailAddress();
         } else {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
         }
     };
 
@@ -97,7 +96,7 @@ export default class SetEmailDialog extends React.Component {
         this._addThreepid.checkEmailLinkClicked().then(() => {
             this.props.onFinished(true);
         }, (err) => {
-            this.setState({emailBusy: false});
+            this.setState({ emailBusy: false });
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 const message = _t("Unable to verify email address.") + " " +
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index df1206a4f0..fb43db1a25 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -17,24 +17,24 @@ limitations under the License.
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {Room} from "matrix-js-sdk/src/models/room";
-import {User} from "matrix-js-sdk/src/models/user";
-import {Group} from "matrix-js-sdk/src/models/group";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { User } from "matrix-js-sdk/src/models/user";
+import { Group } from "matrix-js-sdk/src/models/group";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import QRCode from "../elements/QRCode";
-import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
-import {toRightOf} from "../../structures/ContextMenu";
-import {copyPlaintext, selectText} from "../../../utils/strings";
+import { toRightOf } from "../../structures/ContextMenu";
+import { copyPlaintext, selectText } from "../../../utils/strings";
 import StyledCheckbox from '../elements/StyledCheckbox';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { IDialogProps } from "./IDialogProps";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const socials = [
     {
@@ -120,7 +120,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         const successful = await copyPlaintext(this.getUrl());
         const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
-        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+        const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
diff --git a/src/components/views/dialogs/SlashCommandHelpDialog.js b/src/components/views/dialogs/SlashCommandHelpDialog.js
index 5b4148e939..608f81a612 100644
--- a/src/components/views/dialogs/SlashCommandHelpDialog.js
+++ b/src/components/views/dialogs/SlashCommandHelpDialog.js
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
-import {CommandCategories, Commands} from "../../../SlashCommands";
+import { _t } from "../../../languageHandler";
+import { CommandCategories, Commands } from "../../../SlashCommands";
 import * as sdk from "../../../index";
 
-export default ({onFinished}) => {
+export default ({ onFinished }) => {
     const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
 
     const categories = {};
diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx
index 5e0cd96740..fe836ebc5c 100644
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -42,7 +42,7 @@ interface IProps extends IDialogProps {
 }
 
 const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFinished }) => {
-    useDispatcher(defaultDispatcher, ({action, ...params}) => {
+    useDispatcher(defaultDispatcher, ({ action, ...params }) => {
         if (action === "after_leave_room" && params.room_id === space.roomId) {
             onFinished(false);
         }
diff --git a/src/components/views/dialogs/StorageEvictedDialog.js b/src/components/views/dialogs/StorageEvictedDialog.js
index 1e17ab1738..c25866b64d 100644
--- a/src/components/views/dialogs/StorageEvictedDialog.js
+++ b/src/components/views/dialogs/StorageEvictedDialog.js
@@ -20,7 +20,7 @@ import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.StorageEvictedDialog")
 export default class StorageEvictedDialog extends React.Component {
diff --git a/src/components/views/dialogs/TermsDialog.tsx b/src/components/views/dialogs/TermsDialog.tsx
index ace5316323..818ac4b9e4 100644
--- a/src/components/views/dialogs/TermsDialog.tsx
+++ b/src/components/views/dialogs/TermsDialog.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
 
 interface ITermsCheckboxProps {
@@ -31,7 +31,7 @@ interface ITermsCheckboxProps {
 class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
     private onChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
-    }
+    };
 
     render() {
         return <input type="checkbox"
@@ -80,11 +80,11 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
 
     private onCancelClick = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onNextClick = (): void => {
         this.props.onFinished(true, Object.keys(this.state.agreedUrls).filter((url) => this.state.agreedUrls[url]));
-    }
+    };
 
     private nameForServiceType(serviceType: SERVICE_TYPES, host: string): JSX.Element {
         switch (serviceType) {
@@ -114,7 +114,7 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         this.setState({
             agreedUrls: Object.assign({}, this.state.agreedUrls, { [url]: checked }),
         });
-    }
+    };
 
     public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 97abd209c0..3d37c89424 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import Field from "../elements/Field";
 import { _t, _td } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.TextInputDialog")
 export default class TextInputDialog extends React.Component {
diff --git a/src/components/views/dialogs/UntrustedDeviceDialog.tsx b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
index da1492e30d..b89293b386 100644
--- a/src/components/views/dialogs/UntrustedDeviceDialog.tsx
+++ b/src/components/views/dialogs/UntrustedDeviceDialog.tsx
@@ -30,7 +30,7 @@ interface IProps extends IDialogProps {
     device: IDevice;
 }
 
-const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) => {
+const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) => {
     let askToVerifyText;
     let newSessionText;
 
@@ -39,7 +39,7 @@ const UntrustedDeviceDialog: React.FC<IProps> = ({device, user, onFinished}) =>
         askToVerifyText = _t("Verify your other session using one of the options below.");
     } else {
         newSessionText = _t("%(name)s (%(userId)s) signed in to a new session without verifying it:",
-            {name: user.displayName, userId: user.userId});
+            { name: user.displayName, userId: user.userId });
         askToVerifyText = _t("Ask this user to verify their session, or manually verify it below.");
     }
 
diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx
index 7f6bcd27d1..5024880c1c 100644
--- a/src/components/views/dialogs/UploadConfirmDialog.tsx
+++ b/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -36,7 +36,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     static defaultProps = {
         totalFiles: 1,
-    }
+    };
 
     constructor(props) {
         super(props);
@@ -56,15 +56,15 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     private onCancelClick = () => {
         this.props.onFinished(false);
-    }
+    };
 
     private onUploadClick = () => {
         this.props.onFinished(true);
-    }
+    };
 
     private onUploadAllClick = () => {
         this.props.onFinished(true, true);
-    }
+    };
 
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
diff --git a/src/components/views/dialogs/UploadFailureDialog.js b/src/components/views/dialogs/UploadFailureDialog.js
index d220d6c684..d26b83d0d6 100644
--- a/src/components/views/dialogs/UploadFailureDialog.js
+++ b/src/components/views/dialogs/UploadFailureDialog.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * Tells the user about files we know cannot be uploaded before we even try uploading
diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
index 1a62a4ff22..2878a07d35 100644
--- a/src/components/views/dialogs/UserSettingsDialog.tsx
+++ b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import TabbedView, {Tab} from "../../structures/TabbedView";
-import {_t, _td} from "../../../languageHandler";
+import TabbedView, { Tab } from "../../structures/TabbedView";
+import { _t, _td } from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore, { CallbackFn } from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
@@ -31,8 +31,8 @@ import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
 import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export enum UserTab {
     General = "USER_GENERAL_TAB",
@@ -78,8 +78,8 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
 
     private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
         // We can cheat because we know what levels a feature is tracked at, and how it is tracked
-        this.setState({mjolnirEnabled: newValue});
-    }
+        this.setState({ mjolnirEnabled: newValue });
+    };
 
     _getTabs() {
         const tabs = [];
diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.js
index 9281275e6a..bf5d63b895 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.js
@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.VerificationRequestDialog")
 export default class VerificationRequestDialog extends React.Component {
@@ -37,7 +37,7 @@ export default class VerificationRequestDialog extends React.Component {
             this.state.verificationRequest = this.props.verificationRequest;
         } else if (this.props.verificationRequestPromise) {
             this.props.verificationRequestPromise.then(r => {
-                this.setState({verificationRequest: r});
+                this.setState({ verificationRequest: r });
             });
         }
     }
diff --git a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 70fe7fe5e3..638d5cde93 100644
--- a/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -29,7 +29,7 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import DialogButtons from "../elements/DialogButtons";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { CapabilityText } from "../../../widgets/CapabilityText";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export function getRememberedCapabilitiesForWidget(widget: Widget): Capability[] {
     return JSON.parse(localStorage.getItem(`widget_${widget.id}_approved_caps`) || "[]");
@@ -77,11 +77,11 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
     private onToggle = (capability: Capability) => {
         const newStates = objectShallowClone(this.state.booleanStates);
         newStates[capability] = !newStates[capability];
-        this.setState({booleanStates: newStates});
+        this.setState({ booleanStates: newStates });
     };
 
     private onRememberSelectionChange = (newVal: boolean) => {
-        this.setState({rememberSelection: newVal});
+        this.setState({ rememberSelection: newVal });
     };
 
     private onSubmit = async (ev) => {
@@ -98,7 +98,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         if (this.state.rememberSelection) {
             setRememberedCapabilitiesForWidget(this.props.widget, approved);
         }
-        this.props.onFinished({approved});
+        this.props.onFinished({ approved });
     }
 
     public render() {
diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
index f77661c54e..2130d0e4ef 100644
--- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
+++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import {Widget} from "matrix-widget-api";
-import {OIDCState, WidgetPermissionStore} from "../../../stores/widgets/WidgetPermissionStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Widget } from "matrix-widget-api";
+import { OIDCState, WidgetPermissionStore } from "../../../stores/widgets/WidgetPermissionStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.WidgetOpenIDPermissionsDialog")
 export default class WidgetOpenIDPermissionsDialog extends React.Component {
@@ -62,7 +62,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.Component {
     }
 
     _onRememberSelectionChange = (newVal) => {
-        this.setState({rememberSelection: newVal});
+        this.setState({ rememberSelection: newVal });
     };
 
     render() {
diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
index e09b39f4c7..d614cc0956 100644
--- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
+++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {debounce} from "lodash";
+import { debounce } from "lodash";
 import classNames from 'classnames';
-import React, {ChangeEvent, FormEvent} from 'react';
-import {ISecretStorageKeyInfo} from "matrix-js-sdk/src";
+import React, { ChangeEvent, FormEvent } from 'react';
+import { ISecretStorageKeyInfo } from "matrix-js-sdk/src";
 
 import * as sdk from '../../../../index';
-import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import Field from '../../elements/Field';
 import AccessibleButton from '../../elements/AccessibleButton';
-import {_t} from '../../../../languageHandler';
-import {IDialogProps} from "../IDialogProps";
-import {accessSecretStorage} from "../../../../SecurityManager";
+import { _t } from '../../../../languageHandler';
+import { IDialogProps } from "../IDialogProps";
+import { accessSecretStorage } from "../../../../SecurityManager";
 import Modal from "../../../../Modal";
 
 // Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
@@ -75,7 +75,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
     private onCancel = () => {
         if (this.state.resetting) {
-            this.setState({resetting: false});
+            this.setState({ resetting: false });
         }
         this.props.onFinished(false);
     };
@@ -169,7 +169,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
     private onRecoveryKeyFileUploadClick = () => {
         this.fileUpload.current.click();
-    }
+    };
 
     private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
         ev.preventDefault();
@@ -210,7 +210,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
     private onResetAllClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
         ev.preventDefault();
-        this.setState({resetting: true});
+        this.setState({ resetting: true });
     };
 
     private onConfirmResetAllClick = async () => {
@@ -231,7 +231,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                     authUploadDeviceSigningKeys: async (makeRequest) => {
                         // XXX: Making this an import breaks the app.
                         const InteractiveAuthDialog = sdk.getComponent("views.dialogs.InteractiveAuthDialog");
-                        const {finished} = Modal.createTrackedDialog(
+                        const { finished } = Modal.createTrackedDialog(
                             'Cross-signing keys dialog', '', InteractiveAuthDialog,
                             {
                                 title: _t("Setting up keys"),
diff --git a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
index 840390f6fb..b6a95e7a89 100644
--- a/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
+++ b/src/components/views/dialogs/security/CreateCrossSigningDialog.tsx
@@ -139,7 +139,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
                 throw new Error("Cross-signing key upload auth canceled");
             }
         }
-    }
+    };
 
     private bootstrapCrossSigning = async (): Promise<void> => {
         this.setState({
@@ -163,11 +163,11 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
             this.setState({ error: e });
             console.error("Error bootstrapping cross-signing", e);
         }
-    }
+    };
 
     private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     render() {
         let content;
diff --git a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
index 4ac15ab5a3..5f21033d29 100644
--- a/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/security/RestoreKeyBackupDialog.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
-import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../SecurityManager';
@@ -327,11 +327,11 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
                     "Failed to decrypt %(failedCount)s sessions!",
-                    {failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported},
+                    { failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported },
                 )}</p>;
             }
             content = <div>
-                <p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p>
+                <p>{_t("Successfully restored %(sessionCount)s keys", { sessionCount: this.state.recoverInfo.imported })}</p>
                 {failedToDecrypt}
                 <DialogButtons primaryButton={_t('OK')}
                     onPrimaryButtonClick={this._onDone}
diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
index 19c7af01ff..2f4e70c5dd 100644
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
@@ -19,7 +19,7 @@ import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
 import BaseDialog from '../BaseDialog';
 import { _t } from '../../../../languageHandler';
 import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
 function iconFromPhase(phase: Phase) {
     if (phase === Phase.Done) {
@@ -45,7 +45,7 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
         super(props);
 
         this.store = SetupEncryptionStore.sharedInstance();
-        this.state = {icon: iconFromPhase(this.store.phase)};
+        this.state = { icon: iconFromPhase(this.store.phase) };
     }
 
     public componentDidMount() {
@@ -57,7 +57,7 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
     }
 
     private onStoreUpdate = (): void => {
-        this.setState({icon: iconFromPhase(this.store.phase)});
+        this.setState({ icon: iconFromPhase(this.store.phase) });
     };
 
     public render() {
diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx
index c805ee42e7..04caa7dab5 100644
--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@@ -186,10 +186,10 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
                 });
             }
 
-            protocolsList.forEach(({instances=[]}) => {
+            protocolsList.forEach(({ instances=[] }) => {
                 [...instances].sort((b, a) => {
                     return compare(a.desc, b.desc);
-                }).forEach(({desc, instance_id: instanceId}) => {
+                }).forEach(({ desc, instance_id: instanceId }) => {
                     entries.push(
                         <MenuItemRadio
                             key={String(instanceId)}
@@ -216,7 +216,7 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
             if (removableServers.has(server)) {
                 const onClick = async () => {
                     closeMenu();
-                    const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
+                    const { finished } = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
                         title: _t("Are you sure?"),
                         description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
                             serverName: server,
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index 05bcca24b2..997bbcb9c2 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import {Key} from '../../../Keyboard';
+import { Key } from '../../../Keyboard';
 import classnames from 'classnames';
 
 export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index a1743da475..8ac41ad1a2 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -19,8 +19,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip, {Alignment} from './Tooltip';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Tooltip, { Alignment } from './Tooltip';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
@@ -67,7 +67,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props} = this.props;
+        const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props } = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 5013bcec0d..cb15d54cc8 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.js
@@ -20,7 +20,7 @@ import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.ActionButton")
 export default class ActionButton extends React.Component {
@@ -47,18 +47,18 @@ export default class ActionButton extends React.Component {
     _onClick = (ev) => {
         ev.stopPropagation();
         Analytics.trackEvent('Action Button', 'click', this.props.action);
-        dis.dispatch({action: this.props.action});
+        dis.dispatch({ action: this.props.action });
     };
 
     _onMouseEnter = () => {
-        if (this.props.tooltip) this.setState({showTooltip: true});
+        if (this.props.tooltip) this.setState({ showTooltip: true });
         if (this.props.mouseOverAction) {
-            dis.dispatch({action: this.props.mouseOverAction});
+            dis.dispatch({ action: this.props.mouseOverAction });
         }
     };
 
     _onMouseLeave = () => {
-        this.setState({showTooltip: false});
+        this.setState({ showTooltip: false });
     };
 
     render() {
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 33b2906870..b7c9124438 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.AddressSelector")
 export default class AddressSelector extends React.Component {
diff --git a/src/components/views/elements/AppPermission.js b/src/components/views/elements/AppPermission.js
index 65e40ef19a..152d3c6b95 100644
--- a/src/components/views/elements/AppPermission.js
+++ b/src/components/views/elements/AppPermission.js
@@ -23,8 +23,8 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import WidgetUtils from "../../../utils/WidgetUtils";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.AppPermission")
 export default class AppPermission extends React.Component {
@@ -115,9 +115,9 @@ export default class AppPermission extends React.Component {
         // Due to i18n limitations, we can't dedupe the code for variables in these two messages.
         const warning = this.state.isWrapped
             ? _t("Using this widget may share data <helpIcon /> with %(widgetDomain)s & your Integration Manager.",
-                {widgetDomain: this.state.widgetDomain}, {helpIcon: () => warningTooltip})
+                { widgetDomain: this.state.widgetDomain }, { helpIcon: () => warningTooltip })
             : _t("Using this widget may share data <helpIcon /> with %(widgetDomain)s.",
-                {widgetDomain: this.state.widgetDomain}, {helpIcon: () => warningTooltip});
+                { widgetDomain: this.state.widgetDomain }, { helpIcon: () => warningTooltip });
 
         const encryptionWarning = this.props.isRoomEncrypted ? _t("Widgets do not use message encryption.") : null;
 
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 3fa43ee9c2..f5d3aaf9eb 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -18,9 +18,9 @@ limitations under the License.
 */
 
 import url from 'url';
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
 import AppPermission from './AppPermission';
@@ -30,15 +30,15 @@ import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import SettingsStore from "../../../settings/SettingsStore";
-import {aboveLeftOf, ContextMenuButton} from "../../structures/ContextMenu";
-import PersistedElement, {getPersistKey} from "./PersistedElement";
-import {WidgetType} from "../../../widgets/WidgetType";
-import {StopGapWidget} from "../../../stores/widgets/StopGapWidget";
-import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions";
-import {MatrixCapabilities} from "matrix-widget-api";
+import { aboveLeftOf, ContextMenuButton } from "../../structures/ContextMenu";
+import PersistedElement, { getPersistKey } from "./PersistedElement";
+import { WidgetType } from "../../../widgets/WidgetType";
+import { StopGapWidget } from "../../../stores/widgets/StopGapWidget";
+import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
+import { MatrixCapabilities } from "matrix-widget-api";
 import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu";
 import WidgetAvatar from "../avatars/WidgetAvatar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.AppTile")
 export default class AppTile extends React.Component {
@@ -164,7 +164,7 @@ export default class AppTile extends React.Component {
 
     _startWidget() {
         this._sgWidget.prepare().then(() => {
-            this.setState({initialising: false});
+            this.setState({ initialising: false });
         });
     }
 
@@ -213,17 +213,17 @@ export default class AppTile extends React.Component {
         }
 
         if (WidgetType.JITSI.matches(this.props.app.type)) {
-            dis.dispatch({action: 'hangup_conference'});
+            dis.dispatch({ action: 'hangup_conference' });
         }
 
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        if (this._sgWidget) this._sgWidget.stop({forceDestroy: true});
+        if (this._sgWidget) this._sgWidget.stop({ forceDestroy: true });
     }
 
     _onWidgetPrepared = () => {
-        this.setState({loading: false});
+        this.setState({ loading: false });
     };
 
     _onWidgetReady = () => {
@@ -237,7 +237,7 @@ export default class AppTile extends React.Component {
             switch (payload.action) {
                 case 'm.sticker':
                     if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) {
-                        dis.dispatch({action: 'post_sticker_message', data: payload.data});
+                        dis.dispatch({ action: 'post_sticker_message', data: payload.data });
                     } else {
                         console.warn('Ignoring sticker message. Invalid capability');
                     }
@@ -253,7 +253,7 @@ export default class AppTile extends React.Component {
         current[this.props.app.eventId] = true;
         const level = SettingsStore.firstSupportedLevel("allowedWidgets");
         SettingsStore.setValue("allowedWidgets", roomId, level, current).then(() => {
-            this.setState({hasPermissionToLoad: true});
+            this.setState({ hasPermissionToLoad: true });
 
             // Fetch a token for the integration manager, now that we're allowed to
             this._startWidget();
@@ -313,7 +313,7 @@ export default class AppTile extends React.Component {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener'}).click();
+            { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
     };
 
     _onContextMenuClick = () => {
@@ -416,11 +416,11 @@ export default class AppTile extends React.Component {
 
         let appTileClasses;
         if (this.props.miniMode) {
-            appTileClasses = {mx_AppTile_mini: true};
+            appTileClasses = { mx_AppTile_mini: true };
         } else if (this.props.fullWidth) {
-            appTileClasses = {mx_AppTileFullWidth: true};
+            appTileClasses = { mx_AppTileFullWidth: true };
         } else {
-            appTileClasses = {mx_AppTile: true};
+            appTileClasses = { mx_AppTile: true };
         }
         appTileClasses = classNames(appTileClasses);
 
@@ -443,7 +443,7 @@ export default class AppTile extends React.Component {
             <div className={appTileClasses} id={this.props.app.id}>
                 { this.props.showMenubar &&
                 <div className="mx_AppTileMenuBar">
-                    <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
+                    <span className="mx_AppTileMenuBarTitle" style={{ pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false) }}>
                         { this.props.showTitle && this._getTileTitle() }
                     </span>
                     <span className="mx_AppTileMenuBarWidgets">
diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx
index 426554f31e..c97a9b6cef 100644
--- a/src/components/views/elements/DesktopBuildsNotice.tsx
+++ b/src/components/views/elements/DesktopBuildsNotice.tsx
@@ -22,7 +22,6 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserSettingsDialog";
 
-
 export enum WarningKind {
     Files,
     Search,
@@ -33,7 +32,7 @@ interface IProps {
     kind: WarningKind;
 }
 
-export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
+export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
     if (!isRoomEncrypted) return null;
     if (EventIndexPeg.get()) return null;
 
@@ -53,7 +52,7 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
         </>;
     }
 
-    const {desktopBuilds, brand} = SdkConfig.get();
+    const { desktopBuilds, brand } = SdkConfig.get();
 
     let text = null;
     let logo = null;
@@ -74,10 +73,10 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
     } else {
         switch (kind) {
             case WarningKind.Files:
-                text = _t("This version of %(brand)s does not support viewing some encrypted files", {brand});
+                text = _t("This version of %(brand)s does not support viewing some encrypted files", { brand });
                 break;
             case WarningKind.Search:
-                text = _t("This version of %(brand)s does not support searching encrypted messages", {brand});
+                text = _t("This version of %(brand)s does not support searching encrypted messages", { brand });
                 break;
         }
     }
diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx
index 2d066a7ed7..8f9b847f4f 100644
--- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx
+++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx
@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import BaseDialog from "..//dialogs/BaseDialog"
+import BaseDialog from "..//dialogs/BaseDialog";
 import AccessibleButton from './AccessibleButton';
-import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export interface DesktopCapturerSource {
     id: string;
@@ -44,7 +44,7 @@ export class ExistingSource extends React.Component<DesktopCapturerSourceIProps>
 
     onClick = (ev) => {
         this.props.onSelect(this.props.source);
-    }
+    };
 
     render() {
         return (
@@ -108,19 +108,19 @@ export default class DesktopCapturerSourcePicker extends React.Component<
 
     onSelect = (source) => {
         this.props.onFinished(source);
-    }
+    };
 
     onScreensClick = (ev) => {
-        this.setState({selectedTab: Tabs.Screens});
-    }
+        this.setState({ selectedTab: Tabs.Screens });
+    };
 
     onWindowsClick = (ev) => {
-        this.setState({selectedTab: Tabs.Windows});
-    }
+        this.setState({ selectedTab: Tabs.Windows });
+    };
 
     onCloseClick = (ev) => {
         this.props.onFinished(null);
-    }
+    };
 
     render() {
         let sources;
diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js
index dcb1cee077..af68260563 100644
--- a/src/components/views/elements/DialogButtons.js
+++ b/src/components/views/elements/DialogButtons.js
@@ -19,7 +19,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /**
  * Basic container for buttons in modal dialogs.
diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js
index 6447bb3cd8..45270ada64 100644
--- a/src/components/views/elements/DirectorySearchBox.js
+++ b/src/components/views/elements/DirectorySearchBox.js
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.DirectorySearchBox")
 export default class DirectorySearchBox extends React.Component {
@@ -42,7 +42,7 @@ export default class DirectorySearchBox extends React.Component {
     }
 
     _onClearClick() {
-        this.setState({value: ''});
+        this.setState({ value: '' });
 
         if (this.input) {
             this.input.focus();
@@ -55,7 +55,7 @@ export default class DirectorySearchBox extends React.Component {
 
     _onChange(ev) {
         if (!this.input) return;
-        this.setState({value: ev.target.value});
+        this.setState({ value: ev.target.value });
 
         if (this.props.onChange) {
             this.props.onChange(ev.target.value);
diff --git a/src/components/views/elements/Draggable.tsx b/src/components/views/elements/Draggable.tsx
index 6032721a48..03dccadcb9 100644
--- a/src/components/views/elements/Draggable.tsx
+++ b/src/components/views/elements/Draggable.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     className: string;
diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js
index 981c0becc0..f95247e9ae 100644
--- a/src/components/views/elements/Dropdown.js
+++ b/src/components/views/elements/Dropdown.js
@@ -16,13 +16,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
-import {Key} from "../../../Keyboard";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 class MenuOption extends React.Component {
     constructor(props) {
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 7c38ac1777..6dbc8b8771 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {Key} from "../../../Keyboard";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.EditableText")
 export default class EditableText extends React.Component {
@@ -209,7 +209,7 @@ export default class EditableText extends React.Component {
     };
 
     render() {
-        const {className, editable, initialValue, label, labelClassName} = this.props;
+        const { className, editable, initialValue, label, labelClassName } = this.props;
         let editableEl;
 
         if (!editable || (this.state.phase === EditableText.Phases.Display &&
diff --git a/src/components/views/elements/EditableTextContainer.js b/src/components/views/elements/EditableTextContainer.js
index e925220089..5778446355 100644
--- a/src/components/views/elements/EditableTextContainer.js
+++ b/src/components/views/elements/EditableTextContainer.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /**
  * A component which wraps an EditableText, with a spinner while updates take
@@ -50,7 +50,7 @@ export default class EditableTextContainer extends React.Component {
             return;
         }
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
 
         this.props.getInitialValue().then(
             (result) => {
@@ -144,7 +144,6 @@ EditableTextContainer.propTypes = {
     blurToSubmit: PropTypes.bool,
 };
 
-
 EditableTextContainer.defaultProps = {
     initialValue: "",
     placeholder: "",
diff --git a/src/components/views/elements/EffectsOverlay.tsx b/src/components/views/elements/EffectsOverlay.tsx
index 00d9d147f1..9e6833696f 100644
--- a/src/components/views/elements/EffectsOverlay.tsx
+++ b/src/components/views/elements/EffectsOverlay.tsx
@@ -17,7 +17,7 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import { CHAT_EFFECTS } from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects';
 import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
@@ -32,7 +32,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         if (!name) return null;
         let effect: ICanvasEffect | null = effectsRef.current[name] || null;
         if (effect === null) {
-            const options = CHAT_EFFECTS.find((e) => e.command === name)?.options
+            const options = CHAT_EFFECTS.find((e) => e.command === name)?.options;
             try {
                 const { default: Effect } = await import(`../../../effects/${name}`);
                 effect = new Effect(options);
@@ -56,7 +56,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 const effect = payload.action.substr(actionPrefix.length);
                 lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
             }
-        }
+        };
         const dispatcherRef = dis.register(onAction);
         const canvas = canvasRef.current;
         canvas.height = UIStore.instance.windowHeight;
@@ -89,7 +89,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 right: 0,
             }}
         />
-    )
-}
+    );
+};
 
 export default EffectsOverlay;
diff --git a/src/components/views/elements/ErrorBoundary.js b/src/components/views/elements/ErrorBoundary.js
index 9037287f49..68281c43e5 100644
--- a/src/components/views/elements/ErrorBoundary.js
+++ b/src/components/views/elements/ErrorBoundary.js
@@ -17,11 +17,11 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /**
  * This error boundary component can be used to wrap large content areas and
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index 86d3e082ad..cfafc2b8c0 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactChildren, useEffect} from 'react';
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import React, { ReactChildren, useEffect } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
-import {useStateToggle} from "../../../hooks/useStateToggle";
+import { useStateToggle } from "../../../hooks/useStateToggle";
 import AccessibleButton from "./AccessibleButton";
 
 interface IProps {
diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 332f3ac333..68a70133e6 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -73,7 +73,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         };
     }
 
-    private fakeEvent({message}: IState) {
+    private fakeEvent({ message }: IState) {
         // Fake it till we make it
         /* eslint-disable quote-props */
         const rawEvent = {
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 1373c2df0e..297044e422 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
+import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
-import {debounce} from "lodash";
-import {IFieldState, IValidationResult} from "./Validation";
+import { debounce } from "lodash";
+import { IFieldState, IValidationResult } from "./Validation";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -222,7 +222,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { element, prefixComponent, postfixComponent, className, onValidate, children,
             tooltipContent, forceValidity, tooltipClassName, list, validateOnBlur, validateOnChange, validateOnFocus,
-            ...inputProps} = this.props;
+            ...inputProps } = this.props;
 
         // Set some defaults for the <input> element
         const ref = input => this.input = input;
@@ -234,7 +234,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         inputProps.onBlur = this.onBlur;
 
         // Appease typescript's inference
-        const inputProps_ = {...inputProps, ref, list};
+        const inputProps_ = { ...inputProps, ref, list };
 
         const fieldInput = React.createElement(this.props.element, inputProps_, children);
 
diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js
index 23858b860d..873d65d5bd 100644
--- a/src/components/views/elements/Flair.js
+++ b/src/components/views/elements/Flair.js
@@ -19,9 +19,8 @@ import PropTypes from 'prop-types';
 import FlairStore from '../../../stores/FlairStore';
 import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
-
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 class FlairAvatar extends React.Component {
     constructor() {
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index cd1ccf2fc4..13e8ae2ae2 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
-import Draggable, {ILocationState} from './Draggable';
+import Draggable, { ILocationState } from './Draggable';
 import { SettingLevel } from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Current room
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 4812817359..74538d2fa9 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -30,7 +30,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
 
@@ -116,7 +116,7 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private recalculateZoom = () => {
         this.setZoomAndRotation();
-    }
+    };
 
     private setZoomAndRotation = (inputRotation?: number) => {
         const image = this.image.current;
@@ -158,7 +158,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             rotation: rotation,
             zoom: zoom,
         });
-    }
+    };
 
     private zoom(delta: number) {
         const newZoom = this.state.zoom + delta;
diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx
index d49090dbae..de82c5daeb 100644
--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -18,9 +18,9 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 
-import Tooltip, {Alignment} from './Tooltip';
-import {_t} from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Tooltip, { Alignment } from './Tooltip';
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface ITooltipProps {
     tooltip?: React.ReactNode;
@@ -53,7 +53,7 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
     };
 
     render() {
-        const {tooltip, children, tooltipClassName} = this.props;
+        const { tooltip, children, tooltipClassName } = this.props;
         const title = _t("Information");
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
diff --git a/src/components/views/elements/InlineSpinner.tsx b/src/components/views/elements/InlineSpinner.tsx
index b7d0829acd..a98e03502b 100644
--- a/src/components/views/elements/InlineSpinner.tsx
+++ b/src/components/views/elements/InlineSpinner.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import {_t} from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     w?: number;
@@ -29,14 +29,14 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
     static defaultProps = {
         w: 16,
         h: 16,
-    }
+    };
 
     render() {
         return (
             <div className="mx_InlineSpinner">
                 <div
                     className="mx_InlineSpinner_icon mx_Spinner_icon"
-                    style={{width: this.props.w, height: this.props.h}}
+                    style={{ width: this.props.w, height: this.props.h }}
                     aria-label={_t("Loading...")}
                 >
                     {this.props.children}
diff --git a/src/components/views/elements/InviteReason.tsx b/src/components/views/elements/InviteReason.tsx
index ddce7552ed..d684f61859 100644
--- a/src/components/views/elements/InviteReason.tsx
+++ b/src/components/views/elements/InviteReason.tsx
@@ -42,7 +42,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         this.setState({
             hidden: false,
         });
-    }
+    };
 
     render() {
         const classes = classNames({
diff --git a/src/components/views/elements/LabelledToggleSwitch.tsx b/src/components/views/elements/LabelledToggleSwitch.tsx
index d97b698fd8..14853ea117 100644
--- a/src/components/views/elements/LabelledToggleSwitch.tsx
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 
 import ToggleSwitch from "./ToggleSwitch";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The value for the toggle switch
diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.js
index 9420061a74..3f17a78629 100644
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.js
@@ -22,7 +22,7 @@ import * as sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
@@ -49,9 +49,9 @@ export default class LanguageDropdown extends React.Component {
                 if (a.label > b.label) return 1;
                 return 0;
             });
-            this.setState({langs});
+            this.setState({ langs });
         }).catch(() => {
-            this.setState({langs: ['en']});
+            this.setState({ langs: ['en'] });
         });
 
         if (!this.props.value) {
diff --git a/src/components/views/elements/LazyRenderList.js b/src/components/views/elements/LazyRenderList.js
index f2c8148cd2..070d9bcc8d 100644
--- a/src/components/views/elements/LazyRenderList.js
+++ b/src/components/views/elements/LazyRenderList.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from 'prop-types';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 class ItemRange {
     constructor(topCount, renderCount, bottomCount) {
@@ -72,13 +72,13 @@ export default class LazyRenderList extends React.Component {
         // only update render Range if the list has shrunk/grown and we need to adjust padding OR
         // if the new range + overflowMargin isn't contained by the old anymore
         if (listHasChangedSize || !state.renderRange || !state.renderRange.contains(intersectRange)) {
-            return {renderRange};
+            return { renderRange };
         }
         return null;
     }
 
     static getVisibleRangeFromProps(props) {
-        const {items, itemHeight, scrollTop, height} = props;
+        const { items, itemHeight, scrollTop, height } = props;
         const length = items ? items.length : 0;
         const topCount = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), length);
         const itemsAfterTop = length - topCount;
@@ -89,9 +89,9 @@ export default class LazyRenderList extends React.Component {
     }
 
     render() {
-        const {itemHeight, items, renderItem} = this.props;
-        const {renderRange} = this.state;
-        const {topCount, renderCount, bottomCount} = renderRange;
+        const { itemHeight, items, renderItem } = this.props;
+        const { renderRange } = this.state;
+        const { topCount, renderCount, bottomCount } = renderRange;
 
         const paddingTop = topCount * itemHeight;
         const paddingBottom = bottomCount * itemHeight;
@@ -102,7 +102,7 @@ export default class LazyRenderList extends React.Component {
 
         const element = this.props.element || "div";
         const elementProps = {
-            "style": {paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px`},
+            "style": { paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px` },
             "className": this.props.className,
         };
         return React.createElement(element, elementProps, renderedItems.map(renderItem));
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 32ef0d4da2..83fc1ebefd 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useRef, useState} from 'react';
-import {EventType} from 'matrix-js-sdk/src/@types/event';
+import React, { useContext, useRef, useState } from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {useTimeout} from "../../../hooks/useTimeout";
+import { useTimeout } from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
 import CountlyAnalytics from '../../../CountlyAnalytics';
 import RoomContext from "../../../contexts/RoomContext";
@@ -52,7 +52,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
 
     const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
 
-    const {room} = useContext(RoomContext);
+    const { room } = useContext(RoomContext);
     const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
     if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>;
 
diff --git a/src/components/views/elements/PersistentApp.js b/src/components/views/elements/PersistentApp.js
index 5df373e4fe..763ab63487 100644
--- a/src/components/views/elements/PersistentApp.js
+++ b/src/components/views/elements/PersistentApp.js
@@ -20,8 +20,8 @@ import RoomViewStore from '../../../stores/RoomViewStore';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.PersistentApp")
 export default class PersistentApp extends React.Component {
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index ace41db39d..ba166ccfc6 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -20,14 +20,14 @@ import classNames from 'classnames';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";
-import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks";
+import { getPrimaryPermalinkEntity, parseAppLocalLink } from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {Action} from "../../../dispatcher/actions";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { Action } from "../../../dispatcher/actions";
+import { mediaFromMxc } from "../../../customisations/Media";
 import Tooltip from './Tooltip';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.Pill")
 class Pill extends React.Component {
@@ -144,7 +144,7 @@ class Pill extends React.Component {
                 }
             }
         }
-        this.setState({resourceId, pillType, member, group, room});
+        this.setState({ resourceId, pillType, member, group, room });
     }
 
     componentDidMount() {
@@ -180,13 +180,13 @@ class Pill extends React.Component {
             member.rawDisplayName = resp.displayname;
             member.events.member = {
                 getContent: () => {
-                    return {avatar_url: resp.avatar_url};
+                    return { avatar_url: resp.avatar_url };
                 },
                 getDirectionalContent: function() {
                     return this.getContent();
                 },
             };
-            this.setState({member});
+            this.setState({ member });
         }).catch((err) => {
             console.error('Could not retrieve profile data for ' + userId + ':', err);
         });
@@ -253,7 +253,7 @@ class Pill extends React.Component {
                 break;
             case Pill.TYPE_GROUP_MENTION: {
                 if (this.state.group) {
-                    const {avatarUrl, groupId, name} = this.state.group;
+                    const { avatarUrl, groupId, name } = this.state.group;
 
                     linkText = groupId;
                     if (this.props.shouldShowPillAvatar) {
@@ -273,7 +273,7 @@ class Pill extends React.Component {
         });
 
         if (this.state.pillType) {
-            const {yOffset} = this.props;
+            const { yOffset } = this.props;
 
             let tip;
             if (this.state.hover && resource) {
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index a7a65425a3..ef449df295 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -19,8 +19,8 @@ import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
-import {Key} from "../../../Keyboard";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.PowerSelector")
 export default class PowerSelector extends React.Component {
@@ -97,15 +97,15 @@ export default class PowerSelector extends React.Component {
     onSelectChange = event => {
         const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
         if (isCustom) {
-            this.setState({custom: true});
+            this.setState({ custom: true });
         } else {
             this.props.onChange(event.target.value, this.props.powerLevelKey);
-            this.setState({selectValue: event.target.value});
+            this.setState({ selectValue: event.target.value });
         }
     };
 
     onCustomChange = event => {
-        this.setState({customValue: event.target.value});
+        this.setState({ customValue: event.target.value });
     };
 
     onCustomBlur = event => {
diff --git a/src/components/views/elements/ProgressBar.tsx b/src/components/views/elements/ProgressBar.tsx
index 90832e5006..c4ff06e04e 100644
--- a/src/components/views/elements/ProgressBar.tsx
+++ b/src/components/views/elements/ProgressBar.tsx
@@ -21,7 +21,7 @@ interface IProps {
     max: number;
 }
 
-const ProgressBar: React.FC<IProps> = ({value, max}) => {
+const ProgressBar: React.FC<IProps> = ({ value, max }) => {
     return <progress className="mx_ProgressBar" max={max} value={value} />;
 };
 
diff --git a/src/components/views/elements/QRCode.tsx b/src/components/views/elements/QRCode.tsx
index 9ce3dc7202..50b12ae23d 100644
--- a/src/components/views/elements/QRCode.tsx
+++ b/src/components/views/elements/QRCode.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import * as React from "react";
-import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import { toDataURL, QRCodeSegment, QRCodeToDataURLOptions } from "qrcode";
 import classNames from "classnames";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import Spinner from "./Spinner";
 
 interface IProps extends QRCodeToDataURLOptions {
@@ -30,11 +30,11 @@ const defaultOptions: QRCodeToDataURLOptions = {
     errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
 };
 
-const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
+const QRCode: React.FC<IProps> = ({ data, className, ...options }) => {
     const [dataUri, setUri] = React.useState<string>(null);
     React.useEffect(() => {
         let cancelled = false;
-        toDataURL(data, {...defaultOptions, ...options}).then(uri => {
+        toDataURL(data, { ...defaultOptions, ...options }).then(uri => {
             if (cancelled) return;
             setUri(uri);
         });
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index ebf4a18aa9..aea447c9b1 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -17,21 +17,21 @@ limitations under the License.
 */
 import React from 'react';
 import * as sdk from '../../../index';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
-import {wantsDateSeparator} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
-import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import { wantsDateSeparator } from '../../../DateUtils';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
-import {LayoutPropType} from "../../../settings/Layout";
+import { LayoutPropType } from "../../../settings/Layout";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import sanitizeHtml from "sanitize-html";
-import {UIFeature} from "../../../settings/UIFeature";
-import {PERMITTED_URL_SCHEMES} from "../../../HtmlUtils";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -130,7 +130,7 @@ export default class ReplyThread extends React.Component {
     static getNestedReplyText(ev, permalinkCreator) {
         if (!ev) return null;
 
-        let {body, formatted_body: html} = ev.getContent();
+        let { body, formatted_body: html } = ev.getContent();
         if (this.getParentEventId(ev)) {
             if (body) body = this.stripPlainReply(body);
         }
@@ -200,7 +200,7 @@ export default class ReplyThread extends React.Component {
                 return null;
         }
 
-        return {body, html};
+        return { body, html };
     }
 
     static makeReplyMixIn(ev) {
@@ -269,7 +269,7 @@ export default class ReplyThread extends React.Component {
     };
 
     async initialize() {
-        const {parentEv} = this.props;
+        const { parentEv } = this.props;
         // at time of making this component we checked that props.parentEv has a parentEventId
         const ev = await this.getEvent(ReplyThread.getParentEventId(parentEv));
 
@@ -283,7 +283,7 @@ export default class ReplyThread extends React.Component {
                 loading: false,
             });
         } else {
-            this.setState({err: true});
+            this.setState({ err: true });
         }
     }
 
diff --git a/src/components/views/elements/RoomAliasField.tsx b/src/components/views/elements/RoomAliasField.tsx
index 74af311b47..d9e081341b 100644
--- a/src/components/views/elements/RoomAliasField.tsx
+++ b/src/components/views/elements/RoomAliasField.tsx
@@ -80,7 +80,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
 
     private onValidate = async (fieldState) => {
         const result = await this.validationRules(fieldState);
-        this.setState({isValid: result.valid});
+        this.setState({ isValid: result.valid });
         return result;
     };
 
@@ -105,7 +105,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
             }, {
                 key: "taken",
                 final: true,
-                test: async ({value}) => {
+                test: async ({ value }) => {
                     if (!value) {
                         return true;
                     }
diff --git a/src/components/views/elements/RoomTopic.tsx b/src/components/views/elements/RoomTopic.tsx
index fe8aa5a83d..0526c2676c 100644
--- a/src/components/views/elements/RoomTopic.tsx
+++ b/src/components/views/elements/RoomTopic.tsx
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect, useState} from "react";
-import {EventType} from "matrix-js-sdk/src/@types/event";
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { useEffect, useState } from "react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
-import {linkifyElement} from "../../../HtmlUtils";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { linkifyElement } from "../../../HtmlUtils";
 
 interface IProps {
     room?: Room;
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index a531abdf83..68c58a3e56 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -17,14 +17,14 @@ limitations under the License.
 import React from "react";
 import { chunk } from "lodash";
 import classNames from "classnames";
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
-import {_t} from "../../../languageHandler";
-import {IdentityProviderBrand, IIdentityProvider, ISSOFlow} from "../../../Login";
+import { _t } from "../../../languageHandler";
+import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "../../../Login";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface ISSOButtonProps extends Omit<IProps, "flow"> {
     idp: IIdentityProvider;
@@ -48,7 +48,7 @@ const getIcon = (brand: IdentityProviderBrand | string) => {
         default:
             return null;
     }
-}
+};
 
 const SSOButton: React.FC<ISSOButtonProps> = ({
     matrixClient,
@@ -111,7 +111,7 @@ interface IProps {
 
 const MAX_PER_ROW = 6;
 
-const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
+const SSOButtons: React.FC<IProps> = ({ matrixClient, flow, loginType, fragmentAfterLogin, primary }) => {
     const providers = flow.identity_providers || [];
     if (providers.length < 2) {
         return <div className="mx_SSOButtons">
diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx
index 9f06e2618c..c2d1fcb275 100644
--- a/src/components/views/elements/ServerPicker.tsx
+++ b/src/components/views/elements/ServerPicker.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 
 import AccessibleButton from "./AccessibleButton";
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
-import {_t} from "../../../languageHandler";
+import { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
+import { _t } from "../../../languageHandler";
 import TextWithTooltip from "./TextWithTooltip";
 import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
@@ -87,7 +87,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
         <span className="mx_ServerPicker_server">{serverName}</span>
         { editBtn }
         { desc }
-    </div>
-}
+    </div>;
+};
 
 export default ServerPicker;
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 24a21e1a33..ccde80ff00 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -21,7 +21,7 @@ import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
 import StyledCheckbox from "./StyledCheckbox";
 import { SettingLevel } from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The setting must be a boolean
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index b513f90460..b9234d0550 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import * as React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // A callback for the selected value
@@ -86,8 +86,8 @@ export default class Slider extends React.Component<IProps> {
         if (!this.props.disabled) {
             const offset = this.offset(this.props.values, this.props.value);
             selection = <div className="mx_Slider_selection">
-                <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
-                <hr style={{width: offset + "%"}} />
+                <div className="mx_Slider_selectionDot" style={{ left: "calc(-0.55em + " + offset + "%)" }} />
+                <hr style={{ width: offset + "%" }} />
             </div>;
         }
 
diff --git a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
index 06e1efe415..d10a599d95 100644
--- a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
+++ b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from 'react';
 
-import Dropdown from "../../views/elements/Dropdown"
+import Dropdown from "../../views/elements/Dropdown";
 import * as sdk from '../../../index';
 import PlatformPeg from "../../../PlatformPeg";
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
@@ -67,11 +67,11 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
                     langs.push({
                         label: language,
                         value: language,
-                    })
-                })
-                this.setState({languages: langs});
+                    });
+                });
+                this.setState({ languages: langs });
             }).catch((e) => {
-                this.setState({languages: ['en']});
+                this.setState({ languages: ['en'] });
             });
         }
     }
diff --git a/src/components/views/elements/Spinner.js b/src/components/views/elements/Spinner.js
index 3ad8444bd6..75f85d0441 100644
--- a/src/components/views/elements/Spinner.js
+++ b/src/components/views/elements/Spinner.js
@@ -17,14 +17,14 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 
-const Spinner = ({w = 32, h = 32, message}) => (
+const Spinner = ({ w = 32, h = 32, message }) => (
     <div className="mx_Spinner">
         { message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
         <div
             className="mx_Spinner_icon"
-            style={{width: w, height: h}}
+            style={{ width: w, height: h }}
             aria-label={_t("Loading...")}
         ></div>
     </div>
diff --git a/src/components/views/elements/Spoiler.js b/src/components/views/elements/Spoiler.js
index 33b4382a2c..56c18c6e33 100644
--- a/src/components/views/elements/Spoiler.js
+++ b/src/components/views/elements/Spoiler.js
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.Spoiler")
 export default class Spoiler extends React.Component {
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index 2454d1336b..366cc2f1f7 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 835394e055..7ec472b639 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import classnames from 'classnames';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     outlined?: boolean;
diff --git a/src/components/views/elements/SyntaxHighlight.js b/src/components/views/elements/SyntaxHighlight.js
index f9874c5367..2c29f7c989 100644
--- a/src/components/views/elements/SyntaxHighlight.js
+++ b/src/components/views/elements/SyntaxHighlight.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {highlightBlock} from 'highlight.js';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { highlightBlock } from 'highlight.js';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.SyntaxHighlight")
 export default class SyntaxHighlight extends React.Component {
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 03d853babc..12c3718274 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -30,8 +30,8 @@ import GroupFilterOrderStore from '../../../stores/GroupFilterOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "./AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
-import {mediaFromMxc} from "../../../customisations/Media";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // A class for a child of GroupFilterPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.js
index a6fc00fc2e..633d182fcf 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.TextWithTooltip")
 export default class TextWithTooltip extends React.Component {
@@ -37,17 +37,17 @@ export default class TextWithTooltip extends React.Component {
     }
 
     onMouseOver = () => {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     };
 
     onMouseLeave = () => {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     };
 
     render() {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
-        const {class: className, children, tooltip, tooltipClass, tooltipProps, ...props} = this.props;
+        const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
         return (
             <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js
index 670f3e9bb9..abd1620cc4 100644
--- a/src/components/views/elements/TintableSvg.js
+++ b/src/components/views/elements/TintableSvg.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tinter from "../../../Tinter";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.elements.TintableSvg")
 class TintableSvg extends React.Component {
diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx
index f05c45b3db..7315cc6383 100644
--- a/src/components/views/elements/ToggleSwitch.tsx
+++ b/src/components/views/elements/ToggleSwitch.tsx
@@ -31,7 +31,7 @@ interface IProps {
 }
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-export default ({checked, disabled = false, onChange, ...props}: IProps) => {
+export default ({ checked, disabled = false, onChange, ...props }: IProps) => {
     const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 0202c6b02f..e64819f441 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -17,11 +17,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
-import React, {Component, CSSProperties} from 'react';
+import React, { Component, CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 
 const MIN_TOOLTIP_HEIGHT = 25;
diff --git a/src/components/views/elements/TooltipButton.tsx b/src/components/views/elements/TooltipButton.tsx
index 191018cc19..87bf04c2ea 100644
--- a/src/components/views/elements/TooltipButton.tsx
+++ b/src/components/views/elements/TooltipButton.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     helpText: string;
diff --git a/src/components/views/elements/TruncatedList.tsx b/src/components/views/elements/TruncatedList.tsx
index 395caa9222..403df4111e 100644
--- a/src/components/views/elements/TruncatedList.tsx
+++ b/src/components/views/elements/TruncatedList.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // The number of elements to show before truncating. If negative, no truncation is done.
@@ -43,7 +43,7 @@ export default class TruncatedList extends React.Component<IProps> {
         truncateAt: 2,
         createOverflowElement(overflowCount, totalCount) {
             return (
-                <div>{ _t("And %(count)s more...", {count: overflowCount}) }</div>
+                <div>{ _t("And %(count)s more...", { count: overflowCount }) }</div>
             );
         },
     };
diff --git a/src/components/views/elements/UserTagTile.tsx b/src/components/views/elements/UserTagTile.tsx
index d3e07a0a34..4414ff31fd 100644
--- a/src/components/views/elements/UserTagTile.tsx
+++ b/src/components/views/elements/UserTagTile.tsx
@@ -21,7 +21,7 @@ import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import classNames from "classnames";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
 }
@@ -52,7 +52,7 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
 
     private onTagStoreUpdate = () => {
         const selected = GroupFilterOrderStore.getSelectedTags().length === 0;
-        this.setState({selected});
+        this.setState({ selected });
     };
 
     private onTileClick = (ev) => {
@@ -60,7 +60,7 @@ export default class UserTagTile extends React.PureComponent<IProps, IState> {
         ev.stopPropagation();
 
         // Deselect all tags
-        defaultDispatcher.dispatch({action: "deselect_tags"});
+        defaultDispatcher.dispatch({ action: "deselect_tags" });
     };
 
     public render() {
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
index 3bbfb004c6..76cfb82d35 100644
--- a/src/components/views/elements/crypto/VerificationQRCode.js
+++ b/src/components/views/elements/crypto/VerificationQRCode.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 import QRCode from "../QRCode";
 
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
@@ -28,7 +28,7 @@ export default class VerificationQRCode extends React.PureComponent {
     render() {
         return (
             <QRCode
-                data={[{data: this.props.qrCodeData.buffer, mode: 'byte'}]}
+                data={[{ data: this.props.qrCodeData.buffer, mode: 'byte' }]}
                 className="mx_VerificationQRCode"
                 width={196} />
         );
diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx
index 4c7852def3..24b4fbe3ed 100644
--- a/src/components/views/emojipicker/Category.tsx
+++ b/src/components/views/emojipicker/Category.tsx
@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {RefObject} from 'react';
+import React, { RefObject } from 'react';
 
 import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker";
 import LazyRenderList from "../elements/LazyRenderList";
-import {DATA_BY_CATEGORY, IEmoji} from "../../../emoji";
+import { DATA_BY_CATEGORY, IEmoji } from "../../../emoji";
 import Emoji from './Emoji';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const OVERFLOW_ROWS = 3;
 
diff --git a/src/components/views/emojipicker/Emoji.tsx b/src/components/views/emojipicker/Emoji.tsx
index 5d7665ce98..73e24f46fb 100644
--- a/src/components/views/emojipicker/Emoji.tsx
+++ b/src/components/views/emojipicker/Emoji.tsx
@@ -17,9 +17,9 @@ limitations under the License.
 
 import React from 'react';
 
-import {MenuItem} from "../../structures/ContextMenu";
-import {IEmoji} from "../../../emoji";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MenuItem } from "../../structures/ContextMenu";
+import { IEmoji } from "../../../emoji";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index 6d7b90c8a6..47e3823116 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -19,14 +19,14 @@ import React from 'react';
 
 import { _t } from '../../../languageHandler';
 import * as recent from '../../../emojipicker/recent';
-import {DATA_BY_CATEGORY, getEmojiFromUnicode, IEmoji} from "../../../emoji";
+import { DATA_BY_CATEGORY, getEmojiFromUnicode, IEmoji } from "../../../emoji";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import Header from "./Header";
 import Search from "./Search";
 import Preview from "./Preview";
 import QuickReactions from "./QuickReactions";
-import Category, {ICategory, CategoryKey} from "./Category";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Category, { ICategory, CategoryKey } from "./Category";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export const CATEGORY_HEADER_HEIGHT = 22;
 export const EMOJI_HEIGHT = 37;
@@ -234,7 +234,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
                     className="mx_EmojiPicker_body"
                     wrappedRef={ref => {
                         // @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
-                        this.bodyRef.current = ref
+                        this.bodyRef.current = ref;
                     }}
                     onScroll={this.onScroll}
                 >
diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx
index 693f86ad73..010801141a 100644
--- a/src/components/views/emojipicker/Header.tsx
+++ b/src/components/views/emojipicker/Header.tsx
@@ -18,10 +18,10 @@ limitations under the License.
 import React from 'react';
 import classNames from "classnames";
 
-import {_t} from "../../../languageHandler";
-import {Key} from "../../../Keyboard";
-import {CategoryKey, ICategory} from "./Category";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { Key } from "../../../Keyboard";
+import { CategoryKey, ICategory } from "./Category";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     categories: ICategory[];
diff --git a/src/components/views/emojipicker/Preview.tsx b/src/components/views/emojipicker/Preview.tsx
index e0952ec73e..9c2dbb9cbd 100644
--- a/src/components/views/emojipicker/Preview.tsx
+++ b/src/components/views/emojipicker/Preview.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 
 import React from 'react';
 
-import {IEmoji} from "../../../emoji";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { IEmoji } from "../../../emoji";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
diff --git a/src/components/views/emojipicker/QuickReactions.tsx b/src/components/views/emojipicker/QuickReactions.tsx
index a250aca458..ffd3ce9760 100644
--- a/src/components/views/emojipicker/QuickReactions.tsx
+++ b/src/components/views/emojipicker/QuickReactions.tsx
@@ -18,9 +18,9 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
-import {getEmojiFromUnicode, IEmoji} from "../../../emoji";
+import { getEmojiFromUnicode, IEmoji } from "../../../emoji";
 import Emoji from "./Emoji";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // We use the variation-selector Heart in Quick Reactions for some reason
 const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
diff --git a/src/components/views/emojipicker/ReactionPicker.tsx b/src/components/views/emojipicker/ReactionPicker.tsx
index e86d183aba..d8f8b7f2ff 100644
--- a/src/components/views/emojipicker/ReactionPicker.tsx
+++ b/src/components/views/emojipicker/ReactionPicker.tsx
@@ -16,12 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import EmojiPicker from "./EmojiPicker";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -103,7 +103,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
                     "key": reaction,
                 },
             });
-            dis.dispatch({action: "message_sent"});
+            dis.dispatch({ action: "message_sent" });
             return true;
         }
     };
diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx
index abe3e026be..c88bf8d84d 100644
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from '../../../languageHandler';
-import {Key} from "../../../Keyboard";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     query: string;
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index fec90ce8e7..5d892cdb76 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -23,10 +23,10 @@ import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupInviteDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
diff --git a/src/components/views/groups/GroupMemberTile.js b/src/components/views/groups/GroupMemberTile.js
index a436f2403e..70a63bdba5 100644
--- a/src/components/views/groups/GroupMemberTile.js
+++ b/src/components/views/groups/GroupMemberTile.js
@@ -22,8 +22,8 @@ import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { GroupMemberType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.groups.GroupMemberTile")
 export default class GroupMemberTile extends React.Component {
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index 6bef141cb8..4e17a9caa1 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import ToggleSwitch from "../elements/ToggleSwitch";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.groups.GroupPublicityTile")
 export default class GroupPublicityToggle extends React.Component {
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index c1d1adb0b3..d8f086700d 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -24,8 +24,8 @@ import { _t } from '../../../languageHandler';
 import GroupStore from '../../../stores/GroupStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.groups.GroupRoomInfo")
 export default class GroupRoomInfo extends React.Component {
@@ -90,12 +90,12 @@ export default class GroupRoomInfo extends React.Component {
         e.stopPropagation();
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Confirm removal of group from room', '', QuestionDialog, {
-            title: _t("Are you sure you want to remove '%(roomName)s' from %(groupId)s?", {roomName, groupId}),
+            title: _t("Are you sure you want to remove '%(roomName)s' from %(groupId)s?", { roomName, groupId }),
             description: _t("Removing a room from the community will also remove it from the community page."),
             button: _t("Remove"),
             onFinished: (proceed) => {
                 if (!proceed) return;
-                this.setState({groupRoomRemoveLoading: true});
+                this.setState({ groupRoomRemoveLoading: true });
                 const groupId = this.props.groupId;
                 const roomId = this.props.groupRoomId;
                 GroupStore.removeRoomFromGroup(this.props.groupId, roomId).then(() => {
@@ -108,11 +108,11 @@ export default class GroupRoomInfo extends React.Component {
                     Modal.createTrackedDialog('Failed to remove room from group', '', ErrorDialog, {
                         title: _t("Failed to remove room from community"),
                         description: _t(
-                            "Failed to remove '%(roomName)s' from %(groupId)s", {groupId, roomName},
+                            "Failed to remove '%(roomName)s' from %(groupId)s", { groupId, roomName },
                         ),
                     });
                 }).finally(() => {
-                    this.setState({groupRoomRemoveLoading: false});
+                    this.setState({ groupRoomRemoveLoading: false });
                 });
             },
         });
@@ -139,7 +139,7 @@ export default class GroupRoomInfo extends React.Component {
                 title: _t("Something went wrong!"),
                 description: _t(
                     "The visibility of '%(roomName)s' in %(groupId)s could not be updated.",
-                    {roomName, groupId},
+                    { roomName, groupId },
                 ),
             });
         }).finally(() => {
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 2921ac79ee..00220441e7 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
diff --git a/src/components/views/groups/GroupRoomTile.js b/src/components/views/groups/GroupRoomTile.js
index 7edfc1a376..662359669d 100644
--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -20,8 +20,8 @@ import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { GroupRoomType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.groups.GroupRoomTile")
 class GroupRoomTile extends React.Component {
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index dd8366bbe0..21308ac056 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -20,8 +20,8 @@ import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import FlairStore from '../../../stores/FlairStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
 import TagOrderActions from "../../../actions/TagOrderActions";
 import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
@@ -49,7 +49,7 @@ class GroupTile extends React.Component {
 
     componentDidMount() {
         FlairStore.getGroupProfileCached(this.context, this.props.groupId).then((profile) => {
-            this.setState({profile});
+            this.setState({ profile });
         }).catch((err) => {
             console.error('Error whilst getting cached profile for GroupTile', err);
         });
diff --git a/src/components/views/groups/GroupUserSettings.js b/src/components/views/groups/GroupUserSettings.js
index 5b537d7377..efb392c54f 100644
--- a/src/components/views/groups/GroupUserSettings.js
+++ b/src/components/views/groups/GroupUserSettings.js
@@ -18,7 +18,7 @@ import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.groups.GroupUserSettings")
 export default class GroupUserSettings extends React.Component {
@@ -31,10 +31,10 @@ export default class GroupUserSettings extends React.Component {
 
     componentDidMount() {
         this.context.getJoinedGroups().then((result) => {
-            this.setState({groups: result.groups || [], error: null});
+            this.setState({ groups: result.groups || [], error: null });
         }, (err) => {
             console.error(err);
-            this.setState({groups: null, error: err});
+            this.setState({ groups: null, error: err });
         });
     }
 
diff --git a/src/components/views/host_signup/HostSignupContainer.tsx b/src/components/views/host_signup/HostSignupContainer.tsx
index 6445454994..fc1506bf61 100644
--- a/src/components/views/host_signup/HostSignupContainer.tsx
+++ b/src/components/views/host_signup/HostSignupContainer.tsx
@@ -33,4 +33,4 @@ const HostSignupContainer = () => {
     </div>;
 };
 
-export default HostSignupContainer
+export default HostSignupContainer;
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 82ce8dc4ae..58c54d5b58 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import {formatFullDateNoTime} from '../../../DateUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { formatFullDateNoTime } from '../../../DateUtils';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function getdaysArray() {
     return [
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index dc4e0187d3..1416cfff53 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -14,20 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
-import {formatTime} from '../../../DateUtils';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
-import {pillifyLinks, unmountPills} from '../../../utils/pillify';
+import { formatTime } from '../../../DateUtils';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { pillifyLinks, unmountPills } from '../../../utils/pillify';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import classNames from 'classnames';
 import RedactedBody from "./RedactedBody";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function getReplacedContent(event) {
     const originalContent = event.getOriginalContent();
@@ -46,21 +46,21 @@ export default class EditHistoryMessage extends React.PureComponent {
     constructor(props) {
         super(props);
         const cli = MatrixClientPeg.get();
-        const {userId} = cli.credentials;
+        const { userId } = cli.credentials;
         const event = this.props.mxEvent;
         const room = cli.getRoom(event.getRoomId());
         if (event.localRedactionEvent()) {
             event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
         }
         const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
-        this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
+        this.state = { canRedact, sendStatus: event.getAssociatedStatus() };
 
         this._content = createRef();
         this._pills = [];
     }
 
     _onAssociatedStatusChanged = () => {
-        this.setState({sendStatus: this.props.mxEvent.getAssociatedStatus()});
+        this.setState({ sendStatus: this.props.mxEvent.getAssociatedStatus() });
     };
 
     _onRedactClick = async () => {
@@ -129,7 +129,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     }
 
     render() {
-        const {mxEvent} = this.props;
+        const { mxEvent } = this.props;
         const content = getReplacedContent(mxEvent);
         let contentContainer;
         if (mxEvent.isRedacted()) {
@@ -139,7 +139,7 @@ export default class EditHistoryMessage extends React.PureComponent {
             if (this.props.previousEdit) {
                 contentElements = editBodyDiffToHtml(getReplacedContent(this.props.previousEdit), content);
             } else {
-                contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
+                contentElements = HtmlUtils.bodyToHtml(content, null, { stripReplyFallback: true });
             }
             if (mxEvent.getContent().msgtype === "m.emote") {
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx
index 3af9c463c9..0f716ed010 100644
--- a/src/components/views/messages/EncryptionEvent.tsx
+++ b/src/components/views/messages/EncryptionEvent.tsx
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef, useContext} from 'react';
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import React, { forwardRef, useContext } from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -27,7 +27,7 @@ interface IProps {
     mxEvent: MatrixEvent;
 }
 
-const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({mxEvent}, ref) => {
+const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) => {
     const cli = useContext(MatrixClientContext);
     const roomId = mxEvent.getRoomId();
     const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
diff --git a/src/components/views/messages/EventTileBubble.tsx b/src/components/views/messages/EventTileBubble.tsx
index 88913ac2d4..9fa3586ea5 100644
--- a/src/components/views/messages/EventTileBubble.tsx
+++ b/src/components/views/messages/EventTileBubble.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef, ReactNode, ReactChildren} from "react";
+import React, { forwardRef, ReactNode, ReactChildren } from "react";
 import classNames from "classnames";
 
 interface IProps {
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
index 0d5e449fc0..977c88448b 100644
--- a/src/components/views/messages/MAudioBody.js
+++ b/src/components/views/messages/MAudioBody.js
@@ -20,8 +20,8 @@ import MFileBody from './MFileBody';
 import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
 import InlineSpinner from '../elements/InlineSpinner';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromContent} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromContent } from "../../../customisations/Media";
 
 @replaceableComponent("views.messages.MAudioBody")
 export default class MAudioBody extends React.Component {
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..d8d832d15d 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import filesize from 'filesize';
 import { _t } from '../../../languageHandler';
-import {decryptFile} from '../../../utils/DecryptFile';
+import { decryptFile } from '../../../utils/DecryptFile';
 import Modal from '../../../Modal';
 import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromContent} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
 
 let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
@@ -242,7 +242,7 @@ export default class MFileBody extends React.Component {
                 <span className="mx_MFileBody">
                     {placeholder}
                     <div className="mx_MFileBody_download">
-                        <div style={{display: "none"}}>
+                        <div style={{ display: "none" }}>
                             { /*
                               * Add dummy copy of the "a" tag
                               * We'll use it to learn how the download link
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 6505b1d66a..7e85f15898 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 
 import MFileBody from './MFileBody';
@@ -27,8 +27,8 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import InlineSpinner from '../elements/InlineSpinner';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromContent} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromContent } from "../../../customisations/Media";
 
 @replaceableComponent("views.messages.MImageBody")
 export default class MImageBody extends React.Component {
@@ -90,7 +90,7 @@ export default class MImageBody extends React.Component {
 
     showImage() {
         localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
-        this.setState({showImage: true});
+        this.setState({ showImage: true });
         this._downloadImage();
     }
 
@@ -296,7 +296,7 @@ export default class MImageBody extends React.Component {
         if (showImage) {
             // Don't download anything becaue we don't want to display anything.
             this._downloadImage();
-            this.setState({showImage: true});
+            this.setState({ showImage: true });
         }
 
         this._afterComponentDidMount();
@@ -345,7 +345,7 @@ export default class MImageBody extends React.Component {
                     imageElement = <HiddenImagePlaceholder />;
                 } else {
                     imageElement = (
-                        <img style={{display: 'none'}} src={thumbUrl} ref={this._image}
+                        <img style={{ display: 'none' }} src={thumbUrl} ref={this._image}
                             alt={content.body}
                             onError={this.onImageError}
                             onLoad={this.onImageLoad}
@@ -417,7 +417,7 @@ export default class MImageBody extends React.Component {
                     </div>
                 }
 
-                <div style={{display: !showPlaceholder ? undefined : 'none'}}>
+                <div style={{ display: !showPlaceholder ? undefined : 'none' }}>
                     { img }
                     { gifLabel }
                 </div>
diff --git a/src/components/views/messages/MJitsiWidgetEvent.tsx b/src/components/views/messages/MJitsiWidgetEvent.tsx
index 626efe1f36..aaf659d6d9 100644
--- a/src/components/views/messages/MJitsiWidgetEvent.tsx
+++ b/src/components/views/messages/MJitsiWidgetEvent.tsx
@@ -21,7 +21,7 @@ import WidgetStore from "../../../stores/WidgetStore";
 import EventTileBubble from "./EventTileBubble";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -52,20 +52,20 @@ export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
             // removed
             return <EventTileBubble
                 className="mx_MJitsiWidgetEvent"
-                title={_t('Video conference ended by %(senderName)s', {senderName})}
+                title={_t('Video conference ended by %(senderName)s', { senderName })}
             />;
         } else if (prevUrl) {
             // modified
             return <EventTileBubble
                 className="mx_MJitsiWidgetEvent"
-                title={_t('Video conference updated by %(senderName)s', {senderName})}
+                title={_t('Video conference updated by %(senderName)s', { senderName })}
                 subtitle={joinCopy}
             />;
         } else {
             // assume added
             return <EventTileBubble
                 className="mx_MJitsiWidgetEvent"
-                title={_t("Video conference started by %(senderName)s", {senderName})}
+                title={_t("Video conference started by %(senderName)s", { senderName })}
                 subtitle={joinCopy}
             />;
         }
diff --git a/src/components/views/messages/MKeyVerificationConclusion.js b/src/components/views/messages/MKeyVerificationConclusion.js
index c9489711aa..a5f12df47d 100644
--- a/src/components/views/messages/MKeyVerificationConclusion.js
+++ b/src/components/views/messages/MKeyVerificationConclusion.js
@@ -17,12 +17,12 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
-import {getNameForEventRoom, userLabelForEventRoom}
+import { getNameForEventRoom, userLabelForEventRoom }
     from '../../../utils/KeyVerificationStateObserver';
 import EventTileBubble from "./EventTileBubble";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MKeyVerificationConclusion")
 export default class MKeyVerificationConclusion extends React.Component {
@@ -90,7 +90,7 @@ export default class MKeyVerificationConclusion extends React.Component {
     }
 
     render() {
-        const {mxEvent} = this.props;
+        const { mxEvent } = this.props;
         const request = mxEvent.verificationRequest;
 
         if (!this._shouldRender(mxEvent, request)) {
@@ -103,15 +103,15 @@ export default class MKeyVerificationConclusion extends React.Component {
         let title;
 
         if (request.done) {
-            title = _t("You verified %(name)s", {name: getNameForEventRoom(request.otherUserId, mxEvent)});
+            title = _t("You verified %(name)s", { name: getNameForEventRoom(request.otherUserId, mxEvent) });
         } else if (request.cancelled) {
             const userId = request.cancellingUserId;
             if (userId === myUserId) {
                 title = _t("You cancelled verifying %(name)s",
-                    {name: getNameForEventRoom(request.otherUserId, mxEvent)});
+                    { name: getNameForEventRoom(request.otherUserId, mxEvent) });
             } else {
                 title = _t("%(name)s cancelled verifying",
-                    {name: getNameForEventRoom(userId, mxEvent)});
+                    { name: getNameForEventRoom(userId, mxEvent) });
             }
         }
 
diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx
index 69467cfa50..d690513d55 100644
--- a/src/components/views/messages/MKeyVerificationRequest.tsx
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@@ -53,7 +53,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
         dis.dispatch({
             action: Action.SetRightPanelPhase,
             phase: RightPanelPhases.EncryptionPanel,
-            refireParams: {verificationRequest, member},
+            refireParams: { verificationRequest, member },
         });
     };
 
@@ -90,14 +90,14 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
         if (userId === myUserId) {
             return _t("You accepted");
         } else {
-            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            return _t("%(name)s accepted", { name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId()) });
         }
     }
 
     private cancelledLabel(userId: string) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
-        const {cancellationCode} = this.props.mxEvent.verificationRequest;
+        const { cancellationCode } = this.props.mxEvent.verificationRequest;
         const declined = cancellationCode === "m.user";
         if (userId === myUserId) {
             if (declined) {
@@ -107,9 +107,9 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             }
         } else {
             if (declined) {
-                return _t("%(name)s declined", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+                return _t("%(name)s declined", { name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId()) });
             } else {
-                return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+                return _t("%(name)s cancelled", { name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId()) });
             }
         }
     }
@@ -117,7 +117,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
     public render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        const {mxEvent} = this.props;
+        const { mxEvent } = this.props;
         const request = mxEvent.verificationRequest;
 
         if (!request || request.invalid) {
@@ -147,7 +147,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
 
         if (!request.initiatedByMe) {
             const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
-            title = _t("%(name)s wants to verify", {name});
+            title = _t("%(name)s wants to verify", { name });
             subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index 54eb7649b4..aca3dba37c 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import MImageBody from './MImageBody';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
@@ -53,7 +53,7 @@ export default class MStickerBody extends MImageBody {
         if (!content || !content.body || !content.info || !content.info.w) return null;
 
         const Tooltip = sdk.getComponent('elements.Tooltip');
-        return <div style={{left: content.info.w + 'px'}} className="mx_MStickerBody_tooltip">
+        return <div style={{ left: content.info.w + 'px' }} className="mx_MStickerBody_tooltip">
             <Tooltip label={content.body} />
         </div>;
     }
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 2efdce506e..ef79e96370 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -21,8 +21,8 @@ import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import InlineSpinner from '../elements/InlineSpinner';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromContent} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromContent } from "../../../customisations/Media";
 
 interface IProps {
     /* the MatrixEvent to show */
@@ -51,7 +51,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
             error: null,
-        }
+        };
     }
 
     thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
@@ -182,7 +182,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
             this.videoRef.current.play();
         });
         this.props.onHeightChanged();
-    }
+    };
 
     render() {
         const content = this.props.mxEvent.getContent();
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
index a7e3b1cd86..edb791f7ee 100644
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -15,16 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {Playback} from "../../../voice/Playback";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Playback } from "../../../voice/Playback";
 import MFileBody from "./MFileBody";
 import InlineSpinner from '../elements/InlineSpinner';
-import {_t} from "../../../languageHandler";
-import {mediaFromContent} from "../../../customisations/Media";
-import {decryptFile} from "../../../utils/DecryptFile";
+import { _t } from "../../../languageHandler";
+import { mediaFromContent } from "../../../customisations/Media";
+import { decryptFile } from "../../../utils/DecryptFile";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
-import {IMediaEventContent} from "../../../customisations/models/IMediaEventContent";
+import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -52,9 +52,9 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
             try {
                 const blob = await decryptFile(content.file);
                 buffer = await blob.arrayBuffer();
-                this.setState({decryptedBlob: blob});
+                this.setState({ decryptedBlob: blob });
             } catch (e) {
-                this.setState({error: e});
+                this.setState({ error: e });
                 console.warn("Unable to decrypt voice message", e);
                 return; // stop processing the audio file
             }
@@ -62,7 +62,7 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
             try {
                 buffer = await media.downloadSource().then(r => r.blob()).then(r => r.arrayBuffer());
             } catch (e) {
-                this.setState({error: e});
+                this.setState({ error: e });
                 console.warn("Unable to download voice message", e);
                 return; // stop processing the audio file
             }
@@ -106,6 +106,6 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
                 <RecordingPlayback playback={this.state.playback} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
-        )
+        );
     }
 }
diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx
index 6d26ef3dcb..676b5a2c47 100644
--- a/src/components/views/messages/MVoiceOrAudioBody.tsx
+++ b/src/components/views/messages/MVoiceOrAudioBody.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import MAudioBody from "./MAudioBody";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from "../../../settings/SettingsStore";
 import MVoiceMessageBody from "./MVoiceMessageBody";
 
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 3d434e0ee2..7532554666 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -16,24 +16,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { EventStatus } from 'matrix-js-sdk/src/models/event';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import {aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu} from '../../structures/ContextMenu';
+import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
 import Toolbar from "../../../accessibility/Toolbar";
-import {RovingAccessibleTooltipButton, useRovingTabIndex} from "../../../accessibility/RovingTabIndex";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {canCancel} from "../context_menus/MessageContextMenu";
+import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { canCancel } from "../context_menus/MessageContextMenu";
 import Resend from "../../../Resend";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
-const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
+const OptionsButton = ({ mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const [onFocus, isActive, ref] = useRovingTabIndex(button);
     useEffect(() => {
@@ -73,7 +73,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
     </React.Fragment>;
 };
 
-const ReactButton = ({mxEvent, reactions, onFocusChange}) => {
+const ReactButton = ({ mxEvent, reactions, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const [onFocus, isActive, ref] = useRovingTabIndex(button);
     useEffect(() => {
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 78e0dc422d..52a0b9ad08 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Mjolnir} from "../../../mjolnir/Mjolnir";
+import { Mjolnir } from "../../../mjolnir/Mjolnir";
 import RedactedBody from "./RedactedBody";
 import UnknownBody from "./UnknownBody";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MessageEvent")
 export default class MessageEvent extends React.Component {
diff --git a/src/components/views/messages/MjolnirBody.js b/src/components/views/messages/MjolnirBody.js
index 4368fd936c..67484a6d9c 100644
--- a/src/components/views/messages/MjolnirBody.js
+++ b/src/components/views/messages/MjolnirBody.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from '../../../languageHandler';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MjolnirBody")
 export default class MjolnirBody extends React.Component {
@@ -43,7 +43,7 @@ export default class MjolnirBody extends React.Component {
         return (
             <div className='mx_MjolnirBody'><i>{_t(
                 "You have ignored this user, so their message is hidden. <a>Show anyways.</a>",
-                {}, {a: (sub) => <a href="#" onClick={this._onAllowClick}>{sub}</a>},
+                {}, { a: (sub) => <a href="#" onClick={this._onAllowClick}>{sub}</a> },
             )}</i></div>
         );
     }
diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx
index 0180baa466..55ffb8deac 100644
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@@ -125,7 +125,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
     private onDecrypted = () => {
         // Decryption changes whether the event is actionable
         this.forceUpdate();
-    }
+    };
 
     private onReactionsChange = () => {
         // TODO: Call `onHeightChanged` as needed
@@ -136,7 +136,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         // has changed (this is triggered by events for that purpose only) and
         // `PureComponent`s shallow state / props compare would otherwise filter this out.
         this.forceUpdate();
-    }
+    };
 
     private getMyReactions() {
         const reactions = this.props.reactions;
@@ -155,7 +155,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         this.setState({
             showAll: true,
         });
-    }
+    };
 
     render() {
         const { mxEvent, reactions } = this.props;
diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index d163f1ad30..53e27b882e 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -68,7 +68,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                     "key": content,
                 },
             });
-            dis.dispatch({action: "message_sent"});
+            dis.dispatch({ action: "message_sent" });
         }
     };
 
@@ -79,13 +79,13 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             tooltipRendered: true,
             tooltipVisible: true,
         });
-    }
+    };
 
     onMouseLeave = () => {
         this.setState({
             tooltipVisible: false,
         });
-    }
+    };
 
     render() {
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index 5f80460d03..3e5da1dd43 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext} from "react";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import React, { useContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {formatFullDate} from "../../../DateUtils";
+import { formatFullDate } from "../../../DateUtils";
 import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
     mxEvent: MatrixEvent;
 }
 
-const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+const RedactedBody = React.forwardRef<any, IProps>(({ mxEvent }, ref) => {
     const cli: MatrixClient = useContext(MatrixClientContext);
 
     let text = _t("Message deleted");
diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.js
index 41eada3193..d68d794ee6 100644
--- a/src/components/views/messages/RoomAvatarEvent.js
+++ b/src/components/views/messages/RoomAvatarEvent.js
@@ -18,13 +18,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.messages.RoomAvatarEvent")
 export default class RoomAvatarEvent extends React.Component {
@@ -60,7 +60,7 @@ export default class RoomAvatarEvent extends React.Component {
         if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
             return (
                 <div className="mx_TextualEvent">
-                    { _t('%(senderDisplayName)s removed the room avatar.', {senderDisplayName}) }
+                    { _t('%(senderDisplayName)s removed the room avatar.', { senderDisplayName }) }
                 </div>
             );
         }
diff --git a/src/components/views/messages/RoomCreate.js b/src/components/views/messages/RoomCreate.js
index 3e02884c02..56bd25cbac 100644
--- a/src/components/views/messages/RoomCreate.js
+++ b/src/components/views/messages/RoomCreate.js
@@ -21,9 +21,9 @@ import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTileBubble from "./EventTileBubble";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.RoomCreate")
 export default class RoomCreate extends React.Component {
diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx
index d6b802beff..11c3ca4e3c 100644
--- a/src/components/views/messages/SenderProfile.tsx
+++ b/src/components/views/messages/SenderProfile.tsx
@@ -39,7 +39,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
     private unmounted: boolean;
 
     constructor(props: IProps) {
-        super(props)
+        super(props);
         const senderId = this.props.mxEvent.getSender();
 
         this.state = {
@@ -56,7 +56,6 @@ export default class SenderProfile extends React.Component<IProps, IState> {
             this.getPublicisedGroups();
         }
 
-
         this.context.on('RoomState.events', this.onRoomStateEvents);
     }
 
@@ -70,7 +69,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
             const userGroups = await FlairStore.getPublicisedGroupsCached(
                 this.context, this.props.mxEvent.getSender(),
             );
-            this.setState({userGroups});
+            this.setState({ userGroups });
         }
     }
 
@@ -106,9 +105,9 @@ export default class SenderProfile extends React.Component<IProps, IState> {
     }
 
     render() {
-        const {mxEvent} = this.props;
+        const { mxEvent } = this.props;
         const colorClass = getUserNameColorClass(mxEvent.getSender());
-        const {msgtype} = mxEvent.getContent();
+        const { msgtype } = mxEvent.getContent();
 
         const disambiguate = mxEvent.sender?.disambiguate;
         const displayName = mxEvent.sender?.rawDisplayName || mxEvent.getSender() || "";
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index ebc4ce7ce8..ffaaaada4d 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -190,7 +190,7 @@ export default class TextualBody extends React.Component {
 
             const buttonRect = button.getBoundingClientRect();
             const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
-            const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+            const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
                 ...toRightOf(buttonRect, 2),
                 message: successful ? _t('Copied!') : _t('Failed to copy'),
             });
@@ -404,7 +404,7 @@ export default class TextualBody extends React.Component {
         },
 
         unhideWidget: () => {
-            this.setState({widgetHidden: false});
+            this.setState({ widgetHidden: false });
             if (global.localStorage) {
                 global.localStorage.removeItem("hide_preview_" + this.props.mxEvent.getId());
             }
@@ -460,7 +460,7 @@ export default class TextualBody extends React.Component {
 
     _openHistoryDialog = async () => {
         const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
-        Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent});
+        Modal.createDialog(MessageEditHistoryDialog, { mxEvent: this.props.mxEvent });
     };
 
     _renderEditedMarker() {
@@ -469,7 +469,7 @@ export default class TextualBody extends React.Component {
 
         const tooltip = <div>
             <div className="mx_Tooltip_title">
-                {_t("Edited at %(date)s", {date: dateString})}
+                {_t("Edited at %(date)s", { date: dateString })}
             </div>
             <div className="mx_Tooltip_sub">
                 {_t("Click to view edits")}
@@ -480,7 +480,7 @@ export default class TextualBody extends React.Component {
             <AccessibleTooltipButton
                 className="mx_EventTile_edited"
                 onClick={this._openHistoryDialog}
-                title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
+                title={_t("Edited at %(date)s. Click to view edits.", { date: dateString })}
                 tooltip={tooltip}
             >
                 <span>{`(${_t("edited")})`}</span>
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index 25da18da0d..663f47dd2a 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as TextForEvent from "../../../TextForEvent";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.TextualEvent")
 export default class TextualEvent extends React.Component {
diff --git a/src/components/views/messages/TileErrorBoundary.js b/src/components/views/messages/TileErrorBoundary.js
index 0e9a7b6128..3da4bdff7b 100644
--- a/src/components/views/messages/TileErrorBoundary.js
+++ b/src/components/views/messages/TileErrorBoundary.js
@@ -20,7 +20,7 @@ import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.TileErrorBoundary")
 export default class TileErrorBoundary extends React.Component {
diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
index 786facc340..0f866216fc 100644
--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef} from "react";
+import React, { forwardRef } from "react";
 
-export default forwardRef(({mxEvent}, ref) => {
+export default forwardRef(({ mxEvent }, ref) => {
     const text = mxEvent.getContent().body;
     return (
         <span className="mx_UnknownBody" ref={ref}>
diff --git a/src/components/views/messages/ViewSourceEvent.js b/src/components/views/messages/ViewSourceEvent.js
index 2ec567c5ad..62454fef1a 100644
--- a/src/components/views/messages/ViewSourceEvent.js
+++ b/src/components/views/messages/ViewSourceEvent.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 @replaceableComponent("views.messages.ViewSourceEvent")
@@ -36,7 +36,7 @@ export default class ViewSourceEvent extends React.PureComponent {
     }
 
     componentDidMount() {
-        const {mxEvent} = this.props;
+        const { mxEvent } = this.props;
 
         const client = MatrixClientPeg.get();
         client.decryptEventIfNeeded(mxEvent);
diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
index 09973809de..2528139a2b 100644
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode} from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
-import {Action} from "../../../dispatcher/actions";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { Action } from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 
 interface IProps {
     header?: ReactNode;
diff --git a/src/components/views/right_panel/EncryptionInfo.tsx b/src/components/views/right_panel/EncryptionInfo.tsx
index db59a88967..c34cf18710 100644
--- a/src/components/views/right_panel/EncryptionInfo.tsx
+++ b/src/components/views/right_panel/EncryptionInfo.tsx
@@ -21,7 +21,7 @@ import { _t } from "../../../languageHandler";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
 
-export const PendingActionSpinner = ({text}) => {
+export const PendingActionSpinner = ({ text }) => {
     const Spinner = sdk.getComponent('elements.Spinner');
     return <div className="mx_EncryptionInfo_spinner">
         <Spinner />
diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx
index 3c93cf6470..132a76e891 100644
--- a/src/components/views/right_panel/GroupHeaderButtons.tsx
+++ b/src/components/views/right_panel/GroupHeaderButtons.tsx
@@ -48,7 +48,7 @@ export default class GroupHeaderButtons extends HeaderButtons {
     protected onAction(payload: ActionPayload) {
         if (payload.action === Action.ViewUser) {
             if ((payload as ViewUserPayload).member) {
-                this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member});
+                this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
             } else {
                 this.setPhase(RightPanelPhases.GroupMemberList);
             }
@@ -57,14 +57,14 @@ export default class GroupHeaderButtons extends HeaderButtons {
         } else if (payload.action === "view_group_room") {
             this.setPhase(
                 RightPanelPhases.GroupRoomInfo,
-                {groupRoomId: payload.groupRoomId, groupId: payload.groupId},
+                { groupRoomId: payload.groupRoomId, groupId: payload.groupId },
             );
         } else if (payload.action === "view_group_room_list") {
             this.setPhase(RightPanelPhases.GroupRoomList);
         } else if (payload.action === "view_group_member_list") {
             this.setPhase(RightPanelPhases.GroupMemberList);
         } else if (payload.action === "view_group_user") {
-            this.setPhase(RightPanelPhases.GroupMemberInfo, {member: payload.member});
+            this.setPhase(RightPanelPhases.GroupMemberInfo, { member: payload.member });
         }
     }
 
diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx
index cdf4f44e06..1625db3f55 100644
--- a/src/components/views/right_panel/HeaderButton.tsx
+++ b/src/components/views/right_panel/HeaderButton.tsx
@@ -48,7 +48,7 @@ export default class HeaderButton extends React.Component<IProps> {
 
     public render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {isHighlighted, onClick, analytics, name, title, ...props} = this.props;
+        const { isHighlighted, onClick, analytics, name, title, ...props } = this.props;
 
         const classes = classNames({
             mx_RightPanel_headerButton: true,
diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx
index 6d44a081d9..c30ad60771 100644
--- a/src/components/views/right_panel/HeaderButtons.tsx
+++ b/src/components/views/right_panel/HeaderButtons.tsx
@@ -88,9 +88,9 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
     private onRightPanelUpdate() {
         const rps = RightPanelStore.getSharedInstance();
         if (this.state.headerKind === HeaderKind.Room) {
-            this.setState({phase: rps.visibleRoomPanelPhase});
+            this.setState({ phase: rps.visibleRoomPanelPhase });
         } else if (this.state.headerKind === HeaderKind.Group) {
-            this.setState({phase: rps.visibleGroupPanelPhase});
+            this.setState({ phase: rps.visibleGroupPanelPhase });
         }
     }
 
diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index 1131c02dbf..19ffe81ac1 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useContext, useEffect, useState} from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventType } from 'matrix-js-sdk/src/@types/event';
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index 54e18e4529..4d256bf4f4 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -77,13 +77,13 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
     protected onAction(payload: ActionPayload) {
         if (payload.action === Action.ViewUser) {
             if (payload.member) {
-                this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member});
+                this.setPhase(RightPanelPhases.RoomMemberInfo, { member: payload.member });
             } else {
                 this.setPhase(RightPanelPhases.RoomMemberList);
             }
         } else if (payload.action === "view_3pid_invite") {
             if (payload.event) {
-                this.setPhase(RightPanelPhases.Room3pidMemberInfo, {event: payload.event});
+                this.setPhase(RightPanelPhases.Room3pidMemberInfo, { event: payload.event });
             } else {
                 this.setPhase(RightPanelPhases.RoomMemberList);
             }
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 937037f644..21c1c39827 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useState, useEffect, useContext} from "react";
+import React, { useCallback, useState, useEffect, useContext } from "react";
 import classNames from "classnames";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
@@ -25,25 +25,25 @@ import { _t } from '../../../languageHandler';
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { Action } from "../../../dispatcher/actions";
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
 import Modal from "../../../Modal";
 import ShareDialog from '../dialogs/ShareDialog';
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import WidgetStore, { IApp } from "../../../stores/WidgetStore";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import RoomContext from "../../../contexts/RoomContext";
-import {UIFeature} from "../../../settings/UIFeature";
-import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
+import { UIFeature } from "../../../settings/UIFeature";
+import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
 import WidgetContextMenu from "../context_menus/WidgetContextMenu";
-import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
+import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RoomName from "../elements/RoomName";
 import UIStore from "../../../stores/UIStore";
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 111e9dbf38..e9d80d49c5 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -164,7 +164,7 @@ function useHasCrossSigningKeys(cli: MatrixClient, member: User, canVerify: bool
     }, [cli, member, canVerify], undefined);
 }
 
-function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
+function DeviceItem({ userId, device }: {userId: string, device: IDevice}) {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
@@ -202,7 +202,6 @@ function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
-
     if (isVerified) {
         return (
             <div className={classes} title={device.deviceId} >
@@ -226,7 +225,7 @@ function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
     }
 }
 
-function DevicesSection({devices, userId, loading}: {devices: IDevice[], userId: string, loading: boolean}) {
+function DevicesSection({ devices, userId, loading }: {devices: IDevice[], userId: string, loading: boolean}) {
     const cli = useContext(MatrixClientContext);
     const userTrust = cli.checkUserTrust(userId);
 
@@ -266,12 +265,12 @@ function DevicesSection({devices, userId, loading}: {devices: IDevice[], userId:
                 unverifiedDevices.push(device);
             }
         }
-        expandCountCaption = _t("%(count)s verified sessions", {count: expandSectionDevices.length});
+        expandCountCaption = _t("%(count)s verified sessions", { count: expandSectionDevices.length });
         expandHideCaption = _t("Hide verified sessions");
         expandIconClasses += " mx_E2EIcon_verified";
     } else {
         expandSectionDevices = devices;
-        expandCountCaption = _t("%(count)s sessions", {count: devices.length});
+        expandCountCaption = _t("%(count)s sessions", { count: devices.length });
         expandHideCaption = _t("Hide sessions");
         expandIconClasses += " mx_E2EIcon_normal";
     }
@@ -317,7 +316,7 @@ const UserOptionsSection: React.FC<{
     isIgnored: boolean;
     canInvite: boolean;
     isSpace?: boolean;
-}> = ({member, isIgnored, canInvite, isSpace}) => {
+}> = ({ member, isIgnored, canInvite, isSpace }) => {
     const cli = useContext(MatrixClientContext);
 
     let ignoreButton = null;
@@ -351,7 +350,7 @@ const UserOptionsSection: React.FC<{
         ignoreButton = (
             <AccessibleButton
                 onClick={onIgnoreToggle}
-                className={classNames("mx_UserInfo_field", {mx_UserInfo_destructive: !isIgnored})}
+                className={classNames("mx_UserInfo_field", { mx_UserInfo_destructive: !isIgnored })}
             >
                 { isIgnored ? _t("Unignore") : _t("Ignore") }
             </AccessibleButton>
@@ -450,7 +449,7 @@ const UserOptionsSection: React.FC<{
 };
 
 const warnSelfDemote = async (isSpace: boolean) => {
-    const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
+    const { finished } = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
         title: _t("Demote yourself?"),
         description:
             <div>
@@ -469,7 +468,7 @@ const warnSelfDemote = async (isSpace: boolean) => {
     return confirmed;
 };
 
-const GenericAdminToolsContainer: React.FC<{}> = ({children}) => {
+const GenericAdminToolsContainer: React.FC<{}> = ({ children }) => {
     return (
         <div className="mx_UserInfo_container">
             <h3>{ _t("Admin Tools") }</h3>
@@ -530,14 +529,14 @@ interface IBaseProps {
     stopUpdating(): void;
 }
 
-const RoomKickButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
+const RoomKickButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdating }) => {
     const cli = useContext(MatrixClientContext);
 
     // check if user can be kicked/disinvited
     if (member.membership !== "invite" && member.membership !== "join") return null;
 
     const onKick = async () => {
-        const {finished} = Modal.createTrackedDialog(
+        const { finished } = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onKick',
             ConfirmUserActionDialog,
@@ -575,11 +574,11 @@ const RoomKickButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdati
     </AccessibleButton>;
 };
 
-const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
+const RedactMessagesButton: React.FC<IBaseProps> = ({ member }) => {
     const cli = useContext(MatrixClientContext);
 
     const onRedactAllMessages = async () => {
-        const {roomId, userId} = member;
+        const { roomId, userId } = member;
         const room = cli.getRoom(roomId);
         if (!room) {
             return;
@@ -607,23 +606,23 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
 
         if (count === 0) {
             Modal.createTrackedDialog('No user messages found to remove', '', InfoDialog, {
-                title: _t("No recent messages by %(user)s found", {user}),
+                title: _t("No recent messages by %(user)s found", { user }),
                 description:
                     <div>
                         <p>{ _t("Try scrolling up in the timeline to see if there are any earlier ones.") }</p>
                     </div>,
             });
         } else {
-            const {finished} = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, {
-                title: _t("Remove recent messages by %(user)s", {user}),
+            const { finished } = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, {
+                title: _t("Remove recent messages by %(user)s", { user }),
                 description:
                     <div>
                         <p>{ _t("You are about to remove %(count)s messages by %(user)s. " +
-                            "This cannot be undone. Do you wish to continue?", {count, user}) }</p>
+                            "This cannot be undone. Do you wish to continue?", { count, user }) }</p>
                         <p>{ _t("For a large amount of messages, this might take some time. " +
                             "Please don't refresh your client in the meantime.") }</p>
                     </div>,
-                button: _t("Remove %(count)s messages", {count}),
+                button: _t("Remove %(count)s messages", { count }),
             });
 
             const [confirmed] = await finished;
@@ -654,11 +653,11 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({member}) => {
     </AccessibleButton>;
 };
 
-const BanToggleButton: React.FC<IBaseProps> = ({member, startUpdating, stopUpdating}) => {
+const BanToggleButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdating }) => {
     const cli = useContext(MatrixClientContext);
 
     const onBanOrUnban = async () => {
-        const {finished} = Modal.createTrackedDialog(
+        const { finished } = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onBanOrUnban',
             ConfirmUserActionDialog,
@@ -715,7 +714,7 @@ interface IBaseRoomProps extends IBaseProps {
     powerLevels: IPowerLevelsContent;
 }
 
-const MuteToggleButton: React.FC<IBaseRoomProps> = ({member, room, powerLevels, startUpdating, stopUpdating}) => {
+const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels, startUpdating, stopUpdating }) => {
     const cli = useContext(MatrixClientContext);
 
     // Don't show the mute/unmute option if the user is not in the room
@@ -862,7 +861,7 @@ const GroupAdminToolsSection: React.FC<{
     groupMember: GroupMember;
     startUpdating(): void;
     stopUpdating(): void;
-}> = ({children, groupId, groupMember, startUpdating, stopUpdating}) => {
+}> = ({ children, groupId, groupMember, startUpdating, stopUpdating }) => {
     const cli = useContext(MatrixClientContext);
 
     const [isPrivileged, setIsPrivileged] = useState(false);
@@ -891,7 +890,7 @@ const GroupAdminToolsSection: React.FC<{
 
     if (isPrivileged) {
         const onKick = async () => {
-            const {finished} = Modal.createDialog(ConfirmUserActionDialog, {
+            const { finished } = Modal.createDialog(ConfirmUserActionDialog, {
                 matrixClient: cli,
                 groupMember,
                 action: isInvited ? _t('Disinvite') : _t('Remove from community'),
@@ -1029,7 +1028,7 @@ const PowerLevelSection: React.FC<{
     room: Room;
     roomPermissions: IRoomPermissions;
     powerLevels: IPowerLevelsContent;
-}> = ({user, room, roomPermissions, powerLevels}) => {
+}> = ({ user, room, roomPermissions, powerLevels }) => {
     if (roomPermissions.canEdit) {
         return (<PowerLevelEditor user={user} room={room} roomPermissions={roomPermissions} />);
     } else {
@@ -1048,7 +1047,7 @@ const PowerLevelEditor: React.FC<{
     user: RoomMember;
     room: Room;
     roomPermissions: IRoomPermissions;
-}> = ({user, room, roomPermissions}) => {
+}> = ({ user, room, roomPermissions }) => {
     const cli = useContext(MatrixClientContext);
 
     const [selectedPowerLevel, setSelectedPowerLevel] = useState(user.powerLevel);
@@ -1081,7 +1080,7 @@ const PowerLevelEditor: React.FC<{
         const myUserId = cli.getUserId();
         const myPower = powerLevelEvent.getContent().users[myUserId];
         if (myPower && parseInt(myPower) === powerLevel) {
-            const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
+            const { finished } = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
                 title: _t("Warning!"),
                 description:
                     <div>
@@ -1198,7 +1197,7 @@ const BasicUserInfo: React.FC<{
     groupId: string;
     devices: IDevice[];
     isRoomEncrypted: boolean;
-}> = ({room, member, groupId, devices, isRoomEncrypted}) => {
+}> = ({ room, member, groupId, devices, isRoomEncrypted }) => {
     const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
@@ -1231,7 +1230,7 @@ const BasicUserInfo: React.FC<{
     const roomPermissions = useRoomPermissions(cli, room, member as RoomMember);
 
     const onSynapseDeactivate = useCallback(async () => {
-        const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
+        const { finished } = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
             title: _t("Deactivate user?"),
             description:
                 <div>{ _t(
@@ -1382,7 +1381,7 @@ const BasicUserInfo: React.FC<{
             }}>
                 { _t("Edit devices") }
             </AccessibleButton>
-        </p>)
+        </p>);
     }
 
     const securitySection = (
@@ -1420,7 +1419,7 @@ type Member = User | RoomMember | GroupMember;
 const UserInfoHeader: React.FC<{
     member: Member;
     e2eStatus: E2EStatus;
-}> = ({member, e2eStatus}) => {
+}> = ({ member, e2eStatus }) => {
     const cli = useContext(MatrixClientContext);
 
     const onMemberAvatarClick = useCallback(() => {
@@ -1567,7 +1566,7 @@ const UserInfo: React.FC<IProps> = ({
     // We have no previousPhase for when viewing a UserInfo from a Group or without a Room at this time
     if (room && phase === RightPanelPhases.EncryptionPanel) {
         previousPhase = RightPanelPhases.RoomMemberInfo;
-        refireParams = {member: member};
+        refireParams = { member: member };
     } else if (room) {
         previousPhase = previousPhase = SettingsStore.getValue("feature_spaces") && room.isSpaceRoom()
             ? RightPanelPhases.SpaceMemberList
@@ -1580,7 +1579,7 @@ const UserInfo: React.FC<IProps> = ({
             phase: previousPhase,
             refireParams: refireParams,
         });
-    }
+    };
 
     let content;
     switch (phase) {
diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx
index d3f2ba8cbf..6087923057 100644
--- a/src/components/views/right_panel/VerificationPanel.tsx
+++ b/src/components/views/right_panel/VerificationPanel.tsx
@@ -16,18 +16,18 @@ limitations under the License.
 
 import React from "react";
 
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
-import {verificationMethods} from 'matrix-js-sdk/src/crypto';
-import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { verificationMethods } from 'matrix-js-sdk/src/crypto';
+import { SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { User } from "matrix-js-sdk/src/models/user";
-import {ReciprocateQRCode} from "matrix-js-sdk/src/crypto/verification/QRCode";
-import {SAS} from "matrix-js-sdk/src/crypto/verification/SAS";
+import { ReciprocateQRCode } from "matrix-js-sdk/src/crypto/verification/QRCode";
+import { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
 
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import E2EIcon from "../rooms/E2EIcon";
 import {
@@ -37,7 +37,7 @@ import {
     PHASE_CANCELLED,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // XXX: Should be defined in matrix-js-sdk
 enum VerificationPhase {
@@ -78,7 +78,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private renderQRPhase() {
-        const {member, request} = this.props;
+        const { member, request } = this.props;
         const showSAS: boolean = request.otherPartySupportsMethod(verificationMethods.SAS);
         const showQR: boolean = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -179,12 +179,12 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private onReciprocateYesClick = () => {
-        this.setState({reciprocateButtonClicked: true});
+        this.setState({ reciprocateButtonClicked: true });
         this.state.reciprocateQREvent.confirm();
     };
 
     private onReciprocateNoClick = () => {
-        this.setState({reciprocateButtonClicked: true});
+        this.setState({ reciprocateButtonClicked: true });
         this.state.reciprocateQREvent.cancel();
     };
 
@@ -194,7 +194,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private renderQRReciprocatePhase() {
-        const {member, request} = this.props;
+        const { member, request } = this.props;
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const description = request.isSelfVerification ?
             _t("Almost there! Is your other session showing the same shield?") :
@@ -234,7 +234,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private renderVerifiedPhase() {
-        const {member, request} = this.props;
+        const { member, request } = this.props;
 
         let text: string;
         if (!request.isSelfVerification) {
@@ -280,7 +280,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private renderCancelledPhase() {
-        const {member, request} = this.props;
+        const { member, request } = this.props;
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -320,7 +320,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     public render() {
-        const {member, phase, request} = this.props;
+        const { member, phase, request } = this.props;
 
         const displayName = (member as User).displayName || (member as RoomMember).name || member.userId;
 
@@ -361,7 +361,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     }
 
     private startSAS = async () => {
-        this.setState({emojiButtonClicked: true});
+        this.setState({ emojiButtonClicked: true });
         const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
         try {
             await verifier.verify();
@@ -379,15 +379,15 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     };
 
     private updateVerifierState = () => {
-        const {request} = this.props;
-        const {sasEvent, reciprocateQREvent} = request.verifier;
+        const { request } = this.props;
+        const { sasEvent, reciprocateQREvent } = request.verifier;
         request.verifier.off('show_sas', this.updateVerifierState);
         request.verifier.off('show_reciprocate_qr', this.updateVerifierState);
-        this.setState({sasEvent, reciprocateQREvent});
+        this.setState({ sasEvent, reciprocateQREvent });
     };
 
     private onRequestChange = async () => {
-        const {request} = this.props;
+        const { request } = this.props;
         const hadVerifier = this.hasVerifier;
         this.hasVerifier = !!request.verifier;
         if (!hadVerifier && this.hasVerifier) {
@@ -404,17 +404,17 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
     };
 
     public componentDidMount() {
-        const {request} = this.props;
+        const { request } = this.props;
         request.on("change", this.onRequestChange);
         if (request.verifier) {
-            const {sasEvent, reciprocateQREvent} = request.verifier;
-            this.setState({sasEvent, reciprocateQREvent});
+            const { sasEvent, reciprocateQREvent } = request.verifier;
+            this.setState({ sasEvent, reciprocateQREvent });
         }
         this.onRequestChange();
     }
 
     public componentWillUnmount() {
-        const {request} = this.props;
+        const { request } = this.props;
         if (request.verifier) {
             request.verifier.off('show_sas', this.updateVerifierState);
             request.verifier.off('show_reciprocate_qr', this.updateVerifierState);
diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx
index 59c4bf2c0c..4192825e93 100644
--- a/src/components/views/room_settings/AliasSettings.tsx
+++ b/src/components/views/room_settings/AliasSettings.tsx
@@ -54,7 +54,7 @@ class EditableAliasesList extends EditableItemList<IEditableAliasesListProps> {
         if (!this.props.domain) {
             return super.renderNewItemField();
         }
-        const onChange = (alias) => this.onNewItemChanged({target: {value: alias}});
+        const onChange = (alias) => this.onNewItemChanged({ target: { value: alias } });
         return (
             <form
                 onSubmit={this.onAliasAdded}
@@ -179,9 +179,9 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     "or a temporary failure occurred.",
                 ),
             });
-            this.setState({canonicalAlias: oldAlias});
+            this.setState({ canonicalAlias: oldAlias });
         }).finally(() => {
-            this.setState({updatingCanonicalAlias: false});
+            this.setState({ updatingCanonicalAlias: false });
         });
     }
 
@@ -213,7 +213,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                 ),
             });
         }).finally(() => {
-            this.setState({updatingCanonicalAlias: false});
+            this.setState({ updatingCanonicalAlias: false });
         });
     }
 
@@ -253,7 +253,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         // to this room. See https://github.com/vector-im/element-web/issues/7353
         MatrixClientPeg.get().deleteAlias(alias).then(() => {
             const localAliases = this.state.localAliases.filter(a => a !== alias);
-            this.setState({localAliases});
+            this.setState({ localAliases });
 
             if (this.state.canonicalAlias === alias) {
                 this.changeCanonicalAlias(null);
@@ -293,7 +293,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
 
     private onNewAltAliasChanged = (value: string) => {
         this.setState({ newAltAlias: value });
-    }
+    };
 
     private onAltAliasAdded = (alias: string) => {
         const altAliases = this.state.altAliases.slice();
@@ -302,20 +302,20 @@ export default class AliasSettings extends React.Component<IProps, IState> {
             this.changeAltAliases(altAliases);
             this.setState({ newAltAlias: "" });
         }
-    }
+    };
 
     private onAltAliasDeleted = (index: number) => {
         const altAliases = this.state.altAliases.slice();
         altAliases.splice(index, 1);
         this.changeAltAliases(altAliases);
-    }
+    };
 
     private getAliases() {
         return this.state.altAliases.concat(this.getLocalNonAltAliases());
     }
 
     private getLocalNonAltAliases() {
-        const {altAliases} = this.state;
+        const { altAliases } = this.state;
         return this.state.localAliases.filter(alias => !altAliases.includes(alias));
     }
 
diff --git a/src/components/views/room_settings/RelatedGroupSettings.js b/src/components/views/room_settings/RelatedGroupSettings.js
index 272ecd1228..f2533bc11e 100644
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import ErrorDialog from "../dialogs/ErrorDialog";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const GROUP_ID_REGEX = /\+\S+:\S+/;
 
@@ -116,7 +116,7 @@ export default class RelatedGroupSettings extends React.Component {
                 itemsLabel={_t('Showing flair for these communities:')}
                 noItemsLabel={_t('This room is not showing flair for any communities')}
                 placeholder={_t(
-                    'New community ID (e.g. +foo:%(localDomain)s)', {localDomain},
+                    'New community ID (e.g. +foo:%(localDomain)s)', { localDomain },
                 )}
             />
         </div>;
diff --git a/src/components/views/room_settings/RoomProfileSettings.js b/src/components/views/room_settings/RoomProfileSettings.js
index b6885887b1..ded186af9c 100644
--- a/src/components/views/room_settings/RoomProfileSettings.js
+++ b/src/components/views/room_settings/RoomProfileSettings.js
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
 import * as sdk from "../../../index";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 // TODO: Merge with ProfileSettings?
 @replaceableComponent("views.room_settings.RoomProfileSettings")
@@ -97,7 +97,7 @@ export default class RoomProfileSettings extends React.Component {
         e.preventDefault();
 
         if (!this.state.enableProfileSave) return;
-        this.setState({enableProfileSave: false});
+        this.setState({ enableProfileSave: false });
 
         const client = MatrixClientPeg.get();
         const newState = {};
@@ -112,7 +112,7 @@ export default class RoomProfileSettings extends React.Component {
 
         if (this.state.avatarFile) {
             const uri = await client.uploadContent(this.state.avatarFile);
-            await client.sendStateEvent(this.props.roomId, 'm.room.avatar', {url: uri}, '');
+            await client.sendStateEvent(this.props.roomId, 'm.room.avatar', { url: uri }, '');
             newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
             newState.originalAvatarUrl = newState.avatarUrl;
             newState.avatarFile = null;
@@ -129,20 +129,20 @@ export default class RoomProfileSettings extends React.Component {
     };
 
     _onDisplayNameChanged = (e) => {
-        this.setState({displayName: e.target.value});
+        this.setState({ displayName: e.target.value });
         if (this.state.originalDisplayName === e.target.value) {
-            this.setState({enableProfileSave: false});
+            this.setState({ enableProfileSave: false });
         } else {
-            this.setState({enableProfileSave: true});
+            this.setState({ enableProfileSave: true });
         }
     };
 
     _onTopicChanged = (e) => {
-        this.setState({topic: e.target.value});
+        this.setState({ topic: e.target.value });
         if (this.state.originalTopic === e.target.value) {
-            this.setState({enableProfileSave: false});
+            this.setState({ enableProfileSave: false });
         } else {
-            this.setState({enableProfileSave: true});
+            this.setState({ enableProfileSave: true });
         }
     };
 
diff --git a/src/components/views/room_settings/RoomPublishSetting.tsx b/src/components/views/room_settings/RoomPublishSetting.tsx
index 95b0ac100d..bc1d6f9e2c 100644
--- a/src/components/views/room_settings/RoomPublishSetting.tsx
+++ b/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -44,7 +44,7 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
     private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
         const newValue = !valueBefore;
-        this.setState({isRoomPublished: newValue});
+        this.setState({ isRoomPublished: newValue });
         const client = MatrixClientPeg.get();
 
         client.setRoomDirectoryVisibility(
@@ -52,14 +52,14 @@ export default class RoomPublishSetting extends React.PureComponent<IProps, ISta
             newValue ? 'public' : 'private',
         ).catch(() => {
             // Roll back the local echo on the change
-            this.setState({isRoomPublished: valueBefore});
+            this.setState({ isRoomPublished: valueBefore });
         });
     };
 
     componentDidMount() {
         const client = MatrixClientPeg.get();
         client.getRoomDirectoryVisibility(this.props.roomId).then((result => {
-            this.setState({isRoomPublished: result.visibility === 'public'});
+            this.setState({ isRoomPublished: result.visibility === 'public' });
         }));
     }
 
diff --git a/src/components/views/room_settings/UrlPreviewSettings.js b/src/components/views/room_settings/UrlPreviewSettings.js
index f797ffeb96..0ff3b051d6 100644
--- a/src/components/views/room_settings/UrlPreviewSettings.js
+++ b/src/components/views/room_settings/UrlPreviewSettings.js
@@ -23,10 +23,10 @@ import * as sdk from "../../../index";
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import dis from "../../../dispatcher/dispatcher";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {Action} from "../../../dispatcher/actions";
-import {SettingLevel} from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { Action } from "../../../dispatcher/actions";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.room_settings.UrlPreviewSettings")
 export default class UrlPreviewSettings extends React.Component {
diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
index 0b32d5d1bb..2866780255 100644
--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Resizable} from "re-resizable";
+import { Resizable } from "re-resizable";
 
 import AppTile from '../elements/AppTile';
 import dis from '../../../dispatcher/dispatcher';
@@ -26,16 +26,16 @@ import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import ResizeHandle from "../elements/ResizeHandle";
 import Resizer from "../../../resizer/resizer";
 import PercentageDistributor from "../../../resizer/distributors/percentage";
-import {Container, WidgetLayoutStore} from "../../../stores/widgets/WidgetLayoutStore";
-import {clamp, percentageOf, percentageWithin} from "../../../utils/numbers";
-import {useStateCallback} from "../../../hooks/useStateCallback";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
+import { useStateCallback } from "../../../hooks/useStateCallback";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 
 @replaceableComponent("views.rooms.AppsDrawer")
@@ -303,7 +303,7 @@ const PersistentVResizer = ({
     });
 
     return <Resizable
-        size={{height: Math.min(height, maxHeight)}}
+        size={{ height: Math.min(height, maxHeight) }}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {
@@ -317,9 +317,9 @@ const PersistentVResizer = ({
             resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
-        handleClasses={{bottom: handleClass}}
+        handleClasses={{ bottom: handleClass }}
         className={className}
-        enable={{bottom: true}}
+        enable={{ bottom: true }}
     >
         { children }
     </Resizable>;
diff --git a/src/components/views/rooms/Autocomplete.tsx b/src/components/views/rooms/Autocomplete.tsx
index 7054741da4..8fbecbe722 100644
--- a/src/components/views/rooms/Autocomplete.tsx
+++ b/src/components/views/rooms/Autocomplete.tsx
@@ -15,15 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef, KeyboardEvent} from 'react';
+import React, { createRef, KeyboardEvent } from 'react';
 import classNames from 'classnames';
-import {flatMap} from "lodash";
-import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter';
-import {Room} from 'matrix-js-sdk/src/models/room';
+import { flatMap } from "lodash";
+import { ICompletion, ISelectionRange, IProviderCompletions } from '../../../autocomplete/Autocompleter';
+import { Room } from 'matrix-js-sdk/src/models/room';
 
 import SettingsStore from "../../../settings/SettingsStore";
 import Autocompleter from '../../../autocomplete/Autocompleter';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const COMPOSER_SELECTED = 0;
 const MAX_PROVIDER_MATCHES = 20;
@@ -247,7 +247,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     };
 
     setSelection(selectionOffset: number) {
-        this.setState({selectionOffset, hide: false});
+        this.setState({ selectionOffset, hide: false });
         if (this.props.onSelectionChange) {
             this.props.onSelectionChange(this.state.completionList[selectionOffset - 1], selectionOffset - 1);
         }
@@ -273,7 +273,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         const renderedCompletions = this.state.completions.map((completionResult, i) => {
             const completions = completionResult.completions.map((completion, j) => {
                 const selected = position === this.state.selectionOffset;
-                const className = classNames('mx_Autocomplete_Completion', {selected});
+                const className = classNames('mx_Autocomplete_Completion', { selected });
                 const componentPosition = position;
                 position++;
 
@@ -291,7 +291,6 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
                 });
             });
 
-
             return completions.length > 0 ? (
                 <div key={i} className="mx_Autocomplete_ProviderSection">
                     <div className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</div>
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 04c7a57048..1c817140fa 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
-import { Room } from 'matrix-js-sdk/src/models/room'
+import { Room } from 'matrix-js-sdk/src/models/room';
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AppsDrawer from './AppsDrawer';
@@ -126,7 +126,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
                         link,
                         severity,
                         stateKey,
-                    })
+                    });
                 }
             }
         }
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 981ff1b4ae..94a292afe7 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -147,7 +147,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const enabledChange = this.props.disabled !== prevProps.disabled;
         const placeholderChanged = this.props.placeholder !== prevProps.placeholder;
         if (this.props.placeholder && (placeholderChanged || enabledChange)) {
-            const {isEmpty} = this.props.model;
+            const { isEmpty } = this.props.model;
             if (isEmpty) {
                 this.showPlaceholder();
             } else {
@@ -157,7 +157,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     private replaceEmoticon = (caretPosition: DocumentPosition) => {
-        const {model} = this.props;
+        const { model } = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 8 characters backwards from caretPosition,
         // as a space to look for an emoticon
@@ -174,7 +174,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             const data = EMOTICON_TO_EMOJI.get(query) || EMOTICON_TO_EMOJI.get(query.toLowerCase());
 
             if (data) {
-                const {partCreator} = model;
+                const { partCreator } = model;
                 const hasPrecedingSpace = emoticonMatch[0][0] === " ";
                 // we need the range to only comprise of the emoticon
                 // because we'll replace the whole range with an emoji,
@@ -200,7 +200,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             const position = selection instanceof Range ? selection.end : selection;
             this.setLastCaretFromPosition(position);
         }
-        const {isEmpty} = this.props.model;
+        const { isEmpty } = this.props.model;
         if (this.props.placeholder) {
             if (isEmpty) {
                 this.showPlaceholder();
@@ -211,13 +211,13 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         if (isEmpty) {
             this.formatBarRef.current.hide();
         }
-        this.setState({autoComplete: this.props.model.autoComplete});
+        this.setState({ autoComplete: this.props.model.autoComplete });
         this.historyManager.tryPush(this.props.model, selection, inputType, diff);
 
         let isTyping = !this.props.model.isEmpty;
         // If the user is entering a command, only consider them typing if it is one which sends a message into the room
         if (isTyping && this.props.model.parts[0].type === "command") {
-            const {cmd} = parseCommandString(this.props.model.parts[0].text);
+            const { cmd } = parseCommandString(this.props.model.parts[0].text);
             const command = CommandMap.get(cmd);
             if (!command || !command.isEnabled() || command.category !== CommandCategories.messages) {
                 isTyping = false;
@@ -263,10 +263,10 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const isSafari = ua.includes('safari/') && !ua.includes('chrome/');
 
         if (isSafari) {
-            this.onInput({inputType: "insertCompositionText"});
+            this.onInput({ inputType: "insertCompositionText" });
         } else {
             Promise.resolve().then(() => {
-                this.onInput({inputType: "insertCompositionText"});
+                this.onInput({ inputType: "insertCompositionText" });
             });
         }
     };
@@ -282,7 +282,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const selection = document.getSelection();
         const text = selection.toString();
         if (text) {
-            const {model} = this.props;
+            const { model } = this.props;
             const range = getRangeForSelection(this.editorRef.current, model, selection);
             const selectedParts = range.parts.map(p => p.serialize());
             event.clipboardData.setData("application/x-element-composer", JSON.stringify(selectedParts));
@@ -311,8 +311,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             return true;
         }
 
-        const {model} = this.props;
-        const {partCreator} = model;
+        const { model } = this.props;
+        const { partCreator } = model;
         const partsText = event.clipboardData.getData("application/x-element-composer");
         let parts;
         if (partsText) {
@@ -335,13 +335,13 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
         this.modifiedFlag = true;
         const sel = document.getSelection();
-        const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
+        const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
         this.props.model.update(text, event.inputType, caret);
     };
 
     private insertText(textToInsert: string, inputType = "insertText") {
         const sel = document.getSelection();
-        const {caret, text} = getCaretOffsetAndText(this.editorRef.current, sel);
+        const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
         const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
         caret.offset += textToInsert.length;
         this.modifiedFlag = true;
@@ -354,7 +354,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     // we need to recalculate it, to be able to know where to insert content after
     // losing focus
     private setLastCaretFromPosition(position: DocumentPosition) {
-        const {model} = this.props;
+        const { model } = this.props;
         this._isCaretAtEnd = position.isAtEnd(model);
         this.lastCaret = position.asOffset(model);
         this.lastSelection = cloneSelection(document.getSelection());
@@ -370,7 +370,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         const selection = document.getSelection();
         if (!this.lastSelection || !selectionEquals(this.lastSelection, selection)) {
             this.lastSelection = cloneSelection(selection);
-            const {caret, text} = getCaretOffsetAndText(this.editorRef.current, selection);
+            const { caret, text } = getCaretOffsetAndText(this.editorRef.current, selection);
             this.lastCaret = caret;
             this._isCaretAtEnd = caret.offset === text.length;
         }
@@ -409,7 +409,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     };
 
     private onSelectionChange = () => {
-        const {isEmpty} = this.props.model;
+        const { isEmpty } = this.props.model;
 
         this.refreshLastCaretIfNeeded();
         const selection = document.getSelection();
@@ -446,7 +446,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 break;
             case MessageComposerAction.EditRedo:
                 if (this.historyManager.canRedo()) {
-                    const {parts, caret} = this.historyManager.redo();
+                    const { parts, caret } = this.historyManager.redo();
                     // pass matching inputType so historyManager doesn't push echo
                     // when invoked from rerender callback.
                     model.reset(parts, caret, "historyRedo");
@@ -455,7 +455,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 break;
             case MessageComposerAction.EditUndo:
                 if (this.historyManager.canUndo()) {
-                    const {parts, caret} = this.historyManager.undo(this.props.model);
+                    const { parts, caret } = this.historyManager.undo(this.props.model);
                     // pass matching inputType so historyManager doesn't push echo
                     // when invoked from rerender callback.
                     model.reset(parts, caret, "historyUndo");
@@ -525,8 +525,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
     private async tabCompleteName() {
         try {
-            await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
-            const {model} = this.props;
+            await new Promise<void>(resolve => this.setState({ showVisualBell: false }, resolve));
+            const { model } = this.props;
             const caret = this.getCaret();
             const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
             const range = model.startRange(position);
@@ -537,7 +537,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                     part.type === "command"
                 );
             });
-            const {partCreator} = model;
+            const { partCreator } = model;
             // await for auto-complete to be open
             await model.transform(() => {
                 const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
@@ -548,7 +548,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             if (model.autoComplete) {
                 await model.autoComplete.startSelection();
                 if (!model.autoComplete.hasSelection()) {
-                    this.setState({showVisualBell: true});
+                    this.setState({ showVisualBell: true });
                     model.autoComplete.close();
                 }
             }
@@ -569,7 +569,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number) => {
         this.modifiedFlag = true;
         this.props.model.autoComplete.onComponentSelectionChange(completion);
-        this.setState({completionIndex});
+        this.setState({ completionIndex });
     };
 
     private configureEmoticonAutoReplace = () => {
@@ -599,7 +599,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         // not really, but we could not serialize the parts, and just change the autoCompleter
         partCreator.setAutoCompleteCreator(getAutoCompleteCreator(
             () => this.autocompleteRef.current,
-            query => new Promise(resolve => this.setState({query}, resolve)),
+            query => new Promise(resolve => this.setState({ query }, resolve)),
         ));
         // initial render of model
         this.updateEditorState(this.getInitialCaretPosition());
@@ -666,7 +666,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                     query={query}
                     onConfirm={this.onAutoCompleteConfirm}
                     onSelectionChange={this.onAutoCompleteSelectionChange}
-                    selection={{beginning: true, end: queryLen, start: queryLen}}
+                    selection={{ beginning: true, end: queryLen, start: queryLen }}
                     room={this.props.room}
                 />
             </div>);
@@ -685,7 +685,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             quote: ctrlShortcutLabel(">"),
         };
 
-        const {completionIndex} = this.state;
+        const { completionIndex } = this.state;
 
         return (<div className={wrapperClasses}>
             { autoComplete }
@@ -719,8 +719,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public insertMention(userId: string) {
-        const {model} = this.props;
-        const {partCreator} = model;
+        const { model } = this.props;
+        const { partCreator } = model;
         const member = this.props.room.getMember(userId);
         const displayName = member ?
             member.rawDisplayName : userId;
@@ -737,9 +737,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public insertQuotedMessage(event: MatrixEvent) {
-        const {model} = this.props;
-        const {partCreator} = model;
-        const quoteParts = parseEvent(event, partCreator, {isQuotedMessage: true});
+        const { model } = this.props;
+        const { partCreator } = model;
+        const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
         // add two newlines
         quoteParts.push(partCreator.newline());
         quoteParts.push(partCreator.newline());
@@ -752,8 +752,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public insertPlaintext(text: string) {
-        const {model} = this.props;
-        const {partCreator} = model;
+        const { model } = this.props;
+        const { partCreator } = model;
         const caret = this.getCaret();
         const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
         model.transform(() => {
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index d7316f198d..7425af6060 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 
-import {_t, _td} from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
 
@@ -42,7 +42,7 @@ const crossSigningRoomTitles = {
     [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
 };
 
-const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => {
+const E2EIcon = ({ isUser, status, className, size, onClick, hideTooltip, bordered }) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
@@ -62,7 +62,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
 
     let style;
     if (size) {
-        style = {width: `${size}px`, height: `${size}px`};
+        style = { width: `${size}px`, height: `${size}px` };
     }
 
     const onMouseOver = () => setHover(true);
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 914f08eac7..0ab972b5f1 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -88,7 +88,7 @@ function createEditContent(model, editedEvent) {
         body: `${plainPrefix} * ${body}`,
     };
 
-    const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: isReply});
+    const formattedBody = htmlSerializeIfNeeded(model, { forceHTML: isReply });
     if (formattedBody) {
         newContent.format = "org.matrix.custom.html";
         newContent.formatted_body = formattedBody;
@@ -156,7 +156,7 @@ export default class EditMessageComposer extends React.Component {
                 const previousEvent = findEditableEvent(this._getRoom(), false,
                     this.props.editState.getEvent().getId());
                 if (previousEvent) {
-                    dis.dispatch({action: 'edit_event', event: previousEvent});
+                    dis.dispatch({ action: 'edit_event', event: previousEvent });
                     event.preventDefault();
                 }
                 break;
@@ -167,10 +167,10 @@ export default class EditMessageComposer extends React.Component {
                 }
                 const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
                 if (nextEvent) {
-                    dis.dispatch({action: 'edit_event', event: nextEvent});
+                    dis.dispatch({ action: 'edit_event', event: nextEvent });
                 } else {
                     this._clearStoredEditorState();
-                    dis.dispatch({action: 'edit_event', event: null});
+                    dis.dispatch({ action: 'edit_event', event: null });
                     dis.fire(Action.FocusComposer);
                 }
                 event.preventDefault();
@@ -189,7 +189,7 @@ export default class EditMessageComposer extends React.Component {
 
     _cancelEdit = () => {
         this._clearStoredEditorState();
-        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({ action: "edit_event", event: null });
         dis.fire(Action.FocusComposer);
     }
 
@@ -201,7 +201,7 @@ export default class EditMessageComposer extends React.Component {
         const json = localStorage.getItem(this._editorStateKey);
         if (json) {
             try {
-                const {parts: serializedParts} = JSON.parse(json);
+                const { parts: serializedParts } = JSON.parse(json);
                 const parts = serializedParts.map(p => partCreator.deserializePart(p));
                 return parts;
             } catch (e) {
@@ -264,7 +264,7 @@ export default class EditMessageComposer extends React.Component {
             }
             return text + part.text;
         }, "");
-        const {cmd, args} = getCommand(commandText);
+        const { cmd, args } = getCommand(commandText);
         return [cmd, args, commandText];
     }
 
@@ -332,11 +332,11 @@ export default class EditMessageComposer extends React.Component {
                 } else {
                     // ask the user if their unknown command should be sent as a message
                     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                    const {finished} = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
+                    const { finished } = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
                         title: _t("Unknown Command"),
                         description: <div>
                             <p>
-                                { _t("Unrecognised command: %(commandText)s", {commandText}) }
+                                { _t("Unrecognised command: %(commandText)s", { commandText }) }
                             </p>
                             <p>
                                 { _t("You can use <code>/help</code> to list available commands. " +
@@ -361,13 +361,13 @@ export default class EditMessageComposer extends React.Component {
                 this._cancelPreviousPendingEdit();
                 const prom = this.context.sendMessage(roomId, editContent);
                 this._clearStoredEditorState();
-                dis.dispatch({action: "message_sent"});
+                dis.dispatch({ action: "message_sent" });
                 CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
             }
         }
 
         // close the event editing and focus composer
-        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({ action: "edit_event", event: null });
         dis.fire(Action.FocusComposer);
     };
 
@@ -404,7 +404,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _createEditorModel() {
-        const {editState} = this.props;
+        const { editState } = this.props;
         const room = this._getRoom();
         const partCreator = new CommandPartCreator(room, this.context);
         let parts;
@@ -421,7 +421,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _getInitialCaretPosition() {
-        const {editState} = this.props;
+        const { editState } = this.props;
         let caretPosition;
         if (editState.hasEditorState() && editState.getCaret()) {
             // if restoring state from a previous editor,
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index 2032856500..74738c3683 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -33,7 +33,7 @@ export enum PowerStatus {
 const PowerLabel: Record<PowerStatus, string> = {
     [PowerStatus.Admin]: _td("Admin"),
     [PowerStatus.Moderator]: _td("Mod"),
-}
+};
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
@@ -116,7 +116,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         mainClassNames[presenceClass] = true;
 
         let nameEl;
-        const {name} = this.props;
+        const { name } = this.props;
 
         if (!this.props.suppressOnHover) {
             const activeAgo = this.props.presenceLastActiveAgo ?
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index c1c6bd4600..fed6d695f7 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -723,7 +723,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                     { avatars }
                 </span>
             </div>
-        )
+        );
     }
 
     onSenderProfileClick = event => {
@@ -870,7 +870,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
-            const {mxEvent} = this.props;
+            const { mxEvent } = this.props;
             console.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`);
             return <div className="mx_EventTile mx_EventTile_info mx_MNoticeBody">
                 <div className="mx_EventTile_line">
@@ -1017,7 +1017,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             _t(
                 '<requestLink>Re-request encryption keys</requestLink> from your other sessions.',
                 {},
-                {'requestLink': (sub) => <a onClick={this.onRequestKeysClick}>{ sub }</a>},
+                { 'requestLink': (sub) => <a onClick={this.onRequestKeysClick}>{ sub }</a> },
             );
 
         const TooltipButton = sdk.getComponent('elements.TooltipButton');
@@ -1207,7 +1207,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         avatar,
 
                     ])
-                )
+                );
             }
         }
     }
@@ -1290,11 +1290,11 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
     }
 
     onHoverStart = () => {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     };
 
     onHoverEnd = () => {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     };
 
     render() {
@@ -1332,11 +1332,11 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
     }
 
     onHoverStart = () => {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     };
 
     onHoverEnd = () => {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     };
 
     render() {
diff --git a/src/components/views/rooms/ExtraTile.tsx b/src/components/views/rooms/ExtraTile.tsx
index 20d12955d5..18c5d50ae8 100644
--- a/src/components/views/rooms/ExtraTile.tsx
+++ b/src/components/views/rooms/ExtraTile.tsx
@@ -46,11 +46,11 @@ export default class ExtraTile extends React.Component<IProps, IState> {
     }
 
     private onTileMouseEnter = () => {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     };
 
     private onTileMouseLeave = () => {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     };
 
     public render(): React.ReactElement {
diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 904040a067..360ca41d55 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -15,18 +15,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { AllHtmlEntities } from 'html-entities';
-import {linkifyElement} from '../../../HtmlUtils';
+import { linkifyElement } from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import * as ImageUtils from "../../../ImageUtils";
 import { _t } from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.rooms.LinkPreviewWidget")
 export default class LinkPreviewWidget extends React.Component {
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 5ebe5bea59..68f87580df 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -148,7 +148,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             const room = cli.getRoom(this.props.roomId);
             const membership = room && room.getMyMembership();
             if (membership === "join") {
-                this.setState({loading: true});
+                this.setState({ loading: true });
                 try {
                     await room.loadMembersIfNeeded();
                 } catch (ex) {/* already logged in RoomView */}
@@ -242,7 +242,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     }, 500);
 
     private updateListNow(): void {
-        const members = this.roomMembers()
+        const members = this.roomMembers();
 
         this.setState({
             loading: false,
@@ -471,7 +471,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     }
 
     private getChildrenJoined = (start: number, end: number): Array<JSX.Element> => {
-        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end))
+        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
     };
 
     private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length;
@@ -487,7 +487,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
     private getChildCountInvited = (): number => {
         return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
-    }
+    };
 
     render() {
         if (this.state.loading) {
@@ -582,7 +582,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
     onInviteButtonClick = (): void => {
         if (MatrixClientPeg.get().isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
             return;
         }
 
diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
index 2f9927a756..ce571f78ad 100644
--- a/src/components/views/rooms/MemberTile.tsx
+++ b/src/components/views/rooms/MemberTile.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import dis from "../../../dispatcher/dispatcher";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index f7d562fca0..db57f98025 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -69,7 +69,7 @@ function SendButton(props: ISendButtonProps) {
     );
 }
 
-const EmojiButton = ({addEmoji}) => {
+const EmojiButton = ({ addEmoji }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
     let contextMenu;
@@ -132,11 +132,11 @@ class UploadButton extends React.Component<IUploadButtonProps> {
 
     private onUploadClick = () => {
         if (MatrixClientPeg.get().isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({ action: 'require_registration' });
             return;
         }
         this.uploadInput.current.click();
-    }
+    };
 
     private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
         if (ev.target.files.length === 0) return;
@@ -157,10 +157,10 @@ class UploadButton extends React.Component<IUploadButtonProps> {
         // to empty.
         // NB. we need to set 'value': the 'files' property is immutable.
         ev.target.value = '';
-    }
+    };
 
     render() {
-        const uploadInputStyle = {display: 'none'};
+        const uploadInputStyle = { display: 'none' };
         return (
             <AccessibleTooltipButton
                 className="mx_MessageComposer_button mx_MessageComposer_upload"
@@ -237,7 +237,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         // if we have the member already, do that
         const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
         if (me) {
-            this.setState({me});
+            this.setState({ me });
             return;
         }
         // Otherwise, wait for member loading to finish and then update the member for the avatar.
@@ -245,7 +245,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         // will return the promise for the existing operation
         this.props.room.loadMembersIfNeeded().then(() => {
             const me = this.props.room.getMember(MatrixClientPeg.get().getUserId());
-            this.setState({me});
+            this.setState({ me });
         });
     }
 
@@ -261,12 +261,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
         if (ev.getType() === 'm.room.tombstone') {
-            this.setState({tombstone: this.getRoomTombstone()});
+            this.setState({ tombstone: this.getRoomTombstone() });
         }
         if (ev.getType() === 'm.room.power_levels') {
-            this.setState({canSendMessages: this.props.room.maySendMessage()});
+            this.setState({ canSendMessages: this.props.room.maySendMessage() });
         }
-    }
+    };
 
     private getRoomTombstone() {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
@@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 viaServers: viaServers,
             },
         });
-    }
+    };
 
     private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
@@ -316,7 +316,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 return _t('Send a message…');
             }
         }
-    }
+    };
 
     addEmoji(emoji: string) {
         dis.dispatch<ComposerInsertPayload>({
@@ -335,24 +335,24 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         // XXX: Private function access
         this.messageComposerInput._sendMessage();
-    }
+    };
 
     onChange = (model) => {
         this.setState({
             isComposerEmpty: model.isEmpty,
         });
-    }
+    };
 
     private onVoiceStoreUpdate = () => {
         const recording = VoiceRecordingStore.instance.activeRecording;
-        this.setState({haveRecording: !!recording});
+        this.setState({ haveRecording: !!recording });
         if (recording) {
             // We show a little heads up that the recording is about to automatically end soon. The 3s
             // display time is completely arbitrary. Note that we don't need to deregister the listener
             // because the recording instance will clean that up for us.
-            recording.on(RecordingState.EndingSoon, ({secondsLeft}) => {
-                this.setState({recordingTimeLeftSeconds: secondsLeft});
-                setTimeout(() => this.setState({recordingTimeLeftSeconds: null}), 3000);
+            recording.on(RecordingState.EndingSoon, ({ secondsLeft }) => {
+                this.setState({ recordingTimeLeftSeconds: secondsLeft });
+                setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
             });
         }
     };
@@ -442,7 +442,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
         if (secondsLeft) {
             recordingTooltip = <Tooltip
-                label={_t("%(seconds)ss left", {seconds: secondsLeft})}
+                label={_t("%(seconds)ss left", { seconds: secondsLeft })}
                 alignment={Alignment.Top} yOffset={-50}
             />;
         }
diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js
index fc0f785b08..c31538c6cd 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.js
@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.MessageComposerFormatBar")
 export default class MessageComposerFormatBar extends React.PureComponent {
@@ -30,7 +30,7 @@ export default class MessageComposerFormatBar extends React.PureComponent {
 
     constructor(props) {
         super(props);
-        this.state = {visible: false};
+        this.state = { visible: false };
     }
 
     render() {
@@ -47,7 +47,7 @@ export default class MessageComposerFormatBar extends React.PureComponent {
     }
 
     showAt(selectionRect) {
-        this.setState({visible: true});
+        this.setState({ visible: true });
         const parentRect = this._formatBarRef.parentElement.getBoundingClientRect();
         this._formatBarRef.style.left = `${selectionRect.left - parentRect.left}px`;
         // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok.
@@ -55,7 +55,7 @@ export default class MessageComposerFormatBar extends React.PureComponent {
     }
 
     hide() {
-        this.setState({visible: false});
+        this.setState({ visible: false });
     }
 }
 
diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index cae86846d9..8961bcc253 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -45,7 +45,7 @@ function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room):
 
 const NewRoomIntro = () => {
     const cli = useContext(MatrixClientContext);
-    const {room, roomId} = useContext(RoomContext);
+    const { room, roomId } = useContext(RoomContext);
 
     const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId);
     let body;
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 4b843bfc29..778a8a7215 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -21,7 +21,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
 import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     notification: NotificationState;
@@ -86,7 +86,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
     }
 
     private countPreferenceChanged = () => {
-        this.setState({showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId)});
+        this.setState({ showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId) });
     };
 
     private onNotificationUpdate = () => {
@@ -95,7 +95,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public render(): React.ReactElement {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const {notification, forceCount, roomId, onClick, ...props} = this.props;
+        const { notification, forceCount, roomId, onClick, ...props } = this.props;
 
         // Don't show a badge if we don't need to
         if (notification.isIdle) return null;
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 64f2c1160b..2ea7ac6428 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import {formatDate} from '../../../DateUtils';
+import { formatDate } from '../../../DateUtils';
 import NodeAnimator from "../../../NodeAnimator";
 import * as sdk from "../../../index";
-import {toPx} from "../../../utils/units";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { toPx } from "../../../utils/units";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.ReadReceiptMarker")
 export default class ReadReceiptMarker extends React.PureComponent {
@@ -173,15 +173,15 @@ export default class ReadReceiptMarker extends React.PureComponent {
             if (!this.props.member || this.props.fallbackUserId === this.props.member.rawDisplayName) {
                 title = _t(
                     "Seen by %(userName)s at %(dateTime)s",
-                    {userName: this.props.fallbackUserId,
-                    dateTime: dateString},
+                    { userName: this.props.fallbackUserId,
+                    dateTime: dateString },
                 );
             } else {
                 title = _t(
                     "Seen by %(displayName)s (%(userName)s) at %(dateTime)s",
-                    {displayName: this.props.member.rawDisplayName,
+                    { displayName: this.props.member.rawDisplayName,
                     userName: this.props.fallbackUserId,
-                    dateTime: dateString},
+                    dateTime: dateString },
                 );
             }
         }
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index c61424a059..f9c8e622a7 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -21,9 +21,9 @@ import { _t } from '../../../languageHandler';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import PropTypes from "prop-types";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function cancelQuoting() {
     dis.dispatch({
diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx
index 00f13209a2..89f004ffc1 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs.tsx
@@ -71,13 +71,13 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
         // The second update, on the next available tick, causes the "enter" animation to start
         // again and this time we want to show the newest breadcrumb because it'll be hidden
         // off screen for the animation.
-        this.setState({doAnimation: false, skipFirst: true});
-        setTimeout(() => this.setState({doAnimation: true, skipFirst: false}), 0);
+        this.setState({ doAnimation: false, skipFirst: true });
+        setTimeout(() => this.setState({ doAnimation: true, skipFirst: false }), 0);
     };
 
     private viewRoom = (room: Room, index: number) => {
         Analytics.trackEvent("Breadcrumbs", "click_node", String(index));
-        defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId});
+        defaultDispatcher.dispatch({ action: "view_room", room_id: room.roomId });
     };
 
     public render(): React.ReactElement {
@@ -87,7 +87,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
                     className="mx_RoomBreadcrumbs_crumb"
                     key={r.roomId}
                     onClick={() => this.viewRoom(r, i)}
-                    aria-label={_t("Room %(name)s", {name: r.name})}
+                    aria-label={_t("Room %(name)s", { name: r.name })}
                     title={r.name}
                     tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
                 >
diff --git a/src/components/views/rooms/RoomDetailList.js b/src/components/views/rooms/RoomDetailList.js
index be22cda199..bf2f5418c9 100644
--- a/src/components/views/rooms/RoomDetailList.js
+++ b/src/components/views/rooms/RoomDetailList.js
@@ -21,8 +21,8 @@ import { _t } from '../../../languageHandler';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import {roomShape} from './RoomDetailRow';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { roomShape } from './RoomDetailRow';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.RoomDetailList")
 export default class RoomDetailList extends React.Component {
diff --git a/src/components/views/rooms/RoomDetailRow.js b/src/components/views/rooms/RoomDetailRow.js
index ad073f3278..6cee691dfa 100644
--- a/src/components/views/rooms/RoomDetailRow.js
+++ b/src/components/views/rooms/RoomDetailRow.js
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import * as sdk from '../../../index';
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import { _t } from '../../../languageHandler';
 import { linkifyElement } from '../../../HtmlUtils';
 import PropTypes from 'prop-types';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 export function getDisplayAliasForRoom(room) {
     return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index eb50224a60..c94256800d 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -45,9 +45,9 @@ import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
 import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
 import AccessibleButton from "../elements/AccessibleButton";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
-import SpaceStore, {ISuggestedRoom, SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
-import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import SpaceStore, { ISuggestedRoom, SUGGESTED_ROOMS } from "../../../stores/SpaceStore";
+import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../../utils/space";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 
 interface IProps {
@@ -119,7 +119,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         defaultHidden: false,
         addRoomLabel: _td("Start chat"),
         onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
-            (dispatcher || defaultDispatcher).dispatch({action: 'view_create_chat'});
+            (dispatcher || defaultDispatcher).dispatch({ action: 'view_create_chat' });
         },
     },
     [DefaultTagID.Untagged]: {
@@ -180,7 +180,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                         e.preventDefault();
                         e.stopPropagation();
                         onFinished();
-                        defaultDispatcher.dispatch({action: "view_create_room"});
+                        defaultDispatcher.dispatch({ action: "view_create_room" });
                     }}
                 />
                 <IconizedContextMenuOption
@@ -356,7 +356,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             const newSublists = objectWithOnly(newLists, newListIds);
             const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));
 
-            this.setState({sublists, isNameFiltering}, () => {
+            this.setState({ sublists, isNameFiltering }, () => {
                 this.props.onResize();
             });
         }
@@ -495,7 +495,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     resizeNotifier={this.props.resizeNotifier}
                     alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
                     onListCollapse={this.props.onListCollapse}
-                />
+                />;
             });
     }
 
@@ -542,7 +542,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     </AccessibleButton> }
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
-                const unfilteredLists = RoomListStore.instance.unfilteredLists
+                const unfilteredLists = RoomListStore.instance.unfilteredLists;
                 const unfilteredRooms = unfilteredLists[DefaultTagID.Untagged] || [];
                 const unfilteredHistorical = unfilteredLists[DefaultTagID.Archived] || [];
                 const unfilteredFavourite = unfilteredLists[DefaultTagID.Favourite] || [];
@@ -572,7 +572,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         const sublists = this.renderSublists();
         return (
             <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
-                {({onKeyDownHandler}) => (
+                {({ onKeyDownHandler }) => (
                     <div
                         onFocus={this.props.onFocus}
                         onBlur={this.props.onBlur}
diff --git a/src/components/views/rooms/RoomListNumResults.tsx b/src/components/views/rooms/RoomListNumResults.tsx
index 19023e361c..a05db89f61 100644
--- a/src/components/views/rooms/RoomListNumResults.tsx
+++ b/src/components/views/rooms/RoomListNumResults.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 
 import { _t } from "../../../languageHandler";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
-import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/SpaceStore";
 
 interface IProps {
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 7f20451d6d..155b7ffe63 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -17,14 +17,14 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import SdkConfig from "../../../SdkConfig";
 import IdentityAuthClient from '../../../IdentityAuthClient';
-import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InviteReason from "../elements/InviteReason";
 
@@ -114,7 +114,7 @@ export default class RoomPreviewBar extends React.Component {
         // invited, fetch the user's account emails and discovery bindings so we
         // can check them against the email that was invited.
         if (this.props.inviterName && this.props.invitedEmail) {
-            this.setState({busy: true});
+            this.setState({ busy: true });
             try {
                 // Gather the account 3PIDs
                 const account3pids = await MatrixClientPeg.get().getThreePids();
@@ -125,7 +125,7 @@ export default class RoomPreviewBar extends React.Component {
                 // If we have an IS connected, use that to lookup the email and
                 // check the bound MXID.
                 if (!MatrixClientPeg.get().getIdentityServerUrl()) {
-                    this.setState({busy: false});
+                    this.setState({ busy: false });
                     return;
                 }
                 const authClient = new IdentityAuthClient();
@@ -136,11 +136,11 @@ export default class RoomPreviewBar extends React.Component {
                     undefined /* callback */,
                     identityAccessToken,
                 );
-                this.setState({invitedEmailMxid: result.mxid});
+                this.setState({ invitedEmailMxid: result.mxid });
             } catch (err) {
-                this.setState({threePidFetchError: err});
+                this.setState({ threePidFetchError: err });
             }
-            this.setState({busy: false});
+            this.setState({ busy: false });
         }
     }
 
@@ -214,7 +214,7 @@ export default class RoomPreviewBar extends React.Component {
         const memberName = kickerMember ?
             kickerMember.name : myMember.events.member.getSender();
         const reason = myMember.events.member.getContent().reason;
-        return {memberName, reason};
+        return { memberName, reason };
     }
 
     _joinRule() {
@@ -229,7 +229,7 @@ export default class RoomPreviewBar extends React.Component {
 
     _communityProfile() {
         if (this.props.room) return CommunityPrototypeStore.instance.getInviteProfile(this.props.room.roomId);
-        return {displayName: null, avatarMxc: null};
+        return { displayName: null, avatarMxc: null };
     }
 
     _roomName(atStart = false) {
@@ -253,7 +253,7 @@ export default class RoomPreviewBar extends React.Component {
     }
 
     _getInviteMember() {
-        const {room} = this.props;
+        const { room } = this.props;
         if (!room) {
             return;
         }
@@ -347,10 +347,10 @@ export default class RoomPreviewBar extends React.Component {
                 break;
             }
             case MessageCase.Kicked: {
-                const {memberName, reason} = this._getKickOrBanInfo();
+                const { memberName, reason } = this._getKickOrBanInfo();
                 title = _t("You were kicked from %(roomName)s by %(memberName)s",
-                    {memberName, roomName: this._roomName()});
-                subTitle = reason ? _t("Reason: %(reason)s", {reason}) : null;
+                    { memberName, roomName: this._roomName() });
+                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
 
                 if (this._joinRule() === "invite") {
                     primaryActionLabel = _t("Forget this room");
@@ -364,22 +364,22 @@ export default class RoomPreviewBar extends React.Component {
                 break;
             }
             case MessageCase.Banned: {
-                const {memberName, reason} = this._getKickOrBanInfo();
+                const { memberName, reason } = this._getKickOrBanInfo();
                 title = _t("You were banned from %(roomName)s by %(memberName)s",
-                    {memberName, roomName: this._roomName()});
-                subTitle = reason ? _t("Reason: %(reason)s", {reason}) : null;
+                    { memberName, roomName: this._roomName() });
+                subTitle = reason ? _t("Reason: %(reason)s", { reason }) : null;
                 primaryActionLabel = _t("Forget this room");
                 primaryActionHandler = this.props.onForgetClick;
                 break;
             }
             case MessageCase.OtherThreePIDError: {
                 title = _t("Something went wrong with your invite to %(roomName)s",
-                    {roomName: this._roomName()});
+                    { roomName: this._roomName() });
                 const joinRule = this._joinRule();
                 const errCodeMessage = _t(
                     "An error (%(errcode)s) was returned while trying to validate your " +
                     "invite. You could try to pass this information on to a room admin.",
-                    {errcode: this.state.threePidFetchError.errcode || _t("unknown error code")},
+                    { errcode: this.state.threePidFetchError.errcode || _t("unknown error code") },
                 );
                 switch (joinRule) {
                     case "invite":
@@ -478,7 +478,7 @@ export default class RoomPreviewBar extends React.Component {
                         { user: inviteMember.name });
                     subTitle = [
                         avatar,
-                        _t("<userName/> wants to chat", {}, {userName: () => inviterElement}),
+                        _t("<userName/> wants to chat", {}, { userName: () => inviterElement }),
                     ];
                     primaryActionLabel = _t("Start chatting");
                 } else {
@@ -486,7 +486,7 @@ export default class RoomPreviewBar extends React.Component {
                         { roomName: this._roomName() });
                     subTitle = [
                         avatar,
-                        _t("<userName/> invited you", {}, {userName: () => inviterElement}),
+                        _t("<userName/> invited you", {}, { userName: () => inviterElement }),
                     ];
                     primaryActionLabel = _t("Accept");
                 }
@@ -513,22 +513,22 @@ export default class RoomPreviewBar extends React.Component {
             case MessageCase.ViewingRoom: {
                 if (this.props.canPreview) {
                     title = _t("You're previewing %(roomName)s. Want to join it?",
-                        {roomName: this._roomName()});
+                        { roomName: this._roomName() });
                 } else {
                     title = _t("%(roomName)s can't be previewed. Do you want to join it?",
-                        {roomName: this._roomName(true)});
+                        { roomName: this._roomName(true) });
                 }
                 primaryActionLabel = _t("Join the discussion");
                 primaryActionHandler = this.props.onJoinClick;
                 break;
             }
             case MessageCase.RoomNotFound: {
-                title = _t("%(roomName)s does not exist.", {roomName: this._roomName(true)});
+                title = _t("%(roomName)s does not exist.", { roomName: this._roomName(true) });
                 subTitle = _t("This room doesn't exist. Are you sure you're at the right place?");
                 break;
             }
             case MessageCase.OtherError: {
-                title = _t("%(roomName)s is not accessible at this time.", {roomName: this._roomName(true)});
+                title = _t("%(roomName)s is not accessible at this time.", { roomName: this._roomName(true) });
                 subTitle = [
                     _t("Try again later, or ask a room admin to check if you have access."),
                     _t(
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index 61166b4230..fce9e297a1 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -54,7 +54,7 @@ import ExtraTile from "./ExtraTile";
 import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
 import IconizedContextMenu from "../context_menus/IconizedContextMenu";
 import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
 const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
@@ -128,7 +128,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             rooms: arrayFastClone(RoomListStore.instance.orderedLists[this.props.tagId] || []),
         };
         // Why Object.assign() and not this.state.height? Because TypeScript says no.
-        this.state = Object.assign(this.state, {height: this.calculateInitialHeight()});
+        this.state = Object.assign(this.state, { height: this.calculateInitialHeight() });
     }
 
     private calculateInitialHeight() {
@@ -184,7 +184,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         // as the rooms can come in one by one we need to reevaluate
         // the amount of available rooms to cap the amount of requested visible rooms by the layout
         if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) {
-            this.setState({height: this.calculateInitialHeight()});
+            this.setState({ height: this.calculateInitialHeight() });
         }
     }
 
@@ -329,12 +329,12 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     ) => {
         const newHeight = this.heightAtStart + delta.height;
         this.applyHeightChange(newHeight);
-        this.setState({height: newHeight});
+        this.setState({ height: newHeight });
     };
 
     private onResizeStart = () => {
         this.heightAtStart = this.state.height;
-        this.setState({isResizing: true});
+        this.setState({ isResizing: true });
     };
 
     private onResizeStop = (
@@ -345,7 +345,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     ) => {
         const newHeight = this.heightAtStart + delta.height;
         this.applyHeightChange(newHeight);
-        this.setState({isResizing: false, height: newHeight});
+        this.setState({ isResizing: false, height: newHeight });
     };
 
     private onShowAllClick = () => {
@@ -353,7 +353,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         const numVisibleTiles = this.numVisibleTiles;
         const newHeight = this.layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
         this.applyHeightChange(newHeight);
-        this.setState({height: newHeight}, () => {
+        this.setState({ height: newHeight }, () => {
             // focus the top-most new room
             this.focusRoomTile(numVisibleTiles);
         });
@@ -362,7 +362,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     private onShowLessClick = () => {
         const newHeight = this.layout.tilesToPixelsWithPadding(this.layout.defaultVisibleTiles, this.padding);
         this.applyHeightChange(newHeight);
-        this.setState({height: newHeight});
+        this.setState({ height: newHeight });
     };
 
     private focusRoomTile = (index: number) => {
@@ -378,7 +378,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({contextMenuPosition: target.getBoundingClientRect()});
+        this.setState({ contextMenuPosition: target.getBoundingClientRect() });
     };
 
     private onContextMenu = (ev: React.MouseEvent) => {
@@ -397,15 +397,15 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({addRoomContextMenuPosition: target.getBoundingClientRect()});
+        this.setState({ addRoomContextMenuPosition: target.getBoundingClientRect() });
     };
 
     private onCloseMenu = () => {
-        this.setState({contextMenuPosition: null});
+        this.setState({ contextMenuPosition: null });
     };
 
     private onCloseAddRoomMenu = () => {
-        this.setState({addRoomContextMenuPosition: null});
+        this.setState({ addRoomContextMenuPosition: null });
     };
 
     private onUnreadFirstChanged = async () => {
@@ -462,7 +462,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
 
         if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) {
             // is sticky - jump to list
-            sublist.scrollIntoView({behavior: 'smooth'});
+            sublist.scrollIntoView({ behavior: 'smooth' });
         } else {
             // on screen - toggle collapse
             const isExpanded = this.state.isExpanded;
@@ -470,7 +470,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             // if the bottom list is collapsed then scroll it in so it doesn't expand off screen
             if (!isExpanded && isStickyBottom) {
                 setImmediate(() => {
-                    sublist.scrollIntoView({behavior: 'smooth'});
+                    sublist.scrollIntoView({ behavior: 'smooth' });
                 });
             }
         }
@@ -478,9 +478,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
 
     private toggleCollapsed = () => {
         this.layout.isCollapsed = this.state.isExpanded;
-        this.setState({isExpanded: !this.layout.isCollapsed});
+        this.setState({ isExpanded: !this.layout.isCollapsed });
         if (this.props.onListCollapse) {
-            this.props.onListCollapse(!this.layout.isCollapsed)
+            this.props.onListCollapse(!this.layout.isCollapsed);
         }
     };
 
@@ -655,7 +655,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     private renderHeader(): React.ReactElement {
         return (
             <RovingTabIndexWrapper inputRef={this.headerButton}>
-                {({onFocus, isActive, ref}) => {
+                {({ onFocus, isActive, ref }) => {
                     const tabIndex = isActive ? 0 : -1;
 
                     let ariaLabel = _t("Jump to first unread room.");
@@ -801,7 +801,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                 const nonPaddedHeight = this.state.height - RESIZE_HANDLE_HEIGHT - SHOW_N_BUTTON_HEIGHT;
                 const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
                 const numMissing = this.numTiles - amountFullyShown;
-                const label = _t("Show %(count)s more", {count: numMissing});
+                const label = _t("Show %(count)s more", { count: numMissing });
                 let showMoreText = (
                     <span className='mx_RoomSublist_showNButtonText'>
                         {label}
@@ -879,14 +879,14 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             content = (
                 <React.Fragment>
                     <Resizable
-                        size={{height: this.state.height} as any}
+                        size={{ height: this.state.height } as any}
                         minHeight={minTilesPx}
                         maxHeight={maxTilesPx}
                         onResizeStart={this.onResizeStart}
                         onResizeStop={this.onResizeStop}
                         onResize={this.onResize}
                         handleWrapperClass={handleWrapperClasses}
-                        handleClasses={{bottom: "mx_RoomSublist_resizerHandle"}}
+                        handleClasses={{ bottom: "mx_RoomSublist_resizerHandle" }}
                         className="mx_RoomSublist_resizeBox"
                         enable={handles}
                     >
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 310ff29010..9be0274dd5 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -78,7 +78,7 @@ const contextMenuBelow = (elementRect: PartialDOMRect) => {
     const left = elementRect.left + window.pageXOffset - 9;
     const top = elementRect.bottom + window.pageYOffset + 17;
     const chevronFace = ChevronFace.None;
-    return {left, top, chevronFace};
+    return { left, top, chevronFace };
 };
 
 @replaceableComponent("views.rooms.RoomTile")
@@ -112,7 +112,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onRoomNameUpdate = (room) => {
         this.forceUpdate();
-    }
+    };
 
     private onNotificationUpdate = () => {
         this.forceUpdate(); // notification state changed - update
@@ -120,7 +120,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => {
         if (room?.roomId !== this.props.room.roomId) return;
-        this.setState({hasUnsentEvents: this.countUnsentEvents() > 0});
+        this.setState({ hasUnsentEvents: this.countUnsentEvents() > 0 });
     };
 
     private onRoomPropertyUpdate = (property: CachedRoomKey) => {
@@ -259,25 +259,25 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     };
 
     private onActiveRoomUpdate = (isActive: boolean) => {
-        this.setState({selected: isActive});
+        this.setState({ selected: isActive });
     };
 
     private onNotificationsMenuOpenClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({notificationsMenuPosition: target.getBoundingClientRect()});
+        this.setState({ notificationsMenuPosition: target.getBoundingClientRect() });
     };
 
     private onCloseNotificationsMenu = () => {
-        this.setState({notificationsMenuPosition: null});
+        this.setState({ notificationsMenuPosition: null });
     };
 
     private onGeneralMenuOpenClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({generalMenuPosition: target.getBoundingClientRect()});
+        this.setState({ generalMenuPosition: target.getBoundingClientRect() });
     };
 
     private onContextMenu = (ev: React.MouseEvent) => {
@@ -295,7 +295,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     };
 
     private onCloseGeneralMenu = () => {
-        this.setState({generalMenuPosition: null});
+        this.setState({ generalMenuPosition: null });
     };
 
     private onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
@@ -321,7 +321,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         if ((ev as React.KeyboardEvent).key === Key.ENTER) {
             // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-            this.setState({generalMenuPosition: null}); // hide the menu
+            this.setState({ generalMenuPosition: null }); // hide the menu
         }
     };
 
@@ -333,7 +333,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             action: 'leave_room',
             room_id: this.props.room.roomId,
         });
-        this.setState({generalMenuPosition: null}); // hide the menu
+        this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
     private onForgetRoomClick = (ev: ButtonEvent) => {
@@ -344,7 +344,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             action: 'forget_room',
             room_id: this.props.room.roomId,
         });
-        this.setState({generalMenuPosition: null}); // hide the menu
+        this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
     private onOpenRoomSettings = (ev: ButtonEvent) => {
@@ -355,7 +355,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             action: 'open_room_settings',
             room_id: this.props.room.roomId,
         });
-        this.setState({generalMenuPosition: null}); // hide the menu
+        this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
     private onInviteClick = (ev: ButtonEvent) => {
@@ -366,7 +366,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             action: 'view_invite',
             roomId: this.props.room.roomId,
         });
-        this.setState({generalMenuPosition: null}); // hide the menu
+        this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
     private async saveNotifState(ev: ButtonEvent, newState: Volume) {
@@ -379,7 +379,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         const key = (ev as React.KeyboardEvent).key;
         if (key === Key.ENTER) {
             // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-            this.setState({notificationsMenuPosition: null}); // hide the menu
+            this.setState({ notificationsMenuPosition: null }); // hide the menu
         }
     }
 
@@ -554,7 +554,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             'mx_RoomTile_minimized': this.props.isMinimized,
         });
 
-        let roomProfile: IRoomProfile = {displayName: null, avatarMxc: null};
+        let roomProfile: IRoomProfile = { displayName: null, avatarMxc: null };
         if (this.props.tag === DefaultTagID.Invite) {
             roomProfile = CommunityPrototypeStore.instance.getInviteProfile(this.props.room.roomId);
         }
@@ -567,7 +567,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             room={this.props.room}
             avatarSize={32}
             displayBadge={this.props.isMinimized}
-            oobData={({avatarUrl: roomProfile.avatarMxc})}
+            oobData={({ avatarUrl: roomProfile.avatarMxc })}
         />;
 
         let badge: React.ReactNode;
@@ -659,7 +659,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         return (
             <React.Fragment>
                 <RovingTabIndexWrapper inputRef={this.roomTileRef}>
-                    {({onFocus, isActive, ref}) =>
+                    {({ onFocus, isActive, ref }) =>
                         <Button
                             {...props}
                             onFocus={onFocus}
diff --git a/src/components/views/rooms/RoomUpgradeWarningBar.js b/src/components/views/rooms/RoomUpgradeWarningBar.js
index 66e76903eb..820e8075d7 100644
--- a/src/components/views/rooms/RoomUpgradeWarningBar.js
+++ b/src/components/views/rooms/RoomUpgradeWarningBar.js
@@ -20,8 +20,8 @@ import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.RoomUpgradeWarningBar")
 export default class RoomUpgradeWarningBar extends React.PureComponent {
@@ -37,7 +37,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent {
 
     componentDidMount() {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
-        this.setState({upgraded: tombstone && tombstone.getContent().replacement_room});
+        this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
 
         MatrixClientPeg.get().on("RoomState.events", this._onStateEvents);
     }
@@ -57,12 +57,12 @@ export default class RoomUpgradeWarningBar extends React.PureComponent {
         if (event.getType() !== "m.room.tombstone") return;
 
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
-        this.setState({upgraded: tombstone && tombstone.getContent().replacement_room});
+        this.setState({ upgraded: tombstone && tombstone.getContent().replacement_room });
     };
 
     onUpgradeClick = () => {
         const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
-        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, {room: this.props.room});
+        Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room: this.props.room });
     };
 
     render() {
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js
index 3b79aa6246..3581a26351 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.js
@@ -18,10 +18,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {haveTileForEvent} from "./EventTile";
+import { haveTileForEvent } from "./EventTile";
 import SettingsStore from "../../../settings/SettingsStore";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.SearchResultTile")
 export default class SearchResultTile extends React.Component {
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 10ef91c689..cc819e05e1 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -80,7 +80,7 @@ export function createMessageContent(model, permalinkCreator, replyToEvent) {
         msgtype: isEmote ? "m.emote" : "m.text",
         body: body,
     };
-    const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: !!replyToEvent});
+    const formattedBody = htmlSerializeIfNeeded(model, { forceHTML: !!replyToEvent });
     if (formattedBody) {
         content.format = "org.matrix.custom.html";
         content.formatted_body = formattedBody;
@@ -208,7 +208,7 @@ export default class SendMessageComposer extends React.Component {
             this.sendHistoryManager.currentIndex = this.sendHistoryManager.history.length;
             return;
         }
-        const {parts, replyEventId} = this.sendHistoryManager.getItem(delta);
+        const { parts, replyEventId } = this.sendHistoryManager.getItem(delta);
         dis.dispatch({
             action: 'reply_to_event',
             event: replyEventId ? this.props.room.findEventById(replyEventId) : null,
@@ -265,7 +265,7 @@ export default class SendMessageComposer extends React.Component {
                             "key": reaction,
                         },
                     });
-                    dis.dispatch({action: "message_sent"});
+                    dis.dispatch({ action: "message_sent" });
                 }
                 break;
             }
@@ -280,7 +280,7 @@ export default class SendMessageComposer extends React.Component {
             }
             return text + part.text;
         }, "");
-        const {cmd, args} = getCommand(commandText);
+        const { cmd, args } = getCommand(commandText);
         return [cmd, args, commandText];
     }
 
@@ -350,11 +350,11 @@ export default class SendMessageComposer extends React.Component {
             } else {
                 // ask the user if their unknown command should be sent as a message
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                const {finished} = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
+                const { finished } = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
                     title: _t("Unknown Command"),
                     description: <div>
                         <p>
-                            { _t("Unrecognised command: %(commandText)s", {commandText}) }
+                            { _t("Unrecognised command: %(commandText)s", { commandText }) }
                         </p>
                         <p>
                             { _t("You can use <code>/help</code> to list available commands. " +
@@ -383,7 +383,7 @@ export default class SendMessageComposer extends React.Component {
 
         if (shouldSend) {
             const startTime = CountlyAnalytics.getTimestamp();
-            const {roomId} = this.props.room;
+            const { roomId } = this.props.room;
             if (!content) {
                 content = createMessageContent(this.model, this.props.permalinkCreator, replyToEvent);
             }
@@ -399,10 +399,10 @@ export default class SendMessageComposer extends React.Component {
                     event: null,
                 });
             }
-            dis.dispatch({action: "message_sent"});
+            dis.dispatch({ action: "message_sent" });
             CHAT_EFFECTS.forEach((effect) => {
                 if (containsEmoji(content, effect.emojis)) {
-                    dis.dispatch({action: `effects.${effect.command}`});
+                    dis.dispatch({ action: `effects.${effect.command}` });
                 }
             });
             CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content);
@@ -415,7 +415,7 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef.focus();
         this._clearStoredEditorState();
         if (SettingsStore.getValue("scrollToBottomOnMessageSent")) {
-            dis.dispatch({action: "scroll_to_bottom"});
+            dis.dispatch({ action: "scroll_to_bottom" });
         }
     }
 
@@ -446,7 +446,7 @@ export default class SendMessageComposer extends React.Component {
         const json = localStorage.getItem(this._editorStateKey);
         if (json) {
             try {
-                const {parts: serializedParts, replyEventId} = JSON.parse(json);
+                const { parts: serializedParts, replyEventId } = JSON.parse(json);
                 const parts = serializedParts.map(p => partCreator.deserializePart(p));
                 if (replyEventId) {
                     dis.dispatch({
@@ -498,7 +498,7 @@ export default class SendMessageComposer extends React.Component {
     };
 
     _onPaste = (event) => {
-        const {clipboardData} = event;
+        const { clipboardData } = event;
         // Prioritize text on the clipboard over files as Office on macOS puts a bitmap
         // in the clipboard as well as the content being copied.
         if (clipboardData.files.length && !clipboardData.types.some(t => t === "text/plain")) {
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 35e7d44469..b8a5315298 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 /*
  * A stripped-down room header used for things like the user settings
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index b9aaee7a57..a66186d116 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -15,22 +15,22 @@ limitations under the License.
 */
 import React from 'react';
 import classNames from 'classnames';
-import {_t, _td} from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import AppTile from '../elements/AppTile';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import PersistedElement from "../elements/PersistedElement";
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
-import {ContextMenu} from "../../structures/ContextMenu";
-import {WidgetType} from "../../../widgets/WidgetType";
+import { ContextMenu } from "../../structures/ContextMenu";
+import { WidgetType } from "../../../widgets/WidgetType";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {Action} from "../../../dispatcher/actions";
-import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Action } from "../../../dispatcher/actions";
+import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -103,7 +103,7 @@ export default class Stickerpicker extends React.PureComponent {
             console.warn('No widget ID specified, not disabling assets');
         }
 
-        this.setState({showStickers: false});
+        this.setState({ showStickers: false });
         WidgetUtils.removeStickerpickerWidgets().then(() => {
             this.forceUpdate();
         }).catch((e) => {
@@ -150,7 +150,7 @@ export default class Stickerpicker extends React.PureComponent {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
         if (!stickerpickerWidget) {
             Stickerpicker.currentWidget = null;
-            this.setState({stickerpickerWidget: null, widgetId: null});
+            this.setState({ stickerpickerWidget: null, widgetId: null });
             return;
         }
 
@@ -183,12 +183,12 @@ export default class Stickerpicker extends React.PureComponent {
                 this.forceUpdate();
                 break;
             case "stickerpicker_close":
-                this.setState({showStickers: false});
+                this.setState({ showStickers: false });
                 break;
             case Action.AfterRightPanelPhaseChange:
             case "show_left_panel":
             case "hide_left_panel":
-                this.setState({showStickers: false});
+                this.setState({ showStickers: false });
                 break;
         }
     }
@@ -206,7 +206,7 @@ export default class Stickerpicker extends React.PureComponent {
 
     _errorStickerpickerContent() {
         return (
-            <div style={{"text-align": "center"}} className="error">
+            <div style={{ "text-align": "center" }} className="error">
                 <p> { this.state.imError } </p>
             </div>
         );
@@ -342,7 +342,7 @@ export default class Stickerpicker extends React.PureComponent {
      */
     _onHideStickersClick(ev) {
         if (this.state.showStickers) {
-            this.setState({showStickers: false});
+            this.setState({ showStickers: false });
         }
     }
 
@@ -351,7 +351,7 @@ export default class Stickerpicker extends React.PureComponent {
      */
     _onResize() {
         if (this.state.showStickers) {
-            this.setState({showStickers: false});
+            this.setState({ showStickers: false });
         }
     }
 
@@ -360,7 +360,7 @@ export default class Stickerpicker extends React.PureComponent {
      */
     _onFinished() {
         if (this.state.showStickers) {
-            this.setState({showStickers: false});
+            this.setState({ showStickers: false });
         }
     }
 
diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
index 792e6ac8f7..4cdabede2f 100644
--- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -15,17 +15,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {_t} from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as sdk from "../../../index";
 import Modal from "../../../Modal";
-import {isValid3pidInvite} from "../../../RoomInvite";
+import { isValid3pidInvite } from "../../../RoomInvite";
 import RoomAvatar from "../avatars/RoomAvatar";
 import RoomName from "../elements/RoomName";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
@@ -83,7 +83,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
             const newDisplayName = ev.getContent().display_name;
             const isInvited = isValid3pidInvite(ev);
 
-            const newState = {invited: isInvited};
+            const newState = { invited: isInvited };
             if (newDisplayName) newState['displayName'] = newDisplayName;
             this.setState(newState);
         }
@@ -102,7 +102,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                 console.error(err);
 
                 // Revert echo because of error
-                this.setState({invited: true});
+                this.setState({ invited: true });
 
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createTrackedDialog('Revoke 3pid invite failed', '', ErrorDialog, {
@@ -115,7 +115,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
             });
 
         // Local echo
-        this.setState({invited: false});
+        this.setState({ invited: false });
     };
 
     render() {
@@ -157,7 +157,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                 <div className="mx_MemberInfo_container">
                     <div className="mx_MemberInfo_profile">
                         <div className="mx_MemberInfo_profileField">
-                            {_t("Invited by %(sender)s", {sender: this.state.senderName})}
+                            {_t("Invited by %(sender)s", { sender: this.state.senderName })}
                         </div>
                     </div>
                 </div>
diff --git a/src/components/views/rooms/TopUnreadMessagesBar.js b/src/components/views/rooms/TopUnreadMessagesBar.js
index cba99ac913..0f632e7128 100644
--- a/src/components/views/rooms/TopUnreadMessagesBar.js
+++ b/src/components/views/rooms/TopUnreadMessagesBar.js
@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.rooms.TopUnreadMessagesBar")
 export default class TopUnreadMessagesBar extends React.Component {
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 02f2d97323..1c4bdceba5 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -16,14 +16,14 @@ limitations under the License.
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
-import React, {ReactNode} from "react";
+import React, { ReactNode } from "react";
 import {
     IRecordingUpdate,
     RECORDING_PLAYBACK_SAMPLES,
     RecordingState,
     VoiceRecording,
 } from "../../../voice/VoiceRecording";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import classNames from "classnames";
 import LiveRecordingWaveform from "../voice_messages/LiveRecordingWaveform";
@@ -32,7 +32,7 @@ import { arrayFastResample, arraySeed } from "../../../utils/arrays";
 import { percentageOf } from "../../../utils/numbers";
 import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 import Modal from "../../../Modal";
@@ -105,7 +105,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             });
             this.scheduledAnimationFrame = false;
         });
-    }
+    };
 
     // called by composer
     public async send() {
@@ -152,7 +152,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         await VoiceRecordingStore.instance.disposeRecording();
 
         // Reset back to no recording, which means no phase (ie: restart component entirely)
-        this.setState({recorder: null, recordingPhase: null});
+        this.setState({ recorder: null, recordingPhase: null });
     }
 
     private onCancel = async () => {
@@ -206,10 +206,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             // We don't need to remove the listener: the recorder will clean that up for us.
             recorder.on(UPDATE_EVENT, (ev: RecordingState) => {
                 if (ev === RecordingState.EndingSoon) return; // ignore this state: it has no UI purpose here
-                this.setState({recordingPhase: ev});
+                this.setState({ recordingPhase: ev });
             });
 
-            this.setState({recorder, recordingPhase: RecordingState.Started});
+            this.setState({ recorder, recordingPhase: RecordingState.Started });
         } catch (e) {
             console.error("Error starting recording: ", e);
             accessError();
diff --git a/src/components/views/rooms/WhoIsTypingTile.tsx b/src/components/views/rooms/WhoIsTypingTile.tsx
index 93078ff645..6b42a0a044 100644
--- a/src/components/views/rooms/WhoIsTypingTile.tsx
+++ b/src/components/views/rooms/WhoIsTypingTile.tsx
@@ -97,7 +97,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
             // remove user from usersTyping
             const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
             if (usersTyping.length !== this.state.usersTyping.length) {
-                this.setState({usersTyping});
+                this.setState({ usersTyping });
             }
             // abort timer if any
             this.abortUserTimer(userId);
@@ -163,7 +163,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         if (timer) {
             const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
             delete delayedStopTypingTimers[userId];
-            this.setState({delayedStopTypingTimers});
+            this.setState({ delayedStopTypingTimers });
         }
     }
 
diff --git a/src/components/views/settings/AvatarSetting.js b/src/components/views/settings/AvatarSetting.js
index 93b982467a..891e45e90e 100644
--- a/src/components/views/settings/AvatarSetting.js
+++ b/src/components/views/settings/AvatarSetting.js
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 
-const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar}) => {
+const AvatarSetting = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar }) => {
     const [isHovering, setIsHovering] = useState(false);
     const hoveringProps = {
         onMouseEnter: () => setIsHovering(true),
diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx
index 3565d1ba2e..c8e57562bb 100644
--- a/src/components/views/settings/BridgeTile.tsx
+++ b/src/components/views/settings/BridgeTile.tsx
@@ -16,16 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import Pill from "../elements/Pill";
-import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import { makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import BaseAvatar from "../avatars/BaseAvatar";
 import SettingsStore from "../../../settings/SettingsStore";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { isUrlPermitted } from '../../../HtmlUtils';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps {
     ev: MatrixEvent;
@@ -69,7 +69,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
     static propTypes = {
         ev: PropTypes.object.isRequired,
         room: PropTypes.object.isRequired,
-    }
+    };
 
     render() {
         const content: IBridgeStateEvent = this.props.ev.getContent();
@@ -131,7 +131,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
             const networkName = network.displayname || network.id;
             let networkLink = <span>{networkName}</span>;
             if (typeof network.external_url === "string" && isUrlPermitted(network.external_url)) {
-                networkLink = <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>
+                networkLink = <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>;
             }
             networkItem = _t("Workspace: <networkLink/>", {}, {
                 networkLink: () => networkLink,
@@ -140,7 +140,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
 
         let channelLink = <span>{channelName}</span>;
         if (typeof channel.external_url === "string" && isUrlPermitted(channel.external_url)) {
-            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{channelName}</a>
+            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{channelName}</a>;
         }
 
         const id = this.props.ev.getId();
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 6c73fa7f90..36d5d4aa0c 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Spinner from '../elements/Spinner';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.settings.ChangeAvatar")
 export default class ChangeAvatar extends React.Component {
@@ -107,7 +107,7 @@ export default class ChangeAvatar extends React.Component {
                 return MatrixClientPeg.get().sendStateEvent(
                     self.props.room.roomId,
                     'm.room.avatar',
-                    {url: url},
+                    { url: url },
                     '',
                 );
             } else {
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index cae4a22be9..2f336e18c6 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -18,9 +18,9 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.ChangeDisplayName")
 export default class ChangeDisplayName extends React.Component {
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 1f45bf61eb..f94716317b 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -18,7 +18,7 @@ limitations under the License.
 import Field from "../elements/Field";
 import React from 'react';
 import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AccessibleButton from '../elements/AccessibleButton';
 import Spinner from '../elements/Spinner';
 import withValidation from '../elements/Validation';
@@ -27,7 +27,7 @@ import * as sdk from "../../../index";
 import Modal from "../../../Modal";
 import PassphraseField from "../auth/PassphraseField";
 import CountlyAnalytics from "../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { PASSWORD_MIN_SCORE } from '../auth/RegistrationForm';
 
 const FIELD_OLD_PASSWORD = 'field_old_password';
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index 43a13a48a7..f865d74d7c 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -16,14 +16,14 @@ limitations under the License.
 
 import React from 'react';
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import Spinner from '../elements/Spinner';
 import InteractiveAuthDialog from '../dialogs/InteractiveAuthDialog';
 import ConfirmDestroyCrossSigningDialog from '../dialogs/security/ConfirmDestroyCrossSigningDialog';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.CrossSigningPanel")
 export default class CrossSigningPanel extends React.PureComponent {
diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index b1ad605a37..f54009f31c 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/src/components/views/settings/DevicesPanel.js
@@ -20,11 +20,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.DevicesPanel")
 export default class DevicesPanel extends React.Component {
@@ -58,7 +58,7 @@ export default class DevicesPanel extends React.Component {
         MatrixClientPeg.get().getDevices().then(
             (resp) => {
                 if (this._unmounted) { return; }
-                this.setState({devices: resp.devices || []});
+                this.setState({ devices: resp.devices || [] });
             },
             (error) => {
                 if (this._unmounted) { return; }
@@ -70,12 +70,11 @@ export default class DevicesPanel extends React.Component {
                     console.error("Error loading sessions:", error);
                     errtxt = _t("Unable to load session list");
                 }
-                this.setState({deviceLoadError: errtxt});
+                this.setState({ deviceLoadError: errtxt });
             },
         );
     }
 
-
     /*
      * compare two devices, sorting from most-recently-seen to least-recently-seen
      * (and then, for stability, by device id)
@@ -107,7 +106,7 @@ export default class DevicesPanel extends React.Component {
                 selectedDevices.splice(i, 1);
             }
 
-            return {selectedDevices};
+            return { selectedDevices };
         });
     }
 
@@ -141,7 +140,7 @@ export default class DevicesPanel extends React.Component {
                     body: _t("Click the button below to confirm deleting these sessions.", {
                         count: numDevices,
                     }),
-                    continueText: _t("Delete sessions", {count: numDevices}),
+                    continueText: _t("Delete sessions", { count: numDevices }),
                     continueKind: "danger",
                 },
             };
@@ -214,7 +213,7 @@ export default class DevicesPanel extends React.Component {
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
             <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
-                { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length})}
+                { _t("Delete %(count)s sessions", { count: this.state.selectedDevices.length })}
             </AccessibleButton>;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
diff --git a/src/components/views/settings/DevicesPanelEntry.js b/src/components/views/settings/DevicesPanelEntry.js
index 93d4c78476..a5b674b8f6 100644
--- a/src/components/views/settings/DevicesPanelEntry.js
+++ b/src/components/views/settings/DevicesPanelEntry.js
@@ -19,10 +19,10 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {formatDate} from '../../../DateUtils';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { formatDate } from '../../../DateUtils';
 import StyledCheckbox from '../elements/StyledCheckbox';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.DevicesPanelEntry")
 export default class DevicesPanelEntry extends React.Component {
diff --git a/src/components/views/settings/E2eAdvancedPanel.tsx b/src/components/views/settings/E2eAdvancedPanel.tsx
index a8764fa855..ca7b71697e 100644
--- a/src/components/views/settings/E2eAdvancedPanel.tsx
+++ b/src/components/views/settings/E2eAdvancedPanel.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 
 import * as sdk from '../../../index';
-import {_t} from "../../../languageHandler";
-import {SettingLevel} from "../../../settings/SettingLevel";
+import { _t } from "../../../languageHandler";
+import { SettingLevel } from "../../../settings/SettingLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 
 const SETTING_MANUALLY_VERIFY_ALL_SESSIONS = "e2ee.manuallyVerifyAllSessions";
diff --git a/src/components/views/settings/EventIndexPanel.tsx b/src/components/views/settings/EventIndexPanel.tsx
index e693f45c5f..59b4a166c0 100644
--- a/src/components/views/settings/EventIndexPanel.tsx
+++ b/src/components/views/settings/EventIndexPanel.tsx
@@ -22,10 +22,10 @@ import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from "../elements/AccessibleButton";
-import {formatBytes, formatCountLong} from "../../../utils/FormattingUtils";
+import { formatBytes, formatCountLong } from "../../../utils/FormattingUtils";
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
-import {SettingLevel} from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SeshatResetDialog from '../dialogs/SeshatResetDialog';
 
 interface IState {
@@ -118,7 +118,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                 onFinished: () => {},
             }, null, /* priority = */ false, /* static = */ true,
         );
-    }
+    };
 
     private onEnable = async () => {
         this.setState({
@@ -130,7 +130,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
         await EventIndexPeg.get().startCrawler();
         await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, true);
         await this.updateState();
-    }
+    };
 
     private confirmEventStoreReset = () => {
         const { close } = Modal.createDialog(SeshatResetDialog, {
@@ -143,7 +143,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                 }
             },
         });
-    }
+    };
 
     render() {
         let eventIndexingSettings = null;
diff --git a/src/components/views/settings/IntegrationManager.js b/src/components/views/settings/IntegrationManager.js
index b058625139..2296575152 100644
--- a/src/components/views/settings/IntegrationManager.js
+++ b/src/components/views/settings/IntegrationManager.js
@@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
-import {Key} from "../../../Keyboard";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { Key } from "../../../Keyboard";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.IntegrationManager")
 export default class IntegrationManager extends React.Component {
diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 5756536085..c263ff50c8 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import SettingsStore from '../../../settings/SettingsStore';
 import Modal from '../../../Modal';
 import {
@@ -30,9 +30,9 @@ import {
 import SdkConfig from "../../../SdkConfig";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import AccessibleButton from "../elements/AccessibleButton";
-import {SettingLevel} from "../../../settings/SettingLevel";
-import {UIFeature} from "../../../settings/UIFeature";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { UIFeature } from "../../../settings/UIFeature";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -40,7 +40,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 // TODO: this component also does a lot of direct poking into this.state, which
 // is VERY NAUGHTY.
 
-
 /**
  * Rules that Vector used to set in order to override the actions of default rules.
  * These are used to port peoples existing overrides to match the current API.
@@ -517,7 +516,7 @@ export default class Notifications extends React.Component {
             };
 
             // HS default rules
-            const defaultRules = {master: [], vector: {}, others: []};
+            const defaultRules = { master: [], vector: {}, others: [] };
 
             for (const kind in rulesets.global) {
                 for (let i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
@@ -632,7 +631,7 @@ export default class Notifications extends React.Component {
         });
 
         const pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
-            self.setState({pushers: resp.pushers});
+            self.setState({ pushers: resp.pushers });
         });
 
         Promise.all([pushRulesPromise, pushersPromise]).then(function() {
@@ -655,7 +654,7 @@ export default class Notifications extends React.Component {
             });
         });
 
-        MatrixClientPeg.get().getThreePids().then((r) => this.setState({threepids: r.threepids}));
+        MatrixClientPeg.get().getThreePids().then((r) => this.setState({ threepids: r.threepids }));
     };
 
     _onClearNotifications = () => {
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index 9ecf369eba..e5c0e5c0b3 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import React, { createRef } from 'react';
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
 import { getHostingLink } from '../../../utils/HostingLink';
 import * as sdk from "../../../index";
-import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 @replaceableComponent("views.settings.ProfileSettings")
 export default class ProfileSettings extends React.Component {
@@ -79,7 +79,7 @@ export default class ProfileSettings extends React.Component {
         e.preventDefault();
 
         if (!this.state.enableProfileSave) return;
-        this.setState({enableProfileSave: false});
+        this.setState({ enableProfileSave: false });
 
         const client = MatrixClientPeg.get();
         const newState = {};
diff --git a/src/components/views/settings/SecureBackupPanel.js b/src/components/views/settings/SecureBackupPanel.js
index abfd18f0d3..b0292debe6 100644
--- a/src/components/views/settings/SecureBackupPanel.js
+++ b/src/components/views/settings/SecureBackupPanel.js
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { isSecureBackupRequired } from '../../../utils/WellKnownUtils';
@@ -26,7 +26,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import QuestionDialog from '../dialogs/QuestionDialog';
 import RestoreKeyBackupDialog from '../dialogs/security/RestoreKeyBackupDialog';
 import { accessSecretStorage } from '../../../SecurityManager';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.SecureBackupPanel")
 export default class SecureBackupPanel extends React.PureComponent {
@@ -85,7 +85,7 @@ export default class SecureBackupPanel extends React.PureComponent {
     async _checkKeyBackupStatus() {
         this._getUpdatedDiagnostics();
         try {
-            const {backupInfo, trustInfo} = await MatrixClientPeg.get().checkKeyBackup();
+            const { backupInfo, trustInfo } = await MatrixClientPeg.get().checkKeyBackup();
             this.setState({
                 loading: false,
                 error: null,
@@ -172,7 +172,7 @@ export default class SecureBackupPanel extends React.PureComponent {
             danger: true,
             onFinished: (proceed) => {
                 if (!proceed) return;
-                this.setState({loading: true});
+                this.setState({ loading: true });
                 MatrixClientPeg.get().deleteKeyBackupVersion(this.state.backupInfo.version).then(() => {
                     this._loadBackupStatus();
                 });
@@ -237,7 +237,7 @@ export default class SecureBackupPanel extends React.PureComponent {
                         "This session is <b>not backing up your keys</b>, " +
                         "but you do have an existing backup you can restore from " +
                         "and add to going forward.", {},
-                        {b: sub => <b>{sub}</b>},
+                        { b: sub => <b>{sub}</b> },
                     )}</p>
                     <p>{_t(
                         "Connect this session to key backup before signing out to avoid " +
@@ -385,7 +385,7 @@ export default class SecureBackupPanel extends React.PureComponent {
             statusDescription = <>
                 <p>{_t(
                     "Your keys are <b>not being backed up from this session</b>.", {},
-                    {b: sub => <b>{sub}</b>},
+                    { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t("Back up your keys before signing out to avoid losing them.")}</p>
             </>;
diff --git a/src/components/views/settings/SetIdServer.tsx b/src/components/views/settings/SetIdServer.tsx
index 05d1f83387..4a73c82d9b 100644
--- a/src/components/views/settings/SetIdServer.tsx
+++ b/src/components/views/settings/SetIdServer.tsx
@@ -16,17 +16,17 @@ limitations under the License.
 
 import url from 'url';
 import React from 'react';
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import * as sdk from '../../../index';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from '../../../Modal';
 import dis from "../../../dispatcher/dispatcher";
 import { getThreepidsWithBindStatus } from '../../../boundThreepids';
 import IdentityAuthClient from "../../../IdentityAuthClient";
-import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";
+import { abbreviateUrl, unabbreviateUrl } from "../../../utils/UrlUtils";
 import { getDefaultIdentityServerUrl, doesIdentityServerHaveTerms } from '../../../utils/IdentityServerUtils';
-import {timeout} from "../../../utils/promise";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { timeout } from "../../../utils/promise";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from '../../../dispatcher/payloads';
 
 // We'll wait up to this long when checking for 3PID bindings on the IS.
@@ -50,7 +50,7 @@ async function checkIdentityServerUrl(u) {
         if (response.ok) {
             return null;
         } else if (response.status < 200 || response.status >= 300) {
-            return _t("Not a valid Identity Server (status code %(code)s)", {code: response.status});
+            return _t("Not a valid Identity Server (status code %(code)s)", { code: response.status });
         } else {
             return _t("Could not connect to Identity Server");
         }
@@ -121,7 +121,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
     private onIdentityServerChanged = (ev) => {
         const u = ev.target.value;
 
-        this.setState({idServer: u});
+        this.setState({ idServer: u });
     };
 
     private getTooltip = () => {
@@ -159,14 +159,14 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         e.preventDefault();
         const { idServer, currentClientIdServer } = this.state;
 
-        this.setState({busy: true, checking: true, error: null});
+        this.setState({ busy: true, checking: true, error: null });
 
         const fullUrl = unabbreviateUrl(idServer);
 
         let errStr = await checkIdentityServerUrl(fullUrl);
         if (!errStr) {
             try {
-                this.setState({checking: false}); // clear tooltip
+                this.setState({ checking: false }); // clear tooltip
 
                 // Test the identity server by trying to register with it. This
                 // may result in a terms of service prompt.
@@ -236,13 +236,13 @@ export default class SetIdServer extends React.Component<IProps, IState> {
     }
 
     private onDisconnectClicked = async () => {
-        this.setState({disconnectBusy: true});
+        this.setState({ disconnectBusy: true });
         try {
             const [confirmed] = await this.showServerChangeWarning({
                 title: _t("Disconnect identity server"),
                 unboundMessage: _t(
                     "Disconnect from the identity server <idserver />?", {},
-                    {idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>},
+                    { idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b> },
                 ),
                 button: _t("Disconnect"),
             });
@@ -250,7 +250,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 this.disconnectIdServer();
             }
         } finally {
-            this.setState({disconnectBusy: false});
+            this.setState({ disconnectBusy: false });
         }
     };
 
@@ -369,7 +369,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 bodyText = _t(
                     "If you don't want to use <server /> to discover and be discoverable by existing " +
                     "contacts you know, enter another identity server below.",
-                    {}, {server: sub => <b>{abbreviateUrl(idServerUrl)}</b>},
+                    {}, { server: sub => <b>{abbreviateUrl(idServerUrl)}</b> },
                 );
             }
         } else {
diff --git a/src/components/views/settings/SetIntegrationManager.js b/src/components/views/settings/SetIntegrationManager.js
index 29cc5d7131..6636c87df8 100644
--- a/src/components/views/settings/SetIntegrationManager.js
+++ b/src/components/views/settings/SetIntegrationManager.js
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../languageHandler";
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
+import { _t } from "../../../languageHandler";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import * as sdk from '../../../index';
 import SettingsStore from "../../../settings/SettingsStore";
-import {SettingLevel} from "../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.SetIntegrationManager")
 export default class SetIntegrationManager extends React.Component {
@@ -41,9 +41,9 @@ export default class SetIntegrationManager extends React.Component {
             console.error("Error changing integration manager provisioning");
             console.error(err);
 
-            this.setState({provisioningEnabled: current});
+            this.setState({ provisioningEnabled: current });
         });
-        this.setState({provisioningEnabled: !current});
+        this.setState({ provisioningEnabled: !current });
     };
 
     render() {
@@ -57,7 +57,7 @@ export default class SetIntegrationManager extends React.Component {
             bodyText = _t(
                 "Use an Integration Manager <b>(%(serverName)s)</b> to manage bots, widgets, " +
                 "and sticker packs.",
-                {serverName: currentManager.name},
+                { serverName: currentManager.name },
                 { b: sub => <b>{sub}</b> },
             );
         } else {
diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
index e5455c8c68..0876f07142 100644
--- a/src/components/views/settings/SpellCheckSettings.tsx
+++ b/src/components/views/settings/SpellCheckSettings.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
-import {_t} from "../../../languageHandler";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface ExistingSpellCheckLanguageIProps {
     language: string,
@@ -60,7 +60,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         super(props);
         this.state = {
             newLanguage: "",
-        }
+        };
     }
 
     _onRemoved = (language) => {
@@ -77,13 +77,13 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         if (!language) return;
         if (this.props.languages.includes(language)) return;
 
-        this.props.languages.push(language)
+        this.props.languages.push(language);
         this.props.onLanguagesChange(this.props.languages);
     };
 
     _onNewLanguageChange = (language: string) => {
         if (this.state.newLanguage === language) return;
-        this.setState({newLanguage: language});
+        this.setState({ newLanguage: language });
     };
 
     render() {
diff --git a/src/components/views/settings/UpdateCheckButton.tsx b/src/components/views/settings/UpdateCheckButton.tsx
index eb1b762423..2781aa971d 100644
--- a/src/components/views/settings/UpdateCheckButton.tsx
+++ b/src/components/views/settings/UpdateCheckButton.tsx
@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 
-import {UpdateCheckStatus} from "../../../BasePlatform";
+import { UpdateCheckStatus } from "../../../BasePlatform";
 import PlatformPeg from "../../../PlatformPeg";
-import {useDispatcher} from "../../../hooks/useDispatcher";
+import { useDispatcher } from "../../../hooks/useDispatcher";
 import dis from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
-import {_t} from "../../../languageHandler";
+import { Action } from "../../../dispatcher/actions";
+import { _t } from "../../../languageHandler";
 import InlineSpinner from "../../../components/views/elements/InlineSpinner";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
-import {CheckUpdatesPayload} from "../../../dispatcher/payloads/CheckUpdatesPayload";
+import { CheckUpdatesPayload } from "../../../dispatcher/payloads/CheckUpdatesPayload";
 
 function installUpdate() {
     PlatformPeg.get().installUpdate();
@@ -61,7 +61,7 @@ const UpdateCheckButton = () => {
         PlatformPeg.get().startUpdateCheck();
     };
 
-    useDispatcher(dis, ({action, ...params}) => {
+    useDispatcher(dis, ({ action, ...params }) => {
         if (action === Action.CheckUpdates) {
             setState(params as CheckUpdatesPayload);
         }
diff --git a/src/components/views/settings/account/EmailAddresses.js b/src/components/views/settings/account/EmailAddresses.js
index a36369cf88..3c5ba21ae5 100644
--- a/src/components/views/settings/account/EmailAddresses.js
+++ b/src/components/views/settings/account/EmailAddresses.js
@@ -17,15 +17,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../MatrixClientPeg";
+import { _t } from "../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 import * as Email from "../../../../email";
 import AddThreepid from "../../../../AddThreepid";
 import * as sdk from '../../../../index';
 import Modal from '../../../../Modal';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
 /*
 TODO: Improve the UX for everything in here.
@@ -57,14 +57,14 @@ export class ExistingEmailAddress extends React.Component {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: true});
+        this.setState({ verifyRemove: true });
     };
 
     _onDontRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
     _onActuallyRemove = (e) => {
@@ -88,7 +88,7 @@ export class ExistingEmailAddress extends React.Component {
             return (
                 <div className="mx_ExistingEmailAddress">
                     <span className="mx_ExistingEmailAddress_promptText">
-                        {_t("Remove %(email)s?", {email: this.props.email.address} )}
+                        {_t("Remove %(email)s?", { email: this.props.email.address } )}
                     </span>
                     <AccessibleButton
                         onClick={this._onActuallyRemove}
@@ -167,13 +167,13 @@ export default class EmailAddresses extends React.Component {
         }
 
         const task = new AddThreepid();
-        this.setState({verifying: true, continueDisabled: true, addTask: task});
+        this.setState({ verifying: true, continueDisabled: true, addTask: task });
 
         task.addEmailAddress(email).then(() => {
-            this.setState({continueDisabled: false});
+            this.setState({ continueDisabled: false });
         }).catch((err) => {
             console.error("Unable to add email address " + email + " " + err);
-            this.setState({verifying: false, continueDisabled: false, addTask: null});
+            this.setState({ verifying: false, continueDisabled: false, addTask: null });
             Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
                 title: _t("Unable to add email address"),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -185,7 +185,7 @@ export default class EmailAddresses extends React.Component {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({continueDisabled: true});
+        this.setState({ continueDisabled: true });
         this.state.addTask.checkEmailLinkClicked().then(([finished]) => {
             let newEmailAddress = this.state.newEmailAddress;
             if (finished) {
@@ -204,7 +204,7 @@ export default class EmailAddresses extends React.Component {
                 newEmailAddress,
             });
         }).catch((err) => {
-            this.setState({continueDisabled: false});
+            this.setState({ continueDisabled: false });
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             if (err.errcode === 'M_THREEPID_AUTH_FAILED') {
                 Modal.createTrackedDialog("Email hasn't been verified yet", "", ErrorDialog, {
diff --git a/src/components/views/settings/account/PhoneNumbers.js b/src/components/views/settings/account/PhoneNumbers.js
index e154068128..c158d323ac 100644
--- a/src/components/views/settings/account/PhoneNumbers.js
+++ b/src/components/views/settings/account/PhoneNumbers.js
@@ -17,15 +17,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../MatrixClientPeg";
+import { _t } from "../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 import AddThreepid from "../../../../AddThreepid";
 import CountryDropdown from "../../auth/CountryDropdown";
 import * as sdk from '../../../../index';
 import Modal from '../../../../Modal';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
 /*
 TODO: Improve the UX for everything in here.
@@ -52,14 +52,14 @@ export class ExistingPhoneNumber extends React.Component {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: true});
+        this.setState({ verifyRemove: true });
     };
 
     _onDontRemove = (e) => {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({verifyRemove: false});
+        this.setState({ verifyRemove: false });
     };
 
     _onActuallyRemove = (e) => {
@@ -83,7 +83,7 @@ export class ExistingPhoneNumber extends React.Component {
             return (
                 <div className="mx_ExistingPhoneNumber">
                     <span className="mx_ExistingPhoneNumber_promptText">
-                        {_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
+                        {_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
                     </span>
                     <AccessibleButton
                         onClick={this._onActuallyRemove}
@@ -164,13 +164,13 @@ export default class PhoneNumbers extends React.Component {
         const phoneCountry = this.state.phoneCountry;
 
         const task = new AddThreepid();
-        this.setState({verifying: true, continueDisabled: true, addTask: task});
+        this.setState({ verifying: true, continueDisabled: true, addTask: task });
 
         task.addMsisdn(phoneCountry, phoneNumber).then((response) => {
-            this.setState({continueDisabled: false, verifyMsisdn: response.msisdn});
+            this.setState({ continueDisabled: false, verifyMsisdn: response.msisdn });
         }).catch((err) => {
             console.error("Unable to add phone number " + phoneNumber + " " + err);
-            this.setState({verifying: false, continueDisabled: false, addTask: null});
+            this.setState({ verifying: false, continueDisabled: false, addTask: null });
             Modal.createTrackedDialog('Add Phone Number Error', '', ErrorDialog, {
                 title: _t("Error"),
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
@@ -182,7 +182,7 @@ export default class PhoneNumbers extends React.Component {
         e.stopPropagation();
         e.preventDefault();
 
-        this.setState({continueDisabled: true});
+        this.setState({ continueDisabled: true });
         const token = this.state.newPhoneNumberCode;
         const address = this.state.verifyMsisdn;
         this.state.addTask.haveMsisdnToken(token).then(([finished]) => {
@@ -205,7 +205,7 @@ export default class PhoneNumbers extends React.Component {
                 newPhoneNumberCode: "",
             });
         }).catch((err) => {
-            this.setState({continueDisabled: false});
+            this.setState({ continueDisabled: false });
             if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Unable to verify phone number: " + err);
@@ -214,13 +214,13 @@ export default class PhoneNumbers extends React.Component {
                     description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
             } else {
-                this.setState({verifyError: _t("Incorrect verification code")});
+                this.setState({ verifyError: _t("Incorrect verification code") });
             }
         });
     };
 
     _onCountryChanged = (e) => {
-        this.setState({phoneCountry: e.iso2});
+        this.setState({ phoneCountry: e.iso2 });
     };
 
     render() {
diff --git a/src/components/views/settings/discovery/EmailAddresses.js b/src/components/views/settings/discovery/EmailAddresses.js
index b8d91aae2a..352ff1b0ba 100644
--- a/src/components/views/settings/discovery/EmailAddresses.js
+++ b/src/components/views/settings/discovery/EmailAddresses.js
@@ -19,11 +19,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { _t } from "../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import * as sdk from '../../../../index';
 import Modal from '../../../../Modal';
 import AddThreepid from '../../../../AddThreepid';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
 /*
 TODO: Improve the UX for everything in here.
diff --git a/src/components/views/settings/discovery/PhoneNumbers.js b/src/components/views/settings/discovery/PhoneNumbers.js
index 5cbcdfe47e..9df4a38f70 100644
--- a/src/components/views/settings/discovery/PhoneNumbers.js
+++ b/src/components/views/settings/discovery/PhoneNumbers.js
@@ -19,11 +19,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { _t } from "../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import * as sdk from '../../../../index';
 import Modal from '../../../../Modal';
 import AddThreepid from '../../../../AddThreepid';
-import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../utils/replaceableComponent";
 
 /*
 TODO: Improve the UX for everything in here.
@@ -190,7 +190,7 @@ export class PhoneNumber extends React.Component {
                     description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
             } else {
-                this.setState({verifyError: _t("Incorrect verification code")});
+                this.setState({ verifyError: _t("Incorrect verification code") });
             }
         }
     }
diff --git a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
index c4963d0154..eda3419d14 100644
--- a/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
@@ -81,7 +81,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
     };
 
     private openDevtools = (e) => {
-        Modal.createDialog(DevtoolsDialog, {roomId: this.props.roomId});
+        Modal.createDialog(DevtoolsDialog, { roomId: this.props.roomId });
     };
 
     private onOldRoomClicked = (e) => {
diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
index 25dfe2f151..fb144da399 100644
--- a/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import {_t} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import BridgeTile from "../../BridgeTile";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index 10c93c5dca..125558732d 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -16,15 +16,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
 import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 import SettingsStore from "../../../../../settings/SettingsStore";
-import {UIFeature} from "../../../../../settings/UIFeature";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { UIFeature } from "../../../../../settings/UIFeature";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.room.GeneralRoomSettingsTab")
 export default class GeneralRoomSettingsTab extends React.Component {
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
index fa56fa2cb6..cb65e13825 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js
@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Notifier from "../../../../../Notifier";
 import SettingsStore from '../../../../../settings/SettingsStore';
-import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.room.NotificationsSettingsTab")
 export default class NotificationsSettingsTab extends React.Component {
@@ -47,7 +47,7 @@ export default class NotificationsSettingsTab extends React.Component {
         if (!soundData) {
             return;
         }
-        this.setState({currentSound: soundData.name || soundData.url});
+        this.setState({ currentSound: soundData.name || soundData.url });
     }
 
     async _triggerUploader(e) {
diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
index 19ebe2a77e..67c7998751 100644
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t, _td} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { _t, _td } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomState } from "matrix-js-sdk/src/models/room-state";
@@ -45,18 +45,18 @@ const plEventsToLabels = {
 
 const plEventsToShow = {
     // If an event is listed here, it will be shown in the PL settings. Defaults will be calculated.
-    [EventType.RoomAvatar]: {isState: true},
-    [EventType.RoomName]: {isState: true},
-    [EventType.RoomCanonicalAlias]: {isState: true},
-    [EventType.RoomHistoryVisibility]: {isState: true},
-    [EventType.RoomPowerLevels]: {isState: true},
-    [EventType.RoomTopic]: {isState: true},
-    [EventType.RoomTombstone]: {isState: true},
-    [EventType.RoomEncryption]: {isState: true},
-    [EventType.RoomServerAcl]: {isState: true},
+    [EventType.RoomAvatar]: { isState: true },
+    [EventType.RoomName]: { isState: true },
+    [EventType.RoomCanonicalAlias]: { isState: true },
+    [EventType.RoomHistoryVisibility]: { isState: true },
+    [EventType.RoomPowerLevels]: { isState: true },
+    [EventType.RoomTopic]: { isState: true },
+    [EventType.RoomTombstone]: { isState: true },
+    [EventType.RoomEncryption]: { isState: true },
+    [EventType.RoomServerAcl]: { isState: true },
 
     // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
-    "im.vector.modular.widgets": {isState: true},
+    "im.vector.modular.widgets": { isState: true },
 };
 
 // parse a string as an integer; if the input is undefined, or cannot be parsed
@@ -103,7 +103,7 @@ export class BannedUser extends React.Component<IBannedUserProps> {
         return (
             <li>
                 {unbanButton}
-                <span title={_t("Banned by %(displayName)s", {displayName: this.props.by})}>
+                <span title={_t("Banned by %(displayName)s", { displayName: this.props.by })}>
                     <strong>{ this.props.member.name }</strong> {userId}
                     {this.props.reason ? " " + _t('Reason') + ": " + this.props.reason : ""}
                 </span>
@@ -394,7 +394,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
             if (label) {
                 label = _t(label);
             } else {
-                label = _t("Send %(eventType)s events", {eventType});
+                label = _t("Send %(eventType)s events", { eventType });
             }
             return (
                 <div className="" key={eventType}>
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 16c620ad84..1c79836adf 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -16,16 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import {_t} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { _t } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import StyledRadioGroup from '../../../elements/StyledRadioGroup';
-import {SettingLevel} from "../../../../../settings/SettingLevel";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
-import {UIFeature} from "../../../../../settings/UIFeature";
+import { UIFeature } from "../../../../../settings/UIFeature";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 // Knock and private are reserved keywords which are not yet implemented.
@@ -100,9 +100,9 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
             HistoryVisibility.Shared,
         );
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
-        this.setState({joinRule, guestAccess, history, encrypted});
+        this.setState({ joinRule, guestAccess, history, encrypted });
         const hasAliases = await this.hasAliases();
-        this.setState({hasAliases});
+        this.setState({ hasAliases });
     }
 
     private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
@@ -140,18 +140,18 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
             ),
             onFinished: (confirm) => {
                 if (!confirm) {
-                    this.setState({encrypted: false});
+                    this.setState({ encrypted: false });
                     return;
                 }
 
                 const beforeEncrypted = this.state.encrypted;
-                this.setState({encrypted: true});
+                this.setState({ encrypted: true });
                 MatrixClientPeg.get().sendStateEvent(
                     this.props.roomId, "m.room.encryption",
                     { algorithm: "m.megolm.v1.aes-sha2" },
                 ).catch((e) => {
                     console.error(e);
-                    this.setState({encrypted: beforeEncrypted});
+                    this.setState({ encrypted: beforeEncrypted });
                 });
             },
         });
@@ -166,16 +166,16 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         const beforeJoinRule = this.state.joinRule;
         const beforeGuestAccess = this.state.guestAccess;
-        this.setState({joinRule, guestAccess});
+        this.setState({ joinRule, guestAccess });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(this.props.roomId, "m.room.join_rules", {join_rule: joinRule}, "").catch((e) => {
+        client.sendStateEvent(this.props.roomId, "m.room.join_rules", { join_rule: joinRule }, "").catch((e) => {
             console.error(e);
-            this.setState({joinRule: beforeJoinRule});
+            this.setState({ joinRule: beforeJoinRule });
         });
-        client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => {
+        client.sendStateEvent(this.props.roomId, "m.room.guest_access", { guest_access: guestAccess }, "").catch((e) => {
             console.error(e);
-            this.setState({guestAccess: beforeGuestAccess});
+            this.setState({ guestAccess: beforeGuestAccess });
         });
     };
 
@@ -212,27 +212,27 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         const beforeJoinRule = this.state.joinRule;
         const beforeGuestAccess = this.state.guestAccess;
-        this.setState({joinRule, guestAccess});
+        this.setState({ joinRule, guestAccess });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(this.props.roomId, "m.room.join_rules", {join_rule: joinRule}, "").catch((e) => {
+        client.sendStateEvent(this.props.roomId, "m.room.join_rules", { join_rule: joinRule }, "").catch((e) => {
             console.error(e);
-            this.setState({joinRule: beforeJoinRule});
+            this.setState({ joinRule: beforeJoinRule });
         });
-        client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => {
+        client.sendStateEvent(this.props.roomId, "m.room.guest_access", { guest_access: guestAccess }, "").catch((e) => {
             console.error(e);
-            this.setState({guestAccess: beforeGuestAccess});
+            this.setState({ guestAccess: beforeGuestAccess });
         });
     };
 
     private onHistoryRadioToggle = (history: HistoryVisibility) => {
         const beforeHistory = this.state.history;
-        this.setState({history: history});
+        this.setState({ history: history });
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
             history_visibility: history,
         }, "").catch((e) => {
             console.error(e);
-            this.setState({history: beforeHistory});
+            this.setState({ history: beforeHistory });
         });
     };
 
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 9e27ed968e..f04c2f13ae 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
 import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -84,7 +84,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             fontSize: (SettingsStore.getValue("baseFontSize", null) + FontWatcher.SIZE_DIFF).toString(),
             ...this.calculateThemeState(),
             customThemeUrl: "",
-            customThemeMessage: {isError: false, text: ""},
+            customThemeMessage: { isError: false, text: "" },
             useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
             useSystemFont: SettingsStore.getValue("useSystemFont"),
             systemFont: SettingsStore.getValue("systemFont"),
@@ -149,43 +149,43 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');
         SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
-            dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
-            this.setState({theme: oldTheme});
+            dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
+            this.setState({ theme: oldTheme });
         });
-        this.setState({theme: newTheme});
+        this.setState({ theme: newTheme });
         // The settings watcher doesn't fire until the echo comes back from the
         // server, so to make the theme change immediately we need to manually
         // do the dispatch now
         // XXX: The local echoed value appears to be unreliable, in particular
         // when settings custom themes(!) so adding forceTheme to override
         // the value from settings.
-        dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme, forceTheme: newTheme});
+        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme, forceTheme: newTheme });
     };
 
     private onUseSystemThemeChanged = (checked: boolean): void => {
-        this.setState({useSystemTheme: checked});
+        this.setState({ useSystemTheme: checked });
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
-        dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
+        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
     };
 
     private onFontSizeChanged = (size: number): void => {
-        this.setState({fontSize: size.toString()});
+        this.setState({ fontSize: size.toString() });
         SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, size - FontWatcher.SIZE_DIFF);
     };
 
-    private onValidateFontSize = async ({value}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
+    private onValidateFontSize = async ({ value }: Pick<IFieldState, "value">): Promise<IValidationResult> => {
         const parsedSize = parseFloat(value);
         const min = FontWatcher.MIN_SIZE + FontWatcher.SIZE_DIFF;
         const max = FontWatcher.MAX_SIZE + FontWatcher.SIZE_DIFF;
 
         if (isNaN(parsedSize)) {
-            return {valid: false, feedback: _t("Size must be a number")};
+            return { valid: false, feedback: _t("Size must be a number") };
         }
 
         if (!(min <= parsedSize && parsedSize <= max)) {
             return {
                 valid: false,
-                feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', {min, max}),
+                feedback: _t('Custom font size can only be between %(min)s pt and %(max)s pt', { min, max }),
             };
         }
 
@@ -196,7 +196,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             parseInt(value, 10) - FontWatcher.SIZE_DIFF,
         );
 
-        return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
+        return { valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', { min, max }) };
     };
 
     private onAddCustomTheme = async (): Promise<void> => {
@@ -213,37 +213,37 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             // XXX: need some schema for this
             const themeInfo = await r.json();
             if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
-                this.setState({customThemeMessage: {text: _t("Invalid theme schema."), isError: true}});
+                this.setState({ customThemeMessage: { text: _t("Invalid theme schema."), isError: true } });
                 return;
             }
             currentThemes.push(themeInfo);
         } catch (e) {
             console.error(e);
-            this.setState({customThemeMessage: {text: _t("Error downloading theme information."), isError: true}});
+            this.setState({ customThemeMessage: { text: _t("Error downloading theme information."), isError: true } });
             return; // Don't continue on error
         }
 
         await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
-        this.setState({customThemeUrl: "", customThemeMessage: {text: _t("Theme added!"), isError: false}});
+        this.setState({ customThemeUrl: "", customThemeMessage: { text: _t("Theme added!"), isError: false } });
 
         this.themeTimer = setTimeout(() => {
-            this.setState({customThemeMessage: {text: "", isError: false}});
+            this.setState({ customThemeMessage: { text: "", isError: false } });
         }, 3000);
     };
 
     private onCustomThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
-        this.setState({customThemeUrl: e.target.value});
+        this.setState({ customThemeUrl: e.target.value });
     };
 
     private onIRCLayoutChange = (enabled: boolean) => {
         if (enabled) {
-            this.setState({layout: Layout.IRC});
+            this.setState({ layout: Layout.IRC });
             SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
         } else {
-            this.setState({layout: Layout.Group});
+            this.setState({ layout: Layout.Group });
             SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
         }
-    }
+    };
 
     private renderThemeSection() {
         const themeWatcher = new ThemeWatcher();
@@ -293,7 +293,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
         // XXX: replace any type here
         const themes = Object.entries<any>(enumerateThemes())
-            .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
+            .map(p => ({ id: p[0], name: p[1] })); // convert pairs to objects for code readability
         const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
         const customThemes = themes.filter(p => !builtInThemes.includes(p))
             .sort((a, b) => compare(a.name, b.name));
@@ -348,7 +348,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <SettingsFlag
                 name="useCustomFontSize"
                 level={SettingLevel.ACCOUNT}
-                onChange={(checked) => this.setState({useCustomFontSize: checked})}
+                onChange={(checked) => this.setState({ useCustomFontSize: checked })}
                 useCheckbox={true}
             />
 
@@ -360,7 +360,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 value={this.state.fontSize.toString()}
                 id="font_size_field"
                 onValidate={this.onValidateFontSize}
-                onChange={(value) => this.setState({fontSize: value.target.value})}
+                onChange={(value) => this.setState({ fontSize: value.target.value })}
                 disabled={!this.state.useCustomFontSize}
                 className="mx_SettingsTab_customFontSizeField"
             />
@@ -373,7 +373,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         const brand = SdkConfig.get().brand;
         const toggle = <div
             className="mx_AppearanceUserSettingsTab_AdvancedToggle"
-            onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}
+            onClick={() => this.setState({ showAdvanced: !this.state.showAdvanced })}
         >
             {this.state.showAdvanced ? _t("Hide advanced") : _t("Show advanced")}
         </div>;
@@ -403,7 +403,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     name="useSystemFont"
                     level={SettingLevel.DEVICE}
                     useCheckbox={true}
-                    onChange={(checked) => this.setState({useSystemFont: checked})}
+                    onChange={(checked) => this.setState({ useSystemFont: checked })}
                 />
                 <Field
                     className="mx_AppearanceUserSettingsTab_systemFont"
diff --git a/src/components/views/settings/tabs/user/FlairUserSettingsTab.js b/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
index 28e80f3030..272f5ec071 100644
--- a/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/FlairUserSettingsTab.js
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import GroupUserSettings from "../../../groups/GroupUserSettings";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.user.FlairUserSettingsTab")
 export default class FlairUserSettingsTab extends React.Component {
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
index 5118414903..44ddaf08e4 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import ProfileSettings from "../../ProfileSettings";
 import * as languageHandler from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -27,19 +27,19 @@ import AccessibleButton from "../../../elements/AccessibleButton";
 import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog";
 import PropTypes from "prop-types";
 import PlatformPeg from "../../../../../PlatformPeg";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
-import {Service, startTermsFlow} from "../../../../../Terms";
-import {SERVICE_TYPES} from "matrix-js-sdk/src/service-types";
+import { Service, startTermsFlow } from "../../../../../Terms";
+import { SERVICE_TYPES } from "matrix-js-sdk/src/service-types";
 import IdentityAuthClient from "../../../../../IdentityAuthClient";
-import {abbreviateUrl} from "../../../../../utils/UrlUtils";
+import { abbreviateUrl } from "../../../../../utils/UrlUtils";
 import { getThreepidsWithBindStatus } from '../../../../../boundThreepids';
 import Spinner from "../../../elements/Spinner";
-import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {UIFeature} from "../../../../../settings/UIFeature";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+import { UIFeature } from "../../../../../settings/UIFeature";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.user.GeneralUserSettingsTab")
 export default class GeneralUserSettingsTab extends React.Component {
@@ -84,7 +84,7 @@ export default class GeneralUserSettingsTab extends React.Component {
         // the enabled flag value.
         const canChangePassword = !changePasswordCap || changePasswordCap['enabled'] !== false;
 
-        this.setState({serverSupportsSeparateAddAndBind, canChangePassword});
+        this.setState({ serverSupportsSeparateAddAndBind, canChangePassword });
 
         this._getThreepidState();
     }
@@ -104,7 +104,7 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     _onAction = (payload) => {
         if (payload.action === 'id_server_changed') {
-            this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())});
+            this.setState({ haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()) });
             this._getThreepidState();
         }
     };
@@ -145,7 +145,7 @@ export default class GeneralUserSettingsTab extends React.Component {
 
     async _checkTerms() {
         if (!this.state.haveIdServer) {
-            this.setState({idServerHasUnsignedTerms: false});
+            this.setState({ idServerHasUnsignedTerms: false });
             return;
         }
 
@@ -191,7 +191,7 @@ export default class GeneralUserSettingsTab extends React.Component {
         if (this.state.language === newLanguage) return;
 
         SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
-        this.setState({language: newLanguage});
+        this.setState({ language: newLanguage });
         const platform = PlatformPeg.get();
         if (platform) {
             platform.setLanguage(newLanguage);
@@ -200,7 +200,7 @@ export default class GeneralUserSettingsTab extends React.Component {
     };
 
     _onSpellCheckLanguagesChange = (languages) => {
-        this.setState({spellCheckLanguages: languages});
+        this.setState({ spellCheckLanguages: languages });
 
         const plaf = PlatformPeg.get();
         if (plaf) {
@@ -353,7 +353,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                 {_t(
                     "Agree to the identity server (%(serverName)s) Terms of Service to " +
                     "allow yourself to be discoverable by email address or phone number.",
-                    {serverName: this.state.idServerName},
+                    { serverName: this.state.idServerName },
                 )}
             </span>;
             return (
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index beff033001..57602c5f1b 100644
--- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t, getCurrentLanguage} from "../../../../../languageHandler";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { _t, getCurrentLanguage } from "../../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
 import SdkConfig from "../../../../../SdkConfig";
@@ -54,10 +54,10 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
     }
 
     componentDidMount(): void {
-        PlatformPeg.get().getAppVersion().then((ver) => this.setState({appVersion: ver})).catch((e) => {
+        PlatformPeg.get().getAppVersion().then((ver) => this.setState({ appVersion: ver })).catch((e) => {
             console.error("Error getting vector version: ", e);
         });
-        PlatformPeg.get().canSelfUpdate().then((v) => this.setState({canUpdate: v})).catch((e) => {
+        PlatformPeg.get().canSelfUpdate().then((v) => this.setState({ canUpdate: v })).catch((e) => {
             console.error("Error getting self updatability: ", e);
         });
     }
@@ -172,12 +172,12 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
         const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
-        const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
+        const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
         this.closeCopiedTooltip = target.onmouseleave = close;
-    }
+    };
 
     render() {
         const brand = SdkConfig.get().brand;
diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
index 98148b19e0..abf9709f50 100644
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import PropTypes from "prop-types";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import * as sdk from "../../../../../index";
-import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 import SdkConfig from "../../../../../SdkConfig";
 import BetaCard from "../../../beta/BetaCard";
 
diff --git a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
index 6997defea9..0a2b9f3212 100644
--- a/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
@@ -15,15 +15,15 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
-import {Mjolnir} from "../../../../../mjolnir/Mjolnir";
-import {ListRule} from "../../../../../mjolnir/ListRule";
-import {BanList, RULE_SERVER, RULE_USER} from "../../../../../mjolnir/BanList";
+import { Mjolnir } from "../../../../../mjolnir/Mjolnir";
+import { ListRule } from "../../../../../mjolnir/ListRule";
+import { BanList, RULE_SERVER, RULE_USER } from "../../../../../mjolnir/BanList";
 import Modal from "../../../../../Modal";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 interface IState {
     busy: boolean;
@@ -44,11 +44,11 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
     }
 
     private onPersonalRuleChanged = (e) => {
-        this.setState({newPersonalRule: e.target.value});
+        this.setState({ newPersonalRule: e.target.value });
     };
 
     private onNewListChanged = (e) => {
-        this.setState({newList: e.target.value});
+        this.setState({ newList: e.target.value });
     };
 
     private onAddPersonalRule = async (e) => {
@@ -60,11 +60,11 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
             kind = RULE_USER;
         }
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             const list = await Mjolnir.sharedInstance().getOrCreatePersonalList();
             await list.banEntity(kind, this.state.newPersonalRule, _t("Ignored/Blocked"));
-            this.setState({newPersonalRule: ""}); // this will also cause the new rule to be rendered
+            this.setState({ newPersonalRule: "" }); // this will also cause the new rule to be rendered
         } catch (e) {
             console.error(e);
 
@@ -74,7 +74,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                 description: _t('Something went wrong. Please try again or view your console for hints.'),
             });
         } finally {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         }
     };
 
@@ -82,11 +82,11 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
         e.preventDefault();
         e.stopPropagation();
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             const room = await MatrixClientPeg.get().joinRoom(this.state.newList);
             await Mjolnir.sharedInstance().subscribeToList(room.roomId);
-            this.setState({newList: ""}); // this will also cause the new rule to be rendered
+            this.setState({ newList: "" }); // this will also cause the new rule to be rendered
         } catch (e) {
             console.error(e);
 
@@ -96,12 +96,12 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                 description: _t('Please verify the room ID or address and try again.'),
             });
         } finally {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         }
     };
 
     private async removePersonalRule(rule: ListRule) {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             const list = Mjolnir.sharedInstance().getPersonalList();
             await list.unbanEntity(rule.kind, rule.entity);
@@ -114,12 +114,12 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                 description: _t('Something went wrong. Please try again or view your console for hints.'),
             });
         } finally {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         }
     }
 
     private async unsubscribeFromList(list: BanList) {
-        this.setState({busy: true});
+        this.setState({ busy: true });
         try {
             await Mjolnir.sharedInstance().unsubscribeFromList(list.roomId);
             await MatrixClientPeg.get().leave(list.roomId);
@@ -132,7 +132,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                 description: _t('Please try again or view your console for hints.'),
             });
         } finally {
-            this.setState({busy: false});
+            this.setState({ busy: false });
         }
     }
 
@@ -153,7 +153,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
         };
 
         Modal.createTrackedDialog('View Mjolnir list rules', '', QuestionDialog, {
-            title: _t("Ban list rules - %(roomName)s", {roomName: name}),
+            title: _t("Ban list rules - %(roomName)s", { roomName: name }),
             description: (
                 <div>
                     <h3>{_t("Server rules")}</h3>
@@ -256,7 +256,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                             "Add users and servers you want to ignore here. Use asterisks " +
                             "to have %(brand)s match any characters. For example, <code>@bot:*</code> " +
                             "would ignore all users that have the name 'bot' on any server.",
-                            { brand }, {code: (s) => <code>{s}</code>},
+                            { brand }, { code: (s) => <code>{s}</code> },
                         )}<br />
                         <br />
                         {_t(
diff --git a/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js b/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js
index 8a71d1bf15..0aabdd24e2 100644
--- a/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/NotificationUserSettingsTab.js
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import * as sdk from "../../../../../index";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.user.NotificationUserSettingsTab")
 export default class NotificationUserSettingsTab extends React.Component {
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index f02c5c9ce0..1988ec50ac 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -16,13 +16,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import Field from "../../../elements/Field";
 import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
-import {SettingLevel} from "../../../../../settings/SettingLevel";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 interface IState {
@@ -143,33 +143,33 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
     }
 
     private onAutoLaunchChange = (checked: boolean) => {
-        PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({autoLaunch: checked}));
+        PlatformPeg.get().setAutoLaunchEnabled(checked).then(() => this.setState({ autoLaunch: checked }));
     };
 
     private onWarnBeforeExitChange = (checked: boolean) => {
-        PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({warnBeforeExit: checked}));
-    }
+        PlatformPeg.get().setWarnBeforeExit(checked).then(() => this.setState({ warnBeforeExit: checked }));
+    };
 
     private onAlwaysShowMenuBarChange = (checked: boolean) => {
-        PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({alwaysShowMenuBar: checked}));
+        PlatformPeg.get().setAutoHideMenuBarEnabled(!checked).then(() => this.setState({ alwaysShowMenuBar: checked }));
     };
 
     private onMinimizeToTrayChange = (checked: boolean) => {
-        PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({minimizeToTray: checked}));
+        PlatformPeg.get().setMinimizeToTrayEnabled(checked).then(() => this.setState({ minimizeToTray: checked }));
     };
 
     private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({autocompleteDelay: e.target.value});
+        this.setState({ autocompleteDelay: e.target.value });
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
     };
 
     private onReadMarkerInViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({readMarkerInViewThresholdMs: e.target.value});
+        this.setState({ readMarkerInViewThresholdMs: e.target.value });
         SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
     private onReadMarkerOutOfViewThresholdMs = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
+        this.setState({ readMarkerOutOfViewThresholdMs: e.target.value });
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
index 53ed511b0a..79d8c9224e 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@@ -17,24 +17,24 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as FormattingUtils from "../../../../../utils/FormattingUtils";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Analytics from "../../../../../Analytics";
 import Modal from "../../../../../Modal";
 import * as sdk from "../../../../..";
-import {sleep} from "../../../../../utils/promise";
+import { sleep } from "../../../../../utils/promise";
 import dis from "../../../../../dispatcher/dispatcher";
-import {privateShouldBeEncrypted} from "../../../../../createRoom";
-import {SettingLevel} from "../../../../../settings/SettingLevel";
+import { privateShouldBeEncrypted } from "../../../../../createRoom";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SecureBackupPanel from "../../SecureBackupPanel";
 import SettingsStore from "../../../../../settings/SettingsStore";
-import {UIFeature} from "../../../../../settings/UIFeature";
-import {isE2eAdvancedPanelPossible} from "../../E2eAdvancedPanel";
+import { UIFeature } from "../../../../../settings/UIFeature";
+import { isE2eAdvancedPanelPossible } from "../../E2eAdvancedPanel";
 import CountlyAnalytics from "../../../../../CountlyAnalytics";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 export class IgnoredUser extends React.Component {
     static propTypes = {
@@ -82,12 +82,11 @@ export default class SecurityUserSettingsTab extends React.Component {
         this._onAction = this._onAction.bind(this);
     }
 
-
-    _onAction({action}) {
+    _onAction({ action }) {
         if (action === "ignore_state_changed") {
             const ignoredUserIds = MatrixClientPeg.get().getIgnoredUsers();
             const newWaitingUnignored = this.state.waitingUnignored.filter(e=> ignoredUserIds.includes(e));
-            this.setState({ignoredUserIds, waitingUnignored: newWaitingUnignored});
+            this.setState({ ignoredUserIds, waitingUnignored: newWaitingUnignored });
         }
     }
 
@@ -111,14 +110,14 @@ export default class SecurityUserSettingsTab extends React.Component {
     _onExportE2eKeysClicked = () => {
         Modal.createTrackedDialogAsync('Export E2E Keys', '',
             import('../../../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
-            {matrixClient: MatrixClientPeg.get()},
+            { matrixClient: MatrixClientPeg.get() },
         );
     };
 
     _onImportE2eKeysClicked = () => {
         Modal.createTrackedDialogAsync('Import E2E Keys', '',
             import('../../../../../async-components/views/dialogs/security/ImportE2eKeysDialog'),
-            {matrixClient: MatrixClientPeg.get()},
+            { matrixClient: MatrixClientPeg.get() },
         );
     };
 
@@ -131,13 +130,13 @@ export default class SecurityUserSettingsTab extends React.Component {
     }
 
     _onUserUnignored = async (userId) => {
-        const {ignoredUserIds, waitingUnignored} = this.state;
+        const { ignoredUserIds, waitingUnignored } = this.state;
         const currentlyIgnoredUserIds = ignoredUserIds.filter(e => !waitingUnignored.includes(e));
 
         const index = currentlyIgnoredUserIds.indexOf(userId);
         if (index !== -1) {
             currentlyIgnoredUserIds.splice(index, 1);
-            this.setState(({waitingUnignored}) => ({waitingUnignored: [...waitingUnignored, userId]}));
+            this.setState(({ waitingUnignored }) => ({ waitingUnignored: [...waitingUnignored, userId] }));
             MatrixClientPeg.get().setIgnoredUsers(currentlyIgnoredUserIds);
         }
     };
@@ -168,7 +167,7 @@ export default class SecurityUserSettingsTab extends React.Component {
             // Accept/reject invite
             await action(roomId).then(() => {
                 // No error, update invited rooms button
-                this.setState({invitedRoomAmt: self.state.invitedRoomAmt - 1});
+                this.setState({ invitedRoomAmt: self.state.invitedRoomAmt - 1 });
             }, async (e) => {
                 // Action failure
                 if (e.errcode === "M_LIMIT_EXCEEDED") {
@@ -253,7 +252,7 @@ export default class SecurityUserSettingsTab extends React.Component {
     }
 
     _renderIgnoredUsers() {
-        const {waitingUnignored, ignoredUserIds} = this.state;
+        const { waitingUnignored, ignoredUserIds } = this.state;
 
         const userIds = !ignoredUserIds?.length
             ? _t('You have no ignored users.')
@@ -291,10 +290,10 @@ export default class SecurityUserSettingsTab extends React.Component {
             <div className='mx_SettingsTab_section mx_SecurityUserSettingsTab_bulkOptions'>
                 <span className='mx_SettingsTab_subheading'>{_t('Bulk options')}</span>
                 <AccessibleButton onClick={onClickAccept} kind='primary' disabled={this.state.managingInvites}>
-                    {_t("Accept all %(invitedRooms)s invites", {invitedRooms: this.state.invitedRoomAmt})}
+                    {_t("Accept all %(invitedRooms)s invites", { invitedRooms: this.state.invitedRoomAmt })}
                 </AccessibleButton>
                 <AccessibleButton onClick={onClickReject} kind='danger' disabled={this.state.managingInvites}>
-                    {_t("Reject all %(invitedRooms)s invites", {invitedRooms: this.state.invitedRoomAmt})}
+                    {_t("Reject all %(invitedRooms)s invites", { invitedRooms: this.state.invitedRoomAmt })}
                 </AccessibleButton>
                 {this.state.managingInvites ? <InlineSpinner /> : <div />}
             </div>
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
index f730406eed..fe6261cb21 100644
--- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js
@@ -16,16 +16,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import {_t} from "../../../../../languageHandler";
+import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
 import MediaDeviceHandler from "../../../../../MediaDeviceHandler";
 import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
-import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../../index";
 import Modal from "../../../../../Modal";
-import {SettingLevel} from "../../../../../settings/SettingLevel";
-import {replaceableComponent} from "../../../../../utils/replaceableComponent";
+import { SettingLevel } from "../../../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 
 @replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab")
 export default class VoiceUserSettingsTab extends React.Component {
@@ -67,7 +67,7 @@ export default class VoiceUserSettingsTab extends React.Component {
         let stream;
         let error;
         try {
-            constraints = {video: true, audio: true};
+            constraints = { video: true, audio: true };
             stream = await navigator.mediaDevices.getUserMedia(constraints);
         } catch (err) {
             // user likely doesn't have a webcam,
diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx
index ec40f7bed8..f6b98eedec 100644
--- a/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/src/components/views/spaces/SpaceBasicSettings.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useRef, useState} from "react";
+import React, { useRef, useState } from "react";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 0a92bd2dbf..4bb61d7ccb 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -14,25 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useContext, useRef, useState} from "react";
+import React, { useContext, useRef, useState } from "react";
 import classNames from "classnames";
-import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomType, RoomCreateTypeField } from "matrix-js-sdk/src/@types/event";
 import FocusLock from "react-focus-lock";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenu } from "../../structures/ContextMenu";
 import createRoom from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {SpaceAvatar} from "./SpaceBasicSettings";
+import { SpaceAvatar } from "./SpaceBasicSettings";
 import AccessibleButton from "../elements/AccessibleButton";
-import {BetaPill} from "../beta/BetaCard";
+import { BetaPill } from "../beta/BetaCard";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {Action} from "../../../dispatcher/actions";
+import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserSettingsDialog";
 import Field from "../elements/Field";
 import withValidation from "../elements/Validation";
-import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
 import { Preset } from "matrix-js-sdk/src/@types/partials";
 import { ICreateRoomStateEvent } from "matrix-js-sdk/src/@types/requests";
 import RoomAliasField from "../elements/RoomAliasField";
@@ -261,6 +261,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
             { body }
         </FocusLock>
     </ContextMenu>;
-}
+};
 
 export default SpaceCreateMenu;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index b33fcf8915..5b3cf31cad 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -111,7 +111,7 @@ const SpaceButton: React.FC<IButtonProps> = ({
     })}>
         { button }
     </li>;
-}
+};
 
 const useSpaces = (): [Room[], Room[], Room | null] => {
     const [invites, setInvites] = useState<Room[]>(SpaceStore.instance.invitedSpaces);
@@ -267,7 +267,7 @@ const SpacePanel = () => {
             SpaceStore.instance.moveRootSpace(result.source.index, result.destination.index);
         }}>
             <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
-                {({onKeyDownHandler}) => (
+                {({ onKeyDownHandler }) => (
                     <ul
                         className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
                         onKeyDown={onKeyDownHandler}
diff --git a/src/components/views/spaces/SpacePublicShare.tsx b/src/components/views/spaces/SpacePublicShare.tsx
index 207360c2c2..4169e40269 100644
--- a/src/components/views/spaces/SpacePublicShare.tsx
+++ b/src/components/views/spaces/SpacePublicShare.tsx
@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {_t} from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
-import {copyPlaintext} from "../../../utils/strings";
-import {sleep} from "../../../utils/promise";
-import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
-import {showRoomInviteDialog} from "../../../RoomInvite";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import { copyPlaintext } from "../../../utils/strings";
+import { sleep } from "../../../utils/promise";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { showRoomInviteDialog } from "../../../RoomInvite";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 interface IProps {
     space: Room;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 75ca641320..486a988b93 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -118,7 +118,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             this.props.parents,
             newCollapsedState,
         );
-        this.setState({collapsed: newCollapsedState});
+        this.setState({ collapsed: newCollapsedState });
         // don't bubble up so encapsulating button for space
         // doesn't get triggered
         evt.stopPropagation();
@@ -135,7 +135,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 height: 0,
             },
         });
-    }
+    };
 
     private onKeyDown = (ev: React.KeyboardEvent) => {
         let handled = true;
@@ -184,11 +184,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
         const target = ev.target as HTMLButtonElement;
-        this.setState({contextMenuPosition: target.getBoundingClientRect()});
+        this.setState({ contextMenuPosition: target.getBoundingClientRect() });
     };
 
     private onMenuClose = () => {
-        this.setState({contextMenuPosition: null});
+        this.setState({ contextMenuPosition: null });
     };
 
     private onInviteClick = (ev: ButtonEvent) => {
@@ -196,7 +196,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.stopPropagation();
 
         showSpaceInvite(this.props.space);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onSettingsClick = (ev: ButtonEvent) => {
@@ -204,7 +204,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.stopPropagation();
 
         showSpaceSettings(this.context, this.props.space);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onLeaveClick = (ev: ButtonEvent) => {
@@ -215,7 +215,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             action: "leave_room",
             room_id: this.props.space.roomId,
         });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onNewRoomClick = (ev: ButtonEvent) => {
@@ -223,7 +223,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.stopPropagation();
 
         showCreateNewRoom(this.context, this.props.space);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onAddExistingRoomClick = (ev: ButtonEvent) => {
@@ -231,7 +231,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.stopPropagation();
 
         showAddExistingRooms(this.context, this.props.space);
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onMembersClick = (ev: ButtonEvent) => {
@@ -250,7 +250,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             phase: RightPanelPhases.SpaceMemberList,
             refireParams: { space: this.props.space },
         });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private onExploreRoomsClick = (ev: ButtonEvent) => {
@@ -261,7 +261,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             action: "view_room",
             room_id: this.props.space.roomId,
         });
-        this.setState({contextMenuPosition: null}); // also close the menu
+        this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
     private renderContextMenu(): React.ReactElement {
@@ -467,6 +467,6 @@ const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
             />);
         })}
     </ul>;
-}
+};
 
 export default SpaceTreeLevel;
diff --git a/src/components/views/terms/InlineTermsAgreement.js b/src/components/views/terms/InlineTermsAgreement.js
index 473a97642c..e3b4df4712 100644
--- a/src/components/views/terms/InlineTermsAgreement.js
+++ b/src/components/views/terms/InlineTermsAgreement.js
@@ -16,11 +16,11 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import {_t, pickBestLanguage} from "../../../languageHandler";
+import { _t, pickBestLanguage } from "../../../languageHandler";
 import * as sdk from "../../..";
-import {objectClone} from "../../../utils/objects";
+import { objectClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.terms.InlineTermsAgreement")
 export default class InlineTermsAgreement extends React.Component {
@@ -56,20 +56,20 @@ export default class InlineTermsAgreement extends React.Component {
             }
         }
 
-        this.setState({policies});
+        this.setState({ policies });
     }
 
     _togglePolicy = (index) => {
         const policies = objectClone(this.state.policies);
         policies[index].checked = !policies[index].checked;
-        this.setState({policies});
+        this.setState({ policies });
     };
 
     _onContinue = () => {
         const hasUnchecked = !!this.state.policies.some(p => !p.checked);
         if (hasUnchecked) return;
 
-        this.setState({busy: true});
+        this.setState({ busy: true });
         this.props.onFinished(this.state.policies.map(p => p.url));
     };
 
diff --git a/src/components/views/toasts/GenericExpiringToast.tsx b/src/components/views/toasts/GenericExpiringToast.tsx
index e63edd8e79..b8a720454e 100644
--- a/src/components/views/toasts/GenericExpiringToast.tsx
+++ b/src/components/views/toasts/GenericExpiringToast.tsx
@@ -18,7 +18,7 @@ import React from "react";
 
 import ToastStore from "../../../stores/ToastStore";
 import GenericToast, { IProps as IGenericToastProps } from "./GenericToast";
-import {useExpiringCounter} from "../../../hooks/useTimeout";
+import { useExpiringCounter } from "../../../hooks/useTimeout";
 
 interface IProps extends IGenericToastProps {
     toastKey: string;
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index d84f03dfc0..78f45be899 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode} from "react";
+import React, { ReactNode } from "react";
 import AccessibleButton from "../elements/AccessibleButton";
 
-import {XOR} from "../../../@types/common";
+import { XOR } from "../../../@types/common";
 
 export interface IProps {
     description: ReactNode;
diff --git a/src/components/views/toasts/NonUrgentEchoFailureToast.tsx b/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
index abf5b10692..906a56ef09 100644
--- a/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
+++ b/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
@@ -19,7 +19,7 @@ import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
 import ServerOfflineDialog from "../dialogs/ServerOfflineDialog";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.toasts.NonUrgentEchoFailureToast")
 export default class NonUrgentEchoFailureToast extends React.PureComponent {
@@ -37,6 +37,6 @@ export default class NonUrgentEchoFailureToast extends React.PureComponent {
                     ),
                 })}
             </div>
-        )
+        );
     }
 }
diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx
index 56be23aa7e..8f6b552334 100644
--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@@ -18,18 +18,18 @@ import React from "react";
 
 import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload"
-import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
+import { userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver";
 import dis from "../../../dispatcher/dispatcher";
 import ToastStore from "../../../stores/ToastStore";
 import Modal from "../../../Modal";
 import GenericToast from "./GenericToast";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import {DeviceInfo} from "matrix-js-sdk/src/crypto/deviceinfo";
-import {Action} from "../../../dispatcher/actions";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
+import { Action } from "../../../dispatcher/actions";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     toastKey: string;
@@ -48,16 +48,16 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     constructor(props) {
         super(props);
-        this.state = {counter: Math.ceil(props.request.timeout / 1000)};
+        this.state = { counter: Math.ceil(props.request.timeout / 1000) };
     }
 
     async componentDidMount() {
-        const {request} = this.props;
+        const { request } = this.props;
         if (request.timeout && request.timeout > 0) {
             this.intervalHandle = setInterval(() => {
-                let {counter} = this.state;
+                let { counter } = this.state;
                 counter = Math.max(0, counter - 1);
-                this.setState({counter});
+                this.setState({ counter });
             }, 1000);
         }
         request.on("change", this._checkRequestIsPending);
@@ -69,7 +69,6 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         // a toast hanging around after logging in if you did a verification as part of login).
         this._checkRequestIsPending();
 
-
         if (request.isSelfVerification) {
             const cli = MatrixClientPeg.get();
             const device = await cli.getDevice(request.channel.deviceId);
@@ -83,12 +82,12 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     componentWillUnmount() {
         clearInterval(this.intervalHandle);
-        const {request} = this.props;
+        const { request } = this.props;
         request.off("change", this._checkRequestIsPending);
     }
 
     _checkRequestIsPending = () => {
-        const {request} = this.props;
+        const { request } = this.props;
         if (!request.canAccept) {
             ToastStore.sharedInstance().dismissToast(this.props.toastKey);
         }
@@ -105,7 +104,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
     accept = async () => {
         ToastStore.sharedInstance().dismissToast(this.props.toastKey);
-        const {request} = this.props;
+        const { request } = this.props;
         // no room id for to_device requests
         const cli = MatrixClientPeg.get();
         try {
@@ -139,7 +138,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
     };
 
     render() {
-        const {request} = this.props;
+        const { request } = this.props;
         let description;
         let detail;
         if (request.isSelfVerification) {
@@ -159,13 +158,13 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                 const client = MatrixClientPeg.get();
                 const user = client.getUser(userId);
                 if (user && user.displayName) {
-                    description = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+                    description = _t("%(name)s (%(userId)s)", { name: user.displayName, userId });
                 }
             }
         }
         const declineLabel = this.state.counter === 0 ?
             _t("Decline") :
-            _t("Decline (%(counter)s)", {counter: this.state.counter});
+            _t("Decline (%(counter)s)", { counter: this.state.counter });
 
         return <GenericToast
             description={description}
diff --git a/src/components/views/verification/VerificationCancelled.js b/src/components/views/verification/VerificationCancelled.js
index c57094d9b5..0d868edaaa 100644
--- a/src/components/views/verification/VerificationCancelled.js
+++ b/src/components/views/verification/VerificationCancelled.js
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.verification.VerificationCancelled")
 export default class VerificationCancelled extends React.Component {
diff --git a/src/components/views/verification/VerificationComplete.js b/src/components/views/verification/VerificationComplete.js
index cf2a72591c..c382a6dde4 100644
--- a/src/components/views/verification/VerificationComplete.js
+++ b/src/components/views/verification/VerificationComplete.js
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.verification.VerificationComplete")
 export default class VerificationComplete extends React.Component {
diff --git a/src/components/views/verification/VerificationQREmojiOptions.js b/src/components/views/verification/VerificationQREmojiOptions.js
index 89b3a596d7..785d383035 100644
--- a/src/components/views/verification/VerificationQREmojiOptions.js
+++ b/src/components/views/verification/VerificationQREmojiOptions.js
@@ -18,10 +18,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
 import Spinner from "../elements/Spinner";
-import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+import { SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 @replaceableComponent("views.verification.VerificationQREmojiOptions")
 export default class VerificationQREmojiOptions extends React.Component {
@@ -32,7 +32,7 @@ export default class VerificationQREmojiOptions extends React.Component {
     };
 
     render() {
-        const {request} = this.props;
+        const { request } = this.props;
         const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
 
         let qrCode;
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 36f99b2140..3f154b9f01 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -17,11 +17,11 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t, _td } from '../../../languageHandler';
-import {PendingActionSpinner} from "../right_panel/EncryptionInfo";
+import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 import DialogButtons from "../elements/DialogButtons";
 import { fixupColorFonts } from '../../../utils/FontManager';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 function capFirst(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -130,8 +130,8 @@ export default class VerificationShowSas extends React.Component {
                         text = _t("Waiting for your other session to verify…");
                     }
                 } else {
-                    const {displayName} = this.props;
-                    text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                    const { displayName } = this.props;
+                    text = _t("Waiting for %(displayName)s to verify…", { displayName });
                 }
             } else {
                 text = _t("Cancelling…");
diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
index fdff8e87e7..1e3440fbad 100644
--- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx
+++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx
@@ -60,7 +60,7 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
     private updateWaveform() {
         this.setState({
             waveform: this.waveform,
-        })
+        });
     }
 
     public render() {
diff --git a/src/components/views/voice_messages/PlayPauseButton.tsx b/src/components/views/voice_messages/PlayPauseButton.tsx
index 1f87eb012d..1ca05a2cd0 100644
--- a/src/components/views/voice_messages/PlayPauseButton.tsx
+++ b/src/components/views/voice_messages/PlayPauseButton.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {ReactNode} from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import React, { ReactNode } from "react";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {_t} from "../../../languageHandler";
-import {Playback, PlaybackState} from "../../../voice/Playback";
+import { _t } from "../../../languageHandler";
+import { Playback, PlaybackState } from "../../../voice/Playback";
 import classNames from "classnames";
 
 interface IProps {
diff --git a/src/components/views/voice_messages/PlaybackClock.tsx b/src/components/views/voice_messages/PlaybackClock.tsx
index 2e8ec9a3e7..9c9298f764 100644
--- a/src/components/views/voice_messages/PlaybackClock.tsx
+++ b/src/components/views/voice_messages/PlaybackClock.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Clock from "./Clock";
-import {Playback, PlaybackState} from "../../../voice/Playback";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { Playback, PlaybackState } from "../../../voice/Playback";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 
 interface IProps {
     playback: Playback;
@@ -54,11 +54,11 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
     private onPlaybackUpdate = (ev: PlaybackState) => {
         // Convert Decoding -> Stopped because we don't care about the distinction here
         if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
-        this.setState({playbackPhase: ev});
+        this.setState({ playbackPhase: ev });
     };
 
     private onTimeUpdate = (time: number[]) => {
-        this.setState({seconds: time[0], durationSeconds: time[1]});
+        this.setState({ seconds: time[0], durationSeconds: time[1] });
     };
 
     public render() {
diff --git a/src/components/views/voice_messages/PlaybackWaveform.tsx b/src/components/views/voice_messages/PlaybackWaveform.tsx
index 2e9f163f5e..096ba8199c 100644
--- a/src/components/views/voice_messages/PlaybackWaveform.tsx
+++ b/src/components/views/voice_messages/PlaybackWaveform.tsx
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from "react";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {arraySeed, arrayTrimFill} from "../../../utils/arrays";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
-import {Playback, PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
-import {percentageOf} from "../../../utils/numbers";
+import { Playback, PLAYBACK_WAVEFORM_SAMPLES } from "../../../voice/Playback";
+import { percentageOf } from "../../../utils/numbers";
 
 interface IProps {
     playback: Playback;
@@ -53,13 +53,13 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
     }
 
     private onWaveformUpdate = (waveform: number[]) => {
-        this.setState({heights: this.toHeights(waveform)});
+        this.setState({ heights: this.toHeights(waveform) });
     };
 
     private onTimeUpdate = (time: number[]) => {
         // Track percentages to a general precision to avoid over-waking the component.
         const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(3));
-        this.setState({progress});
+        this.setState({ progress });
     };
 
     public render() {
diff --git a/src/components/views/voice_messages/RecordingPlayback.tsx b/src/components/views/voice_messages/RecordingPlayback.tsx
index 776997cec2..63e823200e 100644
--- a/src/components/views/voice_messages/RecordingPlayback.tsx
+++ b/src/components/views/voice_messages/RecordingPlayback.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Playback, PlaybackState} from "../../../voice/Playback";
-import React, {ReactNode} from "react";
-import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+import { Playback, PlaybackState } from "../../../voice/Playback";
+import React, { ReactNode } from "react";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
@@ -49,7 +49,7 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     }
 
     private onPlaybackUpdate = (ev: PlaybackState) => {
-        this.setState({playbackPhase: ev});
+        this.setState({ playbackPhase: ev });
     };
 
     public render(): ReactNode {
@@ -57,6 +57,6 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             <PlaybackWaveform playback={this.props.playback} />
-        </div>
+        </div>;
     }
 }
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
index d29caf789e..272d8a06a3 100644
--- a/src/components/views/voip/AudioFeed.tsx
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
 import MediaDeviceHandler, { MediaDeviceHandlerEvent } from "../../../MediaDeviceHandler";
@@ -58,7 +58,7 @@ export default class AudioFeed extends React.Component<IProps> {
                 logger.warn("Couldn't set requested audio output device: using default", e);
             }
         }
-    }
+    };
 
     private playMedia() {
         const element = this.element.current;
@@ -77,7 +77,7 @@ export default class AudioFeed extends React.Component<IProps> {
             // should serialise the ones that need to be serialised but then be able to interrupt
             // them with another load() which will cancel the pending one, but since we don't call
             // load() explicitly, it shouldn't be a problem. - Dave
-            element.play()
+            element.play();
         } catch (e) {
             logger.info("Failed to play media element with feed", this.props.feed, e);
         }
diff --git a/src/components/views/voip/AudioFeedArrayForCall.tsx b/src/components/views/voip/AudioFeedArrayForCall.tsx
index bfe232d799..958ac2a8d4 100644
--- a/src/components/views/voip/AudioFeedArrayForCall.tsx
+++ b/src/components/views/voip/AudioFeedArrayForCall.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import AudioFeed from "./AudioFeed"
+import AudioFeed from "./AudioFeed";
 import { CallEvent, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 
@@ -48,7 +48,7 @@ export default class AudioFeedArrayForCall extends React.Component<IProps, IStat
         this.setState({
             feeds: this.props.call.getRemoteFeeds(),
         });
-    }
+    };
 
     render() {
         return this.state.feeds.map((feed, i) => {
diff --git a/src/components/views/voip/CallContainer.tsx b/src/components/views/voip/CallContainer.tsx
index 9d0047fc54..fa963e4e28 100644
--- a/src/components/views/voip/CallContainer.tsx
+++ b/src/components/views/voip/CallContainer.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import IncomingCallBox from './IncomingCallBox';
 import CallPreview from './CallPreview';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
 
diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 80fd64a820..5d6a564bc2 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -26,7 +26,7 @@ import PersistentApp from "../elements/PersistentApp";
 import SettingsStore from "../../../settings/SettingsStore";
 import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
@@ -171,7 +171,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
             primaryCall: primaryCall,
             secondaryCall: secondaryCalls[0],
         });
-    }
+    };
 
     public render() {
         if (this.state.primaryCall) {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c084dacaa8..c522116e0a 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -18,20 +18,20 @@ limitations under the License.
 import React, { createRef, CSSProperties } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import CallHandler from '../../../CallHandler';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t, _td } from '../../../languageHandler';
 import VideoFeed from './VideoFeed';
 import RoomAvatar from "../avatars/RoomAvatar";
 import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call';
 import classNames from 'classnames';
 import AccessibleButton from '../elements/AccessibleButton';
-import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../../Keyboard';
-import {alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton} from '../../structures/ContextMenu';
+import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
+import { alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton } from '../../structures/ContextMenu';
 import CallContextMenu from '../context_menus/CallContextMenu';
 import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
 import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
         // The call for us to display
@@ -117,7 +117,7 @@ export default class CallView extends React.Component<IProps, IState> {
             showMoreMenu: false,
             showDialpad: false,
             feeds: this.props.call.getFeeds(),
-        }
+        };
 
         this.updateCallListeners(null, this.props.call);
     }
@@ -191,7 +191,7 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
-        this.setState({feeds: newFeeds});
+        this.setState({ feeds: newFeeds });
     };
 
     private onCallLocalHoldUnhold = () => {
@@ -228,11 +228,11 @@ export default class CallView extends React.Component<IProps, IState> {
         this.setState({
             controlsVisible: false,
         });
-    }
+    };
 
     private onMouseMove = () => {
         this.showControls();
-    }
+    };
 
     private showControls() {
         if (this.state.showMoreMenu || this.state.showDialpad) return;
@@ -269,21 +269,21 @@ export default class CallView extends React.Component<IProps, IState> {
                 showDialpad: false,
             });
         }
-    }
+    };
 
     private onMicMuteClick = () => {
         const newVal = !this.state.micMuted;
 
         this.props.call.setMicrophoneMuted(newVal);
-        this.setState({micMuted: newVal});
-    }
+        this.setState({ micMuted: newVal });
+    };
 
     private onVidMuteClick = () => {
         const newVal = !this.state.vidMuted;
 
         this.props.call.setLocalVideoMuted(newVal);
-        this.setState({vidMuted: newVal});
-    }
+        this.setState({ vidMuted: newVal });
+    };
 
     private onMoreClick = () => {
         if (this.controlsHideTimer) {
@@ -295,21 +295,21 @@ export default class CallView extends React.Component<IProps, IState> {
             showMoreMenu: true,
             controlsVisible: true,
         });
-    }
+    };
 
     private closeDialpad = () => {
         this.setState({
             showDialpad: false,
         });
         this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
-    }
+    };
 
     private closeContextMenu = () => {
         this.setState({
             showMoreMenu: false,
         });
         this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
-    }
+    };
 
     // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
     // Note that this assumes we always have a CallView on screen at any given time
@@ -350,7 +350,7 @@ export default class CallView extends React.Component<IProps, IState> {
             action: 'view_room',
             room_id: userFacingRoomId,
         });
-    }
+    };
 
     private onSecondaryRoomAvatarClick = () => {
         const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
@@ -359,17 +359,17 @@ export default class CallView extends React.Component<IProps, IState> {
             action: 'view_room',
             room_id: userFacingRoomId,
         });
-    }
+    };
 
     private onCallResumeClick = () => {
         const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
         CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
-    }
+    };
 
     private onTransferClick = () => {
         const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
         this.props.call.transferToCall(transfereeCall);
-    }
+    };
 
     public render() {
         const client = MatrixClientPeg.get();
@@ -570,7 +570,7 @@ export default class CallView extends React.Component<IProps, IState> {
                         <div className="mx_CallView_voice_avatarsContainer">
                             <div
                                 className="mx_CallView_voice_avatarContainer"
-                                style={{width: avatarSize, height: avatarSize}}
+                                style={{ width: avatarSize, height: avatarSize }}
                             >
                                 <RoomAvatar
                                     room={callRoom}
@@ -614,7 +614,7 @@ export default class CallView extends React.Component<IProps, IState> {
             contentView = <div className={classes} onMouseMove={this.onMouseMove}>
                 {feeds}
                 <div className="mx_CallView_voice_avatarsContainer">
-                    <div className="mx_CallView_voice_avatarContainer" style={{width: avatarSize, height: avatarSize}}>
+                    <div className="mx_CallView_voice_avatarContainer" style={{ width: avatarSize, height: avatarSize }}>
                         <RoomAvatar
                             room={callRoom}
                             height={avatarSize}
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 0c785f758d..9557fe0e7e 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -19,9 +19,9 @@ import React from 'react';
 import CallHandler, { CallHandlerEvent } from '../../../CallHandler';
 import CallView from './CallView';
 import dis from '../../../dispatcher/dispatcher';
-import {Resizable} from "re-resizable";
+import { Resizable } from "re-resizable";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // What room we should display the call for
@@ -74,7 +74,7 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
     private updateCall = () => {
         const newCall = this.getCall();
         if (newCall !== this.state.call) {
-            this.setState({call: newCall});
+            this.setState({ call: newCall });
         }
     };
 
@@ -121,7 +121,7 @@ export default class CallViewForRoom extends React.Component<IProps, IState> {
                     onResize={this.onResize}
                     onResizeStop={this.onResizeStop}
                     className="mx_CallViewForRoom_ResizeWrapper"
-                    handleClasses={{bottom: "mx_CallViewForRoom_ResizeHandle"}}
+                    handleClasses={{ bottom: "mx_CallViewForRoom_ResizeHandle" }}
                 >
                     <CallView
                         call={this.state.call}
diff --git a/src/components/views/voip/DialPad.tsx b/src/components/views/voip/DialPad.tsx
index 68092fb0be..dff7a8f748 100644
--- a/src/components/views/voip/DialPad.tsx
+++ b/src/components/views/voip/DialPad.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const BUTTONS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
 
@@ -35,7 +35,7 @@ interface IButtonProps {
 class DialPadButton extends React.PureComponent<IButtonProps> {
     onClick = () => {
         this.props.onButtonPress(this.props.digit);
-    }
+    };
 
     render() {
         switch (this.props.kind) {
diff --git a/src/components/views/voip/DialPadModal.tsx b/src/components/views/voip/DialPadModal.tsx
index 8c0af5e81a..5e5903531e 100644
--- a/src/components/views/voip/DialPadModal.tsx
+++ b/src/components/views/voip/DialPadModal.tsx
@@ -20,7 +20,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
 import DialPad from './DialPad';
 import dis from '../../../dispatcher/dispatcher';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { DialNumberPayload } from "../../../dispatcher/payloads/DialNumberPayload";
 import { Action } from "../../../dispatcher/actions";
 
@@ -38,30 +38,30 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
         super(props);
         this.state = {
             value: '',
-        }
+        };
     }
 
     onCancelClick = () => {
         this.props.onFinished(false);
-    }
+    };
 
     onChange = (ev) => {
-        this.setState({value: ev.target.value});
-    }
+        this.setState({ value: ev.target.value });
+    };
 
     onFormSubmit = (ev) => {
         ev.preventDefault();
         this.onDialPress();
-    }
+    };
 
     onDigitPress = (digit) => {
-        this.setState({value: this.state.value + digit});
-    }
+        this.setState({ value: this.state.value + digit });
+    };
 
     onDeletePress = () => {
         if (this.state.value.length === 0) return;
-        this.setState({value: this.state.value.slice(0, -1)});
-    }
+        this.setState({ value: this.state.value.slice(0, -1) });
+    };
 
     onDialPress = async () => {
         const payload: DialNumberPayload = {
@@ -71,7 +71,7 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
         dis.dispatch(payload);
 
         this.props.onFinished(true);
-    }
+    };
 
     render() {
         return <div className="mx_DialPadModal">
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index c09043da24..b6295f6b2c 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
@@ -25,7 +25,7 @@ import CallHandler, { AudioID } from '../../../CallHandler';
 import RoomAvatar from '../avatars/RoomAvatar';
 import AccessibleButton from '../elements/AccessibleButton';
 import { CallState } from 'matrix-js-sdk/src/webrtc/call';
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import classNames from 'classnames';
 
@@ -91,10 +91,10 @@ export default class IncomingCallBox extends React.Component<IProps, IState> {
 
     private onSilenceClick: React.MouseEventHandler = (e) => {
         e.stopPropagation();
-        const newState = !this.state.silenced
-        this.setState({silenced: newState});
+        const newState = !this.state.silenced;
+        this.setState({ silenced: newState });
         newState ? CallHandler.sharedInstance().pause(AudioID.Ring) : CallHandler.sharedInstance().play(AudioID.Ring);
-    }
+    };
 
     public render() {
         if (!this.state.incomingCall) {
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index d22fa055ce..2f88abe6fb 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -16,12 +16,12 @@ limitations under the License.
 
 import classnames from 'classnames';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
 import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
-import MemberAvatar from "../avatars/MemberAvatar"
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import MemberAvatar from "../avatars/MemberAvatar";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     call: MatrixCall,
@@ -85,7 +85,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
             // should serialise the ones that need to be serialised but then be able to interrupt
             // them with another load() which will cancel the pending one, but since we don't call
             // load() explicitly, it shouldn't be a problem. - Dave
-            element.play()
+            element.play();
         } catch (e) {
             logger.info("Failed to play media element with feed", this.props.feed, e);
         }
diff --git a/src/createRoom.ts b/src/createRoom.ts
index 2641492588..94efecaa6c 100644
--- a/src/createRoom.ts
+++ b/src/createRoom.ts
@@ -34,7 +34,7 @@ import { isJoinedOrNearlyJoined } from "./utils/membership";
 import { VIRTUAL_ROOM_EVENT_TYPE } from "./CallHandler";
 import SpaceStore from "./stores/SpaceStore";
 import { makeSpaceParentEvent } from "./utils/space";
-import { Action } from "./dispatcher/actions"
+import { Action } from "./dispatcher/actions";
 import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests";
 import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
 
@@ -85,7 +85,7 @@ export default function createRoom(opts: IOpts): Promise<string | null> {
 
     const client = MatrixClientPeg.get();
     if (client.isGuest()) {
-        dis.dispatch({action: 'require_registration'});
+        dis.dispatch({ action: 'require_registration' });
         return Promise.resolve(null);
     }
 
@@ -325,7 +325,7 @@ export async function ensureDMExists(client: MatrixClient, userId: string): Prom
             encryption = await canEncryptToAllUsers(client, [userId]);
         }
 
-        roomId = await createRoom({encryption, dmUserId: userId, spinner: false, andView: false});
+        roomId = await createRoom({ encryption, dmUserId: userId, spinner: false, andView: false });
         await _waitForMember(client, roomId, userId);
     }
     return roomId;
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index 37e91fc54b..f8ee834102 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -157,5 +157,5 @@ export function mediaFromContent(content: IMediaEventContent, client?: MatrixCli
  * @returns {Media} The media object.
  */
 export function mediaFromMxc(mxc: string, client?: MatrixClient): Media {
-    return mediaFromContent({url: mxc}, client);
+    return mediaFromContent({ url: mxc }, client);
 }
diff --git a/src/dispatcher/dispatcher.ts b/src/dispatcher/dispatcher.ts
index 8330e5cd19..4d8df1ecaa 100644
--- a/src/dispatcher/dispatcher.ts
+++ b/src/dispatcher/dispatcher.ts
@@ -60,7 +60,7 @@ export class MatrixDispatcher extends Dispatcher<ActionPayload> {
      * @see dispatch(action: ActionPayload, sync: boolean)
      */
     fire(action: Action, sync = false) {
-        this.dispatch({action}, sync);
+        this.dispatch({ action }, sync);
     }
 }
 
diff --git a/src/dispatcher/payloads/CheckUpdatesPayload.ts b/src/dispatcher/payloads/CheckUpdatesPayload.ts
index fa4fb3a538..66a4df0fd0 100644
--- a/src/dispatcher/payloads/CheckUpdatesPayload.ts
+++ b/src/dispatcher/payloads/CheckUpdatesPayload.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
-import {UpdateCheckStatus} from "../../BasePlatform";
+import { UpdateCheckStatus } from "../../BasePlatform";
 
 export interface CheckUpdatesPayload extends ActionPayload {
     action: Action.CheckUpdates;
diff --git a/src/dispatcher/payloads/UploadPayload.ts b/src/dispatcher/payloads/UploadPayload.ts
index 40c2710dd6..023bd5403c 100644
--- a/src/dispatcher/payloads/UploadPayload.ts
+++ b/src/dispatcher/payloads/UploadPayload.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
-import {IUpload} from "../../models/IUpload";
+import { IUpload } from "../../models/IUpload";
 
 interface UploadPayload extends ActionPayload {
     /**
diff --git a/src/editor/autocomplete.ts b/src/editor/autocomplete.ts
index 240ed2d96b..518c77fa6c 100644
--- a/src/editor/autocomplete.ts
+++ b/src/editor/autocomplete.ts
@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {KeyboardEvent} from "react";
+import { KeyboardEvent } from "react";
 
-import {Part, CommandPartCreator, PartCreator} from "./parts";
+import { Part, CommandPartCreator, PartCreator } from "./parts";
 import DocumentPosition from "./position";
-import {ICompletion} from "../autocomplete/Autocompleter";
+import { ICompletion } from "../autocomplete/Autocompleter";
 import Autocomplete from "../components/views/rooms/Autocomplete";
 
 export interface ICallback {
@@ -52,7 +52,7 @@ export default class AutocompleteWrapperModel {
     }
 
     public close() {
-        this.updateCallback({close: true});
+        this.updateCallback({ close: true });
     }
 
     public hasSelection() {
@@ -65,7 +65,7 @@ export default class AutocompleteWrapperModel {
     }
 
     public onEnter() {
-        this.updateCallback({close: true});
+        this.updateCallback({ close: true });
     }
 
     /**
@@ -117,7 +117,7 @@ export default class AutocompleteWrapperModel {
     }
 
     private partForCompletion(completion: ICompletion) {
-        const {completionId} = completion;
+        const { completionId } = completion;
         const text = completion.completion;
         switch (completion.type) {
             case "room":
diff --git a/src/editor/caret.ts b/src/editor/caret.ts
index cb4978caf4..67d10ddbb5 100644
--- a/src/editor/caret.ts
+++ b/src/editor/caret.ts
@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {needsCaretNodeBefore, needsCaretNodeAfter} from "./render";
+import { needsCaretNodeBefore, needsCaretNodeAfter } from "./render";
 import Range from "./range";
 import EditorModel from "./model";
-import DocumentPosition, {IPosition} from "./position";
-import {Part} from "./parts";
+import DocumentPosition, { IPosition } from "./position";
+import { Part } from "./parts";
 
 export type Caret = Range | DocumentPosition;
 
@@ -44,7 +44,7 @@ function setDocumentRangeSelection(editor: HTMLDivElement, model: EditorModel, r
 
 export function setCaretPosition(editor: HTMLDivElement, model: EditorModel, caretPosition: IPosition) {
     const range = document.createRange();
-    const {node, offset} = getNodeAndOffsetForPosition(editor, model, caretPosition);
+    const { node, offset } = getNodeAndOffsetForPosition(editor, model, caretPosition);
     range.setStart(node, offset);
     range.collapse(true);
 
@@ -68,7 +68,7 @@ export function setCaretPosition(editor: HTMLDivElement, model: EditorModel, car
 }
 
 function getNodeAndOffsetForPosition(editor: HTMLDivElement, model: EditorModel, position: IPosition) {
-    const {offset, lineIndex, nodeIndex} = getLineAndNodePosition(model, position);
+    const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, position);
     const lineNode = editor.childNodes[lineIndex];
 
     let focusNode;
@@ -82,16 +82,16 @@ function getNodeAndOffsetForPosition(editor: HTMLDivElement, model: EditorModel,
             focusNode = focusNode.firstChild;
         }
     }
-    return {node: focusNode, offset};
+    return { node: focusNode, offset };
 }
 
 export function getLineAndNodePosition(model: EditorModel, caretPosition: IPosition) {
-    const {parts} = model;
+    const { parts } = model;
     const partIndex = caretPosition.index;
     const lineResult = findNodeInLineForPart(parts, partIndex);
-    const {lineIndex} = lineResult;
-    let {nodeIndex} = lineResult;
-    let {offset} = caretPosition;
+    const { lineIndex } = lineResult;
+    let { nodeIndex } = lineResult;
+    let { offset } = caretPosition;
     // we're at an empty line between a newline part
     // and another newline part or end/start of parts.
     // set offset to 0 so it gets set to the <br> inside the line container
@@ -99,9 +99,9 @@ export function getLineAndNodePosition(model: EditorModel, caretPosition: IPosit
         offset = 0;
     } else {
         // move caret out of uneditable part (into caret node, or empty line br) if needed
-        ({nodeIndex, offset} = moveOutOfUneditablePart(parts, partIndex, nodeIndex, offset));
+        ({ nodeIndex, offset } = moveOutOfUneditablePart(parts, partIndex, nodeIndex, offset));
     }
-    return {lineIndex, nodeIndex, offset};
+    return { lineIndex, nodeIndex, offset };
 }
 
 function findNodeInLineForPart(parts: Part[], partIndex: number) {
@@ -137,7 +137,7 @@ function findNodeInLineForPart(parts: Part[], partIndex: number) {
         }
     }
 
-    return {lineIndex, nodeIndex};
+    return { lineIndex, nodeIndex };
 }
 
 function moveOutOfUneditablePart(parts: Part[], partIndex: number, nodeIndex: number, offset: number) {
@@ -159,5 +159,5 @@ function moveOutOfUneditablePart(parts: Part[], partIndex: number, nodeIndex: nu
             offset = 0;
         }
     }
-    return {nodeIndex, offset};
+    return { nodeIndex, offset };
 }
diff --git a/src/editor/deserialize.ts b/src/editor/deserialize.ts
index a0c4d74275..eb8adfda9d 100644
--- a/src/editor/deserialize.ts
+++ b/src/editor/deserialize.ts
@@ -42,7 +42,7 @@ function parseAtRoomMentions(text: string, partCreator: PartCreator) {
 }
 
 function parseLink(a: HTMLAnchorElement, partCreator: PartCreator) {
-    const {href} = a;
+    const { href } = a;
     const resourceId = getPrimaryPermalinkEntity(href); // The room/user ID
     const prefix = resourceId ? resourceId[0] : undefined; // First character of ID
     switch (prefix) {
@@ -297,7 +297,7 @@ export function parsePlainTextMessage(body: string, partCreator: PartCreator, is
     }, []);
 }
 
-export function parseEvent(event: MatrixEvent, partCreator: PartCreator, {isQuotedMessage = false} = {}) {
+export function parseEvent(event: MatrixEvent, partCreator: PartCreator, { isQuotedMessage = false } = {}) {
     const content = event.getContent();
     let parts;
     if (content.format === "org.matrix.custom.html") {
diff --git a/src/editor/diff.ts b/src/editor/diff.ts
index cda454306a..de8efc9c21 100644
--- a/src/editor/diff.ts
+++ b/src/editor/diff.ts
@@ -35,9 +35,9 @@ function diffStringsAtEnd(oldStr: string, newStr: string): IDiff {
     const len = Math.min(oldStr.length, newStr.length);
     const startInCommon = oldStr.substr(0, len) === newStr.substr(0, len);
     if (startInCommon && oldStr.length > newStr.length) {
-        return {removed: oldStr.substr(len), at: len};
+        return { removed: oldStr.substr(len), at: len };
     } else if (startInCommon && oldStr.length < newStr.length) {
-        return {added: newStr.substr(len), at: len};
+        return { added: newStr.substr(len), at: len };
     } else {
         const commonStartLen = firstDiff(oldStr, newStr);
         return {
@@ -55,7 +55,7 @@ export function diffDeletion(oldStr: string, newStr: string): IDiff {
     }
     const firstDiffIdx = firstDiff(oldStr, newStr);
     const amount = oldStr.length - newStr.length;
-    return {at: firstDiffIdx, removed: oldStr.substr(firstDiffIdx, amount)};
+    return { at: firstDiffIdx, removed: oldStr.substr(firstDiffIdx, amount) };
 }
 
 /**
diff --git a/src/editor/dom.ts b/src/editor/dom.ts
index 1ca41553f4..6226f74acb 100644
--- a/src/editor/dom.ts
+++ b/src/editor/dom.ts
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {CARET_NODE_CHAR, isCaretNode} from "./render";
+import { CARET_NODE_CHAR, isCaretNode } from "./render";
 import DocumentOffset from "./offset";
 
 type Predicate = (node: Node) => boolean;
@@ -44,8 +44,8 @@ export function walkDOMDepthFirst(rootNode: Node, enterNodeCallback: Predicate,
 }
 
 export function getCaretOffsetAndText(editor: HTMLDivElement, sel: Selection) {
-    const {offset, text} = getSelectionOffsetAndText(editor, sel.focusNode, sel.focusOffset);
-    return {caret: offset, text};
+    const { offset, text } = getSelectionOffsetAndText(editor, sel.focusNode, sel.focusOffset);
+    return { caret: offset, text };
 }
 
 function tryReduceSelectionToTextNode(selectionNode: Node, selectionOffset: number) {
@@ -86,10 +86,10 @@ function tryReduceSelectionToTextNode(selectionNode: Node, selectionOffset: numb
 }
 
 function getSelectionOffsetAndText(editor: HTMLDivElement, selectionNode: Node, selectionOffset: number) {
-    const {node, characterOffset} = tryReduceSelectionToTextNode(selectionNode, selectionOffset);
-    const {text, offsetToNode} = getTextAndOffsetToNode(editor, node);
+    const { node, characterOffset } = tryReduceSelectionToTextNode(selectionNode, selectionOffset);
+    const { text, offsetToNode } = getTextAndOffsetToNode(editor, node);
     const offset = getCaret(node, offsetToNode, characterOffset);
-    return {offset, text};
+    return { offset, text };
 }
 
 // gets the caret position details, ignoring and adjusting to
@@ -163,7 +163,7 @@ function getTextAndOffsetToNode(editor: HTMLDivElement, selectionNode: Node) {
 
     walkDOMDepthFirst(editor, enterNodeCallback, leaveNodeCallback);
 
-    return {text, offsetToNode};
+    return { text, offsetToNode };
 }
 
 // get text value of text node, ignoring ZWS if it's a caret node
diff --git a/src/editor/history.ts b/src/editor/history.ts
index d2c96a3755..350ba6c99a 100644
--- a/src/editor/history.ts
+++ b/src/editor/history.ts
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import EditorModel from "./model";
-import {IDiff} from "./diff";
-import {SerializedPart} from "./parts";
-import {Caret} from "./caret";
+import { IDiff } from "./diff";
+import { SerializedPart } from "./parts";
+import { Caret } from "./caret";
 
 interface IHistory {
     parts: SerializedPart[];
@@ -92,7 +92,7 @@ export default class HistoryManager {
             this.stack.pop();
         }
         const parts = model.serializeParts();
-        this.stack.push({parts, caret});
+        this.stack.push({ parts, caret });
         this.currentIndex = this.stack.length - 1;
         this.lastCaret = null;
         this.changedSinceLastPush = false;
diff --git a/src/editor/model.ts b/src/editor/model.ts
index 7925a43164..1e8498a69e 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -221,7 +221,7 @@ export default class EditorModel {
     }
 
     private setActivePart(pos: DocumentPosition, canOpenAutoComplete: boolean) {
-        const {index} = pos;
+        const { index } = pos;
         const part = this._parts[index];
         if (part) {
             if (index !== this.activePartIdx) {
@@ -250,7 +250,7 @@ export default class EditorModel {
         return Promise.resolve();
     }
 
-    private onAutoComplete = ({replaceParts, close}: ICallback) => {
+    private onAutoComplete = ({ replaceParts, close }: ICallback) => {
         let pos;
         if (replaceParts) {
             this._parts.splice(this.autoCompletePartIdx, this.autoCompletePartCount, ...replaceParts);
@@ -295,7 +295,7 @@ export default class EditorModel {
      * usually because of non-editable parts that can only be removed in their entirety.
      */
     removeText(pos: IPosition, len: number) {
-        let {index, offset} = pos;
+        let { index, offset } = pos;
         let removedOffsetDecrease = 0;
         while (len > 0) {
             // part might be undefined here
@@ -357,8 +357,8 @@ export default class EditorModel {
      * This can be more than the length of `str` when crossing non-editable parts, which are skipped.
      */
     private addText(pos: IPosition, str: string, inputType: string) {
-        let {index} = pos;
-        const {offset} = pos;
+        let { index } = pos;
+        const { offset } = pos;
         let addLen = str.length;
         const part = this._parts[index];
         if (part) {
diff --git a/src/editor/operations.ts b/src/editor/operations.ts
index 3f07139de3..a738f2d111 100644
--- a/src/editor/operations.ts
+++ b/src/editor/operations.ts
@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 import Range from "./range";
-import {Part} from "./parts";
+import { Part } from "./parts";
 
 /**
  * Some common queries and transformations on the editor model
  */
 
 export function replaceRangeAndExpandSelection(range: Range, newParts: Part[]) {
-    const {model} = range;
+    const { model } = range;
     model.transform(() => {
         const oldLen = range.length;
         const addedLen = range.replace(newParts);
@@ -33,7 +33,7 @@ export function replaceRangeAndExpandSelection(range: Range, newParts: Part[]) {
 }
 
 export function replaceRangeAndMoveCaret(range: Range, newParts: Part[]) {
-    const {model} = range;
+    const { model } = range;
     model.transform(() => {
         const oldLen = range.length;
         const addedLen = range.replace(newParts);
@@ -44,7 +44,7 @@ export function replaceRangeAndMoveCaret(range: Range, newParts: Part[]) {
 }
 
 export function rangeStartsAtBeginningOfLine(range: Range) {
-    const {model} = range;
+    const { model } = range;
     const startsWithPartial = range.start.offset !== 0;
     const isFirstPart = range.start.index === 0;
     const previousIsNewline = !isFirstPart && model.parts[range.start.index - 1].type === "newline";
@@ -52,7 +52,7 @@ export function rangeStartsAtBeginningOfLine(range: Range) {
 }
 
 export function rangeEndsAtEndOfLine(range: Range) {
-    const {model} = range;
+    const { model } = range;
     const lastPart = model.parts[range.end.index];
     const endsWithPartial = range.end.offset !== lastPart.text.length;
     const isLastPart = range.end.index === model.parts.length - 1;
@@ -61,8 +61,8 @@ export function rangeEndsAtEndOfLine(range: Range) {
 }
 
 export function formatRangeAsQuote(range: Range) {
-    const {model, parts} = range;
-    const {partCreator} = model;
+    const { model, parts } = range;
+    const { partCreator } = model;
     for (let i = 0; i < parts.length; ++i) {
         const part = parts[i];
         if (part.type === "newline") {
@@ -82,8 +82,8 @@ export function formatRangeAsQuote(range: Range) {
 }
 
 export function formatRangeAsCode(range: Range) {
-    const {model, parts} = range;
-    const {partCreator} = model;
+    const { model, parts } = range;
+    const { partCreator } = model;
     const needsBlock = parts.some(p => p.type === "newline");
     if (needsBlock) {
         parts.unshift(partCreator.plain("```"), partCreator.newline());
@@ -108,8 +108,8 @@ const isBlank = part => !part.text || !/\S/.test(part.text);
 const isNL = part => part.type === "newline";
 
 export function toggleInlineFormat(range: Range, prefix: string, suffix = prefix) {
-    const {model, parts} = range;
-    const {partCreator} = model;
+    const { model, parts } = range;
+    const { partCreator } = model;
 
     // compute paragraph [start, end] indexes
     const paragraphIndexes = [];
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index 6e3f35371d..c16a95dbc9 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import AutocompleteWrapperModel, {
     GetAutocompleterComponent,
@@ -466,7 +466,7 @@ export class PartCreator {
     constructor(private room: Room, private client: MatrixClient, autoCompleteCreator: AutoCompleteCreator = null) {
         // pre-create the creator as an object even without callback so it can already be passed
         // to PillCandidatePart (e.g. while deserializing) and set later on
-        this.autoCompleteCreator = {create: autoCompleteCreator && autoCompleteCreator(this)};
+        this.autoCompleteCreator = { create: autoCompleteCreator && autoCompleteCreator(this) };
     }
 
     setAutoCompleteCreator(autoCompleteCreator: AutoCompleteCreator) {
diff --git a/src/editor/position.ts b/src/editor/position.ts
index 3f24581695..37d2a07b43 100644
--- a/src/editor/position.ts
+++ b/src/editor/position.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import DocumentOffset from "./offset";
 import EditorModel from "./model";
-import {Part} from "./parts";
+import { Part } from "./parts";
 
 export interface IPosition {
     index: number;
@@ -62,8 +62,8 @@ export default class DocumentPosition implements IPosition {
             return this;
         }
 
-        let {index, offset} = this;
-        const {parts} = model;
+        let { index, offset } = this;
+        const { parts } = model;
         while (index < parts.length) {
             const part = parts[index];
             while (offset < part.text.length) {
@@ -87,7 +87,7 @@ export default class DocumentPosition implements IPosition {
             return this;
         }
 
-        let {index, offset} = this;
+        let { index, offset } = this;
         const parts = model.parts;
         while (index >= 0) {
             const part = parts[index];
diff --git a/src/editor/range.ts b/src/editor/range.ts
index 838dfd8b98..634805702f 100644
--- a/src/editor/range.ts
+++ b/src/editor/range.ts
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import EditorModel from "./model";
-import DocumentPosition, {Predicate} from "./position";
-import {Part} from "./parts";
+import DocumentPosition, { Predicate } from "./position";
+import { Part } from "./parts";
 
 const whitespacePredicate: Predicate = (index, offset, part) => {
     return part.text[offset].trim() === "";
diff --git a/src/editor/render.ts b/src/editor/render.ts
index 8aa5c5dea9..0e0b7d2145 100644
--- a/src/editor/render.ts
+++ b/src/editor/render.ts
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Part} from "./parts";
+import { Part } from "./parts";
 import EditorModel from "./model";
 
 export function needsCaretNodeBefore(part: Part, prevPart: Part) {
diff --git a/src/editor/serialize.ts b/src/editor/serialize.ts
index cfdb36c7a8..f68173ae29 100644
--- a/src/editor/serialize.ts
+++ b/src/editor/serialize.ts
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import Markdown from '../Markdown';
-import {makeGenericPermalink} from "../utils/permalinks/Permalinks";
+import { makeGenericPermalink } from "../utils/permalinks/Permalinks";
 import EditorModel from "./model";
 import { AllHtmlEntities } from 'html-entities';
 import SettingsStore from '../settings/SettingsStore';
@@ -45,7 +45,7 @@ export function mdSerialize(model: EditorModel) {
     }, "");
 }
 
-export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} = {}) {
+export function htmlSerializeIfNeeded(model: EditorModel, { forceHTML = false } = {}) {
     let md = mdSerialize(model);
     // copy of raw input to remove unwanted math later
     const orig = md;
@@ -142,9 +142,9 @@ export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} =
 
             // add fallback output for latex math, which should not be interpreted as markdown
             phtml('div, span').each(function(i, e) {
-                const tex = phtml(e).attr('data-mx-maths')
+                const tex = phtml(e).attr('data-mx-maths');
                 if (tex) {
-                    phtml(e).html(`<code>${tex}</code>`)
+                    phtml(e).html(`<code>${tex}</code>`);
                 }
             });
         }
@@ -200,18 +200,18 @@ export function stripEmoteCommand(model: EditorModel) {
 
 export function stripPrefix(model: EditorModel, prefix: string) {
     model = model.clone();
-    model.removeText({index: 0, offset: 0}, prefix.length);
+    model.removeText({ index: 0, offset: 0 }, prefix.length);
     return model;
 }
 
 export function unescapeMessage(model: EditorModel) {
-    const {parts} = model;
+    const { parts } = model;
     if (parts.length) {
         const firstPart = parts[0];
         // only unescape \/ to / at start of editor
         if (firstPart.type === "plain" && firstPart.text.startsWith("\\/")) {
             model = model.clone();
-            model.removeText({index: 0, offset: 0}, 1);
+            model.removeText({ index: 0, offset: 0 }, 1);
         }
     }
     return model;
diff --git a/src/effects/confetti/index.ts b/src/effects/confetti/index.ts
index 8c4b2d2616..53e5dda5d2 100644
--- a/src/effects/confetti/index.ts
+++ b/src/effects/confetti/index.ts
@@ -37,7 +37,7 @@ export type ConfettiOptions = {
      * use gradient instead of solid particle color
      */
     gradient: boolean,
-}
+};
 
 type ConfettiParticle = {
     color: string,
@@ -48,7 +48,7 @@ type ConfettiParticle = {
     tilt: number,
     tiltAngleIncrement: number,
     tiltAngle: number,
-}
+};
 
 export const DefaultOptions: ConfettiOptions = {
     maxCount: 150,
@@ -62,7 +62,7 @@ export default class Confetti implements ICanvasEffect {
     private readonly options: ConfettiOptions;
 
     constructor(options: { [key: string]: any }) {
-        this.options = {...DefaultOptions, ...options};
+        this.options = { ...DefaultOptions, ...options };
     }
 
     private context: CanvasRenderingContext2D | null = null;
@@ -93,11 +93,11 @@ export default class Confetti implements ICanvasEffect {
         if (timeout) {
             window.setTimeout(this.stop, timeout);
         }
-    }
+    };
 
     public stop = async () => {
         this.isRunning = false;
-    }
+    };
 
     private resetParticle = (particle: ConfettiParticle, width: number, height: number): ConfettiParticle => {
         particle.color = this.colors[(Math.random() * this.colors.length) | 0] + (this.options.alpha + ')');
@@ -113,7 +113,7 @@ export default class Confetti implements ICanvasEffect {
         particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
         particle.tiltAngle = Math.random() * Math.PI;
         return particle;
-    }
+    };
 
     private runAnimation = (): void => {
         if (!this.context || !this.context.canvas) {
@@ -132,8 +132,7 @@ export default class Confetti implements ICanvasEffect {
             }
             requestAnimationFrame(this.runAnimation);
         }
-    }
-
+    };
 
     private drawParticles = (context: CanvasRenderingContext2D): void => {
         if (!this.context || !this.context.canvas) {
@@ -158,7 +157,7 @@ export default class Confetti implements ICanvasEffect {
             context.lineTo(x2, y2);
             context.stroke();
         }
-    }
+    };
 
     private updateParticles = () => {
         if (!this.context || !this.context.canvas) {
@@ -187,5 +186,5 @@ export default class Confetti implements ICanvasEffect {
                 }
             }
         }
-    }
+    };
 }
diff --git a/src/effects/effect.ts b/src/effects/effect.ts
index 9011b07b61..fe194bbde3 100644
--- a/src/effects/effect.ts
+++ b/src/effects/effect.ts
@@ -40,4 +40,4 @@ export type Effect<TOptions extends { [key: string]: any }> = {
      * animation options
      */
     options: TOptions;
-}
+};
diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts
index 96a27531af..2a0af8c4a0 100644
--- a/src/effects/fireworks/index.ts
+++ b/src/effects/fireworks/index.ts
@@ -26,7 +26,7 @@ export type FireworksOptions = {
      * gravity value that firework adds to shift from it's start position
      */
     gravity: number;
-}
+};
 
 type FireworksParticle = {
     /**
@@ -52,7 +52,7 @@ type FireworksParticle = {
      */
     w: number;
     h: number;
-}
+};
 
 export const DefaultOptions: FireworksOptions = {
     maxCount: 500,
@@ -63,7 +63,7 @@ export default class Fireworks implements ICanvasEffect {
     private readonly options: FireworksOptions;
 
     constructor(options: { [key: string]: any }) {
-        this.options = {...DefaultOptions, ...options};
+        this.options = { ...DefaultOptions, ...options };
     }
 
     private context: CanvasRenderingContext2D | null = null;
@@ -81,14 +81,14 @@ export default class Fireworks implements ICanvasEffect {
         if (timeout) {
             window.setTimeout(this.stop, timeout);
         }
-    }
+    };
 
     private updateWorld = () => {
         if (!this.isRunning && this.particles.length === 0) return;
         this.update();
         this.paint();
         this.supportsAnimationFrame.call(window, this.updateWorld);
-    }
+    };
 
     private update = () => {
         if (this.particles.length < this.options.maxCount && this.isRunning) {
@@ -101,7 +101,7 @@ export default class Fireworks implements ICanvasEffect {
             }
         }
         this.particles = alive;
-    }
+    };
 
     private paint = () => {
         if (!this.context || !this.context.canvas) return;
@@ -112,7 +112,7 @@ export default class Fireworks implements ICanvasEffect {
         for (let i=0; i<this.particles.length; i++) {
             this.drawParticle(this.particles[i]);
         }
-    }
+    };
 
     private createFirework = () => {
         if (!this.context || !this.context.canvas) return;
@@ -138,11 +138,11 @@ export default class Fireworks implements ICanvasEffect {
             }
             this.particles.push(particle);
         }
-    }
+    };
 
     public stop = async () => {
         this.isRunning = false;
-    }
+    };
 
     private drawParticle = (particle: FireworksParticle): void => {
         if (!this.context || !this.context.canvas) {
@@ -159,8 +159,7 @@ export default class Fireworks implements ICanvasEffect {
         this.context.closePath();
         this.context.fill();
         this.context.restore();
-    }
-
+    };
 
     private move = (particle: FireworksParticle) => {
         particle.x += particle.vx;
@@ -170,5 +169,5 @@ export default class Fireworks implements ICanvasEffect {
         return !(particle.x <= -particle.w || particle.x >= screen.width ||
             particle.y >= screen.height ||
             particle.alpha <= 0);
-    }
+    };
 }
diff --git a/src/effects/index.ts b/src/effects/index.ts
index 8ecb80020d..23864a5d90 100644
--- a/src/effects/index.ts
+++ b/src/effects/index.ts
@@ -75,4 +75,3 @@ export const CHAT_EFFECTS: Array<Effect<{ [key: string]: any }>> = [
     } as Effect<SpaceInvadersOptions>,
 ];
 
-
diff --git a/src/effects/snowfall/index.ts b/src/effects/snowfall/index.ts
index 2affb50405..141c016512 100644
--- a/src/effects/snowfall/index.ts
+++ b/src/effects/snowfall/index.ts
@@ -29,7 +29,7 @@ export type SnowfallOptions = {
      * The amount of drift (horizontal sway) to apply to the snowflakes. Each snowflake varies.
      */
     maxDrift: number;
-}
+};
 
 type Snowflake = {
     x: number;
@@ -38,7 +38,7 @@ type Snowflake = {
     diameter: number;
     maximumDrift: number;
     gravity: number;
-}
+};
 
 export const DefaultOptions: SnowfallOptions = {
     maxCount: 200,
@@ -52,7 +52,7 @@ export default class Snowfall implements ICanvasEffect {
     private readonly options: SnowfallOptions;
 
     constructor(options: { [key: string]: any }) {
-        this.options = {...DefaultOptions, ...options};
+        this.options = { ...DefaultOptions, ...options };
     }
 
     private context: CanvasRenderingContext2D | null = null;
@@ -76,11 +76,11 @@ export default class Snowfall implements ICanvasEffect {
         if (timeout) {
             window.setTimeout(this.stop, timeout);
         }
-    }
+    };
 
     public stop = async () => {
         this.isRunning = false;
-    }
+    };
 
     private resetParticle = (particle: Snowflake, width: number, height: number): Snowflake => {
         particle.x = Math.random() * width;
@@ -90,7 +90,7 @@ export default class Snowfall implements ICanvasEffect {
         particle.maximumDrift = (Math.random() * this.options.maxDrift) + 3.5;
         particle.gravity = this.options.gravity + (Math.random() * 6) + 4;
         return particle;
-    }
+    };
 
     private renderLoop = (): void => {
         if (!this.context || !this.context.canvas) {
diff --git a/src/effects/spaceinvaders/index.ts b/src/effects/spaceinvaders/index.ts
index 9520e8366a..21774a7c14 100644
--- a/src/effects/spaceinvaders/index.ts
+++ b/src/effects/spaceinvaders/index.ts
@@ -25,14 +25,14 @@ export type SpaceInvadersOptions = {
      * The amount of gravity to apply to the invaders
      */
     gravity: number;
-}
+};
 
 type Invader = {
     x: number;
     y: number;
     xCol: number;
     gravity: number;
-}
+};
 
 export const DefaultOptions: SpaceInvadersOptions = {
     maxCount: 50,
@@ -46,7 +46,7 @@ export default class SpaceInvaders implements ICanvasEffect {
     private readonly options: SpaceInvadersOptions;
 
     constructor(options: { [key: string]: any }) {
-        this.options = {...DefaultOptions, ...options};
+        this.options = { ...DefaultOptions, ...options };
     }
 
     private context: CanvasRenderingContext2D | null = null;
@@ -70,11 +70,11 @@ export default class SpaceInvaders implements ICanvasEffect {
         if (timeout) {
             window.setTimeout(this.stop, timeout);
         }
-    }
+    };
 
     public stop = async () => {
         this.isRunning = false;
-    }
+    };
 
     private resetParticle = (particle: Invader, width: number, height: number): Invader => {
         particle.x = Math.random() * width;
@@ -82,7 +82,7 @@ export default class SpaceInvaders implements ICanvasEffect {
         particle.xCol = particle.x;
         particle.gravity = this.options.gravity + (Math.random() * 6) + 4;
         return particle;
-    }
+    };
 
     private renderLoop = (): void => {
         if (!this.context || !this.context.canvas) {
diff --git a/src/effects/utils.ts b/src/effects/utils.ts
index c2b499b154..9f6d7a512e 100644
--- a/src/effects/utils.ts
+++ b/src/effects/utils.ts
@@ -21,4 +21,4 @@
  */
 export const containsEmoji = (content: { msgtype: string, body: string }, emojis: Array<string>): boolean => {
     return emojis.some((emoji) => content.body && content.body.includes(emoji));
-}
+};
diff --git a/src/emojipicker/recent.ts b/src/emojipicker/recent.ts
index d86aad660d..84fbf34616 100644
--- a/src/emojipicker/recent.ts
+++ b/src/emojipicker/recent.ts
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import SettingsStore from "../settings/SettingsStore";
-import {orderBy} from "lodash";
+import { orderBy } from "lodash";
 import { SettingLevel } from "../settings/SettingLevel";
 
 interface ILegacyFormat {
diff --git a/src/hooks/useAccountData.ts b/src/hooks/useAccountData.ts
index 0384b3bf77..6e2cd269ff 100644
--- a/src/hooks/useAccountData.ts
+++ b/src/hooks/useAccountData.ts
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useCallback, useState} from "react";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { useCallback, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {useEventEmitter} from "./useEventEmitter";
+import { useEventEmitter } from "./useEventEmitter";
 
 const tryGetContent = <T extends {}>(ev?: MatrixEvent) => ev ? ev.getContent<T>() : undefined;
 
diff --git a/src/hooks/useDispatcher.ts b/src/hooks/useDispatcher.ts
index 004b15fcef..a8b36db2fd 100644
--- a/src/hooks/useDispatcher.ts
+++ b/src/hooks/useDispatcher.ts
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from "react";
 
-import {ActionPayload} from "../dispatcher/payloads";
-import {Dispatcher} from "flux";
+import { ActionPayload } from "../dispatcher/payloads";
+import { Dispatcher } from "flux";
 
 // Hook to simplify listening to flux dispatches
 export const useDispatcher = (dispatcher: Dispatcher<ActionPayload>, handler: (payload: ActionPayload) => void) => {
diff --git a/src/hooks/useEventEmitter.ts b/src/hooks/useEventEmitter.ts
index 6b5693ef95..a81bba5699 100644
--- a/src/hooks/useEventEmitter.ts
+++ b/src/hooks/useEventEmitter.ts
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useRef, useEffect} from "react";
-import type {EventEmitter} from "events";
+import { useRef, useEffect } from "react";
+import type { EventEmitter } from "events";
 
 type Handler = (...args: any[]) => void;
 
diff --git a/src/hooks/useIsEncrypted.ts b/src/hooks/useIsEncrypted.ts
index 79f3e539cd..ed8e7f3f50 100644
--- a/src/hooks/useIsEncrypted.ts
+++ b/src/hooks/useIsEncrypted.ts
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useCallback, useState} from "react";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { useCallback, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import {useEventEmitter} from "./useEventEmitter";
+import { useEventEmitter } from "./useEventEmitter";
 
 // Hook to simplify watching whether a Matrix room is encrypted, returns undefined if room is undefined
 export function useIsEncrypted(cli: MatrixClient, room?: Room): boolean | undefined {
diff --git a/src/hooks/useLocalStorageState.ts b/src/hooks/useLocalStorageState.ts
index 943db9ab4e..97b702d333 100644
--- a/src/hooks/useLocalStorageState.ts
+++ b/src/hooks/useLocalStorageState.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Dispatch, SetStateAction, useCallback, useEffect, useState} from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
 
 const getValue = <T>(key: string, initialValue: T): T => {
     try {
diff --git a/src/hooks/useRoomMembers.ts b/src/hooks/useRoomMembers.ts
index e25436045e..bd52913a86 100644
--- a/src/hooks/useRoomMembers.ts
+++ b/src/hooks/useRoomMembers.ts
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useState} from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import {useEventEmitter} from "./useEventEmitter";
-import {throttle} from "lodash";
+import { useEventEmitter } from "./useEventEmitter";
+import { throttle } from "lodash";
 
 // Hook to simplify watching Matrix Room joined members
 export const useRoomMembers = (room: Room, throttleWait = 250) => {
     const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
     useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
         setMembers(room.getJoinedMembers());
-    }, throttleWait, {leading: true, trailing: true}));
+    }, throttleWait, { leading: true, trailing: true }));
     return members;
 };
 
@@ -35,6 +35,6 @@ export const useRoomMemberCount = (room: Room, throttleWait = 250) => {
     const [count, setCount] = useState<number>(room.getJoinedMemberCount());
     useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
         setCount(room.getJoinedMemberCount());
-    }, throttleWait, {leading: true, trailing: true}));
+    }, throttleWait, { leading: true, trailing: true }));
     return count;
 };
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index 756c2d5868..e21c2cbfa8 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import SettingsStore from '../settings/SettingsStore';
 
 // Hook to fetch the value of a setting and dynamically update when it changes
diff --git a/src/hooks/useStateArray.ts b/src/hooks/useStateArray.ts
index e8ff6efff0..0541ab2165 100644
--- a/src/hooks/useStateArray.ts
+++ b/src/hooks/useStateArray.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useState} from "react";
+import { useState } from "react";
 
 // Hook to simplify managing state of arrays of a common type
 export const useStateArray = <T>(initialSize: number, initialState: T | T[]): [T[], (i: number, v: T) => void] => {
@@ -25,5 +25,5 @@ export const useStateArray = <T>(initialSize: number, initialState: T | T[]): [T
         const copy = [...data];
         copy[index] = value;
         return copy;
-    })]
+    })];
 };
diff --git a/src/hooks/useStateCallback.ts b/src/hooks/useStateCallback.ts
index f3993c1d32..1919179b86 100644
--- a/src/hooks/useStateCallback.ts
+++ b/src/hooks/useStateCallback.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Dispatch, SetStateAction, useState} from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 // Hook to simplify interactions with a store-backed state values
 // Returns value and method to change the state value
diff --git a/src/hooks/useStateToggle.ts b/src/hooks/useStateToggle.ts
index 33701c4f16..7437067cf5 100644
--- a/src/hooks/useStateToggle.ts
+++ b/src/hooks/useStateToggle.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Dispatch, SetStateAction, useState} from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 
 // Hook to simplify toggling of a boolean state value
 // Returns value, method to toggle boolean value and method to set the boolean value
diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts
index 911b7bc75d..07301a367a 100644
--- a/src/hooks/useTimeout.ts
+++ b/src/hooks/useTimeout.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
 
 type Handler = () => void;
 
diff --git a/src/indexing/BaseEventIndexManager.ts b/src/indexing/BaseEventIndexManager.ts
index 9478b2987b..4bae3e7c1d 100644
--- a/src/indexing/BaseEventIndexManager.ts
+++ b/src/indexing/BaseEventIndexManager.ts
@@ -167,7 +167,6 @@ export default abstract class BaseEventIndexManager {
         throw new Error("Unimplemented");
     }
 
-
     /**
      * Get the user version of the database.
      * @return {Promise<number>} A promise that will resolve to the user stored
diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index 978a2ac813..43b3de42ed 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -175,7 +175,7 @@ export default class EventIndex extends EventEmitter {
             await indexManager.commitLiveEvents();
             return;
         }
-    }
+    };
 
     /*
      * The Room.timeline listener.
@@ -209,7 +209,7 @@ export default class EventIndex extends EventEmitter {
         await client.decryptEventIfNeeded(ev);
 
         await this.addLiveEventToIndex(ev);
-    }
+    };
 
     private onRoomStateEvent = async (ev: MatrixEvent, state: RoomState) => {
         if (!MatrixClientPeg.get().isRoomEncrypted(state.roomId)) return;
@@ -218,7 +218,7 @@ export default class EventIndex extends EventEmitter {
             console.log("EventIndex: Adding a checkpoint for a newly encrypted room", state.roomId);
             this.addRoomCheckpoint(state.roomId, true);
         }
-    }
+    };
 
     /*
      * The Event.decrypted listener.
@@ -230,7 +230,7 @@ export default class EventIndex extends EventEmitter {
         // If the event isn't in our live event set, ignore it.
         if (err) return;
         await this.addLiveEventToIndex(ev);
-    }
+    };
 
     /*
      * The Room.redaction listener.
@@ -247,7 +247,7 @@ export default class EventIndex extends EventEmitter {
         } catch (e) {
             console.log("EventIndex: Error deleting event from index", e);
         }
-    }
+    };
 
     /*
      * The Room.timelineReset listener.
@@ -263,7 +263,7 @@ export default class EventIndex extends EventEmitter {
             room.roomId);
 
         this.addRoomCheckpoint(room.roomId, false);
-    }
+    };
 
     /**
      * Check if an event should be added to the event index.
@@ -464,7 +464,7 @@ export default class EventIndex extends EventEmitter {
 
             // We have a checkpoint, let us fetch some messages, again, very
             // conservatively to not bother our homeserver too much.
-            const eventMapper = client.getEventMapper({preventReEmit: true});
+            const eventMapper = client.getEventMapper({ preventReEmit: true });
             // TODO we need to ensure to use member lazy loading with this
             // request so we get the correct profiles.
             let res;
diff --git a/src/indexing/EventIndexPeg.ts b/src/indexing/EventIndexPeg.ts
index 4356d882d5..51ea84e7f6 100644
--- a/src/indexing/EventIndexPeg.ts
+++ b/src/indexing/EventIndexPeg.ts
@@ -21,9 +21,9 @@ limitations under the License.
 
 import PlatformPeg from "../PlatformPeg";
 import EventIndex from "../indexing/EventIndex";
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import SettingsStore from '../settings/SettingsStore';
-import {SettingLevel} from "../settings/SettingLevel";
+import { SettingLevel } from "../settings/SettingLevel";
 
 const INDEX_VERSION = 1;
 
diff --git a/src/integrations/IntegrationManagerInstance.ts b/src/integrations/IntegrationManagerInstance.ts
index 85748db3c2..c3dcd41ee8 100644
--- a/src/integrations/IntegrationManagerInstance.ts
+++ b/src/integrations/IntegrationManagerInstance.ts
@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type {Room} from "matrix-js-sdk/src/models/room";
+import type { Room } from "matrix-js-sdk/src/models/room";
 
 import ScalarAuthClient from "../ScalarAuthClient";
-import {dialogTermsInteractionCallback, TermsNotSignedError} from "../Terms";
+import { dialogTermsInteractionCallback, TermsNotSignedError } from "../Terms";
 import Modal from '../Modal';
 import url from 'url';
 import SettingsStore from "../settings/SettingsStore";
 import IntegrationManager from "../components/views/settings/IntegrationManager";
-import {IntegrationManagers} from "./IntegrationManagers";
+import { IntegrationManagers } from "./IntegrationManagers";
 
 export enum Kind {
     Account = "account",
@@ -67,7 +67,7 @@ export class IntegrationManagerInstance {
 
         const dialog = Modal.createTrackedDialog(
             'Integration Manager', '', IntegrationManager,
-            {loading: true}, 'mx_IntegrationManager',
+            { loading: true }, 'mx_IntegrationManager',
         );
 
         const client = this.getScalarClient();
diff --git a/src/integrations/IntegrationManagers.ts b/src/integrations/IntegrationManagers.ts
index 780f6d4660..e357a23af2 100644
--- a/src/integrations/IntegrationManagers.ts
+++ b/src/integrations/IntegrationManagers.ts
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type {MatrixClient} from "matrix-js-sdk/src/client";
-import type {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import type {Room} from "matrix-js-sdk/src/models/room";
+import type { MatrixClient } from "matrix-js-sdk/src/client";
+import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import type { Room } from "matrix-js-sdk/src/models/room";
 
 import SdkConfig from '../SdkConfig';
 import Modal from '../Modal';
-import {IntegrationManagerInstance, Kind} from "./IntegrationManagerInstance";
+import { IntegrationManagerInstance, Kind } from "./IntegrationManagerInstance";
 import IntegrationsImpossibleDialog from "../components/views/dialogs/IntegrationsImpossibleDialog";
 import TabbedIntegrationManagerDialog from "../components/views/dialogs/TabbedIntegrationManagerDialog";
 import IntegrationsDisabledDialog from "../components/views/dialogs/IntegrationsDisabledDialog";
 import WidgetUtils from "../utils/WidgetUtils";
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import SettingsStore from "../settings/SettingsStore";
 import url from 'url';
 import { compare } from "../utils/strings";
@@ -187,7 +187,7 @@ export class IntegrationManagers {
 
         Modal.createTrackedDialog(
             'Tabbed Integration Manager', '', TabbedIntegrationManagerDialog,
-            {room, screen, integrationId}, 'mx_TabbedIntegrationManagerDialog',
+            { room, screen, integrationId }, 'mx_TabbedIntegrationManagerDialog',
         );
     }
 
diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx
index cc129fb6b9..a15eb4a4b7 100644
--- a/src/languageHandler.tsx
+++ b/src/languageHandler.tsx
@@ -27,7 +27,7 @@ import PlatformPeg from "./PlatformPeg";
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
 import { SettingLevel } from "./settings/SettingLevel";
-import {retry} from "./utils/promise";
+import { retry } from "./utils/promise";
 
 const i18nFolder = 'i18n/';
 
@@ -100,7 +100,7 @@ function safeCounterpartTranslate(text: string, options?: object) {
     if (translated === undefined && count !== undefined) {
         // counterpart does not do fallback if no pluralisation exists
         // in the preferred language, so do it here
-        translated = counterpart.translate(text, Object.assign({}, options, {locale: 'en'}));
+        translated = counterpart.translate(text, Object.assign({}, options, { locale: 'en' }));
     }
     return translated;
 }
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js
index feda257d8b..e670bfcdab 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {baseUrl} from "./utils/permalinks/SpecPermalinkConstructor";
+import { baseUrl } from "./utils/permalinks/SpecPermalinkConstructor";
 import {
     parsePermalink,
     tryTransformEntityToPermalink,
@@ -81,7 +81,6 @@ function matrixLinkify(linkify) {
     S_ROOMALIAS.on(TT.COLON, S_ROOMALIAS_COLON); // do not accept trailing `:`
     S_ROOMALIAS_COLON.on(TT.NUM, S_ROOMALIAS_COLON_NUM); // but do accept :NUM (port specifier)
 
-
     const USERID = function(value) {
         MultiToken.call(this, value);
         this.type = 'userid';
@@ -127,7 +126,6 @@ function matrixLinkify(linkify) {
     S_USERID.on(TT.COLON, S_USERID_COLON); // do not accept trailing `:`
     S_USERID_COLON.on(TT.NUM, S_USERID_COLON_NUM); // but do accept :NUM (port specifier)
 
-
     const GROUPID = function(value) {
         MultiToken.call(this, value);
         this.type = 'groupid';
diff --git a/src/mjolnir/BanList.ts b/src/mjolnir/BanList.ts
index 89eec89500..8b466c8a06 100644
--- a/src/mjolnir/BanList.ts
+++ b/src/mjolnir/BanList.ts
@@ -16,8 +16,8 @@ limitations under the License.
 
 // Inspiration largely taken from Mjolnir itself
 
-import {ListRule, RECOMMENDATION_BAN, recommendationToStable} from "./ListRule";
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { ListRule, RECOMMENDATION_BAN, recommendationToStable } from "./ListRule";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 export const RULE_USER = "m.room.rule.user";
 export const RULE_ROOM = "m.room.rule.room";
diff --git a/src/mjolnir/ListRule.ts b/src/mjolnir/ListRule.ts
index 1d472e06d6..b585b2701f 100644
--- a/src/mjolnir/ListRule.ts
+++ b/src/mjolnir/ListRule.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixGlob} from "../utils/MatrixGlob";
+import { MatrixGlob } from "../utils/MatrixGlob";
 
 // Inspiration largely taken from Mjolnir itself
 
diff --git a/src/mjolnir/Mjolnir.ts b/src/mjolnir/Mjolnir.ts
index f1fe816642..21616eece3 100644
--- a/src/mjolnir/Mjolnir.ts
+++ b/src/mjolnir/Mjolnir.ts
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from "../MatrixClientPeg";
-import {ALL_RULE_TYPES, BanList} from "./BanList";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { ALL_RULE_TYPES, BanList } from "./BanList";
 import SettingsStore from "../settings/SettingsStore";
-import {_t} from "../languageHandler";
+import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
-import {SettingLevel} from "../settings/SettingLevel";
+import { SettingLevel } from "../settings/SettingLevel";
 import { Preset } from "matrix-js-sdk/src/@types/partials";
 
 // TODO: Move this and related files to the js-sdk or something once finalized.
@@ -49,7 +49,7 @@ export class Mjolnir {
         this._dispatcherRef = dis.register(this._onAction);
         dis.dispatch({
             action: 'do_after_sync_prepared',
-            deferred_action: {action: 'setup_mjolnir'},
+            deferred_action: { action: 'setup_mjolnir' },
         });
     }
 
diff --git a/src/notifications/ContentRules.ts b/src/notifications/ContentRules.ts
index cd574e12b6..5f1281e58c 100644
--- a/src/notifications/ContentRules.ts
+++ b/src/notifications/ContentRules.ts
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {PushRuleVectorState, State} from "./PushRuleVectorState";
-import {IExtendedPushRule, IRuleSets} from "./types";
+import { PushRuleVectorState, State } from "./PushRuleVectorState";
+import { IExtendedPushRule, IRuleSets } from "./types";
 
 export interface IContentRules {
     vectorState: State;
diff --git a/src/notifications/NotificationUtils.ts b/src/notifications/NotificationUtils.ts
index e3b7f66447..1d5356e16b 100644
--- a/src/notifications/NotificationUtils.ts
+++ b/src/notifications/NotificationUtils.ts
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Action, Actions} from "./types";
+import { Action, Actions } from "./types";
 
 interface IEncodedActions {
     notify: boolean;
@@ -37,12 +37,12 @@ export class NotificationUtils {
         if (notify) {
             const actions: Action[] = [Actions.Notify];
             if (sound) {
-                actions.push({"set_tweak": "sound", "value": sound});
+                actions.push({ "set_tweak": "sound", "value": sound });
             }
             if (highlight) {
-                actions.push({"set_tweak": "highlight"});
+                actions.push({ "set_tweak": "highlight" });
             } else {
-                actions.push({"set_tweak": "highlight", "value": false});
+                actions.push({ "set_tweak": "highlight", "value": false });
             }
             return actions;
         } else {
diff --git a/src/notifications/PushRuleVectorState.ts b/src/notifications/PushRuleVectorState.ts
index d33426cfc4..78c7e4b43b 100644
--- a/src/notifications/PushRuleVectorState.ts
+++ b/src/notifications/PushRuleVectorState.ts
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {StandardActions} from "./StandardActions";
-import {NotificationUtils} from "./NotificationUtils";
-import {IPushRule} from "./types";
+import { StandardActions } from "./StandardActions";
+import { NotificationUtils } from "./NotificationUtils";
+import { IPushRule } from "./types";
 
 export enum State {
     /** The push rule is disabled */
diff --git a/src/notifications/StandardActions.ts b/src/notifications/StandardActions.ts
index c17010af9a..9447f1077c 100644
--- a/src/notifications/StandardActions.ts
+++ b/src/notifications/StandardActions.ts
@@ -15,16 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {NotificationUtils} from "./NotificationUtils";
+import { NotificationUtils } from "./NotificationUtils";
 
 const encodeActions = NotificationUtils.encodeActions;
 
 export class StandardActions {
-    static ACTION_NOTIFY = encodeActions({notify: true});
-    static ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({notify: true, sound: "default"});
-    static ACTION_NOTIFY_RING_SOUND = encodeActions({notify: true, sound: "ring"});
-    static ACTION_HIGHLIGHT = encodeActions({notify: true, highlight: true});
-    static ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({notify: true, sound: "default", highlight: true});
-    static ACTION_DONT_NOTIFY = encodeActions({notify: false});
+    static ACTION_NOTIFY = encodeActions({ notify: true });
+    static ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({ notify: true, sound: "default" });
+    static ACTION_NOTIFY_RING_SOUND = encodeActions({ notify: true, sound: "ring" });
+    static ACTION_HIGHLIGHT = encodeActions({ notify: true, highlight: true });
+    static ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({ notify: true, sound: "default", highlight: true });
+    static ACTION_DONT_NOTIFY = encodeActions({ notify: false });
     static ACTION_DISABLED = null;
 }
diff --git a/src/notifications/VectorPushRulesDefinitions.js b/src/notifications/VectorPushRulesDefinitions.js
index c049a81c15..df41f23ec5 100644
--- a/src/notifications/VectorPushRulesDefinitions.js
+++ b/src/notifications/VectorPushRulesDefinitions.js
@@ -16,9 +16,9 @@ limitations under the License.
 */
 
 import { _td } from '../languageHandler';
-import {StandardActions} from "./StandardActions";
-import {PushRuleVectorState} from "./PushRuleVectorState";
-import {NotificationUtils} from "./NotificationUtils";
+import { StandardActions } from "./StandardActions";
+import { PushRuleVectorState } from "./PushRuleVectorState";
+import { NotificationUtils } from "./NotificationUtils";
 
 class VectorPushRuleDefinition {
     constructor(opts) {
diff --git a/src/performance/index.ts b/src/performance/index.ts
index bfb5b4a9c7..1e24839370 100644
--- a/src/performance/index.ts
+++ b/src/performance/index.ts
@@ -31,11 +31,11 @@ interface PerformanceDataListener {
 export default class PerformanceMonitor {
     static _instance: PerformanceMonitor;
 
-    private START_PREFIX = "start:"
-    private STOP_PREFIX = "stop:"
+    private START_PREFIX = "start:";
+    private STOP_PREFIX = "stop:";
 
-    private listeners: PerformanceDataListener[] = []
-    private entries: PerformanceEntry[] = []
+    private listeners: PerformanceDataListener[] = [];
+    private entries: PerformanceEntry[] = [];
 
     public static get instance(): PerformanceMonitor {
         if (!PerformanceMonitor._instance) {
@@ -99,7 +99,7 @@ export default class PerformanceMonitor {
 
         this.listeners.forEach(listener => {
             if (this.shouldEmit(listener, measurement)) {
-                listener.callback([measurement])
+                listener.callback([measurement]);
             }
         });
 
@@ -167,11 +167,10 @@ export default class PerformanceMonitor {
     }
 }
 
-
 // Convenience exports
 export {
     PerformanceEntryNames,
-}
+};
 
 // Exposing those to the window object to bridge them from tests
 window.mxPerformanceMonitor = PerformanceMonitor.instance;
diff --git a/src/rageshake/submit-rageshake.ts b/src/rageshake/submit-rageshake.ts
index 57d60514da..5e0b2c3c4d 100644
--- a/src/rageshake/submit-rageshake.ts
+++ b/src/rageshake/submit-rageshake.ts
@@ -18,7 +18,7 @@ limitations under the License.
 
 import pako from 'pako';
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import PlatformPeg from '../PlatformPeg';
 import { _t } from '../languageHandler';
 import Tar from "tar-js";
diff --git a/src/resizer/distributors/collapse.ts b/src/resizer/distributors/collapse.ts
index f8db0be52c..d39580667c 100644
--- a/src/resizer/distributors/collapse.ts
+++ b/src/resizer/distributors/collapse.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import FixedDistributor from "./fixed";
 import ResizeItem from "../item";
-import Resizer, {IConfig} from "../resizer";
+import Resizer, { IConfig } from "../resizer";
 import Sizer from "../sizer";
 
 export interface ICollapseConfig extends IConfig {
diff --git a/src/resizer/distributors/fixed.ts b/src/resizer/distributors/fixed.ts
index 64f1c5015b..bc2d876300 100644
--- a/src/resizer/distributors/fixed.ts
+++ b/src/resizer/distributors/fixed.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import ResizeItem from "../item";
 import Sizer from "../sizer";
-import Resizer, {IConfig} from "../resizer";
+import Resizer, { IConfig } from "../resizer";
 
 /**
 distributors translate a moving cursor into
diff --git a/src/resizer/distributors/percentage.ts b/src/resizer/distributors/percentage.ts
index e9b1425414..be3f759ec8 100644
--- a/src/resizer/distributors/percentage.ts
+++ b/src/resizer/distributors/percentage.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import Sizer from "../sizer";
 import FixedDistributor from "./fixed";
-import {IConfig} from "../resizer";
+import { IConfig } from "../resizer";
 
 class PercentageSizer extends Sizer {
     public start(item: HTMLElement) {
diff --git a/src/resizer/index.ts b/src/resizer/index.ts
index 9199fc2657..313579542f 100644
--- a/src/resizer/index.ts
+++ b/src/resizer/index.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export {default as FixedDistributor} from "./distributors/fixed";
-export {default as PercentageDistributor} from "./distributors/percentage";
-export {default as CollapseDistributor} from "./distributors/collapse";
-export {default as Resizer} from "./resizer";
+export { default as FixedDistributor } from "./distributors/fixed";
+export { default as PercentageDistributor } from "./distributors/percentage";
+export { default as CollapseDistributor } from "./distributors/collapse";
+export { default as Resizer } from "./resizer";
diff --git a/src/resizer/item.ts b/src/resizer/item.ts
index 3be290f15e..66a0554d3d 100644
--- a/src/resizer/item.ts
+++ b/src/resizer/item.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Resizer, {IConfig} from "./resizer";
+import Resizer, { IConfig } from "./resizer";
 import Sizer from "./sizer";
 
 export default class ResizeItem<C extends IConfig = IConfig> {
diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts
index c7c7edcd11..e430c68e17 100644
--- a/src/resizer/resizer.ts
+++ b/src/resizer/resizer.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {throttle} from "lodash";
+import { throttle } from "lodash";
 
 import FixedDistributor from "./distributors/fixed";
 import ResizeItem from "./item";
@@ -87,7 +87,7 @@ export default class Resizer<C extends IConfig = IConfig> {
         const handles = this.getResizeHandles();
         const handle = handles[handleIndex];
         if (handle) {
-            const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
+            const { distributor } = this.createSizerAndDistributor(<HTMLDivElement>handle);
             return distributor;
         }
     }
@@ -96,7 +96,7 @@ export default class Resizer<C extends IConfig = IConfig> {
         const handles = this.getResizeHandles();
         const handle = handles.find((h) => h.getAttribute("data-id") === id);
         if (handle) {
-            const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
+            const { distributor } = this.createSizerAndDistributor(<HTMLDivElement>handle);
             return distributor;
         }
     }
@@ -127,7 +127,7 @@ export default class Resizer<C extends IConfig = IConfig> {
             this.config.onResizeStart();
         }
 
-        const {sizer, distributor} = this.createSizerAndDistributor(<HTMLDivElement>resizeHandle);
+        const { sizer, distributor } = this.createSizerAndDistributor(<HTMLDivElement>resizeHandle);
         distributor.start();
 
         const onMouseMove = (event) => {
@@ -159,11 +159,11 @@ export default class Resizer<C extends IConfig = IConfig> {
         // relax all items if they had any overconstrained flexboxes
         distributors.forEach(d => d.start());
         distributors.forEach(d => d.finish());
-    }, 100, {trailing: true, leading: true});
+    }, 100, { trailing: true, leading: true });
 
     public getDistributors = () => {
         return this.getResizeHandles().map(handle => {
-            const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
+            const { distributor } = this.createSizerAndDistributor(<HTMLDivElement>handle);
             return distributor;
         });
     };
@@ -177,7 +177,7 @@ export default class Resizer<C extends IConfig = IConfig> {
         const sizer = Distributor.createSizer(this.container, vertical, reverse);
         const item = Distributor.createItem(resizeHandle, this, sizer);
         const distributor = new Distributor(item);
-        return {sizer, distributor};
+        return { sizer, distributor };
     }
 
     private getResizeHandles() {
diff --git a/src/settings/controllers/NotificationControllers.ts b/src/settings/controllers/NotificationControllers.ts
index 323c64e9c3..cc5c040a89 100644
--- a/src/settings/controllers/NotificationControllers.ts
+++ b/src/settings/controllers/NotificationControllers.ts
@@ -16,11 +16,11 @@ limitations under the License.
 */
 
 import SettingController from "./SettingController";
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import { SettingLevel } from "../SettingLevel";
 
 // XXX: This feels wrong.
-import {PushProcessor} from "matrix-js-sdk/src/pushprocessor";
+import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
 // .m.rule.master being enabled means all events match that push rule
 // default action on this rule is dont_notify, but it could be something else
diff --git a/src/settings/controllers/ThemeController.ts b/src/settings/controllers/ThemeController.ts
index 15dd64c901..f564f56f54 100644
--- a/src/settings/controllers/ThemeController.ts
+++ b/src/settings/controllers/ThemeController.ts
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import SettingController from "./SettingController";
-import {DEFAULT_THEME, enumerateThemes} from "../../theme";
+import { DEFAULT_THEME, enumerateThemes } from "../../theme";
 import { SettingLevel } from "../SettingLevel";
 
 export default class ThemeController extends SettingController {
diff --git a/src/settings/handlers/AccountSettingsHandler.ts b/src/settings/handlers/AccountSettingsHandler.ts
index e75faa49c1..60ec849883 100644
--- a/src/settings/handlers/AccountSettingsHandler.ts
+++ b/src/settings/handlers/AccountSettingsHandler.ts
@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import MatrixClientBackedSettingsHandler from "./MatrixClientBackedSettingsHandler";
-import {objectClone, objectKeyChanges} from "../../utils/objects";
-import {SettingLevel} from "../SettingLevel";
+import { objectClone, objectKeyChanges } from "../../utils/objects";
+import { SettingLevel } from "../SettingLevel";
 import { WatchManager } from "../WatchManager";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -73,7 +73,7 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
             const val = event.getContent()['enabled'];
             this.watchers.notifyUpdate("recent_emoji", null, SettingLevel.ACCOUNT, val);
         }
-    }
+    };
 
     public getValue(settingName: string, roomId: string): any {
         // Special case URL previews
diff --git a/src/settings/handlers/ConfigSettingsHandler.ts b/src/settings/handlers/ConfigSettingsHandler.ts
index 791c655a0d..ceed3e856a 100644
--- a/src/settings/handlers/ConfigSettingsHandler.ts
+++ b/src/settings/handlers/ConfigSettingsHandler.ts
@@ -17,7 +17,7 @@ limitations under the License.
 
 import SettingsHandler from "./SettingsHandler";
 import SdkConfig from "../../SdkConfig";
-import {isNullOrUndefined} from "matrix-js-sdk/src/utils";
+import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 
 /**
  * Gets and sets settings at the "config" level. This handler does not make use of the
diff --git a/src/settings/handlers/DeviceSettingsHandler.ts b/src/settings/handlers/DeviceSettingsHandler.ts
index 208a265e04..e4ad4cb51e 100644
--- a/src/settings/handlers/DeviceSettingsHandler.ts
+++ b/src/settings/handlers/DeviceSettingsHandler.ts
@@ -17,8 +17,8 @@ limitations under the License.
 */
 
 import SettingsHandler from "./SettingsHandler";
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import {SettingLevel} from "../SettingLevel";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { SettingLevel } from "../SettingLevel";
 import { CallbackFn, WatchManager } from "../WatchManager";
 import { Layout } from "../Layout";
 
@@ -109,7 +109,7 @@ export default class DeviceSettingsHandler extends SettingsHandler {
             "lastRightPanelPhaseForRoom",
             "lastRightPanelPhaseForGroup",
         ].includes(settingName)) {
-            localStorage.setItem(`mx_${settingName}`, JSON.stringify({value: newValue}));
+            localStorage.setItem(`mx_${settingName}`, JSON.stringify({ value: newValue }));
             this.watchers.notifyUpdate(settingName, null, SettingLevel.DEVICE, newValue);
             return Promise.resolve();
         }
diff --git a/src/settings/handlers/RoomDeviceSettingsHandler.ts b/src/settings/handlers/RoomDeviceSettingsHandler.ts
index 2fcd58c27c..2a068eb060 100644
--- a/src/settings/handlers/RoomDeviceSettingsHandler.ts
+++ b/src/settings/handlers/RoomDeviceSettingsHandler.ts
@@ -57,7 +57,7 @@ export default class RoomDeviceSettingsHandler extends SettingsHandler {
         if (newValue === null) {
             localStorage.removeItem(this.getKey(settingName, roomId));
         } else {
-            newValue = JSON.stringify({value: newValue});
+            newValue = JSON.stringify({ value: newValue });
             localStorage.setItem(this.getKey(settingName, roomId), newValue);
         }
 
diff --git a/src/settings/watchers/FontWatcher.ts b/src/settings/watchers/FontWatcher.ts
index 6a17bf2aa3..952a2eb9f3 100644
--- a/src/settings/watchers/FontWatcher.ts
+++ b/src/settings/watchers/FontWatcher.ts
@@ -63,7 +63,7 @@ export class FontWatcher implements IWatcher {
         (<HTMLElement>document.querySelector(":root")).style.fontSize = toPx(fontSize);
     };
 
-    private setSystemFont = ({useSystemFont, font}) => {
+    private setSystemFont = ({ useSystemFont, font }) => {
         document.body.style.fontFamily = useSystemFont ? font : "";
     };
 }
diff --git a/src/shouldHideEvent.ts b/src/shouldHideEvent.ts
index 31d610b28b..985eae85a0 100644
--- a/src/shouldHideEvent.ts
+++ b/src/shouldHideEvent.ts
@@ -14,10 +14,10 @@
  limitations under the License.
  */
 
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import SettingsStore from "./settings/SettingsStore";
-import {IState} from "./components/structures/RoomView";
+import { IState } from "./components/structures/RoomView";
 
 interface IDiff {
     isMemberEvent: boolean;
diff --git a/src/stores/ActiveWidgetStore.js b/src/stores/ActiveWidgetStore.js
index 4ae8dfeddb..b270d99693 100644
--- a/src/stores/ActiveWidgetStore.js
+++ b/src/stores/ActiveWidgetStore.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 import EventEmitter from 'events';
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
-import {WidgetMessagingStore} from "./widgets/WidgetMessagingStore";
+import { MatrixClientPeg } from '../MatrixClientPeg';
+import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
 
 /**
  * Stores information about the widgets active in the app right now:
diff --git a/src/stores/BreadcrumbsStore.ts b/src/stores/BreadcrumbsStore.ts
index 1a78a1b485..a3b07435c6 100644
--- a/src/stores/BreadcrumbsStore.ts
+++ b/src/stores/BreadcrumbsStore.ts
@@ -66,13 +66,13 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
             if (payload.settingName === 'breadcrumb_rooms') {
                 await this.updateRooms();
             } else if (payload.settingName === 'breadcrumbs') {
-                await this.updateState({enabled: SettingsStore.getValue("breadcrumbs", null)});
+                await this.updateState({ enabled: SettingsStore.getValue("breadcrumbs", null) });
             }
         } else if (payload.action === 'view_room') {
             if (payload.auto_join && !this.matrixClient.getRoom(payload.room_id)) {
                 // Queue the room instead of pushing it immediately. We're probably just
                 // waiting for a room join to complete.
-                this.waitingRooms.push({roomId: payload.room_id, addedTs: Date.now()});
+                this.waitingRooms.push({ roomId: payload.room_id, addedTs: Date.now() });
             } else {
                 // The tests might not result in a valid room object.
                 const room = this.matrixClient.getRoom(payload.room_id);
@@ -83,7 +83,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
 
     protected async onReady() {
         await this.updateRooms();
-        await this.updateState({enabled: SettingsStore.getValue("breadcrumbs", null)});
+        await this.updateState({ enabled: SettingsStore.getValue("breadcrumbs", null) });
 
         this.matrixClient.on("Room.myMembership", this.onMyMembership);
         this.matrixClient.on("Room", this.onRoom);
@@ -118,7 +118,7 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
         const rooms = roomIds.map(r => this.matrixClient.getRoom(r)).filter(r => !!r);
         const currentRooms = this.state.rooms || [];
         if (!arrayHasDiff(rooms, currentRooms)) return; // no change (probably echo)
-        await this.updateState({rooms});
+        await this.updateState({ rooms });
     }
 
     private async appendRoom(room: Room) {
@@ -163,10 +163,9 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
             updated = true;
         }
 
-
         if (updated) {
             // Update the breadcrumbs
-            await this.updateState({rooms});
+            await this.updateState({ rooms });
             const roomIds = rooms.map(r => r.roomId);
             if (roomIds.length > 0) {
                 await SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds);
diff --git a/src/stores/CommunityPrototypeStore.ts b/src/stores/CommunityPrototypeStore.ts
index a6f4574a58..0c364430ea 100644
--- a/src/stores/CommunityPrototypeStore.ts
+++ b/src/stores/CommunityPrototypeStore.ts
@@ -126,11 +126,11 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
 
             if (membership === EffectiveMembership.Invite) {
                 try {
-                    const path = utils.encodeUri("/rooms/$roomId/group_info", {$roomId: room.roomId});
+                    const path = utils.encodeUri("/rooms/$roomId/group_info", { $roomId: room.roomId });
                     const profile = await this.matrixClient.http.authedRequest(
                         undefined, "GET", path,
                         undefined, undefined,
-                        {prefix: "/_matrix/client/unstable/im.vector.custom"});
+                        { prefix: "/_matrix/client/unstable/im.vector.custom" });
                     // we use global account data because per-room account data on invites is unreliable
                     await this.matrixClient.setAccountData("im.vector.group_info." + room.roomId, profile);
                 } catch (e) {
@@ -155,7 +155,7 @@ export class CommunityPrototypeStore extends AsyncStoreWithClient<IState> {
     }
 
     public getInviteProfile(roomId: string): IRoomProfile {
-        if (!this.matrixClient) return {displayName: null, avatarMxc: null};
+        if (!this.matrixClient) return { displayName: null, avatarMxc: null };
         const room = this.matrixClient.getRoom(roomId);
         if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
             const data = this.matrixClient.getAccountData("im.vector.group_info." + roomId);
diff --git a/src/stores/CustomRoomTagStore.js b/src/stores/CustomRoomTagStore.js
index 55c9699f7a..899018cf24 100644
--- a/src/stores/CustomRoomTagStore.js
+++ b/src/stores/CustomRoomTagStore.js
@@ -17,12 +17,12 @@ limitations under the License.
 
 import dis from '../dispatcher/dispatcher';
 import EventEmitter from 'events';
-import {throttle} from "lodash";
+import { throttle } from "lodash";
 import SettingsStore from "../settings/SettingsStore";
-import RoomListStore, {LISTS_UPDATE_EVENT} from "./room-list/RoomListStore";
-import {RoomNotificationStateStore} from "./notifications/RoomNotificationStateStore";
-import {isCustomTag} from "./room-list/models";
-import {objectHasDiff} from "../utils/objects";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "./room-list/RoomListStore";
+import { RoomNotificationStateStore } from "./notifications/RoomNotificationStateStore";
+import { isCustomTag } from "./room-list/models";
+import { objectHasDiff } from "../utils/objects";
 
 function commonPrefix(a, b) {
     const len = Math.min(a.length, b.length);
@@ -52,7 +52,7 @@ class CustomRoomTagStore extends EventEmitter {
     constructor() {
         super();
         // Initialise state
-        this._state = {tags: {}};
+        this._state = { tags: {} };
 
         // as RoomListStore gets updated by every timeline event
         // throttle this to only run every 500ms
@@ -103,14 +103,14 @@ class CustomRoomTagStore extends EventEmitter {
             }
             const avatarLetter = name.substr(prefixes[i].length, 1);
             const selected = this._state.tags[name];
-            return {name, avatarLetter, badgeNotifState, selected};
+            return { name, avatarLetter, badgeNotifState, selected };
         });
     }
 
     _onListsUpdated = () => {
         const newTags = this._getUpdatedTags();
         if (!this._state.tags || objectHasDiff(this._state.tags, newTags)) {
-            this._setState({tags: newTags});
+            this._setState({ tags: newTags });
         }
     };
 
@@ -122,14 +122,14 @@ class CustomRoomTagStore extends EventEmitter {
                     const tag = {};
                     tag[payload.tag] = !oldTags[payload.tag];
                     const tags = Object.assign({}, oldTags, tag);
-                    this._setState({tags});
+                    this._setState({ tags });
                 }
                 break;
             }
             case 'on_client_not_viable':
             case 'on_logged_out': {
                 // we assume to always have a tags object in the state
-                this._state = {tags: {}};
+                this._state = { tags: {} };
                 RoomListStore.instance.off(LISTS_UPDATE_EVENT, this._onListsUpdated);
                 break;
             }
diff --git a/src/stores/GroupFilterOrderStore.js b/src/stores/GroupFilterOrderStore.js
index b18abaa001..e6401f21f8 100644
--- a/src/stores/GroupFilterOrderStore.js
+++ b/src/stores/GroupFilterOrderStore.js
@@ -13,12 +13,12 @@ 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 {Store} from 'flux/utils';
+import { Store } from 'flux/utils';
 import dis from '../dispatcher/dispatcher';
 import GroupStore from './GroupStore';
 import Analytics from '../Analytics';
 import * as RoomNotifs from "../RoomNotifs";
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import SettingsStore from "../settings/SettingsStore";
 
 const INITIAL_STATE = {
@@ -213,7 +213,7 @@ class GroupFilterOrderStore extends Store {
                 changedBadges[groupId] = (badge && badge.count !== 0) ? badge : undefined;
             });
             const newBadges = Object.assign({}, this._state.badges, changedBadges);
-            this._setState({badges: newBadges});
+            this._setState({ badges: newBadges });
         }
     }
 
@@ -231,7 +231,6 @@ class GroupFilterOrderStore extends Store {
         const tags = this._state.orderedTagsAccountData || [];
         const removedTags = new Set(this._state.removedTagsAccountData || []);
 
-
         const tagsToKeep = tags.filter(
             (t) => (t[0] !== '+' || groupIds.includes(t)) && !removedTags.has(t),
         );
diff --git a/src/stores/GroupStore.js b/src/stores/GroupStore.js
index d4097184a1..f1122cb945 100644
--- a/src/stores/GroupStore.js
+++ b/src/stores/GroupStore.js
@@ -17,7 +17,7 @@ limitations under the License.
 import EventEmitter from 'events';
 import { groupMemberFromApiObject, groupRoomFromApiObject } from '../groups';
 import FlairStore from './FlairStore';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import dis from '../dispatcher/dispatcher';
 
 function parseMembersResponse(response) {
diff --git a/src/stores/HostSignupStore.ts b/src/stores/HostSignupStore.ts
index d50a7f6b43..382e21c1be 100644
--- a/src/stores/HostSignupStore.ts
+++ b/src/stores/HostSignupStore.ts
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import defaultDispatcher from "../dispatcher/dispatcher";
-import {AsyncStore} from "./AsyncStore";
-import {ActionPayload} from "../dispatcher/payloads";
+import { AsyncStore } from "./AsyncStore";
+import { ActionPayload } from "../dispatcher/payloads";
 
 interface IState {
     hostSignupActive?: boolean;
@@ -26,7 +26,7 @@ export class HostSignupStore extends AsyncStore<IState> {
     private static internalInstance = new HostSignupStore();
 
     private constructor() {
-        super(defaultDispatcher, {hostSignupActive: false});
+        super(defaultDispatcher, { hostSignupActive: false });
     }
 
     public static get instance(): HostSignupStore {
diff --git a/src/stores/ModalWidgetStore.ts b/src/stores/ModalWidgetStore.ts
index 9c0da49c8c..851cff3549 100644
--- a/src/stores/ModalWidgetStore.ts
+++ b/src/stores/ModalWidgetStore.ts
@@ -17,10 +17,10 @@ limitations under the License.
 import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
-import Modal, {IHandle, IModal} from "../Modal";
+import Modal, { IHandle, IModal } from "../Modal";
 import ModalWidgetDialog from "../components/views/dialogs/ModalWidgetDialog";
-import {WidgetMessagingStore} from "./widgets/WidgetMessagingStore";
-import {IModalWidgetOpenRequestData, IModalWidgetReturnData, Widget} from "matrix-widget-api";
+import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
+import { IModalWidgetOpenRequestData, IModalWidgetReturnData, Widget } from "matrix-widget-api";
 
 interface IState {
     modal?: IModal<any>;
@@ -56,7 +56,7 @@ export class ModalWidgetStore extends AsyncStoreWithClient<IState> {
         if (this.modalInstance) return;
         this.openSourceWidgetId = sourceWidget.id;
         this.modalInstance = Modal.createTrackedDialog('Modal Widget', '', ModalWidgetDialog, {
-            widgetDefinition: {...requestData},
+            widgetDefinition: { ...requestData },
             widgetRoomId,
             sourceWidgetId: sourceWidget.id,
             onFinished: (success: boolean, data?: IModalWidgetReturnData) => {
diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts
index bb45456f1e..fb2dd527cb 100644
--- a/src/stores/OwnProfileStore.ts
+++ b/src/stores/OwnProfileStore.ts
@@ -22,7 +22,7 @@ import { User } from "matrix-js-sdk/src/models/user";
 import { throttle } from "lodash";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
-import {mediaFromMxc} from "../customisations/Media";
+import { mediaFromMxc } from "../customisations/Media";
 
 interface IState {
     displayName?: string;
@@ -134,7 +134,7 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         } else {
             window.localStorage.removeItem(KEY_AVATAR_URL);
         }
-        await this.updateState({displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url});
+        await this.updateState({ displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url });
     };
 
     private onStateEvents = throttle(async (ev: MatrixEvent) => {
@@ -142,5 +142,5 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {
             await this.onProfileUpdate();
         }
-    }, 200, {trailing: true, leading: true});
+    }, 200, { trailing: true, leading: true });
 }
diff --git a/src/stores/RightPanelStore.ts b/src/stores/RightPanelStore.ts
index 03f12832fd..1b5e9a3413 100644
--- a/src/stores/RightPanelStore.ts
+++ b/src/stores/RightPanelStore.ts
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import dis from '../dispatcher/dispatcher';
-import {pendingVerificationRequestForUser} from '../verification';
-import {Store} from 'flux/utils';
+import { pendingVerificationRequestForUser } from '../verification';
+import { Store } from 'flux/utils';
 import SettingsStore from "../settings/SettingsStore";
-import {RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS} from "./RightPanelStorePhases";
-import {ActionPayload} from "../dispatcher/payloads";
-import {Action} from '../dispatcher/actions';
+import { RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS } from "./RightPanelStorePhases";
+import { ActionPayload } from "../dispatcher/payloads";
+import { Action } from '../dispatcher/actions';
 import { SettingLevel } from "../settings/SettingLevel";
 import RoomViewStore from './RoomViewStore';
 
@@ -152,12 +152,12 @@ export default class RightPanelStore extends Store<ActionPayload> {
 
                 // Reset to the member list if we're viewing member info
                 if (MEMBER_INFO_PHASES.includes(this.state.lastRoomPhase)) {
-                    this.setState({lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {}});
+                    this.setState({ lastRoomPhase: RightPanelPhases.RoomMemberList, lastRoomPhaseParams: {} });
                 }
 
                 // Do the same for groups
                 if (this.state.lastGroupPhase === RightPanelPhases.GroupMemberInfo) {
-                    this.setState({lastGroupPhase: RightPanelPhases.GroupMemberList});
+                    this.setState({ lastGroupPhase: RightPanelPhases.GroupMemberList });
                 }
                 break;
 
@@ -167,7 +167,7 @@ export default class RightPanelStore extends Store<ActionPayload> {
                 const allowClose = payload.allowClose ?? true;
                 // redirect to EncryptionPanel if there is an ongoing verification request
                 if (targetPhase === RightPanelPhases.RoomMemberInfo && payload.refireParams) {
-                    const {member} = payload.refireParams;
+                    const { member } = payload.refireParams;
                     const pendingRequest = pendingVerificationRequestForUser(member);
                     if (pendingRequest) {
                         targetPhase = RightPanelPhases.EncryptionPanel;
diff --git a/src/stores/SetupEncryptionStore.ts b/src/stores/SetupEncryptionStore.ts
index 88385d0399..53a8966296 100644
--- a/src/stores/SetupEncryptionStore.ts
+++ b/src/stores/SetupEncryptionStore.ts
@@ -167,11 +167,11 @@ export class SetupEncryptionStore extends EventEmitter {
             this.phase = Phase.Done;
             this.emit("update");
         }
-    }
+    };
 
     public onVerificationRequest = (request: VerificationRequest): void => {
         this.setActiveVerificationRequest(request);
-    }
+    };
 
     public onVerificationRequestChange = (): void => {
         if (this.verificationRequest.cancelled) {
@@ -188,7 +188,7 @@ export class SetupEncryptionStore extends EventEmitter {
             this.phase = publicKeysTrusted ? Phase.Done : Phase.Busy;
             this.emit("update");
         }
-    }
+    };
 
     public skip(): void {
         this.phase = Phase.ConfirmSkip;
diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx
index e498574467..6300c1a936 100644
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@@ -81,7 +81,7 @@ const validOrder = (order: string): string | undefined => {
 // For sorting space children using a validated `order`, `m.room.create`'s `origin_server_ts`, `room_id`
 export const getChildOrder = (order: string, creationTs: number, roomId: string): Array<Many<ListIteratee<any>>> => {
     return [validOrder(order), creationTs, roomId];
-}
+};
 
 const getRoomFn: FetchRoomFn = (room: Room) => {
     return RoomNotificationStateStore.instance.getRoomState(room);
@@ -353,18 +353,18 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         // build initial state of invited spaces as we would have missed the emitted events about the room at launch
         this._invitedSpaces = new Set(this.sortRootSpaces(invitedSpaces));
         this.emit(UPDATE_INVITED_SPACES, this.invitedSpaces);
-    }, 100, {trailing: true, leading: true});
+    }, 100, { trailing: true, leading: true });
 
     private onSpaceUpdate = () => {
         this.rebuild();
-    }
+    };
 
     private showInHomeSpace = (room: Room) => {
         if (SettingsStore.getValue("feature_spaces.all_rooms")) return true;
         if (room.isSpaceRoom()) return false;
         return !this.parentMap.get(room.roomId)?.size // put all orphaned rooms in the Home Space
             || DMRoomMap.shared().getUserIdForRoomId(room.roomId) // put all DMs in the Home Space
-            || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite) // show all favourites
+            || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite); // show all favourites
     };
 
     // Update a given room due to its tag changing (e.g DM-ness or Fav-ness)
@@ -462,7 +462,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 return false;
             }));
         });
-    }, 100, {trailing: true, leading: true});
+    }, 100, { trailing: true, leading: true });
 
     private switchToRelatedSpace = (roomId: string) => {
         if (this.suggestedRooms.find(r => r.room_id === roomId)) return;
@@ -584,7 +584,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 this.onRoomUpdate(room);
             }
         }
-    }
+    };
 
     private onAccountData = (ev: MatrixEvent, lastEvent: MatrixEvent) => {
         if (ev.getType() === EventType.Direct) {
diff --git a/src/stores/ThreepidInviteStore.ts b/src/stores/ThreepidInviteStore.ts
index 06cfad2c6b..74a5f5f8ec 100644
--- a/src/stores/ThreepidInviteStore.ts
+++ b/src/stores/ThreepidInviteStore.ts
@@ -58,7 +58,7 @@ export default class ThreepidInviteStore extends EventEmitter {
     }
 
     public storeInvite(roomId: string, wireInvite: IThreepidInviteWireFormat): IThreepidInvite {
-        const invite = <IPersistedThreepidInvite>{roomId, ...wireInvite};
+        const invite = <IPersistedThreepidInvite>{ roomId, ...wireInvite };
         const id = this.generateIdOf(invite);
         localStorage.setItem(`${STORAGE_PREFIX}${id}`, JSON.stringify(invite));
         return this.translateInvite(invite);
diff --git a/src/stores/TypingStore.ts b/src/stores/TypingStore.ts
index d5177a33a0..447f41c7ae 100644
--- a/src/stores/TypingStore.ts
+++ b/src/stores/TypingStore.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import SettingsStore from "../settings/SettingsStore";
 import Timer from "../utils/Timer";
 
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index 7511527eb0..86312f79d7 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -106,7 +106,7 @@ export default class UIStore extends EventEmitter {
         });
 
         this.emit(UI_EVENTS.Resize, entries);
-    }
+    };
 }
 
 window.mxUIStore = UIStore.instance;
diff --git a/src/stores/VoiceRecordingStore.ts b/src/stores/VoiceRecordingStore.ts
index 8ee44359fb..81c19e7e82 100644
--- a/src/stores/VoiceRecordingStore.ts
+++ b/src/stores/VoiceRecordingStore.ts
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AsyncStoreWithClient} from "./AsyncStoreWithClient";
+import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 import defaultDispatcher from "../dispatcher/dispatcher";
-import {ActionPayload} from "../dispatcher/payloads";
-import {VoiceRecording} from "../voice/VoiceRecording";
+import { ActionPayload } from "../dispatcher/payloads";
+import { VoiceRecording } from "../voice/VoiceRecording";
 
 interface IState {
     recording?: VoiceRecording;
@@ -62,7 +62,7 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
         const recording = new VoiceRecording(this.matrixClient);
 
         // noinspection JSIgnoredPromiseFromCall - we can safely run this async
-        this.updateState({recording});
+        this.updateState({ recording });
 
         return recording;
     }
@@ -75,7 +75,7 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
         if (this.state.recording) {
             this.state.recording.destroy(); // stops internally
         }
-        return this.updateState({recording: null});
+        return this.updateState({ recording: null });
     }
 }
 
diff --git a/src/stores/WidgetStore.ts b/src/stores/WidgetStore.ts
index 8961581964..732428107f 100644
--- a/src/stores/WidgetStore.ts
+++ b/src/stores/WidgetStore.ts
@@ -24,8 +24,8 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import WidgetEchoStore from "../stores/WidgetEchoStore";
 import ActiveWidgetStore from "../stores/ActiveWidgetStore";
 import WidgetUtils from "../utils/WidgetUtils";
-import {WidgetType} from "../widgets/WidgetType";
-import {UPDATE_EVENT} from "./AsyncStore";
+import { WidgetType } from "../widgets/WidgetType";
+import { UPDATE_EVENT } from "./AsyncStore";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 
 interface IState {}
diff --git a/src/stores/local-echo/EchoStore.ts b/src/stores/local-echo/EchoStore.ts
index 76e90be45e..9c038c5a4f 100644
--- a/src/stores/local-echo/EchoStore.ts
+++ b/src/stores/local-echo/EchoStore.ts
@@ -77,10 +77,10 @@ export class EchoStore extends AsyncStoreWithClient<IState> {
 
         if (hasOrHadError && !this.state.toastRef) {
             const ref = NonUrgentToastStore.instance.addToast(NonUrgentEchoFailureToast);
-            await this.updateState({toastRef: ref});
+            await this.updateState({ toastRef: ref });
         } else if (!hasOrHadError && this.state.toastRef) {
             NonUrgentToastStore.instance.removeToast(this.state.toastRef);
-            await this.updateState({toastRef: null});
+            await this.updateState({ toastRef: null });
         }
     }
 
diff --git a/src/stores/local-echo/GenericEchoChamber.ts b/src/stores/local-echo/GenericEchoChamber.ts
index 7a2173f702..6148098fbe 100644
--- a/src/stores/local-echo/GenericEchoChamber.ts
+++ b/src/stores/local-echo/GenericEchoChamber.ts
@@ -53,7 +53,7 @@ export abstract class GenericEchoChamber<C extends EchoContext, K, V> extends Ev
     }
 
     private cacheVal(key: K, val: V, txn: EchoTransaction) {
-        this.cache.set(key, {txn, val});
+        this.cache.set(key, { txn, val });
         this.emit(PROPERTY_UPDATED, key);
     }
 
diff --git a/src/stores/notifications/NotificationState.ts b/src/stores/notifications/NotificationState.ts
index c8ef0ba859..00dbb7856f 100644
--- a/src/stores/notifications/NotificationState.ts
+++ b/src/stores/notifications/NotificationState.ts
@@ -80,8 +80,8 @@ export class NotificationStateSnapshot {
     }
 
     public isDifferentFrom(other: NotificationState): boolean {
-        const before = {count: this.count, symbol: this.symbol, color: this.color};
-        const after = {count: other.count, symbol: other.symbol, color: other.color};
+        const before = { count: this.count, symbol: this.symbol, color: this.color };
+        const after = { count: other.count, symbol: other.symbol, color: other.color };
         return JSON.stringify(before) !== JSON.stringify(after);
     }
 }
diff --git a/src/stores/room-list/MessagePreviewStore.ts b/src/stores/room-list/MessagePreviewStore.ts
index f5b9d9bc6a..99f24cfbe7 100644
--- a/src/stores/room-list/MessagePreviewStore.ts
+++ b/src/stores/room-list/MessagePreviewStore.ts
@@ -176,7 +176,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
 
         if (payload.action === 'MatrixActions.Room.timeline' || payload.action === 'MatrixActions.Event.decrypted') {
             const event = payload.event; // TODO: Type out the dispatcher
-            const isHistoricalEvent = payload.hasOwnProperty("isLiveEvent") && !payload.isLiveEvent
+            const isHistoricalEvent = payload.hasOwnProperty("isLiveEvent") && !payload.isLiveEvent;
             if (!this.previews.has(event.getRoomId()) || isHistoricalEvent) return; // not important
             await this.generatePreview(this.matrixClient.getRoom(event.getRoomId()), TAG_ANY);
         }
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index b5961f1ac3..8d610b5cc1 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -14,27 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 import SettingsStore from "../../settings/SettingsStore";
-import {DefaultTagID, isCustomTag, OrderedDefaultTagIDs, RoomUpdateCause, TagID} from "./models";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {IListOrderingMap, ITagMap, ITagSortingMap, ListAlgorithm, SortAlgorithm} from "./algorithms/models";
-import {ActionPayload} from "../../dispatcher/payloads";
+import { DefaultTagID, isCustomTag, OrderedDefaultTagIDs, RoomUpdateCause, TagID } from "./models";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { IListOrderingMap, ITagMap, ITagSortingMap, ListAlgorithm, SortAlgorithm } from "./algorithms/models";
+import { ActionPayload } from "../../dispatcher/payloads";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import {readReceiptChangeIsFor} from "../../utils/read-receipts";
-import {FILTER_CHANGED, FilterKind, IFilterCondition} from "./filters/IFilterCondition";
-import {TagWatcher} from "./TagWatcher";
+import { readReceiptChangeIsFor } from "../../utils/read-receipts";
+import { FILTER_CHANGED, FilterKind, IFilterCondition } from "./filters/IFilterCondition";
+import { TagWatcher } from "./TagWatcher";
 import RoomViewStore from "../RoomViewStore";
-import {Algorithm, LIST_UPDATED_EVENT} from "./algorithms/Algorithm";
-import {EffectiveMembership, getEffectiveMembership} from "../../utils/membership";
-import {isNullOrUndefined} from "matrix-js-sdk/src/utils";
+import { Algorithm, LIST_UPDATED_EVENT } from "./algorithms/Algorithm";
+import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
+import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import RoomListLayoutStore from "./RoomListLayoutStore";
-import {MarkedExecution} from "../../utils/MarkedExecution";
-import {AsyncStoreWithClient} from "../AsyncStoreWithClient";
-import {NameFilterCondition} from "./filters/NameFilterCondition";
-import {RoomNotificationStateStore} from "../notifications/RoomNotificationStateStore";
-import {VisibilityProvider} from "./filters/VisibilityProvider";
-import {SpaceWatcher} from "./SpaceWatcher";
+import { MarkedExecution } from "../../utils/MarkedExecution";
+import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
+import { NameFilterCondition } from "./filters/NameFilterCondition";
+import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
+import { VisibilityProvider } from "./filters/VisibilityProvider";
+import { SpaceWatcher } from "./SpaceWatcher";
 
 interface IState {
     tagsEnabled?: boolean;
@@ -131,8 +131,8 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
         // Update any settings here, as some may have happened before we were logically ready.
         console.log("Regenerating room lists: Startup");
         await this.readAndCacheSettingsFromStore();
-        await this.regenerateAllLists({trigger: false});
-        await this.handleRVSUpdate({trigger: false}); // fake an RVS update to adjust sticky room, if needed
+        await this.regenerateAllLists({ trigger: false });
+        await this.handleRVSUpdate({ trigger: false }); // fake an RVS update to adjust sticky room, if needed
 
         this.updateFn.mark(); // we almost certainly want to trigger an update.
         this.updateFn.trigger();
@@ -157,7 +157,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
      * @param trigger Set to false to prevent a list update from being sent. Should only
      * be used if the calling code will manually trigger the update.
      */
-    private async handleRVSUpdate({trigger = true}) {
+    private async handleRVSUpdate({ trigger = true }) {
         if (!this.matrixClient) return; // We assume there won't be RVS updates without a client
 
         const activeRoomId = RoomViewStore.getRoomId();
@@ -225,7 +225,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
                 console.log("Regenerating room lists: Settings changed");
                 await this.readAndCacheSettingsFromStore();
 
-                await this.regenerateAllLists({trigger: false}); // regenerate the lists now
+                await this.regenerateAllLists({ trigger: false }); // regenerate the lists now
                 this.updateFn.trigger();
             }
         }
@@ -633,7 +633,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
      * @param trigger Set to false to prevent a list update from being sent. Should only
      * be used if the calling code will manually trigger the update.
      */
-    public async regenerateAllLists({trigger = true}) {
+    public async regenerateAllLists({ trigger = true }) {
         console.warn("Regenerating all room lists");
 
         const rooms = this.getPlausibleRooms();
diff --git a/src/stores/room-list/filters/NameFilterCondition.ts b/src/stores/room-list/filters/NameFilterCondition.ts
index 7ec91a3249..e21d5ab718 100644
--- a/src/stores/room-list/filters/NameFilterCondition.ts
+++ b/src/stores/room-list/filters/NameFilterCondition.ts
@@ -46,7 +46,7 @@ export class NameFilterCondition extends EventEmitter implements IFilterConditio
 
     private callUpdate = throttle(() => {
         this.emit(FILTER_CHANGED);
-    }, 200, {trailing: true, leading: true});
+    }, 200, { trailing: true, leading: true });
 
     public isVisible(room: Room): boolean {
         const lcFilter = this.search.toLowerCase();
diff --git a/src/stores/room-list/filters/VisibilityProvider.ts b/src/stores/room-list/filters/VisibilityProvider.ts
index c07c2b0b26..a6c55226b0 100644
--- a/src/stores/room-list/filters/VisibilityProvider.ts
+++ b/src/stores/room-list/filters/VisibilityProvider.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {Room} from "matrix-js-sdk/src/models/room";
+import { Room } from "matrix-js-sdk/src/models/room";
 import CallHandler from "../../../CallHandler";
 import { RoomListCustomisations } from "../../../customisations/RoomList";
 import VoipUserMapper from "../../../VoipUserMapper";
diff --git a/src/stores/room-list/previews/CallAnswerEventPreview.ts b/src/stores/room-list/previews/CallAnswerEventPreview.ts
index b7207307e2..7193154890 100644
--- a/src/stores/room-list/previews/CallAnswerEventPreview.ts
+++ b/src/stores/room-list/previews/CallAnswerEventPreview.ts
@@ -26,7 +26,7 @@ export class CallAnswerEventPreview implements IPreview {
             if (isSelf(event)) {
                 return _t("You joined the call");
             } else {
-                return _t("%(senderName)s joined the call", {senderName: getSenderName(event)});
+                return _t("%(senderName)s joined the call", { senderName: getSenderName(event) });
             }
         } else {
             return _t("Call in progress");
diff --git a/src/stores/room-list/previews/CallHangupEvent.ts b/src/stores/room-list/previews/CallHangupEvent.ts
index fdab8a9de5..54d4d70fb0 100644
--- a/src/stores/room-list/previews/CallHangupEvent.ts
+++ b/src/stores/room-list/previews/CallHangupEvent.ts
@@ -26,7 +26,7 @@ export class CallHangupEvent implements IPreview {
             if (isSelf(event)) {
                 return _t("You ended the call");
             } else {
-                return _t("%(senderName)s ended the call", {senderName: getSenderName(event)});
+                return _t("%(senderName)s ended the call", { senderName: getSenderName(event) });
             }
         } else {
             return _t("Call ended");
diff --git a/src/stores/room-list/previews/CallInviteEventPreview.ts b/src/stores/room-list/previews/CallInviteEventPreview.ts
index 47486e3701..3e6a89aa6d 100644
--- a/src/stores/room-list/previews/CallInviteEventPreview.ts
+++ b/src/stores/room-list/previews/CallInviteEventPreview.ts
@@ -26,13 +26,13 @@ export class CallInviteEventPreview implements IPreview {
             if (isSelf(event)) {
                 return _t("You started a call");
             } else {
-                return _t("%(senderName)s started a call", {senderName: getSenderName(event)});
+                return _t("%(senderName)s started a call", { senderName: getSenderName(event) });
             }
         } else {
             if (isSelf(event)) {
                 return _t("Waiting for answer");
             } else {
-                return _t("%(senderName)s is calling", {senderName: getSenderName(event)});
+                return _t("%(senderName)s is calling", { senderName: getSenderName(event) });
             }
         }
     }
diff --git a/src/stores/room-list/previews/MessageEventPreview.ts b/src/stores/room-list/previews/MessageEventPreview.ts
index b900afc13f..04fb92f0c1 100644
--- a/src/stores/room-list/previews/MessageEventPreview.ts
+++ b/src/stores/room-list/previews/MessageEventPreview.ts
@@ -59,13 +59,13 @@ export class MessageEventPreview implements IPreview {
         }
 
         if (msgtype === 'm.emote') {
-            return _t("* %(senderName)s %(emote)s", {senderName: getSenderName(event), emote: body});
+            return _t("* %(senderName)s %(emote)s", { senderName: getSenderName(event), emote: body });
         }
 
         if (isSelf(event) || !shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
             return body;
         } else {
-            return _t("%(senderName)s: %(message)s", {senderName: getSenderName(event), message: body});
+            return _t("%(senderName)s: %(message)s", { senderName: getSenderName(event), message: body });
         }
     }
 }
diff --git a/src/stores/room-list/previews/ReactionEventPreview.ts b/src/stores/room-list/previews/ReactionEventPreview.ts
index 0012cf2f75..25f8e0b61a 100644
--- a/src/stores/room-list/previews/ReactionEventPreview.ts
+++ b/src/stores/room-list/previews/ReactionEventPreview.ts
@@ -44,7 +44,7 @@ export class ReactionEventPreview implements IPreview {
         if (isSelf(event) || !shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
             return reaction;
         } else {
-            return _t("%(senderName)s: %(reaction)s", {senderName: getSenderName(event), reaction});
+            return _t("%(senderName)s: %(reaction)s", { senderName: getSenderName(event), reaction });
         }
     }
 }
diff --git a/src/stores/room-list/previews/StickerEventPreview.ts b/src/stores/room-list/previews/StickerEventPreview.ts
index f8263a4a45..56746568af 100644
--- a/src/stores/room-list/previews/StickerEventPreview.ts
+++ b/src/stores/room-list/previews/StickerEventPreview.ts
@@ -28,7 +28,7 @@ export class StickerEventPreview implements IPreview {
         if (isSelf(event) || !shouldPrefixMessagesIn(event.getRoomId(), tagId)) {
             return stickerName;
         } else {
-            return _t("%(senderName)s: %(stickerName)s", {senderName: getSenderName(event), stickerName});
+            return _t("%(senderName)s: %(stickerName)s", { senderName: getSenderName(event), stickerName });
         }
     }
 }
diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts
index 6dcaf7abd7..36791d3dd9 100644
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/src/stores/widgets/StopGapWidget.ts
@@ -46,9 +46,9 @@ import ActiveWidgetStore from "../ActiveWidgetStore";
 import { objectShallowClone } from "../../utils/objects";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ElementWidgetActions, IViewRoomApiRequest } from "./ElementWidgetActions";
-import {ModalWidgetStore} from "../ModalWidgetStore";
+import { ModalWidgetStore } from "../ModalWidgetStore";
 import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
-import {getCustomTheme} from "../../theme";
+import { getCustomTheme } from "../../theme";
 import CountlyAnalytics from "../../CountlyAnalytics";
 import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
 import { MatrixEvent, IEvent } from "matrix-js-sdk/src/models/event";
@@ -180,17 +180,17 @@ export class StopGapWidget extends EventEmitter {
      * The URL to use in the iframe
      */
     public get embedUrl(): string {
-        return this.runUrlTemplate({asPopout: false});
+        return this.runUrlTemplate({ asPopout: false });
     }
 
     /**
      * The URL to use in the popout
      */
     public get popoutUrl(): string {
-        return this.runUrlTemplate({asPopout: true});
+        return this.runUrlTemplate({ asPopout: true });
     }
 
-    private runUrlTemplate(opts = {asPopout: false}): string {
+    private runUrlTemplate(opts = { asPopout: false }): string {
         const templated = this.mockWidget.getCompleteUrl({
             widgetRoomId: this.roomId,
             currentUserId: MatrixClientPeg.get().getUserId(),
@@ -244,7 +244,7 @@ export class StopGapWidget extends EventEmitter {
                 error: {
                     message: "Unable to open modal at this time",
                 },
-            })
+            });
         }
     };
 
@@ -270,14 +270,14 @@ export class StopGapWidget extends EventEmitter {
             const targetRoomId = (ev.detail.data || {}).room_id;
             if (!targetRoomId) {
                 return this.messaging.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
-                    error: {message: "Room ID not supplied."},
+                    error: { message: "Room ID not supplied." },
                 });
             }
 
             // Check the widget's permission
             if (!this.messaging.hasCapability(ElementWidgetCapabilities.CanChangeViewedRoom)) {
                 return this.messaging.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
-                    error: {message: "This widget does not have permission for this action (denied)."},
+                    error: { message: "This widget does not have permission for this action (denied)." },
                 });
             }
 
@@ -335,12 +335,12 @@ export class StopGapWidget extends EventEmitter {
                     this.messaging.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
 
                     // First close the stickerpicker
-                    defaultDispatcher.dispatch({action: "stickerpicker_close"});
+                    defaultDispatcher.dispatch({ action: "stickerpicker_close" });
 
                     // Now open the integration manager
                     // TODO: Spec this interaction.
                     const data = ev.detail.data;
-                    const integType = data?.integType
+                    const integType = data?.integType;
                     const integId = <string>data?.integId;
 
                     // TODO: Open the right integration manager for the widget
@@ -384,7 +384,7 @@ export class StopGapWidget extends EventEmitter {
         }
     }
 
-    public stop(opts = {forceDestroy: false}) {
+    public stop(opts = { forceDestroy: false }) {
         if (!opts?.forceDestroy && ActiveWidgetStore.getPersistentWidgetId() === this.mockWidget.id) {
             console.log("Skipping destroy - persistent widget");
             return;
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index 5218e4a0bc..fd064bae61 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -43,8 +43,8 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { CHAT_EFFECTS } from "../../effects";
 import { containsEmoji } from "../../effects/utils";
 import dis from "../../dispatcher/dispatcher";
-import {tryTransformPermalinkToLocalHref} from "../../utils/permalinks/Permalinks";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { tryTransformPermalinkToLocalHref } from "../../utils/permalinks/Permalinks";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 // TODO: Purge this from the universe
 
@@ -136,13 +136,13 @@ export class StopGapWidgetDriver extends WidgetDriver {
             if (eventType === EventType.RoomMessage) {
                 CHAT_EFFECTS.forEach((effect) => {
                     if (containsEmoji(content, effect.emojis)) {
-                        dis.dispatch({action: `effects.${effect.command}`});
+                        dis.dispatch({ action: `effects.${effect.command}` });
                     }
                 });
             }
         }
 
-        return {roomId, eventId: r.event_id};
+        return { roomId, eventId: r.event_id };
     }
 
     public async readRoomEvents(eventType: string, msgtype: string | undefined, limit: number): Promise<object[]> {
@@ -199,13 +199,13 @@ export class StopGapWidgetDriver extends WidgetDriver {
         };
 
         if (oidcState === OIDCState.Denied) {
-            return observer.update({state: OpenIDRequestState.Blocked});
+            return observer.update({ state: OpenIDRequestState.Blocked });
         }
         if (oidcState === OIDCState.Allowed) {
-            return observer.update({state: OpenIDRequestState.Allowed, token: await getToken()});
+            return observer.update({ state: OpenIDRequestState.Allowed, token: await getToken() });
         }
 
-        observer.update({state: OpenIDRequestState.PendingUserConfirmation});
+        observer.update({ state: OpenIDRequestState.PendingUserConfirmation });
 
         Modal.createTrackedDialog("OpenID widget permissions", '', WidgetOpenIDPermissionsDialog, {
             widget: this.forWidget,
@@ -214,10 +214,10 @@ export class StopGapWidgetDriver extends WidgetDriver {
 
             onFinished: async (confirm) => {
                 if (!confirm) {
-                    return observer.update({state: OpenIDRequestState.Blocked});
+                    return observer.update({ state: OpenIDRequestState.Blocked });
                 }
 
-                return observer.update({state: OpenIDRequestState.Allowed, token: await getToken()});
+                return observer.update({ state: OpenIDRequestState.Allowed, token: await getToken() });
             },
         });
     }
diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts
index b74da98c9c..5d427a0f1a 100644
--- a/src/stores/widgets/WidgetLayoutStore.ts
+++ b/src/stores/widgets/WidgetLayoutStore.ts
@@ -425,7 +425,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         const allWidgets = this.getAllWidgets(room);
         if (!allWidgets.some(([w])=> w.id === widget.id)) return; // invalid
         this.updateUserLayout(room, {
-            [widget.id]: {container: toContainer},
+            [widget.id]: { container: toContainer },
         });
     }
 
@@ -436,9 +436,9 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
 
     public copyLayoutToRoom(room: Room) {
         const allWidgets = this.getAllWidgets(room);
-        const evContent: ILayoutStateEvent = {widgets: {}};
+        const evContent: ILayoutStateEvent = { widgets: {} };
         for (const [widget, container] of allWidgets) {
-            evContent.widgets[widget.id] = {container};
+            evContent.widgets[widget.id] = { container };
             if (container === Container.Top) {
                 const containerWidgets = this.getContainerWidgets(room, container);
                 const idx = containerWidgets.findIndex(w => w.id === widget.id);
diff --git a/src/theme.js b/src/theme.js
index 40fa291cfc..c74cb9d487 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {_t} from "./languageHandler";
+import { _t } from "./languageHandler";
 
 export const DEFAULT_THEME = "light";
 import Tinter from "./Tinter";
@@ -29,7 +29,7 @@ export function enumerateThemes() {
     };
     const customThemes = SettingsStore.getValue("custom_themes");
     const customThemeNames = {};
-    for (const {name} of customThemes) {
+    for (const { name } of customThemes) {
         customThemeNames[`custom-${name}`] = name;
     }
     return Object.assign({}, customThemeNames, BUILTIN_THEMES);
@@ -93,7 +93,7 @@ function generateCustomFontFaceCSS(faces) {
 }
 
 function setCustomThemeVars(customTheme) {
-    const {style} = document.body;
+    const { style } = document.body;
 
     function setCSSColorVariable(name, hexColor, doPct = true) {
         style.setProperty(`--${name}`, hexColor);
@@ -117,7 +117,7 @@ function setCustomThemeVars(customTheme) {
         }
     }
     if (customTheme.fonts) {
-        const {fonts} = customTheme;
+        const { fonts } = customTheme;
         if (fonts.faces) {
             const css = generateCustomFontFaceCSS(fonts.faces);
             const style = document.createElement("style");
diff --git a/src/toasts/ServerLimitToast.tsx b/src/toasts/ServerLimitToast.tsx
index 36de6f04e0..f915077bf4 100644
--- a/src/toasts/ServerLimitToast.tsx
+++ b/src/toasts/ServerLimitToast.tsx
@@ -19,7 +19,7 @@ import React from "react";
 import { _t, _td } from "../languageHandler";
 import GenericToast from "../components/views/toasts/GenericToast";
 import ToastStore from "../stores/ToastStore";
-import {messageForResourceLimitError} from "../utils/ErrorUtils";
+import { messageForResourceLimitError } from "../utils/ErrorUtils";
 
 const TOAST_KEY = "serverlimit";
 
@@ -40,7 +40,7 @@ export const showToast = (limitType: string, onHideToast: () => void, adminConta
             description: <React.Fragment>{errorText} {contactText}</React.Fragment>,
             acceptLabel: _t("Ok"),
             onAccept: () => {
-                hideToast()
+                hideToast();
                 if (onHideToast) onHideToast();
             },
         },
diff --git a/src/utils/AutoDiscoveryUtils.tsx b/src/utils/AutoDiscoveryUtils.tsx
index e3a7fd2d0b..6c0c8b2e13 100644
--- a/src/utils/AutoDiscoveryUtils.tsx
+++ b/src/utils/AutoDiscoveryUtils.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React, { ReactNode } from 'react';
-import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
-import {_t, _td, newTranslatableError} from "../languageHandler";
-import {makeType} from "./TypeUtils";
+import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
+import { _t, _td, newTranslatableError } from "../languageHandler";
+import { makeType } from "./TypeUtils";
 import SdkConfig from '../SdkConfig';
 
 const LIVELINESS_DISCOVERY_ERRORS: string[] = [
diff --git a/src/utils/DMRoomMap.ts b/src/utils/DMRoomMap.ts
index 3e554f145d..50f849b2ba 100644
--- a/src/utils/DMRoomMap.ts
+++ b/src/utils/DMRoomMap.ts
@@ -86,7 +86,7 @@ export default class DMRoomMap {
             this.userToRooms = null;
             this.roomToUser = null;
         }
-    }
+    };
 
     /**
      * some client bug somewhere is causing some DMs to be marked
@@ -103,7 +103,7 @@ export default class DMRoomMap {
                 if (room) {
                     const userId = room.guessDMUserId();
                     if (userId && userId !== myUserId) {
-                        return {userId, roomId};
+                        return { userId, roomId };
                     }
                 }
             }).filter((ids) => !!ids); //filter out
@@ -116,7 +116,7 @@ export default class DMRoomMap {
                 return !guessedUserIdsThatChanged
                     .some((ids) => ids.roomId === roomId);
             });
-            guessedUserIdsThatChanged.forEach(({userId, roomId}) => {
+            guessedUserIdsThatChanged.forEach(({ userId, roomId }) => {
                 const roomIds = userToRooms[userId];
                 if (!roomIds) {
                     userToRooms[userId] = [roomId];
@@ -181,7 +181,7 @@ export default class DMRoomMap {
     public getUniqueRoomsWithIndividuals(): {[userId: string]: Room} {
         if (!this.roomToUser) return {}; // No rooms means no map.
         return Object.keys(this.roomToUser)
-            .map(r => ({userId: this.getUserIdForRoomId(r), room: this.matrixClient.getRoom(r)}))
+            .map(r => ({ userId: this.getUserIdForRoomId(r), room: this.matrixClient.getRoom(r) }))
             .filter(r => r.userId && r.room && r.room.getInvitedAndJoinedMemberCount() === 2)
             .reduce((obj, r) => (obj[r.userId] = r.room) && obj, {});
     }
diff --git a/src/utils/DecryptFile.ts b/src/utils/DecryptFile.ts
index d073393170..e66db4ffb2 100644
--- a/src/utils/DecryptFile.ts
+++ b/src/utils/DecryptFile.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 // Pull in the encryption lib so that we can decrypt attachments.
 import encrypt from 'browser-encrypt-attachment';
-import {mediaFromContent} from "../customisations/Media";
+import { mediaFromContent } from "../customisations/Media";
 import { IEncryptedFile } from "../customisations/models/IMediaEventContent";
 import { getBlobSafeMimeType } from "./blobs";
 
@@ -29,7 +29,7 @@ import { getBlobSafeMimeType } from "./blobs";
  * @returns {Promise<Blob>} Resolves to a Blob of the file.
  */
 export function decryptFile(file: IEncryptedFile): Promise<Blob> {
-    const media = mediaFromContent({file});
+    const media = mediaFromContent({ file });
     // Download the encrypted file as an array buffer.
     return media.downloadSource().then((response) => {
         return response.arrayBuffer();
@@ -47,6 +47,6 @@ export function decryptFile(file: IEncryptedFile): Promise<Blob> {
         let mimetype = file.mimetype ? file.mimetype.split(";")[0].trim() : '';
         mimetype = getBlobSafeMimeType(mimetype);
 
-        return new Blob([dataArray], {type: mimetype});
+        return new Blob([dataArray], { type: mimetype });
     });
 }
diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts
index 3d9c60d9cd..1a467b157f 100644
--- a/src/utils/EventUtils.ts
+++ b/src/utils/EventUtils.ts
@@ -53,7 +53,7 @@ export function canEditContent(mxEvent: MatrixEvent): boolean {
         return false;
     }
     const content = mxEvent.getOriginalContent();
-    const {msgtype} = content;
+    const { msgtype } = content;
     return (msgtype === "m.text" || msgtype === "m.emote") &&
         content.body && typeof content.body === 'string' &&
         mxEvent.getSender() === MatrixClientPeg.get().getUserId();
diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js
index df11b76ae4..accb8f4280 100644
--- a/src/utils/FontManager.js
+++ b/src/utils/FontManager.js
@@ -47,7 +47,7 @@ function safariVersionCheck(ua) {
 async function isColrFontSupported() {
     console.log("Checking for COLR support");
 
-    const {userAgent} = navigator;
+    const { userAgent } = navigator;
     // Firefox has supported COLR fonts since version 26
     // but doesn't support the check below without
     // "Extract canvas data" permissions
diff --git a/src/utils/HostingLink.js b/src/utils/HostingLink.js
index 580ed00de5..ff7b0c221c 100644
--- a/src/utils/HostingLink.js
+++ b/src/utils/HostingLink.js
@@ -18,7 +18,7 @@ import url from 'url';
 import qs from 'qs';
 
 import SdkConfig from '../SdkConfig';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 
 export function getHostingLink(campaign) {
     const hostingLink = SdkConfig.get().hosting_signup_link;
diff --git a/src/utils/IdentityServerUtils.ts b/src/utils/IdentityServerUtils.ts
index 2476adca19..47226a1727 100644
--- a/src/utils/IdentityServerUtils.ts
+++ b/src/utils/IdentityServerUtils.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
 
 import SdkConfig from '../SdkConfig';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 
 export function getDefaultIdentityServerUrl(): string {
     return SdkConfig.get()['validated_server_config']['isUrl'];
diff --git a/src/utils/KeyVerificationStateObserver.js b/src/utils/KeyVerificationStateObserver.js
index a29d2ea1aa..023cdf3a75 100644
--- a/src/utils/KeyVerificationStateObserver.js
+++ b/src/utils/KeyVerificationStateObserver.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import { _t } from '../languageHandler';
 
 export function getNameForEventRoom(userId, roomId) {
@@ -27,7 +27,7 @@ export function getNameForEventRoom(userId, roomId) {
 export function userLabelForEventRoom(userId, roomId) {
     const name = getNameForEventRoom(userId, roomId);
     if (name !== userId) {
-        return _t("%(name)s (%(userId)s)", {name, userId});
+        return _t("%(name)s (%(userId)s)", { name, userId });
     } else {
         return userId;
     }
diff --git a/src/utils/MegolmExportEncryption.js b/src/utils/MegolmExportEncryption.js
index ae6b2999fa..06f09e7047 100644
--- a/src/utils/MegolmExportEncryption.js
+++ b/src/utils/MegolmExportEncryption.js
@@ -81,7 +81,7 @@ export async function decryptMegolmKeyFile(data, password) {
     let isValid;
     try {
         isValid = await subtleCrypto.verify(
-            {name: 'HMAC'},
+            { name: 'HMAC' },
             hmacKey,
             hmac,
             toVerify,
@@ -112,7 +112,6 @@ export async function decryptMegolmKeyFile(data, password) {
     return new TextDecoder().decode(new Uint8Array(plaintext));
 }
 
-
 /**
  * Encrypt a megolm key file
  *
@@ -174,7 +173,7 @@ export async function encryptMegolmKeyFile(data, password, options) {
     let hmac;
     try {
         hmac = await subtleCrypto.sign(
-            {name: 'HMAC'},
+            { name: 'HMAC' },
             hmacKey,
             toSign,
         );
@@ -182,7 +181,6 @@ export async function encryptMegolmKeyFile(data, password, options) {
         throw friendlyError('subtleCrypto.sign failed: ' + e, cryptoFailMsg());
     }
 
-
     const hmacArray = new Uint8Array(hmac);
     resultBuffer.set(hmacArray, idx);
     return packMegolmKeyFile(resultBuffer);
@@ -204,7 +202,7 @@ async function deriveKeys(salt, iterations, password) {
         key = await subtleCrypto.importKey(
             'raw',
             new TextEncoder().encode(password),
-            {name: 'PBKDF2'},
+            { name: 'PBKDF2' },
             false,
             ['deriveBits'],
         );
@@ -237,7 +235,7 @@ async function deriveKeys(salt, iterations, password) {
     const aesProm = subtleCrypto.importKey(
         'raw',
         aesKey,
-        {name: 'AES-CTR'},
+        { name: 'AES-CTR' },
         false,
         ['encrypt', 'decrypt'],
     ).catch((e) => {
@@ -249,7 +247,7 @@ async function deriveKeys(salt, iterations, password) {
         hmacKey,
         {
             name: 'HMAC',
-            hash: {name: 'SHA-256'},
+            hash: { name: 'SHA-256' },
         },
         false,
         ['sign', 'verify'],
diff --git a/src/utils/MessageDiffUtils.tsx b/src/utils/MessageDiffUtils.tsx
index 5ee9970ec2..020a7763cf 100644
--- a/src/utils/MessageDiffUtils.tsx
+++ b/src/utils/MessageDiffUtils.tsx
@@ -147,7 +147,7 @@ function stringAsTextNode(string: string): Text {
 }
 
 function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatch: DiffMatchPatch): void {
-    const {refNode, refParentNode} = findRefNodes(originalRootNode, diff.route);
+    const { refNode, refParentNode } = findRefNodes(originalRootNode, diff.route);
     switch (diff.action) {
         case "replaceElement": {
             const container = document.createElement("span");
diff --git a/src/utils/MultiInviter.ts b/src/utils/MultiInviter.ts
index f6a994484e..4e66d4a99f 100644
--- a/src/utils/MultiInviter.ts
+++ b/src/utils/MultiInviter.ts
@@ -184,7 +184,7 @@ export default class MultiInviter {
                     fatal = true;
                     errorText = _t('You do not have permission to invite people to this room.');
                 } else if (err.errcode === "RIOT.ALREADY_IN_ROOM") {
-                    errorText = _t("User %(userId)s is already in the room", {userId: address});
+                    errorText = _t("User %(userId)s is already in the room", { userId: address });
                 } else if (err.errcode === 'M_LIMIT_EXCEEDED') {
                     // we're being throttled so wait a bit & try again
                     setTimeout(() => {
@@ -192,9 +192,9 @@ export default class MultiInviter {
                     }, 5000);
                     return;
                 } else if (['M_NOT_FOUND', 'M_USER_NOT_FOUND'].includes(err.errcode)) {
-                    errorText = _t("User %(user_id)s does not exist", {user_id: address});
+                    errorText = _t("User %(user_id)s does not exist", { user_id: address });
                 } else if (err.errcode === 'M_PROFILE_UNDISCLOSED') {
-                    errorText = _t("User %(user_id)s may or may not exist", {user_id: address});
+                    errorText = _t("User %(user_id)s may or may not exist", { user_id: address });
                 } else if (err.errcode === 'M_PROFILE_NOT_FOUND' && !ignoreProfile) {
                     // Invite without the profile check
                     console.warn(`User ${address} does not have a profile - inviting anyways automatically`);
diff --git a/src/utils/PasswordScorer.ts b/src/utils/PasswordScorer.ts
index d8f3b0fb96..e3c30c1680 100644
--- a/src/utils/PasswordScorer.ts
+++ b/src/utils/PasswordScorer.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import zxcvbn from 'zxcvbn';
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import { _t, _td } from '../languageHandler';
 
 const ZXCVBN_USER_INPUTS = [
diff --git a/src/utils/ShieldUtils.ts b/src/utils/ShieldUtils.ts
index c855b81bf8..296c68fa09 100644
--- a/src/utils/ShieldUtils.ts
+++ b/src/utils/ShieldUtils.ts
@@ -26,7 +26,7 @@ export enum E2EStatus {
 }
 
 export async function shieldStatusForRoom(client: MatrixClient, room: Room): Promise<E2EStatus> {
-    const members = (await room.getEncryptionTargetMembers()).map(({userId}) => userId);
+    const members = (await room.getEncryptionTargetMembers()).map(({ userId }) => userId);
     const inDMMap = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId);
 
     const verified: string[] = [];
@@ -53,7 +53,7 @@ export async function shieldStatusForRoom(client: MatrixClient, room: Room): Pro
     const targets = includeUser ? [...verified, client.getUserId()] : verified;
     for (const userId of targets) {
         const devices = client.getStoredDevicesForUser(userId);
-        const anyDeviceNotVerified = devices.some(({deviceId}) => {
+        const anyDeviceNotVerified = devices.some(({ deviceId }) => {
             return !client.checkDeviceTrust(userId, deviceId).isVerified();
         });
         if (anyDeviceNotVerified) {
diff --git a/src/utils/Singleflight.ts b/src/utils/Singleflight.ts
index c2a564ea3e..07d82efa3e 100644
--- a/src/utils/Singleflight.ts
+++ b/src/utils/Singleflight.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {EnhancedMap} from "./maps";
+import { EnhancedMap } from "./maps";
 
 // Inspired by https://pkg.go.dev/golang.org/x/sync/singleflight
 
diff --git a/src/utils/StorageManager.ts b/src/utils/StorageManager.ts
index 883c032771..89f463de57 100644
--- a/src/utils/StorageManager.ts
+++ b/src/utils/StorageManager.ts
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {LocalStorageCryptoStore} from 'matrix-js-sdk/src/crypto/store/localStorage-crypto-store';
+import { LocalStorageCryptoStore } from 'matrix-js-sdk/src/crypto/store/localStorage-crypto-store';
 import Analytics from '../Analytics';
-import {IndexedDBStore} from "matrix-js-sdk/src/store/indexeddb";
-import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
+import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
+import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 
 const localStorage = window.localStorage;
 
diff --git a/src/utils/Timer.ts b/src/utils/Timer.ts
index 9760631d09..2317ed934b 100644
--- a/src/utils/Timer.ts
+++ b/src/utils/Timer.ts
@@ -57,7 +57,7 @@ export default class Timer {
             const delta = this.timeout - elapsed;
             this.timerHandle = setTimeout(this.onTimeout, delta);
         }
-    }
+    };
 
     changeTimeout(timeout: number) {
         if (timeout === this.timeout) {
diff --git a/src/utils/WellKnownUtils.ts b/src/utils/WellKnownUtils.ts
index 30759cafc1..59307d642e 100644
--- a/src/utils/WellKnownUtils.ts
+++ b/src/utils/WellKnownUtils.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 
 const CALL_BEHAVIOUR_WK_KEY = "io.element.call_behaviour";
 const E2EE_WK_KEY = "io.element.e2ee";
@@ -43,7 +43,7 @@ export function getE2EEWellKnown(): IE2EEWellKnown {
         return clientWellKnown[E2EE_WK_KEY];
     }
     if (clientWellKnown && clientWellKnown[E2EE_WK_KEY_DEPRECATED]) {
-        return clientWellKnown[E2EE_WK_KEY_DEPRECATED]
+        return clientWellKnown[E2EE_WK_KEY_DEPRECATED];
     }
     return null;
 }
diff --git a/src/utils/Whenable.ts b/src/utils/Whenable.ts
index 49f2571965..a83d7ca00c 100644
--- a/src/utils/Whenable.ts
+++ b/src/utils/Whenable.ts
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import { IDestroyable } from "./IDestroyable";
 import { arrayFastClone } from "./arrays";
 
@@ -36,7 +35,7 @@ export abstract class Whenable<T> implements IDestroyable {
      * @returns This.
      */
     public when(condition: T, fn: WhenFn<T>): Whenable<T> {
-        this.listeners.push({condition, fn});
+        this.listeners.push({ condition, fn });
         return this;
     }
 
@@ -59,7 +58,7 @@ export abstract class Whenable<T> implements IDestroyable {
      * @returns This.
      */
     public whenAnything(fn: WhenFn<T>): Whenable<T> {
-        this.listeners.push({condition: null, fn});
+        this.listeners.push({ condition: null, fn });
         return this;
     }
 
diff --git a/src/utils/WidgetUtils.ts b/src/utils/WidgetUtils.ts
index 926278a20a..222837511d 100644
--- a/src/utils/WidgetUtils.ts
+++ b/src/utils/WidgetUtils.ts
@@ -408,7 +408,7 @@ export default class WidgetUtils {
             WidgetType.INTEGRATION_MANAGER,
             uiUrl,
             "Integration Manager: " + name,
-            {"api_url": apiUrl},
+            { "api_url": apiUrl },
         );
     }
 
diff --git a/src/utils/humanize.ts b/src/utils/humanize.ts
index 55bdbf760b..978d17424b 100644
--- a/src/utils/humanize.ts
+++ b/src/utils/humanize.ts
@@ -39,19 +39,19 @@ export function humanizeTime(timeMillis: number): string {
     if (msAgo >= 0) { // Past
         if (msAgo <= MILLISECONDS_RECENT) return _t("a few seconds ago");
         if (msAgo <= MILLISECONDS_1_MIN) return _t("about a minute ago");
-        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes ago", {num: minutes});
+        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes ago", { num: minutes });
         if (minutes <= MINUTES_1_HOUR) return _t("about an hour ago");
-        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours ago", {num: hours});
+        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours ago", { num: hours });
         if (hours <= HOURS_1_DAY) return _t("about a day ago");
-        return _t("%(num)s days ago", {num: days});
+        return _t("%(num)s days ago", { num: days });
     } else { // Future
         msAgo = Math.abs(msAgo);
         if (msAgo <= MILLISECONDS_RECENT) return _t("a few seconds from now");
         if (msAgo <= MILLISECONDS_1_MIN) return _t("about a minute from now");
-        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes from now", {num: minutes});
+        if (minutes <= MINUTES_UNDER_1_HOUR) return _t("%(num)s minutes from now", { num: minutes });
         if (minutes <= MINUTES_1_HOUR) return _t("about an hour from now");
-        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours from now", {num: hours});
+        if (hours <= HOURS_UNDER_1_DAY) return _t("%(num)s hours from now", { num: hours });
         if (hours <= HOURS_1_DAY) return _t("about a day from now");
-        return _t("%(num)s days from now", {num: days});
+        return _t("%(num)s days from now", { num: days });
     }
 }
diff --git a/src/utils/maps.ts b/src/utils/maps.ts
index 57d84bd33f..542e99a64d 100644
--- a/src/utils/maps.ts
+++ b/src/utils/maps.ts
@@ -30,7 +30,7 @@ export function mapDiff<K, V>(a: Map<K, V>, b: Map<K, V>): { changed: K[], added
     const possibleChanges = arrayUnion(aKeys, bKeys);
     const changes = possibleChanges.filter(k => a.get(k) !== b.get(k));
 
-    return {changed: changes, added: keyDiff.added, removed: keyDiff.removed};
+    return { changed: changes, added: keyDiff.added, removed: keyDiff.removed };
 }
 
 /**
diff --git a/src/utils/membership.ts b/src/utils/membership.ts
index 80f04dfe76..f980d1dcd6 100644
--- a/src/utils/membership.ts
+++ b/src/utils/membership.ts
@@ -102,7 +102,7 @@ export async function leaveRoomBehaviour(roomId: string) {
         } catch (e) {
             if (e && e.data && e.data.errcode) {
                 const message = e.data.error || _t("Unexpected server error trying to leave the room");
-                results[roomId] = Object.assign(new Error(message), {errcode: e.data.errcode});
+                results[roomId] = Object.assign(new Error(message), { errcode: e.data.errcode });
             } else {
                 results[roomId] = e || new Error("Failed to leave room for unknown causes");
             }
@@ -140,6 +140,6 @@ export async function leaveRoomBehaviour(roomId: string) {
     }
 
     if (RoomViewStore.getRoomId() === roomId) {
-        dis.dispatch({action: 'view_home_page'});
+        dis.dispatch({ action: 'view_home_page' });
     }
 }
diff --git a/src/utils/objects.ts b/src/utils/objects.ts
index 2c9361beba..561e68e8c5 100644
--- a/src/utils/objects.ts
+++ b/src/utils/objects.ts
@@ -114,7 +114,7 @@ export function objectDiff<O extends {}>(a: O, b: O): Diff<keyof O> {
     const possibleChanges = arrayUnion(aKeys, bKeys);
     const changes = possibleChanges.filter(k => a[k] !== b[k]);
 
-    return {changed: changes, added: keyDiff.added, removed: keyDiff.removed};
+    return { changed: changes, added: keyDiff.added, removed: keyDiff.removed };
 }
 
 /**
diff --git a/src/utils/permalinks/ElementPermalinkConstructor.ts b/src/utils/permalinks/ElementPermalinkConstructor.ts
index cd7f2b9d2c..2068a905c3 100644
--- a/src/utils/permalinks/ElementPermalinkConstructor.ts
+++ b/src/utils/permalinks/ElementPermalinkConstructor.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
+import PermalinkConstructor, { PermalinkParts } from "./PermalinkConstructor";
 
 /**
  * Generates permalinks that self-reference the running webapp
diff --git a/src/utils/permalinks/Permalinks.ts b/src/utils/permalinks/Permalinks.ts
index c2f95defd6..cff7ebc08b 100644
--- a/src/utils/permalinks/Permalinks.ts
+++ b/src/utils/permalinks/Permalinks.ts
@@ -16,14 +16,14 @@ limitations under the License.
 
 import isIp from "is-ip";
 import * as utils from "matrix-js-sdk/src/utils";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import {MatrixClientPeg} from "../../MatrixClientPeg";
-import SpecPermalinkConstructor, {baseUrl as matrixtoBaseUrl} from "./SpecPermalinkConstructor";
-import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import SpecPermalinkConstructor, { baseUrl as matrixtoBaseUrl } from "./SpecPermalinkConstructor";
+import PermalinkConstructor, { PermalinkParts } from "./PermalinkConstructor";
 import ElementPermalinkConstructor from "./ElementPermalinkConstructor";
 import matrixLinkify from "../../linkify-matrix";
 import SdkConfig from "../../SdkConfig";
@@ -32,7 +32,6 @@ import SdkConfig from "../../SdkConfig";
 // to add to permalinks. The servers are appended as ?via=example.org
 const MAX_SERVER_CANDIDATES = 3;
 
-
 // Permalinks can have servers appended to them so that the user
 // receiving them can have a fighting chance at joining the room.
 // These servers are called "candidates" at this point because
@@ -172,7 +171,7 @@ export class RoomPermalinkCreator {
                 this.updateServerCandidates();
                 return;
         }
-    }
+    };
 
     private onMembership = (evt: MatrixEvent, member: RoomMember, oldMembership: string) => {
         const userId = member.userId;
@@ -189,7 +188,7 @@ export class RoomPermalinkCreator {
 
         this.updateHighestPlUser();
         this.updateServerCandidates();
-    }
+    };
 
     private updateHighestPlUser() {
         const plEvent = this.room.currentState.getStateEvents("m.room.power_levels", "");
diff --git a/src/utils/permalinks/SpecPermalinkConstructor.ts b/src/utils/permalinks/SpecPermalinkConstructor.ts
index d8b3633bb3..a24df40f16 100644
--- a/src/utils/permalinks/SpecPermalinkConstructor.ts
+++ b/src/utils/permalinks/SpecPermalinkConstructor.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PermalinkConstructor, {PermalinkParts} from "./PermalinkConstructor";
+import PermalinkConstructor, { PermalinkParts } from "./PermalinkConstructor";
 
 export const host = "matrix.to";
 export const baseUrl = `https://${host}`;
diff --git a/src/utils/pillify.js b/src/utils/pillify.js
index 72e0e5a4db..489ba5d504 100644
--- a/src/utils/pillify.js
+++ b/src/utils/pillify.js
@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from 'react-dom';
-import {MatrixClientPeg} from '../MatrixClientPeg';
+import { MatrixClientPeg } from '../MatrixClientPeg';
 import SettingsStore from "../settings/SettingsStore";
-import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
 import Pill from "../components/views/elements/Pill";
 import { parseAppLocalLink } from "./permalinks/Permalinks";
 
diff --git a/src/utils/promise.ts b/src/utils/promise.ts
index 4ebbb27141..902d3c7e31 100644
--- a/src/utils/promise.ts
+++ b/src/utils/promise.ts
@@ -48,7 +48,7 @@ export function defer<T>(): IDeferred<T> {
         reject = _reject;
     });
 
-    return {resolve, reject, promise};
+    return { resolve, reject, promise };
 }
 
 // Helper method to retry a Promise a given number of times or until a predicate fails
diff --git a/src/utils/space.tsx b/src/utils/space.tsx
index c14dc988d2..38f6e348d7 100644
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@@ -15,17 +15,17 @@ limitations under the License.
 */
 
 import React from "react";
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixClient} from "matrix-js-sdk/src/client";
-import {EventType} from "matrix-js-sdk/src/@types/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 
-import {calculateRoomVia} from "../utils/permalinks/Permalinks";
+import { calculateRoomVia } from "../utils/permalinks/Permalinks";
 import Modal from "../Modal";
 import SpaceSettingsDialog from "../components/views/dialogs/SpaceSettingsDialog";
 import AddExistingToSpaceDialog from "../components/views/dialogs/AddExistingToSpaceDialog";
 import CreateRoomDialog from "../components/views/dialogs/CreateRoomDialog";
-import createRoom, {IOpts} from "../createRoom";
-import {_t} from "../languageHandler";
+import createRoom, { IOpts } from "../createRoom";
+import { _t } from "../languageHandler";
 import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
 import { showRoomInviteDialog } from "../RoomInvite";
diff --git a/src/utils/strings.ts b/src/utils/strings.ts
index beb9f31ddd..6d12c88940 100644
--- a/src/utils/strings.ts
+++ b/src/utils/strings.ts
@@ -74,7 +74,6 @@ export function copyNode(ref: Element): boolean {
     return document.execCommand('copy');
 }
 
-
 const collator = new Intl.Collator();
 /**
  * Performant language-sensitive string comparison
diff --git a/src/verification.ts b/src/verification.ts
index acd9f6d2b2..22b62461a1 100644
--- a/src/verification.ts
+++ b/src/verification.ts
@@ -26,7 +26,7 @@ import { accessSecretStorage } from './SecurityManager';
 import { verificationMethods } from 'matrix-js-sdk/src/crypto';
 import { Action } from './dispatcher/actions';
 import UntrustedDeviceDialog from "./components/views/dialogs/UntrustedDeviceDialog";
-import {IDevice} from "./components/views/right_panel/UserInfo";
+import { IDevice } from "./components/views/right_panel/UserInfo";
 
 async function enable4SIfNeeded() {
     const cli = MatrixClientPeg.get();
@@ -45,7 +45,7 @@ async function enable4SIfNeeded() {
 export async function verifyDevice(user: User, device: IDevice) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
-        dis.dispatch({action: 'require_registration'});
+        dis.dispatch({ action: 'require_registration' });
         return;
     }
     // if cross-signing is not explicitly disabled, check if it should be enabled first.
@@ -68,7 +68,7 @@ export async function verifyDevice(user: User, device: IDevice) {
                 dis.dispatch({
                     action: Action.SetRightPanelPhase,
                     phase: RightPanelPhases.EncryptionPanel,
-                    refireParams: {member: user, verificationRequestPromise},
+                    refireParams: { member: user, verificationRequestPromise },
                 });
             } else if (action === "legacy") {
                 const ManualDeviceKeyVerificationDialog =
@@ -88,7 +88,7 @@ export async function verifyDevice(user: User, device: IDevice) {
 export async function legacyVerifyUser(user: User) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
-        dis.dispatch({action: 'require_registration'});
+        dis.dispatch({ action: 'require_registration' });
         return;
     }
     // if cross-signing is not explicitly disabled, check if it should be enabled first.
@@ -101,14 +101,14 @@ export async function legacyVerifyUser(user: User) {
     dis.dispatch({
         action: Action.SetRightPanelPhase,
         phase: RightPanelPhases.EncryptionPanel,
-        refireParams: {member: user, verificationRequestPromise},
+        refireParams: { member: user, verificationRequestPromise },
     });
 }
 
 export async function verifyUser(user: User) {
     const cli = MatrixClientPeg.get();
     if (cli.isGuest()) {
-        dis.dispatch({action: 'require_registration'});
+        dis.dispatch({ action: 'require_registration' });
         return;
     }
     if (!await enable4SIfNeeded()) {
diff --git a/src/voice/PlaybackClock.ts b/src/voice/PlaybackClock.ts
index d6d36e861f..1eee921429 100644
--- a/src/voice/PlaybackClock.ts
+++ b/src/voice/PlaybackClock.ts
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SimpleObservable} from "matrix-widget-api";
-import {IDestroyable} from "../utils/IDestroyable";
+import { SimpleObservable } from "matrix-widget-api";
+import { IDestroyable } from "../utils/IDestroyable";
 
 // Because keeping track of time is sufficiently complicated...
 export class PlaybackClock implements IDestroyable {
diff --git a/src/voice/RecorderWorklet.ts b/src/voice/RecorderWorklet.ts
index 7343d37066..350974f24b 100644
--- a/src/voice/RecorderWorklet.ts
+++ b/src/voice/RecorderWorklet.ts
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {IAmplitudePayload, ITimingPayload, PayloadEvent, WORKLET_NAME} from "./consts";
-import {percentageOf} from "../utils/numbers";
+import { IAmplitudePayload, ITimingPayload, PayloadEvent, WORKLET_NAME } from "./consts";
+import { percentageOf } from "../utils/numbers";
 
 // from AudioWorkletGlobalScope: https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope
 declare const currentTime: number;
@@ -53,7 +53,7 @@ class MxVoiceWorklet extends AudioWorkletProcessor {
         }
 
         // We mostly use this worklet to fire regular clock updates through to components
-        this.port.postMessage(<ITimingPayload>{ev: PayloadEvent.Timekeep, timeSeconds: currentTime});
+        this.port.postMessage(<ITimingPayload>{ ev: PayloadEvent.Timekeep, timeSeconds: currentTime });
 
         // We're supposed to return false when we're "done" with the audio clip, but seeing as
         // we are acting as a passive processor we are never truly "done". The browser will clean
diff --git a/src/voice/VoiceRecording.ts b/src/voice/VoiceRecording.ts
index 2243d49873..8c74516e36 100644
--- a/src/voice/VoiceRecording.ts
+++ b/src/voice/VoiceRecording.ts
@@ -16,17 +16,17 @@ limitations under the License.
 
 import * as Recorder from 'opus-recorder';
 import encoderPath from 'opus-recorder/dist/encoderWorker.min.js';
-import {MatrixClient} from "matrix-js-sdk/src/client";
+import { MatrixClient } from "matrix-js-sdk/src/client";
 import MediaDeviceHandler from "../MediaDeviceHandler";
-import {SimpleObservable} from "matrix-widget-api";
-import {clamp, percentageOf, percentageWithin} from "../utils/numbers";
+import { SimpleObservable } from "matrix-widget-api";
+import { clamp, percentageOf, percentageWithin } from "../utils/numbers";
 import EventEmitter from "events";
-import {IDestroyable} from "../utils/IDestroyable";
-import {Singleflight} from "../utils/Singleflight";
-import {PayloadEvent, WORKLET_NAME} from "./consts";
-import {UPDATE_EVENT} from "../stores/AsyncStore";
-import {Playback} from "./Playback";
-import {createAudioContext} from "./compat";
+import { IDestroyable } from "../utils/IDestroyable";
+import { Singleflight } from "../utils/Singleflight";
+import { PayloadEvent, WORKLET_NAME } from "./consts";
+import { UPDATE_EVENT } from "../stores/AsyncStore";
+import { Playback } from "./Playback";
+import { createAudioContext } from "./compat";
 import { IEncryptedFile } from "matrix-js-sdk/src/@types/event";
 import { uploadFile } from "../ContentMessages";
 
@@ -283,7 +283,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
             this.stop();
         } else if (secondsLeft <= TARGET_WARN_TIME_LEFT) {
             Singleflight.for(this, "ending_soon").do(() => {
-                this.emit(RecordingState.EndingSoon, {secondsLeft});
+                this.emit(RecordingState.EndingSoon, { secondsLeft });
                 return Singleflight.Void;
             });
         }
diff --git a/src/voice/compat.ts b/src/voice/compat.ts
index 316d779e28..bd702c798a 100644
--- a/src/voice/compat.ts
+++ b/src/voice/compat.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SAMPLE_RATE} from "./VoiceRecording";
+import { SAMPLE_RATE } from "./VoiceRecording";
 
 // @ts-ignore - we know that this is not a module. We're looking for a path.
 import decoderWasmPath from 'opus-recorder/dist/decoderWorker.min.wasm';
@@ -57,7 +57,7 @@ export function decodeOgg(audioBuffer: ArrayBuffer): Promise<ArrayBuffer> {
 
         decoderWorker.onmessage = (ev) => {
             if (ev.data === null) { // null == done
-                wavWorker.postMessage({command: 'done'});
+                wavWorker.postMessage({ command: 'done' });
                 return;
             }
 
@@ -70,7 +70,7 @@ export function decodeOgg(audioBuffer: ArrayBuffer): Promise<ArrayBuffer> {
         wavWorker.onmessage = (ev) => {
             if (ev.data.message === 'page') {
                 // The encoding comes through as a single page
-                resolve(new Blob([ev.data.page], {type: "audio/wav"}).arrayBuffer());
+                resolve(new Blob([ev.data.page], { type: "audio/wav" }).arrayBuffer());
             }
         };
 
diff --git a/src/widgets/CapabilityText.tsx b/src/widgets/CapabilityText.tsx
index 05e6c59083..304a340247 100644
--- a/src/widgets/CapabilityText.tsx
+++ b/src/widgets/CapabilityText.tsx
@@ -125,7 +125,7 @@ export class CapabilityText {
         if (eventCap.isState) {
             return !eventCap.keyStr
                 ? _t("with an empty state key")
-                : _t("with state key %(stateKey)s", {stateKey: eventCap.keyStr});
+                : _t("with state key %(stateKey)s", { stateKey: eventCap.keyStr });
         }
         return null; // room messages are handled specially
     }
@@ -134,8 +134,8 @@ export class CapabilityText {
         // First see if we have a super simple line of text to provide back
         if (CapabilityText.simpleCaps[capability]) {
             const textForKind = CapabilityText.simpleCaps[capability];
-            if (textForKind[kind]) return {primary: _t(textForKind[kind])};
-            if (textForKind[GENERIC_WIDGET_KIND]) return {primary: _t(textForKind[GENERIC_WIDGET_KIND])};
+            if (textForKind[kind]) return { primary: _t(textForKind[kind]) };
+            if (textForKind[GENERIC_WIDGET_KIND]) return { primary: _t(textForKind[GENERIC_WIDGET_KIND]) };
 
             // ... we'll fall through to the generic capability processing at the end of this
             // function if we fail to locate a simple string and the capability isn't for an
@@ -215,7 +215,7 @@ export class CapabilityText {
 
         // We don't have enough context to render this capability specially, so we'll present it as-is
         return {
-            primary: _t("The <b>%(capability)s</b> capability", {capability}, {
+            primary: _t("The <b>%(capability)s</b> capability", { capability }, {
                 b: sub => <b>{sub}</b>,
             }),
         };
@@ -348,7 +348,7 @@ export class CapabilityText {
                         });
                     }
                 }
-                return {primary};
+                return { primary };
             }
         }
     }
diff --git a/src/widgets/Jitsi.ts b/src/widgets/Jitsi.ts
index ca8de4468a..e86fd41ed9 100644
--- a/src/widgets/Jitsi.ts
+++ b/src/widgets/Jitsi.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import SdkConfig from "../SdkConfig";
-import {MatrixClientPeg} from "../MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 const JITSI_WK_PROPERTY = "im.vector.riot.jitsi";
 
diff --git a/src/widgets/ManagedHybrid.ts b/src/widgets/ManagedHybrid.ts
index f05df0a6ce..2adb11da62 100644
--- a/src/widgets/ManagedHybrid.ts
+++ b/src/widgets/ManagedHybrid.ts
@@ -36,7 +36,7 @@ function getWidgetBuildUrl(): string {
         return SdkConfig.get().widget_build_url;
     }
     /* eslint-disable-next-line camelcase */
-    return getCallBehaviourWellKnown()?.widget_build_url
+    return getCallBehaviourWellKnown()?.widget_build_url;
 }
 
 export function isManagedHybridWidgetEnabled(): boolean {
diff --git a/test/ScalarAuthClient-test.js b/test/ScalarAuthClient-test.js
index 3435f70932..a597c2cb2e 100644
--- a/test/ScalarAuthClient-test.js
+++ b/test/ScalarAuthClient-test.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import ScalarAuthClient from '../src/ScalarAuthClient';
-import {MatrixClientPeg} from '../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../src/MatrixClientPeg';
 import { stubClient } from './test-utils';
 
 describe('ScalarAuthClient', function() {
diff --git a/test/Terms-test.js b/test/Terms-test.js
index 3835af3ede..58ba688395 100644
--- a/test/Terms-test.js
+++ b/test/Terms-test.js
@@ -18,7 +18,7 @@ import * as Matrix from 'matrix-js-sdk';
 
 import { startTermsFlow, Service } from '../src/Terms';
 import { stubClient } from './test-utils';
-import {MatrixClientPeg} from '../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../src/MatrixClientPeg';
 
 const POLICY_ONE = {
     version: "six",
diff --git a/test/accessibility/RovingTabIndex-test.js b/test/accessibility/RovingTabIndex-test.js
index 7af28043e0..bead5c3158 100644
--- a/test/accessibility/RovingTabIndex-test.js
+++ b/test/accessibility/RovingTabIndex-test.js
@@ -102,7 +102,7 @@ describe("RovingTabIndex", () => {
                 { button1 }
                 { button2 }
                 <RovingTabIndexWrapper>
-                    {({onFocus, isActive, ref}) =>
+                    {({ onFocus, isActive, ref }) =>
                         <button onFocus={onFocus} tabIndex={isActive ? 0 : -1} ref={ref}>.</button>
                     }
                 </RovingTabIndexWrapper>
@@ -119,4 +119,3 @@ describe("RovingTabIndex", () => {
     });
 });
 
-
diff --git a/test/autocomplete/QueryMatcher-test.js b/test/autocomplete/QueryMatcher-test.js
index cae71841d4..72f894c678 100644
--- a/test/autocomplete/QueryMatcher-test.js
+++ b/test/autocomplete/QueryMatcher-test.js
@@ -31,7 +31,7 @@ const NONWORDOBJECTS = [
 
 describe('QueryMatcher', function() {
     it('Returns results by key', function() {
-        const qm = new QueryMatcher(OBJECTS, {keys: ["name"]});
+        const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match('Geri');
 
         expect(results.length).toBe(1);
@@ -39,7 +39,7 @@ describe('QueryMatcher', function() {
     });
 
     it('Returns results by prefix', function() {
-        const qm = new QueryMatcher(OBJECTS, {keys: ["name"]});
+        const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match('Ge');
 
         expect(results.length).toBe(1);
@@ -47,7 +47,7 @@ describe('QueryMatcher', function() {
     });
 
     it('Matches case-insensitive', function() {
-        const qm = new QueryMatcher(OBJECTS, {keys: ["name"]});
+        const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match('geri');
 
         expect(results.length).toBe(1);
@@ -55,7 +55,7 @@ describe('QueryMatcher', function() {
     });
 
     it('Matches ignoring accents', function() {
-        const qm = new QueryMatcher([{name: "Gëri", foo: 46}], {keys: ["name"]});
+        const qm = new QueryMatcher([{ name: "Gëri", foo: 46 }], { keys: ["name"] });
         const results = qm.match('geri');
 
         expect(results.length).toBe(1);
@@ -63,14 +63,13 @@ describe('QueryMatcher', function() {
     });
 
     it('Returns multiple results in order of search string appearance', function() {
-        const qm = new QueryMatcher(OBJECTS, {keys: ["name", "nick"]});
+        const qm = new QueryMatcher(OBJECTS, { keys: ["name", "nick"] });
         const results = qm.match('or');
 
         expect(results.length).toBe(2);
         expect(results[0].name).toBe('Mel C');
         expect(results[1].name).toBe('Victoria');
 
-
         qm.setObjects(OBJECTS.slice().reverse());
         const reverseResults = qm.match('or');
 
@@ -87,7 +86,7 @@ describe('QueryMatcher', function() {
             { name: "b", first: "miss", second: "hit", third: "miss" },
             { name: "c", first: "miss", second: "miss", third: "hit" },
         ];
-        const qm = new QueryMatcher(objects, {keys: ["second", "first", "third"]});
+        const qm = new QueryMatcher(objects, { keys: ["second", "first", "third"] });
         const results = qm.match('hit');
 
         expect(results.length).toBe(3);
@@ -95,7 +94,6 @@ describe('QueryMatcher', function() {
         expect(results[1].name).toBe('a');
         expect(results[2].name).toBe('c');
 
-
         qm.setObjects(objects.slice().reverse());
 
         const reverseResults = qm.match('hit');
@@ -109,14 +107,13 @@ describe('QueryMatcher', function() {
     });
 
     it('Returns results with search string in same place and key in same place in insertion order', function() {
-        const qm = new QueryMatcher(OBJECTS, {keys: ["name"]});
+        const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match('Mel');
 
         expect(results.length).toBe(2);
         expect(results[0].name).toBe('Mel B');
         expect(results[1].name).toBe('Mel C');
 
-
         qm.setObjects(OBJECTS.slice().reverse());
 
         const reverseResults = qm.match('Mel');
@@ -129,9 +126,9 @@ describe('QueryMatcher', function() {
     it('Returns numeric results in correct order (input pos)', function() {
         // regression test for depending on object iteration order
         const qm = new QueryMatcher([
-            {name: "123456badger"},
-            {name: "123456"},
-        ], {keys: ["name"]});
+            { name: "123456badger" },
+            { name: "123456" },
+        ], { keys: ["name"] });
         const results = qm.match('123456');
 
         expect(results.length).toBe(2);
@@ -141,9 +138,9 @@ describe('QueryMatcher', function() {
 
     it('Returns numeric results in correct order (query pos)', function() {
         const qm = new QueryMatcher([
-            {name: "999999123456"},
-            {name: "123456badger"},
-        ], {keys: ["name"]});
+            { name: "999999123456" },
+            { name: "123456badger" },
+        ], { keys: ["name"] });
         const results = qm.match('123456');
 
         expect(results.length).toBe(2);
diff --git a/test/components/structures/GroupView-test.js b/test/components/structures/GroupView-test.js
index ee5d1b6912..2ff1257d32 100644
--- a/test/components/structures/GroupView-test.js
+++ b/test/components/structures/GroupView-test.js
@@ -19,7 +19,7 @@ import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
 
 import MockHttpBackend from 'matrix-mock-request';
-import {MatrixClientPeg} from '../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../src/MatrixClientPeg';
 import sdk from '../../skinned-sdk';
 import Matrix from 'matrix-js-sdk';
 
diff --git a/test/components/structures/auth/Login-test.js b/test/components/structures/auth/Login-test.js
index f39802464f..9def0c8d95 100644
--- a/test/components/structures/auth/Login-test.js
+++ b/test/components/structures/auth/Login-test.js
@@ -19,7 +19,7 @@ import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
 import sdk from '../../../skinned-sdk';
 import SdkConfig from '../../../../src/SdkConfig';
-import {mkServerConfig} from "../../../test-utils";
+import { mkServerConfig } from "../../../test-utils";
 
 const Login = sdk.getComponent(
     'structures.auth.Login',
diff --git a/test/components/structures/auth/Registration-test.js b/test/components/structures/auth/Registration-test.js
index 3e8e887329..e09304962f 100644
--- a/test/components/structures/auth/Registration-test.js
+++ b/test/components/structures/auth/Registration-test.js
@@ -19,7 +19,7 @@ import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
 import sdk from '../../../skinned-sdk';
 import SdkConfig from '../../../../src/SdkConfig';
-import {mkServerConfig} from "../../../test-utils";
+import { mkServerConfig } from "../../../test-utils";
 
 const Registration = sdk.getComponent(
     'structures.auth.Registration',
diff --git a/test/components/stub-component.js b/test/components/stub-component.js
index e242c06707..f98959a573 100644
--- a/test/components/stub-component.js
+++ b/test/components/stub-component.js
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export default function({displayName = "StubComponent", render} = {}) {
+export default function({ displayName = "StubComponent", render } = {}) {
     if (!render) {
         render = function() {
             return <div>{ displayName }</div>;
diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.js b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
index d9e07a2d74..8c16e7f104 100644
--- a/test/components/views/dialogs/AccessSecretStorageDialog-test.js
+++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import sdk from '../../../skinned-sdk';
-import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { stubClient } from '../../../test-utils';
 
 const AccessSecretStorageDialog = sdk.getComponent("dialogs.security.AccessSecretStorageDialog");
diff --git a/test/components/views/dialogs/ForwardDialog-test.js b/test/components/views/dialogs/ForwardDialog-test.js
index dbd50612bb..c5ce330fec 100644
--- a/test/components/views/dialogs/ForwardDialog-test.js
+++ b/test/components/views/dialogs/ForwardDialog-test.js
@@ -17,14 +17,14 @@ limitations under the License.
 import "../../../skinned-sdk";
 
 import React from "react";
-import {configure, mount} from "enzyme";
+import { configure, mount } from "enzyme";
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-import {act} from "react-dom/test-utils";
+import { act } from "react-dom/test-utils";
 
 import * as TestUtils from "../../../test-utils";
-import {MatrixClientPeg} from "../../../../src/MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import {RoomPermalinkCreator} from "../../../../src/utils/permalinks/Permalinks";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import ForwardDialog from "../../../../src/components/views/dialogs/ForwardDialog";
 
 configure({ adapter: new Adapter() });
diff --git a/test/components/views/elements/MemberEventListSummary-test.js b/test/components/views/elements/MemberEventListSummary-test.js
index 95bf206d02..e2d51f13a4 100644
--- a/test/components/views/elements/MemberEventListSummary-test.js
+++ b/test/components/views/elements/MemberEventListSummary-test.js
@@ -90,7 +90,7 @@ describe('MemberEventListSummary', function() {
 
     it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
         ]);
         const props = {
             events: events,
@@ -112,8 +112,8 @@ describe('MemberEventListSummary', function() {
 
     it('renders expanded events if there are less than props.threshold', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
         ]);
         const props = {
             events: events,
@@ -136,9 +136,9 @@ describe('MemberEventListSummary', function() {
 
     it('renders collapsed events if events.length = props.threshold', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
         ]);
         const props = {
             events: events,
@@ -161,20 +161,20 @@ describe('MemberEventListSummary', function() {
 
     it('truncates long join,leave repetitions', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
         ]);
         const props = {
             events: events,
@@ -203,20 +203,20 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_1:some.domain",
                 prevMembership: "leave",
@@ -253,22 +253,22 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_1:some.domain",
                 prevMembership: "leave",
                 membership: "ban",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_1:some.domain", prevMembership: "ban", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "ban", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_1:some.domain",
                 prevMembership: "leave",
@@ -307,10 +307,10 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_1:some.domain",
                 prevMembership: "leave",
@@ -324,10 +324,10 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_2:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_2:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_2:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_2:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_2:some.domain",
                 prevMembership: "leave",
@@ -363,10 +363,10 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {prevMembership: "leave", membership: "join"},
-            {prevMembership: "join", membership: "leave"},
-            {prevMembership: "leave", membership: "join"},
-            {prevMembership: "join", membership: "leave"},
+            { prevMembership: "leave", membership: "join" },
+            { prevMembership: "join", membership: "leave" },
+            { prevMembership: "leave", membership: "join" },
+            { prevMembership: "join", membership: "leave" },
             {
                 prevMembership: "leave",
                 membership: "ban",
@@ -408,20 +408,20 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_1:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             {
                 userId: "@user_1:some.domain",
                 prevMembership: "leave",
                 membership: "ban",
                 senderId: "@some_other_user:some.domain",
             },
-            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
-            {userId: "@user_2:some.domain", prevMembership: "leave", membership: "join"},
-            {userId: "@user_2:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_2:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_2:some.domain", prevMembership: "join", membership: "leave" },
+            { userId: "@user_2:some.domain", prevMembership: "leave", membership: "join" },
+            { userId: "@user_2:some.domain", prevMembership: "join", membership: "leave" },
         ]);
         const props = {
             events: events,
@@ -448,11 +448,11 @@ describe('MemberEventListSummary', function() {
     it('correctly identifies transitions', function() {
         const events = generateEvents([
             // invited
-            {userId: "@user_1:some.domain", membership: "invite"},
+            { userId: "@user_1:some.domain", membership: "invite" },
             // banned
-            {userId: "@user_1:some.domain", membership: "ban"},
+            { userId: "@user_1:some.domain", membership: "ban" },
             // joined
-            {userId: "@user_1:some.domain", membership: "join"},
+            { userId: "@user_1:some.domain", membership: "join" },
             // invite_reject
             {
                 userId: "@user_1:some.domain",
@@ -460,7 +460,7 @@ describe('MemberEventListSummary', function() {
                 membership: "leave",
             },
             // left
-            {userId: "@user_1:some.domain", prevMembership: "join", membership: "leave"},
+            { userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
             // invite_withdrawal
             {
                 userId: "@user_1:some.domain",
@@ -602,10 +602,10 @@ describe('MemberEventListSummary', function() {
 
     it('handles a summary length = 2, with no "others"', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", membership: "join"},
-            {userId: "@user_1:some.domain", membership: "join"},
-            {userId: "@user_2:some.domain", membership: "join"},
-            {userId: "@user_2:some.domain", membership: "join"},
+            { userId: "@user_1:some.domain", membership: "join" },
+            { userId: "@user_1:some.domain", membership: "join" },
+            { userId: "@user_2:some.domain", membership: "join" },
+            { userId: "@user_2:some.domain", membership: "join" },
         ]);
         const props = {
             events: events,
@@ -630,9 +630,9 @@ describe('MemberEventListSummary', function() {
 
     it('handles a summary length = 2, with 1 "other"', function() {
         const events = generateEvents([
-            {userId: "@user_1:some.domain", membership: "join"},
-            {userId: "@user_2:some.domain", membership: "join"},
-            {userId: "@user_3:some.domain", membership: "join"},
+            { userId: "@user_1:some.domain", membership: "join" },
+            { userId: "@user_2:some.domain", membership: "join" },
+            { userId: "@user_3:some.domain", membership: "join" },
         ]);
         const props = {
             events: events,
@@ -657,7 +657,7 @@ describe('MemberEventListSummary', function() {
 
     it('handles a summary length = 2, with many "others"', function() {
         const events = generateEventsForUsers("@user_$:some.domain", 20, [
-            {membership: "join"},
+            { membership: "join" },
         ]);
         const props = {
             events: events,
diff --git a/test/components/views/groups/GroupMemberList-test.js b/test/components/views/groups/GroupMemberList-test.js
index 39720177cc..7e01540d38 100644
--- a/test/components/views/groups/GroupMemberList-test.js
+++ b/test/components/views/groups/GroupMemberList-test.js
@@ -19,7 +19,7 @@ import ReactDOM from "react-dom";
 import ReactTestUtils from "react-dom/test-utils";
 
 import MockHttpBackend from "matrix-mock-request";
-import {MatrixClientPeg} from "../../../../src/MatrixClientPeg";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import sdk from "../../../skinned-sdk";
 import Matrix from "matrix-js-sdk";
 
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index b81486b293..c9418fc557 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -19,8 +19,8 @@ import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 import { configure, mount } from "enzyme";
 
 import sdk from "../../../skinned-sdk";
-import {mkEvent, mkStubRoom} from "../../../test-utils";
-import {MatrixClientPeg} from "../../../../src/MatrixClientPeg";
+import { mkEvent, mkStubRoom } from "../../../test-utils";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as languageHandler from "../../../../src/languageHandler";
 
 const TextualBody = sdk.getComponent("views.messages.TextualBody");
@@ -343,4 +343,3 @@ describe("<TextualBody />", () => {
     });
 });
 
-
diff --git a/test/components/views/rooms/MemberList-test.tsx b/test/components/views/rooms/MemberList-test.tsx
index 8012c43c4b..a169cd08e6 100644
--- a/test/components/views/rooms/MemberList-test.tsx
+++ b/test/components/views/rooms/MemberList-test.tsx
@@ -312,4 +312,3 @@ describe('MemberList', () => {
     });
 });
 
-
diff --git a/test/components/views/rooms/RoomList-test.js b/test/components/views/rooms/RoomList-test.js
index 6aad6a90fd..cee0fe5a47 100644
--- a/test/components/views/rooms/RoomList-test.js
+++ b/test/components/views/rooms/RoomList-test.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 import * as TestUtils from '../../../test-utils';
 
-import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import sdk from '../../../skinned-sdk';
 
 import dis from '../../../../src/dispatcher/dispatcher';
@@ -12,7 +12,7 @@ import DMRoomMap from '../../../../src/utils/DMRoomMap';
 import GroupStore from '../../../../src/stores/GroupStore';
 
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import {DefaultTagID} from "../../../../src/stores/room-list/models";
+import { DefaultTagID } from "../../../../src/stores/room-list/models";
 import RoomListStore, { LISTS_UPDATE_EVENT, RoomListStoreClass } from "../../../../src/stores/room-list/RoomListStore";
 import RoomListLayoutStore from "../../../../src/stores/room-list/RoomListLayoutStore";
 
@@ -55,7 +55,7 @@ describe('RoomList', () => {
 
         TestUtils.stubClient();
         client = MatrixClientPeg.get();
-        client.credentials = {userId: myUserId};
+        client.credentials = { userId: myUserId };
         //revert this to prototype method as the test-utils monkey-patches this to return a hardcoded value
         client.getUserId = MatrixClient.prototype.getUserId;
 
@@ -72,7 +72,7 @@ describe('RoomList', () => {
         );
         ReactTestUtils.findRenderedComponentWithType(root, RoomList);
 
-        movingRoom = createRoom({name: 'Moving room'});
+        movingRoom = createRoom({ name: 'Moving room' });
         expect(movingRoom.roomId).not.toBe(null);
 
         // Mock joined member
@@ -83,7 +83,7 @@ describe('RoomList', () => {
             [client.credentials.userId]: myMember,
         }[userId]);
 
-        otherRoom = createRoom({name: 'Other room'});
+        otherRoom = createRoom({ name: 'Other room' });
         myOtherMember = new RoomMember(otherRoom.roomId, myUserId);
         myOtherMember.membership = 'join';
         otherRoom.updateMyMembership('join');
@@ -95,10 +95,10 @@ describe('RoomList', () => {
         client.getRooms = () => [
             movingRoom,
             otherRoom,
-            createRoom({tags: {'m.favourite': {order: 0.1}}, name: 'Some other room'}),
-            createRoom({tags: {'m.favourite': {order: 0.2}}, name: 'Some other room 2'}),
-            createRoom({tags: {'m.lowpriority': {}}, name: 'Some unimportant room'}),
-            createRoom({tags: {'custom.tag': {}}, name: 'Some room customly tagged'}),
+            createRoom({ tags: { 'm.favourite': { order: 0.1 } }, name: 'Some other room' }),
+            createRoom({ tags: { 'm.favourite': { order: 0.2 } }, name: 'Some other room 2' }),
+            createRoom({ tags: { 'm.lowpriority': {} }, name: 'Some unimportant room' }),
+            createRoom({ tags: { 'custom.tag': {} }, name: 'Some room customly tagged' }),
         ];
         client.getVisibleRooms = client.getRooms;
 
@@ -138,7 +138,7 @@ describe('RoomList', () => {
         let expectedRoomTile;
         try {
             const roomTiles = ReactTestUtils.scryRenderedComponentsWithType(containingSubList, RoomTile);
-            console.info({roomTiles: roomTiles.length});
+            console.info({ roomTiles: roomTiles.length });
             expectedRoomTile = roomTiles.find((tile) => tile.props.room === room);
         } catch (err) {
             // truncate the error message because it's spammy
@@ -164,7 +164,7 @@ describe('RoomList', () => {
         // Set up the room that will be moved such that it has the correct state for a room in
         // the section for oldTagId
         if (oldTagId === DefaultTagID.Favourite || oldTagId === DefaultTagID.LowPriority) {
-            movingRoom.tags = {[oldTagId]: {}};
+            movingRoom.tags = { [oldTagId]: {} };
         } else if (oldTagId === DefaultTagID.DM) {
             // Mock inverse m.direct
             DMRoomMap.shared().roomToUser = {
@@ -172,13 +172,13 @@ describe('RoomList', () => {
             };
         }
 
-        dis.dispatch({action: 'MatrixActions.sync', prevState: null, state: 'PREPARED', matrixClient: client});
+        dis.dispatch({ action: 'MatrixActions.sync', prevState: null, state: 'PREPARED', matrixClient: client });
 
         expectRoomInSubList(movingRoom, srcSubListTest);
 
-        dis.dispatch({action: 'RoomListActions.tagRoom.pending', request: {
+        dis.dispatch({ action: 'RoomListActions.tagRoom.pending', request: {
             oldTagId, newTagId, room: movingRoom,
-        }});
+        } });
 
         expectRoomInSubList(movingRoom, destSubListTest);
     }
@@ -279,11 +279,11 @@ describe('RoomList', () => {
             // We also have to mock the client's getGroup function for the room list to filter it.
             // It's not smart enough to tell the difference between a real group and a template though.
             client.getGroup = (groupId) => {
-                return {groupId};
+                return { groupId };
             };
 
             // Select tag
-            dis.dispatch({action: 'select_tag', tag: '+group:domain'}, true);
+            dis.dispatch({ action: 'select_tag', tag: '+group:domain' }, true);
         }
 
         beforeEach(() => {
@@ -309,4 +309,3 @@ describe('RoomList', () => {
     });
 });
 
-
diff --git a/test/components/views/rooms/RoomSettings-test.js b/test/components/views/rooms/RoomSettings-test.js
index 3b4989ccab..cd70b81cd7 100644
--- a/test/components/views/rooms/RoomSettings-test.js
+++ b/test/components/views/rooms/RoomSettings-test.js
@@ -3,10 +3,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import * as testUtils from '../../../test-utils';
 import sdk from '../../../skinned-sdk';
-import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import SettingsStore from '../../../../src/settings/SettingsStore';
 
-
 describe.skip('RoomSettings', () => {
     const WrappedRoomSettings = testUtils.wrapInMatrixClientContext(sdk.getComponent('views.rooms.RoomSettings'));
 
@@ -36,7 +35,7 @@ describe.skip('RoomSettings', () => {
     beforeEach(function(done) {
         testUtils.stubClient();
         client = MatrixClientPeg.get();
-        client.credentials = {userId: '@me:domain.com'};
+        client.credentials = { userId: '@me:domain.com' };
 
         client.setRoomName = jest.fn().mockReturnValue(Promise.resolve());
         client.setRoomTopic = jest.fn().mockReturnValue(Promise.resolve());
@@ -128,7 +127,7 @@ describe.skip('RoomSettings', () => {
         roomSettings.save().then(() => {
             expectSentStateEvent(
                 "!DdJkzRliezrwpNebLk:matrix.org",
-                "m.room.history_visibility", {history_visibility: historyVisibility},
+                "m.room.history_visibility", { history_visibility: historyVisibility },
             );
             done();
         });
diff --git a/test/components/views/rooms/SendMessageComposer-test.js b/test/components/views/rooms/SendMessageComposer-test.js
index eb7b2ffeff..2fddf8b691 100644
--- a/test/components/views/rooms/SendMessageComposer-test.js
+++ b/test/components/views/rooms/SendMessageComposer-test.js
@@ -18,18 +18,18 @@ import '../../../skinned-sdk'; // Must be first for skinning to work
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 import { configure, mount } from "enzyme";
 import React from "react";
-import {act} from "react-dom/test-utils";
+import { act } from "react-dom/test-utils";
 import SendMessageComposer, {
     createMessageContent,
     isQuickReaction,
 } from "../../../../src/components/views/rooms/SendMessageComposer";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import EditorModel from "../../../../src/editor/model";
-import {createPartCreator, createRenderer} from "../../../editor/mock";
-import {createTestClient, mkEvent, mkStubRoom} from "../../../test-utils";
+import { createPartCreator, createRenderer } from "../../../editor/mock";
+import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils";
 import BasicMessageComposer from "../../../../src/components/views/rooms/BasicMessageComposer";
-import {MatrixClientPeg} from "../../../../src/MatrixClientPeg";
-import {sleep} from "../../../../src/utils/promise";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { sleep } from "../../../../src/utils/promise";
 import SpecPermalinkConstructor from "../../../../src/utils/permalinks/SpecPermalinkConstructor";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 
@@ -43,7 +43,7 @@ describe('<SendMessageComposer/>', () => {
 
         it("sends plaintext messages correctly", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("hello world", "insertText", {offset: 11, atNodeEnd: true});
+            model.update("hello world", "insertText", { offset: 11, atNodeEnd: true });
 
             const content = createMessageContent(model, permalinkCreator);
 
@@ -55,7 +55,7 @@ describe('<SendMessageComposer/>', () => {
 
         it("sends markdown messages correctly", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("hello *world*", "insertText", {offset: 13, atNodeEnd: true});
+            model.update("hello *world*", "insertText", { offset: 13, atNodeEnd: true });
 
             const content = createMessageContent(model, permalinkCreator);
 
@@ -69,7 +69,7 @@ describe('<SendMessageComposer/>', () => {
 
         it("strips /me from messages and marks them as m.emote accordingly", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("/me blinks __quickly__", "insertText", {offset: 22, atNodeEnd: true});
+            model.update("/me blinks __quickly__", "insertText", { offset: 22, atNodeEnd: true });
 
             const content = createMessageContent(model, permalinkCreator);
 
@@ -83,7 +83,7 @@ describe('<SendMessageComposer/>', () => {
 
         it("allows sending double-slash escaped slash commands correctly", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("//dev/null is my favourite place", "insertText", {offset: 32, atNodeEnd: true});
+            model.update("//dev/null is my favourite place", "insertText", { offset: 32, atNodeEnd: true });
 
             const content = createMessageContent(model, permalinkCreator);
 
@@ -155,7 +155,7 @@ describe('<SendMessageComposer/>', () => {
             // ensure the right state was persisted to localStorage
             wrapper.unmount();
             expect(JSON.parse(localStorage.getItem(key))).toStrictEqual({
-                parts: [{"type": "plain", "text": "Test Text"}],
+                parts: [{ "type": "plain", "text": "Test Text" }],
                 replyEventId: mockEvent.getId(),
             });
 
@@ -196,7 +196,7 @@ describe('<SendMessageComposer/>', () => {
             // ensure the right state was persisted to localStorage
             window.dispatchEvent(new Event('beforeunload'));
             expect(JSON.parse(localStorage.getItem(key))).toStrictEqual({
-                parts: [{"type": "plain", "text": "Hello World"}],
+                parts: [{ "type": "plain", "text": "Hello World" }],
             });
         });
 
@@ -225,7 +225,7 @@ describe('<SendMessageComposer/>', () => {
             expect(wrapper.text()).toBe("");
             const str = sessionStorage.getItem(`mx_cider_history_${mockRoom.roomId}[0]`);
             expect(JSON.parse(str)).toStrictEqual({
-                parts: [{"type": "plain", "text": "This is a message"}],
+                parts: [{ "type": "plain", "text": "This is a message" }],
                 replyEventId: mockEvent.getId(),
             });
         });
@@ -234,7 +234,7 @@ describe('<SendMessageComposer/>', () => {
     describe("isQuickReaction", () => {
         it("correctly detects quick reaction", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("+😊", "insertText", {offset: 3, atNodeEnd: true});
+            model.update("+😊", "insertText", { offset: 3, atNodeEnd: true });
 
             const isReaction = isQuickReaction(model);
 
@@ -243,7 +243,7 @@ describe('<SendMessageComposer/>', () => {
 
         it("correctly detects quick reaction with space", () => {
             const model = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("+ 😊", "insertText", {offset: 4, atNodeEnd: true});
+            model.update("+ 😊", "insertText", { offset: 4, atNodeEnd: true });
 
             const isReaction = isQuickReaction(model);
 
@@ -255,10 +255,10 @@ describe('<SendMessageComposer/>', () => {
             const model2 = new EditorModel([], createPartCreator(), createRenderer());
             const model3 = new EditorModel([], createPartCreator(), createRenderer());
             const model4 = new EditorModel([], createPartCreator(), createRenderer());
-            model.update("+😊hello", "insertText", {offset: 8, atNodeEnd: true});
-            model2.update(" +😊", "insertText", {offset: 4, atNodeEnd: true});
-            model3.update("+ 😊😊", "insertText", {offset: 6, atNodeEnd: true});
-            model4.update("+smiley", "insertText", {offset: 7, atNodeEnd: true});
+            model.update("+😊hello", "insertText", { offset: 8, atNodeEnd: true });
+            model2.update(" +😊", "insertText", { offset: 4, atNodeEnd: true });
+            model3.update("+ 😊😊", "insertText", { offset: 6, atNodeEnd: true });
+            model4.update("+smiley", "insertText", { offset: 7, atNodeEnd: true });
 
             expect(isQuickReaction(model)).toBeFalsy();
             expect(isQuickReaction(model2)).toBeFalsy();
@@ -268,4 +268,3 @@ describe('<SendMessageComposer/>', () => {
     });
 });
 
-
diff --git a/test/createRoom-test.js b/test/createRoom-test.js
index ed8f9779f7..b9b7e7df01 100644
--- a/test/createRoom-test.js
+++ b/test/createRoom-test.js
@@ -1,6 +1,6 @@
 import './skinned-sdk'; // Must be first for skinning to work
-import {_waitForMember, canEncryptToAllUsers} from '../src/createRoom';
-import {EventEmitter} from 'events';
+import { _waitForMember, canEncryptToAllUsers } from '../src/createRoom';
+import { EventEmitter } from 'events';
 
 /* Shorter timeout, we've got tests to run */
 const timeout = 30;
@@ -61,10 +61,9 @@ describe("canEncryptToAllUsers", () => {
         done();
     });
 
-
     it("returns false if not all users have crypto", async (done) => {
         const client = {
-            downloadKeys: async function(userIds) { return {...trueUser, ...falseUser}; },
+            downloadKeys: async function(userIds) { return { ...trueUser, ...falseUser }; },
         };
         const response = await canEncryptToAllUsers(client, ["@goodUser:localhost", "@badUser:localhost"]);
         expect(response).toBe(false);
diff --git a/test/editor/caret-test.js b/test/editor/caret-test.js
index f0c171c7c9..e1a66a4431 100644
--- a/test/editor/caret-test.js
+++ b/test/editor/caret-test.js
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {getLineAndNodePosition} from "../../src/editor/caret";
+import { getLineAndNodePosition } from "../../src/editor/caret";
 import EditorModel from "../../src/editor/model";
-import {createPartCreator} from "./mock";
+import { createPartCreator } from "./mock";
 
 describe('editor/caret: DOM position for caret', function() {
     describe('basic text handling', function() {
@@ -25,8 +25,8 @@ describe('editor/caret: DOM position for caret', function() {
             const model = new EditorModel([
                 pc.plain("hello"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 5});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 5 });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -36,8 +36,8 @@ describe('editor/caret: DOM position for caret', function() {
             const model = new EditorModel([
                 pc.plain("hello"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 0 });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -47,8 +47,8 @@ describe('editor/caret: DOM position for caret', function() {
             const model = new EditorModel([
                 pc.plain("hello"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 2});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 2 });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(2);
@@ -62,8 +62,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.newline(),
                 pc.plain("world"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 2, offset: 5});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 2, offset: 5 });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -75,8 +75,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.newline(),
                 pc.plain("world"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 2, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 2, offset: 0 });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -89,8 +89,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.newline(),
                 pc.plain("world"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 1, offset: 1});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 1, offset: 1 });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(-1);
             expect(offset).toBe(0);
@@ -103,8 +103,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.newline(),
                 pc.plain("world"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 3, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 3, offset: 0 });
             expect(lineIndex).toBe(2);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -118,8 +118,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.userPill("Alice", "@alice:hs.tld"),
                 pc.plain("!"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 1, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 1, offset: 0 });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -131,8 +131,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.userPill("Alice", "@alice:hs.tld"),
                 pc.plain("!"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 1, offset: 2});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 1, offset: 2 });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(2);
             expect(offset).toBe(0);
@@ -142,8 +142,8 @@ describe('editor/caret: DOM position for caret', function() {
             const model = new EditorModel([
                 pc.userPill("Alice", "@alice:hs.tld"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 0 });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret)
             expect(nodeIndex).toBe(0);
@@ -154,8 +154,8 @@ describe('editor/caret: DOM position for caret', function() {
             const model = new EditorModel([
                 pc.userPill("Alice", "@alice:hs.tld"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 1});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 1 });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -167,8 +167,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.userPill("Alice", "@alice:hs.tld"),
                 pc.userPill("Bob", "@bob:hs.tld"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 0, offset: 1});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 0, offset: 1 });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -180,8 +180,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.userPill("Alice", "@alice:hs.tld"),
                 pc.userPill("Bob", "@bob:hs.tld"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 1, offset: 0});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 1, offset: 0 });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -193,8 +193,8 @@ describe('editor/caret: DOM position for caret', function() {
                 pc.userPill("Alice", "@alice:hs.tld"),
                 pc.userPill("Bob", "@bob:hs.tld"),
             ]);
-            const {offset, lineIndex, nodeIndex} =
-                getLineAndNodePosition(model, {index: 1, offset: 1});
+            const { offset, lineIndex, nodeIndex } =
+                getLineAndNodePosition(model, { index: 1, offset: 1 });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(4);
diff --git a/test/editor/deserialize-test.js b/test/editor/deserialize-test.js
index 7c7a2f84fb..17e8a31780 100644
--- a/test/editor/deserialize-test.js
+++ b/test/editor/deserialize-test.js
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import '../skinned-sdk'; // Must be first for skinning to work
-import {parseEvent} from "../../src/editor/deserialize";
-import {createPartCreator} from "./mock";
+import { parseEvent } from "../../src/editor/deserialize";
+import { createPartCreator } from "./mock";
 
 function htmlMessage(formattedBody, msgtype = "m.text") {
     return {
@@ -71,22 +71,22 @@ describe('editor/deserialize', function() {
     describe('text messages', function() {
         it('test with newlines', function() {
             const parts = normalize(parseEvent(textMessage("hello\nworld"), createPartCreator()));
-            expect(parts[0]).toStrictEqual({type: "plain", text: "hello"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "world"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "hello" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "world" });
             expect(parts.length).toBe(3);
         });
         it('@room pill', function() {
             const parts = normalize(parseEvent(textMessage("text message for @room"), createPartCreator()));
             expect(parts.length).toBe(2);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "text message for "});
-            expect(parts[1]).toStrictEqual({type: "at-room-pill", text: "@room"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "text message for " });
+            expect(parts[1]).toStrictEqual({ type: "at-room-pill", text: "@room" });
         });
         it('emote', function() {
             const text = "says DON'T SHOUT!";
             const parts = normalize(parseEvent(textMessage(text, "m.emote"), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "/me says DON'T SHOUT!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "/me says DON'T SHOUT!" });
         });
     });
     describe('html messages', function() {
@@ -94,159 +94,159 @@ describe('editor/deserialize', function() {
             const html = "<strong>bold</strong> and <em>emphasized</em> text";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "**bold** and _emphasized_ text"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "**bold** and _emphasized_ text" });
         });
         it('hyperlink', function() {
             const html = 'click <a href="http://example.com/">this</a>!';
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "click [this](http://example.com/)!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "click [this](http://example.com/)!" });
         });
         it('multiple lines with paragraphs', function() {
             const html = '<p>hello</p><p>world</p>';
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(4);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "hello"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[3]).toStrictEqual({type: "plain", text: "world"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "hello" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[3]).toStrictEqual({ type: "plain", text: "world" });
         });
         it('multiple lines with line breaks', function() {
             const html = 'hello<br>world';
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "hello"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "world"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "hello" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "world" });
         });
         it('multiple lines mixing paragraphs and line breaks', function() {
             const html = '<p>hello<br>warm</p><p>world</p>';
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(6);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "hello"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "warm"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[5]).toStrictEqual({type: "plain", text: "world"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "hello" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "warm" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[5]).toStrictEqual({ type: "plain", text: "world" });
         });
         it('quote', function() {
             const html = '<blockquote><p><em>wise</em><br><strong>words</strong></p></blockquote><p>indeed</p>';
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(6);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "> _wise_"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "> **words**"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[5]).toStrictEqual({type: "plain", text: "indeed"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "> _wise_" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "> **words**" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[5]).toStrictEqual({ type: "plain", text: "indeed" });
         });
         it('user pill', function() {
             const html = "Hi <a href=\"https://matrix.to/#/@alice:hs.tld\">Alice</a>!";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "Hi "});
-            expect(parts[1]).toStrictEqual({type: "user-pill", text: "Alice", resourceId: "@alice:hs.tld"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "Hi " });
+            expect(parts[1]).toStrictEqual({ type: "user-pill", text: "Alice", resourceId: "@alice:hs.tld" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "!" });
         });
         it('user pill with displayname containing backslash', function() {
             const html = "Hi <a href=\"https://matrix.to/#/@alice:hs.tld\">Alice\\</a>!";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "Hi "});
-            expect(parts[1]).toStrictEqual({type: "user-pill", text: "Alice\\", resourceId: "@alice:hs.tld"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "Hi " });
+            expect(parts[1]).toStrictEqual({ type: "user-pill", text: "Alice\\", resourceId: "@alice:hs.tld" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "!" });
         });
         it('user pill with displayname containing opening square bracket', function() {
             const html = "Hi <a href=\"https://matrix.to/#/@alice:hs.tld\">Alice[[</a>!";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "Hi "});
-            expect(parts[1]).toStrictEqual({type: "user-pill", text: "Alice[[", resourceId: "@alice:hs.tld"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "Hi " });
+            expect(parts[1]).toStrictEqual({ type: "user-pill", text: "Alice[[", resourceId: "@alice:hs.tld" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "!" });
         });
         it('user pill with displayname containing closing square bracket', function() {
             const html = "Hi <a href=\"https://matrix.to/#/@alice:hs.tld\">Alice]</a>!";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "Hi "});
-            expect(parts[1]).toStrictEqual({type: "user-pill", text: "Alice]", resourceId: "@alice:hs.tld"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "Hi " });
+            expect(parts[1]).toStrictEqual({ type: "user-pill", text: "Alice]", resourceId: "@alice:hs.tld" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "!" });
         });
         it('room pill', function() {
             const html = "Try <a href=\"https://matrix.to/#/#room:hs.tld\">#room:hs.tld</a>?";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(3);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "Try "});
-            expect(parts[1]).toStrictEqual({type: "room-pill", text: "#room:hs.tld", resourceId: "#room:hs.tld"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "?"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "Try " });
+            expect(parts[1]).toStrictEqual({ type: "room-pill", text: "#room:hs.tld", resourceId: "#room:hs.tld" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "?" });
         });
         it('@room pill', function() {
             const html = "<em>formatted</em> message for @room";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(2);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "_formatted_ message for "});
-            expect(parts[1]).toStrictEqual({type: "at-room-pill", text: "@room"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "_formatted_ message for " });
+            expect(parts[1]).toStrictEqual({ type: "at-room-pill", text: "@room" });
         });
         it('inline code', function() {
             const html = "there is no place like <code>127.0.0.1</code>!";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "there is no place like `127.0.0.1`!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "there is no place like `127.0.0.1`!" });
         });
         it('code block with no trailing text', function() {
             const html = "<pre><code>0xDEADBEEF\n</code></pre>\n";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             console.log(parts);
             expect(parts.length).toBe(5);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "```"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "0xDEADBEEF"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "plain", text: "```"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "```" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "0xDEADBEEF" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "plain", text: "```" });
         });
         // failing likely because of https://github.com/vector-im/element-web/issues/10316
         xit('code block with no trailing text and no newlines', function() {
             const html = "<pre><code>0xDEADBEEF</code></pre>";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(5);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "```"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "0xDEADBEEF"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "plain", text: "```"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "```" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "0xDEADBEEF" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "plain", text: "```" });
         });
         it('unordered lists', function() {
             const html = "<ul><li>Oak</li><li>Spruce</li><li>Birch</li></ul>";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(5);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "- Oak"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "- Spruce"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "plain", text: "- Birch"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "- Oak" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "- Spruce" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "plain", text: "- Birch" });
         });
         it('ordered lists', function() {
             const html = "<ol><li>Start</li><li>Continue</li><li>Finish</li></ol>";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(5);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "1. Start"});
-            expect(parts[1]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[2]).toStrictEqual({type: "plain", text: "2. Continue"});
-            expect(parts[3]).toStrictEqual({type: "newline", text: "\n"});
-            expect(parts[4]).toStrictEqual({type: "plain", text: "3. Finish"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "1. Start" });
+            expect(parts[1]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[2]).toStrictEqual({ type: "plain", text: "2. Continue" });
+            expect(parts[3]).toStrictEqual({ type: "newline", text: "\n" });
+            expect(parts[4]).toStrictEqual({ type: "plain", text: "3. Finish" });
         });
         it('mx-reply is stripped', function() {
             const html = "<mx-reply>foo</mx-reply>bar";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "bar"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "bar" });
         });
         it('emote', function() {
             const html = "says <em>DON'T SHOUT</em>!";
             const parts = normalize(parseEvent(htmlMessage(html, "m.emote"), createPartCreator()));
             expect(parts.length).toBe(1);
-            expect(parts[0]).toStrictEqual({type: "plain", text: "/me says _DON'T SHOUT_!"});
+            expect(parts[0]).toStrictEqual({ type: "plain", text: "/me says _DON'T SHOUT_!" });
         });
     });
 });
diff --git a/test/editor/diff-test.js b/test/editor/diff-test.js
index 4637206b27..e525731340 100644
--- a/test/editor/diff-test.js
+++ b/test/editor/diff-test.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {diffDeletion, diffAtCaret} from "../../src/editor/diff";
+import { diffDeletion, diffAtCaret } from "../../src/editor/diff";
 
 describe('editor/diff', function() {
     describe('diffDeletion', function() {
diff --git a/test/editor/history-test.js b/test/editor/history-test.js
index e54c1e7ea9..e3ae3e16f6 100644
--- a/test/editor/history-test.js
+++ b/test/editor/history-test.js
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import HistoryManager, {MAX_STEP_LENGTH} from "../../src/editor/history";
+import HistoryManager, { MAX_STEP_LENGTH } from "../../src/editor/history";
 
 describe('editor/history', function() {
     it('push, then undo', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         const caret1 = {};
         const result1 = history.tryPush(model, caret1);
         expect(result1).toEqual(true);
@@ -35,7 +35,7 @@ describe('editor/history', function() {
     it('push, undo, then redo', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         history.tryPush(model, {});
         parts[0] = "hello world";
         const caret2 = {};
@@ -51,7 +51,7 @@ describe('editor/history', function() {
     it('push, undo, push, ensure you can`t redo', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         history.tryPush(model, {});
         parts[0] = "hello world";
         history.tryPush(model, {});
@@ -63,10 +63,10 @@ describe('editor/history', function() {
     it('not every keystroke stores a history step', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         const firstCaret = {};
         history.tryPush(model, firstCaret);
-        const diff = {added: "o"};
+        const diff = { added: "o" };
         let keystrokeCount = 0;
         do {
             parts[0] = parts[0] + diff.added;
@@ -80,24 +80,24 @@ describe('editor/history', function() {
     });
     it('history step is added at word boundary', function() {
         const history = new HistoryManager();
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         const parts = ["h"];
-        let diff = {added: "h"};
+        let diff = { added: "h" };
         expect(history.tryPush(model, {}, "insertText", diff)).toEqual(false);
-        diff = {added: "i"};
+        diff = { added: "i" };
         parts[0] = "hi";
         expect(history.tryPush(model, {}, "insertText", diff)).toEqual(false);
-        diff = {added: " "};
+        diff = { added: " " };
         parts[0] = "hi ";
         const spaceCaret = {};
         expect(history.tryPush(model, spaceCaret, "insertText", diff)).toEqual(true);
-        diff = {added: "y"};
+        diff = { added: "y" };
         parts[0] = "hi y";
         expect(history.tryPush(model, {}, "insertText", diff)).toEqual(false);
-        diff = {added: "o"};
+        diff = { added: "o" };
         parts[0] = "hi yo";
         expect(history.tryPush(model, {}, "insertText", diff)).toEqual(false);
-        diff = {added: "u"};
+        diff = { added: "u" };
         parts[0] = "hi you";
 
         expect(history.canUndo()).toEqual(true);
@@ -108,11 +108,11 @@ describe('editor/history', function() {
     it('keystroke that didn\'t add a step can undo', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         const firstCaret = {};
         history.tryPush(model, {});
         parts[0] = "helloo";
-        const result = history.tryPush(model, {}, "insertText", {added: "o"});
+        const result = history.tryPush(model, {}, "insertText", { added: "o" });
         expect(result).toEqual(false);
         expect(history.canUndo()).toEqual(true);
         const undoState = history.undo(model);
@@ -122,11 +122,11 @@ describe('editor/history', function() {
     it('undo after keystroke that didn\'t add a step is able to redo', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         history.tryPush(model, {});
         parts[0] = "helloo";
-        const caret = {last: true};
-        history.tryPush(model, caret, "insertText", {added: "o"});
+        const caret = { last: true };
+        history.tryPush(model, caret, "insertText", { added: "o" });
         history.undo(model);
         expect(history.canRedo()).toEqual(true);
         const redoState = history.redo();
@@ -136,10 +136,10 @@ describe('editor/history', function() {
     it('overwriting text always stores a step', function() {
         const history = new HistoryManager();
         const parts = ["hello"];
-        const model = {serializeParts: () => parts.slice()};
+        const model = { serializeParts: () => parts.slice() };
         const firstCaret = {};
         history.tryPush(model, firstCaret);
-        const diff = {at: 1, added: "a", removed: "e"};
+        const diff = { at: 1, added: "a", removed: "e" };
         const result = history.tryPush(model, {}, "insertText", diff);
         expect(result).toEqual(true);
     });
diff --git a/test/editor/mock.js b/test/editor/mock.js
index 6de65cf23d..2d82d22033 100644
--- a/test/editor/mock.js
+++ b/test/editor/mock.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {PartCreator} from "../../src/editor/parts";
+import { PartCreator } from "../../src/editor/parts";
 
 class MockAutoComplete {
     constructor(updateCallback, partCreator, completions) {
@@ -25,7 +25,7 @@ class MockAutoComplete {
     }
 
     close() {
-        this._updateCallback({close: true});
+        this._updateCallback({ close: true });
     }
 
     tryComplete(close = true) {
@@ -40,7 +40,7 @@ class MockAutoComplete {
             } else {
                 pill = this._partCreator.roomPill(match.resourceId);
             }
-            this._updateCallback({replaceParts: [pill], close});
+            this._updateCallback({ replaceParts: [pill], close });
         }
     }
 
diff --git a/test/editor/model-test.js b/test/editor/model-test.js
index 2df9fdd573..35bd4143a7 100644
--- a/test/editor/model-test.js
+++ b/test/editor/model-test.js
@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 import EditorModel from "../../src/editor/model";
-import {createPartCreator, createRenderer} from "./mock";
+import { createPartCreator, createRenderer } from "./mock";
 
 describe('editor/model', function() {
     describe('plain text manipulation', function() {
         it('insert text into empty document', function() {
             const renderer = createRenderer();
             const model = new EditorModel([], createPartCreator(), renderer);
-            model.update("hello", "insertText", {offset: 5, atNodeEnd: true});
+            model.update("hello", "insertText", { offset: 5, atNodeEnd: true });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(0);
             expect(renderer.caret.offset).toBe(5);
@@ -34,7 +34,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc, renderer);
-            model.update("hello world", "insertText", {offset: 11, atNodeEnd: true});
+            model.update("hello world", "insertText", { offset: 11, atNodeEnd: true });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(0);
             expect(renderer.caret.offset).toBe(11);
@@ -46,7 +46,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("world")], pc, renderer);
-            model.update("hello world", "insertText", {offset: 6, atNodeEnd: false});
+            model.update("hello world", "insertText", { offset: 6, atNodeEnd: false });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(0);
             expect(renderer.caret.offset).toBe(6);
@@ -60,7 +60,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc, renderer);
-            model.update("hello\n", "insertText", {offset: 6, atNodeEnd: true});
+            model.update("hello\n", "insertText", { offset: 6, atNodeEnd: true });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(1);
             expect(renderer.caret.offset).toBe(1);
@@ -74,7 +74,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc, renderer);
-            model.update("hello\n\n\nworld!", "insertText", {offset: 14, atNodeEnd: true});
+            model.update("hello\n\n\nworld!", "insertText", { offset: 14, atNodeEnd: true });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(4);
             expect(renderer.caret.offset).toBe(6);
@@ -99,7 +99,7 @@ describe('editor/model', function() {
                 pc.newline(),
                 pc.plain("world"),
             ], pc, renderer);
-            model.update("hello\nwarm\nworld", "insertText", {offset: 10, atNodeEnd: true});
+            model.update("hello\nwarm\nworld", "insertText", { offset: 10, atNodeEnd: true });
             console.log(model.serializeParts());
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(2);
@@ -125,7 +125,7 @@ describe('editor/model', function() {
                 pc.plain("try "),
                 pc.roomPill("#someroom"),
             ], pc, renderer);
-            model.update("try foo#someroom", "insertText", {offset: 7, atNodeEnd: false});
+            model.update("try foo#someroom", "insertText", { offset: 7, atNodeEnd: false });
             expect(renderer.caret.index).toBe(0);
             expect(renderer.caret.offset).toBe(7);
             expect(model.parts.length).toBe(2);
@@ -142,7 +142,7 @@ describe('editor/model', function() {
                 pc.roomPill("#someroom"),
                 pc.plain("?"),
             ], pc, renderer);
-            model.update("try #some perhapsroom?", "insertText", {offset: 17, atNodeEnd: false});
+            model.update("try #some perhapsroom?", "insertText", { offset: 17, atNodeEnd: false });
             expect(renderer.caret.index).toBe(2);
             expect(renderer.caret.offset).toBe(8);
             expect(model.parts.length).toBe(3);
@@ -157,7 +157,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.roomPill("#someroom")], pc, renderer);
-            model.update("#someroo", "deleteContentBackward", {offset: 8, atNodeEnd: true});
+            model.update("#someroo", "deleteContentBackward", { offset: 8, atNodeEnd: true });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(-1);
             expect(renderer.caret.offset).toBe(0);
@@ -167,7 +167,7 @@ describe('editor/model', function() {
             const renderer = createRenderer();
             const pc = createPartCreator();
             const model = new EditorModel([pc.roomPill("#someroom")], pc, renderer);
-            model.update("someroom", "deleteContentForward", {offset: 0, atNodeEnd: false});
+            model.update("someroom", "deleteContentForward", { offset: 0, atNodeEnd: false });
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(-1);
             expect(renderer.caret.offset).toBe(0);
@@ -177,10 +177,10 @@ describe('editor/model', function() {
     describe('auto-complete', function() {
         it('insert user pill', function() {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "@alice", label: "Alice"}]);
+            const pc = createPartCreator([{ resourceId: "@alice", label: "Alice" }]);
             const model = new EditorModel([pc.plain("hello ")], pc, renderer);
 
-            model.update("hello @a", "insertText", {offset: 8, atNodeEnd: true});
+            model.update("hello @a", "insertText", { offset: 8, atNodeEnd: true });
 
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(1);
@@ -205,10 +205,10 @@ describe('editor/model', function() {
 
         it('insert room pill', function() {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "#riot-dev"}]);
+            const pc = createPartCreator([{ resourceId: "#riot-dev" }]);
             const model = new EditorModel([pc.plain("hello ")], pc, renderer);
 
-            model.update("hello #r", "insertText", {offset: 8, atNodeEnd: true});
+            model.update("hello #r", "insertText", { offset: 8, atNodeEnd: true });
 
             expect(renderer.count).toBe(1);
             expect(renderer.caret.index).toBe(1);
@@ -233,12 +233,12 @@ describe('editor/model', function() {
 
         it('type after inserting pill', function() {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "#riot-dev"}]);
+            const pc = createPartCreator([{ resourceId: "#riot-dev" }]);
             const model = new EditorModel([pc.plain("hello ")], pc, renderer);
 
-            model.update("hello #r", "insertText", {offset: 8, atNodeEnd: true});
+            model.update("hello #r", "insertText", { offset: 8, atNodeEnd: true });
             model.autoComplete.tryComplete(); // see MockAutoComplete
-            model.update("hello #riot-dev!!", "insertText", {offset: 17, atNodeEnd: true});
+            model.update("hello #riot-dev!!", "insertText", { offset: 17, atNodeEnd: true });
 
             expect(renderer.count).toBe(3);
             expect(renderer.caret.index).toBe(2);
@@ -254,10 +254,10 @@ describe('editor/model', function() {
 
         it('pasting text does not trigger auto-complete', function() {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "#define-room"}]);
+            const pc = createPartCreator([{ resourceId: "#define-room" }]);
             const model = new EditorModel([pc.plain("try ")], pc, renderer);
 
-            model.update("try #define", "insertFromPaste", {offset: 11, atNodeEnd: true});
+            model.update("try #define", "insertFromPaste", { offset: 11, atNodeEnd: true });
 
             expect(model.autoComplete).toBeFalsy();
             expect(renderer.caret.index).toBe(0);
@@ -269,10 +269,10 @@ describe('editor/model', function() {
 
         it('dropping text does not trigger auto-complete', function() {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "#define-room"}]);
+            const pc = createPartCreator([{ resourceId: "#define-room" }]);
             const model = new EditorModel([pc.plain("try ")], pc, renderer);
 
-            model.update("try #define", "insertFromDrop", {offset: 11, atNodeEnd: true});
+            model.update("try #define", "insertFromDrop", { offset: 11, atNodeEnd: true });
 
             expect(model.autoComplete).toBeFalsy();
             expect(renderer.caret.index).toBe(0);
@@ -284,17 +284,17 @@ describe('editor/model', function() {
 
         it('insert room pill without splitting at the colon', () => {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "#room:server"}]);
+            const pc = createPartCreator([{ resourceId: "#room:server" }]);
             const model = new EditorModel([], pc, renderer);
 
-            model.update("#roo", "insertText", {offset: 4, atNodeEnd: true});
+            model.update("#roo", "insertText", { offset: 4, atNodeEnd: true });
 
             expect(renderer.count).toBe(1);
             expect(model.parts.length).toBe(1);
             expect(model.parts[0].type).toBe("pill-candidate");
             expect(model.parts[0].text).toBe("#roo");
 
-            model.update("#room:s", "insertText", {offset: 7, atNodeEnd: true});
+            model.update("#room:s", "insertText", { offset: 7, atNodeEnd: true });
 
             expect(renderer.count).toBe(2);
             expect(model.parts.length).toBe(1);
@@ -304,10 +304,10 @@ describe('editor/model', function() {
 
         it('allow typing e-mail addresses without splitting at the @', () => {
             const renderer = createRenderer();
-            const pc = createPartCreator([{resourceId: "@alice", label: "Alice"}]);
+            const pc = createPartCreator([{ resourceId: "@alice", label: "Alice" }]);
             const model = new EditorModel([], pc, renderer);
 
-            model.update("foo@a", "insertText", {offset: 5, atNodeEnd: true});
+            model.update("foo@a", "insertText", { offset: 5, atNodeEnd: true });
 
             expect(renderer.count).toBe(1);
             expect(model.parts.length).toBe(1);
diff --git a/test/editor/operations-test.js b/test/editor/operations-test.js
index 90a9812306..32ccaa5440 100644
--- a/test/editor/operations-test.js
+++ b/test/editor/operations-test.js
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import EditorModel from "../../src/editor/model";
-import {createPartCreator, createRenderer} from "./mock";
-import {toggleInlineFormat} from "../../src/editor/operations";
+import { createPartCreator, createRenderer } from "./mock";
+import { toggleInlineFormat } from "../../src/editor/operations";
 
-const SERIALIZED_NEWLINE = {"text": "\n", "type": "newline"};
+const SERIALIZED_NEWLINE = { "text": "\n", "type": "newline" };
 
 describe('editor/operations: formatting operations', () => {
     describe('toggleInlineFormat', () => {
@@ -33,9 +33,9 @@ describe('editor/operations: formatting operations', () => {
                 model.positionForOffset(11, false));  // around "world"
 
             expect(range.parts[0].text).toBe("world");
-            expect(model.serializeParts()).toEqual([{"text": "hello world!", "type": "plain"}]);
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
             toggleInlineFormat(range, "_");
-            expect(model.serializeParts()).toEqual([{"text": "hello _world_!", "type": "plain"}]);
+            expect(model.serializeParts()).toEqual([{ "text": "hello _world_!", "type": "plain" }]);
         });
 
         it('works for parts of words', () => {
@@ -49,9 +49,9 @@ describe('editor/operations: formatting operations', () => {
                 model.positionForOffset(10, false));  // around "orl"
 
             expect(range.parts[0].text).toBe("orl");
-            expect(model.serializeParts()).toEqual([{"text": "hello world!", "type": "plain"}]);
+            expect(model.serializeParts()).toEqual([{ "text": "hello world!", "type": "plain" }]);
             toggleInlineFormat(range, "*");
-            expect(model.serializeParts()).toEqual([{"text": "hello w*orl*d!", "type": "plain"}]);
+            expect(model.serializeParts()).toEqual([{ "text": "hello w*orl*d!", "type": "plain" }]);
         });
 
         it('works for around pills', () => {
@@ -68,15 +68,15 @@ describe('editor/operations: formatting operations', () => {
 
             expect(range.parts.map(p => p.text).join("")).toBe("there @room, how are you");
             expect(model.serializeParts()).toEqual([
-                {"text": "hello there ", "type": "plain"},
-                {"text": "@room", "type": "at-room-pill"},
-                {"text": ", how are you doing?", "type": "plain"},
+                { "text": "hello there ", "type": "plain" },
+                { "text": "@room", "type": "at-room-pill" },
+                { "text": ", how are you doing?", "type": "plain" },
             ]);
             toggleInlineFormat(range, "_");
             expect(model.serializeParts()).toEqual([
-                {"text": "hello _there ", "type": "plain"},
-                {"text": "@room", "type": "at-room-pill"},
-                {"text": ", how are you_ doing?", "type": "plain"},
+                { "text": "hello _there ", "type": "plain" },
+                { "text": "@room", "type": "at-room-pill" },
+                { "text": ", how are you_ doing?", "type": "plain" },
             ]);
         });
 
@@ -94,15 +94,15 @@ describe('editor/operations: formatting operations', () => {
 
             expect(range.parts.map(p => p.text).join("")).toBe("world,\nhow");
             expect(model.serializeParts()).toEqual([
-                {"text": "hello world,", "type": "plain"},
+                { "text": "hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?", "type": "plain"},
+                { "text": "how are you doing?", "type": "plain" },
             ]);
             toggleInlineFormat(range, "**");
             expect(model.serializeParts()).toEqual([
-                {"text": "hello **world,", "type": "plain"},
+                { "text": "hello **world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how** are you doing?", "type": "plain"},
+                { "text": "how** are you doing?", "type": "plain" },
             ]);
         });
 
@@ -125,9 +125,9 @@ describe('editor/operations: formatting operations', () => {
             expect(model.serializeParts()).toEqual([
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
-                {"text": "hello world,", "type": "plain"},
+                { "text": "hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?", "type": "plain"},
+                { "text": "how are you doing?", "type": "plain" },
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
             ]);
@@ -135,9 +135,9 @@ describe('editor/operations: formatting operations', () => {
             expect(model.serializeParts()).toEqual([
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
-                {"text": "**hello world,", "type": "plain"},
+                { "text": "**hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?**", "type": "plain"},
+                { "text": "how are you doing?**", "type": "plain" },
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
             ]);
@@ -158,32 +158,32 @@ describe('editor/operations: formatting operations', () => {
             let range = model.startRange(model.positionForOffset(0, true), model.getPositionAtEnd()); // select-all
 
             expect(model.serializeParts()).toEqual([
-                {"text": "hello world,", "type": "plain"},
+                { "text": "hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?", "type": "plain"},
+                { "text": "how are you doing?", "type": "plain" },
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
-                {"text": "new paragraph", "type": "plain"},
+                { "text": "new paragraph", "type": "plain" },
             ]);
             toggleInlineFormat(range, "__");
             expect(model.serializeParts()).toEqual([
-                {"text": "__hello world,", "type": "plain"},
+                { "text": "__hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?__", "type": "plain"},
+                { "text": "how are you doing?__", "type": "plain" },
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
-                {"text": "__new paragraph__", "type": "plain"},
+                { "text": "__new paragraph__", "type": "plain" },
             ]);
             range = model.startRange(model.positionForOffset(0, true), model.getPositionAtEnd()); // select-all
             console.log("RANGE", range.parts);
             toggleInlineFormat(range, "__");
             expect(model.serializeParts()).toEqual([
-                {"text": "hello world,", "type": "plain"},
+                { "text": "hello world,", "type": "plain" },
                 SERIALIZED_NEWLINE,
-                {"text": "how are you doing?", "type": "plain"},
+                { "text": "how are you doing?", "type": "plain" },
                 SERIALIZED_NEWLINE,
                 SERIALIZED_NEWLINE,
-                {"text": "new paragraph", "type": "plain"},
+                { "text": "new paragraph", "type": "plain" },
             ]);
         });
     });
diff --git a/test/editor/position-test.js b/test/editor/position-test.js
index 90f40c21a7..813a8e9f7f 100644
--- a/test/editor/position-test.js
+++ b/test/editor/position-test.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EditorModel from "../../src/editor/model";
-import {createPartCreator} from "./mock";
+import { createPartCreator } from "./mock";
 
 function createRenderer() {
     const render = (c) => {
diff --git a/test/editor/range-test.js b/test/editor/range-test.js
index 60055af824..d411a0d911 100644
--- a/test/editor/range-test.js
+++ b/test/editor/range-test.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EditorModel from "../../src/editor/model";
-import {createPartCreator, createRenderer} from "./mock";
+import { createPartCreator, createRenderer } from "./mock";
 
 const pillChannel = "#riot-dev:matrix.org";
 
diff --git a/test/editor/serialize-test.js b/test/editor/serialize-test.js
index f0d577ea21..691130bd34 100644
--- a/test/editor/serialize-test.js
+++ b/test/editor/serialize-test.js
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import EditorModel from "../../src/editor/model";
-import {htmlSerializeIfNeeded} from "../../src/editor/serialize";
-import {createPartCreator} from "./mock";
+import { htmlSerializeIfNeeded } from "../../src/editor/serialize";
+import { createPartCreator } from "./mock";
 
 describe('editor/serialize', function() {
     it('user pill turns message into html', function() {
diff --git a/test/end-to-end-tests/src/rest/consent.js b/test/end-to-end-tests/src/rest/consent.js
index 956441571b..8be27258d0 100644
--- a/test/end-to-end-tests/src/rest/consent.js
+++ b/test/end-to-end-tests/src/rest/consent.js
@@ -27,5 +27,5 @@ module.exports.approveConsent = async function(consentUrl) {
     const h = doc("input[name=h]").val();
     const formAction = doc("form").attr("action");
     const absAction = url.resolve(consentUrl, formAction);
-    await request.post(absAction).form({v, u, h});
+    await request.post(absAction).form({ v, u, h });
 };
diff --git a/test/end-to-end-tests/src/rest/creator.js b/test/end-to-end-tests/src/rest/creator.js
index 03b2e099bc..f01a325a71 100644
--- a/test/end-to-end-tests/src/rest/creator.js
+++ b/test/end-to-end-tests/src/rest/creator.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const {exec} = require('child_process');
+const { exec } = require('child_process');
 const request = require('request-promise-native');
 const RestSession = require('./session');
 const RestMultiSession = require('./multi');
@@ -26,7 +26,7 @@ function execAsync(command, options) {
             if (error) {
                 reject(error);
             } else {
-                resolve({stdout, stderr});
+                resolve({ stdout, stderr });
             }
         });
     });
@@ -67,7 +67,7 @@ module.exports = class RestSessionCreator {
             registerCmd,
         ].join(' && ');
 
-        await execAsync(allCmds, {cwd: this.cwd, encoding: 'utf-8'});
+        await execAsync(allCmds, { cwd: this.cwd, encoding: 'utf-8' });
     }
 
     async _authenticate(username, password) {
@@ -80,7 +80,7 @@ module.exports = class RestSessionCreator {
             "password": password,
         };
         const url = `${this.hsUrl}/_matrix/client/r0/login`;
-        const responseBody = await request.post({url, json: true, body: requestBody});
+        const responseBody = await request.post({ url, json: true, body: requestBody });
         return {
             accessToken: responseBody.access_token,
             homeServer: responseBody.home_server,
diff --git a/test/end-to-end-tests/src/rest/session.js b/test/end-to-end-tests/src/rest/session.js
index 5b97824f5c..3c04592d02 100644
--- a/test/end-to-end-tests/src/rest/session.js
+++ b/test/end-to-end-tests/src/rest/session.js
@@ -17,7 +17,7 @@ limitations under the License.
 const request = require('request-promise-native');
 const Logger = require('../logger');
 const RestRoom = require('./room');
-const {approveConsent} = require('./consent');
+const { approveConsent } = require('./consent');
 
 module.exports = class RestSession {
     constructor(credentials) {
diff --git a/test/end-to-end-tests/src/scenario.js b/test/end-to-end-tests/src/scenario.js
index 2191d630ac..c44f209bf3 100644
--- a/test/end-to-end-tests/src/scenario.js
+++ b/test/end-to-end-tests/src/scenario.js
@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
-const {range} = require('./util');
+const { range } = require('./util');
 const signup = require('./usecases/signup');
 const toastScenarios = require('./scenarios/toast');
 const roomDirectoryScenarios = require('./scenarios/directory');
diff --git a/test/end-to-end-tests/src/scenarios/directory.js b/test/end-to-end-tests/src/scenarios/directory.js
index b5be9ed4f4..53b790c174 100644
--- a/test/end-to-end-tests/src/scenarios/directory.js
+++ b/test/end-to-end-tests/src/scenarios/directory.js
@@ -15,23 +15,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 const join = require('../usecases/join');
 const sendMessage = require('../usecases/send-message');
-const {receiveMessage} = require('../usecases/timeline');
-const {createRoom} = require('../usecases/create-room');
-const {changeRoomSettings} = require('../usecases/room-settings');
+const { receiveMessage } = require('../usecases/timeline');
+const { createRoom } = require('../usecases/create-room');
+const { changeRoomSettings } = require('../usecases/room-settings');
 
 module.exports = async function roomDirectoryScenarios(alice, bob) {
     console.log(" creating a public room and join through directory:");
     const room = 'test';
     await createRoom(alice, room);
-    await changeRoomSettings(alice, {directory: true, visibility: "public_no_guests", alias: "#test"});
+    await changeRoomSettings(alice, { directory: true, visibility: "public_no_guests", alias: "#test" });
     await join(bob, room); //looks up room in directory
     const bobMessage = "hi Alice!";
     await sendMessage(bob, bobMessage);
-    await receiveMessage(alice, {sender: "bob", body: bobMessage});
+    await receiveMessage(alice, { sender: "bob", body: bobMessage });
     const aliceMessage = "hi Bob, welcome!";
     await sendMessage(alice, aliceMessage);
-    await receiveMessage(bob, {sender: "alice", body: aliceMessage});
+    await receiveMessage(bob, { sender: "alice", body: aliceMessage });
 };
diff --git a/test/end-to-end-tests/src/scenarios/e2e-encryption.js b/test/end-to-end-tests/src/scenarios/e2e-encryption.js
index b20874fdaf..23234b85ce 100644
--- a/test/end-to-end-tests/src/scenarios/e2e-encryption.js
+++ b/test/end-to-end-tests/src/scenarios/e2e-encryption.js
@@ -17,19 +17,18 @@ limitations under the License.
 
 const sendMessage = require('../usecases/send-message');
 const acceptInvite = require('../usecases/accept-invite');
-const {receiveMessage} = require('../usecases/timeline');
-const {createDm} = require('../usecases/create-room');
-const {checkRoomSettings} = require('../usecases/room-settings');
-const {startSasVerification, acceptSasVerification} = require('../usecases/verify');
+const { receiveMessage } = require('../usecases/timeline');
+const { createDm } = require('../usecases/create-room');
+const { checkRoomSettings } = require('../usecases/room-settings');
+const { startSasVerification, acceptSasVerification } = require('../usecases/verify');
 const { setupSecureBackup } = require('../usecases/security');
 const assert = require('assert');
 const { measureStart, measureStop } = require('../util');
 
-
 module.exports = async function e2eEncryptionScenarios(alice, bob) {
     console.log(" creating an e2e encrypted DM and join through invite:");
     await createDm(bob, ['@alice:localhost']);
-    await checkRoomSettings(bob, {encryption: true}); // for sanity, should be e2e-by-default
+    await checkRoomSettings(bob, { encryption: true }); // for sanity, should be e2e-by-default
     await acceptInvite(alice, 'bob');
     // do sas verifcation
     bob.log.step(`starts SAS verification with ${alice.username}`);
@@ -44,9 +43,9 @@ module.exports = async function e2eEncryptionScenarios(alice, bob) {
     bob.log.done(`done (match for ${bobSas.join(", ")})`);
     const aliceMessage = "Guess what I just heard?!";
     await sendMessage(alice, aliceMessage);
-    await receiveMessage(bob, {sender: "alice", body: aliceMessage, encrypted: true});
+    await receiveMessage(bob, { sender: "alice", body: aliceMessage, encrypted: true });
     const bobMessage = "You've got to tell me!";
     await sendMessage(bob, bobMessage);
-    await receiveMessage(alice, {sender: "bob", body: bobMessage, encrypted: true});
+    await receiveMessage(alice, { sender: "bob", body: bobMessage, encrypted: true });
     await setupSecureBackup(alice);
 };
diff --git a/test/end-to-end-tests/src/scenarios/lazy-loading.js b/test/end-to-end-tests/src/scenarios/lazy-loading.js
index 6d321dc737..1b5d449af9 100644
--- a/test/end-to-end-tests/src/scenarios/lazy-loading.js
+++ b/test/end-to-end-tests/src/scenarios/lazy-loading.js
@@ -15,17 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
-const {delay} = require('../util');
+const { delay } = require('../util');
 const join = require('../usecases/join');
 const sendMessage = require('../usecases/send-message');
 const {
     checkTimelineContains,
     scrollToTimelineTop,
 } = require('../usecases/timeline');
-const {createRoom} = require('../usecases/create-room');
-const {getMembersInMemberlist} = require('../usecases/memberlist');
-const {changeRoomSettings} = require('../usecases/room-settings');
+const { createRoom } = require('../usecases/create-room');
+const { getMembersInMemberlist } = require('../usecases/memberlist');
+const { changeRoomSettings } = require('../usecases/room-settings');
 const assert = require('assert');
 
 module.exports = async function lazyLoadingScenarios(alice, bob, charlies) {
@@ -52,7 +51,7 @@ const charlyMsg2 = "how's it going??";
 
 async function setupRoomWithBobAliceAndCharlies(alice, bob, charlies) {
     await createRoom(bob, room);
-    await changeRoomSettings(bob, {directory: true, visibility: "public_no_guests", alias});
+    await changeRoomSettings(bob, { directory: true, visibility: "public_no_guests", alias });
     // wait for alias to be set by server after clicking "save"
     // so the charlies can join it.
     await bob.delay(500);
diff --git a/test/end-to-end-tests/src/scenarios/toast.js b/test/end-to-end-tests/src/scenarios/toast.js
index 8b23dbcabc..40b480c3fa 100644
--- a/test/end-to-end-tests/src/scenarios/toast.js
+++ b/test/end-to-end-tests/src/scenarios/toast.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const {assertNoToasts, acceptToast, rejectToast} = require("../usecases/toasts");
+const { assertNoToasts, acceptToast, rejectToast } = require("../usecases/toasts");
 
 module.exports = async function toastScenarios(alice, bob) {
     console.log(" checking and clearing toasts:");
diff --git a/test/end-to-end-tests/src/session.js b/test/end-to-end-tests/src/session.js
index 6c68929a0b..f5d20fde28 100644
--- a/test/end-to-end-tests/src/session.js
+++ b/test/end-to-end-tests/src/session.js
@@ -18,7 +18,7 @@ limitations under the License.
 const puppeteer = require('puppeteer');
 const Logger = require('./logger');
 const LogBuffer = require('./logbuffer');
-const {delay} = require('./util');
+const { delay } = require('./util');
 
 const DEFAULT_TIMEOUT = 20000;
 
@@ -112,7 +112,7 @@ module.exports = class ElementSession {
 
     async replaceInputText(input, text) {
         // click 3 times to select all text
-        await input.click({clickCount: 3});
+        await input.click({ clickCount: 3 });
         // waiting here solves not having selected all the text by the 3x click above,
         // presumably because of the Field label animation.
         await this.delay(300);
@@ -123,7 +123,7 @@ module.exports = class ElementSession {
     }
 
     query(selector, timeout = DEFAULT_TIMEOUT, hidden = false) {
-        return this.page.waitForSelector(selector, {visible: true, timeout, hidden});
+        return this.page.waitForSelector(selector, { visible: true, timeout, hidden });
     }
 
     async queryAll(selector) {
diff --git a/test/end-to-end-tests/src/usecases/accept-invite.js b/test/end-to-end-tests/src/usecases/accept-invite.js
index d7c024ac4b..50d685dc74 100644
--- a/test/end-to-end-tests/src/usecases/accept-invite.js
+++ b/test/end-to-end-tests/src/usecases/accept-invite.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const {findSublist} = require("./create-room");
+const { findSublist } = require("./create-room");
 
 module.exports = async function acceptInvite(session, name) {
     session.log.step(`accepts "${name}" invite`);
@@ -23,9 +23,9 @@ module.exports = async function acceptInvite(session, name) {
     const invitesHandles = await inviteSublist.$$(".mx_RoomTile_name");
     const invitesWithText = await Promise.all(invitesHandles.map(async (inviteHandle) => {
         const text = await session.innerText(inviteHandle);
-        return {inviteHandle, text};
+        return { inviteHandle, text };
     }));
-    const inviteHandle = invitesWithText.find(({inviteHandle, text}) => {
+    const inviteHandle = invitesWithText.find(({ inviteHandle, text }) => {
         return text.trim() === name;
     }).inviteHandle;
 
diff --git a/test/end-to-end-tests/src/usecases/create-room.js b/test/end-to-end-tests/src/usecases/create-room.js
index 36b9ed21ec..b644ad0309 100644
--- a/test/end-to-end-tests/src/usecases/create-room.js
+++ b/test/end-to-end-tests/src/usecases/create-room.js
@@ -84,4 +84,4 @@ async function createDm(session, invitees) {
     await measureStop(session, "mx_CreateDM");
 }
 
-module.exports = {openRoomDirectory, findSublist, createRoom, createDm};
+module.exports = { openRoomDirectory, findSublist, createRoom, createDm };
diff --git a/test/end-to-end-tests/src/usecases/join.js b/test/end-to-end-tests/src/usecases/join.js
index cf0f67be44..1dff5fc45b 100644
--- a/test/end-to-end-tests/src/usecases/join.js
+++ b/test/end-to-end-tests/src/usecases/join.js
@@ -15,10 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const {openRoomDirectory} = require('./create-room');
+const { openRoomDirectory } = require('./create-room');
 const { measureStart, measureStop } = require('../util');
 
-
 module.exports = async function join(session, roomName) {
     session.log.step(`joins room "${roomName}"`);
     await measureStart(session, "mx_JoinRoom");
diff --git a/test/end-to-end-tests/src/usecases/memberlist.js b/test/end-to-end-tests/src/usecases/memberlist.js
index ed7f0e389b..26c0c39755 100644
--- a/test/end-to-end-tests/src/usecases/memberlist.js
+++ b/test/end-to-end-tests/src/usecases/memberlist.js
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 const assert = require('assert');
-const {openRoomSummaryCard} = require("./rightpanel");
+const { openRoomSummaryCard } = require("./rightpanel");
 
 async function openMemberInfo(session, name) {
     const membersAndNames = await getMembersInMemberlist(session);
@@ -49,7 +49,6 @@ module.exports.verifyDeviceForUser = async function(session, name, expectedDevic
     const sasLabels = await Promise.all(sasLabelElements.map(e => session.innerText(e)));
     console.log("my sas labels", sasLabels);
 
-
     const dialogCodeFields = await session.queryAll(".mx_QuestionDialog code");
     assert.equal(dialogCodeFields.length, 2);
     const deviceId = await session.innerText(dialogCodeFields[0]);
@@ -71,7 +70,7 @@ async function getMembersInMemberlist(session) {
 
     const memberNameElements = await session.queryAll(".mx_MemberList .mx_EntityTile_name");
     return Promise.all(memberNameElements.map(async (el) => {
-        return {label: el, displayName: await session.innerText(el)};
+        return { label: el, displayName: await session.innerText(el) };
     }));
 }
 
diff --git a/test/end-to-end-tests/src/usecases/room-settings.js b/test/end-to-end-tests/src/usecases/room-settings.js
index 654c461296..b40afe76bf 100644
--- a/test/end-to-end-tests/src/usecases/room-settings.js
+++ b/test/end-to-end-tests/src/usecases/room-settings.js
@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 const assert = require('assert');
-const {openRoomSummaryCard} = require("./rightpanel");
-const {acceptDialog} = require('./dialog');
+const { openRoomSummaryCard } = require("./rightpanel");
+const { acceptDialog } = require('./dialog');
 
 async function setSettingsToggle(session, toggle, enabled) {
     const className = await session.getElementProperty(toggle, "className");
@@ -57,13 +57,13 @@ async function findTabs(session) {
     const tabLabels = await Promise.all(tabButtons.map(t => session.innerText(t)));
     const securityTabButton = tabButtons[tabLabels.findIndex(l => l.toLowerCase().includes("security"))];
 
-    return {securityTabButton};
+    return { securityTabButton };
 }
 
 async function checkRoomSettings(session, expectedSettings) {
     session.log.startGroup(`checks the room settings`);
 
-    const {securityTabButton} = await findTabs(session);
+    const { securityTabButton } = await findTabs(session);
     const generalSwitches = await session.queryAll(".mx_RoomSettingsDialog .mx_ToggleSwitch");
     const isDirectory = generalSwitches[0];
 
@@ -129,7 +129,7 @@ async function checkRoomSettings(session, expectedSettings) {
 async function changeRoomSettings(session, settings) {
     session.log.startGroup(`changes the room settings`);
 
-    const {securityTabButton} = await findTabs(session);
+    const { securityTabButton } = await findTabs(session);
     const generalSwitches = await session.queryAll(".mx_RoomSettingsDialog .mx_ToggleSwitch");
     const isDirectory = generalSwitches[0];
 
@@ -188,4 +188,4 @@ async function changeRoomSettings(session, settings) {
     session.log.endGroup();
 }
 
-module.exports = {checkRoomSettings, changeRoomSettings};
+module.exports = { checkRoomSettings, changeRoomSettings };
diff --git a/test/end-to-end-tests/src/usecases/settings.js b/test/end-to-end-tests/src/usecases/settings.js
index 52e4bb7e0a..509e0b4a07 100644
--- a/test/end-to-end-tests/src/usecases/settings.js
+++ b/test/end-to-end-tests/src/usecases/settings.js
@@ -51,5 +51,5 @@ module.exports.getE2EDeviceFromSettings = async function(session) {
     const closeButton = await session.query(".mx_UserSettingsDialog .mx_Dialog_cancelButton");
     await closeButton.click();
     session.log.done();
-    return {id, key};
+    return { id, key };
 };
diff --git a/test/end-to-end-tests/src/usecases/timeline.js b/test/end-to-end-tests/src/usecases/timeline.js
index 01dc618571..f9d7300ff1 100644
--- a/test/end-to-end-tests/src/usecases/timeline.js
+++ b/test/end-to-end-tests/src/usecases/timeline.js
@@ -69,7 +69,6 @@ module.exports.receiveMessage = async function(session, expectedMessage) {
     session.log.done();
 };
 
-
 module.exports.checkTimelineContains = async function(session, expectedMessages, sendersDescription) {
     session.log.step(`checks timeline contains ${expectedMessages.length} ` +
         `given messages${sendersDescription ? ` from ${sendersDescription}`:""}`);
diff --git a/test/end-to-end-tests/src/usecases/toasts.js b/test/end-to-end-tests/src/usecases/toasts.js
index d739f3b4ea..8650ff1400 100644
--- a/test/end-to-end-tests/src/usecases/toasts.js
+++ b/test/end-to-end-tests/src/usecases/toasts.js
@@ -44,4 +44,4 @@ async function rejectToast(session, expectedTitle) {
     await btn.click();
 }
 
-module.exports = {assertNoToasts, assertToast, acceptToast, rejectToast};
+module.exports = { assertNoToasts, assertToast, acceptToast, rejectToast };
diff --git a/test/end-to-end-tests/src/usecases/verify.js b/test/end-to-end-tests/src/usecases/verify.js
index a66c8c1b1c..a1f600833d 100644
--- a/test/end-to-end-tests/src/usecases/verify.js
+++ b/test/end-to-end-tests/src/usecases/verify.js
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 const assert = require('assert');
-const {openMemberInfo} = require("./memberlist");
+const { openMemberInfo } = require("./memberlist");
 
 async function startVerification(session, name) {
     session.log.step("opens their opponent's profile and starts verification");
diff --git a/test/end-to-end-tests/start.js b/test/end-to-end-tests/start.js
index 04df0c51c0..f65d6137f4 100644
--- a/test/end-to-end-tests/start.js
+++ b/test/end-to-end-tests/start.js
@@ -133,7 +133,7 @@ async function writeLogs(sessions, dir) {
         fs.writeFileSync(appHtmlName, documentHtml);
         fs.writeFileSync(networkLogName, session.networkLogs());
         fs.writeFileSync(consoleLogName, session.consoleLogs());
-        await session.page.screenshot({path: `${userLogDir}/screenshot.png`});
+        await session.page.screenshot({ path: `${userLogDir}/screenshot.png` });
     }
     return logs;
 }
diff --git a/test/notifications/ContentRules-test.js b/test/notifications/ContentRules-test.js
index ca25edf5b1..9c21c05da7 100644
--- a/test/notifications/ContentRules-test.js
+++ b/test/notifications/ContentRules-test.js
@@ -52,13 +52,12 @@ const USERNAME_RULE = {
     rule_id: ".m.rule.contains_user_name",
 };
 
-
 describe("ContentRules", function() {
     describe("parseContentRules", function() {
         it("should handle there being no keyword rules", function() {
             const rules = { 'global': { 'content': [
                     USERNAME_RULE,
-            ]}};
+            ] } };
             const parsed = ContentRules.parseContentRules(rules);
             expect(parsed.rules).toEqual([]);
             expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
@@ -69,7 +68,7 @@ describe("ContentRules", function() {
             const rules = { 'global': { 'content': [
                 NORMAL_RULE,
                 USERNAME_RULE,
-            ]}};
+            ] } };
 
             const parsed = ContentRules.parseContentRules(rules);
             expect(parsed.rules.length).toEqual(1);
@@ -82,7 +81,7 @@ describe("ContentRules", function() {
             const rules = { 'global': { 'content': [
                 LOUD_RULE,
                 USERNAME_RULE,
-            ]}};
+            ] } };
 
             const parsed = ContentRules.parseContentRules(rules);
             expect(parsed.rules.length).toEqual(1);
@@ -96,7 +95,7 @@ describe("ContentRules", function() {
                 LOUD_RULE,
                 NORMAL_RULE,
                 USERNAME_RULE,
-            ]}};
+            ] } };
 
             const parsed = ContentRules.parseContentRules(rules);
             expect(parsed.rules.length).toEqual(1);
diff --git a/test/skinned-sdk.js b/test/skinned-sdk.js
index 876a188cc0..9de13d20a1 100644
--- a/test/skinned-sdk.js
+++ b/test/skinned-sdk.js
@@ -18,12 +18,12 @@ components['structures.RightPanel'] = stubComponent();
 components['structures.RoomDirectory'] = stubComponent();
 components['views.globals.GuestWarningBar'] = stubComponent();
 components['views.globals.NewVersionBar'] = stubComponent();
-components['views.elements.Spinner'] = stubComponent({displayName: 'Spinner'});
-components['views.messages.DateSeparator'] = stubComponent({displayName: 'DateSeparator'});
-components['views.messages.MessageTimestamp'] = stubComponent({displayName: 'MessageTimestamp'});
-components['views.messages.SenderProfile'] = stubComponent({displayName: 'SenderProfile'});
+components['views.elements.Spinner'] = stubComponent({ displayName: 'Spinner' });
+components['views.messages.DateSeparator'] = stubComponent({ displayName: 'DateSeparator' });
+components['views.messages.MessageTimestamp'] = stubComponent({ displayName: 'MessageTimestamp' });
+components['views.messages.SenderProfile'] = stubComponent({ displayName: 'SenderProfile' });
 components['views.rooms.SearchBar'] = stubComponent();
 
-sdk.loadSkin({components});
+sdk.loadSkin({ components });
 
 export default sdk;
diff --git a/test/stores/RoomViewStore-test.js b/test/stores/RoomViewStore-test.js
index 41252103e7..cb5d7d21f0 100644
--- a/test/stores/RoomViewStore-test.js
+++ b/test/stores/RoomViewStore-test.js
@@ -1,6 +1,6 @@
 import RoomViewStore from '../../src/stores/RoomViewStore';
 
-import {MatrixClientPeg as peg} from '../../src/MatrixClientPeg';
+import { MatrixClientPeg as peg } from '../../src/MatrixClientPeg';
 
 import * as testUtils from '../test-utils';
 
@@ -36,7 +36,7 @@ describe('RoomViewStore', function() {
             }
         });
 
-        peg.get().getRoomIdForAlias.mockResolvedValue({room_id: "!randomcharacters:aser.ver"});
+        peg.get().getRoomIdForAlias.mockResolvedValue({ room_id: "!randomcharacters:aser.ver" });
         peg.get().joinRoom = async (roomAddress) => {
             token.remove(); // stop RVS listener
             expect(roomAddress).toBe("#somealias2:aser.ver");
diff --git a/test/test-utils.js b/test/test-utils.js
index e4c051cce2..ad56522965 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import {MatrixClientPeg as peg} from '../src/MatrixClientPeg';
+import { MatrixClientPeg as peg } from '../src/MatrixClientPeg';
 import dis from '../src/dispatcher/dispatcher';
-import {makeType} from "../src/utils/TypeUtils";
-import {ValidatedServerConfig} from "../src/utils/AutoDiscoveryUtils";
+import { makeType } from "../src/utils/TypeUtils";
+import { ValidatedServerConfig } from "../src/utils/AutoDiscoveryUtils";
 import ShallowRenderer from 'react-test-renderer/shallow';
 import MatrixClientContext from "../src/contexts/MatrixClientContext";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 export function getRenderer() {
     // Old: ReactTestUtils.createRenderer();
diff --git a/test/utils/MegolmExportEncryption-test.js b/test/utils/MegolmExportEncryption-test.js
index 07ec03860b..39ffed25f1 100644
--- a/test/utils/MegolmExportEncryption-test.js
+++ b/test/utils/MegolmExportEncryption-test.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TextEncoder} from "util";
+import { TextEncoder } from "util";
 import nodeCrypto from "crypto";
 import { Crypto } from "@peculiar/webcrypto";
 
@@ -144,7 +144,7 @@ cissyYBxjsfsAn
             const password = 'my super secret passphrase';
 
             return MegolmExportEncryption.encryptMegolmKeyFile(
-                input, password, {kdf_rounds: 1000},
+                input, password, { kdf_rounds: 1000 },
             ).then((ciphertext) => {
                 return MegolmExportEncryption.decryptMegolmKeyFile(
                     ciphertext, password,
diff --git a/test/utils/ShieldUtils-test.js b/test/utils/ShieldUtils-test.js
index fdf4f527ee..b70031dc21 100644
--- a/test/utils/ShieldUtils-test.js
+++ b/test/utils/ShieldUtils-test.js
@@ -54,7 +54,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@FF1:h", "@FF2:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@FF1:h", "@FF2:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual("normal");
@@ -67,7 +67,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@TT1:h", "@TT2:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@TT1:h", "@TT2:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -80,7 +80,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@TT1:h", "@FF2:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@TT1:h", "@FF2:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -93,7 +93,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -106,7 +106,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@TT:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@TT:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -119,7 +119,7 @@ describe("shieldStatusForMembership self-trust behaviour", function() {
         const client = mkClient(trusted);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@FF:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@FF:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -139,7 +139,7 @@ describe("shieldStatusForMembership other-trust behaviour", function() {
         const client = mkClient(true);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@TF:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@TF:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -151,7 +151,7 @@ describe("shieldStatusForMembership other-trust behaviour", function() {
         const client = mkClient(true);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@TF:h", "@TT:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@TF:h", "@TT:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -163,7 +163,7 @@ describe("shieldStatusForMembership other-trust behaviour", function() {
         const client = mkClient(true);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@FF:h", "@FT:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@FF:h", "@FT:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
@@ -175,7 +175,7 @@ describe("shieldStatusForMembership other-trust behaviour", function() {
         const client = mkClient(true);
         const room = {
             roomId: dm ? "DM" : "other",
-            getEncryptionTargetMembers: () => ["@self:localhost", "@WF:h", "@FT:h"].map((userId) => ({userId})),
+            getEncryptionTargetMembers: () => ["@self:localhost", "@WF:h", "@FT:h"].map((userId) => ({ userId })),
         };
         const status = await shieldStatusForRoom(client, room);
         expect(status).toEqual(result);
diff --git a/test/utils/Singleflight-test.ts b/test/utils/Singleflight-test.ts
index 80258701bb..148388dc71 100644
--- a/test/utils/Singleflight-test.ts
+++ b/test/utils/Singleflight-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Singleflight} from "../../src/utils/Singleflight";
+import { Singleflight } from "../../src/utils/Singleflight";
 
 describe('Singleflight', () => {
     afterEach(() => {
diff --git a/test/utils/arrays-test.ts b/test/utils/arrays-test.ts
index 5974915965..cf9a5f0089 100644
--- a/test/utils/arrays-test.ts
+++ b/test/utils/arrays-test.ts
@@ -29,7 +29,7 @@ import {
     ArrayUtil,
     GroupedArray,
 } from "../../src/utils/arrays";
-import {objectFromEntries} from "../../src/utils/objects";
+import { objectFromEntries } from "../../src/utils/objects";
 
 function expectSample(i: number, input: number[], expected: number[], smooth = false) {
     console.log(`Resample case index: ${i}`); // for debugging test failures
@@ -43,26 +43,26 @@ describe('arrays', () => {
     describe('arrayFastResample', () => {
         it('should downsample', () => {
             [
-                {input: [1, 2, 3, 4, 5], output: [1, 4]}, // Odd -> Even
-                {input: [1, 2, 3, 4, 5], output: [1, 3, 5]}, // Odd -> Odd
-                {input: [1, 2, 3, 4], output: [1, 2, 3]}, // Even -> Odd
-                {input: [1, 2, 3, 4], output: [1, 3]}, // Even -> Even
+                { input: [1, 2, 3, 4, 5], output: [1, 4] }, // Odd -> Even
+                { input: [1, 2, 3, 4, 5], output: [1, 3, 5] }, // Odd -> Odd
+                { input: [1, 2, 3, 4], output: [1, 2, 3] }, // Even -> Odd
+                { input: [1, 2, 3, 4], output: [1, 3] }, // Even -> Even
             ].forEach((c, i) => expectSample(i, c.input, c.output));
         });
 
         it('should upsample', () => {
             [
-                {input: [1, 2, 3], output: [1, 1, 2, 2, 3, 3]}, // Odd -> Even
-                {input: [1, 2, 3], output: [1, 1, 2, 2, 3]}, // Odd -> Odd
-                {input: [1, 2], output: [1, 1, 1, 2, 2]}, // Even -> Odd
-                {input: [1, 2], output: [1, 1, 1, 2, 2, 2]}, // Even -> Even
+                { input: [1, 2, 3], output: [1, 1, 2, 2, 3, 3] }, // Odd -> Even
+                { input: [1, 2, 3], output: [1, 1, 2, 2, 3] }, // Odd -> Odd
+                { input: [1, 2], output: [1, 1, 1, 2, 2] }, // Even -> Odd
+                { input: [1, 2], output: [1, 1, 1, 2, 2, 2] }, // Even -> Even
             ].forEach((c, i) => expectSample(i, c.input, c.output));
         });
 
         it('should maintain sample', () => {
             [
-                {input: [1, 2, 3], output: [1, 2, 3]}, // Odd
-                {input: [1, 2], output: [1, 2]}, // Even
+                { input: [1, 2, 3], output: [1, 2, 3] }, // Odd
+                { input: [1, 2], output: [1, 2] }, // Even
             ].forEach((c, i) => expectSample(i, c.input, c.output));
         });
     });
@@ -73,26 +73,26 @@ describe('arrays', () => {
             // we'd be feeding a thousand values in and seeing what a curve of 250 values looks like,
             // but that's not really feasible to manually verify accuracy.
             [
-                {input: [4, 4, 1, 4, 4, 1, 4, 4, 1], output: [3, 3, 3, 3]}, // Odd -> Even
-                {input: [4, 4, 1, 4, 4, 1, 4, 4, 1], output: [3, 3, 3]}, // Odd -> Odd
-                {input: [4, 4, 1, 4, 4, 1, 4, 4], output: [3, 3, 3]}, // Even -> Odd
-                {input: [4, 4, 1, 4, 4, 1, 4, 4], output: [3, 3]}, // Even -> Even
+                { input: [4, 4, 1, 4, 4, 1, 4, 4, 1], output: [3, 3, 3, 3] }, // Odd -> Even
+                { input: [4, 4, 1, 4, 4, 1, 4, 4, 1], output: [3, 3, 3] }, // Odd -> Odd
+                { input: [4, 4, 1, 4, 4, 1, 4, 4], output: [3, 3, 3] }, // Even -> Odd
+                { input: [4, 4, 1, 4, 4, 1, 4, 4], output: [3, 3] }, // Even -> Even
             ].forEach((c, i) => expectSample(i, c.input, c.output, true));
         });
 
         it('should upsample', () => {
             [
-                {input: [2, 0, 2], output: [2, 2, 0, 0, 2, 2]}, // Odd -> Even
-                {input: [2, 0, 2], output: [2, 2, 0, 0, 2]}, // Odd -> Odd
-                {input: [2, 0], output: [2, 2, 2, 0, 0]}, // Even -> Odd
-                {input: [2, 0], output: [2, 2, 2, 0, 0, 0]}, // Even -> Even
+                { input: [2, 0, 2], output: [2, 2, 0, 0, 2, 2] }, // Odd -> Even
+                { input: [2, 0, 2], output: [2, 2, 0, 0, 2] }, // Odd -> Odd
+                { input: [2, 0], output: [2, 2, 2, 0, 0] }, // Even -> Odd
+                { input: [2, 0], output: [2, 2, 2, 0, 0, 0] }, // Even -> Even
             ].forEach((c, i) => expectSample(i, c.input, c.output, true));
         });
 
         it('should maintain sample', () => {
             [
-                {input: [2, 0, 2], output: [2, 0, 2]}, // Odd
-                {input: [2, 0], output: [2, 0]}, // Even
+                { input: [2, 0, 2], output: [2, 0, 2] }, // Odd
+                { input: [2, 0], output: [2, 0] }, // Even
             ].forEach((c, i) => expectSample(i, c.input, c.output, true));
         });
     });
diff --git a/test/utils/enums-test.ts b/test/utils/enums-test.ts
index 423b135f77..e1d34ee688 100644
--- a/test/utils/enums-test.ts
+++ b/test/utils/enums-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {getEnumValues, isEnumValue} from "../../src/utils/enums";
+import { getEnumValues, isEnumValue } from "../../src/utils/enums";
 
 enum TestStringEnum {
     First = "__first__",
diff --git a/test/utils/iterables-test.ts b/test/utils/iterables-test.ts
index 9b30b6241c..5c1e2241f4 100644
--- a/test/utils/iterables-test.ts
+++ b/test/utils/iterables-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {iterableDiff, iterableUnion} from "../../src/utils/iterables";
+import { iterableDiff, iterableUnion } from "../../src/utils/iterables";
 
 describe('iterables', () => {
     describe('iterableUnion', () => {
diff --git a/test/utils/maps-test.ts b/test/utils/maps-test.ts
index 8764a8f2cf..097f3ef9c9 100644
--- a/test/utils/maps-test.ts
+++ b/test/utils/maps-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {EnhancedMap, mapDiff, mapKeyChanges} from "../../src/utils/maps";
+import { EnhancedMap, mapDiff, mapKeyChanges } from "../../src/utils/maps";
 
 describe('maps', () => {
     describe('mapDiff', () => {
@@ -187,7 +187,7 @@ describe('maps', () => {
         });
 
         it('should use the provided entries', () => {
-            const obj = {a: 1, b: 2};
+            const obj = { a: 1, b: 2 };
             const result = new EnhancedMap(Object.entries(obj));
             expect(result.size).toBe(2);
             expect(result.get('a')).toBe(1);
diff --git a/test/utils/numbers-test.ts b/test/utils/numbers-test.ts
index 36e7d4f7e7..340ffe3302 100644
--- a/test/utils/numbers-test.ts
+++ b/test/utils/numbers-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {clamp, defaultNumber, percentageOf, percentageWithin, sum} from "../../src/utils/numbers";
+import { clamp, defaultNumber, percentageOf, percentageWithin, sum } from "../../src/utils/numbers";
 
 describe('numbers', () => {
     describe('defaultNumber', () => {
diff --git a/test/utils/objects-test.ts b/test/utils/objects-test.ts
index b7a80e6761..154fa3604f 100644
--- a/test/utils/objects-test.ts
+++ b/test/utils/objects-test.ts
@@ -28,8 +28,8 @@ import {
 describe('objects', () => {
     describe('objectExcluding', () => {
         it('should exclude the given properties', () => {
-            const input = {hello: "world", test: true};
-            const output = {hello: "world"};
+            const input = { hello: "world", test: true };
+            const output = { hello: "world" };
             const props = ["test", "doesnotexist"]; // we also make sure it doesn't explode on missing props
             const result = objectExcluding(input, <any>props); // any is to test the missing prop
             expect(result).toBeDefined();
@@ -39,8 +39,8 @@ describe('objects', () => {
 
     describe('objectWithOnly', () => {
         it('should exclusively use the given properties', () => {
-            const input = {hello: "world", test: true};
-            const output = {hello: "world"};
+            const input = { hello: "world", test: true };
+            const output = { hello: "world" };
             const props = ["hello", "doesnotexist"]; // we also make sure it doesn't explode on missing props
             const result = objectWithOnly(input, <any>props); // any is to test the missing prop
             expect(result).toBeDefined();
@@ -50,7 +50,7 @@ describe('objects', () => {
 
     describe('objectShallowClone', () => {
         it('should create a new object', () => {
-            const input = {test: 1};
+            const input = { test: 1 };
             const result = objectShallowClone(input);
             expect(result).toBeDefined();
             expect(result).not.toBe(input);
@@ -58,7 +58,7 @@ describe('objects', () => {
         });
 
         it('should only clone the top level properties', () => {
-            const input = {a: 1, b: {c: 2}};
+            const input = { a: 1, b: { c: 2 } };
             const result = objectShallowClone(input);
             expect(result).toBeDefined();
             expect(result).toMatchObject(input);
@@ -66,8 +66,8 @@ describe('objects', () => {
         });
 
         it('should support custom clone functions', () => {
-            const input = {a: 1, b: 2};
-            const output = {a: 4, b: 8};
+            const input = { a: 1, b: 2 };
+            const output = { a: 4, b: 8 };
             const result = objectShallowClone(input, (k, v) => {
                 // XXX: inverted expectation for ease of assertion
                 expect(Object.keys(input)).toContain(k);
@@ -87,29 +87,29 @@ describe('objects', () => {
         });
 
         it('should return true if keys for A > keys for B', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1 };
             const result = objectHasDiff(a, b);
             expect(result).toBe(true);
         });
 
         it('should return true if keys for A < keys for B', () => {
-            const a = {a: 1};
-            const b = {a: 1, b: 2};
+            const a = { a: 1 };
+            const b = { a: 1, b: 2 };
             const result = objectHasDiff(a, b);
             expect(result).toBe(true);
         });
 
         it('should return false if the objects are the same but different pointers', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1, b: 2};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1, b: 2 };
             const result = objectHasDiff(a, b);
             expect(result).toBe(false);
         });
 
         it('should consider pointers when testing values', () => {
-            const a = {a: {}, b: 2}; // `{}` is shorthand for `new Object()`
-            const b = {a: {}, b: 2};
+            const a = { a: {}, b: 2 }; // `{}` is shorthand for `new Object()`
+            const b = { a: {}, b: 2 };
             const result = objectHasDiff(a, b);
             expect(result).toBe(true); // even though the keys are the same, the value pointers vary
         });
@@ -117,8 +117,8 @@ describe('objects', () => {
 
     describe('objectDiff', () => {
         it('should return empty sets for the same object', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1, b: 2};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1, b: 2 };
             const result = objectDiff(a, b);
             expect(result).toBeDefined();
             expect(result.changed).toBeDefined();
@@ -130,7 +130,7 @@ describe('objects', () => {
         });
 
         it('should return empty sets for the same object pointer', () => {
-            const a = {a: 1, b: 2};
+            const a = { a: 1, b: 2 };
             const result = objectDiff(a, a);
             expect(result).toBeDefined();
             expect(result.changed).toBeDefined();
@@ -142,8 +142,8 @@ describe('objects', () => {
         });
 
         it('should indicate when property changes are made', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 11, b: 2};
+            const a = { a: 1, b: 2 };
+            const b = { a: 11, b: 2 };
             const result = objectDiff(a, b);
             expect(result.changed).toBeDefined();
             expect(result.added).toBeDefined();
@@ -155,8 +155,8 @@ describe('objects', () => {
         });
 
         it('should indicate when properties are added', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1, b: 2, c: 3};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1, b: 2, c: 3 };
             const result = objectDiff(a, b);
             expect(result.changed).toBeDefined();
             expect(result.added).toBeDefined();
@@ -168,8 +168,8 @@ describe('objects', () => {
         });
 
         it('should indicate when properties are removed', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1 };
             const result = objectDiff(a, b);
             expect(result.changed).toBeDefined();
             expect(result.added).toBeDefined();
@@ -181,8 +181,8 @@ describe('objects', () => {
         });
 
         it('should indicate when multiple aspects change', () => {
-            const a = {a: 1, b: 2, c: 3};
-            const b: (typeof a | {d: number}) = {a: 1, b: 22, d: 4};
+            const a = { a: 1, b: 2, c: 3 };
+            const b: (typeof a | {d: number}) = { a: 1, b: 22, d: 4 };
             const result = objectDiff(a, b);
             expect(result.changed).toBeDefined();
             expect(result.added).toBeDefined();
@@ -198,23 +198,23 @@ describe('objects', () => {
 
     describe('objectKeyChanges', () => {
         it('should return an empty set if no properties changed', () => {
-            const a = {a: 1, b: 2};
-            const b = {a: 1, b: 2};
+            const a = { a: 1, b: 2 };
+            const b = { a: 1, b: 2 };
             const result = objectKeyChanges(a, b);
             expect(result).toBeDefined();
             expect(result).toHaveLength(0);
         });
 
         it('should return an empty set if no properties changed for the same pointer', () => {
-            const a = {a: 1, b: 2};
+            const a = { a: 1, b: 2 };
             const result = objectKeyChanges(a, a);
             expect(result).toBeDefined();
             expect(result).toHaveLength(0);
         });
 
         it('should return properties which were changed, added, or removed', () => {
-            const a = {a: 1, b: 2, c: 3};
-            const b: (typeof a | {d: number}) = {a: 1, b: 22, d: 4};
+            const a = { a: 1, b: 2, c: 3 };
+            const b: (typeof a | {d: number}) = { a: 1, b: 22, d: 4 };
             const result = objectKeyChanges(a, b);
             expect(result).toBeDefined();
             expect(result).toHaveLength(3);
@@ -245,14 +245,14 @@ describe('objects', () => {
 
     describe('objectFromEntries', () => {
         it('should create an object from an array of entries', () => {
-            const output = {a: 1, b: 2, c: 3};
+            const output = { a: 1, b: 2, c: 3 };
             const result = objectFromEntries(Object.entries(output));
             expect(result).toBeDefined();
             expect(result).toMatchObject(output);
         });
 
         it('should maintain pointers in values', () => {
-            const output = {a: {}, b: 2, c: 3};
+            const output = { a: {}, b: 2, c: 3 };
             const result = objectFromEntries(Object.entries(output));
             expect(result).toBeDefined();
             expect(result).toMatchObject(output);
diff --git a/test/utils/permalinks/Permalinks-test.js b/test/utils/permalinks/Permalinks-test.js
index 3c4982b465..41cce7f98d 100644
--- a/test/utils/permalinks/Permalinks-test.js
+++ b/test/utils/permalinks/Permalinks-test.js
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClientPeg as peg} from '../../../src/MatrixClientPeg';
+import { MatrixClientPeg as peg } from '../../../src/MatrixClientPeg';
 import {
     makeGroupPermalink,
     makeRoomPermalink,
@@ -48,7 +48,7 @@ function mockRoom(roomId, members, serverACL) {
                         content = serverACL;
                         break;
                     case "m.room.power_levels":
-                        content = {users: powerLevelsUsers, users_default: 0};
+                        content = { users: powerLevelsUsers, users_default: 0 };
                         break;
                 }
                 if (content) {
diff --git a/test/utils/sets-test.ts b/test/utils/sets-test.ts
index 98dc218309..fec6cab0f3 100644
--- a/test/utils/sets-test.ts
+++ b/test/utils/sets-test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {setHasDiff} from "../../src/utils/sets";
+import { setHasDiff } from "../../src/utils/sets";
 
 describe('sets', () => {
     describe('setHasDiff', () => {

From a4f8ca4f8a8e5cc2505216a61f160c4a1ebaff06 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:18:58 +0100
Subject: [PATCH 298/358] Switch to newer Babel specific config

---
 .eslintrc.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 07ec40ef03..bc4ad8e845 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,10 +1,9 @@
 module.exports = {
     plugins: ["matrix-org"],
     extends: [
-        "plugin:matrix-org/javascript",
+        "plugin:matrix-org/babel",
         "plugin:matrix-org/react",
     ],
-    parser: "@babel/eslint-parser",
     env: {
         browser: true,
         node: true,

From 2be40ad08acbf2eb163c1308f0daa43137a6d53f Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:19:42 +0100
Subject: [PATCH 299/358] Use unquoted keys

---
 .eslintrc.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bc4ad8e845..58f3f25dab 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,15 +26,15 @@ module.exports = {
         "react/jsx-key": ["error"],
     },
     overrides: [{
-        "files": [
+        files: [
             "src/**/*.{ts,tsx}",
             "test/**/*.{ts,tsx}",
         ],
-        "extends": [
+        extends: [
             "plugin:matrix-org/typescript",
             "plugin:matrix-org/react",
         ],
-        "rules": {
+        rules: {
             // Things we do that break the ideal style
             "prefer-promise-reject-errors": "off",
             "quotes": "off",

From b5016659715361deba27de02695a28a52dde244b Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:23:13 +0100
Subject: [PATCH 300/358] Fix parsing errors

---
 src/components/structures/FilePanel.js                        | 2 +-
 src/components/views/context_menus/MessageContextMenu.js      | 2 +-
 .../views/dialogs/TabbedIntegrationManagerDialog.js           | 4 ++--
 src/components/views/elements/PersistedElement.js             | 2 +-
 src/components/views/groups/GroupInviteTile.js                | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index bb7c1f9642..244c361402 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -159,7 +159,7 @@ class FilePanel extends React.Component {
         }
     };
 
-    async updateTimelineSet(roomId: string) {
+    async updateTimelineSet(roomId) {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
         const eventIndex = EventIndexPeg.get();
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 5d1aad0600..5bae1b5fdd 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -207,7 +207,7 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onPermalinkClick = (e: Event) => {
+    onPermalinkClick = (e) => {
         e.preventDefault();
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
index 618b0b4347..1d29ad8823 100644
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
+++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
@@ -63,11 +63,11 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         };
     }
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.openManager(0, true);
     }
 
-    openManager = async (i: number, force = false) => {
+    openManager = async (i, force = false) => {
         if (i === this.state.currentIndex && !force) return;
 
         const manager = this.state.managers[i];
diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js
index 701c140a19..d1fc96e630 100644
--- a/src/components/views/elements/PersistedElement.js
+++ b/src/components/views/elements/PersistedElement.js
@@ -187,4 +187,4 @@ export default class PersistedElement extends React.Component {
     }
 }
 
-export const getPersistKey = (appId: string) => 'widget_' + appId;
+export const getPersistKey = (appId) => 'widget_' + appId;
diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index bc0bf966f9..c4e1433316 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -32,7 +32,7 @@ import {mediaFromMxc} from "../../../customisations/Media";
 // XXX this class copies a lot from RoomTile.js
 @replaceableComponent("views.groups.GroupInviteTile")
 export default class GroupInviteTile extends React.Component {
-    static propTypes: {
+    static propTypes = {
         group: PropTypes.object.isRequired,
     };
 

From bbdd93f592d0d99da2d7539527a6d8add218d94e Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:26:09 +0100
Subject: [PATCH 301/358] Auto-fix more errors

---
 src/components/structures/FilePanel.js           | 10 +++++-----
 .../views/context_menus/MessageContextMenu.js    |  6 +++---
 .../dialogs/TabbedIntegrationManagerDialog.js    |  8 ++++----
 .../views/elements/PersistedElement.js           | 10 +++++-----
 src/components/views/groups/GroupInviteTile.js   | 16 ++++++++--------
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 244c361402..869151c1f7 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -18,15 +18,15 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Filter} from 'matrix-js-sdk/src/filter';
+import { Filter } from 'matrix-js-sdk/src/filter';
 import * as sdk from '../../index';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import { MatrixClientPeg } from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
-import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
-import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
+import { replaceableComponent } from "../../utils/replaceableComponent";
 
 /*
  * Component which shows the filtered file using a TimelinePanel
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 5bae1b5fdd..a2086451cd 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -90,7 +90,7 @@ export default class MessageContextMenu extends React.Component {
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
         if (!SettingsStore.getValue("feature_pinning")) canPin = false;
 
-        this.setState({canRedact, canPin});
+        this.setState({ canRedact, canPin });
     };
 
     _isPinned() {
@@ -149,7 +149,7 @@ export default class MessageContextMenu extends React.Component {
                         // display error message stating you couldn't delete this.
                         Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
                             title: _t('Error'),
-                            description: _t('You cannot delete this message. (%(code)s)', {code}),
+                            description: _t('You cannot delete this message. (%(code)s)', { code }),
                         });
                     }
                 }
@@ -266,7 +266,7 @@ export default class MessageContextMenu extends React.Component {
                 resendReactionsButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconResend"
-                        label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
+                        label={ _t('Resend %(unsentCount)s reaction(s)', { unsentCount: unsentReactionsCount }) }
                         onClick={this.onResendReactionsClick}
                     />
                 );
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
index 1d29ad8823..3a3cc31cf8 100644
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
+++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.js
@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import {Room} from "matrix-js-sdk/src/models/room";
+import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
+import { Room } from "matrix-js-sdk/src/models/room";
 import * as sdk from '../../../index';
-import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
+import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms";
 import classNames from 'classnames';
 import * as ScalarMessaging from "../../../ScalarMessaging";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog")
 export default class TabbedIntegrationManagerDialog extends React.Component {
diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js
index d1fc96e630..22d4bfdd68 100644
--- a/src/components/views/elements/PersistedElement.js
+++ b/src/components/views/elements/PersistedElement.js
@@ -17,14 +17,14 @@ limitations under the License.
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import {throttle} from "lodash";
+import { throttle } from "lodash";
 import ResizeObserver from 'resize-observer-polyfill';
 
 import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {isNullOrUndefined} from "matrix-js-sdk/src/utils";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -180,7 +180,7 @@ export default class PersistedElement extends React.Component {
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
         });
-    }, 100, {trailing: true, leading: true});
+    }, 100, { trailing: true, leading: true });
 
     render() {
         return <div ref={this.collectChildContainer} />;
diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index c4e1433316..c12e14e024 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -20,14 +20,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextMenu";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { ContextMenu, ContextMenuButton, toRightOf } from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../../customisations/Media";
+import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { mediaFromMxc } from "../../../customisations/Media";
 
 // XXX this class copies a lot from RoomTile.js
 @replaceableComponent("views.groups.GroupInviteTile")
@@ -57,7 +57,7 @@ export default class GroupInviteTile extends React.Component {
     };
 
     onMouseEnter = () => {
-        const state = {hover: true};
+        const state = { hover: true };
         // Only allow non-guests to access the context menu
         if (!this.context.isGuest()) {
             state.badgeHover = true;
@@ -165,7 +165,7 @@ export default class GroupInviteTile extends React.Component {
 
         return <React.Fragment>
             <RovingTabIndexWrapper>
-                {({onFocus, isActive, ref}) =>
+                {({ onFocus, isActive, ref }) =>
                     <AccessibleButton
                         onFocus={onFocus}
                         tabIndex={isActive ? 0 : -1}

From fe123fc6057ca0a90d7e957f81038895e804c09e Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:35:43 +0100
Subject: [PATCH 302/358] Rework lint comments

---
 .eslintrc.js                                 | 3 +++
 src/components/views/elements/Validation.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 58f3f25dab..cf648b7021 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -41,6 +41,9 @@ module.exports = {
             "indent": "off",
             "no-extra-boolean-cast": "off",
 
+            // Remove Babel things manually due to override limitations
+            "@babel/no-invalid-this": ["off"],
+
             // We're okay being explicit at the moment
             "@typescript-eslint/no-empty-interface": "off",
             // We disable this while we're transitioning
diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx
index 8697c46c30..ad3571513c 100644
--- a/src/components/views/elements/Validation.tsx
+++ b/src/components/views/elements/Validation.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* eslint-disable @babel/no-invalid-this */
+/* eslint-disable @typescript-eslint/no-invalid-this */
 import React from "react";
 import classNames from "classnames";
 

From 0551becafd7ff6b3bda2673de4cd80e51c5ea757 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 13:42:19 +0100
Subject: [PATCH 303/358] Fix long lines

---
 src/components/structures/GroupView.js        |  5 +++-
 src/components/structures/MatrixChat.tsx      | 10 +++++--
 .../structures/auth/Registration.tsx          |  8 +++++-
 .../views/directory/NetworkDropdown.tsx       | 24 +++++++++-------
 src/components/views/settings/BridgeTile.tsx  |  4 ++-
 .../tabs/room/SecurityRoomSettingsTab.tsx     | 28 ++++++++++++++++---
 6 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index ac798386a9..38163e72ac 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -363,7 +363,10 @@ class FeaturedUser extends React.Component {
                         "Failed to remove a user from the summary of %(groupId)s",
                         { groupId: this.props.groupId },
                     ),
-                    description: _t("The user '%(displayName)s' could not be removed from the summary.", { displayName }),
+                    description: _t(
+                        "The user '%(displayName)s' could not be removed from the summary.",
+                        { displayName },
+                    ),
                 },
             );
         });
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index e683432127..33c04335d2 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1131,8 +1131,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             description: (
                 <span>
                     { isSpace
-                        ? _t("Are you sure you want to leave the space '%(spaceName)s'?", { spaceName: roomToLeave.name })
-                        : _t("Are you sure you want to leave the room '%(roomName)s'?", { roomName: roomToLeave.name }) }
+                        ? _t(
+                            "Are you sure you want to leave the space '%(spaceName)s'?",
+                            { spaceName: roomToLeave.name },
+                        )
+                        : _t(
+                            "Are you sure you want to leave the room '%(roomName)s'?",
+                            { roomName: roomToLeave.name },
+                        )}
                     { warnings }
                 </span>
             ),
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index add536da03..f27bed2cc3 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -487,7 +487,13 @@ export default class Registration extends React.Component<IProps, IState> {
                         fragmentAfterLogin={this.props.fragmentAfterLogin}
                     />
                     <h3 className="mx_AuthBody_centered">
-                        { _t("%(ssoButtons)s Or %(usernamePassword)s", { ssoButtons: "", usernamePassword: "" }).trim() }
+                        {_t(
+                            "%(ssoButtons)s Or %(usernamePassword)s",
+                            {
+                                ssoButtons: "",
+                                usernamePassword: "",
+                            },
+                        ).trim()}
                     </h3>
                 </React.Fragment>;
             }
diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx
index 04caa7dab5..c57aa7bccc 100644
--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@@ -216,16 +216,20 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
             if (removableServers.has(server)) {
                 const onClick = async () => {
                     closeMenu();
-                    const { finished } = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
-                        title: _t("Are you sure?"),
-                        description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
-                            serverName: server,
-                        }, {
-                            b: serverName => <b>{ serverName }</b>,
-                        }),
-                        button: _t("Remove"),
-                        fixedWidth: false,
-                    }, "mx_NetworkDropdown_dialog");
+                    const { finished } = Modal.createTrackedDialog(
+                        "Network Dropdown", "Remove server", QuestionDialog,
+                        {
+                            title: _t("Are you sure?"),
+                            description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
+                                serverName: server,
+                            }, {
+                                b: serverName => <b>{ serverName }</b>,
+                            }),
+                            button: _t("Remove"),
+                            fixedWidth: false,
+                        },
+                        "mx_NetworkDropdown_dialog",
+                    );
 
                     const [ok] = await finished;
                     if (!ok) return;
diff --git a/src/components/views/settings/BridgeTile.tsx b/src/components/views/settings/BridgeTile.tsx
index c8e57562bb..d3a0c5ea13 100644
--- a/src/components/views/settings/BridgeTile.tsx
+++ b/src/components/views/settings/BridgeTile.tsx
@@ -131,7 +131,9 @@ export default class BridgeTile extends React.PureComponent<IProps> {
             const networkName = network.displayname || network.id;
             let networkLink = <span>{networkName}</span>;
             if (typeof network.external_url === "string" && isUrlPermitted(network.external_url)) {
-                networkLink = <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>;
+                networkLink = (
+                    <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>
+                );
             }
             networkItem = _t("Workspace: <networkLink/>", {}, {
                 networkLink: () => networkLink,
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 1c79836adf..4868ffd4fc 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -169,11 +169,21 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         this.setState({ joinRule, guestAccess });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(this.props.roomId, "m.room.join_rules", { join_rule: joinRule }, "").catch((e) => {
+        client.sendStateEvent(
+            this.props.roomId,
+            "m.room.join_rules",
+            { join_rule: joinRule },
+            "",
+        ).catch((e) => {
             console.error(e);
             this.setState({ joinRule: beforeJoinRule });
         });
-        client.sendStateEvent(this.props.roomId, "m.room.guest_access", { guest_access: guestAccess }, "").catch((e) => {
+        client.sendStateEvent(
+            this.props.roomId,
+            "m.room.guest_access",
+            { guest_access: guestAccess },
+            "",
+        ).catch((e) => {
             console.error(e);
             this.setState({ guestAccess: beforeGuestAccess });
         });
@@ -215,11 +225,21 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         this.setState({ joinRule, guestAccess });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(this.props.roomId, "m.room.join_rules", { join_rule: joinRule }, "").catch((e) => {
+        client.sendStateEvent(
+            this.props.roomId,
+            "m.room.join_rules",
+            { join_rule: joinRule },
+            "",
+        ).catch((e) => {
             console.error(e);
             this.setState({ joinRule: beforeJoinRule });
         });
-        client.sendStateEvent(this.props.roomId, "m.room.guest_access", { guest_access: guestAccess }, "").catch((e) => {
+        client.sendStateEvent(
+            this.props.roomId,
+            "m.room.guest_access",
+            { guest_access: guestAccess },
+            "",
+        ).catch((e) => {
             console.error(e);
             this.setState({ guestAccess: beforeGuestAccess });
         });

From f35fe7c57fb64bff24cc6150304bb5b03b5cd968 Mon Sep 17 00:00:00 2001
From: libexus <libexus@gmail.com>
Date: Sun, 27 Jun 2021 10:00:40 +0000
Subject: [PATCH 304/358] Translated using Weblate (German)

Currently translated at 99.8% (2988 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/
---
 src/i18n/strings/de_DE.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 2cc68125d7..c09b92dcbc 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -1107,7 +1107,7 @@
     "Security & Privacy": "Sicherheit",
     "Encryption": "Verschlüsselung",
     "Once enabled, encryption cannot be disabled.": "Sobald du die Verschlüsselung aktivierst, kann du sie nicht mehr deaktivieren.",
-    "Encrypted": "Verschlüsselt",
+    "Encrypted": "Verschlüsseln",
     "Ignored users": "Blockierte Benutzer",
     "Key backup": "Schlüsselsicherung",
     "Gets or sets the room topic": "Raumthema anzeigen oder ändern",
@@ -3219,7 +3219,7 @@
     "Warn before quitting": "Vor Beenden warnen",
     "Spell check dictionaries": "Wörterbücher für Rechtschreibprüfung",
     "Space options": "Matrix-Space-Optionen",
-    "Manage & explore rooms": "Räume entdecken und verwalten",
+    "Manage & explore rooms": "Räume erkunden und verwalten",
     "unknown person": "unbekannte Person",
     "Send and receive voice messages (in development)": "Sprachnachrichten senden und empfangen (in der Entwicklung)",
     "Check your devices": "Überprüfe deine Sitzungen",
@@ -3370,5 +3370,7 @@
     "End-to-end encryption isn't enabled": "Ende-zu-Ende-Verschlüsselung ist deaktiviert",
     "See when people join, leave, or are invited to your active room": "Anzeigen, wenn Leute den aktuellen Raum betreten, verlassen oder in ihn eingeladen werden",
     "Teammates might not be able to view or join any private rooms you make.": "Mitglieder werden private Räume möglicherweise weder sehen noch betreten können.",
-    "Error - Mixed content": "Fehler - Uneinheitlicher Inhalt"
+    "Error - Mixed content": "Fehler - Uneinheitlicher Inhalt",
+    "Kick, ban, or invite people to your active room, and make you leave": "Den aktiven Raum verlassen, Leute einladen, kicken oder bannen",
+    "Kick, ban, or invite people to this room, and make you leave": "Diesen Raum verlassen, Leute einladen, kicken oder bannen"
 }

From 7df42b1bdba481d44b738dd994f0c8d3c883ca9b Mon Sep 17 00:00:00 2001
From: Govindas <weblate@govindas.net>
Date: Tue, 29 Jun 2021 12:41:06 +0000
Subject: [PATCH 305/358] Translated using Weblate (Lithuanian)

Currently translated at 65.1% (1951 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lt/
---
 src/i18n/strings/lt.json | 72 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/lt.json b/src/i18n/strings/lt.json
index 83b59681e7..bbb825fb6c 100644
--- a/src/i18n/strings/lt.json
+++ b/src/i18n/strings/lt.json
@@ -260,7 +260,7 @@
     "Do you want to set an email address?": "Ar norite nustatyti el. pašto adresą?",
     "Current password": "Dabartinis slaptažodis",
     "Password": "Slaptažodis",
-    "New Password": "Naujas Slaptažodis",
+    "New Password": "Naujas slaptažodis",
     "Failed to set display name": "Nepavyko nustatyti rodomo vardo",
     "Cannot add any more widgets": "Nepavyksta pridėti daugiau valdiklių",
     "Add a widget": "Pridėti valdiklį",
@@ -2102,5 +2102,73 @@
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Element with an existing Matrix account on a different homeserver.": "Jūs galite naudoti serverio parinktis, norėdami prisijungti prie kitų Matrix serverių, nurodydami kitą serverio URL. Tai leidžia jums naudoti Element su egzistuojančia paskyra kitame serveryje.",
     "Server Options": "Serverio Parinktys",
     "Your homeserver": "Jūsų serveris",
-    "Download logs": "Parsisiųsti žurnalus"
+    "Download logs": "Parsisiųsti žurnalus",
+    "edited": "pakeista",
+    "Edited at %(date)s. Click to view edits.": "Keista %(date)s. Spustelėkite kad peržiūrėti pakeitimus.",
+    "Edited at %(date)s": "Keista %(date)s",
+    "Click to view edits": "Spustelėkite kad peržiūrėti pakeitimus",
+    "Add an Integration": "Pridėti Integraciją",
+    "Message deleted on %(date)s": "Žinutė buvo ištrinta %(date)s",
+    "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reagavo su %(shortName)s</reactedWith>",
+    "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reagavo su %(content)s</reactedWith>",
+    "Reactions": "Reakcijos",
+    "Add reaction": "Pridėti reakciją",
+    "Error processing voice message": "Klaida apdorojant balso pranešimą",
+    "Declining …": "Atmetama …",
+    "Ignored attempt to disable encryption": "Bandymas išjungti šifravimą buvo ignoruotas",
+    "Verification timed out.": "Pasibaigė laikas patikrinimui.",
+    "Ask %(displayName)s to scan your code:": "Paprašykite %(displayName)s nuskaityti jūsų kodą:",
+    "Failed to withdraw invitation": "Nepavyko atšaukti pakvietimo",
+    "Disinvite this user from community?": "Atšaukti pakvietimą šiam vartotojui iš šios bendruomenės?",
+    "Unmute": "Atšaukti nutildymą",
+    "For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.": "Dideliam žinučių kiekiui tai gali užtrukti kurį laiką. Prašome neperkrauti savo kliento.",
+    "No recent messages by %(user)s found": "Nerasta jokių naujesnių %(user)s žinučių",
+    "Accepting …": "Priimame …",
+    "You cancelled": "Jūs atšaukėte",
+    "You declined": "Jūs atsisakėte",
+    "You accepted": "Jūs priėmėte",
+    "Message Actions": "Žinutės Veiksmai",
+    "React": "Reaguoti",
+    "Edit devices": "Redaguoti įrenginius",
+    "Not encrypted": "Neužšifruota",
+    "Pinned messages": "Prisegtos žinutės",
+    "Nothing pinned, yet": "Kol kas nieko neprisegta",
+    "Mexico": "Meksika",
+    "Malaysia": "Malaizija",
+    "Iraq": "Irakas",
+    "Iran": "Iranas",
+    "Indonesia": "Indonezija",
+    "India": "Indija",
+    "Iceland": "Islandija",
+    "Greenland": "Grenlandija",
+    "Greece": "Graikija",
+    "Germany": "Vokietija",
+    "France": "Prancūzija",
+    "Finland": "Suomija",
+    "Estonia": "Estija",
+    "Egypt": "Egiptas",
+    "Denmark": "Danija",
+    "Croatia": "Kroatija",
+    "Colombia": "Kolumbija",
+    "China": "Kinija",
+    "Chile": "Čilė",
+    "Canada": "Kanada",
+    "Bulgaria": "Bulgarija",
+    "Brazil": "Brazilija",
+    "Belgium": "Belgija",
+    "Bangladesh": "Bangladešas",
+    "Try again": "Bandykite vėl",
+    "We couldn't log you in": "Mes negalėjome jūsų prijungti",
+    "You're already in a call with this person.": "Jūs jau esate pokalbyje su šiuo asmeniu.",
+    "Already in call": "Jau pokalbyje",
+    "Your Security Key": "Jūsų Saugumo Raktas",
+    "Confirm your Security Phrase": "Patvirtinkite savo Saugumo Frazę",
+    "Make a copy of your Security Key": "Sukurkite savo Saugumo Rakto kopiją",
+    "Generate a Security Key": "Generuoti Saugumo Raktą",
+    "Save your Security Key": "Išsaugoti savo Saugumo Raktą",
+    "Go to Settings": "Eiti į Nustatymus",
+    "Disable": "Išjungti",
+    "Search (must be enabled)": "Paieška (turi būti įjungta)",
+    "The user you called is busy.": "Vartotojas kuriam skambinate yra užsiėmęs.",
+    "User Busy": "Vartotojas Užsiėmęs"
 }

From 8d79a1013575a48649ee08cb07602912ac558b63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Sun, 27 Jun 2021 19:25:41 +0000
Subject: [PATCH 306/358] Translated using Weblate (Estonian)

Currently translated at 99.8% (2988 of 2993 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/
---
 src/i18n/strings/et.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index 2b723758bc..a466922bf9 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -679,7 +679,7 @@
     "%(oldDisplayName)s changed their display name to %(displayName)s.": "%(oldDisplayName)s muutis oma kuvatava nime %(displayName)s-ks.",
     "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s määras oma kuvatava nime %(displayName)s-ks.",
     "%(senderName)s removed their display name (%(oldDisplayName)s).": "%(senderName)s eemaldas oma kuvatava nime (%(oldDisplayName)s).",
-    "%(senderName)s removed their profile picture.": "%(senderName)s eemaldas om profiilipildi.",
+    "%(senderName)s removed their profile picture.": "%(senderName)s eemaldas oma profiilipildi.",
     "%(senderName)s changed their profile picture.": "%(senderName)s muutis oma profiilipilti.",
     "%(senderName)s set a profile picture.": "%(senderName)s määras oma profiilipildi.",
     "%(name)s (%(userId)s)": "%(name)s (%(userId)s)",

From d68fa223bcdf1842a55a2e8ca7185e9ce70636c2 Mon Sep 17 00:00:00 2001
From: Govindas <weblate@govindas.net>
Date: Tue, 29 Jun 2021 13:08:18 +0000
Subject: [PATCH 307/358] Translated using Weblate (Lithuanian)

Currently translated at 65.5% (1941 of 2961 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lt/
---
 src/i18n/strings/lt.json | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/i18n/strings/lt.json b/src/i18n/strings/lt.json
index bbb825fb6c..e216c2de5a 100644
--- a/src/i18n/strings/lt.json
+++ b/src/i18n/strings/lt.json
@@ -2170,5 +2170,20 @@
     "Disable": "Išjungti",
     "Search (must be enabled)": "Paieška (turi būti įjungta)",
     "The user you called is busy.": "Vartotojas kuriam skambinate yra užsiėmęs.",
-    "User Busy": "Vartotojas Užsiėmęs"
+    "User Busy": "Vartotojas Užsiėmęs",
+    "Any of the following data may be shared:": "Gali būti dalijamasi bet kuriais toliau nurodytais duomenimis:",
+    "Cancel search": "Atšaukti paiešką",
+    "Quick Reactions": "Greitos Reakcijos",
+    "Categories": "Kategorijos",
+    "Flags": "Vėliavos",
+    "Symbols": "Simboliai",
+    "Objects": "Objektai",
+    "Travel & Places": "Kelionės & Vietovės",
+    "Activities": "Veikla",
+    "Food & Drink": "Maistas & Gėrimai",
+    "Animals & Nature": "Gyvūnai & Gamta",
+    "Frequently Used": "Dažnai Naudojama",
+    "Something went wrong when trying to get your communities.": "Kažkas nepavyko bandant gauti jūsų bendruomenes.",
+    "Can't load this message": "Nepavyko įkelti šios žinutės",
+    "Submit logs": "Pateikti žurnalus"
 }

From 07f057f3818816e572780ff00fcc0b6c4b746e0d Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jun 2021 15:30:38 +0100
Subject: [PATCH 308/358] Keep indent rule enabled

---
 .eslintrc.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cf648b7021..bf6e245b93 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -38,7 +38,6 @@ module.exports = {
             // Things we do that break the ideal style
             "prefer-promise-reject-errors": "off",
             "quotes": "off",
-            "indent": "off",
             "no-extra-boolean-cast": "off",
 
             // Remove Babel things manually due to override limitations

From d03515111615891b8a86e9828b0cc21850dd0922 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 29 Jun 2021 17:04:51 +0100
Subject: [PATCH 309/358] Avoid cyclic dependencies by moving watchers out of
 constructor

---
 src/stores/room-list/RoomListStore.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index b5961f1ac3..67552043de 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -73,13 +73,6 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
 
     constructor() {
         super(defaultDispatcher);
-
-        this.checkLoggingEnabled();
-        for (const settingName of this.watchedSettings) SettingsStore.monitorSetting(settingName, null);
-        RoomViewStore.addListener(() => this.handleRVSUpdate({}));
-        this.algorithm.on(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
-        this.algorithm.on(FILTER_CHANGED, this.onAlgorithmFilterUpdated);
-        this.setupWatchers();
     }
 
     private setupWatchers() {
@@ -127,6 +120,12 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
 
         this.checkLoggingEnabled();
 
+        for (const settingName of this.watchedSettings) SettingsStore.monitorSetting(settingName, null);
+        RoomViewStore.addListener(() => this.handleRVSUpdate({}));
+        this.algorithm.on(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
+        this.algorithm.on(FILTER_CHANGED, this.onAlgorithmFilterUpdated);
+        this.setupWatchers();
+
         // Update any settings here, as some may have happened before we were logically ready.
         // Update any settings here, as some may have happened before we were logically ready.
         console.log("Regenerating room lists: Startup");

From a59e94b907ecb23f7b308e41920e8ff087e03834 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 29 Jun 2021 22:21:05 +0100
Subject: [PATCH 310/358] delint

---
 src/components/structures/MessagePanel.tsx     |  6 +++---
 src/components/structures/TimelinePanel.tsx    | 15 ++++++---------
 src/components/views/dialogs/ForwardDialog.tsx |  2 +-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 464a82302d..a0a1ac9b10 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -814,7 +814,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     private collectEventNode = (eventId: string, node: EventTile): void => {
         this.eventNodes[eventId] = node?.ref?.current;
-    }
+    };
 
     // once dynamic content in the events load, make the scrollPanel check the
     // scroll offsets.
@@ -1085,7 +1085,7 @@ class CreationGrouper extends BaseGrouper {
 class RedactionGrouper extends BaseGrouper {
     static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean {
         return panel.shouldShowEvent(ev) && ev.isRedacted();
-    }
+    };
 
     constructor(
         panel: MessagePanel,
@@ -1181,7 +1181,7 @@ class RedactionGrouper extends BaseGrouper {
 class MemberGrouper extends BaseGrouper {
     static canStartGroup = function(panel: MessagePanel, ev: MatrixEvent): boolean {
         return panel.shouldShowEvent(ev) && membershipTypes.includes(ev.getType() as EventType);
-    }
+    };
 
     constructor(
         public readonly panel: MessagePanel,
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index 511862be1b..e4c7d15596 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -374,7 +374,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 events,
                 liveEvents,
                 firstVisibleEventIndex,
-            }
+            };
 
             // We can now paginate in the unpaginated direction
             if (backwards) {
@@ -661,7 +661,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
     };
 
     private onSync = (clientSyncState: SyncState, prevState: SyncState, data: object): void => {
-        this.setState({ clientSyncState  });
+        this.setState({ clientSyncState });
     };
 
     private readMarkerTimeout(readMarkerPosition: number): number {
@@ -885,15 +885,13 @@ class TimelinePanel extends React.Component<IProps, IState> {
         if (this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
             this.loadTimeline();
         } else {
-            if (this.messagePanel.current) {
-                this.messagePanel.current.scrollToBottom();
-            }
+            this.messagePanel.current?.scrollToBottom();
         }
     };
 
     public scrollToEventIfNeeded = (eventId: string): void => {
         this.messagePanel.current?.scrollToEventIfNeeded(eventId);
-    }
+    };
 
     /* scroll to show the read-up-to marker. We put it 1/3 of the way down
      * the container.
@@ -948,11 +946,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
      * at the end of the live timeline.
      */
     public isAtEndOfLiveTimeline = (): boolean => {
-        return this.messagePanel.current
-            && this.messagePanel.current.isAtBottom()
+        return this.messagePanel.current?.isAtBottom()
             && this.timelineWindow
             && !this.timelineWindow.canPaginate(EventTimeline.FORWARDS);
-    }
+    };
 
     /* get the current scroll state. See ScrollPanel.getScrollState for
      * details.
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index b277021157..ba06436ae2 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -170,7 +170,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
         userId,
         getAvatarUrl: (..._) => {
             return avatarUrlForUser(
-                {avatarUrl: profileInfo.avatar_url},
+                { avatarUrl: profileInfo.avatar_url },
                 AVATAR_SIZE, AVATAR_SIZE, "crop",
             );
         },

From fdced3da1b156fefef6011e1f1395052b9fbddbe Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 30 Jun 2021 08:09:55 +0100
Subject: [PATCH 311/358] Remove reminescent references to the tinter

---
 res/css/structures/_GroupView.scss             | 2 +-
 res/css/views/messages/_MImageBody.scss        | 2 +-
 src/components/structures/RoomView.tsx         | 9 ---------
 src/components/views/rooms/SimpleRoomHeader.js | 2 +-
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 2350d9f28a..60f9ebdd08 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -323,7 +323,7 @@ limitations under the License.
 }
 
 .mx_GroupView_featuredThing .mx_BaseAvatar {
-    /* To prevent misalignment with mx_TintableSvg (in addButton) */
+    /* To prevent misalignment with img (in addButton) */
     vertical-align: initial;
 }
 
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 1c773c2f06..515d867da5 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -43,7 +43,7 @@ limitations under the License.
     top: 50%;
 }
 
-// Inner img and TintableSvg should be centered around 0, 0
+// Inner img should be centered around 0, 0
 .mx_MImageBody_thumbnail_spinner > * {
     transform: translate(-50%, -50%);
 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 61685e7ba8..81000a87a6 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1054,11 +1054,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         });
     }
 
-    private updateTint() {
-        const room = this.state.room;
-        if (!room) return;
-    }
-
     private onAccountData = (event: MatrixEvent) => {
         const type = event.getType();
         if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
@@ -1705,10 +1700,6 @@ export default class RoomView extends React.Component<IProps, IState> {
     // otherwise react calls it with null on each update.
     private gatherTimelinePanelRef = r => {
         this.messagePanel = r;
-        if (r) {
-            console.log("updateTint from RoomView.gatherTimelinePanelRef");
-            this.updateTint();
-        }
     };
 
     private getOldRoom() {
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 2133ccabcd..768a456b35 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -27,7 +27,7 @@ export default class SimpleRoomHeader extends React.Component {
     static propTypes = {
         title: PropTypes.string,
 
-        // `src` to a TintableSvg. Optional.
+        // `src` to an image. Optional.
         icon: PropTypes.string,
     };
 

From f3b4a2181572407cdb345123509572b972bc9494 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 30 Jun 2021 09:02:00 +0100
Subject: [PATCH 312/358] Remove Tinter reference

---
 src/components/views/messages/MStickerBody.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index aca3dba37c..eb3635b0c0 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -42,8 +42,7 @@ export default class MStickerBody extends MImageBody {
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
     getPlaceholder() {
-        const TintableSVG = sdk.getComponent('elements.TintableSvg');
-        return <TintableSVG src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
+        return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over

From e768ecb3d0806e5cc1e247ae24b666e512b0fb6d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 30 Jun 2021 13:01:26 +0100
Subject: [PATCH 313/358] Typescript conversion of Composer components and more

---
 src/CountlyAnalytics.ts                       |   3 +-
 src/HtmlUtils.tsx                             |   4 +-
 src/SlashCommands.tsx                         |  15 +-
 .../{TextualBody.js => TextualBody.tsx}       | 196 +++++++--------
 .../{TextualEvent.js => TextualEvent.tsx}     |  19 +-
 .../views/rooms/BasicMessageComposer.tsx      |  96 ++++----
 ...ageComposer.js => EditMessageComposer.tsx} | 223 +++++++++---------
 .../views/rooms/MessageComposer.tsx           |  10 +-
 ...matBar.js => MessageComposerFormatBar.tsx} |  84 ++++---
 ...ageComposer.js => SendMessageComposer.tsx} | 186 ++++++++-------
 src/editor/model.ts                           |  54 ++---
 src/editor/parts.ts                           |   8 +-
 src/utils/EditorStateTransfer.ts              |  14 +-
 src/utils/{pillify.js => pillify.tsx}         |  20 +-
 .../views/rooms/SendMessageComposer-test.js   |   4 +-
 15 files changed, 492 insertions(+), 444 deletions(-)
 rename src/components/views/messages/{TextualBody.js => TextualBody.tsx} (80%)
 rename src/components/views/messages/{TextualEvent.js => TextualEvent.tsx} (72%)
 rename src/components/views/rooms/{EditMessageComposer.js => EditMessageComposer.tsx} (70%)
 rename src/components/views/rooms/{MessageComposerFormatBar.js => MessageComposerFormatBar.tsx} (55%)
 rename src/components/views/rooms/{SendMessageComposer.js => SendMessageComposer.tsx} (78%)
 rename src/utils/{pillify.js => pillify.tsx} (91%)

diff --git a/src/CountlyAnalytics.ts b/src/CountlyAnalytics.ts
index 39dcac4048..3ad56fe3bf 100644
--- a/src/CountlyAnalytics.ts
+++ b/src/CountlyAnalytics.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { randomString } from "matrix-js-sdk/src/randomstring";
+import { IContent } from "matrix-js-sdk/src/models/event";
 
 import { getCurrentLanguage } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
@@ -868,7 +869,7 @@ export default class CountlyAnalytics {
         roomId: string,
         isEdit: boolean,
         isReply: boolean,
-        content: {format?: string, msgtype: string},
+        content: IContent,
     ) {
         if (this.disabled) return;
         const cli = MatrixClientPeg.get();
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index c80b50c566..90ee8067bb 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -358,11 +358,11 @@ interface IOpts {
     stripReplyFallback?: boolean;
     returnString?: boolean;
     forComposerQuote?: boolean;
-    ref?: React.Ref<any>;
+    ref?: React.Ref<HTMLSpanElement>;
 }
 
 export interface IOptsReturnNode extends IOpts {
-    returnString: false;
+    returnString: false | undefined;
 }
 
 export interface IOptsReturnString extends IOpts {
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 0f38c5fffc..128ca9e5e2 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -1181,7 +1181,7 @@ export const Commands = [
 ];
 
 // build a map from names and aliases to the Command objects.
-export const CommandMap = new Map();
+export const CommandMap = new Map<string, Command>();
 Commands.forEach(cmd => {
     CommandMap.set(cmd.command, cmd);
     cmd.aliases.forEach(alias => {
@@ -1189,15 +1189,15 @@ Commands.forEach(cmd => {
     });
 });
 
-export function parseCommandString(input: string) {
+export function parseCommandString(input: string): { cmd?: string, args?: string } {
     // trim any trailing whitespace, as it can confuse the parser for
     // IRC-style commands
     input = input.replace(/\s+$/, '');
     if (input[0] !== '/') return {}; // not a command
 
     const bits = input.match(/^(\S+?)(?:[ \n]+((.|\n)*))?$/);
-    let cmd;
-    let args;
+    let cmd: string;
+    let args: string;
     if (bits) {
         cmd = bits[1].substring(1).toLowerCase();
         args = bits[2];
@@ -1208,6 +1208,11 @@ export function parseCommandString(input: string) {
     return { cmd, args };
 }
 
+interface ICmd {
+    cmd?: Command;
+    args?: string;
+}
+
 /**
  * Process the given text for /commands and return a bound method to perform them.
  * @param {string} roomId The room in which the command was performed.
@@ -1216,7 +1221,7 @@ export function parseCommandString(input: string) {
  * processing the command, or 'promise' if a request was sent out.
  * Returns null if the input didn't match a command.
  */
-export function getCommand(input: string) {
+export function getCommand(input: string): ICmd {
     const { cmd, args } = parseCommandString(input);
 
     if (CommandMap.has(cmd) && CommandMap.get(cmd).isEnabled()) {
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.tsx
similarity index 80%
rename from src/components/views/messages/TextualBody.js
rename to src/components/views/messages/TextualBody.tsx
index ffaaaada4d..cb9de013bf 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.tsx
@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 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.
@@ -16,134 +14,151 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React, { createRef, SyntheticEvent } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { MsgType } from "matrix-js-sdk/lib/@types/event";
+
 import * as HtmlUtils from '../../../HtmlUtils';
 import { formatDate } from '../../../DateUtils';
-import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
+import { toRightOf } from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import ReplyThread from "../elements/ReplyThread";
 import { pillifyLinks, unmountPills } from '../../../utils/pillify';
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost } from "../../../utils/permalinks/Permalinks";
-import { toRightOf } from "../../structures/ContextMenu";
 import { copyPlaintext } from "../../../utils/strings";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
+import { TileShape } from '../rooms/EventTile';
+import EditorStateTransfer from "../../../utils/EditorStateTransfer";
+import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
+import Spoiler from "../elements/Spoiler";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import MessageEditHistoryDialog from "../dialogs/MessageEditHistoryDialog";
+import EditMessageComposer from '../rooms/EditMessageComposer';
+import LinkPreviewWidget from '../rooms/LinkPreviewWidget';
+
+interface IProps {
+    /* the MatrixEvent to show */
+    mxEvent: MatrixEvent;
+
+    /* a list of words to highlight */
+    highlights?: string[];
+
+    /* link URL for the highlights */
+    highlightLink?: string;
+
+    /* should show URL previews for this event */
+    showUrlPreview?: boolean;
+
+    /* the shape of the tile, used */
+    tileShape?: TileShape;
+
+    editState?: EditorStateTransfer;
+    replacingEventId?: string;
+
+    /* callback for when our widget has loaded */
+    onHeightChanged(): void,
+}
+
+interface IState {
+    // the URLs (if any) to be previewed with a LinkPreviewWidget inside this TextualBody.
+    links: string[];
+
+    // track whether the preview widget is hidden
+    widgetHidden: boolean;
+}
 
 @replaceableComponent("views.messages.TextualBody")
-export default class TextualBody extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
+export default class TextualBody extends React.Component<IProps, IState> {
+    private readonly contentRef = createRef<HTMLSpanElement>();
 
-        /* a list of words to highlight */
-        highlights: PropTypes.array,
-
-        /* link URL for the highlights */
-        highlightLink: PropTypes.string,
-
-        /* should show URL previews for this event */
-        showUrlPreview: PropTypes.bool,
-
-        /* callback for when our widget has loaded */
-        onHeightChanged: PropTypes.func,
-
-        /* the shape of the tile, used */
-        tileShape: PropTypes.string,
-    };
+    private unmounted = false;
+    private pills: Element[] = [];
 
     constructor(props) {
         super(props);
 
-        this._content = createRef();
-
         this.state = {
-            // the URLs (if any) to be previewed with a LinkPreviewWidget
-            // inside this TextualBody.
             links: [],
-
-            // track whether the preview widget is hidden
             widgetHidden: false,
         };
     }
 
     componentDidMount() {
-        this._unmounted = false;
-        this._pills = [];
         if (!this.props.editState) {
-            this._applyFormatting();
+            this.applyFormatting();
         }
     }
 
-    _applyFormatting() {
+    private applyFormatting(): void {
         const showLineNumbers = SettingsStore.getValue("showCodeLineNumbers");
-        this.activateSpoilers([this._content.current]);
+        this.activateSpoilers([this.contentRef.current]);
 
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
-        pillifyLinks([this._content.current], this.props.mxEvent, this._pills);
-        HtmlUtils.linkifyElement(this._content.current);
+        pillifyLinks([this.contentRef.current], this.props.mxEvent, this.pills);
+        HtmlUtils.linkifyElement(this.contentRef.current);
         this.calculateUrlPreview();
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
             // Handle expansion and add buttons
-            const pres = ReactDOM.findDOMNode(this).getElementsByTagName("pre");
+            const pres = (ReactDOM.findDOMNode(this) as Element).getElementsByTagName("pre");
             if (pres.length > 0) {
                 for (let i = 0; i < pres.length; i++) {
                     // If there already is a div wrapping the codeblock we want to skip this.
                     // This happens after the codeblock was edited.
-                    if (pres[i].parentNode.className == "mx_EventTile_pre_container") continue;
+                    if (pres[i].parentElement.className == "mx_EventTile_pre_container") continue;
                     // Add code element if it's missing since we depend on it
                     if (pres[i].getElementsByTagName("code").length == 0) {
-                        this._addCodeElement(pres[i]);
+                        this.addCodeElement(pres[i]);
                     }
                     // Wrap a div around <pre> so that the copy button can be correctly positioned
                     // when the <pre> overflows and is scrolled horizontally.
-                    const div = this._wrapInDiv(pres[i]);
-                    this._handleCodeBlockExpansion(pres[i]);
-                    this._addCodeExpansionButton(div, pres[i]);
-                    this._addCodeCopyButton(div);
+                    const div = this.wrapInDiv(pres[i]);
+                    this.handleCodeBlockExpansion(pres[i]);
+                    this.addCodeExpansionButton(div, pres[i]);
+                    this.addCodeCopyButton(div);
                     if (showLineNumbers) {
-                        this._addLineNumbers(pres[i]);
+                        this.addLineNumbers(pres[i]);
                     }
                 }
             }
             // Highlight code
-            const codes = ReactDOM.findDOMNode(this).getElementsByTagName("code");
+            const codes = (ReactDOM.findDOMNode(this) as Element).getElementsByTagName("code");
             if (codes.length > 0) {
                 // Do this asynchronously: parsing code takes time and we don't
                 // need to block the DOM update on it.
                 setTimeout(() => {
-                    if (this._unmounted) return;
+                    if (this.unmounted) return;
                     for (let i = 0; i < codes.length; i++) {
                         // If the code already has the hljs class we want to skip this.
                         // This happens after the codeblock was edited.
                         if (codes[i].className.includes("hljs")) continue;
-                        this._highlightCode(codes[i]);
+                        this.highlightCode(codes[i]);
                     }
                 }, 10);
             }
         }
     }
 
-    _addCodeElement(pre) {
+    private addCodeElement(pre: HTMLPreElement): void {
         const code = document.createElement("code");
         code.append(...pre.childNodes);
         pre.appendChild(code);
     }
 
-    _addCodeExpansionButton(div, pre) {
+    private addCodeExpansionButton(div: HTMLDivElement, pre: HTMLPreElement): void {
         // Calculate how many percent does the pre element take up.
         // If it's less than 30% we don't add the expansion button.
         const percentageOfViewport = pre.offsetHeight / UIStore.instance.windowHeight * 100;
@@ -175,7 +190,7 @@ export default class TextualBody extends React.Component {
         div.appendChild(button);
     }
 
-    _addCodeCopyButton(div) {
+    private addCodeCopyButton(div: HTMLDivElement): void {
         const button = document.createElement("span");
         button.className = "mx_EventTile_button mx_EventTile_copyButton ";
 
@@ -185,11 +200,10 @@ export default class TextualBody extends React.Component {
         if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom";
 
         button.onclick = async () => {
-            const copyCode = button.parentNode.getElementsByTagName("code")[0];
+            const copyCode = button.parentElement.getElementsByTagName("code")[0];
             const successful = await copyPlaintext(copyCode.textContent);
 
             const buttonRect = button.getBoundingClientRect();
-            const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
             const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
                 ...toRightOf(buttonRect, 2),
                 message: successful ? _t('Copied!') : _t('Failed to copy'),
@@ -200,7 +214,7 @@ export default class TextualBody extends React.Component {
         div.appendChild(button);
     }
 
-    _wrapInDiv(pre) {
+    private wrapInDiv(pre: HTMLPreElement): HTMLDivElement {
         const div = document.createElement("div");
         div.className = "mx_EventTile_pre_container";
 
@@ -212,13 +226,13 @@ export default class TextualBody extends React.Component {
         return div;
     }
 
-    _handleCodeBlockExpansion(pre) {
+    private handleCodeBlockExpansion(pre: HTMLPreElement): void {
         if (!SettingsStore.getValue("expandCodeByDefault")) {
             pre.className = "mx_EventTile_collapsedCodeBlock";
         }
     }
 
-    _addLineNumbers(pre) {
+    private addLineNumbers(pre: HTMLPreElement): void {
         // Calculate number of lines in pre
         const number = pre.innerHTML.replace(/\n(<\/code>)?$/, "").split(/\n/).length;
         pre.innerHTML = '<span class="mx_EventTile_lineNumbers"></span>' + pre.innerHTML + '<span></span>';
@@ -229,7 +243,7 @@ export default class TextualBody extends React.Component {
         }
     }
 
-    _highlightCode(code) {
+    private highlightCode(code: HTMLElement): void {
         if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) {
             highlight.highlightBlock(code);
         } else {
@@ -249,14 +263,14 @@ export default class TextualBody extends React.Component {
             const stoppedEditing = prevProps.editState && !this.props.editState;
             const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
             if (messageWasEdited || stoppedEditing) {
-                this._applyFormatting();
+                this.applyFormatting();
             }
         }
     }
 
     componentWillUnmount() {
-        this._unmounted = true;
-        unmountPills(this._pills);
+        this.unmounted = true;
+        unmountPills(this.pills);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -273,12 +287,12 @@ export default class TextualBody extends React.Component {
                 nextState.widgetHidden !== this.state.widgetHidden);
     }
 
-    calculateUrlPreview() {
+    private calculateUrlPreview(): void {
         //console.info("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
         if (this.props.showUrlPreview) {
             // pass only the first child which is the event tile otherwise this recurses on edited events
-            let links = this.findLinks([this._content.current]);
+            let links = this.findLinks([this.contentRef.current]);
             if (links.length) {
                 // de-duplicate the links after stripping hashes as they don't affect the preview
                 // using a set here maintains the order
@@ -291,8 +305,8 @@ export default class TextualBody extends React.Component {
                 this.setState({ links });
 
                 // lazy-load the hidden state of the preview widget from localstorage
-                if (global.localStorage) {
-                    const hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
+                if (window.localStorage) {
+                    const hidden = !!window.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
                     this.setState({ widgetHidden: hidden });
                 }
             } else if (this.state.links.length) {
@@ -301,19 +315,15 @@ export default class TextualBody extends React.Component {
         }
     }
 
-    activateSpoilers(nodes) {
+    private activateSpoilers(nodes: ArrayLike<Element>): void {
         let node = nodes[0];
         while (node) {
             if (node.tagName === "SPAN" && typeof node.getAttribute("data-mx-spoiler") === "string") {
                 const spoilerContainer = document.createElement('span');
 
                 const reason = node.getAttribute("data-mx-spoiler");
-                const Spoiler = sdk.getComponent('elements.Spoiler');
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
-                const spoiler = <Spoiler
-                    reason={reason}
-                    contentHtml={node.outerHTML}
-                />;
+                const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
 
                 ReactDOM.render(spoiler, spoilerContainer);
                 node.parentNode.replaceChild(spoilerContainer, node);
@@ -322,15 +332,15 @@ export default class TextualBody extends React.Component {
             }
 
             if (node.childNodes && node.childNodes.length) {
-                this.activateSpoilers(node.childNodes);
+                this.activateSpoilers(node.childNodes as NodeListOf<Element>);
             }
 
-            node = node.nextSibling;
+            node = node.nextSibling as Element;
         }
     }
 
-    findLinks(nodes) {
-        let links = [];
+    private findLinks(nodes: ArrayLike<Element>): string[] {
+        let links: string[] = [];
 
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
@@ -348,7 +358,7 @@ export default class TextualBody extends React.Component {
         return links;
     }
 
-    isLinkPreviewable(node) {
+    private isLinkPreviewable(node: Element): boolean {
         // don't try to preview relative links
         if (!node.getAttribute("href").startsWith("http://") &&
             !node.getAttribute("href").startsWith("https://")) {
@@ -381,7 +391,7 @@ export default class TextualBody extends React.Component {
         }
     }
 
-    onCancelClick = event => {
+    private onCancelClick = (): void => {
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage
         if (global.localStorage) {
@@ -390,7 +400,7 @@ export default class TextualBody extends React.Component {
         this.forceUpdate();
     };
 
-    onEmoteSenderClick = event => {
+    private onEmoteSenderClick = (): void => {
         const mxEvent = this.props.mxEvent;
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
@@ -398,7 +408,7 @@ export default class TextualBody extends React.Component {
         });
     };
 
-    getEventTileOps = () => ({
+    public getEventTileOps = () => ({
         isWidgetHidden: () => {
             return this.state.widgetHidden;
         },
@@ -411,7 +421,7 @@ export default class TextualBody extends React.Component {
         },
     });
 
-    onStarterLinkClick = (starterLink, ev) => {
+    private onStarterLinkClick = (starterLink: string, ev: SyntheticEvent): void => {
         ev.preventDefault();
         // We need to add on our scalar token to the starter link, but we may not have one!
         // In addition, we can't fetch one on click and then go to it immediately as that
@@ -431,7 +441,6 @@ export default class TextualBody extends React.Component {
         const scalarClient = integrationManager.getScalarClient();
         scalarClient.connect().then(() => {
             const completeUrl = scalarClient.getStarterLink(starterLink);
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             const integrationsUrl = integrationManager.uiUrl;
             Modal.createTrackedDialog('Add an integration', '', QuestionDialog, {
                 title: _t("Add an Integration"),
@@ -458,12 +467,11 @@ export default class TextualBody extends React.Component {
         });
     };
 
-    _openHistoryDialog = async () => {
-        const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
+    private openHistoryDialog = async (): Promise<void> => {
         Modal.createDialog(MessageEditHistoryDialog, { mxEvent: this.props.mxEvent });
     };
 
-    _renderEditedMarker() {
+    private renderEditedMarker() {
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
@@ -479,7 +487,7 @@ export default class TextualBody extends React.Component {
         return (
             <AccessibleTooltipButton
                 className="mx_EventTile_edited"
-                onClick={this._openHistoryDialog}
+                onClick={this.openHistoryDialog}
                 title={_t("Edited at %(date)s. Click to view edits.", { date: dateString })}
                 tooltip={tooltip}
             >
@@ -490,24 +498,25 @@ export default class TextualBody extends React.Component {
 
     render() {
         if (this.props.editState) {
-            const EditMessageComposer = sdk.getComponent('rooms.EditMessageComposer');
             return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
         // only strip reply if this is the original replying event, edits thereafter do not have the fallback
-        const stripReply = !mxEvent.replacingEvent() && ReplyThread.getParentEventId(mxEvent);
+        const stripReply = !mxEvent.replacingEvent() && !!ReplyThread.getParentEventId(mxEvent);
         let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
-            disableBigEmoji: content.msgtype === "m.emote" || !SettingsStore.getValue('TextualBody.enableBigEmoji'),
+            disableBigEmoji: content.msgtype === MsgType.Emote
+                || !SettingsStore.getValue<boolean>('TextualBody.enableBigEmoji'),
             // Part of Replies fallback support
             stripReplyFallback: stripReply,
-            ref: this._content,
+            ref: this.contentRef,
+            returnString: false,
         });
         if (this.props.replacingEventId) {
             body = <>
                 {body}
-                {this._renderEditedMarker()}
+                {this.renderEditedMarker()}
             </>;
         }
 
@@ -521,7 +530,6 @@ export default class TextualBody extends React.Component {
 
         let widgets;
         if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
-            const LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
             widgets = this.state.links.map((link)=>{
                 return <LinkPreviewWidget
                     key={link}
@@ -534,7 +542,7 @@ export default class TextualBody extends React.Component {
         }
 
         switch (content.msgtype) {
-            case "m.emote":
+            case MsgType.Emote:
                 return (
                     <span className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
@@ -549,7 +557,7 @@ export default class TextualBody extends React.Component {
                         { widgets }
                     </span>
                 );
-            case "m.notice":
+            case MsgType.Notice:
                 return (
                     <span className="mx_MNoticeBody mx_EventTile_content">
                         { body }
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.tsx
similarity index 72%
rename from src/components/views/messages/TextualEvent.js
rename to src/components/views/messages/TextualEvent.tsx
index 663f47dd2a..70f90a33e4 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 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.
@@ -16,20 +15,20 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
 import * as TextForEvent from "../../../TextForEvent";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.messages.TextualEvent")
-export default class TextualEvent extends React.Component {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+}
 
+@replaceableComponent("views.messages.TextualEvent")
+export default class TextualEvent extends React.Component<IProps> {
     render() {
         const text = TextForEvent.textForEvent(this.props.mxEvent, true);
-        if (text == null || text.length === 0) return null;
+        if (!text || (text as string).length === 0) return null;
         return (
             <div className="mx_TextualEvent">{ text }</div>
         );
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 94a292afe7..d317aa409b 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -41,7 +41,7 @@ import { Key } from "../../../Keyboard";
 import { EMOTICON_TO_EMOJI } from "../../../emoji";
 import { CommandCategories, CommandMap, parseCommandString } from "../../../SlashCommands";
 import Range from "../../../editor/range";
-import MessageComposerFormatBar from "./MessageComposerFormatBar";
+import MessageComposerFormatBar, { Formatting } from "./MessageComposerFormatBar";
 import DocumentOffset from "../../../editor/offset";
 import { IDiff } from "../../../editor/diff";
 import AutocompleteWrapperModel from "../../../editor/autocomplete";
@@ -55,7 +55,7 @@ const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.sourc
 
 const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
 
-function ctrlShortcutLabel(key) {
+function ctrlShortcutLabel(key: string): string {
     return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
 }
 
@@ -81,14 +81,6 @@ function selectionEquals(a: Partial<Selection>, b: Selection): boolean {
         a.type === b.type;
 }
 
-enum Formatting {
-    Bold = "bold",
-    Italics = "italics",
-    Strikethrough = "strikethrough",
-    Code = "code",
-    Quote = "quote",
-}
-
 interface IProps {
     model: EditorModel;
     room: Room;
@@ -111,9 +103,9 @@ interface IState {
 
 @replaceableComponent("views.rooms.BasicMessageEditor")
 export default class BasicMessageEditor extends React.Component<IProps, IState> {
-    private editorRef = createRef<HTMLDivElement>();
+    public readonly editorRef = createRef<HTMLDivElement>();
     private autocompleteRef = createRef<Autocomplete>();
-    private formatBarRef = createRef<typeof MessageComposerFormatBar>();
+    private formatBarRef = createRef<MessageComposerFormatBar>();
 
     private modifiedFlag = false;
     private isIMEComposing = false;
@@ -156,7 +148,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     }
 
-    private replaceEmoticon = (caretPosition: DocumentPosition) => {
+    private replaceEmoticon = (caretPosition: DocumentPosition): number => {
         const { model } = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 8 characters backwards from caretPosition,
@@ -188,7 +180,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff) => {
+    private updateEditorState = (selection: Caret, inputType?: string, diff?: IDiff): void => {
         renderModel(this.editorRef.current, this.props.model);
         if (selection) { // set the caret/selection
             try {
@@ -230,25 +222,25 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private showPlaceholder() {
+    private showPlaceholder(): void {
         // escape single quotes
         const placeholder = this.props.placeholder.replace(/'/g, '\\\'');
         this.editorRef.current.style.setProperty("--placeholder", `'${placeholder}'`);
         this.editorRef.current.classList.add("mx_BasicMessageComposer_inputEmpty");
     }
 
-    private hidePlaceholder() {
+    private hidePlaceholder(): void {
         this.editorRef.current.classList.remove("mx_BasicMessageComposer_inputEmpty");
         this.editorRef.current.style.removeProperty("--placeholder");
     }
 
-    private onCompositionStart = () => {
+    private onCompositionStart = (): void => {
         this.isIMEComposing = true;
         // even if the model is empty, the composition text shouldn't be mixed with the placeholder
         this.hidePlaceholder();
     };
 
-    private onCompositionEnd = () => {
+    private onCompositionEnd = (): void => {
         this.isIMEComposing = false;
         // some browsers (Chrome) don't fire an input event after ending a composition,
         // so trigger a model update after the composition is done by calling the input handler.
@@ -271,14 +263,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    isComposing(event: React.KeyboardEvent) {
+    public isComposing(event: React.KeyboardEvent): boolean {
         // checking the event.isComposing flag just in case any browser out there
         // emits events related to the composition after compositionend
         // has been fired
         return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
     }
 
-    private onCutCopy = (event: ClipboardEvent, type: string) => {
+    private onCutCopy = (event: ClipboardEvent, type: string): void => {
         const selection = document.getSelection();
         const text = selection.toString();
         if (text) {
@@ -296,15 +288,15 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private onCopy = (event: ClipboardEvent) => {
+    private onCopy = (event: ClipboardEvent): void => {
         this.onCutCopy(event, "copy");
     };
 
-    private onCut = (event: ClipboardEvent) => {
+    private onCut = (event: ClipboardEvent): void => {
         this.onCutCopy(event, "cut");
     };
 
-    private onPaste = (event: ClipboardEvent<HTMLDivElement>) => {
+    private onPaste = (event: ClipboardEvent<HTMLDivElement>): boolean => {
         event.preventDefault(); // we always handle the paste ourselves
         if (this.props.onPaste && this.props.onPaste(event, this.props.model)) {
             // to prevent double handling, allow props.onPaste to skip internal onPaste
@@ -328,7 +320,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         replaceRangeAndMoveCaret(range, parts);
     };
 
-    private onInput = (event: Partial<InputEvent>) => {
+    private onInput = (event: Partial<InputEvent>): void => {
         // ignore any input while doing IME compositions
         if (this.isIMEComposing) {
             return;
@@ -339,7 +331,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.props.model.update(text, event.inputType, caret);
     };
 
-    private insertText(textToInsert: string, inputType = "insertText") {
+    private insertText(textToInsert: string, inputType = "insertText"): void {
         const sel = document.getSelection();
         const { caret, text } = getCaretOffsetAndText(this.editorRef.current, sel);
         const newText = text.substr(0, caret.offset) + textToInsert + text.substr(caret.offset);
@@ -353,14 +345,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     // we don't need to. But if the user is navigating the caret without input
     // we need to recalculate it, to be able to know where to insert content after
     // losing focus
-    private setLastCaretFromPosition(position: DocumentPosition) {
+    private setLastCaretFromPosition(position: DocumentPosition): void {
         const { model } = this.props;
         this._isCaretAtEnd = position.isAtEnd(model);
         this.lastCaret = position.asOffset(model);
         this.lastSelection = cloneSelection(document.getSelection());
     }
 
-    private refreshLastCaretIfNeeded() {
+    private refreshLastCaretIfNeeded(): DocumentOffset {
         // XXX: needed when going up and down in editing messages ... not sure why yet
         // because the editors should stop doing this when when blurred ...
         // maybe it's on focus and the _editorRef isn't available yet or something.
@@ -377,38 +369,38 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         return this.lastCaret;
     }
 
-    clearUndoHistory() {
+    public clearUndoHistory(): void {
         this.historyManager.clear();
     }
 
-    getCaret() {
+    public getCaret(): DocumentOffset {
         return this.lastCaret;
     }
 
-    isSelectionCollapsed() {
+    public isSelectionCollapsed(): boolean {
         return !this.lastSelection || this.lastSelection.isCollapsed;
     }
 
-    isCaretAtStart() {
+    public isCaretAtStart(): boolean {
         return this.getCaret().offset === 0;
     }
 
-    isCaretAtEnd() {
+    public isCaretAtEnd(): boolean {
         return this._isCaretAtEnd;
     }
 
-    private onBlur = () => {
+    private onBlur = (): void => {
         document.removeEventListener("selectionchange", this.onSelectionChange);
     };
 
-    private onFocus = () => {
+    private onFocus = (): void => {
         document.addEventListener("selectionchange", this.onSelectionChange);
         // force to recalculate
         this.lastSelection = null;
         this.refreshLastCaretIfNeeded();
     };
 
-    private onSelectionChange = () => {
+    private onSelectionChange = (): void => {
         const { isEmpty } = this.props.model;
 
         this.refreshLastCaretIfNeeded();
@@ -427,7 +419,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private onKeyDown = (event: React.KeyboardEvent) => {
+    private onKeyDown = (event: React.KeyboardEvent): void => {
         const model = this.props.model;
         let handled = false;
         const action = getKeyBindingsManager().getMessageComposerAction(event);
@@ -523,7 +515,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private async tabCompleteName() {
+    private async tabCompleteName(): Promise<void> {
         try {
             await new Promise<void>(resolve => this.setState({ showVisualBell: false }, resolve));
             const { model } = this.props;
@@ -557,27 +549,27 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     }
 
-    isModified() {
+    public isModified(): boolean {
         return this.modifiedFlag;
     }
 
-    private onAutoCompleteConfirm = (completion: ICompletion) => {
+    private onAutoCompleteConfirm = (completion: ICompletion): void => {
         this.modifiedFlag = true;
         this.props.model.autoComplete.onComponentConfirm(completion);
     };
 
-    private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number) => {
+    private onAutoCompleteSelectionChange = (completion: ICompletion, completionIndex: number): void => {
         this.modifiedFlag = true;
         this.props.model.autoComplete.onComponentSelectionChange(completion);
         this.setState({ completionIndex });
     };
 
-    private configureEmoticonAutoReplace = () => {
+    private configureEmoticonAutoReplace = (): void => {
         const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
         this.props.model.setTransformCallback(shouldReplace ? this.replaceEmoticon : null);
     };
 
-    private configureShouldShowPillAvatar = () => {
+    private configureShouldShowPillAvatar = (): void => {
         const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
         this.setState({ showPillAvatar });
     };
@@ -611,8 +603,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.editorRef.current.focus();
     }
 
-    private getInitialCaretPosition() {
-        let caretPosition;
+    private getInitialCaretPosition(): DocumentPosition {
+        let caretPosition: DocumentPosition;
         if (this.props.initialCaret) {
             // if restoring state from a previous editor,
             // restore caret position from the state
@@ -625,7 +617,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         return caretPosition;
     }
 
-    private onFormatAction = (action: Formatting) => {
+    private onFormatAction = (action: Formatting): void => {
         const range = getRangeForSelection(this.editorRef.current, this.props.model, document.getSelection());
         // trim the range as we want it to exclude leading/trailing spaces
         range.trim();
@@ -680,9 +672,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
 
         const shortcuts = {
-            bold: ctrlShortcutLabel("B"),
-            italics: ctrlShortcutLabel("I"),
-            quote: ctrlShortcutLabel(">"),
+            [Formatting.Bold]: ctrlShortcutLabel("B"),
+            [Formatting.Italics]: ctrlShortcutLabel("I"),
+            [Formatting.Quote]: ctrlShortcutLabel(">"),
         };
 
         const { completionIndex } = this.state;
@@ -714,11 +706,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         </div>);
     }
 
-    focus() {
+    public focus(): void {
         this.editorRef.current.focus();
     }
 
-    public insertMention(userId: string) {
+    public insertMention(userId: string): void {
         const { model } = this.props;
         const { partCreator } = model;
         const member = this.props.room.getMember(userId);
@@ -736,7 +728,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.focus();
     }
 
-    public insertQuotedMessage(event: MatrixEvent) {
+    public insertQuotedMessage(event: MatrixEvent): void {
         const { model } = this.props;
         const { partCreator } = model;
         const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
@@ -751,7 +743,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.focus();
     }
 
-    public insertPlaintext(text: string) {
+    public insertPlaintext(text: string): void {
         const { model } = this.props;
         const { partCreator } = model;
         const caret = this.getCaret();
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.tsx
similarity index 70%
rename from src/components/views/rooms/EditMessageComposer.js
rename to src/components/views/rooms/EditMessageComposer.tsx
index 0ab972b5f1..b06b57dced 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,37 +13,42 @@ 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 React from 'react';
-import * as sdk from '../../../index';
+
+import React, { createRef, KeyboardEvent } from 'react';
+import classNames from 'classnames';
+import { EventStatus, IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
 import { _t, _td } from '../../../languageHandler';
-import PropTypes from 'prop-types';
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
 import { getCaretOffsetAndText } from '../../../editor/dom';
 import { htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand } from '../../../editor/serialize';
 import { findEditableEvent } from '../../../utils/EventUtils';
 import { parseEvent } from '../../../editor/deserialize';
-import { CommandPartCreator } from '../../../editor/parts';
+import { CommandPartCreator, Part, PartCreator } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
-import classNames from 'classnames';
-import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import BasicMessageComposer from "./BasicMessageComposer";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { CommandCategories, getCommand } from '../../../SlashCommands';
+import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import { Action } from "../../../dispatcher/actions";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SendHistoryManager from '../../../SendHistoryManager';
 import Modal from '../../../Modal';
+import { MsgType } from 'matrix-js-sdk/src/@types/event';
+import { Room } from 'matrix-js-sdk/src/models/room';
+import ErrorDialog from "../dialogs/ErrorDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import AccessibleButton from '../elements/AccessibleButton';
 
-function _isReply(mxEvent) {
+function eventIsReply(mxEvent: MatrixEvent): boolean {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
-    const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
-    return isReply;
+    return !!(relatesTo && relatesTo["m.in_reply_to"]);
 }
 
-function getHtmlReplyFallback(mxEvent) {
+function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
     if (!html) {
         return "";
@@ -54,7 +58,7 @@ function getHtmlReplyFallback(mxEvent) {
     return (mxReply && mxReply.outerHTML) || "";
 }
 
-function getTextReplyFallback(mxEvent) {
+function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
     const lines = body.split("\n").map(l => l.trim());
     if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
@@ -63,12 +67,12 @@ function getTextReplyFallback(mxEvent) {
     return "";
 }
 
-function createEditContent(model, editedEvent) {
+function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
         model = stripEmoteCommand(model);
     }
-    const isReply = _isReply(editedEvent);
+    const isReply = eventIsReply(editedEvent);
     let plainPrefix = "";
     let htmlPrefix = "";
 
@@ -79,11 +83,11 @@ function createEditContent(model, editedEvent) {
 
     const body = textSerialize(model);
 
-    const newContent = {
-        "msgtype": isEmote ? "m.emote" : "m.text",
+    const newContent: IContent = {
+        "msgtype": isEmote ? MsgType.Emote : MsgType.Text,
         "body": body,
     };
-    const contentBody = {
+    const contentBody: IContent = {
         msgtype: newContent.msgtype,
         body: `${plainPrefix} * ${body}`,
     };
@@ -105,55 +109,59 @@ function createEditContent(model, editedEvent) {
     }, contentBody);
 }
 
+interface IProps {
+    editState: EditorStateTransfer;
+    className?: string;
+}
+
+interface IState {
+    saveDisabled: boolean;
+}
+
 @replaceableComponent("views.rooms.EditMessageComposer")
-export default class EditMessageComposer extends React.Component {
-    static propTypes = {
-        // the message event being edited
-        editState: PropTypes.instanceOf(EditorStateTransfer).isRequired,
-    };
-
+export default class EditMessageComposer extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
+    context: React.ContextType<typeof MatrixClientContext>;
 
-    constructor(props, context) {
+    private readonly editorRef = createRef<BasicMessageComposer>();
+    private readonly dispatcherRef: string;
+    private model: EditorModel = null;
+
+    constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
-        this.model = null;
-        this._editorRef = null;
 
         this.state = {
             saveDisabled: true,
         };
-        this._createEditorModel();
-        window.addEventListener("beforeunload", this._saveStoredEditorState);
+
+        this.createEditorModel();
+        window.addEventListener("beforeunload", this.saveStoredEditorState);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
-    _setEditorRef = ref => {
-        this._editorRef = ref;
-    };
-
-    _getRoom() {
+    private getRoom(): Room {
         return this.context.getRoom(this.props.editState.getEvent().getRoomId());
     }
 
-    _onKeyDown = (event) => {
+    private onKeyDown = (event: KeyboardEvent): void => {
         // ignore any keypress while doing IME compositions
-        if (this._editorRef.isComposing(event)) {
+        if (this.editorRef.current?.isComposing(event)) {
             return;
         }
         const action = getKeyBindingsManager().getMessageComposerAction(event);
         switch (action) {
             case MessageComposerAction.Send:
-                this._sendEdit();
+                this.sendEdit();
                 event.preventDefault();
                 break;
             case MessageComposerAction.CancelEditing:
-                this._cancelEdit();
+                this.cancelEdit();
                 break;
             case MessageComposerAction.EditPrevMessage: {
-                if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
+                if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtStart()) {
                     return;
                 }
-                const previousEvent = findEditableEvent(this._getRoom(), false,
+                const previousEvent = findEditableEvent(this.getRoom(), false,
                     this.props.editState.getEvent().getId());
                 if (previousEvent) {
                     dis.dispatch({ action: 'edit_event', event: previousEvent });
@@ -162,14 +170,14 @@ export default class EditMessageComposer extends React.Component {
                 break;
             }
             case MessageComposerAction.EditNextMessage: {
-                if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
+                if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtEnd()) {
                     return;
                 }
-                const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
+                const nextEvent = findEditableEvent(this.getRoom(), true, this.props.editState.getEvent().getId());
                 if (nextEvent) {
                     dis.dispatch({ action: 'edit_event', event: nextEvent });
                 } else {
-                    this._clearStoredEditorState();
+                    this.clearStoredEditorState();
                     dis.dispatch({ action: 'edit_event', event: null });
                     dis.fire(Action.FocusComposer);
                 }
@@ -177,32 +185,32 @@ export default class EditMessageComposer extends React.Component {
                 break;
             }
         }
+    };
+
+    private get editorRoomKey(): string {
+        return `mx_edit_room_${this.getRoom().roomId}`;
     }
 
-    get _editorRoomKey() {
-        return `mx_edit_room_${this._getRoom().roomId}`;
-    }
-
-    get _editorStateKey() {
+    private get editorStateKey(): string {
         return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
     }
 
-    _cancelEdit = () => {
-        this._clearStoredEditorState();
+    private cancelEdit = (): void => {
+        this.clearStoredEditorState();
         dis.dispatch({ action: "edit_event", event: null });
         dis.fire(Action.FocusComposer);
+    };
+
+    private get shouldSaveStoredEditorState(): boolean {
+        return localStorage.getItem(this.editorRoomKey) !== null;
     }
 
-    get _shouldSaveStoredEditorState() {
-        return localStorage.getItem(this._editorRoomKey) !== null;
-    }
-
-    _restoreStoredEditorState(partCreator) {
-        const json = localStorage.getItem(this._editorStateKey);
+    private restoreStoredEditorState(partCreator: PartCreator): Part[] {
+        const json = localStorage.getItem(this.editorStateKey);
         if (json) {
             try {
                 const { parts: serializedParts } = JSON.parse(json);
-                const parts = serializedParts.map(p => partCreator.deserializePart(p));
+                const parts: Part[] = serializedParts.map(p => partCreator.deserializePart(p));
                 return parts;
             } catch (e) {
                 console.error("Error parsing editing state: ", e);
@@ -210,25 +218,25 @@ export default class EditMessageComposer extends React.Component {
         }
     }
 
-    _clearStoredEditorState() {
-        localStorage.removeItem(this._editorRoomKey);
-        localStorage.removeItem(this._editorStateKey);
+    private clearStoredEditorState(): void {
+        localStorage.removeItem(this.editorRoomKey);
+        localStorage.removeItem(this.editorStateKey);
     }
 
-    _clearPreviousEdit() {
-        if (localStorage.getItem(this._editorRoomKey)) {
-            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this._editorRoomKey)}`);
+    private clearPreviousEdit(): void {
+        if (localStorage.getItem(this.editorRoomKey)) {
+            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this.editorRoomKey)}`);
         }
     }
 
-    _saveStoredEditorState() {
+    private saveStoredEditorState(): void {
         const item = SendHistoryManager.createItem(this.model);
-        this._clearPreviousEdit();
-        localStorage.setItem(this._editorRoomKey, this.props.editState.getEvent().getId());
-        localStorage.setItem(this._editorStateKey, JSON.stringify(item));
+        this.clearPreviousEdit();
+        localStorage.setItem(this.editorRoomKey, this.props.editState.getEvent().getId());
+        localStorage.setItem(this.editorStateKey, JSON.stringify(item));
     }
 
-    _isSlashCommand() {
+    private isSlashCommand(): boolean {
         const parts = this.model.parts;
         const firstPart = parts[0];
         if (firstPart) {
@@ -244,10 +252,10 @@ export default class EditMessageComposer extends React.Component {
         return false;
     }
 
-    _isContentModified(newContent) {
+    private isContentModified(newContent: IContent): boolean {
         // if nothing has changed then bail
         const oldContent = this.props.editState.getEvent().getContent();
-        if (!this._editorRef.isModified() ||
+        if (!this.editorRef.current?.isModified() ||
             (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
             oldContent["format"] === newContent["format"] &&
             oldContent["formatted_body"] === newContent["formatted_body"])) {
@@ -256,7 +264,7 @@ export default class EditMessageComposer extends React.Component {
         return true;
     }
 
-    _getSlashCommand() {
+    private getSlashCommand(): [Command, string, string] {
         const commandText = this.model.parts.reduce((text, part) => {
             // use mxid to textify user pills in a command
             if (part.type === "user-pill") {
@@ -268,7 +276,7 @@ export default class EditMessageComposer extends React.Component {
         return [cmd, args, commandText];
     }
 
-    async _runSlashCommand(cmd, args, roomId) {
+    private async runSlashCommand(cmd: Command, args: string, roomId: string): Promise<void> {
         const result = cmd.run(roomId, args);
         let messageContent;
         let error = result.error;
@@ -285,7 +293,6 @@ export default class EditMessageComposer extends React.Component {
         }
         if (error) {
             console.error("Command failure: %s", error);
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             // assume the error is a server error when the command is async
             const isServerError = !!result.promise;
             const title = isServerError ? _td("Server error") : _td("Command error");
@@ -309,7 +316,7 @@ export default class EditMessageComposer extends React.Component {
         }
     }
 
-    _sendEdit = async () => {
+    private sendEdit = async (): Promise<void> => {
         const startTime = CountlyAnalytics.getTimestamp();
         const editedEvent = this.props.editState.getEvent();
         const editContent = createEditContent(this.model, editedEvent);
@@ -318,20 +325,19 @@ export default class EditMessageComposer extends React.Component {
         let shouldSend = true;
 
         // If content is modified then send an updated event into the room
-        if (this._isContentModified(newContent)) {
+        if (this.isContentModified(newContent)) {
             const roomId = editedEvent.getRoomId();
-            if (!containsEmote(this.model) && this._isSlashCommand()) {
-                const [cmd, args, commandText] = this._getSlashCommand();
+            if (!containsEmote(this.model) && this.isSlashCommand()) {
+                const [cmd, args, commandText] = this.getSlashCommand();
                 if (cmd) {
                     if (cmd.category === CommandCategories.messages) {
-                        editContent["m.new_content"] = await this._runSlashCommand(cmd, args, roomId);
+                        editContent["m.new_content"] = await this.runSlashCommand(cmd, args, roomId);
                     } else {
-                        this._runSlashCommand(cmd, args, roomId);
+                        this.runSlashCommand(cmd, args, roomId);
                         shouldSend = false;
                     }
                 } else {
                     // ask the user if their unknown command should be sent as a message
-                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                     const { finished } = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
                         title: _t("Unknown Command"),
                         description: <div>
@@ -358,9 +364,9 @@ export default class EditMessageComposer extends React.Component {
                 }
             }
             if (shouldSend) {
-                this._cancelPreviousPendingEdit();
+                this.cancelPreviousPendingEdit();
                 const prom = this.context.sendMessage(roomId, editContent);
-                this._clearStoredEditorState();
+                this.clearStoredEditorState();
                 dis.dispatch({ action: "message_sent" });
                 CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
             }
@@ -371,7 +377,7 @@ export default class EditMessageComposer extends React.Component {
         dis.fire(Action.FocusComposer);
     };
 
-    _cancelPreviousPendingEdit() {
+    private cancelPreviousPendingEdit(): void {
         const originalEvent = this.props.editState.getEvent();
         const previousEdit = originalEvent.replacingEvent();
         if (previousEdit && (
@@ -389,23 +395,23 @@ export default class EditMessageComposer extends React.Component {
         const sel = document.getSelection();
         let caret;
         if (sel.focusNode) {
-            caret = getCaretOffsetAndText(this._editorRef, sel).caret;
+            caret = getCaretOffsetAndText(this.editorRef.current, sel).caret;
         }
         const parts = this.model.serializeParts();
         // if caret is undefined because for some reason there isn't a valid selection,
         // then when mounting the editor again with the same editor state,
         // it will set the cursor at the end.
         this.props.editState.setEditorState(caret, parts);
-        window.removeEventListener("beforeunload", this._saveStoredEditorState);
-        if (this._shouldSaveStoredEditorState) {
-            this._saveStoredEditorState();
+        window.removeEventListener("beforeunload", this.saveStoredEditorState);
+        if (this.shouldSaveStoredEditorState) {
+            this.saveStoredEditorState();
         }
         dis.unregister(this.dispatcherRef);
     }
 
-    _createEditorModel() {
+    private createEditorModel(): void {
         const { editState } = this.props;
-        const room = this._getRoom();
+        const room = this.getRoom();
         const partCreator = new CommandPartCreator(room, this.context);
         let parts;
         if (editState.hasEditorState()) {
@@ -414,13 +420,13 @@ export default class EditMessageComposer extends React.Component {
             parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p));
         } else {
             //otherwise, either restore serialized parts from localStorage or parse the body of the event
-            parts = this._restoreStoredEditorState(partCreator) || parseEvent(editState.getEvent(), partCreator);
+            parts = this.restoreStoredEditorState(partCreator) || parseEvent(editState.getEvent(), partCreator);
         }
         this.model = new EditorModel(parts, partCreator);
-        this._saveStoredEditorState();
+        this.saveStoredEditorState();
     }
 
-    _getInitialCaretPosition() {
+    private getInitialCaretPosition(): CaretPosition {
         const { editState } = this.props;
         let caretPosition;
         if (editState.hasEditorState() && editState.getCaret()) {
@@ -435,8 +441,8 @@ export default class EditMessageComposer extends React.Component {
         return caretPosition;
     }
 
-    _onChange = () => {
-        if (!this.state.saveDisabled || !this._editorRef || !this._editorRef.isModified()) {
+    private onChange = (): void => {
+        if (!this.state.saveDisabled || !this.editorRef.current?.isModified()) {
             return;
         }
 
@@ -445,33 +451,34 @@ export default class EditMessageComposer extends React.Component {
         });
     };
 
-    onAction = payload => {
-        if (payload.action === "edit_composer_insert" && this._editorRef) {
+    private onAction = (payload: ActionPayload) => {
+        if (payload.action === "edit_composer_insert" && this.editorRef.current) {
             if (payload.userId) {
-                this._editorRef.insertMention(payload.userId);
+                this.editorRef.current?.insertMention(payload.userId);
             } else if (payload.event) {
-                this._editorRef.insertQuotedMessage(payload.event);
+                this.editorRef.current?.insertQuotedMessage(payload.event);
             } else if (payload.text) {
-                this._editorRef.insertPlaintext(payload.text);
+                this.editorRef.current?.insertPlaintext(payload.text);
             }
         }
     };
 
     render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
+        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
             <BasicMessageComposer
-                ref={this._setEditorRef}
+                ref={this.editorRef}
                 model={this.model}
-                room={this._getRoom()}
+                room={this.getRoom()}
                 initialCaret={this.props.editState.getCaret()}
                 label={_t("Edit message")}
-                onChange={this._onChange}
+                onChange={this.onChange}
             />
             <div className="mx_EditMessageComposer_buttons">
-                <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
-                <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
-                    {_t("Save")}
+                <AccessibleButton kind="secondary" onClick={this.cancelEdit}>
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
+                    { _t("Save") }
                 </AccessibleButton>
             </div>
         </div>);
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index db57f98025..7d61ba5ec6 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -43,6 +43,7 @@ import { E2EStatus } from '../../../utils/ShieldUtils';
 import SendMessageComposer from "./SendMessageComposer";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
+import EditorModel from "../../../editor/model";
 
 interface IComposerAvatarProps {
     me: object;
@@ -318,14 +319,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
-    addEmoji(emoji: string) {
+    private addEmoji(emoji: string) {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
             text: emoji,
         });
     }
 
-    sendMessage = async () => {
+    private sendMessage = async () => {
         if (this.state.haveRecording && this.voiceRecordingButton) {
             // There shouldn't be any text message to send when a voice recording is active, so
             // just send out the voice recording.
@@ -333,11 +334,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             return;
         }
 
-        // XXX: Private function access
-        this.messageComposerInput._sendMessage();
+        this.messageComposerInput.sendMessage();
     };
 
-    onChange = (model) => {
+    private onChange = (model: EditorModel) => {
         this.setState({
             isComposerEmpty: model.isEmpty,
         });
diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.tsx
similarity index 55%
rename from src/components/views/rooms/MessageComposerFormatBar.js
rename to src/components/views/rooms/MessageComposerFormatBar.tsx
index c31538c6cd..75bca8aac7 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,21 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
+import React, { createRef } from 'react';
 import classNames from 'classnames';
+
+import { _t } from '../../../languageHandler';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.rooms.MessageComposerFormatBar")
-export default class MessageComposerFormatBar extends React.PureComponent {
-    static propTypes = {
-        onAction: PropTypes.func.isRequired,
-        shortcuts: PropTypes.object.isRequired,
-    };
+export enum Formatting {
+    Bold = "bold",
+    Italics = "italics",
+    Strikethrough = "strikethrough",
+    Code = "code",
+    Quote = "quote",
+}
 
-    constructor(props) {
+interface IProps {
+    shortcuts: Partial<Record<Formatting, string>>;
+    onAction(action: Formatting): void;
+}
+
+interface IState {
+    visible: boolean;
+}
+
+@replaceableComponent("views.rooms.MessageComposerFormatBar")
+export default class MessageComposerFormatBar extends React.PureComponent<IProps, IState> {
+    private readonly formatBarRef = createRef<HTMLDivElement>();
+
+    constructor(props: IProps) {
         super(props);
         this.state = { visible: false };
     }
@@ -37,49 +51,53 @@ export default class MessageComposerFormatBar extends React.PureComponent {
         const classes = classNames("mx_MessageComposerFormatBar", {
             "mx_MessageComposerFormatBar_shown": this.state.visible,
         });
-        return (<div className={classes} ref={ref => this._formatBarRef = ref}>
-            <FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" shortcut={this.props.shortcuts.bold} visible={this.state.visible} />
-            <FormatButton label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" shortcut={this.props.shortcuts.italics} visible={this.state.visible} />
-            <FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" visible={this.state.visible} />
-            <FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" visible={this.state.visible} />
-            <FormatButton label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" shortcut={this.props.shortcuts.quote} visible={this.state.visible} />
+        return (<div className={classes} ref={this.formatBarRef}>
+            <FormatButton label={_t("Bold")} onClick={() => this.props.onAction(Formatting.Bold)} icon="Bold" shortcut={this.props.shortcuts.bold} visible={this.state.visible} />
+            <FormatButton label={_t("Italics")} onClick={() => this.props.onAction(Formatting.Italics)} icon="Italic" shortcut={this.props.shortcuts.italics} visible={this.state.visible} />
+            <FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction(Formatting.Strikethrough)} icon="Strikethrough" visible={this.state.visible} />
+            <FormatButton label={_t("Code block")} onClick={() => this.props.onAction(Formatting.Code)} icon="Code" visible={this.state.visible} />
+            <FormatButton label={_t("Quote")} onClick={() => this.props.onAction(Formatting.Quote)} icon="Quote" shortcut={this.props.shortcuts.quote} visible={this.state.visible} />
         </div>);
     }
 
-    showAt(selectionRect) {
+    public showAt(selectionRect: DOMRect): void {
+        if (!this.formatBarRef.current) return;
+
         this.setState({ visible: true });
-        const parentRect = this._formatBarRef.parentElement.getBoundingClientRect();
-        this._formatBarRef.style.left = `${selectionRect.left - parentRect.left}px`;
+        const parentRect = this.formatBarRef.current.parentElement.getBoundingClientRect();
+        this.formatBarRef.current.style.left = `${selectionRect.left - parentRect.left}px`;
         // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok.
-        this._formatBarRef.style.top = `${selectionRect.top - parentRect.top - 16 - 12}px`;
+        this.formatBarRef.current.style.top = `${selectionRect.top - parentRect.top - 16 - 12}px`;
     }
 
-    hide() {
+    public hide(): void {
         this.setState({ visible: false });
     }
 }
 
-class FormatButton extends React.PureComponent {
-    static propTypes = {
-        label: PropTypes.string.isRequired,
-        onClick: PropTypes.func.isRequired,
-        icon: PropTypes.string.isRequired,
-        shortcut: PropTypes.string,
-        visible: PropTypes.bool,
-    };
+interface IFormatButtonProps {
+    label: string;
+    icon: string;
+    shortcut?: string;
+    visible?: boolean;
+    onClick(): void;
+}
 
+class FormatButton extends React.PureComponent<IFormatButtonProps> {
     render() {
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
         let shortcut;
         if (this.props.shortcut) {
-            shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
+            shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">
+                { this.props.shortcut }
+            </div>;
         }
         const tooltip = <div>
             <div className="mx_Tooltip_title">
-                {this.props.label}
+                { this.props.label }
             </div>
             <div className="mx_Tooltip_sub">
-                {shortcut}
+                { shortcut }
             </div>
         </div>;
 
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.tsx
similarity index 78%
rename from src/components/views/rooms/SendMessageComposer.js
rename to src/components/views/rooms/SendMessageComposer.tsx
index cc819e05e1..2c670f6f64 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,8 +13,11 @@ 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 React from 'react';
-import PropTypes from 'prop-types';
+
+import React, { ClipboardEvent, createRef, KeyboardEvent } from 'react';
+import EMOJI_REGEX from 'emojibase-regex';
+import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
 import {
@@ -27,13 +29,12 @@ import {
     startsWith,
     stripPrefix,
 } from '../../../editor/serialize';
-import { CommandPartCreator } from '../../../editor/parts';
+import { CommandPartCreator, Part, PartCreator, SerializedPart } from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
 import ReplyThread from "../elements/ReplyThread";
 import { findEditableEvent } from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
-import { CommandCategories, getCommand } from '../../../SlashCommands';
-import * as sdk from '../../../index';
+import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import Modal from '../../../Modal';
 import { _t, _td } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
@@ -44,12 +45,20 @@ import { containsEmoji } from "../../../effects/utils";
 import { CHAT_EFFECTS } from '../../../effects';
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import EMOJI_REGEX from 'emojibase-regex';
 import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindingsManager';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from '../../../settings/SettingsStore';
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+import { Room } from 'matrix-js-sdk/src/models/room';
+import ErrorDialog from "../dialogs/ErrorDialog";
+import QuestionDialog from "../dialogs/QuestionDialog";
+import { ActionPayload } from "../../../dispatcher/payloads";
 
-function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
+function addReplyToMessageContent(
+    content: IContent,
+    repliedToEvent: MatrixEvent,
+    permalinkCreator: RoomPermalinkCreator,
+): void {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
     Object.assign(content, replyContent);
 
@@ -65,7 +74,11 @@ function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
 }
 
 // exported for tests
-export function createMessageContent(model, permalinkCreator, replyToEvent) {
+export function createMessageContent(
+    model: EditorModel,
+    permalinkCreator: RoomPermalinkCreator,
+    replyToEvent: MatrixEvent,
+): IContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
         model = stripEmoteCommand(model);
@@ -76,7 +89,7 @@ export function createMessageContent(model, permalinkCreator, replyToEvent) {
     model = unescapeMessage(model);
 
     const body = textSerialize(model);
-    const content = {
+    const content: IContent = {
         msgtype: isEmote ? "m.emote" : "m.text",
         body: body,
     };
@@ -94,7 +107,7 @@ export function createMessageContent(model, permalinkCreator, replyToEvent) {
 }
 
 // exported for tests
-export function isQuickReaction(model) {
+export function isQuickReaction(model: EditorModel): boolean {
     const parts = model.parts;
     if (parts.length == 0) return false;
     const text = textSerialize(model);
@@ -111,46 +124,47 @@ export function isQuickReaction(model) {
     return false;
 }
 
+interface IProps {
+    room: Room;
+    placeholder?: string;
+    permalinkCreator: RoomPermalinkCreator;
+    replyToEvent?: MatrixEvent;
+    disabled?: boolean;
+    onChange?(model: EditorModel): void;
+}
+
 @replaceableComponent("views.rooms.SendMessageComposer")
-export default class SendMessageComposer extends React.Component {
-    static propTypes = {
-        room: PropTypes.object.isRequired,
-        placeholder: PropTypes.string,
-        permalinkCreator: PropTypes.object.isRequired,
-        replyToEvent: PropTypes.object,
-        onChange: PropTypes.func,
-        disabled: PropTypes.bool,
-    };
-
+export default class SendMessageComposer extends React.Component<IProps> {
     static contextType = MatrixClientContext;
+    context: React.ContextType<typeof MatrixClientContext>;
 
-    constructor(props, context) {
+    private readonly prepareToEncrypt?: RateLimitedFunc;
+    private readonly editorRef = createRef<BasicMessageComposer>();
+    private model: EditorModel = null;
+    private currentlyComposedEditorState: SerializedPart[] = null;
+    private dispatcherRef: string;
+    private sendHistoryManager: SendHistoryManager;
+
+    constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
-        this.model = null;
-        this._editorRef = null;
-        this.currentlyComposedEditorState = null;
-        if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
-            this._prepareToEncrypt = new RateLimitedFunc(() => {
+        if (context.isCryptoEnabled() && context.isRoomEncrypted(this.props.room.roomId)) {
+            this.prepareToEncrypt = new RateLimitedFunc(() => {
                 this.context.prepareToEncrypt(this.props.room);
             }, 60000);
         }
 
-        window.addEventListener("beforeunload", this._saveStoredEditorState);
+        window.addEventListener("beforeunload", this.saveStoredEditorState);
     }
 
-    _setEditorRef = ref => {
-        this._editorRef = ref;
-    };
-
-    _onKeyDown = (event) => {
+    private onKeyDown = (event: KeyboardEvent): void => {
         // ignore any keypress while doing IME compositions
-        if (this._editorRef.isComposing(event)) {
+        if (this.editorRef.current?.isComposing(event)) {
             return;
         }
         const action = getKeyBindingsManager().getMessageComposerAction(event);
         switch (action) {
             case MessageComposerAction.Send:
-                this._sendMessage();
+                this.sendMessage();
                 event.preventDefault();
                 break;
             case MessageComposerAction.SelectPrevSendHistory:
@@ -165,7 +179,7 @@ export default class SendMessageComposer extends React.Component {
             }
             case MessageComposerAction.EditPrevMessage:
                 // selection must be collapsed and caret at start
-                if (this._editorRef.isSelectionCollapsed() && this._editorRef.isCaretAtStart()) {
+                if (this.editorRef.current?.isSelectionCollapsed() && this.editorRef.current?.isCaretAtStart()) {
                     const editEvent = findEditableEvent(this.props.room, false);
                     if (editEvent) {
                         // We're selecting history, so prevent the key event from doing anything else
@@ -184,16 +198,16 @@ export default class SendMessageComposer extends React.Component {
                 });
                 break;
             default:
-                if (this._prepareToEncrypt) {
+                if (this.prepareToEncrypt) {
                     // This needs to be last!
-                    this._prepareToEncrypt();
+                    this.prepareToEncrypt();
                 }
         }
     };
 
     // we keep sent messages/commands in a separate history (separate from undo history)
     // so you can alt+up/down in them
-    selectSendHistory(up) {
+    private selectSendHistory(up: boolean): void {
         const delta = up ? -1 : 1;
         // True if we are not currently selecting history, but composing a message
         if (this.sendHistoryManager.currentIndex === this.sendHistoryManager.history.length) {
@@ -215,11 +229,11 @@ export default class SendMessageComposer extends React.Component {
         });
         if (parts) {
             this.model.reset(parts);
-            this._editorRef.focus();
+            this.editorRef.current?.focus();
         }
     }
 
-    _isSlashCommand() {
+    private isSlashCommand(): boolean {
         const parts = this.model.parts;
         const firstPart = parts[0];
         if (firstPart) {
@@ -237,7 +251,7 @@ export default class SendMessageComposer extends React.Component {
         return false;
     }
 
-    _sendQuickReaction() {
+    private sendQuickReaction(): void {
         const timeline = this.props.room.getLiveTimeline();
         const events = timeline.getEvents();
         const reaction = this.model.parts[1].text;
@@ -272,7 +286,7 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
-    _getSlashCommand() {
+    private getSlashCommand(): [Command, string, string] {
         const commandText = this.model.parts.reduce((text, part) => {
             // use mxid to textify user pills in a command
             if (part.type === "user-pill") {
@@ -284,7 +298,7 @@ export default class SendMessageComposer extends React.Component {
         return [cmd, args, commandText];
     }
 
-    async _runSlashCommand(cmd, args) {
+    private async runSlashCommand(cmd: Command, args: string): Promise<void> {
         const result = cmd.run(this.props.room.roomId, args);
         let messageContent;
         let error = result.error;
@@ -302,7 +316,6 @@ export default class SendMessageComposer extends React.Component {
         }
         if (error) {
             console.error("Command failure: %s", error);
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             // assume the error is a server error when the command is async
             const isServerError = !!result.promise;
             const title = isServerError ? _td("Server error") : _td("Command error");
@@ -326,7 +339,7 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
-    async _sendMessage() {
+    public async sendMessage(): Promise<void> {
         if (this.model.isEmpty) {
             return;
         }
@@ -335,21 +348,20 @@ export default class SendMessageComposer extends React.Component {
         let shouldSend = true;
         let content;
 
-        if (!containsEmote(this.model) && this._isSlashCommand()) {
-            const [cmd, args, commandText] = this._getSlashCommand();
+        if (!containsEmote(this.model) && this.isSlashCommand()) {
+            const [cmd, args, commandText] = this.getSlashCommand();
             if (cmd) {
                 if (cmd.category === CommandCategories.messages) {
-                    content = await this._runSlashCommand(cmd, args);
+                    content = await this.runSlashCommand(cmd, args);
                     if (replyToEvent) {
                         addReplyToMessageContent(content, replyToEvent, this.props.permalinkCreator);
                     }
                 } else {
-                    this._runSlashCommand(cmd, args);
+                    this.runSlashCommand(cmd, args);
                     shouldSend = false;
                 }
             } else {
                 // ask the user if their unknown command should be sent as a message
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 const { finished } = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
                     title: _t("Unknown Command"),
                     description: <div>
@@ -378,7 +390,7 @@ export default class SendMessageComposer extends React.Component {
 
         if (isQuickReaction(this.model)) {
             shouldSend = false;
-            this._sendQuickReaction();
+            this.sendQuickReaction();
         }
 
         if (shouldSend) {
@@ -411,9 +423,9 @@ export default class SendMessageComposer extends React.Component {
         this.sendHistoryManager.save(this.model, replyToEvent);
         // clear composer
         this.model.reset([]);
-        this._editorRef.clearUndoHistory();
-        this._editorRef.focus();
-        this._clearStoredEditorState();
+        this.editorRef.current?.clearUndoHistory();
+        this.editorRef.current?.focus();
+        this.clearStoredEditorState();
         if (SettingsStore.getValue("scrollToBottomOnMessageSent")) {
             dis.dispatch({ action: "scroll_to_bottom" });
         }
@@ -421,33 +433,33 @@ export default class SendMessageComposer extends React.Component {
 
     componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
-        window.removeEventListener("beforeunload", this._saveStoredEditorState);
-        this._saveStoredEditorState();
+        window.removeEventListener("beforeunload", this.saveStoredEditorState);
+        this.saveStoredEditorState();
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
     UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         const partCreator = new CommandPartCreator(this.props.room, this.context);
-        const parts = this._restoreStoredEditorState(partCreator) || [];
+        const parts = this.restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);
         this.dispatcherRef = dis.register(this.onAction);
         this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, 'mx_cider_history_');
     }
 
-    get _editorStateKey() {
+    private get editorStateKey() {
         return `mx_cider_state_${this.props.room.roomId}`;
     }
 
-    _clearStoredEditorState() {
-        localStorage.removeItem(this._editorStateKey);
+    private clearStoredEditorState(): void {
+        localStorage.removeItem(this.editorStateKey);
     }
 
-    _restoreStoredEditorState(partCreator) {
-        const json = localStorage.getItem(this._editorStateKey);
+    private restoreStoredEditorState(partCreator: PartCreator): Part[] {
+        const json = localStorage.getItem(this.editorStateKey);
         if (json) {
             try {
                 const { parts: serializedParts, replyEventId } = JSON.parse(json);
-                const parts = serializedParts.map(p => partCreator.deserializePart(p));
+                const parts: Part[] = serializedParts.map(p => partCreator.deserializePart(p));
                 if (replyEventId) {
                     dis.dispatch({
                         action: 'reply_to_event',
@@ -462,20 +474,20 @@ export default class SendMessageComposer extends React.Component {
     }
 
     // should save state when editor has contents or reply is open
-    _shouldSaveStoredEditorState = () => {
-        return !this.model.isEmpty || this.props.replyToEvent;
-    }
+    private shouldSaveStoredEditorState = (): boolean => {
+        return !this.model.isEmpty || !!this.props.replyToEvent;
+    };
 
-    _saveStoredEditorState = () => {
-        if (this._shouldSaveStoredEditorState()) {
+    private saveStoredEditorState = (): void => {
+        if (this.shouldSaveStoredEditorState()) {
             const item = SendHistoryManager.createItem(this.model, this.props.replyToEvent);
-            localStorage.setItem(this._editorStateKey, JSON.stringify(item));
+            localStorage.setItem(this.editorStateKey, JSON.stringify(item));
         } else {
-            this._clearStoredEditorState();
+            this.clearStoredEditorState();
         }
-    }
+    };
 
-    onAction = (payload) => {
+    private onAction = (payload: ActionPayload): void => {
         // don't let the user into the composer if it is disabled - all of these branches lead
         // to the cursor being in the composer
         if (this.props.disabled) return;
@@ -483,21 +495,21 @@ export default class SendMessageComposer extends React.Component {
         switch (payload.action) {
             case 'reply_to_event':
             case Action.FocusComposer:
-                this._editorRef && this._editorRef.focus();
+                this.editorRef.current?.focus();
                 break;
             case "send_composer_insert":
                 if (payload.userId) {
-                    this._editorRef && this._editorRef.insertMention(payload.userId);
+                    this.editorRef.current?.insertMention(payload.userId);
                 } else if (payload.event) {
-                    this._editorRef && this._editorRef.insertQuotedMessage(payload.event);
+                    this.editorRef.current?.insertQuotedMessage(payload.event);
                 } else if (payload.text) {
-                    this._editorRef && this._editorRef.insertPlaintext(payload.text);
+                    this.editorRef.current?.insertPlaintext(payload.text);
                 }
                 break;
         }
     };
 
-    _onPaste = (event) => {
+    private onPaste = (event: ClipboardEvent<HTMLDivElement>): boolean => {
         const { clipboardData } = event;
         // Prioritize text on the clipboard over files as Office on macOS puts a bitmap
         // in the clipboard as well as the content being copied.
@@ -511,23 +523,27 @@ export default class SendMessageComposer extends React.Component {
             );
             return true; // to skip internal onPaste handler
         }
-    }
+    };
 
-    onChange = () => {
+    private onChange = (): void => {
         if (this.props.onChange) this.props.onChange(this.model);
-    }
+    };
+
+    private focusComposer = (): void => {
+        this.editorRef.current?.focus();
+    };
 
     render() {
         return (
-            <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
+            <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this.onKeyDown}>
                 <BasicMessageComposer
                     onChange={this.onChange}
-                    ref={this._setEditorRef}
+                    ref={this.editorRef}
                     model={this.model}
                     room={this.props.room}
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
-                    onPaste={this._onPaste}
+                    onPaste={this.onPaste}
                     disabled={this.props.disabled}
                 />
             </div>
diff --git a/src/editor/model.ts b/src/editor/model.ts
index 1e8498a69e..da1c2f47f5 100644
--- a/src/editor/model.ts
+++ b/src/editor/model.ts
@@ -70,7 +70,7 @@ export default class EditorModel {
      * on the model that can span multiple parts. Also see `startRange()`.
      * @param {TransformCallback} transformCallback
      */
-    setTransformCallback(transformCallback: TransformCallback) {
+    public setTransformCallback(transformCallback: TransformCallback): void {
         this.transformCallback = transformCallback;
     }
 
@@ -78,23 +78,23 @@ export default class EditorModel {
      * Set a callback for rerendering the model after it has been updated.
      * @param {ModelCallback} updateCallback
      */
-    setUpdateCallback(updateCallback: UpdateCallback) {
+    public setUpdateCallback(updateCallback: UpdateCallback): void {
         this.updateCallback = updateCallback;
     }
 
-    get partCreator() {
+    public get partCreator(): PartCreator {
         return this._partCreator;
     }
 
-    get isEmpty() {
+    public get isEmpty(): boolean {
         return this._parts.reduce((len, part) => len + part.text.length, 0) === 0;
     }
 
-    clone() {
+    public clone(): EditorModel {
         return new EditorModel(this._parts, this._partCreator, this.updateCallback);
     }
 
-    private insertPart(index: number, part: Part) {
+    private insertPart(index: number, part: Part): void {
         this._parts.splice(index, 0, part);
         if (this.activePartIdx >= index) {
             ++this.activePartIdx;
@@ -104,7 +104,7 @@ export default class EditorModel {
         }
     }
 
-    private removePart(index: number) {
+    private removePart(index: number): void {
         this._parts.splice(index, 1);
         if (index === this.activePartIdx) {
             this.activePartIdx = null;
@@ -118,22 +118,22 @@ export default class EditorModel {
         }
     }
 
-    private replacePart(index: number, part: Part) {
+    private replacePart(index: number, part: Part): void {
         this._parts.splice(index, 1, part);
     }
 
-    get parts() {
+    public get parts(): Part[] {
         return this._parts;
     }
 
-    get autoComplete() {
+    public get autoComplete(): AutocompleteWrapperModel {
         if (this.activePartIdx === this.autoCompletePartIdx) {
             return this._autoComplete;
         }
         return null;
     }
 
-    getPositionAtEnd() {
+    public getPositionAtEnd(): DocumentPosition {
         if (this._parts.length) {
             const index = this._parts.length - 1;
             const part = this._parts[index];
@@ -144,11 +144,11 @@ export default class EditorModel {
         }
     }
 
-    serializeParts() {
+    public serializeParts(): SerializedPart[] {
         return this._parts.map(p => p.serialize());
     }
 
-    private diff(newValue: string, inputType: string, caret: DocumentOffset) {
+    private diff(newValue: string, inputType: string, caret: DocumentOffset): IDiff {
         const previousValue = this.parts.reduce((text, p) => text + p.text, "");
         // can't use caret position with drag and drop
         if (inputType === "deleteByDrag") {
@@ -158,7 +158,7 @@ export default class EditorModel {
         }
     }
 
-    reset(serializedParts: SerializedPart[], caret?: Caret, inputType?: string) {
+    public reset(serializedParts: SerializedPart[], caret?: Caret, inputType?: string): void {
         this._parts = serializedParts.map(p => this._partCreator.deserializePart(p));
         if (!caret) {
             caret = this.getPositionAtEnd();
@@ -180,7 +180,7 @@ export default class EditorModel {
      * @param {DocumentPosition} position the position to start inserting at
      * @return {Number} the amount of characters added
      */
-    insert(parts: Part[], position: IPosition) {
+    public insert(parts: Part[], position: IPosition): number {
         const insertIndex = this.splitAt(position);
         let newTextLength = 0;
         for (let i = 0; i < parts.length; ++i) {
@@ -191,7 +191,7 @@ export default class EditorModel {
         return newTextLength;
     }
 
-    update(newValue: string, inputType: string, caret: DocumentOffset) {
+    public update(newValue: string, inputType: string, caret: DocumentOffset): Promise<void> {
         const diff = this.diff(newValue, inputType, caret);
         const position = this.positionForOffset(diff.at, caret.atNodeEnd);
         let removedOffsetDecrease = 0;
@@ -220,7 +220,7 @@ export default class EditorModel {
         return Number.isFinite(result) ? result as number : 0;
     }
 
-    private setActivePart(pos: DocumentPosition, canOpenAutoComplete: boolean) {
+    private setActivePart(pos: DocumentPosition, canOpenAutoComplete: boolean): Promise<void> {
         const { index } = pos;
         const part = this._parts[index];
         if (part) {
@@ -250,7 +250,7 @@ export default class EditorModel {
         return Promise.resolve();
     }
 
-    private onAutoComplete = ({ replaceParts, close }: ICallback) => {
+    private onAutoComplete = ({ replaceParts, close }: ICallback): void => {
         let pos;
         if (replaceParts) {
             this._parts.splice(this.autoCompletePartIdx, this.autoCompletePartCount, ...replaceParts);
@@ -270,7 +270,7 @@ export default class EditorModel {
         this.updateCallback(pos);
     };
 
-    private mergeAdjacentParts() {
+    private mergeAdjacentParts(): void {
         let prevPart;
         for (let i = 0; i < this._parts.length; ++i) {
             let part = this._parts[i];
@@ -294,7 +294,7 @@ export default class EditorModel {
      * @return {Number} how many characters before pos were also removed,
      * usually because of non-editable parts that can only be removed in their entirety.
      */
-    removeText(pos: IPosition, len: number) {
+    public removeText(pos: IPosition, len: number): number {
         let { index, offset } = pos;
         let removedOffsetDecrease = 0;
         while (len > 0) {
@@ -329,7 +329,7 @@ export default class EditorModel {
     }
 
     // return part index where insertion will insert between at offset
-    private splitAt(pos: IPosition) {
+    private splitAt(pos: IPosition): number {
         if (pos.index === -1) {
             return 0;
         }
@@ -356,7 +356,7 @@ export default class EditorModel {
      * @return {Number} how far from position (in characters) the insertion ended.
      * This can be more than the length of `str` when crossing non-editable parts, which are skipped.
      */
-    private addText(pos: IPosition, str: string, inputType: string) {
+    private addText(pos: IPosition, str: string, inputType: string): number {
         let { index } = pos;
         const { offset } = pos;
         let addLen = str.length;
@@ -390,7 +390,7 @@ export default class EditorModel {
         return addLen;
     }
 
-    positionForOffset(totalOffset: number, atPartEnd = false) {
+    public positionForOffset(totalOffset: number, atPartEnd = false): DocumentPosition {
         let currentOffset = 0;
         const index = this._parts.findIndex(part => {
             const partLen = part.text.length;
@@ -416,11 +416,11 @@ export default class EditorModel {
      * @param {DocumentPosition?} positionB the other boundary of the range, optional
      * @return {Range}
      */
-    startRange(positionA: DocumentPosition, positionB = positionA) {
+    public startRange(positionA: DocumentPosition, positionB = positionA): Range {
         return new Range(this, positionA, positionB);
     }
 
-    replaceRange(startPosition: DocumentPosition, endPosition: DocumentPosition, parts: Part[]) {
+    public replaceRange(startPosition: DocumentPosition, endPosition: DocumentPosition, parts: Part[]): void {
         // convert end position to offset, so it is independent of how the document is split into parts
         // which we'll change when splitting up at the start position
         const endOffset = endPosition.asOffset(this);
@@ -445,9 +445,9 @@ export default class EditorModel {
      * @param {ManualTransformCallback} callback to run the transformations in
      * @return {Promise} a promise when auto-complete (if applicable) is done updating
      */
-    transform(callback: ManualTransformCallback) {
+    public transform(callback: ManualTransformCallback): Promise<void> {
         const pos = callback();
-        let acPromise = null;
+        let acPromise: Promise<void> = null;
         if (!(pos instanceof Range)) {
             acPromise = this.setActivePart(pos, true);
         } else {
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index c16a95dbc9..351df5062f 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -552,7 +552,7 @@ export class PartCreator {
 // part creator that support auto complete for /commands,
 // used in SendMessageComposer
 export class CommandPartCreator extends PartCreator {
-    createPartForInput(text: string, partIndex: number) {
+    public createPartForInput(text: string, partIndex: number): Part {
         // at beginning and starts with /? create
         if (partIndex === 0 && text[0] === "/") {
             // text will be inserted by model, so pass empty string
@@ -562,11 +562,11 @@ export class CommandPartCreator extends PartCreator {
         }
     }
 
-    command(text: string) {
+    public command(text: string): CommandPart {
         return new CommandPart(text, this.autoCompleteCreator);
     }
 
-    deserializePart(part: Part): Part {
+    public deserializePart(part: SerializedPart): Part {
         if (part.type === "command") {
             return this.command(part.text);
         } else {
@@ -576,7 +576,7 @@ export class CommandPartCreator extends PartCreator {
 }
 
 class CommandPart extends PillCandidatePart {
-    get type(): IPillCandidatePart["type"] {
+    public get type(): IPillCandidatePart["type"] {
         return Type.Command;
     }
 }
diff --git a/src/utils/EditorStateTransfer.ts b/src/utils/EditorStateTransfer.ts
index ba303f9b73..d2ce58f7dc 100644
--- a/src/utils/EditorStateTransfer.ts
+++ b/src/utils/EditorStateTransfer.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 import { SerializedPart } from "../editor/parts";
-import { Caret } from "../editor/caret";
+import DocumentOffset from "../editor/offset";
 
 /**
  * Used while editing, to pass the event, and to preserve editor state
@@ -26,28 +26,28 @@ import { Caret } from "../editor/caret";
  */
 export default class EditorStateTransfer {
     private serializedParts: SerializedPart[] = null;
-    private caret: Caret = null;
+    private caret: DocumentOffset = null;
 
     constructor(private readonly event: MatrixEvent) {}
 
-    public setEditorState(caret: Caret, serializedParts: SerializedPart[]) {
+    public setEditorState(caret: DocumentOffset, serializedParts: SerializedPart[]) {
         this.caret = caret;
         this.serializedParts = serializedParts;
     }
 
-    public hasEditorState() {
+    public hasEditorState(): boolean {
         return !!this.serializedParts;
     }
 
-    public getSerializedParts() {
+    public getSerializedParts(): SerializedPart[] {
         return this.serializedParts;
     }
 
-    public getCaret() {
+    public getCaret(): DocumentOffset {
         return this.caret;
     }
 
-    public getEvent() {
+    public getEvent(): MatrixEvent {
         return this.event;
     }
 }
diff --git a/src/utils/pillify.js b/src/utils/pillify.tsx
similarity index 91%
rename from src/utils/pillify.js
rename to src/utils/pillify.tsx
index 489ba5d504..22240fcda5 100644
--- a/src/utils/pillify.js
+++ b/src/utils/pillify.tsx
@@ -16,9 +16,11 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from 'react-dom';
+import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import SettingsStore from "../settings/SettingsStore";
-import { PushProcessor } from 'matrix-js-sdk/src/pushprocessor';
 import Pill from "../components/views/elements/Pill";
 import { parseAppLocalLink } from "./permalinks/Permalinks";
 
@@ -27,15 +29,15 @@ import { parseAppLocalLink } from "./permalinks/Permalinks";
  * into pills based on the context of a given room.  Returns a list of
  * the resulting React nodes so they can be unmounted rather than leaking.
  *
- * @param {Node[]} nodes - a list of sibling DOM nodes to traverse to try
+ * @param {Element[]} nodes - a list of sibling DOM nodes to traverse to try
  *   to turn into pills.
  * @param {MatrixEvent} mxEvent - the matrix event which the DOM nodes are
  *   part of representing.
- * @param {Node[]} pills: an accumulator of the DOM nodes which contain
+ * @param {Element[]} pills: an accumulator of the DOM nodes which contain
  *   React components which have been mounted as part of this.
  *   The initial caller should pass in an empty array to seed the accumulator.
  */
-export function pillifyLinks(nodes, mxEvent, pills) {
+export function pillifyLinks(nodes: ArrayLike<Element>, mxEvent: MatrixEvent, pills: Element[]) {
     const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
     const shouldShowPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
     let node = nodes[0];
@@ -73,7 +75,7 @@ export function pillifyLinks(nodes, mxEvent, pills) {
             // to clear the pills from the last run of pillifyLinks
             !node.parentElement.classList.contains("mx_AtRoomPill")
         ) {
-            let currentTextNode = node;
+            let currentTextNode = node as Node as Text;
             const roomNotifTextNodes = [];
 
             // Take a textNode and break it up to make all the instances of @room their
@@ -125,10 +127,10 @@ export function pillifyLinks(nodes, mxEvent, pills) {
         }
 
         if (node.childNodes && node.childNodes.length && !pillified) {
-            pillifyLinks(node.childNodes, mxEvent, pills);
+            pillifyLinks(node.childNodes as NodeListOf<Element>, mxEvent, pills);
         }
 
-        node = node.nextSibling;
+        node = node.nextSibling as Element;
     }
 }
 
@@ -140,10 +142,10 @@ export function pillifyLinks(nodes, mxEvent, pills) {
  * emitter on BaseAvatar as per
  * https://github.com/vector-im/element-web/issues/12417
  *
- * @param {Node[]} pills - array of pill containers whose React
+ * @param {Element[]} pills - array of pill containers whose React
  *   components should be unmounted.
  */
-export function unmountPills(pills) {
+export function unmountPills(pills: Element[]) {
     for (const pillContainer of pills) {
         ReactDOM.unmountComponentAtNode(pillContainer);
     }
diff --git a/test/components/views/rooms/SendMessageComposer-test.js b/test/components/views/rooms/SendMessageComposer-test.js
index 2fddf8b691..2947f0fe60 100644
--- a/test/components/views/rooms/SendMessageComposer-test.js
+++ b/test/components/views/rooms/SendMessageComposer-test.js
@@ -147,7 +147,7 @@ describe('<SendMessageComposer/>', () => {
                 wrapper.update();
             });
 
-            const key = wrapper.find(SendMessageComposer).instance()._editorStateKey;
+            const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
 
             expect(wrapper.text()).toBe("Test Text");
             expect(localStorage.getItem(key)).toBeNull();
@@ -188,7 +188,7 @@ describe('<SendMessageComposer/>', () => {
                 wrapper.update();
             });
 
-            const key = wrapper.find(SendMessageComposer).instance()._editorStateKey;
+            const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
 
             expect(wrapper.text()).toBe("Hello World");
             expect(localStorage.getItem(key)).toBeNull();

From 0a5abb09f4111533aa44638788368a700ef38557 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 30 Jun 2021 13:03:29 +0100
Subject: [PATCH 314/358] Fixes identified by TS

---
 src/components/views/rooms/EditMessageComposer.tsx | 2 +-
 src/components/views/rooms/SendMessageComposer.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index b06b57dced..9c0bea4e60 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -395,7 +395,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
         const sel = document.getSelection();
         let caret;
         if (sel.focusNode) {
-            caret = getCaretOffsetAndText(this.editorRef.current, sel).caret;
+            caret = getCaretOffsetAndText(this.editorRef.current?.editorRef.current, sel).caret;
         }
         const parts = this.model.serializeParts();
         // if caret is undefined because for some reason there isn't a valid selection,
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index 2c670f6f64..a934216884 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -207,20 +207,20 @@ export default class SendMessageComposer extends React.Component<IProps> {
 
     // we keep sent messages/commands in a separate history (separate from undo history)
     // so you can alt+up/down in them
-    private selectSendHistory(up: boolean): void {
+    private selectSendHistory(up: boolean): boolean {
         const delta = up ? -1 : 1;
         // True if we are not currently selecting history, but composing a message
         if (this.sendHistoryManager.currentIndex === this.sendHistoryManager.history.length) {
             // We can't go any further - there isn't any more history, so nop.
             if (!up) {
-                return;
+                return false;
             }
             this.currentlyComposedEditorState = this.model.serializeParts();
         } else if (this.sendHistoryManager.currentIndex + delta === this.sendHistoryManager.history.length) {
             // True when we return to the message being composed currently
             this.model.reset(this.currentlyComposedEditorState);
             this.sendHistoryManager.currentIndex = this.sendHistoryManager.history.length;
-            return;
+            return true;
         }
         const { parts, replyEventId } = this.sendHistoryManager.getItem(delta);
         dis.dispatch({
@@ -231,6 +231,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
             this.model.reset(parts);
             this.editorRef.current?.focus();
         }
+        return true;
     }
 
     private isSlashCommand(): boolean {

From 3a80df422225e5249f84976b7ec2f9e721935640 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 30 Jun 2021 13:45:43 +0100
Subject: [PATCH 315/358] Fix react context not being assigned during
 construction

---
 src/components/views/rooms/EditMessageComposer.tsx | 5 +++--
 src/components/views/rooms/SendMessageComposer.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index 9c0bea4e60..4e51a0105b 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -121,14 +121,15 @@ interface IState {
 @replaceableComponent("views.rooms.EditMessageComposer")
 export default class EditMessageComposer extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
-    context: React.ContextType<typeof MatrixClientContext>;
+    context!: React.ContextType<typeof MatrixClientContext>;
 
     private readonly editorRef = createRef<BasicMessageComposer>();
     private readonly dispatcherRef: string;
     private model: EditorModel = null;
 
     constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
+        super(props);
+        this.context = context; // otherwise React will only set it prior to render due to type def above
 
         this.state = {
             saveDisabled: true,
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index a934216884..f088ec0c8e 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -136,7 +136,7 @@ interface IProps {
 @replaceableComponent("views.rooms.SendMessageComposer")
 export default class SendMessageComposer extends React.Component<IProps> {
     static contextType = MatrixClientContext;
-    context: React.ContextType<typeof MatrixClientContext>;
+    context!: React.ContextType<typeof MatrixClientContext>;
 
     private readonly prepareToEncrypt?: RateLimitedFunc;
     private readonly editorRef = createRef<BasicMessageComposer>();
@@ -146,8 +146,9 @@ export default class SendMessageComposer extends React.Component<IProps> {
     private sendHistoryManager: SendHistoryManager;
 
     constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
-        if (context.isCryptoEnabled() && context.isRoomEncrypted(this.props.room.roomId)) {
+        super(props);
+        this.context = context; // otherwise React will only set it prior to render due to type def above
+        if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
             this.prepareToEncrypt = new RateLimitedFunc(() => {
                 this.context.prepareToEncrypt(this.props.room);
             }, 60000);

From a9f35e8c69c203b5b8c79ef345b4330faad35d06 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Jun 2021 14:19:39 +0100
Subject: [PATCH 316/358] Lint MXC APIs to centralise access

This adds linting rules to ensure that MXC APIs are only accessed via the
`Media` helper so they can be customised easily when desired.

Fixes https://github.com/vector-im/element-web/issues/16933
---
 .eslintrc.js                | 11 +++++++++--
 src/customisations/Media.ts |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bf6e245b93..381cbd7417 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -54,7 +54,11 @@ module.exports = {
                 "error",
                 ...buildRestrictedPropertiesOptions(
                     ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                    "Use UIStore to access window dimensions instead",
+                    "Use UIStore to access window dimensions instead.",
+                ),
+                ...buildRestrictedPropertiesOptions(
+                    ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                    "Use Media helper instead to centralise access for customisation.",
                 ),
             ],
         },
@@ -63,7 +67,10 @@ module.exports = {
 
 function buildRestrictedPropertiesOptions(properties, message) {
     return properties.map(prop => {
-        const [object, property] = prop.split(".");
+        let [object, property] = prop.split(".");
+        if (object === "*") {
+            object = undefined;
+        }
         return {
             object,
             property,
diff --git a/src/customisations/Media.ts b/src/customisations/Media.ts
index f8ee834102..ce8f88f6f1 100644
--- a/src/customisations/Media.ts
+++ b/src/customisations/Media.ts
@@ -75,6 +75,7 @@ export class Media {
      * The HTTP URL for the source media.
      */
     public get srcHttp(): string {
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.srcMxc);
     }
 
@@ -84,6 +85,7 @@ export class Media {
      */
     public get thumbnailHttp(): string | undefined | null {
         if (!this.hasThumbnail) return null;
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.thumbnailMxc);
     }
 
@@ -100,6 +102,7 @@ export class Media {
         // scale using the device pixel ratio to keep images clear
         width = Math.floor(width * window.devicePixelRatio);
         height = Math.floor(height * window.devicePixelRatio);
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.thumbnailMxc, width, height, mode);
     }
 
@@ -114,6 +117,7 @@ export class Media {
         // scale using the device pixel ratio to keep images clear
         width = Math.floor(width * window.devicePixelRatio);
         height = Math.floor(height * window.devicePixelRatio);
+        // eslint-disable-next-line no-restricted-properties
         return this.client.mxcUrlToHttp(this.srcMxc, width, height, mode);
     }
 

From 2baace7658e0cdbfcb0b0bf48d2157d52d79098a Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Jun 2021 14:27:03 +0100
Subject: [PATCH 317/358] Apply restricted property rules to all files

---
 .eslintrc.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 381cbd7417..827b373949 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,18 @@ module.exports = {
         // It's disabled here, but we should using it sparingly.
         "react/jsx-no-bind": "off",
         "react/jsx-key": ["error"],
+
+        "no-restricted-properties": [
+            "error",
+            ...buildRestrictedPropertiesOptions(
+                ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                "Use UIStore to access window dimensions instead.",
+            ),
+            ...buildRestrictedPropertiesOptions(
+                ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                "Use Media helper instead to centralise access for customisation.",
+            ),
+        ],
     },
     overrides: [{
         files: [
@@ -49,18 +61,6 @@ module.exports = {
             "@typescript-eslint/no-explicit-any": "off",
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
-
-            "no-restricted-properties": [
-                "error",
-                ...buildRestrictedPropertiesOptions(
-                    ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                    "Use UIStore to access window dimensions instead.",
-                ),
-                ...buildRestrictedPropertiesOptions(
-                    ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
-                    "Use Media helper instead to centralise access for customisation.",
-                ),
-            ],
         },
     }],
 };

From a5a4f2ed7d0eee484b527f8e19138d1b5c65984f Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 30 Jun 2021 13:29:37 -0600
Subject: [PATCH 318/358] Fix linter + merge

---
 .../views/audio_messages/AudioPlayer.tsx      |   2 +-
 .../views/audio_messages/DurationClock.tsx    |   2 +-
 .../audio_messages/RecordingPlayback.tsx      |   6 +-
 .../views/audio_messages/SeekBar.tsx          |   2 +-
 src/components/views/messages/MAudioBody.js   | 112 ------------------
 src/components/views/messages/MAudioBody.tsx  |   2 +-
 6 files changed, 7 insertions(+), 119 deletions(-)
 delete mode 100644 src/components/views/messages/MAudioBody.js

diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 2f74c7b069..fa7c10b81c 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -118,6 +118,6 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                 />
                 <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
             </div>
-        </div>
+        </div>;
     }
 }
diff --git a/src/components/views/audio_messages/DurationClock.tsx b/src/components/views/audio_messages/DurationClock.tsx
index f6271d1cf4..81852b5944 100644
--- a/src/components/views/audio_messages/DurationClock.tsx
+++ b/src/components/views/audio_messages/DurationClock.tsx
@@ -46,7 +46,7 @@ export default class DurationClock extends React.PureComponent<IProps, IState> {
     }
 
     private onTimeUpdate = (time: number[]) => {
-        this.setState({durationSeconds: time[1]});
+        this.setState({ durationSeconds: time[1] });
     };
 
     public render() {
diff --git a/src/components/views/audio_messages/RecordingPlayback.tsx b/src/components/views/audio_messages/RecordingPlayback.tsx
index 7c7a0a87c1..a0dea1c6db 100644
--- a/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Playback, PlaybackState } from "../../../voice/Playback";
-import React, {ReactNode} from "react";
+import React, { ReactNode } from "react";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import PlaybackWaveform from "./PlaybackWaveform";
 import PlayPauseButton from "./PlayPauseButton";
@@ -51,7 +51,7 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     }
 
     private onPlaybackUpdate = (ev: PlaybackState) => {
-        this.setState({playbackPhase: ev});
+        this.setState({ playbackPhase: ev });
     };
 
     public render(): ReactNode {
@@ -59,6 +59,6 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             <PlaybackWaveform playback={this.props.playback} />
-        </div>
+        </div>;
     }
 }
diff --git a/src/components/views/audio_messages/SeekBar.tsx b/src/components/views/audio_messages/SeekBar.tsx
index ed07c44482..5231a2fb79 100644
--- a/src/components/views/audio_messages/SeekBar.tsx
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -105,7 +105,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
             max={1}
             value={this.state.percentage}
             step={0.001}
-            style={{'--fillTo': this.state.percentage} as ISeekCSS}
+            style={{ '--fillTo': this.state.percentage } as ISeekCSS}
             disabled={this.props.playbackPhase === PlaybackState.Decoding}
         />;
     }
diff --git a/src/components/views/messages/MAudioBody.js b/src/components/views/messages/MAudioBody.js
deleted file mode 100644
index 977c88448b..0000000000
--- a/src/components/views/messages/MAudioBody.js
+++ /dev/null
@@ -1,112 +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.
- */
-
-import React from 'react';
-import MFileBody from './MFileBody';
-
-import { decryptFile } from '../../../utils/DecryptFile';
-import { _t } from '../../../languageHandler';
-import InlineSpinner from '../elements/InlineSpinner';
-import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { mediaFromContent } from "../../../customisations/Media";
-
-@replaceableComponent("views.messages.MAudioBody")
-export default class MAudioBody extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            playing: false,
-            decryptedUrl: null,
-            decryptedBlob: null,
-            error: null,
-        };
-    }
-    onPlayToggle() {
-        this.setState({
-            playing: !this.state.playing,
-        });
-    }
-
-    _getContentUrl() {
-        const media = mediaFromContent(this.props.mxEvent.getContent());
-        if (media.isEncrypted) {
-            return this.state.decryptedUrl;
-        } else {
-            return media.srcHttp;
-        }
-    }
-
-    componentDidMount() {
-        const content = this.props.mxEvent.getContent();
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            let decryptedBlob;
-            decryptFile(content.file).then(function(blob) {
-                decryptedBlob = blob;
-                return URL.createObjectURL(decryptedBlob);
-            }).then((url) => {
-                this.setState({
-                    decryptedUrl: url,
-                    decryptedBlob: decryptedBlob,
-                });
-            }, (err) => {
-                console.warn("Unable to decrypt attachment: ", err);
-                this.setState({
-                    error: err,
-                });
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.state.decryptedUrl) {
-            URL.revokeObjectURL(this.state.decryptedUrl);
-        }
-    }
-
-    render() {
-        const content = this.props.mxEvent.getContent();
-
-        if (this.state.error !== null) {
-            return (
-                <span className="mx_MAudioBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
-                    { _t("Error decrypting audio") }
-                </span>
-            );
-        }
-
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            // Need to decrypt the attachment
-            // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a 16x16 spinner.
-            // Not sure how tall the audio player is so not sure how tall it should actually be.
-            return (
-                <span className="mx_MAudioBody">
-                    <InlineSpinner />
-                </span>
-            );
-        }
-
-        const contentUrl = this._getContentUrl();
-
-        return (
-            <span className="mx_MAudioBody">
-                <audio src={contentUrl} controls />
-                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
-            </span>
-        );
-    }
-}
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 8791828828..bc7216f42c 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -105,6 +105,6 @@ export default class MAudioBody extends React.PureComponent<IProps, IState> {
                 <AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
-        )
+        );
     }
 }

From da8a783ca027cc71fd927898f4d680c632b119a3 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Wed, 30 Jun 2021 14:51:18 -0600
Subject: [PATCH 319/358] lint

---
 res/css/views/audio_messages/_AudioPlayer.scss      | 2 +-
 src/components/views/audio_messages/AudioPlayer.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
index 3f02e54aab..9a65ad008f 100644
--- a/res/css/views/audio_messages/_AudioPlayer.scss
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_AudioPlayer_container {
-    padding: 16px 12px 11px 12px;
+    padding: 16px 12px 12px 12px;
     max-width: 267px; // use max to make the control fit in the files/pinned panels
 
     .mx_AudioPlayer_primaryContainer {
diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index fa7c10b81c..66efa64658 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -83,7 +83,8 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
         const bytes = this.props.playback.sizeBytes;
         if (!bytes) return null;
 
-        // Not translated as these are units, and therefore universal
+        // Not translated here - we're just presenting the data which should already
+        // be translated if needed.
         return `(${formatBytes(bytes)})`;
     }
 

From 30d027d2b46f7e4d9e91bd0315ce6bb95c1f3317 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 08:29:53 +0100
Subject: [PATCH 320/358] fix js-sdk lib import

---
 src/components/views/messages/TextualBody.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index cb9de013bf..f9e0f695ab 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -18,7 +18,7 @@ import React, { createRef, SyntheticEvent } from 'react';
 import ReactDOM from 'react-dom';
 import highlight from 'highlight.js';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { MsgType } from "matrix-js-sdk/lib/@types/event";
+import { MsgType } from "matrix-js-sdk/src/@types/event";
 
 import * as HtmlUtils from '../../../HtmlUtils';
 import { formatDate } from '../../../DateUtils';

From fcdb0a27d00d8fa46504571399454abfd7aa6738 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 09:53:54 +0100
Subject: [PATCH 321/358] Convert EventTimeline, EventTimelineSet and
 TimelineWindow to TS

---
 src/components/structures/FilePanel.tsx     |  2 +-
 src/components/structures/TimelinePanel.tsx | 22 ++++++++++++---------
 src/indexing/EventIndex.ts                  |  6 +++---
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index 21ef0c4f31..14380341d1 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -129,7 +129,7 @@ class FilePanel extends React.Component<IProps, IState> {
         }
     }
 
-    public async fetchFileEventsServer(room: Room): Promise<void> {
+    public async fetchFileEventsServer(room: Room): Promise<EventTimelineSet> {
         const client = MatrixClientPeg.get();
 
         const filter = new Filter(client.credentials.userId);
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index e4c7d15596..d7d3b33b3e 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -16,11 +16,13 @@ limitations under the License.
 
 import React, { createRef, ReactNode, SyntheticEvent } from 'react';
 import ReactDOM from "react-dom";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { TimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
+import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
 import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
 import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
+import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
+import { SyncState } from 'matrix-js-sdk/src/sync.api';
 
 import SettingsStore from "../../settings/SettingsStore";
 import { Layout } from "../../settings/Layout";
@@ -39,10 +41,8 @@ import { UIFeature } from "../../settings/UIFeature";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import { arrayFastClone } from "../../utils/arrays";
 import MessagePanel from "./MessagePanel";
-import { SyncState } from 'matrix-js-sdk/src/sync.api';
 import { IScrollState } from "./ScrollPanel";
 import { ActionPayload } from "../../dispatcher/payloads";
-import { EventType } from 'matrix-js-sdk/src/@types/event';
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import Spinner from "../views/elements/Spinner";
@@ -65,7 +65,7 @@ interface IProps {
     // representing.  This may or may not have a room, depending on what it's
     // a timeline representing.  If it has a room, we maintain RRs etc for
     // that room.
-    timelineSet: TimelineSet;
+    timelineSet: EventTimelineSet;
     showReadReceipts?: boolean;
     // Enable managing RRs and RMs. These require the timelineSet to have a room.
     manageReadReceipts?: boolean;
@@ -579,7 +579,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         });
     };
 
-    private onRoomTimelineReset = (room: Room, timelineSet: TimelineSet): void => {
+    private onRoomTimelineReset = (room: Room, timelineSet: EventTimelineSet): void => {
         if (timelineSet !== this.props.timelineSet) return;
 
         if (this.messagePanel.current && this.messagePanel.current.isAtBottom()) {
@@ -792,8 +792,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
             // that sending an RR for the latest message will set our notif counter
             // to zero: it may not do this if we send an RR for somewhere before the end.
             if (this.isAtEndOfLiveTimeline()) {
-                this.props.timelineSet.room.setUnreadNotificationCount('total', 0);
-                this.props.timelineSet.room.setUnreadNotificationCount('highlight', 0);
+                this.props.timelineSet.room.setUnreadNotificationCount(NotificationCountType.Total, 0);
+                this.props.timelineSet.room.setUnreadNotificationCount(NotificationCountType.Highlight, 0);
                 dis.dispatch({
                     action: 'on_room_read',
                     roomId: this.props.timelineSet.room.roomId,
@@ -1416,7 +1416,11 @@ class TimelinePanel extends React.Component<IProps, IState> {
         });
     }
 
-    private getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args);
+    private getRelationsForEvent = (
+        eventId: string,
+        relationType: RelationType,
+        eventType: EventType | string,
+    ) => this.props.timelineSet.getRelationsForEvent(eventId, relationType, eventType);
 
     render() {
         // just show a spinner while the timeline loads.
diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index 43b3de42ed..103a2f0809 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { EventEmitter } from "events";
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
-import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
+import { Direction, EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
@@ -109,7 +109,7 @@ export default class EventIndex extends EventEmitter {
         // our message crawler.
         await Promise.all(encryptedRooms.map(async (room) => {
             const timeline = room.getLiveTimeline();
-            const token = timeline.getPaginationToken("b");
+            const token = timeline.getPaginationToken(Direction.Backward);
 
             const backCheckpoint: ICrawlerCheckpoint = {
                 roomId: room.roomId,
@@ -371,7 +371,7 @@ export default class EventIndex extends EventEmitter {
         if (!room) return;
 
         const timeline = room.getLiveTimeline();
-        const token = timeline.getPaginationToken("b");
+        const token = timeline.getPaginationToken(Direction.Backward);
 
         if (!token) {
             // The room doesn't contain any tokens, meaning the live timeline

From d354a0a23b966549a5fab0b8c7c38dbd6a5a3a3d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 09:57:33 +0100
Subject: [PATCH 322/358] Prevent RoomDirectory from exploding when
 filterString is wrongly nullified

---
 src/components/structures/RoomDirectory.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomDirectory.tsx b/src/components/structures/RoomDirectory.tsx
index 2ac990436f..3acd9f1a2e 100644
--- a/src/components/structures/RoomDirectory.tsx
+++ b/src/components/structures/RoomDirectory.tsx
@@ -370,7 +370,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
 
     private onFilterChange = (alias: string) => {
         this.setState({
-            filterString: alias || null,
+            filterString: alias || "",
         });
 
         // don't send the request for a little bit,
@@ -389,7 +389,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
     private onFilterClear = () => {
         // update immediately
         this.setState({
-            filterString: null,
+            filterString: "",
         }, this.refreshRoomList);
 
         if (this.filterTimeout) {

From 5c6466d8245fc3b700fbb5217f03c3abd98e521c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 10:01:48 +0100
Subject: [PATCH 323/358] use better types

---
 src/Terms.ts                                | 3 ++-
 src/components/structures/FilePanel.tsx     | 7 ++++++-
 src/components/structures/TimelinePanel.tsx | 4 ++--
 src/indexing/EventIndex.ts                  | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Terms.ts b/src/Terms.ts
index 3859cc1c73..e96081b7b7 100644
--- a/src/Terms.ts
+++ b/src/Terms.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import classNames from 'classnames';
+import { SERVICE_TYPES } from '../../matrix-js-sdk/src/service-types';
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import * as sdk from '.';
@@ -32,7 +33,7 @@ export class Service {
      * @param {string} baseUrl The Base URL of the service (ie. before '/_matrix')
      * @param {string} accessToken The user's access token for the service
      */
-    constructor(public serviceType: string, public baseUrl: string, public accessToken: string) {
+    constructor(public serviceType: SERVICE_TYPES, public baseUrl: string, public accessToken: string) {
     }
 }
 
diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index 14380341d1..d47ea11a3c 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 
 import { Filter } from 'matrix-js-sdk/src/filter';
 import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
+import { Direction } from "matrix-js-sdk/src/models/event-timeline";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
@@ -153,7 +154,11 @@ class FilePanel extends React.Component<IProps, IState> {
         return timelineSet;
     }
 
-    private onPaginationRequest = (timelineWindow: TimelineWindow, direction: string, limit: number): void => {
+    private onPaginationRequest = (
+        timelineWindow: TimelineWindow,
+        direction: Direction,
+        limit: number,
+    ): Promise<boolean> => {
         const client = MatrixClientPeg.get();
         const eventIndex = EventIndexPeg.get();
         const roomId = this.props.roomId;
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index d7d3b33b3e..9253fb786b 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -19,7 +19,7 @@ import ReactDOM from "react-dom";
 import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { EventTimelineSet } from "matrix-js-sdk/src/models/event-timeline-set";
-import { EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
+import { Direction, EventTimeline } from "matrix-js-sdk/src/models/event-timeline";
 import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
 import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event';
 import { SyncState } from 'matrix-js-sdk/src/sync.api';
@@ -388,7 +388,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     private onPaginationRequest = (
         timelineWindow: TimelineWindow,
-        direction: string,
+        direction: Direction,
         size: number,
     ): Promise<boolean> => {
         if (this.props.onPaginationRequest) {
diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts
index 103a2f0809..c84d446197 100644
--- a/src/indexing/EventIndex.ts
+++ b/src/indexing/EventIndex.ts
@@ -862,7 +862,7 @@ export default class EventIndex extends EventEmitter {
      * @returns {Promise<boolean>} Resolves to a boolean which is true if more
      * events were successfully retrieved.
      */
-    public paginateTimelineWindow(room: Room, timelineWindow: TimelineWindow, direction: string, limit: number) {
+    public paginateTimelineWindow(room: Room, timelineWindow: TimelineWindow, direction: Direction, limit: number) {
         const tl = timelineWindow.getTimelineIndex(direction);
 
         if (!tl) return Promise.resolve(false);

From d47194e61d1f6833bdf7f91c324b0fbf3a5e03fb Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 11:17:18 +0100
Subject: [PATCH 324/358] Migrate SearchResultTile to TypeScript

---
 src/components/views/rooms/EventTile.tsx      |  2 +-
 ...archResultTile.js => SearchResultTile.tsx} | 36 +++++++++----------
 2 files changed, 17 insertions(+), 21 deletions(-)
 rename src/components/views/rooms/{SearchResultTile.js => SearchResultTile.tsx} (76%)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 277f3ccb7c..baaaa16b57 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -267,7 +267,7 @@ interface IProps {
     showReactions?: boolean;
 
     // which layout to use
-    layout: Layout;
+    layout?: Layout;
 
     // whether or not to show flair at all
     enableFlair?: boolean;
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.tsx
similarity index 76%
rename from src/components/views/rooms/SearchResultTile.js
rename to src/components/views/rooms/SearchResultTile.tsx
index 3581a26351..766abaff69 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.tsx
@@ -16,31 +16,27 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { haveTileForEvent } from "./EventTile";
+import EventTile, { haveTileForEvent } from "./EventTile";
+import DateSeparator from '../messages/DateSeparator';
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
+import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // a matrix-js-sdk SearchResult containing the details of this result
+    searchResult: any;
+    // a list of strings to be highlighted in the results
+    searchHighlights?: string[];
+    // href for the highlights in this result
+    resultLink?: string;
+    onHeightChanged?: () => void;
+    permalinkCreator?: RoomPermalinkCreator;
+}
+
 @replaceableComponent("views.rooms.SearchResultTile")
-export default class SearchResultTile extends React.Component {
-    static propTypes = {
-        // a matrix-js-sdk SearchResult containing the details of this result
-        searchResult: PropTypes.object.isRequired,
-
-        // a list of strings to be highlighted in the results
-        searchHighlights: PropTypes.array,
-
-        // href for the highlights in this result
-        resultLink: PropTypes.string,
-
-        onHeightChanged: PropTypes.func,
-    };
-
-    render() {
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventTile = sdk.getComponent('rooms.EventTile');
+export default class SearchResultTile extends React.Component<IProps> {
+    public render() {
         const result = this.props.searchResult;
         const mxEv = result.context.getEvent();
         const eventId = mxEv.getId();

From 6f62233634b0913da5384c42153ad83768e86bb2 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 11:18:07 +0100
Subject: [PATCH 325/358] Prevent browser to crash when unclosed HTML tag is
 sent to sanitizeHtml

---
 src/HtmlUtils.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index c80b50c566..59ec8811aa 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -37,6 +37,7 @@ import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks"
 import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji";
 import ReplyThread from "./components/views/elements/ReplyThread";
 import { mediaFromMxc } from "./customisations/Media";
+import { highlight } from 'highlight.js';
 
 linkifyMatrix(linkify);
 
@@ -403,9 +404,11 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
     try {
         if (highlights && highlights.length > 0) {
             const highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
-            const safeHighlights = highlights.map(function(highlight) {
-                return sanitizeHtml(highlight, sanitizeParams);
-            });
+            const safeHighlights = highlights
+                // sanitizeHtml can hang if an unclosed HTML tag is thrown at it
+                // A search for `<foo` will make the browser crash
+                .filter((highlight: string): boolean => !highlight.includes("<"))
+                .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams));
             // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
             sanitizeParams.textFilter = function(safeText) {
                 return highlighter.applyHighlights(safeText, safeHighlights).join('');

From ede87129b2512146be554fff69dd994359f6f969 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 11:45:29 +0100
Subject: [PATCH 326/358] Add a layout fallback for EventTile

---
 src/components/views/rooms/EventTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index baaaa16b57..0c4d2f6fa9 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -267,7 +267,7 @@ interface IProps {
     showReactions?: boolean;
 
     // which layout to use
-    layout?: Layout;
+    layout: Layout;
 
     // whether or not to show flair at all
     enableFlair?: boolean;
@@ -321,6 +321,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
         onHeightChanged: function() {},
+        layout: Layout.Group,
     };
 
     static contextType = MatrixClientContext;

From 04db8333e3059b6ddc89f5e34d9e402461bf4c0b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 12:13:43 +0100
Subject: [PATCH 327/358] Fix typing and unused import

---
 src/HtmlUtils.tsx                               | 1 -
 src/components/views/rooms/SearchResultTile.tsx | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 59ec8811aa..4a1ad2f074 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -37,7 +37,6 @@ import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks"
 import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji";
 import ReplyThread from "./components/views/elements/ReplyThread";
 import { mediaFromMxc } from "./customisations/Media";
-import { highlight } from 'highlight.js';
 
 linkifyMatrix(linkify);
 
diff --git a/src/components/views/rooms/SearchResultTile.tsx b/src/components/views/rooms/SearchResultTile.tsx
index 766abaff69..980e8835f8 100644
--- a/src/components/views/rooms/SearchResultTile.tsx
+++ b/src/components/views/rooms/SearchResultTile.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import { SearchResult } from "matrix-js-sdk/src/models/search-result";
 import EventTile, { haveTileForEvent } from "./EventTile";
 import DateSeparator from '../messages/DateSeparator';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -25,7 +26,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // a matrix-js-sdk SearchResult containing the details of this result
-    searchResult: any;
+    searchResult: SearchResult;
     // a list of strings to be highlighted in the results
     searchHighlights?: string[];
     // href for the highlights in this result

From 9c93b9002f32dbb219b103ef7efb0544b639aaa5 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 12:23:36 +0100
Subject: [PATCH 328/358] Add extra context for filtering out '>' for
 sanitizeHtml

---
 src/HtmlUtils.tsx                        | 3 +++
 src/components/views/rooms/EventTile.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index 4a1ad2f074..91245c943e 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -406,6 +406,9 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
             const safeHighlights = highlights
                 // sanitizeHtml can hang if an unclosed HTML tag is thrown at it
                 // A search for `<foo` will make the browser crash
+                // an alternative would be to escape HTML special characters
+                // but that would bring no additional benefit as the highlighter
+                // does not work with those special chars
                 .filter((highlight: string): boolean => !highlight.includes("<"))
                 .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams));
             // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 0c4d2f6fa9..cebb631708 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -267,7 +267,7 @@ interface IProps {
     showReactions?: boolean;
 
     // which layout to use
-    layout: Layout;
+    layout?: Layout;
 
     // whether or not to show flair at all
     enableFlair?: boolean;

From c9fa3470156e567cc8af660cb811e2b2298adcdc Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 12:27:06 +0100
Subject: [PATCH 329/358] Upgrade browserlist target versions

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 89e11fcea5..6f08372e18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2345,9 +2345,9 @@ camelcase@^6.0.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173:
-  version "1.0.30001178"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001178.tgz#3ad813b2b2c7d585b0be0a2440e1e233c6eabdbc"
-  integrity sha512-VtdZLC0vsXykKni8Uztx45xynytOi71Ufx9T8kHptSw9AL4dpqailUJJHavttuzUe1KYuBYtChiWv+BAb7mPmQ==
+  version "1.0.30001241"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001241.tgz"
+  integrity sha512-1uoSZ1Pq1VpH0WerIMqwptXHNNGfdl7d1cJUFs80CwQ/lVzdhTvsFZCeNFslze7AjsQnb4C85tzclPa1VShbeQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"

From 46b2f0404a6f192b29903a9b85a44b94ec757bdf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 13:45:33 +0100
Subject: [PATCH 330/358] Basic ts-ification of SetupEncryptionBody

---
 ...ryptionBody.js => SetupEncryptionBody.tsx} | 40 ++++++++++++-------
 .../views/right_panel/EncryptionPanel.tsx     |  2 +-
 2 files changed, 27 insertions(+), 15 deletions(-)
 rename src/components/structures/auth/{SetupEncryptionBody.js => SetupEncryptionBody.tsx} (91%)

diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.tsx
similarity index 91%
rename from src/components/structures/auth/SetupEncryptionBody.js
rename to src/components/structures/auth/SetupEncryptionBody.tsx
index f0798b6d1a..0bda596b5c 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
@@ -23,23 +22,31 @@ import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDi
 import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { ISecretStorageKeyInfo } from 'matrix-js-sdk';
+import EncryptionPanel from "../../views/right_panel/EncryptionPanel"
 
-function keyHasPassphrase(keyInfo) {
-    return (
+function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
+    return Boolean(
         keyInfo.passphrase &&
         keyInfo.passphrase.salt &&
         keyInfo.passphrase.iterations
     );
 }
 
-@replaceableComponent("structures.auth.SetupEncryptionBody")
-export default class SetupEncryptionBody extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-    };
+interface IProps {
+    onFinished: (boolean) => void;
+}
 
-    constructor() {
-        super();
+interface IState {
+    phase: Phase;
+    verificationRequest: any;
+    backupInfo: any;
+}
+
+@replaceableComponent("structures.auth.SetupEncryptionBody")
+export default class SetupEncryptionBody extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
         const store = SetupEncryptionStore.sharedInstance();
         store.on("update", this._onStoreUpdate);
         store.start();
@@ -56,7 +63,7 @@ export default class SetupEncryptionBody extends React.Component {
     _onStoreUpdate = () => {
         const store = SetupEncryptionStore.sharedInstance();
         if (store.phase === Phase.Finished) {
-            this.props.onFinished();
+            this.props.onFinished(true);
             return;
         }
         this.setState({
@@ -113,6 +120,10 @@ export default class SetupEncryptionBody extends React.Component {
         store.done();
     }
 
+    onEncryptionPanelClose = () => {
+        this.props.onFinished(false);
+    }
+
     render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
@@ -121,12 +132,13 @@ export default class SetupEncryptionBody extends React.Component {
         } = this.state;
 
         if (this.state.verificationRequest) {
-            const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
             return <EncryptionPanel
                 layout="dialog"
+                inDialog={true}
                 verificationRequest={this.state.verificationRequest}
-                onClose={this.props.onFinished}
+                onClose={this.onEncryptionPanelClose}
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
+                isRoomEncrypted={false}
             />;
         } else if (phase === Phase.Intro) {
             const store = SetupEncryptionStore.sharedInstance();
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index 3a26427246..b2e6e5fc2d 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -39,7 +39,7 @@ interface IProps {
     member: RoomMember | User;
     onClose: () => void;
     verificationRequest: VerificationRequest;
-    verificationRequestPromise: Promise<VerificationRequest>;
+    verificationRequestPromise?: Promise<VerificationRequest>;
     layout: string;
     inDialog: boolean;
     isRoomEncrypted: boolean;

From 70a3679d4363fb3dd227635d2c4b278daddb12f4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 13:49:58 +0100
Subject: [PATCH 331/358] more ts

---
 .../structures/auth/SetupEncryptionBody.tsx   | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx
index 0bda596b5c..35377d2a0e 100644
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -24,6 +24,8 @@ import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStor
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ISecretStorageKeyInfo } from 'matrix-js-sdk';
 import EncryptionPanel from "../../views/right_panel/EncryptionPanel"
+import AccessibleButton from '../../views/elements/AccessibleButton';
+import Spinner from '../../views/elements/Spinner';
 
 function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
     return Boolean(
@@ -48,7 +50,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
     constructor(props) {
         super(props);
         const store = SetupEncryptionStore.sharedInstance();
-        store.on("update", this._onStoreUpdate);
+        store.on("update", this.onStoreUpdate);
         store.start();
         this.state = {
             phase: store.phase,
@@ -60,7 +62,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         };
     }
 
-    _onStoreUpdate = () => {
+    private onStoreUpdate = () => {
         const store = SetupEncryptionStore.sharedInstance();
         if (store.phase === Phase.Finished) {
             this.props.onFinished(true);
@@ -73,18 +75,18 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         });
     };
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         const store = SetupEncryptionStore.sharedInstance();
-        store.off("update", this._onStoreUpdate);
+        store.off("update", this.onStoreUpdate);
         store.stop();
     }
 
-    _onUsePassphraseClick = async () => {
+    private onUsePassphraseClick = async () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.usePassPhrase();
     }
 
-    _onVerifyClick = () => {
+    private onVerifyClick = () => {
         const cli = MatrixClientPeg.get();
         const userId = cli.getUserId();
         const requestPromise = cli.requestVerification(userId);
@@ -100,33 +102,31 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         });
     }
 
-    onSkipClick = () => {
+    private onSkipClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.skip();
     }
 
-    onSkipConfirmClick = () => {
+    private onSkipConfirmClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.skipConfirm();
     }
 
-    onSkipBackClick = () => {
+    private onSkipBackClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.returnAfterSkip();
     }
 
-    onDoneClick = () => {
+    private onDoneClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.done();
     }
 
-    onEncryptionPanelClose = () => {
+    private onEncryptionPanelClose = () => {
         this.props.onFinished(false);
     }
 
-    render() {
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
+    public render() {
         const {
             phase,
         } = this.state;
@@ -151,14 +151,14 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
 
             let useRecoveryKeyButton;
             if (recoveryKeyPrompt) {
-                useRecoveryKeyButton = <AccessibleButton kind="link" onClick={this._onUsePassphraseClick}>
+                useRecoveryKeyButton = <AccessibleButton kind="link" onClick={this.onUsePassphraseClick}>
                     {recoveryKeyPrompt}
                 </AccessibleButton>;
             }
 
             let verifyButton;
             if (store.hasDevicesToVerifyAgainst) {
-                verifyButton = <AccessibleButton kind="primary" onClick={this._onVerifyClick}>
+                verifyButton = <AccessibleButton kind="primary" onClick={this.onVerifyClick}>
                     { _t("Use another login") }
                 </AccessibleButton>;
             }
@@ -229,7 +229,6 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 </div>
             );
         } else if (phase === Phase.Busy || phase === Phase.Loading) {
-            const Spinner = sdk.getComponent('views.elements.Spinner');
             return <Spinner />;
         } else {
             console.log(`SetupEncryptionBody: Unknown phase ${phase}`);

From 642405dbd04cd4ca7676cbad5d92e873a1fe7186 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 13:55:57 +0100
Subject: [PATCH 332/358] Use new types

---
 src/components/structures/auth/SetupEncryptionBody.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx
index 35377d2a0e..bd03c5bddb 100644
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -19,13 +19,14 @@ import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDialog';
-import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ISecretStorageKeyInfo } from 'matrix-js-sdk';
 import EncryptionPanel from "../../views/right_panel/EncryptionPanel"
 import AccessibleButton from '../../views/elements/AccessibleButton';
 import Spinner from '../../views/elements/Spinner';
+import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
     return Boolean(
@@ -41,8 +42,8 @@ interface IProps {
 
 interface IState {
     phase: Phase;
-    verificationRequest: any;
-    backupInfo: any;
+    verificationRequest: VerificationRequest;
+    backupInfo: IKeyBackupInfo;
 }
 
 @replaceableComponent("structures.auth.SetupEncryptionBody")

From 16fb24fa09c39c2ead32ddd6d58a7433d5c20cf5 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 14:03:01 +0100
Subject: [PATCH 333/358] Remove unused prop

---
 src/components/structures/auth/SetupEncryptionBody.tsx | 1 -
 src/components/views/right_panel/EncryptionPanel.tsx   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx
index bd03c5bddb..81fee432f6 100644
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -135,7 +135,6 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         if (this.state.verificationRequest) {
             return <EncryptionPanel
                 layout="dialog"
-                inDialog={true}
                 verificationRequest={this.state.verificationRequest}
                 onClose={this.onEncryptionPanelClose}
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index b2e6e5fc2d..251c04d3cc 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -41,7 +41,6 @@ interface IProps {
     verificationRequest: VerificationRequest;
     verificationRequestPromise?: Promise<VerificationRequest>;
     layout: string;
-    inDialog: boolean;
     isRoomEncrypted: boolean;
 }
 

From 5d3b94b7c9e8e2c8c97a41bc43bae1fdbd2b4b0f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 14:22:58 +0100
Subject: [PATCH 334/358] Convert VerificationRequestDialog

---
 ...ialog.js => VerificationRequestDialog.tsx} | 43 +++++++++++--------
 .../views/toasts/VerificationRequestToast.tsx |  3 +-
 2 files changed, 25 insertions(+), 21 deletions(-)
 rename src/components/views/dialogs/{VerificationRequestDialog.js => VerificationRequestDialog.tsx} (70%)

diff --git a/src/components/views/dialogs/VerificationRequestDialog.js b/src/components/views/dialogs/VerificationRequestDialog.tsx
similarity index 70%
rename from src/components/views/dialogs/VerificationRequestDialog.js
rename to src/components/views/dialogs/VerificationRequestDialog.tsx
index bf5d63b895..4d3123c274 100644
--- a/src/components/views/dialogs/VerificationRequestDialog.js
+++ b/src/components/views/dialogs/VerificationRequestDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -15,27 +15,33 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import BaseDialog from "./BaseDialog";
+import EncryptionPanel from "../right_panel/EncryptionPanel";
+import { User } from 'matrix-js-sdk';
+
+interface IProps {
+    verificationRequest: VerificationRequest;
+    verificationRequestPromise: Promise<VerificationRequest>;
+    onFinished: () => void;
+    member: User;
+}
+
+interface IState {
+    verificationRequest: VerificationRequest;
+}
 
 @replaceableComponent("views.dialogs.VerificationRequestDialog")
-export default class VerificationRequestDialog extends React.Component {
-    static propTypes = {
-        verificationRequest: PropTypes.object,
-        verificationRequestPromise: PropTypes.object,
-        onFinished: PropTypes.func.isRequired,
-        member: PropTypes.string,
-    };
-
-    constructor(...args) {
-        super(...args);
-        this.state = {};
-        if (this.props.verificationRequest) {
-            this.state.verificationRequest = this.props.verificationRequest;
-        } else if (this.props.verificationRequestPromise) {
+export default class VerificationRequestDialog extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            verificationRequest: this.props.verificationRequest,
+        };
+        if (this.props.verificationRequestPromise) {
             this.props.verificationRequestPromise.then(r => {
                 this.setState({ verificationRequest: r });
             });
@@ -43,8 +49,6 @@ export default class VerificationRequestDialog extends React.Component {
     }
 
     render() {
-        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
-        const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
         const request = this.state.verificationRequest;
         const otherUserId = request && request.otherUserId;
         const member = this.props.member ||
@@ -65,6 +69,7 @@ export default class VerificationRequestDialog extends React.Component {
                 verificationRequestPromise={this.props.verificationRequestPromise}
                 onClose={this.props.onFinished}
                 member={member}
+                isRoomEncrypted={false}
             />
         </BaseDialog>;
     }
diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx
index 8f6b552334..14b3c23737 100644
--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 
-import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
@@ -30,6 +29,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { Action } from "../../../dispatcher/actions";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import VerificationRequestDialog from "../dialogs/VerificationRequestDialog"
 
 interface IProps {
     toastKey: string;
@@ -123,7 +123,6 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                     },
                 });
             } else {
-                const VerificationRequestDialog = sdk.getComponent("views.dialogs.VerificationRequestDialog");
                 Modal.createTrackedDialog('Incoming Verification', '', VerificationRequestDialog, {
                     verificationRequest: request,
                     onFinished: () => {

From 676163d5cd81312c813662343176c710ff885c52 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 14:51:07 +0100
Subject: [PATCH 335/358] convert NewSessionReviewDialog

---
 ...ewDialog.js => NewSessionReviewDialog.tsx} | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)
 rename src/components/views/dialogs/{NewSessionReviewDialog.js => NewSessionReviewDialog.tsx} (90%)

diff --git a/src/components/views/dialogs/NewSessionReviewDialog.js b/src/components/views/dialogs/NewSessionReviewDialog.tsx
similarity index 90%
rename from src/components/views/dialogs/NewSessionReviewDialog.js
rename to src/components/views/dialogs/NewSessionReviewDialog.tsx
index 749f48ef48..ae334474ef 100644
--- a/src/components/views/dialogs/NewSessionReviewDialog.js
+++ b/src/components/views/dialogs/NewSessionReviewDialog.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
@@ -23,18 +22,18 @@ import VerificationRequestDialog from './VerificationRequestDialog';
 import BaseDialog from './BaseDialog';
 import DialogButtons from '../elements/DialogButtons';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import * as sdk from '../../../index';
+import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
+import ErrorDialog from "./ErrorDialog";
+
+interface IProps {
+    userId: string;
+    device: DeviceInfo,
+    onFinished: (boolean) => void;
+}
 
 @replaceableComponent("views.dialogs.NewSessionReviewDialog")
-export default class NewSessionReviewDialog extends React.PureComponent {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    }
-
-    onCancelClick = () => {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+export default class NewSessionReviewDialog extends React.PureComponent<IProps> {
+    private onCancelClick = () => {
         Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
             headerImage: require("../../../../res/img/e2e/warning.svg"),
             title: _t("Your account is not secure"),
@@ -54,7 +53,7 @@ export default class NewSessionReviewDialog extends React.PureComponent {
         });
     }
 
-    onContinueClick = () => {
+    private onContinueClick = () => {
         const { userId, device } = this.props;
         const cli = MatrixClientPeg.get();
         const requestPromise = cli.requestVerification(
@@ -73,7 +72,7 @@ export default class NewSessionReviewDialog extends React.PureComponent {
         });
     }
 
-    render() {
+    public render() {
         const { device } = this.props;
 
         const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;

From 66d95ed7b24dd8b59adee380fa29c2aec6a7f3f0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 14:51:20 +0100
Subject: [PATCH 336/358] Fix button styling in verification bubbles

---
 res/css/views/messages/_common_CryptoEvent.scss           | 1 +
 src/components/views/messages/MKeyVerificationRequest.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index bcc40f1181..d43df1b66c 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -43,6 +43,7 @@ limitations under the License.
     .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
         grid-column: 3;
         grid-row: 1 / 3;
+        gap: 5px;
     }
 
     .mx_cryptoEvent_buttons {
diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx
index d690513d55..8b8eb25f6b 100644
--- a/src/components/views/messages/MKeyVerificationRequest.tsx
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@@ -154,7 +154,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
                     <AccessibleButton kind="danger" onClick={this.onRejectClicked}>
                         {_t("Decline")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this.onAcceptClicked}>
+                    <AccessibleButton kind="primary" onClick={this.onAcceptClicked}>
                         {_t("Accept")}
                     </AccessibleButton>
                 </div>);

From 7e8bb70621db1e293503f5c5fbfdae19c660135d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 14:55:00 +0100
Subject: [PATCH 337/358] Never mind, it wasn't even used

---
 .../views/dialogs/NewSessionReviewDialog.tsx  | 120 ------------------
 1 file changed, 120 deletions(-)
 delete mode 100644 src/components/views/dialogs/NewSessionReviewDialog.tsx

diff --git a/src/components/views/dialogs/NewSessionReviewDialog.tsx b/src/components/views/dialogs/NewSessionReviewDialog.tsx
deleted file mode 100644
index ae334474ef..0000000000
--- a/src/components/views/dialogs/NewSessionReviewDialog.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
-Copyright 2020-2021 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 React from 'react';
-import { _t } from '../../../languageHandler';
-import Modal from '../../../Modal';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
-import VerificationRequestDialog from './VerificationRequestDialog';
-import BaseDialog from './BaseDialog';
-import DialogButtons from '../elements/DialogButtons';
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
-import ErrorDialog from "./ErrorDialog";
-
-interface IProps {
-    userId: string;
-    device: DeviceInfo,
-    onFinished: (boolean) => void;
-}
-
-@replaceableComponent("views.dialogs.NewSessionReviewDialog")
-export default class NewSessionReviewDialog extends React.PureComponent<IProps> {
-    private onCancelClick = () => {
-        Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
-            headerImage: require("../../../../res/img/e2e/warning.svg"),
-            title: _t("Your account is not secure"),
-            description: <div>
-                {_t("One of the following may be compromised:")}
-                <ul>
-                    <li>{_t("Your password")}</li>
-                    <li>{_t("Your homeserver")}</li>
-                    <li>{_t("This session, or the other session")}</li>
-                    <li>{_t("The internet connection either session is using")}</li>
-                </ul>
-                <div>
-                    {_t("We recommend you change your password and Security Key in Settings immediately")}
-                </div>
-            </div>,
-            onFinished: () => this.props.onFinished(false),
-        });
-    }
-
-    private onContinueClick = () => {
-        const { userId, device } = this.props;
-        const cli = MatrixClientPeg.get();
-        const requestPromise = cli.requestVerification(
-            userId,
-            [device.deviceId],
-        );
-
-        this.props.onFinished(true);
-        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
-            verificationRequestPromise: requestPromise,
-            member: cli.getUser(userId),
-            onFinished: async () => {
-                const request = await requestPromise;
-                request.cancel();
-            },
-        });
-    }
-
-    public render() {
-        const { device } = this.props;
-
-        const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;
-        const titleText = _t("New session");
-
-        const title = <h2 className="mx_NewSessionReviewDialog_header">
-            {icon}
-            {titleText}
-        </h2>;
-
-        return (
-            <BaseDialog
-                title={title}
-                onFinished={this.props.onFinished}
-            >
-                <div className="mx_NewSessionReviewDialog_body">
-                    <p>{_t(
-                        "Use this session to verify your new one, " +
-                        "granting it access to encrypted messages:",
-                    )}</p>
-                    <div className="mx_NewSessionReviewDialog_deviceInfo">
-                        <div>
-                            <span className="mx_NewSessionReviewDialog_deviceName">
-                                {device.getDisplayName()}
-                            </span> <span className="mx_NewSessionReviewDialog_deviceID">
-                                ({device.deviceId})
-                            </span>
-                        </div>
-                    </div>
-                    <p>{_t(
-                        "If you didn’t sign in to this session, " +
-                        "your account may be compromised.",
-                    )}</p>
-                    <DialogButtons
-                        cancelButton={_t("This wasn't me")}
-                        cancelButtonClass="danger"
-                        primaryButton={_t("Continue")}
-                        onCancel={this.onCancelClick}
-                        onPrimaryButtonClick={this.onContinueClick}
-                    />
-                </div>
-            </BaseDialog>
-        );
-    }
-}

From c6d1dc7e8e0c194f7d94ce801dc744024e1d38b6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 15:11:18 +0100
Subject: [PATCH 338/358] lint

---
 .../structures/auth/SetupEncryptionBody.tsx    | 18 +++++++++---------
 .../views/toasts/VerificationRequestToast.tsx  |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx
index 81fee432f6..13790c2e47 100644
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -22,7 +22,7 @@ import VerificationRequestDialog from '../../views/dialogs/VerificationRequestDi
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ISecretStorageKeyInfo } from 'matrix-js-sdk';
-import EncryptionPanel from "../../views/right_panel/EncryptionPanel"
+import EncryptionPanel from "../../views/right_panel/EncryptionPanel";
 import AccessibleButton from '../../views/elements/AccessibleButton';
 import Spinner from '../../views/elements/Spinner';
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
@@ -32,7 +32,7 @@ function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
     return Boolean(
         keyInfo.passphrase &&
         keyInfo.passphrase.salt &&
-        keyInfo.passphrase.iterations
+        keyInfo.passphrase.iterations,
     );
 }
 
@@ -85,7 +85,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
     private onUsePassphraseClick = async () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.usePassPhrase();
-    }
+    };
 
     private onVerifyClick = () => {
         const cli = MatrixClientPeg.get();
@@ -101,31 +101,31 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 request.cancel();
             },
         });
-    }
+    };
 
     private onSkipClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.skip();
-    }
+    };
 
     private onSkipConfirmClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.skipConfirm();
-    }
+    };
 
     private onSkipBackClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.returnAfterSkip();
-    }
+    };
 
     private onDoneClick = () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.done();
-    }
+    };
 
     private onEncryptionPanelClose = () => {
         this.props.onFinished(false);
-    }
+    };
 
     public render() {
         const {
diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx
index 14b3c23737..75254d7c62 100644
--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@@ -29,7 +29,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { Action } from "../../../dispatcher/actions";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import VerificationRequestDialog from "../dialogs/VerificationRequestDialog"
+import VerificationRequestDialog from "../dialogs/VerificationRequestDialog";
 
 interface IProps {
     toastKey: string;

From 404aa96f487eb002bfb1e616a257d4e01007cfd2 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 15:13:24 +0100
Subject: [PATCH 339/358] i18n

---
 src/i18n/strings/en_EN.json | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6f06e3d6a4..618d5763fa 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2342,15 +2342,6 @@
     "Message edits": "Message edits",
     "Modal Widget": "Modal Widget",
     "Data on this screen is shared with %(widgetDomain)s": "Data on this screen is shared with %(widgetDomain)s",
-    "Your account is not secure": "Your account is not secure",
-    "Your password": "Your password",
-    "This session, or the other session": "This session, or the other session",
-    "The internet connection either session is using": "The internet connection either session is using",
-    "We recommend you change your password and Security Key in Settings immediately": "We recommend you change your password and Security Key in Settings immediately",
-    "New session": "New session",
-    "Use this session to verify your new one, granting it access to encrypted messages:": "Use this session to verify your new one, granting it access to encrypted messages:",
-    "If you didn’t sign in to this session, your account may be compromised.": "If you didn’t sign in to this session, your account may be compromised.",
-    "This wasn't me": "This wasn't me",
     "Doesn't look like a valid email address": "Doesn't look like a valid email address",
     "Continuing without email": "Continuing without email",
     "Just a heads up, if you don't add an email and forget your password, you could <b>permanently lose access to your account</b>.": "Just a heads up, if you don't add an email and forget your password, you could <b>permanently lose access to your account</b>.",

From 5e3c8fae5c9277fa556081d33e1411fa704ec88a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 15:22:44 +0100
Subject: [PATCH 340/358] put this just on the buttons

---
 res/css/views/messages/_common_CryptoEvent.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index d43df1b66c..afaed50fa4 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -43,12 +43,12 @@ limitations under the License.
     .mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
         grid-column: 3;
         grid-row: 1 / 3;
-        gap: 5px;
     }
 
     .mx_cryptoEvent_buttons {
         align-items: center;
         display: flex;
+        gap: 5px;
     }
 
     .mx_cryptoEvent_state {

From ae16efcf5bdc4ffcdf6f893d94f9142663b2a1b5 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 18:35:38 +0100
Subject: [PATCH 341/358] Remove rateLimitedFunc

---
 .eslintignore.errorfiles                      |  1 -
 src/components/structures/RightPanel.tsx      |  8 ++--
 src/components/structures/RoomView.tsx        | 12 ++---
 src/components/views/rooms/AuxPanel.tsx       |  6 +--
 src/components/views/rooms/MemberList.tsx     |  8 ++--
 src/components/views/rooms/RoomHeader.js      |  7 ++-
 .../views/rooms/SendMessageComposer.tsx       |  8 ++--
 src/ratelimitedfunc.js                        | 47 -------------------
 8 files changed, 24 insertions(+), 73 deletions(-)
 delete mode 100644 src/ratelimitedfunc.js

diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles
index d9177bebb5..ea66720529 100644
--- a/.eslintignore.errorfiles
+++ b/.eslintignore.errorfiles
@@ -4,7 +4,6 @@ src/Markdown.js
 src/NodeAnimator.js
 src/components/structures/RoomDirectory.js
 src/components/views/rooms/MemberList.js
-src/ratelimitedfunc.js
 src/utils/DMRoomMap.js
 src/utils/MultiInviter.js
 test/components/structures/MessagePanel-test.js
diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index c608f0eee9..338bfc06ab 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -23,7 +23,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 import dis from '../../dispatcher/dispatcher';
-import RateLimitedFunc from '../../ratelimitedfunc';
 import GroupStore from '../../stores/GroupStore';
 import {
     RIGHT_PANEL_PHASES_NO_ARGS,
@@ -48,6 +47,7 @@ import FilePanel from "./FilePanel";
 import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
+import { DebouncedFunc, throttle } from 'lodash';
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -73,7 +73,7 @@ interface IState {
 export default class RightPanel extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
 
-    private readonly delayedUpdate: RateLimitedFunc;
+    private readonly delayedUpdate: DebouncedFunc<() => void>;
     private dispatcherRef: string;
 
     constructor(props, context) {
@@ -85,9 +85,9 @@ export default class RightPanel extends React.Component<IProps, IState> {
             member: this.getUserForPanel(),
         };
 
-        this.delayedUpdate = new RateLimitedFunc(() => {
+        this.delayedUpdate = throttle(() => {
             this.forceUpdate();
-        }, 500);
+        }, 500, { leading: true, trailing: true });
     }
 
     // Helper function to split out the logic for getPhaseFromProps() and the constructor
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 81000a87a6..d08eaa2ecd 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -37,7 +37,6 @@ import Modal from '../../Modal';
 import * as sdk from '../../index';
 import CallHandler, { PlaceCallType } from '../../CallHandler';
 import dis from '../../dispatcher/dispatcher';
-import rateLimitedFunc from '../../ratelimitedfunc';
 import * as Rooms from '../../Rooms';
 import eventSearch, { searchPagination } from '../../Searching';
 import MainSplit from './MainSplit';
@@ -82,6 +81,7 @@ import { IOpts } from "../../createRoom";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
+import { throttle } from "lodash";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -675,8 +675,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             );
         }
 
-        // cancel any pending calls to the rate_limited_funcs
-        this.updateRoomMembers.cancelPendingCall();
+        // cancel any pending calls to the throttled updated
+        this.updateRoomMembers.cancel();
 
         for (const watcher of this.settingWatchers) {
             SettingsStore.unwatchSetting(watcher);
@@ -1092,7 +1092,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             return;
         }
 
-        this.updateRoomMembers(member);
+        this.updateRoomMembers();
     };
 
     private onMyMembership = (room: Room, membership: string, oldMembership: string) => {
@@ -1114,10 +1114,10 @@ export default class RoomView extends React.Component<IProps, IState> {
     }
 
     // rate limited because a power level change will emit an event for every member in the room.
-    private updateRoomMembers = rateLimitedFunc(() => {
+    private updateRoomMembers = throttle(() => {
         this.updateDMState();
         this.updateE2EStatus(this.state.room);
-    }, 500);
+    }, 500, { leading: true, trailing: true });
 
     private checkDesktopNotifications() {
         const memberCount = this.state.room.getJoinedMemberCount() + this.state.room.getInvitedMemberCount();
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 1c817140fa..99286dfa07 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -21,7 +21,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AppsDrawer from './AppsDrawer';
-import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { UIFeature } from "../../../settings/UIFeature";
@@ -29,6 +28,7 @@ import ResizeNotifier from "../../../utils/ResizeNotifier";
 import CallViewForRoom from '../voip/CallViewForRoom';
 import { objectHasDiff } from "../../../utils/objects";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { throttle } from 'lodash';
 
 interface IProps {
     // js-sdk room object
@@ -99,9 +99,9 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         }
     }
 
-    private rateLimitedUpdate = new RateLimitedFunc(() => {
+    private rateLimitedUpdate = throttle(() => {
         this.setState({ counters: this.computeCounters() });
-    }, 500);
+    }, 500, { leading: true, trailing: true });
 
     private computeCounters() {
         const counters = [];
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 68f87580df..f4df70c7ee 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -22,7 +22,6 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher/dispatcher';
 import { isValid3pidInvite } from "../../../RoomInvite";
-import rateLimitedFunction from "../../../ratelimitedfunc";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
 import BaseCard from "../right_panel/BaseCard";
@@ -43,6 +42,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import EntityTile from "./EntityTile";
 import MemberTile from "./MemberTile";
 import BaseAvatar from '../avatars/BaseAvatar';
+import { throttle } from 'lodash';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -133,7 +133,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         }
 
         // cancel any pending calls to the rate_limited_funcs
-        this.updateList.cancelPendingCall();
+        this.updateList.cancel();
     }
 
     /**
@@ -237,9 +237,9 @@ export default class MemberList extends React.Component<IProps, IState> {
         if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite });
     };
 
-    private updateList = rateLimitedFunction(() => {
+    private updateList = throttle(() => {
         this.updateListNow();
-    }, 500);
+    }, 500, { leading: true, trailing: true });
 
     private updateListNow(): void {
         const members = this.roomMembers();
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 886317f2bf..b05b709e36 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import RateLimitedFunc from '../../../ratelimitedfunc';
 
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
@@ -31,6 +30,7 @@ import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { throttle } from 'lodash';
 
 @replaceableComponent("views.rooms.RoomHeader")
 export default class RoomHeader extends React.Component {
@@ -73,10 +73,9 @@ export default class RoomHeader extends React.Component {
         this._rateLimitedUpdate();
     };
 
-    _rateLimitedUpdate = new RateLimitedFunc(function() {
-        /* eslint-disable @babel/no-invalid-this */
+    _rateLimitedUpdate = throttle(() => {
         this.forceUpdate();
-    }, 500);
+    }, 500, { leading: true, trailing: true });
 
     render() {
         let searchStatus = null;
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index f088ec0c8e..ec190c829a 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -39,7 +39,6 @@ import Modal from '../../../Modal';
 import { _t, _td } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import RateLimitedFunc from '../../../ratelimitedfunc';
 import { Action } from "../../../dispatcher/actions";
 import { containsEmoji } from "../../../effects/utils";
 import { CHAT_EFFECTS } from '../../../effects';
@@ -53,6 +52,7 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import { DebouncedFunc, throttle } from 'lodash';
 
 function addReplyToMessageContent(
     content: IContent,
@@ -138,7 +138,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
     static contextType = MatrixClientContext;
     context!: React.ContextType<typeof MatrixClientContext>;
 
-    private readonly prepareToEncrypt?: RateLimitedFunc;
+    private readonly prepareToEncrypt?: DebouncedFunc<() => void>;
     private readonly editorRef = createRef<BasicMessageComposer>();
     private model: EditorModel = null;
     private currentlyComposedEditorState: SerializedPart[] = null;
@@ -149,9 +149,9 @@ export default class SendMessageComposer extends React.Component<IProps> {
         super(props);
         this.context = context; // otherwise React will only set it prior to render due to type def above
         if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
-            this.prepareToEncrypt = new RateLimitedFunc(() => {
+            this.prepareToEncrypt = throttle(() => {
                 this.context.prepareToEncrypt(this.props.room);
-            }, 60000);
+            }, 60000, { leading: true, trailing: false });
         }
 
         window.addEventListener("beforeunload", this.saveStoredEditorState);
diff --git a/src/ratelimitedfunc.js b/src/ratelimitedfunc.js
deleted file mode 100644
index 3df3db615e..0000000000
--- a/src/ratelimitedfunc.js
+++ /dev/null
@@ -1,47 +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.
-*/
-
-/**
- * 'debounces' a function to only execute every n milliseconds.
- * Useful when react-sdk gets many, many events but only wants
- * to update the interface once for all of them.
- *
- * Note that the function must not take arguments, since the args
- * could be different for each invocation of the function.
- *
- * The returned function has a 'cancelPendingCall' property which can be called
- * on unmount or similar to cancel any pending update.
- */
-
-import {throttle} from "lodash";
-
-export default function ratelimitedfunc(fn, time) {
-    const throttledFn = throttle(fn, time, {
-        leading: true,
-        trailing: true,
-    });
-    const _bind = throttledFn.bind;
-    throttledFn.bind = function() {
-        const boundFn = _bind.apply(throttledFn, arguments);
-        boundFn.cancelPendingCall = throttledFn.cancelPendingCall;
-        return boundFn;
-    };
-
-    throttledFn.cancelPendingCall = function() {
-        throttledFn.cancel();
-    };
-    return throttledFn;
-}

From 9ea4ca39c63e7f4f98fee429b9681f78edc5fc6d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 18:54:51 +0100
Subject: [PATCH 342/358] Be more like other arrow functions

---
 src/components/structures/RightPanel.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index 338bfc06ab..63027ab627 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -47,7 +47,7 @@ import FilePanel from "./FilePanel";
 import NotificationPanel from "./NotificationPanel";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PinnedMessagesCard from "../views/right_panel/PinnedMessagesCard";
-import { DebouncedFunc, throttle } from 'lodash';
+import { throttle } from 'lodash';
 
 interface IProps {
     room?: Room; // if showing panels for a given room, this is set
@@ -73,7 +73,6 @@ interface IState {
 export default class RightPanel extends React.Component<IProps, IState> {
     static contextType = MatrixClientContext;
 
-    private readonly delayedUpdate: DebouncedFunc<() => void>;
     private dispatcherRef: string;
 
     constructor(props, context) {
@@ -84,12 +83,12 @@ export default class RightPanel extends React.Component<IProps, IState> {
             isUserPrivilegedInGroup: null,
             member: this.getUserForPanel(),
         };
-
-        this.delayedUpdate = throttle(() => {
-            this.forceUpdate();
-        }, 500, { leading: true, trailing: true });
     }
 
+    private readonly delayedUpdate = throttle((): void => {
+        this.forceUpdate();
+    }, 500, { leading: true, trailing: true });
+
     // Helper function to split out the logic for getPhaseFromProps() and the constructor
     // as both are called at the same time in the constructor.
     private getUserForPanel() {

From 8bbb768825ab1154e0685b3557cebe35d623eae6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 19:54:05 +0100
Subject: [PATCH 343/358] Convert RoomHeader to TS

Also add a type of OOBData... possibly this should be in the js-sdk,
but threepid invites themselves have a type in react-sdk so it can
live alongside it I guess (also I'm not entirely sure we actually
use it anymore...)
---
 src/components/structures/LoggedInView.tsx    |  4 +-
 src/components/structures/RoomView.tsx        | 26 +--------
 .../views/avatars/DecoratedRoomAvatar.tsx     |  3 +-
 src/components/views/avatars/RoomAvatar.tsx   |  4 +-
 .../rooms/{RoomHeader.js => RoomHeader.tsx}   | 58 +++++++++++--------
 src/stores/ThreepidInviteStore.ts             | 10 ++++
 6 files changed, 52 insertions(+), 53 deletions(-)
 rename src/components/views/rooms/{RoomHeader.js => RoomHeader.tsx} (86%)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 26bb0fe24a..65b26cb505 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -48,7 +48,7 @@ import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPay
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
 import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload";
-import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
+import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
@@ -81,7 +81,7 @@ interface IProps {
     page_type: string;
     autoJoin: boolean;
     threepidInvite?: IThreepidInvite;
-    roomOobData?: object;
+    roomOobData?: IOOBData;
     currentRoomId: string;
     collapseLhs: boolean;
     config: {
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index d08eaa2ecd..a8eb8d662a 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -63,7 +63,7 @@ import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
 import AuxPanel from "../views/rooms/AuxPanel";
 import RoomHeader from "../views/rooms/RoomHeader";
 import { XOR } from "../../@types/common";
-import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
+import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import EffectsOverlay from "../views/elements/EffectsOverlay";
 import { containsEmoji } from '../../effects/utils';
 import { CHAT_EFFECTS } from '../../effects';
@@ -95,21 +95,7 @@ if (DEBUG) {
 
 interface IProps {
     threepidInvite: IThreepidInvite,
-
-    // Any data about the room that would normally come from the homeserver
-    // but has been passed out-of-band, eg. the room name and avatar URL
-    // from an email invite (a workaround for the fact that we can't
-    // get this information from the HS using an email invite).
-    // Fields:
-    //  * name (string) The room's name
-    //  * avatarUrl (string) The mxc:// avatar URL for the room
-    //  * inviterName (string) The display name of the person who
-    //  *                      invited us to the room
-    oobData?: {
-        name?: string;
-        avatarUrl?: string;
-        inviterName?: string;
-    };
+    oobData?: IOOBData;
 
     resizeNotifier: ResizeNotifier;
     justCreatedOpts?: IOpts;
@@ -1460,13 +1446,6 @@ export default class RoomView extends React.Component<IProps, IState> {
         });
     };
 
-    private onLeaveClick = () => {
-        dis.dispatch({
-            action: 'leave_room',
-            room_id: this.state.room.roomId,
-        });
-    };
-
     private onForgetClick = () => {
         dis.dispatch({
             action: 'forget_room',
@@ -2106,7 +2085,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                             onSearchClick={this.onSearchClick}
                             onSettingsClick={this.onSettingsClick}
                             onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
-                            onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                             e2eStatus={this.state.e2eStatus}
                             onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null}
                             appsShown={this.state.showApps}
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index 950caefa02..5e6bf45f07 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -30,13 +30,14 @@ import { _t } from "../../../languageHandler";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IOOBData } from "../../../stores/ThreepidInviteStore";
 
 interface IProps {
     room: Room;
     avatarSize: number;
     displayBadge?: boolean;
     forceCount?: boolean;
-    oobData?: object;
+    oobData?: IOOBData;
     viewAvatarOnClick?: boolean;
 }
 
diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index c3f49d4a12..8ac8de8233 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -24,14 +24,14 @@ import Modal from '../../../Modal';
 import * as Avatar from '../../../Avatar';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import { IOOBData } from '../../../stores/ThreepidInviteStore';
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    // TODO: type when js-sdk has types
-    oobData?: any;
+    oobData?: IOOBData;
     width?: number;
     height?: number;
     resizeMethod?: ResizeMethod;
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.tsx
similarity index 86%
rename from src/components/views/rooms/RoomHeader.js
rename to src/components/views/rooms/RoomHeader.tsx
index b05b709e36..c20b68cb9b 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -31,53 +30,64 @@ import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { throttle } from 'lodash';
+import { Room } from '../../../../../matrix-js-sdk/src';
+import { E2EStatus } from '../../../utils/ShieldUtils';
+import { IOOBData } from '../../../stores/ThreepidInviteStore';
+import { SearchScope } from './SearchBar';
+
+export interface ISearchInfo {
+    searchTerm: string;
+    searchScope: SearchScope;
+    searchCount: number;
+}
+
+interface IProps {
+    room: Room,
+    oobData?: IOOBData,
+    inRoom: boolean,
+    onSettingsClick: () => void;
+    onSearchClick: () => void;
+    onForgetClick: () => void;
+    onCallPlaced: (PlaceCallType) => void;
+    onAppsClick: () => void;
+    e2eStatus: E2EStatus;
+    appsShown: boolean;
+    searchInfo: ISearchInfo;
+}
 
 @replaceableComponent("views.rooms.RoomHeader")
-export default class RoomHeader extends React.Component {
-    static propTypes = {
-        room: PropTypes.object,
-        oobData: PropTypes.object,
-        inRoom: PropTypes.bool,
-        onSettingsClick: PropTypes.func,
-        onSearchClick: PropTypes.func,
-        onLeaveClick: PropTypes.func,
-        e2eStatus: PropTypes.string,
-        onAppsClick: PropTypes.func,
-        appsShown: PropTypes.bool,
-        onCallPlaced: PropTypes.func, // (PlaceCallType) => void;
-    };
-
+export default class RoomHeader extends React.Component<IProps> {
     static defaultProps = {
         editing: false,
         inRoom: false,
     };
 
-    componentDidMount() {
+    public componentDidMount() {
         const cli = MatrixClientPeg.get();
-        cli.on("RoomState.events", this._onRoomStateEvents);
+        cli.on("RoomState.events", this.onRoomStateEvents);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener("RoomState.events", this._onRoomStateEvents);
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
         }
     }
 
-    _onRoomStateEvents = (event, state) => {
+    private onRoomStateEvents = (event, state) => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;
         }
 
         // redisplay the room name, topic, etc.
-        this._rateLimitedUpdate();
+        this.rateLimitedUpdate();
     };
 
-    _rateLimitedUpdate = throttle(() => {
+    private rateLimitedUpdate = throttle(() => {
         this.forceUpdate();
     }, 500, { leading: true, trailing: true });
 
-    render() {
+    public render() {
         let searchStatus = null;
 
         // don't display the search count until the search completes and
diff --git a/src/stores/ThreepidInviteStore.ts b/src/stores/ThreepidInviteStore.ts
index 74a5f5f8ec..d0cf40941c 100644
--- a/src/stores/ThreepidInviteStore.ts
+++ b/src/stores/ThreepidInviteStore.ts
@@ -45,6 +45,16 @@ export interface IThreepidInvite {
     inviterName: string;
 }
 
+// Any data about the room that would normally come from the homeserver
+// but has been passed out-of-band, eg. the room name and avatar URL
+// from an email invite (a workaround for the fact that we can't
+// get this information from the HS using an email invite).
+export interface IOOBData {
+    name?: string; // The room's name
+    avatarUrl?: string; // The mxc:// avatar URL for the room
+    inviterName?: string; // The display name of the person who invited us to the room
+}
+
 const STORAGE_PREFIX = "mx_threepid_invite_";
 
 export default class ThreepidInviteStore extends EventEmitter {

From e121e5bf8a6ebf3fc7a8d75ababfb54a0ffb8e6a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 19:58:25 +0100
Subject: [PATCH 344/358] nice try, vscode

---
 src/components/views/rooms/RoomHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index c20b68cb9b..48b8951c81 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -30,7 +30,7 @@ import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { throttle } from 'lodash';
-import { Room } from '../../../../../matrix-js-sdk/src';
+import { Room } from 'matrix-js-sdk/src';
 import { E2EStatus } from '../../../utils/ShieldUtils';
 import { IOOBData } from '../../../stores/ThreepidInviteStore';
 import { SearchScope } from './SearchBar';

From e6b754f8dd511d6f0bd77357e23121d6c3c5f04c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 20:33:25 +0100
Subject: [PATCH 345/358] Convert Markdown to TypeScript

---
 src/{Markdown.js => Markdown.ts} | 57 +++++++++++++++++---------------
 1 file changed, 30 insertions(+), 27 deletions(-)
 rename src/{Markdown.js => Markdown.ts} (85%)

diff --git a/src/Markdown.js b/src/Markdown.ts
similarity index 85%
rename from src/Markdown.js
rename to src/Markdown.ts
index f670bded12..64037369db 100644
--- a/src/Markdown.js
+++ b/src/Markdown.ts
@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2021 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.
@@ -15,16 +16,16 @@ limitations under the License.
 */
 
 import * as commonmark from 'commonmark';
-import {escape} from "lodash";
+import { escape } from "lodash";
 
 const ALLOWED_HTML_TAGS = ['sub', 'sup', 'del', 'u'];
 
 // These types of node are definitely text
 const TEXT_NODES = ['text', 'softbreak', 'linebreak', 'paragraph', 'document'];
 
-function is_allowed_html_tag(node) {
+function isAllowedHtmlTag(node: any) {
     if (node.literal != null &&
-        node.literal.match('^<((div|span) data-mx-maths="[^"]*"|\/(div|span))>$') != null) {
+        node.literal.match('^<((div|span) data-mx-maths="[^"]*"|/(div|span))>$') != null) {
         return true;
     }
 
@@ -39,21 +40,12 @@ function is_allowed_html_tag(node) {
     return false;
 }
 
-function html_if_tag_allowed(node) {
-    if (is_allowed_html_tag(node)) {
-        this.lit(node.literal);
-        return;
-    } else {
-        this.lit(escape(node.literal));
-    }
-}
-
 /*
  * Returns true if the parse output containing the node
  * comprises multiple block level elements (ie. lines),
  * or false if it is only a single line.
  */
-function is_multi_line(node) {
+function isMultiLine(node) {
     let par = node;
     while (par.parent) {
         par = par.parent;
@@ -65,8 +57,13 @@ function is_multi_line(node) {
  * Class that wraps commonmark, adding the ability to see whether
  * a given message actually uses any markdown syntax or whether
  * it's plain text.
+ *
+ * Types are a bit of a struggle here as commonmark doesn't have types
  */
 export default class Markdown {
+    private input: string;
+    private parsed: any;
+
     constructor(input) {
         this.input = input;
 
@@ -87,7 +84,7 @@ export default class Markdown {
                 // if it's an allowed html tag, we need to render it and therefore
                 // we will need to use HTML. If it's not allowed, it's not HTML since
                 // we'll just be treating it as text.
-                if (is_allowed_html_tag(node)) {
+                if (isAllowedHtmlTag(node)) {
                     return false;
                 }
             } else {
@@ -118,7 +115,7 @@ export default class Markdown {
         //
         // Let's try sending with <p/>s anyway for now, though.
 
-        const real_paragraph = renderer.paragraph;
+        const realParagraph = renderer.paragraph;
 
         renderer.paragraph = function(node, entering) {
             // If there is only one top level node, just return the
@@ -126,8 +123,8 @@ export default class Markdown {
             // 'inline', rather than unnecessarily wrapped in its own
             // p tag. If, however, we have multiple nodes, each gets
             // its own p tag to keep them as separate paragraphs.
-            if (is_multi_line(node)) {
-                real_paragraph.call(this, node, entering);
+            if (isMultiLine(node)) {
+                realParagraph.call(this, node, entering);
             }
         };
 
@@ -150,19 +147,26 @@ export default class Markdown {
             }
         };
 
-        renderer.html_inline = html_if_tag_allowed;
+        renderer.html_inline = function(node: any) {
+            if (isAllowedHtmlTag(node)) {
+                this.lit(node.literal);
+                return;
+            } else {
+                this.lit(escape(node.literal));
+            }
+        };
 
         renderer.html_block = function(node) {
-/*
+            /*
             // as with `paragraph`, we only insert line breaks
             // if there are multiple lines in the markdown.
             const isMultiLine = is_multi_line(node);
             if (isMultiLine) this.cr();
-*/
-            html_if_tag_allowed.call(this, node);
-/*
+            */
+            renderer.html_inline(node);
+            /*
             if (isMultiLine) this.cr();
-*/
+            */
         };
 
         return renderer.render(this.parsed);
@@ -178,13 +182,12 @@ export default class Markdown {
      * which has no formatting.  Otherwise it emits HTML(!).
      */
     toPlaintext() {
-        const renderer = new commonmark.HtmlRenderer({safe: false});
-        const real_paragraph = renderer.paragraph;
+        const renderer = new commonmark.HtmlRenderer({ safe: false });
 
         renderer.paragraph = function(node, entering) {
             // as with toHTML, only append lines to paragraphs if there are
             // multiple paragraphs
-            if (is_multi_line(node)) {
+            if (isMultiLine(node)) {
                 if (!entering && node.next) {
                     this.lit('\n\n');
                 }
@@ -193,7 +196,7 @@ export default class Markdown {
 
         renderer.html_block = function(node) {
             this.lit(node.literal);
-            if (is_multi_line(node) && node.next) this.lit('\n\n');
+            if (isMultiLine(node) && node.next) this.lit('\n\n');
         };
 
         return renderer.render(this.parsed);

From ee9be5438ebc094edee0055151d1e70feb095890 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 20:43:05 +0100
Subject: [PATCH 346/358] eslint --fix

---
 .eslintignore.errorfiles                      |  15 -
 package.json                                  |   2 +-
 scripts/generate-eslint-error-ignore-file     |  23 -
 .../structures/MessagePanel-test.js           |   5 +-
 .../dialogs/InteractiveAuthDialog-test.js     |  12 +-
 test/mock-clock.js                            | 588 +++++++++---------
 6 files changed, 301 insertions(+), 344 deletions(-)
 delete mode 100644 .eslintignore.errorfiles
 delete mode 100755 scripts/generate-eslint-error-ignore-file

diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles
deleted file mode 100644
index ea66720529..0000000000
--- a/.eslintignore.errorfiles
+++ /dev/null
@@ -1,15 +0,0 @@
-# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
-
-src/Markdown.js
-src/NodeAnimator.js
-src/components/structures/RoomDirectory.js
-src/components/views/rooms/MemberList.js
-src/utils/DMRoomMap.js
-src/utils/MultiInviter.js
-test/components/structures/MessagePanel-test.js
-test/components/views/dialogs/InteractiveAuthDialog-test.js
-test/mock-clock.js
-src/component-index.js
-test/end-to-end-tests/node_modules/
-test/end-to-end-tests/element/
-test/end-to-end-tests/synapse/
diff --git a/package.json b/package.json
index 4ad585ba7d..bd997f8559 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
     "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
     "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
-    "lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
+    "lint:js": "eslint --max-warnings 0 src test",
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
diff --git a/scripts/generate-eslint-error-ignore-file b/scripts/generate-eslint-error-ignore-file
deleted file mode 100755
index 54aacfc9fa..0000000000
--- a/scripts/generate-eslint-error-ignore-file
+++ /dev/null
@@ -1,23 +0,0 @@
-#!/bin/sh
-#
-# generates .eslintignore.errorfiles to list the files which have errors in,
-# so that they can be ignored in future automated linting.
-
-out=.eslintignore.errorfiles
-
-cd `dirname $0`/..
-
-echo "generating $out"
-
-{
-    cat <<EOF
-# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
-
-EOF
-
-    ./node_modules/.bin/eslint -f json src test |
-        jq -r '.[] | select((.errorCount + .warningCount) > 0) | .filePath' |
-        sed -e 's/.*matrix-react-sdk\///';
-} > "$out"
-# also append rules from eslintignore file
-cat .eslintignore >> $out
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index d32970a278..d836de0785 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -26,7 +26,7 @@ import { EventEmitter } from "events";
 import sdk from '../../skinned-sdk';
 
 const MessagePanel = sdk.getComponent('structures.MessagePanel');
-import {MatrixClientPeg} from '../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../src/MatrixClientPeg';
 import Matrix from 'matrix-js-sdk';
 
 const test_utils = require('../../test-utils');
@@ -79,7 +79,7 @@ describe('MessagePanel', function() {
     beforeEach(function() {
         test_utils.stubClient();
         client = MatrixClientPeg.get();
-        client.credentials = {userId: '@me:here'};
+        client.credentials = { userId: '@me:here' };
 
         // HACK: We assume all settings want to be disabled
         SettingsStore.getValue = jest.fn((arg) => {
@@ -120,7 +120,6 @@ describe('MessagePanel', function() {
         return events;
     }
 
-
     // make a collection of events with some member events that should be collapsed
     // with a MemberEventListSummary
     function mkMelsEvents() {
diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.js b/test/components/views/dialogs/InteractiveAuthDialog-test.js
index fa44fc8d92..c75b2fdcc8 100644
--- a/test/components/views/dialogs/InteractiveAuthDialog-test.js
+++ b/test/components/views/dialogs/InteractiveAuthDialog-test.js
@@ -20,10 +20,10 @@ import ReactTestUtils from 'react-dom/test-utils';
 import MatrixReactTestUtils from 'matrix-react-test-utils';
 
 import sdk from '../../../skinned-sdk';
-import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 
 import * as test_utils from '../../../test-utils';
-import {sleep} from "../../../../src/utils/promise";
+import { sleep } from "../../../../src/utils/promise";
 
 const InteractiveAuthDialog = sdk.getComponent(
     'views.dialogs.InteractiveAuthDialog',
@@ -45,11 +45,11 @@ describe('InteractiveAuthDialog', function() {
 
     it('Should successfully complete a password flow', function() {
         const onFinished = jest.fn();
-        const doRequest = jest.fn().mockResolvedValue({a: 1});
+        const doRequest = jest.fn().mockResolvedValue({ a: 1 });
 
         // tell the stub matrixclient to return a real userid
         const client = MatrixClientPeg.get();
-        client.credentials = {userId: "@user:id"};
+        client.credentials = { userId: "@user:id" };
 
         const dlg = ReactDOM.render(
             <InteractiveAuthDialog
@@ -57,7 +57,7 @@ describe('InteractiveAuthDialog', function() {
                 authData={{
                     session: "sess",
                     flows: [
-                        {"stages": ["m.login.password"]},
+                        { "stages": ["m.login.password"] },
                     ],
                 }}
                 makeRequest={doRequest}
@@ -105,7 +105,7 @@ describe('InteractiveAuthDialog', function() {
             return sleep(1);
         }).then(sleep(1)).then(() => {
             expect(onFinished).toBeCalledTimes(1);
-            expect(onFinished).toBeCalledWith(true, {a: 1});
+            expect(onFinished).toBeCalledWith(true, { a: 1 });
         });
     });
 });
diff --git a/test/mock-clock.js b/test/mock-clock.js
index 1a4d6086de..4306433b6f 100644
--- a/test/mock-clock.js
+++ b/test/mock-clock.js
@@ -47,369 +47,366 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 const j$ = {};
 
 j$.Clock = function() {
-  function Clock(global, delayedFunctionSchedulerFactory, mockDate) {
-    let self = this,
-      realTimingFunctions = {
+    function Clock(global, delayedFunctionSchedulerFactory, mockDate) {
+        const self = this;
+        const realTimingFunctions = {
         setTimeout: global.setTimeout,
         clearTimeout: global.clearTimeout,
         setInterval: global.setInterval,
         clearInterval: global.clearInterval,
-      },
-      fakeTimingFunctions = {
+        };
+        const fakeTimingFunctions = {
         setTimeout: setTimeout,
         clearTimeout: clearTimeout,
         setInterval: setInterval,
         clearInterval: clearInterval,
-      },
-      installed = false,
-      delayedFunctionScheduler,
-      timer;
+        };
+        let installed = false;
+        let delayedFunctionScheduler;
+        let timer;
 
+        self.install = function() {
+            if (!originalTimingFunctionsIntact()) {
+                throw new Error('Jasmine Clock was unable to install over custom global timer functions. Is the clock already installed?');
+            }
+            replace(global, fakeTimingFunctions);
+            timer = fakeTimingFunctions;
+            delayedFunctionScheduler = delayedFunctionSchedulerFactory();
+            installed = true;
 
-    self.install = function() {
-      if(!originalTimingFunctionsIntact()) {
-        throw new Error('Jasmine Clock was unable to install over custom global timer functions. Is the clock already installed?');
-      }
-      replace(global, fakeTimingFunctions);
-      timer = fakeTimingFunctions;
-      delayedFunctionScheduler = delayedFunctionSchedulerFactory();
-      installed = true;
+            return self;
+        };
 
-      return self;
-    };
+        self.uninstall = function() {
+            delayedFunctionScheduler = null;
+            mockDate.uninstall();
+            replace(global, realTimingFunctions);
 
-    self.uninstall = function() {
-      delayedFunctionScheduler = null;
-      mockDate.uninstall();
-      replace(global, realTimingFunctions);
+            timer = realTimingFunctions;
+            installed = false;
+        };
 
-      timer = realTimingFunctions;
-      installed = false;
-    };
+        self.withMock = function(closure) {
+            this.install();
+            try {
+                closure();
+            } finally {
+                this.uninstall();
+            }
+        };
 
-    self.withMock = function(closure) {
-      this.install();
-      try {
-        closure();
-      } finally {
-        this.uninstall();
-      }
-    };
+        self.mockDate = function(initialDate) {
+            mockDate.install(initialDate);
+        };
 
-    self.mockDate = function(initialDate) {
-      mockDate.install(initialDate);
-    };
+        self.setTimeout = function(fn, delay, params) {
+            if (legacyIE()) {
+                if (arguments.length > 2) {
+                    throw new Error('IE < 9 cannot support extra params to setTimeout without a polyfill');
+                }
+                return timer.setTimeout(fn, delay);
+            }
+            return Function.prototype.apply.apply(timer.setTimeout, [global, arguments]);
+        };
 
-    self.setTimeout = function(fn, delay, params) {
-      if (legacyIE()) {
-        if (arguments.length > 2) {
-          throw new Error('IE < 9 cannot support extra params to setTimeout without a polyfill');
-        }
-        return timer.setTimeout(fn, delay);
-      }
-      return Function.prototype.apply.apply(timer.setTimeout, [global, arguments]);
-    };
+        self.setInterval = function(fn, delay, params) {
+            if (legacyIE()) {
+                if (arguments.length > 2) {
+                    throw new Error('IE < 9 cannot support extra params to setInterval without a polyfill');
+                }
+                return timer.setInterval(fn, delay);
+            }
+            return Function.prototype.apply.apply(timer.setInterval, [global, arguments]);
+        };
 
-    self.setInterval = function(fn, delay, params) {
-      if (legacyIE()) {
-        if (arguments.length > 2) {
-          throw new Error('IE < 9 cannot support extra params to setInterval without a polyfill');
-        }
-        return timer.setInterval(fn, delay);
-      }
-      return Function.prototype.apply.apply(timer.setInterval, [global, arguments]);
-    };
+        self.clearTimeout = function(id) {
+            return Function.prototype.call.apply(timer.clearTimeout, [global, id]);
+        };
 
-    self.clearTimeout = function(id) {
-      return Function.prototype.call.apply(timer.clearTimeout, [global, id]);
-    };
+        self.clearInterval = function(id) {
+            return Function.prototype.call.apply(timer.clearInterval, [global, id]);
+        };
 
-    self.clearInterval = function(id) {
-      return Function.prototype.call.apply(timer.clearInterval, [global, id]);
-    };
+        self.tick = function(millis) {
+            if (installed) {
+                mockDate.tick(millis);
+                delayedFunctionScheduler.tick(millis);
+            } else {
+                throw new Error('Mock clock is not installed, use jasmine.clock().install()');
+            }
+        };
 
-    self.tick = function(millis) {
-      if (installed) {
-        mockDate.tick(millis);
-        delayedFunctionScheduler.tick(millis);
-      } else {
-        throw new Error('Mock clock is not installed, use jasmine.clock().install()');
-      }
-    };
+        return self;
 
-    return self;
-
-    function originalTimingFunctionsIntact() {
-      return global.setTimeout === realTimingFunctions.setTimeout &&
+        function originalTimingFunctionsIntact() {
+            return global.setTimeout === realTimingFunctions.setTimeout &&
         global.clearTimeout === realTimingFunctions.clearTimeout &&
         global.setInterval === realTimingFunctions.setInterval &&
         global.clearInterval === realTimingFunctions.clearInterval;
+        }
+
+        function legacyIE() {
+            //if these methods are polyfilled, apply will be present
+            return !(realTimingFunctions.setTimeout || realTimingFunctions.setInterval).apply;
+        }
+
+        function replace(dest, source) {
+            for (const prop in source) {
+                dest[prop] = source[prop];
+            }
+        }
+
+        function setTimeout(fn, delay) {
+            return delayedFunctionScheduler.scheduleFunction(fn, delay, argSlice(arguments, 2));
+        }
+
+        function clearTimeout(id) {
+            return delayedFunctionScheduler.removeFunctionWithId(id);
+        }
+
+        function setInterval(fn, interval) {
+            return delayedFunctionScheduler.scheduleFunction(fn, interval, argSlice(arguments, 2), true);
+        }
+
+        function clearInterval(id) {
+            return delayedFunctionScheduler.removeFunctionWithId(id);
+        }
+
+        function argSlice(argsObj, n) {
+            return Array.prototype.slice.call(argsObj, n);
+        }
     }
 
-    function legacyIE() {
-      //if these methods are polyfilled, apply will be present
-      return !(realTimingFunctions.setTimeout || realTimingFunctions.setInterval).apply;
-    }
-
-    function replace(dest, source) {
-      for (const prop in source) {
-        dest[prop] = source[prop];
-      }
-    }
-
-    function setTimeout(fn, delay) {
-      return delayedFunctionScheduler.scheduleFunction(fn, delay, argSlice(arguments, 2));
-    }
-
-    function clearTimeout(id) {
-      return delayedFunctionScheduler.removeFunctionWithId(id);
-    }
-
-    function setInterval(fn, interval) {
-      return delayedFunctionScheduler.scheduleFunction(fn, interval, argSlice(arguments, 2), true);
-    }
-
-    function clearInterval(id) {
-      return delayedFunctionScheduler.removeFunctionWithId(id);
-    }
-
-    function argSlice(argsObj, n) {
-      return Array.prototype.slice.call(argsObj, n);
-    }
-  }
-
-  return Clock;
+    return Clock;
 }();
 
-
 j$.DelayedFunctionScheduler = function() {
-  function DelayedFunctionScheduler() {
-    const self = this;
-    const scheduledLookup = [];
-    const scheduledFunctions = {};
-    let currentTime = 0;
-    let delayedFnCount = 0;
+    function DelayedFunctionScheduler() {
+        const self = this;
+        const scheduledLookup = [];
+        const scheduledFunctions = {};
+        let currentTime = 0;
+        let delayedFnCount = 0;
 
-    self.tick = function(millis) {
-      millis = millis || 0;
-      const endTime = currentTime + millis;
+        self.tick = function(millis) {
+            millis = millis || 0;
+            const endTime = currentTime + millis;
 
-      runScheduledFunctions(endTime);
-      currentTime = endTime;
-    };
+            runScheduledFunctions(endTime);
+            currentTime = endTime;
+        };
 
-    self.scheduleFunction = function(funcToCall, millis, params, recurring, timeoutKey, runAtMillis) {
-      let f;
-      if (typeof(funcToCall) === 'string') {
-        /* jshint evil: true */
-        f = function() { return eval(funcToCall); };
-        /* jshint evil: false */
-      } else {
-        f = funcToCall;
-      }
+        self.scheduleFunction = function(funcToCall, millis, params, recurring, timeoutKey, runAtMillis) {
+            let f;
+            if (typeof(funcToCall) === 'string') {
+                /* jshint evil: true */
+                f = function() { return eval(funcToCall); };
+                /* jshint evil: false */
+            } else {
+                f = funcToCall;
+            }
 
-      millis = millis || 0;
-      timeoutKey = timeoutKey || ++delayedFnCount;
-      runAtMillis = runAtMillis || (currentTime + millis);
+            millis = millis || 0;
+            timeoutKey = timeoutKey || ++delayedFnCount;
+            runAtMillis = runAtMillis || (currentTime + millis);
 
-      const funcToSchedule = {
+            const funcToSchedule = {
         runAtMillis: runAtMillis,
         funcToCall: f,
         recurring: recurring,
         params: params,
         timeoutKey: timeoutKey,
         millis: millis,
-      };
+            };
 
-      if (runAtMillis in scheduledFunctions) {
-        scheduledFunctions[runAtMillis].push(funcToSchedule);
-      } else {
-        scheduledFunctions[runAtMillis] = [funcToSchedule];
-        scheduledLookup.push(runAtMillis);
-        scheduledLookup.sort(function(a, b) {
-          return a - b;
-        });
-      }
+            if (runAtMillis in scheduledFunctions) {
+                scheduledFunctions[runAtMillis].push(funcToSchedule);
+            } else {
+                scheduledFunctions[runAtMillis] = [funcToSchedule];
+                scheduledLookup.push(runAtMillis);
+                scheduledLookup.sort(function(a, b) {
+                    return a - b;
+                });
+            }
 
-      return timeoutKey;
-    };
+            return timeoutKey;
+        };
 
-    self.removeFunctionWithId = function(timeoutKey) {
-      for (const runAtMillis in scheduledFunctions) {
-        const funcs = scheduledFunctions[runAtMillis];
-        const i = indexOfFirstToPass(funcs, function(func) {
-          return func.timeoutKey === timeoutKey;
-        });
+        self.removeFunctionWithId = function(timeoutKey) {
+            for (const runAtMillis in scheduledFunctions) {
+                const funcs = scheduledFunctions[runAtMillis];
+                const i = indexOfFirstToPass(funcs, function(func) {
+                    return func.timeoutKey === timeoutKey;
+                });
 
-        if (i > -1) {
-          if (funcs.length === 1) {
-            delete scheduledFunctions[runAtMillis];
-            deleteFromLookup(runAtMillis);
-          } else {
-            funcs.splice(i, 1);
-          }
+                if (i > -1) {
+                    if (funcs.length === 1) {
+                        delete scheduledFunctions[runAtMillis];
+                        deleteFromLookup(runAtMillis);
+                    } else {
+                        funcs.splice(i, 1);
+                    }
 
-          // intervals get rescheduled when executed, so there's never more
-          // than a single scheduled function with a given timeoutKey
-          break;
+                    // intervals get rescheduled when executed, so there's never more
+                    // than a single scheduled function with a given timeoutKey
+                    break;
+                }
+            }
+        };
+
+        return self;
+
+        function indexOfFirstToPass(array, testFn) {
+            let index = -1;
+
+            for (let i = 0; i < array.length; ++i) {
+                if (testFn(array[i])) {
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
         }
-      }
-    };
 
-    return self;
+        function deleteFromLookup(key) {
+            const value = Number(key);
+            const i = indexOfFirstToPass(scheduledLookup, function(millis) {
+                return millis === value;
+            });
 
-    function indexOfFirstToPass(array, testFn) {
-      let index = -1;
-
-      for (let i = 0; i < array.length; ++i) {
-        if (testFn(array[i])) {
-          index = i;
-          break;
+            if (i > -1) {
+                scheduledLookup.splice(i, 1);
+            }
         }
-      }
 
-      return index;
-    }
+        function reschedule(scheduledFn) {
+            self.scheduleFunction(scheduledFn.funcToCall,
+                scheduledFn.millis,
+                scheduledFn.params,
+                true,
+                scheduledFn.timeoutKey,
+                scheduledFn.runAtMillis + scheduledFn.millis);
+        }
 
-    function deleteFromLookup(key) {
-      const value = Number(key);
-      const i = indexOfFirstToPass(scheduledLookup, function(millis) {
-        return millis === value;
-      });
+        function forEachFunction(funcsToRun, callback) {
+            for (let i = 0; i < funcsToRun.length; ++i) {
+                callback(funcsToRun[i]);
+            }
+        }
 
-      if (i > -1) {
-        scheduledLookup.splice(i, 1);
-      }
-    }
+        function runScheduledFunctions(endTime) {
+            if (scheduledLookup.length === 0 || scheduledLookup[0] > endTime) {
+                return;
+            }
 
-    function reschedule(scheduledFn) {
-      self.scheduleFunction(scheduledFn.funcToCall,
-        scheduledFn.millis,
-        scheduledFn.params,
-        true,
-        scheduledFn.timeoutKey,
-        scheduledFn.runAtMillis + scheduledFn.millis);
-    }
+            do {
+                currentTime = scheduledLookup.shift();
 
-    function forEachFunction(funcsToRun, callback) {
-      for (let i = 0; i < funcsToRun.length; ++i) {
-        callback(funcsToRun[i]);
-      }
-    }
+                const funcsToRun = scheduledFunctions[currentTime];
+                delete scheduledFunctions[currentTime];
 
-    function runScheduledFunctions(endTime) {
-      if (scheduledLookup.length === 0 || scheduledLookup[0] > endTime) {
-        return;
-      }
+                forEachFunction(funcsToRun, function(funcToRun) {
+                    if (funcToRun.recurring) {
+                        reschedule(funcToRun);
+                    }
+                });
 
-      do {
-        currentTime = scheduledLookup.shift();
-
-        const funcsToRun = scheduledFunctions[currentTime];
-        delete scheduledFunctions[currentTime];
-
-        forEachFunction(funcsToRun, function(funcToRun) {
-          if (funcToRun.recurring) {
-            reschedule(funcToRun);
-          }
-        });
-
-        forEachFunction(funcsToRun, function(funcToRun) {
-          funcToRun.funcToCall.apply(null, funcToRun.params || []);
-        });
-      } while (scheduledLookup.length > 0 &&
-              // checking first if we're out of time prevents setTimeout(0)
-              // scheduled in a funcToRun from forcing an extra iteration
+                forEachFunction(funcsToRun, function(funcToRun) {
+                    funcToRun.funcToCall.apply(null, funcToRun.params || []);
+                });
+            } while (scheduledLookup.length > 0 &&
+            // checking first if we're out of time prevents setTimeout(0)
+            // scheduled in a funcToRun from forcing an extra iteration
                  currentTime !== endTime &&
                  scheduledLookup[0] <= endTime);
+        }
     }
-  }
 
-  return DelayedFunctionScheduler;
+    return DelayedFunctionScheduler;
 }();
 
-
 j$.MockDate = function() {
-  function MockDate(global) {
-    const self = this;
-    let currentTime = 0;
+    function MockDate(global) {
+        const self = this;
+        let currentTime = 0;
 
-    if (!global || !global.Date) {
-      self.install = function() {};
-      self.tick = function() {};
-      self.uninstall = function() {};
-      return self;
-    }
-
-    const GlobalDate = global.Date;
-
-    self.install = function(mockDate) {
-      if (mockDate instanceof GlobalDate) {
-        currentTime = mockDate.getTime();
-      } else {
-        currentTime = new GlobalDate().getTime();
-      }
-
-      global.Date = FakeDate;
-    };
-
-    self.tick = function(millis) {
-      millis = millis || 0;
-      currentTime = currentTime + millis;
-    };
-
-    self.uninstall = function() {
-      currentTime = 0;
-      global.Date = GlobalDate;
-    };
-
-    createDateProperties();
-
-    return self;
-
-    function FakeDate() {
-      switch(arguments.length) {
-        case 0:
-          return new GlobalDate(currentTime);
-        case 1:
-          return new GlobalDate(arguments[0]);
-        case 2:
-          return new GlobalDate(arguments[0], arguments[1]);
-        case 3:
-          return new GlobalDate(arguments[0], arguments[1], arguments[2]);
-        case 4:
-          return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3]);
-        case 5:
-          return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                                arguments[4]);
-        case 6:
-          return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                                arguments[4], arguments[5]);
-        default:
-          return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                                arguments[4], arguments[5], arguments[6]);
-      }
-    }
-
-    function createDateProperties() {
-      FakeDate.prototype = GlobalDate.prototype;
-
-      FakeDate.now = function() {
-        if (GlobalDate.now) {
-          return currentTime;
-        } else {
-          throw new Error('Browser does not support Date.now()');
+        if (!global || !global.Date) {
+            self.install = function() {};
+            self.tick = function() {};
+            self.uninstall = function() {};
+            return self;
         }
-      };
 
-      FakeDate.toSource = GlobalDate.toSource;
-      FakeDate.toString = GlobalDate.toString;
-      FakeDate.parse = GlobalDate.parse;
-      FakeDate.UTC = GlobalDate.UTC;
+        const GlobalDate = global.Date;
+
+        self.install = function(mockDate) {
+            if (mockDate instanceof GlobalDate) {
+                currentTime = mockDate.getTime();
+            } else {
+                currentTime = new GlobalDate().getTime();
+            }
+
+            global.Date = FakeDate;
+        };
+
+        self.tick = function(millis) {
+            millis = millis || 0;
+            currentTime = currentTime + millis;
+        };
+
+        self.uninstall = function() {
+            currentTime = 0;
+            global.Date = GlobalDate;
+        };
+
+        createDateProperties();
+
+        return self;
+
+        function FakeDate() {
+            switch (arguments.length) {
+                case 0:
+                    return new GlobalDate(currentTime);
+                case 1:
+                    return new GlobalDate(arguments[0]);
+                case 2:
+                    return new GlobalDate(arguments[0], arguments[1]);
+                case 3:
+                    return new GlobalDate(arguments[0], arguments[1], arguments[2]);
+                case 4:
+                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3]);
+                case 5:
+                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
+                        arguments[4]);
+                case 6:
+                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
+                        arguments[4], arguments[5]);
+                default:
+                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
+                        arguments[4], arguments[5], arguments[6]);
+            }
+        }
+
+        function createDateProperties() {
+            FakeDate.prototype = GlobalDate.prototype;
+
+            FakeDate.now = function() {
+                if (GlobalDate.now) {
+                    return currentTime;
+                } else {
+                    throw new Error('Browser does not support Date.now()');
+                }
+            };
+
+            FakeDate.toSource = GlobalDate.toSource;
+            FakeDate.toString = GlobalDate.toString;
+            FakeDate.parse = GlobalDate.parse;
+            FakeDate.UTC = GlobalDate.UTC;
+        }
     }
-	}
 
-  return MockDate;
+    return MockDate;
 }();
 
 const _clock = new j$.Clock(global, function() { return new j$.DelayedFunctionScheduler(); }, new j$.MockDate(global));
@@ -418,4 +415,3 @@ export function clock() {
     return _clock;
 }
 
-

From 12cce2a93884046d39eae98df1b9fc214a2b3e58 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 20:51:13 +0100
Subject: [PATCH 347/358] delint

---
 src/components/views/elements/BlurhashPlaceholder.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/BlurhashPlaceholder.tsx b/src/components/views/elements/BlurhashPlaceholder.tsx
index bed45bfe5a..0e59253fe8 100644
--- a/src/components/views/elements/BlurhashPlaceholder.tsx
+++ b/src/components/views/elements/BlurhashPlaceholder.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import {decode} from "blurhash";
+import { decode } from "blurhash";
 
 interface IProps {
     blurhash: string;
@@ -38,7 +38,7 @@ export default class BlurhashPlaceholder extends React.PureComponent<IProps> {
         if (!this.canvas.current) return;
 
         try {
-            const {width, height} = this.props;
+            const { width, height } = this.props;
 
             const pixels = decode(this.props.blurhash, Math.ceil(width), Math.ceil(height));
             const ctx = this.canvas.current.getContext("2d");

From 543fe6382d2d4e8f7feb643627667ca5b78aa2c0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 20:54:04 +0100
Subject: [PATCH 348/358] Fix linting in tests

Or in the case of one test, disbale just the one rule it breaks
---
 .../structures/MessagePanel-test.js           | 22 +++++++++----------
 .../dialogs/InteractiveAuthDialog-test.js     |  4 ++--
 test/mock-clock.js                            | 11 +++++++++-
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index d836de0785..ed2b7a6a36 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2021 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.
@@ -29,7 +29,7 @@ const MessagePanel = sdk.getComponent('structures.MessagePanel');
 import { MatrixClientPeg } from '../../../src/MatrixClientPeg';
 import Matrix from 'matrix-js-sdk';
 
-const test_utils = require('../../test-utils');
+const TestUtilsMatrix = require('../../test-utils');
 const mockclock = require('../../mock-clock');
 
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
@@ -77,7 +77,7 @@ describe('MessagePanel', function() {
     const events = mkEvents();
 
     beforeEach(function() {
-        test_utils.stubClient();
+        TestUtilsMatrix.stubClient();
         client = MatrixClientPeg.get();
         client.credentials = { userId: '@me:here' };
 
@@ -97,7 +97,7 @@ describe('MessagePanel', function() {
         const events = [];
         const ts0 = Date.now();
         for (let i = 0; i < 10; i++) {
-            events.push(test_utils.mkMessage(
+            events.push(TestUtilsMatrix.mkMessage(
                 {
                     event: true, room: "!room:id", user: "@user:id",
                     ts: ts0 + i * 1000,
@@ -111,7 +111,7 @@ describe('MessagePanel', function() {
         const events = [];
         const ts0 = Date.parse('09 May 2004 00:12:00 GMT');
         for (let i = 0; i < 10; i++) {
-            events.push(test_utils.mkMessage(
+            events.push(TestUtilsMatrix.mkMessage(
                 {
                     event: true, room: "!room:id", user: "@user:id",
                     ts: ts0 + i * 1000,
@@ -127,13 +127,13 @@ describe('MessagePanel', function() {
         const ts0 = Date.now();
 
         let i = 0;
-        events.push(test_utils.mkMessage({
+        events.push(TestUtilsMatrix.mkMessage({
             event: true, room: "!room:id", user: "@user:id",
             ts: ts0 + ++i * 1000,
         }));
 
         for (i = 0; i < 10; i++) {
-            events.push(test_utils.mkMembership({
+            events.push(TestUtilsMatrix.mkMembership({
                 event: true, room: "!room:id", user: "@user:id",
                 target: {
                     userId: "@user:id",
@@ -150,7 +150,7 @@ describe('MessagePanel', function() {
             }));
         }
 
-        events.push(test_utils.mkMessage({
+        events.push(TestUtilsMatrix.mkMessage({
             event: true, room: "!room:id", user: "@user:id",
             ts: ts0 + ++i*1000,
         }));
@@ -166,7 +166,7 @@ describe('MessagePanel', function() {
         let i = 0;
 
         for (i = 0; i < 10; i++) {
-            events.push(test_utils.mkMembership({
+            events.push(TestUtilsMatrix.mkMembership({
                 event: true, room: "!room:id", user: "@user:id",
                 target: {
                     userId: "@user:id",
@@ -188,8 +188,8 @@ describe('MessagePanel', function() {
 
     // A list of room creation, encryption, and invite events.
     function mkCreationEvents() {
-        const mkEvent = test_utils.mkEvent;
-        const mkMembership = test_utils.mkMembership;
+        const mkEvent = TestUtilsMatrix.mkEvent;
+        const mkMembership = TestUtilsMatrix.mkMembership;
         const roomId = "!someroom";
         const alice = "@alice:example.org";
         const ts0 = Date.now();
diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.js b/test/components/views/dialogs/InteractiveAuthDialog-test.js
index c75b2fdcc8..86fa562b60 100644
--- a/test/components/views/dialogs/InteractiveAuthDialog-test.js
+++ b/test/components/views/dialogs/InteractiveAuthDialog-test.js
@@ -22,7 +22,7 @@ import MatrixReactTestUtils from 'matrix-react-test-utils';
 import sdk from '../../../skinned-sdk';
 import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 
-import * as test_utils from '../../../test-utils';
+import * as TestUtilsMatrix from '../../../test-utils';
 import { sleep } from "../../../../src/utils/promise";
 
 const InteractiveAuthDialog = sdk.getComponent(
@@ -33,7 +33,7 @@ describe('InteractiveAuthDialog', function() {
     let parentDiv;
 
     beforeEach(function() {
-        test_utils.stubClient();
+        TestUtilsMatrix.stubClient();
         parentDiv = document.createElement('div');
         document.body.appendChild(parentDiv);
     });
diff --git a/test/mock-clock.js b/test/mock-clock.js
index 4306433b6f..134bd107dd 100644
--- a/test/mock-clock.js
+++ b/test/mock-clock.js
@@ -42,8 +42,14 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  * The reason for C&Ping jasmine's clock here is that jasmine itself is
  * difficult to webpack, and we don't really want all of it. Sinon also has a
  * mock-clock implementation, but again, it is difficult to webpack.
+ *
+ * Hopefully the reasons for c+ping this no longer apply, but until we can
+ * verify this / remove it, disable the eslint rule that it breaks (impresssively
+ * only one, having fixed the long line).
  */
 
+/* eslint-disable prefer-rest-params */
+
 const j$ = {};
 
 j$.Clock = function() {
@@ -67,7 +73,10 @@ j$.Clock = function() {
 
         self.install = function() {
             if (!originalTimingFunctionsIntact()) {
-                throw new Error('Jasmine Clock was unable to install over custom global timer functions. Is the clock already installed?');
+                throw new Error(
+                    'Jasmine Clock was unable to install over custom global timer functions. ' +
+                    'Is the clock already installed?',
+                );
             }
             replace(global, fakeTimingFunctions);
             timer = fakeTimingFunctions;

From 3db95d607d5bd8108a687574f5805a5a6e72c370 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 1 Jul 2021 20:57:56 +0100
Subject: [PATCH 349/358] Use semicolons

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 48b8951c81..0871c9e400 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -42,9 +42,9 @@ export interface ISearchInfo {
 }
 
 interface IProps {
-    room: Room,
-    oobData?: IOOBData,
-    inRoom: boolean,
+    room: Room;
+    oobData?: IOOBData;
+    inRoom: boolean;
     onSettingsClick: () => void;
     onSearchClick: () => void;
     onForgetClick: () => void;

From 38ed53d5d19e2d6f3122b358b840e790dbc32f0d Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 1 Jul 2021 20:58:51 +0100
Subject: [PATCH 350/358] Oops, don't just blindly insert the commented type

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 0871c9e400..2b398b442a 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -48,7 +48,7 @@ interface IProps {
     onSettingsClick: () => void;
     onSearchClick: () => void;
     onForgetClick: () => void;
-    onCallPlaced: (PlaceCallType) => void;
+    onCallPlaced: (type: PlaceCallType) => void;
     onAppsClick: () => void;
     e2eStatus: E2EStatus;
     appsShown: boolean;

From eb1a22ab19e2dd86000c8809dea36fb7bf25d03e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 21:00:54 +0100
Subject: [PATCH 351/358] Add types

---
 src/components/views/rooms/RoomHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 2b398b442a..af5daed5bc 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -30,7 +30,7 @@ import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { throttle } from 'lodash';
-import { Room } from 'matrix-js-sdk/src';
+import { MatrixEvent, Room, RoomState } from 'matrix-js-sdk/src';
 import { E2EStatus } from '../../../utils/ShieldUtils';
 import { IOOBData } from '../../../stores/ThreepidInviteStore';
 import { SearchScope } from './SearchBar';
@@ -74,7 +74,7 @@ export default class RoomHeader extends React.Component<IProps> {
         }
     }
 
-    private onRoomStateEvents = (event, state) => {
+    private onRoomStateEvents = (event: MatrixEvent, state: RoomState) => {
         if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
             return;
         }

From ac0f1ebf93dd6ff48d524d66aba596d07084db62 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 21:05:57 +0100
Subject: [PATCH 352/358] fix field accesses in tests and default params

---
 src/Terms.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Terms.ts b/src/Terms.ts
index e96081b7b7..f2c01ebe24 100644
--- a/src/Terms.ts
+++ b/src/Terms.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classNames from 'classnames';
-import { SERVICE_TYPES } from '../../matrix-js-sdk/src/service-types';
+import { SERVICE_TYPES } from 'matrix-js-sdk/src/service-types';
 
 import { MatrixClientPeg } from './MatrixClientPeg';
 import * as sdk from '.';

From c2545923c1f189b76eb4d388d4eeea229643c340 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 1 Jul 2021 21:10:37 +0100
Subject: [PATCH 353/358] Use better types to make CI happy

---
 .../views/rooms/SendMessageComposer.tsx       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index ec190c829a..2c45c1bbf8 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -17,17 +17,19 @@ limitations under the License.
 import React, { ClipboardEvent, createRef, KeyboardEvent } from 'react';
 import EMOJI_REGEX from 'emojibase-regex';
 import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { DebouncedFunc, throttle } from 'lodash';
+import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
 
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
 import {
-    htmlSerializeIfNeeded,
-    textSerialize,
     containsEmote,
-    stripEmoteCommand,
-    unescapeMessage,
+    htmlSerializeIfNeeded,
     startsWith,
+    stripEmoteCommand,
     stripPrefix,
+    textSerialize,
+    unescapeMessage,
 } from '../../../editor/serialize';
 import { CommandPartCreator, Part, PartCreator, SerializedPart } from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
@@ -52,7 +54,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
-import { DebouncedFunc, throttle } from 'lodash';
 
 function addReplyToMessageContent(
     content: IContent,
@@ -258,12 +259,12 @@ export default class SendMessageComposer extends React.Component<IProps> {
         const events = timeline.getEvents();
         const reaction = this.model.parts[1].text;
         for (let i = events.length - 1; i >= 0; i--) {
-            if (events[i].getType() === "m.room.message") {
+            if (events[i].getType() === EventType.RoomMessage) {
                 let shouldReact = true;
                 const lastMessage = events[i];
                 const userId = MatrixClientPeg.get().getUserId();
                 const messageReactions = this.props.room.getUnfilteredTimelineSet()
-                    .getRelationsForEvent(lastMessage.getId(), "m.annotation", "m.reaction");
+                    .getRelationsForEvent(lastMessage.getId(), RelationType.Annotation, EventType.Reaction);
 
                 // if we have already sent this reaction, don't redact but don't re-send
                 if (messageReactions) {
@@ -274,9 +275,9 @@ export default class SendMessageComposer extends React.Component<IProps> {
                     shouldReact = !myReactionKeys.includes(reaction);
                 }
                 if (shouldReact) {
-                    MatrixClientPeg.get().sendEvent(lastMessage.getRoomId(), "m.reaction", {
+                    MatrixClientPeg.get().sendEvent(lastMessage.getRoomId(), EventType.Reaction, {
                         "m.relates_to": {
-                            "rel_type": "m.annotation",
+                            "rel_type": RelationType.Annotation,
                             "event_id": lastMessage.getId(),
                             "key": reaction,
                         },

From c1310bcd9f11faeb5414443cc9ece721582e19eb Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 21:31:17 +0100
Subject: [PATCH 354/358] Better types

---
 package.json    |  1 +
 src/Markdown.ts | 26 ++++++++++++++++----------
 yarn.lock       |  5 +++++
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 4ad585ba7d..c505e16dce 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@types/commonmark": "^0.27.4",
     "await-lock": "^2.1.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
diff --git a/src/Markdown.ts b/src/Markdown.ts
index 64037369db..bb6d6d8df0 100644
--- a/src/Markdown.ts
+++ b/src/Markdown.ts
@@ -23,7 +23,15 @@ const ALLOWED_HTML_TAGS = ['sub', 'sup', 'del', 'u'];
 // These types of node are definitely text
 const TEXT_NODES = ['text', 'softbreak', 'linebreak', 'paragraph', 'document'];
 
-function isAllowedHtmlTag(node: any) {
+// As far as @types/commonmark is concerned, these are not public, so add them
+interface CommonmarkHtmlRendererInternal extends commonmark.HtmlRenderer {
+    paragraph: (node: commonmark.Node, entering: boolean) => void;
+    link: (node: commonmark.Node, entering: boolean) => void;
+    html_inline: (node: commonmark.Node) => void; // eslint-disable-line camelcase
+    html_block: (node: commonmark.Node) => void; // eslint-disable-line camelcase
+}
+
+function isAllowedHtmlTag(node: commonmark.Node): boolean {
     if (node.literal != null &&
         node.literal.match('^<((div|span) data-mx-maths="[^"]*"|/(div|span))>$') != null) {
         return true;
@@ -45,7 +53,7 @@ function isAllowedHtmlTag(node: any) {
  * comprises multiple block level elements (ie. lines),
  * or false if it is only a single line.
  */
-function isMultiLine(node) {
+function isMultiLine(node: commonmark.Node): boolean {
     let par = node;
     while (par.parent) {
         par = par.parent;
@@ -57,12 +65,10 @@ function isMultiLine(node) {
  * Class that wraps commonmark, adding the ability to see whether
  * a given message actually uses any markdown syntax or whether
  * it's plain text.
- *
- * Types are a bit of a struggle here as commonmark doesn't have types
  */
 export default class Markdown {
     private input: string;
-    private parsed: any;
+    private parsed: commonmark.Node;
 
     constructor(input) {
         this.input = input;
@@ -71,7 +77,7 @@ export default class Markdown {
         this.parsed = parser.parse(this.input);
     }
 
-    isPlainText() {
+    isPlainText(): boolean {
         const walker = this.parsed.walker();
 
         let ev;
@@ -94,7 +100,7 @@ export default class Markdown {
         return true;
     }
 
-    toHTML({ externalLinks = false } = {}) {
+    toHTML({ externalLinks = false } = {}): string {
         const renderer = new commonmark.HtmlRenderer({
             safe: false,
 
@@ -104,7 +110,7 @@ export default class Markdown {
             // block quote ends up all on one line
             // (https://github.com/vector-im/element-web/issues/3154)
             softbreak: '<br />',
-        });
+        }) as CommonmarkHtmlRendererInternal;
 
         // Trying to strip out the wrapping <p/> causes a lot more complication
         // than it's worth, i think.  For instance, this code will go and strip
@@ -181,8 +187,8 @@ export default class Markdown {
      * N.B. this does **NOT** render arbitrary MD to plain text - only MD
      * which has no formatting.  Otherwise it emits HTML(!).
      */
-    toPlaintext() {
-        const renderer = new commonmark.HtmlRenderer({ safe: false });
+    toPlaintext(): string {
+        const renderer = new commonmark.HtmlRenderer({ safe: false }) as CommonmarkHtmlRendererInternal;
 
         renderer.paragraph = function(node, entering) {
             // as with toHTML, only append lines to paragraphs if there are
diff --git a/yarn.lock b/yarn.lock
index 6f08372e18..d59dc9d79f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1478,6 +1478,11 @@
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
   integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
 
+"@types/commonmark@^0.27.4":
+  version "0.27.4"
+  resolved "https://registry.yarnpkg.com/@types/commonmark/-/commonmark-0.27.4.tgz#8f42990e5cf3b6b95bd99eaa452e157aab679b82"
+  integrity sha512-7koSjp08QxKoS1/+3T15+kD7+vqOUvZRHvM8PutF3Xsk5aAEkdlIGRsHJ3/XsC3izoqTwBdRW/vH7rzCKkIicA==
+
 "@types/counterpart@^0.18.1":
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"

From 08176beb58163f3695a16ff757d838886fea5026 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 21:52:15 +0100
Subject: [PATCH 355/358] Kill mock-clock

We already import sinon's one in UserActivitytest, so use that here too.
---
 .../structures/MessagePanel-test.js           |  12 +-
 test/mock-clock.js                            | 426 ------------------
 2 files changed, 7 insertions(+), 431 deletions(-)
 delete mode 100644 test/mock-clock.js

diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index ed2b7a6a36..f415b85105 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/test/components/structures/MessagePanel-test.js
@@ -30,7 +30,7 @@ import { MatrixClientPeg } from '../../../src/MatrixClientPeg';
 import Matrix from 'matrix-js-sdk';
 
 const TestUtilsMatrix = require('../../test-utils');
-const mockclock = require('../../mock-clock');
+import FakeTimers from '@sinonjs/fake-timers';
 
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 import { configure, mount } from "enzyme";
@@ -72,7 +72,7 @@ class WrappedMessagePanel extends React.Component {
 }
 
 describe('MessagePanel', function() {
-    const clock = mockclock.clock();
+    let clock = null;
     const realSetTimeout = window.setTimeout;
     const events = mkEvents();
 
@@ -90,7 +90,10 @@ describe('MessagePanel', function() {
     });
 
     afterEach(function() {
-        clock.uninstall();
+        if (clock) {
+            clock.uninstall();
+            clock = null;
+        }
     });
 
     function mkEvents() {
@@ -362,8 +365,7 @@ describe('MessagePanel', function() {
 
     it('shows a ghost read-marker when the read-marker moves', function(done) {
         // fake the clock so that we can test the velocity animation.
-        clock.install();
-        clock.mockDate();
+        clock = FakeTimers.install();
 
         const parentDiv = document.createElement('div');
 
diff --git a/test/mock-clock.js b/test/mock-clock.js
deleted file mode 100644
index 134bd107dd..0000000000
--- a/test/mock-clock.js
+++ /dev/null
@@ -1,426 +0,0 @@
-/*
-Copyright (c) 2008-2015 Pivotal Labs
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-
-/* This is jasmine's implementation of a mock clock, lifted from the depths of
- * jasmine-core and exposed as a standalone module. The interface is just the
- * same as that of jasmine.clock. For example:
- *
- *    var mock_clock = require("../../mock-clock").clock();
- *    mock_clock.install();
- *    setTimeout(function() {
- *        timerCallback();
- *    }, 100);
- *
- *    expect(timerCallback).not.toHaveBeenCalled();
- *    mock_clock.tick(101);
- *    expect(timerCallback).toHaveBeenCalled();
- *
- *    mock_clock.uninstall();
- *
- *
- * The reason for C&Ping jasmine's clock here is that jasmine itself is
- * difficult to webpack, and we don't really want all of it. Sinon also has a
- * mock-clock implementation, but again, it is difficult to webpack.
- *
- * Hopefully the reasons for c+ping this no longer apply, but until we can
- * verify this / remove it, disable the eslint rule that it breaks (impresssively
- * only one, having fixed the long line).
- */
-
-/* eslint-disable prefer-rest-params */
-
-const j$ = {};
-
-j$.Clock = function() {
-    function Clock(global, delayedFunctionSchedulerFactory, mockDate) {
-        const self = this;
-        const realTimingFunctions = {
-        setTimeout: global.setTimeout,
-        clearTimeout: global.clearTimeout,
-        setInterval: global.setInterval,
-        clearInterval: global.clearInterval,
-        };
-        const fakeTimingFunctions = {
-        setTimeout: setTimeout,
-        clearTimeout: clearTimeout,
-        setInterval: setInterval,
-        clearInterval: clearInterval,
-        };
-        let installed = false;
-        let delayedFunctionScheduler;
-        let timer;
-
-        self.install = function() {
-            if (!originalTimingFunctionsIntact()) {
-                throw new Error(
-                    'Jasmine Clock was unable to install over custom global timer functions. ' +
-                    'Is the clock already installed?',
-                );
-            }
-            replace(global, fakeTimingFunctions);
-            timer = fakeTimingFunctions;
-            delayedFunctionScheduler = delayedFunctionSchedulerFactory();
-            installed = true;
-
-            return self;
-        };
-
-        self.uninstall = function() {
-            delayedFunctionScheduler = null;
-            mockDate.uninstall();
-            replace(global, realTimingFunctions);
-
-            timer = realTimingFunctions;
-            installed = false;
-        };
-
-        self.withMock = function(closure) {
-            this.install();
-            try {
-                closure();
-            } finally {
-                this.uninstall();
-            }
-        };
-
-        self.mockDate = function(initialDate) {
-            mockDate.install(initialDate);
-        };
-
-        self.setTimeout = function(fn, delay, params) {
-            if (legacyIE()) {
-                if (arguments.length > 2) {
-                    throw new Error('IE < 9 cannot support extra params to setTimeout without a polyfill');
-                }
-                return timer.setTimeout(fn, delay);
-            }
-            return Function.prototype.apply.apply(timer.setTimeout, [global, arguments]);
-        };
-
-        self.setInterval = function(fn, delay, params) {
-            if (legacyIE()) {
-                if (arguments.length > 2) {
-                    throw new Error('IE < 9 cannot support extra params to setInterval without a polyfill');
-                }
-                return timer.setInterval(fn, delay);
-            }
-            return Function.prototype.apply.apply(timer.setInterval, [global, arguments]);
-        };
-
-        self.clearTimeout = function(id) {
-            return Function.prototype.call.apply(timer.clearTimeout, [global, id]);
-        };
-
-        self.clearInterval = function(id) {
-            return Function.prototype.call.apply(timer.clearInterval, [global, id]);
-        };
-
-        self.tick = function(millis) {
-            if (installed) {
-                mockDate.tick(millis);
-                delayedFunctionScheduler.tick(millis);
-            } else {
-                throw new Error('Mock clock is not installed, use jasmine.clock().install()');
-            }
-        };
-
-        return self;
-
-        function originalTimingFunctionsIntact() {
-            return global.setTimeout === realTimingFunctions.setTimeout &&
-        global.clearTimeout === realTimingFunctions.clearTimeout &&
-        global.setInterval === realTimingFunctions.setInterval &&
-        global.clearInterval === realTimingFunctions.clearInterval;
-        }
-
-        function legacyIE() {
-            //if these methods are polyfilled, apply will be present
-            return !(realTimingFunctions.setTimeout || realTimingFunctions.setInterval).apply;
-        }
-
-        function replace(dest, source) {
-            for (const prop in source) {
-                dest[prop] = source[prop];
-            }
-        }
-
-        function setTimeout(fn, delay) {
-            return delayedFunctionScheduler.scheduleFunction(fn, delay, argSlice(arguments, 2));
-        }
-
-        function clearTimeout(id) {
-            return delayedFunctionScheduler.removeFunctionWithId(id);
-        }
-
-        function setInterval(fn, interval) {
-            return delayedFunctionScheduler.scheduleFunction(fn, interval, argSlice(arguments, 2), true);
-        }
-
-        function clearInterval(id) {
-            return delayedFunctionScheduler.removeFunctionWithId(id);
-        }
-
-        function argSlice(argsObj, n) {
-            return Array.prototype.slice.call(argsObj, n);
-        }
-    }
-
-    return Clock;
-}();
-
-j$.DelayedFunctionScheduler = function() {
-    function DelayedFunctionScheduler() {
-        const self = this;
-        const scheduledLookup = [];
-        const scheduledFunctions = {};
-        let currentTime = 0;
-        let delayedFnCount = 0;
-
-        self.tick = function(millis) {
-            millis = millis || 0;
-            const endTime = currentTime + millis;
-
-            runScheduledFunctions(endTime);
-            currentTime = endTime;
-        };
-
-        self.scheduleFunction = function(funcToCall, millis, params, recurring, timeoutKey, runAtMillis) {
-            let f;
-            if (typeof(funcToCall) === 'string') {
-                /* jshint evil: true */
-                f = function() { return eval(funcToCall); };
-                /* jshint evil: false */
-            } else {
-                f = funcToCall;
-            }
-
-            millis = millis || 0;
-            timeoutKey = timeoutKey || ++delayedFnCount;
-            runAtMillis = runAtMillis || (currentTime + millis);
-
-            const funcToSchedule = {
-        runAtMillis: runAtMillis,
-        funcToCall: f,
-        recurring: recurring,
-        params: params,
-        timeoutKey: timeoutKey,
-        millis: millis,
-            };
-
-            if (runAtMillis in scheduledFunctions) {
-                scheduledFunctions[runAtMillis].push(funcToSchedule);
-            } else {
-                scheduledFunctions[runAtMillis] = [funcToSchedule];
-                scheduledLookup.push(runAtMillis);
-                scheduledLookup.sort(function(a, b) {
-                    return a - b;
-                });
-            }
-
-            return timeoutKey;
-        };
-
-        self.removeFunctionWithId = function(timeoutKey) {
-            for (const runAtMillis in scheduledFunctions) {
-                const funcs = scheduledFunctions[runAtMillis];
-                const i = indexOfFirstToPass(funcs, function(func) {
-                    return func.timeoutKey === timeoutKey;
-                });
-
-                if (i > -1) {
-                    if (funcs.length === 1) {
-                        delete scheduledFunctions[runAtMillis];
-                        deleteFromLookup(runAtMillis);
-                    } else {
-                        funcs.splice(i, 1);
-                    }
-
-                    // intervals get rescheduled when executed, so there's never more
-                    // than a single scheduled function with a given timeoutKey
-                    break;
-                }
-            }
-        };
-
-        return self;
-
-        function indexOfFirstToPass(array, testFn) {
-            let index = -1;
-
-            for (let i = 0; i < array.length; ++i) {
-                if (testFn(array[i])) {
-                    index = i;
-                    break;
-                }
-            }
-
-            return index;
-        }
-
-        function deleteFromLookup(key) {
-            const value = Number(key);
-            const i = indexOfFirstToPass(scheduledLookup, function(millis) {
-                return millis === value;
-            });
-
-            if (i > -1) {
-                scheduledLookup.splice(i, 1);
-            }
-        }
-
-        function reschedule(scheduledFn) {
-            self.scheduleFunction(scheduledFn.funcToCall,
-                scheduledFn.millis,
-                scheduledFn.params,
-                true,
-                scheduledFn.timeoutKey,
-                scheduledFn.runAtMillis + scheduledFn.millis);
-        }
-
-        function forEachFunction(funcsToRun, callback) {
-            for (let i = 0; i < funcsToRun.length; ++i) {
-                callback(funcsToRun[i]);
-            }
-        }
-
-        function runScheduledFunctions(endTime) {
-            if (scheduledLookup.length === 0 || scheduledLookup[0] > endTime) {
-                return;
-            }
-
-            do {
-                currentTime = scheduledLookup.shift();
-
-                const funcsToRun = scheduledFunctions[currentTime];
-                delete scheduledFunctions[currentTime];
-
-                forEachFunction(funcsToRun, function(funcToRun) {
-                    if (funcToRun.recurring) {
-                        reschedule(funcToRun);
-                    }
-                });
-
-                forEachFunction(funcsToRun, function(funcToRun) {
-                    funcToRun.funcToCall.apply(null, funcToRun.params || []);
-                });
-            } while (scheduledLookup.length > 0 &&
-            // checking first if we're out of time prevents setTimeout(0)
-            // scheduled in a funcToRun from forcing an extra iteration
-                 currentTime !== endTime &&
-                 scheduledLookup[0] <= endTime);
-        }
-    }
-
-    return DelayedFunctionScheduler;
-}();
-
-j$.MockDate = function() {
-    function MockDate(global) {
-        const self = this;
-        let currentTime = 0;
-
-        if (!global || !global.Date) {
-            self.install = function() {};
-            self.tick = function() {};
-            self.uninstall = function() {};
-            return self;
-        }
-
-        const GlobalDate = global.Date;
-
-        self.install = function(mockDate) {
-            if (mockDate instanceof GlobalDate) {
-                currentTime = mockDate.getTime();
-            } else {
-                currentTime = new GlobalDate().getTime();
-            }
-
-            global.Date = FakeDate;
-        };
-
-        self.tick = function(millis) {
-            millis = millis || 0;
-            currentTime = currentTime + millis;
-        };
-
-        self.uninstall = function() {
-            currentTime = 0;
-            global.Date = GlobalDate;
-        };
-
-        createDateProperties();
-
-        return self;
-
-        function FakeDate() {
-            switch (arguments.length) {
-                case 0:
-                    return new GlobalDate(currentTime);
-                case 1:
-                    return new GlobalDate(arguments[0]);
-                case 2:
-                    return new GlobalDate(arguments[0], arguments[1]);
-                case 3:
-                    return new GlobalDate(arguments[0], arguments[1], arguments[2]);
-                case 4:
-                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3]);
-                case 5:
-                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                        arguments[4]);
-                case 6:
-                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                        arguments[4], arguments[5]);
-                default:
-                    return new GlobalDate(arguments[0], arguments[1], arguments[2], arguments[3],
-                        arguments[4], arguments[5], arguments[6]);
-            }
-        }
-
-        function createDateProperties() {
-            FakeDate.prototype = GlobalDate.prototype;
-
-            FakeDate.now = function() {
-                if (GlobalDate.now) {
-                    return currentTime;
-                } else {
-                    throw new Error('Browser does not support Date.now()');
-                }
-            };
-
-            FakeDate.toSource = GlobalDate.toSource;
-            FakeDate.toString = GlobalDate.toString;
-            FakeDate.parse = GlobalDate.parse;
-            FakeDate.UTC = GlobalDate.UTC;
-        }
-    }
-
-    return MockDate;
-}();
-
-const _clock = new j$.Clock(global, function() { return new j$.DelayedFunctionScheduler(); }, new j$.MockDate(global));
-
-export function clock() {
-    return _clock;
-}
-

From fda17b4959b90de2db2884b126bcb7fc14dd4007 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 1 Jul 2021 23:02:51 +0100
Subject: [PATCH 356/358] Add types to the implementations too

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/Markdown.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Markdown.ts b/src/Markdown.ts
index bb6d6d8df0..96169d4011 100644
--- a/src/Markdown.ts
+++ b/src/Markdown.ts
@@ -123,7 +123,7 @@ export default class Markdown {
 
         const realParagraph = renderer.paragraph;
 
-        renderer.paragraph = function(node, entering) {
+        renderer.paragraph = function(node: commonmark.Node, entering: boolean) {
             // If there is only one top level node, just return the
             // bare text: it's a single line of text and so should be
             // 'inline', rather than unnecessarily wrapped in its own
@@ -153,7 +153,7 @@ export default class Markdown {
             }
         };
 
-        renderer.html_inline = function(node: any) {
+        renderer.html_inline = function(node: commonmark.Node) {
             if (isAllowedHtmlTag(node)) {
                 this.lit(node.literal);
                 return;
@@ -162,7 +162,7 @@ export default class Markdown {
             }
         };
 
-        renderer.html_block = function(node) {
+        renderer.html_block = function(node: commonmark.Node) {
             /*
             // as with `paragraph`, we only insert line breaks
             // if there are multiple lines in the markdown.
@@ -190,7 +190,7 @@ export default class Markdown {
     toPlaintext(): string {
         const renderer = new commonmark.HtmlRenderer({ safe: false }) as CommonmarkHtmlRendererInternal;
 
-        renderer.paragraph = function(node, entering) {
+        renderer.paragraph = function(node: commonmark.Node, entering: boolean) {
             // as with toHTML, only append lines to paragraphs if there are
             // multiple paragraphs
             if (isMultiLine(node)) {
@@ -200,7 +200,7 @@ export default class Markdown {
             }
         };
 
-        renderer.html_block = function(node) {
+        renderer.html_block = function(node: commonmark.Node) {
             this.lit(node.literal);
             if (isMultiLine(node) && node.next) this.lit('\n\n');
         };

From 80f52322176d988f38cc5f9319e2ce4aaf9eed4c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 23:23:03 +0100
Subject: [PATCH 357/358] Comply with new member-delimiter-style rule

Just `eslint --fix` with rule from
https://github.com/matrix-org/eslint-plugin-matrix-org/pull/9 in place
---
 src/CallHandler.tsx                           |  6 ++--
 src/CountlyAnalytics.ts                       |  2 +-
 src/SecurityManager.ts                        |  4 +--
 src/Terms.ts                                  | 10 +++---
 .../structures/AutoHideScrollbar.tsx          |  4 +--
 src/components/structures/FilePanel.tsx       |  2 +-
 src/components/structures/LoggedInView.tsx    |  4 +--
 src/components/structures/MatrixChat.tsx      |  2 +-
 .../structures/NonUrgentToastContainer.tsx    |  2 +-
 src/components/structures/RoomView.tsx        |  2 +-
 .../structures/SpaceRoomDirectory.tsx         |  2 +-
 src/components/structures/TimelinePanel.tsx   |  2 +-
 .../structures/auth/Registration.tsx          |  2 +-
 src/components/structures/auth/SoftLogout.tsx |  2 +-
 src/components/views/auth/PasswordLogin.tsx   |  4 +--
 .../views/dialogs/ConfirmUserActionDialog.tsx |  2 +-
 src/components/views/dialogs/InviteDialog.tsx | 18 +++++-----
 src/components/views/dialogs/TermsDialog.tsx  |  6 ++--
 .../views/elements/EventListSummary.tsx       |  2 +-
 src/components/views/elements/ImageView.tsx   | 34 +++++++++----------
 .../elements/SpellCheckLanguagesDropdown.tsx  | 10 +++---
 src/components/views/emojipicker/Header.tsx   |  2 +-
 .../messages/MKeyVerificationRequest.tsx      |  2 +-
 src/components/views/messages/TextualBody.tsx |  2 +-
 src/components/views/rooms/AuxPanel.tsx       | 26 +++++++-------
 src/components/views/rooms/EventTile.tsx      |  4 +--
 .../views/rooms/RoomListNumResults.tsx        |  2 +-
 .../views/settings/SpellCheckSettings.tsx     | 10 +++---
 .../views/spaces/SpaceBasicSettings.tsx       |  2 +-
 src/components/views/voip/AudioFeed.tsx       |  2 +-
 src/components/views/voip/CallView.tsx        | 22 ++++++------
 src/components/views/voip/CallViewForRoom.tsx |  6 ++--
 src/components/views/voip/VideoFeed.tsx       |  6 ++--
 src/customisations/Security.ts                | 12 +++----
 .../payloads/ComposerInsertPayload.ts         |  2 +-
 src/effects/confetti/index.ts                 | 26 +++++++-------
 src/performance/index.ts                      |  8 ++---
 src/stores/TypingStore.ts                     |  8 ++---
 src/stores/WidgetEchoStore.ts                 |  4 +--
 src/utils/objects.ts                          |  2 +-
 test/KeyBindingsManager-test.ts               |  8 ++---
 41 files changed, 139 insertions(+), 139 deletions(-)

diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx
index cb54db3f8a..6e1e6ce83a 100644
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@@ -124,9 +124,9 @@ interface ThirdpartyLookupResponseFields {
 }
 
 interface ThirdpartyLookupResponse {
-    userid: string,
-    protocol: string,
-    fields: ThirdpartyLookupResponseFields,
+    userid: string;
+    protocol: string;
+    fields: ThirdpartyLookupResponseFields;
 }
 
 // Unlike 'CallType' in js-sdk, this one includes screen sharing
diff --git a/src/CountlyAnalytics.ts b/src/CountlyAnalytics.ts
index 3ad56fe3bf..d4a340ddaf 100644
--- a/src/CountlyAnalytics.ts
+++ b/src/CountlyAnalytics.ts
@@ -256,7 +256,7 @@ interface ICreateRoomEvent extends IEvent {
         num_users: number;
         is_encrypted: boolean;
         is_public: boolean;
-    }
+    };
 }
 
 interface IJoinRoomEvent extends IEvent {
diff --git a/src/SecurityManager.ts b/src/SecurityManager.ts
index 6b372bba28..214047c4fa 100644
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@@ -42,8 +42,8 @@ let secretStorageBeingAccessed = false;
 let nonInteractive = false;
 
 let dehydrationCache: {
-    key?: Uint8Array,
-    keyInfo?: ISecretStorageKeyInfo,
+    key?: Uint8Array;
+    keyInfo?: ISecretStorageKeyInfo;
 } = {};
 
 function isCachingAllowed(): boolean {
diff --git a/src/Terms.ts b/src/Terms.ts
index 3859cc1c73..0189810e7c 100644
--- a/src/Terms.ts
+++ b/src/Terms.ts
@@ -48,13 +48,13 @@ export interface Policy {
 }
 
 export type Policies = {
-    [policy: string]: Policy,
+    [policy: string]: Policy;
 };
 
 export type TermsInteractionCallback = (
     policiesAndServicePairs: {
-        service: Service,
-        policies: Policies,
+        service: Service;
+        policies: Policies;
     }[],
     agreedUrls: string[],
     extraClassNames?: string,
@@ -180,8 +180,8 @@ export async function startTermsFlow(
 
 export function dialogTermsInteractionCallback(
     policiesAndServicePairs: {
-        service: Service,
-        policies: { [policy: string]: Policy },
+        service: Service;
+        policies: { [policy: string]: Policy };
     }[],
     agreedUrls: string[],
     extraClassNames?: string,
diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx
index e8a9872b48..184d883dda 100644
--- a/src/components/structures/AutoHideScrollbar.tsx
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -21,8 +21,8 @@ interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll"> {
     className?: string;
     onScroll?: (event: Event) => void;
     onWheel?: (event: WheelEvent) => void;
-    style?: React.CSSProperties
-    tabIndex?: number,
+    style?: React.CSSProperties;
+    tabIndex?: number;
     wrappedRef?: (ref: HTMLDivElement) => void;
 }
 
diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
index 21ef0c4f31..22a0e1283c 100644
--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@@ -37,7 +37,7 @@ import ResizeNotifier from '../../utils/ResizeNotifier';
 interface IProps {
     roomId: string;
     onClose: () => void;
-    resizeNotifier: ResizeNotifier
+    resizeNotifier: ResizeNotifier;
 }
 
 interface IState {
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 65b26cb505..1f870da900 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -87,8 +87,8 @@ interface IProps {
     config: {
         piwik: {
             policyUrl: string;
-        },
-        [key: string]: any,
+        };
+        [key: string]: any;
     };
     currentUserId?: string;
     currentGroupId?: string;
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index c1e0b8d7cb..a63767108f 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -203,7 +203,7 @@ interface IState {
     resizeNotifier: ResizeNotifier;
     serverConfig?: ValidatedServerConfig;
     ready: boolean;
-    threepidInvite?: IThreepidInvite,
+    threepidInvite?: IThreepidInvite;
     roomOobData?: object;
     pendingInitialSync?: boolean;
     justRegistered?: boolean;
diff --git a/src/components/structures/NonUrgentToastContainer.tsx b/src/components/structures/NonUrgentToastContainer.tsx
index b1424a2974..a2d419b4ba 100644
--- a/src/components/structures/NonUrgentToastContainer.tsx
+++ b/src/components/structures/NonUrgentToastContainer.tsx
@@ -24,7 +24,7 @@ interface IProps {
 }
 
 interface IState {
-    toasts: ComponentClass[],
+    toasts: ComponentClass[];
 }
 
 @replaceableComponent("structures.NonUrgentToastContainer")
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 6428b7cdc2..2c8fc08dac 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -94,7 +94,7 @@ if (DEBUG) {
 }
 
 interface IProps {
-    threepidInvite: IThreepidInvite,
+    threepidInvite: IThreepidInvite;
     oobData?: IOOBData;
 
     resizeNotifier: ResizeNotifier;
diff --git a/src/components/structures/SpaceRoomDirectory.tsx b/src/components/structures/SpaceRoomDirectory.tsx
index e5c4372ab6..2ee0327420 100644
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@@ -58,7 +58,7 @@ export interface ISpaceSummaryRoom {
     avatar_url?: string;
     guest_can_join: boolean;
     name?: string;
-    num_joined_members: number
+    num_joined_members: number;
     room_id: string;
     topic?: string;
     world_readable: boolean;
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index e4c7d15596..8d5d733082 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -125,7 +125,7 @@ interface IProps {
     onReadMarkerUpdated?(): void;
 
     // callback which is called when we wish to paginate the timeline window.
-    onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise<boolean>,
+    onPaginationRequest?(timelineWindow: TimelineWindow, direction: string, size: number): Promise<boolean>;
 }
 
 interface IState {
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index f27bed2cc3..57b758091a 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -49,7 +49,7 @@ interface IProps {
     //   for operations like uploading cross-signing keys).
     onLoggedIn(params: {
         userId: string;
-        deviceId: string
+        deviceId: string;
         homeserverUrl: string;
         identityServerUrl?: string;
         accessToken: string;
diff --git a/src/components/structures/auth/SoftLogout.tsx b/src/components/structures/auth/SoftLogout.tsx
index 7fb60a7b5d..3790028fea 100644
--- a/src/components/structures/auth/SoftLogout.tsx
+++ b/src/components/structures/auth/SoftLogout.tsx
@@ -49,7 +49,7 @@ interface IProps {
     fragmentAfterLogin?: string;
 
     // Called when the SSO login completes
-    onTokenLoginCompleted: () => void,
+    onTokenLoginCompleted: () => void;
 }
 
 interface IState {
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
index 12f55a112c..a77dd0b683 100644
--- a/src/components/views/auth/PasswordLogin.tsx
+++ b/src/components/views/auth/PasswordLogin.tsx
@@ -52,8 +52,8 @@ interface IProps {
 
 interface IState {
     fieldValid: Partial<Record<LoginField, boolean>>;
-    loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone,
-    password: "",
+    loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
+    password: "";
 }
 
 enum LoginField {
diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.tsx b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
index 5cdb4c664b..78fae390b5 100644
--- a/src/components/views/dialogs/ConfirmUserActionDialog.tsx
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.tsx
@@ -29,7 +29,7 @@ interface IProps {
     // group member object. Supply either this or 'member'
     groupMember: GroupMemberType;
     // needed if a group member is specified
-    matrixClient?: MatrixClient,
+    matrixClient?: MatrixClient;
     action: string; // eg. 'Ban'
     title: string; // eg. 'Ban this user?'
 
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index d9dcb8fe00..bbb5f24162 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -70,9 +70,9 @@ import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 /* eslint-disable camelcase */
 
 interface IRecentUser {
-    userId: string,
-    user: RoomMember,
-    lastActive: number,
+    userId: string;
+    user: RoomMember;
+    lastActive: number;
 }
 
 export const KIND_DM = "dm";
@@ -330,16 +330,16 @@ interface IInviteDialogProps {
 
     // The kind of invite being performed. Assumed to be KIND_DM if
     // not provided.
-    kind: string,
+    kind: string;
 
     // The room ID this dialog is for. Only required for KIND_INVITE.
-    roomId: string,
+    roomId: string;
 
     // The call to transfer. Only required for KIND_CALL_TRANSFER.
-    call: MatrixCall,
+    call: MatrixCall;
 
     // Initial value to populate the filter with
-    initialText: string,
+    initialText: string;
 }
 
 interface IInviteDialogState {
@@ -356,8 +356,8 @@ interface IInviteDialogState {
     consultFirst: boolean;
 
     // These two flags are used for the 'Go' button to communicate what is going on.
-    busy: boolean,
-    errorText: string,
+    busy: boolean;
+    errorText: string;
 }
 
 @replaceableComponent("views.dialogs.InviteDialog")
diff --git a/src/components/views/dialogs/TermsDialog.tsx b/src/components/views/dialogs/TermsDialog.tsx
index 818ac4b9e4..02a779743b 100644
--- a/src/components/views/dialogs/TermsDialog.tsx
+++ b/src/components/views/dialogs/TermsDialog.tsx
@@ -46,19 +46,19 @@ interface ITermsDialogProps {
      * Array of [Service, policies] pairs, where policies is the response from the
      * /terms endpoint for that service
      */
-    policiesAndServicePairs: any[],
+    policiesAndServicePairs: any[];
 
     /**
      * urls that the user has already agreed to
      */
-    agreedUrls?: string[],
+    agreedUrls?: string[];
 
     /**
      * Called with:
      *     * success {bool} True if the user accepted any douments, false if cancelled
      *     * agreedUrls {string[]} List of agreed URLs
      */
-    onFinished: (success: boolean, agreedUrls?: string[]) => void,
+    onFinished: (success: boolean, agreedUrls?: string[]) => void;
 }
 
 interface IState {
diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx
index ab647db9ed..681817ca86 100644
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@@ -29,7 +29,7 @@ interface IProps {
     // The minimum number of events needed to trigger summarisation
     threshold?: number;
     // Whether or not to begin with state.expanded=true
-    startExpanded?: boolean,
+    startExpanded?: boolean;
     // The list of room members for which to show avatars next to the summary
     summaryMembers?: RoomMember[];
     // The text to show as the summary of this event list
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 74538d2fa9..2628170f9c 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -44,31 +44,31 @@ const ZOOM_COEFFICIENT = 0.0025;
 const ZOOM_DISTANCE = 10;
 
 interface IProps {
-    src: string, // the source of the image being displayed
-    name?: string, // the main title ('name') for the image
-    link?: string, // the link (if any) applied to the name of the image
-    width?: number, // width of the image src in pixels
-    height?: number, // height of the image src in pixels
-    fileSize?: number, // size of the image src in bytes
-    onFinished(): void, // callback when the lightbox is dismissed
+    src: string; // the source of the image being displayed
+    name?: string; // the main title ('name') for the image
+    link?: string; // the link (if any) applied to the name of the image
+    width?: number; // width of the image src in pixels
+    height?: number; // height of the image src in pixels
+    fileSize?: number; // size of the image src in bytes
+    onFinished(): void; // callback when the lightbox is dismissed
 
     // the event (if any) that the Image is displaying. Used for event-specific stuff like
     // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
     // properties above, which let us use lightboxes to display images which aren't associated
     // with events.
-    mxEvent: MatrixEvent,
-    permalinkCreator: RoomPermalinkCreator,
+    mxEvent: MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
 }
 
 interface IState {
-    zoom: number,
-    minZoom: number,
-    maxZoom: number,
-    rotation: number,
-    translationX: number,
-    translationY: number,
-    moving: boolean,
-    contextMenuDisplayed: boolean,
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+    rotation: number;
+    translationX: number;
+    translationY: number;
+    moving: boolean;
+    contextMenuDisplayed: boolean;
 }
 
 @replaceableComponent("views.elements.ImageView")
diff --git a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
index d10a599d95..1678bdb33a 100644
--- a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
+++ b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
@@ -30,14 +30,14 @@ function languageMatchesSearchQuery(query, language) {
 }
 
 interface SpellCheckLanguagesDropdownIProps {
-    className: string,
-    value: string,
-    onOptionChange(language: string),
+    className: string;
+    value: string;
+    onOptionChange(language: string);
 }
 
 interface SpellCheckLanguagesDropdownIState {
-    searchQuery: string,
-    languages: any,
+    searchQuery: string;
+    languages: any;
 }
 
 @replaceableComponent("views.elements.SpellCheckLanguagesDropdown")
diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx
index 010801141a..ac39affdd9 100644
--- a/src/components/views/emojipicker/Header.tsx
+++ b/src/components/views/emojipicker/Header.tsx
@@ -25,7 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     categories: ICategory[];
-    onAnchorClick(id: CategoryKey): void
+    onAnchorClick(id: CategoryKey): void;
 }
 
 @replaceableComponent("views.emojipicker.Header")
diff --git a/src/components/views/messages/MKeyVerificationRequest.tsx b/src/components/views/messages/MKeyVerificationRequest.tsx
index 8b8eb25f6b..fc550845e2 100644
--- a/src/components/views/messages/MKeyVerificationRequest.tsx
+++ b/src/components/views/messages/MKeyVerificationRequest.tsx
@@ -28,7 +28,7 @@ import EventTileBubble from "./EventTileBubble";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
-    mxEvent: MatrixEvent
+    mxEvent: MatrixEvent;
 }
 
 @replaceableComponent("views.messages.MKeyVerificationRequest")
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index f9e0f695ab..6ba018c512 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -67,7 +67,7 @@ interface IProps {
     replacingEventId?: string;
 
     /* callback for when our widget has loaded */
-    onHeightChanged(): void,
+    onHeightChanged(): void;
 }
 
 interface IState {
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 99286dfa07..f142328895 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -32,32 +32,32 @@ import { throttle } from 'lodash';
 
 interface IProps {
     // js-sdk room object
-    room: Room,
-    userId: string,
-    showApps: boolean, // Render apps
+    room: Room;
+    userId: string;
+    showApps: boolean; // Render apps
 
     // maxHeight attribute for the aux panel and the video
     // therein
-    maxHeight: number,
+    maxHeight: number;
 
     // a callback which is called when the content of the aux panel changes
     // content in a way that is likely to make it change size.
-    onResize: () => void,
-    fullHeight: boolean,
+    onResize: () => void;
+    fullHeight: boolean;
 
-    resizeNotifier: ResizeNotifier,
+    resizeNotifier: ResizeNotifier;
 }
 
 interface Counter {
-    title: string,
-    value: number,
-    link: string,
-    severity: string,
-    stateKey: string,
+    title: string;
+    value: number;
+    link: string;
+    severity: string;
+    stateKey: string;
 }
 
 interface IState {
-    counters: Counter[],
+    counters: Counter[];
 }
 
 @replaceableComponent("views.rooms.AuxPanel")
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index cebb631708..c9d1040433 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -287,10 +287,10 @@ interface IProps {
     permalinkCreator?: RoomPermalinkCreator;
 
     // Symbol of the root node
-    as?: string
+    as?: string;
 
     // whether or not to always show timestamps
-    alwaysShowTimestamps?: boolean
+    alwaysShowTimestamps?: boolean;
 }
 
 interface IState {
diff --git a/src/components/views/rooms/RoomListNumResults.tsx b/src/components/views/rooms/RoomListNumResults.tsx
index a05db89f61..95c8c6590f 100644
--- a/src/components/views/rooms/RoomListNumResults.tsx
+++ b/src/components/views/rooms/RoomListNumResults.tsx
@@ -22,7 +22,7 @@ import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/SpaceStore";
 
 interface IProps {
-    onVisibilityChange?: () => void
+    onVisibilityChange?: () => void;
 }
 
 const RoomListNumResults: React.FC<IProps> = ({ onVisibilityChange }) => {
diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
index 0876f07142..1858412dac 100644
--- a/src/components/views/settings/SpellCheckSettings.tsx
+++ b/src/components/views/settings/SpellCheckSettings.tsx
@@ -21,17 +21,17 @@ import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface ExistingSpellCheckLanguageIProps {
-    language: string,
-    onRemoved(language: string),
+    language: string;
+    onRemoved(language: string);
 }
 
 interface SpellCheckLanguagesIProps {
-    languages: Array<string>,
-    onLanguagesChange(languages: Array<string>),
+    languages: Array<string>;
+    onLanguagesChange(languages: Array<string>);
 }
 
 interface SpellCheckLanguagesIState {
-    newLanguage: string,
+    newLanguage: string;
 }
 
 export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellCheckLanguageIProps> {
diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx
index f6b98eedec..6d2cc1f5db 100644
--- a/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/src/components/views/spaces/SpaceBasicSettings.tsx
@@ -23,7 +23,7 @@ import Field from "../elements/Field";
 interface IProps {
     avatarUrl?: string;
     avatarDisabled?: boolean;
-    name?: string,
+    name?: string;
     nameDisabled?: boolean;
     topic?: string;
     topicDisabled?: boolean;
diff --git a/src/components/views/voip/AudioFeed.tsx b/src/components/views/voip/AudioFeed.tsx
index 272d8a06a3..a2ab760c86 100644
--- a/src/components/views/voip/AudioFeed.tsx
+++ b/src/components/views/voip/AudioFeed.tsx
@@ -20,7 +20,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import MediaDeviceHandler, { MediaDeviceHandlerEvent } from "../../../MediaDeviceHandler";
 
 interface IProps {
-    feed: CallFeed,
+    feed: CallFeed;
 }
 
 export default class AudioFeed extends React.Component<IProps> {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index c522116e0a..dd0e8cb138 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -35,10 +35,10 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
         // The call for us to display
-        call: MatrixCall,
+        call: MatrixCall;
 
         // Another ongoing call to display information about
-        secondaryCall?: MatrixCall,
+        secondaryCall?: MatrixCall;
 
         // a callback which is called when the content in the CallView changes
         // in a way that is likely to cause a resize.
@@ -52,15 +52,15 @@ interface IProps {
 }
 
 interface IState {
-    isLocalOnHold: boolean,
-    isRemoteOnHold: boolean,
-    micMuted: boolean,
-    vidMuted: boolean,
-    callState: CallState,
-    controlsVisible: boolean,
-    showMoreMenu: boolean,
-    showDialpad: boolean,
-    feeds: CallFeed[],
+    isLocalOnHold: boolean;
+    isRemoteOnHold: boolean;
+    micMuted: boolean;
+    vidMuted: boolean;
+    callState: CallState;
+    controlsVisible: boolean;
+    showMoreMenu: boolean;
+    showDialpad: boolean;
+    feeds: CallFeed[];
 }
 
 function getFullScreenElement() {
diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx
index 9557fe0e7e..a5aa3e7734 100644
--- a/src/components/views/voip/CallViewForRoom.tsx
+++ b/src/components/views/voip/CallViewForRoom.tsx
@@ -25,16 +25,16 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // What room we should display the call for
-    roomId: string,
+    roomId: string;
 
     // maxHeight style attribute for the video panel
     maxVideoHeight?: number;
 
-    resizeNotifier: ResizeNotifier,
+    resizeNotifier: ResizeNotifier;
 }
 
 interface IState {
-    call: MatrixCall,
+    call: MatrixCall;
 }
 
 /*
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 2f88abe6fb..e5461eb1b4 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -24,9 +24,9 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
-    call: MatrixCall,
+    call: MatrixCall;
 
-    feed: CallFeed,
+    feed: CallFeed;
 
     // Whether this call view is for picture-in-picture mode
     // otherwise, it's the larger call view when viewing the room the call is in.
@@ -36,7 +36,7 @@ interface IProps {
 
     // a callback which is called when the video element is resized
     // due to a change in video metadata
-    onResize?: (e: Event) => void,
+    onResize?: (e: Event) => void;
 }
 
 interface IState {
diff --git a/src/customisations/Security.ts b/src/customisations/Security.ts
index e215c5cb24..c2262e5f71 100644
--- a/src/customisations/Security.ts
+++ b/src/customisations/Security.ts
@@ -69,11 +69,11 @@ function setupEncryptionNeeded(kind: SetupEncryptionKind): boolean {
 export interface ISecurityCustomisations {
     examineLoginResponse?: typeof examineLoginResponse;
     persistCredentials?: typeof persistCredentials;
-    createSecretStorageKey?: typeof createSecretStorageKey,
-    getSecretStorageKey?: typeof getSecretStorageKey,
-    catchAccessSecretStorageError?: typeof catchAccessSecretStorageError,
-    setupEncryptionNeeded?: typeof setupEncryptionNeeded,
-    getDehydrationKey?: typeof getDehydrationKey,
+    createSecretStorageKey?: typeof createSecretStorageKey;
+    getSecretStorageKey?: typeof getSecretStorageKey;
+    catchAccessSecretStorageError?: typeof catchAccessSecretStorageError;
+    setupEncryptionNeeded?: typeof setupEncryptionNeeded;
+    getDehydrationKey?: typeof getDehydrationKey;
 
     /**
      * When false, disables the post-login UI from showing. If there's
@@ -83,7 +83,7 @@ export interface ISecurityCustomisations {
      * encryption is set up some other way which would circumvent the default
      * UI, such as by presenting alternative UI.
      */
-    SHOW_ENCRYPTION_SETUP_UI?: boolean, // default true
+    SHOW_ENCRYPTION_SETUP_UI?: boolean; // default true
 }
 
 // A real customisation module will define and export one or more of the
diff --git a/src/dispatcher/payloads/ComposerInsertPayload.ts b/src/dispatcher/payloads/ComposerInsertPayload.ts
index 9702855432..ea5d8a0c53 100644
--- a/src/dispatcher/payloads/ComposerInsertPayload.ts
+++ b/src/dispatcher/payloads/ComposerInsertPayload.ts
@@ -20,7 +20,7 @@ import { ActionPayload } from "../payloads";
 import { Action } from "../actions";
 
 interface IBaseComposerInsertPayload extends ActionPayload {
-    action: Action.ComposerInsert,
+    action: Action.ComposerInsert;
 }
 
 interface IComposerInsertMentionPayload extends IBaseComposerInsertPayload {
diff --git a/src/effects/confetti/index.ts b/src/effects/confetti/index.ts
index 53e5dda5d2..ae2bb822c2 100644
--- a/src/effects/confetti/index.ts
+++ b/src/effects/confetti/index.ts
@@ -20,34 +20,34 @@ export type ConfettiOptions = {
     /**
      * max confetti count
      */
-    maxCount: number,
+    maxCount: number;
     /**
      * particle animation speed
      */
-    speed: number,
+    speed: number;
     /**
      * the confetti animation frame interval in milliseconds
      */
-    frameInterval: number,
+    frameInterval: number;
     /**
      * the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
      */
-    alpha: number,
+    alpha: number;
     /**
      * use gradient instead of solid particle color
      */
-    gradient: boolean,
+    gradient: boolean;
 };
 
 type ConfettiParticle = {
-    color: string,
-    color2: string,
-    x: number,
-    y: number,
-    diameter: number,
-    tilt: number,
-    tiltAngleIncrement: number,
-    tiltAngle: number,
+    color: string;
+    color2: string;
+    x: number;
+    y: number;
+    diameter: number;
+    tilt: number;
+    tiltAngleIncrement: number;
+    tiltAngle: number;
 };
 
 export const DefaultOptions: ConfettiOptions = {
diff --git a/src/performance/index.ts b/src/performance/index.ts
index 1e24839370..cb808f9173 100644
--- a/src/performance/index.ts
+++ b/src/performance/index.ts
@@ -17,15 +17,15 @@ limitations under the License.
 import { PerformanceEntryNames } from "./entry-names";
 
 interface GetEntriesOptions {
-    name?: string,
-    type?: string,
+    name?: string;
+    type?: string;
 }
 
 type PerformanceCallbackFunction = (entry: PerformanceEntry[]) => void;
 
 interface PerformanceDataListener {
-    entryNames?: string[],
-    callback: PerformanceCallbackFunction
+    entryNames?: string[];
+    callback: PerformanceCallbackFunction;
 }
 
 export default class PerformanceMonitor {
diff --git a/src/stores/TypingStore.ts b/src/stores/TypingStore.ts
index 447f41c7ae..9781c93eb4 100644
--- a/src/stores/TypingStore.ts
+++ b/src/stores/TypingStore.ts
@@ -27,10 +27,10 @@ const TYPING_SERVER_TIMEOUT = 30000;
 export default class TypingStore {
     private typingStates: {
         [roomId: string]: {
-            isTyping: boolean,
-            userTimer: Timer,
-            serverTimer: Timer,
-        },
+            isTyping: boolean;
+            userTimer: Timer;
+            serverTimer: Timer;
+        };
     };
 
     constructor() {
diff --git a/src/stores/WidgetEchoStore.ts b/src/stores/WidgetEchoStore.ts
index 0b0be50541..d3ef9df023 100644
--- a/src/stores/WidgetEchoStore.ts
+++ b/src/stores/WidgetEchoStore.ts
@@ -26,8 +26,8 @@ import { WidgetType } from "../widgets/WidgetType";
 class WidgetEchoStore extends EventEmitter {
     private roomWidgetEcho: {
         [roomId: string]: {
-            [widgetId: string]: IWidget,
-        },
+            [widgetId: string]: IWidget;
+        };
     };
 
     constructor() {
diff --git a/src/utils/objects.ts b/src/utils/objects.ts
index 561e68e8c5..c2ee6ce100 100644
--- a/src/utils/objects.ts
+++ b/src/utils/objects.ts
@@ -152,7 +152,7 @@ export function objectClone<O extends {}>(obj: O): O {
 export function objectFromEntries<K, V>(entries: Iterable<[K, V]>): {[k: K]: V} {
     const obj: {
         // @ts-ignore - same as return type
-        [k: K]: V} = {};
+        [k: K]: V;} = {};
     for (const e of entries) {
         // @ts-ignore - same as return type
         obj[e[0]] = e[1];
diff --git a/test/KeyBindingsManager-test.ts b/test/KeyBindingsManager-test.ts
index 694efac7b5..eab1bea2b0 100644
--- a/test/KeyBindingsManager-test.ts
+++ b/test/KeyBindingsManager-test.ts
@@ -17,10 +17,10 @@ limitations under the License.
 import { isKeyComboMatch, KeyCombo } from '../src/KeyBindingsManager';
 
 function mockKeyEvent(key: string, modifiers?: {
-    ctrlKey?: boolean,
-    altKey?: boolean,
-    shiftKey?: boolean,
-    metaKey?: boolean
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    shiftKey?: boolean;
+    metaKey?: boolean;
 }): KeyboardEvent {
     return {
         key,

From 1fe0c2ab881f579453c576b19ee017a8433837fb Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 1 Jul 2021 23:45:08 +0100
Subject: [PATCH 358/358] Bump eslint plugin version

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index fcb9a46b37..c8c3315855 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3232,7 +3232,7 @@ eslint-config-google@^0.14.0:
 
 "eslint-plugin-matrix-org@github:matrix-org/eslint-plugin-matrix-org#main":
   version "0.3.2"
-  resolved "https://codeload.github.com/matrix-org/eslint-plugin-matrix-org/tar.gz/28d392822533a7468be0dd806d0a4ba573a45d74"
+  resolved "https://codeload.github.com/matrix-org/eslint-plugin-matrix-org/tar.gz/e8197938dca66849ffdac4baca7c05275df12835"
 
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"