More file previews

This adds previews for downloaded pdfs and code files.

![image](/uploads/9c199e91a1b4ea296c9b82a76e11038b/image.png)

![image](/uploads/17ea3869469417ee78e650ce750dbeb7/image.png)

src/timeline/CMakeLists.txt

@@ -29,6 +29,7 @@ qt_add_qml_module(timeline
         LocationComponent.qml
         MessageEditComponent.qml
         MimeComponent.qml
+        PdfPreviewComponent.qml
         PollComponent.qml
         QuoteComponent.qml
         ReplyComponent.qml

src/timeline/CodeComponent.qml

@@ -41,44 +41,25 @@ QQC2.Control {
     Layout.fillWidth: true
     Layout.fillHeight: true
     Layout.maximumWidth: root.maxContentWidth
+    Layout.maximumHeight: Kirigami.Units.gridUnit * 20
 
     topPadding: 0
     bottomPadding: 0
+    leftPadding: 0
+    rightPadding: 0
 
-    contentItem: RowLayout {
-        spacing: Kirigami.Units.smallSpacing
+    contentItem: QQC2.ScrollView {
+        id: codeScrollView
+        contentWidth: root.maxContentWidth
 
-        ColumnLayout {
-            id: lineNumberColumn
-            spacing: 0
-            Repeater {
-                id: repeater
-                model: LineModel {
-                    id: lineModel
-                    document: codeText.textDocument
-                }
-                delegate: QQC2.Label {
-                    id: label
-                    required property int index
-                    required property int docLineHeight
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: docLineHeight
-                    horizontalAlignment: Text.AlignRight
-                    text: index + 1
-                    color: Kirigami.Theme.disabledTextColor
+        // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+        QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
 
-                    font.family: "monospace"
-                }
-            }
-        }
-        Kirigami.Separator {
-            Layout.fillHeight: true
-        }
-        TextEdit {
+        QQC2.TextArea {
             id: codeText
-            Layout.fillWidth: true
             topPadding: Kirigami.Units.smallSpacing
             bottomPadding: Kirigami.Units.smallSpacing
+            leftPadding: lineNumberColumn.width + lineNumberColumn.anchors.leftMargin + Kirigami.Units.smallSpacing * 2
 
             text: root.display
             readOnly: true
@@ -100,11 +81,51 @@ QQC2.Control {
                 textEdit: definitionName == "None" ? null : codeText
                 definition: definitionName
             }
+            ColumnLayout {
+                id: lineNumberColumn
+                anchors {
+                    top: codeText.top
+                    topMargin: codeText.topPadding
+                    left: codeText.left
+                    leftMargin: Kirigami.Units.smallSpacing
+                }
+                spacing: 0
+                Repeater {
+                    id: repeater
+                    model: LineModel {
+                        id: lineModel
+                        document: codeText.textDocument
+                    }
+                    delegate: QQC2.Label {
+                        id: label
+                        required property int index
+                        required property int docLineHeight
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: docLineHeight
+                        horizontalAlignment: Text.AlignRight
+                        text: index + 1
+                        color: Kirigami.Theme.disabledTextColor
+
+                        font.family: "monospace"
+                    }
+                }
+            }
 
             TapHandler {
                 acceptedButtons: Qt.LeftButton
                 onLongPressed: root.showMessageMenu()
             }
+
+            background: null
+        }
+    }
+
+    Kirigami.Separator {
+        anchors {
+            top: root.top
+            bottom: root.bottom
+            left: root.left
+            leftMargin: lineNumberColumn.width + lineNumberColumn.anchors.leftMargin + Kirigami.Units.smallSpacing
         }
     }
 
@@ -113,7 +134,7 @@ QQC2.Control {
             top: parent.top
             topMargin: Kirigami.Units.smallSpacing
             right: parent.right
-            rightMargin: Kirigami.Units.smallSpacing
+            rightMargin: (codeScrollView.QQC2.ScrollBar.vertical.visible ? codeScrollView.QQC2.ScrollBar.vertical.width : 0) + Kirigami.Units.smallSpacing
         }
         visible: root.hovered
         icon.name: "edit-copy"

src/timeline/MessageComponentChooser.qml

@@ -124,6 +124,13 @@ DelegateChooser {
         }
     }
 
+    DelegateChoice {
+        roleValue: MessageComponentType.Pdf
+        delegate: PdfPreviewComponent {
+            maxContentWidth: root.maxContentWidth
+        }
+    }
+
     DelegateChoice {
         roleValue: MessageComponentType.Poll
         delegate: PollComponent {

src/timeline/PdfPreviewComponent.qml

@@ -0,0 +1,44 @@
+// SPDX-FileCopyrightText: 2024 Tobias Fella <tobias.fella@kde.org>
+// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick
+import QtQuick.Layouts
+
+import org.kde.neochat
+
+Rectangle {
+    id: root
+
+    /**
+     * @brief FileTransferInfo for any downloading files.
+     */
+    required property var fileTransferInfo
+
+    /**
+     * @brief The attributes of the component.
+     */
+    required property var componentAttributes
+
+    /**
+     * @brief The maximum width that the bubble's content can be.
+     */
+    property real maxContentWidth: -1
+
+    Layout.preferredWidth: mediaSizeHelper.currentSize.width
+    Layout.preferredHeight: mediaSizeHelper.currentSize.height
+
+    color: "white"
+
+    Image {
+        anchors.fill: root
+        source: root?.fileTransferInfo.localPath ?? ""
+
+        MediaSizeHelper {
+            id: mediaSizeHelper
+            contentMaxWidth: root.maxContentWidth
+            mediaWidth: root.componentAttributes.size.width
+            mediaHeight: root.componentAttributes.size.height
+        }
+    }
+}