From 2abd5342c274b6da11de1d1a44ada65d18f13df8 Mon Sep 17 00:00:00 2001
From: Florian D <florianduros@element.io>
Date: Thu, 13 Feb 2025 16:49:09 +0100
Subject: [PATCH] New room list: add search section (#29251)

* feat(new room list): move `RoomListView` to its own folder and add styling

* feat(new room list): add search section

* test(new room list): add tests for `RoomListSearch`

* test(new room list): add tests for `RoomListView`

* test(e2e): add method to close notification toast to `ElementAppPage`

* test(e2e): add tests for the search section

* test(e2e): add tests for the room list view

* refactor: use Flex component

* fix: loop icon size in search button

* refactor: remove `focus_room_filter` listener
---
 .../room-list-view/room-list-search.spec.ts   |  53 +++++++
 .../room-list-view/room-list-view.spec.ts     |  34 +++++
 .../security-user-settings-tab.spec.ts        |   8 +-
 playwright/pages/ElementAppPage.ts            |  11 ++
 .../search-section-linux.png                  | Bin 0 -> 3970 bytes
 .../room-list-view-linux.png                  | Bin 0 -> 6399 bytes
 res/css/_components.pcss                      |   2 +
 .../rooms/RoomListView/_RoomListSearch.pcss   |  39 +++++
 .../rooms/RoomListView/_RoomListView.pcss     |  12 ++
 src/components/structures/LeftPanel.tsx       |   2 +-
 src/components/views/rooms/RoomListView.tsx   |  14 --
 .../rooms/RoomListView/RoomListSearch.tsx     |  69 +++++++++
 .../views/rooms/RoomListView/RoomListView.tsx |  33 ++++
 .../views/rooms/RoomListView/index.ts         |   8 +
 .../RoomListView/RoomListSearch-test.tsx      |  84 +++++++++++
 .../rooms/RoomListView/RoomListView-test.tsx  |  43 ++++++
 .../RoomListSearch-test.tsx.snap              | 142 ++++++++++++++++++
 .../__snapshots__/RoomListView-test.tsx.snap  |  76 ++++++++++
 18 files changed, 609 insertions(+), 21 deletions(-)
 create mode 100644 playwright/e2e/left-panel/room-list-view/room-list-search.spec.ts
 create mode 100644 playwright/e2e/left-panel/room-list-view/room-list-view.spec.ts
 create mode 100644 playwright/snapshots/left-panel/room-list-view/room-list-search.spec.ts/search-section-linux.png
 create mode 100644 playwright/snapshots/left-panel/room-list-view/room-list-view.spec.ts/room-list-view-linux.png
 create mode 100644 res/css/views/rooms/RoomListView/_RoomListSearch.pcss
 create mode 100644 res/css/views/rooms/RoomListView/_RoomListView.pcss
 delete mode 100644 src/components/views/rooms/RoomListView.tsx
 create mode 100644 src/components/views/rooms/RoomListView/RoomListSearch.tsx
 create mode 100644 src/components/views/rooms/RoomListView/RoomListView.tsx
 create mode 100644 src/components/views/rooms/RoomListView/index.ts
 create mode 100644 test/unit-tests/components/views/rooms/RoomListView/RoomListSearch-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/RoomListView/RoomListView-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListSearch-test.tsx.snap
 create mode 100644 test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap

diff --git a/playwright/e2e/left-panel/room-list-view/room-list-search.spec.ts b/playwright/e2e/left-panel/room-list-view/room-list-search.spec.ts
new file mode 100644
index 0000000000..028503f622
--- /dev/null
+++ b/playwright/e2e/left-panel/room-list-view/room-list-search.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the search section of the room list
+     * @param page
+     */
+    function getSearchSection(page: Page) {
+        return page.getByRole("search");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the search section", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        // exact=false to ignore the shortcut which is related to the OS
+        await expect(searchSection.getByRole("button", { name: "Search", exact: false })).toBeVisible();
+        await expect(searchSection).toMatchScreenshot("search-section.png");
+    });
+
+    test("should open the spotlight when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Search", exact: false }).click();
+        // The spotlight should be displayed
+        await expect(page.getByRole("dialog", { name: "Search Dialog" })).toBeVisible();
+    });
+
+    test("should open the room directory when the search button is clicked", async ({ page, app, user }) => {
+        const searchSection = getSearchSection(page);
+        await searchSection.getByRole("button", { name: "Explore rooms" }).click();
+        const dialog = page.getByRole("dialog", { name: "Search Dialog" });
+        // The room directory should be displayed
+        await expect(dialog).toBeVisible();
+        // The public room filter should be displayed
+        await expect(dialog.getByText("Public rooms")).toBeVisible();
+    });
+});
diff --git a/playwright/e2e/left-panel/room-list-view/room-list-view.spec.ts b/playwright/e2e/left-panel/room-list-view/room-list-view.spec.ts
new file mode 100644
index 0000000000..7cd5122e8a
--- /dev/null
+++ b/playwright/e2e/left-panel/room-list-view/room-list-view.spec.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { type Page } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Search section of the room list", () => {
+    test.use({
+        labsFlags: ["feature_new_room_list"],
+    });
+
+    /**
+     * Get the room list view
+     * @param page
+     */
+    function getRoomListView(page: Page) {
+        return page.getByTestId("room-list-view");
+    }
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The notification toast is displayed above the search section
+        await app.closeNotificationToast();
+    });
+
+    test("should render the room list view", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomListView(page);
+        await expect(roomListView).toMatchScreenshot("room-list-view.png");
+    });
+});
diff --git a/playwright/e2e/settings/security-user-settings-tab.spec.ts b/playwright/e2e/settings/security-user-settings-tab.spec.ts
index b723d1398f..9b9439796d 100644
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -25,13 +25,9 @@ test.describe("Security user settings tab", () => {
             },
         });
 
