Add message preview toggle to room list header option (#31821)

* feat: add message preview action to room list header option

https://github.com/element-hq/element-web/issues/31214

* test: add e2e test

packages/shared-components/src/i18n/strings/en_EN.json

@@ -44,8 +44,10 @@
         }
     },
     "room_list": {
+        "appearance": "Appearance",
         "open_space_menu": "Open space menu",
         "room_options": "Room Options",
+        "show_message_previews": "Show message previews",
         "sort": "Sort",
         "sort_type": {
             "activity": "Activity",

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx

@@ -28,6 +28,7 @@ const RoomListHeaderViewWrapper = ({
     inviteInSpace,
     openSpacePreferences,
     sort,
+    toggleMessagePreview,
     ...rest
 }: RoomListHeaderProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -39,6 +40,7 @@ const RoomListHeaderViewWrapper = ({
         inviteInSpace,
         sort,
         openSpacePreferences,
+        toggleMessagePreview,
     });
     return <RoomListHeaderView vm={vm} />;
 };
@@ -57,6 +59,7 @@ export default {
         inviteInSpace: fn(),
         sort: fn(),
         openSpacePreferences: fn(),
+        toggleMessagePreview: fn(),
     },
     parameters: {
         design: {

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx

@@ -56,6 +56,10 @@ export interface RoomListHeaderViewSnapshot {
      * The currently active sort option.
      */
     activeSortOption: SortOption;
+    /**
+     * Whether message previews are enabled in the room list.
+     */
+    isMessagePreviewEnabled: boolean;
 }
 
 export interface RoomListHeaderViewActions {
@@ -91,6 +95,10 @@ export interface RoomListHeaderViewActions {
      * Change the sort order of the room-list.
      */
     sort: (option: SortOption) => void;
+    /**
+     * Toggle message preview display in the room list.
+     */
+    toggleMessagePreview: () => void;
 }
 
 /**

packages/shared-components/src/room-list/RoomListHeaderView/menu/OptionMenuView.test.tsx

@@ -77,4 +77,17 @@ describe("<OptionMenuView />", () => {
 
         expect(vm.sort).toHaveBeenCalledWith("recent");
     });
+
+    it("should toggle message preview", async () => {
+        const user = userEvent.setup();
+
+        const vm = new MockedViewModel({ ...defaultSnapshot, isMessagePreviewEnabled: true });
+        render(<OptionMenuView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+        expect(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })).toBeChecked();
+
+        await user.click(screen.getByRole("menuitemcheckbox", { name: "Show message previews" }));
+        expect(vm.toggleMessagePreview).toHaveBeenCalled();
+    });
 });

packages/shared-components/src/room-list/RoomListHeaderView/menu/OptionMenuView.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { IconButton, Menu, MenuTitle, RadioMenuItem } from "@vector-im/compound-web";
+import { CheckboxMenuItem, IconButton, Menu, MenuTitle, RadioMenuItem } from "@vector-im/compound-web";
 import React, { type JSX, useState } from "react";
 import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
 
@@ -33,7 +33,7 @@ interface OptionMenuViewProps {
 export function OptionMenuView({ vm }: OptionMenuViewProps): JSX.Element {
     const { translate: _t } = useI18n();
     const [open, setOpen] = useState(false);
-    const { activeSortOption } = useViewModel(vm);
+    const { activeSortOption, isMessagePreviewEnabled } = useViewModel(vm);
 
     return (
         <Menu
@@ -65,6 +65,12 @@ export function OptionMenuView({ vm }: OptionMenuViewProps): JSX.Element {
                 checked={activeSortOption === "alphabetical"}
                 onSelect={() => vm.sort("alphabetical")}
             />
+            <MenuTitle title={_t("room_list|appearance")} />
+            <CheckboxMenuItem
+                label={_t("room_list|show_message_previews")}
+                onSelect={vm.toggleMessagePreview}
+                checked={isMessagePreviewEnabled}
+            />
         </Menu>
     );
 }

packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts

@@ -20,6 +20,7 @@ export class MockedViewModel extends MockViewModel<RoomListHeaderViewSnapshot> i
     public inviteInSpace = jest.fn();
     public sort = jest.fn();
     public openSpacePreferences = jest.fn();
+    public toggleMessagePreview = jest.fn();
 }
 
 export const defaultSnapshot: RoomListHeaderViewSnapshot = {
@@ -31,4 +32,5 @@ export const defaultSnapshot: RoomListHeaderViewSnapshot = {
     canInviteInSpace: true,
     canAccessSpaceSettings: true,
     activeSortOption: "recent",
+    isMessagePreviewEnabled: true,
 };