Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Kim Brose <kim.brose@nordeck.net> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: R Midhun Suresh <hi@midhun.dev> Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com> Co-authored-by: ElementRobot <releases@riot.im> Co-authored-by: dbkr <dbkr@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io> Co-authored-by: Michael Weimann <michaelw@matrix.org> Co-authored-by: Timshel <Timshel@users.noreply.github.com> Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com> Co-authored-by: Will Hunt <will@half-shot.uk> Co-authored-by: Hubert Chathi <hubert@uhoreg.ca> Co-authored-by: Andrew Ferrazzutti <andrewf@element.io> Co-authored-by: Robin <robin@robin.town> Co-authored-by: Tulir Asokan <tulir@maunium.net>
2024-10-16 13:31:55 +01:00
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
--- a/res/css/structures/_AutoHideScrollbar.pcss
+++ b/res/css/structures/_AutoHideScrollbar.pcss
@@ -0,0 +1,53 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* make any scrollbar grey and thin */
+html {
+    scrollbar-color: $scrollbar-thumb-color transparent;
+}
+/* scrollbar-width is not inherited (but -color is, why?!), */
+/* so declare it on every element */
+* {
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: $scrollbar-thumb-color;
+}
+
+/* make auto-hide scrollbars not transparent again on hover */
+.mx_AutoHideScrollbar:hover {
+    scrollbar-color: $scrollbar-thumb-color transparent;
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb-color;
+    }
+}
+
+/* make scrollbars transparent for autohide scrollbars */
+.mx_AutoHideScrollbar {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay; /* where supported */
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    scrollbar-color: transparent transparent;
+}
--- a/res/css/structures/_AutocompleteInput.pcss
+++ b/res/css/structures/_AutocompleteInput.pcss
@@ -0,0 +1,121 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AutocompleteInput {
+    position: relative;
+}
+
+.mx_AutocompleteInput_search_icon {
+    margin-left: $spacing-8;
+    fill: $secondary-content;
+}
+
+.mx_AutocompleteInput_editor {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 1px solid $input-border-color;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+
+    > input {
+        flex: 1;
+        min-width: 40%;
+        resize: none;
+        /* `!important` is required to bypass global input styles. */
+        margin: 0 !important;
+        padding: $spacing-8 9px;
+        border: none !important;
+        color: $primary-content !important;
+        font-weight: normal !important;
+
+        &::placeholder {
+            color: $primary-content !important;
+            font-weight: normal !important;
+        }
+    }
+}
+
+.mx_AutocompleteInput_editor--focused {
+    border-color: $links;
+}
+
+.mx_AutocompleteInput_editor--has-suggestions {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.mx_AutocompleteInput_editor_selection {
+    display: flex;
+    margin-left: $spacing-8;
+}
+
+.mx_AutocompleteInput_editor_selection_pill {
+    display: flex;
+    align-items: center;
+    border-radius: 12px;
+    padding-left: $spacing-8;
+    padding-right: $spacing-8;
+    background-color: $username-variant1-color;
+    color: #ffffff;
+    font-size: $font-12px;
+}
+
+.mx_AutocompleteInput_editor_selection_remove_button svg {
+    vertical-align: middle;
+}
+
+.mx_AutocompleteInput_matches {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: $background;
+    border: 1px solid $links;
+    border-top-color: $input-border-color;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    z-index: 1000;
+}
+
+.mx_AutocompleteInput_suggestion {
+    display: flex;
+    align-items: center;
+    padding: $spacing-8;
+    cursor: pointer;
+
+    > * {
+        user-select: none;
+    }
+
+    &:hover {
+        background-color: $quinary-content;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion--selected {
+    background-color: $quinary-content;
+
+    &:last-child {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
+
+.mx_AutocompleteInput_suggestion_title {
+    margin-right: $spacing-8;
+}
+
+.mx_AutocompleteInput_suggestion_description {
+    color: $secondary-content;
+    font-size: $font-12px;
+}
--- a/res/css/structures/_BackdropPanel.pcss
+++ b/res/css/structures/_BackdropPanel.pcss
@@ -0,0 +1,29 @@
+/*
+Copyright 2021-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_BackdropPanel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    filter: blur(var(--lp-background-blur));
+    /* Force a new layer for the backdropPanel so it's better hardware supported */
+    transform: translateZ(0);
+}
+
+.mx_BackdropPanel--image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+    user-select: none;
+}
--- a/res/css/structures/_CompatibilityPage.pcss
+++ b/res/css/structures/_CompatibilityPage.pcss
@@ -0,0 +1,16 @@
+.mx_CompatibilityPage {
+    width: 100%;
+    height: 100%;
+    background-color: #e55;
+}
+
+.mx_CompatibilityPage_box {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 500px;
+    height: 300px;
+    border: 1px solid;
+    padding: 10px;
+    background-color: #fcc;
+}
--- a/res/css/structures/_ContextualMenu.pcss
+++ b/res/css/structures/_ContextualMenu.pcss
@@ -0,0 +1,117 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 5000;
+}
+
+.mx_ContextualMenu_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+}
+
+.mx_ContextualMenu {
+    border-radius: 12px;
+    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+    color: $primary-content;
+    position: absolute;
+    z-index: 5001;
+    width: max-content;
+}
+
+.mx_ContextualMenu_right {
+    right: 16px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
+    right: 8px;
+}
+
+.mx_ContextualMenu_chevron_right {
+    position: absolute;
+    right: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 8px solid $menu-bg-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_left {
+    left: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
+    left: 8px;
+}
+
+.mx_ContextualMenu_chevron_left {
+    position: absolute;
+    left: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid $menu-bg-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_top {
+    top: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
+    top: 8px;
+}
+
+.mx_ContextualMenu_chevron_top {
+    position: absolute;
+    left: 0px;
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $menu-bg-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_bottom {
+    bottom: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
+    bottom: 8px;
+}
+
+.mx_ContextualMenu_chevron_bottom {
+    position: absolute;
+    left: 0px;
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $menu-bg-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_rightAligned {
+    transform: translateX(-100%);
+}
+
+.mx_ContextualMenu_bottomAligned {
+    transform: translateY(-100%);
+}
--- a/res/css/structures/_ErrorMessage.pcss
+++ b/res/css/structures/_ErrorMessage.pcss
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ErrorMessage {
+    align-items: center;
+    color: $alert;
+    display: flex;
+    font-size: $font-12px;
+    gap: $spacing-8;
+    line-height: 1.2em;
+    min-height: 2.4em;
+}
--- a/res/css/structures/_FileDropTarget.pcss
+++ b/res/css/structures/_FileDropTarget.pcss
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+@keyframes mx_FileDropTarget_animation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
+.mx_FileDropTarget {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+
+    font-size: $font-18px;
+    text-align: center;
+
+    pointer-events: none;
+
+    background-color: $background;
+    opacity: 0.95;
+
+    position: absolute;
+    z-index: 3000;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    animation: mx_FileDropTarget_animation;
+    animation-duration: 0.5s;
+}
+
+@keyframes mx_FileDropTarget_image_animation {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.mx_FileDropTarget_image {
+    width: 32px;
+    animation: mx_FileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
+}
--- a/res/css/structures/_FilePanel.pcss
+++ b/res/css/structures/_FilePanel.pcss
@@ -0,0 +1,77 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_FilePanel {
+    order: 2;
+    flex: 1 1 0;
+    overflow-y: auto;
+    display: flex;
+
+    .mx_RoomView_messageListWrapper {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .mx_RoomView_MessageList {
+        width: 100%;
+        gap: var(--cpd-space-6x);
+    }
+
+    /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+    /* Overrides for the attachment body tiles */
+    .mx_EventTile {
+        word-break: break-word;
+        padding-top: 0;
+
+        & + .mx_EventTile {
+            border-top: 1px solid var(--cpd-color-gray-400);
+            padding-top: var(--cpd-space-6x);
+        }
+
+        .mx_EventTile_line {
+            padding-inline-start: 0;
+        }
+
+        .mx_MFileBody_download {
+            margin-top: var(--cpd-space-4x);
+        }
+
+        /* anchor link as wrapper */
+        .mx_EventTile_senderDetailsLink {
+            text-decoration: none;
+            margin-bottom: var(--cpd-space-1x);
+            display: block;
+
+            .mx_EventTile_senderDetails {
+                display: flex;
+                margin-top: -2px;
+                gap: var(--cpd-space-2x);
+                align-items: center;
+
+                .mx_DisambiguatedProfile {
+                    color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
+                }
+
+                .mx_MessageTimestamp {
+                    margin-left: auto;
+                    font: var(--cpd-font-body-xs-regular);
+                    color: var(--cpd-color-text-secondary);
+                }
+            }
+        }
+    }
+
+    .mx_EventTile_line {
+        margin-inline-end: 0;
+        padding-inline-start: 0;
+    }
+}
--- a/res/css/structures/_GenericDropdownMenu.pcss
+++ b/res/css/structures/_GenericDropdownMenu.pcss
@@ -0,0 +1,115 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_GenericDropdownMenu_button {
+    padding: 3px 4px 3px 8px;
+    border-radius: 4px;
+    line-height: 1.5;
+    user-select: none;
+    font-size: $font-12px;
+    color: $secondary-content;
+}
+
+.mx_GenericDropdownMenu_button:hover,
+.mx_GenericDropdownMenu_button[aria-expanded="true"] {
+    background: $quinary-content;
+}
+
+.mx_GenericDropdownMenu_button::before {
+    content: "";
+    width: 18px;
+    height: 18px;
+    background: currentColor;
+    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    float: right;
+}
+
+.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
+    .mx_ContextualMenu {
+        position: initial;
+
+        font-size: $font-12px;
+        color: $secondary-content;
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        border: 1px solid $quinary-content;
+        box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
+    }
+
+    .mx_ContextualMenu_chevron_top {
+        left: auto;
+        right: 22px;
+        border-bottom-color: $quinary-content;
+
+        &::after {
+            content: "";
+            border: inherit;
+            border-bottom-color: $menu-bg-color;
+            position: absolute;
+            top: 1px;
+            left: -8px;
+        }
+    }
+
+    .mx_GenericDropdownMenu_divider {
+        display: block;
+        height: 0;
+        margin-left: 4px;
+        margin-right: 19px;
+        border-top: 1px solid $quinary-content;
+    }
+
+    .mx_GenericDropdownMenu_Option {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: row;
+        align-items: center;
+        padding: 10px 20px 10px 30px;
+        position: relative;
+
+        > .mx_GenericDropdownMenu_Option--label {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+
+            margin: 0;
+
+            span:first-child {
+                color: $primary-content;
+                font-weight: var(--cpd-font-weight-semibold);
+            }
+        }
+
+        &.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child {
+            font-size: $font-15px;
+        }
+
+        &.mx_GenericDropdownMenu_Option--item {
+            &:hover {
+                background-color: $menu-selected-color;
+            }
+
+            &[aria-checked="true"]::before {
+                content: "";
+                width: 12px;
+                height: 12px;
+                margin-left: -20px;
+                margin-right: 8px;
+                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-size: 100%;
+                mask-repeat: no-repeat;
+                background-color: $primary-content;
+                display: inline-block;
+                vertical-align: middle;
+            }
+        }
+    }
+}
--- a/res/css/structures/_HomePage.pcss
+++ b/res/css/structures/_HomePage.pcss
@@ -0,0 +1,99 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+Copyright 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_HomePage {
+    max-width: 960px;
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_HomePage_default {
+    text-align: center;
+    display: flex;
+
+    .mx_HomePage_default_wrapper {
+        margin: auto;
+    }
+
+    img {
+        height: 48px;
+    }
+
+    h1 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-32px;
+        line-height: 1.375;
+        margin-bottom: 4px;
+    }
+
+    h2 {
+        margin-top: 4px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-18px;
+        line-height: $font-25px;
+        color: $muted-fg-color;
+    }
+
+    .mx_MiniAvatarUploader {
+        margin: 0 auto;
+    }
+
+    .mx_HomePage_default_buttons {
+        display: flex;
+        margin: 60px auto 0;
+        width: fit-content;
+
+        .mx_AccessibleButton {
+            padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
+
+            width: 160px;
+            min-height: 132px;
+            margin: 20px;
+            position: relative;
+            display: inline-block;
+            border-radius: 8px;
+            vertical-align: top;
+            word-break: break-word;
+            box-sizing: border-box;
+
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-15px;
+            line-height: $font-20px;
+            color: #fff; /* on all themes */
+            background-color: $accent;
+
+            &::before {
+                top: 20px;
+                left: 60px; /* (160px-40px)/2 */
+                width: 40px;
+                height: 40px;
+
+                content: "";
+                position: absolute;
+                background-color: #fff; /* on all themes */
+                mask-repeat: no-repeat;
+                mask-size: contain;
+            }
+
+            &.mx_HomePage_button_sendDm::before {
+                mask-image: url("$(res)/img/element-icons/feedback.svg");
+            }
+
+            &.mx_HomePage_button_explore::before {
+                mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
+            }
+
+            &.mx_HomePage_button_createGroup::before {
+                mask-image: url("$(res)/img/element-icons/group-members.svg");
+            }
+        }
+    }
+}
--- a/res/css/structures/_LargeLoader.pcss
+++ b/res/css/structures/_LargeLoader.pcss
@@ -0,0 +1,29 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LargeLoader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .mx_Spinner {
+        flex: unset;
+        height: auto;
+        margin-bottom: 32px;
+        margin-top: 33vh;
+    }
+
+    .mx_LargeLoader_text {
+        font-size: 24px;
+        font-weight: var(--cpd-font-weight-semibold);
+        padding: 0 16px;
+        position: relative;
+        text-align: center;
+    }
+}
--- a/res/css/structures/_LeftPanel.pcss
+++ b/res/css/structures/_LeftPanel.pcss
@@ -0,0 +1,242 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MatrixChat--with-avatar {
+    .mx_LeftPanel,
+    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+        background-color: transparent;
+    }
+}
+
+.mx_LeftPanel_outerWrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: 50%;
+    position: relative;
+
+    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
+    contain: layout paint;
+}
+
+.mx_LeftPanel_wrapper,
+.mx_LeftPanel {
+    --collapsedWidth: 68px;
+}
+
+.mx_LeftPanel_wrapper {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
+
+    .mx_LeftPanel_wrapper--user {
+        background-color: $roomlist-bg-color;
+        display: flex;
+        overflow: hidden;
+        position: relative;
+
+        &[data-collapsed] {
+            max-width: var(--collapsedWidth);
+        }
+    }
+}
+
+.mx_LeftPanel {
+    background-color: $roomlist-bg-color;
+
+    /* Create a row-based flexbox for the space panel and the room list */
+    display: flex;
+    contain: content;
+    position: relative;
+    flex-grow: 1;
+    overflow: hidden;
+
+    /* Note: The 'room list' in this context is actually everything that isn't the tag */
+    /* panel, such as the menu options, breadcrumbs, filtering, etc */
+    .mx_LeftPanel_roomListContainer {
+        background-color: $roomlist-bg-color;
+        flex: 1 0 0;
+        min-width: 0;
+        /* Create another flexbox (this time a column) for the room list components */
+        display: flex;
+        flex-direction: column;
+
+        .mx_LeftPanel_userHeader {
+            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
+             * for internal whitespace in the breadcrumbs)
+             */
+            padding: 12px;
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
+
+            /* Create another flexbox column for the rows to stack within */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .mx_LeftPanel_breadcrumbsContainer {
+            overflow-y: hidden;
+            overflow-x: scroll;
+            margin: 12px 12px 0 12px;
+            flex: 0 0 auto;
+            /* Create yet another flexbox, this time within the row, to ensure items stay */
+            /* aligned correctly. This is also a row-based flexbox. */
+            display: flex;
+            align-items: center;
+            contain: content;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow {
+                mask-image: linear-gradient(90deg, black, black 95%, transparent);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
+            }
+        }
+
+        .mx_LeftPanel_filterContainer {
+            margin: 0 12px;
+            padding: 12px 0 8px;
+            border-bottom: 1px solid $quinary-content;
+
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
+
+            /* Create a flexbox to organize the inputs */
+            display: flex;
+            align-items: center;
+
+            & + .mx_RoomListHeader {
+                margin-top: 12px;
+            }
+
+            .mx_LeftPanel_dialPadButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $panel-actions;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url("$(res)/img/element-icons/call/dialpad.svg");
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $secondary-content;
+                }
+            }
+
+            .mx_LeftPanel_exploreButton,
+            .mx_LeftPanel_recentsButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $panel-actions;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $secondary-content;
+                }
+
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    &::before {
+                        background-color: $background;
+                    }
+                }
+            }
+
+            .mx_LeftPanel_exploreButton::before {
+                mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
+            }
+
+            .mx_LeftPanel_recentsButton::before {
+                mask-image: url("$(res)/img/element-icons/clock.svg");
+            }
+        }
+
+        .mx_RoomListHeader:first-child {
+            margin-top: 12px;
+        }
+
+        .mx_LeftPanel_roomListWrapper {
+            /* Make the y-scrollbar more responsive */
+            padding-right: 2px;
+            overflow: hidden;
+            margin-top: 10px; /* so we're not up against the search/filter */
+            flex: 1 0 0; /* needed in Safari to properly set flex-basis */
+
+            &.mx_LeftPanel_roomListWrapper_stickyBottom {
+                padding-bottom: 32px;
+            }
+
+            &.mx_LeftPanel_roomListWrapper_stickyTop {
+                padding-top: 32px;
+            }
+        }
+
+        .mx_LeftPanel_actualRoomListContainer {
+            position: relative; /* for sticky headers */
+            height: 100%; /* ensure scrolling still works */
+        }
+    }
+
+    /* These styles override the defaults for the minimized (66px) layout */
+    &.mx_LeftPanel_minimized {
+        flex-grow: 0;
+        min-width: unset;
+        width: unset !important;
+
+        .mx_LeftPanel_roomListContainer {
+            width: var(--collapsedWidth);
+
+            .mx_LeftPanel_userHeader {
+                flex-direction: row;
+                justify-content: center;
+            }
+
+            .mx_LeftPanel_filterContainer {
+                /* Organize the flexbox into a centered column layout */
+                flex-direction: column;
+                justify-content: center;
+
+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
+                .mx_LeftPanel_exploreButton,
+                .mx_LeftPanel_recentsButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+}
--- a/res/css/structures/_MainSplit.pcss
+++ b/res/css/structures/_MainSplit.pcss
@@ -0,0 +1,32 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MainSplit {
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+}
+
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+    &:hover .mx_ResizeHandle--horizontal::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-150%, -50%);
+
+        height: 64px; /* to match width of the ones on roomlist */
+        width: 4px;
+        border-radius: 4px;
+
+        content: "";
+
+        background-color: $primary-content;
+        opacity: 0.8;
+    }
+}
--- a/res/css/structures/_MatrixChat.pcss
+++ b/res/css/structures/_MatrixChat.pcss
@@ -0,0 +1,70 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MatrixChat_splash {
+    position: relative;
+    height: 100%;
+}
+
+.mx_MatrixChat_wrapper {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+}
+
+.mx_MatrixToolbar {
+    order: 1;
+
+    height: 40px;
+}
+
+.mx_MatrixChat {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+
+    flex: 1;
+    min-height: 0;
+}
+
+/* not the left panel, and not the resize handle, so the roomview and friends */
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
+    background-color: $background;
+
+    flex: 1 1 0;
+    min-width: 0;
+
+    /* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
+       needed height 100% all the way down to the HomePage. Height does not
+       have to be auto, empirically.
+    */
+    height: 100%;
+}
+
+.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        height: 64px; /* to match width of the ones on roomlist */
+        width: 4px;
+        border-radius: 4px;
+
+        content: " ";
+
+        background-color: $primary-content;
+        opacity: 0.8;
+    }
+}
--- a/res/css/structures/_MessagePanel.pcss
+++ b/res/css/structures/_MessagePanel.pcss
@@ -0,0 +1,29 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MessagePanel_myReadMarker {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    hr {
+        border-top: solid 1px $accent;
+        border-bottom: solid 1px $accent;
+        margin-top: 0;
+        position: relative;
+        top: -1px;
+        z-index: 1;
+        will-change: width;
+        transition:
+            width 400ms easeinsine 1s,
+            opacity 400ms easeinsine 1s;
+        width: 99%;
+        opacity: 1;
+    }
+}
--- a/res/css/structures/_NonUrgentToastContainer.pcss
+++ b/res/css/structures/_NonUrgentToastContainer.pcss
@@ -0,0 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_NonUrgentToastContainer {
+    position: absolute;
+    bottom: 30px;
+    left: 28px;
+    z-index: 101; /* same level as other toasts */
+
+    .mx_NonUrgentToastContainer_toast {
+        padding: 10px 12px;
+        border-radius: 8px;
+        width: 320px;
+        font-size: $font-13px;
+        margin-top: 8px;
+
+        /* We don't use variables on the colours because we want it to be the same */
+        /* in all themes. */
+        background-color: #17191c;
+        color: #fff;
+    }
+}
--- a/res/css/structures/_QuickSettingsButton.pcss
+++ b/res/css/structures/_QuickSettingsButton.pcss
@@ -0,0 +1,119 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_QuickSettingsButton {
+    flex: 0 0 auto;
+    border-radius: 8px;
+    position: relative;
+    margin: 12px auto;
+    color: $secondary-content;
+    min-width: 32px;
+    min-height: 32px;
+    line-height: 32px;
+
+    &.expanded {
+        margin-left: 20px;
+        padding-left: 44px; /* align with toggle collapse button text */
+        padding-right: 8px;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        left: 0;
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 24px;
+        background: $secondary-content;
+    }
+
+    &:not(.expanded):hover {
+        background-color: $quaternary-content;
+
+        &::before {
+            background-color: $primary-content;
+        }
+    }
+}
+
+.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
+    padding: 16px;
+    width: max-content;
+    min-width: 200px;
+    contain: unset; /* let the dropdown paint beyond the context menu */
+
+    > div > h2 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: var(--cpd-color-text-secondary);
+        margin: 0 0 16px;
+    }
+
+    .mx_AccessibleButton_hasKind {
+        display: block;
+        margin-top: 4px;
+    }
+
+    > div > h4 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-12px;
+        line-height: $font-15px;
+        text-transform: uppercase;
+        color: var(--cpd-color-text-secondary);
+        margin: 20px 0 12px;
+    }
+
+    .mx_QuickSettingsButton_pinToSidebarHeading {
+        padding-left: 24px;
+        position: relative;
+    }
+
+    .mx_Checkbox {
+        margin-bottom: 8px;
+    }
+
+    .mx_QuickSettingsButton_favouritesCheckbox,
+    .mx_QuickSettingsButton_peopleCheckbox {
+        .mx_Checkbox_background + div {
+            padding-left: 22px;
+            position: relative;
+            margin-left: 6px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: var(--cpd-color-text-primary);
+        }
+    }
+
+    .mx_QuickSettingsButton_moreOptionsButton {
+        padding-left: 22px;
+        margin-left: 22px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: var(--cpd-color-text-primary);
+        position: relative;
+        margin-bottom: 16px;
+    }
+}
+
+.mx_QuickSettingsButton_icon {
+    // TODO remove when all icons have fill=currentColor
+    * {
+        fill: $secondary-content;
+    }
+    color: $secondary-content;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@@ -0,0 +1,66 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RightPanel {
+    overflow-x: hidden;
+    flex: 0 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid $separator;
+    box-sizing: border-box;
+    height: 100%;
+    contain: strict;
+    background-color: var(--cpd-color-bg-canvas-default);
+
+    .mx_RoomView_MessageList {
+        padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
+    }
+}
+
+/** Fixme - factor this out with the main header **/
+
+.mx_RightPanel_threadsButton::before {
+    mask-image: url("$(res)/img/element-icons/room/thread.svg");
+}
+
+.mx_RightPanel_notifsButton::before {
+    mask-image: url("$(res)/img/element-icons/notifications.svg");
+    mask-position: center;
+}
+
+.mx_RightPanel_roomSummaryButton::before {
+    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+    mask-position: center;
+}
+
+.mx_RightPanel_pinnedMessagesButton {
+    &::before {
+        mask-image: url("$(res)/img/element-icons/room/pin.svg");
+        mask-position: center;
+    }
+}
+
+.mx_RightPanel_timelineCardButton {
+    &::before {
+        mask-image: url("$(res)/img/element-icons/feedback.svg");
+        mask-position: center;
+    }
+}
+
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel .mx_MemberInfo {
+    order: 2;
+    flex: 1 1 0;
+}
+
+.mx_RightPanel .mx_RoomView_messagePanelSpinner {
+    order: 2;
+    margin: auto;
+}
--- a/res/css/structures/_RoomSearch.pcss
+++ b/res/css/structures/_RoomSearch.pcss
@@ -0,0 +1,96 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* Note: this component expects to be contained within a flexbox */
+.mx_RoomSearch {
+    flex: 1;
+    min-width: 0;
+    border-radius: 8px;
+    background-color: $panel-actions;
+    /* keep border thickness consistent to prevent movement */
+    border: 1px solid transparent;
+    height: 28px;
+    padding: 1px;
+
+    /* Create a flexbox for the icons (easier to manage) */
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    .mx_RoomSearch_icon {
+        width: 20px;
+        height: 20px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        background-color: $secondary-content;
+        margin-left: var(--cpd-space-2x);
+        flex-shrink: 0;
+    }
+
+    .mx_RoomSearch_spotlightTriggerText {
+        color: var(--cpd-color-text-secondary);
+        flex: 1;
+        min-width: 0;
+        /* the following rules are to match that of a real input field */
+        overflow: hidden;
+        margin: 9px;
+        font: var(--cpd-font-body-sm-semibold);
+    }
+
+    .mx_RoomSearch_shortcutPrompt {
+        border-radius: 6px;
+        background-color: $panel-actions;
+        padding: 2px 4px;
+        user-select: none;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        font-family: inherit;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: $light-fg-color;
+        margin-right: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.mx_RoomSearch_minimized {
+        height: 32px;
+        min-height: 32px;
+        width: 32px;
+        box-sizing: border-box;
+
+        .mx_RoomSearch_icon {
+            margin: 0 auto;
+            padding: 1px;
+            align-self: center;
+        }
+
+        .mx_RoomSearch_shortcutPrompt {
+            display: none;
+        }
+    }
+
+    &:hover {
+        background-color: $tertiary-content;
+
+        .mx_RoomSearch_spotlightTriggerText {
+            color: $background;
+        }
+
+        .mx_RoomSearch_shortcutPrompt {
+            background-color: $background;
+            color: $secondary-content;
+        }
+
+        .mx_RoomSearch_icon {
+            background-color: $background;
+        }
+    }
+}
--- a/res/css/structures/_RoomStatusBar.pcss
+++ b/res/css/structures/_RoomStatusBar.pcss
@@ -0,0 +1,192 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+    margin-left: 65px;
+    min-height: 50px;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars {
+    width: 52px;
+    margin-top: -1px;
+    text-align: left;
+}
+
+.mx_RoomStatusBar_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border: 1px solid $background;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: $font-24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
+.mx_RoomStatusBar_scrollDownIndicator {
+    cursor: pointer;
+    padding-left: 1px;
+}
+
+.mx_RoomStatusBar_unreadMessagesBar {
+    padding-top: 10px;
+    color: $alert;
+    cursor: pointer;
+}
+
+.mx_RoomStatusBar_connectionLostBar {
+    display: flex;
+
+    margin-top: 19px;
+    min-height: 58px;
+}
+
+.mx_RoomStatusBar_unsentMessages {
+    > div[role="alert"] {
+        /* cheat some basic alignment */
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        margin: 12px;
+        padding-left: 16px;
+        background-color: $header-panel-bg-color;
+        border-radius: 4px;
+    }
+
+    .mx_RoomStatusBar_unsentBadge {
+        margin-right: 12px;
+
+        .mx_NotificationBadge {
+            /* Override sizing from the default badge */
+            width: 24px !important;
+            height: 24px !important;
+            border-radius: 24px !important;
+
+            .mx_NotificationBadge_count {
+                font-size: $font-16px !important; /* override default */
+            }
+        }
+    }
+
+    .mx_RoomStatusBar_unsentTitle {
+        color: $alert;
+        font-size: $font-15px;
+    }
+
+    .mx_RoomStatusBar_unsentDescription {
+        font-size: $font-12px;
+    }
+
+    .mx_RoomStatusBar_unsentButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+        color: $muted-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 5px 10px;
+            padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
+            display: inline-block;
+            position: relative;
+            user-select: none;
+
+            &:nth-child(2) {
+                border-left: 1px solid $resend-button-divider-color;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                left: 10px; /* inset for regular button padding */
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 18px;
+                height: 18px;
+                top: 50%; /* text sizes are dynamic */
+                transform: translateY(-50%);
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url("$(res)/img/element-icons/trashcan.svg");
+            }
+
+            &.mx_RoomStatusBar_unsentRetry {
+                padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
+
+                &::before {
+                    mask-image: url("$(res)/img/element-icons/retry.svg");
+                }
+            }
+        }
+
+        .mx_InlineSpinner {
+            vertical-align: middle;
+            margin-right: 5px;
+            top: 1px; /* just to help the vertical alignment be slightly better */
+
+            & + span {
+                margin-right: 10px; /* same margin/padding as the rightmost button */
+            }
+        }
+    }
+}
+
+.mx_RoomStatusBar_connectionLostBar svg {
+    padding-left: 10px;
+    padding-right: 10px;
+    vertical-align: middle;
+    float: left;
+}
+
+.mx_RoomStatusBar_connectionLostBar_title {
+    color: $alert;
+}
+
+.mx_RoomStatusBar_connectionLostBar_desc {
+    color: $primary-content;
+    font-size: $font-13px;
+    opacity: 0.5;
+    padding-bottom: 20px;
+}
+
+.mx_RoomStatusBar_resend_link {
+    color: $primary-content !important;
+    text-decoration: underline !important;
+    cursor: pointer;
+}
+
+.mx_RoomStatusBar_typingBar {
+    height: 50px;
+    line-height: 50px;
+
+    color: $primary-content;
+    opacity: 0.5;
+    overflow-y: hidden;
+    display: block;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+        min-height: 40px;
+    }
+
+    .mx_RoomStatusBar_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_RoomStatusBar_typingBar {
+        height: 40px;
+        line-height: 40px;
+    }
+}
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -0,0 +1,273 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+:root {
+    --RoomView_MessageList-padding: 18px;
+}
+
+.mx_RoomView_wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    justify-content: center;
+    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
+    contain: strict;
+}
+
+.mx_RoomView {
+    word-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+
+    .mx_MainSplit {
+        flex: 1 1 0;
+    }
+
+    .mx_MessageComposer {
+        width: 100%;
+        flex: 0 0 auto;
+        margin-right: 2px;
+    }
+}
+
+.mx_RoomView_auxPanel_hiddenHighlights {
+    border-bottom: 1px solid $primary-hairline-color;
+    padding: 10px 26px;
+    color: $alert;
+    cursor: pointer;
+}
+
+.mx_RoomView_messagePanel {
+    width: 100%;
+    overflow-y: auto;
+    flex: 1 1 0;
+    overflow-anchor: none;
+}
+
+.mx_RoomView_messagePanelSearchSpinner {
+    flex: 1;
+    background-image: url("$(res)/img/typing-indicator-2x.gif");
+    background-position: center 367px;
+    background-size: 25px;
+    background-repeat: no-repeat;
+    position: relative;
+
+    &::before {
+        background-color: $info-plinth-fg-color;
+        mask: url("$(res)/img/feather-customised/search-input.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 50px;
+        content: "";
+        position: absolute;
+        top: 286px;
+        left: 0;
+        right: 0;
+        height: 50px;
+    }
+}
+
+.mx_RoomView_body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    .mx_RoomView_messagePanel,
+    .mx_RoomView_messagePanelSpinner,
+    .mx_RoomView_messagePanelSearchSpinner {
+        order: 2;
+    }
+
+    .mx_RoomView_timeline {
+        /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-right: calc(var(--container-gap-width) / 2);
+    }
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $background;
+    z-index: 1000;
+    overflow: hidden;
+
+    transition: all 0.2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
+.mx_RoomView_messageListWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: relative;
+}
+
+.mx_RoomView_searchResultsPanel {
+    .mx_RoomView_messageListWrapper {
+        justify-content: flex-start;
+
+        > .mx_RoomView_MessageList > li > ol {
+            list-style-type: none;
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+}
+
+.mx_RoomView_empty {
+    font-size: $font-13px;
+    padding: 0 24px;
+    margin-right: 30px;
+    text-align: center;
+    margin-bottom: 80px; /* visually center the content (intentional offset) */
+}
+
+.mx_RoomView_MessageList {
+    list-style-type: none;
+    padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
+    margin: 0;
+    /* needed as min-height is set to clientHeight in ScrollPanel
+    to prevent shrinking when WhoIsTypingTile is hidden */
+    box-sizing: border-box;
+
+    li {
+        clear: both;
+    }
+
+    .mx_ScrollPanel & {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
+        content-visibility: auto;
+        contain-intrinsic-size: 50px;
+    }
+
+    .mx_RoomView--local .mx_ScrollPanel & {
+        justify-content: center;
+    }
+}
+
+/* Rooms with immersive content */
+.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper {
+    border: unset;
+}
+
+.mx_RoomView_inCall {
+    .mx_RoomView_statusAreaBox_line {
+        margin-top: 2px;
+        border: none;
+        height: 0px;
+    }
+
+    .mx_MessageComposer_wrapper {
+        border-top: 2px hidden;
+        padding-top: 1px;
+    }
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+
+        h2 {
+            margin-top: 6px;
+        }
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}
+
+@keyframes mx_Indicator_pulse {
+    0% {
+        transform: scale(0.95);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
+@keyframes mx_Indicator_pulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.mx_Indicator {
+    position: absolute;
+    right: -3px;
+    top: -3px;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
+    border-radius: 50%;
+    transform: scale(1);
+    background: var(--RoomHeader-indicator-pulseColor);
+    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
+    animation: mx_Indicator_pulse 2s infinite;
+    animation-iteration-count: 1;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        top: 0;
+        left: 0;
+        transform: scale(1);
+        transform-origin: center center;
+        animation-name: mx_Indicator_pulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: inherit;
+    }
+}
--- a/res/css/structures/_SearchBox.pcss
+++ b/res/css/structures/_SearchBox.pcss
@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SearchBox {
+    flex: 1 1 0;
+    min-width: 0;
+
+    &.mx_SearchBox_blurred:not(:hover) {
+        background-color: transparent;
+    }
+
+    .mx_SearchBox_closeButton {
+        cursor: pointer;
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 16px;
+        width: 16px;
+        height: 16px;
+        padding: 9px;
+        background-color: var(--cpd-color-icon-secondary);
+    }
+}
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@@ -0,0 +1,314 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpaceRoomView_landing {
+    .mx_AccessibleButton_kind_link {
+        font-size: inherit;
+    }
+
+    .mx_SearchBox {
+        margin: 24px 0 16px;
+    }
+
+    .mx_SpaceHierarchy_noResults {
+        text-align: center;
+
+        > div {
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-content;
+        }
+    }
+
+    .mx_SpaceHierarchy_listHeader {
+        display: flex;
+        flex-flow: wrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        margin-bottom: 12px;
+
+        .mx_SpaceHierarchy_listHeader_header {
+            grid-column-start: 1;
+            font-weight: var(--cpd-font-weight-semibold);
+            margin: 0;
+        }
+
+        .mx_SpaceHierarchy_listHeader_buttons {
+            grid-column-start: 2;
+            display: flex;
+            flex-flow: wrap;
+            gap: 12px;
+            min-height: 32px;
+
+            .mx_AccessibleButton {
+                padding: 4px 12px;
+                font-weight: normal;
+            }
+        }
+
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; /* to account for the 1px border */
+        }
+    }
+
+    .mx_SpaceHierarchy_error {
+        position: relative;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: $alert;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        margin: 20px auto 12px;
+        padding-left: 24px;
+        width: max-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 16px;
+            width: 16px;
+            left: 0;
+            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .mx_SpaceHierarchy_roomCount {
+        > h3 {
+            display: inline;
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-18px;
+            line-height: $font-22px;
+            color: $primary-content;
+        }
+
+        > span {
+            margin-left: 8px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-content;
+        }
+    }
+
+    .mx_SpaceHierarchy_subspace_toggle {
+        position: absolute;
+        left: -1px;
+        top: 10px;
+        height: 16px;
+        width: 16px;
+        border-radius: 4px;
+        background-color: $background;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 16px;
+            width: 16px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $tertiary-content;
+            mask-size: 16px;
+            transform: rotate(270deg);
+            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+        }
+
+        &.mx_SpaceHierarchy_subspace_toggle_shown::before {
+            transform: rotate(0deg);
+        }
+    }
+
+    .mx_SpaceHierarchy_subspace_children {
+        position: relative;
+        padding-left: 12px;
+    }
+
+    .mx_SpaceHierarchy_list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li.mx_SpaceHierarchy_roomTileWrapper {
+            list-style: none;
+
+            .mx_SpaceHierarchy_roomTile {
+                position: relative;
+                padding: 8px 16px;
+                border-radius: 8px;
+                box-sizing: border-box;
+
+                display: flex;
+                flex-wrap: wrap;
+                gap: 6px 12px;
+
+                .mx_SpaceHierarchy_roomTile_item {
+                    font-weight: var(--cpd-font-weight-semibold);
+                    font-size: $font-15px;
+                    line-height: $font-18px;
+                    display: grid;
+                    grid-template-columns: 20px auto;
+                    gap: 6px 8px;
+                    align-items: center;
+                    flex: 1; /* wrap action buttons */
+
+                    .mx_SpaceHierarchy_roomTile_avatar {
+                        grid-row: 1;
+                        grid-column: 1;
+                    }
+
+                    .mx_SpaceHierarchy_roomTile_name {
+                        grid-row: 1;
+                        grid-column: 2;
+
+                        .mx_InfoTooltip,
+                        .mx_SpaceHierarchy_roomTile_joined {
+                            margin-left: 12px;
+                            color: $tertiary-content;
+                            font-size: $font-12px;
+                            line-height: $font-15px;
+
+                            .mx_InfoTooltip_icon {
+                                margin-right: 4px;
+                                position: relative;
+                                vertical-align: text-top;
+
+                                &::before {
+                                    position: absolute;
+                                    top: 0;
+                                    left: 0;
+                                }
+                            }
+                        }
+
+                        .mx_InfoTooltip {
+                            display: inline-block;
+                        }
+
+                        .mx_SpaceHierarchy_roomTile_joined {
+                            display: inline;
+                            position: relative;
+                            padding-left: 16px;
+
+                            &::before {
+                                content: "";
+                                width: 20px;
+                                height: 20px;
+                                top: -2px;
+                                left: -4px;
+                                position: absolute;
+                                mask-position: center;
+                                mask-size: contain;
+                                mask-repeat: no-repeat;
+                                background-color: $accent;
+                                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                            }
+                        }
+                    }
+
+                    .mx_SpaceHierarchy_roomTile_info {
+                        grid-row: 2;
+                        grid-column: 2;
+                        font: var(--cpd-font-body-md-regular);
+                        font-weight: initial;
+                        line-height: $font-18px;
+                        color: $secondary-content;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                    }
+                }
+
+                .mx_SpaceHierarchy_actions {
+                    display: flex;
+                    align-items: center;
+                    column-gap: 12px;
+                    margin-left: auto;
+
+                    .mx_AccessibleButton {
+                        line-height: $font-24px;
+                        padding: 4px 16px;
+                        display: inline-block;
+                        visibility: hidden;
+                    }
+
+                    .mx_AccessibleButton_kind_danger_outline,
+                    .mx_AccessibleButton_kind_primary_outline {
+                        padding: 3px 16px; /* to account for the 1px border */
+                    }
+
+                    .mx_Checkbox {
+                        display: inline-flex;
+
+                        label {
+                            width: 16px;
+                            height: 16px;
+                        }
+                    }
+                }
+
+                &:hover,
+                &:focus-within {
+                    background-color: $spacePanel-bg-color;
+
+                    .mx_AccessibleButton {
+                        visibility: visible;
+                    }
+                }
+
+                &.mx_SpaceHierarchy_joining {
+                    .mx_AccessibleButton {
+                        visibility: visible;
+                        padding: 4px 18px;
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_SpaceHierarchy_roomTile,
+    .mx_SpaceHierarchy_subspace_children {
+        &::before {
+            content: "";
+            position: absolute;
+            background-color: $spacePanel-bg-color;
+            width: 1px;
+            height: 100%;
+            left: 6px;
+            top: 0;
+        }
+    }
+
+    .mx_SpaceHierarchy_actions {
+        .mx_SpaceHierarchy_actionsText {
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+        }
+    }
+
+    > hr {
+        border: none;
+        height: 1px;
+        background-color: rgba(141, 151, 165, 0.2);
+        margin: 20px 0;
+    }
+
+    .mx_SpaceHierarchy_createRoom {
+        display: block;
+        margin: 16px auto 0;
+        width: max-content;
+    }
+}
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -0,0 +1,473 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpacePanel {
+    --activeBackground-color: $panel-actions;
+    --activeBorder-color: $primary-content;
+    --activeBorder-transparent-gap: 1px;
+    --gutterSize: 14px;
+    --height-nested: 24px;
+    --height-topLevel: 32px;
+
+    background-color: $spacePanel-bg-color;
+    flex: 0 0 auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    /* Fix for the blurred avatar-background */
+    z-index: 1;
+
+    /* Create another flexbox so the Panel fills the container */
+    display: flex;
+    flex-direction: column;
+
+    &.collapsed {
+        width: 68px;
+    }
+
+    .mx_SpacePanel_toggleCollapse {
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background-color: $tertiary-content;
+        top: 19px; /* v-align with avatar */
+        right: -8px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: $background;
+            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            transform: rotate(270deg);
+        }
+
+        &:not(.expanded) {
+            opacity: 0;
+
+            &::before {
+                mask-position: center 1px;
+            }
+        }
+
+        &.expanded::before {
+            transform: rotate(90deg);
+        }
+    }
+
+    &:hover .mx_SpacePanel_toggleCollapse {
+        opacity: 1;
+    }
+
+    ul {
+        margin: 0;
+        list-style: none;
+        padding: 0;
+    }
+
+    .mx_SpaceButton_toggleCollapse {
+        cursor: pointer;
+    }
+
+    .mx_SpaceItem_dragging {
+        .mx_SpaceButton_toggleCollapse {
+            visibility: hidden;
+        }
+    }
+
+    .mx_SpaceItem {
+        display: inline-flex;
+        flex-flow: wrap;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
+    }
+
+    .mx_SpaceItem.collapsed {
+        & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
+            padding: 0 10px;
+            margin: 0 -10px;
+            transform: rotate(-90deg);
+        }
+
+        & > .mx_SpaceTreeLevel {
+            display: none;
+        }
+    }
+
+    .mx_SpaceItem_new {
+        position: relative;
+    }
+
+    .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+        margin-left: var(--gutterSize);
+        min-width: 40px;
+    }
+
+    .mx_SpaceButton {
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        padding: 4px 4px 4px 0;
+        width: 100%;
+        cursor: pointer;
+
+        &.mx_SpaceButton_active {
+            &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
+                background-color: var(--activeBackground-color);
+            }
+
+            &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+                padding: var(--activeBorder-transparent-gap);
+                border: 3px var(--activeBorder-color) solid;
+            }
+        }
+
+        .mx_SpaceButton_selectionWrapper {
+            position: relative;
+            display: flex;
+            flex: 1;
+            align-items: center;
+            border-radius: 12px;
+            padding: 4px;
+            width: calc(100% - 32px);
+            min-width: 0;
+        }
+
+        &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+            flex: initial;
+            width: 32px;
+        }
+
+        .mx_SpaceButton_name {
+            flex: 1;
+            margin-left: 8px;
+            white-space: nowrap;
+            display: block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font: var(--cpd-font-body-md-regular);
+        }
+
+        .mx_SpaceButton_toggleCollapse {
+            width: var(--gutterSize);
+            padding: 10px 0;
+            min-width: var(--gutterSize);
+            height: 20px;
+            mask-position: center;
+            mask-size: 20px;
+            mask-repeat: no-repeat;
+            background-color: $tertiary-content;
+            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+        }
+
+        .mx_SpaceButton_icon {
+            width: var(--height-topLevel);
+            min-width: var(--height-topLevel);
+            height: var(--height-topLevel);
+            border-radius: 8px;
+            position: relative;
+
+            &::before {
+                position: absolute;
+                content: "";
+                width: var(--height-topLevel);
+                height: var(--height-topLevel);
+                top: 0;
+                left: 0;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                mask-size: 18px;
+            }
+        }
+
+        &.mx_SpaceButton_home,
+        &.mx_SpaceButton_favourites,
+        &.mx_SpaceButton_people,
+        &.mx_SpaceButton_orphans,
+        &.mx_SpaceButton_videoRooms {
+            .mx_SpaceButton_icon {
+                background-color: $panel-actions;
+
+                &::before {
+                    background-color: $secondary-content;
+                }
+            }
+        }
+
+        &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
+            mask-image: url("$(res)/img/element-icons/home.svg");
+        }
+
+        &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
+            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+        }
+
+        &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
+            mask-image: url("$(res)/img/element-icons/room/members.svg");
+        }
+
+        &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
+            mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+        }
+
+        &.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
+        }
+
+        &.mx_SpaceButton_new .mx_SpaceButton_icon {
+            &::before {
+                background-color: $primary-content;
+                mask-image: url("$(res)/img/element-icons/plus.svg");
+                transition: all 0.2s ease-in-out; /* TODO transition */
+            }
+        }
+
+        &.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
+            transform: rotate(45deg);
+        }
+
+        .mx_SpaceButton_menuButton {
+            width: 20px;
+            min-width: 20px; /* yay flex */
+            height: 20px;
+            margin-top: auto;
+            margin-bottom: auto;
+            display: none;
+            position: absolute;
+            right: 4px;
+
+            &::before {
+                top: 3px;
+                left: 2px;
+                content: "";
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+                background: $primary-content;
+            }
+        }
+    }
+
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        min-width: 0;
+        flex-grow: 1;
+
+        .mx_SpaceTreeLevel {
+            /* Indent subspaces */
+            padding-left: 16px;
+        }
+    }
+
+    .mx_SpaceButton_avatarWrapper {
+        position: relative;
+        line-height: 0;
+    }
+
+    .mx_SpacePanel_badgeContainer {
+        /* Create a flexbox to make aligning dot badges easier */
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: -3px;
+        top: -3px;
+
+        .mx_NotificationBadge {
+            margin: 0 2px; /* centering */
+            background-clip: padding-box;
+        }
+
+        .mx_NotificationBadge_dot {
+            /* make the smaller dot occupy the same width for centering */
+            margin: 0 -1px 0 0;
+            border: 3px solid $spacePanel-bg-color;
+        }
+
+        .mx_NotificationBadge_2char,
+        .mx_NotificationBadge_3char {
+            margin: -5px -5px 0 0;
+            border: 2px solid $spacePanel-bg-color;
+        }
+    }
+
+    .mx_SpaceButton:hover,
+    .mx_SpaceButton:focus-within,
+    .mx_SpaceButton_hasMenuOpen {
+        &:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
+            display: block;
+        }
+    }
+
+    .mx_SpaceItem:not(.mx_SpaceItem_new) {
+        .mx_SpaceButton:hover,
+        .mx_SpaceButton:focus-within,
+        .mx_SpaceButton_hasMenuOpen {
+            &:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name {
+                max-width: calc(100% - 56px);
+            }
+        }
+    }
+
+    /* root space buttons are bigger and not indented */
+    & > .mx_AutoHideScrollbar {
+        flex: 1;
+        padding: 0 0 16px 0;
+        scrollbar-gutter: stable;
+
+        & > .mx_SpaceButton {
+            height: var(--height-topLevel);
+
+            &.mx_SpaceButton_active::before {
+                height: var(--height-topLevel);
+            }
+        }
+
+        & > ul {
+            padding-left: 0;
+        }
+
+        &.mx_IndicatorScrollbar_topOverflow {
+            mask-image: linear-gradient(to bottom, transparent, black 16px);
+        }
+
+        &.mx_IndicatorScrollbar_bottomOverflow {
+            mask-image: linear-gradient(
+                to top,
+                transparent,
+                rgba(255, 255, 255, 30%) 4px,
+                rgba(255, 255, 255, 55%) 8px,
+                rgba(255, 255, 255, 75%) 12px,
+                black 16px
+            );
+        }
+
+        &.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
+            /* This stacks two gradients on top of one another, which lets us
+               have a fixed pixel offset from both top and bottom for the colour stops.
+               Note the top fade is much smaller because the spaces start close to the top,
+               so otherwise a large gradient suddenly appears when you scroll down.
+             */
+            mask-image: linear-gradient(to bottom, transparent, black 16px),
+                linear-gradient(
+                    to top,
+                    transparent,
+                    rgba(255, 255, 255, 30%) 4px,
+                    rgba(255, 255, 255, 55%) 8px,
+                    rgba(255, 255, 255, 75%) 12px,
+                    black 16px
+                );
+            mask-position:
+                0% 0%,
+                0% 100%;
+            mask-size:
+                calc(100% - 10px) 50%,
+                calc(100% - 10px) 50%;
+            mask-repeat: no-repeat;
+        }
+    }
+
+    .mx_UserMenu {
+        padding-bottom: 12px;
+        border-bottom: 1px solid $separator;
+        margin: 12px 14px 4px 18px;
+        width: min-content;
+        max-width: 226px;
+
+        /* Display the container and img here as block elements so they don't take
+         * up extra vertical space.
+         */
+        .mx_UserMenu_userAvatar_BaseAvatar {
+            display: block;
+        }
+    }
+}
+
+.mx_SpacePanel_contextMenu {
+    max-width: 360px;
+
+    .mx_SpacePanel_contextMenu_header {
+        margin: 12px 16px 12px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .mx_SpacePanel_iconHome::before {
+        mask-image: url("$(res)/img/element-icons/home.svg");
+    }
+
+    .mx_SpacePanel_iconInvite::before {
+        mask-image: url("$(res)/img/element-icons/room/invite.svg");
+    }
+
+    .mx_SpacePanel_iconSettings::before {
+        mask-image: url("$(res)/img/element-icons/settings.svg");
+    }
+
+    .mx_SpacePanel_iconLeave::before {
+        mask-image: url("$(res)/img/element-icons/leave.svg");
+    }
+
+    .mx_SpacePanel_iconMembers::before {
+        mask-image: url("$(res)/img/element-icons/room/members.svg");
+    }
+
+    .mx_SpacePanel_iconPlus::before {
+        mask-image: url("$(res)/img/element-icons/plus.svg");
+    }
+
+    .mx_SpacePanel_iconExplore::before {
+        mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
+    }
+
+    .mx_SpacePanel_iconPreferences::before {
+        mask-image: url("$(res)/img/element-icons/settings/preference.svg");
+    }
+
+    .mx_SpacePanel_noIcon {
+        display: none;
+
+        & + .mx_IconizedContextMenu_label {
+            padding-left: 5px !important; /* override default iconized label style to align with header */
+        }
+    }
+
+    .mx_SpacePanel_contextMenu_separatorLabel {
+        color: $tertiary-content;
+        font-size: $font-10px;
+        line-height: $font-12px;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
+
+.mx_SpacePanel_sharePublicSpace {
+    margin: 0;
+}
+
+.mx_SpacePanel_Tooltip_KeyboardShortcut {
+    kbd {
+        font-family: inherit;
+        text-transform: capitalize;
+    }
+}
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -0,0 +1,299 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+@define-mixin SpacePillButton {
+    position: relative;
+    padding: 16px 32px 16px 72px;
+    width: 432px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid $input-border-color;
+    font-size: $font-17px;
+    font-weight: var(--cpd-font-weight-semibold);
+    margin: 20px 0;
+
+    > div {
+        margin-top: 4px;
+        font-weight: normal;
+        font-size: $font-15px;
+        color: $secondary-content;
+    }
+
+    &::before {
+        position: absolute;
+        content: "";
+        width: 24px;
+        height: 24px;
+        top: 27px;
+        left: 20px;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 24px;
+        background-color: $tertiary-content;
+    }
+
+    &:hover {
+        border-color: var(--cpd-color-bg-interactive-primary-rest);
+
+        &::before {
+            background-color: var(--cpd-color-icon-primary);
+        }
+
+        > span {
+            color: $primary-content;
+        }
+    }
+}
+
+.mx_SpaceRoomView {
+    --innerWidth: 428px;
+
+    overflow-y: auto;
+    flex: 1;
+
+    .mx_MainSplit > div:first-child {
+        padding: 80px 60px;
+        flex-grow: 1;
+        max-height: 100%;
+        overflow-y: auto;
+
+        h1 {
+            margin: 0;
+            font-size: $font-24px;
+            font-weight: var(--cpd-font-weight-semibold);
+            color: $primary-content;
+            width: max-content;
+        }
+
+        .mx_SpaceRoomView_description {
+            font-size: $font-15px;
+            color: $secondary-content;
+            margin-top: 12px;
+            margin-bottom: 24px;
+            max-width: var(--innerWidth);
+        }
+
+        .mx_AddExistingToSpace {
+            max-width: var(--innerWidth);
+
+            .mx_AddExistingToSpace_content {
+                height: calc(100vh - 360px);
+                max-height: 400px;
+            }
+        }
+
+        .mx_SpaceRoomView_buttons {
+            display: block;
+            margin-top: 44px;
+            width: var(--innerWidth);
+            text-align: right; /* button alignment right */
+
+            .mx_AccessibleButton_hasKind {
+                padding: 8px 22px;
+                margin-left: 16px;
+            }
+
+            input.mx_AccessibleButton {
+                border: none; /* override default styles */
+            }
+        }
+
+        .mx_Field {
+            max-width: var(--innerWidth);
+
+            & + .mx_Field {
+                margin-top: 28px;
+            }
+        }
+
+        .mx_SpaceRoomView_errorText {
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $alert;
+            margin-bottom: 28px;
+        }
+
+        .mx_AccessibleButton_disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    .mx_SpaceRoomView_landing {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+
+        .mx_SpaceRoomView_landing_header {
+            display: flex;
+            justify-content: space-between;
+
+            .mx_BaseAvatar {
+                width: 80px;
+            }
+        }
+
+        .mx_SpaceRoomView_landing_name {
+            margin: 24px 0 16px;
+            font-size: $font-15px;
+            color: $secondary-content;
+
+            > span {
+                display: flex;
+                flex-flow: column;
+                gap: 12px 0;
+
+                h1 {
+                    display: inline-block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 100%;
+                }
+            }
+
+            .mx_SpaceRoomView_landing_inviter {
+                .mx_BaseAvatar {
+                    margin-right: 4px;
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_infoBar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            flex-wrap: wrap;
+            line-height: $font-24px;
+
+            .mx_SpaceRoomView_landing_infoBar_interactive {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 12px 12px;
+
+                .mx_FacePile {
+                    display: inline-block;
+                    cursor: pointer;
+                }
+
+                .mx_SpaceRoomView_landing_inviteButton,
+                .mx_SpaceRoomView_landing_settingsButton {
+                    position: relative;
+
+                    &::before {
+                        position: absolute;
+                        content: "";
+                        mask-position: center;
+                        mask-repeat: no-repeat;
+                    }
+                }
+
+                .mx_SpaceRoomView_landing_inviteButton {
+                    padding: 4px 18px 4px 40px;
+                    height: min-content;
+
+                    &::before {
+                        left: 8px;
+                        height: 16px;
+                        width: 16px;
+                        background: var(--cpd-color-icon-on-solid-primary);
+                        mask-size: 16px;
+                        mask-image: url("$(res)/img/element-icons/room/invite.svg");
+                    }
+                }
+
+                .mx_SpaceRoomView_landing_settingsButton {
+                    width: 24px;
+                    height: 24px;
+
+                    &::before {
+                        left: 0;
+                        top: 0;
+                        height: 24px;
+                        width: 24px;
+                        background: $tertiary-content;
+                        mask-size: contain;
+                        mask-image: url("$(res)/img/element-icons/settings.svg");
+                    }
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_topic {
+            font-size: $font-15px;
+            margin-top: 12px;
+            margin-bottom: 16px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        .mx_SearchBox {
+            margin: 0 0 20px;
+            flex: 0;
+        }
+    }
+
+    .mx_SpaceRoomView_privateScope {
+        > .mx_AccessibleButton {
+            @mixin SpacePillButton;
+        }
+
+        .mx_SpaceRoomView_privateScope_justMeButton::before {
+            mask-image: url("$(res)/img/element-icons/room/members.svg");
+        }
+
+        .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
+            mask-image: url("$(res)/img/element-icons/group-members.svg");
+        }
+    }
+
+    .mx_SpaceRoomView_inviteTeammates {
+        .mx_SpaceRoomView_inviteTeammates_buttons {
+            color: $secondary-content;
+            margin-top: 28px;
+
+            .mx_AccessibleButton {
+                position: relative;
+                display: inline-block;
+                padding-left: 32px;
+                line-height: 24px; /* to center icons */
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: 0;
+                    left: 0;
+                    background-color: $secondary-content;
+                    mask-repeat: no-repeat;
+                    mask-position: center;
+                    mask-size: contain;
+                }
+
+                & + .mx_AccessibleButton {
+                    margin-left: 32px;
+                }
+            }
+
+            .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
+                color: var(--cpd-color-text-primary);
+                font-weight: var(--cpd-font-weight-semibold);
+                text-decoration: underline;
+
+                &::before {
+                    mask-image: url("$(res)/img/element-icons/room/invite.svg");
+                    background-color: var(--cpd-color-icon-primary);
+                }
+            }
+        }
+    }
+}
--- a/res/css/structures/_SplashPage.pcss
+++ b/res/css/structures/_SplashPage.pcss
@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SplashPage {
+    position: relative;
+    height: 100%;
+
+    &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        opacity: 0.6;
+        background-image: radial-gradient(
+                53.85% 66.75% at 87.55% 0%,
+                hsla(250deg, 76%, 71%, 0.261) 0%,
+                hsla(250deg, 100%, 88%, 0) 100%
+            ),
+            radial-gradient(41.93% 41.93% at 0% 0%, hsla(222deg, 29%, 20%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
+            radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.174) 0%, hsla(0deg, 100%, 86%, 0) 100%),
+            radial-gradient(106.35% 96.26% at 100% 0%, hsla(250deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%);
+        /* blur to reduce color banding issues due to alpha-blending multiple gradients */
+        filter: blur(8px);
+        inset: -9px;
+        mask:
+            /* mask to dither resulting combined gradient */
+            url("$(res)/img/noise.png"),
+            /* gradient to apply different amounts of dithering to different parts of the gradient */
+                linear-gradient(
+                    to bottom,
+                    /* 10% dithering at the top */ rgba(0, 0, 0, 0.9) 20%,
+                    /* 80% dithering at the bottom */ rgba(0, 0, 0, 0.2) 100%
+                );
+    }
+}
--- a/res/css/structures/_TabbedView.pcss
+++ b/res/css/structures/_TabbedView.pcss
@@ -0,0 +1,191 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+Copyright 2017 Travis Ralston
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_TabbedView {
+    margin: 0;
+    padding: 0 0 0 var(--cpd-space-8x);
+    display: flex;
+    flex-direction: column;
+    inset: 0;
+    margin-top: 8px;
+}
+
+.mx_TabbedView_tabsOnLeft {
+    flex-direction: column;
+    position: absolute;
+
+    .mx_TabbedView_tabLabels {
+        width: 220px;
+        max-width: 220px;
+        position: fixed;
+        margin: 0; /* Remove the default value */
+        padding: 0; /* Remove the default value */
+    }
+
+    .mx_TabbedView_tabPanel {
+        margin-left: 280px; /* 220px sidebar + 60px padding */
+        flex-direction: column;
+    }
+
+    .mx_TabbedView_tabLabel:hover,
+    .mx_TabbedView_tabLabel_active {
+        color: $tab-label-active-fg-color;
+
+        .mx_TabbedView_maskedIcon::before {
+            background-color: var(--cpd-color-icon-primary);
+        }
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        background-color: var(--cpd-color-bg-subtle-secondary);
+    }
+
+    .mx_TabbedView_maskedIcon {
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-3x);
+    }
+
+    .mx_TabbedView_maskedIcon::before {
+        mask-size: 20px;
+        width: 20px;
+        height: 20px;
+        transition: background-color 0.1s;
+    }
+}
+
+.mx_TabbedView_tabsOnTop {
+    flex-direction: column;
+
+    .mx_TabbedView_tabLabels {
+        display: flex;
+        margin-bottom: 8px;
+    }
+
+    .mx_TabbedView_tabLabel {
+        padding-left: 0px;
+        padding-right: 52px;
+
+        .mx_TabbedView_tabLabel_text {
+            font-size: 15px;
+            color: $tertiary-content;
+        }
+    }
+
+    .mx_TabbedView_tabPanel {
+        flex-direction: row;
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        color: $accent;
+        .mx_TabbedView_tabLabel_text {
+            color: $accent;
+        }
+    }
+
+    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
+        background-color: $accent;
+    }
+
+    .mx_TabbedView_maskedIcon {
+        width: 22px;
+        height: 22px;
+        margin-left: 0px;
+        margin-right: 8px;
+    }
+
+    .mx_TabbedView_maskedIcon::before {
+        mask-size: 22px;
+        width: inherit;
+        height: inherit;
+    }
+}
+
+.mx_TabbedView_tabLabels {
+    color: $tab-label-fg-color;
+}
+
+.mx_TabbedView_tabLabel {
+    display: flex;
+    align-items: center;
+    vertical-align: text-top;
+    cursor: pointer;
+    padding-block: var(--cpd-space-2x);
+    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
+    box-sizing: border-box;
+    min-block-size: 40px;
+    min-inline-size: 40px;
+    border-radius: 24px;
+    font: var(--cpd-font-body-md-medium);
+    position: relative;
+    transition:
+        color 0.1s,
+        background-color 0.1s;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-3x);
+    }
+}
+
+.mx_TabbedView_maskedIcon {
+    display: inline-block;
+}
+
+.mx_TabbedView_maskedIcon::before {
+    display: inline-block;
+    background-color: var(--cpd-color-icon-secondary);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    content: "";
+}
+
+.mx_TabbedView_tabLabel_text {
+    vertical-align: middle;
+}
+
+.mx_TabbedView_tabPanel {
+    flex-grow: 1;
+    display: flex;
+    min-height: 0; /* firefox */
+}
+
+.mx_TabbedView_tabPanelContent {
+    flex-grow: 1;
+    overflow: auto;
+    min-height: 0; /* firefox */
+}
+
+/* Hide the labels on tabs, showing only the icons, on narrow viewports. */
+@media (max-width: 1024px) {
+    .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
+        .mx_TabbedView_tabLabel_text {
+            display: none;
+        }
+        .mx_TabbedView_tabPanel {
+            margin-left: 72px; /* 40px sidebar + 32px padding */
+        }
+        .mx_TabbedView_maskedIcon {
+            margin-right: auto;
+            margin-left: auto;
+        }
+        .mx_TabbedView_tabLabels {
+            width: auto;
+        }
+        .mx_TabbedView_tabLabel {
+            padding-inline: 0 0;
+            justify-content: center;
+            svg {
+                margin-right: 0;
+            }
+        }
+    }
+}
--- a/res/css/structures/_ThreadsActivityCentre.pcss
+++ b/res/css/structures/_ThreadsActivityCentre.pcss
@@ -0,0 +1,84 @@
+/*
+* Copyright 2024 New Vector Ltd.
+* Copyright 2024 The Matrix.org Foundation C.I.C.
+*
+* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+* Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_ThreadsActivityCentre_container {
+    display: flex;
+}
+
+.mx_ThreadsActivityCentreButton {
+    border-radius: 8px;
+    margin: 18px auto auto auto;
+
+    &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
+        /* align with settings icon */
+        margin-left: 21px;
+
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the `Threads` label into the indicator icon button
+         **/
+        & > div {
+            display: flex;
+            align-items: center;
+        }
+
+        & .mx_ThreadsActivityCentreButton_Icon {
+            /* align with settings label */
+            margin-right: 14px;
+            /* required to set the icon width when into a flex container */
+            min-width: 24px;
+        }
+
+        & .mx_ThreadsActivityCentreButton_Text {
+            color: $secondary-content;
+        }
+    }
+
+    &:not(.expanded) {
+        &:hover,
+        &:hover .mx_ThreadsActivityCentreButton_Icon {
+            background-color: $quaternary-content;
+            color: $primary-content;
+        }
+    }
+
+    & .mx_ThreadsActivityCentreButton_Icon {
+        color: $secondary-content;
+    }
+}
+
+.mx_ThreadsActivityCentre_rows {
+    overflow-y: scroll;
+    /* Let some space at the top and the bottom of the pop-up */
+    max-height: calc(100vh - 200px);
+
+    .mx_ThreadsActivityCentreRow {
+        height: 48px;
+
+        /* Make the label of the MenuItem stay on one line and truncate with ellipsis if needed */
+        & > span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* Arbitrary size, keep the TAC as the wanted width */
+            width: 202px;
+        }
+    }
+}
+
+.mx_ThreadsActivityCentre_emptyCaption {
+    padding-left: 16px;
+    padding-right: 16px;
+    font-size: 13px;
+}
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@@ -0,0 +1,160 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ToastContainer {
+    position: absolute;
+    top: 0;
+    left: 70px;
+    z-index: 101;
+    padding: 4px;
+    display: grid;
+    grid-template-rows: 1fr 14px 6px;
+
+    &.mx_ToastContainer_stacked::before {
+        content: "";
+        margin: 0 4px;
+        grid-row: 2 / 4;
+        grid-column: 1;
+        background-color: $system;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+    }
+
+    .mx_Toast_toast {
+        grid-row: 1 / 3;
+        grid-column: 1;
+        background-color: var(--cpd-color-bg-canvas-default);
+        color: $primary-content;
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+        border-radius: 12px;
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: 22px 1fr;
+        column-gap: 8px;
+        row-gap: 4px;
+        padding: var(--cpd-space-3x);
+
+        &.mx_Toast_hasIcon {
+            &::before,
+            &::after {
+                content: "";
+                width: 22px;
+                height: 22px;
+                grid-column: 1;
+                grid-row: 1;
+                mask-size: 100%;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                background-size: 100%;
+                background-repeat: no-repeat;
+            }
+
+            &.mx_Toast_icon_verification::after {
+                mask-image: url("$(res)/img/e2e/normal.svg");
+                background-color: $primary-content;
+            }
+
+            &.mx_Toast_icon_verification_warning {
+                /* white infill for the hollow svg mask */
+                &::before {
+                    background-color: #ffffff;
+                    mask-image: url("$(res)/img/e2e/normal.svg");
+                    mask-size: 80%;
+                }
+
+                &::after {
+                    mask-image: url("$(res)/img/e2e/warning.svg");
+                    background-color: $e2e-warning-color;
+                }
+            }
+
+            &.mx_Toast_icon_secure_backup::after {
+                mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
+                background-color: $primary-content;
+            }
+
+            &.mx_Toast_icon_labs::after {
+                mask-image: url("$(res)/img/element-icons/flask.svg");
+                background-color: $secondary-content;
+            }
+
+            .mx_Toast_title,
+            .mx_Toast_body {
+                grid-column: 2;
+            }
+        }
+        &:not(.mx_Toast_hasIcon) {
+            padding-left: 12px;
+
+            .mx_Toast_title {
+                grid-column: 1 / -1;
+            }
+        }
+
+        .mx_Toast_title,
+        .mx_Toast_description {
+            padding-right: 8px;
+        }
+
+        .mx_Toast_title {
+            display: flex;
+            align-items: center;
+            column-gap: 8px;
+            width: 100%;
+            box-sizing: border-box;
+
+            h2 {
+                margin: 0;
+                font: var(--cpd-font-body-lg-semibold);
+                display: inline;
+                width: auto;
+            }
+
+            .mx_Toast_title_countIndicator {
+                font-size: $font-12px;
+                line-height: $font-22px;
+                color: $secondary-content;
+                margin-inline-start: auto; /* on the end side of the div */
+            }
+        }
+
+        .mx_Toast_body {
+            grid-column: 1 / 3;
+            grid-row: 2;
+        }
+
+        .mx_Toast_buttons {
+            display: flex;
+            justify-content: flex-end;
+            column-gap: 5px;
+
+            .mx_AccessibleButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
+        }
+
+        .mx_Toast_description {
+            max-width: 272px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 4px 0 11px 0;
+            color: $secondary-content;
+            font: var(--cpd-font-body-sm-regular);
+
+            a {
+                text-decoration: none;
+            }
+        }
+
+        .mx_Toast_deviceID {
+            font-size: $font-10px;
+        }
+    }
+}
--- a/res/css/structures/_UploadBar.pcss
+++ b/res/css/structures/_UploadBar.pcss
@@ -0,0 +1,59 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 , 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UploadBar {
+    padding-left: 65px; /* line up with the shield area in the composer */
+    padding-top: 5px;
+    position: relative;
+
+    .mx_ProgressBar {
+        width: calc(100% - 40px); /* cheating at a right margin */
+    }
+}
+
+.mx_ThreadView {
+    .mx_UploadBar {
+        padding-left: 0;
+    }
+}
+
+.mx_UploadBar_filename {
+    color: $muted-fg-color;
+    position: relative;
+    padding-right: 38px; /* 32px for cancel icon, 6px for padding */
+    padding-left: 22px; /* 18px for icon, 4px for padding */
+    font-size: $font-15px;
+    vertical-align: middle;
+
+    &::before {
+        content: "";
+        height: 18px;
+        width: 18px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: $muted-fg-color;
+        mask-image: url("$(res)/img/element-icons/upload.svg");
+    }
+}
+
+.mx_UploadBar_cancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 16px;
+    width: 16px;
+    margin-right: 16px; /* align over rightmost button in composer */
+    margin-top: 5px;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $muted-fg-color;
+    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+}
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@@ -0,0 +1,206 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserMenu {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .mx_AccessibleButton {
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenu_userAvatar {
+            position: relative;
+
+            .mx_BaseAvatar {
+                pointer-events: none; /* makes the avatar non-draggable */
+            }
+        }
+
+        .mx_UserMenu_userAvatarLive {
+            align-items: center;
+            background-color: $alert;
+            border-radius: 6px;
+            color: $live-badge-color;
+            display: flex;
+            height: 12px;
+            justify-content: center;
+            left: 25px;
+            position: absolute;
+            top: 20px;
+            width: 12px;
+        }
+    }
+
+    .mx_UserMenu_contextMenuButton {
+        width: 100%;
+    }
+
+    .mx_UserMenu_name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        margin-left: 10px;
+    }
+
+    .mx_UserMenu_dndBadge {
+        position: absolute;
+        bottom: -2px;
+        right: -7px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+
+        &::before {
+            content: "";
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: $alert;
+            mask-image: url("$(res)/img/element-icons/roomlist/dnd.svg");
+        }
+    }
+}
+
+.mx_IconizedContextMenu {
+    &.mx_UserMenu_contextMenu {
+        width: 258px;
+    }
+}
+
+.mx_UserMenu_contextMenu {
+    &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
+        .mx_AccessibleButton {
+            padding-top: 16px;
+            padding-bottom: 16px;
+        }
+    }
+
+    .mx_UserMenu_contextMenu_header {
+        padding: 20px;
+
+        /* Create a flexbox to organize the header a bit easier */
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenu_contextMenu_name {
+            /* Create another flexbox of columns to handle large user IDs */
+            display: flex;
+            flex-direction: column;
+            width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
+
+            .mx_UserMenu_contextMenu_displayName,
+            .mx_UserMenu_contextMenu_userId {
+                font: var(--cpd-font-body-lg-regular);
+
+                /* Automatically grow subelements to fit the container */
+                flex: 1;
+                width: 100%;
+
+                /* Ellipsize text overflow */
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .mx_UserMenu_contextMenu_displayName {
+                font-weight: var(--cpd-font-weight-semibold);
+            }
+        }
+
+        .mx_UserMenu_contextMenu_themeButton {
+            min-width: 32px;
+            max-width: 32px;
+            width: 32px;
+            height: 32px;
+            margin-left: 8px;
+            border-radius: 32px;
+            background-color: $theme-button-bg-color;
+            cursor: pointer;
+
+            /* to make alignment easier, create flexbox for the image */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.mx_UserMenu_contextMenu_guestPrompts {
+            padding-top: 0;
+            display: inline-block;
+
+            > span {
+                font-weight: var(--cpd-font-weight-semibold);
+                display: block;
+
+                & + span {
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+
+        &::before {
+            content: "";
+            width: 16px;
+            height: 16px;
+            display: block;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $icon-button-color;
+        }
+    }
+
+    .mx_UserMenu_iconHome::before {
+        mask-image: url("$(res)/img/element-icons/home.svg");
+    }
+
+    .mx_UserMenu_iconDnd::before {
+        mask-image: url("$(res)/img/element-icons/roomlist/dnd.svg");
+    }
+
+    .mx_UserMenu_iconDndOff::before {
+        mask-image: url("$(res)/img/element-icons/roomlist/dnd-cross.svg");
+    }
+
+    .mx_UserMenu_iconBell::before {
+        mask-image: url("$(res)/img/element-icons/notifications.svg");
+    }
+
+    .mx_UserMenu_iconLock::before {
+        mask-image: url("$(res)/img/element-icons/security.svg");
+    }
+
+    .mx_UserMenu_iconSettings::before {
+        mask-image: url("$(res)/img/element-icons/settings.svg");
+    }
+
+    .mx_UserMenu_iconMessage::before {
+        mask-image: url("$(res)/img/element-icons/feedback.svg");
+    }
+
+    .mx_UserMenu_iconSignOut::before {
+        mask-image: url("$(res)/img/element-icons/leave.svg");
+    }
+
+    .mx_UserMenu_iconQr::before {
+        mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
+    }
+}
--- a/res/css/structures/_ViewSource.pcss
+++ b/res/css/structures/_ViewSource.pcss
@@ -0,0 +1,44 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ViewSource {
+    pre {
+        font-size: $font-12px;
+        padding: 0.5em 1em;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
+
+    .mx_ViewSource_header {
+        border-bottom: 1px solid $quinary-content;
+        padding-bottom: $spacing-12;
+        margin-bottom: $spacing-12;
+        font-family: monospace;
+
+        .mx_CopyableText {
+            word-break: break-all;
+        }
+    }
+
+    .mx_ViewSource_heading {
+        font-size: $font-17px;
+        font-weight: 400;
+        color: $primary-content;
+        margin-top: $spacing-12;
+    }
+
+    .mx_ViewSource_details {
+        margin-top: $spacing-12;
+    }
+
+    .mx_CopyableText_border {
+        box-sizing: border-box;
+        width: 100%;
+    }
+}
--- a/res/css/structures/auth/_CompleteSecurity.pcss
+++ b/res/css/structures/auth/_CompleteSecurity.pcss
@@ -0,0 +1,54 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CompleteSecurity_header {
+    display: flex;
+    align-items: center;
+}
+
+.mx_CompleteSecurity_headerIcon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    position: relative;
+}
+
+.mx_CompleteSecurity_heroIcon {
+    width: 128px;
+    height: 128px;
+    position: relative;
+    margin: 0 auto;
+}
+
+.mx_CompleteSecurity_skip {
+    @mixin customisedCancelButton;
+    position: absolute;
+    right: 24px;
+}
+
+.mx_CompleteSecurity_body {
+    font-size: $font-15px;
+}
+
+.mx_CompleteSecurity_waiting {
+    color: $tertiary-content;
+}
+
+.mx_CompleteSecurity_actionRow {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $font-28px;
+
+    .mx_AccessibleButton {
+        margin-inline-start: 18px;
+
+        &.warning {
+            color: $alert;
+        }
+    }
+}
--- a/res/css/structures/auth/_ConfirmSessionLockTheftView.pcss
+++ b/res/css/structures/auth/_ConfirmSessionLockTheftView.pcss
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ConfirmSessionLockTheftView {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ConfirmSessionLockTheftView_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+}
--- a/res/css/structures/auth/_Login.pcss
+++ b/res/css/structures/auth/_Login.pcss
@@ -0,0 +1,97 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Login_submit {
+    @mixin mx_DialogButton;
+    font-size: 15px;
+    font-weight: var(--cpd-font-weight-semibold);
+    width: 100%;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.mx_Login_submit:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.mx_Login_loader {
+    display: inline;
+    position: relative;
+    top: 2px;
+    left: 8px;
+}
+
+.mx_Login_loader .mx_Spinner {
+    display: inline;
+}
+
+.mx_Login_loader .mx_Spinner img {
+    width: 16px;
+    height: 16px;
+}
+
+.mx_Login_error {
+    color: $alert;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.mx_Login_error.mx_Login_serverError {
+    text-align: left;
+    font-weight: normal;
+}
+
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+    color: #ff8d13; /* Only used here */
+}
+
+.mx_Login_type_container {
+    display: flex;
+    align-items: center;
+    color: $authpage-primary-color;
+
+    .mx_Field {
+        margin: 0;
+    }
+}
+
+.mx_Login_type_label {
+    flex: 1;
+}
+
+.mx_Login_underlinedServerName {
+    width: max-content;
+    border-bottom: 1px dashed $accent;
+}
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    display: block;
+    margin-top: 24px;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}
+
+.mx_Login_spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    padding: 14px;
+}
+
+.mx_Login_fullWidthButton {
+    width: 100%;
+    margin-bottom: 16px;
+}
--- a/res/css/structures/auth/_LoginSplashView.pcss
+++ b/res/css/structures/auth/_LoginSplashView.pcss
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015-2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LoginSplashView_migrationProgress {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .mx_ProgressBar {
+        height: 8px;
+        width: 600px;
+
+        @mixin ProgressBarBorderRadius 8px;
+    }
+}
+
+.mx_LoginSplashView_splashButtons {
+    text-align: center;
+    width: 100%;
+    position: absolute;
+    bottom: 30px;
+}
+
+.mx_LoginSplashView_syncError {
+    color: $accent-fg-color;
+    background-color: #df2a8b; /* Only used here */
+    border-radius: 5px;
+    display: table;
+    padding: 30px;
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+}
--- a/res/css/structures/auth/_MobileRegistration.pcss
+++ b/res/css/structures/auth/_MobileRegistration.pcss
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MobileRegister_body {
+    padding: 32px;
+    height: 100vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
--- a/res/css/structures/auth/_Registration.pcss
+++ b/res/css/structures/auth/_Registration.pcss
@@ -0,0 +1,45 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Register_mainContent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 270px;
+
+    p {
+        font: var(--cpd-font-body-md-regular);
+        color: $authpage-primary-color;
+
+        &.secondary {
+            color: $authpage-secondary-color;
+        }
+    }
+
+    > img:first-child {
+        margin-bottom: 16px;
+        width: max-content;
+    }
+
+    .mx_Login_submit {
+        margin-bottom: 0;
+    }
+}
+
+.mx_Register_footerActions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid rgba(141, 151, 165, 0.2);
+
+    > * {
+        flex-basis: content;
+    }
+}
--- a/res/css/structures/auth/_SessionLockStolenView.pcss
+++ b/res/css/structures/auth/_SessionLockStolenView.pcss
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SessionLockStolenView {
+    h1 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-32px;
+        text-align: center;
+    }
+
+    h2 {
+        margin: 0;
+        font-weight: 500;
+        font-size: $font-24px;
+        text-align: center;
+    }
+}
--- a/res/css/structures/auth/_SetupEncryptionBody.pcss
+++ b/res/css/structures/auth/_SetupEncryptionBody.pcss
@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SetupEncryptionBody_reset {
+    color: $light-fg-color;
+    margin-top: $font-14px;
+
+    .mx_SetupEncryptionBody_reset_link {
+        &.mx_AccessibleButton_kind_link_inline {
+            color: $alert;
+        }
+    }
+}