Add "show unread first" option

justjanne · justjanne · commit 96dbb8eaa828 · 2025-10-07T17:49:07.000+02:00
diff --git a/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx b/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx
@@ -121,12 +121,19 @@ export interface RoomListHeaderViewState {
     /**
      * Change the sort order of the room-list.
      */
-    sort: (option: SortOption, grouped: boolean) => void;
+    sort: (option: SortOption, useSections: boolean, unreadFirst: boolean) => void;
     /**
      * The currently active sort option.
      */
     activeSortOption: SortOption;
-    grouped: boolean;
+    /**
+     * Whether to group rooms into sections
+     */
+    useSections: boolean;
+    /**
+     * Whether to show unread rooms first
+     */
+    unreadFirst: boolean;
 }
 
 /**
@@ -148,7 +155,7 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
 
     /* Actions */
 
-    const { activeSortOption, grouped, sort } = useSorter();
+    const { activeSortOption, useSections, unreadFirst, sort } = useSorter();
 
     const createChatRoom = useCallback((e: Event) => {
         defaultDispatcher.fire(Action.CreateChat);
@@ -220,7 +227,8 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
         openSpacePreferences,
         openSpaceSettings,
         activeSortOption,
-        grouped,
+        useSections,
+        unreadFirst,
         sort,
     };
 }
