restructure bar components layout

Modules/Bar/Components/Resources.qml

@@ -0,0 +1,94 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import QtQuick.Layouts
+import ZShell.Config
+import ZShell.Services
+import qs.Services
+import qs.Modules
+import qs.Components
+
+CustomRect {
+	id: root
+
+	required property bool horizontal
+	required property PersistentProperties visibilities
+
+	clip: true
+	color: visibilities.resources ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : gridLayout.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: horizontal ? gridLayout.implicitWidth + Tokens.padding.larger * 2 : Math.max(Config.bar.height, Tokens.bar.innerSize)
+	radius: Tokens.rounding.full
+
+	StateLayer {
+		color: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+		onClicked: root.visibilities.resources = !root.visibilities.resources
+	}
+
+	GridLayout {
+		id: gridLayout
+
+		anchors.centerIn: parent
+		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
+		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
+		columnSpacing: Tokens.spacing.smaller
+		columns: root.horizontal ? -1 : 1
+
+		ServiceRef {
+			service: Gpu
+		}
+
+		ServiceRef {
+			service: Cpu
+		}
+
+		ServiceRef {
+			service: Memory
+		}
+
+		Resource {
+			Layout.alignment: Qt.AlignVCenter
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "memory"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
+			percentage: Cpu.percentage
+			warningThreshold: 95
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "memory_alt"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3secondary
+			percentage: Memory.percentage
+			warningThreshold: 80
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "gamepad"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3tertiary
+			percentage: Gpu.percentage
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "developer_board"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
+			percentage: Gpu.memoryUsed / Gpu.memoryTotal
+		}
+	}
+}