New memberlist

package.json

@@ -88,7 +88,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^2.0.1",
+        "@vector-im/compound-design-tokens": "^2.1.0",
         "@vector-im/compound-web": "^7.5.0",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -149,7 +149,9 @@
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
-        "what-input": "^5.2.10"
+        "what-input": "^5.2.10",
+        "@types/react-virtualized": "^9.21.30",
+        "react-virtualized": "^9.22.5"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",

playwright/e2e/crypto/dehydration.spec.ts

@@ -39,7 +39,7 @@ const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("Dehydration", () => {
@@ -93,7 +93,7 @@ test.describe("Dehydration", () => {
         await viewRoomSummaryByName(page, app, ROOM_NAME);
 
         await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberList")).toBeVisible();
+        await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
         await getMemberTileByName(page, NAME).click();
         await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -77,7 +77,7 @@ test.describe("Lazy Loading", () => {
     }
 
     function getMemberInMemberlist(page: Page, name: string): Locator {
-        return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name });
+        return page.locator(".mx_MemberListView .mx_MemberTileView_name").filter({ hasText: name });
     }
 
     async function checkMemberList(page: Page, charlies: Bot[]) {

playwright/e2e/right-panel/right-panel.spec.ts

@@ -24,7 +24,7 @@
     "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("RightPanel", () => {
@@ -48,7 +48,7 @@
             const localAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Local Addresses" });
             await localAddresses.getByRole("textbox").fill(ROOM_ADDRESS_LONG);
             await localAddresses.getByRole("button", { name: "Add" }).click();
             await expect(localAddresses.getByText(`#${ROOM_ADDRESS_LONG}:localhost`)).toHaveClass(
                 "mx_EditableItem_item",
             );
 
@@ -107,14 +107,14 @@
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
             await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
@@ -130,14 +130,14 @@
                 .locator(".mx_RoomInfoLine_private")
                 .getByRole("button", { name: /\d member/ })
                 .click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
         });
     });
 });

res/css/_components.pcss

@@ -290,11 +290,14 @@
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
-@import "./views/rooms/_MemberList.pcss";
+@import "./views/rooms/_MemberListHeaderView.pcss";
+@import "./views/rooms/_MemberListView.pcss";
+@import "./views/rooms/_MemberTileView.pcss";
 @import "./views/rooms/_MessageComposer.pcss";
 @import "./views/rooms/_MessageComposerFormatBar.pcss";
 @import "./views/rooms/_NewRoomIntro.pcss";
 @import "./views/rooms/_NotificationBadge.pcss";
+@import "./views/rooms/_OverflowTile.pcss";
 @import "./views/rooms/_PinnedEventTile.pcss";
 @import "./views/rooms/_PinnedMessageBanner.pcss";
 @import "./views/rooms/_PresenceLabel.pcss";

res/css/views/messages/_DisambiguatedProfile.pcss

