From 0ef8c808159ffb685bad8fb9fbbd9cb0eb65dd19 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 18 Oct 2022 13:39:59 +0100
Subject: [PATCH 001/113] Fix usages of useContextMenu which never pass the ref
 to the element (#9449)

---
 src/components/views/messages/MessageActionBar.tsx    | 8 ++++----
 src/components/views/rooms/MessageComposerButtons.tsx | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index c5108051160..c1637b9a0cd 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -83,7 +83,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
     getRelationsForEvent,
 }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
+    const [onFocus, isActive] = useRovingTabIndex(button);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
@@ -123,7 +123,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
             onClick={onOptionsClick}
             onContextMenu={onOptionsClick}
             isExpanded={menuDisplayed}
-            inputRef={ref}
+            inputRef={button}
             onFocus={onFocus}
             tabIndex={isActive ? 0 : -1}
         >
@@ -141,7 +141,7 @@ interface IReactButtonProps {
 
 const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const [onFocus, isActive, ref] = useRovingTabIndex(button);
+    const [onFocus, isActive] = useRovingTabIndex(button);
     useEffect(() => {
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
@@ -173,7 +173,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
             onClick={onClick}
             onContextMenu={onClick}
             isExpanded={menuDisplayed}
-            inputRef={ref}
+            inputRef={button}
             onFocus={onFocus}
             tabIndex={isActive ? 0 : -1}
         >
diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx
index cc7ce70f444..b77bff66a8f 100644
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@@ -179,6 +179,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
             iconClassName="mx_MessageComposer_emoji"
             onClick={openMenu}
             title={_t("Emoji")}
+            inputRef={button}
         />
 
         { contextMenu }

From 67dbb360260bea1da55fe518e50a50424d816abc Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Tue, 18 Oct 2022 13:44:45 +0100
Subject: [PATCH 002/113] Listen for and update the notification state when
 they change (#9438)

* Listen for and update the notification state when they change

* Remove unnecessary listeners: justify each listener left remaining

* Update removeListener too
---
 .../notifications/RoomNotificationState.ts    | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts
index c4c803483df..9c64b7ec424 100644
--- a/src/stores/notifications/RoomNotificationState.ts
+++ b/src/stores/notifications/RoomNotificationState.ts
@@ -32,16 +32,15 @@ import { ThreadsRoomNotificationState } from "./ThreadsRoomNotificationState";
 export class RoomNotificationState extends NotificationState implements IDestroyable {
     constructor(public readonly room: Room, private readonly threadsState?: ThreadsRoomNotificationState) {
         super();
-        this.room.on(RoomEvent.Receipt, this.handleReadReceipt);
-        this.room.on(RoomEvent.Timeline, this.handleRoomEventUpdate);
-        this.room.on(RoomEvent.Redaction, this.handleRoomEventUpdate);
-        this.room.on(RoomEvent.MyMembership, this.handleMembershipUpdate);
-        this.room.on(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
+        this.room.on(RoomEvent.Receipt, this.handleReadReceipt); // for unread indicators
+        this.room.on(RoomEvent.MyMembership, this.handleMembershipUpdate); // for redness on invites
+        this.room.on(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated); // for redness on unsent messages
+        this.room.on(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate); // for server-sent counts
         if (threadsState) {
             threadsState.on(NotificationStateEvents.Update, this.handleThreadsUpdate);
         }
-        MatrixClientPeg.get().on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-        MatrixClientPeg.get().on(ClientEvent.AccountData, this.handleAccountDataUpdate);
+        MatrixClientPeg.get().on(MatrixEventEvent.Decrypted, this.onEventDecrypted); // for local count calculation
+        MatrixClientPeg.get().on(ClientEvent.AccountData, this.handleAccountDataUpdate); // for push rules
         this.updateNotificationState();
     }
 
@@ -52,10 +51,9 @@ export class RoomNotificationState extends NotificationState implements IDestroy
     public destroy(): void {
         super.destroy();
         this.room.removeListener(RoomEvent.Receipt, this.handleReadReceipt);
-        this.room.removeListener(RoomEvent.Timeline, this.handleRoomEventUpdate);
-        this.room.removeListener(RoomEvent.Redaction, this.handleRoomEventUpdate);
         this.room.removeListener(RoomEvent.MyMembership, this.handleMembershipUpdate);
         this.room.removeListener(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
+        this.room.removeListener(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate);
         if (this.threadsState) {
             this.threadsState.removeListener(NotificationStateEvents.Update, this.handleThreadsUpdate);
         }
@@ -83,14 +81,12 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.updateNotificationState();
     };
 
-    private onEventDecrypted = (event: MatrixEvent) => {
-        if (event.getRoomId() !== this.room.roomId) return; // ignore - not for us or notifications timeline
-
+    private handleNotificationCountUpdate = () => {
         this.updateNotificationState();
     };
 
-    private handleRoomEventUpdate = (event: MatrixEvent, room: Room | null) => {
-        if (room?.roomId !== this.room.roomId) return; // ignore - not for us or notifications timeline
+    private onEventDecrypted = (event: MatrixEvent) => {
+        if (event.getRoomId() !== this.room.roomId) return; // ignore - not for us or notifications timeline
 
         this.updateNotificationState();
     };

From b04991a9628f896e6f25ae178d3fc58b1a568c8d Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 18 Oct 2022 15:00:01 +0200
Subject: [PATCH 003/113] Device manager - put client/browser device metadata
 in correct section (#9447)

---
 .../views/settings/devices/DeviceDetails.tsx  |  2 +-
 src/i18n/strings/en_EN.json                   |  2 +-
 .../__snapshots__/DeviceDetails-test.tsx.snap | 24 +++++++++----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetails.tsx b/src/components/views/settings/devices/DeviceDetails.tsx
index 4330798dcab..3921ae899e0 100644
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -62,7 +62,6 @@ const DeviceDetails: React.FC<Props> = ({
             id: 'session',
             values: [
                 { label: _t('Session ID'), value: device.device_id },
-                { label: _t('Client'), value: device.client },
                 {
                     label: _t('Last activity'),
                     value: device.last_seen_ts && formatDate(new Date(device.last_seen_ts)),
@@ -84,6 +83,7 @@ const DeviceDetails: React.FC<Props> = ({
             values: [
                 { label: _t('Model'), value: device.deviceModel },
                 { label: _t('Operating system'), value: device.deviceOperatingSystem },
+                { label: _t('Browser'), value: device.client },
                 { label: _t('IP address'), value: device.last_seen_ip },
             ],
         },
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d24c763bec7..3f078172b3f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1742,7 +1742,6 @@
     "Rename session": "Rename session",
     "Please be aware that session names are also visible to people you communicate with": "Please be aware that session names are also visible to people you communicate with",
     "Session ID": "Session ID",
-    "Client": "Client",
     "Last activity": "Last activity",
     "Application": "Application",
     "Version": "Version",
@@ -1750,6 +1749,7 @@
     "Device": "Device",
     "Model": "Model",
     "Operating system": "Operating system",
+    "Browser": "Browser",
     "IP address": "IP address",
     "Session details": "Session details",
     "Toggle push notifications on this session.": "Toggle push notifications on this session.",
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index e681b652767..9f2f5386589 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -181,18 +181,6 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
               my-device
             </td>
           </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Client
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            >
-              Firefox 100
-            </td>
-          </tr>
           <tr>
             <td
               class="mxDeviceDetails_metadataLabel"
@@ -269,6 +257,18 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
               Windows 95
             </td>
           </tr>
+          <tr>
+            <td
+              class="mxDeviceDetails_metadataLabel"
+            >
+              Browser
+            </td>
+            <td
+              class="mxDeviceDetails_metadataValue"
+            >
+              Firefox 100
+            </td>
+          </tr>
           <tr>
             <td
               class="mxDeviceDetails_metadataLabel"

From 2cf8a9a2f79d39c55a69396b5ed7e03aeea7a090 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 18 Oct 2022 17:07:23 +0100
Subject: [PATCH 004/113] Stabilise Cypress login tests (#9446)

* Attempt to stabilise login tests

* More stability

* Stabilise s'more

* don't clear LS as we rely on it for enablements

* Add small delay

* Iterate

* Update login.ts
---
 cypress/e2e/create-room/create-room.spec.ts   |  4 +-
 cypress/e2e/editing/editing.spec.ts           |  2 +-
 cypress/e2e/login/consent.spec.ts             |  4 +-
 cypress/e2e/login/login.spec.ts               | 22 +++++------
 cypress/e2e/polls/polls.spec.ts               |  4 +-
 .../e2e/room-directory/room-directory.spec.ts |  2 +-
 cypress/e2e/sliding-sync/sliding-sync.ts      |  6 +--
 cypress/e2e/spaces/spaces.spec.ts             | 38 +++++++++----------
 cypress/e2e/threads/threads.spec.ts           | 22 ++++++-----
 cypress/e2e/timeline/timeline.spec.ts         |  2 +-
 cypress/e2e/toasts/analytics-toast.ts         |  2 +-
 cypress/support/login.ts                      |  2 +-
 cypress/support/settings.ts                   |  6 +--
 src/Lifecycle.ts                              |  2 +-
 14 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts
index 9bf38194d92..deac0728e35 100644
--- a/cypress/e2e/create-room/create-room.spec.ts
+++ b/cypress/e2e/create-room/create-room.spec.ts
@@ -60,7 +60,7 @@ describe("Create Room", () => {
 
         cy.url().should("contain", "/#/room/#test-room-1:localhost");
         cy.stopMeasuring("from-submit-to-room");
-        cy.get(".mx_RoomHeader_nametext").contains(name);
-        cy.get(".mx_RoomHeader_topic").contains(topic);
+        cy.contains(".mx_RoomHeader_nametext", name);
+        cy.contains(".mx_RoomHeader_topic", topic);
     });
 });
diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts
index 49e4ae79b34..f08466ab306 100644
--- a/cypress/e2e/editing/editing.spec.ts
+++ b/cypress/e2e/editing/editing.spec.ts
@@ -62,7 +62,7 @@ describe("Editing", () => {
             cy.get(".mx_BasicMessageComposer_input").type("Foo{backspace}{backspace}{backspace}{enter}");
             cy.checkA11y();
         });
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Message");
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Message");
 
         // Assert that the edit composer has gone away
         cy.get(".mx_EditMessageComposer").should("not.exist");
diff --git a/cypress/e2e/login/consent.spec.ts b/cypress/e2e/login/consent.spec.ts
index a4cd31bd26c..c6af9eab22c 100644
--- a/cypress/e2e/login/consent.spec.ts
+++ b/cypress/e2e/login/consent.spec.ts
@@ -46,7 +46,7 @@ describe("Consent", () => {
 
         // Accept terms & conditions
         cy.get(".mx_QuestionDialog").within(() => {
-            cy.get("#mx_BaseDialog_title").contains("Terms and Conditions");
+            cy.contains("#mx_BaseDialog_title", "Terms and Conditions");
             cy.get(".mx_Dialog_primary").click();
         });
 
@@ -58,7 +58,7 @@ describe("Consent", () => {
                 cy.visit(url);
 
                 cy.get('[type="submit"]').click();
-                cy.get("p").contains("Danke schon");
+                cy.contains("p", "Danke schon");
             });
         });
 
diff --git a/cypress/e2e/login/login.spec.ts b/cypress/e2e/login/login.spec.ts
index 2ba2e33f9bd..ff963dfbfe7 100644
--- a/cypress/e2e/login/login.spec.ts
+++ b/cypress/e2e/login/login.spec.ts
@@ -21,13 +21,6 @@ import { SynapseInstance } from "../../plugins/synapsedocker";
 describe("Login", () => {
     let synapse: SynapseInstance;
 
-    beforeEach(() => {
-        cy.visit("/#/login");
-        cy.startSynapse("consent").then(data => {
-            synapse = data;
-        });
-    });
-
     afterEach(() => {
         cy.stopSynapse(synapse);
     });
@@ -37,7 +30,11 @@ describe("Login", () => {
         const password = "p4s5W0rD";
 
         beforeEach(() => {
-            cy.registerUser(synapse, username, password);
+            cy.startSynapse("consent").then(data => {
+                synapse = data;
+                cy.registerUser(synapse, username, password);
+                cy.visit("/#/login");
+            });
         });
 
         it("logs in with an existing account and lands on the home screen", () => {
@@ -65,14 +62,17 @@ describe("Login", () => {
 
     describe("logout", () => {
         beforeEach(() => {
-            cy.initTestUser(synapse, "Erin");
+            cy.startSynapse("consent").then(data => {
+                synapse = data;
+                cy.initTestUser(synapse, "Erin");
+            });
         });
 
         it("should go to login page on logout", () => {
             cy.get('[aria-label="User menu"]').click();
 
             // give a change for the outstanding requests queue to settle before logging out
-            cy.wait(500);
+            cy.wait(2000);
 
             cy.get(".mx_UserMenu_contextMenu").within(() => {
                 cy.get(".mx_UserMenu_iconSignOut").click();
@@ -94,7 +94,7 @@ describe("Login", () => {
             cy.get('[aria-label="User menu"]').click();
 
             // give a change for the outstanding requests queue to settle before logging out
-            cy.wait(500);
+            cy.wait(2000);
 
             cy.get(".mx_UserMenu_contextMenu").within(() => {
                 cy.get(".mx_UserMenu_iconSignOut").click();
diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts
index 470c69d8cf3..50d2befb0f6 100644
--- a/cypress/e2e/polls/polls.spec.ts
+++ b/cypress/e2e/polls/polls.spec.ts
@@ -122,7 +122,7 @@ describe("Polls", () => {
         createPoll(pollParams);
 
         // Wait for message to send, get its ID and save as @pollId
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", pollParams.title)
             .invoke("attr", "data-scroll-tokens").as("pollId");
 
         cy.get<string>("@pollId").then(pollId => {
@@ -190,7 +190,7 @@ describe("Polls", () => {
         createPoll(pollParams);
 
         // Wait for message to send, get its ID and save as @pollId
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", pollParams.title)
             .invoke("attr", "data-scroll-tokens").as("pollId");
 
         cy.get<string>("@pollId").then(pollId => {
diff --git a/cypress/e2e/room-directory/room-directory.spec.ts b/cypress/e2e/room-directory/room-directory.spec.ts
index 18464e20712..f179b0988c2 100644
--- a/cypress/e2e/room-directory/room-directory.spec.ts
+++ b/cypress/e2e/room-directory/room-directory.spec.ts
@@ -93,7 +93,7 @@ describe("Room Directory", () => {
         cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered no results");
 
         cy.get('.mx_RoomDirectory_dialogWrapper [name="dirsearch"]').type("{selectAll}{backspace}test1234");
-        cy.get(".mx_RoomDirectory_dialogWrapper").contains(".mx_RoomDirectory_listItem", name)
+        cy.contains(".mx_RoomDirectory_dialogWrapper .mx_RoomDirectory_listItem", name)
             .should("exist").as("resultRow");
         cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered one result");
         cy.get("@resultRow").find(".mx_AccessibleButton").contains("Join").click();
diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts
index cfd4fd41854..e0e7c974a77 100644
--- a/cypress/e2e/sliding-sync/sliding-sync.ts
+++ b/cypress/e2e/sliding-sync/sliding-sync.ts
@@ -293,7 +293,7 @@ describe("Sliding Sync", () => {
         ]);
 
         cy.contains(".mx_RoomTile", "Reject").click();
-        cy.get(".mx_RoomView").contains(".mx_AccessibleButton", "Reject").click();
+        cy.contains(".mx_RoomView .mx_AccessibleButton", "Reject").click();
 
         // wait for the rejected room to disappear
         cy.get(".mx_RoomTile").should('have.length', 3);
@@ -328,8 +328,8 @@ describe("Sliding Sync", () => {
             cy.getClient().then(cli => cli.setRoomTag(roomId, "m.favourite", { order: 0.5 }));
         });
 
-        cy.get('.mx_RoomSublist[aria-label="Favourites"]').contains(".mx_RoomTile", "Favourite DM").should("exist");
-        cy.get('.mx_RoomSublist[aria-label="People"]').contains(".mx_RoomTile", "Favourite DM").should("not.exist");
+        cy.contains('.mx_RoomSublist[aria-label="Favourites"] .mx_RoomTile', "Favourite DM").should("exist");
+        cy.contains('.mx_RoomSublist[aria-label="People"] .mx_RoomTile', "Favourite DM").should("not.exist");
     });
 
     // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too.
diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index e7767de9421..893f48239b4 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -83,26 +83,26 @@ describe("Spaces", () => {
             cy.get('input[label="Name"]').type("Let's have a Riot");
             cy.get('input[label="Address"]').should("have.value", "lets-have-a-riot");
             cy.get('textarea[label="Description"]').type("This is a space to reminisce Riot.im!");
-            cy.get(".mx_AccessibleButton").contains("Create").click();
+            cy.contains(".mx_AccessibleButton", "Create").click();
         });
 
         // Create the default General & Random rooms, as well as a custom "Jokes" room
         cy.get('input[label="Room name"][value="General"]').should("exist");
         cy.get('input[label="Room name"][value="Random"]').should("exist");
         cy.get('input[placeholder="Support"]').type("Jokes");
-        cy.get(".mx_AccessibleButton").contains("Continue").click();
+        cy.contains(".mx_AccessibleButton", "Continue").click();
 
         // Copy matrix.to link
         cy.get(".mx_SpacePublicShare_shareButton").focus().realClick();
         cy.getClipboardText().should("eq", "https://matrix.to/#/#lets-have-a-riot:localhost");
 
         // Go to space home
-        cy.get(".mx_AccessibleButton").contains("Go to my first room").click();
+        cy.contains(".mx_AccessibleButton", "Go to my first room").click();
 
         // Assert rooms exist in the room list
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "General").should("exist");
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "Random").should("exist");
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "Jokes").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "General").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "Random").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "Jokes").should("exist");
     });
 
     it("should allow user to create private space", () => {
@@ -113,7 +113,7 @@ describe("Spaces", () => {
             cy.get('input[label="Name"]').type("This is not a Riot");
             cy.get('input[label="Address"]').should("not.exist");
             cy.get('textarea[label="Description"]').type("This is a private space of mourning Riot.im...");
-            cy.get(".mx_AccessibleButton").contains("Create").click();
+            cy.contains(".mx_AccessibleButton", "Create").click();
         });
 
         cy.get(".mx_SpaceRoomView_privateScope_meAndMyTeammatesButton").click();
@@ -122,20 +122,20 @@ describe("Spaces", () => {
         cy.get('input[label="Room name"][value="General"]').should("exist");
         cy.get('input[label="Room name"][value="Random"]').should("exist");
         cy.get('input[placeholder="Support"]').type("Projects");
-        cy.get(".mx_AccessibleButton").contains("Continue").click();
+        cy.contains(".mx_AccessibleButton", "Continue").click();
 
         cy.get(".mx_SpaceRoomView").should("contain", "Invite your teammates");
-        cy.get(".mx_AccessibleButton").contains("Skip for now").click();
+        cy.contains(".mx_AccessibleButton", "Skip for now").click();
 
         // Assert rooms exist in the room list
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "General").should("exist");
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "Random").should("exist");
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "Projects").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "General").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "Random").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "Projects").should("exist");
 
         // Assert rooms exist in the space explorer
-        cy.get(".mx_SpaceHierarchy_list").contains(".mx_SpaceHierarchy_roomTile", "General").should("exist");
-        cy.get(".mx_SpaceHierarchy_list").contains(".mx_SpaceHierarchy_roomTile", "Random").should("exist");
-        cy.get(".mx_SpaceHierarchy_list").contains(".mx_SpaceHierarchy_roomTile", "Projects").should("exist");
+        cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "General").should("exist");
+        cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "Random").should("exist");
+        cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "Projects").should("exist");
     });
 
     it("should allow user to create just-me space", () => {
@@ -155,10 +155,10 @@ describe("Spaces", () => {
         cy.get(".mx_SpaceRoomView_privateScope_justMeButton").click();
 
         cy.get(".mx_AddExistingToSpace_entry").click();
-        cy.get(".mx_AccessibleButton").contains("Add").click();
+        cy.contains(".mx_AccessibleButton", "Add").click();
 
-        cy.get(".mx_RoomList").contains(".mx_RoomTile", "Sample Room").should("exist");
-        cy.get(".mx_SpaceHierarchy_list").contains(".mx_SpaceHierarchy_roomTile", "Sample Room").should("exist");
+        cy.contains(".mx_RoomList .mx_RoomTile", "Sample Room").should("exist");
+        cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "Sample Room").should("exist");
     });
 
     it("should allow user to invite another to a space", () => {
@@ -186,7 +186,7 @@ describe("Spaces", () => {
 
         cy.get(".mx_InviteDialog_other").within(() => {
             cy.get('input[type="text"]').type(bot.getUserId());
-            cy.get(".mx_AccessibleButton").contains("Invite").click();
+            cy.contains(".mx_AccessibleButton", "Invite").click();
         });
 
         cy.get(".mx_InviteDialog_other").should("not.exist");
diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts
index 5af2d07d792..6aea5815e5c 100644
--- a/cypress/e2e/threads/threads.spec.ts
+++ b/cypress/e2e/threads/threads.spec.ts
@@ -53,6 +53,7 @@ describe("Threads", () => {
             cy.window().should("have.prop", "beforeReload", true);
 
             cy.leaveBeta("Threads");
+            cy.wait(1000);
             // after reload the property should be gone
             cy.window().should("not.have.prop", "beforeReload");
         });
@@ -66,6 +67,7 @@ describe("Threads", () => {
             cy.window().should("have.prop", "beforeReload", true);
 
             cy.joinBeta("Threads");
+            cy.wait(1000);
             // after reload the property should be gone
             cy.window().should("not.have.prop", "beforeReload");
         });
@@ -92,7 +94,7 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
 
         // Wait for message to send, get its ID and save as @threadId
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .invoke("attr", "data-scroll-tokens").as("threadId");
 
         // Bot starts thread
@@ -116,21 +118,21 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
 
         // User reacts to message instead
-        cy.get(".mx_ThreadView .mx_EventTile").contains(".mx_EventTile_line", "Hello there")
+        cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Hello there")
             .find('[aria-label="React"]').click({ force: true }); // Cypress has no ability to hover
         cy.get(".mx_EmojiPicker").within(() => {
             cy.get('input[type="text"]').type("wave");
-            cy.get('[role="menuitem"]').contains("👋").click();
+            cy.contains('[role="menuitem"]', "👋").click();
         });
 
         // User redacts their prior response
-        cy.get(".mx_ThreadView .mx_EventTile").contains(".mx_EventTile_line", "Test")
+        cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Test")
             .find('[aria-label="Options"]').click({ force: true }); // Cypress has no ability to hover
         cy.get(".mx_IconizedContextMenu").within(() => {
-            cy.get('[role="menuitem"]').contains("Remove").click();
+            cy.contains('[role="menuitem"]', "Remove").click();
         });
         cy.get(".mx_TextInputDialog").within(() => {
-            cy.get(".mx_Dialog_primary").contains("Remove").click();
+            cy.contains(".mx_Dialog_primary", "Remove").click();
         });
 
         // User asserts summary was updated correctly
@@ -171,7 +173,7 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Great!");
 
         // User edits & asserts
-        cy.get(".mx_ThreadView .mx_EventTile_last").contains(".mx_EventTile_line", "Great!").within(() => {
+        cy.contains(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line", "Great!").within(() => {
             cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
             cy.get(".mx_BasicMessageComposer_input").type(" How about yourself?{enter}");
         });
@@ -234,7 +236,7 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
 
         // Create thread
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .realHover().find(".mx_MessageActionBar_threadButton").click();
         cy.get(".mx_ThreadView_timelinePanelWrapper").should("have.length", 1);
 
@@ -256,7 +258,7 @@ describe("Threads", () => {
         cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
 
         // Create thread
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .realHover().find(".mx_MessageActionBar_threadButton").click();
         cy.get(".mx_ThreadView_timelinePanelWrapper").should("have.length", 1);
 
@@ -268,7 +270,7 @@ describe("Threads", () => {
         cy.get(".mx_BaseCard_close").click();
 
         // Open existing thread
-        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
+        cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
             .realHover().find(".mx_MessageActionBar_threadButton").click();
         cy.get(".mx_ThreadView_timelinePanelWrapper").should("have.length", 1);
         cy.get(".mx_BaseCard .mx_EventTile").should("contain", "Hello Mr. Bot");
diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index 6cebbfd1814..68e0300ce35 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -329,7 +329,7 @@ describe("Timeline", () => {
             cy.getComposer().type(`${MESSAGE}{enter}`);
 
             // Reply to the message
-            cy.get(".mx_RoomView_body").contains(".mx_EventTile_line", "Hello world").within(() => {
+            cy.contains(".mx_RoomView_body .mx_EventTile_line", "Hello world").within(() => {
                 cy.get('[aria-label="Reply"]').click({ force: true }); // Cypress has no ability to hover
             });
         };
diff --git a/cypress/e2e/toasts/analytics-toast.ts b/cypress/e2e/toasts/analytics-toast.ts
index 547e46bf687..518a544a1cb 100644
--- a/cypress/e2e/toasts/analytics-toast.ts
+++ b/cypress/e2e/toasts/analytics-toast.ts
@@ -24,7 +24,7 @@ function assertNoToasts(): void {
 }
 
 function getToast(expectedTitle: string): Chainable<JQuery> {
-    return cy.get(".mx_Toast_toast").contains("h2", expectedTitle).should("exist").closest(".mx_Toast_toast");
+    return cy.contains(".mx_Toast_toast h2", expectedTitle).should("exist").closest(".mx_Toast_toast");
 }
 
 function acceptToast(expectedTitle: string): void {
diff --git a/cypress/support/login.ts b/cypress/support/login.ts
index e44be781231..6c441589415 100644
--- a/cypress/support/login.ts
+++ b/cypress/support/login.ts
@@ -91,7 +91,7 @@ Cypress.Commands.add("loginUser", (synapse: SynapseInstance, username: string, p
 Cypress.Commands.add("initTestUser", (synapse: SynapseInstance, displayName: string, prelaunchFn?: () => void): Chainable<UserCredentials> => {
     // XXX: work around Cypress not clearing IDB between tests
     cy.window({ log: false }).then(win => {
-        win.indexedDB.databases().then(databases => {
+        win.indexedDB.databases()?.then(databases => {
             databases.forEach(database => {
                 win.indexedDB.deleteDatabase(database.name);
             });
diff --git a/cypress/support/settings.ts b/cypress/support/settings.ts
index 63c91ddda0a..42a78792a0f 100644
--- a/cypress/support/settings.ts
+++ b/cypress/support/settings.ts
@@ -153,7 +153,7 @@ Cypress.Commands.add("openRoomSettings", (tab?: string): Chainable<JQuery<HTMLEl
 
 Cypress.Commands.add("switchTab", (tab: string): Chainable<JQuery<HTMLElement>> => {
     return cy.get(".mx_TabbedView_tabLabels").within(() => {
-        cy.get(".mx_TabbedView_tabLabel").contains(tab).click();
+        cy.contains(".mx_TabbedView_tabLabel", tab).click();
     });
 });
 
@@ -162,13 +162,13 @@ Cypress.Commands.add("closeDialog", (): Chainable<JQuery<HTMLElement>> => {
 });
 
 Cypress.Commands.add("joinBeta", (name: string): Chainable<JQuery<HTMLElement>> => {
-    return cy.get(".mx_BetaCard_title").contains(name).closest(".mx_BetaCard").within(() => {
+    return cy.contains(".mx_BetaCard_title", name).closest(".mx_BetaCard").within(() => {
         return cy.get(".mx_BetaCard_buttons").contains("Join the beta").click();
     });
 });
 
 Cypress.Commands.add("leaveBeta", (name: string): Chainable<JQuery<HTMLElement>> => {
-    return cy.get(".mx_BetaCard_title").contains(name).closest(".mx_BetaCard").within(() => {
+    return cy.contains(".mx_BetaCard_title", name).closest(".mx_BetaCard").within(() => {
         return cy.get(".mx_BetaCard_buttons").contains("Leave the beta").click();
     });
 });
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index 64d1d9b5fdf..6c9c9558183 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -426,7 +426,7 @@ export async function restoreFromLocalStorage(opts?: { ignoreGuest?: boolean }):
     const { hsUrl, isUrl, hasAccessToken, accessToken, userId, deviceId, isGuest } = await getStoredSessionVars();
 
     if (hasAccessToken && !accessToken) {
-        abortLogin();
+        await abortLogin();
     }
 
     if (accessToken && userId && hsUrl) {

From 26f3d107fd4dab2327b0704d966600cf39b64db7 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Tue, 18 Oct 2022 21:06:43 +0200
Subject: [PATCH 005/113] Set relations helper when creating event tile context
 menu (#9253)

* Set relations helper when creating event tile context menu

Fixes vector-im/element-web#22018

Signed-off-by: Johannes Marbach <johannesm@element.io>

* Add e2e tests

* Use idiomatic test names

Signed-off-by: Johannes Marbach <johannesm@element.io>
Co-authored-by: Travis Ralston <travisr@matrix.org>
---
 cypress/e2e/polls/polls.spec.ts          | 89 +++++++++++++++++++++++-
 src/components/views/rooms/EventTile.tsx |  1 +
 2 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts
index 50d2befb0f6..f4be3962ed4 100644
--- a/cypress/e2e/polls/polls.spec.ts
+++ b/cypress/e2e/polls/polls.spec.ts
@@ -94,7 +94,7 @@ describe("Polls", () => {
         cy.stopSynapse(synapse);
     });
 
-    it("Open polls can be created and voted in", () => {
+    it("should be creatable and votable", () => {
         let bot: MatrixClient;
         cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
             bot = _bot;
@@ -159,7 +159,92 @@ describe("Polls", () => {
         });
     });
 
-    it("displays polls correctly in thread panel", () => {
+    it("should be editable from context menu if no votes have been cast", () => {
+        let bot: MatrixClient;
+        cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
+            bot = _bot;
+        });
+
+        let roomId: string;
+        cy.createRoom({}).then(_roomId => {
+            roomId = _roomId;
+            cy.inviteUser(roomId, bot.getUserId());
+            cy.visit('/#/room/' + roomId);
+        });
+
+        cy.openMessageComposerOptions().within(() => {
+            cy.get('[aria-label="Poll"]').click();
+        });
+
+        const pollParams = {
+            title: 'Does the polls feature work?',
+            options: ['Yes', 'No', 'Maybe'],
+        };
+        createPoll(pollParams);
+
+        // Wait for message to send, get its ID and save as @pollId
+        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
+            .invoke("attr", "data-scroll-tokens").as("pollId");
+
+        cy.get<string>("@pollId").then(pollId => {
+            // Open context menu
+            getPollTile(pollId).rightclick();
+
+            // Select edit item
+            cy.get('.mx_ContextualMenu').within(() => {
+                cy.get('[aria-label="Edit"]').click();
+            });
+
+            // Expect poll editing dialog
+            cy.get('.mx_PollCreateDialog');
+        });
+    });
+
+    it("should not be editable from context menu if votes have been cast", () => {
+        let bot: MatrixClient;
+        cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
+            bot = _bot;
+        });
+
+        let roomId: string;
+        cy.createRoom({}).then(_roomId => {
+            roomId = _roomId;
+            cy.inviteUser(roomId, bot.getUserId());
+            cy.visit('/#/room/' + roomId);
+        });
+
+        cy.openMessageComposerOptions().within(() => {
+            cy.get('[aria-label="Poll"]').click();
+        });
+
+        const pollParams = {
+            title: 'Does the polls feature work?',
+            options: ['Yes', 'No', 'Maybe'],
+        };
+        createPoll(pollParams);
+
+        // Wait for message to send, get its ID and save as @pollId
+        cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
+            .invoke("attr", "data-scroll-tokens").as("pollId");
+
+        cy.get<string>("@pollId").then(pollId => {
+            // Bot votes 'Maybe' in the poll
+            botVoteForOption(bot, roomId, pollId, pollParams.options[2]);
+
+            // Open context menu
+            getPollTile(pollId).rightclick();
+
+            // Select edit item
+            cy.get('.mx_ContextualMenu').within(() => {
+                cy.get('[aria-label="Edit"]').click();
+            });
+
+            // Expect error dialog
+            cy.get('.mx_ErrorDialog');
+        });
+    });
+
+    it("should be displayed correctly in thread panel", () => {
         let botBob: MatrixClient;
         let botCharlie: MatrixClient;
         cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 654cc80b67d..b13eba33e47 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -932,6 +932,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                 rightClick={true}
                 reactions={this.state.reactions}
                 link={this.state.contextMenu.link}
+                getRelationsForEvent={this.props.getRelationsForEvent}
             />
         );
     }

From e0ab0ac5c9996ebaff0c949298e42fad1d128538 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andy.balaam@matrix.org>
Date: Wed, 19 Oct 2022 04:07:21 +0100
Subject: [PATCH 006/113] Allow pressing Enter to send messages in new composer
 (#9451)

* Allow pressing Enter to send messages in new composer

* Cypress tests for composer send behaviour
---
 cypress/e2e/composer/composer.spec.ts         | 140 ++++++++++++++++++
 package.json                                  |   2 +-
 .../wysiwyg_composer/WysiwygComposer.tsx      |  24 ++-
 .../wysiwyg_composer/WysiwygComposer-test.tsx |  82 +++++++++-
 yarn.lock                                     |  87 ++++++++++-
 5 files changed, 323 insertions(+), 12 deletions(-)
 create mode 100644 cypress/e2e/composer/composer.spec.ts

diff --git a/cypress/e2e/composer/composer.spec.ts b/cypress/e2e/composer/composer.spec.ts
new file mode 100644
index 00000000000..f3fc374cf02
--- /dev/null
+++ b/cypress/e2e/composer/composer.spec.ts
@@ -0,0 +1,140 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+
+describe("Composer", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    describe("CIDER", () => {
+        beforeEach(() => {
+            cy.initTestUser(synapse, "Janet").then(() => {
+                cy.createRoom({ name: "Composing Room" });
+            });
+            cy.viewRoomByName("Composing Room");
+        });
+
+        it("sends a message when you click send or press Enter", () => {
+            // Type a message
+            cy.get('div[contenteditable=true]').type('my message 0');
+            // It has not been sent yet
+            cy.contains('.mx_EventTile_body', 'my message 0').should('not.exist');
+
+            // Click send
+            cy.get('div[aria-label="Send message"]').click();
+            // It has been sent
+            cy.contains('.mx_EventTile_body', 'my message 0');
+
+            // Type another and press Enter afterwards
+            cy.get('div[contenteditable=true]').type('my message 1{enter}');
+            // It was sent
+            cy.contains('.mx_EventTile_body', 'my message 1');
+        });
+
+        it("can write formatted text", () => {
+            cy.get('div[contenteditable=true]').type('my bold{ctrl+b} message');
+            cy.get('div[aria-label="Send message"]').click();
+            // Note: both "bold" and "message" are bold, which is probably surprising
+            cy.contains('.mx_EventTile_body strong', 'bold message');
+        });
+
+        describe("when Ctrl+Enter is required to send", () => {
+            beforeEach(() => {
+                cy.setSettingValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);
+            });
+
+            it("only sends when you press Ctrl+Enter", () => {
+                // Type a message and press Enter
+                cy.get('div[contenteditable=true]').type('my message 3{enter}');
+                // It has not been sent yet
+                cy.contains('.mx_EventTile_body', 'my message 3').should('not.exist');
+
+                // Press Ctrl+Enter
+                cy.get('div[contenteditable=true]').type('{ctrl+enter}');
+                // It was sent
+                cy.contains('.mx_EventTile_body', 'my message 3');
+            });
+        });
+    });
+
+    describe("WYSIWYG", () => {
+        beforeEach(() => {
+            cy.enableLabsFeature("feature_wysiwyg_composer");
+            cy.initTestUser(synapse, "Janet").then(() => {
+                cy.createRoom({ name: "Composing Room" });
+            });
+            cy.viewRoomByName("Composing Room");
+        });
+
+        it("sends a message when you click send or press Enter", () => {
+            // Type a message
+            cy.get('div[contenteditable=true]').type('my message 0');
+            // It has not been sent yet
+            cy.contains('.mx_EventTile_body', 'my message 0').should('not.exist');
+
+            // Click send
+            cy.get('div[aria-label="Send message"]').click();
+            // It has been sent
+            cy.contains('.mx_EventTile_body', 'my message 0');
+
+            // Type another
+            cy.get('div[contenteditable=true]').type('my message 1');
+            // Press enter. Would be nice to just use {enter} but we can't because Cypress
+            // does not trigger an insertParagraph when you do that.
+            cy.get('div[contenteditable=true]').trigger('input', { inputType: "insertParagraph" });
+            // It was sent
+            cy.contains('.mx_EventTile_body', 'my message 1');
+        });
+
+        it("can write formatted text", () => {
+            cy.get('div[contenteditable=true]').type('my {ctrl+b}bold{ctrl+b} message');
+            cy.get('div[aria-label="Send message"]').click();
+            cy.contains('.mx_EventTile_body strong', 'bold');
+        });
+
+        describe("when Ctrl+Enter is required to send", () => {
+            beforeEach(() => {
+                cy.setSettingValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);
+            });
+
+            it("only sends when you press Ctrl+Enter", () => {
+                // Type a message and press Enter
+                cy.get('div[contenteditable=true]').type('my message 3');
+                cy.get('div[contenteditable=true]').trigger('input', { inputType: "insertParagraph" });
+                // It has not been sent yet
+                cy.contains('.mx_EventTile_body', 'my message 3').should('not.exist');
+
+                // Press Ctrl+Enter
+                cy.get('div[contenteditable=true]').type('{ctrl+enter}');
+                // It was sent
+                cy.contains('.mx_EventTile_body', 'my message 3');
+            });
+        });
+    });
+});
diff --git a/package.json b/package.json
index b203cf51e91..f0ab2c266b4 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@matrix-org/analytics-events": "^0.2.0",
-    "@matrix-org/matrix-wysiwyg": "^0.2.0",
+    "@matrix-org/matrix-wysiwyg": "^0.3.0",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
index 8701f5be778..c22e3406fa6 100644
--- a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useCallback, useEffect } from 'react';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
+import { useWysiwyg, Wysiwyg, WysiwygInputEvent } from "@matrix-org/matrix-wysiwyg";
 
 import { Editor } from './Editor';
 import { FormattingButtons } from './FormattingButtons';
@@ -25,6 +25,7 @@ import { sendMessage } from './message';
 import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext';
 import { useRoomContext } from '../../../../contexts/RoomContext';
 import { useWysiwygActionHandler } from './useWysiwygActionHandler';
+import { useSettingValue } from '../../../../hooks/useSettings';
 
 interface WysiwygProps {
     disabled?: boolean;
@@ -41,8 +42,27 @@ export function WysiwygComposer(
 ) {
     const roomContext = useRoomContext();
     const mxClient = useMatrixClientContext();
+    const ctrlEnterToSend = useSettingValue("MessageComposerInput.ctrlEnterToSend");
 
-    const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = useWysiwyg();
+    function inputEventProcessor(event: WysiwygInputEvent, wysiwyg: Wysiwyg): WysiwygInputEvent | null {
+        if (event instanceof ClipboardEvent) {
+            return event;
+        }
+
+        if (
+            (event.inputType === 'insertParagraph' && !ctrlEnterToSend) ||
+            event.inputType === 'sendMessage'
+        ) {
+            sendMessage(content, { mxClient, roomContext, ...props });
+            wysiwyg.actions.clear();
+            ref.current?.focus();
+            return null;
+        }
+
+        return event;
+    }
+
+    const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = useWysiwyg({ inputEventProcessor });
 
     useEffect(() => {
         if (!disabled && content !== null) {
diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
index b0aa838879b..df2596809cc 100644
--- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import "@testing-library/jest-dom";
 import React from "react";
 import { act, render, screen, waitFor } from "@testing-library/react";
+import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
@@ -26,13 +27,31 @@ import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/WysiwygComposer";
 import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+
+// Work around missing ClipboardEvent type
+class MyClipbardEvent {}
+window.ClipboardEvent = MyClipbardEvent as any;
+
+let inputEventProcessor: InputEventProcessor | null = null;
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
 // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
 jest.mock("@matrix-org/matrix-wysiwyg", () => ({
-    useWysiwyg: () => {
-        return { ref: { current: null }, content: '<b>html</b>', isWysiwygReady: true, wysiwyg: { clear: () => void 0 },
-            formattingStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } };
+    useWysiwyg: (props: WysiwygProps) => {
+        inputEventProcessor = props.inputEventProcessor ?? null;
+        return {
+            ref: { current: null },
+            content: '<b>html</b>',
+            isWysiwygReady: true,
+            wysiwyg: { clear: () => void 0 },
+            formattingStates: {
+                bold: 'enabled',
+                italic: 'enabled',
+                underline: 'enabled',
+                strikeThrough: 'enabled',
+            },
+        };
     },
 }));
 
@@ -196,5 +215,62 @@ describe('WysiwygComposer', () => {
         // Then we don't get it because we are disabled
         expect(screen.getByRole('textbox')).not.toHaveFocus();
     });
+
+    it('sends a message when Enter is pressed', async () => {
+        // Given a composer
+        customRender(() => {}, false);
+
+        // When we tell its inputEventProcesser that the user pressed Enter
+        const event = new InputEvent("insertParagraph", { inputType: "insertParagraph" });
+        const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+        inputEventProcessor(event, wysiwyg);
+
+        // Then it sends a message
+        expect(mockClient.sendMessage).toBeCalledWith(
+            "myfakeroom",
+            null,
+            {
+                "body": "<b>html</b>",
+                "format": "org.matrix.custom.html",
+                "formatted_body": "<b>html</b>",
+                "msgtype": "m.text",
+            },
+        );
+        // TODO: plain text body above is wrong - will be fixed when we provide markdown for it
+    });
+
+    describe('when settings require Ctrl+Enter to send', () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                if (name === "MessageComposerInput.ctrlEnterToSend") return true;
+            });
+        });
+
+        it('does not send a message when Enter is pressed', async () => {
+            // Given a composer
+            customRender(() => {}, false);
+
+            // When we tell its inputEventProcesser that the user pressed Enter
+            const event = new InputEvent("input", { inputType: "insertParagraph" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it does not send a message
+            expect(mockClient.sendMessage).toBeCalledTimes(0);
+        });
+
+        it('sends a message when Ctrl+Enter is pressed', async () => {
+            // Given a composer
+            customRender(() => {}, false);
+
+            // When we tell its inputEventProcesser that the user pressed Ctrl+Enter
+            const event = new InputEvent("input", { inputType: "sendMessage" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it sends a message
+            expect(mockClient.sendMessage).toBeCalledTimes(1);
+        });
+    });
 });
 
diff --git a/yarn.lock b/yarn.lock
index b54bc1ec815..add14d4c3e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1660,10 +1660,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.2.0.tgz#453925c939ecdd5ca6c797d293deb8cf0933f1b8"
   integrity sha512-+0/Sydm4MNOcqd8iySJmojVPB74Axba4BXlwTsiKmL5fgYqdUkwmqkO39K7Pn8i+a+8pg11oNvBPkpWs3O5Qww==
 
-"@matrix-org/matrix-wysiwyg@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.2.0.tgz#651002ad67be3004698d4a89806cf344283a4ca3"
-  integrity sha512-m9R1NOd0ogkhrjqFNg159TMXL5dpME90G9RDrZrO106263Qtoj0TazyBaLhNjgvPkogbzbCJUULQWPFiLQfTjw==
+"@matrix-org/matrix-wysiwyg@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.3.0.tgz#9a0b996c47fbb63fb235a0810b678158b253f721"
+  integrity sha512-m33qOo64VIZRqzMZ5vJ9m2gYns+sCaFFy3R5Nn9JfDnldQ1oh+ra611I9keFmO/Ls6548ZN8hUkv+49Ua3iBHA==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
   version "3.2.8"
@@ -2674,7 +2674,7 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3198,6 +3198,11 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
+browser-request@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/browser-request/-/browser-request-0.3.3.tgz#9ece5b5aca89a29932242e18bf933def9876cc17"
+  integrity sha512-YyNI4qJJ+piQG6MMEuo7J3Bzaqssufx04zpEKYfSrl/1Op59HWali9zMtBpXnkmqMcOuWJPZvudrm9wISmnCbg==
+
 browserslist@^4.20.2, browserslist@^4.21.3:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -5280,6 +5285,19 @@ grid-index@^1.1.0:
   resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
   integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
 
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
+
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -5440,6 +5458,15 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -6668,6 +6695,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsprim@^1.2.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
+  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.4.0"
+    verror "1.10.0"
+
 jsprim@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
@@ -7033,12 +7070,14 @@ matrix-events-sdk@^0.0.1-beta.7:
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
+    browser-request "^0.3.3"
     bs58 "^5.0.0"
     content-type "^1.0.4"
     loglevel "^1.7.1"
     matrix-events-sdk "^0.0.1-beta.7"
     p-retry "4"
     qs "^6.9.6"
+    request "^2.88.2"
     unhomoglyph "^1.0.6"
 
 matrix-mock-request@^2.5.0:
@@ -7357,6 +7396,11 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.1.tgz#10a9f268fbf4c461249ebcfe38e359aa36e2577c"
   integrity sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg==
 
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
 object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -8259,6 +8303,32 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
+request@^2.88.2:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8725,7 +8795,7 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sshpk@^1.14.1:
+sshpk@^1.14.1, sshpk@^1.7.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
   integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
@@ -9439,6 +9509,11 @@ util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"

From 84f2974b570fcb5c6cc4b5d2d1228b0e55c2767a Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 19 Oct 2022 12:04:15 +0200
Subject: [PATCH 007/113] Always show voice broadcasts tile (#9444)

---
 .../views/messages/MessageEvent.tsx           | 40 +----------
 .../views/messages/MessageEvent-test.tsx      | 66 ++-----------------
 2 files changed, 7 insertions(+), 99 deletions(-)

diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx
index 91807d568f6..858bf0eb6c5 100644
--- a/src/components/views/messages/MessageEvent.tsx
+++ b/src/components/views/messages/MessageEvent.tsx
@@ -43,8 +43,6 @@ import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
 import { IEventTileOps } from "../rooms/EventTile";
 import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from '../../../voice-broadcast';
-import { Features } from '../../../settings/Settings';
-import { SettingLevel } from '../../../settings/SettingLevel';
 
 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@@ -58,18 +56,10 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
     isSeeingThroughMessageHiddenForModeration?: boolean;
 }
 
-interface State {
-    voiceBroadcastEnabled: boolean;
-}
-
 export interface IOperableEventTile {
     getEventTileOps(): IEventTileOps;
 }
 
-interface State {
-    voiceBroadcastEnabled: boolean;
-}
-
 const baseBodyTypes = new Map<string, typeof React.Component>([
     [MsgType.Text, TextualBody],
     [MsgType.Notice, TextualBody],
@@ -87,7 +77,7 @@ const baseEvTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>([
     [M_BEACON_INFO.altName, MBeaconBody],
 ]);
 
-export default class MessageEvent extends React.Component<IProps, State> implements IMediaBody, IOperableEventTile {
+export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
     private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
     private mediaHelper: MediaEventHelper;
     private bodyTypes = new Map<string, typeof React.Component>(baseBodyTypes.entries());
@@ -95,7 +85,6 @@ export default class MessageEvent extends React.Component<IProps, State> impleme
 
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
-    private voiceBroadcastSettingWatcherRef: string;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
@@ -105,29 +94,15 @@ export default class MessageEvent extends React.Component<IProps, State> impleme
         }
 
         this.updateComponentMaps();
-
-        this.state = {
-            // only check voice broadcast settings for a voice broadcast event
-            voiceBroadcastEnabled: this.props.mxEvent.getType() === VoiceBroadcastInfoEventType
-                && SettingsStore.getValue(Features.VoiceBroadcast),
-        };
     }
 
     public componentDidMount(): void {
         this.props.mxEvent.addListener(MatrixEventEvent.Decrypted, this.onDecrypted);
-
-        if (this.props.mxEvent.getType() === VoiceBroadcastInfoEventType) {
-            this.watchVoiceBroadcastFeatureSetting();
-        }
     }
 
     public componentWillUnmount() {
         this.props.mxEvent.removeListener(MatrixEventEvent.Decrypted, this.onDecrypted);
         this.mediaHelper?.destroy();
-
-        if (this.voiceBroadcastSettingWatcherRef) {
-            SettingsStore.unwatchSetting(this.voiceBroadcastSettingWatcherRef);
-        }
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>) {
@@ -171,16 +146,6 @@ export default class MessageEvent extends React.Component<IProps, State> impleme
         this.forceUpdate();
     };
 
-    private watchVoiceBroadcastFeatureSetting(): void {
-        this.voiceBroadcastSettingWatcherRef = SettingsStore.watchSetting(
-            Features.VoiceBroadcast,
-            null,
-            (settingName: string, roomId: string, atLevel: SettingLevel, newValAtLevel, newValue: boolean) => {
-                this.setState({ voiceBroadcastEnabled: newValue });
-            },
-        );
-    }
-
     public render() {
         const content = this.props.mxEvent.getContent();
         const type = this.props.mxEvent.getType();
@@ -209,8 +174,7 @@ export default class MessageEvent extends React.Component<IProps, State> impleme
             }
 
             if (
-                this.state.voiceBroadcastEnabled
-                && type === VoiceBroadcastInfoEventType
+                type === VoiceBroadcastInfoEventType
                 && content?.state === VoiceBroadcastInfoState.Started
             ) {
                 BodyType = VoiceBroadcastBody;
diff --git a/test/components/views/messages/MessageEvent-test.tsx b/test/components/views/messages/MessageEvent-test.tsx
index 82442855fc6..dadddca093a 100644
--- a/test/components/views/messages/MessageEvent-test.tsx
+++ b/test/components/views/messages/MessageEvent-test.tsx
@@ -16,11 +16,9 @@ limitations under the License.
 
 import React from "react";
 import { render, RenderResult } from "@testing-library/react";
-import { mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
-import { Features } from "../../../../src/settings/Settings";
-import SettingsStore, { CallbackFn } from "../../../../src/settings/SettingsStore";
+import SettingsStore from "../../../../src/settings/SettingsStore";
 import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../../src/voice-broadcast";
 import { mkEvent, mkRoom, stubClient } from "../../../test-utils";
 import MessageEvent from "../../../../src/components/views/messages/MessageEvent";
@@ -57,8 +55,7 @@ describe("MessageEvent", () => {
     });
 
     describe("when a voice broadcast start event occurs", () => {
-        const voiceBroadcastSettingWatcherRef = "vb ref";
-        let onVoiceBroadcastSettingChanged: CallbackFn;
+        let result: RenderResult;
 
         beforeEach(() => {
             event = mkEvent({
@@ -70,64 +67,11 @@ describe("MessageEvent", () => {
                     state: VoiceBroadcastInfoState.Started,
                 },
             });
-
-            mocked(SettingsStore.watchSetting).mockImplementation(
-                (settingName: string, roomId: string | null, callbackFn: CallbackFn) => {
-                    if (settingName === Features.VoiceBroadcast) {
-                        onVoiceBroadcastSettingChanged = callbackFn;
-                        return voiceBroadcastSettingWatcherRef;
-                    }
-                },
-            );
+            result = renderMessageEvent();
         });
 
-        describe("and the voice broadcast feature is enabled", () => {
-            let result: RenderResult;
-
-            beforeEach(() => {
-                mocked(SettingsStore.getValue).mockImplementation((settingName: string) => {
-                    return settingName === Features.VoiceBroadcast;
-                });
-                result = renderMessageEvent();
-            });
-
-            it("should render a VoiceBroadcast component", () => {
-                result.getByTestId("voice-broadcast-body");
-            });
-
-            describe("and switching the voice broadcast feature off", () => {
-                beforeEach(() => {
-                    onVoiceBroadcastSettingChanged(Features.VoiceBroadcast, null, null, null, false);
-                });
-
-                it("should render an UnknownBody component", () => {
-                    const result = renderMessageEvent();
-                    result.getByTestId("unknown-body");
-                });
-            });
-
-            describe("and unmounted", () => {
-                beforeEach(() => {
-                    result.unmount();
-                });
-
-                it("should unregister the settings watcher", () => {
-                    expect(SettingsStore.unwatchSetting).toHaveBeenCalled();
-                });
-            });
-        });
-
-        describe("and the voice broadcast feature is disabled", () => {
-            beforeEach(() => {
-                mocked(SettingsStore.getValue).mockImplementation((settingName: string) => {
-                    return false;
-                });
-            });
-
-            it("should render an UnknownBody component", () => {
-                const result = renderMessageEvent();
-                result.getByTestId("unknown-body");
-            });
+        it("should render a VoiceBroadcast component", () => {
+            result.getByTestId("voice-broadcast-body");
         });
     });
 });

From 460f60e99d447fe1e47b14f6e223acbf1413c4c0 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 19 Oct 2022 12:45:51 +0200
Subject: [PATCH 008/113] First attempt to make the edition works in the
 WysiwygComposer

---
 src/components/views/messages/TextualBody.tsx |   6 +-
 .../views/rooms/BasicMessageComposer.tsx      |   2 +
 .../views/rooms/EditMessageComposer.tsx       |   1 +
 .../views/rooms/MessageComposer.tsx           |  34 ++--
 .../wysiwyg_composer/EditWysiwygComposer.tsx  | 105 ++++++++++++
 .../wysiwyg_composer/SendWysiwygComposer.tsx  |  46 ++++++
 .../wysiwyg_composer/WysiwygComposer.tsx      |  68 --------
 .../components/EditionButtons.tsx             |  36 ++++
 .../{ => components}/Editor.tsx               |   0
 .../{ => components}/FormattingButtons.tsx    |  13 +-
 .../components/WysiwygComposer.tsx            |  49 ++++++
 .../hooks/useWysiwygEditActionHandler.ts      |  48 ++++++
 .../hooks/useWysiwygSendActionHandler.ts      |  56 +++++++
 .../utils.ts}                                 |  36 +---
 .../views/rooms/wysiwyg_composer/index.ts     |  19 +++
 .../views/rooms/wysiwyg_composer/types.ts     |  21 +++
 .../utils/createMessageContent.ts             | 117 +++++++++++++
 .../rooms/wysiwyg_composer/utils/editing.ts   |  50 ++++++
 .../utils/isContentModified.ts                |  30 ++++
 .../wysiwyg_composer/{ => utils}/message.ts   | 155 +++++++++---------
 src/dispatcher/actions.ts                     |   5 +
 .../views/rooms/MessageComposer-test.tsx      |   2 +-
 .../FormattingButtons-test.tsx                |   2 +-
 .../wysiwyg_composer/WysiwygComposer-test.tsx |   2 +-
 .../rooms/wysiwyg_composer/message-test.ts    |   2 +-
 25 files changed, 705 insertions(+), 200 deletions(-)
 create mode 100644 src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
 delete mode 100644 src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
 rename src/components/views/rooms/wysiwyg_composer/{ => components}/Editor.tsx (100%)
 rename src/components/views/rooms/wysiwyg_composer/{ => components}/FormattingButtons.tsx (87%)
 create mode 100644 src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
 rename src/components/views/rooms/wysiwyg_composer/{useWysiwygActionHandler.ts => hooks/utils.ts} (52%)
 create mode 100644 src/components/views/rooms/wysiwyg_composer/index.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/types.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/utils/editing.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/utils/isContentModified.ts
 rename src/components/views/rooms/wysiwyg_composer/{ => utils}/message.ts (57%)

diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 23ba901acdf..983cbe51e37 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -48,6 +48,7 @@ import RoomContext from "../../../contexts/RoomContext";
 import AccessibleButton from '../elements/AccessibleButton';
 import { options as linkifyOpts } from "../../../linkify-matrix";
 import { getParentEventId } from '../../../utils/Reply';
+import { EditWysiwygComposer } from '../rooms/wysiwyg_composer';
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 
@@ -562,7 +563,10 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
     render() {
         if (this.props.editState) {
-            return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
+            const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
+            return isWysiwygComposerEnabled ?
+                <EditWysiwygComposer editorStateTransfer={this.props.editState} /> :
+                <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index d74c7b51484..962059091cc 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -833,6 +833,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public insertPlaintext(text: string): void {
+        console.log('insertPlaintext', text);
+        debugger;
         this.modifiedFlag = true;
         const { model } = this.props;
         const { partCreator } = model;
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index 52312e1a998..bb014541278 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -350,6 +350,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
                 const event = this.props.editState.getEvent();
                 const threadId = event.threadRootId || null;
 
+                console.log('editContent', editContent);
                 this.props.mxClient.sendMessage(roomId, threadId, editContent);
                 dis.dispatch({ action: "message_sent" });
             }
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 9783e30756a..a3cac30704b 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -58,7 +58,8 @@ import {
     startNewVoiceBroadcastRecording,
     VoiceBroadcastRecordingsStore,
 } from '../../../voice-broadcast';
-import { WysiwygComposer } from './wysiwyg_composer/WysiwygComposer';
+import { SendWysiwygComposer, sendMessage } from './wysiwyg_composer/';
+import { MatrixClientProps, withMatrixClientHOC } from '../../../contexts/MatrixClientContext';
 
 let instanceCount = 0;
 
@@ -77,7 +78,7 @@ function SendButton(props: ISendButtonProps) {
     );
 }
 
-interface IProps {
+interface IProps extends MatrixClientProps {
     room: Room;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
@@ -89,6 +90,7 @@ interface IProps {
 }
 
 interface IState {
+    composerContent: string;
     isComposerEmpty: boolean;
     haveRecording: boolean;
     recordingTimeLeftSeconds?: number;
@@ -100,13 +102,12 @@ interface IState {
     showVoiceBroadcastButton: boolean;
 }
 
-export default class MessageComposer extends React.Component<IProps, IState> {
+class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private messageComposerInput = createRef<SendMessageComposerClass>();
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private instanceId: number;
-    private composerSendMessage?: () => void;
 
     private _voiceRecording: Optional<VoiceMessageRecording>;
 
@@ -124,6 +125,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         this.state = {
             isComposerEmpty: true,
+            composerContent: '',
             haveRecording: false,
             recordingTimeLeftSeconds: undefined, // when set to a number, shows a toast
             isMenuOpen: false,
@@ -315,7 +317,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
 
         this.messageComposerInput.current?.sendMessage();
-        this.composerSendMessage?.();
+        // this.composerSendMessage?.();
+        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
+
+        if (isWysiwygComposerEnabled) {
+            const { permalinkCreator, relation, replyToEvent } = this.props;
+            sendMessage(this.state.composerContent,
+                { mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
+            dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
+        }
     };
 
     private onChange = (model: EditorModel) => {
@@ -326,6 +336,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     private onWysiwygChange = (content: string) => {
         this.setState({
+            composerContent: content,
             isComposerEmpty: content?.length === 0,
         });
     };
@@ -406,16 +417,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         if (canSendMessages) {
             if (isWysiwygComposerEnabled) {
                 controls.push(
-                    <WysiwygComposer key="controls_input"
+                    <SendWysiwygComposer key="controls_input"
                         disabled={this.state.haveRecording}
                         onChange={this.onWysiwygChange}
-                        permalinkCreator={this.props.permalinkCreator}
-                        relation={this.props.relation}
-                        replyToEvent={this.props.replyToEvent}>
-                        { (sendMessage) => {
-                            this.composerSendMessage = sendMessage;
-                        } }
-                    </WysiwygComposer>,
+                    />,
                 );
             } else {
                 controls.push(
@@ -555,3 +560,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         );
     }
 }
+
+const MessageComposerWithMatrixClient = withMatrixClientHOC(MessageComposer);
+export default MessageComposerWithMatrixClient;
diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
new file mode 100644
index 00000000000..17b664410ce
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -0,0 +1,105 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { forwardRef, RefObject, useMemo } from 'react';
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { useRoomContext } from '../../../../contexts/RoomContext';
+import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext';
+import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
+import { CommandPartCreator, Part } from '../../../../editor/parts';
+import { IRoomState } from '../../../structures/RoomView';
+import SettingsStore from '../../../../settings/SettingsStore';
+import { parseEvent } from '../../../../editor/deserialize';
+import { WysiwygComposer } from './components/WysiwygComposer';
+import { EditionButtons } from './components/EditionButtons';
+import { useWysiwygEditActionHandler } from './hooks/useWysiwygEditActionHandler';
+import { endEditing } from './utils/editing';
+import { editMessage } from './utils/message';
+
+function parseEditorStateTransfer(
+    editorStateTransfer: EditorStateTransfer,
+    roomContext: IRoomState,
+    mxClient: MatrixClient,
+) {
+    if (!roomContext.room) {
+        return;
+    }
+
+    const { room } = roomContext;
+
+    const partCreator = new CommandPartCreator(room, mxClient);
+
+    let parts: Part[];
+    if (editorStateTransfer.hasEditorState()) {
+        // if restoring state from a previous editor,
+        // restore serialized parts from the state
+        parts = editorStateTransfer.getSerializedParts().map(p => partCreator.deserializePart(p));
+    } else {
+        // otherwise, either restore serialized parts from localStorage or parse the body of the event
+        // TODO local storage
+        // const restoredParts = this.restoreStoredEditorState(partCreator);
+
+        if (editorStateTransfer.getEvent().getContent().format === 'org.matrix.custom.html') {
+            return editorStateTransfer.getEvent().getContent().formatted_body || "";
+        }
+
+        parts = parseEvent(editorStateTransfer.getEvent(), partCreator, {
+            shouldEscape: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
+        });
+    }
+
+    return parts.reduce((content, part) => content + part.text, '');
+    // Todo local storage
+    // this.saveStoredEditorState();
+}
+
+interface ContentProps {
+    disabled: boolean;
+}
+
+const Content = forwardRef<HTMLElement, ContentProps>(
+    function Content({ disabled }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygEditActionHandler(disabled, forwardRef);
+        return null;
+    },
+);
+
+interface EditWysiwygComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+    editorStateTransfer?: EditorStateTransfer;
+}
+
+export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiwygComposerProps) {
+    const roomContext = useRoomContext();
+    const mxClient = useMatrixClientContext();
+
+    const initialContent = useMemo(() => {
+        if (editorStateTransfer) {
+            return parseEditorStateTransfer(editorStateTransfer, roomContext, mxClient);
+        }
+    }, [editorStateTransfer, roomContext, mxClient]);
+    const isReady = !editorStateTransfer || Boolean(initialContent);
+
+    return isReady && <WysiwygComposer initialContent={initialContent} {...props}>{ (ref, wysiwyg, content) => (
+        <>
+            <Content disabled={props.disabled} ref={ref} />
+            <EditionButtons onCancelClick={() => endEditing(roomContext)} onSaveClick={() => editMessage(content, { roomContext, mxClient, editorStateTransfer })} />
+        </>)
+    }
+    </WysiwygComposer>;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
new file mode 100644
index 00000000000..577374e116f
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -0,0 +1,46 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { forwardRef, RefObject } from 'react';
+
+import { useWysiwygSendActionHandler } from './hooks/useWysiwygSendActionHandler';
+import { WysiwygComposer } from './components/WysiwygComposer';
+import { Wysiwyg } from './types';
+
+interface SendWysiwygComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+}
+
+export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
+    return (
+        <WysiwygComposer {...props}>{ (ref, wysiwyg) => (
+            <Content disabled={props.disabled} ref={ref} wysiwyg={wysiwyg} />
+        ) }
+        </WysiwygComposer>);
+}
+
+interface ContentProps {
+    disabled: boolean;
+    wysiwyg: Wysiwyg;
+}
+
+const Content = forwardRef<HTMLElement, ContentProps>(
+    function Content({ disabled, wysiwyg }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygSendActionHandler(disabled, forwardRef, wysiwyg);
+        return null;
+    },
+);
diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
deleted file mode 100644
index 8701f5be778..00000000000
--- a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useCallback, useEffect } from 'react';
-import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
-
-import { Editor } from './Editor';
-import { FormattingButtons } from './FormattingButtons';
-import { RoomPermalinkCreator } from '../../../../utils/permalinks/Permalinks';
-import { sendMessage } from './message';
-import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext';
-import { useRoomContext } from '../../../../contexts/RoomContext';
-import { useWysiwygActionHandler } from './useWysiwygActionHandler';
-
-interface WysiwygProps {
-    disabled?: boolean;
-    onChange: (content: string) => void;
-    relation?: IEventRelation;
-    replyToEvent?: MatrixEvent;
-    permalinkCreator: RoomPermalinkCreator;
-    includeReplyLegacyFallback?: boolean;
-    children?: (sendMessage: () => void) => void;
-}
-
-export function WysiwygComposer(
-    { disabled = false, onChange, children, ...props }: WysiwygProps,
-) {
-    const roomContext = useRoomContext();
-    const mxClient = useMatrixClientContext();
-
-    const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = useWysiwyg();
-
-    useEffect(() => {
-        if (!disabled && content !== null) {
-            onChange(content);
-        }
-    }, [onChange, content, disabled]);
-
-    const memoizedSendMessage = useCallback(() => {
-        sendMessage(content, { mxClient, roomContext, ...props });
-        wysiwyg.clear();
-        ref.current?.focus();
-    }, [content, mxClient, roomContext, wysiwyg, props, ref]);
-
-    useWysiwygActionHandler(disabled, ref);
-
-    return (
-        <div className="mx_WysiwygComposer">
-            <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
-            <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
-            { children?.(memoizedSendMessage) }
-        </div>
-    );
-}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
new file mode 100644
index 00000000000..20a3df2a7f7
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MouseEventHandler } from 'react';
+
+import { _t } from '../../../../../languageHandler';
+import AccessibleButton from '../../../elements/AccessibleButton';
+
+interface EditionButtonsProps {
+    onCancelClick: MouseEventHandler<HTMLButtonElement>;
+    onSaveClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export function EditionButtons({ onCancelClick, onSaveClick }: EditionButtonsProps) {
+    return <div className="mx_EditMessageComposer_buttons">
+        <AccessibleButton kind="secondary" onClick={onCancelClick}>
+            { _t("Cancel") }
+        </AccessibleButton>
+        <AccessibleButton kind="primary" disabled={false} onClick={onSaveClick}>
+            { _t("Save") }
+        </AccessibleButton>
+    </div>;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/Editor.tsx b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
similarity index 100%
rename from src/components/views/rooms/wysiwyg_composer/Editor.tsx
rename to src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
diff --git a/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
similarity index 87%
rename from src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx
rename to src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 19941ad3f94..c806c278615 100644
--- a/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -18,11 +18,12 @@ import React, { MouseEventHandler } from "react";
 import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
 import classNames from "classnames";
 
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
-import { Alignment } from "../../elements/Tooltip";
-import { KeyboardShortcut } from "../../settings/KeyboardShortcut";
-import { KeyCombo } from "../../../../KeyBindingsManager";
-import { _td } from "../../../../languageHandler";
+import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
+import { Alignment } from "../../../elements/Tooltip";
+import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
+import { KeyCombo } from "../../../../../KeyBindingsManager";
+import { _td } from "../../../../../languageHandler";
+import { Wysiwyg } from "../types";
 
 interface TooltipProps {
     label: string;
@@ -55,7 +56,7 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
 }
 
 interface FormattingButtonsProps {
-    composer: ReturnType<typeof useWysiwyg>['wysiwyg'];
+    composer: Wysiwyg;
     formattingStates: ReturnType<typeof useWysiwyg>['formattingStates'];
 }
 
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
new file mode 100644
index 00000000000..3e63c35fe35
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -0,0 +1,49 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MutableRefObject, ReactNode, useEffect } from 'react';
+import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
+
+import { FormattingButtons } from './FormattingButtons';
+import { Editor } from './Editor';
+import { Wysiwyg } from '../types';
+
+interface WysiwygComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+    initialContent?: string;
+    children?: (ref: MutableRefObject<HTMLDivElement | null>, wysiwyg: Wysiwyg, content: string) => ReactNode;
+}
+
+export function WysiwygComposer(
+    { disabled = false, onChange, initialContent, children }: WysiwygComposerProps,
+) {
+    const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = useWysiwyg({ initialContent });
+
+    useEffect(() => {
+        if (!disabled && content !== null) {
+            onChange?.(content);
+        }
+    }, [onChange, content, disabled]);
+
+    return (
+        <div className="mx_WysiwygComposer">
+            <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
+            <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
+            { children?.(ref, wysiwyg, content) }
+        </div>
+    );
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
new file mode 100644
index 00000000000..2cbd7cf52cc
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useCallback, useRef } from "react";
+
+import defaultDispatcher from "../../../../../dispatcher/dispatcher";
+import { Action } from "../../../../../dispatcher/actions";
+import { ActionPayload } from "../../../../../dispatcher/payloads";
+import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
+import { useDispatcher } from "../../../../../hooks/useDispatcher";
+import { focusComposer } from "./utils";
+
+export function useWysiwygEditActionHandler(
+    disabled: boolean,
+    composerElement: RefObject<HTMLElement>,
+) {
+    const roomContext = useRoomContext();
+    const timeoutId = useRef<number>();
+
+    const handler = useCallback((payload: ActionPayload) => {
+        // 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 (disabled || !composerElement.current) return;
+
+        const context = payload.context ?? TimelineRenderingType.Room;
+
+        switch (payload.action) {
+            case Action.FocusSendMessageComposer:
+                focusComposer(composerElement, context, roomContext, timeoutId);
+                break;
+        }
+    }, [disabled, composerElement, timeoutId, roomContext]);
+
+    useDispatcher(defaultDispatcher, handler);
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
new file mode 100644
index 00000000000..41169a4e2d3
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useCallback, useRef } from "react";
+
+import defaultDispatcher from "../../../../../dispatcher/dispatcher";
+import { Action } from "../../../../../dispatcher/actions";
+import { ActionPayload } from "../../../../../dispatcher/payloads";
+import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
+import { useDispatcher } from "../../../../../hooks/useDispatcher";
+import { Wysiwyg } from "../types";
+import { focusComposer } from "./utils";
+
+export function useWysiwygSendActionHandler(
+    disabled: boolean,
+    composerElement: RefObject<HTMLElement>,
+    wysiwyg: Wysiwyg,
+) {
+    const roomContext = useRoomContext();
+    const timeoutId = useRef<number>();
+
+    const handler = useCallback((payload: ActionPayload) => {
+        // 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 (disabled || !composerElement.current) return;
+
+        const context = payload.context ?? TimelineRenderingType.Room;
+
+        switch (payload.action) {
+            case "reply_to_event":
+            case Action.FocusSendMessageComposer:
+                focusComposer(composerElement, context, roomContext, timeoutId);
+                break;
+            case Action.ClearAndFocusSendMessageComposer:
+                wysiwyg.clear();
+                focusComposer(composerElement, context, roomContext, timeoutId);
+                break;
+            // TODO: case Action.ComposerInsert: - see SendMessageComposer
+        }
+    }, [disabled, composerElement, wysiwyg, timeoutId, roomContext]);
+
+    useDispatcher(defaultDispatcher, handler);
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/useWysiwygActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
similarity index 52%
rename from src/components/views/rooms/wysiwyg_composer/useWysiwygActionHandler.ts
rename to src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
index 683498d485e..eab855e0868 100644
--- a/src/components/views/rooms/wysiwyg_composer/useWysiwygActionHandler.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
@@ -14,40 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef } from "react";
+import { TimelineRenderingType } from "../../../../../contexts/RoomContext";
+import { IRoomState } from "../../../../structures/RoomView";
 
-import defaultDispatcher from "../../../../dispatcher/dispatcher";
-import { Action } from "../../../../dispatcher/actions";
-import { ActionPayload } from "../../../../dispatcher/payloads";
-import { IRoomState } from "../../../structures/RoomView";
-import { TimelineRenderingType, useRoomContext } from "../../../../contexts/RoomContext";
-import { useDispatcher } from "../../../../hooks/useDispatcher";
-
-export function useWysiwygActionHandler(
-    disabled: boolean,
-    composerElement: React.MutableRefObject<HTMLElement>,
-) {
-    const roomContext = useRoomContext();
-    const timeoutId = useRef<number>();
-
-    useDispatcher(defaultDispatcher, (payload: ActionPayload) => {
-        // 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 (disabled) return;
-
-        const context = payload.context ?? TimelineRenderingType.Room;
-
-        switch (payload.action) {
-            case "reply_to_event":
-            case Action.FocusSendMessageComposer:
-                focusComposer(composerElement, context, roomContext, timeoutId);
-                break;
-            // TODO: case Action.ComposerInsert: - see SendMessageComposer
-        }
-    });
-}
-
-function focusComposer(
+export function focusComposer(
     composerElement: React.MutableRefObject<HTMLElement>,
     renderingType: TimelineRenderingType,
     roomContext: IRoomState,
diff --git a/src/components/views/rooms/wysiwyg_composer/index.ts b/src/components/views/rooms/wysiwyg_composer/index.ts
new file mode 100644
index 00000000000..ec8c9cff232
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/index.ts
@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export { SendWysiwygComposer } from './SendWysiwygComposer';
+export { EditWysiwygComposer } from './EditWysiwygComposer';
+export { sendMessage } from './utils/message';
diff --git a/src/components/views/rooms/wysiwyg_composer/types.ts b/src/components/views/rooms/wysiwyg_composer/types.ts
new file mode 100644
index 00000000000..6c57ce6a86e
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/types.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
+
+// TODO
+// Change when the matrix-wysiwyg typescript definition will be refined
+export type Wysiwyg = ReturnType<typeof useWysiwyg>['wysiwyg'];
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
new file mode 100644
index 00000000000..fe7f7706b4f
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -0,0 +1,117 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { IContent, IEventRelation, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+
+import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
+import { addReplyToMessageContent } from "../../../../../utils/Reply";
+
+// Merges favouring the given relation
+function attachRelation(content: IContent, relation?: IEventRelation): void {
+    if (relation) {
+        content['m.relates_to'] = {
+            ...(content['m.relates_to'] || {}),
+            ...relation,
+        };
+    }
+}
+
+function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
+    const html = mxEvent.getContent().formatted_body;
+    if (!html) {
+        return "";
+    }
+    const rootNode = new DOMParser().parseFromString(html, "text/html").body;
+    const mxReply = rootNode.querySelector("mx-reply");
+    return (mxReply && mxReply.outerHTML) || "";
+}
+
+interface CreateMessageContentParams {
+    relation?: IEventRelation;
+    replyToEvent?: MatrixEvent;
+    permalinkCreator?: RoomPermalinkCreator;
+    includeReplyLegacyFallback?: boolean;
+    editedEvent?: MatrixEvent;
+}
+
+export function createMessageContent(
+    message: string,
+    { relation, replyToEvent, permalinkCreator, includeReplyLegacyFallback = true, editedEvent }:
+    CreateMessageContentParams,
+): IContent {
+    // TODO emote ?
+
+    const isReply = Boolean(replyToEvent?.replyEventId);
+    const isEditing = Boolean(editedEvent);
+
+    /*const isEmote = containsEmote(model);
+    if (isEmote) {
+        model = stripEmoteCommand(model);
+    }
+    if (startsWith(model, "//")) {
+        model = stripPrefix(model, "/");
+    }
+    model = unescapeMessage(model);*/
+
+    // const body = textSerialize(model);
+    const body = message;
+
+    const content: IContent = {
+        // TODO emote
+    //    msgtype: isEmote ? "m.emote" : "m.text",
+        msgtype: MsgType.Text,
+        body: body,
+    };
+
+    // TODO markdown support
+
+    /*const formattedBody = htmlSerializeIfNeeded(model, {
+        forceHTML: !!replyToEvent,
+        useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
+    });*/
+    const formattedBody = message;
+
+    if (formattedBody) {
+        content.format = "org.matrix.custom.html";
+
+        const htmlPrefix = isReply ? getHtmlReplyFallback(editedEvent) : '';
+        content.formatted_body = isEditing ? `${htmlPrefix} * ${formattedBody}` : formattedBody;
+
+        if (isEditing) {
+            content['m.new_content'] = {
+                "msgtype": content.msgtype,
+                "body": body,
+                "format": "org.matrix.custom.html",
+                'formatted_body': formattedBody,
+            };
+        }
+    }
+
+    const newRelation = isEditing ?
+        { ...relation, 'rel_type': 'm.replace', 'event_id': editedEvent.getId() }
+        : relation;
+
+    attachRelation(content, newRelation);
+
+    if (!isEditing && replyToEvent && permalinkCreator) {
+        addReplyToMessageContent(content, replyToEvent, {
+            permalinkCreator,
+            includeLegacyFallback: includeReplyLegacyFallback,
+        });
+    }
+
+    return content;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/editing.ts b/src/components/views/rooms/wysiwyg_composer/utils/editing.ts
new file mode 100644
index 00000000000..a0cb6083830
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/utils/editing.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { EventStatus, MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { IRoomState } from "../../../../structures/RoomView";
+import dis from '../../../../../dispatcher/dispatcher';
+import { Action } from "../../../../../dispatcher/actions";
+import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
+
+export function endEditing(roomContext: IRoomState) {
+    // todo local storage
+    // localStorage.removeItem(this.editorRoomKey);
+    // localStorage.removeItem(this.editorStateKey);
+
+    // close the event editing and focus composer
+    dis.dispatch({
+        action: Action.EditEvent,
+        event: null,
+        timelineRenderingType: roomContext.timelineRenderingType,
+    });
+    dis.dispatch({
+        action: Action.FocusSendMessageComposer,
+        context: roomContext.timelineRenderingType,
+    });
+}
+
+export function cancelPreviousPendingEdit(mxClient: MatrixClient, editorStateTransfer: EditorStateTransfer) {
+    const originalEvent = editorStateTransfer.getEvent();
+    const previousEdit = originalEvent.replacingEvent();
+    if (previousEdit && (
+        previousEdit.status === EventStatus.QUEUED ||
+        previousEdit.status === EventStatus.NOT_SENT
+    )) {
+        mxClient.cancelPendingEvent(previousEdit);
+    }
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/isContentModified.ts b/src/components/views/rooms/wysiwyg_composer/utils/isContentModified.ts
new file mode 100644
index 00000000000..88715dda385
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/utils/isContentModified.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { IContent } from "matrix-js-sdk/src/matrix";
+
+import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
+
+export function isContentModified(newContent: IContent, editorStateTransfer: EditorStateTransfer): boolean {
+    // if nothing has changed then bail
+    const oldContent = editorStateTransfer.getEvent().getContent();
+    if (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
+        oldContent["format"] === newContent["format"] &&
+        oldContent["formatted_body"] === newContent["formatted_body"]) {
+        return false;
+    }
+    return true;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/message.ts b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
similarity index 57%
rename from src/components/views/rooms/wysiwyg_composer/message.ts
rename to src/components/views/rooms/wysiwyg_composer/utils/message.ts
index 5569af02a95..0f4de2d8a30 100644
--- a/src/components/views/rooms/wysiwyg_composer/message.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
@@ -19,90 +19,32 @@ import { IContent, IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
-import { PosthogAnalytics } from "../../../../PosthogAnalytics";
-import SettingsStore from "../../../../settings/SettingsStore";
-import { decorateStartSendingTime, sendRoundTripMetric } from "../../../../sendTimePerformanceMetrics";
-import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
-import { doMaybeLocalRoomAction } from "../../../../utils/local-room";
-import { CHAT_EFFECTS } from "../../../../effects";
-import { containsEmoji } from "../../../../effects/utils";
-import { IRoomState } from "../../../structures/RoomView";
-import dis from '../../../../dispatcher/dispatcher';
-import { addReplyToMessageContent } from "../../../../utils/Reply";
-
-// Merges favouring the given relation
-function attachRelation(content: IContent, relation?: IEventRelation): void {
-    if (relation) {
-        content['m.relates_to'] = {
-            ...(content['m.relates_to'] || {}),
-            ...relation,
-        };
-    }
-}
+import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
+import SettingsStore from "../../../../../settings/SettingsStore";
+import { decorateStartSendingTime, sendRoundTripMetric } from "../../../../../sendTimePerformanceMetrics";
+import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
+import { doMaybeLocalRoomAction } from "../../../../../utils/local-room";
+import { CHAT_EFFECTS } from "../../../../../effects";
+import { containsEmoji } from "../../../../../effects/utils";
+import { IRoomState } from "../../../../structures/RoomView";
+import dis from '../../../../../dispatcher/dispatcher';
+import { createRedactEventDialog } from "../../../dialogs/ConfirmRedactDialog";
+import { endEditing, cancelPreviousPendingEdit } from "./editing";
+import EditorStateTransfer from "../../../../../utils/EditorStateTransfer";
+import { createMessageContent } from "./createMessageContent";
+import { isContentModified } from "./isContentModified";
 
 interface SendMessageParams {
     mxClient: MatrixClient;
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
     roomContext: IRoomState;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator?: RoomPermalinkCreator;
     includeReplyLegacyFallback?: boolean;
 }
 
-// exported for tests
-export function createMessageContent(
-    message: string,
-    { relation, replyToEvent, permalinkCreator, includeReplyLegacyFallback = true }:
-    Omit<SendMessageParams, 'roomContext' | 'mxClient'>,
-): IContent {
-    // TODO emote ?
-
-    /*const isEmote = containsEmote(model);
-    if (isEmote) {
-        model = stripEmoteCommand(model);
-    }
-    if (startsWith(model, "//")) {
-        model = stripPrefix(model, "/");
-    }
-    model = unescapeMessage(model);*/
-
-    // const body = textSerialize(model);
-    const body = message;
-
-    const content: IContent = {
-        // TODO emote
-    //    msgtype: isEmote ? "m.emote" : "m.text",
-        msgtype: "m.text",
-        body: body,
-    };
-
-    // TODO markdown support
-
-    /*const formattedBody = htmlSerializeIfNeeded(model, {
-        forceHTML: !!replyToEvent,
-        useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
-    });*/
-    const formattedBody = message;
-
-    if (formattedBody) {
-        content.format = "org.matrix.custom.html";
-        content.formatted_body = formattedBody;
-    }
-
-    attachRelation(content, relation);
-
-    if (replyToEvent) {
-        addReplyToMessageContent(content, replyToEvent, {
-            permalinkCreator,
-            includeLegacyFallback: includeReplyLegacyFallback,
-        });
-    }
-
-    return content;
-}
-
 export function sendMessage(
-    message: string,
+    html: string,
     { roomContext, mxClient, ...params }: SendMessageParams,
 ) {
     const { relation, replyToEvent } = params;
@@ -113,6 +55,7 @@ export function sendMessage(
         eventName: "Composer",
         isEditing: false,
         isReply: Boolean(replyToEvent),
+        // TODO thread
         inThread: relation?.rel_type === THREAD_RELATION_TYPE.name,
     };
 
@@ -133,7 +76,7 @@ export function sendMessage(
 
     if (!content) {
         content = createMessageContent(
-            message,
+            html,
             params,
         );
     }
@@ -197,3 +140,65 @@ export function sendMessage(
 
     return prom;
 }
+
+interface EditMessageParams {
+    mxClient: MatrixClient;
+    roomContext: IRoomState;
+    editorStateTransfer: EditorStateTransfer;
+}
+
+export function editMessage(
+    html: string,
+    { roomContext, mxClient, editorStateTransfer }: EditMessageParams,
+) {
+    const editedEvent = editorStateTransfer.getEvent();
+
+    PosthogAnalytics.instance.trackEvent<ComposerEvent>({
+        eventName: "Composer",
+        isEditing: true,
+        inThread: Boolean(editedEvent?.getThread()),
+        isReply: Boolean(editedEvent.replyEventId),
+    });
+
+    // Replace emoticon at the end of the message
+    /*    if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
+        const caret = this.editorRef.current?.getCaret();
+        const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
+        this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
+    }*/
+    const editContent = createMessageContent(html, { editedEvent });
+    const newContent = editContent["m.new_content"];
+
+    const shouldSend = true;
+
+    if (newContent?.body === '') {
+        cancelPreviousPendingEdit(mxClient, editorStateTransfer);
+        createRedactEventDialog({
+            mxEvent: editedEvent,
+            onCloseDialog: () => {
+                endEditing(roomContext);
+            },
+        });
+        return;
+    }
+
+    // If content is modified then send an updated event into the room
+    if (isContentModified(newContent, editorStateTransfer)) {
+        const roomId = editedEvent.getRoomId();
+
+        // TODO Slash Commands
+
+        if (shouldSend) {
+            cancelPreviousPendingEdit(mxClient, editorStateTransfer);
+
+            const event = editorStateTransfer.getEvent();
+            const threadId = event.threadRootId || null;
+
+            console.log('editContent', editContent);
+            mxClient.sendMessage(roomId, threadId, editContent);
+            dis.dispatch({ action: "message_sent" });
+        }
+    }
+
+    endEditing(roomContext);
+}
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 2b2e443e81d..7d2d935f705 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -75,6 +75,11 @@ export enum Action {
      */
     FocusSendMessageComposer = "focus_send_message_composer",
 
+    /**
+     * Clear the  to the send message composer. Should be used with a FocusComposerPayload.
+     */
+     ClearAndFocusSendMessageComposer = "clear_focus_send_message_composer",
+
     /**
      * Focuses the user's cursor to the edit message composer. Should be used with a FocusComposerPayload.
      */
diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index bc0b26f745a..596cf0bcfed 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -39,7 +39,7 @@ import { SendMessageComposer } from "../../../../src/components/views/rooms/Send
 import { E2EStatus } from "../../../../src/utils/ShieldUtils";
 import { addTextToComposer } from "../../../test-utils/composer";
 import UIStore, { UI_EVENTS } from "../../../../src/stores/UIStore";
-import { WysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer/WysiwygComposer";
+import { WysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
 // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
diff --git a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
index 6c3e8573ae4..a9838ecacaa 100644
--- a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 import { render, screen } from "@testing-library/react";
 import userEvent from '@testing-library/user-event';
 
-import { FormattingButtons } from "../../../../../src/components/views/rooms/wysiwyg_composer/FormattingButtons";
+import { FormattingButtons } from "../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 
 describe('FormattingButtons', () => {
     const wysiwyg = {
diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
index b0aa838879b..91020250ae7 100644
--- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
@@ -24,7 +24,7 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { Layout } from "../../../../../src/settings/enums/Layout";
-import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/WysiwygComposer";
+import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
diff --git a/test/components/views/rooms/wysiwyg_composer/message-test.ts b/test/components/views/rooms/wysiwyg_composer/message-test.ts
index 712b671c9f7..50f0f77c1ab 100644
--- a/test/components/views/rooms/wysiwyg_composer/message-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/message-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
-import { createMessageContent, sendMessage } from "../../../../../src/components/views/rooms/wysiwyg_composer/message";
+import { createMessageContent, sendMessage } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/message";
 import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";

From e946674df3be642eb06e17117390326d3d709df6 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Wed, 19 Oct 2022 13:07:03 +0100
Subject: [PATCH 009/113] Store refactor: use non-global stores in components
 (#9293)

* Add Stores and StoresContext and use it in MatrixChat and RoomView

Added a new kind of class:
- Add God object `Stores` which will hold refs to all known stores and the `MatrixClient`. This object is NOT a singleton.
- Add `StoresContext` to hold onto a ref of `Stores` for use inside components.

`StoresContext` is created via:
- Create `Stores` in `MatrixChat`, assigning the `MatrixClient` when we have one set. Currently sets the RVS to `RoomViewStore.instance`.
- Wrap `MatrixChat`s `render()` function in a `StoresContext.Provider` so it can be used anywhere.

`StoresContext` is currently only used in `RoomView` via the following changes:
- Remove the HOC, which redundantly set `mxClient` as a prop. We don't need this as `RoomView` was using the client from `this.context`.
- Change the type of context accepted from `MatrixClientContext` to `StoresContext`.
- Modify alllll the places where `this.context` is used to interact with the client and suffix `.client`.
- Modify places where we use `RoomViewStore.instance` and replace them with `this.context.roomViewStore`.

This makes `RoomView` use a non-global instance of RVS.

* Linting

* SDKContext and make client an optional constructor arg

* Move SDKContext to /src/contexts

* Inject all RVS deps

* Linting

* Remove reset calls; deep copy the INITIAL_STATE to avoid test pollution

* DI singletons used in RoomView; DI them in RoomView-test too

* Initial RoomViewStore.instance after all files are imported to avoid cyclical deps

* Lazily init stores to allow for circular dependencies

Rather than stores accepting a list of other stores in their constructors,
which doesn't work when A needs B and B needs A, make new-style stores simply
accept Stores. When a store needs another store, they access it via `Stores`
which then lazily constructs that store if it needs it. This breaks the
circular dependency at constructor time, without needing to introduce
wiring diagrams or any complex DI framework.

* Delete RoomViewStore.instance

Replaced with Stores.instance.roomViewStore

* Linting

* Move OverridableStores to test/TestStores

* Rejig how eager stores get made; don't automatically do it else tests break

* Linting

* Linting and review comments

* Fix new code to use Stores.instance

* s/Stores/SdkContextClass/g

* Update docs

* Remove unused imports

* Update src/stores/RoomViewStore.tsx

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

* Remove empty c'tor to make sonar happy

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/ContentMessages.ts                        |   4 +-
 src/Notifier.ts                               |   4 +-
 src/ScalarMessaging.ts                        |   4 +-
 src/SlashCommands.tsx                         |   8 +-
 src/audio/PlaybackQueue.ts                    |   4 +-
 src/components/structures/MatrixChat.tsx      |   9 +-
 src/components/structures/RoomView.tsx        | 239 +++++++++---------
 src/components/structures/SpaceHierarchy.tsx  |   4 +-
 src/components/structures/ThreadView.tsx      |   4 +-
 .../views/beacon/RoomCallBanner.tsx           |   4 +-
 .../views/context_menus/RoomContextMenu.tsx   |   6 +-
 .../dialogs/spotlight/SpotlightDialog.tsx     |   4 +-
 src/components/views/elements/AppTile.tsx     |   4 +-
 .../views/right_panel/TimelineCard.tsx        |  15 +-
 src/components/views/right_panel/UserInfo.tsx |   4 +-
 src/components/views/rooms/RoomList.tsx       |  10 +-
 src/components/views/rooms/RoomTile.tsx       |   8 +-
 .../views/spaces/QuickSettingsButton.tsx      |   4 +-
 src/components/views/voip/PipView.tsx         |  10 +-
 src/contexts/SDKContext.ts                    | 127 ++++++++++
 src/stores/RoomViewStore.tsx                  |  38 ++-
 src/stores/right-panel/RightPanelStore.ts     |   4 +-
 src/stores/room-list/RoomListStore.ts         |   6 +-
 src/stores/room-list/SlidingRoomListStore.ts  |  10 +-
 src/stores/spaces/SpaceStore.ts               |   8 +-
 src/stores/widgets/StopGapWidget.ts           |   6 +-
 src/stores/widgets/StopGapWidgetDriver.ts     |   8 +-
 src/utils/DialogOpener.ts                     |   6 +-
 src/utils/leave-behaviour.ts                  |   4 +-
 src/utils/space.tsx                           |   6 +-
 test/SlashCommands-test.tsx                   |   8 +-
 test/TestStores.ts                            |  44 ++++
 test/components/structures/RoomView-test.tsx  |  41 +--
 .../views/beacon/RoomCallBanner-test.tsx      |   5 +-
 ...ewStore-test.tsx => RoomViewStore-test.ts} |  68 +++--
 .../widgets/StopGapWidgetDriver-test.ts       |   4 +-
 36 files changed, 467 insertions(+), 275 deletions(-)
 create mode 100644 src/contexts/SDKContext.ts
 create mode 100644 test/TestStores.ts
 rename test/stores/{RoomViewStore-test.tsx => RoomViewStore-test.ts} (79%)

diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts
index d4cf3cc0ab5..8135eaab0ef 100644
--- a/src/ContentMessages.ts
+++ b/src/ContentMessages.ts
@@ -43,7 +43,6 @@ import { RoomUpload } from "./models/RoomUpload";
 import SettingsStore from "./settings/SettingsStore";
 import { decorateStartSendingTime, sendRoundTripMetric } from "./sendTimePerformanceMetrics";
 import { TimelineRenderingType } from "./contexts/RoomContext";
-import { RoomViewStore } from "./stores/RoomViewStore";
 import { addReplyToMessageContent } from "./utils/Reply";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import UploadFailureDialog from "./components/views/dialogs/UploadFailureDialog";
@@ -51,6 +50,7 @@ import UploadConfirmDialog from "./components/views/dialogs/UploadConfirmDialog"
 import { createThumbnail } from "./utils/image-media";
 import { attachRelation } from "./components/views/rooms/SendMessageComposer";
 import { doMaybeLocalRoomAction } from "./utils/local-room";
+import { SdkContextClass } from "./contexts/SDKContext";
 
 // scraped out of a macOS hidpi (5660ppm) screenshot png
 //                  5669 px (x-axis)      , 5669 px (y-axis)      , per metre
@@ -361,7 +361,7 @@ export default class ContentMessages {
             return;
         }
 
-        const replyToEvent = RoomViewStore.instance.getQuotingEvent();
+        const replyToEvent = SdkContextClass.instance.roomViewStore.getQuotingEvent();
         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(matrixClient);
diff --git a/src/Notifier.ts b/src/Notifier.ts
index dd0ebc296a2..cc84acb2fab 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -41,12 +41,12 @@ import SettingsStore from "./settings/SettingsStore";
 import { hideToast as hideNotificationsToast } from "./toasts/DesktopNotificationsToast";
 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 ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import LegacyCallHandler from "./LegacyCallHandler";
 import VoipUserMapper from "./VoipUserMapper";
+import { SdkContextClass } from "./contexts/SDKContext";
 import { localNotificationsAreSilenced } from "./utils/notifications";
 import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
 import ToastStore from "./stores/ToastStore";
@@ -435,7 +435,7 @@ export const Notifier = {
         if (actions?.notify) {
             this._performCustomEventHandling(ev);
 
-            if (RoomViewStore.instance.getRoomId() === room.roomId &&
+            if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId &&
                 UserActivity.sharedInstance().userActiveRecently() &&
                 !Modal.hasDialogs()
             ) {
diff --git a/src/ScalarMessaging.ts b/src/ScalarMessaging.ts
index c511d291ce2..72ff94d4d3f 100644
--- a/src/ScalarMessaging.ts
+++ b/src/ScalarMessaging.ts
@@ -272,12 +272,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClientPeg } from './MatrixClientPeg';
 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 { EffectiveMembership, getEffectiveMembership } from './utils/membership';
+import { SdkContextClass } from './contexts/SDKContext';
 
 enum Action {
     CloseScalar = "close_scalar",
@@ -721,7 +721,7 @@ const onMessage = function(event: MessageEvent<any>): void {
         }
     }
 
-    if (roomId !== RoomViewStore.instance.getRoomId()) {
+    if (roomId !== SdkContextClass.instance.roomViewStore.getRoomId()) {
         sendError(event, _t('Room %(roomId)s not visible', { roomId: roomId }));
         return;
     }
diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index bbd936ce756..624c515b153 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -62,7 +62,6 @@ import InfoDialog from "./components/views/dialogs/InfoDialog";
 import SlashCommandHelpDialog from "./components/views/dialogs/SlashCommandHelpDialog";
 import { shouldShowComponent } from "./customisations/helpers/UIComponents";
 import { TimelineRenderingType } from './contexts/RoomContext';
-import { RoomViewStore } from "./stores/RoomViewStore";
 import { XOR } from "./@types/common";
 import { PosthogAnalytics } from "./PosthogAnalytics";
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
@@ -70,6 +69,7 @@ import VoipUserMapper from './VoipUserMapper';
 import { htmlSerializeFromMdIfNeeded } from './editor/serialize';
 import { leaveRoomBehaviour } from "./utils/leave-behaviour";
 import { isLocalRoom } from './utils/localRoom/isLocalRoom';
+import { SdkContextClass } from './contexts/SDKContext';
 
 // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
 interface HTMLInputEvent extends Event {
@@ -209,7 +209,7 @@ function successSync(value: any) {
 
 const isCurrentLocalRoom = (): boolean => {
     const cli = MatrixClientPeg.get();
-    const room = cli.getRoom(RoomViewStore.instance.getRoomId());
+    const room = cli.getRoom(SdkContextClass.instance.roomViewStore.getRoomId());
     return isLocalRoom(room);
 };
 
@@ -868,7 +868,7 @@ export const Commands = [
         description: _td('Define the power level of a user'),
         isEnabled(): boolean {
             const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(RoomViewStore.instance.getRoomId());
+            const room = cli.getRoom(SdkContextClass.instance.roomViewStore.getRoomId());
             return room?.currentState.maySendStateEvent(EventType.RoomPowerLevels, cli.getUserId())
                 && !isLocalRoom(room);
         },
@@ -909,7 +909,7 @@ export const Commands = [
         description: _td('Deops user with given id'),
         isEnabled(): boolean {
             const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(RoomViewStore.instance.getRoomId());
+            const room = cli.getRoom(SdkContextClass.instance.roomViewStore.getRoomId());
             return room?.currentState.maySendStateEvent(EventType.RoomPowerLevels, cli.getUserId())
                 && !isLocalRoom(room);
         },
diff --git a/src/audio/PlaybackQueue.ts b/src/audio/PlaybackQueue.ts
index 72ed8cf1691..c5a6ee64f29 100644
--- a/src/audio/PlaybackQueue.ts
+++ b/src/audio/PlaybackQueue.ts
@@ -25,7 +25,7 @@ import { MatrixClientPeg } from "../MatrixClientPeg";
 import { arrayFastClone } from "../utils/arrays";
 import { PlaybackManager } from "./PlaybackManager";
 import { isVoiceMessage } from "../utils/EventUtils";
-import { RoomViewStore } from "../stores/RoomViewStore";
+import { SdkContextClass } from "../contexts/SDKContext";
 
 /**
  * Audio playback queue management for a given room. This keeps track of where the user
@@ -51,7 +51,7 @@ export class PlaybackQueue {
     constructor(private room: Room) {
         this.loadClocks();
 
-        RoomViewStore.instance.addRoomListener(this.room.roomId, (isActive) => {
+        SdkContextClass.instance.roomViewStore.addRoomListener(this.room.roomId, (isActive) => {
             if (!isActive) return;
 
             // Reset the state of the playbacks before they start mounting and enqueuing updates.
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 515355b63d9..06a73ff605f 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -137,6 +137,7 @@ import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { UseCaseSelection } from '../views/elements/UseCaseSelection';
 import { ValidatedServerConfig } from '../../utils/ValidatedServerConfig';
 import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
+import { SdkContextClass, SDKContext } from '../../contexts/SDKContext';
 import { viewUserDeviceSettings } from '../../actions/handlers/viewUserDeviceSettings';
 
 // legacy export
@@ -238,9 +239,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private readonly dispatcherRef: string;
     private readonly themeWatcher: ThemeWatcher;
     private readonly fontWatcher: FontWatcher;
+    private readonly stores: SdkContextClass;
 
     constructor(props: IProps) {
         super(props);
+        this.stores = SdkContextClass.instance;
+        this.stores.constructEagerStores();
 
         this.state = {
             view: Views.LOADING,
@@ -762,6 +766,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 Modal.createDialog(DialPadModal, {}, "mx_Dialog_dialPadWrapper");
                 break;
             case Action.OnLoggedIn:
+                this.stores.client = MatrixClientPeg.get();
                 if (
                     // Skip this handling for token login as that always calls onLoggedIn itself
                     !this.tokenLogin &&
@@ -2087,7 +2092,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         return <ErrorBoundary>
-            { view }
+            <SDKContext.Provider value={this.stores}>
+                { view }
+            </SDKContext.Provider>
         </ErrorBoundary>;
     }
 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 6425709ea74..77245e0eb81 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -44,21 +44,18 @@ import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import ResizeNotifier from '../../utils/ResizeNotifier';
 import ContentMessages from '../../ContentMessages';
 import Modal from '../../Modal';
-import LegacyCallHandler, { LegacyCallHandlerEvent } from '../../LegacyCallHandler';
+import { LegacyCallHandlerEvent } from '../../LegacyCallHandler';
 import dis, { defaultDispatcher } from '../../dispatcher/dispatcher';
 import * as Rooms from '../../Rooms';
 import eventSearch, { searchPagination } from '../../Searching';
 import MainSplit from './MainSplit';
 import RightPanel from './RightPanel';
-import { RoomViewStore } from '../../stores/RoomViewStore';
 import RoomScrollStateStore, { ScrollState } from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
 import SettingsStore from "../../settings/SettingsStore";
 import { Layout } from "../../settings/enums/Layout";
 import AccessibleButton from "../views/elements/AccessibleButton";
-import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
-import MatrixClientContext, { MatrixClientProps, withMatrixClientHOC } from "../../contexts/MatrixClientContext";
 import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@@ -76,12 +73,10 @@ import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import EffectsOverlay from "../views/elements/EffectsOverlay";
 import { containsEmoji } from '../../effects/utils';
 import { CHAT_EFFECTS } from '../../effects';
-import WidgetStore from "../../stores/WidgetStore";
 import { CallView } from "../views/voip/CallView";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import Notifier from "../../Notifier";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
-import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import { getKeyBindingsManager } from '../../KeyBindingsManager';
 import { objectHasDiff } from "../../utils/objects";
@@ -120,6 +115,7 @@ import { RoomStatusBarUnsentMessages } from './RoomStatusBarUnsentMessages';
 import { LargeLoader } from './LargeLoader';
 import { VoiceBroadcastInfoEventType } from '../../voice-broadcast';
 import { isVideoRoom } from '../../utils/video-rooms';
+import { SDKContext } from '../../contexts/SDKContext';
 import { CallStore, CallStoreEvent } from "../../stores/CallStore";
 import { Call } from "../../models/Call";
 
@@ -133,7 +129,7 @@ if (DEBUG) {
     debuglog = logger.log.bind(console);
 }
 
-interface IRoomProps extends MatrixClientProps {
+interface IRoomProps {
     threepidInvite: IThreepidInvite;
     oobData?: IOOBData;
 
@@ -381,13 +377,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private messagePanel: TimelinePanel;
     private roomViewBody = createRef<HTMLDivElement>();
 
-    static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    static contextType = SDKContext;
+    public context!: React.ContextType<typeof SDKContext>;
 
-    constructor(props: IRoomProps, context: React.ContextType<typeof MatrixClientContext>) {
+    constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
-        const llMembers = context.hasLazyLoadMembersEnabled();
+        const llMembers = context.client.hasLazyLoadMembersEnabled();
         this.state = {
             roomId: null,
             roomLoading: true,
@@ -422,7 +418,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             showJoinLeaves: true,
             showAvatarChanges: true,
             showDisplaynameChanges: true,
-            matrixClientIsReady: context?.isInitialSyncComplete(),
+            matrixClientIsReady: context.client?.isInitialSyncComplete(),
             mainSplitContentType: MainSplitContentType.Timeline,
             timelineRenderingType: TimelineRenderingType.Room,
             liveTimeline: undefined,
@@ -430,25 +426,25 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         };
 
         this.dispatcherRef = dis.register(this.onAction);
-        context.on(ClientEvent.Room, this.onRoom);
-        context.on(RoomEvent.Timeline, this.onRoomTimeline);
-        context.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
-        context.on(RoomEvent.Name, this.onRoomName);
-        context.on(RoomStateEvent.Events, this.onRoomStateEvents);
-        context.on(RoomStateEvent.Update, this.onRoomStateUpdate);
-        context.on(RoomEvent.MyMembership, this.onMyMembership);
-        context.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
-        context.on(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
-        context.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
-        context.on(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
-        context.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        context.client.on(ClientEvent.Room, this.onRoom);
+        context.client.on(RoomEvent.Timeline, this.onRoomTimeline);
+        context.client.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
+        context.client.on(RoomEvent.Name, this.onRoomName);
+        context.client.on(RoomStateEvent.Events, this.onRoomStateEvents);
+        context.client.on(RoomStateEvent.Update, this.onRoomStateUpdate);
+        context.client.on(RoomEvent.MyMembership, this.onMyMembership);
+        context.client.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
+        context.client.on(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
+        context.client.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
+        context.client.on(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
+        context.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
         // Start listening for RoomViewStore updates
-        RoomViewStore.instance.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        context.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
-        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
 
         WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
-        WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
+        context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
         CallStore.instance.on(CallStoreEvent.ActiveCalls, this.onActiveCalls);
 
@@ -501,16 +497,16 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             action: "appsDrawer",
             show: true,
         });
-        if (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) {
+        if (this.context.widgetLayoutStore.hasMaximisedWidget(this.state.room)) {
             // Show chat in right panel when a widget is maximised
-            RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline });
+            this.context.rightPanelStore.setCard({ phase: RightPanelPhases.Timeline });
         }
         this.checkWidgets(this.state.room);
     };
 
     private checkWidgets = (room: Room): void => {
         this.setState({
-            hasPinnedWidgets: WidgetLayoutStore.instance.hasPinnedWidgets(room),
+            hasPinnedWidgets: this.context.widgetLayoutStore.hasPinnedWidgets(room),
             mainSplitContentType: this.getMainSplitContentType(room),
             showApps: this.shouldShowApps(room),
         });
@@ -518,12 +514,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private getMainSplitContentType = (room: Room) => {
         if (
-            (SettingsStore.getValue("feature_group_calls") && RoomViewStore.instance.isViewingCall())
+            (SettingsStore.getValue("feature_group_calls") && this.context.roomViewStore.isViewingCall())
             || isVideoRoom(room)
         ) {
             return MainSplitContentType.Call;
         }
-        if (WidgetLayoutStore.instance.hasMaximisedWidget(room)) {
+        if (this.context.widgetLayoutStore.hasMaximisedWidget(room)) {
             return MainSplitContentType.MaximisedWidget;
         }
         return MainSplitContentType.Timeline;
@@ -534,7 +530,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             return;
         }
 
-        if (!initial && this.state.roomId !== RoomViewStore.instance.getRoomId()) {
+        if (!initial && this.state.roomId !== this.context.roomViewStore.getRoomId()) {
             // RoomView explicitly does not support changing what room
             // is being viewed: instead it should just be re-mounted when
             // switching rooms. Therefore, if the room ID changes, we
@@ -549,45 +545,45 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             return;
         }
 
-        const roomId = RoomViewStore.instance.getRoomId();
-        const room = this.context.getRoom(roomId);
+        const roomId = this.context.roomViewStore.getRoomId();
+        const room = this.context.client.getRoom(roomId);
 
         // This convoluted type signature ensures we get IntelliSense *and* correct typing
         const newState: Partial<IRoomState> & Pick<IRoomState, any> = {
             roomId,
-            roomAlias: RoomViewStore.instance.getRoomAlias(),
-            roomLoading: RoomViewStore.instance.isRoomLoading(),
-            roomLoadError: RoomViewStore.instance.getRoomLoadError(),
-            joining: RoomViewStore.instance.isJoining(),
-            replyToEvent: RoomViewStore.instance.getQuotingEvent(),
+            roomAlias: this.context.roomViewStore.getRoomAlias(),
+            roomLoading: this.context.roomViewStore.isRoomLoading(),
+            roomLoadError: this.context.roomViewStore.getRoomLoadError(),
+            joining: this.context.roomViewStore.isJoining(),
+            replyToEvent: this.context.roomViewStore.getQuotingEvent(),
             // we should only peek once we have a ready client
-            shouldPeek: this.state.matrixClientIsReady && RoomViewStore.instance.shouldPeek(),
+            shouldPeek: this.state.matrixClientIsReady && this.context.roomViewStore.shouldPeek(),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
             showRedactions: SettingsStore.getValue("showRedactions", roomId),
             showJoinLeaves: SettingsStore.getValue("showJoinLeaves", roomId),
             showAvatarChanges: SettingsStore.getValue("showAvatarChanges", roomId),
             showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
-            wasContextSwitch: RoomViewStore.instance.getWasContextSwitch(),
+            wasContextSwitch: this.context.roomViewStore.getWasContextSwitch(),
             mainSplitContentType: room === null ? undefined : this.getMainSplitContentType(room),
             initialEventId: null, // default to clearing this, will get set later in the method if needed
-            showRightPanel: RightPanelStore.instance.isOpenForRoom(roomId),
+            showRightPanel: this.context.rightPanelStore.isOpenForRoom(roomId),
             activeCall: CallStore.instance.getActiveCall(roomId),
         };
 
         if (
             this.state.mainSplitContentType !== MainSplitContentType.Timeline
             && newState.mainSplitContentType === MainSplitContentType.Timeline
-            && RightPanelStore.instance.isOpen
-            && RightPanelStore.instance.currentCard.phase === RightPanelPhases.Timeline
-            && RightPanelStore.instance.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline))
+            && this.context.rightPanelStore.isOpen
+            && this.context.rightPanelStore.currentCard.phase === RightPanelPhases.Timeline
+            && this.context.rightPanelStore.roomPhaseHistory.some(card => (card.phase === RightPanelPhases.Timeline))
         ) {
             // We're returning to the main timeline, so hide the right panel timeline
-            RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
-            RightPanelStore.instance.togglePanel(this.state.roomId ?? null);
+            this.context.rightPanelStore.setCard({ phase: RightPanelPhases.RoomSummary });
+            this.context.rightPanelStore.togglePanel(this.state.roomId ?? null);
             newState.showRightPanel = false;
         }
 
-        const initialEventId = RoomViewStore.instance.getInitialEventId();
+        const initialEventId = this.context.roomViewStore.getInitialEventId();
         if (initialEventId) {
             let initialEvent = room?.findEventById(initialEventId);
             // The event does not exist in the current sync data
@@ -600,7 +596,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             // becomes available to fetch a whole thread
             if (!initialEvent) {
                 initialEvent = await fetchInitialEvent(
-                    this.context,
+                    this.context.client,
                     roomId,
                     initialEventId,
                 );
@@ -616,21 +612,21 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     action: Action.ShowThread,
                     rootEvent: thread.rootEvent,
                     initialEvent,
-                    highlighted: RoomViewStore.instance.isInitialEventHighlighted(),
-                    scroll_into_view: RoomViewStore.instance.initialEventScrollIntoView(),
+                    highlighted: this.context.roomViewStore.isInitialEventHighlighted(),
+                    scroll_into_view: this.context.roomViewStore.initialEventScrollIntoView(),
                 });
             } else {
                 newState.initialEventId = initialEventId;
-                newState.isInitialEventHighlighted = RoomViewStore.instance.isInitialEventHighlighted();
-                newState.initialEventScrollIntoView = RoomViewStore.instance.initialEventScrollIntoView();
+                newState.isInitialEventHighlighted = this.context.roomViewStore.isInitialEventHighlighted();
+                newState.initialEventScrollIntoView = this.context.roomViewStore.initialEventScrollIntoView();
 
                 if (thread && initialEvent?.isThreadRoot) {
                     dis.dispatch<ShowThreadPayload>({
                         action: Action.ShowThread,
                         rootEvent: thread.rootEvent,
                         initialEvent,
-                        highlighted: RoomViewStore.instance.isInitialEventHighlighted(),
-                        scroll_into_view: RoomViewStore.instance.initialEventScrollIntoView(),
+                        highlighted: this.context.roomViewStore.isInitialEventHighlighted(),
+                        scroll_into_view: this.context.roomViewStore.initialEventScrollIntoView(),
                     });
                 }
             }
@@ -657,7 +653,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
             // Stop peeking because we have joined this room now
-            this.context.stopPeeking();
+            this.context.client.stopPeeking();
         }
 
         // Temporary logging to diagnose https://github.com/vector-im/element-web/issues/4307
@@ -674,7 +670,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // NB: This does assume that the roomID will not change for the lifetime of
         // the RoomView instance
         if (initial) {
-            newState.room = this.context.getRoom(newState.roomId);
+            newState.room = this.context.client.getRoom(newState.roomId);
             if (newState.room) {
                 newState.showApps = this.shouldShowApps(newState.room);
                 this.onRoomLoaded(newState.room);
@@ -784,7 +780,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     peekLoading: true,
                     isPeeking: true, // this will change to false if peeking fails
                 });
-                this.context.peekInRoom(roomId).then((room) => {
+                this.context.client.peekInRoom(roomId).then((room) => {
                     if (this.unmounted) {
                         return;
                     }
@@ -817,7 +813,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 });
             } else if (room) {
                 // Stop peeking because we have joined this room previously
-                this.context.stopPeeking();
+                this.context.client.stopPeeking();
                 this.setState({ isPeeking: false });
             }
         }
@@ -835,7 +831,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // Otherwise (in case the user set hideWidgetDrawer by clicking the button) follow the parameter.
         const isManuallyShown = hideWidgetDrawer ? hideWidgetDrawer === "false": true;
 
-        const widgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top);
+        const widgets = this.context.widgetLayoutStore.getContainerWidgets(room, Container.Top);
         return isManuallyShown && widgets.length > 0;
     }
 
@@ -848,7 +844,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             callState: callState,
         });
 
-        LegacyCallHandler.instance.on(LegacyCallHandlerEvent.CallState, this.onCallState);
+        this.context.legacyCallHandler.on(LegacyCallHandlerEvent.CallState, this.onCallState);
         window.addEventListener('beforeunload', this.onPageUnload);
     }
 
@@ -885,7 +881,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
 
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.onCallState);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallState, this.onCallState);
 
         // update the scroll map before we get unmounted
         if (this.state.roomId) {
@@ -893,47 +889,47 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
 
         if (this.state.shouldPeek) {
-            this.context.stopPeeking();
+            this.context.client.stopPeeking();
         }
 
         // stop tracking room changes to format permalinks
         this.stopAllPermalinkCreators();
 
         dis.unregister(this.dispatcherRef);
-        if (this.context) {
-            this.context.removeListener(ClientEvent.Room, this.onRoom);
-            this.context.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
-            this.context.removeListener(RoomEvent.TimelineReset, this.onRoomTimelineReset);
-            this.context.removeListener(RoomEvent.Name, this.onRoomName);
-            this.context.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-            this.context.removeListener(RoomEvent.MyMembership, this.onMyMembership);
-            this.context.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
-            this.context.removeListener(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
-            this.context.removeListener(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
-            this.context.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
-            this.context.removeListener(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
-            this.context.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        if (this.context.client) {
+            this.context.client.removeListener(ClientEvent.Room, this.onRoom);
+            this.context.client.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
+            this.context.client.removeListener(RoomEvent.TimelineReset, this.onRoomTimelineReset);
+            this.context.client.removeListener(RoomEvent.Name, this.onRoomName);
+            this.context.client.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
+            this.context.client.removeListener(RoomEvent.MyMembership, this.onMyMembership);
+            this.context.client.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
+            this.context.client.removeListener(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
+            this.context.client.removeListener(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
+            this.context.client.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
+            this.context.client.removeListener(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
+            this.context.client.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
 
-        RoomViewStore.instance.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        this.context.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
-        RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        this.context.rightPanelStore.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
-        WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
+        this.context.widgetStore.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
         this.props.resizeNotifier.off("isResizing", this.onIsResizing);
 
         if (this.state.room) {
-            WidgetLayoutStore.instance.off(
+            this.context.widgetLayoutStore.off(
                 WidgetLayoutStore.emissionForRoom(this.state.room),
                 this.onWidgetLayoutChange,
             );
         }
 
         CallStore.instance.off(CallStoreEvent.ActiveCalls, this.onActiveCalls);
-        LegacyCallHandler.instance.off(LegacyCallHandlerEvent.CallState, this.onCallState);
+        this.context.legacyCallHandler.off(LegacyCallHandlerEvent.CallState, this.onCallState);
 
         // cancel any pending calls to the throttled updated
         this.updateRoomMembers.cancel();
@@ -944,13 +940,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         if (this.viewsLocalRoom) {
             // clean up if this was a local room
-            this.props.mxClient.store.removeRoom(this.state.room.roomId);
+            this.context.client.store.removeRoom(this.state.room.roomId);
         }
     }
 
     private onRightPanelStoreUpdate = () => {
         this.setState({
-            showRightPanel: RightPanelStore.instance.isOpenForRoom(this.state.roomId),
+            showRightPanel: this.context.rightPanelStore.isOpenForRoom(this.state.roomId),
         });
     };
 
@@ -1017,7 +1013,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 break;
             case 'picture_snapshot':
                 ContentMessages.sharedInstance().sendContentListToRoom(
-                    [payload.file], this.state.room.roomId, null, this.context);
+                    [payload.file], this.state.room.roomId, null, this.context.client);
                 break;
             case 'notifier_enabled':
             case Action.UploadStarted:
@@ -1043,7 +1039,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case 'MatrixActions.sync':
                 if (!this.state.matrixClientIsReady) {
                     this.setState({
-                        matrixClientIsReady: this.context?.isInitialSyncComplete(),
+                        matrixClientIsReady: this.context.client?.isInitialSyncComplete(),
                     }, () => {
                         // send another "initial" RVS update to trigger peeking if needed
                         this.onRoomViewStoreUpdate(true);
@@ -1112,7 +1108,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private onLocalRoomEvent(roomId: string) {
         if (roomId !== this.state.room.roomId) return;
-        createRoomFromLocalRoom(this.props.mxClient, this.state.room as LocalRoom);
+        createRoomFromLocalRoom(this.context.client, this.state.room as LocalRoom);
     }
 
     private onRoomTimeline = (ev: MatrixEvent, room: Room | null, toStartOfTimeline: boolean, removed, data) => {
@@ -1145,7 +1141,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             this.handleEffects(ev);
         }
 
-        if (ev.getSender() !== this.context.credentials.userId) {
+        if (ev.getSender() !== this.context.client.credentials.userId) {
             // update unread count when scrolled up
             if (!this.state.searchResults && this.state.atEndOfLiveTimeline) {
                 // no change
@@ -1165,7 +1161,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     };
 
     private handleEffects = (ev: MatrixEvent) => {
-        const notifState = RoomNotificationStateStore.instance.getRoomState(this.state.room);
+        const notifState = this.context.roomNotificationStateStore.getRoomState(this.state.room);
         if (!notifState.isUnread) return;
 
         CHAT_EFFECTS.forEach(effect => {
@@ -1202,7 +1198,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private onRoomLoaded = (room: Room) => {
         if (this.unmounted) return;
         // Attach a widget store listener only when we get a room
-        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);
+        this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);
 
         this.calculatePeekRules(room);
         this.updatePreviewUrlVisibility(room);
@@ -1214,10 +1210,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         if (
             this.getMainSplitContentType(room) !== MainSplitContentType.Timeline
-            && RoomNotificationStateStore.instance.getRoomState(room).isUnread
+            && this.context.roomNotificationStateStore.getRoomState(room).isUnread
         ) {
             // Automatically open the chat panel to make unread messages easier to discover
-            RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline }, true, room.roomId);
+            this.context.rightPanelStore.setCard({ phase: RightPanelPhases.Timeline }, true, room.roomId);
         }
 
         this.setState({
@@ -1244,7 +1240,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private async loadMembersIfJoined(room: Room) {
         // lazy load members if enabled
-        if (this.context.hasLazyLoadMembersEnabled()) {
+        if (this.context.client.hasLazyLoadMembersEnabled()) {
             if (room && room.getMyMembership() === 'join') {
                 try {
                     await room.loadMembersIfNeeded();
@@ -1270,7 +1266,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     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';
+        const key = this.context.client.isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
         this.setState({
             showUrlPreview: SettingsStore.getValue(key, roomId),
         });
@@ -1283,7 +1279,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         // Detach the listener if the room is changing for some reason
         if (this.state.room) {
-            WidgetLayoutStore.instance.off(
+            this.context.widgetLayoutStore.off(
                 WidgetLayoutStore.emissionForRoom(this.state.room),
                 this.onWidgetLayoutChange,
             );
@@ -1320,15 +1316,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     };
 
     private async updateE2EStatus(room: Room) {
-        if (!this.context.isRoomEncrypted(room.roomId)) return;
+        if (!this.context.client.isRoomEncrypted(room.roomId)) return;
 
         // If crypto is not currently enabled, we aren't tracking devices at all,
         // so we don't know what the answer is. Let's error on the safe side and show
         // a warning for this case.
         let e2eStatus = E2EStatus.Warning;
-        if (this.context.isCryptoEnabled()) {
+        if (this.context.client.isCryptoEnabled()) {
             /* At this point, the user has encryption on and cross-signing on */
-            e2eStatus = await shieldStatusForRoom(this.context, room);
+            e2eStatus = await shieldStatusForRoom(this.context.client, room);
         }
 
         if (this.unmounted) return;
@@ -1374,7 +1370,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private updatePermissions(room: Room) {
         if (room) {
-            const me = this.context.getUserId();
+            const me = this.context.client.getUserId();
             const canReact = (
                 room.getMyMembership() === "join" &&
                 room.currentState.maySendEvent(EventType.Reaction, me)
@@ -1442,7 +1438,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private onJoinButtonClicked = () => {
         // If the user is a ROU, allow them to transition to a PWLU
-        if (this.context?.isGuest()) {
+        if (this.context.client?.isGuest()) {
             // Join this room once the user has registered and logged in
             // (If we failed to peek, we may not have a valid room object.)
             dis.dispatch<DoAfterSyncPreparedPayload<ViewRoomPayload>>({
@@ -1499,13 +1495,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     };
 
     private injectSticker(url: string, info: object, text: string, threadId: string | null) {
-        if (this.context.isGuest()) {
+        if (this.context.client.isGuest()) {
             dis.dispatch({ action: 'require_registration' });
             return;
         }
 
         ContentMessages.sharedInstance()
-            .sendStickerContentToRoom(url, this.state.room.roomId, threadId, info, text, this.context)
+            .sendStickerContentToRoom(url, this.state.room.roomId, threadId, info, text, this.context.client)
             .then(undefined, (error) => {
                 if (error.name === "UnknownDeviceError") {
                     // Let the staus bar handle this
@@ -1578,7 +1574,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 return b.length - a.length;
             });
 
-            if (this.context.supportsExperimentalThreads()) {
+            if (this.context.client.supportsExperimentalThreads()) {
                 // Process all thread roots returned in this batch of search results
                 // XXX: This won't work for results coming from Seshat which won't include the bundled relationship
                 for (const result of results.results) {
@@ -1586,7 +1582,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         const bundledRelationship = event
                             .getServerAggregatedRelation<IThreadBundledRelationship>(THREAD_RELATION_TYPE.name);
                         if (!bundledRelationship || event.getThread()) continue;
-                        const room = this.context.getRoom(event.getRoomId());
+                        const room = this.context.client.getRoom(event.getRoomId());
                         const thread = room.findThreadForEvent(event);
                         if (thread) {
                             event.setThread(thread);
@@ -1658,7 +1654,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
             const mxEv = result.context.getEvent();
             const roomId = mxEv.getRoomId();
-            const room = this.context.getRoom(roomId);
+            const room = this.context.client.getRoom(roomId);
             if (!room) {
                 // if we do not have the room in js-sdk stores then hide it as we cannot easily show it
                 // As per the spec, an all rooms search can create this condition,
@@ -1715,7 +1711,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.setState({
             rejecting: true,
         });
-        this.context.leave(this.state.roomId).then(() => {
+        this.context.client.leave(this.state.roomId).then(() => {
             dis.dispatch({ action: Action.ViewHomePage });
             this.setState({
                 rejecting: false,
@@ -1742,13 +1738,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
 
         try {
-            const myMember = this.state.room.getMember(this.context.getUserId());
+            const myMember = this.state.room.getMember(this.context.client.getUserId());
             const inviteEvent = myMember.events.member;
-            const ignoredUsers = this.context.getIgnoredUsers();
+            const ignoredUsers = this.context.client.getIgnoredUsers();
             ignoredUsers.push(inviteEvent.getSender()); // de-duped internally in the js-sdk
-            await this.context.setIgnoredUsers(ignoredUsers);
+            await this.context.client.setIgnoredUsers(ignoredUsers);
 
-            await this.context.leave(this.state.roomId);
+            await this.context.client.leave(this.state.roomId);
             dis.dispatch({ action: Action.ViewHomePage });
             this.setState({
                 rejecting: false,
@@ -1911,7 +1907,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (!this.state.room) {
             return null;
         }
-        return LegacyCallHandler.instance.getCallForRoom(this.state.room.roomId);
+        return this.context.legacyCallHandler.getCallForRoom(this.state.room.roomId);
     }
 
     // this has to be a proper method rather than an unnamed function,
@@ -1924,7 +1920,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const createEvent = this.state.room.currentState.getStateEvents(EventType.RoomCreate, "");
         if (!createEvent || !createEvent.getContent()['predecessor']) return null;
 
-        return this.context.getRoom(createEvent.getContent()['predecessor']['room_id']);
+        return this.context.client.getRoom(createEvent.getContent()['predecessor']['room_id']);
     }
 
     getHiddenHighlightCount() {
@@ -1953,7 +1949,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         Array.from(dataTransfer.files),
         this.state.room?.roomId ?? this.state.roomId,
         null,
-        this.context,
+        this.context.client,
         TimelineRenderingType.Room,
     );
 
@@ -1970,7 +1966,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     }
 
     private renderLocalRoomCreateLoader(): ReactElement {
-        const names = this.state.room.getDefaultRoomName(this.props.mxClient.getUserId());
+        const names = this.state.room.getDefaultRoomName(this.context.client.getUserId());
         return <RoomContext.Provider value={this.state}>
             <LocalRoomCreateLoader
                 names={names}
@@ -2081,7 +2077,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     </ErrorBoundary>
                 );
             } else {
-                const myUserId = this.context.credentials.userId;
+                const myUserId = this.context.client.credentials.userId;
                 const myMember = this.state.room.getMember(myUserId);
                 const inviteEvent = myMember ? myMember.events.member : null;
                 let inviterName = _t("Unknown");
@@ -2162,7 +2158,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showRoomUpgradeBar = (
             roomVersionRecommendation &&
             roomVersionRecommendation.needsUpgrade &&
-            this.state.room.userMayUpgradeRoom(this.context.credentials.userId)
+            this.state.room.userMayUpgradeRoom(this.context.client.credentials.userId)
         );
 
         const hiddenHighlightCount = this.getHiddenHighlightCount();
@@ -2174,7 +2170,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 searchInProgress={this.state.searchInProgress}
                 onCancelClick={this.onCancelSearchClick}
                 onSearch={this.onSearch}
-                isRoomEncrypted={this.context.isRoomEncrypted(this.state.room.roomId)}
+                isRoomEncrypted={this.context.client.isRoomEncrypted(this.state.room.roomId)}
             />;
         } else if (showRoomUpgradeBar) {
             aux = <RoomUpgradeWarningBar room={this.state.room} />;
@@ -2236,7 +2232,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const auxPanel = (
             <AuxPanel
                 room={this.state.room}
-                userId={this.context.credentials.userId}
+                userId={this.context.client.credentials.userId}
                 showApps={this.state.showApps}
                 resizeNotifier={this.props.resizeNotifier}
             >
@@ -2397,7 +2393,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 mainSplitBody = <>
                     <AppsDrawer
                         room={this.state.room}
-                        userId={this.context.credentials.userId}
+                        userId={this.context.client.credentials.userId}
                         resizeNotifier={this.props.resizeNotifier}
                         showApps={true}
                     />
@@ -2451,7 +2447,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 onAppsClick = null;
                 onForgetClick = null;
                 onSearchClick = null;
-                if (this.state.room.canInvite(this.context.credentials.userId)) {
+                if (this.state.room.canInvite(this.context.client.credentials.userId)) {
                     onInviteClick = this.onInviteClick;
                 }
                 viewingCall = true;
@@ -2493,5 +2489,4 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     }
 }
 
-const RoomViewWithMatrixClient = withMatrixClientHOC(RoomView);
-export default RoomViewWithMatrixClient;
+export default RoomView;
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 7336dfeb0cf..00ebfdacce0 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -60,13 +60,13 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { useTypedEventEmitterState } from "../../hooks/useEventEmitter";
 import { IOOBData } from "../../stores/ThreepidInviteStore";
 import { awaitRoomDownSync } from "../../utils/RoomUpgrade";
-import { RoomViewStore } from "../../stores/RoomViewStore";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { Alignment } from "../views/elements/Tooltip";
 import { getTopic } from "../../hooks/room/useTopic";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 interface IProps {
     space: Room;
@@ -378,7 +378,7 @@ export const joinRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: st
             metricsTrigger: "SpaceHierarchy",
         });
     }, err => {
-        RoomViewStore.instance.showJoinRoomError(err, roomId);
+        SdkContextClass.instance.roomViewStore.showJoinRoomError(err, roomId);
     });
 
     return prom;
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 042b8b3b924..a7b4ab10c8f 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -51,10 +51,10 @@ import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import Measured from '../views/elements/Measured';
 import PosthogTrackers from "../../PosthogTrackers";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
-import { RoomViewStore } from '../../stores/RoomViewStore';
 import Spinner from "../views/elements/Spinner";
 import { ComposerInsertPayload, ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
 import Heading from '../views/typography/Heading';
+import { SdkContextClass } from '../../contexts/SDKContext';
 
 interface IProps {
     room: Room;
@@ -113,7 +113,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         room.removeListener(ThreadEvent.New, this.onNewThread);
         SettingsStore.unwatchSetting(this.layoutWatcherRef);
 
-        const hasRoomChanged = RoomViewStore.instance.getRoomId() !== roomId;
+        const hasRoomChanged = SdkContextClass.instance.roomViewStore.getRoomId() !== roomId;
         if (this.props.isInitialEventHighlighted && !hasRoomChanged) {
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
diff --git a/src/components/views/beacon/RoomCallBanner.tsx b/src/components/views/beacon/RoomCallBanner.tsx
index 736c88649f1..6085fe141b3 100644
--- a/src/components/views/beacon/RoomCallBanner.tsx
+++ b/src/components/views/beacon/RoomCallBanner.tsx
@@ -24,13 +24,13 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import { Call, ConnectionState, ElementCall } from "../../../models/Call";
 import { useCall } from "../../../hooks/useCall";
-import { RoomViewStore } from "../../../stores/RoomViewStore";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import {
     OwnBeaconStore,
     OwnBeaconStoreEvent,
 } from "../../../stores/OwnBeaconStore";
 import { CallDurationFromEvent } from "../voip/CallDuration";
+import { SdkContextClass } from "../../../contexts/SDKContext";
 
 interface RoomCallBannerProps {
     roomId: Room["roomId"];
@@ -114,7 +114,7 @@ const RoomCallBanner: React.FC<Props> = ({ roomId }) => {
     }
 
     // Check if the call is already showing. No banner is needed in this case.
-    if (RoomViewStore.instance.isViewingCall()) {
+    if (SdkContextClass.instance.roomViewStore.isViewingCall()) {
         return null;
     }
 
diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx
index b9923d92782..aadfd2d2688 100644
--- a/src/components/views/context_menus/RoomContextMenu.tsx
+++ b/src/components/views/context_menus/RoomContextMenu.tsx
@@ -37,7 +37,6 @@ import Modal from "../../../Modal";
 import ExportDialog from "../dialogs/ExportDialog";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import { usePinnedEvents } from "../right_panel/PinnedMessagesCard";
-import { RoomViewStore } from "../../../stores/RoomViewStore";
 import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import { ROOM_NOTIFICATIONS_TAB } from "../dialogs/RoomSettingsDialog";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@@ -50,6 +49,7 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import SettingsStore from "../../../settings/SettingsStore";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
+import { SdkContextClass } from "../../../contexts/SDKContext";
 
 interface IProps extends IContextMenuProps {
     room: Room;
@@ -332,7 +332,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
     };
 
     const ensureViewingRoom = (ev: ButtonEvent) => {
-        if (RoomViewStore.instance.getRoomId() === room.roomId) return;
+        if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId) return;
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             room_id: room.roomId,
@@ -377,7 +377,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
                     ev.stopPropagation();
 
                     Modal.createDialog(DevtoolsDialog, {
-                        roomId: RoomViewStore.instance.getRoomId(),
+                        roomId: SdkContextClass.instance.roomViewStore.getRoomId(),
                     }, "mx_DevtoolsDialog_wrapper");
                     onFinished();
                 }}
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index b04299869c1..dfec2ab5097 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -66,7 +66,7 @@ import { BreadcrumbsStore } from "../../../../stores/BreadcrumbsStore";
 import { RoomNotificationState } from "../../../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../../../stores/notifications/RoomNotificationStateStore";
 import { RecentAlgorithm } from "../../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
-import { RoomViewStore } from "../../../../stores/RoomViewStore";
+import { SdkContextClass } from "../../../../contexts/SDKContext";
 import { getMetaSpaceName } from "../../../../stores/spaces";
 import SpaceStore from "../../../../stores/spaces/SpaceStore";
 import { DirectoryMember, Member, startDmOnFirstMessage } from "../../../../utils/direct-messages";
@@ -1060,7 +1060,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 </h4>
                 <div>
                     { BreadcrumbsStore.instance.rooms
-                        .filter(r => r.roomId !== RoomViewStore.instance.getRoomId())
+                        .filter(r => r.roomId !== SdkContextClass.instance.roomViewStore.getRoomId())
                         .map(room => (
                             <TooltipOption
                                 id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index ae37889180b..7480774c05a 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -43,13 +43,13 @@ import { IApp } from "../../../stores/WidgetStore";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { OwnProfileStore } from '../../../stores/OwnProfileStore';
 import { UPDATE_EVENT } from '../../../stores/AsyncStore';
-import { RoomViewStore } from '../../../stores/RoomViewStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { Action } from '../../../dispatcher/actions';
 import { ElementWidgetCapabilities } from '../../../stores/widgets/ElementWidgetCapabilities';
 import { WidgetMessagingStore } from '../../../stores/widgets/WidgetMessagingStore';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 interface IProps {
     app: IApp;
@@ -175,7 +175,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         );
         if (isActiveWidget) {
             // We just left the room that the active widget was from.
-            if (this.props.room && RoomViewStore.instance.getRoomId() !== this.props.room.roomId) {
+            if (this.props.room && SdkContextClass.instance.roomViewStore.getRoomId() !== this.props.room.roomId) {
                 // If we are not actively looking at the room then destroy this widget entirely.
                 this.endWidgetActions();
             } else if (WidgetType.JITSI.matches(this.props.app.type)) {
diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx
index f1eea5ad491..c88a47406a1 100644
--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@@ -33,7 +33,6 @@ import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { ActionPayload } from '../../../dispatcher/payloads';
 import { Action } from '../../../dispatcher/actions';
-import { RoomViewStore } from '../../../stores/RoomViewStore';
 import ContentMessages from '../../../ContentMessages';
 import UploadBar from '../../structures/UploadBar';
 import SettingsStore from '../../../settings/SettingsStore';
@@ -42,6 +41,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import Measured from '../elements/Measured';
 import Heading from '../typography/Heading';
 import { UPDATE_EVENT } from '../../../stores/AsyncStore';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 interface IProps {
     room: Room;
@@ -91,7 +91,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
-        RoomViewStore.instance.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this.onAction);
         this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null, (...[,,, value]) =>
             this.setState({ showReadReceipts: value as boolean }),
@@ -102,7 +102,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount(): void {
-        RoomViewStore.instance.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
         if (this.readReceiptsSettingWatcher) {
             SettingsStore.unwatchSetting(this.readReceiptsSettingWatcher);
@@ -116,12 +116,9 @@ export default class TimelineCard extends React.Component<IProps, IState> {
 
     private onRoomViewStoreUpdate = async (initial?: boolean): Promise<void> => {
         const newState: Pick<IState, any> = {
-            // roomLoading: RoomViewStore.instance.isRoomLoading(),
-            // roomLoadError: RoomViewStore.instance.getRoomLoadError(),
-
-            initialEventId: RoomViewStore.instance.getInitialEventId(),
-            isInitialEventHighlighted: RoomViewStore.instance.isInitialEventHighlighted(),
-            replyToEvent: RoomViewStore.instance.getQuotingEvent(),
+            initialEventId: SdkContextClass.instance.roomViewStore.getInitialEventId(),
+            isInitialEventHighlighted: SdkContextClass.instance.roomViewStore.isInitialEventHighlighted(),
+            replyToEvent: SdkContextClass.instance.roomViewStore.getQuotingEvent(),
         };
 
         this.setState(newState);
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 810ae48dd71..49201d52bce 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -36,7 +36,6 @@ import { _t } from '../../../languageHandler';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
-import { RoomViewStore } from "../../../stores/RoomViewStore";
 import MultiInviter from "../../../utils/MultiInviter";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import E2EIcon from "../rooms/E2EIcon";
@@ -77,6 +76,7 @@ import UserIdentifierCustomisations from '../../../customisations/UserIdentifier
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { DirectoryMember, startDmOnFirstMessage } from '../../../utils/direct-messages';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 export interface IDevice {
     deviceId: string;
@@ -412,7 +412,7 @@ const UserOptionsSection: React.FC<{
         }
 
         if (canInvite && (member?.membership ?? 'leave') === 'leave' && shouldShowComponent(UIComponent.InviteUsers)) {
-            const roomId = member && member.roomId ? member.roomId : RoomViewStore.instance.getRoomId();
+            const roomId = member && member.roomId ? member.roomId : SdkContextClass.instance.roomViewStore.getRoomId();
             const onInviteUserButton = async (ev: ButtonEvent) => {
                 try {
                     // We use a MultiInviter to re-use the invite logic, even though we're only inviting one user.
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 13b1011088d..0cd38f7b30d 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -38,7 +38,6 @@ import { ITagMap } from "../../../stores/room-list/algorithms/models";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
-import { RoomViewStore } from "../../../stores/RoomViewStore";
 import {
     isMetaSpace,
     ISuggestedRoom,
@@ -62,6 +61,7 @@ import IconizedContextMenu, {
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ExtraTile from "./ExtraTile";
 import RoomSublist, { IAuxButtonProps } from "./RoomSublist";
+import { SdkContextClass } from "../../../contexts/SDKContext";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void;
@@ -421,7 +421,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     public componentDidMount(): void {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RoomViewStore.instance.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         SpaceStore.instance.on(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
         this.favouriteMessageWatcher =
@@ -436,19 +436,19 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
         SettingsStore.unwatchSetting(this.favouriteMessageWatcher);
         defaultDispatcher.unregister(this.dispatcherRef);
-        RoomViewStore.instance.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
     }
 
     private onRoomViewStoreUpdate = () => {
         this.setState({
-            currentRoomId: RoomViewStore.instance.getRoomId(),
+            currentRoomId: SdkContextClass.instance.roomViewStore.getRoomId(),
         });
     };
 
     private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.ViewRoomDelta) {
             const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
-            const currentRoomId = RoomViewStore.instance.getRoomId();
+            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
             const room = this.getRoomDelta(currentRoomId, viewRoomDeltaPayload.delta, viewRoomDeltaPayload.unread);
             if (room) {
                 defaultDispatcher.dispatch<ViewRoomPayload>({
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 219295d23dc..68f4dfe4de2 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -44,10 +44,10 @@ import PosthogTrackers from "../../../PosthogTrackers";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { RoomViewStore } from "../../../stores/RoomViewStore";
 import { RoomTileCallSummary } from "./RoomTileCallSummary";
 import { RoomGeneralContextMenu } from "../context_menus/RoomGeneralContextMenu";
 import { CallStore, CallStoreEvent } from "../../../stores/CallStore";
+import { SdkContextClass } from "../../../contexts/SDKContext";
 
 interface IProps {
     room: Room;
@@ -86,7 +86,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            selected: RoomViewStore.instance.getRoomId() === this.props.room.roomId,
+            selected: SdkContextClass.instance.roomViewStore.getRoomId() === this.props.room.roomId,
             notificationsMenuPosition: null,
             generalMenuPosition: null,
             call: CallStore.instance.getCall(this.props.room.roomId),
@@ -146,7 +146,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             this.scrollIntoView();
         }
 
-        RoomViewStore.instance.addRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        SdkContextClass.instance.roomViewStore.addRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         MessagePreviewStore.instance.on(
             MessagePreviewStore.getPreviewChangedEventName(this.props.room),
@@ -163,7 +163,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        RoomViewStore.instance.removeRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
+        SdkContextClass.instance.roomViewStore.removeRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
         MessagePreviewStore.instance.off(
             MessagePreviewStore.getPreviewChangedEventName(this.props.room),
             this.onRoomPreviewChanged,
diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx
index 2f4ee9315f3..eb7244f9943 100644
--- a/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/src/components/views/spaces/QuickSettingsButton.tsx
@@ -36,7 +36,7 @@ import { Icon as FavoriteIcon } from '../../../../res/img/element-icons/roomlist
 import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
-import { RoomViewStore } from "../../../stores/RoomViewStore";
+import { SdkContextClass } from "../../../contexts/SDKContext";
 
 const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
@@ -72,7 +72,7 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
                     onClick={() => {
                         closeMenu();
                         Modal.createDialog(DevtoolsDialog, {
-                            roomId: RoomViewStore.instance.getRoomId(),
+                            roomId: SdkContextClass.instance.roomViewStore.getRoomId(),
                         }, "mx_DevtoolsDialog_wrapper");
                     }}
                     kind="danger_outline"
diff --git a/src/components/views/voip/PipView.tsx b/src/components/views/voip/PipView.tsx
index 0bebfe1bf32..3aaa9ac4308 100644
--- a/src/components/views/voip/PipView.tsx
+++ b/src/components/views/voip/PipView.tsx
@@ -21,7 +21,6 @@ import classNames from 'classnames';
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import LegacyCallView from "./LegacyCallView";
-import { RoomViewStore } from '../../../stores/RoomViewStore';
 import LegacyCallHandler, { LegacyCallHandlerEvent } from '../../../LegacyCallHandler';
 import PersistentApp from "../elements/PersistentApp";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -34,6 +33,7 @@ import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/Activ
 import WidgetStore, { IApp } from "../../../stores/WidgetStore";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { UPDATE_EVENT } from '../../../stores/AsyncStore';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 import { CallStore } from "../../../stores/CallStore";
 import {
     VoiceBroadcastRecording,
@@ -129,7 +129,7 @@ class PipView extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
-        const roomId = RoomViewStore.instance.getRoomId();
+        const roomId = SdkContextClass.instance.roomViewStore.getRoomId();
 
         const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(roomId);
 
@@ -147,7 +147,7 @@ class PipView extends React.Component<IProps, IState> {
     public componentDidMount() {
         LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
         LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
-        RoomViewStore.instance.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         MatrixClientPeg.get().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
         const room = MatrixClientPeg.get()?.getRoom(this.state.viewedRoomId);
         if (room) {
@@ -164,7 +164,7 @@ class PipView extends React.Component<IProps, IState> {
         LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
         const cli = MatrixClientPeg.get();
         cli?.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
-        RoomViewStore.instance.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SdkContextClass.instance.roomViewStore.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         const room = cli?.getRoom(this.state.viewedRoomId);
         if (room) {
             WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
@@ -186,7 +186,7 @@ class PipView extends React.Component<IProps, IState> {
     private onMove = () => this.movePersistedElement.current?.();
 
     private onRoomViewStoreUpdate = () => {
-        const newRoomId = RoomViewStore.instance.getRoomId();
+        const newRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
         const oldRoomId = this.state.viewedRoomId;
         if (newRoomId === oldRoomId) return;
         // The WidgetLayoutStore observer always tracks the currently viewed Room,
diff --git a/src/contexts/SDKContext.ts b/src/contexts/SDKContext.ts
new file mode 100644
index 00000000000..61905dca926
--- /dev/null
+++ b/src/contexts/SDKContext.ts
@@ -0,0 +1,127 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { createContext } from "react";
+
+import defaultDispatcher from "../dispatcher/dispatcher";
+import LegacyCallHandler from "../LegacyCallHandler";
+import { PosthogAnalytics } from "../PosthogAnalytics";
+import { SlidingSyncManager } from "../SlidingSyncManager";
+import { RoomNotificationStateStore } from "../stores/notifications/RoomNotificationStateStore";
+import RightPanelStore from "../stores/right-panel/RightPanelStore";
+import { RoomViewStore } from "../stores/RoomViewStore";
+import SpaceStore, { SpaceStoreClass } from "../stores/spaces/SpaceStore";
+import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
+import WidgetStore from "../stores/WidgetStore";
+
+export const SDKContext = createContext<SdkContextClass>(undefined);
+SDKContext.displayName = "SDKContext";
+
+/**
+ * A class which lazily initialises stores as and when they are requested, ensuring they remain
+ * as singletons scoped to this object.
+ */
+export class SdkContextClass {
+    /**
+     * The global SdkContextClass instance. This is a temporary measure whilst so many stores remain global
+     * as well. Over time, these stores should accept a `SdkContextClass` instance in their constructor.
+     * When all stores do this, this static variable can be deleted.
+     */
+    public static readonly instance = new SdkContextClass();
+
+    // Optional as we don't have a client on initial load if unregistered. This should be set
+    // when the MatrixClient is first acquired in the dispatcher event Action.OnLoggedIn.
+    // It is only safe to set this once, as updating this value will NOT notify components using
+    // this Context.
+    public client?: MatrixClient;
+
+    // All protected fields to make it easier to derive test stores
+    protected _RightPanelStore?: RightPanelStore;
+    protected _RoomNotificationStateStore?: RoomNotificationStateStore;
+    protected _RoomViewStore?: RoomViewStore;
+    protected _WidgetLayoutStore?: WidgetLayoutStore;
+    protected _WidgetStore?: WidgetStore;
+    protected _PosthogAnalytics?: PosthogAnalytics;
+    protected _SlidingSyncManager?: SlidingSyncManager;
+    protected _SpaceStore?: SpaceStoreClass;
+    protected _LegacyCallHandler?: LegacyCallHandler;
+
+    /**
+     * Automatically construct stores which need to be created eagerly so they can register with
+     * the dispatcher.
+     */
+    public constructEagerStores() {
+        this._RoomViewStore = this.roomViewStore;
+    }
+
+    public get legacyCallHandler(): LegacyCallHandler {
+        if (!this._LegacyCallHandler) {
+            this._LegacyCallHandler = LegacyCallHandler.instance;
+        }
+        return this._LegacyCallHandler;
+    }
+    public get rightPanelStore(): RightPanelStore {
+        if (!this._RightPanelStore) {
+            this._RightPanelStore = RightPanelStore.instance;
+        }
+        return this._RightPanelStore;
+    }
+    public get roomNotificationStateStore(): RoomNotificationStateStore {
+        if (!this._RoomNotificationStateStore) {
+            this._RoomNotificationStateStore = RoomNotificationStateStore.instance;
+        }
+        return this._RoomNotificationStateStore;
+    }
+    public get roomViewStore(): RoomViewStore {
+        if (!this._RoomViewStore) {
+            this._RoomViewStore = new RoomViewStore(
+                defaultDispatcher, this,
+            );
+        }
+        return this._RoomViewStore;
+    }
+    public get widgetLayoutStore(): WidgetLayoutStore {
+        if (!this._WidgetLayoutStore) {
+            this._WidgetLayoutStore = WidgetLayoutStore.instance;
+        }
+        return this._WidgetLayoutStore;
+    }
+    public get widgetStore(): WidgetStore {
+        if (!this._WidgetStore) {
+            this._WidgetStore = WidgetStore.instance;
+        }
+        return this._WidgetStore;
+    }
+    public get posthogAnalytics(): PosthogAnalytics {
+        if (!this._PosthogAnalytics) {
+            this._PosthogAnalytics = PosthogAnalytics.instance;
+        }
+        return this._PosthogAnalytics;
+    }
+    public get slidingSyncManager(): SlidingSyncManager {
+        if (!this._SlidingSyncManager) {
+            this._SlidingSyncManager = SlidingSyncManager.instance;
+        }
+        return this._SlidingSyncManager;
+    }
+    public get spaceStore(): SpaceStoreClass {
+        if (!this._SpaceStore) {
+            this._SpaceStore = SpaceStore.instance;
+        }
+        return this._SpaceStore;
+    }
+}
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index 0a15ce18607..b3814f7a324 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 */
 
 import React, { ReactNode } from "react";
+import * as utils from 'matrix-js-sdk/src/utils';
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ViewRoom as ViewRoomEvent } from "@matrix-org/analytics-events/types/typescript/ViewRoom";
@@ -27,7 +28,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Optional } from "matrix-events-sdk";
 import EventEmitter from "events";
 
-import { defaultDispatcher, MatrixDispatcher } from '../dispatcher/dispatcher';
+import { MatrixDispatcher } from '../dispatcher/dispatcher';
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import Modal from '../Modal';
 import { _t } from '../languageHandler';
@@ -35,10 +36,8 @@ import { getCachedRoomIDForAlias, storeRoomAliasInCache } from '../RoomAliasCach
 import { Action } from "../dispatcher/actions";
 import { retry } from "../utils/promise";
 import { TimelineRenderingType } from "../contexts/RoomContext";
-import { PosthogAnalytics } from "../PosthogAnalytics";
 import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import DMRoomMap from "../utils/DMRoomMap";
-import SpaceStore from "./spaces/SpaceStore";
 import { isMetaSpace, MetaSpace } from "./spaces";
 import { JoinRoomPayload } from "../dispatcher/payloads/JoinRoomPayload";
 import { JoinRoomReadyPayload } from "../dispatcher/payloads/JoinRoomReadyPayload";
@@ -47,9 +46,9 @@ import { ViewRoomErrorPayload } from "../dispatcher/payloads/ViewRoomErrorPayloa
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 import { ActiveRoomChangedPayload } from "../dispatcher/payloads/ActiveRoomChangedPayload";
 import SettingsStore from "../settings/SettingsStore";
-import { SlidingSyncManager } from "../SlidingSyncManager";
 import { awaitRoomDownSync } from "../utils/RoomUpgrade";
 import { UPDATE_EVENT } from "./AsyncStore";
+import { SdkContextClass } from "../contexts/SDKContext";
 import { CallStore } from "./CallStore";
 
 const NUM_JOIN_RETRY = 5;
@@ -131,17 +130,16 @@ type Listener = (isActive: boolean) => void;
  * A class for storing application state for RoomView.
  */
 export class RoomViewStore extends EventEmitter {
-    // Important: This cannot be a dynamic getter (lazily-constructed instance) because
-    // otherwise we'll miss view_room dispatches during startup, breaking relaunches of
-    // the app. We need to eagerly create the instance.
-    public static readonly instance = new RoomViewStore(defaultDispatcher);
-
-    private state: State = INITIAL_STATE; // initialize state
+    // initialize state as a copy of the initial state. We need to copy else one RVS can talk to
+    // another RVS via INITIAL_STATE as they share the same underlying object. Mostly relevant for tests.
+    private state = utils.deepCopy(INITIAL_STATE);
 
     private dis: MatrixDispatcher;
     private dispatchToken: string;
 
-    public constructor(dis: MatrixDispatcher) {
+    public constructor(
+        dis: MatrixDispatcher, private readonly stores: SdkContextClass,
+    ) {
         super();
         this.resetDispatcher(dis);
     }
@@ -248,7 +246,7 @@ export class RoomViewStore extends EventEmitter {
                                     : numMembers > 1 ? "Two"
                                         : "One";
 
-                    PosthogAnalytics.instance.trackEvent<JoinedRoomEvent>({
+                    this.stores.posthogAnalytics.trackEvent<JoinedRoomEvent>({
                         eventName: "JoinedRoom",
                         trigger: payload.metricsTrigger,
                         roomSize,
@@ -291,17 +289,17 @@ export class RoomViewStore extends EventEmitter {
 
             if (payload.metricsTrigger !== null && payload.room_id !== this.state.roomId) {
                 let activeSpace: ViewRoomEvent["activeSpace"];
-                if (SpaceStore.instance.activeSpace === MetaSpace.Home) {
+                if (this.stores.spaceStore.activeSpace === MetaSpace.Home) {
                     activeSpace = "Home";
-                } else if (isMetaSpace(SpaceStore.instance.activeSpace)) {
+                } else if (isMetaSpace(this.stores.spaceStore.activeSpace)) {
                     activeSpace = "Meta";
                 } else {
-                    activeSpace = SpaceStore.instance.activeSpaceRoom.getJoinRule() === JoinRule.Public
+                    activeSpace = this.stores.spaceStore.activeSpaceRoom?.getJoinRule() === JoinRule.Public
                         ? "Public"
                         : "Private";
                 }
 
-                PosthogAnalytics.instance.trackEvent<ViewRoomEvent>({
+                this.stores.posthogAnalytics.trackEvent<ViewRoomEvent>({
                     eventName: "ViewRoom",
                     trigger: payload.metricsTrigger,
                     viaKeyboard: payload.metricsViaKeyboard,
@@ -314,7 +312,7 @@ export class RoomViewStore extends EventEmitter {
             if (SettingsStore.getValue("feature_sliding_sync") && this.state.roomId !== payload.room_id) {
                 if (this.state.subscribingRoomId && this.state.subscribingRoomId !== payload.room_id) {
                     // unsubscribe from this room, but don't await it as we don't care when this gets done.
-                    SlidingSyncManager.instance.setRoomVisible(this.state.subscribingRoomId, false);
+                    this.stores.slidingSyncManager.setRoomVisible(this.state.subscribingRoomId, false);
                 }
                 this.setState({
                     subscribingRoomId: payload.room_id,
@@ -332,11 +330,11 @@ export class RoomViewStore extends EventEmitter {
                 });
                 // set this room as the room subscription. We need to await for it as this will fetch
                 // all room state for this room, which is required before we get the state below.
-                await SlidingSyncManager.instance.setRoomVisible(payload.room_id, true);
+                await this.stores.slidingSyncManager.setRoomVisible(payload.room_id, true);
                 // Whilst we were subscribing another room was viewed, so stop what we're doing and
                 // unsubscribe
                 if (this.state.subscribingRoomId !== payload.room_id) {
-                    SlidingSyncManager.instance.setRoomVisible(payload.room_id, false);
+                    this.stores.slidingSyncManager.setRoomVisible(payload.room_id, false);
                     return;
                 }
                 // Re-fire the payload: we won't re-process it because the prev room ID == payload room ID now
@@ -599,7 +597,7 @@ export class RoomViewStore extends EventEmitter {
     //         // Not joined
     //     }
     // } else {
-    //     if (RoomViewStore.instance.isJoining()) {
+    //     if (this.stores.roomViewStore.isJoining()) {
     //         // show spinner
     //     } else {
     //         // show join prompt
diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts
index 327f82153ff..9aa4c1b27c8 100644
--- a/src/stores/right-panel/RightPanelStore.ts
+++ b/src/stores/right-panel/RightPanelStore.ts
@@ -34,7 +34,7 @@ import {
 import { ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
 import { ActiveRoomChangedPayload } from "../../dispatcher/payloads/ActiveRoomChangedPayload";
-import { RoomViewStore } from "../RoomViewStore";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 /**
  * A class for tracking the state of the right panel between layouts and
@@ -64,7 +64,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     }
 
     protected async onReady(): Promise<any> {
-        this.viewedRoomId = RoomViewStore.instance.getRoomId();
+        this.viewedRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
         this.matrixClient.on(CryptoEvent.VerificationRequest, this.onVerificationRequestUpdate);
         this.loadCacheFromSettings();
         this.emitAndUpdateSettings();
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index 83c79a16a9a..d6f9de79c31 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -27,7 +27,6 @@ import { ActionPayload } from "../../dispatcher/payloads";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { readReceiptChangeIsFor } from "../../utils/read-receipts";
 import { FILTER_CHANGED, IFilterCondition } from "./filters/IFilterCondition";
-import { RoomViewStore } from "../RoomViewStore";
 import { Algorithm, LIST_UPDATED_EVENT } from "./algorithms/Algorithm";
 import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
 import RoomListLayoutStore from "./RoomListLayoutStore";
@@ -40,6 +39,7 @@ import { IRoomTimelineActionPayload } from "../../actions/MatrixActionCreators";
 import { RoomListStore as Interface, RoomListStoreEvent } from "./Interface";
 import { SlidingRoomListStoreClass } from "./SlidingRoomListStore";
 import { UPDATE_EVENT } from "../AsyncStore";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 interface IState {
     // state is tracked in underlying classes
@@ -105,7 +105,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
             this.readyStore.useUnitTestClient(forcedClient);
         }
 
-        RoomViewStore.instance.addListener(UPDATE_EVENT, () => this.handleRVSUpdate({}));
+        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, () => this.handleRVSUpdate({}));
         this.algorithm.on(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
         this.algorithm.on(FILTER_CHANGED, this.onAlgorithmFilterUpdated);
         this.setupWatchers();
@@ -128,7 +128,7 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
     private handleRVSUpdate({ trigger = true }) {
         if (!this.matrixClient) return; // We assume there won't be RVS updates without a client
 
-        const activeRoomId = RoomViewStore.instance.getRoomId();
+        const activeRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
         if (!activeRoomId && this.algorithm.stickyRoom) {
             this.algorithm.setStickyRoom(null);
         } else if (activeRoomId) {
diff --git a/src/stores/room-list/SlidingRoomListStore.ts b/src/stores/room-list/SlidingRoomListStore.ts
index 3d532fe0c93..35550d04f1e 100644
--- a/src/stores/room-list/SlidingRoomListStore.ts
+++ b/src/stores/room-list/SlidingRoomListStore.ts
@@ -29,8 +29,8 @@ import { SlidingSyncManager } from "../../SlidingSyncManager";
 import SpaceStore from "../spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../spaces";
 import { LISTS_LOADING_EVENT } from "./RoomListStore";
-import { RoomViewStore } from "../RoomViewStore";
 import { UPDATE_EVENT } from "../AsyncStore";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 interface IState {
     // state is tracked in underlying classes
@@ -207,7 +207,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
 
         // this room will not move due to it being viewed: it is sticky. This can be null to indicate
         // no sticky room if you aren't viewing a room.
-        this.stickyRoomId = RoomViewStore.instance.getRoomId();
+        this.stickyRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
         let stickyRoomNewIndex = -1;
         const stickyRoomOldIndex = (tagMap[tagId] || []).findIndex((room) => {
             return room.roomId === this.stickyRoomId;
@@ -273,7 +273,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
 
     private onRoomViewStoreUpdated() {
         // we only care about this to know when the user has clicked on a room to set the stickiness value
-        if (RoomViewStore.instance.getRoomId() === this.stickyRoomId) {
+        if (SdkContextClass.instance.roomViewStore.getRoomId() === this.stickyRoomId) {
             return;
         }
 
@@ -303,7 +303,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
             }
         }
         // in the event we didn't call refreshOrderedLists, it helps to still remember the sticky room ID.
-        this.stickyRoomId = RoomViewStore.instance.getRoomId();
+        this.stickyRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
 
         if (hasUpdatedAnyList) {
             this.emit(LISTS_UPDATE_EVENT);
@@ -314,7 +314,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
         logger.info("SlidingRoomListStore.onReady");
         // permanent listeners: never get destroyed. Could be an issue if we want to test this in isolation.
         SlidingSyncManager.instance.slidingSync.on(SlidingSyncEvent.List, this.onSlidingSyncListUpdate.bind(this));
-        RoomViewStore.instance.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdated.bind(this));
+        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdated.bind(this));
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated.bind(this));
         if (SpaceStore.instance.activeSpace) {
             this.onSelectedSpaceUpdated(SpaceStore.instance.activeSpace, false);
diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts
index ce86b6ec0f1..f4802a1520c 100644
--- a/src/stores/spaces/SpaceStore.ts
+++ b/src/stores/spaces/SpaceStore.ts
@@ -34,7 +34,6 @@ import { RoomNotificationStateStore } from "../notifications/RoomNotificationSta
 import { DefaultTagID } from "../room-list/models";
 import { EnhancedMap, mapDiff } from "../../utils/maps";
 import { setDiff, setHasDiff } from "../../utils/sets";
-import { RoomViewStore } from "../RoomViewStore";
 import { Action } from "../../dispatcher/actions";
 import { arrayHasDiff, arrayHasOrderChange } from "../../utils/arrays";
 import { reorderLexicographically } from "../../utils/stringOrderField";
@@ -64,6 +63,7 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
 import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
 import { AfterLeaveRoomPayload } from "../../dispatcher/payloads/AfterLeaveRoomPayload";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 interface IState { }
 
@@ -797,7 +797,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this.updateNotificationStates(notificationStatesToUpdate);
     };
 
-    private switchSpaceIfNeeded = (roomId = RoomViewStore.instance.getRoomId()) => {
+    private switchSpaceIfNeeded = (roomId = SdkContextClass.instance.roomViewStore.getRoomId()) => {
         if (!this.isRoomInSpace(this.activeSpace, roomId) && !this.matrixClient.getRoom(roomId)?.isSpaceRoom()) {
             this.switchToRelatedSpace(roomId);
         }
@@ -848,7 +848,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                 }
 
                 // if the room currently being viewed was just joined then switch to its related space
-                if (newMembership === "join" && room.roomId === RoomViewStore.instance.getRoomId()) {
+                if (newMembership === "join" && room.roomId === SdkContextClass.instance.roomViewStore.getRoomId()) {
                     this.switchSpaceIfNeeded(room.roomId);
                 }
             }
@@ -875,7 +875,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
             this.emit(room.roomId);
         }
 
-        if (membership === "join" && room.roomId === RoomViewStore.instance.getRoomId()) {
+        if (membership === "join" && room.roomId === SdkContextClass.instance.roomViewStore.getRoomId()) {
             // if the user was looking at the space and then joined: select that space
             this.setActiveSpace(room.roomId, false);
         } else if (membership === "leave" && room.roomId === this.activeSpace) {
diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts
index 91a262fdcae..aa1ad2c3934 100644
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/src/stores/widgets/StopGapWidget.ts
@@ -41,7 +41,6 @@ import { ClientEvent } from "matrix-js-sdk/src/client";
 import { _t } from "../../languageHandler";
 import { StopGapWidgetDriver } from "./StopGapWidgetDriver";
 import { WidgetMessagingStore } from "./WidgetMessagingStore";
-import { RoomViewStore } from "../RoomViewStore";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { OwnProfileStore } from "../OwnProfileStore";
 import WidgetUtils from '../../utils/WidgetUtils';
@@ -65,6 +64,7 @@ import { arrayFastClone } from "../../utils/arrays";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import Modal from "../../Modal";
 import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
+import { SdkContextClass } from "../../contexts/SDKContext";
 import { VoiceBroadcastRecordingsStore } from "../../voice-broadcast";
 
 // TODO: Destroy all of this code
@@ -185,7 +185,7 @@ export class StopGapWidget extends EventEmitter {
 
         if (this.roomId) return this.roomId;
 
-        return RoomViewStore.instance.getRoomId();
+        return SdkContextClass.instance.roomViewStore.getRoomId();
     }
 
     public get widgetApi(): ClientWidgetApi {
@@ -381,7 +381,7 @@ export class StopGapWidget extends EventEmitter {
 
                     // noinspection JSIgnoredPromiseFromCall
                     IntegrationManagers.sharedInstance().getPrimaryManager().open(
-                        this.client.getRoom(RoomViewStore.instance.getRoomId()),
+                        this.client.getRoom(SdkContextClass.instance.roomViewStore.getRoomId()),
                         `type_${integType}`,
                         integId,
                     );
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index 752d6d57e6f..ba01a10926b 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -53,9 +53,9 @@ import { CHAT_EFFECTS } from "../../effects";
 import { containsEmoji } from "../../effects/utils";
 import dis from "../../dispatcher/dispatcher";
 import SettingsStore from "../../settings/SettingsStore";
-import { RoomViewStore } from "../RoomViewStore";
 import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
 import { navigateToPermalink } from "../../utils/permalinks/navigator";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 // TODO: Purge this from the universe
 
@@ -210,7 +210,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
         targetRoomId: string = null,
     ): Promise<ISendEventDetails> {
         const client = MatrixClientPeg.get();
-        const roomId = targetRoomId || RoomViewStore.instance.getRoomId();
+        const roomId = targetRoomId || SdkContextClass.instance.roomViewStore.getRoomId();
 
         if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
 
@@ -291,7 +291,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
 
         const targetRooms = roomIds
             ? (roomIds.includes(Symbols.AnyRoom) ? client.getVisibleRooms() : roomIds.map(r => client.getRoom(r)))
-            : [client.getRoom(RoomViewStore.instance.getRoomId())];
+            : [client.getRoom(SdkContextClass.instance.roomViewStore.getRoomId())];
         return targetRooms.filter(r => !!r);
     }
 
@@ -430,7 +430,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
     ): Promise<IReadEventRelationsResult> {
         const client = MatrixClientPeg.get();
         const dir = direction as Direction;
-        roomId = roomId ?? RoomViewStore.instance.getRoomId() ?? undefined;
+        roomId = roomId ?? SdkContextClass.instance.roomViewStore.getRoomId() ?? undefined;
 
         if (typeof roomId !== "string") {
             throw new Error('Error while reading the current room');
diff --git a/src/utils/DialogOpener.ts b/src/utils/DialogOpener.ts
index 0e5a3d2b11a..82d16962b26 100644
--- a/src/utils/DialogOpener.ts
+++ b/src/utils/DialogOpener.ts
@@ -20,7 +20,6 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import Modal from "../Modal";
 import RoomSettingsDialog from "../components/views/dialogs/RoomSettingsDialog";
-import { RoomViewStore } from "../stores/RoomViewStore";
 import ForwardDialog from "../components/views/dialogs/ForwardDialog";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { Action } from "../dispatcher/actions";
@@ -32,6 +31,7 @@ import AddExistingToSpaceDialog from "../components/views/dialogs/AddExistingToS
 import { ButtonEvent } from "../components/views/elements/AccessibleButton";
 import PosthogTrackers from "../PosthogTrackers";
 import { showAddExistingSubspace, showCreateNewRoom } from "./space";
+import { SdkContextClass } from "../contexts/SDKContext";
 
 /**
  * Auxiliary class to listen for dialog opening over the dispatcher and
@@ -58,7 +58,7 @@ export class DialogOpener {
         switch (payload.action) {
             case 'open_room_settings':
                 Modal.createDialog(RoomSettingsDialog, {
-                    roomId: payload.room_id || RoomViewStore.instance.getRoomId(),
+                    roomId: payload.room_id || SdkContextClass.instance.roomViewStore.getRoomId(),
                     initialTabId: payload.initial_tab_id,
                 }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
                 break;
@@ -108,7 +108,7 @@ export class DialogOpener {
                         onAddSubspaceClick: () => showAddExistingSubspace(space),
                         space,
                         onFinished: (added: boolean) => {
-                            if (added && RoomViewStore.instance.getRoomId() === space.roomId) {
+                            if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
                                 defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
                             }
                         },
diff --git a/src/utils/leave-behaviour.ts b/src/utils/leave-behaviour.ts
index a12cd70ebff..83054ce1b49 100644
--- a/src/utils/leave-behaviour.ts
+++ b/src/utils/leave-behaviour.ts
@@ -27,7 +27,6 @@ import { _t } from "../languageHandler";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 import { isMetaSpace } from "../stores/spaces";
 import SpaceStore from "../stores/spaces/SpaceStore";
-import { RoomViewStore } from "../stores/RoomViewStore";
 import dis from "../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../dispatcher/actions";
@@ -35,6 +34,7 @@ import { ViewHomePagePayload } from "../dispatcher/payloads/ViewHomePagePayload"
 import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
 import { AfterLeaveRoomPayload } from "../dispatcher/payloads/AfterLeaveRoomPayload";
 import { bulkSpaceBehaviour } from "./space";
+import { SdkContextClass } from "../contexts/SDKContext";
 
 export async function leaveRoomBehaviour(roomId: string, retry = true, spinner = true) {
     let spinnerModal: IHandle<any>;
@@ -130,7 +130,7 @@ export async function leaveRoomBehaviour(roomId: string, retry = true, spinner =
 
     if (!isMetaSpace(SpaceStore.instance.activeSpace) &&
         SpaceStore.instance.activeSpace !== roomId &&
-        RoomViewStore.instance.getRoomId() === roomId
+        SdkContextClass.instance.roomViewStore.getRoomId() === roomId
     ) {
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
diff --git a/src/utils/space.tsx b/src/utils/space.tsx
index 9e05f0444ba..1e30b7235aa 100644
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@@ -30,7 +30,6 @@ import { showRoomInviteDialog } from "../RoomInvite";
 import CreateSubspaceDialog from "../components/views/dialogs/CreateSubspaceDialog";
 import AddExistingSubspaceDialog from "../components/views/dialogs/AddExistingSubspaceDialog";
 import defaultDispatcher from "../dispatcher/dispatcher";
-import { RoomViewStore } from "../stores/RoomViewStore";
 import { Action } from "../dispatcher/actions";
 import Spinner from "../components/views/elements/Spinner";
 import { shouldShowComponent } from "../customisations/helpers/UIComponents";
@@ -38,6 +37,7 @@ import { UIComponent } from "../settings/UIFeature";
 import { OpenSpacePreferencesPayload, SpacePreferenceTab } from "../dispatcher/payloads/OpenSpacePreferencesPayload";
 import { OpenSpaceSettingsPayload } from "../dispatcher/payloads/OpenSpaceSettingsPayload";
 import { OpenAddExistingToSpaceDialogPayload } from "../dispatcher/payloads/OpenAddExistingToSpaceDialogPayload";
+import { SdkContextClass } from "../contexts/SDKContext";
 
 export const shouldShowSpaceSettings = (space: Room) => {
     const userId = space.client.getUserId();
@@ -113,7 +113,7 @@ export const showAddExistingSubspace = (space: Room): void => {
         space,
         onCreateSubspaceClick: () => showCreateNewSubspace(space),
         onFinished: (added: boolean) => {
-            if (added && RoomViewStore.instance.getRoomId() === space.roomId) {
+            if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
                 defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
             }
         },
@@ -125,7 +125,7 @@ export const showCreateNewSubspace = (space: Room): void => {
         space,
         onAddExistingSpaceClick: () => showAddExistingSubspace(space),
         onFinished: (added: boolean) => {
-            if (added && RoomViewStore.instance.getRoomId() === space.roomId) {
+            if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
                 defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
             }
         },
diff --git a/test/SlashCommands-test.tsx b/test/SlashCommands-test.tsx
index 39d3986270c..c31d6d70c12 100644
--- a/test/SlashCommands-test.tsx
+++ b/test/SlashCommands-test.tsx
@@ -21,9 +21,9 @@ import { Command, Commands, getCommand } from '../src/SlashCommands';
 import { createTestClient } from './test-utils';
 import { MatrixClientPeg } from '../src/MatrixClientPeg';
 import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from '../src/models/LocalRoom';
-import { RoomViewStore } from '../src/stores/RoomViewStore';
 import SettingsStore from '../src/settings/SettingsStore';
 import LegacyCallHandler from '../src/LegacyCallHandler';
+import { SdkContextClass } from '../src/contexts/SDKContext';
 
 describe('SlashCommands', () => {
     let client: MatrixClient;
@@ -38,14 +38,14 @@ describe('SlashCommands', () => {
     };
 
     const setCurrentRoom = (): void => {
-        mocked(RoomViewStore.instance.getRoomId).mockReturnValue(roomId);
+        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue(roomId);
         mocked(client.getRoom).mockImplementation((rId: string): Room => {
             if (rId === roomId) return room;
         });
     };
 
     const setCurrentLocalRoon = (): void => {
-        mocked(RoomViewStore.instance.getRoomId).mockReturnValue(localRoomId);
+        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue(localRoomId);
         mocked(client.getRoom).mockImplementation((rId: string): Room => {
             if (rId === localRoomId) return localRoom;
         });
@@ -60,7 +60,7 @@ describe('SlashCommands', () => {
         room = new Room(roomId, client, client.getUserId());
         localRoom = new LocalRoom(localRoomId, client, client.getUserId());
 
-        jest.spyOn(RoomViewStore.instance, "getRoomId");
+        jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId");
     });
 
     describe('/topic', () => {
diff --git a/test/TestStores.ts b/test/TestStores.ts
new file mode 100644
index 00000000000..dbaa51f504a
--- /dev/null
+++ b/test/TestStores.ts
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { SdkContextClass } from "../src/contexts/SDKContext";
+import { PosthogAnalytics } from "../src/PosthogAnalytics";
+import { SlidingSyncManager } from "../src/SlidingSyncManager";
+import { RoomNotificationStateStore } from "../src/stores/notifications/RoomNotificationStateStore";
+import RightPanelStore from "../src/stores/right-panel/RightPanelStore";
+import { RoomViewStore } from "../src/stores/RoomViewStore";
+import { SpaceStoreClass } from "../src/stores/spaces/SpaceStore";
+import { WidgetLayoutStore } from "../src/stores/widgets/WidgetLayoutStore";
+import WidgetStore from "../src/stores/WidgetStore";
+
+/**
+ * A class which provides the same API as Stores but adds additional unsafe setters which can
+ * replace individual stores. This is useful for tests which need to mock out stores.
+ */
+export class TestStores extends SdkContextClass {
+    public _RightPanelStore?: RightPanelStore;
+    public _RoomNotificationStateStore?: RoomNotificationStateStore;
+    public _RoomViewStore?: RoomViewStore;
+    public _WidgetLayoutStore?: WidgetLayoutStore;
+    public _WidgetStore?: WidgetStore;
+    public _PosthogAnalytics?: PosthogAnalytics;
+    public _SlidingSyncManager?: SlidingSyncManager;
+    public _SpaceStore?: SpaceStoreClass;
+
+    constructor() {
+        super();
+    }
+}
diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx
index dd45c7df099..a4131100c5a 100644
--- a/test/components/structures/RoomView-test.tsx
+++ b/test/components/structures/RoomView-test.tsx
@@ -32,17 +32,16 @@ import { defaultDispatcher } from "../../../src/dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../src/dispatcher/payloads/ViewRoomPayload";
 import { RoomView as _RoomView } from "../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
-import { RoomViewStore } from "../../../src/stores/RoomViewStore";
 import SettingsStore from "../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import { NotificationState } from "../../../src/stores/notifications/NotificationState";
-import RightPanelStore from "../../../src/stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../src/stores/right-panel/RightPanelStorePhases";
 import { LocalRoom, LocalRoomState } from "../../../src/models/LocalRoom";
 import { DirectoryMember } from "../../../src/utils/direct-messages";
 import { createDmLocalRoom } from "../../../src/utils/dm/createDmLocalRoom";
 import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
+import { SdkContextClass, SDKContext } from "../../../src/contexts/SDKContext";
 
 const RoomView = wrapInMatrixClientContext(_RoomView);
 
@@ -50,6 +49,7 @@ describe("RoomView", () => {
     let cli: MockedObject<MatrixClient>;
     let room: Room;
     let roomCount = 0;
+    let stores: SdkContextClass;
 
     beforeEach(async () => {
         mockPlatformPeg({ reload: () => {} });
@@ -64,7 +64,9 @@ describe("RoomView", () => {
         room.on(RoomEvent.TimelineReset, (...args) => cli.emit(RoomEvent.TimelineReset, ...args));
 
         DMRoomMap.makeShared();
-        RightPanelStore.instance.useUnitTestClient(cli);
+        stores = new SdkContextClass();
+        stores.client = cli;
+        stores.rightPanelStore.useUnitTestClient(cli);
     });
 
     afterEach(async () => {
@@ -73,15 +75,15 @@ describe("RoomView", () => {
     });
 
     const mountRoomView = async (): Promise<ReactWrapper> => {
-        if (RoomViewStore.instance.getRoomId() !== room.roomId) {
+        if (stores.roomViewStore.getRoomId() !== room.roomId) {
             const switchedRoom = new Promise<void>(resolve => {
                 const subFn = () => {
-                    if (RoomViewStore.instance.getRoomId()) {
-                        RoomViewStore.instance.off(UPDATE_EVENT, subFn);
+                    if (stores.roomViewStore.getRoomId()) {
+                        stores.roomViewStore.off(UPDATE_EVENT, subFn);
                         resolve();
                     }
                 };
-                RoomViewStore.instance.on(UPDATE_EVENT, subFn);
+                stores.roomViewStore.on(UPDATE_EVENT, subFn);
             });
 
             defaultDispatcher.dispatch<ViewRoomPayload>({
@@ -94,15 +96,16 @@ describe("RoomView", () => {
         }
 
         const roomView = mount(
-            <RoomView
-                mxClient={cli}
-                threepidInvite={null}
-                oobData={null}
-                resizeNotifier={new ResizeNotifier()}
-                justCreatedOpts={null}
-                forceTimeline={false}
-                onRegistered={null}
-            />,
+            <SDKContext.Provider value={stores}>
+                <RoomView
+                    threepidInvite={null}
+                    oobData={null}
+                    resizeNotifier={new ResizeNotifier()}
+                    justCreatedOpts={null}
+                    forceTimeline={false}
+                    onRegistered={null}
+                />
+            </SDKContext.Provider>,
         );
         await act(() => Promise.resolve()); // Allow state to settle
         return roomView;
@@ -162,14 +165,14 @@ describe("RoomView", () => {
         it("normally doesn't open the chat panel", async () => {
             jest.spyOn(NotificationState.prototype, "isUnread", "get").mockReturnValue(false);
             await mountRoomView();
-            expect(RightPanelStore.instance.isOpen).toEqual(false);
+            expect(stores.rightPanelStore.isOpen).toEqual(false);
         });
 
         it("opens the chat panel if there are unread messages", async () => {
             jest.spyOn(NotificationState.prototype, "isUnread", "get").mockReturnValue(true);
             await mountRoomView();
-            expect(RightPanelStore.instance.isOpen).toEqual(true);
-            expect(RightPanelStore.instance.currentCard.phase).toEqual(RightPanelPhases.Timeline);
+            expect(stores.rightPanelStore.isOpen).toEqual(true);
+            expect(stores.rightPanelStore.currentCard.phase).toEqual(RightPanelPhases.Timeline);
         });
     });
 
diff --git a/test/components/views/beacon/RoomCallBanner-test.tsx b/test/components/views/beacon/RoomCallBanner-test.tsx
index 52d0ed27d36..722c28ff1f6 100644
--- a/test/components/views/beacon/RoomCallBanner-test.tsx
+++ b/test/components/views/beacon/RoomCallBanner-test.tsx
@@ -42,8 +42,8 @@ import RoomCallBanner from "../../../../src/components/views/beacon/RoomCallBann
 import { CallStore } from "../../../../src/stores/CallStore";
 import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { RoomViewStore } from "../../../../src/stores/RoomViewStore";
 import { ConnectionState } from "../../../../src/models/Call";
+import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 
 describe("<RoomCallBanner />", () => {
     let client: Mocked<MatrixClient>;
@@ -132,7 +132,8 @@ describe("<RoomCallBanner />", () => {
         });
 
         it("doesn't show banner if the call is shown", async () => {
-            jest.spyOn(RoomViewStore.instance, 'isViewingCall').mockReturnValue(true);
+            jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall");
+            mocked(SdkContextClass.instance.roomViewStore.isViewingCall).mockReturnValue(true);
             await renderBanner();
             const banner = await screen.queryByText("Video call");
             expect(banner).toBeFalsy();
diff --git a/test/stores/RoomViewStore-test.tsx b/test/stores/RoomViewStore-test.ts
similarity index 79%
rename from test/stores/RoomViewStore-test.tsx
rename to test/stores/RoomViewStore-test.ts
index 3ea402438db..f6f6bf2cc71 100644
--- a/test/stores/RoomViewStore-test.tsx
+++ b/test/stores/RoomViewStore-test.ts
@@ -21,10 +21,21 @@ import { Action } from '../../src/dispatcher/actions';
 import { getMockClientWithEventEmitter, untilDispatch, untilEmission } from '../test-utils';
 import SettingsStore from '../../src/settings/SettingsStore';
 import { SlidingSyncManager } from '../../src/SlidingSyncManager';
+import { PosthogAnalytics } from '../../src/PosthogAnalytics';
 import { TimelineRenderingType } from '../../src/contexts/RoomContext';
 import { MatrixDispatcher } from '../../src/dispatcher/dispatcher';
 import { UPDATE_EVENT } from '../../src/stores/AsyncStore';
 import { ActiveRoomChangedPayload } from '../../src/dispatcher/payloads/ActiveRoomChangedPayload';
+import { SpaceStoreClass } from '../../src/stores/spaces/SpaceStore';
+import { TestStores } from '../TestStores';
+
+// mock out the injected classes
+jest.mock('../../src/PosthogAnalytics');
+const MockPosthogAnalytics = <jest.Mock<PosthogAnalytics>><unknown>PosthogAnalytics;
+jest.mock('../../src/SlidingSyncManager');
+const MockSlidingSyncManager = <jest.Mock<SlidingSyncManager>><unknown>SlidingSyncManager;
+jest.mock('../../src/stores/spaces/SpaceStore');
+const MockSpaceStore = <jest.Mock<SpaceStoreClass>><unknown>SpaceStoreClass;
 
 jest.mock('../../src/utils/DMRoomMap', () => {
     const mock = {
@@ -51,6 +62,9 @@ describe('RoomViewStore', function() {
         isGuest: jest.fn(),
     });
     const room = new Room(roomId, mockClient, userId);
+
+    let roomViewStore: RoomViewStore;
+    let slidingSyncManager: SlidingSyncManager;
     let dis: MatrixDispatcher;
 
     beforeEach(function() {
@@ -60,10 +74,17 @@ describe('RoomViewStore', function() {
         mockClient.getRoom.mockReturnValue(room);
         mockClient.isGuest.mockReturnValue(false);
 
-        // Reset the state of the store
+        // Make the RVS to test
         dis = new MatrixDispatcher();
-        RoomViewStore.instance.reset();
-        RoomViewStore.instance.resetDispatcher(dis);
+        slidingSyncManager = new MockSlidingSyncManager();
+        const stores = new TestStores();
+        stores._SlidingSyncManager = slidingSyncManager;
+        stores._PosthogAnalytics = new MockPosthogAnalytics();
+        stores._SpaceStore = new MockSpaceStore();
+        roomViewStore = new RoomViewStore(
+            dis, stores,
+        );
+        stores._RoomViewStore = roomViewStore;
     });
 
     it('can be used to view a room by ID and join', async () => {
@@ -71,14 +92,14 @@ describe('RoomViewStore', function() {
         dis.dispatch({ action: Action.JoinRoom });
         await untilDispatch(Action.JoinRoomReady, dis);
         expect(mockClient.joinRoom).toHaveBeenCalledWith(roomId, { viaServers: [] });
-        expect(RoomViewStore.instance.isJoining()).toBe(true);
+        expect(roomViewStore.isJoining()).toBe(true);
     });
 
     it('can auto-join a room', async () => {
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId, auto_join: true });
         await untilDispatch(Action.JoinRoomReady, dis);
         expect(mockClient.joinRoom).toHaveBeenCalledWith(roomId, { viaServers: [] });
-        expect(RoomViewStore.instance.isJoining()).toBe(true);
+        expect(roomViewStore.isJoining()).toBe(true);
     });
 
     it('emits ActiveRoomChanged when the viewed room changes', async () => {
@@ -97,7 +118,7 @@ describe('RoomViewStore', function() {
     it('invokes room activity listeners when the viewed room changes', async () => {
         const roomId2 = "!roomid:2";
         const callback = jest.fn();
-        RoomViewStore.instance.addRoomListener(roomId, callback);
+        roomViewStore.addRoomListener(roomId, callback);
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
         await untilDispatch(Action.ActiveRoomChanged, dis) as ActiveRoomChangedPayload;
         expect(callback).toHaveBeenCalledWith(true);
@@ -116,14 +137,14 @@ describe('RoomViewStore', function() {
         }, dis);
 
         // roomId is set to id of the room alias
-        expect(RoomViewStore.instance.getRoomId()).toBe(roomId);
+        expect(roomViewStore.getRoomId()).toBe(roomId);
 
         // join the room
         dis.dispatch({ action: Action.JoinRoom }, true);
 
         await untilDispatch(Action.JoinRoomReady, dis);
 
-        expect(RoomViewStore.instance.isJoining()).toBeTruthy();
+        expect(roomViewStore.isJoining()).toBeTruthy();
         expect(mockClient.joinRoom).toHaveBeenCalledWith(alias, { viaServers: [] });
     });
 
@@ -134,7 +155,7 @@ describe('RoomViewStore', function() {
         const payload = await untilDispatch(Action.ViewRoomError, dis);
         expect(payload.room_id).toBeNull();
         expect(payload.room_alias).toEqual(alias);
-        expect(RoomViewStore.instance.getRoomAlias()).toEqual(alias);
+        expect(roomViewStore.getRoomAlias()).toEqual(alias);
     });
 
     it('emits JoinRoomError if joining the room fails', async () => {
@@ -143,8 +164,8 @@ describe('RoomViewStore', function() {
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
         dis.dispatch({ action: Action.JoinRoom });
         await untilDispatch(Action.JoinRoomError, dis);
-        expect(RoomViewStore.instance.isJoining()).toBe(false);
-        expect(RoomViewStore.instance.getJoinError()).toEqual(joinErr);
+        expect(roomViewStore.isJoining()).toBe(false);
+        expect(roomViewStore.getJoinError()).toEqual(joinErr);
     });
 
     it('remembers the event being replied to when swapping rooms', async () => {
@@ -154,13 +175,13 @@ describe('RoomViewStore', function() {
             getRoomId: () => roomId,
         };
         dis.dispatch({ action: 'reply_to_event', event: replyToEvent, context: TimelineRenderingType.Room });
-        await untilEmission(RoomViewStore.instance, UPDATE_EVENT);
-        expect(RoomViewStore.instance.getQuotingEvent()).toEqual(replyToEvent);
+        await untilEmission(roomViewStore, UPDATE_EVENT);
+        expect(roomViewStore.getQuotingEvent()).toEqual(replyToEvent);
         // view the same room, should remember the event.
         // set the highlighed flag to make sure there is a state change so we get an update event
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId, highlighted: true });
-        await untilEmission(RoomViewStore.instance, UPDATE_EVENT);
-        expect(RoomViewStore.instance.getQuotingEvent()).toEqual(replyToEvent);
+        await untilEmission(roomViewStore, UPDATE_EVENT);
+        expect(roomViewStore.getQuotingEvent()).toEqual(replyToEvent);
     });
 
     it('swaps to the replied event room if it is not the current room', async () => {
@@ -172,18 +193,18 @@ describe('RoomViewStore', function() {
         };
         dis.dispatch({ action: 'reply_to_event', event: replyToEvent, context: TimelineRenderingType.Room });
         await untilDispatch(Action.ViewRoom, dis);
-        expect(RoomViewStore.instance.getQuotingEvent()).toEqual(replyToEvent);
-        expect(RoomViewStore.instance.getRoomId()).toEqual(roomId2);
+        expect(roomViewStore.getQuotingEvent()).toEqual(replyToEvent);
+        expect(roomViewStore.getRoomId()).toEqual(roomId2);
     });
 
     it('removes the roomId on ViewHomePage', async () => {
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
         await untilDispatch(Action.ActiveRoomChanged, dis);
-        expect(RoomViewStore.instance.getRoomId()).toEqual(roomId);
+        expect(roomViewStore.getRoomId()).toEqual(roomId);
 
         dis.dispatch({ action: Action.ViewHomePage });
-        await untilEmission(RoomViewStore.instance, UPDATE_EVENT);
-        expect(RoomViewStore.instance.getRoomId()).toBeNull();
+        await untilEmission(roomViewStore, UPDATE_EVENT);
+        expect(roomViewStore.getRoomId()).toBeNull();
     });
 
     describe('Sliding Sync', function() {
@@ -191,23 +212,22 @@ describe('RoomViewStore', function() {
             jest.spyOn(SettingsStore, 'getValue').mockImplementation((settingName, roomId, value) => {
                 return settingName === "feature_sliding_sync"; // this is enabled, everything else is disabled.
             });
-            RoomViewStore.instance.reset();
         });
 
         it("subscribes to the room", async () => {
-            const setRoomVisible = jest.spyOn(SlidingSyncManager.instance, "setRoomVisible").mockReturnValue(
+            const setRoomVisible = jest.spyOn(slidingSyncManager, "setRoomVisible").mockReturnValue(
                 Promise.resolve(""),
             );
             const subscribedRoomId = "!sub1:localhost";
             dis.dispatch({ action: Action.ViewRoom, room_id: subscribedRoomId });
             await untilDispatch(Action.ActiveRoomChanged, dis);
-            expect(RoomViewStore.instance.getRoomId()).toBe(subscribedRoomId);
+            expect(roomViewStore.getRoomId()).toBe(subscribedRoomId);
             expect(setRoomVisible).toHaveBeenCalledWith(subscribedRoomId, true);
         });
 
         // Regression test for an in-the-wild bug where rooms would rapidly switch forever in sliding sync mode
         it("doesn't get stuck in a loop if you view rooms quickly", async () => {
-            const setRoomVisible = jest.spyOn(SlidingSyncManager.instance, "setRoomVisible").mockReturnValue(
+            const setRoomVisible = jest.spyOn(slidingSyncManager, "setRoomVisible").mockReturnValue(
                 Promise.resolve(""),
             );
             const subscribedRoomId = "!sub1:localhost";
diff --git a/test/stores/widgets/StopGapWidgetDriver-test.ts b/test/stores/widgets/StopGapWidgetDriver-test.ts
index d1816bdac32..0fd2f18be79 100644
--- a/test/stores/widgets/StopGapWidgetDriver-test.ts
+++ b/test/stores/widgets/StopGapWidgetDriver-test.ts
@@ -20,8 +20,8 @@ import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { Direction, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { Widget, MatrixWidgetType, WidgetKind, WidgetDriver, ITurnServer } from "matrix-widget-api";
 
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { RoomViewStore } from "../../../src/stores/RoomViewStore";
 import { StopGapWidgetDriver } from "../../../src/stores/widgets/StopGapWidgetDriver";
 import { stubClient } from "../../test-utils";
 
@@ -201,7 +201,7 @@ describe("StopGapWidgetDriver", () => {
         beforeEach(() => { driver = mkDefaultDriver(); });
 
         it('reads related events from the current room', async () => {
-            jest.spyOn(RoomViewStore.instance, 'getRoomId').mockReturnValue('!this-room-id');
+            jest.spyOn(SdkContextClass.instance.roomViewStore, 'getRoomId').mockReturnValue('!this-room-id');
 
             client.relations.mockResolvedValue({
                 originalEvent: new MatrixEvent(),

From 3c3df11d32f439cd84d057f7ef54dbd3fd75fd53 Mon Sep 17 00:00:00 2001
From: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
Date: Wed, 19 Oct 2022 13:31:20 +0100
Subject: [PATCH 010/113] Support for login + E2EE set up with QR (#9403)

* Support for login + E2EE set up with QR

* Whitespace

* Padding

* Refactor of fetch

* Whitespace

* CSS whitespace

* Add link to MSC3906

* Handle incorrect typing in MatrixClientPeg.get()

* Use unstable class name

* fix: use unstable class name

* Use default fetch client instead

* Update to revised function name

* Refactor device manager panel and make it work with new sessions manager

* Lint fix

* Add missing interstitials and update wording

* Linting

* i18n

* Lint

* Use sensible sdk config name for fallback server

* Improve error handling for QR code generation

* Refactor feature availability logic

* Hide device manager panel if no options available

* Put sign in with QR behind lab setting

* Reduce scope of PR to just showing code on existing device

* i18n updates

* Handle null features

* Testing for LoginWithQRSection

* Refactor to handle UIA

* Imports

* Reduce diff complexity

* Remove unnecessary change

* Remove unused styles

* Support UIA

* Tidy up

* i18n

* Remove additional unused parts of flow

* Add extra instruction when showing QR code

* Add getVersions to server mocks

* Use proper colours for theme support

* Test cases

* Lint

* Remove obsolete snapshot

* Don't override error if already set

* Remove unused var

* Update src/components/views/settings/devices/LoginWithQRSection.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update res/css/views/auth/_LoginWithQR.pcss

Co-authored-by: Kerry <kerrya@element.io>

* Use spacing variables

* Remove debug

* Style + docs

* preventDefault

* Names of tests

* Fixes for js-sdk refactor

* Update snapshots to match test names

* Refactor labs config to make deployment simpler

* i18n

* Unused imports

* Typo

* Stateless component

* Whitespace

* Use context not MatrixClientPeg

* Add missing context

* Type updates to match js-sdk

* Wrap click handlers in useCallback

* Update src/components/views/settings/DevicesPanel.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Wait for DOM update instead of timeout

* Add missing snapshot update from last commit

* Remove void keyword in favour of then() clauses

* test main paths in LoginWithQR

Co-authored-by: Travis Ralston <travisr@matrix.org>
Co-authored-by: Kerry <kerrya@element.io>
---
 res/css/_components.pcss                      |   1 +
 res/css/views/auth/_LoginWithQR.pcss          | 171 ++++++++
 res/img/element-icons/back.svg                |   3 +
 res/img/element-icons/devices.svg             |  11 +
 res/img/element-icons/qrcode.svg              |   4 +
 src/components/views/auth/LoginWithQR.tsx     | 396 ++++++++++++++++++
 .../views/dialogs/InteractiveAuthDialog.tsx   |   6 +-
 .../views/settings/DevicesPanel.tsx           |  22 +-
 .../settings/devices/LoginWithQRSection.tsx   |  63 +++
 .../views/settings/devices/useOwnDevices.ts   |   7 +
 .../tabs/user/SecurityUserSettingsTab.tsx     |  28 ++
 .../settings/tabs/user/SessionManagerTab.tsx  |  29 ++
 src/i18n/strings/en_EN.json                   |  24 ++
 src/settings/Settings.tsx                     |  10 +
 src/utils/UserInteractiveAuth.ts              |  55 +++
 .../views/settings/DevicesPanel-test.tsx      |   6 +-
 .../settings/devices/LoginWithQR-test.tsx     | 297 +++++++++++++
 .../devices/LoginWithQRSection-test.tsx       |  94 +++++
 .../__snapshots__/LoginWithQR-test.tsx.snap   | 367 ++++++++++++++++
 .../LoginWithQRSection-test.tsx.snap          |  45 ++
 .../user/SecurityUserSettingsTab-test.tsx     |   9 +-
 .../tabs/user/SessionManagerTab-test.tsx      |   1 +
 test/test-utils/client.ts                     |   1 +
 23 files changed, 1638 insertions(+), 12 deletions(-)
 create mode 100644 res/css/views/auth/_LoginWithQR.pcss
 create mode 100644 res/img/element-icons/back.svg
 create mode 100644 res/img/element-icons/devices.svg
 create mode 100644 res/img/element-icons/qrcode.svg
 create mode 100644 src/components/views/auth/LoginWithQR.tsx
 create mode 100644 src/components/views/settings/devices/LoginWithQRSection.tsx
 create mode 100644 src/utils/UserInteractiveAuth.ts
 create mode 100644 test/components/views/settings/devices/LoginWithQR-test.tsx
 create mode 100644 test/components/views/settings/devices/LoginWithQRSection-test.tsx
 create mode 100644 test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
 create mode 100644 test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 00661bd56b8..b2fcb0dd4f8 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -96,6 +96,7 @@
 @import "./views/auth/_CountryDropdown.pcss";
 @import "./views/auth/_InteractiveAuthEntryComponents.pcss";
 @import "./views/auth/_LanguageSelector.pcss";
+@import "./views/auth/_LoginWithQR.pcss";
 @import "./views/auth/_PassphraseField.pcss";
 @import "./views/auth/_Welcome.pcss";
 @import "./views/avatars/_BaseAvatar.pcss";
diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss
new file mode 100644
index 00000000000..390cf8311d0
--- /dev/null
+++ b/res/css/views/auth/_LoginWithQR.pcss
@@ -0,0 +1,171 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LoginWithQRSection .mx_AccessibleButton {
+    margin-right: $spacing-12;
+}
+
+.mx_AuthPage .mx_LoginWithQR {
+    .mx_AccessibleButton {
+        display: block !important;
+    }
+
+    .mx_AccessibleButton + .mx_AccessibleButton {
+        margin-top: $spacing-8;
+    }
+
+    .mx_LoginWithQR_separator {
+        display: flex;
+        align-items: center;
+        text-align: center;
+
+        &::before, &::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid $quinary-content;
+        }
+
+        &:not(:empty) {
+            &::before {
+                margin-right: 1em;
+            }
+            &::after {
+                margin-left: 1em;
+            }
+        }
+    }
+
+    font-size: $font-15px;
+}
+
+.mx_UserSettingsDialog .mx_LoginWithQR {
+    .mx_AccessibleButton + .mx_AccessibleButton {
+        margin-left: $spacing-12;
+    }
+
+    font-size: $font-14px;
+
+    h1 {
+        font-size: $font-24px;
+        margin-bottom: 0;
+    }
+
+    li {
+        line-height: 1.8;
+    }
+
+    .mx_QRCode {
+        padding: $spacing-12 $spacing-40;
+        margin: $spacing-28 0;
+    }
+
+    .mx_LoginWithQR_buttons {
+        text-align: center;
+    }
+
+    .mx_LoginWithQR_qrWrapper {
+        display: flex;
+    }
+}
+
+.mx_LoginWithQR {
+    min-height: 350px;
+    display: flex;
+    flex-direction: column;
+
+    .mx_LoginWithQR_centreTitle {
+        h1 {
+            text-align: centre;
+        }
+    }
+
+    h1 > svg {
+        &.normal {
+            color: $secondary-content;
+        }
+        &.error {
+            color: $alert;
+        }
+        &.success {
+            color: $accent;
+        }
+        height: 1.3em;
+        margin-right: $spacing-8;
+        vertical-align: middle;
+    }
+
+    .mx_LoginWithQR_confirmationDigits {
+        text-align: center;
+        margin: $spacing-48 auto;
+        font-weight: 600;
+        font-size: $font-24px;
+        color: $primary-content;
+    }
+
+    .mx_LoginWithQR_confirmationAlert {
+        border: 1px solid $quaternary-content;
+        border-radius: $spacing-8;
+        padding: $spacing-8;
+        line-height: 1.5em;
+        display: flex;
+
+        svg {
+            height: 30px;
+        }
+    }
+
+    .mx_LoginWithQR_separator {
+        margin: 1em 0;
+    }
+
+    ol {
+        list-style-position: inside;
+        padding-inline-start: 0;
+
+        li::marker {
+            color: $accent;
+        }
+    }
+
+    .mx_LoginWithQR_BackButton {
+        height: $spacing-12;
+        margin-bottom: $spacing-24;
+        svg {
+            height: 100%;
+        }
+    }
+
+    .mx_LoginWithQR_main {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .mx_QRCode {
+        border: 1px solid $quinary-content;
+        border-radius: $spacing-8;
+        display: flex;
+        justify-content: center;
+    }
+
+    .mx_LoginWithQR_spinner {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+}
diff --git a/res/img/element-icons/back.svg b/res/img/element-icons/back.svg
new file mode 100644
index 00000000000..62aef5df274
--- /dev/null
+++ b/res/img/element-icons/back.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/res/img/element-icons/devices.svg b/res/img/element-icons/devices.svg
new file mode 100644
index 00000000000..6c26cfe97ee
--- /dev/null
+++ b/res/img/element-icons/devices.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_721_35674)">
+  <path d="M5.33333 9.33313C5.33333 8.5998 5.93333 7.9998 6.66667 7.9998H28C28.7333 7.9998 29.3333 7.3998 29.3333 6.66646C29.3333 5.93313 28.7333 5.33313 28 5.33313H5.33333C3.86667 5.33313 2.66667 6.53313 2.66667 7.9998V22.6665H2C0.893333 22.6665 0 23.5598 0 24.6665C0 25.7731 0.893333 26.6665 2 26.6665H18.6667V22.6665H5.33333V9.33313ZM30.6667 10.6665H22.6667C21.9333 10.6665 21.3333 11.2665 21.3333 11.9998V25.3331C21.3333 26.0665 21.9333 26.6665 22.6667 26.6665H30.6667C31.4 26.6665 32 26.0665 32 25.3331V11.9998C32 11.2665 31.4 10.6665 30.6667 10.6665ZM29.3333 22.6665H24V13.3331H29.3333V22.6665Z" fill="currentColor"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_721_35674">
+  <rect width="32" height="32" fill="white"/>
+  </clipPath>
+  </defs>
+  </svg>
+  
\ No newline at end of file
diff --git a/res/img/element-icons/qrcode.svg b/res/img/element-icons/qrcode.svg
new file mode 100644
index 00000000000..7787141ad53
--- /dev/null
+++ b/res/img/element-icons/qrcode.svg
@@ -0,0 +1,4 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.16667 12V10.6667H8.5V12H7.16667ZM5.83333 10.6667V7.33333H7.16667V10.6667H5.83333ZM11.1667 8.66667V6H12.5V8.66667H11.1667ZM9.83333 6V4.66667H11.1667V6H9.83333ZM1.83333 7.33333V6H3.16667V7.33333H1.83333ZM0.5 6V4.66667H1.83333V6H0.5ZM6.5 1.33333V0H7.83333V1.33333H6.5ZM1.33333 3.16667H3.66667V0.833333H1.33333V3.16667ZM1 4C0.855556 4 0.736111 3.95278 0.641667 3.85833C0.547222 3.76389 0.5 3.64444 0.5 3.5V0.5C0.5 0.355556 0.547222 0.236111 0.641667 0.141667C0.736111 0.0472223 0.855556 0 1 0H4C4.14444 0 4.26389 0.0472223 4.35833 0.141667C4.45278 0.236111 4.5 0.355556 4.5 0.5V3.5C4.5 3.64444 4.45278 3.76389 4.35833 3.85833C4.26389 3.95278 4.14444 4 4 4H1ZM1.33333 11.1667H3.66667V8.83333H1.33333V11.1667ZM1 12C0.855556 12 0.736111 11.9528 0.641667 11.8583C0.547222 11.7639 0.5 11.6444 0.5 11.5V8.5C0.5 8.35556 0.547222 8.23611 0.641667 8.14167C0.736111 8.04722 0.855556 8 1 8H4C4.14444 8 4.26389 8.04722 4.35833 8.14167C4.45278 8.23611 4.5 8.35556 4.5 8.5V11.5C4.5 11.6444 4.45278 11.7639 4.35833 11.8583C4.26389 11.9528 4.14444 12 4 12H1ZM9.33333 3.16667H11.6667V0.833333H9.33333V3.16667ZM9 4C8.85556 4 8.73611 3.95278 8.64167 3.85833C8.54722 3.76389 8.5 3.64444 8.5 3.5V0.5C8.5 0.355556 8.54722 0.236111 8.64167 0.141667C8.73611 0.0472223 8.85556 0 9 0H12C12.1444 0 12.2639 0.0472223 12.3583 0.141667C12.4528 0.236111 12.5 0.355556 12.5 0.5V3.5C12.5 3.64444 12.4528 3.76389 12.3583 3.85833C12.2639 3.95278 12.1444 4 12 4H9ZM9.83333 12V10H8.5V8.66667H11.1667V10.6667H12.5V12H9.83333ZM7.16667 7.33333V6H9.83333V7.33333H7.16667ZM4.5 7.33333V6H3.16667V4.66667H7.16667V6H5.83333V7.33333H4.5ZM5.16667 4V1.33333H6.5V2.66667H7.83333V4H5.16667ZM2 2.5V1.5H3V2.5H2ZM2 10.5V9.5H3V10.5H2ZM10 2.5V1.5H11V2.5H10Z" fill="currentColor"/>
+</svg>
+  
\ No newline at end of file
diff --git a/src/components/views/auth/LoginWithQR.tsx b/src/components/views/auth/LoginWithQR.tsx
new file mode 100644
index 00000000000..f95e618cc52
--- /dev/null
+++ b/src/components/views/auth/LoginWithQR.tsx
@@ -0,0 +1,396 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { MSC3906Rendezvous, MSC3906RendezvousPayload, RendezvousFailureReason } from 'matrix-js-sdk/src/rendezvous';
+import { MSC3886SimpleHttpRendezvousTransport } from 'matrix-js-sdk/src/rendezvous/transports';
+import { MSC3903ECDHPayload, MSC3903ECDHv1RendezvousChannel } from 'matrix-js-sdk/src/rendezvous/channels';
+import { logger } from 'matrix-js-sdk/src/logger';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton from '../elements/AccessibleButton';
+import QRCode from '../elements/QRCode';
+import Spinner from '../elements/Spinner';
+import { Icon as BackButtonIcon } from "../../../../res/img/element-icons/back.svg";
+import { Icon as DevicesIcon } from "../../../../res/img/element-icons/devices.svg";
+import { Icon as WarningBadge } from "../../../../res/img/element-icons/warning-badge.svg";
+import { Icon as InfoIcon } from "../../../../res/img/element-icons/i.svg";
+import { wrapRequestWithDialog } from '../../../utils/UserInteractiveAuth';
+
+/**
+ * The intention of this enum is to have a mode that scans a QR code instead of generating one.
+ */
+export enum Mode {
+    /**
+     * A QR code with be generated and shown
+     */
+    Show = "show",
+}
+
+enum Phase {
+    Loading,
+    ShowingQR,
+    Connecting,
+    Connected,
+    WaitingForDevice,
+    Verifying,
+    Error,
+}
+
+interface IProps {
+    client: MatrixClient;
+    mode: Mode;
+    onFinished(...args: any): void;
+}
+
+interface IState {
+    phase: Phase;
+    rendezvous?: MSC3906Rendezvous;
+    confirmationDigits?: string;
+    failureReason?: RendezvousFailureReason;
+    mediaPermissionError?: boolean;
+}
+
+/**
+ * A component that allows sign in and E2EE set up with a QR code.
+ *
+ * It implements both `login.start` and `login-reciprocate` capabilities as well as both scanning and showing QR codes.
+ *
+ * This uses the unstable feature of MSC3906: https://github.com/matrix-org/matrix-spec-proposals/pull/3906
+ */
+export default class LoginWithQR extends React.Component<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            phase: Phase.Loading,
+        };
+    }
+
+    public componentDidMount(): void {
+        this.updateMode(this.props.mode).then(() => {});
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (prevProps.mode !== this.props.mode) {
+            this.updateMode(this.props.mode).then(() => {});
+        }
+    }
+
+    private async updateMode(mode: Mode) {
+        this.setState({ phase: Phase.Loading });
+        if (this.state.rendezvous) {
+            this.state.rendezvous.onFailure = undefined;
+            await this.state.rendezvous.cancel(RendezvousFailureReason.UserCancelled);
+            this.setState({ rendezvous: undefined });
+        }
+        if (mode === Mode.Show) {
+            await this.generateCode();
+        }
+    }
+
+    public componentWillUnmount(): void {
+        if (this.state.rendezvous) {
+            // eslint-disable-next-line react/no-direct-mutation-state
+            this.state.rendezvous.onFailure = undefined;
+            // calling cancel will call close() as well to clean up the resources
+            this.state.rendezvous.cancel(RendezvousFailureReason.UserCancelled).then(() => {});
+        }
+    }
+
+    private approveLogin = async (): Promise<void> => {
+        if (!this.state.rendezvous) {
+            throw new Error('Rendezvous not found');
+        }
+        this.setState({ phase: Phase.Loading });
+
+        try {
+            logger.info("Requesting login token");
+
+            const { login_token: loginToken } = await wrapRequestWithDialog(this.props.client.requestLoginToken, {
+                matrixClient: this.props.client,
+                title: _t("Sign in new device"),
+            })();
+
+            this.setState({ phase: Phase.WaitingForDevice });
+
+            const newDeviceId = await this.state.rendezvous.approveLoginOnExistingDevice(loginToken);
+            if (!newDeviceId) {
+                // user denied
+                return;
+            }
+            if (!this.props.client.crypto) {
+                // no E2EE to set up
+                this.props.onFinished(true);
+                return;
+            }
+            await this.state.rendezvous.verifyNewDeviceOnExistingDevice();
+            this.props.onFinished(true);
+        } catch (e) {
+            logger.error('Error whilst approving sign in', e);
+            this.setState({ phase: Phase.Error, failureReason: RendezvousFailureReason.Unknown });
+        }
+    };
+
+    private generateCode = async () => {
+        let rendezvous: MSC3906Rendezvous;
+        try {
+            const transport = new MSC3886SimpleHttpRendezvousTransport<MSC3903ECDHPayload>({
+                onFailure: this.onFailure,
+                client: this.props.client,
+            });
+
+            const channel = new MSC3903ECDHv1RendezvousChannel<MSC3906RendezvousPayload>(
+                transport, undefined, this.onFailure,
+            );
+
+            rendezvous = new MSC3906Rendezvous(channel, this.props.client, this.onFailure);
+
+            await rendezvous.generateCode();
+            this.setState({
+                phase: Phase.ShowingQR,
+                rendezvous,
+                failureReason: undefined,
+            });
+        } catch (e) {
+            logger.error('Error whilst generating QR code', e);
+            this.setState({ phase: Phase.Error, failureReason: RendezvousFailureReason.HomeserverLacksSupport });
+            return;
+        }
+
+        try {
+            const confirmationDigits = await rendezvous.startAfterShowingCode();
+            this.setState({ phase: Phase.Connected, confirmationDigits });
+        } catch (e) {
+            logger.error('Error whilst doing QR login', e);
+            // only set to error phase if it hasn't already been set by onFailure or similar
+            if (this.state.phase !== Phase.Error) {
+                this.setState({ phase: Phase.Error, failureReason: RendezvousFailureReason.Unknown });
+            }
+        }
+    };
+
+    private onFailure = (reason: RendezvousFailureReason) => {
+        logger.info(`Rendezvous failed: ${reason}`);
+        this.setState({ phase: Phase.Error, failureReason: reason });
+    };
+
+    public reset() {
+        this.setState({
+            rendezvous: undefined,
+            confirmationDigits: undefined,
+            failureReason: undefined,
+        });
+    }
+
+    private cancelClicked = async (e: React.FormEvent) => {
+        e.preventDefault();
+        await this.state.rendezvous?.cancel(RendezvousFailureReason.UserCancelled);
+        this.reset();
+        this.props.onFinished(false);
+    };
+
+    private declineClicked = async (e: React.FormEvent) => {
+        e.preventDefault();
+        await this.state.rendezvous?.declineLoginOnExistingDevice();
+        this.reset();
+        this.props.onFinished(false);
+    };
+
+    private tryAgainClicked = async (e: React.FormEvent) => {
+        e.preventDefault();
+        this.reset();
+        await this.updateMode(this.props.mode);
+    };
+
+    private onBackClick = async () => {
+        await this.state.rendezvous?.cancel(RendezvousFailureReason.UserCancelled);
+
+        this.props.onFinished(false);
+    };
+
+    private cancelButton = () => <AccessibleButton
+        kind="primary_outline"
+        onClick={this.cancelClicked}
+    >
+        { _t("Cancel") }
+    </AccessibleButton>;
+
+    private simpleSpinner = (description?: string): JSX.Element => {
+        return <div className="mx_LoginWithQR_spinner">
+            <div>
+                <Spinner />
+                { description && <p>{ description }</p> }
+            </div>
+        </div>;
+    };
+
+    public render() {
+        let title: string;
+        let titleIcon: JSX.Element | undefined;
+        let main: JSX.Element | undefined;
+        let buttons: JSX.Element | undefined;
+        let backButton = true;
+        let cancellationMessage: string | undefined;
+        let centreTitle = false;
+
+        switch (this.state.phase) {
+            case Phase.Error:
+                switch (this.state.failureReason) {
+                    case RendezvousFailureReason.Expired:
+                        cancellationMessage = _t("The linking wasn't completed in the required time.");
+                        break;
+                    case RendezvousFailureReason.InvalidCode:
+                        cancellationMessage = _t("The scanned code is invalid.");
+                        break;
+                    case RendezvousFailureReason.UnsupportedAlgorithm:
+                        cancellationMessage = _t("Linking with this device is not supported.");
+                        break;
+                    case RendezvousFailureReason.UserDeclined:
+                        cancellationMessage = _t("The request was declined on the other device.");
+                        break;
+                    case RendezvousFailureReason.OtherDeviceAlreadySignedIn:
+                        cancellationMessage = _t("The other device is already signed in.");
+                        break;
+                    case RendezvousFailureReason.OtherDeviceNotSignedIn:
+                        cancellationMessage = _t("The other device isn't signed in.");
+                        break;
+                    case RendezvousFailureReason.UserCancelled:
+                        cancellationMessage = _t("The request was cancelled.");
+                        break;
+                    case RendezvousFailureReason.Unknown:
+                        cancellationMessage = _t("An unexpected error occurred.");
+                        break;
+                    case RendezvousFailureReason.HomeserverLacksSupport:
+                        cancellationMessage = _t("The homeserver doesn't support signing in another device.");
+                        break;
+                    default:
+                        cancellationMessage = _t("The request was cancelled.");
+                        break;
+                }
+                title = _t("Connection failed");
+                centreTitle = true;
+                titleIcon = <WarningBadge className="error" />;
+                backButton = false;
+                main = <p data-testid="cancellation-message">{ cancellationMessage }</p>;
+                buttons = <>
+                    <AccessibleButton
+                        kind="primary"
+                        onClick={this.tryAgainClicked}
+                    >
+                        { _t("Try again") }
+                    </AccessibleButton>
+                    { this.cancelButton() }
+                </>;
+                break;
+            case Phase.Connected:
+                title = _t("Devices connected");
+                titleIcon = <DevicesIcon className="normal" />;
+                backButton = false;
+                main = <>
+                    <p>{ _t("Check that the code below matches with your other device:") }</p>
+                    <div className="mx_LoginWithQR_confirmationDigits">
+                        { this.state.confirmationDigits }
+                    </div>
+                    <div className="mx_LoginWithQR_confirmationAlert">
+                        <div>
+                            <InfoIcon />
+                        </div>
+                        <div>{ _t("By approving access for this device, it will have full access to your account.") }</div>
+                    </div>
+                </>;
+
+                buttons = <>
+                    <AccessibleButton
+                        data-testid="decline-login-button"
+                        kind="primary_outline"
+                        onClick={this.declineClicked}
+                    >
+                        { _t("Cancel") }
+                    </AccessibleButton>
+                    <AccessibleButton
+                        data-testid="approve-login-button"
+                        kind="primary"
+                        onClick={this.approveLogin}
+                    >
+                        { _t("Approve") }
+                    </AccessibleButton>
+                </>;
+                break;
+            case Phase.ShowingQR:
+                title =_t("Sign in with QR code");
+                if (this.state.rendezvous) {
+                    const code = <div className="mx_LoginWithQR_qrWrapper">
+                        <QRCode data={[{ data: Buffer.from(this.state.rendezvous.code), mode: 'byte' }]} className="mx_QRCode" />
+                    </div>;
+                    main = <>
+                        <p>{ _t("Scan the QR code below with your device that's signed out.") }</p>
+                        <ol>
+                            <li>{ _t("Start at the sign in screen") }</li>
+                            <li>{ _t("Select 'Scan QR code'") }</li>
+                            <li>{ _t("Review and approve the sign in") }</li>
+                        </ol>
+                        { code }
+                    </>;
+                } else {
+                    main = this.simpleSpinner();
+                    buttons = this.cancelButton();
+                }
+                break;
+            case Phase.Loading:
+                main = this.simpleSpinner();
+                break;
+            case Phase.Connecting:
+                main = this.simpleSpinner(_t("Connecting..."));
+                buttons = this.cancelButton();
+                break;
+            case Phase.WaitingForDevice:
+                main = this.simpleSpinner(_t("Waiting for device to sign in"));
+                buttons = this.cancelButton();
+                break;
+            case Phase.Verifying:
+                title = _t("Success");
+                centreTitle = true;
+                main = this.simpleSpinner(_t("Completing set up of your new device"));
+                break;
+        }
+
+        return (
+            <div className="mx_LoginWithQR">
+                <div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
+                    { backButton ?
+                        <AccessibleButton
+                            data-testid="back-button"
+                            className="mx_LoginWithQR_BackButton"
+                            onClick={this.onBackClick}
+                            title="Back"
+                        >
+                            <BackButtonIcon />
+                        </AccessibleButton>
+                        : null }
+                    <h1>{ titleIcon }{ title }</h1>
+                </div>
+                <div className="mx_LoginWithQR_main">
+                    { main }
+                </div>
+                <div className="mx_LoginWithQR_buttons">
+                    { buttons }
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.tsx b/src/components/views/dialogs/InteractiveAuthDialog.tsx
index 6f10790811e..5d8fc2f952d 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.tsx
+++ b/src/components/views/dialogs/InteractiveAuthDialog.tsx
@@ -38,7 +38,7 @@ interface IDialogAesthetics {
     };
 }
 
-interface IProps extends IDialogProps {
+export interface InteractiveAuthDialogProps extends IDialogProps {
     // matrix client to use for UI auth requests
     matrixClient: MatrixClient;
 
@@ -82,8 +82,8 @@ interface IState {
     uiaStagePhase: number | string;
 }
 
-export default class InteractiveAuthDialog extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
+export default class InteractiveAuthDialog extends React.Component<InteractiveAuthDialogProps, IState> {
+    constructor(props: InteractiveAuthDialogProps) {
         super(props);
 
         this.state = {
diff --git a/src/components/views/settings/DevicesPanel.tsx b/src/components/views/settings/DevicesPanel.tsx
index f32f7997fed..1b06fa06fe6 100644
--- a/src/components/views/settings/DevicesPanel.tsx
+++ b/src/components/views/settings/DevicesPanel.tsx
@@ -19,13 +19,14 @@ import classNames from 'classnames';
 import { IMyDevice } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CrossSigningInfo } from "matrix-js-sdk/src/crypto/CrossSigning";
+import { CryptoEvent } from 'matrix-js-sdk/src/crypto';
 
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import DevicesPanelEntry from "./DevicesPanelEntry";
 import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { deleteDevicesWithInteractiveAuth } from './devices/deleteDevices';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 interface IProps {
     className?: string;
@@ -40,6 +41,8 @@ interface IState {
 }
 
 export default class DevicesPanel extends React.Component<IProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
     private unmounted = false;
 
     constructor(props: IProps) {
@@ -52,15 +55,22 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
+        this.context.on(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
         this.loadDevices();
     }
 
     public componentWillUnmount(): void {
+        this.context.off(CryptoEvent.DevicesUpdated, this.onDevicesUpdated);
         this.unmounted = true;
     }
 
+    private onDevicesUpdated = (users: string[]) => {
+        if (!users.includes(this.context.getUserId())) return;
+        this.loadDevices();
+    };
+
     private loadDevices(): void {
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
         cli.getDevices().then(
             (resp) => {
                 if (this.unmounted) { return; }
@@ -111,7 +121,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
     private isDeviceVerified(device: IMyDevice): boolean | null {
         try {
-            const cli = MatrixClientPeg.get();
+            const cli = this.context;
             const deviceInfo = cli.getStoredDevice(cli.getUserId(), device.device_id);
             return this.state.crossSigningInfo.checkDeviceTrust(
                 this.state.crossSigningInfo,
@@ -184,7 +194,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
         try {
             await deleteDevicesWithInteractiveAuth(
-                MatrixClientPeg.get(),
+                this.context,
                 this.state.selectedDevices,
                 (success) => {
                     if (success) {
@@ -208,7 +218,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     };
 
     private renderDevice = (device: IMyDevice): JSX.Element => {
-        const myDeviceId = MatrixClientPeg.get().getDeviceId();
+        const myDeviceId = this.context.getDeviceId();
         const myDevice = this.state.devices.find((device) => (device.device_id === myDeviceId));
 
         const isOwnDevice = device.device_id === myDeviceId;
@@ -246,7 +256,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
             return <Spinner />;
         }
 
-        const myDeviceId = MatrixClientPeg.get().getDeviceId();
+        const myDeviceId = this.context.getDeviceId();
         const myDevice = devices.find((device) => (device.device_id === myDeviceId));
 
         if (!myDevice) {
diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx
new file mode 100644
index 00000000000..20cdb37902e
--- /dev/null
+++ b/src/components/views/settings/devices/LoginWithQRSection.tsx
@@ -0,0 +1,63 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import type { IServerVersions } from 'matrix-js-sdk/src/matrix';
+import { _t } from '../../../../languageHandler';
+import AccessibleButton from '../../elements/AccessibleButton';
+import SettingsSubsection from '../shared/SettingsSubsection';
+import SettingsStore from '../../../../settings/SettingsStore';
+
+interface IProps {
+    onShowQr: () => void;
+    versions: IServerVersions;
+}
+
+export default class LoginWithQRSection extends React.Component<IProps> {
+    public constructor(props: IProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const msc3882Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3882'];
+        const msc3886Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3886'];
+
+        // Needs to be enabled as a feature + server support MSC3886 or have a default rendezvous server configured:
+        const offerShowQr = SettingsStore.getValue("feature_qr_signin_reciprocate_show") &&
+            msc3882Supported && msc3886Supported;  // We don't support configuration of a fallback at the moment so we just check the MSCs
+
+        // don't show anything if no method is available
+        if (!offerShowQr) {
+            return null;
+        }
+
+        return <SettingsSubsection
+            heading={_t('Sign in with QR code')}
+        >
+            <div className="mx_LoginWithQRSection">
+                <p className="mx_SettingsTab_subsectionText">{
+                    _t("You can use this device to sign in a new device with a QR code. You will need to " +
+                    "scan the QR code shown on this device with your device that's signed out.")
+                }</p>
+                <AccessibleButton
+                    onClick={this.props.onShowQr}
+                    kind="primary"
+                >{ _t("Show QR code") }</AccessibleButton>
+            </div>
+        </SettingsSubsection>;
+    }
+}
diff --git a/src/components/views/settings/devices/useOwnDevices.ts b/src/components/views/settings/devices/useOwnDevices.ts
index c3b8cb0212a..f56ed85c87b 100644
--- a/src/components/views/settings/devices/useOwnDevices.ts
+++ b/src/components/views/settings/devices/useOwnDevices.ts
@@ -31,6 +31,7 @@ import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/reque
 import { MatrixError } from "matrix-js-sdk/src/http-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { LocalNotificationSettings } from "matrix-js-sdk/src/@types/local_notifications";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { _t } from "../../../../languageHandler";
@@ -179,6 +180,12 @@ export const useOwnDevices = (): DevicesState => {
         refreshDevices();
     }, [refreshDevices]);
 
+    useEventEmitter(matrixClient, CryptoEvent.DevicesUpdated, (users: string[]): void => {
+        if (users.includes(userId)) {
+            refreshDevices();
+        }
+    });
+
     useEventEmitter(matrixClient, ClientEvent.AccountData, (event: MatrixEvent): void => {
         const type = event.getType();
         if (type.startsWith(LOCAL_NOTIFICATION_SETTINGS_PREFIX.name)) {
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
index f4e4e55513d..b960e65a61e 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
@@ -38,6 +38,9 @@ import InlineSpinner from "../../../elements/InlineSpinner";
 import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
 import { showDialog as showAnalyticsLearnMoreDialog } from "../../../dialogs/AnalyticsLearnMoreDialog";
 import { privateShouldBeEncrypted } from "../../../../../utils/rooms";
+import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
+import LoginWithQRSection from '../../devices/LoginWithQRSection';
+import type { IServerVersions } from 'matrix-js-sdk/src/matrix';
 
 interface IIgnoredUserProps {
     userId: string;
@@ -72,6 +75,8 @@ interface IState {
     waitingUnignored: string[];
     managingInvites: boolean;
     invitedRoomIds: Set<string>;
+    showLoginWithQR: Mode | null;
+    versions?: IServerVersions;
 }
 
 export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
@@ -88,6 +93,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
             waitingUnignored: [],
             managingInvites: false,
             invitedRoomIds,
+            showLoginWithQR: null,
         };
     }
 
@@ -102,6 +108,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(RoomEvent.MyMembership, this.onMyMembership);
+        MatrixClientPeg.get().getVersions().then(versions => this.setState({ versions }));
     }
 
     public componentWillUnmount(): void {
@@ -251,6 +258,14 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         );
     }
 
+    private onShowQRClicked = (): void => {
+        this.setState({ showLoginWithQR: Mode.Show });
+    };
+
+    private onLoginWithQRFinished = (): void => {
+        this.setState({ showLoginWithQR: null });
+    };
+
     public render(): JSX.Element {
         const secureBackup = (
             <div className='mx_SettingsTab_section'>
@@ -347,6 +362,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         }
 
         const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
+        const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
         const devicesSection = useNewSessionManager
             ? null
             : <>
@@ -363,8 +379,20 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     </span>
                     <DevicesPanel />
                 </div>
+                { showQrCodeEnabled ?
+                    <LoginWithQRSection onShowQr={this.onShowQRClicked} versions={this.state.versions} />
+                    : null
+                }
             </>;
 
+        const client = MatrixClientPeg.get();
+
+        if (showQrCodeEnabled && this.state.showLoginWithQR) {
+            return <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
+                <LoginWithQR onFinished={this.onLoginWithQRFinished} mode={this.state.showLoginWithQR} client={client} />
+            </div>;
+        }
+
         return (
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                 { warning }
diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
index d1fbb6ce5c1..49ca1bdbf29 100644
--- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
@@ -32,6 +32,10 @@ import SecurityRecommendations from '../../devices/SecurityRecommendations';
 import { DeviceSecurityVariation, ExtendedDevice } from '../../devices/types';
 import { deleteDevicesWithInteractiveAuth } from '../../devices/deleteDevices';
 import SettingsTab from '../SettingsTab';
+import LoginWithQRSection from '../../devices/LoginWithQRSection';
+import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
+import SettingsStore from '../../../../../settings/SettingsStore';
+import { useAsyncMemo } from '../../../../../hooks/useAsyncMemo';
 
 const useSignOut = (
     matrixClient: MatrixClient,
@@ -104,6 +108,7 @@ const SessionManagerTab: React.FC = () => {
     const matrixClient = useContext(MatrixClientContext);
     const userId = matrixClient.getUserId();
     const currentUserMember = userId && matrixClient.getUser(userId) || undefined;
+    const clientVersions = useAsyncMemo(() => matrixClient.getVersions(), [matrixClient]);
 
     const onDeviceExpandToggle = (deviceId: ExtendedDevice['device_id']): void => {
         if (expandedDeviceIds.includes(deviceId)) {
@@ -175,6 +180,26 @@ const SessionManagerTab: React.FC = () => {
         onSignOutOtherDevices(Object.keys(otherDevices));
     }: undefined;
 
+    const [signInWithQrMode, setSignInWithQrMode] = useState<Mode | null>();
+
+    const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
+
+    const onQrFinish = useCallback(() => {
+        setSignInWithQrMode(null);
+    }, [setSignInWithQrMode]);
+
+    const onShowQrClicked = useCallback(() => {
+        setSignInWithQrMode(Mode.Show);
+    }, [setSignInWithQrMode]);
+
+    if (showQrCodeEnabled && signInWithQrMode) {
+        return <LoginWithQR
+            mode={signInWithQrMode}
+            onFinished={onQrFinish}
+            client={matrixClient}
+        />;
+    }
+
     return <SettingsTab heading={_t('Sessions')}>
         <SecurityRecommendations
             devices={devices}
@@ -222,6 +247,10 @@ const SessionManagerTab: React.FC = () => {
                 />
             </SettingsSubsection>
         }
+        { showQrCodeEnabled ?
+            <LoginWithQRSection onShowQr={onShowQrClicked} versions={clientVersions} />
+            : null
+        }
     </SettingsTab>;
 };
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3f078172b3f..3f69088f78e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -935,6 +935,7 @@
     "New session manager": "New session manager",
     "Have greater visibility and control over all your sessions.": "Have greater visibility and control over all your sessions.",
     "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.": "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
@@ -1788,6 +1789,9 @@
     "Filter devices": "Filter devices",
     "Show": "Show",
     "%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessions selected",
+    "Sign in with QR code": "Sign in with QR code",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.",
+    "Show QR code": "Show QR code",
     "Security recommendations": "Security recommendations",
     "Improve your account security by following these recommendations": "Improve your account security by following these recommendations",
     "View all": "View all",
@@ -3181,6 +3185,26 @@
     "Submit": "Submit",
     "Something went wrong in confirming your identity. Cancel and try again.": "Something went wrong in confirming your identity. Cancel and try again.",
     "Start authentication": "Start authentication",
+    "Sign in new device": "Sign in new device",
+    "The linking wasn't completed in the required time.": "The linking wasn't completed in the required time.",
+    "The scanned code is invalid.": "The scanned code is invalid.",
+    "Linking with this device is not supported.": "Linking with this device is not supported.",
+    "The request was declined on the other device.": "The request was declined on the other device.",
+    "The other device is already signed in.": "The other device is already signed in.",
+    "The other device isn't signed in.": "The other device isn't signed in.",
+    "The request was cancelled.": "The request was cancelled.",
+    "An unexpected error occurred.": "An unexpected error occurred.",
+    "The homeserver doesn't support signing in another device.": "The homeserver doesn't support signing in another device.",
+    "Devices connected": "Devices connected",
+    "Check that the code below matches with your other device:": "Check that the code below matches with your other device:",
+    "By approving access for this device, it will have full access to your account.": "By approving access for this device, it will have full access to your account.",
+    "Scan the QR code below with your device that's signed out.": "Scan the QR code below with your device that's signed out.",
+    "Start at the sign in screen": "Start at the sign in screen",
+    "Select 'Scan QR code'": "Select 'Scan QR code'",
+    "Review and approve the sign in": "Review and approve the sign in",
+    "Connecting...": "Connecting...",
+    "Waiting for device to sign in": "Waiting for device to sign in",
+    "Completing set up of your new device": "Completing set up of your new device",
     "Enter password": "Enter password",
     "Nice, strong password!": "Nice, strong password!",
     "Password is allowed, but unsafe": "Password is allowed, but unsafe",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 9b6e09c772b..723b789ab01 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -494,6 +494,16 @@ export const SETTINGS: {[setting: string]: ISetting} = {
             </>,
         },
     },
+    "feature_qr_signin_reciprocate_show": {
+        isFeature: true,
+        labsGroup: LabGroup.Experimental,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td(
+            "Allow a QR code to be shown in session manager to sign in another device " +
+            "(requires compatible homeserver)",
+        ),
+        default: false,
+    },
     "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
diff --git a/src/utils/UserInteractiveAuth.ts b/src/utils/UserInteractiveAuth.ts
new file mode 100644
index 00000000000..e3088fb3cb4
--- /dev/null
+++ b/src/utils/UserInteractiveAuth.ts
@@ -0,0 +1,55 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { IAuthData } from "matrix-js-sdk/src/interactive-auth";
+import { UIAResponse } from "matrix-js-sdk/src/@types/uia";
+
+import Modal from "../Modal";
+import InteractiveAuthDialog, { InteractiveAuthDialogProps } from "../components/views/dialogs/InteractiveAuthDialog";
+
+type FunctionWithUIA<R, A> = (auth?: IAuthData, ...args: A[]) => Promise<UIAResponse<R>>;
+
+export function wrapRequestWithDialog<R, A = any>(
+    requestFunction: FunctionWithUIA<R, A>,
+    opts: Omit<InteractiveAuthDialogProps, "makeRequest" | "onFinished">,
+): ((...args: A[]) => Promise<R>) {
+    return async function(...args): Promise<R> {
+        return new Promise((resolve, reject) => {
+            const boundFunction = requestFunction.bind(opts.matrixClient) as FunctionWithUIA<R, A>;
+            boundFunction(undefined, ...args)
+                .then((res) => resolve(res as R))
+                .catch(error => {
+                    if (error.httpStatus !== 401 || !error.data?.flows) {
+                        // doesn't look like an interactive-auth failure
+                        return reject(error);
+                    }
+
+                    Modal.createDialog(InteractiveAuthDialog, {
+                        ...opts,
+                        authData: error.data,
+                        makeRequest: (authData) => boundFunction(authData, ...args),
+                        onFinished: (success, result) => {
+                            if (success) {
+                                resolve(result);
+                            } else {
+                                reject(result);
+                            }
+                        },
+                    });
+                });
+        });
+    };
+}
diff --git a/test/components/views/settings/DevicesPanel-test.tsx b/test/components/views/settings/DevicesPanel-test.tsx
index a7baf139af3..81f6fb328a6 100644
--- a/test/components/views/settings/DevicesPanel-test.tsx
+++ b/test/components/views/settings/DevicesPanel-test.tsx
@@ -28,6 +28,7 @@ import {
     mkPusher,
     mockClientMethodsUser,
 } from "../../../test-utils";
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
 
 describe('<DevicesPanel />', () => {
     const userId = '@alice:server.org';
@@ -46,7 +47,10 @@ describe('<DevicesPanel />', () => {
         setPusher: jest.fn(),
     });
 
-    const getComponent = () => <DevicesPanel />;
+    const getComponent = () =>
+        <MatrixClientContext.Provider value={mockClient}>
+            <DevicesPanel />
+        </MatrixClientContext.Provider>;
 
     beforeEach(() => {
         jest.clearAllMocks();
diff --git a/test/components/views/settings/devices/LoginWithQR-test.tsx b/test/components/views/settings/devices/LoginWithQR-test.tsx
new file mode 100644
index 00000000000..c106b2f9a86
--- /dev/null
+++ b/test/components/views/settings/devices/LoginWithQR-test.tsx
@@ -0,0 +1,297 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { mocked } from 'jest-mock';
+import React from 'react';
+import { MSC3886SimpleHttpRendezvousTransport } from 'matrix-js-sdk/src/rendezvous/transports';
+import { MSC3906Rendezvous, RendezvousFailureReason } from 'matrix-js-sdk/src/rendezvous';
+
+import LoginWithQR, { Mode } from '../../../../../src/components/views/auth/LoginWithQR';
+import type { MatrixClient } from 'matrix-js-sdk/src/matrix';
+import { flushPromisesWithFakeTimers } from '../../../../test-utils';
+
+jest.useFakeTimers();
+
+jest.mock('matrix-js-sdk/src/rendezvous');
+jest.mock('matrix-js-sdk/src/rendezvous/transports');
+jest.mock('matrix-js-sdk/src/rendezvous/channels');
+
+function makeClient() {
+    return mocked({
+        getUser: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+        isUserIgnored: jest.fn(),
+        isCryptoEnabled: jest.fn(),
+        getUserId: jest.fn(),
+        on: jest.fn(),
+        isSynapseAdministrator: jest.fn().mockResolvedValue(false),
+        isRoomEncrypted: jest.fn().mockReturnValue(false),
+        mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
+        doesServerSupportUnstableFeature: jest.fn().mockReturnValue(true),
+        removeListener: jest.fn(),
+        requestLoginToken: jest.fn(),
+        currentState: {
+            on: jest.fn(),
+        },
+    } as unknown as MatrixClient);
+}
+
+describe('<LoginWithQR />', () => {
+    const client = makeClient();
+    const defaultProps = {
+        mode: Mode.Show,
+        onFinished: jest.fn(),
+    };
+    const mockConfirmationDigits = 'mock-confirmation-digits';
+    const newDeviceId = 'new-device-id';
+
+    const getComponent = (props: { client: MatrixClient, onFinished?: () => void }) =>
+        (<LoginWithQR {...defaultProps} {...props} />);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.spyOn(MSC3906Rendezvous.prototype, 'generateCode').mockRestore();
+        jest.spyOn(MSC3906Rendezvous.prototype, 'cancel').mockResolvedValue();
+        jest.spyOn(MSC3906Rendezvous.prototype, 'declineLoginOnExistingDevice').mockResolvedValue();
+        jest.spyOn(MSC3906Rendezvous.prototype, 'startAfterShowingCode').mockResolvedValue(mockConfirmationDigits);
+        jest.spyOn(MSC3906Rendezvous.prototype, 'approveLoginOnExistingDevice').mockResolvedValue(newDeviceId);
+        client.requestLoginToken.mockResolvedValue({
+            login_token: 'token',
+            expires_in: 1000,
+        });
+        // @ts-ignore
+        client.crypto = undefined;
+    });
+
+    it('no content in case of no support', async () => {
+        // simulate no support
+        jest.spyOn(MSC3906Rendezvous.prototype, 'generateCode').mockRejectedValue('');
+        const { container } = render(getComponent({ client }));
+        await waitFor(() => screen.getAllByTestId('cancellation-message').length === 1);
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders spinner while generating code', async () => {
+        const { container } = render(getComponent({ client }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it('cancels rendezvous after user goes back', async () => {
+        const { getByTestId } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('back-button'));
+
+        // wait for cancel
+        await flushPromisesWithFakeTimers();
+
+        expect(rendezvous.cancel).toHaveBeenCalledWith(RendezvousFailureReason.UserCancelled);
+    });
+
+    it('displays qr code after it is created', async () => {
+        const { container, getByText } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        await flushPromisesWithFakeTimers();
+
+        expect(rendezvous.generateCode).toHaveBeenCalled();
+        expect(getByText('Sign in with QR code')).toBeTruthy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it('displays confirmation digits after connected to rendezvous', async () => {
+        const { container, getByText } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        expect(container).toMatchSnapshot();
+        expect(getByText(mockConfirmationDigits)).toBeTruthy();
+    });
+
+    it('displays unknown error if connection to rendezvous fails', async () => {
+        const { container } = render(getComponent({ client }));
+        expect(MSC3886SimpleHttpRendezvousTransport).toHaveBeenCalledWith({
+            onFailure: expect.any(Function),
+            client,
+        });
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+        mocked(rendezvous).startAfterShowingCode.mockRejectedValue('oups');
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it('declines login', async () => {
+        const { getByTestId } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('decline-login-button'));
+
+        expect(rendezvous.declineLoginOnExistingDevice).toHaveBeenCalled();
+    });
+
+    it('displays error when approving login fails', async () => {
+        const { container, getByTestId } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+        client.requestLoginToken.mockRejectedValue('oups');
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('approve-login-button'));
+
+        expect(client.requestLoginToken).toHaveBeenCalled();
+        // flush token request promise
+        await flushPromisesWithFakeTimers();
+        await flushPromisesWithFakeTimers();
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it('approves login and waits for new device', async () => {
+        const { container, getByTestId, getByText } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('approve-login-button'));
+
+        expect(client.requestLoginToken).toHaveBeenCalled();
+        // flush token request promise
+        await flushPromisesWithFakeTimers();
+        await flushPromisesWithFakeTimers();
+
+        expect(getByText('Waiting for device to sign in')).toBeTruthy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it('does not continue with verification when user denies login', async () => {
+        const onFinished = jest.fn();
+        const { getByTestId } = render(getComponent({ client, onFinished }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+        // no device id returned => user denied
+        mocked(rendezvous).approveLoginOnExistingDevice.mockReturnValue(undefined);
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('approve-login-button'));
+
+        // flush token request promise
+        await flushPromisesWithFakeTimers();
+        await flushPromisesWithFakeTimers();
+
+        expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalled();
+
+        await flushPromisesWithFakeTimers();
+        expect(onFinished).not.toHaveBeenCalled();
+        expect(rendezvous.verifyNewDeviceOnExistingDevice).not.toHaveBeenCalled();
+    });
+
+    it('waits for device approval on existing device and finishes when crypto is not setup', async () => {
+        const { getByTestId } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('approve-login-button'));
+
+        // flush token request promise
+        await flushPromisesWithFakeTimers();
+        await flushPromisesWithFakeTimers();
+
+        expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalled();
+        await flushPromisesWithFakeTimers();
+        expect(defaultProps.onFinished).toHaveBeenCalledWith(true);
+        // didnt attempt verification
+        expect(rendezvous.verifyNewDeviceOnExistingDevice).not.toHaveBeenCalled();
+    });
+
+    it('waits for device approval on existing device and verifies device', async () => {
+        const { getByTestId } = render(getComponent({ client }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+        // @ts-ignore assign to private prop
+        rendezvous.code = 'rendezvous-code';
+        // we just check for presence of crypto
+        // pretend it is set up
+        // @ts-ignore
+        client.crypto = {};
+
+        // flush generate code promise
+        await flushPromisesWithFakeTimers();
+        // flush waiting for connection promise
+        await flushPromisesWithFakeTimers();
+
+        fireEvent.click(getByTestId('approve-login-button'));
+
+        // flush token request promise
+        await flushPromisesWithFakeTimers();
+        await flushPromisesWithFakeTimers();
+
+        expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalled();
+        // flush login approval
+        await flushPromisesWithFakeTimers();
+        expect(rendezvous.verifyNewDeviceOnExistingDevice).toHaveBeenCalled();
+        // flush verification
+        await flushPromisesWithFakeTimers();
+        expect(defaultProps.onFinished).toHaveBeenCalledWith(true);
+    });
+});
diff --git a/test/components/views/settings/devices/LoginWithQRSection-test.tsx b/test/components/views/settings/devices/LoginWithQRSection-test.tsx
new file mode 100644
index 00000000000..711f4710350
--- /dev/null
+++ b/test/components/views/settings/devices/LoginWithQRSection-test.tsx
@@ -0,0 +1,94 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from '@testing-library/react';
+import { mocked } from 'jest-mock';
+import { IServerVersions, MatrixClient } from 'matrix-js-sdk/src/matrix';
+import React from 'react';
+
+import LoginWithQRSection from '../../../../../src/components/views/settings/devices/LoginWithQRSection';
+import { MatrixClientPeg } from '../../../../../src/MatrixClientPeg';
+import { SettingLevel } from '../../../../../src/settings/SettingLevel';
+import SettingsStore from '../../../../../src/settings/SettingsStore';
+
+function makeClient() {
+    return mocked({
+        getUser: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+        isUserIgnored: jest.fn(),
+        isCryptoEnabled: jest.fn(),
+        getUserId: jest.fn(),
+        on: jest.fn(),
+        isSynapseAdministrator: jest.fn().mockResolvedValue(false),
+        isRoomEncrypted: jest.fn().mockReturnValue(false),
+        mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
+        removeListener: jest.fn(),
+        currentState: {
+            on: jest.fn(),
+        },
+    } as unknown as MatrixClient);
+}
+
+function makeVersions(unstableFeatures: Record<string, boolean>): IServerVersions {
+    return {
+        versions: [],
+        unstable_features: unstableFeatures,
+    };
+}
+
+describe('<LoginWithQRSection />', () => {
+    beforeAll(() => {
+        jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(makeClient());
+    });
+
+    const defaultProps = {
+        onShowQr: () => {},
+        versions: undefined,
+    };
+
+    const getComponent = (props = {}) =>
+        (<LoginWithQRSection {...defaultProps} {...props} />);
+
+    describe('should not render', () => {
+        it('no support at all', () => {
+            const { container } = render(getComponent());
+            expect(container).toMatchSnapshot();
+        });
+
+        it('feature enabled', async () => {
+            await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
+            const { container } = render(getComponent());
+            expect(container).toMatchSnapshot();
+        });
+
+        it('only feature + MSC3882 enabled', async () => {
+            await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
+            const { container } = render(getComponent({ versions: makeVersions({ 'org.matrix.msc3882': true }) }));
+            expect(container).toMatchSnapshot();
+        });
+    });
+
+    describe('should render panel', () => {
+        it('enabled by feature + MSC3882 + MSC3886', async () => {
+            await SettingsStore.setValue('feature_qr_signin_reciprocate_show', null, SettingLevel.DEVICE, true);
+            const { container } = render(getComponent({ versions: makeVersions({
+                'org.matrix.msc3882': true,
+                'org.matrix.msc3886': true,
+            }) }));
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
new file mode 100644
index 00000000000..91fe73abf40
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LoginWithQR /> approves login and waits for new device 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class=""
+    >
+      <div
+        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        data-testid="back-button"
+        role="button"
+        tabindex="0"
+        title="Back"
+      >
+        <div />
+      </div>
+      <h1 />
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading..."
+              class="mx_Spinner_icon"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+          <p>
+            Waiting for device to sign in
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> displays confirmation digits after connected to rendezvous 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class=""
+    >
+      <h1>
+        <div
+          class="normal"
+        />
+        Devices connected
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p>
+        Check that the code below matches with your other device:
+      </p>
+      <div
+        class="mx_LoginWithQR_confirmationDigits"
+      >
+        mock-confirmation-digits
+      </div>
+      <div
+        class="mx_LoginWithQR_confirmationAlert"
+      >
+        <div>
+          <div />
+        </div>
+        <div>
+          By approving access for this device, it will have full access to your account.
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        data-testid="decline-login-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        data-testid="approve-login-button"
+        role="button"
+        tabindex="0"
+      >
+        Approve
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> displays error when approving login fails 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class="mx_LoginWithQR_centreTitle"
+    >
+      <h1>
+        <div
+          class="error"
+        />
+        Connection failed
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </div>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> displays qr code after it is created 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class=""
+    >
+      <div
+        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        data-testid="back-button"
+        role="button"
+        tabindex="0"
+        title="Back"
+      >
+        <div />
+      </div>
+      <h1>
+        Sign in with QR code
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p>
+        Scan the QR code below with your device that's signed out.
+      </p>
+      <ol>
+        <li>
+          Start at the sign in screen
+        </li>
+        <li>
+          Select 'Scan QR code'
+        </li>
+        <li>
+          Review and approve the sign in
+        </li>
+      </ol>
+      <div
+        class="mx_LoginWithQR_qrWrapper"
+      >
+        <div
+          class="mx_QRCode mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading..."
+              class="mx_Spinner_icon"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> displays unknown error if connection to rendezvous fails 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class="mx_LoginWithQR_centreTitle"
+    >
+      <h1>
+        <div
+          class="error"
+        />
+        Connection failed
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </div>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> no content in case of no support 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class="mx_LoginWithQR_centreTitle"
+    >
+      <h1>
+        <div
+          class="error"
+        />
+        Connection failed
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p
+        data-testid="cancellation-message"
+      >
+        The homeserver doesn't support signing in another device.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </div>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQR /> renders spinner while generating code 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+  >
+    <div
+      class=""
+    >
+      <div
+        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        data-testid="back-button"
+        role="button"
+        tabindex="0"
+        title="Back"
+      >
+        <div />
+      </div>
+      <h1 />
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading..."
+              class="mx_Spinner_icon"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
new file mode 100644
index 00000000000..2cf0d24cc6c
--- /dev/null
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LoginWithQRSection /> should not render feature enabled 1`] = `<div />`;
+
+exports[`<LoginWithQRSection /> should not render no support at all 1`] = `<div />`;
+
+exports[`<LoginWithQRSection /> should not render only feature + MSC3882 enabled 1`] = `<div />`;
+
+exports[`<LoginWithQRSection /> should render panel enabled by feature + MSC3882 + MSC3886 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Sign in with QR code
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div
+        class="mx_LoginWithQRSection"
+      >
+        <p
+          class="mx_SettingsTab_subsectionText"
+        >
+          You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.
+        </p>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+          role="button"
+          tabindex="0"
+        >
+          Show QR code
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
index bddb493463f..3497f2f161f 100644
--- a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
@@ -17,6 +17,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import SecurityUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
+import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
 import SettingsStore from '../../../../../../src/settings/SettingsStore';
 import {
     getMockClientWithEventEmitter,
@@ -31,11 +32,10 @@ describe('<SecurityUserSettingsTab />', () => {
     const defaultProps = {
         closeSettingsFn: jest.fn(),
     };
-    const getComponent = () => <SecurityUserSettingsTab {...defaultProps} />;
 
     const userId = '@alice:server.org';
     const deviceId = 'alices-device';
-    getMockClientWithEventEmitter({
+    const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
         ...mockClientMethodsServer(),
         ...mockClientMethodsDevice(deviceId),
@@ -44,6 +44,11 @@ describe('<SecurityUserSettingsTab />', () => {
         getIgnoredUsers: jest.fn(),
     });
 
+    const getComponent = () =>
+        <MatrixClientContext.Provider value={mockClient}>
+            <SecurityUserSettingsTab {...defaultProps} />
+        </MatrixClientContext.Provider>;
+
     const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
 
     beforeEach(() => {
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 5bcb6cc36c9..7826b3cc809 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -92,6 +92,7 @@ describe('<SessionManagerTab />', () => {
         getPushers: jest.fn(),
         setPusher: jest.fn(),
         setLocalNotificationSettings: jest.fn(),
+        getVersions: jest.fn().mockResolvedValue({}),
     });
 
     const defaultProps = {};
diff --git a/test/test-utils/client.ts b/test/test-utils/client.ts
index d3274c589a8..e0c532c0216 100644
--- a/test/test-utils/client.ts
+++ b/test/test-utils/client.ts
@@ -104,6 +104,7 @@ export const mockClientMethodsServer = (): Partial<Record<MethodKeysOf<MatrixCli
     getCapabilities: jest.fn().mockReturnValue({}),
     getClientWellKnown: jest.fn().mockReturnValue({}),
     doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(false),
+    getVersions: jest.fn().mockResolvedValue({}),
     isFallbackICEServerAllowed: jest.fn(),
 });
 

From bb0c175b7e46b0245ffab226cd112d4b34e0ad4e Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 19 Oct 2022 15:01:14 +0200
Subject: [PATCH 011/113] Display info dialogs if unable to start voice
 broadcasts (#9453)

---
 src/components/structures/RoomView.tsx        |   6 -
 .../views/rooms/MessageComposer.tsx           |   9 +-
 src/contexts/RoomContext.ts                   |   1 -
 src/i18n/strings/en_EN.json                   |   4 +
 src/voice-broadcast/index.ts                  |   1 +
 .../utils/hasRoomLiveVoiceBroadcast.ts        |  54 +++++++
 .../utils/startNewVoiceBroadcastRecording.ts  |  76 ---------
 .../utils/startNewVoiceBroadcastRecording.tsx | 136 ++++++++++++++++
 .../views/rooms/MessageComposer-test.tsx      |  13 +-
 .../rooms/MessageComposerButtons-test.tsx     |   1 -
 .../views/rooms/SendMessageComposer-test.tsx  |   1 -
 .../wysiwyg_composer/WysiwygComposer-test.tsx |   1 -
 .../rooms/wysiwyg_composer/message-test.ts    |   1 -
 ...artNewVoiceBroadcastRecording-test.ts.snap |  70 ++++++++
 .../utils/hasRoomLiveVoiceBroadcast-test.ts   | 144 +++++++++++++++++
 .../startNewVoiceBroadcastRecording-test.ts   | 151 +++++++++++-------
 test/voice-broadcast/utils/test-utils.ts      |  37 +++++
 17 files changed, 546 insertions(+), 160 deletions(-)
 create mode 100644 src/voice-broadcast/utils/hasRoomLiveVoiceBroadcast.ts
 delete mode 100644 src/voice-broadcast/utils/startNewVoiceBroadcastRecording.ts
 create mode 100644 src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
 create mode 100644 test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
 create mode 100644 test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
 create mode 100644 test/voice-broadcast/utils/test-utils.ts

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 77245e0eb81..2dfe61aefa3 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -113,7 +113,6 @@ import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
 import { ShowThreadPayload } from "../../dispatcher/payloads/ShowThreadPayload";
 import { RoomStatusBarUnsentMessages } from './RoomStatusBarUnsentMessages';
 import { LargeLoader } from './LargeLoader';
-import { VoiceBroadcastInfoEventType } from '../../voice-broadcast';
 import { isVideoRoom } from '../../utils/video-rooms';
 import { SDKContext } from '../../contexts/SDKContext';
 import { CallStore, CallStoreEvent } from "../../stores/CallStore";
@@ -199,7 +198,6 @@ export interface IRoomState {
     upgradeRecommendation?: IRecommendedVersion;
     canReact: boolean;
     canSendMessages: boolean;
-    canSendVoiceBroadcasts: boolean;
     tombstone?: MatrixEvent;
     resizing: boolean;
     layout: Layout;
@@ -404,7 +402,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             statusBarVisible: false,
             canReact: false,
             canSendMessages: false,
-            canSendVoiceBroadcasts: false,
             resizing: false,
             layout: SettingsStore.getValue("layout"),
             lowBandwidth: SettingsStore.getValue("lowBandwidth"),
@@ -1377,12 +1374,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             );
             const canSendMessages = room.maySendMessage();
             const canSelfRedact = room.currentState.maySendEvent(EventType.RoomRedaction, me);
-            const canSendVoiceBroadcasts = room.currentState.maySendEvent(VoiceBroadcastInfoEventType, me);
 
             this.setState({
                 canReact,
                 canSendMessages,
-                canSendVoiceBroadcasts,
                 canSelfRedact,
             });
         }
@@ -2253,7 +2248,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     resizeNotifier={this.props.resizeNotifier}
                     replyToEvent={this.state.replyToEvent}
                     permalinkCreator={this.permalinkCreator}
-                    showVoiceBroadcastButton={this.state.canSendVoiceBroadcasts}
                 />;
         }
 
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 9783e30756a..6c83b75b875 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -85,7 +85,6 @@ interface IProps {
     relation?: IEventRelation;
     e2eStatus?: E2EStatus;
     compact?: boolean;
-    showVoiceBroadcastButton?: boolean;
 }
 
 interface IState {
@@ -384,10 +383,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         return this.state.showStickersButton && !isLocalRoom(this.props.room);
     }
 
-    private get showVoiceBroadcastButton(): boolean {
-        return this.props.showVoiceBroadcastButton && this.state.showVoiceBroadcastButton;
-    }
-
     public render() {
         const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
         const controls = [
@@ -532,10 +527,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                             showPollsButton={this.state.showPollsButton}
                             showStickersButton={this.showStickersButton}
                             toggleButtonMenu={this.toggleButtonMenu}
-                            showVoiceBroadcastButton={this.showVoiceBroadcastButton}
+                            showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
                             onStartVoiceBroadcastClick={() => {
                                 startNewVoiceBroadcastRecording(
-                                    this.props.room.roomId,
+                                    this.props.room,
                                     MatrixClientPeg.get(),
                                     VoiceBroadcastRecordingsStore.instance(),
                                 );
diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts
index 5bc648e736a..8193c83cccb 100644
--- a/src/contexts/RoomContext.ts
+++ b/src/contexts/RoomContext.ts
@@ -45,7 +45,6 @@ const RoomContext = createContext<IRoomState>({
     canReact: false,
     canSelfRedact: false,
     canSendMessages: false,
-    canSendVoiceBroadcasts: false,
     resizing: false,
     layout: Layout.Group,
     lowBandwidth: false,
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3f69088f78e..f322c5de8d8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -637,6 +637,10 @@
     "Send <b>%(msgtype)s</b> messages as you in your active room": "Send <b>%(msgtype)s</b> messages as you in your active room",
     "See <b>%(msgtype)s</b> messages posted to this room": "See <b>%(msgtype)s</b> messages posted to this room",
     "See <b>%(msgtype)s</b> messages posted to your active room": "See <b>%(msgtype)s</b> messages posted to your active room",
+    "Can't start a new voice broadcast": "Can't start a new voice broadcast",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.",
     "Stop live broadcasting?": "Stop live broadcasting?",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.",
     "Yes, stop broadcast": "Yes, stop broadcast",
diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 7262382b0c5..8f01c089c68 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -35,6 +35,7 @@ export * from "./components/molecules/VoiceBroadcastRecordingPip";
 export * from "./hooks/useVoiceBroadcastRecording";
 export * from "./stores/VoiceBroadcastPlaybacksStore";
 export * from "./stores/VoiceBroadcastRecordingsStore";
+export * from "./utils/hasRoomLiveVoiceBroadcast";
 export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
 export * from "./utils/startNewVoiceBroadcastRecording";
diff --git a/src/voice-broadcast/utils/hasRoomLiveVoiceBroadcast.ts b/src/voice-broadcast/utils/hasRoomLiveVoiceBroadcast.ts
new file mode 100644
index 00000000000..577b9ed8805
--- /dev/null
+++ b/src/voice-broadcast/utils/hasRoomLiveVoiceBroadcast.ts
@@ -0,0 +1,54 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
+
+interface Result {
+    hasBroadcast: boolean;
+    startedByUser: boolean;
+}
+
+/**
+ * Finds out whether there is a live broadcast in a room.
+ * Also returns if the user started the broadcast (if any).
+ */
+export const hasRoomLiveVoiceBroadcast = (room: Room, userId: string): Result => {
+    let hasBroadcast = false;
+    let startedByUser = false;
+
+    const stateEvents = room.currentState.getStateEvents(VoiceBroadcastInfoEventType);
+    stateEvents.forEach((event: MatrixEvent) => {
+        const state = event.getContent()?.state;
+
+        if (state && state !== VoiceBroadcastInfoState.Stopped) {
+            hasBroadcast = true;
+
+            // state key = sender's MXID
+            if (event.getStateKey() === userId) {
+                startedByUser = true;
+                // break here, because more than true / true is not possible
+                return false;
+            }
+        }
+    });
+
+    return {
+        hasBroadcast,
+        startedByUser,
+    };
+};
diff --git a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.ts b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.ts
deleted file mode 100644
index 272958e5d0c..00000000000
--- a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { ISendEventResponse, MatrixClient, RoomStateEvent } from "matrix-js-sdk/src/matrix";
-import { defer } from "matrix-js-sdk/src/utils";
-
-import {
-    VoiceBroadcastInfoEventContent,
-    VoiceBroadcastInfoEventType,
-    VoiceBroadcastInfoState,
-    VoiceBroadcastRecordingsStore,
-    VoiceBroadcastRecording,
-} from "..";
-
-/**
- * Starts a new Voice Broadcast Recording.
- * Sends a voice_broadcast_info state event and waits for the event to actually appear in the room state.
- */
-export const startNewVoiceBroadcastRecording = async (
-    roomId: string,
-    client: MatrixClient,
-    recordingsStore: VoiceBroadcastRecordingsStore,
-): Promise<VoiceBroadcastRecording> => {
-    const room = client.getRoom(roomId);
-    const { promise, resolve } = defer<VoiceBroadcastRecording>();
-    let result: ISendEventResponse = null;
-
-    const onRoomStateEvents = () => {
-        if (!result) return;
-
-        const voiceBroadcastEvent = room.currentState.getStateEvents(
-            VoiceBroadcastInfoEventType,
-            client.getUserId(),
-        );
-
-        if (voiceBroadcastEvent?.getId() === result.event_id) {
-            room.off(RoomStateEvent.Events, onRoomStateEvents);
-            const recording = new VoiceBroadcastRecording(
-                voiceBroadcastEvent,
-                client,
-            );
-            recordingsStore.setCurrent(recording);
-            recording.start();
-            resolve(recording);
-        }
-    };
-
-    room.on(RoomStateEvent.Events, onRoomStateEvents);
-
-    // XXX Michael W: refactor to live event
-    result = await client.sendStateEvent(
-        roomId,
-        VoiceBroadcastInfoEventType,
-        {
-            device_id: client.getDeviceId(),
-            state: VoiceBroadcastInfoState.Started,
-            chunk_length: 300,
-        } as VoiceBroadcastInfoEventContent,
-        client.getUserId(),
-    );
-
-    return promise;
-};
diff --git a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
new file mode 100644
index 00000000000..cff195c6682
--- /dev/null
+++ b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
@@ -0,0 +1,136 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { ISendEventResponse, MatrixClient, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import { defer } from "matrix-js-sdk/src/utils";
+
+import { _t } from "../../languageHandler";
+import InfoDialog from "../../components/views/dialogs/InfoDialog";
+import Modal from "../../Modal";
+import {
+    VoiceBroadcastInfoEventContent,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecordingsStore,
+    VoiceBroadcastRecording,
+    hasRoomLiveVoiceBroadcast,
+} from "..";
+
+const startBroadcast = async (
+    room: Room,
+    client: MatrixClient,
+    recordingsStore: VoiceBroadcastRecordingsStore,
+): Promise<VoiceBroadcastRecording> => {
+    const { promise, resolve } = defer<VoiceBroadcastRecording>();
+    let result: ISendEventResponse = null;
+
+    const onRoomStateEvents = () => {
+        if (!result) return;
+
+        const voiceBroadcastEvent = room.currentState.getStateEvents(
+            VoiceBroadcastInfoEventType,
+            client.getUserId(),
+        );
+
+        if (voiceBroadcastEvent?.getId() === result.event_id) {
+            room.off(RoomStateEvent.Events, onRoomStateEvents);
+            const recording = new VoiceBroadcastRecording(
+                voiceBroadcastEvent,
+                client,
+            );
+            recordingsStore.setCurrent(recording);
+            recording.start();
+            resolve(recording);
+        }
+    };
+
+    room.on(RoomStateEvent.Events, onRoomStateEvents);
+
+    // XXX Michael W: refactor to live event
+    result = await client.sendStateEvent(
+        room.roomId,
+        VoiceBroadcastInfoEventType,
+        {
+            device_id: client.getDeviceId(),
+            state: VoiceBroadcastInfoState.Started,
+            chunk_length: 300,
+        } as VoiceBroadcastInfoEventContent,
+        client.getUserId(),
+    );
+
+    return promise;
+};
+
+const showAlreadyRecordingDialog = () => {
+    Modal.createDialog(InfoDialog, {
+        title: _t("Can't start a new voice broadcast"),
+        description: <p>{ _t("You are already recording a voice broadcast. "
+                             + "Please end your current voice broadcast to start a new one.") }</p>,
+        hasCloseButton: true,
+    });
+};
+
+const showInsufficientPermissionsDialog = () => {
+    Modal.createDialog(InfoDialog, {
+        title: _t("Can't start a new voice broadcast"),
+        description: <p>{ _t("You don't have the required permissions to start a voice broadcast in this room. "
+                             + "Contact a room administrator to upgrade your permissions.") }</p>,
+        hasCloseButton: true,
+    });
+};
+
+const showOthersAlreadyRecordingDialog = () => {
+    Modal.createDialog(InfoDialog, {
+        title: _t("Can't start a new voice broadcast"),
+        description: <p>{ _t("Someone else is already recording a voice broadcast. "
+                             + "Wait for their voice broadcast to end to start a new one.") }</p>,
+        hasCloseButton: true,
+    });
+};
+
+/**
+ * Starts a new Voice Broadcast Recording, if
+ * - the user has the permissions to do so in the room
+ * - there is no other broadcast being recorded in the room, yet
+ * Sends a voice_broadcast_info state event and waits for the event to actually appear in the room state.
+ */
+export const startNewVoiceBroadcastRecording = async (
+    room: Room,
+    client: MatrixClient,
+    recordingsStore: VoiceBroadcastRecordingsStore,
+): Promise<VoiceBroadcastRecording | null> => {
+    const currentUserId = client.getUserId();
+
+    if (!room.currentState.maySendStateEvent(VoiceBroadcastInfoEventType, currentUserId)) {
+        showInsufficientPermissionsDialog();
+        return null;
+    }
+
+    const { hasBroadcast, startedByUser } = hasRoomLiveVoiceBroadcast(room, currentUserId);
+
+    if (hasBroadcast && startedByUser) {
+        showAlreadyRecordingDialog();
+        return null;
+    }
+
+    if (hasBroadcast) {
+        showOthersAlreadyRecordingDialog();
+        return null;
+    }
+
+    return startBroadcast(room, client, recordingsStore);
+};
diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index bc0b26f745a..8ebeda676a6 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -147,7 +147,7 @@ describe("MessageComposer", () => {
 
                     beforeEach(() => {
                         SettingsStore.setValue(setting, null, SettingLevel.DEVICE, value);
-                        wrapper = wrapAndRender({ room, showVoiceBroadcastButton: true });
+                        wrapper = wrapAndRender({ room });
                     });
 
                     it(`should pass the prop ${prop} = ${value}`, () => {
@@ -174,17 +174,6 @@ describe("MessageComposer", () => {
             });
         });
 
-        [false, undefined].forEach((value) => {
-            it(`should pass showVoiceBroadcastButton = false if the MessageComposer prop is ${value}`, () => {
-                SettingsStore.setValue(Features.VoiceBroadcast, null, SettingLevel.DEVICE, true);
-                const wrapper = wrapAndRender({
-                    room,
-                    showVoiceBroadcastButton: value,
-                });
-                expect(wrapper.find(MessageComposerButtons).props().showVoiceBroadcastButton).toBe(false);
-            });
-        });
-
         it("should not render the send button", () => {
             const wrapper = wrapAndRender({ room });
             expect(wrapper.find("SendButton")).toHaveLength(0);
diff --git a/test/components/views/rooms/MessageComposerButtons-test.tsx b/test/components/views/rooms/MessageComposerButtons-test.tsx
index 472b0e73683..f41901dd7a9 100644
--- a/test/components/views/rooms/MessageComposerButtons-test.tsx
+++ b/test/components/views/rooms/MessageComposerButtons-test.tsx
@@ -250,7 +250,6 @@ function createRoomState(room: Room, narrow: boolean): IRoomState {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,
diff --git a/test/components/views/rooms/SendMessageComposer-test.tsx b/test/components/views/rooms/SendMessageComposer-test.tsx
index 96b1be95ec5..1d01c4a5a5c 100644
--- a/test/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/components/views/rooms/SendMessageComposer-test.tsx
@@ -72,7 +72,6 @@ describe('<SendMessageComposer/>', () => {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,
diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
index df2596809cc..12161ae8161 100644
--- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
@@ -91,7 +91,6 @@ describe('WysiwygComposer', () => {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,
diff --git a/test/components/views/rooms/wysiwyg_composer/message-test.ts b/test/components/views/rooms/wysiwyg_composer/message-test.ts
index 712b671c9f7..79197a3188c 100644
--- a/test/components/views/rooms/wysiwyg_composer/message-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/message-test.ts
@@ -123,7 +123,6 @@ describe('message', () => {
             statusBarVisible: false,
             canReact: false,
             canSendMessages: false,
-            canSendVoiceBroadcasts: false,
             layout: Layout.Group,
             lowBandwidth: false,
             alwaysShowTimestamps: false,
diff --git a/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap b/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
new file mode 100644
index 00000000000..c38673e3b66
--- /dev/null
+++ b/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`startNewVoiceBroadcastRecording when the current user is allowed to send voice broadcast info state events when there already is a live broadcast of another user should show an info dialog 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      [Function],
+      Object {
+        "description": <p>
+          Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.
+        </p>,
+        "hasCloseButton": true,
+        "title": "Can't start a new voice broadcast",
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`startNewVoiceBroadcastRecording when the current user is allowed to send voice broadcast info state events when there already is a live broadcast of the current user should show an info dialog 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      [Function],
+      Object {
+        "description": <p>
+          You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.
+        </p>,
+        "hasCloseButton": true,
+        "title": "Can't start a new voice broadcast",
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`startNewVoiceBroadcastRecording when the current user is not allowed to send voice broadcast info state events should show an info dialog 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      [Function],
+      Object {
+        "description": <p>
+          You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.
+        </p>,
+        "hasCloseButton": true,
+        "title": "Can't start a new voice broadcast",
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
diff --git a/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
new file mode 100644
index 00000000000..c9fbc5f09e8
--- /dev/null
+++ b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
@@ -0,0 +1,144 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+
+import {
+    hasRoomLiveVoiceBroadcast,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from "../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "./test-utils";
+
+describe("hasRoomLiveVoiceBroadcast", () => {
+    const otherUserId = "@other:example.com";
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+
+    const addVoiceBroadcastInfoEvent = (
+        state: VoiceBroadcastInfoState,
+        sender: string,
+    ) => {
+        room.currentState.setStateEvents([
+            mkVoiceBroadcastInfoStateEvent(room.roomId, state, sender),
+        ]);
+    };
+
+    const itShouldReturnTrueTrue = () => {
+        it("should return true/true", () => {
+            expect(hasRoomLiveVoiceBroadcast(room, client.getUserId())).toEqual({
+                hasBroadcast: true,
+                startedByUser: true,
+            });
+        });
+    };
+
+    const itShouldReturnTrueFalse = () => {
+        it("should return true/false", () => {
+            expect(hasRoomLiveVoiceBroadcast(room, client.getUserId())).toEqual({
+                hasBroadcast: true,
+                startedByUser: false,
+            });
+        });
+    };
+
+    const itShouldReturnFalseFalse = () => {
+        it("should return false/false", () => {
+            expect(hasRoomLiveVoiceBroadcast(room, client.getUserId())).toEqual({
+                hasBroadcast: false,
+                startedByUser: false,
+            });
+        });
+    };
+
+    beforeAll(() => {
+        client = stubClient();
+    });
+
+    beforeEach(() => {
+        room = new Room(roomId, client, client.getUserId());
+    });
+
+    describe("when there is no voice broadcast info at all", () => {
+        itShouldReturnFalseFalse();
+    });
+
+    describe("when the »state« prop is missing", () => {
+        beforeEach(() => {
+            room.currentState.setStateEvents([
+                mkEvent({
+                    event: true,
+                    room: room.roomId,
+                    user: client.getUserId(),
+                    type: VoiceBroadcastInfoEventType,
+                    skey: client.getUserId(),
+                    content: {},
+                }),
+            ]);
+        });
+        itShouldReturnFalseFalse();
+    });
+
+    describe("when there is a live broadcast from the current and another user", () => {
+        beforeEach(() => {
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started, client.getUserId());
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started, otherUserId);
+        });
+
+        itShouldReturnTrueTrue();
+    });
+
+    describe("when there are only stopped info events", () => {
+        beforeEach(() => {
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped, client.getUserId());
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped, otherUserId);
+        });
+
+        itShouldReturnFalseFalse();
+    });
+
+    describe.each([
+        // all there are kind of live states
+        VoiceBroadcastInfoState.Started,
+        VoiceBroadcastInfoState.Paused,
+        VoiceBroadcastInfoState.Running,
+    ])("when there is a live broadcast (%s) from the current user", (state: VoiceBroadcastInfoState) => {
+        beforeEach(() => {
+            addVoiceBroadcastInfoEvent(state, client.getUserId());
+        });
+
+        itShouldReturnTrueTrue();
+    });
+
+    describe("when there was a live broadcast, that has been stopped", () => {
+        beforeEach(() => {
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Running, client.getUserId());
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped, client.getUserId());
+        });
+
+        itShouldReturnFalseFalse();
+    });
+
+    describe("when there is a live broadcast from another user", () => {
+        beforeEach(() => {
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Running, otherUserId);
+        });
+
+        itShouldReturnTrueFalse();
+    });
+});
diff --git a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
index 570719539aa..a320bca2ebd 100644
--- a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { EventType, MatrixClient, MatrixEvent, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import { EventType, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
+import Modal from "../../../src/Modal";
 import {
     startNewVoiceBroadcastRecording,
     VoiceBroadcastInfoEventType,
@@ -25,46 +26,29 @@ import {
     VoiceBroadcastRecording,
 } from "../../../src/voice-broadcast";
 import { mkEvent, stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "./test-utils";
 
 jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastRecording", () => ({
     VoiceBroadcastRecording: jest.fn(),
 }));
 
+jest.mock("../../../src/Modal");
+
 describe("startNewVoiceBroadcastRecording", () => {
     const roomId = "!room:example.com";
+    const otherUserId = "@other:example.com";
     let client: MatrixClient;
     let recordingsStore: VoiceBroadcastRecordingsStore;
     let room: Room;
-    let roomOnStateEventsCallbackRegistered: Promise<void>;
-    let roomOnStateEventsCallbackRegisteredResolver: Function;
-    let roomOnStateEventsCallback: () => void;
     let infoEvent: MatrixEvent;
     let otherEvent: MatrixEvent;
-    let stateEvent: MatrixEvent;
+    let result: VoiceBroadcastRecording | null;
 
     beforeEach(() => {
-        roomOnStateEventsCallbackRegistered = new Promise((resolve) => {
-            roomOnStateEventsCallbackRegisteredResolver = resolve;
-        });
-
-        room = {
-            currentState: {
-                getStateEvents: jest.fn().mockImplementation((type, userId) => {
-                    if (type === VoiceBroadcastInfoEventType && userId === client.getUserId()) {
-                        return stateEvent;
-                    }
-                }),
-            },
-            on: jest.fn().mockImplementation((eventType, callback) => {
-                if (eventType === RoomStateEvent.Events) {
-                    roomOnStateEventsCallback = callback;
-                    roomOnStateEventsCallbackRegisteredResolver();
-                }
-            }),
-            off: jest.fn(),
-        } as unknown as Room;
-
         client = stubClient();
+        room = new Room(roomId, client, client.getUserId());
+        jest.spyOn(room.currentState, "maySendStateEvent");
+
         mocked(client.getRoom).mockImplementation((getRoomId: string) => {
             if (getRoomId === roomId) {
                 return room;
@@ -85,22 +69,14 @@ describe("startNewVoiceBroadcastRecording", () => {
             setCurrent: jest.fn(),
         } as unknown as VoiceBroadcastRecordingsStore;
 
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            content: {
-                device_id: client.getDeviceId(),
-                state: VoiceBroadcastInfoState.Started,
-            },
-            user: client.getUserId(),
-            room: roomId,
-        });
+        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
         otherEvent = mkEvent({
             event: true,
             type: EventType.RoomMember,
             content: {},
             user: client.getUserId(),
             room: roomId,
+            skey: "",
         });
 
         mocked(VoiceBroadcastRecording).mockImplementation((
@@ -115,29 +91,96 @@ describe("startNewVoiceBroadcastRecording", () => {
         });
     });
 
-    it("should create a new Voice Broadcast", (done) => {
-        let ok = false;
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("when the current user is allowed to send voice broadcast info state events", () => {
+        beforeEach(() => {
+            mocked(room.currentState.maySendStateEvent).mockReturnValue(true);
+        });
 
-        startNewVoiceBroadcastRecording(roomId, client, recordingsStore).then((recording) => {
-            expect(ok).toBe(true);
-            expect(mocked(room.off)).toHaveBeenCalledWith(RoomStateEvent.Events, roomOnStateEventsCallback);
-            expect(recording.infoEvent).toBe(infoEvent);
-            expect(recording.start).toHaveBeenCalled();
-            done();
+        describe("when there currently is no other broadcast", () => {
+            it("should create a new Voice Broadcast", async () => {
+                mocked(client.sendStateEvent).mockImplementation(async (
+                    _roomId: string,
+                    _eventType: string,
+                    _content: any,
+                    _stateKey = "",
+                ) => {
+                    setTimeout(() => {
+                        // emit state events after resolving the promise
+                        room.currentState.setStateEvents([otherEvent]);
+                        room.currentState.setStateEvents([infoEvent]);
+                    }, 0);
+                    return { event_id: infoEvent.getId() };
+                });
+                const recording = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
+
+                expect(client.sendStateEvent).toHaveBeenCalledWith(
+                    roomId,
+                    VoiceBroadcastInfoEventType,
+                    {
+                        chunk_length: 300,
+                        device_id: client.getDeviceId(),
+                        state: VoiceBroadcastInfoState.Started,
+                    },
+                    client.getUserId(),
+                );
+                expect(recording.infoEvent).toBe(infoEvent);
+                expect(recording.start).toHaveBeenCalled();
+            });
         });
 
-        roomOnStateEventsCallbackRegistered.then(() => {
-            // no state event, yet
-            roomOnStateEventsCallback();
+        describe("when there already is a live broadcast of the current user", () => {
+            beforeEach(async () => {
+                room.currentState.setStateEvents([
+                    mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Running, client.getUserId()),
+                ]);
+
+                result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
+            });
 
-            // other state event
-            stateEvent = otherEvent;
-            roomOnStateEventsCallback();
+            it("should not start a voice broadcast", () => {
+                expect(result).toBeNull();
+            });
+
+            it("should show an info dialog", () => {
+                expect(Modal.createDialog).toMatchSnapshot();
+            });
+        });
+
+        describe("when there already is a live broadcast of another user", () => {
+            beforeEach(async () => {
+                room.currentState.setStateEvents([
+                    mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Running, otherUserId),
+                ]);
+
+                result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
+            });
+
+            it("should not start a voice broadcast", () => {
+                expect(result).toBeNull();
+            });
+
+            it("should show an info dialog", () => {
+                expect(Modal.createDialog).toMatchSnapshot();
+            });
+        });
+    });
+
+    describe("when the current user is not allowed to send voice broadcast info state events", () => {
+        beforeEach(async () => {
+            mocked(room.currentState.maySendStateEvent).mockReturnValue(false);
+            result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
+        });
+
+        it("should not start a voice broadcast", () => {
+            expect(result).toBeNull();
+        });
 
-            // the expected Voice Broadcast Info event
-            stateEvent = infoEvent;
-            ok = true;
-            roomOnStateEventsCallback();
+        it("should show an info dialog", () => {
+            expect(Modal.createDialog).toMatchSnapshot();
         });
     });
 });
diff --git a/test/voice-broadcast/utils/test-utils.ts b/test/voice-broadcast/utils/test-utils.ts
new file mode 100644
index 00000000000..2a73877474f
--- /dev/null
+++ b/test/voice-broadcast/utils/test-utils.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../src/voice-broadcast";
+import { mkEvent } from "../../test-utils";
+
+export const mkVoiceBroadcastInfoStateEvent = (
+    roomId: string,
+    state: VoiceBroadcastInfoState,
+    sender: string,
+): MatrixEvent => {
+    return mkEvent({
+        event: true,
+        room: roomId,
+        user: sender,
+        type: VoiceBroadcastInfoEventType,
+        skey: sender,
+        content: {
+            state,
+        },
+    });
+};

From 13fbd096b0ef42f412bdb20c429c5c0e1c382423 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Wed, 19 Oct 2022 14:14:14 +0100
Subject: [PATCH 012/113] Stores refactor: convert TypingStore; rename
 TestStores to TestSdkContext (#9454)

---
 src/Lifecycle.ts                                    |  6 +++---
 src/components/views/rooms/BasicMessageComposer.tsx |  4 ++--
 src/contexts/SDKContext.ts                          |  9 +++++++++
 src/stores/TypingStore.ts                           | 13 +++----------
 test/{TestStores.ts => TestSdkContext.ts}           |  4 ++--
 test/stores/RoomViewStore-test.ts                   |  4 ++--
 test/stores/TypingStore-test.ts                     |  8 +++++---
 7 files changed, 26 insertions(+), 22 deletions(-)
 rename test/{TestStores.ts => TestSdkContext.ts} (91%)

diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
index 6c9c9558183..9351e91ae4d 100644
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@@ -39,7 +39,6 @@ import PlatformPeg from "./PlatformPeg";
 import { sendLoginRequest } from "./Login";
 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";
@@ -62,6 +61,7 @@ import { DialogOpener } from "./utils/DialogOpener";
 import { Action } from "./dispatcher/actions";
 import AbstractLocalStorageSettingsHandler from "./settings/handlers/AbstractLocalStorageSettingsHandler";
 import { OverwriteLoginPayload } from "./dispatcher/payloads/OverwriteLoginPayload";
+import { SdkContextClass } from './contexts/SDKContext';
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -797,7 +797,7 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
     dis.dispatch({ action: 'will_start_client' }, true);
 
     // reset things first just in case
-    TypingStore.sharedInstance().reset();
+    SdkContextClass.instance.typingStore.reset();
     ToastStore.sharedInstance().reset();
 
     DialogOpener.instance.prepare();
@@ -927,7 +927,7 @@ export function stopMatrixClient(unsetClient = true): void {
     Notifier.stop();
     LegacyCallHandler.instance.stop();
     UserActivity.sharedInstance().stop();
-    TypingStore.sharedInstance().reset();
+    SdkContextClass.instance.typingStore.reset();
     Presence.stop();
     ActiveWidgetStore.instance.stop();
     IntegrationManagers.sharedInstance().stopWatching();
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index d74c7b51484..4c2201a628e 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -31,7 +31,6 @@ import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
 import { getAutoCompleteCreator, Part, Type } from '../../../editor/parts';
 import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
 import { renderModel } from '../../../editor/render';
-import TypingStore from "../../../stores/TypingStore";
 import SettingsStore from "../../../settings/SettingsStore";
 import { IS_MAC, Key } from "../../../Keyboard";
 import { EMOTICON_TO_EMOJI } from "../../../emoji";
@@ -47,6 +46,7 @@ import { getKeyBindingsManager } from '../../../KeyBindingsManager';
 import { ALTERNATE_KEY_NAME, KeyBindingAction } from '../../../accessibility/KeyboardShortcuts';
 import { _t } from "../../../languageHandler";
 import { linkify } from '../../../linkify-matrix';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
@@ -246,7 +246,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 isTyping = false;
             }
         }
-        TypingStore.sharedInstance().setSelfTyping(
+        SdkContextClass.instance.typingStore.setSelfTyping(
             this.props.room.roomId,
             this.props.threadId,
             isTyping,
diff --git a/src/contexts/SDKContext.ts b/src/contexts/SDKContext.ts
index 61905dca926..8e6222512be 100644
--- a/src/contexts/SDKContext.ts
+++ b/src/contexts/SDKContext.ts
@@ -25,6 +25,7 @@ import { RoomNotificationStateStore } from "../stores/notifications/RoomNotifica
 import RightPanelStore from "../stores/right-panel/RightPanelStore";
 import { RoomViewStore } from "../stores/RoomViewStore";
 import SpaceStore, { SpaceStoreClass } from "../stores/spaces/SpaceStore";
+import TypingStore from "../stores/TypingStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import WidgetStore from "../stores/WidgetStore";
 
@@ -59,6 +60,7 @@ export class SdkContextClass {
     protected _SlidingSyncManager?: SlidingSyncManager;
     protected _SpaceStore?: SpaceStoreClass;
     protected _LegacyCallHandler?: LegacyCallHandler;
+    protected _TypingStore?: TypingStore;
 
     /**
      * Automatically construct stores which need to be created eagerly so they can register with
@@ -124,4 +126,11 @@ export class SdkContextClass {
         }
         return this._SpaceStore;
     }
+    public get typingStore(): TypingStore {
+        if (!this._TypingStore) {
+            this._TypingStore = new TypingStore(this);
+            window.mxTypingStore = this._TypingStore;
+        }
+        return this._TypingStore;
+    }
 }
diff --git a/src/stores/TypingStore.ts b/src/stores/TypingStore.ts
index d642f3fea7f..be17da6e4e6 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 { SdkContextClass } from "../contexts/SDKContext";
 import SettingsStore from "../settings/SettingsStore";
 import { isLocalRoom } from "../utils/localRoom/isLocalRoom";
 import Timer from "../utils/Timer";
@@ -34,17 +34,10 @@ export default class TypingStore {
         };
     };
 
-    constructor() {
+    constructor(private readonly context: SdkContextClass) {
         this.reset();
     }
 
-    public static sharedInstance(): TypingStore {
-        if (window.mxTypingStore === undefined) {
-            window.mxTypingStore = new TypingStore();
-        }
-        return window.mxTypingStore;
-    }
-
     /**
      * Clears all cached typing states. Intended to be called when the
      * MatrixClientPeg client changes.
@@ -108,6 +101,6 @@ export default class TypingStore {
             } else currentTyping.userTimer.restart();
         }
 
-        MatrixClientPeg.get().sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);
+        this.context.client?.sendTyping(roomId, isTyping, TYPING_SERVER_TIMEOUT);
     }
 }
diff --git a/test/TestStores.ts b/test/TestSdkContext.ts
similarity index 91%
rename from test/TestStores.ts
rename to test/TestSdkContext.ts
index dbaa51f504a..137b71f9a37 100644
--- a/test/TestStores.ts
+++ b/test/TestSdkContext.ts
@@ -25,10 +25,10 @@ import { WidgetLayoutStore } from "../src/stores/widgets/WidgetLayoutStore";
 import WidgetStore from "../src/stores/WidgetStore";
 
 /**
- * A class which provides the same API as Stores but adds additional unsafe setters which can
+ * A class which provides the same API as SdkContextClass but adds additional unsafe setters which can
  * replace individual stores. This is useful for tests which need to mock out stores.
  */
-export class TestStores extends SdkContextClass {
+export class TestSdkContext extends SdkContextClass {
     public _RightPanelStore?: RightPanelStore;
     public _RoomNotificationStateStore?: RoomNotificationStateStore;
     public _RoomViewStore?: RoomViewStore;
diff --git a/test/stores/RoomViewStore-test.ts b/test/stores/RoomViewStore-test.ts
index f6f6bf2cc71..5f1bb98d3da 100644
--- a/test/stores/RoomViewStore-test.ts
+++ b/test/stores/RoomViewStore-test.ts
@@ -27,7 +27,7 @@ import { MatrixDispatcher } from '../../src/dispatcher/dispatcher';
 import { UPDATE_EVENT } from '../../src/stores/AsyncStore';
 import { ActiveRoomChangedPayload } from '../../src/dispatcher/payloads/ActiveRoomChangedPayload';
 import { SpaceStoreClass } from '../../src/stores/spaces/SpaceStore';
-import { TestStores } from '../TestStores';
+import { TestSdkContext } from '../TestSdkContext';
 
 // mock out the injected classes
 jest.mock('../../src/PosthogAnalytics');
@@ -77,7 +77,7 @@ describe('RoomViewStore', function() {
         // Make the RVS to test
         dis = new MatrixDispatcher();
         slidingSyncManager = new MockSlidingSyncManager();
-        const stores = new TestStores();
+        const stores = new TestSdkContext();
         stores._SlidingSyncManager = slidingSyncManager;
         stores._PosthogAnalytics = new MockPosthogAnalytics();
         stores._SpaceStore = new MockSpaceStore();
diff --git a/test/stores/TypingStore-test.ts b/test/stores/TypingStore-test.ts
index 98ddfca3c40..a5b4437f148 100644
--- a/test/stores/TypingStore-test.ts
+++ b/test/stores/TypingStore-test.ts
@@ -17,13 +17,14 @@ limitations under the License.
 import { mocked } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 import TypingStore from "../../src/stores/TypingStore";
 import { LOCAL_ROOM_ID_PREFIX } from "../../src/models/LocalRoom";
 import SettingsStore from "../../src/settings/SettingsStore";
+import { TestSdkContext } from "../TestSdkContext";
 
 jest.mock("../../src/settings/SettingsStore", () => ({
     getValue: jest.fn(),
+    monitorSetting: jest.fn(),
 }));
 
 describe("TypingStore", () => {
@@ -37,11 +38,12 @@ describe("TypingStore", () => {
     const localRoomId = LOCAL_ROOM_ID_PREFIX + "test";
 
     beforeEach(() => {
-        typingStore = new TypingStore();
         mockClient = {
             sendTyping: jest.fn(),
         } as unknown as MatrixClient;
-        MatrixClientPeg.get = () => mockClient;
+        const context = new TestSdkContext();
+        context.client = mockClient;
+        typingStore = new TypingStore(context);
         mocked(SettingsStore.getValue).mockImplementation((setting: string) => {
             return settings[setting];
         });

From 8066b9ffbe4b13c92bb2cb67ca559843a0052696 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 19 Oct 2022 16:22:07 +0200
Subject: [PATCH 013/113] Prevent starting another voice broadcast (#9457)

---
 .../utils/startNewVoiceBroadcastRecording.tsx |  5 ++++
 ...artNewVoiceBroadcastRecording-test.ts.snap | 25 ++++++++++++++++++-
 .../startNewVoiceBroadcastRecording-test.ts   | 21 +++++++++++++++-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
index cff195c6682..1084d6d2f39 100644
--- a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
+++ b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
@@ -113,6 +113,11 @@ export const startNewVoiceBroadcastRecording = async (
     client: MatrixClient,
     recordingsStore: VoiceBroadcastRecordingsStore,
 ): Promise<VoiceBroadcastRecording | null> => {
+    if (recordingsStore.getCurrent()) {
+        showAlreadyRecordingDialog();
+        return null;
+    }
+
     const currentUserId = client.getUserId();
 
     if (!room.currentState.maySendStateEvent(VoiceBroadcastInfoEventType, currentUserId)) {
diff --git a/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap b/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
index c38673e3b66..7ea5b24355e 100644
--- a/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
+++ b/test/voice-broadcast/utils/__snapshots__/startNewVoiceBroadcastRecording-test.ts.snap
@@ -23,7 +23,30 @@ exports[`startNewVoiceBroadcastRecording when the current user is allowed to sen
 }
 `;
 
-exports[`startNewVoiceBroadcastRecording when the current user is allowed to send voice broadcast info state events when there already is a live broadcast of the current user should show an info dialog 1`] = `
+exports[`startNewVoiceBroadcastRecording when the current user is allowed to send voice broadcast info state events when there already is a live broadcast of the current user in the room should show an info dialog 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      [Function],
+      Object {
+        "description": <p>
+          You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.
+        </p>,
+        "hasCloseButton": true,
+        "title": "Can't start a new voice broadcast",
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`startNewVoiceBroadcastRecording when the current user is allowed to send voice broadcast info state events when there is already a current voice broadcast should show an info dialog 1`] = `
 [MockFunction] {
   "calls": Array [
     Array [
diff --git a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
index a320bca2ebd..0fc0d14cb20 100644
--- a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
@@ -67,6 +67,7 @@ describe("startNewVoiceBroadcastRecording", () => {
 
         recordingsStore = {
             setCurrent: jest.fn(),
+            getCurrent: jest.fn(),
         } as unknown as VoiceBroadcastRecordingsStore;
 
         infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
@@ -132,7 +133,25 @@ describe("startNewVoiceBroadcastRecording", () => {
             });
         });
 
-        describe("when there already is a live broadcast of the current user", () => {
+        describe("when there is already a current voice broadcast", () => {
+            beforeEach(async () => {
+                mocked(recordingsStore.getCurrent).mockReturnValue(
+                    new VoiceBroadcastRecording(infoEvent, client),
+                );
+
+                result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
+            });
+
+            it("should not start a voice broadcast", () => {
+                expect(result).toBeNull();
+            });
+
+            it("should show an info dialog", () => {
+                expect(Modal.createDialog).toMatchSnapshot();
+            });
+        });
+
+        describe("when there already is a live broadcast of the current user in the room", () => {
             beforeEach(async () => {
                 room.currentState.setStateEvents([
                     mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Running, client.getUserId()),

From d5a4718d461b7c60b571914217d8a9425da3af1e Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Wed, 19 Oct 2022 17:11:42 +0200
Subject: [PATCH 014/113] Test display of qr code login section (#9456)

* Support for login + E2EE set up with QR

* Whitespace

* Padding

* Refactor of fetch

* Whitespace

* CSS whitespace

* Add link to MSC3906

* Handle incorrect typing in MatrixClientPeg.get()

* Use unstable class name

* fix: use unstable class name

* Use default fetch client instead

* Update to revised function name

* Refactor device manager panel and make it work with new sessions manager

* Lint fix

* Add missing interstitials and update wording

* Linting

* i18n

* Lint

* Use sensible sdk config name for fallback server

* Improve error handling for QR code generation

* Refactor feature availability logic

* Hide device manager panel if no options available

* Put sign in with QR behind lab setting

* Reduce scope of PR to just showing code on existing device

* i18n updates

* Handle null features

* Testing for LoginWithQRSection

* Refactor to handle UIA

* Imports

* Reduce diff complexity

* Remove unnecessary change

* Remove unused styles

* Support UIA

* Tidy up

* i18n

* Remove additional unused parts of flow

* Add extra instruction when showing QR code

* Add getVersions to server mocks

* Use proper colours for theme support

* Test cases

* Lint

* Remove obsolete snapshot

* Don't override error if already set

* Remove unused var

* Update src/components/views/settings/devices/LoginWithQRSection.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update res/css/views/auth/_LoginWithQR.pcss

Co-authored-by: Kerry <kerrya@element.io>

* Use spacing variables

* Remove debug

* Style + docs

* preventDefault

* Names of tests

* Fixes for js-sdk refactor

* Update snapshots to match test names

* Refactor labs config to make deployment simpler

* i18n

* Unused imports

* Typo

* Stateless component

* Whitespace

* Use context not MatrixClientPeg

* Add missing context

* Type updates to match js-sdk

* Wrap click handlers in useCallback

* Update src/components/views/settings/DevicesPanel.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Wait for DOM update instead of timeout

* Add missing snapshot update from last commit

* Remove void keyword in favour of then() clauses

* test main paths in LoginWithQR

* test coverage for display of qr code section

* remove unused test props

Co-authored-by: Hugh Nimmo-Smith <hughns@matrix.org>
Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>
---
 src/components/views/auth/LoginWithQR.tsx     |  2 +-
 .../__snapshots__/LoginWithQR-test.tsx.snap   |  7 +++
 .../user/SecurityUserSettingsTab-test.tsx     | 39 ++++++++++++++-
 .../tabs/user/SessionManagerTab-test.tsx      | 48 +++++++++++++++++++
 4 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/src/components/views/auth/LoginWithQR.tsx b/src/components/views/auth/LoginWithQR.tsx
index f95e618cc52..3d3f76be957 100644
--- a/src/components/views/auth/LoginWithQR.tsx
+++ b/src/components/views/auth/LoginWithQR.tsx
@@ -370,7 +370,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_LoginWithQR">
+            <div data-testid="login-with-qr" className="mx_LoginWithQR">
                 <div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
                     { backButton ?
                         <AccessibleButton
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
index 91fe73abf40..b851a2c686b 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<LoginWithQR /> approves login and waits for new device 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -61,6 +62,7 @@ exports[`<LoginWithQR /> displays confirmation digits after connected to rendezv
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -122,6 +124,7 @@ exports[`<LoginWithQR /> displays error when approving login fails 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -168,6 +171,7 @@ exports[`<LoginWithQR /> displays qr code after it is created 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -232,6 +236,7 @@ exports[`<LoginWithQR /> displays unknown error if connection to rendezvous fail
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -278,6 +283,7 @@ exports[`<LoginWithQR /> no content in case of no support 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -324,6 +330,7 @@ exports[`<LoginWithQR /> renders spinner while generating code 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
diff --git a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
index 3497f2f161f..3fc250facc7 100644
--- a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
@@ -13,7 +13,7 @@ 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 { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
 import SecurityUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
@@ -26,6 +26,7 @@ import {
     mockClientMethodsCrypto,
     mockClientMethodsDevice,
     mockPlatformPeg,
+    flushPromises,
 } from '../../../../../test-utils';
 
 describe('<SecurityUserSettingsTab />', () => {
@@ -42,6 +43,12 @@ describe('<SecurityUserSettingsTab />', () => {
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
         getIgnoredUsers: jest.fn(),
+        getVersions: jest.fn().mockResolvedValue({
+            unstable_features: {
+                'org.matrix.msc3882': true,
+                'org.matrix.msc3886': true,
+            },
+        }),
     });
 
     const getComponent = () =>
@@ -70,4 +77,34 @@ describe('<SecurityUserSettingsTab />', () => {
 
         expect(queryByTestId('devices-section')).toBeFalsy();
     });
+
+    it('does not render qr code login section when disabled', () => {
+        settingsValueSpy.mockReturnValue(false);
+        const { queryByText } = render(getComponent());
+
+        expect(settingsValueSpy).toHaveBeenCalledWith('feature_qr_signin_reciprocate_show');
+
+        expect(queryByText('Sign in with QR code')).toBeFalsy();
+    });
+
+    it('renders qr code login section when enabled', async () => {
+        settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+        const { getByText } = render(getComponent());
+
+        // wait for versions call to settle
+        await flushPromises();
+
+        expect(getByText('Sign in with QR code')).toBeTruthy();
+    });
+
+    it('enters qr code login section when show QR code button clicked', async () => {
+        settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+        const { getByText, getByTestId } = render(getComponent());
+        // wait for versions call to settle
+        await flushPromises();
+
+        fireEvent.click(getByText('Show QR code'));
+
+        expect(getByTestId("login-with-qr")).toBeTruthy();
+    });
 });
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 7826b3cc809..e9dd3529036 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -34,6 +34,7 @@ import {
 import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
 import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
 import {
+    flushPromises,
     flushPromisesWithFakeTimers,
     getMockClientWithEventEmitter,
     mkPusher,
@@ -47,6 +48,7 @@ import {
     ExtendedDevice,
 } from '../../../../../../src/components/views/settings/devices/types';
 import { INACTIVE_DEVICE_AGE_MS } from '../../../../../../src/components/views/settings/devices/filter';
+import SettingsStore from '../../../../../../src/settings/SettingsStore';
 
 mockPlatformPeg();
 
@@ -1142,4 +1144,50 @@ describe('<SessionManagerTab />', () => {
 
         expect(checkbox.getAttribute('aria-checked')).toEqual("false");
     });
+
+    describe('QR code login', () => {
+        const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
+
+        beforeEach(() => {
+            settingsValueSpy.mockClear().mockReturnValue(false);
+            // enable server support for qr login
+            mockClient.getVersions.mockResolvedValue({
+                versions: [],
+                unstable_features: {
+                    'org.matrix.msc3882': true,
+                    'org.matrix.msc3886': true,
+                },
+            });
+        });
+
+        it('does not render qr code login section when disabled', () => {
+            settingsValueSpy.mockReturnValue(false);
+            const { queryByText } = render(getComponent());
+
+            expect(settingsValueSpy).toHaveBeenCalledWith('feature_qr_signin_reciprocate_show');
+
+            expect(queryByText('Sign in with QR code')).toBeFalsy();
+        });
+
+        it('renders qr code login section when enabled', async () => {
+            settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+            const { getByText } = render(getComponent());
+
+            // wait for versions call to settle
+            await flushPromises();
+
+            expect(getByText('Sign in with QR code')).toBeTruthy();
+        });
+
+        it('enters qr code login section when show QR code button clicked', async () => {
+            settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+            const { getByText, getByTestId } = render(getComponent());
+            // wait for versions call to settle
+            await flushPromises();
+
+            fireEvent.click(getByText('Show QR code'));
+
+            expect(getByTestId("login-with-qr")).toBeTruthy();
+        });
+    });
 });

From 07a1e9a00941a53b528b119680c823d99ae19e47 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 19 Oct 2022 18:02:48 +0200
Subject: [PATCH 015/113] Stop voice broadcast recording on redaction (#9455)

---
 .../hooks/useVoiceBroadcastRecording.tsx      |  2 -
 .../models/VoiceBroadcastRecording.ts         | 12 +++-
 .../stores/VoiceBroadcastRecordingsStore.ts   | 16 ++++-
 .../models/VoiceBroadcastRecording-test.ts    | 14 +++++
 .../VoiceBroadcastRecordingsStore-test.ts     | 62 +++++++++++--------
 5 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
index c0db5617461..341283c2adc 100644
--- a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
+++ b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
@@ -20,7 +20,6 @@ import {
     VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingEvent,
-    VoiceBroadcastRecordingsStore,
 } from "..";
 import QuestionDialog from "../../components/views/dialogs/QuestionDialog";
 import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
@@ -54,7 +53,6 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
 
         if (confirmed) {
             recording.stop();
-            VoiceBroadcastRecordingsStore.instance().clearCurrent();
         }
     };
 
diff --git a/src/voice-broadcast/models/VoiceBroadcastRecording.ts b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
index 96b62a670f3..f7faa0876e0 100644
--- a/src/voice-broadcast/models/VoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, MatrixEventEvent, RelationType } from "matrix-js-sdk/src/matrix";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 
 import {
@@ -67,6 +67,7 @@ export class VoiceBroadcastRecording
         }) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped;
         // TODO Michael W: add listening for updates
 
+        this.infoEvent.on(MatrixEventEvent.BeforeRedaction, this.onBeforeRedaction);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
@@ -99,10 +100,19 @@ export class VoiceBroadcastRecording
             this.recorder.stop();
         }
 
+        this.infoEvent.off(MatrixEventEvent.BeforeRedaction, this.onBeforeRedaction);
         this.removeAllListeners();
         dis.unregister(this.dispatcherRef);
     }
 
+    private onBeforeRedaction = () => {
+        if (this.getState() !== VoiceBroadcastInfoState.Stopped) {
+            this.setState(VoiceBroadcastInfoState.Stopped);
+            // destroy cleans up everything
+            this.destroy();
+        }
+    };
+
     private onAction = (payload: ActionPayload) => {
         if (payload.action !== "call_state") return;
 
diff --git a/src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts b/src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts
index cc12b474e8d..b5c78a1b0e5 100644
--- a/src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts
+++ b/src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 
-import { VoiceBroadcastRecording } from "..";
+import { VoiceBroadcastInfoState, VoiceBroadcastRecording, VoiceBroadcastRecordingEvent } from "..";
 
 export enum VoiceBroadcastRecordingsStoreEvent {
     CurrentChanged = "current_changed",
@@ -41,7 +41,12 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
     public setCurrent(current: VoiceBroadcastRecording): void {
         if (this.current === current) return;
 
+        if (this.current) {
+            this.current.off(VoiceBroadcastRecordingEvent.StateChanged, this.onCurrentStateChanged);
+        }
+
         this.current = current;
+        this.current.on(VoiceBroadcastRecordingEvent.StateChanged, this.onCurrentStateChanged);
         this.recordings.set(current.infoEvent.getId(), current);
         this.emit(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, current);
     }
@@ -51,8 +56,9 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
     }
 
     public clearCurrent(): void {
-        if (this.current === null) return;
+        if (!this.current) return;
 
+        this.current.off(VoiceBroadcastRecordingEvent.StateChanged, this.onCurrentStateChanged);
         this.current = null;
         this.emit(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, null);
     }
@@ -67,6 +73,12 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
         return this.recordings.get(infoEventId);
     }
 
+    private onCurrentStateChanged = (state: VoiceBroadcastInfoState) => {
+        if (state === VoiceBroadcastInfoState.Stopped) {
+            this.clearCurrent();
+        }
+    };
+
     private static readonly cachedInstance = new VoiceBroadcastRecordingsStore();
 
     /**
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index 25a325aba79..049c03c5a45 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -20,6 +20,7 @@ import {
     EventType,
     MatrixClient,
     MatrixEvent,
+    MatrixEventEvent,
     MsgType,
     RelationType,
     Room,
@@ -81,6 +82,7 @@ describe("VoiceBroadcastRecording", () => {
     const setUpVoiceBroadcastRecording = () => {
         voiceBroadcastRecording = new VoiceBroadcastRecording(infoEvent, client);
         voiceBroadcastRecording.on(VoiceBroadcastRecordingEvent.StateChanged, onStateChanged);
+        jest.spyOn(voiceBroadcastRecording, "destroy");
         jest.spyOn(voiceBroadcastRecording, "removeAllListeners");
     };
 
@@ -214,6 +216,18 @@ describe("VoiceBroadcastRecording", () => {
                 expect(voiceBroadcastRecorder.start).toHaveBeenCalled();
             });
 
+            describe("and the info event is redacted", () => {
+                beforeEach(() => {
+                    infoEvent.emit(MatrixEventEvent.BeforeRedaction, null, null);
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Stopped);
+
+                it("should destroy the recording", () => {
+                    expect(voiceBroadcastRecording.destroy).toHaveBeenCalled();
+                });
+            });
+
             describe("and receiving a call action", () => {
                 beforeEach(() => {
                     dis.dispatch({
diff --git a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
index 56b90b73aec..3edb74592e0 100644
--- a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
+++ b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
@@ -18,28 +18,22 @@ import { mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
 import {
-    VoiceBroadcastInfoEventType,
     VoiceBroadcastRecordingsStore,
     VoiceBroadcastRecordingsStoreEvent,
     VoiceBroadcastRecording,
+    VoiceBroadcastInfoState,
 } from "../../../src/voice-broadcast";
-import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
-
-jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastRecording.ts", () => ({
-    VoiceBroadcastRecording: jest.fn().mockImplementation(
-        (
-            infoEvent: MatrixEvent,
-            client: MatrixClient,
-        ) => ({ infoEvent, client }),
-    ),
-}));
+import { mkStubRoom, stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
 
 describe("VoiceBroadcastRecordingsStore", () => {
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let room: Room;
     let infoEvent: MatrixEvent;
+    let otherInfoEvent: MatrixEvent;
     let recording: VoiceBroadcastRecording;
+    let otherRecording: VoiceBroadcastRecording;
     let recordings: VoiceBroadcastRecordingsStore;
     let onCurrentChanged: (recording: VoiceBroadcastRecording) => void;
 
@@ -51,22 +45,17 @@ describe("VoiceBroadcastRecordingsStore", () => {
                 return room;
             }
         });
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            user: client.getUserId(),
-            room: roomId,
-            content: {},
-        });
-        recording = {
-            infoEvent,
-        } as unknown as VoiceBroadcastRecording;
+        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        otherInfoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        recording = new VoiceBroadcastRecording(infoEvent, client);
+        otherRecording = new VoiceBroadcastRecording(otherInfoEvent, client);
         recordings = new VoiceBroadcastRecordingsStore();
         onCurrentChanged = jest.fn();
         recordings.on(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, onCurrentChanged);
     });
 
     afterEach(() => {
+        recording.destroy();
         recordings.off(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, onCurrentChanged);
     });
 
@@ -110,6 +99,32 @@ describe("VoiceBroadcastRecordingsStore", () => {
             it("should emit a current changed event", () => {
                 expect(onCurrentChanged).toHaveBeenCalledWith(null);
             });
+
+            it("and calling it again should work", () => {
+                recordings.clearCurrent();
+                expect(recordings.getCurrent()).toBeNull();
+            });
+        });
+
+        describe("and setting another recording and stopping the previous recording", () => {
+            beforeEach(() => {
+                recordings.setCurrent(otherRecording);
+                recording.stop();
+            });
+
+            it("should keep the current recording", () => {
+                expect(recordings.getCurrent()).toBe(otherRecording);
+            });
+        });
+
+        describe("and the recording stops", () => {
+            beforeEach(() => {
+                recording.stop();
+            });
+
+            it("should clear the current recording", () => {
+                expect(recordings.getCurrent()).toBeNull();
+            });
         });
     });
 
@@ -133,10 +148,7 @@ describe("VoiceBroadcastRecordingsStore", () => {
             });
 
             it("should return the recording", () => {
-                expect(returnedRecording).toEqual({
-                    infoEvent,
-                    client,
-                });
+                expect(returnedRecording.infoEvent).toBe(infoEvent);
             });
         });
     });

From 0a65d919a1a04bb457d59e4b24505a87c65ff001 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 19 Oct 2022 18:17:03 +0200
Subject: [PATCH 016/113] Fix typing

---
 .../views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx   | 3 +--
 .../wysiwyg_composer/components/FormattingButtons.tsx      | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index f36dbd2d9bd..24909bf2ee4 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -22,10 +22,9 @@ import { WysiwygComposer } from './components/WysiwygComposer';
 
 interface SendWysiwygComposerProps {
     disabled?: boolean;
-    onChange?: (content: string) => void;
+    onChange: (content: string) => void;
     onSend(): () => void;
 }
-
 interface ContentProps {
     disabled: boolean;
     formattingFunctions: FormattingFunctions;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c806c278615..00127e5e430 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { MouseEventHandler } from "react";
-import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
+import { FormattingFunctions, FormattingStates } from "@matrix-org/matrix-wysiwyg";
 import classNames from "classnames";
 
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
@@ -23,7 +23,6 @@ import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
 import { KeyCombo } from "../../../../../KeyBindingsManager";
 import { _td } from "../../../../../languageHandler";
-import { Wysiwyg } from "../types";
 
 interface TooltipProps {
     label: string;
@@ -56,8 +55,8 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
 }
 
 interface FormattingButtonsProps {
-    composer: Wysiwyg;
-    formattingStates: ReturnType<typeof useWysiwyg>['formattingStates'];
+    composer: FormattingFunctions;
+    formattingStates: FormattingStates;
 }
 
 export function FormattingButtons({ composer, formattingStates }: FormattingButtonsProps) {

From 63c3a55758ed45b3ad90e38f5afd0fd6f8914efe Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 19 Oct 2022 18:57:49 +0200
Subject: [PATCH 017/113] Disable save button until change

---
 .../views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx | 6 +++---
 .../rooms/wysiwyg_composer/components/EditionButtons.tsx | 5 +++--
 .../views/rooms/wysiwyg_composer/hooks/useEditing.ts     | 9 +++++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index cef10032855..341d045ba4e 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -44,18 +44,18 @@ export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiw
     const initialContent = useInitialContent(editorStateTransfer);
     const isReady = !editorStateTransfer || Boolean(initialContent);
 
-    const { editMessage, endEditing, setContent } = useEditing(initialContent, editorStateTransfer);
+    const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
 
     return isReady && <WysiwygComposer
         initialContent={initialContent}
-        onChange={setContent}
+        onChange={onChange}
         onSend={editMessage}
         {...props}>
         { (ref, wysiwyg,
             content) => (
             <>
                 <Content disabled={props.disabled} ref={ref} />
-                <EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} />
+                <EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} isSaveDisabled={isSaveDisabled} />
             </>)
         }
     </WysiwygComposer>;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
index 20a3df2a7f7..9e94c12470a 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
@@ -22,14 +22,15 @@ import AccessibleButton from '../../../elements/AccessibleButton';
 interface EditionButtonsProps {
     onCancelClick: MouseEventHandler<HTMLButtonElement>;
     onSaveClick: MouseEventHandler<HTMLButtonElement>;
+    isSaveDisabled?: boolean;
 }
 
-export function EditionButtons({ onCancelClick, onSaveClick }: EditionButtonsProps) {
+export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
     return <div className="mx_EditMessageComposer_buttons">
         <AccessibleButton kind="secondary" onClick={onCancelClick}>
             { _t("Cancel") }
         </AccessibleButton>
-        <AccessibleButton kind="primary" disabled={false} onClick={onSaveClick}>
+        <AccessibleButton kind="primary" onClick={onSaveClick} disabled={isSaveDisabled}>
             { _t("Save") }
         </AccessibleButton>
     </div>;
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
index 8076c0062ac..fcd4471cb1e 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
@@ -26,13 +26,18 @@ export function useEditing(initialContent: string, editorStateTransfer: EditorSt
     const roomContext = useRoomContext();
     const mxClient = useMatrixClientContext();
 
+    const [isSaveDisabled, setIsSaveDisabled] = useState(true);
     const [content, setContent] = useState(initialContent);
+    const onChange = useCallback((_content: string) => {
+        setContent(_content);
+        setIsSaveDisabled(_isSaveDisabled => _isSaveDisabled && _content === initialContent);
+    }, [initialContent]);
+
     const editMessageMemoized = useCallback(() =>
         editMessage(content, { roomContext, mxClient, editorStateTransfer }),
     [content, roomContext, mxClient, editorStateTransfer],
     );
 
     const endEditingMemoized = useCallback(() => endEditing(roomContext), [roomContext]);
-
-    return { setContent, editMessage: editMessageMemoized, endEditing: endEditingMemoized };
+    return { onChange, editMessage: editMessageMemoized, endEditing: endEditingMemoized, isSaveDisabled };
 }

From c7e83baa360d874fc2c61d411813e8e100eeb070 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 19 Oct 2022 19:29:42 +0200
Subject: [PATCH 018/113] Remove unused parameters

---
 .../views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx      | 3 +--
 .../rooms/wysiwyg_composer/components/WysiwygComposer.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index 341d045ba4e..d60d98ee9ff 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -51,8 +51,7 @@ export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiw
         onChange={onChange}
         onSend={editMessage}
         {...props}>
-        { (ref, wysiwyg,
-            content) => (
+        { (ref) => (
             <>
                 <Content disabled={props.disabled} ref={ref} />
                 <EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} isSaveDisabled={isSaveDisabled} />
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index 308a3fd2028..4a58b3693f2 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -29,7 +29,7 @@ interface WysiwygComposerProps {
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         wysiwyg: FormattingFunctions,
-        content: string) => ReactNode;
+    ) => ReactNode;
 }
 
 export const WysiwygComposer = memo(function WysiwygComposer(
@@ -50,7 +50,7 @@ export const WysiwygComposer = memo(function WysiwygComposer(
         <div className="mx_WysiwygComposer">
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
             <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
-            { children?.(ref, wysiwyg, content) }
+            { children?.(ref, wysiwyg) }
         </div>
     );
 });

From e9b285c5e058f4349b3856391089c51e4f0858a1 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 19 Oct 2022 19:44:49 +0200
Subject: [PATCH 019/113] Cleaning files

---
 src/components/views/rooms/BasicMessageComposer.tsx | 2 --
 src/components/views/rooms/EditMessageComposer.tsx  | 1 -
 src/components/views/rooms/MessageComposer.tsx      | 3 +--
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 962059091cc..d74c7b51484 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -833,8 +833,6 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public insertPlaintext(text: string): void {
-        console.log('insertPlaintext', text);
-        debugger;
         this.modifiedFlag = true;
         const { model } = this.props;
         const { partCreator } = model;
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index bb014541278..52312e1a998 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -350,7 +350,6 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
                 const event = this.props.editState.getEvent();
                 const threadId = event.threadRootId || null;
 
-                console.log('editContent', editContent);
                 this.props.mxClient.sendMessage(roomId, threadId, editContent);
                 dis.dispatch({ action: "message_sent" });
             }
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index b1582584bfa..b18e912d0cd 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -316,9 +316,8 @@ class MessageComposer extends React.Component<IProps, IState> {
         }
 
         this.messageComposerInput.current?.sendMessage();
-        // this.composerSendMessage?.();
-        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
 
+        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
         if (isWysiwygComposerEnabled) {
             const { permalinkCreator, relation, replyToEvent } = this.props;
             sendMessage(this.state.composerContent,

From f9a7d9fb7b2ef57cb291f154fcc0764772606687 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 19 Oct 2022 15:11:13 -0400
Subject: [PATCH 020/113] Align video call icon with banner text (#9460)

---
 res/css/views/rooms/_RoomCallBanner.pcss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_RoomCallBanner.pcss b/res/css/views/rooms/_RoomCallBanner.pcss
index 4b05b72d91d..ec26807bb18 100644
--- a/res/css/views/rooms/_RoomCallBanner.pcss
+++ b/res/css/views/rooms/_RoomCallBanner.pcss
@@ -41,14 +41,14 @@ limitations under the License.
 
     &::before {
         display: inline-block;
-        vertical-align: text-top;
+        vertical-align: middle;
         content: "";
         background-color: $secondary-content;
         mask-size: 16px;
+        mask-position-y: center;
         width: 16px;
-        height: 16px;
-        margin-right: 4px;
-        bottom: 2px;
+        height: 1.2em; /* to match line height */
+        margin-right: 8px;
         mask-image: url("$(res)/img/element-icons/call/video-call.svg");
     }
 }

From 7d0af1dca46b75aec23f7aa1a4d2c80746f5e56e Mon Sep 17 00:00:00 2001
From: Element Translate Bot <admin@riot.im>
Date: Wed, 19 Oct 2022 21:33:08 +0200
Subject: [PATCH 021/113] Translations update from Weblate (#9465)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Translated using Weblate (German)

Currently translated at 99.4% (3608 of 3629 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.5% (3617 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Italian)

Currently translated at 99.2% (3607 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Estonian)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (Hungarian)

Currently translated at 99.2% (3606 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Ukrainian)

Currently translated at 99.3% (3611 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Czech)

Currently translated at 99.3% (3608 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Hungarian)

Currently translated at 99.8% (3629 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Czech)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Slovak)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sk/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>
Co-authored-by: Weblate <translate@riot.im>
Co-authored-by: Vri <element@vrifox.cc>
Co-authored-by: random <dictionary@tutamail.com>
Co-authored-by: Priit Jõerüüt <riot@joeruut.com>
Co-authored-by: Szimszon <github@oregpreshaz.eu>
Co-authored-by: Ihor Hordiichuk <igor_ck@outlook.com>
Co-authored-by: waclaw66 <waclaw66@seznam.cz>
Co-authored-by: Jozef Gaal <preklady@mayday.sk>
---
 src/i18n/strings/cs.json    | 35 ++++++++++++++++++++++++++++++++---
 src/i18n/strings/de_DE.json | 37 +++++++++++++++++++++++++++++++++----
 src/i18n/strings/et.json    | 34 +++++++++++++++++++++++++++++++++-
 src/i18n/strings/hu.json    | 30 +++++++++++++++++++++++++++++-
 src/i18n/strings/it.json    |  9 ++++++---
 src/i18n/strings/sk.json    | 34 +++++++++++++++++++++++++++++++++-
 src/i18n/strings/uk.json    | 34 +++++++++++++++++++++++++++++++++-
 7 files changed, 199 insertions(+), 14 deletions(-)

diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index 9bd59626f6d..eed5bb72c99 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -941,7 +941,7 @@
     "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.": "Požádejte správce svého homeserveru (<code>%(homeserverDomain)s</code>) jestli by nemohl nakonfigurovat TURN server, aby volání fungovala spolehlivě.",
+    "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 domovského serveru (<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",
@@ -1441,7 +1441,7 @@
     "Manually Verify by Text": "Manuální textové ověření",
     "Interactively verify by Emoji": "Interaktivní ověření s emotikonami",
     "Support adding custom themes": "Umožnit přidání vlastního vzhledu",
-    "Manually verify all remote sessions": "Manuálně ověřit všechny relace",
+    "Manually verify all remote sessions": "Ručně ověřit všechny relace",
     "cached locally": "uložen lokálně",
     "not found locally": "nenalezen lolálně",
     "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Individuálně ověřit každou uživatelovu relaci a označit jí za důvěryhodnou, bez důvěry v křížový podpis.",
@@ -3635,5 +3635,34 @@
     "Notifications silenced": "Oznámení ztlumena",
     "Yes, stop broadcast": "Ano, zastavit vysílání",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Opravdu chcete ukončit živé vysílání? Tím se vysílání ukončí a v místnosti bude k dispozici celý záznam.",
-    "Stop live broadcasting?": "Ukončit živé vysílání?"
+    "Stop live broadcasting?": "Ukončit živé vysílání?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Hlasové vysílání už nahrává někdo jiný. Počkejte, až jeho hlasové vysílání skončí, a spusťte nové.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Nemáte potřebná oprávnění ke spuštění hlasového vysílání v této místnosti. Obraťte se na správce místnosti, aby vám zvýšil oprávnění.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Již nahráváte hlasové vysílání. Ukončete prosím aktuální hlasové vysílání a spusťte nové.",
+    "Can't start a new voice broadcast": "Nelze spustit nové hlasové vysílání",
+    "Completing set up of your new device": "Dokončování nastavení nového zařízení",
+    "Waiting for device to sign in": "Čekání na přihlášení zařízení",
+    "Connecting...": "Připojování...",
+    "Review and approve the sign in": "Zkontrolovat a schválit přihlášení",
+    "Select 'Scan QR code'": "Vyberte \"Naskenovat QR kód\"",
+    "Start at the sign in screen": "Začněte na přihlašovací obrazovce",
+    "Scan the QR code below with your device that's signed out.": "Níže uvedený QR kód naskenujte pomocí přihlašovaného zařízení.",
+    "By approving access for this device, it will have full access to your account.": "Schválením přístupu tohoto zařízení získá zařízení plný přístup k vašemu účtu.",
+    "Check that the code below matches with your other device:": "Zkontrolujte, zda se níže uvedený kód shoduje s vaším dalším zařízením:",
+    "Devices connected": "Zařízení byla propojena",
+    "The homeserver doesn't support signing in another device.": "Domovský server nepodporuje přihlášení pomocí jiného zařízení.",
+    "An unexpected error occurred.": "Došlo k neočekávané chybě.",
+    "The request was cancelled.": "Požadavek byl zrušen.",
+    "The other device isn't signed in.": "Druhé zařízení není přihlášeno.",
+    "The other device is already signed in.": "Druhé zařízení je již přihlášeno.",
+    "The request was declined on the other device.": "Požadavek byl na druhém zařízení odmítnut.",
+    "Linking with this device is not supported.": "Propojení s tímto zařízením není podporováno.",
+    "The scanned code is invalid.": "Naskenovaný kód je neplatný.",
+    "The linking wasn't completed in the required time.": "Propojení nebylo dokončeno v požadovaném čase.",
+    "Sign in new device": "Přihlásit nové zařízení",
+    "Show QR code": "Zobrazit QR kód",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Toto zařízení můžete použít k přihlášení nového zařízení pomocí QR kódu. QR kód zobrazený na tomto zařízení musíte naskenovat pomocí odhlášeného zařízení.",
+    "Sign in with QR code": "Přihlásit se pomocí QR kódu",
+    "Browser": "Prohlížeč",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Povolit zobrazení QR kódu ve správci relací pro přihlášení do jiného zařízení (vyžaduje kompatibilní domovský server)"
 }
diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 5b07a37cec4..60586e4088d 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -919,7 +919,7 @@
     "Only continue if you trust the owner of the server.": "Fahre nur fort, wenn du den Server-Betreibenden vertraust.",
     "Trust": "Vertrauen",
     "Custom (%(level)s)": "Benutzerdefiniert (%(level)s)",
-    "Sends a message as plain text, without interpreting it as markdown": "Verschickt eine Nachricht in Rohtext, ohne sie als Markdown darzustellen",
+    "Sends a message as plain text, without interpreting it as markdown": "Sendet eine Nachricht als Klartext, ohne sie als Markdown darzustellen",
     "Use an identity server to invite by email. Manage in Settings.": "Verwende einen Identitäts-Server, um per E-Mail einladen zu können. Lege einen in den Einstellungen fest.",
     "%(name)s (%(userId)s)": "%(name)s (%(userId)s)",
     "Try out new ways to ignore people (experimental)": "Verwende neue Möglichkeiten, Menschen zu blockieren",
@@ -1166,7 +1166,7 @@
     "%(creator)s created and configured the room.": "%(creator)s hat den Raum erstellt und konfiguriert.",
     "Keep a copy of it somewhere secure, like a password manager or even a safe.": "Bewahre eine Kopie an einem sicheren Ort, wie einem Passwort-Manager oder in einem Safe auf.",
     "Copy": "Kopieren",
-    "Sends a message as html, without interpreting it as markdown": "Verschickt eine Nachricht im HTML-Format, ohne sie als Markdown zu darzustellen",
+    "Sends a message as html, without interpreting it as markdown": "Sendet eine Nachricht als HTML, ohne sie als Markdown darzustellen",
     "Show rooms with unread notifications first": "Zeige Räume mit ungelesenen Benachrichtigungen zuerst an",
     "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",
@@ -3624,11 +3624,40 @@
     "resume voice broadcast": "Sprachübertragung fortsetzen",
     "Italic": "Kursiv",
     "Underline": "Unterstrichen",
-    "Try out the rich text editor (plain text mode coming soon)": "Probiere den Rich-Text-Editor aus (bald auch mit Plain-Text-Modus)",
+    "Try out the rich text editor (plain text mode coming soon)": "Probiere den Textverarbeitungs-Editor (bald auch mit Klartext-Modus)",
     "You have already joined this call from another device": "Du nimmst an diesem Anruf bereits mit einem anderen Gerät teil",
     "stop voice broadcast": "Sprachübertragung beenden",
     "Notifications silenced": "Benachrichtigungen stummgeschaltet",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Willst du die Sprachübertragung wirklich beenden? Damit endet auch die Aufnahme.",
     "Yes, stop broadcast": "Ja, Sprachübertragung beenden",
-    "Stop live broadcasting?": "Sprachübertragung beenden?"
+    "Stop live broadcasting?": "Sprachübertragung beenden?",
+    "Sign in with QR code": "Mit QR-Code anmelden",
+    "Browser": "Browser",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Erlaube es andere Geräte mittels QR-Code in der Sitzungsverwaltung anzumelden (kompatibler Heim-Server benötigt)",
+    "Completing set up of your new device": "Schließe Anmeldung deines neuen Gerätes ab",
+    "Waiting for device to sign in": "Warte auf Anmeldung des Gerätes",
+    "Connecting...": "Verbinde …",
+    "Review and approve the sign in": "Überprüfe und genehmige die Anmeldung",
+    "Select 'Scan QR code'": "Wähle „QR-Code einlesen“",
+    "Start at the sign in screen": "Beginne auf dem Anmeldebildschirm",
+    "Scan the QR code below with your device that's signed out.": "Lese den folgenden QR-Code mit deinem nicht angemeldeten Gerät ein.",
+    "By approving access for this device, it will have full access to your account.": "Indem du den Zugriff dieses Gerätes bestätigst, erhält es vollen Zugang zu deinem Account.",
+    "Check that the code below matches with your other device:": "Überprüfe, dass der unten angezeigte Code mit deinem anderen Gerät übereinstimmt:",
+    "Devices connected": "Geräte verbunden",
+    "The homeserver doesn't support signing in another device.": "Der Heim-Server unterstützt die Anmeldung eines anderen Gerätes nicht.",
+    "An unexpected error occurred.": "Ein unerwarteter Fehler ist aufgetreten.",
+    "The request was cancelled.": "Die Anfrage wurde abgebrochen.",
+    "The other device isn't signed in.": "Das andere Gerät ist nicht angemeldet.",
+    "The other device is already signed in.": "Das andere Gerät ist bereits angemeldet.",
+    "The request was declined on the other device.": "Die Anfrage wurde auf dem anderen Gerät abgelehnt.",
+    "Linking with this device is not supported.": "Die Verbindung mit diesem Gerät wird nicht unterstützt.",
+    "The scanned code is invalid.": "Der gescannte Code ist ungültig.",
+    "The linking wasn't completed in the required time.": "Die Verbindung konnte nicht in der erforderlichen Zeit hergestellt werden.",
+    "Sign in new device": "Neues Gerät anmelden",
+    "Show QR code": "QR-Code anzeigen",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Jemand anderes nimmt bereits eine Sprachübertragung auf. Warte auf das Ende der Übertragung, bevor du eine neue startest.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Du hast nicht die nötigen Berechtigungen, um eine Sprachübertragung in diesem Raum zu starten. Kontaktiere einen Raumadministrator, um deine Berechtigungen anzupassen.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Du zeichnest bereits eine Sprachübertragung auf. Bitte beende die laufende Übertragung, um eine neue zu beginnen.",
+    "Can't start a new voice broadcast": "Sprachübertragung kann nicht gestartet werden",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Du kannst dieses Gerät verwenden, um ein neues Gerät per QR-Code anzumelden. Dazu musst du den auf diesem Gerät angezeigten QR-Code mit deinem nicht angemeldeten Gerät einlesen."
 }
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index f6a6e49b25c..fabcc930193 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -3631,5 +3631,37 @@
     "New session manager": "Uus sessioonihaldur",
     "Use new session manager": "Kasuta uut sessioonihaldurit",
     "Try out the rich text editor (plain text mode coming soon)": "Proovi vormindatud teksti alusel töötavat tekstitoimetit (varsti lisandub ka vormindamata teksti režiim)",
-    "Notifications silenced": "Teavitused on summutatud"
+    "Notifications silenced": "Teavitused on summutatud",
+    "Completing set up of your new device": "Lõpetame uue seadme seadistamise",
+    "Waiting for device to sign in": "Ootame, et teine seade logiks võrku",
+    "Connecting...": "Ühendamisel…",
+    "Review and approve the sign in": "Vaata üle ja kinnita sisselogimine Matrixi'i võrku",
+    "Select 'Scan QR code'": "Vali „Loe QR-koodi“",
+    "Start at the sign in screen": "Alusta sisselogimisvaatest",
+    "Scan the QR code below with your device that's signed out.": "Loe QR-koodi seadmega, kus sa oled Matrix'i võrgust välja loginud.",
+    "By approving access for this device, it will have full access to your account.": "Lubades ligipääsu sellele seadmele, annad talle ka täismahulise ligipääsu oma kasutajakontole.",
+    "Check that the code below matches with your other device:": "Kontrolli, et järgnev kood klapib teises seadmes kuvatava koodiga:",
+    "Devices connected": "Seadmed on ühendatud",
+    "The homeserver doesn't support signing in another device.": "Koduserver ei toeta muude seadmete võrku logimise võimalust.",
+    "An unexpected error occurred.": "Tekkis teadmata viga.",
+    "The request was cancelled.": "Päring katkestati.",
+    "The other device isn't signed in.": "Teine seade ei ole võrku loginud.",
+    "The other device is already signed in.": "Teine seade on juba võrku loginud.",
+    "The request was declined on the other device.": "Teine seade lükkas päringu tagasi.",
+    "Linking with this device is not supported.": "Sidumine selle seadmega ei ole toetatud.",
+    "The scanned code is invalid.": "Skaneeritud QR-kood on vigane.",
+    "The linking wasn't completed in the required time.": "Sidumine ei lõppenud etteantud aja jooksul.",
+    "Sign in new device": "Logi sisse uus seade",
+    "Show QR code": "Näita QR-koodi",
+    "Sign in with QR code": "Logi sisse QR-koodi abil",
+    "Browser": "Brauser",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Sa saad kasutada seda seadet mõne muu seadme logimiseks Matrix'i võrku QR-koodi alusel. Selleks skaneeri võrgust väljalogitud seadmega seda QR-koodi.",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Teise seadme sisselogimiseks luba QR-koodi kuvamine sessioonihalduris (eeldab, et koduserver sellist võimalust toetab)",
+    "Yes, stop broadcast": "Jah, lõpeta",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Kas sa oled kindel, et soovid otseeetri lõpetada? Sellega ringhäälingukõne salvestamine lõppeb ja salvestis on kättesaadav kõigile jututoas.",
+    "Stop live broadcasting?": "Kas lõpetame otseeetri?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Keegi juba salvestab ringhäälingukõnet. Uue ringhäälingukõne salvestamiseks palun oota, kuni see teine ringhäälingukõne on lõppenud.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Sul pole piisavalt õigusi selles jututoas ringhäälingukõne algatamiseks. Õiguste lisamiseks palun võta ühendust jututoa haldajaga.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Sa juba salvestad ringhäälingukõnet. Uue alustamiseks palun lõpeta eelmine salvestus.",
+    "Can't start a new voice broadcast": "Uue ringhäälingukõne alustamine pole võimalik"
 }
diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index bba23baba97..de6d822e02d 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3631,5 +3631,33 @@
     "You do not have sufficient permissions to change this.": "Nincs megfelelő jogosultság a megváltoztatáshoz.",
     "%(brand)s is end-to-end encrypted, but is currently limited to smaller numbers of users.": "%(brand)s végpontok között titkosított de jelenleg csak kevés számú résztvevővel működik.",
     "Enable %(brand)s as an additional calling option in this room": "%(brand)s engedélyezése mint további opció hívásokhoz a szobában",
-    "Notifications silenced": "Értesítések elnémítva"
+    "Notifications silenced": "Értesítések elnémítva",
+    "Stop live broadcasting?": "Megszakítja az élő közvetítést?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Valaki már elindított egy hang közvetítést. Várja meg a közvetítés végét az új indításához.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Nincs jogosultsága hang közvetítést indítani ebben a szobában. Vegye fel a kapcsolatot a szoba adminisztrátorával a szükséges jogosultság megszerzéséhez.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Egy hang közvetítés már folyamatban van. Először fejezze be a jelenlegi közvetítést egy új indításához.",
+    "Can't start a new voice broadcast": "Az új hang közvetítés nem indítható el",
+    "Completing set up of your new device": "Új eszköz beállításának elvégzése",
+    "Waiting for device to sign in": "Várakozás a másik eszköz bejelentkezésére",
+    "Connecting...": "Kapcsolás…",
+    "Select 'Scan QR code'": "Válassza ezt: „QR kód beolvasása”",
+    "Start at the sign in screen": "Kezdje a bejelentkező képernyőn",
+    "Scan the QR code below with your device that's signed out.": "A kijelentkezett eszközzel olvasd be a QR kódot alább.",
+    "By approving access for this device, it will have full access to your account.": "Ennek az eszköznek a hozzáférés engedélyezése után az eszköznek teljes hozzáférése lesz a fiókjához.",
+    "Check that the code below matches with your other device:": "Ellenőrizze, hogy az alábbi kód megegyezik a másik eszközödön lévővel:",
+    "Devices connected": "Összekötött eszközök",
+    "The homeserver doesn't support signing in another device.": "A matrix szerver nem támogatja más eszköz bejelentkeztetését.",
+    "An unexpected error occurred.": "Nemvárt hiba történt.",
+    "The request was cancelled.": "A kérés megszakítva.",
+    "The other device isn't signed in.": "A másik eszköz még nincs bejelentkezve.",
+    "The other device is already signed in.": "A másik eszköz már bejelentkezett.",
+    "The request was declined on the other device.": "A kérést elutasították a másik eszközön.",
+    "Linking with this device is not supported.": "Összekötés ezzel az eszközzel nem támogatott.",
+    "The scanned code is invalid.": "A beolvasott kód érvénytelen.",
+    "The linking wasn't completed in the required time.": "Az összekötés az elvárt időn belül nem fejeződött be.",
+    "Sign in new device": "Új eszköz bejelentkeztetése",
+    "Show QR code": "QR kód beolvasása",
+    "Sign in with QR code": "Belépés QR kóddal",
+    "Browser": "Böngésző",
+    "Yes, stop broadcast": "Igen, közvetítés megállítása"
 }
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 08ea1f92349..6c4c692e651 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -2267,8 +2267,8 @@
     "Value": "Valore",
     "Setting ID": "ID impostazione",
     "Show chat effects (animations when receiving e.g. confetti)": "Mostra effetti chat (animazioni quando si ricevono ad es. coriandoli)",
-    "Original event source": "Fonte dell'evento originale",
-    "Decrypted event source": "Fonte dell'evento decifrato",
+    "Original event source": "Sorgente dell'evento originale",
+    "Decrypted event source": "Sorgente dell'evento decifrato",
     "Inviting...": "Invito...",
     "Invite by username": "Invita per nome utente",
     "Invite your teammates": "Invita la tua squadra",
@@ -3635,5 +3635,8 @@
     "stop voice broadcast": "ferma broadcast voce",
     "Yes, stop broadcast": "Sì, ferma il broadcast",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Vuoi davvero fermare il tuo broadcast in diretta? Verrà terminato il broadcast e la registrazione completa sarà disponibile nella stanza.",
-    "Stop live broadcasting?": "Fermare il broadcast in diretta?"
+    "Stop live broadcasting?": "Fermare il broadcast in diretta?",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Non hai l'autorizzazione necessaria per iniziare un broadcast vocale in questa stanza. Contatta un amministratore della stanza per aggiornare le tue autorizzazioni.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Stai già registrando un broadcast vocale. Termina quello in corso per iniziarne uno nuovo.",
+    "Can't start a new voice broadcast": "Impossibile iniziare un nuovo broadcast vocale"
 }
diff --git a/src/i18n/strings/sk.json b/src/i18n/strings/sk.json
index 0a7596d94e4..dd4555caf64 100644
--- a/src/i18n/strings/sk.json
+++ b/src/i18n/strings/sk.json
@@ -3632,5 +3632,37 @@
     "stop voice broadcast": "zastaviť hlasové vysielanie",
     "resume voice broadcast": "obnoviť hlasové vysielanie",
     "pause voice broadcast": "pozastaviť hlasové vysielanie",
-    "Notifications silenced": "Oznámenia stlmené"
+    "Notifications silenced": "Oznámenia stlmené",
+    "Completing set up of your new device": "Dokončenie nastavenia nového zariadenia",
+    "Waiting for device to sign in": "Čaká sa na prihlásenie zariadenia",
+    "Connecting...": "Pripájanie…",
+    "Review and approve the sign in": "Skontrolujte a schváľte prihlásenie",
+    "Select 'Scan QR code'": "Vyberte možnosť \"Skenovať QR kód\"",
+    "Start at the sign in screen": "Začnite na prihlasovacej obrazovke",
+    "Scan the QR code below with your device that's signed out.": "Naskenujte nižšie uvedený QR kód pomocou zariadenia, ktoré je odhlásené.",
+    "By approving access for this device, it will have full access to your account.": "Schválením prístupu pre toto zariadenie bude mať plný prístup k vášmu účtu.",
+    "Check that the code below matches with your other device:": "Skontrolujte, či sa nižšie uvedený kód zhoduje s vaším druhým zariadením:",
+    "Devices connected": "Zariadenia pripojené",
+    "The homeserver doesn't support signing in another device.": "Domovský server nepodporuje prihlasovanie do iného zariadenia.",
+    "An unexpected error occurred.": "Vyskytla sa neočakávaná chyba.",
+    "The request was cancelled.": "Žiadosť bola zrušená.",
+    "The other device isn't signed in.": "Druhé zariadenie nie je prihlásené.",
+    "The other device is already signed in.": "Druhé zariadenie je už prihlásené.",
+    "The request was declined on the other device.": "Žiadosť bola na druhom zariadení zamietnutá.",
+    "Linking with this device is not supported.": "Prepojenie s týmto zariadením nie je podporované.",
+    "The scanned code is invalid.": "Naskenovaný kód je neplatný.",
+    "The linking wasn't completed in the required time.": "Prepojenie nebolo dokončené v požadovanom čase.",
+    "Sign in new device": "Prihlásiť nové zariadenie",
+    "Show QR code": "Zobraziť QR kód",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Toto zariadenie môžete použiť na prihlásenie nového zariadenia pomocou QR kódu. QR kód zobrazený na tomto zariadení musíte naskenovať pomocou zariadenia, ktoré je odhlásené.",
+    "Sign in with QR code": "Prihlásiť sa pomocou QR kódu",
+    "Browser": "Prehliadač",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Umožniť zobrazenie QR kódu v správcovi relácií na prihlásenie do iného zariadenia (vyžaduje kompatibilný domovský server)",
+    "Yes, stop broadcast": "Áno, zastaviť vysielanie",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Určite chcete zastaviť vaše vysielanie naživo? Tým sa vysielanie ukončí a v miestnosti bude k dispozícii celý záznam.",
+    "Stop live broadcasting?": "Zastaviť vysielanie naživo?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Niekto iný už nahráva hlasové vysielanie. Počkajte, kým sa skončí jeho hlasové vysielanie, a potom spustite nové.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Nemáte požadované oprávnenia na spustenie hlasového vysielania v tejto miestnosti. Obráťte sa na správcu miestnosti, aby vám rozšíril oprávnenia.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Už nahrávate hlasové vysielanie. Ukončite aktuálne hlasové vysielanie a spustite nové.",
+    "Can't start a new voice broadcast": "Nemôžete spustiť nové hlasové vysielanie"
 }
diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index 04b1c056e9c..0d2adc0ad8f 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -3632,5 +3632,37 @@
     "pause voice broadcast": "призупинити голосове мовлення",
     "You have already joined this call from another device": "Ви вже приєдналися до цього виклику з іншого пристрою",
     "stop voice broadcast": "припинити голосове мовлення",
-    "Notifications silenced": "Сповіщення стишено"
+    "Notifications silenced": "Сповіщення стишено",
+    "Sign in with QR code": "Увійти за допомогою QR-коду",
+    "Browser": "Браузер",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Дозволити показ QR-коду в менеджері сеансів для входу на іншому пристрої (потрібен сумісний домашній сервер)",
+    "Yes, stop broadcast": "Так, припинити мовлення",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Ви впевнені, що хочете припинити голосове мовлення? На цьому трансляція завершиться, і повний запис буде доступний у кімнаті.",
+    "Stop live broadcasting?": "Припинити голосове мовлення?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Хтось інший вже записує голосову трансляцію. Зачекайте, поки вона завершиться, щоб почати нову.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Ви не маєте необхідних дозволів для початку голосового мовлення в цій кімнаті. Зверніться до адміністратора кімнати, щоб оновити ваші дозволи.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Ви вже записуєте голосову трансляцію. Завершіть поточну трансляцію, щоб розпочати нову.",
+    "Can't start a new voice broadcast": "Не вдалося розпочати нову голосове мовлення",
+    "Completing set up of your new device": "Завершення налаштування нового пристрою",
+    "Waiting for device to sign in": "Очікування входу з пристрою",
+    "Connecting...": "З'єднання...",
+    "Review and approve the sign in": "Розглянути та схвалити вхід",
+    "Select 'Scan QR code'": "Виберіть «Сканувати QR-код»",
+    "Start at the sign in screen": "Почніть з екрана входу",
+    "Scan the QR code below with your device that's signed out.": "Скануйте QR-код знизу своїм пристроєм, на якому ви вийшли.",
+    "By approving access for this device, it will have full access to your account.": "Затвердивши доступ для цього пристрою, ви надасте йому повний доступ до вашого облікового запису.",
+    "Check that the code below matches with your other device:": "Перевірте, чи збігається наведений внизу код з кодом на вашому іншому пристрої:",
+    "Devices connected": "Пристрої під'єднано",
+    "The homeserver doesn't support signing in another device.": "Домашній сервер не підтримує вхід на іншому пристрої.",
+    "An unexpected error occurred.": "Виникла непередбачувана помилка.",
+    "The request was cancelled.": "Запит було скасовано.",
+    "The other device isn't signed in.": "На іншому пристрої вхід не виконано.",
+    "The other device is already signed in.": "На іншому пристрої вхід було виконано.",
+    "The request was declined on the other device.": "На іншому пристрої запит відхилено.",
+    "Linking with this device is not supported.": "Зв'язок з цим пристроєм не підтримується.",
+    "The scanned code is invalid.": "Сканований код недійсний.",
+    "The linking wasn't completed in the required time.": "У встановлені терміни з'єднання не було виконано.",
+    "Sign in new device": "Увійти на новому пристрої",
+    "Show QR code": "Показати QR-код",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Ви можете використовувати цей пристрій для входу на новому пристрої за допомогою QR-коду. Вам потрібно буде сканувати QR-код, показаний на цьому пристрої, своїм пристроєм, на якому ви вийшли."
 }

From 17c3fb89c113a2924c7ddf3969fd8f8cc44feea2 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Wed, 19 Oct 2022 21:00:53 +0100
Subject: [PATCH 022/113] Store refactor: convert WidgetPermissionStore (#9458)

* Store refactor: convert WidgetPermissionStore

Add Jest tests as well.

* More tests

* Review comments
---
 .../dialogs/WidgetOpenIDPermissionsDialog.tsx |   5 +-
 src/contexts/SDKContext.ts                    |   8 ++
 src/stores/widgets/StopGapWidgetDriver.ts     |   4 +-
 src/stores/widgets/WidgetPermissionStore.ts   |  20 ++--
 test/TestSdkContext.ts                        |   2 +
 .../widgets/WidgetPermissionStore-test.ts     | 107 ++++++++++++++++++
 6 files changed, 129 insertions(+), 17 deletions(-)
 create mode 100644 test/stores/widgets/WidgetPermissionStore-test.ts

diff --git a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
index 68c2991ed8d..2d2d638af9a 100644
--- a/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
+++ b/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
@@ -21,10 +21,11 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import { OIDCState, WidgetPermissionStore } from "../../../stores/widgets/WidgetPermissionStore";
+import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
 import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 interface IProps extends IDialogProps {
     widget: Widget;
@@ -57,7 +58,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
         if (this.state.rememberSelection) {
             logger.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
 
-            WidgetPermissionStore.instance.setOIDCState(
+            SdkContextClass.instance.widgetPermissionStore.setOIDCState(
                 this.props.widget, this.props.widgetKind, this.props.inRoomId,
                 allowed ? OIDCState.Allowed : OIDCState.Denied,
             );
diff --git a/src/contexts/SDKContext.ts b/src/contexts/SDKContext.ts
index 8e6222512be..09f882ba897 100644
--- a/src/contexts/SDKContext.ts
+++ b/src/contexts/SDKContext.ts
@@ -27,6 +27,7 @@ import { RoomViewStore } from "../stores/RoomViewStore";
 import SpaceStore, { SpaceStoreClass } from "../stores/spaces/SpaceStore";
 import TypingStore from "../stores/TypingStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
+import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
 import WidgetStore from "../stores/WidgetStore";
 
 export const SDKContext = createContext<SdkContextClass>(undefined);
@@ -51,6 +52,7 @@ export class SdkContextClass {
     public client?: MatrixClient;
 
     // All protected fields to make it easier to derive test stores
+    protected _WidgetPermissionStore?: WidgetPermissionStore;
     protected _RightPanelStore?: RightPanelStore;
     protected _RoomNotificationStateStore?: RoomNotificationStateStore;
     protected _RoomViewStore?: RoomViewStore;
@@ -102,6 +104,12 @@ export class SdkContextClass {
         }
         return this._WidgetLayoutStore;
     }
+    public get widgetPermissionStore(): WidgetPermissionStore {
+        if (!this._WidgetPermissionStore) {
+            this._WidgetPermissionStore = new WidgetPermissionStore(this);
+        }
+        return this._WidgetPermissionStore;
+    }
     public get widgetStore(): WidgetStore {
         if (!this._WidgetStore) {
             this._WidgetStore = WidgetStore.instance;
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index ba01a10926b..ff2619ad594 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -47,7 +47,7 @@ import Modal from "../../Modal";
 import WidgetOpenIDPermissionsDialog from "../../components/views/dialogs/WidgetOpenIDPermissionsDialog";
 import WidgetCapabilitiesPromptDialog from "../../components/views/dialogs/WidgetCapabilitiesPromptDialog";
 import { WidgetPermissionCustomisations } from "../../customisations/WidgetPermissions";
-import { OIDCState, WidgetPermissionStore } from "./WidgetPermissionStore";
+import { OIDCState } from "./WidgetPermissionStore";
 import { WidgetType } from "../../widgets/WidgetType";
 import { CHAT_EFFECTS } from "../../effects";
 import { containsEmoji } from "../../effects/utils";
@@ -350,7 +350,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
     }
 
     public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>) {
-        const oidcState = WidgetPermissionStore.instance.getOIDCState(
+        const oidcState = SdkContextClass.instance.widgetPermissionStore.getOIDCState(
             this.forWidget, this.forWidgetKind, this.inRoomId,
         );
 
diff --git a/src/stores/widgets/WidgetPermissionStore.ts b/src/stores/widgets/WidgetPermissionStore.ts
index 246492333c3..fca018ca5c7 100644
--- a/src/stores/widgets/WidgetPermissionStore.ts
+++ b/src/stores/widgets/WidgetPermissionStore.ts
@@ -17,8 +17,8 @@
 import { Widget, WidgetKind } from "matrix-widget-api";
 
 import SettingsStore from "../../settings/SettingsStore";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { SettingLevel } from "../../settings/SettingLevel";
+import { SdkContextClass } from "../../contexts/SDKContext";
 
 export enum OIDCState {
     Allowed, // user has set the remembered value as allowed
@@ -27,16 +27,7 @@ export enum OIDCState {
 }
 
 export class WidgetPermissionStore {
-    private static internalInstance: WidgetPermissionStore;
-
-    private constructor() {
-    }
-
-    public static get instance(): WidgetPermissionStore {
-        if (!WidgetPermissionStore.internalInstance) {
-            WidgetPermissionStore.internalInstance = new WidgetPermissionStore();
-        }
-        return WidgetPermissionStore.internalInstance;
+    public constructor(private readonly context: SdkContextClass) {
     }
 
     // TODO (all functions here): Merge widgetKind with the widget definition
@@ -44,7 +35,7 @@ export class WidgetPermissionStore {
     private packSettingKey(widget: Widget, kind: WidgetKind, roomId?: string): string {
         let location = roomId;
         if (kind !== WidgetKind.Room) {
-            location = MatrixClientPeg.get().getUserId();
+            location = this.context.client?.getUserId();
         }
         if (kind === WidgetKind.Modal) {
             location = '*MODAL*-' + location; // to guarantee differentiation from whatever spawned it
@@ -71,7 +62,10 @@ export class WidgetPermissionStore {
     public setOIDCState(widget: Widget, kind: WidgetKind, roomId: string, newState: OIDCState) {
         const settingsKey = this.packSettingKey(widget, kind, roomId);
 
-        const currentValues = SettingsStore.getValue("widgetOpenIDPermissions");
+        let currentValues = SettingsStore.getValue("widgetOpenIDPermissions");
+        if (!currentValues) {
+            currentValues = {};
+        }
         if (!currentValues.allow) currentValues.allow = [];
         if (!currentValues.deny) currentValues.deny = [];
 
diff --git a/test/TestSdkContext.ts b/test/TestSdkContext.ts
index 137b71f9a37..4ce9100a94d 100644
--- a/test/TestSdkContext.ts
+++ b/test/TestSdkContext.ts
@@ -22,6 +22,7 @@ import RightPanelStore from "../src/stores/right-panel/RightPanelStore";
 import { RoomViewStore } from "../src/stores/RoomViewStore";
 import { SpaceStoreClass } from "../src/stores/spaces/SpaceStore";
 import { WidgetLayoutStore } from "../src/stores/widgets/WidgetLayoutStore";
+import { WidgetPermissionStore } from "../src/stores/widgets/WidgetPermissionStore";
 import WidgetStore from "../src/stores/WidgetStore";
 
 /**
@@ -32,6 +33,7 @@ export class TestSdkContext extends SdkContextClass {
     public _RightPanelStore?: RightPanelStore;
     public _RoomNotificationStateStore?: RoomNotificationStateStore;
     public _RoomViewStore?: RoomViewStore;
+    public _WidgetPermissionStore?: WidgetPermissionStore;
     public _WidgetLayoutStore?: WidgetLayoutStore;
     public _WidgetStore?: WidgetStore;
     public _PosthogAnalytics?: PosthogAnalytics;
diff --git a/test/stores/widgets/WidgetPermissionStore-test.ts b/test/stores/widgets/WidgetPermissionStore-test.ts
new file mode 100644
index 00000000000..3ebb7fc9f53
--- /dev/null
+++ b/test/stores/widgets/WidgetPermissionStore-test.ts
@@ -0,0 +1,107 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { Widget, WidgetKind } from "matrix-widget-api";
+
+import { OIDCState, WidgetPermissionStore } from "../../../src/stores/widgets/WidgetPermissionStore";
+import SettingsStore from "../../../src/settings/SettingsStore";
+import { TestSdkContext } from "../../TestSdkContext";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { stubClient } from "../../test-utils";
+
+jest.mock("../../../src/settings/SettingsStore");
+
+describe("WidgetPermissionStore", () => {
+    let widgetPermissionStore: WidgetPermissionStore;
+    let mockClient: MatrixClient;
+    const userId = "@alice:localhost";
+    const roomId = "!room:localhost";
+    const w = new Widget({
+        id: "wid",
+        creatorUserId: userId,
+        type: "m.custom",
+        url: "https://invalid.address.here",
+    });
+    let settings = {}; // key value store
+
+    beforeEach(() => {
+        settings = {}; // clear settings
+        mocked(SettingsStore.getValue).mockImplementation((setting: string) => {
+            return settings[setting];
+        });
+        mocked(SettingsStore.setValue).mockImplementation((settingName: string,
+            roomId: string | null,
+            level: SettingLevel,
+            value: any,
+        ): Promise<void> => {
+            // the store doesn't use any specific level or room ID (room IDs are packed into keys in `value`)
+            settings[settingName] = value;
+            return Promise.resolve();
+        });
+        mockClient = stubClient();
+        const context = new TestSdkContext();
+        context.client = mockClient;
+        widgetPermissionStore = new WidgetPermissionStore(context);
+    });
+
+    it("should persist OIDCState.Allowed for a widget", () => {
+        widgetPermissionStore.setOIDCState(w, WidgetKind.Account, null, OIDCState.Allowed);
+        // check it remembered the value
+        expect(
+            widgetPermissionStore.getOIDCState(w, WidgetKind.Account, null),
+        ).toEqual(OIDCState.Allowed);
+    });
+
+    it("should persist OIDCState.Denied for a widget", () => {
+        widgetPermissionStore.setOIDCState(w, WidgetKind.Account, null, OIDCState.Denied);
+        // check it remembered the value
+        expect(
+            widgetPermissionStore.getOIDCState(w, WidgetKind.Account, null),
+        ).toEqual(OIDCState.Denied);
+    });
+
+    it("should update OIDCState for a widget", () => {
+        widgetPermissionStore.setOIDCState(w, WidgetKind.Account, null, OIDCState.Allowed);
+        widgetPermissionStore.setOIDCState(w, WidgetKind.Account, null, OIDCState.Denied);
+        // check it remembered the latest value
+        expect(
+            widgetPermissionStore.getOIDCState(w, WidgetKind.Account, null),
+        ).toEqual(OIDCState.Denied);
+    });
+
+    it("should scope the location for a widget when setting OIDC state", () => {
+        // allow this widget for this room
+        widgetPermissionStore.setOIDCState(w, WidgetKind.Room, roomId, OIDCState.Allowed);
+        // check it remembered the value
+        expect(
+            widgetPermissionStore.getOIDCState(w, WidgetKind.Room, roomId),
+        ).toEqual(OIDCState.Allowed);
+        // check this is not the case for the entire account
+        expect(
+            widgetPermissionStore.getOIDCState(w, WidgetKind.Account, roomId),
+        ).toEqual(OIDCState.Unknown);
+    });
+    it("is created once in SdkContextClass", () => {
+        const context = new SdkContextClass();
+        const store = context.widgetPermissionStore;
+        expect(store).toBeDefined();
+        const store2 = context.widgetPermissionStore;
+        expect(store2).toStrictEqual(store);
+    });
+});

From dade38086cb6904d4e8138914f53e792b740a02d Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 20 Oct 2022 00:52:06 -0600
Subject: [PATCH 023/113] Fix slightly noisy warning when switching spaces
 (#9468)

Sometimes `spaceName` can be `undefined` because of function timing - use a different method for getting the space's name when this happens.
---
 src/components/views/rooms/RoomListHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index f783e628f30..9c7b5c11aa0 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@@ -379,7 +379,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
             isExpanded={mainMenuDisplayed}
             className="mx_RoomListHeader_contextMenuButton"
             title={activeSpace
-                ? _t("%(spaceName)s menu", { spaceName })
+                ? _t("%(spaceName)s menu", { spaceName: spaceName ?? activeSpace.name })
                 : _t("Home options")}
         >
             { title }

From 6fe8744e4dfd8f9661f7dc92719cac5d69841142 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 20 Oct 2022 00:52:17 -0600
Subject: [PATCH 024/113] Remove performance metrics from cypress (#9467)

They are unfortunately unreliable and have been broken since June anyways.
---
 .github/workflows/cypress.yaml              | 44 ------------
 cypress/e2e/create-room/create-room.spec.ts |  2 -
 cypress/e2e/login/login.spec.ts             |  2 -
 cypress/e2e/register/register.spec.ts       |  4 --
 cypress/plugins/index.ts                    |  2 -
 cypress/plugins/performance.ts              | 47 -------------
 cypress/support/e2e.ts                      |  1 -
 cypress/support/performance.ts              | 74 ---------------------
 8 files changed, 176 deletions(-)
 delete mode 100644 cypress/plugins/performance.ts
 delete mode 100644 cypress/support/performance.ts

diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml
index a76c00918bb..57e6a7837e1 100644
--- a/.github/workflows/cypress.yaml
+++ b/.github/workflows/cypress.yaml
@@ -155,17 +155,6 @@ jobs:
             cypress/videos
             cypress/synapselogs
 
-      - run: mv cypress/performance/*.json cypress/performance/measurements-${{ strategy.job-index }}.json
-        continue-on-error: true
-
-      - name: Upload Benchmark
-        uses: actions/upload-artifact@v2
-        with:
-          name: cypress-benchmark
-          path: cypress/performance/*
-          if-no-files-found: ignore
-          retention-days: 1
-
   report:
     name: Report results
     needs: tests
@@ -181,36 +170,3 @@ jobs:
           context: ${{ github.workflow }} / cypress (${{ github.event.workflow_run.event }} => ${{ github.event_name }})
           sha: ${{ github.event.workflow_run.head_sha }}
           target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}
-
-  store-benchmark:
-    needs: tests
-    runs-on: ubuntu-latest
-    if: |
-      github.event.workflow_run.event != 'pull_request' &&
-      github.event.workflow_run.head_branch == 'develop' &&
-      github.event.workflow_run.head_repository.full_name == github.repository
-    permissions:
-      contents: write
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Download benchmark result
-        uses: actions/download-artifact@v3
-        with:
-          name: cypress-benchmark
-
-      - name: Merge measurements
-        run: jq -s add measurements-*.json > measurements.json
-
-      - name: Store benchmark result
-        uses: matrix-org/github-action-benchmark@jsperfentry-6
-        with:
-          name: Cypress measurements
-          tool: 'jsperformanceentry'
-          output-file-path: measurements.json
-          # The dashboard is available at https://matrix-org.github.io/matrix-react-sdk/cypress/bench/
-          benchmark-data-dir-path: cypress/bench
-          fail-on-alert: false
-          comment-on-alert: false
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          auto-push: ${{ github.event.workflow_run.event != 'pull_request' }}
diff --git a/cypress/e2e/create-room/create-room.spec.ts b/cypress/e2e/create-room/create-room.spec.ts
index deac0728e35..1217c917b64 100644
--- a/cypress/e2e/create-room/create-room.spec.ts
+++ b/cypress/e2e/create-room/create-room.spec.ts
@@ -54,12 +54,10 @@ describe("Create Room", () => {
             // Fill room address
             cy.get('[label="Room address"]').type("test-room-1");
             // Submit
-            cy.startMeasuring("from-submit-to-room");
             cy.get(".mx_Dialog_primary").click();
         });
 
         cy.url().should("contain", "/#/room/#test-room-1:localhost");
-        cy.stopMeasuring("from-submit-to-room");
         cy.contains(".mx_RoomHeader_nametext", name);
         cy.contains(".mx_RoomHeader_topic", topic);
     });
diff --git a/cypress/e2e/login/login.spec.ts b/cypress/e2e/login/login.spec.ts
index ff963dfbfe7..10582870102 100644
--- a/cypress/e2e/login/login.spec.ts
+++ b/cypress/e2e/login/login.spec.ts
@@ -52,11 +52,9 @@ describe("Login", () => {
 
             cy.get("#mx_LoginForm_username").type(username);
             cy.get("#mx_LoginForm_password").type(password);
-            cy.startMeasuring("from-submit-to-home");
             cy.get(".mx_Login_submit").click();
 
             cy.url().should('contain', '/#/home', { timeout: 30000 });
-            cy.stopMeasuring("from-submit-to-home");
         });
     });
 
diff --git a/cypress/e2e/register/register.spec.ts b/cypress/e2e/register/register.spec.ts
index 1945eb7fec0..98ef2bd7290 100644
--- a/cypress/e2e/register/register.spec.ts
+++ b/cypress/e2e/register/register.spec.ts
@@ -55,7 +55,6 @@ describe("Registration", () => {
         cy.get("#mx_RegistrationForm_username").type("alice");
         cy.get("#mx_RegistrationForm_password").type("totally a great password");
         cy.get("#mx_RegistrationForm_passwordConfirm").type("totally a great password");
-        cy.startMeasuring("create-account");
         cy.get(".mx_Login_submit").click();
 
         cy.get(".mx_RegistrationEmailPromptDialog").should("be.visible");
@@ -63,13 +62,11 @@ describe("Registration", () => {
         cy.checkA11y();
         cy.get(".mx_RegistrationEmailPromptDialog button.mx_Dialog_primary").click();
 
-        cy.stopMeasuring("create-account");
         cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy").should("be.visible");
         cy.percySnapshot("Registration terms prompt", { percyCSS });
         cy.checkA11y();
 
         cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy input").click();
-        cy.startMeasuring("from-submit-to-home");
         cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
 
         cy.get(".mx_UseCaseSelection_skip", { timeout: 30000 }).should("exist");
@@ -78,7 +75,6 @@ describe("Registration", () => {
         cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
 
         cy.url().should('contain', '/#/home');
-        cy.stopMeasuring("from-submit-to-home");
 
         cy.get('[aria-label="User menu"]').click();
         cy.get('[aria-label="Security & Privacy"]').click();
diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts
index 09b2bdb53b5..ce154ee0bcd 100644
--- a/cypress/plugins/index.ts
+++ b/cypress/plugins/index.ts
@@ -18,7 +18,6 @@ limitations under the License.
 
 import PluginEvents = Cypress.PluginEvents;
 import PluginConfigOptions = Cypress.PluginConfigOptions;
-import { performance } from "./performance";
 import { synapseDocker } from "./synapsedocker";
 import { slidingSyncProxyDocker } from "./sliding-sync";
 import { webserver } from "./webserver";
@@ -30,7 +29,6 @@ import { log } from "./log";
  */
 export default function(on: PluginEvents, config: PluginConfigOptions) {
     docker(on, config);
-    performance(on, config);
     synapseDocker(on, config);
     slidingSyncProxyDocker(on, config);
     webserver(on, config);
diff --git a/cypress/plugins/performance.ts b/cypress/plugins/performance.ts
deleted file mode 100644
index c6bd3e4ce9f..00000000000
--- a/cypress/plugins/performance.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/// <reference types="cypress" />
-
-import * as path from "path";
-import * as fse from "fs-extra";
-
-import PluginEvents = Cypress.PluginEvents;
-import PluginConfigOptions = Cypress.PluginConfigOptions;
-
-// This holds all the performance measurements throughout the run
-let bufferedMeasurements: PerformanceEntry[] = [];
-
-function addMeasurements(measurements: PerformanceEntry[]): void {
-    bufferedMeasurements = bufferedMeasurements.concat(measurements);
-    return null;
-}
-
-async function writeMeasurementsFile() {
-    try {
-        const measurementsPath = path.join("cypress", "performance", "measurements.json");
-        await fse.outputJSON(measurementsPath, bufferedMeasurements, {
-            spaces: 4,
-        });
-    } finally {
-        bufferedMeasurements = [];
-    }
-}
-
-export function performance(on: PluginEvents, config: PluginConfigOptions) {
-    on("task", { addMeasurements });
-    on("after:run", writeMeasurementsFile);
-}
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index 899d41c5b8d..4470c2192e5 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -19,7 +19,6 @@ limitations under the License.
 import "@percy/cypress";
 import "cypress-real-events";
 
-import "./performance";
 import "./synapse";
 import "./login";
 import "./labs";
diff --git a/cypress/support/performance.ts b/cypress/support/performance.ts
deleted file mode 100644
index bbd1fe217d4..00000000000
--- a/cypress/support/performance.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/// <reference types="cypress" />
-
-import Chainable = Cypress.Chainable;
-import AUTWindow = Cypress.AUTWindow;
-
-declare global {
-    // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace Cypress {
-        interface Chainable {
-            /**
-             * Start measuring the duration of some task.
-             * @param task The task name.
-             */
-            startMeasuring(task: string): Chainable<AUTWindow>;
-            /**
-             * Stop measuring the duration of some task.
-             * The duration is reported in the Cypress log.
-             * @param task The task name.
-             */
-            stopMeasuring(task: string): Chainable<AUTWindow>;
-        }
-    }
-}
-
-function getPrefix(task: string): string {
-    return `cy:${Cypress.spec.name.split(".")[0]}:${task}`;
-}
-
-function startMeasuring(task: string): Chainable<AUTWindow> {
-    return cy.window({ log: false }).then((win) => {
-        win.mxPerformanceMonitor.start(getPrefix(task));
-    });
-}
-
-function stopMeasuring(task: string): Chainable<AUTWindow> {
-    return cy.window({ log: false }).then((win) => {
-        const measure = win.mxPerformanceMonitor.stop(getPrefix(task));
-        cy.log(`**${task}** ${measure.duration} ms`);
-    });
-}
-
-Cypress.Commands.add("startMeasuring", startMeasuring);
-Cypress.Commands.add("stopMeasuring", stopMeasuring);
-
-Cypress.on("window:before:unload", (event: BeforeUnloadEvent) => {
-    const doc = event.target as Document;
-    if (doc.location.href === "about:blank") return;
-    const win = doc.defaultView as AUTWindow;
-    if (!win.mxPerformanceMonitor) return;
-    const entries = win.mxPerformanceMonitor.getEntries().filter(entry => {
-        return entry.name.startsWith("cy:");
-    });
-    if (!entries || entries.length === 0) return;
-    cy.task("addMeasurements", entries);
-});
-
-// Needed to make this file a module
-export { };

From 3c9ba3e69f743145bf4caf158738a2278a4b0f2b Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 20 Oct 2022 10:04:14 +0200
Subject: [PATCH 025/113] Replace Icon with webpack loaded SVG (#9464)

---
 res/css/_components.pcss                      |   3 +-
 .../{components/atoms => compound}/_Icon.pcss |  23 +---
 .../atoms/_VoiceBroadcastControl.pcss         |  27 ++++
 res/img/element-icons/Stop.svg                |   2 +-
 res/img/element-icons/live.svg                |  41 +-----
 res/img/element-icons/pause.svg               |   4 +-
 res/img/element-icons/play.svg                |   2 +-
 res/img/voip/call-view/mic-on.svg             |   2 +-
 src/components/atoms/Icon.tsx                 |  83 ------------
 src/i18n/strings/en_EN.json                   |   6 +-
 .../components/atoms/LiveBadge.tsx            |   4 +-
 .../atoms/PlaybackControlButton.tsx           |  53 --------
 ...opButton.tsx => VoiceBroadcastControl.tsx} |  17 ++-
 .../components/atoms/VoiceBroadcastHeader.tsx |   7 +-
 .../molecules/VoiceBroadcastPlaybackBody.tsx  |  37 +++++-
 .../molecules/VoiceBroadcastRecordingPip.tsx  |   9 +-
 src/voice-broadcast/index.ts                  |   3 +-
 test/components/atoms/Icon-test.tsx           |  47 -------
 .../atoms/__snapshots__/Icon-test.tsx.snap    |  34 -----
 .../atoms/PlaybackControlButton-test.tsx      |  45 -------
 .../components/atoms/StopButton-test.tsx      |  45 -------
 .../atoms/VoiceBroadcastControl-test.tsx      |  55 ++++++++
 .../__snapshots__/LiveBadge-test.tsx.snap     |   7 +-
 .../PlaybackControlButton-test.tsx.snap       |  55 --------
 .../__snapshots__/StopButton-test.tsx.snap    |  19 ---
 .../VoiceBroadcastControl-test.tsx.snap       |  16 +++
 .../VoiceBroadcastHeader-test.tsx.snap        |  28 ++--
 .../VoiceBroadcastPlaybackBody-test.tsx       |  26 ++--
 .../VoiceBroadcastRecordingPip-test.tsx       |   2 +-
 .../VoiceBroadcastPlaybackBody-test.tsx.snap  | 121 ++++++++++++------
 .../VoiceBroadcastRecordingBody-test.tsx.snap |  14 +-
 .../VoiceBroadcastRecordingPip-test.tsx.snap  |  25 ++--
 32 files changed, 298 insertions(+), 564 deletions(-)
 rename res/css/{components/atoms => compound}/_Icon.pcss (68%)
 create mode 100644 res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
 delete mode 100644 src/components/atoms/Icon.tsx
 delete mode 100644 src/voice-broadcast/components/atoms/PlaybackControlButton.tsx
 rename src/voice-broadcast/components/atoms/{StopButton.tsx => VoiceBroadcastControl.tsx} (68%)
 delete mode 100644 test/components/atoms/Icon-test.tsx
 delete mode 100644 test/components/atoms/__snapshots__/Icon-test.tsx.snap
 delete mode 100644 test/voice-broadcast/components/atoms/PlaybackControlButton-test.tsx
 delete mode 100644 test/voice-broadcast/components/atoms/StopButton-test.tsx
 create mode 100644 test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx
 delete mode 100644 test/voice-broadcast/components/atoms/__snapshots__/PlaybackControlButton-test.tsx.snap
 delete mode 100644 test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap
 create mode 100644 test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastControl-test.tsx.snap

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index b2fcb0dd4f8..819afe64a40 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -4,7 +4,7 @@
 @import "./_font-sizes.pcss";
 @import "./_font-weights.pcss";
 @import "./_spacing.pcss";
-@import "./components/atoms/_Icon.pcss";
+@import "./compound/_Icon.pcss";
 @import "./components/views/beacon/_BeaconListItem.pcss";
 @import "./components/views/beacon/_BeaconStatus.pcss";
 @import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@@ -369,6 +369,7 @@
 @import "./views/voip/_VideoFeed.pcss";
 @import "./voice-broadcast/atoms/_LiveBadge.pcss";
 @import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
+@import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
 @import "./voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss";
 @import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";
diff --git a/res/css/components/atoms/_Icon.pcss b/res/css/compound/_Icon.pcss
similarity index 68%
rename from res/css/components/atoms/_Icon.pcss
rename to res/css/compound/_Icon.pcss
index b9d994e43f4..88f49f9da06 100644
--- a/res/css/components/atoms/_Icon.pcss
+++ b/res/css/compound/_Icon.pcss
@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/*
+ * Compound icon
+
+ * {@link https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed}
+ */
+
 .mx_Icon {
     box-sizing: border-box;
-    display: inline-block;
-    mask-origin: content-box;
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
     padding: 1px;
 }
 
@@ -28,15 +29,3 @@ limitations under the License.
     height: 16px;
     width: 16px;
 }
-
-.mx_Icon_accent {
-    background-color: $accent;
-}
-
-.mx_Icon_live-badge {
-    background-color: #fff;
-}
-
-.mx_Icon_compound-secondary-content {
-    background-color: $secondary-content;
-}
diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
new file mode 100644
index 00000000000..bf07157a68b
--- /dev/null
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_VoiceBroadcastControl {
+    align-items: center;
+    background-color: $background;
+    border-radius: 50%;
+    color: $secondary-content;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    margin-bottom: $spacing-8;
+    width: 32px;
+}
diff --git a/res/img/element-icons/Stop.svg b/res/img/element-icons/Stop.svg
index 29c7a0cef7b..d63459e1dbc 100644
--- a/res/img/element-icons/Stop.svg
+++ b/res/img/element-icons/Stop.svg
@@ -1,3 +1,3 @@
 <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.973633" y="2" width="12" height="12" rx="1" fill="#737D8C"/>
+<rect x="0.973633" y="2" width="12" height="12" rx="1" fill="currentColor"/>
 </svg>
diff --git a/res/img/element-icons/live.svg b/res/img/element-icons/live.svg
index 40a7a666770..31341f1ef68 100644
--- a/res/img/element-icons/live.svg
+++ b/res/img/element-icons/live.svg
@@ -5,54 +5,23 @@
    viewBox="0 0 21.799 21.799"
    fill="none"
    version="1.1"
-   id="svg12"
-   sodipodi:docname="live.svg"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs16" />
-  <sodipodi:namedview
-     id="namedview14"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="35.416667"
-     inkscape:cx="8.7670588"
-     inkscape:cy="8.1882353"
-     inkscape:window-width="1920"
-     inkscape:window-height="1053"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg12" />
   <path
      d="m 19.188575,3.0855891 c -0.3391,-0.43594 -0.9674,-0.51448 -1.4033,-0.17541 -0.4355,0.3387 -0.5143,0.96596 -0.1766,1.40185 l 8e-4,9.8e-4 0.001,0.00129 0.0136,0.01816 c 0.0133,0.0178 0.0346,0.04686 0.0629,0.0867 0.0566,0.07972 0.1408,0.20227 0.2435,0.36368 0.2058,0.32333 0.4838,0.79947 0.7625,1.39672 0.5603,1.20054 1.1062,2.85339 1.1062,4.7199899 0,1.8666 -0.5459,3.5194 -1.1062,4.72 -0.2787,0.5972 -0.5567,1.0733 -0.7625,1.3967 -0.1027,0.1614 -0.1869,0.2839 -0.2435,0.3637 -0.0283,0.0398 -0.0496,0.0689 -0.0629,0.0867 l -0.0136,0.0181 -0.001,0.0013 -9e-4,0.0012 c -0.3376,0.4358 -0.2587,1.063 0.1767,1.4016 0.4359,0.3391 1.0642,0.2606 1.4033,-0.1754 l -0.7453,-0.5796 c 0.7453,0.5796 0.7453,0.5796 0.7453,0.5796 l 0.002,-0.0025 0.0028,-0.0038 0.0083,-0.0108 0.0265,-0.0352 c 0.0219,-0.0294 0.0521,-0.0707 0.0895,-0.1232 0.0746,-0.1051 0.1779,-0.2558 0.3002,-0.448 0.2442,-0.3838 0.5662,-0.9362 0.8875,-1.6247 0.6397,-1.3709 1.2938,-3.318 1.2938,-5.5657 0,-2.2477199 -0.6541,-4.1948699 -1.2938,-5.5657599 -0.3213,-0.68846 -0.6433,-1.2409 -0.8875,-1.6247 -0.1223,-0.19217 -0.2256,-0.34283 -0.3002,-0.44793 -0.0374,-0.05258 -0.0676,-0.09382 -0.0895,-0.12323 l -0.0265,-0.03521 -0.0083,-0.01085 -0.0028,-0.00371 -0.0012,-0.00143 c 0,0 -8e-4,-0.00114 -0.7902,0.6128 z"
-     fill="#c1c6cd"
-     id="path2" />
+     fill="currentColor" />
   <path
      d="m 16.589375,6.6858091 c -0.339,-0.43595 -0.9673,-0.51448 -1.4033,-0.17541 -0.4348,0.33819 -0.514,0.96407 -0.178,1.39987 l 0.0034,0.00458 c 0.0045,0.00599 0.0129,0.01748 0.0248,0.03422 0.0238,0.03351 0.0612,0.08776 0.1076,0.16077 0.0933,0.14655 0.2213,0.36554 0.35,0.64137 0.2603,0.55764 0.5062,1.3105399 0.5062,2.1485399 0,0.838 -0.2459,1.5909 -0.5062,2.1485 -0.1287,0.2759 -0.2567,0.4949 -0.35,0.6414 -0.0464,0.073 -0.0838,0.1273 -0.1076,0.1608 -0.0119,0.0167 -0.0203,0.0282 -0.0248,0.0342 l -0.0034,0.0046 c -0.336,0.4358 -0.2568,1.0617 0.178,1.3999 0.436,0.339 1.0643,0.2605 1.4033,-0.1755 l -0.7893,-0.6139 c 0.7893,0.6139 0.7893,0.6139 0.7893,0.6139 l 0.0018,-0.0022 0.0022,-0.0029 0.0058,-0.0075 0.0164,-0.0219 c 0.0131,-0.0176 0.0305,-0.0412 0.0514,-0.0707 0.0418,-0.0589 0.0982,-0.1413 0.1643,-0.245 0.1317,-0.2071 0.3037,-0.5024 0.475,-0.8694 0.3397,-0.728 0.6938,-1.7752 0.6938,-2.9943 0,-1.2190999 -0.3541,-2.2662799 -0.6938,-2.9943099 -0.1713,-0.36703 -0.3433,-0.66233 -0.475,-0.86935 -0.0661,-0.10377 -0.1225,-0.18613 -0.1643,-0.24503 -0.0209,-0.02947 -0.0383,-0.05314 -0.0514,-0.07074 l -0.0164,-0.02187 -0.0058,-0.00748 -0.0022,-0.00287 -9e-4,-0.00122 c 0,0 -9e-4,-0.00107 -0.7902,0.61287 z"
-     fill="#c1c6cd"
-     id="path4" />
+     fill="currentColor" />
   <path
      d="m 2.6104749,18.713449 c 0.33907,0.4359 0.96734,0.5144 1.40329,0.1754 0.43547,-0.3387 0.5143,-0.966 0.17653,-1.4019 l -7.6e-4,-10e-4 -9.7e-4,-0.0013 -0.01365,-0.0181 c -0.01325,-0.0178 -0.0346,-0.0469 -0.06289,-0.0867 -0.05661,-0.0797 -0.14082,-0.2023 -0.24354,-0.3637 -0.20576,-0.3233 -0.48376,-0.7995 -0.76248,-1.3967 -0.56025,-1.2006 -1.10618,-2.8534 -1.10618,-4.72 0,-1.8665999 0.54593,-3.5194099 1.10618,-4.7199499 0.27872,-0.59726 0.55672,-1.07339 0.76248,-1.39673 0.10272,-0.1614 0.18693,-0.28396 0.24354,-0.36368 0.02829,-0.03983 0.04964,-0.0689 0.06289,-0.0867 l 0.01365,-0.01815 9.7e-4,-0.00129 9.1e-4,-0.00117 c 0.33761,-0.43588 0.25873,-1.06302 -0.17668,-1.40166 -0.43595,-0.33907 -1.06422,-0.26054 -1.40329,0.17541 l 0.74526,0.57964 c -0.74527,-0.57963 -0.74526,-0.57964 -0.74526,-0.57964 l -0.00199,0.00256 -0.00287,0.00372 -0.0083,0.01085 -0.02649,0.0352 c -0.0219,0.02941 -0.05212,0.07066 -0.08945,0.12323 -0.07464,0.10511 -0.17792,0.25577 -0.30021,0.44793 -0.24424,0.38381 -0.56624,0.93625 -0.88752,1.62471 -0.63975001,1.37088 -1.29382000681,3.31804 -1.29382000681,5.5657199 0,2.2477 0.65406999681,4.1949 1.29382000681,5.5658 0.32128,0.6884 0.64328,1.2409 0.88752,1.6247 0.12229,0.1921 0.22557,0.3428 0.30021,0.4479 0.03733,0.0526 0.06755,0.0938 0.08945,0.1232 l 0.02649,0.0352 0.0083,0.0109 0.00287,0.0037 0.0011,0.0014 c 0,0 8.9e-4,0.0012 0.79024,-0.6128 z"
-     fill="#c1c6cd"
-     id="path6" />
+     fill="currentColor" />
   <path
      d="m 5.2095949,15.113149 c 0.33907,0.436 0.96735,0.5145 1.40329,0.1754 0.43481,-0.3381 0.51407,-0.964 0.17806,-1.3998 l -0.00343,-0.0046 c -0.00447,-0.006 -0.01292,-0.0175 -0.0248,-0.0342 -0.0238,-0.0335 -0.06114,-0.0878 -0.10761,-0.1608 -0.09326,-0.1465 -0.22126,-0.3655 -0.34997,-0.6414 -0.26026,-0.5576 -0.50619,-1.3105 -0.50619,-2.1485 0,-0.838 0.24593,-1.5908999 0.50619,-2.1485499 0.12871,-0.27582 0.25671,-0.49481 0.34997,-0.64136 0.04647,-0.07302 0.08381,-0.12727 0.10761,-0.16078 0.01188,-0.01673 0.02033,-0.02822 0.0248,-0.03422 l 0.00344,-0.00458 c 0.336,-0.43581 0.25674,-1.06168 -0.17807,-1.39986 -0.43594,-0.33907 -1.06422,-0.26054 -1.40329,0.17541 l 0.78935,0.61394 c -0.78935,-0.61394 -0.78935,-0.61394 -0.78935,-0.61394 l -0.00177,0.00228 -0.00222,0.00287 -0.00572,0.00749 -0.01646,0.02186 c -0.01311,0.01761 -0.03044,0.04128 -0.05137,0.07075 -0.04182,0.0589 -0.09823,0.14125 -0.16427,0.24503 -0.13174,0.20702 -0.30374,0.50231 -0.47502,0.86934 -0.33975,0.72803 -0.69382,1.77522 -0.69382,2.9943199 0,1.2191 0.35407,2.2663 0.69382,2.9943 0.17128,0.367 0.34328,0.6623 0.47502,0.8694 0.06604,0.1037 0.12245,0.1861 0.16427,0.245 0.02093,0.0295 0.03826,0.0531 0.05137,0.0707 l 0.01646,0.0219 0.00572,0.0075 0.00222,0.0029 9.4e-4,0.0012 c 0,0 8.3e-4,10e-4 0.79018,-0.6129 z"
-     fill="#c1c6cd"
-     id="path8" />
+     fill="currentColor" />
   <circle
      cx="10.999774"
      cy="10.898949"
      r="2"
-     fill="#c1c6cd"
-     id="circle10" />
+     fill="currentColor" />
 </svg>
diff --git a/res/img/element-icons/pause.svg b/res/img/element-icons/pause.svg
index 293c0a10d86..4b7be99e3b9 100644
--- a/res/img/element-icons/pause.svg
+++ b/res/img/element-icons/pause.svg
@@ -1,4 +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"/>
+<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="currentColor"/>
+<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="currentColor"/>
 </svg>
diff --git a/res/img/element-icons/play.svg b/res/img/element-icons/play.svg
index 339e20b729b..3443ae01fa8 100644
--- a/res/img/element-icons/play.svg
+++ b/res/img/element-icons/play.svg
@@ -1,3 +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"/>
+<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="currentColor"/>
 </svg>
diff --git a/res/img/voip/call-view/mic-on.svg b/res/img/voip/call-view/mic-on.svg
index 57428a3cd8d..317d10b2962 100644
--- a/res/img/voip/call-view/mic-on.svg
+++ b/res/img/voip/call-view/mic-on.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.09999 6.15C8.09999 3.99609 9.84608 2.25 12 2.25C14.1539 2.25 15.9 3.99609 15.9 6.15V11.9825C15.9 14.1365 14.1539 15.8825 12 15.8825C9.84608 15.8825 8.09999 14.1365 8.09999 11.9825V6.15ZM5.1748 10.7375C5.86516 10.7375 6.4248 11.2972 6.4248 11.9875C6.4248 15.0574 8.91483 17.5493 11.9915 17.5538C11.9943 17.5538 11.9972 17.5538 12 17.5538C12.0028 17.5538 12.0056 17.5538 12.0084 17.5538C15.085 17.5492 17.5748 15.0573 17.5748 11.9875C17.5748 11.2972 18.1344 10.7375 18.8248 10.7375C19.5152 10.7375 20.0748 11.2972 20.0748 11.9875C20.0748 16.0189 17.115 19.3576 13.25 19.9577V20.7513C13.25 21.4416 12.6904 22.0013 12 22.0013C11.3096 22.0013 10.75 21.4416 10.75 20.7513V19.9578C6.88482 19.3578 3.9248 16.0191 3.9248 11.9875C3.9248 11.2972 4.48445 10.7375 5.1748 10.7375Z" fill="#737D8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.09999 6.15C8.09999 3.99609 9.84608 2.25 12 2.25C14.1539 2.25 15.9 3.99609 15.9 6.15V11.9825C15.9 14.1365 14.1539 15.8825 12 15.8825C9.84608 15.8825 8.09999 14.1365 8.09999 11.9825V6.15ZM5.1748 10.7375C5.86516 10.7375 6.4248 11.2972 6.4248 11.9875C6.4248 15.0574 8.91483 17.5493 11.9915 17.5538C11.9943 17.5538 11.9972 17.5538 12 17.5538C12.0028 17.5538 12.0056 17.5538 12.0084 17.5538C15.085 17.5492 17.5748 15.0573 17.5748 11.9875C17.5748 11.2972 18.1344 10.7375 18.8248 10.7375C19.5152 10.7375 20.0748 11.2972 20.0748 11.9875C20.0748 16.0189 17.115 19.3576 13.25 19.9577V20.7513C13.25 21.4416 12.6904 22.0013 12 22.0013C11.3096 22.0013 10.75 21.4416 10.75 20.7513V19.9578C6.88482 19.3578 3.9248 16.0191 3.9248 11.9875C3.9248 11.2972 4.48445 10.7375 5.1748 10.7375Z" fill="currentColor"/>
 </svg>
diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx
deleted file mode 100644
index 56d8236250d..00000000000
--- a/src/components/atoms/Icon.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-
-import liveIcon from "../../../res/img/element-icons/live.svg";
-import microphoneIcon from "../../../res/img/voip/call-view/mic-on.svg";
-import pauseIcon from "../../../res/img/element-icons/pause.svg";
-import playIcon from "../../../res/img/element-icons/play.svg";
-import stopIcon from "../../../res/img/element-icons/Stop.svg";
-
-export enum IconType {
-    Live,
-    Microphone,
-    Pause,
-    Play,
-    Stop,
-}
-
-const iconTypeMap = new Map([
-    [IconType.Live, liveIcon],
-    [IconType.Microphone, microphoneIcon],
-    [IconType.Pause, pauseIcon],
-    [IconType.Play, playIcon],
-    [IconType.Stop, stopIcon],
-]);
-
-export enum IconColour {
-    Accent = "accent",
-    LiveBadge = "live-badge",
-    CompoundSecondaryContent = "compound-secondary-content",
-}
-
-export enum IconSize {
-    S16 = "16",
-}
-
-interface IconProps {
-    colour?: IconColour;
-    size?: IconSize;
-    type: IconType;
-}
-
-export const Icon: React.FC<IconProps> = ({
-    size = IconSize.S16,
-    colour = IconColour.Accent,
-    type,
-    ...rest
-}) => {
-    const classes = [
-        "mx_Icon",
-        `mx_Icon_${size}`,
-        `mx_Icon_${colour}`,
-    ];
-
-    const styles: React.CSSProperties = {
-        maskImage: `url("${iconTypeMap.get(type)}")`,
-        WebkitMaskImage: `url("${iconTypeMap.get(type)}")`,
-    };
-
-    return (
-        <i
-            aria-hidden
-            className={classes.join(" ")}
-            role="presentation"
-            style={styles}
-            {...rest}
-        />
-    );
-};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f322c5de8d8..f40e1658040 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -644,10 +644,10 @@
     "Stop live broadcasting?": "Stop live broadcasting?",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.",
     "Yes, stop broadcast": "Yes, stop broadcast",
-    "Live": "Live",
-    "pause voice broadcast": "pause voice broadcast",
+    "play voice broadcast": "play voice broadcast",
     "resume voice broadcast": "resume voice broadcast",
-    "stop voice broadcast": "stop voice broadcast",
+    "pause voice broadcast": "pause voice broadcast",
+    "Live": "Live",
     "Voice broadcast": "Voice broadcast",
     "Cannot reach homeserver": "Cannot reach homeserver",
     "Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin",
diff --git a/src/voice-broadcast/components/atoms/LiveBadge.tsx b/src/voice-broadcast/components/atoms/LiveBadge.tsx
index cd2a16e797d..ba94aa14a99 100644
--- a/src/voice-broadcast/components/atoms/LiveBadge.tsx
+++ b/src/voice-broadcast/components/atoms/LiveBadge.tsx
@@ -16,12 +16,12 @@ limitations under the License.
 
 import React from "react";
 
-import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
 import { _t } from "../../../languageHandler";
 
 export const LiveBadge: React.FC = () => {
     return <div className="mx_LiveBadge">
-        <Icon type={IconType.Live} colour={IconColour.LiveBadge} />
+        <LiveIcon className="mx_Icon mx_Icon_16" />
         { _t("Live") }
     </div>;
 };
diff --git a/src/voice-broadcast/components/atoms/PlaybackControlButton.tsx b/src/voice-broadcast/components/atoms/PlaybackControlButton.tsx
deleted file mode 100644
index b67e6b3e24f..00000000000
--- a/src/voice-broadcast/components/atoms/PlaybackControlButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-
-import { VoiceBroadcastPlaybackState } from "../..";
-import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
-import AccessibleButton from "../../../components/views/elements/AccessibleButton";
-import { _t } from "../../../languageHandler";
-
-const stateIconMap = new Map([
-    [VoiceBroadcastPlaybackState.Playing, IconType.Pause],
-    [VoiceBroadcastPlaybackState.Paused, IconType.Play],
-    [VoiceBroadcastPlaybackState.Stopped, IconType.Play],
-]);
-
-interface Props {
-    onClick: () => void;
-    state: VoiceBroadcastPlaybackState;
-}
-
-export const PlaybackControlButton: React.FC<Props> = ({
-    onClick,
-    state,
-}) => {
-    const ariaLabel = state === VoiceBroadcastPlaybackState.Playing
-        ? _t("pause voice broadcast")
-        : _t("resume voice broadcast");
-
-    return <AccessibleButton
-        className="mx_BroadcastPlaybackControlButton"
-        onClick={onClick}
-        aria-label={ariaLabel}
-    >
-        <Icon
-            colour={IconColour.CompoundSecondaryContent}
-            type={stateIconMap.get(state)}
-        />
-    </AccessibleButton>;
-};
diff --git a/src/voice-broadcast/components/atoms/StopButton.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
similarity index 68%
rename from src/voice-broadcast/components/atoms/StopButton.tsx
rename to src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
index 50abb209d05..238d138698b 100644
--- a/src/voice-broadcast/components/atoms/StopButton.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
@@ -16,25 +16,24 @@ limitations under the License.
 
 import React from "react";
 
-import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
-import { _t } from "../../../languageHandler";
 
 interface Props {
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    label: string;
     onClick: () => void;
 }
 
-export const StopButton: React.FC<Props> = ({
+export const VoiceBroadcastControl: React.FC<Props> = ({
+    icon: Icon,
+    label,
     onClick,
 }) => {
     return <AccessibleButton
-        className="mx_BroadcastPlaybackControlButton"
+        className="mx_VoiceBroadcastControl"
         onClick={onClick}
-        aria-label={_t("stop voice broadcast")}
+        aria-label={label}
     >
-        <Icon
-            colour={IconColour.CompoundSecondaryContent}
-            type={IconType.Stop}
-        />
+        <Icon className="mx_Icon mx_Icon_16" />
     </AccessibleButton>;
 };
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
index 5abc4d21e41..c83e8e8a0c5 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
@@ -15,7 +15,8 @@ import React from "react";
 import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
 
 import { LiveBadge } from "../..";
-import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
+import { Icon as MicrophoneIcon } from "../../../../res/img/voip/call-view/mic-on.svg";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
 
@@ -34,7 +35,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
 }) => {
     const broadcast = showBroadcast
         ? <div className="mx_VoiceBroadcastHeader_line">
-            <Icon type={IconType.Live} colour={IconColour.CompoundSecondaryContent} />
+            <LiveIcon className="mx_Icon mx_Icon_16" />
             { _t("Voice broadcast") }
         </div>
         : null;
@@ -46,7 +47,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
                 { room.name }
             </div>
             <div className="mx_VoiceBroadcastHeader_line">
-                <Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
+                <MicrophoneIcon className="mx_Icon mx_Icon_16" />
                 <span>{ sender.name }</span>
             </div>
             { broadcast }
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
index 035b3ce6e57..e0634636a74 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
@@ -17,13 +17,16 @@ limitations under the License.
 import React from "react";
 
 import {
-    PlaybackControlButton,
+    VoiceBroadcastControl,
     VoiceBroadcastHeader,
     VoiceBroadcastPlayback,
     VoiceBroadcastPlaybackState,
 } from "../..";
 import Spinner from "../../../components/views/elements/Spinner";
 import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
+import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
+import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { _t } from "../../../languageHandler";
 
 interface VoiceBroadcastPlaybackBodyProps {
     playback: VoiceBroadcastPlayback;
@@ -40,9 +43,35 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
         playbackState,
     } = useVoiceBroadcastPlayback(playback);
 
-    const control = playbackState === VoiceBroadcastPlaybackState.Buffering
-        ? <Spinner />
-        : <PlaybackControlButton onClick={toggle} state={playbackState} />;
+    let control: React.ReactNode;
+
+    if (playbackState === VoiceBroadcastPlaybackState.Buffering) {
+        control = <Spinner />;
+    } else {
+        let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+        let controlLabel: string;
+
+        switch (playbackState) {
+            case VoiceBroadcastPlaybackState.Stopped:
+                controlIcon = PlayIcon;
+                controlLabel = _t("play voice broadcast");
+                break;
+            case VoiceBroadcastPlaybackState.Paused:
+                controlIcon = PlayIcon;
+                controlLabel = _t("resume voice broadcast");
+                break;
+            case VoiceBroadcastPlaybackState.Playing:
+                controlIcon = PauseIcon;
+                controlLabel = _t("pause voice broadcast");
+                break;
+        }
+
+        control = <VoiceBroadcastControl
+            label={controlLabel}
+            icon={controlIcon}
+            onClick={toggle}
+        />;
+    }
 
     return (
         <div className="mx_VoiceBroadcastPlaybackBody">
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
index c7604b7d900..7178f659650 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
@@ -17,11 +17,12 @@ limitations under the License.
 import React from "react";
 
 import {
-    StopButton,
+    VoiceBroadcastControl,
     VoiceBroadcastRecording,
 } from "../..";
 import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
 import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
+import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
 
 interface VoiceBroadcastRecordingPipProps {
     recording: VoiceBroadcastRecording;
@@ -45,7 +46,11 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         />
         <hr className="mx_VoiceBroadcastRecordingPip_divider" />
         <div className="mx_VoiceBroadcastRecordingPip_controls">
-            <StopButton onClick={stopRecording} />
+            <VoiceBroadcastControl
+                icon={StopIcon}
+                label="Stop Recording"
+                onClick={stopRecording}
+            />
         </div>
     </div>;
 };
diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 8f01c089c68..10329e224d4 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -26,8 +26,7 @@ export * from "./models/VoiceBroadcastRecording";
 export * from "./audio/VoiceBroadcastRecorder";
 export * from "./components/VoiceBroadcastBody";
 export * from "./components/atoms/LiveBadge";
-export * from "./components/atoms/PlaybackControlButton";
-export * from "./components/atoms/StopButton";
+export * from "./components/atoms/VoiceBroadcastControl";
 export * from "./components/atoms/VoiceBroadcastHeader";
 export * from "./components/molecules/VoiceBroadcastPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastRecordingBody";
diff --git a/test/components/atoms/Icon-test.tsx b/test/components/atoms/Icon-test.tsx
deleted file mode 100644
index 57e6e3990c4..00000000000
--- a/test/components/atoms/Icon-test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import { render } from "@testing-library/react";
-
-import { Icon, IconColour, IconSize, IconType } from "../../../src/components/atoms/Icon";
-
-describe("Icon", () => {
-    it.each([
-        IconColour.Accent,
-        IconColour.LiveBadge,
-    ])("should render the colour %s", (colour: IconColour) => {
-        const { container } = render(
-            <Icon
-                colour={colour}
-                type={IconType.Live}
-            />,
-        );
-        expect(container).toMatchSnapshot();
-    });
-
-    it.each([
-        IconSize.S16,
-    ])("should render the size %s", (size: IconSize) => {
-        const { container } = render(
-            <Icon
-                size={size}
-                type={IconType.Live}
-            />,
-        );
-        expect(container).toMatchSnapshot();
-    });
-});
diff --git a/test/components/atoms/__snapshots__/Icon-test.tsx.snap b/test/components/atoms/__snapshots__/Icon-test.tsx.snap
deleted file mode 100644
index c30b4ba3323..00000000000
--- a/test/components/atoms/__snapshots__/Icon-test.tsx.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Icon should render the colour accent 1`] = `
-<div>
-  <i
-    aria-hidden="true"
-    class="mx_Icon mx_Icon_16 mx_Icon_accent"
-    role="presentation"
-    style="mask-image: url(\\"image-file-stub\\");"
-  />
-</div>
-`;
-
-exports[`Icon should render the colour live-badge 1`] = `
-<div>
-  <i
-    aria-hidden="true"
-    class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-    role="presentation"
-    style="mask-image: url(\\"image-file-stub\\");"
-  />
-</div>
-`;
-
-exports[`Icon should render the size 16 1`] = `
-<div>
-  <i
-    aria-hidden="true"
-    class="mx_Icon mx_Icon_16 mx_Icon_accent"
-    role="presentation"
-    style="mask-image: url(\\"image-file-stub\\");"
-  />
-</div>
-`;
diff --git a/test/voice-broadcast/components/atoms/PlaybackControlButton-test.tsx b/test/voice-broadcast/components/atoms/PlaybackControlButton-test.tsx
deleted file mode 100644
index f3e03d38f2e..00000000000
--- a/test/voice-broadcast/components/atoms/PlaybackControlButton-test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { PlaybackControlButton, VoiceBroadcastPlaybackState } from "../../../../src/voice-broadcast";
-
-describe("PlaybackControlButton", () => {
-    let onClick: () => void;
-
-    beforeEach(() => {
-        onClick = jest.fn();
-    });
-
-    it.each([
-        [VoiceBroadcastPlaybackState.Playing],
-        [VoiceBroadcastPlaybackState.Paused],
-        [VoiceBroadcastPlaybackState.Stopped],
-    ])("should render state »%s« as expected", (state: VoiceBroadcastPlaybackState) => {
-        const result = render(<PlaybackControlButton state={state} onClick={onClick} />);
-        expect(result.container).toMatchSnapshot();
-    });
-
-    it("should call onClick on click", async () => {
-        render(<PlaybackControlButton state={VoiceBroadcastPlaybackState.Playing} onClick={onClick} />);
-        const button = screen.getByLabelText("pause voice broadcast");
-        await userEvent.click(button);
-        expect(onClick).toHaveBeenCalled();
-    });
-});
diff --git a/test/voice-broadcast/components/atoms/StopButton-test.tsx b/test/voice-broadcast/components/atoms/StopButton-test.tsx
deleted file mode 100644
index 742844fca13..00000000000
--- a/test/voice-broadcast/components/atoms/StopButton-test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import { render, RenderResult } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { StopButton } from "../../../../src/voice-broadcast";
-
-describe("StopButton", () => {
-    let result: RenderResult;
-    let onClick: () => {};
-
-    beforeEach(() => {
-        onClick = jest.fn();
-        result = render(<StopButton onClick={onClick} />);
-    });
-
-    it("should render as expected", () => {
-        expect(result.container).toMatchSnapshot();
-    });
-
-    describe("when clicking it", () => {
-        beforeEach(async () => {
-            await userEvent.click(result.getByLabelText("stop voice broadcast"));
-        });
-
-        it("should invoke the callback", () => {
-            expect(onClick).toHaveBeenCalled();
-        });
-    });
-});
diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx
new file mode 100644
index 00000000000..391731d5932
--- /dev/null
+++ b/test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx
@@ -0,0 +1,55 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { VoiceBroadcastControl } from "../../../../src/voice-broadcast";
+import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
+
+describe("VoiceBroadcastControl", () => {
+    let result: RenderResult;
+    let onClick: () => void;
+
+    beforeEach(() => {
+        onClick = jest.fn();
+    });
+
+    describe("when rendering it", () => {
+        beforeEach(() => {
+            result = render(<VoiceBroadcastControl
+                onClick={onClick}
+                label="test label"
+                icon={StopIcon}
+            />);
+        });
+
+        it("should render as expected", () => {
+            expect(result.container).toMatchSnapshot();
+        });
+
+        describe("when clicking it", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("test label"));
+            });
+
+            it("should call onClick", () => {
+                expect(onClick).toHaveBeenCalled();
+            });
+        });
+    });
+});
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap
index f0009b971e5..2dd85a293a1 100644
--- a/test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap
+++ b/test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap
@@ -5,11 +5,8 @@ exports[`LiveBadge should render the expected HTML 1`] = `
   <div
     class="mx_LiveBadge"
   >
-    <i
-      aria-hidden="true"
-      class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-      role="presentation"
-      style="mask-image: url(\\"image-file-stub\\");"
+    <div
+      class="mx_Icon mx_Icon_16"
     />
     Live
   </div>
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/PlaybackControlButton-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/PlaybackControlButton-test.tsx.snap
deleted file mode 100644
index 0e674c8000a..00000000000
--- a/test/voice-broadcast/components/atoms/__snapshots__/PlaybackControlButton-test.tsx.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PlaybackControlButton should render state »0« as expected 1`] = `
-<div>
-  <div
-    aria-label="resume voice broadcast"
-    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
-    role="button"
-    tabindex="0"
-  >
-    <i
-      aria-hidden="true"
-      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-      role="presentation"
-      style="mask-image: url(\\"image-file-stub\\");"
-    />
-  </div>
-</div>
-`;
-
-exports[`PlaybackControlButton should render state »1« as expected 1`] = `
-<div>
-  <div
-    aria-label="pause voice broadcast"
-    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
-    role="button"
-    tabindex="0"
-  >
-    <i
-      aria-hidden="true"
-      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-      role="presentation"
-      style="mask-image: url(\\"image-file-stub\\");"
-    />
-  </div>
-</div>
-`;
-
-exports[`PlaybackControlButton should render state »2« as expected 1`] = `
-<div>
-  <div
-    aria-label="resume voice broadcast"
-    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
-    role="button"
-    tabindex="0"
-  >
-    <i
-      aria-hidden="true"
-      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-      role="presentation"
-      style="mask-image: url(\\"image-file-stub\\");"
-    />
-  </div>
-</div>
-`;
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap
deleted file mode 100644
index ca5015a79a7..00000000000
--- a/test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StopButton should render as expected 1`] = `
-<div>
-  <div
-    aria-label="stop voice broadcast"
-    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
-    role="button"
-    tabindex="0"
-  >
-    <i
-      aria-hidden="true"
-      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-      role="presentation"
-      style="mask-image: url(\\"image-file-stub\\");"
-    />
-  </div>
-</div>
-`;
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastControl-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastControl-test.tsx.snap
new file mode 100644
index 00000000000..a28e105b4cc
--- /dev/null
+++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastControl-test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VoiceBroadcastControl when rendering it should render as expected 1`] = `
+<div>
+  <div
+    aria-label="test label"
+    class="mx_AccessibleButton mx_VoiceBroadcastControl"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="mx_Icon mx_Icon_16"
+    />
+  </div>
+</div>
+`;
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
index 5d630882f17..d1bd3811c8c 100644
--- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
+++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
@@ -22,11 +22,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
       <div
         class="mx_VoiceBroadcastHeader_line"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         <span>
           test user
@@ -35,11 +32,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
       <div
         class="mx_VoiceBroadcastHeader_line"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         Voice broadcast
       </div>
@@ -47,11 +41,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
     <div
       class="mx_LiveBadge"
     >
-      <i
-        aria-hidden="true"
-        class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-        role="presentation"
-        style="mask-image: url(\\"image-file-stub\\");"
+      <div
+        class="mx_Icon mx_Icon_16"
       />
       Live
     </div>
@@ -81,11 +72,8 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
       <div
         class="mx_VoiceBroadcastHeader_line"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         <span>
           test user
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
index 63c4b76fbd9..7cd5acd2957 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
@@ -64,9 +64,6 @@ describe("VoiceBroadcastPlaybackBody", () => {
     describe("when rendering a buffering voice broadcast", () => {
         beforeEach(() => {
             mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Buffering);
-        });
-
-        beforeEach(() => {
             renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
         });
 
@@ -75,18 +72,15 @@ describe("VoiceBroadcastPlaybackBody", () => {
         });
     });
 
-    describe("when rendering a broadcast", () => {
+    describe(`when rendering a ${VoiceBroadcastPlaybackState.Stopped} broadcast`, () => {
         beforeEach(() => {
+            mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
             renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
         });
 
-        it("should render as expected", () => {
-            expect(renderResult.container).toMatchSnapshot();
-        });
-
         describe("and clicking the play button", () => {
             beforeEach(async () => {
-                await userEvent.click(renderResult.getByLabelText("resume voice broadcast"));
+                await userEvent.click(renderResult.getByLabelText("play voice broadcast"));
             });
 
             it("should toggle the recording", () => {
@@ -94,4 +88,18 @@ describe("VoiceBroadcastPlaybackBody", () => {
             });
         });
     });
+
+    describe.each([
+        VoiceBroadcastPlaybackState.Paused,
+        VoiceBroadcastPlaybackState.Playing,
+    ])("when rendering a %s broadcast", (playbackState: VoiceBroadcastPlaybackState) => {
+        beforeEach(() => {
+            mocked(playback.getState).mockReturnValue(playbackState);
+            renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
 });
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
index 7fb62b2bd56..495d1f109f9 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
@@ -69,7 +69,7 @@ describe("VoiceBroadcastRecordingPip", () => {
 
         describe("and clicking the stop button", () => {
             beforeEach(async () => {
-                await userEvent.click(screen.getByLabelText("stop voice broadcast"));
+                await userEvent.click(screen.getByLabelText("Stop Recording"));
                 // modal rendering has some weird sleeps
                 await sleep(100);
             });
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index e4640357005..916283e4021 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as expected 1`] = `
+exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
 <div>
   <div
     class="mx_VoiceBroadcastPlaybackBody"
@@ -25,11 +25,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           <span>
             @user:example.com
@@ -38,11 +35,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           Voice broadcast
         </div>
@@ -50,11 +44,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
       <div
         class="mx_LiveBadge"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         Live
       </div>
@@ -64,15 +55,80 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
     >
       <div
         aria-label="resume voice broadcast"
-        class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastPlaybackBody"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        data-testid="room-avatar"
+      >
+        room avatar: 
+        My room
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          Voice broadcast
+        </div>
+      </div>
+      <div
+        class="mx_LiveBadge"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+        Live
+      </div>
+    </div>
+    <div
+      class="mx_VoiceBroadcastPlaybackBody_controls"
+    >
+      <div
+        aria-label="pause voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
         role="button"
         tabindex="0"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
       </div>
     </div>
@@ -105,11 +161,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           <span>
             @user:example.com
@@ -118,11 +171,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           Voice broadcast
         </div>
@@ -130,11 +180,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
       <div
         class="mx_LiveBadge"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         Live
       </div>
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
index d9daf3b358a..ace2c58a059 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
@@ -25,11 +25,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           <span>
             @user:example.com
@@ -39,11 +36,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
       <div
         class="mx_LiveBadge"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         Live
       </div>
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
index 6b59a0dd420..43f7d049ee4 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
@@ -25,11 +25,8 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
         <div
           class="mx_VoiceBroadcastHeader_line"
         >
-          <i
-            aria-hidden="true"
-            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-            role="presentation"
-            style="mask-image: url(\\"image-file-stub\\");"
+          <div
+            class="mx_Icon mx_Icon_16"
           />
           <span>
             @user:example.com
@@ -39,11 +36,8 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
       <div
         class="mx_LiveBadge"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
         Live
       </div>
@@ -55,16 +49,13 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
       class="mx_VoiceBroadcastRecordingPip_controls"
     >
       <div
-        aria-label="stop voice broadcast"
-        class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+        aria-label="Stop Recording"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
         role="button"
         tabindex="0"
       >
-        <i
-          aria-hidden="true"
-          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
-          role="presentation"
-          style="mask-image: url(\\"image-file-stub\\");"
+        <div
+          class="mx_Icon mx_Icon_16"
         />
       </div>
     </div>

From 5e6d0f640447cd17998f46512c1d7e67170bbb5c Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 20 Oct 2022 10:53:57 +0200
Subject: [PATCH 026/113] Copy css for edition

---
 res/css/_components.pcss                      |  5 +-
 .../_EditWysiwygComposer.pcss                 | 53 +++++++++++++++++++
 ...omposer.pcss => _SendWysiwygComposer.pcss} |  2 +-
 .../{ => components}/_FormattingButtons.pcss  |  0
 .../wysiwyg_composer/EditWysiwygComposer.tsx  |  1 +
 .../wysiwyg_composer/SendWysiwygComposer.tsx  |  2 +-
 .../components/WysiwygComposer.tsx            |  5 +-
 7 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
 rename res/css/views/rooms/wysiwyg_composer/{_WysiwygComposer.pcss => _SendWysiwygComposer.pcss} (98%)
 rename res/css/views/rooms/wysiwyg_composer/{ => components}/_FormattingButtons.pcss (100%)

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index b2fcb0dd4f8..a0300e84324 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -299,8 +299,9 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
-@import "./views/rooms/wysiwyg_composer/_FormattingButtons.pcss";
-@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
+@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
+@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
new file mode 100644
index 00000000000..15bc00f5f21
--- /dev/null
+++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
@@ -0,0 +1,53 @@
+/*
+Copyright 2019 New Vector 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.
+*/
+
+.mx_EditWysiwygComposer {
+    --EditWysiwygComposer-padding-inline: 3px;
+
+    display: flex;
+    flex-direction: column;
+    max-width: 100%; /* disable overflow */
+    width: auto;
+    gap: 5px;
+    padding: 3px var(--EditWysiwygComposer-padding-inline);
+
+    .mx_WysiwygComposer_container {
+        border-radius: 4px;
+        border: solid 1px $primary-hairline-color;
+        background-color: $background;
+        max-height: 200px;
+        padding: 3px 6px;
+
+        &:focus {
+            border-color: rgba($accent, 0.5); /* Only ever used here */
+        }
+    }
+
+    .mx_EditWysiwygComposer_buttons {
+        display: flex;
+        flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
+        justify-content: flex-end;
+        gap: 5px;
+        margin-inline-start: auto;
+
+        .mx_AccessibleButton {
+            flex: 1;
+            box-sizing: border-box;
+            min-width: 100px; /* magic number to align the edge of the button with the input area */
+        }
+    }
+}
diff --git a/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
similarity index 98%
rename from res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
rename to res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
index 133b66388e7..a00f8c7e113 100644
--- a/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_WysiwygComposer {
+.mx_SendWysiwygComposer {
     flex: 1;
     display: flex;
     flex-direction: column;
diff --git a/res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
similarity index 100%
rename from res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss
rename to res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index d60d98ee9ff..53031fc6e10 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -47,6 +47,7 @@ export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiw
     const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
 
     return isReady && <WysiwygComposer
+        className="mx_EditWysiwygComposer"
         initialContent={initialContent}
         onChange={onChange}
         onSend={editMessage}
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index 24909bf2ee4..4a7cfb65a06 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -39,7 +39,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(
 
 export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
     return (
-        <WysiwygComposer {...props}>{ (ref, wysiwyg) => (
+        <WysiwygComposer className="mx_SendWysiwygComposer" {...props}>{ (ref, wysiwyg) => (
             <Content disabled={props.disabled} ref={ref} formattingFunctions={wysiwyg} />
         ) }
         </WysiwygComposer>);
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index 4a58b3693f2..7dc059ffb22 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -26,6 +26,7 @@ interface WysiwygComposerProps {
     onChange?: (content: string) => void;
     onSend: () => void;
     initialContent?: string;
+    className?: string;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         wysiwyg: FormattingFunctions,
@@ -33,7 +34,7 @@ interface WysiwygComposerProps {
 }
 
 export const WysiwygComposer = memo(function WysiwygComposer(
-    { disabled = false, onChange, onSend, initialContent, children }: WysiwygComposerProps,
+    { disabled = false, onChange, onSend, initialContent, className, children }: WysiwygComposerProps,
 ) {
     const inputEventProcessor = useInputEventProcessor(onSend);
 
@@ -47,7 +48,7 @@ export const WysiwygComposer = memo(function WysiwygComposer(
     }, [onChange, content, disabled]);
 
     return (
-        <div className="mx_WysiwygComposer">
+        <div className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
             <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
             { children?.(ref, wysiwyg) }

From 072c767b68491a42d4dcce61370b367ce1590d46 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 20 Oct 2022 11:52:50 +0200
Subject: [PATCH 027/113] Fix suppression when message is empty

---
 .../utils/createMessageContent.ts                | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index fe7f7706b4f..f0488e45995 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -89,15 +89,15 @@ export function createMessageContent(
 
         const htmlPrefix = isReply ? getHtmlReplyFallback(editedEvent) : '';
         content.formatted_body = isEditing ? `${htmlPrefix} * ${formattedBody}` : formattedBody;
+    }
 
-        if (isEditing) {
-            content['m.new_content'] = {
-                "msgtype": content.msgtype,
-                "body": body,
-                "format": "org.matrix.custom.html",
-                'formatted_body': formattedBody,
-            };
-        }
+    if (isEditing) {
+        content['m.new_content'] = {
+            "msgtype": content.msgtype,
+            "body": body,
+            "format": "org.matrix.custom.html",
+            'formatted_body': formattedBody,
+        };
     }
 
     const newRelation = isEditing ?

From d898af820be4c153ee5a09984f7c9c1e17beb759 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 20 Oct 2022 12:17:38 +0200
Subject: [PATCH 028/113] Fix displaying already stopped broadcasts in the
 timeline (#9470)

---
 .../components/VoiceBroadcastBody.tsx         |  1 +
 .../components/VoiceBroadcastBody-test.tsx    | 57 ++++++++++---------
 test/voice-broadcast/utils/test-utils.ts      | 11 ++++
 3 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/voice-broadcast/components/VoiceBroadcastBody.tsx b/src/voice-broadcast/components/VoiceBroadcastBody.tsx
index b05c6c894b9..95bc9fde065 100644
--- a/src/voice-broadcast/components/VoiceBroadcastBody.tsx
+++ b/src/voice-broadcast/components/VoiceBroadcastBody.tsx
@@ -49,6 +49,7 @@ export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
             client,
         );
         relationsHelper.on(RelationsHelperEvent.Add, onInfoEvent);
+        relationsHelper.emitCurrent();
 
         return () => {
             relationsHelper.destroy();
diff --git a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
index 7b01dd58bed..99cfb694441 100644
--- a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
+++ b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
@@ -17,11 +17,10 @@ limitations under the License.
 import React from "react";
 import { act, render, screen } from "@testing-library/react";
 import { mocked } from "jest-mock";
-import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
 import {
     VoiceBroadcastBody,
-    VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastRecordingBody,
     VoiceBroadcastRecordingsStore,
@@ -30,8 +29,8 @@ import {
     VoiceBroadcastPlayback,
     VoiceBroadcastPlaybacksStore,
 } from "../../../src/voice-broadcast";
-import { mkEvent, stubClient } from "../../test-utils";
-import { RelationsHelper } from "../../../src/events/RelationsHelper";
+import { stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
 
 jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody", () => ({
     VoiceBroadcastRecordingBody: jest.fn(),
@@ -41,27 +40,15 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastPlayb
     VoiceBroadcastPlaybackBody: jest.fn(),
 }));
 
-jest.mock("../../../src/events/RelationsHelper");
-
 describe("VoiceBroadcastBody", () => {
     const roomId = "!room:example.com";
     let client: MatrixClient;
+    let room: Room;
     let infoEvent: MatrixEvent;
+    let stoppedEvent: MatrixEvent;
     let testRecording: VoiceBroadcastRecording;
     let testPlayback: VoiceBroadcastPlayback;
 
-    const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
-        return mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            user: client.getUserId(),
-            room: roomId,
-            content: {
-                state,
-            },
-        });
-    };
-
     const renderVoiceBroadcast = () => {
         render(<VoiceBroadcastBody
             mxEvent={infoEvent}
@@ -75,7 +62,19 @@ describe("VoiceBroadcastBody", () => {
 
     beforeEach(() => {
         client = stubClient();
-        infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
+        room = new Room(roomId, client, client.getUserId());
+        mocked(client.getRoom).mockImplementation((getRoomId: string) => {
+            if (getRoomId === roomId) return room;
+        });
+
+        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        stoppedEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Stopped,
+            client.getUserId(),
+            infoEvent,
+        );
+        room.addEventsToTimeline([infoEvent], true, room.getLiveTimeline());
         testRecording = new VoiceBroadcastRecording(infoEvent, client);
         testPlayback = new VoiceBroadcastPlayback(infoEvent, client);
         mocked(VoiceBroadcastRecordingBody).mockImplementation(({ recording }) => {
@@ -107,7 +106,18 @@ describe("VoiceBroadcastBody", () => {
         );
     });
 
-    describe("when displaying a voice broadcast recording", () => {
+    describe("when there is a stopped voice broadcast", () => {
+        beforeEach(() => {
+            room.addEventsToTimeline([stoppedEvent], true, room.getLiveTimeline());
+            renderVoiceBroadcast();
+        });
+
+        it("should render a voice broadcast playback body", () => {
+            screen.getByTestId("voice-broadcast-playback-body");
+        });
+    });
+
+    describe("when there is a started voice broadcast from the current user", () => {
         beforeEach(() => {
             renderVoiceBroadcast();
         });
@@ -118,13 +128,8 @@ describe("VoiceBroadcastBody", () => {
 
         describe("and the recordings ends", () => {
             beforeEach(() => {
-                const stoppedEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped);
-                // get the RelationsHelper instanced used in VoiceBroadcastBody
-                const relationsHelper = mocked(RelationsHelper).mock.instances[5];
                 act(() => {
-                    // invoke the callback of the VoiceBroadcastBody hook to simulate an ended broadcast
-                    // @ts-ignore
-                    mocked(relationsHelper.on).mock.calls[0][1](stoppedEvent);
+                    room.addEventsToTimeline([stoppedEvent], true, room.getLiveTimeline());
                 });
             });
 
diff --git a/test/voice-broadcast/utils/test-utils.ts b/test/voice-broadcast/utils/test-utils.ts
index 2a73877474f..fc8635fc4c9 100644
--- a/test/voice-broadcast/utils/test-utils.ts
+++ b/test/voice-broadcast/utils/test-utils.ts
@@ -23,7 +23,17 @@ export const mkVoiceBroadcastInfoStateEvent = (
     roomId: string,
     state: VoiceBroadcastInfoState,
     sender: string,
+    startedInfoEvent?: MatrixEvent,
 ): MatrixEvent => {
+    const relationContent = {};
+
+    if (startedInfoEvent) {
+        relationContent["m.relates_to"] = {
+            event_id: startedInfoEvent.getId(),
+            rel_type: "m.reference",
+        };
+    }
+
     return mkEvent({
         event: true,
         room: roomId,
@@ -32,6 +42,7 @@ export const mkVoiceBroadcastInfoStateEvent = (
         skey: sender,
         content: {
             state,
+            ...relationContent,
         },
     });
 };

From be281fd735ec5b6c18e4249b69eae7124c97fa81 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Thu, 20 Oct 2022 12:48:25 +0100
Subject: [PATCH 029/113] Fix threads fallback incorrectly targets root event
 (#9229)

* Use RelationType enum instead of hardcoded value

* Fix threads replies fallback to target last reply

* Only unsubscribe from threads events if needed

* fix strict null check

* fix strict null checks

* strict null checks

* fix typing

* Unsubscribe listeners if new thread is `null`

Co-authored-by: Faye Duxovni <fayed@element.io>

* Update strict null checks

* Type HTMLElement as nullable

* Add thread fallback integration test

* lint fix

* Update snapshots

* Add test after changing thread

* Remove test comment

* update snapshot

* fix room context test utility

* Add ThreadListContextMenu test

* lint fix

* fix thread rendering

Co-authored-by: Faye Duxovni <fayed@element.io>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/FileDropTarget.tsx  |  18 +-
 src/components/structures/ThreadView.tsx      | 111 ++++++++----
 .../context_menus/ThreadListContextMenu.tsx   |  34 ++--
 src/components/views/elements/Spinner.tsx     |   1 +
 src/components/views/elements/Tooltip.tsx     |   6 +-
 .../views/rooms/BasicMessageComposer.tsx      |   1 +
 .../views/rooms/MessageComposer.tsx           |   1 +
 .../components/structures/ThreadView-test.tsx | 158 ++++++++++++++++++
 .../__snapshots__/RoomView-test.tsx.snap      |   6 +-
 .../ThreadListContextMenu-test.tsx            |  84 ++++++++++
 .../views/rooms/SendMessageComposer-test.tsx  |   4 +-
 .../wysiwyg_composer/WysiwygComposer-test.tsx |  43 +----
 .../FontScalingPanel-test.tsx.snap            |   1 +
 .../__snapshots__/LoginWithQR-test.tsx.snap   |   3 +
 .../ModuleComponents-test.tsx.snap            |   1 +
 test/test-utils/room.ts                       |  45 +++++
 test/test-utils/threads.ts                    |  38 ++++-
 .../VoiceBroadcastPlaybackBody-test.tsx.snap  |   1 +
 18 files changed, 453 insertions(+), 103 deletions(-)
 create mode 100644 test/components/structures/ThreadView-test.tsx
 create mode 100644 test/components/views/context_menus/ThreadListContextMenu-test.tsx

diff --git a/src/components/structures/FileDropTarget.tsx b/src/components/structures/FileDropTarget.tsx
index f6572a05e85..a775017c201 100644
--- a/src/components/structures/FileDropTarget.tsx
+++ b/src/components/structures/FileDropTarget.tsx
@@ -19,7 +19,7 @@ import React, { useEffect, useState } from "react";
 import { _t } from "../../languageHandler";
 
 interface IProps {
-    parent: HTMLElement;
+    parent: HTMLElement | null;
     onFileDrop(dataTransfer: DataTransfer): void;
 }
 
@@ -90,20 +90,20 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
             }));
         };
 
-        parent.addEventListener("drop", onDrop);
-        parent.addEventListener("dragover", onDragOver);
-        parent.addEventListener("dragenter", onDragEnter);
-        parent.addEventListener("dragleave", onDragLeave);
+        parent?.addEventListener("drop", onDrop);
+        parent?.addEventListener("dragover", onDragOver);
+        parent?.addEventListener("dragenter", onDragEnter);
+        parent?.addEventListener("dragleave", onDragLeave);
 
         return () => {
             // disconnect the D&D event listeners from the room view. This
             // is really just for hygiene - we're going to be
             // deleted anyway, so it doesn't matter if the event listeners
             // don't get cleaned up.
-            parent.removeEventListener("drop", onDrop);
-            parent.removeEventListener("dragover", onDragOver);
-            parent.removeEventListener("dragenter", onDragEnter);
-            parent.removeEventListener("dragleave", onDragLeave);
+            parent?.removeEventListener("drop", onDrop);
+            parent?.removeEventListener("dragover", onDragOver);
+            parent?.removeEventListener("dragenter", onDragEnter);
+            parent?.removeEventListener("dragleave", onDragLeave);
         };
     }, [parent, onFileDrop]);
 
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index a7b4ab10c8f..8350b5e734a 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { createRef, KeyboardEvent } from 'react';
 import { Thread, THREAD_RELATION_TYPE, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
-import { Room } from 'matrix-js-sdk/src/models/room';
+import { Room, RoomEvent } from 'matrix-js-sdk/src/models/room';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
@@ -70,6 +70,7 @@ interface IProps {
 
 interface IState {
     thread?: Thread;
+    lastReply?: MatrixEvent | null;
     layout: Layout;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
@@ -88,9 +89,16 @@ export default class ThreadView extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
+        const thread = this.props.room.getThread(this.props.mxEvent.getId());
+
+        this.setupThreadListeners(thread);
         this.state = {
             layout: SettingsStore.getValue("layout"),
             narrow: false,
+            thread,
+            lastReply: thread?.lastReply((ev: MatrixEvent) => {
+                return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
+            }),
         };
 
         this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[,,, value]) =>
@@ -99,6 +107,9 @@ export default class ThreadView extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
+        if (this.state.thread) {
+            this.postThreadUpdate(this.state.thread);
+        }
         this.setupThread(this.props.mxEvent);
         this.dispatcherRef = dis.register(this.onAction);
 
@@ -189,19 +200,49 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
+    private updateThreadRelation = (): void => {
+        this.setState({
+            lastReply: this.threadLastReply,
+        });
+    };
+
+    private get threadLastReply(): MatrixEvent | undefined {
+        return this.state.thread?.lastReply((ev: MatrixEvent) => {
+            return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
+        });
+    }
+
     private updateThread = (thread?: Thread) => {
-        if (thread && this.state.thread !== thread) {
+        if (this.state.thread === thread) return;
+
+        this.setupThreadListeners(thread, this.state.thread);
+        if (thread) {
             this.setState({
                 thread,
-            }, async () => {
-                thread.emit(ThreadEvent.ViewThread);
-                await thread.fetchInitialEvents();
-                this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
-                this.timelinePanel.current?.refreshTimeline();
-            });
+                lastReply: this.threadLastReply,
+            }, async () => this.postThreadUpdate(thread));
         }
     };
 
+    private async postThreadUpdate(thread: Thread): Promise<void> {
+        thread.emit(ThreadEvent.ViewThread);
+        await thread.fetchInitialEvents();
+        this.updateThreadRelation();
+        this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
+        this.timelinePanel.current?.refreshTimeline();
+    }
+
+    private setupThreadListeners(thread?: Thread | undefined, oldThread?: Thread | undefined): void {
+        if (oldThread) {
+            this.state.thread.off(ThreadEvent.NewReply, this.updateThreadRelation);
+            this.props.room.off(RoomEvent.LocalEchoUpdated, this.updateThreadRelation);
+        }
+        if (thread) {
+            thread.on(ThreadEvent.NewReply, this.updateThreadRelation);
+            this.props.room.on(RoomEvent.LocalEchoUpdated, this.updateThreadRelation);
+        }
+    }
+
     private resetJumpToEvent = (event?: string): void => {
         if (this.props.initialEvent && this.props.initialEventScrollIntoView &&
             event === this.props.initialEvent?.getId()) {
@@ -242,14 +283,14 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private nextBatch: string;
+    private nextBatch: string | undefined | null = null;
 
     private onPaginationRequest = async (
         timelineWindow: TimelineWindow | null,
         direction = Direction.Backward,
         limit = 20,
     ): Promise<boolean> => {
-        if (!Thread.hasServerSideSupport) {
+        if (!Thread.hasServerSideSupport && timelineWindow) {
             timelineWindow.extend(direction, limit);
             return true;
         }
@@ -262,40 +303,50 @@ export default class ThreadView extends React.Component<IProps, IState> {
             opts.from = this.nextBatch;
         }
 
-        const { nextBatch } = await this.state.thread.fetchEvents(opts);
-
-        this.nextBatch = nextBatch;
+        let nextBatch: string | null | undefined = null;
+        if (this.state.thread) {
+            const response = await this.state.thread.fetchEvents(opts);
+            nextBatch = response.nextBatch;
+            this.nextBatch = nextBatch;
+        }
 
         // Advances the marker on the TimelineWindow to define the correct
         // window of events to display on screen
-        timelineWindow.extend(direction, limit);
+        timelineWindow?.extend(direction, limit);
 
         return !!nextBatch;
     };
 
     private onFileDrop = (dataTransfer: DataTransfer) => {
-        ContentMessages.sharedInstance().sendContentListToRoom(
-            Array.from(dataTransfer.files),
-            this.props.mxEvent.getRoomId(),
-            this.threadRelation,
-            MatrixClientPeg.get(),
-            TimelineRenderingType.Thread,
-        );
+        const roomId = this.props.mxEvent.getRoomId();
+        if (roomId) {
+            ContentMessages.sharedInstance().sendContentListToRoom(
+                Array.from(dataTransfer.files),
+                roomId,
+                this.threadRelation,
+                MatrixClientPeg.get(),
+                TimelineRenderingType.Thread,
+            );
+        } else {
+            console.warn("Unknwon roomId for event", this.props.mxEvent);
+        }
     };
 
     private get threadRelation(): IEventRelation {
-        const lastThreadReply = this.state.thread?.lastReply((ev: MatrixEvent) => {
-            return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
-        });
-
-        return {
+        const relation = {
             "rel_type": THREAD_RELATION_TYPE.name,
             "event_id": this.state.thread?.id,
             "is_falling_back": true,
-            "m.in_reply_to": {
-                "event_id": lastThreadReply?.getId() ?? this.state.thread?.id,
-            },
         };
+
+        const fallbackEventId = this.state.lastReply?.getId() ?? this.state.thread?.id;
+        if (fallbackEventId) {
+            relation["m.in_reply_to"] = {
+                "event_id": fallbackEventId,
+            };
+        }
+
+        return relation;
     }
 
     private renderThreadViewHeader = (): JSX.Element => {
@@ -314,7 +365,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
         const threadRelation = this.threadRelation;
 
-        let timeline: JSX.Element;
+        let timeline: JSX.Element | null;
         if (this.state.thread) {
             if (this.props.initialEvent && this.props.initialEvent.getRoomId() !== this.state.thread.roomId) {
                 logger.warn("ThreadView attempting to render TimelinePanel with mismatched initialEvent",
diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx
index 73fa52ef3c4..3740327ca5c 100644
--- a/src/components/views/context_menus/ThreadListContextMenu.tsx
+++ b/src/components/views/context_menus/ThreadListContextMenu.tsx
@@ -29,9 +29,9 @@ import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
-interface IProps {
+export interface ThreadListContextMenuProps {
     mxEvent: MatrixEvent;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator?: RoomPermalinkCreator;
     onMenuToggle?: (open: boolean) => void;
 }
 
@@ -43,7 +43,7 @@ const contextMenuBelow = (elementRect: DOMRect) => {
     return { left, top, chevronFace };
 };
 
-const ThreadListContextMenu: React.FC<IProps> = ({
+const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
     mxEvent,
     permalinkCreator,
     onMenuToggle,
@@ -64,12 +64,14 @@ const ThreadListContextMenu: React.FC<IProps> = ({
         closeThreadOptions();
     }, [mxEvent, closeThreadOptions]);
 
-    const copyLinkToThread = useCallback(async (evt: ButtonEvent) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId());
-        await copyPlaintext(matrixToUrl);
-        closeThreadOptions();
+    const copyLinkToThread = useCallback(async (evt: ButtonEvent | undefined) => {
+        if (permalinkCreator) {
+            evt?.preventDefault();
+            evt?.stopPropagation();
+            const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId());
+            await copyPlaintext(matrixToUrl);
+            closeThreadOptions();
+        }
     }, [mxEvent, closeThreadOptions, permalinkCreator]);
 
     useEffect(() => {
@@ -87,6 +89,7 @@ const ThreadListContextMenu: React.FC<IProps> = ({
             title={_t("Thread options")}
             isExpanded={menuDisplayed}
             inputRef={button}
+            data-testid="threadlist-dropdown-button"
         />
         { menuDisplayed && (<IconizedContextMenu
             onFinished={closeThreadOptions}
@@ -102,11 +105,14 @@ const ThreadListContextMenu: React.FC<IProps> = ({
                      label={_t("View in room")}
                      iconClassName="mx_ThreadPanel_viewInRoom"
                  /> }
-                <IconizedContextMenuOption
-                    onClick={(e) => copyLinkToThread(e)}
-                    label={_t("Copy link to thread")}
-                    iconClassName="mx_ThreadPanel_copyLinkToThread"
-                />
+                { permalinkCreator &&
+                    <IconizedContextMenuOption
+                        data-testid="copy-thread-link"
+                        onClick={(e) => copyLinkToThread(e)}
+                        label={_t("Copy link to thread")}
+                        iconClassName="mx_ThreadPanel_copyLinkToThread"
+                    />
+                }
             </IconizedContextMenuOptionList>
         </IconizedContextMenu>) }
     </React.Fragment>;
diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx
index 410d1b69cb4..8677884c33f 100644
--- a/src/components/views/elements/Spinner.tsx
+++ b/src/components/views/elements/Spinner.tsx
@@ -40,6 +40,7 @@ export default class Spinner extends React.PureComponent<IProps> {
                     style={{ width: w, height: h }}
                     aria-label={_t("Loading...")}
                     role="progressbar"
+                    data-testid="spinner"
                 />
             </div>
         );
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index ab27f4f9d8f..12013d58fc4 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -57,7 +57,7 @@ type State = Partial<Pick<CSSProperties, "display" | "right" | "top" | "transfor
 
 export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
     private static container: HTMLElement;
-    private parent: Element;
+    private parent: Element | null = null;
 
     // XXX: This is because some components (Field) are unable to `import` the Tooltip class,
     // so we expose the Alignment options off of us statically.
@@ -87,7 +87,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
             capture: true,
         });
 
-        this.parent = ReactDOM.findDOMNode(this).parentNode as Element;
+        this.parent = ReactDOM.findDOMNode(this)?.parentNode as Element ?? null;
 
         this.updatePosition();
     }
@@ -109,7 +109,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
     // positioned, also taking into account any window zoom
     private updatePosition = (): void => {
         // When the tooltip is hidden, no need to thrash the DOM with `style` attribute updates (performance)
-        if (!this.props.visible) return;
+        if (!this.props.visible || !this.parent) return;
 
         const parentBox = this.parent.getBoundingClientRect();
         const width = UIStore.instance.windowWidth;
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 4c2201a628e..4fb72cd65aa 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -789,6 +789,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-activedescendant={activeDescendant}
                 dir="auto"
                 aria-disabled={this.props.disabled}
+                data-testid="basicmessagecomposer"
             />
         </div>);
     }
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 6c83b75b875..d1521c7b0c7 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -73,6 +73,7 @@ function SendButton(props: ISendButtonProps) {
             className="mx_MessageComposer_sendMessage"
             onClick={props.onClick}
             title={props.title ?? _t('Send message')}
+            data-testid="sendmessagebtn"
         />
     );
 }
diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx
new file mode 100644
index 00000000000..2516aad0820
--- /dev/null
+++ b/test/components/structures/ThreadView-test.tsx
@@ -0,0 +1,158 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+import { MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient, PendingEventOrdering } 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 { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
+import React, { useState } from "react";
+import { act } from "react-dom/test-utils";
+
+import ThreadView from "../../../src/components/structures/ThreadView";
+import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
+import RoomContext from "../../../src/contexts/RoomContext";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import DMRoomMap from "../../../src/utils/DMRoomMap";
+import ResizeNotifier from "../../../src/utils/ResizeNotifier";
+import { mockPlatformPeg } from "../../test-utils/platform";
+import { getRoomContext } from "../../test-utils/room";
+import { stubClient } from "../../test-utils/test-utils";
+import { mkThread } from "../../test-utils/threads";
+
+describe("ThreadView", () => {
+    const ROOM_ID = "!roomId:example.org";
+    const SENDER = "@alice:example.org";
+
+    let mockClient: MatrixClient;
+    let room: Room;
+    let rootEvent: MatrixEvent;
+
+    let changeEvent: (event: MatrixEvent) => void;
+
+    function TestThreadView() {
+        const [event, setEvent] = useState(rootEvent);
+        changeEvent = setEvent;
+
+        return <MatrixClientContext.Provider value={mockClient}>
+            <RoomContext.Provider value={getRoomContext(room, {
+                canSendMessages: true,
+            })}>
+                <ThreadView
+                    room={room}
+                    onClose={jest.fn()}
+                    mxEvent={event}
+                    resizeNotifier={new ResizeNotifier()}
+                />
+            </RoomContext.Provider>,
+        </MatrixClientContext.Provider>;
+    }
+
+    async function getComponent(): Promise<RenderResult> {
+        const renderResult = render(
+            <TestThreadView />,
+        );
+
+        await waitFor(() => {
+            expect(() => getByTestId(renderResult.container, 'spinner')).toThrow();
+        });
+
+        return renderResult;
+    }
+
+    async function sendMessage(container, text): Promise<void> {
+        const composer = getByTestId(container, "basicmessagecomposer");
+        await userEvent.click(composer);
+        await userEvent.keyboard(text);
+        const sendMessageBtn = getByTestId(container, "sendmessagebtn");
+        await userEvent.click(sendMessageBtn);
+    }
+
+    function expectedMessageBody(rootEvent, message) {
+        return {
+            "body": message,
+            "m.relates_to": {
+                "event_id": rootEvent.getId(),
+                "is_falling_back": true,
+                "m.in_reply_to": {
+                    "event_id": rootEvent.getThread().lastReply((ev: MatrixEvent) => {
+                        return ev.isRelation(THREAD_RELATION_TYPE.name);
+                    }).getId(),
+                },
+                "rel_type": RelationType.Thread,
+            },
+            "msgtype": MsgType.Text,
+        };
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        mockPlatformPeg();
+        mockClient = mocked(MatrixClientPeg.get());
+
+        room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+
+        const res = mkThread({
+            room,
+            client: mockClient,
+            authorId: mockClient.getUserId(),
+            participantUserIds: [mockClient.getUserId()],
+        });
+
+        rootEvent = res.rootEvent;
+
+        DMRoomMap.makeShared();
+        jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(SENDER);
+    });
+
+    it("sends a message with the correct fallback", async () => {
+        const { container } = await getComponent();
+
+        await sendMessage(container, "Hello world!");
+
+        expect(mockClient.sendMessage).toHaveBeenCalledWith(
+            ROOM_ID, rootEvent.getId(), expectedMessageBody(rootEvent, "Hello world!"),
+        );
+    });
+
+    it("sends a message with the correct fallback", async () => {
+        const { container } = await getComponent();
+
+        const { rootEvent: rootEvent2 } = mkThread({
+            room,
+            client: mockClient,
+            authorId: mockClient.getUserId(),
+            participantUserIds: [mockClient.getUserId()],
+        });
+
+        act(() => {
+            changeEvent(rootEvent2);
+        });
+
+        await sendMessage(container, "yolo");
+
+        expect(mockClient.sendMessage).toHaveBeenCalledWith(
+            ROOM_ID, rootEvent2.getId(), expectedMessageBody(rootEvent2, "yolo"),
+        );
+    });
+});
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index bf62c38ace2..9b5c415f116 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><div class=\\"mx_RoomView_body\\"><div class=\\"mx_LargeLoader\\"><div class=\\"mx_Spinner\\"><div class=\\"mx_Spinner_icon\\" style=\\"width: 45px; height: 45px;\\" aria-label=\\"Loading...\\" role=\\"progressbar\\"></div></div><div class=\\"mx_LargeLoader_text\\">We're creating a room with @user:example.com</div></div></div></div>"`;
+exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><div class=\\"mx_RoomView_body\\"><div class=\\"mx_LargeLoader\\"><div class=\\"mx_Spinner\\"><div class=\\"mx_Spinner_icon\\" style=\\"width: 45px; height: 45px;\\" aria-label=\\"Loading...\\" role=\\"progressbar\\" data-testid=\\"spinner\\"></div></div><div class=\\"mx_LargeLoader_text\\">We're creating a room with @user:example.com</div></div></div></div>"`;
 
 exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><main class=\\"mx_RoomView_body\\"><div class=\\"mx_RoomView_timeline\\"><div class=\\"mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel\\" tabindex=\\"-1\\"><div class=\\"mx_RoomView_messageListWrapper\\"><ol class=\\"mx_RoomView_MessageList\\" aria-live=\\"polite\\" style=\\"height: 400px;\\"><li class=\\"mx_NewRoomIntro\\"><div class=\\"mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning\\"><div class=\\"mx_EventTileBubble_title\\">End-to-end encryption isn't enabled</div><div class=\\"mx_EventTileBubble_subtitle\\"><span> 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.  </span></div></div><span aria-label=\\"Avatar\\" aria-live=\\"off\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_BaseAvatar\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 33.800000000000004px; width: 52px; line-height: 52px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 52px; height: 52px;\\" aria-hidden=\\"true\\"></span><h2>@user:example.com</h2><p><span>Send your first message to invite <b>@user:example.com</b> to chat</span></p></li></ol></div></div></div><div class=\\"mx_RoomStatusBar mx_RoomStatusBar_unsentMessages\\"><div role=\\"alert\\"><div class=\\"mx_RoomStatusBar_unsentBadge\\"><div class=\\"mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char\\"><span class=\\"mx_NotificationBadge_count\\">!</span></div></div><div><div class=\\"mx_RoomStatusBar_unsentTitle\\">Some of your messages have not been sent</div></div><div class=\\"mx_RoomStatusBar_unsentButtonBar\\"><div role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_RoomStatusBar_unsentRetry\\">Retry</div></div></div></div></main></div>"`;
 
-exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><main class=\\"mx_RoomView_body\\"><div class=\\"mx_RoomView_timeline\\"><div class=\\"mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel\\" tabindex=\\"-1\\"><div class=\\"mx_RoomView_messageListWrapper\\"><ol class=\\"mx_RoomView_MessageList\\" aria-live=\\"polite\\" style=\\"height: 400px;\\"><li class=\\"mx_NewRoomIntro\\"><div class=\\"mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning\\"><div class=\\"mx_EventTileBubble_title\\">End-to-end encryption isn't enabled</div><div class=\\"mx_EventTileBubble_subtitle\\"><span> 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.  </span></div></div><span aria-label=\\"Avatar\\" aria-live=\\"off\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_BaseAvatar\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 33.800000000000004px; width: 52px; line-height: 52px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 52px; height: 52px;\\" aria-hidden=\\"true\\"></span><h2>@user:example.com</h2><p><span>Send your first message to invite <b>@user:example.com</b> to chat</span></p></li></ol></div></div></div><div class=\\"mx_MessageComposer\\"><div class=\\"mx_MessageComposer_wrapper\\"><div class=\\"mx_MessageComposer_row\\"><div class=\\"mx_SendMessageComposer\\"><div class=\\"mx_BasicMessageComposer\\"><div class=\\"mx_MessageComposerFormatBar\\"><button type=\\"button\\" aria-label=\\"Bold\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold\\"></button><button type=\\"button\\" aria-label=\\"Italics\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic\\"></button><button type=\\"button\\" aria-label=\\"Strikethrough\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough\\"></button><button type=\\"button\\" aria-label=\\"Code block\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode\\"></button><button type=\\"button\\" aria-label=\\"Quote\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote\\"></button><button type=\\"button\\" aria-label=\\"Insert link\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink\\"></button></div><div class=\\"mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty\\" contenteditable=\\"true\\" tabindex=\\"0\\" aria-label=\\"Send a message…\\" role=\\"textbox\\" aria-multiline=\\"true\\" aria-autocomplete=\\"list\\" aria-haspopup=\\"listbox\\" dir=\\"auto\\" aria-disabled=\\"false\\" style=\\"--placeholder: 'Send a message…';\\"><div><br></div></div></div></div><div aria-label=\\"Emoji\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_emoji\\"></div><div aria-label=\\"Attachment\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload\\"></div><div aria-label=\\"More options\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu\\"></div><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\"></div></div></div></main></div>"`;
+exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><main class=\\"mx_RoomView_body\\"><div class=\\"mx_RoomView_timeline\\"><div class=\\"mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel\\" tabindex=\\"-1\\"><div class=\\"mx_RoomView_messageListWrapper\\"><ol class=\\"mx_RoomView_MessageList\\" aria-live=\\"polite\\" style=\\"height: 400px;\\"><li class=\\"mx_NewRoomIntro\\"><div class=\\"mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning\\"><div class=\\"mx_EventTileBubble_title\\">End-to-end encryption isn't enabled</div><div class=\\"mx_EventTileBubble_subtitle\\"><span> 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.  </span></div></div><span aria-label=\\"Avatar\\" aria-live=\\"off\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_BaseAvatar\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 33.800000000000004px; width: 52px; line-height: 52px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 52px; height: 52px;\\" aria-hidden=\\"true\\"></span><h2>@user:example.com</h2><p><span>Send your first message to invite <b>@user:example.com</b> to chat</span></p></li></ol></div></div></div><div class=\\"mx_MessageComposer\\"><div class=\\"mx_MessageComposer_wrapper\\"><div class=\\"mx_MessageComposer_row\\"><div class=\\"mx_SendMessageComposer\\"><div class=\\"mx_BasicMessageComposer\\"><div class=\\"mx_MessageComposerFormatBar\\"><button type=\\"button\\" aria-label=\\"Bold\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold\\"></button><button type=\\"button\\" aria-label=\\"Italics\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic\\"></button><button type=\\"button\\" aria-label=\\"Strikethrough\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough\\"></button><button type=\\"button\\" aria-label=\\"Code block\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode\\"></button><button type=\\"button\\" aria-label=\\"Quote\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote\\"></button><button type=\\"button\\" aria-label=\\"Insert link\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink\\"></button></div><div class=\\"mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty\\" contenteditable=\\"true\\" tabindex=\\"0\\" aria-label=\\"Send a message…\\" role=\\"textbox\\" aria-multiline=\\"true\\" aria-autocomplete=\\"list\\" aria-haspopup=\\"listbox\\" dir=\\"auto\\" aria-disabled=\\"false\\" data-testid=\\"basicmessagecomposer\\" style=\\"--placeholder: 'Send a message…';\\"><div><br></div></div></div></div><div aria-label=\\"Emoji\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_emoji\\"></div><div aria-label=\\"Attachment\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload\\"></div><div aria-label=\\"More options\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu\\"></div><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\"></div></div></div></main></div>"`;
 
-exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><main class=\\"mx_RoomView_body\\"><div class=\\"mx_RoomView_timeline\\"><div class=\\"mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel\\" tabindex=\\"-1\\"><div class=\\"mx_RoomView_messageListWrapper\\"><ol class=\\"mx_RoomView_MessageList\\" aria-live=\\"polite\\" style=\\"height: 400px;\\"><div class=\\"mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon\\"><div class=\\"mx_EventTileBubble_title\\">Encryption enabled</div><div class=\\"mx_EventTileBubble_subtitle\\">Messages in this chat will be end-to-end encrypted.</div></div><li class=\\"mx_NewRoomIntro\\"><span aria-label=\\"Avatar\\" aria-live=\\"off\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_BaseAvatar\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 33.800000000000004px; width: 52px; line-height: 52px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 52px; height: 52px;\\" aria-hidden=\\"true\\"></span><h2>@user:example.com</h2><p><span>Send your first message to invite <b>@user:example.com</b> to chat</span></p></li></ol></div></div></div><div class=\\"mx_MessageComposer\\"><div class=\\"mx_MessageComposer_wrapper\\"><div class=\\"mx_MessageComposer_row\\"><div class=\\"mx_SendMessageComposer\\"><div class=\\"mx_BasicMessageComposer\\"><div class=\\"mx_MessageComposerFormatBar\\"><button type=\\"button\\" aria-label=\\"Bold\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold\\"></button><button type=\\"button\\" aria-label=\\"Italics\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic\\"></button><button type=\\"button\\" aria-label=\\"Strikethrough\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough\\"></button><button type=\\"button\\" aria-label=\\"Code block\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode\\"></button><button type=\\"button\\" aria-label=\\"Quote\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote\\"></button><button type=\\"button\\" aria-label=\\"Insert link\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink\\"></button></div><div class=\\"mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty\\" contenteditable=\\"true\\" tabindex=\\"0\\" aria-label=\\"Send a message…\\" role=\\"textbox\\" aria-multiline=\\"true\\" aria-autocomplete=\\"list\\" aria-haspopup=\\"listbox\\" dir=\\"auto\\" aria-disabled=\\"false\\" style=\\"--placeholder: 'Send a message…';\\"><div><br></div></div></div></div><div aria-label=\\"Emoji\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_emoji\\"></div><div aria-label=\\"Attachment\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload\\"></div><div aria-label=\\"More options\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu\\"></div><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\"></div></div></div></main></div>"`;
+exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `"<div class=\\"mx_RoomView mx_RoomView--local\\"><header class=\\"mx_RoomHeader light-panel\\"><div class=\\"mx_RoomHeader_wrapper\\"><div class=\\"mx_RoomHeader_avatar\\"><div class=\\"mx_DecoratedRoomAvatar\\"><span class=\\"mx_BaseAvatar\\" role=\\"presentation\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 15.600000000000001px; width: 24px; line-height: 24px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 24px; height: 24px;\\" aria-hidden=\\"true\\"></span></div></div><div class=\\"mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon\\"></div><div class=\\"mx_RoomHeader_name mx_RoomHeader_name--textonly\\"><div dir=\\"auto\\" class=\\"mx_RoomHeader_nametext\\" title=\\"@user:example.com\\" role=\\"heading\\" aria-level=\\"1\\">@user:example.com</div></div><div class=\\"mx_RoomHeader_topic mx_RoomTopic\\" dir=\\"auto\\"><div tabindex=\\"0\\"><div><span dir=\\"auto\\"></span></div></div></div></div></header><main class=\\"mx_RoomView_body\\"><div class=\\"mx_RoomView_timeline\\"><div class=\\"mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel\\" tabindex=\\"-1\\"><div class=\\"mx_RoomView_messageListWrapper\\"><ol class=\\"mx_RoomView_MessageList\\" aria-live=\\"polite\\" style=\\"height: 400px;\\"><div class=\\"mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon\\"><div class=\\"mx_EventTileBubble_title\\">Encryption enabled</div><div class=\\"mx_EventTileBubble_subtitle\\">Messages in this chat will be end-to-end encrypted.</div></div><li class=\\"mx_NewRoomIntro\\"><span aria-label=\\"Avatar\\" aria-live=\\"off\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_BaseAvatar\\"><span class=\\"mx_BaseAvatar_initial\\" aria-hidden=\\"true\\" style=\\"font-size: 33.800000000000004px; width: 52px; line-height: 52px;\\">U</span><img class=\\"mx_BaseAvatar_image\\" src=\\"data:image/png;base64,00\\" alt=\\"\\" style=\\"width: 52px; height: 52px;\\" aria-hidden=\\"true\\"></span><h2>@user:example.com</h2><p><span>Send your first message to invite <b>@user:example.com</b> to chat</span></p></li></ol></div></div></div><div class=\\"mx_MessageComposer\\"><div class=\\"mx_MessageComposer_wrapper\\"><div class=\\"mx_MessageComposer_row\\"><div class=\\"mx_SendMessageComposer\\"><div class=\\"mx_BasicMessageComposer\\"><div class=\\"mx_MessageComposerFormatBar\\"><button type=\\"button\\" aria-label=\\"Bold\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold\\"></button><button type=\\"button\\" aria-label=\\"Italics\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic\\"></button><button type=\\"button\\" aria-label=\\"Strikethrough\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough\\"></button><button type=\\"button\\" aria-label=\\"Code block\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode\\"></button><button type=\\"button\\" aria-label=\\"Quote\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote\\"></button><button type=\\"button\\" aria-label=\\"Insert link\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink\\"></button></div><div class=\\"mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty\\" contenteditable=\\"true\\" tabindex=\\"0\\" aria-label=\\"Send a message…\\" role=\\"textbox\\" aria-multiline=\\"true\\" aria-autocomplete=\\"list\\" aria-haspopup=\\"listbox\\" dir=\\"auto\\" aria-disabled=\\"false\\" data-testid=\\"basicmessagecomposer\\" style=\\"--placeholder: 'Send a message…';\\"><div><br></div></div></div></div><div aria-label=\\"Emoji\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_emoji\\"></div><div aria-label=\\"Attachment\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload\\"></div><div aria-label=\\"More options\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu\\"></div><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\"></div></div></div></main></div>"`;
diff --git a/test/components/views/context_menus/ThreadListContextMenu-test.tsx b/test/components/views/context_menus/ThreadListContextMenu-test.tsx
new file mode 100644
index 00000000000..53d0fb7dd70
--- /dev/null
+++ b/test/components/views/context_menus/ThreadListContextMenu-test.tsx
@@ -0,0 +1,84 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getByTestId, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+import { MatrixClient, PendingEventOrdering } 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 React from "react";
+
+import ThreadListContextMenu, {
+    ThreadListContextMenuProps,
+} from "../../../../src/components/views/context_menus/ThreadListContextMenu";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { stubClient } from "../../../test-utils/test-utils";
+import { mkThread } from "../../../test-utils/threads";
+
+describe("ThreadListContextMenu", () => {
+    const ROOM_ID = "!123:matrix.org";
+
+    let room: Room;
+    let mockClient: MatrixClient;
+    let event: MatrixEvent;
+
+    function getComponent(props: Partial<ThreadListContextMenuProps>) {
+        return render(<ThreadListContextMenu
+            mxEvent={event}
+            {...props}
+        />);
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        mockClient = mocked(MatrixClientPeg.get());
+
+        room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+
+        const res = mkThread({
+            room,
+            client: mockClient,
+            authorId: mockClient.getUserId(),
+            participantUserIds: [mockClient.getUserId()],
+        });
+
+        event = res.rootEvent;
+    });
+
+    it("does not render the permalink", async () => {
+        const { container } = getComponent({});
+
+        const btn = getByTestId(container, "threadlist-dropdown-button");
+        await userEvent.click(btn);
+        expect(screen.queryByTestId("copy-thread-link")).toBeNull();
+    });
+
+    it("does render the permalink", async () => {
+        const { container } = getComponent({
+            permalinkCreator: new RoomPermalinkCreator(room, room.roomId, false),
+        });
+
+        const btn = getByTestId(container, "threadlist-dropdown-button");
+        await userEvent.click(btn);
+        expect(screen.queryByTestId("copy-thread-link")).not.toBeNull();
+    });
+});
diff --git a/test/components/views/rooms/SendMessageComposer-test.tsx b/test/components/views/rooms/SendMessageComposer-test.tsx
index 1d01c4a5a5c..e8234fa9519 100644
--- a/test/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/components/views/rooms/SendMessageComposer-test.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import { act } from "react-dom/test-utils";
 import { sleep } from "matrix-js-sdk/src/utils";
-import { ISendEventResponse, MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
+import { ISendEventResponse, MatrixClient, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
 // eslint-disable-next-line deprecate/import
 import { mount } from 'enzyme';
 import { mocked } from "jest-mock";
@@ -291,7 +291,7 @@ describe('<SendMessageComposer/>', () => {
 
         it('correctly sets the editorStateKey for threads', () => {
             const relation = {
-                rel_type: "m.thread",
+                rel_type: RelationType.Thread,
                 event_id: "myFakeThreadId",
             };
             const includeReplyLegacyFallback = false;
diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
index 12161ae8161..583bf1d36d0 100644
--- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
@@ -20,13 +20,12 @@ import { act, render, screen, waitFor } from "@testing-library/react";
 import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import RoomContext from "../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
-import { Layout } from "../../../../../src/settings/enums/Layout";
 import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/WysiwygComposer";
-import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";
+import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 
 // Work around missing ClipboardEvent type
@@ -74,43 +73,7 @@ describe('WysiwygComposer', () => {
         return eventId === mockEvent.getId() ? mockEvent : null;
     });
 
-    const defaultRoomContext: IRoomState = {
-        room: mockRoom,
-        roomLoading: true,
-        peekLoading: false,
-        shouldPeek: true,
-        membersLoaded: false,
-        numUnreadMessages: 0,
-        canPeek: false,
-        showApps: false,
-        isPeeking: false,
-        showRightPanel: true,
-        joining: false,
-        atEndOfLiveTimeline: true,
-        showTopUnreadMessagesBar: false,
-        statusBarVisible: false,
-        canReact: false,
-        canSendMessages: false,
-        layout: Layout.Group,
-        lowBandwidth: false,
-        alwaysShowTimestamps: false,
-        showTwelveHourTimestamps: false,
-        readMarkerInViewThresholdMs: 3000,
-        readMarkerOutOfViewThresholdMs: 30000,
-        showHiddenEvents: false,
-        showReadReceipts: true,
-        showRedactions: true,
-        showJoinLeaves: true,
-        showAvatarChanges: true,
-        showDisplaynameChanges: true,
-        matrixClientIsReady: false,
-        timelineRenderingType: TimelineRenderingType.Room,
-        liveTimeline: undefined,
-        canSelfRedact: false,
-        resizing: false,
-        narrow: false,
-        activeCall: null,
-    };
+    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
 
     let sendMessage: () => void;
     const customRender = (onChange = (_content: string) => void 0, disabled = false) => {
diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index 0859be41f77..1a017295d43 100644
--- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
@@ -31,6 +31,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
             <div
               aria-label="Loading..."
               className="mx_Spinner_icon"
+              data-testid="spinner"
               role="progressbar"
               style={
                 Object {
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
index b851a2c686b..d8d1cd99cb8 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
@@ -33,6 +33,7 @@ exports[`<LoginWithQR /> approves login and waits for new device 1`] = `
             <div
               aria-label="Loading..."
               class="mx_Spinner_icon"
+              data-testid="spinner"
               role="progressbar"
               style="width: 32px; height: 32px;"
             />
@@ -218,6 +219,7 @@ exports[`<LoginWithQR /> displays qr code after it is created 1`] = `
             <div
               aria-label="Loading..."
               class="mx_Spinner_icon"
+              data-testid="spinner"
               role="progressbar"
               style="width: 32px; height: 32px;"
             />
@@ -359,6 +361,7 @@ exports[`<LoginWithQR /> renders spinner while generating code 1`] = `
             <div
               aria-label="Loading..."
               class="mx_Spinner_icon"
+              data-testid="spinner"
               role="progressbar"
               style="width: 32px; height: 32px;"
             />
diff --git a/test/modules/__snapshots__/ModuleComponents-test.tsx.snap b/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
index b8c51afeb3a..864c775c4f6 100644
--- a/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
+++ b/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Module Components should override the factory for a ModuleSpinner 1`] =
       <div
         aria-label="Loading..."
         className="mx_Spinner_icon"
+        data-testid="spinner"
         role="progressbar"
         style={
           Object {
diff --git a/test/test-utils/room.ts b/test/test-utils/room.ts
index b9224e38710..44762500f18 100644
--- a/test/test-utils/room.ts
+++ b/test/test-utils/room.ts
@@ -22,6 +22,9 @@ import {
     Room,
 } from "matrix-js-sdk/src/matrix";
 
+import { IRoomState } from "../../src/components/structures/RoomView";
+import { TimelineRenderingType } from "../../src/contexts/RoomContext";
+import { Layout } from "../../src/settings/enums/Layout";
 import { mkEvent } from "./test-utils";
 
 export const makeMembershipEvent = (
@@ -50,3 +53,45 @@ export const makeRoomWithStateEvents = (
     mockClient.getRoom.mockReturnValue(room1);
     return room1;
 };
+
+export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoomState {
+    return {
+        room,
+        roomLoading: true,
+        peekLoading: false,
+        shouldPeek: true,
+        membersLoaded: false,
+        numUnreadMessages: 0,
+        canPeek: false,
+        showApps: false,
+        isPeeking: false,
+        showRightPanel: true,
+        joining: false,
+        atEndOfLiveTimeline: true,
+        showTopUnreadMessagesBar: false,
+        statusBarVisible: false,
+        canReact: false,
+        canSendMessages: false,
+        layout: Layout.Group,
+        lowBandwidth: false,
+        alwaysShowTimestamps: false,
+        showTwelveHourTimestamps: false,
+        readMarkerInViewThresholdMs: 3000,
+        readMarkerOutOfViewThresholdMs: 30000,
+        showHiddenEvents: false,
+        showReadReceipts: true,
+        showRedactions: true,
+        showJoinLeaves: true,
+        showAvatarChanges: true,
+        showDisplaynameChanges: true,
+        matrixClientIsReady: false,
+        timelineRenderingType: TimelineRenderingType.Room,
+        liveTimeline: undefined,
+        canSelfRedact: false,
+        resizing: false,
+        narrow: false,
+        activeCall: null,
+
+        ...override,
+    };
+}
diff --git a/test/test-utils/threads.ts b/test/test-utils/threads.ts
index 3b2c6352569..419b09b2b85 100644
--- a/test/test-utils/threads.ts
+++ b/test/test-utils/threads.ts
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import { mkMessage, MessageEventProps } from "./test-utils";
 
@@ -78,7 +79,7 @@ export const makeThreadEvents = ({
 
     rootEvent.setUnsigned({
         "m.relations": {
-            "m.thread": {
+            [RelationType.Thread]: {
                 latest_event: events[events.length - 1],
                 count: length,
                 current_user_participated: [...participantUserIds, authorId].includes(currentUserId),
@@ -88,3 +89,36 @@ export const makeThreadEvents = ({
 
     return { rootEvent, events };
 };
+
+type MakeThreadProps = {
+    room: Room;
+    client: MatrixClient;
+    authorId: string;
+    participantUserIds: string[];
+    length?: number;
+    ts?: number;
+};
+
+export const mkThread = ({
+    room,
+    client,
+    authorId,
+    participantUserIds,
+    length = 2,
+    ts = 1,
+}: MakeThreadProps): { thread: Thread, rootEvent: MatrixEvent } => {
+    const { rootEvent, events } = makeThreadEvents({
+        roomId: room.roomId,
+        authorId,
+        participantUserIds,
+        length,
+        ts,
+        currentUserId: client.getUserId(),
+    });
+
+    const thread = room.createThread(rootEvent.getId(), rootEvent, events, true);
+    // So that we do not have to mock the thread loading
+    thread.initialEventsFetched = true;
+
+    return { thread, rootEvent };
+};
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 916283e4021..4dba41de673 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -195,6 +195,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         <div
           aria-label="Loading..."
           class="mx_Spinner_icon"
+          data-testid="spinner"
           role="progressbar"
           style="width: 32px; height: 32px;"
         />

From b7996a2e4980ccadfbb9f6d0535d5388afe060c1 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 20 Oct 2022 14:44:41 +0200
Subject: [PATCH 030/113] Implement pause voice broadcast recording (#9469)

---
 .../atoms/_VoiceBroadcastControl.pcss         |  4 +
 .../_VoiceBroadcastRecordingPip.pcss          |  2 +-
 res/img/element-icons/Record.svg              |  3 +
 .../audio/VoiceBroadcastRecorder.ts           |  3 +
 .../atoms/VoiceBroadcastControl.tsx           |  5 +-
 .../molecules/VoiceBroadcastRecordingPip.tsx  | 18 +++-
 .../hooks/useVoiceBroadcastRecording.tsx      | 14 ++-
 .../models/VoiceBroadcastRecording.ts         | 33 ++++++-
 .../VoiceBroadcastRecordingPip-test.tsx       | 65 ++++++++++----
 .../VoiceBroadcastRecordingPip-test.tsx.snap  | 87 ++++++++++++++++++-
 .../models/VoiceBroadcastRecording-test.ts    | 65 ++++++++++++++
 11 files changed, 272 insertions(+), 27 deletions(-)
 create mode 100644 res/img/element-icons/Record.svg

diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
index bf07157a68b..f7cba048709 100644
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
@@ -25,3 +25,7 @@ limitations under the License.
     margin-bottom: $spacing-8;
     width: 32px;
 }
+
+.mx_VoiceBroadcastControl-recording {
+    color: $alert;
+}
diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss
index b01b1b80db0..11534a47973 100644
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss
+++ b/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss
@@ -31,5 +31,5 @@ limitations under the License.
 
 .mx_VoiceBroadcastRecordingPip_controls {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
 }
diff --git a/res/img/element-icons/Record.svg b/res/img/element-icons/Record.svg
new file mode 100644
index 00000000000..a16ce774b04
--- /dev/null
+++ b/res/img/element-icons/Record.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="5" fill="#FF5B55"/>
+</svg>
diff --git a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
index 7f084f3f4ae..f84da152baa 100644
--- a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
+++ b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
@@ -21,6 +21,7 @@ import { VoiceRecording } from "../../audio/VoiceRecording";
 import SdkConfig, { DEFAULTS } from "../../SdkConfig";
 import { concat } from "../../utils/arrays";
 import { IDestroyable } from "../../utils/IDestroyable";
+import { Singleflight } from "../../utils/Singleflight";
 
 export enum VoiceBroadcastRecorderEvent {
     ChunkRecorded = "chunk_recorded",
@@ -65,6 +66,8 @@ export class VoiceBroadcastRecorder
      */
     public async stop(): Promise<Optional<ChunkRecordedPayload>> {
         await this.voiceRecording.stop();
+        // forget about that call, so that we can stop it again later
+        Singleflight.forgetAllFor(this.voiceRecording);
         return this.extractChunk();
     }
 
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
index 238d138698b..276282d1982 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastControl.tsx
@@ -14,23 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classNames from "classnames";
 import React from "react";
 
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 
 interface Props {
+    className?: string;
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     label: string;
     onClick: () => void;
 }
 
 export const VoiceBroadcastControl: React.FC<Props> = ({
+    className = "",
     icon: Icon,
     label,
     onClick,
 }) => {
     return <AccessibleButton
-        className="mx_VoiceBroadcastControl"
+        className={classNames("mx_VoiceBroadcastControl", className)}
         onClick={onClick}
         aria-label={label}
     >
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
index 7178f659650..57e291cae0e 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
@@ -18,11 +18,15 @@ import React from "react";
 
 import {
     VoiceBroadcastControl,
+    VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
 } from "../..";
 import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
 import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
 import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
+import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
+import { _t } from "../../../languageHandler";
 
 interface VoiceBroadcastRecordingPipProps {
     recording: VoiceBroadcastRecording;
@@ -31,11 +35,22 @@ interface VoiceBroadcastRecordingPipProps {
 export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProps> = ({ recording }) => {
     const {
         live,
-        sender,
+        recordingState,
         room,
+        sender,
         stopRecording,
+        toggleRecording,
     } = useVoiceBroadcastRecording(recording);
 
+    const toggleControl = recordingState === VoiceBroadcastInfoState.Paused
+        ? <VoiceBroadcastControl
+            className="mx_VoiceBroadcastControl-recording"
+            onClick={toggleRecording}
+            icon={RecordIcon}
+            label={_t("resume voice broadcast")}
+        />
+        : <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />;
+
     return <div
         className="mx_VoiceBroadcastRecordingPip"
     >
@@ -46,6 +61,7 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         />
         <hr className="mx_VoiceBroadcastRecordingPip_divider" />
         <div className="mx_VoiceBroadcastRecordingPip_controls">
+            { toggleControl }
             <VoiceBroadcastControl
                 icon={StopIcon}
                 label="Stop Recording"
diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
index 341283c2adc..ed27119de1f 100644
--- a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
+++ b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
@@ -52,23 +52,31 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
         const confirmed = await showStopBroadcastingDialog();
 
         if (confirmed) {
-            recording.stop();
+            await recording.stop();
         }
     };
 
-    const [live, setLive] = useState(recording.getState() === VoiceBroadcastInfoState.Started);
+    const [recordingState, setRecordingState] = useState(recording.getState());
     useTypedEventEmitter(
         recording,
         VoiceBroadcastRecordingEvent.StateChanged,
         (state: VoiceBroadcastInfoState, _recording: VoiceBroadcastRecording) => {
-            setLive(state === VoiceBroadcastInfoState.Started);
+            setRecordingState(state);
         },
     );
 
+    const live = [
+        VoiceBroadcastInfoState.Started,
+        VoiceBroadcastInfoState.Paused,
+        VoiceBroadcastInfoState.Running,
+    ].includes(recordingState);
+
     return {
         live,
+        recordingState,
         room,
         sender: recording.infoEvent.sender,
         stopRecording,
+        toggleRecording: recording.toggle,
     };
 };
diff --git a/src/voice-broadcast/models/VoiceBroadcastRecording.ts b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
index f7faa0876e0..fccd9d57785 100644
--- a/src/voice-broadcast/models/VoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
@@ -76,11 +76,38 @@ export class VoiceBroadcastRecording
     }
 
     public async stop(): Promise<void> {
+        if (this.state === VoiceBroadcastInfoState.Stopped) return;
+
         this.setState(VoiceBroadcastInfoState.Stopped);
         await this.stopRecorder();
-        await this.sendStoppedStateEvent();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Stopped);
+    }
+
+    public async pause(): Promise<void> {
+        // stopped or already paused recordings cannot be paused
+        if ([VoiceBroadcastInfoState.Stopped, VoiceBroadcastInfoState.Paused].includes(this.state)) return;
+
+        this.setState(VoiceBroadcastInfoState.Paused);
+        await this.stopRecorder();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Paused);
+    }
+
+    public async resume(): Promise<void> {
+        if (this.state !== VoiceBroadcastInfoState.Paused) return;
+
+        this.setState(VoiceBroadcastInfoState.Running);
+        await this.getRecorder().start();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Running);
     }
 
+    public toggle = async (): Promise<void> => {
+        if (this.getState() === VoiceBroadcastInfoState.Paused) return this.resume();
+
+        if ([VoiceBroadcastInfoState.Started, VoiceBroadcastInfoState.Running].includes(this.getState())) {
+            return this.pause();
+        }
+    };
+
     public getState(): VoiceBroadcastInfoState {
         return this.state;
     }
@@ -162,14 +189,14 @@ export class VoiceBroadcastRecording
         await this.client.sendMessage(this.infoEvent.getRoomId(), content);
     }
 
-    private async sendStoppedStateEvent(): Promise<void> {
+    private async sendInfoStateEvent(state: VoiceBroadcastInfoState): Promise<void> {
         // TODO Michael W: add error handling for state event
         await this.client.sendStateEvent(
             this.infoEvent.getRoomId(),
             VoiceBroadcastInfoEventType,
             {
                 device_id: this.client.getDeviceId(),
-                state: VoiceBroadcastInfoState.Stopped,
+                state,
                 ["m.relates_to"]: {
                     rel_type: RelationType.Reference,
                     event_id: this.infoEvent.getId(),
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
index 495d1f109f9..8dd6c0a4958 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
@@ -22,12 +22,12 @@ import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 
 import {
-    VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingPip,
 } from "../../../../src/voice-broadcast";
-import { mkEvent, stubClient } from "../../../test-utils";
+import { stubClient } from "../../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../../utils/test-utils";
 
 // mock RoomAvatar, because it is doing too much fancy stuff
 jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
@@ -37,36 +37,49 @@ jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
     }),
 }));
 
+jest.mock("../../../../src/audio/VoiceRecording");
+
 describe("VoiceBroadcastRecordingPip", () => {
-    const userId = "@user:example.com";
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let infoEvent: MatrixEvent;
     let recording: VoiceBroadcastRecording;
+    let renderResult: RenderResult;
+
+    const renderPip = (state: VoiceBroadcastInfoState) => {
+        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, state, client.getUserId());
+        recording = new VoiceBroadcastRecording(infoEvent, client);
+
+        if (state === VoiceBroadcastInfoState.Paused) {
+            recording.pause();
+        }
+
+        renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
+    };
 
     beforeAll(() => {
         client = stubClient();
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            content: {},
-            room: roomId,
-            user: userId,
-        });
-        recording = new VoiceBroadcastRecording(infoEvent, client);
     });
 
-    describe("when rendering", () => {
-        let renderResult: RenderResult;
-
+    describe("when rendering a started recording", () => {
         beforeEach(() => {
-            renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
+            renderPip(VoiceBroadcastInfoState.Started);
         });
 
-        it("should create the expected result", () => {
+        it("should render as expected", () => {
             expect(renderResult.container).toMatchSnapshot();
         });
 
+        describe("and clicking the pause button", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("pause voice broadcast"));
+            });
+
+            it("should pause the recording", () => {
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Paused);
+            });
+        });
+
         describe("and clicking the stop button", () => {
             beforeEach(async () => {
                 await userEvent.click(screen.getByLabelText("Stop Recording"));
@@ -89,4 +102,24 @@ describe("VoiceBroadcastRecordingPip", () => {
             });
         });
     });
+
+    describe("when rendering a paused recording", () => {
+        beforeEach(() => {
+            renderPip(VoiceBroadcastInfoState.Paused);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        describe("and clicking the resume button", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("resume voice broadcast"));
+            });
+
+            it("should resume the recording", () => {
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Running);
+            });
+        });
+    });
 });
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
index 43f7d049ee4..7f212d781b3 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VoiceBroadcastRecordingPip when rendering should create the expected result 1`] = `
+exports[`VoiceBroadcastRecordingPip when rendering a paused recording should render as expected 1`] = `
 <div>
   <div
     class="mx_VoiceBroadcastRecordingPip"
@@ -29,7 +29,7 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
             class="mx_Icon mx_Icon_16"
           />
           <span>
-            @user:example.com
+            @userId:matrix.org
           </span>
         </div>
       </div>
@@ -48,6 +48,89 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
     <div
       class="mx_VoiceBroadcastRecordingPip_controls"
     >
+      <div
+        aria-label="resume voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-recording"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+      <div
+        aria-label="Stop Recording"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VoiceBroadcastRecordingPip when rendering a started recording should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastRecordingPip"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        data-testid="room-avatar"
+      >
+        room avatar: 
+        My room
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @userId:matrix.org
+          </span>
+        </div>
+      </div>
+      <div
+        class="mx_LiveBadge"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+        Live
+      </div>
+    </div>
+    <hr
+      class="mx_VoiceBroadcastRecordingPip_divider"
+    />
+    <div
+      class="mx_VoiceBroadcastRecordingPip_controls"
+    >
+      <div
+        aria-label="pause voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
       <div
         aria-label="Stop Recording"
         class="mx_AccessibleButton mx_VoiceBroadcastControl"
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index 049c03c5a45..3e1965097b1 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -92,6 +92,25 @@ describe("VoiceBroadcastRecording", () => {
         });
     };
 
+    const itShouldSendAnInfoEvent = (state: VoiceBroadcastInfoState) => {
+        it(`should send a ${state} info event`, () => {
+            expect(client.sendStateEvent).toHaveBeenCalledWith(
+                roomId,
+                VoiceBroadcastInfoEventType,
+                {
+
+                    device_id: client.getDeviceId(),
+                    state,
+                    ["m.relates_to"]: {
+                        rel_type: RelationType.Reference,
+                        event_id: infoEvent.getId(),
+                    },
+                },
+                client.getUserId(),
+            );
+        });
+    };
+
     beforeEach(() => {
         client = stubClient();
         room = mkStubRoom(roomId, "Test Room", client);
@@ -355,6 +374,26 @@ describe("VoiceBroadcastRecording", () => {
                 });
             });
 
+            describe.each([
+                ["pause", async () => voiceBroadcastRecording.pause()],
+                ["toggle", async () => voiceBroadcastRecording.toggle()],
+            ])("and calling %s", (_case: string, action: Function) => {
+                beforeEach(async () => {
+                    await action();
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Paused);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Paused);
+
+                it("should stop the recorder", () => {
+                    expect(mocked(voiceBroadcastRecorder.stop)).toHaveBeenCalled();
+                });
+
+                it("should emit a paused state changed event", () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Paused);
+                });
+            });
+
             describe("and calling destroy", () => {
                 beforeEach(() => {
                     voiceBroadcastRecording.destroy();
@@ -370,6 +409,32 @@ describe("VoiceBroadcastRecording", () => {
                 });
             });
         });
+
+        describe("and it is in paused state", () => {
+            beforeEach(async () => {
+                await voiceBroadcastRecording.pause();
+            });
+
+            describe.each([
+                ["resume", async () => voiceBroadcastRecording.resume()],
+                ["toggle", async () => voiceBroadcastRecording.toggle()],
+            ])("and calling %s", (_case: string, action: Function) => {
+                beforeEach(async () => {
+                    await action();
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Running);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Running);
+
+                it("should start the recorder", () => {
+                    expect(mocked(voiceBroadcastRecorder.start)).toHaveBeenCalled();
+                });
+
+                it("should emit a running state changed event", () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Running);
+                });
+            });
+        });
     });
 
     describe("when created for a Voice Broadcast Info with a Stopped relation", () => {

From 9ab8e330fe192404b8d13df8b1336bea9c249a63 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Thu, 20 Oct 2022 15:04:05 +0200
Subject: [PATCH 031/113] stabilise polls cypress test (#9472)

---
 cypress/e2e/polls/polls.spec.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts
index f4be3962ed4..00b944ce9d9 100644
--- a/cypress/e2e/polls/polls.spec.ts
+++ b/cypress/e2e/polls/polls.spec.ts
@@ -231,6 +231,9 @@ describe("Polls", () => {
             // Bot votes 'Maybe' in the poll
             botVoteForOption(bot, roomId, pollId, pollParams.options[2]);
 
+            // wait for bot's vote to arrive
+            cy.get('.mx_MPollBody_totalVotes').should('contain', '1 vote cast');
+
             // Open context menu
             getPollTile(pollId).rightclick();
 

From 9d405a905db1e931d8b24bf8fac9f7a712903114 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 20 Oct 2022 15:41:10 +0200
Subject: [PATCH 032/113] Set voice broadcast defaults (#9471)

---
 src/SdkConfig.ts                              |  2 +-
 .../audio/VoiceBroadcastRecorder.ts           |  5 +-
 src/voice-broadcast/index.ts                  |  1 +
 src/voice-broadcast/utils/getChunkLength.ts   | 29 +++++++++
 .../utils/startNewVoiceBroadcastRecording.tsx |  3 +-
 .../models/VoiceBroadcastRecording-test.ts    |  2 +-
 .../utils/getChunkLength-test.ts              | 60 +++++++++++++++++++
 .../startNewVoiceBroadcastRecording-test.ts   |  2 +-
 8 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 src/voice-broadcast/utils/getChunkLength.ts
 create mode 100644 test/voice-broadcast/utils/getChunkLength-test.ts

diff --git a/src/SdkConfig.ts b/src/SdkConfig.ts
index 6698f3ffb2b..1c26fd4e8be 100644
--- a/src/SdkConfig.ts
+++ b/src/SdkConfig.ts
@@ -47,7 +47,7 @@ export const DEFAULTS: IConfigOptions = {
         url: "https://element.io/get-started",
     },
     voice_broadcast: {
-        chunk_length: 60, // one minute
+        chunk_length: 120, // two minutes
     },
 };
 
diff --git a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
index f84da152baa..ff1d22a41c1 100644
--- a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
+++ b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
@@ -17,8 +17,8 @@ limitations under the License.
 import { Optional } from "matrix-events-sdk";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 
+import { getChunkLength } from "..";
 import { VoiceRecording } from "../../audio/VoiceRecording";
-import SdkConfig, { DEFAULTS } from "../../SdkConfig";
 import { concat } from "../../utils/arrays";
 import { IDestroyable } from "../../utils/IDestroyable";
 import { Singleflight } from "../../utils/Singleflight";
@@ -139,6 +139,5 @@ export class VoiceBroadcastRecorder
 }
 
 export const createVoiceBroadcastRecorder = (): VoiceBroadcastRecorder => {
-    const targetChunkLength = SdkConfig.get("voice_broadcast")?.chunk_length || DEFAULTS.voice_broadcast!.chunk_length;
-    return new VoiceBroadcastRecorder(new VoiceRecording(), targetChunkLength);
+    return new VoiceBroadcastRecorder(new VoiceRecording(), getChunkLength());
 };
diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 10329e224d4..164a59c5fba 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -34,6 +34,7 @@ export * from "./components/molecules/VoiceBroadcastRecordingPip";
 export * from "./hooks/useVoiceBroadcastRecording";
 export * from "./stores/VoiceBroadcastPlaybacksStore";
 export * from "./stores/VoiceBroadcastRecordingsStore";
+export * from "./utils/getChunkLength";
 export * from "./utils/hasRoomLiveVoiceBroadcast";
 export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
diff --git a/src/voice-broadcast/utils/getChunkLength.ts b/src/voice-broadcast/utils/getChunkLength.ts
new file mode 100644
index 00000000000..9eebfe49791
--- /dev/null
+++ b/src/voice-broadcast/utils/getChunkLength.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import SdkConfig, { DEFAULTS } from "../../SdkConfig";
+
+/**
+ * Returns the target chunk length for voice broadcasts:
+ * - Tries to get the value from the voice_broadcast.chunk_length config
+ * - If that fails from DEFAULTS
+ * - If that fails fall back to 120 (two minutes)
+ */
+export const getChunkLength = (): number => {
+    return SdkConfig.get("voice_broadcast")?.chunk_length
+        || DEFAULTS.voice_broadcast?.chunk_length
+        || 120;
+};
diff --git a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
index 1084d6d2f39..ec57ea5312a 100644
--- a/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
+++ b/src/voice-broadcast/utils/startNewVoiceBroadcastRecording.tsx
@@ -28,6 +28,7 @@ import {
     VoiceBroadcastRecordingsStore,
     VoiceBroadcastRecording,
     hasRoomLiveVoiceBroadcast,
+    getChunkLength,
 } from "..";
 
 const startBroadcast = async (
@@ -67,7 +68,7 @@ const startBroadcast = async (
         {
             device_id: client.getDeviceId(),
             state: VoiceBroadcastInfoState.Started,
-            chunk_length: 300,
+            chunk_length: getChunkLength(),
         } as VoiceBroadcastInfoEventContent,
         client.getUserId(),
     );
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index 3e1965097b1..b3076d72c0f 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -442,7 +442,7 @@ describe("VoiceBroadcastRecording", () => {
             infoEvent = mkVoiceBroadcastInfoEvent({
                 device_id: client.getDeviceId(),
                 state: VoiceBroadcastInfoState.Started,
-                chunk_length: 300,
+                chunk_length: 120,
             });
 
             const relationsContainer = {
diff --git a/test/voice-broadcast/utils/getChunkLength-test.ts b/test/voice-broadcast/utils/getChunkLength-test.ts
new file mode 100644
index 00000000000..c2d761c18b0
--- /dev/null
+++ b/test/voice-broadcast/utils/getChunkLength-test.ts
@@ -0,0 +1,60 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+
+import SdkConfig, { DEFAULTS } from "../../../src/SdkConfig";
+import { getChunkLength } from "../../../src/voice-broadcast/utils/getChunkLength";
+
+jest.mock("../../../src/SdkConfig");
+
+describe("getChunkLength", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    describe("when there is a value provided by Sdk config", () => {
+        beforeEach(() => {
+            mocked(SdkConfig.get).mockReturnValue({ chunk_length: 42 });
+        });
+
+        it("should return this value", () => {
+            expect(getChunkLength()).toBe(42);
+        });
+    });
+
+    describe("when Sdk config does not provide a value", () => {
+        beforeEach(() => {
+            DEFAULTS.voice_broadcast = {
+                chunk_length: 23,
+            };
+        });
+
+        it("should return this value", () => {
+            expect(getChunkLength()).toBe(23);
+        });
+    });
+
+    describe("if there are no defaults", () => {
+        beforeEach(() => {
+            DEFAULTS.voice_broadcast = undefined;
+        });
+
+        it("should return the fallback value", () => {
+            expect(getChunkLength()).toBe(120);
+        });
+    });
+});
diff --git a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
index 0fc0d14cb20..a0fac9ebd65 100644
--- a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
@@ -122,7 +122,7 @@ describe("startNewVoiceBroadcastRecording", () => {
                     roomId,
                     VoiceBroadcastInfoEventType,
                     {
-                        chunk_length: 300,
+                        chunk_length: 120,
                         device_id: client.getDeviceId(),
                         state: VoiceBroadcastInfoState.Started,
                     },

From 5987a6889b619852f8544c90568b57bff988a487 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 20 Oct 2022 17:31:17 +0200
Subject: [PATCH 033/113] Add styling to editing

---
 res/css/_components.pcss                      |  1 +
 .../_EditWysiwygComposer.pcss                 | 12 ++++--
 .../wysiwyg_composer/components/_Editor.pcss  | 38 +++++++++++++++++++
 .../components/_FormattingButtons.pcss        |  2 +-
 src/components/views/messages/TextualBody.tsx |  2 +-
 .../wysiwyg_composer/EditWysiwygComposer.tsx  |  6 ++-
 .../components/EditionButtons.tsx             |  2 +-
 7 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index a0300e84324..8ee602deee0 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -299,6 +299,7 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
 @import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
 @import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
index 15bc00f5f21..8c245bc90f9 100644
--- a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
@@ -22,10 +22,10 @@ limitations under the License.
     flex-direction: column;
     max-width: 100%; /* disable overflow */
     width: auto;
-    gap: 5px;
-    padding: 3px var(--EditWysiwygComposer-padding-inline);
+    gap: 8px;
+    padding: 8px var(--EditWysiwygComposer-padding-inline);
 
-    .mx_WysiwygComposer_container {
+    .mx_WysiwygComposer_content {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
         background-color: $background;
@@ -50,4 +50,10 @@ limitations under the License.
             min-width: 100px; /* magic number to align the edge of the button with the input area */
         }
     }
+
+    .mx_FormattingButtons_Button {
+        &:first-child {
+            margin-left: 0px;
+        }
+    }
 }
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
new file mode 100644
index 00000000000..88fa080e23d
--- /dev/null
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -0,0 +1,38 @@
+/*
+Copyright 2019 New Vector 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.
+*/
+
+.mx_WysiwygComposer_container {
+    position: relative;
+
+    @keyframes visualbell {
+        from { background-color: $visual-bell-bg-color; }
+        to { background-color: $background; }
+    }
+
+    .mx_WysiwygComposer_content {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        overflow-x: hidden;
+
+        /* Force caret nodes to be selected in full so that they can be */
+        /* navigated through in a single keypress */
+        .caretNode {
+            user-select: all;
+        }
+    }
+}
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 36f84ae5f1f..499b2b457be 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
@@ -45,7 +45,7 @@ limitations under the License.
             left: 6px;
             height: 16px;
             width: 16px;
-            background-color: $icon-button-color;
+            background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-position: center;
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 983cbe51e37..ab9c27f7fbe 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -565,7 +565,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         if (this.props.editState) {
             const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
             return isWysiwygComposerEnabled ?
-                <EditWysiwygComposer editorStateTransfer={this.props.editState} /> :
+                <EditWysiwygComposer editorStateTransfer={this.props.editState} className="mx_EventTile_content" /> :
                 <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
         const mxEvent = this.props.mxEvent;
diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index 53031fc6e10..c03e87c526a 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { forwardRef, RefObject } from 'react';
+import classNames from 'classnames';
 
 import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
 import { WysiwygComposer } from './components/WysiwygComposer';
@@ -38,16 +39,17 @@ interface EditWysiwygComposerProps {
     disabled?: boolean;
     onChange?: (content: string) => void;
     editorStateTransfer: EditorStateTransfer;
+    className?: string;
 }
 
-export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiwygComposerProps) {
+export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
     const initialContent = useInitialContent(editorStateTransfer);
     const isReady = !editorStateTransfer || Boolean(initialContent);
 
     const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
 
     return isReady && <WysiwygComposer
-        className="mx_EditWysiwygComposer"
+        className={classNames("mx_EditWysiwygComposer", className)}
         initialContent={initialContent}
         onChange={onChange}
         onSend={editMessage}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
index 9e94c12470a..4fdc99a79c7 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
@@ -26,7 +26,7 @@ interface EditionButtonsProps {
 }
 
 export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
-    return <div className="mx_EditMessageComposer_buttons">
+    return <div className="mx_EditWysiwygComposer_buttons">
         <AccessibleButton kind="secondary" onClick={onCancelClick}>
             { _t("Cancel") }
         </AccessibleButton>

From f46468296798de1582075baf0f7e72a6f2f8caae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 20 Oct 2022 20:39:24 +0200
Subject: [PATCH 034/113] Make Element Call screensharing work on desktop
 (#9476)

---
 src/models/Call.ts                         | 28 ++++++++--
 src/stores/widgets/ElementWidgetActions.ts |  1 +
 test/models/Call-test.ts                   | 65 ++++++++++++++++++++++
 3 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/src/models/Call.ts b/src/models/Call.ts
index fd207cf1bee..ed9e227d245 100644
--- a/src/models/Call.ts
+++ b/src/models/Call.ts
@@ -43,6 +43,8 @@ import { WidgetMessagingStore, WidgetMessagingStoreEvent } from "../stores/widge
 import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../stores/ActiveWidgetStore";
 import PlatformPeg from "../PlatformPeg";
 import { getCurrentLanguage } from "../languageHandler";
+import DesktopCapturerSourcePicker from "../components/views/elements/DesktopCapturerSourcePicker";
+import Modal from "../Modal";
 
 const TIMEOUT_MS = 16000;
 
@@ -639,10 +641,6 @@ export class ElementCall extends Call {
             baseUrl: client.baseUrl,
             lang: getCurrentLanguage().replace("_", "-"),
         });
-        // Currently, the screen-sharing support is the same is it is for Jitsi
-        if (!PlatformPeg.get().supportsJitsiScreensharing()) {
-            params.append("hideScreensharing", "");
-        }
         url.hash = `#?${params.toString()}`;
 
         // To use Element Call without touching room state, we create a virtual
@@ -818,6 +816,7 @@ export class ElementCall extends Call {
         this.messaging!.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
         this.messaging!.on(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
         this.messaging!.on(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
+        this.messaging!.on(`action:${ElementWidgetActions.Screenshare}`, this.onScreenshare);
     }
 
     protected async performDisconnection(): Promise<void> {
@@ -831,8 +830,9 @@ export class ElementCall extends Call {
     public setDisconnected() {
         this.client.off(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
         this.messaging!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
-        this.messaging!.on(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
-        this.messaging!.on(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
+        this.messaging!.off(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
+        this.messaging!.off(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
+        this.messaging!.off(`action:${ElementWidgetActions.Screenshare}`, this.onSpotlightLayout);
         super.setDisconnected();
     }
 
@@ -951,4 +951,20 @@ export class ElementCall extends Call {
         this.layout = Layout.Spotlight;
         await this.messaging!.transport.reply(ev.detail, {}); // ack
     };
+
+    private onScreenshare = async (ev: CustomEvent<IWidgetApiRequest>) => {
+        ev.preventDefault();
+
+        if (PlatformPeg.get().supportsDesktopCapturer()) {
+            const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
+            const [source] = await finished;
+
+            await this.messaging!.transport.reply(ev.detail, {
+                failed: !source,
+                desktopCapturerSourceId: source,
+            });
+        } else {
+            await this.messaging!.transport.reply(ev.detail, {});
+        }
+    };
 }
diff --git a/src/stores/widgets/ElementWidgetActions.ts b/src/stores/widgets/ElementWidgetActions.ts
index 5e9451efa03..fa60b9ea82e 100644
--- a/src/stores/widgets/ElementWidgetActions.ts
+++ b/src/stores/widgets/ElementWidgetActions.ts
@@ -29,6 +29,7 @@ export enum ElementWidgetActions {
     // Actions for switching layouts
     TileLayout = "io.element.tile_layout",
     SpotlightLayout = "io.element.spotlight_layout",
+    Screenshare = "io.element.screenshare",
 
     OpenIntegrationManager = "integration_manager_open",
 
diff --git a/test/models/Call-test.ts b/test/models/Call-test.ts
index df57472638b..3134adf111d 100644
--- a/test/models/Call-test.ts
+++ b/test/models/Call-test.ts
@@ -38,6 +38,8 @@ import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingSt
 import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../../src/stores/ActiveWidgetStore";
 import { ElementWidgetActions } from "../../src/stores/widgets/ElementWidgetActions";
 import SettingsStore from "../../src/settings/SettingsStore";
+import Modal, { IHandle } from "../../src/Modal";
+import PlatformPeg from "../../src/PlatformPeg";
 
 jest.spyOn(MediaDeviceHandler, "getDevices").mockResolvedValue({
     [MediaDeviceKindEnum.AudioInput]: [
@@ -807,6 +809,69 @@ describe("ElementCall", () => {
             call.off(CallEvent.Layout, onLayout);
         });
 
+        describe("screensharing", () => {
+            it("passes source id if we can get it", async () => {
+                const sourceId = "source_id";
+                jest.spyOn(Modal, "createDialog").mockReturnValue(
+                    { finished: new Promise((r) => r([sourceId])) } as IHandle<any[]>,
+                );
+                jest.spyOn(PlatformPeg.get(), "supportsDesktopCapturer").mockReturnValue(true);
+
+                await call.connect();
+
+                messaging.emit(
+                    `action:${ElementWidgetActions.Screenshare}`,
+                    new CustomEvent("widgetapirequest", { detail: {} }),
+                );
+
+                waitFor(() => {
+                    expect(messaging!.transport.reply).toHaveBeenCalledWith(
+                        expect.objectContaining({}),
+                        expect.objectContaining({ desktopCapturerSourceId: sourceId }),
+                    );
+                });
+            });
+
+            it("passes failed if we couldn't get a source id", async () => {
+                jest.spyOn(Modal, "createDialog").mockReturnValue(
+                    { finished: new Promise((r) => r([null])) } as IHandle<any[]>,
+                );
+                jest.spyOn(PlatformPeg.get(), "supportsDesktopCapturer").mockReturnValue(true);
+
+                await call.connect();
+
+                messaging.emit(
+                    `action:${ElementWidgetActions.Screenshare}`,
+                    new CustomEvent("widgetapirequest", { detail: {} }),
+                );
+
+                waitFor(() => {
+                    expect(messaging!.transport.reply).toHaveBeenCalledWith(
+                        expect.objectContaining({}),
+                        expect.objectContaining({ failed: true }),
+                    );
+                });
+            });
+
+            it("passes an empty object if we don't support desktop capturer", async () => {
+                jest.spyOn(PlatformPeg.get(), "supportsDesktopCapturer").mockReturnValue(false);
+
+                await call.connect();
+
+                messaging.emit(
+                    `action:${ElementWidgetActions.Screenshare}`,
+                    new CustomEvent("widgetapirequest", { detail: {} }),
+                );
+
+                waitFor(() => {
+                    expect(messaging!.transport.reply).toHaveBeenCalledWith(
+                        expect.objectContaining({}),
+                        expect.objectContaining({}),
+                    );
+                });
+            });
+        });
+
         it("ends the call immediately if we're the last participant to leave", async () => {
             await call.connect();
             const onDestroy = jest.fn();

From 493ee425b77d36bfc88837784514f11eb68974db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 20 Oct 2022 20:41:12 +0200
Subject: [PATCH 035/113] Make Element Call screensharing work on desktop
 (#9476)


From 5f59ce182e6deb7f12830e351cb3a41f0c8816d6 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Fri, 21 Oct 2022 09:30:02 +0200
Subject: [PATCH 036/113] Resume voice broadcast on load (#9475)

---
 src/components/structures/MatrixChat.tsx      |   5 +
 src/voice-broadcast/index.ts                  |   3 +
 .../models/VoiceBroadcastRecording.ts         |  18 ++-
 .../utils/VoiceBroadcastResumer.ts            |  56 ++++++++
 ...RoomLiveVoiceBroadcastFromUserAndDevice.ts |  37 +++++
 .../utils/resumeVoiceBroadcastInRoom.ts       |  34 +++++
 .../components/VoiceBroadcastBody-test.tsx    |   8 +-
 .../VoiceBroadcastRecordingBody-test.tsx      |   3 +-
 .../VoiceBroadcastRecordingPip-test.tsx       |  14 +-
 .../VoiceBroadcastRecordingsStore-test.ts     |  14 +-
 .../utils/VoiceBroadcastResumer-test.ts       | 111 +++++++++++++++
 ...iveVoiceBroadcastFromUserAndDevice-test.ts | 127 ++++++++++++++++++
 .../utils/hasRoomLiveVoiceBroadcast-test.ts   |   7 +-
 .../utils/resumeVoiceBroadcastInRoom-test.ts  | 110 +++++++++++++++
 .../startNewVoiceBroadcastRecording-test.ts   |  21 ++-
 test/voice-broadcast/utils/test-utils.ts      |   8 +-
 16 files changed, 554 insertions(+), 22 deletions(-)
 create mode 100644 src/voice-broadcast/utils/VoiceBroadcastResumer.ts
 create mode 100644 src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice.ts
 create mode 100644 src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
 create mode 100644 test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
 create mode 100644 test/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice-test.ts
 create mode 100644 test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 06a73ff605f..0e3fc304e39 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -139,6 +139,7 @@ import { ValidatedServerConfig } from '../../utils/ValidatedServerConfig';
 import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
 import { SdkContextClass, SDKContext } from '../../contexts/SDKContext';
 import { viewUserDeviceSettings } from '../../actions/handlers/viewUserDeviceSettings';
+import { VoiceBroadcastResumer } from '../../voice-broadcast';
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -234,6 +235,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private focusComposer: boolean;
     private subTitleStatus: string;
     private prevWindowWidth: number;
+    private voiceBroadcastResumer: VoiceBroadcastResumer;
 
     private readonly loggedInView: React.RefObject<LoggedInViewType>;
     private readonly dispatcherRef: string;
@@ -433,6 +435,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         window.removeEventListener("resize", this.onWindowResized);
 
         if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
+        if (this.voiceBroadcastResumer) this.voiceBroadcastResumer.destroy();
     }
 
     private onWindowResized = (): void => {
@@ -1618,6 +1621,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 });
             }
         });
+
+        this.voiceBroadcastResumer = new VoiceBroadcastResumer(cli);
     }
 
     /**
diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 164a59c5fba..39149c0a78c 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -36,9 +36,12 @@ export * from "./stores/VoiceBroadcastPlaybacksStore";
 export * from "./stores/VoiceBroadcastRecordingsStore";
 export * from "./utils/getChunkLength";
 export * from "./utils/hasRoomLiveVoiceBroadcast";
+export * from "./utils/findRoomLiveVoiceBroadcastFromUserAndDevice";
+export * from "./utils/resumeVoiceBroadcastInRoom";
 export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
 export * from "./utils/startNewVoiceBroadcastRecording";
+export * from "./utils/VoiceBroadcastResumer";
 
 export const VoiceBroadcastInfoEventType = "io.element.voice_broadcast_info";
 export const VoiceBroadcastChunkEventType = "io.element.voice_broadcast_chunk";
diff --git a/src/voice-broadcast/models/VoiceBroadcastRecording.ts b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
index fccd9d57785..28cdd723019 100644
--- a/src/voice-broadcast/models/VoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
@@ -52,9 +52,23 @@ export class VoiceBroadcastRecording
     public constructor(
         public readonly infoEvent: MatrixEvent,
         private client: MatrixClient,
+        initialState?: VoiceBroadcastInfoState,
     ) {
         super();
 
+        if (initialState) {
+            this.state = initialState;
+        } else {
+            this.setInitialStateFromInfoEvent();
+        }
+
+        // TODO Michael W: listen for state updates
+        //
+        this.infoEvent.on(MatrixEventEvent.BeforeRedaction, this.onBeforeRedaction);
+        this.dispatcherRef = dis.register(this.onAction);
+    }
+
+    private setInitialStateFromInfoEvent(): void {
         const room = this.client.getRoom(this.infoEvent.getRoomId());
         const relations = room?.getUnfilteredTimelineSet()?.relations?.getChildEventsForEvent(
             this.infoEvent.getId(),
@@ -65,10 +79,6 @@ export class VoiceBroadcastRecording
         this.state = !relatedEvents?.find((event: MatrixEvent) => {
             return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
         }) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped;
-        // TODO Michael W: add listening for updates
-
-        this.infoEvent.on(MatrixEventEvent.BeforeRedaction, this.onBeforeRedaction);
-        this.dispatcherRef = dis.register(this.onAction);
     }
 
     public async start(): Promise<void> {
diff --git a/src/voice-broadcast/utils/VoiceBroadcastResumer.ts b/src/voice-broadcast/utils/VoiceBroadcastResumer.ts
new file mode 100644
index 00000000000..c8b3407451a
--- /dev/null
+++ b/src/voice-broadcast/utils/VoiceBroadcastResumer.ts
@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ClientEvent, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+
+import { IDestroyable } from "../../utils/IDestroyable";
+import { findRoomLiveVoiceBroadcastFromUserAndDevice } from "./findRoomLiveVoiceBroadcastFromUserAndDevice";
+import { resumeVoiceBroadcastInRoom } from "./resumeVoiceBroadcastInRoom";
+
+export class VoiceBroadcastResumer implements IDestroyable {
+    private seenRooms = new Set<string>();
+    private userId: string;
+    private deviceId: string;
+
+    public constructor(
+        private client: MatrixClient,
+    ) {
+        this.client.on(ClientEvent.Room, this.onRoom);
+        this.userId = this.client.getUserId();
+        this.deviceId = this.client.getDeviceId();
+    }
+
+    private onRoom = (room: Room): void => {
+        if (this.seenRooms.has(room.roomId)) return;
+
+        this.seenRooms.add(room.roomId);
+
+        const infoEvent = findRoomLiveVoiceBroadcastFromUserAndDevice(
+            room,
+            this.userId,
+            this.deviceId,
+        );
+
+        if (infoEvent) {
+            resumeVoiceBroadcastInRoom(infoEvent, room, this.client);
+        }
+    };
+
+    destroy(): void {
+        this.client.off(ClientEvent.Room, this.onRoom);
+        this.seenRooms = new Set<string>();
+    }
+}
diff --git a/src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice.ts b/src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice.ts
new file mode 100644
index 00000000000..61d54a76603
--- /dev/null
+++ b/src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
+
+export const findRoomLiveVoiceBroadcastFromUserAndDevice = (
+    room: Room,
+    userId: string,
+    deviceId: string,
+): MatrixEvent | null => {
+    const stateEvent = room.currentState.getStateEvents(VoiceBroadcastInfoEventType, userId);
+
+    // no broadcast from that user
+    if (!stateEvent) return null;
+
+    const content = stateEvent.getContent() || {};
+
+    // stopped broadcast
+    if (content.state === VoiceBroadcastInfoState.Stopped) return null;
+
+    return content.device_id === deviceId ? stateEvent : null;
+};
diff --git a/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts b/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
new file mode 100644
index 00000000000..f365fce2267
--- /dev/null
+++ b/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoState, VoiceBroadcastRecording } from "..";
+import { VoiceBroadcastRecordingsStore } from "../stores/VoiceBroadcastRecordingsStore";
+
+export const resumeVoiceBroadcastInRoom = (latestInfoEvent: MatrixEvent, room: Room, client: MatrixClient) => {
+    // voice broadcasts are based on their started event, try to find it
+    const infoEvent = latestInfoEvent.getContent()?.state === VoiceBroadcastInfoState.Started
+        ? latestInfoEvent
+        : room.findEventById(latestInfoEvent.getRelation()?.event_id);
+
+    if (!infoEvent) {
+        return;
+    }
+
+    const recording = new VoiceBroadcastRecording(infoEvent, client, VoiceBroadcastInfoState.Paused);
+    VoiceBroadcastRecordingsStore.instance().setCurrent(recording);
+};
diff --git a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
index 99cfb694441..ff47ab4c20c 100644
--- a/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
+++ b/test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
@@ -67,11 +67,17 @@ describe("VoiceBroadcastBody", () => {
             if (getRoomId === roomId) return room;
         });
 
-        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
         stoppedEvent = mkVoiceBroadcastInfoStateEvent(
             roomId,
             VoiceBroadcastInfoState.Stopped,
             client.getUserId(),
+            client.getDeviceId(),
             infoEvent,
         );
         room.addEventsToTimeline([infoEvent], true, room.getLiveTimeline());
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
index fdcab9bca27..25e1f7c2157 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
@@ -20,6 +20,7 @@ import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import {
     VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingBody,
 } from "../../../../src/voice-broadcast";
@@ -49,7 +50,7 @@ describe("VoiceBroadcastRecordingBody", () => {
             room: roomId,
             user: userId,
         });
-        recording = new VoiceBroadcastRecording(infoEvent, client);
+        recording = new VoiceBroadcastRecording(infoEvent, client, VoiceBroadcastInfoState.Running);
     });
 
     describe("when rendering a live broadcast", () => {
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
index 8dd6c0a4958..4cd85d37ef1 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
@@ -47,13 +47,13 @@ describe("VoiceBroadcastRecordingPip", () => {
     let renderResult: RenderResult;
 
     const renderPip = (state: VoiceBroadcastInfoState) => {
-        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, state, client.getUserId());
-        recording = new VoiceBroadcastRecording(infoEvent, client);
-
-        if (state === VoiceBroadcastInfoState.Paused) {
-            recording.pause();
-        }
-
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            state,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+        recording = new VoiceBroadcastRecording(infoEvent, client, state);
         renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
     };
 
diff --git a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
index 3edb74592e0..a18f6c55db1 100644
--- a/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
+++ b/test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
@@ -45,8 +45,18 @@ describe("VoiceBroadcastRecordingsStore", () => {
                 return room;
             }
         });
-        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
-        otherInfoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+        otherInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
         recording = new VoiceBroadcastRecording(infoEvent, client);
         otherRecording = new VoiceBroadcastRecording(otherInfoEvent, client);
         recordings = new VoiceBroadcastRecordingsStore();
diff --git a/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts b/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
new file mode 100644
index 00000000000..4583590342e
--- /dev/null
+++ b/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
@@ -0,0 +1,111 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { ClientEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import {
+    findRoomLiveVoiceBroadcastFromUserAndDevice,
+    resumeVoiceBroadcastInRoom,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastResumer,
+} from "../../../src/voice-broadcast";
+import { stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "./test-utils";
+
+jest.mock("../../../src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice");
+jest.mock("../../../src/voice-broadcast/utils/resumeVoiceBroadcastInRoom");
+
+describe("VoiceBroadcastResumer", () => {
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+    let resumer: VoiceBroadcastResumer;
+    let infoEvent: MatrixEvent;
+
+    beforeEach(() => {
+        client = stubClient();
+        jest.spyOn(client, "off");
+        room = new Room(roomId, client, client.getUserId());
+        mocked(client.getRoom).mockImplementation((getRoomId: string) => {
+            if (getRoomId === roomId) return room;
+        });
+        resumer = new VoiceBroadcastResumer(client);
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("when there is no info event", () => {
+        beforeEach(() => {
+            client.emit(ClientEvent.Room, room);
+        });
+
+        it("should not resume a broadcast", () => {
+            expect(resumeVoiceBroadcastInRoom).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("when there is an info event", () => {
+        beforeEach(() => {
+            mocked(findRoomLiveVoiceBroadcastFromUserAndDevice).mockImplementation((
+                findRoom: Room,
+                userId: string,
+                deviceId: string,
+            ) => {
+                if (findRoom === room && userId === client.getUserId() && deviceId === client.getDeviceId()) {
+                    return infoEvent;
+                }
+            });
+            client.emit(ClientEvent.Room, room);
+        });
+
+        it("should resume a broadcast", () => {
+            expect(resumeVoiceBroadcastInRoom).toHaveBeenCalledWith(
+                infoEvent,
+                room,
+                client,
+            );
+        });
+
+        describe("and emitting a room event again", () => {
+            beforeEach(() => {
+                client.emit(ClientEvent.Room, room);
+            });
+
+            it("should not resume the broadcast again", () => {
+                expect(resumeVoiceBroadcastInRoom).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+
+    describe("when calling destroy", () => {
+        beforeEach(() => {
+            resumer.destroy();
+        });
+
+        it("should deregister from the client", () => {
+            expect(client.off).toHaveBeenCalledWith(ClientEvent.Room, expect.any(Function));
+        });
+    });
+});
diff --git a/test/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice-test.ts b/test/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice-test.ts
new file mode 100644
index 00000000000..0fa04963ae1
--- /dev/null
+++ b/test/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice-test.ts
@@ -0,0 +1,127 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import {
+    findRoomLiveVoiceBroadcastFromUserAndDevice,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from "../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "./test-utils";
+
+describe("findRoomLiveVoiceBroadcastFromUserAndDevice", () => {
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+
+    const itShouldReturnNull = () => {
+        it("should return null", () => {
+            expect(findRoomLiveVoiceBroadcastFromUserAndDevice(
+                room,
+                client.getUserId(),
+                client.getDeviceId(),
+            )).toBeNull();
+        });
+    };
+
+    beforeAll(() => {
+        client = stubClient();
+        room = new Room(roomId, client, client.getUserId());
+        jest.spyOn(room.currentState, "getStateEvents");
+        mocked(client.getRoom).mockImplementation((getRoomId: string) => {
+            if (getRoomId === roomId) return room;
+        });
+    });
+
+    describe("when there is no info event", () => {
+        itShouldReturnNull();
+    });
+
+    describe("when there is an info event without content", () => {
+        beforeEach(() => {
+            room.currentState.setStateEvents([
+                mkEvent({
+                    event: true,
+                    type: VoiceBroadcastInfoEventType,
+                    room: roomId,
+                    user: client.getUserId(),
+                    content: {},
+                }),
+            ]);
+        });
+
+        itShouldReturnNull();
+    });
+
+    describe("when there is a stopped info event", () => {
+        beforeEach(() => {
+            room.currentState.setStateEvents([
+                mkVoiceBroadcastInfoStateEvent(
+                    roomId,
+                    VoiceBroadcastInfoState.Stopped,
+                    client.getUserId(),
+                    client.getDeviceId(),
+                ),
+            ]);
+        });
+
+        itShouldReturnNull();
+    });
+
+    describe("when there is a started info event from another device", () => {
+        beforeEach(() => {
+            const event = mkVoiceBroadcastInfoStateEvent(
+                roomId,
+                VoiceBroadcastInfoState.Stopped,
+                client.getUserId(),
+                "JKL123",
+            );
+            room.currentState.setStateEvents([event]);
+        });
+
+        itShouldReturnNull();
+    });
+
+    describe("when there is a started info event", () => {
+        let event: MatrixEvent;
+
+        beforeEach(() => {
+            event = mkVoiceBroadcastInfoStateEvent(
+                roomId,
+                VoiceBroadcastInfoState.Started,
+                client.getUserId(),
+                client.getDeviceId(),
+            );
+            room.currentState.setStateEvents([event]);
+        });
+
+        it("should return this event", () => {
+            expect(room.currentState.getStateEvents).toHaveBeenCalledWith(
+                VoiceBroadcastInfoEventType,
+                client.getUserId(),
+            );
+
+            expect(findRoomLiveVoiceBroadcastFromUserAndDevice(
+                room,
+                client.getUserId(),
+                client.getDeviceId(),
+            )).toBe(event);
+        });
+    });
+});
diff --git a/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
index c9fbc5f09e8..40b50ec8831 100644
--- a/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
+++ b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
@@ -35,7 +35,12 @@ describe("hasRoomLiveVoiceBroadcast", () => {
         sender: string,
     ) => {
         room.currentState.setStateEvents([
-            mkVoiceBroadcastInfoStateEvent(room.roomId, state, sender),
+            mkVoiceBroadcastInfoStateEvent(
+                room.roomId,
+                state,
+                sender,
+                "ASD123",
+            ),
         ]);
     };
 
diff --git a/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts b/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts
new file mode 100644
index 00000000000..8d435fb62ec
--- /dev/null
+++ b/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts
@@ -0,0 +1,110 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import {
+    resumeVoiceBroadcastInRoom,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingsStore,
+} from "../../../src/voice-broadcast";
+import { stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
+
+const mockRecording = jest.fn();
+
+jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastRecording", () => ({
+    ...jest.requireActual("../../../src/voice-broadcast/models/VoiceBroadcastRecording") as object,
+    VoiceBroadcastRecording: jest.fn().mockImplementation(() => mockRecording),
+}));
+
+describe("resumeVoiceBroadcastInRoom", () => {
+    let client: MatrixClient;
+    const roomId = "!room:example.com";
+    let room: Room;
+    let startedInfoEvent: MatrixEvent;
+    let stoppedInfoEvent: MatrixEvent;
+
+    const itShouldStartAPausedRecording = () => {
+        it("should start a paused recording", () => {
+            expect(VoiceBroadcastRecording).toHaveBeenCalledWith(
+                startedInfoEvent,
+                client,
+                VoiceBroadcastInfoState.Paused,
+            );
+            expect(VoiceBroadcastRecordingsStore.instance().setCurrent).toHaveBeenCalledWith(mockRecording);
+        });
+    };
+
+    beforeEach(() => {
+        client = stubClient();
+        room = new Room(roomId, client, client.getUserId());
+        jest.spyOn(room, "findEventById");
+        jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "setCurrent").mockImplementation();
+
+        startedInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+
+        stoppedInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Stopped,
+            client.getUserId(),
+            client.getDeviceId(),
+            startedInfoEvent,
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("when called with a stopped info event", () => {
+        describe("and there is a related event", () => {
+            beforeEach(() => {
+                mocked(room.findEventById).mockReturnValue(startedInfoEvent);
+                resumeVoiceBroadcastInRoom(stoppedInfoEvent, room, client);
+            });
+
+            itShouldStartAPausedRecording();
+        });
+
+        describe("and there is no related event", () => {
+            beforeEach(() => {
+                mocked(room.findEventById).mockReturnValue(null);
+                resumeVoiceBroadcastInRoom(stoppedInfoEvent, room, client);
+            });
+
+            it("should not start a broadcast", () => {
+                expect(VoiceBroadcastRecording).not.toHaveBeenCalled();
+                expect(VoiceBroadcastRecordingsStore.instance().setCurrent).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe("when called with a started info event", () => {
+        beforeEach(() => {
+            resumeVoiceBroadcastInRoom(startedInfoEvent, room, client);
+        });
+
+        itShouldStartAPausedRecording();
+    });
+});
diff --git a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
index a0fac9ebd65..b19ea3c6917 100644
--- a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
@@ -70,7 +70,12 @@ describe("startNewVoiceBroadcastRecording", () => {
             getCurrent: jest.fn(),
         } as unknown as VoiceBroadcastRecordingsStore;
 
-        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Started, client.getUserId());
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
         otherEvent = mkEvent({
             event: true,
             type: EventType.RoomMember,
@@ -154,7 +159,12 @@ describe("startNewVoiceBroadcastRecording", () => {
         describe("when there already is a live broadcast of the current user in the room", () => {
             beforeEach(async () => {
                 room.currentState.setStateEvents([
-                    mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Running, client.getUserId()),
+                    mkVoiceBroadcastInfoStateEvent(
+                        roomId,
+                        VoiceBroadcastInfoState.Running,
+                        client.getUserId(),
+                        client.getDeviceId(),
+                    ),
                 ]);
 
                 result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
@@ -172,7 +182,12 @@ describe("startNewVoiceBroadcastRecording", () => {
         describe("when there already is a live broadcast of another user", () => {
             beforeEach(async () => {
                 room.currentState.setStateEvents([
-                    mkVoiceBroadcastInfoStateEvent(roomId, VoiceBroadcastInfoState.Running, otherUserId),
+                    mkVoiceBroadcastInfoStateEvent(
+                        roomId,
+                        VoiceBroadcastInfoState.Running,
+                        otherUserId,
+                        "ASD123",
+                    ),
                 ]);
 
                 result = await startNewVoiceBroadcastRecording(room, client, recordingsStore);
diff --git a/test/voice-broadcast/utils/test-utils.ts b/test/voice-broadcast/utils/test-utils.ts
index fc8635fc4c9..09a2ba0ed31 100644
--- a/test/voice-broadcast/utils/test-utils.ts
+++ b/test/voice-broadcast/utils/test-utils.ts
@@ -22,7 +22,8 @@ import { mkEvent } from "../../test-utils";
 export const mkVoiceBroadcastInfoStateEvent = (
     roomId: string,
     state: VoiceBroadcastInfoState,
-    sender: string,
+    senderId: string,
+    senderDeviceId: string,
     startedInfoEvent?: MatrixEvent,
 ): MatrixEvent => {
     const relationContent = {};
@@ -37,11 +38,12 @@ export const mkVoiceBroadcastInfoStateEvent = (
     return mkEvent({
         event: true,
         room: roomId,
-        user: sender,
+        user: senderId,
         type: VoiceBroadcastInfoEventType,
-        skey: sender,
+        skey: senderId,
         content: {
             state,
+            device_id: senderDeviceId,
             ...relationContent,
         },
     });

From c9bf7da62965bd03873963bef8a5c49cd22ee7ac Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 21 Oct 2022 10:35:54 +0200
Subject: [PATCH 037/113] Fix send message on enter

---
 src/components/views/rooms/MessageComposer.tsx                  | 2 +-
 .../views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index b94fcdddb12..60bc5ee6410 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -415,7 +415,7 @@ class MessageComposer extends React.Component<IProps, IState> {
                     <SendWysiwygComposer key="controls_input"
                         disabled={this.state.haveRecording}
                         onChange={this.onWysiwygChange}
-                        onSend={() => this.sendMessage}
+                        onSend={this.sendMessage}
                     />,
                 );
             } else {
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index 4a7cfb65a06..2a485d99757 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -23,7 +23,7 @@ import { WysiwygComposer } from './components/WysiwygComposer';
 interface SendWysiwygComposerProps {
     disabled?: boolean;
     onChange: (content: string) => void;
-    onSend(): () => void;
+    onSend: () => void;
 }
 interface ContentProps {
     disabled: boolean;

From fde9a527a748500e081c48a2d2ecf84a8f031d4a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 Oct 2022 11:44:33 +0100
Subject: [PATCH 038/113] Improve typing (#9474)

---
 .node-version                              | 2 +-
 src/components/structures/LoggedInView.tsx | 9 +++++----
 src/components/structures/MatrixChat.tsx   | 5 ++---
 src/utils/ErrorUtils.tsx                   | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/.node-version b/.node-version
index 8351c19397f..b6a7d89c68e 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-14
+16
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 872c69c01d2..f359f091f16 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -22,6 +22,7 @@ import classNames from 'classnames';
 import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
 import { IUsageLimit } from 'matrix-js-sdk/src/@types/partials';
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import { MatrixError } from 'matrix-js-sdk/src/matrix';
 
 import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../Keyboard';
 import PageTypes from '../../PageTypes';
@@ -288,8 +289,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     private onSync = (syncState: SyncState, oldSyncState?: SyncState, data?: ISyncStateData): void => {
-        const oldErrCode = this.state.syncErrorData?.error?.errcode;
-        const newErrCode = data && data.error && data.error.errcode;
+        const oldErrCode = (this.state.syncErrorData?.error as MatrixError)?.errcode;
+        const newErrCode = (data?.error as MatrixError)?.errcode;
         if (syncState === oldSyncState && oldErrCode === newErrCode) return;
 
         this.setState({
@@ -317,9 +318,9 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     private calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
-        const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
+        const error = (syncError?.error as MatrixError)?.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
         if (error) {
-            usageLimitEventContent = syncError.error.data as IUsageLimit;
+            usageLimitEventContent = (syncError?.error as MatrixError).data as IUsageLimit;
         }
 
         // usageLimitDismissed is true when the user has explicitly hidden the toast
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 0e3fc304e39..cce4b9d0abc 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -24,7 +24,6 @@ import {
     MatrixEventEvent,
 } from 'matrix-js-sdk/src/matrix';
 import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
-import { MatrixError } from 'matrix-js-sdk/src/http-api';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
@@ -203,7 +202,7 @@ interface IState {
     // When showing Modal dialogs we need to set aria-hidden on the root app element
     // and disable it when there are no dialogs
     hideToSRUsers: boolean;
-    syncError?: MatrixError;
+    syncError?: Error;
     resizeNotifier: ResizeNotifier;
     serverConfig?: ValidatedServerConfig;
     ready: boolean;
@@ -1457,7 +1456,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 if (data.error instanceof InvalidStoreError) {
                     Lifecycle.handleInvalidStoreError(data.error);
                 }
-                this.setState({ syncError: data.error || {} as MatrixError });
+                this.setState({ syncError: data.error });
             } else if (this.state.syncError) {
                 this.setState({ syncError: null });
             }
diff --git a/src/utils/ErrorUtils.tsx b/src/utils/ErrorUtils.tsx
index 6af61aca2e1..ff78fe076c4 100644
--- a/src/utils/ErrorUtils.tsx
+++ b/src/utils/ErrorUtils.tsx
@@ -57,8 +57,8 @@ export function messageForResourceLimitError(
     }
 }
 
-export function messageForSyncError(err: MatrixError): ReactNode {
-    if (err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
+export function messageForSyncError(err: Error): ReactNode {
+    if (err instanceof MatrixError && err.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
         const limitError = messageForResourceLimitError(
             err.data.limit_type,
             err.data.admin_contact,

From 8ae67aa4dd73d88f4a6ad9bc10880b50143aee3a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 21 Oct 2022 14:45:38 +0100
Subject: [PATCH 039/113] Only show mini avatar uploader in room intro when no
 avatar yet exists (#9479)

---
 src/components/views/rooms/NewRoomIntro.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx
index 56c7d7224c0..371494c79ed 100644
--- a/src/components/views/rooms/NewRoomIntro.tsx
+++ b/src/components/views/rooms/NewRoomIntro.tsx
@@ -175,14 +175,22 @@ const NewRoomIntro = () => {
         }
 
         const avatarUrl = room.currentState.getStateEvents(EventType.RoomAvatar, "")?.getContent()?.url;
-        body = <React.Fragment>
-            <MiniAvatarUploader
-                hasAvatar={!!avatarUrl}
+        let avatar = (
+            <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} viewAvatarOnClick={!!avatarUrl} />
+        );
+
+        if (!avatarUrl) {
+            avatar = <MiniAvatarUploader
+                hasAvatar={false}
                 noAvatarLabel={_t("Add a photo, so people can easily spot your room.")}
                 setAvatarUrl={url => cli.sendStateEvent(roomId, EventType.RoomAvatar, { url }, '')}
             >
-                <RoomAvatar room={room} width={AVATAR_SIZE} height={AVATAR_SIZE} viewAvatarOnClick={true} />
-            </MiniAvatarUploader>
+                { avatar }
+            </MiniAvatarUploader>;
+        }
+
+        body = <React.Fragment>
+            { avatar }
 
             <h2>{ room.name }</h2>
 

From d4f1c573adf109460fcbd86c5043d570bb690714 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Sat, 22 Oct 2022 13:07:39 +0200
Subject: [PATCH 040/113] Fix voice broadcast recording limit (#9478)

---
 src/audio/VoiceRecording.ts                   |  11 ++
 .../audio/VoiceBroadcastRecorder.ts           |   4 +-
 test/audio/VoiceRecording-test.ts             | 105 ++++++++++++++++++
 .../audio/VoiceBroadcastRecorder-test.ts      |  19 ++--
 4 files changed, 128 insertions(+), 11 deletions(-)
 create mode 100644 test/audio/VoiceRecording-test.ts

diff --git a/src/audio/VoiceRecording.ts b/src/audio/VoiceRecording.ts
index 0e18756fe56..99f878868d5 100644
--- a/src/audio/VoiceRecording.ts
+++ b/src/audio/VoiceRecording.ts
@@ -60,6 +60,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
     private recorderProcessor: ScriptProcessorNode;
     private recording = false;
     private observable: SimpleObservable<IRecordingUpdate>;
+    private targetMaxLength: number | null = TARGET_MAX_LENGTH;
     public amplitudes: number[] = []; // at each second mark, generated
     private liveWaveform = new FixedRollingArray(RECORDING_PLAYBACK_SAMPLES, 0);
     public onDataAvailable: (data: ArrayBuffer) => void;
@@ -83,6 +84,10 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         return true; // we don't ever care if the event had listeners, so just return "yes"
     }
 
+    public disableMaxLength(): void {
+        this.targetMaxLength = null;
+    }
+
     private async makeRecorder() {
         try {
             this.recorderStream = await navigator.mediaDevices.getUserMedia({
@@ -203,6 +208,12 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
         // In testing, recorder time and worker time lag by about 400ms, which is roughly the
         // time needed to encode a sample/frame.
         //
+
+        if (!this.targetMaxLength) {
+            // skip time checks if max length has been disabled
+            return;
+        }
+
         const secondsLeft = TARGET_MAX_LENGTH - this.recorderSeconds;
         if (secondsLeft < 0) { // go over to make sure we definitely capture that last frame
             // noinspection JSIgnoredPromiseFromCall - we aren't concerned with it overlapping
diff --git a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
index ff1d22a41c1..df7ae362d9d 100644
--- a/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
+++ b/src/voice-broadcast/audio/VoiceBroadcastRecorder.ts
@@ -139,5 +139,7 @@ export class VoiceBroadcastRecorder
 }
 
 export const createVoiceBroadcastRecorder = (): VoiceBroadcastRecorder => {
-    return new VoiceBroadcastRecorder(new VoiceRecording(), getChunkLength());
+    const voiceRecording = new VoiceRecording();
+    voiceRecording.disableMaxLength();
+    return new VoiceBroadcastRecorder(voiceRecording, getChunkLength());
 };
diff --git a/test/audio/VoiceRecording-test.ts b/test/audio/VoiceRecording-test.ts
new file mode 100644
index 00000000000..ac4f52eabe2
--- /dev/null
+++ b/test/audio/VoiceRecording-test.ts
@@ -0,0 +1,105 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { VoiceRecording } from "../../src/audio/VoiceRecording";
+
+/**
+ * The tests here are heavily using access to private props.
+ * While this is not so great, we can at lest test some behaviour easily this way.
+ */
+describe("VoiceRecording", () => {
+    let recording: VoiceRecording;
+    let recorderSecondsSpy: jest.SpyInstance;
+
+    const itShouldNotCallStop = () => {
+        it("should not call stop", () => {
+            expect(recording.stop).not.toHaveBeenCalled();
+        });
+    };
+
+    const simulateUpdate = (recorderSeconds: number) => {
+        beforeEach(() => {
+            recorderSecondsSpy.mockReturnValue(recorderSeconds);
+            // @ts-ignore
+            recording.processAudioUpdate(recorderSeconds);
+        });
+    };
+
+    beforeEach(() => {
+        recording = new VoiceRecording();
+        // @ts-ignore
+        recording.observable = {
+            update: jest.fn(),
+        };
+        jest.spyOn(recording, "stop").mockImplementation();
+        recorderSecondsSpy = jest.spyOn(recording, "recorderSeconds", "get");
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    describe("when recording", () => {
+        beforeEach(() => {
+            // @ts-ignore
+            recording.recording = true;
+        });
+
+        describe("and there is an audio update and time left", () => {
+            simulateUpdate(42);
+            itShouldNotCallStop();
+        });
+
+        describe("and there is an audio update and time is up", () => {
+            // one second above the limit
+            simulateUpdate(901);
+
+            it("should call stop", () => {
+                expect(recording.stop).toHaveBeenCalled();
+            });
+        });
+
+        describe("and the max length limit has been disabled", () => {
+            beforeEach(() => {
+                recording.disableMaxLength();
+            });
+
+            describe("and there is an audio update and time left", () => {
+                simulateUpdate(42);
+                itShouldNotCallStop();
+            });
+
+            describe("and there is an audio update and time is up", () => {
+                // one second above the limit
+                simulateUpdate(901);
+                itShouldNotCallStop();
+            });
+        });
+    });
+
+    describe("when not recording", () => {
+        describe("and there is an audio update and time left", () => {
+            simulateUpdate(42);
+            itShouldNotCallStop();
+        });
+
+        describe("and there is an audio update and time is up", () => {
+            // one second above the limit
+            simulateUpdate(901);
+            itShouldNotCallStop();
+        });
+    });
+});
diff --git a/test/voice-broadcast/audio/VoiceBroadcastRecorder-test.ts b/test/voice-broadcast/audio/VoiceBroadcastRecorder-test.ts
index e60d7e2d967..df7da24ce50 100644
--- a/test/voice-broadcast/audio/VoiceBroadcastRecorder-test.ts
+++ b/test/voice-broadcast/audio/VoiceBroadcastRecorder-test.ts
@@ -26,6 +26,8 @@ import {
     VoiceBroadcastRecorderEvent,
 } from "../../../src/voice-broadcast";
 
+jest.mock("../../../src/audio/VoiceRecording");
+
 describe("VoiceBroadcastRecorder", () => {
     describe("createVoiceBroadcastRecorder", () => {
         beforeEach(() => {
@@ -44,6 +46,7 @@ describe("VoiceBroadcastRecorder", () => {
 
         it("should return a VoiceBroadcastRecorder instance with targetChunkLength from config", () => {
             const voiceBroadcastRecorder = createVoiceBroadcastRecorder();
+            expect(mocked(VoiceRecording).mock.instances[0].disableMaxLength).toHaveBeenCalled();
             expect(voiceBroadcastRecorder).toBeInstanceOf(VoiceBroadcastRecorder);
             expect(voiceBroadcastRecorder.targetChunkLength).toBe(1337);
         });
@@ -72,16 +75,12 @@ describe("VoiceBroadcastRecorder", () => {
         };
 
         beforeEach(() => {
-            voiceRecording = {
-                contentType,
-                start: jest.fn().mockResolvedValue(undefined),
-                stop: jest.fn().mockResolvedValue(undefined),
-                on: jest.fn(),
-                off: jest.fn(),
-                emit: jest.fn(),
-                destroy: jest.fn(),
-                recorderSeconds: 23,
-            } as unknown as VoiceRecording;
+            voiceRecording = new VoiceRecording();
+            // @ts-ignore
+            voiceRecording.recorderSeconds = 23;
+            // @ts-ignore
+            voiceRecording.contentType = contentType;
+
             voiceBroadcastRecorder = new VoiceBroadcastRecorder(voiceRecording, chunkLength);
             jest.spyOn(voiceBroadcastRecorder, "removeAllListeners");
             onChunkRecorded = jest.fn();

From 9eb4f8d723863bc17f8d226621e7445ee67d25ec Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Mon, 24 Oct 2022 07:50:21 +0100
Subject: [PATCH 041/113] Add thread notification with server assistance
 (MSC3773) (#9400)

Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
---
 cypress/e2e/sliding-sync/sliding-sync.ts      |   2 +-
 res/css/views/rooms/_EventTile.pcss           |  18 ++-
 src/RoomNotifs.ts                             |  16 ++-
 src/Unread.ts                                 |   6 -
 src/components/structures/RoomStatusBar.tsx   |   6 +-
 .../views/right_panel/RoomHeaderButtons.tsx   |  54 +++++--
 src/components/views/rooms/EventTile.tsx      |  73 ++++++----
 .../views/rooms/NotificationBadge.tsx         |  74 +++-------
 .../StatelessNotificationBadge.tsx            |  81 +++++++++++
 .../UnreadNotificationBadge.tsx               |  36 +++++
 src/hooks/useUnreadNotifications.ts           |  93 ++++++++++++
 .../notifications/RoomNotificationState.ts    |  28 ++--
 .../RoomNotificationStateStore.ts             |  26 ++--
 test/RoomNotifs-test.ts                       |  79 ++++++++++-
 .../structures/RoomStatusBar-test.tsx         |  91 ++++++++++++
 .../right_panel/RoomHeaderButtons-test.tsx    |  97 +++++++++++++
 .../components/views/rooms/EventTile-test.tsx | 112 +++++++++++++++
 .../NotificationBadge-test.tsx                |  49 +++++++
 .../UnreadNotificationBadge-test.tsx          | 132 ++++++++++++++++++
 .../RoomNotificationState-test.ts             |  19 ++-
 .../RoomNotificationStateStore-test.ts        |  60 ++++++++
 test/test-utils/threads.ts                    |   4 +-
 22 files changed, 1014 insertions(+), 142 deletions(-)
 create mode 100644 src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
 create mode 100644 src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
 create mode 100644 src/hooks/useUnreadNotifications.ts
 create mode 100644 test/components/structures/RoomStatusBar-test.tsx
 create mode 100644 test/components/views/right_panel/RoomHeaderButtons-test.tsx
 create mode 100644 test/components/views/rooms/EventTile-test.tsx
 create mode 100644 test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
 create mode 100644 test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
 create mode 100644 test/stores/notifications/RoomNotificationStateStore-test.ts

diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts
index e0e7c974a77..ebc90443f34 100644
--- a/cypress/e2e/sliding-sync/sliding-sync.ts
+++ b/cypress/e2e/sliding-sync/sliding-sync.ts
@@ -235,7 +235,7 @@ describe("Sliding Sync", () => {
             "Test Room", "Dummy",
         ]);
 
-        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.exist");
+        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.be.visible");
     });
 
     it("should update user settings promptly", () => {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 35cd87b1364..55702c787bf 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -426,7 +426,7 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_selected .mx_EventTile_line {
-                // TODO: check if this would be necessary
+                /* TODO: check if this would be necessary; */
                 padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
             }
         }
@@ -894,15 +894,22 @@ $left-gutter: 64px;
     }
 
     /* Display notification dot */
-    &[data-notification]::before {
+    &[data-notification]::before,
+    .mx_NotificationBadge {
+        position: absolute;
         $notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */
 
-        width: $notification-dot-size;
-        height: $notification-dot-size;
+        /* !important to fix overly specific CSS selector applied on mx_NotificationBadge */
+        width: $notification-dot-size !important;
+        height: $notification-dot-size !important;
         border-radius: 50%;
         inset: $notification-inset-block-start $spacing-8 auto auto;
     }
 
+    .mx_NotificationBadge_count {
+        display: none;
+    }
+
     &[data-notification="total"]::before {
         background-color: $room-icon-unread-color;
     }
@@ -1301,7 +1308,8 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-shape="ThreadsList"][data-notification]::before {
+        &[data-shape="ThreadsList"][data-notification]::before,
+        .mx_NotificationBadge {
             /* stylelint-disable-next-line declaration-colon-space-after */
             inset-block-start:
                 calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
diff --git a/src/RoomNotifs.ts b/src/RoomNotifs.ts
index 08c15970c56..6c1e07e66b2 100644
--- a/src/RoomNotifs.ts
+++ b/src/RoomNotifs.ts
@@ -78,15 +78,23 @@ export function setRoomNotifsState(roomId: string, newState: RoomNotifState): Pr
     }
 }
 
-export function getUnreadNotificationCount(room: Room, type: NotificationCountType = null): number {
-    let notificationCount = room.getUnreadNotificationCount(type);
+export function getUnreadNotificationCount(
+    room: Room,
+    type: NotificationCountType,
+    threadId?: string,
+): number {
+    let notificationCount = (!!threadId
+        ? room.getThreadUnreadNotificationCount(threadId, type)
+        : room.getUnreadNotificationCount(type));
 
     // Check notification counts in the old room just in case there's some lost
     // there. We only go one level down to avoid performance issues, and theory
     // is that 1st generation rooms will have already been read by the 3rd generation.
     const createEvent = room.currentState.getStateEvents(EventType.RoomCreate, "");
-    if (createEvent && createEvent.getContent()['predecessor']) {
-        const oldRoomId = createEvent.getContent()['predecessor']['room_id'];
+    const predecessor = createEvent?.getContent().predecessor;
+    // Exclude threadId, as the same thread can't continue over a room upgrade
+    if (!threadId && predecessor) {
+        const oldRoomId = predecessor.room_id;
         const oldRoom = MatrixClientPeg.get().getRoom(oldRoomId);
         if (oldRoom) {
             // We only ever care if there's highlights in the old room. No point in
diff --git a/src/Unread.ts b/src/Unread.ts
index 1804ddefb71..60ef9ca19ed 100644
--- a/src/Unread.ts
+++ b/src/Unread.ts
@@ -23,7 +23,6 @@ import { MatrixClientPeg } from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
 import { haveRendererForEvent } from "./events/EventTileFactory";
 import SettingsStore from "./settings/SettingsStore";
-import { RoomNotificationStateStore } from "./stores/notifications/RoomNotificationStateStore";
 
 /**
  * Returns true if this event arriving in a room should affect the room's
@@ -77,11 +76,6 @@ export function doesRoomHaveUnreadMessages(room: Room): boolean {
         if (room.timeline.length && room.timeline[room.timeline.length - 1].getSender() === myUserId) {
             return false;
         }
-    } else {
-        const threadState = RoomNotificationStateStore.instance.getThreadsRoomState(room);
-        if (threadState.color > 0) {
-            return true;
-        }
     }
 
     // if the read receipt relates to an event is that part of a thread
diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
index d46ad12b50d..e7032525460 100644
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -34,10 +34,12 @@ const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
 const STATUS_BAR_EXPANDED_LARGE = 2;
 
-export function getUnsentMessages(room: Room): MatrixEvent[] {
+export function getUnsentMessages(room: Room, threadId?: string): MatrixEvent[] {
     if (!room) { return []; }
     return room.getPendingEvents().filter(function(ev) {
-        return ev.status === EventStatus.NOT_SENT;
+        const isNotSent = ev.status === EventStatus.NOT_SENT;
+        const belongsToTheThread = threadId === ev.threadRootId;
+        return isNotSent && (!threadId || belongsToTheThread);
     });
 }
 
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index 262b8fc38d6..c6e012fff4c 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -20,7 +20,8 @@ limitations under the License.
 
 import React from "react";
 import classNames from "classnames";
-import { Room } from "matrix-js-sdk/src/models/room";
+import { NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 
 import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
@@ -43,6 +44,7 @@ import { SummarizedNotificationState } from "../../../stores/notifications/Summa
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ButtonEvent } from "../elements/AccessibleButton";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 const ROOM_INFO_PHASES = [
     RightPanelPhases.RoomSummary,
@@ -136,32 +138,67 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
     private threadNotificationState: ThreadsRoomNotificationState;
     private globalNotificationState: SummarizedNotificationState;
 
+    private get supportsThreadNotifications(): boolean {
+        const client = MatrixClientPeg.get();
+        return client.canSupport.get(Feature.ThreadUnreadNotifications) !== ServerSupport.Unsupported;
+    }
+
     constructor(props: IProps) {
         super(props, HeaderKind.Room);
 
-        this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
+        if (!this.supportsThreadNotifications) {
+            this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
+        }
         this.globalNotificationState = RoomNotificationStateStore.instance.globalState;
     }
 
     public componentDidMount(): void {
         super.componentDidMount();
-        this.threadNotificationState.on(NotificationStateEvents.Update, this.onThreadNotification);
+        if (!this.supportsThreadNotifications) {
+            this.threadNotificationState?.on(NotificationStateEvents.Update, this.onNotificationUpdate);
+        } else {
+            this.props.room?.on(RoomEvent.UnreadNotifications, this.onNotificationUpdate);
+        }
+        this.onNotificationUpdate();
         RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
     public componentWillUnmount(): void {
         super.componentWillUnmount();
-        this.threadNotificationState.off(NotificationStateEvents.Update, this.onThreadNotification);
+        if (!this.supportsThreadNotifications) {
+            this.threadNotificationState?.off(NotificationStateEvents.Update, this.onNotificationUpdate);
+        } else {
+            this.props.room?.off(RoomEvent.UnreadNotifications, this.onNotificationUpdate);
+        }
         RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
-    private onThreadNotification = (): void => {
+    private onNotificationUpdate = (): void => {
+        let threadNotificationColor: NotificationColor;
+        if (!this.supportsThreadNotifications) {
+            threadNotificationColor = this.threadNotificationState.color;
+        } else {
+            threadNotificationColor = this.notificationColor;
+        }
+
+        // console.log
         // XXX: why don't we read from this.state.threadNotificationColor in the render methods?
         this.setState({
-            threadNotificationColor: this.threadNotificationState.color,
+            threadNotificationColor,
         });
     };
 
+    private get notificationColor(): NotificationColor {
+        switch (this.props.room.threadsAggregateNotificationType) {
+            case NotificationCountType.Highlight:
+                return NotificationColor.Red;
+            case NotificationCountType.Total:
+                return NotificationColor.Grey;
+            default:
+                return NotificationColor.None;
+        }
+    }
+
     private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
         // XXX: why don't we read from this.state.globalNotificationCount in the render methods?
         this.globalNotificationState = notificationState;
@@ -255,12 +292,13 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
                 ? <HeaderButton
                     key={RightPanelPhases.ThreadPanel}
                     name="threadsButton"
+                    data-testid="threadsButton"
                     title={_t("Threads")}
                     onClick={this.onThreadsPanelClicked}
                     isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
-                    isUnread={this.threadNotificationState.color > 0}
+                    isUnread={this.state.threadNotificationColor > 0}
                 >
-                    <UnreadIndicator color={this.threadNotificationState.color} />
+                    <UnreadIndicator color={this.state.threadNotificationColor} />
                 </HeaderButton>
                 : null,
         );
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index b13eba33e47..670a291a422 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -27,6 +27,7 @@ import { NotificationCountType, Room, RoomEvent } from 'matrix-js-sdk/src/models
 import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { UserTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
+import { Feature, ServerSupport } from 'matrix-js-sdk/src/feature';
 
 import { Icon as LinkIcon } from '../../../../res/img/element-icons/link.svg';
 import { Icon as ViewInRoomIcon } from '../../../../res/img/element-icons/view-in-room.svg';
@@ -84,6 +85,7 @@ import { useTooltip } from "../../../utils/useTooltip";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
 import { ElementCall } from "../../../models/Call";
+import { UnreadNotificationBadge } from './NotificationBadge/UnreadNotificationBadge';
 
 export type GetRelationsForEvent = (eventId: string, relationType: string, eventType: string) => Relations;
 
@@ -113,7 +115,7 @@ export interface IEventTileType extends React.Component {
     getEventTileOps?(): IEventTileOps;
 }
 
-interface IProps {
+export interface EventTileProps {
     // the MatrixEvent to show
     mxEvent: MatrixEvent;
 
@@ -248,7 +250,7 @@ interface IState {
 }
 
 // MUST be rendered within a RoomContext with a set timelineRenderingType
-export class UnwrappedEventTile extends React.Component<IProps, IState> {
+export class UnwrappedEventTile extends React.Component<EventTileProps, IState> {
     private suppressReadReceiptAnimation: boolean;
     private isListeningForReceipts: boolean;
     private tile = React.createRef<IEventTileType>();
@@ -267,7 +269,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
     static contextType = RoomContext;
     public context!: React.ContextType<typeof RoomContext>;
 
-    constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    constructor(props: EventTileProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
 
         const thread = this.thread;
@@ -394,7 +396,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         if (SettingsStore.getValue("feature_thread")) {
             this.props.mxEvent.on(ThreadEvent.Update, this.updateThread);
 
-            if (this.thread) {
+            if (this.thread && !this.supportsThreadNotifications) {
                 this.setupNotificationListener(this.thread);
             }
         }
@@ -405,33 +407,40 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         room?.on(ThreadEvent.New, this.onNewThread);
     }
 
-    private setupNotificationListener(thread: Thread): void {
-        const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(thread.room);
-
-        this.threadState = notifications.getThreadRoomState(thread);
+    private get supportsThreadNotifications(): boolean {
+        const client = MatrixClientPeg.get();
+        return client.canSupport.get(Feature.ThreadUnreadNotifications) !== ServerSupport.Unsupported;
+    }
 
-        this.threadState.on(NotificationStateEvents.Update, this.onThreadStateUpdate);
-        this.onThreadStateUpdate();
+    private setupNotificationListener(thread: Thread): void {
+        if (!this.supportsThreadNotifications) {
+            const notifications = RoomNotificationStateStore.instance.getThreadsRoomState(thread.room);
+            this.threadState = notifications.getThreadRoomState(thread);
+            this.threadState.on(NotificationStateEvents.Update, this.onThreadStateUpdate);
+            this.onThreadStateUpdate();
+        }
     }
 
     private onThreadStateUpdate = (): void => {
-        let threadNotification = null;
-        switch (this.threadState?.color) {
-            case NotificationColor.Grey:
-                threadNotification = NotificationCountType.Total;
-                break;
-            case NotificationColor.Red:
-                threadNotification = NotificationCountType.Highlight;
-                break;
-        }
+        if (!this.supportsThreadNotifications) {
+            let threadNotification = null;
+            switch (this.threadState?.color) {
+                case NotificationColor.Grey:
+                    threadNotification = NotificationCountType.Total;
+                    break;
+                case NotificationColor.Red:
+                    threadNotification = NotificationCountType.Highlight;
+                    break;
+            }
 
-        this.setState({
-            threadNotification,
-        });
+            this.setState({
+                threadNotification,
+            });
+        }
     };
 
     private updateThread = (thread: Thread) => {
-        if (thread !== this.state.thread) {
+        if (thread !== this.state.thread && !this.supportsThreadNotifications) {
             if (this.threadState) {
                 this.threadState.off(NotificationStateEvents.Update, this.onThreadStateUpdate);
             }
@@ -444,7 +453,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     // eslint-disable-next-line
-    UNSAFE_componentWillReceiveProps(nextProps: IProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: EventTileProps) {
         // re-check the sender verification as outgoing events progress through
         // the send process.
         if (nextProps.eventSendStatus !== this.props.eventSendStatus) {
@@ -452,7 +461,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         }
     }
 
-    shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
+    shouldComponentUpdate(nextProps: EventTileProps, nextState: IState): boolean {
         if (objectHasDiff(this.state, nextState)) {
             return true;
         }
@@ -481,7 +490,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         }
     }
 
-    componentDidUpdate(prevProps: IProps, prevState: IState, snapshot) {
+    componentDidUpdate() {
         // If we're not listening for receipts and expect to be, register a listener.
         if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
             MatrixClientPeg.get().on(RoomEvent.Receipt, this.onRoomReceipt);
@@ -667,7 +676,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     }
 
-    private propsEqual(objA: IProps, objB: IProps): boolean {
+    private propsEqual(objA: EventTileProps, objB: EventTileProps): boolean {
         const keysA = Object.keys(objA);
         const keysB = Object.keys(objB);
 
@@ -1348,6 +1357,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                 ]);
             }
             case TimelineRenderingType.ThreadsList: {
+                const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
                     React.createElement(this.props.as || "li", {
@@ -1361,7 +1371,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                         "data-shape": this.context.timelineRenderingType,
                         "data-self": isOwnEvent,
                         "data-has-reply": !!replyChain,
-                        "data-notification": this.state.threadNotification,
+                        "data-notification": !this.supportsThreadNotifications
+                            ? this.state.threadNotification
+                            : undefined,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                         "onClick": (ev: MouseEvent) => {
@@ -1409,6 +1421,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                             </RovingAccessibleTooltipButton>
                         </Toolbar>
                         { msgOption }
+                        <UnreadNotificationBadge
+                            room={room}
+                            threadId={this.props.mxEvent.getId()} />
                     </>)
                 );
             }
@@ -1512,7 +1527,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
 }
 
 // Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
-const SafeEventTile = forwardRef((props: IProps, ref: RefObject<UnwrappedEventTile>) => {
+const SafeEventTile = forwardRef((props: EventTileProps, ref: RefObject<UnwrappedEventTile>) => {
     return <TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout}>
         <UnwrappedEventTile ref={ref} {...props} />
     </TileErrorBoundary>;
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 51745209aae..3555582298b 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -15,16 +15,14 @@ limitations under the License.
 */
 
 import React, { MouseEvent } from "react";
-import classNames from "classnames";
 
-import { formatCount } from "../../../utils/FormattingUtils";
 import SettingsStore from "../../../settings/SettingsStore";
-import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
 import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
 import Tooltip from "../elements/Tooltip";
 import { _t } from "../../../languageHandler";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
 
 interface IProps {
     notification: NotificationState;
@@ -113,61 +111,25 @@ 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, showUnsentTooltip, forceCount, roomId, onClick, ...props } = this.props;
-
-        // Don't show a badge if we don't need to
-        if (notification.isIdle) return null;
-
-        // TODO: Update these booleans for FTUE Notifications: https://github.com/vector-im/element-web/issues/14261
-        // As of writing, that is "if red, show count always" and "optionally show counts instead of dots".
-        // See git diff for what that boolean state looks like.
-        // XXX: We ignore this.state.showCounts (the setting which controls counts vs dots).
-        const hasAnySymbol = notification.symbol || notification.count > 0;
-        let isEmptyBadge = !hasAnySymbol || !notification.hasUnreadCount;
-        if (forceCount) {
-            isEmptyBadge = false;
-            if (!notification.hasUnreadCount) return null; // Can't render a badge
-        }
-
-        let symbol = notification.symbol || formatCount(notification.count);
-        if (isEmptyBadge) symbol = "";
+        const { notification, showUnsentTooltip, onClick } = this.props;
 
-        const classes = classNames({
-            'mx_NotificationBadge': true,
-            'mx_NotificationBadge_visible': isEmptyBadge ? true : notification.hasUnreadCount,
-            'mx_NotificationBadge_highlighted': notification.hasMentions,
-            'mx_NotificationBadge_dot': isEmptyBadge,
-            'mx_NotificationBadge_2char': symbol.length > 0 && symbol.length < 3,
-            'mx_NotificationBadge_3char': symbol.length > 2,
-        });
-
-        if (onClick) {
-            let label: string;
-            let tooltip: JSX.Element;
-            if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
-                label = _t("Message didn't send. Click for info.");
-                tooltip = <Tooltip className="mx_RoleButton_tooltip" label={label} />;
-            }
-
-            return (
-                <AccessibleButton
-                    aria-label={label}
-                    {...props}
-                    className={classes}
-                    onClick={onClick}
-                    onMouseOver={this.onMouseOver}
-                    onMouseLeave={this.onMouseLeave}
-                >
-                    <span className="mx_NotificationBadge_count">{ symbol }</span>
-                    { tooltip }
-                </AccessibleButton>
-            );
+        let label: string;
+        let tooltip: JSX.Element;
+        if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
+            label = _t("Message didn't send. Click for info.");
+            tooltip = <Tooltip className="mx_RoleButton_tooltip" label={label} />;
         }
 
-        return (
-            <div className={classes}>
-                <span className="mx_NotificationBadge_count">{ symbol }</span>
-            </div>
-        );
+        return <StatelessNotificationBadge
+            label={label}
+            symbol={notification.symbol}
+            count={notification.count}
+            color={notification.color}
+            onClick={onClick}
+            onMouseOver={this.onMouseOver}
+            onMouseLeave={this.onMouseLeave}
+        >
+            { tooltip }
+        </StatelessNotificationBadge>;
     }
 }
diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
new file mode 100644
index 00000000000..868df3216fc
--- /dev/null
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -0,0 +1,81 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MouseEvent } from "react";
+import classNames from "classnames";
+
+import { formatCount } from "../../../../utils/FormattingUtils";
+import AccessibleButton from "../../elements/AccessibleButton";
+import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
+
+interface Props {
+    symbol: string | null;
+    count: number;
+    color: NotificationColor;
+    onClick?: (ev: MouseEvent) => void;
+    onMouseOver?: (ev: MouseEvent) => void;
+    onMouseLeave?: (ev: MouseEvent) => void;
+    children?: React.ReactChildren | JSX.Element;
+    label?: string;
+}
+
+export function StatelessNotificationBadge({
+    symbol,
+    count,
+    color,
+    ...props }: Props) {
+    // Don't show a badge if we don't need to
+    if (color === NotificationColor.None) return null;
+
+    const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);
+
+    const isEmptyBadge = symbol === null && count === 0;
+
+    if (symbol === null && count > 0) {
+        symbol = formatCount(count);
+    }
+
+    const classes = classNames({
+        'mx_NotificationBadge': true,
+        'mx_NotificationBadge_visible': isEmptyBadge ? true : hasUnreadCount,
+        'mx_NotificationBadge_highlighted': color === NotificationColor.Red,
+        'mx_NotificationBadge_dot': isEmptyBadge,
+        'mx_NotificationBadge_2char': symbol?.length > 0 && symbol?.length < 3,
+        'mx_NotificationBadge_3char': symbol?.length > 2,
+    });
+
+    if (props.onClick) {
+        return (
+            <AccessibleButton
+                aria-label={props.label}
+                {...props}
+                className={classes}
+                onClick={props.onClick}
+                onMouseOver={props.onMouseOver}
+                onMouseLeave={props.onMouseLeave}
+            >
+                <span className="mx_NotificationBadge_count">{ symbol }</span>
+                { props.children }
+            </AccessibleButton>
+        );
+    }
+
+    return (
+        <div className={classes}>
+            <span className="mx_NotificationBadge_count">{ symbol }</span>
+        </div>
+    );
+}
diff --git a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
new file mode 100644
index 00000000000..a623daa716e
--- /dev/null
+++ b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Room } from "matrix-js-sdk/src/models/room";
+import React from "react";
+
+import { useUnreadNotifications } from "../../../../hooks/useUnreadNotifications";
+import { StatelessNotificationBadge } from "./StatelessNotificationBadge";
+
+interface Props {
+    room: Room;
+    threadId?: string;
+}
+
+export function UnreadNotificationBadge({ room, threadId }: Props) {
+    const { symbol, count, color } = useUnreadNotifications(room, threadId);
+
+    return <StatelessNotificationBadge
+        symbol={symbol}
+        count={count}
+        color={color}
+    />;
+}
diff --git a/src/hooks/useUnreadNotifications.ts b/src/hooks/useUnreadNotifications.ts
new file mode 100644
index 00000000000..32621372749
--- /dev/null
+++ b/src/hooks/useUnreadNotifications.ts
@@ -0,0 +1,93 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { NotificationCount, NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import { useCallback, useEffect, useState } from "react";
+
+import { getUnsentMessages } from "../components/structures/RoomStatusBar";
+import { getRoomNotifsState, getUnreadNotificationCount, RoomNotifState } from "../RoomNotifs";
+import { NotificationColor } from "../stores/notifications/NotificationColor";
+import { doesRoomHaveUnreadMessages } from "../Unread";
+import { EffectiveMembership, getEffectiveMembership } from "../utils/membership";
+import { useEventEmitter } from "./useEventEmitter";
+
+export const useUnreadNotifications = (room: Room, threadId?: string): {
+    symbol: string | null;
+    count: number;
+    color: NotificationColor;
+} => {
+    const [symbol, setSymbol] = useState<string | null>(null);
+    const [count, setCount] = useState<number>(0);
+    const [color, setColor] = useState<NotificationColor>(0);
+
+    useEventEmitter(room, RoomEvent.UnreadNotifications,
+        (unreadNotifications: NotificationCount, evtThreadId?: string) => {
+            // Discarding all events not related to the thread if one has been setup
+            if (threadId && threadId !== evtThreadId) return;
+            updateNotificationState();
+        },
+    );
+    useEventEmitter(room, RoomEvent.Receipt, () => updateNotificationState());
+    useEventEmitter(room, RoomEvent.Timeline, () => updateNotificationState());
+    useEventEmitter(room, RoomEvent.Redaction, () => updateNotificationState());
+    useEventEmitter(room, RoomEvent.LocalEchoUpdated, () => updateNotificationState());
+    useEventEmitter(room, RoomEvent.MyMembership, () => updateNotificationState());
+
+    const updateNotificationState = useCallback(() => {
+        if (getUnsentMessages(room, threadId).length > 0) {
+            setSymbol("!");
+            setCount(1);
+            setColor(NotificationColor.Unsent);
+        } else if (getEffectiveMembership(room.getMyMembership()) === EffectiveMembership.Invite) {
+            setSymbol("!");
+            setCount(1);
+            setColor(NotificationColor.Red);
+        } else if (getRoomNotifsState(room.roomId) === RoomNotifState.Mute) {
+            setSymbol(null);
+            setCount(0);
+            setColor(NotificationColor.None);
+        } else {
+            const redNotifs = getUnreadNotificationCount(room, NotificationCountType.Highlight, threadId);
+            const greyNotifs = getUnreadNotificationCount(room, NotificationCountType.Total, threadId);
+
+            const trueCount = greyNotifs || redNotifs;
+            setCount(trueCount);
+            setSymbol(null);
+            if (redNotifs > 0) {
+                setColor(NotificationColor.Red);
+            } else if (greyNotifs > 0) {
+                setColor(NotificationColor.Grey);
+            } else if (!threadId) {
+                // TODO: No support for `Bold` on threads at the moment
+
+                // We don't have any notified messages, but we might have unread messages. Let's
+                // find out.
+                const hasUnread = doesRoomHaveUnreadMessages(room);
+                setColor(hasUnread ? NotificationColor.Bold : NotificationColor.None);
+            }
+        }
+    }, [room, threadId]);
+
+    useEffect(() => {
+        updateNotificationState();
+    }, [updateNotificationState]);
+
+    return {
+        symbol,
+        count,
+        color,
+    };
+};
diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts
index 9c64b7ec424..49e76bedf81 100644
--- a/src/stores/notifications/RoomNotificationState.ts
+++ b/src/stores/notifications/RoomNotificationState.ts
@@ -17,6 +17,7 @@ limitations under the License.
 import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
 import { NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { ClientEvent } from "matrix-js-sdk/src/client";
+import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 
 import { NotificationColor } from "./NotificationColor";
 import { IDestroyable } from "../../utils/IDestroyable";
@@ -32,15 +33,16 @@ import { ThreadsRoomNotificationState } from "./ThreadsRoomNotificationState";
 export class RoomNotificationState extends NotificationState implements IDestroyable {
     constructor(public readonly room: Room, private readonly threadsState?: ThreadsRoomNotificationState) {
         super();
-        this.room.on(RoomEvent.Receipt, this.handleReadReceipt); // for unread indicators
-        this.room.on(RoomEvent.MyMembership, this.handleMembershipUpdate); // for redness on invites
-        this.room.on(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated); // for redness on unsent messages
+        const cli = this.room.client;
+        this.room.on(RoomEvent.Receipt, this.handleReadReceipt);
+        this.room.on(RoomEvent.MyMembership, this.handleMembershipUpdate);
+        this.room.on(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
         this.room.on(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate); // for server-sent counts
-        if (threadsState) {
-            threadsState.on(NotificationStateEvents.Update, this.handleThreadsUpdate);
+        if (cli.canSupport.get(Feature.ThreadUnreadNotifications) === ServerSupport.Unsupported) {
+            this.threadsState?.on(NotificationStateEvents.Update, this.handleThreadsUpdate);
         }
-        MatrixClientPeg.get().on(MatrixEventEvent.Decrypted, this.onEventDecrypted); // for local count calculation
-        MatrixClientPeg.get().on(ClientEvent.AccountData, this.handleAccountDataUpdate); // for push rules
+        cli.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        cli.on(ClientEvent.AccountData, this.handleAccountDataUpdate);
         this.updateNotificationState();
     }
 
@@ -50,17 +52,17 @@ export class RoomNotificationState extends NotificationState implements IDestroy
 
     public destroy(): void {
         super.destroy();
+        const cli = this.room.client;
         this.room.removeListener(RoomEvent.Receipt, this.handleReadReceipt);
         this.room.removeListener(RoomEvent.MyMembership, this.handleMembershipUpdate);
         this.room.removeListener(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
-        this.room.removeListener(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate);
-        if (this.threadsState) {
+        if (cli.canSupport.get(Feature.ThreadUnreadNotifications) === ServerSupport.Unsupported) {
+            this.room.removeListener(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate);
+        } else if (this.threadsState) {
             this.threadsState.removeListener(NotificationStateEvents.Update, this.handleThreadsUpdate);
         }
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-            MatrixClientPeg.get().removeListener(ClientEvent.AccountData, this.handleAccountDataUpdate);
-        }
+        cli.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        cli.removeListener(ClientEvent.AccountData, this.handleAccountDataUpdate);
     }
 
     private handleThreadsUpdate = () => {
diff --git a/src/stores/notifications/RoomNotificationStateStore.ts b/src/stores/notifications/RoomNotificationStateStore.ts
index 48aa7e7c20f..ad9bd9f98d6 100644
--- a/src/stores/notifications/RoomNotificationStateStore.ts
+++ b/src/stores/notifications/RoomNotificationStateStore.ts
@@ -17,6 +17,7 @@ limitations under the License.
 import { Room } from "matrix-js-sdk/src/models/room";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
 import { ClientEvent } from "matrix-js-sdk/src/client";
+import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 
 import { ActionPayload } from "../../dispatcher/payloads";
 import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
@@ -39,9 +40,9 @@ export class RoomNotificationStateStore extends AsyncStoreWithClient<IState> {
         instance.start();
         return instance;
     })();
-
     private roomMap = new Map<Room, RoomNotificationState>();
-    private roomThreadsMap = new Map<Room, ThreadsRoomNotificationState>();
+
+    private roomThreadsMap: Map<Room, ThreadsRoomNotificationState> = new Map<Room, ThreadsRoomNotificationState>();
     private listMap = new Map<TagID, ListNotificationState>();
     private _globalState = new SummarizedNotificationState();
 
@@ -86,18 +87,25 @@ export class RoomNotificationStateStore extends AsyncStoreWithClient<IState> {
      */
     public getRoomState(room: Room): RoomNotificationState {
         if (!this.roomMap.has(room)) {
-            // Not very elegant, but that way we ensure that we start tracking
-            // threads notification at the same time at rooms.
-            // There are multiple entry points, and it's unclear which one gets
-            // called first
-            const threadState = new ThreadsRoomNotificationState(room);
-            this.roomThreadsMap.set(room, threadState);
+            let threadState;
+            if (room.client.canSupport.get(Feature.ThreadUnreadNotifications) === ServerSupport.Unsupported) {
+                // Not very elegant, but that way we ensure that we start tracking
+                // threads notification at the same time at rooms.
+                // There are multiple entry points, and it's unclear which one gets
+                // called first
+                const threadState = new ThreadsRoomNotificationState(room);
+                this.roomThreadsMap.set(room, threadState);
+            }
             this.roomMap.set(room, new RoomNotificationState(room, threadState));
         }
         return this.roomMap.get(room);
     }
 
-    public getThreadsRoomState(room: Room): ThreadsRoomNotificationState {
+    public getThreadsRoomState(room: Room): ThreadsRoomNotificationState | null {
+        if (room.client.canSupport.get(Feature.ThreadUnreadNotifications) !== ServerSupport.Unsupported) {
+            return null;
+        }
+
         if (!this.roomThreadsMap.has(room)) {
             this.roomThreadsMap.set(room, new ThreadsRoomNotificationState(room));
         }
diff --git a/test/RoomNotifs-test.ts b/test/RoomNotifs-test.ts
index 3f486205dfc..8ab37e69450 100644
--- a/test/RoomNotifs-test.ts
+++ b/test/RoomNotifs-test.ts
@@ -16,10 +16,15 @@ limitations under the License.
 
 import { mocked } from 'jest-mock';
 import { ConditionKind, PushRuleActionName, TweakName } from "matrix-js-sdk/src/@types/PushRules";
+import { NotificationCountType, Room } from 'matrix-js-sdk/src/models/room';
 
-import { stubClient } from "./test-utils";
+import { mkEvent, stubClient } from "./test-utils";
 import { MatrixClientPeg } from "../src/MatrixClientPeg";
-import { getRoomNotifsState, RoomNotifState } from "../src/RoomNotifs";
+import {
+    getRoomNotifsState,
+    RoomNotifState,
+    getUnreadNotificationCount,
+} from "../src/RoomNotifs";
 
 describe("RoomNotifs test", () => {
     beforeEach(() => {
@@ -83,4 +88,74 @@ describe("RoomNotifs test", () => {
         });
         expect(getRoomNotifsState("!roomId:server")).toBe(RoomNotifState.AllMessagesLoud);
     });
+
+    describe("getUnreadNotificationCount", () => {
+        const ROOM_ID = "!roomId:example.org";
+        const THREAD_ID = "$threadId";
+
+        let cli;
+        let room: Room;
+        beforeEach(() => {
+            cli = MatrixClientPeg.get();
+            room = new Room(ROOM_ID, cli, cli.getUserId());
+        });
+
+        it("counts room notification type", () => {
+            expect(getUnreadNotificationCount(room, NotificationCountType.Total)).toBe(0);
+            expect(getUnreadNotificationCount(room, NotificationCountType.Highlight)).toBe(0);
+        });
+
+        it("counts notifications type", () => {
+            room.setUnreadNotificationCount(NotificationCountType.Total, 2);
+            room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
+
+            expect(getUnreadNotificationCount(room, NotificationCountType.Total)).toBe(2);
+            expect(getUnreadNotificationCount(room, NotificationCountType.Highlight)).toBe(1);
+        });
+
+        it("counts predecessor highlight", () => {
+            room.setUnreadNotificationCount(NotificationCountType.Total, 2);
+            room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
+
+            const OLD_ROOM_ID = "!oldRoomId:example.org";
+            const oldRoom = new Room(OLD_ROOM_ID, cli, cli.getUserId());
+            oldRoom.setUnreadNotificationCount(NotificationCountType.Total, 10);
+            oldRoom.setUnreadNotificationCount(NotificationCountType.Highlight, 6);
+
+            cli.getRoom.mockReset().mockReturnValue(oldRoom);
+
+            const predecessorEvent = mkEvent({
+                event: true,
+                type: "m.room.create",
+                room: ROOM_ID,
+                user: cli.getUserId(),
+                content: {
+                    creator: cli.getUserId(),
+                    room_version: "5",
+                    predecessor: {
+                        room_id: OLD_ROOM_ID,
+                        event_id: "$someevent",
+                    },
+                },
+                ts: Date.now(),
+            });
+            room.addLiveEvents([predecessorEvent]);
+
+            expect(getUnreadNotificationCount(room, NotificationCountType.Total)).toBe(8);
+            expect(getUnreadNotificationCount(room, NotificationCountType.Highlight)).toBe(7);
+        });
+
+        it("counts thread notification type", () => {
+            expect(getUnreadNotificationCount(room, NotificationCountType.Total, THREAD_ID)).toBe(0);
+            expect(getUnreadNotificationCount(room, NotificationCountType.Highlight, THREAD_ID)).toBe(0);
+        });
+
+        it("counts notifications type", () => {
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 2);
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 1);
+
+            expect(getUnreadNotificationCount(room, NotificationCountType.Total, THREAD_ID)).toBe(2);
+            expect(getUnreadNotificationCount(room, NotificationCountType.Highlight, THREAD_ID)).toBe(1);
+        });
+    });
 });
diff --git a/test/components/structures/RoomStatusBar-test.tsx b/test/components/structures/RoomStatusBar-test.tsx
new file mode 100644
index 00000000000..db8b0e03ffd
--- /dev/null
+++ b/test/components/structures/RoomStatusBar-test.tsx
@@ -0,0 +1,91 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { getUnsentMessages } from "../../../src/components/structures/RoomStatusBar";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { mkEvent, stubClient } from "../../test-utils/test-utils";
+import { mkThread } from "../../test-utils/threads";
+
+describe("RoomStatusBar", () => {
+    const ROOM_ID = "!roomId:example.org";
+    let room: Room;
+    let client: MatrixClient;
+    let event: MatrixEvent;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        client = MatrixClientPeg.get();
+        room = new Room(ROOM_ID, client, client.getUserId(), {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        event = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: "@user1:server",
+            room: "!room1:server",
+            content: {},
+        });
+        event.status = EventStatus.NOT_SENT;
+    });
+
+    describe("getUnsentMessages", () => {
+        it("returns no unsent messages", () => {
+            expect(getUnsentMessages(room)).toHaveLength(0);
+        });
+
+        it("checks the event status", () => {
+            room.addPendingEvent(event, "123");
+
+            expect(getUnsentMessages(room)).toHaveLength(1);
+            event.status = EventStatus.SENT;
+
+            expect(getUnsentMessages(room)).toHaveLength(0);
+        });
+
+        it("only returns events related to a thread", () => {
+            room.addPendingEvent(event, "123");
+
+            const { rootEvent, events } = mkThread({
+                room,
+                client,
+                authorId: "@alice:example.org",
+                participantUserIds: ["@alice:example.org"],
+                length: 2,
+            });
+            rootEvent.status = EventStatus.NOT_SENT;
+            room.addPendingEvent(rootEvent, rootEvent.getId());
+            for (const event of events) {
+                event.status = EventStatus.NOT_SENT;
+                room.addPendingEvent(event, Date.now() + Math.random() + "");
+            }
+
+            const pendingEvents = getUnsentMessages(room, rootEvent.getId());
+
+            expect(pendingEvents[0].threadRootId).toBe(rootEvent.getId());
+            expect(pendingEvents[1].threadRootId).toBe(rootEvent.getId());
+            expect(pendingEvents[2].threadRootId).toBe(rootEvent.getId());
+
+            // Filters out the non thread events
+            expect(pendingEvents.every(ev => ev.getId() !== event.getId())).toBe(true);
+        });
+    });
+});
diff --git a/test/components/views/right_panel/RoomHeaderButtons-test.tsx b/test/components/views/right_panel/RoomHeaderButtons-test.tsx
new file mode 100644
index 00000000000..5d873f4b869
--- /dev/null
+++ b/test/components/views/right_panel/RoomHeaderButtons-test.tsx
@@ -0,0 +1,97 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from "@testing-library/react";
+import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
+import React from "react";
+
+import RoomHeaderButtons from "../../../../src/components/views/right_panel/RoomHeaderButtons";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { stubClient } from "../../../test-utils";
+
+describe("RoomHeaderButtons-test.tsx", function() {
+    const ROOM_ID = "!roomId:example.org";
+    let room: Room;
+    let client: MatrixClient;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        client = MatrixClientPeg.get();
+        room = new Room(ROOM_ID, client, client.getUserId(), {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+            if (name === "feature_thread") return true;
+        });
+    });
+
+    function getComponent(room: Room) {
+        return render(<RoomHeaderButtons
+            room={room}
+            excludedRightPanelPhaseButtons={[]}
+        />);
+    }
+
+    function getThreadButton(container) {
+        return container.querySelector(".mx_RightPanel_threadsButton");
+    }
+
+    function isIndicatorOfType(container, type: "red" | "gray") {
+        return container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")
+            .className
+            .includes(type);
+    }
+
+    it("shows the thread button", () => {
+        const { container } = getComponent(room);
+        expect(getThreadButton(container)).not.toBeNull();
+    });
+
+    it("hides the thread button", () => {
+        jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
+        const { container } = getComponent(room);
+        expect(getThreadButton(container)).toBeNull();
+    });
+
+    it("room wide notification does not change the thread button", () => {
+        room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
+        room.setUnreadNotificationCount(NotificationCountType.Total, 1);
+
+        const { container } = getComponent(room);
+
+        expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
+    });
+
+    it("room wide notification does not change the thread button", () => {
+        const { container } = getComponent(room);
+
+        room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1);
+        expect(isIndicatorOfType(container, "gray")).toBe(true);
+
+        room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 1);
+        expect(isIndicatorOfType(container, "red")).toBe(true);
+
+        room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 0);
+        room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 0);
+
+        expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
+    });
+});
diff --git a/test/components/views/rooms/EventTile-test.tsx b/test/components/views/rooms/EventTile-test.tsx
new file mode 100644
index 00000000000..6de3a262cdc
--- /dev/null
+++ b/test/components/views/rooms/EventTile-test.tsx
@@ -0,0 +1,112 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { act, render } from "@testing-library/react";
+import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
+import React from "react";
+
+import EventTile, { EventTileProps } from "../../../../src/components/views/rooms/EventTile";
+import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { getRoomContext, mkMessage, stubClient } from "../../../test-utils";
+import { mkThread } from "../../../test-utils/threads";
+
+describe("EventTile", () => {
+    const ROOM_ID = "!roomId:example.org";
+    let mxEvent: MatrixEvent;
+    let room: Room;
+    let client: MatrixClient;
+    // let changeEvent: (event: MatrixEvent) => void;
+
+    function TestEventTile(props: Partial<EventTileProps>) {
+        // const [event] = useState(mxEvent);
+        // Give a way for a test to update the event prop.
+        // changeEvent = setEvent;
+
+        return <EventTile
+            mxEvent={mxEvent}
+            {...props}
+        />;
+    }
+
+    function getComponent(
+        overrides: Partial<EventTileProps> = {},
+        renderingType: TimelineRenderingType = TimelineRenderingType.Room,
+    ) {
+        const context = getRoomContext(room, {
+            timelineRenderingType: renderingType,
+        });
+        return render(
+            <RoomContext.Provider value={context}>
+                <TestEventTile {...overrides} />
+            </RoomContext.Provider>,
+        );
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        client = MatrixClientPeg.get();
+
+        room = new Room(ROOM_ID, client, client.getUserId(), {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+
+        jest.spyOn(client, "getRoom").mockReturnValue(room);
+
+        mxEvent = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "Hello world!",
+            event: true,
+        });
+    });
+
+    describe("EventTile renderingType: ThreadsList", () => {
+        beforeEach(() => {
+            const { rootEvent } = mkThread({
+                room,
+                client,
+                authorId: "@alice:example.org",
+                participantUserIds: ["@alice:example.org"],
+            });
+            mxEvent = rootEvent;
+        });
+
+        it("shows an unread notification bage", () => {
+            const { container } = getComponent({}, TimelineRenderingType.ThreadsList);
+
+            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(0);
+
+            act(() => {
+                room.setThreadUnreadNotificationCount(mxEvent.getId(), NotificationCountType.Total, 3);
+            });
+
+            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
+            expect(container.getElementsByClassName("mx_NotificationBadge_highlighted")).toHaveLength(0);
+
+            act(() => {
+                room.setThreadUnreadNotificationCount(mxEvent.getId(), NotificationCountType.Highlight, 1);
+            });
+
+            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
+            expect(container.getElementsByClassName("mx_NotificationBadge_highlighted")).toHaveLength(1);
+        });
+    });
+});
diff --git a/test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx b/test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
new file mode 100644
index 00000000000..95d598a704b
--- /dev/null
+++ b/test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
@@ -0,0 +1,49 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+
+import {
+    StatelessNotificationBadge,
+} from "../../../../../src/components/views/rooms/NotificationBadge/StatelessNotificationBadge";
+import { NotificationColor } from "../../../../../src/stores/notifications/NotificationColor";
+
+describe("NotificationBadge", () => {
+    describe("StatelessNotificationBadge", () => {
+        it("lets you click it", () => {
+            const cb = jest.fn();
+
+            const { container } = render(<StatelessNotificationBadge
+                symbol=""
+                color={NotificationColor.Red}
+                count={5}
+                onClick={cb}
+                onMouseOver={cb}
+                onMouseLeave={cb}
+            />);
+
+            fireEvent.click(container.firstChild);
+            expect(cb).toHaveBeenCalledTimes(1);
+
+            fireEvent.mouseEnter(container.firstChild);
+            expect(cb).toHaveBeenCalledTimes(2);
+
+            fireEvent.mouseLeave(container.firstChild);
+            expect(cb).toHaveBeenCalledTimes(3);
+        });
+    });
+});
diff --git a/test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx b/test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
new file mode 100644
index 00000000000..20289dc6b91
--- /dev/null
+++ b/test/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
@@ -0,0 +1,132 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import "jest-mock";
+import { screen, act, render } from "@testing-library/react";
+import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
+import { mocked } from "jest-mock";
+import { EventStatus } from "matrix-js-sdk/src/models/event-status";
+
+import {
+    UnreadNotificationBadge,
+} from "../../../../../src/components/views/rooms/NotificationBadge/UnreadNotificationBadge";
+import { mkMessage, stubClient } from "../../../../test-utils/test-utils";
+import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import * as RoomNotifs from "../../../../../src/RoomNotifs";
+
+jest.mock("../../../../../src/RoomNotifs");
+jest.mock('../../../../../src/RoomNotifs', () => ({
+    ...(jest.requireActual('../../../../../src/RoomNotifs') as Object),
+    getRoomNotifsState: jest.fn(),
+}));
+
+const ROOM_ID = "!roomId:example.org";
+let THREAD_ID;
+
+describe("UnreadNotificationBadge", () => {
+    let mockClient: MatrixClient;
+    let room: Room;
+
+    function getComponent(threadId?: string) {
+        return <UnreadNotificationBadge room={room} threadId={threadId} />;
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        stubClient();
+        mockClient = mocked(MatrixClientPeg.get());
+
+        room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        room.setUnreadNotificationCount(NotificationCountType.Total, 1);
+        room.setUnreadNotificationCount(NotificationCountType.Highlight, 0);
+
+        room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 1);
+        room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 0);
+
+        jest.spyOn(RoomNotifs, "getRoomNotifsState").mockReturnValue(RoomNotifs.RoomNotifState.AllMessages);
+    });
+
+    it("renders unread notification badge", () => {
+        const { container } = render(getComponent());
+
+        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
+        expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
+
+        act(() => {
+            room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
+        });
+
+        expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeTruthy();
+    });
+
+    it("renders unread thread notification badge", () => {
+        const { container } = render(getComponent(THREAD_ID));
+
+        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
+        expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeFalsy();
+
+        act(() => {
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 1);
+        });
+
+        expect(container.querySelector(".mx_NotificationBadge_highlighted")).toBeTruthy();
+    });
+
+    it("hides unread notification badge", () => {
+        act(() => {
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 0);
+            room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 0);
+            const { container } = render(getComponent(THREAD_ID));
+            expect(container.querySelector(".mx_NotificationBadge_visible")).toBeFalsy();
+        });
+    });
+
+    it("adds a warning for unsent messages", () => {
+        const evt = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "Hello world!",
+            event: true,
+        });
+        evt.status = EventStatus.NOT_SENT;
+
+        room.addPendingEvent(evt, "123");
+
+        render(getComponent());
+
+        expect(screen.queryByText("!")).not.toBeNull();
+    });
+
+    it("adds a warning for invites", () => {
+        jest.spyOn(room, "getMyMembership").mockReturnValue("invite");
+        render(getComponent());
+        expect(screen.queryByText("!")).not.toBeNull();
+    });
+
+    it("hides counter for muted rooms", () => {
+        jest.spyOn(RoomNotifs, "getRoomNotifsState")
+            .mockReset()
+            .mockReturnValue(RoomNotifs.RoomNotifState.Mute);
+
+        const { container } = render(getComponent());
+        expect(container.querySelector(".mx_NotificationBadge")).toBeNull();
+    });
+});
diff --git a/test/stores/notifications/RoomNotificationState-test.ts b/test/stores/notifications/RoomNotificationState-test.ts
index 904e0689092..c9ee6dd4974 100644
--- a/test/stores/notifications/RoomNotificationState-test.ts
+++ b/test/stores/notifications/RoomNotificationState-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixEventEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixEventEvent, MatrixEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { stubClient } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@@ -24,12 +24,16 @@ import * as testUtils from "../../test-utils";
 import { NotificationStateEvents } from "../../../src/stores/notifications/NotificationState";
 
 describe("RoomNotificationState", () => {
-    stubClient();
-    const client = MatrixClientPeg.get();
+    let testRoom: Room;
+    let client: MatrixClient;
 
-    it("Updates on event decryption", () => {
-        const testRoom = testUtils.mkStubRoom("$aroomid", "Test room", client);
+    beforeEach(() => {
+        stubClient();
+        client = MatrixClientPeg.get();
+        testRoom = testUtils.mkStubRoom("$aroomid", "Test room", client);
+    });
 
+    it("Updates on event decryption", () => {
         const roomNotifState = new RoomNotificationState(testRoom as any as Room);
         const listener = jest.fn();
         roomNotifState.addListener(NotificationStateEvents.Update, listener);
@@ -40,4 +44,9 @@ describe("RoomNotificationState", () => {
         client.emit(MatrixEventEvent.Decrypted, testEvent);
         expect(listener).toHaveBeenCalled();
     });
+
+    it("removes listeners", () => {
+        const roomNotifState = new RoomNotificationState(testRoom as any as Room);
+        expect(() => roomNotifState.destroy()).not.toThrow();
+    });
 });
diff --git a/test/stores/notifications/RoomNotificationStateStore-test.ts b/test/stores/notifications/RoomNotificationStateStore-test.ts
new file mode 100644
index 00000000000..e5d24881aef
--- /dev/null
+++ b/test/stores/notifications/RoomNotificationStateStore-test.ts
@@ -0,0 +1,60 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { PendingEventOrdering } from "matrix-js-sdk/src/client";
+import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
+import { stubClient } from "../../test-utils";
+
+describe("RoomNotificationStateStore", () => {
+    const ROOM_ID = "!roomId:example.org";
+
+    let room;
+    let client;
+
+    beforeEach(() => {
+        stubClient();
+        client = MatrixClientPeg.get();
+        room = new Room(ROOM_ID, client, client.getUserId(), {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+    });
+
+    it("does not use legacy thread notification store", () => {
+        client.canSupport.set(Feature.ThreadUnreadNotifications, ServerSupport.Stable);
+        expect(RoomNotificationStateStore.instance.getThreadsRoomState(room)).toBeNull();
+    });
+
+    it("use legacy thread notification store", () => {
+        client.canSupport.set(Feature.ThreadUnreadNotifications, ServerSupport.Unsupported);
+        expect(RoomNotificationStateStore.instance.getThreadsRoomState(room)).not.toBeNull();
+    });
+
+    it("does not use legacy thread notification store", () => {
+        client.canSupport.set(Feature.ThreadUnreadNotifications, ServerSupport.Stable);
+        RoomNotificationStateStore.instance.getRoomState(room);
+        expect(RoomNotificationStateStore.instance.getThreadsRoomState(room)).toBeNull();
+    });
+
+    it("use legacy thread notification store", () => {
+        client.canSupport.set(Feature.ThreadUnreadNotifications, ServerSupport.Unsupported);
+        RoomNotificationStateStore.instance.getRoomState(room);
+        expect(RoomNotificationStateStore.instance.getThreadsRoomState(room)).not.toBeNull();
+    });
+});
diff --git a/test/test-utils/threads.ts b/test/test-utils/threads.ts
index 419b09b2b85..2259527178a 100644
--- a/test/test-utils/threads.ts
+++ b/test/test-utils/threads.ts
@@ -106,7 +106,7 @@ export const mkThread = ({
     participantUserIds,
     length = 2,
     ts = 1,
-}: MakeThreadProps): { thread: Thread, rootEvent: MatrixEvent } => {
+}: MakeThreadProps): { thread: Thread, rootEvent: MatrixEvent, events: MatrixEvent[] } => {
     const { rootEvent, events } = makeThreadEvents({
         roomId: room.roomId,
         authorId,
@@ -120,5 +120,5 @@ export const mkThread = ({
     // So that we do not have to mock the thread loading
     thread.initialEventsFetched = true;
 
-    return { thread, rootEvent };
+    return { thread, rootEvent, events };
 };

From 913af09e619a07471e989a2ad5acde2e3ae806a8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 Oct 2022 09:06:20 +0100
Subject: [PATCH 042/113] Convert some tests from Enzyme to RTL (#9483)

---
 .../views/beacon/ShareLatestLocation.tsx      |   2 +-
 .../views/beacon/BeaconListItem-test.tsx      |  67 +++---
 .../beacon/LeftPanelLiveShareWarning-test.tsx |  71 +++---
 .../views/beacon/ShareLatestLocation-test.tsx |  21 +-
 .../beacon/StyledLiveBeaconIcon-test.tsx      |  10 +-
 .../BeaconListItem-test.tsx.snap              |  67 +++++-
 .../__snapshots__/DialogSidebar-test.tsx.snap |   2 +-
 .../LeftPanelLiveShareWarning-test.tsx.snap   |  80 ++-----
 .../ShareLatestLocation-test.tsx.snap         |  93 ++------
 .../StyledLiveBeaconIcon-test.tsx.snap        |   9 +
 .../views/elements/StyledRadioGroup-test.tsx  |  38 ++--
 .../StyledRadioGroup-test.tsx.snap            | 203 ++++++------------
 test/modules/ModuleComponents-test.tsx        |  11 +-
 .../ModuleComponents-test.tsx.snap            |  85 +++-----
 14 files changed, 311 insertions(+), 448 deletions(-)
 create mode 100644 test/components/views/beacon/__snapshots__/StyledLiveBeaconIcon-test.tsx.snap

diff --git a/src/components/views/beacon/ShareLatestLocation.tsx b/src/components/views/beacon/ShareLatestLocation.tsx
index 09c179f6d62..be8bc6f9776 100644
--- a/src/components/views/beacon/ShareLatestLocation.tsx
+++ b/src/components/views/beacon/ShareLatestLocation.tsx
@@ -47,7 +47,7 @@ const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
     return <>
         <TooltipTarget label={_t('Open in OpenStreetMap')}>
             <a
-                data-test-id='open-location-in-osm'
+                data-testid='open-location-in-osm'
                 href={mapLink}
                 target='_blank'
                 rel='noreferrer noopener'
diff --git a/test/components/views/beacon/BeaconListItem-test.tsx b/test/components/views/beacon/BeaconListItem-test.tsx
index d95deed0457..bbfd7e753b7 100644
--- a/test/components/views/beacon/BeaconListItem-test.tsx
+++ b/test/components/views/beacon/BeaconListItem-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
+import { fireEvent, render } from "@testing-library/react";
 import {
     Beacon,
     RoomMember,
@@ -28,7 +27,6 @@ import { act } from 'react-dom/test-utils';
 import BeaconListItem from '../../../../src/components/views/beacon/BeaconListItem';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
 import {
-    findByTestId,
     getMockClientWithEventEmitter,
     makeBeaconEvent,
     makeBeaconInfoEvent,
@@ -76,11 +74,9 @@ describe('<BeaconListItem />', () => {
         beacon: new Beacon(aliceBeaconEvent),
     };
 
-    const getComponent = (props = {}) =>
-        mount(<BeaconListItem {...defaultProps} {...props} />, {
-            wrappingComponent: MatrixClientContext.Provider,
-            wrappingComponentProps: { value: mockClient },
-        });
+    const getComponent = (props = {}) => render(<MatrixClientContext.Provider value={mockClient}>
+        <BeaconListItem {...defaultProps} {...props} />
+    </MatrixClientContext.Provider>);
 
     const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
         const beacons = makeRoomWithBeacons(roomId, mockClient, beaconInfoEvents, locationEvents);
@@ -104,71 +100,72 @@ describe('<BeaconListItem />', () => {
             { isLive: false },
         );
         const [beacon] = setupRoomWithBeacons([notLiveBeacon]);
-        const component = getComponent({ beacon });
-        expect(component.html()).toBeNull();
+        const { container } = getComponent({ beacon });
+        expect(container.innerHTML).toBeFalsy();
     });
 
     it('renders null when beacon has no location', () => {
         const [beacon] = setupRoomWithBeacons([aliceBeaconEvent]);
-        const component = getComponent({ beacon });
-        expect(component.html()).toBeNull();
+        const { container } = getComponent({ beacon });
+        expect(container.innerHTML).toBeFalsy();
     });
 
     describe('when a beacon is live and has locations', () => {
         it('renders beacon info', () => {
             const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
-            const component = getComponent({ beacon });
-            expect(component.html()).toMatchSnapshot();
+            const { asFragment } = getComponent({ beacon });
+            expect(asFragment()).toMatchSnapshot();
         });
 
         describe('non-self beacons', () => {
             it('uses beacon description as beacon name', () => {
                 const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
-                const component = getComponent({ beacon });
-                expect(component.find('BeaconStatus').props().label).toEqual("Alice's car");
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent("Alice's car");
             });
 
             it('uses beacon owner mxid as beacon name for a beacon without description', () => {
                 const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [aliceLocation1]);
-                const component = getComponent({ beacon });
-                expect(component.find('BeaconStatus').props().label).toEqual(aliceId);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent(aliceId);
             });
 
             it('renders location icon', () => {
                 const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
-                const component = getComponent({ beacon });
-                expect(component.find('StyledLiveBeaconIcon').length).toBeTruthy();
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector('.mx_StyledLiveBeaconIcon')).toBeTruthy();
             });
         });
 
         describe('self locations', () => {
             it('renders beacon owner avatar', () => {
                 const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
-                const component = getComponent({ beacon });
-                expect(component.find('MemberAvatar').length).toBeTruthy();
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector('.mx_BaseAvatar')).toBeTruthy();
             });
 
             it('uses beacon owner name as beacon name', () => {
                 const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
-                const component = getComponent({ beacon });
-                expect(component.find('BeaconStatus').props().label).toEqual('Alice');
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent("Alice");
             });
         });
 
         describe('on location updates', () => {
             it('updates last updated time on location updated', () => {
                 const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation2]);
-                const component = getComponent({ beacon });
+                const { container } = getComponent({ beacon });
 
-                expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated 9 minutes ago');
+                expect(container.querySelector('.mx_BeaconListItem_lastUpdated'))
+                    .toHaveTextContent('Updated 9 minutes ago');
 
                 // update to a newer location
                 act(() => {
                     beacon.addLocations([aliceLocation1]);
-                    component.setProps({});
                 });
 
-                expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated a few seconds ago');
+                expect(container.querySelector('.mx_BeaconListItem_lastUpdated'))
+                    .toHaveTextContent('Updated a few seconds ago');
             });
         });
 
@@ -176,23 +173,19 @@ describe('<BeaconListItem />', () => {
             it('does not call onClick handler when clicking share button', () => {
                 const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
                 const onClick = jest.fn();
-                const component = getComponent({ beacon, onClick });
+                const { getByTestId } = getComponent({ beacon, onClick });
 
-                act(() => {
-                    findByTestId(component, 'open-location-in-osm').at(0).simulate('click');
-                });
+                fireEvent.click(getByTestId('open-location-in-osm'));
                 expect(onClick).not.toHaveBeenCalled();
             });
 
             it('calls onClick handler when clicking outside of share buttons', () => {
                 const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
                 const onClick = jest.fn();
-                const component = getComponent({ beacon, onClick });
+                const { container } = getComponent({ beacon, onClick });
 
-                act(() => {
-                    // click the beacon name
-                    component.find('.mx_BeaconStatus_description').simulate('click');
-                });
+                // click the beacon name
+                fireEvent.click(container.querySelector(".mx_BeaconStatus_description"));
                 expect(onClick).toHaveBeenCalled();
             });
         });
diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
index 0369fa5cc13..b8ab33b044d 100644
--- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
+++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
@@ -16,8 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import { mocked } from 'jest-mock';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
+import { fireEvent, render } from "@testing-library/react";
 import { act } from 'react-dom/test-utils';
 import { Beacon, BeaconIdentifier } from 'matrix-js-sdk/src/matrix';
 
@@ -48,9 +47,7 @@ jest.mock('../../../../src/stores/OwnBeaconStore', () => {
 );
 
 describe('<LeftPanelLiveShareWarning />', () => {
-    const defaultProps = {};
-    const getComponent = (props = {}) =>
-        mount(<LeftPanelLiveShareWarning {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<LeftPanelLiveShareWarning {...props} />);
 
     const roomId1 = '!room1:server';
     const roomId2 = '!room2:server';
@@ -85,8 +82,8 @@ describe('<LeftPanelLiveShareWarning />', () => {
     ));
 
     it('renders nothing when user has no live beacons', () => {
-        const component = getComponent();
-        expect(component.html()).toBe(null);
+        const { container } = getComponent();
+        expect(container.innerHTML).toBeFalsy();
     });
 
     describe('when user has live location monitor', () => {
@@ -110,17 +107,15 @@ describe('<LeftPanelLiveShareWarning />', () => {
         });
 
         it('renders correctly when not minimized', () => {
-            const component = getComponent();
-            expect(component).toMatchSnapshot();
+            const { asFragment } = getComponent();
+            expect(asFragment()).toMatchSnapshot();
         });
 
         it('goes to room of latest beacon when clicked', () => {
-            const component = getComponent();
+            const { container } = getComponent();
             const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
 
-            act(() => {
-                component.simulate('click');
-            });
+            fireEvent.click(container.querySelector("[role=button]"));
 
             expect(dispatchSpy).toHaveBeenCalledWith({
                 action: Action.ViewRoom,
@@ -134,28 +129,26 @@ describe('<LeftPanelLiveShareWarning />', () => {
         });
 
         it('renders correctly when minimized', () => {
-            const component = getComponent({ isMinimized: true });
-            expect(component).toMatchSnapshot();
+            const { asFragment } = getComponent({ isMinimized: true });
+            expect(asFragment()).toMatchSnapshot();
         });
 
         it('renders location publish error', () => {
             mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
                 [beacon1.identifier],
             );
-            const component = getComponent();
-            expect(component).toMatchSnapshot();
+            const { asFragment } = getComponent();
+            expect(asFragment()).toMatchSnapshot();
         });
 
         it('goes to room of latest beacon with location publish error when clicked', () => {
             mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
                 [beacon1.identifier],
             );
-            const component = getComponent();
+            const { container } = getComponent();
             const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
 
-            act(() => {
-                component.simulate('click');
-            });
+            fireEvent.click(container.querySelector("[role=button]"));
 
             expect(dispatchSpy).toHaveBeenCalledWith({
                 action: Action.ViewRoom,
@@ -172,9 +165,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
             mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
                 [beacon1.identifier],
             );
-            const component = getComponent();
+            const { container, rerender } = getComponent();
             // error mode
-            expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
+            expect(container.querySelector('.mx_LeftPanelLiveShareWarning').textContent).toEqual(
                 'An error occurred whilst sharing your live location',
             );
 
@@ -183,18 +176,18 @@ describe('<LeftPanelLiveShareWarning />', () => {
                 OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.LocationPublishError, 'abc');
             });
 
-            component.setProps({});
+            rerender(<LeftPanelLiveShareWarning />);
 
             // default mode
-            expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
+            expect(container.querySelector('.mx_LeftPanelLiveShareWarning').textContent).toEqual(
                 'You are sharing your live location',
             );
         });
 
         it('removes itself when user stops having live beacons', async () => {
-            const component = getComponent({ isMinimized: true });
+            const { container, rerender } = getComponent({ isMinimized: true });
             // started out rendered
-            expect(component.html()).toBeTruthy();
+            expect(container.innerHTML).toBeTruthy();
 
             act(() => {
                 mocked(OwnBeaconStore.instance).isMonitoringLiveLocation = false;
@@ -202,9 +195,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
             });
 
             await flushPromises();
-            component.setProps({});
+            rerender(<LeftPanelLiveShareWarning />);
 
-            expect(component.html()).toBe(null);
+            expect(container.innerHTML).toBeFalsy();
         });
 
         it('refreshes beacon liveness monitors when pagevisibilty changes to visible', () => {
@@ -228,21 +221,21 @@ describe('<LeftPanelLiveShareWarning />', () => {
         describe('stopping errors', () => {
             it('renders stopping error', () => {
                 OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
-                const component = getComponent();
-                expect(component.text()).toEqual('An error occurred while stopping your live location');
+                const { container } = getComponent();
+                expect(container.textContent).toEqual('An error occurred while stopping your live location');
             });
 
             it('starts rendering stopping error on beaconUpdateError emit', () => {
-                const component = getComponent();
+                const { container } = getComponent();
                 // no error
-                expect(component.text()).toEqual('You are sharing your live location');
+                expect(container.textContent).toEqual('You are sharing your live location');
 
                 act(() => {
                     OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
                     OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.BeaconUpdateError, beacon2.identifier, true);
                 });
 
-                expect(component.text()).toEqual('An error occurred while stopping your live location');
+                expect(container.textContent).toEqual('An error occurred while stopping your live location');
             });
 
             it('renders stopping error when beacons have stopping and location errors', () => {
@@ -250,8 +243,8 @@ describe('<LeftPanelLiveShareWarning />', () => {
                     [beacon1.identifier],
                 );
                 OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
-                const component = getComponent();
-                expect(component.text()).toEqual('An error occurred while stopping your live location');
+                const { container } = getComponent();
+                expect(container.textContent).toEqual('An error occurred while stopping your live location');
             });
 
             it('goes to room of latest beacon with stopping error when clicked', () => {
@@ -259,12 +252,10 @@ describe('<LeftPanelLiveShareWarning />', () => {
                     [beacon1.identifier],
                 );
                 OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
-                const component = getComponent();
+                const { container } = getComponent();
                 const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
 
-                act(() => {
-                    component.simulate('click');
-                });
+                fireEvent.click(container.querySelector("[role=button]"));
 
                 expect(dispatchSpy).toHaveBeenCalledWith({
                     action: Action.ViewRoom,
diff --git a/test/components/views/beacon/ShareLatestLocation-test.tsx b/test/components/views/beacon/ShareLatestLocation-test.tsx
index 767c712042e..1712d7d57c7 100644
--- a/test/components/views/beacon/ShareLatestLocation-test.tsx
+++ b/test/components/views/beacon/ShareLatestLocation-test.tsx
@@ -15,9 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { fireEvent, render } from "@testing-library/react";
 
 import ShareLatestLocation from '../../../../src/components/views/beacon/ShareLatestLocation';
 import { copyPlaintext } from '../../../../src/utils/strings';
@@ -34,26 +32,23 @@ describe('<ShareLatestLocation />', () => {
             timestamp: 123,
         },
     };
-    const getComponent = (props = {}) =>
-        mount(<ShareLatestLocation {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
 
     beforeEach(() => {
         jest.clearAllMocks();
     });
 
     it('renders null when no location', () => {
-        const component = getComponent({ latestLocationState: undefined });
-        expect(component.html()).toBeNull();
+        const { container } = getComponent({ latestLocationState: undefined });
+        expect(container.innerHTML).toBeFalsy();
     });
 
     it('renders share buttons when there is a location', async () => {
-        const component = getComponent();
-        expect(component).toMatchSnapshot();
+        const { container, asFragment } = getComponent();
+        expect(asFragment()).toMatchSnapshot();
 
-        await act(async () => {
-            component.find('.mx_CopyableText_copyButton').at(0).simulate('click');
-            await flushPromises();
-        });
+        fireEvent.click(container.querySelector('.mx_CopyableText_copyButton'));
+        await flushPromises();
 
         expect(copyPlaintext).toHaveBeenCalledWith('51,42');
     });
diff --git a/test/components/views/beacon/StyledLiveBeaconIcon-test.tsx b/test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
index d6be878a257..e04289c7db7 100644
--- a/test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
+++ b/test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
@@ -15,18 +15,16 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
+import { render } from "@testing-library/react";
 
 import StyledLiveBeaconIcon from '../../../../src/components/views/beacon/StyledLiveBeaconIcon';
 
 describe('<StyledLiveBeaconIcon />', () => {
     const defaultProps = {};
-    const getComponent = (props = {}) =>
-        mount(<StyledLiveBeaconIcon {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<StyledLiveBeaconIcon {...defaultProps} {...props} />);
 
     it('renders', () => {
-        const component = getComponent();
-        expect(component).toBeTruthy();
+        const { asFragment } = getComponent();
+        expect(asFragment()).toMatchSnapshot();
     });
 });
diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index 9ddc5dd44c1..dd1d607dd41 100644
--- a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -1,3 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `"<li class=\\"mx_BeaconListItem\\"><div class=\\"mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon\\"></div><div class=\\"mx_BeaconListItem_info\\"><div class=\\"mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status\\"><div class=\\"mx_BeaconStatus_description\\"><span class=\\"mx_BeaconStatus_label\\">Alice's car</span><span class=\\"mx_BeaconStatus_expiryTime\\">Live until 16:04</span></div><div class=\\"mx_BeaconListItem_interactions\\"><div tabindex=\\"0\\"><a data-test-id=\\"open-location-in-osm\\" href=\\"https://www.openstreetmap.org/?mlat=51&amp;mlon=41#map=16/51/41\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\"><div class=\\"mx_ShareLatestLocation_icon\\"></div></a></div><div class=\\"mx_CopyableText mx_ShareLatestLocation_copy\\"><div aria-label=\\"Copy\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_CopyableText_copyButton\\"></div></div></div></div><span class=\\"mx_BeaconListItem_lastUpdated\\">Updated a few seconds ago</span></div></li>"`;
+exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `
+<DocumentFragment>
+  <li
+    class="mx_BeaconListItem"
+  >
+    <div
+      class="mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon"
+    />
+    <div
+      class="mx_BeaconListItem_info"
+    >
+      <div
+        class="mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status"
+      >
+        <div
+          class="mx_BeaconStatus_description"
+        >
+          <span
+            class="mx_BeaconStatus_label"
+          >
+            Alice's car
+          </span>
+          <span
+            class="mx_BeaconStatus_expiryTime"
+          >
+            Live until 16:04
+          </span>
+        </div>
+        <div
+          class="mx_BeaconListItem_interactions"
+        >
+          <div
+            tabindex="0"
+          >
+            <a
+              data-testid="open-location-in-osm"
+              href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              <div
+                class="mx_ShareLatestLocation_icon"
+              />
+            </a>
+          </div>
+          <div
+            class="mx_CopyableText mx_ShareLatestLocation_copy"
+          >
+            <div
+              aria-label="Copy"
+              class="mx_AccessibleButton mx_CopyableText_copyButton"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+        </div>
+      </div>
+      <span
+        class="mx_BeaconListItem_lastUpdated"
+      >
+        Updated a few seconds ago
+      </span>
+    </div>
+  </li>
+</DocumentFragment>
+`;
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index a92079d2c84..22199fbc911 100644
--- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -75,7 +75,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 tabindex="0"
               >
                 <a
-                  data-test-id="open-location-in-osm"
+                  data-testid="open-location-in-osm"
                   href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                   rel="noreferrer noopener"
                   target="_blank"
diff --git a/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap b/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
index 0dd32a93870..b481b1f8fd3 100644
--- a/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
@@ -1,76 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders correctly when minimized 1`] = `
-<LeftPanelLiveShareWarning
-  isMinimized={true}
->
-  <AccessibleButton
-    className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
-    element="div"
-    onClick={[Function]}
+<DocumentFragment>
+  <div
+    class="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
     role="button"
-    tabIndex={0}
+    tabindex="0"
     title="You are sharing your live location"
   >
     <div
-      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      role="button"
-      tabIndex={0}
-      title="You are sharing your live location"
-    >
-      <div
-        height={10}
-      />
-    </div>
-  </AccessibleButton>
-</LeftPanelLiveShareWarning>
+      height="10"
+    />
+  </div>
+</DocumentFragment>
 `;
 
 exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders correctly when not minimized 1`] = `
-<LeftPanelLiveShareWarning>
-  <AccessibleButton
-    className="mx_LeftPanelLiveShareWarning"
-    element="div"
-    onClick={[Function]}
+<DocumentFragment>
+  <div
+    class="mx_AccessibleButton mx_LeftPanelLiveShareWarning"
     role="button"
-    tabIndex={0}
+    tabindex="0"
   >
-    <div
-      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      role="button"
-      tabIndex={0}
-    >
-      You are sharing your live location
-    </div>
-  </AccessibleButton>
-</LeftPanelLiveShareWarning>
+    You are sharing your live location
+  </div>
+</DocumentFragment>
 `;
 
 exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders location publish error 1`] = `
-<LeftPanelLiveShareWarning>
-  <AccessibleButton
-    className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__error"
-    element="div"
-    onClick={[Function]}
+<DocumentFragment>
+  <div
+    class="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__error"
     role="button"
-    tabIndex={0}
+    tabindex="0"
   >
-    <div
-      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__error"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      role="button"
-      tabIndex={0}
-    >
-      An error occurred whilst sharing your live location
-    </div>
-  </AccessibleButton>
-</LeftPanelLiveShareWarning>
+    An error occurred whilst sharing your live location
+  </div>
+</DocumentFragment>
 `;
diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index 5f55d3103d0..1162786e300 100644
--- a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -1,79 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
-<ShareLatestLocation
-  latestLocationState={
-    Object {
-      "timestamp": 123,
-      "uri": "geo:51,42;u=35",
-    }
-  }
->
-  <TooltipTarget
-    label="Open in OpenStreetMap"
+<DocumentFragment>
+  <div
+    tabindex="0"
   >
-    <div
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onMouseLeave={[Function]}
-      onMouseMove={[Function]}
-      onMouseOver={[Function]}
-      tabIndex={0}
+    <a
+      data-testid="open-location-in-osm"
+      href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
+      rel="noreferrer noopener"
+      target="_blank"
     >
-      <a
-        data-test-id="open-location-in-osm"
-        href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
-        rel="noreferrer noopener"
-        target="_blank"
-      >
-        <div
-          className="mx_ShareLatestLocation_icon"
-        />
-      </a>
-    </div>
-  </TooltipTarget>
-  <CopyableText
-    border={false}
-    className="mx_ShareLatestLocation_copy"
-    getTextToCopy={[Function]}
+      <div
+        class="mx_ShareLatestLocation_icon"
+      />
+    </a>
+  </div>
+  <div
+    class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
     <div
-      className="mx_CopyableText mx_ShareLatestLocation_copy"
-    >
-      <AccessibleTooltipButton
-        className="mx_CopyableText_copyButton"
-        onClick={[Function]}
-        onHideTooltip={[Function]}
-        title="Copy"
-      >
-        <AccessibleButton
-          aria-label="Copy"
-          className="mx_CopyableText_copyButton"
-          element="div"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseOver={[Function]}
-          role="button"
-          tabIndex={0}
-        >
-          <div
-            aria-label="Copy"
-            className="mx_AccessibleButton mx_CopyableText_copyButton"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            role="button"
-            tabIndex={0}
-          />
-        </AccessibleButton>
-      </AccessibleTooltipButton>
-    </div>
-  </CopyableText>
-</ShareLatestLocation>
+      aria-label="Copy"
+      class="mx_AccessibleButton mx_CopyableText_copyButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+</DocumentFragment>
 `;
diff --git a/test/components/views/beacon/__snapshots__/StyledLiveBeaconIcon-test.tsx.snap b/test/components/views/beacon/__snapshots__/StyledLiveBeaconIcon-test.tsx.snap
new file mode 100644
index 00000000000..e1e2bf1faae
--- /dev/null
+++ b/test/components/views/beacon/__snapshots__/StyledLiveBeaconIcon-test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StyledLiveBeaconIcon /> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_StyledLiveBeaconIcon"
+  />
+</DocumentFragment>
+`;
diff --git a/test/components/views/elements/StyledRadioGroup-test.tsx b/test/components/views/elements/StyledRadioGroup-test.tsx
index 3fa5dd9c532..8868b741bd1 100644
--- a/test/components/views/elements/StyledRadioGroup-test.tsx
+++ b/test/components/views/elements/StyledRadioGroup-test.tsx
@@ -15,9 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
-import { act } from "react-dom/test-utils";
+import { fireEvent, render } from "@testing-library/react";
 
 import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
 
@@ -44,16 +42,16 @@ describe('<StyledRadioGroup />', () => {
         definitions: defaultDefinitions,
         onChange: jest.fn(),
     };
-    const getComponent = (props = {}) => mount(<StyledRadioGroup {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<StyledRadioGroup {...defaultProps} {...props} />);
 
-    const getInputByValue = (component, value) => component.find(`input[value="${value}"]`);
-    const getCheckedInput = component => component.find('input[checked=true]');
+    const getInputByValue = (component, value) => component.container.querySelector(`input[value="${value}"]`);
+    const getCheckedInput = component => component.container.querySelector('input[checked]');
 
     it('renders radios correctly when no value is provided', () => {
         const component = getComponent();
 
-        expect(component).toMatchSnapshot();
-        expect(getCheckedInput(component).length).toBeFalsy();
+        expect(component.asFragment()).toMatchSnapshot();
+        expect(getCheckedInput(component)).toBeFalsy();
     });
 
     it('selects correct button when value is provided', () => {
@@ -61,7 +59,7 @@ describe('<StyledRadioGroup />', () => {
             value: optionC.value,
         });
 
-        expect(getCheckedInput(component).at(0).props().value).toEqual(optionC.value);
+        expect(getCheckedInput(component).value).toEqual(optionC.value);
     });
 
     it('selects correct buttons when definitions have checked prop', () => {
@@ -74,10 +72,10 @@ describe('<StyledRadioGroup />', () => {
             value: optionC.value, definitions,
         });
 
-        expect(getInputByValue(component, optionA.value).props().checked).toBeTruthy();
-        expect(getInputByValue(component, optionB.value).props().checked).toBeFalsy();
+        expect(getInputByValue(component, optionA.value)).toBeChecked();
+        expect(getInputByValue(component, optionB.value)).not.toBeChecked();
         // optionC.checked = false overrides value matching
-        expect(getInputByValue(component, optionC.value).props().checked).toBeFalsy();
+        expect(getInputByValue(component, optionC.value)).not.toBeChecked();
     });
 
     it('disables individual buttons based on definition.disabled', () => {
@@ -87,16 +85,16 @@ describe('<StyledRadioGroup />', () => {
             { ...optionC, disabled: true },
         ];
         const component = getComponent({ definitions });
-        expect(getInputByValue(component, optionA.value).props().disabled).toBeFalsy();
-        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionA.value)).not.toBeDisabled();
+        expect(getInputByValue(component, optionB.value)).toBeDisabled();
+        expect(getInputByValue(component, optionC.value)).toBeDisabled();
     });
 
     it('disables all buttons with disabled prop', () => {
         const component = getComponent({ disabled: true });
-        expect(getInputByValue(component, optionA.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionA.value)).toBeDisabled();
+        expect(getInputByValue(component, optionB.value)).toBeDisabled();
+        expect(getInputByValue(component, optionC.value)).toBeDisabled();
     });
 
     it('calls onChange on click', () => {
@@ -106,9 +104,7 @@ describe('<StyledRadioGroup />', () => {
             onChange,
         });
 
-        act(() => {
-            getInputByValue(component, optionB.value).simulate('change');
-        });
+        fireEvent.click(getInputByValue(component, optionB.value));
 
         expect(onChange).toHaveBeenCalledWith(optionB.value);
     });
diff --git a/test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap b/test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap
index 423c006a727..cb3c3374fde 100644
--- a/test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap
@@ -1,152 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StyledRadioGroup /> renders radios correctly when no value is provided 1`] = `
-<StyledRadioGroup
-  className="test-class"
-  definitions={
-    Array [
-      Object {
-        "className": "a-class",
-        "description": "anteater description",
-        "label": <span>
-          Anteater label
-        </span>,
-        "value": "Anteater",
-      },
-      Object {
-        "label": <span>
-          Badger label
-        </span>,
-        "value": "Badger",
-      },
-      Object {
-        "description": <span>
-          Canary description
-        </span>,
-        "label": <span>
-          Canary label
-        </span>,
-        "value": "Canary",
-      },
-    ]
-  }
-  name="test"
-  onChange={[MockFunction]}
->
-  <StyledRadioButton
-    aria-describedby="test-Anteater-description"
-    checked={false}
-    childrenInLabel={true}
-    className="test-class a-class"
-    id="test-Anteater"
-    name="test"
-    onChange={[Function]}
-    value="Anteater"
+<DocumentFragment>
+  <label
+    class="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
+    <input
+      aria-describedby="test-Anteater-description"
+      id="test-Anteater"
+      name="test"
+      type="radio"
+      value="Anteater"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        aria-describedby="test-Anteater-description"
-        checked={false}
-        id="test-Anteater"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Anteater"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Anteater label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
+      <span>
+        Anteater label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
   <span
     id="test-Anteater-description"
   >
     anteater description
   </span>
-  <StyledRadioButton
-    checked={false}
-    childrenInLabel={true}
-    className="test-class"
-    id="test-Badger"
-    name="test"
-    onChange={[Function]}
-    value="Badger"
+  <label
+    class="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    <input
+      id="test-Badger"
+      name="test"
+      type="radio"
+      value="Badger"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        checked={false}
-        id="test-Badger"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Badger"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Badger label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
-  <StyledRadioButton
-    aria-describedby="test-Canary-description"
-    checked={false}
-    childrenInLabel={true}
-    className="test-class"
-    id="test-Canary"
-    name="test"
-    onChange={[Function]}
-    value="Canary"
+      <span>
+        Badger label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
+  <label
+    class="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    <input
+      aria-describedby="test-Canary-description"
+      id="test-Canary"
+      name="test"
+      type="radio"
+      value="Canary"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        aria-describedby="test-Canary-description"
-        checked={false}
-        id="test-Canary"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Canary"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Canary label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
+      <span>
+        Canary label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
   <span
     id="test-Canary-description"
   >
@@ -154,5 +85,5 @@ exports[`<StyledRadioGroup /> renders radios correctly when no value is provided
       Canary description
     </span>
   </span>
-</StyledRadioGroup>
+</DocumentFragment>
 `;
diff --git a/test/modules/ModuleComponents-test.tsx b/test/modules/ModuleComponents-test.tsx
index 1bc7f77c69c..d3e13717d20 100644
--- a/test/modules/ModuleComponents-test.tsx
+++ b/test/modules/ModuleComponents-test.tsx
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 import { TextInputField } from "@matrix-org/react-sdk-module-api/lib/components/TextInputField";
 import { Spinner as ModuleSpinner } from "@matrix-org/react-sdk-module-api/lib/components/Spinner";
 
@@ -31,12 +30,12 @@ describe("Module Components", () => {
     // ModuleRunner import to do its job (as per documentation in ModuleComponents).
 
     it("should override the factory for a TextInputField", () => {
-        const component = mount(<TextInputField label="My Label" value="My Value" onChange={() => {}} />);
-        expect(component).toMatchSnapshot();
+        const { asFragment } = render(<TextInputField label="My Label" value="My Value" onChange={() => {}} />);
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("should override the factory for a ModuleSpinner", () => {
-        const component = mount(<ModuleSpinner />);
-        expect(component).toMatchSnapshot();
+        const { asFragment } = render(<ModuleSpinner />);
+        expect(asFragment()).toMatchSnapshot();
     });
 });
diff --git a/test/modules/__snapshots__/ModuleComponents-test.tsx.snap b/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
index 864c775c4f6..248d213452b 100644
--- a/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
+++ b/test/modules/__snapshots__/ModuleComponents-test.tsx.snap
@@ -1,68 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Module Components should override the factory for a ModuleSpinner 1`] = `
-<Spinner>
-  <Spinner
-    h={32}
-    w={32}
+<DocumentFragment>
+  <div
+    class="mx_Spinner"
   >
     <div
-      className="mx_Spinner"
-    >
-      <div
-        aria-label="Loading..."
-        className="mx_Spinner_icon"
-        data-testid="spinner"
-        role="progressbar"
-        style={
-          Object {
-            "height": 32,
-            "width": 32,
-          }
-        }
-      />
-    </div>
-  </Spinner>
-</Spinner>
+      aria-label="Loading..."
+      class="mx_Spinner_icon"
+      data-testid="spinner"
+      role="progressbar"
+      style="width: 32px; height: 32px;"
+    />
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Module Components should override the factory for a TextInputField 1`] = `
-<TextInputField
-  label="My Label"
-  onChange={[Function]}
-  value="My Value"
->
-  <Field
-    autoComplete="off"
-    element="input"
-    label="My Label"
-    onChange={[Function]}
-    type="text"
-    validateOnBlur={true}
-    validateOnChange={true}
-    validateOnFocus={true}
-    value="My Value"
+<DocumentFragment>
+  <div
+    class="mx_Field mx_Field_input"
   >
-    <div
-      className="mx_Field mx_Field_input"
+    <input
+      autocomplete="off"
+      id="mx_Field_1"
+      label="My Label"
+      placeholder="My Label"
+      type="text"
+      value="My Value"
+    />
+    <label
+      for="mx_Field_1"
     >
-      <input
-        autoComplete="off"
-        id="mx_Field_1"
-        label="My Label"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="My Label"
-        type="text"
-        value="My Value"
-      />
-      <label
-        htmlFor="mx_Field_1"
-      >
-        My Label
-      </label>
-    </div>
-  </Field>
-</TextInputField>
+      My Label
+    </label>
+  </div>
+</DocumentFragment>
 `;

From eafc2d23a7dab932b5e04eb3236b83d4a033a4da Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 Oct 2022 09:58:36 +0100
Subject: [PATCH 043/113] Ensure spaces in the spotlight dialog have rounded
 square avatars (#9480)

---
 src/components/views/avatars/RoomAvatar.tsx   | 16 ++---
 .../dialogs/spotlight/SpotlightDialog.tsx     | 15 ++--
 src/components/views/rooms/RoomPreviewBar.tsx |  6 +-
 src/stores/ThreepidInviteStore.ts             |  2 +-
 test/Avatar-test.ts                           |  4 +-
 .../views/dialogs/InviteDialog-test.tsx       |  2 +
 .../views/right_panel/UserInfo-test.tsx       |  1 +
 .../views/rooms/RoomPreviewBar-test.tsx       | 71 ++++++++++++-------
 .../filters/VisibilityProvider-test.ts        |  3 +-
 test/test-utils/test-utils.ts                 |  3 +
 10 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/src/components/views/avatars/RoomAvatar.tsx b/src/components/views/avatars/RoomAvatar.tsx
index f50232fb220..c09b598ceec 100644
--- a/src/components/views/avatars/RoomAvatar.tsx
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -16,11 +16,10 @@ limitations under the License.
 
 import React, { ComponentProps } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
-import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import classNames from "classnames";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
@@ -39,11 +38,7 @@ interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idNam
     oobData?: IOOBData & {
         roomId?: string;
     };
-    width?: number;
-    height?: number;
-    resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
-    className?: string;
     onClick?(): void;
 }
 
@@ -72,10 +67,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
+        MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
     }
 
     public static getDerivedStateFromProps(nextProps: IProps): IState {
@@ -133,7 +125,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     public render() {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
 
-        const roomName = room ? room.name : oobData.name;
+        const roomName = room?.name ?? oobData.name;
         // If the room is a DM, we use the other user's ID for the color hash
         // in order to match the room avatar with their avatar
         const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : oobData.roomId;
@@ -142,7 +134,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             <BaseAvatar
                 {...otherProps}
                 className={classNames(className, {
-                    mx_RoomAvatar_isSpaceRoom: room?.isSpaceRoom(),
+                    mx_RoomAvatar_isSpaceRoom: (room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space,
                 })}
                 name={roomName}
                 idName={idName}
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index dfec2ab5097..6703afc0879 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -93,6 +93,7 @@ import { TooltipOption } from "./TooltipOption";
 import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
 import { useSlidingSyncRoomSearch } from "../../../../hooks/useSlidingSyncRoomSearch";
 import { shouldShowFeedback } from "../../../../utils/Feedback";
+import RoomAvatar from "../../avatars/RoomAvatar";
 
 const MAX_RECENT_SEARCHES = 10;
 const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -656,6 +657,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         shouldPeek: result.publicRoom.world_readable || cli.isGuest(),
                     }, true, ev.type !== "click");
                 };
+
                 return (
                     <Option
                         id={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}`}
@@ -674,13 +676,14 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         aria-describedby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_alias`}
                         aria-details={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_details`}
                     >
-                        <BaseAvatar
+                        <RoomAvatar
                             className="mx_SearchResultAvatar"
-                            url={result?.publicRoom?.avatar_url
-                                ? mediaFromMxc(result?.publicRoom?.avatar_url).getSquareThumbnailHttp(AVATAR_SIZE)
-                                : null}
-                            name={result.publicRoom.name}
-                            idName={result.publicRoom.room_id}
+                            oobData={{
+                                roomId: result.publicRoom.room_id,
+                                name: result.publicRoom.name,
+                                avatarUrl: result.publicRoom.avatar_url,
+                                roomType: result.publicRoom.room_type,
+                            }}
                             width={AVATAR_SIZE}
                             height={AVATAR_SIZE}
                         />
diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx
index 39c82e4eeaa..eecdf00147a 100644
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -263,9 +263,9 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             params: {
                 email: this.props.invitedEmail,
                 signurl: this.props.signUrl,
-                room_name: this.props.oobData ? this.props.oobData.room_name : null,
-                room_avatar_url: this.props.oobData ? this.props.oobData.avatarUrl : null,
-                inviter_name: this.props.oobData ? this.props.oobData.inviterName : null,
+                room_name: this.props.oobData?.name ?? null,
+                room_avatar_url: this.props.oobData?.avatarUrl ?? null,
+                inviter_name: this.props.oobData?.inviterName ?? null,
             },
         };
     }
diff --git a/src/stores/ThreepidInviteStore.ts b/src/stores/ThreepidInviteStore.ts
index 9b597ba877b..fe2df8f66e7 100644
--- a/src/stores/ThreepidInviteStore.ts
+++ b/src/stores/ThreepidInviteStore.ts
@@ -56,7 +56,7 @@ export interface IOOBData {
     inviterName?: string; // The display name of the person who invited us to the room
     // eslint-disable-next-line camelcase
     room_name?: string; // The name of the room, to be used until we are told better by the server
-    roomType?: RoomType; // The type of the room, to be used until we are told better by the server
+    roomType?: RoomType | string; // The type of the room, to be used until we are told better by the server
 }
 
 const STORAGE_PREFIX = "mx_threepid_invite_";
diff --git a/test/Avatar-test.ts b/test/Avatar-test.ts
index 214ada9486a..0ff064ed57d 100644
--- a/test/Avatar-test.ts
+++ b/test/Avatar-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
+import { Room, RoomMember, RoomType } from "matrix-js-sdk/src/matrix";
 
 import { avatarUrlForRoom } from "../src/Avatar";
 import { Media, mediaFromMxc } from "../src/customisations/Media";
@@ -46,6 +46,7 @@ describe("avatarUrlForRoom", () => {
             roomId,
             getMxcAvatarUrl: jest.fn(),
             isSpaceRoom: jest.fn(),
+            getType: jest.fn(),
             getAvatarFallbackMember: jest.fn(),
         } as unknown as Room;
         dmRoomMap = {
@@ -70,6 +71,7 @@ describe("avatarUrlForRoom", () => {
 
     it("should return null for a space room", () => {
         mocked(room.isSpaceRoom).mockReturnValue(true);
+        mocked(room.getType).mockReturnValue(RoomType.Space);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
     });
 
diff --git a/test/components/views/dialogs/InviteDialog-test.tsx b/test/components/views/dialogs/InviteDialog-test.tsx
index 469cbde96b3..6a82506e761 100644
--- a/test/components/views/dialogs/InviteDialog-test.tsx
+++ b/test/components/views/dialogs/InviteDialog-test.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import { RoomType } from "matrix-js-sdk/src/@types/event";
 
 import InviteDialog from "../../../../src/components/views/dialogs/InviteDialog";
 import { KIND_INVITE } from "../../../../src/components/views/dialogs/InviteDialogTypes";
@@ -74,6 +75,7 @@ describe("InviteDialog", () => {
 
     it("should label with space name", () => {
         mockClient.getRoom(roomId).isSpaceRoom = jest.fn().mockReturnValue(true);
+        mockClient.getRoom(roomId).getType = jest.fn().mockReturnValue(RoomType.Space);
         mockClient.getRoom(roomId).name = "Space";
         render((
             <InviteDialog
diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx
index 6ec36cb096b..f76661fc689 100644
--- a/test/components/views/right_panel/UserInfo-test.tsx
+++ b/test/components/views/right_panel/UserInfo-test.tsx
@@ -140,6 +140,7 @@ describe('<UserInfo />', () => {
     describe('with a room', () => {
         const room = {
             roomId: '!fkfk',
+            getType: jest.fn().mockReturnValue(undefined),
             isSpaceRoom: jest.fn().mockReturnValue(false),
             getMember: jest.fn().mockReturnValue(undefined),
             getMxcAvatarUrl: jest.fn().mockReturnValue('mock-avatar-url'),
diff --git a/test/components/views/rooms/RoomPreviewBar-test.tsx b/test/components/views/rooms/RoomPreviewBar-test.tsx
index d785f5b0240..e7c8fa72814 100644
--- a/test/components/views/rooms/RoomPreviewBar-test.tsx
+++ b/test/components/views/rooms/RoomPreviewBar-test.tsx
@@ -15,18 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import {
-    renderIntoDocument,
-    Simulate,
-    findRenderedDOMComponentWithClass,
-    act,
-} from 'react-dom/test-utils';
+import { render, fireEvent, RenderResult, waitFor } from "@testing-library/react";
 import { Room, RoomMember, MatrixError, IContent } from 'matrix-js-sdk/src/matrix';
 
 import { stubClient } from '../../../test-utils';
 import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import DMRoomMap from '../../../../src/utils/DMRoomMap';
 import RoomPreviewBar from '../../../../src/components/views/rooms/RoomPreviewBar';
+import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 
 jest.mock('../../../../src/IdentityAuthClient', () => {
     return jest.fn().mockImplementation(() => {
@@ -79,19 +75,18 @@ describe('<RoomPreviewBar />', () => {
         const defaultProps = {
             room: createRoom(roomId, userId),
         };
-        const wrapper = renderIntoDocument<React.Component>(
-            <RoomPreviewBar {...defaultProps} {...props} />,
-        ) as React.Component;
-        return findRenderedDOMComponentWithClass(wrapper, 'mx_RoomPreviewBar') as HTMLDivElement;
+        return render(<RoomPreviewBar {...defaultProps} {...props} />);
     };
 
-    const isSpinnerRendered = (element: Element) => !!element.querySelector('.mx_Spinner');
-    const getMessage = (element: Element) => element.querySelector<HTMLDivElement>('.mx_RoomPreviewBar_message');
-    const getActions = (element: Element) => element.querySelector<HTMLDivElement>('.mx_RoomPreviewBar_actions');
-    const getPrimaryActionButton = (element: Element) =>
-        getActions(element).querySelector('.mx_AccessibleButton_kind_primary');
-    const getSecondaryActionButton = (element: Element) =>
-        getActions(element).querySelector('.mx_AccessibleButton_kind_secondary');
+    const isSpinnerRendered = (wrapper: RenderResult) => !!wrapper.container.querySelector('.mx_Spinner');
+    const getMessage = (wrapper: RenderResult) =>
+        wrapper.container.querySelector<HTMLDivElement>('.mx_RoomPreviewBar_message');
+    const getActions = (wrapper: RenderResult) =>
+        wrapper.container.querySelector<HTMLDivElement>('.mx_RoomPreviewBar_actions');
+    const getPrimaryActionButton = (wrapper: RenderResult) =>
+        getActions(wrapper).querySelector('.mx_AccessibleButton_kind_primary');
+    const getSecondaryActionButton = (wrapper: RenderResult) =>
+        getActions(wrapper).querySelector('.mx_AccessibleButton_kind_secondary');
 
     beforeEach(() => {
         stubClient();
@@ -128,6 +123,36 @@ describe('<RoomPreviewBar />', () => {
         expect(getMessage(component).textContent).toEqual('Join the conversation with an account');
     });
 
+    it("should send room oob data to start login", async () => {
+        MatrixClientPeg.get().isGuest = jest.fn().mockReturnValue(true);
+        const component = getComponent({
+            oobData: {
+                name: "Room Name",
+                avatarUrl: "mxc://foo/bar",
+                inviterName: "Charlie",
+            },
+        });
+
+        const dispatcherSpy = jest.fn();
+        const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
+
+        expect(getMessage(component).textContent).toEqual('Join the conversation with an account');
+        fireEvent.click(getPrimaryActionButton(component));
+
+        await waitFor(() => expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({
+            screenAfterLogin: {
+                screen: 'room',
+                params: expect.objectContaining({
+                    room_name: "Room Name",
+                    room_avatar_url: "mxc://foo/bar",
+                    inviter_name: "Charlie",
+                }),
+            },
+        })));
+
+        defaultDispatcher.unregister(dispatcherRef);
+    });
+
     it('renders kicked message', () => {
         const room = createRoom(roomId, otherUserId);
         jest.spyOn(room, 'getMember').mockReturnValue(makeMockRoomMember({ isKicked: true }));
@@ -233,18 +258,14 @@ describe('<RoomPreviewBar />', () => {
 
                 it('joins room on primary button click', () => {
                     const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
-                    act(() => {
-                        Simulate.click(getPrimaryActionButton(component));
-                    });
+                    fireEvent.click(getPrimaryActionButton(component));
 
                     expect(onJoinClick).toHaveBeenCalled();
                 });
 
                 it('rejects invite on secondary button click', () => {
                     const component = getComponent({ inviterName, room, onJoinClick, onRejectClick });
-                    act(() => {
-                        Simulate.click(getSecondaryActionButton(component));
-                    });
+                    fireEvent.click(getSecondaryActionButton(component));
 
                     expect(onRejectClick).toHaveBeenCalled();
                 });
@@ -296,9 +317,7 @@ describe('<RoomPreviewBar />', () => {
                 await new Promise(setImmediate);
                 expect(getPrimaryActionButton(component)).toBeTruthy();
                 expect(getSecondaryActionButton(component)).toBeFalsy();
-                act(() => {
-                    Simulate.click(getPrimaryActionButton(component));
-                });
+                fireEvent.click(getPrimaryActionButton(component));
                 expect(onJoinClick).toHaveBeenCalled();
             };
 
diff --git a/test/stores/room-list/filters/VisibilityProvider-test.ts b/test/stores/room-list/filters/VisibilityProvider-test.ts
index f22901a40f1..ca6c67dfb19 100644
--- a/test/stores/room-list/filters/VisibilityProvider-test.ts
+++ b/test/stores/room-list/filters/VisibilityProvider-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { Room, RoomType } from "matrix-js-sdk/src/matrix";
 
 import { VisibilityProvider } from "../../../../src/stores/room-list/filters/VisibilityProvider";
 import LegacyCallHandler from "../../../../src/LegacyCallHandler";
@@ -43,6 +43,7 @@ jest.mock("../../../../src/customisations/RoomList", () => ({
 const createRoom = (isSpaceRoom = false): Room => {
     return {
         isSpaceRoom: () => isSpaceRoom,
+        getType: () => isSpaceRoom ? RoomType.Space : undefined,
     } as unknown as Room;
 };
 
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index 4549190600d..8bd6e3d460e 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -31,6 +31,7 @@ import {
     IEventRelation,
     IUnsigned,
     IPusher,
+    RoomType,
 } from 'matrix-js-sdk/src/matrix';
 import { normalize } from "matrix-js-sdk/src/utils";
 import { ReEmitter } from "matrix-js-sdk/src/ReEmitter";
@@ -447,6 +448,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
         getAvatarUrl: () => 'mxc://avatar.url/room.png',
         getMxcAvatarUrl: () => 'mxc://avatar.url/room.png',
         isSpaceRoom: jest.fn().mockReturnValue(false),
+        getType: jest.fn().mockReturnValue(undefined),
         isElementVideoRoom: jest.fn().mockReturnValue(false),
         getUnreadNotificationCount: jest.fn(() => 0),
         getEventReadUpTo: jest.fn(() => null),
@@ -544,6 +546,7 @@ export const mkSpace = (
 ): MockedObject<Room> => {
     const space = mocked(mkRoom(client, spaceId, rooms));
     space.isSpaceRoom.mockReturnValue(true);
+    space.getType.mockReturnValue(RoomType.Space);
     mocked(space.currentState).getStateEvents.mockImplementation(mockStateEventImplementation(children.map(roomId =>
         mkEvent({
             event: true,

From 50c29502e4666cd49fe5bf75200db6234e7eded0 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 21 Oct 2022 19:26:33 +0200
Subject: [PATCH 044/113] Add new tests for WysiwygComposer

---
 .../hooks/useWysiwygEditActionHandler.ts      |   2 +-
 .../utils/createMessageContent.ts             |   4 +-
 .../rooms/wysiwyg_composer/utils/message.ts   |   9 +-
 .../EditWysiwygComposer-test.tsx              | 224 +++++++++++++++++
 .../SendWysiwygComposer-test.tsx              | 150 +++++++++++
 .../wysiwyg_composer/WysiwygComposer-test.tsx | 238 ------------------
 .../FormattingButtons-test.tsx                |   3 +-
 .../components/WysiwygComposer-test.tsx       | 152 +++++++++++
 .../utils/createMessageContent-test.ts        | 133 ++++++++++
 .../{ => utils}/message-test.ts               | 211 ++++++++--------
 test/test-utils/test-utils.ts                 |   1 +
 11 files changed, 772 insertions(+), 355 deletions(-)
 create mode 100644 test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
 create mode 100644 test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
 delete mode 100644 test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
 rename test/components/views/rooms/wysiwyg_composer/{ => components}/FormattingButtons-test.tsx (95%)
 create mode 100644 test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
 create mode 100644 test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
 rename test/components/views/rooms/wysiwyg_composer/{ => utils}/message-test.ts (53%)

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
index 2cbd7cf52cc..b39fe18007b 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
@@ -38,7 +38,7 @@ export function useWysiwygEditActionHandler(
         const context = payload.context ?? TimelineRenderingType.Room;
 
         switch (payload.action) {
-            case Action.FocusSendMessageComposer:
+            case Action.FocusEditMessageComposer:
                 focusComposer(composerElement, context, roomContext, timeoutId);
                 break;
         }
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index f0488e45995..cc0d2235bf9 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -54,8 +54,8 @@ export function createMessageContent(
 ): IContent {
     // TODO emote ?
 
-    const isReply = Boolean(replyToEvent?.replyEventId);
     const isEditing = Boolean(editedEvent);
+    const isReply = isEditing ? Boolean(editedEvent?.replyEventId) : Boolean(replyToEvent);
 
     /*const isEmote = containsEmote(model);
     if (isEmote) {
@@ -87,7 +87,7 @@ export function createMessageContent(
     if (formattedBody) {
         content.format = "org.matrix.custom.html";
 
-        const htmlPrefix = isReply ? getHtmlReplyFallback(editedEvent) : '';
+        const htmlPrefix = isReply && isEditing ? getHtmlReplyFallback(editedEvent) : '';
         content.formatted_body = isEditing ? `${htmlPrefix} * ${formattedBody}` : formattedBody;
     }
 
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/message.ts b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
index 0f4de2d8a30..dbea29c848c 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/message.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { Composer as ComposerEvent } from "@matrix-org/analytics-events/types/typescript/Composer";
 import { IContent, IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { ISendEventResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
@@ -160,6 +160,7 @@ export function editMessage(
         isReply: Boolean(editedEvent.replyEventId),
     });
 
+    // TODO emoji
     // Replace emoticon at the end of the message
     /*    if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
         const caret = this.editorRef.current?.getCaret();
@@ -182,6 +183,8 @@ export function editMessage(
         return;
     }
 
+    let response: Promise<ISendEventResponse> | undefined;
+
     // If content is modified then send an updated event into the room
     if (isContentModified(newContent, editorStateTransfer)) {
         const roomId = editedEvent.getRoomId();
@@ -194,11 +197,11 @@ export function editMessage(
             const event = editorStateTransfer.getEvent();
             const threadId = event.threadRootId || null;
 
-            console.log('editContent', editContent);
-            mxClient.sendMessage(roomId, threadId, editContent);
+            response = mxClient.sendMessage(roomId, threadId, editContent);
             dis.dispatch({ action: "message_sent" });
         }
     }
 
     endEditing(roomContext);
+    return response;
 }
diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
new file mode 100644
index 00000000000..72fd52be574
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -0,0 +1,224 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
+
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import RoomContext from "../../../../../src/contexts/RoomContext";
+import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
+import { Action } from "../../../../../src/dispatcher/actions";
+import { IRoomState } from "../../../../../src/components/structures/RoomView";
+import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
+import { EditWysiwygComposer }
+    from "../../../../../src/components/views/rooms/wysiwyg_composer";
+import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
+
+const mockClear = jest.fn();
+
+let initialContent: string;
+const defaultContent = '<b>html</b>';
+let mockContent = defaultContent;
+
+// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
+// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
+jest.mock("@matrix-org/matrix-wysiwyg", () => ({
+    useWysiwyg: (props: WysiwygProps) => {
+        initialContent = props.initialContent;
+        return {
+            ref: { current: null },
+            content: mockContent,
+            isWysiwygReady: true,
+            wysiwyg: { clear: mockClear },
+            formattingStates: {
+                bold: 'enabled',
+                italic: 'enabled',
+                underline: 'enabled',
+                strikeThrough: 'enabled',
+            },
+        };
+    },
+}));
+
+describe('EditWysiwygComposer', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+        mockContent = defaultContent;
+    });
+
+    const mockClient = createTestClient();
+    const mockEvent = mkEvent({
+        type: "m.room.message",
+        room: 'myfakeroom',
+        user: 'myfakeuser',
+        content: {
+            "msgtype": "m.text",
+            "body": "Replying to this",
+            "format": "org.matrix.custom.html",
+            "formatted_body": "Replying <b>to</b> this new content",
+        },
+        event: true,
+    });
+    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
+    mockRoom.findEventById = jest.fn(eventId => {
+        return eventId === mockEvent.getId() ? mockEvent : null;
+    });
+
+    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
+
+    const editorStateTransfer = new EditorStateTransfer(mockEvent);
+
+    const customRender = (disabled = false, _editorStateTransfer = editorStateTransfer) => {
+        return render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <RoomContext.Provider value={defaultRoomContext}>
+                    <EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
+                </RoomContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+    };
+
+    describe('Initialize with content', () => {
+        it('Should initialize useWysiwyg with html content', async () => {
+            // When
+            customRender(true);
+
+            // Then
+            expect(initialContent).toBe(mockEvent.getContent()['formatted_body']);
+        });
+
+        it('Should initialize useWysiwyg with plain text content', async () => {
+            // When
+            const mockEvent = mkEvent({
+                type: "m.room.message",
+                room: 'myfakeroom',
+                user: 'myfakeuser',
+                content: {
+                    "msgtype": "m.text",
+                    "body": "Replying to this",
+                },
+                event: true,
+            });
+            const editorStateTransfer = new EditorStateTransfer(mockEvent);
+
+            customRender(true, editorStateTransfer);
+
+            // Then
+            expect(initialContent).toBe(mockEvent.getContent().body);
+        });
+    });
+
+    describe('Edit and save actions', () => {
+        const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
+        afterEach(() => {
+            spyDispatcher.mockRestore();
+        });
+
+        it('Should cancel edit on cancel button click', async () => {
+            // When
+            customRender(true);
+            (await screen.findByText('Cancel')).click();
+
+            // Then
+            expect(spyDispatcher).toBeCalledWith({
+                action: Action.EditEvent,
+                event: null,
+                timelineRenderingType: defaultRoomContext.timelineRenderingType,
+            });
+            expect(spyDispatcher).toBeCalledWith({
+                action: Action.FocusSendMessageComposer,
+                context: defaultRoomContext.timelineRenderingType,
+            });
+        });
+
+        it('Should send message on save button click', async () => {
+            // When
+            const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
+
+            const renderer = customRender(true);
+
+            mockContent = 'my new content';
+            renderer.rerender(<MatrixClientContext.Provider value={mockClient}>
+                <RoomContext.Provider value={defaultRoomContext}>
+                    <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
+                </RoomContext.Provider>
+            </MatrixClientContext.Provider>);
+
+            (await screen.findByText('Save')).click();
+
+            // Then
+            const expectedContent = {
+                "body": mockContent,
+                "format": "org.matrix.custom.html",
+                "formatted_body": ` * ${mockContent}`,
+                "m.new_content": {
+                    "body": mockContent,
+                    "format": "org.matrix.custom.html",
+                    "formatted_body": mockContent,
+                    "msgtype": "m.text",
+                },
+                "m.relates_to": {
+                    "event_id": mockEvent.getId(),
+                    "rel_type": "m.replace",
+                },
+                "msgtype": "m.text",
+            };
+            expect(mockClient.sendMessage).toBeCalledWith(mockEvent.getRoomId(), null, expectedContent);
+            expect(spyDispatcher).toBeCalledWith({ action: 'message_sent' });
+        });
+    });
+
+    it('Should focus when receiving an Action.FocusEditMessageComposer action', async () => {
+        // Given we don't have focus
+        customRender();
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send the right action
+        defaultDispatcher.dispatch({
+            action: Action.FocusEditMessageComposer,
+            context: null,
+        });
+
+        // Then the component gets the focus
+        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+    });
+
+    it('Should not focus when disabled', async () => {
+        // Given we don't have focus and we are disabled
+        customRender(true);
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send an action that would cause us to get focus
+        defaultDispatcher.dispatch({
+            action: Action.FocusEditMessageComposer,
+            context: null,
+        });
+        // (Send a second event to exercise the clearTimeout logic)
+        defaultDispatcher.dispatch({
+            action: Action.FocusEditMessageComposer,
+            context: null,
+        });
+
+        // Wait for event dispatch to happen
+        await new Promise((r) => setTimeout(r, 200));
+
+        // Then we don't get it because we are disabled
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+    });
+});
+
diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
new file mode 100644
index 00000000000..20148b802a7
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -0,0 +1,150 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
+
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import RoomContext from "../../../../../src/contexts/RoomContext";
+import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
+import { Action } from "../../../../../src/dispatcher/actions";
+import { IRoomState } from "../../../../../src/components/structures/RoomView";
+import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
+import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
+
+const mockClear = jest.fn();
+
+// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
+// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
+jest.mock("@matrix-org/matrix-wysiwyg", () => ({
+    useWysiwyg: (props: WysiwygProps) => {
+        return {
+            ref: { current: null },
+            content: '<b>html</b>',
+            isWysiwygReady: true,
+            wysiwyg: { clear: mockClear },
+            formattingStates: {
+                bold: 'enabled',
+                italic: 'enabled',
+                underline: 'enabled',
+                strikeThrough: 'enabled',
+            },
+        };
+    },
+}));
+
+describe('SendWysiwygComposer', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    const mockClient = createTestClient();
+    const mockEvent = mkEvent({
+        type: "m.room.message",
+        room: 'myfakeroom',
+        user: 'myfakeuser',
+        content: { "msgtype": "m.text", "body": "Replying to this" },
+        event: true,
+    });
+    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
+    mockRoom.findEventById = jest.fn(eventId => {
+        return eventId === mockEvent.getId() ? mockEvent : null;
+    });
+
+    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
+
+    const customRender = (onChange = (_content: string) => void 0, onSend = () => void 0, disabled = false) => {
+        return render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <RoomContext.Provider value={defaultRoomContext}>
+                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} />
+                </RoomContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+    };
+
+    it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
+        // Given we don't have focus
+        customRender(jest.fn(), jest.fn());
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send the right action
+        defaultDispatcher.dispatch({
+            action: Action.FocusSendMessageComposer,
+            context: null,
+        });
+
+        // Then the component gets the focus
+        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+    });
+
+    it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
+        // Given we don't have focus
+        customRender(jest.fn(), jest.fn());
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send the right action
+        defaultDispatcher.dispatch({
+            action: Action.ClearAndFocusSendMessageComposer,
+            context: null,
+        });
+
+        // Then the component gets the focus
+        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+        expect(mockClear).toBeCalledTimes(1);
+    });
+
+    it('Should focus when receiving a reply_to_event action', async () => {
+        // Given we don't have focus
+        customRender(jest.fn(), jest.fn());
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send the right action
+        defaultDispatcher.dispatch({
+            action: "reply_to_event",
+            context: null,
+        });
+
+        // Then the component gets the focus
+        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+    });
+
+    it('Should not focus when disabled', async () => {
+        // Given we don't have focus and we are disabled
+        customRender(jest.fn(), jest.fn(), true);
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+        // When we send an action that would cause us to get focus
+        defaultDispatcher.dispatch({
+            action: Action.FocusSendMessageComposer,
+            context: null,
+        });
+        // (Send a second event to exercise the clearTimeout logic)
+        defaultDispatcher.dispatch({
+            action: Action.FocusSendMessageComposer,
+            context: null,
+        });
+
+        // Wait for event dispatch to happen
+        await new Promise((r) => setTimeout(r, 200));
+
+        // Then we don't get it because we are disabled
+        expect(screen.getByRole('textbox')).not.toHaveFocus();
+    });
+});
+
diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
deleted file mode 100644
index fba6753ac21..00000000000
--- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import "@testing-library/jest-dom";
-import React from "react";
-import { act, render, screen, waitFor } from "@testing-library/react";
-import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
-
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import RoomContext from "../../../../../src/contexts/RoomContext";
-import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
-import { Action } from "../../../../../src/dispatcher/actions";
-import { IRoomState } from "../../../../../src/components/structures/RoomView";
-import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
-import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-
-// Work around missing ClipboardEvent type
-class MyClipbardEvent {}
-window.ClipboardEvent = MyClipbardEvent as any;
-
-let inputEventProcessor: InputEventProcessor | null = null;
-
-// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
-// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
-jest.mock("@matrix-org/matrix-wysiwyg", () => ({
-    useWysiwyg: (props: WysiwygProps) => {
-        inputEventProcessor = props.inputEventProcessor ?? null;
-        return {
-            ref: { current: null },
-            content: '<b>html</b>',
-            isWysiwygReady: true,
-            wysiwyg: { clear: () => void 0 },
-            formattingStates: {
-                bold: 'enabled',
-                italic: 'enabled',
-                underline: 'enabled',
-                strikeThrough: 'enabled',
-            },
-        };
-    },
-}));
-
-describe('WysiwygComposer', () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    const permalinkCreator = jest.fn() as any;
-    const mockClient = createTestClient();
-    const mockEvent = mkEvent({
-        type: "m.room.message",
-        room: 'myfakeroom',
-        user: 'myfakeuser',
-        content: { "msgtype": "m.text", "body": "Replying to this" },
-        event: true,
-    });
-    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
-    mockRoom.findEventById = jest.fn(eventId => {
-        return eventId === mockEvent.getId() ? mockEvent : null;
-    });
-
-    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
-
-    let sendMessage: () => void;
-    const customRender = (onChange = (_content: string) => void 0, disabled = false) => {
-        return render(
-            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
-                    <WysiwygComposer onChange={onChange} permalinkCreator={permalinkCreator} disabled={disabled}>
-                        { (_sendMessage) => {
-                            sendMessage = _sendMessage;
-                        } }</WysiwygComposer>
-                </RoomContext.Provider>
-            </MatrixClientContext.Provider>,
-        );
-    };
-
-    it('Should have contentEditable at false when disabled', () => {
-        // When
-        customRender(null, true);
-
-        // Then
-        expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
-    });
-
-    it('Should call onChange handler', (done) => {
-        const html = '<b>html</b>';
-        customRender((content) => {
-            expect(content).toBe((html));
-            done();
-        });
-    //    act(() => callOnChange(html));
-    });
-
-    it('Should send message, call clear and focus the textbox', async () => {
-        // When
-        const html = '<b>html</b>';
-        await new Promise((resolve) => {
-            customRender(() => resolve(null));
-        });
-        act(() => sendMessage());
-
-        // Then
-        const expectedContent = {
-            "body": html,
-            "format": "org.matrix.custom.html",
-            "formatted_body": html,
-            "msgtype": "m.text",
-        };
-        expect(mockClient.sendMessage).toBeCalledWith('myfakeroom', null, expectedContent);
-        expect(screen.getByRole('textbox')).toHaveFocus();
-    });
-
-    it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
-        // Given we don't have focus
-        customRender(() => {}, false);
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-
-        // When we send the right action
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
-        });
-
-        // Then the component gets the focus
-        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
-    });
-
-    it('Should focus when receiving a reply_to_event action', async () => {
-        // Given we don't have focus
-        customRender(() => {}, false);
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-
-        // When we send the right action
-        defaultDispatcher.dispatch({
-            action: "reply_to_event",
-            context: null,
-        });
-
-        // Then the component gets the focus
-        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
-    });
-
-    it('Should not focus when disabled', async () => {
-        // Given we don't have focus and we are disabled
-        customRender(() => {}, true);
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-
-        // When we send an action that would cause us to get focus
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
-        });
-        // (Send a second event to exercise the clearTimeout logic)
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
-        });
-
-        // Wait for event dispatch to happen
-        await new Promise((r) => setTimeout(r, 200));
-
-        // Then we don't get it because we are disabled
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-    });
-
-    it('sends a message when Enter is pressed', async () => {
-        // Given a composer
-        customRender(() => {}, false);
-
-        // When we tell its inputEventProcesser that the user pressed Enter
-        const event = new InputEvent("insertParagraph", { inputType: "insertParagraph" });
-        const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
-        inputEventProcessor(event, wysiwyg);
-
-        // Then it sends a message
-        expect(mockClient.sendMessage).toBeCalledWith(
-            "myfakeroom",
-            null,
-            {
-                "body": "<b>html</b>",
-                "format": "org.matrix.custom.html",
-                "formatted_body": "<b>html</b>",
-                "msgtype": "m.text",
-            },
-        );
-        // TODO: plain text body above is wrong - will be fixed when we provide markdown for it
-    });
-
-    describe('when settings require Ctrl+Enter to send', () => {
-        beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
-                if (name === "MessageComposerInput.ctrlEnterToSend") return true;
-            });
-        });
-
-        it('does not send a message when Enter is pressed', async () => {
-            // Given a composer
-            customRender(() => {}, false);
-
-            // When we tell its inputEventProcesser that the user pressed Enter
-            const event = new InputEvent("input", { inputType: "insertParagraph" });
-            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
-            inputEventProcessor(event, wysiwyg);
-
-            // Then it does not send a message
-            expect(mockClient.sendMessage).toBeCalledTimes(0);
-        });
-
-        it('sends a message when Ctrl+Enter is pressed', async () => {
-            // Given a composer
-            customRender(() => {}, false);
-
-            // When we tell its inputEventProcesser that the user pressed Ctrl+Enter
-            const event = new InputEvent("input", { inputType: "sendMessage" });
-            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
-            inputEventProcessor(event, wysiwyg);
-
-            // Then it sends a message
-            expect(mockClient.sendMessage).toBeCalledTimes(1);
-        });
-    });
-});
-
diff --git a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
similarity index 95%
rename from test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
rename to test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index a9838ecacaa..e935b62ae5e 100644
--- a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -18,7 +18,8 @@ import React from 'react';
 import { render, screen } from "@testing-library/react";
 import userEvent from '@testing-library/user-event';
 
-import { FormattingButtons } from "../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
+import { FormattingButtons }
+    from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 
 describe('FormattingButtons', () => {
     const wysiwyg = {
diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
new file mode 100644
index 00000000000..e7e21ca839c
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@@ -0,0 +1,152 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
+
+import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
+import { IRoomState } from "../../../../../../src/components/structures/RoomView";
+import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../../test-utils";
+import RoomContext from "../../../../../../src/contexts/RoomContext";
+import { WysiwygComposer }
+    from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
+import SettingsStore from "../../../../../../src/settings/SettingsStore";
+
+// Work around missing ClipboardEvent type
+class MyClipboardEvent {}
+window.ClipboardEvent = MyClipboardEvent as any;
+
+let inputEventProcessor: InputEventProcessor | null = null;
+
+// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
+// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
+jest.mock("@matrix-org/matrix-wysiwyg", () => ({
+    useWysiwyg: (props: WysiwygProps) => {
+        inputEventProcessor = props.inputEventProcessor ?? null;
+        return {
+            ref: { current: null },
+            content: '<b>html</b>',
+            isWysiwygReady: true,
+            wysiwyg: { clear: () => void 0 },
+            formattingStates: {
+                bold: 'enabled',
+                italic: 'enabled',
+                underline: 'enabled',
+                strikeThrough: 'enabled',
+            },
+        };
+    },
+}));
+
+describe('WysiwygComposer', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    const mockClient = createTestClient();
+    const mockEvent = mkEvent({
+        type: "m.room.message",
+        room: 'myfakeroom',
+        user: 'myfakeuser',
+        content: { "msgtype": "m.text", "body": "Replying to this" },
+        event: true,
+    });
+    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
+    mockRoom.findEventById = jest.fn(eventId => {
+        return eventId === mockEvent.getId() ? mockEvent : null;
+    });
+
+    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
+
+    const customRender = (onChange = (_content: string) => void 0, onSend = () => void 0, disabled = false) => {
+        return render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <RoomContext.Provider value={defaultRoomContext}>
+                    <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} />
+                </RoomContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+    };
+
+    it('Should have contentEditable at false when disabled', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), true);
+
+        // Then
+        expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
+    });
+
+    it('Should call onChange handler', (done) => {
+        const html = '<b>html</b>';
+        customRender((content) => {
+            expect(content).toBe((html));
+            done();
+        }, jest.fn());
+    });
+
+    it('Should call onSend when Enter is pressed ', () => {
+        //When
+        const onSend = jest.fn();
+        customRender(jest.fn(), onSend);
+
+        // When we tell its inputEventProcesser that the user pressed Enter
+        const event = new InputEvent("insertParagraph", { inputType: "insertParagraph" });
+        const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+        inputEventProcessor(event, wysiwyg);
+
+        // Then it sends a message
+        expect(onSend).toBeCalledTimes(1);
+    });
+
+    describe('When settings require Ctrl+Enter to send', () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                if (name === "MessageComposerInput.ctrlEnterToSend") return true;
+            });
+        });
+
+        it('Should not call onSend when Enter is pressed', async () => {
+            // Given a composer
+            const onSend = jest.fn();
+            customRender(() => {}, onSend, false);
+
+            // When we tell its inputEventProcesser that the user pressed Enter
+            const event = new InputEvent("input", { inputType: "insertParagraph" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it does not send a message
+            expect(onSend).toBeCalledTimes(0);
+        });
+
+        it('Should send a message when Ctrl+Enter is pressed', async () => {
+            // Given a composer
+            const onSend = jest.fn();
+            customRender(() => {}, onSend, false);
+
+            // When we tell its inputEventProcesser that the user pressed Ctrl+Enter
+            const event = new InputEvent("input", { inputType: "sendMessage" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it sends a message
+            expect(onSend).toBeCalledTimes(1);
+        });
+    });
+});
+
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
new file mode 100644
index 00000000000..a4335b2bf10
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
@@ -0,0 +1,133 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mkEvent } from "../../../../../test-utils";
+import { RoomPermalinkCreator } from "../../../../../../src/utils/permalinks/Permalinks";
+import { createMessageContent }
+    from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/createMessageContent";
+
+describe('createMessageContent', () => {
+    const permalinkCreator = {
+        forEvent(eventId: string): string {
+            return "$$permalink$$";
+        },
+    } as RoomPermalinkCreator;
+    const message = '<i><b>hello</b> world</i>';
+    const mockEvent = mkEvent({
+        type: "m.room.message",
+        room: 'myfakeroom',
+        user: 'myfakeuser',
+        content: { "msgtype": "m.text", "body": "Replying to this" },
+        event: true,
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("Should create html message", () => {
+        // When
+        const content = createMessageContent(message, { permalinkCreator });
+
+        // Then
+        expect(content).toEqual({
+            "body": message,
+            "format": "org.matrix.custom.html",
+            "formatted_body": message,
+            "msgtype": "m.text",
+        });
+    });
+
+    it('Should add reply to message content', () => {
+        // When
+        const content = createMessageContent(message, { permalinkCreator, replyToEvent: mockEvent });
+
+        // Then
+        expect(content).toEqual({
+            "body": "> <myfakeuser> Replying to this\n\n<i><b>hello</b> world</i>",
+            "format": "org.matrix.custom.html",
+            "formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
+                                    " <a href=\"https://matrix.to/#/myfakeuser\">myfakeuser</a>"+
+                                    "<br>Replying to this</blockquote></mx-reply><i><b>hello</b> world</i>",
+            "msgtype": "m.text",
+            "m.relates_to": {
+                "m.in_reply_to": {
+                    "event_id": mockEvent.getId(),
+                },
+            },
+        });
+    });
+
+    it("Should add relation to message", () => {
+        // When
+        const relation = {
+            rel_type: "m.thread",
+            event_id: "myFakeThreadId",
+        };
+        const content = createMessageContent(message, { permalinkCreator, relation });
+
+        // Then
+        expect(content).toEqual({
+            "body": message,
+            "format": "org.matrix.custom.html",
+            "formatted_body": message,
+            "msgtype": "m.text",
+            "m.relates_to": {
+                "event_id": "myFakeThreadId",
+                "rel_type": "m.thread",
+            },
+        });
+    });
+
+    it('Should add fields related to edition', () => {
+        // When
+        const editedEvent = mkEvent({
+            type: "m.room.message",
+            room: 'myfakeroom',
+            user: 'myfakeuser2',
+            content: {
+                "msgtype": "m.text",
+                "body": "First message",
+                "formatted_body": "<b>First Message</b>",
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        "event_id": 'eventId',
+                    },
+                } },
+            event: true,
+        });
+        const content =
+                createMessageContent(message, { permalinkCreator, editedEvent });
+
+        // Then
+        expect(content).toEqual({
+            "body": message,
+            "format": "org.matrix.custom.html",
+            "formatted_body": ` * ${message}`,
+            "msgtype": "m.text",
+            "m.new_content": {
+                "body": message,
+                "format": "org.matrix.custom.html",
+                "formatted_body": message,
+                "msgtype": "m.text",
+            },
+            "m.relates_to": {
+                "event_id": editedEvent.getId(),
+                "rel_type": "m.replace",
+            },
+        });
+    });
+});
diff --git a/test/components/views/rooms/wysiwyg_composer/message-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
similarity index 53%
rename from test/components/views/rooms/wysiwyg_composer/message-test.ts
rename to test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
index e672d2639b0..9d13f281760 100644
--- a/test/components/views/rooms/wysiwyg_composer/message-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
@@ -14,15 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { IRoomState } from "../../../../../src/components/structures/RoomView";
-import { createMessageContent, sendMessage } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/message";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
-import { Layout } from "../../../../../src/settings/enums/Layout";
-import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";
-import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import { EventStatus } from "matrix-js-sdk/src/matrix";
+
+import { IRoomState } from "../../../../../../src/components/structures/RoomView";
+import { editMessage, sendMessage }
+    from "../../../../../../src/components/views/rooms/wysiwyg_composer/utils/message";
+import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../../test-utils";
+import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
+import SettingsStore from "../../../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
+import { RoomPermalinkCreator } from "../../../../../../src/utils/permalinks/Permalinks";
+import EditorStateTransfer from "../../../../../../src/utils/EditorStateTransfer";
+import * as ConfirmRedactDialog
+    from "../../../../../../src/components/views/dialogs/ConfirmRedactDialog";
 
 describe('message', () => {
     const permalinkCreator = {
@@ -35,117 +39,30 @@ describe('message', () => {
         type: "m.room.message",
         room: 'myfakeroom',
         user: 'myfakeuser',
-        content: { "msgtype": "m.text", "body": "Replying to this" },
+        content: {
+            "msgtype": "m.text",
+            "body": "Replying to this",
+            "format": 'org.matrix.custom.html',
+            "formatted_body": 'Replying to this',
+        },
         event: true,
     });
 
-    afterEach(() => {
-        jest.resetAllMocks();
+    const mockClient = createTestClient();
+    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
+    mockRoom.findEventById = jest.fn(eventId => {
+        return eventId === mockEvent.getId() ? mockEvent : null;
     });
 
-    describe('createMessageContent', () => {
-        it("Should create html message", () => {
-            // When
-            const content = createMessageContent(message, { permalinkCreator });
+    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
 
-            // Then
-            expect(content).toEqual({
-                "body": message,
-                "format": "org.matrix.custom.html",
-                "formatted_body": message,
-                "msgtype": "m.text",
-            });
-        });
+    const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
 
-        it('Should add reply to message content', () => {
-            // When
-            const content = createMessageContent(message, { permalinkCreator, replyToEvent: mockEvent });
-
-            // Then
-            expect(content).toEqual({
-                "body": "> <myfakeuser> Replying to this\n\n<i><b>hello</b> world</i>",
-                "format": "org.matrix.custom.html",
-                "formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
-                                    " <a href=\"https://matrix.to/#/myfakeuser\">myfakeuser</a>"+
-                                    "<br>Replying to this</blockquote></mx-reply><i><b>hello</b> world</i>",
-                "msgtype": "m.text",
-                "m.relates_to": {
-                    "m.in_reply_to": {
-                        "event_id": mockEvent.getId(),
-                    },
-                },
-            });
-        });
-
-        it("Should add relation to message", () => {
-            // When
-            const relation = {
-                rel_type: "m.thread",
-                event_id: "myFakeThreadId",
-            };
-            const content = createMessageContent(message, { permalinkCreator, relation });
-
-            // Then
-            expect(content).toEqual({
-                "body": message,
-                "format": "org.matrix.custom.html",
-                "formatted_body": message,
-                "msgtype": "m.text",
-                "m.relates_to": {
-                    "event_id": "myFakeThreadId",
-                    "rel_type": "m.thread",
-                },
-            });
-        });
+    afterEach(() => {
+        jest.resetAllMocks();
     });
 
     describe('sendMessage', () => {
-        const mockClient = createTestClient();
-        const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
-        mockRoom.findEventById = jest.fn(eventId => {
-            return eventId === mockEvent.getId() ? mockEvent : null;
-        });
-
-        const defaultRoomContext: IRoomState = {
-            room: mockRoom,
-            roomLoading: true,
-            peekLoading: false,
-            shouldPeek: true,
-            membersLoaded: false,
-            numUnreadMessages: 0,
-            canPeek: false,
-            showApps: false,
-            isPeeking: false,
-            showRightPanel: true,
-            joining: false,
-            atEndOfLiveTimeline: true,
-            showTopUnreadMessagesBar: false,
-            statusBarVisible: false,
-            canReact: false,
-            canSendMessages: false,
-            layout: Layout.Group,
-            lowBandwidth: false,
-            alwaysShowTimestamps: false,
-            showTwelveHourTimestamps: false,
-            readMarkerInViewThresholdMs: 3000,
-            readMarkerOutOfViewThresholdMs: 30000,
-            showHiddenEvents: false,
-            showReadReceipts: true,
-            showRedactions: true,
-            showJoinLeaves: true,
-            showAvatarChanges: true,
-            showDisplaynameChanges: true,
-            matrixClientIsReady: false,
-            timelineRenderingType: TimelineRenderingType.Room,
-            liveTimeline: undefined,
-            canSelfRedact: false,
-            resizing: false,
-            narrow: false,
-            activeCall: null,
-        };
-
-        const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
-
         it('Should not send empty html message', async () => {
             // When
             await sendMessage('', { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
@@ -231,4 +148,78 @@ describe('message', () => {
             );
         });
     });
+
+    describe('editMessage', () => {
+        const editorStateTransfer = new EditorStateTransfer(mockEvent);
+
+        it('Should cancel editing and ask for event removal when message is empty', async () => {
+            // When
+            const mockCreateRedactEventDialog = jest.spyOn(ConfirmRedactDialog, 'createRedactEventDialog');
+
+            const mockEvent = mkEvent({
+                type: "m.room.message",
+                room: 'myfakeroom',
+                user: 'myfakeuser',
+                content: { "msgtype": "m.text", "body": "Replying to this" },
+                event: true,
+            });
+            const replacingEvent = mkEvent({
+                type: "m.room.message",
+                room: 'myfakeroom',
+                user: 'myfakeuser',
+                content: { "msgtype": "m.text", "body": "ReplacingEvent" },
+                event: true,
+            });
+            replacingEvent.setStatus(EventStatus.QUEUED);
+            mockEvent.makeReplaced(replacingEvent);
+            const editorStateTransfer = new EditorStateTransfer(mockEvent);
+
+            await editMessage('', { roomContext: defaultRoomContext, mxClient: mockClient, editorStateTransfer });
+
+            // Then
+            expect(mockClient.sendMessage).toBeCalledTimes(0);
+            expect(mockClient.cancelPendingEvent).toBeCalledTimes(1);
+            expect(mockCreateRedactEventDialog).toBeCalledTimes(1);
+            expect(spyDispatcher).toBeCalledTimes(0);
+        });
+
+        it('Should do nothing if the content is unmodified', async () => {
+            // When
+            await editMessage(
+                mockEvent.getContent().body,
+                { roomContext: defaultRoomContext, mxClient: mockClient, editorStateTransfer });
+
+            // Then
+            expect(mockClient.sendMessage).toBeCalledTimes(0);
+        });
+
+        it('Should send a message when the content is modified', async () => {
+            // When
+            const newMessage = `${mockEvent.getContent().body} new content`;
+            await editMessage(
+                newMessage,
+                { roomContext: defaultRoomContext, mxClient: mockClient, editorStateTransfer });
+
+            // Then
+            const { msgtype, format } = mockEvent.getContent();
+            const expectedContent = {
+                "body": newMessage,
+                "formatted_body": ` * ${newMessage}`,
+                "m.new_content": {
+                    "body": "Replying to this new content",
+                    "format": "org.matrix.custom.html",
+                    "formatted_body": "Replying to this new content",
+                    "msgtype": "m.text",
+                },
+                "m.relates_to": {
+                    "event_id": mockEvent.getId(),
+                    "rel_type": "m.replace",
+                },
+                msgtype,
+                format,
+            };
+            expect(mockClient.sendMessage).toBeCalledWith(mockEvent.getRoomId(), null, expectedContent);
+            expect(spyDispatcher).toBeCalledWith({ action: 'message_sent' });
+        });
+    });
 });
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index 4549190600d..4cc2d1e0dee 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -178,6 +178,7 @@ export function createTestClient(): MatrixClient {
         sendToDevice: jest.fn().mockResolvedValue(undefined),
         queueToDevice: jest.fn().mockResolvedValue(undefined),
         encryptAndSendToDevices: jest.fn().mockResolvedValue(undefined),
+        cancelPendingEvent: jest.fn(),
 
         getMediaHandler: jest.fn().mockReturnValue({
             setVideoInput: jest.fn(),

From edecc451ddc727ba93f426898c860eef1480b3e8 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 24 Oct 2022 14:41:11 +0200
Subject: [PATCH 045/113] Fix MessageCompoer-test

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

diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index 26156987600..066d97e683c 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -39,7 +39,7 @@ import { SendMessageComposer } from "../../../../src/components/views/rooms/Send
 import { E2EStatus } from "../../../../src/utils/ShieldUtils";
 import { addTextToComposer } from "../../../test-utils/composer";
 import UIStore, { UI_EVENTS } from "../../../../src/stores/UIStore";
-import { WysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
+import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer";
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
 // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
@@ -346,14 +346,14 @@ describe("MessageComposer", () => {
         });
     });
 
-    it('should render WysiwygComposer', () => {
+    it('should render SendWysiwygComposer', () => {
         const room = mkStubRoom("!roomId:server", "Room 1", cli);
 
         SettingsStore.setValue("feature_wysiwyg_composer", null, SettingLevel.DEVICE, true);
         const wrapper = wrapAndRender({ room });
 
         SettingsStore.setValue("feature_wysiwyg_composer", null, SettingLevel.DEVICE, false);
-        expect(wrapper.find(WysiwygComposer)).toBeTruthy();
+        expect(wrapper.find(SendWysiwygComposer)).toBeTruthy();
     });
 });
 

From daf097e123969440c45e95c1bd4e6463d5703d76 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 24 Oct 2022 09:03:05 -0400
Subject: [PATCH 046/113] Fix joining calls without audio or video inputs
 (#9486)

The lobby view was requesting a stream with both video and audio, even if the system lacked video or audio devices. Requesting one of audio or video is enough to get all device labels.
---
 src/components/views/voip/CallView.tsx | 50 +++++++++++++-------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index ea5d3c1e79d..f003fdc6ca4 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -33,7 +33,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AppTile from "../elements/AppTile";
 import { _t } from "../../../languageHandler";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
-import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
+import MediaDeviceHandler from "../../../MediaDeviceHandler";
 import { CallStore } from "../../../stores/CallStore";
 import IconizedContextMenu, {
     IconizedContextMenuOption,
@@ -141,36 +141,38 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabled, joinCallBu
     }, [videoMuted, setVideoMuted]);
 
     const [videoStream, audioInputs, videoInputs] = useAsyncMemo(async () => {
-        let previewStream: MediaStream;
+        let devices = await MediaDeviceHandler.getDevices();
+
+        // We get the preview stream before requesting devices: this is because
+        // we need (in some browsers) an active media stream in order to get
+        // non-blank labels for the devices.
+        let stream: MediaStream | null = null;
         try {
-            // We get the preview stream before requesting devices: this is because
-            // we need (in some browsers) an active media stream in order to get
-            // non-blank labels for the devices. According to the docs, we
-            // need a stream of each type (audio + video) if we want to enumerate
-            // audio & video devices, although this didn't seem to be the case
-            // in practice for me. We request both anyway.
-            // For similar reasons, we also request a stream even if video is muted,
-            // which could be a bit strange but allows us to get the device list
-            // reliably. One option could be to try & get devices without a stream,
-            // then try again with a stream if we get blank deviceids, but... ew.
-            previewStream = await navigator.mediaDevices.getUserMedia({
-                video: { deviceId: videoInputId },
-                audio: { deviceId: MediaDeviceHandler.getAudioInput() },
-            });
+            if (devices.audioinput.length > 0) {
+                // Holding just an audio stream will be enough to get us all device labels, so
+                // if video is muted, don't bother requesting video.
+                stream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                    video: !videoMuted && devices.videoinput.length > 0 && { deviceId: videoInputId },
+                });
+            } else if (devices.videoinput.length > 0) {
+                // We have to resort to a video stream, even if video is supposed to be muted.
+                stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: videoInputId } });
+            }
         } catch (e) {
             logger.error(`Failed to get stream for device ${videoInputId}`, e);
         }
 
-        const devices = await MediaDeviceHandler.getDevices();
+        // Refresh the devices now that we hold a stream
+        if (stream !== null) devices = await MediaDeviceHandler.getDevices();
 
-        // If video is muted, we don't actually want the stream, so we can get rid of
-        // it now.
+        // If video is muted, we don't actually want the stream, so we can get rid of it now.
         if (videoMuted) {
-            previewStream.getTracks().forEach(t => t.stop());
-            previewStream = undefined;
+            stream?.getTracks().forEach(t => t.stop());
+            stream = null;
         }
 
-        return [previewStream, devices[MediaDeviceKindEnum.AudioInput], devices[MediaDeviceKindEnum.VideoInput]];
+        return [stream, devices.audioinput, devices.videoinput];
     }, [videoInputId, videoMuted], [null, [], []]);
 
     const setAudioInput = useCallback((device: MediaDeviceInfo) => {
@@ -188,7 +190,7 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabled, joinCallBu
             videoElement.play();
 
             return () => {
-                videoStream?.getTracks().forEach(track => track.stop());
+                videoStream.getTracks().forEach(track => track.stop());
                 videoElement.srcObject = null;
             };
         }
@@ -358,7 +360,7 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
         lobby = <Lobby
             room={room}
             connect={connect}
-            joinCallButtonTooltip={joinCallButtonTooltip}
+            joinCallButtonTooltip={joinCallButtonTooltip ?? undefined}
             joinCallButtonDisabled={joinCallButtonDisabled}
         >
             { facePile }

From fda4dabf6d79ac5badfd736cd652b56cd59dd710 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 24 Oct 2022 15:03:18 +0200
Subject: [PATCH 047/113] Fix MessageComposer test

---
 src/components/views/rooms/MessageComposer.tsx       |  2 +-
 test/components/views/rooms/MessageComposer-test.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 60bc5ee6410..674635d8961 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -102,7 +102,7 @@ interface IState {
     showVoiceBroadcastButton: boolean;
 }
 
-class MessageComposer extends React.Component<IProps, IState> {
+export class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private messageComposerInput = createRef<SendMessageComposerClass>();
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx
index 066d97e683c..debeb7b5e63 100644
--- a/test/components/views/rooms/MessageComposer-test.tsx
+++ b/test/components/views/rooms/MessageComposer-test.tsx
@@ -21,7 +21,8 @@ import { MatrixEvent, MsgType, RoomMember } from "matrix-js-sdk/src/matrix";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
 
 import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../test-utils";
-import MessageComposer from "../../../../src/components/views/rooms/MessageComposer";
+import MessageComposer, { MessageComposer as MessageComposerClass }
+    from "../../../../src/components/views/rooms/MessageComposer";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import RoomContext from "../../../../src/contexts/RoomContext";
@@ -106,7 +107,7 @@ describe("MessageComposer", () => {
             it("should call notifyTimelineHeightChanged() for the same context", () => {
                 dis.dispatch({
                     action: "reply_to_event",
-                    context: (wrapper.instance as unknown as MessageComposer).context,
+                    context: (wrapper.instance as unknown as MessageComposerClass).context,
                 });
                 wrapper.update();
 
@@ -207,7 +208,7 @@ describe("MessageComposer", () => {
                 let stateBefore: any;
 
                 beforeEach(() => {
-                    wrapper = wrapAndRender({ room });
+                    wrapper = wrapAndRender({ room }).children();
                     stateBefore = { ...wrapper.instance().state };
                     resizeCallback("test", {});
                     wrapper.update();
@@ -220,7 +221,8 @@ describe("MessageComposer", () => {
 
             describe("when a resize to narrow event occurred in UIStore", () => {
                 beforeEach(() => {
-                    wrapper = wrapAndRender({ room }, true, true);
+                    wrapper = wrapAndRender({ room }, true, true).children();
+
                     wrapper.setState({
                         isMenuOpen: true,
                         isStickerPickerOpen: true,
@@ -240,7 +242,7 @@ describe("MessageComposer", () => {
 
             describe("when a resize to non-narrow event occurred in UIStore", () => {
                 beforeEach(() => {
-                    wrapper = wrapAndRender({ room }, true, false);
+                    wrapper = wrapAndRender({ room }, true, false).children();
                     wrapper.setState({
                         isMenuOpen: true,
                         isStickerPickerOpen: true,

From 3aead6f9442b5b3805ea2b7665a93eb9045cb8f4 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 24 Oct 2022 15:25:03 +0200
Subject: [PATCH 048/113] Update @matrix.org/matrix-wysiwyg dependency

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

diff --git a/package.json b/package.json
index f0ab2c266b4..3973d22fb8b 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@matrix-org/analytics-events": "^0.2.0",
-    "@matrix-org/matrix-wysiwyg": "^0.3.0",
+    "@matrix-org/matrix-wysiwyg": "^0.3.2",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
diff --git a/yarn.lock b/yarn.lock
index add14d4c3e5..d1e87319af0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1660,10 +1660,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.2.0.tgz#453925c939ecdd5ca6c797d293deb8cf0933f1b8"
   integrity sha512-+0/Sydm4MNOcqd8iySJmojVPB74Axba4BXlwTsiKmL5fgYqdUkwmqkO39K7Pn8i+a+8pg11oNvBPkpWs3O5Qww==
 
-"@matrix-org/matrix-wysiwyg@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.3.0.tgz#9a0b996c47fbb63fb235a0810b678158b253f721"
-  integrity sha512-m33qOo64VIZRqzMZ5vJ9m2gYns+sCaFFy3R5Nn9JfDnldQ1oh+ra611I9keFmO/Ls6548ZN8hUkv+49Ua3iBHA==
+"@matrix-org/matrix-wysiwyg@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.3.2.tgz#586f3ad2f4a7bf39d8e2063630c52294c877bcd6"
+  integrity sha512-Q6Ntj2q1/7rVUlro94snn9eZy/3EbrGqaq5nqNMbttXcnFzYtgligDV1avViB4Um6ZRdDOxnQEPkMca/SqYSmw==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
   version "3.2.8"

From 4d9d07e7fd53a4e2a5fbcffd8b1b36b3b4e5b076 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Mon, 24 Oct 2022 15:27:34 +0200
Subject: [PATCH 049/113] Update date in header

---
 res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss | 3 +--
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss   | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
index 8c245bc90f9..73e5fef6e9a 100644
--- a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 88fa080e23d..6a6b68af7c6 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

From d702f4a291f0158c8fa5f9c6b0ed679cef4322ec Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 24 Oct 2022 16:06:58 +0200
Subject: [PATCH 050/113] When start listening to a broadcast, pause the others
 (#9489)

---
 .../models/VoiceBroadcastPlayback.ts          |  17 ++-
 .../stores/VoiceBroadcastPlaybacksStore.ts    |  56 ++++++++-
 .../models/VoiceBroadcastPlayback-test.ts     |  67 +++++++----
 .../VoiceBroadcastPlaybacksStore-test.ts      | 107 +++++++++++++-----
 4 files changed, 186 insertions(+), 61 deletions(-)

diff --git a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
index 641deb66ad1..dcecaa72820 100644
--- a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
@@ -47,7 +47,10 @@ export enum VoiceBroadcastPlaybackEvent {
 
 interface EventMap {
     [VoiceBroadcastPlaybackEvent.LengthChanged]: (length: number) => void;
-    [VoiceBroadcastPlaybackEvent.StateChanged]: (state: VoiceBroadcastPlaybackState) => void;
+    [VoiceBroadcastPlaybackEvent.StateChanged]: (
+        state: VoiceBroadcastPlaybackState,
+        playback: VoiceBroadcastPlayback
+    ) => void;
     [VoiceBroadcastPlaybackEvent.InfoStateChanged]: (state: VoiceBroadcastInfoState) => void;
 }
 
@@ -217,14 +220,20 @@ export class VoiceBroadcastPlayback
     }
 
     public pause(): void {
-        if (!this.currentlyPlaying) return;
+        // stopped voice broadcasts cannot be paused
+        if (this.getState() === VoiceBroadcastPlaybackState.Stopped) return;
 
         this.setState(VoiceBroadcastPlaybackState.Paused);
+        if (!this.currentlyPlaying) return;
         this.currentlyPlaying.pause();
     }
 
     public resume(): void {
-        if (!this.currentlyPlaying) return;
+        if (!this.currentlyPlaying) {
+            // no playback to resume, start from the beginning
+            this.start();
+            return;
+        }
 
         this.setState(VoiceBroadcastPlaybackState.Playing);
         this.currentlyPlaying.play();
@@ -260,7 +269,7 @@ export class VoiceBroadcastPlayback
         }
 
         this.state = state;
-        this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state);
+        this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state, this);
     }
 
     public getInfoState(): VoiceBroadcastInfoState {
diff --git a/src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts b/src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts
index 38d774e088a..03378d9492a 100644
--- a/src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts
+++ b/src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts
@@ -17,7 +17,8 @@ limitations under the License.
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 
-import { VoiceBroadcastPlayback } from "..";
+import { VoiceBroadcastPlayback, VoiceBroadcastPlaybackEvent, VoiceBroadcastPlaybackState } from "..";
+import { IDestroyable } from "../../utils/IDestroyable";
 
 export enum VoiceBroadcastPlaybacksStoreEvent {
     CurrentChanged = "current_changed",
@@ -28,10 +29,16 @@ interface EventMap {
 }
 
 /**
- * This store provides access to the current and specific Voice Broadcast playbacks.
+ * This store manages VoiceBroadcastPlaybacks:
+ * - access the currently playing voice broadcast
+ * - ensures that only once broadcast is playing at a time
  */
-export class VoiceBroadcastPlaybacksStore extends TypedEventEmitter<VoiceBroadcastPlaybacksStoreEvent, EventMap> {
+export class VoiceBroadcastPlaybacksStore
+    extends TypedEventEmitter<VoiceBroadcastPlaybacksStoreEvent, EventMap>
+    implements IDestroyable {
     private current: VoiceBroadcastPlayback | null;
+
+    /** Playbacks indexed by their info event id. */
     private playbacks = new Map<string, VoiceBroadcastPlayback>();
 
     public constructor() {
@@ -42,7 +49,7 @@ export class VoiceBroadcastPlaybacksStore extends TypedEventEmitter<VoiceBroadca
         if (this.current === current) return;
 
         this.current = current;
-        this.playbacks.set(current.infoEvent.getId(), current);
+        this.addPlayback(current);
         this.emit(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, current);
     }
 
@@ -54,12 +61,51 @@ export class VoiceBroadcastPlaybacksStore extends TypedEventEmitter<VoiceBroadca
         const infoEventId = infoEvent.getId();
 
         if (!this.playbacks.has(infoEventId)) {
-            this.playbacks.set(infoEventId, new VoiceBroadcastPlayback(infoEvent, client));
+            this.addPlayback(new VoiceBroadcastPlayback(infoEvent, client));
         }
 
         return this.playbacks.get(infoEventId);
     }
 
+    private addPlayback(playback: VoiceBroadcastPlayback): void {
+        const infoEventId = playback.infoEvent.getId();
+
+        if (this.playbacks.has(infoEventId)) return;
+
+        this.playbacks.set(infoEventId, playback);
+        playback.on(VoiceBroadcastPlaybackEvent.StateChanged, this.onPlaybackStateChanged);
+    }
+
+    private onPlaybackStateChanged = (
+        state: VoiceBroadcastPlaybackState,
+        playback: VoiceBroadcastPlayback,
+    ): void => {
+        if ([
+            VoiceBroadcastPlaybackState.Buffering,
+            VoiceBroadcastPlaybackState.Playing,
+        ].includes(state)) {
+            this.pauseExcept(playback);
+        }
+    };
+
+    private pauseExcept(playbackNotToPause: VoiceBroadcastPlayback): void {
+        for (const playback of this.playbacks.values()) {
+            if (playback !== playbackNotToPause) {
+                playback.pause();
+            }
+        }
+    }
+
+    public destroy(): void {
+        this.removeAllListeners();
+
+        for (const playback of this.playbacks.values()) {
+            playback.off(VoiceBroadcastPlaybackEvent.StateChanged, this.onPlaybackStateChanged);
+        }
+
+        this.playbacks = new Map();
+    }
+
     public static readonly _instance = new VoiceBroadcastPlaybacksStore();
 
     /**
diff --git a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
index 7e7722321cd..ec28a95fd6a 100644
--- a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
@@ -74,7 +74,25 @@ describe("VoiceBroadcastPlayback", () => {
 
     const itShouldEmitAStateChangedEvent = (state: VoiceBroadcastPlaybackState) => {
         it(`should emit a ${state} state changed event`, () => {
-            expect(mocked(onStateChanged)).toHaveBeenCalledWith(state);
+            expect(mocked(onStateChanged)).toHaveBeenCalledWith(state, playback);
+        });
+    };
+
+    const startPlayback = () => {
+        beforeEach(async () => {
+            await playback.start();
+        });
+    };
+
+    const pausePlayback = () => {
+        beforeEach(() => {
+            playback.pause();
+        });
+    };
+
+    const stopPlayback = () => {
+        beforeEach(() => {
+            playback.stop();
         });
     };
 
@@ -180,14 +198,28 @@ describe("VoiceBroadcastPlayback", () => {
         });
 
         describe("and calling start", () => {
-            beforeEach(async () => {
-                await playback.start();
-            });
+            startPlayback();
 
             it("should be in buffering state", () => {
                 expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Buffering);
             });
 
+            describe("and calling stop", () => {
+                stopPlayback();
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+                describe("and calling pause", () => {
+                    pausePlayback();
+                    // stopped voice broadcasts cannot be paused
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+                });
+            });
+
+            describe("and calling pause", () => {
+                pausePlayback();
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
+            });
+
             describe("and receiving the first chunk", () => {
                 beforeEach(() => {
                     // TODO Michael W: Use RelationsHelper
@@ -212,9 +244,7 @@ describe("VoiceBroadcastPlayback", () => {
         });
 
         describe("and calling start", () => {
-            beforeEach(async () => {
-                await playback.start();
-            });
+            startPlayback();
 
             it("should play the last chunk", () => {
                 // assert that the last chunk is played first
@@ -258,10 +288,7 @@ describe("VoiceBroadcastPlayback", () => {
             });
 
             describe("and calling start", () => {
-                beforeEach(async () => {
-                    await playback.start();
-                });
-
+                startPlayback();
                 itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Buffering);
             });
         });
@@ -278,9 +305,7 @@ describe("VoiceBroadcastPlayback", () => {
             itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
 
             describe("and calling start", () => {
-                beforeEach(async () => {
-                    await playback.start();
-                });
+                startPlayback();
 
                 itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
 
@@ -303,13 +328,15 @@ describe("VoiceBroadcastPlayback", () => {
                 });
 
                 describe("and calling pause", () => {
-                    beforeEach(() => {
-                        playback.pause();
-                    });
-
+                    pausePlayback();
                     itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
                     itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Paused);
                 });
+
+                describe("and calling stop", () => {
+                    stopPlayback();
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+                });
             });
 
             describe("and calling toggle for the first time", () => {
@@ -337,9 +364,7 @@ describe("VoiceBroadcastPlayback", () => {
             });
 
             describe("and calling stop", () => {
-                beforeEach(() => {
-                    playback.stop();
-                });
+                stopPlayback();
 
                 itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
 
diff --git a/test/voice-broadcast/stores/VoiceBroadcastPlaybacksStore-test.ts b/test/voice-broadcast/stores/VoiceBroadcastPlaybacksStore-test.ts
index 8b994ef9c6c..07c7e2fe63c 100644
--- a/test/voice-broadcast/stores/VoiceBroadcastPlaybacksStore-test.ts
+++ b/test/voice-broadcast/stores/VoiceBroadcastPlaybacksStore-test.ts
@@ -22,24 +22,24 @@ import {
 } from "matrix-js-sdk/src/matrix";
 
 import {
-    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
     VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
     VoiceBroadcastPlaybacksStore,
     VoiceBroadcastPlaybacksStoreEvent,
+    VoiceBroadcastPlaybackState,
 } from "../../../src/voice-broadcast";
-import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
-
-jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastPlayback", () => ({
-    ...jest.requireActual("../../../src/voice-broadcast/models/VoiceBroadcastPlayback") as object,
-    VoiceBroadcastPlayback: jest.fn().mockImplementation((infoEvent: MatrixEvent) => ({ infoEvent })),
-}));
+import { mkStubRoom, stubClient } from "../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
 
 describe("VoiceBroadcastPlaybacksStore", () => {
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let room: Room;
-    let infoEvent: MatrixEvent;
-    let playback: VoiceBroadcastPlayback;
+    let infoEvent1: MatrixEvent;
+    let infoEvent2: MatrixEvent;
+    let playback1: VoiceBroadcastPlayback;
+    let playback2: VoiceBroadcastPlayback;
     let playbacks: VoiceBroadcastPlaybacksStore;
     let onCurrentChanged: (playback: VoiceBroadcastPlayback) => void;
 
@@ -51,17 +51,26 @@ describe("VoiceBroadcastPlaybacksStore", () => {
                 return room;
             }
         });
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            user: client.getUserId(),
-            room: roomId,
-            content: {},
-        });
-        playback = {
-            infoEvent,
-        } as unknown as VoiceBroadcastPlayback;
+
+        infoEvent1 = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+        infoEvent2 = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+        playback1 = new VoiceBroadcastPlayback(infoEvent1, client);
+        jest.spyOn(playback1, "off");
+        playback2 = new VoiceBroadcastPlayback(infoEvent2, client);
+        jest.spyOn(playback2, "off");
+
         playbacks = new VoiceBroadcastPlaybacksStore();
+        jest.spyOn(playbacks, "removeAllListeners");
         onCurrentChanged = jest.fn();
         playbacks.on(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, onCurrentChanged);
     });
@@ -72,31 +81,69 @@ describe("VoiceBroadcastPlaybacksStore", () => {
 
     describe("when setting a current Voice Broadcast playback", () => {
         beforeEach(() => {
-            playbacks.setCurrent(playback);
+            playbacks.setCurrent(playback1);
         });
 
         it("should return it as current", () => {
-            expect(playbacks.getCurrent()).toBe(playback);
+            expect(playbacks.getCurrent()).toBe(playback1);
         });
 
         it("should return it by id", () => {
-            expect(playbacks.getByInfoEvent(infoEvent, client)).toBe(playback);
+            expect(playbacks.getByInfoEvent(infoEvent1, client)).toBe(playback1);
         });
 
         it("should emit a CurrentChanged event", () => {
-            expect(onCurrentChanged).toHaveBeenCalledWith(playback);
+            expect(onCurrentChanged).toHaveBeenCalledWith(playback1);
         });
 
         describe("and setting the same again", () => {
             beforeEach(() => {
                 mocked(onCurrentChanged).mockClear();
-                playbacks.setCurrent(playback);
+                playbacks.setCurrent(playback1);
             });
 
             it("should not emit a CurrentChanged event", () => {
                 expect(onCurrentChanged).not.toHaveBeenCalled();
             });
         });
+
+        describe("and setting another playback and start both", () => {
+            beforeEach(() => {
+                playbacks.setCurrent(playback2);
+                playback1.start();
+                playback2.start();
+            });
+
+            it("should set playback1 to paused", () => {
+                expect(playback1.getState()).toBe(VoiceBroadcastPlaybackState.Paused);
+            });
+
+            it("should set playback2 to buffering", () => {
+                // buffering because there are no chunks, yet
+                expect(playback2.getState()).toBe(VoiceBroadcastPlaybackState.Buffering);
+            });
+
+            describe("and calling destroy", () => {
+                beforeEach(() => {
+                    playbacks.destroy();
+                });
+
+                it("should remove all listeners", () => {
+                    expect(playbacks.removeAllListeners).toHaveBeenCalled();
+                });
+
+                it("should deregister the listeners on the playbacks", () => {
+                    expect(playback1.off).toHaveBeenCalledWith(
+                        VoiceBroadcastPlaybackEvent.StateChanged,
+                        expect.any(Function),
+                    );
+                    expect(playback2.off).toHaveBeenCalledWith(
+                        VoiceBroadcastPlaybackEvent.StateChanged,
+                        expect.any(Function),
+                    );
+                });
+            });
+        });
     });
 
     describe("getByInfoEventId", () => {
@@ -104,24 +151,22 @@ describe("VoiceBroadcastPlaybacksStore", () => {
 
         describe("when retrieving a known playback", () => {
             beforeEach(() => {
-                playbacks.setCurrent(playback);
-                returnedPlayback = playbacks.getByInfoEvent(infoEvent, client);
+                playbacks.setCurrent(playback1);
+                returnedPlayback = playbacks.getByInfoEvent(infoEvent1, client);
             });
 
             it("should return the playback", () => {
-                expect(returnedPlayback).toBe(playback);
+                expect(returnedPlayback).toBe(playback1);
             });
         });
 
         describe("when retrieving an unknown playback", () => {
             beforeEach(() => {
-                returnedPlayback = playbacks.getByInfoEvent(infoEvent, client);
+                returnedPlayback = playbacks.getByInfoEvent(infoEvent1, client);
             });
 
             it("should return the playback", () => {
-                expect(returnedPlayback).toEqual({
-                    infoEvent,
-                });
+                expect(returnedPlayback.infoEvent).toBe(infoEvent1);
             });
         });
     });

From 1497089b92b1a9c919bed5ca6c6f6ae916c2d5e3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 24 Oct 2022 15:30:49 +0100
Subject: [PATCH 051/113] Send Content-Type: application/json header for
 integration manager /register API (#9490)

---
 src/ScalarAuthClient.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ScalarAuthClient.ts b/src/ScalarAuthClient.ts
index 5dacd079734..3ee1e7c15d9 100644
--- a/src/ScalarAuthClient.ts
+++ b/src/ScalarAuthClient.ts
@@ -190,6 +190,9 @@ export default class ScalarAuthClient {
         const res = await fetch(scalarRestUrl, {
             method: "POST",
             body: JSON.stringify(openidTokenObject),
+            headers: {
+                "Content-Type": "application/json",
+            },
         });
 
         if (!res.ok) {

From e4c44dc282d68b76b7261e4ad59bfd231c705260 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 24 Oct 2022 13:49:54 -0400
Subject: [PATCH 052/113] Auto-approve rageshake event capabilities for virtual
 Element Call widgets (#9492)

---
 src/stores/widgets/StopGapWidgetDriver.ts       | 6 ++++++
 test/stores/widgets/StopGapWidgetDriver-test.ts | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index ff2619ad594..e1fb1d6729a 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -113,6 +113,12 @@ export class StopGapWidgetDriver extends WidgetDriver {
             this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
             this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
 
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forRoomEvent(EventDirection.Send, "org.matrix.rageshake_request").raw,
+            );
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forRoomEvent(EventDirection.Receive, "org.matrix.rageshake_request").raw,
+            );
             this.allowedCapabilities.add(
                 WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw,
             );
diff --git a/test/stores/widgets/StopGapWidgetDriver-test.ts b/test/stores/widgets/StopGapWidgetDriver-test.ts
index 0fd2f18be79..7adf38a8536 100644
--- a/test/stores/widgets/StopGapWidgetDriver-test.ts
+++ b/test/stores/widgets/StopGapWidgetDriver-test.ts
@@ -66,6 +66,8 @@ describe("StopGapWidgetDriver", () => {
             "m.always_on_screen",
             "town.robin.msc3846.turn_servers",
             "org.matrix.msc2762.timeline:!1:example.org",
+            "org.matrix.msc2762.send.event:org.matrix.rageshake_request",
+            "org.matrix.msc2762.receive.event:org.matrix.rageshake_request",
             "org.matrix.msc2762.receive.state_event:m.room.member",
             "org.matrix.msc2762.send.state_event:org.matrix.msc3401.call",
             "org.matrix.msc2762.receive.state_event:org.matrix.msc3401.call",

From 37e613bb05d4e9bb9d83d9910bd1e46151e7341a Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Mon, 24 Oct 2022 18:54:24 +0100
Subject: [PATCH 053/113] Fix embedded Element Call screen sharing (#9485)

* Fix embedded Element Call screen sharing

Makes it a request in each direction rather than a request and reply
since replies to requests time out and so can't wait for user interaction.

* Fix tests
---
 src/models/Call.ts                         | 21 ++++++++-----
 src/stores/widgets/ElementWidgetActions.ts | 15 +++++++++-
 test/models/Call-test.ts                   | 34 +++++++++++++++-------
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/models/Call.ts b/src/models/Call.ts
index ed9e227d245..c3ef2e6775d 100644
--- a/src/models/Call.ts
+++ b/src/models/Call.ts
@@ -816,7 +816,7 @@ export class ElementCall extends Call {
         this.messaging!.on(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
         this.messaging!.on(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
         this.messaging!.on(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
-        this.messaging!.on(`action:${ElementWidgetActions.Screenshare}`, this.onScreenshare);
+        this.messaging!.on(`action:${ElementWidgetActions.ScreenshareRequest}`, this.onScreenshareRequest);
     }
 
     protected async performDisconnection(): Promise<void> {
@@ -832,7 +832,7 @@ export class ElementCall extends Call {
         this.messaging!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
         this.messaging!.off(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
         this.messaging!.off(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
-        this.messaging!.off(`action:${ElementWidgetActions.Screenshare}`, this.onSpotlightLayout);
+        this.messaging!.off(`action:${ElementWidgetActions.ScreenshareRequest}`, this.onScreenshareRequest);
         super.setDisconnected();
     }
 
@@ -952,19 +952,24 @@ export class ElementCall extends Call {
         await this.messaging!.transport.reply(ev.detail, {}); // ack
     };
 
-    private onScreenshare = async (ev: CustomEvent<IWidgetApiRequest>) => {
+    private onScreenshareRequest = async (ev: CustomEvent<IWidgetApiRequest>) => {
         ev.preventDefault();
 
         if (PlatformPeg.get().supportsDesktopCapturer()) {
+            await this.messaging!.transport.reply(ev.detail, { pending: true });
+
             const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
             const [source] = await finished;
 
-            await this.messaging!.transport.reply(ev.detail, {
-                failed: !source,
-                desktopCapturerSourceId: source,
-            });
+            if (source) {
+                await this.messaging!.transport.send(ElementWidgetActions.ScreenshareStart, {
+                    desktopCapturerSourceId: source,
+                });
+            } else {
+                await this.messaging!.transport.send(ElementWidgetActions.ScreenshareStop, {});
+            }
         } else {
-            await this.messaging!.transport.reply(ev.detail, {});
+            await this.messaging!.transport.reply(ev.detail, { pending: false });
         }
     };
 }
diff --git a/src/stores/widgets/ElementWidgetActions.ts b/src/stores/widgets/ElementWidgetActions.ts
index fa60b9ea82e..1d0437a2cea 100644
--- a/src/stores/widgets/ElementWidgetActions.ts
+++ b/src/stores/widgets/ElementWidgetActions.ts
@@ -26,10 +26,23 @@ export enum ElementWidgetActions {
     MuteVideo = "io.element.mute_video",
     UnmuteVideo = "io.element.unmute_video",
     StartLiveStream = "im.vector.start_live_stream",
+
+    // Element Call -> host requesting to start a screenshare
+    // (ie. expects a ScreenshareStart once the user has picked a source)
+    // replies with { pending } where pending is true if the host has asked
+    // the user to choose a window and false if not (ie. if the host isn't
+    // running within Electron)
+    ScreenshareRequest = "io.element.screenshare_request",
+    // host -> Element Call telling EC to start screen sharing with
+    // the given source
+    ScreenshareStart = "io.element.screenshare_start",
+    // host -> Element Call telling EC to stop screen sharing, or that
+    // the user cancelled when selecting a source after a ScreenshareRequest
+    ScreenshareStop = "io.element.screenshare_stop",
+
     // Actions for switching layouts
     TileLayout = "io.element.tile_layout",
     SpotlightLayout = "io.element.spotlight_layout",
-    Screenshare = "io.element.screenshare",
 
     OpenIntegrationManager = "integration_manager_open",
 
diff --git a/test/models/Call-test.ts b/test/models/Call-test.ts
index 3134adf111d..df959a44a01 100644
--- a/test/models/Call-test.ts
+++ b/test/models/Call-test.ts
@@ -820,19 +820,25 @@ describe("ElementCall", () => {
                 await call.connect();
 
                 messaging.emit(
-                    `action:${ElementWidgetActions.Screenshare}`,
+                    `action:${ElementWidgetActions.ScreenshareRequest}`,
                     new CustomEvent("widgetapirequest", { detail: {} }),
                 );
 
-                waitFor(() => {
+                await waitFor(() => {
                     expect(messaging!.transport.reply).toHaveBeenCalledWith(
                         expect.objectContaining({}),
-                        expect.objectContaining({ desktopCapturerSourceId: sourceId }),
+                        expect.objectContaining({ pending: true }),
+                    );
+                });
+
+                await waitFor(() => {
+                    expect(messaging!.transport.send).toHaveBeenCalledWith(
+                        "io.element.screenshare_start", expect.objectContaining({ desktopCapturerSourceId: sourceId }),
                     );
                 });
             });
 
-            it("passes failed if we couldn't get a source id", async () => {
+            it("sends ScreenshareStop if we couldn't get a source id", async () => {
                 jest.spyOn(Modal, "createDialog").mockReturnValue(
                     { finished: new Promise((r) => r([null])) } as IHandle<any[]>,
                 );
@@ -841,32 +847,38 @@ describe("ElementCall", () => {
                 await call.connect();
 
                 messaging.emit(
-                    `action:${ElementWidgetActions.Screenshare}`,
+                    `action:${ElementWidgetActions.ScreenshareRequest}`,
                     new CustomEvent("widgetapirequest", { detail: {} }),
                 );
 
-                waitFor(() => {
+                await waitFor(() => {
                     expect(messaging!.transport.reply).toHaveBeenCalledWith(
                         expect.objectContaining({}),
-                        expect.objectContaining({ failed: true }),
+                        expect.objectContaining({ pending: true }),
+                    );
+                });
+
+                await waitFor(() => {
+                    expect(messaging!.transport.send).toHaveBeenCalledWith(
+                        "io.element.screenshare_stop", expect.objectContaining({ }),
                     );
                 });
             });
 
-            it("passes an empty object if we don't support desktop capturer", async () => {
+            it("replies with pending: false if we don't support desktop capturer", async () => {
                 jest.spyOn(PlatformPeg.get(), "supportsDesktopCapturer").mockReturnValue(false);
 
                 await call.connect();
 
                 messaging.emit(
-                    `action:${ElementWidgetActions.Screenshare}`,
+                    `action:${ElementWidgetActions.ScreenshareRequest}`,
                     new CustomEvent("widgetapirequest", { detail: {} }),
                 );
 
-                waitFor(() => {
+                await waitFor(() => {
                     expect(messaging!.transport.reply).toHaveBeenCalledWith(
                         expect.objectContaining({}),
-                        expect.objectContaining({}),
+                        expect.objectContaining({ pending: false }),
                     );
                 });
             });

From d473b4ac4ae8f14cf26fe4a530b6f545af5f1fbb Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 25 Oct 2022 10:39:48 +0200
Subject: [PATCH 054/113] Device manager - confirm sign out of other sessions
 (PSG-921) (#9487)

* change testid attribute for dialog buttons to rtl friendly

* add confirm dialog for signing out sessions

* cleanup commented

* update cypress tets

* clear modals before test

* missing modal in jest tests on ci only
---
 .../e2e/settings/device-management.spec.ts    |   3 +
 .../views/elements/DialogButtons.tsx          |   4 +-
 .../settings/tabs/user/SessionManagerTab.tsx  |  24 +++
 src/i18n/strings/en_EN.json                   |   4 +-
 .../AccessSecretStorageDialog-test.tsx        |   6 +-
 .../views/dialogs/ExportDialog-test.tsx       |   4 +-
 .../ChangelogDialog-test.tsx.snap             |   4 +-
 .../__snapshots__/ExportDialog-test.tsx.snap  |  40 ++---
 .../tabs/user/SessionManagerTab-test.tsx      | 169 ++++++++++++------
 9 files changed, 174 insertions(+), 84 deletions(-)

diff --git a/cypress/e2e/settings/device-management.spec.ts b/cypress/e2e/settings/device-management.spec.ts
index 1709475e17c..da4d12e35d9 100644
--- a/cypress/e2e/settings/device-management.spec.ts
+++ b/cypress/e2e/settings/device-management.spec.ts
@@ -78,6 +78,7 @@ describe("Device manager", () => {
         cy.get('.mx_FilteredDeviceList_list .mx_FilteredDeviceList_listItem .mx_Checkbox').last().click();
         // sign out from list selection action buttons
         cy.get('[data-testid="sign-out-selection-cta"]').click();
+        cy.get('[data-testid="dialog-primary-button"]').click();
         // list updated after sign out
         cy.get('.mx_FilteredDeviceList_list').find('.mx_FilteredDeviceList_listItem').should('have.length', 1);
         // security recommendation count updated
@@ -106,6 +107,8 @@ describe("Device manager", () => {
             // sign out using the device details sign out
             cy.get('[data-testid="device-detail-sign-out-cta"]').click();
         });
+        // confirm the signout
+        cy.get('[data-testid="dialog-primary-button"]').click();
 
         // no other sessions or security recommendations sections when only one session
         cy.contains('Other sessions').should('not.exist');
diff --git a/src/components/views/elements/DialogButtons.tsx b/src/components/views/elements/DialogButtons.tsx
index bf018e14f49..522d847e1b1 100644
--- a/src/components/views/elements/DialogButtons.tsx
+++ b/src/components/views/elements/DialogButtons.tsx
@@ -82,7 +82,7 @@ export default class DialogButtons extends React.Component<IProps> {
             cancelButton = <button
                 // important: the default type is 'submit' and this button comes before the
                 // primary in the DOM so will get form submissions unless we make it not a submit.
-                data-test-id="dialog-cancel-button"
+                data-testid="dialog-cancel-button"
                 type="button"
                 onClick={this.onCancelClick}
                 className={this.props.cancelButtonClass}
@@ -104,7 +104,7 @@ export default class DialogButtons extends React.Component<IProps> {
                     { cancelButton }
                     { this.props.children }
                     <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
-                        data-test-id="dialog-primary-button"
+                        data-testid="dialog-primary-button"
                         className={primaryButtonClassName}
                         onClick={this.props.onPrimaryButtonClick}
                         autoFocus={this.props.focus}
diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
index 49ca1bdbf29..07a08ec9c4e 100644
--- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx
@@ -36,6 +36,25 @@ import LoginWithQRSection from '../../devices/LoginWithQRSection';
 import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
 import SettingsStore from '../../../../../settings/SettingsStore';
 import { useAsyncMemo } from '../../../../../hooks/useAsyncMemo';
+import QuestionDialog from '../../../dialogs/QuestionDialog';
+
+const confirmSignOut = async (sessionsToSignOutCount: number): Promise<boolean> => {
+    const { finished } = Modal.createDialog(QuestionDialog, {
+        title: _t("Sign out"),
+        description: (
+            <div>
+                <p>{ _t("Are you sure you want to sign out of %(count)s sessions?", {
+                    count: sessionsToSignOutCount,
+                }) }</p>
+            </div>
+        ),
+        cancelButton: _t('Cancel'),
+        button: _t("Sign out"),
+    });
+    const [confirmed] = await finished;
+
+    return confirmed;
+};
 
 const useSignOut = (
     matrixClient: MatrixClient,
@@ -61,6 +80,11 @@ const useSignOut = (
         if (!deviceIds.length) {
             return;
         }
+        const userConfirmedSignout = await confirmSignOut(deviceIds.length);
+        if (!userConfirmedSignout) {
+            return;
+        }
+
         try {
             setSigningOutDeviceIds([...signingOutDeviceIds, ...deviceIds]);
             await deleteDevicesWithInteractiveAuth(
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f40e1658040..a33de8ea150 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1596,6 +1596,9 @@
     "Sessions": "Sessions",
     "Where you're signed in": "Where you're signed in",
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
+    "Sign out": "Sign out",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Are you sure you want to sign out of %(count)s sessions?",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Are you sure you want to sign out of %(count)s session?",
     "Other sessions": "Other sessions",
     "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.",
     "Sidebar": "Sidebar",
@@ -1732,7 +1735,6 @@
     "Please enter verification code sent via text.": "Please enter verification code sent via text.",
     "Verification code": "Verification code",
     "Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
-    "Sign out": "Sign out",
     "Sign out all other sessions": "Sign out all other sessions",
     "Current session": "Current session",
     "Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Confirm logging out these devices by using Single Sign On to prove your identity.",
diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx b/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx
index 5503db537bc..686e5d558b4 100644
--- a/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx
+++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.tsx
@@ -20,7 +20,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { IPassphraseInfo } from 'matrix-js-sdk/src/crypto/api';
 
-import { findByTestId, getMockClientWithEventEmitter, unmockClientPeg } from '../../../test-utils';
+import { findByAttr, getMockClientWithEventEmitter, unmockClientPeg } from '../../../test-utils';
 import { findById, flushPromises } from '../../../test-utils';
 import AccessSecretStorageDialog from "../../../../src/components/views/dialogs/security/AccessSecretStorageDialog";
 
@@ -91,7 +91,7 @@ describe("AccessSecretStorageDialog", () => {
             wrapper.setProps({});
         });
 
-        const submitButton = findByTestId(wrapper, 'dialog-primary-button').at(0);
+        const submitButton = findByAttr('data-testid')(wrapper, 'dialog-primary-button').at(0);
         // submit button is enabled when key is valid
         expect(submitButton.props().disabled).toBeFalsy();
         expect(wrapper.find('.mx_AccessSecretStorageDialog_recoveryKeyFeedback').text()).toEqual('Looks good!');
@@ -112,7 +112,7 @@ describe("AccessSecretStorageDialog", () => {
         // @ts-ignore private
         await wrapper.instance().validateRecoveryKey();
 
-        const submitButton = findByTestId(wrapper, 'dialog-primary-button').at(0);
+        const submitButton = findByAttr('data-testid')(wrapper, 'dialog-primary-button').at(0);
         // submit button is disabled when recovery key is invalid
         expect(submitButton.props().disabled).toBeTruthy();
         expect(
diff --git a/test/components/views/dialogs/ExportDialog-test.tsx b/test/components/views/dialogs/ExportDialog-test.tsx
index c6ddda04ff5..ae4f517399c 100644
--- a/test/components/views/dialogs/ExportDialog-test.tsx
+++ b/test/components/views/dialogs/ExportDialog-test.tsx
@@ -65,8 +65,8 @@ describe('<ExportDialog />', () => {
     const getAttachmentsCheckbox = (component) => component.find('input[id="include-attachments"]');
     const getMessageCountInput = (component) => component.find('input[id="message-count"]');
     const getExportFormatInput = (component, format) => component.find(`input[id="exportFormat-${format}"]`);
-    const getPrimaryButton = (component) => component.find('[data-test-id="dialog-primary-button"]');
-    const getSecondaryButton = (component) => component.find('[data-test-id="dialog-cancel-button"]');
+    const getPrimaryButton = (component) => component.find('[data-testid="dialog-primary-button"]');
+    const getSecondaryButton = (component) => component.find('[data-testid="dialog-cancel-button"]');
 
     const submitForm = async (component) => act(async () => {
         getPrimaryButton(component).simulate('click');
diff --git a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
index af044252bbc..99dd8e031f5 100644
--- a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -111,14 +111,14 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         class="mx_Dialog_buttons_row"
       >
         <button
-          data-test-id="dialog-cancel-button"
+          data-testid="dialog-cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
           class="mx_Dialog_primary"
-          data-test-id="dialog-primary-button"
+          data-testid="dialog-primary-button"
           type="button"
         >
           Update
diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index b922d8b8ba3..590f85072e0 100644
--- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -249,14 +249,14 @@ Array [
                   class="mx_Dialog_buttons_row"
                 >
                   <button
-                    data-test-id="dialog-cancel-button"
+                    data-testid="dialog-cancel-button"
                     type="button"
                   >
                     Cancel
                   </button>
                   <button
                     class="mx_Dialog_primary"
-                    data-test-id="dialog-primary-button"
+                    data-testid="dialog-primary-button"
                     type="button"
                   >
                     Export
@@ -474,14 +474,14 @@ Array [
                     class="mx_Dialog_buttons_row"
                   >
                     <button
-                      data-test-id="dialog-cancel-button"
+                      data-testid="dialog-cancel-button"
                       type="button"
                     >
                       Cancel
                     </button>
                     <button
                       class="mx_Dialog_primary"
-                      data-test-id="dialog-primary-button"
+                      data-testid="dialog-primary-button"
                       type="button"
                     >
                       Export
@@ -827,7 +827,7 @@ Array [
                 className="mx_Dialog_buttons_row"
               >
                 <button
-                  data-test-id="dialog-cancel-button"
+                  data-testid="dialog-cancel-button"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -836,7 +836,7 @@ Array [
                 </button>
                 <button
                   className="mx_Dialog_primary"
-                  data-test-id="dialog-primary-button"
+                  data-testid="dialog-primary-button"
                   onClick={[Function]}
                   type="button"
                 >
@@ -1102,14 +1102,14 @@ Array [
                 class="mx_Dialog_buttons_row"
               >
                 <button
-                  data-test-id="dialog-cancel-button"
+                  data-testid="dialog-cancel-button"
                   type="button"
                 >
                   Cancel
                 </button>
                 <button
                   class="mx_Dialog_primary"
-                  data-test-id="dialog-primary-button"
+                  data-testid="dialog-primary-button"
                   type="button"
                 >
                   Export
@@ -1327,14 +1327,14 @@ Array [
                   class="mx_Dialog_buttons_row"
                 >
                   <button
-                    data-test-id="dialog-cancel-button"
+                    data-testid="dialog-cancel-button"
                     type="button"
                   >
                     Cancel
                   </button>
                   <button
                     class="mx_Dialog_primary"
-                    data-test-id="dialog-primary-button"
+                    data-testid="dialog-primary-button"
                     type="button"
                   >
                     Export
@@ -1680,7 +1680,7 @@ Array [
               className="mx_Dialog_buttons_row"
             >
               <button
-                data-test-id="dialog-cancel-button"
+                data-testid="dialog-cancel-button"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -1689,7 +1689,7 @@ Array [
               </button>
               <button
                 className="mx_Dialog_primary"
-                data-test-id="dialog-primary-button"
+                data-testid="dialog-primary-button"
                 onClick={[Function]}
                 type="button"
               >
@@ -1942,14 +1942,14 @@ Array [
               class="mx_Dialog_buttons_row"
             >
               <button
-                data-test-id="dialog-cancel-button"
+                data-testid="dialog-cancel-button"
                 type="button"
               >
                 Cancel
               </button>
               <button
                 class="mx_Dialog_primary"
-                data-test-id="dialog-primary-button"
+                data-testid="dialog-primary-button"
                 type="button"
               >
                 Export
@@ -2167,14 +2167,14 @@ Array [
                 class="mx_Dialog_buttons_row"
               >
                 <button
-                  data-test-id="dialog-cancel-button"
+                  data-testid="dialog-cancel-button"
                   type="button"
                 >
                   Cancel
                 </button>
                 <button
                   class="mx_Dialog_primary"
-                  data-test-id="dialog-primary-button"
+                  data-testid="dialog-primary-button"
                   type="button"
                 >
                   Export
@@ -2520,7 +2520,7 @@ Array [
             className="mx_Dialog_buttons_row"
           >
             <button
-              data-test-id="dialog-cancel-button"
+              data-testid="dialog-cancel-button"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -2529,7 +2529,7 @@ Array [
             </button>
             <button
               className="mx_Dialog_primary"
-              data-test-id="dialog-primary-button"
+              data-testid="dialog-primary-button"
               onClick={[Function]}
               type="button"
             >
@@ -2873,7 +2873,7 @@ Array [
           className="mx_Dialog_buttons_row"
         >
           <button
-            data-test-id="dialog-cancel-button"
+            data-testid="dialog-cancel-button"
             disabled={false}
             onClick={[Function]}
             type="button"
@@ -2882,7 +2882,7 @@ Array [
           </button>
           <button
             className="mx_Dialog_primary"
-            data-test-id="dialog-primary-button"
+            data-testid="dialog-primary-button"
             onClick={[Function]}
             type="button"
           >
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index e9dd3529036..f5c6e81e5cb 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -29,13 +29,13 @@ import {
     MatrixEvent,
     PUSHER_DEVICE_ID,
     PUSHER_ENABLED,
+    IAuthData,
 } from 'matrix-js-sdk/src/matrix';
 
 import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
 import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
 import {
     flushPromises,
-    flushPromisesWithFakeTimers,
     getMockClientWithEventEmitter,
     mkPusher,
     mockClientMethodsUser,
@@ -138,7 +138,7 @@ describe('<SessionManagerTab />', () => {
 
         fireEvent.click(dropdown as Element);
         // tick to let dropdown render
-        await flushPromisesWithFakeTimers();
+        await flushPromises();
 
         fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
     });
@@ -152,6 +152,19 @@ describe('<SessionManagerTab />', () => {
         getByTestId: ReturnType<typeof render>['getByTestId'],
     ): boolean => !!(getByTestId('device-select-all-checkbox') as HTMLInputElement).checked;
 
+    const confirmSignout = async (
+        getByTestId: ReturnType<typeof render>['getByTestId'],
+        confirm = true,
+    ): Promise<void> => {
+        // modal has sleeps in rendering process :(
+        await sleep(100);
+        const buttonId = confirm ? 'dialog-primary-button' : 'dialog-cancel-button';
+        fireEvent.click(getByTestId(buttonId));
+
+        // flush the confirmation promise
+        await flushPromises();
+    };
+
     beforeEach(() => {
         jest.clearAllMocks();
         jest.spyOn(logger, 'error').mockRestore();
@@ -188,6 +201,10 @@ describe('<SessionManagerTab />', () => {
                     });
                 }
             });
+
+        // sometimes a verification modal is in modal state when these tests run
+        // make sure the coast is clear
+        Modal.closeCurrentModal('');
     });
 
     it('renders spinner while devices load', () => {
@@ -201,7 +218,7 @@ describe('<SessionManagerTab />', () => {
         expect(mockClient.getDevices).toHaveBeenCalled();
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
         expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
     });
@@ -213,7 +230,7 @@ describe('<SessionManagerTab />', () => {
         const { container } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
         expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
     });
@@ -226,7 +243,7 @@ describe('<SessionManagerTab />', () => {
         render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         // called for each device despite error
@@ -246,7 +263,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         expect(mockCrossSigningInfo.checkDeviceTrust).toHaveBeenCalledTimes(2);
@@ -270,7 +287,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         // twice for each device
@@ -287,7 +304,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId, queryByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);
@@ -300,7 +317,7 @@ describe('<SessionManagerTab />', () => {
         const { queryByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         expect(queryByTestId('other-sessions-section')).toBeFalsy();
@@ -313,7 +330,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         expect(getByTestId('other-sessions-section')).toBeTruthy();
@@ -324,13 +341,13 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId, container } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         fireEvent.click(getByTestId('unverified-devices-cta'));
 
         // our session manager waits a tick for rerender
-        await flushPromisesWithFakeTimers();
+        await flushPromises();
 
         // unverified filter is set
         expect(container.querySelector('.mx_FilteredDeviceListHeader')).toMatchSnapshot();
@@ -346,7 +363,7 @@ describe('<SessionManagerTab />', () => {
             mockClient.getDevices.mockResolvedValue({ devices: [] });
             const { getByTestId } = render(getComponent());
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             expect(getByTestId('current-session-menu').getAttribute('aria-disabled')).toBeTruthy();
@@ -357,7 +374,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             expect(getByTestId('current-session-section')).toMatchSnapshot();
@@ -369,7 +386,7 @@ describe('<SessionManagerTab />', () => {
             const modalSpy = jest.spyOn(Modal, 'createDialog');
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             // click verify button from current session section
@@ -387,7 +404,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             expect(getByTestId('current-session-section')).toMatchSnapshot();
@@ -402,7 +419,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             const otherSessionsSection = getByTestId('other-sessions-section');
@@ -418,7 +435,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, queryByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceDetails(getByTestId, alicesOlderMobileDevice.device_id);
@@ -449,7 +466,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, queryByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceDetails(getByTestId, alicesOlderMobileDevice.device_id);
@@ -475,7 +492,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
@@ -504,7 +521,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
@@ -534,7 +551,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceDetails(getByTestId, alicesDevice.device_id);
@@ -553,7 +570,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, getByLabelText } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             fireEvent.click(getByTestId('current-session-menu'));
@@ -568,7 +585,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, queryByLabelText } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             fireEvent.click(getByTestId('current-session-menu'));
@@ -582,11 +599,12 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, getByLabelText } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             fireEvent.click(getByTestId('current-session-menu'));
             fireEvent.click(getByLabelText('Sign out all other sessions'));
+            await confirmSignout(getByTestId);
 
             // other devices deleted, excluding current device
             expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([
@@ -611,7 +629,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
@@ -622,6 +640,8 @@ describe('<SessionManagerTab />', () => {
                 ) as Element;
                 fireEvent.click(signOutButton);
 
+                await confirmSignout(getByTestId);
+
                 // sign out button is disabled with spinner
                 expect((deviceDetails.querySelector(
                     '[data-testid="device-detail-sign-out-cta"]',
@@ -631,12 +651,37 @@ describe('<SessionManagerTab />', () => {
                     [alicesMobileDevice.device_id], undefined,
                 );
 
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
 
                 // devices refreshed
                 expect(mockClient.getDevices).toHaveBeenCalled();
             });
 
+            it('deletes a device when interactive auth is not required', async () => {
+                const { getByTestId } = render(getComponent());
+
+                await act(async () => {
+                    await flushPromises();
+                });
+
+                toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
+
+                const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
+                const signOutButton = deviceDetails.querySelector(
+                    '[data-testid="device-detail-sign-out-cta"]',
+                ) as Element;
+                fireEvent.click(signOutButton);
+
+                await confirmSignout(getByTestId, false);
+
+                // doesnt enter loading state
+                expect((deviceDetails.querySelector(
+                    '[data-testid="device-detail-sign-out-cta"]',
+                ) as Element).getAttribute('aria-disabled')).toEqual(null);
+                // delete not called
+                expect(mockClient.deleteMultipleDevices).not.toHaveBeenCalled();
+            });
+
             it('deletes a device when interactive auth is required', async () => {
                 mockClient.deleteMultipleDevices
                     // require auth
@@ -652,7 +697,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, getByLabelText } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 // reset mock count after initial load
@@ -665,8 +710,9 @@ describe('<SessionManagerTab />', () => {
                     '[data-testid="device-detail-sign-out-cta"]',
                 ) as Element;
                 fireEvent.click(signOutButton);
+                await confirmSignout(getByTestId);
 
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
                 // modal rendering has some weird sleeps
                 await sleep(100);
 
@@ -683,7 +729,7 @@ describe('<SessionManagerTab />', () => {
                     fireEvent.submit(getByLabelText('Password'));
                 });
 
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
 
                 // called again with auth
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([alicesMobileDevice.device_id],
@@ -708,7 +754,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, getByLabelText } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
@@ -718,13 +764,14 @@ describe('<SessionManagerTab />', () => {
                     '[data-testid="device-detail-sign-out-cta"]',
                 ) as Element;
                 fireEvent.click(signOutButton);
+                await confirmSignout(getByTestId);
 
                 // button is loading
                 expect((deviceDetails.querySelector(
                     '[data-testid="device-detail-sign-out-cta"]',
                 ) as Element).getAttribute('aria-disabled')).toEqual("true");
 
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
 
                 // Modal rendering has some weird sleeps.
                 // Resetting ourselves twice in the main loop gives modal the chance to settle.
@@ -743,7 +790,7 @@ describe('<SessionManagerTab />', () => {
                     fireEvent.click(getByLabelText('Close dialog'));
                 });
 
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
 
                 // not called again
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledTimes(1);
@@ -761,12 +808,21 @@ describe('<SessionManagerTab />', () => {
                     alicesDevice, alicesMobileDevice, alicesOlderMobileDevice,
                     alicesInactiveDevice,
                 ] });
-                mockClient.deleteMultipleDevices.mockResolvedValue({});
+                // get a handle for resolving the delete call
+                // because promise flushing after the confirm modal is resolving this too
+                // and we want to test the loading state here
+                let resolveDeleteRequest;
+                mockClient.deleteMultipleDevices.mockImplementation(() => {
+                    const promise = new Promise<IAuthData>(resolve => {
+                        resolveDeleteRequest = resolve;
+                    });
+                    return promise;
+                });
 
                 const { getByTestId } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
@@ -774,6 +830,8 @@ describe('<SessionManagerTab />', () => {
 
                 fireEvent.click(getByTestId('sign-out-selection-cta'));
 
+                await confirmSignout(getByTestId);
+
                 // buttons disabled in list header
                 expect(getByTestId('sign-out-selection-cta').getAttribute('aria-disabled')).toBeTruthy();
                 expect(getByTestId('cancel-selection-cta').getAttribute('aria-disabled')).toBeTruthy();
@@ -800,6 +858,8 @@ describe('<SessionManagerTab />', () => {
                     ],
                     undefined,
                 );
+
+                resolveDeleteRequest?.();
             });
         });
     });
@@ -819,15 +879,15 @@ describe('<SessionManagerTab />', () => {
             fireEvent.change(input, { target: { value: newDeviceName } });
             fireEvent.click(getByTestId('device-rename-submit-cta'));
 
-            await flushPromisesWithFakeTimers();
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
+            await flushPromises();
         };
 
         it('renames current session', async () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             const newDeviceName = 'new device name';
@@ -844,7 +904,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             const newDeviceName = 'new device name';
@@ -861,7 +921,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             await updateDeviceName(getByTestId, alicesDevice, alicesDevice.display_name);
@@ -875,7 +935,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             await updateDeviceName(getByTestId, alicesDevice, '');
@@ -891,13 +951,13 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             const newDeviceName = 'new device name';
             await updateDeviceName(getByTestId, alicesDevice, newDeviceName);
 
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
 
             expect(logSpy).toHaveBeenCalledWith("Error setting session display name", error);
 
@@ -917,7 +977,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, getByText } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
@@ -941,7 +1001,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId, getByText } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
@@ -961,7 +1021,7 @@ describe('<SessionManagerTab />', () => {
             const { getByTestId } = render(getComponent());
 
             await act(async () => {
-                await flushPromisesWithFakeTimers();
+                await flushPromises();
             });
 
             toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
@@ -970,7 +1030,7 @@ describe('<SessionManagerTab />', () => {
             fireEvent.click(getByTestId('unverified-devices-cta'));
 
             // our session manager waits a tick for rerender
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
 
             // unselected
             expect(isDeviceSelected(getByTestId, alicesOlderMobileDevice.device_id)).toBeFalsy();
@@ -981,7 +1041,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, getByText } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 fireEvent.click(getByTestId('device-select-all-checkbox'));
@@ -999,7 +1059,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, getByText } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 toggleDeviceSelection(getByTestId, alicesMobileDevice.device_id);
@@ -1019,7 +1079,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, getByText } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 fireEvent.click(getByTestId('device-select-all-checkbox'));
@@ -1042,7 +1102,7 @@ describe('<SessionManagerTab />', () => {
                 const { getByTestId, container } = render(getComponent());
 
                 await act(async () => {
-                    await flushPromisesWithFakeTimers();
+                    await flushPromises();
                 });
 
                 // filter for inactive sessions
@@ -1055,6 +1115,7 @@ describe('<SessionManagerTab />', () => {
 
                 // sign out of all selected sessions
                 fireEvent.click(getByTestId('sign-out-selection-cta'));
+                await confirmSignout(getByTestId);
 
                 // only called with session from active filter
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(
@@ -1071,7 +1132,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
@@ -1092,7 +1153,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);
@@ -1116,7 +1177,7 @@ describe('<SessionManagerTab />', () => {
         const { getByTestId } = render(getComponent());
 
         await act(async () => {
-            await flushPromisesWithFakeTimers();
+            await flushPromises();
         });
 
         toggleDeviceDetails(getByTestId, alicesDevice.device_id);

From 249474b430bb4eb06f995dae40f246edfa540cc0 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Tue, 25 Oct 2022 14:31:38 +0100
Subject: [PATCH 055/113] Only render NotificationBadge when needed (#9493)

---
 cypress/e2e/sliding-sync/sliding-sync.ts         | 2 +-
 src/components/views/rooms/NotificationBadge.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts
index ebc90443f34..e0e7c974a77 100644
--- a/cypress/e2e/sliding-sync/sliding-sync.ts
+++ b/cypress/e2e/sliding-sync/sliding-sync.ts
@@ -235,7 +235,7 @@ describe("Sliding Sync", () => {
             "Test Room", "Dummy",
         ]);
 
-        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.be.visible");
+        cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.exist");
     });
 
     it("should update user settings promptly", () => {
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 3555582298b..dccf8b11906 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -111,7 +111,12 @@ 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, showUnsentTooltip, onClick } = this.props;
+        const { notification, showUnsentTooltip, forceCount, onClick } = this.props;
+
+        if (notification.isIdle) return null;
+        if (forceCount) {
+            if (!notification.hasUnreadCount) return null; // Can't render a badge
+        }
 
         let label: string;
         let tooltip: JSX.Element;

From 50279c8870410fd48261a27ea375619e702aa4b1 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 25 Oct 2022 17:26:14 +0200
Subject: [PATCH 056/113] Add basic plain text editor

---
 res/css/views/rooms/_MessageComposer.pcss     | 10 +++-
 .../room/composer/plain_text.svg              | 11 ++++
 .../element-icons/room/composer/rich_text.svg | 10 ++++
 .../views/rooms/MessageComposer.tsx           | 31 ++++++++++--
 .../views/rooms/MessageComposerButtons.tsx    | 24 ++++++++-
 .../wysiwyg_composer/SendWysiwygComposer.tsx  | 33 ++++++------
 .../components/PlainTextComposer.tsx          | 44 ++++++++++++++++
 .../hooks/useComposerFunctions.tsx            | 27 ++++++++++
 .../hooks/useInputEventProcessor.ts           |  2 +-
 .../hooks/usePlainTextListeners.tsx           | 50 +++++++++++++++++++
 .../hooks/useWysiwygSendActionHandler.ts      |  8 +--
 .../views/rooms/wysiwyg_composer/types.ts     | 19 +++++++
 .../utils/createMessageContent.ts             | 49 +++++++++++++-----
 .../rooms/wysiwyg_composer/utils/message.ts   |  8 +--
 .../EditWysiwygComposer-test.tsx              |  2 +-
 .../SendWysiwygComposer-test.tsx              |  2 +-
 .../utils/createMessageContent-test.ts        | 18 +++----
 .../wysiwyg_composer/utils/message-test.ts    | 28 ++++++++---
 18 files changed, 315 insertions(+), 61 deletions(-)
 create mode 100644 res/img/element-icons/room/composer/plain_text.svg
 create mode 100644 res/img/element-icons/room/composer/rich_text.svg
 create mode 100644 src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx
 create mode 100644 src/components/views/rooms/wysiwyg_composer/types.ts

diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 4cddf310846..4d22f60a122 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -240,7 +240,7 @@ limitations under the License.
 */
 .mx_MessageComposer_wysiwyg {
     .mx_MessageComposer_e2eIcon.mx_E2EIcon,.mx_MessageComposer_button, .mx_MessageComposer_sendMessage {
-        margin-top: 22px;
+        margin-top: 28px;
     }
 }
 
@@ -264,6 +264,14 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
+.mx_MessageComposer_plain_text::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/plain_text.svg');
+}
+
+.mx_MessageComposer_rich_text::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/rich_text.svg');
+}
+
 .mx_MessageComposer_location::before {
     mask-image: url('$(res)/img/element-icons/room/composer/location.svg');
 }
diff --git a/res/img/element-icons/room/composer/plain_text.svg b/res/img/element-icons/room/composer/plain_text.svg
new file mode 100644
index 00000000000..7ff47fe085c
--- /dev/null
+++ b/res/img/element-icons/room/composer/plain_text.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1456_146365)">
+<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
+<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1456_146365">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/res/img/element-icons/room/composer/rich_text.svg b/res/img/element-icons/room/composer/rich_text.svg
new file mode 100644
index 00000000000..d2da9d25516
--- /dev/null
+++ b/res/img/element-icons/room/composer/rich_text.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1456_146350)">
+<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
+</g>
+<defs>
+<clipPath id="clip0_1456_146350">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 674635d8961..f663f57e9c2 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -100,6 +100,8 @@ interface IState {
     showStickersButton: boolean;
     showPollsButton: boolean;
     showVoiceBroadcastButton: boolean;
+    isWysiwygLabEnabled: boolean;
+    isRichTextEnabled: boolean;
 }
 
 export class MessageComposer extends React.Component<IProps, IState> {
@@ -117,6 +119,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     public static defaultProps = {
         compact: false,
         showVoiceBroadcastButton: false,
+        isRichTextEnabled: true,
     };
 
     public constructor(props: IProps) {
@@ -133,6 +136,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
             showStickersButton: SettingsStore.getValue("MessageComposerInput.showStickersButton"),
             showPollsButton: SettingsStore.getValue("MessageComposerInput.showPollsButton"),
             showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
+            isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
+            isRichTextEnabled: true,
         };
 
         this.instanceId = instanceCount++;
@@ -140,6 +145,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null);
         SettingsStore.monitorSetting("MessageComposerInput.showPollsButton", null);
         SettingsStore.monitorSetting(Features.VoiceBroadcast, null);
+        SettingsStore.monitorSetting("feature_wysiwyg_composer", null);
     }
 
     private get voiceRecording(): Optional<VoiceMessageRecording> {
@@ -220,6 +226,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         }
                         break;
                     }
+                    case "feature_wysiwyg_composer": {
+                        if (this.state.isWysiwygLabEnabled !== settingUpdatedPayload.newValue) {
+                            this.setState({ isWysiwygLabEnabled: Boolean(settingUpdatedPayload.newValue) });
+                        }
+                        break;
+                    }
                 }
             }
         }
@@ -318,10 +330,10 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         this.messageComposerInput.current?.sendMessage();
 
-        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
-        if (isWysiwygComposerEnabled) {
+        if (this.state.isWysiwygLabEnabled) {
             const { permalinkCreator, relation, replyToEvent } = this.props;
             sendMessage(this.state.composerContent,
+                this.state.isRichTextEnabled,
                 { mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
             dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
         }
@@ -340,6 +352,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
         });
     };
 
+    private onRichTextToggle = () => {
+        this.setState(state => ({
+            isRichTextEnabled: !state.isRichTextEnabled,
+        }));
+    };
+
     private onVoiceStoreUpdate = () => {
         this.updateRecordingState();
     };
@@ -395,7 +413,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
         const controls = [
             this.props.e2eStatus ?
                 <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
@@ -410,12 +427,13 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
         if (canSendMessages) {
-            if (isWysiwygComposerEnabled) {
+            if (this.state.isWysiwygLabEnabled) {
                 controls.push(
                     <SendWysiwygComposer key="controls_input"
                         disabled={this.state.haveRecording}
                         onChange={this.onWysiwygChange}
                         onSend={this.sendMessage}
+                        isRichTextEnabled={this.state.isRichTextEnabled}
                     />,
                 );
             } else {
@@ -503,7 +521,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             "mx_MessageComposer": true,
             "mx_MessageComposer--compact": this.props.compact,
             "mx_MessageComposer_e2eStatus": this.props.e2eStatus != undefined,
-            "mx_MessageComposer_wysiwyg": isWysiwygComposerEnabled,
+            "mx_MessageComposer_wysiwyg": this.state.isWysiwygLabEnabled && this.state.isRichTextEnabled,
         });
 
         return (
@@ -532,6 +550,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
                             showLocationButton={!window.electron}
                             showPollsButton={this.state.showPollsButton}
                             showStickersButton={this.showStickersButton}
+                            showComposerModeButton={this.state.isWysiwygLabEnabled}
+                            isComposerModeToggled={this.state.isRichTextEnabled}
+                            onComposerModeClick={this.onRichTextToggle}
                             toggleButtonMenu={this.toggleButtonMenu}
                             showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
                             onStartVoiceBroadcastClick={() => {
diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx
index b77bff66a8f..8ab4c2570b5 100644
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from 'classnames';
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
 import { M_POLL_START } from "matrix-events-sdk";
-import React, { createContext, ReactElement, useContext, useRef } from 'react';
+import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
@@ -55,6 +55,9 @@ interface IProps {
     toggleButtonMenu: () => void;
     showVoiceBroadcastButton: boolean;
     onStartVoiceBroadcastClick: () => void;
+    isComposerModeToggled: boolean;
+    showComposerModeButton: boolean;
+    onComposerModeClick: () => void;
 }
 
 type OverflowMenuCloser = () => void;
@@ -85,6 +88,8 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     } else {
         mainButtons = [
             emojiButton(props),
+            props.showComposerModeButton &&
+                <ComposerModeButton key="composerModeButton" isToggled={props.isComposerModeToggled} onClick={props.onComposerModeClick} />,
             uploadButton(), // props passed via UploadButtonContext
         ];
         moreButtons = [
@@ -397,4 +402,21 @@ function showLocationButton(
     );
 }
 
+interface WysiwygToggleButtonProps {
+    isToggled: boolean;
+    onClick: MouseEventHandler<HTMLDivElement>;
+}
+
+function ComposerModeButton({ isToggled, onClick }: WysiwygToggleButtonProps) {
+    return <CollapsibleButton
+        className="mx_MessageComposer_button"
+        iconClassName={classNames({
+            "mx_MessageComposer_plain_text": !isToggled,
+            "mx_MessageComposer_rich_text": isToggled,
+        })}
+        onClick={onClick}
+        title={_t("Switch to plain text mode")}
+    />;
+}
+
 export default MessageComposerButtons;
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index 2a485d99757..9208e79ac40 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -15,32 +15,37 @@ limitations under the License.
 */
 
 import React, { forwardRef, RefObject } from 'react';
-import { FormattingFunctions } from '@matrix-org/matrix-wysiwyg';
 
 import { useWysiwygSendActionHandler } from './hooks/useWysiwygSendActionHandler';
 import { WysiwygComposer } from './components/WysiwygComposer';
+import { PlainTextComposer } from './components/PlainTextComposer';
+import { ComposerFunctions } from './types';
 
-interface SendWysiwygComposerProps {
-    disabled?: boolean;
-    onChange: (content: string) => void;
-    onSend: () => void;
-}
 interface ContentProps {
     disabled: boolean;
-    formattingFunctions: FormattingFunctions;
+    composerFunctions: ComposerFunctions;
 }
 
 const Content = forwardRef<HTMLElement, ContentProps>(
-    function Content({ disabled, formattingFunctions: wysiwyg }: ContentProps, forwardRef: RefObject<HTMLElement>) {
-        useWysiwygSendActionHandler(disabled, forwardRef, wysiwyg);
+    function Content({ disabled, composerFunctions }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygSendActionHandler(disabled, forwardRef, composerFunctions);
         return null;
     },
 );
 
-export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
-    return (
-        <WysiwygComposer className="mx_SendWysiwygComposer" {...props}>{ (ref, wysiwyg) => (
-            <Content disabled={props.disabled} ref={ref} formattingFunctions={wysiwyg} />
+interface SendWysiwygComposerProps {
+    isRichTextEnabled: boolean;
+    disabled?: boolean;
+    onChange: (content: string) => void;
+    onSend: () => void;
+}
+
+export function SendWysiwygComposer({ isRichTextEnabled, ...props }: SendWysiwygComposerProps) {
+    const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
+
+    return <Composer className="mx_SendWysiwygComposer" {...props}>
+        { (ref, composerFunctions) => (
+            <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
         ) }
-        </WysiwygComposer>);
+    </Composer>;
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
new file mode 100644
index 00000000000..cf251757552
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MutableRefObject, ReactNode } from 'react';
+import { useComposerFunctions } from '../hooks/useComposerFunctions';
+import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
+import { ComposerFunctions } from '../types';
+
+import { Editor } from "./Editor";
+
+interface PlainTextComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+    onSend: () => void;
+    initialContent?: string;
+    className?: string;
+    children?: (
+        ref: MutableRefObject<HTMLDivElement | null>,
+        composerFunctions: ComposerFunctions,
+    ) => ReactNode;
+}
+
+export function PlainTextComposer({ className, disabled, onSend, onChange, children }: PlainTextComposerProps) {
+   const {ref, onInput, onPaste, onKeyDown} = usePlainTextListeners(onChange, onSend)
+   const composerFunctions = useComposerFunctions(ref)
+
+    return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
+        <Editor ref={ref} disabled={disabled} />
+        {children?.(ref, composerFunctions)}
+    </div>;
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx b/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx
new file mode 100644
index 00000000000..99a89589ee4
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useMemo } from "react";
+
+export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
+    return useMemo(() => ({
+        clear: () => {
+            if (ref.current) {
+                ref.current.innerHTML = '';
+            }
+        },
+    }), [ref]);
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
index 414b6df45c5..06839ab262a 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
@@ -20,7 +20,7 @@ import { useCallback } from "react";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 
 export function useInputEventProcessor(onSend: () => void) {
-    const isCtrlEnter = useSettingValue("MessageComposerInput.ctrlEnterToSend") as boolean;
+    const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     return useCallback((event: WysiwygInputEvent) => {
         if (event instanceof ClipboardEvent) {
             return event;
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx
new file mode 100644
index 00000000000..98d09c12b05
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx
@@ -0,0 +1,50 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { KeyboardEvent, SyntheticEvent, useCallback, useRef } from "react";
+
+import { useInputEventProcessor } from "./useInputEventProcessor";
+
+function isDivElement(target: EventTarget): target is HTMLDivElement {
+    return target instanceof HTMLDivElement;
+}
+
+export function usePlainTextListeners(onChange: (content: string) => void, onSend: () => void) {
+    const ref = useRef<HTMLDivElement>();
+    const send = useCallback((() => {
+        if (ref.current) {
+            ref.current.innerText = '';
+        }
+        onSend();
+    }), [ref, onSend]);
+
+    const inputEventProcessor = useInputEventProcessor(send);
+
+    const onInput = useCallback((event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
+        if (isDivElement(event.target)) {
+            onChange(event.target.innerText);
+        }
+        inputEventProcessor(event.nativeEvent);
+    }, [onChange, inputEventProcessor]);
+
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Enter') {
+            send();
+        }
+    }, [send]);
+
+    return { ref, onInput, onPaste: onInput, onKeyDown };
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
index b7c18f19c20..49c6302d5b3 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import { RefObject, useCallback, useRef } from "react";
-import { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 
 import defaultDispatcher from "../../../../../dispatcher/dispatcher";
 import { Action } from "../../../../../dispatcher/actions";
@@ -23,11 +22,12 @@ import { ActionPayload } from "../../../../../dispatcher/payloads";
 import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
 import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
+import { ComposerFunctions } from "../types";
 
 export function useWysiwygSendActionHandler(
     disabled: boolean,
     composerElement: RefObject<HTMLElement>,
-    wysiwyg: FormattingFunctions,
+    composerFunctions: ComposerFunctions,
 ) {
     const roomContext = useRoomContext();
     const timeoutId = useRef<number>();
@@ -45,12 +45,12 @@ export function useWysiwygSendActionHandler(
                 focusComposer(composerElement, context, roomContext, timeoutId);
                 break;
             case Action.ClearAndFocusSendMessageComposer:
-                wysiwyg.clear();
+                composerFunctions.clear();
                 focusComposer(composerElement, context, roomContext, timeoutId);
                 break;
             // TODO: case Action.ComposerInsert: - see SendMessageComposer
         }
-    }, [disabled, composerElement, wysiwyg, timeoutId, roomContext]);
+    }, [disabled, composerElement, composerFunctions, timeoutId, roomContext]);
 
     useDispatcher(defaultDispatcher, handler);
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/types.ts b/src/components/views/rooms/wysiwyg_composer/types.ts
new file mode 100644
index 00000000000..96095abebfd
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/types.ts
@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export type ComposerFunctions = {
+    clear: () => void;
+};
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index cc0d2235bf9..df42b0062bc 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -16,6 +16,8 @@ limitations under the License.
 
 import { IContent, IEventRelation, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 
+import { htmlSerializeFromMdIfNeeded } from "../../../../../editor/serialize";
+import SettingsStore from "../../../../../settings/SettingsStore";
 import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
 import { addReplyToMessageContent } from "../../../../../utils/Reply";
 
@@ -39,6 +41,19 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     return (mxReply && mxReply.outerHTML) || "";
 }
 
+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) {
+        return `${lines[0]}\n\n`;
+    }
+    return "";
+}
+
+function htmlToPlainText(html: string) {
+    return new DOMParser().parseFromString(html, 'text/html').documentElement.textContent;
+}
+
 interface CreateMessageContentParams {
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
@@ -49,6 +64,7 @@ interface CreateMessageContentParams {
 
 export function createMessageContent(
     message: string,
+    isHTML: boolean,
     { relation, replyToEvent, permalinkCreator, includeReplyLegacyFallback = true, editedEvent }:
     CreateMessageContentParams,
 ): IContent {
@@ -56,6 +72,7 @@ export function createMessageContent(
 
     const isEditing = Boolean(editedEvent);
     const isReply = isEditing ? Boolean(editedEvent?.replyEventId) : Boolean(replyToEvent);
+    const isReplyAndEditing = isEditing && isReply;
 
     /*const isEmote = containsEmote(model);
     if (isEmote) {
@@ -67,37 +84,43 @@ export function createMessageContent(
     model = unescapeMessage(model);*/
 
     // const body = textSerialize(model);
-    const body = message;
+
+    const body = isHTML && htmlToPlainText(message) || message;
+    const bodyPrefix = isReplyAndEditing && getTextReplyFallback(editedEvent) || '';
+    const formattedBodyPrefix = isReplyAndEditing && getHtmlReplyFallback(editedEvent) || '';
 
     const content: IContent = {
         // TODO emote
-    //    msgtype: isEmote ? "m.emote" : "m.text",
         msgtype: MsgType.Text,
-        body: body,
+        // TODO when available, use HTML --> Plain text conversion from wysiwyg rust model
+        body: isEditing ? `${bodyPrefix} * ${body}` : body,
     };
 
     // TODO markdown support
 
-    /*const formattedBody = htmlSerializeIfNeeded(model, {
-        forceHTML: !!replyToEvent,
-        useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
-    });*/
-    const formattedBody = message;
+    const isMarkdownEnabled = SettingsStore.getValue<boolean>("MessageComposerInput.useMarkdown");
+    const formattedBody =
+        isHTML ?
+            message :
+            isMarkdownEnabled ?
+                htmlSerializeFromMdIfNeeded(message, { forceHTML: isReply }) :
+                null;
 
     if (formattedBody) {
         content.format = "org.matrix.custom.html";
-
-        const htmlPrefix = isReply && isEditing ? getHtmlReplyFallback(editedEvent) : '';
-        content.formatted_body = isEditing ? `${htmlPrefix} * ${formattedBody}` : formattedBody;
+        content.formatted_body = isEditing ? `${formattedBodyPrefix} * ${formattedBody}` : formattedBody;
     }
 
     if (isEditing) {
         content['m.new_content'] = {
             "msgtype": content.msgtype,
             "body": body,
-            "format": "org.matrix.custom.html",
-            'formatted_body': formattedBody,
         };
+
+        if (formattedBody) {
+            content['m.new_content'].format = "org.matrix.custom.html";
+            content['m.new_content']['formatted_body'] = formattedBody;
+        }
     }
 
     const newRelation = isEditing ?
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/message.ts b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
index dbea29c848c..d84392c18e7 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/message.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
@@ -44,7 +44,8 @@ interface SendMessageParams {
 }
 
 export function sendMessage(
-    html: string,
+    message: string,
+    isHTML: boolean,
     { roomContext, mxClient, ...params }: SendMessageParams,
 ) {
     const { relation, replyToEvent } = params;
@@ -76,7 +77,8 @@ export function sendMessage(
 
     if (!content) {
         content = createMessageContent(
-            html,
+            message,
+            isHTML,
             params,
         );
     }
@@ -167,7 +169,7 @@ export function editMessage(
         const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
         this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
     }*/
-    const editContent = createMessageContent(html, { editedEvent });
+    const editContent = createMessageContent(html, true, { editedEvent });
     const newContent = editContent["m.new_content"];
 
     const shouldSend = true;
diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
index 72fd52be574..051d25b4356 100644
--- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -163,7 +163,7 @@ describe('EditWysiwygComposer', () => {
 
             // Then
             const expectedContent = {
-                "body": mockContent,
+                "body": ` * ${mockContent}`,
                 "format": "org.matrix.custom.html",
                 "formatted_body": ` * ${mockContent}`,
                 "m.new_content": {
diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index 20148b802a7..c97e5e90867 100644
--- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -72,7 +72,7 @@ describe('SendWysiwygComposer', () => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <RoomContext.Provider value={defaultRoomContext}>
-                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} />
+                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={true} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
         );
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
index a4335b2bf10..4c7028749c4 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
@@ -40,11 +40,11 @@ describe('createMessageContent', () => {
 
     it("Should create html message", () => {
         // When
-        const content = createMessageContent(message, { permalinkCreator });
+        const content = createMessageContent(message, true, { permalinkCreator });
 
         // Then
         expect(content).toEqual({
-            "body": message,
+            "body": "hello world",
             "format": "org.matrix.custom.html",
             "formatted_body": message,
             "msgtype": "m.text",
@@ -53,11 +53,11 @@ describe('createMessageContent', () => {
 
     it('Should add reply to message content', () => {
         // When
-        const content = createMessageContent(message, { permalinkCreator, replyToEvent: mockEvent });
+        const content = createMessageContent(message, true, { permalinkCreator, replyToEvent: mockEvent });
 
         // Then
         expect(content).toEqual({
-            "body": "> <myfakeuser> Replying to this\n\n<i><b>hello</b> world</i>",
+            "body": "> <myfakeuser> Replying to this\n\nhello world",
             "format": "org.matrix.custom.html",
             "formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
                                     " <a href=\"https://matrix.to/#/myfakeuser\">myfakeuser</a>"+
@@ -77,11 +77,11 @@ describe('createMessageContent', () => {
             rel_type: "m.thread",
             event_id: "myFakeThreadId",
         };
-        const content = createMessageContent(message, { permalinkCreator, relation });
+        const content = createMessageContent(message, true, { permalinkCreator, relation });
 
         // Then
         expect(content).toEqual({
-            "body": message,
+            "body": "hello world",
             "format": "org.matrix.custom.html",
             "formatted_body": message,
             "msgtype": "m.text",
@@ -110,16 +110,16 @@ describe('createMessageContent', () => {
             event: true,
         });
         const content =
-                createMessageContent(message, { permalinkCreator, editedEvent });
+                createMessageContent(message, true, { permalinkCreator, editedEvent });
 
         // Then
         expect(content).toEqual({
-            "body": message,
+            "body": " * hello world",
             "format": "org.matrix.custom.html",
             "formatted_body": ` * ${message}`,
             "msgtype": "m.text",
             "m.new_content": {
-                "body": message,
+                "body": "hello world",
                 "format": "org.matrix.custom.html",
                 "formatted_body": message,
                 "msgtype": "m.text",
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
index 9d13f281760..0829b19adb2 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
@@ -65,7 +65,7 @@ describe('message', () => {
     describe('sendMessage', () => {
         it('Should not send empty html message', async () => {
             // When
-            await sendMessage('', { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage('', true, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
 
             // Then
             expect(mockClient.sendMessage).toBeCalledTimes(0);
@@ -74,11 +74,15 @@ describe('message', () => {
 
         it('Should send html message', async () => {
             // When
-            await sendMessage(message, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage(
+                message,
+                true,
+                { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
+            );
 
             // Then
             const expectedContent = {
-                "body": "<i><b>hello</b> world</i>",
+                "body": "hello world",
                 "format": "org.matrix.custom.html",
                 "formatted_body": "<i><b>hello</b> world</i>",
                 "msgtype": "m.text",
@@ -97,7 +101,7 @@ describe('message', () => {
             });
 
             // When
-            await sendMessage(message, {
+            await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
                 permalinkCreator,
@@ -112,7 +116,7 @@ describe('message', () => {
             });
 
             const expectedContent = {
-                "body": "> <myfakeuser2> My reply\n\n<i><b>hello</b> world</i>",
+                "body": "> <myfakeuser2> My reply\n\nhello world",
                 "format": "org.matrix.custom.html",
                 "formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
                                     " <a href=\"https://matrix.to/#/myfakeuser2\">myfakeuser2</a>" +
@@ -130,7 +134,11 @@ describe('message', () => {
         it('Should scroll to bottom after sending a html message', async () => {
             // When
             SettingsStore.setValue("scrollToBottomOnMessageSent", null, SettingLevel.DEVICE, true);
-            await sendMessage(message, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage(
+                message,
+                true,
+                { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
+            );
 
             // Then
             expect(spyDispatcher).toBeCalledWith(
@@ -140,7 +148,11 @@ describe('message', () => {
 
         it('Should handle emojis', async () => {
             // When
-            await sendMessage('🎉', { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage(
+                '🎉',
+                false,
+                { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
+            );
 
             // Then
             expect(spyDispatcher).toBeCalledWith(
@@ -203,7 +215,7 @@ describe('message', () => {
             // Then
             const { msgtype, format } = mockEvent.getContent();
             const expectedContent = {
-                "body": newMessage,
+                "body": ` * ${newMessage}`,
                 "formatted_body": ` * ${newMessage}`,
                 "m.new_content": {
                     "body": "Replying to this new content",

From c7dbb5947fbf491f1bbb3676a8521d33dae35a94 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 25 Oct 2022 18:33:25 +0200
Subject: [PATCH 057/113] Keep content when switching between rich text and
 plain text mode

---
 .../views/rooms/MessageComposer.tsx           |  8 ++++++++
 .../wysiwyg_composer/SendWysiwygComposer.tsx  |  1 +
 .../components/PlainTextComposer.tsx          | 20 +++++++++++++------
 ...rFunctions.tsx => useComposerFunctions.ts} |  0
 ...Listeners.tsx => usePlainTextListeners.ts} |  0
 .../utils/createMessageContent.ts             |  5 +----
 src/utils/room/htmlToPlaintext.ts             | 19 ++++++++++++++++++
 7 files changed, 43 insertions(+), 10 deletions(-)
 rename src/components/views/rooms/wysiwyg_composer/hooks/{useComposerFunctions.tsx => useComposerFunctions.ts} (100%)
 rename src/components/views/rooms/wysiwyg_composer/hooks/{usePlainTextListeners.tsx => usePlainTextListeners.ts} (100%)
 create mode 100644 src/utils/room/htmlToPlaintext.ts

diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index f663f57e9c2..787b4e2e5b7 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -60,6 +60,7 @@ import {
 } from '../../../voice-broadcast';
 import { SendWysiwygComposer, sendMessage } from './wysiwyg_composer/';
 import { MatrixClientProps, withMatrixClientHOC } from '../../../contexts/MatrixClientContext';
+import { htmlToPlainText } from '../../../utils/room/htmlToPlaintext';
 
 let instanceCount = 0;
 
@@ -102,6 +103,7 @@ interface IState {
     showVoiceBroadcastButton: boolean;
     isWysiwygLabEnabled: boolean;
     isRichTextEnabled: boolean;
+    initialComposerContent: string;
 }
 
 export class MessageComposer extends React.Component<IProps, IState> {
@@ -138,6 +140,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
             isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
             isRichTextEnabled: true,
+            initialComposerContent: '',
         };
 
         this.instanceId = instanceCount++;
@@ -355,6 +358,10 @@ export class MessageComposer extends React.Component<IProps, IState> {
     private onRichTextToggle = () => {
         this.setState(state => ({
             isRichTextEnabled: !state.isRichTextEnabled,
+            initialComposerContent: !state.isRichTextEnabled ?
+                state.composerContent :
+                // TODO when available use rust model plain text
+                htmlToPlainText(state.composerContent),
         }));
     };
 
@@ -434,6 +441,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         onChange={this.onWysiwygChange}
                         onSend={this.sendMessage}
                         isRichTextEnabled={this.state.isRichTextEnabled}
+                        initialContent={this.state.initialComposerContent}
                     />,
                 );
             } else {
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index 9208e79ac40..a612cef4339 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -34,6 +34,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(
 );
 
 interface SendWysiwygComposerProps {
+    initialContent: string;
     isRichTextEnabled: boolean;
     disabled?: boolean;
     onChange: (content: string) => void;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index cf251757552..d873c3549c0 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject, ReactNode } from 'react';
+import React, { MutableRefObject, ReactNode, useEffect } from 'react';
+
 import { useComposerFunctions } from '../hooks/useComposerFunctions';
 import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
 import { ComposerFunctions } from '../types';
-
 import { Editor } from "./Editor";
 
 interface PlainTextComposerProps {
@@ -33,12 +33,20 @@ interface PlainTextComposerProps {
     ) => ReactNode;
 }
 
-export function PlainTextComposer({ className, disabled, onSend, onChange, children }: PlainTextComposerProps) {
-   const {ref, onInput, onPaste, onKeyDown} = usePlainTextListeners(onChange, onSend)
-   const composerFunctions = useComposerFunctions(ref)
+export function PlainTextComposer({
+    className, disabled, onSend, onChange, children, initialContent }: PlainTextComposerProps,
+) {
+    const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
+    const composerFunctions = useComposerFunctions(ref);
+
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerText = initialContent;
+        }
+    }, [ref, initialContent]);
 
     return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
         <Editor ref={ref} disabled={disabled} />
-        {children?.(ref, composerFunctions)}
+        { children?.(ref, composerFunctions) }
     </div>;
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx b/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
similarity index 100%
rename from src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx
rename to src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
similarity index 100%
rename from src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx
rename to src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index df42b0062bc..0b4c983acf0 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -20,6 +20,7 @@ import { htmlSerializeFromMdIfNeeded } from "../../../../../editor/serialize";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
 import { addReplyToMessageContent } from "../../../../../utils/Reply";
+import { htmlToPlainText } from "../../../../../utils/room/htmlToPlaintext";
 
 // Merges favouring the given relation
 function attachRelation(content: IContent, relation?: IEventRelation): void {
@@ -50,10 +51,6 @@ function getTextReplyFallback(mxEvent: MatrixEvent): string {
     return "";
 }
 
-function htmlToPlainText(html: string) {
-    return new DOMParser().parseFromString(html, 'text/html').documentElement.textContent;
-}
-
 interface CreateMessageContentParams {
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
diff --git a/src/utils/room/htmlToPlaintext.ts b/src/utils/room/htmlToPlaintext.ts
new file mode 100644
index 00000000000..883db8d360d
--- /dev/null
+++ b/src/utils/room/htmlToPlaintext.ts
@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export function htmlToPlainText(html: string) {
+    return new DOMParser().parseFromString(html, 'text/html').documentElement.textContent;
+}

From 2fdc2938994410b9293e00f7763a0a1ea4f12bde Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 25 Oct 2022 17:42:44 +0100
Subject: [PATCH 058/113] Resetting package fields for development

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

diff --git a/package.json b/package.json
index 4a4377656cb..2047cb3b691 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "package.json",
     ".stylelintrc.js"
   ],
-  "main": "./lib/index.ts",
+  "main": "./src/index.ts",
   "matrix_src_main": "./src/index.ts",
   "matrix_lib_main": "./lib/index.ts",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -253,6 +253,5 @@
   "jestSonar": {
     "reportPath": "coverage",
     "sonar56x": true
-  },
-  "typings": "./lib/index.d.ts"
+  }
 }

From d27344159619a0314fa10dd09f76e18cdfb9222d Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 25 Oct 2022 17:42:54 +0100
Subject: [PATCH 059/113] Reset matrix-js-sdk back to develop branch

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

diff --git a/package.json b/package.json
index 2047cb3b691..9d7d7baa65e 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "maplibre-gl": "^1.15.2",
     "matrix-encrypt-attachment": "^1.0.3",
     "matrix-events-sdk": "^0.0.1-beta.7",
-    "matrix-js-sdk": "21.0.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^1.1.1",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index bfee713ce95..6cfe1743747 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2674,7 +2674,7 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3198,11 +3198,6 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browser-request@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/browser-request/-/browser-request-0.3.3.tgz#9ece5b5aca89a29932242e18bf933def9876cc17"
-  integrity sha512-YyNI4qJJ+piQG6MMEuo7J3Bzaqssufx04zpEKYfSrl/1Op59HWali9zMtBpXnkmqMcOuWJPZvudrm9wISmnCbg==
-
 browserslist@^4.20.2, browserslist@^4.21.3:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -5285,19 +5280,6 @@ grid-index@^1.1.0:
   resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
   integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
 
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -5458,15 +5440,6 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -6695,16 +6668,6 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsprim@^1.2.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
-  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.4.0"
-    verror "1.10.0"
-
 jsprim@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
@@ -7064,21 +7027,18 @@ matrix-events-sdk@^0.0.1-beta.7:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
   integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
 
-matrix-js-sdk@21.0.0:
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
   version "21.0.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-21.0.0.tgz#e81d7c64d370ba9f3dddf6f4cfb7d4ae2e7174e1"
-  integrity sha512-x4mUdp+ozWHrfm6qBiAxq3htQJWza0AMqdmaDOCr7/74U3cUcwCZrKOdKA7IHWN9W0WrpzJ9TG/ZA2hDKB5FJA==
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/4b3e6939d6dbfb72c9637d18d6346796bc6f997f"
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
-    browser-request "^0.3.3"
     bs58 "^5.0.0"
     content-type "^1.0.4"
     loglevel "^1.7.1"
     matrix-events-sdk "^0.0.1-beta.7"
     p-retry "4"
     qs "^6.9.6"
-    request "^2.88.2"
     unhomoglyph "^1.0.6"
 
 matrix-mock-request@^2.5.0:
@@ -7397,11 +7357,6 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.1.tgz#10a9f268fbf4c461249ebcfe38e359aa36e2577c"
   integrity sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg==
 
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
 object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -8304,32 +8259,6 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
-request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8796,7 +8725,7 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sshpk@^1.14.1, sshpk@^1.7.0:
+sshpk@^1.14.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
   integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
@@ -9510,11 +9439,6 @@ util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-uuid@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"

From 306a2449e55258c191ce0fdff3effad3266ed44b Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Tue, 25 Oct 2022 17:53:31 +0100
Subject: [PATCH 060/113] Show thread notification if thread timeline is closed
 (#9495)

* Show thread notification if thread timeline is closed

* Simplify isViewingEventTimeline statement

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

* Fix show desktop notifications

* Add RoomViewStore thread id assertions

* Add Notifier tests

* fix lint

* Remove it.only

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/Notifier.ts                               |  11 +-
 src/components/structures/ThreadView.tsx      |  10 ++
 src/dispatcher/actions.ts                     |   5 +
 src/dispatcher/payloads/ThreadPayload.ts      |  26 ++++
 src/stores/RoomViewStore.tsx                  |  19 +++
 test/Notifier-test.ts                         | 118 +++++++++++++++---
 .../components/structures/ThreadView-test.tsx |  10 ++
 7 files changed, 178 insertions(+), 21 deletions(-)
 create mode 100644 src/dispatcher/payloads/ThreadPayload.ts

diff --git a/src/Notifier.ts b/src/Notifier.ts
index cc84acb2fab..b75b821ae8d 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -435,7 +435,16 @@ export const Notifier = {
         if (actions?.notify) {
             this._performCustomEventHandling(ev);
 
-            if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId &&
+            const store = SdkContextClass.instance.roomViewStore;
+            const isViewingRoom = store.getRoomId() === room.roomId;
+            const threadId: string | undefined = ev.getId() !== ev.threadRootId
+                ? ev.threadRootId
+                : undefined;
+            const isViewingThread = store.getThreadId() === threadId;
+
+            const isViewingEventTimeline = isViewingRoom && (!threadId || isViewingThread);
+
+            if (isViewingEventTimeline &&
                 UserActivity.sharedInstance().userActiveRecently() &&
                 !Modal.hasDialogs()
             ) {
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index 8350b5e734a..cb72e22d9b5 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -55,6 +55,7 @@ import Spinner from "../views/elements/Spinner";
 import { ComposerInsertPayload, ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
 import Heading from '../views/typography/Heading';
 import { SdkContextClass } from '../../contexts/SDKContext';
+import { ThreadPayload } from '../../dispatcher/payloads/ThreadPayload';
 
 interface IProps {
     room: Room;
@@ -132,6 +133,11 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 metricsTrigger: undefined, // room doesn't change
             });
         }
+
+        dis.dispatch<ThreadPayload>({
+            action: Action.ViewThread,
+            thread_id: null,
+        });
     }
 
     public componentDidUpdate(prevProps) {
@@ -225,6 +231,10 @@ export default class ThreadView extends React.Component<IProps, IState> {
     };
 
     private async postThreadUpdate(thread: Thread): Promise<void> {
+        dis.dispatch<ThreadPayload>({
+            action: Action.ViewThread,
+            thread_id: thread.id,
+        });
         thread.emit(ThreadEvent.ViewThread);
         await thread.fetchInitialEvents();
         this.updateThreadRelation();
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 7d2d935f705..5a19e225de0 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -116,6 +116,11 @@ export enum Action {
      */
     ViewRoom = "view_room",
 
+    /**
+     * Changes thread based on payload parameters. Should be used with ThreadPayload.
+     */
+    ViewThread = "view_thread",
+
     /**
      * Changes room based on room list order and payload parameters. Should be used with ViewRoomDeltaPayload.
      */
diff --git a/src/dispatcher/payloads/ThreadPayload.ts b/src/dispatcher/payloads/ThreadPayload.ts
new file mode 100644
index 00000000000..653bbba3aee
--- /dev/null
+++ b/src/dispatcher/payloads/ThreadPayload.ts
@@ -0,0 +1,26 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+/* eslint-disable camelcase */
+export interface ThreadPayload extends Pick<ActionPayload, "action"> {
+    action: Action.ViewThread;
+
+    thread_id: string | null;
+}
+/* eslint-enable camelcase */
diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx
index b3814f7a324..13c1e09c764 100644
--- a/src/stores/RoomViewStore.tsx
+++ b/src/stores/RoomViewStore.tsx
@@ -50,6 +50,7 @@ import { awaitRoomDownSync } from "../utils/RoomUpgrade";
 import { UPDATE_EVENT } from "./AsyncStore";
 import { SdkContextClass } from "../contexts/SDKContext";
 import { CallStore } from "./CallStore";
+import { ThreadPayload } from "../dispatcher/payloads/ThreadPayload";
 
 const NUM_JOIN_RETRY = 5;
 
@@ -66,6 +67,10 @@ interface State {
      * The ID of the room currently being viewed
      */
     roomId: string | null;
+    /**
+     * The ID of the thread currently being viewed
+     */
+    threadId: string | null;
     /**
      * The ID of the room being subscribed to (in Sliding Sync)
      */
@@ -109,6 +114,7 @@ const INITIAL_STATE: State = {
     joining: false,
     joinError: null,
     roomId: null,
+    threadId: null,
     subscribingRoomId: null,
     initialEventId: null,
     initialEventPixelOffset: null,
@@ -200,6 +206,9 @@ export class RoomViewStore extends EventEmitter {
             case Action.ViewRoom:
                 this.viewRoom(payload);
                 break;
+            case Action.ViewThread:
+                this.viewThread(payload);
+                break;
             // for these events blank out the roomId as we are no longer in the RoomView
             case 'view_welcome_page':
             case Action.ViewHomePage:
@@ -430,6 +439,12 @@ export class RoomViewStore extends EventEmitter {
         }
     }
 
+    private viewThread(payload: ThreadPayload): void {
+        this.setState({
+            threadId: payload.thread_id,
+        });
+    }
+
     private viewRoomError(payload: ViewRoomErrorPayload): void {
         this.setState({
             roomId: payload.room_id,
@@ -550,6 +565,10 @@ export class RoomViewStore extends EventEmitter {
         return this.state.roomId;
     }
 
+    public getThreadId(): Optional<string> {
+        return this.state.threadId;
+    }
+
     // The event to scroll to when the room is first viewed
     public getInitialEventId(): Optional<string> {
         return this.state.initialEventId;
diff --git a/test/Notifier-test.ts b/test/Notifier-test.ts
index 224c1fec776..30a1691c2ec 100644
--- a/test/Notifier-test.ts
+++ b/test/Notifier-test.ts
@@ -19,6 +19,7 @@ import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { SyncState } from "matrix-js-sdk/src/sync";
+import { waitFor } from "@testing-library/react";
 
 import BasePlatform from "../src/BasePlatform";
 import { ElementCall } from "../src/models/Call";
@@ -29,8 +30,15 @@ import {
     createLocalNotificationSettingsIfNeeded,
     getLocalNotificationAccountDataEventType,
 } from "../src/utils/notifications";
-import { getMockClientWithEventEmitter, mkEvent, mkRoom, mockClientMethodsUser, mockPlatformPeg } from "./test-utils";
+import { getMockClientWithEventEmitter, mkEvent, mockClientMethodsUser, mockPlatformPeg } from "./test-utils";
 import { IncomingCallToast } from "../src/toasts/IncomingCallToast";
+import { SdkContextClass } from "../src/contexts/SDKContext";
+import UserActivity from "../src/UserActivity";
+import Modal from "../src/Modal";
+import { mkThread } from "./test-utils/threads";
+import dis from "../src/dispatcher/dispatcher";
+import { ThreadPayload } from "../src/dispatcher/payloads/ThreadPayload";
+import { Action } from "../src/dispatcher/actions";
 
 jest.mock("../src/utils/notifications", () => ({
     // @ts-ignore
@@ -50,10 +58,12 @@ describe("Notifier", () => {
 
     let MockPlatform: MockedObject<BasePlatform>;
     let mockClient: MockedObject<MatrixClient>;
-    let testRoom: MockedObject<Room>;
+    let testRoom: Room;
     let accountDataEventKey: string;
     let accountDataStore = {};
 
+    let mockSettings: Record<string, boolean> = {};
+
     const userId = "@bob:example.org";
 
     beforeEach(() => {
@@ -78,7 +88,7 @@ describe("Notifier", () => {
         };
         accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId);
 
-        testRoom = mkRoom(mockClient, roomId);
+        testRoom = new Room(roomId, mockClient, mockClient.getUserId());
 
         MockPlatform = mockPlatformPeg({
             supportsNotifications: jest.fn().mockReturnValue(true),
@@ -89,7 +99,9 @@ describe("Notifier", () => {
 
         Notifier.isBodyEnabled = jest.fn().mockReturnValue(true);
 
-        mockClient.getRoom.mockReturnValue(testRoom);
+        mockClient.getRoom.mockImplementation(id => {
+            return id === roomId ? testRoom : new Room(id, mockClient, mockClient.getUserId());
+        });
     });
 
     describe('triggering notification from events', () => {
@@ -121,13 +133,14 @@ describe("Notifier", () => {
                 },
             });
 
-            const enabledSettings = [
-                'notificationsEnabled',
-                'audioNotificationsEnabled',
-            ];
+            mockSettings = {
+                'notificationsEnabled': true,
+                'audioNotificationsEnabled': true,
+            };
+
             // enable notifications by default
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                settingName => enabledSettings.includes(settingName),
+            jest.spyOn(SettingsStore, "getValue").mockReset().mockImplementation(
+                settingName => mockSettings[settingName] ?? false,
             );
         });
 
@@ -253,16 +266,13 @@ describe("Notifier", () => {
         });
 
         const callOnEvent = (type?: string) => {
-            const callEvent = {
-                getContent: () => { },
-                getRoomId: () => roomId,
-                isBeingDecrypted: () => false,
-                isDecryptionFailure: () => false,
-                getSender: () => "@alice:foo",
-                getType: () => type ?? ElementCall.CALL_EVENT_TYPE.name,
-                getStateKey: () => "state_key",
-            } as unknown as MatrixEvent;
-
+            const callEvent = mkEvent({
+                type: type ?? ElementCall.CALL_EVENT_TYPE.name,
+                user: "@alice:foo",
+                room: roomId,
+                content: {},
+                event: true,
+            });
             Notifier.onEvent(callEvent);
             return callEvent;
         };
@@ -345,4 +355,72 @@ describe("Notifier", () => {
             expect(createLocalNotificationSettingsIfNeededMock).toHaveBeenCalled();
         });
     });
+
+    describe('_evaluateEvent', () => {
+        beforeEach(() => {
+            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId")
+                .mockReturnValue(testRoom.roomId);
+
+            jest.spyOn(UserActivity.sharedInstance(), "userActiveRecently")
+                .mockReturnValue(true);
+
+            jest.spyOn(Modal, "hasDialogs").mockReturnValue(false);
+
+            jest.spyOn(Notifier, "_displayPopupNotification").mockReset();
+            jest.spyOn(Notifier, "isEnabled").mockReturnValue(true);
+
+            mockClient.getPushActionsForEvent.mockReturnValue({
+                notify: true,
+                tweaks: {
+                    sound: true,
+                },
+            });
+        });
+
+        it("should show a pop-up", () => {
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(0);
+            Notifier._evaluateEvent(testEvent);
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(0);
+
+            const eventFromOtherRoom = mkEvent({
+                event: true,
+                type: "m.room.message",
+                user: "@user1:server",
+                room: "!otherroom:example.org",
+                content: {},
+            });
+
+            Notifier._evaluateEvent(eventFromOtherRoom);
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(1);
+        });
+
+        it("should a pop-up for thread event", async () => {
+            const { events, rootEvent } = mkThread({
+                room: testRoom,
+                client: mockClient,
+                authorId: "@bob:example.org",
+                participantUserIds: ["@bob:example.org"],
+            });
+
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(0);
+
+            Notifier._evaluateEvent(rootEvent);
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(0);
+
+            Notifier._evaluateEvent(events[1]);
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(1);
+
+            dis.dispatch<ThreadPayload>({
+                action: Action.ViewThread,
+                thread_id: rootEvent.getId(),
+            });
+
+            await waitFor(() =>
+                expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBe(rootEvent.getId()),
+            );
+
+            Notifier._evaluateEvent(events[1]);
+            expect(Notifier._displayPopupNotification).toHaveBeenCalledTimes(1);
+        });
+    });
 });
diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx
index 2516aad0820..2893958a8f0 100644
--- a/test/components/structures/ThreadView-test.tsx
+++ b/test/components/structures/ThreadView-test.tsx
@@ -28,6 +28,7 @@ import { act } from "react-dom/test-utils";
 import ThreadView from "../../../src/components/structures/ThreadView";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
 import RoomContext from "../../../src/contexts/RoomContext";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
@@ -155,4 +156,13 @@ describe("ThreadView", () => {
             ROOM_ID, rootEvent2.getId(), expectedMessageBody(rootEvent2, "yolo"),
         );
     });
+
+    it("sets the correct thread in the room view store", async () => {
+        // expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBeNull();
+        const { unmount } = await getComponent();
+        expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBe(rootEvent.getId());
+
+        unmount();
+        await waitFor(() => expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBeNull());
+    });
 });

From b7ff56a7264fe9adad08e27e560574ba7731a6b7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 25 Oct 2022 19:57:36 +0100
Subject: [PATCH 061/113] Add type assertions where we know an event is a room
 event (has room_id) (#9498)

---
 src/stores/widgets/StopGapWidget.ts                  |  5 +++--
 src/stores/widgets/StopGapWidgetDriver.ts            | 12 ++++++------
 .../__snapshots__/StopGapWidgetDriver-test.ts.snap   |  6 +++---
 test/utils/location/isSelfLocation-test.ts           |  2 +-
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts
index aa1ad2c3934..59653bf3845 100644
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/src/stores/widgets/StopGapWidget.ts
@@ -18,6 +18,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import {
     ClientWidgetApi,
     IModalWidgetOpenRequest,
+    IRoomEvent,
     IStickerActionRequest,
     IStickyActionRequest,
     ITemplateParams,
@@ -465,7 +466,7 @@ export class StopGapWidget extends EventEmitter {
     private onToDeviceEvent = async (ev: MatrixEvent) => {
         await this.client.decryptEventIfNeeded(ev);
         if (ev.isDecryptionFailure()) return;
-        await this.messaging.feedToDevice(ev.getEffectiveEvent(), ev.isEncrypted());
+        await this.messaging.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
     };
 
     private feedEvent(ev: MatrixEvent) {
@@ -509,7 +510,7 @@ export class StopGapWidget extends EventEmitter {
         this.readUpToMap[ev.getRoomId()] = ev.getId();
 
         const raw = ev.getEffectiveEvent();
-        this.messaging.feedEvent(raw, this.eventListenerRoomId).catch(e => {
+        this.messaging.feedEvent(raw as IRoomEvent, this.eventListenerRoomId).catch(e => {
             logger.error("Error sending event to widget: ", e);
         });
     }
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index e1fb1d6729a..3a72193c3f4 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -34,7 +34,7 @@ import {
 } from "matrix-widget-api";
 import { ClientEvent, ITurnServer as IClientTurnServer } from "matrix-js-sdk/src/client";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { IContent, IEvent, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
@@ -310,7 +310,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
         limitPerRoom = limitPerRoom > 0 ? Math.min(limitPerRoom, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
 
         const rooms = this.pickRooms(roomIds);
-        const allResults: IEvent[] = [];
+        const allResults: IRoomEvent[] = [];
         for (const room of rooms) {
             const results: MatrixEvent[] = [];
             const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
@@ -323,7 +323,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
                 results.push(ev);
             }
 
-            results.forEach(e => allResults.push(e.getEffectiveEvent()));
+            results.forEach(e => allResults.push(e.getEffectiveEvent() as IRoomEvent));
         }
         return allResults;
     }
@@ -337,7 +337,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
         limitPerRoom = limitPerRoom > 0 ? Math.min(limitPerRoom, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
 
         const rooms = this.pickRooms(roomIds);
-        const allResults: IEvent[] = [];
+        const allResults: IRoomEvent[] = [];
         for (const room of rooms) {
             const results: MatrixEvent[] = [];
             const state: Map<string, MatrixEvent> = room.currentState.events.get(eventType);
@@ -350,7 +350,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
                 }
             }
 
-            results.slice(0, limitPerRoom).forEach(e => allResults.push(e.getEffectiveEvent()));
+            results.slice(0, limitPerRoom).forEach(e => allResults.push(e.getEffectiveEvent() as IRoomEvent));
         }
         return allResults;
     }
@@ -459,7 +459,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
             });
 
         return {
-            chunk: events.map(e => e.getEffectiveEvent()),
+            chunk: events.map(e => e.getEffectiveEvent() as IRoomEvent),
             nextBatch,
             prevBatch,
         };
diff --git a/test/stores/widgets/__snapshots__/StopGapWidgetDriver-test.ts.snap b/test/stores/widgets/__snapshots__/StopGapWidgetDriver-test.ts.snap
index 5f19dbb793d..4c675240158 100644
--- a/test/stores/widgets/__snapshots__/StopGapWidgetDriver-test.ts.snap
+++ b/test/stores/widgets/__snapshots__/StopGapWidgetDriver-test.ts.snap
@@ -6,7 +6,7 @@ Array [
     Array [
       Object {
         "deviceInfo": DeviceInfo {
-          "algorithms": undefined,
+          "algorithms": Array [],
           "deviceId": "aliceWeb",
           "keys": Object {},
           "known": false,
@@ -18,7 +18,7 @@ Array [
       },
       Object {
         "deviceInfo": DeviceInfo {
-          "algorithms": undefined,
+          "algorithms": Array [],
           "deviceId": "aliceMobile",
           "keys": Object {},
           "known": false,
@@ -37,7 +37,7 @@ Array [
     Array [
       Object {
         "deviceInfo": DeviceInfo {
-          "algorithms": undefined,
+          "algorithms": Array [],
           "deviceId": "bobDesktop",
           "keys": Object {},
           "known": false,
diff --git a/test/utils/location/isSelfLocation-test.ts b/test/utils/location/isSelfLocation-test.ts
index 6fafc5e467b..cd1b3452a97 100644
--- a/test/utils/location/isSelfLocation-test.ts
+++ b/test/utils/location/isSelfLocation-test.ts
@@ -28,7 +28,7 @@ import { isSelfLocation } from "../../../src/utils/location";
 
 describe("isSelfLocation", () => {
     it("Returns true for a full m.asset event", () => {
-        const content = makeLocationContent("", '0');
+        const content = makeLocationContent("", '0', Date.now());
         expect(isSelfLocation(content)).toBe(true);
     });
 

From 8d6a67e67d06c83846c5c8a06b23f613980ac652 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 25 Oct 2022 17:00:23 -0600
Subject: [PATCH 062/113] Fully move auth types to js-sdk (#9499)

* Fully move auth types to js-sdk

The SSO buttons were the only consumer of these types, so let's just move them. They've been in the js-sdk for a while now, and webpack is screaming about missing exports (because they're all interfaces and types, which don't exist after transpiling).

* Fix the other cases too
---
 src/Login.ts                                    | 7 -------
 src/components/structures/auth/Login.tsx        | 3 ++-
 src/components/structures/auth/Registration.tsx | 3 ++-
 src/components/structures/auth/SoftLogout.tsx   | 3 ++-
 src/components/views/elements/SSOButtons.tsx    | 2 +-
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/Login.ts b/src/Login.ts
index c36f5770b92..4dc96bc17db 100644
--- a/src/Login.ts
+++ b/src/Login.ts
@@ -24,13 +24,6 @@ import { ILoginParams, LoginFlow } from "matrix-js-sdk/src/@types/auth";
 import { IMatrixClientCreds } from "./MatrixClientPeg";
 import SecurityCustomisations from "./customisations/Security";
 
-export {
-    IdentityProviderBrand,
-    IIdentityProvider,
-    ISSOFlow,
-    LoginFlow,
-} from "matrix-js-sdk/src/@types/auth";
-
 interface ILoginOptions {
     defaultDeviceDisplayName?: string;
 }
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index c9fc7e001d9..7c1564c9d94 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -18,9 +18,10 @@ import React, { ReactNode } from 'react';
 import { ConnectionError, MatrixError } from "matrix-js-sdk/src/http-api";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ISSOFlow, LoginFlow } from "matrix-js-sdk/src/@types/auth";
 
 import { _t, _td } from '../../../languageHandler';
-import Login, { ISSOFlow, LoginFlow } from '../../../Login';
+import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index b5770110f66..c155b5acc25 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -19,6 +19,7 @@ import React, { Fragment, ReactNode } from 'react';
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ISSOFlow } from "matrix-js-sdk/src/@types/auth";
 
 import { _t, _td } from '../../../languageHandler';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
@@ -26,7 +27,7 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as Lifecycle from '../../../Lifecycle';
 import { IMatrixClientCreds, MatrixClientPeg } from "../../../MatrixClientPeg";
 import AuthPage from "../../views/auth/AuthPage";
-import Login, { ISSOFlow } from "../../../Login";
+import Login from "../../../Login";
 import dis from "../../../dispatcher/dispatcher";
 import SSOButtons from "../../views/elements/SSOButtons";
 import ServerPicker from '../../views/elements/ServerPicker';
diff --git a/src/components/structures/auth/SoftLogout.tsx b/src/components/structures/auth/SoftLogout.tsx
index 64dcdce6453..7b946070ca2 100644
--- a/src/components/structures/auth/SoftLogout.tsx
+++ b/src/components/structures/auth/SoftLogout.tsx
@@ -17,13 +17,14 @@ limitations under the License.
 import React from 'react';
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
+import { ISSOFlow, LoginFlow } from "matrix-js-sdk/src/@types/auth";
 
 import { _t } from '../../../languageHandler';
 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 { 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";
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 666e55eab45..4332c914e74 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -19,11 +19,11 @@ import { chunk } from "lodash";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
+import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "matrix-js-sdk/src/@types/auth";
 
 import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
-import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "../../../Login";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";

From de51bfdcb54e0449050ff00e74453d213ee3739e Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Tue, 25 Oct 2022 17:00:33 -0600
Subject: [PATCH 063/113] Use flex-start instead of start in several places
 (#9500)

To keep webpack quiet about it, since apparently it has "mixed browser support".
---
 res/css/views/dialogs/_SpotlightDialog.pcss                     | 2 +-
 res/css/views/elements/_UseCaseSelection.pcss                   | 2 +-
 .../rooms/wysiwyg_composer/components/_FormattingButtons.pcss   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index cf6917a4754..8602ca9a433 100644
--- a/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -247,7 +247,7 @@ limitations under the License.
                 }
 
                 &.mx_SpotlightDialog_result_multiline {
-                    align-items: start;
+                    align-items: flex-start;
 
                     .mx_AccessibleButton {
                         padding: $spacing-4 $spacing-20;
diff --git a/res/css/views/elements/_UseCaseSelection.pcss b/res/css/views/elements/_UseCaseSelection.pcss
index 3daf15772f3..2b907e7b67d 100644
--- a/res/css/views/elements/_UseCaseSelection.pcss
+++ b/res/css/views/elements/_UseCaseSelection.pcss
@@ -65,7 +65,7 @@ limitations under the License.
     .mx_UseCaseSelection_skip {
         display: flex;
         flex-direction: column;
-        align-self: start;
+        align-self: flex-start;
     }
 }
 
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 499b2b457be..cd0ac38e0ed 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_FormattingButtons {
     display: flex;
-    justify-content: start;
+    justify-content: flex-start;
 
     .mx_FormattingButtons_Button {
         --size: 28px;

From bdaa1acf592b612c1015db555ac5de6eff022eb8 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 10:42:18 +0200
Subject: [PATCH 064/113] Invert composer mode icon

---
 .../element-icons/room/composer/plain_text.svg   |  7 +++----
 .../element-icons/room/composer/rich_text.svg    |  7 ++++---
 src/components/views/rooms/MessageComposer.tsx   |  2 +-
 .../views/rooms/MessageComposerButtons.tsx       | 16 +++++++++-------
 src/i18n/strings/en_EN.json                      |  2 ++
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/res/img/element-icons/room/composer/plain_text.svg b/res/img/element-icons/room/composer/plain_text.svg
index 7ff47fe085c..d2da9d25516 100644
--- a/res/img/element-icons/room/composer/plain_text.svg
+++ b/res/img/element-icons/room/composer/plain_text.svg
@@ -1,10 +1,9 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1456_146365)">
-<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
-<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
+<g clip-path="url(#clip0_1456_146350)">
+<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
 </g>
 <defs>
-<clipPath id="clip0_1456_146365">
+<clipPath id="clip0_1456_146350">
 <rect width="20" height="20" fill="white"/>
 </clipPath>
 </defs>
diff --git a/res/img/element-icons/room/composer/rich_text.svg b/res/img/element-icons/room/composer/rich_text.svg
index d2da9d25516..7ff47fe085c 100644
--- a/res/img/element-icons/room/composer/rich_text.svg
+++ b/res/img/element-icons/room/composer/rich_text.svg
@@ -1,9 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1456_146350)">
-<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
+<g clip-path="url(#clip0_1456_146365)">
+<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
+<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
 </g>
 <defs>
-<clipPath id="clip0_1456_146350">
+<clipPath id="clip0_1456_146365">
 <rect width="20" height="20" fill="white"/>
 </clipPath>
 </defs>
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 787b4e2e5b7..7874ab94e67 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -559,7 +559,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                             showPollsButton={this.state.showPollsButton}
                             showStickersButton={this.showStickersButton}
                             showComposerModeButton={this.state.isWysiwygLabEnabled}
-                            isComposerModeToggled={this.state.isRichTextEnabled}
+                            isRichTextEnabled={this.state.isRichTextEnabled}
                             onComposerModeClick={this.onRichTextToggle}
                             toggleButtonMenu={this.toggleButtonMenu}
                             showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx
index 8ab4c2570b5..d31f6fea27f 100644
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@@ -55,7 +55,7 @@ interface IProps {
     toggleButtonMenu: () => void;
     showVoiceBroadcastButton: boolean;
     onStartVoiceBroadcastClick: () => void;
-    isComposerModeToggled: boolean;
+    isRichTextEnabled: boolean;
     showComposerModeButton: boolean;
     onComposerModeClick: () => void;
 }
@@ -89,7 +89,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
         mainButtons = [
             emojiButton(props),
             props.showComposerModeButton &&
-                <ComposerModeButton key="composerModeButton" isToggled={props.isComposerModeToggled} onClick={props.onComposerModeClick} />,
+                <ComposerModeButton key="composerModeButton" isRichTextEnabled={props.isRichTextEnabled} onClick={props.onComposerModeClick} />,
             uploadButton(), // props passed via UploadButtonContext
         ];
         moreButtons = [
@@ -403,19 +403,21 @@ function showLocationButton(
 }
 
 interface WysiwygToggleButtonProps {
-    isToggled: boolean;
+    isRichTextEnabled: boolean;
     onClick: MouseEventHandler<HTMLDivElement>;
 }
 
-function ComposerModeButton({ isToggled, onClick }: WysiwygToggleButtonProps) {
+function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonProps) {
+    const title = isRichTextEnabled ? _t("Show plain text") : _t("Show formatting");
+
     return <CollapsibleButton
         className="mx_MessageComposer_button"
         iconClassName={classNames({
-            "mx_MessageComposer_plain_text": !isToggled,
-            "mx_MessageComposer_rich_text": isToggled,
+            "mx_MessageComposer_plain_text": isRichTextEnabled,
+            "mx_MessageComposer_rich_text": !isRichTextEnabled,
         })}
         onClick={onClick}
-        title={_t("Switch to plain text mode")}
+        title={title}
     />;
 }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a33de8ea150..fc4e8d848dd 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1874,6 +1874,8 @@
     "Voice Message": "Voice Message",
     "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
     "Poll": "Poll",
+    "Show formatting": "Show formatting",
+    "Show plain text": "Show plain text",
     "Bold": "Bold",
     "Italics": "Italics",
     "Strikethrough": "Strikethrough",

From 69642544acfa94ab425ab164fcf593cd773007a3 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:04:16 +0200
Subject: [PATCH 065/113] Device manager - add learn more popups to filtered
 sessions section (#9497)

* add learn more to filtered sessions

* fullstop

* update tests and i18n for fullstop

* remove unused switch

* whitespace

* use correct card type
---
 res/css/_components.pcss                      |   7 +-
 .../components/views/elements/_LearnMore.pcss |  19 +++
 .../views/elements/AccessibleButton.tsx       |   2 +-
 src/components/views/elements/LearnMore.tsx   |  56 ++++++++
 .../settings/devices/FilteredDeviceList.tsx   | 121 ++++++++++++------
 src/i18n/strings/en_EN.json                   |   9 +-
 .../views/elements/LearnMore-test.tsx         |  57 +++++++++
 .../__snapshots__/LearnMore-test.tsx.snap     |  14 ++
 .../FilteredDeviceList-test.tsx.snap          |  33 ++++-
 9 files changed, 270 insertions(+), 48 deletions(-)
 create mode 100644 res/css/components/views/elements/_LearnMore.pcss
 create mode 100644 src/components/views/elements/LearnMore.tsx
 create mode 100644 test/components/views/elements/LearnMore-test.tsx
 create mode 100644 test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 4417382b20b..9179085caba 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -4,7 +4,6 @@
 @import "./_font-sizes.pcss";
 @import "./_font-weights.pcss";
 @import "./_spacing.pcss";
-@import "./compound/_Icon.pcss";
 @import "./components/views/beacon/_BeaconListItem.pcss";
 @import "./components/views/beacon/_BeaconStatus.pcss";
 @import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@@ -19,6 +18,7 @@
 @import "./components/views/beacon/_StyledLiveBeaconIcon.pcss";
 @import "./components/views/context_menus/_KebabContextMenu.pcss";
 @import "./components/views/elements/_FilterDropdown.pcss";
+@import "./components/views/elements/_LearnMore.pcss";
 @import "./components/views/location/_EnableLiveShare.pcss";
 @import "./components/views/location/_LiveDurationDropdown.pcss";
 @import "./components/views/location/_LocationShareMenu.pcss";
@@ -44,6 +44,7 @@
 @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
+@import "./compound/_Icon.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
 @import "./structures/_BackdropPanel.pcss";
 @import "./structures/_CompatibilityPage.pcss";
@@ -299,10 +300,10 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
+@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
-@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
-@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
diff --git a/res/css/components/views/elements/_LearnMore.pcss b/res/css/components/views/elements/_LearnMore.pcss
new file mode 100644
index 00000000000..97f3b4c527d
--- /dev/null
+++ b/res/css/components/views/elements/_LearnMore.pcss
@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LearnMore_button {
+    margin-left: $spacing-4;
+}
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index 7036575cd1e..6f11fa12bd5 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -75,7 +75,7 @@ type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T>
     onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
 };
 
-interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
+export interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>;
 }
 
diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx
new file mode 100644
index 00000000000..1a96e3d8f47
--- /dev/null
+++ b/src/components/views/elements/LearnMore.tsx
@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import InfoDialog from '../dialogs/InfoDialog';
+import AccessibleButton, { IAccessibleButtonProps } from './AccessibleButton';
+
+interface Props extends IAccessibleButtonProps {
+    title: string;
+    description: string | React.ReactNode;
+}
+
+const LearnMore: React.FC<Props> = ({
+    title,
+    description,
+    ...rest
+}) => {
+    const onClick = () => {
+        Modal.createDialog(
+            InfoDialog,
+            {
+                title,
+                description,
+                button: _t('Got it'),
+                hasCloseButton: true,
+            },
+        );
+    };
+
+    return <AccessibleButton
+        {...rest}
+        kind='link_inline'
+        onClick={onClick}
+        className='mx_LearnMore_button'
+    >
+        { _t('Learn more') }
+    </AccessibleButton>;
+};
+
+export default LearnMore;
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 9bc216a086e..a2afcc22f64 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -38,6 +38,7 @@ import {
 import { DevicesState } from './useOwnDevices';
 import FilteredDeviceListHeader from './FilteredDeviceListHeader';
 import Spinner from '../../elements/Spinner';
+import LearnMore from '../../elements/LearnMore';
 
 interface Props {
     devices: DevicesDictionary;
@@ -73,48 +74,88 @@ const getFilteredSortedDevices = (devices: DevicesDictionary, filter?: DeviceSec
 const ALL_FILTER_ID = 'ALL';
 type DeviceFilterKey = DeviceSecurityVariation | typeof ALL_FILTER_ID;
 
+const securityCardContent: Record<DeviceSecurityVariation, {
+    title: string;
+    description: string;
+    learnMoreDescription: React.ReactNode | string;
+ }> = {
+     [DeviceSecurityVariation.Verified]: {
+         title: _t('Verified sessions'),
+         description: _t('For best security, sign out from any session that you don\'t recognize or use anymore.'),
+         learnMoreDescription: <>
+             <p>{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') }
+             </p>
+             <p>
+                 { _t(
+                     `This means they hold encryption keys for your previous messages, ` +
+                        `and confirm to other users you are communicating with that these sessions are really you.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Unverified]: {
+         title: _t('Unverified sessions'),
+         description: _t(
+             `Verify your sessions for enhanced secure messaging or ` +
+            `sign out from those you don't recognize or use anymore.`,
+         ),
+         learnMoreDescription: <>
+             <p>{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }
+             </p>
+             <p>
+                 { _t(
+                     `You should make especially certain that you recognise these sessions ` +
+                    `as they could represent an unauthorised use of your account.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Inactive]: {
+         title: _t('Inactive sessions'),
+         description: _t(
+             `Consider signing out from old sessions ` +
+        `(%(inactiveAgeDays)s days or older) you don't use anymore.`,
+             { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS },
+         ),
+         learnMoreDescription: <>
+             <p>{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') }
+             </p>
+             <p>
+                 { _t(
+                     `Removing inactive sessions improves security and performance, ` +
+                    `and makes it easier for you to identify if a new session is suspicious.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+ };
+
+const isSecurityVariation = (filter?: DeviceFilterKey): filter is DeviceSecurityVariation =>
+    Object.values<string>(DeviceSecurityVariation).includes(filter);
+
 const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => {
-    switch (filter) {
-        case DeviceSecurityVariation.Verified:
-            return <div className='mx_FilteredDeviceList_securityCard'>
-                <DeviceSecurityCard
-                    variation={DeviceSecurityVariation.Verified}
-                    heading={_t('Verified sessions')}
-                    description={_t(
-                        `For best security, sign out from any session` +
-                    ` that you don't recognize or use anymore.`,
-                    )}
-                />
-            </div>
-            ;
-        case DeviceSecurityVariation.Unverified:
-            return <div className='mx_FilteredDeviceList_securityCard'>
-                <DeviceSecurityCard
-                    variation={DeviceSecurityVariation.Unverified}
-                    heading={_t('Unverified sessions')}
-                    description={_t(
-                        `Verify your sessions for enhanced secure messaging or sign out`
-                    + ` from those you don't recognize or use anymore.`,
-                    )}
-                />
-            </div>
-            ;
-        case DeviceSecurityVariation.Inactive:
-            return <div className='mx_FilteredDeviceList_securityCard'>
-                <DeviceSecurityCard
-                    variation={DeviceSecurityVariation.Inactive}
-                    heading={_t('Inactive sessions')}
-                    description={_t(
-                        `Consider signing out from old sessions ` +
-                    `(%(inactiveAgeDays)s days or older) you don't use anymore`,
-                        { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS },
-                    )}
-                />
-            </div>
-            ;
-        default:
-            return null;
+    if (isSecurityVariation(filter)) {
+        const { title, description, learnMoreDescription } = securityCardContent[filter];
+        return <div className='mx_FilteredDeviceList_securityCard'>
+            <DeviceSecurityCard
+                variation={filter}
+                heading={title}
+                description={<span>
+                    { description }
+                    <LearnMore
+                        title={title}
+                        description={learnMoreDescription}
+                    />
+                </span>}
+            />
+        </div>
+        ;
     }
+
+    return null;
 };
 
 const getNoResultsMessage = (filter?: DeviceSecurityVariation): string => {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a33de8ea150..8af41255fce 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1778,10 +1778,16 @@
     "Verify session": "Verify session",
     "Verified sessions": "Verified sessions",
     "For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.",
     "Unverified sessions": "Unverified sessions",
     "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
     "Inactive sessions": "Inactive sessions",
-    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
     "No verified sessions found.": "No verified sessions found.",
     "No unverified sessions found.": "No unverified sessions found.",
     "No inactive sessions found.": "No inactive sessions found.",
@@ -1801,6 +1807,7 @@
     "Security recommendations": "Security recommendations",
     "Improve your account security by following these recommendations": "Improve your account security by following these recommendations",
     "View all": "View all",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore",
     "Failed to set pusher state": "Failed to set pusher state",
     "Unable to remove contact information": "Unable to remove contact information",
     "Remove %(email)s?": "Remove %(email)s?",
diff --git a/test/components/views/elements/LearnMore-test.tsx b/test/components/views/elements/LearnMore-test.tsx
new file mode 100644
index 00000000000..6ae577543cb
--- /dev/null
+++ b/test/components/views/elements/LearnMore-test.tsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import LearnMore from '../../../../src/components/views/elements/LearnMore';
+import Modal from '../../../../src/Modal';
+import InfoDialog from '../../../../src/components/views/dialogs/InfoDialog';
+
+describe('<LearnMore />', () => {
+    const defaultProps = {
+        title: 'Test',
+        description: 'test test test',
+        ['data-testid']: 'testid',
+    };
+    const getComponent = (props = {}) =>
+        (<LearnMore {...defaultProps} {...props} />);
+
+    const modalSpy = jest.spyOn(Modal, 'createDialog').mockReturnValue(undefined);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders button', () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it('opens modal on click', async () => {
+        const { getByTestId } = render(getComponent());
+        fireEvent.click(getByTestId('testid'));
+
+        expect(modalSpy).toHaveBeenCalledWith(
+            InfoDialog,
+            {
+                button: 'Got it',
+                description: defaultProps.description,
+                hasCloseButton: true,
+                title: defaultProps.title,
+            });
+    });
+});
diff --git a/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap b/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap
new file mode 100644
index 00000000000..41904877c83
--- /dev/null
+++ b/test/components/views/elements/__snapshots__/LearnMore-test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LearnMore /> renders button 1`] = `
+<div>
+  <div
+    class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+    data-testid="testid"
+    role="button"
+    tabindex="0"
+  >
+    Learn more
+  </div>
+</div>
+`;
diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
index c0f5b9af98c..62a6cd94d1e 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
@@ -37,7 +37,16 @@ HTMLCollection [
         <p
           class="mx_DeviceSecurityCard_description"
         >
-          Consider signing out from old sessions (90 days or older) you don't use anymore
+          <span>
+            Consider signing out from old sessions (90 days or older) you don't use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
+          </span>
         </p>
       </div>
     </div>
@@ -72,7 +81,16 @@ HTMLCollection [
         <p
           class="mx_DeviceSecurityCard_description"
         >
-          Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+          <span>
+            Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
+          </span>
         </p>
       </div>
     </div>
@@ -107,7 +125,16 @@ HTMLCollection [
         <p
           class="mx_DeviceSecurityCard_description"
         >
-          For best security, sign out from any session that you don't recognize or use anymore.
+          <span>
+            For best security, sign out from any session that you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
+          </span>
         </p>
       </div>
     </div>

From 18e59b2d98d73e51290dc3a119a0298b23ff0efc Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 25 Oct 2022 17:24:54 +0200
Subject: [PATCH 066/113] add learn more to filtered sessions

---
 .../devices/__snapshots__/FilteredDeviceList-test.tsx.snap    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
index 62a6cd94d1e..095517b1308 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
@@ -19,7 +19,7 @@ HTMLCollection [
       class="mx_DeviceSecurityCard"
     >
       <div
-        class="mx_DeviceSecurityCard_icon Inactive"
+        class="mx_DeviceSecurityCard_icon Verified"
       >
         <div
           height="16"
@@ -63,7 +63,7 @@ HTMLCollection [
       class="mx_DeviceSecurityCard"
     >
       <div
-        class="mx_DeviceSecurityCard_icon Unverified"
+        class="mx_DeviceSecurityCard_icon Verified"
       >
         <div
           height="16"

From 09246f43b87274470f9945f6e704828d5d3e1dbd Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 25 Oct 2022 17:28:51 +0200
Subject: [PATCH 067/113] update tests and i18n for fullstop

---
 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 8af41255fce..af019ffcc90 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1788,6 +1788,7 @@
     "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.",
     "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
     "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore",
     "No verified sessions found.": "No verified sessions found.",
     "No unverified sessions found.": "No unverified sessions found.",
     "No inactive sessions found.": "No inactive sessions found.",

From a6f6e6ce76d16e1231aa94333a4aa99938c3038f Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 25 Oct 2022 17:30:07 +0200
Subject: [PATCH 068/113] remove unused switch

---
 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 af019ffcc90..8af41255fce 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1788,7 +1788,6 @@
     "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.",
     "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
     "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
-    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore",
     "No verified sessions found.": "No verified sessions found.",
     "No unverified sessions found.": "No unverified sessions found.",
     "No inactive sessions found.": "No inactive sessions found.",

From 78440d2d4363de5967014a0df5eb3d9febcbeac2 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 10:18:06 +0200
Subject: [PATCH 069/113] use correct card type

---
 .../devices/__snapshots__/FilteredDeviceList-test.tsx.snap    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
index 095517b1308..62a6cd94d1e 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap
@@ -19,7 +19,7 @@ HTMLCollection [
       class="mx_DeviceSecurityCard"
     >
       <div
-        class="mx_DeviceSecurityCard_icon Verified"
+        class="mx_DeviceSecurityCard_icon Inactive"
       >
         <div
           height="16"
@@ -63,7 +63,7 @@ HTMLCollection [
       class="mx_DeviceSecurityCard"
     >
       <div
-        class="mx_DeviceSecurityCard_icon Verified"
+        class="mx_DeviceSecurityCard_icon Unverified"
       >
         <div
           height="16"

From bb4bffe1e85ea16f2fe1e0e48e5f78cc879e8fd3 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:03:19 +0200
Subject: [PATCH 070/113] learn more for session renaming

---
 .../settings/devices/DeviceDetailHeading.tsx   | 18 +++++++++++++++++-
 src/i18n/strings/en_EN.json                    |  5 ++++-
 .../DeviceDetailHeading-test.tsx.snap          |  9 ++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx
index 2673ef4e897..16c0eb8bad7 100644
--- a/src/components/views/settings/devices/DeviceDetailHeading.tsx
+++ b/src/components/views/settings/devices/DeviceDetailHeading.tsx
@@ -19,6 +19,7 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import Field from '../../elements/Field';
+import LearnMore from '../../elements/LearnMore';
 import Spinner from '../../elements/Spinner';
 import { Caption } from '../../typography/Caption';
 import Heading from '../../typography/Heading';
@@ -88,7 +89,22 @@ const DeviceNameEditor: React.FC<Props & { stopEditing: () => void }> = ({
             <Caption
                 id={descriptionId}
             >
-                { _t('Please be aware that session names are also visible to people you communicate with') }
+                { _t('Please be aware that session names are also visible to people you communicate with.') }
+                <LearnMore
+                    title={_t('Renaming sessions')}
+                    description={<>
+                        <p>
+                            { _t(`Other users in direct messages and rooms that you join ` +
+                        `are able to view a full list of your sessions.`,
+                            ) }
+                        </p>
+                        <p>
+                            { _t(`This provides them with confidence that they are really speaking to you, ` +
+                        `but it also means they can see the session name you enter here.`,
+                            ) }
+                        </p>
+                    </>}
+                />
                 { !!error &&
                     <span
                         data-testid="device-rename-error"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8af41255fce..782c2dbfee7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1747,7 +1747,10 @@
     "Sign out devices|one": "Sign out device",
     "Authentication": "Authentication",
     "Rename session": "Rename session",
-    "Please be aware that session names are also visible to people you communicate with": "Please be aware that session names are also visible to people you communicate with",
+    "Please be aware that session names are also visible to people you communicate with.": "Please be aware that session names are also visible to people you communicate with.",
+    "Renaming sessions": "Renaming sessions",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Other users in direct messages and rooms that you join are able to view a full list of your sessions.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.",
     "Session ID": "Session ID",
     "Last activity": "Last activity",
     "Application": "Application",
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
index c80da7be4c7..b5ed8d43e47 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
@@ -36,7 +36,14 @@ Object {
           class="mx_Caption"
           id="device-rename-description-123"
         >
-          Please be aware that session names are also visible to people you communicate with
+          Please be aware that session names are also visible to people you communicate with.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </span>
       </div>
       <div

From 038fb53b697e165a49dd0dbcf4c0633665e6c93a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:17:47 +0200
Subject: [PATCH 071/113] extract device security learn more with content into
 component

---
 src/components/views/elements/LearnMore.tsx   |  4 +-
 .../devices/DeviceSecurityLearnMore.tsx       | 81 +++++++++++++++++++
 .../settings/devices/FilteredDeviceList.tsx   | 42 +---------
 3 files changed, 87 insertions(+), 40 deletions(-)
 create mode 100644 src/components/views/settings/devices/DeviceSecurityLearnMore.tsx

diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx
index 1a96e3d8f47..16c82a36267 100644
--- a/src/components/views/elements/LearnMore.tsx
+++ b/src/components/views/elements/LearnMore.tsx
@@ -21,12 +21,12 @@ import Modal from '../../../Modal';
 import InfoDialog from '../dialogs/InfoDialog';
 import AccessibleButton, { IAccessibleButtonProps } from './AccessibleButton';
 
-interface Props extends IAccessibleButtonProps {
+export interface LearnMoreProps extends IAccessibleButtonProps {
     title: string;
     description: string | React.ReactNode;
 }
 
-const LearnMore: React.FC<Props> = ({
+const LearnMore: React.FC<LearnMoreProps> = ({
     title,
     description,
     ...rest
diff --git a/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx b/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx
new file mode 100644
index 00000000000..8677afcbeee
--- /dev/null
+++ b/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx
@@ -0,0 +1,81 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { _t } from "../../../../languageHandler";
+import LearnMore, { LearnMoreProps } from "../../elements/LearnMore";
+import { DeviceSecurityVariation } from "./types";
+
+interface Props extends Omit<LearnMoreProps, 'title' | 'description'> {
+    variation: DeviceSecurityVariation;
+}
+
+const securityCardContent: Record<DeviceSecurityVariation, {
+    title: string;
+    description: React.ReactNode | string;
+ }> = {
+     [DeviceSecurityVariation.Verified]: {
+         title: _t('Verified sessions'),
+         description: <>
+             <p>{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') }
+             </p>
+             <p>
+                 { _t(
+                     `This means they hold encryption keys for your previous messages, ` +
+                        `and confirm to other users you are communicating with that these sessions are really you.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Unverified]: {
+         title: _t('Unverified sessions'),
+         description: <>
+             <p>{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }
+             </p>
+             <p>
+                 { _t(
+                     `You should make especially certain that you recognise these sessions ` +
+                    `as they could represent an unauthorised use of your account.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+     [DeviceSecurityVariation.Inactive]: {
+         title: _t('Inactive sessions'),
+         description: <>
+             <p>{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') }
+             </p>
+             <p>
+                 { _t(
+                     `Removing inactive sessions improves security and performance, ` +
+                    `and makes it easier for you to identify if a new session is suspicious.`,
+                 )
+                 }
+             </p>
+         </>,
+     },
+ };
+
+/**
+ * LearnMore with content for device security warnings
+ */
+export const DeviceSecurityLearnMore: React.FC<Props> = ({ variation }) => {
+    const { title, description } = securityCardContent[variation];
+    return <LearnMore title={title} description={description} />;
+};
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index a2afcc22f64..04d2c39d6c0 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -39,6 +39,7 @@ import { DevicesState } from './useOwnDevices';
 import FilteredDeviceListHeader from './FilteredDeviceListHeader';
 import Spinner from '../../elements/Spinner';
 import LearnMore from '../../elements/LearnMore';
+import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 
 interface Props {
     devices: DevicesDictionary;
@@ -77,22 +78,10 @@ type DeviceFilterKey = DeviceSecurityVariation | typeof ALL_FILTER_ID;
 const securityCardContent: Record<DeviceSecurityVariation, {
     title: string;
     description: string;
-    learnMoreDescription: React.ReactNode | string;
  }> = {
      [DeviceSecurityVariation.Verified]: {
          title: _t('Verified sessions'),
          description: _t('For best security, sign out from any session that you don\'t recognize or use anymore.'),
-         learnMoreDescription: <>
-             <p>{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') }
-             </p>
-             <p>
-                 { _t(
-                     `This means they hold encryption keys for your previous messages, ` +
-                        `and confirm to other users you are communicating with that these sessions are really you.`,
-                 )
-                 }
-             </p>
-         </>,
      },
      [DeviceSecurityVariation.Unverified]: {
          title: _t('Unverified sessions'),
@@ -100,17 +89,6 @@ const securityCardContent: Record<DeviceSecurityVariation, {
              `Verify your sessions for enhanced secure messaging or ` +
             `sign out from those you don't recognize or use anymore.`,
          ),
-         learnMoreDescription: <>
-             <p>{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') }
-             </p>
-             <p>
-                 { _t(
-                     `You should make especially certain that you recognise these sessions ` +
-                    `as they could represent an unauthorised use of your account.`,
-                 )
-                 }
-             </p>
-         </>,
      },
      [DeviceSecurityVariation.Inactive]: {
          title: _t('Inactive sessions'),
@@ -119,17 +97,6 @@ const securityCardContent: Record<DeviceSecurityVariation, {
         `(%(inactiveAgeDays)s days or older) you don't use anymore.`,
              { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS },
          ),
-         learnMoreDescription: <>
-             <p>{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') }
-             </p>
-             <p>
-                 { _t(
-                     `Removing inactive sessions improves security and performance, ` +
-                    `and makes it easier for you to identify if a new session is suspicious.`,
-                 )
-                 }
-             </p>
-         </>,
      },
  };
 
@@ -138,16 +105,15 @@ const isSecurityVariation = (filter?: DeviceFilterKey): filter is DeviceSecurity
 
 const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => {
     if (isSecurityVariation(filter)) {
-        const { title, description, learnMoreDescription } = securityCardContent[filter];
+        const { title, description } = securityCardContent[filter];
         return <div className='mx_FilteredDeviceList_securityCard'>
             <DeviceSecurityCard
                 variation={filter}
                 heading={title}
                 description={<span>
                     { description }
-                    <LearnMore
-                        title={title}
-                        description={learnMoreDescription}
+                    <DeviceSecurityLearnMore
+                        variation={filter}
                     />
                 </span>}
             />

From 35e45136b4f89b9016a34cf3dc7387f3d74b105f Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 26 Oct 2022 11:30:32 +0200
Subject: [PATCH 072/113] add learn more to device security cards

---
 .../devices/DeviceVerificationStatusCard.tsx  | 11 ++++-
 .../settings/devices/FilteredDeviceList.tsx   |  1 -
 .../devices/SecurityRecommendations.tsx       | 24 +++++++----
 src/i18n/strings/en_EN.json                   | 18 ++++----
 .../CurrentDeviceSection-test.tsx.snap        | 21 ++++++++++
 .../__snapshots__/DeviceDetails-test.tsx.snap | 21 ++++++++++
 .../SecurityRecommendations-test.tsx.snap     | 42 +++++++++++++++++++
 .../SessionManagerTab-test.tsx.snap           | 14 +++++++
 8 files changed, 132 insertions(+), 20 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 127f5eedf60..0ee37c9bc43 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
@@ -19,6 +19,7 @@ import React from 'react';
 import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import DeviceSecurityCard from './DeviceSecurityCard';
+import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 import {
     DeviceSecurityVariation,
     ExtendedDevice,
@@ -36,11 +37,17 @@ export const DeviceVerificationStatusCard: React.FC<Props> = ({
     const securityCardProps = device.isVerified ? {
         variation: DeviceSecurityVariation.Verified,
         heading: _t('Verified session'),
-        description: _t('This session is ready for secure messaging.'),
+        description: <>
+            { _t('This session is ready for secure messaging.') }
+            <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Verified} />
+        </>,
     } : {
         variation: DeviceSecurityVariation.Unverified,
         heading: _t('Unverified session'),
-        description: _t('Verify or sign out from this session for best security and reliability.'),
+        description: <>
+            { _t('Verify or sign out from this session for best security and reliability.') }
+            <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
+        </>,
     };
     return <DeviceSecurityCard
         {...securityCardProps}
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 04d2c39d6c0..53f77c0d33b 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -38,7 +38,6 @@ import {
 import { DevicesState } from './useOwnDevices';
 import FilteredDeviceListHeader from './FilteredDeviceListHeader';
 import Spinner from '../../elements/Spinner';
-import LearnMore from '../../elements/LearnMore';
 import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 
 interface Props {
diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx
index ddeb2f2e2e8..7b6381306b8 100644
--- a/src/components/views/settings/devices/SecurityRecommendations.tsx
+++ b/src/components/views/settings/devices/SecurityRecommendations.tsx
@@ -20,6 +20,7 @@ import { _t } from '../../../../languageHandler';
 import AccessibleButton from '../../elements/AccessibleButton';
 import SettingsSubsection from '../shared/SettingsSubsection';
 import DeviceSecurityCard from './DeviceSecurityCard';
+import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
 import { filterDevicesBySecurityRecommendation, INACTIVE_DEVICE_AGE_DAYS } from './filter';
 import {
     DeviceSecurityVariation,
@@ -70,10 +71,13 @@ const SecurityRecommendations: React.FC<Props> = ({
             <DeviceSecurityCard
                 variation={DeviceSecurityVariation.Unverified}
                 heading={_t('Unverified sessions')}
-                description={_t(
-                    `Verify your sessions for enhanced secure messaging` +
+                description={<>
+                    { _t(
+                        `Verify your sessions for enhanced secure messaging` +
                     ` or sign out from those you don't recognize or use anymore.`,
-                )}
+                    ) }
+                    <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
+                </>}
             >
                 <AccessibleButton
                     kind='link_inline'
@@ -91,11 +95,15 @@ const SecurityRecommendations: React.FC<Props> = ({
                 <DeviceSecurityCard
                     variation={DeviceSecurityVariation.Inactive}
                     heading={_t('Inactive sessions')}
-                    description={_t(
-                        `Consider signing out from old sessions ` +
-                        `(%(inactiveAgeDays)s days or older) you don't use anymore`,
-                        { inactiveAgeDays },
-                    )}
+                    description={<>
+                        { _t(
+                            `Consider signing out from old sessions ` +
+                            `(%(inactiveAgeDays)s days or older) you don't use anymore`,
+                            { inactiveAgeDays },
+                        ) }
+                        <DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />
+                    </>
+                    }
                 >
                     <AccessibleButton
                         kind='link_inline'
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 782c2dbfee7..e90f09d45d7 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1767,6 +1767,15 @@
     "Receive push notifications on this session.": "Receive push notifications on this session.",
     "Sign out of this session": "Sign out of this session",
     "Toggle device details": "Toggle device details",
+    "Verified sessions": "Verified sessions",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.",
+    "Unverified sessions": "Unverified sessions",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
+    "Inactive sessions": "Inactive sessions",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",
     "Unverified": "Unverified",
@@ -1779,18 +1788,9 @@
     "Unverified session": "Unverified session",
     "Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
     "Verify session": "Verify session",
-    "Verified sessions": "Verified sessions",
     "For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
-    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
-    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.",
-    "Unverified sessions": "Unverified sessions",
     "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.",
-    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
-    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
-    "Inactive sessions": "Inactive sessions",
     "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.",
-    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.",
-    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.",
     "No verified sessions found.": "No verified sessions found.",
     "No unverified sessions found.": "No unverified sessions found.",
     "No inactive sessions found.": "No inactive sessions found.",
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 0edf12289d2..6651a91b696 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -50,6 +50,13 @@ HTMLCollection [
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -266,6 +273,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -402,6 +416,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index 9f2f5386589..cfd483f0103 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -50,6 +50,13 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             This session is ready for secure messaging.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
@@ -152,6 +159,13 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
@@ -354,6 +368,13 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
             class="mx_DeviceSecurityCard_description"
           >
             Verify or sign out from this session for best security and reliability.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
         </div>
       </div>
diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
index a8546013448..f1c0f12cf56 100644
--- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
@@ -46,6 +46,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -87,6 +94,13 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -153,6 +167,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -194,6 +215,13 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -260,6 +288,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
@@ -301,6 +336,13 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
             class="mx_DeviceSecurityCard_description"
           >
             Consider signing out from old sessions (90 days or older) you don't use anymore
+            <div
+              class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+              role="button"
+              tabindex="0"
+            >
+              Learn more
+            </div>
           </p>
           <div
             class="mx_DeviceSecurityCard_actions"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 2ff8c77b72b..b875caf0d2d 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -130,6 +130,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           This session is ready for secure messaging.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </p>
       </div>
     </div>
@@ -252,6 +259,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
           class="mx_DeviceSecurityCard_description"
         >
           Verify or sign out from this session for best security and reliability.
+          <div
+            class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+            role="button"
+            tabindex="0"
+          >
+            Learn more
+          </div>
         </p>
         <div
           class="mx_DeviceSecurityCard_actions"

From 51e69427f3d64ab7c8e3d364ec598a97224410a3 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Wed, 26 Oct 2022 10:33:06 +0100
Subject: [PATCH 073/113] Reinstate timeline/redaction callbacks when updating
 notification state (#9494)

---
 src/stores/notifications/RoomNotificationState.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts
index 49e76bedf81..92dc4e6a538 100644
--- a/src/stores/notifications/RoomNotificationState.ts
+++ b/src/stores/notifications/RoomNotificationState.ts
@@ -37,6 +37,9 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.room.on(RoomEvent.Receipt, this.handleReadReceipt);
         this.room.on(RoomEvent.MyMembership, this.handleMembershipUpdate);
         this.room.on(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
+        this.room.on(RoomEvent.Timeline, this.handleRoomEventUpdate);
+        this.room.on(RoomEvent.Redaction, this.handleRoomEventUpdate);
+
         this.room.on(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate); // for server-sent counts
         if (cli.canSupport.get(Feature.ThreadUnreadNotifications) === ServerSupport.Unsupported) {
             this.threadsState?.on(NotificationStateEvents.Update, this.handleThreadsUpdate);
@@ -56,6 +59,8 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.room.removeListener(RoomEvent.Receipt, this.handleReadReceipt);
         this.room.removeListener(RoomEvent.MyMembership, this.handleMembershipUpdate);
         this.room.removeListener(RoomEvent.LocalEchoUpdated, this.handleLocalEchoUpdated);
+        this.room.removeListener(RoomEvent.Timeline, this.handleRoomEventUpdate);
+        this.room.removeListener(RoomEvent.Redaction, this.handleRoomEventUpdate);
         if (cli.canSupport.get(Feature.ThreadUnreadNotifications) === ServerSupport.Unsupported) {
             this.room.removeListener(RoomEvent.UnreadNotifications, this.handleNotificationCountUpdate);
         } else if (this.threadsState) {
@@ -93,6 +98,11 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.updateNotificationState();
     };
 
+    private handleRoomEventUpdate = (event: MatrixEvent, room: Room | null) => {
+        if (room?.roomId !== this.room.roomId) return; // ignore - not for us or notifications timeline
+        this.updateNotificationState();
+    };
+
     private handleAccountDataUpdate = (ev: MatrixEvent) => {
         if (ev.getType() === "m.push_rules") {
             this.updateNotificationState();

From b85b5dacee8482a61fdd94aef5ffca34740da2f6 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 12:39:18 +0200
Subject: [PATCH 074/113] Fix cursor position

---
 .../components/PlainTextComposer.tsx          | 10 ++-----
 .../components/WysiwygComposer.tsx            |  3 ++
 .../hooks/usePlainTextInitialization.ts       | 28 +++++++++++++++++++
 .../hooks/useSetCursorPosition.ts             | 27 ++++++++++++++++++
 .../rooms/wysiwyg_composer/hooks/utils.ts     | 11 ++++++++
 5 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
 create mode 100644 src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts

diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index d873c3549c0..f23c1725c22 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject, ReactNode, useEffect } from 'react';
+import React, { MutableRefObject, ReactNode } from 'react';
 
 import { useComposerFunctions } from '../hooks/useComposerFunctions';
+import { usePlainTextInitialization } from '../hooks/usePlainTextInitialization';
 import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
 import { ComposerFunctions } from '../types';
 import { Editor } from "./Editor";
@@ -38,12 +39,7 @@ export function PlainTextComposer({
 ) {
     const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
     const composerFunctions = useComposerFunctions(ref);
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.innerText = initialContent;
-        }
-    }, [ref, initialContent]);
+    usePlainTextInitialization(initialContent, ref);
 
     return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
         <Editor ref={ref} disabled={disabled} />
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index 7dc059ffb22..dce20f68150 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -20,6 +20,7 @@ import { useWysiwyg, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 import { FormattingButtons } from './FormattingButtons';
 import { Editor } from './Editor';
 import { useInputEventProcessor } from '../hooks/useInputEventProcessor';
+import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
 
 interface WysiwygComposerProps {
     disabled?: boolean;
@@ -47,6 +48,8 @@ export const WysiwygComposer = memo(function WysiwygComposer(
         }
     }, [onChange, content, disabled]);
 
+    useSetCursorPosition(isWysiwygReady, ref);
+
     return (
         <div className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
new file mode 100644
index 00000000000..dcaacd98ea4
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useEffect } from "react";
+
+import { setCursorPositionAtTheEnd } from "./utils";
+
+export function usePlainTextInitialization(initialContent: string, ref: RefObject<HTMLElement>) {
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerText = initialContent;
+            setCursorPositionAtTheEnd(ref.current);
+        }
+    }, [ref, initialContent]);
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts
new file mode 100644
index 00000000000..92555f563f3
--- /dev/null
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useEffect } from "react";
+
+import { setCursorPositionAtTheEnd } from "./utils";
+
+export function useSetCursorPosition(isComposerReady: boolean, ref: RefObject<HTMLElement>) {
+    useEffect(() => {
+        if (ref.current && isComposerReady) {
+            setCursorPositionAtTheEnd(ref.current);
+        }
+    }, [ref, isComposerReady]);
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
index eab855e0868..0ae3d7a8802 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
@@ -41,3 +41,14 @@ export function focusComposer(
         );
     }
 }
+
+export function setCursorPositionAtTheEnd(element: HTMLElement) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    const sel = document.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    element.focus();
+}

From 5d86b5ac48c2a656ff596cd1c800fbb3c3be7fa7 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 12:41:44 +0200
Subject: [PATCH 075/113] Make initialContent optional is SendWysiwygComposer

---
 .../views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
index a612cef4339..380b0430cef 100644
--- a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
@@ -34,7 +34,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(
 );
 
 interface SendWysiwygComposerProps {
-    initialContent: string;
+    initialContent?: string;
     isRichTextEnabled: boolean;
     disabled?: boolean;
     onChange: (content: string) => void;

From d001ddebbca0e6979fed83dd9be7074597253177 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 12:42:58 +0200
Subject: [PATCH 076/113] Update 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 fc4e8d848dd..54a8445520a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1874,8 +1874,8 @@
     "Voice Message": "Voice Message",
     "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
     "Poll": "Poll",
-    "Show formatting": "Show formatting",
     "Show plain text": "Show plain text",
+    "Show formatting": "Show formatting",
     "Bold": "Bold",
     "Italics": "Italics",
     "Strikethrough": "Strikethrough",

From 846417a3a864667736864dbcc9f9e7f9c45589e0 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 26 Oct 2022 13:45:39 +0200
Subject: [PATCH 077/113] Unify voice broadcast css (#9504)

---
 res/css/_components.pcss                      |  4 +--
 ...rdingPip.pcss => _VoiceBroadcastBody.pcss} | 14 +++++----
 .../_VoiceBroadcastPlaybackBody.pcss          | 27 -----------------
 .../_VoiceBroadcastRecordingBody.pcss         | 29 -------------------
 .../molecules/VoiceBroadcastPlaybackBody.tsx  |  4 +--
 .../molecules/VoiceBroadcastRecordingBody.tsx |  2 +-
 .../molecules/VoiceBroadcastRecordingPip.tsx  |  6 ++--
 .../VoiceBroadcastPlaybackBody-test.tsx.snap  | 12 ++++----
 .../VoiceBroadcastRecordingBody-test.tsx.snap |  2 +-
 .../VoiceBroadcastRecordingPip-test.tsx.snap  | 12 ++++----
 10 files changed, 29 insertions(+), 83 deletions(-)
 rename res/css/voice-broadcast/molecules/{_VoiceBroadcastRecordingPip.pcss => _VoiceBroadcastBody.pcss} (84%)
 delete mode 100644 res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss
 delete mode 100644 res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 9179085caba..cc7c6a2e2a3 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -374,6 +374,4 @@
 @import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss";
+@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
similarity index 84%
rename from res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss
rename to res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
index 11534a47973..37606f993ce 100644
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss
+++ b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
@@ -14,22 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VoiceBroadcastRecordingPip {
-    background-color: $system;
+.mx_VoiceBroadcastBody {
+    background-color: $quinary-content;
     border-radius: 8px;
-    box-shadow: 0 2px 8px 0 #0000004a;
     display: inline-block;
     padding: $spacing-12;
 }
 
-.mx_VoiceBroadcastRecordingPip_divider {
+.mx_VoiceBroadcastBody--pip {
+    background-color: $system;
+    box-shadow: 0 2px 8px 0 #0000004a;
+}
+
+.mx_VoiceBroadcastBody_divider {
     background-color: $quinary-content;
     border: 0;
     height: 1px;
     margin: $spacing-12 0;
 }
 
-.mx_VoiceBroadcastRecordingPip_controls {
+.mx_VoiceBroadcastBody_controls {
     display: flex;
     justify-content: space-around;
 }
diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss
deleted file mode 100644
index 11921e1f950..00000000000
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_VoiceBroadcastPlaybackBody {
-    background-color: $quinary-content;
-    border-radius: 8px;
-    display: inline-block;
-    padding: 12px;
-}
-
-.mx_VoiceBroadcastPlaybackBody_controls {
-    display: flex;
-    justify-content: center;
-}
diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss
deleted file mode 100644
index 13e3104c9ac..00000000000
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_VoiceBroadcastRecordingBody {
-    align-items: flex-start;
-    background-color: $quinary-content;
-    border-radius: 8px;
-    display: inline-flex;
-    gap: $spacing-8;
-    padding: 12px;
-}
-
-.mx_VoiceBroadcastRecordingBody_title {
-    font-size: $font-12px;
-    font-weight: $font-semi-bold;
-}
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
index e0634636a74..e6f2e343cb6 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
@@ -74,14 +74,14 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     }
 
     return (
-        <div className="mx_VoiceBroadcastPlaybackBody">
+        <div className="mx_VoiceBroadcastBody">
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}
                 room={room}
                 showBroadcast={true}
             />
-            <div className="mx_VoiceBroadcastPlaybackBody_controls">
+            <div className="mx_VoiceBroadcastBody_controls">
                 { control }
             </div>
         </div>
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
index b9721170eb0..1b13377da9d 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
@@ -27,7 +27,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
     } = useVoiceBroadcastRecording(recording);
 
     return (
-        <div className="mx_VoiceBroadcastRecordingBody">
+        <div className="mx_VoiceBroadcastBody">
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
index 57e291cae0e..d737c6aaa22 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
@@ -52,15 +52,15 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         : <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />;
 
     return <div
-        className="mx_VoiceBroadcastRecordingPip"
+        className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
     >
         <VoiceBroadcastHeader
             live={live}
             sender={sender}
             room={room}
         />
-        <hr className="mx_VoiceBroadcastRecordingPip_divider" />
-        <div className="mx_VoiceBroadcastRecordingPip_controls">
+        <hr className="mx_VoiceBroadcastBody_divider" />
+        <div className="mx_VoiceBroadcastBody_controls">
             { toggleControl }
             <VoiceBroadcastControl
                 icon={StopIcon}
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 4dba41de673..1eace91e48e 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -51,7 +51,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="resume voice broadcast"
@@ -71,7 +71,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
 exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -119,7 +119,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="pause voice broadcast"
@@ -139,7 +139,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
 exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -187,7 +187,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         class="mx_Spinner"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
index ace2c58a059..f152d9f8297 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
index 7f212d781b3..ee034a082e1 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastRecordingPip when rendering a paused recording should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingPip"
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -43,10 +43,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
       </div>
     </div>
     <hr
-      class="mx_VoiceBroadcastRecordingPip_divider"
+      class="mx_VoiceBroadcastBody_divider"
     />
     <div
-      class="mx_VoiceBroadcastRecordingPip_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="resume voice broadcast"
@@ -76,7 +76,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
 exports[`VoiceBroadcastRecordingPip when rendering a started recording should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingPip"
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -116,10 +116,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
       </div>
     </div>
     <hr
-      class="mx_VoiceBroadcastRecordingPip_divider"
+      class="mx_VoiceBroadcastBody_divider"
     />
     <div
-      class="mx_VoiceBroadcastRecordingPip_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="pause voice broadcast"

From 238a2b77afef82862cf608a96b4c39246e8a3a3e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 Oct 2022 12:50:24 +0100
Subject: [PATCH 078/113] Update cypress.yaml (#9506)

---
 .github/workflows/cypress.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml
index 57e6a7837e1..cbb53471734 100644
--- a/.github/workflows/cypress.yaml
+++ b/.github/workflows/cypress.yaml
@@ -79,8 +79,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # Run 3 instances in Parallel
-        runner: [1, 2, 3]
+        # Run 4 instances in Parallel
+        runner: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v2
         with:

From 625971acb5472779f62f2a6175bccc624722e024 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 26 Oct 2022 14:54:44 +0200
Subject: [PATCH 079/113] Replace voice broadcast running with resumed (#9502)

---
 src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx  | 2 +-
 src/voice-broadcast/index.ts                              | 2 +-
 src/voice-broadcast/models/VoiceBroadcastRecording.ts     | 6 +++---
 .../molecules/VoiceBroadcastRecordingBody-test.tsx        | 2 +-
 .../molecules/VoiceBroadcastRecordingPip-test.tsx         | 2 +-
 .../voice-broadcast/models/VoiceBroadcastPlayback-test.ts | 8 ++++----
 .../models/VoiceBroadcastRecording-test.ts                | 8 ++++----
 .../utils/hasRoomLiveVoiceBroadcast-test.ts               | 6 +++---
 .../shouldDisplayAsVoiceBroadcastRecordingTile-test.ts    | 2 +-
 .../utils/shouldDisplayAsVoiceBroadcastTile-test.ts       | 2 +-
 .../utils/startNewVoiceBroadcastRecording-test.ts         | 4 ++--
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
index ed27119de1f..209b539bf60 100644
--- a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
+++ b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx
@@ -68,7 +68,7 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
     const live = [
         VoiceBroadcastInfoState.Started,
         VoiceBroadcastInfoState.Paused,
-        VoiceBroadcastInfoState.Running,
+        VoiceBroadcastInfoState.Resumed,
     ].includes(recordingState);
 
     return {
diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 39149c0a78c..1ed5ff53777 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -49,7 +49,7 @@ export const VoiceBroadcastChunkEventType = "io.element.voice_broadcast_chunk";
 export enum VoiceBroadcastInfoState {
     Started = "started",
     Paused = "paused",
-    Running = "running",
+    Resumed = "resumed",
     Stopped = "stopped",
 }
 
diff --git a/src/voice-broadcast/models/VoiceBroadcastRecording.ts b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
index 28cdd723019..c025dc1a2af 100644
--- a/src/voice-broadcast/models/VoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
@@ -105,15 +105,15 @@ export class VoiceBroadcastRecording
     public async resume(): Promise<void> {
         if (this.state !== VoiceBroadcastInfoState.Paused) return;
 
-        this.setState(VoiceBroadcastInfoState.Running);
+        this.setState(VoiceBroadcastInfoState.Resumed);
         await this.getRecorder().start();
-        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Running);
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Resumed);
     }
 
     public toggle = async (): Promise<void> => {
         if (this.getState() === VoiceBroadcastInfoState.Paused) return this.resume();
 
-        if ([VoiceBroadcastInfoState.Started, VoiceBroadcastInfoState.Running].includes(this.getState())) {
+        if ([VoiceBroadcastInfoState.Started, VoiceBroadcastInfoState.Resumed].includes(this.getState())) {
             return this.pause();
         }
     };
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
index 25e1f7c2157..36b2b4c5a72 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
@@ -50,7 +50,7 @@ describe("VoiceBroadcastRecordingBody", () => {
             room: roomId,
             user: userId,
         });
-        recording = new VoiceBroadcastRecording(infoEvent, client, VoiceBroadcastInfoState.Running);
+        recording = new VoiceBroadcastRecording(infoEvent, client, VoiceBroadcastInfoState.Resumed);
     });
 
     describe("when rendering a live broadcast", () => {
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
index 4cd85d37ef1..f07b7dd0bd2 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
@@ -118,7 +118,7 @@ describe("VoiceBroadcastRecordingPip", () => {
             });
 
             it("should resume the recording", () => {
-                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Running);
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Resumed);
             });
         });
     });
diff --git a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
index ec28a95fd6a..8471727026b 100644
--- a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
@@ -190,9 +190,9 @@ describe("VoiceBroadcastPlayback", () => {
         onStateChanged = jest.fn();
     });
 
-    describe("when there is a running broadcast without chunks yet", () => {
+    describe(`when there is a ${VoiceBroadcastInfoState.Resumed} broadcast without chunks yet`, () => {
         beforeEach(() => {
-            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Running);
+            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Resumed);
             playback = mkPlayback();
             setUpChunkEvents([]);
         });
@@ -236,9 +236,9 @@ describe("VoiceBroadcastPlayback", () => {
         });
     });
 
-    describe("when there is a running voice broadcast with some chunks", () => {
+    describe(`when there is a ${VoiceBroadcastInfoState.Resumed} voice broadcast with some chunks`, () => {
         beforeEach(() => {
-            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Running);
+            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Resumed);
             playback = mkPlayback();
             setUpChunkEvents([chunk2Event, chunk0Event, chunk1Event]);
         });
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index b3076d72c0f..b8b8008c137 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -423,15 +423,15 @@ describe("VoiceBroadcastRecording", () => {
                     await action();
                 });
 
-                itShouldBeInState(VoiceBroadcastInfoState.Running);
-                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Running);
+                itShouldBeInState(VoiceBroadcastInfoState.Resumed);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Resumed);
 
                 it("should start the recorder", () => {
                     expect(mocked(voiceBroadcastRecorder.start)).toHaveBeenCalled();
                 });
 
-                it("should emit a running state changed event", () => {
-                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Running);
+                it(`should emit a ${VoiceBroadcastInfoState.Resumed} state changed event`, () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Resumed);
                 });
             });
         });
diff --git a/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
index 40b50ec8831..a984ed5fd64 100644
--- a/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
+++ b/test/voice-broadcast/utils/hasRoomLiveVoiceBroadcast-test.ts
@@ -121,7 +121,7 @@ describe("hasRoomLiveVoiceBroadcast", () => {
         // all there are kind of live states
         VoiceBroadcastInfoState.Started,
         VoiceBroadcastInfoState.Paused,
-        VoiceBroadcastInfoState.Running,
+        VoiceBroadcastInfoState.Resumed,
     ])("when there is a live broadcast (%s) from the current user", (state: VoiceBroadcastInfoState) => {
         beforeEach(() => {
             addVoiceBroadcastInfoEvent(state, client.getUserId());
@@ -132,7 +132,7 @@ describe("hasRoomLiveVoiceBroadcast", () => {
 
     describe("when there was a live broadcast, that has been stopped", () => {
         beforeEach(() => {
-            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Running, client.getUserId());
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Resumed, client.getUserId());
             addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped, client.getUserId());
         });
 
@@ -141,7 +141,7 @@ describe("hasRoomLiveVoiceBroadcast", () => {
 
     describe("when there is a live broadcast from another user", () => {
         beforeEach(() => {
-            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Running, otherUserId);
+            addVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Resumed, otherUserId);
         });
 
         itShouldReturnTrueFalse();
diff --git a/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile-test.ts b/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile-test.ts
index 7673dc4d7be..fc4ec2c04b4 100644
--- a/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile-test.ts
+++ b/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile-test.ts
@@ -40,7 +40,7 @@ const testCases = [
     [
         "@user1:example.com",
         "@user1:example.com",
-        VoiceBroadcastInfoState.Running,
+        VoiceBroadcastInfoState.Resumed,
         true,
     ],
     [
diff --git a/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile-test.ts b/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile-test.ts
index 3d9e87ee3b8..394b8c4c11e 100644
--- a/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile-test.ts
+++ b/test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile-test.ts
@@ -128,7 +128,7 @@ describe("shouldDisplayAsVoiceBroadcastTile", () => {
     describe.each(
         [
             VoiceBroadcastInfoState.Paused,
-            VoiceBroadcastInfoState.Running,
+            VoiceBroadcastInfoState.Resumed,
             VoiceBroadcastInfoState.Stopped,
         ],
     )("when a voice broadcast info event in state %s occurs", (state: VoiceBroadcastInfoState) => {
diff --git a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
index b19ea3c6917..dc72868c832 100644
--- a/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/utils/startNewVoiceBroadcastRecording-test.ts
@@ -161,7 +161,7 @@ describe("startNewVoiceBroadcastRecording", () => {
                 room.currentState.setStateEvents([
                     mkVoiceBroadcastInfoStateEvent(
                         roomId,
-                        VoiceBroadcastInfoState.Running,
+                        VoiceBroadcastInfoState.Resumed,
                         client.getUserId(),
                         client.getDeviceId(),
                     ),
@@ -184,7 +184,7 @@ describe("startNewVoiceBroadcastRecording", () => {
                 room.currentState.setStateEvents([
                     mkVoiceBroadcastInfoStateEvent(
                         roomId,
-                        VoiceBroadcastInfoState.Running,
+                        VoiceBroadcastInfoState.Resumed,
                         otherUserId,
                         "ASD123",
                     ),

From f1610dae3ddc7068298e7de5cf5763c5976c3f44 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 14:53:44 +0200
Subject: [PATCH 080/113] Fix selection

---
 .../components/PlainTextComposer.tsx           |  2 ++
 .../components/WysiwygComposer.tsx             |  5 +++--
 .../hooks/useSetCursorPosition.ts              |  6 +++---
 .../rooms/wysiwyg_composer/hooks/utils.ts      |  6 +++---
 .../EditWysiwygComposer-test.tsx               |  2 ++
 .../SendWysiwygComposer-test.tsx               |  3 +++
 .../components/WysiwygComposer-test.tsx        | 18 +++++++++++++++---
 7 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index f23c1725c22..64c940c2fd2 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -19,6 +19,7 @@ import React, { MutableRefObject, ReactNode } from 'react';
 import { useComposerFunctions } from '../hooks/useComposerFunctions';
 import { usePlainTextInitialization } from '../hooks/usePlainTextInitialization';
 import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
+import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
 import { ComposerFunctions } from '../types';
 import { Editor } from "./Editor";
 
@@ -40,6 +41,7 @@ export function PlainTextComposer({
     const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
     const composerFunctions = useComposerFunctions(ref);
     usePlainTextInitialization(initialContent, ref);
+    useSetCursorPosition(disabled, ref);
 
     return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
         <Editor ref={ref} disabled={disabled} />
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index dce20f68150..73125a910ad 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -48,12 +48,13 @@ export const WysiwygComposer = memo(function WysiwygComposer(
         }
     }, [onChange, content, disabled]);
 
-    useSetCursorPosition(isWysiwygReady, ref);
+    const isReady = isWysiwygReady && !disabled;
+    useSetCursorPosition(!isReady, ref);
 
     return (
         <div className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
-            <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
+            <Editor ref={ref} disabled={!isReady} />
             { children?.(ref, wysiwyg) }
         </div>
     );
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts
index 92555f563f3..ef14d44255d 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useSetCursorPosition.ts
@@ -18,10 +18,10 @@ import { RefObject, useEffect } from "react";
 
 import { setCursorPositionAtTheEnd } from "./utils";
 
-export function useSetCursorPosition(isComposerReady: boolean, ref: RefObject<HTMLElement>) {
+export function useSetCursorPosition(disabled: boolean, ref: RefObject<HTMLElement>) {
     useEffect(() => {
-        if (ref.current && isComposerReady) {
+        if (ref.current && !disabled) {
             setCursorPositionAtTheEnd(ref.current);
         }
-    }, [ref, isComposerReady]);
+    }, [ref, disabled]);
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
index 0ae3d7a8802..bfaf526f72e 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
@@ -46,9 +46,9 @@ export function setCursorPositionAtTheEnd(element: HTMLElement) {
     const range = document.createRange();
     range.selectNodeContents(element);
     range.collapse(false);
-    const sel = document.getSelection();
-    sel.removeAllRanges();
-    sel.addRange(range);
+    const selection = document.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
 
     element.focus();
 }
diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
index 051d25b4356..00d6a43f977 100644
--- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -186,6 +186,7 @@ describe('EditWysiwygComposer', () => {
     it('Should focus when receiving an Action.FocusEditMessageComposer action', async () => {
         // Given we don't have focus
         customRender();
+        screen.getByLabelText('Bold').focus();
         expect(screen.getByRole('textbox')).not.toHaveFocus();
 
         // When we send the right action
@@ -201,6 +202,7 @@ describe('EditWysiwygComposer', () => {
     it('Should not focus when disabled', async () => {
         // Given we don't have focus and we are disabled
         customRender(true);
+        screen.getByLabelText('Bold').focus();
         expect(screen.getByRole('textbox')).not.toHaveFocus();
 
         // When we send an action that would cause us to get focus
diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index c97e5e90867..573ae451bea 100644
--- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -81,6 +81,7 @@ describe('SendWysiwygComposer', () => {
     it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
         // Given we don't have focus
         customRender(jest.fn(), jest.fn());
+        screen.getByLabelText('Bold').focus();
         expect(screen.getByRole('textbox')).not.toHaveFocus();
 
         // When we send the right action
@@ -96,6 +97,7 @@ describe('SendWysiwygComposer', () => {
     it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
         // Given we don't have focus
         customRender(jest.fn(), jest.fn());
+        screen.getByLabelText('Bold').focus();
         expect(screen.getByRole('textbox')).not.toHaveFocus();
 
         // When we send the right action
@@ -112,6 +114,7 @@ describe('SendWysiwygComposer', () => {
     it('Should focus when receiving a reply_to_event action', async () => {
         // Given we don't have focus
         customRender(jest.fn(), jest.fn());
+        screen.getByLabelText('Bold').focus();
         expect(screen.getByRole('textbox')).not.toHaveFocus();
 
         // When we send the right action
diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
index e7e21ca839c..cb9c37071cd 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@@ -73,11 +73,15 @@ describe('WysiwygComposer', () => {
 
     const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
 
-    const customRender = (onChange = (_content: string) => void 0, onSend = () => void 0, disabled = false) => {
+    const customRender = (
+        onChange = (_content: string) => void 0,
+        onSend = () => void 0,
+        disabled = false,
+        initialContent?: string) => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <RoomContext.Provider value={defaultRoomContext}>
-                    <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} />
+                    <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
         );
@@ -91,6 +95,14 @@ describe('WysiwygComposer', () => {
         expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
     });
 
+    it('Should have focus', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), false);
+
+        // Then
+        expect(screen.getByRole('textbox')).toHaveFocus();
+    });
+
     it('Should call onChange handler', (done) => {
         const html = '<b>html</b>';
         customRender((content) => {
@@ -104,7 +116,7 @@ describe('WysiwygComposer', () => {
         const onSend = jest.fn();
         customRender(jest.fn(), onSend);
 
-        // When we tell its inputEventProcesser that the user pressed Enter
+        // When we tell its inputEventProcessor that the user pressed Enter
         const event = new InputEvent("insertParagraph", { inputType: "insertParagraph" });
         const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
         inputEventProcessor(event, wysiwyg);

From 097ca43420b892cff1c89b481c9e963ee395f7d3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 Oct 2022 13:58:40 +0100
Subject: [PATCH 081/113] Add cypress test for the composer emoji picker
 (#9505)

---
 cypress/e2e/composer/composer.spec.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/cypress/e2e/composer/composer.spec.ts b/cypress/e2e/composer/composer.spec.ts
index f3fc374cf02..6fe562e12a7 100644
--- a/cypress/e2e/composer/composer.spec.ts
+++ b/cypress/e2e/composer/composer.spec.ts
@@ -64,6 +64,21 @@ describe("Composer", () => {
             cy.contains('.mx_EventTile_body strong', 'bold message');
         });
 
+        it("should allow user to input emoji via graphical picker", () => {
+            cy.getComposer(false).within(() => {
+                cy.get('[aria-label="Emoji"]').click();
+            });
+
+            cy.get('[data-testid="mx_EmojiPicker"]').within(() => {
+                cy.contains(".mx_EmojiPicker_item", "😇").click();
+            });
+
+            cy.get(".mx_ContextualMenu_background").click(); // Close emoji picker
+            cy.get('div[contenteditable=true]').type("{enter}"); // Send message
+
+            cy.contains(".mx_EventTile_body", "😇");
+        });
+
         describe("when Ctrl+Enter is required to send", () => {
             beforeEach(() => {
                 cy.setSettingValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

From 0453b264e3b447e6a137502f899748fc47254144 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Wed, 26 Oct 2022 14:04:03 +0100
Subject: [PATCH 082/113] Sliding Sync: improve sort order, show subspace
 rooms, better tombstoned room handling (#9484)

* Add support for include_old_rooms and by_notification_level

* Include subspaces when apply spaces filter

* Remove stray is_tombstoned

* tests: add SlidingRoomListStore jest tests; update proxy version in cypress

* Add additional tests

* Additional tests

* Linting

* Update test/stores/room-list/SlidingRoomListStore-test.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 cypress/plugins/sliding-sync/index.ts         |   2 +-
 src/SlidingSyncManager.ts                     |  31 +-
 src/components/views/rooms/RoomSublist.tsx    |   3 +-
 src/hooks/useSlidingSyncRoomSearch.ts         |   1 -
 src/stores/room-list/RoomListStore.ts         |  10 +-
 src/stores/room-list/SlidingRoomListStore.ts  |  75 ++--
 .../room-list/SlidingRoomListStore-test.ts    | 319 ++++++++++++++++++
 test/test-utils/client.ts                     |  20 ++
 8 files changed, 418 insertions(+), 43 deletions(-)
 create mode 100644 test/stores/room-list/SlidingRoomListStore-test.ts

diff --git a/cypress/plugins/sliding-sync/index.ts b/cypress/plugins/sliding-sync/index.ts
index 61a62aad13c..608ada8dbf3 100644
--- a/cypress/plugins/sliding-sync/index.ts
+++ b/cypress/plugins/sliding-sync/index.ts
@@ -77,7 +77,7 @@ async function proxyStart(synapse: SynapseInstance): Promise<ProxyInstance> {
     const port = await getFreePort();
     console.log(new Date(), "starting proxy container...");
     const containerId = await dockerRun({
-        image: "ghcr.io/matrix-org/sliding-sync-proxy:v0.4.0",
+        image: "ghcr.io/matrix-org/sliding-sync-proxy:v0.6.0",
         containerName: "react-sdk-cypress-sliding-sync-proxy",
         params: [
             "--rm",
diff --git a/src/SlidingSyncManager.ts b/src/SlidingSyncManager.ts
index 0e5736465ea..c41e6a78e32 100644
--- a/src/SlidingSyncManager.ts
+++ b/src/SlidingSyncManager.ts
@@ -63,6 +63,15 @@ const DEFAULT_ROOM_SUBSCRIPTION_INFO = {
     required_state: [
         ["*", "*"], // all events
     ],
+    include_old_rooms: {
+        timeline_limit: 0,
+        required_state: [ // state needed to handle space navigation and tombstone chains
+            [EventType.RoomCreate, ""],
+            [EventType.RoomTombstone, ""],
+            [EventType.SpaceChild, "*"],
+            [EventType.SpaceParent, "*"],
+        ],
+    },
 };
 
 export type PartialSlidingSyncRequest = {
@@ -121,6 +130,16 @@ export class SlidingSyncManager {
                 [EventType.SpaceParent, "*"], // all space parents
                 [EventType.RoomMember, this.client.getUserId()!], // lets the client calculate that we are in fact in the room
             ],
+            include_old_rooms: {
+                timeline_limit: 0,
+                required_state: [
+                    [EventType.RoomCreate, ""],
+                    [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
+                    [EventType.SpaceChild, "*"], // all space children
+                    [EventType.SpaceParent, "*"], // all space parents
+                    [EventType.RoomMember, this.client.getUserId()!], // lets the client calculate that we are in fact in the room
+                ],
+            },
             filters: {
                 room_types: ["m.space"],
             },
@@ -176,7 +195,7 @@ export class SlidingSyncManager {
             list = {
                 ranges: [[0, 20]],
                 sort: [
-                    "by_highlight_count", "by_notification_count", "by_recency",
+                    "by_notification_level", "by_recency",
                 ],
                 timeline_limit: 1, // most recent message display: though this seems to only be needed for favourites?
                 required_state: [
@@ -187,6 +206,16 @@ export class SlidingSyncManager {
                     [EventType.RoomCreate, ""], // for isSpaceRoom checks
                     [EventType.RoomMember, this.client.getUserId()], // lets the client calculate that we are in fact in the room
                 ],
+                include_old_rooms: {
+                    timeline_limit: 0,
+                    required_state: [
+                        [EventType.RoomCreate, ""],
+                        [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
+                        [EventType.SpaceChild, "*"], // all space children
+                        [EventType.SpaceParent, "*"], // all space parents
+                        [EventType.RoomMember, this.client.getUserId()!], // lets the client calculate that we are in fact in the room
+                    ],
+                },
             };
             list = Object.assign(list, updateArgs);
         } else {
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index 9e890e9c219..9f8133d55cc 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -570,8 +570,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                 const slidingList = SlidingSyncManager.instance.slidingSync.getList(slidingSyncIndex);
                 isAlphabetical = slidingList.sort[0] === "by_name";
                 isUnreadFirst = (
-                    slidingList.sort[0] === "by_highlight_count" ||
-                    slidingList.sort[0] === "by_notification_count"
+                    slidingList.sort[0] === "by_notification_level"
                 );
             }
 
diff --git a/src/hooks/useSlidingSyncRoomSearch.ts b/src/hooks/useSlidingSyncRoomSearch.ts
index 6ba08dc1a7c..97e43d8b28a 100644
--- a/src/hooks/useSlidingSyncRoomSearch.ts
+++ b/src/hooks/useSlidingSyncRoomSearch.ts
@@ -52,7 +52,6 @@ export const useSlidingSyncRoomSearch = () => {
                 ranges: [[0, limit]],
                 filters: {
                     room_name_like: term,
-                    is_tombstoned: false,
                 },
             });
             const rooms = [];
diff --git a/src/stores/room-list/RoomListStore.ts b/src/stores/room-list/RoomListStore.ts
index d6f9de79c31..73d6bdbd51f 100644
--- a/src/stores/room-list/RoomListStore.ts
+++ b/src/stores/room-list/RoomListStore.ts
@@ -24,7 +24,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import { DefaultTagID, OrderedDefaultTagIDs, RoomUpdateCause, TagID } from "./models";
 import { IListOrderingMap, ITagMap, ITagSortingMap, ListAlgorithm, SortAlgorithm } from "./algorithms/models";
 import { ActionPayload } from "../../dispatcher/payloads";
-import defaultDispatcher from "../../dispatcher/dispatcher";
+import defaultDispatcher, { MatrixDispatcher } from "../../dispatcher/dispatcher";
 import { readReceiptChangeIsFor } from "../../utils/read-receipts";
 import { FILTER_CHANGED, IFilterCondition } from "./filters/IFilterCondition";
 import { Algorithm, LIST_UPDATED_EVENT } from "./algorithms/Algorithm";
@@ -65,8 +65,8 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
         this.emit(LISTS_UPDATE_EVENT);
     });
 
-    constructor() {
-        super(defaultDispatcher);
+    constructor(dis: MatrixDispatcher) {
+        super(dis);
         this.setMaxListeners(20); // RoomList + LeftPanel + 8xRoomSubList + spares
         this.algorithm.start();
     }
@@ -613,11 +613,11 @@ export default class RoomListStore {
         if (!RoomListStore.internalInstance) {
             if (SettingsStore.getValue("feature_sliding_sync")) {
                 logger.info("using SlidingRoomListStoreClass");
-                const instance = new SlidingRoomListStoreClass();
+                const instance = new SlidingRoomListStoreClass(defaultDispatcher, SdkContextClass.instance);
                 instance.start();
                 RoomListStore.internalInstance = instance;
             } else {
-                const instance = new RoomListStoreClass();
+                const instance = new RoomListStoreClass(defaultDispatcher);
                 instance.start();
                 RoomListStore.internalInstance = instance;
             }
diff --git a/src/stores/room-list/SlidingRoomListStore.ts b/src/stores/room-list/SlidingRoomListStore.ts
index 35550d04f1e..1c5fd1adea2 100644
--- a/src/stores/room-list/SlidingRoomListStore.ts
+++ b/src/stores/room-list/SlidingRoomListStore.ts
@@ -21,12 +21,10 @@ import { MSC3575Filter, SlidingSyncEvent } from "matrix-js-sdk/src/sliding-sync"
 import { RoomUpdateCause, TagID, OrderedDefaultTagIDs, DefaultTagID } from "./models";
 import { ITagMap, ListAlgorithm, SortAlgorithm } from "./algorithms/models";
 import { ActionPayload } from "../../dispatcher/payloads";
-import defaultDispatcher from "../../dispatcher/dispatcher";
+import { MatrixDispatcher } from "../../dispatcher/dispatcher";
 import { IFilterCondition } from "./filters/IFilterCondition";
 import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
 import { RoomListStore as Interface, RoomListStoreEvent } from "./Interface";
-import { SlidingSyncManager } from "../../SlidingSyncManager";
-import SpaceStore from "../spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../spaces";
 import { LISTS_LOADING_EVENT } from "./RoomListStore";
 import { UPDATE_EVENT } from "../AsyncStore";
@@ -38,7 +36,7 @@ interface IState {
 
 export const SlidingSyncSortToFilter: Record<SortAlgorithm, string[]> = {
     [SortAlgorithm.Alphabetic]: ["by_name", "by_recency"],
-    [SortAlgorithm.Recent]: ["by_highlight_count", "by_notification_count", "by_recency"],
+    [SortAlgorithm.Recent]: ["by_notification_level", "by_recency"],
     [SortAlgorithm.Manual]: ["by_recency"],
 };
 
@@ -48,21 +46,18 @@ const filterConditions: Record<TagID, MSC3575Filter> = {
     },
     [DefaultTagID.Favourite]: {
         tags: ["m.favourite"],
-        is_tombstoned: false,
     },
     // TODO https://github.com/vector-im/element-web/issues/23207
     // DefaultTagID.SavedItems,
     [DefaultTagID.DM]: {
         is_dm: true,
         is_invite: false,
-        is_tombstoned: false,
         // If a DM has a Favourite & Low Prio tag then it'll be shown in those lists instead
         not_tags: ["m.favourite", "m.lowpriority"],
     },
     [DefaultTagID.Untagged]: {
         is_dm: false,
         is_invite: false,
-        is_tombstoned: false,
         not_room_types: ["m.space"],
         not_tags: ["m.favourite", "m.lowpriority"],
         // spaces filter added dynamically
@@ -71,7 +66,6 @@ const filterConditions: Record<TagID, MSC3575Filter> = {
         tags: ["m.lowpriority"],
         // If a room has both Favourite & Low Prio tags then it'll be shown under Favourites
         not_tags: ["m.favourite"],
-        is_tombstoned: false,
     },
     // TODO https://github.com/vector-im/element-web/issues/23207
     // DefaultTagID.ServerNotice,
@@ -87,25 +81,25 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
     private counts: Record<TagID, number> = {};
     private stickyRoomId: string | null;
 
-    public constructor() {
-        super(defaultDispatcher);
+    public constructor(dis: MatrixDispatcher, private readonly context: SdkContextClass) {
+        super(dis);
         this.setMaxListeners(20); // RoomList + LeftPanel + 8xRoomSubList + spares
     }
 
     public async setTagSorting(tagId: TagID, sort: SortAlgorithm) {
         logger.info("SlidingRoomListStore.setTagSorting ", tagId, sort);
         this.tagIdToSortAlgo[tagId] = sort;
-        const slidingSyncIndex = SlidingSyncManager.instance.getOrAllocateListIndex(tagId);
+        const slidingSyncIndex = this.context.slidingSyncManager.getOrAllocateListIndex(tagId);
         switch (sort) {
             case SortAlgorithm.Alphabetic:
-                await SlidingSyncManager.instance.ensureListRegistered(
+                await this.context.slidingSyncManager.ensureListRegistered(
                     slidingSyncIndex, {
                         sort: SlidingSyncSortToFilter[SortAlgorithm.Alphabetic],
                     },
                 );
                 break;
             case SortAlgorithm.Recent:
-                await SlidingSyncManager.instance.ensureListRegistered(
+                await this.context.slidingSyncManager.ensureListRegistered(
                     slidingSyncIndex, {
                         sort: SlidingSyncSortToFilter[SortAlgorithm.Recent],
                     },
@@ -174,10 +168,13 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
         // check all lists for each tag we know about and see if the room is there
         const tags: TagID[] = [];
         for (const tagId in this.tagIdToSortAlgo) {
-            const index = SlidingSyncManager.instance.getOrAllocateListIndex(tagId);
-            const { roomIndexToRoomId } = SlidingSyncManager.instance.slidingSync.getListData(index);
-            for (const roomIndex in roomIndexToRoomId) {
-                const roomId = roomIndexToRoomId[roomIndex];
+            const index = this.context.slidingSyncManager.getOrAllocateListIndex(tagId);
+            const listData = this.context.slidingSyncManager.slidingSync.getListData(index);
+            if (!listData) {
+                continue;
+            }
+            for (const roomIndex in listData.roomIndexToRoomId) {
+                const roomId = listData.roomIndexToRoomId[roomIndex];
                 if (roomId === room.roomId) {
                     tags.push(tagId);
                     break;
@@ -207,7 +204,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
 
         // this room will not move due to it being viewed: it is sticky. This can be null to indicate
         // no sticky room if you aren't viewing a room.
-        this.stickyRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+        this.stickyRoomId = this.context.roomViewStore.getRoomId();
         let stickyRoomNewIndex = -1;
         const stickyRoomOldIndex = (tagMap[tagId] || []).findIndex((room) => {
             return room.roomId === this.stickyRoomId;
@@ -264,7 +261,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
     }
 
     private onSlidingSyncListUpdate(listIndex: number, joinCount: number, roomIndexToRoomId: Record<number, string>) {
-        const tagId = SlidingSyncManager.instance.listIdForIndex(listIndex);
+        const tagId = this.context.slidingSyncManager.listIdForIndex(listIndex);
         this.counts[tagId]= joinCount;
         this.refreshOrderedLists(tagId, roomIndexToRoomId);
         // let the UI update
@@ -273,7 +270,7 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
 
     private onRoomViewStoreUpdated() {
         // we only care about this to know when the user has clicked on a room to set the stickiness value
-        if (SdkContextClass.instance.roomViewStore.getRoomId() === this.stickyRoomId) {
+        if (this.context.roomViewStore.getRoomId() === this.stickyRoomId) {
             return;
         }
 
@@ -296,14 +293,17 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
             if (room) {
                 // resort it based on the slidingSync view of the list. This may cause this old sticky
                 // room to cease to exist.
-                const index = SlidingSyncManager.instance.getOrAllocateListIndex(tagId);
-                const { roomIndexToRoomId } = SlidingSyncManager.instance.slidingSync.getListData(index);
-                this.refreshOrderedLists(tagId, roomIndexToRoomId);
+                const index = this.context.slidingSyncManager.getOrAllocateListIndex(tagId);
+                const listData = this.context.slidingSyncManager.slidingSync.getListData(index);
+                if (!listData) {
+                    continue;
+                }
+                this.refreshOrderedLists(tagId, listData.roomIndexToRoomId);
                 hasUpdatedAnyList = true;
             }
         }
         // in the event we didn't call refreshOrderedLists, it helps to still remember the sticky room ID.
-        this.stickyRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+        this.stickyRoomId = this.context.roomViewStore.getRoomId();
 
         if (hasUpdatedAnyList) {
             this.emit(LISTS_UPDATE_EVENT);
@@ -313,11 +313,11 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
     protected async onReady(): Promise<any> {
         logger.info("SlidingRoomListStore.onReady");
         // permanent listeners: never get destroyed. Could be an issue if we want to test this in isolation.
-        SlidingSyncManager.instance.slidingSync.on(SlidingSyncEvent.List, this.onSlidingSyncListUpdate.bind(this));
-        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdated.bind(this));
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated.bind(this));
-        if (SpaceStore.instance.activeSpace) {
-            this.onSelectedSpaceUpdated(SpaceStore.instance.activeSpace, false);
+        this.context.slidingSyncManager.slidingSync.on(SlidingSyncEvent.List, this.onSlidingSyncListUpdate.bind(this));
+        this.context.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdated.bind(this));
+        this.context.spaceStore.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated.bind(this));
+        if (this.context.spaceStore.activeSpace) {
+            this.onSelectedSpaceUpdated(this.context.spaceStore.activeSpace, false);
         }
 
         // sliding sync has an initial response for spaces. Now request all the lists.
@@ -332,8 +332,8 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
             const sort = SortAlgorithm.Recent; // default to recency sort, TODO: read from config
             this.tagIdToSortAlgo[tagId] = sort;
             this.emit(LISTS_LOADING_EVENT, tagId, true);
-            const index = SlidingSyncManager.instance.getOrAllocateListIndex(tagId);
-            SlidingSyncManager.instance.ensureListRegistered(index, {
+            const index = this.context.slidingSyncManager.getOrAllocateListIndex(tagId);
+            this.context.slidingSyncManager.ensureListRegistered(index, {
                 filters: filter,
                 sort: SlidingSyncSortToFilter[sort],
             }).then(() => {
@@ -350,9 +350,18 @@ export class SlidingRoomListStoreClass extends AsyncStoreWithClient<IState> impl
         const oldSpace = filters.spaces?.[0];
         filters.spaces = (activeSpace && activeSpace != MetaSpace.Home) ? [activeSpace] : undefined;
         if (oldSpace !== activeSpace) {
+            // include subspaces in this list
+            this.context.spaceStore.traverseSpace(activeSpace, (roomId: string) => {
+                if (roomId === activeSpace) {
+                    return;
+                }
+                filters.spaces.push(roomId); // add subspace
+            }, false);
+
             this.emit(LISTS_LOADING_EVENT, tagId, true);
-            SlidingSyncManager.instance.ensureListRegistered(
-                SlidingSyncManager.instance.getOrAllocateListIndex(tagId),
+            const index = this.context.slidingSyncManager.getOrAllocateListIndex(tagId);
+            this.context.slidingSyncManager.ensureListRegistered(
+                index,
                 {
                     filters: filters,
                 },
diff --git a/test/stores/room-list/SlidingRoomListStore-test.ts b/test/stores/room-list/SlidingRoomListStore-test.ts
new file mode 100644
index 00000000000..488c92396a1
--- /dev/null
+++ b/test/stores/room-list/SlidingRoomListStore-test.ts
@@ -0,0 +1,319 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { mocked } from 'jest-mock';
+import { SlidingSync, SlidingSyncEvent } from 'matrix-js-sdk/src/sliding-sync';
+import { Room } from 'matrix-js-sdk/src/matrix';
+
+import {
+    LISTS_UPDATE_EVENT,
+    SlidingRoomListStoreClass,
+    SlidingSyncSortToFilter,
+} from "../../../src/stores/room-list/SlidingRoomListStore";
+import { SpaceStoreClass } from "../../../src/stores/spaces/SpaceStore";
+import { MockEventEmitter, stubClient, untilEmission } from "../../test-utils";
+import { TestSdkContext } from '../../TestSdkContext';
+import { SlidingSyncManager } from '../../../src/SlidingSyncManager';
+import { RoomViewStore } from '../../../src/stores/RoomViewStore';
+import { MatrixDispatcher } from '../../../src/dispatcher/dispatcher';
+import { SortAlgorithm } from '../../../src/stores/room-list/algorithms/models';
+import { DefaultTagID, TagID } from '../../../src/stores/room-list/models';
+import { UPDATE_SELECTED_SPACE } from '../../../src/stores/spaces';
+import { LISTS_LOADING_EVENT } from '../../../src/stores/room-list/RoomListStore';
+import { UPDATE_EVENT } from '../../../src/stores/AsyncStore';
+
+jest.mock('../../../src/SlidingSyncManager');
+const MockSlidingSyncManager = <jest.Mock<SlidingSyncManager>><unknown>SlidingSyncManager;
+
+describe("SlidingRoomListStore", () => {
+    let store: SlidingRoomListStoreClass;
+    let context: TestSdkContext;
+    let dis: MatrixDispatcher;
+    let activeSpace: string;
+    let tagIdToIndex = {};
+
+    beforeEach(async () => {
+        context = new TestSdkContext();
+        context.client = stubClient();
+        context._SpaceStore = new MockEventEmitter<SpaceStoreClass>({
+            traverseSpace: jest.fn(),
+            get activeSpace() {
+                return activeSpace;
+            },
+        }) as SpaceStoreClass;
+        context._SlidingSyncManager = new MockSlidingSyncManager();
+        context._SlidingSyncManager.slidingSync = mocked(new MockEventEmitter({
+            getListData: jest.fn(),
+        }) as unknown as SlidingSync);
+        context._RoomViewStore = mocked(new MockEventEmitter({
+            getRoomId: jest.fn(),
+        }) as unknown as RoomViewStore);
+
+        // mock implementations to allow the store to map tag IDs to sliding sync list indexes and vice versa
+        let index = 0;
+        tagIdToIndex = {};
+        mocked(context._SlidingSyncManager.getOrAllocateListIndex).mockImplementation((listId: string): number => {
+            if (tagIdToIndex[listId] != null) {
+                return tagIdToIndex[listId];
+            }
+            tagIdToIndex[listId] = index;
+            index++;
+            return index;
+        });
+        mocked(context.slidingSyncManager.listIdForIndex).mockImplementation((i) => {
+            for (const tagId in tagIdToIndex) {
+                const j = tagIdToIndex[tagId];
+                if (i === j) {
+                    return tagId;
+                }
+            }
+            return null;
+        });
+        mocked(context._SlidingSyncManager.ensureListRegistered).mockResolvedValue({
+            ranges: [[0, 10]],
+        });
+
+        dis = new MatrixDispatcher();
+        store = new SlidingRoomListStoreClass(dis, context);
+    });
+
+    describe("spaces", () => {
+        it("alters 'filters.spaces' on the DefaultTagID.Untagged list when the selected space changes", async () => {
+            await store.start(); // call onReady
+            const spaceRoomId = "!foo:bar";
+
+            const p = untilEmission(store, LISTS_LOADING_EVENT, (listName, isLoading) => {
+                return listName === DefaultTagID.Untagged && !isLoading;
+            });
+
+            // change the active space
+            activeSpace = spaceRoomId;
+            context._SpaceStore.emit(UPDATE_SELECTED_SPACE, spaceRoomId, false);
+            await p;
+
+            expect(context._SlidingSyncManager.ensureListRegistered).toHaveBeenCalledWith(
+                tagIdToIndex[DefaultTagID.Untagged],
+                {
+                    filters: expect.objectContaining({
+                        spaces: [spaceRoomId],
+                    }),
+                },
+            );
+        });
+
+        it("alters 'filters.spaces' on the DefaultTagID.Untagged list if it loads with an active space", async () => {
+            // change the active space before we are ready
+            const spaceRoomId = "!foo2:bar";
+            activeSpace = spaceRoomId;
+            const p = untilEmission(store, LISTS_LOADING_EVENT, (listName, isLoading) => {
+                return listName === DefaultTagID.Untagged && !isLoading;
+            });
+            await store.start(); // call onReady
+            await p;
+            expect(context._SlidingSyncManager.ensureListRegistered).toHaveBeenCalledWith(
+                tagIdToIndex[DefaultTagID.Untagged],
+                expect.objectContaining({
+                    filters: expect.objectContaining({
+                        spaces: [spaceRoomId],
+                    }),
+                }),
+            );
+        });
+
+        it("includes subspaces in 'filters.spaces' when the selected space has subspaces", async () => {
+            await store.start(); // call onReady
+            const spaceRoomId = "!foo:bar";
+            const subSpace1 = "!ss1:bar";
+            const subSpace2 = "!ss2:bar";
+
+            const p = untilEmission(store, LISTS_LOADING_EVENT, (listName, isLoading) => {
+                return listName === DefaultTagID.Untagged && !isLoading;
+            });
+
+            mocked(context._SpaceStore.traverseSpace).mockImplementation(
+                (spaceId: string, fn: (roomId: string) => void) => {
+                    if (spaceId === spaceRoomId) {
+                        fn(subSpace1);
+                        fn(subSpace2);
+                    }
+                },
+            );
+
+            // change the active space
+            activeSpace = spaceRoomId;
+            context._SpaceStore.emit(UPDATE_SELECTED_SPACE, spaceRoomId, false);
+            await p;
+
+            expect(context._SlidingSyncManager.ensureListRegistered).toHaveBeenCalledWith(
+                tagIdToIndex[DefaultTagID.Untagged],
+                {
+                    filters: expect.objectContaining({
+                        spaces: [spaceRoomId, subSpace1, subSpace2],
+                    }),
+                },
+            );
+        });
+    });
+
+    it("setTagSorting alters the 'sort' option in the list", async () => {
+        mocked(context._SlidingSyncManager.getOrAllocateListIndex).mockReturnValue(0);
+        const tagId: TagID = "foo";
+        await store.setTagSorting(tagId, SortAlgorithm.Alphabetic);
+        expect(context._SlidingSyncManager.ensureListRegistered).toBeCalledWith(0, {
+            sort: SlidingSyncSortToFilter[SortAlgorithm.Alphabetic],
+        });
+        expect(store.getTagSorting(tagId)).toEqual(SortAlgorithm.Alphabetic);
+
+        await store.setTagSorting(tagId, SortAlgorithm.Recent);
+        expect(context._SlidingSyncManager.ensureListRegistered).toBeCalledWith(0, {
+            sort: SlidingSyncSortToFilter[SortAlgorithm.Recent],
+        });
+        expect(store.getTagSorting(tagId)).toEqual(SortAlgorithm.Recent);
+    });
+
+    it("getTagsForRoom gets the tags for the room", async () => {
+        await store.start();
+        const untaggedIndex = context._SlidingSyncManager.getOrAllocateListIndex(DefaultTagID.Untagged);
+        const favIndex = context._SlidingSyncManager.getOrAllocateListIndex(DefaultTagID.Favourite);
+        const roomA = "!a:localhost";
+        const roomB = "!b:localhost";
+        const indexToListData = {
+            [untaggedIndex]: {
+                joinedCount: 10,
+                roomIndexToRoomId: {
+                    0: roomA,
+                    1: roomB,
+                },
+            },
+            [favIndex]: {
+                joinedCount: 2,
+                roomIndexToRoomId: {
+                    0: roomB,
+                },
+            },
+        };
+        mocked(context._SlidingSyncManager.slidingSync.getListData).mockImplementation((i: number) => {
+            return indexToListData[i] || null;
+        });
+
+        expect(store.getTagsForRoom(new Room(roomA, context.client, context.client.getUserId()))).toEqual(
+            [DefaultTagID.Untagged],
+        );
+        expect(store.getTagsForRoom(new Room(roomB, context.client, context.client.getUserId()))).toEqual(
+            [DefaultTagID.Favourite, DefaultTagID.Untagged],
+        );
+    });
+
+    it("emits LISTS_UPDATE_EVENT when slidingSync lists update", async () => {
+        await store.start();
+        const roomA = "!a:localhost";
+        const roomB = "!b:localhost";
+        const roomC = "!c:localhost";
+        const tagId = DefaultTagID.Favourite;
+        const listIndex = context.slidingSyncManager.getOrAllocateListIndex(tagId);
+        const joinCount = 10;
+        const roomIndexToRoomId = { // mixed to ensure we sort
+            1: roomB,
+            2: roomC,
+            0: roomA,
+        };
+        const rooms = [
+            new Room(roomA, context.client, context.client.getUserId()),
+            new Room(roomB, context.client, context.client.getUserId()),
+            new Room(roomC, context.client, context.client.getUserId()),
+        ];
+        mocked(context.client.getRoom).mockImplementation((roomId: string) => {
+            switch (roomId) {
+                case roomA:
+                    return rooms[0];
+                case roomB:
+                    return rooms[1];
+                case roomC:
+                    return rooms[2];
+            }
+            return null;
+        });
+        const p = untilEmission(store, LISTS_UPDATE_EVENT);
+        context.slidingSyncManager.slidingSync.emit(SlidingSyncEvent.List, listIndex, joinCount, roomIndexToRoomId);
+        await p;
+        expect(store.getCount(tagId)).toEqual(joinCount);
+        expect(store.orderedLists[tagId]).toEqual(rooms);
+    });
+
+    it("sets the sticky room on the basis of the viewed room in RoomViewStore", async () => {
+        await store.start();
+        // seed the store with 3 rooms
+        const roomIdA = "!a:localhost";
+        const roomIdB = "!b:localhost";
+        const roomIdC = "!c:localhost";
+        const tagId = DefaultTagID.Favourite;
+        const listIndex = context.slidingSyncManager.getOrAllocateListIndex(tagId);
+        const joinCount = 10;
+        const roomIndexToRoomId = { // mixed to ensure we sort
+            1: roomIdB,
+            2: roomIdC,
+            0: roomIdA,
+        };
+        const roomA = new Room(roomIdA, context.client, context.client.getUserId());
+        const roomB = new Room(roomIdB, context.client, context.client.getUserId());
+        const roomC = new Room(roomIdC, context.client, context.client.getUserId());
+        mocked(context.client.getRoom).mockImplementation((roomId: string) => {
+            switch (roomId) {
+                case roomIdA:
+                    return roomA;
+                case roomIdB:
+                    return roomB;
+                case roomIdC:
+                    return roomC;
+            }
+            return null;
+        });
+        mocked(context._SlidingSyncManager.slidingSync.getListData).mockImplementation((i: number) => {
+            if (i !== listIndex) {
+                return null;
+            }
+            return {
+                roomIndexToRoomId: roomIndexToRoomId,
+                joinedCount: joinCount,
+            };
+        });
+        let p = untilEmission(store, LISTS_UPDATE_EVENT);
+        context.slidingSyncManager.slidingSync.emit(SlidingSyncEvent.List, listIndex, joinCount, roomIndexToRoomId);
+        await p;
+        expect(store.orderedLists[tagId]).toEqual([roomA, roomB, roomC]);
+
+        // make roomB sticky and inform the store
+        mocked(context.roomViewStore.getRoomId).mockReturnValue(roomIdB);
+        context.roomViewStore.emit(UPDATE_EVENT);
+
+        // bump room C to the top, room B should not move from i=1 despite the list update saying to
+        roomIndexToRoomId[0] = roomIdC;
+        roomIndexToRoomId[1] = roomIdA;
+        roomIndexToRoomId[2] = roomIdB;
+        p = untilEmission(store, LISTS_UPDATE_EVENT);
+        context.slidingSyncManager.slidingSync.emit(SlidingSyncEvent.List, listIndex, joinCount, roomIndexToRoomId);
+        await p;
+
+        // check that B didn't move and that A was put below B
+        expect(store.orderedLists[tagId]).toEqual([roomC, roomB, roomA]);
+
+        // make room C sticky: rooms should move as a result, without needing an additional list update
+        mocked(context.roomViewStore.getRoomId).mockReturnValue(roomIdC);
+        p = untilEmission(store, LISTS_UPDATE_EVENT);
+        context.roomViewStore.emit(UPDATE_EVENT);
+        await p;
+        expect(store.orderedLists[tagId].map((r) => r.roomId)).toEqual([roomC, roomA, roomB].map((r) => r.roomId));
+    });
+});
diff --git a/test/test-utils/client.ts b/test/test-utils/client.ts
index e0c532c0216..e155dd17c4c 100644
--- a/test/test-utils/client.ts
+++ b/test/test-utils/client.ts
@@ -21,6 +21,26 @@ import { MatrixClient, User } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 
+/**
+ * Mocked generic class with a real EventEmitter.
+ * Useful for mocks which need event emitters.
+ */
+export class MockEventEmitter<T> extends EventEmitter {
+    /**
+     * Construct a new event emitter with additional properties/functions. The event emitter functions
+     * like .emit and .on will be real.
+     * @param mockProperties An object with the mock property or function implementations. 'getters'
+     * are correctly cloned to this event emitter.
+     */
+    constructor(mockProperties: Partial<Record<MethodKeysOf<T>|PropertyKeysOf<T>, unknown>> = {}) {
+        super();
+        // We must use defineProperties and not assign as the former clones getters correctly,
+        // whereas the latter invokes the getter and sets the return value permanently on the
+        // destination object.
+        Object.defineProperties(this, Object.getOwnPropertyDescriptors(mockProperties));
+    }
+}
+
 /**
  * Mock client with real event emitter
  * useful for testing code that listens

From 0f1738b09875140ab24407a55f0dfbe5edda8d38 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Wed, 26 Oct 2022 14:19:36 +0100
Subject: [PATCH 083/113] Fix getReadReceiptsForEvent for unknown threads
 (#9507)

---
 src/components/structures/MessagePanel.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 223eb0a6dbf..56c396750ff 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -835,6 +835,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
             : room;
 
         const receipts: IReadReceiptProps[] = [];
+
+        if (!receiptDestination) {
+            logger.debug("Discarding request, could not find the receiptDestination for event: "
+                + this.context.threadId);
+            return receipts;
+        }
+
         receiptDestination.getReceiptsForEvent(event).forEach((r) => {
             if (
                 !r.userId ||

From 7692533e18f1247bf7dbba9e0d3312a7b68401d8 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 26 Oct 2022 16:54:45 +0200
Subject: [PATCH 084/113] Improve fetch mock setup (#9511)

- Move from language to mock setup file
- Add mock rule for stub image requests
---
 test/setup/setupLanguage.ts    | 4 ----
 test/setup/setupManualMocks.ts | 7 +++++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/setup/setupLanguage.ts b/test/setup/setupLanguage.ts
index 5efd8786cdd..bd07616ab39 100644
--- a/test/setup/setupLanguage.ts
+++ b/test/setup/setupLanguage.ts
@@ -20,10 +20,6 @@ import * as languageHandler from "../../src/languageHandler";
 import en from "../../src/i18n/strings/en_EN.json";
 import de from "../../src/i18n/strings/de_DE.json";
 
-fetchMock.config.overwriteRoutes = false;
-fetchMock.catch("");
-window.fetch = fetchMock.sandbox();
-
 const lv = {
     "Save": "Saglabāt",
     "Uploading %(filename)s and %(count)s others|one": "Качване на %(filename)s и %(count)s друг",
diff --git a/test/setup/setupManualMocks.ts b/test/setup/setupManualMocks.ts
index 31c716e375f..2adda89e0f1 100644
--- a/test/setup/setupManualMocks.ts
+++ b/test/setup/setupManualMocks.ts
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import fetchMock from "fetch-mock-jest";
 import { TextDecoder, TextEncoder } from "util";
 
 // jest 27 removes setImmediate from jsdom
@@ -54,3 +55,9 @@ global.TextDecoder = TextDecoder;
 
 // prevent errors whenever a component tries to manually scroll.
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// set up fetch API mock
+fetchMock.config.overwriteRoutes = false;
+fetchMock.catch("");
+fetchMock.get("/image-file-stub", "image file stub");
+window.fetch = fetchMock.sandbox();

From fb751c3c7b7ae1e821eba5cde224cd874f85f616 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 17:16:13 +0200
Subject: [PATCH 085/113] Add test for plain mode

---
 .../components/PlainTextComposer.tsx          |   8 +-
 .../components/WysiwygComposer.tsx            |   2 +-
 .../hooks/usePlainTextInitialization.ts       |   3 -
 .../hooks/usePlainTextListeners.ts            |  18 +-
 .../SendWysiwygComposer-test.tsx              | 167 +++++++++++-------
 .../components/PlainTextComposer-test.tsx     |  94 ++++++++++
 .../components/WysiwygComposer-test.tsx       |  30 +---
 7 files changed, 214 insertions(+), 108 deletions(-)
 create mode 100644 test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx

diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index 64c940c2fd2..e15b5ef57f7 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -43,7 +43,13 @@ export function PlainTextComposer({
     usePlainTextInitialization(initialContent, ref);
     useSetCursorPosition(disabled, ref);
 
-    return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
+    return <div
+        data-testid="PlainTextComposer"
+        className={className}
+        onInput={onInput}
+        onPaste={onPaste}
+        onKeyDown={onKeyDown}
+    >
         <Editor ref={ref} disabled={disabled} />
         { children?.(ref, composerFunctions) }
     </div>;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index 73125a910ad..974e89f0cee 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -52,7 +52,7 @@ export const WysiwygComposer = memo(function WysiwygComposer(
     useSetCursorPosition(!isReady, ref);
 
     return (
-        <div className={className}>
+        <div data-testid="WysiwygComposer" className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
             <Editor ref={ref} disabled={!isReady} />
             { children?.(ref, wysiwyg) }
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
index dcaacd98ea4..abf2a6a6d27 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
@@ -16,13 +16,10 @@ limitations under the License.
 
 import { RefObject, useEffect } from "react";
 
-import { setCursorPositionAtTheEnd } from "./utils";
-
 export function usePlainTextInitialization(initialContent: string, ref: RefObject<HTMLElement>) {
     useEffect(() => {
         if (ref.current) {
             ref.current.innerText = initialContent;
-            setCursorPositionAtTheEnd(ref.current);
         }
     }, [ref, initialContent]);
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
index 98d09c12b05..02063ddcfb0 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { KeyboardEvent, SyntheticEvent, useCallback, useRef } from "react";
 
-import { useInputEventProcessor } from "./useInputEventProcessor";
+import { useSettingValue } from "../../../../../hooks/useSettings";
 
 function isDivElement(target: EventTarget): target is HTMLDivElement {
     return target instanceof HTMLDivElement;
@@ -26,25 +26,25 @@ export function usePlainTextListeners(onChange: (content: string) => void, onSen
     const ref = useRef<HTMLDivElement>();
     const send = useCallback((() => {
         if (ref.current) {
-            ref.current.innerText = '';
+            ref.current.innerHTML = '';
         }
         onSend();
     }), [ref, onSend]);
 
-    const inputEventProcessor = useInputEventProcessor(send);
-
     const onInput = useCallback((event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
         if (isDivElement(event.target)) {
-            onChange(event.target.innerText);
+            onChange(event.target.innerHTML);
         }
-        inputEventProcessor(event.nativeEvent);
-    }, [onChange, inputEventProcessor]);
+    }, [onChange]);
 
+    const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && !event.shiftKey && (!isCtrlEnter || (isCtrlEnter && event.ctrlKey))) {
+            event.preventDefault();
+            event.stopPropagation();
             send();
         }
-    }, [send]);
+    }, [isCtrlEnter, send]);
 
     return { ref, onInput, onPaste: onInput, onKeyDown };
 }
diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index 573ae451bea..c2e1b8a1fbd 100644
--- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -26,6 +26,8 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
 import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
+import * as useComposerFunctions
+    from "../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions";
 
 const mockClear = jest.fn();
 
@@ -68,86 +70,119 @@ describe('SendWysiwygComposer', () => {
 
     const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
 
-    const customRender = (onChange = (_content: string) => void 0, onSend = () => void 0, disabled = false) => {
+    const customRender = (
+        onChange = (_content: string) => void 0,
+        onSend = () => void 0,
+        disabled = false,
+        isRichTextEnabled = true) => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <RoomContext.Provider value={defaultRoomContext}>
-                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={true} />
+                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
         );
     };
 
-    it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
-        // Given we don't have focus
-        customRender(jest.fn(), jest.fn());
-        screen.getByLabelText('Bold').focus();
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
+    it('Should render WysiwygComposer when isRichTextEnabled is at true', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), false, true);
 
-        // When we send the right action
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
-        });
-
-        // Then the component gets the focus
-        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
-    });
-
-    it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
-        // Given we don't have focus
-        customRender(jest.fn(), jest.fn());
-        screen.getByLabelText('Bold').focus();
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-
-        // When we send the right action
-        defaultDispatcher.dispatch({
-            action: Action.ClearAndFocusSendMessageComposer,
-            context: null,
-        });
-
-        // Then the component gets the focus
-        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
-        expect(mockClear).toBeCalledTimes(1);
+        // Then
+        expect(screen.getByTestId('WysiwygComposer')).toBeTruthy();
     });
 
-    it('Should focus when receiving a reply_to_event action', async () => {
-        // Given we don't have focus
-        customRender(jest.fn(), jest.fn());
-        screen.getByLabelText('Bold').focus();
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
+    it('Should render PlainTextComposer when isRichTextEnabled is at false', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), false, false);
 
-        // When we send the right action
-        defaultDispatcher.dispatch({
-            action: "reply_to_event",
-            context: null,
-        });
-
-        // Then the component gets the focus
-        await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+        // Then
+        expect(screen.getByTestId('PlainTextComposer')).toBeTruthy();
     });
 
-    it('Should not focus when disabled', async () => {
-        // Given we don't have focus and we are disabled
-        customRender(jest.fn(), jest.fn(), true);
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-
-        // When we send an action that would cause us to get focus
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
-        });
-        // (Send a second event to exercise the clearTimeout logic)
-        defaultDispatcher.dispatch({
-            action: Action.FocusSendMessageComposer,
-            context: null,
+    describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
+        'Should focus when receiving an Action.FocusSendMessageComposer action',
+        ({ isRichTextEnabled }) => {
+            afterEach(() => {
+                jest.resetAllMocks();
+            });
+
+            it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
+            // Given we don't have focus
+                customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                document.head.focus();
+                //    screen.getByLabelText('Bold').focus();
+                // expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+                // When we send the right action
+                defaultDispatcher.dispatch({
+                    action: Action.FocusSendMessageComposer,
+                    context: null,
+                });
+
+                // Then the component gets the focus
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+            });
+
+            it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
+            // Given we don't have focus
+                const mock = jest.spyOn(useComposerFunctions, 'useComposerFunctions');
+                mock.mockReturnValue({ clear: mockClear });
+                customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                //   screen.getByLabelText('Bold').focus();
+                //    expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+                // When we send the right action
+                defaultDispatcher.dispatch({
+                    action: Action.ClearAndFocusSendMessageComposer,
+                    context: null,
+                });
+
+                // Then the component gets the focus
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+                expect(mockClear).toBeCalledTimes(1);
+
+                mock.mockRestore();
+            });
+
+            it('Should focus when receiving a reply_to_event action', async () => {
+            // Given we don't have focus
+                customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                //   screen.getByLabelText('Bold').focus();
+                //   expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+                // When we send the right action
+                defaultDispatcher.dispatch({
+                    action: "reply_to_event",
+                    context: null,
+                });
+
+                // Then the component gets the focus
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+            });
+
+            it('Should not focus when disabled', async () => {
+            // Given we don't have focus and we are disabled
+                customRender(jest.fn(), jest.fn(), true, isRichTextEnabled);
+                expect(screen.getByRole('textbox')).not.toHaveFocus();
+
+                // When we send an action that would cause us to get focus
+                defaultDispatcher.dispatch({
+                    action: Action.FocusSendMessageComposer,
+                    context: null,
+                });
+                // (Send a second event to exercise the clearTimeout logic)
+                defaultDispatcher.dispatch({
+                    action: Action.FocusSendMessageComposer,
+                    context: null,
+                });
+
+                // Wait for event dispatch to happen
+                await new Promise((r) => setTimeout(r, 200));
+
+                // Then we don't get it because we are disabled
+                expect(screen.getByRole('textbox')).not.toHaveFocus();
+            });
         });
-
-        // Wait for event dispatch to happen
-        await new Promise((r) => setTimeout(r, 200));
-
-        // Then we don't get it because we are disabled
-        expect(screen.getByRole('textbox')).not.toHaveFocus();
-    });
 });
 
diff --git a/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
new file mode 100644
index 00000000000..5d1b03020cf
--- /dev/null
+++ b/test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
@@ -0,0 +1,94 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { PlainTextComposer }
+    from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer";
+
+// Work around missing ClipboardEvent type
+class MyClipboardEvent {}
+window.ClipboardEvent = MyClipboardEvent as any;
+
+describe('PlainTextComposer', () => {
+    const customRender = (
+        onChange = (_content: string) => void 0,
+        onSend = () => void 0,
+        disabled = false,
+        initialContent?: string) => {
+        return render(
+            <PlainTextComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />,
+        );
+    };
+
+    it('Should have contentEditable at false when disabled', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), true);
+
+        // Then
+        expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
+    });
+
+    it('Should have focus', () => {
+        // When
+        customRender(jest.fn(), jest.fn(), false);
+
+        // Then
+        expect(screen.getByRole('textbox')).toHaveFocus();
+    });
+
+    it('Should call onChange handler', async () => {
+        // When
+        const content = 'content';
+        const onChange = jest.fn();
+        customRender(onChange, jest.fn());
+        await userEvent.type(screen.getByRole('textbox'), content);
+
+        // Then
+        expect(onChange).toBeCalledWith(content);
+    });
+
+    it('Should call onSend when Enter is pressed', async () => {
+        //When
+        const onSend = jest.fn();
+        customRender(jest.fn(), onSend);
+        await userEvent.type(screen.getByRole('textbox'), '{enter}');
+
+        // Then it sends a message
+        expect(onSend).toBeCalledTimes(1);
+    });
+
+    it('Should clear textbox content when clear is called', async () => {
+        //When
+        let composer;
+        render(
+            <PlainTextComposer onChange={jest.fn()} onSend={jest.fn()}>
+                { (ref, composerFunctions) => {
+                    composer = composerFunctions;
+                    return null;
+                } }
+            </PlainTextComposer>,
+        );
+        await userEvent.type(screen.getByRole('textbox'), 'content');
+        expect(screen.getByRole('textbox').innerHTML).toBe('content');
+        composer.clear();
+
+        // Then
+        expect(screen.getByRole('textbox').innerHTML).toBeFalsy();
+    });
+});
diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
index cb9c37071cd..7e3db04abcf 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@@ -19,10 +19,6 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
-import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import { IRoomState } from "../../../../../../src/components/structures/RoomView";
-import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../../test-utils";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import { WysiwygComposer }
     from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
@@ -54,36 +50,14 @@ jest.mock("@matrix-org/matrix-wysiwyg", () => ({
 }));
 
 describe('WysiwygComposer', () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    const mockClient = createTestClient();
-    const mockEvent = mkEvent({
-        type: "m.room.message",
-        room: 'myfakeroom',
-        user: 'myfakeuser',
-        content: { "msgtype": "m.text", "body": "Replying to this" },
-        event: true,
-    });
-    const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
-    mockRoom.findEventById = jest.fn(eventId => {
-        return eventId === mockEvent.getId() ? mockEvent : null;
-    });
-
-    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
-
     const customRender = (
         onChange = (_content: string) => void 0,
         onSend = () => void 0,
         disabled = false,
         initialContent?: string) => {
         return render(
-            <MatrixClientContext.Provider value={mockClient}>
-                <RoomContext.Provider value={defaultRoomContext}>
-                    <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />
-                </RoomContext.Provider>
-            </MatrixClientContext.Provider>,
+            <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />,
+
         );
     };
 

From ee61994c0592e74fcb4ab72d4eb3a1b513ab634c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 26 Oct 2022 17:14:33 +0100
Subject: [PATCH 086/113] Reset custom power selector when blurred on empty
 (#9508)

---
 src/Roles.ts                                  |  2 +-
 .../views/elements/PowerSelector.tsx          | 11 ++--
 .../views/elements/PowerSelector-test.tsx     | 62 +++++++++++++++++++
 3 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 test/components/views/elements/PowerSelector-test.tsx

diff --git a/src/Roles.ts b/src/Roles.ts
index ae0d316d301..77c50fe64c3 100644
--- a/src/Roles.ts
+++ b/src/Roles.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { _t } from './languageHandler';
 
-export function levelRoleMap(usersDefault: number) {
+export function levelRoleMap(usersDefault: number): Record<number | "undefined", string> {
     return {
         undefined: _t('Default'),
         0: _t('Restricted'),
diff --git a/src/components/views/elements/PowerSelector.tsx b/src/components/views/elements/PowerSelector.tsx
index 3a9e87d1581..8b251b91a51 100644
--- a/src/components/views/elements/PowerSelector.tsx
+++ b/src/components/views/elements/PowerSelector.tsx
@@ -44,14 +44,13 @@ interface IProps {
 }
 
 interface IState {
-    levelRoleMap: {};
+    levelRoleMap: Partial<Record<number | "undefined", string>>;
     // List of power levels to show in the drop-down
     options: number[];
 
     customValue: number;
     selectValue: number | string;
     custom?: boolean;
-    customLevel?: number;
 }
 
 export default class PowerSelector extends React.Component<IProps, IState> {
@@ -101,7 +100,7 @@ export default class PowerSelector extends React.Component<IProps, IState> {
             levelRoleMap,
             options,
             custom: isCustom,
-            customLevel: newProps.value,
+            customValue: newProps.value,
             selectValue: isCustom ? CUSTOM_VALUE : newProps.value,
         });
     }
@@ -125,7 +124,11 @@ export default class PowerSelector extends React.Component<IProps, IState> {
         event.preventDefault();
         event.stopPropagation();
 
-        this.props.onChange(this.state.customValue, this.props.powerLevelKey);
+        if (Number.isFinite(this.state.customValue)) {
+            this.props.onChange(this.state.customValue, this.props.powerLevelKey);
+        } else {
+            this.initStateFromProps(this.props); // reset, invalid input
+        }
     };
 
     private onCustomKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
diff --git a/test/components/views/elements/PowerSelector-test.tsx b/test/components/views/elements/PowerSelector-test.tsx
new file mode 100644
index 00000000000..9367d0b089f
--- /dev/null
+++ b/test/components/views/elements/PowerSelector-test.tsx
@@ -0,0 +1,62 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import PowerSelector from "../../../../src/components/views/elements/PowerSelector";
+
+describe('<PowerSelector />', () => {
+    it("should reset back to custom value when custom input is blurred blank", async () => {
+        const fn = jest.fn();
+        render(<PowerSelector value={25} maxValue={100} usersDefault={0} onChange={fn} />);
+
+        const input = screen.getByLabelText("Power level");
+        fireEvent.change(input, { target: { value: "" } });
+        fireEvent.blur(input);
+
+        await screen.findByDisplayValue(25);
+        expect(fn).not.toHaveBeenCalled();
+    });
+
+    it("should reset back to preset value when custom input is blurred blank", async () => {
+        const fn = jest.fn();
+        render(<PowerSelector value={50} maxValue={100} usersDefault={0} onChange={fn} />);
+
+        const select = screen.getByLabelText("Power level");
+        fireEvent.change(select, { target: { value: "SELECT_VALUE_CUSTOM" } });
+
+        const input = screen.getByLabelText("Power level");
+        fireEvent.change(input, { target: { value: "" } });
+        fireEvent.blur(input);
+
+        const option = await screen.findByText<HTMLOptionElement>("Moderator");
+        expect(option.selected).toBeTruthy();
+        expect(fn).not.toHaveBeenCalled();
+    });
+
+    it("should call onChange when custom input is blurred with a number in it", async () => {
+        const fn = jest.fn();
+        render(<PowerSelector value={25} maxValue={100} usersDefault={0} onChange={fn} powerLevelKey="key" />);
+
+        const input = screen.getByLabelText("Power level");
+        fireEvent.change(input, { target: { value: 40 } });
+        fireEvent.blur(input);
+
+        await screen.findByDisplayValue(40);
+        expect(fn).toHaveBeenCalledWith(40, "key");
+    });
+});

From 928a23e9d0f93103e8c6cfdc5fbe3644ac616f3b Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 18:18:34 +0200
Subject: [PATCH 087/113] Fix switching bug and br tag in firefox

---
 src/components/views/rooms/MessageComposer.tsx                 | 1 +
 .../views/rooms/wysiwyg_composer/utils/createMessageContent.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 7874ab94e67..4b04b87daef 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -339,6 +339,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                 this.state.isRichTextEnabled,
                 { mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
             dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
+            this.setState({ composerContent: '', initialComposerContent: '' });
         }
     };
 
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index 0b4c983acf0..bdf07fb15ec 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -82,7 +82,8 @@ export function createMessageContent(
 
     // const body = textSerialize(model);
 
-    const body = isHTML && htmlToPlainText(message) || message;
+    // TODO remove this ugly hack for replace br tag
+    const body = isHTML && htmlToPlainText(message) || message.replace(/<br>/g, '\n');
     const bodyPrefix = isReplyAndEditing && getTextReplyFallback(editedEvent) || '';
     const formattedBodyPrefix = isReplyAndEditing && getHtmlReplyFallback(editedEvent) || '';
 

From e6a645dfaeec989f65cf4aa19d98c74bf40ddcae Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Wed, 26 Oct 2022 18:59:47 +0200
Subject: [PATCH 088/113] Stop voice broadcast from save device on resume
 (#9509)

---
 src/voice-broadcast/index.ts                  |   1 -
 .../utils/VoiceBroadcastResumer.ts            |  88 ++++++---
 .../utils/resumeVoiceBroadcastInRoom.ts       |  34 ----
 test/test-utils/test-utils.ts                 |   2 +-
 .../utils/VoiceBroadcastResumer-test.ts       | 167 +++++++++++++-----
 .../utils/resumeVoiceBroadcastInRoom-test.ts  | 110 ------------
 6 files changed, 189 insertions(+), 213 deletions(-)
 delete mode 100644 src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
 delete mode 100644 test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts

diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 1ed5ff53777..05fca50c934 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -37,7 +37,6 @@ export * from "./stores/VoiceBroadcastRecordingsStore";
 export * from "./utils/getChunkLength";
 export * from "./utils/hasRoomLiveVoiceBroadcast";
 export * from "./utils/findRoomLiveVoiceBroadcastFromUserAndDevice";
-export * from "./utils/resumeVoiceBroadcastInRoom";
 export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
 export * from "./utils/startNewVoiceBroadcastRecording";
diff --git a/src/voice-broadcast/utils/VoiceBroadcastResumer.ts b/src/voice-broadcast/utils/VoiceBroadcastResumer.ts
index c8b3407451a..be949d0eabe 100644
--- a/src/voice-broadcast/utils/VoiceBroadcastResumer.ts
+++ b/src/voice-broadcast/utils/VoiceBroadcastResumer.ts
@@ -14,43 +14,87 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ClientEvent, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { SyncState } from "matrix-js-sdk/src/sync";
 
+import { VoiceBroadcastInfoEventContent, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
 import { IDestroyable } from "../../utils/IDestroyable";
 import { findRoomLiveVoiceBroadcastFromUserAndDevice } from "./findRoomLiveVoiceBroadcastFromUserAndDevice";
-import { resumeVoiceBroadcastInRoom } from "./resumeVoiceBroadcastInRoom";
 
+/**
+ * Handles voice broadcasts on app resume (after logging in, reload, crash…).
+ */
 export class VoiceBroadcastResumer implements IDestroyable {
-    private seenRooms = new Set<string>();
-    private userId: string;
-    private deviceId: string;
-
     public constructor(
         private client: MatrixClient,
     ) {
-        this.client.on(ClientEvent.Room, this.onRoom);
-        this.userId = this.client.getUserId();
-        this.deviceId = this.client.getDeviceId();
+        if (client.isInitialSyncComplete()) {
+            this.resume();
+        } else {
+            // wait for initial sync
+            client.on(ClientEvent.Sync, this.onClientSync);
+        }
+    }
+
+    private onClientSync = () => {
+        if (this.client.getSyncState() === SyncState.Syncing) {
+            this.client.off(ClientEvent.Sync, this.onClientSync);
+            this.resume();
+        }
+    };
+
+    private resume(): void {
+        const userId = this.client.getUserId();
+        const deviceId = this.client.getDeviceId();
+
+        if (!userId || !deviceId) {
+            // Resuming a voice broadcast only makes sense if there is a user.
+            return;
+        }
+
+        this.client.getRooms().forEach((room: Room) => {
+            const infoEvent = findRoomLiveVoiceBroadcastFromUserAndDevice(room, userId, deviceId);
+
+            if (infoEvent) {
+                // Found a live broadcast event from current device; stop it.
+                // Stopping it is a temporary solution (see PSF-1669).
+                this.sendStopVoiceBroadcastStateEvent(infoEvent);
+                return false;
+            }
+        });
     }
 
-    private onRoom = (room: Room): void => {
-        if (this.seenRooms.has(room.roomId)) return;
+    private sendStopVoiceBroadcastStateEvent(infoEvent: MatrixEvent): void {
+        const userId = this.client.getUserId();
+        const deviceId = this.client.getDeviceId();
+        const roomId = infoEvent.getRoomId();
+
+        if (!userId || !deviceId || !roomId) {
+            // We can only send a state event if we know all the IDs.
+            return;
+        }
 
-        this.seenRooms.add(room.roomId);
+        const content: VoiceBroadcastInfoEventContent = {
+            device_id: deviceId,
+            state: VoiceBroadcastInfoState.Stopped,
+        };
 
-        const infoEvent = findRoomLiveVoiceBroadcastFromUserAndDevice(
-            room,
-            this.userId,
-            this.deviceId,
-        );
+        // all events should reference the started event
+        const referencedEventId = infoEvent.getContent()?.state === VoiceBroadcastInfoState.Started
+            ? infoEvent.getId()
+            : infoEvent.getContent()?.["m.relates_to"]?.event_id;
 
-        if (infoEvent) {
-            resumeVoiceBroadcastInRoom(infoEvent, room, this.client);
+        if (referencedEventId) {
+            content["m.relates_to"] = {
+                rel_type: RelationType.Reference,
+                event_id: referencedEventId,
+            };
         }
-    };
+
+        this.client.sendStateEvent(roomId, VoiceBroadcastInfoEventType, content, userId);
+    }
 
     destroy(): void {
-        this.client.off(ClientEvent.Room, this.onRoom);
-        this.seenRooms = new Set<string>();
+        this.client.off(ClientEvent.Sync, this.onClientSync);
     }
 }
diff --git a/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts b/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
deleted file mode 100644
index f365fce2267..00000000000
--- a/src/voice-broadcast/utils/resumeVoiceBroadcastInRoom.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-
-import { VoiceBroadcastInfoState, VoiceBroadcastRecording } from "..";
-import { VoiceBroadcastRecordingsStore } from "../stores/VoiceBroadcastRecordingsStore";
-
-export const resumeVoiceBroadcastInRoom = (latestInfoEvent: MatrixEvent, room: Room, client: MatrixClient) => {
-    // voice broadcasts are based on their started event, try to find it
-    const infoEvent = latestInfoEvent.getContent()?.state === VoiceBroadcastInfoState.Started
-        ? latestInfoEvent
-        : room.findEventById(latestInfoEvent.getRelation()?.event_id);
-
-    if (!infoEvent) {
-        return;
-    }
-
-    const recording = new VoiceBroadcastRecording(infoEvent, client, VoiceBroadcastInfoState.Paused);
-    VoiceBroadcastRecordingsStore.instance().setCurrent(recording);
-};
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index 97a17e3b70a..ca07edb0bd0 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -143,7 +143,7 @@ export function createTestClient(): MatrixClient {
         sendTyping: jest.fn().mockResolvedValue({}),
         sendMessage: jest.fn().mockResolvedValue({}),
         sendStateEvent: jest.fn().mockResolvedValue(undefined),
-        getSyncState: () => "SYNCING",
+        getSyncState: jest.fn().mockReturnValue("SYNCING"),
         generateClientSecret: () => "t35tcl1Ent5ECr3T",
         isGuest: jest.fn().mockReturnValue(false),
         getRoomHierarchy: jest.fn().mockReturnValue({
diff --git a/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts b/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
index 4583590342e..b166bbb9bdd 100644
--- a/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
+++ b/test/voice-broadcast/utils/VoiceBroadcastResumer-test.ts
@@ -15,40 +15,78 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { ClientEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { SyncState } from "matrix-js-sdk/src/sync";
 
 import {
-    findRoomLiveVoiceBroadcastFromUserAndDevice,
-    resumeVoiceBroadcastInRoom,
+    VoiceBroadcastInfoEventContent,
+    VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastResumer,
 } from "../../../src/voice-broadcast";
 import { stubClient } from "../../test-utils";
 import { mkVoiceBroadcastInfoStateEvent } from "./test-utils";
 
-jest.mock("../../../src/voice-broadcast/utils/findRoomLiveVoiceBroadcastFromUserAndDevice");
-jest.mock("../../../src/voice-broadcast/utils/resumeVoiceBroadcastInRoom");
-
 describe("VoiceBroadcastResumer", () => {
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let room: Room;
     let resumer: VoiceBroadcastResumer;
-    let infoEvent: MatrixEvent;
+    let startedInfoEvent: MatrixEvent;
+    let pausedInfoEvent: MatrixEvent;
+
+    const itShouldNotSendAStateEvent = (): void => {
+        it("should not send a state event", () => {
+            expect(client.sendStateEvent).not.toHaveBeenCalled();
+        });
+    };
+
+    const itShouldSendAStoppedStateEvent = (): void => {
+        it("should send a stopped state event", () => {
+            expect(client.sendStateEvent).toHaveBeenCalledWith(
+                startedInfoEvent.getRoomId(),
+                VoiceBroadcastInfoEventType,
+                {
+                    "device_id": client.getDeviceId(),
+                    "state": VoiceBroadcastInfoState.Stopped,
+                    "m.relates_to": {
+                        rel_type: RelationType.Reference,
+                        event_id: startedInfoEvent.getId(),
+                    },
+                } as VoiceBroadcastInfoEventContent,
+                client.getUserId(),
+            );
+        });
+    };
+
+    const itShouldDeregisterFromTheClient = () => {
+        it("should deregister from the client", () => {
+            expect(client.off).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+        });
+    };
 
     beforeEach(() => {
         client = stubClient();
         jest.spyOn(client, "off");
-        room = new Room(roomId, client, client.getUserId());
-        mocked(client.getRoom).mockImplementation((getRoomId: string) => {
+        room = new Room(roomId, client, client.getUserId()!);
+        mocked(client.getRoom).mockImplementation((getRoomId: string | undefined) => {
             if (getRoomId === roomId) return room;
+
+            return null;
         });
-        resumer = new VoiceBroadcastResumer(client);
-        infoEvent = mkVoiceBroadcastInfoStateEvent(
+        mocked(client.getRooms).mockReturnValue([room]);
+        startedInfoEvent = mkVoiceBroadcastInfoStateEvent(
             roomId,
             VoiceBroadcastInfoState.Started,
-            client.getUserId(),
-            client.getDeviceId(),
+            client.getUserId()!,
+            client.getDeviceId()!,
+        );
+        pausedInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Paused,
+            client.getUserId()!,
+            client.getDeviceId()!,
+            startedInfoEvent,
         );
     });
 
@@ -56,56 +94,95 @@ describe("VoiceBroadcastResumer", () => {
         jest.clearAllMocks();
     });
 
-    describe("when there is no info event", () => {
+    describe("when the initial sync is completed", () => {
         beforeEach(() => {
-            client.emit(ClientEvent.Room, room);
+            mocked(client.isInitialSyncComplete).mockReturnValue(true);
         });
 
-        it("should not resume a broadcast", () => {
-            expect(resumeVoiceBroadcastInRoom).not.toHaveBeenCalled();
-        });
-    });
+        describe("and there is no info event", () => {
+            beforeEach(() => {
+                resumer = new VoiceBroadcastResumer(client);
+            });
 
-    describe("when there is an info event", () => {
-        beforeEach(() => {
-            mocked(findRoomLiveVoiceBroadcastFromUserAndDevice).mockImplementation((
-                findRoom: Room,
-                userId: string,
-                deviceId: string,
-            ) => {
-                if (findRoom === room && userId === client.getUserId() && deviceId === client.getDeviceId()) {
-                    return infoEvent;
-                }
+            itShouldNotSendAStateEvent();
+
+            describe("and calling destroy", () => {
+                beforeEach(() => {
+                    resumer.destroy();
+                });
+
+                itShouldDeregisterFromTheClient();
             });
-            client.emit(ClientEvent.Room, room);
         });
 
-        it("should resume a broadcast", () => {
-            expect(resumeVoiceBroadcastInRoom).toHaveBeenCalledWith(
-                infoEvent,
-                room,
-                client,
-            );
+        describe("and there is a started info event", () => {
+            beforeEach(() => {
+                room.currentState.setStateEvents([startedInfoEvent]);
+            });
+
+            describe("and the client knows about the user and device", () => {
+                beforeEach(() => {
+                    resumer = new VoiceBroadcastResumer(client);
+                });
+
+                itShouldSendAStoppedStateEvent();
+            });
+
+            describe("and the client doesn't know about the user", () => {
+                beforeEach(() => {
+                    mocked(client.getUserId).mockReturnValue(null);
+                    resumer = new VoiceBroadcastResumer(client);
+                });
+
+                itShouldNotSendAStateEvent();
+            });
+
+            describe("and the client doesn't know about the device", () => {
+                beforeEach(() => {
+                    mocked(client.getDeviceId).mockReturnValue(null);
+                    resumer = new VoiceBroadcastResumer(client);
+                });
+
+                itShouldNotSendAStateEvent();
+            });
         });
 
-        describe("and emitting a room event again", () => {
+        describe("and there is a paused info event", () => {
             beforeEach(() => {
-                client.emit(ClientEvent.Room, room);
+                room.currentState.setStateEvents([pausedInfoEvent]);
+                resumer = new VoiceBroadcastResumer(client);
             });
 
-            it("should not resume the broadcast again", () => {
-                expect(resumeVoiceBroadcastInRoom).toHaveBeenCalledTimes(1);
-            });
+            itShouldSendAStoppedStateEvent();
         });
     });
 
-    describe("when calling destroy", () => {
+    describe("when the initial sync is not completed", () => {
         beforeEach(() => {
-            resumer.destroy();
+            room.currentState.setStateEvents([pausedInfoEvent]);
+            mocked(client.isInitialSyncComplete).mockReturnValue(false);
+            mocked(client.getSyncState).mockReturnValue(SyncState.Prepared);
+            resumer = new VoiceBroadcastResumer(client);
         });
 
-        it("should deregister from the client", () => {
-            expect(client.off).toHaveBeenCalledWith(ClientEvent.Room, expect.any(Function));
+        itShouldNotSendAStateEvent();
+
+        describe("and a sync event appears", () => {
+            beforeEach(() => {
+                client.emit(ClientEvent.Sync, SyncState.Prepared, SyncState.Stopped);
+            });
+
+            itShouldNotSendAStateEvent();
+
+            describe("and the initial sync completed and a sync event appears", () => {
+                beforeEach(() => {
+                    mocked(client.getSyncState).mockReturnValue(SyncState.Syncing);
+                    client.emit(ClientEvent.Sync, SyncState.Syncing, SyncState.Prepared);
+                });
+
+                itShouldSendAStoppedStateEvent();
+                itShouldDeregisterFromTheClient();
+            });
         });
     });
 });
diff --git a/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts b/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts
deleted file mode 100644
index 8d435fb62ec..00000000000
--- a/test/voice-broadcast/utils/resumeVoiceBroadcastInRoom-test.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { mocked } from "jest-mock";
-import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-
-import {
-    resumeVoiceBroadcastInRoom,
-    VoiceBroadcastInfoState,
-    VoiceBroadcastRecording,
-    VoiceBroadcastRecordingsStore,
-} from "../../../src/voice-broadcast";
-import { stubClient } from "../../test-utils";
-import { mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
-
-const mockRecording = jest.fn();
-
-jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastRecording", () => ({
-    ...jest.requireActual("../../../src/voice-broadcast/models/VoiceBroadcastRecording") as object,
-    VoiceBroadcastRecording: jest.fn().mockImplementation(() => mockRecording),
-}));
-
-describe("resumeVoiceBroadcastInRoom", () => {
-    let client: MatrixClient;
-    const roomId = "!room:example.com";
-    let room: Room;
-    let startedInfoEvent: MatrixEvent;
-    let stoppedInfoEvent: MatrixEvent;
-
-    const itShouldStartAPausedRecording = () => {
-        it("should start a paused recording", () => {
-            expect(VoiceBroadcastRecording).toHaveBeenCalledWith(
-                startedInfoEvent,
-                client,
-                VoiceBroadcastInfoState.Paused,
-            );
-            expect(VoiceBroadcastRecordingsStore.instance().setCurrent).toHaveBeenCalledWith(mockRecording);
-        });
-    };
-
-    beforeEach(() => {
-        client = stubClient();
-        room = new Room(roomId, client, client.getUserId());
-        jest.spyOn(room, "findEventById");
-        jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "setCurrent").mockImplementation();
-
-        startedInfoEvent = mkVoiceBroadcastInfoStateEvent(
-            roomId,
-            VoiceBroadcastInfoState.Started,
-            client.getUserId(),
-            client.getDeviceId(),
-        );
-
-        stoppedInfoEvent = mkVoiceBroadcastInfoStateEvent(
-            roomId,
-            VoiceBroadcastInfoState.Stopped,
-            client.getUserId(),
-            client.getDeviceId(),
-            startedInfoEvent,
-        );
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    describe("when called with a stopped info event", () => {
-        describe("and there is a related event", () => {
-            beforeEach(() => {
-                mocked(room.findEventById).mockReturnValue(startedInfoEvent);
-                resumeVoiceBroadcastInRoom(stoppedInfoEvent, room, client);
-            });
-
-            itShouldStartAPausedRecording();
-        });
-
-        describe("and there is no related event", () => {
-            beforeEach(() => {
-                mocked(room.findEventById).mockReturnValue(null);
-                resumeVoiceBroadcastInRoom(stoppedInfoEvent, room, client);
-            });
-
-            it("should not start a broadcast", () => {
-                expect(VoiceBroadcastRecording).not.toHaveBeenCalled();
-                expect(VoiceBroadcastRecordingsStore.instance().setCurrent).not.toHaveBeenCalled();
-            });
-        });
-    });
-
-    describe("when called with a started info event", () => {
-        beforeEach(() => {
-            resumeVoiceBroadcastInRoom(startedInfoEvent, room, client);
-        });
-
-        itShouldStartAPausedRecording();
-    });
-});

From 92b4c8bf4e30e23a9076156eb415cac5f03ecf54 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 19:05:11 +0200
Subject: [PATCH 089/113] Review clean

---
 .../wysiwyg_composer/SendWysiwygComposer-test.tsx     | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index c2e1b8a1fbd..c85692d221a 100644
--- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -24,7 +24,7 @@ import RoomContext from "../../../../../src/contexts/RoomContext";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
-import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
+import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
 import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
 import * as useComposerFunctions
     from "../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions";
@@ -110,9 +110,6 @@ describe('SendWysiwygComposer', () => {
             it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
             // Given we don't have focus
                 customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
-                document.head.focus();
-                //    screen.getByLabelText('Bold').focus();
-                // expect(screen.getByRole('textbox')).not.toHaveFocus();
 
                 // When we send the right action
                 defaultDispatcher.dispatch({
@@ -129,8 +126,6 @@ describe('SendWysiwygComposer', () => {
                 const mock = jest.spyOn(useComposerFunctions, 'useComposerFunctions');
                 mock.mockReturnValue({ clear: mockClear });
                 customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
-                //   screen.getByLabelText('Bold').focus();
-                //    expect(screen.getByRole('textbox')).not.toHaveFocus();
 
                 // When we send the right action
                 defaultDispatcher.dispatch({
@@ -148,8 +143,6 @@ describe('SendWysiwygComposer', () => {
             it('Should focus when receiving a reply_to_event action', async () => {
             // Given we don't have focus
                 customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
-                //   screen.getByLabelText('Bold').focus();
-                //   expect(screen.getByRole('textbox')).not.toHaveFocus();
 
                 // When we send the right action
                 defaultDispatcher.dispatch({
@@ -178,7 +171,7 @@ describe('SendWysiwygComposer', () => {
                 });
 
                 // Wait for event dispatch to happen
-                await new Promise((r) => setTimeout(r, 200));
+                await flushPromises();
 
                 // Then we don't get it because we are disabled
                 expect(screen.getByRole('textbox')).not.toHaveFocus();

From c0282e0351ea18d591dae0f5de4d1a57f33799f4 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 19:09:12 +0200
Subject: [PATCH 090/113] Add check for body

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

diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index 52312e1a998..e75168d4134 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -60,6 +60,9 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
 
 function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
+    if (!body) {
+        return "";
+    }
     const lines = body.split("\n").map(l => l.trim());
     if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
         return `${lines[0]}\n\n`;

From 39f1dc224c18e99ed0e0c0190ba8d67a068d2a6c Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 19:16:29 +0200
Subject: [PATCH 091/113] Add typeof check for body

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

diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index e75168d4134..a9f756d1c2e 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -60,7 +60,7 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
 
 function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
-    if (!body) {
+    if (!body || typeof body !== 'string') {
         return "";
     }
     const lines = body.split("\n").map(l => l.trim());

From 0a7f44b226eedbe2930cfaa7b00c19f29ec93fd8 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 19:19:32 +0200
Subject: [PATCH 092/113] Add typeof check for body

---
 src/components/views/rooms/EditMessageComposer.tsx             | 3 ---
 .../views/rooms/wysiwyg_composer/utils/createMessageContent.ts | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index a9f756d1c2e..52312e1a998 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -60,9 +60,6 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
 
 function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
-    if (!body || typeof body !== 'string') {
-        return "";
-    }
     const lines = body.split("\n").map(l => l.trim());
     if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
         return `${lines[0]}\n\n`;
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index bdf07fb15ec..e6a3baabddb 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -44,6 +44,9 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
 
 function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
+    if (!body || typeof body !== 'string') {
+        return "";
+    }
     const lines = body.split("\n").map(l => l.trim());
     if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
         return `${lines[0]}\n\n`;

From aae93a9af2807fc7d75d07ba6bb2c8befb6f3fea Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 26 Oct 2022 19:21:42 +0200
Subject: [PATCH 093/113] Cleaner test on body

---
 .../views/rooms/wysiwyg_composer/utils/createMessageContent.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index e6a3baabddb..6d8a9f218e4 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -44,7 +44,7 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
 
 function getTextReplyFallback(mxEvent: MatrixEvent): string {
     const body = mxEvent.getContent().body;
-    if (!body || typeof body !== 'string') {
+    if (typeof body !== 'string') {
         return "";
     }
     const lines = body.split("\n").map(l => l.trim());

From 07003a5bc1be02fe01b51a68c30460a07022e7ac Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Thu, 27 Oct 2022 13:50:05 +0100
Subject: [PATCH 094/113] Make thread replies trigger a room list re-ordering
 (#9510)

---
 .../algorithms/tag-sorting/RecentAlgorithm.ts | 10 +++-
 .../algorithms/RecentAlgorithm-test.ts        | 55 +++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
index 9466a35940a..fe469d39ff3 100644
--- a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
@@ -73,7 +73,7 @@ export const sortRooms = (rooms: Room[]): Room[] => {
 };
 
 const getLastTs = (r: Room, userId: string) => {
-    const ts = (() => {
+    const mainTimelineLastTs = (() => {
         // Apparently we can have rooms without timelines, at least under testing
         // environments. Just return MAX_INT when this happens.
         if (!r?.timeline) {
@@ -108,7 +108,13 @@ const getLastTs = (r: Room, userId: string) => {
         // This is better than just assuming the last event was forever ago.
         return r.timeline[0]?.getTs() ?? Number.MAX_SAFE_INTEGER;
     })();
-    return ts;
+
+    const threadLastEventTimestamps = r.getThreads().map(thread => {
+        const event = thread.replyToEvent ?? thread.rootEvent;
+        return event!.getTs();
+    });
+
+    return Math.max(mainTimelineLastTs, ...threadLastEventTimestamps);
 };
 
 /**
diff --git a/test/stores/room-list/algorithms/RecentAlgorithm-test.ts b/test/stores/room-list/algorithms/RecentAlgorithm-test.ts
index 40ce53f2251..45dd89d7b5e 100644
--- a/test/stores/room-list/algorithms/RecentAlgorithm-test.ts
+++ b/test/stores/room-list/algorithms/RecentAlgorithm-test.ts
@@ -21,6 +21,7 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import "../../../../src/stores/room-list/RoomListStore";
 import { RecentAlgorithm } from "../../../../src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import { EffectiveMembership } from "../../../../src/utils/membership";
+import { makeThreadEvent, mkThread } from "../../../test-utils/threads";
 
 describe("RecentAlgorithm", () => {
     let algorithm;
@@ -122,6 +123,60 @@ describe("RecentAlgorithm", () => {
             room1.addLiveEvents([evt]);
 
             expect(algorithm.sortRooms([room2, room1])).toEqual([room2, room1]);
+
+            const { events } = mkThread({
+                room: room1,
+                client: cli,
+                authorId: "@bob:matrix.org",
+                participantUserIds: ["@bob:matrix.org"],
+                ts: 12,
+            });
+
+            room1.addLiveEvents(events);
+        });
+
+        it("orders rooms based on thread replies too", () => {
+            const room1 = new Room("room1", cli, "@bob:matrix.org");
+            const room2 = new Room("room2", cli, "@bob:matrix.org");
+
+            room1.getMyMembership = () => "join";
+            room2.getMyMembership = () => "join";
+
+            const { rootEvent, events: events1 } = mkThread({
+                room: room1,
+                client: cli,
+                authorId: "@bob:matrix.org",
+                participantUserIds: ["@bob:matrix.org"],
+                ts: 12,
+                length: 5,
+            });
+            room1.addLiveEvents(events1);
+
+            const { events: events2 } = mkThread({
+                room: room2,
+                client: cli,
+                authorId: "@bob:matrix.org",
+                participantUserIds: ["@bob:matrix.org"],
+                ts: 14,
+                length: 10,
+            });
+            room2.addLiveEvents(events2);
+
+            expect(algorithm.sortRooms([room1, room2])).toEqual([room2, room1]);
+
+            const threadReply = makeThreadEvent({
+                user: "@bob:matrix.org",
+                room: room1.roomId,
+                event: true,
+                msg: `hello world`,
+                rootEventId: rootEvent.getId(),
+                replyToEventId: rootEvent.getId(),
+                // replies are 1ms after each other
+                ts: 50,
+            });
+            room1.addLiveEvents([threadReply]);
+
+            expect(algorithm.sortRooms([room1, room2])).toEqual([room1, room2]);
         });
     });
 });

From c497046e39f6b9135a5408c289dc5356bdd6b8f6 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Thu, 27 Oct 2022 16:24:03 +0200
Subject: [PATCH 095/113] Implement voice broadcast `last_chunk_sequence`
 (#9513)

---
 src/voice-broadcast/index.ts                  |  1 +
 .../models/VoiceBroadcastRecording.ts         |  4 ++-
 .../models/VoiceBroadcastRecording-test.ts    | 27 +++++--------------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/voice-broadcast/index.ts b/src/voice-broadcast/index.ts
index 05fca50c934..c484f7af261 100644
--- a/src/voice-broadcast/index.ts
+++ b/src/voice-broadcast/index.ts
@@ -56,6 +56,7 @@ export interface VoiceBroadcastInfoEventContent {
     device_id: string;
     state: VoiceBroadcastInfoState;
     chunk_length?: number;
+    last_chunk_sequence?: number;
     ["m.relates_to"]?: {
         rel_type: RelationType;
         event_id: string;
diff --git a/src/voice-broadcast/models/VoiceBroadcastRecording.ts b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
index c025dc1a2af..dbab9fb6b83 100644
--- a/src/voice-broadcast/models/VoiceBroadcastRecording.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastRecording.ts
@@ -21,6 +21,7 @@ import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter"
 import {
     ChunkRecordedPayload,
     createVoiceBroadcastRecorder,
+    VoiceBroadcastInfoEventContent,
     VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastRecorder,
@@ -207,11 +208,12 @@ export class VoiceBroadcastRecording
             {
                 device_id: this.client.getDeviceId(),
                 state,
+                last_chunk_sequence: this.sequence,
                 ["m.relates_to"]: {
                     rel_type: RelationType.Reference,
                     event_id: this.infoEvent.getId(),
                 },
-            },
+            } as VoiceBroadcastInfoEventContent,
             this.client.getUserId(),
         );
     }
diff --git a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
index b8b8008c137..a27a9c42479 100644
--- a/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastRecording-test.ts
@@ -92,20 +92,20 @@ describe("VoiceBroadcastRecording", () => {
         });
     };
 
-    const itShouldSendAnInfoEvent = (state: VoiceBroadcastInfoState) => {
+    const itShouldSendAnInfoEvent = (state: VoiceBroadcastInfoState, lastChunkSequence: number) => {
         it(`should send a ${state} info event`, () => {
             expect(client.sendStateEvent).toHaveBeenCalledWith(
                 roomId,
                 VoiceBroadcastInfoEventType,
                 {
-
                     device_id: client.getDeviceId(),
                     state,
+                    last_chunk_sequence: lastChunkSequence,
                     ["m.relates_to"]: {
                         rel_type: RelationType.Reference,
                         event_id: infoEvent.getId(),
                     },
-                },
+                } as VoiceBroadcastInfoEventContent,
                 client.getUserId(),
             );
         });
@@ -203,22 +203,7 @@ describe("VoiceBroadcastRecording", () => {
                 voiceBroadcastRecording.stop();
             });
 
-            it("should send a stopped Voice Broadcast Info event", () => {
-                expect(mocked(client.sendStateEvent)).toHaveBeenCalledWith(
-                    roomId,
-                    VoiceBroadcastInfoEventType,
-                    {
-                        device_id: client.getDeviceId(),
-                        state: VoiceBroadcastInfoState.Stopped,
-                        ["m.relates_to"]: {
-                            rel_type: RelationType.Reference,
-                            event_id: infoEvent.getId(),
-                        },
-                    },
-                    client.getUserId(),
-                );
-            });
-
+            itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Stopped, 1);
             itShouldBeInState(VoiceBroadcastInfoState.Stopped);
 
             it("should emit a stopped state changed event", () => {
@@ -383,7 +368,7 @@ describe("VoiceBroadcastRecording", () => {
                 });
 
                 itShouldBeInState(VoiceBroadcastInfoState.Paused);
-                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Paused);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Paused, 1);
 
                 it("should stop the recorder", () => {
                     expect(mocked(voiceBroadcastRecorder.stop)).toHaveBeenCalled();
@@ -424,7 +409,7 @@ describe("VoiceBroadcastRecording", () => {
                 });
 
                 itShouldBeInState(VoiceBroadcastInfoState.Resumed);
-                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Resumed);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Resumed, 1);
 
                 it("should start the recorder", () => {
                     expect(mocked(voiceBroadcastRecorder.start)).toHaveBeenCalled();

From 750ca78e98bd06e9dac25b3b26d157d94f531892 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 28 Oct 2022 10:53:50 +0100
Subject: [PATCH 096/113] Fix room list sorted by recent on app startup (#9515)

---
 src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
index fe469d39ff3..1066ee38a1a 100644
--- a/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ b/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
@@ -111,7 +111,7 @@ const getLastTs = (r: Room, userId: string) => {
 
     const threadLastEventTimestamps = r.getThreads().map(thread => {
         const event = thread.replyToEvent ?? thread.rootEvent;
-        return event!.getTs();
+        return event?.getTs() ?? 0;
     });
 
     return Math.max(mainTimelineLastTs, ...threadLastEventTimestamps);

From d92fdc1f5bfc93b59a046ba9a6de0e1ed3eff7f6 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Fri, 28 Oct 2022 13:48:15 +0200
Subject: [PATCH 097/113] Loading threads with server-side assistance (#9356)

* Fix bug with message context menu
* fix bug where ThreadSummary failed if no last reply is available
* Fix relations direction API
* Use same API for threads as for any other timeline
* Determine if event belongs to thread on jumping to event
* properly listen to thread deletion
* Add thread redaction tests
* Add fetchInitialEvent tests
* Paginate using default TimelinePanel behaviour
* Remove unused threads deleted code

Co-authored-by: Germain <germain@souquet.com>
Co-authored-by: Germain <germains@element.io>
---
 src/components/structures/ThreadView.tsx      | 42 +-------
 src/components/structures/TimelinePanel.tsx   | 40 ++++----
 .../context_menus/MessageContextMenu.tsx      | 10 +-
 src/components/views/rooms/EventTile.tsx      | 14 ++-
 src/components/views/rooms/ThreadSummary.tsx  |  7 +-
 src/stores/widgets/StopGapWidgetDriver.ts     |  8 +-
 src/utils/EventUtils.ts                       |  5 +-
 .../components/views/rooms/EventTile-test.tsx | 53 ++++++++--
 test/test-utils/test-utils.ts                 |  2 +
 test/test-utils/threads.ts                    | 10 +-
 test/utils/EventUtils-test.ts                 | 96 ++++++++++++++++++-
 11 files changed, 205 insertions(+), 82 deletions(-)

diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index cb72e22d9b5..3463bcd3049 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -18,9 +18,6 @@ import React, { createRef, KeyboardEvent } from 'react';
 import { Thread, THREAD_RELATION_TYPE, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 import { Room, RoomEvent } from 'matrix-js-sdk/src/models/room';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
-import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
-import { IRelationsRequestOpts } from 'matrix-js-sdk/src/@types/requests';
 import { logger } from 'matrix-js-sdk/src/logger';
 import classNames from 'classnames';
 
@@ -236,10 +233,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
             thread_id: thread.id,
         });
         thread.emit(ThreadEvent.ViewThread);
-        await thread.fetchInitialEvents();
         this.updateThreadRelation();
-        this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
-        this.timelinePanel.current?.refreshTimeline();
+        this.timelinePanel.current?.refreshTimeline(this.props.initialEvent?.getId());
     }
 
     private setupThreadListeners(thread?: Thread | undefined, oldThread?: Thread | undefined): void {
@@ -293,40 +288,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private nextBatch: string | undefined | null = null;
-
-    private onPaginationRequest = async (
-        timelineWindow: TimelineWindow | null,
-        direction = Direction.Backward,
-        limit = 20,
-    ): Promise<boolean> => {
-        if (!Thread.hasServerSideSupport && timelineWindow) {
-            timelineWindow.extend(direction, limit);
-            return true;
-        }
-
-        const opts: IRelationsRequestOpts = {
-            limit,
-        };
-
-        if (this.nextBatch) {
-            opts.from = this.nextBatch;
-        }
-
-        let nextBatch: string | null | undefined = null;
-        if (this.state.thread) {
-            const response = await this.state.thread.fetchEvents(opts);
-            nextBatch = response.nextBatch;
-            this.nextBatch = nextBatch;
-        }
-
-        // Advances the marker on the TimelineWindow to define the correct
-        // window of events to display on screen
-        timelineWindow?.extend(direction, limit);
-
-        return !!nextBatch;
-    };
-
     private onFileDrop = (dataTransfer: DataTransfer) => {
         const roomId = this.props.mxEvent.getRoomId();
         if (roomId) {
@@ -409,7 +370,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
                     highlightedEventId={highlightedEventId}
                     eventScrollIntoView={this.props.initialEventScrollIntoView}
                     onEventScrolledIntoView={this.resetJumpToEvent}
-                    onPaginationRequest={this.onPaginationRequest}
                 />
             </>;
         } else {
diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx
index 7ddeca11bc5..fe7ecc82484 100644
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -1409,24 +1409,28 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // quite slow. So we detect that situation and shortcut straight to
         // calling _reloadEvents and updating the state.
 
-        const timeline = this.props.timelineSet.getTimelineForEvent(eventId);
-        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 is a hot-path optimization by skipping a promise tick
+        // by repeating a no-op sync branch in
+        // TimelineSet.getTimelineForEvent & MatrixClient.getEventTimeline
+        if (this.props.timelineSet.getTimelineForEvent(eventId)) {
+            // if we've got an eventId, and the timeline exists, we can skip
+            // the promise tick.
+            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);
-            this.buildLegacyCallEventGroupers();
-            this.setState({
-                events: [],
-                liveEvents: [],
-                canBackPaginate: false,
-                canForwardPaginate: false,
-                timelineLoading: true,
-            });
-            prom.then(onLoaded, onError);
+            return;
         }
+
+        const prom = this.timelineWindow.load(eventId, INITIAL_SIZE);
+        this.buildLegacyCallEventGroupers();
+        this.setState({
+            events: [],
+            liveEvents: [],
+            canBackPaginate: false,
+            canForwardPaginate: false,
+            timelineLoading: true,
+        });
+        prom.then(onLoaded, onError);
     }
 
     // handle the completion of a timeline load or localEchoUpdate, by
@@ -1443,8 +1447,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
     }
 
     // Force refresh the timeline before threads support pending events
-    public refreshTimeline(): void {
-        this.loadTimeline();
+    public refreshTimeline(eventId?: string): void {
+        this.loadTimeline(eventId, undefined, undefined, false);
         this.reloadEvents();
     }
 
diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx
index eca720412d2..f6961b627ea 100644
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -382,7 +382,13 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
     public render(): JSX.Element {
         const cli = MatrixClientPeg.get();
         const me = cli.getUserId();
-        const { mxEvent, rightClick, link, eventTileOps, reactions, collapseReplyChain } = this.props;
+        const {
+            mxEvent, rightClick, link, eventTileOps, reactions, collapseReplyChain,
+            ...other
+        } = this.props;
+        delete other.getRelationsForEvent;
+        delete other.permalinkCreator;
+
         const eventStatus = mxEvent.status;
         const unsentReactionsCount = this.getUnsentReactions().length;
         const contentActionable = isContentActionable(mxEvent);
@@ -747,7 +753,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         return (
             <React.Fragment>
                 <IconizedContextMenu
-                    {...this.props}
+                    {...other}
                     className="mx_MessageContextMenu"
                     compact={true}
                     data-testid="mx_MessageContextMenu"
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 670a291a422..f6b249b2913 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -540,7 +540,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
     private renderThreadInfo(): React.ReactNode {
         if (this.state.thread?.id === this.props.mxEvent.getId()) {
-            return <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} />;
+            return <ThreadSummary
+                mxEvent={this.props.mxEvent}
+                thread={this.state.thread}
+                data-testid="thread-summary"
+            />;
         }
 
         if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
@@ -1528,9 +1532,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
 // Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
 const SafeEventTile = forwardRef((props: EventTileProps, ref: RefObject<UnwrappedEventTile>) => {
-    return <TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout}>
-        <UnwrappedEventTile ref={ref} {...props} />
-    </TileErrorBoundary>;
+    return <>
+        <TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout}>
+            <UnwrappedEventTile ref={ref} {...props} />
+        </TileErrorBoundary>
+    </>;
 });
 export default SafeEventTile;
 
diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx
index c14a4cc9e14..83dbf0d45a8 100644
--- a/src/components/views/rooms/ThreadSummary.tsx
+++ b/src/components/views/rooms/ThreadSummary.tsx
@@ -37,7 +37,7 @@ interface IProps {
     thread: Thread;
 }
 
-const ThreadSummary = ({ mxEvent, thread }: IProps) => {
+const ThreadSummary = ({ mxEvent, thread, ...props }: IProps) => {
     const roomContext = useContext(RoomContext);
     const cardContext = useContext(CardContext);
     const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length);
@@ -50,6 +50,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
 
     return (
         <AccessibleButton
+            {...props}
             className="mx_ThreadSummary"
             onClick={(ev: ButtonEvent) => {
                 defaultDispatcher.dispatch<ShowThreadPayload>({
@@ -94,7 +95,9 @@ export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPrevi
         await cli.decryptEventIfNeeded(lastReply);
         return MessagePreviewStore.instance.generatePreviewForEvent(lastReply);
     }, [lastReply, content]);
-    if (!preview) return null;
+    if (!preview || !lastReply) {
+        return null;
+    }
 
     return <>
         <MemberAvatar
diff --git a/src/stores/widgets/StopGapWidgetDriver.ts b/src/stores/widgets/StopGapWidgetDriver.ts
index 3a72193c3f4..7bc85e02df3 100644
--- a/src/stores/widgets/StopGapWidgetDriver.ts
+++ b/src/stores/widgets/StopGapWidgetDriver.ts
@@ -451,12 +451,8 @@ export class StopGapWidgetDriver extends WidgetDriver {
             eventId,
             relationType ?? null,
             eventType ?? null,
-            {
-                from,
-                to,
-                limit,
-                dir,
-            });
+            { from, to, limit, dir },
+        );
 
         return {
             chunk: events.map(e => e.getEffectiveEvent() as IRoomEvent),
diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts
index d8cf66e5573..69e322ac6dc 100644
--- a/src/utils/EventUtils.ts
+++ b/src/utils/EventUtils.ts
@@ -238,8 +238,11 @@ export async function fetchInitialEvent(
     ) {
         const threadId = initialEvent.threadRootId;
         const room = client.getRoom(roomId);
+        const mapper = client.getEventMapper();
+        const rootEvent = room.findEventById(threadId)
+            ?? mapper(await client.fetchRoomEvent(roomId, threadId));
         try {
-            room.createThread(threadId, room.findEventById(threadId), [initialEvent], true);
+            room.createThread(threadId, rootEvent, [initialEvent], true);
         } catch (e) {
             logger.warn("Could not find root event: " + threadId);
         }
diff --git a/test/components/views/rooms/EventTile-test.tsx b/test/components/views/rooms/EventTile-test.tsx
index 6de3a262cdc..dd0cda23b4c 100644
--- a/test/components/views/rooms/EventTile-test.tsx
+++ b/test/components/views/rooms/EventTile-test.tsx
@@ -14,16 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { act, render } from "@testing-library/react";
+import React from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
-import React from "react";
 
 import EventTile, { EventTileProps } from "../../../../src/components/views/rooms/EventTile";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { getRoomContext, mkMessage, stubClient } from "../../../test-utils";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { getRoomContext, mkEvent, mkMessage, stubClient } from "../../../test-utils";
 import { mkThread } from "../../../test-utils/threads";
 
 describe("EventTile", () => {
@@ -52,9 +55,11 @@ describe("EventTile", () => {
             timelineRenderingType: renderingType,
         });
         return render(
-            <RoomContext.Provider value={context}>
-                <TestEventTile {...overrides} />
-            </RoomContext.Provider>,
+            <MatrixClientContext.Provider value={client}>
+                <RoomContext.Provider value={context}>
+                    <TestEventTile {...overrides} />
+                </RoomContext.Provider>,
+            </MatrixClientContext.Provider>,
         );
     }
 
@@ -69,6 +74,8 @@ describe("EventTile", () => {
         });
 
         jest.spyOn(client, "getRoom").mockReturnValue(room);
+        jest.spyOn(client, "decryptEventIfNeeded").mockResolvedValue();
+        jest.spyOn(SettingsStore, "getValue").mockImplementation(name => name === "feature_thread");
 
         mxEvent = mkMessage({
             room: room.roomId,
@@ -78,6 +85,40 @@ describe("EventTile", () => {
         });
     });
 
+    describe("EventTile thread summary", () => {
+        beforeEach(() => {
+            jest.spyOn(client, "supportsExperimentalThreads").mockReturnValue(true);
+        });
+
+        it("removes the thread summary when thread is deleted", async () => {
+            const { rootEvent, events: [, reply] } = mkThread({
+                room,
+                client,
+                authorId: "@alice:example.org",
+                participantUserIds: ["@alice:example.org"],
+                length: 2, // root + 1 answer
+            });
+            getComponent({
+                mxEvent: rootEvent,
+            }, TimelineRenderingType.Room);
+
+            await waitFor(() => expect(screen.queryByTestId("thread-summary")).not.toBeNull());
+
+            const redaction = mkEvent({
+                event: true,
+                type: EventType.RoomRedaction,
+                user: "@alice:example.org",
+                room: room.roomId,
+                redacts: reply.getId(),
+                content: {},
+            });
+
+            act(() => room.processThreadedEvents([redaction], false));
+
+            await waitFor(() => expect(screen.queryByTestId("thread-summary")).toBeNull());
+        });
+    });
+
     describe("EventTile renderingType: ThreadsList", () => {
         beforeEach(() => {
             const { rootEvent } = mkThread({
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index ca07edb0bd0..85045a6da82 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -212,6 +212,7 @@ type MakeEventPassThruProps = {
 };
 type MakeEventProps = MakeEventPassThruProps & {
     type: string;
+    redacts?: string;
     content: IContent;
     room?: Room["roomId"]; // to-device messages are roomless
     // eslint-disable-next-line camelcase
@@ -245,6 +246,7 @@ export function mkEvent(opts: MakeEventProps): MatrixEvent {
         event_id: "$" + Math.random() + "-" + Math.random(),
         origin_server_ts: opts.ts ?? 0,
         unsigned: opts.unsigned,
+        redacts: opts.redacts,
     };
     if (opts.skey !== undefined) {
         event.state_key = opts.skey;
diff --git a/test/test-utils/threads.ts b/test/test-utils/threads.ts
index 2259527178a..3b07c45051b 100644
--- a/test/test-utils/threads.ts
+++ b/test/test-utils/threads.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, MatrixEventEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
 import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import { mkMessage, MessageEventProps } from "./test-utils";
@@ -115,10 +115,18 @@ export const mkThread = ({
         ts,
         currentUserId: client.getUserId(),
     });
+    expect(rootEvent).toBeTruthy();
+
+    for (const evt of events) {
+        room?.reEmitter.reEmit(evt, [
+            MatrixEventEvent.BeforeRedaction,
+        ]);
+    }
 
     const thread = room.createThread(rootEvent.getId(), rootEvent, events, true);
     // So that we do not have to mock the thread loading
     thread.initialEventsFetched = true;
+    thread.addEvents(events, true);
 
     return { thread, rootEvent, events };
 };
diff --git a/test/utils/EventUtils-test.ts b/test/utils/EventUtils-test.ts
index 120d47aa1d4..644f274c19c 100644
--- a/test/utils/EventUtils-test.ts
+++ b/test/utils/EventUtils-test.ts
@@ -18,21 +18,27 @@ import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
 import {
     EventStatus,
     EventType,
+    IEvent,
+    MatrixClient,
     MatrixEvent,
     MsgType,
+    PendingEventOrdering,
     RelationType,
+    Room,
 } from "matrix-js-sdk/src/matrix";
+import { Thread } from "matrix-js-sdk/src/models/thread";
 
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
 import {
     canCancel,
     canEditContent,
     canEditOwnEvent,
+    fetchInitialEvent,
     isContentActionable,
     isLocationEvent,
     isVoiceMessage,
 } from "../../src/utils/EventUtils";
-import { getMockClientWithEventEmitter, makeBeaconInfoEvent, makePollStartEvent } from "../test-utils";
+import { getMockClientWithEventEmitter, makeBeaconInfoEvent, makePollStartEvent, stubClient } from "../test-utils";
 
 describe('EventUtils', () => {
     const userId = '@user:server';
@@ -336,4 +342,92 @@ describe('EventUtils', () => {
             expect(canCancel(status)).toBe(false);
         });
     });
+
+    describe("fetchInitialEvent", () => {
+        const ROOM_ID = "!roomId:example.org";
+        let room: Room;
+        let client: MatrixClient;
+
+        const NORMAL_EVENT = "$normalEvent";
+        const THREAD_ROOT = "$threadRoot";
+        const THREAD_REPLY = "$threadReply";
+
+        const events: Record<string, Partial<IEvent>> = {
+            [NORMAL_EVENT]: {
+                event_id: NORMAL_EVENT,
+                type: EventType.RoomMessage,
+                content: {
+                    "body": "Classic event",
+                    "msgtype": MsgType.Text,
+                },
+            },
+            [THREAD_ROOT]: {
+                event_id: THREAD_ROOT,
+                type: EventType.RoomMessage,
+                content: {
+                    "body": "Thread root",
+                    "msgtype": "m.text",
+                },
+                unsigned: {
+                    "m.relations": {
+                        [RelationType.Thread]: {
+                            latest_event: {
+                                event_id: THREAD_REPLY,
+                                type: EventType.RoomMessage,
+                                content: {
+                                    "body": "Thread reply",
+                                    "msgtype": MsgType.Text,
+                                    "m.relates_to": {
+                                        event_id: "$threadRoot",
+                                        rel_type: RelationType.Thread,
+                                    },
+                                },
+                            },
+                            count: 1,
+                            current_user_participated: false,
+                        },
+                    },
+                },
+            },
+            [THREAD_REPLY]: {
+                event_id: THREAD_REPLY,
+                type: EventType.RoomMessage,
+                content: {
+                    "body": "Thread reply",
+                    "msgtype": MsgType.Text,
+                    "m.relates_to": {
+                        event_id: THREAD_ROOT,
+                        rel_type: RelationType.Thread,
+                    },
+                },
+            },
+        };
+
+        beforeEach(() => {
+            jest.clearAllMocks();
+
+            stubClient();
+            client = MatrixClientPeg.get();
+
+            room = new Room(ROOM_ID, client, client.getUserId(), {
+                pendingEventOrdering: PendingEventOrdering.Detached,
+            });
+
+            jest.spyOn(client, "supportsExperimentalThreads").mockReturnValue(true);
+            jest.spyOn(client, "getRoom").mockReturnValue(room);
+            jest.spyOn(client, "fetchRoomEvent").mockImplementation(async (roomId, eventId) => {
+                return events[eventId] ?? Promise.reject();
+            });
+        });
+
+        it("returns null for unknown events", async () => {
+            expect(await fetchInitialEvent(client, room.roomId, "$UNKNOWN")).toBeNull();
+            expect(await fetchInitialEvent(client, room.roomId, NORMAL_EVENT)).toBeInstanceOf(MatrixEvent);
+        });
+
+        it("creates a thread when needed", async () => {
+            await fetchInitialEvent(client, room.roomId, THREAD_REPLY);
+            expect(room.getThread(THREAD_ROOT)).toBeInstanceOf(Thread);
+        });
+    });
 });

From 9b644844da4a0e9514f751ea036ed40c80e22282 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Mon, 31 Oct 2022 09:45:02 +0000
Subject: [PATCH 098/113] Fix NotificationBadge unsent color (#9522)

---
 .../StatelessNotificationBadge.tsx            |  2 +-
 .../StatelessNotificationBadge-test.tsx       | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx

diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
index 868df3216fc..e9e97475f70 100644
--- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -51,7 +51,7 @@ export function StatelessNotificationBadge({
     const classes = classNames({
         'mx_NotificationBadge': true,
         'mx_NotificationBadge_visible': isEmptyBadge ? true : hasUnreadCount,
-        'mx_NotificationBadge_highlighted': color === NotificationColor.Red,
+        'mx_NotificationBadge_highlighted': color >= NotificationColor.Red,
         'mx_NotificationBadge_dot': isEmptyBadge,
         'mx_NotificationBadge_2char': symbol?.length > 0 && symbol?.length < 3,
         'mx_NotificationBadge_3char': symbol?.length > 2,
diff --git a/test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx b/test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
new file mode 100644
index 00000000000..c3afd105a53
--- /dev/null
+++ b/test/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
@@ -0,0 +1,38 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import {
+    StatelessNotificationBadge,
+} from "../../../../../src/components/views/rooms/NotificationBadge/StatelessNotificationBadge";
+import { NotificationColor } from "../../../../../src/stores/notifications/NotificationColor";
+
+describe("StatelessNotificationBadge", () => {
+    it("is highlighted when unsent", () => {
+        const { container } = render(
+            <StatelessNotificationBadge
+                symbol="!"
+                count={0}
+                color={NotificationColor.Unsent}
+            />,
+        );
+        expect(
+            container.querySelector(".mx_NotificationBadge_highlighted"),
+        ).not.toBe(null);
+    });
+});

From 66c20a07983b1b4092facf240b414878a03dde5c Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 31 Oct 2022 18:35:02 +0100
Subject: [PATCH 099/113] Display voice broadcast total length (#9517)

---
 .../molecules/_VoiceBroadcastBody.pcss        |   7 ++
 .../molecules/VoiceBroadcastPlaybackBody.tsx  |   7 ++
 .../hooks/useVoiceBroadcastPlayback.ts        |   8 ++
 .../models/VoiceBroadcastPlayback.ts          |  64 ++++++-----
 .../utils/VoiceBroadcastChunkEvents.ts        |  99 +++++++++++++++++
 .../VoiceBroadcastPlaybackBody-test.tsx       |  38 +++++--
 .../VoiceBroadcastPlaybackBody-test.tsx.snap  | 104 ++++++++++++++++++
 .../models/VoiceBroadcastPlayback-test.ts     |  75 ++++---------
 .../utils/VoiceBroadcastChunkEvents-test.ts   |  99 +++++++++++++++++
 test/voice-broadcast/utils/test-utils.ts      |  36 +++++-
 10 files changed, 443 insertions(+), 94 deletions(-)
 create mode 100644 src/voice-broadcast/utils/VoiceBroadcastChunkEvents.ts
 create mode 100644 test/voice-broadcast/utils/VoiceBroadcastChunkEvents-test.ts

diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
index 37606f993ce..c3992006385 100644
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
+++ b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
@@ -17,7 +17,9 @@ limitations under the License.
 .mx_VoiceBroadcastBody {
     background-color: $quinary-content;
     border-radius: 8px;
+    color: $secondary-content;
     display: inline-block;
+    font-size: $font-12px;
     padding: $spacing-12;
 }
 
@@ -37,3 +39,8 @@ limitations under the License.
     display: flex;
     justify-content: space-around;
 }
+
+.mx_VoiceBroadcastBody_timerow {
+    display: flex;
+    justify-content: flex-end;
+}
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
index e6f2e343cb6..1d6b89dca9f 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
@@ -27,6 +27,7 @@ import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback
 import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
 import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
 import { _t } from "../../../languageHandler";
+import Clock from "../../../components/views/audio_messages/Clock";
 
 interface VoiceBroadcastPlaybackBodyProps {
     playback: VoiceBroadcastPlayback;
@@ -36,6 +37,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     playback,
 }) => {
     const {
+        length,
         live,
         room,
         sender,
@@ -73,6 +75,8 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
         />;
     }
 
+    const lengthSeconds = Math.round(length / 1000);
+
     return (
         <div className="mx_VoiceBroadcastBody">
             <VoiceBroadcastHeader
@@ -84,6 +88,9 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
             <div className="mx_VoiceBroadcastBody_controls">
                 { control }
             </div>
+            <div className="mx_VoiceBroadcastBody_timerow">
+                <Clock seconds={lengthSeconds} />
+            </div>
         </div>
     );
 };
diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
index 452035fbb96..7ed2b5682f0 100644
--- a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
+++ b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
@@ -50,7 +50,15 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
         },
     );
 
+    const [length, setLength] = useState(playback.getLength());
+    useTypedEventEmitter(
+        playback,
+        VoiceBroadcastPlaybackEvent.LengthChanged,
+        length => setLength(length),
+    );
+
     return {
+        length,
         live: playbackInfoState !== VoiceBroadcastInfoState.Stopped,
         room: room,
         sender: playback.infoEvent.sender,
diff --git a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
index dcecaa72820..a3834a7e799 100644
--- a/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
+++ b/src/voice-broadcast/models/VoiceBroadcastPlayback.ts
@@ -31,6 +31,7 @@ import { IDestroyable } from "../../utils/IDestroyable";
 import { VoiceBroadcastChunkEventType, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
 import { RelationsHelper, RelationsHelperEvent } from "../../events/RelationsHelper";
 import { getReferenceRelationsForEvent } from "../../events";
+import { VoiceBroadcastChunkEvents } from "../utils/VoiceBroadcastChunkEvents";
 
 export enum VoiceBroadcastPlaybackState {
     Paused,
@@ -59,9 +60,9 @@ export class VoiceBroadcastPlayback
     implements IDestroyable {
     private state = VoiceBroadcastPlaybackState.Stopped;
     private infoState: VoiceBroadcastInfoState;
-    private chunkEvents = new Map<string, MatrixEvent>();
-    private queue: Playback[] = [];
-    private currentlyPlaying: Playback;
+    private chunkEvents = new VoiceBroadcastChunkEvents();
+    private playbacks = new Map<string, Playback>();
+    private currentlyPlaying: MatrixEvent;
     private lastInfoEvent: MatrixEvent;
     private chunkRelationHelper: RelationsHelper;
     private infoRelationHelper: RelationsHelper;
@@ -101,11 +102,12 @@ export class VoiceBroadcastPlayback
         if (!eventId
             || eventId.startsWith("~!") // don't add local events
             || event.getContent()?.msgtype !== MsgType.Audio // don't add non-audio event
-            || this.chunkEvents.has(eventId)) {
+        ) {
             return false;
         }
 
-        this.chunkEvents.set(eventId, event);
+        this.chunkEvents.addEvent(event);
+        this.emit(VoiceBroadcastPlaybackEvent.LengthChanged, this.chunkEvents.getLength());
 
         if (this.getState() !== VoiceBroadcastPlaybackState.Stopped) {
             await this.enqueueChunk(event);
@@ -143,6 +145,8 @@ export class VoiceBroadcastPlayback
             return;
         }
 
+        this.chunkEvents.addEvents(chunkEvents);
+
         for (const chunkEvent of chunkEvents) {
             await this.enqueueChunk(chunkEvent);
         }
@@ -158,7 +162,7 @@ export class VoiceBroadcastPlayback
         const playback = PlaybackManager.instance.createPlaybackInstance(buffer);
         await playback.prepare();
         playback.clockInfo.populatePlaceholdersFrom(chunkEvent);
-        this.queue[sequenceNumber - 1] = playback; // -1 because the sequence number starts at 1
+        this.playbacks.set(chunkEvent.getId(), playback);
         playback.on(UPDATE_EVENT, (state) => this.onPlaybackStateChange(playback, state));
     }
 
@@ -167,16 +171,18 @@ export class VoiceBroadcastPlayback
             return;
         }
 
-        await this.playNext(playback);
+        await this.playNext();
     }
 
-    private async playNext(current: Playback): Promise<void> {
-        const next = this.queue[this.queue.indexOf(current) + 1];
+    private async playNext(): Promise<void> {
+        if (!this.currentlyPlaying) return;
+
+        const next = this.chunkEvents.getNext(this.currentlyPlaying);
 
         if (next) {
             this.setState(VoiceBroadcastPlaybackState.Playing);
             this.currentlyPlaying = next;
-            await next.play();
+            await this.playbacks.get(next.getId())?.play();
             return;
         }
 
@@ -188,19 +194,25 @@ export class VoiceBroadcastPlayback
         }
     }
 
+    public getLength(): number {
+        return this.chunkEvents.getLength();
+    }
+
     public async start(): Promise<void> {
-        if (this.queue.length === 0) {
+        if (this.playbacks.size === 0) {
             await this.loadChunks();
         }
 
-        const toPlayIndex = this.getInfoState() === VoiceBroadcastInfoState.Stopped
-            ? 0 // start at the beginning for an ended voice broadcast
-            : this.queue.length - 1; // start at the current chunk for an ongoing voice broadcast
+        const chunkEvents = this.chunkEvents.getEvents();
 
-        if (this.queue[toPlayIndex]) {
+        const toPlay = this.getInfoState() === VoiceBroadcastInfoState.Stopped
+            ? chunkEvents[0] // start at the beginning for an ended voice broadcast
+            : chunkEvents[chunkEvents.length - 1]; // start at the current chunk for an ongoing voice broadcast
+
+        if (this.playbacks.has(toPlay?.getId())) {
             this.setState(VoiceBroadcastPlaybackState.Playing);
-            this.currentlyPlaying = this.queue[toPlayIndex];
-            await this.currentlyPlaying.play();
+            this.currentlyPlaying = toPlay;
+            await this.playbacks.get(toPlay.getId()).play();
             return;
         }
 
@@ -208,14 +220,14 @@ export class VoiceBroadcastPlayback
     }
 
     public get length(): number {
-        return this.chunkEvents.size;
+        return this.chunkEvents.getLength();
     }
 
     public stop(): void {
         this.setState(VoiceBroadcastPlaybackState.Stopped);
 
         if (this.currentlyPlaying) {
-            this.currentlyPlaying.stop();
+            this.playbacks.get(this.currentlyPlaying.getId()).stop();
         }
     }
 
@@ -225,7 +237,7 @@ export class VoiceBroadcastPlayback
 
         this.setState(VoiceBroadcastPlaybackState.Paused);
         if (!this.currentlyPlaying) return;
-        this.currentlyPlaying.pause();
+        this.playbacks.get(this.currentlyPlaying.getId()).pause();
     }
 
     public resume(): void {
@@ -236,7 +248,7 @@ export class VoiceBroadcastPlayback
         }
 
         this.setState(VoiceBroadcastPlaybackState.Playing);
-        this.currentlyPlaying.play();
+        this.playbacks.get(this.currentlyPlaying.getId()).play();
     }
 
     /**
@@ -285,15 +297,13 @@ export class VoiceBroadcastPlayback
         this.emit(VoiceBroadcastPlaybackEvent.InfoStateChanged, state);
     }
 
-    private destroyQueue(): void {
-        this.queue.forEach(p => p.destroy());
-        this.queue = [];
-    }
-
     public destroy(): void {
         this.chunkRelationHelper.destroy();
         this.infoRelationHelper.destroy();
         this.removeAllListeners();
-        this.destroyQueue();
+
+        this.chunkEvents = new VoiceBroadcastChunkEvents();
+        this.playbacks.forEach(p => p.destroy());
+        this.playbacks = new Map<string, Playback>();
     }
 }
diff --git a/src/voice-broadcast/utils/VoiceBroadcastChunkEvents.ts b/src/voice-broadcast/utils/VoiceBroadcastChunkEvents.ts
new file mode 100644
index 00000000000..ac7e90361d5
--- /dev/null
+++ b/src/voice-broadcast/utils/VoiceBroadcastChunkEvents.ts
@@ -0,0 +1,99 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastChunkEventType } from "..";
+
+/**
+ * Voice broadcast chunk collection.
+ * Orders chunks by sequence (if available) or timestamp.
+ */
+export class VoiceBroadcastChunkEvents {
+    private events: MatrixEvent[] = [];
+
+    public getEvents(): MatrixEvent[] {
+        return [...this.events];
+    }
+
+    public getNext(event: MatrixEvent): MatrixEvent | undefined {
+        return this.events[this.events.indexOf(event) + 1];
+    }
+
+    public addEvent(event: MatrixEvent): void {
+        if (this.addOrReplaceEvent(event)) {
+            this.sort();
+        }
+    }
+
+    public addEvents(events: MatrixEvent[]): void {
+        const atLeastOneNew = events.reduce((newSoFar: boolean, event: MatrixEvent): boolean => {
+            return this.addOrReplaceEvent(event) || newSoFar;
+        }, false);
+
+        if (atLeastOneNew) {
+            this.sort();
+        }
+    }
+
+    public includes(event: MatrixEvent): boolean {
+        return !!this.events.find(e => e.getId() === event.getId());
+    }
+
+    public getLength(): number {
+        return this.events.reduce((length: number, event: MatrixEvent) => {
+            return length + this.calculateChunkLength(event);
+        }, 0);
+    }
+
+    private calculateChunkLength(event: MatrixEvent): number {
+        return event.getContent()?.["org.matrix.msc1767.audio"]?.duration
+            || event.getContent()?.info?.duration
+            || 0;
+    }
+
+    private addOrReplaceEvent = (event: MatrixEvent): boolean => {
+        this.events = this.events.filter(e => e.getId() !== event.getId());
+        this.events.push(event);
+        return true;
+    };
+
+    /**
+     * Sort by sequence, if available for all events.
+     * Else fall back to timestamp.
+     */
+    private sort(): void {
+        const compareFn = this.allHaveSequence() ? this.compareBySequence : this.compareByTimestamp;
+        this.events.sort(compareFn);
+    }
+
+    private compareBySequence = (a: MatrixEvent, b: MatrixEvent): number => {
+        const aSequence = a.getContent()?.[VoiceBroadcastChunkEventType]?.sequence || 0;
+        const bSequence = b.getContent()?.[VoiceBroadcastChunkEventType]?.sequence || 0;
+        return aSequence - bSequence;
+    };
+
+    private compareByTimestamp = (a: MatrixEvent, b: MatrixEvent): number => {
+        return a.getTs() - b.getTs();
+    };
+
+    private allHaveSequence(): boolean {
+        return !this.events.some((event: MatrixEvent) => {
+            const sequence = event.getContent()?.[VoiceBroadcastChunkEventType]?.sequence;
+            return parseInt(sequence, 10) !== sequence;
+        });
+    }
+}
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
index 7cd5acd2957..3b30f461f7e 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
@@ -16,17 +16,19 @@ limitations under the License.
 
 import React from "react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 
 import {
-    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
     VoiceBroadcastPlayback,
     VoiceBroadcastPlaybackBody,
+    VoiceBroadcastPlaybackEvent,
     VoiceBroadcastPlaybackState,
 } from "../../../../src/voice-broadcast";
-import { mkEvent, stubClient } from "../../../test-utils";
+import { stubClient } from "../../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../../utils/test-utils";
 
 // mock RoomAvatar, because it is doing too much fancy stuff
 jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
@@ -46,19 +48,19 @@ describe("VoiceBroadcastPlaybackBody", () => {
 
     beforeAll(() => {
         client = stubClient();
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            content: {},
-            room: roomId,
-            user: userId,
-        });
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Started,
+            userId,
+            client.getDeviceId(),
+        );
     });
 
     beforeEach(() => {
         playback = new VoiceBroadcastPlayback(infoEvent, client);
-        jest.spyOn(playback, "toggle");
+        jest.spyOn(playback, "toggle").mockImplementation(() => Promise.resolve());
         jest.spyOn(playback, "getState");
+        jest.spyOn(playback, "getLength").mockReturnValue((23 * 60 + 42) * 1000); // 23:42
     });
 
     describe("when rendering a buffering voice broadcast", () => {
@@ -72,7 +74,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
         });
     });
 
-    describe(`when rendering a ${VoiceBroadcastPlaybackState.Stopped} broadcast`, () => {
+    describe(`when rendering a stopped broadcast`, () => {
         beforeEach(() => {
             mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
             renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
@@ -87,6 +89,18 @@ describe("VoiceBroadcastPlaybackBody", () => {
                 expect(playback.toggle).toHaveBeenCalled();
             });
         });
+
+        describe("and the length updated", () => {
+            beforeEach(() => {
+                act(() => {
+                    playback.emit(VoiceBroadcastPlaybackEvent.LengthChanged, 42000); // 00:42
+                });
+            });
+
+            it("should render as expected", () => {
+                expect(renderResult.container).toMatchSnapshot();
+            });
+        });
     });
 
     describe.each([
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 1eace91e48e..9f9793bfeb4 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -64,6 +64,15 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
         />
       </div>
     </div>
+    <div
+      class="mx_VoiceBroadcastBody_timerow"
+    >
+      <span
+        class="mx_Clock"
+      >
+        23:42
+      </span>
+    </div>
   </div>
 </div>
 `;
@@ -132,6 +141,15 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
         />
       </div>
     </div>
+    <div
+      class="mx_VoiceBroadcastBody_timerow"
+    >
+      <span
+        class="mx_Clock"
+      >
+        23:42
+      </span>
+    </div>
   </div>
 </div>
 `;
@@ -201,6 +219,92 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         />
       </div>
     </div>
+    <div
+      class="mx_VoiceBroadcastBody_timerow"
+    >
+      <span
+        class="mx_Clock"
+      >
+        23:42
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast and the length updated should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        data-testid="room-avatar"
+      >
+        room avatar: 
+        My room
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          Voice broadcast
+        </div>
+      </div>
+      <div
+        class="mx_LiveBadge"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+        Live
+      </div>
+    </div>
+    <div
+      class="mx_VoiceBroadcastBody_controls"
+    >
+      <div
+        aria-label="play voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+    </div>
+    <div
+      class="mx_VoiceBroadcastBody_timerow"
+    >
+      <span
+        class="mx_Clock"
+      >
+        00:42
+      </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
index 8471727026b..cffd10857c3 100644
--- a/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
+++ b/test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { mocked } from "jest-mock";
-import { EventType, MatrixClient, MatrixEvent, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
+import { EventType, MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 
 import { Playback, PlaybackState } from "../../../src/audio/Playback";
@@ -24,7 +24,6 @@ import { getReferenceRelationsForEvent } from "../../../src/events";
 import { RelationsHelperEvent } from "../../../src/events/RelationsHelper";
 import { MediaEventHelper } from "../../../src/utils/MediaEventHelper";
 import {
-    VoiceBroadcastChunkEventType,
     VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastPlayback,
@@ -33,6 +32,7 @@ import {
 } from "../../../src/voice-broadcast";
 import { mkEvent, stubClient } from "../../test-utils";
 import { createTestPlayback } from "../../test-utils/audio";
+import { mkVoiceBroadcastChunkEvent } from "../utils/test-utils";
 
 jest.mock("../../../src/events/getReferenceRelationsForEvent", () => ({
     getReferenceRelationsForEvent: jest.fn(),
@@ -49,19 +49,15 @@ describe("VoiceBroadcastPlayback", () => {
     let infoEvent: MatrixEvent;
     let playback: VoiceBroadcastPlayback;
     let onStateChanged: (state: VoiceBroadcastPlaybackState) => void;
-    let chunk0Event: MatrixEvent;
     let chunk1Event: MatrixEvent;
     let chunk2Event: MatrixEvent;
     let chunk3Event: MatrixEvent;
-    const chunk0Data = new ArrayBuffer(1);
     const chunk1Data = new ArrayBuffer(2);
     const chunk2Data = new ArrayBuffer(3);
     const chunk3Data = new ArrayBuffer(3);
-    let chunk0Helper: MediaEventHelper;
     let chunk1Helper: MediaEventHelper;
     let chunk2Helper: MediaEventHelper;
     let chunk3Helper: MediaEventHelper;
-    let chunk0Playback: Playback;
     let chunk1Playback: Playback;
     let chunk2Playback: Playback;
     let chunk3Playback: Playback;
@@ -96,21 +92,6 @@ describe("VoiceBroadcastPlayback", () => {
         });
     };
 
-    const mkChunkEvent = (sequence: number) => {
-        return mkEvent({
-            event: true,
-            user: client.getUserId(),
-            room: roomId,
-            type: EventType.RoomMessage,
-            content: {
-                msgtype: MsgType.Audio,
-                [VoiceBroadcastChunkEventType]: {
-                    sequence,
-                },
-            },
-        });
-    };
-
     const mkChunkHelper = (data: ArrayBuffer): MediaEventHelper => {
         return {
             sourceBlob: {
@@ -152,25 +133,20 @@ describe("VoiceBroadcastPlayback", () => {
     beforeAll(() => {
         client = stubClient();
 
-        // crap event to test 0 as first sequence number
-        chunk0Event = mkChunkEvent(0);
-        chunk1Event = mkChunkEvent(1);
-        chunk2Event = mkChunkEvent(2);
-        chunk3Event = mkChunkEvent(3);
+        chunk1Event = mkVoiceBroadcastChunkEvent(userId, roomId, 23, 1);
+        chunk2Event = mkVoiceBroadcastChunkEvent(userId, roomId, 23, 2);
+        chunk3Event = mkVoiceBroadcastChunkEvent(userId, roomId, 23, 3);
 
-        chunk0Helper = mkChunkHelper(chunk0Data);
         chunk1Helper = mkChunkHelper(chunk1Data);
         chunk2Helper = mkChunkHelper(chunk2Data);
         chunk3Helper = mkChunkHelper(chunk3Data);
 
-        chunk0Playback = createTestPlayback();
         chunk1Playback = createTestPlayback();
         chunk2Playback = createTestPlayback();
         chunk3Playback = createTestPlayback();
 
         jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockImplementation(
             (buffer: ArrayBuffer, _waveForm?: number[]) => {
-                if (buffer === chunk0Data) return chunk0Playback;
                 if (buffer === chunk1Data) return chunk1Playback;
                 if (buffer === chunk2Data) return chunk2Playback;
                 if (buffer === chunk3Data) return chunk3Playback;
@@ -178,7 +154,6 @@ describe("VoiceBroadcastPlayback", () => {
         );
 
         mocked(MediaEventHelper).mockImplementation((event: MatrixEvent) => {
-            if (event === chunk0Event) return chunk0Helper;
             if (event === chunk1Event) return chunk1Helper;
             if (event === chunk2Event) return chunk2Helper;
             if (event === chunk3Event) return chunk3Helper;
@@ -240,7 +215,7 @@ describe("VoiceBroadcastPlayback", () => {
         beforeEach(() => {
             infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Resumed);
             playback = mkPlayback();
-            setUpChunkEvents([chunk2Event, chunk0Event, chunk1Event]);
+            setUpChunkEvents([chunk2Event, chunk1Event]);
         });
 
         describe("and calling start", () => {
@@ -282,20 +257,9 @@ describe("VoiceBroadcastPlayback", () => {
             playback = mkPlayback();
         });
 
-        describe("and there is only a 0 sequence event", () => {
-            beforeEach(() => {
-                setUpChunkEvents([chunk0Event]);
-            });
-
-            describe("and calling start", () => {
-                startPlayback();
-                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Buffering);
-            });
-        });
-
         describe("and there are some chunks", () => {
             beforeEach(() => {
-                setUpChunkEvents([chunk2Event, chunk0Event, chunk1Event]);
+                setUpChunkEvents([chunk2Event, chunk1Event]);
             });
 
             it("should expose the info event", () => {
@@ -337,6 +301,21 @@ describe("VoiceBroadcastPlayback", () => {
                     stopPlayback();
                     itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
                 });
+
+                describe("and calling destroy", () => {
+                    beforeEach(() => {
+                        playback.destroy();
+                    });
+
+                    it("should call removeAllListeners", () => {
+                        expect(playback.removeAllListeners).toHaveBeenCalled();
+                    });
+
+                    it("should call destroy on the playbacks", () => {
+                        expect(chunk1Playback.destroy).toHaveBeenCalled();
+                        expect(chunk2Playback.destroy).toHaveBeenCalled();
+                    });
+                });
             });
 
             describe("and calling toggle for the first time", () => {
@@ -378,16 +357,6 @@ describe("VoiceBroadcastPlayback", () => {
                     itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Playing);
                 });
             });
-
-            describe("and calling destroy", () => {
-                beforeEach(() => {
-                    playback.destroy();
-                });
-
-                it("should call removeAllListeners", () => {
-                    expect(playback.removeAllListeners).toHaveBeenCalled();
-                });
-            });
         });
     });
 });
diff --git a/test/voice-broadcast/utils/VoiceBroadcastChunkEvents-test.ts b/test/voice-broadcast/utils/VoiceBroadcastChunkEvents-test.ts
new file mode 100644
index 00000000000..1c09c94d914
--- /dev/null
+++ b/test/voice-broadcast/utils/VoiceBroadcastChunkEvents-test.ts
@@ -0,0 +1,99 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastChunkEvents } from "../../../src/voice-broadcast/utils/VoiceBroadcastChunkEvents";
+import { mkVoiceBroadcastChunkEvent } from "./test-utils";
+
+describe("VoiceBroadcastChunkEvents", () => {
+    const userId = "@user:example.com";
+    const roomId = "!room:example.com";
+    let eventSeq1Time1: MatrixEvent;
+    let eventSeq2Time4: MatrixEvent;
+    let eventSeq3Time2: MatrixEvent;
+    let eventSeq4Time1: MatrixEvent;
+    let eventSeqUTime3: MatrixEvent;
+    let eventSeq2Time4Dup: MatrixEvent;
+    let chunkEvents: VoiceBroadcastChunkEvents;
+
+    beforeEach(() => {
+        eventSeq1Time1 = mkVoiceBroadcastChunkEvent(userId, roomId, 7, 1, 1);
+        eventSeq2Time4 = mkVoiceBroadcastChunkEvent(userId, roomId, 23, 2, 4);
+        eventSeq2Time4Dup = mkVoiceBroadcastChunkEvent(userId, roomId, 3141, 2, 4);
+        jest.spyOn(eventSeq2Time4Dup, "getId").mockReturnValue(eventSeq2Time4.getId());
+        eventSeq3Time2 = mkVoiceBroadcastChunkEvent(userId, roomId, 42, 3, 2);
+        eventSeq4Time1 = mkVoiceBroadcastChunkEvent(userId, roomId, 69, 4, 1);
+        eventSeqUTime3 = mkVoiceBroadcastChunkEvent(userId, roomId, 314, undefined, 3);
+        chunkEvents = new VoiceBroadcastChunkEvents();
+    });
+
+    describe("when adding events that all have a sequence", () => {
+        beforeEach(() => {
+            chunkEvents.addEvent(eventSeq2Time4);
+            chunkEvents.addEvent(eventSeq1Time1);
+            chunkEvents.addEvents([
+                eventSeq4Time1,
+                eventSeq2Time4Dup,
+                eventSeq3Time2,
+            ]);
+        });
+
+        it("should provide the events sort by sequence", () => {
+            expect(chunkEvents.getEvents()).toEqual([
+                eventSeq1Time1,
+                eventSeq2Time4Dup,
+                eventSeq3Time2,
+                eventSeq4Time1,
+            ]);
+        });
+
+        it("getLength should return the total length of all chunks", () => {
+            expect(chunkEvents.getLength()).toBe(3259);
+        });
+
+        it("should return the expected next chunk", () => {
+            expect(chunkEvents.getNext(eventSeq2Time4Dup)).toBe(eventSeq3Time2);
+        });
+
+        it("should return undefined for next last chunk", () => {
+            expect(chunkEvents.getNext(eventSeq4Time1)).toBeUndefined();
+        });
+    });
+
+    describe("when adding events where at least one does not have a sequence", () => {
+        beforeEach(() => {
+            chunkEvents.addEvent(eventSeq2Time4);
+            chunkEvents.addEvent(eventSeq1Time1);
+            chunkEvents.addEvents([
+                eventSeq4Time1,
+                eventSeqUTime3,
+                eventSeq2Time4Dup,
+                eventSeq3Time2,
+            ]);
+        });
+
+        it("should provide the events sort by timestamp without duplicates", () => {
+            expect(chunkEvents.getEvents()).toEqual([
+                eventSeq1Time1,
+                eventSeq4Time1,
+                eventSeq3Time2,
+                eventSeqUTime3,
+                eventSeq2Time4Dup,
+            ]);
+        });
+    });
+});
diff --git a/test/voice-broadcast/utils/test-utils.ts b/test/voice-broadcast/utils/test-utils.ts
index 09a2ba0ed31..0a0f53ee286 100644
--- a/test/voice-broadcast/utils/test-utils.ts
+++ b/test/voice-broadcast/utils/test-utils.ts
@@ -14,9 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 
-import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../src/voice-broadcast";
+import {
+    VoiceBroadcastChunkEventType,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from "../../../src/voice-broadcast";
 import { mkEvent } from "../../test-utils";
 
 export const mkVoiceBroadcastInfoStateEvent = (
@@ -48,3 +52,31 @@ export const mkVoiceBroadcastInfoStateEvent = (
         },
     });
 };
+
+export const mkVoiceBroadcastChunkEvent = (
+    userId: string,
+    roomId: string,
+    duration: number,
+    sequence?: number,
+    timestamp?: number,
+): MatrixEvent => {
+    return mkEvent({
+        event: true,
+        user: userId,
+        room: roomId,
+        type: EventType.RoomMessage,
+        content: {
+            msgtype: MsgType.Audio,
+            ["org.matrix.msc1767.audio"]: {
+                duration,
+            },
+            info: {
+                duration,
+            },
+            [VoiceBroadcastChunkEventType]: {
+                ...(sequence ? { sequence } : {}),
+            },
+        },
+        ts: timestamp,
+    });
+};

From fed759ec0e7ce83b7b90a72490175ca3ad19d68e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 31 Oct 2022 18:11:38 +0000
Subject: [PATCH 100/113] Allow the docker tag for the sliding sync proxy to be
 specified in env (#9496)

---
 cypress.config.ts                     |  4 ++++
 cypress/plugins/sliding-sync/index.ts | 13 ++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index bc64b7d726a..87f8952dbcc 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -30,6 +30,10 @@ export default defineConfig({
         experimentalSessionAndOrigin: true,
         specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     },
+    env: {
+        // Docker tag to use for `ghcr.io/matrix-org/sliding-sync-proxy` image.
+        SLIDING_SYNC_PROXY_TAG: "v0.6.0",
+    },
     retries: {
         runMode: 4,
         openMode: 0,
diff --git a/cypress/plugins/sliding-sync/index.ts b/cypress/plugins/sliding-sync/index.ts
index 608ada8dbf3..44dcaecfcba 100644
--- a/cypress/plugins/sliding-sync/index.ts
+++ b/cypress/plugins/sliding-sync/index.ts
@@ -22,7 +22,8 @@ import { dockerExec, dockerIp, dockerRun, dockerStop } from "../docker";
 import { getFreePort } from "../utils/port";
 import { SynapseInstance } from "../synapsedocker";
 
-// A cypress plugins to add command to start & stop https://github.com/matrix-org/sliding-sync
+// A cypress plugin to add command to start & stop https://github.com/matrix-org/sliding-sync
+// SLIDING_SYNC_PROXY_TAG env used as the docker tag to use for `ghcr.io/matrix-org/sliding-sync-proxy` image.
 
 export interface ProxyInstance {
     containerId: string;
@@ -34,7 +35,7 @@ const instances = new Map<string, ProxyInstance>();
 
 const PG_PASSWORD = "p4S5w0rD";
 
-async function proxyStart(synapse: SynapseInstance): Promise<ProxyInstance> {
+async function proxyStart(dockerTag: string, synapse: SynapseInstance): Promise<ProxyInstance> {
     console.log(new Date(), "Starting sliding sync proxy...");
 
     const postgresId = await dockerRun({
@@ -75,9 +76,9 @@ async function proxyStart(synapse: SynapseInstance): Promise<ProxyInstance> {
     }
 
     const port = await getFreePort();
-    console.log(new Date(), "starting proxy container...");
+    console.log(new Date(), "starting proxy container...", dockerTag);
     const containerId = await dockerRun({
-        image: "ghcr.io/matrix-org/sliding-sync-proxy:v0.6.0",
+        image: "ghcr.io/matrix-org/sliding-sync-proxy:" + dockerTag,
         containerName: "react-sdk-cypress-sliding-sync-proxy",
         params: [
             "--rm",
@@ -114,8 +115,10 @@ async function proxyStop(instance: ProxyInstance): Promise<void> {
  * @type {Cypress.PluginConfig}
  */
 export function slidingSyncProxyDocker(on: PluginEvents, config: PluginConfigOptions) {
+    const dockerTag = config.env["SLIDING_SYNC_PROXY_TAG"];
+
     on("task", {
-        proxyStart,
+        proxyStart: proxyStart.bind(null, dockerTag),
         proxyStop,
     });
 

From 253129e6f2839eb1153a0d39e7313669c9e63533 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 1 Nov 2022 09:33:51 +0000
Subject: [PATCH 101/113] Reset matrix-js-sdk back to develop branch

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

diff --git a/package.json b/package.json
index 7b1e30c9b6b..33c74f702b2 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "maplibre-gl": "^1.15.2",
     "matrix-encrypt-attachment": "^1.0.3",
     "matrix-events-sdk": "^0.0.1-beta.7",
-    "matrix-js-sdk": "21.0.1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^1.1.1",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 57a92ca65ff..b1f0f9323b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7027,10 +7027,9 @@ matrix-events-sdk@^0.0.1-beta.7:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
   integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
 
-matrix-js-sdk@21.0.1:
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
   version "21.0.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-21.0.1.tgz#4ba88505a1b96b4d23288066865b67ccc17079a0"
-  integrity sha512-xrJibvMwj38fMeNX7e9kfEzR9xv5UNwWkYGlyQE+ag81HGLacbJvEix/2zkEQ40TypB9ENVioVFIyVYGN9Rv2Q==
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/52830a2a50732f4269048d0ad7a007c6b9528ffa"
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From dcf497d0130c5c800b98572e99bd7fa421289cf8 Mon Sep 17 00:00:00 2001
From: kegsay <kegan@matrix.org>
Date: Tue, 1 Nov 2022 10:27:03 +0000
Subject: [PATCH 102/113] sliding-sync: spider all rooms on the user's account
 for search (#9514)

* sliding-sync: spider all rooms on the user's account for search

On startup, slowly accumulate room metadata for all rooms on the
user's account. This is so we can populate the local search cache
with enough data for it to function, obviating the need to have
separate code paths for sliding sync searches.

This will allow spotlight search to work with slow/no network
connectivity, though clicking on the room will still require a
round trip.

This is an explicit request from @ara4n to improve the snapiness
of room searches, despite the unbounded bandwidth costs requesting
all N rooms on the user's account.

* Comments and tweak defaults

* Review comments; remove SS search code

* bugfix: use setListRanges once the list has been set up

If we don't, then we send needless extra data and can cause
bugs because setList will wipe the index->room_id map, which
trips up SlidingRoomListStore.
---
 src/MatrixClientPeg.ts                        |   1 +
 src/SlidingSyncManager.ts                     |  61 +++++++++-
 .../dialogs/spotlight/SpotlightDialog.tsx     |  67 ++++------
 test/SlidingSyncManager-test.ts               | 114 ++++++++++++++++++
 4 files changed, 198 insertions(+), 45 deletions(-)
 create mode 100644 test/SlidingSyncManager-test.ts

diff --git a/src/MatrixClientPeg.ts b/src/MatrixClientPeg.ts
index 358a4f3decf..85a76ee4e10 100644
--- a/src/MatrixClientPeg.ts
+++ b/src/MatrixClientPeg.ts
@@ -249,6 +249,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
                 this.matrixClient,
                 proxyUrl || this.matrixClient.baseUrl,
             );
+            SlidingSyncManager.instance.startSpidering(100, 50); // 100 rooms at a time, 50ms apart
         }
 
         // Connect the matrix client to the dispatcher and setting handlers
diff --git a/src/SlidingSyncManager.ts b/src/SlidingSyncManager.ts
index c41e6a78e32..3e79267ee2f 100644
--- a/src/SlidingSyncManager.ts
+++ b/src/SlidingSyncManager.ts
@@ -52,7 +52,7 @@ import {
     SlidingSync,
 } from 'matrix-js-sdk/src/sliding-sync';
 import { logger } from "matrix-js-sdk/src/logger";
-import { IDeferred, defer } from 'matrix-js-sdk/src/utils';
+import { IDeferred, defer, sleep } from 'matrix-js-sdk/src/utils';
 
 // how long to long poll for
 const SLIDING_SYNC_TIMEOUT_MS = 20 * 1000;
@@ -109,6 +109,9 @@ export class SlidingSyncManager {
     public configure(client: MatrixClient, proxyUrl: string): SlidingSync {
         this.client = client;
         this.listIdToIndex = {};
+        DEFAULT_ROOM_SUBSCRIPTION_INFO.include_old_rooms.required_state.push(
+            [EventType.RoomMember, client.getUserId()],
+        );
         this.slidingSync = new SlidingSync(
             proxyUrl, [], DEFAULT_ROOM_SUBSCRIPTION_INFO, client, SLIDING_SYNC_TIMEOUT_MS,
         );
@@ -262,4 +265,60 @@ export class SlidingSyncManager {
         }
         return roomId;
     }
+
+    /**
+     * Retrieve all rooms on the user's account. Used for pre-populating the local search cache.
+     * Retrieval is gradual over time.
+     * @param batchSize The number of rooms to return in each request.
+     * @param gapBetweenRequestsMs The number of milliseconds to wait between requests.
+     */
+    public async startSpidering(batchSize: number, gapBetweenRequestsMs: number) {
+        await sleep(gapBetweenRequestsMs); // wait a bit as this is called on first render so let's let things load
+        const listIndex = this.getOrAllocateListIndex(SlidingSyncManager.ListSearch);
+        let startIndex = batchSize;
+        let hasMore = true;
+        let firstTime = true;
+        while (hasMore) {
+            const endIndex = startIndex + batchSize-1;
+            try {
+                const ranges = [[0, batchSize-1], [startIndex, endIndex]];
+                if (firstTime) {
+                    await this.slidingSync.setList(listIndex, {
+                        // e.g [0,19] [20,39] then [0,19] [40,59]. We keep [0,20] constantly to ensure
+                        // any changes to the list whilst spidering are caught.
+                        ranges: ranges,
+                        sort: [
+                            "by_recency", // this list isn't shown on the UI so just sorting by timestamp is enough
+                        ],
+                        timeline_limit: 0, // we only care about the room details, not messages in the room
+                        required_state: [
+                            [EventType.RoomJoinRules, ""], // the public icon on the room list
+                            [EventType.RoomAvatar, ""], // any room avatar
+                            [EventType.RoomTombstone, ""], // lets JS SDK hide rooms which are dead
+                            [EventType.RoomEncryption, ""], // lets rooms be configured for E2EE correctly
+                            [EventType.RoomCreate, ""], // for isSpaceRoom checks
+                            [EventType.RoomMember, this.client.getUserId()!], // lets the client calculate that we are in fact in the room
+                        ],
+                        // we don't include_old_rooms here in an effort to reduce the impact of spidering all rooms
+                        // on the user's account. This means some data in the search dialog results may be inaccurate
+                        // e.g membership of space, but this will be corrected when the user clicks on the room
+                        // as the direct room subscription does include old room iterations.
+                        filters: { // we get spaces via a different list, so filter them out
+                            not_room_types: ["m.space"],
+                        },
+                    });
+                } else {
+                    await this.slidingSync.setListRanges(listIndex, ranges);
+                }
+                // gradually request more over time
+                await sleep(gapBetweenRequestsMs);
+            } catch (err) {
+                // do nothing, as we reject only when we get interrupted but that's fine as the next
+                // request will include our data
+            }
+            hasMore = (endIndex+1) < this.slidingSync.getListData(listIndex)?.joinedCount;
+            startIndex += batchSize;
+            firstTime = false;
+        }
+    }
 }
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 6703afc0879..f000d3bf4ba 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -91,7 +91,6 @@ import { RoomResultContextMenus } from "./RoomResultContextMenus";
 import { RoomContextDetails } from "../../rooms/RoomContextDetails";
 import { TooltipOption } from "./TooltipOption";
 import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
-import { useSlidingSyncRoomSearch } from "../../../../hooks/useSlidingSyncRoomSearch";
 import { shouldShowFeedback } from "../../../../utils/Feedback";
 import RoomAvatar from "../../avatars/RoomAvatar";
 
@@ -342,43 +341,26 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         searchProfileInfo,
         searchParams,
     );
-    const isSlidingSyncEnabled = SettingsStore.getValue("feature_sliding_sync");
-    let {
-        loading: slidingSyncRoomSearchLoading,
-        rooms: slidingSyncRooms,
-        search: searchRoomsServerside,
-    } = useSlidingSyncRoomSearch();
-    useDebouncedCallback(isSlidingSyncEnabled, searchRoomsServerside, searchParams);
-    if (!isSlidingSyncEnabled) {
-        slidingSyncRoomSearchLoading = false;
-    }
 
     const possibleResults = useMemo<Result[]>(
         () => {
             const userResults: IMemberResult[] = [];
-            let roomResults: IRoomResult[];
-            let alreadyAddedUserIds: Set<string>;
-            if (isSlidingSyncEnabled) {
-                // use the rooms sliding sync returned as the server has already worked it out for us
-                roomResults = slidingSyncRooms.map(toRoomResult);
-            } else {
-                roomResults = findVisibleRooms(cli).map(toRoomResult);
-                // If we already have a DM with the user we're looking for, we will
-                // show that DM instead of the user themselves
-                alreadyAddedUserIds = roomResults.reduce((userIds, result) => {
-                    const userId = DMRoomMap.shared().getUserIdForRoomId(result.room.roomId);
-                    if (!userId) return userIds;
-                    if (result.room.getJoinedMemberCount() > 2) return userIds;
-                    userIds.add(userId);
-                    return userIds;
-                }, new Set<string>());
-                for (const user of [...findVisibleRoomMembers(cli), ...users]) {
-                    // Make sure we don't have any user more than once
-                    if (alreadyAddedUserIds.has(user.userId)) continue;
-                    alreadyAddedUserIds.add(user.userId);
-
-                    userResults.push(toMemberResult(user));
-                }
+            const roomResults = findVisibleRooms(cli).map(toRoomResult);
+            // If we already have a DM with the user we're looking for, we will
+            // show that DM instead of the user themselves
+            const alreadyAddedUserIds = roomResults.reduce((userIds, result) => {
+                const userId = DMRoomMap.shared().getUserIdForRoomId(result.room.roomId);
+                if (!userId) return userIds;
+                if (result.room.getJoinedMemberCount() > 2) return userIds;
+                userIds.add(userId);
+                return userIds;
+            }, new Set<string>());
+            for (const user of [...findVisibleRoomMembers(cli), ...users]) {
+                // Make sure we don't have any user more than once
+                if (alreadyAddedUserIds.has(user.userId)) continue;
+                alreadyAddedUserIds.add(user.userId);
+
+                userResults.push(toMemberResult(user));
             }
 
             return [
@@ -402,7 +384,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 ...publicRooms.map(toPublicRoomResult),
             ].filter(result => filter === null || result.filter.includes(filter));
         },
-        [cli, users, profile, publicRooms, slidingSyncRooms, isSlidingSyncEnabled, filter],
+        [cli, users, profile, publicRooms, filter],
     );
 
     const results = useMemo<Record<Section, Result[]>>(() => {
@@ -421,13 +403,10 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
 
             possibleResults.forEach(entry => {
                 if (isRoomResult(entry)) {
-                    // sliding sync gives the correct rooms in the list so we don't need to filter
-                    if (!isSlidingSyncEnabled) {
-                        if (!entry.room.normalizedName?.includes(normalizedQuery) &&
-                            !entry.room.getCanonicalAlias()?.toLowerCase().includes(lcQuery) &&
-                            !entry.query?.some(q => q.includes(lcQuery))
-                        ) return; // bail, does not match query
-                    }
+                    if (!entry.room.normalizedName?.includes(normalizedQuery) &&
+                        !entry.room.getCanonicalAlias()?.toLowerCase().includes(lcQuery) &&
+                        !entry.query?.some(q => q.includes(lcQuery))
+                    ) return; // bail, does not match query
                 } else if (isMemberResult(entry)) {
                     if (!entry.query?.some(q => q.includes(lcQuery))) return; // bail, does not match query
                 } else if (isPublicRoomResult(entry)) {
@@ -478,7 +457,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         }
 
         return results;
-    }, [trimmedQuery, filter, cli, possibleResults, isSlidingSyncEnabled, memberComparator]);
+    }, [trimmedQuery, filter, cli, possibleResults, memberComparator]);
 
     const numResults = sum(Object.values(results).map(it => it.length));
     useWebSearchMetrics(numResults, query.length, true);
@@ -1236,7 +1215,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     aria-label={_t("Search")}
                     aria-describedby="mx_SpotlightDialog_keyboardPrompt"
                 />
-                { (publicRoomsLoading || peopleLoading || profileLoading || slidingSyncRoomSearchLoading) && (
+                { (publicRoomsLoading || peopleLoading || profileLoading) && (
                     <Spinner w={24} h={24} />
                 ) }
             </div>
diff --git a/test/SlidingSyncManager-test.ts b/test/SlidingSyncManager-test.ts
new file mode 100644
index 00000000000..40da54a7d1e
--- /dev/null
+++ b/test/SlidingSyncManager-test.ts
@@ -0,0 +1,114 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { SlidingSync } from 'matrix-js-sdk/src/sliding-sync';
+import { mocked } from 'jest-mock';
+
+import { SlidingSyncManager } from '../src/SlidingSyncManager';
+import { stubClient } from './test-utils';
+
+jest.mock('matrix-js-sdk/src/sliding-sync');
+const MockSlidingSync = <jest.Mock<SlidingSync>><unknown>SlidingSync;
+
+describe('SlidingSyncManager', () => {
+    let manager: SlidingSyncManager;
+    let slidingSync: SlidingSync;
+
+    beforeEach(() => {
+        slidingSync = new MockSlidingSync();
+        manager = new SlidingSyncManager();
+        manager.configure(stubClient(), "invalid");
+        manager.slidingSync = slidingSync;
+    });
+
+    describe("startSpidering", () => {
+        it("requests in batchSizes", async () => {
+            const gapMs = 1;
+            const batchSize = 10;
+            mocked(slidingSync.setList).mockResolvedValue("yep");
+            mocked(slidingSync.setListRanges).mockResolvedValue("yep");
+            mocked(slidingSync.getListData).mockImplementation((i) => {
+                return {
+                    joinedCount: 64,
+                    roomIndexToRoomId: {},
+                };
+            });
+            await manager.startSpidering(batchSize, gapMs);
+            // we expect calls for 10,19 -> 20,29 -> 30,39 -> 40,49 -> 50,59 -> 60,69
+            const wantWindows = [
+                [10, 19], [20, 29], [30, 39], [40, 49], [50, 59], [60, 69],
+            ];
+            expect(slidingSync.getListData).toBeCalledTimes(wantWindows.length);
+            expect(slidingSync.setList).toBeCalledTimes(1);
+            expect(slidingSync.setListRanges).toBeCalledTimes(wantWindows.length-1);
+            wantWindows.forEach((range, i) => {
+                if (i === 0) {
+                    expect(slidingSync.setList).toBeCalledWith(
+                        manager.getOrAllocateListIndex(SlidingSyncManager.ListSearch),
+                        expect.objectContaining({
+                            ranges: [[0, batchSize-1], range],
+                        }),
+                    );
+                    return;
+                }
+                expect(slidingSync.setListRanges).toBeCalledWith(
+                    manager.getOrAllocateListIndex(SlidingSyncManager.ListSearch),
+                    [[0, batchSize-1], range],
+                );
+            });
+        });
+        it("handles accounts with zero rooms", async () => {
+            const gapMs = 1;
+            const batchSize = 10;
+            mocked(slidingSync.setList).mockResolvedValue("yep");
+            mocked(slidingSync.getListData).mockImplementation((i) => {
+                return {
+                    joinedCount: 0,
+                    roomIndexToRoomId: {},
+                };
+            });
+            await manager.startSpidering(batchSize, gapMs);
+            expect(slidingSync.getListData).toBeCalledTimes(1);
+            expect(slidingSync.setList).toBeCalledTimes(1);
+            expect(slidingSync.setList).toBeCalledWith(
+                manager.getOrAllocateListIndex(SlidingSyncManager.ListSearch),
+                expect.objectContaining({
+                    ranges: [[0, batchSize-1], [batchSize, batchSize+batchSize-1]],
+                }),
+            );
+        });
+        it("continues even when setList rejects", async () => {
+            const gapMs = 1;
+            const batchSize = 10;
+            mocked(slidingSync.setList).mockRejectedValue("narp");
+            mocked(slidingSync.getListData).mockImplementation((i) => {
+                return {
+                    joinedCount: 0,
+                    roomIndexToRoomId: {},
+                };
+            });
+            await manager.startSpidering(batchSize, gapMs);
+            expect(slidingSync.getListData).toBeCalledTimes(1);
+            expect(slidingSync.setList).toBeCalledTimes(1);
+            expect(slidingSync.setList).toBeCalledWith(
+                manager.getOrAllocateListIndex(SlidingSyncManager.ListSearch),
+                expect.objectContaining({
+                    ranges: [[0, batchSize-1], [batchSize, batchSize+batchSize-1]],
+                }),
+            );
+        });
+    });
+});

From 89a1eaca66046bf826de4ffe248303226cf00960 Mon Sep 17 00:00:00 2001
From: Element Translate Bot <admin@riot.im>
Date: Tue, 1 Nov 2022 15:33:52 +0100
Subject: [PATCH 103/113] Translations update from Weblate (#9531)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Translated using Weblate (German)

Currently translated at 99.4% (3608 of 3629 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.5% (3617 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Italian)

Currently translated at 99.2% (3607 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Estonian)

Currently translated at 99.7% (3624 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (Hungarian)

Currently translated at 99.2% (3606 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Ukrainian)

Currently translated at 99.3% (3611 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Czech)

Currently translated at 99.3% (3608 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Hungarian)

Currently translated at 99.8% (3629 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Czech)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Slovak)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sk/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (French)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/

* Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/

* Translated using Weblate (German)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (French)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/

* Translated using Weblate (Italian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Czech)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Russian)

Currently translated at 98.0% (3563 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Russian)

Currently translated at 98.0% (3563 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/

* Translated using Weblate (Slovak)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sk/

* Translated using Weblate (Lithuanian)

Currently translated at 70.3% (2556 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lt/

* Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Indonesian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (Hungarian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Russian)

Currently translated at 98.0% (3563 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/ru/

* Translated using Weblate (Lithuanian)

Currently translated at 71.0% (2580 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/lt/

* Translated using Weblate (Portuguese (Brazil))

Currently translated at 79.9% (2903 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/pt_BR/

* Translated using Weblate (Finnish)

Currently translated at 85.6% (3110 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Finnish)

Currently translated at 90.1% (3274 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Italian)

Currently translated at 100.0% (3633 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Finnish)

Currently translated at 90.9% (3305 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Finnish)

Currently translated at 91.0% (3307 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Finnish)

Currently translated at 91.2% (3315 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Finnish)

Currently translated at 91.8% (3337 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Swedish)

Currently translated at 94.5% (3436 of 3633 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (German)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Finnish)

Currently translated at 92.1% (3351 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fi/

* Translated using Weblate (Hungarian)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Italian)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Indonesian)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/

* Translated using Weblate (Czech)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Slovak)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sk/

* Translated using Weblate (Persian)

Currently translated at 68.8% (2502 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fa/

* Translated using Weblate (German)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (French)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/

* Translated using Weblate (German)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3635 of 3635 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (German)

Currently translated at 99.9% (3641 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (German)

Currently translated at 100.0% (3642 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Italian)

Currently translated at 99.8% (3636 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Indonesian)

Currently translated at 100.0% (3642 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/

* Translated using Weblate (Italian)

Currently translated at 99.9% (3639 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Italian)

Currently translated at 100.0% (3642 of 3642 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (German)

Currently translated at 100.0% (3644 of 3644 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Dutch)

Currently translated at 96.9% (3534 of 3644 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Swedish)

Currently translated at 94.4% (3440 of 3644 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3644 of 3644 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Indonesian)

Currently translated at 100.0% (3644 of 3644 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/

* Translated using Weblate (German)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Chinese (Simplified))

Currently translated at 96.4% (3517 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/

* Translated using Weblate (Italian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/it/

* Translated using Weblate (Czech)

Currently translated at 99.7% (3637 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Slovak)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sk/

* Translated using Weblate (Estonian)

Currently translated at 99.7% (3638 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (French)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/fr/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (German)

Currently translated at 99.9% (3646 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Hungarian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/hu/

* Translated using Weblate (Swedish)

Currently translated at 94.7% (3454 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (Ukrainian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/uk/

* Translated using Weblate (Indonesian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/id/

* Translated using Weblate (German)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/de/

* Translated using Weblate (Dutch)

Currently translated at 96.9% (3534 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Swedish)

Currently translated at 94.8% (3461 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (Chinese (Simplified))

Currently translated at 96.7% (3527 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hans/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (Dutch)

Currently translated at 96.9% (3534 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Swedish)

Currently translated at 94.9% (3462 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/zh_Hant/

* Translated using Weblate (Dutch)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Dutch)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Czech)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/cs/

* Translated using Weblate (Dutch)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Swedish)

Currently translated at 95.0% (3467 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/sv/

* Translated using Weblate (Estonian)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/et/

* Translated using Weblate (Dutch)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

* Translated using Weblate (Dutch)

Currently translated at 100.0% (3647 of 3647 strings)

Translation: Element Web/matrix-react-sdk
Translate-URL: https://translate.element.io/projects/element-web/matrix-react-sdk/nl/

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>
Co-authored-by: Weblate <translate@riot.im>
Co-authored-by: Vri <element@vrifox.cc>
Co-authored-by: random <dictionary@tutamail.com>
Co-authored-by: Priit Jõerüüt <riot@joeruut.com>
Co-authored-by: Szimszon <github@oregpreshaz.eu>
Co-authored-by: Ihor Hordiichuk <igor_ck@outlook.com>
Co-authored-by: waclaw66 <waclaw66@seznam.cz>
Co-authored-by: Jozef Gaal <preklady@mayday.sk>
Co-authored-by: Glandos <bugs-github@antipoul.fr>
Co-authored-by: Jeff Huang <s8321414@gmail.com>
Co-authored-by: Nui Harime <harime.nui@yandex.ru>
Co-authored-by: Anonimas <weblate@govindas.net>
Co-authored-by: Linerly <linerly@protonmail.com>
Co-authored-by: andersonjeccel <anderson@idmotion.com.br>
Co-authored-by: Jiri Grönroos <jiri.gronroos@iki.fi>
Co-authored-by: LinAGKar <linus.kardell@gmail.com>
Co-authored-by: mmehdishafiee <mmhdishafiee@gmail.com>
Co-authored-by: Roel ter Maat <roel.termaat@nedap.com>
Co-authored-by: phardyle <bradney_ccea@aleeas.com>
Co-authored-by: aethralis <aethralis@yahoo.com>
Co-authored-by: Tengoman <info@tengocoin.org>
Co-authored-by: 星梦StarsDream <starsdream00@icloud.com>
Co-authored-by: Johan Smits <johan@smitsmail.net>
---
 src/i18n/strings/cs.json      |   18 +-
 src/i18n/strings/de_DE.json   |  170 ++--
 src/i18n/strings/et.json      |   22 +-
 src/i18n/strings/fa.json      |    8 +-
 src/i18n/strings/fi.json      |  486 +++++++++---
 src/i18n/strings/fr.json      |   67 +-
 src/i18n/strings/hu.json      |   22 +-
 src/i18n/strings/id.json      |   50 +-
 src/i18n/strings/it.json      |   64 +-
 src/i18n/strings/lt.json      |   48 +-
 src/i18n/strings/nl.json      | 1377 ++++++++++++++++++---------------
 src/i18n/strings/pt_BR.json   |   15 +-
 src/i18n/strings/ru.json      |    8 +-
 src/i18n/strings/sk.json      |   18 +-
 src/i18n/strings/sv.json      |   44 +-
 src/i18n/strings/uk.json      |   42 +-
 src/i18n/strings/zh_Hans.json |  137 ++--
 src/i18n/strings/zh_Hant.json |   50 +-
 18 files changed, 1702 insertions(+), 944 deletions(-)

diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json
index eed5bb72c99..43f07389997 100644
--- a/src/i18n/strings/cs.json
+++ b/src/i18n/strings/cs.json
@@ -3664,5 +3664,21 @@
     "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Toto zařízení můžete použít k přihlášení nového zařízení pomocí QR kódu. QR kód zobrazený na tomto zařízení musíte naskenovat pomocí odhlášeného zařízení.",
     "Sign in with QR code": "Přihlásit se pomocí QR kódu",
     "Browser": "Prohlížeč",
-    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Povolit zobrazení QR kódu ve správci relací pro přihlášení do jiného zařízení (vyžaduje kompatibilní domovský server)"
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Povolit zobrazení QR kódu ve správci relací pro přihlášení do jiného zařízení (vyžaduje kompatibilní domovský server)",
+    "play voice broadcast": "přehrát hlasové vysílání",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Opravdu se chcete odhlásit z %(count)s relací?",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Opravdu se chcete odhlásit z %(count)s relace?",
+    "Renaming sessions": "Přejmenování relací",
+    "Show formatting": "Zobrazit formátování",
+    "Show plain text": "Zobrazit prostý text",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Zvažte odhlášení ze starých relací (%(inactiveAgeDays)s dní nebo starších), které již nepoužíváte.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Odstranění neaktivních relací zvyšuje zabezpečení a výkon a usnadňuje identifikaci nové podezřelé relace.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Neaktivní relace jsou relace, které jste po určitou dobu nepoužili, ale nadále dostávají šifrovací klíče.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Měli byste si být jisti, že tyto relace rozpoznáte, protože by mohly představovat neoprávněné použití vašeho účtu.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Neověřené relace jsou relace, které se přihlásily pomocí vašich přihlašovacích údajů, ale nebyly křížově ověřeny.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "To znamená, že uchovávají šifrovací klíče vašich předchozích zpráv a potvrzují ostatním uživatelům, se kterými komunikujete, že tyto relace jste skutečně vy.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Ověřené relace se přihlásily pomocí vašich přihlašovacích údajů a poté byly ověřeny buď pomocí vaší zabezpečené přístupové fráze, nebo křížovým ověřením.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "To jim dává jistotu, že skutečně mluví s vámi, ale také to znamená, že vidí název relace, který zde zadáte.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Ostatní uživatelé v přímých zprávách a místnostech, ke kterým se připojíte, si mohou prohlédnout úplný seznam vašich relací.",
+    "Please be aware that session names are also visible to people you communicate with.": "Uvědomte si, že jména relací jsou viditelná i pro osoby, se kterými komunikujete."
 }
diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json
index 60586e4088d..88dae8e4f65 100644
--- a/src/i18n/strings/de_DE.json
+++ b/src/i18n/strings/de_DE.json
@@ -124,8 +124,8 @@
     "%(senderName)s made future room history visible to all room members.": "%(senderName)s hat den zukünftigen Verlauf für alle Raummitglieder sichtbar gemacht.",
     "%(senderName)s made future room history visible to anyone.": "%(senderName)s hat den zukünftigen Verlauf für alle sichtbar gemacht.",
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s hat den zukünftigen Verlauf für Unbekannte sichtbar gemacht (%(visibility)s).",
-    "Missing room_id in request": "Fehlende room_id in Anfrage",
-    "Missing user_id in request": "Fehlende user_id in Anfrage",
+    "Missing room_id in request": "user_id fehlt in der Anfrage",
+    "Missing user_id in request": "user_id fehlt in der Anfrage",
     "Power level must be positive integer.": "Berechtigungslevel muss eine positive ganze Zahl sein.",
     "Reason": "Grund",
     "Room %(roomId)s not visible": "Raum %(roomId)s ist nicht sichtbar",
@@ -208,7 +208,7 @@
     "Dismiss": "Ausblenden",
     "Token incorrect": "Token fehlerhaft",
     "Please enter the code it contains:": "Bitte gib den darin enthaltenen Code ein:",
-    "powered by Matrix": "betrieben mit Matrix",
+    "powered by Matrix": "Betrieben mit Matrix",
     "Error decrypting image": "Entschlüsselung des Bilds fehlgeschlagen",
     "Error decrypting video": "Videoentschlüsselung fehlgeschlagen",
     "Import room keys": "Raum-Schlüssel importieren",
@@ -380,7 +380,7 @@
     "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 auf dem Server von %(hs)s an, nicht auf matrix.org.",
+    "Please note you are logging into the %(hs)s server, not matrix.org.": "Bitte beachte, dass du dich gerade auf %(hs)s anmeldest, nicht matrix.org.",
     "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.",
     "Restricted": "Eingeschränkt",
@@ -400,7 +400,7 @@
     "Old cryptography data detected": "Alte Kryptografiedaten erkannt",
     "Warning": "Warnung",
     "Data from an older version of %(brand)s has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Es wurden Daten von einer älteren Version von %(brand)s entdeckt. Dies wird zu Fehlern in der Ende-zu-Ende-Verschlüsselung der älteren Version geführt haben. Ende-zu-Ende verschlüsselte Nachrichten, die ausgetauscht wruden, während die ältere Version genutzt wurde, werden in dieser Version nicht entschlüsselbar sein. Es kann auch zu Fehlern mit Nachrichten führen, die mit dieser Version versendet werden. Wenn du Probleme feststellst, melde dich ab und wieder an. Um die Historie zu behalten, ex- und reimportiere deine Schlüssel.",
-    "Send an encrypted reply…": "Verschlüsselte Antwort senden…",
+    "Send an encrypted reply…": "Verschlüsselte Antwort senden …",
     "Send an encrypted message…": "Verschlüsselte Nachricht senden …",
     "Replying": "Antwortet",
     "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(day)s. %(monthName)s %(fullYear)s",
@@ -485,7 +485,7 @@
     "Checking for an update...": "Nach Aktualisierungen suchen …",
     "Missing roomId.": "Fehlende Raum-ID.",
     "Popout widget": "Widget in eigenem Fenster öffnen",
-    "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Das Ereignis, auf das geantwortet wurde, konnte nicht geladen werden. Entweder es existiert nicht oder du hast keine Berechtigung, dieses anzusehen.",
+    "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Das Ereignis, auf das geantwortet wurde, kann nicht geladen werden, da es entweder nicht existiert oder du keine Berechtigung zum Betrachten hast.",
     "Send Logs": "Sende Protokoll",
     "Clear Storage and Sign Out": "Speicher leeren und abmelden",
     "Refresh": "Neu laden",
@@ -619,7 +619,7 @@
     "Unrecognised address": "Nicht erkannte Adresse",
     "Prompt before sending invites to potentially invalid matrix IDs": "Warnen, bevor du Einladungen zu ungültigen Matrix-IDs sendest",
     "The following users may not exist": "Eventuell existieren folgende Benutzer nicht",
-    "Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "Profile für die unteren Matrix-IDs wurden nicht gefunden - willst Du sie trotzdem einladen?",
+    "Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "Profile für die nachfolgenden Matrix-IDs wurden nicht gefunden – willst du sie dennoch einladen?",
     "Invite anyway and never warn me again": "Trotzdem einladen und mich nicht mehr warnen",
     "Invite anyway": "Trotzdem einladen",
     "Upgrades a room to a new version": "Aktualisiert den Raum auf eine neue Version",
@@ -810,7 +810,7 @@
     "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",
     "The user must be unbanned before they can be invited.": "Verbannte Nutzer können nicht eingeladen werden.",
-    "Show read receipts sent by other users": "Lesebestätigungen anzeigen",
+    "Show read receipts sent by other users": "Lesebestätigungen von anderen Benutzern anzeigen",
     "Scissors": "Schere",
     "<a>Upgrade</a> to your own domain": "Zu deiner eigenen Domain <a>aufwerten</a>",
     "Accept all %(invitedRooms)s invites": "Akzeptiere alle %(invitedRooms)s Einladungen",
@@ -859,7 +859,7 @@
     "No homeserver URL provided": "Keine Heim-Server-URL angegeben",
     "Unexpected error resolving homeserver configuration": "Ein unerwarteter Fehler ist beim Laden der Heim-Server-Konfiguration aufgetreten",
     "The user's homeserver does not support the version of the room.": "Die Raumversion wird vom Heim-Server des Benutzers nicht unterstützt.",
-    "Show hidden events in timeline": "Zeige versteckte Ereignisse im Verlauf",
+    "Show hidden events in timeline": "Versteckte Ereignisse im Verlauf anzeigen",
     "Reset": "Zurücksetzen",
     "Joining room …": "Betrete Raum …",
     "Rejecting invite …": "Einladung ablehnen…",
@@ -951,7 +951,7 @@
     "%(num)s hours from now": "in %(num)s Stunden",
     "about a day from now": "in etwa einem Tag",
     "%(num)s days from now": "in %(num)s Tagen",
-    "Show info about bridges in room settings": "Information über Brücken in Raumeinstellungen",
+    "Show info about bridges in room settings": "Informationen zu Brücken im Raum",
     "Enable message search in encrypted rooms": "Nachrichtensuche in verschlüsselten Räumen aktivieren",
     "Lock": "Schloss",
     "Later": "Später",
@@ -1046,7 +1046,7 @@
     "Topic (optional)": "Thema (optional)",
     "Hide advanced": "Erweiterte Einstellungen ausblenden",
     "Session name": "Sitzungsname",
-    "Use bots, bridges, widgets and sticker packs": "Benutze Bots, Bridges, Widgets und Sticker-Pakete",
+    "Use bots, bridges, widgets and sticker packs": "Nutze Bots, Brücken, Widgets und Sticker-Pakete",
     "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Aktualisiere diese Sitzung, um mit ihr andere Sitzungen verifizieren zu können, damit sie Zugang zu verschlüsselten Nachrichten erhalten und für andere als vertrauenswürdig markiert werden.",
     "Sign out and remove encryption keys?": "Abmelden und Verschlüsselungsschlüssel entfernen?",
     "Enter your password to sign in and regain access to your account.": "Gib dein Passwort ein, um dich anzumelden und wieder Zugang zu deinem Konto zu erhalten.",
@@ -1105,7 +1105,7 @@
     "Remove %(count)s messages|one": "Eine Nachricht entfernen",
     "Remove recent messages": "Kürzlich gesendete Nachrichten entfernen",
     "You're previewing %(roomName)s. Want to join it?": "Du erkundest den Raum %(roomName)s. Willst du ihn betreten?",
-    "%(senderName)s added the alternative addresses %(addresses)s for this room.|one": "%(senderName)s hat die alternative Adresse 2%(addresses)s für diesen Raum hinzugefügt.",
+    "%(senderName)s added the alternative addresses %(addresses)s for this room.|one": "%(senderName)s hat die alternative Adresse %(addresses)s für diesen Raum hinzugefügt.",
     "%(senderName)s changed the addresses for this room.": "%(senderName)s hat die Adresse für diesen Raum geändert.",
     "Displays information about a user": "Zeigt Informationen über Benutzer",
     "%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.": "%(senderDisplayName)s hat den Raumnamen von %(oldRoomName)s zu %(newRoomName)s geändert.",
@@ -1291,7 +1291,7 @@
     "Deactivating this user will log them out and prevent them from logging back in. Additionally, they will leave all the rooms they are in. This action cannot be reversed. Are you sure you want to deactivate this user?": "Beim Deaktivieren wirst du abgemeldet und ein erneutes Anmelden verhindert. Zusätzlich wirst du aus allen Räumen entfernt. Diese Aktion kann nicht rückgängig gemacht werden. Bist du sicher, dass du dieses Konto deaktivieren willst?",
     "Deactivate user": "Konto deaktivieren",
     "Failed to deactivate user": "Benutzer konnte nicht deaktiviert werden",
-    "Send a reply…": "Antwort senden…",
+    "Send a reply…": "Antwort senden …",
     "Send a message…": "Nachricht senden …",
     "Bold": "Fett",
     "Italics": "Kursiv",
@@ -1625,7 +1625,7 @@
     "Show %(count)s more|one": "%(count)s weitere anzeigen",
     "Room options": "Raumoptionen",
     "Activity": "Aktivität",
-    "A-Z": "A-Z",
+    "A-Z": "A–Z",
     "Looks good!": "Sieht gut aus!",
     "Light": "Hell",
     "Dark": "Dunkel",
@@ -1636,7 +1636,7 @@
     "Use a system font": "Systemschriftart verwenden",
     "System font name": "Systemschriftart",
     "Customise your appearance": "Verändere das Erscheinungsbild",
-    "Appearance Settings only affect this %(brand)s session.": "Einstellungen zum Erscheinungsbild wirken sich nur auf diese Sitzung aus.",
+    "Appearance Settings only affect this %(brand)s session.": "Die %(brand)s Einstellungen zum Erscheinungsbild wirken sich nur auf diese Sitzung aus.",
     "The authenticity of this encrypted message can't be guaranteed on this device.": "Die Echtheit dieser verschlüsselten Nachricht kann auf diesem Gerät nicht garantiert werden.",
     "You joined the call": "Du bist dem Anruf beigetreten",
     "%(senderName)s joined the call": "%(senderName)s ist dem Anruf beigetreten",
@@ -1799,10 +1799,10 @@
     "See when anyone posts a sticker to your active room": "Sehen, wenn jemand einen Sticker in deinen aktiven Raum sendet",
     "with an empty state key": "mit einem leeren Zustandsschlüssel",
     "with state key %(stateKey)s": "mit Zustandsschlüssel %(stateKey)s",
-    "Send <b>%(eventType)s</b> events as you in this room": "<b>%(eventType)s</b>-Events als du in diesem Raum senden",
-    "See <b>%(eventType)s</b> events posted to this room": "In diesem Raum gesendete <b>%(eventType)s</b>-Events anzeigen",
-    "Send <b>%(eventType)s</b> events as you in your active room": "<b>%(eventType)s</b>-Events als du in deinem aktiven Raum senden",
-    "See <b>%(eventType)s</b> events posted to your active room": "In deinem aktiven Raum gesendete <b>%(eventType)s</b>-Events anzeigen",
+    "Send <b>%(eventType)s</b> events as you in this room": "Sende <b>%(eventType)s</b>-Ereignisse mit deiner Identität in diesen Raum",
+    "See <b>%(eventType)s</b> events posted to this room": "In diesen Raum gesendete <b>%(eventType)s</b>-Ereignisse anzeigen",
+    "Send <b>%(eventType)s</b> events as you in your active room": "Sende <b>%(eventType)s</b>-Ereignisse als du in deinen aktiven Raum",
+    "See <b>%(eventType)s</b> events posted to your active room": "In deinen aktiven Raum gesendete <b>%(eventType)s</b>-Ereignisse anzeigen",
     "The <b>%(capability)s</b> capability": "Die <b>%(capability)s</b>-Fähigkeit",
     "Send messages as you in this room": "Nachrichten als du in diesem Raum senden",
     "Send messages as you in your active room": "Eine Nachricht als du in deinen aktiven Raum senden",
@@ -1839,7 +1839,7 @@
     "You ended the call": "Du hast den Anruf beendet",
     "%(senderName)s ended the call": "%(senderName)s hat den Anruf beendet",
     "Use Command + Enter to send a message": "Benutze Betriebssystemtaste + Eingabe um eine Nachricht zu senden",
-    "Use Ctrl + Enter to send a message": "Nachrichten mit Strg + Enter senden",
+    "Use Ctrl + Enter to send a message": "Nutze Strg + Enter, um Nachrichten zu senden",
     "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 beide nehmt an dieser Konversation teil, es sei denn, ihr ladet jemanden ein.",
@@ -1858,7 +1858,7 @@
     "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Bitte wirf einen Blick auf <existingIssuesLink>existierende Programmfehler auf Github</existingIssuesLink>. Keinen passenden gefunden? <newIssueLink>Erstelle einen neuen</newIssueLink>.",
     "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIPP: Wenn du einen Programmfehler meldest, füge bitte <debugLogsLink>Debug-Protokolle</debugLogsLink> hinzu, um uns beim Finden des Problems zu helfen.",
     "Invite by email": "Via Email einladen",
-    "Start a conversation with someone using their name, email address or username (like <userId/>).": "Beginne eine Konversation mit jemanden unter Benutzung des Namens, der Email-Adresse oder der Matrix-ID (wie <userId/>).",
+    "Start a conversation with someone using their name, email address or username (like <userId/>).": "Beginne eine Konversation mittels Name, E-Mail-Adresse oder Matrix-ID (wie <userId/>).",
     "Invite someone using their name, email address, username (like <userId/>) or <a>share this room</a>.": "Lade jemanden mittels Name, E-Mail-Adresse oder Benutzername (wie <userId/>) ein, oder <a>teile diesen Raum</a>.",
     "Approve widget permissions": "Rechte für das Widget genehmigen",
     "This widget would like to:": "Dieses Widget würde gerne:",
@@ -2334,8 +2334,8 @@
     "Creating rooms...": "Erstelle Räume …",
     "Your server does not support showing space hierarchies.": "Dein Home-Server unterstützt hierarchische Spaces nicht.",
     "You may want to try a different search or check for typos.": "Versuche es mit etwas anderem oder prüfe auf Tippfehler.",
-    "Mark as not suggested": "Als nicht empfohlen markieren",
-    "Mark as suggested": "Als empfohlen markieren",
+    "Mark as not suggested": "Als nicht vorgeschlagen markieren",
+    "Mark as suggested": "Als vorgeschlagen markieren",
     "Removing...": "Entferne …",
     "You don't have permission": "Du hast dazu keine Berechtigung",
     "This space is not public. You will not be able to rejoin without an invite.": "Du wirst diesen privaten Space nur mit einer Einladung wieder betreten können.",
@@ -2344,18 +2344,18 @@
     "Failed to save space settings.": "Spaceeinstellungen konnten nicht gespeichert werden.",
     "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your account to fetch verified email addresses. This data is not stored.": "Wenn du fortfährst, geben wir %(hostSignupBrand)s für den Erstellungsprozess kurzzeitig Zugriff auf dein Konto und deine E-Mail-Adresse. Diese Daten werden nicht gespeichert.",
     "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.": "Das Entfernen von Rechten kann nicht rückgängig gemacht werden. Falls sie dir niemand anderer zurückgeben kann, kannst du sie nie wieder erhalten.",
-    "You do not have permissions to add rooms to this space": "Keine Berechtigung zum Hinzufügen neuer Räume zum Space",
-    "You do not have permissions to create new rooms in this space": "Keine Berechtigung zum Erstellen neuer Räume in diesem Space",
+    "You do not have permissions to add rooms to this space": "Du hast keine Berechtigung, Räume zu diesem Space hinzuzufügen",
+    "You do not have permissions to create new rooms in this space": "Du hast keine Berechtigung, neue Räume in diesem Space zu erstellen",
     "Edit devices": "Sitzungen anzeigen",
     "We couldn't create your DM.": "Wir konnten deine Direktnachricht nicht erstellen.",
     "Adding...": "Hinzufügen …",
     "Add existing rooms": "Bestehende Räume hinzufügen",
-    "Space selection": "Matrix-Space-Auswahl",
+    "Space selection": "Space-Auswahl",
     "%(count)s people you know have already joined|one": "%(count)s Person, die du kennst, ist schon beigetreten",
     "%(count)s people you know have already joined|other": "%(count)s Leute, die du kennst, sind bereits beigetreten",
     "Warn before quitting": "Vor Beenden warnen",
     "Spell check dictionaries": "Wörterbücher für Rechtschreibprüfung",
-    "Space options": "Matrix-Space-Optionen",
+    "Space options": "Space-Optionen",
     "Manage & explore rooms": "Räume erkunden und verwalten",
     "unknown person": "unbekannte Person",
     "Check your devices": "Überprüfe deine Sitzungen",
@@ -2363,7 +2363,7 @@
     "You have unverified logins": "Du hast nicht-bestätigte Anmeldungen",
     "Review to ensure your account is safe": "Überprüfen, um sicher zu sein, dass dein Konto sicher ist",
     "Support": "Unterstützung",
-    "This room is suggested as a good one to join": "Dieser Raum wird empfohlen",
+    "This room is suggested as a good one to join": "Dieser Raum wird vorgeschlagen",
     "Verification requested": "Verifizierung angefragt",
     "Avatar": "Avatar",
     "Invited people will be able to read old messages.": "Eingeladene Leute werden ältere Nachrichten lesen können.",
@@ -2393,7 +2393,7 @@
     "Zoom in": "Vergrößern",
     "Zoom out": "Verkleinern",
     "%(seconds)ss left": "%(seconds)s vergangen",
-    "Change server ACLs": "Server ACLs bearbeiten",
+    "Change server ACLs": "Server-ACLs 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",
@@ -2415,7 +2415,7 @@
     "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.",
     "You have no ignored users.": "Du ignorierst keine Benutzer.",
     "Error processing voice message": "Fehler beim Verarbeiten der Sprachnachricht",
-    "Select a room below first": "Wähle zuerst einen Raum aus",
+    "Select a room below first": "Wähle vorher einen Raum aus",
     "Join the beta": "Beta beitreten",
     "Leave the beta": "Beta verlassen",
     "Beta": "Beta",
@@ -2452,7 +2452,7 @@
     "The user you called is busy.": "Die angerufene Person ist momentan beschäftigt.",
     "User Busy": "Person beschäftigt",
     "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.",
+    "Some suggestions may be hidden for privacy.": "Einige Vorschläge könnten aus Gründen der Privatsphäre ausgeblendet sein.",
     "Or send invite link": "Oder versende einen Einladungslink",
     "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Sofern du die Berechtigung hast, öffne das Menü einer Nachricht und wähle <b>Anheften</b>, ⁣ um sie hier aufzubewahren.",
     "Search for rooms or people": "Räume oder Leute suchen",
@@ -2484,9 +2484,9 @@
     "This user is displaying toxic behaviour, for instance by insulting other users or sharing  adult-only content in a family-friendly room  or otherwise violating the rules of this room.\nThis will be reported to the room moderators.": "Dieser Benutzer zeigt toxisches Verhalten. Darunter fällt unter anderem Beleidigen anderer Personen, Teilen von NSFW-Inhalten in familienfreundlichen Räumen oder das anderwertige Missachten von Regeln des Raumes.\nDies wird an die Raum-Mods gemeldet.",
     "Please provide an address": "Bitte gib eine Adresse an",
     "%(oneUser)schanged the server ACLs %(count)s times|one": "%(oneUser)s hat die Server-ACLs geändert",
-    "%(oneUser)schanged the server ACLs %(count)s times|other": "%(oneUser)s hat die Server-ACLs %(count)s-mal geändert",
+    "%(oneUser)schanged the server ACLs %(count)s times|other": "%(oneUser)s hat die Server-ACLs %(count)s Mal geändert",
     "%(severalUsers)schanged the server ACLs %(count)s times|one": "%(severalUsers)s haben die Server-ACLs geändert",
-    "%(severalUsers)schanged the server ACLs %(count)s times|other": "%(severalUsers)s haben die Server-ACLs %(count)s-mal geändert",
+    "%(severalUsers)schanged the server ACLs %(count)s times|other": "%(severalUsers)s haben die Server-ACLs %(count)s Mal geändert",
     "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Füge Adressen für diesen Space hinzu, damit andere Leute ihn über deinen Heim-Server (%(localDomain)s) finden können",
     "To publish an address, it needs to be set as a local address first.": "Damit du die Adresse veröffentlichen kannst, musst du sie zuerst als lokale Adresse hinzufügen.",
     "Published addresses can be used by anyone on any server to join your room.": "Veröffentlichte Adressen erlauben jedem, den Raum zu betreten.",
@@ -2570,7 +2570,7 @@
     "An error occurred whilst saving your notification preferences.": "Beim Speichern der Benachrichtigungseinstellungen ist ein Fehler aufgetreten.",
     "Error saving notification preferences": "Fehler beim Speichern der Benachrichtigungseinstellungen",
     "Messages containing keywords": "Nachrichten mit Schlüsselwörtern",
-    "Use Ctrl + F to search timeline": "Strg + F für die Nachrichtensuche verwenden",
+    "Use Ctrl + F to search timeline": "Nutze Strg + F, um den Verlauf zu durchsuchen",
     "The call is in an unknown state!": "Dieser Anruf ist in einem unbekannten Zustand!",
     "Call back": "Zurückrufen",
     "Connection failed": "Verbindung fehlgeschlagen",
@@ -2734,7 +2734,7 @@
     "Exporting your data": "Deine Daten werden exportiert",
     "Stop": "Beenden",
     "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Willst du das Exportieren deiner Daten wirklich abbrechen? Falls ja, musst du komplett von neu beginnen.",
-    "Your export was successful. Find it in your Downloads folder.": "Export erfolgreich. Du kannst in bei deinen Downloads finden.",
+    "Your export was successful. Find it in your Downloads folder.": "Export erfolgreich. Du kannst ihn in deinem Download-Verzeichnis finden.",
     "The export was cancelled successfully": "Exportieren abgebrochen",
     "Export Successful": "Exportieren erfolgreich",
     "MB": "MB",
@@ -2750,7 +2750,7 @@
     "Export chat": "Unterhaltung exportieren",
     "Threads": "Threads",
     "Insert link": "Link einfügen",
-    "Create poll": "Neue Abstimmung",
+    "Create poll": "Abstimmung erstellen",
     "Updating spaces... (%(progress)s out of %(count)s)|one": "Space aktualisieren …",
     "Updating spaces... (%(progress)s out of %(count)s)|other": "Spaces aktualisieren … (%(progress)s von %(count)s)",
     "Sending invites... (%(progress)s out of %(count)s)|one": "Einladung senden …",
@@ -2795,7 +2795,7 @@
     "If you can't see who you're looking for, send them your invite link below.": "Wenn du die gesuchte Person nicht findest, sende ihr den Einladungslink zu.",
     "Select from the options below to export chats from your timeline": "Wähle die gewünschten Optionen für den Export des Verlaufs",
     "Add a space to a space you manage.": "Einen Space zu einem Space den du verwaltest hinzufügen.",
-    "You can't disable this later. Bridges & most bots won't work yet.": "Dies kann später nicht deaktiviert werden. Matrix-Bridges und Bots werden noch nicht funktionieren.",
+    "You can't disable this later. Bridges & most bots won't work yet.": "Du kannst dies später nicht deaktivieren. Brücken und die meisten Bots werden noch nicht funktionieren.",
     "Add option": "Antwortmöglichkeit hinzufügen",
     "Write an option": "Antwortmöglichkeit verfassen",
     "Option %(number)s": "Antwortmöglichkeit %(number)s",
@@ -2803,14 +2803,14 @@
     "Write something...": "Schreib etwas …",
     "Question or topic": "Frage oder Thema",
     "What is your poll question or topic?": "Was ist die Frage oder das Thema deiner Abstimmung?",
-    "Create Poll": "Neue Abstimmung",
+    "Create Poll": "Abstimmung erstellen",
     "The above, but in any room you are joined or invited to as well": "Wie oben, nur zusätzlich in allen Räumen denen du beigetreten oder in die du eingeladen wurdest",
     "The above, but in <Room /> as well": "Wie oben, nur zusätzlich in <Room />",
     "Ban from %(roomName)s": "Aus %(roomName)s verbannen",
     "Yours, or the other users' session": "Die Sitzung von dir oder dem anderen Nutzer",
     "Yours, or the other users' internet connection": "Die Internetverbindung von dir oder dem anderen Nutzer",
     "The homeserver the user you're verifying is connected to": "Der Heim-Server der Person, die du verifizierst",
-    "You do not have permission to start polls in this room.": "Du hast nicht die Berechtigung, Abstimmungen in diesem Raum zu starten.",
+    "You do not have permission to start polls in this room.": "Du bist nicht berechtigt, Abstimmungen in diesem Raum zu beginnen.",
     "This room isn't bridging messages to any platforms. <a>Learn more.</a>": "Dieser Raum verbindet Nachrichten nicht mit anderen Plattformen. <a>Mehr erfahren.</a>",
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Verwalte deine angemeldeten Geräte. Der Name von einem Gerät ist sichtbar für Personen mit denen du kommunizierst.",
     "Where you're signed in": "Da bist du angemeldet",
@@ -2844,10 +2844,10 @@
     "You're all caught up": "Du bist auf dem neuesten Stand",
     "Own your conversations.": "Besitze deine Unterhaltungen.",
     "Someone already has that username. Try another or if it is you, sign in below.": "Jemand anderes nutzt diesen Benutzernamen schon. Probier einen anderen oder wenn du es bist, melde dich unten an.",
-    "Matrix.org is the biggest public homeserver in the world, so it's a good place for many.": "Matrix.org ist der größte öffentliche Heimserver der Welt, also für viele ein guter Platz.",
+    "Matrix.org is the biggest public homeserver in the world, so it's a good place for many.": "Matrix.org ist der größte öffentliche Heim-Server der Welt, also für viele ein guter Ort.",
     "Could not connect media": "Konnte Medien nicht verbinden",
     "In encrypted rooms, verify all users to ensure it's secure.": "Verifiziere alle Benutzer in verschlüsselten Räumen, um die Sicherheit zu garantieren.",
-    "They'll still be able to access whatever you're not an admin of.": "Sie werden weiter auf alles, indem du kein Admin bist zugreifen können.",
+    "They'll still be able to access whatever you're not an admin of.": "Die Person wird weiterhin Zugriff auf Bereiche haben, in denen du nicht administrierst.",
     "Surround selected text when typing special characters": "Sonderzeichen automatisch vor und hinter Textauswahl setzen",
     "Light high contrast": "Hell kontrastreich",
     "Can't see what you're looking for?": "Nicht das Gewünschte gefunden?",
@@ -2884,7 +2884,7 @@
     "%(spaceName)s menu": "%(spaceName)s-Menü",
     "Join public room": "Öffentlichen Raum betreten",
     "Add people": "Personen hinzufügen",
-    "You do not have permissions to invite people to this space": "Du hast nicht die Berechtigung, Leute in diesen Space einzuladen",
+    "You do not have permissions to invite people to this space": "Du hast keine Berechtigung, Personen in diesen Space einzuladen",
     "Invite to space": "In Space einladen",
     "Start new chat": "Neue Direktnachricht",
     "Recently viewed": "Kürzlich besucht",
@@ -2926,15 +2926,15 @@
     "Processing...": "Verarbeiten …",
     "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Willst du die Abstimmung wirklich beenden? Die finalen Ergebnisse werden angezeigt und können nicht mehr geändert werden.",
     "End Poll": "Abstimmung beenden",
-    "Sorry, the poll did not end. Please try again.": "Tut uns leid, die Abstimmung wurde nicht beendet. Versuche es bitte noch einmal.",
-    "Failed to end poll": "Fehler beim Beenden der Abstimmung",
+    "Sorry, the poll did not end. Please try again.": "Die Abstimmung konnte nicht beendet werden. Bitte versuche es erneut.",
+    "Failed to end poll": "Beenden der Abstimmung fehlgeschlagen",
     "The poll has ended. Top answer: %(topAnswer)s": "Abstimmung beendet. Beliebteste Antwort: %(topAnswer)s",
     "The poll has ended. No votes were cast.": "Abstimmung beendet. Es wurden keine Stimmen abgegeben.",
     "You can turn this off anytime in settings": "Du kannst dies jederzeit in den Einstellungen deaktivieren",
     "We <Bold>don't</Bold> share information with third parties": "Wir teilen <Bold>keine</Bold> Informationen mit Dritten",
     "We <Bold>don't</Bold> record or profile any account data": "Wir erfassen und analysieren <Bold>keine</Bold> Kontodaten",
     "Sorry, the poll you tried to create was not posted.": "Leider wurde die Abstimmung nicht gesendet.",
-    "Failed to post poll": "Fehler beim Senden der Abstimmung",
+    "Failed to post poll": "Absenden der Abstimmung fehlgeschlagen",
     "Share location": "Standort teilen",
     "Based on %(count)s votes|one": "%(count)s Stimme abgegeben",
     "Based on %(count)s votes|other": "%(count)s Stimmen abgegeben",
@@ -2950,23 +2950,23 @@
     "Ban them from everything I'm able to": "Überall wo ich die Rechte dazu habe bannen",
     "Unban them from everything I'm able to": "Überall wo ich die Rechte dazu habe, entbannen",
     "Copy room link": "Raumlink kopieren",
-    "Manage pinned events": "Angeheftete Events verwalten",
+    "Manage pinned events": "Angeheftete Ereignisse verwalten",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Teile anonyme Nutzungsdaten mit uns, damit wir Probleme in Element finden können. Nichts Persönliches. Keine Drittparteien.",
     "Creating output...": "Ausgabe wird erstellt …",
-    "Fetching events...": "Ereignisse werden abgerufen …",
+    "Fetching events...": "Rufe Ereignisse ab …",
     "Starting export process...": "Beginne Exportvorgang …",
-    "Exported %(count)s events in %(seconds)s seconds|one": "Es wurde %(count)s Event in %(seconds)s Sekunden exportiert",
-    "Exported %(count)s events in %(seconds)s seconds|other": "Es wurden %(count)s Events in %(seconds)s Sekunden exportiert",
+    "Exported %(count)s events in %(seconds)s seconds|one": "%(count)s Ereignis in %(seconds)s Sekunden exportiert",
+    "Exported %(count)s events in %(seconds)s seconds|other": "%(count)s Ereignisse in %(seconds)s Sekunden exportiert",
     "Export successful!": "Die Daten wurden erfolgreich exportiert!",
     "Creating HTML...": "Erstelle HTML …",
-    "Fetched %(count)s events in %(seconds)ss|one": "%(count)s Event in %(seconds)ss abgerufen",
-    "Fetched %(count)s events in %(seconds)ss|other": "%(count)s Events in %(seconds)ss abgerufen",
+    "Fetched %(count)s events in %(seconds)ss|one": "%(count)s Ereignis in %(seconds)s s abgerufen",
+    "Fetched %(count)s events in %(seconds)ss|other": "%(count)s Ereignisse in %(seconds)s s abgerufen",
     "Starting export...": "Starte Export …",
     "Processing event %(number)s out of %(total)s": "Verarbeite Event %(number)s von %(total)s",
-    "Fetched %(count)s events so far|one": "Bis jetzt wurde %(count)s Event abgerufen",
-    "Fetched %(count)s events so far|other": "Bis jetzt wurden %(count)s Events abgerufen",
-    "Fetched %(count)s events out of %(total)s|one": "%(count)s von %(total)s Events abgerufen",
-    "Fetched %(count)s events out of %(total)s|other": "%(count)s von %(total)s Events abgerufen",
+    "Fetched %(count)s events so far|one": "Bisher wurde %(count)s Ereignis abgerufen",
+    "Fetched %(count)s events so far|other": "Bisher wurden %(count)s Ereignisse abgerufen",
+    "Fetched %(count)s events out of %(total)s|one": "%(count)s von %(total)s Ereignis abgerufen",
+    "Fetched %(count)s events out of %(total)s|other": "%(count)s von %(total)s Ereignisse abgerufen",
     "Generating a ZIP": "ZIP-Archiv wird generiert",
     "We were unable to understand the given date (%(inputDate)s). Try using the format YYYY-MM-DD.": "Ups! Leider können wir das Datum \"%(inputDate)s\" nicht verstehen. Bitte gib es im Format JJJJ-MM-TT (Jahr-Monat-Tag) ein.",
     "Messaging": "Kommunikation",
@@ -2987,7 +2987,7 @@
     "Automatically send debug logs on decryption errors": "Sende bei Entschlüsselungsfehlern automatisch Protokolle zur Fehlerkorrektur",
     "Show join/leave messages (invites/removes/bans unaffected)": "Bei-/Austrittsnachrichten (Einladung/Entfernen/Bann nicht betroffen)",
     "Use new room breadcrumbs": "Kürzlich besuchte Räume anzeigen („Breadcrumbs“)",
-    "Show extensible event representation of events": "Erweiterbare Ereignisdarstellung von Ereignissen anzeigen",
+    "Show extensible event representation of events": "Erweiterbare Darstellung von Ereignissen anzeigen",
     "Back to thread": "Zurück zum Thread",
     "Back to chat": "Zurück zur Unterhaltung",
     "Remove, ban, or invite people to your active room, and make you leave": "Entferne, verbanne oder lade andere in deinen aktiven Raum ein und verlasse den Raum selbst",
@@ -3003,7 +3003,7 @@
     "Failed to get room topic: Unable to find room (%(roomId)s": "Thema des Raums konnte nicht ermittelt werden: Raum kann nicht gefunden werden (%(roomId)s",
     "Command error: Unable to find rendering type (%(renderingType)s)": "Befehlsfehler: Rendering-Typ kann nicht gefunden werden (%(renderingType)s)",
     "%(senderName)s has shared their location": "%(senderName)s hat seine Position geteilt",
-    "%(senderName)s has started a poll - %(pollQuestion)s": "%(senderName)s hat eine Abstimmung gestartet - %(pollQuestion)s",
+    "%(senderName)s has started a poll - %(pollQuestion)s": "%(senderName)s hat eine Abstimmung begonnen – %(pollQuestion)s",
     "%(senderName)s has ended a poll": "%(senderName)s hat eine Abstimmung beendet",
     "Backspace": "Löschtaste",
     "Unknown error fetching location. Please try again later.": "Beim Abruf deines Standortes ist ein unbekannter Fehler aufgetreten. Bitte versuche es später erneut.",
@@ -3022,8 +3022,8 @@
     "Keyboard": "Tastatur",
     "Timed out trying to fetch your location. Please try again later.": "Zeitüberschreitung beim Abrufen deines Standortes. Bitte versuche es später erneut.",
     "The device 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.": "Das Gerät unterstützt weder Verifizieren mittels QR-Code noch Emoji-Verifizierung. %(brand)s benötigt dies jedoch. Bitte verwende eine andere Anwendung.",
-    "Remove them from specific things I'm able to": "Nutzer aus ausgewählten Räumen und Spaces entfernen",
-    "Remove them from everything I'm able to": "Aus allem, wo ich Rechte dazu habe, entfernen",
+    "Remove them from specific things I'm able to": "Person aus gewählten, mir möglichen, Bereichen entfernen",
+    "Remove them from everything I'm able to": "Person aus allen, mir möglichen Bereichen entfernen",
     "To proceed, please accept the verification request on your other device.": "Akzeptiere die Verifizierungsanfrage am anderen Gerät, um fortzufahren.",
     "Open this settings tab": "Den Einstellungen-Tab öffnen",
     "Your new device is now verified. Other users will see it as trusted.": "Dein neues Gerät ist jetzt verifiziert. Anderen wird es als vertrauenswürdig angezeigt werden.",
@@ -3081,7 +3081,7 @@
     "Jump to last message": "Zur letzten Nachricht springen",
     "Jump to first message": "Zur ersten Nachricht springen",
     "Force complete": "Vervollständigung erzwingen",
-    "Toggle hidden event visibility": "Sichtbarkeit versteckter Events umschalten",
+    "Toggle hidden event visibility": "Sichtbarkeit versteckter Ereignisse umschalten",
     "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!": "Falls du weißt, was du machst: Element ist Open Source! Checke unser GitHub aus (https://github.com/vector-im/element-web/) und hilf mit!",
     "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!": "Wenn dir jemand gesagt hat, dass du hier etwas einfügen sollst, ist die Wahrscheinlichkeit sehr groß, dass du von der Person betrogen wirst!",
     "Wait!": "Warte!",
@@ -3094,10 +3094,10 @@
     "Unable to find event at that date. (%(code)s)": "An diesem Datum gab es kein Event. (%(code)s)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Zu Datum springen ( /jumptodate bzw. Zu Datum springen im Header)",
     "Location": "Standort",
-    "Poll": "Umfrage",
+    "Poll": "Abstimmung",
     "Voice Message": "Sprachnachricht",
     "Hide stickers": "Sticker ausblenden",
-    "You do not have permissions to add spaces to this space": "Du hast keine Berechtigung, um Spaces zu diesem Space hinzuzufügen",
+    "You do not have permissions to add spaces to this space": "Du hast keine Berechtigung, Spaces zu diesem Space hinzuzufügen",
     "Results not as expected? Please <a>give feedback</a>.": "Sind die Ergebnisse nicht wie erwartet? Bitte <a>gib eine Rückmeldung</a>.",
     "Feedback sent! Thanks, we appreciate it!": "Rückmeldung gesendet! Danke, wir wissen es zu schätzen!",
     "How can I leave the beta?": "Wie kann ich die Beta verlassen?",
@@ -3119,11 +3119,11 @@
     "<%(count)s spaces>|zero": "<Leere Zeichenkette>",
     "<%(count)s spaces>|one": "<Leerzeichen>",
     "<%(count)s spaces>|other": "<%(count)s Leerzeichen>",
-    "Results are only revealed when you end the poll": "Die Ergebnisse sind sichtbar, sobald die Abstimmung beendet wird",
-    "Voters see results as soon as they have voted": "Alle die ihre Stimme abgegeben haben, sehen die Ergebnisse",
+    "Results are only revealed when you end the poll": "Die Ergebnisse werden erst sichtbar, sobald du die Umfrage beendest",
+    "Voters see results as soon as they have voted": "Abstimmende können die Ergebnisse nach Stimmabgabe sehen",
     "Open poll": "Laufende Abstimmung",
     "Closed poll": "Abgeschlossene Abstimmung",
-    "Poll type": "Art der Abstimmung",
+    "Poll type": "Abstimmungsart",
     "Edit poll": "Abstimmung bearbeiten",
     "%(oneUser)ssent %(count)s hidden messages|one": "%(oneUser)s hat eine versteckte Nachricht gesendet",
     "%(oneUser)ssent %(count)s hidden messages|other": "%(oneUser)s hat %(count)s versteckte Nachrichten gesendet",
@@ -3133,14 +3133,14 @@
     "%(oneUser)sremoved a message %(count)s times|other": "%(oneUser)s hat %(count)s Nachrichten gelöscht",
     "%(severalUsers)sremoved a message %(count)s times|one": "%(severalUsers)s hat eine Nachricht gelöscht",
     "%(severalUsers)sremoved a message %(count)s times|other": "%(severalUsers)s haben %(count)s Nachrichten gelöscht",
-    "Results will be visible when the poll is ended": "Ergebnisse sind erst nach Beenden der Abstimmung sichtbar",
-    "Sorry, you can't edit a poll after votes have been cast.": "Du kannst die Abstimmung nicht bearbeiten, wenn schon Stimmen abgegeben wurden.",
-    "Can't edit poll": "Die Abstimmung kann nicht bearbeitet werden",
+    "Results will be visible when the poll is ended": "Ergebnisse werden nach Abschluss der Abstimmung sichtbar sein",
+    "Sorry, you can't edit a poll after votes have been cast.": "Du kannst Abstimmungen nicht bearbeiten, sobald Stimmen abgegeben wurden.",
+    "Can't edit poll": "Abstimmung nicht bearbeitbar",
     "No virtual room for this room": "Kein virtueller Raum für diesen Raum",
     "Switches to this room's virtual room, if it has one": "Zum virtuellen Raum dieses Raums wechseln, sofern vorhanden",
-    "They won't be able to access whatever you're not an admin of.": "Der Zugriff auf Bereiche, in denen du kein Admin bist, wird weiterhin bestehen bleiben.",
+    "They won't be able to access whatever you're not an admin of.": "Die Person wird keinen Zugriff auf Bereiche haben, in denen du nicht administrierst.",
     "Remove messages sent by me": "Vom mir gesendete Nachrichten löschen",
-    "Show polls button": "Abstimmungsknopf anzeigen",
+    "Show polls button": "Zeige Pol button",
     "This homeserver is not configured to display maps.": "Dein Heim-Server unterstützt das Anzeigen von Karten nicht.",
     "Click to drop a pin": "Klicke, um den Standort zu setzen",
     "Click to move the pin": "Klicke, um den Standort zu bewegen",
@@ -3197,7 +3197,7 @@
     "How can I start a thread?": "Wie kann ich einen Thread starten?",
     "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads helfen dir dabei, dass deine Unterhaltungen beim Thema bleiben. <a>Mehr Infos</a>.",
     "Keep discussions organised with threads.": "Organisiere Diskussionen mit Threads.",
-    "Failed to join": "Fehler beim Betreten",
+    "Failed to join": "Betreten fehlgeschlagen",
     "The person who invited you has already left, or their server is offline.": "Die dich einladende Person hat den Raum verlassen oder ihr Heim-Server ist außer Betrieb.",
     "The person who invited you has already left.": "Die Person, die dich eingeladen hat, hat den Raum wieder verlassen.",
     "Sorry, your homeserver is too old to participate here.": "Verzeihung, dein Heim-Server ist hierfür zu alt.",
@@ -3312,8 +3312,8 @@
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "Du kannst in den benutzerdefinierten Server-Optionen eine andere Heim-Server-URL angeben, um dich bei anderen Matrix-Servern anzumelden. Dadurch kannst du %(brand)s mit einem auf einem anderen Heim-Server liegenden Matrix-Konto nutzen.",
     "%(brand)s was denied permission to fetch your location. Please allow location access in your browser settings.": "%(brand)s wurde der Zugriff auf deinen Standort verweigert. Bitte erlaube den Zugriff in den Einstellungen deines Browsers.",
     "Enable live location sharing": "Aktiviere Echtzeit-Standortfreigabe",
-    "To view %(roomName)s, you need an invite": "Du musst eingeladen sein, um %(roomName)s zu sehen",
-    "%(errcode)s was returned while trying to access the room or space. If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.": "Beim Betreten des Raums oder Spaces ist ein Fehler aufgetreten %(errcode)s. Wenn du denkst dass diese Meldung nicht korrekt ist <issueLink>sende bitte einen Fehlerbericht</issueLink>.",
+    "To view %(roomName)s, you need an invite": "Um %(roomName)s zu betrachten, benötigst du eine Einladung",
+    "%(errcode)s was returned while trying to access the room or space. If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.": "%(errcode)s wurde während des Betretens zurückgegeben. Wenn du denkst, dass diese Meldung nicht korrekt ist, <issueLink>reiche bitte einen Fehlerbericht ein</issueLink>.",
     "Private room": "Privater Raum",
     "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Fehlerberichte enthalten Nutzungsdaten wie Nutzernamen von dir und anderen Personen, Raum-IDs deiner beigetretenen Räume sowie mit welchen Elementen der Oberfläche du kürzlich interagiert hast. Sie enthalten keine Nachrichten.",
     "Partial Support for Threads": "Teilweise Unterstützung von Threads",
@@ -3336,8 +3336,8 @@
     "Can I use text chat alongside the video call?": "Kann ich während Videoanrufen auch Textnachrichten verschicken?",
     "How can I create a video room?": "Wie kann ich einen Videoraum erstellen?",
     "Enable hardware acceleration (restart %(appName)s to take effect)": "Hardwarebeschleunigung aktivieren (Neustart von %(appName)s erforderlich)",
-    "%(count)s people joined|one": "%(count)s Person hat teilgenommen",
-    "%(count)s people joined|other": "%(count)s Personen haben teilgenommen",
+    "%(count)s people joined|one": "%(count)s Person beigetreten",
+    "%(count)s people joined|other": "%(count)s Personen beigetreten",
     "Enable hardware acceleration": "Aktiviere die Hardwarebeschleunigung",
     "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.": "Bitte beachte: Dies ist eine experimentelle Funktion, die eine temporäre Implementierung nutzt. Das bedeutet, dass du deinen Standortverlauf nicht löschen kannst und erfahrene Nutzer ihn sehen können, selbst wenn du deinen Echtzeit-Standort nicht mehr mit diesem Raum teilst.",
     "Video room": "Videoraum",
@@ -3360,7 +3360,7 @@
     "Check if you want to hide all current and future messages from this user.": "Prüfe, ob du alle aktuellen und zukünftigen Nachrichten dieses Nutzers verstecken willst.",
     "Show spaces": "Spaces zeigen",
     "You cannot search for rooms that are neither a room nor a space": "Du kannst nicht nach Räumen suchen, die kein Raum oder Space sind",
-    "Some results may be hidden for privacy": "Einige Ergebnisse könnten aus Privatsphäregründen ausgeblendet sein",
+    "Some results may be hidden for privacy": "Einige Vorschläge könnten aus Gründen der Privatsphäre ausgeblendet sein",
     "Copy invite link": "Einladungslink kopieren",
     "Some results may be hidden": "Einige Ergebnisse können ausgeblendet sein",
     "Close sidebar": "Seitenleiste schließen",
@@ -3659,5 +3659,21 @@
     "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Du hast nicht die nötigen Berechtigungen, um eine Sprachübertragung in diesem Raum zu starten. Kontaktiere einen Raumadministrator, um deine Berechtigungen anzupassen.",
     "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Du zeichnest bereits eine Sprachübertragung auf. Bitte beende die laufende Übertragung, um eine neue zu beginnen.",
     "Can't start a new voice broadcast": "Sprachübertragung kann nicht gestartet werden",
-    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Du kannst dieses Gerät verwenden, um ein neues Gerät per QR-Code anzumelden. Dazu musst du den auf diesem Gerät angezeigten QR-Code mit deinem nicht angemeldeten Gerät einlesen."
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Du kannst dieses Gerät verwenden, um ein neues Gerät per QR-Code anzumelden. Dazu musst du den auf diesem Gerät angezeigten QR-Code mit deinem nicht angemeldeten Gerät einlesen.",
+    "play voice broadcast": "Sprachübertragung wiedergeben",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Bist du sicher, dass du dich von %(count)s Sitzung abmelden möchtest?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Bist du sicher, dass du dich von %(count)s Sitzungen abmelden möchtest?",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inaktive Sitzungen sind jene, die du schon seit geraumer Zeit nicht mehr verwendet hast, aber nach wie vor Verschlüsselungs-Schlüssel erhalten.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Du solltest besonders sicher gehen, dass du diese Sitzungen kennst, da sie die unbefugte Nutzung deines Kontos durch Dritte bedeuten könnten.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Nicht verifizierte Sitzungen sind jene, die mit deinen Daten angemeldet, aber nicht quer signiert wurden.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Dies bedeutet, dass sie die Verschlüsselungs-Schlüssel für deine vorherigen Nachrichten besitzen und anderen Gewissheit geben, dass sie wirklich mit dir kommunizieren.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verifizierte Sitzungen wurden mit deinen Daten angemeldet und anschließend verifiziert, entweder mit einer Sicherheitspassphrase oder durch Quersignierung.",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Erwäge, dich aus alten (%(inactiveAgeDays)s Tage oder mehr), nicht mehr verwendeten Sitzungen abzumelden.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Das Entfernen inaktiver Sitzungen verbessert Sicherheit, Leistung und das Erkennen von dubiosen neuen Sitzungen.",
+    "Show formatting": "Formatierung anzeigen",
+    "Show plain text": "Klartext anzeigen",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Dies gibt ihnen die Gewissheit, dass sie auch wirklich mit dir kommunizieren, allerdings bedeutet es auch, dass sie die Sitzungsnamen sehen können, die du hier eingibst.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Andere Benutzer in Direktnachrichten oder von dir betretenen Räumen können die volle Liste deiner Sitzungen sehen.",
+    "Renaming sessions": "Sitzungen umbenennen",
+    "Please be aware that session names are also visible to people you communicate with.": "Sei dir bitte bewusst, dass Sitzungsnamen auch für Personen, mit denen du kommunizierst, sichtbar sind."
 }
diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json
index fabcc930193..57374a20f98 100644
--- a/src/i18n/strings/et.json
+++ b/src/i18n/strings/et.json
@@ -29,7 +29,7 @@
     "%(weekDayName)s %(time)s": "%(weekDayName)s %(time)s",
     "Verify this session": "Verifitseeri see sessioon",
     "Changes your avatar in all rooms": "Muuda oma tunnuspilti kõikides jututubades",
-    "Ask this user to verify their session, or manually verify it below.": "Palu nimetatud kasutajal verifitseerida see sessioon või tee seda alljärgnevas käsitsi.",
+    "Ask this user to verify their session, or manually verify it below.": "Palu nimetatud kasutajal verifitseerida see sessioon või tee seda alljärgnevaga käsitsi.",
     "Manually Verify by Text": "Verifitseeri käsitsi etteantud teksti abil",
     "Interactively verify by Emoji": "Verifitseeri interaktiivselt Emoji abil",
     "Enable big emoji in chat": "Kasuta vestlustes suuri emoji'sid",
@@ -392,7 +392,7 @@
     "Error downloading theme information.": "Viga teema teabefaili allalaadimisel.",
     "Close": "Sulge",
     "Drop file here to upload": "Faili üleslaadimiseks lohista ta siia",
-    "This user has not verified all of their sessions.": "See kasutaja ei ole verifitseerinud kõiki nende sessioone.",
+    "This user has not verified all of their sessions.": "See kasutaja ei ole verifitseerinud kõiki oma sessioone.",
     "You have not verified this user.": "Sa ei ole seda kasutajat verifitseerinud.",
     "You have verified this user. This user has verified all of their sessions.": "Sa oled selle kasutaja verifitseerinud. See kasutaja on verifitseerinud kõik nende sessioonid.",
     "Someone is using an unknown session": "Keegi kasutab tundmatut sessiooni",
@@ -3663,5 +3663,21 @@
     "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Keegi juba salvestab ringhäälingukõnet. Uue ringhäälingukõne salvestamiseks palun oota, kuni see teine ringhäälingukõne on lõppenud.",
     "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Sul pole piisavalt õigusi selles jututoas ringhäälingukõne algatamiseks. Õiguste lisamiseks palun võta ühendust jututoa haldajaga.",
     "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Sa juba salvestad ringhäälingukõnet. Uue alustamiseks palun lõpeta eelmine salvestus.",
-    "Can't start a new voice broadcast": "Uue ringhäälingukõne alustamine pole võimalik"
+    "Can't start a new voice broadcast": "Uue ringhäälingukõne alustamine pole võimalik",
+    "play voice broadcast": "esita ringhäälingukõnet",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Kas sa oled kindel et soovid %(count)s sessiooni võrgust välja logida?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Kas sa oled kindel et soovid %(count)s sessiooni võrgust välja logida?",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Muu hulgas selle alusel saavad nad olla kindlad, et nad tõesti suhtlevad sinuga, kuid samas nad näevad nimesid, mida sa siia sisestad.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Nii otsesuhtluse osapooled kui jututubades osalejad näevad sinu kõikide sessioonide loendit.",
+    "Renaming sessions": "Sessioonide nimede muutmine",
+    "Please be aware that session names are also visible to people you communicate with.": "Palun arvesta, et sessioonide nimed on näha ka kõikidele osapooltele, kellega sa suhtled.",
+    "Show formatting": "Näita vormingut",
+    "Show plain text": "Näita vormindamata teksti",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Võimalusel logi välja vanadest seanssidest (%(inactiveAgeDays)s päeva või vanemad), mida sa enam ei kasuta.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Mitteaktiivsete seansside eemaldamine parandab turvalisust ja jõudlust ning lihtsustab võimalike kahtlaste seansside tuvastamist.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Mitteaktiivsed seansid on seansid, mida sa ei ole mõnda aega kasutanud, kuid neil jätkuvalt lubatakse laadida krüptimisvõtmeid.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Kuna nende näol võib olla tegemist võimaliku konto volitamata kasutamisega, siis palun tee kindlaks, et need sessioonid on sulle tuttavad.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Kontrollimata sessioonid on sessioonid, kuhu on sinu volitustega sisse logitud, kuid mida ei ole risttuvastamisega kontrollitud.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "See tähendab, et neil on sinu eelmiste sõnumite krüpteerimisvõtmed ja nad kinnitavad teistele kasutajatele, kellega sa suhtled, et suhtlus on turvaline.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Kontrollitud seanss on see, kuhu on sinu kasutajatunnustega sisse logitud ja mida on kontrollitud sinu salafraasi või risttunnustamise abil."
 }
diff --git a/src/i18n/strings/fa.json b/src/i18n/strings/fa.json
index c6ebc564a5f..eaf0964669d 100644
--- a/src/i18n/strings/fa.json
+++ b/src/i18n/strings/fa.json
@@ -2509,5 +2509,11 @@
     "No virtual room for this room": "اتاق مجازی برای این اتاق وجود ندارد",
     "Switches to this room's virtual room, if it has one": "جابجایی به اتاق مجازی این اتاق، اگر یکی وجود داشت",
     "You need to be able to kick users to do that.": "برای انجام این کار نیاز دارید که بتوانید کاربران را حذف کنید.",
-    "Empty room (was %(oldName)s)": "اتاق خالی (نام قبلی: %(oldName)s)"
+    "Empty room (was %(oldName)s)": "اتاق خالی (نام قبلی: %(oldName)s)",
+    "%(user)s and %(count)s others|other": "%(user)s  و %(count)s دیگران",
+    "%(user1)s and %(user2)s": "%(user1)s و %(user2)s",
+    "%(value)ss": "%(value)sس",
+    "%(value)sm": "%(value)sم",
+    "%(value)sh": "%(value)sه",
+    "%(value)sd": "%(value)sد"
 }
diff --git a/src/i18n/strings/fi.json b/src/i18n/strings/fi.json
index cfa9835039f..2c3ab5b2be3 100644
--- a/src/i18n/strings/fi.json
+++ b/src/i18n/strings/fi.json
@@ -27,7 +27,7 @@
     "Default Device": "Oletuslaite",
     "Microphone": "Mikrofoni",
     "Camera": "Kamera",
-    "Advanced": "Edistynyt",
+    "Advanced": "Lisäasetukset",
     "Always show message timestamps": "Näytä aina viestien aikaleimat",
     "Authentication": "Tunnistautuminen",
     "%(items)s and %(lastItem)s": "%(items)s ja %(lastItem)s",
@@ -75,7 +75,7 @@
     "Failed to set display name": "Näyttönimen asettaminen epäonnistui",
     "Failed to unban": "Porttikiellon poistaminen epäonnistui",
     "Failed to upload profile picture!": "Profiilikuvan lähetys epäonnistui!",
-    "Failed to verify email address: make sure you clicked the link in the email": "Sähköpostin vahvistus epäonnistui: varmista, että klikkasit sähköpostissa olevaa linkkiä",
+    "Failed to verify email address: make sure you clicked the link in the email": "Sähköpostin vahvistus epäonnistui: varmista, että napsautit sähköpostissa olevaa linkkiä",
     "Failure to create room": "Huoneen luominen epäonnistui",
     "Favourites": "Suosikit",
     "Filter room members": "Suodata huoneen jäseniä",
@@ -225,7 +225,7 @@
     "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s vaihtoi aiheeksi \"%(topic)s\".",
     "Define the power level of a user": "Määritä käyttäjän oikeustaso",
     "Failed to change power level": "Oikeustason muuttaminen epäonnistui",
-    "Please check your email and click on the link it contains. Once this is done, click continue.": "Ole hyvä ja tarkista sähköpostisi ja seuraa sen sisältämää linkkiä. Kun olet valmis, paina jatka.",
+    "Please check your email and click on the link it contains. Once this is done, click continue.": "Ole hyvä ja tarkista sähköpostisi ja seuraa sen sisältämää linkkiä. Kun olet valmis, napsauta Jatka.",
     "Power level must be positive integer.": "Oikeustason pitää olla positiivinen kokonaisluku.",
     "Server may be unavailable, overloaded, or search timed out :(": "Palvelin saattaa olla saavuttamattomissa, ylikuormitettu tai haku kesti liian kauan :(",
     "Server may be unavailable, overloaded, or you hit a bug.": "Palvelin saattaa olla saavuttamattomissa, ylikuormitettu tai olet törmännyt virheeseen.",
@@ -311,7 +311,7 @@
     "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Oletko varma että haluat poistaa tämän tapahtuman? Huomaa että jos poistat huoneen nimen tai aiheen muutoksen, saattaa muutos kumoutua.",
     "Leave": "Poistu",
     "Description": "Kuvaus",
-    "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "Viesti on lähetetty osoitteeseen %(emailAddress)s. Klikkaa alla sen jälkeen kun olet seurannut viestin sisältämää linkkiä.",
+    "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "Viesti on lähetetty osoitteeseen %(emailAddress)s. Napsauta alla sen jälkeen kun olet seurannut viestin sisältämää linkkiä.",
     "Please note you are logging into the %(hs)s server, not matrix.org.": "Huomaa että olet kirjautumassa palvelimelle %(hs)s, etkä palvelimelle matrix.org.",
     "Deops user with given id": "Poistaa tunnuksen mukaiselta käyttäjältä ylläpito-oikeudet",
     "Ignores a user, hiding their messages from you": "Sivuuttaa käyttäjän, eli hänen viestejään ei näytetä sinulle",
@@ -696,7 +696,7 @@
     "Messages containing @room": "Viestit, jotka sisältävät sanan ”@room”",
     "Secure messages with this user are end-to-end encrypted and not able to be read by third parties.": "Turvalliset viestit tämän käyttäjän kanssa ovat salattuja päästä päähän, eivätkä kolmannet osapuolet voi lukea niitä.",
     "Thumbs up": "Peukut ylös",
-    "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "Lähetimme sinulle sähköpostin osoitteesi vahvistamiseksi. Noudata sähköpostissa olevia ohjeita, ja klikkaa sen jälkeen alla olevaa painiketta.",
+    "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "Lähetimme sinulle sähköpostin osoitteesi vahvistamiseksi. Noudata sähköpostissa olevia ohjeita, ja napsauta sen jälkeen alla olevaa painiketta.",
     "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "Oletko varma? Et voi lukea salattuja viestejäsi, mikäli avaimesi eivät ole kunnolla varmuuskopioituna.",
     "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Salatut viestit turvataan päästä päähän -salauksella. Vain sinä ja viestien vastaanottaja(t) omaavat avaimet näiden viestien lukemiseen.",
     "Unable to load key backup status": "Avainten varmuuskopionnin tilan lukeminen epäonnistui",
@@ -707,13 +707,13 @@
     "Unable to verify phone number.": "Puhelinnumeron vahvistaminen epäonnistui.",
     "Verification code": "Varmennuskoodi",
     "Credits": "Maininnat",
-    "For help with using %(brand)s, click <a>here</a>.": "Saadaksesi apua %(brand)sin käyttämisessä, klikkaa <a>tästä</a>.",
-    "For help with using %(brand)s, click <a>here</a> or start a chat with our bot using the button below.": "Saadaksesi apua %(brand)sin käytössä, klikkaa <a>tästä</a> tai aloita keskustelu bottimme kanssa alla olevasta painikkeesta.",
+    "For help with using %(brand)s, click <a>here</a>.": "Saadaksesi apua %(brand)sin käyttämisessä, napsauta <a>tästä</a>.",
+    "For help with using %(brand)s, click <a>here</a> or start a chat with our bot using the button below.": "Saadaksesi apua %(brand)sin käytössä, napsauta <a>tästä</a> tai aloita keskustelu bottimme kanssa alla olevasta painikkeesta.",
     "Bug reporting": "Virheiden raportointi",
     "Autocomplete delay (ms)": "Automaattisen täydennyksen viive (ms)",
     "Ignored users": "Sivuutetut käyttäjät",
     "Bulk options": "Massatoimintoasetukset",
-    "Missing media permissions, click the button below to request.": "Mediaoikeuksia puuttuu. Klikkaa painikkeesta pyytääksesi oikeuksia.",
+    "Missing media permissions, click the button below to request.": "Mediaoikeuksia puuttuu. Napsauta painikkeesta pyytääksesi oikeuksia.",
     "Request media permissions": "Pyydä mediaoikeuksia",
     "Manually export keys": "Vie avaimet käsin",
     "Share User": "Jaa käyttäjä",
@@ -941,7 +941,7 @@
     "Continue with previous account": "Jatka aiemmalla tilillä",
     "<a>Log in</a> to your new account.": "<a>Kirjaudu</a> uudelle tilillesi.",
     "Registration Successful": "Rekisteröityminen onnistui",
-    "Edited at %(date)s. Click to view edits.": "Muokattu %(date)s. Klikkaa nähdäksesi muokkaukset.",
+    "Edited at %(date)s. Click to view edits.": "Muokattu %(date)s. Napsauta nähdäksesi muokkaukset.",
     "Message edits": "Viestin muokkaukset",
     "Upgrading this room requires closing down the current instance of the room and creating a new room in its place. To give room members the best possible experience, we will:": "Tämän huoneen päivittäminen edellyttää huoneen nykyisen instanssin sulkemista ja uuden huoneen luomista sen tilalle. Jotta tämä kävisi huoneen jäsenten kannalta mahdollisimman sujuvasti, teemme seuraavaa:",
     "Upload all": "Lähetä kaikki palvelimelle",
@@ -968,7 +968,7 @@
     "Find others by phone or email": "Löydä muita käyttäjiä puhelimen tai sähköpostin perusteella",
     "Be found by phone or email": "Varmista, että sinut löydetään puhelimen tai sähköpostin perusteella",
     "Use bots, bridges, widgets and sticker packs": "Käytä botteja, siltoja, sovelmia ja tarrapaketteja",
-    "Terms of Service": "Käyttöehdot (Terms of Service)",
+    "Terms of Service": "Käyttöehdot",
     "Service": "Palvelu",
     "Summary": "Yhteenveto",
     "Messages": "Viestit",
@@ -997,7 +997,7 @@
     "The identity server you have chosen does not have any terms of service.": "Valitsemallasi identiteettipalvelimella ei ole käyttöehtoja.",
     "Terms of service not accepted or the identity server is invalid.": "Käyttöehtoja ei ole hyväksytty tai identiteettipalvelin ei ole kelvollinen.",
     "Enter a new identity server": "Syötä uusi identiteettipalvelin",
-    "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Hyväksy identiteettipalvelimen (%(serverName)s) käyttöehdot (Terms of Service), jotta sinut voi löytää sähköpostiosoitteen tai puhelinnumeron perusteella.",
+    "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Hyväksy identiteettipalvelimen (%(serverName)s) käyttöehdot, jotta sinut voi löytää sähköpostiosoitteen tai puhelinnumeron perusteella.",
     "Deactivate account": "Poista tili pysyvästi",
     "Remove %(email)s?": "Poista %(email)s?",
     "Remove %(phone)s?": "Poista %(phone)s?",
@@ -1090,8 +1090,8 @@
     "Jump to first invite.": "Siirry ensimmäiseen kutsuun.",
     "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "Tekstiviesti on lähetetty numeroon +%(msisdn)s. Syötä siinä oleva varmistuskoodi.",
     "Failed to deactivate user": "Käyttäjän poistaminen epäonnistui",
-    "Hide advanced": "Piilota edistyneet",
-    "Show advanced": "Näytä edistyneet",
+    "Hide advanced": "Piilota lisäasetukset",
+    "Show advanced": "Näytä lisäasetukset",
     "Document": "Asiakirja",
     "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.": "Captchan julkinen avain puuttuu kotipalvelimen asetuksista. Ilmoita tämä kotipalvelimesi ylläpitäjälle.",
     "Command Autocomplete": "Komentojen automaattinen täydennys",
@@ -1131,7 +1131,7 @@
     "Widget added by": "Sovelman lisäsi",
     "This widget may use cookies.": "Tämä sovelma saattaa käyttää evästeitä.",
     "Trust": "Luota",
-    "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Voit käyttää identiteettipalvelinta lähettääksesi sähköpostikutsuja. Klikkaa Jatka käyttääksesi oletuspalvelinta (%(defaultIdentityServerName)s) tai syötä eri palvelin asetuksissa.",
+    "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Voit käyttää identiteettipalvelinta lähettääksesi sähköpostikutsuja. Napsauta Jatka käyttääksesi oletuspalvelinta (%(defaultIdentityServerName)s) tai syötä eri palvelin asetuksissa.",
     "Use an identity server to invite by email. Manage in Settings.": "Voit käyttää identiteettipalvelinta sähköpostikutsujen lähettämiseen.",
     "Try out new ways to ignore people (experimental)": "Kokeile uusia tapoja käyttäjien sivuuttamiseen (kokeellinen)",
     "Match system theme": "Käytä järjestelmän teemaa",
@@ -1139,7 +1139,7 @@
     "Connecting to integration manager...": "Yhdistetään integraatioiden lähteeseen...",
     "Cannot connect to integration manager": "Integraatioiden lähteeseen yhdistäminen epäonnistui",
     "The integration manager is offline or it cannot reach your homeserver.": "Integraatioiden lähde on poissa verkosta, tai siihen ei voida yhdistää kotipalvelimeltasi.",
-    "Manage integrations": "Hallitse integraatioita",
+    "Manage integrations": "Integraatioiden hallinta",
     "Discovery": "Käyttäjien etsintä",
     "Ignored/Blocked": "Sivuutettu/estetty",
     "Error adding ignored user/server": "Virhe sivuutetun käyttäjän/palvelimen lisäämisessä",
@@ -1161,7 +1161,7 @@
     "Subscribing to a ban list will cause you to join it!": "Estolistan käyttäminen saa sinut liittymään listalle!",
     "If this isn't what you want, please use a different tool to ignore users.": "Jos et halua tätä, käytä eri työkalua käyttäjien sivuuttamiseen.",
     "Read Marker lifetime (ms)": "Viestin luetuksi merkkaamisen kesto (ms)",
-    "Click the link in the email you received to verify and then click continue again.": "Klikkaa lähettämässämme sähköpostissa olevaa linkkiä vahvistaaksesi tunnuksesi. Klikkaa sen jälkeen tällä sivulla olevaa painiketta ”Jatka”.",
+    "Click the link in the email you received to verify and then click continue again.": "Napsauta lähettämässämme sähköpostissa olevaa linkkiä vahvistaaksesi tunnuksesi. Napsauta sen jälkeen tällä sivulla olevaa painiketta ”Jatka”.",
     "Complete": "Valmis",
     "Revoke": "Kumoa",
     "Discovery options will appear once you have added an email above.": "Etsinnän asetukset näkyvät sen jälkeen, kun olet lisännyt sähköpostin.",
@@ -1189,7 +1189,7 @@
     "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Käytä identiteettipalvelinta kutsuaksesi henkilöitä sähköpostilla. <default>Käytä oletusta (%(defaultIdentityServerName)s)</default> tai aseta toinen palvelin <settings>asetuksissa</settings>.",
     "Use an identity server to invite by email. Manage in <settings>Settings</settings>.": "Käytä identiteettipalvelinta kutsuaksesi käyttäjiä sähköpostilla. Voit vaihtaa identiteettipalvelimen <settings>asetuksissa</settings>.",
     "Integrations are disabled": "Integraatiot ovat pois käytöstä",
-    "Enable 'Manage Integrations' in Settings to do this.": "Ota integraatiot käyttöön asetuksista kohdasta ”Hallitse integraatioita”.",
+    "Enable 'Manage Integrations' in Settings to do this.": "Ota integraatiot käyttöön asetuksista kohdasta ”Integraatioiden hallinta”.",
     "Integrations not allowed": "Integraatioiden käyttö on kielletty",
     "Remove for everyone": "Poista kaikilta",
     "Verification Request": "Varmennuspyyntö",
@@ -1339,7 +1339,7 @@
     "%(num)s days from now": "%(num)s päivää sitten",
     "Never send encrypted messages to unverified sessions from this session": "Älä koskaan lähetä salattuja viestejä vahvistamattomiin istuntoihin tästä istunnosta",
     "Never send encrypted messages to unverified sessions in this room from this session": "Älä lähetä salattuja viestejä vahvistamattomiin istuntoihin tässä huoneessa tässä istunnossa",
-    "Order rooms by name": "Suodata huoneet nimellä",
+    "Order rooms by name": "Järjestä huoneet nimellä",
     "Setting up keys": "Otetaan avaimet käyttöön",
     "Verifies a user, session, and pubkey tuple": "Varmentaa käyttäjän, istunnon ja julkiset avaimet",
     "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!": "VAROITUS: AVAIMEN VARMENTAMINEN EPÄONNISTUI! Käyttäjän %(userId)s ja laitteen %(deviceId)s istunnon allekirjoitusavain on ”%(fprint)s”, mikä ei täsmää annettuun avaimeen ”%(fingerprint)s”. Tämä voi tarkoittaa, että viestintäänne siepataan!",
@@ -1356,7 +1356,7 @@
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) kirjautui uudella istunnolla varmentamatta sitä:",
     "Support adding custom themes": "Tue mukaututettujen teemojen lisäämistä",
     "Show rooms with unread notifications first": "Näytä ensin huoneet, joissa on lukemattomia viestejä",
-    "Show shortcuts to recently viewed rooms above the room list": "Näytä oikotiet viimeiseksi katsottuihin huoneisiin huoneluettelon yläpuolella",
+    "Show shortcuts to recently viewed rooms above the room list": "Näytä oikotiet viimeksi katsottuihin huoneisiin huoneluettelon yläpuolella",
     "Enable message search in encrypted rooms": "Ota viestihaku salausta käyttävissä huoneissa käyttöön",
     "How fast should messages be downloaded.": "Kuinka nopeasti viestit pitäisi ladata.",
     "Scan this unique code": "Skannaa tämä uniikki koodi",
@@ -1408,7 +1408,7 @@
     "Page Down": "Page Down",
     "Esc": "Esc",
     "Enter": "Enter",
-    "Space": "Space",
+    "Space": "Avaruus",
     "End": "End",
     "Use Single Sign On to continue": "Jatka kertakirjautumista käyttäen",
     "Confirm adding this email address by using Single Sign On to prove your identity.": "Vahvista tämän sähköpostiosoitteen lisääminen todistamalla henkilöllisyytesi kertakirjautumista käyttäen.",
@@ -1442,8 +1442,8 @@
     "Syncing...": "Synkronoidaan...",
     "Signing In...": "Kirjaudutaan sisään...",
     "If you've joined lots of rooms, this might take a while": "Jos olet liittynyt moniin huoneisiin, tässä voi kestää hetken",
-    "Click the button below to confirm adding this email address.": "Klikkaa alapuolella olevaa painiketta lisätäksesi tämän sähköpostiosoitteen.",
-    "Click the button below to confirm adding this phone number.": "Klikkaa alapuolella olevaa painiketta lisätäksesi tämän puhelinnumeron.",
+    "Click the button below to confirm adding this email address.": "Napsauta alapuolella olevaa painiketta lisätäksesi tämän sähköpostiosoitteen.",
+    "Click the button below to confirm adding this phone number.": "Napsauta alapuolella olevaa painiketta lisätäksesi tämän puhelinnumeron.",
     "New login. Was this you?": "Uusi sisäänkirjautuminen. Olitko se sinä?",
     "%(name)s is requesting verification": "%(name)s pyytää varmennusta",
     "Sends a message as html, without interpreting it as markdown": "Lähettää viestin HTML-muodossa, tulkitsematta sitä markdownina",
@@ -1497,7 +1497,7 @@
     "This room is end-to-end encrypted": "Tämä huone käyttää päästä päähän -salausta",
     "Everyone in this room is verified": "Kaikki tämän huoneen käyttäjät on varmennettu",
     "Your key share request has been sent - please check your other sessions for key share requests.": "Avainten jakopyyntösi on lähetetty. Tarkista muut istuntosi avainten jakopyyntöjen varalta.",
-    "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.": "Avainten jakopyynnöt lähetetään muille istunnoillesi automaattisesti. Jos hylkäsit tai jätit huomiotta avainten jakopyynnön toisessa istunnossasi, klikkaa tästä pyytääksesi avaimia uudelleen.",
+    "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.": "Avainten jakopyynnöt lähetetään muille istunnoillesi automaattisesti. Jos hylkäsit tai jätit huomiotta avainten jakopyynnön toisessa istunnossasi, napsauta tästä pyytääksesi avaimia uudelleen.",
     "If your other sessions do not have the key for this message you will not be able to decrypt them.": "Jos muissa laitteissasi ei ole avainta tämän viestin purkamiseen, niillä istunnoilla ei voi lukea tätä viestiä.",
     "Encrypted by an unverified session": "Salattu varmentamattoman istunnon toimesta",
     "Encrypted by a deleted session": "Salattu poistetun istunnon toimesta",
@@ -1515,7 +1515,7 @@
     "You've successfully verified your device!": "Olet onnistuneesti varmentanut laitteesi!",
     "You've successfully verified %(deviceName)s (%(deviceId)s)!": "Olet onnistuneesti varmentanut laitteen %(deviceName)s (%(deviceId)s)!",
     "You've successfully verified %(displayName)s!": "Olet varmentanut käyttäjän %(displayName)s!",
-    "Font size": "Fonttikoko",
+    "Font size": "Fontin koko",
     "Size must be a number": "Koon täytyy olla luku",
     "Custom font size can only be between %(min)s pt and %(max)s pt": "Mukautetun fonttikoon täytyy olla vähintään %(min)s pt ja enintään %(max)s pt",
     "Use between %(min)s pt and %(max)s pt": "Käytä kokoa väliltä %(min)s pt ja %(max)s pt",
@@ -1527,7 +1527,7 @@
     "%(displayName)s cancelled verification.": "%(displayName)s peruutti varmennuksen.",
     "You cancelled verification.": "Peruutit varmennuksen.",
     "Verification cancelled": "Varmennus peruutettu",
-    "Enter the name of a new server you want to explore.": "Syötä sen uuden palvelimen nimi, jota hauat tutkia.",
+    "Enter the name of a new server you want to explore.": "Syötä sen uuden palvelimen nimi, jota haluat selata.",
     "Destroy cross-signing keys?": "Tuhoa ristiinvarmennuksen avaimet?",
     "Deleting cross-signing keys is permanent. Anyone you have verified with will see security alerts. You almost certainly don't want to do this, unless you've lost every device you can cross-sign from.": "Ristiinvarmennuksen avainten tuhoamista ei voi kumota. Jokainen, jonka olet varmentanut, tulee näkemään turvallisuushälytyksiä. Et todennäköisesti halua tehdä tätä, ellet ole hukannut kaikkia laitteitasi, joista pystyit ristiinvarmentamaan.",
     "Clear cross-signing keys": "Tyhjennä ristiinvarmennuksen avaimet",
@@ -1537,7 +1537,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.": "Varmenna tämä laite merkitäksesi sen luotetuksi. Tähän laitteeseen luottaminen antaa sinulle ja muille käyttäjille lisää mielenrauhaa, kun käytätte päästä päähän -salausta.",
     "Verifying this device will mark it as trusted, and users who have verified with you will trust this device.": "Tämän laitteen varmentaminen merkkaa sen luotetuksi, ja sinut varmentaneet käyttäjät luottavat automaattisesti tähän laitteeseen.",
     "Confirm to continue": "Haluan jatkaa",
-    "Click the button below to confirm your identity.": "Paina alapuolella olevaa painiketta varmistaaksesi identiteettisi.",
+    "Click the button below to confirm your identity.": "Napsauta alapuolella olevaa painiketta varmistaaksesi identiteettisi.",
     "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "Seuraavat käyttäjät eivät välttämättä ole olemassa tai ne ovat epäkelpoja, joten niitä ei voida kutsua: %(csvNames)s",
     "Recently Direct Messaged": "Viimeaikaiset yksityisviestit",
     "%(brand)s encountered an error during upload of:": "%(brand)s kohtasi virheen lähettäessään:",
@@ -1587,7 +1587,7 @@
     "Use custom size": "Käytä mukautettua kokoa",
     "Use a system font": "Käytä järjestelmän fonttia",
     "System font name": "Järjestelmän fontin nimi",
-    "Message layout": "Viestiasettelu",
+    "Message layout": "Viestien asettelu",
     "Modern": "Moderni",
     "Use default": "Käytä oletusta",
     "Mentions & Keywords": "Maininnat ja avainsanat",
@@ -1678,7 +1678,7 @@
     "Preparing to download logs": "Valmistellaan lokien lataamista",
     "About": "Tietoa",
     "Unpin": "Poista kiinnitys",
-    "Customise your appearance": "Mukauta ulkoasuasi",
+    "Customise your appearance": "Mukauta ulkoasua",
     "Appearance Settings only affect this %(brand)s session.": "Ulkoasuasetukset vaikuttavat vain tähän %(brand)s-istuntoon.",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Aseta käyttöjärjestelmääsi asennetun fontin nimi, niin %(brand)s pyrkii käyttämään sitä.",
     "The operation could not be completed": "Toimintoa ei voitu tehdä loppuun asti",
@@ -2211,7 +2211,7 @@
     "Want to add a new room instead?": "Haluatko kuitenkin lisätä uuden huoneen?",
     "Add existing rooms": "Lisää olemassa olevia huoneita",
     "Adding rooms... (%(progress)s out of %(count)s)|one": "Lisätään huonetta...",
-    "Adding rooms... (%(progress)s out of %(count)s)|other": "Lisätään huoneita... (%(progress)s out of %(count)s)",
+    "Adding rooms... (%(progress)s out of %(count)s)|other": "Lisätään huoneita... (%(progress)s/%(count)s)",
     "Not all selected were added": "Kaikkia valittuja ei lisätty",
     "You are not allowed to view this server's rooms list": "Sinulla ei ole oikeuksia nähdä tämän palvelimen huoneluetteloa",
     "View message": "Näytä viesti",
@@ -2251,9 +2251,9 @@
     "Invite your teammates": "Kutsu tiimikaverit",
     "Me and my teammates": "Minä ja tiimikaverit",
     "Just me": "Vain minä",
-    "Go to my space": "Mene spaceeni",
+    "Go to my space": "Mene avaruuteeni",
     "Go to my first room": "Mene ensimmäiseen huoneeseeni",
-    "Search for rooms or spaces": "Etsi huoneita tai spaceja",
+    "Search for rooms or spaces": "Etsi huoneita tai avaruuksia",
     "Support": "Tuki",
     "Rooms and spaces": "Huoneet ja avaruudet",
     "No results for \"%(query)s\"": "Ei tuloksia kyselyllä \"%(query)s\"",
@@ -2269,10 +2269,10 @@
     "Forward": "Välitä",
     "View source": "Näytä lähde",
     "Settings - %(spaceName)s": "Asetukset - %(spaceName)s",
-    "Space settings": "Spacen asetukset",
+    "Space settings": "Avaruuden asetukset",
     "Report the entire room": "Raportoi koko huone",
-    "Search spaces": "Etsi spaceja",
-    "Unnamed Space": "Nimetön Space",
+    "Search spaces": "Etsi avaruuksia",
+    "Unnamed Space": "Nimetön avaruus",
     "You may contact me if you have any follow up questions": "Voitte olla yhteydessä minuun, jos teillä on lisäkysymyksiä",
     "Search for rooms or people": "Etsi huoneita tai ihmisiä",
     "Message preview": "Viestin esikatselu",
@@ -2285,14 +2285,14 @@
     "Number of messages": "Viestien määrä",
     "Server did not require any authentication": "Palvelin ei vaatinut mitään tunnistautumista",
     "Adding...": "Lisätään...",
-    "Only people invited will be able to find and join this space.": "Vain kutsutut ihmiset voivat löytää tämän spacen ja liittyä siihen.",
-    "Public space": "Julkinen space",
+    "Only people invited will be able to find and join this space.": "Vain kutsutut ihmiset voivat löytää tämän avaruuden ja liittyä siihen.",
+    "Public space": "Julkinen avaruus",
     "Public room": "Julkinen huone",
     "Private room (invite only)": "Yksityinen huone (vain kutsulla)",
     "Create a room": "Luo huone",
     "Only people invited will be able to find and join this room.": "Vain kutsutut ihmiset voivat löytää tämän huoneen ja liittyä siihen.",
     "You can change this at any time from room settings.": "Voit muuttaa tämän milloin tahansa huoneen asetuksista.",
-    "Everyone in <SpaceName/> will be able to find and join this room.": "Kaikki spacessa <SpaceName/> voivat löytää tämän huoneen ja liittyä siihen.",
+    "Everyone in <SpaceName/> will be able to find and join this room.": "Kaikki avaruudessa <SpaceName/> voivat löytää tämän huoneen ja liittyä siihen.",
     "Zoom in": "Lähennä",
     "Zoom out": "Loitonna",
     "Including %(commaSeparatedMembers)s": "Mukaan lukien %(commaSeparatedMembers)s",
@@ -2318,25 +2318,25 @@
     "Invite to just this room": "Kutsu vain tähän huoneeseen",
     "Send voice message": "Lähetä ääniviesti",
     "Send a sticker": "Lähetä tarra",
-    "Invite to this space": "Kutsu tähän spaceen",
+    "Invite to this space": "Kutsu tähän avaruuteen",
     "Are you sure you want to make this encrypted room public?": "Haluatko varmasti tehdä tästä salatusta huoneesta julkisen?",
     "Unknown failure": "Tuntematon virhe",
     "Change description": "Vaihda kuvaus",
-    "Change space name": "Vaihda spacen nimi",
-    "Change space avatar": "Vaihda spacen kuva",
+    "Change space name": "Vaihda avaruuden nimi",
+    "Change space avatar": "Vaihda avaruuden kuva",
     "Message bubbles": "Viestikuplat",
-    "Space members": "Spacen jäsenet",
+    "Space members": "Avaruuden jäsenet",
     "& %(count)s more|one": "& %(count)s lisää",
     "& %(count)s more|other": "& %(count)s lisää",
     "Anyone can find and join.": "Kuka tahansa voi löytää ja liittyä.",
     "Only invited people can join.": "Vain kutsutut ihmiset voivat liittyä.",
-    "Space options": "Spacen valinnat",
+    "Space options": "Avaruuden valinnat",
     "Collapse": "Supista",
     "Expand": "Laajenna",
-    "Recommended for public spaces.": "Suositeltu julkisiin spaceihin.",
-    "Guests can join a space without having an account.": "Vieraat voivat liittyä spaceen ilman tiliä.",
+    "Recommended for public spaces.": "Suositeltu julkisiin avaruuksiin.",
+    "Guests can join a space without having an account.": "Vieraat voivat liittyä avaruuteen ilman tiliä.",
     "Enable guest access": "Ota käyttöön vieraiden pääsy",
-    "Failed to save space settings.": "Spacen asetusten tallentaminen epäonnistui.",
+    "Failed to save space settings.": "Avaruuden asetusten tallentaminen epäonnistui.",
     "Thank you for trying Spaces. Your feedback will help inform the next versions.": "Kiitos, että kokeilet Spaces-ominaisuuta. Palautteesi auttaa tulevien versioiden kanssa.",
     "Delete avatar": "Poista avatar",
     "Mute the microphone": "Mykistä mikrofoni",
@@ -2362,46 +2362,46 @@
     "Plain Text": "Raakateksti",
     "JSON": "JSON",
     "HTML": "HTML",
-    "Share your public space": "Jaa julkinen spacesi",
-    "Invite to %(spaceName)s": "Kutsu spaceen %(spaceName)s",
+    "Share your public space": "Jaa julkinen avaruutesi",
+    "Invite to %(spaceName)s": "Kutsu avaruuteen %(spaceName)s",
     "%(senderName)s pinned a message to this room. See all pinned messages.": "%(senderName)s kiinnitti viestin tähän huoneeseen. Katso kaikki kiinnitetyt viestit.",
     "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s lähetti tarran.",
     "%(senderName)s removed their display name (%(oldDisplayName)s)": "%(senderName)s poisti näyttönimensä (%(oldDisplayName)s)",
     "The user you called is busy.": "Käyttäjä, jolle soitit, on varattu.",
     "User Busy": "Käyttäjä varattu",
     "Decide who can join %(roomName)s.": "Päätä ketkä voivat liittyä huoneeseen %(roomName)s.",
-    "Decide who can view and join %(spaceName)s.": "Päätä ketkä voivat katsella spacea %(spaceName)s ja liittyä siihen.",
-    "Space information": "Spacen tiedot",
-    "Allow people to preview your space before they join.": "Salli ihmisten esikatsella spaceasi ennen liittymistä.",
-    "Preview Space": "Esikatsele Space",
-    "Space visibility": "Spacen näkyvyys",
+    "Decide who can view and join %(spaceName)s.": "Päätä ketkä voivat katsella avaruutta %(spaceName)s ja liittyä siihen.",
+    "Space information": "Avaruuden tiedot",
+    "Allow people to preview your space before they join.": "Salli ihmisten esikatsella avaruuttasi ennen liittymistä.",
+    "Preview Space": "Esikatsele avaruutta",
+    "Space visibility": "Avaruuden näkyvyys",
     "Room visibility": "Huoneen näkyvyys",
     "Visibility": "Näkyvyys",
-    "Are you sure you want to leave the space '%(spaceName)s'?": "Haluatko varmasti poistua spacesta '%(spaceName)s'?",
-    "Leave space": "Poistu spacesta",
-    "Would you like to leave the rooms in this space?": "Haluatko poistua tässä spacessa olevista huoneista?",
-    "You are about to leave <spaceName/>.": "Olet aikeissa poistua spacesta <spaceName/>.",
-    "Leave %(spaceName)s": "Poistu spacesta %(spaceName)s",
-    "Leave Space": "Poistu Spacesta",
-    "Edit settings relating to your space.": "Muokkaa spaceesi liittyviä asetuksia.",
+    "Are you sure you want to leave the space '%(spaceName)s'?": "Haluatko varmasti poistua avaruudesta '%(spaceName)s'?",
+    "Leave space": "Poistu avaruudesta",
+    "Would you like to leave the rooms in this space?": "Haluatko poistua tässä avaruudessa olevista huoneista?",
+    "You are about to leave <spaceName/>.": "Olet aikeissa poistua avaruudesta <spaceName/>.",
+    "Leave %(spaceName)s": "Poistu avaruudesta %(spaceName)s",
+    "Leave Space": "Poistu avaruudesta",
+    "Edit settings relating to your space.": "Muokkaa avaruuteesi liittyviä asetuksia.",
     "Welcome to <name/>": "Tervetuloa, tämä on <name/>",
     "Enable encryption in settings.": "Ota salaus käyttöön asetuksissa.",
-    "A private space for you and your teammates": "Yksityinen space sinulle ja tiimikavereille",
-    "A private space to organise your rooms": "Yksityinen space, jolla voit järjestää huoneesi",
+    "A private space for you and your teammates": "Yksityinen avaruus sinulle ja tiimikavereille",
+    "A private space to organise your rooms": "Yksityinen avaruus, jolla voit järjestää huoneesi",
     "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.": "Yksityiset viestisi ovat normaalisti salattu, mutta tämä huone ei ole. Yleensä tämä johtuu ei tuetusta laitteesta tai käytetystä tavasta, kuten sähköpostikutsuista.",
     "End-to-end encryption isn't enabled": "Päästä päähän -salaus ei ole käytössä",
     "You have no visible notifications.": "Sinulla ei ole näkyviä ilmoituksia.",
     "Add space": "Lisää avaruus",
-    "Want to add an existing space instead?": "Haluatko sen sijaan lisätä olemassa olevan spacen?",
-    "Add a space to a space you manage.": "Lisää space hallitsemaasi spaceen.",
-    "Anyone will be able to find and join this room, not just members of <SpaceName/>.": "Kuka tahansa voi löytää tämän huoneen ja liittyä siihen, ei pelkästään spacen <SpaceName/> jäsenet.",
-    "Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Kuka tahansa voi löytää tämän spacen ja liittyä siihen, ei pelkästään spacen <SpaceName/> jäsenet.",
-    "Anyone in <SpaceName/> will be able to find and join.": "Kuka tahansa spacessa <SpaceName/> voi löytää ja liittyä.",
+    "Want to add an existing space instead?": "Haluatko sen sijaan lisätä olemassa olevan avaruuden?",
+    "Add a space to a space you manage.": "Lisää avaruus hallitsemaasi avaruuteen.",
+    "Anyone will be able to find and join this room, not just members of <SpaceName/>.": "Kuka tahansa voi löytää tämän huoneen ja liittyä siihen, ei pelkästään avaruuden <SpaceName/> jäsenet.",
+    "Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Kuka tahansa voi löytää tämän avaruuden ja liittyä siihen, ei pelkästään avaruuden <SpaceName/> jäsenet.",
+    "Anyone in <SpaceName/> will be able to find and join.": "Kuka tahansa avaruudessa <SpaceName/> voi löytää ja liittyä.",
     "Anyone will be able to find and join this room.": "Kuka tahansa voi löytää tämän huoneen ja liittyä siihen.",
     "e.g. my-space": "esim. minun-space",
-    "Private space": "Yksityinen space",
-    "Private space (invite only)": "Yksityinen space (vain kutsulla)",
-    "Visible to space members": "Näkyvissä spacen jäsenille",
+    "Private space": "Yksityinen avaruus",
+    "Private space (invite only)": "Yksityinen avaruus (vain kutsulla)",
+    "Visible to space members": "Näkyvissä avaruuden jäsenille",
     "Autoplay videos": "Toista videot automaattisesti",
     "Autoplay GIFs": "Toista GIF-tiedostot automaattisesti",
     "Images, GIFs and videos": "Kuvat, GIF:t ja videot",
@@ -2412,11 +2412,11 @@
     "Your access token gives full access to your account. Do not share it with anyone.": "Käyttöpolettisi (ns. token) antaa täyden pääsyn tilillesi. Älä jaa sitä kenenkään kanssa.",
     "Access Token": "Käyttöpoletti",
     "Select spaces": "Valitse avaruudet",
-    "Want to add a new space instead?": "Haluatko lisätä sen sijaan uuden spacen?",
-    "Add existing space": "Lisää olemassa oleva space",
-    "Space selection": "Spacen valinta",
+    "Want to add a new space instead?": "Haluatko lisätä sen sijaan uuden avaruuden?",
+    "Add existing space": "Lisää olemassa oleva avaruus",
+    "Space selection": "Avaruuden valinta",
     "Search for rooms": "Etsi huoneita",
-    "Search for spaces": "Etsi spaceja",
+    "Search for spaces": "Etsi avaruuksia",
     "Global": "Yleiset",
     "New keyword": "Uusi avainsana",
     "Keyword": "Avainsana",
@@ -2440,25 +2440,25 @@
     "%(date)s at %(time)s": "%(date)s klo %(time)s",
     "Spaces": "Avaruudet",
     "Show all rooms": "Näytä kaikki huoneet",
-    "To join a space you'll need an invite.": "Liittyäksesi spaceen tarvitset kutsun.",
-    "Your private space": "Yksityinen spacesi",
-    "Your public space": "Julkinen spacesi",
+    "To join a space you'll need an invite.": "Liittyäksesi avaruuteen tarvitset kutsun.",
+    "Your private space": "Yksityinen avaruutesi",
+    "Your public space": "Julkinen avaruutesi",
     "Invite only, best for yourself or teams": "Vain kutsulla, paras itsellesi tai tiimeille",
-    "Open space for anyone, best for communities": "Avoin space kaikille, paras yhteisöille",
+    "Open space for anyone, best for communities": "Avoin avaruus kaikille, paras yhteisöille",
     "Give feedback.": "Anna palautetta.",
-    "Spaces feedback": "Palautetta Spaceista",
-    "Please enter a name for the space": "Anna nimi spacelle",
+    "Spaces feedback": "Palautetta avaruuksista",
+    "Please enter a name for the space": "Anna nimi avaruudelle",
     "Address": "Osoite",
     "Spaces are a new feature.": "Avaruudet ovat uusi ominaisuus.",
-    "Create a new space": "Luo uusi space",
-    "You do not have permissions to create new rooms in this space": "Sinulla ei ole oikeuksia luoda uusia huoneita tässä spacessa",
-    "Create a space": "Luo space",
+    "Create a new space": "Luo uusi avaruus",
+    "You do not have permissions to create new rooms in this space": "Sinulla ei ole oikeuksia luoda uusia huoneita tässä avaruudessa",
+    "Create a space": "Luo avaruus",
     "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s poisti viestin kiinnityksen tästä huoneesta. Katso kaikki kiinnitetyt viestit.",
     "Sends the given message as a spoiler": "Lähettää annetun viestin spoilerina",
     "I'll verify later": "Vahvistan myöhemmin",
     "Skip verification for now": "Ohita vahvistus toistaiseksi",
     "Invite by username": "Kutsu käyttäjänimellä",
-    "Failed to invite the following users to your space: %(csvUsers)s": "Seuraavien käyttäjien kutsuminen spaceesi epäonnistui: %(csvUsers)s",
+    "Failed to invite the following users to your space: %(csvUsers)s": "Seuraavien käyttäjien kutsuminen avaruuteen epäonnistui: %(csvUsers)s",
     "Who are you working with?": "Kenen kanssa työskentelet?",
     "Results": "Tulokset",
     "Suggested": "Ehdotettu",
@@ -2481,7 +2481,7 @@
     "Error saving notification preferences": "Virhe tallentaessa ilmoitusasetuksia",
     "Private (invite only)": "Yksityinen (vain kutsulla)",
     "Workspace: <networkLink/>": "Työtila: <networkLink/>",
-    "This may be useful for public spaces.": "Tämä voi olla hyödyllinen julkisille spaceille.",
+    "This may be useful for public spaces.": "Tämä voi olla hyödyllinen julkisille avaruuksille.",
     "Invite with email or username": "Kutsu sähköpostiosoitteella tai käyttäjänimellä",
     "Use Ctrl + F to search timeline": "Ctrl + F hakee aikajanalta",
     "%(senderName)s unpinned <a>a message</a> from this room. See all <b>pinned messages</b>.": "%(senderName)s poisti <a>viestin</a> kiinnityksen tästä huoneesta. Katso kaikki <b>kiinnitetyt viestit</b>.",
@@ -2544,8 +2544,8 @@
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Hallitse sisäänkirjattuja laitteitasi alapuolella. Laitteen nimi näkyy kaikille, joiden kanssa olet yhteydessä.",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Jaa anonyymia tietoa auttaaksesi ongelmien tunnistamisessa. Ei mitään henkilökohtaista. Ei kolmansia osapuolia.",
     "Okay": "OK",
-    "Updating spaces... (%(progress)s out of %(count)s)|one": "Päivitetään spacea...",
-    "Updating spaces... (%(progress)s out of %(count)s)|other": "Päivitetään spaceja... (%(progress)s/%(count)s)",
+    "Updating spaces... (%(progress)s out of %(count)s)|one": "Päivitetään avaruutta...",
+    "Updating spaces... (%(progress)s out of %(count)s)|other": "Päivitetään avaruuksia... (%(progress)s/%(count)s)",
     "Use high contrast": "Käytä suurta kontrastia",
     "To view all keyboard shortcuts, <a>click here</a>.": "Katso kaikki pikanäppäimet <a>napsauttamalla tästä</a>.",
     "You aren't signed into any other devices.": "Et ole kirjautunut yhdellekään muulle laitteelle.",
@@ -2580,45 +2580,45 @@
     "Verified devices": "Vahvistetut laitteet",
     "This device": "Tämä laite",
     "Files": "Tiedostot",
-    "Toggle space panel": "Vaihda space-paneeli",
-    "Space Autocomplete": "Spacejen automaattinen täydennys",
-    "What are some things you want to discuss in %(spaceName)s?": "Mistä asioista haluat puhua spacessa %(spaceName)s?",
-    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Valitse lisättävät huoneet tai keskustelut. Tämä space on vain sinulle, kenellekkään ei tiedoteta siitä. Voit lisätä lisää myöhemmin.",
-    "Failed to create initial space rooms": "Tapahtui virhe luodessa huoneita uutta spacea varten",
-    "Your server does not support showing space hierarchies.": "Palvelimesi ei tue space-hierarkioiden esittämistä.",
-    "This space is not public. You will not be able to rejoin without an invite.": "Tämä space ei ole julkinen. Et voi liittyä uudelleen ilman kutsua.",
-    "Other rooms in %(spaceName)s": "Muut huoneet spacessa %(spaceName)s",
+    "Toggle space panel": "Avaruuspaneeli päälle/pois",
+    "Space Autocomplete": "Avaruuksien automaattinen täydennys",
+    "What are some things you want to discuss in %(spaceName)s?": "Mistä asioista haluat puhua avaruudessa %(spaceName)s?",
+    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Valitse lisättävät huoneet tai keskustelut. Tämä avaruus on vain sinulle, kenellekään ei tiedoteta siitä. Voit lisätä lisää myöhemmin.",
+    "Failed to create initial space rooms": "Tapahtui virhe luodessa huoneita uutta avaruutta varten",
+    "Your server does not support showing space hierarchies.": "Palvelimesi ei tue avaruushierarkioiden esittämistä.",
+    "This space is not public. You will not be able to rejoin without an invite.": "Tämä avaruus ei ole julkinen. Et voi liittyä uudelleen ilman kutsua.",
+    "Other rooms in %(spaceName)s": "Muut huoneet avaruudessa %(spaceName)s",
     "Spaces you're in": "Avaruudet, joissa olet",
-    "This groups your chats with members of this space. Turning this off will hide those chats from your view of %(spaceName)s.": "Tämä ryhmittelee yksityisviestisi spacen jäsenten kanssa. Tämän poistaminen päältä piilottaa kyseiset huoneet sinun näkymästäsi spacessa %(spaceName)s.",
+    "This groups your chats with members of this space. Turning this off will hide those chats from your view of %(spaceName)s.": "Tämä ryhmittelee yksityisviestisi avaruuden jäsenten kanssa. Tämän poistaminen päältä piilottaa kyseiset keskustelut sinun näkymästäsi avaruudessa %(spaceName)s.",
     "Other spaces or rooms you might not know": "Muut avaruudet tai huoneet, joita et ehkä tunne",
     "Spaces you know that contain this space": "Tuntemasi avaruudet, jotka sisältävät tämän avaruuden",
     "Spaces you know that contain this room": "Tuntemasi avaruudet, jotka sisältävät tämän huoneen",
-    "Decide which spaces can access this room. If a space is selected, its members can find and join <RoomName/>.": "Valitse, millä spaceilla on pääsyoikeus tähän huoneeseen. Jos space valitaan, sen jäsenet voivat löytää ja liittyä huoneeseen <RoomName/>.",
-    "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "Olet ainoa ylläpitäjä joissain huoneissa tai spaceissa, joista haluat lähteä. Niistä lähteminen jättää ne ilman yhtään ylläpitäjää.",
-    "You're the only admin of this space. Leaving it will mean no one has control over it.": "Olet tämän spacen ainoa ylläpitäjä. Spacesta lähteminen tarkoittaa, että kenelläkään ei ole oikeuksia hallita sitä.",
-    "Adding spaces has moved.": "Spacejen lisääminen on siirtynyt.",
-    "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.": "Et voi perua tätä muutosta, koska olet alentamassa itseäsi. Jos olet viimeinen oikeutettu henkilö tässä spacessa, oikeuksia ei voi enää saada takaisin.",
-    "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Aseta osoitteita tälle spacelle, jotta käyttäjät löytävät tämän spacen kotipalvelimeltasi (%(localDomain)s)",
-    "This space has no local addresses": "Tällä spacella ei ole paikallista osoitetta",
-    "%(spaceName)s menu": "%(spaceName)s valikko",
-    "You do not have permissions to add rooms to this space": "Sinulla ei ole oikeuksia lisätä huoneita tähän spaceen",
-    "You do not have permissions to invite people to this space": "Sinulla ei ole oikeuksia kutsua ihmisiä tähän spaceen",
-    "Invite to space": "Kutsu spaceen",
-    "Select the roles required to change various parts of the space": "Valitse roolit, jotka vaaditaan spacen eri osioiden muuttamiseen",
-    "Manage rooms in this space": "Hallinnoi huoneita tässä spacessa",
-    "Change main address for the space": "Vaihda spacen pääosoite",
-    "Rooms outside of a space": "Huoneet, jotka eivät kuulu mihinkään spaceen",
-    "Show all your rooms in Home, even if they're in a space.": "Näytä kaikki huoneesi kotinäkymässä, vaikka ne olisivat jossain muussa spacessa.",
+    "Decide which spaces can access this room. If a space is selected, its members can find and join <RoomName/>.": "Valitse, millä avaruuksilla on pääsyoikeus tähän huoneeseen. Jos avaruus valitaan, sen jäsenet voivat löytää ja liittyä huoneeseen <RoomName/>.",
+    "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "Olet ainoa ylläpitäjä joissain huoneissa tai avaruuksissa, joista haluat lähteä. Niistä lähteminen jättää ne ilman yhtään ylläpitäjää.",
+    "You're the only admin of this space. Leaving it will mean no one has control over it.": "Olet tämän avaruuden ainoa ylläpitäjä. Avaruudesta lähteminen tarkoittaa, että kenelläkään ei ole oikeuksia hallita sitä.",
+    "Adding spaces has moved.": "Avaruuksien lisääminen on siirtynyt.",
+    "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.": "Et voi perua tätä muutosta, koska olet alentamassa itseäsi. Jos olet viimeinen oikeutettu henkilö tässä avaruudessa, oikeuksia ei voi enää saada takaisin.",
+    "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Aseta osoitteita tälle avaruudelle, jotta käyttäjät löytävät tämän avaruuden kotipalvelimeltasi (%(localDomain)s)",
+    "This space has no local addresses": "Tällä avaruudella ei ole paikallista osoitetta",
+    "%(spaceName)s menu": "%(spaceName)s-valikko",
+    "You do not have permissions to add rooms to this space": "Sinulla ei ole oikeuksia lisätä huoneita tähän avaruuteen",
+    "You do not have permissions to invite people to this space": "Sinulla ei ole oikeuksia kutsua ihmisiä tähän avaruuteen",
+    "Invite to space": "Kutsu avaruuteen",
+    "Select the roles required to change various parts of the space": "Valitse roolit, jotka vaaditaan avaruuden eri osioiden muuttamiseen",
+    "Manage rooms in this space": "Hallinnoi huoneita tässä avaruudessa",
+    "Change main address for the space": "Vaihda avaruuden pääosoite",
+    "Rooms outside of a space": "Huoneet, jotka eivät kuulu mihinkään avaruuteen",
+    "Show all your rooms in Home, even if they're in a space.": "Näytä kaikki huoneesi etusivulla, vaikka ne olisivat jossain muussa avaruudessa.",
     "Spaces to show": "Näytettävät avaruudet",
-    "This upgrade will allow members of selected spaces access to this room without an invite.": "Tämä päivitys antaa valittujen spacejen jäsenten liittyä tähän huoneeseen ilman kutsua.",
+    "This upgrade will allow members of selected spaces access to this room without an invite.": "Tämä päivitys antaa valittujen avaruuksien jäsenten liittyä tähän huoneeseen ilman kutsua.",
     "This room is in some spaces you're not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Tämä huone on joissain avaruuksissa, joissa et ole ylläpitäjänä. Ne avaruudet tulevat edelleen näyttämään vanhan huoneen, mutta ihmisiä kehotetaan liittymään uuteen.",
-    "Anyone in a space can find and join. You can select multiple spaces.": "Kuka tahansa spacessa voi löytää ja liittyä. Voit valita monta spacea.",
-    "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Kuka tahansa spacessa <spaceName/> voi löytää ja liittyä. Voit valita muitakin spaceja.",
+    "Anyone in a space can find and join. You can select multiple spaces.": "Kuka tahansa avaruudessa voi löytää ja liittyä. Voit valita monta avaruutta.",
+    "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Kuka tahansa avaruudessa <spaceName/> voi löytää ja liittyä. Voit valita muitakin avaruuksia.",
     "Spaces with access": "Avaruudet, joilla on pääsyoikeus",
-    "Anyone in a space can find and join. <a>Edit which spaces can access here.</a>": "Kuka tahansa spacen jäsen voi löytää ja liittyä. <a>Muokkaa millä spaceilla on pääsyoikeus täällä.</a>",
-    "Currently, %(count)s spaces have access|one": "Tällä hetkellä yhdellä spacella on pääsyoikeus",
-    "Currently, %(count)s spaces have access|other": "Tällä hetkellä %(count)s spacella on pääsyoikeus",
-    "Failed to update the visibility of this space": "Spacen näkyvyyden muuttaminen epäonnistui",
+    "Anyone in a space can find and join. <a>Edit which spaces can access here.</a>": "Kuka tahansa avaruuden jäsen voi löytää ja liittyä. <a>Muokkaa millä avaruuksilla on pääsyoikeus täällä.</a>",
+    "Currently, %(count)s spaces have access|one": "Tällä hetkellä yhdellä avaruudella on pääsyoikeus",
+    "Currently, %(count)s spaces have access|other": "Tällä hetkellä %(count)s avaruudella on pääsyoikeus",
+    "Failed to update the visibility of this space": "Avaruuden näkyvyyden muuttaminen epäonnistui",
     "Failed to update the history visibility of this space": "Historian näkyvyysasetusten muuttaminen epäonnistui",
     "Failed to update the guest access of this space": "Vieraiden pääsyasetusten muuttaminen epäonnistui",
     "Sends the given message with a space themed effect": "Lähetä annettu viesti avaruusteemaisella tehosteella",
@@ -2631,11 +2631,11 @@
     "Start a conversation with someone using their name, email address or username (like <userId/>).": "Aloita keskustelu jonkun kanssa käyttäen heidän sähköpostia tai käyttäjänimeä (kuten <userId/>).",
     "If you can't see who you're looking for, send them your invite link below.": "Jos et näe henkilöä jota etsit, lähetä hänelle linkki alhaalta.",
     "a new master key signature": "uusi pääsalasanan avaintunnus",
-    "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Oletko varma, että haluat päättää tämän kyselyn? Päättäminen näyttää lopulliset tulokset ja estää äänestämisen.",
+    "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Haluatko varmasti päättää tämän kyselyn? Päättäminen näyttää lopulliset tulokset ja estää äänestämisen.",
     "End Poll": "Päätä kysely",
     "Sorry, the poll did not end. Please try again.": "Valitettavasti kysely ei päättynyt. Yritä uudelleen.",
     "You won't get any notifications": "Et saa ilmoituksia",
-    "Get notified only with mentions and keywords as set up in your <a>settings</a>": "Saa ilmoitus maininnoista ja asiasanoista <a>settings</a> mukaan",
+    "Get notified only with mentions and keywords as set up in your <a>settings</a>": "Vastaanota ilmoitukset maininnoista ja asiasanoista <a>asetuksissa</a> määrittämälläsi tavalla",
     "@mentions & keywords": "@maininnat & asiasanat",
     "Forget": "Unohda",
     "Report": "Ilmoita",
@@ -3121,7 +3121,7 @@
     "%(count)s Members|other": "%(count)s jäsentä",
     "Sections to show": "Näytettävät osiot",
     "Show: Matrix rooms": "Näytä: Matrix-huoneet",
-    "Show: %(instance)s rooms (%(server)s)": "Näytä: %(instance)s huonetta (%(server)s)",
+    "Show: %(instance)s rooms (%(server)s)": "Näytä: %(instance)s-huoneet (%(server)s)",
     "Add new server…": "Lisää uusi palvelin…",
     "Remove server “%(roomServer)s”": "Poista palvelin “%(roomServer)s”",
     "Minimise": "Pienennä",
@@ -3133,5 +3133,247 @@
     "Video rooms": "Videohuoneet",
     "Moderation": "Moderointi",
     "You were disconnected from the call. (Error: %(message)s)": "Yhteytesi puheluun katkaistiin. (Virhe: %(message)s)",
-    "See when people join, leave, or are invited to this room": "Näe milloin ihmiset liittyvät, poistuvat tai tulevat kutsutuiksi tähän huoneeseen"
+    "See when people join, leave, or are invited to this room": "Näe milloin ihmiset liittyvät, poistuvat tai tulevat kutsutuiksi tähän huoneeseen",
+    "Layout type": "Asettelun tyyppi",
+    "Previous autocomplete suggestion": "Edellinen automaattitäydennyksen ehdotus",
+    "Next autocomplete suggestion": "Seuraava automaattitäydennyksen ehdotus",
+    "%(downloadButton)s or %(copyButton)s": "%(downloadButton)s tai %(copyButton)s",
+    "Event ID: %(eventId)s": "Tapahtuman ID-tunniste: %(eventId)s",
+    "Waiting for device to sign in": "Odotetaan laitteen sisäänkirjautumista",
+    "Connecting...": "Yhdistetään...",
+    "Review and approve the sign in": "Katselmoi ja hyväksy sisäänkirjautuminen",
+    "Select 'Scan QR code'": "Valitse \"Skannaa QR-koodi\"",
+    "Devices connected": "Yhdistetyt laitteet",
+    "An unexpected error occurred.": "Tapahtui odottamaton virhe.",
+    "The request was cancelled.": "Pyyntö peruttiin.",
+    "The other device isn't signed in.": "Toinen laite ei ole sisäänkirjautunut.",
+    "The other device is already signed in.": "Toinen laite on jo sisäänkirjautunut.",
+    "The request was declined on the other device.": "Pyyntö hylättiin toiselta laitteelta.",
+    "Linking with this device is not supported.": "Tämän laitteen kanssa linkittäminen ei ole tuettu.",
+    "The scanned code is invalid.": "Skannattu koodi on virheellinen.",
+    "The linking wasn't completed in the required time.": "Linkitystä ei suoritettu vaaditussa ajassa.",
+    "Stop and close": "Pysäytä ja sulje",
+    "%(securityKey)s or %(recoveryFile)s": "%(securityKey)s tai %(recoveryFile)s",
+    "Your server lacks native support": "Palvelimellasi ei ole natiivitukea",
+    "Your server has native support": "Palvelimellasi on natiivituki",
+    "Checking...": "Tarkistetaan...",
+    "Room ID: %(roomId)s": "Huoneen ID-tunniste: %(roomId)s",
+    "Get it on F-Droid": "Hanki F-Droidista",
+    "Get it on Google Play": "Hanki Google Playsta",
+    "Android": "Android",
+    "Download on the App Store": "Lataa App Storesta",
+    "%(qrCode)s or %(appLinks)s": "%(qrCode)s tai %(appLinks)s",
+    "iOS": "iOS",
+    "Download %(brand)s Desktop": "Lataa %(brand)sin työpöytäversio",
+    "Online community members": "Verkkoyhteisöjen jäsenet",
+    "Coworkers and teams": "Työkaverit ja tiimit",
+    "Friends and family": "Kaverit ja perhe",
+    "We'll help you get connected.": "Autamme sinua yhteyden muodostamisen kanssa.",
+    "Who will you chat to the most?": "Kenen kanssa keskustelet eniten?",
+    "Choose a locale": "Valitse maa-asetusto",
+    "Help": "Ohje",
+    "You don't have permission to share locations": "Sinulla ei ole oikeutta jakaa sijainteja",
+    "Message pending moderation": "Viesti odottaa moderointia",
+    "Message pending moderation: %(reason)s": "Viesti odottaa moderointia: %(reason)s",
+    "Messages in this chat will be end-to-end encrypted.": "Tässä keskustelussa olevat viestit salataan päästä päähän.",
+    "Video call ended": "Videopuhelu päättyi",
+    "%(name)s started a video call": "%(name)s aloitti videopuhelun",
+    "%(qrCode)s or %(emojiCompare)s": "%(qrCode)s tai %(emojiCompare)s",
+    "Room info": "Huoneen tiedot",
+    "Join the room to participate": "Liity huoneeseen osallistuaksesi",
+    "View chat timeline": "Näytä keskustelun aikajana",
+    "Close call": "Lopeta puhelu",
+    "You do not have permission to start voice calls": "Sinulla ei ole oikeutta aloittaa äänipuheluita",
+    "You do not have permission to start video calls": "Sinulla ei ole oikeutta aloittaa videopuheluita",
+    "Ongoing call": "Käynnissä oleva puhelu",
+    "Video call (%(brand)s)": "Videopuhelu (%(brand)s)",
+    "Video call (Jitsi)": "Videopuhelu (Jitsi)",
+    "View all": "Näytä kaikki",
+    "Improve your account security by following these recommendations": "Paranna tilisi turvallisuutta seuraamalla näitä suosituksia",
+    "Security recommendations": "Turvallisuussuositukset",
+    "Show QR code": "Näytä QR-koodi",
+    "Sign in with QR code": "Kirjaudu sisään QR-koodilla",
+    "%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s istuntoa valittu",
+    "Show": "Näytä",
+    "Filter devices": "Suodata laitteita",
+    "Inactive for %(inactiveAgeDays)s days or longer": "Passiivinen %(inactiveAgeDays)s päivää tai pidempään",
+    "Inactive": "Passiivinen",
+    "Not ready for secure messaging": "Ei valmis turvalliseen viestintään",
+    "Ready for secure messaging": "Valmis turvalliseen viestintään",
+    "All": "Kaikki",
+    "No sessions found.": "Istuntoja ei löytynyt.",
+    "No inactive sessions found.": "Passiivisia istuntoja ei löytynyt.",
+    "No unverified sessions found.": "Vahvistamattomia istuntoja ei löytynyt.",
+    "No verified sessions found.": "Vahvistettuja istuntoja ei löytynyt.",
+    "Inactive sessions": "Passiiviset istunnot",
+    "Unverified sessions": "Vahvistamattomat istunnot",
+    "Verified sessions": "Vahvistetut istunnot",
+    "Verify or sign out from this session for best security and reliability.": "Vahvista tämä istunto tai kirjaudu ulos siitä tietoturvan ja luotettavuuden parantamiseksi.",
+    "Unverified session": "Vahvistamaton istunto",
+    "This session is ready for secure messaging.": "Tämä istunto on valmis turvallista viestintää varten.",
+    "Verified session": "Vahvistettu istunto",
+    "Unknown session type": "Tuntematon istunnon tyyppi",
+    "Web session": "Web-istunto",
+    "Mobile session": "Mobiili-istunto",
+    "Desktop session": "Työpöytäistunto",
+    "Unverified": "Vahvistamaton",
+    "Verified": "Vahvistettu",
+    "Inactive for %(inactiveAgeDays)s+ days": "Passiivinen %(inactiveAgeDays)s+ päivää",
+    "Sign out of this session": "Kirjaudu ulos tästä istunnosta",
+    "Receive push notifications on this session.": "Vastaanota push-ilmoituksia tässä istunnossa.",
+    "Push notifications": "Push-ilmoitukset",
+    "Session details": "Istunnon tiedot",
+    "IP address": "IP-osoite",
+    "Browser": "Selain",
+    "Operating system": "Käyttöjärjestelmä",
+    "Model": "Malli",
+    "Device": "Laite",
+    "URL": "Verkko-osoite",
+    "Version": "Versio",
+    "Application": "Sovellus",
+    "Last activity": "Viimeisin toiminta",
+    "Please be aware that session names are also visible to people you communicate with": "Ota huomioon, että istuntonimet ovat näkyvissä myös niille ihmisille, joiden kanssa olet yhteydessä",
+    "Rename session": "Nimeä istunto uudelleen",
+    "Current session": "Nykyinen istunto",
+    "Sign out all other sessions": "Kirjaudu ulos muista istunnoista",
+    "You do not have sufficient permissions to change this.": "Oikeutesi eivät riitä tämän muuttamiseen.",
+    "Group all your people in one place.": "Ryhmitä kaikki ihmiset yhteen paikkaan.",
+    "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "Parhaan turvallisuuden varmistamiseksi vahvista istuntosi ja kirjaudu ulos istunnoista, joita et tunnista tai et enää käytä.",
+    "Other sessions": "Muut istunnot",
+    "Sessions": "Istunnot",
+    "Share your activity and status with others.": "Jaa toimintasi ja tilasi muiden kanssa.",
+    "Presence": "Läsnäolo",
+    "Spell check": "Oikeinkirjoituksen tarkistus",
+    "Enable notifications for this device": "Ota ilmoitukset käyttöön tälle laitteelle",
+    "Turn off to disable notifications on all your devices and sessions": "Poista käytöstä, niin kaikkien laitteiden ja istuntojen ilmoitukset ovat pois päältä",
+    "Enable notifications for this account": "Ota ilmoitukset käyttöön tälle tilille",
+    "Only %(count)s steps to go|one": "Vain %(count)s vaihe jäljellä",
+    "Only %(count)s steps to go|other": "Vain %(count)s vaihetta jäljellä",
+    "Welcome to %(brand)s": "Tervetuloa, tämä on %(brand)s",
+    "Find your people": "Löydä ihmiset",
+    "Community ownership": "Yhteisön omistajuus",
+    "Find your co-workers": "Löydä työkaverisi",
+    "Secure messaging for work": "Turvallista viestintää työelämään",
+    "Start your first chat": "Aloita ensimmäinen keskustelu",
+    "Secure messaging for friends and family": "Turvallista viestintää kavereiden ja perheen kanssa",
+    "We’d appreciate any feedback on how you’re finding %(brand)s.": "Arvostamme mielipidettäsi ja palautettasi %(brand)siin liittyen.",
+    "How are you finding %(brand)s so far?": "Mitä mieltä olet %(brand)sistä?",
+    "Welcome": "Tervetuloa",
+    "Enable notifications": "Käytä ilmoituksia",
+    "Don’t miss a reply or important message": "Älä anna vastauksen tai tärkeän viestin jäädä huomiotta",
+    "Turn on notifications": "Ota ilmoitukset käyttöön",
+    "Your profile": "Profiilisi",
+    "Make sure people know it’s really you": "Varmista että ihmiset tietävät, että se todella olet sinä",
+    "Set up your profile": "Aseta profiilisi",
+    "Download apps": "Lataa sovellukset",
+    "Don’t miss a thing by taking %(brand)s with you": "Älä jää mistään paitsi, ota %(brand)s mukaasi",
+    "Download %(brand)s": "Lataa %(brand)s",
+    "Find and invite your community members": "Etsi ja kutsu yhteisöjäseniä",
+    "Find people": "Etsi ihmisiä",
+    "Get stuff done by finding your teammates": "Saa asiat hoidetuksi löytämällä tiimikaverisi",
+    "Find and invite your co-workers": "Etsi ja kutsu työkavereita",
+    "Find friends": "Etsi kavereita",
+    "It’s what you’re here for, so lets get to it": "Sen vuoksi olet täällä, joten aloitetaan",
+    "Find and invite your friends": "Etsi ja kutsu ystäviä",
+    "Sorry — this call is currently full": "Pahoittelut — tämä puhelu on täynnä",
+    "You have already joined this call from another device": "Olet jo liittynyt tähän puheluun toiselta laitteelta",
+    "New session manager": "Uusi istunnonhallinta",
+    "Send read receipts": "Lähetä lukukuittaukset",
+    "Can I use text chat alongside the video call?": "Voinko käyttää tekstikeskustelua videopuhelussa?",
+    "Notifications silenced": "Ilmoitukset hiljennetty",
+    "Video call started": "Videopuhelu aloitettu",
+    "Unknown room": "Tuntematon huone",
+    "Mapbox logo": "Mapboxin logo",
+    "Location not available": "Sijainti ei ole saatavilla",
+    "Find my location": "Paikanna sijaintini",
+    "Exit fullscreen": "Poistu koko näytön tilasta",
+    "Enter fullscreen": "Siirry koko näytön tilaan",
+    "In %(spaceName)s and %(count)s other spaces.|zero": "Avaruudessa %(spaceName)s.",
+    "In spaces %(space1Name)s and %(space2Name)s.": "Avaruuksissa %(space1Name)s ja %(space2Name)s.",
+    "Video call started in %(roomName)s. (not supported by this browser)": "Videopuhelu alkoi huoneessa %(roomName)s. (ei tuettu selaimesi toimesta)",
+    "Video call started in %(roomName)s.": "Videopuhelu alkoi huoneessa %(roomName)s.",
+    "Empty room (was %(oldName)s)": "Tyhjä huone (oli %(oldName)s)",
+    "Inviting %(user)s and %(count)s others|one": "Kutsutaan %(user)s ja 1 muu",
+    "Inviting %(user)s and %(count)s others|other": "Kutsutaan %(user)s ja %(count)s muuta",
+    "Inviting %(user1)s and %(user2)s": "Kutsutaan %(user1)s ja %(user2)s",
+    "%(user)s and %(count)s others|one": "%(user)s ja 1 muu",
+    "%(user)s and %(count)s others|other": "%(user)s ja %(count)s muuta",
+    "%(user1)s and %(user2)s": "%(user1)s ja %(user2)s",
+    "Force complete": "Pakota täydennys",
+    "Open this settings tab": "Avaa tämä asetusvälilehti",
+    "Jump to end of the composer": "Hyppää viestimuokkaimen loppuun",
+    "Jump to start of the composer": "Hyppää viestimuokkaimen alkuun",
+    "Toggle Link": "Linkki päälle/pois",
+    "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|other": "Pidä salatut viestit turvallisessa välimuistissa, jotta ne näkyvät hakutuloksissa. Käytössä %(size)s, talletetaan viestit %(rooms)s huoneesta.",
+    "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|one": "Pidä salatut viestit turvallisessa välimuistissa, jotta ne näkyvät hakutuloksissa. Käytössä %(size)s, talletetaan viestit %(rooms)s huoneesta.",
+    "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.": "Varmuuskopioi salausavaimesi tilisi datan kanssa siltä varalta, että menetät pääsyn istuntoihisi. Avaimesi turvataan yksilöllisellä turva-avaimella.",
+    "Your server doesn't support disabling sending read receipts.": "Palvelimesi ei tue lukukuittausten lähettämisen poistamista käytöstä.",
+    "Next recently visited room or space": "Seuraava vierailtu huone tai avaruus",
+    "Previous recently visited room or space": "Edellinen vierailtu huone tai avaruus",
+    "Group all your rooms that aren't part of a space in one place.": "Ryhmitä kaikki huoneesi, jotka eivät ole osa avaruutta, yhteen paikkaan.",
+    "Toggle Code Block": "Koodilohko päälle/pois",
+    "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Avaruudet ovat uusi tapa ryhmitellä huoneita ja ihmisiä. Voit käyttää esiluotuja avaruuksia niiden avaruuksien lisäksi, joissa jo olet.",
+    "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Vianjäljityslokit sisältävät sovelluksen käyttödataa mukaan lukien käyttäjänimen, vierailemiesi huoneiden ID-tunnisteet tai aliasnimet, tiedon minkä käyttöliittymäelementtien kanssa olet viimeksi ollut vuorovaikutuksessa ja muiden käyttäjien käyttäjänimet. Vianjäljityslokit eivät sisällä viestejä.",
+    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ": "Jos olet tehnyt ilmoituksen ohjelmistovirheestä GitHubiin, vianjäljityslokit voivat auttaa ongelman selvittämisessä. ",
+    "You will not receive push notifications on other devices until you sign back in to them.": "Et vastaanota push-ilmoituksia muilla laitteilla, ennen kuin kirjaudut uudelleen sisään niihin.",
+    "Spaces are a new way to group rooms and people. What kind of Space do you want to create? You can change this later.": "Avaruudet ovat uusi tapa ryhmitellä huoneita ja ihmisiä. Minkälaisen avaruuden sinä haluat luoda? Voit muuttaa tätä asetusta myöhemmin.",
+    "Automatically send debug logs on decryption errors": "Lähetä vianjäljityslokit automaattisesti salauksen purkuun liittyvien virheiden tapahtuessa",
+    "Automatically send debug logs on any error": "Lähetä vianjäljityslokit automaattisesti minkä tahansa virheen tapahtuessa",
+    "Low bandwidth mode (requires compatible homeserver)": "Alhaisen kaistanleveyden tila (vaatii yhteensopivan kotipalvelimen)",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Salli QR-koodi näytettäväksi istuntohallinnassa, jotta uusia laitteita on mahdollista kirjata sisään (vaatii yhteensopivan kotipalvelimen)",
+    "Have greater visibility and control over all your sessions.": "Aiempaa parempi näkyvyys ja hallittavuus kaikkiin istuntoihisi.",
+    "Use new session manager": "Käytä uutta istuntohallintaa",
+    "Favourite Messages (under active development)": "Suosikkiviestit (aktiivisen kehityksen alaisena)",
+    "New group call experience": "Uusi ryhmäpuhelukokemus",
+    "Yes, the chat timeline is displayed alongside the video.": "Kyllä, keskustelun aikajana esitetään videon yhteydessä.",
+    "Use the “+” button in the room section of the left panel.": "Käytä “+”-painiketta vasemman paneelin huoneosiossa.",
+    "A new way to chat over voice and video in %(brand)s.": "Uusi tapa keskustella äänen ja videon välityksellä %(brand)sissä.",
+    "In %(spaceName)s and %(count)s other spaces.|one": "Avaruudessa %(spaceName)s ja %(count)s muussa avaruudessa.",
+    "In %(spaceName)s and %(count)s other spaces.|other": "Avaruudessa %(spaceName)s ja %(count)s muussa avaruudessa.",
+    "Get notifications as set up in your <a>settings</a>": "Vastaanota ilmoitukset <a>asetuksissa</a> määrittämälläsi tavalla",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Kirjaudu ulos vanhoista istunnoista (%(inactiveAgeDays)s päivää tai vanhemmat), joita et enää käytä",
+    "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "Vinkki: Jos teet virheilmoituksen, lähetä <debugLogsLink>vianjäljityslokit</debugLogsLink> jotta ongelman ratkaiseminen helpottuu.",
+    "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Katso ensin <existingIssuesLink>aiemmin raportoidut virheet Githubissa</existingIssuesLink>. Eikö samanlaista virhettä löydy? <newIssueLink>Tee uusi ilmoitus virheestä</newIssueLink>.",
+    "Search for": "Etsittävät kohteet",
+    "To join, please enable video rooms in Labs first": "Liittyäksesi ota videohuoneet käyttöön laboratorion kautta",
+    "Video rooms are always-on VoIP channels embedded within a room in %(brand)s.": "Videohuoneet ovat huoneisiin upotettuja, aina päällä olevia VoIP-kanavia %(brand)sissä.",
+    "Home options": "Etusivun valinnat",
+    "Change server ACLs": "Muuta palvelimen pääsynvalvontalistoja",
+    "Internal room ID": "Sisäinen huoneen ID-tunniste",
+    "Reset bearing to north": "Aseta suunta pohjoiseen",
+    "See when anyone posts a sticker to your active room": "Näe kun kuka tahansa lähettää tarran aktiiviseen huoneeseen",
+    "See when a sticker is posted in this room": "Näe kun tarra lähetetään tähän huoneeseen",
+    "See when people join, leave, or are invited to your active room": "Näe kun ihmiset liittyvät, poistuvat tai tulevat kutsutuiksi aktiiviseen huoneeseen",
+    "See when the avatar changes in your active room": "Näe kun kuva vaihtuu aktiivisessa huoneessa",
+    "See when the topic changes in your active room": "Näe kun aihe vaihtuu aktiivisessa huoneessa",
+    "See when the topic changes in this room": "Näe kun aihe vaihtuu tässä huoneessa",
+    "Show Labs settings": "Näytä laboratorion asetukset",
+    "Next unread room or DM": "Seuraava lukematon huone tai yksityisviesti",
+    "Previous unread room or DM": "Edellinen lukematon huone tai yksityisviesti",
+    "Previous room or DM": "Edellinen huone tai yksityisviesti",
+    "Next room or DM": "Seuraava huone tai yksityisviesti",
+    "Record the client name, version, and url to recognise sessions more easily in session manager": "Talleta asiakasohjelmiston nimi, versio ja URL-osoite tunnistaaksesi istunnot istuntohallinnassa",
+    "Show current avatar and name for users in message history": "Näytä käyttäjien nykyinen kuva ja nimi viestihistoriassa",
+    "You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device.": "Sinut on kirjattu ulos kaikilta laitteilta, etkä enää vastaanota push-ilmoituksia. Ota ilmoitukset uudelleen käyttöön kirjautumalla jokaiselle haluamallesi laitteelle.",
+    "Toggle push notifications on this session.": "Push-ilmoitukset tälle istunnolle päälle/pois.",
+    "Invite someone using their name, email address, username (like <userId/>) or <a>share this room</a>.": "Kutsu käyttäen nimeä, sähköpostiosoitetta, käyttäjänimeä (kuten <userId/>) tai <a>jaa tämä huone</a>.",
+    "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Kutsu käyttäen nimeä, sähköpostiosoitetta, käyttäjänimeä (kuten <userId/>) tai <a>jaa tämä avaruus</a>.",
+    "To search messages, look for this icon at the top of a room <icon/>": "Etsi viesteistä huoneen yläosassa olevalla kuvakkeella <icon/>",
+    "Use \"%(query)s\" to search": "Etsitään \"%(query)s\"",
+    "You may contact me if you want to follow up or to let me test out upcoming ideas": "Voitte olla yhteydessä minuun, jos haluatte keskustella palautteesta tai antaa minun testata tulevia ideoita",
+    "Your platform and username will be noted to help us use your feedback as much as we can.": "Alustasi ja käyttäjänimesi huomataan, jotta palautteesi on meille mahdollisimman käyttökelpoista.",
+    "For best security, sign out from any session that you don't recognize or use anymore.": "Parhaan turvallisuuden takaamiseksi kirjaudu ulos istunnoista, joita et tunnista tai et enää käytä.",
+    "Voice broadcasts": "Äänen yleislähetykset",
+    "Voice broadcast (under active development)": "Äänen yleislähetys (aktiivisen kehityksen alaisena)",
+    "Voice broadcast": "Äänen yleislähetys",
+    "pause voice broadcast": "keskeytä äänen yleislähetys",
+    "resume voice broadcast": "palaa äänen yleislähetykseen",
+    "play voice broadcast": "toista äänen yleislähetys",
+    "Yes, stop broadcast": "Kyllä, pysäytä yleislähetys",
+    "Stop live broadcasting?": "Pysäytetäänkö liveyleislähetys?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Joku toinen tallentaa jo äänen yleislähetystä. Odota äänen yleislähetyksen päättymistä, jotta voit aloittaa uuden.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Tallennat jo äänen yleislähetystä. Lopeta nykyinen äänen yleislähetys aloittaaksesi uuden.",
+    "Can't start a new voice broadcast": "Uutta äänen yleislähetystä ei voi käynnistää",
+    "Command error: Unable to find rendering type (%(renderingType)s)": "Komentovirhe: Renderöintityyppiä (%(renderingType)s) ei löydy",
+    "You need to be able to kick users to do that.": "Sinun täytyy pystyä potkia käyttäjiä voidaksesi tehdä tuon."
 }
diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json
index f1751965e7d..b744bf262e2 100644
--- a/src/i18n/strings/fr.json
+++ b/src/i18n/strings/fr.json
@@ -1578,7 +1578,7 @@
     "Click the button below to confirm your identity.": "Cliquez sur le bouton ci-dessous pour confirmer votre identité.",
     "Confirm encryption setup": "Confirmer la configuration du chiffrement",
     "Click the button below to confirm setting up encryption.": "Cliquez sur le bouton ci-dessous pour confirmer la configuration du chiffrement.",
-    "QR Code": "Code QR",
+    "QR Code": "QR code",
     "Dismiss read marker and jump to bottom": "Ignorer le signet de lecture et aller en bas",
     "Jump to oldest unread message": "Aller au plus ancien message non lu",
     "Upload a file": "Envoyer un fichier",
@@ -2946,7 +2946,7 @@
     "You cannot place calls without a connection to the server.": "Vous ne pouvez pas passer d’appels sans connexion au serveur.",
     "Connectivity to the server has been lost": "La connexion au serveur a été perdue",
     "You cannot place calls in this browser.": "Vous ne pouvez pas passer d’appels dans ce navigateur.",
-    "Calls are unsupported": "Les appels ne sont pas supportés",
+    "Calls are unsupported": "Les appels ne sont pas pris en charge",
     "Recent searches": "Recherches récentes",
     "To search messages, look for this icon at the top of a room <icon/>": "Pour chercher des messages, repérez cette icône en d’un salon <icon/>",
     "Other searches": "Autres recherches",
@@ -2995,7 +2995,7 @@
     "You cancelled verification on your other device.": "Vous avez annulé la vérification dans votre autre appareil.",
     "Almost there! Is your other device showing the same shield?": "On y est presque ! Votre autre appareil affiche-t-il le même bouclier ?",
     "Verify this device by completing one of the following:": "Vérifiez cet appareil en réalisant une des actions suivantes :",
-    "The device 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.": "L’appareil que vous essayez de vérifier ne prend pas en charge les codes QR ou la vérification d’émojis, qui sont les méthodes prises en charge par %(brand)s. Essayez avec un autre client.",
+    "The device 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.": "L’appareil que vous essayez de vérifier ne prend pas en charge les QR codes ou la vérification d’émojis, qui sont les méthodes prises en charge par %(brand)s. Essayez avec un autre client.",
     "To proceed, please accept the verification request on your other device.": "Pour continuer, veuillez accepter la demande de vérification sur votre autre appareil.",
     "From a thread": "Depuis un fil de discussion",
     "Send reactions": "Envoyer des réactions",
@@ -3501,12 +3501,12 @@
     "Use new session manager (under active development)": "Utiliser un nouveau gestionnaire de session (en cours de développement)",
     "Interactively verify by emoji": "Vérifier de façon interactive avec des émojis",
     "Manually verify by text": "Vérifier manuellement avec un texte",
-    "View all": "Voir tout",
+    "View all": "Tout voir",
     "Improve your account security by following these recommendations": "Améliorez la sécurité de votre compte à l’aide de ces recommandations",
     "Security recommendations": "Recommandations de sécurité",
     "Filter devices": "Filtrer les appareils",
     "Inactive for %(inactiveAgeDays)s days or longer": "Inactif depuis au moins %(inactiveAgeDays)s jours",
-    "Inactive": "Inactif",
+    "Inactive": "Inactive",
     "Not ready for secure messaging": "Pas prêt pour une messagerie sécurisée",
     "Ready for secure messaging": "Prêt pour une messagerie sécurisée",
     "All": "Tout",
@@ -3524,8 +3524,8 @@
     "Unverified session": "Session non vérifiée",
     "This session is ready for secure messaging.": "Cette session est prête pour l’envoi de messages sécurisés.",
     "Verified session": "Session vérifiée",
-    "Unverified": "Non vérifié",
-    "Verified": "Vérifié",
+    "Unverified": "Non vérifiée",
+    "Verified": "Vérifiée",
     "Inactive for %(inactiveAgeDays)s+ days": "Inactif depuis plus de %(inactiveAgeDays)s jours",
     "Toggle device details": "Afficher/masquer les détails de l’appareil",
     "Session details": "Détails de session",
@@ -3599,7 +3599,7 @@
     "Desktop session": "Session de bureau",
     "Video call started": "Appel vidéo commencé",
     "Unknown room": "Salon inconnu",
-    "Video call started in %(roomName)s. (not supported by this browser)": "Appel vidéo commencé dans %(roomName)s. (non supporté par ce navigateur)",
+    "Video call started in %(roomName)s. (not supported by this browser)": "Appel vidéo commencé dans %(roomName)s. (non pris en charge par ce navigateur)",
     "Video call started in %(roomName)s.": "Appel vidéo commencé dans %(roomName)s.",
     "Close call": "Terminer l’appel",
     "Layout type": "Type de mise en page",
@@ -3631,5 +3631,54 @@
     "Italic": "Italique",
     "You have already joined this call from another device": "Vous avez déjà rejoint cet appel depuis un autre appareil",
     "Try out the rich text editor (plain text mode coming soon)": "Essayer l’éditeur de texte formaté (le mode texte brut arrive bientôt)",
-    "stop voice broadcast": "arrêter la diffusion audio"
+    "stop voice broadcast": "arrêter la diffusion audio",
+    "Completing set up of your new device": "Fin de la configuration de votre nouvel appareil",
+    "Waiting for device to sign in": "En attente de connexion de l’appareil",
+    "Connecting...": "Connexion…",
+    "Review and approve the sign in": "Vérifier et autoriser la connexion",
+    "Select 'Scan QR code'": "Sélectionnez « Scanner le QR code »",
+    "Start at the sign in screen": "Démarrez à l’écran de connexion",
+    "Scan the QR code below with your device that's signed out.": "Scannez le QR code ci-dessous avec l’appareil qui n’est pas connecté.",
+    "By approving access for this device, it will have full access to your account.": "En autorisant l’accès pour cet appareil, il aura un accès complet à votre compte.",
+    "Check that the code below matches with your other device:": "Vérifiez que le code ci-dessous correspond à celui sur votre autre appareil :",
+    "Devices connected": "Appareils connectés",
+    "The homeserver doesn't support signing in another device.": "Le serveur d’accueil ne prend pas en charge la connexion d’un autre appareil.",
+    "An unexpected error occurred.": "Une erreur inattendue s’est produite.",
+    "The request was cancelled.": "La demande a été annulée.",
+    "The other device isn't signed in.": "L’autre appareil n’est pas connecté.",
+    "The other device is already signed in.": "L’autre appareil est déjà connecté.",
+    "The request was declined on the other device.": "La requête a été refusée sur l’autre appareil.",
+    "Linking with this device is not supported.": "L’appairage avec cet appareil n’est pas pris en charge.",
+    "The scanned code is invalid.": "Le code scanné est invalide.",
+    "The linking wasn't completed in the required time.": "L’appairage n’a pas été effectué dans le temps imparti.",
+    "Sign in new device": "Connecter le nouvel appareil",
+    "Show QR code": "Afficher le QR code",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Vous pouvez utiliser cet appareil pour vous connecter sur un autre appareil avec un QR code. Vous devrez scanner le QR code affiché sur cet appareil avec votre autre appareil qui n’est pas connecté.",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Permet l’affichage d’un QR code dans le gestionnaire de sessions pour connecter un autre appareil (nécessite un serveur d’accueil compatible)",
+    "Sign in with QR code": "Se connecter avec un QR code",
+    "Browser": "Navigateur",
+    "Notifications silenced": "Notifications silencieuses",
+    "Yes, stop broadcast": "Oui, arrêter la diffusion",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Êtes-vous sûr de vouloir arrêter votre diffusion en direct ? Cela terminera la diffusion et l’enregistrement complet sera disponible dans le salon.",
+    "Stop live broadcasting?": "Arrêter la diffusion en direct ?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Une autre personne est déjà en train de réaliser une diffusion audio. Attendez que sa diffusion audio soit terminée pour en démarrer une nouvelle.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Vous n’avez pas les permissions requises pour démarrer une nouvelle diffusion audio dans ce salon. Contactez un administrateur du salon pour mettre-à-jour vos permissions.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Vous êtes déjà en train de réaliser une diffusion audio. Veuillez terminer votre diffusion audio actuelle pour en démarrer une nouvelle.",
+    "Can't start a new voice broadcast": "Impossible de commencer une nouvelle diffusion audio",
+    "play voice broadcast": "lire la diffusion audio",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Voulez-vous vraiment déconnecter %(count)s session ?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Voulez-vous vraiment déconnecter %(count)s de vos sessions ?",
+    "Show formatting": "Afficher le formatage",
+    "Show plain text": "Afficher le texte brut",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Pensez à déconnecter les anciennes sessions (%(inactiveAgeDays)s jours ou plus) que vous n’utilisez plus.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Supprimer les sessions inactives améliore la sécurité et les performance, et vous permets plus facilement d’identifier une nouvelle session suspicieuse.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Les sessions inactives sont des sessions que vous n’avez pas utilisées depuis un certain temps, mais elles reçoivent toujours les clés de chiffrement.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Vous devriez vous tout particulièrement vous assurer que vous connaissez ces sessions, car elles peuvent représenter un usage frauduleux de votre compte.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Les sessions non vérifiées se sont identifiées avec vos identifiants mais n’ont pas fait de vérification croisée.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Cela veut dire qu’elles possèdent les clés de chiffrement de vos messages précédents, et assurent aux autres utilisateurs qui communiquent avec vous au travers de ces sessions que c’est vraiment vous.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Les sessions vérifiées se sont identifiées avec vos identifiants et ont été vérifiées, soit à l’aide de votre phrase secrète de sécurité, soit par vérification croisée.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Cela leur donne un gage de confiance qu’il parle vraiment avec vous, mais cela veut également dire qu’ils pourront voir le nom de la session que vous choisirez ici.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Dans vos conversations privées et vos salons, les autres utilisateurs pourront voir la liste complète de vos sessions.",
+    "Renaming sessions": "Renommer les sessions",
+    "Please be aware that session names are also visible to people you communicate with.": "Soyez conscient que les noms de sessions sont également visibles pour les personnes avec lesquelles vous communiquez."
 }
diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json
index de6d822e02d..fc6f456e8b3 100644
--- a/src/i18n/strings/hu.json
+++ b/src/i18n/strings/hu.json
@@ -3659,5 +3659,25 @@
     "Show QR code": "QR kód beolvasása",
     "Sign in with QR code": "Belépés QR kóddal",
     "Browser": "Böngésző",
-    "Yes, stop broadcast": "Igen, közvetítés megállítása"
+    "Yes, stop broadcast": "Igen, közvetítés megállítása",
+    "Review and approve the sign in": "Belépés áttekintése és engedélyezés",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Ennek az eszköznek a felhasználásával és a QR kóddal beléptethet egy másik eszközt. Be kell olvasni a QR kódot azon az eszközön ami még nincs belépve.",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "QR kód megjelenítésének engedélyezése a munkamenet kezelőben, hogy másik eszközzel bejelentkezhessen vele (kompatibilis matrix szervert igényel)",
+    "play voice broadcast": "hang közvetítés lejátszása",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Biztos, hogy befejezi az élő közvetítést? Ez befejezi a közvetítést és a felvétel az egész szoba számára elérhető lesz.",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Biztos, hogy ki szeretne lépni %(count)s munkamenetből?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Biztos, hogy ki szeretne lépni %(count)s munkamenetből?",
+    "Show formatting": "Formázás megjelenítése",
+    "Show plain text": "Sima szöveg megjelenítése",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Fontolja meg a kijelentkezést a régi munkamenetekből (%(inactiveAgeDays)s napnál régebbi) ha már nem használja azokat.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Az inaktív munkamenetek törlése növeli a biztonságot és a sebességet, valamint egyszerűbbé teszi a gyanús munkamenetek felismerését.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Az inaktív munkamenet olyan munkamenet amit már régóta nem használ de még mindig megkapják a titkosítási kulcsokat.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Egészen bizonyosodjon meg arról, hogy ismeri ezeket a munkameneteket mivel elképzelhető, hogy jogosulatlan fiókhasználatot jeleznek.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Az ellenőrizetlen munkamenetek olyanok amivel a jelszavával bejelentkeztek de nem lett ellenőrizve.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Ez azt jelenti, hogy ott vannak a titkosítási kulcsok a régi üzeneteihez és megerősíti a többi felhasználó felé, hogy azon munkameneten keresztül Önnel beszélgetnek.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Az ellenőrzött munkamenetek a jelszavával vannak bejelentkezve és ellenőrizve, vagy a biztonsági jelmondattal vagy kereszt-ellenőrzéssel.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Ez bizonyosságot adhat nekik abban, hogy valóban Önnel beszélnek, de azt is jelenti, hogy az itt beírt munkamenet nevét el tudják olvasni.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Mások a közvetlen beszélgetésekben és szobákban, amiben jelen van, láthatják a munkameneteinek a listáját.",
+    "Renaming sessions": "Munkamenet átnevezése",
+    "Please be aware that session names are also visible to people you communicate with.": "Fontos, hogy a munkamenet neve a kommunikációban résztvevők számára látható."
 }
diff --git a/src/i18n/strings/id.json b/src/i18n/strings/id.json
index 934cb310710..b54c1f3fe62 100644
--- a/src/i18n/strings/id.json
+++ b/src/i18n/strings/id.json
@@ -3632,5 +3632,53 @@
     "Try out the rich text editor (plain text mode coming soon)": "Coba editor teks kaya (mode teks biasa akan datang)",
     "You have already joined this call from another device": "Anda telah bergabung ke panggilan ini dari perangkat lain",
     "stop voice broadcast": "hentikan siaran suara",
-    "Notifications silenced": "Notifikasi dibisukan"
+    "Notifications silenced": "Notifikasi dibisukan",
+    "Completing set up of your new device": "Menyelesaikan penyiapan perangkat baru Anda",
+    "Waiting for device to sign in": "Menunggu perangkat untuk masuk",
+    "Connecting...": "Menghubungkan...",
+    "Review and approve the sign in": "Lihat dan perbolehkan pemasukan",
+    "Select 'Scan QR code'": "Pilih 'Pindai kode QR'",
+    "Start at the sign in screen": "Mulai dari layar masuk",
+    "Scan the QR code below with your device that's signed out.": "Pindai kode QR di bawah dengan perangkat Anda yang sudah keluar dari akun.",
+    "By approving access for this device, it will have full access to your account.": "Dengan menerima akses untuk perangkat ini, itu akan memiliki akses penuh ke akun Anda.",
+    "Check that the code below matches with your other device:": "Periksa bahwa kode di bawah cocok dengan perangkat Anda yang lain:",
+    "Devices connected": "Perangkat terhubung",
+    "The homeserver doesn't support signing in another device.": "Homeserver tidak mendukung masuk ke perangkat lain.",
+    "An unexpected error occurred.": "Sebuah kesalahan terjadi secara tidak terduga.",
+    "The request was cancelled.": "Permintaan dibatalkan.",
+    "The other device isn't signed in.": "Perangkat yang lain belum masuk.",
+    "The other device is already signed in.": "Perangkat yang lain sudah masuk.",
+    "The request was declined on the other device.": "Permintaan ditolak di perangkat yang lain.",
+    "Linking with this device is not supported.": "Penautan dengan perangkat ini tidak didukung.",
+    "The scanned code is invalid.": "Kode yang dipindai tidak absah.",
+    "The linking wasn't completed in the required time.": "Penautan tidak selesai dalam waktu yang dibutuhkan.",
+    "Sign in new device": "Masuk perangkat baru",
+    "Show QR code": "Tampilkan kode QR",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Anda dapat menggunakan perangkat ini untuk masuk ke perangkat yang baru dengan sebuah kode QR. Anda harus memindai kode QR yang ditampilkan di perangkat ini dengan perangkat Anda yang telah keluar dari akun.",
+    "Sign in with QR code": "Masuk dengan kode QR",
+    "Browser": "Peramban",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Perbolehkan sebuah kode QR untuk ditampilkan dalam pengelola sesi untuk masuk ke perangkat lain (membutuhkan homeserver yang kompatibel)",
+    "play voice broadcast": "mainkan siaran suara",
+    "Yes, stop broadcast": "Iya, hentikan siaran",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Apakah Anda yakin ingin menghentikan siaran langsung Anda? Ini akan mengakhiri siaran dan rekaman lengkap akan tersedia di ruangan.",
+    "Stop live broadcasting?": "Hentikan siaran langsung?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Ada orang lain yang saat ini merekam sebuah siaran suara. Tunggu siaran suaranya berakhir untuk memulai yang baru.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Anda tidak memiliki izin untuk memulai sebuah siaran suara di ruangan ini. Hubungi sebuah administrator ruangan untuk meningkatkan izin Anda.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Anda saat ini merekam sebuah siaran suara. Mohon akhiri siaran suara Anda saat ini untuk memulai yang baru.",
+    "Can't start a new voice broadcast": "Tidak dapat memulai sebuah siaran suara baru",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Apakah Anda yakin untuk mengeluarkan %(count)s sesi?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Apakah Anda yakin untuk mengeluarkan %(count)s sesi?",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Mengeluarkan sesi yang tidak aktif meningkatkan keamanan dan performa, dan membuatnya lebih mudah untuk Anda untuk mengenal jika sebuah sesi baru itu mencurigakan.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Sesi tidak aktif adalah sesi yang Anda belum gunakan dalam beberapa waktu, tetapi mereka masih mendapatkan kunci enkripsi.",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Pertimbangkan untuk mengeluarkan sesi lama (%(inactiveAgeDays)s hari atau lebih) yang Anda tidak gunakan lagi.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Anda seharusnya yakin bahwa Anda mengenal sesi ini karena mereka dapat berarti bahwa seseorang telah menggunakan akun Anda tanpa diketahui.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Sesi yang belum diverifikasi adalah sesi yang telah masuk dengan kredensial Anda tetapi belum diverifikasi secara silang.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Ini berarti mereka memegang kunci enkripsi untuk pesan Anda sebelumnya, dan mengonfirmasi ke pengguna lain bahwa Anda yang berkomunikasi dengan sesi ini benar-benar Anda.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Sesi yang terverifikasi telah masuk dengan kredensial Anda lalu telah diverifikasi menggunakan frasa keamanan Anda atau memverifikasi secara silang.",
+    "Show formatting": "Tampilkan formatting",
+    "Show plain text": "Tampilkan teks biasa",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Ini memberikan kepercayaan bahwa mereka benar-benar berbicara kepada Anda, tetapi ini juga berarti mereka dapat melihat nama sesi yang Anda masukkan di sini.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Pengguna lain dalam pesan langsung dan ruangan yang Anda bergabung dapat melihat daftar sesi Anda yang lengkap.",
+    "Renaming sessions": "Mengubah nama sesi",
+    "Please be aware that session names are also visible to people you communicate with.": "Harap diketahui bahwa nama sesi juga terlihat ke orang-orang yang Anda berkomunikasi."
 }
diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json
index 6c4c692e651..e1ebd3b2641 100644
--- a/src/i18n/strings/it.json
+++ b/src/i18n/strings/it.json
@@ -3565,11 +3565,11 @@
     "Sliding Sync mode (under active development, cannot be disabled)": "Modalità sincronizzazione Sliding (in sviluppo attivo, non può essere disattivata)",
     "Sign out of this session": "Disconnetti da questa sessione",
     "You need to be able to kick users to do that.": "Devi poter cacciare via utenti per completare l'azione.",
-    "Voice broadcast": "Broadcast voce",
+    "Voice broadcast": "Trasmissione vocale",
     "Please be aware that session names are also visible to people you communicate with": "Ricorda che i nomi delle sessioni sono visibili anche alle persone con cui comunichi",
     "Rename session": "Rinomina sessione",
-    "Voice broadcast (under active development)": "Broadcast voce (in sviluppo attivo)",
-    "Voice broadcasts": "Broadcast voce",
+    "Voice broadcast (under active development)": "Trasmissione vocale (in sviluppo attivo)",
+    "Voice broadcasts": "Trasmissioni vocali",
     "Element Call video rooms": "Stanze video di Element Call",
     "You do not have permission to start voice calls": "Non hai il permesso di avviare chiamate",
     "There's no one here to call": "Non c'è nessuno da chiamare qui",
@@ -3628,15 +3628,57 @@
     "Underline": "Sottolineato",
     "Italic": "Corsivo",
     "Try out the rich text editor (plain text mode coming soon)": "Prova l'editor in rich text (il testo semplice è in arrivo)",
-    "resume voice broadcast": "riprendi broadcast voce",
-    "pause voice broadcast": "sospendi broadcast voce",
+    "resume voice broadcast": "riprendi trasmissione vocale",
+    "pause voice broadcast": "sospendi trasmissione vocale",
     "You have already joined this call from another device": "Sei già in questa chiamata in un altro dispositivo",
     "Notifications silenced": "Notifiche silenziose",
     "stop voice broadcast": "ferma broadcast voce",
-    "Yes, stop broadcast": "Sì, ferma il broadcast",
-    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Vuoi davvero fermare il tuo broadcast in diretta? Verrà terminato il broadcast e la registrazione completa sarà disponibile nella stanza.",
-    "Stop live broadcasting?": "Fermare il broadcast in diretta?",
-    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Non hai l'autorizzazione necessaria per iniziare un broadcast vocale in questa stanza. Contatta un amministratore della stanza per aggiornare le tue autorizzazioni.",
-    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Stai già registrando un broadcast vocale. Termina quello in corso per iniziarne uno nuovo.",
-    "Can't start a new voice broadcast": "Impossibile iniziare un nuovo broadcast vocale"
+    "Yes, stop broadcast": "Sì, ferma la trasmissione",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Vuoi davvero fermare la tua trasmissione in diretta? Verrà terminata la trasmissione e la registrazione completa sarà disponibile nella stanza.",
+    "Stop live broadcasting?": "Fermare la trasmissione in diretta?",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Non hai l'autorizzazione necessaria per iniziare una trasmissione vocale in questa stanza. Contatta un amministratore della stanza per aggiornare le tue autorizzazioni.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Stai già registrando una trasmissione vocale. Termina quella in corso per iniziarne una nuova.",
+    "Can't start a new voice broadcast": "Impossibile iniziare una nuova trasmissione vocale",
+    "Completing set up of your new device": "Completamento configurazione nuovo dispositivo",
+    "Waiting for device to sign in": "In attesa che il dispositivo acceda",
+    "Connecting...": "Connessione...",
+    "Review and approve the sign in": "Verifica e approva l'accesso",
+    "Select 'Scan QR code'": "Seleziona 'Scansiona codice QR'",
+    "Start at the sign in screen": "Inizia nella schermata di accesso",
+    "Scan the QR code below with your device that's signed out.": "Scansiona il codice QR sottostante con il dispositivo che è disconnesso.",
+    "By approving access for this device, it will have full access to your account.": "Approvando l'accesso per questo dispositivo, avrà accesso completo al tuo account.",
+    "Check that the code below matches with your other device:": "Controlla che il codice sottostante corrisponda nell'altro dispositivo:",
+    "Devices connected": "Dispositivo connesso",
+    "The homeserver doesn't support signing in another device.": "L'homeserver non supporta l'accesso in un altro dispositivo.",
+    "An unexpected error occurred.": "Si è verificato un errore imprevisto.",
+    "The request was cancelled.": "La richiesta è stata annullata.",
+    "The other device isn't signed in.": "L'altro dispositivo non ha fatto l'accesso.",
+    "The other device is already signed in.": "L'altro dispositivo ha già fatto l'accesso.",
+    "The request was declined on the other device.": "La richiesta è stata negata sull'altro dispositivo.",
+    "Linking with this device is not supported.": "Il collegamento con questo dispositivo non è supportato.",
+    "The scanned code is invalid.": "Il codice scansionato non è valido.",
+    "The linking wasn't completed in the required time.": "Il collegamento non è stato completato nel tempo previsto.",
+    "Sign in new device": "Accedi nel nuovo dispositivo",
+    "Show QR code": "Mostra codice QR",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Puoi usare questo dispositivo per accedere in un altro con un codice QR. Dovrai scansionare il codice QR mostrato in questo dispositivo con l'altro.",
+    "Sign in with QR code": "Accedi con codice QR",
+    "Browser": "Browser",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Permetti la visualizzazione di un codice QR nel gestore di sessioni per accedere in un altro dispositivo (richiede homeserver compatibile)",
+    "play voice broadcast": "avvia trasmissione vocale",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Qualcun altro sta già registrando una trasmissione vocale. Aspetta che finisca prima di iniziarne una nuova.",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Vuoi davvero disconnetterti da %(count)s sessione?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Vuoi davvero disconnetterti da %(count)s sessioni?",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Le sessioni verificate hanno effettuato l'accesso con le tue credenziali e sono state verificate, usando la frase segreta o la verifica incrociata.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Dovresti essere particolarmente certo di riconoscere queste sessioni dato che potrebbero rappresentare un uso non autorizzato del tuo account.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Le sessioni non verificate sono quelle che hanno effettuato l'accesso con le tue credenziali ma non sono state verificate.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Ciò significa che hanno le chiavi di crittografia dei tuoi messaggi passati e confermano agli altri utenti con cui comunichi che in queste sessioni ci sei davvero tu.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "La rimozione delle sessioni inattive migliora la sicurezza e le prestazioni, e ti semplifica identificare se una sessione nuova è sospetta.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Le sessioni inattive sono quelle che non usi da un po' di tempo, ma che continuano a ricevere le chiavi di crittografia.",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Considera di disconnettere le vecchie sessioni (%(inactiveAgeDays)s giorni o più) che non usi più.",
+    "Show formatting": "Mostra formattazione",
+    "Show plain text": "Mostra testo semplice",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Ciò li rassicura che stiano veramente parlando con te, ma significa anche che possono vedere il nome della sessione che inserisci qui.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Gli altri utenti nei messaggi diretti e nelle stanze in cui entri possono vedere la lista completa delle tue sessioni.",
+    "Renaming sessions": "Rinominare le sessioni",
+    "Please be aware that session names are also visible to people you communicate with.": "Ricorda che i nomi di sessione sono anche visibili alle persone con cui comunichi."
 }
diff --git a/src/i18n/strings/lt.json b/src/i18n/strings/lt.json
index 1aba03dac02..e4550bf9e1f 100644
--- a/src/i18n/strings/lt.json
+++ b/src/i18n/strings/lt.json
@@ -352,7 +352,7 @@
     "You cannot place a call with yourself.": "Negalite skambinti patys sau.",
     "Missing roomId.": "Trūksta kambario ID.",
     "Leave room": "Išeiti iš kambario",
-    "This homeserver has hit its Monthly Active User limit.": "Šis serveris pasiekė savo Mėnesinį Aktyvių Vartotojų limitą.",
+    "This homeserver has hit its Monthly Active User limit.": "Šis serveris pasiekė savo mėnesinį aktyvių vartotojų limitą.",
     "This homeserver has exceeded one of its resource limits.": "Šis serveris viršijo vieno iš savo išteklių limitą.",
     "Unable to connect to Homeserver. Retrying...": "Nepavyksta prisijungti prie serverio. Bandoma iš naujo...",
     "Enable widget screenshots on supported widgets": "Įjungti valdiklių ekrano kopijas palaikomuose valdikliuose",
@@ -908,7 +908,7 @@
     "Anchor": "Inkaras",
     "Headphones": "Ausinės",
     "Folder": "Aplankas",
-    "Pin": "Smeigtukas",
+    "Pin": "Prisegti",
     "Other users may not trust it": "Kiti vartotojai gali nepasitikėti",
     "Upgrade": "Atnaujinti",
     "Decline (%(counter)s)": "Atsisakyti (%(counter)s)",
@@ -1352,7 +1352,7 @@
     "Ignored/Blocked": "Ignoruojami/Blokuojami",
     "Labs": "Laboratorijos",
     "Legal": "Teisiniai",
-    "Appearance Settings only affect this %(brand)s session.": "Išvaizdos Nustatymai įtakoja tik šį %(brand)s seansą.",
+    "Appearance Settings only affect this %(brand)s session.": "Išvaizdos nustatymai įtakoja tik šį %(brand)s seansą.",
     "Customise your appearance": "Tinkinti savo išvaizdą",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Nustatykite sistemoje įdiegto šrifto pavadinimą ir %(brand)s bandys jį naudoti.",
     "Modern": "Modernus",
@@ -1815,8 +1815,8 @@
     "Plain Text": "Paprastas Tekstas",
     "Invite to %(spaceName)s": "Pakvietimas į %(spaceName)s",
     "This homeserver has been blocked by its administrator.": "Šis namų serveris buvo užblokuotas jo administratoriaus.",
-    "See when the name changes in your active room": "Matyti kada aktyvaus kambario pavadinimas pasikeičia",
-    "Change the name of your active room": "Keisti aktyvaus kambario pavadinimą",
+    "See when the name changes in your active room": "Matyti kada jūsų aktyvaus kambario pavadinimas pasikeičia",
+    "Change the name of your active room": "Keisti jūsų aktyvaus kambario pavadinimą",
     "Change the name of this room": "Keisti kambario pavadinimą",
     "Change the topic of this room": "Keisti kambario temą",
     "Send stickers into this room": "Siųsti lipdukus į šį kambarį",
@@ -2318,7 +2318,7 @@
     "Your private space": "Jūsų privati erdvė",
     "Your public space": "Jūsų vieša erdvė",
     "To join a space you'll need an invite.": "Norėdami prisijungti prie erdvės, turėsite gauti kvietimą.",
-    "Invite only, best for yourself or teams": "Tik pakviesti, geriausia sau arba komandoms",
+    "Invite only, best for yourself or teams": "Tik pakviestiems, geriausia sau arba komandoms",
     "Open space for anyone, best for communities": "Atvira erdvė visiems, geriausia bendruomenėms",
     "Spaces are a new way to group rooms and people. What kind of Space do you want to create? You can change this later.": "Erdvės - tai naujas kambarių ir žmonių grupavimo būdas. Kokią erdvę norite sukurti? Vėliau tai galėsite pakeisti.",
     "Create a space": "Sukurti erdvę",
@@ -2559,5 +2559,39 @@
     "%(value)ss": "%(value)ss",
     "%(value)sm": "%(value)sm",
     "%(value)sh": "%(value)sval",
-    "%(value)sd": "%(value)sd"
+    "%(value)sd": "%(value)sd",
+    "Public rooms": "Vieši kambariai",
+    "Search for": "Ieškoti",
+    "Search for rooms or spaces": "Ieškoti kambarių arba erdvių",
+    "Original event source": "Originalus įvykio šaltinis",
+    "View source": "Peržiūrėti šaltinį",
+    "Forward": "Persiųsti",
+    "Unable to copy a link to the room to the clipboard.": "Nepavyko nukopijuoti nuorodos į kambarį į iškarpinę.",
+    "Unable to copy room link": "Nepavyko nukopijuoti kambario nurodos",
+    "Copy room link": "Kopijuoti kambario nuorodą",
+    "Manage & explore rooms": "Valdyti & tyrinėti kambarius",
+    "The above, but in any room you are joined or invited to as well": "Aukščiau išvardyti, bet ir bet kuriame kambaryje, prie kurio prisijungėte arba į kurį esate pakviestas",
+    "with state key %(stateKey)s": "su būsenos raktu %(stateKey)s",
+    "with an empty state key": "su tuščiu būsenos raktu",
+    "See when anyone posts a sticker to your active room": "Matyti, kada kas nors paskelbia lipduką jūsų aktyviame kambaryje",
+    "Remove, ban, or invite people to your active room, and make you leave": "Pašalinti, užblokuoti arba pakviesti žmones į jūsų aktyvų kambarį ir priversti jus išeiti",
+    "See when the topic changes in your active room": "Matyti, kada jūsų aktyvaus kambario tema pasikeičia",
+    "Change the topic of your active room": "Keisti jūsų aktyvaus kambario temą",
+    "See when people join, leave, or are invited to your active room": "Matyti, kada žmonės prisijungia, išeina arba yra pakviečiami į jūsų aktyvų kambarį",
+    "See <b>%(eventType)s</b> events posted to your active room": "Peržiūrėti <b>%(eventType)s</b> įvykius, paskelbtus jūsų aktyviame kambaryje",
+    "Remove, ban, or invite people to this room, and make you leave": "Pašalinti, užblokuoti arba pakviesti žmones į šį kambarį ir priversti jus išeiti",
+    "See when the name changes in this room": "Matyti, kada šiame kambaryje pasikeis pavadinimas",
+    "Light high contrast": "Šviesi didelio kontrasto",
+    "%(senderName)s has shared their location": "%(senderName)s bendrino savo būvimo vietą",
+    "%(senderName)s has started a poll - %(pollQuestion)s": "%(senderName)s pradėjo apklausą - %(pollQuestion)s",
+    "%(senderName)s has ended a poll": "%(senderName)s užbaigė apklausą",
+    "See when people join, leave, or are invited to this room": "Matyti, kada žmonės prisijungia, išeina arba yra pakviesti į šį kambarį",
+    "pause voice broadcast": "pristabdyti balso transliaciją",
+    "resume voice broadcast": "tęsti balso transliaciją",
+    "play voice broadcast": "paleisti balso transliaciją",
+    "Live": "Gyvai",
+    "Stop live broadcasting?": "Sustabdyti transliaciją gyvai?",
+    "Yes, stop broadcast": "Taip, sustabdyti transliaciją",
+    "JSON": "JSON",
+    "HTML": "HTML"
 }
diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json
index d91e1a6944f..84dbd2e2938 100644
--- a/src/i18n/strings/nl.json
+++ b/src/i18n/strings/nl.json
@@ -9,17 +9,17 @@
     "and %(count)s others...|one": "en één andere…",
     "A new password must be entered.": "Er moet een nieuw wachtwoord ingevoerd worden.",
     "An error has occurred.": "Er is een fout opgetreden.",
-    "Are you sure?": "Weet u het zeker?",
-    "Are you sure you want to reject the invitation?": "Weet u zeker dat u de uitnodiging wilt weigeren?",
+    "Are you sure?": "Weet je het zeker?",
+    "Are you sure you want to reject the invitation?": "Weet je zeker dat je de uitnodiging wilt weigeren?",
     "Attachment": "Bijlage",
     "Banned users": "Verbannen personen",
     "Bans user with given id": "Verbant de persoon met de gegeven ID",
-    "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Kan geen verbinding maken met de homeserver via HTTP wanneer er een HTTPS-URL in uw browserbalk staat. Gebruik HTTPS of <a>schakel onveilige scripts in</a>.",
+    "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Kan geen verbinding maken met de homeserver via HTTP wanneer er een HTTPS-URL in je browserbalk staat. Gebruik HTTPS of <a>schakel onveilige scripts in</a>.",
     "Change Password": "Wachtwoord wijzigen",
     "%(senderName)s changed the power level of %(powerLevelDiffText)s.": "%(senderName)s heeft het machtsniveau van %(powerLevelDiffText)s gewijzigd.",
     "%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s heeft de kamernaam gewijzigd naar %(roomName)s.",
     "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s heeft het onderwerp gewijzigd naar ‘%(topic)s’.",
-    "Changes your display nickname": "Verandert uw weergavenaam",
+    "Changes your display nickname": "Verandert je weergavenaam",
     "Command error": "Opdrachtfout",
     "Commands": "Opdrachten",
     "Confirm password": "Bevestig wachtwoord",
@@ -31,12 +31,12 @@
     "No Microphones detected": "Geen microfoons gevonden",
     "No Webcams detected": "Geen webcams gevonden",
     "No media permissions": "Geen mediatoestemmingen",
-    "You may need to manually permit %(brand)s to access your microphone/webcam": "U moet %(brand)s wellicht handmatig toestaan uw microfoon/webcam te gebruiken",
+    "You may need to manually permit %(brand)s to access your microphone/webcam": "Je moet %(brand)s wellicht handmatig toestaan je microfoon/webcam te gebruiken",
     "Default Device": "Standaardapparaat",
     "Microphone": "Microfoon",
     "Camera": "Camera",
     "Anyone": "Iedereen",
-    "Are you sure you want to leave the room '%(roomName)s'?": "Weet u zeker dat u de kamer ‘%(roomName)s’ wilt verlaten?",
+    "Are you sure you want to leave the room '%(roomName)s'?": "Weet je zeker dat je de kamer ‘%(roomName)s’ wil verlaten?",
     "Close": "Sluiten",
     "Create new room": "Nieuwe kamer aanmaken",
     "Dismiss": "Sluiten",
@@ -53,7 +53,7 @@
     "unknown error code": "onbekende foutcode",
     "Search": "Zoeken",
     "OK": "Oké",
-    "Failed to change password. Is your password correct?": "Wijzigen van wachtwoord is mislukt. Is uw wachtwoord juist?",
+    "Failed to change password. Is your password correct?": "Wijzigen van wachtwoord is mislukt. Is je wachtwoord juist?",
     "Moderator": "Moderator",
     "Name": "Naam",
     "not specified": "niet opgegeven",
@@ -96,7 +96,7 @@
     "%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(weekDayName)s %(day)s %(monthName)s, %(time)s",
     "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(weekDayName)s %(day)s %(monthName)s %(fullYear)s, %(time)s",
     "%(weekDayName)s %(time)s": "%(weekDayName)s, %(time)s",
-    "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.": "Geen verbinding met de homeserver - controleer uw verbinding, zorg ervoor dat het <a>SSL-certificaat van de homeserver</a> vertrouwd is en dat er geen browserextensies verzoeken blokkeren.",
+    "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.": "Geen verbinding met de homeserver - controleer je verbinding, zorg ervoor dat het <a>SSL-certificaat van de homeserver</a> vertrouwd is en dat er geen browserextensies verzoeken blokkeren.",
     "Cryptography": "Cryptografie",
     "Current password": "Huidig wachtwoord",
     "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s heeft de kamernaam verwijderd.",
@@ -163,11 +163,11 @@
     "Missing user_id in request": "user_id ontbreekt in verzoek",
     "New passwords don't match": "Nieuwe wachtwoorden komen niet overeen",
     "New passwords must match each other.": "Nieuwe wachtwoorden moeten overeenkomen.",
-    "Please check your email and click on the link it contains. Once this is done, click continue.": "Bekijk uw e-mail en klik op de koppeling daarin. Klik vervolgens op ‘Verder gaan’.",
+    "Please check your email and click on the link it contains. Once this is done, click continue.": "Bekijk je e-mail en klik op de koppeling daarin. Klik vervolgens op ‘Verder gaan’.",
     "Power level must be positive integer.": "Machtsniveau moet een positief geheel getal zijn.",
     "Return to login screen": "Terug naar het loginscherm",
-    "%(brand)s does not have permission to send you notifications - please check your browser settings": "%(brand)s heeft geen toestemming u meldingen te sturen - controleer uw browserinstellingen",
-    "%(brand)s was not given permission to send notifications - please try again": "%(brand)s kreeg geen toestemming u meldingen te sturen - probeer het opnieuw",
+    "%(brand)s does not have permission to send you notifications - please check your browser settings": "%(brand)s heeft geen toestemming jou meldingen te sturen - controleer je browserinstellingen",
+    "%(brand)s was not given permission to send notifications - please try again": "%(brand)s kreeg geen toestemming jou meldingen te sturen - probeer het opnieuw",
     "%(brand)s version:": "%(brand)s-versie:",
     "Room %(roomId)s not visible": "Kamer %(roomId)s is niet zichtbaar",
     "%(roomName)s does not exist.": "%(roomName)s bestaat niet.",
@@ -190,13 +190,13 @@
     "Someone": "Iemand",
     "This email address is already in use": "Dit e-mailadres is al in gebruik",
     "This email address was not found": "Dit e-mailadres is niet gevonden",
-    "The email address linked to your account must be entered.": "Het aan uw account gekoppelde e-mailadres dient ingevoerd worden.",
+    "The email address linked to your account must be entered.": "Het aan jouw account gekoppelde e-mailadres dient ingevoerd worden.",
     "This room has no local addresses": "Deze kamer heeft geen lokale adressen",
     "This room is not recognised.": "Deze kamer wordt niet herkend.",
     "This doesn't appear to be a valid email address": "Het ziet er niet naar uit dat dit een geldig e-mailadres is",
     "This phone number is already in use": "Dit telefoonnummer is al in gebruik",
     "This room is not accessible by remote Matrix servers": "Deze kamer is niet toegankelijk vanaf externe Matrix-servers",
-    "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "U probeert een punt in de tijdlijn van deze kamer te laden, maar u heeft niet voldoende rechten om het bericht te lezen.",
+    "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Je probeert een punt in de tijdlijn van deze kamer te laden, maar je hebt niet voldoende rechten om het bericht te lezen.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Geprobeerd een gegeven punt in de tijdslijn van deze kamer te laden, maar kon dit niet vinden.",
     "Unable to add email address": "Kan e-mailadres niet toevoegen",
     "Unable to remove contact information": "Kan contactinformatie niet verwijderen",
@@ -220,21 +220,21 @@
     "Voice call": "Spraakoproep",
     "Warning!": "Let op!",
     "Who can read history?": "Wie kan de geschiedenis lezen?",
-    "You cannot place a call with yourself.": "Je kunt jezelf niet bellen.",
-    "You do not have permission to post to this room": "U heeft geen toestemming actief aan deze kamer deel te nemen",
-    "You have <a>disabled</a> URL previews by default.": "U heeft URL-voorvertoningen standaard <a>uitgeschakeld</a>.",
-    "You have <a>enabled</a> URL previews by default.": "U heeft URL-voorvertoningen standaard <a>ingeschakeld</a>.",
-    "You must <a>register</a> to use this functionality": "U dient u te <a>registreren</a> om deze functie te gebruiken",
+    "You cannot place a call with yourself.": "Je kan jezelf niet bellen.",
+    "You do not have permission to post to this room": "Je hebt geen toestemming actief aan deze kamer deel te nemen",
+    "You have <a>disabled</a> URL previews by default.": "Je hebt URL-voorvertoningen standaard <a>uitgeschakeld</a>.",
+    "You have <a>enabled</a> URL previews by default.": "Je hebt URL-voorvertoningen standaard <a>ingeschakeld</a>.",
+    "You must <a>register</a> to use this functionality": "Je dient je te <a>registreren</a> om deze functie te gebruiken",
     "You need to be able to invite users to do that.": "Dit vereist de bevoegdheid om personen uit te nodigen.",
-    "You need to be logged in.": "Hiervoor dient u ingelogd te zijn.",
-    "Your email address does not appear to be associated with a Matrix ID on this Homeserver.": "Zo te zien is uw e-mailadres op deze homeserver niet aan een Matrix-ID gekoppeld.",
-    "You seem to be in a call, are you sure you want to quit?": "Het ziet er naar uit dat u in gesprek bent, weet u zeker dat u wilt afsluiten?",
-    "You seem to be uploading files, are you sure you want to quit?": "Het ziet er naar uit dat u bestanden aan het uploaden bent, weet u zeker dat u wilt afsluiten?",
-    "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.": "U zult deze veranderingen niet terug kunnen draaien, omdat u de persoon tot uw eigen machtsniveau promoveert.",
+    "You need to be logged in.": "Hiervoor dien je ingelogd te zijn.",
+    "Your email address does not appear to be associated with a Matrix ID on this Homeserver.": "Zo te zien is jouw e-mailadres op deze homeserver niet aan een Matrix-ID gekoppeld.",
+    "You seem to be in a call, are you sure you want to quit?": "Het ziet er naar uit dat je in gesprek bent, weet je zeker dat je wil afsluiten?",
+    "You seem to be uploading files, are you sure you want to quit?": "Het ziet er naar uit dat je bestanden aan het uploaden bent, weet je zeker dat je wil afsluiten?",
+    "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.": "Je zal deze veranderingen niet terug kunnen draaien, omdat je de persoon tot je eigen machtsniveau promoveert.",
     "This server does not support authentication with a phone number.": "Deze server biedt geen ondersteuning voor authenticatie met een telefoonnummer.",
     "Room": "Kamer",
     "Connectivity to the server has been lost.": "De verbinding met de server is verbroken.",
-    "Sent messages will be stored until your connection has returned.": "Verstuurde berichten zullen opgeslagen worden totdat uw verbinding hersteld is.",
+    "Sent messages will be stored until your connection has returned.": "Verstuurde berichten zullen opgeslagen worden totdat je verbinding hersteld is.",
     "(~%(count)s results)|one": "(~%(count)s resultaat)",
     "(~%(count)s results)|other": "(~%(count)s resultaten)",
     "New Password": "Nieuw wachtwoord",
@@ -247,26 +247,26 @@
     "Confirm passphrase": "Wachtwoord bevestigen",
     "Import room keys": "Kamersleutels importeren",
     "File to import": "In te lezen bestand",
-    "This process allows you to export the keys for messages you have received in encrypted rooms to a local file. You will then be able to import the file into another Matrix client in the future, so that client will also be able to decrypt these messages.": "Hiermee kunt u de sleutels van uw ontvangen berichten in versleutelde kamers naar een lokaal bestand wegschrijven. Als u dat bestand dan in een andere Matrix-cliënt inleest kan het ook die berichten ontcijferen.",
-    "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "Het opgeslagen bestand geeft toegang tot het lezen en schrijven van uw versleutelde berichten - ga er dus zorgvuldig mee om! Bescherm uzelf door hieronder een wachtwoord in te voeren, dat dan gebruikt zal worden om het bestand te versleutelen. Het is dan alleen mogelijk de gegevens te lezen met hetzelfde wachtwoord.",
-    "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "Hiermee kunt u vanuit een andere Matrix-cliënt weggeschreven versleutelingssleutels inlezen, zodat u alle berichten die de andere cliënt kon ontcijferen ook hier kunt lezen.",
+    "This process allows you to export the keys for messages you have received in encrypted rooms to a local file. You will then be able to import the file into another Matrix client in the future, so that client will also be able to decrypt these messages.": "Hiermee kan je de sleutels van je ontvangen berichten in versleutelde kamers naar een lokaal bestand wegschrijven. Als je dat bestand dan in een andere Matrix-cliënt inleest kan het ook die berichten ontcijferen.",
+    "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "Het opgeslagen bestand geeft toegang tot het lezen en schrijven van je versleutelde berichten - ga er dus zorgvuldig mee om! Bescherm jezelf door hieronder een wachtwoord in te voeren, dat dan gebruikt zal worden om het bestand te versleutelen. Het is dan alleen mogelijk de gegevens te lezen met hetzelfde wachtwoord.",
+    "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "Hiermee kan je vanuit een andere Matrix-cliënt weggeschreven versleutelingssleutels inlezen, zodat je alle berichten die de andere cliënt kon ontcijferen ook hier kan lezen.",
     "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "Het weggeschreven bestand is beveiligd met een wachtwoord. Voer dat wachtwoord hier in om het bestand te ontsleutelen.",
-    "You must join the room to see its files": "Pas na toetreding tot de kamer zult u de bestanden kunnen zien",
+    "You must join the room to see its files": "Pas na toetreding tot de kamer zal je de bestanden kunnen zien",
     "Reject all %(invitedRooms)s invites": "Alle %(invitedRooms)s de uitnodigingen weigeren",
     "Failed to invite": "Uitnodigen is mislukt",
     "Confirm Removal": "Verwijdering bevestigen",
-    "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Weet u zeker dat u deze gebeurtenis wilt verwijderen? Besef wel dat het verwijderen van een kamernaam of -onderwerp wijziging die wijziging mogelijk teniet doet.",
+    "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Weet je zeker dat je deze gebeurtenis wilt verwijderen? Besef wel dat het verwijderen van een kamernaam of -onderwerp wijziging die wijziging mogelijk teniet doet.",
     "Unknown error": "Onbekende fout",
     "Incorrect password": "Onjuist wachtwoord",
     "Unable to restore session": "Herstellen van sessie mislukt",
-    "If you have previously used a more recent version of %(brand)s, your session may be incompatible with this version. Close this window and return to the more recent version.": "Als u een recentere versie van %(brand)s heeft gebruikt is uw sessie mogelijk niet geschikt voor deze versie. Sluit dit venster en ga terug naar die recentere versie.",
+    "If you have previously used a more recent version of %(brand)s, your session may be incompatible with this version. Close this window and return to the more recent version.": "Als je een recentere versie van %(brand)s hebt gebruikt is je sessie mogelijk niet geschikt voor deze versie. Sluit dit venster en ga terug naar die recentere versie.",
     "Unknown Address": "Onbekend adres",
     "Token incorrect": "Bewijs onjuist",
     "Please enter the code it contains:": "Voer de code in die het bevat:",
     "Error decrypting image": "Fout bij het ontsleutelen van de afbeelding",
     "Error decrypting video": "Fout bij het ontsleutelen van de video",
     "Add an Integration": "Voeg een integratie toe",
-    "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "U wordt zo dadelijk naar een derdepartijwebsite gebracht zodat u de account kunt legitimeren voor gebruik met %(integrationsUrl)s. Wilt u doorgaan?",
+    "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "Je wordt zo dadelijk naar een derdepartijwebsite gebracht zodat je de account kunt legitimeren voor gebruik met %(integrationsUrl)s. Wil je doorgaan?",
     "URL Previews": "URL-voorvertoningen",
     "Drop file here to upload": "Versleep het bestand naar hier om het te uploaden",
     "Online": "Online",
@@ -277,11 +277,11 @@
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s heeft de kamerafbeelding verwijderd.",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s heeft de afbeelding van %(roomName)s veranderd",
     "Something went wrong!": "Er is iets misgegaan!",
-    "Your browser does not support the required cryptography extensions": "Uw browser ondersteunt de benodigde cryptografie-extensies niet",
+    "Your browser does not support the required cryptography extensions": "Jouw browser ondersteunt de benodigde cryptografie-extensies niet",
     "Not a valid %(brand)s keyfile": "Geen geldig %(brand)s-sleutelbestand",
     "Authentication check failed: incorrect password?": "Aanmeldingscontrole mislukt: onjuist wachtwoord?",
-    "Do you want to set an email address?": "Wilt u een e-mailadres instellen?",
-    "This will allow you to reset your password and receive notifications.": "Zo kunt u een nieuw wachtwoord instellen en meldingen ontvangen.",
+    "Do you want to set an email address?": "Wil je een e-mailadres instellen?",
+    "This will allow you to reset your password and receive notifications.": "Zo kan je een nieuw wachtwoord instellen en meldingen ontvangen.",
     "Skip": "Overslaan",
     "Define the power level of a user": "Bepaal het machtsniveau van een persoon",
     "Delete widget": "Widget verwijderen",
@@ -291,8 +291,8 @@
     "AM": "AM",
     "PM": "PM",
     "Unable to create widget.": "Kan widget niet aanmaken.",
-    "You are not in this room.": "U maakt geen deel uit van deze kamer.",
-    "You do not have permission to do that in this room.": "U heeft geen rechten om dat in deze kamer te doen.",
+    "You are not in this room.": "Je maakt geen deel uit van deze kamer.",
+    "You do not have permission to do that in this room.": "Je hebt geen rechten om dat in deze kamer te doen.",
     "Create": "Aanmaken",
     "Automatically replace plain text Emoji": "Tekst automatisch vervangen door emoji",
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s-widget toegevoegd door %(senderName)s",
@@ -301,22 +301,22 @@
     "Copied!": "Gekopieerd!",
     "Failed to copy": "Kopiëren mislukt",
     "Call Failed": "Oproep mislukt",
-    "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?": "Widgets verwijderen geldt voor alle deelnemers aan deze kamer. Weet u zeker dat u deze widget wilt verwijderen?",
+    "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?": "Widgets verwijderen geldt voor alle deelnemers aan deze kamer. Weet je zeker dat je deze widget wilt verwijderen?",
     "Delete Widget": "Widget verwijderen",
     "Restricted": "Beperkte toegang",
     "Ignored user": "Genegeerde persoon",
-    "You are now ignoring %(userId)s": "U negeert nu %(userId)s",
+    "You are now ignoring %(userId)s": "Je negeert nu %(userId)s",
     "Unignored user": "Niet-genegeerde persoon",
-    "You are no longer ignoring %(userId)s": "U negeert %(userId)s niet meer",
+    "You are no longer ignoring %(userId)s": "Je negeert %(userId)s niet meer",
     "%(senderName)s changed the pinned messages for the room.": "%(senderName)s heeft de vastgeprikte boodschappen voor de kamer gewijzigd.",
     "Send": "Versturen",
     "Message Pinning": "Berichten vastprikken",
     "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s %(day)s %(monthName)s %(fullYear)s",
     "Enable inline URL previews by default": "Inline URL-voorvertoning standaard inschakelen",
-    "Enable URL previews for this room (only affects you)": "URL-voorvertoning in dit kamer inschakelen (geldt alleen voor u)",
+    "Enable URL previews for this room (only affects you)": "URL-voorvertoning in dit kamer inschakelen (geldt alleen voor jou)",
     "Enable URL previews by default for participants in this room": "URL-voorvertoning voor alle deelnemers aan deze kamer standaard inschakelen",
     "Mirror local video feed": "Lokale videoaanvoer ook elders opslaan (spiegelen)",
-    "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.": "Zelfdegradatie is onomkeerbaar. Als u de laatste gemachtigde persoon in de kamer bent zullen deze rechten voorgoed verloren gaan.",
+    "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.": "Zelfdegradatie is onomkeerbaar. Als je de laatst gemachtigde persoon in de kamer bent zullen deze rechten voorgoed verloren gaan.",
     "Unignore": "Niet meer negeren",
     "Ignore": "Negeren",
     "Jump to read receipt": "Naar het laatst gelezen bericht gaan",
@@ -396,23 +396,23 @@
     "Leave": "Verlaten",
     "Description": "Omschrijving",
     "Old cryptography data detected": "Oude cryptografiegegevens gedetecteerd",
-    "Data from an older version of %(brand)s has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Er zijn gegevens van een oudere versie van %(brand)s gevonden, die problemen veroorzaakt hebben met de eind-tot-eind-versleuteling in de oude versie. Onlangs vanuit de oude versie verzonden eind-tot-eind-versleutelde berichten zijn mogelijk onontsleutelbaar in deze versie. Ook kunnen berichten die met deze versie uitgewisseld zijn falen. Mocht u problemen ervaren, log dan opnieuw in. Exporteer uw sleutels en importeer ze weer om uw berichtgeschiedenis te behouden.",
+    "Data from an older version of %(brand)s has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Er zijn gegevens van een oudere versie van %(brand)s gevonden, die problemen veroorzaakt hebben met de eind-tot-eind-versleuteling in de oude versie. Onlangs vanuit de oude versie verzonden eind-tot-eind-versleutelde berichten zijn mogelijk onontsleutelbaar in deze versie. Ook kunnen berichten die met deze versie uitgewisseld zijn falen. Mocht je problemen ervaren, log dan opnieuw in. Exporteer je sleutels en importeer ze weer om je berichtgeschiedenis te behouden.",
     "Warning": "Let op",
-    "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "Er is een e-mail naar %(emailAddress)s verstuurd. Klik hieronder van zodra u de koppeling erin hebt gevolgd.",
-    "Please note you are logging into the %(hs)s server, not matrix.org.": "Let op dat u inlogt bij de %(hs)s-server, niet matrix.org.",
+    "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "Er is een e-mail naar %(emailAddress)s verstuurd. Klik hieronder zodra je de koppeling erin hebt gevolgd.",
+    "Please note you are logging into the %(hs)s server, not matrix.org.": "Let op dat je inlogt bij de %(hs)s-server, niet matrix.org.",
     "This homeserver doesn't offer any login flows which are supported by this client.": "Deze homeserver heeft geen loginmethodes die door deze cliënt worden ondersteund.",
-    "Ignores a user, hiding their messages from you": "Negeert een persoon, waardoor de berichten ervan onzichtbaar voor u worden",
+    "Ignores a user, hiding their messages from you": "Negeert een persoon, waardoor de berichten ervan onzichtbaar voor jou worden",
     "Stops ignoring a user, showing their messages going forward": "Stopt het negeren van een persoon, hierdoor worden de berichten van de persoon weer zichtbaar",
     "Notify the whole room": "Laat dit aan het hele kamer weten",
     "Room Notification": "Kamermelding",
     "<a>In reply to</a> <pill>": "<a>Als antwoord op</a> <pill>",
-    "This room is not public. You will not be able to rejoin without an invite.": "Dit is geen publieke kamer. Slechts op uitnodiging zult u opnieuw kunnen toetreden.",
+    "This room is not public. You will not be able to rejoin without an invite.": "Dit is geen publieke kamer. Slechts op uitnodiging zal je opnieuw kunnen toetreden.",
     "were unbanned %(count)s times|one": "zijn ontbannen",
     "Key request sent.": "Sleutelverzoek verstuurd.",
     "Failed to remove tag %(tagName)s from room": "Verwijderen van %(tagName)s-label van kamer is mislukt",
     "Failed to add tag %(tagName)s to room": "Toevoegen van %(tagName)s-label aan kamer is mislukt",
     "Stickerpack": "Stickerpakket",
-    "You don't currently have any stickerpacks enabled": "U heeft momenteel geen stickerpakketten ingeschakeld",
+    "You don't currently have any stickerpacks enabled": "Je hebt momenteel geen stickerpakketten ingeschakeld",
     "Code": "Code",
     "Submit debug logs": "Foutenlogboek versturen",
     "Opens the Developer Tools dialog": "Opent het dialoogvenster met ontwikkelaarsgereedschap",
@@ -461,7 +461,7 @@
     "Unable to look up room ID from server": "Kon de kamer-ID niet van de server ophalen",
     "Couldn't find a matching Matrix room": "Kon geen bijbehorend Matrix-kamer vinden",
     "All Rooms": "Alle kamers",
-    "You cannot delete this message. (%(code)s)": "U kunt dit bericht niet verwijderen. (%(code)s)",
+    "You cannot delete this message. (%(code)s)": "Je kan dit bericht niet verwijderen. (%(code)s)",
     "Thursday": "Donderdag",
     "Back": "Terug",
     "Reply": "Beantwoorden",
@@ -488,33 +488,33 @@
     "Enable widget screenshots on supported widgets": "Widget-schermafbeeldingen inschakelen op ondersteunde widgets",
     "Muted Users": "Gedempte personen",
     "Popout widget": "Widget in nieuw venster openen",
-    "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Kan de gebeurtenis waarop gereageerd was niet laden. Wellicht bestaat die niet, of u heeft geen toestemming die te bekijken.",
+    "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Kan de gebeurtenis waarop gereageerd was niet laden. Wellicht bestaat die niet, of je hebt geen toestemming die te bekijken.",
     "Clear Storage and Sign Out": "Opslag wissen en uitloggen",
     "Send Logs": "Logs versturen",
     "Refresh": "Herladen",
-    "We encountered an error trying to restore your previous session.": "Het herstel van uw vorige sessie is mislukt.",
-    "Clearing your browser's storage may fix the problem, but will sign you out and cause any encrypted chat history to become unreadable.": "Het wissen van de browseropslag zal het probleem misschien verhelpen, maar zal u ook uitloggen en uw gehele versleutelde kamergeschiedenis onleesbaar maken.",
+    "We encountered an error trying to restore your previous session.": "Het herstel van je vorige sessie is mislukt.",
+    "Clearing your browser's storage may fix the problem, but will sign you out and cause any encrypted chat history to become unreadable.": "Het wissen van de browseropslag zal het probleem misschien verhelpen, maar zal je ook uitloggen en je gehele versleutelde kamergeschiedenis onleesbaar maken.",
     "Can't leave Server Notices room": "Kan servermeldingskamer niet verlaten",
-    "This room is used for important messages from the Homeserver, so you cannot leave it.": "Deze kamer is bedoeld voor belangrijke berichten van de homeserver, dus u kunt het niet verlaten.",
+    "This room is used for important messages from the Homeserver, so you cannot leave it.": "Deze kamer is bedoeld voor belangrijke berichten van de homeserver, dus je kan het niet verlaten.",
     "Terms and Conditions": "Gebruiksvoorwaarden",
-    "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "Om de %(homeserverDomain)s-homeserver te blijven gebruiken, zult u de gebruiksvoorwaarden moeten bestuderen en aanvaarden.",
+    "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "Om de %(homeserverDomain)s-homeserver te blijven gebruiken, zal je de gebruiksvoorwaarden moeten bestuderen en aanvaarden.",
     "Review terms and conditions": "Gebruiksvoorwaarden lezen",
     "Permission Required": "Toestemming vereist",
-    "You do not have permission to start a conference call in this room": "U heeft geen rechten in deze kamer om een vergadering te starten",
+    "You do not have permission to start a conference call in this room": "Je hebt geen rechten in deze kamer om een vergadering te starten",
     "This event could not be displayed": "Deze gebeurtenis kon niet weergegeven worden",
-    "Demote yourself?": "Uzelf degraderen?",
+    "Demote yourself?": "Jezelf degraderen?",
     "Demote": "Degraderen",
     "Share Link to User": "Koppeling naar persoon delen",
     "Share room": "Kamer delen",
     "System Alerts": "Systeemmeldingen",
-    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In versleutelde kamers zoals deze zijn URL-voorvertoningen standaard uitgeschakeld, om te voorkomen dat uw homeserver (waar de voorvertoningen worden gemaakt) informatie kan verzamelen over de koppelingen die u hier ziet.",
+    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In versleutelde kamers zoals deze zijn URL-voorvertoningen standaard uitgeschakeld, om te voorkomen dat jouw homeserver (waar de voorvertoningen worden gemaakt) informatie kan verzamelen over de koppelingen die je hier ziet.",
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "Als iemand een URL in een bericht invoegt, kan er een URL-voorvertoning weergegeven worden met meer informatie over de koppeling, zoals de titel, omschrijving en een afbeelding van de website.",
     "Share Room": "Kamer delen",
     "Link to most recent message": "Koppeling naar meest recente bericht",
     "Share User": "Persoon delen",
     "Share Room Message": "Bericht uit kamer delen",
     "Link to selected message": "Koppeling naar geselecteerd bericht",
-    "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "U kunt geen berichten sturen totdat u <consentLink>onze algemene voorwaarden</consentLink> heeft gelezen en aanvaard.",
+    "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "Je kan geen berichten sturen totdat je <consentLink>onze algemene voorwaarden</consentLink> hebt gelezen en aanvaard.",
     "No Audio Outputs detected": "Geen geluidsuitgangen gedetecteerd",
     "Audio Output": "Geluidsuitgang",
     "Ignored users": "Genegeerde personen",
@@ -525,7 +525,7 @@
     "Unable to load! Check your network connectivity and try again.": "Laden mislukt! Controleer je netwerktoegang en probeer het nogmaals.",
     "Prepends ¯\\_(ツ)_/¯ to a plain-text message": "Plakt ¯\\_(ツ)_/¯ vóór een bericht zonder opmaak",
     "Upgrades a room to a new version": "Upgrade deze kamer naar een nieuwere versie",
-    "Changes your display nickname in the current room only": "Stelt uw weergavenaam alleen in de huidige kamer in",
+    "Changes your display nickname in the current room only": "Stelt je weergavenaam alleen in de huidige kamer in",
     "Gets or sets the room topic": "Verkrijgt het onderwerp van de kamer of stelt het in",
     "This room has no topic.": "Deze kamer heeft geen onderwerp.",
     "Sets the room name": "Stelt de kamernaam in",
@@ -542,10 +542,10 @@
     "%(names)s and %(count)s others are typing …|other": "%(names)s en %(count)s anderen zijn aan het typen…",
     "%(names)s and %(count)s others are typing …|one": "%(names)s en nog iemand zijn aan het typen…",
     "%(names)s and %(lastPerson)s are typing …": "%(names)s en %(lastPerson)s zijn aan het typen…",
-    "Please <a>contact your service administrator</a> to continue using the service.": "Gelieve <a>contact op te nemen met uw systeembeheerder</a> om deze dienst te blijven gebruiken.",
+    "Please <a>contact your service administrator</a> to continue using the service.": "Gelieve <a>contact op te nemen met je systeembeheerder</a> om deze dienst te blijven gebruiken.",
     "Unable to connect to Homeserver. Retrying...": "Kon geen verbinding met de homeserver maken. Nieuwe poging…",
     "Unrecognised address": "Adres niet herkend",
-    "You do not have permission to invite people to this room.": "U bent niet bevoegd anderen in deze kamer uit te nodigen.",
+    "You do not have permission to invite people to this room.": "Je bent niet bevoegd anderen in deze kamer uit te nodigen.",
     "The user must be unbanned before they can be invited.": "De persoon kan niet uitgenodigd worden totdat zijn ban is verwijderd.",
     "Unknown server error": "Onbekende serverfout",
     "Use a few words, avoid common phrases": "Gebruik enkele woorden - maar geen bekende uitdrukkingen",
@@ -554,8 +554,8 @@
     "Avoid repeated words and characters": "Vermijd herhaling van woorden of tekens",
     "Avoid sequences": "Vermijd rijtjes",
     "Avoid recent years": "Vermijd recente jaren",
-    "Avoid years that are associated with you": "Vermijd jaren die op uzelf betrekking hebben",
-    "Avoid dates and years that are associated with you": "Vermijd data en jaren die op uzelf betrekking hebben",
+    "Avoid years that are associated with you": "Vermijd jaren die op jezelf betrekking hebben",
+    "Avoid dates and years that are associated with you": "Vermijd data en jaren die op jezelf betrekking hebben",
     "Capitalization doesn't help very much": "Hoofdlettergebruik helpt niet echt",
     "All-uppercase is almost as easy to guess as all-lowercase": "Enkel hoofdletters is nauwelijks moeilijker te raden dan enkel kleine letters",
     "Reversed words aren't much harder to guess": "Omgedraaide woorden zijn bijna even gemakkelijk te raden",
@@ -575,7 +575,7 @@
     "Common names and surnames are easy to guess": "Voor- en achternamen zijn eenvoudig te raden",
     "Straight rows of keys are easy to guess": "Zo’n aaneengesloten rijtje toetsen is eenvoudig te raden",
     "Short keyboard patterns are easy to guess": "Korte patronen op het toetsenbord worden gemakkelijk geraden",
-    "Please contact your homeserver administrator.": "Gelieve contact op te nemen met de beheerder van uw homeserver.",
+    "Please contact your homeserver administrator.": "Gelieve contact op te nemen met de beheerder van jouw homeserver.",
     "Render simple counters in room header": "Eenvoudige tellers bovenaan de kamer tonen",
     "Enable Emoji suggestions while typing": "Emoticons voorstellen tijdens het typen",
     "Show a placeholder for removed messages": "Verwijderde berichten vulling tonen",
@@ -592,7 +592,7 @@
     "Encrypted messages in group chats": "Versleutelde berichten in groepsgesprekken",
     "The other party cancelled the verification.": "De tegenpartij heeft de verificatie geannuleerd.",
     "Verified!": "Geverifieerd!",
-    "You've successfully verified this user.": "U heeft deze persoon geverifieerd.",
+    "You've successfully verified this user.": "Je hebt deze persoon geverifieerd.",
     "Secure messages with this user are end-to-end encrypted and not able to be read by third parties.": "Beveiligde berichten met deze persoon zijn eind-tot-eind-versleuteld en kunnen niet door derden worden gelezen.",
     "Got It": "Ik snap het",
     "Verify this user by confirming the following emoji appear on their screen.": "Verifieer deze persoon door te bevestigen dat hun scherm de volgende emoji toont.",
@@ -663,14 +663,14 @@
     "Pin": "Vastmaken",
     "Yes": "Ja",
     "No": "Nee",
-    "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "We hebben u een e-mail gestuurd om uw adres te verifiëren. Gelieve de daarin gegeven aanwijzingen op te volgen en dan op de knop hieronder te klikken.",
+    "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "We hebben je een e-mail gestuurd om je adres te verifiëren. Gelieve de daarin gegeven aanwijzingen op te volgen en dan op de knop hieronder te klikken.",
     "Email Address": "E-mailadres",
     "Delete Backup": "Back-up verwijderen",
-    "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "Weet u het zeker? U zult uw versleutelde berichten verliezen als uw sleutels niet correct geback-upt zijn.",
-    "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Versleutelde berichten zijn beveiligd met eind-tot-eind-versleuteling. Enkel de ontvanger(s) en u hebben de sleutels om deze berichten te lezen.",
+    "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "Weet je het zeker? Je zal je versleutelde berichten verliezen als je sleutels niet correct geback-upt zijn.",
+    "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Versleutelde berichten zijn beveiligd met eind-tot-eind-versleuteling. Enkel de ontvanger(s) en jij hebben de sleutels om deze berichten te lezen.",
     "Unable to load key backup status": "Kan sleutelback-upstatus niet laden",
     "Restore from Backup": "Uit back-up herstellen",
-    "Back up your keys before signing out to avoid losing them.": "Maak een back-up van uw sleutels vooraleer u zich afmeldt om ze niet te verliezen.",
+    "Back up your keys before signing out to avoid losing them.": "Maak een back-up van je sleutels voordat je jezelf afmeldt om ze niet te verliezen.",
     "Backing up %(sessionsRemaining)s keys...": "%(sessionsRemaining)s sleutels worden geback-upt…",
     "All keys backed up": "Alle sleutels zijn geback-upt",
     "Chat with %(brand)s Bot": "Met %(brand)s-robot chatten",
@@ -680,7 +680,7 @@
     "Verification code": "Verificatiecode",
     "Phone Number": "Telefoonnummer",
     "Profile picture": "Profielfoto",
-    "<a>Upgrade</a> to your own domain": "<a>Upgrade</a> naar uw eigen domein",
+    "<a>Upgrade</a> to your own domain": "<a>Upgrade</a> naar je eigen domein",
     "Display Name": "Weergavenaam",
     "Set a new account password...": "Stel een nieuw wachtwoord in…",
     "Email addresses": "E-mailadressen",
@@ -748,27 +748,27 @@
     "Join": "Deelnemen",
     "Power level": "Machtsniveau",
     "The following users may not exist": "Volgende personen bestaan mogelijk niet",
-    "Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "Kan geen profielen voor de Matrix-ID’s hieronder vinden - wilt u ze toch uitnodigen?",
+    "Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "Kan geen profielen voor de Matrix-ID’s hieronder vinden - wil je ze toch uitnodigen?",
     "Invite anyway and never warn me again": "Alsnog uitnodigen en mij nooit meer waarschuwen",
     "Invite anyway": "Alsnog uitnodigen",
-    "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Voordat u logs indient, dient u uw probleem te melden <a>in een GitHub issue</a>.",
+    "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Voordat je logs indient, dien je jouw probleem te melden <a>in een GitHub issue</a>.",
     "Unable to load commit detail: %(msg)s": "Kan commitdetail niet laden: %(msg)s",
-    "To avoid losing your chat history, you must export your room keys before logging out. You will need to go back to the newer version of %(brand)s to do this": "Om uw kamergeschiedenis niet te verliezen vóór het uitloggen dient u uw veiligheidssleutel te exporteren. Dat moet vanuit de nieuwere versie van %(brand)s",
+    "To avoid losing your chat history, you must export your room keys before logging out. You will need to go back to the newer version of %(brand)s to do this": "Om jouw kamergeschiedenis niet te verliezen vóór het uitloggen dien je jouw veiligheidssleutel te exporteren. Dat moet vanuit de nieuwere versie van %(brand)s",
     "Incompatible Database": "Incompatibele database",
     "Continue With Encryption Disabled": "Verdergaan met versleuteling uitgeschakeld",
-    "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verifieer deze persoon om als vertrouwd te markeren. Personen vertrouwen geeft u extra zekerheid bij het gebruik van eind-tot-eind-versleutelde berichten.",
+    "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verifieer deze persoon om als vertrouwd te markeren. Personen vertrouwen geeft je extra zekerheid bij het gebruik van eind-tot-eind-versleutelde berichten.",
     "Waiting for partner to confirm...": "Wachten op bevestiging van partner…",
     "Incoming Verification Request": "Inkomend verificatieverzoek",
-    "You've previously used %(brand)s on %(host)s with lazy loading of members enabled. In this version lazy loading is disabled. As the local cache is not compatible between these two settings, %(brand)s needs to resync your account.": "U heeft voorheen %(brand)s op %(host)s gebruikt met lui laden van leden ingeschakeld. In deze versie is lui laden uitgeschakeld. De lokale cache is niet compatibel tussen deze twee instellingen, zodat %(brand)s uw account moet hersynchroniseren.",
-    "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.": "Indien de andere versie van %(brand)s nog open staat in een ander tabblad kunt u dat beter sluiten, want het geeft problemen als %(brand)s op dezelfde host gelijktijdig met lui laden ingeschakeld en uitgeschakeld draait.",
+    "You've previously used %(brand)s on %(host)s with lazy loading of members enabled. In this version lazy loading is disabled. As the local cache is not compatible between these two settings, %(brand)s needs to resync your account.": "Je hebt voorheen %(brand)s op %(host)s gebruikt met lui laden van leden ingeschakeld. In deze versie is lui laden uitgeschakeld. De lokale cache is niet compatibel tussen deze twee instellingen, zodat %(brand)s je account moet hersynchroniseren.",
+    "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.": "Indien de andere versie van %(brand)s nog open staat in een ander tabblad kan je dat beter sluiten, want het geeft problemen als %(brand)s op dezelfde host gelijktijdig met lui laden ingeschakeld en uitgeschakeld draait.",
     "Incompatible local cache": "Incompatibele lokale cache",
     "Clear cache and resync": "Cache wissen en hersynchroniseren",
     "%(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 verbruikt nu 3-5x minder geheugen, door informatie over andere personen enkel te laden wanneer nodig. Even geduld, we synchroniseren met de server!",
     "Updating %(brand)s": "%(brand)s wordt bijgewerkt",
     "I don't want my encrypted messages": "Ik wil mijn versleutelde berichten niet",
     "Manually export keys": "Sleutels handmatig wegschrijven",
-    "You'll lose access to your encrypted messages": "U zult de toegang tot uw versleutelde berichten verliezen",
-    "Are you sure you want to sign out?": "Weet u zeker dat u wilt uitloggen?",
+    "You'll lose access to your encrypted messages": "Je zal de toegang tot je versleutelde berichten verliezen",
+    "Are you sure you want to sign out?": "Weet je zeker dat je wilt uitloggen?",
     "Go back": "Terug",
     "Room Settings - %(roomName)s": "Kamerinstellingen - %(roomName)s",
     "Failed to upgrade room": "Kamerupgrade mislukt",
@@ -785,7 +785,7 @@
     "Failed to decrypt %(failedCount)s sessions!": "Ontsleutelen van %(failedCount)s sessies is mislukt!",
     "<b>Warning</b>: you should only set up key backup from a trusted computer.": "<b>Let op</b>: stel sleutelback-up enkel in op een vertrouwde computer.",
     "Next": "Volgende",
-    "This homeserver would like to make sure you are not a robot.": "Deze homeserver wil graag weten of u geen robot bent.",
+    "This homeserver would like to make sure you are not a robot.": "Deze homeserver wil graag weten of je geen robot bent.",
     "Please review and accept all of the homeserver's policies": "Gelieve het beleid van de homeserver door te nemen en te aanvaarden",
     "Please review and accept the policies of this homeserver:": "Gelieve het beleid van deze homeserver door te nemen en te aanvaarden:",
     "Username": "Inlognaam",
@@ -796,34 +796,34 @@
     "Join millions for free on the largest public server": "Neem deel aan de grootste publieke server samen met miljoenen anderen",
     "Other": "Overige",
     "Couldn't load page": "Kon pagina niet laden",
-    "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.": "Uw bericht is niet verstuurd omdat deze homeserver zijn limiet voor maandelijks actieve personen heeft bereikt. <a>Neem contact op met uw beheerder</a> om de dienst te blijven gebruiken.",
-    "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.": "Uw bericht is niet verstuurd omdat deze homeserver een systeembronlimiet heeft overschreden. <a>Neem contact op met uw dienstbeheerder</a> om de dienst te blijven gebruiken.",
+    "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.": "Je bericht is niet verstuurd omdat deze homeserver zijn limiet voor maandelijks actieve personen heeft bereikt. <a>Neem contact op met je beheerder</a> om de dienst te blijven gebruiken.",
+    "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.": "Je bericht is niet verstuurd omdat deze homeserver een systeembronlimiet heeft overschreden. <a>Neem contact op met je dienstbeheerder</a> om de dienst te blijven gebruiken.",
     "Guest": "Gast",
     "Could not load user profile": "Kon persoonsprofiel niet laden",
-    "A verification email will be sent to your inbox to confirm setting your new password.": "Er is een verificatie-e-mail naar u gestuurd om het instellen van uw nieuwe wachtwoord te bevestigen.",
+    "A verification email will be sent to your inbox to confirm setting your new password.": "Er is een verificatie-e-mail naar je gestuurd om het instellen van je nieuwe wachtwoord te bevestigen.",
     "Sign in instead": "In plaats daarvan inloggen",
-    "Your password has been reset.": "Uw wachtwoord is opnieuw ingesteld.",
+    "Your password has been reset.": "Jouw wachtwoord is opnieuw ingesteld.",
     "Set a new password": "Stel een nieuw wachtwoord in",
     "Invalid homeserver discovery response": "Ongeldig homeserver-vindbaarheids-antwoord",
     "Invalid identity server discovery response": "Ongeldig identiteitsserver-vindbaarheidsantwoord",
     "General failure": "Algemene fout",
     "This homeserver does not support login using email address.": "Deze homeserver biedt geen ondersteuning voor inloggen met een e-mailadres.",
-    "Please <a>contact your service administrator</a> to continue using this service.": "Gelieve <a>contact op te nemen met uw dienstbeheerder</a> om deze dienst te blijven gebruiken.",
+    "Please <a>contact your service administrator</a> to continue using this service.": "Gelieve <a>contact op te nemen met je dienstbeheerder</a> om deze dienst te blijven gebruiken.",
     "Failed to perform homeserver discovery": "Ontdekken van homeserver is mislukt",
     "Sign in with single sign-on": "Inloggen met eenmalig inloggen",
     "Create account": "Registeren",
     "Registration has been disabled on this homeserver.": "Registratie is uitgeschakeld op deze homeserver.",
     "Unable to query for supported registration methods.": "Kan ondersteunde registratiemethoden niet opvragen.",
     "Keep going...": "Doe verder…",
-    "For maximum security, this should be different from your account password.": "Voor maximale veiligheid moet dit verschillen van uw accountwachtwoord.",
+    "For maximum security, this should be different from your account password.": "Voor maximale veiligheid moet dit verschillen van je accountwachtwoord.",
     "That matches!": "Dat komt overeen!",
     "That doesn't match.": "Dat komt niet overeen.",
     "Go back to set it again.": "Ga terug om het opnieuw in te stellen.",
     "Download": "Downloaden",
     "<b>Print it</b> and store it somewhere safe": "<b>Druk hem af</b> en bewaar hem op een veilige plaats",
     "<b>Save it</b> on a USB key or backup drive": "<b>Sla hem op</b> op een USB-stick of een back-upschijf",
-    "<b>Copy it</b> to your personal cloud storage": "<b>Kopieer hem</b> naar uw persoonlijke cloudopslag",
-    "Your keys are being backed up (the first backup could take a few minutes).": "Er wordt een back-up van uw sleutels gemaakt (de eerste back-up kan enkele minuten duren).",
+    "<b>Copy it</b> to your personal cloud storage": "<b>Kopieer hem</b> naar je persoonlijke cloudopslag",
+    "Your keys are being backed up (the first backup could take a few minutes).": "Er wordt een back-up van je sleutels gemaakt (de eerste back-up kan enkele minuten duren).",
     "Set up Secure Message Recovery": "Veilig berichtherstel instellen",
     "Starting backup...": "Back-up wordt gestart…",
     "Success!": "Klaar!",
@@ -831,38 +831,38 @@
     "Retry": "Opnieuw proberen",
     "Set up": "Instellen",
     "New Recovery Method": "Nieuwe herstelmethode",
-    "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "Als u deze nieuwe herstelmethode niet heeft ingesteld, is het mogelijk dat een aanvaller toegang tot uw account probeert te krijgen. Wijzig onmiddellijk uw wachtwoord en stel bij instellingen een nieuwe herstelmethode in.",
+    "If you didn't set the new recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "Als je deze nieuwe herstelmethode niet hebt ingesteld, is het mogelijk dat een aanvaller toegang tot jouw account probeert te krijgen. Wijzig onmiddellijk je wachtwoord en stel bij instellingen een nieuwe herstelmethode in.",
     "Go to Settings": "Ga naar instellingen",
     "Set up Secure Messages": "Beveiligde berichten instellen",
     "Recovery Method Removed": "Herstelmethode verwijderd",
-    "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "Als u de herstelmethode niet heeft verwijderd, is het mogelijk dat er een aanvaller toegang tot uw account probeert te verkrijgen. Wijzig onmiddellijk uw wachtwoord en stel bij instellingen een nieuwe herstelmethode in.",
+    "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "Als je de herstelmethode niet hebt verwijderd, is het mogelijk dat er een aanvaller toegang tot jouw account probeert te verkrijgen. Wijzig onmiddellijk je wachtwoord en stel bij instellingen een nieuwe herstelmethode in.",
     "<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.": "<b>Let op</b>: kamers bijwerken <i>voegt leden niet automatisch toe aan de nieuwe versie van de kamer</i>. Er komt in de oude kamer een koppeling naar de nieuwe, waarop leden moeten klikken om aan de nieuwe kamer deel te nemen.",
     "Adds a custom widget by URL to the room": "Voegt met een URL een aangepaste widget toe aan de kamer",
     "Please supply a https:// or http:// widget URL": "Voer een https://- of http://-widget-URL in",
-    "You cannot modify widgets in this room.": "U kunt de widgets in deze kamer niet aanpassen.",
+    "You cannot modify widgets in this room.": "Je kan de widgets in deze kamer niet aanpassen.",
     "%(senderName)s revoked the invitation for %(targetDisplayName)s to join the room.": "%(senderName)s heeft de uitnodiging aan %(targetDisplayName)s toe te treden tot deze kamer ingetrokken.",
     "Upgrade this room to the recommended room version": "Upgrade deze kamer naar de aanbevolen kamerversie",
     "This room is running room version <roomVersion />, which this homeserver has marked as <i>unstable</i>.": "Deze kamer draait op kamerversie <roomVersion />, die door deze homeserver als <i>onstabiel</i> is gemarkeerd.",
     "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Upgraden zal de huidige versie van deze kamer sluiten, en onder dezelfde naam een geüpgraded versie starten.",
     "Failed to revoke invite": "Intrekken van uitnodiging is mislukt",
-    "Could not revoke the invite. The server may be experiencing a temporary problem or you do not have sufficient permissions to revoke the invite.": "Kon de uitnodiging niet intrekken. De server ondervindt mogelijk een tijdelijk probleem, of u heeft niet het recht de uitnodiging in te trekken.",
+    "Could not revoke the invite. The server may be experiencing a temporary problem or you do not have sufficient permissions to revoke the invite.": "Kon de uitnodiging niet intrekken. De server ondervindt mogelijk een tijdelijk probleem, of je hebt niet het recht de uitnodiging in te trekken.",
     "Revoke invite": "Uitnodiging intrekken",
     "Invited by %(sender)s": "Uitgenodigd door %(sender)s",
     "Remember my selection for this widget": "Onthoud mijn keuze voor deze widget",
     "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s kon de protocollijst niet ophalen van de homeserver. Mogelijk is de homeserver te oud om derde-partij-netwerken te ondersteunen.",
     "%(brand)s failed to get the public room list.": "%(brand)s kon de lijst met publieke kamers niet verkrijgen.",
     "The homeserver may be unavailable or overloaded.": "De homeserver is mogelijk onbereikbaar of overbelast.",
-    "You have %(count)s unread notifications in a prior version of this room.|other": "U heeft %(count)s ongelezen meldingen in een vorige versie van deze kamer.",
-    "You have %(count)s unread notifications in a prior version of this room.|one": "U heeft %(count)s ongelezen meldingen in een vorige versie van deze kamer.",
+    "You have %(count)s unread notifications in a prior version of this room.|other": "Je hebt %(count)s ongelezen meldingen in een vorige versie van deze kamer.",
+    "You have %(count)s unread notifications in a prior version of this room.|one": "Je hebt %(count)s ongelezen meldingen in een vorige versie van deze kamer.",
     "The file '%(fileName)s' failed to upload.": "Het bestand ‘%(fileName)s’ kon niet geüpload worden.",
     "GitHub issue": "GitHub-melding",
     "Notes": "Opmerkingen",
-    "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.": "Alle verdere informatie die zou kunnen helpen het probleem te analyseren graag toevoegen (wat u aan het doen was, relevante kamer-ID’s, persoon-ID’s, etc.).",
+    "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.": "Alle verdere informatie die zou kunnen helpen het probleem te analyseren graag toevoegen (wat je aan het doen was, relevante kamer-ID’s, persoon-ID’s, etc.).",
     "Sign out and remove encryption keys?": "Uitloggen en versleutelingssleutels verwijderen?",
-    "To help us prevent this in future, please <a>send us logs</a>.": "<a>Stuur ons uw logs</a> om dit in de toekomst te helpen voorkomen.",
+    "To help us prevent this in future, please <a>send us logs</a>.": "<a>Stuur ons jouw logs</a> om dit in de toekomst te helpen voorkomen.",
     "Missing session data": "Sessiegegevens ontbreken",
-    "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Sommige sessiegegevens, waaronder sleutels voor versleutelde berichten, ontbreken. Herstel de sleutels uit uw back-up door u af- en weer aan te melden.",
-    "Your browser likely removed this data when running low on disk space.": "Uw browser heeft deze gegevens wellicht verwijderd toen de beschikbare opslagSpace vol was.",
+    "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Sommige sessiegegevens, waaronder sleutels voor versleutelde berichten, ontbreken. Herstel de sleutels uit je back-up door je af- en weer aan te melden.",
+    "Your browser likely removed this data when running low on disk space.": "Jouw browser heeft deze gegevens wellicht verwijderd toen de beschikbare opslagSpace vol was.",
     "Upload files (%(current)s of %(total)s)": "Bestanden versturen (%(current)s van %(total)s)",
     "Upload files": "Bestanden versturen",
     "Upload": "Versturen",
@@ -874,7 +874,7 @@
     "Cancel All": "Alles annuleren",
     "Upload Error": "Fout bij versturen van bestand",
     "The server does not support the room version specified.": "De server ondersteunt deze versie van kamers niet.",
-    "Changes your avatar in this current room only": "Verandert uw afbeelding alleen in de huidige kamer",
+    "Changes your avatar in this current room only": "Verandert je afbeelding alleen in de huidige kamer",
     "Unbans user with given ID": "Ontbant de persoon met de gegeven ID",
     "Sends the given message coloured as a rainbow": "Verstuurt het gegeven bericht in regenboogkleuren",
     "Sends the given emote coloured as a rainbow": "Verstuurt de gegeven emoticon in regenboogkleuren",
@@ -893,30 +893,30 @@
     "Reason: %(reason)s": "Reden: %(reason)s",
     "Forget this room": "Deze kamer vergeten",
     "Re-join": "Opnieuw toetreden",
-    "You were banned from %(roomName)s by %(memberName)s": "U bent uit %(roomName)s verbannen door %(memberName)s",
-    "Something went wrong with your invite to %(roomName)s": "Er is iets misgegaan met uw uitnodiging voor %(roomName)s",
-    "You can only join it with a working invite.": "U kunt de kamer enkel toetreden met een werkende uitnodiging.",
+    "You were banned from %(roomName)s by %(memberName)s": "Je bent uit %(roomName)s verbannen door %(memberName)s",
+    "Something went wrong with your invite to %(roomName)s": "Er is iets misgegaan met je uitnodiging voor %(roomName)s",
+    "You can only join it with a working invite.": "Je kan de kamer enkel toetreden met een werkende uitnodiging.",
     "Join the discussion": "Neem deel aan de kamer",
     "Try to join anyway": "Toch proberen deelnemen",
-    "Do you want to chat with %(user)s?": "Wilt u een kamer beginnen met %(user)s?",
-    "Do you want to join %(roomName)s?": "Wilt u tot %(roomName)s toetreden?",
-    "<userName/> invited you": "<userName/> heeft u uitgenodigd",
-    "You're previewing %(roomName)s. Want to join it?": "U bekijkt %(roomName)s. Wilt u eraan deelnemen?",
-    "%(roomName)s can't be previewed. Do you want to join it?": "%(roomName)s kan niet vooraf bekeken worden. Wilt u eraan deelnemen?",
+    "Do you want to chat with %(user)s?": "Wil je een kamer beginnen met %(user)s?",
+    "Do you want to join %(roomName)s?": "Wil je tot %(roomName)s toetreden?",
+    "<userName/> invited you": "<userName/> heeft je uitgenodigd",
+    "You're previewing %(roomName)s. Want to join it?": "Je bekijkt %(roomName)s. Wilt je eraan deelnemen?",
+    "%(roomName)s can't be previewed. Do you want to join it?": "%(roomName)s kan niet vooraf bekeken worden. Wil je eraan deelnemen?",
     "This room has already been upgraded.": "Deze kamer is reeds geüpgraded.",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>heeft gereageerd met %(shortName)s</reactedWith>",
     "edited": "bewerkt",
     "Rotate Left": "Links draaien",
     "Rotate Right": "Rechts draaien",
     "Edit message": "Bericht bewerken",
-    "Use an email address to recover your account": "Gebruik een e-mailadres om uw account te herstellen",
+    "Use an email address to recover your account": "Gebruik een e-mailadres om je account te herstellen",
     "Enter email address (required on this homeserver)": "Voer een e-mailadres in (vereist op deze homeserver)",
     "Doesn't look like a valid email address": "Dit lijkt geen geldig e-mailadres",
     "Enter password": "Voer wachtwoord in",
     "Password is allowed, but unsafe": "Wachtwoord is toegestaan, maar onveilig",
     "Nice, strong password!": "Dit is een sterk wachtwoord!",
     "Passwords don't match": "Wachtwoorden komen niet overeen",
-    "Other users can invite you to rooms using your contact details": "Andere personen kunnen u in kamers uitnodigen op basis van uw contactgegevens",
+    "Other users can invite you to rooms using your contact details": "Andere personen kunnen je in kamers uitnodigen op basis van je contactgegevens",
     "Enter phone number (required on this homeserver)": "Voer telefoonnummer in (vereist op deze homeserver)",
     "Enter username": "Voer inlognaam in",
     "Some characters not allowed": "Sommige tekens zijn niet toegestaan",
@@ -933,58 +933,58 @@
     "Set a new custom sound": "Stel een nieuw aangepast geluid in",
     "Browse": "Bladeren",
     "Cannot reach homeserver": "Kan homeserver niet bereiken",
-    "Ensure you have a stable internet connection, or get in touch with the server admin": "Zorg dat u een stabiele internetverbinding heeft, of neem contact op met de systeembeheerder",
-    "Your %(brand)s is misconfigured": "Uw %(brand)s is onjuist geconfigureerd",
-    "Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.": "Vraag uw %(brand)s-beheerder <a>uw configuratie</a> na te kijken op onjuiste of dubbele items.",
+    "Ensure you have a stable internet connection, or get in touch with the server admin": "Zorg dat je een stabiele internetverbinding hebt, of neem contact op met de systeembeheerder",
+    "Your %(brand)s is misconfigured": "Je %(brand)s is onjuist geconfigureerd",
+    "Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.": "Vraag jouw %(brand)s-beheerder <a>je configuratie</a> na te kijken op onjuiste of dubbele items.",
     "Unexpected error resolving identity server configuration": "Onverwachte fout bij het oplossen van de identiteitsserverconfiguratie",
     "Use lowercase letters, numbers, dashes and underscores only": "Gebruik enkel letters, cijfers, streepjes en underscores",
     "Cannot reach identity server": "Kan identiteitsserver niet bereiken",
-    "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.": "U kunt zich registreren, maar sommige functies zullen pas beschikbaar zijn wanneer de identiteitsserver weer online is. Als u deze waarschuwing blijft zien, controleer dan uw configuratie of neem contact op met een serverbeheerder.",
-    "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.": "U kunt uw wachtwoord opnieuw instellen, maar sommige functies zullen pas beschikbaar komen wanneer de identiteitsserver weer online is. Als u deze waarschuwing blijft zien, controleer dan uw configuratie of neem contact op met een serverbeheerder.",
-    "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.": "U kunt inloggen, maar sommige functies zullen pas beschikbaar zijn wanneer de identiteitsserver weer online is. Als u deze waarschuwing blijft zien, controleer dan uw configuratie of neem contact op met een systeembeheerder.",
-    "<a>Log in</a> to your new account.": "<a>Login</a> met uw nieuwe account.",
+    "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.": "Je kan jezelf registreren, maar sommige functies zullen pas beschikbaar zijn wanneer de identiteitsserver weer online is. Als je deze waarschuwing blijft zien, controleer dan je configuratie of neem contact op met een serverbeheerder.",
+    "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.": "Je kan jouw wachtwoord opnieuw instellen, maar sommige functies zullen pas beschikbaar komen wanneer de identiteitsserver weer online is. Als je deze waarschuwing blijft zien, controleer dan je configuratie of neem contact op met een serverbeheerder.",
+    "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.": "Je kan inloggen, maar sommige functies zullen pas beschikbaar zijn wanneer de identiteitsserver weer online is. Als je deze waarschuwing blijft zien, controleer dan je configuratie of neem contact op met een systeembeheerder.",
+    "<a>Log in</a> to your new account.": "<a>Login</a> met je nieuwe account.",
     "Registration Successful": "Registratie geslaagd",
     "Upload all": "Alles versturen",
-    "Your new account (%(newAccountId)s) is registered, but you're already logged into a different account (%(loggedInUserId)s).": "Uw nieuwe account (%(newAccountId)s) is geregistreerd, maar u bent al ingelogd met een andere account (%(loggedInUserId)s).",
+    "Your new account (%(newAccountId)s) is registered, but you're already logged into a different account (%(loggedInUserId)s).": "Jouw nieuwe account (%(newAccountId)s) is geregistreerd, maar je bent al ingelogd met een andere account (%(loggedInUserId)s).",
     "Continue with previous account": "Doorgaan met vorige account",
     "Edited at %(date)s. Click to view edits.": "Bewerkt op %(date)s. Klik om de bewerkingen te bekijken.",
     "Message edits": "Berichtbewerkingen",
-    "Upgrading this room requires closing down the current instance of the room and creating a new room in its place. To give room members the best possible experience, we will:": "Deze kamer bijwerken vereist dat u de huidige afsluit en in de plaats een nieuwe kamer aanmaakt. Om leden de best mogelijke ervaring te bieden, zullen we:",
+    "Upgrading this room requires closing down the current instance of the room and creating a new room in its place. To give room members the best possible experience, we will:": "Deze kamer bijwerken vereist dat je de huidige afsluit en in de plaats een nieuwe kamer aanmaakt. Om leden de best mogelijke ervaring te bieden, zullen we:",
     "Show all": "Alles tonen",
     "%(severalUsers)smade no changes %(count)s times|other": "%(severalUsers)s hebben %(count)s keer niets gewijzigd",
     "%(severalUsers)smade no changes %(count)s times|one": "%(severalUsers)s hebben niets gewijzigd",
     "%(oneUser)smade no changes %(count)s times|other": "%(oneUser)s heeft %(count)s keer niets gewijzigd",
     "%(oneUser)smade no changes %(count)s times|one": "%(oneUser)s heeft niets gewijzigd",
-    "Changes your avatar in all rooms": "Verandert uw afbeelding in alle kamer",
+    "Changes your avatar in all rooms": "Verandert je afbeelding in alle kamer",
     "Removing…": "Bezig met verwijderen…",
     "Clear all data": "Alle gegevens wissen",
-    "Your homeserver doesn't seem to support this feature.": "Uw homeserver biedt geen ondersteuning voor deze functie.",
+    "Your homeserver doesn't seem to support this feature.": "Jouw homeserver biedt geen ondersteuning voor deze functie.",
     "Resend %(unsentCount)s reaction(s)": "%(unsentCount)s reactie(s) opnieuw versturen",
     "Failed to re-authenticate due to a homeserver problem": "Opnieuw inloggen is mislukt wegens een probleem met de homeserver",
     "Failed to re-authenticate": "Opnieuw inloggen is mislukt",
-    "Enter your password to sign in and regain access to your account.": "Voer uw wachtwoord in om u aan te melden en toegang tot uw account te herkrijgen.",
+    "Enter your password to sign in and regain access to your account.": "Voer je wachtwoord in om je aan te melden en toegang tot je account te herkrijgen.",
     "Forgotten your password?": "Wachtwoord vergeten?",
-    "You're signed out": "U bent uitgelogd",
+    "You're signed out": "Je bent uitgelogd",
     "Clear personal data": "Persoonlijke gegevens wissen",
-    "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Laat ons weten wat er verkeerd is gegaan, of nog beter, maak een foutrapport aan op GitHub, waarin u het probleem beschrijft.",
+    "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Laat ons weten wat er verkeerd is gegaan, of nog beter, maak een foutrapport aan op GitHub, waarin je het probleem beschrijft.",
     "Find others by phone or email": "Vind anderen via telefoonnummer of e-mailadres",
     "Be found by phone or email": "Wees vindbaar via telefoonnummer of e-mailadres",
     "Use bots, bridges, widgets and sticker packs": "Gebruik robots, bruggen, widgets en stickerpakketten",
     "Terms of Service": "Gebruiksvoorwaarden",
     "Service": "Dienst",
     "Summary": "Samenvatting",
-    "Sign in and regain access to your account.": "Meld u aan en herkrijg toegang tot uw account.",
-    "You cannot sign in to your account. Please contact your homeserver admin for more information.": "U kunt niet inloggen met uw account. Neem voor meer informatie contact op met de beheerder van uw homeserver.",
+    "Sign in and regain access to your account.": "Meld je aan en herkrijg toegang tot je account.",
+    "You cannot sign in to your account. Please contact your homeserver admin for more information.": "Je kan niet inloggen met jouw account. Neem voor meer informatie contact op met de beheerder van je homeserver.",
     "This account has been deactivated.": "Dit account is gesloten.",
     "Messages": "Berichten",
     "Actions": "Acties",
     "Displays list of commands with usages and descriptions": "Toont een lijst van beschikbare opdrachten, met hun toepassing en omschrijving",
     "Checking server": "Server wordt gecontroleerd",
-    "Disconnect from the identity server <idserver />?": "Wilt u de verbinding met de identiteitsserver <idserver /> verbreken?",
+    "Disconnect from the identity server <idserver />?": "Wil je de verbinding met de identiteitsserver <idserver /> verbreken?",
     "Disconnect": "Verbinding verbreken",
-    "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "Om bekenden te kunnen vinden en voor hen vindbaar te zijn gebruikt u momenteel <server></server>. U kunt die identiteitsserver hieronder wijzigen.",
-    "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "U gebruikt momenteel geen identiteitsserver. Voeg er hieronder één toe om bekenden te kunnen vinden en voor hen vindbaar te zijn.",
-    "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.": "Als u de verbinding met uw identiteitsserver verbreekt zal u niet door andere personen gevonden kunnen worden, en dat u anderen niet via e-mail of telefoon zal kunnen uitnodigen.",
+    "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "Om bekenden te kunnen vinden en voor hen vindbaar te zijn gebruik je momenteel <server></server>. Je kan die identiteitsserver hieronder wijzigen.",
+    "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.": "Je gebruikt momenteel geen identiteitsserver. Voeg er hieronder één toe om bekenden te kunnen vinden en voor hen vindbaar te zijn.",
+    "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.": "Als je de verbinding met je identiteitsserver verbreekt zal je niet door andere personen gevonden kunnen worden, en dat je anderen niet via e-mail of telefoon zal kunnen uitnodigen.",
     "Discovery": "Vindbaarheid",
     "Deactivate account": "Account sluiten",
     "Always show the window menu bar": "De venstermenubalk altijd tonen",
@@ -992,27 +992,27 @@
     "Unable to share email address": "Kan e-mailadres niet delen",
     "Revoke": "Intrekken",
     "Share": "Delen",
-    "Discovery options will appear once you have added an email above.": "Vindbaarheidopties zullen verschijnen wanneer u een e-mailadres hebt toegevoegd.",
+    "Discovery options will appear once you have added an email above.": "Vindbaarheidopties zullen verschijnen wanneer je een e-mailadres hebt toegevoegd.",
     "Unable to revoke sharing for phone number": "Kan delen voor dit telefoonnummer niet intrekken",
     "Unable to share phone number": "Kan telefoonnummer niet delen",
     "Please enter verification code sent via text.": "Voer de verificatiecode in die werd verstuurd via sms.",
-    "Discovery options will appear once you have added a phone number above.": "Vindbaarheidopties zullen verschijnen wanneer u een telefoonnummer hebt toegevoegd.",
+    "Discovery options will appear once you have added a phone number above.": "Vindbaarheidopties zullen verschijnen wanneer je een telefoonnummer hebt toegevoegd.",
     "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "Er is een sms verstuurd naar +%(msisdn)s. Voor de verificatiecode in die in het bericht staat.",
     "Command Help": "Hulp bij opdrachten",
     "Call failed due to misconfigured server": "Oproep mislukt door verkeerd geconfigureerde server",
     "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "Vraag je homeserver-beheerder (<code>%(homeserverDomain)s</code>) een TURN-server te configureren voor de betrouwbaarheid van de oproepen.",
-    "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.": "Je kunt ook de publieke server op <code>turn.matrix.org</code> gebruiken, maar dit zal minder betrouwbaar zijn, en zal uw IP-adres met die server delen. Je kunt dit ook beheren in de Instellingen.",
+    "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.": "Je kan ook de publieke server op <code>turn.matrix.org</code> gebruiken, maar dit zal minder betrouwbaar zijn, en zal jouw IP-adres met die server delen. Je kan dit ook beheren in de Instellingen.",
     "Try using turn.matrix.org": "Probeer turn.matrix.org te gebruiken",
-    "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Sta de terugval-server voor oproepbijstand turn.matrix.org toe wanneer uw homeserver er geen aanbiedt (uw IP-adres wordt gedeeld gedurende een oproep)",
+    "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Sta de terugval-server voor oproepbijstand turn.matrix.org toe wanneer je homeserver er geen aanbiedt (jouw IP-adres wordt gedeeld gedurende een oproep)",
     "Identity server has no terms of service": "De identiteitsserver heeft geen dienstvoorwaarden",
-    "The identity server you have chosen does not have any terms of service.": "De identiteitsserver die u heeft gekozen heeft geen dienstvoorwaarden.",
-    "Only continue if you trust the owner of the server.": "Ga enkel verder indien u de eigenaar van de server vertrouwt.",
+    "The identity server you have chosen does not have any terms of service.": "De identiteitsserver die je hebt gekozen heeft geen dienstvoorwaarden.",
+    "Only continue if you trust the owner of the server.": "Ga enkel verder indien je de eigenaar van de server vertrouwt.",
     "Terms of service not accepted or the identity server is invalid.": "Dienstvoorwaarden niet aanvaard, of de identiteitsserver is ongeldig.",
     "Enter a new identity server": "Voer een nieuwe identiteitsserver in",
     "Remove %(email)s?": "%(email)s verwijderen?",
     "Remove %(phone)s?": "%(phone)s verwijderen?",
     "Sends a message as plain text, without interpreting it as markdown": "Verstuurt een bericht als platte tekst, zonder het als markdown te interpreteren",
-    "You do not have the required permissions to use this command.": "U beschikt niet over de vereiste machtigingen om deze opdracht uit te voeren.",
+    "You do not have the required permissions to use this command.": "Je beschikt niet over de vereiste machtigingen om deze opdracht uit te voeren.",
     "Changes the avatar of the current room": "Wijzigt de afbeelding van de huidige kamer",
     "Use an identity server": "Gebruik een identiteitsserver",
     "Use an identity server to invite by email. Click continue to use the default identity server (%(defaultIdentityServerName)s) or manage in Settings.": "Gebruik een identiteitsserver om uit te nodigen via e-mail. Klik op ‘Doorgaan’ om de standaardidentiteitsserver (%(defaultIdentityServerName)s) te gebruiken, of beheer de server in de instellingen.",
@@ -1021,11 +1021,11 @@
     "Change identity server": "Identiteitsserver wisselen",
     "Disconnect from the identity server <current /> and connect to <new /> instead?": "Verbinding met identiteitsserver <current /> verbreken en in plaats daarvan verbinden met <new />?",
     "Disconnect identity server": "Verbinding met identiteitsserver verbreken",
-    "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "U deelt nog steeds <b>uw persoonlijke gegevens</b> op de identiteitsserver <idserver />.",
-    "We recommend that you remove your email addresses and phone numbers from the identity server before disconnecting.": "We raden u aan uw e-mailadressen en telefoonnummers van de identiteitsserver te verwijderen vooraleer u de verbinding verbreekt.",
+    "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "Je deelt nog steeds <b>je persoonlijke gegevens</b> op de identiteitsserver <idserver />.",
+    "We recommend that you remove your email addresses and phone numbers from the identity server before disconnecting.": "We raden je aan je e-mailadressen en telefoonnummers van de identiteitsserver te verwijderen voordat je de verbinding verbreekt.",
     "Disconnect anyway": "Verbinding toch verbreken",
-    "If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.": "Mocht u, om bekenden te zoeken en zelf vindbaar te zijn, <server /> niet willen gebruiken, voer dan hieronder een andere identiteitsserver in.",
-    "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.": "Een identiteitsserver is niet verplicht, maar zonder identiteitsserver zult u geen bekenden op e-mailadres of telefoonnummer kunnen zoeken, noch door hen vindbaar zijn.",
+    "If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.": "Mocht je, om bekenden te zoeken en zelf vindbaar te zijn, <server /> niet willen gebruiken, voer dan hieronder een andere identiteitsserver in.",
+    "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.": "Een identiteitsserver is niet verplicht, maar zonder identiteitsserver zal je geen bekenden op e-mailadres of telefoonnummer kunnen zoeken, noch door hen vindbaar zijn.",
     "Do not use an identity server": "Geen identiteitsserver gebruiken",
     "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Aanvaard de gebruiksvoorwaarden van de identiteitsserver (%(serverName)s) om vindbaar te zijn op e-mailadres of telefoonnummer.",
     "Read Marker lifetime (ms)": "Levensduur van leesbevestigingen (ms)",
@@ -1033,18 +1033,18 @@
     "Upgrade the room": "Upgrade de kamer",
     "Enable room encryption": "Kamerversleuteling inschakelen",
     "Error changing power level requirement": "Fout bij wijzigen van machtsniveauvereiste",
-    "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "Er is een fout opgetreden bij het wijzigen van de machtsniveauvereisten van de kamer. Zorg ervoor dat u over voldoende machtigingen beschikt en probeer het opnieuw.",
+    "An error occurred changing the room's power level requirements. Ensure you have sufficient permissions and try again.": "Er is een fout opgetreden bij het wijzigen van de machtsniveauvereisten van de kamer. Zorg ervoor dat je over voldoende machtigingen beschikt en probeer het opnieuw.",
     "Error changing power level": "Fout bij wijzigen van machtsniveau",
-    "An error occurred changing the user's power level. Ensure you have sufficient permissions and try again.": "Er is een fout opgetreden bij het wijzigen van het machtsniveau van de persoon. Zorg ervoor dat u over voldoende machtigingen beschikt en probeer het opnieuw.",
-    "Verify the link in your inbox": "Verifieer de koppeling in uw postvak",
+    "An error occurred changing the user's power level. Ensure you have sufficient permissions and try again.": "Er is een fout opgetreden bij het wijzigen van het machtsniveau van de persoon. Zorg ervoor dat je over voldoende machtigingen beschikt en probeer het opnieuw.",
+    "Verify the link in your inbox": "Verifieer de koppeling in je postvak",
     "Complete": "Voltooien",
     "No recent messages by %(user)s found": "Geen recente berichten door %(user)s gevonden",
     "Try scrolling up in the timeline to see if there are any earlier ones.": "Probeer omhoog te scrollen in de tijdslijn om te kijken of er eerdere zijn.",
     "Remove recent messages by %(user)s": "Recente berichten door %(user)s verwijderen",
-    "For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.": "Bij een groot aantal berichten kan dit even duren. Herlaad uw cliënt niet gedurende deze tijd.",
+    "For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.": "Bij een groot aantal berichten kan dit even duren. Herlaad je cliënt niet gedurende deze tijd.",
     "Remove %(count)s messages|other": "%(count)s berichten verwijderen",
     "Deactivate user?": "Persoon deactiveren?",
-    "Deactivating this user will log them out and prevent them from logging back in. Additionally, they will leave all the rooms they are in. This action cannot be reversed. Are you sure you want to deactivate this user?": "Deze persoon deactiveren zal deze persoon uitloggen en verhinderen dat de persoon weer inlogt. Bovendien zal de persoon alle kamers waaraan de persoon deelneemt verlaten. Deze actie is niet terug te draaien. Weet u zeker dat u deze persoon wilt deactiveren?",
+    "Deactivating this user will log them out and prevent them from logging back in. Additionally, they will leave all the rooms they are in. This action cannot be reversed. Are you sure you want to deactivate this user?": "Deze persoon deactiveren zal deze persoon uitloggen en verhinderen dat de persoon weer inlogt. Bovendien zal de persoon alle kamers waaraan de persoon deelneemt verlaten. Deze actie is niet terug te draaien. Weet je zeker dat je deze persoon wilt deactiveren?",
     "Deactivate user": "Persoon deactiveren",
     "Remove recent messages": "Recente berichten verwijderen",
     "Bold": "Vet",
@@ -1058,9 +1058,9 @@
     "Share this email in Settings to receive invites directly in %(brand)s.": "Deel in de instellingen dit e-mailadres om uitnodigingen direct in %(brand)s te ontvangen.",
     "Use an identity server to invite by email. <default>Use the default (%(defaultIdentityServerName)s)</default> or manage in <settings>Settings</settings>.": "Gebruik een identiteitsserver om uit te nodigen op e-mailadres. <default>Gebruik de standaardserver (%(defaultIdentityServerName)s)</default> of beheer de server in de <settings>Instellingen</settings>.",
     "Use an identity server to invite by email. Manage in <settings>Settings</settings>.": "Gebruik een identiteitsserver om anderen uit te nodigen via e-mail. Beheer de server in de <settings>Instellingen</settings>.",
-    "Please fill why you're reporting.": "Geef aan waarom u deze melding indient.",
-    "Report Content to Your Homeserver Administrator": "Inhoud melden aan de beheerder van uw homeserver",
-    "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.": "Dit bericht melden zal zijn unieke ‘gebeurtenis-ID’ versturen naar de beheerder van uw homeserver. Als de berichten in deze kamer versleuteld zijn, zal de beheerder van uw homeserver het bericht niet kunnen lezen, noch enige bestanden of afbeeldingen zien.",
+    "Please fill why you're reporting.": "Geef aan waarom je deze melding indient.",
+    "Report Content to Your Homeserver Administrator": "Inhoud melden aan de beheerder van jouw homeserver",
+    "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.": "Dit bericht melden zal zijn unieke ‘gebeurtenis-ID’ versturen naar de beheerder van jouw homeserver. Als de berichten in deze kamer versleuteld zijn, zal de beheerder van jouw homeserver het bericht niet kunnen lezen, noch enige bestanden of afbeeldingen zien.",
     "Send report": "Rapport versturen",
     "Report Content": "Inhoud melden",
     "Preview": "Voorbeeld",
@@ -1083,22 +1083,22 @@
     "Topic (optional)": "Onderwerp (optioneel)",
     "Hide advanced": "Geavanceerde info verbergen",
     "Show advanced": "Geavanceerde info tonen",
-    "To continue you need to accept the terms of this service.": "Om door te gaan dient u de dienstvoorwaarden te aanvaarden.",
+    "To continue you need to accept the terms of this service.": "Om door te gaan dien je de dienstvoorwaarden te aanvaarden.",
     "Document": "Document",
-    "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.": "Publieke sleutel van captcha ontbreekt in homeserverconfiguratie. Meld dit aan de beheerder van uw homeserver.",
+    "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.": "Publieke sleutel van captcha ontbreekt in homeserverconfiguratie. Meld dit aan de beheerder van je homeserver.",
     "Emoji Autocomplete": "Emoji autoaanvullen",
     "Notification Autocomplete": "Meldingen autoaanvullen",
     "Room Autocomplete": "Kamers autoaanvullen",
     "User Autocomplete": "Personen autoaanvullen",
     "Add Email Address": "E-mailadres toevoegen",
     "Add Phone Number": "Telefoonnummer toevoegen",
-    "Your email address hasn't been verified yet": "Uw e-mailadres is nog niet geverifieerd",
+    "Your email address hasn't been verified yet": "Jouw e-mailadres is nog niet geverifieerd",
     "Click the link in the email you received to verify and then click continue again.": "Open de koppeling in de ontvangen verificatie-e-mail, en klik dan op ‘Doorgaan’.",
     "%(creator)s created and configured the room.": "Kamer gestart en ingesteld door %(creator)s.",
     "Setting up keys": "Sleutelconfiguratie",
     "Verify this session": "Verifieer deze sessie",
     "Encryption upgrade available": "Versleutelingsupgrade beschikbaar",
-    "You can use <code>/help</code> to list available commands. Did you mean to send this as a message?": "Typ <code>/help</code> om alle opdrachten te zien. Was het uw bedoeling dit als bericht te sturen?",
+    "You can use <code>/help</code> to list available commands. Did you mean to send this as a message?": "Typ <code>/help</code> om alle opdrachten te zien. Was het je bedoeling dit als bericht te sturen?",
     "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.": "Dit vergt validatie van een e-mailadres of telefoonnummer middels de standaard identiteitsserver <server />, maar die server heeft geen gebruiksvoorwaarden.",
     "Trust": "Vertrouwen",
     "Custom (%(level)s)": "Aangepast (%(level)s)",
@@ -1107,12 +1107,12 @@
     "Verifies a user, session, and pubkey tuple": "Verifieert de combinatie van persoon, sessie en publieke sleutel",
     "Session already verified!": "Sessie al geverifieerd!",
     "WARNING: Session already verified, but keys do NOT MATCH!": "PAS OP: de sessie is al geverifieerd, maar de sleutels komen NIET OVEREEN!",
-    "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!": "PAS OP: sleutelverificatie MISLUKT! De combinatie %(userId)s + sessie %(deviceId)s is ondertekend met ‘%(fprint)s’ - maar de opgegeven sleutel is ‘%(fingerprint)s’.  Wellicht worden uw berichten onderschept!",
-    "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "De door u verschafte sleutel en de van %(userId)ss sessie %(deviceId)s verkregen sleutels komen overeen. De sessie is daarmee geverifieerd.",
-    "%(senderName)s placed a voice call.": "%(senderName)s probeert u te bellen.",
-    "%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s poogt u te bellen, maar uw browser ondersteunt dat niet",
+    "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!": "PAS OP: sleutelverificatie MISLUKT! De combinatie %(userId)s + sessie %(deviceId)s is ondertekend met ‘%(fprint)s’ - maar de opgegeven sleutel is ‘%(fingerprint)s’.  Wellicht worden jouw berichten onderschept!",
+    "The signing key you provided matches the signing key you received from %(userId)s's session %(deviceId)s. Session marked as verified.": "De door jou verschafte sleutel en de van %(userId)ss sessie %(deviceId)s verkregen sleutels komen overeen. De sessie is daarmee geverifieerd.",
+    "%(senderName)s placed a voice call.": "%(senderName)s probeert je te bellen.",
+    "%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s poogt je te bellen, maar jouw browser ondersteunt dat niet",
     "%(senderName)s placed a video call.": "%(senderName)s doet een video-oproep.",
-    "%(senderName)s placed a video call. (not supported by this browser)": "%(senderName)s doet een video-oproep, maar uw browser ondersteunt dat niet",
+    "%(senderName)s placed a video call. (not supported by this browser)": "%(senderName)s doet een video-oproep, maar jouw browser ondersteunt dat niet",
     "%(senderName)s removed the rule banning users matching %(glob)s": "%(senderName)s heeft de banregel voor personen die met %(glob)s stroken verwijderd",
     "%(senderName)s removed the rule banning rooms matching %(glob)s": "%(senderName)s heeft de banregel voor kamers met %(glob)s verwijderd",
     "%(senderName)s removed the rule banning servers matching %(glob)s": "%(senderName)s heeft de banregel voor servers die met %(glob)s stroken verwijderd",
@@ -1138,9 +1138,9 @@
     "about a day ago": "ongeveer een dag geleden",
     "%(num)s days ago": "%(num)s dagen geleden",
     "a few seconds from now": "over een paar tellen",
-    "about a minute from now": "over een minuut of zo",
+    "about a minute from now": "over ongeveer een minuut",
     "%(num)s minutes from now": "over %(num)s minuten",
-    "about an hour from now": "over een uur of zo",
+    "about an hour from now": "over ongeveer een uur",
     "%(num)s hours from now": "over %(num)s uur",
     "about a day from now": "over een dag of zo",
     "%(num)s days from now": "over %(num)s dagen",
@@ -1153,7 +1153,7 @@
     "Enable message search in encrypted rooms": "Zoeken in versleutelde kamers inschakelen",
     "How fast should messages be downloaded.": "Ophaalfrequentie van berichten.",
     "My Ban List": "Mijn banlijst",
-    "This is your list of users/servers you have blocked - don't leave the room!": "Dit is de lijst van door u geblokkeerde servers/personen. Verlaat deze kamer niet!",
+    "This is your list of users/servers you have blocked - don't leave the room!": "Dit is de lijst van door jou geblokkeerde servers/personen. Verlaat deze kamer niet!",
     "Waiting for %(displayName)s to verify…": "Wachten tot %(displayName)s geverifieerd heeft…",
     "They match": "Ze komen overeen",
     "They don't match": "Ze komen niet overeen",
@@ -1183,8 +1183,8 @@
     "Enable": "Inschakelen",
     "Connecting to integration manager...": "Verbinding maken met de integratiebeheerder…",
     "Cannot connect to integration manager": "Kan geen verbinding maken met de integratiebeheerder",
-    "The integration manager is offline or it cannot reach your homeserver.": "De integratiebeheerder is offline of kan uw homeserver niet bereiken.",
-    "This session is backing up your keys. ": "Deze sessie maakt back-ups van uw sleutels. ",
+    "The integration manager is offline or it cannot reach your homeserver.": "De integratiebeheerder is offline of kan je homeserver niet bereiken.",
+    "This session is backing up your keys. ": "Deze sessie maakt back-ups van je sleutels. ",
     "not stored": "niet opgeslagen",
     "Ignored/Blocked": "Genegeerd/geblokkeerd",
     "Error adding ignored user/server": "Fout bij het toevoegen van een genegeerde persoon/server",
@@ -1194,26 +1194,26 @@
     "Error unsubscribing from list": "Fout bij het opzeggen van een abonnement op de lijst",
     "Please try again or view your console for hints.": "Probeer het opnieuw of bekijk de console voor meer informatie.",
     "None": "Geen",
-    "You have not ignored anyone.": "U heeft niemand genegeerd.",
-    "You are currently ignoring:": "U negeert op dit moment:",
-    "You are not subscribed to any lists": "U heeft geen abonnement op een lijst",
+    "You have not ignored anyone.": "Je hebt niemand genegeerd.",
+    "You are currently ignoring:": "Je negeert op dit moment:",
+    "You are not subscribed to any lists": "Je hebt geen abonnement op een lijst",
     "Unsubscribe": "Abonnement opzeggen",
     "View rules": "Bekijk regels",
-    "You are currently subscribed to:": "U heeft een abonnement op:",
+    "You are currently subscribed to:": "Je hebt een abonnement op:",
     "⚠ These settings are meant for advanced users.": "⚠ Deze instellingen zijn bedoeld voor gevorderde personen.",
-    "Ignoring people is done through ban lists which contain rules for who to ban. Subscribing to a ban list means the users/servers blocked by that list will be hidden from you.": "Het negeren van personen gaat via banlijsten. Deze bevatten regels over wie verbannen moet worden. Het abonneren op een banlijst betekent dat u de personen/servers die op de lijst staan niet meer zult zien.",
+    "Ignoring people is done through ban lists which contain rules for who to ban. Subscribing to a ban list means the users/servers blocked by that list will be hidden from you.": "Het negeren van personen gaat via banlijsten. Deze bevatten regels over wie verbannen moet worden. Het abonneren op een banlijst betekent dat je de personen/servers die op de lijst staan niet meer zult zien.",
     "Personal ban list": "Persoonlijke banlijst",
-    "Your personal ban list holds all the users/servers you personally don't want to see messages from. After ignoring your first user/server, a new room will show up in your room list named 'My Ban List' - stay in this room to keep the ban list in effect.": "Uw persoonlijke banlijst bevat alle personen/servers waar u geen berichten meer van wilt zien. Nadat u een persoon/server heeft genegeerd, zal er een nieuw kamer worden aangemaakt met de naam ‘Mijn banlijst’. Om de lijst actief te houden dient u de kamer niet te verlaten.",
+    "Your personal ban list holds all the users/servers you personally don't want to see messages from. After ignoring your first user/server, a new room will show up in your room list named 'My Ban List' - stay in this room to keep the ban list in effect.": "Jouw persoonlijke banlijst bevat alle personen/servers waar je geen berichten meer van wilt zien. Nadat je een persoon/server hebt genegeerd, zal er een nieuw kamer worden aangemaakt met de naam ‘Mijn banlijst’. Om de lijst actief te houden dien je de kamer niet te verlaten.",
     "Server or user ID to ignore": "Server of persoon-ID om te negeren",
     "eg: @bot:* or example.org": "bijvoorbeeld: @bot:* of voorbeeld.org",
     "Subscribed lists": "Abonnementen op lijsten",
-    "Subscribing to a ban list will cause you to join it!": "Wanneer u zich abonneert op een banlijst zal u eraan worden toegevoegd!",
-    "If this isn't what you want, please use a different tool to ignore users.": "Als u dit niet wilt kunt u een andere methode gebruiken om personen te negeren.",
+    "Subscribing to a ban list will cause you to join it!": "Wanneer je jezelf abonneert op een banlijst zal je eraan worden toegevoegd!",
+    "If this isn't what you want, please use a different tool to ignore users.": "Als je dit niet wilt kan je een andere methode gebruiken om personen te negeren.",
     "Subscribe": "Abonneren",
     "Enable desktop notifications for this session": "Bureaubladmeldingen voor deze sessie inschakelen",
     "Enable audible notifications for this session": "Meldingen met geluid voor deze sessie inschakelen",
-    "You should:": "U zou best:",
-    "check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "uw browserextensies bekijken voor extensies die mogelijk de identiteitsserver blokkeren (zoals Privacy Badger)",
+    "You should:": "Je zou best:",
+    "check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "je browserextensies bekijken voor extensies die mogelijk de identiteitsserver blokkeren (zoals Privacy Badger)",
     "contact the administrators of identity server <idserver />": "contact opnemen met de beheerders van de identiteitsserver <idserver />",
     "wait and try again later": "wachten en het later weer proberen",
     "Manage integrations": "Integratiebeheerder",
@@ -1226,8 +1226,8 @@
     "This room is bridging messages to the following platforms. <a>Learn more.</a>": "Deze kamer wordt overbrugd naar de volgende platformen. <a>Lees meer</a>",
     "Bridges": "Bruggen",
     "This user has not verified all of their sessions.": "Deze persoon heeft niet al zijn sessies geverifieerd.",
-    "You have not verified this user.": "U heeft deze persoon niet geverifieerd.",
-    "You have verified this user. This user has verified all of their sessions.": "U heeft deze persoon geverifieerd. Deze persoon heeft al zijn sessies geverifieerd.",
+    "You have not verified this user.": "Je hebt deze persoon niet geverifieerd.",
+    "You have verified this user. This user has verified all of their sessions.": "Je hebt deze persoon geverifieerd. Deze persoon heeft al zijn sessies geverifieerd.",
     "Someone is using an unknown session": "Iemand gebruikt een onbekende sessie",
     "This room is end-to-end encrypted": "Deze kamer is eind-tot-eind-versleuteld",
     "Everyone in this room is verified": "Iedereen in deze kamer is geverifieerd",
@@ -1235,14 +1235,14 @@
     "Direct Messages": "Direct gesprek",
     "If disabled, messages from encrypted rooms won't appear in search results.": "Dit moet aan staan om te kunnen zoeken in versleutelde kamers.",
     "Indexed rooms:": "Geïndexeerde kamers:",
-    "Your account has a cross-signing identity in secret storage, but it is not yet trusted by this session.": "Uw account heeft een identiteit voor kruiselings ondertekenen in de sleutelopslag, maar die wordt nog niet vertrouwd door de huidige sessie.",
+    "Your account has a cross-signing identity in secret storage, but it is not yet trusted by this session.": "Jouw account heeft een identiteit voor kruiselings ondertekenen in de sleutelopslag, maar die wordt nog niet vertrouwd door de huidige sessie.",
     "Cross-signing public keys:": "Publieke sleutels voor kruiselings ondertekenen:",
     "Cross-signing private keys:": "Privésleutels voor kruiselings ondertekenen:",
     "in secret storage": "in de sleutelopslag",
     "Secret storage public key:": "Sleutelopslag publieke sleutel:",
     "in account data": "in accountinformatie",
     "Manage": "Beheren",
-    "Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.": "Verbind deze sessie met de sleutelback-up voordat u zich afmeldt. Dit voorkomt dat u sleutels verliest die alleen op deze sessie voorkomen.",
+    "Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.": "Verbind deze sessie met de sleutelback-up voordat je jezelf afmeldt. Dit voorkomt dat je sleutels verliest die alleen op deze sessie voorkomen.",
     "Connect this session to Key Backup": "Verbind deze sessie met de sleutelback-up",
     "Backup has a <validity>valid</validity> signature from this user": "De back-up heeft een <validity>geldige</validity> ondertekening van deze persoon",
     "Backup has a <validity>invalid</validity> signature from this user": "De back-up heeft een <validity>ongeldige</validity> ondertekening van deze persoon",
@@ -1254,29 +1254,29 @@
     "Backup has a <validity>valid</validity> signature from <verify>unverified</verify> session <device></device>": "De back-up heeft een <validity>geldige</validity> ondertekening van een <verify>ongeverifieerde</verify> sessie <device></device>",
     "Backup has an <validity>invalid</validity> signature from <verify>verified</verify> session <device></device>": "De back-up heeft een <validity>ongeldige</validity> ondertekening van een <verify>geverifieerde</verify> sessie <device></device>",
     "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> session <device></device>": "De back-up heeft een <validity>ongeldige</validity> ondertekening van een <verify>ongeverifieerde</verify> sessie <device></device>",
-    "Backup is not signed by any of your sessions": "De back-up is door geen van uw sessies ondertekend",
+    "Backup is not signed by any of your sessions": "De back-up is door geen van jouw sessies ondertekend",
     "This backup is trusted because it has been restored on this session": "Deze back-up is vertrouwd omdat hij hersteld is naar deze sessie",
-    "Your keys are <b>not being backed up from this session</b>.": "Uw sleutels worden <b>niet geback-upt van deze sessie</b>.",
+    "Your keys are <b>not being backed up from this session</b>.": "Jouw sleutels worden <b>niet geback-upt van deze sessie</b>.",
     "Clear notifications": "Meldingen wissen",
-    "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "U moet uw <b>persoonlijke informatie</b> van de identiteitsserver <idserver /> <b>verwijderen</b> voordat u zich ontkoppelt. Helaas kan de identiteitsserver <idserver /> op dit moment niet worden bereikt. Mogelijk is hij offline.",
-    "Your homeserver does not support cross-signing.": "Uw homeserver biedt geen ondersteuning voor kruiselings ondertekenen.",
+    "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "Je moet je <b>persoonlijke informatie</b> van de identiteitsserver <idserver /> <b>verwijderen</b> voordat je ontkoppelt. Helaas kan de identiteitsserver <idserver /> op dit moment niet worden bereikt. Mogelijk is hij offline.",
+    "Your homeserver does not support cross-signing.": "Jouw homeserver biedt geen ondersteuning voor kruiselings ondertekenen.",
     "Homeserver feature support:": "Homeserver functie ondersteuning:",
     "exists": "aanwezig",
-    "Sign In or Create Account": "Meld u aan of maak een account aan",
-    "Use your account or create a new one to continue.": "Gebruik uw bestaande account of maak een nieuwe aan om verder te gaan.",
+    "Sign In or Create Account": "Meld je aan of maak een account aan",
+    "Use your account or create a new one to continue.": "Gebruik je bestaande account of maak een nieuwe aan om verder te gaan.",
     "Create Account": "Registreren",
     "Displays information about a user": "Geeft informatie weer over een persoon",
     "Order rooms by name": "Kamers sorteren op naam",
     "Show rooms with unread notifications first": "Kamers met ongelezen meldingen eerst tonen",
-    "Show shortcuts to recently viewed rooms above the room list": "Snelkoppelingen naar de kamers die u recent heeft bekeken bovenaan de kamerlijst weergeven",
+    "Show shortcuts to recently viewed rooms above the room list": "Snelkoppelingen naar de kamers die je recent hebt bekeken bovenaan de kamerlijst weergeven",
     "Cancelling…": "Bezig met annuleren…",
-    "%(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>.": "In %(brand)s ontbreken enige modulen vereist voor het veilig lokaal bewaren van versleutelde berichten. Wilt u deze functie uittesten, compileer dan een aangepaste versie van %(brand)s Desktop <nativeLink>die de zoekmodulen bevat</nativeLink>.",
-    "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.": "Deze sessie <b>maakt geen back-ups van uw sleutels</b>, maar u beschikt over een reeds bestaande back-up waaruit u kunt herstellen en waaraan u nieuwe sleutels vanaf nu kunt toevoegen.",
+    "%(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>.": "In %(brand)s ontbreken enige modulen vereist voor het veilig lokaal bewaren van versleutelde berichten. Wil je deze functie uittesten, compileer dan een aangepaste versie van %(brand)s Desktop <nativeLink>die de zoekmodulen bevat</nativeLink>.",
+    "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.": "Deze sessie <b>maakt geen back-ups van je sleutels</b>, maar je beschikt over een reeds bestaande back-up waaruit je kan herstellen en waaraan je nieuwe sleutels vanaf nu kunt toevoegen.",
     "Cross-signing": "Kruiselings ondertekenen",
-    "Your key share request has been sent - please check your other sessions for key share requests.": "Uw sleuteldeelverzoek is verstuurd - controleer de sleuteldeelverzoeken op uw andere sessies.",
-    "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.": "Sleuteldeelverzoeken worden automatisch naar andere sessies verstuurd. Als u op uw andere sessies het sleuteldeelverzoek geweigerd of genegeerd hebt, kunt u hier klikken op de sleutels voor deze sessie opnieuw aan te vragen.",
-    "If your other sessions do not have the key for this message you will not be able to decrypt them.": "Als uw andere sessies geen sleutel voor dit bericht hebben, zult u het niet kunnen ontsleutelen.",
-    "<requestLink>Re-request encryption keys</requestLink> from your other sessions.": "<requestLink>Versleutelingssleutels opnieuw aanvragen</requestLink> van uw andere sessies.",
+    "Your key share request has been sent - please check your other sessions for key share requests.": "Jouw sleuteldeelverzoek is verstuurd - controleer de sleuteldeelverzoeken op je andere sessies.",
+    "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.": "Sleuteldeelverzoeken worden automatisch naar andere sessies verstuurd. Als je op je andere sessies het sleuteldeelverzoek geweigerd of genegeerd hebt, kan je hier klikken om de sleutels voor deze sessie opnieuw aan te vragen.",
+    "If your other sessions do not have the key for this message you will not be able to decrypt them.": "Als je andere sessies geen sleutel voor dit bericht hebben, zal je het niet kunnen ontsleutelen.",
+    "<requestLink>Re-request encryption keys</requestLink> from your other sessions.": "<requestLink>Versleutelingssleutels opnieuw aanvragen</requestLink> van je andere sessies.",
     "This message cannot be decrypted": "Dit bericht kan niet ontsleuteld worden",
     "Encrypted by an unverified session": "Versleuteld door een niet-geverifieerde sessie",
     "Unencrypted": "Onversleuteld",
@@ -1286,7 +1286,7 @@
     "Send a reply…": "Verstuur een antwoord…",
     "Send a message…": "Verstuur een bericht…",
     "Room %(name)s": "Kamer %(name)s",
-    "<userName/> wants to chat": "<userName/> wil een chat met u beginnen",
+    "<userName/> wants to chat": "<userName/> wil een chat met je beginnen",
     "Start chatting": "Gesprek beginnen",
     "Reject & Ignore user": "Weigeren en persoon negeren",
     "%(count)s unread messages including mentions.|one": "1 ongelezen vermelding.",
@@ -1301,12 +1301,12 @@
     "Accepting…": "Toestaan…",
     "Start Verification": "Verificatie beginnen",
     "Messages in this room are end-to-end encrypted.": "De berichten in deze kamer worden eind-tot-eind-versleuteld.",
-    "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Uw berichten zijn beveiligd, en enkel de ontvanger en u hebben de unieke sleutels om ze te ontsleutelen.",
+    "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Jouw berichten zijn beveiligd, en enkel de ontvanger en jij hebben de unieke sleutels om ze te ontsleutelen.",
     "Verify User": "Persoon verifiëren",
-    "For extra security, verify this user by checking a one-time code on both of your devices.": "Als extra beveiliging kunt u deze persoon verifiëren door een eenmalige code op jullie toestellen te controleren.",
-    "Your messages are not secure": "Uw berichten zijn niet veilig",
+    "For extra security, verify this user by checking a one-time code on both of your devices.": "Als extra beveiliging kan je deze persoon verifiëren door een eenmalige code op jullie toestellen te controleren.",
+    "Your messages are not secure": "Jouw berichten zijn niet veilig",
     "One of the following may be compromised:": "Eén van volgende onderdelen kan gecompromitteerd zijn:",
-    "Your homeserver": "Uw homeserver",
+    "Your homeserver": "Jouw homeserver",
     "Not Trusted": "Niet vertrouwd",
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s%(userId)s heeft zich aangemeld bij een nieuwe sessie zonder deze te verifiëren:",
     "Ask this user to verify their session, or manually verify it below.": "Vraag deze persoon de sessie te verifiëren, of verifieer het handmatig hieronder.",
@@ -1323,31 +1323,31 @@
     "Messages in this room are not end-to-end encrypted.": "De berichten in deze kamer worden niet eind-tot-eind-versleuteld.",
     "Security": "Beveiliging",
     "Verify by scanning": "Verifiëren met scan",
-    "Ask %(displayName)s to scan your code:": "Vraag %(displayName)s om uw code te scannen:",
+    "Ask %(displayName)s to scan your code:": "Vraag %(displayName)s om jouw code te scannen:",
     "Verify by emoji": "Verifiëren met emoji",
-    "If you can't scan the code above, verify by comparing unique emoji.": "Als u bovenstaande code niet kunt scannen, verifieer dan door unieke emoji te vergelijken.",
+    "If you can't scan the code above, verify by comparing unique emoji.": "Als je bovenstaande code niet kan scannen, verifieer dan door unieke emoji te vergelijken.",
     "Verify by comparing unique emoji.": "Verifieer door unieke emoji te vergelijken.",
-    "You've successfully verified %(displayName)s!": "U heeft %(displayName)s geverifieerd!",
+    "You've successfully verified %(displayName)s!": "Je hebt %(displayName)s geverifieerd!",
     "Got it": "Ik snap het",
     "Encryption enabled": "Versleuteling ingeschakeld",
     "Encryption not enabled": "Versleuteling niet ingeschakeld",
     "The encryption used by this room isn't supported.": "De versleuteling gebruikt in deze kamer wordt niet ondersteund.",
     "React": "Reageren",
     "Message Actions": "Berichtacties",
-    "You have ignored this user, so their message is hidden. <a>Show anyways.</a>": "U heeft deze persoon genegeerd, dus de berichten worden verborgen. <a>Toch tonen?</a>",
-    "You verified %(name)s": "U heeft %(name)s geverifieerd",
-    "You cancelled verifying %(name)s": "U heeft de verificatie van %(name)s geannuleerd",
+    "You have ignored this user, so their message is hidden. <a>Show anyways.</a>": "Je hebt deze persoon genegeerd, dus de berichten worden verborgen. <a>Toch tonen?</a>",
+    "You verified %(name)s": "Je hebt %(name)s geverifieerd",
+    "You cancelled verifying %(name)s": "Je hebt de verificatie van %(name)s geannuleerd",
     "%(name)s cancelled verifying": "%(name)s heeft de verificatie geannuleerd",
-    "You accepted": "U heeft aanvaard",
+    "You accepted": "Je hebt aanvaard",
     "%(name)s accepted": "%(name)s heeft aanvaard",
-    "You declined": "U heeft geweigerd",
-    "You cancelled": "U heeft geannuleerd",
+    "You declined": "Je hebt geweigerd",
+    "You cancelled": "Je hebt geannuleerd",
     "%(name)s declined": "%(name)s heeft geweigerd",
     "%(name)s cancelled": "%(name)s heeft geannuleerd",
     "Accepting …": "Toestaan…",
     "Declining …": "Weigeren…",
     "%(name)s wants to verify": "%(name)s wil verifiëren",
-    "You sent a verification request": "U heeft een verificatieverzoek verstuurd",
+    "You sent a verification request": "Je hebt een verificatieverzoek verstuurd",
     "Reactions": "Reacties",
     "Frequently Used": "Vaak gebruikt",
     "Smileys & People": "Smileys & Personen",
@@ -1361,10 +1361,10 @@
     "Quick Reactions": "Snelle reacties",
     "Cancel search": "Zoeken annuleren",
     "Any of the following data may be shared:": "De volgende gegevens worden mogelijk gedeeld:",
-    "Your display name": "Uw weergavenaam",
-    "Your avatar URL": "De URL van uw afbeelding",
-    "Your user ID": "Uw persoon-ID",
-    "Your theme": "Uw thema",
+    "Your display name": "Jouw weergavenaam",
+    "Your avatar URL": "De URL van jouw afbeelding",
+    "Your user ID": "Jouw persoon-ID",
+    "Your theme": "Jouw thema",
     "%(brand)s URL": "%(brand)s-URL",
     "Room ID": "Kamer-ID",
     "Widget ID": "Widget-ID",
@@ -1378,18 +1378,18 @@
     "Deleting cross-signing keys is permanent. Anyone you have verified with will see security alerts. You almost certainly don't want to do this, unless you've lost every device you can cross-sign from.": "Het verwijderen van sleutels voor kruiselings ondertekenen is niet terug te draaien. Iedereen waarmee u geverifieerd heeft zal beveiligingswaarschuwingen te zien krijgen. U wilt dit hoogstwaarschijnlijk niet doen, tenzij u alle apparaten heeft verloren waarmee u kruiselings kon ondertekenen.",
     "Clear cross-signing keys": "Sleutels voor kruiselings ondertekenen wissen",
     "Clear all data in this session?": "Alle gegevens in deze sessie verwijderen?",
-    "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Het verwijderen van alle gegevens in deze sessie is niet terug te draaien. Versleutelde berichten zullen verloren gaan, tenzij u een back-up van de sleutels heeft.",
+    "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Het verwijderen van alle gegevens in deze sessie is niet terug te draaien. Versleutelde berichten zullen verloren gaan, tenzij je een back-up van de sleutels hebt.",
     "Verify session": "Sessie verifiëren",
     "Session name": "Sessienaam",
     "Session key": "Sessiesleutel",
-    "Verifying this user will mark their session as trusted, and also mark your session as trusted to them.": "Deze persoon verifiëren zal de sessie als vertrouwd markeren voor u beide.",
-    "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.": "Verifieer dit apparaat om het als vertrouwd te markeren. Door dit apparaat te vertrouwen geeft u extra zekerheid aan uzelf en andere personen bij het gebruik van eind-tot-eind-versleutelde berichten.",
-    "Verifying this device will mark it as trusted, and users who have verified with you will trust this device.": "Dit apparaat verifiëren zal het als vertrouwd markeren, en personen die met u geverifieerd hebben zullen het vertrouwen.",
+    "Verifying this user will mark their session as trusted, and also mark your session as trusted to them.": "Deze persoon verifiëren zal de sessie als vertrouwd markeren voor jullie beide.",
+    "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.": "Verifieer dit apparaat om het als vertrouwd te markeren. Door dit apparaat te vertrouwen geef je extra zekerheid aan jezelf en andere personen bij het gebruik van eind-tot-eind-versleutelde berichten.",
+    "Verifying this device will mark it as trusted, and users who have verified with you will trust this device.": "Dit apparaat verifiëren zal het als vertrouwd markeren, en personen die met je geverifieerd hebben zullen het vertrouwen.",
     "Integrations are disabled": "Integraties zijn uitgeschakeld",
-    "Enable 'Manage Integrations' in Settings to do this.": "Schakel de ‘Integratiebeheerder’ in in uw Instellingen om dit te doen.",
+    "Enable 'Manage Integrations' in Settings to do this.": "Schakel de ‘Integratiebeheerder’ in in je Instellingen om dit te doen.",
     "Integrations not allowed": "Integraties niet toegestaan",
     "Something went wrong trying to invite the users.": "Er is een fout opgetreden bij het uitnodigen van de personen.",
-    "We couldn't invite those users. Please check the users you want to invite and try again.": "Deze personen konden niet uitgenodigd worden. Controleer de personen die u wilt uitnodigen en probeer het opnieuw.",
+    "We couldn't invite those users. Please check the users you want to invite and try again.": "Deze personen konden niet uitgenodigd worden. Controleer de personen die je wil uitnodigen en probeer het opnieuw.",
     "Failed to find the following users": "Kon volgende personen niet vinden",
     "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "Volgende personen bestaan mogelijk niet of zijn ongeldig, en kunnen niet uitgenodigd worden: %(csvNames)s",
     "Recent Conversations": "Recente gesprekken",
@@ -1399,38 +1399,38 @@
     "Upgrade private room": "Privékamer upgraden",
     "Upgrade public room": "Publieke kamer upgraden",
     "Upgrading a room is an advanced action and is usually recommended when a room is unstable due to bugs, missing features or security vulnerabilities.": "Het bijwerken van een kamer is een gevorderde actie en wordt meestal aanbevolen wanneer een kamer onstabiel is door bugs, ontbrekende functies of problemen met de beveiliging.",
-    "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please <a>report a bug</a>.": "Dit heeft meestal enkel een invloed op de manier waarop de kamer door de server verwerkt wordt. Als u problemen met uw %(brand)s ondervindt, <a>dien dan een foutmelding in</a>.",
-    "You'll upgrade this room from <oldVersion /> to <newVersion />.": "U upgrade deze kamer van <oldVersion /> naar <newVersion />.",
+    "This usually only affects how the room is processed on the server. If you're having problems with your %(brand)s, please <a>report a bug</a>.": "Dit heeft meestal enkel een invloed op de manier waarop de kamer door de server verwerkt wordt. Als je problemen met je %(brand)s ondervindt, <a>dien dan een foutmelding in</a>.",
+    "You'll upgrade this room from <oldVersion /> to <newVersion />.": "Je upgrade deze kamer van <oldVersion /> naar <newVersion />.",
     "Verification Request": "Verificatieverzoek",
     "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Let op</b>: stel sleutelback-up enkel in op een vertrouwde computer.",
     "Remove for everyone": "Verwijderen voor iedereen",
     "Country Dropdown": "Landselectie",
-    "Confirm your identity by entering your account password below.": "Bevestig uw identiteit door hieronder uw wachtwoord in te voeren.",
+    "Confirm your identity by entering your account password below.": "Bevestig je identiteit door hieronder je wachtwoord in te voeren.",
     "Jump to first unread room.": "Ga naar het eerste ongelezen kamer.",
     "Jump to first invite.": "Ga naar de eerste uitnodiging.",
     "Go Back": "Terugkeren",
-    "Warning: Your personal data (including encryption keys) is still stored in this session. Clear it if you're finished using this session, or want to sign in to another account.": "Let op: uw persoonlijke gegevens (waaronder versleutelingssleutels) zijn nog steeds opgeslagen in deze sessie. Wis ze wanneer u klaar bent met deze sessie, of wanneer u wilt inloggen met een andere account.",
+    "Warning: Your personal data (including encryption keys) is still stored in this session. Clear it if you're finished using this session, or want to sign in to another account.": "Let op: Jouw persoonlijke gegevens (waaronder versleutelingssleutels) zijn nog steeds opgeslagen in deze sessie. Wis ze wanneer je klaar bent met deze sessie, of wanneer je wil inloggen met een andere account.",
     "Command Autocomplete": "Opdrachten autoaanvullen",
-    "Enter your account password to confirm the upgrade:": "Voer uw wachtwoord in om het upgraden te bevestigen:",
-    "Restore your key backup to upgrade your encryption": "Herstel uw sleutelback-up om uw versleuteling te upgraden",
+    "Enter your account password to confirm the upgrade:": "Voer je wachtwoord in om het upgraden te bevestigen:",
+    "Restore your key backup to upgrade your encryption": "Herstel je sleutelback-up om je versleuteling te upgraden",
     "Restore": "Herstellen",
-    "You'll need to authenticate with the server to confirm the upgrade.": "U zult moeten inloggen bij de server om het upgraden te bevestigen.",
-    "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 deze sessie om er andere sessies mee te verifiëren. Hiermee krijgen de andere sessies toegang tot uw versleutelde berichten en is het voor andere personen als vertrouwd gemarkeerd .",
+    "You'll need to authenticate with the server to confirm the upgrade.": "Je zal moeten inloggen bij de server om het upgraden te bevestigen.",
+    "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 deze sessie om er andere sessies mee te verifiëren. Hiermee krijgen de andere sessies toegang tot je versleutelde berichten en is het voor andere personen als vertrouwd gemarkeerd .",
     "Keep a copy of it somewhere secure, like a password manager or even a safe.": "Bewaar een kopie op een veilige plaats, zoals in een wachtwoordbeheerder of een kluis.",
     "Copy": "Kopiëren",
-    "Upgrade your encryption": "Upgrade uw versleuteling",
+    "Upgrade your encryption": "Upgrade je versleuteling",
     "Unable to set up secret storage": "Kan sleutelopslag niet instellen",
-    "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Zonder veilig berichtherstel in te stellen zult u uw versleutelde berichtgeschiedenis niet kunnen herstellen als u uitlogt of een andere sessie gebruikt.",
+    "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Zonder veilig berichtherstel in te stellen zal je jouw versleutelde berichtgeschiedenis niet kunnen herstellen als je uitlogt of een andere sessie gebruikt.",
     "Create key backup": "Sleutelback-up aanmaken",
-    "This session is encrypting history using the new recovery method.": "Deze sessie versleutelt uw geschiedenis aan de hand van de nieuwe herstelmethode.",
-    "If you did this accidentally, you can setup Secure Messages on this session which will re-encrypt this session's message history with a new recovery method.": "Als u dit per ongeluk heeft gedaan, kunt u beveiligde berichten op deze sessie instellen, waarmee de berichtgeschiedenis van deze sessie opnieuw zal versleuteld worden aan de hand van een nieuwe herstelmethode.",
+    "This session is encrypting history using the new recovery method.": "Deze sessie versleutelt je geschiedenis aan de hand van de nieuwe herstelmethode.",
+    "If you did this accidentally, you can setup Secure Messages on this session which will re-encrypt this session's message history with a new recovery method.": "Als je dit per ongeluk hebt gedaan, kan je beveiligde berichten op deze sessie instellen, waarmee de berichtgeschiedenis van deze sessie opnieuw zal versleuteld worden aan de hand van een nieuwe herstelmethode.",
     "Disable": "Uitschakelen",
-    "%(brand)s is securely caching encrypted messages locally for them to appear in search results:": "%(brand)s bewaart versleutelde berichten veilig in het lokale cachegeheugen om ze in uw zoekresultaten te laten verschijnen:",
+    "%(brand)s is securely caching encrypted messages locally for them to appear in search results:": "%(brand)s bewaart versleutelde berichten veilig in het lokale cachegeheugen om ze in je zoekresultaten te laten verschijnen:",
     "Space used:": "Gebruikte Space:",
     "Indexed messages:": "Geïndexeerde berichten:",
     "Message downloading sleep time(ms)": "Wachttijd voor downloaden van berichten (ms)",
     "Mark all as read": "Alles markeren als gelezen",
-    "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>.": "Bekijk eerst het <a>openbaarmakingsbeleid</a> van Matrix.org als u een probleem met de beveiliging van Matrix wilt melden.",
+    "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>.": "Bekijk eerst het <a>openbaarmakingsbeleid</a> van Matrix.org als je een probleem met de beveiliging van Matrix wilt melden.",
     "Not currently indexing messages for any room.": "Er worden momenteel voor geen enkele kamer berichten geïndexeerd.",
     "%(doneRooms)s out of %(totalRooms)s": "%(doneRooms)s van %(totalRooms)s",
     "Use Single Sign On to continue": "Ga verder met eenmalige aanmelding",
@@ -1441,7 +1441,7 @@
     "Confirm adding this phone number by using Single Sign On to prove your identity.": "Bevestig je identiteit met je eenmalige aanmelding om dit telefoonnummer toe te voegen.",
     "Confirm adding phone number": "Bevestig toevoegen van het telefoonnummer",
     "Click the button below to confirm adding this phone number.": "Klik op de knop hieronder om het toevoegen van dit telefoonnummer te bevestigen.",
-    "New login. Was this you?": "Nieuwe login gevonden. Was u dat?",
+    "New login. Was this you?": "Nieuwe login gevonden. Was jij dat?",
     "%(name)s is requesting verification": "%(name)s verzoekt om verificatie",
     "Sends a message as html, without interpreting it as markdown": "Stuurt een bericht als HTML, zonder markdown toe te passen",
     "Could not find user in room": "Kan die persoon in de kamer niet vinden",
@@ -1455,19 +1455,19 @@
     "%(senderName)s changed the alternative addresses for this room.": "%(senderName)s heeft de nevenadressen voor deze kamer gewijzigd.",
     "%(senderName)s changed the main and alternative addresses for this room.": "%(senderName)s heeft hoofd- en nevenadressen voor deze kamer gewijzigd.",
     "%(senderName)s changed the addresses for this room.": "%(senderName)s heeft de adressen voor deze kamer gewijzigd.",
-    "You signed in to a new session without verifying it:": "U heeft zich bij een nog niet geverifieerde sessie aangemeld:",
-    "Verify your other session using one of the options below.": "Verifieer uw andere sessie op een van onderstaande wijzen.",
+    "You signed in to a new session without verifying it:": "Je hebt je bij een nog niet geverifieerde sessie aangemeld:",
+    "Verify your other session using one of the options below.": "Verifieer je andere sessie op een van onderstaande wijzen.",
     "Manually Verify by Text": "Handmatig middels een tekst",
     "Interactively verify by Emoji": "Interactief middels emojis",
     "Support adding custom themes": "Maatwerkthema's ondersteuning",
     "Opens chat with the given user": "Start een chat met die persoon",
     "Sends a message to the given user": "Zendt die persoon een bericht",
-    "Confirm your account deactivation by using Single Sign On to prove your identity.": "Bevestig de deactivering van uw account door gebruik te maken van eenmalige aanmelding om uw identiteit te bewijzen.",
-    "Are you sure you want to deactivate your account? This is irreversible.": "Weet u zeker dat u uw account wil sluiten? Dit is onomkeerbaar.",
+    "Confirm your account deactivation by using Single Sign On to prove your identity.": "Bevestig de deactivering van je account door gebruik te maken van eenmalige aanmelding om je identiteit te bewijzen.",
+    "Are you sure you want to deactivate your account? This is irreversible.": "Weet je zeker dat je jouw account wil sluiten? Dit is onomkeerbaar.",
     "Confirm account deactivation": "Bevestig accountsluiting",
     "Joins room with given address": "Neem aan de kamer met dat adres deel",
-    "Your homeserver has exceeded its user limit.": "Uw homeserver heeft het maximaal aantal personen overschreden.",
-    "Your homeserver has exceeded one of its resource limits.": "Uw homeserver heeft een van zijn limieten overschreden.",
+    "Your homeserver has exceeded its user limit.": "Jouw homeserver heeft het maximaal aantal personen overschreden.",
+    "Your homeserver has exceeded one of its resource limits.": "Jouw homeserver heeft een van zijn limieten overschreden.",
     "Ok": "Oké",
     "Light": "Helder",
     "Dark": "Donker",
@@ -1734,26 +1734,26 @@
     "Belarus": "Wit-Rusland",
     "Barbados": "Barbados",
     "Bangladesh": "Bangladesh",
-    "See when the name changes in your active room": "Zien wanneer de naam in uw actieve kamer veranderd",
-    "Change the name of your active room": "Verander de naam van uw actieve kamer",
+    "See when the name changes in your active room": "Zien wanneer de naam in je actieve kamer veranderd",
+    "Change the name of your active room": "Verander de naam van je actieve kamer",
     "See when the name changes in this room": "Zien wanneer de naam in deze kamer veranderd",
     "Change the name of this room": "Verander de naam van deze kamer",
-    "See when the topic changes in your active room": "Zien wanneer het onderwerp veranderd van uw actieve kamer",
-    "Change the topic of your active room": "Verander het onderwerp van uw actieve kamer",
+    "See when the topic changes in your active room": "Zien wanneer het onderwerp veranderd van je actieve kamer",
+    "Change the topic of your active room": "Verander het onderwerp van je actieve kamer",
     "See when the topic changes in this room": "Zien wanneer het onderwerp van deze kamer veranderd",
     "Change the topic of this room": "Verander het onderwerp van deze kamer",
-    "Change which room, message, or user you're viewing": "Verander welk kamer, bericht of welke persoon u ziet",
-    "Change which room you're viewing": "Verander welke kamer u ziet",
+    "Change which room, message, or user you're viewing": "Verander welke kamer, welk bericht of welk persoon je ziet",
+    "Change which room you're viewing": "Verander welke kamer je ziet",
     "Places the call in the current room on hold": "De huidige oproep in de wacht zetten",
     "Effects": "Effecten",
-    "Are you sure you want to cancel entering passphrase?": "Weet u zeker, dat u het invoeren van uw wachtwoord wilt afbreken?",
+    "Are you sure you want to cancel entering passphrase?": "Weet je zeker, dat je het invoeren van je wachtwoord wilt afbreken?",
     "Vatican City": "Vaticaanstad",
     "Taiwan": "Taiwan",
-    "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.": "Uw homeserver wees uw inlogpoging af. Dit kan zijn doordat het te lang heeft geduurd. Probeer het opnieuw. Als dit probleem zich blijft voordoen, neem contact op met de beheerder van uw homeserver.",
-    "Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "Uw homeserver was onbereikbaar en kon u niet inloggen, probeer het opnieuw. Wanneer dit probleem zich blijft voordoen, neem contact op met de beheerder van uw homeserver.",
+    "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.": "Jouw homeserver wees je inlogpoging af. Dit kan zijn doordat het te lang heeft geduurd. Probeer het opnieuw. Als dit probleem zich blijft voordoen, neem contact op met de beheerder van je homeserver.",
+    "Your homeserver was unreachable and was not able to log you in. Please try again. If this continues, please contact your homeserver administrator.": "Jouw homeserver was onbereikbaar en kon je niet inloggen, probeer het opnieuw. Wanneer dit probleem zich blijft voordoen, neem contact op met de beheerder van je homeserver.",
     "Try again": "Probeer opnieuw",
-    "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.": "De browser is verzocht uw homeserver te onthouden die u gebruikt om in te loggen, maar helaas heeft de browser deze vergeten. Ga naar de inlog-pagina en probeer het opnieuw.",
-    "We couldn't log you in": "We konden u niet inloggen",
+    "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.": "De browser is verzocht de homeserver te onthouden die je gebruikt om in te loggen, maar helaas is de browser deze vergeten. Ga naar de inlog-pagina en probeer het opnieuw.",
+    "We couldn't log you in": "We konden je niet inloggen",
     "Room Info": "Kamerinfo",
     "Explore Public Rooms": "Publieke kamers ontdekken",
     "This room is public": "Deze kamer is publiek",
@@ -1770,7 +1770,7 @@
     "All settings": "Instellingen",
     "Error removing address": "Fout bij verwijderen van adres",
     "There was an error removing that address. It may no longer exist or a temporary error occurred.": "Er is een fout opgetreden bij het verwijderen van dit adres. Deze bestaat mogelijk niet meer, of er is een tijdelijke fout opgetreden.",
-    "You don't have permission to delete the address.": "U heeft geen toestemming om het adres te verwijderen.",
+    "You don't have permission to delete the address.": "Je hebt geen toestemming om het adres te verwijderen.",
     "There was an error creating that address. It may not be allowed by the server or a temporary failure occurred.": "Er is een fout opgetreden bij het aanmaken van dit adres. Dit wordt mogelijk niet toegestaan door de server, of er is een tijdelijk probleem opgetreden.",
     "Error creating address": "Fout bij aanmaken van het adres",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "Er is een fout opgetreden bij het bijwerken van de bijnaam van de kamer. Dit wordt mogelijk niet toegestaan door de server of er is een tijdelijk probleem opgetreden.",
@@ -1789,11 +1789,11 @@
     "Hide Widgets": "Widgets verbergen",
     "This is the start of <roomName/>.": "Dit is het begin van <roomName/>.",
     "%(displayName)s created this room.": "%(displayName)s heeft deze kamer aangemaakt.",
-    "You created this room.": "U heeft deze kamer gemaakt.",
+    "You created this room.": "Jij hebt deze kamer gemaakt.",
     "Topic: %(topic)s ": "Onderwerp: %(topic)s ",
     "Topic: %(topic)s (<a>edit</a>)": "Onderwerp: %(topic)s (<a>bewerken</a>)",
-    "This is the beginning of your direct message history with <displayName/>.": "Dit is het begin van uw direct gesprek met <displayName/>.",
-    "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "De beheerder van uw server heeft eind-tot-eind-versleuteling standaard uitgeschakeld in alle privékamers en directe gesprekken.",
+    "This is the beginning of your direct message history with <displayName/>.": "Dit is het begin van je direct gesprek met <displayName/>.",
+    "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "De beheerder van je server heeft eind-tot-eind-versleuteling standaard uitgeschakeld in alle privékamers en directe gesprekken.",
     "Scroll to most recent messages": "Spring naar meest recente bericht",
     "The authenticity of this encrypted message can't be guaranteed on this device.": "De echtheid van dit versleutelde bericht kan op dit apparaat niet worden gegarandeerd.",
     "To link to this room, please add an address.": "Voeg een adres toe om naar deze kamer te kunnen verwijzen.",
@@ -1841,25 +1841,25 @@
     "%(senderName)s is calling": "%(senderName)s belt",
     "Waiting for answer": "Wachten op antwoord",
     "%(senderName)s started a call": "%(senderName)s heeft een oproep gestart",
-    "You started a call": "U heeft een oproep gestart",
+    "You started a call": "Je hebt een oproep gestart",
     "Call ended": "Oproep beëindigd",
     "%(senderName)s ended the call": "%(senderName)s heeft opgehangen",
-    "You ended the call": "U heeft opgehangen",
+    "You ended the call": "Je hebt opgehangen",
     "Call in progress": "Oproep gaande",
     "%(senderName)s joined the call": "%(senderName)s neemt deel aan de oproep",
-    "You joined the call": "U heeft deelgenomen aan de oproep",
+    "You joined the call": "Je hebt deelgenomen aan de oproep",
     "New version of %(brand)s is available": "Nieuwe versie van %(brand)s is beschikbaar",
     "Update %(brand)s": "%(brand)s updaten",
-    "You've previously used a newer version of %(brand)s with this session. To use this version again with end to end encryption, you will need to sign out and back in again.": "U heeft eerder een nieuwere versie van %(brand)s in deze sessie gebruikt. Om deze versie opnieuw met eind-tot-eind-versleuteling te gebruiken, zult u moeten uitloggen en opnieuw inloggen.",
+    "You've previously used a newer version of %(brand)s with this session. To use this version again with end to end encryption, you will need to sign out and back in again.": "Je hebt eerder een nieuwere versie van %(brand)s in deze sessie gebruikt. Om deze versie opnieuw met eind-tot-eind-versleuteling te gebruiken, zal je moeten uitloggen en opnieuw inloggen.",
     "Block anyone not part of %(serverName)s from ever joining this room.": "Weiger iedereen die geen deel uitmaakt van %(serverName)s om toe te treden tot deze kamer.",
     "Enable end-to-end encryption": "Eind-tot-eind-versleuteling inschakelen",
-    "Your server requires encryption to be enabled in private rooms.": "Uw server vereist dat versleuteling in een privékamer is ingeschakeld.",
+    "Your server requires encryption to be enabled in private rooms.": "Jouw server vereist dat versleuteling in een privékamer is ingeschakeld.",
     "Reason (optional)": "Reden (niet vereist)",
     "Download logs": "Logs downloaden",
     "Server name": "Servernaam",
     "Add a new server": "Een nieuwe server toevoegen",
     "Matrix": "Matrix",
-    "Your server": "Uw server",
+    "Your server": "Jouw server",
     "Can't find this server or its room list": "Kan de server of haar kamergids niet vinden",
     "Looks good": "Ziet er goed uit",
     "Enter a server name": "Geef een servernaam",
@@ -1884,36 +1884,36 @@
     "Join the conference at the top of this room": "Deelnemen aan de vergadering bovenaan deze kamer",
     "Ignored attempt to disable encryption": "Poging om versleuteling uit te schakelen genegeerd",
     "Start verification again from the notification.": "Verificatie opnieuw beginnen vanuit de melding.",
-    "You've successfully verified %(deviceName)s (%(deviceId)s)!": "U heeft %(deviceName)s (%(deviceId)s) geverifieerd!",
-    "You've successfully verified your device!": "U heeft uw apparaat geverifieerd!",
+    "You've successfully verified %(deviceName)s (%(deviceId)s)!": "Je hebt %(deviceName)s (%(deviceId)s) geverifieerd!",
+    "You've successfully verified your device!": "Je hebt je apparaat geverifieerd!",
     "Almost there! Is %(displayName)s showing the same shield?": "Bijna klaar! Toont %(displayName)s hetzelfde schild?",
     "Room settings": "Kamerinstellingen",
     "About": "Over",
     "Not encrypted": "Niet versleuteld",
     "Widgets": "Widgets",
     "Unpin": "Losmaken",
-    "You can only pin up to %(count)s widgets|other": "U kunt maar %(count)s widgets vastzetten",
-    "In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.": "In versleutelde kamers zijn uw berichten beveiligd, enkel de ontvanger en u hebben de unieke sleutels om ze te ontsleutelen.",
-    "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Stel een adres in zodat personen deze kamer via uw homeserver (%(localDomain)s) kunnen vinden",
+    "You can only pin up to %(count)s widgets|other": "Je kunt maar %(count)s widgets vastzetten",
+    "In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.": "In versleutelde kamers zijn jouw berichten beveiligd, enkel de ontvanger en jij hebben de unieke sleutels om ze te ontsleutelen.",
+    "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Stel een adres in zodat personen deze kamer via jouw homeserver (%(localDomain)s) kunnen vinden",
     "Local Addresses": "Lokale adressen",
     "Local address": "Lokaal adres",
-    "The server has denied your request.": "De server heeft uw verzoek afgewezen.",
+    "The server has denied your request.": "De server heeft je verzoek afgewezen.",
     "The server is offline.": "De server is offline.",
-    "A browser extension is preventing the request.": "Een invoertoepassing van uw browser verhindert de aanvraag.",
+    "A browser extension is preventing the request.": "Een invoertoepassing van je browser verhindert de aanvraag.",
     "The server (%(serverName)s) took too long to respond.": "De server (%(serverName)s) deed er te lang over om te antwoorden.",
     "Server isn't responding": "Server reageert niet",
-    "You're all caught up.": "U bent helemaal bij.",
-    "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>.": "Let op, wanneer u geen e-mailadres toevoegt en uw wachtwoord vergeet, kunt u <b>toegang tot uw account permanent verliezen</b>.",
+    "You're all caught up.": "Je bent helemaal bij.",
+    "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>.": "Let op, wanneer je geen e-mailadres toevoegt en je jouw wachtwoord vergeet, kan je <b>toegang tot je account permanent verliezen</b>.",
     "Continuing without email": "Doorgaan zonder e-mail",
     "If they don't match, the security of your communication may be compromised.": "Als deze niet overeenkomen, dan wordt deze sessie mogelijk door iemand anders onderschept.",
-    "Confirm by comparing the following with the User Settings in your other session:": "Bevestig door het volgende te vergelijken met de persoonsinstellingen in uw andere sessie:",
+    "Confirm by comparing the following with the User Settings in your other session:": "Bevestig door het volgende te vergelijken met de persoonsinstellingen in je andere sessie:",
     "Signature upload failed": "Versturen van ondertekening mislukt",
     "Signature upload success": "Ondertekening succesvol verstuurd",
     "Unable to upload": "Versturen niet mogelijk",
     "Transfer": "Doorschakelen",
     "Start a conversation with someone using their name or username (like <userId/>).": "Start een kamer met iemand door hun naam of inlognaam (zoals <userId/>) te typen.",
     "Invite by email": "Via e-mail uitnodigen",
-    "Click the button below to confirm your identity.": "Druk op de knop hieronder om uw identiteit te bevestigen.",
+    "Click the button below to confirm your identity.": "Druk op de knop hieronder om je identiteit te bevestigen.",
     "Confirm to continue": "Bevestig om door te gaan",
     "Report a bug": "Een bug rapporteren",
     "Comment": "Opmerking",
@@ -1928,7 +1928,7 @@
     "Show message previews for reactions in DMs": "Berichtvoorbeelden voor reacties in directe chats tonen",
     "Safeguard against losing access to encrypted messages & data": "Beveiliging tegen verlies van toegang tot versleutelde berichten en gegevens",
     "Set up Secure Backup": "Beveiligde back-up instellen",
-    "Contact your <a>server admin</a>.": "Neem contact op met uw <a>serverbeheerder</a>.",
+    "Contact your <a>server admin</a>.": "Neem contact op met je <a>serverbeheerder</a>.",
     "Use app": "Gebruik app",
     "Use app for a better experience": "Gebruik de app voor een betere ervaring",
     "Enable desktop notifications": "Bureaubladmeldingen inschakelen",
@@ -1936,54 +1936,54 @@
     "Unknown App": "Onbekende app",
     "Error leaving room": "Fout bij verlaten kamer",
     "Unexpected server error trying to leave the room": "Onverwachte serverfout bij het verlaten van deze kamer",
-    "See <b>%(msgtype)s</b> messages posted to your active room": "Zie <b>%(msgtype)s</b>-berichten verstuurd in uw actieve kamer",
+    "See <b>%(msgtype)s</b> messages posted to your active room": "Zie <b>%(msgtype)s</b>-berichten verstuurd in je actieve kamer",
     "See <b>%(msgtype)s</b> messages posted to this room": "Zie <b>%(msgtype)s</b>-berichten verstuurd in deze kamer",
-    "Send <b>%(msgtype)s</b> messages as you in your active room": "Stuur <b>%(msgtype)s</b>-berichten als uzelf in uw actieve kamer",
-    "Send <b>%(msgtype)s</b> messages as you in this room": "Stuur <b>%(msgtype)s</b>-berichten als uzelf in deze kamer",
-    "See general files posted to your active room": "Zie bestanden verstuurd naar uw actieve kamer",
+    "Send <b>%(msgtype)s</b> messages as you in your active room": "Stuur <b>%(msgtype)s</b>-berichten als jezelf in je actieve kamer",
+    "Send <b>%(msgtype)s</b> messages as you in this room": "Stuur <b>%(msgtype)s</b>-berichten als jezelf in deze kamer",
+    "See general files posted to your active room": "Zie bestanden verstuurd naar je actieve kamer",
     "See general files posted to this room": "Zie bestanden verstuurd naar deze kamer",
-    "Send general files as you in your active room": "Stuur bestanden als uzelf in uw actieve kamer",
-    "Send general files as you in this room": "Stuur bestanden als uzelf in deze kamer",
-    "See videos posted to your active room": "Zie videos verstuurd naar uw actieve kamer",
+    "Send general files as you in your active room": "Stuur bestanden als jezelf in je actieve kamer",
+    "Send general files as you in this room": "Stuur bestanden als jezelf in deze kamer",
+    "See videos posted to your active room": "Zie videos verstuurd naar je actieve kamer",
     "See videos posted to this room": "Zie videos verstuurd naar deze kamer",
-    "Send videos as you in your active room": "Stuur videos als uzelf in uw actieve kamer",
-    "Send videos as you in this room": "Stuur videos als uzelf in deze kamer",
-    "See images posted to your active room": "Zie afbeeldingen verstuurd in uw actieve kamer",
+    "Send videos as you in your active room": "Stuur videos als jezelf in je actieve kamer",
+    "Send videos as you in this room": "Stuur videos als jezelf in deze kamer",
+    "See images posted to your active room": "Zie afbeeldingen verstuurd in je actieve kamer",
     "See images posted to this room": "Zie afbeeldingen verstuurd in deze kamer",
-    "Send images as you in your active room": "Stuur afbeeldingen als uzelf in uw actieve kamer",
-    "Send images as you in this room": "Stuur afbeeldingen als uzelf in deze kamer",
-    "See emotes posted to your active room": "Zie emoticons verstuurd naar uw actieve kamer",
+    "Send images as you in your active room": "Stuur afbeeldingen als jezelf in je actieve kamer",
+    "Send images as you in this room": "Stuur afbeeldingen als jezelf in deze kamer",
+    "See emotes posted to your active room": "Zie emoticons verstuurd naar je actieve kamer",
     "See emotes posted to this room": "Zie emoticons verstuurd naar deze kamer",
-    "Send emotes as you in your active room": "Stuur emoticons als uzelf in uw actieve kamer",
-    "Send emotes as you in this room": "Stuur emoticons als uzelf in deze kamer",
-    "See text messages posted to your active room": "Zie tekstberichten verstuurd naar uw actieve kamer",
+    "Send emotes as you in your active room": "Stuur emoticons als jezelf in je actieve kamer",
+    "Send emotes as you in this room": "Stuur emoticons als jezelf in deze kamer",
+    "See text messages posted to your active room": "Zie tekstberichten verstuurd naar je actieve kamer",
     "See text messages posted to this room": "Zie tekstberichten verstuurd naar deze kamer",
-    "Send text messages as you in your active room": "Stuur tekstberichten als uzelf in uw actieve kamer",
-    "Send text messages as you in this room": "Stuur tekstberichten als uzelf in deze kamer",
-    "See messages posted to your active room": "Zie berichten verstuurd naar uw actieve kamer",
+    "Send text messages as you in your active room": "Stuur tekstberichten als jezelf in je actieve kamer",
+    "Send text messages as you in this room": "Stuur tekstberichten als jezelf in deze kamer",
+    "See messages posted to your active room": "Zie berichten verstuurd naar je actieve kamer",
     "See messages posted to this room": "Zie berichten verstuurd naar deze kamer",
-    "Send messages as you in your active room": "Stuur berichten als uzelf in uw actieve kamer",
-    "Send messages as you in this room": "Stuur berichten als uzelf in deze kamer",
+    "Send messages as you in your active room": "Stuur berichten als jezelf in je actieve kamer",
+    "Send messages as you in this room": "Stuur berichten als jezelf in deze kamer",
     "End": "End",
     "The <b>%(capability)s</b> capability": "De <b>%(capability)s</b> mogelijkheid",
-    "See <b>%(eventType)s</b> events posted to your active room": "Stuur <b>%(eventType)s</b> gebeurtenissen verstuurd in uw actieve kamer",
-    "Send <b>%(eventType)s</b> events as you in your active room": "Stuur <b>%(eventType)s</b> gebeurtenissen als uzelf in uw actieve kamer",
+    "See <b>%(eventType)s</b> events posted to your active room": "Stuur <b>%(eventType)s</b> gebeurtenissen verstuurd in je actieve kamer",
+    "Send <b>%(eventType)s</b> events as you in your active room": "Stuur <b>%(eventType)s</b> gebeurtenissen als jezelf in je actieve kamer",
     "See <b>%(eventType)s</b> events posted to this room": "Zie <b>%(eventType)s</b> gebeurtenissen verstuurd in deze kamer",
-    "Send <b>%(eventType)s</b> events as you in this room": "Stuur <b>%(eventType)s</b> gebeurtenis als uzelf in deze kamer",
+    "Send <b>%(eventType)s</b> events as you in this room": "Stuur <b>%(eventType)s</b> gebeurtenis als jezelf in deze kamer",
     "with state key %(stateKey)s": "met statussleutel %(stateKey)s",
     "with an empty state key": "met een lege statussleutel",
-    "See when anyone posts a sticker to your active room": "Zien wanneer iemand een sticker in uw actieve kamer verstuurd",
-    "Send stickers to your active room as you": "Stuur stickers naar uw actieve kamer als uzelf",
+    "See when anyone posts a sticker to your active room": "Zien wanneer iemand een sticker in je actieve kamer verstuurd",
+    "Send stickers to your active room as you": "Stuur stickers naar je actieve kamer als jezelf",
     "See when a sticker is posted in this room": "Zien wanneer stickers in deze kamer zijn verstuurd",
-    "Send stickers to this room as you": "Stuur stickers in deze kamer als uzelf",
-    "See when the avatar changes in your active room": "Zien wanneer de afbeelding in uw actieve kamer veranderd",
-    "Change the avatar of your active room": "Wijzig de afbeelding van uw actieve kamer",
+    "Send stickers to this room as you": "Stuur stickers in deze kamer als jezelf",
+    "See when the avatar changes in your active room": "Zien wanneer de afbeelding in je actieve kamer veranderd",
+    "Change the avatar of your active room": "Wijzig de afbeelding van je actieve kamer",
     "See when the avatar changes in this room": "Zien wanneer de afbeelding in deze kamer veranderd",
     "Change the avatar of this room": "Wijzig de kamerafbeelding",
-    "Send stickers into your active room": "Stuur stickers in uw actieve kamer",
+    "Send stickers into your active room": "Stuur stickers in je actieve kamer",
     "Send stickers into this room": "Stuur stickers in deze kamer",
-    "Remain on your screen while running": "Blijft op uw scherm terwijl het beschikbaar is",
-    "Remain on your screen when viewing another room, when running": "Blijft op uw scherm wanneer u een andere kamer bekijkt, zolang het bezig is",
+    "Remain on your screen while running": "Blijft op jouw scherm terwijl het beschikbaar is",
+    "Remain on your screen when viewing another room, when running": "Blijft op jouw scherm wanneer je een andere kamer bekijkt, zolang het bezig is",
     "🎉 All servers are banned from participating! This room can no longer be used.": "🎉 Alle servers zijn verbannen van deelname! Deze kamer kan niet langer gebruikt worden.",
     "%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s veranderde de server ACL's voor deze kamer.",
     "%(senderDisplayName)s set the server ACLs for this room.": "%(senderDisplayName)s stelde de server ACL's voor deze kamer in.",
@@ -2004,15 +2004,15 @@
     "Add theme": "Thema toevoegen",
     "No recently visited rooms": "Geen onlangs bezochte kamers",
     "Use the <a>Desktop app</a> to see all encrypted files": "Gebruik de <a>Desktop-app</a> om alle versleutelde bestanden te zien",
-    "Reminder: Your browser is unsupported, so your experience may be unpredictable.": "Herinnering: Uw browser wordt niet ondersteund. Dit kan een negatieve impact hebben op uw ervaring.",
-    "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Bekijk eerst de <existingIssuesLink>bestaande bugs op GitHub</existingIssuesLink>. <newIssueLink>Maak een nieuwe aan</newIssueLink> wanneer u uw bugs niet heeft gevonden.",
+    "Reminder: Your browser is unsupported, so your experience may be unpredictable.": "Herinnering: Jouw browser wordt niet ondersteund. Dit kan een negatieve impact hebben op je ervaring.",
+    "Please view <existingIssuesLink>existing bugs on Github</existingIssuesLink> first. No match? <newIssueLink>Start a new one</newIssueLink>.": "Bekijk eerst de <existingIssuesLink>bestaande bugs op GitHub</existingIssuesLink>. <newIssueLink>Maak een nieuwe aan</newIssueLink> wanneer je jouw bugs niet hebt gevonden.",
     "Invite someone using their name, email address, username (like <userId/>) or <a>share this room</a>.": "Nodig iemand uit door gebruik te maken van hun naam, e-mailadres, inlognaam (zoals <userId/>) of <a>deel deze kamer</a>.",
     "Invite someone using their name, username (like <userId/>) or <a>share this room</a>.": "Nodig iemand uit door gebruik te maken van hun naam, inlognaam (zoals <userId/>) of <a>deel deze kamer</a>.",
     "Send feedback": "Feedback versturen",
     "Feedback": "Feedback",
     "Feedback sent": "Feedback verstuurd",
     "Workspace: <networkLink/>": "Werkplaats: <networkLink/>",
-    "Your firewall or anti-virus is blocking the request.": "Uw firewall of antivirussoftware blokkeert de aanvraag.",
+    "Your firewall or anti-virus is blocking the request.": "Jouw firewall of antivirussoftware blokkeert de aanvraag.",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Stel de naam in van een lettertype dat op uw systeem is geïnstalleerd en %(brand)s zal proberen het te gebruiken.",
     "Toggle right panel": "Rechterpaneel in- of uitschakelen",
     "Toggle the top left menu": "Het menu linksboven in- of uitschakelen",
@@ -2047,64 +2047,64 @@
     "Calls": "Oproepen",
     "Navigation": "Navigatie",
     "Currently indexing: %(currentRoom)s": "Momenteel indexeren: %(currentRoom)s",
-    "This session has detected that your Security Phrase and key for Secure Messages have been removed.": "Deze sessie heeft ontdekt dat uw veiligheidswachtwoord en -sleutel voor versleutelde berichten zijn verwijderd.",
+    "This session has detected that your Security Phrase and key for Secure Messages have been removed.": "Deze sessie heeft ontdekt dat je veiligheidswachtwoord en -sleutel voor versleutelde berichten zijn verwijderd.",
     "A new Security Phrase and key for Secure Messages have been detected.": "Er is een nieuwe veiligheidswachtwoord en -sleutel voor versleutelde berichten gedetecteerd.",
-    "Save your Security Key": "Uw veiligheidssleutel opslaan",
+    "Save your Security Key": "Jouw veiligheidssleutel opslaan",
     "Confirm Security Phrase": "Veiligheidswachtwoord bevestigen",
     "Set a Security Phrase": "Een veiligheidswachtwoord instellen",
-    "You can also set up Secure Backup & manage your keys in Settings.": "U kunt ook een beveiligde back-up instellen en uw sleutels beheren via instellingen.",
+    "You can also set up Secure Backup & manage your keys in Settings.": "Je kan ook een beveiligde back-up instellen en je sleutels beheren via instellingen.",
     "Secure Backup": "Beveiligde back-up",
     "Unable to access secret storage. Please verify that you entered the correct Security Phrase.": "Geen toegang tot geheime opslag. Controleer of u het juiste veiligheidswachtwoord hebt ingevoerd.",
     "Secret storage:": "Sleutelopslag:",
     "Unable to query secret storage status": "Kan status sleutelopslag niet opvragen",
     "Use a different passphrase?": "Gebruik een ander wachtwoord?",
-    "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Bescherm uw server tegen toegangsverlies tot versleutelde berichten en gegevens door een back-up te maken van de versleutelingssleutels.",
-    "Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Gebruik een veiligheidswachtwoord die alleen u kent, en sla optioneel een veiligheidssleutel op om te gebruiken als back-up.",
+    "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Bescherm je server tegen toegangsverlies tot versleutelde berichten en gegevens door een back-up te maken van de versleutelingssleutels.",
+    "Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Gebruik een veiligheidswachtwoord die alleen jij kent, en sla optioneel een veiligheidssleutel op om te gebruiken als back-up.",
     "Generate a Security Key": "Genereer een veiligheidssleutel",
-    "Make a copy of your Security Key": "Maak een kopie van uw veiligheidssleutel",
-    "Confirm your Security Phrase": "Bevestig uw veiligheidswachtwoord",
-    "Secure your backup with a Security Phrase": "Beveilig uw back-up met een veiligheidswachtwoord",
-    "Your Security Key is in your <b>Downloads</b> folder.": "Uw veiligheidssleutel staat in uw <b>Downloads</b>-map.",
-    "Your Security Key has been <b>copied to your clipboard</b>, paste it to:": "Uw veiligheidssleutel is <b>gekopieerd naar uw klembord</b>, plak het in:",
-    "Your Security Key": "Uw veiligheidssleutel",
-    "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Uw veiligheidssleutel is een vangnet - u kunt hem gebruiken om de toegang tot uw versleutelde berichten te herstellen als u uw veiligheidswachtwoord bent vergeten.",
-    "Repeat your Security Phrase...": "Herhaal uw veiligheidswachtwoord...",
+    "Make a copy of your Security Key": "Maak een kopie van je veiligheidssleutel",
+    "Confirm your Security Phrase": "Bevestig je veiligheidswachtwoord",
+    "Secure your backup with a Security Phrase": "Beveilig jouw back-up met een veiligheidswachtwoord",
+    "Your Security Key is in your <b>Downloads</b> folder.": "Jouw veiligheidssleutel staat in je <b>Downloads</b>-map.",
+    "Your Security Key has been <b>copied to your clipboard</b>, paste it to:": "Jouw veiligheidssleutel is <b>gekopieerd naar je klembord</b>, plak het in:",
+    "Your Security Key": "Jouw veiligheidssleutel",
+    "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Jouw veiligheidssleutel is een vangnet - je kunt hem gebruiken om de toegang tot je versleutelde berichten te herstellen als je jouw veiligheidswachtwoord bent vergeten.",
+    "Repeat your Security Phrase...": "Herhaal je veiligheidswachtwoord...",
     "Set up with a Security Key": "Instellen met een veiligheidssleutel",
     "Great! This Security Phrase looks strong enough.": "Geweldig. Dit veiligheidswachtwoord ziet er sterk genoeg uit.",
     "Enter a Security Phrase": "Veiligheidswachtwoord invoeren",
-    "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "Wij bewaren een versleutelde kopie van uw sleutels op onze server. Beveilig uw back-up met een veiligheidswachtwoord.",
-    "Decide where your account is hosted": "Kies waar uw account wordt gehost",
-    "Host account on": "Host uw account op",
-    "Already have an account? <a>Sign in here</a>": "Heeft u al een account? <a>Inloggen</a>",
+    "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "Wij bewaren een versleutelde kopie van jouw sleutels op onze server. Beveilig je back-up met een veiligheidswachtwoord.",
+    "Decide where your account is hosted": "Kies waar je account wordt gehost",
+    "Host account on": "Host je account op",
+    "Already have an account? <a>Sign in here</a>": "Heb je al een account? <a>Inloggen</a>",
     "%(ssoButtons)s Or %(usernamePassword)s": "%(ssoButtons)s of %(usernamePassword)s",
     "Continue with %(ssoButtons)s": "Ga verder met %(ssoButtons)s",
     "New? <a>Create account</a>": "Nieuw? <a>Maak een account aan</a>",
-    "If you've joined lots of rooms, this might take a while": "Als u zich bij veel kamers heeft aangesloten kan dit een tijdje duren",
+    "If you've joined lots of rooms, this might take a while": "Als je bij veel kamers bent aangesloten kan dit een tijdje duren",
     "Signing In...": "Inloggen...",
     "Syncing...": "Synchroniseren...",
     "There was a problem communicating with the homeserver, please try again later.": "Er was een communicatieprobleem met de homeserver, probeer het later opnieuw.",
     "User menu": "Persoonsmenu",
     "Switch theme": "Thema wisselen",
     "New here? <a>Create an account</a>": "Nieuw hier? <a>Maak een account</a>",
-    "Got an account? <a>Sign in</a>": "Heeft u een account? <a>Inloggen</a>",
+    "Got an account? <a>Sign in</a>": "Heb je een account? <a>Inloggen</a>",
     "delete the address.": "het adres verwijderen.",
     "Delete the room address %(alias)s and remove %(name)s from the directory?": "Het kameradres %(alias)s en %(name)s uit de gids verwijderen?",
-    "You have no visible notifications.": "U hebt geen zichtbare meldingen.",
-    "Now, let's help you get started": "Laten we u helpen om te beginnen",
+    "You have no visible notifications.": "Je hebt geen zichtbare meldingen.",
+    "Now, let's help you get started": "Laten we je helpen om te beginnen",
     "Welcome %(name)s": "Welkom %(name)s",
-    "Add a photo so people know it's you.": "Voeg een foto toe zodat personen weten dat u het bent.",
-    "Great, that'll help people know it's you": "Geweldig, dan zullen personen weten dat u het bent",
+    "Add a photo so people know it's you.": "Voeg een foto toe zodat personen weten dat jij het bent.",
+    "Great, that'll help people know it's you": "Geweldig, dan zullen personen weten dat jij het bent",
     "Attach files from chat or just drag and drop them anywhere in a room.": "Voeg bestanden toe of sleep ze in de kamer.",
     "No files visible in this room": "Geen bestanden zichtbaar in deze kamer",
     "Sign in with SSO": "Inloggen met SSO",
-    "Use email to optionally be discoverable by existing contacts.": "Optioneel kunt u uw e-mail ook gebruiken om ontdekt te worden door al bestaande contacten.",
+    "Use email to optionally be discoverable by existing contacts.": "Optioneel kan je jouw e-mail ook gebruiken om ontdekt te worden door al bestaande contacten.",
     "Use email or phone to optionally be discoverable by existing contacts.": "Gebruik e-mail of telefoon om optioneel ontdekt te kunnen worden door bestaande contacten.",
-    "Add an email to be able to reset your password.": "Voeg een e-mail toe om uw wachtwoord te kunnen resetten.",
+    "Add an email to be able to reset your password.": "Voeg een e-mail toe om je wachtwoord te kunnen resetten.",
     "Forgot password?": "Wachtwoord vergeten?",
     "That phone number doesn't look quite right, please check and try again": "Dat telefoonnummer ziet er niet goed uit, controleer het en probeer het opnieuw",
     "Enter phone number": "Telefoonnummer invoeren",
     "Enter email address": "E-mailadres invoeren",
-    "Something went wrong in confirming your identity. Cancel and try again.": "Er is iets misgegaan bij het bevestigen van uw identiteit. Annuleer en probeer het opnieuw.",
+    "Something went wrong in confirming your identity. Cancel and try again.": "Er is iets misgegaan bij het bevestigen van jouw identiteit. Annuleer en probeer het opnieuw.",
     "Away": "Afwezig",
     "Move right": "Ga naar rechts",
     "Move left": "Ga naar links",
@@ -2146,13 +2146,13 @@
     "Approve": "Goedkeuren",
     "This widget would like to:": "Deze widget zou willen:",
     "Approve widget permissions": "Machtigingen voor widgets goedkeuren",
-    "Use your preferred Matrix homeserver if you have one, or host your own.": "Gebruik de Matrix-homeserver van uw voorkeur als u er een hebt, of host uw eigen.",
+    "Use your preferred Matrix homeserver if you have one, or host your own.": "Gebruik de Matrix-homeserver van je voorkeur als je er een hebt, of host je eigen.",
     "Unable to validate homeserver": "Kan homeserver niet valideren",
     "Recent changes that have not yet been received": "Recente wijzigingen die nog niet zijn ontvangen",
     "The server is not configured to indicate what the problem is (CORS).": "De server is niet geconfigureerd om aan te geven wat het probleem is (CORS).",
     "A connection error occurred while trying to contact the server.": "Er is een verbindingsfout opgetreden tijdens het contact maken met de server.",
-    "Your area is experiencing difficulties connecting to the internet.": "Uw regio ondervindt problemen bij de verbinding met het internet.",
-    "Your server isn't responding to some of your requests. Below are some of the most likely reasons.": "Uw server reageert niet op sommige van uw verzoeken. Hieronder staan enkele van de meest waarschijnlijke redenen.",
+    "Your area is experiencing difficulties connecting to the internet.": "Jouw regio ondervindt problemen bij de verbinding met het internet.",
+    "Your server isn't responding to some of your requests. Below are some of the most likely reasons.": "Jouw server reageert niet op sommige van je verzoeken. Hieronder staan enkele van de meest waarschijnlijke redenen.",
     "Data on this screen is shared with %(widgetDomain)s": "Gegevens op dit scherm worden gedeeld met %(widgetDomain)s",
     "Modal Widget": "Modale widget",
     "Confirm this user's session by comparing the following with their User Settings:": "Bevestig de sessie van deze persoon door het volgende te vergelijken met zijn persoonsinstellingen:",
@@ -2164,35 +2164,35 @@
     "a new master key signature": "een nieuwe hoofdsleutel ondertekening",
     "Failed to transfer call": "Oproep niet doorverbonden",
     "A call can only be transferred to a single user.": "Een oproep kan slechts naar één personen worden doorverbonden.",
-    "Learn more in our <privacyPolicyLink />, <termsOfServiceLink /> and <cookiePolicyLink />.": "Meer informatie vindt u in onze <privacyPolicyLink />, <termsOfServiceLink /> en <cookiePolicyLink />.",
-    "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your account to fetch verified email addresses. This data is not stored.": "Door tijdelijk door te gaan, krijgt het installatieproces van %(hostSignupBrand)s toegang tot uw account om geverifieerde e-mailadressen op te halen. Deze gegevens worden niet opgeslagen.",
-    "Failed to connect to your homeserver. Please close this dialog and try again.": "Kan geen verbinding maken met uw homeserver. Sluit dit dialoogvenster en probeer het opnieuw.",
-    "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Weet u zeker dat u het aanmaken van de host wilt afbreken? Het proces kan niet worden voortgezet.",
-    "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: Als u een nieuwe bug maakt, stuur ons dan uw <debugLogsLink>foutenlogboek</debugLogsLink> om ons te helpen het probleem op te sporen.",
+    "Learn more in our <privacyPolicyLink />, <termsOfServiceLink /> and <cookiePolicyLink />.": "Meer informatie vindt je in onze <privacyPolicyLink />, <termsOfServiceLink /> en <cookiePolicyLink />.",
+    "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your account to fetch verified email addresses. This data is not stored.": "Door tijdelijk door te gaan, krijgt het installatieproces van %(hostSignupBrand)s toegang tot jouw account om geverifieerde e-mailadressen op te halen. Deze gegevens worden niet opgeslagen.",
+    "Failed to connect to your homeserver. Please close this dialog and try again.": "Kan geen verbinding maken met jouw homeserver. Sluit dit dialoogvenster en probeer het opnieuw.",
+    "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Weet je zeker dat je het aanmaken van de host wilt afbreken? Het proces kan niet worden voortgezet.",
+    "PRO TIP: If you start a bug, please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "PRO TIP: Als je een nieuwe bug maakt, stuur ons dan je <debugLogsLink>foutenlogboek</debugLogsLink> om ons te helpen het probleem op te sporen.",
     "There was an error finding this widget.": "Er is een fout opgetreden bij het vinden van deze widget.",
     "Server did not return valid authentication information.": "Server heeft geen geldige verificatiegegevens teruggestuurd.",
     "Server did not require any authentication": "Server heeft geen authenticatie nodig",
     "There was a problem communicating with the server. Please try again.": "Er was een communicatie probleem met de server. Probeer het opnieuw.",
-    "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "U zou dit kunnen uitschakelen als deze kamer gebruikt zal worden om samen te werken met externe teams die hun eigen homeserver hebben. Dit kan later niet meer veranderd worden.",
+    "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "Je zou dit kunnen uitschakelen als deze kamer gebruikt zal worden om samen te werken met externe teams die hun eigen homeserver hebben. Dit kan later niet meer veranderd worden.",
     "About homeservers": "Over homeservers",
     "Learn more": "Lees verder",
     "Other homeserver": "Andere homeserver",
-    "Sign into your homeserver": "Login op uw homeserver",
+    "Sign into your homeserver": "Login op jouw homeserver",
     "Specify a homeserver": "Specificeer een homeserver",
     "Invalid URL": "Ongeldige URL",
     "Upload completed": "Upload voltooid",
     "%(hostSignupBrand)s Setup": "%(hostSignupBrand)s Installatie",
-    "You should know": "Dit moet u weten",
+    "You should know": "Dit moet je weten",
     "Privacy Policy": "Privacystatement",
     "Cookie Policy": "Cookiebeleid",
     "Abort": "Afbreken",
     "Confirm abort of host creation": "Bevestig het afbreken van host creatie",
-    "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "U zou dit kunnen aanzetten als deze kamer alleen gebruikt zal worden voor samenwerking met interne teams op uw homeserver. Dit kan later niet meer veranderd worden.",
+    "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "Je zou dit kunnen aanzetten als deze kamer alleen gebruikt zal worden voor samenwerking met interne teams op je homeserver. Dit kan later niet meer veranderd worden.",
     "Preparing to download logs": "Klaarmaken om logs te downloaden",
-    "Enter the name of a new server you want to explore.": "Voer de naam in van een nieuwe server die u wilt ontdekken.",
+    "Enter the name of a new server you want to explore.": "Voer de naam in van een nieuwe server die je wilt ontdekken.",
     "All rooms": "Alle kamers",
     "Submit logs": "Logs versturen",
-    "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.": "Berichten in deze kamer zijn eind-tot-eind-versleuteld. Als personen deelnemen, kan u ze verifiëren in hun profiel, tik hiervoor op hun afbeelding.",
+    "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.": "Berichten in deze kamer zijn eind-tot-eind-versleuteld. Als personen deelnemen, kan je ze verifiëren in hun profiel, tik hiervoor op hun afbeelding.",
     "Verify all users in a room to ensure it's secure.": "Controleer alle personen in een kamer om er zeker van te zijn dat het veilig is.",
     "Add widgets, bridges & bots": "Widgets, bruggen & bots toevoegen",
     "Edit widgets, bridges & bots": "Widgets, bruggen & bots bewerken",
@@ -2204,41 +2204,41 @@
     "Mentions & Keywords": "Vermeldingen & Trefwoorden",
     "Open dial pad": "Kiestoetsen openen",
     "Recently visited rooms": "Onlangs geopende kamers",
-    "Add a photo, so people can easily spot your room.": "Voeg een foto toe, zodat personen u gemakkelijk kunnen herkennen in de kamer.",
-    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Alleen u beiden nemen deel aan deze kamer, tenzij een van u beiden iemand uitnodigt om deel te nemen.",
+    "Add a photo, so people can easily spot your room.": "Voeg een foto toe, zodat personen je gemakkelijk kunnen herkennen in de kamer.",
+    "Only the two of you are in this conversation, unless either of you invites anyone to join.": "Alleen jullie beiden nemen deel aan deze kamer, tenzij een van jullie beiden iemand uitnodigt om deel te nemen.",
     "Room ID or address of ban list": "Kamer-ID of het adres van de banlijst",
-    "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.": "Voeg hier personen en servers toe die u wilt negeren. Gebruik asterisken om %(brand)s met alle tekens te laten overeenkomen. Bijvoorbeeld, <code>@bot:*</code> zou alle personen negeren die de naam 'bot' hebben op elke server.",
+    "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.": "Voeg hier personen en servers toe die je wil negeren. Gebruik asterisken om %(brand)s met alle tekens te laten overeenkomen. Bijvoorbeeld, <code>@bot:*</code> zou alle personen negeren die de naam 'bot' hebben op elke server.",
     "Please verify the room ID or address and try again.": "Controleer het kamer-ID of het adres en probeer het opnieuw.",
     "Message layout": "Berichtlayout",
     "Custom theme URL": "Aangepaste thema-URL",
     "Error downloading theme information.": "Fout bij het downloaden van de thema-informatie.",
     "Invalid theme schema.": "Ongeldig themaschema.",
-    "Hey you. You're the best!": "Hey. U bent de beste!",
+    "Hey you. You're the best!": "Hey. Jij bent de beste!",
     "Backup key cached:": "Back-up sleutel cached:",
     "Backup key stored:": "Back-up sleutel bewaard:",
-    "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.": "Maak een back-up van uw versleutelingssleutels met uw accountgegevens voor het geval u de toegang tot uw sessies verliest. Uw sleutels worden beveiligd met een unieke veiligheidssleutel.",
+    "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.": "Maak een back-up van je versleutelingssleutels met je accountgegevens voor het geval je de toegang tot je sessies verliest. Je sleutels worden beveiligd met een unieke veiligheidssleutel.",
     "well formed": "goed gevormd",
     "%(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 kan versleutelde berichten niet veilig lokaal opslaan in een webbrowser. Gebruik <desktopLink>%(brand)s Desktop</desktopLink> om versleutelde berichten in zoekresultaten te laten verschijnen.",
     "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|one": "Veilig lokaal opslaan van versleutelde berichten zodat ze in de zoekresultaten verschijnen, gebruik %(size)s voor het opslaan van berichten uit %(rooms)s kamer.",
     "Securely cache encrypted messages locally for them to appear in search results, using %(size)s to store messages from %(rooms)s rooms.|other": "Veilig lokaal opslaan van versleutelde berichten zodat ze in de zoekresultaten verschijnen, gebruik %(size)s voor het opslaan van berichten uit %(rooms)s kamers.",
-    "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Verifieer elke sessie die door een persoon wordt gebruikt afzonderlijk. Dit markeert hem als vertrouwd zonder te vertrouwen op kruislings ondertekende apparaten.",
+    "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Verifieer elke sessie die door een persoon wordt gebruikt afzonderlijk. Dit markeert hen als vertrouwd zonder te vertrouwen op kruislings ondertekende apparaten.",
     "User signing private key:": "Persoonsondertekening-privésleutel:",
     "Master private key:": "Hoofdprivésleutel:",
     "Self signing private key:": "Zelfondertekening-privésleutel:",
     "Cross-signing is not set up.": "Kruiselings ondertekenen is niet ingesteld.",
     "Cross-signing is ready for use.": "Kruiselings ondertekenen is klaar voor gebruik.",
-    "Your server isn't responding to some <a>requests</a>.": "Uw server reageert niet op sommige <a>verzoeken</a>.",
+    "Your server isn't responding to some <a>requests</a>.": "Je server reageert niet op sommige <a>verzoeken</a>.",
     "Dial pad": "Kiestoetsen",
     "%(name)s on hold": "%(name)s in de wacht",
     "%(peerName)s held the call": "%(peerName)s heeft de oproep in de wacht",
-    "You held the call <a>Resume</a>": "U heeft een oproep in de wacht <a>Hervat</a>",
-    "You held the call <a>Switch</a>": "U heeft een oproep in de wacht <a>Wissel</a>",
+    "You held the call <a>Resume</a>": "Je hebt een oproep in de wacht <a>Hervat</a>",
+    "You held the call <a>Switch</a>": "Je hebt een oproep in de wacht <a>Wissel</a>",
     "Sends the given message with snowfall": "Stuurt het bericht met sneeuwval",
     "Sends the given message with fireworks": "Stuurt het bericht met vuurwerk",
     "Sends the given message with confetti": "Stuurt het bericht met confetti",
     "IRC display name width": "Breedte IRC-weergavenaam",
-    "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "Als u nu annuleert, kunt u versleutelde berichten en gegevens verliezen als u geen toegang meer heeft tot uw login.",
-    "To continue, use Single Sign On to prove your identity.": "Om verder te gaan, gebruik uw eenmalige aanmelding om uw identiteit te bewijzen.",
+    "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "Als je nu annuleert, kan je versleutelde berichten en gegevens verliezen als je geen toegang meer hebt tot je login.",
+    "To continue, use Single Sign On to prove your identity.": "Om verder te gaan, gebruik je eenmalige aanmelding om je identiteit te bewijzen.",
     "Prepends ( ͡° ͜ʖ ͡°) to a plain-text message": "Plakt ( ͡° ͜ʖ ͡°) vóór een bericht zonder opmaak",
     "Prepends ┬──┬ ノ( ゜-゜ノ) to a plain-text message": "Plakt ┬──┬ ノ( ゜-゜ノ) vóór een bericht zonder opmaak",
     "Prepends (╯°□°）╯︵ ┻━┻ to a plain-text message": "Plakt (╯°□°）╯︵ ┻━┻ vóór een bericht zonder opmaak",
@@ -2265,16 +2265,16 @@
     "Value": "Waarde",
     "Setting ID": "Instellingen-ID",
     "Show chat effects (animations when receiving e.g. confetti)": "Effecten tonen (animaties bij ontvangst bijv. confetti)",
-    "Jump to the bottom of the timeline when you send a message": "Naar de onderkant van de tijdlijn springen wanneer u een bericht verstuurd",
+    "Jump to the bottom of the timeline when you send a message": "Naar de onderkant van de tijdlijn springen wanneer je een bericht verstuurd",
     "Original event source": "Originele gebeurtenisbron",
     "Decrypted event source": "Ontsleutel de gebeurtenisbron",
     "Inviting...": "Uitnodigen...",
     "Invite by username": "Op inlognaam uitnodigen",
-    "Invite your teammates": "Uw teamgenoten uitnodigen",
-    "Failed to invite the following users to your space: %(csvUsers)s": "Het uitnodigen van de volgende personen voor uw Space is mislukt: %(csvUsers)s",
-    "A private space for you and your teammates": "Een privéruimte voor u en uw teamgenoten",
+    "Invite your teammates": "Jouw teamgenoten uitnodigen",
+    "Failed to invite the following users to your space: %(csvUsers)s": "Het uitnodigen van de volgende personen voor jouw Space is mislukt: %(csvUsers)s",
+    "A private space for you and your teammates": "Een privéruimte voor jou en jouw teamgenoten",
     "Me and my teammates": "Ik en mijn teamgenoten",
-    "Who are you working with?": "Met wie werkt u samen?",
+    "Who are you working with?": "Met wie werk je samen?",
     "Creating rooms...": "Kamers aanmaken...",
     "Skip for now": "Voorlopig overslaan",
     "Failed to create initial space rooms": "Het maken van de Space kamers is mislukt",
@@ -2284,9 +2284,9 @@
     "Welcome to <name/>": "Welkom in <name/>",
     "%(count)s members|other": "%(count)s personen",
     "%(count)s members|one": "%(count)s persoon",
-    "Your server does not support showing space hierarchies.": "Uw server heeft geen ondersteuning voor het weergeven van Space-indelingen.",
-    "Are you sure you want to leave the space '%(spaceName)s'?": "Weet u zeker dat u de Space '%(spaceName)s' wilt verlaten?",
-    "This space is not public. You will not be able to rejoin without an invite.": "Deze Space is niet publiek. Zonder uitnodiging zult u niet opnieuw kunnen toetreden.",
+    "Your server does not support showing space hierarchies.": "Jouw server heeft geen ondersteuning voor het weergeven van Space-indelingen.",
+    "Are you sure you want to leave the space '%(spaceName)s'?": "Weet je zeker dat je de Space '%(spaceName)s' wilt verlaten?",
+    "This space is not public. You will not be able to rejoin without an invite.": "Deze Space is niet publiek. Zonder uitnodiging zal je niet opnieuw kunnen toetreden.",
     "Start audio stream": "Audiostream starten",
     "Failed to start livestream": "Starten van livestream is mislukt",
     "Unable to start audio streaming.": "Kan audiostream niet starten.",
@@ -2295,7 +2295,7 @@
     "Leave Space": "Space verlaten",
     "Failed to save space settings.": "Het opslaan van de space-instellingen is mislukt.",
     "Space settings": "Space-instellingen",
-    "Edit settings relating to your space.": "Bewerk instellingen gerelateerd aan uw space.",
+    "Edit settings relating to your space.": "Bewerk instellingen gerelateerd aan jouw space.",
     "Invite someone using their name, username (like <userId/>) or <a>share this space</a>.": "Nodig iemand uit per naam, inlognaam (zoals <userId/>) of <a>deel deze Space</a>.",
     "Invite someone using their name, email address, username (like <userId/>) or <a>share this space</a>.": "Nodig iemand uit per naam, e-mail, inlognaam (zoals <userId/>) of <a>deel deze Space</a>.",
     "Unnamed Space": "Naamloze Space",
@@ -2303,47 +2303,47 @@
     "Create a new room": "Nieuwe kamer aanmaken",
     "Spaces": "Spaces",
     "Space selection": "Space-selectie",
-    "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.": "U kunt deze wijziging niet ongedaan maken, omdat u uzelf rechten ontneemt. Als u de laatste bevoegde persoon in de Space bent zal het onmogelijk zijn om weer rechten te krijgen.",
+    "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.": "Je kan deze wijziging niet ongedaan maken, omdat je jezelf rechten ontneemt. Als je de laatst bevoegde persoon in de Space bent zal het onmogelijk zijn om weer rechten te krijgen.",
     "Empty room": "Lege kamer",
     "Suggested Rooms": "Kamersuggesties",
-    "You do not have permissions to add rooms to this space": "U hebt geen toestemming om kamers toe te voegen in deze Space",
+    "You do not have permissions to add rooms to this space": "Je hebt geen toestemming om kamers toe te voegen in deze Space",
     "Add existing room": "Bestaande kamers toevoegen",
-    "You do not have permissions to create new rooms in this space": "U hebt geen toestemming om kamers te maken in deze Space",
+    "You do not have permissions to create new rooms in this space": "Je hebt geen toestemming om kamers te maken in deze Space",
     "Send message": "Bericht versturen",
     "Invite to this space": "Voor deze Space uitnodigen",
-    "Your message was sent": "Uw bericht is verstuurd",
-    "Encrypting your message...": "Uw bericht versleutelen...",
-    "Sending your message...": "Uw bericht versturen...",
+    "Your message was sent": "Je bericht is verstuurd",
+    "Encrypting your message...": "Je bericht versleutelen...",
+    "Sending your message...": "Je bericht versturen...",
     "Spell check dictionaries": "Spellingscontrole woordenboeken",
     "Space options": "Space-opties",
     "Leave space": "Space verlaten",
     "Invite people": "Personen uitnodigen",
-    "Share your public space": "Deel uw publieke space",
+    "Share your public space": "Deel jouw publieke space",
     "Share invite link": "Deel uitnodigingskoppeling",
     "Click to copy": "Klik om te kopiëren",
     "Creating...": "Aanmaken...",
-    "Your private space": "Uw privé space",
-    "Your public space": "Uw publieke space",
-    "Invite only, best for yourself or teams": "Alleen op uitnodiging, geschikt voor uzelf of teams",
+    "Your private space": "Jouw privé space",
+    "Your public space": "Jouw publieke space",
+    "Invite only, best for yourself or teams": "Alleen op uitnodiging, geschikt voor jezelf of teams",
     "Private": "Privé",
     "Open space for anyone, best for communities": "Publieke space voor iedereen, geschikt voor gemeenschappen",
     "Public": "Publiek",
     "Create a space": "Space maken",
     "Delete": "Verwijderen",
-    "This homeserver has been blocked by its administrator.": "Deze homeserver is geblokkeerd door uw beheerder.",
+    "This homeserver has been blocked by its administrator.": "Deze homeserver is geblokkeerd door jouw beheerder.",
     "Already in call": "Al in de oproep",
-    "You're already in a call with this person.": "U bent al een oproep met deze persoon.",
-    "Make sure the right people have access. You can invite more later.": "Controleer of de juiste personen toegang hebben. U kunt later meer personen uitnodigen.",
-    "A private space to organise your rooms": "Een privé Space om uw kamers te organiseren",
+    "You're already in a call with this person.": "Je bent al in gesprek met deze persoon.",
+    "Make sure the right people have access. You can invite more later.": "Controleer of de juiste personen toegang hebben. Je kan later meer personen uitnodigen.",
+    "A private space to organise your rooms": "Een privé Space om je kamers te organiseren",
     "Just me": "Alleen ik",
     "Make sure the right people have access to %(name)s": "Controleer of de juiste personen toegang hebben tot %(name)s",
     "Go to my first room": "Ga naar mijn eerste kamer",
-    "It's just you at the moment, it will be even better with others.": "Het is alleen u op dit moment, het zal nog beter zijn met anderen.",
+    "It's just you at the moment, it will be even better with others.": "Het is alleen jij op dit moment, het zal nog beter zijn met anderen.",
     "Share %(name)s": "Deel %(name)s",
     "Private space": "Privé Space",
     "Public space": "Publieke Space",
-    "<inviter/> invites you": "<inviter/> nodigt u uit",
-    "You may want to try a different search or check for typos.": "U kunt een andere zoekterm proberen of controleren op een typefout.",
+    "<inviter/> invites you": "<inviter/> nodigt je uit",
+    "You may want to try a different search or check for typos.": "Je kan een andere zoekterm proberen of controleren op een typefout.",
     "No results found": "Geen resultaten gevonden",
     "Mark as suggested": "Markeer als aanbeveling",
     "Mark as not suggested": "Markeer als geen aanbeveling",
@@ -2353,63 +2353,63 @@
     "This room is suggested as a good one to join": "Dit is een aanbevolen kamer om aan deel te nemen",
     "%(count)s rooms|one": "%(count)s kamer",
     "%(count)s rooms|other": "%(count)s kamers",
-    "You don't have permission": "U heeft geen toestemming",
-    "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.": "Normaal gesproken heeft dit alleen invloed op het verwerken van de kamer op de server. Als u problemen ervaart met %(brand)s, stuur dan een bugmelding.",
+    "You don't have permission": "Je hebt geen toestemming",
+    "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.": "Normaal gesproken heeft dit alleen invloed op het verwerken van de kamer op de server. Als je problemen ervaart met %(brand)s, stuur dan een bugmelding.",
     "Invite to %(roomName)s": "Uitnodiging voor %(roomName)s",
     "Edit devices": "Apparaten bewerken",
     "Invite with email or username": "Uitnodigen per e-mail of inlognaam",
-    "You can change these anytime.": "U kan dit elk moment nog aanpassen.",
+    "You can change these anytime.": "Je kan dit elk moment nog aanpassen.",
     "Add some details to help people recognise it.": "Voeg details toe zodat personen het herkennen.",
-    "Check your devices": "Controleer uw apparaten",
-    "You have unverified logins": "U heeft ongeverifieerde logins",
-    "Verify your identity to access encrypted messages and prove your identity to others.": "Verifeer uw identiteit om toegang te krijgen tot uw versleutelde berichten en om uw identiteit te bewijzen voor anderen.",
-    "You can add more later too, including already existing ones.": "U kunt er later nog meer toevoegen, inclusief al bestaande kamers.",
+    "Check your devices": "Controleer je apparaten",
+    "You have unverified logins": "Je hebt ongeverifieerde logins",
+    "Verify your identity to access encrypted messages and prove your identity to others.": "Verifeer je identiteit om toegang te krijgen tot je versleutelde berichten en om je identiteit te bewijzen voor anderen.",
+    "You can add more later too, including already existing ones.": "Je kan er later nog meer toevoegen, inclusief al bestaande kamers.",
     "Let's create a room for each of them.": "Laten we voor elk een los kamer maken.",
-    "What are some things you want to discuss in %(spaceName)s?": "Wat wilt u allemaal bespreken in %(spaceName)s?",
+    "What are some things you want to discuss in %(spaceName)s?": "Wat wil je allemaal bespreken in %(spaceName)s?",
     "Verification requested": "Verificatieverzocht",
     "Avatar": "Afbeelding",
-    "You most likely do not want to reset your event index store": "U wilt waarschijnlijk niet uw gebeurtenisopslag-index resetten",
+    "You most likely do not want to reset your event index store": "Je wilt waarschijnlijk niet jouw gebeurtenisopslag-index resetten",
     "Reset event store?": "Gebeurtenisopslag resetten?",
     "Reset event store": "Gebeurtenisopslag resetten",
     "Consult first": "Eerst overleggen",
     "Invited people will be able to read old messages.": "Uitgenodigde personen kunnen de oude berichten lezen.",
-    "We couldn't create your DM.": "We konden uw DM niet aanmaken.",
+    "We couldn't create your DM.": "We konden je DM niet aanmaken.",
     "Adding...": "Toevoegen...",
     "Add existing rooms": "Bestaande kamers toevoegen",
-    "%(count)s people you know have already joined|one": "%(count)s persoon die u kent is al geregistreerd",
-    "%(count)s people you know have already joined|other": "%(count)s personen die u kent hebben zijn al geregistreerd",
+    "%(count)s people you know have already joined|one": "%(count)s persoon die je kent is al geregistreerd",
+    "%(count)s people you know have already joined|other": "%(count)s personen die je kent hebben zich al geregistreerd",
     "Invite to just this room": "Uitnodigen voor alleen deze kamer",
-    "Warn before quitting": "Waarschuwen voordat u afsluit",
+    "Warn before quitting": "Waarschuwen voordat je afsluit",
     "Manage & explore rooms": "Beheer & ontdek kamers",
     "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>": "Overleggen met %(transferTarget)s. <a>Verstuur naar %(transferee)s</a>",
     "unknown person": "onbekend persoon",
     "%(deviceId)s from %(ip)s": "%(deviceId)s van %(ip)s",
-    "Review to ensure your account is safe": "Controleer ze zodat uw account veilig is",
+    "Review to ensure your account is safe": "Controleer ze zodat jouw account veilig is",
     "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.",
+    "You are the only person here. If you leave, no one will be able to join in the future, including you.": "Je bent de enige persoon hier. Als je weggaat, zal niemand in de toekomst kunnen toetreden, jij 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 personen, en zult u misschien geen oude 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 en 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",
+    "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 je dat doet, let wel op dat geen van jouw 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",
-    "You can select all or individual messages to retry or delete": "U kunt alles selecteren of per individueel bericht opnieuw versturen of verwijderen",
+    "You can select all or individual messages to retry or delete": "Je kan alles selecteren of per individueel bericht opnieuw versturen 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",
+    "Some of your messages have not been sent": "Enkele van jouw berichten zijn niet verstuurd",
     "Including %(commaSeparatedMembers)s": "Inclusief %(commaSeparatedMembers)s",
     "View all %(count)s members|one": "1 lid bekijken",
     "View all %(count)s members|other": "Bekijk alle %(count)s personen",
     "Failed to send": "Versturen is mislukt",
-    "Enter your Security Phrase a second time to confirm it.": "Voor uw veiligheidswachtwoord een tweede keer in om het te bevestigen.",
-    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Kies een kamer of gesprek om hem toe te voegen. Dit is een Space voor u, niemand zal hiervan een melding krijgen. U kan er later meer toevoegen.",
-    "What do you want to organise?": "Wat wilt u organiseren?",
-    "You have no ignored users.": "U heeft geen persoon genegeerd.",
+    "Enter your Security Phrase a second time to confirm it.": "Voer je veiligheidswachtwoord een tweede keer in om het te bevestigen.",
+    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Kies een kamer of gesprek om hem toe te voegen. Dit is een Space voor jou, niemand zal hiervan een melding krijgen. Je kan er later meer toevoegen.",
+    "What do you want to organise?": "Wat wil je organiseren?",
+    "You have no ignored users.": "Je hebt geen persoon genegeerd.",
     "Play": "Afspelen",
     "Pause": "Pauze",
     "<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>Dit is een experimentele functie.</b> Voorlopig moeten nieuwe personen die een uitnodiging krijgen de <link/> gebruiken om daadwerkelijk deel te nemen.",
@@ -2417,51 +2417,51 @@
     "Join the beta": "Beta inschakelen",
     "Leave the beta": "Beta verlaten",
     "Beta": "Beta",
-    "Want to add a new room instead?": "Wilt u anders een nieuwe kamer toevoegen?",
+    "Want to add a new room instead?": "Wil je anders een nieuwe kamer toevoegen?",
     "Adding rooms... (%(progress)s out of %(count)s)|one": "Kamer toevoegen...",
     "Adding rooms... (%(progress)s out of %(count)s)|other": "Kamers toevoegen... (%(progress)s van %(count)s)",
     "Not all selected were added": "Niet alle geselecteerden zijn toegevoegd",
-    "You are not allowed to view this server's rooms list": "U heeft geen toegang tot deze server zijn kamergids",
+    "You are not allowed to view this server's rooms list": "Je hebt geen toegang tot deze server zijn kamergids",
     "Error processing voice message": "Fout bij verwerking spraakbericht",
-    "We didn't find a microphone on your device. Please check your settings and try again.": "We hebben geen microfoon gevonden op uw apparaat. Controleer uw instellingen en probeer het opnieuw.",
+    "We didn't find a microphone on your device. Please check your settings and try again.": "We hebben geen microfoon gevonden op je apparaat. Controleer je instellingen en probeer het opnieuw.",
     "No microphone found": "Geen microfoon gevonden",
-    "We were unable to access your microphone. Please check your browser settings and try again.": "We hebben geen toegang tot uw microfoon. Controleer uw browserinstellingen en probeer het opnieuw.",
-    "Unable to access your microphone": "Geen toegang tot uw microfoon",
+    "We were unable to access your microphone. Please check your browser settings and try again.": "We hebben geen toegang tot je microfoon. Controleer je browserinstellingen en probeer het opnieuw.",
+    "Unable to access your microphone": "Geen toegang tot je microfoon",
     "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>.": "Zin in een experiment? Labs is de beste manier om nieuwe functies vroeg te krijgen, testen en helpen vormen voordat ze daadwerkelijk worden gelanceerd. <a>Lees meer</a>.",
-    "Your access token gives full access to your account. Do not share it with anyone.": "Uw toegangstoken geeft u toegang to uw account. Deel hem niet met anderen.",
+    "Your access token gives full access to your account. Do not share it with anyone.": "Jouw toegangstoken geeft je toegang tot je account. Deel hem niet met anderen.",
     "Access Token": "Toegangstoken",
     "Please enter a name for the space": "Vul een naam in voor deze space",
     "Connecting": "Verbinden",
-    "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Peer-to-peer voor 1op1 oproepen toestaan (als u dit inschakelt kunnen andere personen mogelijk uw ipadres zien)",
+    "Allow Peer-to-Peer for 1:1 calls (if you enable this, the other party might be able to see your IP address)": "Peer-to-peer voor 1op1 oproepen toestaan (als je dit inschakelt kunnen andere personen mogelijk jouw ipadres zien)",
     "Message search initialisation failed": "Zoeken in berichten opstarten is mislukt",
     "Search names and descriptions": "In namen en omschrijvingen zoeken",
-    "You may contact me if you have any follow up questions": "U mag contact met mij opnemen als u nog vervolg vragen heeft",
-    "To leave the beta, visit your settings.": "Om de beta te verlaten, ga naar uw instellingen.",
-    "Your platform and username will be noted to help us use your feedback as much as we can.": "Uw platform en inlognaam zullen worden opgeslagen om onze te helpen uw feedback zo goed mogelijk te gebruiken.",
+    "You may contact me if you have any follow up questions": "Je mag contact met mij opnemen als je nog vervolg vragen heeft",
+    "To leave the beta, visit your settings.": "Om de beta te verlaten, ga naar je instellingen.",
+    "Your platform and username will be noted to help us use your feedback as much as we can.": "Jouw platform en inlognaam zullen worden opgeslagen om onze te helpen je feedback zo goed mogelijk te gebruiken.",
     "Add reaction": "Reactie toevoegen",
     "Space Autocomplete": "Space autocomplete",
     "Go to my space": "Ga naar mijn Space",
     "sends space invaders": "stuurt space invaders",
     "Sends the given message with a space themed effect": "Stuurt het bericht met space invaders",
-    "See when people join, leave, or are invited to your active room": "Zie wanneer personen deelnemen, vertrekken of worden uitgenodigd in uw actieve kamer",
+    "See when people join, leave, or are invited to your active room": "Zie wanneer personen deelnemen, vertrekken of worden uitgenodigd in je actieve kamer",
     "See when people join, leave, or are invited to this room": "Zie wanneer personen deelnemen, vertrekken of worden uitgenodigd voor deze kamer",
     "Currently joining %(count)s rooms|one": "Momenteel aan het toetreden tot %(count)s kamer",
     "Currently joining %(count)s rooms|other": "Momenteel aan het toetreden tot %(count)s kamers",
-    "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.",
+    "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 je een uitnodiging nodig hebt om deel te nemen.",
     "No results for \"%(query)s\"": "Geen resultaten voor \"%(query)s\"",
-    "The user you called is busy.": "De persoon die u belde is bezet.",
+    "The user you called is busy.": "De persoon die je belde is bezet.",
     "User Busy": "Persoon Bezet",
-    "Or send invite link": "Of verstuur uw uitnodigingslink",
+    "Or send invite link": "Of verstuur je uitnodigingslink",
     "Some suggestions may be hidden for privacy.": "Sommige suggesties kunnen om privacyredenen verborgen zijn.",
     "Search for rooms or people": "Zoek naar kamers of personen",
     "Message preview": "Voorbeeld van bericht",
     "Forward message": "Bericht doorsturen",
     "Sent": "Verstuurd",
-    "You don't have permission to do this": "U heeft geen rechten om dit te doen",
+    "You don't have permission to do this": "Je hebt 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.",
+    "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.": "Als je de rechten hebt, 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",
     "[number]": "[number]",
@@ -2489,17 +2489,17 @@
     "%(oneUser)schanged the server ACLs %(count)s times|other": "%(oneUser)s veranderde de server ACLs %(count)s keer",
     "%(severalUsers)schanged the server ACLs %(count)s times|one": "%(severalUsers)s veranderden de server ACLs",
     "%(severalUsers)schanged the server ACLs %(count)s times|other": "%(severalUsers)s veranderden de server ACLs %(count)s keer",
-    "Message search initialisation failed, check <a>your settings</a> for more information": "Bericht zoeken initialisatie mislukt, controleer <a>uw instellingen</a> voor meer informatie",
-    "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Stel adressen in voor deze Space zodat personen deze Space kunnen vinden via uw homeserver (%(localDomain)s)",
+    "Message search initialisation failed, check <a>your settings</a> for more information": "Bericht zoeken initialisatie mislukt, controleer <a>je instellingen</a> voor meer informatie",
+    "Set addresses for this space so users can find this space through your homeserver (%(localDomain)s)": "Stel adressen in voor deze Space zodat personen deze Space kunnen vinden via jouw homeserver (%(localDomain)s)",
     "To publish an address, it needs to be set as a local address first.": "Om een adres te publiceren, moet het eerst als een lokaaladres worden ingesteld.",
-    "Published addresses can be used by anyone on any server to join your room.": "Gepubliceerde adressen kunnen door iedereen op elke server gebruikt worden om bij uw kamer te komen.",
-    "Published addresses can be used by anyone on any server to join your space.": "Gepubliceerde adressen kunnen door iedereen op elke server gebruikt worden om uw Space te betreden.",
+    "Published addresses can be used by anyone on any server to join your room.": "Gepubliceerde adressen kunnen door iedereen op elke server gebruikt worden om bij jouw kamer te komen.",
+    "Published addresses can be used by anyone on any server to join your space.": "Gepubliceerde adressen kunnen door iedereen op elke server gebruikt worden om jouw Space te betreden.",
     "This space has no local addresses": "Deze Space heeft geen lokaaladres",
     "Space information": "Space-informatie",
     "Collapse": "Invouwen",
     "Expand": "Uitvouwen",
     "Recommended for public spaces.": "Aanbevolen voor publieke spaces.",
-    "Allow people to preview your space before they join.": "Personen toestaan een voorvertoning van uw space te zien voor deelname.",
+    "Allow people to preview your space before they join.": "Personen toestaan een voorvertoning van jouw space te zien voor deelname.",
     "Preview Space": "Space voorvertoning",
     "Decide who can view and join %(spaceName)s.": "Bepaal wie kan lezen en deelnemen aan %(spaceName)s.",
     "Visibility": "Zichtbaarheid",
@@ -2514,7 +2514,7 @@
     "Silence call": "Oproep dempen",
     "Sound on": "Geluid aan",
     "Show all rooms in Home": "Alle kamers in Home tonen",
-    "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Meld aan moderators prototype. In kamers die moderatie ondersteunen, kunt u met de `melden` knop misbruik melden aan de kamermoderators",
+    "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Meld aan moderators prototype. In kamers die moderatie ondersteunen, kan je met de `melden` knop misbruik melden aan de kamermoderators",
     "%(senderName)s changed the <a>pinned messages</a> for the room.": "%(senderName)s heeft de <a>vastgeprikte berichten</a> voor de kamer gewijzigd.",
     "%(senderName)s withdrew %(targetName)s's invitation": "%(senderName)s heeft de uitnodiging van %(targetName)s ingetrokken",
     "%(senderName)s withdrew %(targetName)s's invitation: %(reason)s": "%(senderName)s heeft de uitnodiging van %(targetName)s ingetrokken: %(reason)s",
@@ -2548,10 +2548,10 @@
     "Use Ctrl + F to search timeline": "Gebruik Ctrl +F om te zoeken in de tijdlijn",
     "Use Command + F to search timeline": "Gebruik Command + F om te zoeken in de tijdlijn",
     "Integration manager": "Integratiebeheerder",
-    "Your %(brand)s doesn't allow you to use an integration manager to do this. Please contact an admin.": "Uw %(brand)s laat u geen integratiebeheerder gebruiken om dit te doen. Neem contact op met een beheerder.",
-    "Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.": "Met het gebruik van deze widget deelt u mogelijk gegevens <helpIcon /> met %(widgetDomain)s & uw integratiebeheerder.",
+    "Your %(brand)s doesn't allow you to use an integration manager to do this. Please contact an admin.": "Jouw %(brand)s laat je geen integratiebeheerder gebruiken om dit te doen. Neem contact op met een beheerder.",
+    "Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.": "Met het gebruik van deze widget deel je mogelijk gegevens <helpIcon /> met %(widgetDomain)s & je integratiebeheerder.",
     "Identity server is": "Identiteitsserver is",
-    "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integratiebeheerders ontvangen configuratie-informatie en kunnen widgets aanpassen, kameruitnodigingen versturen en machtsniveau’s namens u aanpassen.",
+    "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integratiebeheerders ontvangen configuratie-informatie en kunnen widgets aanpassen, kameruitnodigingen versturen en machtsniveau’s namens jou aanpassen.",
     "Use an integration manager to manage bots, widgets, and sticker packs.": "Gebruik een integratiebeheerder om bots, widgets en stickerpakketten te beheren.",
     "Use an integration manager <b>(%(serverName)s)</b> to manage bots, widgets, and sticker packs.": "Gebruik een integratiebeheerder <b>(%(serverName)s)</b> om bots, widgets en stickerpakketten te beheren.",
     "Identity server": "Identiteitsserver",
@@ -2560,14 +2560,14 @@
     "Not a valid identity server (status code %(code)s)": "Geen geldige identiteitsserver (statuscode %(code)s)",
     "Identity server URL must be HTTPS": "Identiteitsserver-URL moet HTTPS zijn",
     "User Directory": "Personengids",
-    "There was an error loading your notification settings.": "Er was een fout bij het laden van uw meldingsvoorkeuren.",
+    "There was an error loading your notification settings.": "Er was een fout bij het laden van je meldingsvoorkeuren.",
     "Mentions & keywords": "Vermeldingen & trefwoorden",
     "Global": "Overal",
     "New keyword": "Nieuw trefwoord",
     "Keyword": "Trefwoord",
     "Enable email notifications for %(email)s": "E-mailmeldingen inschakelen voor %(email)s",
     "Enable for this account": "Voor dit account inschakelen",
-    "An error occurred whilst saving your notification preferences.": "Er is een fout opgetreden tijdens het opslaan van uw meldingsvoorkeuren.",
+    "An error occurred whilst saving your notification preferences.": "Er is een fout opgetreden tijdens het opslaan van je meldingsvoorkeuren.",
     "Error saving notification preferences": "Fout bij het opslaan van meldingsvoorkeuren",
     "Messages containing keywords": "Berichten met trefwoord",
     "Transfer Failed": "Doorverbinden is mislukt",
@@ -2598,48 +2598,48 @@
     "People with supported clients will be able to join the room without having a registered account.": "Personen met geschikte apps zullen aan de kamer kunnen deelnemen zonder een account te hebben.",
     "Decide who can join %(roomName)s.": "Kies wie kan deelnemen aan %(roomName)s.",
     "Space members": "Space leden",
-    "Anyone in a space can find and join. You can select multiple spaces.": "Iedereen in een space kan hem vinden en deelnemen. U kunt meerdere spaces selecteren.",
+    "Anyone in a space can find and join. You can select multiple spaces.": "Iedereen in een space kan hem vinden en deelnemen. Je kan meerdere spaces selecteren.",
     "Visible to space members": "Zichtbaar voor Space leden",
     "Public room": "Publieke kamer",
     "Private room (invite only)": "Privékamer (alleen op uitnodiging)",
     "Create a room": "Kamer aanmaken",
     "Only people invited will be able to find and join this room.": "Alleen uitgenodigde personen kunnen deze kamer vinden en aan deelnemen.",
     "Anyone will be able to find and join this room, not just members of <SpaceName/>.": "Iedereen kan deze kamer vinden en aan deelnemen, niet alleen leden van <SpaceName/>.",
-    "You can change this at any time from room settings.": "U kan dit op elk moment wijzigen vanuit de kamerinstellingen.",
+    "You can change this at any time from room settings.": "Je kan dit op elk moment wijzigen vanuit de kamerinstellingen.",
     "Error downloading audio": "Fout bij downloaden van audio",
     "<b>Please note upgrading will make a new version of the room</b>. All current messages will stay in this archived room.": "<b>Let op bijwerken maakt een nieuwe versie van deze kamer</b>. Alle huidige berichten blijven in deze gearchiveerde kamer.",
     "Automatically invite members from this room to the new one": "Automatisch leden uitnodigen van deze kamer in de nieuwe",
     "These are likely ones other room admins are a part of.": "Dit zijn waarschijnlijk kamers waar andere kamerbeheerders deel van uitmaken.",
-    "Other spaces or rooms you might not know": "Andere Spaces of kamers die u misschien niet kent",
-    "Spaces you know that contain this room": "Spaces die u kent met deze kamer",
+    "Other spaces or rooms you might not know": "Andere Spaces of kamers die je misschien niet kent",
+    "Spaces you know that contain this room": "Spaces die je kent met deze kamer",
     "Search spaces": "Spaces zoeken",
     "Decide which spaces can access this room. If a space is selected, its members can find and join <RoomName/>.": "Kies welke Spaces toegang hebben tot deze kamer. Als een Space is geselecteerd kunnen deze leden <RoomName/> vinden en aan deelnemen.",
     "Select spaces": "Space selecteren",
-    "You're removing all spaces. Access will default to invite only": "U verwijderd alle Spaces. De toegang zal teruggezet worden naar alleen op uitnodiging",
+    "You're removing all spaces. Access will default to invite only": "Je verwijdert alle Spaces. De toegang zal teruggezet worden naar alleen op uitnodiging",
     "Room visibility": "Kamerzichtbaarheid",
     "Anyone will be able to find and join this room.": "Iedereen kan de kamer vinden en aan deelnemen.",
     "Share content": "Deel inhoud",
     "Application window": "Deel een app",
-    "Share entire screen": "Deel uw gehele scherm",
-    "Your camera is still enabled": "Uw camera is nog ingeschakeld",
-    "Your camera is turned off": "Uw camera staat uit",
+    "Share entire screen": "Deel je gehele scherm",
+    "Your camera is still enabled": "Je camera is nog ingeschakeld",
+    "Your camera is turned off": "Je camera staat uit",
     "%(sharerName)s is presenting": "%(sharerName)s is aan het presenteren",
-    "You are presenting": "U bent aan het presenteren",
-    "Thank you for trying Spaces. Your feedback will help inform the next versions.": "Dankuwel voor het gebruiken van Spaces. Uw feedback helpt ons volgende versies te maken.",
+    "You are presenting": "Je bent aan het presenteren",
+    "Thank you for trying Spaces. Your feedback will help inform the next versions.": "Dankjewel voor het gebruiken van Spaces. Jouw feedback helpt ons volgende versies te maken.",
     "Spaces feedback": "Spaces feedback",
     "Spaces are a new feature.": "Spaces zijn een nieuwe functie.",
-    "All rooms you're in will appear in Home.": "Alle kamers waar u in bent zullen in Home verschijnen.",
+    "All rooms you're in will appear in Home.": "Alle kamers waar je in bent zullen in Home verschijnen.",
     "Search for rooms or spaces": "Kamers of Spaces zoeken",
     "Add space": "Space toevoegen",
     "Leave %(spaceName)s": "%(spaceName)s verlaten",
-    "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "U bent de enige beheerder van sommige kamers of Spaces die u wilt verlaten. Door deze te verlaten hebben ze geen beheerder meer.",
-    "You're the only admin of this space. Leaving it will mean no one has control over it.": "U bent de enige beheerder van deze Space. Door het te verlaten zal er niemand meer controle over hebben.",
-    "You won't be able to rejoin unless you are re-invited.": "U kunt niet opnieuw deelnemen behalve als u opnieuw wordt uitgenodigd.",
+    "You're the only admin of some of the rooms or spaces you wish to leave. Leaving them will leave them without any admins.": "Je bent de enige beheerder van sommige kamers of Spaces die je wil verlaten. Door deze te verlaten hebben ze geen beheerder meer.",
+    "You're the only admin of this space. Leaving it will mean no one has control over it.": "Je bent de enige beheerder van deze Space. Door het te verlaten zal er niemand meer controle over hebben.",
+    "You won't be able to rejoin unless you are re-invited.": "Je kan niet opnieuw deelnemen behalve als je opnieuw wordt uitgenodigd.",
     "Search %(spaceName)s": "Zoek %(spaceName)s",
     "Want to add an existing space instead?": "Een bestaande Space toevoegen?",
     "Private space (invite only)": "Privé Space (alleen op uitnodiging)",
     "Space visibility": "Space zichtbaarheid",
-    "Add a space to a space you manage.": "Voeg een Space toe aan een Space die u beheerd.",
+    "Add a space to a space you manage.": "Voeg een Space toe aan een Space die jij beheert.",
     "Only people invited will be able to find and join this space.": "Alleen uitgenodigde personen kunnen deze Space vinden en aan deelnemen.",
     "Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Iedereen zal in staat zijn om deze Space te vinden en aan deel te nemen, niet alleen leden van <SpaceName/>.",
     "Anyone in <SpaceName/> will be able to find and join.": "Iedereen in <SpaceName/> zal in staat zijn om te zoeken en deel te nemen.",
@@ -2674,19 +2674,19 @@
     "Rooms and spaces": "Kamers en Spaces",
     "Results": "Resultaten",
     "Enable encryption in settings.": "Versleuteling inschakelen in instellingen.",
-    "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.": "Uw privéberichten zijn versleuteld, maar deze kamer niet. Dit komt vaak doordat u een niet ondersteund apparaat of methode, zoals e-mailuitnodigingen.",
-    "To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "Om problemen te voorkomen, maak een<a>nieuwe publieke kamer</a> voor de gesprekken die u wilt voeren.",
-    "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Het wordt afgeraden om publieke kamers te versleutelen.</b> Het betekend dat iedereen u kan vinden en aan deelnemen, dus iedereen kan al de berichten lezen. U krijgt dus geen voordelen bij versleuteling. Versleutelde berichten in een publieke kamer maakt het ontvangen en versturen van berichten langzamer.",
-    "Are you sure you want to make this encrypted room public?": "Weet u zeker dat u deze publieke kamer wilt versleutelen?",
-    "To avoid these issues, create a <a>new encrypted room</a> for the conversation you plan to have.": "Om deze problemen te voorkomen, maak een <a>nieuwe versleutelde kamer</a> voor de gesprekken die u wilt voeren.",
+    "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.": "Je privéberichten zijn versleuteld, maar deze kamer niet. Dit komt vaak doordat je een niet ondersteund apparaat of methode gebruikt, zoals e-mailuitnodigingen.",
+    "To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "Om problemen te voorkomen, maak een<a>nieuwe publieke kamer</a> voor de gesprekken die je wil voeren.",
+    "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Het wordt afgeraden om publieke kamers te versleutelen.</b> Het betekent dat iedereen je kan vinden en aan deelnemen, dus iedereen kan al de berichten lezen. Je krijgt dus geen voordelen bij versleuteling. Versleutelde berichten in een publieke kamer maakt het ontvangen en versturen van berichten langzamer.",
+    "Are you sure you want to make this encrypted room public?": "Weet je zeker dat je deze publieke kamer wil versleutelen?",
+    "To avoid these issues, create a <a>new encrypted room</a> for the conversation you plan to have.": "Om deze problemen te voorkomen, maak een <a>nieuwe versleutelde kamer</a> voor de gesprekken die je wil voeren.",
     "<b>It's not recommended to add encryption to public rooms.</b>Anyone can find and join public rooms, so anyone can read messages in them. You'll get none of the benefits of encryption, and you won't be able to turn it off later. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Het wordt afgeraden om versleuteling in te schakelen voor publieke kamers.</b>Iedereen kan publieke kamers vinden en aan deelnemen, dus iedereen kan de berichten lezen. U krijgt geen voordelen van de versleuteling en u kunt het later niet uitschakelen. Berichten versleutelen in een publieke kamer maakt het ontvangen en versturen van berichten langzamer.",
-    "Are you sure you want to add encryption to this public room?": "Weet u zeker dat u versleuteling wil inschakelen voor deze publieke kamer?",
+    "Are you sure you want to add encryption to this public room?": "Weet je zeker dat je versleuteling wil inschakelen voor deze publieke kamer?",
     "Cross-signing is ready but keys are not backed up.": "Kruiselings ondertekenen is klaar, maar de sleutels zijn nog niet geback-upt.",
     "Low bandwidth mode (requires compatible homeserver)": "Lage bandbreedte modus (geschikte homeserver vereist)",
     "Thread": "Draad",
     "Threaded messaging": "Discussies tonen",
     "The above, but in <Room /> as well": "Het bovenstaande, maar ook in <Room />",
-    "The above, but in any room you are joined or invited to as well": "Het bovenstaande, maar in elke kamer waar u aan deelneemt en voor uitgenodigd bent",
+    "The above, but in any room you are joined or invited to as well": "Het bovenstaande, maar in elke kamer waar je aan deelneemt en voor uitgenodigd bent",
     "Autoplay videos": "Videos automatisch afspelen",
     "Autoplay GIFs": "GIF's automatisch afspelen",
     "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s maakte een vastgeprikt bericht los van deze kamer. Bekijk alle vastgeprikte berichten.",
@@ -2707,14 +2707,14 @@
     "Change main address for the space": "Hoofdadres van space wijzigen",
     "Change space name": "Spacenaam wijzigen",
     "Change space avatar": "Space-afbeelding wijzigen",
-    "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Iedereen in <spaceName/> kan hem vinden en deelnemen. U kunt ook andere spaces selecteren.",
+    "Anyone in <spaceName/> can find and join. You can select other spaces too.": "Iedereen in <spaceName/> kan hem vinden en deelnemen. Je kan ook andere spaces selecteren.",
     "Message didn't send. Click for info.": "Bericht is niet verstuur. Klik voor meer info.",
     "Message": "Bericht",
-    "To join a space you'll need an invite.": "Om te kunnen deelnemen aan een space heeft u een uitnodiging nodig.",
+    "To join a space you'll need an invite.": "Om te kunnen deelnemen aan een space heb je een uitnodiging nodig.",
     "Joining space …": "Deelnemen aan Space…",
     "%(reactors)s reacted with %(content)s": "%(reactors)s reageerde met %(content)s",
-    "Would you like to leave the rooms in this space?": "Wilt u de kamers verlaten in deze Space?",
-    "You are about to leave <spaceName/>.": "U staat op het punt <spaceName/> te verlaten.",
+    "Would you like to leave the rooms in this space?": "Wil je de kamers verlaten in deze Space?",
+    "You are about to leave <spaceName/>.": "Je staat op het punt <spaceName/> te verlaten.",
     "Leave some rooms": "Sommige kamers verlaten",
     "Leave all rooms": "Alle kamers verlaten",
     "Don't leave any rooms": "Geen kamers verlaten",
@@ -2724,12 +2724,12 @@
     "Include Attachments": "Bijlages toevoegen",
     "Size Limit": "Bestandsgrootte",
     "Format": "Formaat",
-    "Select from the options below to export chats from your timeline": "Selecteer met welke opties u uw chats wilt exporteren van uw tijdlijn",
+    "Select from the options below to export chats from your timeline": "Selecteer met welke opties je jouw chats wilt exporteren van je tijdlijn",
     "Export Chat": "Chat exporteren",
-    "Exporting your data": "Uw data aan het exporteren",
+    "Exporting your data": "Jouw data aan het exporteren",
     "Stop": "Stop",
-    "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Weet u zeker dat u wilt stoppen terwijl u uw data exporteert? Als u dit doet moet u later opnieuw beginnen.",
-    "Your export was successful. Find it in your Downloads folder.": "Uw export was succesvol. U vindt hem in uw Downloads-map.",
+    "Are you sure you want to stop exporting your data? If you do, you'll need to start over.": "Weet je zeker dat je wilt stoppen terwijl je jouw data exporteert? Als je dit doet moet je later opnieuw beginnen.",
+    "Your export was successful. Find it in your Downloads folder.": "Jouw export was succesvol. Je vindt hem in je Downloads-map.",
     "The export was cancelled successfully": "De export was succesvol geannulleerd",
     "Export Successful": "Export succesvol",
     "MB": "MB",
@@ -2752,21 +2752,21 @@
     "Plain Text": "Platte tekst",
     "JSON": "JSON",
     "HTML": "HTML",
-    "Are you sure you want to exit during this export?": "Weet u zeker dat u wilt afsluiten tijdens een export?",
+    "Are you sure you want to exit during this export?": "Weet je zeker dat je wilt afsluiten tijdens een export?",
     "See room timeline (devtools)": "Kamer tijdlijn bekijken (dev tools)",
     "View in room": "In kamer bekijken",
     "Enter your Security Phrase or <button>use your Security Key</button> to continue.": "Voer uw veiligheidswachtwoord in of <button>gebruik uw veiligheidssleutel</button> om door te gaan.",
     "Downloading": "Downloaden",
-    "They won't be able to access whatever you're not an admin of.": "Ze zullen geen toegang hebben tot alles waar u geen beheerder van bent.",
+    "They won't be able to access whatever you're not an admin of.": "Ze zullen geen toegang hebben tot alles waar je geen beheerder van bent.",
     "Ban them from specific things I'm able to": "Ban ze van specifieke plekken waar ik dit kan",
     "Unban them from specific things I'm able to": "Ontban ze van alles specifieke plekken waar ik dit kan",
     "Ban them from everything I'm able to": "Verban ze van alles waar ik dit kan",
     "Unban them from everything I'm able to": "Ontban ze van alles waar ik dit kan",
     "Ban from %(roomName)s": "Verban van %(roomName)s",
     "Unban from %(roomName)s": "Ontban van %(roomName)s",
-    "They'll still be able to access whatever you're not an admin of.": "Ze zullen nog steeds toegang hebben tot alles waar u geen beheerder bent.",
+    "They'll still be able to access whatever you're not an admin of.": "Ze zullen nog steeds toegang hebben tot alles waar je geen beheerder van bent.",
     "Disinvite from %(roomName)s": "Uitnodiging intrekken voor %(roomName)s",
-    "Threads": "Discussies",
+    "Threads": "Threads",
     "Create poll": "Poll aanmaken",
     "%(count)s reply|one": "%(count)s reactie",
     "%(count)s reply|other": "%(count)s reacties",
@@ -2780,19 +2780,19 @@
     "Shows all threads from current room": "Toon alle discussies van huidige kamer",
     "All threads": "Alle discussies",
     "My threads": "Mijn discussies",
-    "Please only proceed if you're sure you've lost all of your other devices and your security key.": "Ga alleen verder als u zeker weet dat u al uw andere apparaten en uw veiligheidssleutel kwijt bent.",
-    "Resetting your verification keys cannot be undone. After resetting, you won't have access to old encrypted messages, and any friends who have previously verified you will see security warnings until you re-verify with them.": "Het resetten van uw verificatiesleutels kan niet ongedaan worden gemaakt. Na het resetten hebt u geen toegang meer tot oude versleutelde berichten, en vrienden die u eerder hebben geverifieerd zullen veiligheidswaarschuwingen zien totdat u zich opnieuw bij hen verifieert.",
+    "Please only proceed if you're sure you've lost all of your other devices and your security key.": "Ga alleen verder als je zeker weet dat je al jouw andere apparaten en je veiligheidssleutel kwijt bent.",
+    "Resetting your verification keys cannot be undone. After resetting, you won't have access to old encrypted messages, and any friends who have previously verified you will see security warnings until you re-verify with them.": "Het resetten van je verificatiesleutels kan niet ongedaan worden gemaakt. Na het resetten heb je geen toegang meer tot oude versleutelde berichten, en vrienden die je eerder hebben geverifieerd zullen veiligheidswaarschuwingen zien totdat je opnieuw bij hen geverifieert bent.",
     "I'll verify later": "Ik verifieer het later",
     "Verify with Security Key": "Verifieer met veiligheidssleutel",
     "Verify with Security Key or Phrase": "Verifieer met veiligheidssleutel of -wachtwoord",
     "Proceed with reset": "Met reset doorgaan",
-    "Really reset verification keys?": "Echt uw verificatiesleutels resetten?",
-    "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.": "Het lijkt erop dat u geen veiligheidssleutel hebt of andere apparaten waarmee u kunt verifiëren.  Dit apparaat heeft geen toegang tot oude versleutelde berichten. Om uw identiteit op dit apparaat te verifiëren, moet u uw verificatiesleutels opnieuw instellen.",
+    "Really reset verification keys?": "Echt je verificatiesleutels resetten?",
+    "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.": "Het lijkt erop dat je geen veiligheidssleutel hebt of andere apparaten waarmee je kunt verifiëren.  Dit apparaat heeft geen toegang tot oude versleutelde berichten. Om je identiteit op dit apparaat te verifiëren, moet je jouw verificatiesleutels opnieuw instellen.",
     "That e-mail address is already in use.": "Dit e-mailadres is al in gebruik.",
     "The email address doesn't appear to be valid.": "Dit e-mailadres lijkt niet geldig te zijn.",
     "Skip verification for now": "Verificatie voorlopig overslaan",
     "Show:": "Toon:",
-    "What projects are your team working on?": "Aan welke projecten werkt uw team?",
+    "What projects are your team working on?": "Aan welke projecten werkt jouw team?",
     "Joined": "Toegetreden",
     "Insert link": "Koppeling invoegen",
     "%(senderDisplayName)s changed who can join this room.": "%(senderDisplayName)s veranderde wie lid kan worden van deze kamer.",
@@ -2806,15 +2806,15 @@
     "Sign out devices|other": "Apparaten uitloggen",
     "Click the button below to confirm signing out these devices.|one": "Klik op onderstaande knop om het uitloggen van dit apparaat te bevestigen.",
     "Click the button below to confirm signing out these devices.|other": "Klik op onderstaande knop om het uitloggen van deze apparaten te bevestigen.",
-    "Confirm logging out these devices by using Single Sign On to prove your identity.|one": "Bevestig uw identiteit met eenmalig inloggen om dit apparaat uit te loggen.",
-    "Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Bevestig uw identiteit met eenmalig inloggen om deze apparaten uit te loggen.",
+    "Confirm logging out these devices by using Single Sign On to prove your identity.|one": "Bevestig je identiteit met eenmalig inloggen om dit apparaat uit te loggen.",
+    "Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Bevestig je identiteit met eenmalig inloggen om deze apparaten uit te loggen.",
     "Unable to load device list": "Kan apparatenlijst niet laden",
-    "Your homeserver does not support device management.": "Uw homeserver ondersteunt geen apparaatbeheer.",
+    "Your homeserver does not support device management.": "Jouw homeserver ondersteunt geen apparaatbeheer.",
     "Use a more compact 'Modern' layout": "Compacte 'Moderne'-indeling gebruiken",
     "Sign Out": "Uitloggen",
     "Last seen %(date)s at %(ip)s": "Laatst gezien %(date)s via %(ip)s",
     "This device": "Dit apparaat",
-    "You aren't signed into any other devices.": "U bent niet ingelogd op andere apparaten.",
+    "You aren't signed into any other devices.": "Je bent niet ingelogd op andere apparaten.",
     "Sign out %(count)s selected devices|one": "%(count)s geselecteerd apparaat uitloggen",
     "Sign out %(count)s selected devices|other": "%(count)s geselecteerde apparaten uitloggen",
     "Devices without encryption support": "Apparaten zonder versleuteling ondersteuning",
@@ -2823,30 +2823,30 @@
     "Other rooms": "Andere kamers",
     "Automatically send debug logs on any error": "Automatisch foutenlogboek versturen bij een fout",
     "Rename": "Hernoemen",
-    "Show all threads": "Discussies weergeven",
-    "Keep discussions organised with threads": "Houd discussies georganiseerd",
-    "Shows all threads you've participated in": "Toon alle discussies waarin u heeft bijgedragen",
-    "You're all caught up": "U bent helemaal bij",
-    "Own your conversations.": "Gesprekken die helemaal van u zijn.",
-    "Someone already has that username. Try another or if it is you, sign in below.": "Iemand heeft die inlognaam al. Probeer een andere of als u het bent, log dan hieronder in.",
+    "Show all threads": "Threads weergeven",
+    "Keep discussions organised with threads": "Houd threads georganiseerd",
+    "Shows all threads you've participated in": "Toon alle threads waarin je hebt bijgedragen",
+    "You're all caught up": "Je bent helemaal bij",
+    "Own your conversations.": "Gesprekken die helemaal van jou zijn.",
+    "Someone already has that username. Try another or if it is you, sign in below.": "Iemand heeft die inlognaam al. Probeer een andere of als je het bent, log dan hieronder in.",
     "Copy link to thread": "Kopieer link naar draad",
     "Thread options": "Draad opties",
     "Copy link": "Link kopieren",
     "Mentions only": "Alleen vermeldingen",
     "Forget": "Vergeet",
-    "We call the places where you can host your account 'homeservers'.": "Wij noemen de plaatsen waar u uw account kunt hosten 'homeservers'.",
+    "We call the places where you can host your account 'homeservers'.": "Wij noemen de plaatsen waar je jouw account kunt hosten 'homeservers'.",
     "Matrix.org is the biggest public homeserver in the world, so it's a good place for many.": "Matrix.org is de grootste publieke homeserver ter wereld, dus het is een goede plek voor velen.",
-    "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.",
+    "If you can't see who you're looking for, send them your invite link below.": "Als je niet kan vinden wie je zoekt, stuur ze dan je uitnodigingslink hieronder.",
     "Minimise dialog": "Dialoog minimaliseren",
     "Maximise dialog": "Dialoog maximaliseren",
-    "You can't disable this later. Bridges & most bots won't work yet.": "U kunt dit later niet uitschakelen. Bruggen en de meeste bots zullen nog niet werken.",
+    "You can't disable this later. Bridges & most bots won't work yet.": "Je kan dit later niet uitschakelen. Bruggen en de meeste bots zullen nog niet werken.",
     "Add option": "Optie toevoegen",
     "Write an option": "Schrijf een optie",
     "Option %(number)s": "Optie %(number)s",
     "Create options": "Opties maken",
     "Write something...": "Schrijf iets...",
     "Question or topic": "Vraag of onderwerp",
-    "What is your poll question or topic?": "Wat is uw poll vraag of onderwerp?",
+    "What is your poll question or topic?": "Wat is jouw poll vraag of onderwerp?",
     "Create Poll": "Poll aanmaken",
     "Based on %(count)s votes|one": "Gebaseerd op %(count)s stem",
     "Based on %(count)s votes|other": "Gebaseerd op %(count)s stemmen",
@@ -2856,28 +2856,28 @@
     "Files": "Bestanden",
     "Close this widget to view it in this panel": "Sluit deze widget om het in dit paneel weer te geven",
     "Unpin this widget to view it in this panel": "Maak deze widget los om het in dit paneel weer te geven",
-    "Yours, or the other users' session": "Uw sessie, of die van de andere personen",
-    "Yours, or the other users' internet connection": "Uw internetverbinding, of die van de andere personen",
-    "The homeserver the user you're verifying is connected to": "De homeserver waarmee de persoon die u verifieert verbonden is",
+    "Yours, or the other users' session": "Jouw sessie, of die van de andere personen",
+    "Yours, or the other users' internet connection": "Jouw internetverbinding, of die van de andere personen",
+    "The homeserver the user you're verifying is connected to": "De homeserver waarmee de persoon die jij verifieert verbonden is",
     "Can't see what you're looking for?": "Kunt u niet zien wat u zoekt?",
-    "You do not have permission to start polls in this room.": "U heeft geen toestemming om polls te starten in deze kamer.",
+    "You do not have permission to start polls in this room.": "Je hebt geen toestemming om polls te starten in deze kamer.",
     "Reply in thread": "Reageer in draad",
     "Manage rooms in this space": "Beheer kamers in deze space",
-    "You won't get any notifications": "U krijgt geen meldingen",
-    "Get notified only with mentions and keywords as set up in your <a>settings</a>": "Krijg alleen meldingen met vermeldingen en trefwoorden zoals ingesteld in uw <a>instellingen</a>",
+    "You won't get any notifications": "Je krijgt geen meldingen",
+    "Get notified only with mentions and keywords as set up in your <a>settings</a>": "Krijg alleen meldingen met vermeldingen en trefwoorden zoals ingesteld in je <a>instellingen</a>",
     "@mentions & keywords": "@vermeldingen & trefwoorden",
     "Get notified for every message": "Ontvang een melding bij elk bericht",
     "Get notifications as set up in your <a>settings</a>": "Ontvang de meldingen zoals ingesteld in uw <a>instellingen</a>",
     "This room isn't bridging messages to any platforms. <a>Learn more.</a>": "Deze kamer overbrugt geen berichten naar platformen. <a>Lees meer.</a>",
     "Rooms outside of a space": "Kamers buiten een space",
-    "Show all your rooms in Home, even if they're in a space.": "Toon al uw kamers in Home, zelfs als ze al in een space zitten.",
+    "Show all your rooms in Home, even if they're in a space.": "Toon al je kamers in Home, zelfs als ze al in een space zitten.",
     "Home is useful for getting an overview of everything.": "Home is handig om een overzicht van alles te krijgen.",
     "Spaces to show": "Spaces om te tonen",
     "Sidebar": "Zijbalk",
-    "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Beheer uw ingelogde apparaten hieronder. De naam van een apparaat is zichtbaar voor personen met wie u communiceert.",
-    "Where you're signed in": "Waar u bent ingelogd",
+    "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Beheer jouw ingelogde apparaten hieronder. De naam van een apparaat is zichtbaar voor personen met wie je communiceert.",
+    "Where you're signed in": "Waar je bent ingelogd",
     "Show tray icon and minimise window to it on close": "Geef een pictogram weer in de systeembalk en minimaliseer het venster wanneer het wordt gesloten",
-    "This room is in some spaces you're not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Deze kamer is in spaces waar u geen beheerder van bent. In deze spaces zal de oude kamer nog worden getoond, maar leden zullen een melding krijgen om deel te nemen aan de nieuwe kamer.",
+    "This room is in some spaces you're not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "Deze kamer is in spaces waar je geen beheerder van bent. In deze spaces zal de oude kamer nog worden getoond, maar leden zullen een melding krijgen om deel te nemen aan de nieuwe kamer.",
     "Large": "Groot",
     "Image size in the timeline": "Afbeeldingformaat in de tijdlijn",
     "Sends the given message with rainfall": "Stuurt het bericht met neerslag",
@@ -2886,15 +2886,15 @@
     "%(spaceName)s and %(count)s others|one": "%(spaceName)s en %(count)s andere",
     "%(spaceName)s and %(count)s others|zero": "%(spaceName)s",
     "%(spaceName)s and %(count)s others|other": "%(spaceName)s en %(count)s andere",
-    "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.": "Voer een veiligheidswachtwoord in die alleen u kent, deze wordt gebruikt om al uw gegevens te versleutelen. Om echt veilig te zijn, moet u het wachtwoord van uw account niet hergebruiken.",
-    "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "Wij maken een veiligheidssleutel voor u aan die u ergens veilig kunt opbergen, zoals in een wachtwoordmanager of een kluis.",
-    "Regain access to your account and recover encryption keys stored in this session. Without them, you won't be able to read all of your secure messages in any session.": "Ontvang toegang tot uw account en herstel de tijdens deze sessie opgeslagen versleutelingssleutels, zonder deze sleutels zijn sommige van uw versleutelde berichten in uw sessies onleesbaar.",
-    "Without verifying, you won't have access to all your messages and may appear as untrusted to others.": "Zonder verifiëren heeft u geen toegang tot al uw berichten en kan u als onvertrouwd aangemerkt staan bij anderen.",
-    "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "Bewaar uw veiligheidssleutel op een veilige plaats, zoals in een wachtwoordmanager of een kluis, aangezien hiermee uw versleutelde gegevens zijn beveiligd.",
+    "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.": "Voer een veiligheidswachtwoord in die alleen jij kent, deze wordt gebruikt om al je gegevens te versleutelen. Om echt veilig te zijn, moet je het wachtwoord van je account niet hergebruiken.",
+    "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "Wij maken een veiligheidssleutel voor je aan die je ergens veilig kunt opbergen, zoals in een wachtwoordmanager of een kluis.",
+    "Regain access to your account and recover encryption keys stored in this session. Without them, you won't be able to read all of your secure messages in any session.": "Ontvang toegang tot je account en herstel de tijdens deze sessie opgeslagen versleutelingssleutels, zonder deze sleutels zijn sommige van je versleutelde berichten in je sessies onleesbaar.",
+    "Without verifying, you won't have access to all your messages and may appear as untrusted to others.": "Zonder verifiëren heb je geen toegang tot al je berichten en kan je als onvertrouwd aangemerkt staan bij anderen.",
+    "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "Bewaar je veiligheidssleutel op een veilige plaats, zoals in een wachtwoordmanager of een kluis, aangezien hiermee je versleutelde gegevens zijn beveiligd.",
     "Someone already has that username, please try another.": "Iemand heeft die inlognaam al, probeer een andere.",
-    "Sorry, the poll you tried to create was not posted.": "Sorry, de poll die u probeerde aan te maken is niet geplaatst.",
+    "Sorry, the poll you tried to create was not posted.": "Sorry, de poll die je probeerde aan te maken is niet geplaatst.",
     "Failed to post poll": "Poll plaatsen mislukt",
-    "Sorry, your vote was not registered. Please try again.": "Sorry, uw stem is niet geregistreerd. Probeer het alstublieft opnieuw.",
+    "Sorry, your vote was not registered. Please try again.": "Sorry, jouw stem is niet geregistreerd. Probeer het alstublieft opnieuw.",
     "Vote not registered": "Stem niet geregistreerd",
     "Pin to sidebar": "Vastprikken aan zijbalk",
     "Quick settings": "Snelle instellingen",
@@ -2904,23 +2904,23 @@
     "Message Previews": "Berichtvoorbeelden",
     "Moderation": "Moderatie",
     "Messaging": "Messaging",
-    "Spaces you know that contain this space": "Spaces die u kent met deze Space",
+    "Spaces you know that contain this space": "Spaces die je kent met deze Space",
     "Chat": "Chat",
     "Clear": "Wis",
-    "You may contact me if you want to follow up or to let me test out upcoming ideas": "U kunt contact met mij opnemen als u updates wil van of wilt deelnemen aan nieuwe ideeën",
+    "You may contact me if you want to follow up or to let me test out upcoming ideas": "Je kan contact met mij opnemen als je updates wil van of wilt deelnemen aan nieuwe ideeën",
     "Home options": "Home-opties",
     "%(spaceName)s menu": "%(spaceName)s-menu",
     "Join public room": "Publieke kamer toetreden",
-    "You do not have permissions to invite people to this space": "U heeft geen toestemming om personen in deze Space uit te nodigen",
+    "You do not have permissions to invite people to this space": "Je hebt geen toestemming om personen in deze Space uit te nodigen",
     "Add people": "Personen toevoegen",
     "Invite to space": "Voor Space uitnodigen",
     "Start new chat": "Nieuwe chat beginnen",
     "Recently viewed": "Recent bekeken",
     "Use new room breadcrumbs": "Gebruik nieuwe kamer broodkruimels",
-    "You can turn this off anytime in settings": "U kan dit elk moment uitzetten in instellingen",
+    "You can turn this off anytime in settings": "Je kan dit elk moment uitzetten in instellingen",
     "We <Bold>don't</Bold> share information with third parties": "We delen <Bold>geen</Bold> informatie met derde partijen",
     "We <Bold>don't</Bold> record or profile any account data": "We verwerken of bewaren <Bold>geen</Bold> accountgegevens",
-    "You can read all our terms <PrivacyPolicyUrl>here</PrivacyPolicyUrl>": "U kan alle voorwaarden <PrivacyPolicyUrl>hier</PrivacyPolicyUrl> lezen",
+    "You can read all our terms <PrivacyPolicyUrl>here</PrivacyPolicyUrl>": "Je kan alle voorwaarden <PrivacyPolicyUrl>hier</PrivacyPolicyUrl> lezen",
     "%(count)s votes cast. Vote to see the results|one": "%(count)s stem uitgebracht. Stem om de resultaten te zien",
     "%(count)s votes cast. Vote to see the results|other": "%(count)s stemmen uitgebracht. Stem om de resultaten te zien",
     "No votes cast": "Geen stemmen uitgebracht",
@@ -2928,17 +2928,17 @@
     "Okay": "Oké",
     "To view all keyboard shortcuts, <a>click here</a>.": "Om alle sneltoetsen te bekijken, <a>klik hier</a>.",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties. <LearnMoreLink>Learn More</LearnMoreLink>": "Deel anonieme data om ons problemen te laten opsporen. Geen persoonsgegeven. Geen derde partijen. <LearnMoreLink>Lees Meer</LearnMoreLink>",
-    "You previously consented to share anonymous usage data with us. We're updating how that works.": "U heeft eerdere ingestemd met verzamelen van anonieme gedragsdata met ons. We updaten nu hoe dit werkt.",
+    "You previously consented to share anonymous usage data with us. We're updating how that works.": "Je hebt eerder ingestemd met het verzamelen van anonieme gedragsdata met ons. We updaten nu hoe dit werkt.",
     "Help improve %(analyticsOwner)s": "Help %(analyticsOwner)s verbeteren",
     "That's fine": "Dat is prima",
     "Share location": "Locatie delen",
     "Manage pinned events": "Vastgeprikte gebeurtenissen beheren",
-    "You cannot place calls without a connection to the server.": "U kunt geen oproepen plaatsen zonder een verbinding met de server.",
+    "You cannot place calls without a connection to the server.": "Je kan geen oproepen plaatsen zonder een verbinding met de server.",
     "Connectivity to the server has been lost": "De verbinding met de server is verbroken",
-    "You cannot place calls in this browser.": "U kunt geen oproepen plaatsen in deze browser.",
+    "You cannot place calls in this browser.": "Je kan geen oproepen plaatsen in deze browser.",
     "Calls are unsupported": "Oproepen worden niet ondersteund",
     "Toggle space panel": "Spacepaneel in- of uitschakelen",
-    "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Weet u zeker dat u de poll wil sluiten? Dit zal zichtbaar zijn in de einduitslag van de poll en personen kunnen dan niet langer stemmen.",
+    "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "Weet je zeker dat je de poll wil sluiten? Dit zal zichtbaar zijn in de einduitslag van de poll en personen kunnen dan niet langer stemmen.",
     "End Poll": "Poll sluiten",
     "Sorry, the poll did not end. Please try again.": "Helaas, de poll is niet gesloten. Probeer het opnieuw.",
     "Failed to end poll": "Poll sluiten is mislukt",
@@ -2956,11 +2956,11 @@
     "Use \"%(query)s\" to search": "Gebruik \"%(query)s\" om te zoeken",
     "Other rooms in %(spaceName)s": "Andere kamers in %(spaceName)s",
     "Spaces you're in": "Spaces waar u in zit",
-    "This groups your chats with members of this space. Turning this off will hide those chats from your view of %(spaceName)s.": "Dit groepeert uw chats met leden van deze space. Als u dit uitschakelt, worden deze chats verborgen voor %(spaceName)s.",
+    "This groups your chats with members of this space. Turning this off will hide those chats from your view of %(spaceName)s.": "Dit groepeert jouw chats met leden van deze space. Als je dit uitschakelt, worden deze chats verborgen voor %(spaceName)s.",
     "Sections to show": "Te tonen secties",
     "Link to room": "Link naar kamer",
     "Processing...": "Verwerken...",
-    "Including you, %(commaSeparatedMembers)s": "Inclusief u, %(commaSeparatedMembers)s",
+    "Including you, %(commaSeparatedMembers)s": "Inclusief jij, %(commaSeparatedMembers)s",
     "Copy room link": "Kamerlink kopiëren",
     "Creating output...": "Uitvoer maken...",
     "Fetching events...": "Gebeurtenissen ophalen...",
@@ -2978,8 +2978,8 @@
     "Fetched %(count)s events out of %(total)s|one": "%(count)s gebeurtenis opgehaald van de %(total)s",
     "Fetched %(count)s events out of %(total)s|other": "%(count)s gebeurtenissen opgehaald van de %(total)s",
     "Generating a ZIP": "Genereer een ZIP",
-    "Your new device is now verified. Other users will see it as trusted.": "Uw nieuwe apparaat is nu geverifieerd. Andere personen zien het nu als vertrouwd.",
-    "Your new device is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Uw nieuwe apparaat is nu geverifieerd. Het heeft toegang tot uw versleutelde berichten en andere personen zien het als vertrouwd.",
+    "Your new device is now verified. Other users will see it as trusted.": "Jouw nieuwe apparaat is nu geverifieerd. Andere personen zien het nu als vertrouwd.",
+    "Your new device is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Jouw nieuwe apparaat is nu geverifieerd. Het heeft toegang tot je versleutelde berichten en andere personen zien het als vertrouwd.",
     "Verify with another device": "Verifieer met andere apparaat",
     "Device verified": "Apparaat geverifieerd",
     "Verify this device": "Verifieer dit apparaat",
@@ -2990,14 +2990,14 @@
     "Missing domain separator e.g. (:domain.org)": "Ontbrekend domeinscheidingsteken, bijv. (:voorbeeld.nl)",
     "Backspace": "Backspace",
     "toggle event": "wissel gebeurtenis",
-    "You cancelled verification on your other device.": "U heeft de verificatie geannuleerd op het andere apparaat.",
-    "Almost there! Is your other device showing the same shield?": "U bent er bijna! Toont het andere apparaat hetzelfde schild?",
+    "You cancelled verification on your other device.": "Je hebt de verificatie geannuleerd op het andere apparaat.",
+    "Almost there! Is your other device showing the same shield?": "Je bent er bijna! Toont het andere apparaat hetzelfde schild?",
     "Verify this device by completing one of the following:": "Verifieer dit apparaat door een van onderstaande methodes af te ronden:",
-    "The device 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.": "Het apparaat dat u probeert te verifiëren ondersteund niet de door %(brand)s ondersteunde methodes: scannen van een QR-code of emoji verificatie. Probeer het met een andere app.",
-    "To proceed, please accept the verification request on your other device.": "Om door te gaan, accepteer het verificatie verzoek op uw andere apparaat.",
-    "Waiting for you to verify on your other device…": "Wachten op uw verificatie op het andere apparaat…",
-    "Waiting for you to verify on your other device, %(deviceName)s (%(deviceId)s)…": "Wachten op uw verificatie op het andere apparaat, %(deviceName)s (%(deviceId)s)…",
-    "Verify this device by confirming the following number appears on its screen.": "Verifieer dit apparaat door te bevestigen vdat het volgende nummer zichtbaar is op het scherm.",
+    "The device 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.": "Het apparaat dat je probeert te verifiëren ondersteund niet de door %(brand)s ondersteunde methodes: scannen van een QR-code of emoji verificatie. Probeer het met een andere app.",
+    "To proceed, please accept the verification request on your other device.": "Om door te gaan, accepteer het verificatie verzoek op je andere apparaat.",
+    "Waiting for you to verify on your other device…": "Wachten op je verificatie op het andere apparaat…",
+    "Waiting for you to verify on your other device, %(deviceName)s (%(deviceId)s)…": "Wachten op je verificatie op het andere apparaat, %(deviceName)s (%(deviceId)s)…",
+    "Verify this device by confirming the following number appears on its screen.": "Verifieer dit apparaat door te bevestigen dat het volgende nummer zichtbaar is op het scherm.",
     "Confirm the emoji below are displayed on both devices, in the same order:": "Bevestig dat de onderstaande emoji zichtbaar zijn op beide apparaten en in dezelfde volgorde:",
     "Dial": "Bel",
     "Back to thread": "Terug naar draad",
@@ -3021,8 +3021,8 @@
     "were removed %(count)s times|one": "zijn verwijderd",
     "were removed %(count)s times|other": "werden %(count)s keer verwijderd",
     "Unknown error fetching location. Please try again later.": "Onbekende fout bij ophalen van locatie. Probeer het later opnieuw.",
-    "Timed out trying to fetch your location. Please try again later.": "Er is een time-out opgetreden bij het ophalen van uw locatie. Probeer het later opnieuw.",
-    "Failed to fetch your location. Please try again later.": "Kan uw locatie niet ophalen. Probeer het later opnieuw.",
+    "Timed out trying to fetch your location. Please try again later.": "Er is een time-out opgetreden bij het ophalen van jouw locatie. Probeer het later opnieuw.",
+    "Failed to fetch your location. Please try again later.": "Kan jouw locatie niet ophalen. Probeer het later opnieuw.",
     "Could not fetch location": "Kan locatie niet ophalen",
     "Message pending moderation": "Bericht in afwachting van moderatie",
     "Message pending moderation: %(reason)s": "Bericht in afwachting van moderatie: %(reason)s",
@@ -3031,11 +3031,11 @@
     "Remove them from specific things I'm able to": "Verwijder ze van specifieke dingen die ik kan",
     "Remove them from everything I'm able to": "Verwijder ze van alles wat ik kan",
     "Remove from %(roomName)s": "Verwijderen uit %(roomName)s",
-    "You were removed from %(roomName)s by %(memberName)s": "U bent verwijderd uit %(roomName)s door %(memberName)s",
-    "You can't see earlier messages": "U kunt eerdere berichten niet zien",
+    "You were removed from %(roomName)s by %(memberName)s": "Je bent verwijderd uit %(roomName)s door %(memberName)s",
+    "You can't see earlier messages": "Je kan eerdere berichten niet zien",
     "Encrypted messages before this point are unavailable.": "Versleutelde berichten vóór dit punt zijn niet beschikbaar.",
-    "You don't have permission to view messages from before you joined.": "U heeft geen toestemming om berichten te bekijken voor voordat u lid word.",
-    "You don't have permission to view messages from before you were invited.": "U bent niet gemachtigd om berichten te bekijken van voordat u werd uitgenodigd.",
+    "You don't have permission to view messages from before you joined.": "Je hebt geen toestemming om berichten te bekijken voor voordat je lid werd.",
+    "You don't have permission to view messages from before you were invited.": "Je bent niet gemachtigd om berichten te bekijken van voordat je werd uitgenodigd.",
     "From a thread": "Uit een conversatie",
     "Remove users": "Personen verwijderen",
     "Keyboard": "Toetsenbord",
@@ -3076,8 +3076,8 @@
     "Jump to last message": "Naar het laatste bericht springen",
     "Jump to first message": "Naar eerste bericht springen",
     "Toggle hidden event visibility": "Schakel verborgen gebeurteniszichtbaarheid in",
-    "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!": "Als u weet wat u doet, Element is open-source, bekijk dan zeker onze GitHub (https://github.com/vector-im/element-web/) en draag bij!",
-    "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!": "Als iemand u heeft gezegd iets hier te kopiëren/plakken, is de kans groot dat u wordt opgelicht!",
+    "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!": "Als je weet wat je doet, Element is open-source, bekijk dan zeker onze GitHub (https://github.com/vector-im/element-web/) en draag bij!",
+    "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!": "Als iemand je heeft gezegd iets hier te kopiëren/plakken, is de kans groot dat je wordt opgelicht!",
     "Wait!": "Wacht!",
     "Unable to check if username has been taken. Try again later.": "Kan niet controleren of inlognaam is gebruikt. Probeer het later nog eens.",
     "This address does not point at this room": "Dit adres verwijst niet naar deze kamer",
@@ -3087,10 +3087,10 @@
     "Last month": "Vorige maand",
     "Last week": "Vorige week",
     "Unable to find event at that date. (%(code)s)": "Kan gebeurtenis op die datum niet vinden. (%(code)s)",
-    "Group all your rooms that aren't part of a space in one place.": "Groepeer al uw kamers die geen deel uitmaken van een space op één plaats.",
-    "Group all your people in one place.": "Groepeer al uw mensen op één plek.",
-    "Group all your favourite rooms and people in one place.": "Groepeer al uw favoriete kamers en mensen op één plek.",
-    "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces zijn manieren om kamers en mensen te groeperen. Naast de spaces waarin u zich bevindt, kunt u ook enkele kant-en-klare spaces gebruiken.",
+    "Group all your rooms that aren't part of a space in one place.": "Groepeer al je kamers die geen deel uitmaken van een space op één plaats.",
+    "Group all your people in one place.": "Groepeer al je mensen op één plek.",
+    "Group all your favourite rooms and people in one place.": "Groepeer al je favoriete kamers en mensen op één plek.",
+    "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces zijn manieren om kamers en mensen te groeperen. Naast de spaces waarin jij je bevindt, kunt je ook enkele kant-en-klare spaces gebruiken.",
     "IRC (Experimental)": "IRC (Experimenteel)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Ga naar datum (voegt /jumptodate en spring naar datum headers toe)",
     "Right panel stays open (defaults to room member list)": "Rechter paneel blijft open (standaard in lijst met gespreksleden)",
@@ -3115,12 +3115,12 @@
     "%(severalUsers)sremoved a message %(count)s times|one": "%(severalUsers)shebben een bericht verwijderd",
     "%(severalUsers)sremoved a message %(count)s times|other": "%(severalUsers)sverwijderde %(count)s berichten",
     "Maximise": "Maximaliseren",
-    "You do not have permissions to add spaces to this space": "U bent niet gemachtigd om spaces aan deze space toe te voegen",
+    "You do not have permissions to add spaces to this space": "Je bent niet gemachtigd om spaces aan deze space toe te voegen",
     "Automatically send debug logs when key backup is not functioning": "Automatisch foutopsporingslogboeken versturen wanneer de sleutelback-up niet werkt",
     "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Bedankt voor het proberen van de bèta. Ga alsjeblieft zo gedetailleerd mogelijk in op de details zodat we deze kunnen verbeteren.",
     "How can I leave the beta?": "Hoe kan ik de bèta verlaten?",
     "%(space1Name)s and %(space2Name)s": "%(space1Name)s en %(space2Name)s",
-    "You do not have permission to invite people to this space.": "U bent niet gemachtigd om mensen voor deze space uit te nodigen.",
+    "You do not have permission to invite people to this space.": "Je bent niet gemachtigd om mensen voor deze space uit te nodigen.",
     "No virtual room for this room": "Geen virtuele ruimte voor deze ruimte",
     "Switches to this room's virtual room, if it has one": "Schakelt over naar de virtuele kamer van deze kamer, als die er is",
     "Failed to invite users to %(roomName)s": "Kan personen niet uitnodigen voor %(roomName)s",
@@ -3169,14 +3169,14 @@
     "Create room": "Ruimte aanmaken",
     "Create video room": "Videokamer maken",
     "Create a video room": "Creëer een videokamer",
-    "Uncheck if you also want to remove system messages on this user (e.g. membership change, profile change…)": "Schakel het vinkje uit als u ook systeemberichten van deze persoon wilt verwijderen (bijv. lidmaatschapswijziging, profielwijziging...)",
+    "Uncheck if you also want to remove system messages on this user (e.g. membership change, profile change…)": "Schakel het vinkje uit als je ook systeemberichten van deze persoon wil verwijderen (bijv. lidmaatschapswijziging, profielwijziging...)",
     "Preserve system messages": "Systeemberichten behouden",
-    "You are about to remove %(count)s messages by %(user)s. This will remove them permanently for everyone in the conversation. Do you wish to continue?|one": "U staat op het punt %(count)s bericht te verwijderen door %(user)s. Hierdoor worden ze permanent verwijderd voor iedereen in het gesprek. Wilt u doorgaan?",
-    "You are about to remove %(count)s messages by %(user)s. This will remove them permanently for everyone in the conversation. Do you wish to continue?|other": "U staat op het punt %(count)s berichten te verwijderen door %(user)s. Hierdoor worden ze permanent verwijderd voor iedereen in het gesprek. Wilt u doorgaan?",
+    "You are about to remove %(count)s messages by %(user)s. This will remove them permanently for everyone in the conversation. Do you wish to continue?|one": "Je staat op het punt %(count)s bericht te verwijderen door %(user)s. Hierdoor worden ze permanent verwijderd voor iedereen in het gesprek. Wil je doorgaan?",
+    "You are about to remove %(count)s messages by %(user)s. This will remove them permanently for everyone in the conversation. Do you wish to continue?|other": "Je staat op het punt %(count)s berichten te verwijderen door %(user)s. Hierdoor worden ze permanent verwijderd voor iedereen in het gesprek. Wil je doorgaan?",
     "%(featureName)s Beta feedback": "%(featureName)s Bèta-feedback",
-    "Help us identify issues and improve %(analyticsOwner)s by sharing anonymous usage data. To understand how people use multiple devices, we'll generate a random identifier, shared by your devices.": "Help ons problemen te identificeren en %(analyticsOwner)s te verbeteren door anonieme gebruiksgegevens te delen. Om inzicht te krijgen in hoe mensen meerdere apparaten gebruiken, genereren we een willekeurige identificatie die door uw apparaten wordt gedeeld.",
-    "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "U kunt de aangepaste serveropties gebruiken om u aan te melden bij andere Matrix-servers door een andere server-URL op te geven. Hierdoor kunt u %(brand)s gebruiken met een bestaand Matrix-account op een andere thuisserver.",
-    "Results are only revealed when you end the poll": "Resultaten worden pas onthuld als u de poll beëindigt",
+    "Help us identify issues and improve %(analyticsOwner)s by sharing anonymous usage data. To understand how people use multiple devices, we'll generate a random identifier, shared by your devices.": "Help ons problemen te identificeren en %(analyticsOwner)s te verbeteren door anonieme gebruiksgegevens te delen. Om inzicht te krijgen in hoe mensen meerdere apparaten gebruiken, genereren we een willekeurige identificatie die door jouw apparaten wordt gedeeld.",
+    "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "Je kan de aangepaste serveropties gebruiken om je aan te melden bij andere Matrix-servers door een andere server-URL op te geven. Hierdoor kan je %(brand)s gebruiken met een bestaand Matrix-account op een andere thuisserver.",
+    "Results are only revealed when you end the poll": "Resultaten worden pas onthuld als je de poll beëindigt",
     "Voters see results as soon as they have voted": "Kiezers zien resultaten zodra ze hebben gestemd",
     "Closed poll": "Gesloten poll",
     "Open poll": "Start poll",
@@ -3186,19 +3186,19 @@
     "%(oneUser)schanged the <a>pinned messages</a> for the room %(count)s times|other": "%(oneUser)sheeft de <a>vastgezette berichten</a> voor de kamer %(count)s keer gewijzigd",
     "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times|one": "%(severalUsers)shebben de <a>vastgezette berichten</a> voor de kamer gewijzigd",
     "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times|other": "%(severalUsers)sheeft de <a>vastgezette berichten</a> voor de kamer %(count)s keer gewijzigd",
-    "What location type do you want to share?": "Welk locatietype wilt u delen?",
+    "What location type do you want to share?": "Welk locatietype wil je delen?",
     "Drop a Pin": "Zet een pin neer",
     "My live location": "Mijn live locatie",
     "My current location": "Mijn huidige locatie",
     "%(displayName)s's live location": "De live locatie van %(displayName)s",
-    "We couldn't send your location": "We kunnen uw locatie niet versturen",
-    "%(brand)s could not send your location. Please try again later.": "%(brand)s kan uw locatie niet versturen. Probeer het later opnieuw.",
-    "%(brand)s was denied permission to fetch your location. Please allow location access in your browser settings.": "%(brand)s heeft geen toestemming gekregen om uw locatie op te halen. Sta locatietoegang toe in uw browserinstellingen.",
+    "We couldn't send your location": "We kunnen jouw locatie niet versturen",
+    "%(brand)s could not send your location. Please try again later.": "%(brand)s kan jouw locatie niet versturen. Probeer het later opnieuw.",
+    "%(brand)s was denied permission to fetch your location. Please allow location access in your browser settings.": "%(brand)s heeft geen toestemming gekregen om jouw locatie op te halen. Sta locatietoegang toe in je browserinstellingen.",
     "Click to drop a pin": "Klik om een pin neer te zetten",
     "Click to move the pin": "Klik om de pin te verplaatsen",
     "Share for %(duration)s": "Delen voor %(duration)s",
     "Results will be visible when the poll is ended": "Resultaten zijn zichtbaar wanneer de poll is afgelopen",
-    "Sorry, you can't edit a poll after votes have been cast.": "Sorry, u kunt een poll niet bewerken nadat er gestemd is.",
+    "Sorry, you can't edit a poll after votes have been cast.": "Sorry, je kan een poll niet bewerken nadat er gestemd is.",
     "Can't edit poll": "Kan poll niet bewerken",
     "Shared a location: ": "Een locatie gedeeld: ",
     "Shared their location: ": "Hun locatie gedeeld: ",
@@ -3214,20 +3214,20 @@
     "%(count)s participants|one": "1 deelnemer",
     "%(count)s participants|other": "%(count)s deelnemers",
     "Video": "Video",
-    "%(errcode)s was returned while trying to access the room or space. If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.": "%(errcode)s is geretourneerd tijdens een poging om toegang te krijgen tot de kamer of space. Als u denkt dat je dit bericht ten onrechte ziet, <issueLink>dien dan een bugrapport in</issueLink>.",
-    "Try again later, or ask a room or space admin to check if you have access.": "Probeer het later opnieuw of vraag een kamer- of space beheerder om te controleren of u toegang heeft.",
+    "%(errcode)s was returned while trying to access the room or space. If you think you're seeing this message in error, please <issueLink>submit a bug report</issueLink>.": "%(errcode)s is geretourneerd tijdens een poging om toegang te krijgen tot de kamer of space. Als je denkt dat je dit bericht ten onrechte ziet, <issueLink>dien dan een bugrapport in</issueLink>.",
+    "Try again later, or ask a room or space admin to check if you have access.": "Probeer het later opnieuw of vraag een kamer- of space beheerder om te controleren of je toegang hebt.",
     "This room or space is not accessible at this time.": "Deze kamer of space is op dit moment niet toegankelijk.",
-    "Are you sure you're at the right place?": "Weet u zeker dat je op de goede locatie bent?",
+    "Are you sure you're at the right place?": "Weet je zeker dat je op de goede locatie bent?",
     "This room or space does not exist.": "Deze kamer of space bestaat niet.",
-    "There's no preview, would you like to join?": "Er is geen preview, wilt u toetreden?",
+    "There's no preview, would you like to join?": "Er is geen preview, wil je toetreden?",
     "This invite was sent to %(email)s": "De uitnodiging is verzonden naar %(email)s",
-    "This invite was sent to %(email)s which is not associated with your account": "Deze uitnodiging is verzonden naar %(email)s die niet is gekoppeld aan uw account",
-    "You can still join here.": "U kunt hier nog toetreden.",
-    "An error (%(errcode)s) was returned while trying to validate your invite. You could try to pass this information on to the person who invited you.": "Er is een fout (%(errcode)s) geretourneerd tijdens het valideren van uw uitnodiging. U kunt proberen deze informatie door te geven aan de persoon die u heeft uitgenodigd.",
-    "Something went wrong with your invite.": "Er is iets misgegaan met uw uitnodiging.",
-    "You were banned by %(memberName)s": "U bent verbannen door %(memberName)s",
+    "This invite was sent to %(email)s which is not associated with your account": "Deze uitnodiging is verzonden naar %(email)s die niet is gekoppeld aan jouw account",
+    "You can still join here.": "Je kan hier nog toetreden.",
+    "An error (%(errcode)s) was returned while trying to validate your invite. You could try to pass this information on to the person who invited you.": "Er is een fout (%(errcode)s) geretourneerd tijdens het valideren van je uitnodiging. Je kan proberen deze informatie door te geven aan de persoon die je hebt uitgenodigd.",
+    "Something went wrong with your invite.": "Er is iets misgegaan met je uitnodiging.",
+    "You were banned by %(memberName)s": "Je bent verbannen door %(memberName)s",
     "Forget this space": "Vergeet deze space",
-    "You were removed by %(memberName)s": "U bent verwijderd door %(memberName)s",
+    "You were removed by %(memberName)s": "Je bent verwijderd door %(memberName)s",
     "Loading preview": "Voorbeeld laden",
     "Joining …": "Deelnemen…",
     "Currently removing messages in %(count)s rooms|one": "Momenteel berichten in %(count)s kamer aan het verwijderen",
@@ -3238,9 +3238,9 @@
     "Remove messages sent by me": "Door mij verzonden berichten verwijderen",
     "View older version of %(spaceName)s.": "Bekijk oudere versie van %(spaceName)s.",
     "Upgrade this space to the recommended room version": "Upgrade deze ruimte naar de aanbevolen kamerversie",
-    "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Foutopsporingslogboeken bevatten toepassingsgebruiksgegevens, waaronder uw inlognaam, de ID's of aliassen van de kamers die u heeft bezocht, met welke UI-elementen u voor het laatst interactie heeft gehad en de inlognamen van andere personen. Ze bevatten geen berichten.",
-    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ": "Als u een bug via GitHub heeft ingediend, kunnen foutopsporingslogboeken ons helpen het probleem op te sporen. ",
-    "Spaces are a new way to group rooms and people. What kind of Space do you want to create? You can change this later.": "Spaces zijn een nieuwe manier om kamers en mensen te groeperen. Wat voor ruimte wilt u aanmaken? U kunt dit later wijzigen.",
+    "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Foutopsporingslogboeken bevatten toepassingsgebruiksgegevens, waaronder je inlognaam, de ID's of aliassen van de kamers die je hebt bezocht, met welke UI-elementen je voor het laatst interactie hebt gehad en de inlognamen van andere personen. Ze bevatten geen berichten.",
+    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ": "Als je een bug via GitHub hebt ingediend, kunnen foutopsporingslogboeken ons helpen het probleem op te sporen. ",
+    "Spaces are a new way to group rooms and people. What kind of Space do you want to create? You can change this later.": "Spaces zijn een nieuwe manier om kamers en mensen te groeperen. Wat voor ruimte wil je aanmaken? Je kan dit later wijzigen.",
     "Match system": "Match systeem",
     "Developer tools": "Ontwikkelaarstools",
     "sends hearts": "stuurt hartjes",
@@ -3248,13 +3248,13 @@
     "Insert a trailing colon after user mentions at the start of a message": "Voeg een dubbele punt in nadat de persoon het aan het begin van een bericht heeft vermeld",
     "Show polls button": "Toon polls-knop",
     "Show current avatar and name for users in message history": "Toon huidige avatar en naam voor persoon in berichtgeschiedenis",
-    "How can I start a thread?": "Hoe kan ik een discussie starten?",
-    "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Discussies helpen om gesprekken on-topic te houden en gemakkelijk te volgen. <a>Meer informatie</a>.",
+    "How can I start a thread?": "Hoe kan ik een thread starten?",
+    "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads helpen om gesprekken on-topic te houden en gemakkelijk te volgen. <a>Meer informatie</a>.",
     "Keep discussions organised with threads.": "Houd discussies georganiseerd met discussielijnen.",
     "Failed to join": "Kan niet deelnemen",
-    "The person who invited you has already left, or their server is offline.": "De persoon die u heeft uitgenodigd is al vertrokken, of zijn server is offline.",
-    "The person who invited you has already left.": "De persoon die u heeft uitgenodigd is al vertrokken.",
-    "Sorry, your homeserver is too old to participate here.": "Sorry, uw server is te oud om hier deel te nemen.",
+    "The person who invited you has already left, or their server is offline.": "De persoon die je heeft uitgenodigd is al vertrokken, of zijn server is offline.",
+    "The person who invited you has already left.": "De persoon die je heeft uitgenodigd is al vertrokken.",
+    "Sorry, your homeserver is too old to participate here.": "Sorry, je server is te oud om hier aan deel te nemen.",
     "There was an error joining.": "Er is een fout opgetreden bij het deelnemen.",
     "%(brand)s is experimental on a mobile web browser. For a better experience and the latest features, use our free native app.": "%(brand)s is experimenteel in een mobiele webbrowser. Gebruik onze gratis native app voor een betere ervaring en de nieuwste functies.",
     "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "Deze server is niet correct geconfigureerd om kaarten weer te geven, of de geconfigureerde kaartserver is mogelijk onbereikbaar.",
@@ -3271,16 +3271,16 @@
     "Accessibility": "Toegankelijkheid",
     "Event ID: %(eventId)s": "Gebeurtenis ID: %(eventId)s",
     "<a>Give feedback</a>": "<a>Feedback geven</a>",
-    "Threads are a beta feature": "Discussies zijn een bètafunctie",
-    "Threads help keep your conversations on-topic and easy to track.": "Discussies helpen u gesprekken on-topic te houden en gemakkelijk bij te houden.",
-    "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reageer op een lopende discussie of gebruik \"%(replyInThread)s\" wanneer u de muisaanwijzer op een bericht plaatst om een nieuwe te starten.",
+    "Threads are a beta feature": "Threads zijn een bètafunctie",
+    "Threads help keep your conversations on-topic and easy to track.": "Threads helpen jou gesprekken on-topic te houden en gemakkelijk bij te houden.",
+    "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reageer op een lopende thread of gebruik \"%(replyInThread)s\" wanneer je de muisaanwijzer op een bericht plaatst om een nieuwe te starten.",
     "We'll create rooms for each of them.": "We zullen kamers voor elk van hen maken.",
-    "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.": "Als u de kamer die u zoekt niet kunt vinden, vraag dan om een uitnodiging of <a>maak een nieuwe kamer 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 je de kamer die je zoekt niet kan vinden, vraag dan om een uitnodiging of <a>maak een nieuwe kamer aan</a>.",
     "Stop sharing and close": "Stop met delen en sluit",
     "Stop sharing": "Stop delen",
-    "An error occurred while stopping your live location, please try again": "Er is een fout opgetreden bij het stoppen van uw live locatie, probeer het opnieuw",
+    "An error occurred while stopping your live location, please try again": "Er is een fout opgetreden bij het stoppen van je live locatie, probeer het opnieuw",
     "%(timeRemaining)s left": "%(timeRemaining)s over",
-    "You are sharing your live location": "U deelt uw live locatie",
+    "You are sharing your live location": "Je deelt je live locatie",
     "No verification requests found": "Geen verificatieverzoeken gevonden",
     "Open user settings": "Open persooninstellingen",
     "Switch to space by number": "Overschakelen naar space op nummer",
@@ -3302,16 +3302,16 @@
     "Confirm signing out these devices|one": "Uitloggen van dit apparaat bevestigen",
     "Confirm signing out these devices|other": "Uitloggen van deze apparaten bevestigen",
     "Yes, enable": "Ja, inschakelen",
-    "Do you want to enable threads anyway?": "Wil je toch discussies inschakelen?",
-    "Your homeserver does not currently support threads, so this feature may be unreliable. Some threaded messages may not be reliably available. <a>Learn more</a>.": "Uw server ondersteunt momenteel geen discussies, dus deze functie kan onbetrouwbaar zijn. Sommige berichten in een discussie zijn mogelijk niet betrouwbaar beschikbaar. <a>Meer informatie</a>.",
-    "Partial Support for Threads": "Gedeeltelijke ondersteuning voor Discussies",
+    "Do you want to enable threads anyway?": "Wil je toch threads inschakelen?",
+    "Your homeserver does not currently support threads, so this feature may be unreliable. Some threaded messages may not be reliably available. <a>Learn more</a>.": "Jouw server ondersteunt momenteel geen threads, dus deze functie kan onbetrouwbaar zijn. Sommige berichten in een thread zijn mogelijk niet betrouwbaar beschikbaar. <a>Meer informatie</a>.",
+    "Partial Support for Threads": "Gedeeltelijke ondersteuning voor Threads",
     "Right-click message context menu": "Rechtermuisknop op het bericht voor opties",
     "Jump to the given date in the timeline": "Spring naar de opgegeven datum in de tijdlijn",
-    "You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device.": "U bent afgemeld op al uw apparaten en zult geen pushmeldingen meer ontvangen. Meld u op elk apparaat opnieuw aan om weer meldingen te ontvangen.",
+    "You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device.": "Je bent afgemeld op al je apparaten en zal geen pushmeldingen meer ontvangen. Meld je op elk apparaat opnieuw aan om weer meldingen te ontvangen.",
     "Sign out all devices": "Apparaten uitloggen",
-    "If you want to retain access to your chat history in encrypted rooms, set up Key Backup or export your message keys from one of your other devices before proceeding.": "Als u toegang tot uw berichten wilt behouden, stel dan sleutelback-up in of exporteer uw sleutels vanaf een van uw andere apparaten voordat u verder gaat.",
-    "Signing out your devices will delete the message encryption keys stored on them, making encrypted chat history unreadable.": "Uw apparaten uitloggen zal de ertoe behorende encryptiesleutels verwijderen, wat versleutelde berichten onleesbaar zal maken.",
-    "Resetting your password on this homeserver will cause all of your devices to be signed out. This will delete the message encryption keys stored on them, making encrypted chat history unreadable.": "Uw wachtwoorden veranderen op deze homeserver zal u uit al uw andere apparaten uitloggen. Hierdoor zullen de encryptiesleutels van uw berichten verloren gaan, wat versleutelde berichten onleesbaar zal maken.",
+    "If you want to retain access to your chat history in encrypted rooms, set up Key Backup or export your message keys from one of your other devices before proceeding.": "Als je toegang tot je berichten wilt behouden, stel dan sleutelback-up in of exporteer je sleutels vanaf een van je andere apparaten voordat je verder gaat.",
+    "Signing out your devices will delete the message encryption keys stored on them, making encrypted chat history unreadable.": "Jouw apparaten uitloggen zal de ertoe behorende encryptiesleutels verwijderen, wat versleutelde berichten onleesbaar zal maken.",
+    "Resetting your password on this homeserver will cause all of your devices to be signed out. This will delete the message encryption keys stored on them, making encrypted chat history unreadable.": "Jouw wachtwoorden veranderen op deze homeserver zal je uit al je andere apparaten uitloggen. Hierdoor zullen de encryptiesleutels van je berichten verloren gaan, wat versleutelde berichten onleesbaar zal maken.",
     "<b>Tip:</b> Use “%(replyInThread)s” when hovering over a message.": "<b>Tip:</b> Gebruik “%(replyInThread)s” met de muiscursor boven een bericht.",
     "Close sidebar": "Zijbalk sluiten",
     "View List": "Toon Lijst",
@@ -3319,21 +3319,21 @@
     "No live locations": "Geen live locaties",
     "Updated %(humanizedUpdateTime)s": "%(humanizedUpdateTime)s bijgewerkt",
     "Hide my messages from new joiners": "Verberg mijn berichten voor nieuwe deelnemers",
-    "Your old messages will still be visible to people who received them, just like emails you sent in the past. Would you like to hide your sent messages from people who join rooms in the future?": "Zullen uw oude berichten nog steeds zichtbaar zijn voor de mensen die ze ontvangen hebben, net zoals e-mails die u in het verleden verstuurd hebt. Zou u uw verstuurde berichten willen verbergen voor mensen die kamers in de toekomst toetreden?",
-    "You will be removed from the identity server: your friends will no longer be able to find you with your email or phone number": "Zal u van de identiteitsserver worden verwijderd: uw vrienden zullen u niet meer kunnen vinden via uw e-mailadres of telefoonnummer",
-    "You will leave all rooms and DMs that you are in": "Zal u alle kamers en directe chats waar u zich in bevindt verlaten",
-    "No one will be able to reuse your username (MXID), including you: this username will remain unavailable": "Zal niemand uw gebruikersnaam (MXID) kunnen hergebruiken, inclusief u: deze gebruikersnaam zal onbeschikbaar blijven",
-    "You will no longer be able to log in": "Zal u niet meer kunnen inloggen",
-    "You will not be able to reactivate your account": "Zal u uw account niet kunnen heractiveren",
-    "Confirm that you would like to deactivate your account. If you proceed:": "Bevestig dat u uw account wilt deactiveren. Als u doorgaat:",
-    "To continue, please enter your account password:": "Voer uw wachtwoord in om verder te gaan:",
+    "Your old messages will still be visible to people who received them, just like emails you sent in the past. Would you like to hide your sent messages from people who join rooms in the future?": "Zullen jouw oude berichten nog steeds zichtbaar zijn voor de mensen die ze ontvangen hebben, net zoals e-mails die je in het verleden verstuurd hebt. Zou je jouw verstuurde berichten willen verbergen voor mensen die kamers in de toekomst toetreden?",
+    "You will be removed from the identity server: your friends will no longer be able to find you with your email or phone number": "Zal je van de identiteitsserver worden verwijderd: je vrienden zullen je niet meer kunnen vinden via je e-mailadres of telefoonnummer",
+    "You will leave all rooms and DMs that you are in": "Zal je alle kamers en directe chats waar jij je in bevindt verlaten",
+    "No one will be able to reuse your username (MXID), including you: this username will remain unavailable": "Zal niemand jouw gebruikersnaam (MXID) kunnen hergebruiken, inclusief jij: deze gebruikersnaam zal onbeschikbaar blijven",
+    "You will no longer be able to log in": "Zal je niet meer kunnen inloggen",
+    "You will not be able to reactivate your account": "Zal je jouw account niet kunnen heractiveren",
+    "Confirm that you would like to deactivate your account. If you proceed:": "Bevestig dat je jouw account wil deactiveren. Als je doorgaat:",
+    "To continue, please enter your account password:": "Voer je wachtwoord in om verder te gaan:",
     "Seen by %(count)s people|one": "Gezien door %(count)s persoon",
     "Seen by %(count)s people|other": "Gezien door %(count)s mensen",
-    "You will not receive push notifications on other devices until you sign back in to them.": "U zult geen pushmeldingen ontvangen op uw andere apparaten totdat u er weer op inlogt.",
+    "You will not receive push notifications on other devices until you sign back in to them.": "Je zal geen pushmeldingen ontvangen op je andere apparaten totdat je er weer op inlogt.",
     "Your password was successfully changed.": "Wachtwoord veranderen geslaagd.",
-    "Changing your password on this homeserver will cause all of your other devices to be signed out. This will delete the message encryption keys stored on them, and may make encrypted chat history unreadable.": "Uw wachtwoorden veranderen op deze homeserver zal u uit al uw andere apparaten uitloggen. Hierdoor zullen de encryptiesleutels van uw berichten verloren gaan, wat mogelijk versleutelde berichten onleesbaar kan maken.",
-    "If you want to retain access to your chat history in encrypted rooms you should first export your room keys and re-import them afterwards.": "Als u toegang tot uw versleutelde chatgeschiedenis wilt behouden kan u eerst uw encryptiesleutels exporteren en ze na afloop weer herimporteren.",
-    "You can also ask your homeserver admin to upgrade the server to change this behaviour.": "U kunt ook uw homeserveradministrator vragen de server te updateten om dit gedrag te veranderen.",
+    "Changing your password on this homeserver will cause all of your other devices to be signed out. This will delete the message encryption keys stored on them, and may make encrypted chat history unreadable.": "Jouw wachtwoorden veranderen op deze homeserver zal je uit al uw andere apparaten uitloggen. Hierdoor zullen de encryptiesleutels van je berichten verloren gaan, wat mogelijk versleutelde berichten onleesbaar kan maken.",
+    "If you want to retain access to your chat history in encrypted rooms you should first export your room keys and re-import them afterwards.": "Als je toegang tot je versleutelde chatgeschiedenis wilt behouden kan je eerst je encryptiesleutels exporteren en ze na afloop weer herimporteren.",
+    "You can also ask your homeserver admin to upgrade the server to change this behaviour.": "Je kan ook je homeserveradministrator vragen de server te updateten om dit gedrag te veranderen.",
     "Turn on camera": "Camera inschakelen",
     "Turn off camera": "Camera uitschakelen",
     "Video devices": "Video-apparaten",
@@ -3346,11 +3346,11 @@
     "Use “%(replyInThread)s” when hovering over a message.": "Houd de muiscursor boven een bericht en gebruik “%(replyInThread)s”.",
     "An error occurred while stopping your live location": "Er is een fout opgetreden bij het stoppen van je live locatie",
     "Enable live location sharing": "Live locatie delen inschakelen",
-    "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.": "Let op: dit is een labfunctie met een tijdelijke implementatie. Dit betekent dat u uw locatiegeschiedenis niet kunt verwijderen en dat geavanceerde gebruikers uw locatiegeschiedenis kunnen zien, zelfs nadat u stopt met het delen van uw live locatie met deze ruimte.",
+    "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.": "Let op: dit is een labfunctie met een tijdelijke implementatie. Dit betekent dat je jouw locatiegeschiedenis niet kunt verwijderen en dat geavanceerde gebruikers jouw locatiegeschiedenis kunnen zien, zelfs nadat je stopt met het delen van uw live locatie met deze ruimte.",
     "Live location sharing": "Live locatie delen",
     "Live Location Sharing (temporary implementation: locations persist in room history)": "Live Locatie delen (tijdelijke implementatie: locaties blijven bestaan in kamergeschiedenis)",
     "Location sharing - pin drop": "Locatie delen - pin neerzetten",
-    "Your message wasn't sent because this homeserver has been blocked by its administrator. Please <a>contact your service administrator</a> to continue using the service.": "Uw bericht is niet verzonden omdat deze server is geblokkeerd door de beheerder. Neem <a>contact op met uw servicebeheerder</a> om de service te blijven gebruiken.",
+    "Your message wasn't sent because this homeserver has been blocked by its administrator. Please <a>contact your service administrator</a> to continue using the service.": "Je bericht is niet verzonden omdat deze server is geblokkeerd door de beheerder. Neem <a>contact op met je servicebeheerder</a> om de service te blijven gebruiken.",
     "Cameras": "Camera's",
     "Output devices": "Uitvoerapparaten",
     "Input devices": "Invoer apparaten",
@@ -3359,17 +3359,17 @@
     "To join, please enable video rooms in Labs first": "Schakel eerst videokamers in Labs in om deel te nemen",
     "Open room": "Open kamer",
     "Show Labs settings": "Lab instellingen weergeven",
-    "To view %(roomName)s, you need an invite": "Om %(roomName)s te bekijken, heeft u een uitnodiging nodig",
+    "To view %(roomName)s, you need an invite": "Om %(roomName)s te bekijken, heb je een uitnodiging nodig",
     "Video room": "Video kamer",
     "%(members)s and %(last)s": "%(members)s en %(last)s",
     "%(members)s and more": "%(members)s en meer",
     "Resent!": "Opnieuw versturen!",
     "Did not receive it? <a>Resend it</a>": "Niet ontvangen? <a>Stuur het opnieuw</a>",
-    "To create your account, open the link in the email we just sent to %(emailAddress)s.": "Om uw account aan te maken, opent u de link in de e-mail die we zojuist naar %(emailAddress)s hebben gestuurd.",
+    "To create your account, open the link in the email we just sent to %(emailAddress)s.": "Om jouw account aan te maken, open je de link in de e-mail die we zojuist naar %(emailAddress)s hebben gestuurd.",
     "Unread email icon": "Ongelezen e-mailpictogram",
-    "Check your email to continue": "Controleer uw e-mail om door te gaan",
-    "An error occurred whilst sharing your live location, please try again": "Er is een fout opgetreden bij het delen van uw live locatie, probeer het opnieuw",
-    "An error occurred whilst sharing your live location": "Er is een fout opgetreden bij het delen van uw live locatie",
+    "Check your email to continue": "Controleer je e-mail om door te gaan",
+    "An error occurred whilst sharing your live location, please try again": "Er is een fout opgetreden bij het delen van je live locatie, probeer het opnieuw",
+    "An error occurred whilst sharing your live location": "Er is een fout opgetreden bij het delen van je live locatie",
     "View related event": "Bekijk gerelateerde gebeurtenis",
     "Check if you want to hide all current and future messages from this user.": "Vink aan als je alle huidige en toekomstige berichten van deze persoon wilt verbergen.",
     "Ignore user": "Negeer persoon",
@@ -3385,9 +3385,9 @@
     "Connection lost": "Verbinding verloren",
     "Minimise": "Minimaliseren",
     "Un-maximise": "Maximaliseren ongedaan maken",
-    "Deactivating your account is a permanent action — be careful!": "Het deactiveren van uw account is een permanente actie - wees voorzichtig!",
+    "Deactivating your account is a permanent action — be careful!": "Het deactiveren van je account is een permanente actie - wees voorzichtig!",
     "Joining the beta will reload %(brand)s.": "Door deel te nemen aan de bèta wordt %(brand)s opnieuw geladen.",
-    "Leaving the beta will reload %(brand)s.": "Als u de bèta verlaat, wordt %(brand)s opnieuw geladen.",
+    "Leaving the beta will reload %(brand)s.": "Als je de bèta verlaat, wordt %(brand)s opnieuw geladen.",
     "Remove search filter for %(filter)s": "Verwijder zoekfilter voor %(filter)s",
     "Start a group chat": "Start een groepsgesprek",
     "Other options": "Andere opties",
@@ -3399,7 +3399,7 @@
     "Search for": "Zoeken naar",
     "%(count)s Members|one": "%(count)s Lid",
     "%(count)s Members|other": "%(count)s Leden",
-    "When you sign out, these keys will be deleted from this device, which means you won't be able to read encrypted messages unless you have the keys for them on your other devices, or backed them up to the server.": "Wanneer u zich afmeldt, worden deze sleutels van dit apparaat verwijderd, wat betekent dat u geen versleutelde berichten kunt lezen, tenzij u de sleutels ervoor op uw andere apparaten heeft of er een back-up van heeft gemaakt op de server.",
+    "When you sign out, these keys will be deleted from this device, which means you won't be able to read encrypted messages unless you have the keys for them on your other devices, or backed them up to the server.": "Wanneer je jezelf afmeldt, worden deze sleutels van dit apparaat verwijderd, wat betekent dat je geen versleutelde berichten kunt lezen, tenzij je de sleutels ervoor op je andere apparaten hebt of er een back-up van hebt gemaakt op de server.",
     "Show: Matrix rooms": "Toon: Matrix kamers",
     "Show: %(instance)s rooms (%(server)s)": "Toon: %(instance)s kamers (%(server)s)",
     "Add new server…": "Nieuwe server toevoegen…",
@@ -3411,7 +3411,7 @@
     "Can I use text chat alongside the video call?": "Kan ik tekstberichten gebruiken naast het videogesprek?",
     "Use the “+” button in the room section of the left panel.": "Gebruik de knop \"+\" in het kamergedeelte van het linkerpaneel.",
     "How can I create a video room?": "Hoe kan ik een videokamer maken?",
-    "Video rooms are always-on VoIP channels embedded within a room in %(brand)s.": "Videoruimten zijn altijd-ann VoIP-kanalen die zijn geïntegreerd in een kamer in %(brand)s.",
+    "Video rooms are always-on VoIP channels embedded within a room in %(brand)s.": "Videoruimten zijn altijd-aan VoIP-kanalen die zijn geïntegreerd in een kamer in %(brand)s.",
     "A new way to chat over voice and video in %(brand)s.": "Een nieuwe manier om te chatten via spraak en video in %(brand)s.",
     "Video rooms": "Video kamers",
     "You cannot search for rooms that are neither a room nor a space": "U kunt niet zoeken naar kamers die geen kamer of een space zijn",
@@ -3419,15 +3419,15 @@
     "Show rooms": "Toon kamers",
     "Explore public spaces in the new search dialog": "Ontdek openbare ruimtes in het nieuwe zoekvenster",
     "Stop and close": "Stop en sluit",
-    "You can't disable this later. The room will be encrypted but the embedded call will not.": "U kunt dit later niet uitschakelen. De kamer wordt gecodeerd, maar de ingesloten oproep niet.",
+    "You can't disable this later. The room will be encrypted but the embedded call will not.": "Je kan dit later niet uitschakelen. De kamer wordt gecodeerd, maar de ingesloten oproep niet.",
     "Online community members": "Leden van online gemeenschap",
     "Coworkers and teams": "Collega's en teams",
     "Friends and family": "Vrienden en familie",
-    "We'll help you get connected.": "We helpen u om verbinding te maken.",
-    "Who will you chat to the most?": "Met wie gaat u het meest chatten?",
-    "You're in": "U bent binnen",
-    "You need to have the right permissions in order to share locations in this room.": "U dient de juiste rechten te hebben om locaties in deze ruimte te delen.",
-    "You don't have permission to share locations": "U bent niet gemachtigd om locaties te delen",
+    "We'll help you get connected.": "We helpen je om verbinding te maken.",
+    "Who will you chat to the most?": "Met wie ga je het meest chatten?",
+    "You're in": "Je bent binnen",
+    "You need to have the right permissions in order to share locations in this room.": "Je dient de juiste rechten te hebben om locaties in deze ruimte te delen.",
+    "You don't have permission to share locations": "Je bent niet gemachtigd om locaties te delen",
     "Join the room to participate": "Doe mee met de kamer om deel te nemen",
     "Reset bearing to north": "Indicatie naar het noorden resetten",
     "Mapbox logo": "Mapbox logo",
@@ -3444,7 +3444,7 @@
     "Developer command: Discards the current outbound group session and sets up new Olm sessions": "Opdracht voor ontwikkelaars: verwijdert de huidige uitgaande groepssessie en stelt nieuwe Olm-sessies in",
     "Messages in this chat will be end-to-end encrypted.": "Berichten in deze chat worden eind-tot-eind versleuteld.",
     "Saved Items": "Opgeslagen items",
-    "Send your first message to invite <displayName/> to chat": "Stuur uw eerste bericht om <displayName/> uit te nodigen om te chatten",
+    "Send your first message to invite <displayName/> to chat": "Stuur je eerste bericht om <displayName/> uit te nodigen om te chatten",
     "Favourite Messages (under active development)": "Favoriete berichten (in actieve ontwikkeling)",
     "We're creating a room with %(names)s": "We maken een kamer aan met %(names)s",
     "Google Play and the Google Play logo are trademarks of Google LLC.": "Google Play en het Google Play-logo zijn handelsmerken van Google LLC.",
@@ -3460,16 +3460,16 @@
     "Help": "Help",
     "Spell check": "Spellingscontrole",
     "Complete these to get the most out of %(brand)s": "Voltooi deze om het meeste uit %(brand)s te halen",
-    "You did it!": "Het is u gelukt!",
+    "You did it!": "Het is je gelukt!",
     "Only %(count)s steps to go|one": "Nog maar %(count)s stap te gaan",
     "Only %(count)s steps to go|other": "Nog maar %(count)s stappen te gaan",
     "Welcome to %(brand)s": "Welkom bij %(brand)s",
-    "Find your people": "Vind uw mensen",
+    "Find your people": "Vind je mensen",
     "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.": "Houd het eigendom en de controle over de discussie in de gemeenschap.\nSchaal om miljoenen te ondersteunen, met krachtige beheersbaarheid en interoperabiliteit.",
     "Community ownership": "Gemeenschapseigendom",
-    "Find your co-workers": "Vind uw collega's",
+    "Find your co-workers": "Vind je collega's",
     "Secure messaging for work": "Veilig berichten versturen voor werk",
-    "Start your first chat": "Start uw eerste chat",
+    "Start your first chat": "Start je eerste chat",
     "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.": "Met gratis eind-tot-eind versleutelde berichten en onbeperkte spraak- en video-oproepen, is %(brand)s een geweldige manier om in contact te blijven.",
     "Secure messaging for friends and family": "Veilig berichten versturen voor vrienden en familie",
     "We’d appreciate any feedback on how you’re finding Element.": "We stellen het op prijs als u feedback geeft over hoe u Element vindt.",
@@ -3477,24 +3477,24 @@
     "Enable notifications": "Meldingen inschakelen",
     "Don’t miss a reply or important message": "Mis geen antwoord of belangrijk bericht",
     "Turn on notifications": "Meldingen aanzetten",
-    "Your profile": "Uw profiel",
-    "Make sure people know it’s really you": "Zorg ervoor dat mensen weten dat u het echt bent",
-    "Set up your profile": "Stel uw profiel in",
+    "Your profile": "Jouw profiel",
+    "Make sure people know it’s really you": "Zorg ervoor dat mensen weten dat je het echt bent",
+    "Set up your profile": "Stel je profiel in",
     "Download apps": "Apps downloaden",
     "Don’t miss a thing by taking Element with you": "Mis niets door Element mee te nemen",
     "Download Element": "Element downloaden",
-    "Find and invite your community members": "Vind en nodig uw communityleden uit",
+    "Find and invite your community members": "Vind en nodig je communityleden uit",
     "Find people": "Zoek mensen",
-    "Get stuff done by finding your teammates": "Krijg dingen gedaan door uw teamgenoten te vinden",
-    "Find and invite your co-workers": "Vind en nodig uw collega's uit",
+    "Get stuff done by finding your teammates": "Krijg dingen gedaan door je teamgenoten te vinden",
+    "Find and invite your co-workers": "Vind en nodig je collega's uit",
     "Find friends": "Zoek vrienden",
-    "It’s what you’re here for, so lets get to it": "Daar bent u voor, dus laten we beginnen",
-    "Find and invite your friends": "Zoek uw vrienden en nodig ze uit",
-    "You made it!": "Het is u gelukt!",
+    "It’s what you’re here for, so lets get to it": "Daar ben je voor, dus laten we beginnen",
+    "Find and invite your friends": "Zoek je vrienden en nodig ze uit",
+    "You made it!": "Het is je gelukt!",
     "Interactively verify by emoji": "Interactief verifiëren door emoji",
     "Manually verify by text": "Handmatig verifiëren via tekst",
     "View all": "Bekijk alles",
-    "Improve your account security by following these recommendations": "Verbeter uw accountbeveiliging door deze aanbevelingen op te volgen",
+    "Improve your account security by following these recommendations": "Verbeter je accountbeveiliging door deze aanbevelingen op te volgen",
     "Security recommendations": "Beveiligingsaanbevelingen",
     "Filter devices": "Filter apparaten",
     "Inactive for %(inactiveAgeDays)s days or longer": "Inactief gedurende %(inactiveAgeDays)s dagen of langer",
@@ -3506,13 +3506,13 @@
     "No inactive sessions found.": "Geen inactieve sessies gevonden.",
     "No unverified sessions found.": "Geen niet-geverifieerde sessies gevonden.",
     "No verified sessions found.": "Geen geverifieerde sessies gevonden.",
-    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Overweeg om u af te melden bij oude sessies (%(inactiveAgeDays)s dagen of ouder) die u niet meer gebruikt",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Overweeg om je af te melden bij oude sessies (%(inactiveAgeDays)s dagen of ouder) die je niet meer gebruikt",
     "Inactive sessions": "Inactieve sessies",
-    "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verifieer uw sessies voor verbeterde beveiligde berichtenuitwisseling of meld u af bij sessies die u niet meer herkent of gebruikt.",
+    "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verifieer je sessies voor verbeterde beveiligde berichtenuitwisseling of meld je af bij sessies die je niet meer herkent of gebruikt.",
     "Unverified sessions": "Niet geverifieerde sessies",
-    "For best security, sign out from any session that you don't recognize or use anymore.": "Meld u voor de beste beveiliging af bij elke sessie die u niet meer herkent of gebruikt.",
+    "For best security, sign out from any session that you don't recognize or use anymore.": "Meld je voor de beste beveiliging af bij elke sessie die je niet meer herkent of gebruikt.",
     "Verified sessions": "Geverifieerde sessies",
-    "Verify or sign out from this session for best security and reliability.": "Verifieer of meld u af bij deze sessie voor de beste beveiliging en betrouwbaarheid.",
+    "Verify or sign out from this session for best security and reliability.": "Verifieer of meld je af bij deze sessie voor de beste beveiliging en betrouwbaarheid.",
     "Unverified session": "Niet-geverifieerde sessie",
     "This session is ready for secure messaging.": "Deze sessie is klaar voor beveiligde berichtenuitwisseling.",
     "Verified session": "Geverifieerde sessie",
@@ -3525,15 +3525,15 @@
     "Device": "Apparaat",
     "Last activity": "Laatste activiteit",
     "Current session": "Huidige sessie",
-    "<b>It's not recommended to add encryption to public rooms.</b> Anyone can find and join public rooms, so anyone can read messages in them. You'll get none of the benefits of encryption, and you won't be able to turn it off later. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Het wordt niet aanbevolen om versleuteling toe te voegen aan openbare ruimten.</b> Iedereen kan openbare ruimten vinden en er lid van worden, dus iedereen kan berichten erin lezen. U profiteert niet van de voordelen van versleuteling en kunt deze later niet uitschakelen. Het versleutelen van berichten in een openbare ruimte zal het ontvangen en verzenden van berichten langzamer maken.",
-    "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "Voor de beste beveiliging verifieert u uw sessies en meldt u zich af bij elke sessie die u niet meer herkent of gebruikt.",
+    "<b>It's not recommended to add encryption to public rooms.</b> Anyone can find and join public rooms, so anyone can read messages in them. You'll get none of the benefits of encryption, and you won't be able to turn it off later. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>Het wordt niet aanbevolen om versleuteling toe te voegen aan openbare ruimten.</b> Iedereen kan openbare ruimten vinden en er lid van worden, dus iedereen kan berichten erin lezen. Je profiteert niet van de voordelen van versleuteling en kunt deze later niet uitschakelen. Het versleutelen van berichten in een openbare ruimte zal het ontvangen en verzenden van berichten langzamer maken.",
+    "For best security, verify your sessions and sign out from any session that you don't recognize or use anymore.": "Voor de beste beveiliging verifieer je jouw sessies en meldt je jezelf af bij elke sessie die je niet meer herkent of gebruikt.",
     "Other sessions": "Andere sessies",
     "Sessions": "Sessies",
-    "Your server doesn't support disabling sending read receipts.": "Uw server biedt geen ondersteuning voor het uitschakelen van het verzenden van leesbevestigingen.",
-    "Share your activity and status with others.": "Deel uw activiteit en status met anderen.",
+    "Your server doesn't support disabling sending read receipts.": "Jouw server biedt geen ondersteuning voor het uitschakelen van het verzenden van leesbevestigingen.",
+    "Share your activity and status with others.": "Deel je activiteit en status met anderen.",
     "Presence": "Aanwezigheid",
-    "We’d appreciate any feedback on how you’re finding %(brand)s.": "We stellen het op prijs als u feedback geeft over hoe u %(brand)s vindt.",
-    "How are you finding %(brand)s so far?": "Hoe vind u tot nu toe %(brand)s?",
+    "We’d appreciate any feedback on how you’re finding %(brand)s.": "We stellen het op prijs als je feedback geeft over hoe je %(brand)s vindt.",
+    "How are you finding %(brand)s so far?": "Hoe vind je tot nu toe %(brand)s?",
     "Welcome": "Welkom",
     "Don’t miss a thing by taking %(brand)s with you": "Mis niets door %(brand)s mee te nemen",
     "Show shortcut to welcome checklist above the room list": "Toon snelkoppeling naar welkomstchecklist boven de kamer gids",
@@ -3551,16 +3551,129 @@
     "%(securityKey)s or %(recoveryFile)s": "%(securityKey)s of %(recoveryFile)s",
     "Proxy URL": "Proxy URL",
     "Proxy URL (optional)": "Proxy-URL (optioneel)",
-    "To disable you will need to log out and back in, use with caution!": "Om uit te schakelen moet u uitloggen en weer inloggen, wees voorzichtig!",
+    "To disable you will need to log out and back in, use with caution!": "Om uit te schakelen moet je uitloggen en weer inloggen, wees voorzichtig!",
     "Sliding Sync configuration": "Scrollende Synchronisatie-configuratie",
-    "Your server lacks native support, you must specify a proxy": "Uw server heeft geen native ondersteuning, u moet een proxy opgeven",
-    "Your server lacks native support": "Uw server heeft geen native ondersteuning",
-    "Your server has native support": "Uw server heeft native ondersteuning",
+    "Your server lacks native support, you must specify a proxy": "Jouw server heeft geen native ondersteuning, je moet een proxy opgeven",
+    "Your server lacks native support": "Jouw server heeft geen native ondersteuning",
+    "Your server has native support": "Jouw server heeft native ondersteuning",
     "Checking...": "Controleren...",
     "%(qrCode)s or %(appLinks)s": "%(qrCode)s of %(appLinks)s",
     "%(qrCode)s or %(emojiCompare)s": "%(qrCode)s of %(emojiCompare)s",
     "Show": "Toon",
     "Unknown device type": "Onbekend apparaattype",
     "Video input %(n)s": "Video input %(n)s",
-    "Audio input %(n)s": "Audio input %(n)s"
+    "Audio input %(n)s": "Audio input %(n)s",
+    "Completing set up of your new device": "De configuratie van je nieuwe apparaat voltooien",
+    "Waiting for device to sign in": "Wachten op apparaat om in te loggen",
+    "Connecting...": "Verbinden...",
+    "Review and approve the sign in": "Controleer en keur de aanmelding goed",
+    "Select 'Scan QR code'": "Selecteer 'QR-code scannen'",
+    "Start at the sign in screen": "Begin bij het inlogscherm",
+    "Scan the QR code below with your device that's signed out.": "Scan de onderstaande QR-code met je apparaat dat is uitgelogd.",
+    "By approving access for this device, it will have full access to your account.": "Door de toegang voor dit apparaat goed te keuren, heeft het volledige toegang tot jouw account.",
+    "Check that the code below matches with your other device:": "Controleer of de onderstaande code overeenkomt met je andere apparaat:",
+    "Devices connected": "Verbonden apparaten",
+    "The homeserver doesn't support signing in another device.": "De server ondersteunt het inloggen op een ander apparaat niet.",
+    "An unexpected error occurred.": "Er is een onverwachte fout opgetreden.",
+    "The request was cancelled.": "Het verzoek is geannuleerd.",
+    "The other device isn't signed in.": "Het andere apparaat is niet ingelogd.",
+    "The other device is already signed in.": "Het andere apparaat is al aangemeld.",
+    "The request was declined on the other device.": "Het verzoek is afgewezen op het andere apparaat.",
+    "Linking with this device is not supported.": "Koppelen met dit apparaat wordt niet ondersteund.",
+    "The scanned code is invalid.": "De gescande code is ongeldig.",
+    "The linking wasn't completed in the required time.": "De koppeling is niet binnen de vereiste tijd voltooid.",
+    "Sign in new device": "Aanmelden nieuw apparaat",
+    "Video call ended": "Video oproep beëindigd",
+    "%(name)s started a video call": "%(name)s is een videogesprek gestart",
+    "Room info": "Kamer informatie",
+    "Underline": "Onderstrepen",
+    "Italic": "Cursief",
+    "View chat timeline": "Gesprekstijdslijn bekijken",
+    "Close call": "Sluit oproep",
+    "Layout type": "Type lay-out",
+    "Spotlight": "Schijnwerper",
+    "Freedom": "Vrijheid",
+    "You do not have permission to start voice calls": "U heeft geen toestemming om spraakoproepen te starten",
+    "There's no one here to call": "Er is hier niemand om te bellen",
+    "You do not have permission to start video calls": "U heeft geen toestemming om videogesprekken te starten",
+    "Ongoing call": "Lopende oproep",
+    "Video call (%(brand)s)": "Videogesprek (%(brand)s)",
+    "Video call (Jitsi)": "Videogesprek (Jitsi)",
+    "Show formatting": "Opmaak tonen",
+    "Show plain text": "Toon platte tekst",
+    "Failed to set pusher state": "Kan de pusher status niet instellen",
+    "Show QR code": "QR-code tonen",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "U kunt dit apparaat gebruiken om in te loggen op een nieuw apparaat met een QR-code. U moet de QR-code die op dit apparaat wordt weergegeven, scannen met uw apparaat dat is uitgelogd.",
+    "Sign in with QR code": "Log in met QR-code",
+    "%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessies geselecteerd",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Overweeg om u af te melden bij oude sessies (%(inactiveAgeDays)s dagen of ouder) die u niet meer gebruikt.",
+    "Unknown session type": "Onbekende sessietype",
+    "Web session": "Web sessie",
+    "Mobile session": "Mobiele sessie",
+    "Desktop session": "Desktop sessie",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Het verwijderen van inactieve sessies verbetert de beveiliging en prestaties en maakt het voor u gemakkelijker om te identificeren of een nieuwe sessie verdacht is.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactieve sessies zijn sessies die u al een tijdje niet hebt gebruikt, maar ze blijven vesleutelingssleutels ontvangen.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "U moet er vooral zeker van zijn dat u deze sessies herkent, omdat ze een ongeoorloofd gebruik van uw account kunnen vertegenwoordigen.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Niet geverifieerde sessies zijn sessies die zijn aangemeld met uw inloggegevens, maar niet zijn geverifieerd.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Dit betekent dat ze vesleutelingssleutel bevatten voor uw eerdere berichten en bevestigen aan andere gebruikers waarmee u communiceert dat deze sessies echt van u zijn.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Geverifieerde sessies zijn ingelogd met uw inloggegevens en vervolgens geverifieerd, hetzij met uw veilige wachtwoordzin of door kruisverificatie.",
+    "Sign out of this session": "Afmelden voor deze sessie",
+    "Receive push notifications on this session.": "Ontvang pushmeldingen voor deze sessie.",
+    "Push notifications": "Pushmeldingen",
+    "Toggle push notifications on this session.": "Schakel pushmeldingen in voor deze sessie.",
+    "Browser": "Browser",
+    "Operating system": "Besturingssysteem",
+    "Model": "Model",
+    "URL": "URL",
+    "Version": "Versie",
+    "Application": "Toepassing",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Dit geeft ze het vertrouwen dat ze echt met u praten, maar het betekent ook dat ze de sessienaam kunnen zien die u hier invoert.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Andere gebruikers in privéchats en chatruimten waaraan u deelneemt, kunnen een volledige lijst van uw sessies bekijken.",
+    "Renaming sessions": "Sessies hernoemen",
+    "Please be aware that session names are also visible to people you communicate with.": "Houd er rekening mee dat sessienamen ook zichtbaar zijn voor mensen met wie u communiceert.",
+    "Rename session": "Sessie hernoemen",
+    "Sign out all other sessions": "Afmelden voor alle andere sessies",
+    "Call type": "Oproeptype",
+    "You do not have sufficient permissions to change this.": "U heeft niet voldoende rechten om dit te wijzigen.",
+    "%(brand)s is end-to-end encrypted, but is currently limited to smaller numbers of users.": "%(brand)s is eind-tot-eind versleuteld, maar is momenteel beperkt tot kleinere aantallen gebruikers.",
+    "Enable %(brand)s as an additional calling option in this room": "Schakel %(brand)s in als extra bel optie in deze kamer",
+    "Join %(brand)s calls": "Deelnemen aan %(brand)s gesprekken",
+    "Start %(brand)s calls": "%(brand)s oproepen starten",
+    "Voice broadcasts": "Spraakuitzendingen",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Weet u zeker dat u zich wilt afmelden bij %(count)s sessies?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Weet u zeker dat u zich wilt afmelden bij %(count)s sessies?",
+    "Enable notifications for this device": "Meldingen inschakelen voor dit apparaat",
+    "Turn off to disable notifications on all your devices and sessions": "Schakel dit uit om meldingen op al je apparaten en sessies uit te schakelen",
+    "Enable notifications for this account": "Meldingen inschakelen voor dit account",
+    "Fill screen": "Scherm vullen",
+    "You have already joined this call from another device": "U heeft al deelgenomen aan dit gesprek vanaf een ander apparaat",
+    "Sorry — this call is currently full": "Sorry — dit gesprek is momenteel vol",
+    "Record the client name, version, and url to recognise sessions more easily in session manager": "Noteer de naam, versie en url van de applicatie om sessies gemakkelijker te herkennen in sessiebeheer",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Toestaan dat een QR-code wordt weergegeven in sessiebeheer om in te loggen op een ander apparaat (compatibele server vereist)",
+    "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.": "Onze nieuwe sessiemanager biedt een betere zichtbaarheid van al uw sessies en meer controle erover, inclusief de mogelijkheid om op afstand pushmeldingen in te schakelen.",
+    "Have greater visibility and control over all your sessions.": "Meer zichtbaarheid en controle over al uw sessies.",
+    "New session manager": "Nieuwe sessiemanager",
+    "Use new session manager": "Nieuwe sessiemanager gebruiken",
+    "Voice broadcast (under active development)": "Spraak uitzending (in actieve ontwikkeling)",
+    "New group call experience": "Nieuwe ervaring voor groepsgesprekken",
+    "Element Call video rooms": "Element Call videokamers",
+    "Try out the rich text editor (plain text mode coming soon)": "Probeer de rich-text-editor (platte tekst-modus komt binnenkort)",
+    "Notifications silenced": "Meldingen stilgezet",
+    "Video call started": "Videogesprek gestart",
+    "Unknown room": "Onbekende kamer",
+    "Voice broadcast": "Spraakuitzending",
+    "Live": "Live",
+    "pause voice broadcast": "spraakuitzending pauzeren",
+    "resume voice broadcast": "hervat spraakuitzending",
+    "play voice broadcast": "spraakuitzending afspelen",
+    "Yes, stop broadcast": "Ja, stop uitzending",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Weet u zeker dat u de live uitzending wilt stoppen? Hiermee wordt de uitzending beëindigd en is de volledige opname beschikbaar in de kamer.",
+    "Stop live broadcasting?": "Live uitzending stoppen?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Iemand anders neemt al een spraakuitzending op. Wacht tot de spraakuitzending is afgelopen om een nieuwe te starten.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "U heeft niet de vereiste rechten om een spraakuitzending in deze kamer te starten. Neem contact op met een kamer beheerder om uw machtiging aan te passen.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "U neemt al een spraakuitzending op. Beëindig uw huidige spraakuitzending om een nieuwe te starten.",
+    "Can't start a new voice broadcast": "Kan geen nieuwe spraakuitzending starten",
+    "Video call started in %(roomName)s. (not supported by this browser)": "Videogesprek gestart in %(roomName)s. (niet ondersteund door deze browser)",
+    "Video call started in %(roomName)s.": "Videogesprek gestart in %(roomName)s.",
+    "You need to be able to kick users to do that.": "U moet in staat zijn om gebruikers te verwijderen om dit te doen."
 }
diff --git a/src/i18n/strings/pt_BR.json b/src/i18n/strings/pt_BR.json
index 6b1bc3c576c..5a376037d73 100644
--- a/src/i18n/strings/pt_BR.json
+++ b/src/i18n/strings/pt_BR.json
@@ -2909,5 +2909,18 @@
     "Exported %(count)s events in %(seconds)s seconds|other": "%(count)s eventos exportados em %(seconds)s segundos",
     "Creating output...": "Criando resultado...",
     "Fetching events...": "Buscando eventos...",
-    "Starting export process...": "Iniciando processo de exportação..."
+    "Starting export process...": "Iniciando processo de exportação...",
+    "Yes, stop broadcast": "Sim, interromper a transmissão",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Tem certeza de que deseja interromper sua transmissão ao vivo? Isso encerrará a transmissão e a gravação completa estará disponível na sala.",
+    "Stop live broadcasting?": "Parar a transmissão ao vivo?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Outra pessoa já está gravando uma transmissão de voz. Aguarde o término da transmissão de voz para iniciar uma nova.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Você não tem as permissões necessárias para iniciar uma transmissão de voz nesta sala. Entre em contato com um administrador de sala para atualizar suas permissões.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Você já está gravando uma transmissão de voz. Encerre sua transmissão de voz atual para iniciar uma nova.",
+    "Can't start a new voice broadcast": "Não é possível iniciar uma nova transmissão de voz",
+    "Remove, ban, or invite people to your active room, and make you leave": "Remover, banir ou convidar pessoas para sua sala ativa e fazer você sair",
+    "Remove, ban, or invite people to this room, and make you leave": "Remover, banir ou convidar pessoas para esta sala e fazer você sair",
+    "No virtual room for this room": "Nenhuma sala virtual para esta sala",
+    "Switches to this room's virtual room, if it has one": "Muda para a sala virtual desta sala, se houver uma",
+    "Developer command: Discards the current outbound group session and sets up new Olm sessions": "Comando do desenvolvedor: descarta a sessão de grupo de saída atual e configura novas sessões do Olm",
+    "Jump to the given date in the timeline": "Ir para a data especificada na linha do tempo"
 }
diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json
index 6c7d506816b..eca85bd9ef9 100644
--- a/src/i18n/strings/ru.json
+++ b/src/i18n/strings/ru.json
@@ -1614,7 +1614,7 @@
     "Verification Request": "Запрос на подтверждение",
     "Wrong file type": "Неправильный тип файла",
     "Looks good!": "Выглядит неплохо!",
-    "Security Phrase": "Секретная фраза",
+    "Security Phrase": "Мнемоническая фраза",
     "Security Key": "Бумажный ключ",
     "Use your Security Key to continue.": "Чтобы продолжить, используйте свой бумажный ключ.",
     "Restoring keys from backup": "Восстановление ключей из резервной копии",
@@ -2212,7 +2212,7 @@
     "Enter Security Key": "Введите ключ безопасности",
     "If you've forgotten your Security Phrase you can <button1>use your Security Key</button1> or <button2>set up new recovery options</button2>": "Если вы забыли секретную фразу, вы можете <button1>использовать ключ безопасности</button1> или <button2>настроить новые параметры восстановления</button2>",
     "Access your secure message history and set up secure messaging by entering your Security Phrase.": "Получите доступ к своей истории защищенных сообщений и настройте безопасный обмен сообщениями, введя секретную фразу.",
-    "Enter Security Phrase": "Введите секретную фразу",
+    "Enter Security Phrase": "Введите мнемоническую фразу",
     "Backup could not be decrypted with this Security Phrase: please verify that you entered the correct Security Phrase.": "Не удалось расшифровать резервную копию с помощью этой секретной фразы: убедитесь, что вы ввели правильную секретную фразу.",
     "Incorrect Security Phrase": "Неверная секретная фраза",
     "Backup could not be decrypted with this Security Key: please verify that you entered the correct Security Key.": "Не удалось расшифровать резервную копию с помощью этого ключа безопасности: убедитесь, что вы ввели правильный ключ безопасности.",
@@ -3571,11 +3571,11 @@
     "Model": "Модель",
     "Live": "В эфире",
     "Video call (%(brand)s)": "Видеозвонок (%(brand)s)",
-    "Voice broadcast (under active development)": "Аудиовещание (в активной разработке)",
+    "Voice broadcast (under active development)": "Голосовые трансляции (в активной разработке)",
     "Use new session manager": "Использовать новый менеджер сессий",
     "Sign out all other sessions": "Выйти из всех других сессий",
     "Voice broadcasts": "Аудиопередачи",
-    "Voice broadcast": "Аудиопередача",
+    "Voice broadcast": "Голосовое вещание",
     "Have greater visibility and control over all your sessions.": "Получите наилучшую видимость и контроль над всеми вашими сеансами.",
     "New group call experience": "Новый опыт группового вызова",
     "Sliding Sync mode (under active development, cannot be disabled)": "Скользящий режим синхронизации (в активной разработке, не может быть отключен)",
diff --git a/src/i18n/strings/sk.json b/src/i18n/strings/sk.json
index dd4555caf64..0e20b7ff41c 100644
--- a/src/i18n/strings/sk.json
+++ b/src/i18n/strings/sk.json
@@ -3664,5 +3664,21 @@
     "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Niekto iný už nahráva hlasové vysielanie. Počkajte, kým sa skončí jeho hlasové vysielanie, a potom spustite nové.",
     "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Nemáte požadované oprávnenia na spustenie hlasového vysielania v tejto miestnosti. Obráťte sa na správcu miestnosti, aby vám rozšíril oprávnenia.",
     "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Už nahrávate hlasové vysielanie. Ukončite aktuálne hlasové vysielanie a spustite nové.",
-    "Can't start a new voice broadcast": "Nemôžete spustiť nové hlasové vysielanie"
+    "Can't start a new voice broadcast": "Nemôžete spustiť nové hlasové vysielanie",
+    "play voice broadcast": "spustiť hlasové vysielanie",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Ste si istí, že sa chcete odhlásiť z %(count)s relácie?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Ste si istí, že sa chcete odhlásiť z %(count)s relácií?",
+    "Show formatting": "Zobraziť formátovanie",
+    "Show plain text": "Zobraziť obyčajný text",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Zvážte odhlásenie zo starých relácií (%(inactiveAgeDays)s dní alebo starších), ktoré už nepoužívate.",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Odstránenie neaktívnych relácií zvyšuje bezpečnosť a výkon a uľahčuje identifikáciu podozrivých nových relácií.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Neaktívne relácie sú relácie, ktoré ste určitý čas nepoužívali, ale naďalej dostávajú šifrovacie kľúče.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Mali by ste si byť obzvlášť istí, že tieto relácie rozpoznávate, pretože by mohli predstavovať neoprávnené používanie vášho účtu.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Neoverené relácie sú relácie, ktoré sa prihlásili pomocou vašich poverení, ale neboli krížovo overené.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "To znamená, že uchovávajú šifrovacie kľúče pre vaše predchádzajúce správy a potvrdzujú ostatným používateľom, s ktorými komunikujete, že tieto relácie ste skutočne vy.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Overené relácie, ktoré sú prihlásené pomocou vašich poverovacích údajov a následne overené buď pomocou vašej zabezpečenej prístupovej frázy, alebo krížovým overením.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "To im poskytuje istotu, že skutočne komunikujú s vami, ale zároveň to znamená, že vidia názov relácie, ktorý tu zadáte.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Ostatní používatelia v priamych správach a miestnostiach, ku ktorým sa pripojíte, môžu vidieť úplný zoznam vašich relácií.",
+    "Renaming sessions": "Premenovanie relácií",
+    "Please be aware that session names are also visible to people you communicate with.": "Uvedomte si, že názvy relácií sú viditeľné aj pre ľudí, s ktorými komunikujete."
 }
diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json
index af6eb8f3e41..1118288b3e0 100644
--- a/src/i18n/strings/sv.json
+++ b/src/i18n/strings/sv.json
@@ -3445,5 +3445,47 @@
     "Exit fullscreen": "Gå ur fullskärm",
     "Enter fullscreen": "Gå till fullskärm",
     "Map feedback": "Kartuåterkoppling",
-    "Toggle attribution": "Växla tillskrivning"
+    "Toggle attribution": "Växla tillskrivning",
+    "Can't start a new voice broadcast": "Kan inte starta en ny röstsändning",
+    "Video call started in %(roomName)s. (not supported by this browser)": "Videosamtal startade i %(roomName)s. (stöds inte av den här webbläsaren)",
+    "Video call started in %(roomName)s.": "Videosamtal startade i %(roomName)s.",
+    "You need to be able to kick users to do that.": "Du behöver kunna kicka användare för att göra det.",
+    "Empty room (was %(oldName)s)": "Tomt rum (var %(oldName)s)",
+    "Inviting %(user)s and %(count)s others|one": "Bjuder in %(user)s och 1 till",
+    "Inviting %(user)s and %(count)s others|other": "Bjuder in %(user)s och %(count)s till",
+    "Inviting %(user1)s and %(user2)s": "Bjuder in %(user1)s och %(user2)s",
+    "%(user)s and %(count)s others|one": "%(user)s och 1 till",
+    "%(user)s and %(count)s others|other": "%(user)s och %(count)s till",
+    "%(user1)s and %(user2)s": "%(user1)s och %(user2)s",
+    "Stop live broadcasting?": "Avsluta livesändning?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Någon annan spelar redan in en röstsändning. Vänta på att deras röstsändning tar slut för att starta en ny.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Du är inte behörig att starta en röstsändning i det här rummet. Kontakta en rumsadministratör för att uppgradera dina behörigheter.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Du spelar redan in en röstsändning. Avsluta din nuvarande röstsändning för att påbörja en ny.",
+    "Element Call video rooms": "Element Call videorum",
+    "Sliding Sync mode (under active development, cannot be disabled)": "Glidande synk-läge (under aktiv utveckling, kan inte avaktiveras)",
+    "Send read receipts": "Skicka läskvitton",
+    "Try out the rich text editor (plain text mode coming soon)": "Pröva den nya riktextredigeraren (vanligt textläge kommer snart)",
+    "Notifications silenced": "Aviseringar tystade",
+    "Video call started": "Videosamtal startat",
+    "Unknown room": "Okänt rum",
+    "Voice broadcast": "Röstsändning",
+    "Live": "Live",
+    "pause voice broadcast": "pausa röstsändning",
+    "resume voice broadcast": "återuppta röstsändning",
+    "play voice broadcast": "spela röstsändning",
+    "Yes, stop broadcast": "Ja, avsluta sändning",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Är du säker på att du vill avsluta din livesändning? Det här kommer att avsluta sändningen och den fulla inspelningen kommer att vara tillgänglig i rummet.",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Låt en QR-kod visas i sessionshanteraren för att logga in en annan enhet (kräver en kompatibel hemserver)",
+    "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.": "Vår nya sessionshanterare ger dig bättre insyn i alla dina sessioner, och större kontroll över dem, inklusive förmågan att växla pushnotiser på håll.",
+    "Have greater visibility and control over all your sessions.": "Ha bättre insyn och kontroll över alla dina sessioner.",
+    "New session manager": "Ny sessionshanterare",
+    "Use new session manager": "Använd ny sessionshanterare",
+    "Voice broadcast (under active development)": "Röstsändning (under aktiv utveckling)",
+    "New group call experience": "Ny gruppsamtalsupplevelse",
+    "Record the client name, version, and url to recognise sessions more easily in session manager": "Spara klientens namn, version och URL för att lättare känna igen sessioner i sessionshanteraren",
+    "Find and invite your friends": "Hitta och bjud in dina vänner",
+    "You made it!": "Du klarade det!",
+    "You have already joined this call from another device": "Du har redan gått med i det här samtalet från en annan enhet",
+    "Sorry — this call is currently full": "Tyvärr - det här samtalet är för närvarande fullt",
+    "Show shortcut to welcome checklist above the room list": "Visa genväg till välkomstchecklistan ovanför rumslistan"
 }
diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json
index 0d2adc0ad8f..465fa071cb9 100644
--- a/src/i18n/strings/uk.json
+++ b/src/i18n/strings/uk.json
@@ -3567,10 +3567,10 @@
     "Sign out of this session": "Вийти з цього сеансу",
     "Please be aware that session names are also visible to people you communicate with": "Зауважте, що назви сеансів також видно людям, з якими ви спілкуєтесь",
     "Rename session": "Перейменувати сеанс",
-    "Voice broadcast": "Голосове мовлення",
-    "Voice broadcast (under active development)": "Голосове мовлення (в активній розробці)",
+    "Voice broadcast": "Голосові повідомлення",
+    "Voice broadcast (under active development)": "Голосові повідомлення (в активній розробці)",
     "Element Call video rooms": "Відео кімнати Element Call",
-    "Voice broadcasts": "Голосове мовлення",
+    "Voice broadcasts": "Голосові повідомлення",
     "You do not have permission to start voice calls": "У вас немає дозволу розпочинати голосові виклики",
     "There's no one here to call": "Тут немає кого викликати",
     "You do not have permission to start video calls": "У вас немає дозволу розпочинати відеовиклики",
@@ -3628,21 +3628,21 @@
     "Underline": "Підкреслений",
     "Italic": "Курсив",
     "Try out the rich text editor (plain text mode coming soon)": "Спробуйте розширений текстовий редактор (незабаром з'явиться режим звичайного тексту)",
-    "resume voice broadcast": "поновити голосове мовлення",
-    "pause voice broadcast": "призупинити голосове мовлення",
+    "resume voice broadcast": "поновити голосове повідомлення",
+    "pause voice broadcast": "призупинити голосове повідомлення",
     "You have already joined this call from another device": "Ви вже приєдналися до цього виклику з іншого пристрою",
     "stop voice broadcast": "припинити голосове мовлення",
     "Notifications silenced": "Сповіщення стишено",
     "Sign in with QR code": "Увійти за допомогою QR-коду",
     "Browser": "Браузер",
     "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "Дозволити показ QR-коду в менеджері сеансів для входу на іншому пристрої (потрібен сумісний домашній сервер)",
-    "Yes, stop broadcast": "Так, припинити мовлення",
-    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Ви впевнені, що хочете припинити голосове мовлення? На цьому трансляція завершиться, і повний запис буде доступний у кімнаті.",
-    "Stop live broadcasting?": "Припинити голосове мовлення?",
-    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Хтось інший вже записує голосову трансляцію. Зачекайте, поки вона завершиться, щоб почати нову.",
-    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Ви не маєте необхідних дозволів для початку голосового мовлення в цій кімнаті. Зверніться до адміністратора кімнати, щоб оновити ваші дозволи.",
-    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Ви вже записуєте голосову трансляцію. Завершіть поточну трансляцію, щоб розпочати нову.",
-    "Can't start a new voice broadcast": "Не вдалося розпочати нову голосове мовлення",
+    "Yes, stop broadcast": "Так, припинити трансляцію",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Ви впевнені, що хочете припинити трансляцію голосового повідомлення? На цьому трансляція завершиться, і повний запис буде доступний у кімнаті.",
+    "Stop live broadcasting?": "Припинити трансляцію голосового повідомлення?",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "Хтось інший вже записує голосове повідомлення. Зачекайте, поки запис завершиться, щоб розпочати новий.",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "Ви не маєте необхідних дозволів для початку передавання голосового повідомлення в цю кімнату. Зверніться до адміністратора кімнати, щоб оновити ваші дозволи.",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "Ви вже записуєте голосове повідомлення. Завершіть поточний запис, щоб розпочати новий.",
+    "Can't start a new voice broadcast": "Не вдалося розпочати передавання нового голосового повідомлення",
     "Completing set up of your new device": "Завершення налаштування нового пристрою",
     "Waiting for device to sign in": "Очікування входу з пристрою",
     "Connecting...": "З'єднання...",
@@ -3664,5 +3664,21 @@
     "The linking wasn't completed in the required time.": "У встановлені терміни з'єднання не було виконано.",
     "Sign in new device": "Увійти на новому пристрої",
     "Show QR code": "Показати QR-код",
-    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Ви можете використовувати цей пристрій для входу на новому пристрої за допомогою QR-коду. Вам потрібно буде сканувати QR-код, показаний на цьому пристрої, своїм пристроєм, на якому ви вийшли."
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "Ви можете використовувати цей пристрій для входу на новому пристрої за допомогою QR-коду. Вам потрібно буде сканувати QR-код, показаний на цьому пристрої, своїм пристроєм, на якому ви вийшли.",
+    "play voice broadcast": "відтворити голосове повідомлення",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "Ви впевнені, що хочете вийти з %(count)s сеансів?",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "Ви впевнені, що хочете вийти з %(count)s сеансів?",
+    "Show formatting": "Показати форматування",
+    "Show plain text": "Показати звичайний текст",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Вилучення неактивних сеансів посилює безпеку і швидкодію, а також полегшує виявлення підозрілих нових сеансів.",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Неактивні сеанси — це сеанси, які ви не використовували протягом певного часу, але вони продовжують отримувати ключі шифрування.",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Обміркуйте можливість виходу зі старих сеансів (%(inactiveAgeDays)s днів або більше), якими ви більше не користуєтесь.",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "Ви повинні бути впевнені, що розпізнаєте ці сеанси, оскільки вони можуть бути несанкціонованим використанням вашого облікового запису.",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Не звірені сеанси — це сеанси, які увійшли в систему з вашими обліковими даними, але не пройшли перехресну перевірку.",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "Це означає, що вони зберігають ключі шифрування ваших попередніх повідомлень і підтверджують іншим користувачам, з якими ви спілкуєтеся, що ці сеанси дійсно належать вам.",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Звірені сеанси увійшли в систему з вашими обліковими даними, а потім були перевірені або за допомогою вашої безпечної парольної фрази, або за допомогою перехресної перевірки.",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "Завдяки цьому у них з'являється впевненість, що вони дійсно розмовляють з вами, а також вони можуть бачити назву сеансу, яку ви вводите тут.",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "Інші користувачі в особистих повідомленнях і кімнатах, до яких ви приєдналися, можуть переглянути список усіх ваших сеансів.",
+    "Renaming sessions": "Перейменування сеансів",
+    "Please be aware that session names are also visible to people you communicate with.": "Зауважте, що назви сеансів також бачать люди, з якими ви спілкуєтесь."
 }
diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json
index ab5301eb3d8..d13dfc6c0d5 100644
--- a/src/i18n/strings/zh_Hans.json
+++ b/src/i18n/strings/zh_Hans.json
@@ -235,7 +235,7 @@
     "Do you want to set an email address?": "你想要设置一个邮箱地址吗？",
     "Upload new:": "上传新的：",
     "Verification Pending": "验证等待中",
-    "You cannot place a call with yourself.": "你无法向自己发起通话。",
+    "You cannot place a call with yourself.": "你不能打给自己。",
     "You have <a>disabled</a> URL previews by default.": "你已经默认<a>禁用</a>URL预览。",
     "You have <a>enabled</a> URL previews by default.": "你已经默认<a>启用</a>URL预览。",
     "This server does not support authentication with a phone number.": "此服务器不支持使用电话号码认证。",
@@ -326,9 +326,9 @@
     "Warning": "警告",
     "Room Notification": "房间通知",
     "%(weekDayName)s %(time)s": "%(weekDayName)s %(time)s",
-    "%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(monthName)s %(day)s %(time)s, %(weekDayName)s",
-    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(fullYear)s %(monthName)s %(day)s, %(weekDayName)s",
-    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(fullYear)s %(monthName)s %(day)s %(time)s, %(weekDayName)s",
+    "%(weekDayName)s, %(monthName)s %(day)s %(time)s": "%(monthName)s %(day)s %(time)s，%(weekDayName)s",
+    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(fullYear)s %(monthName)s %(day)s，%(weekDayName)s",
+    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s": "%(fullYear)s %(monthName)s %(day)s %(time)s，%(weekDayName)s",
     "Enable inline URL previews by default": "默认启用行内URL预览",
     "Send an encrypted reply…": "发送加密回复…",
     "Send an encrypted message…": "发送加密消息……",
@@ -491,7 +491,7 @@
     "Share room": "分享房间",
     "System Alerts": "系统警告",
     "Muted Users": "被禁言的用户",
-    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "在加密的房间中，比如此房间，URL预览默认禁用，以确保主服务器（生成预览的地方）无法收集与你在此房间中看到的链接有关的信息。",
+    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "在加密的房间中，比如此房间，URL预览默认是禁用的，以确保你的主服务器（生成预览的地方）无法收集与你在此房间中看到的链接有关的信息。",
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "当有人在他们的消息里放置URL时，可显示URL预览以给出更多有关链接的信息，如其网站的标题、描述以及图片。",
     "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "你确定要移除（删除）此事件吗？注意，如果删除房间名称或话题的更改，更改会被撤销。",
     "Clear Storage and Sign Out": "清除存储并登出",
@@ -569,7 +569,7 @@
     "Capitalization doesn't help very much": "大写字母并没有很大的作用",
     "All-uppercase is almost as easy to guess as all-lowercase": "全大写的密码通常比全小写的更容易猜测",
     "Reversed words aren't much harder to guess": "把单词倒过来不会比原来的难猜很多",
-    "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》超过了此主服务器的上传大小限制",
     "Upgrades a room to a new version": "将房间升级到新版本",
     "Gets or sets the room topic": "获取或设置房间话题",
     "This room has no topic.": "此房间没有话题。",
@@ -852,22 +852,22 @@
     "The homeserver may be unavailable or overloaded.": "主服务器似乎不可用或过载。",
     "You have %(count)s unread notifications in a prior version of this room.|other": "你在此房间的先前版本中有 %(count)s 条未读通知。",
     "You have %(count)s unread notifications in a prior version of this room.|one": "你在此房间的先前版本中有 %(count)s 条未读通知。",
-    "Add Email Address": "添加 Email 地址",
+    "Add Email Address": "添加邮箱",
     "Add Phone Number": "添加电话号码",
-    "Call failed due to misconfigured server": "因为服务器配置错误通话失败",
-    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "请联系你主服务器（<code>%(homeserverDomain)s</code>）的管理员设置 TURN 服务器来确保通话运作稳定。",
-    "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>公共服务器，但通话质量稍差，并且其将会得知你的 IP。你可以在设置中更改此选项。",
+    "Call failed due to misconfigured server": "服务器配置错误导致通话失败",
+    "Please ask the administrator of your homeserver (<code>%(homeserverDomain)s</code>) to configure a TURN server in order for calls to work reliably.": "请联系你的主服务器（<code>%(homeserverDomain)s</code>）的管理员配置 TURN 服务器，以确保通话过程稳定。",
+    "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> 公共服务器，但通话质量稍差，并且其将会得知你的 IP。你可以在设置中更改此选项。",
     "Try using turn.matrix.org": "尝试使用 turn.matrix.org",
     "Your %(brand)s is misconfigured": "你的 %(brand)s 配置有错误",
     "Use Single Sign On to continue": "使用单点登录继续",
-    "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.": "通过使用单点登录来证明你的身份，并确认添加此邮箱地址。",
     "Single Sign On": "单点登录",
-    "Confirm adding email": "确认使用邮件",
-    "Click the button below to confirm adding this email address.": "点击下面的按钮以确认添加此邮箱地址。",
+    "Confirm adding email": "确认添加邮箱",
+    "Click the button below to confirm adding this email address.": "点击下面的按钮，以确认添加此邮箱地址。",
     "Confirm adding this phone number by using Single Sign On to prove your identity.": "通过单点登录以证明你的身份，并确认添加此电话号码。",
     "Confirm adding phone number": "确认添加电话号码",
-    "Click the button below to confirm adding this phone number.": "点击下面的按钮以确认添加此电话号码。",
-    "The file '%(fileName)s' failed to upload.": "上传文件 ‘%(fileName)s’ 失败。",
+    "Click the button below to confirm adding this phone number.": "点击下面的按钮，以确认添加此电话号码。",
+    "The file '%(fileName)s' failed to upload.": "文件《%(fileName)s》上传失败。",
     "The server does not support the room version specified.": "服务器不支持指定的房间版本。",
     "Cancel entering passphrase?": "取消输入口令词组？",
     "Setting up keys": "设置密钥",
@@ -875,8 +875,8 @@
     "Encryption upgrade available": "提供加密升级",
     "New login. Was this you?": "现在登录。请问是你本人吗？",
     "Identity server has no terms of service": "身份服务器无服务条款",
-    "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/> 以验证邮箱地址或电话号码，但是此服务器无任何服务条款。",
-    "Only continue if you trust the owner of the server.": "只有你信任服务器所有者才能继续。",
+    "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 /> 以验证邮箱或电话号码，但此服务器无任何服务条款。",
+    "Only continue if you trust the owner of the server.": "只有在你信任服务器所有者后才能继续。",
     "Trust": "信任",
     "%(name)s is requesting verification": "%(name)s 正在请求验证",
     "Sign In or Create Account": "登录或创建账户",
@@ -1075,12 +1075,12 @@
     "Disconnect identity server": "断开身份服务器连接",
     "Disconnect from the identity server <idserver />?": "从身份服务器 <idserver /> 断开连接吗？",
     "Disconnect": "断开连接",
-    "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "断开连接前，你应当从身份服务器<idserver /><b>删除你的个人数据</b>。不幸的是，身份服务器<idserver />当前处于离线状态或无法访问。",
+    "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "断开连接前，你应从身份服务器<idserver />上<b>删除你的个人数据</b>。不幸的是，身份服务器<idserver />当前处于离线状态或无法访问。",
     "You should:": "你应该：",
     "contact the administrators of identity server <idserver />": "联系身份服务器 <idserver /> 的管理员",
     "wait and try again later": "等待并稍后重试",
     "Disconnect anyway": "仍然断开连接",
-    "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "你仍然在身份服务器<idserver />上<b>共享您的个人数据</b>。",
+    "You are still <b>sharing your personal data</b> on the identity server <idserver />.": "你仍然在身份服务器 <idserver /> 上<b>共享你的个人数据</b>。",
     "We recommend that you remove your email addresses and phone numbers from the identity server before disconnecting.": "我们推荐你在断开连接前从身份服务器上删除你的邮箱地址和电话号码。",
     "not stored": "未存储",
     "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "你正在使用<server></server>来发现你认识的现存联系人，同时也让他们可以发现你。你可以在下方更改你的身份服务器。",
@@ -1706,7 +1706,7 @@
     "Toggle right panel": "切换右侧面板",
     "End": "End",
     "The server is not configured to indicate what the problem is (CORS).": "服务器没有配置为提示错误是什么（CORS）。",
-    "Activate selected button": "激活选择的按钮",
+    "Activate selected button": "激活选中的按钮",
     "Prepends ( ͡° ͜ʖ ͡°) to a plain-text message": "在纯文本消息开头添加 ( ͡° ͜ʖ ͡°)",
     "Unknown App": "未知应用",
     "Cross-signing is ready for use.": "交叉签名已可用。",
@@ -1726,11 +1726,11 @@
     "%(count)s results|one": "%(count)s 个结果",
     "Room Info": "房间信息",
     "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": "麦克风和摄像头已插入并正确设置",
-    "Unable to access webcam / microphone": "无法访问摄像头/麦克风",
+    "Permission is granted to use the webcam": "授权使用摄像头",
+    "A microphone and webcam are plugged in and set up correctly": "已插入并正确设置麦克风和摄像头",
+    "Unable to access webcam / microphone": "无法使用摄像头/麦克风",
     "Unable to access microphone": "无法使用麦克风",
-    "The call was answered on another device.": "在另一台设备上应答了此通话。",
+    "The call was answered on another device.": "已在另一台设备上接听了此通话。",
     "The call could not be established": "无法建立通话",
     "🎉 All servers are banned from participating! This room can no longer be used.": "🎉 所有服务器都已禁止参与！此房间不再可用。",
     "%(senderDisplayName)s changed the server ACLs for this room.": "%(senderDisplayName)s 为此房间更改了服务器 ACL。",
@@ -1797,10 +1797,10 @@
     "Try again": "重试",
     "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.": "我们已要求浏览器记住你使用的主服务器，但不幸的是你的浏览器已忘记。请前往登录页面重试。",
     "We couldn't log you in": "我们无法使你登入",
-    "You've reached the maximum number of simultaneous calls.": "你已达到并行呼叫最大数量。",
-    "Too Many Calls": "太多呼叫",
-    "Call failed because webcam or microphone could not be accessed. Check that:": "通话失败，因为无法访问网络摄像头或麦克风。请检查：",
-    "Call failed because microphone could not be accessed. Check that a microphone is plugged in and set up correctly.": "呼叫失败，因为无法访问任何麦克风。 检查是否已插入麦克风并正确设置。",
+    "You've reached the maximum number of simultaneous calls.": "你已达到同时通话的最大数量。",
+    "Too Many Calls": "太多通话",
+    "Call failed because webcam or microphone could not be accessed. Check that:": "通话失败，因为无法使用摄像头或麦克风。请检查：",
+    "Call failed because microphone could not be accessed. Check that a microphone is plugged in and set up correctly.": "呼叫失败，因为无法使用任何麦克风。 检查是否已插入并正确设置麦克风。",
     "Answered Elsewhere": "已在别处接听",
     "Start a new chat": "开始新会话",
     "Room settings": "房间设置",
@@ -1816,7 +1816,7 @@
     "Public": "公共",
     "Delete": "删除",
     "Dial pad": "拨号盘",
-    "There was an error looking up the phone number": "查询电话号码的过程中发生错误",
+    "There was an error looking up the phone number": "查询电话号码时发生错误",
     "Unable to look up phone number": "无法查询电话号码",
     "Return to call": "返回通话",
     "%(peerName)s held the call": "%(peerName)s 挂起了通话",
@@ -1856,8 +1856,8 @@
     "Converts the DM to a room": "将此私聊会话转化为房间会话",
     "Prepends ┬──┬ ノ( ゜-゜ノ) to a plain-text message": "在纯文本消息开头添加 ┬──┬ ノ( ゜-゜ノ)",
     "Prepends (╯°□°）╯︵ ┻━┻ to a plain-text message": "在纯文本消息开头添加 (╯°□°）╯︵ ┻━┻",
-    "You're already in a call with this person.": "你正在与其通话中。",
-    "Already in call": "已在通话中",
+    "You're already in a call with this person.": "你正在与其通话。",
+    "Already in call": "正在通话中",
     "Go to Home View": "转到主视图",
     "Search (must be enabled)": "搜索（必须启用）",
     "Your Security Key": "你的安全密钥",
@@ -2448,8 +2448,8 @@
     "Currently joining %(count)s rooms|other": "目前正在加入 %(count)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.": "尝试不同的单词或检查拼写错误。某些结果可能不可见，因为它们属于私有的，你需要一个邀请才能加入。",
     "No results for \"%(query)s\"": "「%(query)s」没有结果",
-    "The user you called is busy.": "你所拨打的用户正在忙碌中。",
-    "User Busy": "用户正在忙",
+    "The user you called is busy.": "你所呼叫的用户正忙。",
+    "User Busy": "用户正忙",
     "Or send invite link": "或发送邀请链接",
     "Some suggestions may be hidden for privacy.": "出于隐私考虑，部分建议可能会被隐藏。",
     "Search for rooms or people": "搜索房间或用户",
@@ -2538,7 +2538,7 @@
     "We sent the others, but the below people couldn't be invited to <RoomName/>": "我们已向其他人发送邀请，但无法邀请以下人员至<RoomName/>",
     "Integration manager": "集成管理器",
     "Your %(brand)s doesn't allow you to use an integration manager to do this. Please contact an admin.": "你的 %(brand)s 不允许你使用集成管理器来完成此操作，请联系管理员。",
-    "Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.": "使用此挂件可能会和 %(widgetDomain)s 及您的集成管理器共享数据 <helpIcon />。",
+    "Using this widget may share data <helpIcon /> with %(widgetDomain)s & your integration manager.": "使用此挂件可能会与 %(widgetDomain)s 及您的集成管理器共享数据 <helpIcon />。",
     "Identity server is": "身份服务器地址",
     "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "集成管理器接收配置数据，并可以以你的名义修改挂件、发送房间邀请及设置权力级别。",
     "Use an integration manager to manage bots, widgets, and sticker packs.": "使用集成管理器管理机器人、挂件和贴纸包。",
@@ -2569,7 +2569,7 @@
     "Message bubbles": "消息气泡",
     "Show all rooms": "显示所有房间",
     "Give feedback.": "给出反馈。",
-    "Thank you for trying Spaces. Your feedback will help inform the next versions.": "感谢您试用空间。你的反馈将有助于下一个版本。",
+    "Thank you for trying Spaces. Your feedback will help inform the next versions.": "感谢你试用《空间》。你的反馈将有助于改进下个版本。",
     "Spaces feedback": "空间反馈",
     "Spaces are a new feature.": "空间是一个新特性。",
     "Delete avatar": "删除头像",
@@ -2676,7 +2676,7 @@
     "Enable encryption in settings.": "在设置中启用加密。",
     "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.": "你的私人消息通常是加密的，但此房间不是。这通常是因为使用了不受支持的设备或方法，例如电子邮件邀请。",
     "To avoid these issues, create a <a>new public room</a> for the conversation you plan to have.": "为避免这些问题，请为计划中的对话创建一个<a>新的加密房间</a>。",
-    "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>不建议公开加密房间。</b>这意味着任何人都可以找到并加入房间，因此任何人都可以阅读消息。你您将无法享受加密带来的任何好处。 在公共房间加密消息会导致接收和发送消息的速度变慢。",
+    "<b>It's not recommended to make encrypted rooms public.</b> It will mean anyone can find and join the room, so anyone can read messages. You'll get none of the benefits of encryption. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>不建议公开加密房间。</b>这意味着任何人都可以找到并加入房间，因此任何人都可以阅读消息。你将不会得到任何加密带来的好处。在公共房间加密消息还会拖慢收发消息的速度。",
     "Are you sure you want to make this encrypted room public?": "你确定要公开此加密房间吗？",
     "To avoid these issues, create a <a>new encrypted room</a> for the conversation you plan to have.": "为避免这些问题，请为计划中的对话创建一个<a>新的加密房间</a>。",
     "<b>It's not recommended to add encryption to public rooms.</b>Anyone can find and join public rooms, so anyone can read messages in them. You'll get none of the benefits of encryption, and you won't be able to turn it off later. Encrypting messages in a public room will make receiving and sending messages slower.": "<b>不建议为公开房间开启加密。</b>任何人都可以找到并加入公开房间，因此任何人都可以阅读其中的消息。 你将无法从中体验加密的任何好处，且以后也无法将其关闭。 在公开房间中加密消息会导致接收和发送消息的速度变慢。",
@@ -2686,7 +2686,7 @@
     "Thread": "消息列",
     "Threaded messaging": "按主题排列的消息",
     "The above, but in <Room /> as well": "以上，但也包括 <Room />",
-    "The above, but in any room you are joined or invited to as well": "以上，但也包括您加入或被邀请加入的任何房间中",
+    "The above, but in any room you are joined or invited to as well": "以上，但也包括你加入或被邀请的任何房间中",
     "Autoplay videos": "自动播放视频",
     "Autoplay GIFs": "自动播放 GIF",
     "%(senderName)s unpinned a message from this room. See all pinned messages.": "%(senderName)s从此房间中取消固定了一条消息。查看所有固定消息。",
@@ -2749,7 +2749,7 @@
     "Plain Text": "纯文本",
     "JSON": "JSON",
     "HTML": "HTML",
-    "Are you sure you want to exit during this export?": "您确定要在导出未完成时退出吗？",
+    "Are you sure you want to exit during this export?": "你确定要在导出过程中退出吗？",
     "%(senderDisplayName)s sent a sticker.": "%(senderDisplayName)s 发送了一张贴纸。",
     "%(senderDisplayName)s changed the room avatar.": "%(senderDisplayName)s 更改了房间头像。",
     "%(date)s at %(time)s": "%(date)s 的 %(time)s",
@@ -2801,7 +2801,7 @@
     "Light high contrast": "浅色高对比",
     "Joining": "加入中",
     "Automatically send debug logs on any error": "遇到任何错误自动发送调试日志",
-    "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "在下方管理您已登录的设备。 与您交流的人可以看到设备的名称。",
+    "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "在下方管理你已登录的设备。与你交流的人可以看到设备的名称。",
     "Rename": "重命名",
     "Sign Out": "登出",
     "Last seen %(date)s at %(ip)s": "上次见到日期 %(date)s, IP %(ip)s",
@@ -2819,10 +2819,10 @@
     "Click the button below to confirm signing out these devices.|one": "单击下面的按钮以确认登出此设备。",
     "Click the button below to confirm signing out these devices.|other": "单击下面的按钮以确认登出这些设备。",
     "Confirm signing out these devices": "确认退出这些设备",
-    "Confirm logging out these devices by using Single Sign On to prove your identity.|one": "通过使用单点登录来证明您的身份，确认注销此设备。",
-    "Confirm logging out these devices by using Single Sign On to prove your identity.|other": "通过使用单点登录来证明您的身份，确认注销这些设备。",
+    "Confirm logging out these devices by using Single Sign On to prove your identity.|one": "确认注销此设备需要使用单点登录来证明您的身份。",
+    "Confirm logging out these devices by using Single Sign On to prove your identity.|other": "确认注销这些设备需要使用单点登录来证明你的身份。",
     "Unable to load device list": "无法加载设备列表",
-    "Your homeserver does not support device management.": "您的主服务器不支持设备管理。",
+    "Your homeserver does not support device management.": "你的主服务器不支持设备管理。",
     "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "将您的安全密钥存放在安全的地方，例如密码管理器或保险箱，因为它用于保护您的加密数据。",
     "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.": "输入只有您知道的安全短语，因为它用于保护您的数据。 为了安全起见，您不应重复使用您的账户密码。",
     "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "我们将为您生成一个安全密钥，将其存储在安全的地方，例如密码管理器或保险箱。",
@@ -2835,13 +2835,13 @@
     "If you can't see who you're looking for, send them your invite link below.": "如果您看不到您要找的人，请将您的邀请链接发送给他们。",
     "You can't disable this later. Bridges & most bots won't work yet.": "之后你无法停用。桥接和大多数机器人也不能工作。",
     "In encrypted rooms, verify all users to ensure it's secure.": "在加密房间中，验证所有用户以确保其安全。",
-    "Yours, or the other users' session": "您的或其他用户的会话",
-    "Yours, or the other users' internet connection": "您或其他用户的互联网连接",
-    "The homeserver the user you're verifying is connected to": "您正在验证的用户所连接的主服务器",
+    "Yours, or the other users' session": "你或其他用户的会话",
+    "Yours, or the other users' internet connection": "你或其他用户的互联网连接",
+    "The homeserver the user you're verifying is connected to": "你正在验证的用户所连接的主服务器",
     "Can't see what you're looking for?": "看不到您要找的东西？",
     "This room isn't bridging messages to any platforms. <a>Learn more.</a>": "这个房间不会将消息桥接到任何平台。<a>了解更多</a>",
     "Where you're signed in": "登录地点",
-    "This room is in some spaces you're not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "这个房间位于您不是管理员的某些空间中。 在这些空间中，旧房间仍将显示，但系统会提示人们加入新房间。",
+    "This room is in some spaces you're not an admin of. In those spaces, the old room will still be shown, but people will be prompted to join the new one.": "这个房间位于你不是管理员的某些空间中。 在这些空间中，旧房间仍将显示，但系统会提示人们加入新房间。",
     "Use a more compact 'Modern' layout": "使用更紧凑的“现代”布局",
     "Add option": "添加选项",
     "Write an option": "写个选项",
@@ -2895,7 +2895,7 @@
     "%(count)s votes|other": "%(count)s 票",
     "Sorry, the poll you tried to create was not posted.": "抱歉，您尝试创建的投票未被发布。",
     "Failed to post poll": "发布投票失败",
-    "Sorry, your vote was not registered. Please try again.": "抱歉，您的投票未登记。 请再试一次。",
+    "Sorry, your vote was not registered. Please try again.": "抱歉，你的投票未登记。请重试。",
     "Vote not registered": "投票未登记",
     "Developer": "开发者",
     "Experimental": "实验性",
@@ -2913,7 +2913,7 @@
     "%(spaceName)s menu": "%(spaceName)s菜单",
     "Join public room": "加入公共房间",
     "Add people": "加人",
-    "You do not have permissions to invite people to this space": "您无权邀请他人加入此空间",
+    "You do not have permissions to invite people to this space": "你无权邀请他人加入此空间",
     "Invite to space": "邀请到空间",
     "Start new chat": "开始新的聊天",
     "Recently viewed": "最近查看",
@@ -2929,16 +2929,16 @@
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "共享匿名数据以帮助我们发现问题。 与个人无关。 没有第三方。",
     "Okay": "好",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties. <LearnMoreLink>Learn More</LearnMoreLink>": "共享匿名数据帮助我们发现问题。无个人数据。 没有第三方。<LearnMoreLink>了解更多</LearnMoreLink>",
-    "You previously consented to share anonymous usage data with us. We're updating how that works.": "您之前同意与我们共享匿名使用数据。 我们正在更新它的工作原理。",
+    "You previously consented to share anonymous usage data with us. We're updating how that works.": "你之前同意与我们分享匿名使用数据。我们正在更新其工作方式。",
     "Help improve %(analyticsOwner)s": "帮助改进 %(analyticsOwner)s",
     "That's fine": "没问题",
-    "You cannot place calls without a connection to the server.": "您不能在没有连接到服务器的情况下拨打电话。",
-    "Connectivity to the server has been lost": "与服务器的连接已丢失",
-    "You cannot place calls in this browser.": "您无法在此浏览器中拨打电话。",
+    "You cannot place calls without a connection to the server.": "你不能在未连接到服务器时进行呼叫。",
+    "Connectivity to the server has been lost": "已丢失与服务器的连接",
+    "You cannot place calls in this browser.": "你无法在此浏览器中进行呼叫。",
     "Calls are unsupported": "不支持通话",
     "Share location": "共享位置",
     "Manage pinned events": "管理置顶事件",
-    "Toggle space panel": "切换空间仪表板",
+    "Toggle space panel": "切换空间仪表盘",
     "Are you sure you want to end this poll? This will show the final results of the poll and stop people from being able to vote.": "您确定要结束此投票吗？ 这将显示投票的最终结果并阻止人们投票。",
     "End Poll": "结束投票",
     "Sorry, the poll did not end. Please try again.": "抱歉，投票没有结束。 请再试一次。",
@@ -3204,8 +3204,8 @@
     "Redo edit": "重做编辑",
     "Force complete": "强制完成",
     "Undo edit": "撤销编辑",
-    "Jump to last message": "跳至最后一条消息",
-    "Jump to first message": "跳至第一条消息",
+    "Jump to last message": "跳转至最后一条消息",
+    "Jump to first message": "跳转至第一条消息",
     "Toggle hidden event visibility": "切换隐藏事件可见性",
     "Unable to check if username has been taken. Try again later.": "无法检查用户名是否已被使用。稍后再试。",
     "Previous autocomplete suggestion": "上个自动完成建议",
@@ -3465,8 +3465,8 @@
     "Did not receive it? <a>Resend it</a>": "没收到吗？<a>重新发送</a>",
     "To create your account, open the link in the email we just sent to %(emailAddress)s.": "要创建账户，请打开我们刚刚发送到%(emailAddress)s的电子邮件里的链接。",
     "Toggle Link": "切换链接",
-    "Previous recently visited room or space": "上一个最近访问过的房间或空间",
-    "Next recently visited room or space": "下一个最近访问过的房间或空间",
+    "Previous recently visited room or space": "上个最近访问过的房间或空间",
+    "Next recently visited room or space": "下个最近访问过的房间或空间",
     "Open user settings": "打开用户设置",
     "Verified sessions": "已验证的会话",
     "For best security, sign out from any session that you don't recognize or use anymore.": "为了最佳安全性，请从任何不认识或不再使用的会话登出。",
@@ -3537,5 +3537,26 @@
     "Ongoing call": "正在进行的通话",
     "You do not have permission to start video calls": "你没有权限开始视频通话",
     "There's no one here to call": "这里没有人可以打电话",
-    "You do not have permission to start voice calls": "你没有权限开始语音通话"
+    "You do not have permission to start voice calls": "你没有权限开始语音通话",
+    "Can't start a new voice broadcast": "无法开始新的语音广播",
+    "Video call started in %(roomName)s. (not supported by this browser)": "%(roomName)s里的视频通话开始了。（此浏览器不支持）",
+    "Video call started in %(roomName)s.": "%(roomName)s里的视频通话开始了。",
+    "You need to be able to kick users to do that.": "你需要能够移除用户才能做到那件事。",
+    "Inviting %(user)s and %(count)s others|one": "正在邀请%(user)s和另外1个人",
+    "Inviting %(user)s and %(count)s others|other": "正在邀请%(user)s和其他%(count)s人",
+    "Turn off to disable notifications on all your devices and sessions": "关闭以在你全部设备和会话上停用通知",
+    "Enable notifications for this account": "为此账户启用通知",
+    "Enable notifications for this device": "为此设备启用通知",
+    "Record the client name, version, and url to recognise sessions more easily in session manager": "记录客户端名称、版本和url以便在会话管理器里更易识别",
+    "Room info": "房间信息",
+    "Switch to space by number": "按数字切换到空间",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "你没有必要的权限在这个房间开始语音广播。请联系房间管理员以提升你的权限。",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "你已经在录制一个语音广播。请结束你当前的语音广播以开始新的语音广播。",
+    "pause voice broadcast": "暂停语音广播",
+    "resume voice broadcast": "恢复语音广播",
+    "play voice broadcast": "播放语音广播",
+    "Yes, stop broadcast": "是的，停止广播",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "你确定要停止你的直播吗？这将结束直播，房间里将有完整的录音。",
+    "Stop live broadcasting?": "停止直播吗？",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "别人已经在录制语音广播了。等到他们的语音广播结束后再开始新的广播。"
 }
diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json
index 68647b9485f..2604c39ab25 100644
--- a/src/i18n/strings/zh_Hant.json
+++ b/src/i18n/strings/zh_Hant.json
@@ -3632,5 +3632,53 @@
     "stop voice broadcast": "停止語音廣播",
     "resume voice broadcast": "恢復語音廣播",
     "pause voice broadcast": "暫停語音廣播",
-    "Notifications silenced": "通知已靜音"
+    "Notifications silenced": "通知已靜音",
+    "Completing set up of your new device": "完成您新裝置的設定",
+    "Waiting for device to sign in": "正在等待裝置登入",
+    "Connecting...": "正在連線……",
+    "Review and approve the sign in": "審閱並批准登入",
+    "Select 'Scan QR code'": "選取「掃描 QR code」",
+    "Start at the sign in screen": "從登入畫面開始",
+    "Scan the QR code below with your device that's signed out.": "使用已登出的裝置掃描下方的 QR code。",
+    "By approving access for this device, it will have full access to your account.": "透過批准此裝置的存取權限，其將對您的帳號有完全的存取權限。",
+    "Check that the code below matches with your other device:": "檢查以下代碼是否與您其他的裝置相符：",
+    "Devices connected": "裝置已連結",
+    "The homeserver doesn't support signing in another device.": "家伺服器不支援在其他裝置上登入。",
+    "An unexpected error occurred.": "發生預料之外的錯誤。",
+    "The request was cancelled.": "請求已取消。",
+    "The other device isn't signed in.": "其他裝置未登入。",
+    "The other device is already signed in.": "其他裝置已登入。",
+    "The request was declined on the other device.": "該請求在其他裝置上被拒絕。",
+    "Linking with this device is not supported.": "不支援與此裝置連結。",
+    "The scanned code is invalid.": "掃描的代碼無效。",
+    "The linking wasn't completed in the required time.": "連結未在要求的時間內完成。",
+    "Sign in new device": "登入新裝置",
+    "Show QR code": "顯示 QR code",
+    "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "您可以使用此裝置透過 QR code 登入新裝置。您將需要使用已登出的裝置掃描此裝置上顯示的 QR code。",
+    "Sign in with QR code": "使用 QR code 登入",
+    "Browser": "瀏覽器",
+    "Allow a QR code to be shown in session manager to sign in another device (requires compatible homeserver)": "允許在工作階段管理程式中顯示 QR code 以在另一台裝置上登入（需要相容的家伺服器）",
+    "Yes, stop broadcast": "是的，停止廣播",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "您確定您要停止您的即時廣播嗎？這將會結束廣播，聊天室內將會提供完整的錄製內容。",
+    "Stop live broadcasting?": "停止即時廣播？",
+    "Someone else is already recording a voice broadcast. Wait for their voice broadcast to end to start a new one.": "其他人已在錄製語音廣播。等待他們的語音廣播結束以開始新的語音廣播。",
+    "You don't have the required permissions to start a voice broadcast in this room. Contact a room administrator to upgrade your permissions.": "您沒有在此聊天室內開始語音廣播所需的權限。請聯絡聊天室管理員升級您的權限。",
+    "You are already recording a voice broadcast. Please end your current voice broadcast to start a new one.": "您已經開始錄製語音廣播。請結束您目前的語音廣播以開始新的語音廣播。",
+    "Can't start a new voice broadcast": "無法啟動新的語音廣播",
+    "play voice broadcast": "播放語音廣播",
+    "Show formatting": "顯示格式",
+    "Show plain text": "顯示純文字",
+    "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "考慮登出您不再使用的舊工作階段 (%(inactiveAgeDays)s天或更舊）。",
+    "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "刪除不活躍的工作階段可以改善安全性與效能，並讓您可以輕鬆識別新的工作階段是否可疑。",
+    "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "不活躍工作階段是您一段時間未使用的工作階段，但它們會繼續接收加密金鑰。",
+    "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "您應特別確定您可以識別這些工作階段，因為它們可能代表未經授權使用您的帳號。",
+    "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "未經驗證的工作階段是使用您的憑證登入但尚未經過交叉驗證的工作階段。",
+    "This means they hold encryption keys for your previous messages, and confirm to other users you are communicating with that these sessions are really you.": "這代表了他們持有您之前訊息的加密金鑰，並向您正在與之通訊的其他使用者確認這些工作階段確實是您。",
+    "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "已驗證的工作階段已使用您的憑證登入，然後使用您的安全密碼或透過交叉驗證進行驗證。",
+    "This provides them with confidence that they are really speaking to you, but it also means they can see the session name you enter here.": "這讓他們確定他們真的在與您交談，但這也代表了他們可以看到您在此處輸入的工作階段名稱。",
+    "Other users in direct messages and rooms that you join are able to view a full list of your sessions.": "您加入的直接訊息與聊天室中的其他使用者可以檢視您的工作階段的完整清單。",
+    "Renaming sessions": "重新命名工作階段",
+    "Please be aware that session names are also visible to people you communicate with.": "請注意，與您交談的人也可以看到工作階段名稱。",
+    "Are you sure you want to sign out of %(count)s sessions?|one": "您確定您想要登出 %(count)s 個工作階段嗎？",
+    "Are you sure you want to sign out of %(count)s sessions?|other": "您確定您想要登出 %(count)s 個工作階段嗎？"
 }

From 8b41167490aa047bf296832bfa0db541f792fd5c Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 1 Nov 2022 14:42:50 +0000
Subject: [PATCH 104/113] Upgrade matrix-js-sdk to 21.1.0-rc.1

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

diff --git a/package.json b/package.json
index 33c74f702b2..7795de4cbe1 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "maplibre-gl": "^1.15.2",
     "matrix-encrypt-attachment": "^1.0.3",
     "matrix-events-sdk": "^0.0.1-beta.7",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "21.1.0-rc.1",
     "matrix-widget-api": "^1.1.1",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index b1f0f9323b6..170c012544a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7027,9 +7027,10 @@ matrix-events-sdk@^0.0.1-beta.7:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
   integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "21.0.1"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/52830a2a50732f4269048d0ad7a007c6b9528ffa"
+matrix-js-sdk@21.1.0-rc.1:
+  version "21.1.0-rc.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-21.1.0-rc.1.tgz#30c74d30a9ce53fa1f83cb1e630ccc8df77853e6"
+  integrity sha512-vb4f/1rqFihIorabPg1HxG6FgS8EoB0svcPC371r1zVORoQOa7OPJyYKsKDm2sgSwZacLxl3JdOTmnFwcB60dA==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From f573381f85caeddd6690e34a1581aace3034c908 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 1 Nov 2022 14:44:49 +0000
Subject: [PATCH 105/113] Prepare changelog for v3.60.0-rc.1

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5334d09b0e..6b3006d6785 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,38 @@
+Changes in [3.60.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0-rc.1) (2022-11-01)
+===============================================================================================================
+
+## ✨ Features
+ * Loading threads with server-side assistance ([\#9356](https://github.com/matrix-org/matrix-react-sdk/pull/9356)). Fixes vector-im/element-web#21807, vector-im/element-web#21799, vector-im/element-web#21911, vector-im/element-web#22141, vector-im/element-web#22157, vector-im/element-web#22641, vector-im/element-web#22501 vector-im/element-web#22438 and vector-im/element-web#21678. Contributed by @justjanne.
+ * Make thread replies trigger a room list re-ordering ([\#9510](https://github.com/matrix-org/matrix-react-sdk/pull/9510)). Fixes vector-im/element-web#21700.
+ * Device manager - add extra details to device security and renaming ([\#9501](https://github.com/matrix-org/matrix-react-sdk/pull/9501)). Contributed by @kerryarchibald.
+ * Add plain text mode to the wysiwyg composer ([\#9503](https://github.com/matrix-org/matrix-react-sdk/pull/9503)). Contributed by @florianduros.
+ * Sliding Sync: improve sort order, show subspace rooms, better tombstoned room handling ([\#9484](https://github.com/matrix-org/matrix-react-sdk/pull/9484)).
+ * Device manager - add learn more popups to filtered sessions section ([\#9497](https://github.com/matrix-org/matrix-react-sdk/pull/9497)). Contributed by @kerryarchibald.
+ * Show thread notification if thread timeline is closed ([\#9495](https://github.com/matrix-org/matrix-react-sdk/pull/9495)). Fixes vector-im/element-web#23589.
+ * Add message editing to wysiwyg composer ([\#9488](https://github.com/matrix-org/matrix-react-sdk/pull/9488)). Contributed by @florianduros.
+ * Device manager - confirm sign out of other sessions ([\#9487](https://github.com/matrix-org/matrix-react-sdk/pull/9487)). Contributed by @kerryarchibald.
+ * Automatically request logs from other users in a call when submitting logs ([\#9492](https://github.com/matrix-org/matrix-react-sdk/pull/9492)).
+ * Add thread notification with server assistance (MSC3773) ([\#9400](https://github.com/matrix-org/matrix-react-sdk/pull/9400)). Fixes vector-im/element-web#21114, vector-im/element-web#21413, vector-im/element-web#21416, vector-im/element-web#21433, vector-im/element-web#21481, vector-im/element-web#21798, vector-im/element-web#21823 vector-im/element-web#23192 and vector-im/element-web#21765.
+ * Support for login + E2EE set up with QR ([\#9403](https://github.com/matrix-org/matrix-react-sdk/pull/9403)). Contributed by @hughns.
+ * Allow pressing Enter to send messages in new composer ([\#9451](https://github.com/matrix-org/matrix-react-sdk/pull/9451)). Contributed by @andybalaam.
+
+## 🐛 Bug Fixes
+ * Fix NotificationBadge unsent color ([\#9522](https://github.com/matrix-org/matrix-react-sdk/pull/9522)). Fixes vector-im/element-web#23646.
+ * Fix room list sorted by recent on app startup ([\#9515](https://github.com/matrix-org/matrix-react-sdk/pull/9515)). Fixes vector-im/element-web#23635.
+ * Reset custom power selector when blurred on empty ([\#9508](https://github.com/matrix-org/matrix-react-sdk/pull/9508)). Fixes vector-im/element-web#23481.
+ * Reinstate timeline/redaction callbacks when updating notification state ([\#9494](https://github.com/matrix-org/matrix-react-sdk/pull/9494)). Fixes vector-im/element-web#23554.
+ * Only render NotificationBadge when needed ([\#9493](https://github.com/matrix-org/matrix-react-sdk/pull/9493)). Fixes vector-im/element-web#23584.
+ * Fix embedded Element Call screen sharing ([\#9485](https://github.com/matrix-org/matrix-react-sdk/pull/9485)). Fixes vector-im/element-web#23571.
+ * Send Content-Type: application/json header for integration manager /register API ([\#9490](https://github.com/matrix-org/matrix-react-sdk/pull/9490)). Fixes vector-im/element-web#23580.
+ * Fix joining calls without audio or video inputs ([\#9486](https://github.com/matrix-org/matrix-react-sdk/pull/9486)). Fixes vector-im/element-web#23511.
+ * Ensure spaces in the spotlight dialog have rounded square avatars ([\#9480](https://github.com/matrix-org/matrix-react-sdk/pull/9480)). Fixes vector-im/element-web#23515.
+ * Only show mini avatar uploader in room intro when no avatar yet exists ([\#9479](https://github.com/matrix-org/matrix-react-sdk/pull/9479)). Fixes vector-im/element-web#23552.
+ * Fix threads fallback incorrectly targets root event ([\#9229](https://github.com/matrix-org/matrix-react-sdk/pull/9229)). Fixes vector-im/element-web#23147.
+ * Align video call icon with banner text ([\#9460](https://github.com/matrix-org/matrix-react-sdk/pull/9460)).
+ * Set relations helper when creating event tile context menu ([\#9253](https://github.com/matrix-org/matrix-react-sdk/pull/9253)). Fixes vector-im/element-web#22018.
+ * Device manager - put client/browser device metadata in correct section ([\#9447](https://github.com/matrix-org/matrix-react-sdk/pull/9447)). Contributed by @kerryarchibald.
+ * Update the room unread notification counter when the server changes the value without any related read receipt ([\#9438](https://github.com/matrix-org/matrix-react-sdk/pull/9438)).
+
 Changes in [3.59.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.59.1) (2022-11-01)
 =====================================================================================================
 

From ad87b32e1b1ca43f707400fcf80cf6849b1971dc Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 1 Nov 2022 14:44:50 +0000
Subject: [PATCH 106/113] v3.60.0-rc.1

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

diff --git a/package.json b/package.json
index 7795de4cbe1..cbdfcbbf842 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.59.1",
+  "version": "3.60.0-rc.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -23,7 +23,7 @@
     "package.json",
     ".stylelintrc.js"
   ],
-  "main": "./src/index.ts",
+  "main": "./lib/index.ts",
   "matrix_src_main": "./src/index.ts",
   "matrix_lib_main": "./lib/index.ts",
   "matrix_lib_typings": "./lib/index.d.ts",
@@ -253,5 +253,6 @@
   "jestSonar": {
     "reportPath": "coverage",
     "sonar56x": true
-  }
+  },
+  "typings": "./lib/index.d.ts"
 }

From e58681ee73761b0aae232f18c87dd1c9b29b18ba Mon Sep 17 00:00:00 2001
From: ElementRobot <releases@riot.im>
Date: Thu, 3 Nov 2022 12:03:00 +0000
Subject: [PATCH 107/113] [Backport staging] Fix /myroomavatar slash command
 (#9537)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/SlashCommands.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx
index 624c515b153..cce5c4ade40 100644
--- a/src/SlashCommands.tsx
+++ b/src/SlashCommands.tsx
@@ -76,7 +76,7 @@ interface HTMLInputEvent extends Event {
     target: HTMLInputElement & EventTarget;
 }
 
-const singleMxcUpload = async (): Promise<any> => {
+const singleMxcUpload = async (): Promise<string | null> => {
     return new Promise((resolve) => {
         const fileSelector = document.createElement('input');
         fileSelector.setAttribute('type', 'file');
@@ -85,8 +85,13 @@ const singleMxcUpload = async (): Promise<any> => {
 
             Modal.createDialog(UploadConfirmDialog, {
                 file,
-                onFinished: (shouldContinue) => {
-                    resolve(shouldContinue ? MatrixClientPeg.get().uploadContent(file) : null);
+                onFinished: async (shouldContinue) => {
+                    if (shouldContinue) {
+                        const { content_uri: uri } = await MatrixClientPeg.get().uploadContent(file);
+                        resolve(uri);
+                    } else {
+                        resolve(null);
+                    }
                 },
             });
         };

From fe0759803a09e271423c034e0584be46d6c8c685 Mon Sep 17 00:00:00 2001
From: ElementRobot <releases@riot.im>
Date: Mon, 7 Nov 2022 12:23:47 +0000
Subject: [PATCH 108/113] [Backport staging] Fix regressions around media
 uploads failing and causing soft crashes (#9550)

(cherry picked from commit 77764d80bc20f95566e79071c9131bd5d9269d7d)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/Notifier.ts                               |   4 +-
 .../views/settings/ChangeAvatar.tsx           | 209 ------------------
 .../tabs/room/NotificationSettingsTab.tsx     |   2 +-
 .../views/spaces/SpaceSettingsGeneralTab.tsx  |   9 +-
 src/i18n/strings/en_EN.json                   |   2 -
 test/Notifier-test.ts                         |   9 +
 6 files changed, 17 insertions(+), 218 deletions(-)
 delete mode 100644 src/components/views/settings/ChangeAvatar.tsx

diff --git a/src/Notifier.ts b/src/Notifier.ts
index b75b821ae8d..2f925699284 100644
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@@ -161,8 +161,8 @@ export const Notifier = {
             return null;
         }
 
-        if (!content.url) {
-            logger.warn(`${roomId} has custom notification sound event, but no url key`);
+        if (typeof content.url !== "string") {
+            logger.warn(`${roomId} has custom notification sound event, but no url string`);
             return null;
         }
 
diff --git a/src/components/views/settings/ChangeAvatar.tsx b/src/components/views/settings/ChangeAvatar.tsx
deleted file mode 100644
index 680291db4ce..00000000000
--- a/src/components/views/settings/ChangeAvatar.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-/*
-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.
-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 { Room } from 'matrix-js-sdk/src/models/room';
-import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
-import { EventType } from "matrix-js-sdk/src/@types/event";
-
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { _t } from '../../../languageHandler';
-import Spinner from '../elements/Spinner';
-import { mediaFromMxc } from "../../../customisations/Media";
-import RoomAvatar from '../avatars/RoomAvatar';
-import BaseAvatar from '../avatars/BaseAvatar';
-import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
-
-interface IProps {
-    initialAvatarUrl?: string;
-    room?: Room;
-    // if false, you need to call changeAvatar.onFileSelected yourself.
-    showUploadSection?: boolean;
-    width?: number;
-    height?: number;
-    className?: string;
-}
-
-interface IState {
-    avatarUrl?: string;
-    errorText?: string;
-    phase?: Phases;
-}
-
-enum Phases {
-    Display = "display",
-    Uploading = "uploading",
-    Error = "error",
-}
-
-export default class ChangeAvatar extends React.Component<IProps, IState> {
-    public static defaultProps = {
-        showUploadSection: true,
-        className: "",
-        width: 80,
-        height: 80,
-    };
-
-    private avatarSet = false;
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            avatarUrl: this.props.initialAvatarUrl,
-            phase: Phases.Display,
-        };
-    }
-
-    public componentDidMount(): void {
-        MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
-    }
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    // eslint-disable-next-line
-    public UNSAFE_componentWillReceiveProps(newProps: IProps): void {
-        if (this.avatarSet) {
-            // don't clobber what the user has just set
-            return;
-        }
-        this.setState({
-            avatarUrl: newProps.initialAvatarUrl,
-        });
-    }
-
-    public componentWillUnmount(): void {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
-    }
-
-    private onRoomStateEvents = (ev: MatrixEvent) => {
-        if (!this.props.room) {
-            return;
-        }
-
-        if (ev.getRoomId() !== this.props.room.roomId ||
-            ev.getType() !== EventType.RoomAvatar ||
-            ev.getSender() !== MatrixClientPeg.get().getUserId()
-        ) {
-            return;
-        }
-
-        if (!ev.getContent().url) {
-            this.avatarSet = false;
-            this.setState({}); // force update
-        }
-    };
-
-    private setAvatarFromFile(file: File): Promise<{}> {
-        let newUrl = null;
-
-        this.setState({
-            phase: Phases.Uploading,
-        });
-        const httpPromise = MatrixClientPeg.get().uploadContent(file).then(({ content_uri: url }) => {
-            newUrl = url;
-            if (this.props.room) {
-                return MatrixClientPeg.get().sendStateEvent(
-                    this.props.room.roomId,
-                    'm.room.avatar',
-                    { url },
-                    '',
-                );
-            } else {
-                return MatrixClientPeg.get().setAvatarUrl(url);
-            }
-        });
-
-        httpPromise.then(() => {
-            this.setState({
-                phase: Phases.Display,
-                avatarUrl: mediaFromMxc(newUrl).srcHttp,
-            });
-        }, () => {
-            this.setState({
-                phase: Phases.Error,
-            });
-            this.onError();
-        });
-
-        return httpPromise;
-    }
-
-    private onFileSelected = (ev: React.ChangeEvent<HTMLInputElement>) => {
-        this.avatarSet = true;
-        return this.setAvatarFromFile(ev.target.files[0]);
-    };
-
-    private onError = (): void => {
-        this.setState({
-            errorText: _t("Failed to upload profile picture!"),
-        });
-    };
-
-    public render(): JSX.Element {
-        let avatarImg;
-        // Having just set an avatar we just display that since it will take a little
-        // time to propagate through to the RoomAvatar.
-        if (this.props.room && !this.avatarSet) {
-            avatarImg = <RoomAvatar
-                room={this.props.room}
-                width={this.props.width}
-                height={this.props.height}
-                resizeMethod='crop'
-            />;
-        } else {
-            // 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}
-            />;
-        }
-
-        let uploadSection;
-        if (this.props.showUploadSection) {
-            uploadSection = (
-                <div className={this.props.className}>
-                    { _t("Upload new:") }
-                    <input type="file" accept="image/*" onClick={chromeFileInputFix} onChange={this.onFileSelected} />
-                    { this.state.errorText }
-                </div>
-            );
-        }
-
-        switch (this.state.phase) {
-            case Phases.Display:
-            case Phases.Error:
-                return (
-                    <div>
-                        <div className={this.props.className}>
-                            { avatarImg }
-                        </div>
-                        { uploadSection }
-                    </div>
-                );
-            case Phases.Uploading:
-                return (
-                    <Spinner />
-                );
-        }
-    }
-}
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index 125b60e0bd7..2ac282654a9 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -119,7 +119,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
             type = "audio/ogg";
         }
 
-        const url = await MatrixClientPeg.get().uploadContent(
+        const { content_uri: url } = await MatrixClientPeg.get().uploadContent(
             this.state.uploadedFile, {
                 type,
             },
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
index d0def77d11c..bc0477d46da 100644
--- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -61,13 +61,14 @@ const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProp
 
     const onSave = async () => {
         setBusy(true);
-        const promises = [];
+        const promises: Promise<unknown>[] = [];
 
         if (avatarChanged) {
             if (newAvatar) {
-                promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {
-                    url: await cli.uploadContent(newAvatar),
-                }, ""));
+                promises.push((async () => {
+                    const { content_uri: url } = await cli.uploadContent(newAvatar);
+                    await cli.sendStateEvent(space.roomId, EventType.RoomAvatar, { url }, "");
+                })());
             } else {
                 promises.push(cli.sendStateEvent(space.roomId, EventType.RoomAvatar, {}, ""));
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 966f3c04e32..4f7c8205dd8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1283,8 +1283,6 @@
     "This bridge is managed by <user />.": "This bridge is managed by <user />.",
     "Workspace: <networkLink/>": "Workspace: <networkLink/>",
     "Channel: <channelLink/>": "Channel: <channelLink/>",
-    "Failed to upload profile picture!": "Failed to upload profile picture!",
-    "Upload new:": "Upload new:",
     "No display name": "No display name",
     "Warning!": "Warning!",
     "Changing your password on this homeserver will cause all of your other devices to be signed out. This will delete the message encryption keys stored on them, and may make encrypted chat history unreadable.": "Changing your password on this homeserver will cause all of your other devices to be signed out. This will delete the message encryption keys stored on them, and may make encrypted chat history unreadable.",
diff --git a/test/Notifier-test.ts b/test/Notifier-test.ts
index 30a1691c2ec..4c6100760ee 100644
--- a/test/Notifier-test.ts
+++ b/test/Notifier-test.ts
@@ -232,6 +232,15 @@ describe("Notifier", () => {
         });
     });
 
+    describe("getSoundForRoom", () => {
+        it("should not explode if given invalid url", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                return { url: { content_uri: "foobar" } };
+            });
+            expect(Notifier.getSoundForRoom("!roomId:server")).toBeNull();
+        });
+    });
+
     describe("_playAudioNotification", () => {
         it.each([
             { event: { is_silenced: true }, count: 0 },

From 02aae5edcef9a5a89f67f144a970d8f03c03e39d Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 8 Nov 2022 13:10:06 +0000
Subject: [PATCH 109/113] Prepare changelog for v3.60.0-rc.2

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b3006d6785..7d9fb1530dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+Changes in [3.60.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0-rc.2) (2022-11-08)
+===============================================================================================================
+
+## 🐛 Bug Fixes
+ * Fix regressions around media uploads failing and causing soft crashes ([\#9549](https://github.com/matrix-org/matrix-react-sdk/pull/9549)). Fixes matrix-org/element-web-rageshakes#16831, matrix-org/element-web-rageshakes#16824 matrix-org/element-web-rageshakes#16810 and vector-im/element-web#23641.
+ * Fix /myroomavatar slash command ([\#9536](https://github.com/matrix-org/matrix-react-sdk/pull/9536)). Fixes matrix-org/synapse#14321.
+
 Changes in [3.60.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0-rc.1) (2022-11-01)
 ===============================================================================================================
 

From 494e2f767cc06c4eb6ecf00244d9dd5f81d45a70 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 8 Nov 2022 13:10:07 +0000
Subject: [PATCH 110/113] v3.60.0-rc.2

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

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

From 5c1687ea9df3444109223311b6c63715d2fb023d Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 8 Nov 2022 14:37:30 +0000
Subject: [PATCH 111/113] Upgrade matrix-js-sdk to 21.1.0

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

diff --git a/package.json b/package.json
index b6a56bf03fe..9f9fb316830 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "maplibre-gl": "^1.15.2",
     "matrix-encrypt-attachment": "^1.0.3",
     "matrix-events-sdk": "^0.0.1-beta.7",
-    "matrix-js-sdk": "21.1.0-rc.1",
+    "matrix-js-sdk": "21.1.0",
     "matrix-widget-api": "^1.1.1",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index 170c012544a..aa69411d730 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7027,10 +7027,10 @@ matrix-events-sdk@^0.0.1-beta.7:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
   integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
 
-matrix-js-sdk@21.1.0-rc.1:
-  version "21.1.0-rc.1"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-21.1.0-rc.1.tgz#30c74d30a9ce53fa1f83cb1e630ccc8df77853e6"
-  integrity sha512-vb4f/1rqFihIorabPg1HxG6FgS8EoB0svcPC371r1zVORoQOa7OPJyYKsKDm2sgSwZacLxl3JdOTmnFwcB60dA==
+matrix-js-sdk@21.1.0:
+  version "21.1.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-21.1.0.tgz#f365df6490e7085f98f1294bcf2a6db39e95a4fe"
+  integrity sha512-4HTEZKt/LlX4045H5JVACBMirPboRWM7E/OabaRCcBoEssgWrPw/z7am6FXH2ZRDw0xp50WhPjCNOGZqdf81Mg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"

From 9f8ee8e966ecef064f3bb9e248d995a908de32b9 Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 8 Nov 2022 14:41:13 +0000
Subject: [PATCH 112/113] Prepare changelog for v3.60.0

---
 CHANGELOG.md | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d9fb1530dd..56161174369 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,5 @@
-Changes in [3.60.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0-rc.2) (2022-11-08)
-===============================================================================================================
-
-## 🐛 Bug Fixes
- * Fix regressions around media uploads failing and causing soft crashes ([\#9549](https://github.com/matrix-org/matrix-react-sdk/pull/9549)). Fixes matrix-org/element-web-rageshakes#16831, matrix-org/element-web-rageshakes#16824 matrix-org/element-web-rageshakes#16810 and vector-im/element-web#23641.
- * Fix /myroomavatar slash command ([\#9536](https://github.com/matrix-org/matrix-react-sdk/pull/9536)). Fixes matrix-org/synapse#14321.
-
-Changes in [3.60.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0-rc.1) (2022-11-01)
-===============================================================================================================
+Changes in [3.60.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.60.0) (2022-11-08)
+=====================================================================================================
 
 ## ✨ Features
  * Loading threads with server-side assistance ([\#9356](https://github.com/matrix-org/matrix-react-sdk/pull/9356)). Fixes vector-im/element-web#21807, vector-im/element-web#21799, vector-im/element-web#21911, vector-im/element-web#22141, vector-im/element-web#22157, vector-im/element-web#22641, vector-im/element-web#22501 vector-im/element-web#22438 and vector-im/element-web#21678. Contributed by @justjanne.
@@ -24,6 +17,8 @@ Changes in [3.60.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases
  * Allow pressing Enter to send messages in new composer ([\#9451](https://github.com/matrix-org/matrix-react-sdk/pull/9451)). Contributed by @andybalaam.
 
 ## 🐛 Bug Fixes
+ * Fix regressions around media uploads failing and causing soft crashes ([\#9549](https://github.com/matrix-org/matrix-react-sdk/pull/9549)). Fixes matrix-org/element-web-rageshakes#16831, matrix-org/element-web-rageshakes#16824 matrix-org/element-web-rageshakes#16810 and vector-im/element-web#23641.
+ * Fix /myroomavatar slash command ([\#9536](https://github.com/matrix-org/matrix-react-sdk/pull/9536)). Fixes matrix-org/synapse#14321.
  * Fix NotificationBadge unsent color ([\#9522](https://github.com/matrix-org/matrix-react-sdk/pull/9522)). Fixes vector-im/element-web#23646.
  * Fix room list sorted by recent on app startup ([\#9515](https://github.com/matrix-org/matrix-react-sdk/pull/9515)). Fixes vector-im/element-web#23635.
  * Reset custom power selector when blurred on empty ([\#9508](https://github.com/matrix-org/matrix-react-sdk/pull/9508)). Fixes vector-im/element-web#23481.

From e1e5950cf6ad79d56d0e4d4c45652cdffcb3effb Mon Sep 17 00:00:00 2001
From: RiotRobot <releases@riot.im>
Date: Tue, 8 Nov 2022 14:41:13 +0000
Subject: [PATCH 113/113] v3.60.0

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

diff --git a/package.json b/package.json
index 9f9fb316830..9d75f462e7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.60.0-rc.2",
+  "version": "3.60.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {