setup navigation for create room form

src/domain/navigation/index.js

@@ -32,7 +32,7 @@ function allowsChild(parent, child) {
             // allowed root segments
             return type === "login"  || type === "session" || type === "sso" || type === "logout";
         case "session":
-            return type === "room" || type === "rooms" || type === "settings";
+            return type === "room" || type === "rooms" || type === "settings" || type === "create-room";
         case "rooms":
             // downside of the approach: both of these will control which tile is selected
             return type === "room" || type === "empty-grid-tile";

src/domain/session/SessionViewModel.js

@@ -24,6 +24,7 @@ import {LightboxViewModel} from "./room/LightboxViewModel.js";
 import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
 import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
+import {CreateRoomViewModel} from "./CreateRoomViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
 import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";
@@ -42,6 +43,7 @@ export class SessionViewModel extends ViewModel {
         this._settingsViewModel = null;
         this._roomViewModelObservable = null;
         this._gridViewModel = null;
+        this._createRoomViewModel = null;
         this._setupNavigation();
     }
 
@@ -73,6 +75,12 @@ export class SessionViewModel extends ViewModel {
         }));
         this._updateSettings(settings.get());
 
+        const createRoom = this.navigation.observe("create-room");
+        this.track(createRoom.subscribe(createRoomOpen => {
+            this._updateCreateRoom(createRoomOpen);
+        }));
+        this._updateCreateRoom(createRoom.get());
+
         const lightbox = this.navigation.observe("lightbox");
         this.track(lightbox.subscribe(eventId => {
             this._updateLightbox(eventId);
@@ -94,7 +102,7 @@ export class SessionViewModel extends ViewModel {
     }
 
     get activeMiddleViewModel() {
-        return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel;
+        return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel || this._createRoomViewModel;
     }
 
     get roomGridViewModel() {
@@ -117,11 +125,14 @@ export class SessionViewModel extends ViewModel {
         return this._roomViewModelObservable?.get();
     }
 
-
     get rightPanelViewModel() {
         return this._rightPanelViewModel;
     }
 
+    get createRoomViewModel() {
+        return this._createRoomViewModel;
+    }
+
     _updateGrid(roomIds) {
         const changed = !(this._gridViewModel && roomIds);
         const currentRoomId = this.navigation.path.get("room");
@@ -160,7 +171,7 @@ export class SessionViewModel extends ViewModel {
         }
     }
 
-    _createRoomViewModel(roomId) {
+    _createRoomViewModelInstance(roomId) {
         const room = this._client.session.rooms.get(roomId);
         if (room) {
             const roomVM = new RoomViewModel(this.childOptions({room}));
@@ -246,6 +257,16 @@ export class SessionViewModel extends ViewModel {
         this.emitChange("activeMiddleViewModel");
     }
 
+    _updateCreateRoom(createRoomOpen) {
+        if (this._createRoomViewModel) {
+            this._createRoomViewModel = this.disposeTracked(this._createRoomViewModel);
+        }
+        if (createRoomOpen) {
+            this._createRoomViewModel = this.track(new CreateRoomViewModel(this.childOptions({session: this._client.session})));
+        }
+        this.emitChange("activeMiddleViewModel");
+    }
+
     _updateLightbox(eventId) {
         if (this._lightboxViewModel) {
             this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel);

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -35,6 +35,7 @@ export class LeftPanelViewModel extends ViewModel {
         this._setupNavigation();
         this._closeUrl = this.urlCreator.urlForSegment("session");
         this._settingsUrl = this.urlCreator.urlForSegment("settings");
+        this._createRoomUrl = this.urlCreator.urlForSegment("create-room");
     }
 
     _mapTileViewModels(roomsBeingCreated, invites, rooms) {
@@ -77,6 +78,8 @@ export class LeftPanelViewModel extends ViewModel {
         return this._settingsUrl;
     }
 
+    get createRoomUrl() { return this._createRoomUrl; }
+
     _setupNavigation() {
         const roomObservable = this.navigation.observe("room");
         this.track(roomObservable.subscribe(roomId => this._open(roomId)));

src/platform/web/ui/session/SessionView.js

@@ -26,6 +26,7 @@ import {StaticView} from "../general/StaticView.js";
 import {SessionStatusView} from "./SessionStatusView.js";
 import {RoomGridView} from "./RoomGridView.js";
 import {SettingsView} from "./settings/SettingsView.js";
+import {CreateRoomView} from "./CreateRoomView.js";
 import {RightPanelView} from "./rightpanel/RightPanelView.js";
 
 export class SessionView extends TemplateView {
@@ -44,6 +45,8 @@ export class SessionView extends TemplateView {
                     return new RoomGridView(vm.roomGridViewModel);
                 } else if (vm.settingsViewModel) {
                     return new SettingsView(vm.settingsViewModel);
+                } else if (vm.createRoomViewModel) {
+                    return new CreateRoomView(vm.createRoomViewModel);
                 } else if (vm.currentRoomViewModel) {
                     if (vm.currentRoomViewModel.kind === "invite") {
                         return new InviteView(vm.currentRoomViewModel);

src/platform/web/ui/session/leftpanel/LeftPanelView.js

@@ -90,6 +90,7 @@ export class LeftPanelView extends TemplateView {
                 "aria-label": gridButtonLabel
             }),
             t.a({className: "button-utility settings", href: vm.settingsUrl, "aria-label": vm.i18n`Settings`, title: vm.i18n`Settings`}),
+            t.a({className: "button-utility create", href: vm.createRoomUrl, "aria-label": vm.i18n`Create room`, title: vm.i18n`Create room`}),
         ]);
 
         return t.div({className: "LeftPanel"}, [