Add tabs, a performance page and a mixer button to Quick Settings

shell/Ui/MetricBar.qml

@@ -0,0 +1,71 @@
+import QtQuick
+import qs.Commons
+
+Column {
+  id: root
+
+  property string icon: ""
+  property string name: ""
+  property int percent: 0
+  property string detail: ""
+
+  spacing: Style.spaceReal(4)
+
+  Item {
+    width: parent.width
+    implicitHeight: nameText.implicitHeight
+
+    Text {
+      id: iconText
+      anchors.left: parent.left
+      anchors.verticalCenter: parent.verticalCenter
+      width: Style.spaceReal(22)
+      text: root.icon
+      textFormat: Text.PlainText
+      color: Color.magenta
+      font.family: Style.font.family
+      font.pixelSize: Style.font.body
+    }
+
+    Text {
+      id: nameText
+      anchors.left: iconText.right
+      anchors.leftMargin: Style.spaceReal(8)
+      anchors.verticalCenter: parent.verticalCenter
+      text: root.name
+      textFormat: Text.PlainText
+      color: Color.foreground
+      font.family: Style.font.family
+      font.pixelSize: Style.font.bodySmall
+      font.bold: true
+    }
+
+    Text {
+      anchors.right: parent.right
+      anchors.verticalCenter: parent.verticalCenter
+      text: root.detail
+      textFormat: Text.PlainText
+      color: Util.alpha(Color.foreground, 0.8)
+      font.family: Style.font.family
+      font.pixelSize: Style.font.bodySmall
+    }
+  }
+
+  Rectangle {
+    width: parent.width
+    height: Style.spaceReal(8)
+    radius: Style.cardRadius
+    color: Util.alpha(Color.foreground, 0.2)
+
+    Rectangle {
+      width: parent.width * Math.max(0, Math.min(100, root.percent)) / 100
+      height: parent.height
+      radius: Style.cardRadius
+      color: Color.accent
+
+      Behavior on width {
+        NumberAnimation { duration: 200 }
+      }
+    }
+  }
+}

shell/Ui/SystemStats.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import Quickshell.Io
+
+Item {
+  id: root
+
+  property bool polling: false
+
+  property int cpuPercent: 0
+  property int memoryPercent: 0
+  property string memoryDetail: ""
+  property int diskPercent: 0
+  property string diskDetail: ""
+  property int temperature: 0
+  property string loadAverage: ""
+
+  property real previousIdle: 0
+  property real previousTotal: 0
+
+  function readCpu(raw) {
+    var values = String(raw).trim().split(/\s+/).slice(1).map(Number)
+    var idle = (values[3] || 0) + (values[4] || 0)
+    var total = 0
+    for (var i = 0; i < values.length; i++) total += values[i] || 0
+    var idleDelta = idle - root.previousIdle
+    var totalDelta = total - root.previousTotal
+    root.previousIdle = idle
+    root.previousTotal = total
+    if (totalDelta <= 0) return
+    root.cpuPercent = Math.round((1 - idleDelta / totalDelta) * 100)
+  }
+
+  function readMemory(raw) {
+    var parts = String(raw).trim().split(/\s+/).map(Number)
+    var used = parts[0] || 0
+    var total = parts[1] || 0
+    if (!total) {
+      root.memoryPercent = 0
+      root.memoryDetail = ""
+      return
+    }
+    root.memoryPercent = Math.round(used / total * 100)
+    root.memoryDetail = (used / 1024).toFixed(1) + "G / " + (total / 1024).toFixed(1) + "G"
+  }
+
+  function readDisk(raw) {
+    var parts = String(raw).trim().split(/\s+/)
+    root.diskPercent = Number(String(parts[0] || "").replace("%", "")) || 0
+    root.diskDetail = (parts[1] || "0") + " / " + (parts[2] || "0")
+  }
+
+  function readLoad(raw) {
+    var parts = String(raw).trim().split(/\s+/)
+    root.loadAverage = parts.length >= 3 ? parts.slice(0, 3).join("  ") : ""
+  }
+
+  function refreshFast() {
+    if (!cpuProbe.running) cpuProbe.running = true
+    if (!memoryProbe.running) memoryProbe.running = true
+    if (!temperatureProbe.running) temperatureProbe.running = true
+    if (!loadProbe.running) loadProbe.running = true
+  }
+
+  function refreshSlow() {
+    if (!diskProbe.running) diskProbe.running = true
+  }
+
+  function refresh() {
+    refreshFast()
+    refreshSlow()
+  }
+
+  Process {
+    id: cpuProbe
+    command: ["bash", "-c", "grep '^cpu ' /proc/stat"]
+    stdout: StdioCollector { onStreamFinished: root.readCpu(text) }
+  }
+
+  Process {
+    id: memoryProbe
+    command: ["bash", "-c", "free -m | awk '/^Mem:/ {print $3\" \"$2}'"]
+    stdout: StdioCollector { onStreamFinished: root.readMemory(text) }
+  }
+
+  Process {
+    id: diskProbe
+    command: ["bash", "-c", "df -h --output=pcent,used,size / | tail -1"]
+    stdout: StdioCollector { onStreamFinished: root.readDisk(text) }
+  }
+
+  Process {
+    id: temperatureProbe
+    command: ["bash", "-c", "cat /sys/class/thermal/thermal_zone0/temp 2>/dev/null || echo 0"]
+    stdout: StdioCollector {
+      onStreamFinished: root.temperature = Math.round(Number(String(text).trim()) / 1000) || 0
+    }
+  }
+
+  Process {
+    id: loadProbe
+    command: ["bash", "-c", "cat /proc/loadavg"]
+    stdout: StdioCollector { onStreamFinished: root.readLoad(text) }
+  }
+
+  Timer {
+    interval: 2000
+    running: root.polling
+    repeat: true
+    onTriggered: root.refreshFast()
+  }
+
+  Timer {
+    interval: 30000
+    running: root.polling
+    repeat: true
+    onTriggered: root.refreshSlow()
+  }
+
+  onPollingChanged: if (root.polling) root.refresh()
+}

shell/Ui/qmldir

@@ -42,3 +42,5 @@ CalendarModel 1.0 CalendarModel.js
 CalendarView 1.0 CalendarView.qml
 CalendarDays 1.0 CalendarDays.qml
 CalendarMonthPicker 1.0 CalendarMonthPicker.qml
+MetricBar 1.0 MetricBar.qml
+SystemStats 1.0 SystemStats.qml