hyprland/quickshell: add volume percentage display to volume-osd

configs/hyprland/quickshell/volume-osd.qml

@@ -62,14 +62,26 @@ Scope {
 				RowLayout {
 					anchors {
 						fill: parent
-						leftMargin: 10
-						rightMargin: 10
+						leftMargin: 15
+						rightMargin: 15
 					}
+					spacing: 10
+
+					Text {
+                        id: volumeText
+                        Layout.preferredWidth: 35
+                        Layout.preferredHeight: 20
+                        text: Math.round(root.volume * 100) + "%"
+                        color: "white"
+                        font.pixelSize: 14
+                        font.bold: true
+                        horizontalAlignment: Text.AlignRight
+                        verticalAlignment: Text.AlignVCenter
+                    }
 
 					Rectangle {
 						Layout.fillWidth: true
-
-						implicitHeight: 10
+						Layout.preferredHeight: 10
 						radius: 20
 						color: "#40D8E2EA"
 
@@ -80,8 +92,10 @@ Scope {
 								bottom: parent.bottom
 							}
 
-							implicitWidth: parent.width * root.volume
+							width: parent.width * root.volume
+							height: parent.height
 							radius: parent.radius
+							color: "white"
 						}
 					}
 				}