utilities: add recording delete confirmation

4 files changed, 138 insertions, 9 deletions

diff --git a/modules/utilities/Content.qml b/modules/utilities/Content.qml
index 3e29402..ea8f93f 100644
--- a/modules/utilities/Content.qml
+++ b/modules/utilities/Content.qml
@@ -1,23 +1,36 @@
 import "cards"
 import qs.config
+import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+Item {
     id: root
 
     required property var props
     required property var visibilities
 
-    spacing: Appearance.spacing.normal
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
 
-    IdleInhibit {}
+    ColumnLayout {
+        id: layout
 
-    Record {
-        props: root.props
-        visibilities: root.visibilities
+        anchors.fill: parent
+        spacing: Appearance.spacing.normal
+
+        IdleInhibit {}
+
+        Record {
+            props: root.props
+            visibilities: root.visibilities
+        }
+
+        Toggles {
+            visibilities: root.visibilities
+        }
     }
 
-    Toggles {
-        visibilities: root.visibilities
+    RecordingDeleteModal {
+        props: root.props
     }
 }
diff --git a/modules/utilities/RecordingDeleteModal.qml b/modules/utilities/RecordingDeleteModal.qml
new file mode 100644
index 0000000..9b6f3d5
--- /dev/null
+++ b/modules/utilities/RecordingDeleteModal.qml
@@ -0,0 +1,114 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.services
+import qs.config
+import Caelestia
+import QtQuick
+import QtQuick.Layouts
+
+Loader {
+    id: root
+
+    required property var props
+
+    anchors.fill: parent
+
+    opacity: root.props.recordingConfirmDelete ? 1 : 0
+    active: opacity > 0
+    asynchronous: true
+
+    sourceComponent: MouseArea {
+        id: deleteConfirmation
+
+        property string path
+
+        Component.onCompleted: path = root.props.recordingConfirmDelete
+
+        hoverEnabled: true
+        onClicked: root.props.recordingConfirmDelete = ""
+
+        StyledRect {
+            anchors.centerIn: parent
+            radius: Appearance.rounding.large
+            color: Colours.palette.m3surfaceContainerHigh
+
+            scale: 0.5
+            Component.onCompleted: scale = Qt.binding(() => root.props.recordingConfirmDelete ? 1 : 0.5)
+
+            width: Math.min(parent.width - Appearance.padding.large * 2, implicitWidth)
+            implicitWidth: deleteConfirmationLayout.implicitWidth + Appearance.padding.large * 3
+            implicitHeight: deleteConfirmationLayout.implicitHeight + Appearance.padding.large * 3
+
+            Elevation {
+                anchors.fill: parent
+                radius: parent.radius
+                z: -1
+                level: 3
+            }
+
+            ColumnLayout {
+                id: deleteConfirmationLayout
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large * 1.5
+                spacing: Appearance.spacing.normal
+
+                StyledText {
+                    text: qsTr("Delete recording?")
+                    font.pointSize: Appearance.font.size.large
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: qsTr("Recording '%1' will be permanently deleted.").arg(deleteConfirmation.path)
+                    color: Colours.palette.m3onSurfaceVariant
+                    font.pointSize: Appearance.font.size.small
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                }
+
+                RowLayout {
+                    Layout.topMargin: Appearance.spacing.normal
+                    Layout.alignment: Qt.AlignRight
+                    spacing: Appearance.spacing.normal
+
+                    TextButton {
+                        text: qsTr("Cancel")
+                        type: TextButton.Text
+                        label.color: Colours.palette.m3primary
+                        stateLayer.color: Colours.palette.m3primary
+
+                        function onClicked(): void {
+                            root.props.recordingConfirmDelete = "";
+                        }
+                    }
+
+                    TextButton {
+                        text: qsTr("Delete")
+                        type: TextButton.Text
+                        label.color: Colours.palette.m3primary
+                        stateLayer.color: Colours.palette.m3primary
+
+                        function onClicked(): void {
+                            CUtils.deleteFile(Qt.resolvedUrl(root.props.recordingConfirmDelete));
+                            root.props.recordingConfirmDelete = "";
+                        }
+                    }
+                }
+            }
+
+            Behavior on scale {
+                Anim {
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+            }
+        }
+    }
+
+    Behavior on opacity {
+        Anim {}
+    }
+}
diff --git a/modules/utilities/Wrapper.qml b/modules/utilities/Wrapper.qml
index 4de4014..137f0ce 100644
--- a/modules/utilities/Wrapper.qml
+++ b/modules/utilities/Wrapper.qml
@@ -11,6 +11,7 @@ Item {
     required property var visibilities
     readonly property PersistentProperties props: PersistentProperties {
         property bool recordingListExpanded: false
+        property string recordingConfirmDelete
 
         reloadableId: "utilities"
     }
diff --git a/modules/utilities/cards/Record.qml b/modules/utilities/cards/Record.qml
index c993785..9707176 100644
--- a/modules/utilities/cards/Record.qml
+++ b/modules/utilities/cards/Record.qml
@@ -193,9 +193,10 @@ StyledRect {
                     icon: "delete_forever"
                     type: IconButton.Text
                     label.color: Colours.palette.m3error
+                    stateLayer.color: Colours.palette.m3error
 
                     function onClicked(): void {
-                        CUtils.deleteFile(Qt.resolvedUrl(recording.modelData.path));
+                        root.props.recordingConfirmDelete = recording.modelData.path;
                     }
                 }
             }