fix: volume-osd popup

shell/bar/Bar.qml

@@ -47,12 +47,13 @@ Variants {
                 Workspaces {
                     screen: root.screen
                     Layout.fillHeight: true
+                    Layout.preferredWidth: height
                 }
 
-                ActiveWindow {
+                // ActiveWindow {
-                    id: activeWindow
+                //     id: activeWindow
-                    Layout.preferredWidth: 400
+                //     Layout.preferredWidth: 400
-                }
+                // }
             }
 
             // PowerMenu {
@@ -94,6 +95,7 @@ Variants {
                 Clock {
                     id: clock
                     color: ShellSettings.colors.active
+                    Layout.leftMargin: 5
                 }
             }
         }

shell/bar/Workspaces.qml

@@ -6,7 +6,7 @@ import qs
 
 RowLayout {
     spacing: 6
-    visible: Hyprland.monitors.values.length != 0
+    visible: Hyprland.workspaces.values.some(ws => ws.monitor === Hyprland.monitorFor(screen))
 
     required property var screen
 

shell/screencapture/Controller.qml

@@ -5,6 +5,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
 import QtQuick
+import qs
 
 Singleton {
     id: root
@@ -53,10 +54,30 @@ Singleton {
                         const height = Math.floor(selection.height);
 
                         let position = `${x},${y} ${width}x${height}`;
-                        let path = "/home/koss/Pictures/screenshot.png";
+
+                        // i hate javascript
+                        let date = new Date();
+                        let year = date.getFullYear();
+                        let month = date.getMonth();
+                        let day = date.getDay();
+                        let dateString = `${year}-${month}-${day}`;
+
+                        let hour = date.getHours();
+                        let minutes = date.getMinutes();
+                        let seconds = date.getSeconds();
+                        let timeString = `${hour}:${minutes}:${seconds}`;
+
+                        let fileName = `screenshot-${dateString}-${timeString}.png`
+                        const path = `${ShellSettings.settings.screenshotPath}/${fileName}`;
+
+                        console.log(`Screenshot saved to ${path}`);
+
+                        // take a screenshot with grim, probably a better way to get this path...
+                        let scriptUrl = Qt.resolvedUrl("root:scripts/screenshot.sh").toLocaleString();
+                        let scriptPath = scriptUrl.replace(/^(file:\/{2})/, "");
 
                         Quickshell.execDetached({
-                            command: ["grim", "-g", position, path]
+                            command: ["sh", scriptPath, position, path]
                         });
 
                         root.windowOpen = false;

shell/screencapture/SelectionRectangle.qml

@@ -9,10 +9,17 @@ Item {
     property color overlayColor: "#80000000"
     property rect selectionRect: Qt.rect(0, 0, 0, 0)
     property point startPosition: Qt.point(0, 0)
+    property real borderSize: 2
+
     signal areaSelected(rect selection)
- 
+
-    // only send signal when selection rectangle has finished 
+    // only send signal when selection rectangle has finished
-    onVisibleChanged: areaSelected(selectionRect)
+    onVisibleChanged: {
+        if (!visible)
+            selectionRect.width -= borderSize;
+            selectionRect.height -= borderSize;
+            areaSelected(selectionRect);
+    }
 
     MouseArea {
         id: selectionArea
@@ -94,7 +101,7 @@ Item {
         id: rectangle
         color: "transparent"
         border.color: ShellSettings.colors.active_translucent
-        border.width: 2
+        border.width: root.borderSize
         x: 0
         y: 0
         width: 0

shell/scripts/screenshot.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env sh
+
+# Very basic script for taking a screenshot and then
+# copying it the clipboard
+
+if [ "$#" -ne 2 ]; then
+    echo "Usage: $0 <geometry> <path>"
+    exit 1
+fi
+
+# create directory if doesn't already exist
+mkdir -p ~/Pictures
+
+# 1 - Geometry
+# 2 - Path
+grim -g "$1" $2
+wl-copy <$2

shell/volume-osd/Controller.qml

@@ -6,7 +6,8 @@ import Qt5Compat.GraphicalEffects
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Services.Pipewire
-import ".."
+import qs
+import qs.widgets
 
 Scope {
     id: root
@@ -20,6 +21,7 @@ Scope {
         target: Pipewire.defaultAudioSink?.audio
 
         function onVolumeChanged() {
+            console.log("Volume Changed, showing OSD.");
             root.shouldShowOsd = true;
             hideTimer.restart();
         }
@@ -36,21 +38,19 @@ Scope {
     LazyLoader {
         active: root.shouldShowOsd
 
-        PopupWindow {
+        PanelWindow {
-            implicitWidth: 50
+            implicitWidth: 250
-            implicitHeight: 275
+            implicitHeight: 50
             color: "transparent"
-
+            exclusiveZone: 0
-            // An empty click mask prevents the window from blocking mouse events.
+            visible: true
             mask: Region {}
+            anchors.bottom: true
+            margins.bottom: screen.height / 10
 
-            Rectangle {
+            StyledRectangle {
                 anchors.fill: parent
-                radius: 8
+                // radius: 8
-                color: {
-                    let color = ShellSettings.colors["surface"];
-                    return Qt.rgba(color.r, color.g, color.b, 0.8);
-                }
 
                 RowLayout {
                     anchors {
@@ -69,10 +69,7 @@ Scope {
                         Layout.fillWidth: true
                         implicitHeight: 10
                         radius: 20
-                        color: {
+                        color: ShellSettings.colors.inactive
-                            let color = ShellSettings.colors["inverse_surface"];
-                            return Qt.rgba(color.r, color.g, color.b, 0.5);
-                        }
 
                         layer.enabled: true
                         layer.effect: OpacityMask {
@@ -85,7 +82,7 @@ Scope {
                         }
 
                         Rectangle {
-                            color: ShellSettings.colors["primary"]
+                            color: ShellSettings.colors.active
                             anchors {
                                 left: parent.left
                                 top: parent.top