feat(@desktop/chat): allow for entering ENS names manually

This commit enables users to enter fully qualified ENS names manually
and marking them as mentions, which are then later being replaced with
pubkeys.

The changes do not prevent users from entering ENS names that don't exist.

There's also a fix that ensure prepended "@" signs are removed from the
items selected in the suggestions box.

Closes #3149

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

@@ -33,6 +33,7 @@ Rectangle {
     property alias suggestionsModel: filterItem.model
     property alias filter: filterItem.filter
     property alias formattedPlainTextFilter: filterItem.formattedFilter
+    property alias suggestionFilter: filterItem
     property alias property: filterItem.property
     property int cursorPosition
     signal itemSelected(var item, int lastAtPosition, int lastCursorPosition)

ui/shared/status/StatusChatInput.qml

@@ -105,6 +105,22 @@ Rectangle {
         }
     }
 
+    function insertMention(aliasName, lastAtPosition, lastCursorPosition) {
+        const hasEmoji = Emoji.hasEmoji(messageInputField.text)
+        const spanPlusAlias = `${Constants.mentionSpanTag}@${aliasName}</span> `
+
+        let rightIndex = hasEmoji ? lastCursorPosition + 2 : lastCursorPosition
+
+        messageInputField.remove(lastAtPosition, rightIndex)
+        messageInputField.insert(lastAtPosition, spanPlusAlias)
+        messageInputField.cursorPosition = lastAtPosition + aliasName.length + 2
+
+        if (messageInputField.cursorPosition === 0) {
+            // It reset to 0 for some reason, go back to the end
+            messageInputField.cursorPosition = messageInputField.length
+        }
+    }
+
     property var interpretMessage: function (msg) {
         if (msg.startsWith("/shrug")) {
             return  msg.replace("/shrug", "") + " ¯\\\\\\_(ツ)\\_/¯"
@@ -208,6 +224,13 @@ Rectangle {
         }
 
         isColonPressed = (event.key === Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);
+
+        if (event.key === Qt.Key_Space && suggestionsBox.formattedPlainTextFilter.length > 1 && suggestionsBox.formattedPlainTextFilter.trim().split(" ").length === 1) {
+            let aliasName = suggestionsBox.formattedPlainTextFilter
+            let lastCursorPosition = suggestionsBox.suggestionFilter.cursorPosition
+            let lastAtPosition = suggestionsBox.suggestionFilter.lastAtPosition
+            insertMention(aliasName, lastAtPosition, lastCursorPosition)
+        }
     }
 
     function wrapSelection(wrapWith) {
@@ -586,28 +609,12 @@ Rectangle {
         cursorPosition: messageInputField.cursorPosition
         property: ["userName", "localName", "alias"]
         onItemSelected: function (item, lastAtPosition, lastCursorPosition) {
-            const hasEmoji = Emoji.hasEmoji(messageInputField.text)
-
             const properties = "userName, alias"; // Ignore localName
-
             let aliasName = item[properties.split(",").map(p => p.trim()).find(p => !!item[p])]
+            aliasName = aliasName.replace("@", "")
             aliasName = aliasName.replace(/(\.stateofus)?\.eth/, "")
 
-            const spanPlusAlias = `${Constants.mentionSpanTag}@${aliasName}</span> `
+            insertMention(aliasName, lastAtPosition, lastCursorPosition)
-
-            let rightIndex = hasEmoji ? lastCursorPosition + 2 : lastCursorPosition
-
-            messageInputField.remove(lastAtPosition, rightIndex)
-
-            messageInputField.insert(lastAtPosition, spanPlusAlias)
-
-
-            messageInputField.cursorPosition = lastAtPosition + aliasName.length + 2
-            if (messageInputField.cursorPosition === 0) {
-                // It reset to 0 for some reason, go back to the end
-                messageInputField.cursorPosition = messageInputField.length
-            }
-
             suggestionsBox.suggestionsModel.clear()
         }
     }