feat: part of Emoji Reaction final design (#19140)

jrainville · web-flow · commit b8294d077479 · 2025-11-14T10:27:10.000-05:00
* fix(EmojiPopup): add selected emoji to recentEmoji model

* refactor(EmojiPopup): only pass the needed props instead of all settings

* feat(emoji): show recent emojis in the message context menu

* fix(emojis): fix recentEmojis and skinTone not being properly saved

The issue was that we set the property, which just overwrote the property and removed the link to the Setting.

* feat(emojis): add button to open emoji popup in the message context menu

* chore(emojis): remove no longer needed default emoji reactions model

* fix(emoji): show basic emojis if there are no recent emojis
diff --git a/src/app/modules/main/chat_section/chat_content/input_area/view.nim b/src/app/modules/main/chat_section/chat_content/input_area/view.nim
@@ -4,7 +4,6 @@ import ./preserved_properties
 import ./urls_model
 import ../../../../../../app/modules/shared_models/link_preview_model as link_preview_model
 import ../../../../../../app/modules/shared_models/payment_request_model as payment_request_model
-import ../../../../../../app/modules/shared_models/default_emoji_reactions_model as default_emoji_reactions_model
 
 QtObject:
   type
@@ -20,8 +19,6 @@ QtObject:
       urlsModelVariant: QVariant
       sendingInProgress: bool
       askToEnableLinkPreview: bool
-      defaultEmojiReactionsModel: default_emoji_reactions_model.Model
-      defaultEmojiReactionsModelVariant: QVariant
 
   proc setSendingInProgress*(self: View, value: bool)
 
@@ -39,8 +36,6 @@ QtObject:
     result.urlsModel = newUrlsModel()
     result.urlsModelVariant = newQVariant(result.urlsModel)
     result.askToEnableLinkPreview = false
-    result.defaultEmojiReactionsModel = newDefaultEmojiReactionsModel()
-    result.defaultEmojiReactionsModelVariant = newQVariant(result.defaultEmojiReactionsModel)
 
   proc load*(self: View) =
     self.delegate.viewDidLoad()
diff --git a/src/app/modules/shared_models/default_emoji_reactions_model.nim b/src/app/modules/shared_models/default_emoji_reactions_model.nim
diff --git a/src/app/modules/shared_models/message_item.nim b/src/app/modules/shared_models/message_item.nim
@@ -7,7 +7,6 @@ import ../../../app_service/service/message/dto/link_preview
 import ../../../app_service/service/message/dto/payment_request
 import ./link_preview_model as link_preview_model
 import ./payment_request_model as payment_request_model
-import ./default_emoji_reactions_model as default_emoji_reactions_model
 
 export types.ContentType
 import message_reaction_model, message_transaction_parameters_item
@@ -53,7 +52,6 @@ type
     deletedByContactDetails: ContactDetails
     links: seq[string]
     linkPreviewModel: link_preview_model.Model
-    defaultEmojiReactionsModel: default_emoji_reactions_model.Model
     transactionParameters: TransactionParametersItem
     mentionedUsersPks: seq[string]
     senderTrustStatus: TrustStatus
@@ -172,7 +170,6 @@ proc initMessageItem*(
     result.pinned = true
   result.links = links
   result.linkPreviewModel = newLinkPreviewModel(linkPreviews)
-  result.defaultEmojiReactionsModel = newDefaultEmojiReactionsModel()
   result.transactionParameters = transactionParameters
   result.mentionedUsersPks = mentionedUsersPks
   result.gapFrom = 0
@@ -515,11 +512,9 @@ proc getReactionId*(self: Item, emoji: string, userPublicKey: string): string =
 proc addReaction*(self: Item, emoji: string, didIReactWithThisEmoji: bool, userPublicKey: string,
   userDisplayName: string, reactionId: string) =
   self.reactionsModel.addReaction(emoji, didIReactWithThisEmoji, userPublicKey, userDisplayName, reactionId)
-  self.defaultEmojiReactionsModel.setItemDidIReactWithThisEmoji(emoji, didIReactWithThisEmoji)
 
 proc removeReaction*(self: Item, emoji: string, reactionId: string, didIRemoveThisReaction: bool) =
   self.reactionsModel.removeReaction(emoji, reactionId, didIRemoveThisReaction)
-  self.defaultEmojiReactionsModel.setItemDidIReactWithThisEmoji(emoji, not didIRemoveThisReaction)
 
 proc messageAttachments*(self: Item): seq[string] {.inline.} =
   self.messageAttachments
@@ -536,9 +531,6 @@ proc linkPreviewModel*(self: Item): link_preview_model.Model {.inline.} =
 proc paymentRequestModel*(self: Item): payment_request_model.Model {.inline.} =
   return self.paymentRequestModel
 
-proc defaultEmojiReactionsModel*(self: Item): default_emoji_reactions_model.Model {.inline.} =
-  return self.defaultEmojiReactionsModel
-
 proc mentionedUsersPks*(self: Item): seq[string] {.inline.} =
   self.mentionedUsersPks
 
diff --git a/src/app/modules/shared_models/message_model.nim b/src/app/modules/shared_models/message_model.nim
@@ -50,7 +50,6 @@ type
     DeletedByContactIcon
     Links
     LinkPreviewModel
-    DefaultEmojiReactionsModel
     TransactionParameters
     MentionedUsersPks
     SenderTrustStatus
@@ -161,7 +160,6 @@ QtObject:
       ModelRole.DeletedByContactIcon.int: "deletedByContactIcon",
       ModelRole.Links.int: "links",
       ModelRole.LinkPreviewModel.int: "linkPreviewModel",
-      ModelRole.DefaultEmojiReactionsModel.int: "defaultEmojiReactionsModel",
       ModelRole.TransactionParameters.int: "transactionParameters",
       ModelRole.MentionedUsersPks.int: "mentionedUsersPks",
       ModelRole.SenderTrustStatus.int: "senderTrustStatus",
@@ -331,8 +329,6 @@ QtObject:
       result = newQVariant(item.links.join(" "))
     of ModelRole.LinkPreviewModel:
       result = newQVariant(item.linkPreviewModel)
-    of ModelRole.DefaultEmojiReactionsModel:
-      result = newQVariant(item.defaultEmojiReactionsModel)
     of ModelRole.TransactionParameters:
       result = newQVariant($(%*{
         "id": item.transactionParameters.id,
diff --git a/storybook/pages/MessageContextMenuViewPage.qml b/storybook/pages/MessageContextMenuViewPage.qml
@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import StatusQ.Core.Theme
+import StatusQ.Core.Utils as StatusQUtils
 
 import Storybook
 
@@ -14,40 +15,6 @@ SplitView {
 
     Logs { id: logs }
 
-    ListModel {
-        id: defaultEmojiReactionsModel
-        ListElement {
-            emoji: "❤️"
-            filename: "emojiReactions/heart"
-            didIReactWithThisEmoji: false
-        }
-        ListElement {
-            emoji: "👍"
-            filename: "emojiReactions/thumbsUp"
-            didIReactWithThisEmoji: false
-        }
-        ListElement {
-            emoji: "👎"
-            filename: "emojiReactions/thumbsDown"
-            didIReactWithThisEmoji: false
-        }
-        ListElement {
-            emoji: "😂"
-            filename: "emojiReactions/laughing"
-            didIReactWithThisEmoji: false
-        }
-        ListElement {
-            emoji: "😢"
-            filename: "emojiReactions/sad"
-            didIReactWithThisEmoji: false
-        }
-        ListElement {
-            emoji: "😡"
-            filename: "emojiReactions/angry"
-            didIReactWithThisEmoji: false
-        }
-    }
-
     SplitView {
         orientation: Qt.Vertical
         SplitView.fillWidth: true
@@ -70,7 +37,10 @@ SplitView {
                 closePolicy: Popup.NoAutoClose
 
                 messageId: "Oxdeadbeef"
-                defaultEmojiReactionsModel: defaultEmojiReactionsModel
+                emojiModel: StatusQUtils.Emoji.emojiModel
+                // Should still show only 5 emojis even if more are provided
+                recentEmojis: ["1f9de", "1f6fa", "1f44d", "1f44e", "1f602", "1f622", "1f621"]
+                skinColor: ""
                 messageContentType: Constants.messageContentType.messageType
                 chatType: Constants.chatType.oneToOne
                 isDebugEnabled: isDebugEnabledCheckBox.checked
diff --git a/storybook/pages/StatusEmojiPopupPage.qml b/storybook/pages/StatusEmojiPopupPage.qml
@@ -56,7 +56,8 @@ SplitView {
             height: 440
             visible: true
             modal: false
-            settings: settings
+            recentEmojis: settings.recentEmojis
+            skinColor: settings.skinColor
             emojiModel: StatusQUtils.Emoji.emojiModel
             onEmojiSelected: function(emoji, atCu, hexcode) {
                 logs.logEvent("onEmojiSelected", ["emoji", "atCu", "hexcode"], arguments)
diff --git a/test/e2e/tests/crtitical_tests_prs/test_messaging_1x1_chat.py b/test/e2e/tests/crtitical_tests_prs/test_messaging_1x1_chat.py
@@ -38,7 +38,8 @@ def test_1x1_chat_add_contact_in_settings(multiple_instances):
     local_picture = configs.testpath.TEST_IMAGES / 'comm_logo.jpeg'
     picture = BASE_64_IMAGE_JPEG
 
-    EMOJI_PATHES = ["❤️", "👍", "👎", "😂", "😢", "😡"]
+    # First five emojis in the reactions before there are custom ones
+    EMOJI_PATHES = ["😀", "😃", "😄", "😁", "😆"]
 
     with (multiple_instances(user_data=None) as aut_one, multiple_instances(user_data=None) as aut_two):
         with step(f'Launch multiple instances with authorized users {user_one.name} and {user_two.name}'):
@@ -186,7 +187,7 @@ def test_1x1_chat_add_contact_in_settings(multiple_instances):
                 f"Last message does not have reply corner"
 
         with step(f'User {user_one.name}, add reaction to the last message and verify it was added'):
-            occurrence = random.randint(1, 6)
+            occurrence = random.randint(1, 5)
             message.open_context_menu_for_message().add_reaction_to_message(occurrence)
             assert driver.waitFor(lambda: EMOJI_PATHES[occurrence - 1] in str(message.get_emoji_reactions_pathes()[0]),
                                   timeout), \
diff --git a/ui/app/AppLayouts/Chat/stores/RootStore.qml b/ui/app/AppLayouts/Chat/stores/RootStore.qml
@@ -295,8 +295,6 @@ QtObject {
 
     property MessageStore messageStore: MessageStore { }
 
-    property var defaultEmojiReactionsModel
-
     property var globalUtilsInst: globalUtils
 
     property var mainModuleInst: mainModule
diff --git a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
@@ -348,7 +348,6 @@ Item {
             pinnedMessage: model.pinned
             messagePinnedBy: model.pinnedBy
             reactionsModel: model.reactions
-            defaultEmojiReactionsModel: model.defaultEmojiReactionsModel
             sticker: model.sticker
             stickerPack: model.stickerPack
             editModeOn: model.editMode
diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml
@@ -105,7 +105,6 @@ Item {
         contactsStore: appMain.contactsStore
         currencyStore: appMain.currencyStore
         communityTokensStore: appMain.communityTokensStore
-        defaultEmojiReactionsModel: appMain.rootStore.defaultEmojiReactionsModel
         openCreateChat: createChatView.opened
         networkConnectionStore: appMain.networkConnectionStore
     }
@@ -1179,8 +1178,11 @@ Item {
         sourceComponent: StatusEmojiPopup {
             directParent: appMain.Window.window.contentItem
             height: 440
-            settings: appMainLocalSettings
+            recentEmojis: appMainLocalSettings.recentEmojis
+            skinColor: appMainLocalSettings.skinColor
             emojiModel: SQUtils.Emoji.emojiModel
+            onSetSkinColorRequested: color => appMainLocalSettings.skinColor = color
+            onSetRecentEmojisRequested: recentEmojis => appMainLocalSettings.recentEmojis = recentEmojis
         }
     }
 
@@ -1907,7 +1909,6 @@ Item {
                                 contactsStore: appMain.contactsStore
                                 currencyStore: appMain.currencyStore
                                 communityTokensStore: appMain.communityTokensStore
-                                defaultEmojiReactionsModel: appMain.rootStore.defaultEmojiReactionsModel
                                 openCreateChat: createChatView.opened
                                 networkConnectionStore: appMain.networkConnectionStore
                                 isChatSectionModule: true
@@ -2230,7 +2231,6 @@ Item {
                             contactsStore: appMain.contactsStore
                             currencyStore: appMain.currencyStore
                             communityTokensStore: appMain.communityTokensStore
-                            defaultEmojiReactionsModel: appMain.rootStore.defaultEmojiReactionsModel
                             openCreateChat: createChatView.opened
                             walletStore: WalletStores.RootStore
                             isChatSectionModule: true
@@ -2307,7 +2307,6 @@ Item {
                                 contactsStore: appMain.contactsStore
                                 currencyStore: appMain.currencyStore
                                 communityTokensStore: appMain.communityTokensStore
-                                defaultEmojiReactionsModel: appMain.rootStore.defaultEmojiReactionsModel
                                 openCreateChat: createChatView.opened
                                 isChatSectionModule: false
                                 communityId: model.id
@@ -2378,7 +2377,6 @@ Item {
                         contactsStore: appMain.contactsStore
                         currencyStore: appMain.currencyStore
                         communityTokensStore: appMain.communityTokensStore
-                        defaultEmojiReactionsModel: appMain.rootStore.defaultEmojiReactionsModel
                         openCreateChat: createChatView.opened
                         isChatSectionModule: true
                     }
diff --git a/ui/imports/shared/controls/chat/EmojiReaction.qml b/ui/imports/shared/controls/chat/EmojiReaction.qml
@@ -2,32 +2,33 @@ import QtQuick
 
 import StatusQ.Core
 import StatusQ.Core.Theme
+import StatusQ.Components
 
 import utils
 import shared
 import shared.panels
 
 Rectangle {
-    property alias source: reactionImage.source
-    property string emoji
+    required property string emojiId
     property bool reactedByUser: false
     property bool isHovered: false
-    signal closeModal()
+    signal toggleReaction()
 
     id: root
-    width: reactionImage.width + Theme.halfPadding
+    width: statusEmoji.width + Theme.halfPadding
     height: width
     color: reactedByUser ? Theme.palette.secondaryBackground :
                            (isHovered ? Theme.palette.backgroundHover : Theme.palette.transparent)
     border.width: reactedByUser ? 1 : 0
     border.color: Theme.palette.primaryColor1
     radius: Theme.radius
 
-    SVGImage {
-        id: reactionImage
-        width: 32
-        fillMode: Image.PreserveAspectFit
+    StatusEmoji {
+        id: statusEmoji
         anchors.centerIn: parent
+        width: Theme.fontSize20
+        height: Theme.fontSize20
+        emojiId: root.emojiId
     }
 
     StatusMouseArea {
@@ -36,8 +37,6 @@ Rectangle {
         hoverEnabled: !reactedByUser
         onEntered: root.isHovered = true
         onExited: root.isHovered = false
-        onClicked: {
-            root.closeModal();
-        }
+        onClicked: root.toggleReaction()
     }
 }
diff --git a/ui/imports/shared/controls/chat/MessageReactionsRow.qml b/ui/imports/shared/controls/chat/MessageReactionsRow.qml
diff --git a/ui/imports/shared/status/StatusEmojiPopup.qml b/ui/imports/shared/status/StatusEmojiPopup.qml
diff --git a/ui/imports/shared/views/chat/MessageContextMenuView.qml b/ui/imports/shared/views/chat/MessageContextMenuView.qml
diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml
