feat: limit to 3 pins and show how to unpin

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

@@ -32,6 +32,11 @@ PopupMenu {
     property var emojiReactionsReactedByUser: []
     property var onClickEdit: function(){}
     property var reactionModel
+    property bool canPin: {
+        const nbPinnedMessages = chatsModel.messageView.pinnedMessagesList.count
+
+        return nbPinnedMessages < Constants.maxNumberOfPins
+    }
 
     signal closeParentPopup
 
@@ -141,16 +146,27 @@ PopupMenu {
 
     Action {
         id: pinAction
-        //% "Unpin"
+        text: {
-        text: pinnedMessage ? qsTrId("unpin") :
+            if (pinnedMessage) {
-                              //% "Pin"
+                //% "Unpin"
-                              qsTrId("pin")
+                return qsTrId("unpin")
+            }
+            //% "Pin"
+            return qsTrId("pin")
+
+        }
         onTriggered: {
             if (pinnedMessage) {
                 chatsModel.messageView.unPinMessage(messageId, chatsModel.channelView.activeChannel.id)
                 return
             }
 
+            if (!canPin) {
+                // Open pin modal so that the user can unpin one
+                openPopup(pinnedMessagesPopupComponent, {messageToPin: messageId})
+                return
+            }
+
             chatsModel.messageView.pinMessage(messageId, chatsModel.channelView.activeChannel.id)
             messageContextMenu.close()
         }

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

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import QtQuick.Controls 2.3
 import "../../../../imports"
 import "../../../../shared"
 import "../../../../shared/status"
@@ -6,6 +7,19 @@ import "../data"
 import "../ChatColumn"
 
 ModalPopup {
+    property bool userCanPin: {
+        switch (chatsModel.channelView.activeChannel.chatType) {
+        case Constants.chatTypePublic: return false
+        case Constants.chatTypeStatusUpdate: return false
+        case Constants.chatTypeOneToOne: return true
+        case Constants.chatTypePrivateGroupChat: return chatsModel.channelView.activeChannel.isAdmin(profileModel.profile.pubKey)
+        case Constants.chatTypeCommunity: return chatsModel.communities.activeCommunity.admin
+        default: return false
+        }
+    }
+    property string messageToPin
+    property string messageToUnpin
+
     id: popup
 
     header: Item {
@@ -14,8 +28,9 @@ ModalPopup {
 
         StyledText {
             id: title
-            //% "Pinned messages"
+            text: !!messageToPin ? qsTr("Pin limit reached") :
-            text: qsTrId("pinned-messages")
+                                               //% "Pinned messages"
+                                               qsTrId("pinned-messages")
             anchors.top: parent.top
             anchors.left: parent.left
             font.bold: true
@@ -26,10 +41,16 @@ ModalPopup {
             property int nbMessages: pinnedMessageListView.count
 
             id: nbPinnedMessages
-            //% "%1 messages"
+            text: {
-            text: nbMessages > 1 ? qsTrId("-1-messages").arg(nbMessages) :
+                if (!!messageToPin) {
-                                   //% "%1 message"
+                    return qsTr("Unpin a previous message first")
-                                   qsTrId("-1-message").arg(nbMessages)
+                }
+
+                //% "%1 messages"
+                return nbMessages > 1 ? qsTrId("-1-messages").arg(nbMessages) :
+                                        //% "%1 message"
+                                        qsTrId("-1-message").arg(nbMessages)
+            }
             anchors.left: parent.left
             anchors.top: title.bottom
             anchors.topMargin: 2
@@ -58,6 +79,10 @@ ModalPopup {
             color: Style.current.secondaryText
         }
 
+        ButtonGroup {
+            id: pinButtonGroup
+        }
+
         ListView {
             id: pinnedMessageListView
             model: chatsModel.messageView.pinnedMessagesList
@@ -74,45 +99,73 @@ ModalPopup {
             function closePopup() {
                 popup.close()
             }
+            delegate: Item {
+                width: parent.width
+                height: messageItem.height
 
-            delegate: Message {
+                Message {
-                id: messageItem
+                    id: messageItem
-                property var view: ListView.view
+                    property var view: ListView.view
-                fromAuthor: model.fromAuthor
+
-                chatId: model.chatId
+                    fromAuthor: model.fromAuthor
-                userName: model.userName
+                    chatId: model.chatId
-                alias: model.alias
+                    userName: model.userName
-                localName: model.localName
+                    alias: model.alias
-                message: model.message
+                    localName: model.localName
-                plainText: model.plainText
+                    message: model.message
-                identicon: model.identicon
+                    plainText: model.plainText
-                isCurrentUser: model.isCurrentUser
+                    identicon: model.identicon
-                timestamp: model.timestamp
+                    isCurrentUser: model.isCurrentUser
-                sticker: model.sticker
+                    timestamp: model.timestamp
-                contentType: model.contentType
+                    sticker: model.sticker
-                outgoingStatus: model.outgoingStatus
+                    contentType: model.contentType
-                responseTo: model.responseTo
+                    outgoingStatus: model.outgoingStatus
-                imageClick: imagePopup.openPopup.bind(imagePopup)
+                    responseTo: model.responseTo
-                messageId: model.messageId
+                    imageClick: imagePopup.openPopup.bind(imagePopup)
-                emojiReactions: model.emojiReactions
+                    messageId: model.messageId
-                linkUrls: model.linkUrls
+                    emojiReactions: model.emojiReactions
-                communityId: model.communityId
+                    linkUrls: model.linkUrls
-                hasMention: model.hasMention
+                    communityId: model.communityId
-                stickerPackId: model.stickerPackId
+                    hasMention: model.hasMention
-                timeout: model.timeout
+                    stickerPackId: model.stickerPackId
-                pinnedMessage: true
+                    timeout: model.timeout
-                pinnedBy: model.pinnedBy
-                forceHoverHandler: true
-                activityCenterMessage: false
-                isEdited: model.isEdited
-                showEdit: false
-                messageContextMenu: MessageContextMenu {
-                    showJumpTo: true
                     pinnedMessage: true
-                    reactionModel: EmojiReactions { }
+                    pinnedBy: model.pinnedBy
+                    forceHoverHandler: !messageToPin
+                    activityCenterMessage: false
+                    isEdited: model.isEdited
+                    showEdit: false
+                    messageContextMenu: MessageContextMenu {
+                        showJumpTo: true
+                        pinnedMessage: true
+                        reactionModel: EmojiReactions { }
 
-                    onCloseParentPopup: {
+                        onCloseParentPopup: {
-                        messageItem.view.closePopup()
+                            messageItem.view.closePopup()
+                        }
+                    }
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: !!messageToPin
+                    cursorShape: Qt.PointingHandCursor
+                    z: 55
+                    onClicked: radio.toggle()
+                }
+
+                StatusRadioButton {
+                    id: radio
+                    visible: !!messageToPin
+                    anchors.right: parent.right
+                    anchors.rightMargin: 18
+                    anchors.verticalCenter: parent.verticalCenter
+                    ButtonGroup.group: pinButtonGroup
+                    function toggle() {
+                        radio.checked = !radio.checked
+                        if (radio.checked) {
+                            messageToUnpin = model.messageId
+                        }
                     }
                 }
             }
@@ -120,13 +173,34 @@ ModalPopup {
     }
 
 
-    footer: StatusRoundButton {
+    footer: Item {
-        id: btnBack
+        width: parent.width
-        anchors.left: parent.left
+        height: btnBack.height
-        icon.name: "arrow-right"
+
-        icon.width: 20
+        StatusRoundButton {
-        icon.height: 16
+            id: btnBack
-        rotation: 180
+            anchors.left: parent.left
-        onClicked: popup.close()
+            icon.name: "arrow-right"
+            icon.width: 20
+            icon.height: 16
+            rotation: 180
+            onClicked: popup.close()
+        }
+
+        StatusButton {
+            id: btnUnpin
+            visible: !!messageToPin
+            enabled: !!messageToUnpin
+            text: qsTr("Unpin")
+            type: "warn"
+            anchors.right: parent.right
+            onClicked: {
+                const chatId = chatsModel.channelView.activeChannel.id
+                chatsModel.messageView.unPinMessage(messageToUnpin, chatId)
+                chatsModel.messageView.pinMessage(messageToPin, chatId)
+                messageToUnpin = messageToPin = ""
+                popup.close()
+            }
+        }
     }
 }

ui/imports/Constants.qml

@@ -147,6 +147,8 @@ QtObject {
     readonly property int maxUploadFiles: 5
     readonly property double maxUploadFilesizeMB: 0.5
 
+    readonly property int maxNumberOfPins: 3
+
     readonly property var acceptedImageExtensions: [".png", ".jpg", ".jpeg", ".svg", ".gif"]
     readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"]