Add right panel with Room information

.eslintrc.js

@@ -12,6 +12,6 @@ module.exports = {
         "no-console": "off",
         "no-empty": "off",
         "no-prototype-builtins": "off",
-        "no-unused-vars": "warn",
+        "no-unused-vars": "warn"
     }
 };

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";
+            return type === "lightbox" || type === "details";
         default:
             return false;
     }
@@ -113,6 +113,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
                 segments.push(roomsSegmentWithRoom(rooms, roomId, currentNavPath));
             }
             segments.push(new Segment("room", roomId));
+            if (currentNavPath.get("details")?.value) {
+                segments.push(new Segment("details"));
+            }
         } else if (type === "last-session") {
             let sessionSegment = currentNavPath.get("session");
             if (typeof sessionSegment?.value !== "string" && defaultSessionId) {
@@ -254,6 +257,25 @@ export function tests() {
             assert.equal(segments[2].type, "room");
             assert.equal(segments[2].value, "a");
         },
+        "parse open-room action changing focus to an existing room with details open": assert => {
+            const nav = new Navigation(allowsChild);
+            const path = nav.pathFrom([
+                new Segment("session", 1),
+                new Segment("rooms", ["a", "b", "c"]),
+                new Segment("room", "b"),
+                new Segment("details", true)
+            ]);
+            const segments = parseUrlPath("/session/1/open-room/a", path);
+            assert.equal(segments.length, 4);
+            assert.equal(segments[0].type, "session");
+            assert.equal(segments[0].value, "1");
+            assert.equal(segments[1].type, "rooms");
+            assert.deepEqual(segments[1].value, ["a", "b", "c"]);
+            assert.equal(segments[2].type, "room");
+            assert.equal(segments[2].value, "a");
+            assert.equal(segments[3].type, "details");
+            assert.equal(segments[3].value, true);
+        },
         "parse open-room action setting a room in an empty tile": assert => {
             const nav = new Navigation(allowsChild);
             const path = nav.pathFrom([

src/domain/session/RoomGridViewModel.js

@@ -78,13 +78,23 @@ export class RoomGridViewModel extends ViewModel {
         return this._height;
     }
 
+    _switchToRoom(roomId) {
+        const detailsShown = !!this.navigation.path.get("details")?.value;
+        let path = this.navigation.path.until("rooms");
+        path = path.with(new Segment("room", roomId));
+        if (detailsShown) {
+            path = path.with(new Segment("details", true));
+        }
+        this.navigation.applyPath(path);
+    }
+
     focusTile(index) {
         if (index === this._selectedIndex) {
             return;
         }
         const vmo = this._viewModelsObservables[index];
         if (vmo) {
-            this.navigation.push("room", vmo.id);
+            this._switchToRoom(vmo.id);
         } else {
             this.navigation.push("empty-grid-tile", index);
         }
@@ -146,7 +156,7 @@ export class RoomGridViewModel extends ViewModel {
         this.emitChange();
         viewModel?.focus();
     }
-    
+
     /** called from SessionViewModel */
     releaseRoomViewModel(roomId) {
         const index = this._viewModelsObservables.findIndex(vmo => vmo && vmo.id === roomId);
@@ -179,6 +189,7 @@ export class RoomGridViewModel extends ViewModel {
 
 import {createNavigation} from "../navigation/index.js";
 import {ObservableValue} from "../../observable/ObservableValue.js";
+import { Segment } from "../navigation/Navigation.js";
 
 export function tests() { 
     class RoomVMMock {

src/domain/session/SessionViewModel.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
 import {RoomViewModel} from "./room/RoomViewModel.js";
+import {RoomDetailsViewModel} from "./rightpanel/RoomDetailsViewModel.js";
 import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js";
 import {InviteViewModel} from "./room/InviteViewModel.js";
 import {LightboxViewModel} from "./room/LightboxViewModel.js";
@@ -62,6 +63,7 @@ export class SessionViewModel extends ViewModel {
             if (!this._gridViewModel) {
                 this._updateRoom(roomId);
             }
+            this._updateRoomDetails();
         }));
         if (!this._gridViewModel) {
             this._updateRoom(currentRoomId.get());
@@ -78,6 +80,10 @@ export class SessionViewModel extends ViewModel {
             this._updateLightbox(eventId);
         }));
         this._updateLightbox(lightbox.get());
+
+        const details = this.navigation.observe("details");
+        this.track(details.subscribe(() => this._updateRoomDetails()));
+        this._updateRoomDetails();
     }
 
     get id() {
@@ -112,6 +118,10 @@ export class SessionViewModel extends ViewModel {
         return this._roomViewModelObservable?.get();
     }
 
+    get roomDetailsViewModel() {
+        return this._roomDetailsViewModel;
+    }
+
     _updateGrid(roomIds) {
         const changed = !(this._gridViewModel && roomIds);
         const currentRoomId = this.navigation.path.get("room");
@@ -230,8 +240,7 @@ export class SessionViewModel extends ViewModel {
             this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel);
         }
         if (eventId) {
-            const roomId = this.navigation.path.get("room").value;
-            const room = this._sessionContainer.session.rooms.get(roomId);
+            const room = this._roomFromNavigation();
             this._lightboxViewModel = this.track(new LightboxViewModel(this.childOptions({eventId, room})));
         }
         this.emitChange("lightboxViewModel");
@@ -240,4 +249,21 @@ export class SessionViewModel extends ViewModel {
     get lightboxViewModel() {
         return this._lightboxViewModel;
     }
+
+    _roomFromNavigation() {
+        const roomId = this.navigation.path.get("room")?.value;
+        const room = this._sessionContainer.session.rooms.get(roomId);
+        return room;
+    }
+
+    _updateRoomDetails() {
+        this._roomDetailsViewModel = this.disposeTracked(this._roomDetailsViewModel);
+        const enable = !!this.navigation.path.get("details")?.value;
+        if (enable) {
+            const room = this._roomFromNavigation();
+            this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({room})));
+        }
+        this.emitChange("roomDetailsViewModel");
+    }
+
 }

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -92,26 +92,30 @@ export class LeftPanelViewModel extends ViewModel {
         }
     }
 
+    _pathForDetails(path) {
+        const details = this.navigation.path.get("details");
+        return details?.value ? path.with(details) : path;
+    }
+
     toggleGrid() {
+        const room = this.navigation.path.get("room");
+        let path = this.navigation.path.until("session");
         if (this.gridEnabled) {
-            let path = this.navigation.path.until("session");
-            const room = this.navigation.path.get("room");
             if (room) {
                 path = path.with(room);
+                path = this._pathForDetails(path);
             }
-            this.navigation.applyPath(path);
         } else {
-            let path = this.navigation.path.until("session");
-            const room = this.navigation.path.get("room");
             if (room) {
                 path = path.with(this.navigation.segment("rooms", [room.value]));
                 path = path.with(room);
+                path = this._pathForDetails(path);
             } else {
                 path = path.with(this.navigation.segment("rooms", []));
                 path = path.with(this.navigation.segment("empty-grid-tile", 0));
             }
-            this.navigation.applyPath(path);
         }
+        this.navigation.applyPath(path);
     }
 
     get tileViewModels() {

src/domain/session/rightpanel/RoomDetailsViewModel.js

@@ -0,0 +1,61 @@
+import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+
+export class RoomDetailsViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._room = options.room;
+        this._onRoomChange = this._onRoomChange.bind(this);
+        this._room.on("change", this._onRoomChange);
+    }
+
+    get roomId() {
+        return this._room.id;
+    }
+
+    get canonicalAlias() {
+        return this._room.canonicalAlias;
+    }
+
+    get name() {
+        return this._room.name;
+    }
+
+    get isEncrypted() {
+        return !!this._room.isEncrypted;
+    }
+
+    get memberCount() {
+        return this._room.joinedMemberCount;
+    }
+
+    get avatarLetter() {
+        return avatarInitials(this.name);
+    }
+
+    get avatarColorNumber() {
+        return getIdentifierColorNumber(this.roomId)
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._room.avatarUrl, size, this.platform, this._room.mediaRepository);
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
+
+    _onRoomChange() {
+        this.emitChange();
+    }
+
+    closePanel() {
+        const path = this.navigation.path.until("room");
+        this.navigation.applyPath(path);
+    }
+
+    dispose() {
+        super.dispose();
+        this._room.off("change", this._onRoomChange);
+    }
+}

src/domain/session/room/RoomViewModel.js

@@ -283,10 +283,16 @@ export class RoomViewModel extends ViewModel {
             console.error(err.stack);
         }
     }
-    
+
     get composerViewModel() {
         return this._composerVM;
     }
+
+    openDetailsPanel() {
+        let path = this.navigation.path.until("room");
+        path = path.with(this.navigation.segment("details", true));
+        this.navigation.applyPath(path);
+    }
 }
 
 class ComposerViewModel extends ViewModel {
@@ -383,4 +389,4 @@ class ArchivedViewModel extends ViewModel {
     get kind() {
         return "archived";
     }
-}
+}

src/matrix/room/BaseRoom.js

@@ -354,6 +354,14 @@ export class BaseRoom extends EventEmitter {
         return this.membership === "leave";
     }
 
+    get canonicalAlias() {
+        return this._summary.data.canonicalAlias;
+    }
+
+    get joinedMemberCount() {
+        return this._summary.data.joinCount;
+    }
+
     get mediaRepository() {
         return this._mediaRepository;
     }

src/platform/web/ui/css/avatar.css

@@ -53,6 +53,14 @@ limitations under the License.
     font-size: calc(var(--avatar-size) * 0.6);
 }
 
