refactor: use entries directly in bar object instead of nested components + various fixes and additions to settings

Modules/SysTray/StatusIcons.qml

@@ -0,0 +1,128 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Helpers
+import qs.Modules.SysTray.Widgets
+import qs.Config
+import qs.Components
+
+CustomClippingRect {
+	id: root
+
+	readonly property int firstPresent: {
+		const values = model.values;
+		for (let i = 0; i < values.length; i++)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+
+	// Index of the first/last entry that isn't collapsed, for edge margin gating
+	readonly property alias items: row
+	readonly property int lastPresent: {
+		const values = model.values;
+		for (let i = values.length - 1; i >= 0; i--)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+	readonly property int spacing: Appearance.spacing.normal / 2
+
+	// Entries that can shrink to nothing, spacing included
+	function collapsed(entry: var): bool {
+		if (entry.id === "lockStatus")
+			return !Hypr.capsLock && !Hypr.numLock;
+		return false;
+	}
+
+	bottomLeftRadius: Appearance.rounding.smallest / 2
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitWidth: row.implicitWidth + Appearance.padding.small * 2
+	radius: Appearance.rounding.full
+	topLeftRadius: Appearance.rounding.smallest / 2
+
+	RowLayout {
+		id: row
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.small
+		anchors.rightMargin: Appearance.padding.small
+
+		Repeater {
+			model: ScriptModel {
+				id: model
+
+				values: Config.bar.tray.statusIcons.filter(e => e.enabled)
+			}
+
+			DelegateChooser {
+				role: "id"
+
+				DelegateChoice {
+					roleValue: "audio"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						AudioWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "microphone"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						MicWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "power"
+
+					delegate: EntryWrapper {
+						name: "upower"
+
+						UPowerWidget {
+						}
+					}
+				}
+			}
+		}
+	}
+
+	component EntryWrapper: Item {
+		required property int index
+		default property Item item
+		property real leftGap: present && index !== root.lastPresent ? margin : 0
+		property int margin: root.spacing / 2
+		required property var modelData
+		property string name: modelData.id.toLowerCase()
+		readonly property bool present: !root.collapsed(modelData)
+		property real rightGap: present && index !== root.firstPresent ? margin : 0
+
+		Layout.alignment: Qt.AlignHCenter
+		Layout.leftMargin: Math.round(leftGap)
+		Layout.rightMargin: Math.round(rightGap)
+		children: item
+		implicitHeight: item?.implicitHeight ?? 0
+		implicitWidth: item?.implicitWidth ?? 0
+
+		Behavior on leftGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+		Behavior on rightGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+	}
+}

Modules/SysTray/TrayIcons.qml

@@ -0,0 +1,53 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.SystemTray
+import qs.Components
+import qs.Config
+import qs.Modules.SysTray.Widgets
+import qs.Modules
+
+CustomClippingRect {
+	id: root
+
+	readonly property alias items: repeater
+	readonly property alias layout: sysRow
+	required property RowLayout loader
+	readonly property int padding: Appearance.padding.small
+	required property Wrapper popouts
+
+	bottomRightRadius: Appearance.rounding.smallest / 2
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitWidth: sysRow.implicitWidth + Appearance.padding.small * 2
+	radius: Appearance.rounding.full
+	topRightRadius: Appearance.rounding.smallest / 2
+
+	RowLayout {
+		id: sysRow
+
+		anchors.centerIn: parent
+		spacing: 0
+
+		Repeater {
+			id: repeater
+
+			model: SystemTray.items
+
+			TrayItem {
+				id: trayItem
+
+				required property int index
+				required property SystemTrayItem modelData
+
+				implicitHeight: 34
+				implicitWidth: 34
+				ind: index
+				item: modelData
+				loader: root.loader
+				popouts: root.popouts
+			}
+		}
+	}
+}

Modules/SysTray/TrayWidget.qml

@@ -44,15 +44,20 @@ RowLayout {
 	function getHoveredSubItem(localX, localY) {
 		let modPos = mapToItem(sysTrayMod, localX, localY);
 		if (sysTrayMod.contains(Qt.point(modPos.x, modPos.y))) {
-			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
-			let child = closestRowChild(sysModRow, modRowPos.x);
+			let modRowPos = sysTrayMod.mapToItem(sysIcons, modPos.x, modPos.y);
+			let child = closestRowChild(sysIcons, modRowPos.x);
 			if (child) {
-				if (child.objectName === "audioWidget" && Config.bar.popouts.audio)
+				if (child.objectName === "audio" && Config.bar.popouts.audio)
 					return {
 						id: "audio",
 						item: child
 					};
-				if (child.objectName === "upowerWidget" && Config.bar.popouts.upower)
+				if (child.objectName === "microphone" && Config.bar.popouts.audio)
+					return {
+						id: "audio",
+						item: child
+					};
+				if (child.objectName === "upower" && Config.bar.popouts.upower)
 					return {
 						id: "upower",
 						item: child
@@ -123,33 +128,16 @@ RowLayout {
 		Layout.fillHeight: true
 		bottomLeftRadius: Appearance.rounding.smallest / 2
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysModRow.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
+		implicitWidth: sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
 		radius: Appearance.rounding.full
 		topLeftRadius: Appearance.rounding.smallest / 2
 
-		RowLayout {
-			id: sysModRow
+		StatusIcons {
+			id: sysIcons
 
 			anchors.fill: parent
 			anchors.leftMargin: Appearance.padding.smaller
 			anchors.rightMargin: Appearance.padding.normal
-
-			AudioWidget {
-				Layout.fillHeight: true
-				Layout.rightMargin: hasContent ? Appearance.spacing.extraSmall / 2 : 0
-				objectName: "audioWidget"
-
-				Behavior on Layout.rightMargin {
-					Anim {
-						type: Anim.FastEffects
-					}
-				}
-			}
-
-			UPowerWidget {
-				Layout.fillHeight: true
-				objectName: "upowerWidget"
-			}
 		}
 	}
 }

Modules/SysTray/Widgets/AudioWidget.qml

@@ -7,72 +7,25 @@ import qs.Modules
 import qs.Config
 import qs.Components
 
-RowLayout {
-	id: root
+MaterialIcon {
+	id: speaker
 
-	property color barColor: DynamicColors.palette.m3primary
-	readonly property bool hasContent: mic.visible || speaker.visible
-	property color textColor: DynamicColors.palette.m3onSurface
+	animate: true
+	color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Appearance.font.size.larger
+	text: Audio.muted ? "volume_off" : "volume_up"
 
-	width: hasContent ? implicitWidth : 0
-
-	MaterialIcon {
-		id: mic
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showMicrophone
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.sourceMuted ? "mic_off" : "mic"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
-		}
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
+	Behavior on Layout.maximumWidth {
+		Anim {
 		}
 	}
-
-	MaterialIcon {
-		id: speaker
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showAudio
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: Audio.muted ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.muted ? "volume_off" : "volume_up"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
+	Behavior on opacity {
+		Anim {
 		}
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
+	}
+	Behavior on scale {
+		Anim {
 		}
 	}
 }

Modules/SysTray/Widgets/MicWidget.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Services.Pipewire
+import qs.Daemons
+import qs.Modules
+import qs.Config
+import qs.Components
+
+MaterialIcon {
+	id: mic
+
+	animate: true
+	color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Appearance.font.size.larger
+	text: Audio.sourceMuted ? "mic_off" : "mic"
+
+	Behavior on Layout.maximumWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+}

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -8,15 +8,8 @@ import qs.Helpers
 Item {
 	id: root
 
-	readonly property bool shouldBeActive: Config.bar.tray.showPower
-
-	Layout.preferredHeight: shouldBeActive ? implicitHeight : 0
-	Layout.preferredWidth: shouldBeActive ? implicitWidth : 0
 	implicitHeight: Battery.isLaptop ? batteryIconLoader.item.implicitHeight : upowerIconLoader.item.implicitHeight
 	implicitWidth: Battery.isLaptop ? batteryIconLoader.item.implicitWidth : upowerIconLoader.item.implicitWidth
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0
-	visible: opacity > 0
 
 	Behavior on Layout.preferredHeight {
 		Anim {