New room list: basic flat list (#29368)

* chore: make the room list panel a flexbox

* feat(new room list): add `RoomListCell` component

* feat(new room list): add virtualized `RoomList` component

* feat(new room list): add `RoomListView` component

* feat(new room list): use `RoomListView` in `RoomListPanel`

* test(new room list): add test for room cell

* test(new room list): update room list panel tests

* test(new room list): add test to virtualized room list

* test(e2e): add room list tests

* test(e2e): update room panel tests

res/css/_components.pcss

@@ -269,6 +269,8 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/RoomListPanel/_RoomList.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListCell.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";

res/css/views/rooms/RoomListPanel/_RoomList.pcss

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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_RoomList {
+    height: 100%;
+
+    .mx_RoomList_List {
+        /* Avoid when on hover, the background color to be on top of the right border */
+        padding-right: 1px;
+    }
+}

res/css/views/rooms/RoomListPanel/_RoomListCell.pcss

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * 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.
+ */
+
+/**
+ * The RoomCell has the following structure:
+ * button----------------------------------------|
+ * | <-12px-> container--------------------------|
+ * |          | room avatar <-12px-> content-----|
+ * |          |                      | room_name |
+ * |          |                      | ----------| <-- border
+ * |---------------------------------------------|
+ */
+.mx_RoomListCell {
+    all: unset;
+
+    &:hover {
+        background-color: var(--cpd-color-bg-action-secondary-hovered);
+    }
+
+    .mx_RoomListCell_container {
+        padding-left: var(--cpd-space-3x);
+        font: var(--cpd-font-body-md-regular);
+        height: 100%;
+
+        .mx_RoomListCell_content {
+            height: 100%;
+            flex: 1;
+            /* The border is only under the room name and the future hover menu  */
+            border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
+            box-sizing: border-box;
+            min-width: 0;
+
+            span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}

res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss

@@ -6,7 +6,7 @@
  */
 
 .mx_RoomListHeaderView {
-    height: 60px;
+    flex: 0 0 60px;
     padding: 0 var(--cpd-space-3x);
 
     .mx_RoomListHeaderView_title {

res/css/views/rooms/RoomListPanel/_RoomListSearch.pcss

@@ -7,7 +7,7 @@
 
 .mx_RoomListSearch {
     /* From figma, this should be aligned with the room header */
-    height: 64px;
+    flex: 0 0 64px;
     box-sizing: border-box;
     border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
     padding: 0 var(--cpd-space-3x);