+.hydrogen .avatar.size-52 {
+    --avatar-size: 52px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
+}
+
 .hydrogen .avatar.size-30 {
     --avatar-size: 30px;
     width: var(--avatar-size);

src/platform/web/ui/css/layout.css

@@ -54,6 +54,13 @@ main {
     min-width: 0;
 }
 
+.right-shown{
+    grid-template:
+        "status status status" auto
+        "left   middle right" 1fr /
+        300px   1fr 300px;
+}
+
 /* resize and reposition session view to account for mobile Safari which shifts
 the layout viewport up without resizing it when the keyboard shows */
 .hydrogen.ios .SessionView {
@@ -65,7 +72,7 @@ the layout viewport up without resizing it when the keyboard shows */
 .middle .close-middle { display: none; }
 /* mobile layout */
 @media screen and (max-width: 800px) {
-    .SessionView:not(.middle-shown) {
+    .SessionView:not(.middle-shown, .right-shown) {
         grid-template:
             "status" auto
             "left" 1fr /
@@ -79,8 +86,16 @@ the layout viewport up without resizing it when the keyboard shows */
             1fr;
     }
 
+    .SessionView.right-shown{
+        grid-template:
+            "status" auto
+            "right" 1fr /
+            1fr;
+    }
+
     .SessionView:not(.middle-shown) .room-placeholder { display: none; }
     .SessionView.middle-shown .LeftPanel { display: none; }
+    .SessionView.right-shown .middle { display: none; }
 
     /* show back button */
     .middle .close-middle { display: block !important; }
@@ -179,6 +194,11 @@ the layout viewport up without resizing it when the keyboard shows */
     z-index: 2;
 }
 
+.menu .menu-item{
+    box-sizing: border-box;
+    width: 100%;
+}
+
 .Settings {
     display: flex;
     flex-direction: column;

src/platform/web/ui/css/main.css

@@ -18,6 +18,7 @@ limitations under the License.
 @import url('layout.css');
 @import url('login.css');
 @import url('left-panel.css');
+@import url('right-panel.css');
 @import url('room.css');
 @import url('timeline.css');
 @import url('avatar.css');