Basic barebones of memberlist view

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/session/rightpanel/MemberListViewModel.js

@@ -0,0 +1,24 @@
+import {ViewModel} from "../../ViewModel.js";
+import {MemberTileViewModel} from "./MemberTileViewModel.js";
+
+function comparator(member, otherMember) {
+    return member.displayName?.localeCompare(otherMember.displayName);
+}
+
+export class MemberListViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this.memberTileViewModels = this._mapTileViewModels(this._filterJoinedMembers(options.members))
+                                        .sortValues(comparator);
+    }
+
+    _filterJoinedMembers(members) {
+        return members.filterValues(member => member.membership === "join");
+    }
+
+    _mapTileViewModels(members) {
+        return members.mapValues((member, emitChange) => {
+            return new MemberTileViewModel(this.childOptions({member, emitChange}));
+        });
+    }
+}

src/domain/session/rightpanel/MemberTileViewModel.js

@@ -0,0 +1,12 @@
+import {ViewModel} from "../../ViewModel.js";
+
+export class MemberTileViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this.member = options.member;
+    }
+
+    get displayName() {
+        return this.member.displayName;
+    }
+}

src/platform/web/ui/session/rightpanel/MemberListView.js

@@ -0,0 +1,9 @@
+import {TemplateView} from "../../general/TemplateView.js";
+import {ListView} from "../../general/ListView.js";
+import {MemberTileView} from "./MemberTileView.js";
+
+export class MemberListView extends TemplateView {
+    render(t, vm) {
+        return t.view(new ListView({list: vm.memberTileViewModels}, tileViewModel => new MemberTileView(tileViewModel)));
+    }
+}

src/platform/web/ui/session/rightpanel/MemberTileView.js

@@ -0,0 +1,7 @@
+import {TemplateView} from "../../general/TemplateView.js";
+
+export class MemberTileView extends TemplateView {
+    render(t, vm) {
+        return t.div(vm.displayName);
+    }
+}