Add showing level of value through bar

quickshell/ui/BarText.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import Quickshell
+
+import "../constants"
+
+Item {
+    id: root
+    property int value: 0
+    property string prefix: ""
+    property string separator: "-"
+    property int valuePadding: 3
+    property int padding: 4
+    property string paddingChar: "0"
+
+    width: textItem.implicitWidth + padding
+    height: textItem.implicitHeight + padding
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        height: Math.max(1, root.value / 100 * parent.height)
+        color: Colors.md3.on_secondary
+        opacity: 1.0
+    }
+
+    Text {
+        id: textItem
+        anchors.centerIn: parent
+        z: 1
+        text: root.prefix + root.separator + String(root.value).padStart(root.valuePadding, root.paddingChar)
+        color: Colors.md3.inverse_primary
+        font.pixelSize: Constants.fontSize
+        font.family: Constants.fontFamily
+        font.bold: true
+    }
+}

quickshell/ui/TopBar.qml

@@ -16,6 +16,7 @@ Item {
 
     property int cpuUsage: 0
     property int memUsage: 0
+    property int gpuUsage: 0
 
     RowLayout {
         anchors.fill: parent
@@ -71,35 +72,31 @@ Item {
         RowLayout {
             spacing: 10
 
-            //TODO put this in separate component
-            Text {
-                id: cpuText
-                text: "CPU: " + cpuUsage + "%"
-                color: Constants.colYellow
-                font.pixelSize: Constants.fontSize
-                font.family: Constants.fontFamily
-                font.bold: true
+            BarText {
+                prefix: "C"
+                value: cpuUsage
             }
 
             Rectangle {
                 width: 1
                 height: 16
-                color: Constants.colMuted
+                color: Colors.md3.on_background
             }
 
-            Text {
-                id: memText
-                text: "Mem: " + memUsage + "%"
-                color: Constants.colCyan
-                font.pixelSize: Constants.fontSize
-                font.family: Constants.fontFamily
-                font.bold: true
+            BarText {
+                prefix: "M"
+                value: memUsage
             }
 
             Rectangle {
                 width: 1
                 height: 16
-                color: Constants.colMuted
+                color: Colors.md3.on_background
+            }
+
+            BarText {
+                prefix: "G"
+                value: gpuUsage
             }
 
             Clock {}