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,8 +115,25 @@ Rectangle {
         property var selectedItem: selectedIndex == -1 ? null : model[selectedIndex]
         signal suggestionClicked(var item)
 
+        DelegateModelGeneralized {
+            id: mentionsListDelegate
+            lessThan: [
+                function(left, right) {
+                    if (!formattedPlainTextFilter) {
+                        return true
+                    }
+
+                    const leftMatches = left[container.property.find(p => !!left[p])].toLowerCase().startsWith(formattedPlainTextFilter)
+
+                    const rightMatches = right[container.property.find(p => !!right[p])].toLowerCase().startsWith(formattedPlainTextFilter)
+
+                    return leftMatches && !rightMatches
+                }
+            ]
+
+            model: container.suggestionsModel
+
             delegate: Rectangle {
-            id: rectangle
                 color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
                 border.width: 0
                 width: parent.width
@@ -127,7 +151,7 @@ Rectangle {
                 }
 
                 StyledText {
-                text: model[container.property.split(",").map(p => p.trim()).find(p => !!model[p])]
+                    text: model[container.property.find(p => !!model[p])]
                     color: Style.current.textColor
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.left: accountImage.right
@@ -148,6 +172,7 @@ Rectangle {
                 }
             }
         }
+    }
 }
 
 

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)