formatter

Components/Anim.qml

@@ -2,7 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-    duration: MaterialEasing.standardTime
-    easing.type: Easing.BezierSpline
-    easing.bezierCurve: MaterialEasing.standard
+	duration: MaterialEasing.standardTime
+	easing.bezierCurve: MaterialEasing.standard
+	easing.type: Easing.BezierSpline
 }

Components/CAnim.qml

@@ -2,7 +2,7 @@ import QtQuick
 import qs.Config
 
 ColorAnimation {
-    duration: MaterialEasing.standardTime
-    easing.type: Easing.BezierSpline
-    easing.bezierCurve: MaterialEasing.standard
+	duration: MaterialEasing.standardTime
+	easing.bezierCurve: MaterialEasing.standard
+	easing.type: Easing.BezierSpline
 }

Components/CircularIndicator.qml

@@ -4,103 +4,99 @@ import QtQuick
 import QtQuick.Templates
 
 BusyIndicator {
-    id: root
+	id: root
 
-    enum AnimType {
-        Advance = 0,
-        Retreat
-    }
+	enum AnimState {
+		Stopped,
+		Running,
+		Completing
+	}
+	enum AnimType {
+		Advance = 0,
+		Retreat
+	}
 
-    enum AnimState {
-        Stopped,
-        Running,
-        Completing
-    }
+	property int animState
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color fgColour: DynamicColors.palette.m3primary
+	property real implicitSize: Appearance.font.size.normal * 3
+	property real internalStrokeWidth: strokeWidth
+	readonly property alias progress: manager.progress
+	property real strokeWidth: Appearance.padding.small * 0.8
+	property alias type: manager.indeterminateAnimationType
 
-    property real implicitSize: Appearance.font.size.normal * 3
-    property real strokeWidth: Appearance.padding.small * 0.8
-    property color fgColour: DynamicColors.palette.m3primary
-    property color bgColour: DynamicColors.palette.m3secondaryContainer
+	implicitHeight: implicitSize
+	implicitWidth: implicitSize
+	padding: 0
 
-    property alias type: manager.indeterminateAnimationType
-    readonly property alias progress: manager.progress
+	contentItem: CircularProgress {
+		anchors.fill: parent
+		bgColour: root.bgColour
+		fgColour: root.fgColour
+		padding: root.padding
+		rotation: manager.rotation
+		startAngle: manager.startFraction * 360
+		strokeWidth: root.internalStrokeWidth
+		value: manager.endFraction - manager.startFraction
+	}
+	states: State {
+		name: "stopped"
+		when: !root.running
 
-    property real internalStrokeWidth: strokeWidth
-    property int animState
+		PropertyChanges {
+			root.internalStrokeWidth: root.strokeWidth / 3
+			root.opacity: 0
+		}
+	}
+	transitions: Transition {
+		Anim {
+			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			properties: "opacity,internalStrokeWidth"
+		}
+	}
 
-    padding: 0
-    implicitWidth: implicitSize
-    implicitHeight: implicitSize
+	Component.onCompleted: {
+		if (running) {
+			running = false;
+			running = true;
+		}
+	}
+	onRunningChanged: {
+		if (running) {
+			manager.completeEndProgress = 0;
+			animState = CircularIndicator.Running;
+		} else {
+			if (animState == CircularIndicator.Running)
+				animState = CircularIndicator.Completing;
+		}
+	}
 
-    Component.onCompleted: {
-        if (running) {
-            running = false;
-            running = true;
-        }
-    }
+	CircularIndicatorManager {
+		id: manager
 
-    onRunningChanged: {
-        if (running) {
-            manager.completeEndProgress = 0;
-            animState = CircularIndicator.Running;
-        } else {
-            if (animState == CircularIndicator.Running)
-                animState = CircularIndicator.Completing;
-        }
-    }
+	}
 
-    states: State {
-        name: "stopped"
-        when: !root.running
+	NumberAnimation {
+		duration: manager.duration * Appearance.anim.durations.scale
+		from: 0
+		loops: Animation.Infinite
+		property: "progress"
+		running: root.animState !== CircularIndicator.Stopped
+		target: manager
+		to: 1
+	}
 
-        PropertyChanges {
-            root.opacity: 0
-            root.internalStrokeWidth: root.strokeWidth / 3
-        }
-    }
+	NumberAnimation {
+		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		from: 0
+		property: "completeEndProgress"
+		running: root.animState === CircularIndicator.Completing
+		target: manager
+		to: 1
 
-    transitions: Transition {
-        Anim {
-            properties: "opacity,internalStrokeWidth"
-            duration: manager.completeEndDuration * Appearance.anim.durations.scale
-        }
-    }
-
-    contentItem: CircularProgress {
-        anchors.fill: parent
-        strokeWidth: root.internalStrokeWidth
-        fgColour: root.fgColour
-        bgColour: root.bgColour
-        padding: root.padding
-        rotation: manager.rotation
-        startAngle: manager.startFraction * 360
-        value: manager.endFraction - manager.startFraction
-    }
-
-    CircularIndicatorManager {
-        id: manager
-    }
-
-    NumberAnimation {
-        running: root.animState !== CircularIndicator.Stopped
-        loops: Animation.Infinite
-        target: manager
-        property: "progress"
-        from: 0
-        to: 1
-        duration: manager.duration * Appearance.anim.durations.scale
-    }
-
-    NumberAnimation {
-        running: root.animState === CircularIndicator.Completing
-        target: manager
-        property: "completeEndProgress"
-        from: 0
-        to: 1
-        duration: manager.completeEndDuration * Appearance.anim.durations.scale
-        onFinished: {
-            if (root.animState === CircularIndicator.Completing)
-                root.animState = CircularIndicator.Stopped;
-        }
-    }
+		onFinished: {
+			if (root.animState === CircularIndicator.Completing)
+				root.animState = CircularIndicator.Stopped;
+		}
+	}
 }

Components/CircularProgress.qml

@@ -3,65 +3,64 @@ import QtQuick.Shapes
 import qs.Config
 
 Shape {
-    id: root
+	id: root
 
-    property real value
-    property int startAngle: -90
-    property int strokeWidth: Appearance.padding.smaller
-    property int padding: 0
-    property int spacing: Appearance.spacing.small
-    property color fgColour: DynamicColors.palette.m3primary
-    property color bgColour: DynamicColors.palette.m3secondaryContainer
+	readonly property real arcRadius: (size - padding - strokeWidth) / 2
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color fgColour: DynamicColors.palette.m3primary
+	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
+	property int padding: 0
+	readonly property real size: Math.min(width, height)
+	property int spacing: Appearance.spacing.small
+	property int startAngle: -90
+	property int strokeWidth: Appearance.padding.smaller
+	readonly property real vValue: value || 1 / 360
+	property real value
 
-    readonly property real size: Math.min(width, height)
-    readonly property real arcRadius: (size - padding - strokeWidth) / 2
-    readonly property real vValue: value || 1 / 360
-    readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
+	asynchronous: true
+	preferredRendererType: Shape.CurveRenderer
 
-    preferredRendererType: Shape.CurveRenderer
-    asynchronous: true
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.bgColour
+		strokeWidth: root.strokeWidth
 
-    ShapePath {
-        fillColor: "transparent"
-        strokeColor: root.bgColour
-        strokeWidth: root.strokeWidth
-        capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		Behavior on strokeColor {
+			CAnim {
+				duration: Appearance.anim.durations.large
+			}
+		}
 
-        PathAngleArc {
-            startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
-            sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
-            radiusX: root.arcRadius
-            radiusY: root.arcRadius
-            centerX: root.size / 2
-            centerY: root.size / 2
-        }
+		PathAngleArc {
+			centerX: root.size / 2
+			centerY: root.size / 2
+			radiusX: root.arcRadius
+			radiusY: root.arcRadius
+			startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
+		}
+	}
 
-        Behavior on strokeColor {
-            CAnim {
-                duration: Appearance.anim.durations.large
-            }
-        }
-    }
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.fgColour
+		strokeWidth: root.strokeWidth
 
-    ShapePath {
-        fillColor: "transparent"
-        strokeColor: root.fgColour
-        strokeWidth: root.strokeWidth
-        capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		Behavior on strokeColor {
+			CAnim {
+				duration: Appearance.anim.durations.large
+			}
+		}
 
-        PathAngleArc {
-            startAngle: root.startAngle
-            sweepAngle: 360 * root.vValue
-            radiusX: root.arcRadius
-            radiusY: root.arcRadius
-            centerX: root.size / 2
-            centerY: root.size / 2
-        }
-
-        Behavior on strokeColor {
-            CAnim {
-                duration: Appearance.anim.durations.large
-            }
-        }
-    }
+		PathAngleArc {
+			centerX: root.size / 2
+			centerY: root.size / 2
+			radiusX: root.arcRadius
+			radiusY: root.arcRadius
+			startAngle: root.startAngle
+			sweepAngle: 360 * root.vValue
+		}
+	}
 }

Components/ColoredIcon.qml

@@ -5,31 +5,30 @@ import Quickshell.Widgets
 import QtQuick
 
 IconImage {
-    id: root
+	id: root
 
-    required property color color
+	required property color color
 
-    asynchronous: true
+	asynchronous: true
+	layer.enabled: true
 
-    layer.enabled: true
-    layer.effect: Coloriser {
-        sourceColor: analyser.dominantColour
-        colorizationColor: root.color
-    }
+	layer.effect: Coloriser {
+		colorizationColor: root.color
+		sourceColor: analyser.dominantColour
+	}
 
-    layer.onEnabledChanged: {
-        if (layer.enabled && status === Image.Ready)
-            analyser.requestUpdate();
-    }
+	layer.onEnabledChanged: {
+		if (layer.enabled && status === Image.Ready)
+			analyser.requestUpdate();
+	}
+	onStatusChanged: {
+		if (layer.enabled && status === Image.Ready)
+			analyser.requestUpdate();
+	}
 
-    onStatusChanged: {
-        if (layer.enabled && status === Image.Ready)
-            analyser.requestUpdate();
-    }
+	ImageAnalyser {
+		id: analyser
 
-    ImageAnalyser {
-        id: analyser
-
-        sourceItem: root
-    }
+		sourceItem: root
+	}
 }

