Add an option to sort the room list by recents first

Fixes element-hq/element-web#8892

src/components/views/settings/tabs/PreferencesSettingsTab.js

@@ -44,6 +44,10 @@ export default class PreferencesSettingsTab extends React.Component {
         'showDisplaynameChanges',
     ];
 
+    static ROOM_LIST_SETTINGS = [
+        'RoomList.orderByImportance',
+    ];
+
     static ADVANCED_SETTINGS = [
         'alwaysShowEncryptionIcons',
         'Pill.shouldShowPillAvatar',
@@ -104,6 +108,9 @@ export default class PreferencesSettingsTab extends React.Component {
                     <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
                     {this._renderGroup(PreferencesSettingsTab.TIMELINE_SETTINGS)}
 
+                    <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
+                    {this._renderGroup(PreferencesSettingsTab.ROOM_LIST_SETTINGS)}
+
                     <span className="mx_SettingsTab_subheading">{_t("Advanced")}</span>
                     {this._renderGroup(PreferencesSettingsTab.ADVANCED_SETTINGS)}
                     {autoLaunchOption}

src/i18n/strings/en_EN.json

@@ -306,6 +306,7 @@
     "Enable widget screenshots on supported widgets": "Enable widget screenshots on supported widgets",
     "Prompt before sending invites to potentially invalid matrix IDs": "Prompt before sending invites to potentially invalid matrix IDs",
     "Show developer tools": "Show developer tools",
+    "Order rooms in the room list by most important first instead of most recent": "Order rooms in the room list by most important first instead of most recent",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading report": "Uploading report",
@@ -554,6 +555,7 @@
     "Preferences": "Preferences",
     "Composer": "Composer",
     "Timeline": "Timeline",
+    "Room list": "Room list",
     "Autocomplete delay (ms)": "Autocomplete delay (ms)",
     "To change the room's avatar, you must be a": "To change the room's avatar, you must be a",
     "To change the room's name, you must be a": "To change the room's name, you must be a",

src/settings/Settings.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Travis Ralston
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -340,4 +340,9 @@ export const SETTINGS = {
         displayName: _td('Show developer tools'),
         default: false,
     },
+    "RoomList.orderByImportance": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Order rooms in the room list by most important first instead of most recent'),
+        default: true,
+    },
 };

src/stores/RoomListStore.js

@@ -51,6 +51,12 @@ const LIST_ORDERS = {
  * the RoomList.
  */
 class RoomListStore extends Store {
+
+    // True to order rooms by importance (CATEGORY_ORDER) and false to order rooms by
+    // how recently active they were. This is set internally when the room list is
+    // reinitialized and whenever the setting changes.
+    orderRoomsByImportance = true;
+
     constructor() {
         super(dis);
 
@@ -59,6 +65,22 @@ class RoomListStore extends Store {
         this._recentsComparator = this._recentsComparator.bind(this);
     }
 
+    /**
+     * Alerts the RoomListStore to a potential change in how room list sorting should
+     * behave.
+     * @param {boolean} forceRegeneration True to force a change in the algorithm
+     */
+    updateSortingAlgorithm(forceRegeneration=false) {
+        const byImportance = SettingsStore.getValue("RoomList.orderByImportance");
+        if (byImportance !== this._state.orderRoomsByImportance || forceRegeneration) {
+            console.log("Updating room sorting algorithm: sortByImportance=" + byImportance);
+            this._setState({orderRoomsByImportance: byImportance});
+
+            // Trigger a resort of the entire list to reflect the change in algorithm
+            this._generateInitialRoomLists();
+        }
+    }
+
     _init() {
         // Initialise state
         const defaultLists = {
@@ -77,7 +99,10 @@ class RoomListStore extends Store {
             presentationLists: defaultLists, // like `lists`, but with arrays of rooms instead
             ready: false,
             stickyRoomId: null,
+            orderRoomsByImportance: true,
         };
+
+        SettingsStore.monitorSetting('RoomList.orderByImportance', null);
     }
 
     _setState(newState) {
@@ -99,14 +124,19 @@ class RoomListStore extends Store {
     __onDispatch(payload) {
         const logicallyReady = this._matrixClient && this._state.ready;
         switch (payload.action) {
+            case 'setting_updated': {
+                if (payload.settingName !== 'RoomList.orderByImportance') break;
+                this.updateSortingAlgorithm();
+            }
+            break;
             // Initialise state after initial sync
             case 'MatrixActions.sync': {
                 if (!(payload.prevState !== 'PREPARED' && payload.state === 'PREPARED')) {
                     break;
                 }
 
                 this._matrixClient = payload.matrixClient;
-                this._generateInitialRoomLists();
+                this.updateSortingAlgorithm(/*force=*/true);
             }
             break;
             case 'MatrixActions.Room.receipt': {
@@ -517,6 +547,14 @@ class RoomListStore extends Store {
     }
 
     _calculateCategory(room) {
+        if (!this._state.orderRoomsByImportance) {
+            // Effectively disable the categorization of rooms if we're supposed to
+            // be sorting by more recent messages first. This triggers the timestamp
+            // comparison bit of _setRoomCategory and _recentsComparator instead of
+            // the category ordering.
+            return CATEGORY_IDLE;
+        }
+
         const mentions = room.getUnreadNotificationCount("highlight") > 0;
         if (mentions) return CATEGORY_RED;