overlay: add recorder widget

dots/.config/quickshell/ii/modules/common/Persistent.qml

@@ -84,14 +84,20 @@ Singleton {
                 property JsonObject crosshair: JsonObject {
                     property bool pinned: false
                     property bool clickthrough: true
+                    property real x: 835
+                    property real y: 490
+                }
+                property JsonObject recorder: JsonObject {
+                    property bool pinned: false
+                    property bool clickthrough: false
                     property real x: 100
-                    property real y: 100
+                    property real y: 130
                 }
                 property JsonObject volumeMixer: JsonObject {
                     property bool pinned: false
                     property bool clickthrough: false
-                    property real x: 55
+                    property real x: 100
-                    property real y: 188
+                    property real y: 320
                 }
             }
 

dots/.config/quickshell/ii/modules/overlay/OverlayContext.qml

@@ -7,7 +7,8 @@ Singleton {
     
     readonly property list<var> availableWidgets: [
         { identifier: "crosshair", materialSymbol: "point_scan" },
-        { identifier: "volumeMixer", materialSymbol: "volume_up" }
+        { identifier: "volumeMixer", materialSymbol: "volume_up" },
+        { identifier: "recorder", materialSymbol: "screen_record" },
     ]
     
     readonly property bool hasPinnedWidgets: root.pinnedWidgetIdentifiers.length > 0

dots/.config/quickshell/ii/modules/overlay/OverlayWidgetDelegateChooser.qml

@@ -8,6 +8,7 @@ import Quickshell
 import Quickshell.Bluetooth
 import qs.modules.overlay.crosshair
 import qs.modules.overlay.volumeMixer
+import qs.modules.overlay.recorder
 
 DelegateChooser {
     id: root
@@ -15,4 +16,5 @@ DelegateChooser {
 
     DelegateChoice { roleValue: "crosshair"; Crosshair {} }
     DelegateChoice { roleValue: "volumeMixer"; VolumeMixer {} }
+    DelegateChoice { roleValue: "recorder"; Recorder {} }
 }

dots/.config/quickshell/ii/modules/overlay/recorder/Recorder.qml

@@ -0,0 +1,122 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.overlay
+
+StyledOverlayWidget {
+    id: root
+
+    contentItem: Rectangle {
+        id: contentItem
+        anchors.centerIn: parent
+        color: Appearance.m3colors.m3surfaceContainer
+        property real padding: 8
+        implicitHeight: contentColumn.implicitHeight + padding * 2
+        implicitWidth: 350
+        ColumnLayout {
+            id: contentColumn
+            anchors {
+                fill: parent
+                margins: parent.padding
+            }
+            spacing: 10
+
+            Row {
+                Layout.alignment: Qt.AlignHCenter
+                spacing: 10
+
+                BigRecorderButton {
+                    materialSymbol: "screenshot_region"
+                    name: "Screenshot region"
+                    onClicked: {
+                        GlobalStates.overlayOpen = false;
+                        Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "region", "screenshot"]);
+                    }
+                }
+
+                BigRecorderButton {
+                    materialSymbol: "photo_camera"
+                    name: "Screenshot"
+                    onClicked: {
+                        GlobalStates.overlayOpen = false;
+                        Quickshell.execDetached(["bash", "-c", "grim - | wl-copy"]);
+                    }
+                }
+
+                BigRecorderButton {
+                    materialSymbol: "screen_record"
+                    name: "Record region"
+                    onClicked: {
+                        GlobalStates.overlayOpen = false;
+                        Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "region", "recordWithSound"]);
+                    }
+                }
+                
+                BigRecorderButton {
+                    materialSymbol: "capture"
+                    name: "Record screen"
+                    onClicked: {
+                        GlobalStates.overlayOpen = false;
+                        Quickshell.execDetached([Directories.recordScriptPath, "--fullscreen", "--sound"]);
+                    }
+                }
+            }
+
+            RippleButton {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: false
+                buttonRadius: height / 2
+                colBackground: Appearance.colors.colLayer3
+                colBackgroundHover: Appearance.colors.colLayer3Hover
+                colRipple: Appearance.colors.colLayer3Active
+                onClicked: {
+                    GlobalStates.overlayOpen = false;
+                    Qt.openUrlExternally(Directories.videos);
+                }
+                contentItem: Row {
+                    anchors.centerIn: parent
+                    spacing: 6
+                    MaterialSymbol {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: "animated_images"
+                        iconSize: 20
+                    }
+                    StyledText {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: qsTr("Open recordings folder")
+                    }
+                }
+            }
+        }
+    }
+
+    component BigRecorderButton: RippleButton {
+        id: bigButton
+        required property string materialSymbol
+        required property string name
+        implicitHeight: 66
+        implicitWidth: 66
+        buttonRadius: height / 2
+
+        colBackground: Appearance.colors.colLayer3
+        colBackgroundHover: Appearance.colors.colLayer3Hover
+        colRipple: Appearance.colors.colLayer3Active
+
+        contentItem: MaterialSymbol {
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            text: bigButton.materialSymbol
+            iconSize: 28
+        }
+
+        StyledToolTip {
+            text: bigButton.name
+        }
+    }
+}

dots/.config/quickshell/ii/modules/overlay/volumeMixer/VolumeMixer.qml

@@ -11,8 +11,8 @@ StyledOverlayWidget {
         anchors.centerIn: parent
         color: Appearance.m3colors.m3surfaceContainer
         property real padding: 16
-        implicitHeight: 700
+        implicitHeight: 600
-        implicitWidth: 400
+        implicitWidth: 350
 
         VolumeDialogContent {
             anchors.fill: parent