sidebar toggle buttons

Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml

@@ -2,9 +2,9 @@ import Quickshell.Bluetooth
 import Quickshell.Networking as QSNetwork
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Components
 import qs.Components
 import qs.Config
-import qs.Modules
 import qs.Helpers
 import qs.Daemons
 
@@ -19,74 +19,69 @@ CustomRect {
 	implicitHeight: layout.implicitHeight + 18 * 2
 	radius: Appearance.rounding.smallest
 
-	ColumnLayout {
+	ButtonRow {
 		id: layout
 
 		anchors.fill: parent
 		anchors.margins: 18
-		spacing: 10
+		spacing: Appearance.spacing.extraSmall
 
-		RowLayout {
-			Layout.alignment: Qt.AlignHCenter
-			spacing: 7
+		Toggle {
+			checked: Network.wifiEnabled
+			icon: Network.wifiEnabled ? "wifi" : "wifi_off"
+			visible: QSNetwork.Networking.devices.values.some(n => n.type === QSNetwork.DeviceType.Wifi)
 
-			Toggle {
-				checked: Network.wifiEnabled
-				icon: Network.wifiEnabled ? "wifi" : "wifi_off"
-				visible: QSNetwork.Networking.devices.values.some(n => n.type === QSNetwork.DeviceType.Wifi)
+			onClicked: Network.toggleWifi()
+		}
 
-				onClicked: Network.toggleWifi()
+		Toggle {
+			id: toggle
+
+			checked: !NotifServer.dnd
+			icon: NotifServer.dnd ? "notifications_off" : "notifications"
+
+			onClicked: NotifServer.dnd = !NotifServer.dnd
+		}
+
+		Toggle {
+			checked: !Audio.sourceMuted
+			icon: Audio.sourceMuted ? "mic_off" : "mic"
+
+			onClicked: {
+				const audio = Audio.source?.audio;
+				if (audio)
+					audio.muted = !audio.muted;
 			}
+		}
 
-			Toggle {
-				id: toggle
+		Toggle {
+			checked: !Audio.muted
+			icon: Audio.muted ? "volume_off" : "volume_up"
 
-				checked: !NotifServer.dnd
-				icon: NotifServer.dnd ? "notifications_off" : "notifications"
-
-				onClicked: NotifServer.dnd = !NotifServer.dnd
+			onClicked: {
+				const audio = Audio.sink?.audio;
+				if (audio)
+					audio.muted = !audio.muted;
 			}
+		}
 
-			Toggle {
-				checked: !Audio.sourceMuted
-				icon: Audio.sourceMuted ? "mic_off" : "mic"
+		Toggle {
+			checked: Bluetooth.defaultAdapter?.enabled ?? false
+			icon: Bluetooth.defaultAdapter?.enabled ? "bluetooth" : "bluetooth_disabled"
+			visible: Bluetooth.defaultAdapter ?? false
 
-				onClicked: {
-					const audio = Audio.source?.audio;
-					if (audio)
-						audio.muted = !audio.muted;
-				}
+			onClicked: {
+				const adapter = Bluetooth.defaultAdapter;
+				if (adapter)
+					adapter.enabled = !adapter.enabled;
 			}
+		}
 
-			Toggle {
-				checked: !Audio.muted
-				icon: Audio.muted ? "volume_off" : "volume_up"
+		Toggle {
+			checked: GameMode.enabled
+			icon: GameMode.enabled ? "videogame_asset" : "videogame_asset_off"
 
-				onClicked: {
-					const audio = Audio.sink?.audio;
-					if (audio)
-						audio.muted = !audio.muted;
-				}
-			}
-
-			Toggle {
-				checked: Bluetooth.defaultAdapter?.enabled ?? false
-				icon: Bluetooth.defaultAdapter?.enabled ? "bluetooth" : "bluetooth_disabled"
-				visible: Bluetooth.defaultAdapter ?? false
-
-				onClicked: {
-					const adapter = Bluetooth.defaultAdapter;
-					if (adapter)
-						adapter.enabled = !adapter.enabled;
-				}
-			}
-
-			Toggle {
-				checked: GameMode.enabled
-				icon: GameMode.enabled ? "videogame_asset" : "videogame_asset_off"
-
-				onClicked: GameMode.enabled = !GameMode.enabled
-			}
+			onClicked: GameMode.enabled = !GameMode.enabled
 		}
 	}
 
@@ -99,19 +94,9 @@ CustomRect {
 	}
 
 	component Toggle: IconButton {
-		Layout.fillWidth: true
-		Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? 18 : internalChecked ? 7 : 0)
-		inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+		fillWidth: true
+		isRound: true
 		isToggle: true
-		radius: stateLayer.pressed ? 6 / 2 : internalChecked ? 6 : 8
-		radiusAnim.duration: MaterialEasing.expressiveEffectsTime
-		radiusAnim.easing.bezierCurve: MaterialEasing.expressiveEffects
-
-		Behavior on Layout.preferredWidth {
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-			}
-		}
+		shapeMorph: true
 	}
 }