Components/Coloriser.qml

@@ -2,12 +2,13 @@ import QtQuick
 import QtQuick.Effects
 
 MultiEffect {
-    property color sourceColor: "black"
+	property color sourceColor: "black"
 
-    colorization: 1
-    brightness: 1 - sourceColor.hslLightness
+	brightness: 1 - sourceColor.hslLightness
+	colorization: 1
 
-    Behavior on colorizationColor {
-        CAnim {}
-    }
+	Behavior on colorizationColor {
+		CAnim {
+		}
+	}
 }

Components/CustomAudioSlider.qml

@@ -3,80 +3,72 @@ import QtQuick.Templates
 import qs.Config
 
 Slider {
-    id: root
+	id: root
 
-	required property real peak
 	property color nonPeakColor: DynamicColors.tPalette.m3primary
+	required property real peak
 	property color peakColor: DynamicColors.palette.m3primary
 
-    background: Item {
-        CustomRect {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.topMargin: root.implicitHeight / 3
-            anchors.bottomMargin: root.implicitHeight / 3
-
-            implicitWidth: root.handle.x - root.implicitHeight
-
-            color: root.nonPeakColor
-            radius: 1000
-            topRightRadius: root.implicitHeight / 15
-            bottomRightRadius: root.implicitHeight / 15
+	background: Item {
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: root.implicitHeight / 3
+			anchors.left: parent.left
+			anchors.top: parent.top
+			anchors.topMargin: root.implicitHeight / 3
+			bottomRightRadius: root.implicitHeight / 15
+			color: root.nonPeakColor
+			implicitWidth: root.handle.x - root.implicitHeight
+			radius: 1000
+			topRightRadius: root.implicitHeight / 15
 
 			CustomRect {
-				anchors.top: parent.top
 				anchors.bottom: parent.bottom
 				anchors.left: parent.left
-
+				anchors.top: parent.top
+				bottomRightRadius: root.implicitHeight / 15
+				color: root.peakColor
 				implicitWidth: parent.width * root.peak
 				radius: 1000
 				topRightRadius: root.implicitHeight / 15
-				bottomRightRadius: root.implicitHeight / 15
-
-				color: root.peakColor
 
 				Behavior on implicitWidth {
-					Anim { duration: 50 }
+					Anim {
+						duration: 50
+					}
 				}
 			}
-        }
+		}
 
-        CustomRect {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            anchors.topMargin: root.implicitHeight / 3
-            anchors.bottomMargin: root.implicitHeight / 3
-
-            implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: root.implicitHeight / 3
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.topMargin: root.implicitHeight / 3
+			bottomLeftRadius: root.implicitHeight / 15
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
+			radius: 1000
+			topLeftRadius: root.implicitHeight / 15
 
 			Component.onCompleted: {
-				console.log(root.handle.x, implicitWidth)
+				console.log(root.handle.x, implicitWidth);
 			}
+		}
+	}
+	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: 1000
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-
-            color: DynamicColors.tPalette.m3surfaceContainer
-            radius: 1000
-            topLeftRadius: root.implicitHeight / 15
-            bottomLeftRadius: root.implicitHeight / 15
-        }
-    }
-
-    handle: CustomRect {
-        x: root.visualPosition * root.availableWidth - implicitWidth / 2
-
-        implicitWidth: 5
-        implicitHeight: 15
-        anchors.verticalCenter: parent.verticalCenter
-
-        color: DynamicColors.palette.m3primary
-        radius: 1000
-
-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.NoButton
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+		}
+	}
 }

Components/CustomBusyIndicator.qml

@@ -2,64 +2,68 @@ import QtQuick
 import QtQuick.Controls.Basic
 
 BusyIndicator {
-    id: control
-	property color color: delegate.color
+	id: control
+
 	property int busySize: 64
+	property color color: delegate.color
 
-    contentItem: Item {
-        implicitWidth: control.busySize
-        implicitHeight: control.busySize
+	contentItem: Item {
+		implicitHeight: control.busySize
+		implicitWidth: control.busySize
 
-        Item {
-            id: item
-            x: parent.width / 2 - (control.busySize / 2)
-            y: parent.height / 2 - (control.busySize / 2)
-            width: control.busySize
-            height: control.busySize
-            opacity: control.running ? 1 : 0
+		Item {
+			id: item
 
-            Behavior on opacity {
-                OpacityAnimator {
-                    duration: 250
-                }
-            }
+			height: control.busySize
+			opacity: control.running ? 1 : 0
+			width: control.busySize
+			x: parent.width / 2 - (control.busySize / 2)
+			y: parent.height / 2 - (control.busySize / 2)
 
-            RotationAnimator {
-                target: item
-                running: control.visible && control.running
-                from: 0
-                to: 360
-                loops: Animation.Infinite
-                duration: 1250
-            }
+			Behavior on opacity {
+				OpacityAnimator {
+					duration: 250
+				}
+			}
 
-            Repeater {
-                id: repeater
-                model: 6
+			RotationAnimator {
+				duration: 1250
+				from: 0
+				loops: Animation.Infinite
+				running: control.visible && control.running
+				target: item
+				to: 360
+			}
 
-                CustomRect {
-                    id: delegate
-                    x: item.width / 2 - width / 2
-                    y: item.height / 2 - height / 2
-                    implicitWidth: 10
-                    implicitHeight: 10
-                    radius: 5
-                    color: control.color
+			Repeater {
+				id: repeater
 
-                    required property int index
+				model: 6
 
-                    transform: [
-                        Translate {
-                            y: -Math.min(item.width, item.height) * 0.5 + 5
-                        },
-                        Rotation {
-                            angle: delegate.index / repeater.count * 360
-                            origin.x: 5
-                            origin.y: 5
-                        }
-                    ]
-                }
-            }
-        }
-    }
+				CustomRect {
+					id: delegate
+
+					required property int index
+
+					color: control.color
+					implicitHeight: 10
+					implicitWidth: 10
+					radius: 5
+					x: item.width / 2 - width / 2
+					y: item.height / 2 - height / 2
+
+					transform: [
+						Translate {
+							y: -Math.min(item.width, item.height) * 0.5 + 5
+						},
+						Rotation {
+							angle: delegate.index / repeater.count * 360
+							origin.x: 5
+							origin.y: 5
+						}
+					]
+				}
+			}
+		}
+	}
 }

Components/CustomButton.qml

