draft

res/css/_components.pcss

@@ -269,6 +269,7 @@
 @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/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";

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

@@ -0,0 +1,33 @@
+/*
+ * 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 {
+    padding-right: 1px;
+    .mx_RoomList_roomRenderer {
+        all: unset;
+
+        .mx_RoomList_roomRenderer_container {
+            display: flex;
+            gap: var(--cpd-space-3x);
+            align-items: center;
+            padding-left: var(--cpd-space-3x);
+            font: var(--cpd-font-body-md-regular);
+            height: 100%;
+        }
+
+        .mx_RoomList_roomRenderer_container:hover {
+            background-color: var(--cpd-color-bg-action-secondary-hovered);
+        }
+
+        .mx_RoomList_roomRenderer_content {
+            height: 100%;
+            flex: 1;
+            border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
+            box-sizing: border-box;
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+/*
+ * 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 { Room } from "../../../../../../matrix-js-sdk/src";
+import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
+import { _t } from "../../../../languageHandler";
+import { Flex } from "../../../utils/Flex";
+
+interface RoomListProps {
+    vm: RoomListViewState;
+}
+
+export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
+    const roomRendererMemoized = useCallback(
+        (listRowProps: ListRowProps) => roomRenderer(rooms, listRowProps),
+        [rooms],
+    );
+
+    return (
+        <AutoSizer>
+            {({ height, width }) => (
+                <List
+                    aria-label={_t("room_list|list_title")}
+                    className="mx_RoomList"
+                    rowRenderer={roomRendererMemoized}
+                    rowCount={rooms.length}
+                    rowHeight={48}
+                    height={height}
+                    width={width}
+                />
+            )}
+        </AutoSizer>
+    );
+}
+
+function roomRenderer(rooms: Room[], { key, index, style }: ListRowProps): JSX.Element {
+    const room = rooms[index];
+    return (
+        <button
+            className="mx_RoomList_roomRenderer"
+            type="button"
+            key={key}
+            style={style}
+            aria-label={_t("room_list|room|Open room %(roomName)s", { roomName: room.name })}
+        >
+            <div className="mx_RoomList_roomRenderer_container">
+                <DecoratedRoomAvatar room={room} size="32px" />
+                <Flex className="mx_RoomList_roomRenderer_content" align="center">
+                    {room.name}
+                    {/* Future hover menu et notification badges */}
+                </Flex>
+            </div>
+        </button>
+    );
+}

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

@@ -6,14 +6,12 @@ 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";
 
 type RoomListPanelProps = {
     /**
@@ -28,31 +26,12 @@ 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">
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
-            <AutoSizer>
-                {({ height, width }) => (
-                    <List
-                        rowRenderer={rowRenderer}
-                        rowCount={rooms.length}
-                        rowHeight={20}
-                        height={height}
-                        width={width}
-                    />
-                )}
-            </AutoSizer>
+            <RoomListView />
         </section>
     );
 };

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

@@ -0,0 +1,17 @@
+/*
+ * 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";
+
+export function RoomListView(): JSX.Element {
+    const vm = useRoomListViewModel();
+    // Room filters will be added soon
+    return <RoomList vm={vm} />;
+}