New room list: move sort menu in room list header (#29983)

* feat: move sort and preview into room list header vm

* feat: move sort menu into room list header

* test: update tests

* test:update snapshots

* chore: remove secondary filter tests

* test(e2e): update screenshots

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

@@ -10,16 +10,3 @@
     margin: var(--cpd-space-2x);
     margin-left: var(--cpd-space-1x);
 }
-
-.mx_RoomListSecondaryFilters_roomOptionsButton {
-    /* Size the button appropriately (should this be in em, maybe,
-     * so it gets bigger with font size? These values taken from the figma.
-     */
-    width: 28px;
-    height: 28px;
-    margin-left: auto;
-
-    svg {
-        color: var(--cpd-color-icon-primary);
-    }
-}

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -31,6 +31,8 @@ import {
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { createRoom, hasCreateRoomRights } from "./utils";
+import { type SortOption, useSorter } from "./useSorter";
+import { useMessagePreviewToggle } from "./useMessagePreviewToggle";
 
 /**
  * Hook to get the active space and its title.
@@ -117,6 +119,22 @@ export interface RoomListHeaderViewState {
      * Open the space settings
      */
     openSpaceSettings: () => void;
+    /**
+     * Change the sort order of the room-list.
+     */
+    sort: (option: SortOption) => void;
+    /**
+     * The currently active sort option.
+     */
+    activeSortOption: SortOption;
+    /**
+     * Whether message previews must be shown or not.
+     */
+    shouldShowMessagePreview: boolean;
+    /**
+     * A function to turn on/off message previews.
+     */
+    toggleMessagePreview: () => void;
 }
 
 /**
@@ -138,6 +156,9 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
 
     /* Actions */
 
+    const { activeSortOption, sort } = useSorter();
+    const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle();
+
     const createChatRoom = useCallback((e: Event) => {
         defaultDispatcher.fire(Action.CreateChat);
         PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
@@ -207,5 +228,9 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         inviteInSpace,
         openSpacePreferences,
         openSpaceSettings,
+        activeSortOption,
+        sort,
+        shouldShowMessagePreview,
+        toggleMessagePreview,
     };
 }

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -9,8 +9,6 @@ import { useCallback } from "react";
 
 import type { Room } from "matrix-js-sdk/src/matrix";
 import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms";
-import { type SortOption, useSorter } from "./useSorter";
-import { useMessagePreviewToggle } from "./useMessagePreviewToggle";
 import { createRoom as createRoomFunc, hasCreateRoomRights } from "./utils";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { UPDATE_SELECTED_SPACE } from "../../../stores/spaces";
@@ -71,26 +69,6 @@ export interface RoomListViewState {
      */
     activeSecondaryFilter: SecondaryFilters;
 
-    /**
-     * Change the sort order of the room-list.
-     */
-    sort: (option: SortOption) => void;
-
-    /**
-     * The currently active sort option.
-     */
-    activeSortOption: SortOption;
-
-    /**
-     * Whether message previews must be shown or not.
-     */
-    shouldShowMessagePreview: boolean;
-
-    /**
-     * A function to turn on/off message previews.
-     */
-    toggleMessagePreview: () => void;
-
     /**
      * The index of the active room in the room list.
      */
@@ -122,9 +100,6 @@ export function useRoomListViewModel(): RoomListViewState {
     );
     const canCreateRoom = hasCreateRoomRights(matrixClient, currentSpace);
 
-    const { activeSortOption, sort } = useSorter();
-    const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle();
-
     const createChatRoom = useCallback(() => dispatcher.fire(Action.CreateChat), []);
     const createRoom = useCallback(() => createRoomFunc(currentSpace), [currentSpace]);
 
@@ -138,10 +113,6 @@ export function useRoomListViewModel(): RoomListViewState {
         activePrimaryFilter,
         activateSecondaryFilter,
         activeSecondaryFilter,
-        activeSortOption,
-        sort,
-        shouldShowMessagePreview,
-        toggleMessagePreview,
         activeIndex,
     };
 }

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

@@ -21,6 +21,7 @@ import {
     type RoomListHeaderViewState,
     useRoomListHeaderViewModel,
 } from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
