feat(chat): Update chat ui for the blocked contact

Close #9935

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

@@ -162,16 +162,6 @@ Item {
         }
     }
 
-    ChatRequestMessagePanel {
-        anchors.fill: parent
-        anchors.bottomMargin: Style.current.bigPadding
-        isUserAdded: root.isUserAdded
-        visible: root.activeChatType === Constants.chatType.oneToOne && !root.isUserAdded
-        onAddContactClicked: {
-            root.rootStore.addContact(root.activeChatId);
-        }
-    }
-
     Component {
         id: cmpSendTransactionNoEns
         ChatCommandModal {

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

@@ -1,9 +1,6 @@
 import QtQuick 2.15
 import QtQml 2.15
-import Qt.labs.platform 1.1
+import QtQuick.Controls 2.15
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import QtGraphicalEffects 1.0
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as StatusQUtils
@@ -57,32 +54,49 @@ ColumnLayout {
     property Component sendTransactionWithEnsModal
 
     property bool isBlocked: false
-
+    property int contactRequestState: Constants.ContactRequestState.None
     property bool stickersLoaded: false
 
+    onIsActiveChannelChanged: d.updateContactRequestState()
+
     QtObject {
         id: d
 
-        property bool isUserAdded
+        readonly property var conns1: Connections {
-
+            target: root.contactsStore.myContactsModel ?? null
-        function updateIsUserAdded() {
-            if (root.chatType !== Constants.chatType.oneToOne) {
-                return false
-            }
-            isUserAdded = Qt.binding(() => {isActiveChannel; return Utils.getContactDetailsAsJson(root.chatId, false).isAdded})
-        }
-
-        Component.onCompleted: updateIsUserAdded()
-    }
-
-    Connections {
-        target: root.contactsStore.myContactsModel
 
             function onItemChanged(pubKey) {
-            if (pubKey === root.chatId) {
+                if (pubKey === root.chatId)
-                d.updateIsUserAdded()
+                    d.updateContactRequestState()
             }
         }
+
+        readonly property var conns2: Connections {
+            target: root.contactsStore.receivedContactRequestsModel ?? null
+
+            function onItemChanged(pubKey) {
+                if (pubKey === root.chatId)
+                    d.updateContactRequestState()
+            }
+        }
+
+        readonly property var conns3: Connections {
+            target: root.contactsStore.sentContactRequestsModel ?? null
+
+            function onItemChanged(pubKey) {
+                if (pubKey === root.chatId)
+                    d.updateContactRequestState()
+            }
+        }
+
+        function updateContactRequestState() {
+            if (root.chatType !== Constants.chatType.oneToOne) {
+                return
+            }
+            root.contactRequestState = Utils.getContactDetailsAsJson(root.chatId).contactRequestState
+        }
+
+        Component.onCompleted: d.updateContactRequestState()
     }
 
     Loader {
@@ -110,7 +124,7 @@ ColumnLayout {
         sourceComponent: MessageContextMenuView {
             store: root.rootStore
             reactionModel: root.rootStore.emojiReactionsModel
-            disabledForChat: chatType === Constants.chatType.oneToOne && !d.isUserAdded
+            disabledForChat: chatType === Constants.chatType.oneToOne && d.contactRequestState !== Constants.ContactRequestState.Mutual
 
             onPinMessage: {
                 messageStore.pinMessage(messageId)
@@ -178,7 +192,10 @@ ColumnLayout {
                 stickersPopup: root.stickersPopup
                 usersStore: root.usersStore
                 stickersLoaded: root.stickersLoaded
-                isChatBlocked: root.isBlocked || (root.chatType === Constants.chatType.oneToOne && !d.isUserAdded)
+                publicKey: root.chatId
+                isOneToOne: root.chatType === Constants.chatType.oneToOne
+                contactRequestState: root.contactRequestState
+                isChatBlocked: root.isBlocked
                 channelEmoji: !chatContentModule ? "" : (chatContentModule.chatDetails.emoji || "")
                 isActiveChannel: root.isActiveChannel
                 onShowReplyArea: {
@@ -231,7 +248,7 @@ ColumnLayout {
                     anchors.margins: Style.current.smallPadding
 
                     enabled: root.rootStore.sectionDetails.joined && !root.rootStore.sectionDetails.amIBanned &&
-                             !(chatType === Constants.chatType.oneToOne && !d.isUserAdded)
+                             !(chatType === Constants.chatType.oneToOne && d.contactRequestState !== Constants.ContactRequestState.Mutual)
 
                     store: root.rootStore
                     usersStore: root.usersStore

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

@@ -33,10 +33,13 @@ Item {
     property var emojiPopup
     property var stickersPopup
 
+    property string publicKey: ""
     property bool stickersLoaded: false
     property alias chatLogView: chatLogView
     property bool isChatBlocked: false
+    property bool isOneToOne: false
     property bool isActiveChannel: false
+    property int contactRequestState: Constants.ContactRequestState.None
 
     property var messageContextMenu
 
@@ -185,7 +188,7 @@ Item {
         highlightRangeMode: ListView.ApplyRange
         highlightMoveDuration: 200
         preferredHighlightBegin: 0
-        preferredHighlightEnd: chatLogView.height/2
+        preferredHighlightEnd: chatLogView.height / 2
 
         model: messageStore.messagesModel
 
@@ -250,7 +253,7 @@ Item {
             chatLogView: ListView.view
 
             isActiveChannel: root.isActiveChannel
-            isChatBlocked: root.isChatBlocked
+            isChatBlocked: root.isChatBlocked || (root.isOneToOne && d.contactRequestState !== Constants.ContactRequestState.Mutual)
             messageContextMenu: root.messageContextMenu
 
             messageId: model.id
@@ -329,6 +332,23 @@ Item {
                     messageStore.setEditModeOff(model.id)
             }
         }
+        header: {
+            if (root.isOneToOne) {
+                switch (root.contactRequestState) {
+                case Constants.ContactRequestState.None: // no break
+                case Constants.ContactRequestState.Dismissed:
+                    return sendContactRequestComponent
+                case Constants.ContactRequestState.Received:
+                    return acceptContactRequestComponent
+                case Constants.ContactRequestState.Sent:
+                    return pendingContactRequestComponent
+                default:
+                    break
+                }
+            }
+            return null
+        }
+        onHeaderChanged: chatLogView.positionViewAtBeginning()
     }
 
     MessageDialog {
@@ -337,4 +357,38 @@ Item {
         text: qsTr("Failed to send message.")
         icon: StandardIcon.Critical
     }
+
+    Component {
+        id: sendContactRequestComponent
+
+        StatusButton {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("Send Contact Request")
+            onClicked: {
+                Global.openContactRequestPopup(root.publicKey, null)
+            }
+        }
+    }
+
+    Component {
+        id: acceptContactRequestComponent
+
+        StatusButton {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("Accept Contact Request")
+            onClicked: {
+                root.contactsStore.acceptContactRequest(root.publicKey, "")
+            }
+        }
+    }
+
+    Component {
+        id: pendingContactRequestComponent
+
+        StatusButton {
+            anchors.horizontalCenter: parent.horizontalCenter
+            enabled: false
+            text: qsTr("Contact Request Pending...")
+        }
+    }
 }

ui/imports/shared/views/ProfileDialogView.qml

@@ -406,7 +406,6 @@ Pane {
                 StatusMenu {
                     id: moreMenu
                     width: 230
-                    // FIXME: raly on contactRequestState !!!
                     SendContactRequestMenuItem {
                         enabled: !d.isContact && !d.isBlocked && !d.contactRequestState === Constants.ContactRequestState.Sent &&
                                  d.contactDetails.trustStatus === Constants.trustStatus.untrustworthy // we have an action button otherwise