@@ -21,8 +21,28 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_DisambiguatedProfile_mxid {
-        margin-inline-start: 5px;
         color: $secondary-content;
         font-size: var(--cpd-font-size-body-sm);
+        margin-inline-start: 5px;
+    }
+}
+
+.mx_MemberTileView .mx_DisambiguatedProfile {
+    display: flex;
+    flex-direction: column;
+
+    .mx_DisambiguatedProfile_mxid {
+        margin-inline-start: 0;
+        font: var(--cpd-font-body-sm-regular);
+    }
+
+    span:not(.mx_DisambiguatedProfile_mxid) {
+        /**
+        In a member tile, this span element is a flex child and so
+        we need the following for text overflow to work.
+        **/
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }

res/css/views/rooms/_MemberListHeaderView.pcss

@@ -0,0 +1,38 @@
+/*
+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_MemberListHeaderView {
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+    max-height: 112px;
+
+    .mx_MemberListHeaderView_container {
+        margin-top: var(--cpd-space-6x);
+        width: 100%;
+    }
+
+    .mx_MemberListHeaderView_invite_small {
+        margin-left: var(--cpd-space-3x);
+    }
+
+    .mx_MemberListHeaderView_invite_large {
+        width: 288px;
+        height: 36px;
+    }
+
+    .mx_MemberListHeaderView_label {
+        padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x);
+        box-sizing: border-box;
+        width: 100%;
+        color: var(--cpd-color-text-secondary);
+        font: var(--cpd-font-body-sm-semibold);
+    }
+
+    .mx_MemberListHeaderView_search {
+        width: 240px;
+    }
+}

res/css/views/rooms/_MemberListView.pcss

@@ -0,0 +1,18 @@
+/*
+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_MemberListView {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .mx_MemberListView_container {
+        height: 100%;
+    }
+}

res/css/views/rooms/_MemberTileView.pcss

@@ -0,0 +1,51 @@
+.mx_MemberTileView {
+    display: flex;
+    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
+    box-sizing: border-box;
+    height: 56px;
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300);
+
+    .mx_MemberTileView_left,
+    .mx_MemberTileView_right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .mx_MemberTileView_left {
+        flex-basis: 209px;
+        flex-grow: 1;
+        min-width: 0;
+    }
+
+    .mx_MemberTileView_name {
+        font: var(--cpd-font-body-md-medium);
+        font-size: 15px;
+        min-width: 0;
+    }
+
+    .mx_MemberTileView_user_label {
+        font: var(--cpd-font-body-sm-regular);
+        font-size: 13px;
+    }
+
+    .mx_MemberTileView_avatar {
+        position: relative;
+        height: 32px;
+        width: 32px;
+    }
+
+    .mx_E2EIconView {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .mx_E2EIconView_warning {
+        color: var(--cpd-color-icon-critical-primary);
+    }
+
+    .mx_E2EIconView_verified {
+        color: var(--cpd-color-icon-success-primary);
+    }
+}

res/css/views/rooms/_OverflowTile.pcss

@@ -0,0 +1,42 @@
+.mx_OverflowTileView {
+    display: flex;
+    align-items: center;
+    color: $primary-content;
+    cursor: pointer;
+}
+
+.mx_OverflowTileView_text {
+    flex: 1 1 0;
+    overflow: hidden;
+    font: var(--cpd-font-body-md-regular);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-style: italic;
+}
+
+.mx_OverflowTileView:hover {
+    padding-right: 30px;
+    position: relative; /* to keep the chevron aligned */
+}
+
+.mx_OverflowTileView:hover::before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 8px); /* center */
+    right: -8px;
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 16px;
+    height: 16px;
+    background-color: $header-panel-text-primary-color;
+}
+
+.mx_OverflowTileView_icon {
+    padding-left: 3px;
+    padding-right: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    position: relative;
+    line-height: 0;
+}

res/css/views/rooms/_PresenceLabel.pcss

@@ -14,3 +14,29 @@ Please see LICENSE files in the repository root for full details.
 .mx_PresenceLabel_online {
     color: var(--cpd-color-text-success-primary);
 }
+
+.mx_PresenceIconView {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--cpd-color-bg-canvas-default);
+    border-radius: 100%;
+
+    .mx_PresenceIconView_online {
+        color: var(--cpd-color-icon-accent-primary);
+    }
+
+    .mx_PresenceIconView_offline,
+    .mx_PresenceIconView_dnd {
+        color: var(--cpd-color-icon-tertiary);
+    }
+
+    .mx_PresenceIconView_unavailable {
+        color: var(--cpd-color-icon-quaternary);
+    }
+}

src/components/structures/MainSplit.tsx

@@ -99,7 +99,7 @@ export default class MainSplit extends React.Component<IProps> {
                 <Resizable
                     key={this.props.sizeKey}
                     defaultSize={this.loadSidePanelSize()}
-                    minWidth={264}
+                    minWidth={320}
                     maxWidth="50%"
                     enable={{
                         top: false,