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, 0 insertions, 108 deletions

diff --git a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml b/modules/controlcenter/taskbar/ConnectedButtonGroup.qml
deleted file mode 100644
index 01cd612..0000000
--- a/modules/controlcenter/taskbar/ConnectedButtonGroup.qml
+++ /dev/null
@@ -1,108 +0,0 @@
-import ".."
-import qs.components
-import qs.components.controls
-import qs.components.effects
-import qs.services
-import qs.config
-import QtQuick
-import QtQuick.Layouts
-
-StyledRect {
-    id: root
-
-    property var options: [] // Array of {label: string, propertyName: string, onToggled: function}
-    property var rootItem: null // The root item that contains the properties we want to bind to
-    property string title: "" // Optional title text
-
-    Layout.fillWidth: true
-    implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
-    radius: Appearance.rounding.normal
-    color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
-    clip: true
-
-    Behavior on implicitHeight {
-        Anim {}
-    }
-
-    ColumnLayout {
-        id: layout
-
-        anchors.fill: parent
-        anchors.margins: Appearance.padding.large
-        spacing: Appearance.spacing.normal
-
-        StyledText {
-            visible: root.title !== ""
-            text: root.title
-            font.pointSize: Appearance.font.size.normal
-        }
-
-        RowLayout {
-            id: buttonRow
-            Layout.alignment: Qt.AlignHCenter
-            spacing: Appearance.spacing.small
-
-            Repeater {
-                id: repeater
-                model: root.options
-
-                delegate: TextButton {
-                    id: button
-                    required property int index
-                    required property var modelData
-
-                    Layout.fillWidth: true
-                    text: modelData.label
-
-                    property bool _checked: false
-
-                    checked: _checked
-                    toggle: false
-                    type: TextButton.Tonal
-
-                    // Create binding in Component.onCompleted
-                    Component.onCompleted: {
-                        if (root.rootItem && modelData.propertyName) {
-                            const propName = modelData.propertyName;
-                            const rootItem = root.rootItem;
-                            _checked = Qt.binding(function () {
-                                return rootItem[propName] ?? false;
-                            });
-                        }
-                    }
-
-                    // Match utilities Toggles radius styling
-                    // Each button has full rounding (not connected) since they have spacing
-                    radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
-
-                    // Match utilities Toggles inactive color
-                    inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
-
-                    // Adjust width similar to utilities toggles
-                    Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
-
-                    onClicked: {
-                        if (modelData.onToggled && root.rootItem && modelData.propertyName) {
-                            const currentValue = root.rootItem[modelData.propertyName] ?? false;
-                            modelData.onToggled(!currentValue);
-                        }
-                    }
-
-                    Behavior on Layout.preferredWidth {
-                        Anim {
-                            duration: Appearance.anim.durations.expressiveFastSpatial
-                            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-                        }
-                    }
-
-                    Behavior on radius {
-                        Anim {
-                            duration: Appearance.anim.durations.expressiveFastSpatial
-                            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-                        }
-                    }
-                }
-            }
-        }
-    }
-}