@@ -4,30 +4,28 @@ import QtQuick.Controls
 Button {
 	id: control
 
-	required property color textColor
 	required property color bgColor
 	property int radius: 4
+	required property color textColor
 
-	contentItem: CustomText {
-		text: control.text
-
+	background: CustomRect {
+		color: control.bgColor
 		opacity: control.enabled ? 1.0 : 0.5
+		radius: control.radius
+	}
+	contentItem: CustomText {
 		color: control.textColor
 		horizontalAlignment: Text.AlignHCenter
+		opacity: control.enabled ? 1.0 : 0.5
+		text: control.text
 		verticalAlignment: Text.AlignVCenter
 	}
 
-	background: CustomRect {
-		opacity: control.enabled ? 1.0 : 0.5
-
-		radius: control.radius
-		color: control.bgColor
-	}
-
 	StateLayer {
-		radius: control.radius
 		function onClicked(): void {
 			control.clicked();
 		}
+
+		radius: control.radius
 	}
 }

Components/CustomCheckbox.qml

@@ -5,35 +5,33 @@ import qs.Config
 CheckBox {
 	id: control
 
-	property int checkWidth: 20
 	property int checkHeight: 20
+	property int checkWidth: 20
 
+	contentItem: CustomText {
+		anchors.left: parent.left
+		anchors.leftMargin: control.checkWidth + control.leftPadding + 8
+		anchors.verticalCenter: parent.verticalCenter
+		font.pointSize: control.font.pointSize
+		text: control.text
+	}
 	indicator: CustomRect {
-		implicitWidth: control.checkWidth
-		implicitHeight: control.checkHeight
 		// x: control.leftPadding
 		// y: parent.implicitHeight / 2 - implicitHeight / 2
 		border.color: control.checked ? DynamicColors.palette.m3primary : "transparent"
 		color: DynamicColors.palette.m3surfaceVariant
-
+		implicitHeight: control.checkHeight
+		implicitWidth: control.checkWidth
 		radius: 4
 
 		CustomRect {
-			implicitWidth: control.checkWidth - (x * 2)
+			color: DynamicColors.palette.m3primary
 			implicitHeight: control.checkHeight - (y * 2)
+			implicitWidth: control.checkWidth - (x * 2)
+			radius: 3
+			visible: control.checked
 			x: 4
 			y: 4
-			radius: 3
-			color: DynamicColors.palette.m3primary
-			visible: control.checked
 		}
 	}
-
-	contentItem: CustomText {
-		text: control.text
-		font.pointSize: control.font.pointSize
-		anchors.verticalCenter: parent.verticalCenter
-		anchors.left: parent.left
-		anchors.leftMargin: control.checkWidth + control.leftPadding + 8
-	}
 }

Components/CustomClippingRect.qml

@@ -2,11 +2,12 @@ import Quickshell.Widgets
 import QtQuick
 
 ClippingRectangle {
-    id: root
+	id: root
 
-    color: "transparent"
+	color: "transparent"
 
-    Behavior on color {
-        CAnim {}
-    }
+	Behavior on color {
+		CAnim {
+		}
+	}
 }

Components/CustomFlickable.qml

@@ -1,13 +1,13 @@
 import QtQuick
 
 Flickable {
-    id: root
+	id: root
 
-    maximumFlickVelocity: 3000
+	maximumFlickVelocity: 3000
 
-    rebound: Transition {
-        Anim {
-            properties: "x,y"
-        }
-    }
+	rebound: Transition {
+		Anim {
+			properties: "x,y"
+		}
+	}
 }

Components/CustomIcon.qml

@@ -4,7 +4,7 @@ import Quickshell.Widgets
 import QtQuick
 
 IconImage {
-    id: root
+	id: root
 
-    asynchronous: true
+	asynchronous: true
 }

Components/CustomListView.qml

@@ -1,13 +1,13 @@
 import QtQuick
 
 ListView {
-    id: root
+	id: root
 
-    maximumFlickVelocity: 3000
+	maximumFlickVelocity: 3000
 
-    rebound: Transition {
-        Anim {
-            properties: "x,y"
-        }
-    }
+	rebound: Transition {
+		Anim {
+			properties: "x,y"
+		}
+	}
 }

Components/CustomMouseArea.qml

@@ -1,19 +1,19 @@
 import QtQuick
 
 MouseArea {
-    property int scrollAccumulatedY: 0
+	property int scrollAccumulatedY: 0
 
-    function onWheel(event: WheelEvent): void {
-    }
+	function onWheel(event: WheelEvent): void {
+	}
 
-    onWheel: event => {
-        if (Math.sign(event.angleDelta.y) !== Math.sign(scrollAccumulatedY))
-            scrollAccumulatedY = 0;
-        scrollAccumulatedY += event.angleDelta.y;
+	onWheel: event => {
+		if (Math.sign(event.angleDelta.y) !== Math.sign(scrollAccumulatedY))
+			scrollAccumulatedY = 0;
+		scrollAccumulatedY += event.angleDelta.y;
 
-        if (Math.abs(scrollAccumulatedY) >= 120) {
-            onWheel(event);
-            scrollAccumulatedY = 0;
-        }
-    }
+		if (Math.abs(scrollAccumulatedY) >= 120) {
+			onWheel(event);
+			scrollAccumulatedY = 0;
+		}
+	}
 }

Components/CustomRadioButton.qml

@@ -3,53 +3,51 @@ import QtQuick.Templates
 import qs.Config
 
 RadioButton {
-    id: root
+	id: root
 
-    font.pointSize: 12
+	font.pointSize: 12
+	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
+	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 
-    implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
-    implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
+	contentItem: CustomText {
+		anchors.left: outerCircle.right
+		anchors.leftMargin: 10
+		anchors.verticalCenter: parent.verticalCenter
+		font.pointSize: root.font.pointSize
+		text: root.text
+	}
+	indicator: Rectangle {
+		id: outerCircle
 
-    indicator: Rectangle {
-        id: outerCircle
+		anchors.verticalCenter: parent.verticalCenter
+		border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+		border.width: 2
+		color: "transparent"
+		implicitHeight: 16
+		implicitWidth: 16
+		radius: 1000
 
-        implicitWidth: 16
-        implicitHeight: 16
-        radius: 1000
-        color: "transparent"
-        border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
-        border.width: 2
-        anchors.verticalCenter: parent.verticalCenter
+		Behavior on border.color {
+			CAnim {
+			}
+		}
 
-        StateLayer {
-            anchors.margins: -7
-            color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
-            z: -1
+		StateLayer {
+			function onClicked(): void {
+				root.click();
+			}
 
-            function onClicked(): void {
-                root.click();
-            }
-        }
+			anchors.margins: -7
+			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
+			z: -1
+		}
 
-        CustomRect {
-            anchors.centerIn: parent
-            implicitWidth: 8
-            implicitHeight: 8
-
-            radius: 1000
-            color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
-        }
-
-        Behavior on border.color {
-            CAnim {}
-        }
-    }
-
-    contentItem: CustomText {
-        text: root.text
-        font.pointSize: root.font.pointSize
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: outerCircle.right
-        anchors.leftMargin: 10
-    }
+		CustomRect {
+			anchors.centerIn: parent
+			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
+			implicitHeight: 8
+			implicitWidth: 8
+			radius: 1000
+		}
+	}
 }

Components/CustomRect.qml

@@ -1,11 +1,12 @@
 import QtQuick
 
 Rectangle {
-    id: root
+	id: root
 
-    color: "transparent"
+	color: "transparent"
 
-    Behavior on color {
-        CAnim {}
-    }
+	Behavior on color {
+		CAnim {
+		}
+	}
 }

Components/CustomScrollBar.qml

@@ -3,186 +3,187 @@ import QtQuick
 import QtQuick.Templates
 
 ScrollBar {
-    id: root
+	id: root
 
-    required property Flickable flickable
-    property bool shouldBeActive
-    property real nonAnimPosition
-    property bool animating
+	property bool _updatingFromFlickable: false
+	property bool _updatingFromUser: false
+	property bool animating
+	required property Flickable flickable
+	property real nonAnimPosition
+	property bool shouldBeActive
 
-    onHoveredChanged: {
-        if (hovered)
-            shouldBeActive = true;
-        else
-            shouldBeActive = flickable.moving;
-    }
+	implicitWidth: 8
 
-    property bool _updatingFromFlickable: false
-    property bool _updatingFromUser: false
+	contentItem: CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		color: DynamicColors.palette.m3secondary
+		opacity: {
+			if (root.size === 1)
+				return 0;
+			if (fullMouse.pressed)
+				return 1;
+			if (mouse.containsMouse)
+				return 0.8;
+			if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: 1000
 
-    // Sync nonAnimPosition with Qt's automatic position binding
-    onPositionChanged: {
-        if (_updatingFromUser) {
-            _updatingFromUser = false;
-            return;
-        }
-        if (position === nonAnimPosition) {
-            animating = false;
-            return;
-        }
-        if (!animating && !_updatingFromFlickable && !fullMouse.pressed) {
-            nonAnimPosition = position;
-        }
-    }
+		Behavior on opacity {
+			Anim {
+			}
+		}
 
-    // Sync nonAnimPosition with flickable when not animating
-    Connections {
-        target: flickable
-        function onContentYChanged() {
-            if (!animating && !fullMouse.pressed) {
-                _updatingFromFlickable = true;
-                const contentHeight = flickable.contentHeight;
-                const height = flickable.height;
-                if (contentHeight > height) {
-                    nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
-                } else {
-                    nonAnimPosition = 0;
-                }
-                _updatingFromFlickable = false;
-            }
-        }
-    }
+		MouseArea {
+			id: mouse
 
-    Component.onCompleted: {
-        if (flickable) {
-            const contentHeight = flickable.contentHeight;
-            const height = flickable.height;
-            if (contentHeight > height) {
-                nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
-            }
-        }
-    }
-    implicitWidth: 8
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
+	}
+	Behavior on position {
+		enabled: !fullMouse.pressed
 
-    contentItem: CustomRect {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        opacity: {
-            if (root.size === 1)
-                return 0;
-            if (fullMouse.pressed)
-                return 1;
-            if (mouse.containsMouse)
-                return 0.8;
-            if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
-                return 0.6;
-            return 0;
-        }
-        radius: 1000
-        color: DynamicColors.palette.m3secondary
+		Anim {
+		}
+	}
 
-        MouseArea {
-            id: mouse
+	Component.onCompleted: {
+		if (flickable) {
+			const contentHeight = flickable.contentHeight;
+			const height = flickable.height;
+			if (contentHeight > height) {
+				nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+			}
+		}
+	}
+	onHoveredChanged: {
+		if (hovered)
+			shouldBeActive = true;
+		else
+			shouldBeActive = flickable.moving;
+	}
 
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            hoverEnabled: true
-            acceptedButtons: Qt.NoButton
-        }
+	// Sync nonAnimPosition with Qt's automatic position binding
+	onPositionChanged: {
+		if (_updatingFromUser) {
+			_updatingFromUser = false;
+			return;
+		}
+		if (position === nonAnimPosition) {
+			animating = false;
+			return;
+		}
+		if (!animating && !_updatingFromFlickable && !fullMouse.pressed) {
+			nonAnimPosition = position;
+		}
+	}
 
-        Behavior on opacity {
-            Anim {}
-        }
-    }
+	// Sync nonAnimPosition with flickable when not animating
+	Connections {
+		function onContentYChanged() {
+			if (!animating && !fullMouse.pressed) {
+				_updatingFromFlickable = true;
+				const contentHeight = flickable.contentHeight;
+				const height = flickable.height;
+				if (contentHeight > height) {
+					nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+				} else {
+					nonAnimPosition = 0;
+				}
+				_updatingFromFlickable = false;
+			}
+		}
 
-    Connections {
-        target: root.flickable
+		target: flickable
+	}
 
-        function onMovingChanged(): void {
-            if (root.flickable.moving)
-                root.shouldBeActive = true;
-            else
-                hideDelay.restart();
-        }
-    }
+	Connections {
+		function onMovingChanged(): void {
+			if (root.flickable.moving)
+				root.shouldBeActive = true;
+			else
+				hideDelay.restart();
+		}
 
-    Timer {
-        id: hideDelay
+		target: root.flickable
+	}
 
-        interval: 600
-        onTriggered: root.shouldBeActive = root.flickable.moving || root.hovered
-    }
+	Timer {
+		id: hideDelay
 
-    CustomMouseArea {
-        id: fullMouse
+		interval: 600
 
-        anchors.fill: parent
-        preventStealing: true
+		onTriggered: root.shouldBeActive = root.flickable.moving || root.hovered
+	}
 
-        onPressed: event => {
-            root.animating = true;
-            root._updatingFromUser = true;
-            const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
-            root.nonAnimPosition = newPos;
-            // Update flickable position
-            // Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
-            if (root.flickable) {
-                const contentHeight = root.flickable.contentHeight;
-                const height = root.flickable.height;
-                if (contentHeight > height) {
-                    const maxContentY = contentHeight - height;
-                    const maxPos = 1 - root.size;
-                    const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
-                    root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
-                }
-            }
-        }
+	CustomMouseArea {
+		id: fullMouse
 
-        onPositionChanged: event => {
-            root._updatingFromUser = true;
-            const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
-            root.nonAnimPosition = newPos;
-            // Update flickable position
-            // Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
-            if (root.flickable) {
-                const contentHeight = root.flickable.contentHeight;
-                const height = root.flickable.height;
-                if (contentHeight > height) {
-                    const maxContentY = contentHeight - height;
-                    const maxPos = 1 - root.size;
-                    const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
-                    root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
-                }
-            }
-        }
+		function onWheel(event: WheelEvent): void {
+			root.animating = true;
+			root._updatingFromUser = true;
+			let newPos = root.nonAnimPosition;
+			if (event.angleDelta.y > 0)
+				newPos = Math.max(0, root.nonAnimPosition - 0.1);
+			else if (event.angleDelta.y < 0)
+				newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
+		}
 
-        function onWheel(event: WheelEvent): void {
-            root.animating = true;
-            root._updatingFromUser = true;
-            let newPos = root.nonAnimPosition;
-            if (event.angleDelta.y > 0)
-                newPos = Math.max(0, root.nonAnimPosition - 0.1);
-            else if (event.angleDelta.y < 0)
-                newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
-            root.nonAnimPosition = newPos;
-            // Update flickable position
-            // Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
-            if (root.flickable) {
-                const contentHeight = root.flickable.contentHeight;
-                const height = root.flickable.height;
-                if (contentHeight > height) {
-                    const maxContentY = contentHeight - height;
-                    const maxPos = 1 - root.size;
-                    const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
-                    root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
-                }
-            }
-        }
-    }
+		anchors.fill: parent
+		preventStealing: true
 
-    Behavior on position {
-        enabled: !fullMouse.pressed
-
-        Anim {}
-    }
+		onPositionChanged: event => {
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
+		}
+		onPressed: event => {
+			root.animating = true;
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
+		}
+	}
 }

Components/CustomSlider.qml

@@ -3,50 +3,43 @@ import QtQuick.Templates
 import qs.Config
 
 Slider {
-    id: root
+	id: root
 
-    background: Item {
-        CustomRect {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
+	background: Item {
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.top: parent.top
+			bottomRightRadius: root.implicitHeight / 6
+			color: DynamicColors.palette.m3primary
+			implicitWidth: root.handle.x - root.implicitHeight / 2
+			radius: 1000
+			topRightRadius: root.implicitHeight / 6
+		}
 
-            implicitWidth: root.handle.x - root.implicitHeight / 2
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
+			bottomLeftRadius: root.implicitHeight / 6
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			radius: 1000
+			topLeftRadius: root.implicitHeight / 6
+		}
+	}
+	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: 1000
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-            color: DynamicColors.palette.m3primary
-            radius: 1000
-            topRightRadius: root.implicitHeight / 6
-            bottomRightRadius: root.implicitHeight / 6
-        }
-
-        CustomRect {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-
-            implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-
-            color: DynamicColors.tPalette.m3surfaceContainer
-            radius: 1000
-            topLeftRadius: root.implicitHeight / 6
-            bottomLeftRadius: root.implicitHeight / 6
-        }
-    }
-
-    handle: CustomRect {
-        x: root.visualPosition * root.availableWidth - implicitWidth / 2
-
-        implicitWidth: 5
-        implicitHeight: 15
-        anchors.verticalCenter: parent.verticalCenter
-
-        color: DynamicColors.palette.m3primary
-        radius: 1000
-
-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.NoButton
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+		}
+	}
 }