+import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
 
 /**
  * The header view for the room list
@@ -42,14 +43,17 @@ export function RoomListHeaderView(): JSX.Element {
                 <h1 title={vm.title}>{vm.title}</h1>
                 {vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
             </Flex>
-            {/* If we don't display the compose menu, it means that the user can only send DM */}
+            <Flex align="center" gap="var(--cpd-space-2x)">
-            {vm.displayComposeMenu ? (
+                <RoomListOptionsMenu vm={vm} />
-                <ComposeMenu vm={vm} />
+                {/* If we don't display the compose menu, it means that the user can only send DM */}
-            ) : (
+                {vm.displayComposeMenu ? (
-                <IconButton aria-label={_t("action|new_message")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
+                    <ComposeMenu vm={vm} />
-                    <ComposeIcon color="var(--cpd-color-icon-secondary)" />
+                ) : (
-                </IconButton>
+                    <IconButton aria-label={_t("action|new_message")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
-            )}
+                        <ComposeIcon color="var(--cpd-color-icon-secondary)" />
+                    </IconButton>
+                )}
+            </Flex>
         </Flex>
     );
 }

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

@@ -7,11 +7,11 @@
 
 import { IconButton, Menu, MenuTitle, CheckboxMenuItem, Tooltip, RadioMenuItem } from "@vector-im/compound-web";
 import React, { type Ref, type JSX, useState, useCallback } from "react";
-import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import FilterIcon from "@vector-im/compound-design-tokens/assets/web/icons/filter";
 
 import { _t } from "../../../../languageHandler";
-import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { SortOption } from "../../../viewmodels/roomlist/useSorter";
+import { type RoomListHeaderViewState } from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
 
 interface MenuTriggerProps extends React.ComponentProps<typeof IconButton> {
     ref?: Ref<HTMLButtonElement>;
@@ -19,13 +19,8 @@ interface MenuTriggerProps extends React.ComponentProps<typeof IconButton> {
 
 const MenuTrigger = ({ ref, ...props }: MenuTriggerProps): JSX.Element => (
     <Tooltip label={_t("room_list|room_options")}>
-        <IconButton
+        <IconButton aria-label={_t("room_list|room_options")} {...props} ref={ref}>
-            className="mx_RoomListSecondaryFilters_roomOptionsButton"
+            <FilterIcon color="var(--cpd-color-icon-secondary)" />
-            aria-label={_t("room_list|room_options")}
-            {...props}
-            ref={ref}
-        >
-            <OverflowHorizontalIcon />
         </IconButton>
     </Tooltip>
 );
@@ -34,7 +29,7 @@ interface Props {
     /**
      * The view model for the room list view
      */
-    vm: RoomListViewState;
+    vm: RoomListHeaderViewState;
 }
 
 export function RoomListOptionsMenu({ vm }: Props): JSX.Element {

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

@@ -10,7 +10,6 @@ import React, { type JSX } from "react";
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
 import { Flex } from "../../../utils/Flex";
 import { _t } from "../../../../languageHandler";
-import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
 import { RoomListFilterMenu } from "./RoomListFilterMenu";
 import { textForSecondaryFilter } from "./textForFilter";
 
@@ -36,7 +35,6 @@ export function RoomListSecondaryFilters({ vm }: Props): JSX.Element {
         >
             <RoomListFilterMenu vm={vm} />
             {activeFilterText}
-            <RoomListOptionsMenu vm={vm} />
         </Flex>
     );
 }

test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx

@@ -5,14 +5,15 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { renderHook } from "jest-matrix-react";
+import { renderHook, act } from "jest-matrix-react";
 import { JoinRule, type MatrixClient, type Room, RoomType } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
+import { range } from "lodash";
 
 import { useRoomListHeaderViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { mkStubRoom, stubClient, withClientContextRenderOptions } from "../../../../test-utils";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
+import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import {
@@ -23,6 +24,10 @@ import {
     showSpaceSettings,
 } from "../../../../../src/utils/space";
 import { createRoom, hasCreateRoomRights } from "../../../../../src/components/viewmodels/roomlist/utils";
+import { SettingLevel } from "../../../../../src/settings/SettingLevel";
+import RoomListStoreV3 from "../../../../../src/stores/room-list-v3/RoomListStoreV3";
+import { SortOption } from "../../../../../src/components/viewmodels/roomlist/useSorter";
+import { SortingAlgorithm } from "../../../../../src/stores/room-list-v3/skip-list/sorters";
 
 jest.mock("../../../../../src/components/viewmodels/roomlist/utils", () => ({
     hasCreateRoomRights: jest.fn().mockReturnValue(false),
@@ -199,4 +204,72 @@ describe("useRoomListHeaderViewModel", () => {
 
         expect(showSpaceSettings).toHaveBeenCalledWith(space);
     });
+
+    describe("Sorting", () => {
+        function mockAndCreateRooms() {
+            const rooms = range(10).map((i) => mkStubRoom(`foo${i}:matrix.org`, `Foo ${i}`, undefined));
+            const fn = jest
+                .spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace")
+                .mockImplementation(() => [...rooms]);
+            return { rooms, fn };
+        }
+
+        it("should change sort order", () => {
+            mockAndCreateRooms();
+            const { result: vm } = render();
+
+            const resort = jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(() => {});
+
+            // Change the sort option
+            act(() => {
+                vm.current.sort(SortOption.AToZ);
+            });
+
+            // Resort method in RLS must have been called
+            expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic);
+        });
+
+        it("should set activeSortOption based on value from settings", () => {
+            // Let's say that the user's preferred sorting is alphabetic
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => SortingAlgorithm.Alphabetic);
+
+            mockAndCreateRooms();
+            const { result: vm } = render();
+            expect(vm.current.activeSortOption).toEqual(SortOption.AToZ);
+        });
+    });
+
+    describe("message preview toggle", () => {
+        it("should return shouldShowMessagePreview based on setting", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
+            const { result: vm } = render();
+            expect(vm.current.shouldShowMessagePreview).toEqual(true);
+        });
+
+        it("should update when setting changes", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
+
+            let watchFn: CallbackFn;
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, fn) => {
+                if (settingName === "RoomList.showMessagePreview") watchFn = fn;
+                return "";
+            });
+            const { result: vm } = render();
+            expect(vm.current.shouldShowMessagePreview).toEqual(true);
+
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => false);
+            act(() => watchFn("RoomList.showMessagePreview", "", SettingLevel.DEVICE, false, false));
+            expect(vm.current.shouldShowMessagePreview).toEqual(false);
+        });
+
+        it("should change setting on toggle", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
+            const fn = jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {});
+
+            const { result: vm } = render();
+            expect(vm.current.shouldShowMessagePreview).toEqual(true);
+            act(() => vm.current.toggleMessagePreview());
+            expect(fn).toHaveBeenCalledWith("RoomList.showMessagePreview", null, "device", false);
+        });
+    });
 });

