bar resource usage indicator

.config/quickshell/modules/bar/Bar.qml

@@ -10,6 +10,7 @@ Scope {
 
         PanelWindow {
             id: barRoot
+
             property var modelData
 
             screen: modelData
@@ -31,6 +32,10 @@ Scope {
                     spacing: 4
                     Layout.fillWidth: true
                     Layout.fillHeight: true
+
+                    Resources {
+                    }
+
                 }
 
                 RowLayout {

.config/quickshell/modules/bar/Battery.qml

@@ -12,7 +12,6 @@ Rectangle {
     readonly property bool isPluggedIn: isCharging || chargeState == UPowerDeviceState.PendingCharge
     readonly property real percentage: UPower.displayDevice.percentage
     readonly property bool isLow: percentage <= ConfigOptions.bar.batteryLowThreshold / 100
-    readonly property int batterySlideDistance: 10
     readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
     readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
 
@@ -21,12 +20,6 @@ Rectangle {
     color: Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
-    Process {
-        id: screenSnip
-
-        command: ["grimblast", "copy", "area"]
-    }
-
     RowLayout {
         id: rowLayout
 
@@ -50,7 +43,7 @@ Rectangle {
         StyledText {
             Layout.alignment: Qt.AlignVCenter
             color: Appearance.colors.colOnLayer1
-            text: `${percentage * 100}%`
+            text: `${Math.round(percentage * 100)}%`
         }
 
         CircularProgress {

.config/quickshell/modules/bar/Resource.qml

@@ -0,0 +1,36 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+
+RowLayout {
+    required property string iconName
+    required property double percentage
+    spacing: 4
+
+    CircularProgress {
+        Layout.alignment: Qt.AlignVCenter
+        lineWidth: 2
+        value: percentage
+        size: 26
+        secondaryColor: Appearance.m3colors.m3secondaryContainer
+        primaryColor: Appearance.m3colors.m3onSecondaryContainer
+
+        MaterialSymbol {
+            anchors.centerIn: parent
+            text: iconName
+            font.pointSize: Appearance.font.pointSize.normal
+            color: Appearance.m3colors.m3onSecondaryContainer
+        }
+
+    }
+
+    StyledText {
+        Layout.alignment: Qt.AlignVCenter
+        color: Appearance.colors.colOnLayer1
+        text: `${Math.round(percentage * 100)}%`
+    }
+
+}

.config/quickshell/modules/bar/Resources.qml

@@ -0,0 +1,35 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+
+Rectangle {
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: 32
+    color: Appearance.colors.colLayer1
+    radius: Appearance.rounding.small
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 4
+        anchors.centerIn: parent
+
+        Resource {
+            iconName: "memory"
+            percentage: ResourceUsage.memoryUsedPercentage
+        }
+        Resource {
+            iconName: "swap_horiz"
+            percentage: ResourceUsage.swapUsedPercentage
+        }
+        Resource {
+            iconName: "settings_slow_motion"
+            percentage: ResourceUsage.cpuUsage
+        }
+
+    }
+
+}