bar resource usage indicator

.config/quickshell/modules/common/ConfigOptions.qml

@@ -7,5 +7,8 @@ Singleton {
         property int workspacesShown: 10
         property int batteryLowThreshold: 20
     }
+    property QtObject resources: QtObject {
+        property int updateInterval: 3000
+    }
 
 }

.config/quickshell/modules/common/DateTime.qml

@@ -1,13 +1,11 @@
 import QtQuick
 import Quickshell
 import Quickshell.Io
-// with this line our type becomes a singleton
 pragma Singleton
 
-// your singletons should always have Singleton as the type
 Singleton {
     property string time: Qt.formatDateTime(clock.date, "hh:mm")
-    property string date:  Qt.formatDateTime(clock.date, "dddd, dd/MM")
+    property string date: Qt.formatDateTime(clock.date, "dddd, dd/MM")
 
     SystemClock {
         id: clock

.config/quickshell/modules/common/ResourceUsage.qml

@@ -0,0 +1,56 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+	property double memoryTotal: 1
+	property double memoryFree: 1
+	property double memoryUsed: memoryTotal - memoryFree
+    property double memoryUsedPercentage: memoryUsed / memoryTotal
+    property double swapTotal: 1
+	property double swapFree: 1
+	property double swapUsed: swapTotal - swapFree
+    property double swapUsedPercentage: swapUsed / swapTotal
+    property double cpuUsage: 0
+    property var previousCpuStats
+
+	Timer {
+		interval: 50
+        running: true 
+        repeat: true
+		onTriggered: {
+            // Reload files
+            fileMeminfo.reload()
+            fileStat.reload()
+
+            // Parse memory and swap usage
+            const textMeminfo = fileMeminfo.text()
+            memoryTotal = Number(textMeminfo.match(/MemTotal: *(\d+)/)?.[1] ?? 1)
+            memoryFree = Number(textMeminfo.match(/MemAvailable: *(\d+)/)?.[1] ?? 0)
+            swapTotal = Number(textMeminfo.match(/SwapTotal: *(\d+)/)?.[1] ?? 1)
+            swapFree = Number(textMeminfo.match(/SwapFree: *(\d+)/)?.[1] ?? 0)
+
+            // Parse CPU usage
+            const textStat = fileStat.text()
+            const cpuLine = textStat.match(/^cpu\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/)
+            if (cpuLine) {
+                const stats = cpuLine.slice(1).map(Number)
+                const total = stats.reduce((a, b) => a + b, 0)
+                const idle = stats[3]
+
+                if (previousCpuStats) {
+                    const totalDiff = total - previousCpuStats.total
+                    const idleDiff = idle - previousCpuStats.idle
+                    cpuUsage = totalDiff > 0 ? (1 - idleDiff / totalDiff) : 0
+                }
+
+                previousCpuStats = { total, idle }
+            }
+            interval = ConfigOptions.resources.updateInterval
+        }
+	}
+
+	FileView { id: fileMeminfo; path: "/proc/meminfo" }
+    FileView { id: fileStat; path: "/proc/stat" }
+}

.config/quickshell/modules/common/widgets/CircularProgress.qml

@@ -8,8 +8,8 @@ Item {
     property int size: 30
     property int lineWidth: 2
     property real value: 0
-    property color primaryColor: "#29b6f6"
-    property color secondaryColor: "#e0e0e0"
+    property color primaryColor: "#70585D"
+    property color secondaryColor: "#FFF8F7"
     property bool fill: false
     property int fillOverflow: 2
     property int animationDuration: 1000
@@ -60,6 +60,7 @@ Item {
         Behavior on degree {
             NumberAnimation {
                 duration: root.animationDuration
+                easing.type: Easing.OutCubic
             }
 
         }