render avatar img in room list

src/domain/session/roomlist/RoomTileViewModel.js

@@ -61,11 +61,23 @@ export class RoomTileViewModel extends ViewModel {
         return this._room.name;
     }
 
-    get avatarInitials() {
+    // Avatar view model contract
+    get avatarLetter() {
         return avatarInitials(this._room.name);
     }
 
     get avatarColorNumber() {
         return getIdentifierColorNumber(this._room.id)
     }
+
+    get avatarUrl() {
+        if (this._room.avatarUrl) {
+            return this._room.mediaRepository.mxcUrlThumbnail(this._room.avatarUrl, 32, 32, "crop");
+        }
+        return null;
+    }
+
+    get avatarTitle() {
+        return this.name;
+    }
 }

src/matrix/room/Room.js

@@ -180,6 +180,10 @@ export class Room extends EventEmitter {
         return this._roomId;
     }
 
+    get avatarUrl() {
+        return this._summary.avatarUrl;
+    }
+
     /** @public */
     async openTimeline() {
         if (this._timeline) {

src/ui/web/session/RoomTile.js

@@ -15,11 +15,12 @@ limitations under the License.
 */
 
 import {TemplateView} from "../general/TemplateView.js";
+import {renderAvatar} from "../common.js";
 
 export class RoomTile extends TemplateView {
     render(t, vm) {
         return t.li({"className": {"active": vm => vm.isOpen}}, [
-            t.div({className: `avatar medium usercolor${vm.avatarColorNumber}`}, vm => vm.avatarInitials),
+            renderAvatar(t, vm, 32),
             t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
         ]);
     }