RoomListViewModel: Provide a way to resort the room list and track the active sort method (#29499)

* Add a hook that deals with the sorting behaviour

Hook will provide a function to sort the list and also provides a state
which tracks the currently active sort option.

* Use hook in vm

* Write test for the vm

* Fix broken view tests

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -12,6 +12,7 @@ import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import dispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms";
+import { type SortOption, useSorter } from "./useSorter";
 
 export interface RoomListViewState {
     /**
@@ -39,6 +40,16 @@ export interface RoomListViewState {
      * The currently active secondary filter.
      */
     activeSecondaryFilter: SecondaryFilters;
+
+    /**
+     * Change the sort order of the room-list.
+     */
+    sort: (option: SortOption) => void;
+
+    /**
+     * The currently active sort option.
+     */
+    activeSortOption: SortOption;
 }
 
 /**
@@ -47,6 +58,7 @@ export interface RoomListViewState {
  */
 export function useRoomListViewModel(): RoomListViewState {
     const { primaryFilters, rooms, activateSecondaryFilter, activeSecondaryFilter } = useFilteredRooms();
+    const { activeSortOption, sort } = useSorter();
 
     const openRoom = useCallback((roomId: string): void => {
         dispatcher.dispatch<ViewRoomPayload>({
@@ -62,5 +74,7 @@ export function useRoomListViewModel(): RoomListViewState {
         primaryFilters,
         activateSecondaryFilter,
         activeSecondaryFilter,
+        activeSortOption,
+        sort,
     };
 }

src/components/viewmodels/roomlist/useSorter.ts

@@ -0,0 +1,62 @@
+/*
+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 { useState } from "react";
+
+import RoomListStoreV3 from "../../../stores/room-list-v3/RoomListStoreV3";
+import { SortingAlgorithm } from "../../../stores/room-list-v3/skip-list/sorters";
+import SettingsStore from "../../../settings/SettingsStore";
+
+/**
+ * Sorting options made available to the view.
+ */
+export const enum SortOption {
+    Activity = SortingAlgorithm.Recency,
+    AToZ = SortingAlgorithm.Alphabetic,
+}
+
+/**
+ * {@link SortOption} holds almost the same information as
+ * {@link SortingAlgorithm}. This is done intentionally to
+ * prevent the view from having a dependence on the
+ * model (which is the store in this case).
+ */
+const sortingAlgorithmToSortingOption = {
+    [SortingAlgorithm.Alphabetic]: SortOption.AToZ,
+    [SortingAlgorithm.Recency]: SortOption.Activity,
+};
+
+const sortOptionToSortingAlgorithm = {
+    [SortOption.AToZ]: SortingAlgorithm.Alphabetic,
+    [SortOption.Activity]: SortingAlgorithm.Recency,
+};
+
+interface SortState {
+    sort: (option: SortOption) => void;
+    activeSortOption: SortOption;
+}
+
+/**
+ * This hook does two things:
+ * - Provides a way to track the currently active sort option.
+ * - Provides a function to resort the room list.
+ */
+export function useSorter(): SortState {
+    const [activeSortingAlgorithm, setActiveSortingAlgorithm] = useState(() =>
+        SettingsStore.getValue("RoomList.preferredSorting"),
+    );
+
+    const sort = (option: SortOption): void => {
+        const sortingAlgorithm = sortOptionToSortingAlgorithm[option];
+        RoomListStoreV3.instance.resort(sortingAlgorithm);
+        setActiveSortingAlgorithm(sortingAlgorithm);
+    };
+
+    return {
+        sort,
+        activeSortOption: sortingAlgorithmToSortingOption[activeSortingAlgorithm!],
+    };
+}