Create component for showing a maximize version of a code snippet

src/CMakeLists.txt

@@ -288,6 +288,7 @@ qt_add_qml_module(neochat URI org.kde.neochat NO_PLUGIN
         qml/ConfirmUrlDialog.qml
         qml/AccountSwitchDialog.qml
         qml/ConfirmLeaveDialog.qml
+        qml/CodeMaximizeComponent.qml
     RESOURCES
         qml/confetti.png
         qml/glowdot.png

src/qml/CodeMaximizeComponent.qml

@@ -0,0 +1,169 @@
+// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+import org.kde.kirigamiaddons.labs.components as Components
+import org.kde.kirigami as Kirigami
+import org.kde.syntaxhighlighting
+
+import org.kde.neochat
+
+Components.AbstractMaximizeComponent {
+    id: root
+
+    /**
+     * @brief The message author.
+     *
+     * This should consist of the following:
+     *  - id - The matrix ID of the author.
+     *  - isLocalUser - Whether the author is the local user.
+     *  - avatarSource - The mxc URL for the author's avatar in the current room.
+     *  - avatarMediaId - The media ID of the author's avatar.
+     *  - avatarUrl - The mxc URL for the author's avatar.
+     *  - displayName - The display name of the author.
+     *  - display - The name of the author.
+     *  - color - The color for the author.
+     *  - object - The Quotient::User object for the author.
+     *
+     * @sa Quotient::User
+     */
+    property var author
+
+    /**
+     * @brief The timestamp of the message.
+     */
+    property var time
+
+    /**
+     * @brief The code text to show.
+     */
+    property string codeText
+
+    /**
+     * @brief The code language, if any.
+     */
+    property string language
+
+    actions: [
+        Kirigami.Action {
+            text: i18nc("@action", "Copy to clipboard")
+            icon.name: "edit-copy"
+            onTriggered: Clipboard.saveText(root.codeText)
+        }
+    ]
+
+    leading: RowLayout {
+        Components.Avatar {
+            id: userAvatar
+            implicitWidth: Kirigami.Units.iconSizes.medium
+            implicitHeight: Kirigami.Units.iconSizes.medium
+
+            name: root.author.name ?? root.author.displayName
+            source: root.author.avatarSource
+            color: root.author.color
+        }
+        ColumnLayout {
+            spacing: 0
+            QQC2.Label {
+                id: userLabel
+
+                text: root.author.name ?? root.author.displayName
+                color: root.author.color
+                font.weight: Font.Bold
+                elide: Text.ElideRight
+            }
+            QQC2.Label {
+                id: dateTimeLabel
+                text: root.time.toLocaleString(Qt.locale(), Locale.ShortFormat)
+                color: Kirigami.Theme.disabledTextColor
+                elide: Text.ElideRight
+            }
+        }
+    }
+
+    content: QQC2.ScrollView {
+        id: codeScrollView
+        contentWidth: root.width
+
+        // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+        QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+        QQC2.TextArea {
+            id: codeText
+            topPadding: Kirigami.Units.smallSpacing
+            bottomPadding: Kirigami.Units.smallSpacing
+            leftPadding: lineNumberColumn.width + lineNumberColumn.anchors.leftMargin + Kirigami.Units.smallSpacing * 2
+
+            text: root.codeText
+            readOnly: true
+            textFormat: TextEdit.PlainText
+            wrapMode: TextEdit.Wrap
+            color: Kirigami.Theme.textColor
+
+            font.family: "monospace"
+
+            Kirigami.SpellCheck.enabled: false
+
+            onWidthChanged: lineModel.resetModel()
+            onHeightChanged: lineModel.resetModel()
+
+            SyntaxHighlighter {
+                property string definitionName: Repository.definitionForName(root.language).name
+                textEdit: definitionName == "None" ? null : codeText
+                definition: definitionName
+            }
+            ColumnLayout {
+                id: lineNumberColumn
+                anchors {
+                    top: codeText.top
+                    topMargin: codeText.topPadding + 1
+                    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"
+                    }
+                }
+            }
+            Kirigami.Separator {
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    leftMargin: lineNumberColumn.width + lineNumberColumn.anchors.leftMargin + Kirigami.Units.smallSpacing
+                }
+            }
+            TapHandler {
+                acceptedButtons: Qt.LeftButton
+                onTapped: root.close()
+            }
+
+            background: null
+        }
+
+        background: Rectangle {
+            Kirigami.Theme.colorSet: Kirigami.Theme.View
+            Kirigami.Theme.inherit: false
+            color: Kirigami.Theme.backgroundColor
+        }
+    }
+}

