have a single tile view that supports all 3 view models

src/domain/session/leftpanel/InviteTileViewModel.js

@@ -25,17 +25,14 @@ export class InviteTileViewModel extends BaseTileViewModel {
         this._url = this.urlCreator.openRoomActionUrl(this._invite.id);
     }
 
-    get busy() {
+    get busy() { return this._invite.accepting || this._invite.rejecting; }
-        return this._invite.accepting || this._invite.rejecting;
+    get kind() { return "invite"; }
-    }
+    get url() { return this._url; }
-
+    get name() { return this._invite.name; }
-    get kind() {
+    get isHighlighted() { return true; }
-        return "invite";
+    get isUnread() { return true; }
-    }
+    get badgeCount() { return this.i18n`!`; }
-
+    get _avatarSource() { return this._invite; }
-    get url() {
-        return this._url;
-    }
 
     compare(other) {
         const parentComparison = super.compare(other);
@@ -44,12 +41,4 @@ export class InviteTileViewModel extends BaseTileViewModel {
         }
         return other._invite.timestamp - this._invite.timestamp;
     }
-
-    get name() {
-        return this._invite.name;
-    }
-
-    get _avatarSource() {
-        return this._invite;
-    }
 }

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

@@ -1,50 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {TemplateView} from "../../general/TemplateView";
-import {AvatarView} from "../../AvatarView";
-import {spinner} from "../../common.js";
-
-export class InviteTileView extends TemplateView {
-    render(t, vm) {
-        const classes = {
-            "active": vm => vm.isOpen,
-            "hidden": vm => vm.hidden
-        };
-        return t.li({"className": classes}, [
-            t.a({href: vm.url}, [
-                t.view(new AvatarView(vm, 32), {parentProvidesUpdates: true}),
-                t.div({className: "description"}, [
-                    t.div({className: "name"}, vm => vm.name),
-                    t.map(vm => vm.busy, busy => {
-                        if (busy) {
-                            return spinner(t);
-                        } else {
-                            return t.div({className: "badge highlighted"}, "!");
-                        }
-                    })
-                ])
-            ])
-        ]);
-    }
-
-    update(value, props) {
-        super.update(value);
-        // update the AvatarView as we told it to not subscribe itself with parentProvidesUpdates
-        this.updateSubViews(value, props);
-    }
-}

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

@@ -17,7 +17,6 @@ limitations under the License.
 import {ListView} from "../../general/ListView";
 import {TemplateView} from "../../general/TemplateView";
 import {RoomTileView} from "./RoomTileView.js";
-import {InviteTileView} from "./InviteTileView.js";
 
 class FilterField extends TemplateView {
     render(t, options) {
@@ -63,13 +62,7 @@ export class LeftPanelView extends TemplateView {
                 className: "RoomList",
                 list: vm.tileViewModels,
             },
-            tileVM => {
+            tileVM => new RoomTileView(tileVM)
-                if (tileVM.kind === "invite" || tileVM.kind === "roomBeingCreated") {
-                    return new InviteTileView(tileVM);
-                } else {
-                    return new RoomTileView(tileVM);
-                }
-            }
         ));
         const utilitiesRow = t.div({className: "utilities"}, [
             t.a({className: "button-utility close-session", href: vm.closeUrl, "aria-label": vm.i18n`Back to account list`, title: vm.i18n`Back to account list`}),

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

@@ -17,6 +17,7 @@ limitations under the License.
 
 import {TemplateView} from "../../general/TemplateView";
 import {AvatarView} from "../../AvatarView.js";
+import {spinner} from "../../common.js";
 
 export class RoomTileView extends TemplateView {
     render(t, vm) {
@@ -29,13 +30,19 @@ export class RoomTileView extends TemplateView {
                 t.view(new AvatarView(vm, 32), {parentProvidesUpdates: true}),
                 t.div({className: "description"}, [
                     t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name),
-                    t.div({
+                    t.map(vm => vm.busy, busy => {
-                        className: {
+                        if (busy) {
-                            badge: true,
+                            return spinner(t);
-                            highlighted: vm => vm.isHighlighted,
+                        } else {
-                            hidden: vm => !vm.badgeCount
+                            return t.div({
+                                className: {
+                                    badge: true,
+                                    highlighted: vm => vm.isHighlighted,
+                                    hidden: vm => !vm.badgeCount
+                                }
+                            }, vm => vm.badgeCount);
                         }
-                    }, vm => vm.badgeCount),
+                    })
                 ])
             ])
         ]);