feat: add support for recent emojis

(cherry picked from commit 07ccf8f74ee7b37652ccedbddd6dfdaa5908a846)

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

@@ -32,6 +32,40 @@ Popup {
         }
     }
 
+    function addEmoji(emoji) {
+        const MAX_EMOJI_NUMBER = 36
+        const extenstionIndex = emoji.filename.lastIndexOf('.');
+        let iconCodePoint = emoji.filename
+        if (extenstionIndex > -1) {
+            iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
+        }
+
+        // Split the filename to get all the parts and then encode them from hex to utf8
+        const splitCodePoint = iconCodePoint.split('-')
+        let codePointParts = []
+        splitCodePoint.forEach(function (codePoint) {
+            codePointParts.push(`0x${codePoint}`)
+        })
+        const encodedIcon = String.fromCodePoint(...codePointParts);
+
+        // Add at the  start of the list
+        appSettings.recentEmojis.unshift(emoji)
+        // Remove duplicates
+        appSettings.recentEmojis = appSettings.recentEmojis.filter(function (e, index) {
+            return !appSettings.recentEmojis.some(function (e2, index2) {
+                return index2 < index && e2.filename === e.filename
+            })
+        })
+        if (appSettings.recentEmojis.length > MAX_EMOJI_NUMBER) {
+            //remove last one
+            appSettings.recentEmojis.splice(MAX_EMOJI_NUMBER - 1)
+        }
+        emojiSectionsRepeater.itemAt(0).allEmojis = appSettings.recentEmojis
+
+        popup.addToChat(encodedIcon + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
+        popup.close()
+    }
+
     Component.onCompleted: {
         var categoryNames = {"recent": 0}
         var newCategories = [[]]
@@ -41,8 +75,14 @@ Popup {
                 categoryNames[emoji.category] = newCategories.length
                 newCategories.push([])
             }
-            newCategories[categoryNames[emoji.category]].push(emoji)
+            newCategories[categoryNames[emoji.category]].push(Object.assign({}, emoji, {filename: emoji.unicode + '.png'}))
         })
+
+        // Add recent
+        appSettings.recentEmojis.forEach(function (emoji) {
+            newCategories[categoryNames.recent].push(Object.assign({}, emoji, {category: "recent"}))
+        })
+
         if (newCategories[categoryNames.recent].length === 0) {
             newCategories[categoryNames.recent].push({
                 category: "recent",
@@ -152,6 +192,7 @@ Popup {
 
                 EmojiSection {
                     searchString: popup.searchString
+                    addEmoji: popup.addEmoji
                 }
             }
         }

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

@@ -10,7 +10,8 @@ Item {
     property int imageWidth: 26
     property int imageMargin: 4
     property var emojis: []
-    property var allEmojis: []
+    property var allEmojis: modelData
+    property var addEmoji: function () {}
 
     id: emojiSection
     visible: emojis.length > 0 || !!(modelData && modelData.length && modelData[0].empty && searchString === "")
@@ -31,7 +32,7 @@ Item {
 
     StyledText {
         id: noRecentText
-        visible: !!(modelData && modelData.length && modelData[0].empty)
+        visible: !!(allEmojis && allEmojis.length && allEmojis[0].empty)
         text: qsTr("No recent emojis")
         color: Style.current.darkGrey
         font.pixelSize: 10
@@ -41,33 +42,21 @@ Item {
 
     onSearchStringLowercaseChanged: {
         if (emojiSection.searchStringLowercase === "") {
-            this.emojis = this.allEmojis
+            this.emojis = modelData
             return
         }
-        this.emojis = this.allEmojis.filter(function (emoji) {
+        this.emojis = modelData.filter(function (emoji) {
             return emoji.name.includes(emojiSection.searchStringLowercase) ||
                     emoji.shortname.includes(emojiSection.searchStringLowercase) ||
                     emoji.aliases.some(a => a.includes(emojiSection.searchStringLowercase))
         })
     }
 
-    Component.onCompleted: {
+    onAllEmojisChanged: {
-        var myEmojis = []
+        if (this.allEmojis[0].empty) {
-        modelData.forEach(function (emoji) {
+            return
-            if (emoji.empty) {
+        }
-                return
+        this.emojis = this.allEmojis
-            }
-            myEmojis.push({
-                              filename: emoji.unicode + '.png',
-                              name: emoji.name,
-                              shortname: emoji.shortname,
-                              name: emoji.name,
-                              aliases: emoji.aliases
-                          })
-        })
-        // We use two arrays for filtering purposes
-        this.emojis = myEmojis
-        this.allEmojis = myEmojis
     }
 
     GridView {
@@ -103,21 +92,7 @@ Item {
                         cursorShape: Qt.PointingHandCursor
                         anchors.fill: parent
                         onClicked: {
-                            const extenstionIndex = modelData.filename.lastIndexOf('.');
+                            emojiSection.addEmoji(modelData)
-                            let iconCodePoint = modelData.filename
-                            if (extenstionIndex > -1) {
-                                iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
-                            }
-
-                            // Split the filename to get all the parts and then encode them from hex to utf8
-                            const splitCodePoint = iconCodePoint.split('-')
-                            let codePointParts = []
-                            splitCodePoint.forEach(function (codePoint) {
-                                codePointParts.push(`0x${codePoint}`)
-                            })
-                            const encodedIcon = String.fromCodePoint(...codePointParts);
-                            popup.addToChat(encodedIcon + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
-                            popup.close()
                         }
                     }
                 }

ui/main.qml

@@ -68,6 +68,7 @@ ApplicationWindow {
         property bool displayChatImages: false
         property bool compactMode
         property string locale: "en"
+        property var recentEmojis: []
     }
 
     SystemTrayIcon {