osd for volume and brightness

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
+        }
+    }
+}