mark room tile as active when clicked

src/domain/session/SessionViewModel.js

@@ -28,12 +28,13 @@ export class SessionViewModel extends ViewModel {
             sync: sessionContainer.sync,
             reconnector: sessionContainer.reconnector
         })));
+        this._currentRoomTileViewModel = null;
         this._currentRoomViewModel = null;
-        const roomTileVMs = this._session.rooms.mapValues((room, emitUpdate) => {
+        const roomTileVMs = this._session.rooms.mapValues((room, emitChange) => {
             return new RoomTileViewModel({
                 room,
-                emitUpdate,
+                emitChange,
-                emitOpen: room => this._openRoom(room)
+                emitOpen: this._openRoom.bind(this)
             });
         });
         this._roomList = roomTileVMs.sortValues((a, b) => a.compare(b));
@@ -62,7 +63,11 @@ export class SessionViewModel extends ViewModel {
         }
     }
 
-    _openRoom(room) {
+    _openRoom(room, roomTileVM) {
+        if (this._currentRoomTileViewModel) {
+            this._currentRoomTileViewModel.close();
+        }
+        this._currentRoomTileViewModel = roomTileVM;
         if (this._currentRoomViewModel) {
             this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
         }

src/domain/session/roomlist/RoomTileViewModel.js

@@ -15,20 +15,33 @@ limitations under the License.
 */
 
 import {avatarInitials} from "../avatar.js";
+import {ViewModel} from "../../ViewModel.js";
 
-export class RoomTileViewModel {
+export class RoomTileViewModel extends ViewModel {
     // we use callbacks to parent VM instead of emit because
     // it would be annoying to keep track of subscriptions in
     // parent for all RoomTileViewModels
     // emitUpdate is ObservableMap/ObservableList update mechanism
-    constructor({room, emitUpdate, emitOpen}) {
+    constructor(options) {
+        super(options);
+        const {room, emitOpen} = options;
         this._room = room;
-        this._emitUpdate = emitUpdate;
         this._emitOpen = emitOpen;
+        this._isOpen = false;
+    }
+
+    // called by parent for now (later should integrate with router)
+    close() {
+        if (this._isOpen) {
+            this._isOpen = false;
+            this.emitChange("isOpen");
+        }
     }
 
     open() {
-        this._emitOpen(this._room);
+        this._isOpen = true;
+        this.emitChange("isOpen");
+        this._emitOpen(this._room, this);
     }
 
     compare(other) {
@@ -36,6 +49,10 @@ export class RoomTileViewModel {
         return this._room.name.localeCompare(other._room.name);
     }
 
+    get isOpen() {
+        return this._isOpen;
+    }
+
     get name() {
         return this._room.name;
     }

src/ui/web/session/RoomTile.js

@@ -18,7 +18,7 @@ import {TemplateView} from "../general/TemplateView.js";
 
 export class RoomTile extends TemplateView {
     render(t) {
-        return t.li([
+        return t.li({"className": {"active": vm => vm.isOpen}}, [
             t.div({className: "avatar medium"}, vm => vm.avatarInitials),
             t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
         ]);