Get placeholder->room logic working

Feels somewhat hacky, but it mostly works with the caveats:
- Room names / avatars bleed between rooms when there are updates.
- Clicking on a room doesn't immediately highlight it on the list

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -33,8 +33,7 @@ export class LeftPanelViewModel extends ViewModel {
         this._sync = sync;
         const sync3List = new Sync3ObservableList(sync, rooms);
         const list = new ConcatList(invites.sortValues((a,b) => a.compare(b)), sync3List);
-        this._tileViewModelsMap = this._mapTileViewModels(list);
-        this._tileViewModels = this._tileViewModelsMap;
+        this._tileViewModels = this._mapTileViewModels(list);
         this._currentTileVM = null;
         this._setupNavigation();
         this._closeUrl = this.urlCreator.urlForSegment("session");
@@ -106,10 +105,23 @@ export class LeftPanelViewModel extends ViewModel {
         this._currentTileVM?.close();
         this._currentTileVM = null;
         if (roomId) {
-            this._currentTileVM = this._tileViewModelsMap.get(roomId);
+            // find the vm for the room. Previously we used a map to do this but sync3 only gives
+            // us a list. We could've re-mapped things in the observable pipeline but we don't need
+            // these values to be kept up-to-date when a O(n) search on click isn't particularly
+            // expensive.
+            let targetVM;
+            for ( let vm of this._tileViewModels ) {
+                if (vm.id === roomId) {
+                    targetVM = vm;
+                    break;
+                }
+            }
+            if (targetVM) {
+                this._currentTileVM = targetVM;
                 this._currentTileVM?.open();
             }
         }
+    }
 
     toggleGrid() {
         const room = this.navigation.path.get("room");

src/domain/session/leftpanel/RoomTileViewModel.js

@@ -34,6 +34,10 @@ export class RoomTileViewModel extends BaseTileViewModel {
         return this._url;
     }
 
+    get id() {
+        return this._room.id;
+    }
+
     compare(other) {
         return this._compareFn(this._room.id, other._room.id);
         

src/matrix/Sync3.ts

@@ -129,7 +129,7 @@ export class Sync3 {
         this.status = new ObservableValue(SyncStatus.Stopped);
         this.error = null;
         // Hydrogen only has 1 list currently (no DM section) so we only need 1 range
-        this.ranges = [[0, 4]];
+        this.ranges = [[0, 49]];
         this.roomIndexToRoomId = {};
         this.roomIdToRoomIndex = {};
         this.totalRooms = 0;

src/observable/list/BaseMappedList.ts

@@ -19,7 +19,7 @@ import { BaseObservableList } from "./BaseObservableList";
 import { findAndUpdateInArray } from "./common";
 
 export type Mapper<F, T> = (value: F) => T
-export type Updater<F, T> = (mappedValue: T, params: any, value: F) => void;
+export type Updater<F, T> = (mappedValue: T, params: any, value: F) => any;
 
 export class BaseMappedList<F, T, R = T> extends BaseObservableList<T> {
     protected _sourceList: BaseObservableList<F>;
@@ -56,10 +56,21 @@ export function runAdd<F, T, R>(list: BaseMappedList<F, T, R>, index: number, ma
 }
 
 export function runUpdate<F, T, R>(list: BaseMappedList<F, T, R>, index: number, value: F, params: any): void {
-    const mappedValue = list._mappedValues![index];
+    let mappedValue = list._mappedValues![index];
     if (list._updater) {
-        list._updater(mappedValue, params, value);
+        // allow updates to completely remap the underlying data type
+        // TODO: do we need to unsubscribe from anything here?
+        let newMappedValue = list._updater(mappedValue, params, value);
+        if (newMappedValue) {
+            if (!params) {
+                params = {};
             }
+            params.oldValue = mappedValue;
+            mappedValue = newMappedValue;
+            list._mappedValues![index] = mappedValue;
+        }
+    }
+    // pass the new updated value down the chain
     list.emitUpdate(index, mappedValue, params);
 }
 

src/platform/web/ui/general/LazyListView.ts

@@ -23,6 +23,7 @@ import { IView } from "./types";
 export interface IOptions<T, V> extends IParentOptions<T, V> {
     itemHeight: number;
     overflowItems?: number;
+    shouldRecreateItem?: (value: any, oldValue: any) => boolean;
     onRangeVisible?: (range: ListRange) => void;
 }
 
@@ -33,15 +34,17 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
     private overflowItems: number;
     private scrollContainer?: HTMLElement;
     private onRangeVisible?: (range: ListRange) => void;
+    private shouldRecreateItem?: (value: any, oldValue: any) => boolean;
 
     constructor(
-        { itemHeight, onRangeVisible, overflowItems = 20, ...options }: IOptions<T, V>,
+        { itemHeight, onRangeVisible, shouldRecreateItem, overflowItems = 20, ...options }: IOptions<T, V>,
         childCreator: (value: T) => V
     ) {
         super(options, childCreator);
         this.itemHeight = itemHeight;
         this.overflowItems = overflowItems;
-        this.onRangeVisible = onRangeVisible; // function(ItemRange)
+        this.onRangeVisible = onRangeVisible;
+        this.shouldRecreateItem = shouldRecreateItem;
     }
 
     handleEvent(e: Event) {
@@ -190,9 +193,13 @@ export class LazyListView<T, V extends IView> extends ListView<T, V> {
 
     onUpdate(i: number, value: T, params: any) {
         if (this.renderRange!.containsIndex(i)) {
+            if (this.shouldRecreateItem && this.shouldRecreateItem(value, params?.oldValue)) {
+                super.recreateItem(this.renderRange!.toLocalIndex(i), value);
+            } else {
                 this.updateChild(this.renderRange!.toLocalIndex(i), value, params);
             }
         }
+    }
 
     private applyRemoveAddResult(result: AddRemoveResult<T>) {
         // order is important here, the new range can have a different start

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

@@ -19,6 +19,8 @@ import {TemplateView} from "../../general/TemplateView";
 import {RoomTileView} from "./RoomTileView.js";
 import {InviteTileView} from "./InviteTileView.js";
 import { PlaceholderRoomTileView } from "./PlaceholderRoomTileView";
+import { PlaceholderRoomTileViewModel } from "../../../../../domain/session/leftpanel/PlaceholderRoomTileViewModel";
+import { RoomTileViewModel } from "../../../../../domain/session/leftpanel/RoomTileViewModel";
 
 class FilterField extends TemplateView {
     render(t, options) {
@@ -67,6 +69,11 @@ export class LeftPanelView extends TemplateView {
                 onRangeVisible: (range) => {
                     vm.loadRoomRange(range);
                 },
+                shouldRecreateItem: (value, oldValue) => {
+                    const isOldRoom = oldValue instanceof RoomTileViewModel;
+                    const isNewRoom = value instanceof RoomTileViewModel;
+                    return isOldRoom != isNewRoom;
+                }
             },
             tileVM => {
                 if (tileVM.kind === "invite") {