Components/CustomSwitch.qml

@@ -4,147 +4,152 @@ import QtQuick.Shapes
 import qs.Config
 
 Switch {
-    id: root
+	id: root
 
-    property int cLayer: 1
+	property int cLayer: 1
 
-    implicitWidth: implicitIndicatorWidth
-    implicitHeight: implicitIndicatorHeight
+	implicitHeight: implicitIndicatorHeight
+	implicitWidth: implicitIndicatorWidth
 
-    indicator: CustomRect {
-        radius: 1000
-        color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+	indicator: CustomRect {
+		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		implicitHeight: 13 + 7 * 2
+		implicitWidth: implicitHeight * 1.7
+		radius: 1000
 
-        implicitWidth: implicitHeight * 1.7
-        implicitHeight: 13 + 7 * 2
+		CustomRect {
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
 
-        CustomRect {
-            readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			implicitHeight: parent.implicitHeight - 10
+			implicitWidth: nonAnimWidth
+			radius: 1000
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
 
-            radius: 1000
-            color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			Behavior on implicitWidth {
+				Anim {
+				}
+			}
+			Behavior on x {
+				Anim {
+				}
+			}
 
-            x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
-            implicitWidth: nonAnimWidth
-            implicitHeight: parent.implicitHeight - 10
-            anchors.verticalCenter: parent.verticalCenter
+			CustomRect {
+				anchors.fill: parent
+				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
+				radius: parent.radius
 
-            CustomRect {
-                anchors.fill: parent
-                radius: parent.radius
+				Behavior on opacity {
+					Anim {
+					}
+				}
+			}
 
-                color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
-                opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
+			Shape {
+				id: icon
 
-                Behavior on opacity {
-                    Anim {}
-                }
-            }
+				property point end1: {
+					if (root.pressed) {
+						if (root.checked)
+							return Qt.point(width * 0.4, height / 2);
+						return Qt.point(width * 0.8, height / 2);
+					}
+					if (root.checked)
+						return Qt.point(width * 0.4, height * 0.7);
+					return Qt.point(width * 0.85, height * 0.85);
+				}
+				property point end2: {
+					if (root.pressed)
+						return Qt.point(width, height / 2);
+					if (root.checked)
+						return Qt.point(width * 0.85, height * 0.2);
+					return Qt.point(width * 0.85, height * 0.15);
+				}
+				property point start1: {
+					if (root.pressed)
+						return Qt.point(width * 0.1, height / 2);
+					if (root.checked)
+						return Qt.point(width * 0.15, height / 2);
+					return Qt.point(width * 0.15, height * 0.15);
+				}
+				property point start2: {
+					if (root.pressed) {
+						if (root.checked)
+							return Qt.point(width * 0.4, height / 2);
+						return Qt.point(width * 0.2, height / 2);
+					}
+					if (root.checked)
+						return Qt.point(width * 0.4, height * 0.7);
+					return Qt.point(width * 0.15, height * 0.85);
+				}
 
-            Shape {
-                id: icon
+				anchors.centerIn: parent
+				asynchronous: true
+				height: parent.implicitHeight - Appearance.padding.small * 2
+				preferredRendererType: Shape.CurveRenderer
+				width: height
 
-                property point start1: {
-                    if (root.pressed)
-                        return Qt.point(width * 0.1, height / 2);
-                    if (root.checked)
-                        return Qt.point(width * 0.15, height / 2);
-                    return Qt.point(width * 0.15, height * 0.15);
-                }
-                property point end1: {
-                    if (root.pressed) {
-                        if (root.checked)
-                            return Qt.point(width * 0.4, height / 2);
-                        return Qt.point(width * 0.8, height / 2);
-                    }
-                    if (root.checked)
-                        return Qt.point(width * 0.4, height * 0.7);
-                    return Qt.point(width * 0.85, height * 0.85);
-                }
-                property point start2: {
-                    if (root.pressed) {
-                        if (root.checked)
-                            return Qt.point(width * 0.4, height / 2);
-                        return Qt.point(width * 0.2, height / 2);
-                    }
-                    if (root.checked)
-                        return Qt.point(width * 0.4, height * 0.7);
-                    return Qt.point(width * 0.15, height * 0.85);
-                }
-                property point end2: {
-                    if (root.pressed)
-                        return Qt.point(width, height / 2);
-                    if (root.checked)
-                        return Qt.point(width * 0.85, height * 0.2);
-                    return Qt.point(width * 0.85, height * 0.15);
-                }
+				Behavior on end1 {
+					PropAnim {
+					}
+				}
+				Behavior on end2 {
+					PropAnim {
+					}
+				}
+				Behavior on start1 {
+					PropAnim {
+					}
+				}
+				Behavior on start2 {
+					PropAnim {
+					}
+				}
 
-                anchors.centerIn: parent
-                width: height
-                height: parent.implicitHeight - Appearance.padding.small * 2
-                preferredRendererType: Shape.CurveRenderer
-                asynchronous: true
+				ShapePath {
+					capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+					fillColor: "transparent"
+					startX: icon.start1.x
+					startY: icon.start1.y
+					strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeWidth: Appearance.font.size.larger * 0.15
 
-                ShapePath {
-                    strokeWidth: Appearance.font.size.larger * 0.15
-                    strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
-                    fillColor: "transparent"
-                    capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+					Behavior on strokeColor {
+						CAnim {
+						}
+					}
 
-                    startX: icon.start1.x
-                    startY: icon.start1.y
+					PathLine {
+						x: icon.end1.x
+						y: icon.end1.y
+					}
 
-                    PathLine {
-                        x: icon.end1.x
-                        y: icon.end1.y
-                    }
-                    PathMove {
-                        x: icon.start2.x
-                        y: icon.start2.y
-                    }
-                    PathLine {
-                        x: icon.end2.x
-                        y: icon.end2.y
-                    }
+					PathMove {
+						x: icon.start2.x
+						y: icon.start2.y
+					}
 
-                    Behavior on strokeColor {
-                        CAnim {}
-                    }
-                }
+					PathLine {
+						x: icon.end2.x
+						y: icon.end2.y
+					}
+				}
+			}
+		}
+	}
 
-                Behavior on start1 {
-                    PropAnim {}
-                }
-                Behavior on end1 {
-                    PropAnim {}
-                }
-                Behavior on start2 {
-                    PropAnim {}
-                }
-                Behavior on end2 {
-                    PropAnim {}
-                }
-            }
+	MouseArea {
+		anchors.fill: parent
+		cursorShape: Qt.PointingHandCursor
+		enabled: false
+	}
 
-            Behavior on x {
-                Anim {}
-            }
-
-            Behavior on implicitWidth {
-                Anim {}
-            }
-        }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
-        enabled: false
-    }
-
-    component PropAnim: PropertyAnimation {
+	component PropAnim: PropertyAnimation {
 		duration: MaterialEasing.expressiveEffectsTime
 		easing.bezierCurve: MaterialEasing.expressiveEffects
-        easing.type: Easing.BezierSpline
-    }
+		easing.type: Easing.BezierSpline
+	}
 }

