fix: Gradient mask of replied message doesn't work

- improve the respective storybook page
- some minor cleanups/fixes

Fixes #11385

storybook/pages/FeeRowPage.qml

@@ -71,7 +71,7 @@ SplitView {
                 }
 
                 RadioButton {
-                    readonly property string title: ModelsData.descriptions.medium
+                    readonly property string title: ModelsData.descriptions.mediumLoremIpsum
 
                     text: "Very Long"
                 }

storybook/pages/StatusMessagePage.qml

@@ -17,27 +17,41 @@ SplitView {
     QtObject {
         id: d
 
-        property var messagesModel: ListModel {
+        readonly property var messagesModel: ListModel {
             ListElement {
-                timestamp: 1656937930
+                timestamp: 1656937930123
+                senderId: "zq123456789"
                 senderDisplayName: "simon"
                 profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                               nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                 contentType: StatusMessage.ContentType.Text
-                message:  "Hello, this is awesome! Feels like decentralized Discord!"
+                message: "Hello, this is awesome! Feels like decentralized Discord! And it even supports HTML markup, like <b>bold</b>, <i>italics</i> or <u>underline</u>"
                 isContact: true
+                isAReply: false
                 trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             }
             ListElement {
-                timestamp: 1657937930
+                timestamp: 1657937930135
+                senderId: "zqABCDEFG"
                 senderDisplayName: "Mark Cuban"
                 contentType: StatusMessage.ContentType.Text
                 message: "I know a lot of you really seem to get off or be validated by arguing with strangers online but please know it's a complete waste of your time and energy"
                 isContact: false
+                isAReply: false
                 trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             }
+            ListElement {
+                timestamp: 1667937930159
+                senderId: "zqdeadbeef"
+                senderDisplayName: "replicator.stateofus.eth"
+                contentType: StatusMessage.ContentType.Text
+                message: "Test reply; the original text above should have a horizontal gradient mask"
+                isContact: true
+                isAReply: true
+                trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            }
         }
-        property var colorHash: ListModel {
+        readonly property var colorHash: ListModel {
             ListElement { colorId: 13; segmentLength: 5 }
             ListElement { colorId: 31; segmentLength: 5 }
             ListElement { colorId: 10; segmentLength: 1 }
@@ -59,29 +73,46 @@ SplitView {
             color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
 
             ListView {
-                anchors.margins: 50
+                anchors.margins: 16
                 anchors.fill: parent
                 spacing: 16
                 model: d.messagesModel
                 delegate: StatusMessage {
                     width: ListView.view.width
                     timestamp: model.timestamp
-                    messageDetails: StatusMessageDetails {
+                    messageDetails {
+                        readonly property bool isEnsVerified: model.senderDisplayName.endsWith(".eth")
                         messageText: model.message
                         contentType: model.contentType
+                        sender.id: isEnsVerified ? "" : model.senderId
                         sender.displayName: model.senderDisplayName
                         sender.isContact: model.isContact
                         sender.trustIndicator: model.trustIndicator
-                        sender.profileImage: StatusProfileImageSettings {
-                            width: 40
-                            height: 40
+                        sender.isEnsVerified: isEnsVerified
+                        sender.profileImage {
                             name: model.profileImage || ""
-                            colorId: 1
+                            colorId: index
                             colorHash: d.colorHash
                         }
                     }
-                    onSenderNameClicked: logs.logEvent("StatusMessage::onSenderNameClicked(): ")
-                    onProfilePictureClicked: logs.logEvent("StatusMessage::profilePictureClicked(): ")
+
+                    isAReply: model.isAReply
+                    replyDetails {
+                        amISender: true
+                        sender.id: "0xdeadbeef"
+                        sender.profileImage {
+                            width: 20
+                            height: 20
+                            name: ModelsData.icons.dribble
+                            colorHash: d.colorHash
+                        }
+                        messageText: ModelsData.descriptions.mediumLoremIpsum
+                    }
+
+                    onSenderNameClicked: logs.logEvent("StatusMessage::senderNameClicked")
+                    onProfilePictureClicked: logs.logEvent("StatusMessage::profilePictureClicked")
+                    onReplyProfileClicked: logs.logEvent("StatusMessage::replyProfileClicked")
+                    onReplyMessageClicked: logs.logEvent("StatusMessage::replyMessageClicked")
                 }
             }
         }
@@ -95,11 +126,6 @@ SplitView {
             logsView.logText: logs.logText
         }
     }
-
-    Pane {
-        SplitView.minimumWidth: 300
-        SplitView.preferredWidth: 300
-    }
 }
 
 // category: Components

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

@@ -106,8 +106,8 @@ Item {
                 }
 
                 Item {
-                    implicitWidth: messageContentsLayout.implicitWidth
-                    implicitHeight: messageContentsLayout.implicitHeight
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: messageContentsLayout.implicitHeight
 
                     ColumnLayout {
                         id: messageContentsLayout

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

@@ -91,7 +91,7 @@ Item {
         color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1
         font.family: Theme.palette.baseFont.name
         font.pixelSize: Theme.primaryTextFontSize
-        textFormat: Text.RichText
+        textFormat: root.stripHtmlTags ? Text.PlainText : Text.RichText
         wrapMode: root.convertToSingleLine ? Text.NoWrap : Text.Wrap
         readOnly: true
         selectByMouse: true

ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml

@@ -32,7 +32,7 @@ QtObject {
     id: statusIdenticonRingSettings
 
     /*!
-       \qmlproperty ListModel StatusIdenticonRingSettings::ringSpecModel
+       \qmlproperty var StatusIdenticonRingSettings::ringSpecModel
        This is a REQUIRED property that contains a ListModel or array of objects that describes each ring segment color and length.
 
        Examples: