fix(MessageContextMenuView): Message context menu displaying incorrectly

- restore previous context menu item spacing (ColumnLayout has an
implicit spacing of 5)
- don't wrap the MessageReactionsRow into an extra Item container; fixes
the emoji reactions row being garbled
- enhance the SB page so that the above can be seen/tested there and
rename it to match the component name
- some smaller cleanups

Fixes #16409

storybook/pages/MessageContextMenuPage.qml

@@ -1,157 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-import Storybook 1.0
-import Models 1.0
-
-import utils 1.0
-import shared.views.chat 1.0
-import shared.status 1.0
-
-SplitView {
-
-    QtObject {
-        id: d
-    }
-
-    Logs { id: logs }
-
-    SplitView {
-        orientation: Qt.Vertical
-        SplitView.fillWidth: true
-
-        Rectangle {
-            SplitView.fillWidth: true
-            SplitView.fillHeight: true
-            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
-            clip: true
-
-            ColumnLayout {
-                anchors.centerIn: parent
-                spacing: 10
-
-                RowLayout {
-                    Button {
-                        text: "Message context menu"
-                        onClicked: {
-                            menu1.createObject(this).popup()
-                        }
-                    }
-                    Button {
-                        text: "Message context menu (hide disabled items)"
-                        onClicked: {
-                            menu2.createObject(this).popup()
-                        }
-                    }
-                }
-            }
-
-            Component {
-                id: menu1
-                MessageContextMenuView {
-                    id: messageContextMenuView
-                    anchors.centerIn: parent
-                    hideDisabledItems: false
-                    isDebugEnabled: isDebugEnabledCheckBox.checked
-                    onClosed: {
-                        destroy()
-                    }
-                    onPinMessage: () => {
-                        logs.logEvent("Pin message:", messageContextMenuView.messageId)
-                    }
-                    onUnpinMessage: () => {
-                        logs.logEvent("Unpin message:", messageContextMenuView.messageId)
-                    }
-                    onPinnedMessagesLimitReached: () => {
-                        logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
-                    }
-                    onMarkMessageAsUnread: () => {
-                        logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
-                    }
-                    onToggleReaction: (emojiId) => {
-                        logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
-                    }
-                    onDeleteMessage: () => {
-                        logs.logEvent("Delete message:", messageContextMenuView.messageId)
-                    }
-                    onEditClicked: () => {
-                        logs.logEvent("Edit message:", messageContextMenuView.messageId)
-                    }
-                    onShowReplyArea: (senderId) => {
-                        logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
-                    }
-                    onCopyToClipboard: (text) => {
-                        logs.logEvent("Copy to clipboard:", text)
-                    }
-                }
-            }
-
-            Component {
-                id: menu2
-                MessageContextMenuView {
-                    id: messageContextMenuView
-                    anchors.centerIn: parent
-                    hideDisabledItems: true
-                    isDebugEnabled: isDebugEnabledCheckBox.checked
-                    onClosed: {
-                        destroy()
-                    }
-                    onPinMessage: () => {
-                        logs.logEvent("Pin message:", messageContextMenuView.messageId)
-                    }
-                    onUnpinMessage: () => {
-                        logs.logEvent("Unpin message:", messageContextMenuView.messageId)
-                    }
-                    onPinnedMessagesLimitReached: () => {
-                        logs.logEvent("Pinned messages limit reached:", messageContextMenuView.messageId)
-                    }
-                    onMarkMessageAsUnread: () => {
-                        logs.logEvent("Mark message as unread:", messageContextMenuView.messageId)
-                    }
-                    onToggleReaction: (emojiId) => {
-                        logs.logEvent("Toggle reaction:", messageContextMenuView.messageId, emojiId)
-                    }
-                    onDeleteMessage: () => {
-                        logs.logEvent("Delete message:", messageContextMenuView.messageId)
-                    }
-                    onEditClicked: () => {
-                        logs.logEvent("Edit message:", messageContextMenuView.messageId)
-                    }
-                    onShowReplyArea: (senderId) => {
-                        logs.logEvent("Show reply area:", messageContextMenuView.messageId, senderId)
-                    }
-                    onCopyToClipboard: (text) => {
-                        logs.logEvent("Copy to clipboard:", text)
-                    }
-                }
-            }
-        }
-    }
-
-    LogsAndControlsPanel {
-        id: logsAndControlsPanel
-
-        SplitView.minimumWidth: 150
-        SplitView.preferredWidth: 250
-
-        logsView.logText: logs.logText
-
-        controls: ColumnLayout {
-            spacing: 16
-
-            CheckBox {
-                id: isDebugEnabledCheckBox
-                text: "Enable Debug"
-                checked: false
-            }
-        }
-    }
-
-}
-
-// category: Views

storybook/pages/MessageContextMenuViewPage.qml