Components/CustomText.qml

@@ -4,45 +4,48 @@ import QtQuick
 import qs.Config
 
 Text {
-    id: root
+	id: root
 
-    property bool animate: false
-    property string animateProp: "scale"
-    property real animateFrom: 0
-    property real animateTo: 1
-    property int animateDuration: 400
+	property bool animate: false
+	property int animateDuration: 400
+	property real animateFrom: 0
+	property string animateProp: "scale"
+	property real animateTo: 1
 
-    renderType: Text.NativeRendering
-    textFormat: Text.PlainText
-    color: DynamicColors.palette.m3onSurface
-    font.family: Appearance.font.family.sans
-    font.pointSize: 12
+	color: DynamicColors.palette.m3onSurface
+	font.family: Appearance.font.family.sans
+	font.pointSize: 12
+	renderType: Text.NativeRendering
+	textFormat: Text.PlainText
 
-    Behavior on color {
-        CAnim {}
-    }
+	Behavior on color {
+		CAnim {
+		}
+	}
+	Behavior on text {
+		enabled: root.animate
 
-    Behavior on text {
-        enabled: root.animate
+		SequentialAnimation {
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardAccel
+				to: root.animateFrom
+			}
 
-        SequentialAnimation {
-            Anim {
-                to: root.animateFrom
-                easing.bezierCurve: MaterialEasing.standardAccel
-            }
-            PropertyAction {}
-            Anim {
-                to: root.animateTo
-                easing.bezierCurve: MaterialEasing.standardDecel
-            }
-        }
-    }
+			PropertyAction {
+			}
 
-    component Anim: NumberAnimation {
-        target: root
-        property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
-        properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
-        duration: root.animateDuration / 2
-        easing.type: Easing.BezierSpline
-    }
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardDecel
+				to: root.animateTo
+			}
+		}
+	}
+
+	component Anim: NumberAnimation {
+		duration: root.animateDuration / 2
+		easing.type: Easing.BezierSpline
+		properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
+		property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
+		target: root
+	}
 }

Components/CustomTextField.qml

@@ -5,70 +5,71 @@ import QtQuick.Controls
 import qs.Config
 
 TextField {
-    id: root
+	id: root
 
-    color: DynamicColors.palette.m3onSurface
-    placeholderTextColor: DynamicColors.palette.m3outline
-    font.family: Appearance.font.family.sans
-    font.pointSize: Appearance.font.size.smaller
-    renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
-    cursorVisible: !readOnly
+	background: null
+	color: DynamicColors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font.family: Appearance.font.family.sans
+	font.pointSize: Appearance.font.size.smaller
+	placeholderTextColor: DynamicColors.palette.m3outline
+	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 
-    background: null
+	Behavior on color {
+		CAnim {
+		}
+	}
+	cursorDelegate: CustomRect {
+		id: cursor
 
-    cursorDelegate: CustomRect {
-        id: cursor
+		property bool disableBlink
 
-        property bool disableBlink
+		color: DynamicColors.palette.m3primary
+		implicitWidth: 2
+		radius: Appearance.rounding.normal
 
-        implicitWidth: 2
-        color: DynamicColors.palette.m3primary
-        radius: Appearance.rounding.normal
+		Behavior on opacity {
+			Anim {
+				duration: Appearance.anim.durations.small
+			}
+		}
 
-        Connections {
-            target: root
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
+				}
+			}
 
-            function onCursorPositionChanged(): void {
-                if (root.activeFocus && root.cursorVisible) {
-                    cursor.opacity = 1;
-                    cursor.disableBlink = true;
-                    enableBlink.restart();
-                }
-            }
-        }
+			target: root
+		}
 
-        Timer {
-            id: enableBlink
+		Timer {
+			id: enableBlink
 
-            interval: 100
-            onTriggered: cursor.disableBlink = false
-        }
+			interval: 100
 
-        Timer {
-            running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
-            repeat: true
-            triggeredOnStart: true
-            interval: 500
-            onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
-        }
+			onTriggered: cursor.disableBlink = false
+		}
 
-        Binding {
-            when: !root.activeFocus || !root.cursorVisible
-            cursor.opacity: 0
-        }
+		Timer {
+			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
 
-        Behavior on opacity {
-            Anim {
-                duration: Appearance.anim.durations.small
-            }
-        }
-    }
+			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+		}
 
-    Behavior on color {
-        CAnim {}
-    }
-
-    Behavior on placeholderTextColor {
-        CAnim {}
-    }
+		Binding {
+			cursor.opacity: 0
+			when: !root.activeFocus || !root.cursorVisible
+		}
+	}
+	Behavior on placeholderTextColor {
+		CAnim {
+		}
+	}
 }

Components/CustomTooltip.qml

@@ -3,21 +3,23 @@ import QtQuick.Controls
 import qs.Components
 
 ToolTip {
-    id: root
-    property bool extraVisibleCondition: true
-    property bool alternativeVisibleCondition: false
-    readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
-    verticalPadding: 5
-    horizontalPadding: 10
-    background: null
+	id: root
 
-    visible: internalVisibleCondition
-    
-    contentItem: CustomTooltipContent {
-        id: contentItem
-        text: root.text
-        shown: root.internalVisibleCondition
-        horizontalPadding: root.horizontalPadding
-        verticalPadding: root.verticalPadding
-    }
+	property bool alternativeVisibleCondition: false
+	property bool extraVisibleCondition: true
+	readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
+
+	background: null
+	horizontalPadding: 10
+	verticalPadding: 5
+	visible: internalVisibleCondition
+
+	contentItem: CustomTooltipContent {
+		id: contentItem
+
+		horizontalPadding: root.horizontalPadding
+		shown: root.internalVisibleCondition
+		text: root.text
+		verticalPadding: root.verticalPadding
+	}
 }

Components/CustomTooltipContent.qml

@@ -3,45 +3,52 @@ import qs.Components
 import qs.Config
 
 Item {
-    id: root
-    required property string text
-    property bool shown: false
-    property real horizontalPadding: 10
-    property real verticalPadding: 5
-    implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
-    implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
+	id: root
 
-    property bool isVisible: backgroundRectangle.implicitHeight > 0
+	property real horizontalPadding: 10
+	property bool isVisible: backgroundRectangle.implicitHeight > 0
+	property bool shown: false
+	required property string text
+	property real verticalPadding: 5
 
-    Rectangle {
-        id: backgroundRectangle
-        anchors {
-            bottom: root.bottom
-            horizontalCenter: root.horizontalCenter
-        }
-        color: DynamicColors.tPalette.m3inverseSurface ?? "#3C4043"
-        radius: 8
-        opacity: shown ? 1 : 0
-        implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
-        implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
-        clip: true
+	implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
+	implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
 
-        Behavior on implicitWidth {
-            Anim {}
-        }
-        Behavior on implicitHeight {
-            Anim {}
-        }
-        Behavior on opacity {
-            Anim {}
-        }
+	Rectangle {
+		id: backgroundRectangle
 
-        CustomText {
-            id: tooltipTextObject
-            anchors.centerIn: parent
-            text: root.text
-            color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
-            wrapMode: Text.Wrap
-        }
-    }   
+		clip: true
+		color: DynamicColors.tPalette.m3inverseSurface ?? "#3C4043"
+		implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
+		implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
+		opacity: shown ? 1 : 0
+		radius: 8
+
+		Behavior on implicitHeight {
+			Anim {
+			}
+		}
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		anchors {
+			bottom: root.bottom
+			horizontalCenter: root.horizontalCenter
+		}
+
+		CustomText {
+			id: tooltipTextObject
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
+			text: root.text
+			wrapMode: Text.Wrap
+		}
+	}
 }

Components/Elevation.qml

@@ -3,15 +3,16 @@ import QtQuick
 import QtQuick.Effects
 
 RectangularShadow {
-    property int level
-    property real dp: [0, 1, 3, 6, 8, 12][level]
+	property real dp: [0, 1, 3, 6, 8, 12][level]
+	property int level
 
-    color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
-    blur: (dp * 5) ** 0.7
-    spread: -dp * 0.3 + (dp * 0.1) ** 2
-    offset.y: dp / 2
+	blur: (dp * 5) ** 0.7
+	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
+	offset.y: dp / 2
+	spread: -dp * 0.3 + (dp * 0.1) ** 2
 
-    Behavior on dp {
-        Anim {}
-    }
+	Behavior on dp {
+		Anim {
+		}
+	}
 }

Components/ExtraIndicator.qml

