Low priority menu item should be a toggle (#30071)

* Use toggle on low priority menu item

* Fix broken tests

src/components/viewmodels/roomlist/RoomListItemMenuViewModel.tsx

@@ -37,6 +37,10 @@ export interface RoomListItemMenuViewState {
      * Whether the room is a favourite room.
      */
     isFavourite: boolean;
+    /**
+     * Whether the room is a low priority room.
+     */
+    isLowPriority: boolean;
     /**
      * Can invite other user's in the room.
      */
@@ -117,6 +121,7 @@ export function useRoomListItemMenuViewModel(room: Room): RoomListItemMenuViewSt
 
     const isDm = Boolean(DMRoomMap.shared().getUserIdForRoomId(room.roomId));
     const isFavourite = Boolean(roomTags[DefaultTagID.Favourite]);
+    const isLowPriority = Boolean(roomTags[DefaultTagID.LowPriority]);
     const isArchived = Boolean(roomTags[DefaultTagID.Archived]);
 
     const showMoreOptionsMenu = hasAccessToOptionsMenu(room);
@@ -200,6 +205,7 @@ export function useRoomListItemMenuViewModel(room: Room): RoomListItemMenuViewSt
         showMoreOptionsMenu,
         showNotificationMenu,
         isFavourite,
+        isLowPriority,
         canInvite,
         canCopyRoomLink,
         canMarkAsRead,

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

@@ -109,12 +109,12 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
                 onSelect={vm.toggleFavorite}
                 onClick={(evt) => evt.stopPropagation()}
             />
-            <MenuItem
+            <ToggleMenuItem
+                checked={vm.isLowPriority}
                 Icon={ArrowDownIcon}
                 label={_t("room_list|more_options|low_priority")}
                 onSelect={vm.toggleLowPriority}
                 onClick={(evt) => evt.stopPropagation()}
-                hideChevron={true}
             />
             {vm.canInvite && (
                 <MenuItem

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

@@ -28,6 +28,7 @@ describe("<RoomListItemMenuView />", () => {
         showMoreOptionsMenu: true,
         showNotificationMenu: true,
         isFavourite: true,
+        isLowPriority: true,
         canInvite: true,
         canMarkAsUnread: true,
         canMarkAsRead: true,
@@ -114,7 +115,7 @@ describe("<RoomListItemMenuView />", () => {
         expect(defaultValue.toggleFavorite).toHaveBeenCalled();
 
         await user.click(openMenu);
-        await user.click(screen.getByRole("menuitem", { name: "Low priority" }));
+        await user.click(screen.getByRole("menuitemcheckbox", { name: "Low priority" }));
         expect(defaultValue.toggleLowPriority).toHaveBeenCalled();
 
         await user.click(openMenu);