Introduce section sorting to the roomlist

Author: justjanne

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -121,11 +121,12 @@ export interface RoomListHeaderViewState {
     /**
      * Change the sort order of the room-list.
      */
-    sort: (option: SortOption) => void;
+    sort: (option: SortOption, grouped: boolean) => void;
     /**
      * The currently active sort option.
      */
     activeSortOption: SortOption;
+    grouped: boolean;
 }
 
 /**
@@ -147,7 +148,7 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
 
     /* Actions */
 
-    const { activeSortOption, sort } = useSorter();
+    const { activeSortOption, grouped, sort } = useSorter();
 
     const createChatRoom = useCallback((e: Event) => {
         defaultDispatcher.fire(Action.CreateChat);
@@ -219,6 +220,7 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         openSpacePreferences,
         openSpaceSettings,
         activeSortOption,
+        grouped,
         sort,
     };
 }

src/components/viewmodels/roomlist/useSorter.ts

@@ -9,6 +9,8 @@ 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";
+import { FilterKey } from "../../../stores/room-list-v3/skip-list/filters";
+import { arrayHasDiff } from "../../../utils/arrays.ts";
 
 /**
  * Sorting options made available to the view.
@@ -35,10 +37,14 @@ const sortOptionToSortingAlgorithm = {
 };
 
 interface SortState {
-    sort: (option: SortOption) => void;
+    sort: (option: SortOption, grouped: boolean) => void;
     activeSortOption: SortOption;
+    grouped: boolean;
 }
 
+const defaultSections = [FilterKey.FavouriteFilter, FilterKey.PeopleFilter, null];
+const noSections = [null];
+
 /**
  * This hook does two things:
  * - Provides a way to track the currently active sort option.
@@ -48,15 +54,19 @@ export function useSorter(): SortState {
     const [activeSortingAlgorithm, setActiveSortingAlgorithm] = useState(() =>
         SettingsStore.getValue("RoomList.preferredSorting"),
     );
+    const [activeSections, setActiveSections] = useState(() => SettingsStore.getValue("RoomList.sections"));
 
-    const sort = (option: SortOption): void => {
+    const sort = (option: SortOption, grouped: boolean): void => {
         const sortingAlgorithm = sortOptionToSortingAlgorithm[option];
-        RoomListStoreV3.instance.resort(sortingAlgorithm);
+        const sections = grouped ? defaultSections : noSections;
+        RoomListStoreV3.instance.resort(sortingAlgorithm, sections);
         setActiveSortingAlgorithm(sortingAlgorithm);
+        setActiveSections(sections);
     };
 
     return {
         sort,
         activeSortOption: sortingAlgorithmToSortingOption[activeSortingAlgorithm!],
+        grouped: arrayHasDiff(noSections, activeSections),
     };
 }

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { IconButton, Menu, MenuTitle, Tooltip, RadioMenuItem } from "@vector-im/compound-web";
+import { IconButton, Menu, MenuTitle, Tooltip, RadioMenuItem, CheckboxMenuItem } from "@vector-im/compound-web";
 import React, { type Ref, type JSX, useState, useCallback } from "react";
 import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
 
@@ -36,11 +36,15 @@ export function RoomListOptionsMenu({ vm }: Props): JSX.Element {
     const [open, setOpen] = useState(false);
 
     const onActivitySelected = useCallback(() => {
-        vm.sort(SortOption.Activity);
+        vm.sort(SortOption.Activity, vm.grouped);
     }, [vm]);
 
     const onAtoZSelected = useCallback(() => {
-        vm.sort(SortOption.AToZ);
+        vm.sort(SortOption.AToZ, vm.grouped);
+    }, [vm]);
+
+    const onGroupedSelected = useCallback(() => {
+        vm.sort(vm.activeSortOption, !vm.grouped);
     }, [vm]);
 
     return (
@@ -63,6 +67,7 @@ export function RoomListOptionsMenu({ vm }: Props): JSX.Element {
                 checked={vm.activeSortOption === SortOption.AToZ}
                 onSelect={onAtoZSelected}
             />
+            <CheckboxMenuItem label={_t("room_list|grouped")} checked={vm.grouped} onSelect={onGroupedSelected} />
         </Menu>
     );
 }

src/i18n/strings/en_EN.json

@@ -2152,6 +2152,7 @@
             "rooms": "Rooms",
             "unread": "Unreads"
         },
+        "grouped": "Show favourites first",
         "home_menu_label": "Home options",
         "join_public_room_label": "Join public room",
         "joining_rooms_status": {

src/settings/Settings.tsx

@@ -50,6 +50,7 @@ import { SortingAlgorithm } from "../stores/room-list-v3/skip-list/sorters/index
 import MediaPreviewConfigController from "./controllers/MediaPreviewConfigController.ts";
 import InviteRulesConfigController from "./controllers/InviteRulesConfigController.ts";
 import { type ComputedInviteConfig } from "../@types/invite-rules.ts";
+import { FilterKey } from "../stores/room-list-v3/skip-list/filters";
 
 export const defaultWatchManager = new WatchManager();
 
@@ -324,6 +325,7 @@ export interface Settings {
     "lowBandwidth": IBaseSetting<boolean>;
     "fallbackICEServerAllowed": IBaseSetting<boolean | null>;
     "RoomList.preferredSorting": IBaseSetting<SortingAlgorithm>;
+    "RoomList.sections": IBaseSetting<(FilterKey | null)[]>;
     "RoomList.showMessagePreview": IBaseSetting<boolean>;
     "RightPanel.phasesGlobal": IBaseSetting<IRightPanelForRoomStored | null>;
     "RightPanel.phases": IBaseSetting<IRightPanelForRoomStored | null>;
@@ -1199,6 +1201,10 @@ export const SETTINGS: Settings = {
         supportedLevels: [SettingLevel.DEVICE],
         default: SortingAlgorithm.Recency,
     },
+    "RoomList.sections": {
+        supportedLevels: [SettingLevel.DEVICE],
+        default: [FilterKey.FavouriteFilter, FilterKey.PeopleFilter, null],
+    },
     "RoomList.showMessagePreview": {
         supportedLevels: [SettingLevel.DEVICE],
         default: false,

src/stores/room-list-v3/RoomListStoreV3.ts

@@ -35,6 +35,7 @@ import { SettingLevel } from "../../settings/SettingLevel";
 import { MARKED_UNREAD_TYPE_STABLE, MARKED_UNREAD_TYPE_UNSTABLE } from "../../utils/notifications";
 import { getChangedOverrideRoomMutePushRules } from "../room-list/utils/roomMute";
 import { Action } from "../../dispatcher/actions";
+import { SectionSorter } from "./skip-list/sorters/SectionSorter.ts";
 
 /**
  * These are the filters passed to the room skip list.
@@ -131,24 +132,27 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
     /**
      * Resort the list of rooms using a different algorithm.
      * @param algorithm The sorting algorithm to use.
+     * @param sections Which sections to group rooms into
      */
