resources popout refresh + new components & reskinned old components

Modules/Resources/Cards/BatteryTank.qml

@@ -0,0 +1,134 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.UPower
+import qs.Components
+import qs.Config
+
+CustomClippingRect {
+	id: root
+
+	property real animPerc: UPower.displayDevice.percentage
+
+	color: DynamicColors.palette.m3secondaryContainer
+	implicitWidth: 120
+	radius: Appearance.rounding.large
+
+	Behavior on animPerc {
+		Anim {
+		}
+	}
+
+	Contents {
+		id: layout
+
+		accentColor: DynamicColors.palette.m3primary
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.larger
+		subTextColor: DynamicColors.palette.m3onSurfaceVariant
+		textColor: DynamicColors.palette.m3onSurface
+	}
+
+	CustomRect {
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		clip: true
+		color: DynamicColors.palette.m3secondary
+		implicitHeight: parent.height * root.animPerc
+		radius: Appearance.rounding.extraSmall
+
+		Contents {
+			accentColor: DynamicColors.palette.m3primaryContainer
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.margins: layout.anchors.margins
+			anchors.right: parent.right
+			height: layout.height
+			subTextColor: DynamicColors.palette.m3secondaryContainer
+			textColor: DynamicColors.palette.m3onSecondary
+		}
+	}
+
+	component Contents: ColumnLayout {
+		id: contents
+
+		required property color accentColor
+		readonly property bool charging: [UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state)
+		required property color subTextColor
+		required property color textColor
+
+		spacing: 0
+
+		MaterialIcon {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			color: contents.accentColor
+			text: "battery_full"
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			color: contents.textColor
+			text: qsTr("Battery")
+		}
+
+		Item {
+			Layout.fillHeight: true
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignRight
+			animate: true
+			color: contents.subTextColor
+			text: {
+				if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
+					return qsTr("Full");
+
+				if (contents.charging)
+					return qsTr("Charging");
+
+				const s = UPower.displayDevice.timeToEmpty;
+				if (s === 0)
+					return qsTr("...");
+
+				const hr = Math.floor(s / 3600);
+				const min = Math.floor((s % 3600) / 60);
+				if (hr > 0)
+					return `${hr}h ${min}m`;
+
+				return `${min}m`;
+			}
+		}
+
+		RowLayout {
+			Layout.alignment: Qt.AlignRight
+			Layout.bottomMargin: -Appearance.padding.small
+			Layout.rightMargin: -Appearance.padding.extraSmall
+			Layout.topMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialIcon {
+				color: contents.accentColor
+				fill: 1
+				opacity: contents.charging ? 1 : 0
+				scale: contents.charging ? 1 : 0
+				text: "bolt"
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.FastEffects
+					}
+				}
+				Behavior on scale {
+					Anim {
+						type: Anim.FastSpatial
+					}
+				}
+			}
+
+			CustomText {
+				color: contents.accentColor
+				text: `${Math.round(UPower.displayDevice.percentage * 100)}%`
+			}
+		}
+	}
+}

Modules/Resources/Cards/HeroCard.qml

