feat(StatusMessage): add support for `messageAttachments`

Prior to this commit, a `StatusMessage` can hold only a single
`messageImage`.

There will be scenarios where messages can have multiple attachments.
This is the case when importing messages from discord.
Hence, this commit introduces a new `messageAttachments` property which
is a whitespace separated list of attachment URLs (very analogous to the
already existing `linkUrls` property).

For now, we can safely assume these URLs will resolve to image content.
In future versions however, we might want to support additional content
types to handle any byte stream.
We will then change `messageAttachments` from `string` to a list model
that holds `attachment`s where we also have access to its `contentType`.
This will allow us to decide at runtime which component should be used
to view/play the attachment.

src/StatusQ/Components/StatusMessage.qml

@@ -37,6 +37,7 @@ Rectangle {
     property string errorLoadingImageText: ""
     property string audioMessageInfoText: ""
     property string pinnedMsgInfoText: ""
+    property string messageAttachments: ""
     property var reactionIcons: [
         Emoji.iconSource("❤"),
         Emoji.iconSource("👍"),
@@ -101,6 +102,20 @@ Rectangle {
         messageFoundAnimation.start();
     }
 
+    onMessageAttachmentsChanged: {
+        root.prepareAttachmentsModel()
+    }
+
+    function prepareAttachmentsModel() {
+        attachmentsModel.clear()
+        if (!root.messageAttachments) {
+            return
+        }
+        root.messageAttachments.split(" ").forEach(source => {
+            attachmentsModel.append({source})
+        })
+    }
+
     implicitWidth: messageLayout.implicitWidth
                    + messageLayout.anchors.leftMargin
                    + messageLayout.anchors.rightMargin
@@ -316,6 +331,24 @@ Rectangle {
                         shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
                     }
                 }
+
+                Loader {
+                    active: !!root.messageAttachments && !editMode
+                    visible: active
+                    sourceComponent: Column {
+                        spacing: 4
+                        Layout.fillWidth: true
+                        Repeater {
+                            model: attachmentsModel
+                            delegate: StatusImageMessage {
+                                source: model.source
+                                onClicked: root.imageClicked(image, mouse, imageSource)
+                                shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                            }
+                        }
+                    }
+                }
+
                 Loader {
                     active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
                     visible: active
@@ -406,4 +439,11 @@ Rectangle {
         anchors.topMargin: -8
         visible: hoverHandler.hovered && !root.hideQuickActions
     }
+
+    ListModel {
+        id: attachmentsModel
+        Component.onCompleted: {
+            root.prepareAttachmentsModel()
+        }
+    }
 }