Tons of small changes, add SidePanel, NCard, NCircleStat, NSystemMnitor

Widgets/NBox.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import qs.Services
+
+// Rounded group container using the variant surface color.
+// To be used in side panels and settings panes to group fields or buttons.
+Rectangle {
+  id: root
+
+  readonly property real scaling: Scaling.scale(screen)
+
+  implicitWidth: childrenRect.width
+  implicitHeight: childrenRect.height
+
+  color: Colors.surfaceVariant
+  radius: Style.radiusMedium * scaling
+  border.color: Colors.backgroundTertiary
+  border.width: Math.min(1, Style.borderThin * scaling)
+  clip: true
+}
+

Widgets/NCard.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import qs.Services
+
+// Generic themed card container
+Rectangle {
+  id: root
+
+  readonly property real scaling: Scaling.scale(screen)
+
+  implicitWidth: childrenRect.width
+  implicitHeight: childrenRect.height
+
+  color: Colors.backgroundSecondary
+  radius: Style.radiusMedium * scaling
+  border.color: Colors.backgroundTertiary
+  border.width: Math.min(1, Style.borderThin * scaling)
+}
+

Widgets/NCircleStat.qml

@@ -0,0 +1,112 @@
+import QtQuick
+import qs.Services
+
+// Compact circular statistic display used in the SidePanel
+Rectangle {
+  id: root
+
+  readonly property real scaling: Scaling.scale(screen)
+  property real value: 0           // 0..100 (or any range visually mapped)
+  property string icon: ""
+  property string suffix: "%"
+
+  // When nested inside a parent group (NBox), you can make it flat
+  property bool flat: false
+  // Scales the internal content (labels, gauge, icon) without changing the
+  // outer width/height footprint of the component
+  property real contentScale: 1.0
+
+  width: 68 * scaling
+  height: 92 * scaling
+  color: flat ? "transparent" : Colors.backgroundSecondary
+  radius: Style.radiusSmall * scaling
+  border.color: flat ? "transparent" : Colors.backgroundTertiary
+  border.width: flat ? 0 : Math.min(1, Style.borderThin * scaling)
+  clip: true
+
+  // Repaint gauge when the bound value changes
+  onValueChanged: gauge.requestPaint()
+
+  Row {
+    id: innerRow
+    anchors.fill: parent
+    anchors.margins: Style.marginSmall * scaling * contentScale
+    spacing: Style.marginSmall * scaling * contentScale
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.verticalCenter: parent.verticalCenter
+
+    // Gauge with percentage label placed inside the open gap (right side)
+    Item {
+      id: gaugeWrap
+      anchors.verticalCenter: innerRow.verticalCenter
+      width: 68 * scaling * contentScale
+      height: 68 * scaling * contentScale
+
+      Canvas {
+        id: gauge
+        anchors.fill: parent
+        renderStrategy: Canvas.Cooperative
+        onPaint: {
+          const ctx = getContext("2d")
+          const w = width, h = height
+          const cx = w / 2, cy = h / 2
+          const r = Math.min(w, h) / 2 - 5 * root.scaling * contentScale
+          // 240° arc with a 120° gap centered on the right side
+          // Start at 60° and end at 300° → balanced right-side opening
+          const start = Math.PI / 3
+          const endBg = Math.PI * 5 / 3
+          ctx.reset()
+          ctx.lineWidth = 6 * root.scaling * contentScale
+          // Track uses backgroundPrimary for stronger contrast
+          ctx.strokeStyle = Colors.backgroundPrimary
+          ctx.beginPath()
+          ctx.arc(cx, cy, r, start, endBg)
+          ctx.stroke()
+          // Value arc
+          const ratio = Math.max(0, Math.min(1, root.value / 100))
+          const end = start + (endBg - start) * ratio
+          ctx.strokeStyle = Colors.accentPrimary
+          ctx.beginPath()
+          ctx.arc(cx, cy, r, start, end)
+          ctx.stroke()
+        }
+      }
+
+      // Percent centered in the circle
+      Text {
+        id: valueLabel
+        anchors.centerIn: parent
+        text: `${Math.round(root.value)}${root.suffix}`
+        font.pointSize: Style.fontSizeMedium * scaling * contentScale
+        color: Colors.textPrimary
+        horizontalAlignment: Text.AlignHCenter
+      }
+
+      // Tiny circular badge for the icon, inside the right-side gap
+      Rectangle {
+        id: iconBadge
+        width: 22 * scaling * contentScale
+        height: width
+        radius: width / 2
+        color: Colors.backgroundPrimary
+        border.color: Colors.accentPrimary
+        border.width: Math.min(1, Style.borderThin * scaling)
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 4 * scaling * contentScale
+        anchors.bottomMargin: 4 * scaling * contentScale
+
+        Text {
+          anchors.centerIn: parent
+          text: root.icon
+          font.family: "Material Symbols Outlined"
+          font.pointSize: Style.fontSizeLarge * scaling * contentScale
+          color: Colors.accentPrimary
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+        }
+      }
+    }
+  }
+}
+

