osd: separate, make keybinds prefer qs over ags

.config/hypr/hyprland/keybinds.conf

@@ -5,8 +5,8 @@ bindl = Alt ,XF86AudioMute, exec, wpctl set-mute @DEFAULT_SOURCE@ toggle # [hidd
 bindl = Super ,XF86AudioMute, exec, wpctl set-mute @DEFAULT_SOURCE@ toggle # [hidden]
 bindl = ,XF86AudioMute, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 0% # [hidden]
 bindl = Super+Shift,M, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 0% # [hidden]
-bindle=, XF86AudioRaiseVolume, exec, wpctl set-volume -l 1 @DEFAULT_AUDIO_SINK@ 5%+ # [hidden]
+bindle=, XF86AudioRaiseVolume, exec, wpctl set-volume -l 1 @DEFAULT_AUDIO_SINK@ 2%+ # [hidden]
-bindle=, XF86AudioLowerVolume, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%- # [hidden]
+bindle=, XF86AudioLowerVolume, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 2%- # [hidden]
 
 # Uncomment these if you can't get AGS to work
 #bindle=, XF86MonBrightnessUp, exec, brightnessctl set '12.75+'
@@ -172,14 +172,12 @@ bind = Super, Comma, exec, agsv1 run-js 'openColorScheme.value = true; Utils.tim
 bind = Super, K, exec, for ((i=0; i<$(hyprctl monitors -j | jq length); i++)); do agsv1 -t "osk""$i"; done # Toggle on-screen keyboard
 bind = Ctrl+Alt, Delete, exec, for ((i=0; i<$(hyprctl monitors -j | jq length); i++)); do agsv1 -t "session""$i"; done # Toggle power menu
 bind = Ctrl+Super, G, exec, for ((i=0; i<$(hyprctl monitors -j | jq length); i++)); do agsv1 -t "crosshair""$i"; done # Toggle crosshair
-bindle=, XF86MonBrightnessUp, exec, agsv1 run-js 'brightness.screen_value += 0.05; indicator.popup(1);' # [hidden]
+bindle=, XF86MonBrightnessUp, exec, qs ipc call brightness increment || agsv1 run-js 'brightness.screen_value += 0.05; indicator.popup(1);' # [hidden]
-bindle=, XF86MonBrightnessDown, exec, agsv1 run-js 'brightness.screen_value -= 0.05; indicator.popup(1);' # [hidden]
+bindle=, XF86MonBrightnessDown, exec, qs ipc call brightness decrement || agsv1 run-js 'brightness.screen_value -= 0.05; indicator.popup(1);' # [hidden]
-bindl  = , XF86AudioMute, exec, agsv1 run-js 'indicator.popup(1);' # [hidden]
-bindl  = Super+Shift,M,   exec, agsv1 run-js 'indicator.popup(1);' # [hidden]
 
 # Testing
-bind = Super+Alt, f11, exec, bash -c 'RANDOM_IMAGE=$(find ~/Pictures -type f | grep -v -i "nipple" | grep -v -i "pussy" | shuf -n 1); ACTION=$(notify-send "Fancy test notification" "This notification should contain your profile <b>image</b> and <a href=\"https://discord.com/app\">Discord</a> <b>icon</b>. Oh and here is a random image in your Pictures folder: <img src=\"$RANDOM_IMAGE\" alt=\"Testing image\"/>" -p -h "string:image-path:/var/lib/AccountsService/icons/$USER" -t 6000 -i "discord" -A "openImage=Open profile image" -A "action2=Open the random image" -A "action3=Useless button"); [[ $ACTION == *openImage ]] && xdg-open "/var/lib/AccountsService/icons/$USER"; [[ $ACTION == *action2 ]] && xdg-open \"$RANDOM_IMAGE\"' # [hidden]
+bind = Super+Alt, f11, exec, bash -c 'RANDOM_IMAGE=$(find ~/Pictures -type f | grep -v -i "nipple" | grep -v -i "pussy" | shuf -n 1); ACTION=$(notify-send "Test notification with body image" "This notification should contain your user account <b>image</b> and <a href=\"https://discord.com/app\">Discord</a> <b>icon</b>. Oh and here is a random image in your Pictures folder: <img src=\"$RANDOM_IMAGE\" alt=\"Testing image\"/>" -p -h "string:image-path:/var/lib/AccountsService/icons/$USER" -t 6000 -i "discord" -A "openImage=Open profile image" -A "action2=Open the random image" -A "action3=Useless button"); [[ $ACTION == *openImage ]] && xdg-open "/var/lib/AccountsService/icons/$USER"; [[ $ACTION == *action2 ]] && xdg-open \"$RANDOM_IMAGE\"' # [hidden]
-bind = Super+Alt, f12, exec, bash -c 'notify-send "Test notification" "A <u>simple</u> <b>rich text</b> <i>test</i> notification" -t 3000' # [hidden]
+bind = Super+Alt, f12, exec, bash -c 'ACTION=$(notify-send "Test notification" "This notification should contain your user account <b>image</b> and <a href=\"https://discord.com/app\">Discord</a> <b>icon</b>." -p -h "string:image-path:/var/lib/AccountsService/icons/$USER" -t 6000 -i "discord" -A "openImage=Open profile image" -A "action2=Useless button" -A "action3=Cry more"); [[ $ACTION == *openImage ]] && xdg-open "/var/lib/AccountsService/icons/$USER"; [[ $ACTION == *action2 ]] && xdg-open \"$RANDOM_IMAGE\"' # [hidden]
 bind = Super+Alt, Equal, exec, notify-send "Urgent notification" "Ah hell no" -u critical -a 'Hyprland keybind' # [hidden]
 
 ##! Media

