Use ImageItem in MessageDelegate.

qml/component/MessageDelegate.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 import Matrique 0.1
 import Matrique.Settings 0.1
+import "qrc:/js/util.js" as Util
 
 RowLayout {
     readonly property bool avatarVisible: !(sentByMe || (aboveAuthor === author && section === aboveSection))
@@ -22,15 +23,16 @@ RowLayout {
 
     spacing: 6
 
-    ImageStatus {
+    ImageItem {
         Layout.preferredWidth: 40
         Layout.preferredHeight: 40
         Layout.alignment: Qt.AlignTop
 
         round: false
         visible: avatarVisible
-        source: author.avatarUrl != "" ? "image://mxc/" + author.avatarUrl : null
-        displayText: author.displayName
+        hint: author.displayName
+        defaultColor: Util.stringToColor(author.displayName)
+        image: author.avatar
     }
 
     Rectangle {
@@ -61,6 +63,11 @@ RowLayout {
                 Material.foreground: Material.accent
                 coloredBackground: highlighted
                 font.bold: true
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: inputField.insert(inputField.cursorPosition, author.displayName)
+                }
             }
 
             AutoLabel {

qml/component/RoomDrawer.qml

@@ -24,13 +24,14 @@ Drawer {
         anchors.fill: parent
         anchors.margins: 32
 
-        ImageStatus {
+        ImageItem {
             Layout.preferredWidth: 64
             Layout.preferredHeight: 64
             Layout.alignment: Qt.AlignHCenter
 
-            source: room && room.avatarUrl != "" ? "image://mxc/" + room.avatarUrl : null
-            displayText: room ? room.displayName : ""
+            hint: room ? room.displayName : "No name"
+            defaultColor: Util.stringToColor(room ? room.displayName : "No name")
+            image: matriqueController.safeImage(room ? room.avatar : null)
         }
 
         Label {

qml/form/RoomForm.qml

@@ -9,6 +9,7 @@ import Matrique.Settings 0.1
 
 import "../component"
 import "qrc:/js/md.js" as Markdown
+import "qrc:/js/util.js" as Util
 
 Item {
     property var currentRoom: null
@@ -57,12 +58,13 @@ Item {
 
                         spacing: 12
 
-                        ImageStatus {
+                        ImageItem {
                             Layout.preferredWidth: height
                             Layout.fillHeight: true
 
-                            source: currentRoom && currentRoom.avatarUrl != "" ? "image://mxc/" + currentRoom.avatarUrl : null
-                            displayText: currentRoom ? currentRoom.displayName : ""
+                            hint: currentRoom ? currentRoom.displayName : "No name"
+                            defaultColor: Util.stringToColor(currentRoom ? currentRoom.displayName : "No name")
+                            image: matriqueController.safeImage(currentRoom ? currentRoom.avatar : null)
                         }
 
                         ColumnLayout {