New room list: add more options menu on room list item

package.json

@@ -92,7 +92,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.6.4",
+        "@vector-im/compound-web": "^7.7.2",
         "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

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

@@ -11,6 +11,7 @@ import { test, expect } from "../../../element-web-test";
 
 test.describe("Room list", () => {
     test.use({
+        displayName: "Alice",
         labsFlags: ["feature_new_room_list"],
     });
 
@@ -47,4 +48,33 @@ test.describe("Room list", () => {
         await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
         await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
     });
+
+    test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+        const roomListView = getRoomList(page);
+        const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+        await roomItem.hover();
+
+        await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
+        const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+        await roomItemMenu.click();
+        await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
+
+        // It should make the room favourited
+        await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
+
+        // Check that the room is favourited
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
+        // It should show the invite dialog
+        await page.getByRole("menuitem", { name: "invite" }).click();
+        await expect(page.getByRole("heading", { name: "Invite to room29" })).toBeVisible();
+        await app.closeDialog();
+
+        // It should leave the room
+        await roomItem.hover();
+        await roomItemMenu.click();
+        await page.getByRole("menuitem", { name: "leave room" }).click();
+        await expect(roomItem).not.toBeVisible();
+    });
 });

res/css/_components.pcss

@@ -271,8 +271,9 @@
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
 @import "./views/rooms/RoomListPanel/_RoomList.pcss";
-@import "./views/rooms/RoomListPanel/_RoomListCell.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListItemMenuView.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListItemView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";

res/css/views/rooms/RoomListPanel/_RoomListItemMenuView.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_RoomListItemMenuView {
+    svg {
+        fill: var(--cpd-color-icon-primary);
+    }
+}

res/css/views/rooms/RoomListPanel/_RoomListCell.pcss → res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss

@@ -6,27 +6,28 @@
  */
 
 /**
- * The RoomCell has the following structure:
+ * The RoomListItemView has the following structure:
  * button----------------------------------------|
  * | <-12px-> container--------------------------|
  * |          | room avatar <-12px-> content-----|
  * |          |                      | room_name |
  * |          |                      | ----------| <-- border
  * |---------------------------------------------|
  */
