Duplicate navigation from room details

- TODO: Remove duplication

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/navigation/index.js

@@ -37,7 +37,7 @@ function allowsChild(parent, child) {
             // downside of the approach: both of these will control which tile is selected
             return type === "room" || type === "empty-grid-tile";
         case "room":
-            return type === "lightbox" || type === "details";
+            return type === "lightbox" || type === "details"  || type === "members";
         default:
             return false;
     }

src/domain/session/SessionViewModel.js

@@ -26,6 +26,7 @@ import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
+import {MemberListViewModel} from "./rightpanel/MemberListViewModel.js";
 
 export class SessionViewModel extends ViewModel {
     constructor(options) {
@@ -84,6 +85,10 @@ export class SessionViewModel extends ViewModel {
         const details = this.navigation.observe("details");
         this.track(details.subscribe(() => this._updateRoomDetails()));
         this._updateRoomDetails();
+
+        const members = this.navigation.observe("members");
+        this.track(members.subscribe(() => this._toggleMemberListPanel()));
+        this._toggleMemberListPanel();
     }
 
     get id() {
@@ -122,6 +127,10 @@ export class SessionViewModel extends ViewModel {
         return this._roomDetailsViewModel;
     }
 
+    get memberListViewModel() {
+        return this._memberListViewModel;
+    }
+
     _updateGrid(roomIds) {
         const changed = !(this._gridViewModel && roomIds);
         const currentRoomId = this.navigation.path.get("room");
@@ -267,4 +276,17 @@ export class SessionViewModel extends ViewModel {
         this.emitChange("roomDetailsViewModel");
     }
 
+    async _toggleMemberListPanel() {
+        this._memberListViewModel = this.disposeTracked(this._memberListViewModel);
+        const enable = !!this.navigation.path.get("members")?.value;
+        if (enable) {
+            const room = this._roomFromNavigation();
+            const list = await room.loadMemberList();
+            const members = list.members;
+            this._memberListViewModel = this.track(
+                new MemberListViewModel(this.childOptions({members}))
+            );
+        }
+        this.emitChange("memberListViewModel");
+    }
 }

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

@@ -26,6 +26,7 @@ import {SessionStatusView} from "./SessionStatusView.js";
 import {RoomGridView} from "./RoomGridView.js";
 import {SettingsView} from "./settings/SettingsView.js";
 import {RoomDetailsView} from "./rightpanel/RoomDetailsView.js";
+import {MemberListView} from "./rightpanel/MemberListView.js";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
@@ -56,6 +57,7 @@ export class SessionView extends TemplateView {
                 }
             }),
             t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null),
+            t.mapView(vm => vm.memberListViewModel, memberListViewModel => memberListViewModel ? new MemberListView(memberListViewModel) : null),
             t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null)
         ]);
     }