src/qml/RoomPage.qml

@@ -298,6 +298,15 @@ Kirigami.Page {
             });
             popup.open();
         }
+
+        function onShowMaximizedCode(author, time, codeText, language) {
+            let popup = Qt.createComponent('org.kde.neochat', 'CodeMaximizeComponent.qml').createObject(QQC2.Overlay.overlay, {
+                author: author,
+                time: time,
+                codeText: codeText,
+                language: language
+            }).open();
+        }
     }
 
     Component {

src/roommanager.cpp

@@ -158,6 +158,14 @@ void RoomManager::maximizeMedia(int index)
     Q_EMIT showMaximizedMedia(index);
 }
 
+void RoomManager::maximizeCode(const QVariantMap &author, const QDateTime &time, const QString &codeText, const QString &language)
+{
+    if (codeText.isEmpty()) {
+        return;
+    }
+    Q_EMIT showMaximizedCode(author, time, codeText, language);
+}
+
 void RoomManager::requestFullScreenClose()
 {
     Q_EMIT closeFullScreen();

src/roommanager.h

@@ -203,6 +203,8 @@ public:
      */
     Q_INVOKABLE void maximizeMedia(int index);
 
+    Q_INVOKABLE void maximizeCode(const QVariantMap &author, const QDateTime &time, const QString &codeText, const QString &language);
+
     /**
      * @brief Request that any full screen overlay currently open closes.
      */
@@ -264,6 +266,11 @@ Q_SIGNALS:
      */
     void showMaximizedMedia(int index);
 
+    /**
+     * @brief Request a block of code is shown maximized.
+     */
+    void showMaximizedCode(const QVariantMap &author, const QDateTime &time, const QString &codeText, const QString &language);
+
     /**
      * @brief Request that any full screen overlay closes.
      */

src/timeline/Bubble.qml

@@ -154,6 +154,7 @@ QQC2.Control {
             delegate: MessageComponentChooser {
                 room: root.room
                 index: root.index
+                time: root.time
                 actionsHandler: root.actionsHandler
                 timeline: root.timeline
                 maxContentWidth: root.maxContentWidth

src/timeline/CodeComponent.qml

@@ -13,6 +13,29 @@ import org.kde.neochat
 QQC2.Control {
     id: root
 
+    /**
+     * @brief The message author.
+     *
+     * This should consist of the following:
+     *  - id - The matrix ID of the author.
+     *  - isLocalUser - Whether the author is the local user.
+     *  - avatarSource - The mxc URL for the author's avatar in the current room.
+     *  - avatarMediaId - The media ID of the author's avatar.
+     *  - avatarUrl - The mxc URL for the author's avatar.
+     *  - displayName - The display name of the author.
+     *  - display - The name of the author.
+     *  - color - The color for the author.
+     *  - object - The Quotient::User object for the author.
+     *
+     * @sa Quotient::User
+     */
+    required property var author
+
+    /**
+     * @brief The timestamp of the message.
+     */
+    required property var time
+
     /**
      * @brief The display text of the message.
      */
@@ -113,6 +136,7 @@ QQC2.Control {
 
             TapHandler {
                 acceptedButtons: Qt.LeftButton
+                onTapped: RoomManager.maximizeCode(root.author, root.time, root.display, root.componentAttributes.class)
                 onLongPressed: root.showMessageMenu()
             }
 

src/timeline/MessageComponentChooser.qml

@@ -22,6 +22,11 @@ DelegateChooser {
      */
     required property var index
 
+    /**
+     * @brief The timestamp of the message.
+     */
+    required property var time
+
     /**
      * @brief The ActionsHandler object to use.
      *
@@ -89,6 +94,7 @@ DelegateChooser {
     DelegateChoice {
         roleValue: MessageComponentType.Code
         delegate: CodeComponent {
+            time: root.time
             maxContentWidth: root.maxContentWidth
             onSelectedTextChanged: selectedText => {
                 root.selectedTextChanged(selectedText);