feat(mentions): show mentions ordered by how it matches the filter

Fixes #2543

ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml

@@ -31,6 +31,13 @@ Rectangle {
     property Item delegate
     property alias suggestionsModel: filterItem.model
     property alias filter: filterItem.filter
+    property string plainTextFilter: chatsModel.plainText(filter)
+    property string formattedPlainTextFilter: {
+        if (plainTextFilter.startsWith("@")) {
+            return plainTextFilter.substring(1).toLowerCase()
+        }
+        return plainTextFilter.toLowerCase()
+    }
     property alias property: filterItem.property
     property int cursorPosition
     signal itemSelected(var item, int lastAtPosition, int lastCursorPosition)
@@ -95,7 +102,7 @@ Rectangle {
 
     ListView {
         id: listView
-        model: container.suggestionsModel
+        model: mentionsListDelegate
         keyNavigationEnabled: true
         anchors.fill: parent
         anchors.topMargin: Style.current.halfPadding
@@ -108,42 +115,60 @@ Rectangle {
         property var selectedItem: selectedIndex == -1 ? null : model[selectedIndex]
         signal suggestionClicked(var item)
 
-        delegate: Rectangle {
+        DelegateModelGeneralized {
-            id: rectangle
+            id: mentionsListDelegate
-            color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
+            lessThan: [
-            border.width: 0
+                function(left, right) {
-            width: parent.width
+                    if (!formattedPlainTextFilter) {
-            height: 42
+                        return true
-            radius: Style.current.radius
+                    }
 
-            StatusImageIdenticon {
+                    const leftMatches = left[container.property.find(p => !!left[p])].toLowerCase().startsWith(formattedPlainTextFilter)
-                id: accountImage
-                width: 32
-                height: 32
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.leftMargin: Style.current.smallPadding
-                source: model.identicon
-            }
 
-            StyledText {
+                    const rightMatches = right[container.property.find(p => !!right[p])].toLowerCase().startsWith(formattedPlainTextFilter)
-                text: model[container.property.split(",").map(p => p.trim()).find(p => !!model[p])]
-                color: Style.current.textColor
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: accountImage.right
-                anchors.leftMargin: Style.current.smallPadding
-                font.pixelSize: 15
-            }
 
-            MouseArea {
+                    return leftMatches && !rightMatches
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                hoverEnabled: true
-                onEntered: {
-                    listView.currentIndex = index
                 }
-                onClicked: {
+            ]
-                    container.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition)
+
+            model: container.suggestionsModel
+
+            delegate: Rectangle {
+                color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
+                border.width: 0
+                width: parent.width
+                height: 42
+                radius: Style.current.radius
+
+                StatusImageIdenticon {
+                    id: accountImage
+                    width: 32
+                    height: 32
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.leftMargin: Style.current.smallPadding
+                    source: model.identicon
+                }
+
+                StyledText {
+                    text: model[container.property.find(p => !!model[p])]
+                    color: Style.current.textColor
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: accountImage.right
+                    anchors.leftMargin: Style.current.smallPadding
+                    font.pixelSize: 15
+                }
+
+                MouseArea {
+                    cursorShape: Qt.PointingHandCursor
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onEntered: {
+                        listView.currentIndex = index
+                    }
+                    onClicked: {
+                        container.itemSelected(model, filterItem.lastAtPosition, filterItem.cursorPosition)
+                    }
                 }
             }
         }

ui/app/AppLayouts/Chat/ChatColumn/SuggestionFilter.qml

@@ -8,7 +8,7 @@ Item {
     property string filter: ""
     property int cursorPosition: 0
     property int lastAtPosition: 0
-    property string property: ""
+    property var property: ([])
 
     Connections {
         onFilterChanged: invalidateFilter()
@@ -41,8 +41,7 @@ Item {
     }
 
     function isAcceptedItem(item) {
-        let properties = this.property.split(",")
+        let properties = this.property
-            .map(p => p.trim())
             .filter(p => !!item[p])
 
         if (properties.length === 0 || this.filter.length === 0 || this.cursorPosition === 0) {
@@ -80,7 +79,7 @@ Item {
     }
 
     function isFilteringPropertyOk() {
-        if(this.property === undefined || this.property === "") {
+        if(this.property === undefined || this.property.length === 0) {
             return false
         }
         return true

ui/shared/status/StatusChatInput.qml

@@ -611,7 +611,7 @@ Rectangle {
         width: messageInput.width
         filter: messageInputField.text
         cursorPosition: messageInputField.cursorPosition
-        property: "ensName, localNickname, alias"
+        property: ["ensName", "localNickname", "alias"]
         onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
             const hasEmoji = Emoji.hasEmoji(messageInputField.text)