Add user color as background.

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -10,23 +10,47 @@ Control {
     padding: 8
 
     contentItem: RowLayout {
-        Avatar {
+        id: row
-            Layout.preferredWidth: 24
-            Layout.preferredHeight: 24
 
-            hint: author.displayName
+        Control {
-            source: author.avatarMediaId
+            id: authorControl
+
+            padding: 4
+
+            background: Rectangle {
+                radius: height / 2
+                color: author.color
+            }
+
+            contentItem: RowLayout {
+                Avatar {
+                    Layout.preferredWidth: 24
+                    Layout.preferredHeight: 24
+
+                    hint: author.displayName
+                    source: author.avatarMediaId
+                }
+
+                Label {
+                    Layout.alignment: Qt.AlignVCenter
+
+                    text: author.displayName
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                    color: "white"
+                    rightPadding: 8
+                }
+            }
         }
 
         Label {
             Layout.fillWidth: true
-            Layout.maximumWidth: messageListView.width - 48
+            Layout.maximumWidth: messageListView.width - authorControl.width - row.spacing
 
-            text: "<b>" + author.displayName + "</b> " + display + " • " + Qt.formatTime(time, "hh:mm AP")
+            text: display + " • " + Qt.formatTime(time, "hh:mm AP")
             color: MPalette.foreground
             font.pixelSize: 13
             font.weight: Font.Medium
-            textFormat: Label.StyledText
 
             wrapMode: Label.Wrap
             onLinkActivated: Qt.openUrlExternally(link)

imports/Spectral/Panel/RoomPanelInput.qml

@@ -13,6 +13,7 @@ import Spectral 0.1
 
 Control {
     property alias isReply: replyItem.visible
+    property bool isReaction: false
     property var replyModel
     readonly property var replyUser: replyModel ? replyModel.author : null
     readonly property string replyEventID: replyModel ? replyModel.eventId : ""
@@ -53,13 +54,34 @@ Control {
 
             spacing: 8
 
-            Avatar {
+            Control {
-                Layout.preferredWidth: 32
-                Layout.preferredHeight: 32
                 Layout.alignment: Qt.AlignTop
 
-                source: replyUser ? replyUser.avatarMediaId : ""
+                padding: 4
-                hint: replyUser ? replyUser.displayName : "No name"
+
+                background: Rectangle {
+                    radius: height / 2
+                    color: replyUser ? replyUser.color : MPalette.accent
+                }
+
+                contentItem: RowLayout {
+                    Avatar {
+                        Layout.preferredWidth: 24
+                        Layout.preferredHeight: 24
+
+                        source: replyUser ? replyUser.avatarMediaId : ""
+                        hint: replyUser ? replyUser.displayName : "No name"
+                    }
+
+                    Label {
+                        Layout.alignment: Qt.AlignVCenter
+
+                        text: replyUser ? replyUser.displayName : "No name"
+                        color: "white"
+                        font.weight: Font.Medium
+                        rightPadding: 8
+                    }
+                }
             }
 
             TextEdit {