-.mx_RoomListCell {
+.mx_RoomListItemView {
     all: unset;
 
     &:hover {
         background-color: var(--cpd-color-bg-action-secondary-hovered);
     }
 
-    .mx_RoomListCell_container {
+    .mx_RoomListItemView_container {
         padding-left: var(--cpd-space-3x);
         font: var(--cpd-font-body-md-regular);
         height: 100%;
 
-        .mx_RoomListCell_content {
+        .mx_RoomListItemView_content {
+            padding-right: var(--cpd-space-3x);
             height: 100%;
             flex: 1;
             /* The border is only under the room name and the future hover menu  */
@@ -42,3 +43,7 @@
         }
     }
 }
+
+.mx_RoomListItemView_menu_open {
+    background-color: var(--cpd-color-bg-action-secondary-hovered);
+}

src/components/viewmodels/roomlist/RoomListItemMenuViewModel.tsx

@@ -0,0 +1,180 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { useCallback } from "react";
+import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useEventEmitterState } from "../../../hooks/useEventEmitter";
+import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
+import { hasAccessToOptionsMenu } from "./utils";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import { DefaultTagID } from "../../../stores/room-list/models";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
+import dispatcher from "../../../dispatcher/dispatcher";
+import { clearRoomNotification, setMarkedUnreadState } from "../../../utils/notifications";
+import PosthogTrackers from "../../../PosthogTrackers";
+import { tagRoom } from "../../../utils/room/tagRoom";
+
+export interface RoomListItemMenuViewState {
+    /**
+     * Whether the more options menu should be shown.
+     */
+    showMoreOptionsMenu: boolean;
+    /**
+     * Whether the room is a favourite room.
+     */
+    isFavourite: boolean;
+    /**
+     * Can invite other user's in the room.
+     */
+    canInvite: boolean;
+    /**
+     * Can copy the room link.
+     */
+    canCopyRoomLink: boolean;
+    /**
+     * Can mark the room as read.
+     */
+    canMarkAsRead: boolean;
+    /**
+     * Can mark the room as unread.
+     */
+    canMarkAsUnread: boolean;
+    /**
+     * Mark the room as read.
+     * @param evt
+     */
+    markAsRead: (evt: Event) => void;
+    /**
+     * Mark the room as unread.
+     * @param evt
+     */
+    markAsUnread: (evt: Event) => void;
+    /**
+     * Toggle the room as favourite.
+     * @param evt
+     */
+    toggleFavorite: (evt: Event) => void;
+    /**
+     * Toggle the room as low priority.
+     */
+    toggleLowPriority: () => void;
+    /**
+     * Invite other users in the room.
+     * @param evt
+     */
+    invite: (evt: Event) => void;
+    /**
+     * Copy the room link in the clipboard.
+     * @param evt
+     */
+    copyRoomLink: (evt: Event) => void;
+    /**
+     * Leave the room.
+     * @param evt
+     */
+    leaveRoom: (evt: Event) => void;
+}
+
+export function useRoomListItemMenuViewModel(room: Room): RoomListItemMenuViewState {
+    const matrixClient = useMatrixClientContext();
+    const roomTags = useEventEmitterState(room, RoomEvent.Tags, () => room.tags);
+    const { level: notificationLevel } = useUnreadNotifications(room);
+
+    const showMoreOptionsMenu = hasAccessToOptionsMenu(room);
+
+    const isDm = Boolean(DMRoomMap.shared().getUserIdForRoomId(room.roomId));
+    const isFavourite = Boolean(roomTags[DefaultTagID.Favourite]);
+    const isArchived = Boolean(roomTags[DefaultTagID.Archived]);
+
+    const canMarkAsRead = notificationLevel > NotificationLevel.None;
+    const canMarkAsUnread = !canMarkAsRead && !isArchived;
+
+    const canInvite =
+        room.canInvite(matrixClient.getUserId()!) && !isDm && shouldShowComponent(UIComponent.InviteUsers);
+    const canCopyRoomLink = !isDm;
+
+    // Actions
+
+    const markAsRead = useCallback(
+        async (evt: Event): Promise<void> => {
+            await clearRoomNotification(room, matrixClient);
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuMarkRead", evt);
+        },
+        [room, matrixClient],
+    );
+
+    const markAsUnread = useCallback(
+        async (evt: Event): Promise<void> => {
+            await setMarkedUnreadState(room, matrixClient, true);
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuMarkUnread", evt);
+        },
+        [room, matrixClient],
+    );
+
+    const toggleFavorite = useCallback(
+        (evt: Event): void => {
+            tagRoom(room, DefaultTagID.Favourite);
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuFavouriteToggle", evt);
+        },
+        [room],
+    );
+
+    const toggleLowPriority = useCallback((): void => tagRoom(room, DefaultTagID.LowPriority), [room]);
+
+    const invite = useCallback(
+        (evt: Event): void => {
+            dispatcher.dispatch({
+                action: "view_invite",
+                roomId: room.roomId,
+            });
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuInviteItem", evt);
+        },
+        [room],
+    );
+
+    const copyRoomLink = useCallback(
+        (evt: Event): void => {
+            dispatcher.dispatch({
+                action: "copy_room",
+                room_id: room.roomId,
+            });
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuFavouriteToggle", evt);
+        },
+        [room],
+    );
+
+    const leaveRoom = useCallback(
+        (evt: Event): void => {
+            dispatcher.dispatch({
+                action: isArchived ? "forget_room" : "leave_room",
+                room_id: room.roomId,
+            });
+            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuLeaveItem", evt);
+        },
+        [room, isArchived],
+    );
+
+    return {
+        showMoreOptionsMenu,
+        isFavourite,
+        canInvite,
+        canCopyRoomLink,
+        canMarkAsRead,
+        canMarkAsUnread,
+        markAsRead,
+        markAsUnread,
+        toggleFavorite,
+        toggleLowPriority,
+        invite,
+        copyRoomLink,
+        leaveRoom,
+    };
+}

src/components/viewmodels/roomlist/RoomListItemViewModel.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { useCallback } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
+
+import dispatcher from "../../../dispatcher/dispatcher";
+import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../../../dispatcher/actions";
+import { hasAccessToOptionsMenu } from "./utils";
+
+export interface RoomListItemViewState {
+    /**
+     * Whether the hover menu should be shown.
+     */
+    showHoverMenu: boolean;
+    /**
+     * Open the room having given roomId.
+     */
+    openRoom: () => void;
+}
+
+/**
+ * View model for the room list item
+ * @see {@link RoomListItemViewState} for more information about what this view model returns.
+ */
+export function useRoomListItemViewModel(room: Room): RoomListItemViewState {
+    // incoming: Check notification menu rights
+    const showHoverMenu = hasAccessToOptionsMenu(room);
+
+    // Actions
+
+    const openRoom = useCallback((): void => {
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+            metricsTrigger: "RoomList",
+        });
+    }, [room]);
+
+    return {
+        showHoverMenu,
+        openRoom,
+    };
+}

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -5,25 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { useCallback } from "react";
-
 import type { Room } from "matrix-js-sdk/src/matrix";
-import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import dispatcher from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
 import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms";
 
 export interface RoomListViewState {
     /**
      * A list of rooms to be displayed in the left panel.
      */
     rooms: Room[];
-
-    /**
-     * Open the room having given roomId.
-     */
-    openRoom: (roomId: string) => void;
-
     /**
      * A list of objects that provide the view enough information
      * to render primary room filters.
@@ -48,17 +37,8 @@ export interface RoomListViewState {
 export function useRoomListViewModel(): RoomListViewState {
     const { primaryFilters, rooms, activateSecondaryFilter, activeSecondaryFilter } = useFilteredRooms();
 
-    const openRoom = useCallback((roomId: string): void => {
-        dispatcher.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            room_id: roomId,
-            metricsTrigger: "RoomList",
-        });
-    }, []);
-
     return {
         rooms,
-        openRoom,
         primaryFilters,
         activateSecondaryFilter,
         activeSecondaryFilter,