-        test.beforeEach(async ({ page, user }) => {
+        test.beforeEach(async ({ page, app, user }) => {
             // Dismiss "Notification" toast
-            await page
-                .locator(".mx_Toast_toast", { hasText: "Notifications" })
-                .getByRole("button", { name: "Dismiss" })
-                .click();
-
+            await app.closeNotificationToast();
             await page.locator(".mx_Toast_buttons").getByRole("button", { name: "Yes" }).click(); // Allow analytics
         });
 
diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts
index d530c75b54..15b475a5d1 100644
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -202,4 +202,15 @@ export class ElementAppPage {
         }
         return this.page.locator(`id=${labelledById ?? describedById}`);
     }
+
+    /**
+     * Close the notification toast
+     */
+    public closeNotificationToast(): Promise<void> {
+        // Dismiss "Notification" toast
+        return this.page
+            .locator(".mx_Toast_toast", { hasText: "Notifications" })
+            .getByRole("button", { name: "Dismiss" })
+            .click();
+    }
 }
diff --git a/playwright/snapshots/left-panel/room-list-view/room-list-search.spec.ts/search-section-linux.png b/playwright/snapshots/left-panel/room-list-view/room-list-search.spec.ts/search-section-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c2684e84964c41f2614af19fe003ca9c2518f73
GIT binary patch
literal 3970
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

literal 0
HcmV?d00001