diff --git a/src/components/viewmodels/roomlist/useSorter.ts b/src/components/viewmodels/roomlist/useSorter.ts
@@ -9,8 +9,6 @@ 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.
@@ -37,14 +35,12 @@ const sortOptionToSortingAlgorithm = {
 };
 
 interface SortState {
-    sort: (option: SortOption, grouped: boolean) => void;
+    sort: (option: SortOption, useSections: boolean, unreadFirst: boolean) => void;
     activeSortOption: SortOption;
-    grouped: boolean;
+    useSections: boolean;
+    unreadFirst: 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.
@@ -54,19 +50,21 @@ export function useSorter(): SortState {
     const [activeSortingAlgorithm, setActiveSortingAlgorithm] = useState(() =>
         SettingsStore.getValue("RoomList.preferredSorting"),
     );
-    const [activeSections, setActiveSections] = useState(() => SettingsStore.getValue("RoomList.sections"));
+    const [useSections, setUseSections] = useState(() => SettingsStore.getValue("RoomList.useSections"));
+    const [unreadFirst, setUnreadFirst] = useState(() => SettingsStore.getValue("RoomList.unreadFirst"));
 
-    const sort = (option: SortOption, grouped: boolean): void => {
+    const sort = (option: SortOption, useSections: boolean, unreadFirst: boolean): void => {
         const sortingAlgorithm = sortOptionToSortingAlgorithm[option];
-        const sections = grouped ? defaultSections : noSections;
-        RoomListStoreV3.instance.resort(sortingAlgorithm, sections);
+        RoomListStoreV3.instance.resort(sortingAlgorithm, useSections, unreadFirst);
         setActiveSortingAlgorithm(sortingAlgorithm);
-        setActiveSections(sections);
+        setUseSections(useSections);
+        setUnreadFirst(unreadFirst);
     };
 
     return {
         sort,
         activeSortOption: sortingAlgorithmToSortingOption[activeSortingAlgorithm!],
-        grouped: arrayHasDiff(noSections, activeSections ?? noSections),
+        unreadFirst,
+        useSections,
     };
 }
diff --git a/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx b/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx
@@ -36,15 +36,19 @@ export function RoomListOptionsMenu({ vm }: Props): JSX.Element {
     const [open, setOpen] = useState(false);
 
     const onActivitySelected = useCallback(() => {
-        vm.sort(SortOption.Activity, vm.grouped);
+        vm.sort(SortOption.Activity, vm.useSections, vm.unreadFirst);
     }, [vm]);
 
     const onAtoZSelected = useCallback(() => {
-        vm.sort(SortOption.AToZ, vm.grouped);
+        vm.sort(SortOption.AToZ, vm.useSections, vm.unreadFirst);
     }, [vm]);
 
-    const onGroupedSelected = useCallback(() => {
-        vm.sort(vm.activeSortOption, !vm.grouped);
+    const onUseSectionsSelected = useCallback(() => {
+        vm.sort(vm.activeSortOption, !vm.useSections, vm.unreadFirst);
+    }, [vm]);
+
+    const onUnreadFirstSelected = useCallback(() => {
+        vm.sort(vm.activeSortOption, vm.useSections, !vm.unreadFirst);
     }, [vm]);
 
     return (
@@ -67,7 +71,16 @@ 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} />
+            <CheckboxMenuItem
+                label={_t("room_list|sort_sections")}
+                checked={vm.useSections}
+                onSelect={onUseSectionsSelected}
+            />
+            <CheckboxMenuItem
+                label={_t("room_list|sort_unread_first")}
+                checked={vm.unreadFirst}
+                onSelect={onUnreadFirstSelected}
+            />
         </Menu>
     );
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -2153,7 +2153,6 @@
             "rooms": "Rooms",
             "unread": "Unreads"
         },
-        "grouped": "Show favourites first",
         "home_menu_label": "Home options",
         "join_public_room_label": "Join public room",
         "joining_rooms_status": {
@@ -2211,6 +2210,7 @@
         "sort_by": "Sort by",
         "sort_by_activity": "Activity",
         "sort_by_alphabet": "A-Z",
+        "sort_sections": "Group rooms by type",
         "sort_type": {
             "activity": "Activity",
             "atoz": "A-Z"
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
@@ -50,7 +50,6 @@ 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();
 
@@ -325,7 +324,8 @@ export interface Settings {
     "lowBandwidth": IBaseSetting<boolean>;
     "fallbackICEServerAllowed": IBaseSetting<boolean | null>;
     "RoomList.preferredSorting": IBaseSetting<SortingAlgorithm>;
-    "RoomList.sections": IBaseSetting<(FilterKey | null)[]>;
+    "RoomList.useSections": IBaseSetting<boolean>;
+    "RoomList.unreadFirst": IBaseSetting<boolean>;
     "RoomList.showMessagePreview": IBaseSetting<boolean>;
     "RightPanel.phasesGlobal": IBaseSetting<IRightPanelForRoomStored | null>;
     "RightPanel.phases": IBaseSetting<IRightPanelForRoomStored | null>;
@@ -1201,9 +1201,13 @@ export const SETTINGS: Settings = {
         supportedLevels: [SettingLevel.DEVICE],
         default: SortingAlgorithm.Recency,
     },
-    "RoomList.sections": {
+    "RoomList.useSections": {
         supportedLevels: [SettingLevel.DEVICE],
-        default: [FilterKey.FavouriteFilter, FilterKey.PeopleFilter, null],
+        default: false,
+    },
+    "RoomList.unreadFirst": {
+        supportedLevels: [SettingLevel.DEVICE],
+        default: false,
     },
     "RoomList.showMessagePreview": {
         supportedLevels: [SettingLevel.DEVICE],
diff --git a/src/stores/room-list-v3/RoomListStoreV3.ts b/src/stores/room-list-v3/RoomListStoreV3.ts
@@ -132,21 +132,23 @@ 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
+     * @param useSections Whether to group rooms into sections
+     * @param unreadFirst Whether to show unread rooms first
      */
-    public resort(algorithm: SortingAlgorithm, sections: (FilterKey | null)[]): void {
+    public resort(algorithm: SortingAlgorithm, useSections: boolean, unreadFirst: boolean): 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.");
         const sorter =
             algorithm === SortingAlgorithm.Alphabetic
                 ? new AlphabeticSorter()
                 : new RecencySorter(this.matrixClient.getSafeUserId());
-        const sectionSorter = new SectionSorter(sorter, sections);
+        const sectionSorter = new SectionSorter(sorter, useSections, unreadFirst);
         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);
+        SettingsStore.setValue("RoomList.useSections", null, SettingLevel.DEVICE, useSections);
+        SettingsStore.setValue("RoomList.unreadFirst", null, SettingLevel.DEVICE, unreadFirst);
     }
 
     /**
@@ -325,12 +327,13 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      */
     private getPreferredSorter(myUserId: string): Sorter {
         const preferred = SettingsStore.getValue("RoomList.preferredSorting");
-        const sections = SettingsStore.getValue("RoomList.sections");
+        const useSections = SettingsStore.getValue("RoomList.useSections");
+        const unreadFirst = SettingsStore.getValue("RoomList.unreadFirst");
         switch (preferred) {
             case SortingAlgorithm.Alphabetic:
-                return new SectionSorter(new AlphabeticSorter(), sections);
+                return new SectionSorter(new AlphabeticSorter(), useSections, unreadFirst);
             case SortingAlgorithm.Recency:
-                return new SectionSorter(new RecencySorter(myUserId), sections);
+                return new SectionSorter(new RecencySorter(myUserId), useSections, unreadFirst);
             default:
                 throw new Error(`Got unknown sort preference from RoomList.preferredSorting setting`);
         }
diff --git a/src/stores/room-list-v3/skip-list/sections/index.ts b/src/stores/room-list-v3/skip-list/sections/index.ts
@@ -0,0 +1,88 @@
+/*
+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 Filter, FilterKey } from "../filters";
+import { FavouriteFilter } from "../filters/FavouriteFilter.ts";
+import { UnreadFilter } from "../filters/UnreadFilter.ts";
+import { PeopleFilter } from "../filters/PeopleFilter.ts";
+import { RoomsFilter } from "../filters/RoomsFilter.ts";
+import { InvitesFilter } from "../filters/InvitesFilter.ts";
+import { MentionsFilter } from "../filters/MentionsFilter.ts";
+import { LowPriorityFilter } from "../filters/LowPriorityFilter.ts";
+
+export type Section = FilterKey | FilterKey[] | null;
+
+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 function sectionMatches(section: Section, room: Room): boolean {
+    if (section === null) {
+        return false;
+    } else if (Array.isArray(section)) {
+        return section.every((key) => !!filters[key]?.matches(room));
+    } else {
+        return !!filters[section]?.matches(room);
+    }
+}
+
+const sectionsDefault: Section[] = [
+    // Invite
+    [FilterKey.InvitesFilter],
+    // Favourite
+    [FilterKey.FavouriteFilter],
+    // People
+    [FilterKey.PeopleFilter],
+    // Other
+    null,
+    // Low Priority
+    [FilterKey.LowPriorityFilter],
+];
+const sectionsUnreadFirst: Section[] = [
+    // Invite
+    [FilterKey.InvitesFilter],
+    // Mention
+    [FilterKey.MentionsFilter],
+    // Unread & Favourite
+    [FilterKey.UnreadFilter, FilterKey.FavouriteFilter],
+    // Unread & People
+    [FilterKey.UnreadFilter, FilterKey.PeopleFilter],
+    // Unread Other
+    [FilterKey.UnreadFilter],
+    // Favourite
+    [FilterKey.FavouriteFilter],
+    // People
+    [FilterKey.PeopleFilter],
+    // Other
+    null,
+    // Low Priority
+    [FilterKey.LowPriorityFilter],
+];
+const listUnreadFirst: Section[] = [
+    // Mention
+    [FilterKey.MentionsFilter],
+    // Unread Other
+    [FilterKey.UnreadFilter],
+    // Other
+    null,
+];
+export const listDefault: Section[] = [null];
+
+export function buildSections(useSections: boolean, unreadFirst: boolean): Section[] {
+    if (useSections && unreadFirst) return sectionsUnreadFirst;
+    else if (useSections) return sectionsDefault;
+    else if (unreadFirst) return listUnreadFirst;
+    else return listDefault;
+}
diff --git a/src/stores/room-list-v3/skip-list/sorters/SectionSorter.ts b/src/stores/room-list-v3/skip-list/sorters/SectionSorter.ts
@@ -7,30 +7,17 @@ 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(),
-};
+import { buildSections, type Section, sectionMatches } from "../sections";
 
 export class SectionSorter implements Sorter {
+    public readonly sections: Section[];
     public constructor(
         public readonly wrapped: Sorter,
-        public readonly sections: (FilterKey | null)[],
-    ) {}
+        public readonly useSections: boolean,
+        public readonly unreadFirst: boolean,
+    ) {
+        this.sections = buildSections(useSections, unreadFirst);
+    }
 
     public sort(rooms: Room[]): Room[] {
         return [...rooms].sort((a, b) => {
@@ -40,8 +27,7 @@ export class SectionSorter implements Sorter {
 
     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)) {
+            if (sectionMatches(this.sections[index], room)) {
                 return index;
             }
         }
@@ -59,6 +45,8 @@ export class SectionSorter implements Sorter {
     }
 
     public get type(): string {
-        return ["grouping", this.wrapped.type, ...this.sections].join("|");
+        return [this.wrapped.type, this.useSections ? "useSections" : null, this.unreadFirst ? "unreadFirst" : null]
+            .filter((it) => it !== null)
+            .join("-");
     }
 }
diff --git a/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx b/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx
@@ -221,11 +221,11 @@ describe("useRoomListHeaderViewModel", () => {
 
             // Change the sort option
             act(() => {
-                vm.current.sort(SortOption.AToZ, false);
+                vm.current.sort(SortOption.AToZ, false, false);
             });
 
             // Resort method in RLS must have been called
-            expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic, [null]);
+            expect(resort).toHaveBeenCalledWith(SortingAlgorithm.Alphabetic, false, false);
         });
 
         it("should set activeSortOption based on value from settings", () => {
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx
diff --git a/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts b/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
