Better delegate for completable users

src/gui/Pages/Chat/AutoCompletion/CompletableUserDelegate.qml

@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../../../Base"
+import "../../../Base/HTile"
+
+HTile {
+    id: root
+
+    property bool colorName: hovered
+
+    backgroundColor: "transparent"
+    contentItem: ContentRow {
+        tile: root
+
+        HUserAvatar {
+            id: avatar
+            userId: model.id
+            displayName: model.display_name
+            mxc: model.avatar_url
+            compact: root.compact
+
+            implicitHeight:
+                compact ?
+                theme.controls.avatar.compactSize :
+                24 // XXX
+        }
+
+        TitleLabel {
+            textFormat: TitleLabel.StyledText
+            text:
+                (model.display_name || model.id) + (
+                    model.display_name ?
+                    " ".repeat(2) + utils.htmlColorize(
+                        model.id, theme.chat.roomPane.listView.member.subtitle,
+                    ) :
+                    ""
+                )
+
+            color:
+                root.colorName ?
+                utils.nameColor(model.display_name || model.id.substring(1)) :
+                theme.chat.roomPane.listView.member.name
+
+            Behavior on color { HColorAnimation {} }
+        }
+    }
+}

src/gui/Pages/Chat/AutoCompletion/UserAutoCompletion.qml

@@ -93,9 +93,8 @@ HListView {
     implicitHeight: open && count ? Math.min(window.height, contentHeight) : 0
     model: ModelStore.get(chat.userId, chat.roomId, "autocompleted_members")
 
-    delegate: HTile {
+    delegate: CompletableUserDelegate {
         width: root.width
-        contentItem: HLabel { text: model.display_name + " (" + model.id + ")"}
         onClicked: {
             currentIndex = model.index
             root.open    = false
@@ -126,6 +125,12 @@ HListView {
     Behavior on opacity { HNumberAnimation {} }
     Behavior on implicitHeight { HNumberAnimation {} }
 
+    Rectangle {
+        anchors.fill: parent
+        z: -1
+        color: theme.chat.typingMembers.background
+    }
+
     Connections {
         target: root.textArea