First step to add header to new room list (#29320)

* feat: create new header

* test: add tests to view model

* test: add tests to view

* feat: add header to new room list

* test(e2e): update RoomListView snapshot

* test(e2e): add tests for room list header

* refactor: minor code improvement

playwright/e2e/left-panel/room-list-view/room-list-header.spec.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 { test, expect } from "../../../element-web-test";
+import type { Page } from "@playwright/test";
+
+test.describe("Header section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the header section of the room list
+     * @param page
+     */
+    function getHeaderSection(page: Page) {
+        return page.getByTestId("room-list-header");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader).toMatchScreenshot("room-list-header.png");
+
+        const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
+        await composeMenu.click();
+
+        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
+
+        // New message should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "New message" }).click();
+        await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
+        await app.closeDialog();
+
+        // New room should open the room creation dialog
+        await composeMenu.click();
+        await page.getByRole("menuitem", { name: "New room" }).click();
+        await expect(page.getByRole("heading", { name: "Create a private room" })).toBeVisible();
+        await app.closeDialog();
+    });
+
+    test("should render the header section for a space", async ({ page, app, user }) => {
+        await app.client.createSpace({ name: "MySpace" });
+        await page.getByRole("button", { name: "MySpace" }).click();
+
+        const roomListHeader = getHeaderSection(page);
+        await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
+        await expect(roomListHeader.getByRole("button", { name: "Add" })).not.toBeVisible();
+    });
+});

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/RoomListView/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListView/_RoomListSearch.pcss";
 @import "./views/rooms/RoomListView/_RoomListView.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";

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

