osd: separate, make keybinds prefer qs over ags

.config/quickshell/modules/onScreenDisplay/OnScreenDisplayBrightness.qml

@@ -0,0 +1,127 @@
+import "root:/services/"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+
+Scope {
+    id: root
+    property bool showOsdValues: false
+
+    function triggerOsd() {
+        showOsdValues = true
+        osdTimeout.restart()
+    }
+
+    Timer {
+        id: osdTimeout
+        interval: ConfigOptions.osd.timeout
+        repeat: false
+        running: false
+        onTriggered: {
+            showOsdValues = false
+        }
+    }
+
+    Connections {
+        target: Brightness
+        function onValueChanged() {
+            if (!Brightness.ready) return
+            root.triggerOsd()
+        }
+    }
+
+    Connections {
+        target: Audio.sink.audio
+        function onVolumeChanged() {
+            if (!Audio.ready) return
+            root.showOsdValues = false
+        }
+    }
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            property var modelData
+
+            screen: modelData
+            exclusionMode: ExclusionMode.Normal
+            WlrLayershell.namespace: "quickshell:onScreenDisplay"
+            WlrLayershell.layer: WlrLayer.Overlay
+            color: "transparent"
+
+            anchors {
+                top: true
+                left: true
+                right: true
+            }
+            mask: Region {
+                item: osdValuesWrapper
+            }
+
+            width: columnLayout.implicitWidth
+            height: columnLayout.implicitHeight
+            visible: showOsdValues
+
+            ColumnLayout {
+                id: columnLayout
+                anchors.horizontalCenter: parent.horizontalCenter
+                Item {
+                    height: 1 // Prevent Wayland protocol error
+                }
+                Item {
+                    id: osdValuesWrapper
+                    // Extra space for shadow
+                    implicitHeight: true ? (osdValues.implicitHeight + Appearance.sizes.elevationMargin * 2) : 0
+                    implicitWidth: osdValues.implicitWidth + Appearance.sizes.elevationMargin * 2
+                    clip: true
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: root.showOsdValues = false
+                    }
+
+                    Behavior on implicitHeight {
+                        NumberAnimation {
+                            duration: Appearance.animation.menuDecel.duration
+                            easing.type: Appearance.animation.menuDecel.type
+                        }
+                    }
+
+                    OsdValueIndicator {
+                        id: osdValues
+                        anchors.centerIn: parent 
+                        value: Brightness.value
+                        icon: "light_mode"
+                        name: "Brightness"
+                    }
+                }
+            }
+
+        }
+
+    }
+
+    IpcHandler {
+		target: "osdBrightness"
+
+		function trigger() {
+            root.triggerOsd()
+        }
+
+        function hide() {
+            showOsdValues = false
+        }
+
+        function toggle() {
+            showOsdValues = !showOsdValues
+        }
+	}
+
+}

.config/quickshell/modules/onScreenDisplay/OnScreenDisplayVolume.qml

@@ -28,18 +28,18 @@ Scope {
     }
 
     Connections {
-        target: Brightness
-        function onValueChanged() {
-            if (!Brightness.ready) return
+        target: Audio.sink.audio
+        function onVolumeChanged() {
+            if (!Audio.ready) return
             root.triggerOsd()
         }
     }
 
     Connections {
-        target: Audio.sink.audio
-        function onVolumeChanged() {
-            if (!Audio.ready) return
-            root.triggerOsd()
+        target: Brightness
+        function onValueChanged() {
+            if (!Brightness.ready) return
+            root.showOsdValues = false
         }
     }
 
@@ -61,7 +61,7 @@ Scope {
                 right: true
             }
             mask: Region {
-                item: columnLayout
+                item: osdValuesWrapper
             }
 
             width: columnLayout.implicitWidth
@@ -75,10 +75,18 @@ Scope {
                     height: 1 // Prevent Wayland protocol error
                 }
                 Item {
-                    implicitHeight: true ? osdValues.implicitHeight : 0
-                    implicitWidth: osdValues.implicitWidth
+                    id: osdValuesWrapper
+                    // Extra space for shadow
+                    implicitHeight: true ? (osdValues.implicitHeight + Appearance.sizes.elevationMargin * 2) : 0
+                    implicitWidth: osdValues.implicitWidth + Appearance.sizes.elevationMargin * 2
                     clip: true
 
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onEntered: root.showOsdValues = false
+                    }
+
                     Behavior on implicitHeight {
                         NumberAnimation {
                             duration: Appearance.animation.menuDecel.duration
@@ -86,11 +94,12 @@ Scope {
                         }
                     }
 
-                    OsdValues {
+                    OsdValueIndicator {
                         id: osdValues
-                        anchors.bottom: parent.bottom
-                        // height: showOsdValues ? implicitHeight : 0
-                        // implicitHeight: 0
+                        anchors.centerIn: parent 
+                        value: Audio.sink.audio.volume
+                        icon: "volume_up"
+                        name: "Volume"
                     }
                 }
             }
@@ -100,7 +109,7 @@ Scope {
     }
 
     IpcHandler {
-		target: "osd"
+		target: "osdVolume"
 
 		function trigger() {
             root.triggerOsd()

.config/quickshell/modules/onScreenDisplay/OsdValues.qml

@@ -1,24 +0,0 @@
-import "root:/services"
-import "root:/modules/common"
-import "root:/modules/common/widgets"
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
-import Qt5Compat.GraphicalEffects
-
-RowLayout {
-    spacing: -5
-
-    OsdValueIndicator {
-        value: Brightness.value
-        icon: "light_mode"
-        name: "Brightness"
-    }
-    OsdValueIndicator {
-        value: Audio.sink.audio.volume
-        icon: "volume_up"
-        name: "Volume"
-    }
-}