Unread Sorting - Add option for sorting in OptionsMenuView (#31754)

* Add new sort option

* Support new sorting algorithm in vm

* Add option item for unread sorter

* Add tests

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

@@ -51,7 +51,8 @@
         "sort": "Sort",
         "sort_type": {
             "activity": "Activity",
-            "atoz": "A-Z"
+            "atoz": "A-Z",
+            "unread_first": "Unread first"
         },
         "space_menu": {
             "home": "Space home",

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

@@ -19,7 +19,7 @@ import styles from "./RoomListHeaderView.module.css";
 /**
  * The available sorting options for the room list.
  */
-export type SortOption = "recent" | "alphabetical";
+export type SortOption = "recent" | "alphabetical" | "unread-first";
 
 export interface RoomListHeaderViewSnapshot {
     /**

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

@@ -36,6 +36,7 @@ describe("<OptionMenuView />", () => {
 
         expect(screen.getByRole("menuitemradio", { name: "A-Z" })).toBeChecked();
         expect(screen.getByRole("menuitemradio", { name: "Activity" })).not.toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Unread first" })).not.toBeChecked();
     });
 
     it("should show Activity selected if activeSortOption is recent", async () => {
@@ -49,9 +50,25 @@ describe("<OptionMenuView />", () => {
         await user.click(button);
 
         expect(screen.getByRole("menuitemradio", { name: "A-Z" })).not.toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Unread first" })).not.toBeChecked();
         expect(screen.getByRole("menuitemradio", { name: "Activity" })).toBeChecked();
     });
 
+    it("should show `Unread First` selected if activeSortOption is unread-first", async () => {
+        const user = userEvent.setup();
+
+        const vm = new MockedViewModel({ ...defaultSnapshot, activeSortOption: "unread-first" });
+        render(<OptionMenuView vm={vm} />);
+
+        // Open the menu
+        const button = screen.getByRole("button", { name: "Room Options" });
+        await user.click(button);
+
+        expect(screen.getByRole("menuitemradio", { name: "A-Z" })).not.toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Activity" })).not.toBeChecked();
+        expect(screen.getByRole("menuitemradio", { name: "Unread first" })).toBeChecked();
+    });
+
     it("should sort A to Z", async () => {
         const user = userEvent.setup();
 
@@ -78,6 +95,19 @@ describe("<OptionMenuView />", () => {
         expect(vm.sort).toHaveBeenCalledWith("recent");
     });
 
+    it("should sort by unread first", async () => {
+        const user = userEvent.setup();
+
+        const vm = new MockedViewModel({ ...defaultSnapshot, activeSortOption: "recent" });
+        render(<OptionMenuView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Room Options" }));
+
+        await user.click(screen.getByRole("menuitemradio", { name: "Unread first" }));
+
+        expect(vm.sort).toHaveBeenCalledWith("unread-first");
+    });
+
     it("should toggle message preview", async () => {
         const user = userEvent.setup();
 

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

@@ -60,6 +60,11 @@ export function OptionMenuView({ vm }: OptionMenuViewProps): JSX.Element {
                 checked={activeSortOption === "recent"}
                 onSelect={() => vm.sort("recent")}
             />
+            <RadioMenuItem
+                label={_t("room_list|sort_type|unread_first")}
+                checked={activeSortOption === "unread-first"}
+                onSelect={() => vm.sort("unread-first")}
+            />
             <RadioMenuItem
                 label={_t("room_list|sort_type|atoz")}
                 checked={activeSortOption === "alphabetical"}