feat: add emoji search

(cherry picked from commit 3cc9a98ce584a48f6c430a57126bd548e9dedc7e)

ui/app/AppLayouts/Chat/components/EmojiPopup.qml

@@ -11,6 +11,7 @@ import "./emojiList.js" as EmojiJSON
 Popup {
     property var addToChat: function () {}
     property var categories: []
+    property string searchString: searchBox.text
 
     id: popup
     modal: false
@@ -40,7 +41,6 @@ Popup {
                 categoryNames[emoji.category] = newCategories.length
                 newCategories.push([])
             }
-
             newCategories[categoryNames[emoji.category]].push(emoji)
         })
         if (newCategories[categoryNames.recent].length === 0) {
@@ -53,6 +53,10 @@ Popup {
         categories = newCategories
     }
 
+    onOpened: {
+        searchBox.forceActiveFocus(Qt.MouseFocusReason)
+    }
+
     contentItem: ColumnLayout {
         anchors.fill: parent
         spacing: 0
@@ -146,7 +150,9 @@ Popup {
                 id: emojiSectionsRepeater
                 model: popup.categories
 
-                EmojiSection {}
+                EmojiSection {
+                    searchString: popup.searchString
+                }
             }
         }
 

ui/app/AppLayouts/Chat/components/EmojiSection.qml

@@ -5,16 +5,22 @@ import "../../../../shared"
 
 
 Item {
+    property string searchString: ""
+    property string searchStringLowercase: searchString.toLowerCase()
     property int imageWidth: 26
     property int imageMargin: 4
+    property var emojis: []
+    property var allEmojis: []
 
     id: emojiSection
+    visible: emojis.length > 0 || !!(modelData && modelData.length && modelData[0].empty && searchString === "")
 
     anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
     anchors.topMargin: index === 0 ? 0 : Style.current.padding
 
     width: parent.width
-    height: childrenRect.height + Style.current.padding
+    // childrenRect caused a binding loop here
+      height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
 
     StyledText {
         id: categoryText
@@ -24,6 +30,7 @@ Item {
     }
 
     StyledText {
+        id: noRecentText
         visible: !!(modelData && modelData.length && modelData[0].empty)
         text: qsTr("No recent emojis")
         color: Style.current.darkGrey
@@ -32,17 +39,35 @@ Item {
         anchors.topMargin: Style.current.smallPadding
     }
 
+    onSearchStringLowercaseChanged: {
+        if (emojiSection.searchStringLowercase === "") {
+            this.emojis = this.allEmojis
+            return
+        }
+        this.emojis = this.allEmojis.filter(function (emoji) {
+            return emoji.name.includes(emojiSection.searchStringLowercase) ||
+                    emoji.shortname.includes(emojiSection.searchStringLowercase) ||
+                    emoji.aliases.some(a => a.includes(emojiSection.searchStringLowercase))
+        })
+    }
+
     Component.onCompleted: {
+        var myEmojis = []
         modelData.forEach(function (emoji) {
             if (emoji.empty) {
                 return
             }
-            emojiModel.append({filename: emoji.unicode + '.png'})
+            myEmojis.push({
+                              filename: emoji.unicode + '.png',
+                              name: emoji.name,
+                              shortname: emoji.shortname,
+                              name: emoji.name,
+                              aliases: emoji.aliases
                           })
-    }
-
-    ListModel {
-        id: emojiModel
+        })
+        // We use two arrays for filtering purposes
+        this.emojis = myEmojis
+        this.allEmojis = myEmojis
     }
 
     GridView {
@@ -54,12 +79,13 @@ Item {
         visible: count > 0
         cellWidth: emojiSection.imageWidth + emojiSection.imageMargin * 2
         cellHeight: emojiSection.imageWidth + emojiSection.imageMargin * 2
-        model: emojiModel
+        model: emojiSection.emojis
         focus: true
         clip: true
         interactive: false
 
         delegate: Item {
+            id: emojiContainer
             width: emojiGrid.cellWidth
             height: emojiGrid.cellHeight
 
@@ -71,14 +97,14 @@ Item {
                 SVGImage {
                     width: emojiSection.imageWidth
                     height: emojiSection.imageWidth
-                    source: "../../../../imports/twemoji/26x26/" + filename
+                    source: "../../../../imports/twemoji/26x26/" + modelData.filename
 
                     MouseArea {
                         cursorShape: Qt.PointingHandCursor
                         anchors.fill: parent
                         onClicked: {
-                            const extenstionIndex = filename.lastIndexOf('.');
-                            let iconCodePoint = filename
+                            const extenstionIndex = modelData.filename.lastIndexOf('.');
+                            let iconCodePoint = modelData.filename
                             if (extenstionIndex > -1) {
                                 iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
                             }