Add message preview support to the new room list (#29784)

* Add message preview support to the new room list

 * Support showing message previews in the room list items
 * Add the secondary filters bar with the '...' menu, containing
   just the option for message previews for now
 * Change message preview toggle hook to update when setting is updated

* Use new compund release

* Unused i18n keys

* Unused imports

* Fix test & update snapshot

* Fix more snapshots

* Fix test

Split into two tests that test setting & updating

* Type import

* Snapshots

* Remove unnecessary Flex container

and update screenshots as the room list has got shorter from the added bar

* More snapshots & screenshots

* More snapshots

* Add test and remove active filter that's not done yet

* Update snapshots & screenshots again

* Other screenshot

* Add more tests

* Fix syntax

* Fix tests

* Use setter directly

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix CSS

* Remopve filter button css for now

* Update to remove forwardRef

* Add comment on why lack of TypedEventEmitter

* snapshots again

* Screenshots again

* Use original screenshots, maybe they'll work now

* Add comment

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

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

@@ -15,7 +15,7 @@ import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";
 
-interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface RoomListItemViewProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The room to display
      */
@@ -33,7 +33,7 @@ export const RoomListItemView = memo(function RoomListItemView({
     room,
     isSelected,
     ...props
-}: RoomListItemViewPropsProps): JSX.Element {
+}: RoomListItemViewProps): JSX.Element {
     const vm = useRoomListItemViewModel(room);
 
     const [isHover, setIsHover] = useState(false);
@@ -73,9 +73,12 @@ export const RoomListItemView = memo(function RoomListItemView({
                     justify="space-between"
                 >
                     {/* We truncate the room name when too long. Title here is to show the full name on hover */}
-                    <span className="mx_RoomListItemView_roomName" title={vm.name}>
-                        {vm.name}
-                    </span>
+                    <div className="mx_RoomListItemView_text">
+                        <div className="mx_RoomListItemView_roomName" title={vm.name}>
+                            {vm.name}
+                        </div>
+                        <div className="mx_RoomListItemView_messagePreview">{vm.messagePreview}</div>
+                    </div>
                     {showHoverDecoration ? (
                         <RoomListItemMenuView
                             room={room}

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

@@ -0,0 +1,59 @@
+/*
+ * 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 { IconButton, Menu, MenuTitle, CheckboxMenuItem, Tooltip } from "@vector-im/compound-web";
+import React, { type Ref, type JSX, useState } from "react";
+import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+
+import { _t } from "../../../../languageHandler";
+import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+
+interface MenuTriggerProps extends React.ComponentProps<typeof IconButton> {
+    ref?: Ref<HTMLButtonElement>;
+}
+
+const MenuTrigger = ({ ref, ...props }: MenuTriggerProps): JSX.Element => (
+    <Tooltip label={_t("room_list|room_options")}>
+        <IconButton
+            className="mx_RoomListSecondaryFilters_roomOptionsButton"
+            aria-label={_t("room_list|room_options")}
+            {...props}
+            ref={ref}
+        >
+            <OverflowHorizontalIcon />
+        </IconButton>
+    </Tooltip>
+);
+
+interface Props {
+    /**
+     * The view model for the room list view
+     */
+    vm: RoomListViewState;
+}
+
+export function RoomListOptionsMenu({ vm }: Props): JSX.Element {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            title={_t("room_list|room_options")}
+            showTitle={false}
+            align="start"
+            trigger={<MenuTrigger />}
+        >
+            <MenuTitle title={_t("room_list|appearance")} />
+            <CheckboxMenuItem
+                label={_t("room_list|show_message_previews")}
+                onSelect={vm.toggleMessagePreview}
+                checked={vm.shouldShowMessagePreview}
+            />
+        </Menu>
+    );
+}

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { Flex } from "../../../utils/Flex";
+import { _t } from "../../../../languageHandler";
+import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
+
+interface Props {
+    /**
+     * The view model for the room list
+     */
+    vm: RoomListViewState;
+}
+
+/**
+ * The secondary filters for the room list (eg. mentions only / invites only).
+ */
+export function RoomListSecondaryFilters({ vm }: Props): JSX.Element {
+    return (
+        <Flex
+            aria-label={_t("room_list|secondary_filters")}
+            className="mx_RoomListSecondaryFilters"
+            align="center"
+            gap="8px"
+        >
+            <RoomListOptionsMenu vm={vm} />
+        </Flex>
+    );
+}

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

@@ -11,6 +11,7 @@ import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewM
 import { RoomList } from "./RoomList";
 import { EmptyRoomList } from "./EmptyRoomList";
 import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
+import { RoomListSecondaryFilters } from "./RoomListSecondaryFilters";
 
 /**
  * Host the room list and the (future) room filters
@@ -22,6 +23,7 @@ export function RoomListView(): JSX.Element {
     return (
         <>
             <RoomListPrimaryFilters vm={vm} />
+            <RoomListSecondaryFilters vm={vm} />
             {isRoomListEmpty ? <EmptyRoomList vm={vm} /> : <RoomList vm={vm} />}
         </>
     );