test/unit-tests/components/viewmodels/roomlist/RoomListViewModel-test.tsx

@@ -14,16 +14,12 @@ import { mkStubRoom } from "../../../../test-utils";
 import { useRoomListViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { FilterKey } from "../../../../../src/stores/room-list-v3/skip-list/filters";
 import { SecondaryFilters } from "../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortingAlgorithm } from "../../../../../src/stores/room-list-v3/skip-list/sorters";
-import { SortOption } from "../../../../../src/components/viewmodels/roomlist/useSorter";
-import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore";
 import { hasCreateRoomRights, createRoom } from "../../../../../src/components/viewmodels/roomlist/utils";
 import dispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { UPDATE_SELECTED_SPACE } from "../../../../../src/stores/spaces";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 
 jest.mock("../../../../../src/components/viewmodels/roomlist/utils", () => ({
     hasCreateRoomRights: jest.fn().mockReturnValue(false),
@@ -59,7 +55,7 @@ describe("RoomListViewModel", () => {
 
         const newRoom = mkStubRoom("bar:matrix.org", "Bar", undefined);
         rooms.push(newRoom);
-        act(() => RoomListStoreV3.instance.emit(LISTS_UPDATE_EVENT));
+        await act(() => RoomListStoreV3.instance.emit(LISTS_UPDATE_EVENT));
 
         await waitFor(() => {
             expect(vm.current.rooms).toContain(newRoom);
@@ -253,72 +249,6 @@ describe("RoomListViewModel", () => {
         });
     });
 
-    describe("Sorting", () => {
-        it("should change sort order", () => {
-            mockAndCreateRooms();
-            const { result: vm } = renderHook(() => useRoomListViewModel());
-
-            const resort = jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(() => {});
-
-            // Change the sort option
-            act(() => {
-                vm.current.sort(SortOption.AToZ);
-            });
-
-            // Resort method in RLS must have been called
-            expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic);
-        });
-
-        it("should set activeSortOption based on value from settings", () => {
-            // Let's say that the user's preferred sorting is alphabetic
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => SortingAlgorithm.Alphabetic);
-
-            mockAndCreateRooms();
-            const { result: vm } = renderHook(() => useRoomListViewModel());
-            expect(vm.current.activeSortOption).toEqual(SortOption.AToZ);
-        });
-    });
-
-    describe("message preview toggle", () => {
-        it("should return shouldShowMessagePreview based on setting", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
-            mockAndCreateRooms();
-            const { result: vm } = renderHook(() => useRoomListViewModel());
-            expect(vm.current.shouldShowMessagePreview).toEqual(true);
-        });
-
-        it("should update when setting changes", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
-
-            let watchFn: CallbackFn;
-            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_settingname, _roomId, fn) => {
-                watchFn = fn;
-                return "";
-            });
-            mockAndCreateRooms();
-            const { result: vm } = renderHook(() => useRoomListViewModel());
-            expect(vm.current.shouldShowMessagePreview).toEqual(true);
-
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => false);
-            act(() => {
-                watchFn("RoomList.showMessagePreview", "", SettingLevel.DEVICE, false, false);
-            });
-            expect(vm.current.shouldShowMessagePreview).toEqual(false);
-        });
-
-        it("should change setting on toggle", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true);
-            const fn = jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {});
-            mockAndCreateRooms();
-            const { result: vm } = renderHook(() => useRoomListViewModel());
-            expect(vm.current.shouldShowMessagePreview).toEqual(true);
-            act(() => {
-                vm.current.toggleMessagePreview();
-            });
-            expect(fn).toHaveBeenCalledWith("RoomList.showMessagePreview", null, "device", false);
-        });
-    });
-
     describe("Create room and chat", () => {
         it("should be canCreateRoom=false if hasCreateRoomRights=false", () => {
             mocked(hasCreateRoomRights).mockReturnValue(false);

test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx

@@ -11,7 +11,6 @@ import userEvent from "@testing-library/user-event";
 
 import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 import { EmptyRoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/EmptyRoomList";
 import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/filters";
 
@@ -25,13 +24,9 @@ describe("<EmptyRoomList />", () => {
             primaryFilters: [],
             activateSecondaryFilter: jest.fn().mockReturnValue({}),
             activeSecondaryFilter: SecondaryFilters.AllActivity,
-            sort: jest.fn(),
-            activeSortOption: SortOption.Activity,
             createRoom: jest.fn(),
             createChatRoom: jest.fn(),
             canCreateRoom: true,
-            shouldShowMessagePreview: false,
-            toggleMessagePreview: jest.fn(),
             activeIndex: undefined,
         };
     });

test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx

@@ -15,7 +15,6 @@ import { type RoomListViewState } from "../../../../../../src/components/viewmod
 import { RoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomList";
 import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
 import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 import { Landmark, LandmarkNavigation } from "../../../../../../src/accessibility/LandmarkNavigation";
 
 describe("<RoomList />", () => {
@@ -36,10 +35,6 @@ describe("<RoomList />", () => {
             primaryFilters: [],
             activateSecondaryFilter: () => {},
             activeSecondaryFilter: SecondaryFilters.AllActivity,
-            sort: jest.fn(),
-            activeSortOption: SortOption.Activity,
-            shouldShowMessagePreview: false,
-            toggleMessagePreview: jest.fn(),
             createRoom: jest.fn(),
             createChatRoom: jest.fn(),
             canCreateRoom: true,

test/unit-tests/components/views/rooms/RoomListPanel/RoomListFilterMenu-test.tsx

@@ -12,7 +12,6 @@ import { TooltipProvider } from "@vector-im/compound-web";
 
 import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 import { RoomListFilterMenu } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListFilterMenu";
 
 function getRenderOptions(): RenderOptions {
@@ -34,10 +33,6 @@ describe("<RoomListFilterMenu />", () => {
             primaryFilters: [],
             activateSecondaryFilter: () => {},
             activeSecondaryFilter: SecondaryFilters.AllActivity,
-            sort: jest.fn(),
-            activeSortOption: SortOption.Activity,
-            shouldShowMessagePreview: false,
-            toggleMessagePreview: jest.fn(),
             activeIndex: undefined,
         };
     });

test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx

@@ -15,6 +15,7 @@ import {
     useRoomListHeaderViewModel,
 } from "../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
 import { RoomListHeaderView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListHeaderView";
+import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 
 jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel", () => ({
     useRoomListHeaderViewModel: jest.fn(),
@@ -29,6 +30,10 @@ describe("<RoomListHeaderView />", () => {
         canCreateVideoRoom: true,
         canInviteInSpace: true,
         canAccessSpaceSettings: true,
+        sort: jest.fn(),
+        activeSortOption: SortOption.Activity,
+        shouldShowMessagePreview: false,
+        toggleMessagePreview: jest.fn(),
         createRoom: jest.fn(),
         createVideoRoom: jest.fn(),
         createChatRoom: jest.fn(),
@@ -42,6 +47,13 @@ describe("<RoomListHeaderView />", () => {
         jest.resetAllMocks();
     });
 
+    it("should render 'room options' button", async () => {
+        mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
+        const { asFragment } = render(<RoomListHeaderView />);
+        expect(screen.getByRole("button", { name: "Room Options" })).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("compose menu", () => {
         it("should display the compose menu", () => {
             mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);

test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx

@@ -10,13 +10,13 @@ import { render, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import { RoomListOptionsMenu } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListOptionsMenu";
-import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
+import { type RoomListHeaderViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel";
 
 describe("<RoomListOptionsMenu />", () => {
     it("should match snapshot", () => {
         const vm = {
             sort: jest.fn(),
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         const { asFragment } = render(<RoomListOptionsMenu vm={vm} />);
 
@@ -29,7 +29,7 @@ describe("<RoomListOptionsMenu />", () => {
         const vm = {
             sort: jest.fn(),
             activeSortOption: "Alphabetic",
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -47,7 +47,7 @@ describe("<RoomListOptionsMenu />", () => {
         const vm = {
             sort: jest.fn(),
             activeSortOption: "Recency",
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -64,7 +64,7 @@ describe("<RoomListOptionsMenu />", () => {
 
         const vm = {
             sort: jest.fn(),
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -81,7 +81,7 @@ describe("<RoomListOptionsMenu />", () => {
         const vm = {
             sort: jest.fn(),
             activeSortOption: "Alphabetic",
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -97,7 +97,7 @@ describe("<RoomListOptionsMenu />", () => {
 
         const vm = {
             shouldShowMessagePreview: false,
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -111,7 +111,7 @@ describe("<RoomListOptionsMenu />", () => {
 
         const vm = {
             shouldShowMessagePreview: true,
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 
@@ -125,7 +125,7 @@ describe("<RoomListOptionsMenu />", () => {
 
         const vm = {
             toggleMessagePreview: jest.fn(),
-        } as unknown as RoomListViewState;
+        } as unknown as RoomListHeaderViewState;
 
         render(<RoomListOptionsMenu vm={vm} />);
 

test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx

@@ -12,7 +12,6 @@ import userEvent from "@testing-library/user-event";
 import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
 import { RoomListPrimaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 import { FilterKey } from "../../../../../../src/stores/room-list-v3/skip-list/filters";
 
 describe("<RoomListPrimaryFilters />", () => {
@@ -31,10 +30,6 @@ describe("<RoomListPrimaryFilters />", () => {
             ],
             activateSecondaryFilter: () => {},
             activeSecondaryFilter: SecondaryFilters.AllActivity,
-            sort: jest.fn(),
-            activeSortOption: SortOption.Activity,
-            shouldShowMessagePreview: false,
-            toggleMessagePreview: jest.fn(),
             activeIndex: undefined,
         };
     });

test/unit-tests/components/views/rooms/RoomListPanel/RoomListSecondaryFilters-test.tsx

@@ -1,42 +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";
-import { render, screen } from "jest-matrix-react";
-
-import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
-import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
-import { RoomListSecondaryFilters } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListSecondaryFilters";
-
-describe("<RoomListSecondaryFilters />", () => {
-    let vm: RoomListViewState;
-
-    beforeEach(() => {
-        vm = {
-            isLoadingRooms: false,
-            rooms: [],
-            canCreateRoom: true,
-            createRoom: jest.fn(),
-            createChatRoom: jest.fn(),
-            primaryFilters: [],
-            activateSecondaryFilter: () => {},
-            activeSecondaryFilter: SecondaryFilters.AllActivity,
-            sort: jest.fn(),
-            activeSortOption: SortOption.Activity,
-            shouldShowMessagePreview: false,
-            toggleMessagePreview: jest.fn(),
-            activeIndex: undefined,
-        };
-    });
-
-    it("should render 'room options' button", async () => {
-        const { asFragment } = render(<RoomListSecondaryFilters vm={vm} />);
-        expect(screen.getByRole("button", { name: "Room Options" })).toBeInTheDocument();
-        expect(asFragment()).toMatchSnapshot();
-    });
-});

test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx

@@ -14,7 +14,6 @@ import {
     useRoomListViewModel,
 } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { SecondaryFilters } from "../../../../../../src/components/viewmodels/roomlist/useFilteredRooms";
-import { SortOption } from "../../../../../../src/components/viewmodels/roomlist/useSorter";
 import { RoomListView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListView";
 import { mkRoom, stubClient } from "../../../../../test-utils";
 
@@ -29,13 +28,9 @@ describe("<RoomListView />", () => {
         primaryFilters: [],
         activateSecondaryFilter: jest.fn().mockReturnValue({}),
         activeSecondaryFilter: SecondaryFilters.AllActivity,
-        sort: jest.fn(),
-        activeSortOption: SortOption.Activity,
         createRoom: jest.fn(),
         createChatRoom: jest.fn(),
         canCreateRoom: true,
-        toggleMessagePreview: jest.fn(),
-        shouldShowMessagePreview: false,
         activeIndex: undefined,
     };
     const matrixClient = stubClient();

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -1,6 +1,252 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="mx_Flex mx_RoomListHeaderView_title"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <h1
+        title="title"
+      >
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-«rc»"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Room Options"
+        aria-labelledby="«rg»"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«re»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
+            />
+          </svg>
+        </div>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Add"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«rl»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> compose menu should not display the compose menu 1`] = `
+<DocumentFragment>
+  <header
+    aria-label="Room options"
+    class="mx_Flex mx_RoomListHeaderView"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="mx_Flex mx_RoomListHeaderView_title"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+    >
+      <h1
+        title="title"
+      >
+        title
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Open space menu"
+        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        data-state="closed"
+        id="radix-«ro»"
+        role="button"
+        style="--cpd-icon-button-size: 20px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Room Options"
+        aria-labelledby="«rs»"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«rq»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
+            />
+          </svg>
+        </div>
+      </button>
+      <button
+        aria-label="New message"
+        class="_icon-button_m2erp_8"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
 <DocumentFragment>
   <header
     aria-label="Room options"
@@ -49,73 +295,21 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         </div>
       </button>
     </div>
-    <button
-      aria-disabled="false"
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="Add"
-      class="_icon-button_m2erp_8"
-      data-state="closed"
-      id="radix-«r2»"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-      type="button"
-    >
-      <div
-        class="_indicator-icon_zr2a0_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          color="var(--cpd-color-icon-secondary)"
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-            fill-rule="evenodd"
-          />
-          <path
-            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-          />
-        </svg>
-      </div>
-    </button>
-  </header>
-</DocumentFragment>
-`;
-
-exports[`<RoomListHeaderView /> compose menu should not display the compose menu 1`] = `
-<DocumentFragment>
-  <header
-    aria-label="Room options"
-    class="mx_Flex mx_RoomListHeaderView"
-    data-testid="room-list-header"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
     <div
-      class="mx_Flex mx_RoomListHeaderView_title"
+      class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <h1
-        title="title"
-      >
-        title
-      </h1>
       <button
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="menu"
-        aria-label="Open space menu"
+        aria-label="Room Options"
-        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        aria-labelledby="«r4»"
+        class="_icon-button_m2erp_8"
         data-state="closed"
-        id="radix-«r4»"
+        id="radix-«r2»"
         role="button"
-        style="--cpd-icon-button-size: 20px;"
+        style="--cpd-icon-button-size: 32px;"
         tabindex="0"
         type="button"
       >
@@ -132,42 +326,48 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
+            />
+          </svg>
+        </div>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Add"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«r9»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
             />
           </svg>
         </div>
       </button>
     </div>
-    <button
-      aria-label="New message"
-      class="_icon-button_m2erp_8"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_zr2a0_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          color="var(--cpd-color-icon-secondary)"
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-            fill-rule="evenodd"
-          />
-          <path
-            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-          />
-        </svg>
-      </div>
-    </button>
   </header>
 </DocumentFragment>
 `;
@@ -196,7 +396,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         aria-label="Open space menu"
         class="_icon-button_m2erp_8 mx_SpaceMenu_button"
         data-state="closed"
-        id="radix-«rs»"
+        id="radix-«r28»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -221,42 +421,79 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         </div>
       </button>
     </div>
-    <button
+    <div
-      aria-disabled="false"
+      class="mx_Flex"
-      aria-expanded="false"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      aria-haspopup="menu"
-      aria-label="Add"
-      class="_icon-button_m2erp_8"
-      data-state="closed"
-      id="radix-«ru»"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-      type="button"
     >
-      <div
+      <button
-        class="_indicator-icon_zr2a0_17"
+        aria-disabled="false"
-        style="--cpd-icon-button-size: 100%;"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Room Options"
+        aria-labelledby="«r2c»"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«r2a»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
       >
-        <svg
+        <div
-          color="var(--cpd-color-icon-secondary)"
+          class="_indicator-icon_zr2a0_17"
-          fill="currentColor"
+          style="--cpd-icon-button-size: 100%;"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
         >
-          <path
+          <svg
-            clip-rule="evenodd"
+            color="var(--cpd-color-icon-secondary)"
-            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill="currentColor"
-            fill-rule="evenodd"
+            height="1em"
-          />
+            viewBox="0 0 24 24"
-          <path
+            width="1em"
-            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            xmlns="http://www.w3.org/2000/svg"
-          />
+          >
-        </svg>
+            <path
-      </div>
+              d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
-    </button>
+            />
+          </svg>
+        </div>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Add"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«r2h»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
   </header>
 </DocumentFragment>
 `;
@@ -279,42 +516,79 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
         title
       </h1>
     </div>
-    <button
+    <div
-      aria-disabled="false"
+      class="mx_Flex"
-      aria-expanded="false"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      aria-haspopup="menu"
-      aria-label="Add"
-      class="_icon-button_m2erp_8"
-      data-state="closed"
-      id="radix-«r10»"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-      type="button"
     >
-      <div
+      <button
-        class="_indicator-icon_zr2a0_17"
+        aria-disabled="false"
-        style="--cpd-icon-button-size: 100%;"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Room Options"
+        aria-labelledby="«r2m»"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«r2k»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
       >
-        <svg
+        <div
-          color="var(--cpd-color-icon-secondary)"
+          class="_indicator-icon_zr2a0_17"
-          fill="currentColor"
+          style="--cpd-icon-button-size: 100%;"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
         >
-          <path
+          <svg
-            clip-rule="evenodd"
+            color="var(--cpd-color-icon-secondary)"
-            d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+            fill="currentColor"
-            fill-rule="evenodd"
+            height="1em"
-          />
+            viewBox="0 0 24 24"
-          <path
+            width="1em"
-            d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            xmlns="http://www.w3.org/2000/svg"
-          />
+          >
-        </svg>
+            <path
-      </div>
+              d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
-    </button>
+            />
+          </svg>
+        </div>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Add"
+        class="_icon-button_m2erp_8"
+        data-state="closed"
+        id="radix-«r2r»"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_zr2a0_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            color="var(--cpd-color-icon-secondary)"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
   </header>
 </DocumentFragment>
 `;

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap

@@ -8,7 +8,7 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
     aria-haspopup="menu"
     aria-label="Room Options"
     aria-labelledby="«r2»"
-    class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
+    class="_icon-button_m2erp_8"
     data-state="closed"
     id="radix-«r0»"
     role="button"
@@ -21,6 +21,7 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
+        color="var(--cpd-color-icon-secondary)"
         fill="currentColor"
         height="1em"
         viewBox="0 0 24 24"
@@ -28,7 +29,7 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+          d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
         />
       </svg>
     </div>

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -23,36 +23,73 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
           Home
         </h1>
       </div>
-      <button
+      <div
-        aria-label="New message"
+        class="mx_Flex"
-        class="_icon-button_m2erp_8"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«rk»"
+          class="_icon-button_m2erp_8"
+          data-state="closed"
+          id="radix-«ri»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
-      </button>
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-label="New message"
+          class="_icon-button_m2erp_8"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_zr2a0_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
     </header>
     <ul
       aria-label="Room list filters"
@@ -123,10 +160,10 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Filter"
-        aria-labelledby="«rk»"
+        aria-labelledby="«rr»"
         class="_icon-button_m2erp_8"
         data-state="closed"
-        id="radix-«ri»"
+        id="radix-«rp»"
         role="button"
         style="--cpd-icon-button-size: 28px;"
         tabindex="0"
@@ -150,37 +187,6 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
         </div>
       </button>
       All activity
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Room Options"
-        aria-labelledby="«rr»"
-        class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
-        data-state="closed"
-        id="radix-«rp»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_zr2a0_17"
-          style="--cpd-icon-button-size: 100%;"
-        >
-          <svg
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-            />
-          </svg>
-        </div>
-      </button>
     </div>
     <div
       class="mx_RoomListSkeleton"
@@ -272,42 +278,79 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
           Home
         </h1>
       </div>
-      <button
+      <div
-        aria-disabled="false"
+        class="mx_Flex"
-        aria-expanded="false"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-        aria-haspopup="menu"
-        aria-label="Add"
-        class="_icon-button_m2erp_8"
-        data-state="closed"
-        id="radix-«r0»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«r2»"
+          class="_icon-button_m2erp_8"
+          data-state="closed"
+          id="radix-«r0»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
-      </button>
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Add"
+          class="_icon-button_m2erp_8"
+          data-state="closed"
+          id="radix-«r7»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_zr2a0_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
     </header>
     <ul
       aria-label="Room list filters"
@@ -378,10 +421,10 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Filter"
-        aria-labelledby="«r4»"
+        aria-labelledby="«rb»"
         class="_icon-button_m2erp_8"
         data-state="closed"
-        id="radix-«r2»"
+        id="radix-«r9»"
         role="button"
         style="--cpd-icon-button-size: 28px;"
         tabindex="0"
@@ -405,37 +448,6 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         </div>
       </button>
       All activity
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Room Options"
-        aria-labelledby="«rb»"
-        class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
-        data-state="closed"
-        id="radix-«r9»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_zr2a0_17"
-          style="--cpd-icon-button-size: 100%;"
-        >
-          <svg
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-            />
-          </svg>
-        </div>
-      </button>
     </div>
     <div
       class="mx_RoomListSkeleton"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSecondaryFilters-test.tsx.snap

@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RoomListSecondaryFilters /> should render 'room options' button 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Secondary filters"
-    class="mx_Flex mx_RoomListSecondaryFilters"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 4px; --mx-flex-wrap: nowrap;"
-  >
-    <button
-      aria-disabled="false"
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="Filter"
-      aria-labelledby="«r2»"
-      class="_icon-button_m2erp_8"
-      data-state="closed"
-      id="radix-«r0»"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-      type="button"
-    >
-      <div
-        class="_indicator-icon_zr2a0_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1"
-          />
-        </svg>
-      </div>
-    </button>
-    All activity
-    <button
-      aria-disabled="false"
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="Room Options"
-      aria-labelledby="«r9»"
-      class="_icon-button_m2erp_8 mx_RoomListSecondaryFilters_roomOptionsButton"
-      data-state="closed"
-      id="radix-«r7»"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-      type="button"
-    >
-      <div
-        class="_indicator-icon_zr2a0_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-          />
-        </svg>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;