first round of fixes

src/domain/navigation/Navigation.js

@@ -32,11 +32,11 @@ export class Navigation {
         this._path = path;
         // clear values not in the new path in reverse order of path
         for (let i = oldPath.segments.length - 1; i >= 0; i -= 1) {
-            const segment = oldPath[i];
+            const segment = oldPath.segments[i];
             if (!this._path.get(segment.type)) {
                 const observable = this._observables.get(segment.type);
                 if (observable) {
-                    observable.set(segment.type, undefined);
+                    observable.set(undefined);
                 }
             }
         }
@@ -45,7 +45,7 @@ export class Navigation {
             const observable = this._observables.get(segment.type);
             if (observable) {
                 if (!segmentValueEqual(segment?.value, observable.get())) {
-                    observable.set(segment.type, segment.value);
+                    observable.set(segment.value);
                 }
             }
         }

src/domain/navigation/URLRouter.js

@@ -41,7 +41,7 @@ export class URLRouter {
 
     applyUrl(url) {    
         const urlPath = this._history.urlAsPath(url)
-        const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath));
+        const navPath = this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path));
         this._navigation.applyPath(navPath);
         return this._history.pathAsUrl(this._stringifyPath(navPath));
     }
@@ -76,12 +76,17 @@ export class URLRouter {
     }
 
     disableGridUrl() {
-
+        let path = this._navigation.path.until("session");
+        const room = this._navigation.path.get("room");
+        if (room) {
+            path = path.with(room);
+        }
+        return this.urlForPath(path);
     }
 
     enableGridUrl() {
         let path = this._navigation.path.until("session");
-        const room = this._navigation.get("room");
+        const room = this._navigation.path.get("room");
         if (room) {
             path = path.with(this._navigation.segment("rooms", [room.value]));
             path = path.with(room);

src/domain/session/RoomGridViewModel.js

@@ -47,7 +47,7 @@ export class RoomGridViewModel extends ViewModel {
             this._selectedIndex = focusTileIndex.get();
         }
 
-        const focusedRoom = this.navigation.get("room");
+        const focusedRoom = this.navigation.observe("room");
         this.track(focusedRoom.subscribe(roomId => {
             if (roomId) {
                 this._openRoom(roomId);

src/domain/session/SessionViewModel.js

@@ -99,15 +99,20 @@ export class SessionViewModel extends ViewModel {
         const currentRoomId = this.navigation.path.get("room");
         if (roomIds) {
             if (!this._gridViewModel) {
+                const vm = this._currentRoomViewModel;
+                const index = roomIds.indexOf(vm.id);
+                const shouldTransfer = vm && index !== -1;
+                if (shouldTransfer) {
+                    roomIds = roomIds.slice();
+                    roomIds[index] = undefined;
+                }
                 this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({
                     width: 3,
                     height: 2,
                     createRoomViewModel: roomId => this._createRoomViewModel(roomId),
                     roomIds: roomIds
                 })));
-                const vm = this._currentRoomViewModel;
+                if (shouldTransfer) {
-                const index = roomIds.indexOf(vm.id);
-                if (vm && index !== -1) {
                     this.untrack(vm);
                     this._gridViewModel.transferRoomViewModel(index, vm);
                     this._currentRoomViewModel = null;
@@ -128,7 +133,7 @@ export class SessionViewModel extends ViewModel {
     }
 
     _createRoomViewModel(roomId) {
-        const room = this._session.rooms.get(roomId);
+        const room = this._sessionContainer.session.rooms.get(roomId);
         if (!room) {
             return null;
         }
@@ -149,11 +154,6 @@ export class SessionViewModel extends ViewModel {
         const roomVM = this._createRoomViewModel(roomId);
         if (roomVM) {
             this._currentRoomViewModel = this.track(roomVM);
-        }
-        if (this._gridViewModel) {
-            this._gridViewModel.setRoomViewModel(roomVM);
-        } else {
-            this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
             this.emitChange("currentRoom");
         }
     }

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -23,16 +23,14 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {rooms, openRoom, gridEnabled} = options;
+        const {rooms} = options;
-        this._gridEnabled = gridEnabled;
+        this._roomTileViewModels = rooms.mapValues((room, emitChange) => {
-        const roomTileVMs = rooms.mapValues((room, emitChange) => {
             return new RoomTileViewModel(this.childOptions({
                 room,
-                emitChange,
+                emitChange
-                emitOpen: openRoom
             }));
         });
-        this._roomListFilterMap = new ApplyMap(roomTileVMs);
+        this._roomListFilterMap = new ApplyMap(this._roomTileViewModels);
         this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
         this._currentTileVM = null;
         this._setupNavigation();
@@ -58,14 +56,14 @@ export class LeftPanelViewModel extends ViewModel {
         this._currentTileVM?.close();
         this._currentTileVM = null;
         if (roomId) {
-            this._currentTileVM = this._roomListFilterMap.get(roomId);
+            this._currentTileVM = this._roomTileViewModels.get(roomId);
             this._currentTileVM?.open();
         }
     }
 
     toggleGrid() {
         let url;
-        if (this._gridEnabled) {
+        if (this.gridEnabled) {
             url = this.urlRouter.disableGridUrl();
         } else {
             url = this.urlRouter.enableGridUrl();

src/domain/session/leftpanel/RoomTileViewModel.js

@@ -25,9 +25,8 @@ function isSortedAsUnread(vm) {
 export class RoomTileViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {room, emitOpen} = options;
+        const {room} = options;
         this._room = room;
-        this._emitOpen = emitOpen;
         this._isOpen = false;
         this._wasUnreadWhenOpening = false;
         this._hidden = false;
@@ -57,7 +56,6 @@ export class RoomTileViewModel extends ViewModel {
             this._isOpen = true;
             this._wasUnreadWhenOpening = this._room.isUnread;
             this.emitChange("isOpen");
-            this._emitOpen(this._room, this);
         }
     }
 

src/main.js

@@ -22,8 +22,7 @@ import {SessionContainer} from "./matrix/SessionContainer.js";
 import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js";
 import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js";
 import {RootViewModel} from "./domain/RootViewModel.js";
-import {createNavigation} from "./domain/navigation/index.js";
+import {createNavigation, createRouter} from "./domain/navigation/index.js";
-import {URLRouter} from "./domain/navigation/URLRouter.js";
 import {RootView} from "./ui/web/RootView.js";
 import {Clock} from "./ui/web/dom/Clock.js";
 import {History} from "./ui/web/dom/History.js";
@@ -119,8 +118,9 @@ export async function main(container, paths, legacyExtras) {
         }
 
         const navigation = createNavigation();
-        const urlRouter = new URLRouter(new History(), navigation);
+        const urlRouter = createRouter({navigation, history: new History()});
         urlRouter.attach();
+        console.log("starting with navigation path", navigation.path);
 
         const vm = new RootViewModel({
             createSessionContainer: () => {

src/observable/map/MappedMap.js

@@ -84,4 +84,8 @@ export class MappedMap extends BaseObservableMap {
     get size() {
         return this._mappedValues.size;
     }
+
+    get(key) {
+        return this._mappedValues.get(key);
+    }
 }

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

@@ -83,7 +83,6 @@ export class LeftPanelView extends TemplateView {
                 {
                     className: "RoomList",
                     list: vm.roomList,
-                    onItemClick: (roomTile, event) => roomTile.clicked(event)
                 },
                 roomTileVM => new RoomTileView(roomTileVM)
             ))