@@ -2,47 +2,43 @@ import qs.Config
 import QtQuick
 
 CustomRect {
-    required property int extra
+	required property int extra
 
-    anchors.right: parent.right
-    anchors.margins: 8
+	anchors.margins: 8
+	anchors.right: parent.right
+	color: DynamicColors.palette.m3tertiary
+	implicitHeight: count.implicitHeight + 4 * 2
+	implicitWidth: count.implicitWidth + 8 * 2
+	opacity: extra > 0 ? 1 : 0
+	radius: 8
+	scale: extra > 0 ? 1 : 0.5
 
-    color: DynamicColors.palette.m3tertiary
-    radius: 8
-
-    implicitWidth: count.implicitWidth + 8 * 2
-    implicitHeight: count.implicitHeight + 4 * 2
-
-    opacity: extra > 0 ? 1 : 0
-    scale: extra > 0 ? 1 : 0.5
-
-    Elevation {
-        anchors.fill: parent
-        radius: parent.radius
-        opacity: parent.opacity
-        z: -1
-        level: 2
-    }
-
-    CustomText {
-        id: count
-
-        anchors.centerIn: parent
-        animate: parent.opacity > 0
-        text: qsTr("+%1").arg(parent.extra)
-        color: DynamicColors.palette.m3onTertiary
-    }
-
-    Behavior on opacity {
-        Anim {
+	Behavior on opacity {
+		Anim {
 			duration: MaterialEasing.expressiveEffectsTime
-        }
-    }
-
-    Behavior on scale {
-        Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
 			duration: MaterialEasing.expressiveEffectsTime
 			easing.bezierCurve: MaterialEasing.expressiveEffects
-        }
-    }
+		}
+	}
+
+	Elevation {
+		anchors.fill: parent
+		level: 2
+		opacity: parent.opacity
+		radius: parent.radius
+		z: -1
+	}
+
+	CustomText {
+		id: count
+
+		anchors.centerIn: parent
+		animate: parent.opacity > 0
+		color: DynamicColors.palette.m3onTertiary
+		text: qsTr("+%1").arg(parent.extra)
+	}
 }

Components/FilledSlider.qml

@@ -3,142 +3,139 @@ import QtQuick.Templates
 import qs.Config
 
 Slider {
-    id: root
+	id: root
 
-    required property string icon
-    property real oldValue
-    property bool initialized
 	property color color: DynamicColors.palette.m3secondary
+	required property string icon
+	property bool initialized
+	property real oldValue
 
-    orientation: Qt.Vertical
+	orientation: Qt.Vertical
 
-    background: CustomRect {
-        color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-        radius: Appearance.rounding.full
+	background: CustomRect {
+		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		radius: Appearance.rounding.full
 
-        CustomRect {
-            anchors.left: parent.left
-            anchors.right: parent.right
+		CustomRect {
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: root.color
+			implicitHeight: parent.height - y
+			radius: parent.radius
+			y: root.handle.y
+		}
+	}
+	handle: Item {
+		id: handle
 
-            y: root.handle.y
-            implicitHeight: parent.height - y
+		property alias moving: icon.moving
 
-            color: root.color
-            radius: parent.radius
-        }
-    }
+		implicitHeight: root.width
+		implicitWidth: root.width
+		y: root.visualPosition * (root.availableHeight - height)
 
-    handle: Item {
-        id: handle
+		Elevation {
+			anchors.fill: parent
+			level: handleInteraction.containsMouse ? 2 : 1
+			radius: rect.radius
+		}
 
-        property alias moving: icon.moving
+		CustomRect {
+			id: rect
 
-        y: root.visualPosition * (root.availableHeight - height)
-        implicitWidth: root.width
-        implicitHeight: root.width
+			anchors.fill: parent
+			color: DynamicColors.palette.m3inverseSurface
+			radius: Appearance.rounding.full
 
-        Elevation {
-            anchors.fill: parent
-            radius: rect.radius
-            level: handleInteraction.containsMouse ? 2 : 1
-        }
+			MouseArea {
+				id: handleInteraction
 
-        CustomRect {
-            id: rect
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: Qt.PointingHandCursor
+				hoverEnabled: true
+			}
 
-            anchors.fill: parent
+			MaterialIcon {
+				id: icon
 
-            color: DynamicColors.palette.m3inverseSurface
-            radius: Appearance.rounding.full
+				property bool moving
 
-            MouseArea {
-                id: handleInteraction
+				function update(): void {
+					animate = !moving;
+					binding.when = moving;
+					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
+					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
+				}
 
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.NoButton
-            }
+				anchors.centerIn: parent
+				color: DynamicColors.palette.m3inverseOnSurface
+				text: root.icon
 
-            MaterialIcon {
-                id: icon
+				onMovingChanged: anim.restart()
 
-                property bool moving
+				Binding {
+					id: binding
 
-                function update(): void {
-                    animate = !moving;
-                    binding.when = moving;
-                    font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
-                    font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
-                }
+					property: "text"
+					target: icon
+					value: Math.round(root.value * 100)
+					when: false
+				}
 
-                text: root.icon
-                color: DynamicColors.palette.m3inverseOnSurface
-                anchors.centerIn: parent
+				SequentialAnimation {
+					id: anim
 
-                onMovingChanged: anim.restart()
+					Anim {
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						property: "scale"
+						target: icon
+						to: 0
+					}
 
-                Binding {
-                    id: binding
+					ScriptAction {
+						script: icon.update()
+					}
 
-                    target: icon
-                    property: "text"
-                    value: Math.round(root.value * 100)
-                    when: false
-                }
+					Anim {
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardDecel
+						property: "scale"
+						target: icon
+						to: 1
+					}
+				}
+			}
+		}
+	}
+	Behavior on value {
+		Anim {
+			duration: Appearance.anim.durations.large
+		}
+	}
 
-                SequentialAnimation {
-                    id: anim
+	onPressedChanged: handle.moving = pressed
+	onValueChanged: {
+		if (!initialized) {
+			initialized = true;
+			return;
+		}
+		if (Math.abs(value - oldValue) < 0.01)
+			return;
+		oldValue = value;
+		handle.moving = true;
+		stateChangeDelay.restart();
+	}
 
-                    Anim {
-                        target: icon
-                        property: "scale"
-                        to: 0
-                        duration: Appearance.anim.durations.normal / 2
-                        easing.bezierCurve: Appearance.anim.curves.standardAccel
-                    }
-                    ScriptAction {
-                        script: icon.update()
-                    }
-                    Anim {
-                        target: icon
-                        property: "scale"
-                        to: 1
-                        duration: Appearance.anim.durations.normal / 2
-                        easing.bezierCurve: Appearance.anim.curves.standardDecel
-                    }
-                }
-            }
-        }
-    }
+	Timer {
+		id: stateChangeDelay
 
-    onPressedChanged: handle.moving = pressed
+		interval: 500
 
-    onValueChanged: {
-        if (!initialized) {
-            initialized = true;
-            return;
-        }
-        if (Math.abs(value - oldValue) < 0.01)
-            return;
-        oldValue = value;
-        handle.moving = true;
-        stateChangeDelay.restart();
-    }
-
-    Timer {
-        id: stateChangeDelay
-
-        interval: 500
-        onTriggered: {
-            if (!root.pressed)
-                handle.moving = false;
-        }
-    }
-
-    Behavior on value {
-        Anim {
-            duration: Appearance.anim.durations.large
-        }
-    }
+		onTriggered: {
+			if (!root.pressed)
+				handle.moving = false;
+		}
+	}
 }

Components/IconButton.qml

@@ -2,80 +2,79 @@ import qs.Config
 import QtQuick
 
 CustomRect {
-    id: root
+	id: root
 
-    enum Type {
-        Filled,
-        Tonal,
-        Text
-    }
+	enum Type {
+		Filled,
+		Tonal,
+		Text
+	}
 
-    property alias icon: label.text
-    property bool checked
-    property bool toggle
-    property real padding: type === IconButton.Text ? 10 / 2 : 7
-    property alias font: label.font
-    property int type: IconButton.Filled
-    property bool disabled
+	property color activeColour: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	property color activeOnColour: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	property bool checked
+	property bool disabled
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledOnColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property alias font: label.font
+	property alias icon: label.text
+	property color inactiveColour: {
+		if (!toggle && type === IconButton.Filled)
+			return DynamicColors.palette.m3primary;
+		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+	}
+	property color inactiveOnColour: {
+		if (!toggle && type === IconButton.Filled)
+			return DynamicColors.palette.m3onPrimary;
+		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
+	}
+	property bool internalChecked
+	property alias label: label
+	property real padding: type === IconButton.Text ? 10 / 2 : 7
+	property alias radiusAnim: radiusAnim
+	property alias stateLayer: stateLayer
+	property bool toggle
+	property int type: IconButton.Filled
 
-    property alias stateLayer: stateLayer
-    property alias label: label
-    property alias radiusAnim: radiusAnim
+	signal clicked
 
-    property bool internalChecked
-    property color activeColour: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-    property color inactiveColour: {
-        if (!toggle && type === IconButton.Filled)
-            return DynamicColors.palette.m3primary;
-        return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
-    }
-    property color activeOnColour: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
-    property color inactiveOnColour: {
-        if (!toggle && type === IconButton.Filled)
-            return DynamicColors.palette.m3onPrimary;
-        return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
-    }
-    property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-    property color disabledOnColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
+	implicitHeight: label.implicitHeight + padding * 2
+	implicitWidth: implicitHeight
+	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
 
-    signal clicked
+	Behavior on radius {
+		Anim {
+			id: radiusAnim
 
-    onCheckedChanged: internalChecked = checked
+		}
+	}
 
-    radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
-    color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
+	onCheckedChanged: internalChecked = checked
 
-    implicitWidth: implicitHeight
-    implicitHeight: label.implicitHeight + padding * 2
+	StateLayer {
+		id: stateLayer
 
-    StateLayer {
-        id: stateLayer
+		function onClicked(): void {
+			if (root.toggle)
+				root.internalChecked = !root.internalChecked;
+			root.clicked();
+		}
 
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-        disabled: root.disabled
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+	}
 
-        function onClicked(): void {
-            if (root.toggle)
-                root.internalChecked = !root.internalChecked;
-            root.clicked();
-        }
-    }
+	MaterialIcon {
+		id: label
 
-    MaterialIcon {
-        id: label
+		anchors.centerIn: parent
+		color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		fill: !root.toggle || root.internalChecked ? 1 : 0
 
-        anchors.centerIn: parent
-        color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-        fill: !root.toggle || root.internalChecked ? 1 : 0
-
-        Behavior on fill {
-            Anim {}
-        }
-    }
-
-    Behavior on radius {
-        Anim {
-            id: radiusAnim
-        }
-    }
+		Behavior on fill {
+			Anim {
+			}
+		}
+	}
 }

