added services page + rename barConfig json property to bar, migration helper function

Modules/SysTray/TrayItem.qml

@@ -57,7 +57,7 @@ Item {
 				if (mouse.button === Qt.LeftButton) {
 					root.item.activate();
 					console.log(icon.source + "\n" + root.item.id);
-				} else if (mouse.button === Qt.RightButton && Config.barConfig.popouts.tray) {
+				} else if (mouse.button === Qt.RightButton && Config.bar.popouts.tray) {
 					root.popouts.currentName = `traymenu${root.ind}`;
 					root.popouts.currentCenter = Qt.binding(() => root.mapToItem(root.loader, root.implicitWidth / 2, 0).x);
 					root.popouts.hasCurrent = true;
@@ -77,7 +77,7 @@ Item {
 		anchors.centerIn: parent
 		antialiasing: true
 		color: root.current ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-		implicitSize: Config.barConfig.tray.trayIconSize * root.dpr
+		implicitSize: Config.bar.tray.trayIconSize * root.dpr
 		layer.enabled: Config.general.color.smart || Config.general.color.scheduleDark
 		scale: 1 / root.dpr
 		source: root.resolveIcon(root.item.id, root.item.icon)

Modules/SysTray/TrayWidget.qml

@@ -47,12 +47,12 @@ RowLayout {
 			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
 			let child = closestRowChild(sysModRow, modRowPos.x);
 			if (child) {
-				if (child.objectName === "audioWidget" && Config.barConfig.popouts.audio)
+				if (child.objectName === "audioWidget" && Config.bar.popouts.audio)
 					return {
 						id: "audio",
 						item: child
 					};
-				if (child.objectName === "upowerWidget" && Config.barConfig.popouts.upower)
+				if (child.objectName === "upowerWidget" && Config.bar.popouts.upower)
 					return {
 						id: "upower",
 						item: child
@@ -75,7 +75,7 @@ RowLayout {
 		return null;
 	}
 
-	height: Config.barConfig.height + Appearance.padding.smallest * 2
+	height: Config.bar.height + Appearance.padding.smallest * 2
 	spacing: Appearance.padding.small
 	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
 
@@ -123,22 +123,31 @@ RowLayout {
 		Layout.fillHeight: true
 		bottomLeftRadius: Appearance.rounding.smallest / 2
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysModRow.width + Appearance.padding.smaller * 2
+		implicitWidth: sysModRow.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
 		radius: Appearance.rounding.full
 		topLeftRadius: Appearance.rounding.smallest / 2
 
-		Row {
+		RowLayout {
 			id: sysModRow
 
-			anchors.centerIn: parent
-			spacing: Appearance.padding.small
+			anchors.fill: parent
+			anchors.leftMargin: Appearance.padding.smaller
+			anchors.rightMargin: Appearance.padding.normal
 
 			AudioWidget {
+				Layout.fillHeight: true
+				Layout.rightMargin: hasContent ? Appearance.spacing.extraSmall : 0
 				objectName: "audioWidget"
+
+				Behavior on Layout.rightMargin {
+					Anim {
+						type: Anim.FastEffects
+					}
+				}
 			}
 
 			UPowerWidget {
-				height: parent.height
+				Layout.fillHeight: true
 				objectName: "upowerWidget"
 			}
 		}

Modules/SysTray/Widgets/AudioWidget.qml

@@ -11,25 +11,68 @@ RowLayout {
 	id: root
 
 	property color barColor: DynamicColors.palette.m3primary
+	readonly property bool hasContent: mic.visible || speaker.visible
 	property color textColor: DynamicColors.palette.m3onSurface
 
+	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 {
+			}
+		}
 	}
 
 	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 scale {
+			Anim {
+			}
+		}
 	}
 }

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -8,8 +8,32 @@ 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 {
+		}
+	}
+	Behavior on Layout.preferredWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
 
 	Loader {
 		id: batteryIconLoader