Broken room list WIP

src/domain/session/SessionViewModel.js

@@ -40,8 +40,8 @@ export class SessionViewModel extends ViewModel {
         this._leftPanelViewModel = this.track(new LeftPanelViewModel(this.childOptions({
             invites: this._sessionContainer.session.invites,
             rooms: this._sessionContainer.session.rooms,
+            sync: this._sessionContainer.sync,
             compareFn: this._sessionContainer.sync.compare.bind(this._sessionContainer.sync),
-            includeRoomFn: this._sessionContainer.sync.includeRoom.bind(this._sessionContainer.sync),
         })));
         this._settingsViewModel = null;
         this._roomViewModelObservable = null;

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -19,7 +19,9 @@ import {ViewModel} from "../../ViewModel.js";
 import {RoomTileViewModel} from "./RoomTileViewModel.js";
 import {InviteTileViewModel} from "./InviteTileViewModel.js";
 import {RoomFilter} from "./RoomFilter.js";
+import { ConcatList, MappedList } from "../../../observable/index.js";
 import {FilteredMap} from "../../../observable/map/FilteredMap.js";
+import {Sync3ObservableList} from "../../../matrix/Sync3ObservableList";
 import {ApplyMap} from "../../../observable/map/ApplyMap.js";
 import {addPanelIfNeeded} from "../../navigation/index.js";
 import { PlaceholderRoomTileViewModel } from "./PlaceholderRoomTileViewModel.js";
@@ -27,14 +29,13 @@ import { PlaceholderRoomTileViewModel } from "./PlaceholderRoomTileViewModel.js"
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {rooms, invites, compareFn, includeRoomFn} = options;
+        const {rooms, invites, compareFn, sync} = options;
-        this._tileViewModelsMap = this._mapTileViewModels(rooms, invites);
+        const sync3List = new Sync3ObservableList(sync, rooms);
-        this._tileViewModelsSlidingWindow = new FilteredMap(this._tileViewModelsMap, (r, roomId) => {
+        const list = new ConcatList(invites.sortValues((a,b) => a.compare(b)), sync3List);
-            const include = includeRoomFn(roomId);
+        this._tileViewModelsMap = this._mapTileViewModels(list);
-            return include;
+        this._tileViewModelsFilterMap = new ApplyMap(this._tileViewModelsMap);
-        });
+        console.log(this._tileViewModelsMap);
-        this._tileViewModelsFilterMap = new ApplyMap(this._tileViewModelsSlidingWindow);
+        this._tileViewModels = this._tileViewModelsFilterMap;//.sortValues((a, b) => a.compare(b));
-        this._tileViewModels = this._tileViewModelsFilterMap.sortValues((a, b) => a.compare(b));
         this._currentTileVM = null;
         this._setupNavigation();
         this._closeUrl = this.urlCreator.urlForSegment("session");
@@ -42,14 +43,13 @@ export class LeftPanelViewModel extends ViewModel {
         this._compareFn = compareFn;
     }
 
-    _mapTileViewModels(rooms, invites) {
+    _mapTileViewModels(list) {
-        // join is not commutative, invites will take precedence over rooms
+        return new MappedList(list, (roomOrInvite, emitChange) => {
-        return invites.join(rooms).mapValues((roomOrInvite, emitChange) => {
             let vm;
-            if (roomOrInvite.isInvite) {
+            if (roomOrInvite === null) {
+                vm = new PlaceholderRoomTileViewModel(this.childOptions({room: null, emitChange}));
+            } else if (roomOrInvite.isInvite) {
                 vm = new InviteTileViewModel(this.childOptions({invite: roomOrInvite, emitChange}));
-            } else if (roomOrInvite.isPlaceholder) {
-                vm = new PlaceholderRoomTileViewModel(this.childOptions({room: roomOrInvite, emitChange}));
             } else {
                 vm = new RoomTileViewModel(this.childOptions({
                     room: roomOrInvite,
@@ -57,10 +57,12 @@ export class LeftPanelViewModel extends ViewModel {
                     emitChange,
                 }));
             }
-            const isOpen = this.navigation.path.get("room")?.value === roomOrInvite.id;
+            if (roomOrInvite) {
-            if (isOpen) {
+                const isOpen = this.navigation.path.get("room")?.value === roomOrInvite.id;
-                vm.open();
+                if (isOpen) {
-                this._updateCurrentVM(vm);
+                    vm.open();
+                    this._updateCurrentVM(vm);
+                }
             }
             return vm;
         });

src/domain/session/leftpanel/PlaceholderRoomTileViewModel.js

@@ -37,6 +37,7 @@ export class PlaceholderRoomTileViewModel extends BaseTileViewModel {
 
     compare(other) {
         // TODO: factor this out with the compare(other) of the room tile as it does this check as well.
+        // TODO _room is null
         if (other._room.index !== undefined) {
             return this._room.index > other._room.index ? 1 : -1;
         }
@@ -44,7 +45,7 @@ export class PlaceholderRoomTileViewModel extends BaseTileViewModel {
     }
 
     get name() {
-        return "Placeholder " + this._room.index;
+        return "Placeholder";
     }
 
     get avatarLetter() {

src/matrix/Sync3.ts

@@ -177,11 +177,6 @@ export class Sync3 {
         return roomID;
     }
 
-    // TODO REMOVE
-    includeRoom(roomId: string): boolean {
-        return this.roomIdToRoomIndex[roomId] !== undefined;
-    }
-
     // TODO REMOVE
     compare(roomIdA: string, roomIdB: string): number {
         if (roomIdA === roomIdB) {