feat: show call participants in room list (Discord-style)

apps/web/res/css/structures/_LeftPanel.pcss

@@ -0,0 +1,232 @@
+/*
+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 OR LicenseRef-Element-Commercial
+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;
+}
+
+.mx_LeftPanel_wrapper,
+.mx_LeftPanel {
+    --collapsedWidth: 68px;
+}
+
+.mx_LeftPanel_panel {
+    .mx_LeftPanel_outerWrapper {
+        height: 100%;
+        max-width: none;
+    }
+
+    .mx_LeftPanel_wrapper--user {
+        width: 100%;
+    }
+}
+
+.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;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
+
+        &[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_LegacyRoomListHeader {
+                margin-top: 12px;
+            }
+
+            .mx_LeftPanel_dialPadButton,
+            .mx_LeftPanel_exploreButton {
+                width: 20px;
+                height: 20px;
+                padding: var(--cpd-space-1-5x);
+                border-radius: 8px;
+                background-color: $panel-actions;
+                margin-left: 8px;
+                /* For enhanced visibility under contrast control */
+                outline: 1px solid transparent;
+
+                svg {
+                    width: inherit;
+                    height: inherit;
+                    display: block;
+                    color: $secondary-content;
+                }
+
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    svg {
+                        color: $background;
+                    }
+                }
+            }
+        }
+
+        .mx_LegacyRoomListHeader: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 {
+                    margin-left: 0;
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+}
+
+.mx_LeftPanel_newRoomList {
+    /* Thew new rooms list is not designed to be collapsed to just icons. */
+    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
+    --collapsedWidth: 224px;
+    /* Important to force the color on ED titlebar until we remove the old room list */
+    background-color: var(--cpd-color-bg-canvas-default) !important;
+}
+
+#left-panel .mx_LeftPanel_wrapper--user {
+    /*
+     * Disable background when using the new room list.
+     * This background sometimes shows when the panel is resized and it looks like a thicker border.
+     */
+    background: none;
+}