fix(StatusMessage): make the emoji reactions buttons bigger

- and rework the context menu to ContextMenu + TapHandler
- use edge-to-edge separators in the profile context menu

Author: caybro

ui/StatusQ/src/StatusQ/Components/StatusMessage.qml

@@ -45,7 +45,6 @@ Control {
     property var statusChatInput
     property alias linksComponent: linksLoader.sourceComponent
     property alias invitationComponent: invitationBubbleLoader.sourceComponent
-    property alias mouseArea: mouseArea
 
     property string pinnedMsgInfoText: ""
 
@@ -89,6 +88,7 @@ Control {
     signal senderNameClicked(var sender)
     signal replyProfileClicked(var sender, var mouse)
     signal replyMessageClicked(var mouse)
+    signal pressAndHold(var mouse)
 
     signal addReactionClicked(var sender, var mouse)
     signal toggleReactionClicked(string hexcode)
@@ -192,11 +192,6 @@ Control {
         implicitWidth: messageLayout.implicitWidth
         implicitHeight: messageLayout.implicitHeight
 
-        StatusMouseArea {
-            id: mouseArea
-            anchors.fill: parent
-        }
-
         ColumnLayout {
             id: messageLayout
             anchors.fill: parent
@@ -293,6 +288,7 @@ Control {
                             textField.onHoveredLinkChanged: {
                                 root.hoveredLink = hoveredLink;
                             }
+                            onPressAndHold: mouse => root.pressAndHold(mouse)
                         }
                     }
                     Loader {

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml

@@ -46,15 +46,19 @@ Flow {
     Repeater {
         model: root.reactionsModel
 
-        Button {
+        StatusButton {
             id: reactionDelegate
 
-            verticalPadding: Theme.halfPadding
+            size: StatusBaseButton.Size.Small
+            implicitHeight: 32
+
+            verticalPadding: Theme.halfPadding / 2
             leftPadding: Theme.halfPadding
             rightPadding: Theme.halfPadding / 2
             spacing: Theme.halfPadding / 2
 
             background: Rectangle {
+                implicitWidth: 36
                 radius: Theme.radius
                 color: {
                     if (reactionDelegate.hovered) {
@@ -111,7 +115,7 @@ Flow {
         // We use a MouseArea because we need to pass the mouse event to the signal
         StatusMouseArea {
             anchors.fill: parent
-            cursorShape: !root.limitReached ? Qt.PointingHandCursor : Qt.ArrowCursor
+            cursorShape: !root.limitReached ? Qt.PointingHandCursor : Qt.ForbiddenCursor
             onClicked: (mouse) => {
                 mouse.accepted = true
                 if (root.limitReached)

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import Qt5Compat.GraphicalEffects
 
 import StatusQ.Components
@@ -30,6 +31,8 @@ Item {
     implicitWidth: chatText.implicitWidth
     implicitHeight: chatText.height + d.showMoreHeight / 2
 
+    signal pressAndHold(var mouseEvent)
+
     QtObject {
         id: d
         property string hoveredLink: chatText.hoveredLink || root.highlightedLink
@@ -86,7 +89,7 @@ Item {
         color: Theme.palette.baseColor1
     }
 
-    TextEdit {
+    StatusTextArea {
         id: chatText
         objectName: "StatusTextMessage_chatText"
 
@@ -99,17 +102,18 @@ Item {
         anchors.leftMargin: d.isQuote ? Theme.halfPadding : 0
         anchors.right: parent.right
         opacity: !showMoreOpacityMask.active && !horizontalOpacityMask.active ? 1 : 0
+        background: null
+        leftPadding: 0
+        rightPadding: 0
+        topPadding: 0
+        bottomPadding: 0
         text: d.text
         selectedTextColor: Theme.palette.directColor1
-        selectionColor: Theme.palette.primaryColor3
         color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
-        font.family: Theme.baseFont.name
-        font.pixelSize: Theme.primaryTextFontSize
         textFormat: Text.RichText
         wrapMode: root.convertToSingleLine ? Text.NoWrap : Text.Wrap
         readOnly: true
-        selectByMouse: true // applies to mouse only, not touch
-        enabled: !Utils.isMobile // eats the touch events, thus breaking the context menu since this is an edit (albeit readonly)
+        selectByMouse: !Utils.isMobile // applies to mouse only, not touch
         onLinkActivated: function(link) {
             if(d.showDisabledTooltipForAddressEnsName(link)) {
                 return
@@ -127,6 +131,7 @@ Item {
             x: hoverHandler.point.position.x - 60
             y: -disabledLinkTooltip.height + hoverHandler.point.position.y - 10
         }
+        onPressAndHold: mouseEvent => root.pressAndHold(mouseEvent)
     }
 
     StatusSyntaxHighlighter {

ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml

@@ -71,7 +71,6 @@ TextArea {
         pixelSize: Theme.primaryTextFontSize
     }
 
-    selectByMouse: true
     persistentSelection: true
     wrapMode: TextEdit.WordWrap
 

ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml

@@ -30,6 +30,7 @@ ToolTip {
     margins: Theme.halfPadding
     delay: Utils.isMobile ? Application.styleHints.mousePressAndHoldInterval
                           : 200
+    timeout: Utils.isMobile ? 2500 : -1
 
     background: Item {
         id: statusToolTipBackground

ui/imports/shared/controls/chat/EmojiReaction.qml

@@ -26,8 +26,8 @@ Rectangle {
     StatusEmoji {
         id: statusEmoji
         anchors.centerIn: parent
-        width: Theme.fontSize24
-        height: Theme.fontSize24
+        width: Theme.fontSize23
+        height: Theme.fontSize23
         emojiId: root.emojiId
     }
 

ui/imports/shared/status/StatusChatInput.qml

@@ -1036,7 +1036,10 @@ Rectangle {
                 }
             }
 
-            closeHandler: () => commandBtn.highlighted = false
+            closeHandler: () => {
+                              commandBtn.highlighted = false
+                              destroy()
+                          }
         }
     }
 

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

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Window
 import QtQuick.Layouts
 import QtModelsToolkit
@@ -878,10 +879,8 @@ Loader {
                     root.messageStore.resendMessage(root.messageId)
                 }
 
-                mouseArea {
-                    acceptedButtons: Qt.RightButton
-                    onClicked: mouse => root.openMessageContextMenu(mouse.x, mouse.y)
-                }
+                ContextMenu.onRequested: pos => root.openMessageContextMenu(pos.x, pos.y)
+                onPressAndHold: mouse => root.openMessageContextMenu(mouse.x, mouse.y)
 
                 messageDetails: StatusMessageDetails {
                     contentType: delegate.contentType

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

@@ -66,6 +66,7 @@ StatusMenu {
     StatusMenuSeparator {
         visible: root.profileType !== Constants.profileType.bridged
         topPadding: root.topPadding
+        horizontalPadding: 0
     }
 
     ViewProfileMenuItem {
@@ -129,6 +130,7 @@ StatusMenu {
         topPadding: root.topPadding
         visible: root.profileType !== Constants.profileType.bridged &&
                  (removeNicknameAction.enabled || unblockAction.enabled || markUntrustworthyMenuItem.enabled || removeUntrustworthyMarkMenuItem.enabled || removeContactAction.enabled || blockMenuItem.enabled)
+        horizontalPadding: 0
     }
 
     // Remove Nickname