integrate grid vm with session vm, allowing to switch

src/domain/ViewModel.js

@@ -40,6 +40,12 @@ export class ViewModel extends EventEmitter {
         return this.disposables.track(disposable);
     }
 
+    untrack(disposable) {
+        if (this.disposables) {
+            return this.disposables.untrack(disposable);
+        }
+    }
+
     dispose() {
         if (this.disposables) {
             this.disposables.dispose();

src/domain/session/SessionViewModel.js

@@ -18,6 +18,7 @@ limitations under the License.
 import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
 import {RoomViewModel} from "./room/RoomViewModel.js";
 import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
+import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 
 export class SessionViewModel extends ViewModel {
@@ -32,16 +33,34 @@ export class SessionViewModel extends ViewModel {
         })));
         this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
             rooms: this._session.rooms,
-            openRoom: this._openRoom.bind(this)
+            openRoom: this._openRoom.bind(this),
+            gridEnabled: {
+                get: () => !!this._gridViewModel,
+                set: value => this._enabledGrid(value)
+            }
         }));
         this._currentRoomTileViewModel = null;
         this._currentRoomViewModel = null;
+        this._gridViewModel = null;
     }
 
     start() {
         this._sessionStatusViewModel.start();
     }
 
+    get middlePanelViewType() {
+        if (this._currentRoomViewModel) {
+            return "room";
+        } else if (this._gridViewModel) {
+            return "roomgrid";
+        }
+        return "placeholder";
+    }
+
+    get roomGridViewModel() {
+        return this._gridViewModel;
+    }
+
     get leftPanelViewModel() {
         return this._leftPanelViewModel;
     }
@@ -58,24 +77,62 @@ export class SessionViewModel extends ViewModel {
         return this._currentRoomViewModel;
     }
 
+    _enabledGrid(enabled) {
+        if (enabled) {
+            this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({width: 3, height: 2})));
+            // transfer current room
+            if (this._currentRoomViewModel) {
+                this.untrack(this._currentRoomViewModel);
+                this._gridViewModel.setRoomViewModel(this._currentRoomViewModel, this._currentRoomTileViewModel);
+                this._currentRoomViewModel = null;
+                this._currentRoomTileViewModel = null;
+            }
+        } else {
+            const VMs = this._gridViewModel.getAndUntrackFirst();
+            if (VMs) {
+                this._currentRoomViewModel = this.track(VMs.vm);
+                this._currentRoomTileViewModel = VMs.tileVM;
+                this._currentRoomTileViewModel.open();
+            }
+            this._gridViewModel = this.disposeTracked(this._gridViewModel);
+        }
+        this.emitChange("middlePanelViewType");
+    }
+
     _closeCurrentRoom() {
+        // no closing in grid for now
+        if (!this._gridViewModel) {
             this._currentRoomTileViewModel?.close();
             this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
+            return true;
+        }
     }
 
     _openRoom(room, roomTileVM) {
-        this._closeCurrentRoom();
-        this._currentRoomTileViewModel = roomTileVM;
-        this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({
+        // for now, we don't support having the same room opened more than once,
+        // so bail out if we already have the room open
+        if (this._gridViewModel?.hasRoomId(room.id)) {
+            return;
+        } else if (this._currentRoomViewModel?._room.id === room.id) {
+            return;
+        }
+        const roomVM = new RoomViewModel(this.childOptions({
             room,
             ownUserId: this._session.user.id,
             closeCallback: () => {
-                this._closeCurrentRoom();
+                if (this._closeCurrentRoom()) {
                     this.emitChange("currentRoom");
+                }
             },
-        })));
-        this._currentRoomViewModel.load();
+        }));
+        roomVM.load();
+        if (this._gridViewModel) {
+            this._gridViewModel.setRoomViewModel(roomVM, roomTileVM);
+        } else {
+            this._closeCurrentRoom();
+            this._currentRoomTileViewModel = roomTileVM;
+            this._currentRoomViewModel = this.track(roomVM);
             this.emitChange("currentRoom");
         }
     }
-
+}

src/utils/Disposables.js

@@ -35,6 +35,13 @@ export class Disposables {
         return disposable;
     }
 
+    untrack(disposable) {
+        const idx = this._disposables.indexOf(disposable);
+        if (idx >= 0) {
+            this._disposables.splice(idx, 1);
+        }
+    }
+
     dispose() {
         if (this._disposables) {
             for (const d of this._disposables) {