Support drag and drop for files and text in chat

src/gui/Pages/Chat/ChatPage.qml

@@ -25,6 +25,11 @@ HColumnPage {
     readonly property alias leftBanner: leftBanner
     readonly property alias composer: composer
 
+    readonly property DropArea uploadDropArea: UploadDropArea {
+        parent: window.mainUI
+        anchors.fill: parent
+    }
+
 
     padding: 0
     column.spacing: 0

src/gui/Pages/Chat/UploadDropArea.qml

@@ -0,0 +1,95 @@
+// Copyright Mirage authors & contributors <https://github.com/mirukana/mirage>
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+import "AutoCompletion"
+import "Banners"
+import "Composer"
+import "FileTransfer"
+import "Timeline"
+
+DropArea {
+    property var dragEvent: null
+    property int insertedTextStart: -1
+    property int insertedTextEnd: -1
+
+    function eventFiles() {
+        if (! dragEvent) return []
+        return dragEvent.urls.filter(uri => uri.match(/^file:\/\//))
+    }
+
+    function reset() {
+        if (popup.opened) popup.close()
+        dragEvent         = null
+        insertedTextStart = -1
+        insertedTextEnd   = -1
+    }
+
+    onPositionChanged: drag => dragEvent = drag
+
+    onEntered: drag => {
+        print(JSON.stringify( drag, null, 4))
+        dragEvent = drag
+        if (eventFiles().length && ! popup.opened) popup.open()
+        if (! drag.hasText || eventFiles().length) return
+
+        insertedTextStart = composer.messageArea.cursorPosition
+        composer.messageArea.insertAtCursor(drag.text.replace(/\n+$/, ""))
+        insertedTextEnd = composer.messageArea.cursorPosition
+    }
+
+    onExited: {
+        if (insertedTextStart !== -1 && insertedTextEnd !== -1)
+            composer.messageArea.remove(insertedTextStart, insertedTextEnd)
+
+        reset()
+    }
+
+    onDropped: drag => {
+        dragEvent = drag
+
+        for (const path of eventFiles()) {
+            window.makePopup(
+                "Popups/ConfirmUploadPopup.qml",
+                {
+                    userId: chat.userId,
+                    roomId: chat.roomId,
+                    roomName: chat.roomInfo.display_name,
+                    filePath: path.replace(/^file:\/\//, ""),
+                    replyToEventId: chat.replyToEventId,
+                },
+                popup => popup.replied.connect(chat.clearReplyTo),
+            )
+            drag.accepted = true
+        }
+
+        reset()
+    }
+
+    HPopup {
+        id: popup
+        background: null
+
+        Column {
+            spacing: theme.spacing
+
+            HIcon {
+                anchors.horizontalCenter: parent.horizontalCenter
+                svgName: "drop-file-upload"
+                dimension: Math.min(
+                    56 * theme.uiScale,
+                    Math.min(window.width, window.height) / 2,
+                )
+            }
+
+            HLabel {
+                wrapMode: HLabel.Wrap
+                width: Math.min(implicitWidth, popup.maximumPreferredWidth)
+                font.pixelSize: theme.fontSize.big
+                text: qsTr("Drop files to send")
+            }
+        }
+    }
+}

src/icons/thin/drop-file-upload.svg

@@ -0,0 +1,3 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m23 0v20h-8v-2h6v-16h-18v16h6v2h-8v-20zm-12 13h-4l5-6 5 6h-4v11h-2z"/>
+</svg>