Add showing level of value through bar

hypr/autostart.conf

@@ -3,3 +3,4 @@ exec-once = /usr/bin/qs & # quickshell
 # exec-once = hyprpaper # wallpaper
 exec-once = awww-daemon # wallpaper
 exec-once = hyprsunset # night light
+exec-once = qs -c overview # workspace switcher https://github.com/Shanu-Kumawat/quickshell-overview

hypr/keybindings.conf

@@ -16,6 +16,7 @@ bind = $mainMod, R, exec, $menu
 bind = $mainMod, P, exec, $programs
 bind = $mainMod, L, layoutmsg, togglesplit # dwindle
 bind = $mainMod, code:47, exec, rofi -show emoji
+bind = $mainMod, TAB, exec, qs ipc -c overview call overview toggle
 
 # Move focus with mainMod + arrow keys
 bind = $mainMod, J, cyclenext

quickshell/overview/config.json

@@ -0,0 +1,66 @@
+{
+  "appearance": {
+    "colorSource": "default",
+    "caelestia": {
+      "autoRefresh": true,
+      "refreshInterval": 2000,
+      "accentProfile": "vibrant"
+    },
+    "rounding": {
+      "unsharpen": 2,
+      "verysmall": 8,
+      "small": 12,
+      "normal": 17,
+      "large": 23,
+      "full": 9999,
+      "screenRounding": 23,
+      "windowRounding": 18
+    },
+    "font": {
+      "family": {
+        "main": "JetBrainsMono Nerd Font",
+        "title": "JetBrainsMono Nerd Font",
+        "expressive": "JetBrainsMono Nerd Font"
+      },
+      "pixelSize": {
+        "smaller": 12,
+        "small": 15,
+        "normal": 16,
+        "larger": 19,
+        "huge": 22
+      }
+    },
+    "animation": {
+      "duration": {
+        "elementMove": 500,
+        "elementMoveEnter": 400,
+        "elementMoveFast": 200
+      }
+    },
+    "sizes": {
+      "elevationMargin": 10
+    }
+  },
+  "overview": {
+    "rows": 2,
+    "columns": 5,
+    "scale": 0.16,
+    "enable": true,
+    "hideEmptyRows": false,
+    "workspaceSpacing": 5,
+    "backgroundPadding": 10,
+    "workspaceNumberBaseSize": 250
+  },
+  "position": {
+    "topMargin": 100
+  },
+  "windowPreview": {
+    "iconToWindowRatio": 0.25,
+    "iconToWindowRatioCompact": 0.45,
+    "xwaylandIndicatorToIconRatio": 0.35,
+    "inactiveMonitorOpacity": 0.4
+  },
+  "hacks": {
+    "arbitraryRaceConditionDelay": 150
+  }
+}

quickshell/services/SystemStats.qml

@@ -10,13 +10,13 @@ Item {
     // =====================
     property int cpuUsage: 0
     property int memUsage: 0
+    property int gpuUsage: 0
 
     property var lastCpuIdle: 0
     property var lastCpuTotal: 0
 
     Process {
         id: cpuProc
-        // get cpu usage, first line of /proc/stat
         command: ["cat", "/proc/stat"]
         stdout: StdioCollector {
             onStreamFinished: {
@@ -56,12 +56,29 @@ Item {
                 var parts = data.trim().split(/\s+/);
                 var total = parseInt(parts[1]) || 1;
                 var used = parseInt(parts[2]) || 0;
-                memUsage = Math.round(100 * used / total);
+                root.memUsage = Math.round(100 * used / total);
             }
         }
         Component.onCompleted: running = true
     }
 
+    Process {
+        id: gpuProc
+        command: ["cat", "/sys/class/drm/card1/device/gpu_busy_percent"]
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                console.log("GPU usage data:", this.text);
+                if (!this.text) {
+                    return;
+                }
+                var gpuUsage = parseInt(this.text.trim()) || 0;
+                root.gpuUsage = gpuUsage;
+            }
+        }
+
+    }
+
     // Update loop
     Timer {
         interval: 2000
@@ -70,6 +87,7 @@ Item {
         onTriggered: {
             cpuProc.running = true;
             memProc.running = true;
+            gpuProc.running = true;
         }
     }
 }

quickshell/shell.qml

@@ -35,7 +35,7 @@ ShellRoot {
             anchors.left: true
             anchors.right: true
             implicitHeight: 25
-            color: Constants.colBg
+            color: Colors.md3.background
 
             Loader {
                 id: wallpaperLoader
@@ -48,6 +48,7 @@ ShellRoot {
 
                 cpuUsage: stats.cpuUsage
                 memUsage: stats.memUsage
+                gpuUsage: stats.gpuUsage
             }
         }
 

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
@@ -34,7 +35,7 @@ Item {
             spacing: 10
 
             Repeater {
-                model: 9
+                model: 10
 
                 Text {
                     required property int index
@@ -44,7 +45,7 @@ Item {
 
                     text: wsId
 
-                    color: workspaceHelpers.isWorkspaceActive(wsId) ? Constants.colCyan : (ws ? Constants.colMagenta : Constants.colMuted)
+                    color: workspaceHelpers.isWorkspaceActive(wsId) ? Colors.md3.primary : (ws ? Colors.md3.on_background : Colors.md3.on_secondary)
 
                     font {
                         family: Constants.fontFamily
@@ -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 {}