.config/quickshell/modules/bar/Bar.qml

@@ -23,14 +23,18 @@ Scope {
         command: ["qs", "ipc", "call", "sidebarLeft", "open"]
     }
     Process {
-        id: hideOsd
+        id: hideOsdBrightness
-        command: ["qs", "ipc", "call", "osd", "hide"]
+        command: ["qs", "ipc", "call", "osdBrightness", "hide"]
+    }
+    Process {
+        id: hideOsdVolume
+        command: ["qs", "ipc", "call", "osdVolume", "hide"]
     }
 
-    Variants {
+    Variants { // For each monitor
         model: Quickshell.screens
 
-        PanelWindow {
+        PanelWindow { // Bar window
             id: barRoot
 
             property var modelData
@@ -49,15 +53,15 @@ Scope {
                 right: true
             }
 
-            Rectangle {
+            Rectangle { // Bar background
                 id: barContent
                 anchors.right: parent.right
                 anchors.left: parent.left
                 anchors.top: parent.top
                 color: Appearance.colors.colLayer0
                 height: barHeight
-                // Left section
+                
-                RowLayout {
+                RowLayout { // Left section
                     id: leftSection
                     anchors.left: parent.left
                     implicitHeight: barHeight
@@ -67,8 +71,7 @@ Scope {
                     }
                 }
 
-                // Middle section
+                RowLayout { // Middle section
-                RowLayout {
                     id: middleSection
                     anchors.centerIn: parent
                     spacing: 8
@@ -210,7 +213,7 @@ Scope {
                             const dx = mouse.x - barLeftSideMouseArea.lastScrollX;
                             const dy = mouse.y - barLeftSideMouseArea.lastScrollY;
                             if (Math.sqrt(dx*dx + dy*dy) > osdHideMouseMoveThreshold) {
-                                hideOsd.running = true;
+                                hideOsdBrightness.running = true;
                                 barLeftSideMouseArea.trackingScroll = false;
                             }
                         }
@@ -260,7 +263,7 @@ Scope {
                             const dx = mouse.x - barRightSideMouseArea.lastScrollX;
                             const dy = mouse.y - barRightSideMouseArea.lastScrollY;
                             if (Math.sqrt(dx*dx + dy*dy) > osdHideMouseMoveThreshold) {
-                                hideOsd.running = true;
+                                hideOsdVolume.running = true;
                                 barRightSideMouseArea.trackingScroll = false;
                             }
                         }

.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
+        target: Audio.sink.audio
-        function onValueChanged() {
+        function onVolumeChanged() {
-            if (!Brightness.ready) return
+            if (!Audio.ready) return
             root.triggerOsd()
         }
     }
 
     Connections {
-        target: Audio.sink.audio
+        target: Brightness
-        function onVolumeChanged() {
+        function onValueChanged() {
-            if (!Audio.ready) return
+            if (!Brightness.ready) return
-            root.triggerOsd()
+            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
+                    id: osdValuesWrapper
-                    implicitWidth: osdValues.implicitWidth
+                    // 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
+                        anchors.centerIn: parent 
-                        // height: showOsdValues ? implicitHeight : 0
+                        value: Audio.sink.audio.volume
-                        // implicitHeight: 0
+                        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"
-    }
-}

.config/quickshell/services/Brightness.qml

@@ -77,4 +77,16 @@ Singleton {
         }
     }
 
+    IpcHandler {
+		target: "brightness"
+
+		function increment() {
+            root.increment = 1
+        }
+
+        function decrement() {
+            root.increment = -1
+        }
+	}
+
 }

.config/quickshell/shell.qml

@@ -15,6 +15,7 @@ ShellRoot {
     SidebarRight {}
     ScreenCorners {}
     ReloadPopup {}
-    OnScreenDisplay {}
+    OnScreenDisplayBrightness {}
+    OnScreenDisplayVolume {}
 }