Components/MaterialIcon.qml

@@ -1,15 +1,15 @@
 import qs.Config
 
 CustomText {
-    property real fill
-    property int grade: DynamicColors.light ? 0 : -25
+	property real fill
+	property int grade: DynamicColors.light ? 0 : -25
 
-    font.family: "Material Symbols Rounded"
-    font.pointSize: 15
-    font.variableAxes: ({
-            FILL: fill.toFixed(1),
-            GRAD: grade,
-            opsz: fontInfo.pixelSize,
-            wght: fontInfo.weight
-        })
+	font.family: "Material Symbols Rounded"
+	font.pointSize: 15
+	font.variableAxes: ({
+			FILL: fill.toFixed(1),
+			GRAD: grade,
+			opsz: fontInfo.pixelSize,
+			wght: fontInfo.weight
+		})
 }

Components/OpacityMask.qml

@@ -2,8 +2,8 @@ import Quickshell
 import QtQuick
 
 ShaderEffect {
-    required property Item source
-    required property Item maskSource
+	required property Item maskSource
+	required property Item source
 
-    fragmentShader: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/shaders/opacitymask.frag.qsb`)
+	fragmentShader: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/shaders/opacitymask.frag.qsb`)
 }

Components/Ref.qml

@@ -1,8 +1,8 @@
 import QtQuick
 
 QtObject {
-    required property var service
+	required property var service
 
-    Component.onCompleted: service.refCount++
-    Component.onDestruction: service.refCount--
+	Component.onCompleted: service.refCount++
+	Component.onDestruction: service.refCount--
 }

Components/StateLayer.qml

@@ -2,94 +2,95 @@ import qs.Config
 import QtQuick
 
 MouseArea {
-    id: root
+	id: root
 
-    property bool disabled
-    property color color: DynamicColors.palette.m3onSurface
-    property real radius: parent?.radius ?? 0
-    property alias rect: hoverLayer
+	property color color: DynamicColors.palette.m3onSurface
+	property bool disabled
+	property real radius: parent?.radius ?? 0
+	property alias rect: hoverLayer
 
-    function onClicked(): void {
-    }
+	function onClicked(): void {
+	}
 
-    anchors.fill: parent
+	anchors.fill: parent
+	cursorShape: disabled ? undefined : Qt.PointingHandCursor
+	enabled: !disabled
+	hoverEnabled: true
 
-    enabled: !disabled
-    cursorShape: disabled ? undefined : Qt.PointingHandCursor
-    hoverEnabled: true
+	onClicked: event => !disabled && onClicked(event)
+	onPressed: event => {
+		if (disabled)
+			return;
 
-    onPressed: event => {
-        if (disabled)
-            return;
+		rippleAnim.x = event.x;
+		rippleAnim.y = event.y;
 
-        rippleAnim.x = event.x;
-        rippleAnim.y = event.y;
+		const dist = (ox, oy) => ox * ox + oy * oy;
+		rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
 
-        const dist = (ox, oy) => ox * ox + oy * oy;
-        rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
+		rippleAnim.restart();
+	}
 
-        rippleAnim.restart();
-    }
+	SequentialAnimation {
+		id: rippleAnim
 
-    onClicked: event => !disabled && onClicked(event)
+		property real radius
+		property real x
+		property real y
 
-    SequentialAnimation {
-        id: rippleAnim
+		PropertyAction {
+			property: "x"
+			target: ripple
+			value: rippleAnim.x
+		}
 
-        property real x
-        property real y
-        property real radius
+		PropertyAction {
+			property: "y"
+			target: ripple
+			value: rippleAnim.y
+		}
 
-        PropertyAction {
-            target: ripple
-            property: "x"
-            value: rippleAnim.x
-        }
-        PropertyAction {
-            target: ripple
-            property: "y"
-            value: rippleAnim.y
-        }
-        PropertyAction {
-            target: ripple
-            property: "opacity"
-            value: 0.08
-        }
-        Anim {
-            target: ripple
-            properties: "implicitWidth,implicitHeight"
-            from: 0
-            to: rippleAnim.radius * 2
-            easing.bezierCurve: MaterialEasing.standardDecel
-        }
-        Anim {
-            target: ripple
-            property: "opacity"
-            to: 0
-        }
-    }
+		PropertyAction {
+			property: "opacity"
+			target: ripple
+			value: 0.08
+		}
 
-    CustomClippingRect {
-        id: hoverLayer
+		Anim {
+			easing.bezierCurve: MaterialEasing.standardDecel
+			from: 0
+			properties: "implicitWidth,implicitHeight"
+			target: ripple
+			to: rippleAnim.radius * 2
+		}
 
-        anchors.fill: parent
+		Anim {
+			property: "opacity"
+			target: ripple
+			to: 0
+		}
+	}
+
+	CustomClippingRect {
+		id: hoverLayer
+
+		anchors.fill: parent
 		border.pixelAligned: false
+		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		radius: root.radius
 
-        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
-        radius: root.radius
+		CustomRect {
+			id: ripple
 
-        CustomRect {
-            id: ripple
-
-            radius: 1000
-            color: root.color
-            opacity: 0
 			border.pixelAligned: false
+			color: root.color
+			opacity: 0
+			radius: 1000
 
-            transform: Translate {
-                x: -ripple.width / 2
-                y: -ripple.height / 2
-            }
-        }
-    }
+			transform: Translate {
+				x: -ripple.width / 2
+				y: -ripple.height / 2
+			}
+		}
+	}
 }

Components/Toast/ToastItem.qml

@@ -5,129 +5,127 @@ import qs.Components
 import qs.Config
 
 CustomRect {
-    id: root
+	id: root
 
-    required property Toast modelData
+	required property Toast modelData
 
-    anchors.left: parent.left
-    anchors.right: parent.right
-    implicitHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	border.color: {
+		let colour = DynamicColors.palette.m3outlineVariant;
+		if (root.modelData.type === Toast.Success)
+			colour = DynamicColors.palette.m3success;
+		if (root.modelData.type === Toast.Warning)
+			colour = DynamicColors.palette.m3secondaryContainer;
+		if (root.modelData.type === Toast.Error)
+			colour = DynamicColors.palette.m3error;
+		return Qt.alpha(colour, 0.3);
+	}
+	border.width: 1
+	color: {
+		if (root.modelData.type === Toast.Success)
+			return DynamicColors.palette.m3successContainer;
+		if (root.modelData.type === Toast.Warning)
+			return DynamicColors.palette.m3secondary;
+		if (root.modelData.type === Toast.Error)
+			return DynamicColors.palette.m3errorContainer;
+		return DynamicColors.palette.m3surface;
+	}
+	implicitHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+	radius: Appearance.rounding.normal
 
-    radius: Appearance.rounding.normal
-    color: {
-        if (root.modelData.type === Toast.Success)
-            return DynamicColors.palette.m3successContainer;
-        if (root.modelData.type === Toast.Warning)
-            return DynamicColors.palette.m3secondary;
-        if (root.modelData.type === Toast.Error)
-            return DynamicColors.palette.m3errorContainer;
-        return DynamicColors.palette.m3surface;
-    }
+	Behavior on border.color {
+		CAnim {
+		}
+	}
 
-    border.width: 1
-    border.color: {
-        let colour = DynamicColors.palette.m3outlineVariant;
-        if (root.modelData.type === Toast.Success)
-            colour = DynamicColors.palette.m3success;
-        if (root.modelData.type === Toast.Warning)
-            colour = DynamicColors.palette.m3secondaryContainer;
-        if (root.modelData.type === Toast.Error)
-            colour = DynamicColors.palette.m3error;
-        return Qt.alpha(colour, 0.3);
-    }
+	Elevation {
+		anchors.fill: parent
+		level: 3
+		opacity: parent.opacity
+		radius: parent.radius
+		z: -1
+	}
 
-    Elevation {
-        anchors.fill: parent
-        radius: parent.radius
-        opacity: parent.opacity
-        z: -1
-        level: 3
-    }
+	RowLayout {
+		id: layout
 
-    RowLayout {
-        id: layout
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.normal
+		anchors.margins: Appearance.padding.smaller
+		anchors.rightMargin: Appearance.padding.normal
+		spacing: Appearance.spacing.normal
 
-        anchors.fill: parent
-        anchors.margins: Appearance.padding.smaller
-        anchors.leftMargin: Appearance.padding.normal
-        anchors.rightMargin: Appearance.padding.normal
-        spacing: Appearance.spacing.normal
+		CustomRect {
+			color: {
+				if (root.modelData.type === Toast.Success)
+					return DynamicColors.palette.m3success;
+				if (root.modelData.type === Toast.Warning)
+					return DynamicColors.palette.m3secondaryContainer;
+				if (root.modelData.type === Toast.Error)
+					return DynamicColors.palette.m3error;
+				return DynamicColors.palette.m3surfaceContainerHigh;
+			}
+			implicitHeight: icon.implicitHeight + Appearance.padding.smaller * 2
+			implicitWidth: implicitHeight
+			radius: Appearance.rounding.normal
 
-        CustomRect {
-            radius: Appearance.rounding.normal
-            color: {
-                if (root.modelData.type === Toast.Success)
-                    return DynamicColors.palette.m3success;
-                if (root.modelData.type === Toast.Warning)
-                    return DynamicColors.palette.m3secondaryContainer;
-                if (root.modelData.type === Toast.Error)
-                    return DynamicColors.palette.m3error;
-                return DynamicColors.palette.m3surfaceContainerHigh;
-            }
+			MaterialIcon {
+				id: icon
 
-            implicitWidth: implicitHeight
-            implicitHeight: icon.implicitHeight + Appearance.padding.smaller * 2
+				anchors.centerIn: parent
+				color: {
+					if (root.modelData.type === Toast.Success)
+						return DynamicColors.palette.m3onSuccess;
+					if (root.modelData.type === Toast.Warning)
+						return DynamicColors.palette.m3onSecondaryContainer;
+					if (root.modelData.type === Toast.Error)
+						return DynamicColors.palette.m3onError;
+					return DynamicColors.palette.m3onSurfaceVariant;
+				}
+				font.pointSize: Math.round(Appearance.font.size.large * 1.2)
+				text: root.modelData.icon
+			}
+		}
 
-            MaterialIcon {
-                id: icon
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
 
-                anchors.centerIn: parent
-                text: root.modelData.icon
-                color: {
-                    if (root.modelData.type === Toast.Success)
-                        return DynamicColors.palette.m3onSuccess;
-                    if (root.modelData.type === Toast.Warning)
-                        return DynamicColors.palette.m3onSecondaryContainer;
-                    if (root.modelData.type === Toast.Error)
-                        return DynamicColors.palette.m3onError;
-                    return DynamicColors.palette.m3onSurfaceVariant;
-                }
-                font.pointSize: Math.round(Appearance.font.size.large * 1.2)
-            }
-        }
+			CustomText {
+				id: title
 
-        ColumnLayout {
-            Layout.fillWidth: true
-            spacing: 0
+				Layout.fillWidth: true
+				color: {
+					if (root.modelData.type === Toast.Success)
+						return DynamicColors.palette.m3onSuccessContainer;
+					if (root.modelData.type === Toast.Warning)
+						return DynamicColors.palette.m3onSecondary;
+					if (root.modelData.type === Toast.Error)
+						return DynamicColors.palette.m3onErrorContainer;
+					return DynamicColors.palette.m3onSurface;
+				}
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.normal
+				text: root.modelData.title
+			}
 
-            CustomText {
-                id: title
-
-                Layout.fillWidth: true
-                text: root.modelData.title
-                color: {
-                    if (root.modelData.type === Toast.Success)
-                        return DynamicColors.palette.m3onSuccessContainer;
-                    if (root.modelData.type === Toast.Warning)
-                        return DynamicColors.palette.m3onSecondary;
-                    if (root.modelData.type === Toast.Error)
-                        return DynamicColors.palette.m3onErrorContainer;
-                    return DynamicColors.palette.m3onSurface;
-                }
-                font.pointSize: Appearance.font.size.normal
-                elide: Text.ElideRight
-            }
-
-            CustomText {
-                Layout.fillWidth: true
-                textFormat: Text.StyledText
-                text: root.modelData.message
-                color: {
-                    if (root.modelData.type === Toast.Success)
-                        return DynamicColors.palette.m3onSuccessContainer;
-                    if (root.modelData.type === Toast.Warning)
-                        return DynamicColors.palette.m3onSecondary;
-                    if (root.modelData.type === Toast.Error)
-                        return DynamicColors.palette.m3onErrorContainer;
-                    return DynamicColors.palette.m3onSurface;
-                }
-                opacity: 0.8
-                elide: Text.ElideRight
-            }
-        }
-    }
-
-    Behavior on border.color {
-        CAnim {}
-    }
+			CustomText {
+				Layout.fillWidth: true
+				color: {
+					if (root.modelData.type === Toast.Success)
+						return DynamicColors.palette.m3onSuccessContainer;
+					if (root.modelData.type === Toast.Warning)
+						return DynamicColors.palette.m3onSecondary;
+					if (root.modelData.type === Toast.Error)
+						return DynamicColors.palette.m3onErrorContainer;
+					return DynamicColors.palette.m3onSurface;
+				}
+				elide: Text.ElideRight
+				opacity: 0.8
+				text: root.modelData.message
+				textFormat: Text.StyledText
+			}
+		}
+	}
 }

