feat: add hover and selected state to the emoji picker

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

@@ -61,6 +61,38 @@ Item {
 
     property string profileImageSource: !placeholderMessage && appMain.getProfileImage(userPubKey, isCurrentUser, useLargeImage) || ""
 
+    property var emojiReactionsModel: {
+        if (!emojiReactions) {
+            return []
+        }
+
+        try {
+            // group by id
+            var allReactions = Object.values(JSON.parse(emojiReactions))
+            var byEmoji = {}
+            allReactions.forEach(function (reaction) {
+                if (!byEmoji[reaction.emojiId]) {
+                    byEmoji[reaction.emojiId] = {
+                        emojiId: reaction.emojiId,
+                        fromAccounts: [],
+                        count: 0,
+                        currentUserReacted: false
+                    }
+                }
+                byEmoji[reaction.emojiId].count++;
+                byEmoji[reaction.emojiId].fromAccounts.push(chatsModel.userNameOrAlias(reaction.from));
+                if (!byEmoji[reaction.emojiId].currentUserReacted && reaction.from === profileModel.profile.pubKey) {
+                    byEmoji[reaction.emojiId].currentUserReacted = true
+                }
+
+            })
+            return Object.values(byEmoji)
+        } catch (e) {
+            console.error('Error parsing emoji reactions', e)
+            return []
+        }
+    }
+
     Connections {
         enabled: !placeholderMessage
         target: profileModel.contacts.list
@@ -96,7 +128,7 @@ Item {
         messageContextMenu.isProfile = !!isProfileClick
         messageContextMenu.isSticker = isSticker
         messageContextMenu.emojiOnly = emojiOnly
-        messageContextMenu.show(userName, fromAuthor, root.profileImageSource || identicon, "", nickname)
+        messageContextMenu.show(userName, fromAuthor, root.profileImageSource || identicon, "", nickname, emojiReactionsModel)
         // Position the center of the menu where the mouse is
         messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -248,7 +248,7 @@ Item {
 
     Loader {
         id: emojiReactionLoader
-        active: emojiReactions !== ""
+        active: emojiReactionsModel.length
         anchors.bottom: messageContainer.bottom
         anchors.bottomMargin: Style.current.smallPadding
         anchors.left: messageContainer.left

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml

@@ -43,38 +43,7 @@ Item {
         Repeater {
             id: reactionRepeater
             width: childrenRect.width
-            model: {
+            model: emojiReactionsModel
-                if (!emojiReactions) {
-                    return []
-                }
-
-                try {
-                    // group by id
-                    var allReactions = Object.values(JSON.parse(emojiReactions))
-                    var byEmoji = {}
-                    allReactions.forEach(function (reaction) {
-                        if (!byEmoji[reaction.emojiId]) {
-                            byEmoji[reaction.emojiId] = {
-                                emojiId: reaction.emojiId,
-                                fromAccounts: [],
-                                count: 0,
-                                currentUserReacted: false
-                            }
-                        }
-                        byEmoji[reaction.emojiId].count++;
-                        byEmoji[reaction.emojiId].fromAccounts.push(chatsModel.userNameOrAlias(reaction.from));
-                        if (!byEmoji[reaction.emojiId].currentUserReacted && reaction.from === profileModel.profile.pubKey) {
-                            byEmoji[reaction.emojiId].currentUserReacted = true
-                        }
-
-                    })
-                    return Object.values(byEmoji)
-                } catch (e) {
-                    console.error('Error parsing emoji reactions', e)
-                    return []
-                }
-
-            }
 
             Rectangle {
                 property bool isHovered: false

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml

@@ -17,4 +17,3 @@ MouseArea {
         }
     }
 }
-

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

@@ -2,19 +2,38 @@ import QtQuick 2.13
 import "../../../../imports"
 import "../../../../shared"
 
-SVGImage {
+Rectangle {
+    property alias source: reactionImage.source
     property var closeModal: function () {}
     property int emojiId
-    id: reactionImage
+    property bool reactedByUser: false
-    width: 32
+    property bool isHovered: value
-    fillMode: Image.PreserveAspectFit
+
+    id: root
+    width: reactionImage.width + Style.current.halfPadding
+    height: width
+    color: reactedByUser ? Style.current.secondaryBackground :
+                           (isHovered ? Style.current.backgroundHover : Style.current.transparent)
+    border.width: reactedByUser ? 1 : 0
+    border.color: Style.current.borderTertiary
+    radius: Style.current.radius
+
+    SVGImage {
+        id: reactionImage
+        width: 32
+        fillMode: Image.PreserveAspectFit
+        anchors.centerIn: parent
+    }
 
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
+        hoverEnabled: !reactedByUser
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
         onClicked: {
             chatsModel.toggleReaction(SelectedMessage.messageId, emojiId)
-            reactionImage.closeModal()
+            root.closeModal()
         }
     }
 }

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

@@ -20,13 +20,22 @@ PopupMenu {
     property string nickname: ""
     property var fromAuthor: ""
     property var text: ""
+    property var emojiReactionsReactedByUser: []
 
-    function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) {
+    function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam, emojiReactionsModel) {
         userName = userNameParam || ""
         nickname = nicknameParam || ""
         fromAuthor = fromAuthorParam || ""
         identicon = identiconParam || ""
         text = textParam || ""
+        let newEmojiReactions = []
+        if (!!emojiReactionsModel) {
+            emojiReactionsModel.forEach(function (emojiReaction) {
+                newEmojiReactions[emojiReaction.emojiId] = emojiReaction.currentUserReacted
+            })
+        }
+        emojiReactionsReactedByUser = newEmojiReactions
+
         popup();
     }
 
@@ -48,6 +57,7 @@ PopupMenu {
                 delegate: EmojiReaction {
                     source: "../../../img/" + filename
                     emojiId: model.emojiId
+                    reactedByUser: !!messageContextMenu.emojiReactionsReactedByUser[model.emojiId]
                     closeModal: function () {
                         messageContextMenu.close()
                     }