fix(@desktop): Send contact request from profile

Close #6125

ui/app/mainui/AppMain.qml

@@ -182,6 +182,7 @@ Item {
 
     property Component profilePopupComponent: ProfilePopup {
         id: profilePopup
+        anchors.centerIn: parent
         profileStore: appMain.rootStore.profileSectionStore.profileStore
         contactsStore: appMain.rootStore.profileSectionStore.contactsStore
         onClosed: {

ui/imports/shared/popups/ProfilePopup.qml

@@ -17,7 +17,6 @@ import StatusQ.Popups 0.1
 
 StatusModal {
     id: popup
-    anchors.centerIn: parent
 
     property Popup parentPopup
 
@@ -32,8 +31,6 @@ StatusModal {
     property string userIcon: ""
     property string text: ""
 
-    readonly property int innerMargin: 20
-
     property bool userIsEnsVerified: false
     property bool userIsBlocked: false
     property bool isCurrentUser: false
@@ -45,7 +42,6 @@ StatusModal {
 
     signal contactUnblocked(publicKey: string)
     signal contactBlocked(publicKey: string)
-    signal contactAdded(publicKey: string)
 
     function openPopup(publicKey, openNicknamePopup) {
         // All this should be improved more, but for now we leave it like this.
@@ -70,10 +66,17 @@ StatusModal {
         }
     }
 
-    header.title: userDisplayName
+    header.title: userDisplayName + qsTr("'s Profile")
     header.subTitle: userIsEnsVerified ? userName : Utils.getElidedCompressedPk(userPublicKey)
     header.subTitleElide: Text.ElideMiddle
 
+    QtObject {
+        id: d
+
+        readonly property int contentSpacing: 5
+        readonly property int contentMargins: 16
+    }
+
     headerActionButton: StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary
         width: 32
@@ -85,28 +88,10 @@ StatusModal {
         onClicked: contentItem.qrCodePopup.open()
     }
 
-    contentItem: Item {
+    Component {
-        width: popup.width
+        id: contactTopComponent
-        height: modalContent.height
-
-        property alias qrCodePopup: qrCodePopup
-        property alias unblockContactConfirmationDialog: unblockContactConfirmationDialog
-        property alias blockContactConfirmationDialog: blockContactConfirmationDialog
-        property alias removeContactConfirmationDialog: removeContactConfirmationDialog
-
-        Column {
-            id: modalContent
-            anchors.top: parent.top
-            width: parent.width
-
-            Item {
-                height: 16
-                width: parent.width
-            }
 
         ProfileHeader {
-                width: parent.width
-
             displayName: popup.userDisplayName
             pubkey: popup.userPublicKey
             icon: popup.isCurrentUser ? popup.profileStore.icon : popup.userIcon
@@ -138,17 +123,37 @@ StatusModal {
                 }
             }
         }
+    }
+
+    contentItem: ColumnLayout {
+        id: modalContent
+
+        property alias qrCodePopup: qrCodePopup
+        property alias unblockContactConfirmationDialog: unblockContactConfirmationDialog
+        property alias blockContactConfirmationDialog: blockContactConfirmationDialog
+        property alias removeContactConfirmationDialog: removeContactConfirmationDialog
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: d.contentMargins
+        spacing: d.contentSpacing
+        clip: true
+
+        Item {
+            implicitHeight: d.contentSpacing
+            Layout.fillWidth: true
+        }
+
+        Loader {
+            sourceComponent: contactTopComponent
+            Layout.fillWidth: true
+        }
 
         StatusBanner {
-                width: parent.width
             visible: popup.userIsBlocked
             type: StatusBanner.Type.Danger
             statusText: qsTr("Blocked")
-            }
+            Layout.fillWidth: true
-
-            Item {
-                height: 16
-                width: parent.width
         }
 
         StatusDescriptionListItem {
@@ -162,7 +167,7 @@ StatusModal {
                 globalUtils.copyToClipboard(subTitle)
                 tooltip.visible = !tooltip.visible
             }
-                width: parent.width
+            Layout.fillWidth: true
         }
 
         StatusDescriptionListItem {
@@ -177,7 +182,7 @@ StatusModal {
                 globalUtils.copyToClipboard(subTitle)
                 tooltip.visible = !tooltip.visible
             }
-                width: parent.width
+            Layout.fillWidth: true
         }
 
         StatusDescriptionListItem {
@@ -209,7 +214,7 @@ StatusModal {
                 popup.profileStore.copyToClipboard(Constants.userLinkPrefix + user)
                 tooltip.visible = !tooltip.visible
             }
-                width: parent.width
+            Layout.fillWidth: true
         }
 
         StatusDescriptionListItem {
@@ -221,17 +226,11 @@ StatusModal {
             sensor.onClicked: {
                 nicknamePopup.open()
             }
-                width: parent.width
+            Layout.fillWidth: true
-            }
-
-            Item {
-                visible: !isCurrentUser
-                width: parent.width
-                height: 16
         }
     }
 
-        // TODO: replace with StatusModal
+    // TODO: replace with StatusStackModal
     ModalPopup {
         id: qrCodePopup
         width: 320
@@ -296,6 +295,18 @@ StatusModal {
             popup.close()
         }
     }
+
+    // TODO: replace with StatusStackModal
+    SendContactRequestModal {
+        id: sendContactRequestModal
+        anchors.centerIn: parent
+        width: popup.width
+        height: popup.height
+        visible: false
+        header.title: qsTr("Send Contact Request to") + " " + userDisplayName
+        topComponent: contactTopComponent
+        onAccepted: popup.contactsStore.sendContactRequest(userPublicKey, message)
+        onClosed: popup.close()
     }
 
     rightButtons: [
@@ -328,13 +339,9 @@ StatusModal {
         },
 
         StatusButton {
-            text: qsTr("Add to contacts")
+            text: qsTr("Send Contact Request")
             visible: !userIsBlocked && !isAddedContact
-            onClicked: {
+            onClicked: sendContactRequestModal.open()
-                popup.contactsStore.sendContactRequest(userPublicKey);
-                popup.contactAdded(userPublicKey);
-                popup.close();
-            }
         }
     ]
 }

ui/imports/shared/popups/SendContactRequestModal.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import utils 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    signal accepted(string message)
+
+    property alias topComponent: topComponentLoader.sourceComponent
+
+    QtObject {
+        id: d
+
+        readonly property int maxMsgLength: 280
+        readonly property int minMsgLength: 1
+        readonly property int msgHeight: 152
+        readonly property int contentSpacing: 5
+        readonly property int contentMargins: 16
+    }
+
+    contentItem: ColumnLayout {
+        id: content
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: d.contentMargins
+        spacing: d.contentSpacing
+
+        Loader {
+            id: topComponentLoader
+            Layout.fillWidth: true
+        }
+
+        StatusInput {
+            id: messageInput
+            charLimit: d.maxMsgLength
+
+            input.placeholderText: qsTr("Say who you are / why you want to become a contact...")
+            input.multiline: true
+            input.implicitHeight: d.msgHeight
+            input.verticalAlignment: TextEdit.AlignTop
+
+            validators: StatusMinLengthValidator {
+                minLength: d.minMsgLength
+                errorMessage: Utils.getErrorMessage(messageInput.errors, qsTr("who are you"))
+            }
+            validationMode: StatusInput.ValidationMode.Always
+            Layout.fillWidth: true
+        }
+    }
+
+    rightButtons: StatusButton {
+        enabled: messageInput.valid
+        text: qsTr("Send Contact Request")
+        onClicked: {
+            root.accepted(messageInput.text);
+            root.close();
+        }
+    }
+}