Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/18071

Conflicts: res/css/views/dialogs/_AddExistingToSpaceDialog.scss src/utils/space.tsx
2021-07-29 15:22:52 +01:00 · 2021-07-29 15:22:52 +01:00 · 493cd01ed3
commit 493cd01ed3
parent 62033d0286 dac3eda9e3
56 changed files with 2111 additions and 874 deletions
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -104,8 +104,8 @@ a:visited {
 input[type=text],
 input[type=search],
 input[type=password] {
+    font-family: inherit;
    padding: 9px;
-    font-family: $font-family;
    font-size: $font-14px;
    font-weight: 600;
    min-width: 0;
@ -146,7 +146,6 @@ input[type=text], input[type=password], textarea {

 /* Required by Firefox */
 textarea {
-    font-family: $font-family;
    color: $primary-fg-color;
 }

--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -76,6 +76,7 @@
@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
@import "./views/dialogs/_CreateGroupDialog.scss";
@import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_CreateSubspaceDialog.scss";
@import "./views/dialogs/_DeactivateAccountDialog.scss";
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@ -85,6 +86,7 @@
@import "./views/dialogs/_HostSignupDialog.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
+@import "./views/dialogs/_JoinRuleDropdown.scss";
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_LeaveSpaceDialog.scss";
@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
@ -270,6 +272,7 @@
@import "./views/voip/_CallPreview.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_CallViewForRoom.scss";
+@import "./views/voip/_CallViewSidebar.scss";
@import "./views/voip/_DialPad.scss";
@import "./views/voip/_DialPadContextMenu.scss";
@import "./views/voip/_DialPadModal.scss";
--- a/res/css/views/context_menus/_IconizedContextMenu.scss
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@ -99,6 +99,10 @@ limitations under the License.
            .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
                padding-left: 14px;
            }
+
+            .mx_BetaCard_betaPill {
+                margin-left: 16px;
+            }
        }
    }

--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@ -49,41 +49,41 @@ limitations under the License.
            font-weight: $font-semi-bold;
            line-height: $font-15px;
        }
-    }

-    .mx_AddExistingToSpace_section_spaces {
-        .mx_BaseAvatar {
-            margin-right: 12px;
+        .mx_AddExistingToSpace_entry {
+            display: flex;
+            margin-top: 12px;
+
+            .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+            .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
+                margin-right: 12px;
+            }
+
+            img.mx_RoomAvatar_isSpaceRoom,
+            .mx_RoomAvatar_isSpaceRoom img {
+                border-radius: 8px;
+            }
+
+            .mx_AddExistingToSpace_entry_name {
+                font-size: $font-15px;
+                line-height: 30px;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-right: 12px;
+            }
+
+            .mx_Checkbox {
+                align-items: center;
+            }
        }

-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-
-    .mx_AddExistingToSpace_section_experimental {
-        position: relative;
-        border-radius: 8px;
-        margin: 12px 0;
-        padding: 8px 8px 8px 42px;
-        background-color: $header-panel-bg-color;
-
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $secondary-fg-color;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); // vertical centering
-            height: 16px;
-            width: 16px;
-            background-color: $secondary-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-            mask-position: center;
+        .mx_AccessibleButton_kind_link {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-top: 8px;
+            padding: 0;
        }
    }

@ -181,78 +181,78 @@ limitations under the License.
    min-height: 0;
    height: 80vh;

-    .mx_Dialog_title {
-        display: flex;
+    .mx_AddExistingToSpace {
+        display: contents;
+    }
+}