Widgets/NSystemMonitor.qml

@@ -0,0 +1,73 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+// Lightweight system monitor using standard Linux interfaces.
+// Provides cpu usage %, cpu temperature (°C), and memory usage %.
+// No external helpers; uses /proc and /sys via a shell loop.
+Item {
+  id: root
+
+  // Public values
+  property real cpuUsage: 0
+  property real cpuTemp: 0
+  property real memoryUsagePer: 0
+  property real diskUsage: 0
+
+  // Interval in seconds between updates
+  property int intervalSeconds: 1
+
+  // Background process emitting one JSON line per sample
+  Process {
+    id: reader
+    running: true
+    command: [
+      "sh", "-c",
+      // Outputs: {"cpu":<int>,"memper":<int>,"cputemp":<int>}
+      "interval=" + intervalSeconds + "; " +
+      "while true; do " +
+        // First /proc/stat snapshot
+        "read _ u1 n1 s1 id1 iw1 ir1 si1 st1 gs1 < /proc/stat; " +
+        "t1=$((u1+n1+s1+id1+iw1+ir1+si1+st1)); i1=$((id1+iw1)); " +
+        "sleep $interval; " +
+        // Second /proc/stat snapshot
+        "read _ u2 n2 s2 id2 iw2 ir2 si2 st2 gs2 < /proc/stat; " +
+        "t2=$((u2+n2+s2+id2+iw2+ir2+si2+st2)); i2=$((id2+iw2)); " +
+        "dt=$((t2 - t1)); di=$((i2 - i1)); " +
+        "cpu=$(( (100*(dt - di)) / (dt>0?dt:1) )); " +
+        // Memory percent via /proc/meminfo (kB)
+        "mt=$(awk '/MemTotal/ {print $2}' /proc/meminfo); " +
+        "ma=$(awk '/MemAvailable/ {print $2}' /proc/meminfo); " +
+        "mm=$((mt - ma)); mp=$(( (100*mm) / (mt>0?mt:1) )); " +
+        // Temperature: scan hwmon and thermal zones, choose max; convert m°C → °C
+        "ct=0; " +
+        "for f in /sys/class/hwmon/hwmon*/temp*_input /sys/class/thermal/thermal_zone*/temp; do " +
+          "[ -r \"$f\" ] || continue; v=$(cat \"$f\" 2>/dev/null); " +
+          "[ -z \"$v\" ] && continue; " +
+          "if [ \"$v\" -gt 1000 ] 2>/dev/null; then v=$((v/1000)); fi; " +
+          "[ \"$v\" -gt \"$ct\" ] 2>/dev/null && ct=$v; " +
+        "done; " +
+        // Disk usage percent for root filesystem
+        "dp=$(df -P / 2>/dev/null | awk 'NR==2{gsub(/%/,\"\",$5); print $5}'); " +
+        "[ -z \"$dp\" ] && dp=0; " +
+        // Emit JSON line
+        "echo \"{\\\"cpu\\\":$cpu,\\\"memper\\\":$mp,\\\"cputemp\\\":$ct,\\\"diskper\\\":$dp}\"; " +
+      "done"
+    ]
+
+    stdout: SplitParser {
+      onRead: function (line) {
+        try {
+          const data = JSON.parse(line)
+          root.cpuUsage = +data.cpu
+          root.cpuTemp = +data.cputemp
+          root.memoryUsagePer = +data.memper
+          root.diskUsage = +data.diskper
+        } catch (e) {
+          // ignore malformed lines
+        }
+      }
+    }
+  }
+}
+