@@ -0,0 +1,138 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomClippingRect {
+	id: root
+
+	required property color accent
+	required property string icon
+	required property string label
+	required property string subLabel
+	required property real temperature
+	required property real usage
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Appearance.spacing.large, usageColumn.implicitHeight + usageLabel.implicitHeight) + Appearance.padding.large * 2
+	implicitWidth: 450
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	CustomRect {
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.top: parent.top
+		color: Qt.alpha(root.accent, 0.05)
+		implicitWidth: parent.width * root.usage
+
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+	}
+
+	CircularProgress {
+		id: tempProg
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.top: parent.top
+		fgColor: root.accent
+		implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Appearance.padding.larger * 2
+		spacing: Appearance.spacing.extraSmall
+		strokeWidth: Appearance.padding.extraSmall
+		value: root.usage
+
+		Behavior on clampedVal {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			id: icon
+
+			anchors.centerIn: parent
+			color: root.accent
+			text: root.icon
+		}
+	}
+
+	ColumnLayout {
+		anchors.left: tempProg.right
+		anchors.margins: Appearance.spacing.large
+		anchors.right: usageColumn.left
+		anchors.verticalCenter: tempProg.verticalCenter
+		spacing: Appearance.spacing.extraSmall
+
+		CustomText {
+			color: root.accent
+			text: root.label
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			color: DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			text: root.subLabel
+		}
+	}
+
+	ColumnLayout {
+		id: detailsRow
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.extraSmall
+
+		RowLayout {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialIcon {
+				Layout.topMargin: Math.round(fontInfo.pointSize * 0.08)
+				color: root.temperature > 90 ? DynamicColors.palette.m3error : root.accent
+				fill: 1
+				text: root.temperature > 90 ? "thermometer_alert" : "thermometer"
+			}
+
+			CustomText {
+				text: `${Math.ceil(root.temperature)}°${"C"}`
+			}
+		}
+
+		CustomProgressBar {
+			fgColor: root.accent
+			implicitHeight: Appearance.padding.small
+			indeterminate: isNaN(root.usage) || isNaN(root.temperature)
+			value: root.temperature / 100
+		}
+	}
+
+	Column {
+		id: usageColumn
+
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		anchors.rightMargin: 32
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: 0
+
+		CustomText {
+			id: usageLabel
+
+			anchors.right: parent.right
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.normal
+			text: qsTr("Usage")
+		}
+
+		CustomText {
+			anchors.right: parent.right
+			color: root.accent
+			font.pointSize: Appearance.font.size.extraLarge
+			font.weight: Font.Medium
+			text: isNaN(root.usage) ? "...%" : Math.round(root.usage * 100) + "%"
+		}
+	}
+}

Modules/Resources/Cards/MemoryCard.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Services
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	readonly property color accent: DynamicColors.palette.m3tertiary
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+	implicitWidth: layout.implicitWidth + Appearance.padding.extraLargeIncreased * 2
+	radius: Appearance.rounding.medium
+
+	ServiceRef {
+		service: Memory
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.centerIn: parent
+		spacing: Appearance.spacing.extraSmall
+
+		RowLayout {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: root.accent
+				fill: 1
+				text: "memory_alt"
+			}
+
+			CustomText {
+				text: qsTr("Memory")
+			}
+		}
+
+		CircularProgress {
+			Layout.alignment: Qt.AlignHCenter
+			Layout.topMargin: Appearance.spacing.large
+			fgColor: root.accent
+			implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.largeIncreased * 2
+			startAngle: -225
+			sweepAngle: 270
+			value: Memory.percentage
+
+			Behavior on clampedVal {
+				Anim {
+				}
+			}
+
+			ColumnLayout {
+				id: usageColumn
+
+				anchors.centerIn: parent
+				anchors.verticalCenterOffset: Appearance.padding.extraSmall
+				spacing: 0
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					color: root.accent
+					text: Math.round(Memory.percentage * 100) + "%"
+				}
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					color: DynamicColors.palette.m3onSurfaceVariant
+					text: qsTr("Used")
+				}
+			}
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignHCenter
+			text: {
+				const fmt = UsageFmt.formatKib(Memory.used, Memory.total);
+				return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
+			}
+		}
+	}
+}

Modules/Resources/Cards/NetworkCard.qml