-        .mx_BaseAvatar_image {
-            border-radius: 8px;
+.mx_SubspaceSelector {
+    display: flex;
+
+    .mx_BaseAvatar_image {
+        border-radius: 8px;
+        margin: 0;
+        vertical-align: unset;
+    }
+
+    .mx_BaseAvatar {
+        display: inline-flex;
+        margin: auto 16px auto 5px;
+        vertical-align: middle;
+    }
+
+    > div {
+        > h1 {
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            line-height: $font-22px;
            margin: 0;
-            vertical-align: unset;
        }
+    }

-        .mx_BaseAvatar {
-            display: inline-flex;
-            margin: auto 16px auto 5px;
-            vertical-align: middle;
-        }
+    .mx_Dropdown_input {
+        border: none;

-        > div {
-            > h1 {
-                font-weight: $font-semi-bold;
-                font-size: $font-18px;
-                line-height: $font-22px;
-                margin: 0;
-            }
+        > .mx_Dropdown_option {
+            padding-left: 0;
+            flex: unset;
+            height: unset;
+            color: $secondary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;

-            .mx_AddExistingToSpaceDialog_onlySpace {
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
+            .mx_BaseAvatar {
+                display: none;
            }
        }

-        .mx_Dropdown_input {
-            border: none;
+        .mx_Dropdown_menu {
+            .mx_SubspaceSelector_dropdownOptionActive {
+                color: $accent-color;
+                padding-right: 32px;
+                position: relative;

-            > .mx_Dropdown_option {
-                padding-left: 0;
-                flex: unset;
-                height: unset;
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
-
-                .mx_BaseAvatar {
-                    display: none;
-                }
-            }
-
-            .mx_Dropdown_menu {
-                .mx_AddExistingToSpaceDialog_dropdownOptionActive {
-                    color: $accent-color;
-                    padding-right: 32px;
-                    position: relative;
-
-                    &::before {
-                        content: '';
-                        width: 20px;
-                        height: 20px;
-                        top: 8px;
-                        right: 0;
-                        position: absolute;
-                        mask-position: center;
-                        mask-size: contain;
-                        mask-repeat: no-repeat;
-                        background-color: $accent-color;
-                        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-                    }
+                &::before {
+                    content: '';
+                    width: 20px;
+                    height: 20px;
+                    top: 8px;
+                    right: 0;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $accent-color;
+                    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
                }
            }
        }
    }

-    .mx_AddExistingToSpace {
-        display: contents;
+    .mx_SubspaceSelector_onlySpace {
+        color: $secondary-fg-color;
+        font-size: $font-15px;
+        line-height: $font-24px;
    }
 }

--- a/res/css/views/dialogs/_AddressPickerDialog.scss
+++ b/res/css/views/dialogs/_AddressPickerDialog.scss
@ -29,7 +29,6 @@ limitations under the License.
 .mx_AddressPickerDialog_input:focus {
    height: 26px;
    font-size: $font-14px;
-    font-family: $font-family;
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 !important;
--- a/res/css/views/dialogs/_ConfirmUserActionDialog.scss
+++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss
@ -34,7 +34,6 @@ limitations under the License.
 }

 .mx_ConfirmUserActionDialog_reasonField {
-    font-family: $font-family;
    font-size: $font-14px;
    color: $primary-fg-color;
    background-color: $primary-bg-color;
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@ -109,56 +109,4 @@ limitations under the License.
        margin: 0 85px 0 0;
        font-size: $font-12px;
    }
-
-    .mx_Dropdown {
-        margin-bottom: 8px;
-        font-weight: normal;
-        font-family: $font-family;
-        font-size: $font-14px;
-        color: $primary-fg-color;
-
-        .mx_Dropdown_input {
-            border: 1px solid $input-border-color;
-        }
-
-        .mx_Dropdown_option {
-            font-size: $font-14px;
-            line-height: $font-32px;
-            height: 32px;
-            min-height: 32px;
-
-            > div {
-                padding-left: 30px;
-                position: relative;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    height: 16px;
-                    width: 16px;
-                    left: 6px;
-                    top: 8px;
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    background-color: $secondary-fg-color;
-                }
-            }
-        }
-
-        .mx_CreateRoomDialog_dropdown_invite::before {
-            mask-image: url('$(res)/img/element-icons/lock.svg');
-            mask-size: contain;
-        }
-
-        .mx_CreateRoomDialog_dropdown_public::before {
-            mask-image: url('$(res)/img/globe.svg');
-            mask-size: 12px;
-        }
-
-        .mx_CreateRoomDialog_dropdown_restricted::before {
-            mask-image: url('$(res)/img/element-icons/community-members.svg');
-            mask-size: contain;
-        }
-    }
 }
-
--- a/res/css/views/dialogs/_CreateSubspaceDialog.scss
+++ b/res/css/views/dialogs/_CreateSubspaceDialog.scss
@ -0,0 +1,81 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CreateSubspaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_CreateSubspaceDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+
+    .mx_CreateSubspaceDialog_content {
+        flex-grow: 1;
+
+        .mx_CreateSubspaceDialog_betaNotice {
+            padding: 12px 16px;
+            border-radius: 8px;
+            background-color: $header-panel-bg-color;
+
+            .mx_BetaCard_betaPill {
+                margin-right: 8px;
+                vertical-align: middle;
+            }
+        }
+
+        .mx_JoinRuleDropdown + p {
+            color: $muted-fg-color;
+            font-size: $font-12px;
+        }
+    }
+
+    .mx_CreateSubspaceDialog_footer {
+        display: flex;
+        margin-top: 20px;
+
+        .mx_CreateSubspaceDialog_footer_prompt {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            margin-left: 16px;
+            padding: 8px 36px;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
+}
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@ -55,22 +55,6 @@ limitations under the License.
    padding-right: 24px;
 }

-.mx_DevTools_inputCell {
-    display: table-cell;
-    width: 240px;
-}
-
-.mx_DevTools_inputCell input {
-    display: inline-block;
-    border: 0;
-    border-bottom: 1px solid $input-underline-color;
-    padding: 0;
-    width: 240px;
-    color: $input-fg-color;
-    font-family: $font-family;
-    font-size: $font-16px;
-}
-
 .mx_DevTools_textarea {
    font-size: $font-12px;
    max-width: 684px;
@ -139,7 +123,6 @@ limitations under the License.
    + .mx_DevTools_tgl-btn {
        padding: 2px;
        transition: all .2s ease;
-        font-family: sans-serif;
        perspective: 100px;
        &::after,
        &::before {
--- a/res/css/views/dialogs/_JoinRuleDropdown.scss
+++ b/res/css/views/dialogs/_JoinRuleDropdown.scss
@ -0,0 +1,67 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_JoinRuleDropdown {
+    margin-bottom: 8px;
+    font-weight: normal;
+    font-family: $font-family;
+    font-size: $font-14px;
+    color: $primary-fg-color;
+
+    .mx_Dropdown_input {
+        border: 1px solid $input-border-color;
+    }
+
+    .mx_Dropdown_option {
+        font-size: $font-14px;
+        line-height: $font-32px;
+        height: 32px;
+        min-height: 32px;
+
+        > div {
+            padding-left: 30px;
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 16px;
+                width: 16px;
+                left: 6px;
+                top: 8px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                background-color: $secondary-fg-color;
+            }
+        }
+    }
+
+    .mx_JoinRuleDropdown_invite::before {
+        mask-image: url('$(res)/img/element-icons/lock.svg');
+        mask-size: contain;
+    }
+
+    .mx_JoinRuleDropdown_public::before {
+        mask-image: url('$(res)/img/globe.svg');
+        mask-size: 12px;
+    }
+
+    .mx_JoinRuleDropdown_restricted::before {
+        mask-image: url('$(res)/img/element-icons/community-members.svg');
+        mask-size: contain;
+    }
+}
+
--- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss
+++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss
@ -16,57 +16,43 @@ limitations under the License.

 .mx_desktopCapturerSourcePicker {
    overflow: hidden;
-}

-.mx_desktopCapturerSourcePicker_tabLabels {
-    display: flex;
-    padding: 0 0 8px 0;
-}
+    .mx_desktopCapturerSourcePicker_tab {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: flex-start;
+        height: 500px;
+        overflow: overlay;
+    }

-.mx_desktopCapturerSourcePicker_tabLabel,
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
-    width: 100%;
-    text-align: center;
-    border-radius: 8px;
-    padding: 8px 0;
-    font-size: $font-13px;
-}
+    .mx_desktopCapturerSourcePicker_source {
+        display: flex;
+        flex-direction: column;
+        margin: 8px;
+    }

-.mx_desktopCapturerSourcePicker_tabLabel_selected {
-    background-color: $tab-label-active-bg-color;
-    color: $tab-label-active-fg-color;
-}
+    .mx_desktopCapturerSourcePicker_source_thumbnail {
+        margin: 4px;
+        padding: 4px;
+        width: 312px;
+        border-width: 2px;
+        border-radius: 8px;
+        border-style: solid;
+        border-color: transparent;

-.mx_desktopCapturerSourcePicker_panel {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-    height: 500px;
-    overflow: overlay;
-}
+        &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
+        &:hover,
+        &:focus {
+            border-color: $accent-color;
+        }
+    }

-.mx_desktopCapturerSourcePicker_stream_button {
-    display: flex;
-    flex-direction: column;
-    margin: 8px;
-    border-radius: 4px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button:hover,
-.mx_desktopCapturerSourcePicker_stream_button:focus {
-    background: $roomtile-selected-bg-color;
-}
-
-.mx_desktopCapturerSourcePicker_stream_thumbnail {
-    margin: 4px;
-    width: 312px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_name {
-    margin: 0 4px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: 312px;
+    .mx_desktopCapturerSourcePicker_source_name {
+        margin: 0 4px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 312px;
+    }
 }
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@ -39,7 +39,6 @@ limitations under the License.
 .mx_Field select,
 .mx_Field textarea {
    font-weight: normal;
-    font-family: $font-family;
    font-size: $font-14px;
    border: none;
    // Even without a border here, we still need this avoid overlapping the rounded
--- a/res/css/views/messages/_ViewSourceEvent.scss
+++ b/res/css/views/messages/_ViewSourceEvent.scss
@ -43,8 +43,10 @@ limitations under the License.
        margin-bottom: 7px;
        mask-image: url('$(res)/img/feather-customised/minimise.svg');
    }
+}

-    &:hover .mx_ViewSourceEvent_toggle {
+.mx_EventTile:hover {
+    .mx_ViewSourceEvent_toggle {
        visibility: visible;
    }
 }
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@ -38,18 +38,22 @@ limitations under the License.
        padding-top: 0;
    }

+    &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        left: -60px;
+        right: -60px;
+        z-index: -1;
+        border-radius: 4px;
+    }
+
    &:hover,
    &.mx_EventTile_selected {
+
        &::before {
-            content: '';
-            position: absolute;
-            top: -1px;
-            bottom: -1px;
-            left: -60px;
-            right: -60px;
-            z-index: -1;
            background: $eventbubble-bg-hover;
-            border-radius: 4px;
        }

        .mx_EventTile_avatar {
@ -267,7 +271,7 @@ limitations under the License.

    display: flex;
    align-items: center;
-    justify-content: center;
+    justify-content: start;
    padding: 5px 0;

    .mx_EventTile_avatar {
@ -275,12 +279,22 @@ limitations under the License.
        order: -1;
        margin-right: 5px;
    }
+
+    .mx_EventTile_e2eIcon {
+        margin-left: 9px;
+    }
+
+    .mx_EventTile_line > a {
+        right: auto;
+        top: -15px;
+        left: -68px;
+    }
 }

 .mx_EventListSummary[data-layout=bubble] {
-    --maxWidth: 80%;
+    --maxWidth: 70%;
    margin-left: calc(var(--avatarSize) + var(--gutterSize));
-    margin-right: calc(var(--gutterSize) + var(--avatarSize));
+    margin-right: 94px;
    .mx_EventListSummary_toggle {
        float: none;
        margin: 0;
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@ -59,7 +59,6 @@ $hover-select-border: 4px;
        font-size: $font-14px;
        display: inline-block; /* anti-zalgo, with overflow hidden */
        overflow: hidden;
-        cursor: pointer;
        padding-bottom: 0px;
        padding-top: 0px;
        margin: 0px;
@ -132,15 +131,6 @@ $hover-select-border: 4px;
        }
    }

-    &.mx_EventTile_info .mx_EventTile_line,
-    & ~ .mx_EventListSummary > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px);
-    }
-
-    & ~ .mx_EventListSummary .mx_EventTile_line {
-        padding-left: calc($left-gutter);
-    }
-
    &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
        padding-left: calc($left-gutter + 18px - $hover-select-border);
    }
@ -276,10 +266,19 @@ $hover-select-border: 4px;

    .mx_ReactionsRow {
        margin: 0;
-        padding: 6px 60px;
+        padding: 4px 64px;
    }
 }

+.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
+.mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
+    padding-left: calc($left-gutter + 18px);
+}
+
+.mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
+    padding-left: calc($left-gutter);
+}
+
 /* all the overflow-y: hidden; are to trap Zalgos -
   but they introduce an implicit overflow-x: auto.
   so make that explicitly hidden too to avoid random
@ -322,6 +321,10 @@ $hover-select-border: 4px;
    // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 }

+.mx_SenderProfile {
+    cursor: pointer;
+}
+
 .mx_EventTile_bubbleContainer {
    display: grid;
    grid-template-columns: 1fr 100px;
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@ -165,8 +165,6 @@ limitations under the License.
    font-size: $font-14px;
    max-height: 120px;
    overflow: auto;
-    /* needed for FF */
-    font-family: $font-family;
 }

 /* hack for FF as vertical alignment of custom placeholder text is broken */
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@ -36,7 +36,6 @@ limitations under the License.
 .mx_SettingsTab_subheading {
    font-size: $font-16px;
    display: block;
-    font-family: $font-family;
    font-weight: 600;
    color: $primary-fg-color;
    margin-bottom: 10px;
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@ -67,7 +67,26 @@ limitations under the License.
 .mx_CallView_content {
    position: relative;
    display: flex;
+    justify-content: center;
    border-radius: 8px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+        height: 100%;
+
+        &.mx_VideoFeed_voice {
+            // We don't want to collide with the call controls that have 52px of height
+            padding-bottom: 52px;
+            background-color: $inverted-bg-color;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        &.mx_VideoFeed_video {
+            background-color: #000;
+        }
+    }
 }

 .mx_CallView_voice {
@ -260,7 +279,7 @@ limitations under the License.
    max-width: 240px;
 }

-.mx_CallView_header_phoneIcon {
+.mx_CallView_header_callTypeIcon {
    display: inline-block;
    margin-right: 6px;
    height: 16px;
@ -274,12 +293,19 @@ limitations under the License.

        height: 16px;
        width: 16px;
-        background-color: $warning-color;
+        background-color: $secondary-fg-color;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
+    }
+
+    &.mx_CallView_header_callTypeIcon_voice::before {
        mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
    }
+
+    &.mx_CallView_header_callTypeIcon_video::before {
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    }
 }

 .mx_CallView_callControls {
@ -287,9 +313,9 @@ limitations under the License.
    display: flex;
    justify-content: center;
    bottom: 5px;
-    width: 100%;
    opacity: 1;
    transition: opacity 0.5s;
+    z-index: 200; // To be above _all_ feeds
 }

 .mx_CallView_callControls_hidden {
@ -297,10 +323,29 @@ limitations under the License.
    pointer-events: none;
 }

+.mx_CallView_presenting {
+    opacity: 1;
+    transition: opacity 0.5s;
+
+    position: absolute;
+    margin-top: 18px;
+    padding: 4px 8px;
+    border-radius: 4px;
+
+    // Same on both themes
+    color: white;
+    background-color: #17191c;
+}
+
+.mx_CallView_presenting_hidden {
+    opacity: 0.001; // opacity 0 can cause a re-layout
+    pointer-events: none;
+}
+
 .mx_CallView_callControls_button {
    cursor: pointer;
-    margin-left: 8px;
-    margin-right: 8px;
+    margin-left: 2px;
+    margin-right: 2px;


    &::before {
@ -317,17 +362,11 @@ limitations under the License.
 }

 .mx_CallView_callControls_dialpad {
-    margin-right: auto;
    &::before {
        background-image: url('$(res)/img/voip/dialpad.svg');
    }
 }

-.mx_CallView_callControls_button_dialpad_hidden {
-    margin-right: auto;
-    cursor: initial;
-}
-
 .mx_CallView_callControls_button_micOn {
    &::before {
        background-image: url('$(res)/img/voip/mic-on.svg');
@ -352,6 +391,30 @@ limitations under the License.
    }
 }

+.mx_CallView_callControls_button_screensharingOn {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_screensharingOff {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-off.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOn {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOff {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-off.svg');
+    }
+}
+
 .mx_CallView_callControls_button_hangup {
    &::before {
        background-image: url('$(res)/img/voip/hangup.svg');
@ -359,17 +422,11 @@ limitations under the License.
 }

 .mx_CallView_callControls_button_more {
-    margin-left: auto;
    &::before {
        background-image: url('$(res)/img/voip/more.svg');
    }
 }

-.mx_CallView_callControls_button_more_hidden {
-    margin-left: auto;
-    cursor: initial;
-}
-
 .mx_CallView_callControls_button_invisible {
    visibility: hidden;
    pointer-events: none;
--- a/res/css/views/voip/_CallViewSidebar.scss
+++ b/res/css/views/voip/_CallViewSidebar.scss
@ -0,0 +1,52 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallViewSidebar {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 100; // To be above the primary feed
+
+    overflow: auto;
+
+    height: calc(100% - 32px); // Subtract the top and bottom padding
+    width: 20%;
+
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 12px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+
+        &.mx_VideoFeed_voice {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            aspect-ratio: 16 / 9;
+        }
+    }
+
+    &.mx_CallViewSidebar_pipMode {
+        top: 16px;
+        bottom: unset;
+        justify-content: flex-end;
+        gap: 4px;
+    }
+}
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@ -14,32 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_VideoFeed_voice {
-    background-color: $inverted-bg-color;
-}
-
-
-.mx_VideoFeed_remote {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.mx_VideoFeed_video {
-        background-color: #000;
-    }
-}
-
-.mx_VideoFeed_local {
-    max-width: 25%;
-    max-height: 25%;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
+.mx_VideoFeed {
    border-radius: 4px;

+
+    &.mx_VideoFeed_voice {
+        background-color: $inverted-bg-color;
+    }
+
    &.mx_VideoFeed_video {
        background-color: transparent;
    }
--- a/res/img/voip/screensharing-off.svg
+++ b/res/img/voip/screensharing-off.svg
@ -0,0 +1,18 @@
+<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="25" cy="20" r="20" fill="white"/>
+</g>
+<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="white" stroke="#737D8C" stroke-width="1.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="#737D8C"/>
+<defs>
+<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4.05234"/>
+<feGaussianBlur stdDeviation="2.02617"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/res/img/voip/screensharing-on.svg
+++ b/res/img/voip/screensharing-on.svg
@ -0,0 +1,18 @@
+<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="25" cy="20" r="20" fill="#0DBD8B"/>
+</g>
+<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="#0DBD8B" stroke="white" stroke-width="1.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="white"/>
+<defs>
+<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4.05234"/>
+<feGaussianBlur stdDeviation="2.02617"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/res/img/voip/sidebar-off.svg
+++ b/res/img/voip/sidebar-off.svg
@ -0,0 +1,20 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="24" cy="20" r="20" fill="#737D8C"/>
+</g>
+<rect x="12.5618" y="12.8992" width="20.3525" height="14.4496" rx="2.43819" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9132 20.5009C33.2675 20.5009 34.3655 19.4205 34.3655 18.0876C34.3655 16.7548 33.2675 15.6743 31.9132 15.6743C30.5589 15.6743 29.4609 16.7548 29.4609 18.0876C29.4609 19.4205 30.5589 20.5009 31.9132 20.5009ZM27.8242 26.132C27.8282 23.7187 28.976 21.3054 31.9113 21.3054C34.7818 21.3054 35.9984 23.7187 35.9984 26.132C35.9984 28.5453 32.7288 28.5453 31.9113 28.5453C31.0939 28.5453 27.8206 28.3403 27.8242 26.132Z" fill="white"/>
+<path d="M27.8242 26.132L28.386 26.1329L27.8242 26.132ZM35.9984 26.132H35.4366H35.9984ZM33.8037 18.0876C33.8037 19.1017 32.9658 19.9391 31.9132 19.9391V21.0627C33.5693 21.0627 34.9273 19.7392 34.9273 18.0876H33.8037ZM31.9132 16.2361C32.9658 16.2361 33.8037 17.0735 33.8037 18.0876H34.9273C34.9273 16.4361 33.5693 15.1125 31.9132 15.1125V16.2361ZM30.0227 18.0876C30.0227 17.0735 30.8606 16.2361 31.9132 16.2361V15.1125C30.2571 15.1125 28.8991 16.4361 28.8991 18.0876H30.0227ZM31.9132 19.9391C30.8606 19.9391 30.0227 19.1017 30.0227 18.0876H28.8991C28.8991 19.7392 30.2571 21.0627 31.9132 21.0627V19.9391ZM31.9113 20.7436C30.2659 20.7436 29.0747 21.4314 28.3132 22.4845C27.5693 23.5133 27.2645 24.8471 27.2624 26.1311L28.386 26.1329C28.3879 25.0036 28.659 23.924 29.2238 23.1429C29.771 22.386 30.6214 21.8672 31.9113 21.8672V20.7436ZM36.5602 26.132C36.5602 24.8414 36.2364 23.5081 35.4845 22.4817C34.7168 21.4338 33.5275 20.7436 31.9113 20.7436V21.8672C33.1657 21.8672 34.0199 22.3836 34.5781 23.1457C35.1521 23.9293 35.4366 25.0093 35.4366 26.132H36.5602ZM31.9113 29.1071C32.3157 29.1071 33.4213 29.1105 34.4365 28.7775C34.9481 28.6096 35.4778 28.3438 35.8839 27.9122C36.3025 27.4673 36.5602 26.8767 36.5602 26.132H35.4366C35.4366 26.594 35.2857 26.9083 35.0656 27.1422C34.8331 27.3893 34.4943 27.576 34.0863 27.7098C33.2623 27.9801 32.3244 27.9835 31.9113 27.9835V29.1071ZM27.2624 26.1311C27.26 27.5996 28.3757 28.3418 29.3716 28.6961C30.3797 29.0547 31.4763 29.1071 31.9113 29.1071V27.9835C31.5289 27.9835 30.5802 27.9334 29.7482 27.6375C28.9039 27.3371 28.3848 26.8728 28.386 26.1329L27.2624 26.1311Z" fill="#737D8C"/>
+<rect x="0.0339116" y="-0.787426" width="29.1443" height="3.36793" rx="1.68396" transform="matrix(0.681883 0.731461 -0.742244 0.670129 13.0943 8.71545)" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
+<defs>
+<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3.41026"/>
+<feGaussianBlur stdDeviation="1.70513"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/res/img/voip/sidebar-on.svg
+++ b/res/img/voip/sidebar-on.svg
@ -0,0 +1,19 @@
+<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="24" cy="20" r="20" fill="white"/>
+</g>
+<rect x="12.5" y="12.5" width="20.4763" height="15.3319" rx="2.5" fill="#737D8C" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.912 20.5618C33.2664 20.5618 34.3643 19.4287 34.3643 18.0309C34.3643 16.6331 33.2664 15.5 31.912 15.5C30.5577 15.5 29.4598 16.6331 29.4598 18.0309C29.4598 19.4287 30.5577 20.5618 31.912 20.5618ZM27.8242 26.467C27.8282 23.9361 28.976 21.4052 31.9113 21.4052C34.7818 21.4052 35.9985 23.9361 35.9985 26.467C35.9985 28.9978 32.7288 28.9978 31.9114 28.9978C31.0939 28.9978 27.8206 28.7829 27.8242 26.467Z" fill="#737D8C"/>
+<path d="M27.8242 26.467L27.3242 26.4662L27.8242 26.467ZM35.9985 26.467H36.4985H35.9985ZM33.8643 18.0309C33.8643 19.1675 32.9755 20.0618 31.912 20.0618V21.0618C33.5573 21.0618 34.8643 19.6898 34.8643 18.0309H33.8643ZM31.912 16C32.9755 16 33.8643 16.8943 33.8643 18.0309H34.8643C34.8643 16.372 33.5573 15 31.912 15V16ZM29.9598 18.0309C29.9598 16.8943 30.8486 16 31.912 16V15C30.2668 15 28.9598 16.372 28.9598 18.0309H29.9598ZM31.912 20.0618C30.8486 20.0618 29.9598 19.1675 29.9598 18.0309H28.9598C28.9598 19.6898 30.2668 21.0618 31.912 21.0618V20.0618ZM31.9113 20.9052C30.2753 20.9052 29.1023 21.622 28.3569 22.7032C27.6274 23.7612 27.3263 25.1361 27.3242 26.4662L28.3242 26.4677C28.3261 25.2669 28.6009 24.1109 29.1802 23.2708C29.7434 22.4538 30.612 21.9052 31.9113 21.9052V20.9052ZM36.4985 26.467C36.4985 25.1313 36.1789 23.7567 35.4412 22.7007C34.6893 21.6242 33.5177 20.9052 31.9113 20.9052V21.9052C33.1755 21.9052 34.0475 22.4516 34.6214 23.2733C35.2097 24.1154 35.4985 25.2717 35.4985 26.467H36.4985ZM31.9114 29.4978C32.3162 29.4978 33.416 29.5011 34.4241 29.1543C34.9326 28.9794 35.4519 28.7044 35.847 28.264C36.2515 27.8131 36.4985 27.2184 36.4985 26.467H35.4985C35.4985 26.9809 35.3367 27.3354 35.1026 27.5962C34.8591 27.8677 34.5099 28.0673 34.0988 28.2087C33.2677 28.4946 32.3239 28.4978 31.9114 28.4978V29.4978ZM27.3242 26.4662C27.3219 27.9345 28.3854 28.6964 29.3851 29.0693C30.3864 29.4429 31.4779 29.4978 31.9114 29.4978V28.4978C31.5274 28.4978 30.5735 28.4453 29.7346 28.1324C28.8943 27.8189 28.3229 27.3153 28.3242 26.4677L27.3242 26.4662Z" fill="white"/>
+<defs>
+<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3.41026"/>
+<feGaussianBlur stdDeviation="1.70513"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/src/CallHandler.tsx
+++ b/src/CallHandler.tsx
@ -56,7 +56,6 @@ limitations under the License.
 import React from 'react';

 import { MatrixClientPeg } from './MatrixClientPeg';
-import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import dis from './dispatcher/dispatcher';
@ -80,7 +79,6 @@ import CountlyAnalytics from "./CountlyAnalytics";
 import { UIFeature } from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker";
 import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@ -129,14 +127,9 @@ interface ThirdpartyLookupResponse {
    fields: ThirdpartyLookupResponseFields;
 }

-// Unlike 'CallType' in js-sdk, this one includes screen sharing
-// (because a screen sharing call is only a screen sharing call to the caller,
-// to the callee it's just a video call, at least as far as the current impl
-// is concerned).
 export enum PlaceCallType {
    Voice = 'voice',
    Video = 'video',
-    ScreenSharing = 'screensharing',
 }

 export enum CallHandlerEvent {
@ -728,25 +721,6 @@ export default class CallHandler extends EventEmitter {
            call.placeVoiceCall();
        } else if (type === 'video') {
            call.placeVideoCall();
-        } else if (type === PlaceCallType.ScreenSharing) {
-            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
-            if (screenCapErrorString) {
-                this.removeCallForRoom(roomId);
-                console.log("Can't capture screen: " + screenCapErrorString);
-                Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, {
-                    title: _t('Unable to capture screen'),
-                    description: screenCapErrorString,
-                });
-                return;
-            }
-
-            call.placeScreenSharingCall(
-                async (): Promise<DesktopCapturerSource> => {
-                    const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
-                    const [source] = await finished;
-                    return source;
-                },
-            );
        } else {
            console.error("Unknown conf call type: " + type);
        }
--- a/src/components/structures/SpaceRoomDirectory.tsx
+++ b/src/components/structures/SpaceRoomDirectory.tsx
@ -16,7 +16,6 @@ limitations under the License.

 import React, { ReactNode, useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { ISpaceSummaryRoom, ISpaceSummaryEvent } from "matrix-js-sdk/src/@types/spaces";
 import classNames from "classnames";
@ -44,11 +43,13 @@ import { getChildOrder } from "../../stores/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { linkifyElement } from "../../HtmlUtils";
 import { getDisplayAliasForAliasSet } from "../../Rooms";
+import { useDispatcher } from "../../hooks/useDispatcher";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";

 interface IHierarchyProps {
    space: Room;
    initialText?: string;
-    refreshToken?: any;
    additionalButtons?: ReactNode;
    showRoom(room: ISpaceSummaryRoom, viaServers?: string[], autoJoin?: boolean): void;
 }
@ -315,18 +316,25 @@ export const HierarchyLevel = ({
    </React.Fragment>;
 };

-// mutate argument refreshToken to force a reload
-export const useSpaceSummary = (cli: MatrixClient, space: Room, refreshToken?: any): [
+export const useSpaceSummary = (space: Room): [
    null,
    ISpaceSummaryRoom[],
    Map<string, Map<string, ISpaceSummaryEvent>>?,
    Map<string, Set<string>>?,
    Map<string, Set<string>>?,
 ] | [Error] => {
+    // crude temporary refresh token approach until we have pagination and rework the data flow here
+    const [refreshToken, setRefreshToken] = useState(0);
+    useDispatcher(defaultDispatcher, (payload => {
+        if (payload.action === Action.UpdateSpaceHierarchy) {
+            setRefreshToken(t => t + 1);
+        }
+    }));
+
    // TODO pagination
    return useAsyncMemo(async () => {
        try {
-            const data = await cli.getSpaceSummary(space.roomId);
+            const data = await space.client.getSpaceSummary(space.roomId);

            const parentChildRelations = new EnhancedMap<string, Map<string, ISpaceSummaryEvent>>();
            const childParentRelations = new EnhancedMap<string, Set<string>>();
@ -354,7 +362,6 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({
    space,
    initialText = "",
    showRoom,
-    refreshToken,
    additionalButtons,
    children,
 }) => {
@ -364,7 +371,7 @@ export const SpaceHierarchy: React.FC<IHierarchyProps> = ({

    const [selected, setSelected] = useState(new Map<string, Set<string>>()); // Map<parentId, Set<childId>>

-    const [summaryError, rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(cli, space, refreshToken);
+    const [summaryError, rooms, parentChildMap, viaMap, childParentMap] = useSpaceSummary(space);

    const roomsMap = useMemo(() => {
        if (!rooms) return null;
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@ -47,13 +47,23 @@ import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
 import { SetRightPanelPhasePayload } from "../../dispatcher/payloads/SetRightPanelPhasePayload";
 import { useStateArray } from "../../hooks/useStateArray";
 import SpacePublicShare from "../views/spaces/SpacePublicShare";
-import { shouldShowSpaceSettings, showAddExistingRooms, showCreateNewRoom, showSpaceSettings } from "../../utils/space";
+import {
+    shouldShowSpaceSettings,
+    showAddExistingRooms,
+    showCreateNewRoom,
+    showCreateNewSubspace,
+    showSpaceSettings,
+} from "../../utils/space";
 import { showRoom, SpaceHierarchy } from "./SpaceRoomDirectory";
 import MemberAvatar from "../views/avatars/MemberAvatar";
-import { useStateToggle } from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
 import FacePile from "../views/elements/FacePile";
-import { AddExistingToSpace } from "../views/dialogs/AddExistingToSpaceDialog";
+import {
+    AddExistingToSpace,
+    defaultDmsRenderer,
+    defaultRoomsRenderer,
+    defaultSpacesRenderer,
+} from "../views/dialogs/AddExistingToSpaceDialog";
 import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
 import IconizedContextMenu, {
    IconizedContextMenuOption,
@ -307,7 +317,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
    </div>;
 };

-const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
+const SpaceLandingAddButton = ({ space }) => {
    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();

    let contextMenu;
@ -331,24 +341,32 @@ const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
                        closeMenu();

                        if (await showCreateNewRoom(space)) {
-                            onNewRoomAdded();
+                            defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
                        }
                    }}
                />
                <IconizedContextMenuOption
                    label={_t("Add existing room")}
                    iconClassName="mx_RoomList_iconHash"
-                    onClick={async (e) => {
+                    onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        closeMenu();
-
-                        const [added] = await showAddExistingRooms(space);
-                        if (added) {
-                            onNewRoomAdded();
-                        }
+                        showAddExistingRooms(space);
                    }}
                />
+                <IconizedContextMenuOption
+                    label={_t("Add space")}
+                    iconClassName="mx_RoomList_iconPlus"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closeMenu();
+                        showCreateNewSubspace(space);
+                    }}
+                >
+                    <BetaPill />
+                </IconizedContextMenuOption>
            </IconizedContextMenuOptionList>
        </IconizedContextMenu>;
    }
@ -389,11 +407,9 @@ const SpaceLanding = ({ space }) => {

    const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);

-    const [refreshToken, forceUpdate] = useStateToggle(false);
-
    let addRoomButton;
    if (canAddRooms) {
-        addRoomButton = <SpaceLandingAddButton space={space} onNewRoomAdded={forceUpdate} />;
+        addRoomButton = <SpaceLandingAddButton space={space} />;
    }

    let settingsButton;
@ -443,12 +459,7 @@ const SpaceLanding = ({ space }) => {
        <SpaceFeedbackPrompt />
        <hr />

-        <SpaceHierarchy
-            space={space}
-            showRoom={showRoom}
-            refreshToken={refreshToken}
-            additionalButtons={addRoomButton}
-        />
+        <SpaceHierarchy space={space} showRoom={showRoom} additionalButtons={addRoomButton} />
    </div>;
 };

@ -550,10 +561,12 @@ const SpaceAddExistingRooms = ({ space, onFinished }) => {
                    { _t("Skip for now") }
                </AccessibleButton>
            }
+            filterPlaceholder={_t("Search for rooms or spaces")}
            onFinished={onFinished}
+            roomsRenderer={defaultRoomsRenderer}
+            spacesRenderer={defaultSpacesRenderer}
+            dmsRenderer={defaultDmsRenderer}
        />
-
-        <div className="mx_SpaceRoomView_buttons" />
        <SpaceFeedbackPrompt />
    </div>;
 };
--- a/src/components/views/auth/CaptchaForm.tsx
+++ b/src/components/views/auth/CaptchaForm.tsx
@ -103,8 +103,8 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
    }

    private resetRecaptcha() {
-        if (this.captchaWidgetId !== null) {
-            global.grecaptcha.reset(this.captchaWidgetId);
+        if (this.captchaWidgetId) {
+            global?.grecaptcha?.reset(this.captchaWidgetId);
        }
    }

--- a/src/components/views/context_menus/IconizedContextMenu.tsx
+++ b/src/components/views/context_menus/IconizedContextMenu.tsx
@ -90,10 +90,11 @@ export const IconizedContextMenuCheckbox: React.FC<ICheckboxProps> = ({
    </MenuItemCheckbox>;
 };

-export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, ...props }) => {
+export const IconizedContextMenuOption: React.FC<IOptionProps> = ({ label, iconClassName, children, ...props }) => {
    return <MenuItem {...props} label={label}>
        { iconClassName && <span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} /> }
        <span className="mx_IconizedContextMenu_label">{ label }</span>
+        { children }
    </MenuItem>;
 };

--- a/src/components/views/dialogs/AddExistingSubspaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingSubspaceDialog.tsx
@ -0,0 +1,70 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
+import { AddExistingToSpace, defaultSpacesRenderer, SubspaceSelector } from "./AddExistingToSpaceDialog";
+
+interface IProps {
+    space: Room;
+    onCreateSubspaceClick(): void;
+    onFinished(added?: boolean): void;
+}
+
+const AddExistingSubspaceDialog: React.FC<IProps> = ({ space, onCreateSubspaceClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);
+
+    return <BaseDialog
+        title={(
+            <SubspaceSelector
+                title={_t("Add existing space")}
+                space={space}
+                value={selectedSpace}
+                onChange={setSelectedSpace}
+            />
+        )}
+        className="mx_AddExistingToSpaceDialog"
+        contentId="mx_AddExistingToSpace"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={space.client}>
+            <AddExistingToSpace
+                space={space}
+                onFinished={onFinished}
+                footerPrompt={<>
+                    <div>{ _t("Want to add a new space instead?") }</div>
+                    <AccessibleButton onClick={onCreateSubspaceClick} kind="link">
+                        { _t("Create a new space") }
+                    </AccessibleButton>
+                </>}
+                filterPlaceholder={_t("Search for spaces")}
+                spacesRenderer={defaultSpacesRenderer}
+            />
+        </MatrixClientContext.Provider>
+
+        <SpaceFeedbackPrompt onClick={() => onFinished(false)} />
+    </BaseDialog>;
+};
+
+export default AddExistingSubspaceDialog;
+
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@ -18,9 +18,9 @@ import React, { ReactNode, useContext, useMemo, useState } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { EventType } from "matrix-js-sdk/src/@types/event";

 import { _t } from '../../../languageHandler';
-import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
@ -42,9 +42,11 @@ import TruncatedList from "../elements/TruncatedList";
 import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";

-interface IProps extends IDialogProps {
+interface IProps {
    space: Room;
-    onCreateRoomClick(space: Room): void;
+    onCreateRoomClick(): void;
+    onAddSubspaceClick(): void;
+    onFinished(added?: boolean): void;
 }

 export const Entry = ({ room, checked, onChange }) => {
@ -65,14 +67,36 @@ export const Entry = ({ room, checked, onChange }) => {
 interface IAddExistingToSpaceProps {
    space: Room;
    footerPrompt?: ReactNode;
+    filterPlaceholder: string;
    emptySelectionButton?: ReactNode;
    onFinished(added: boolean): void;
+    roomsRenderer?(
+        rooms: Room[],
+        selectedToAdd: Set<Room>,
+        onChange: undefined | ((checked: boolean, room: Room) => void),
+        truncateAt: number,
+        overflowTile: (overflowCount: number, totalCount: number) => JSX.Element,
+    ): ReactNode;
+    spacesRenderer?(
+        spaces: Room[],
+        selectedToAdd: Set<Room>,
+        onChange?: (checked: boolean, room: Room) => void,
+    ): ReactNode;
+    dmsRenderer?(
+        dms: Room[],
+        selectedToAdd: Set<Room>,
+        onChange?: (checked: boolean, room: Room) => void,
+    ): ReactNode;
 }

 export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
    space,
    footerPrompt,
    emptySelectionButton,
+    filterPlaceholder,
+    roomsRenderer,
+    dmsRenderer,
+    spacesRenderer,
    onFinished,
 }) => {
    const cli = useContext(MatrixClientContext);
@ -196,7 +220,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
        </>;
    }

-    const onChange = !busy && !error ? (checked, room) => {
+    const onChange = !busy && !error ? (checked: boolean, room: Room) => {
        if (checked) {
            selectedToAdd.add(room);
        } else {
@ -206,7 +230,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
    } : null;

    const [truncateAt, setTruncateAt] = useState(20);
-    function overflowTile(overflowCount, totalCount) {
+    function overflowTile(overflowCount: number, totalCount: number): JSX.Element {
        const text = _t("and %(count)s others...", { count: overflowCount });
        return (
            <EntityTile
@ -222,73 +246,36 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
        );
    }

+    let noResults = true;
+    if ((roomsRenderer && rooms.length > 0) ||
+        (dmsRenderer && dms.length > 0) ||
+        (!roomsRenderer && !dmsRenderer && spacesRenderer && spaces.length > 0) // only count spaces when alone
+    ) {
+        noResults = false;
+    }
+
    return <div className="mx_AddExistingToSpace">
        <SearchBox
            className="mx_textinput_icon mx_textinput_search"
-            placeholder={_t("Filter your rooms and spaces")}
+            placeholder={filterPlaceholder}
            onSearch={setQuery}
            autoComplete={true}
            autoFocus={true}
        />
        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
-            { rooms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Rooms") }</h3>
-                    <TruncatedList
-                        truncateAt={truncateAt}
-                        createOverflowElement={overflowTile}
-                        getChildren={(start, end) => rooms.slice(start, end).map(room =>
-                            <Entry
-                                key={room.roomId}
-                                room={room}
-                                checked={selectedToAdd.has(room)}
-                                onChange={onChange ? (checked) => {
-                                    onChange(checked, room);
-                                } : null}
-                            />,
-                        )}
-                        getChildCount={() => rooms.length}
-                    />
-                </div>
+            { rooms.length > 0 && roomsRenderer ? (
+                roomsRenderer(rooms, selectedToAdd, onChange, truncateAt, overflowTile)
            ) : undefined }

-            { spaces.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section mx_AddExistingToSpace_section_spaces">
-                    <h3>{ _t("Spaces") }</h3>
-                    <div className="mx_AddExistingToSpace_section_experimental">
-                        <div>{ _t("Feeling experimental?") }</div>
-                        <div>{ _t("You can add existing spaces to a space.") }</div>
-                    </div>
-                    { spaces.map(space => {
-                        return <Entry
-                            key={space.roomId}
-                            room={space}
-                            checked={selectedToAdd.has(space)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, space);
-                            } : null}
-                        />;
-                    }) }
-                </div>
+            { spaces.length > 0 && spacesRenderer ? (
+                spacesRenderer(spaces, selectedToAdd, onChange)
            ) : null }

-            { dms.length > 0 ? (
-                <div className="mx_AddExistingToSpace_section">
-                    <h3>{ _t("Direct Messages") }</h3>
-                    { dms.map(room => {
-                        return <Entry
-                            key={room.roomId}
-                            room={room}
-                            checked={selectedToAdd.has(room)}
-                            onChange={onChange ? (checked) => {
-                                onChange(checked, room);
-                            } : null}
-                        />;
-                    }) }
-                </div>
+            { dms.length > 0 && dmsRenderer ? (
+                dmsRenderer(dms, selectedToAdd, onChange)
            ) : null }

-            { spaces.length + rooms.length + dms.length < 1 ? <span className="mx_AddExistingToSpace_noResults">
+            { noResults ? <span className="mx_AddExistingToSpace_noResults">
                { _t("No results") }
            </span> : undefined }
        </AutoHideScrollbar>
@ -299,50 +286,126 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
    </div>;
 };

-const AddExistingToSpaceDialog: React.FC<IProps> = ({ space, onCreateRoomClick, onFinished }) => {
-    const [selectedSpace, setSelectedSpace] = useState(space);
-    const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
+export const defaultRoomsRenderer: IAddExistingToSpaceProps["roomsRenderer"] = (
+    rooms, selectedToAdd, onChange, truncateAt, overflowTile,
+) => (
+    <div className="mx_AddExistingToSpace_section">
+        <h3>{ _t("Rooms") }</h3>
+        <TruncatedList
+            truncateAt={truncateAt}
+            createOverflowElement={overflowTile}
+            getChildren={(start, end) => rooms.slice(start, end).map(room =>
+                <Entry
+                    key={room.roomId}
+                    room={room}
+                    checked={selectedToAdd.has(room)}
+                    onChange={onChange ? (checked: boolean) => {
+                        onChange(checked, room);
+                    } : null}
+                />,
+            )}
+            getChildCount={() => rooms.length}
+        />
+    </div>
+);

-    let spaceOptionSection;
-    if (existingSubspaces.length > 0) {
-        const options = [space, ...existingSubspaces].map((space) => {
-            const classes = classNames("mx_AddExistingToSpaceDialog_dropdownOption", {
-                mx_AddExistingToSpaceDialog_dropdownOptionActive: space === selectedSpace,
-            });
-            return <div key={space.roomId} className={classes}>
-                <RoomAvatar room={space} width={24} height={24} />
-                { space.name || getDisplayAliasForRoom(space) || space.roomId }
-            </div>;
-        });
+export const defaultSpacesRenderer: IAddExistingToSpaceProps["spacesRenderer"] = (spaces, selectedToAdd, onChange) => (
+    <div className="mx_AddExistingToSpace_section">
+        { spaces.map(space => {
+            return <Entry
+                key={space.roomId}
+                room={space}
+                checked={selectedToAdd.has(space)}
+                onChange={onChange ? (checked) => {
+                    onChange(checked, space);
+                } : null}
+            />;
+        }) }
+    </div>
+);

-        spaceOptionSection = (
+export const defaultDmsRenderer: IAddExistingToSpaceProps["dmsRenderer"] = (dms, selectedToAdd, onChange) => (
+    <div className="mx_AddExistingToSpace_section">
+        <h3>{ _t("Direct Messages") }</h3>
+        { dms.map(room => {
+            return <Entry
+                key={room.roomId}
+                room={room}
+                checked={selectedToAdd.has(room)}
+                onChange={onChange ? (checked: boolean) => {
+                    onChange(checked, room);
+                } : null}
+            />;
+        }) }
+    </div>
+);
+
+interface ISubspaceSelectorProps {
+    title: string;
+    space: Room;
+    value: Room;
+    onChange(space: Room): void;
+}
+
+export const SubspaceSelector = ({ title, space, value, onChange }: ISubspaceSelectorProps) => {
+    const options = useMemo(() => {
+        return [space, ...SpaceStore.instance.getChildSpaces(space.roomId).filter(space => {
+            return space.currentState.maySendStateEvent(EventType.SpaceChild, space.client.credentials.userId);
+        })];
+    }, [space]);
+
+    let body;
+    if (options.length > 1) {
+        body = (
            <Dropdown
                id="mx_SpaceSelectDropdown"
+                className="mx_SpaceSelectDropdown"
                onOptionChange={(key: string) => {
-                    setSelectedSpace(existingSubspaces.find(space => space.roomId === key) || space);
+                    onChange(options.find(space => space.roomId === key) || space);
                }}
-                value={selectedSpace.roomId}
+                value={value.roomId}
                label={_t("Space selection")}
            >
-                { options }
+                { options.map((space) => {
+                    const classes = classNames({
+                        mx_SubspaceSelector_dropdownOptionActive: space === value,
+                    });
+                    return <div key={space.roomId} className={classes}>
+                        <RoomAvatar room={space} width={24} height={24} />
+                        { space.name || getDisplayAliasForRoom(space) || space.roomId }
+                    </div>;
+                }) }
            </Dropdown>
        );
    } else {
-        spaceOptionSection = <div className="mx_AddExistingToSpaceDialog_onlySpace">
-            { space.name || getDisplayAliasForRoom(space) || space.roomId }
-        </div>;
+        body = (
+            <div className="mx_SubspaceSelector_onlySpace">
+                { space.name || getDisplayAliasForRoom(space) || space.roomId }
+            </div>
+        );
    }

-    const title = <React.Fragment>
-        <RoomAvatar room={selectedSpace} height={40} width={40} />
+    return <div className="mx_SubspaceSelector">
+        <RoomAvatar room={value} height={40} width={40} />
        <div>
-            <h1>{ _t("Add existing rooms") }</h1>
-            { spaceOptionSection }
+            <h1>{ title }</h1>
+            { body }
        </div>
-    </React.Fragment>;
+    </div>;
+};
+
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ space, onCreateRoomClick, onAddSubspaceClick, onFinished }) => {
+    const [selectedSpace, setSelectedSpace] = useState(space);

    return <BaseDialog
-        title={title}
+        title={(
+            <SubspaceSelector
+                title={_t("Add existing rooms")}
+                space={space}
+                value={selectedSpace}
+                onChange={setSelectedSpace}
+            />
+        )}
        className="mx_AddExistingToSpaceDialog"
        contentId="mx_AddExistingToSpace"
        onFinished={onFinished}
@ -354,10 +417,33 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ space, onCreateRoomClick,
                onFinished={onFinished}
                footerPrompt={<>
                    <div>{ _t("Want to add a new room instead?") }</div>
-                    <AccessibleButton onClick={() => onCreateRoomClick(space)} kind="link">
+                    <AccessibleButton
+                        kind="link"
+                        onClick={() => {
+                            onCreateRoomClick();
+                            onFinished();
+                        }}
+                    >
                        { _t("Create a new room") }
                    </AccessibleButton>
                </>}
+                filterPlaceholder={_t("Search for rooms")}
+                roomsRenderer={defaultRoomsRenderer}
+                spacesRenderer={() => (
+                    <div className="mx_AddExistingToSpace_section">
+                        <h3>{ _t("Spaces") }</h3>
+                        <AccessibleButton
+                            kind="link"
+                            onClick={() => {
+                                onAddSubspaceClick();
+                                onFinished();
+                            }}
+                        >
+                            { _t("Adding spaces has moved.") }
+                        </AccessibleButton>
+                    </div>
+                )}
+                dmsRenderer={defaultDmsRenderer}
            />
        </MatrixClientContext.Provider>

--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@ -32,8 +32,8 @@ import RoomAliasField from "../elements/RoomAliasField";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
-import Dropdown from "../elements/Dropdown";
 import SpaceStore from "../../../stores/SpaceStore";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";

 interface IProps {
    defaultPublic?: boolean;
@ -250,7 +250,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                &nbsp;
                { _t("You can change this at any time from room settings.") }
            </p>;
-        } else if (this.state.joinRule === JoinRule.Public) {
+        } else if (this.state.joinRule === JoinRule.Public && this.props.parentSpace) {
            publicPrivateLabel = <p>
                { _t(
                    "Anyone will be able to find and join this room, not just members of <SpaceName/>.", {}, {
@ -260,6 +260,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                &nbsp;
                { _t("You can change this at any time from room settings.") }
            </p>;
+        } else if (this.state.joinRule === JoinRule.Public) {
+            publicPrivateLabel = <p>
+                { _t("Anyone will be able to find and join this room.") }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
        } else if (this.state.joinRule === JoinRule.Invite) {
            publicPrivateLabel = <p>
                { _t(
@ -316,21 +322,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
            title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room');
        }

-        const options = [
-            <div key={JoinRule.Invite} className="mx_CreateRoomDialog_dropdown_invite">
-                { _t("Private room (invite only)") }
-            </div>,
-            <div key={JoinRule.Public} className="mx_CreateRoomDialog_dropdown_public">
-                { _t("Public room") }
-            </div>,
-        ];
-
-        if (this.supportsRestricted) {
-            options.unshift(<div key={JoinRule.Restricted} className="mx_CreateRoomDialog_dropdown_restricted">
-                { _t("Visible to space members") }
-            </div>);
-        }
-
        return (
            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished} title={title}>
                <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
@ -350,16 +341,14 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                            className="mx_CreateRoomDialog_topic"
                        />

-                        <Dropdown
-                            id="mx_CreateRoomDialog_typeDropdown"
-                            className="mx_CreateRoomDialog_typeDropdown"
-                            onOptionChange={this.onJoinRuleChange}
-                            menuWidth={448}
-                            value={this.state.joinRule}
+                        <JoinRuleDropdown
                            label={_t("Room visibility")}
-                        >
-                            { options }
-                        </Dropdown>
+                            labelInvite={_t("Private room (invite only)")}
+                            labelPublic={_t("Public room")}
+                            labelRestricted={this.supportsRestricted ? _t("Visible to space members") : undefined}
+                            value={this.state.joinRule}
+                            onChange={this.onJoinRuleChange}
+                        />

                        { publicPrivateLabel }
                        { e2eeSection }
--- a/src/components/views/dialogs/CreateSubspaceDialog.tsx
+++ b/src/components/views/dialogs/CreateSubspaceDialog.tsx
@ -0,0 +1,210 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useRef, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
+import { RoomType } from "matrix-js-sdk/src/@types/event";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { BetaPill } from "../beta/BetaCard";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import SpaceStore from "../../../stores/SpaceStore";
+import { SpaceCreateForm } from "../spaces/SpaceCreateMenu";
+import createRoom from "../../../createRoom";
+import { SubspaceSelector } from "./AddExistingToSpaceDialog";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+
+interface IProps {
+    space: Room;
+    onAddExistingSpaceClick(): void;
+    onFinished(added?: boolean): void;
+}
+
+const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick, onFinished }) => {
+    const [parentSpace, setParentSpace] = useState(space);
+
+    const [busy, setBusy] = useState<boolean>(false);
+    const [name, setName] = useState("");
+    const spaceNameField = useRef<Field>();
+    const [alias, setAlias] = useState("");
+    const spaceAliasField = useRef<RoomAliasField>();
+    const [avatar, setAvatar] = useState<File>(null);
+    const [topic, setTopic] = useState<string>("");
+
+    const supportsRestricted = !!SpaceStore.instance.restrictedJoinRuleSupport?.preferred;
+
+    const spaceJoinRule = space.getJoinRule();
+    let defaultJoinRule = JoinRule.Invite;
+    if (spaceJoinRule === JoinRule.Public) {
+        defaultJoinRule = JoinRule.Public;
+    } else if (supportsRestricted) {
+        defaultJoinRule = JoinRule.Restricted;
+    }
+    const [joinRule, setJoinRule] = useState<JoinRule>(defaultJoinRule);
+
+    const onCreateSubspaceClick = async (e) => {
+        e.preventDefault();
+        if (busy) return;
+
+        setBusy(true);
+        // require & validate the space name field
+        if (!await spaceNameField.current.validate({ allowEmpty: false })) {
+            spaceNameField.current.focus();
+            spaceNameField.current.validate({ allowEmpty: false, focused: true });
+            setBusy(false);
+            return;
+        }
+        // validate the space name alias field but do not require it
+        if (joinRule === JoinRule.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) {
+            spaceAliasField.current.focus();
+            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            setBusy(false);
+            return;
+        }
+
+        try {
+            await createRoom({
+                createOpts: {
+                    preset: joinRule === JoinRule.Public ? Preset.PublicChat : Preset.PrivateChat,
+                    name,
+                    power_level_content_override: {
+                        // Only allow Admins to write to the timeline to prevent hidden sync spam
+                        events_default: 100,
+                        ...joinRule === JoinRule.Public ? { invite: 0 } : {},
+                    },
+                    room_alias_name: joinRule === JoinRule.Public && alias
+                        ? alias.substr(1, alias.indexOf(":") - 1)
+                        : undefined,
+                    topic,
+                },
+                avatar,
+                roomType: RoomType.Space,
+                parentSpace,
+                spinner: false,
+                encryption: false,
+                andView: true,
+                inlineErrors: true,
+            });
+
+            onFinished(true);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    let joinRuleMicrocopy: JSX.Element;
+    if (joinRule === JoinRule.Restricted) {
+        joinRuleMicrocopy = <p>
+            { _t(
+                "Anyone in <SpaceName/> will be able to find and join.", {}, {
+                    SpaceName: () => <b>{ parentSpace.name }</b>,
+                },
+            ) }
+        </p>;
+    } else if (joinRule === JoinRule.Public) {
+        joinRuleMicrocopy = <p>
+            { _t(
+                "Anyone will be able to find and join this space, not just members of <SpaceName/>.", {}, {
+                    SpaceName: () => <b>{ parentSpace.name }</b>,
+                },
+            ) }
+        </p>;
+    } else if (joinRule === JoinRule.Invite) {
+        joinRuleMicrocopy = <p>
+            { _t("Only people invited will be able to find and join this space.") }
+        </p>;
+    }
+
+    return <BaseDialog
+        title={(
+            <SubspaceSelector
+                title={_t("Create a space")}
+                space={space}
+                value={parentSpace}
+                onChange={setParentSpace}
+            />
+        )}
+        className="mx_CreateSubspaceDialog"
+        contentId="mx_CreateSubspaceDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <MatrixClientContext.Provider value={space.client}>
+            <div className="mx_CreateSubspaceDialog_content">
+                <div className="mx_CreateSubspaceDialog_betaNotice">
+                    <BetaPill />
+                    { _t("Add a space to a space you manage.") }
+                </div>
+
+                <SpaceCreateForm
+                    busy={busy}
+                    onSubmit={onCreateSubspaceClick}
+                    setAvatar={setAvatar}
+                    name={name}
+                    setName={setName}
+                    nameFieldRef={spaceNameField}
+                    topic={topic}
+                    setTopic={setTopic}
+                    alias={alias}
+                    setAlias={setAlias}
+                    showAliasField={joinRule === JoinRule.Public}
+                    aliasFieldRef={spaceAliasField}
+                >
+                    <JoinRuleDropdown
+                        label={_t("Space visibility")}
+                        labelInvite={_t("Private space (invite only)")}
+                        labelPublic={_t("Public space")}
+                        labelRestricted={supportsRestricted ? _t("Visible to space members") : undefined}
+                        width={478}
+                        value={joinRule}
+                        onChange={setJoinRule}
+                    />
+                    { joinRuleMicrocopy }
+                </SpaceCreateForm>
+            </div>
+
+            <div className="mx_CreateSubspaceDialog_footer">
+                <div className="mx_CreateSubspaceDialog_footer_prompt">
+                    <div>{ _t("Want to add an existing space instead?") }</div>
+                    <AccessibleButton
+                        kind="link"
+                        onClick={() => {
+                            onAddExistingSpaceClick();
+                            onFinished();
+                        }}
+                    >
+                        { _t("Add existing space") }
+                    </AccessibleButton>
+                </div>
+
+                <AccessibleButton kind="primary_outline" disabled={busy} onClick={() => onFinished(false)}>
+                    { _t("Cancel") }
+                </AccessibleButton>
+                <AccessibleButton kind="primary" disabled={busy} onClick={onCreateSubspaceClick}>
+                    { busy ? _t("Adding...") : _t("Add") }
+                </AccessibleButton>
+            </div>
+        </MatrixClientContext.Provider>
+    </BaseDialog>;
+};
+
+export default CreateSubspaceDialog;
+
--- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx
+++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx
@ -17,9 +17,12 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import BaseDialog from "..//dialogs/BaseDialog";
+import DialogButtons from "./DialogButtons";
+import classNames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';

 export interface DesktopCapturerSource {
    id: string;
@ -28,62 +31,70 @@ export interface DesktopCapturerSource {
 }

 export enum Tabs {
-    Screens = "screens",
-    Windows = "windows",
+    Screens = "screen",
+    Windows = "window",
 }

-export interface DesktopCapturerSourceIProps {
+export interface ExistingSourceIProps {
    source: DesktopCapturerSource;
    onSelect(source: DesktopCapturerSource): void;
+    selected: boolean;
 }

-export class ExistingSource extends React.Component<DesktopCapturerSourceIProps> {
-    constructor(props) {
+export class ExistingSource extends React.Component<ExistingSourceIProps> {
+    constructor(props: ExistingSourceIProps) {
        super(props);
    }

-    onClick = (ev) => {
+    private onClick = (): void => {
        this.props.onSelect(this.props.source);
    };

    render() {
+        const thumbnailClasses = classNames({
+            mx_desktopCapturerSourcePicker_source_thumbnail: true,
+            mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
+        });
+
        return (
            <AccessibleButton
-                className="mx_desktopCapturerSourcePicker_stream_button"
+                className="mx_desktopCapturerSourcePicker_source"
                title={this.props.source.name}
                onClick={this.onClick}
            >
                <img
-                    className="mx_desktopCapturerSourcePicker_stream_thumbnail"
+                    className={thumbnailClasses}
                    src={this.props.source.thumbnailURL}
                />
-                <span className="mx_desktopCapturerSourcePicker_stream_name">{ this.props.source.name }</span>
+                <span className="mx_desktopCapturerSourcePicker_source_name">{ this.props.source.name }</span>
            </AccessibleButton>
        );
    }
 }

-export interface DesktopCapturerSourcePickerIState {
+export interface PickerIState {
    selectedTab: Tabs;
    sources: Array<DesktopCapturerSource>;
+    selectedSource: DesktopCapturerSource | null;
 }
-export interface DesktopCapturerSourcePickerIProps {
+export interface PickerIProps {
    onFinished(source: DesktopCapturerSource): void;
 }

@replaceableComponent("views.elements.DesktopCapturerSourcePicker")
 export default class DesktopCapturerSourcePicker extends React.Component<
-    DesktopCapturerSourcePickerIProps,
-    DesktopCapturerSourcePickerIState
-    > {
-    interval;
+    PickerIProps,
+    PickerIState
+> {
+    interval: number;

-    constructor(props) {
+    constructor(props: PickerIProps) {
        super(props);

        this.state = {
            selectedTab: Tabs.Screens,
            sources: [],
+            selectedSource: null,
        };
    }

@ -107,69 +118,61 @@ export default class DesktopCapturerSourcePicker extends React.Component<
        clearInterval(this.interval);
    }

-    onSelect = (source) => {
-        this.props.onFinished(source);
+    private onSelect = (source: DesktopCapturerSource): void => {
+        this.setState({ selectedSource: source });
    };

-    onScreensClick = (ev) => {
-        this.setState({ selectedTab: Tabs.Screens });
+    private onShare = (): void => {
+        this.props.onFinished(this.state.selectedSource);
    };

-    onWindowsClick = (ev) => {
-        this.setState({ selectedTab: Tabs.Windows });
+    private onTabChange = (): void => {
+        this.setState({ selectedSource: null });
    };

-    onCloseClick = (ev) => {
+    private onCloseClick = (): void => {
        this.props.onFinished(null);
    };

-    render() {
-        let sources;
-        if (this.state.selectedTab === Tabs.Screens) {
-            sources = this.state.sources
-                .filter((source) => {
-                    return source.id.startsWith("screen");
-                })
-                .map((source) => {
-                    return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />;
-                });
-        } else {
-            sources = this.state.sources
-                .filter((source) => {
-                    return source.id.startsWith("window");
-                })
-                .map((source) => {
-                    return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />;
-                });
-        }
+    private getTab(type: "screen" | "window", label: string): Tab {
+        const sources = this.state.sources.filter((source) => source.id.startsWith(type)).map((source) => {
+            return (
+                <ExistingSource
+                    selected={this.state.selectedSource?.id === source.id}
+                    source={source}
+                    onSelect={this.onSelect}
+                    key={source.id}
+                />
+            );
+        });

-        const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel";
-        const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : "");
-        const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : "");
+        return new Tab(type, label, null, (
+            <div className="mx_desktopCapturerSourcePicker_tab">
+                { sources }
+            </div>
+        ));
+    }
+
+    render() {
+        const tabs = [
+            this.getTab("screen", _t("Share entire screen")),
+            this.getTab("window", _t("Application window")),
+        ];

        return (
            <BaseDialog
                className="mx_desktopCapturerSourcePicker"
                onFinished={this.onCloseClick}
-                title={_t("Share your screen")}
+                title={_t("Share content")}
            >
-                <div className="mx_desktopCapturerSourcePicker_tabLabels">
-                    <AccessibleButton
-                        className={screensButtonStyle}
-                        onClick={this.onScreensClick}
-                    >
-                        { _t("Screens") }
-                    </AccessibleButton>
-                    <AccessibleButton
-                        className={windowsButtonStyle}
-                        onClick={this.onWindowsClick}
-                    >
-                        { _t("Windows") }
-                    </AccessibleButton>
-                </div>
-                <div className="mx_desktopCapturerSourcePicker_panel">
-                    { sources }
-                </div>
+                <TabbedView tabs={tabs} tabLocation={TabLocation.TOP} onChange={this.onTabChange} />
+                <DialogButtons
+                    primaryButton={_t("Share")}
+                    hasCancel={true}
+                    onCancel={this.onCloseClick}
+                    onPrimaryButtonClick={this.onShare}
+                    primaryDisabled={!this.state.selectedSource}
+                />
            </BaseDialog>
        );
    }
--- a/src/components/views/elements/JoinRuleDropdown.tsx
+++ b/src/components/views/elements/JoinRuleDropdown.tsx
@ -0,0 +1,68 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { JoinRule } from 'matrix-js-sdk/src/@types/partials';
+
+import Dropdown from "./Dropdown";
+
+interface IProps {
+    value: JoinRule;
+    label: string;
+    width?: number;
+    labelInvite: string;
+    labelPublic: string;
+    labelRestricted?: string; // if omitted then this option will be hidden, e.g if unsupported
+    onChange(value: JoinRule): void;
+}
+
+const JoinRuleDropdown = ({
+    label,
+    labelInvite,
+    labelPublic,
+    labelRestricted,
+    value,
+    width = 448,
+    onChange,
+}: IProps) => {
+    const options = [
+        <div key={JoinRule.Invite} className="mx_JoinRuleDropdown_invite">
+            { labelInvite }
+        </div>,
+        <div key={JoinRule.Public} className="mx_JoinRuleDropdown_public">
+            { labelPublic }
+        </div>,
+    ];
+
+    if (labelRestricted) {
+        options.unshift(<div key={JoinRule.Restricted} className="mx_JoinRuleDropdown_restricted">
+            { labelRestricted }
+        </div>);
+    }
+
+    return <Dropdown
+        id="mx_JoinRuleDropdown"
+        className="mx_JoinRuleDropdown"
+        onOptionChange={onChange}
+        menuWidth={width}
+        value={value}
+        label={label}
+    >
+        { options }
+    </Dropdown>;
+};
+
+export default JoinRuleDropdown;
--- a/src/components/views/messages/ViewSourceEvent.tsx
+++ b/src/components/views/messages/ViewSourceEvent.tsx
@ -15,18 +15,21 @@ limitations under the License.
 */

 import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from 'matrix-js-sdk/src';
 import classNames from 'classnames';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";

-@replaceableComponent("views.messages.ViewSourceEvent")
-export default class ViewSourceEvent extends React.PureComponent {
-    static propTypes = {
-        /* the MatrixEvent to show */
-        mxEvent: PropTypes.object.isRequired,
-    };
+interface IProps {
+    mxEvent: MatrixEvent;
+}

+interface IState {
+    expanded: boolean;
+}
+
+@replaceableComponent("views.messages.ViewSourceEvent")
+export default class ViewSourceEvent extends React.PureComponent<IProps, IState> {
    constructor(props) {
        super(props);

@ -35,7 +38,7 @@ export default class ViewSourceEvent extends React.PureComponent {
        };
    }

-    componentDidMount() {
+    public componentDidMount(): void {
        const { mxEvent } = this.props;

        const client = MatrixClientPeg.get();
@ -46,15 +49,15 @@ export default class ViewSourceEvent extends React.PureComponent {
        }
    }

-    onToggle = (ev) => {
+    private onToggle = (ev: React.MouseEvent) => {
        ev.preventDefault();
        const { expanded } = this.state;
        this.setState({
            expanded: !expanded,
        });
-    }
+    };

-    render() {
+    public render(): React.ReactNode {
        const { mxEvent } = this.props;
        const { expanded } = this.state;

--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@ -342,8 +342,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {

    private onVoiceStoreUpdate = () => {
        const recording = VoiceRecordingStore.instance.activeRecording;
-        this.setState({ haveRecording: !!recording });
        if (recording) {
+            // Delay saying we have a recording until it is started, as we might not yet have A/V permissions
+            recording.on(RecordingState.Started, () => {
+                this.setState({ haveRecording: !!VoiceRecordingStore.instance.activeRecording });
+            });
            // We show a little heads up that the recording is about to automatically end soon. The 3s
            // display time is completely arbitrary. Note that we don't need to deregister the listener
            // because the recording instance will clean that up for us.
@ -351,6 +354,8 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                this.setState({ recordingTimeLeftSeconds: secondsLeft });
                setTimeout(() => this.setState({ recordingTimeLeftSeconds: null }), 3000);
            });
+        } else {
+            this.setState({ haveRecording: false });
        }
    };

--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@ -67,15 +67,21 @@ export default class ReplyTile extends React.PureComponent<IProps> {
    };

    private onClick = (e: React.MouseEvent): void => {
-        // This allows the permalink to be opened in a new tab/window or copied as
-        // matrix.to, but also for it to enable routing within Riot when clicked.
-        e.preventDefault();
-        dis.dispatch({
-            action: 'view_room',
-            event_id: this.props.mxEvent.getId(),
-            highlighted: true,
-            room_id: this.props.mxEvent.getRoomId(),
-        });
+        const clickTarget = e.target as HTMLElement;
+        // Following a link within a reply should not dispatch the `view_room` action
+        // so that the browser can direct the user to the correct location
+        // The exception being the link wrapping the reply
+        if (clickTarget.tagName.toLowerCase() !== "a" || clickTarget.closest("a") === null) {
+            // This allows the permalink to be opened in a new tab/window or copied as
+            // matrix.to, but also for it to enable routing within Riot when clicked.
+            e.preventDefault();
+            dis.dispatch({
+                action: 'view_room',
+                event_id: this.props.mxEvent.getId(),
+                highlighted: true,
+                room_id: this.props.mxEvent.getRoomId(),
+            });
+        }
    };

    render() {
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@ -29,6 +29,8 @@ import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Modal from '../../../Modal';
+import InfoDialog from "../dialogs/InfoDialog";
 import { throttle } from 'lodash';
 import { MatrixEvent, Room, RoomState } from 'matrix-js-sdk/src';
 import { E2EStatus } from '../../../utils/ShieldUtils';
@ -87,6 +89,14 @@ export default class RoomHeader extends React.Component<IProps> {
        this.forceUpdate();
    }, 500, { leading: true, trailing: true });

+    private displayInfoDialogAboutScreensharing() {
+        Modal.createDialog(InfoDialog, {
+            title: _t("Screen sharing is here!"),
+            description: _t("You can now share your screen by pressing the \"screen share\" " +
+            "button during a call. You can even do this in audio calls if both sides support it!"),
+        });
+    }
+
    public render() {
        let searchStatus = null;

@ -185,8 +195,8 @@ export default class RoomHeader extends React.Component<IProps> {
            videoCallButton =
                <AccessibleTooltipButton
                    className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
-                    onClick={(ev) => this.props.onCallPlaced(
-                        ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video)}
+                    onClick={(ev) => ev.shiftKey ?
+                        this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
                    title={_t("Video call")} />;
        }

--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { useContext, useRef, useState } from "react";
+import React, { ComponentProps, RefObject, SyntheticEvent, useContext, useRef, useState } from "react";
 import classNames from "classnames";
-import { EventType, RoomType, RoomCreateTypeField } from "matrix-js-sdk/src/@types/event";
+import { RoomType } from "matrix-js-sdk/src/@types/event";
 import FocusLock from "react-focus-lock";

 import { _t } from "../../../languageHandler";
@ -24,7 +24,7 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ChevronFace, ContextMenu } from "../../structures/ContextMenu";
 import createRoom from "../../../createRoom";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { SpaceAvatar } from "./SpaceBasicSettings";
+import SpaceBasicSettings, { SpaceAvatar } from "./SpaceBasicSettings";
 import AccessibleButton from "../elements/AccessibleButton";
 import { BetaPill } from "../beta/BetaCard";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -33,8 +33,7 @@ import { UserTab } from "../dialogs/UserSettingsDialog";
 import Field from "../elements/Field";
 import withValidation from "../elements/Validation";
 import { SpaceFeedbackPrompt } from "../../structures/SpaceRoomView";
-import { Preset } from "matrix-js-sdk/src/@types/partials";
-import { ICreateRoomStateEvent } from "matrix-js-sdk/src/@types/requests";
+import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import RoomAliasField from "../elements/RoomAliasField";

 const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
@ -66,8 +65,83 @@ const nameToAlias = (name: string, domain: string): string => {
    return `#${localpart}:${domain}`;
 };

-const SpaceCreateMenu = ({ onFinished }) => {
+type BProps = Pick<ComponentProps<typeof SpaceBasicSettings>, "setAvatar" | "name" | "setName" | "topic" | "setTopic">;
+interface ISpaceCreateFormProps extends BProps {
+    busy: boolean;
+    alias: string;
+    nameFieldRef: RefObject<Field>;
+    aliasFieldRef: RefObject<RoomAliasField>;
+    showAliasField?: boolean;
+    onSubmit(e: SyntheticEvent): void;
+    setAlias(alias: string): void;
+}
+
+export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
+    busy,
+    onSubmit,
+    setAvatar,
+    name,
+    setName,
+    nameFieldRef,
+    alias,
+    aliasFieldRef,
+    setAlias,
+    showAliasField,
+    topic,
+    setTopic,
+    children,
+}) => {
    const cli = useContext(MatrixClientContext);
+    const domain = cli.getDomain();
+
+    return <form className="mx_SpaceBasicSettings" onSubmit={onSubmit}>
+        <SpaceAvatar setAvatar={setAvatar} avatarDisabled={busy} />
+
+        <Field
+            name="spaceName"
+            label={_t("Name")}
+            autoFocus={true}
+            value={name}
+            onChange={ev => {
+                const newName = ev.target.value;
+                if (!alias || alias === nameToAlias(name, domain)) {
+                    setAlias(nameToAlias(newName, domain));
+                }
+                setName(newName);
+            }}
+            ref={nameFieldRef}
+            onValidate={spaceNameValidator}
+            disabled={busy}
+        />
+
+        { showAliasField
+            ? <RoomAliasField
+                ref={aliasFieldRef}
+                onChange={setAlias}
+                domain={domain}
+                value={alias}
+                placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")}
+                label={_t("Address")}
+                disabled={busy}
+            />
+            : null
+        }
+
+        <Field
+            name="spaceTopic"
+            element="textarea"
+            label={_t("Description")}
+            value={topic}
+            onChange={ev => setTopic(ev.target.value)}
+            rows={3}
+            disabled={busy}
+        />
+
+        { children }
+    </form>;
+};
+
+const SpaceCreateMenu = ({ onFinished }) => {
    const [visibility, setVisibility] = useState<Visibility>(null);
    const [busy, setBusy] = useState<boolean>(false);

@ -98,42 +172,26 @@ const SpaceCreateMenu = ({ onFinished }) => {
            return;
        }

-        const initialState: ICreateRoomStateEvent[] = [
-            {
-                type: EventType.RoomHistoryVisibility,
-                content: {
-                    "history_visibility": visibility === Visibility.Public ? "world_readable" : "invited",
-                },
-            },
-        ];
-        if (avatar) {
-            const url = await cli.uploadContent(avatar);
-
-            initialState.push({
-                type: EventType.RoomAvatar,
-                content: { url },
-            });
-        }
-
        try {
            await createRoom({
                createOpts: {
                    preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
                    name,
-                    creation_content: {
-                        [RoomCreateTypeField]: RoomType.Space,
-                    },
-                    initial_state: initialState,
                    power_level_content_override: {
                        // Only allow Admins to write to the timeline to prevent hidden sync spam
                        events_default: 100,
-                        ...Visibility.Public ? { invite: 0 } : {},
+                        ...visibility === Visibility.Public ? { invite: 0 } : {},
                    },
                    room_alias_name: visibility === Visibility.Public && alias
                        ? alias.substr(1, alias.indexOf(":") - 1)
                        : undefined,
                    topic,
                },
+                avatar,
+                roomType: RoomType.Space,
+                historyVisibility: visibility === Visibility.Public
+                    ? HistoryVisibility.WorldReadable
+                    : HistoryVisibility.Invited,
                spinner: false,
                encryption: false,
                andView: true,
@ -171,7 +229,6 @@ const SpaceCreateMenu = ({ onFinished }) => {
            <SpaceFeedbackPrompt onClick={onFinished} />
        </React.Fragment>;
    } else {
-        const domain = cli.getDomain();
        body = <React.Fragment>
            <AccessibleTooltipButton
                className="mx_SpaceCreateMenu_back"
@ -192,49 +249,20 @@ const SpaceCreateMenu = ({ onFinished }) => {
                }
            </p>

-            <form className="mx_SpaceBasicSettings" onSubmit={onSpaceCreateClick}>
-                <SpaceAvatar setAvatar={setAvatar} avatarDisabled={busy} />
-
-                <Field
-                    name="spaceName"
-                    label={_t("Name")}
-                    autoFocus={true}
-                    value={name}
-                    onChange={ev => {
-                        const newName = ev.target.value;
-                        if (!alias || alias === nameToAlias(name, domain)) {
-                            setAlias(nameToAlias(newName, domain));
-                        }
-                        setName(newName);
-                    }}
-                    ref={spaceNameField}
-                    onValidate={spaceNameValidator}
-                    disabled={busy}
-                />
-
-                { visibility === Visibility.Public
-                    ? <RoomAliasField
-                        ref={spaceAliasField}
-                        onChange={setAlias}
-                        domain={domain}
-                        value={alias}
-                        placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")}
-                        label={_t("Address")}
-                        disabled={busy}
-                    />
-                    : null
-                }
-
-                <Field
-                    name="spaceTopic"
-                    element="textarea"
-                    label={_t("Description")}
-                    value={topic}
-                    onChange={ev => setTopic(ev.target.value)}
-                    rows={3}
-                    disabled={busy}
-                />
-            </form>
+            <SpaceCreateForm
+                busy={busy}
+                onSubmit={onSpaceCreateClick}
+                setAvatar={setAvatar}
+                name={name}
+                setName={setName}
+                nameFieldRef={spaceNameField}
+                topic={topic}
+                setTopic={setTopic}
+                alias={alias}
+                setAlias={setAlias}
+                showAliasField={visibility === Visibility.Public}
+                aliasFieldRef={spaceAliasField}
+            />

            <AccessibleButton kind="primary" onClick={onSpaceCreateClick} disabled={busy}>
                { busy ? _t("Creating...") : _t("Create") }
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@ -35,6 +35,7 @@ import {
    shouldShowSpaceSettings,
    showAddExistingRooms,
    showCreateNewRoom,
+    showCreateNewSubspace,
    showSpaceInvite,
    showSpaceSettings,
 } from "../../../utils/space";
@ -49,6 +50,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
+import { BetaPill } from "../beta/BetaCard";

 interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
    space?: Room;
@ -232,6 +234,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
        this.setState({ contextMenuPosition: null }); // also close the menu
    };

+    private onNewSubspaceClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        showCreateNewSubspace(this.props.space);
+        this.setState({ contextMenuPosition: null }); // also close the menu
+    };
+
    private onMembersClick = (ev: ButtonEvent) => {
        ev.preventDefault();
        ev.stopPropagation();
@ -316,6 +326,13 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                        label={_t("Add existing room")}
                        onClick={this.onAddExistingRoomClick}
                    />
+                    <IconizedContextMenuOption
+                        iconClassName="mx_SpacePanel_iconPlus"
+                        label={_t("Add space")}
+                        onClick={this.onNewSubspaceClick}
+                    >
+                        <BetaPill />
+                    </IconizedContextMenuOption>
                </IconizedContextMenuOptionList>;
            }

--- a/src/components/views/voip/AudioFeed.tsx
+++ b/src/components/views/voip/AudioFeed.tsx
@ -23,9 +23,21 @@ interface IProps {
    feed: CallFeed;
 }

-export default class AudioFeed extends React.Component<IProps> {
+interface IState {
+    audioMuted: boolean;
+}
+
+export default class AudioFeed extends React.Component<IProps, IState> {
    private element = createRef<HTMLAudioElement>();

+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            audioMuted: this.props.feed.isAudioMuted(),
+        };
+    }
+
    componentDidMount() {
        MediaDeviceHandler.instance.addListener(
            MediaDeviceHandlerEvent.AudioOutputChanged,
@ -62,6 +74,7 @@ export default class AudioFeed extends React.Component<IProps> {

    private playMedia() {
        const element = this.element.current;
+        if (!element) return;
        this.onAudioOutputChanged(MediaDeviceHandler.getAudioOutput());
        element.muted = false;
        element.srcObject = this.props.feed.stream;
@ -85,6 +98,7 @@ export default class AudioFeed extends React.Component<IProps> {

    private stopMedia() {
        const element = this.element.current;
+        if (!element) return;

        element.pause();
        element.src = null;
@ -96,10 +110,16 @@ export default class AudioFeed extends React.Component<IProps> {
    }

    private onNewStream = () => {
+        this.setState({
+            audioMuted: this.props.feed.isAudioMuted(),
+        });
        this.playMedia();
    };

    render() {
+        // Do not render the audio element if there is no audio track
+        if (this.state.audioMuted) return null;
+
        return (
            <audio ref={this.element} />
        );
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -32,6 +33,10 @@ import { avatarUrlForMember } from '../../../Avatar';
 import DialpadContextMenu from '../context_menus/DialpadContextMenu';
 import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker";
+import Modal from '../../../Modal';
+import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
+import CallViewSidebar from './CallViewSidebar';

 interface IProps {
        // The call for us to display
@ -59,11 +64,15 @@ interface IState {
    isRemoteOnHold: boolean;
    micMuted: boolean;
    vidMuted: boolean;
+    screensharing: boolean;
    callState: CallState;
    controlsVisible: boolean;
+    hoveringControls: boolean;
    showMoreMenu: boolean;
    showDialpad: boolean;
-    feeds: CallFeed[];
+    primaryFeed: CallFeed;
+    secondaryFeeds: Array<CallFeed>;
+    sidebarShown: boolean;
 }

 function getFullScreenElement() {
@ -94,7 +103,7 @@ function exitFullscreen() {
    if (exitMethod) exitMethod.call(document);
 }

-const CONTROLS_HIDE_DELAY = 1000;
+const CONTROLS_HIDE_DELAY = 2000;
 // Height of the header duplicated from CSS because we need to subtract it from our max
 // height to get the max height of the video
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
@ -110,16 +119,22 @@ export default class CallView extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);

+        const { primary, secondary } = this.getOrderedFeeds(this.props.call.getFeeds());
+
        this.state = {
            isLocalOnHold: this.props.call.isLocalOnHold(),
            isRemoteOnHold: this.props.call.isRemoteOnHold(),
            micMuted: this.props.call.isMicrophoneMuted(),
            vidMuted: this.props.call.isLocalVideoMuted(),
+            screensharing: this.props.call.isScreensharing(),
            callState: this.props.call.state,
            controlsVisible: true,
+            hoveringControls: false,
            showMoreMenu: false,
            showDialpad: false,
-            feeds: this.props.call.getFeeds(),
+            primaryFeed: primary,
+            secondaryFeeds: secondary,
+            sidebarShown: true,
        };

        this.updateCallListeners(null, this.props.call);
@ -194,7 +209,11 @@ export default class CallView extends React.Component<IProps, IState> {
    };

    private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
-        this.setState({ feeds: newFeeds });
+        const { primary, secondary } = this.getOrderedFeeds(newFeeds);
+        this.setState({
+            primaryFeed: primary,
+            secondaryFeeds: secondary,
+        });
    };

    private onCallLocalHoldUnhold = () => {
@ -227,6 +246,7 @@ export default class CallView extends React.Component<IProps, IState> {
    };

    private onControlsHideTimer = () => {
+        if (this.state.hoveringControls || this.state.showDialpad || this.state.showMoreMenu) return;
        this.controlsHideTimer = null;
        this.setState({
            controlsVisible: false,
@ -237,7 +257,30 @@ export default class CallView extends React.Component<IProps, IState> {
        this.showControls();
    };

-    private showControls() {
+    private getOrderedFeeds(feeds: Array<CallFeed>): { primary: CallFeed, secondary: Array<CallFeed> } {
+        let primary;
+
+        // Try to use a screensharing as primary, a remote one if possible
+        const screensharingFeeds = feeds.filter((feed) => feed.purpose === SDPStreamMetadataPurpose.Screenshare);
+        primary = screensharingFeeds.find((feed) => !feed.isLocal()) || screensharingFeeds[0];
+        // If we didn't find remote screen-sharing stream, try to find any remote stream
+        if (!primary) {
+            primary = feeds.find((feed) => !feed.isLocal());
+        }
+
+        const secondary = [...feeds];
+        // Remove the primary feed from the array
+        if (primary) secondary.splice(secondary.indexOf(primary), 1);
+        secondary.sort((a, b) => {
+            if (a.isLocal() && !b.isLocal()) return -1;
+            if (!a.isLocal() && b.isLocal()) return 1;
+            return 0;
+        });
+
+        return { primary, secondary };
+    }
+
+    private showControls(): void {
        if (this.state.showMoreMenu || this.state.showDialpad) return;

        if (!this.state.controlsVisible) {
@ -251,73 +294,62 @@ export default class CallView extends React.Component<IProps, IState> {
        this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
    }

-    private onDialpadClick = () => {
+    private onDialpadClick = (): void => {
        if (!this.state.showDialpad) {
-            if (this.controlsHideTimer) {
-                clearTimeout(this.controlsHideTimer);
-                this.controlsHideTimer = null;
-            }
-
-            this.setState({
-                showDialpad: true,
-                controlsVisible: true,
-            });
+            this.setState({ showDialpad: true });
+            this.showControls();
        } else {
-            if (this.controlsHideTimer !== null) {
-                clearTimeout(this.controlsHideTimer);
-            }
-            this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
-
-            this.setState({
-                showDialpad: false,
-            });
+            this.setState({ showDialpad: false });
        }
    };

-    private onMicMuteClick = () => {
+    private onMicMuteClick = (): void => {
        const newVal = !this.state.micMuted;

        this.props.call.setMicrophoneMuted(newVal);
        this.setState({ micMuted: newVal });
    };

-    private onVidMuteClick = () => {
+    private onVidMuteClick = (): void => {
        const newVal = !this.state.vidMuted;

        this.props.call.setLocalVideoMuted(newVal);
        this.setState({ vidMuted: newVal });
    };

-    private onMoreClick = () => {
-        if (this.controlsHideTimer) {
-            clearTimeout(this.controlsHideTimer);
-            this.controlsHideTimer = null;
-        }
+    private onScreenshareClick = async (): Promise<void> => {
+        const isScreensharing = await this.props.call.setScreensharingEnabled(
+            !this.state.screensharing,
+            async (): Promise<DesktopCapturerSource> => {
+                const { finished } = Modal.createDialog(DesktopCapturerSourcePicker);
+                const [source] = await finished;
+                return source;
+            },
+        );

        this.setState({
-            showMoreMenu: true,
-            controlsVisible: true,
+            sidebarShown: true,
+            screensharing: isScreensharing,
        });
    };

-    private closeDialpad = () => {
-        this.setState({
-            showDialpad: false,
-        });
-        this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
+    private onMoreClick = (): void => {
+        this.setState({ showMoreMenu: true });
+        this.showControls();
    };

-    private closeContextMenu = () => {
-        this.setState({
-            showMoreMenu: false,
-        });
-        this.controlsHideTimer = window.setTimeout(this.onControlsHideTimer, CONTROLS_HIDE_DELAY);
+    private closeDialpad = (): void => {
+        this.setState({ showDialpad: false });
+    };
+
+    private closeContextMenu = (): void => {
+        this.setState({ showMoreMenu: false });
    };

    // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
    // Note that this assumes we always have a CallView on screen at any given time
    // CallHandler would probably be a better place for this
-    private onNativeKeyDown = ev => {
+    private onNativeKeyDown = (ev): void => {
        let handled = false;
        const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);

@ -347,7 +379,16 @@ export default class CallView extends React.Component<IProps, IState> {
        }
    };

-    private onRoomAvatarClick = () => {
+    private onCallControlsMouseEnter = (): void => {
+        this.setState({ hoveringControls: true });
+        this.showControls();
+    };
+
+    private onCallControlsMouseLeave = (): void => {
+        this.setState({ hoveringControls: false });
+    };
+
+    private onRoomAvatarClick = (): void => {
        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
        dis.dispatch({
            action: 'view_room',
@ -355,7 +396,7 @@ export default class CallView extends React.Component<IProps, IState> {
        });
    };

-    private onSecondaryRoomAvatarClick = () => {
+    private onSecondaryRoomAvatarClick = (): void => {
        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);

        dis.dispatch({
@ -364,50 +405,30 @@ export default class CallView extends React.Component<IProps, IState> {
        });
    };

-    private onCallResumeClick = () => {
+    private onCallResumeClick = (): void => {
        const userFacingRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
        CallHandler.sharedInstance().setActiveCallRoomId(userFacingRoomId);
    };

-    private onTransferClick = () => {
+    private onTransferClick = (): void => {
        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
        this.props.call.transferToCall(transfereeCall);
    };

-    public render() {
-        const client = MatrixClientPeg.get();
-        const callRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
-        const secondaryCallRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
-        const callRoom = client.getRoom(callRoomId);
-        const secCallRoom = this.props.secondaryCall ? client.getRoom(secondaryCallRoomId) : null;
+    private onHangupClick = (): void => {
+        dis.dispatch({
+            action: 'hangup',
+            room_id: CallHandler.sharedInstance().roomIdForCall(this.props.call),
+        });
+    };

-        let dialPad;
-        let contextMenu;
-
-        if (this.state.showDialpad) {
-            dialPad = <DialpadContextMenu
-                {...alwaysAboveRightOf(
-                    this.dialpadButton.current.getBoundingClientRect(),
-                    ChevronFace.None,
-                    CONTEXT_MENU_VPADDING,
-                )}
-                onFinished={this.closeDialpad}
-                call={this.props.call}
-            />;
-        }
-
-        if (this.state.showMoreMenu) {
-            contextMenu = <CallContextMenu
-                {...alwaysAboveLeftOf(
-                    this.contextMenuButton.current.getBoundingClientRect(),
-                    ChevronFace.None,
-                    CONTEXT_MENU_VPADDING,
-                )}
-                onFinished={this.closeContextMenu}
-                call={this.props.call}
-            />;
-        }
+    private onToggleSidebar = (): void => {
+        this.setState({
+            sidebarShown: !this.state.sidebarShown,
+        });
+    };

+    private renderCallControls(): JSX.Element {
        const micClasses = classNames({
            mx_CallView_callControls_button: true,
            mx_CallView_callControls_button_micOn: !this.state.micMuted,
@ -420,6 +441,18 @@ export default class CallView extends React.Component<IProps, IState> {
            mx_CallView_callControls_button_vidOff: this.state.vidMuted,
        });

+        const screensharingClasses = classNames({
+            mx_CallView_callControls_button: true,
+            mx_CallView_callControls_button_screensharingOn: this.state.screensharing,
+            mx_CallView_callControls_button_screensharingOff: !this.state.screensharing,
+        });
+
+        const sidebarButtonClasses = classNames({
+            mx_CallView_callControls_button: true,
+            mx_CallView_callControls_button_sidebarOn: this.state.sidebarShown,
+            mx_CallView_callControls_button_sidebarOff: !this.state.sidebarShown,
+        });
+
        // Put the other states of the mic/video icons in the document to make sure they're cached
        // (otherwise the icon disappears briefly when toggled)
        const micCacheClasses = classNames({
@ -441,59 +474,121 @@ export default class CallView extends React.Component<IProps, IState> {
            mx_CallView_callControls_hidden: !this.state.controlsVisible,
        });

-        const vidMuteButton = this.props.call.type === CallType.Video ? <AccessibleButton
-            className={vidClasses}
-            onClick={this.onVidMuteClick}
-        /> : null;
+        // We don't support call upgrades (yet) so hide the video mute button in voice calls
+        let vidMuteButton;
+        if (this.props.call.type === CallType.Video) {
+            vidMuteButton = (
+                <AccessibleButton
+                    className={vidClasses}
+                    onClick={this.onVidMuteClick}
+                />
+            );
+        }
+
+        // Screensharing is possible, if we can send a second stream and
+        // identify it using SDPStreamMetadata or if we can replace the already
+        // existing usermedia track by a screensharing track. We also need to be
+        // connected to know the state of the other side
+        let screensharingButton;
+        if (
+            (this.props.call.opponentSupportsSDPStreamMetadata() || this.props.call.type === CallType.Video) &&
+            this.props.call.state === CallState.Connected
+        ) {
+            screensharingButton = (
+                <AccessibleButton
+                    className={screensharingClasses}
+                    onClick={this.onScreenshareClick}
+                />
+            );
+        }
+
+        // To show the sidebar we need secondary feeds, if we don't have them,
+        // we can hide this button. If we are in PiP, sidebar is also hidden, so
+        // we can hide the button too
+        let sidebarButton;
+        if (
+            !this.props.pipMode &&
+            (
+                this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare ||
+                this.props.call.isScreensharing()
+            )
+        ) {
+            sidebarButton = (
+                <AccessibleButton
+                    className={sidebarButtonClasses}
+                    onClick={this.onToggleSidebar}
+                />
+            );
+        }

        // The dial pad & 'more' button actions are only relevant in a connected call
-        // When not connected, we have to put something there to make the flexbox alignment correct
-        const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
-            className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
-            inputRef={this.dialpadButton}
-            onClick={this.onDialpadClick}
-            isExpanded={this.state.showDialpad}
-        /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_dialpad_hidden" />;
+        let contextMenuButton;
+        if (this.state.callState === CallState.Connected) {
+            contextMenuButton = (
+                <ContextMenuButton
+                    className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
+                    onClick={this.onMoreClick}
+                    inputRef={this.contextMenuButton}
+                    isExpanded={this.state.showMoreMenu}
+                />
+            );
+        }
+        let dialpadButton;
+        if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
+            dialpadButton = (
+                <ContextMenuButton
+                    className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
+                    inputRef={this.dialpadButton}
+                    onClick={this.onDialpadClick}
+                    isExpanded={this.state.showDialpad}
+                />
+            );
+        }

-        const contextMenuButton = this.state.callState === CallState.Connected ? <ContextMenuButton
-            className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
-            onClick={this.onMoreClick}
-            inputRef={this.contextMenuButton}
-            isExpanded={this.state.showMoreMenu}
-        /> : <div className="mx_CallView_callControls_button mx_CallView_callControls_button_more_hidden" />;
-
-        // in the near future, the dial pad button will go on the left. For now, it's the nothing button
-        // because something needs to have margin-right: auto to make the alignment correct.
-        const callControls = <div className={callControlsClasses}>
-            { dialpadButton }
-            <AccessibleButton
-                className={micClasses}
-                onClick={this.onMicMuteClick}
-            />
-            <AccessibleButton
-                className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
-                onClick={() => {
-                    dis.dispatch({
-                        action: 'hangup',
-                        room_id: callRoomId,
-                    });
-                }}
-            />
-            { vidMuteButton }
-            <div className={micCacheClasses} />
-            <div className={vidCacheClasses} />
-            { contextMenuButton }
-        </div>;
+        return (
+            <div
+                className={callControlsClasses}
+                onMouseEnter={this.onCallControlsMouseEnter}
+                onMouseLeave={this.onCallControlsMouseLeave}
+            >
+                { dialpadButton }
+                <AccessibleButton
+                    className={micClasses}
+                    onClick={this.onMicMuteClick}
+                />
+                { vidMuteButton }
+                <div className={micCacheClasses} />
+                <div className={vidCacheClasses} />
+                { screensharingButton }
+                { sidebarButton }
+                { contextMenuButton }
+                <AccessibleButton
+                    className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
+                    onClick={this.onHangupClick}
+                />
+            </div>
+        );
+    }

+    public render() {
+        const client = MatrixClientPeg.get();
+        const callRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call);
+        const secondaryCallRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.secondaryCall);
+        const callRoom = client.getRoom(callRoomId);
+        const secCallRoom = this.props.secondaryCall ? client.getRoom(secondaryCallRoomId) : null;
        const avatarSize = this.props.pipMode ? 76 : 160;
-
-        // The 'content' for the call, ie. the videos for a video call and profile picture
-        // for voice calls (fills the bg)
-        let contentView: React.ReactNode;
-
        const transfereeCall = CallHandler.sharedInstance().getTransfereeForCallId(this.props.call.callId);
        const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
+        const isScreensharing = this.props.call.isScreensharing();
+        const sidebarShown = this.state.sidebarShown;
+        const someoneIsScreensharing = this.props.call.getFeeds().some((feed) => {
+            return feed.purpose === SDPStreamMetadataPurpose.Screenshare;
+        });
+        const isVideoCall = this.props.call.type === CallType.Video;
+
+        let contentView: React.ReactNode;
        let holdTransferContent;
+
        if (transfereeCall) {
            const transferTargetRoom = MatrixClientPeg.get().getRoom(
                CallHandler.sharedInstance().roomIdForCall(this.props.call),
@ -539,9 +634,25 @@ export default class CallView extends React.Component<IProps, IState> {
            </div>;
        }

+        let sidebar;
+        if (
+            !isOnHold &&
+            !transfereeCall &&
+            sidebarShown &&
+            (isVideoCall || someoneIsScreensharing)
+        ) {
+            sidebar = (
+                <CallViewSidebar
+                    feeds={this.state.secondaryFeeds}
+                    call={this.props.call}
+                    pipMode={this.props.pipMode}
+                />
+            );
+        }
+
        // This is a bit messy. I can't see a reason to have two onHold/transfer screens
        if (isOnHold || transfereeCall) {
-            if (this.props.call.type === CallType.Video) {
+            if (isVideoCall) {
                const containerClasses = classNames({
                    mx_CallView_content: true,
                    mx_CallView_video: true,
@ -560,7 +671,7 @@ export default class CallView extends React.Component<IProps, IState> {
                    <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
                        { onHoldBackground }
                        { holdTransferContent }
-                        { callControls }
+                        { this.renderCallControls() }
                    </div>
                );
            } else {
@ -585,7 +696,7 @@ export default class CallView extends React.Component<IProps, IState> {
                            </div>
                        </div>
                        { holdTransferContent }
-                        { callControls }
+                        { this.renderCallControls() }
                    </div>
                );
            }
@ -599,77 +710,91 @@ export default class CallView extends React.Component<IProps, IState> {
                mx_CallView_voice: true,
            });

-            const feeds = this.props.call.getLocalFeeds().map((feed, i) => {
-                // Here we check to hide local audio feeds to achieve the same UI/UX
-                // as before. But once again this might be subject to change
-                if (feed.isVideoMuted()) return;
-                return (
-                    <VideoFeed
-                        key={i}
-                        feed={feed}
-                        call={this.props.call}
-                        pipMode={this.props.pipMode}
-                        onResize={this.props.onResize}
-                    />
-                );
-            });
-
            // Saying "Connecting" here isn't really true, but the best thing
            // I can come up with, but this might be subject to change as well
-            contentView = <div className={classes} onMouseMove={this.onMouseMove}>
-                { feeds }
-                <div className="mx_CallView_voice_avatarsContainer">
-                    <div className="mx_CallView_voice_avatarContainer" style={{ width: avatarSize, height: avatarSize }}>
-                        <RoomAvatar
-                            room={callRoom}
-                            height={avatarSize}
-                            width={avatarSize}
-                        />
+            contentView = (
+                <div
+                    className={classes}
+                    onMouseMove={this.onMouseMove}
+                >
+                    { sidebar }
+                    <div className="mx_CallView_voice_avatarsContainer">
+                        <div
+                            className="mx_CallView_voice_avatarContainer"
+                            style={{ width: avatarSize, height: avatarSize }}
+                        >
+                            <RoomAvatar
+                                room={callRoom}
+                                height={avatarSize}
+                                width={avatarSize}
+                            />
+                        </div>
                    </div>
+                    <div className="mx_CallView_holdTransferContent">{ _t("Connecting") }</div>
+                    { this.renderCallControls() }
                </div>
-                <div className="mx_CallView_holdTransferContent">{ _t("Connecting") }</div>
-                { callControls }
-            </div>;
+            );
        } else {
            const containerClasses = classNames({
                mx_CallView_content: true,
                mx_CallView_video: true,
            });

-            // TODO: Later the CallView should probably be reworked to support
-            // any number of feeds but now we can always expect there to be two
-            // feeds. This is because the js-sdk ignores any new incoming streams
-            const feeds = this.state.feeds.map((feed, i) => {
-                // Here we check to hide local audio feeds to achieve the same UI/UX
-                // as before. But once again this might be subject to change
-                if (feed.isVideoMuted() && feed.isLocal()) return;
-                return (
+            let toast;
+            if (someoneIsScreensharing) {
+                const presentingClasses = classNames({
+                    mx_CallView_presenting: true,
+                    mx_CallView_presenting_hidden: !this.state.controlsVisible,
+                });
+                const sharerName = this.state.primaryFeed.getMember().name;
+                let text = isScreensharing
+                    ? _t("You are presenting")
+                    : _t('%(sharerName)s is presenting', { sharerName });
+                if (!this.state.sidebarShown && isVideoCall) {
+                    text += " • " + (this.props.call.isLocalVideoMuted()
+                        ? _t("Your camera is turned off")
+                        : _t("Your camera is still enabled"));
+                }
+
+                toast = (
+                    <div className={presentingClasses}>
+                        { text }
+                    </div>
+                );
+            }
+
+            contentView = (
+                <div
+                    className={containerClasses}
+                    ref={this.contentRef}
+                    onMouseMove={this.onMouseMove}
+                >
+                    { toast }
+                    { sidebar }
                    <VideoFeed
-                        key={i}
-                        feed={feed}
+                        feed={this.state.primaryFeed}
                        call={this.props.call}
                        pipMode={this.props.pipMode}
                        onResize={this.props.onResize}
+                        primary={true}
                    />
-                );
-            });
-
-            contentView = <div className={containerClasses} ref={this.contentRef} onMouseMove={this.onMouseMove}>
-                { feeds }
-                { callControls }
-            </div>;
+                    { this.renderCallControls() }
+                </div>
+            );
        }

-        const callTypeText = this.props.call.type === CallType.Video ? _t("Video Call") : _t("Voice Call");
+        const callTypeText = isVideoCall ? _t("Video Call") : _t("Voice Call");
        let myClassName;

        let fullScreenButton;
-        if (this.props.call.type === CallType.Video && !this.props.pipMode) {
-            fullScreenButton = <div
-                className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
-                onClick={this.onFullscreenClick}
-                title={_t("Fill Screen")}
-            />;
+        if (!this.props.pipMode) {
+            fullScreenButton = (
+                <div
+                    className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
+                    onClick={this.onFullscreenClick}
+                    title={_t("Fill Screen")}
+                />
+            );
        }

        let expandButton;
@ -686,10 +811,15 @@ export default class CallView extends React.Component<IProps, IState> {
            { expandButton }
        </div>;

+        const callTypeIconClassName = classNames("mx_CallView_header_callTypeIcon", {
+            "mx_CallView_header_callTypeIcon_voice": !isVideoCall,
+            "mx_CallView_header_callTypeIcon_video": isVideoCall,
+        });
+
        let header: React.ReactNode;
        if (!this.props.pipMode) {
            header = <div className="mx_CallView_header">
-                <div className="mx_CallView_header_phoneIcon" />
+                <div className={callTypeIconClassName} />
                <span className="mx_CallView_header_callType">{ callTypeText }</span>
                { headerControls }
            </div>;
@ -728,6 +858,32 @@ export default class CallView extends React.Component<IProps, IState> {
            myClassName = 'mx_CallView_pip';
        }

+        let dialPad;
+        if (this.state.showDialpad) {
+            dialPad = <DialpadContextMenu
+                {...alwaysAboveRightOf(
+                    this.dialpadButton.current.getBoundingClientRect(),
+                    ChevronFace.None,
+                    CONTEXT_MENU_VPADDING,
+                )}
+                onFinished={this.closeDialpad}
+                call={this.props.call}
+            />;
+        }
+
+        let contextMenu;
+        if (this.state.showMoreMenu) {
+            contextMenu = <CallContextMenu
+                {...alwaysAboveLeftOf(
+                    this.contextMenuButton.current.getBoundingClientRect(),
+                    ChevronFace.None,
+                    CONTEXT_MENU_VPADDING,
+                )}
+                onFinished={this.closeContextMenu}
+                call={this.props.call}
+            />;
+        }
+
        return <div className={"mx_CallView " + myClassName}>
            { header }
            { contentView }
--- a/src/components/views/voip/CallViewSidebar.tsx
+++ b/src/components/views/voip/CallViewSidebar.tsx
@ -0,0 +1,53 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import VideoFeed from "./VideoFeed";
+import classNames from "classnames";
+
+interface IProps {
+    feeds: Array<CallFeed>;
+    call: MatrixCall;
+    pipMode: boolean;
+}
+
+export default class CallViewSidebar extends React.Component<IProps> {
+    render() {
+        const feeds = this.props.feeds.map((feed) => {
+            return (
+                <VideoFeed
+                    key={feed.stream.id}
+                    feed={feed}
+                    call={this.props.call}
+                    primary={false}
+                    pipMode={this.props.pipMode}
+                />
+            );
+        });
+
+        const className = classNames("mx_CallViewSidebar", {
+            mx_CallViewSidebar_pipMode: this.props.pipMode,
+        });
+
+        return (
+            <div className={className}>
+                { feeds }
+            </div>
+        );
+    }
+}
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@ -16,7 +16,7 @@ limitations under the License.

 import classnames from 'classnames';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
-import React, { createRef } from 'react';
+import React from 'react';
 import SettingsStore from "../../../settings/SettingsStore";
 import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
@ -37,6 +37,8 @@ interface IProps {
    // a callback which is called when the video element is resized
    // due to a change in video metadata
    onResize?: (e: Event) => void;
+
+    primary: boolean;
 }

 interface IState {
@ -46,7 +48,7 @@ interface IState {

@replaceableComponent("views.voip.VideoFeed")
 export default class VideoFeed extends React.Component<IProps, IState> {
-    private element = createRef<HTMLVideoElement>();
+    private element: HTMLVideoElement;

    constructor(props: IProps) {
        super(props);
@ -58,19 +60,50 @@ export default class VideoFeed extends React.Component<IProps, IState> {
    }

    componentDidMount() {
-        this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
-        this.element.current?.addEventListener('resize', this.onResize);
+        this.updateFeed(null, this.props.feed);
        this.playMedia();
    }

    componentWillUnmount() {
-        this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
-        this.element.current?.removeEventListener('resize', this.onResize);
-        this.stopMedia();
+        this.updateFeed(this.props.feed, null);
+    }
+
+    componentDidUpdate(prevProps: IProps) {
+        this.updateFeed(prevProps.feed, this.props.feed);
+    }
+
+    static getDerivedStateFromProps(props: IProps) {
+        return {
+            audioMuted: props.feed.isAudioMuted(),
+            videoMuted: props.feed.isVideoMuted(),
+        };
+    }
+
+    private setElementRef = (element: HTMLVideoElement): void => {
+        if (!element) {
+            this.element?.removeEventListener('resize', this.onResize);
+            return;
+        }
+
+        this.element = element;
+        element.addEventListener('resize', this.onResize);
+    };
+
+    private updateFeed(oldFeed: CallFeed, newFeed: CallFeed) {
+        if (oldFeed === newFeed) return;
+
+        if (oldFeed) {
+            this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
+            this.stopMedia();
+        }
+        if (newFeed) {
+            this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
+            this.playMedia();
+        }
    }

    private playMedia() {
-        const element = this.element.current;
+        const element = this.element;
        if (!element) return;
        // We play audio in AudioFeed, not here
        element.muted = true;
@ -93,7 +126,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
    }

    private stopMedia() {
-        const element = this.element.current;
+        const element = this.element;
        if (!element) return;

        element.pause();
@ -122,8 +155,6 @@ export default class VideoFeed extends React.Component<IProps, IState> {
    render() {
        const videoClasses = {
            mx_VideoFeed: true,
-            mx_VideoFeed_local: this.props.feed.isLocal(),
-            mx_VideoFeed_remote: !this.props.feed.isLocal(),
            mx_VideoFeed_voice: this.state.videoMuted,
            mx_VideoFeed_video: !this.state.videoMuted,
            mx_VideoFeed_mirror: (
@ -132,9 +163,15 @@ export default class VideoFeed extends React.Component<IProps, IState> {
            ),
        };

+        const { pipMode, primary } = this.props;
+
        if (this.state.videoMuted) {
            const member = this.props.feed.getMember();
-            const avatarSize = this.props.pipMode ? 76 : 160;
+            let avatarSize;
+            if (pipMode && primary) avatarSize = 76;
+            else if (pipMode && !primary) avatarSize = 16;
+            else if (!pipMode && primary) avatarSize = 160;
+            else; // TBD

            return (
                <div className={classnames(videoClasses)}>
@ -147,7 +184,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
            );
        } else {
            return (
-                <video className={classnames(videoClasses)} ref={this.element} />
+                <video className={classnames(videoClasses)} ref={this.setElementRef} />
            );
        }
    }
--- a/src/createRoom.ts
+++ b/src/createRoom.ts
@ -18,9 +18,15 @@ limitations under the License.
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomCreateTypeField, RoomType } from "matrix-js-sdk/src/@types/event";
 import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests";
-import { JoinRule, Preset, RestrictedAllowType, Visibility } from "matrix-js-sdk/src/@types/partials";
+import {
+    HistoryVisibility,
+    JoinRule,
+    Preset,
+    RestrictedAllowType,
+    Visibility,
+} from "matrix-js-sdk/src/@types/partials";

 import { MatrixClientPeg } from './MatrixClientPeg';
 import Modal from './Modal';
@ -52,6 +58,9 @@ export interface IOpts {
    inlineErrors?: boolean;
    andView?: boolean;
    associatedWithCommunity?: string;
+    avatar?: File | string; // will upload if given file, else mxcUrl is needed
+    roomType?: RoomType | string;
+    historyVisibility?: HistoryVisibility;
    parentSpace?: Room;
    joinRule?: JoinRule;
 }
@ -112,6 +121,13 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
        createOpts.is_direct = true;
    }

+    if (opts.roomType) {
+        createOpts.creation_content = {
+            ...createOpts.creation_content,
+            [RoomCreateTypeField]: opts.roomType,
+        };
+    }
+
    // By default, view the room after creating it
    if (opts.andView === undefined) {
        opts.andView = true;
@ -144,12 +160,11 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {

    if (opts.parentSpace) {
        createOpts.initial_state.push(makeSpaceParentEvent(opts.parentSpace, true));
-        createOpts.initial_state.push({
-            type: EventType.RoomHistoryVisibility,
-            content: {
-                "history_visibility": createOpts.preset === Preset.PublicChat ? "world_readable" : "invited",
-            },
-        });
+        if (!opts.historyVisibility) {
+            opts.historyVisibility = createOpts.preset === Preset.PublicChat
+                ? HistoryVisibility.WorldReadable
+                : HistoryVisibility.Invited;
+        }

        if (opts.joinRule === JoinRule.Restricted) {
            if (SpaceStore.instance.restrictedJoinRuleSupport?.preferred) {
@ -176,6 +191,27 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
        });
    }

+    if (opts.avatar) {
+        let url = opts.avatar;
+        if (opts.avatar instanceof File) {
+            url = await client.uploadContent(opts.avatar);
+        }
+
+        createOpts.initial_state.push({
+            type: EventType.RoomAvatar,
+            content: { url },
+        });
+    }
+
+    if (opts.historyVisibility) {
+        createOpts.initial_state.push({
+            type: EventType.RoomHistoryVisibility,
+            content: {
+                "history_visibility": opts.historyVisibility,
+            },
+        });
+    }
+
    let modal;
    if (opts.spinner) modal = Modal.createDialog(Spinner, null, 'mx_Dialog_spinner');

--- a/src/customisations/WidgetVariables.ts
+++ b/src/customisations/WidgetVariables.ts
@ -0,0 +1,53 @@
+/*
+ * Copyright 2021 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Populate this class with the details of your customisations when copying it.
+import { ITemplateParams } from "matrix-widget-api";
+
+/**
+ * Provides a partial set of the variables needed to render any widget. If
+ * variables are missing or not provided then they will be filled with the
+ * application-determined defaults.
+ *
+ * This will not be called until after isReady() resolves.
+ * @returns {Partial<Omit<ITemplateParams, "widgetRoomId">>} The variables.
+ */
+function provideVariables(): Partial<Omit<ITemplateParams, "widgetRoomId">> {
+    return {};
+}
+
+/**
+ * Resolves to whether or not the customisation point is ready for variables
+ * to be provided. This will block widgets being rendered.
+ * @returns {Promise<boolean>} Resolves when ready.
+ */
+async function isReady(): Promise<void> {
+    return; // default no waiting
+}
+
+// This interface summarises all available customisation points and also marks
+// them all as optional. This allows customisers to only define and export the
+// customisations they need while still maintaining type safety.
+export interface IWidgetVariablesCustomisations {
+    provideVariables?: typeof provideVariables;
+
+    // If not provided, the app will assume that the customisation is always ready.
+    isReady?: typeof isReady;
+}
+
+// A real customisation module will define and export one or more of the
+// customisation points that make up the interface above.
+export const WidgetVariableCustomisations: IWidgetVariablesCustomisations = {};
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@ -193,4 +193,9 @@ export enum Action {
     * Switches space. Should be used with SwitchSpacePayload.
     */
    SwitchSpace = "switch_space",
+
+    /**
+     * Signals to the visible space hierarchy that a change has occurred an that it should refresh.
+     */
+    UpdateSpaceHierarchy = "update_space_hierarchy",
 }
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -52,7 +52,6 @@
    "A microphone and webcam are plugged in and set up correctly": "A microphone and webcam are plugged in and set up correctly",
    "Permission is granted to use the webcam": "Permission is granted to use the webcam",
    "No other application is using the webcam": "No other application is using the webcam",
-    "Unable to capture screen": "Unable to capture screen",
    "VoIP is unsupported": "VoIP is unsupported",
    "You cannot place VoIP calls in this browser.": "You cannot place VoIP calls in this browser.",
    "Too Many Calls": "Too Many Calls",
@ -798,9 +797,6 @@
    "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
    "Your feedback will help make spaces better. The more detail you can go into, the better.": "Your feedback will help make spaces better. The more detail you can go into, the better.",
    "Show all rooms in Home": "Show all rooms in Home",
-    "Show people in spaces": "Show people in spaces",
-    "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.": "If disabled, you can still add Direct Messages to Personal Spaces. If enabled, you'll automatically see everyone who is a member of the Space.",
-    "Show notification badges for People in Spaces": "Show notification badges for People in Spaces",
    "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
    "Send and receive voice messages": "Send and receive voice messages",
    "Render LaTeX maths in messages": "Render LaTeX maths in messages",
@ -903,6 +899,10 @@
    "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
    "%(peerName)s held the call": "%(peerName)s held the call",
    "Connecting": "Connecting",
+    "You are presenting": "You are presenting",
+    "%(sharerName)s is presenting": "%(sharerName)s is presenting",
+    "Your camera is turned off": "Your camera is turned off",
+    "Your camera is still enabled": "Your camera is still enabled",
    "Video Call": "Video Call",
    "Voice Call": "Voice Call",
    "Fill Screen": "Fill Screen",
@ -1005,6 +1005,8 @@
    "Name": "Name",
    "Description": "Description",
    "Please enter a name for the space": "Please enter a name for the space",
+    "e.g. my-space": "e.g. my-space",
+    "Address": "Address",
    "Create a space": "Create a space",
    "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.": "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.",
    "Public": "Public",
@ -1017,8 +1019,6 @@
    "Your private space": "Your private space",
    "Add some details to help people recognise it.": "Add some details to help people recognise it.",
    "You can change these anytime.": "You can change these anytime.",
-    "e.g. my-space": "e.g. my-space",
-    "Address": "Address",
    "Creating...": "Creating...",
    "Create": "Create",
    "All rooms": "All rooms",
@ -1056,6 +1056,7 @@
    "Leave space": "Leave space",
    "Create new room": "Create new room",
    "Add existing room": "Add existing room",
+    "Add space": "Add space",
    "Members": "Members",
    "Manage & explore rooms": "Manage & explore rooms",
    "Explore rooms": "Explore rooms",
@ -1570,6 +1571,8 @@
    "Unnamed room": "Unnamed room",
    "World readable": "World readable",
    "Guests can join": "Guests can join",
+    "Screen sharing is here!": "Screen sharing is here!",
+    "You can now share your screen by pressing the \"screen share\" button during a call. You can even do this in audio calls if both sides support it!": "You can now share your screen by pressing the \"screen share\" button during a call. You can even do this in audio calls if both sides support it!",
    "(~%(count)s results)|other": "(~%(count)s results)",
    "(~%(count)s results)|one": "(~%(count)s result)",
    "Join Room": "Join Room",
@ -1998,9 +2001,9 @@
    "Use the <a>Desktop app</a> to search encrypted messages": "Use the <a>Desktop app</a> to search encrypted messages",
    "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files",
    "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages",
-    "Share your screen": "Share your screen",
-    "Screens": "Screens",
-    "Windows": "Windows",
+    "Share entire screen": "Share entire screen",
+    "Application window": "Application window",
+    "Share content": "Share content",
    "Join": "Join",
    "No results": "No results",
    "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
@ -2108,17 +2111,20 @@
    "Add a new server...": "Add a new server...",
    "%(networkName)s rooms": "%(networkName)s rooms",
    "Matrix rooms": "Matrix rooms",
+    "Add existing space": "Add existing space",
+    "Want to add a new space instead?": "Want to add a new space instead?",
+    "Create a new space": "Create a new space",
+    "Search for spaces": "Search for spaces",
    "Not all selected were added": "Not all selected were added",
    "Adding rooms... (%(progress)s out of %(count)s)|other": "Adding rooms... (%(progress)s out of %(count)s)",
    "Adding rooms... (%(progress)s out of %(count)s)|one": "Adding room...",
-    "Filter your rooms and spaces": "Filter your rooms and spaces",
-    "Feeling experimental?": "Feeling experimental?",
-    "You can add existing spaces to a space.": "You can add existing spaces to a space.",
    "Direct Messages": "Direct Messages",
    "Space selection": "Space selection",
    "Add existing rooms": "Add existing rooms",
    "Want to add a new room instead?": "Want to add a new room instead?",
    "Create a new room": "Create a new room",
+    "Search for rooms": "Search for rooms",
+    "Adding spaces has moved.": "Adding spaces has moved.",
    "Matrix ID": "Matrix ID",
    "Matrix Room ID": "Matrix Room ID",
    "email address": "email address",
@ -2195,6 +2201,7 @@
    "Everyone in <SpaceName/> will be able to find and join this room.": "Everyone in <SpaceName/> will be able to find and join this room.",
    "You can change this at any time from room settings.": "You can change this at any time from room settings.",
    "Anyone will be able to find and join this room, not just members of <SpaceName/>.": "Anyone will be able to find and join this room, not just members of <SpaceName/>.",
+    "Anyone will be able to find and join this room.": "Anyone will be able to find and join this room.",
    "Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.",
    "You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.",
    "Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.",
@ -2205,13 +2212,22 @@
    "Create a room in %(communityName)s": "Create a room in %(communityName)s",
    "Create a public room": "Create a public room",
    "Create a private room": "Create a private room",
+    "Topic (optional)": "Topic (optional)",
+    "Room visibility": "Room visibility",
    "Private room (invite only)": "Private room (invite only)",
    "Public room": "Public room",
    "Visible to space members": "Visible to space members",
-    "Topic (optional)": "Topic (optional)",
-    "Room visibility": "Room visibility",
    "Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.",
    "Create Room": "Create Room",
+    "Anyone in <SpaceName/> will be able to find and join.": "Anyone in <SpaceName/> will be able to find and join.",
+    "Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Anyone will be able to find and join this space, not just members of <SpaceName/>.",
+    "Only people invited will be able to find and join this space.": "Only people invited will be able to find and join this space.",
+    "Add a space to a space you manage.": "Add a space to a space you manage.",
+    "Space visibility": "Space visibility",
+    "Private space (invite only)": "Private space (invite only)",
+    "Public space": "Public space",
+    "Want to add an existing space instead?": "Want to add an existing space instead?",
+    "Adding...": "Adding...",
    "Sign out": "Sign out",
    "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": "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",
    "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.": "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.",
@ -2811,7 +2827,6 @@
    "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.": "If you can't find the room you're looking for, ask for an invite or <a>create a new room</a>.",
    "Create room": "Create room",
    "Spaces are a beta feature.": "Spaces are a beta feature.",
-    "Public space": "Public space",
    "Private space": "Private space",
    "<inviter/> invites you": "<inviter/> invites you",
    "To view %(spaceName)s, turn on the <a>Spaces beta</a>": "To view %(spaceName)s, turn on the <a>Spaces beta</a>",
@ -2826,6 +2841,7 @@
    "Creating rooms...": "Creating rooms...",
    "What do you want to organise?": "What do you want to organise?",
    "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.": "Pick rooms or conversations to add. This is just a space for you, no one will be informed. You can add more later.",
+    "Search for rooms or spaces": "Search for rooms or spaces",
    "Share %(name)s": "Share %(name)s",
    "It's just you at the moment, it will be even better with others.": "It's just you at the moment, it will be even better with others.",
    "Go to my first room": "Go to my first room",
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@ -181,8 +181,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
            feedbackLabel: "spaces-feedback",
            extraSettings: [
                "feature_spaces.all_rooms",
-                "feature_spaces.space_member_dms",
-                "feature_spaces.space_dm_badges",
            ],
        },
    },
@ -192,20 +190,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
        default: true,
        controller: new ReloadOnChangeController(),
    },
-    "feature_spaces.space_member_dms": {
-        displayName: _td("Show people in spaces"),
-        description: _td("If disabled, you can still add Direct Messages to Personal Spaces. " +
-            "If enabled, you'll automatically see everyone who is a member of the Space."),
-        supportedLevels: LEVELS_FEATURE,
-        default: true,
-        controller: new ReloadOnChangeController(),
-    },
-    "feature_spaces.space_dm_badges": {
-        displayName: _td("Show notification badges for People in Spaces"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-        controller: new ReloadOnChangeController(),
-    },
    "feature_dnd": {
        isFeature: true,
        displayName: _td("Show options to enable 'Do not disturb' mode"),
--- a/src/stores/SpaceStore.tsx
+++ b/src/stores/SpaceStore.tsx
@ -72,8 +72,6 @@ const MAX_SUGGESTED_ROOMS = 20;
 // All of these settings cause the page to reload and can be costly if read frequently, so read them here only
 const spacesEnabled = SettingsStore.getValue("feature_spaces");
 const spacesTweakAllRoomsEnabled = SettingsStore.getValue("feature_spaces.all_rooms");
-const spacesTweakSpaceMemberDMsEnabled = SettingsStore.getValue("feature_spaces.space_member_dms");
-const spacesTweakSpaceDMBadgesEnabled = SettingsStore.getValue("feature_spaces.space_dm_badges");

 const homeSpaceKey = spacesTweakAllRoomsEnabled ? "ALL_ROOMS" : "HOME_SPACE";
 const getSpaceContextKey = (space?: Room) => `mx_space_context_${space?.roomId || homeSpaceKey}`;
@ -535,15 +533,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                const roomIds = new Set(childRooms.map(r => r.roomId));
                const space = this.matrixClient?.getRoom(spaceId);

-                if (spacesTweakSpaceMemberDMsEnabled) {
-                    // Add relevant DMs
-                    space?.getMembers().forEach(member => {
-                        if (member.membership !== "join" && member.membership !== "invite") return;
-                        DMRoomMap.shared().getDMRoomsForUserId(member.userId).forEach(roomId => {
-                            roomIds.add(roomId);
-                        });
+                // Add relevant DMs
+                space?.getMembers().forEach(member => {
+                    if (member.membership !== "join" && member.membership !== "invite") return;
+                    DMRoomMap.shared().getDMRoomsForUserId(member.userId).forEach(roomId => {
+                        roomIds.add(roomId);
                    });
-                }
+                });

                const newPath = new Set(parentPath).add(spaceId);
                childSpaces.forEach(childSpace => {
@ -568,14 +564,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
        this.spaceFilteredRooms.forEach((roomIds, s) => {
            // Update NotificationStates
            this.getNotificationState(s)?.setRooms(visibleRooms.filter(room => {
-                if (roomIds.has(room.roomId)) {
-                    if (s !== HOME_SPACE && spacesTweakSpaceDMBadgesEnabled) return true;
+                if (!roomIds.has(room.roomId)) return false;

-                    return !DMRoomMap.shared().getUserIdForRoomId(room.roomId)
-                        || RoomListStore.instance.getTagsForRoom(room).includes(DefaultTagID.Favourite);
+                if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
+                    return s === HOME_SPACE;
                }

-                return false;
+                return true;
            }));
        });
    }, 100, { trailing: true, leading: true });
@ -878,8 +873,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
 export default class SpaceStore {
    public static spacesEnabled = spacesEnabled;
    public static spacesTweakAllRoomsEnabled = spacesTweakAllRoomsEnabled;
-    public static spacesTweakSpaceMemberDMsEnabled = spacesTweakSpaceMemberDMsEnabled;
-    public static spacesTweakSpaceDMBadgesEnabled = spacesTweakSpaceDMBadgesEnabled;

    private static internalInstance = new SpaceStoreClass();

--- a/src/stores/notifications/SpaceNotificationState.ts
+++ b/src/stores/notifications/SpaceNotificationState.ts
@ -23,7 +23,7 @@ import { NOTIFICATION_STATE_UPDATE, NotificationState } from "./NotificationStat
 import { FetchRoomFn } from "./ListNotificationState";

 export class SpaceNotificationState extends NotificationState {
-    private rooms: Room[] = [];
+    public rooms: Room[] = []; // exposed only for tests
    private states: { [spaceId: string]: RoomNotificationState } = {};

    constructor(private spaceId: string | symbol, private getRoomFn: FetchRoomFn) {
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/src/stores/widgets/StopGapWidget.ts
@ -54,6 +54,7 @@ import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { ELEMENT_CLIENT_ID } from "../../identifiers";
 import { getUserLanguage } from "../../languageHandler";
+import { WidgetVariableCustomisations } from "../../customisations/WidgetVariables";

 // TODO: Destroy all of this code

@ -191,7 +192,8 @@ export class StopGapWidget extends EventEmitter {
    }

    private runUrlTemplate(opts = { asPopout: false }): string {
-        const templated = this.mockWidget.getCompleteUrl({
+        const fromCustomisation = WidgetVariableCustomisations?.provideVariables?.() ?? {};
+        const defaults: ITemplateParams = {
            widgetRoomId: this.roomId,
            currentUserId: MatrixClientPeg.get().getUserId(),
            userDisplayName: OwnProfileStore.instance.displayName,
@ -199,7 +201,8 @@ export class StopGapWidget extends EventEmitter {
            clientId: ELEMENT_CLIENT_ID,
            clientTheme: SettingsStore.getValue("theme"),
            clientLanguage: getUserLanguage(),
-        }, opts?.asPopout);
+        };
+        const templated = this.mockWidget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout);

        const parsed = new URL(templated);

@ -363,6 +366,9 @@ export class StopGapWidget extends EventEmitter {
    }

    public async prepare(): Promise<void> {
+        // Ensure the variables are ready for us to be rendered before continuing
+        await (WidgetVariableCustomisations?.isReady?.() ?? Promise.resolve());
+
        if (this.scalarToken) return;
        const existingMessaging = WidgetMessagingStore.instance.getMessaging(this.mockWidget);
        if (existingMessaging) this.messaging = existingMessaging;
--- a/src/utils/space.tsx
+++ b/src/utils/space.tsx
@ -28,6 +28,11 @@ import { _t } from "../languageHandler";
 import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
 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 { leaveRoomBehaviour } from "./membership";
 import Spinner from "../components/views/elements/Spinner";
 import dis from "../dispatcher/dispatcher";
@ -58,21 +63,26 @@ export const showSpaceSettings = (space: Room) => {
    }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
 };

-export const showAddExistingRooms = async (space: Room) => {
-    return Modal.createTrackedDialog(
+export const showAddExistingRooms = (space: Room): void => {
+    Modal.createTrackedDialog(
        "Space Landing",
        "Add Existing",
        AddExistingToSpaceDialog,
        {
-            matrixClient: space.client,
-            onCreateRoomClick: showCreateNewRoom,
+            onCreateRoomClick: () => showCreateNewRoom(space),
+            onAddSubspaceClick: () => showAddExistingSubspace(space),
            space,
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
        },
        "mx_AddExistingToSpaceDialog_wrapper",
-    ).finished;
+    );
 };

-export const showCreateNewRoom = async (space: Room) => {
+export const showCreateNewRoom = async (space: Room): Promise<boolean> => {
    const modal = Modal.createTrackedDialog<[boolean, IOpts]>(
        "Space Landing",
        "Create Room",
@ -89,7 +99,7 @@ export const showCreateNewRoom = async (space: Room) => {
    return shouldCreate;
 };

-export const showSpaceInvite = (space: Room, initialText = "") => {
+export const showSpaceInvite = (space: Room, initialText = ""): void => {
    if (space.getJoinRule() === "public") {
        const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
            title: _t("Invite to %(spaceName)s", { spaceName: space.name }),
@ -107,6 +117,42 @@ export const showSpaceInvite = (space: Room, initialText = "") => {
    }
 };

+export const showAddExistingSubspace = (space: Room): void => {
+    Modal.createTrackedDialog(
+        "Space Landing",
+        "Create Subspace",
+        AddExistingSubspaceDialog,
+        {
+            space,
+            onCreateSubspaceClick: () => showCreateNewSubspace(space),
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
+        },
+        "mx_AddExistingToSpaceDialog_wrapper",
+    );
+};
+
+export const showCreateNewSubspace = (space: Room): void => {
+    Modal.createTrackedDialog(
+        "Space Landing",
+        "Create Subspace",
+        CreateSubspaceDialog,
+        {
+            space,
+            onAddExistingSpaceClick: () => showAddExistingSubspace(space),
+            onFinished: (added: boolean) => {
+                if (added && RoomViewStore.getRoomId() === space.roomId) {
+                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                }
+            },
+        },
+        "mx_CreateSubspaceDialog_wrapper",
+    );
+};
+
 export const leaveSpace = (space: Room) => {
    Modal.createTrackedDialog("Leave Space", "", LeaveSpaceDialog, {
        space,
--- a/test/stores/SpaceStore-setup.ts
+++ b/test/stores/SpaceStore-setup.ts
@ -19,5 +19,3 @@ limitations under the License.

 localStorage.setItem("mx_labs_feature_feature_spaces", "true");
 localStorage.setItem("mx_labs_feature_feature_spaces.all_rooms", "true");
-localStorage.setItem("mx_labs_feature_feature_spaces.space_member_dms", "true");
-localStorage.setItem("mx_labs_feature_feature_spaces.space_dm_badges", "false");
--- a/test/stores/SpaceStore-test.ts
+++ b/test/stores/SpaceStore-test.ts
@ -17,6 +17,7 @@ limitations under the License.
 import { EventEmitter } from "events";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";

 import "./SpaceStore-setup"; // enable space lab
 import "../skinned-sdk"; // Must be first for skinning to work
@ -53,18 +54,22 @@ const emitPromise = (e: EventEmitter, k: string | symbol) => new Promise(r => e.
 const testUserId = "@test:user";

 const getUserIdForRoomId = jest.fn();
+const getDMRoomsForUserId = jest.fn();
 // @ts-ignore
-DMRoomMap.sharedInstance = { getUserIdForRoomId };
+DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };

 const fav1 = "!fav1:server";
 const fav2 = "!fav2:server";
 const fav3 = "!fav3:server";
 const dm1 = "!dm1:server";
-const dm1Partner = "@dm1Partner:server";
+const dm1Partner = new RoomMember(dm1, "@dm1Partner:server");
+dm1Partner.membership = "join";
 const dm2 = "!dm2:server";
-const dm2Partner = "@dm2Partner:server";
+const dm2Partner = new RoomMember(dm2, "@dm2Partner:server");
+dm2Partner.membership = "join";
 const dm3 = "!dm3:server";
-const dm3Partner = "@dm3Partner:server";
+const dm3Partner = new RoomMember(dm3, "@dm3Partner:server");
+dm3Partner.membership = "join";
 const orphan1 = "!orphan1:server";
 const orphan2 = "!orphan2:server";
 const invite1 = "!invite1:server";
@ -320,11 +325,40 @@ describe("SpaceStore", () => {

                getUserIdForRoomId.mockImplementation(roomId => {
                    return {
-                        [dm1]: dm1Partner,
-                        [dm2]: dm2Partner,
-                        [dm3]: dm3Partner,
+                        [dm1]: dm1Partner.userId,
+                        [dm2]: dm2Partner.userId,
+                        [dm3]: dm3Partner.userId,
                    }[roomId];
                });
+                getDMRoomsForUserId.mockImplementation(userId => {
+                    switch (userId) {
+                        case dm1Partner.userId:
+                            return [dm1];
+                        case dm2Partner.userId:
+                            return [dm2];
+                        case dm3Partner.userId:
+                            return [dm3];
+                        default:
+                            return [];
+                    }
+                });
+
+                // have dmPartner1 be in space1 with you
+                const mySpace1Member = new RoomMember(space1, testUserId);
+                mySpace1Member.membership = "join";
+                (rooms.find(r => r.roomId === space1).getMembers as jest.Mock).mockReturnValue([
+                    mySpace1Member,
+                    dm1Partner,
+                ]);
+                // have dmPartner2 be in space2 with you
+                const mySpace2Member = new RoomMember(space2, testUserId);
+                mySpace2Member.membership = "join";
+                (rooms.find(r => r.roomId === space2).getMembers as jest.Mock).mockReturnValue([
+                    mySpace2Member,
+                    dm2Partner,
+                ]);
+                // dmPartner3 is not in any common spaces with you
+
                await run();
            });

@ -375,6 +409,66 @@ describe("SpaceStore", () => {
                const space = client.getRoom(space3);
                expect(store.getSpaceFilteredRoomIds(space).has(invite2)).toBeTruthy();
            });
+
+            it("spaces contain dms which you have with members of that space", () => {
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space1)).has(dm1)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space2)).has(dm1)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space3)).has(dm1)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space1)).has(dm2)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space2)).has(dm2)).toBeTruthy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space3)).has(dm2)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space1)).has(dm3)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space2)).has(dm3)).toBeFalsy();
+                expect(store.getSpaceFilteredRoomIds(client.getRoom(space3)).has(dm3)).toBeFalsy();
+            });
+
+            it("dms are only added to Notification States for only the Home Space", () => {
+                // XXX: All rooms space is forcibly enabled, as part of a future PR test Home space better
+                // [dm1, dm2, dm3].forEach(d => {
+                //     expect(store.getNotificationState(HOME_SPACE).rooms.map(r => r.roomId).includes(d)).toBeTruthy();
+                // });
+                [space1, space2, space3].forEach(s => {
+                    [dm1, dm2, dm3].forEach(d => {
+                        expect(store.getNotificationState(s).rooms.map(r => r.roomId).includes(d)).toBeFalsy();
+                    });
+                });
+            });
+
+            it("orphan rooms are added to Notification States for only the Home Space", () => {
+                // XXX: All rooms space is forcibly enabled, as part of a future PR test Home space better
+                // [orphan1, orphan2].forEach(d => {
+                //     expect(store.getNotificationState(HOME_SPACE).rooms.map(r => r.roomId).includes(d)).toBeTruthy();
+                // });
+                [space1, space2, space3].forEach(s => {
+                    [orphan1, orphan2].forEach(d => {
+                        expect(store.getNotificationState(s).rooms.map(r => r.roomId).includes(d)).toBeFalsy();
+                    });
+                });
+            });
+
+            it("favourites are added to Notification States for all spaces containing the room inc Home", () => {
+                // XXX: All rooms space is forcibly enabled, as part of a future PR test Home space better
+                // [fav1, fav2, fav3].forEach(d => {
+                //     expect(store.getNotificationState(HOME_SPACE).rooms.map(r => r.roomId).includes(d)).toBeTruthy();
+                // });
+                expect(store.getNotificationState(space1).rooms.map(r => r.roomId).includes(fav1)).toBeTruthy();
+                expect(store.getNotificationState(space1).rooms.map(r => r.roomId).includes(fav2)).toBeFalsy();
+                expect(store.getNotificationState(space1).rooms.map(r => r.roomId).includes(fav3)).toBeFalsy();
+                expect(store.getNotificationState(space2).rooms.map(r => r.roomId).includes(fav1)).toBeTruthy();
+                expect(store.getNotificationState(space2).rooms.map(r => r.roomId).includes(fav2)).toBeTruthy();
+                expect(store.getNotificationState(space2).rooms.map(r => r.roomId).includes(fav3)).toBeTruthy();
+                expect(store.getNotificationState(space3).rooms.map(r => r.roomId).includes(fav1)).toBeFalsy();
+                expect(store.getNotificationState(space3).rooms.map(r => r.roomId).includes(fav2)).toBeFalsy();
+                expect(store.getNotificationState(space3).rooms.map(r => r.roomId).includes(fav3)).toBeFalsy();
+            });
+
+            it("other rooms are added to Notification States for all spaces containing the room exc Home", () => {
+                // XXX: All rooms space is forcibly enabled, as part of a future PR test Home space better
+                // expect(store.getNotificationState(HOME_SPACE).rooms.map(r => r.roomId).includes(room1)).toBeFalsy();
+                expect(store.getNotificationState(space1).rooms.map(r => r.roomId).includes(room1)).toBeTruthy();
+                expect(store.getNotificationState(space2).rooms.map(r => r.roomId).includes(room1)).toBeTruthy();
+                expect(store.getNotificationState(space3).rooms.map(r => r.roomId).includes(room1)).toBeFalsy();
+            });
        });
    });