-    public resort(algorithm: SortingAlgorithm): void {
+    public resort(algorithm: SortingAlgorithm, sections: (FilterKey | null)[]): void {
         if (!this.roomSkipList) throw new Error("Cannot resort room list before skip list is created.");
         if (!this.matrixClient) throw new Error("Cannot resort room list without matrix client.");
-        if (this.roomSkipList.activeSortAlgorithm === algorithm) return;
         const sorter =
             algorithm === SortingAlgorithm.Alphabetic
                 ? new AlphabeticSorter()
                 : new RecencySorter(this.matrixClient.getSafeUserId());
-        this.roomSkipList.useNewSorter(sorter, this.getRooms());
+        const sectionSorter = new SectionSorter(sorter, sections);
+        if (this.roomSkipList.activeSortAlgorithm === sectionSorter.type) return;
+        this.roomSkipList.useNewSorter(sectionSorter, this.getRooms());
         this.emit(LISTS_UPDATE_EVENT);
         SettingsStore.setValue("RoomList.preferredSorting", null, SettingLevel.DEVICE, algorithm);
+        SettingsStore.setValue("RoomList.sections", null, SettingLevel.DEVICE, sections);
     }
 
     /**
      * Currently active sorting algorithm if the store is ready or undefined otherwise.
      */
-    public get activeSortAlgorithm(): SortingAlgorithm | undefined {
+    public get activeSortAlgorithm(): string | undefined {
         return this.roomSkipList?.activeSortAlgorithm;
     }
 
@@ -321,11 +325,12 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      */
     private getPreferredSorter(myUserId: string): Sorter {
         const preferred = SettingsStore.getValue("RoomList.preferredSorting");
+        const sections = SettingsStore.getValue("RoomList.sections");
         switch (preferred) {
             case SortingAlgorithm.Alphabetic:
-                return new AlphabeticSorter();
+                return new SectionSorter(new AlphabeticSorter(), sections);
             case SortingAlgorithm.Recency:
-                return new RecencySorter(myUserId);
+                return new SectionSorter(new RecencySorter(myUserId), sections);
             default:
                 throw new Error(`Got unknown sort preference from RoomList.preferredSorting setting`);
         }

src/stores/room-list-v3/skip-list/RoomSkipList.ts

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { Room } from "matrix-js-sdk/src/matrix";
-import type { Sorter, SortingAlgorithm } from "./sorters";
+import type { Sorter } from "./sorters";
 import type { Filter, FilterKey } from "./filters";
 import { RoomNode } from "./RoomNode";
 import { shouldPromote } from "./utils";
@@ -227,7 +227,7 @@ export class RoomSkipList implements Iterable<Room> {
     /**
      * The currently active sorting algorithm.
      */
-    public get activeSortAlgorithm(): SortingAlgorithm {
+    public get activeSortAlgorithm(): string {
         return this.sorter.type;
     }
 }

src/stores/room-list-v3/skip-list/filters/index.ts

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 
 import type { Room } from "matrix-js-sdk/src/matrix";
 
-export const enum FilterKey {
+export enum FilterKey {
     FavouriteFilter,
     UnreadFilter,
     PeopleFilter,

src/stores/room-list-v3/skip-list/sorters/SectionSorter.ts

@@ -0,0 +1,64 @@
+/*
+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 type { Room } from "matrix-js-sdk/src/matrix";
+import type { Sorter } from ".";
+import { type Filter, FilterKey } from "../filters";
+import { FavouriteFilter } from "../filters/FavouriteFilter.ts";
+import { PeopleFilter } from "../filters/PeopleFilter.ts";
+import { InvitesFilter } from "../filters/InvitesFilter.ts";
+import { UnreadFilter } from "../filters/UnreadFilter.ts";
+import { RoomsFilter } from "../filters/RoomsFilter.ts";
+import { MentionsFilter } from "../filters/MentionsFilter.ts";
+import { LowPriorityFilter } from "../filters/LowPriorityFilter.ts";
+
+const filters: { [T in FilterKey]?: Filter } = {
+    [FilterKey.FavouriteFilter]: new FavouriteFilter(),
+    [FilterKey.UnreadFilter]: new UnreadFilter(),
+    [FilterKey.PeopleFilter]: new PeopleFilter(),
+    [FilterKey.RoomsFilter]: new RoomsFilter(),
+    [FilterKey.InvitesFilter]: new InvitesFilter(),
+    [FilterKey.MentionsFilter]: new MentionsFilter(),
+    [FilterKey.LowPriorityFilter]: new LowPriorityFilter(),
+};
+
+export class SectionSorter implements Sorter {
+    public constructor(
+        public readonly wrapped: Sorter,
+        public readonly sections: (FilterKey | null)[],
+    ) {}
+
+    public sort(rooms: Room[]): Room[] {
+        return [...rooms].sort((a, b) => {
+            return this.comparator(a, b);
+        });
+    }
+
+    private getSectionIndex(room: Room): number {
+        for (let index = 0; index < this.sections.length; index++) {
+            const key = this.sections[index];
+            if (key !== null && filters[key] && filters[key].matches(room)) {
+                return index;
+            }
+        }
+        return this.sections.indexOf(null);
+    }
+
+    public comparator(roomA: Room, roomB: Room): number {
+        const sectionA = this.getSectionIndex(roomA);
+        const sectionB = this.getSectionIndex(roomB);
+        if (sectionA === sectionB) {
+            return this.wrapped.comparator(roomA, roomB);
+        } else {
+            return sectionA - sectionB;
+        }
+    }
+
+    public get type(): string {
+        return ["grouping", this.wrapped.type, ...this.sections].join("|");
+    }
+}

src/stores/room-list-v3/skip-list/sorters/index.ts

@@ -24,7 +24,7 @@ export interface Sorter {
     /**
      * A string that uniquely identifies this given sorter.
      */
-    type: SortingAlgorithm;
+    type: string;
 }
 
 /**