@@ -0,0 +1,183 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Internal
+import qs.Helpers
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: 220
+	implicitWidth: 300
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	Ref {
+		service: NetworkUsage
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.bottomMargin: Appearance.padding.larger
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.large
+		spacing: 0
+
+		RowLayout {
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3primary
+				text: "swap_vert"
+			}
+
+			CustomText {
+				text: qsTr("Network")
+			}
+		}
+
+		Item {
+			Layout.bottomMargin: Appearance.spacing.small
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+			Layout.topMargin: Appearance.spacing.larger
+
+			SparklineItem {
+				id: sparkline
+
+				property real smoothMax: targetMax
+				property real targetMax: 1024
+
+				anchors.fill: parent
+				historyLength: NetworkUsage.historyLength
+				line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
+				line1Color: DynamicColors.palette.m3secondary
+				line1FillAlpha: 0.15
+				line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
+				line2Color: DynamicColors.palette.m3tertiary
+				line2FillAlpha: 0.2
+				maxValue: smoothMax
+
+				Behavior on smoothMax {
+					Anim {
+					}
+				}
+
+				Connections {
+					function onValuesChanged(): void {
+						sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
+						slideAnim.restart();
+					}
+
+					target: NetworkUsage.downloadBuffer
+				}
+
+				NumberAnimation {
+					id: slideAnim
+
+					duration: Config.dashboard.resourceUpdateInterval
+					easing.type: Easing.Linear
+					from: 0
+					property: "slideProgress"
+					target: sparkline
+					to: 1
+				}
+			}
+
+			// "Collecting data" placeholder
+			CustomText {
+				anchors.centerIn: parent
+				color: DynamicColors.palette.m3outline
+				text: qsTr("Collecting data...")
+				visible: NetworkUsage.downloadBuffer.count < 2
+			}
+		}
+
+		// Download row
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3tertiary
+				text: "download"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Download")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3tertiary
+				text: {
+					const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
+					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
+				}
+			}
+		}
+
+		// Upload row
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3secondary
+				text: "upload"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Upload")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3secondary
+				text: {
+					const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
+					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
+				}
+			}
+		}
+
+		// Session totals
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: "history"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Total")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: {
+					const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
+					const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
+					return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
+				}
+			}
+		}
+	}
+}

Modules/Resources/Cards/StorageCard.qml

@@ -0,0 +1,127 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import ZShell.Services
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	readonly property color accent: DynamicColors.palette.m3secondary
+	readonly property real percentage: Storage.primaryDisk?.perc ?? 0
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+	implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	ServiceRef {
+		service: Storage
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: 0
+
+		RowLayout {
+			id: row
+
+			Layout.alignment: Qt.AlignHCenter
+			spacing: Appearance.spacing.large
+
+			CircularProgress {
+				fgColor: root.accent
+				implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.large * 2
+				startAngle: -225
+				sweepAngle: 270
+				value: root.percentage
+
+				Behavior on clampedVal {
+					Anim {
+					}
+				}
+
+				ColumnLayout {
+					id: usageColumn
+
+					anchors.centerIn: parent
+					spacing: 0
+
+					MaterialIcon {
+						Layout.alignment: Qt.AlignHCenter
+						color: root.accent
+						font.pointSize: Appearance.font.size.medium
+						text: "hard_drive"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignHCenter
+						color: root.accent
+						text: Math.round(root.percentage * 100) + "%"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignHCenter
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: qsTr("Used")
+					}
+				}
+			}
+
+			ColumnLayout {
+				spacing: Appearance.spacing.extraSmall
+
+				CustomText {
+					text: qsTr("Storage")
+				}
+
+				CustomText {
+					color: root.accent
+					text: {
+						if (!Storage.primaryDisk)
+							return qsTr("No disks detected");
+
+						const fmt = UsageFmt.formatKib(Storage.primaryDisk.used, Storage.primaryDisk.total);
+						return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
+					}
+				}
+			}
+		}
+
+		CustomSplitButton {
+			Layout.alignment: Qt.AlignHCenter
+			active: menuItems.find(m => m.modelData === Storage.primaryDisk) ?? menuItems[0] ?? null
+			enabled: Storage.disks.length
+			fallbackIcon: "storage"
+			fallbackText: qsTr("No disks")
+			menuItems: disks.instances
+			minLeftWidth: row.implicitWidth * 0.6
+			type: CustomSplitButton.Tonal
+
+			menu.onItemSelected: item => Storage.manualPrimaryDisk = (item as DiskItem).modelData
+
+			Variants {
+				id: disks
+
+				model: Storage.disks
+
+				DiskItem {
+				}
+			}
+		}
+	}
+
+	component DiskItem: MenuItem {
+		required property var modelData
+
+		activeIcon: "storage"
+		icon: modelData === Storage.primaryDisk ? "check" : ""
+		text: modelData.mount
+	}
+}