Support custom tags in the room list again

Fixes https://github.com/vector-im/riot-web/issues/14091

Design needs work, however this is behind labs anyways. This re-implements the behaviour of the old room list.

The implementation ended up being a lot easier due to early confusion with what the TagOrderStore and TagPanel take care of. Turns out they don't deal with tags, but groups. As such, we don't need to do anything with filtering (though we keep some sanity checks in place for safety), and just have to wire up the CustomRoomTagPanel and CustomRoomTagStore.

src/stores/CustomRoomTagStore.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,15 +14,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import dis from '../dispatcher/dispatcher';
-import * as RoomNotifs from '../RoomNotifs';
 import EventEmitter from 'events';
-import { throttle } from "lodash";
+import {throttle} from "lodash";
 import SettingsStore from "../settings/SettingsStore";
 import RoomListStore, {LISTS_UPDATE_EVENT} from "./room-list/RoomListStore";
-
-// TODO: All of this needs updating for new custom tags: https://github.com/vector-im/riot-web/issues/14091
-const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
+import {RoomNotificationStateStore} from "./notifications/RoomNotificationStateStore";
+import {isCustomTag} from "./room-list/models";
 
 function commonPrefix(a, b) {
     const len = Math.min(a.length, b.length);
@@ -84,8 +84,6 @@ class CustomRoomTagStore extends EventEmitter {
     }
 
     getSortedTags() {
-        const roomLists = RoomListStore.instance.orderedLists;
-
         const tagNames = Object.keys(this._state.tags).sort();
         const prefixes = tagNames.map((name, i) => {
             const isFirst = i === 0;
@@ -97,14 +95,14 @@ class CustomRoomTagStore extends EventEmitter {
             return longestPrefix;
         });
         return tagNames.map((name, i) => {
-            const notifs = RoomNotifs.aggregateNotificationCount(roomLists[name]);
-            let badge;
-            if (notifs.count !== 0) {
-                badge = notifs;
+            const notifs = RoomNotificationStateStore.instance.getListState(name);
+            let badgeNotifState;
+            if (notifs.hasUnreadCount) {
+                badgeNotifState = notifs;
             }
             const avatarLetter = name.substr(prefixes[i].length, 1);
             const selected = this._state.tags[name];
-            return {name, avatarLetter, badge, selected};
+            return {name, avatarLetter, badgeNotifState, selected};
         });
     }
 
@@ -139,16 +137,12 @@ class CustomRoomTagStore extends EventEmitter {
             return;
         }
 
-        const newTagNames = Object.keys(RoomListStore.instance.orderedLists)
-            .filter((tagName) => {
-                return !tagName.match(STANDARD_TAGS_REGEX);
-            }).sort();
+        const newTagNames = Object.keys(RoomListStore.instance.orderedLists).filter(t => isCustomTag(t)).sort();
         const prevTags = this._state && this._state.tags;
-        const newTags = newTagNames.reduce((newTags, tagName) => {
-            newTags[tagName] = (prevTags && prevTags[tagName]) || false;
-            return newTags;
+        return newTagNames.reduce((c, tagName) => {
+            c[tagName] = (prevTags && prevTags[tagName]) || false;
+            return c;
         }, {});
-        return newTags;
     }
 }
 

src/stores/room-list/RoomListStore.ts

@@ -17,7 +17,7 @@ limitations under the License.
 
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import SettingsStore from "../../settings/SettingsStore";
-import { DefaultTagID, OrderedDefaultTagIDs, RoomUpdateCause, TagID } from "./models";
+import { DefaultTagID, isCustomTag, OrderedDefaultTagIDs, RoomUpdateCause, TagID } from "./models";
 import TagOrderStore from "../TagOrderStore";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { IListOrderingMap, ITagMap, ITagSortingMap, ListAlgorithm, SortAlgorithm } from "./algorithms/models";
@@ -33,6 +33,7 @@ import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import RoomListLayoutStore from "./RoomListLayoutStore";
 import { MarkedExecution } from "../../utils/MarkedExecution";
 import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
+import { isEnumValue } from "../../utils/enums";
 
 interface IState {
     tagsEnabled?: boolean;
@@ -527,25 +528,28 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> {
     public async regenerateAllLists({trigger = true}) {
         console.warn("Regenerating all room lists");
 
+        const rooms = this.matrixClient.getVisibleRooms();
+        const customTags = new Set<TagID>();
+        if (this.state.tagsEnabled) {
+            for (const room of rooms) {
+                if (!room.tags) continue;
+                const tags = Object.keys(room.tags).filter(t => isCustomTag(t));
+                tags.forEach(t => customTags.add(t));
+            }
+        }
+
         const sorts: ITagSortingMap = {};
         const orders: IListOrderingMap = {};
-        for (const tagId of OrderedDefaultTagIDs) {
+        const allTags = [...OrderedDefaultTagIDs, ...Array.from(customTags)];
+        for (const tagId of allTags) {
             sorts[tagId] = this.calculateTagSorting(tagId);
             orders[tagId] = this.calculateListOrder(tagId);
 
             RoomListLayoutStore.instance.ensureLayoutExists(tagId);
         }
 
-        if (this.state.tagsEnabled) {
-            // TODO: Fix custom tags: https://github.com/vector-im/riot-web/issues/14091
-            const roomTags = TagOrderStore.getOrderedTags() || [];
-
-            // TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14602
-            console.log("rtags", roomTags);
-        }
-
         await this.algorithm.populateTags(sorts, orders);
-        await this.algorithm.setKnownRooms(this.matrixClient.getVisibleRooms());
+        await this.algorithm.setKnownRooms(rooms);
 
         this.initialListsGenerated = true;
 

src/stores/room-list/TagWatcher.ts

@@ -20,10 +20,9 @@ import { CommunityFilterCondition } from "./filters/CommunityFilterCondition";
 import { arrayDiff, arrayHasDiff } from "../../utils/arrays";
 
 /**
- * Watches for changes in tags/groups to manage filters on the provided RoomListStore
+ * Watches for changes in groups to manage filters on the provided RoomListStore
  */
 export class TagWatcher {
-    // TODO: Support custom tags, somehow: https://github.com/vector-im/riot-web/issues/14091
     private filters = new Map<string, CommunityFilterCondition>();
 
     constructor(private store: RoomListStoreClass) {
@@ -43,8 +42,6 @@ export class TagWatcher {
             }
 
             const newFilters = new Map<string, CommunityFilterCondition>();
-
-            // TODO: Support custom tags, somehow: https://github.com/vector-im/riot-web/issues/14091
             const filterableTags = newTags.filter(t => t.startsWith("+"));
 
             for (const tag of filterableTags) {
@@ -64,8 +61,6 @@ export class TagWatcher {
             // Update the room list store's filters
             const diff = arrayDiff(lastTags, newTags);
             for (const tag of diff.added) {
-                // TODO: Remove this check when custom tags are supported (as we shouldn't be losing filters)
-                // Ref https://github.com/vector-im/riot-web/issues/14091
                 const filter = newFilters.get(tag);
                 if (!filter) continue;
 

src/stores/room-list/algorithms/Algorithm.ts

@@ -563,9 +563,6 @@ export class Algorithm extends EventEmitter {
     }
 
     public getTagsForRoom(room: Room): TagID[] {
-        // XXX: This duplicates a lot of logic from setKnownRooms above, but has a slightly
-        // different use case and therefore different performance curve
-
         const tags: TagID[] = [];
 
         const membership = getEffectiveMembership(room.getMyMembership());

src/stores/room-list/models.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { isEnumValue } from "../../utils/enums";
+
 export enum DefaultTagID {
     Invite = "im.vector.fake.invite",
     Untagged = "im.vector.fake.recent", // legacy: used to just be 'recent rooms' but now it's all untagged rooms
@@ -36,6 +38,10 @@ export const OrderedDefaultTagIDs = [
 
 export type TagID = string | DefaultTagID;
 
+export function isCustomTag(tagId: TagID): boolean {
+    return !isEnumValue(DefaultTagID, tagId);
+}
+
 export enum RoomUpdateCause {
     Timeline = "TIMELINE",
     PossibleTagChange = "POSSIBLE_TAG_CHANGE",