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

src/components/views/rooms/RoomListPanel/RoomList.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+import React, { useCallback, type JSX } from "react";
+import { AutoSizer, List, type ListRowProps } from "react-virtualized";
+
+import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { _t } from "../../../../languageHandler";
+import { RoomListCell } from "./RoomListCell";
+
+interface RoomListProps {
+    /**
+     * The view model state for the room list.
+     */
+    vm: RoomListViewState;
+}
+
+/**
+ * A virtualized list of rooms.
+ */
+export function RoomList({ vm: { rooms, openRoom } }: RoomListProps): JSX.Element {
+    const roomRendererMemoized = useCallback(
+        ({ key, index, style }: ListRowProps) => (
+            <RoomListCell room={rooms[index]} key={key} style={style} onClick={() => openRoom(rooms[index].roomId)} />
+        ),
+        [rooms, openRoom],
+    );
+
+    // The first div is needed to make the virtualized list take all the remaining space and scroll correctly
+    return (
+        <div className="mx_RoomList" data-testid="room-list">
+            <AutoSizer>
+                {({ height, width }) => (
+                    <List
+                        aria-label={_t("room_list|list_title")}
+                        className="mx_RoomList_List"
+                        rowRenderer={roomRendererMemoized}
+                        rowCount={rooms.length}
+                        rowHeight={48}
+                        height={height}
+                        width={width}
+                    />
+                )}
+            </AutoSizer>
+        </div>
+    );
+}

src/components/views/rooms/RoomListPanel/RoomListCell.tsx

@@ -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.
+ */
+
+import React, { type JSX } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
+
+import { _t } from "../../../../languageHandler";
+import { Flex } from "../../../utils/Flex";
+import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
+
+interface RoomListCellProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * The room to display
+     */
+    room: Room;
+}
+
+/**
+ * A cell in the room list
+ */
+export function RoomListCell({ room, ...props }: RoomListCellProps): JSX.Element {
+    return (
+        <button
+            className="mx_RoomListCell"
+            type="button"
+            aria-label={_t("room_list|room|open_room", { roomName: room.name })}
+            {...props}
+        >
+            {/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
+            <Flex className="mx_RoomListCell_container" gap="var(--cpd-space-3x)" align="center">
+                <DecoratedRoomAvatar room={room} size="32px" />
+                <Flex className="mx_RoomListCell_content" align="center">
+                    {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                    <span title={room.name}>{room.name}</span>
+                    {/* Future hover menu et notification badges */}
+                </Flex>
+            </Flex>
+        </button>
+    );
+}

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -6,14 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { AutoSizer, List } from "react-virtualized";
 
-import type { ListRowProps } from "react-virtualized";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
-import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { RoomListView } from "./RoomListView";
+import { Flex } from "../../../utils/Flex";
 
 type RoomListPanelProps = {
     /**
@@ -28,31 +27,18 @@ type RoomListPanelProps = {
  */
 export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
-    const { rooms } = useRoomListViewModel();
-
-    const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
-        return (
-            <div key={key} style={style}>
-                {rooms[index].name}
-            </div>
-        );
-    };
 
     return (
-        <section className="mx_RoomListPanel" data-testid="room-list-panel">
+        <Flex
+            as="section"
+            className="mx_RoomListPanel"
+            data-testid="room-list-panel"
+            direction="column"
+            align="stretch"
+        >
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
-            <AutoSizer>
-                {({ height, width }) => (
-                    <List
-                        rowRenderer={rowRenderer}
-                        rowCount={rooms.length}
-                        rowHeight={20}
-                        height={height}
-                        width={width}
-                    />
-                )}
-            </AutoSizer>
-        </section>
+            <RoomListView />
+        </Flex>
     );
 };

src/components/views/rooms/RoomListPanel/RoomListView.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+import React, { type JSX } from "react";
+
+import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { RoomList } from "./RoomList";
+
+/**
+ * Host the room list and the (future) room filters
+ */
+export function RoomListView(): JSX.Element {
+    const vm = useRoomListViewModel();
+    // Room filters will be added soon
+    return <RoomList vm={vm} />;
+}

src/i18n/strings/en_EN.json

@@ -2104,12 +2104,16 @@
             "one": "Currently joining %(count)s room",
             "other": "Currently joining %(count)s rooms"
         },
+        "list_title": "Room list",
         "notification_options": "Notification options",
         "open_space_menu": "Open space menu",
         "redacting_messages_status": {
             "one": "Currently removing messages in %(count)s room",
             "other": "Currently removing messages in %(count)s rooms"
         },
+        "room": {
+            "open_room": "Open room %(roomName)s"
+        },
         "show_less": "Show less",
         "show_n_more": {
             "one": "Show %(count)s more",