refactor(@desktop/chat-messages): pin/unpin messages and pinned messages list updated

src/app/modules/main/chat_section/chat_content/module.nim

@@ -130,7 +130,7 @@ proc buildPinnedMessageItem(self: Module, messageId: string, item: var pinned_ms
 
   let contactDetails = self.controller.getContactDetails(m.`from`)
     
-  var item = initItem(
+  item = pinned_msg_item.initItem(
     m.id,
     m.responseTo,
     m.`from`,
@@ -157,7 +157,7 @@ proc buildPinnedMessageItem(self: Module, messageId: string, item: var pinned_ms
   return true
 
 method newPinnedMessagesLoaded*(self: Module, pinnedMessages: seq[PinnedMessageDto]) = 
-  var viewItems: seq[Item] 
+  var viewItems: seq[pinned_msg_item.Item] 
   for p in pinnedMessages:
     var item: pinned_msg_item.Item
     if(not self.buildPinnedMessageItem(p.message.id, item)):

src/app/modules/shared_models/message_model.nim

@@ -145,6 +145,9 @@ QtObject:
     return -1
 
   proc prependItems*(self: Model, items: seq[Item]) =
+    if(items.len == 0):
+      return
+      
     let parentModelIndex = newQModelIndex()
     defer: parentModelIndex.delete
 

src/app_service/service/message/service.nim

@@ -194,20 +194,23 @@ QtObject:
 
   proc pinUnpinMessage*(self: Service, chatId: string, messageId: string, pin: bool) =
     try:
-      let response = status_go.pinUnpinMessage(messageId, chatId, pin)
+      let response = status_go.pinUnpinMessage(chatId, messageId, pin)
       
       var pinMessagesObj: JsonNode
       if(response.result.getProp("pinMessages", pinMessagesObj)):
-        let data = MessagePinUnpinArgs(chatId: chatId, messageId: messageId)
+        let pinnedMessagesArr = pinMessagesObj.getElems()
-        var pinned = false
+        if(pinnedMessagesArr.len > 0): # an array is returned
-        if(pinMessagesObj.getProp("pinned", pinned)):
+          let pinMessageObj = pinnedMessagesArr[0]
-          if(pinned and pin):
+          let data = MessagePinUnpinArgs(chatId: chatId, messageId: messageId)
-            self.numOfPinnedMessagesPerChat[chatId] = self.numOfPinnedMessagesPerChat[chatId] + 1
+          var pinned = false
-            self.events.emit(SIGNAL_MESSAGE_PINNED, data)
+          if(pinMessageObj.getProp("pinned", pinned)):
-        else:
+            if(pinned and pin):
-          if(not pinned and not pin):
+              self.numOfPinnedMessagesPerChat[chatId] = self.numOfPinnedMessagesPerChat[chatId] + 1
-            self.numOfPinnedMessagesPerChat[chatId] = self.numOfPinnedMessagesPerChat[chatId] - 1
+              self.events.emit(SIGNAL_MESSAGE_PINNED, data)
-            self.events.emit(SIGNAL_MESSAGE_UNPINNED, data)
+          else:
+            if(not pinned and not pin):
+              self.numOfPinnedMessagesPerChat[chatId] = self.numOfPinnedMessagesPerChat[chatId] - 1
+              self.events.emit(SIGNAL_MESSAGE_UNPINNED, data)
 
     except Exception as e:
       error "error: ", methodName="pinUnpinMessage", errName = e.name, errDesription = e.msg

ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml

@@ -17,26 +17,13 @@ import StatusQ.Controls 0.1 as StatusQControls
 
 // TODO: replace with StatusMOdal
 ModalPopup {
-    property var rootStore
+    id: popup
+
     property var messageStore
-    property var chatSectionModule
+    property var pinnedMessagesModel //this doesn't belong to the messageStore, it is a part of the ChatContentStore, but we didn't introduce it yet.
-    property bool userCanPin: {
-        // Not Refactored Yet
-        return false
-//        switch (popup.rootStore.chatsModelInst.channelView.activeChannel.chatType) {
-//        case Constants.chatType.publicChat: return false
-//        case Constants.chatType.profile: return false
-//        case Constants.chatType.oneToOne: return true
-//        case Constants.chatType.privateGroupChat: return popup.rootStore.chatsModelInst.channelView.activeChannel.isAdmin(userProfile.pubKey)
-//        case Constants.chatType.communityChat: return popup.rootStore.chatsModelInst.communities.activeCommunity.admin
-//        default: return false
-//        }
-    }
     property string messageToPin
     property string messageToUnpin
 
-    id: popup
-
     header: Item {
         height: childrenRect.height
         width: parent.width
@@ -44,7 +31,7 @@ ModalPopup {
         StyledText {
             id: title
             //% "Pin limit reached"
-            text: !!messageToPin ? qsTrId("pin-limit-reached") :
+            text: !!popup.messageToPin ? qsTrId("pin-limit-reached") :
                                                //% "Pinned messages"
                                                qsTrId("pinned-messages")
             anchors.top: parent.top
@@ -58,7 +45,7 @@ ModalPopup {
 
             id: nbPinnedMessages
             text: {
-                if (!!messageToPin) {
+                if (!!popup.messageToPin) {
                     //% "Unpin a previous message first"
                     return qsTrId("unpin-a-previous-message-first")
                 }
@@ -102,8 +89,7 @@ ModalPopup {
 
         ListView {
             id: pinnedMessageListView
-            // Not Refactored Yet
+            model: popup.pinnedMessagesModel
-//            model: popup.rootStore.chatsModelInst.messageView.pinnedMessagesList
             height: parent.height
             anchors.left: parent.left
             anchors.leftMargin: -Style.current.padding
@@ -113,7 +99,7 @@ ModalPopup {
             anchors.top: parent.top
             anchors.topMargin: -Style.current.halfPadding
             clip: true
-            
+
             delegate: Item {
                 id: messageDelegate
                 property var listView: ListView.view
@@ -122,74 +108,38 @@ ModalPopup {
 
                 MessageView {
                     id: messageItem
-//                    rootStore: popup.rootStore
+                    messageStore: popup.messageStore
-//                    messageStore: popup.messageStore
+                    messageContextMenu: msgContextMenu
-                    /////////////TODO Remove
+
-//                    fromAuthor: model.fromAuthor
+                    messageId: model.id
-//                    chatId: model.chatId
+                    responseToMessageWithId: model.responseToMessageWithId
-//                    userName: model.userName
+                    senderId: model.senderId
-//                    alias: model.alias
+                    senderDisplayName: model.senderDisplayName
-//                    localName: model.localName
+                    senderLocalName: model.senderLocalName
-//                    message: model.message
+                    senderIcon: model.senderIcon
-//                    plainText: model.plainText
+                    isSenderIconIdenticon: model.isSenderIconIdenticon
-//                    identicon: model.identicon
+                    amISender: model.amISender
-//                    isCurrentUser: model.isCurrentUser
+                    message: model.messageText
-//                    timestamp: model.timestamp
+                    messageImage: model.messageImage
-//                    sticker: model.sticker
+                    messageTimestamp: model.timestamp
-//                    contentType: model.contentType
+                    messageOutgoingStatus: model.outgoingStatus
-//                    outgoingStatus: model.outgoingStatus
+                    messageContentType: model.contentType
-//                    responseTo: model.responseTo
+                    pinnedMessage: model.pinned
-//                    imageClick: imagePopup.openPopup.bind(imagePopup)
+
-//                    messageId: model.messageId
+                    // This is possible since we have all data loaded before we load qml.
-//                    emojiReactions: model.emojiReactions
+                    // When we fetch messages to fulfill a gap we have to set them at once.
-//                    linkUrls: model.linkUrls
+                    prevMessageIndex: index - 1
-//                    communityId: model.communityId
+                    prevMessageAsJsonObj: popup.messageStore? popup.messageStore.getMessageByIndexAsJson(index - 1) : {}
-//                    hasMention: model.hasMention
+                    nextMessageIndex: index + 1
-//                    stickerPackId: model.stickerPackId
+                    nextMessageAsJsonObj: popup.messageStore? popup.messageStore.messageStore.getMessageByIndexAsJson(index + 1) : {}
-//                    timeout: model.timeout
+
-//                    pinnedMessage: true
+                    // Additional params
-//                    pinnedBy: model.pinnedBy
+                    forceHoverHandler: !popup.messageToPin
-//                    forceHoverHandler: !messageToPin
-//                    activityCenterMessage: false
-//                    isEdited: model.isEdited
-//                    showEdit: false
-//                    messageContextMenu: msgContextMenu
-//                    Component.onCompleted: {
-//                        messageStore.fromAuthor = model.fromAuthor;
-//                        messageStore.chatId = model.chatId;
-//                        messageStore.userName = model.userName;
-//                        messageStore.alias = model.alias;
-//                        messageStore.localName = model.localName;
-//                        messageStore.message = model.message;
-//                        messageStore.plainText = model.plainText;
-//                        messageStore.identicon = model.identicon;
-//                        messageStore.isCurrentUser = model.isCurrentUser;
-//                        messageStore.timestamp = model.timestamp;
-//                        messageStore.sticker = model.sticker;
-//                        messageStore.contentType = model.contentType;
-//                        messageStore.outgoingStatus = model.outgoingStatus;
-//                        messageStore.responseTo = model.responseTo;
-//                        messageStore.imageClick = imagePopup.openPopup.bind(imagePopup);
-//                        messageStore.messageId = model.messageId;
-//                        messageStore.emojiReactions = model.emojiReactions;
-//                        messageStore.linkUrls = model.linkUrls;
-//                        messageStore.communityId = model.communityId;
-//                        messageStore.hasMention = model.hasMention;
-//                        messageStore.stickerPackId = model.stickerPackId;
-//                        messageStore.timeout = model.timeout;
-//                        messageStore.pinnedMessage = true;
-//                        messageStore.pinnedBy = model.pinnedBy;
-//                        messageStore.forceHoverHandler = !messageToPin;
-//                        messageStore.activityCenterMessage = false;
-//                        messageStore.isEdited = model.isEdited;
-//                        messageStore.showEdit = false;
-//                        messageStore.messageContextMenu = msgContextMenu;
-//                    }
                 }
 
                 MouseArea {
                     anchors.fill: parent
-                    enabled: !!messageToPin
+                    enabled: !!popup.messageToPin
                     cursorShape: Qt.PointingHandCursor
                     z: 55
                     onClicked: radio.toggle()
@@ -197,7 +147,7 @@ ModalPopup {
 
                 StatusQControls.StatusRadioButton {
                     id: radio
-                    visible: !!messageToPin
+                    visible: !!popup.messageToPin
                     anchors.right: parent.right
                     anchors.rightMargin: 18
                     anchors.verticalCenter: parent.verticalCenter
@@ -205,7 +155,7 @@ ModalPopup {
                     function toggle() {
                         radio.checked = !radio.checked
                         if (radio.checked) {
-                            messageToUnpin = model.messageId
+                            popup.messageToUnpin = model.id
                         }
                     }
                 }
@@ -215,12 +165,17 @@ ModalPopup {
             id: msgContextMenu
             pinnedPopup: true
             pinnedMessage: true
-//            chatSectionModule: popup.chatSectionModule
-//            store: popup.rootStore
-//            reactionModel: popup.rootStore.emojiReactionsModel
             onShouldCloseParentPopup: {
                 popup.close()
             }
+
+            onPinMessage: {
+                popup.messageStore.pinMessage(messageId)
+            }
+
+            onUnpinMessage: {
+                popup.messageStore.unpinMessage(messageId)
+            }
         }
     }
 
@@ -231,18 +186,16 @@ ModalPopup {
 
         StatusQControls.StatusButton {
             id: btnUnpin
-            visible: !!messageToPin
+            visible: !!popup.messageToPin
-            enabled: !!messageToUnpin
+            enabled: !!popup.messageToUnpin
             //% "Unpin"
             text: qsTrId("unpin")
             type: StatusQControls.StatusBaseButton.Type.Danger
             anchors.right: parent.right
             onClicked: {
-                // Not Refactored Yet
+                popup.messageStore.unpinMessage(popup.messageToUnpin)
-//                const chatId = popup.rootStore.chatsModelInst.channelView.activeChannel.id
+                popup.messageToUnpin = ""
-//                popup.rootStore.chatsModelInst.messageView.unPinMessage(messageToUnpin, chatId)
+                popup.messageToPin = ""
-//                popup.rootStore.chatsModelInst.messageView.pinMessage(messageToPin, chatId)
-                messageToUnpin = messageToPin = ""
                 popup.close()
             }
         }

ui/app/AppLayouts/Chat/stores/MessageStore.qml

@@ -13,6 +13,7 @@ QtObject {
         let jsonObj = messageModule.getMessageByIdAsJson(id)
         let obj = JSON.parse(jsonObj)
         if (obj.error) {
+            // This log is available only in debug mode, if it's annoying we can remove it
             console.debug("error parsing message for index: ", id, " error: ", obj.error)
             return false
         }
@@ -27,6 +28,7 @@ QtObject {
         let jsonObj = messageModule.getMessageByIndexAsJson(index)
         let obj = JSON.parse(jsonObj)
         if (obj.error) {
+            // This log is available only in debug mode, if it's annoying we can remove it
             console.debug("error parsing message for index: ", index, " error: ", obj.error)
             return false
         }

ui/app/AppLayouts/Chat/views/ChatColumnView.qml

@@ -333,9 +333,6 @@ Item {
             id: pinnedMessagesPopupComponent
             PinnedMessagesPopup {
                 id: pinnedMessagesPopup
-                chatSectionModule: root.parentModule
-                rootStore: root.rootStore
-                messageStore: root.rootStore.messageStore
                 onClosed: destroy()
             }
         }

ui/app/AppLayouts/Chat/views/ChatContentView.qml

@@ -67,7 +67,13 @@ ColumnLayout {
         chatInfoButton.pinnedMessagesCount: chatContentModule.pinnedMessagesModel.count
         chatInfoButton.muted: chatContentModule.chatDetails.muted
 
-        chatInfoButton.onPinnedMessagesCountClicked: openPopup(pinnedMessagesPopupComponent)
+        chatInfoButton.onPinnedMessagesCountClicked: {
+            Global.openPopup(pinnedMessagesPopupComponent, {
+                          messageStore: messageStore,
+                          pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
+                          messageToPin: ""
+                      })
+        }
         chatInfoButton.onUnmute: chatContentModule.unmuteChat()
 
         chatInfoButton.sensor.enabled: chatContentModule.chatDetails.type !== Constants.chatType.publicChat &&
@@ -193,6 +199,14 @@ ColumnLayout {
         onUnpinMessage: {
             messageStore.unpinMessage(messageId)
         }
+
+        onPinnedMessagesLimitReached: {
+            Global.openPopup(pinnedMessagesPopupComponent, {
+                          messageStore: messageStore,
+                          pinnedMessagesModel: chatContentModule.pinnedMessagesModel,
+                          messageToPin: messageId
+                      })
+        }
     }
 
     StatusImageModal {

ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

@@ -319,9 +319,6 @@ Item {
             prevMessageAsJsonObj: messageStore.getMessageByIndexAsJson(index - 1)
             nextMessageIndex: index + 1
             nextMessageAsJsonObj: messageStore.getMessageByIndexAsJson(index + 1)
-
-            Component.onCompleted: {
-            }
         }
     }
 

ui/imports/shared/panels/chat/ChatButtonsPanel.qml

@@ -12,14 +12,15 @@ Rectangle {
     property int contentType: 2
     property var messageContextMenu
     property bool showMoreButton: true
-    property bool activityCenterMessage
+    property bool activityCenterMsg
+    property bool placeholderMsg
     property string fromAuthor
     property alias editBtnActive: editBtn.active
     signal hoverChanged(bool hovered)
     signal setMessageActive(string messageId, bool active)
     signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly, bool hideEmojiPicker)
 
-    visible: !placeholderMessage && !activityCenterMessage &&
+    visible: !buttonsContainer.placeholderMsg && !buttonsContainer.activityCenterMsg &&
              (buttonsContainer.parentIsHovered || isMessageActive)
              && contentType !== Constants.messageContentType.transactionType
     width: buttonRow.width + buttonsContainer.containerMargin * 2

ui/imports/shared/views/chat/CompactMessageView.qml

@@ -83,6 +83,8 @@ Item {
         showMoreButton: root.showMoreButton
         fromAuthor: senderId
         editBtnActive: isText && !isEdit && isCurrentUser && showEdit
+        activityCenterMsg: activityCenterMessage
+        placeholderMsg: placeholderMessage
         onClickMessage: {
             root.clickMessage(isProfileClick, isSticker, isImage, image, emojiOnly, hideEmojiPicker, false, false, "");
         }
@@ -479,7 +481,7 @@ Item {
                 z: 51
                 sourceComponent: Component {
                     StatusChatImage {
-                        imageSource: image
+                        imageSource: messageImage
                         imageWidth: 200
                         onClicked: {
                             if (mouse.button === Qt.LeftButton) {

ui/imports/shared/views/chat/MessageView.qml

@@ -185,7 +185,7 @@ Column {
         messageContextMenu.messageSenderId = root.senderId
         messageContextMenu.messageContentType = root.messageContentType
         messageContextMenu.pinnedMessage = root.pinnedMessage
-        messageContextMenu.canPin = messageStore.getNumberOfPinnedMessages() <= Constants.maxNumberOfPins
+        messageContextMenu.canPin = messageStore.getNumberOfPinnedMessages() < Constants.maxNumberOfPins
 
         messageContextMenu.selectedUserPublicKey = root.senderId
         messageContextMenu.selectedUserDisplayName = root.senderDisplayName