feat: see stickers details when clicking on a sticker

src/app/chat/views/message_list.nim

@@ -36,6 +36,7 @@ type
     LocalName = UserRole + 26
     CommunityId = UserRole + 27
     HasMention = UserRole + 28
+    StickerPackId = UserRole + 29
 
 QtObject:
   type
@@ -142,6 +143,7 @@ QtObject:
       of ChatMessageRoles.IsCurrentUser: result = newQVariant(message.isCurrentUser)
       of ChatMessageRoles.ContentType: result = newQVariant(message.contentType.int)
       of ChatMessageRoles.Sticker: result = newQVariant(message.stickerHash.decodeContentHash())
+      of ChatMessageRoles.StickerPackId: result = newQVariant(message.stickerPackId)
       of ChatMessageRoles.FromAuthor: result = newQVariant(message.fromAuthor)
       of ChatMessageRoles.ChatId: result = newQVariant(message.chatId)
       of ChatMessageRoles.SectionIdentifier: result = newQVariant(sectionIdentifier(message))
@@ -199,7 +201,8 @@ QtObject:
       ChatMessageRoles.CommunityId.int: "communityId",
       ChatMessageRoles.Alias.int:"alias",
       ChatMessageRoles.HasMention.int:"hasMention",
-      ChatMessageRoles.LocalName.int:"localName"
+      ChatMessageRoles.LocalName.int:"localName",
+      ChatMessageRoles.StickerPackId.int:"stickerPackId"
     }.toTable
 
   proc getMessageIndex(self: ChatMessageList, messageId: string): int {.slot.} =

src/app/chat/views/sticker_pack_list.nim

@@ -22,6 +22,7 @@ QtObject:
   type
     StickerPackList* = ref object of QAbstractListModel
       packs*: seq[StickerPackView]
+      packIdToRetrieve*: int
 
   proc setup(self: StickerPackList) = self.QAbstractListModel.setup
 
@@ -75,7 +76,7 @@ QtObject:
     }.toTable
 
 
-  proc findIndexById*(self: StickerPackList, packId: int, mustBeInstalled: bool = false): int =
+  proc findIndexById*(self: StickerPackList, packId: int, mustBeInstalled: bool = false): int {.slot.} =
     result = -1
     var idx = -1
     for item in self.packs:
@@ -116,3 +117,30 @@ QtObject:
         it.pending = pending)
 
     self.dataChanged(topLeft, bottomRight, @[StickerPackRoles.Installed.int, StickerPackRoles.Pending.int])
+
+
+
+  proc getStickers*(self: StickerPackList): QVariant {.slot.} =
+    let packInfo = self.packs[self.packIdToRetrieve]
+    result = newQVariant(packInfo.stickers)
+  
+  proc rowData*(self: StickerPackList, row: int, data: string): string {.slot.} =
+    if row < 0 or (row > self.packs.len - 1):
+      return
+    self.packIdToRetrieve = row
+    let packInfo = self.packs[row]
+    let stickerPack = packInfo.pack
+    case data:
+      of "author": result = stickerPack.author
+      of "name": result = stickerPack.name
+      of "price": result = $stickerPack.price.wei2Eth
+      of "preview": result = decodeContentHash(stickerPack.preview)
+      of "thumbnail": result = decodeContentHash(stickerPack.thumbnail)
+      of "installed": result = $packInfo.installed
+      of "bought": result = $packInfo.bought
+      of "pending": result = $packInfo.pending
+      else: result = ""
+
+
+    
+

src/status/chat/message.nim

@@ -52,6 +52,7 @@ type Message* = object
   rtl*: bool              # ???
   seen*: bool             # ???
   sticker*: string
+  stickerPackId*: int
   text*: string
   timestamp*: string
   whisperTimestamp*: string

src/status/signals/messages.nim

@@ -267,6 +267,7 @@ proc toMessage*(jsonMsg: JsonNode, pk: string): Message =
       outgoingStatus: $jsonMsg{"outgoingStatus"}.getStr,
       isCurrentUser: $jsonMsg{"outgoingStatus"}.getStr == "sending" or $jsonMsg{"outgoingStatus"}.getStr == "sent",
       stickerHash: "",
+      stickerPackId: -1,
       parsedText: @[],
       linkUrls: "",
       image: $jsonMsg{"image"}.getStr,
@@ -287,6 +288,7 @@ proc toMessage*(jsonMsg: JsonNode, pk: string): Message =
 
   if message.contentType == ContentType.Sticker:
     message.stickerHash = jsonMsg["sticker"]["hash"].getStr
+    message.stickerPackId = jsonMsg["sticker"]["pack"].getInt
 
   if message.contentType == ContentType.Transaction:
     let

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

@@ -289,6 +289,7 @@ ScrollView {
             linkUrls: model.linkUrls
             communityId: model.communityId
             hasMention: model.hasMention
+            stickerPackId: model.stickerPackId
             prevMessageIndex: {
                 // This is used in order to have access to the previous message and determine the timestamp
                 // we can't rely on the index because the sequence of messages is not ordered on the nim side

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

@@ -27,6 +27,7 @@ Item {
     property string linkUrls: ""
     property bool placeholderMessage: false
     property string communityId: ""
+    property int stickerPackId: -1
 
     property string authorCurrentMsg: "authorCurrentMsg"
     property string authorPrevMsg: "authorPrevMsg"
@@ -129,6 +130,7 @@ Item {
         if (!isProfileClick) {
             SelectedMessage.set(messageId, fromAuthor);
         }
+
         // Get contact nickname
         let nickname = appMain.getUserNickname(fromAuthor)
         messageContextMenu.linkUrls = root.linkUrls

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

@@ -15,7 +15,8 @@ MouseArea {
             }
             return;
         }
-        if (mouse.button & Qt.LeftButton) {                
+        if (mouse.button & Qt.LeftButton && isSticker && stickersLoaded) {
+            openPopup(statusStickerPackClickPopup, {packId: stickerPackId} )
             return;
         }
     }

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import Qt.labs.settings 1.0
 import "../../../imports"
 import "../../../shared"
+import "../../../shared/status"
 import "."
 import "components"
 
@@ -11,6 +12,14 @@ SplitView {
     handle: SplitViewHandle {}
 
     property alias chatColumn: chatColumn
+    property bool stickersLoaded: false
+
+    Connections {
+        target: chatsModel.stickers
+        onStickerPacksLoaded: {
+            stickersLoaded = true;
+        }
+    }
 
     property var onActivated: function () {
         chatsModel.restorePreviousActiveChannel()
@@ -85,6 +94,15 @@ SplitView {
         chatGroupsListViewCount: contactColumnLoader.item.chatGroupsListViewCount
     }
 
+    Component {
+        id: statusStickerPackClickPopup
+        StatusStickerPackClickPopup{
+            onClosed: {
+                destroy();
+            }
+        }
+    }
+
     function openProfilePopup(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam, parentPopup){
         var popup = profilePopupComponent.createObject(chatView);
         if(parentPopup){

ui/shared/status/StatusStickerPackClickPopup.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+import "../../imports"
+import "../../shared"
+import "../../shared/status"
+import "../../app/AppLayouts/Chat/ChatColumn/samples"
+
+ModalPopup {
+    id: stickerPackDetailsPopup
+
+    property int packId: -1
+
+    property string thumbnail: ""
+    property string name: ""
+    property string author: ""
+    property string price: ""
+    property bool installed: false;
+    property bool bought: false;
+    property bool pending: false;
+    property var stickers;
+
+    Component.onCompleted: {
+        const idx = chatsModel.stickers.stickerPacks.findIndexById(packId, false);
+        if(idx === -1) close();
+        name = chatsModel.stickers.stickerPacks.rowData(idx, "name")
+        author = chatsModel.stickers.stickerPacks.rowData(idx, "author")
+        thumbnail = chatsModel.stickers.stickerPacks.rowData(idx, "thumbnail")
+        price = chatsModel.stickers.stickerPacks.rowData(idx, "price")
+        stickers = chatsModel.stickers.stickerPacks.getStickers()
+        installed = chatsModel.stickers.stickerPacks.rowData(idx, "installed") === "true"
+        bought = chatsModel.stickers.stickerPacks.rowData(idx, "bought") === "true"
+        pending = chatsModel.stickers.stickerPacks.rowData(idx, "pending") === "true"
+    }
+
+    height: 472
+    header: StatusStickerPackDetails {
+        id: stickerGrid
+        height: 46
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.topMargin: Style.current.padding
+        width: parent.width - (Style.current.padding * 2)
+        packThumb: thumbnail
+        packName: name
+        packAuthor: author
+        packNameFontSize: 17
+        spacing: Style.current.padding / 2
+    }
+    footer: StatusStickerButton {
+        height: 76
+        anchors.right: parent.right
+        style: StatusStickerButton.StyleType.LargeNoIcon
+        packPrice: price
+        isInstalled: installed
+        isBought: bought
+        isPending: pending
+        onInstallClicked: {
+            chatsModel.stickers.install(packId);
+            stickerPackDetailsPopup.close();
+        }
+        onUninstallClicked: {
+            chatsModel.stickers.uninstall(packId);
+            stickerPackDetailsPopup.close();
+        }
+        onCancelClicked: function(){}
+        onUpdateClicked: function(){}
+        onBuyClicked: {
+            openPopup(stickerPackPurchaseModal)
+            root.buyClicked(packId)
+        }
+    }
+    contentWrapper.anchors.topMargin: 0
+    contentWrapper.anchors.bottomMargin: 0
+    StatusStickerList {
+        id: stickerGridInPopup
+        model: stickers
+        height: 350
+        Component {
+        id: stickerPackPurchaseModal
+        StatusStickerPackPurchaseModal {
+            onClosed: {
+                destroy()
+            }
+            stickerPackId: packId
+            packPrice: price
+            width: stickerPackDetailsPopup.width
+            height: stickerPackDetailsPopup.height
+            showBackBtn: stickerPackDetailsPopup.opened
+        }
+    }
+    }
+}