@@ -0,0 +1,131 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core.Theme 0.1
+
+import Storybook 1.0
+
+import utils 1.0
+import shared.views.chat 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    ListModel {
+        id: emojiReactionsModel
+        ListElement {
+            emojiId: 1
+            filename: "emojiReactions/heart"
+            didIReactWithThisEmoji: false
+        }
+        ListElement {
+            emojiId: 2
+            filename: "emojiReactions/thumbsUp"
+            didIReactWithThisEmoji: false
+        }
+        ListElement {
+            emojiId: 3
+            filename: "emojiReactions/thumbsDown"
+            didIReactWithThisEmoji: false
+        }
+        ListElement {
+            emojiId: 4
+            filename: "emojiReactions/laughing"
+            didIReactWithThisEmoji: false
+        }
+        ListElement {
+            emojiId: 5
+            filename: "emojiReactions/sad"
+            didIReactWithThisEmoji: false
+        }
+        ListElement {
+            emojiId: 6
+            filename: "emojiReactions/angry"
+            didIReactWithThisEmoji: false
+        }
+    }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Rectangle {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+
+            Button {
+                anchors.centerIn: parent
+                text: "Reopen"
+                onClicked: messageContextMenuView.open()
+            }
+
+            MessageContextMenuView {
+                id: messageContextMenuView
+                anchors.centerIn: parent
+                visible: true
+                closePolicy: Popup.NoAutoClose
+
+                messageId: "Oxdeadbeef"
+                reactionModel: emojiReactionsModel
+                messageContentType: Constants.messageContentType.messageType
+                chatType: Constants.chatType.oneToOne
+                isDebugEnabled: isDebugEnabledCheckBox.checked
+                hideDisabledItems: ctrlHideDisabled.checked
+                amIChatAdmin: ctrlChatAdmin.checked
+                canPin: true
+                pinnedMessage: ctrlPinned.checked
+
+                onPinMessage: logs.logEvent(`onPinMessage: ${messageContextMenuView.messageId}`)
+                onUnpinMessage: logs.logEvent(`onUnpinMessage: ${messageContextMenuView.messageId}`)
+                onPinnedMessagesLimitReached: logs.logEvent(`onPinnedMessagesLimitReached: ${messageContextMenuView.messageId}`)
+                onMarkMessageAsUnread: logs.logEvent(`onMarkMessageAsUnread: ${messageContextMenuView.messageId}`)
+                onToggleReaction: (emojiId) => logs.logEvent("onToggleReaction", ["emojiId"], arguments)
+                onDeleteMessage: logs.logEvent(`onDeleteMessage: ${messageContextMenuView.messageId}`)
+                onEditClicked: logs.logEvent(`onEditClicked: ${messageContextMenuView.messageId}`)
+                onShowReplyArea: (senderId) => logs.logEvent("onShowReplyArea", ["senderId"], arguments)
+                onCopyToClipboard: (text) => logs.logEvent("onCopyToClipboard", ["text"], arguments)
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumWidth: 150
+        SplitView.preferredWidth: 250
+
+        logsView.logText: logs.logText
+
+        controls: ColumnLayout {
+            spacing: 16
+
+            CheckBox {
+                id: isDebugEnabledCheckBox
+                text: "Enable Debug"
+            }
+
+            CheckBox {
+                id: ctrlHideDisabled
+                text: "Hide disabled items"
+                checked: true
+            }
+
+            CheckBox {
+                id: ctrlChatAdmin
+                text: "Chat Admin"
+                checked: false
+            }
+
+            CheckBox {
+                id: ctrlPinned
+                text: "Pinned message?"
+            }
+        }
+    }
+}
+
+// category: Views

ui/StatusQ/src/StatusQ/Popups/StatusMenu.qml

@@ -95,6 +95,7 @@ Menu {
         padding: 0
 
         ColumnLayout {
+            spacing: 0
             Repeater {
                 model: root.contentModel
 

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

@@ -6,7 +6,7 @@ import shared 1.0
 Row {
     id: root
 
-    property var reactionsModel: []
+    property var reactionsModel
 
     signal toggleReaction(int emojiId)
 
@@ -17,7 +17,7 @@ Row {
     Repeater {
         model: root.reactionsModel
         delegate: EmojiReaction {
-            source: Style.svg(filename)
+            source: Style.svg(model.filename)
             emojiId: model.emojiId
             reactedByUser: model.didIReactWithThisEmoji
             onCloseModal: {

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

@@ -1,24 +1,18 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import QtQml.Models 2.3
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 
 import StatusQ 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
 
 import utils 1.0
-import shared 1.0
-import shared.panels 1.0
-import shared.popups 1.0
-import shared.status 1.0
 import shared.controls.chat 1.0
-import shared.controls.chat.menuItems 1.0
 
 StatusMenu {
     id: root
 
-    property var reactionModel: []
+    // expected roles: emojiId:int, filename:string, didIReactWithThisEmoji:bool
+    property var reactionModel
 
     property string myPublicKey: ""
     property bool amIChatAdmin: false
@@ -51,27 +45,19 @@ StatusMenu {
     signal markMessageAsUnread()
     signal copyToClipboard(string text)
 
-    width: Math.max(emojiContainer.visible ? emojiContainer.width : 0, 230)
-
-    Item {
-        id: emojiContainer
-        width: emojiRow.width
-        height: visible ? emojiRow.height : 0
-        visible: !root.disabledForChat || root.forceEnableEmojiReactions
-
     MessageReactionsRow {
         id: emojiRow
+        visible: !root.disabledForChat || root.forceEnableEmojiReactions
         reactionsModel: root.reactionModel
-            bottomPadding: Style.current.padding
+        bottomPadding: Style.current.halfPadding
         onToggleReaction: {
             root.toggleReaction(emojiId)
             root.close()
         }
     }
-    }
 
     StatusMenuSeparator {
-        visible: emojiContainer.visible
+        visible: emojiRow.visible
     }
 
     StatusAction {
@@ -148,9 +134,10 @@ StatusMenu {
         visible: deleteMessageAction.enabled &&
                  (replyToMenuItem.enabled ||
                   copyMessageMenuItem.enabled ||
-                  copyMessageIdAction ||
+                  copyMessageIdAction.enabled ||
                   editMessageAction.enabled ||
-                  pinAction.enabled)
+                  pinAction.enabled ||
+                  markMessageAsUnreadAction.enabled)
     }
 
     StatusAction {