feat(MessageView): hide image url in the message when image is unfurled

The url is hidden when there is only one url in the message with no
additional text and the image is shown (unfurled).

Closes: #7321

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 3202294a119f96825c1bde6b9c6c378015e5d1f3
+Subproject commit 2c43dbb207edbd4106ebd7166af36368bb2e2024

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

@@ -19,39 +19,26 @@ Column {
     property var store
     property var messageStore
     property var container
-    property string linkUrls: ""
+
+    property alias linksModel: linksRepeater.model
+    readonly property alias unfurledLinksCount: d.unfurledLinksCount
+
     property bool isCurrentUser: false
-    property bool isImageLink: false
 
     signal imageClicked(var image)
 
     spacing: Style.current.halfPadding
     height: childrenRect.height
 
-    onLinkUrlsChanged: {
-        root.prepareModel()
-    }
+    QtObject {
+        id: d
 
-    function prepareModel() {
-        linksModel.clear()
-        if (!root.linkUrls) {
-            return
-        }
-        root.linkUrls.split(" ").forEach(link => {
-            linksModel.append({link})
-        })
-    }
-
-    ListModel {
-        id: linksModel
-        Component.onCompleted: {
-            root.prepareModel()
-        }
+        property bool isImageLink: false
+        property int unfurledLinksCount: 0
     }
 
     Repeater {
         id: linksRepeater
-        model: linksModel // doesn't work with a JSON object model!
 
         delegate: Loader {
             id: linkMessageLoader
@@ -144,16 +131,12 @@ Column {
                 }
 
                 const whitelistHosts = Object.keys(localAccountSensitiveSettings.whitelistedUnfurlingSites)
-                const linkExists = whitelistHosts.some(function(hostname) {
-                    return linkHostname.endsWith(hostname)
-                })
+                const linkExists = whitelistHosts.some(hostname => linkHostname.endsWith(hostname))
 
-                const linkWhiteListed = linkExists && whitelistHosts.some(function(hostname) {
-                    return linkHostname.endsWith(hostname) && localAccountSensitiveSettings.whitelistedUnfurlingSites[hostname] === true
-                })
+                const linkWhiteListed = linkExists && whitelistHosts.some(hostname =>
+                    linkHostname.endsWith(hostname) && localAccountSensitiveSettings.whitelistedUnfurlingSites[hostname] === true)
 
-                const isImage = Utils.hasImageExtension(link)
-                if (!linkWhiteListed && linkExists && !RootStore.neverAskAboutUnfurlingAgain && !isImage) {
+                if (!linkWhiteListed && linkExists && !RootStore.neverAskAboutUnfurlingAgain && !model.isImage) {
                     return enableLinkComponent
                 }
 
@@ -182,19 +165,18 @@ Column {
                     }
 
                     linkFetchConnections.enabled = true
-
                     root.messageStore.getLinkPreviewData(link, linkMessageLoader.uuid)
                 }
 
-                if (isImage) {
+                if (model.isImage) {
                     if (RootStore.displayChatImages) {
                         linkData = {
                             thumbnailUrl: link
                         }
                         return unfurledImageComponent
                     }
-                    else if (!(RootStore.neverAskAboutUnfurlingAgain || (isImageLink && index > 0))) {
-                        isImageLink = true
+                    else if (!(RootStore.neverAskAboutUnfurlingAgain || (d.isImageLink && index > 0))) {
+                        d.isImageLink = true
                         return enableLinkComponent
                     }
                 }
@@ -232,6 +214,9 @@ Column {
                 onClicked: imageClicked(linkImage.imageAlias)
                 playing: root.messageStore.playAnimation
             }
+
+            Component.onCompleted: d.unfurledLinksCount++
+            Component.onDestruction: d.unfurledLinksCount--
         }
     }
 
@@ -312,6 +297,9 @@ Column {
                     Global.openLink(linkData.address)
                 }
             }
+
+            Component.onCompleted: d.unfurledLinksCount++
+            Component.onDestruction: d.unfurledLinksCount--
         }
     }
 
@@ -352,7 +340,7 @@ Column {
 
             StatusBaseText {
                 id: enableText
-                text: isImageLink ? qsTr("Enable automatic image unfurling") :
+                text: d.isImageLink ? qsTr("Enable automatic image unfurling") :
                                       qsTr("Enable link previews in chat?")
                 horizontalAlignment: Text.AlignHCenter
                 width: parent.width

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

@@ -234,6 +234,11 @@ Loader {
 
         readonly property int chatButtonSize: 32
 
+        readonly property bool isSingleImage: linkUrlsModel.count === 1 && linkUrlsModel.get(0).isImage
+                                              && `<p>${linkUrlsModel.get(0).link}</p>` === root.messageText
+
+        property int unfurledLinksCount: 0
+
         property string activeMessage
         readonly property bool isMessageActive: typeof activeMessage !== "undefined" && activeMessage === messageId
 
@@ -255,6 +260,20 @@ Loader {
         }
     }
 
+    onLinkUrlsChanged: {
+        linkUrlsModel.clear()
+        if (!root.linkUrls) {
+            return
+        }
+        root.linkUrls.split(" ").forEach(link => {
+            linkUrlsModel.append({link, isImage: Utils.hasImageExtension(link)})
+        })
+    }
+
+    ListModel {
+        id: linkUrlsModel
+    }
+
     Connections {
         enabled: d.isMessageActive
         target: root.messageContextMenu
@@ -430,6 +449,7 @@ Loader {
                               root.placeholderMessage ||
                               root.activityCenterMessage ||
                               root.isInPinnedPopup
+            hideMessage: d.isSingleImage && d.unfurledLinksCount === 1
 
             overrideBackground: root.activityCenterMessage || root.placeholderMessage
             overrideBackgroundColor: {
@@ -631,7 +651,7 @@ Loader {
 
             linksComponent: Component {
                 LinksMessageView {
-                    linkUrls: root.linkUrls
+                    linksModel: linkUrlsModel
                     container: root
                     messageStore: root.messageStore
                     store: root.rootStore
@@ -639,6 +659,9 @@ Loader {
                     onImageClicked: {
                         root.imageClicked(image);
                     }
+
+                    Component.onCompleted: d.unfurledLinksCount = Qt.binding(() => unfurledLinksCount)
+                    Component.onDestruction: d.unfurledLinksCount = 0
                 }
             }