dashboard/performance: new design, configurable, controlcenter support (#975)

* feat(dashboard): add configurable performance resources

- Add config options to show/hide Battery, GPU, CPU, Memory, Storage
- Make dashboard responsive based on number of visible resources
- Scale resource sizes and spacing dynamically for 3, 4, or 5 items
- Battery shows charge status and time remaining/to full
- Each resource can be individually toggled via config

* fix(dashboard): add dynamic right margin for last visible resource

Ensures the rightmost resource always has proper margin to prevent
content from being cut off at the edge

* fix(performance): comment out duplicated value2 properties for memory and storage resources

* controlcenter: add settings for dashboard

* feat: handle readonly properties and re-usable codes

* Feature/performance tab rework (#5)

* dashboard/performance: rework tab with card-based grid layout

- Replace circular arc meters with card-based grid layout
- CPU/GPU cards show hardware name, usage and temperature with horizontal bars
- Memory card with 3/4 arc indicator and used/total at bottom
- Storage card shows physical disks from lsblk with aggregated partition usage
- Add cpuName, gpuName, cpuFreq, cpuMaxFreq, disks properties to SystemUsage
- Clean hardware names (remove Intel/AMD/NVIDIA prefixes, TM/R symbols)

* dashboard/performance: new hero card design

* dashboard/performance: update storage indicators to be reponsive to the physical disks count

* dashboard/performance: fix the overlay bounding issue

* dashboard/perfromance: refactor code

* dashboard/performance: add battery gauge

* dashboard/performance: correct battery icon

* dashboard/performance: configurable battery

* dashboard/performance: update layout

* dashboard/performance: move the "Usage" text on top and smaller the font size

* dashboard/performance: add a lot of configurations

* dashboard/performance: add network metrics

* fix: issue with hot reload

* chore: update default vaule for mainValueSpacing to 0

* chore: group settings into collapasible sections

* chore: making GPU & Battery toggle not showing if not found

* chore: fix network widget spacing & text

* chore: remove old disk bars configs, add update interval

* chore: remove old & unused value, functions

* chore: network graph update smoothly when data points change

* chore: refactor settings

- de-flood settings, most of the font & size setting now follow the
global Appearance config
- Most of sliders are not needed anymore, only keep the update interval
slider
- clean up

* chore: remove readonly properties from the controlcenter/dashboard.

* chore: minor fix

* fix: fix warning about onPercChange()

* fix: network metrics negative number

* fix: add minimal height & width, placeholder for none toggled

* fix: network graph move smoothly (#6)

* fix: network graph move smoothly

* clean up

* fix: graph animation even more smooth

* fix: padding issue

* chore: network icons short description

* fix

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

1 files changed, 123 insertions, 0 deletions

diff --git a/modules/controlcenter/dashboard/DashboardPane.qml b/modules/controlcenter/dashboard/DashboardPane.qml
new file mode 100644
index 0000000..72e3e6e
--- /dev/null
+++ b/modules/controlcenter/dashboard/DashboardPane.qml
@@ -0,0 +1,123 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../components"
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.components.containers
+import qs.services
+import qs.config
+import qs.utils
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property Session session
+
+    // General Settings
+    property bool enabled: Config.dashboard.enabled ?? true
+    property bool showOnHover: Config.dashboard.showOnHover ?? true
+    property int updateInterval: Config.dashboard.updateInterval ?? 1000
+    property int dragThreshold: Config.dashboard.dragThreshold ?? 50
+    
+    // Performance Resources
+    property bool showBattery: Config.dashboard.performance.showBattery ?? false
+    property bool showGpu: Config.dashboard.performance.showGpu ?? true
+    property bool showCpu: Config.dashboard.performance.showCpu ?? true
+    property bool showMemory: Config.dashboard.performance.showMemory ?? true
+    property bool showStorage: Config.dashboard.performance.showStorage ?? true 
+    property bool showNetwork: Config.dashboard.performance.showNetwork ?? true
+
+    anchors.fill: parent
+
+    function saveConfig() {
+        Config.dashboard.enabled = root.enabled;
+        Config.dashboard.showOnHover = root.showOnHover;
+        Config.dashboard.updateInterval = root.updateInterval;
+        Config.dashboard.dragThreshold = root.dragThreshold;
+        Config.dashboard.performance.showBattery = root.showBattery;
+        Config.dashboard.performance.showGpu = root.showGpu;
+        Config.dashboard.performance.showCpu = root.showCpu;
+        Config.dashboard.performance.showMemory = root.showMemory;
+        Config.dashboard.performance.showStorage = root.showStorage;
+        Config.dashboard.performance.showNetwork = root.showNetwork;
+        // Note: sizes properties are readonly and cannot be modified
+        Config.save();
+    }
+
+    ClippingRectangle {
+        id: dashboardClippingRect
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.normal
+        anchors.leftMargin: 0
+        anchors.rightMargin: Appearance.padding.normal
+
+        radius: dashboardBorder.innerRadius
+        color: "transparent"
+
+        Loader {
+            id: dashboardLoader
+
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.leftMargin: Appearance.padding.large
+            anchors.rightMargin: Appearance.padding.large
+
+            sourceComponent: dashboardContentComponent
+        }
+    }
+
+    InnerBorder {
+        id: dashboardBorder
+        leftThickness: 0
+        rightThickness: Appearance.padding.normal
+    }
+
+    Component {
+        id: dashboardContentComponent
+
+        StyledFlickable {
+            id: dashboardFlickable
+            flickableDirection: Flickable.VerticalFlick
+            contentHeight: dashboardLayout.height
+
+            StyledScrollBar.vertical: StyledScrollBar {
+                flickable: dashboardFlickable
+            }
+
+            ColumnLayout {
+                id: dashboardLayout
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                spacing: Appearance.spacing.normal
+
+                RowLayout {
+                    spacing: Appearance.spacing.smaller
+
+                    StyledText {
+                        text: qsTr("Dashboard")
+                        font.pointSize: Appearance.font.size.large
+                        font.weight: 500
+                    }
+                }
+
+                // General Settings Section
+                GeneralSection {
+                    rootItem: root
+                }
+
+                // Performance Resources Section
+                PerformanceSection {
+                    rootItem: root
+                }
+            }
+        }
+    }
+}