fix(ContactVerificationRequestPopup): Fix overlapping messages

Close #9002 and #8950

ui/StatusQ/src/StatusQ/Components/StatusDateGroupLabel.qml

@@ -15,11 +15,14 @@ StatusBaseText {
     horizontalAlignment: Text.AlignHCenter
 
     text: {
+        if (messageTimestamp === 0)
+            return ""
+
         const currentMsgDate = new Date(messageTimestamp)
         const prevMsgDate = new Date(previousMessageTimestamp)
 
         if (prevMsgDate > 0 && currentMsgDate.getDay() === prevMsgDate.getDay())
-            return "";
+            return ""
 
         const now = new Date();
         // FIXME Qt6: replace with Intl.DateTimeFormat

ui/imports/shared/popups/ContactVerificationRequestPopup.qml

@@ -1,7 +1,6 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-
-import utils 1.0
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -11,6 +10,8 @@ import StatusQ.Popups 0.1
 import shared.controls 1.0
 import shared.views.chat 1.0
 
+import utils 1.0
+
 StatusModal {
     id: root
 
@@ -62,97 +63,86 @@ StatusModal {
     }
 
     header.title: qsTr("%1 is asking you to verify your identity").arg(d.senderDisplayName)
-
-    x: Math.round(((parent ? parent.width : 0) - width) / 2)
-    y: Math.round(((parent ? parent.height : 0) - height) / 2)
-
     width: 480
-    height: 230 + verificationMessage.height + verificationResponse.height
 
     onOpened: {
         root.updateVerificationDetails()
         verificationResponse.input.edit.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    contentItem: Item {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.leftMargin: Style.current.padding
-        anchors.rightMargin: Style.current.padding
+    contentItem: StatusScrollView {
+        padding: Style.current.padding
 
-        StatusBaseText {
-            id: description
-            width: parent.width
-            color: Theme.palette.directColor1
-            wrapMode: Text.WordWrap
-            anchors.top: parent.top
-            anchors.topMargin: Style.current.padding
-            text: qsTr("%1 would like to verify your identity. Answer the question to prove your identity to %2")
-                    .arg(d.senderDisplayName).arg(d.senderDisplayName)
-            font.pixelSize: 15
-        }
+        ColumnLayout {
+            id: contentColumn
+            width: root.width - Style.current.padding * 2
+            spacing: Style.current.padding
 
-        MessageView {
-            id: verificationMessage
-            anchors.top: description.bottom
-            anchors.topMargin: Style.current.padding
-            width: parent.width
-            isMessage: true
-            shouldRepeatHeader: true
-            messageTimestamp: d.messageTimestamp
-            senderId: d.senderPublicKey
-            senderDisplayName: d.senderDisplayName
-            senderIsEnsVerified: d.senderPublicKey !== "" && Utils.isEnsVerified(d.senderPublicKey)
-            senderIcon: d.senderIcon
-            messageText: d.challengeText
-            messageContentType: Constants.messageContentType.messageType
-            placeholderMessage: true
-        }
+            StatusBaseText {
+                id: description
+                color: Theme.palette.directColor1
+                wrapMode: Text.WordWrap
+                text: qsTr("%1 would like to verify your identity. Answer the question to prove your identity to %2")
+                        .arg(d.senderDisplayName).arg(d.senderDisplayName)
+                font.pixelSize: 15
+                Layout.fillWidth: true
+                Layout.topMargin: Style.current.padding
+            }
 
-        StatusInput {
-            id: verificationResponse
-            visible: !d.responseText
-            anchors.top: verificationMessage.bottom
-            anchors.topMargin: 5
-            input.multiline: true
-            placeholderText: qsTr("Provide answer to verification request from this contact.")
-            minimumHeight: 152
-            maximumHeight: 152
-            width: parent.width
-            input.verticalAlignment: TextEdit.AlignTop
-            leftPadding: 0
-            rightPadding: 0
-            charLimit: 280
-        }
+            MessageView {
+                id: verificationMessage
+                isMessage: true
+                amIChatAdmin: false
+                placeholderMessage: true
+                senderId: d.senderPublicKey
+                senderDisplayName: d.senderDisplayName
+                senderIsEnsVerified: d.senderPublicKey !== "" && Utils.isEnsVerified(d.senderPublicKey)
+                senderIcon: d.senderIcon
+                messageText: d.challengeText
+                messageContentType: Constants.messageContentType.messageType
+                Layout.fillWidth: true
+            }
 
-        MessageView {
-            id: responseMessage
-            visible: !!d.responseText
-            anchors.top: verificationMessage.bottom
-            width: parent.width
-            isMessage: true
-            shouldRepeatHeader: true
-            messageTimestamp: d.responseTimestamp
-            senderId: userProfile.pubKey
-            senderDisplayName: userProfile.displayName
-            senderIsEnsVerified: !!userProfile.preferredName
-            senderIcon: userProfile.icon
-            messageText: d.responseText
-            messageContentType: Constants.messageContentType.messageType
-            placeholderMessage: true
-        }
+            StatusInput {
+                id: verificationResponse
+                visible: !d.responseText
+                input.multiline: true
+                placeholderText: qsTr("Provide answer to verification request from this contact.")
+                minimumHeight: 152
+                maximumHeight: 152
+                input.verticalAlignment: TextEdit.AlignTop
+                leftPadding: 0
+                rightPadding: 0
+                charLimit: 280
+                Layout.fillWidth: true
+            }
 
-        StatusBaseText {
-            id: responseSent
-            visible: !!d.responseText
-            width: parent.width
-            color: Theme.palette.baseColor1
-            wrapMode: Text.WordWrap
-            anchors.top: responseMessage.bottom
-            anchors.topMargin: 58
-            text: qsTr("Your answer has been sent to %1.").arg(d.senderDisplayName)
-            font.pixelSize: 13
-            horizontalAlignment: Text.AlignHCenter
+            MessageView {
+                id: responseMessage
+                width: parent.width
+                visible: !!d.responseText
+                isMessage: true
+                amIChatAdmin: false
+                placeholderMessage: true
+                senderId: userProfile.pubKey
+                senderDisplayName: userProfile.displayName
+                senderIsEnsVerified: !!userProfile.preferredName
+                senderIcon: userProfile.icon
+                messageText: d.responseText
+                messageContentType: Constants.messageContentType.messageType
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                id: responseSent
+                visible: !!d.responseText
+                color: Theme.palette.baseColor1
+                wrapMode: Text.WordWrap
+                text: qsTr("Your answer has been sent to %1.").arg(d.senderDisplayName)
+                font.pixelSize: 13
+                horizontalAlignment: Text.AlignHCenter
+                Layout.fillWidth: true
+            }
         }
     }