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

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
+        }
+      }
+    }
+  }
+}
+