diff --git a/playwright/snapshots/left-panel/room-list-view/room-list-view.spec.ts/room-list-view-linux.png b/playwright/snapshots/left-panel/room-list-view/room-list-view.spec.ts/room-list-view-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f114eff64c9f84317d20cb7117d89c175e0845ae
GIT binary patch
literal 6399
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
Vgc=Dj{%Dw-@eTZu_QRFm{tLb|q&xrs

literal 0
HcmV?d00001

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 46b8fc932d..e6ca0c7ae9 100644
--- a/res/css/_components.pcss
+++ b/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/RoomListView/_RoomListSearch.pcss";
+@import "./views/rooms/RoomListView/_RoomListView.pcss";
 @import "./views/rooms/_AppsDrawer.pcss";
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
diff --git a/res/css/views/rooms/RoomListView/_RoomListSearch.pcss b/res/css/views/rooms/RoomListView/_RoomListSearch.pcss
new file mode 100644
index 0000000000..55b1def58a
--- /dev/null
+++ b/res/css/views/rooms/RoomListView/_RoomListSearch.pcss
@@ -0,0 +1,39 @@
+/*
+ * 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_RoomListSearch {
+    /* From figma, this should be aligned with the room header */
+    height: 64px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--cpd-color-bg-subtle-primary);
+    padding: 0 var(--cpd-space-3x);
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+
+    .mx_RoomListSearch_search {
+        /* The search button should take all the remaining space */
+        flex: 1;
+        font: var(--cpd-font-body-md-regular);
+        color: var(--cpd-color-text-secondary);
+
+        span {
+            flex: 1;
+
+            kbd {
+                font-family: inherit;
+            }
+        }
+    }
+
+    .mx_RoomListSearch_explore:hover {
+        svg {
+            fill: var(--cpd-color-icon-primary);
+        }
+    }
+}
diff --git a/res/css/views/rooms/RoomListView/_RoomListView.pcss b/res/css/views/rooms/RoomListView/_RoomListView.pcss
new file mode 100644
index 0000000000..117810e6b7
--- /dev/null
+++ b/res/css/views/rooms/RoomListView/_RoomListView.pcss
@@ -0,0 +1,12 @@
+/*
+ * 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_RoomListView {
+    background-color: var(--cpd-color-bg-canvas-default);
+    height: 100%;
+    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+}
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index c67cea9b5a..82040eefab 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -390,7 +390,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             return (
                 <div className={containerClasses}>
                     <div className="mx_LeftPanel_roomListContainer">
-                        <RoomListView />
+                        <RoomListView activeSpace={this.state.activeSpace} />
                     </div>
                 </div>
             );
diff --git a/src/components/views/rooms/RoomListView.tsx b/src/components/views/rooms/RoomListView.tsx
deleted file mode 100644
index c5f593decf..0000000000
--- a/src/components/views/rooms/RoomListView.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
-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 from "react";
-
-type IProps = unknown;
-
-export const RoomListView: React.FC<IProps> = (props: IProps) => {
-    return <div>New Room List</div>;
-};
diff --git a/src/components/views/rooms/RoomListView/RoomListSearch.tsx b/src/components/views/rooms/RoomListView/RoomListSearch.tsx
new file mode 100644
index 0000000000..415e817ad9
--- /dev/null
+++ b/src/components/views/rooms/RoomListView/RoomListSearch.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { Button } from "@vector-im/compound-web";
+import ExploreIcon from "@vector-im/compound-design-tokens/assets/web/icons/explore";
+import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
+
+import { IS_MAC, Key } from "../../../../Keyboard";
+import { _t } from "../../../../languageHandler";
+import { ALTERNATE_KEY_NAME } from "../../../../accessibility/KeyboardShortcuts";
+import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../../settings/UIFeature";
+import { MetaSpace } from "../../../../stores/spaces";
+import { Action } from "../../../../dispatcher/actions";
+import PosthogTrackers from "../../../../PosthogTrackers";
+import defaultDispatcher from "../../../../dispatcher/dispatcher";
+import { Flex } from "../../../utils/Flex";
+
+type RoomListSearchProps = {
+    /**
+     * Current active space
+     * The explore button is only displayed in the Home meta space
+     */
+    activeSpace: string;
+};
+
+/**
+ * A search component to be displayed at the top of the room list
+ * The `Explore` button is displayed only in the Home meta space and when UIComponent.ExploreRooms is enabled.
+ */
+export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Element {
+    const displayExploreButton = activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms);
+
+    return (
+        <Flex className="mx_RoomListSearch" role="search" gap="var(--cpd-space-2x)" align="center">
+            <Button
+                className="mx_RoomListSearch_search"
+                kind="secondary"
+                size="sm"
+                Icon={SearchIcon}
+                onClick={() => defaultDispatcher.fire(Action.OpenSpotlight)}
+            >
+                <Flex as="span" justify="space-between">
+                    {_t("action|search")}
+                    <kbd>{IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"}</kbd>
+                </Flex>
+            </Button>
+            {displayExploreButton && (
+                <Button
+                    className="mx_RoomListSearch_explore"
+                    kind="secondary"
+                    size="sm"
+                    Icon={ExploreIcon}
+                    iconOnly={true}
+                    aria-label={_t("action|explore_rooms")}
+                    onClick={(ev) => {
+                        defaultDispatcher.fire(Action.ViewRoomDirectory);
+                        PosthogTrackers.trackInteraction("WebLeftPanelExploreRoomsButton", ev);
+                    }}
+                />
+            )}
+        </Flex>
+    );
+}
diff --git a/src/components/views/rooms/RoomListView/RoomListView.tsx b/src/components/views/rooms/RoomListView/RoomListView.tsx
new file mode 100644
index 0000000000..f733078a2c
--- /dev/null
+++ b/src/components/views/rooms/RoomListView/RoomListView.tsx
@@ -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.
+*/
+
+import React from "react";
+
+import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../../settings/UIFeature";
+import { RoomListSearch } from "./RoomListSearch";
+
+type RoomListViewProps = {
+    /**
+     * Current active space
+     * See {@link RoomListSearch}
+     */
+    activeSpace: string;
+};
+
+/**
+ * A view component for the room list.
+ */
+export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
+    const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
+
+    return (
+        <div className="mx_RoomListView" data-testid="room-list-view">
+            {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
+        </div>
+    );
+};
diff --git a/src/components/views/rooms/RoomListView/index.ts b/src/components/views/rooms/RoomListView/index.ts
new file mode 100644
index 0000000000..4fa7c095df
--- /dev/null
+++ b/src/components/views/rooms/RoomListView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { RoomListView } from "./RoomListView";
diff --git a/test/unit-tests/components/views/rooms/RoomListView/RoomListSearch-test.tsx b/test/unit-tests/components/views/rooms/RoomListView/RoomListSearch-test.tsx
new file mode 100644
index 0000000000..74238ed6c7
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListView/RoomListSearch-test.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 from "react";
+import { render, screen } from "jest-matrix-react";
+import { mocked } from "jest-mock";
+import userEvent from "@testing-library/user-event";
+
+import { RoomListSearch } from "../../../../../../src/components/views/rooms/RoomListView/RoomListSearch";
+import { MetaSpace } from "../../../../../../src/stores/spaces";
+import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
+import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
+import { Action } from "../../../../../../src/dispatcher/actions";
+
+jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: jest.fn(),
+}));
+
+describe("<RoomListSearch />", () => {
+    function renderComponent(activeSpace = MetaSpace.Home) {
+        return render(<RoomListSearch activeSpace={activeSpace} />);
+    }
+
+    beforeEach(() => {
+        // By default, we consider shouldShowComponent(UIComponent.ExploreRooms) should return true
+        mocked(shouldShowComponent).mockReturnValue(true);
+    });
+
+    it("should display all the buttons", () => {
+        const { asFragment } = renderComponent();
+
+        // The search and explore buttons should be displayed
+        expect(screen.getByRole("button", { name: "Search Ctrl K" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Explore rooms" })).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should hide the explore button when the active space is not MetaSpace.Home", () => {
+        const { asFragment } = renderComponent(MetaSpace.VideoRooms);
+
+        // The search button should be displayed but not the explore button
+        expect(screen.getByRole("button", { name: "Search Ctrl K" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Explore rooms" })).not.toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should hide the explore button when UIComponent.ExploreRooms is disabled", () => {
+        mocked(shouldShowComponent).mockReturnValue(false);
+        const { asFragment } = renderComponent();
+
+        // The search button should be displayed but not the explore button
+        expect(screen.getByRole("button", { name: "Search Ctrl K" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Explore rooms" })).not.toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should open the spotlight when the search button is clicked", async () => {
+        const fireSpy = jest.spyOn(defaultDispatcher, "fire");
+        const user = userEvent.setup();
+        renderComponent();
+
+        // Click on the search button
+        await user.click(screen.getByRole("button", { name: "Search Ctrl K" }));
+
+        // The spotlight should be opened
+        expect(fireSpy).toHaveBeenCalledWith(Action.OpenSpotlight);
+    });
+
+    it("should open the room directory when the explore button is clicked", async () => {
+        const fireSpy = jest.spyOn(defaultDispatcher, "fire");
+        const user = userEvent.setup();
+        renderComponent();
+
+        // Click on the search button
+        await user.click(screen.getByRole("button", { name: "Explore rooms" }));
+
+        // The spotlight should be opened
+        expect(fireSpy).toHaveBeenCalledWith(Action.ViewRoomDirectory);
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/RoomListView/RoomListView-test.tsx b/test/unit-tests/components/views/rooms/RoomListView/RoomListView-test.tsx
new file mode 100644
index 0000000000..fecdabbae9
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListView/RoomListView-test.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 from "react";
+import { render, screen } from "jest-matrix-react";
+import { mocked } from "jest-mock";
+
+import { RoomListView } from "../../../../../../src/components/views/rooms/RoomListView";
+import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
+import { MetaSpace } from "../../../../../../src/stores/spaces";
+
+jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: jest.fn(),
+}));
+
+describe("<RoomListView />", () => {
+    function renderComponent() {
+        return render(<RoomListView activeSpace={MetaSpace.Home} />);
+    }
+
+    beforeEach(() => {
+        // By default, we consider shouldShowComponent(UIComponent.FilterContainer) should return true
+        mocked(shouldShowComponent).mockReturnValue(true);
+    });
+
+    it("should render the RoomListSearch component when UIComponent.FilterContainer is at true", () => {
+        const { asFragment } = renderComponent();
+        expect(screen.getByRole("button", { name: "Search Ctrl K" })).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should not render the RoomListSearch component when UIComponent.FilterContainer is at false", () => {
+        mocked(shouldShowComponent).mockReturnValue(false);
+        const { asFragment } = renderComponent();
+
+        expect(screen.queryByRole("button", { name: "Search Ctrl K" })).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListSearch-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListSearch-test.tsx.snap
new file mode 100644
index 0000000000..e413c038a8
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListSearch-test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoomListSearch /> should display all the buttons 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Flex mx_RoomListSearch"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+  >
+    <button
+      class="_button_i91xf_17 mx_RoomListSearch_search _has-icon_i91xf_66"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
+        />
+      </svg>
+      <span
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+      >
+        Search
+        <kbd>
+          Ctrl K
+        </kbd>
+      </span>
+    </button>
+    <button
+      aria-label="Explore rooms"
+      class="_button_i91xf_17 mx_RoomListSearch_explore _has-icon_i91xf_66 _icon-only_i91xf_59"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 13a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 12c0-.283.096-.52.287-.713A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 13Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Zm0 0c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c2.233 0 4.125.775 5.675 2.325C19.225 7.875 20 9.767 20 12c0 2.233-.775 4.125-2.325 5.675C16.125 19.225 14.233 20 12 20Zm1.675-5.85c.1-.05.192-.117.275-.2.083-.083.15-.175.2-.275l2.925-6.25c.083-.167.063-.313-.063-.438-.125-.125-.27-.145-.437-.062l-6.25 2.925c-.1.05-.192.117-.275.2-.083.083-.15.175-.2.275l-2.925 6.25c-.083.167-.063.313.063.438.124.124.27.145.437.062l6.25-2.925Z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<RoomListSearch /> should hide the explore button when UIComponent.ExploreRooms is disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Flex mx_RoomListSearch"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+  >
+    <button
+      class="_button_i91xf_17 mx_RoomListSearch_search _has-icon_i91xf_66"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
+        />
+      </svg>
+      <span
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+      >
+        Search
+        <kbd>
+          Ctrl K
+        </kbd>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<RoomListSearch /> should hide the explore button when the active space is not MetaSpace.Home 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_Flex mx_RoomListSearch"
+    role="search"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+  >
+    <button
+      class="_button_i91xf_17 mx_RoomListSearch_search _has-icon_i91xf_66"
+      data-kind="secondary"
+      data-size="sm"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
+        />
+      </svg>
+      <span
+        class="mx_Flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+      >
+        Search
+        <kbd>
+          Ctrl K
+        </kbd>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
diff --git a/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap
new file mode 100644
index 0000000000..4ddc9ac5ec
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoomListView /> should not render the RoomListSearch component when UIComponent.FilterContainer is at false 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomListView"
+    data-testid="room-list-view"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RoomListView /> should render the RoomListSearch component when UIComponent.FilterContainer is at true 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_RoomListView"
+    data-testid="room-list-view"
+  >
+    <div
+      class="mx_Flex mx_RoomListSearch"
+      role="search"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+    >
+      <button
+        class="_button_i91xf_17 mx_RoomListSearch_search _has-icon_i91xf_66"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
+          />
+        </svg>
+        <span
+          class="mx_Flex"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+        >
+          Search
+          <kbd>
+            Ctrl K
+          </kbd>
+        </span>
+      </button>
+      <button
+        aria-label="Explore rooms"
+        class="_button_i91xf_17 mx_RoomListSearch_explore _has-icon_i91xf_66 _icon-only_i91xf_59"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 13a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 12c0-.283.096-.52.287-.713A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 13Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Zm0 0c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c2.233 0 4.125.775 5.675 2.325C19.225 7.875 20 9.767 20 12c0 2.233-.775 4.125-2.325 5.675C16.125 19.225 14.233 20 12 20Zm1.675-5.85c.1-.05.192-.117.275-.2.083-.083.15-.175.2-.275l2.925-6.25c.083-.167.063-.313-.063-.438-.125-.125-.27-.145-.437-.062l-6.25 2.925c-.1.05-.192.117-.275.2-.083.083-.15.175-.2.275l-2.925 6.25c-.083.167-.063.313.063.438.124.124.27.145.437.062l6.25-2.925Z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;