Components/Toast/Toasts.qml

@@ -7,137 +7,136 @@ import qs.Components
 import qs.Config
 
 Item {
-    id: root
+	id: root
 
-    readonly property int spacing: Appearance.spacing.small
-    property bool flag
+	property bool flag
+	readonly property int spacing: Appearance.spacing.small
 
-    implicitWidth: Config.utilities.sizes.toastWidth - Appearance.padding.normal * 2
-    implicitHeight: {
-        let h = -spacing;
-        for (let i = 0; i < repeater.count; i++) {
-            const item = repeater.itemAt(i) as ToastWrapper;
-            if (!item.modelData.closed && !item.previewHidden)
-                h += item.implicitHeight + spacing;
-        }
-        return h;
-    }
+	implicitHeight: {
+		let h = -spacing;
+		for (let i = 0; i < repeater.count; i++) {
+			const item = repeater.itemAt(i) as ToastWrapper;
+			if (!item.modelData.closed && !item.previewHidden)
+				h += item.implicitHeight + spacing;
+		}
+		return h;
+	}
+	implicitWidth: Config.utilities.sizes.toastWidth - Appearance.padding.normal * 2
 
-    Repeater {
-        id: repeater
+	Repeater {
+		id: repeater
 
-        model: ScriptModel {
-            values: {
-                const toasts = [];
-                let count = 0;
-                for (const toast of Toaster.toasts) {
-                    toasts.push(toast);
-                    if (!toast.closed) {
-                        count++;
-                        if (count > Config.utilities.maxToasts)
-                            break;
-                    }
-                }
-                return toasts;
-            }
-            onValuesChanged: root.flagChanged()
-        }
+		model: ScriptModel {
+			values: {
+				const toasts = [];
+				let count = 0;
+				for (const toast of Toaster.toasts) {
+					toasts.push(toast);
+					if (!toast.closed) {
+						count++;
+						if (count > Config.utilities.maxToasts)
+							break;
+					}
+				}
+				return toasts;
+			}
 
-        ToastWrapper {}
-    }
+			onValuesChanged: root.flagChanged()
+		}
 
-    component ToastWrapper: MouseArea {
-        id: toast
+		ToastWrapper {
+		}
+	}
 
-        required property int index
-        required property Toast modelData
+	component ToastWrapper: MouseArea {
+		id: toast
 
-        readonly property bool previewHidden: {
-            let extraHidden = 0;
-            for (let i = 0; i < index; i++)
-                if (Toaster.toasts[i].closed)
-                    extraHidden++;
-            return index >= Config.utilities.maxToasts + extraHidden;
-        }
+		required property int index
+		required property Toast modelData
+		readonly property bool previewHidden: {
+			let extraHidden = 0;
+			for (let i = 0; i < index; i++)
+				if (Toaster.toasts[i].closed)
+					extraHidden++;
+			return index >= Config.utilities.maxToasts + extraHidden;
+		}
 
-        onPreviewHiddenChanged: {
-            if (initAnim.running && previewHidden)
-                initAnim.stop();
-        }
+		acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+		anchors.bottom: parent.bottom
+		anchors.bottomMargin: {
+			root.flag; // Force update
+			let y = 0;
+			for (let i = 0; i < index; i++) {
+				const item = repeater.itemAt(i) as ToastWrapper;
+				if (item && !item.modelData.closed && !item.previewHidden)
+					y += item.implicitHeight + root.spacing;
+			}
+			return y;
+		}
+		anchors.left: parent.left
+		anchors.right: parent.right
+		implicitHeight: toastInner.implicitHeight
+		opacity: modelData.closed || previewHidden ? 0 : 1
+		scale: modelData.closed || previewHidden ? 0.7 : 1
 
-        opacity: modelData.closed || previewHidden ? 0 : 1
-        scale: modelData.closed || previewHidden ? 0.7 : 1
+		Behavior on anchors.bottomMargin {
+			Anim {
+				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			}
+		}
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
+			}
+		}
 
-        anchors.bottomMargin: {
-            root.flag; // Force update
-            let y = 0;
-            for (let i = 0; i < index; i++) {
-                const item = repeater.itemAt(i) as ToastWrapper;
-                if (item && !item.modelData.closed && !item.previewHidden)
-                    y += item.implicitHeight + root.spacing;
-            }
-            return y;
-        }
+		Component.onCompleted: modelData.lock(this)
+		onClicked: modelData.close()
+		onPreviewHiddenChanged: {
+			if (initAnim.running && previewHidden)
+				initAnim.stop();
+		}
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        implicitHeight: toastInner.implicitHeight
+		Anim {
+			id: initAnim
 
-        acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
-        onClicked: modelData.close()
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			from: 0
+			properties: "opacity,scale"
+			target: toast
+			to: 1
 
-        Component.onCompleted: modelData.lock(this)
+			Component.onCompleted: running = !toast.previewHidden
+		}
 
-        Anim {
-            id: initAnim
+		ParallelAnimation {
+			running: toast.modelData.closed
 
-            Component.onCompleted: running = !toast.previewHidden
+			onFinished: toast.modelData.unlock(toast)
+			onStarted: toast.anchors.bottomMargin = toast.anchors.bottomMargin
 
-            target: toast
-            properties: "opacity,scale"
-            from: 0
-            to: 1
-            duration: Appearance.anim.durations.expressiveDefaultSpatial
-            easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-        }
+			Anim {
+				property: "opacity"
+				target: toast
+				to: 0
+			}
 
-        ParallelAnimation {
-            running: toast.modelData.closed
-            onStarted: toast.anchors.bottomMargin = toast.anchors.bottomMargin
-            onFinished: toast.modelData.unlock(toast)
+			Anim {
+				property: "scale"
+				target: toast
+				to: 0.7
+			}
+		}
 
-            Anim {
-                target: toast
-                property: "opacity"
-                to: 0
-            }
-            Anim {
-                target: toast
-                property: "scale"
-                to: 0.7
-            }
-        }
+		ToastItem {
+			id: toastInner
 
-        ToastItem {
-            id: toastInner
-
-            modelData: toast.modelData
-        }
-
-        Behavior on opacity {
-            Anim {}
-        }
-
-        Behavior on scale {
-            Anim {}
-        }
-
-        Behavior on anchors.bottomMargin {
-            Anim {
-                duration: Appearance.anim.durations.expressiveDefaultSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-            }
-        }
-    }
+			modelData: toast.modelData
+		}
+	}
 }