@@ -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.
+ */
+
+.mx_RoomListHeaderView {
+    height: 60px;
+    padding: 0 var(--cpd-space-3x);
+
+    h1 {
+        all: unset;
+        font: var(--cpd-font-body-lg-semibold);
+    }
+
+    button {
+        color: var(--cpd-color-icon-secondary);
+    }
+}

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 { useCallback } from "react";
+import { type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
+
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
+import { useFeatureEnabled } from "../../../hooks/useSettings";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import PosthogTrackers from "../../../PosthogTrackers";
+import { Action } from "../../../dispatcher/actions";
+import { useEventEmitterState, useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
+import {
+    getMetaSpaceName,
+    type MetaSpace,
+    type SpaceKey,
+    UPDATE_HOME_BEHAVIOUR,
+    UPDATE_SELECTED_SPACE,
+} from "../../../stores/spaces";
+import SpaceStore from "../../../stores/spaces/SpaceStore";
+
+/**
+ * Hook to get the active space and its title.
+ */
+function useSpace(): { activeSpace: Room | null; title: string } {
+    const [spaceKey, activeSpace] = useEventEmitterState<[SpaceKey, Room | null]>(
+        SpaceStore.instance,
+        UPDATE_SELECTED_SPACE,
+        () => [SpaceStore.instance.activeSpace, SpaceStore.instance.activeSpaceRoom],
+    );
+    const spaceName = useTypedEventEmitterState(activeSpace ?? undefined, RoomEvent.Name, () => activeSpace?.name);
+    const allRoomsInHome = useEventEmitterState(
+        SpaceStore.instance,
+        UPDATE_HOME_BEHAVIOUR,
+        () => SpaceStore.instance.allRoomsInHome,
+    );
+
+    const title = spaceName ?? getMetaSpaceName(spaceKey as MetaSpace, allRoomsInHome);
+
+    return {
+        activeSpace,
+        title,
+    };
+}
+
+export interface RoomListHeaderViewState {
+    /**
+     * The title of the room list
+     */
+    title: string;
+    /**
+     * Whether to display the compose menu
+     * True if the user can create rooms and is not in a Space
+     */
+    displayComposeMenu: boolean;
+    /**
+     * Whether the user can create rooms
+     */
+    canCreateRoom: boolean;
+    /**
+     * Whether the user can create video rooms
+     */
+    canCreateVideoRoom: boolean;
+    /**
+     * Create a chat room
+     * @param e - The click event
+     */
+    createChatRoom: (e: Event) => void;
+    /**
+     * Create a room
+     * @param e - The click event
+     */
+    createRoom: (e: Event) => void;
+    /**
+     * Create a video room
+     */
+    createVideoRoom: () => void;
+}
+
+/**
+ * View model for the RoomListHeader.
+ * The actions don't work when called in a space yet.
+ */
+export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
+    const { activeSpace, title } = useSpace();
+
+    const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
+    const canCreateVideoRoom = useFeatureEnabled("feature_video_rooms");
+    // Temporary: don't display the compose menu when in a Space
+    const displayComposeMenu = canCreateRoom && !activeSpace;
+
+    /* Actions */
+
+    const createChatRoom = useCallback((e: Event) => {
+        defaultDispatcher.fire(Action.CreateChat);
+        PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
+    }, []);
+
+    const createRoom = useCallback((e: Event) => {
+        defaultDispatcher.fire(Action.CreateRoom);
+        PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
+    }, []);
+
+    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
+    const createVideoRoom = useCallback(
+        () =>
+            defaultDispatcher.dispatch({
+                action: Action.CreateRoom,
+                type: elementCallVideoRoomsEnabled ? RoomType.UnstableCall : RoomType.ElementVideo,
+            }),
+        [elementCallVideoRoomsEnabled],
+    );
+
+    return {
+        title,
+        displayComposeMenu,
+        canCreateRoom,
+        canCreateVideoRoom,
+        createChatRoom,
+        createRoom,
+        createVideoRoom,
+    };
+}

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

@@ -0,0 +1,77 @@
+/*
+ * 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, useState } from "react";
+import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
+import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
+import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
+
+import { _t } from "../../../../languageHandler";
+import { Flex } from "../../../utils/Flex";
+import {
+    type RoomListHeaderViewState,
+    useRoomListHeaderViewModel,
+} from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
+
+/**
+ * The header view for the room list
+ * The space name is displayed and a compose menu is shown if the user can create rooms
+ */
+export function RoomListHeaderView(): JSX.Element {
+    const vm = useRoomListHeaderViewModel();
+
+    return (
+        <Flex
+            as="header"
+            className="mx_RoomListHeaderView"
+            aria-label={_t("room|context_menu|title")}
+            justify="space-between"
+            align="center"
+            data-testid="room-list-header"
+        >
+            <h1>{vm.title}</h1>
+            {vm.displayComposeMenu && <ComposeMenu vm={vm} />}
+        </Flex>
+    );
+}
+
+interface ComposeMenuProps {
+    /**
+     * The view model for the room list header
+     */
+    vm: RoomListHeaderViewState;
+}
+
+/**
+ * The compose menu for the room list header
+ */
+function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            showTitle={false}
+            title={_t("action|open_menu")}
+            side="right"
+            align="start"
+            trigger={
+                <IconButton aria-label={_t("action|add")}>
+                    <ComposeIcon />
+                </IconButton>
+            }
+        >
+            <MenuItem Icon={UserAddIcon} label={_t("action|new_message")} onSelect={vm.createChatRoom} />
+            {vm.canCreateRoom && <MenuItem Icon={RoomIcon} label={_t("action|new_room")} onSelect={vm.createRoom} />}
+            {vm.canCreateVideoRoom && (
+                <MenuItem Icon={VideoCallIcon} label={_t("action|new_video_room")} onSelect={vm.createVideoRoom} />
+            )}
+        </Menu>
+    );
+}

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

@@ -10,6 +10,7 @@ import React from "react";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
+import { RoomListHeaderView } from "./RoomListHeaderView";
 
 type RoomListViewProps = {
     /**
@@ -26,8 +27,9 @@ export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
 
     return (
-        <div className="mx_RoomListView" data-testid="room-list-view">
+        <section className="mx_RoomListView" data-testid="room-list-view">
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
-        </div>
+            <RoomListHeaderView />
+        </section>
     );
 };

src/i18n/strings/en_EN.json

@@ -80,12 +80,14 @@
         "maximise": "Maximise",
         "mention": "Mention",
         "minimise": "Minimise",
+        "new_message": "New message",
         "new_room": "New room",
         "new_video_room": "New video room",
         "next": "Next",
         "no": "No",
         "ok": "OK",
         "open": "Open",
+        "open_menu": "Open menu",
         "pause": "Pause",
         "pin": "Pin",
         "play": "Play",