osd for volume and brightness

modules/Backlight.qml

@@ -9,6 +9,7 @@ M.BarSection {
     tooltip: "Brightness: " + root.percent + "%"
 
     property int percent: 0
+    onPercentChanged: if (percent > 0) M.OsdState.show(percent / 100, "\uF185")
 
     Process {
         id: adjProc

modules/Osd.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import "." as M
+
+PanelWindow {
+    id: root
+
+    required property var screen
+
+    visible: M.OsdState.visible
+    color: "transparent"
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.exclusiveZone: 0
+    WlrLayershell.namespace: "nova-osd"
+
+    anchors.bottom: true
+    anchors.left: true
+
+    margins.bottom: Math.round(screen.height / 3)
+    margins.left: Math.round((screen.width - implicitWidth) / 2)
+
+    implicitWidth: 200
+    implicitHeight: 48
+
+    Rectangle {
+        anchors.fill: parent
+        color: M.Theme.base00
+        opacity: Math.max(M.Theme.barOpacity, 0.85)
+        radius: M.Theme.radius
+    }
+
+    Row {
+        anchors.centerIn: parent
+        spacing: 10
+
+        Text {
+            text: M.OsdState.icon
+            color: M.Theme.base05
+            font.pixelSize: M.Theme.fontSize + 4
+            font.family: M.Theme.iconFontFamily
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            width: 120
+            height: 6
+            anchors.verticalCenter: parent.verticalCenter
+
+            Rectangle {
+                anchors.fill: parent
+                color: M.Theme.base02
+                radius: 3
+            }
+
+            Rectangle {
+                width: parent.width * Math.min(1, Math.max(0, M.OsdState.value))
+                height: parent.height
+                color: M.Theme.base0D
+                radius: 3
+            }
+        }
+
+        Text {
+            text: Math.round(M.OsdState.value * 100) + "%"
+            color: M.Theme.base05
+            font.pixelSize: M.Theme.fontSize
+            font.family: M.Theme.fontFamily
+            anchors.verticalCenter: parent.verticalCenter
+            width: 30
+        }
+    }
+}

modules/OsdState.qml

@@ -0,0 +1,20 @@
+pragma Singleton
+import QtQuick
+
+QtObject {
+    property bool visible: false
+    property real value: 0      // 0.0–1.0
+    property string icon: ""
+
+    property Timer _timer: Timer {
+        interval: 1500
+        onTriggered: visible = false
+    }
+
+    function show(val, ico) {
+        value = val;
+        icon = ico;
+        visible = true;
+        _timer.restart();
+    }
+}

modules/Volume.qml

@@ -15,6 +15,9 @@ M.BarSection {
     readonly property real volume: sink?.audio?.volume ?? 0
     readonly property bool muted: sink?.audio?.muted ?? false
 
+    onVolumeChanged: M.OsdState.show(volume, root.muted ? "\uF026" : (volume > 0.5 ? "\uF028" : "\uF027"))
+    onMutedChanged: M.OsdState.show(volume, root.muted ? "\uF026" : (volume > 0.5 ? "\uF028" : "\uF027"))
+
     M.BarIcon {
         icon: root.muted ? "\uF026" : (root.volume > 0.5 ? "\uF028" : (root.volume > 0 ? "\uF027" : "\uF026"))
         color: root.muted ? M.Theme.base04 : M.Theme.base0E

modules/qmldir

@@ -1,6 +1,7 @@
 module modules
 singleton Theme 1.0 Theme.qml
 singleton FlyoutState 1.0 FlyoutState.qml
+singleton OsdState 1.0 OsdState.qml
 singleton Modules 1.0 Modules.qml
 Bar 1.0 Bar.qml
 BarSection 1.0 BarSection.qml
@@ -13,6 +14,7 @@ Tray 1.0 Tray.qml
 TrayMenu 1.0 TrayMenu.qml
 PowerMenu 1.0 PowerMenu.qml
 ScreenCorners 1.0 ScreenCorners.qml
+Osd 1.0 Osd.qml
 ThemedIcon 1.0 ThemedIcon.qml
 Battery 1.0 Battery.qml
 Mpris 1.0 Mpris.qml

shell.qml

@@ -19,6 +19,10 @@ ShellRoot {
                 screen: scope.modelData
             }
 
+            Osd {
+                screen: scope.modelData
+            }
+
             ScreenCorners {
                 screen: scope.modelData
             }