Merge pull request 'Updating README.md for NixOS flake installation' (#28) from nixos-readme-gitea into main

Reviewed-on: #28

.gitignore

@@ -1,3 +1,4 @@
+./result/
 .pyre/
 .cache/
 .venv/

.qmlformat.ini

@@ -0,0 +1,10 @@
+[General]
+FunctionsSpacing=true
+IndentWidth=4
+MaxColumnWidth=-1
+NewlineType=native
+NormalizeOrder=true
+ObjectsSpacing=true
+SemicolonRule=always
+SortImports=false
+UseTabs=true

Bar.qml

@@ -1,197 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Wayland
-import Quickshell.Hyprland
-import qs.Daemons
-import qs.Components
-import qs.Modules
-import qs.Modules.Bar
-import qs.Config
-import qs.Helpers
-import qs.Drawers
-
-Variants {
-	model: Quickshell.screens
-	Scope {
-		id: scope
-		required property var modelData
-        PanelWindow {
-            id: bar
-            property bool trayMenuVisible: false
-            screen: scope.modelData
-            color: "transparent"
-            property var root: Quickshell.shellDir
-
-			WlrLayershell.namespace: "ZShell-Bar"
-            WlrLayershell.exclusionMode: ExclusionMode.Ignore
-			WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.sidebar || visibilities.dashboard ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
-			
-			contentItem.focus: true
-
-            contentItem.Keys.onEscapePressed: {
-				if ( Config.barConfig.autoHide )
-					visibilities.bar = false;
-				visibilities.sidebar = false;
-				visibilities.dashboard = false;
-				visibilities.osd = false;
-			}
-
-            PanelWindow {
-                id: exclusionZone
-				WlrLayershell.namespace: "ZShell-Bar-Exclusion"
-                screen: bar.screen
-                WlrLayershell.layer: WlrLayer.Bottom
-				WlrLayershell.exclusionMode: Config.barConfig.autoHide ? ExclusionMode.Ignore : ExclusionMode.Auto
-                anchors {
-                    left: true
-                    right: true
-                    top: true
-                }
-                color: "transparent"
-                implicitHeight: 34
-            }
-
-            anchors {
-                top: true
-                left: true
-                right: true
-                bottom: true
-            }
-
-            mask: Region {
-				id: region
-                x: 0
-                y: Config.barConfig.autoHide && !visibilities.bar ? 4 : 34
-
-				property list<Region> nullRegions: []
-
-                width: bar.width
-                height: bar.screen.height - backgroundRect.implicitHeight
-                intersection: Intersection.Xor
-
-                regions: popoutRegions.instances
-            }
-
-            Variants {
-                id: popoutRegions
-                model: panels.children
-
-                Region {
-                    required property Item modelData
-
-                    x: modelData.x
-                    y: modelData.y + backgroundRect.implicitHeight
-                    width: modelData.width
-                    height: modelData.height
-                    intersection: Intersection.Subtract
-                }
-            }
-
-			HyprlandFocusGrab {
-				id: focusGrab
-
-				active: visibilities.launcher || visibilities.sidebar || visibilities.dashboard || ( panels.popouts.hasCurrent && panels.popouts.currentName.startsWith( "traymenu" ))
-				windows: [bar]
-				onCleared: {
-					visibilities.launcher = false;
-					visibilities.sidebar = false;
-					visibilities.dashboard = false;
-					visibilities.osd = false;
-					panels.popouts.hasCurrent = false;
-				}
-			}
-
-			PersistentProperties {
-				id: visibilities
-
-				property bool sidebar
-				property bool dashboard
-				property bool bar
-				property bool osd
-				property bool launcher
-				property bool notif: NotifServer.popups.length > 0
-
-				Component.onCompleted: Visibilities.load(scope.modelData, this)
-			}
-
-			Binding {
-				target: visibilities
-				property: "bar"
-				value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || visibilities.notif
-				when: Config.barConfig.autoHide
-			}
-
-            Item {
-                anchors.fill: parent
-                opacity: Appearance.transparency.enabled ? DynamicColors.transparency.base : 1
-                layer.enabled: true
-                layer.effect: MultiEffect {
-                    shadowEnabled: true
-                    blurMax: 32
-                    shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
-                }
-
-                Border {
-                    bar: backgroundRect
-					visibilities: visibilities
-                }
-
-                Backgrounds {
-					visibilities: visibilities
-                    panels: panels
-                    bar: backgroundRect
-                }
-            }
-
-            Interactions {
-				id: mouseArea
-				screen: scope.modelData
-				popouts: panels.popouts
-				visibilities: visibilities
-				panels: panels
-				bar: barLoader
-                anchors.fill: parent
-
-                Panels {
-                    id: panels
-                    screen: scope.modelData
-                    bar: backgroundRect
-					visibilities: visibilities
-                }
-
-                CustomRect {
-                    id: backgroundRect
-                    property Wrapper popouts: panels.popouts
-					anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    implicitHeight: 34
-					anchors.topMargin: Config.barConfig.autoHide && !visibilities.bar ? -30 : 0
-                    color: "transparent"
-                    radius: 0
-
-
-                    Behavior on color {
-                        CAnim {}
-                    }
-
-					Behavior on anchors.topMargin {
-						Anim {}
-					}
-
-                    BarLoader {
-                        id: barLoader
-                        anchors.fill: parent
-                        popouts: panels.popouts
-                        bar: bar
-						visibilities: visibilities
-						screen: scope.modelData
-                    }
-                }
-            }
-        }
-    }
-}

CMakeLists.txt

@@ -12,6 +12,7 @@ set(ENABLE_MODULES "plugin;shell" CACHE STRING "Modules to build/install")
 set(INSTALL_LIBDIR "usr/lib/ZShell" CACHE STRING "Library install dir")
 set(INSTALL_QMLDIR "usr/lib/qt6/qml" CACHE STRING "QML install dir")
 set(INSTALL_QSCONFDIR "etc/xdg/quickshell/zshell" CACHE STRING "Quickshell config install dir")
+set(INSTALL_GREETERCONFDIR "etc/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
 
 add_compile_options(
     -Wall -Wextra -Wpedantic -Wshadow -Wconversion
@@ -30,5 +31,6 @@ if("shell" IN_LIST ENABLE_MODULES)
 	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
         install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
     endforeach()
-	install(FILES shell.qml Bar.qml Wallpaper.qml DESTINATION "${INSTALL_QSCONFDIR}")
+	install(FILES shell.qml DESTINATION "${INSTALL_QSCONFDIR}")
+	install(DIRECTORY Greeter/ DESTINATION "${INSTALL_GREETERCONFDIR}")
 endif()

Components/Anim.qml

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

Components/AnimatedTabIndexPair.qml

@@ -0,0 +1,24 @@
+import QtQuick
+
+QtObject {
+	id: root
+
+	property real idx1: index
+	property int idx1Duration: 100
+	property real idx2: index
+	property int idx2Duration: 300
+	required property int index
+
+	Behavior on idx1 {
+		NumberAnimation {
+			duration: root.idx1Duration
+			easing.type: Easing.OutSine
+		}
+	}
+	Behavior on idx2 {
+		NumberAnimation {
+			duration: root.idx2Duration
+			easing.type: Easing.OutSine
+		}
+	}
+}

Components/BaseStyledSlider.qml

@@ -0,0 +1,165 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+
+Slider {
+	id: root
+
+	property color color: DynamicColors.palette.m3secondary
+	required property string icon
+	property bool initialized: false
+	readonly property bool isHorizontal: orientation === Qt.Horizontal
+	readonly property bool isVertical: orientation === Qt.Vertical
+	property real multiplier: 100
+	property real oldValue
+
+	// Wrapper components can inject their own track visuals here.
+	property Component trackContent
+
+	// Keep current behavior for existing usages.
+	orientation: Qt.Vertical
+
+	background: CustomRect {
+		id: groove
+
+		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		height: root.availableHeight
+		radius: Appearance.rounding.full
+		width: root.availableWidth
+		x: root.leftPadding
+		y: root.topPadding
+
+		Loader {
+			id: trackLoader
+
+			anchors.fill: parent
+			sourceComponent: root.trackContent
+
+			onLoaded: {
+				if (!item)
+					return;
+
+				item.rootSlider = root;
+				item.groove = groove;
+				item.handleItem = handle;
+			}
+		}
+	}
+	handle: Item {
+		id: handle
+
+		property alias moving: icon.moving
+
+		implicitHeight: Math.min(root.width, root.height)
+		implicitWidth: Math.min(root.width, root.height)
+		x: root.isHorizontal ? root.leftPadding + root.visualPosition * (root.availableWidth - width) : root.leftPadding + (root.availableWidth - width) / 2
+		y: root.isVertical ? root.topPadding + root.visualPosition * (root.availableHeight - height) : root.topPadding + (root.availableHeight - height) / 2
+
+		Elevation {
+			anchors.fill: parent
+			level: handleInteraction.containsMouse ? 2 : 1
+			radius: rect.radius
+		}
+
+		CustomRect {
+			id: rect
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3inverseSurface
+			radius: Appearance.rounding.full
+
+			MouseArea {
+				id: handleInteraction
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: Qt.PointingHandCursor
+				hoverEnabled: true
+			}
+
+			MaterialIcon {
+				id: icon
+
+				property bool moving
+
+				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.centerIn: parent
+				color: DynamicColors.palette.m3inverseOnSurface
+				text: root.icon
+
+				onMovingChanged: anim.restart()
+
+				Binding {
+					id: binding
+
+					property: "text"
+					target: icon
+					value: Math.round(root.value * root.multiplier)
+					when: false
+				}
+
+				SequentialAnimation {
+					id: anim
+
+					Anim {
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						property: "scale"
+						target: icon
+						to: 0
+					}
+
+					ScriptAction {
+						script: icon.update()
+					}
+
+					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
+		}
+	}
+
+	onPressedChanged: handle.moving = pressed
+	onValueChanged: {
+		if (!initialized) {
+			initialized = true;
+			oldValue = value;
+			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;
+		}
+	}
+}

Components/CAnim.qml

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

Components/CircularIndicator.qml

@@ -1,6 +1,4 @@
-import qs.Helpers
 import qs.Config
-import qs.Modules
 import ZShell.Internal
 import QtQuick
 import QtQuick.Templates
@@ -8,31 +6,54 @@ import QtQuick.Templates
 BusyIndicator {
 	id: root
 
-    enum AnimType {
-        Advance = 0,
-        Retreat
-    }
-
 	enum AnimState {
 		Stopped,
 		Running,
 		Completing
 	}
+	enum AnimType {
+		Advance = 0,
+		Retreat
+	}
 
-    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
-
-    property alias type: manager.indeterminateAnimationType
-    readonly property alias progress: manager.progress
-
-    property real internalStrokeWidth: strokeWidth
 	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
 
-    padding: 0
-    implicitWidth: implicitSize
 	implicitHeight: implicitSize
+	implicitWidth: implicitSize
+	padding: 0
+
+	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
+
+		PropertyChanges {
+			root.internalStrokeWidth: root.strokeWidth / 3
+			root.opacity: 0
+		}
+	}
+	transitions: Transition {
+		Anim {
+			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			properties: "opacity,internalStrokeWidth"
+		}
+	}
 
 	Component.onCompleted: {
 		if (running) {
@@ -40,7 +61,6 @@ BusyIndicator {
 			running = true;
 		}
 	}
-
 	onRunningChanged: {
 		if (running) {
 			manager.completeEndProgress = 0;
@@ -51,55 +71,29 @@ BusyIndicator {
 		}
 	}
 
-    states: State {
-        name: "stopped"
-        when: !root.running
-
-        PropertyChanges {
-            root.opacity: 0
-            root.internalStrokeWidth: root.strokeWidth / 3
-        }
-    }
-
-    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
+		from: 0
+		loops: Animation.Infinite
+		property: "progress"
+		running: root.animState !== CircularIndicator.Stopped
+		target: manager
+		to: 1
 	}
 
 	NumberAnimation {
+		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		from: 0
+		property: "completeEndProgress"
 		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;

Components/CircularProgress.qml

@@ -1,69 +1,66 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Helpers
 import qs.Config
-import qs.Modules
 
 Shape {
 	id: root
 
-    property real value
+	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
-    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 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)
+	property real value
 
-    preferredRendererType: Shape.CurveRenderer
 	asynchronous: true
+	preferredRendererType: Shape.CurveRenderer
 
 	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 		fillColor: "transparent"
 		strokeColor: root.bgColour
 		strokeWidth: root.strokeWidth
-        capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
-
-        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
-        }
 
 		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 + 360 * root.vValue + root.gapAngle
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
+		}
 	}
 
 	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 		fillColor: "transparent"
 		strokeColor: root.fgColour
 		strokeWidth: root.strokeWidth
-        capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
-
-        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/CollapsibleSection.qml

@@ -0,0 +1,135 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	default property alias content: contentColumn.data
+	property string description: ""
+	property bool expanded: false
+	property bool nested: false
+	property bool showBackground: false
+	required property string title
+
+	signal toggleRequested
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.small
+
+	Item {
+		id: sectionHeaderItem
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
+
+		RowLayout {
+			id: titleRow
+
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: Appearance.spacing.normal
+
+			CustomText {
+				font.pointSize: Appearance.font.size.larger
+				font.weight: 500
+				text: root.title
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				rotation: root.expanded ? 180 : 0
+				text: "expand_more"
+
+				Behavior on rotation {
+					Anim {
+						duration: Appearance.anim.durations.small
+						easing.bezierCurve: Appearance.anim.curves.standard
+					}
+				}
+			}
+		}
+
+		StateLayer {
+			function onClicked(): void {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3onSurface
+			radius: Appearance.rounding.normal
+			showHoverBackground: false
+		}
+	}
+
+	Item {
+		id: contentWrapper
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+		clip: true
+
+		Behavior on Layout.preferredHeight {
+			Anim {
+				easing.bezierCurve: Appearance.anim.curves.standard
+			}
+		}
+
+		CustomRect {
+			id: backgroundRect
+
+			anchors.fill: parent
+			color: DynamicColors.transparency.enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3surfaceContainer)
+			opacity: root.showBackground && root.expanded ? 1.0 : 0.0
+			radius: Appearance.rounding.normal
+			visible: root.showBackground
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+		}
+
+		ColumnLayout {
+			id: contentColumn
+
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			opacity: root.expanded ? 1.0 : 0.0
+			spacing: Appearance.spacing.small
+			y: Appearance.spacing.small
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+
+			CustomText {
+				id: descriptionText
+
+				Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
+				Layout.fillWidth: true
+				Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.small
+				text: root.description
+				visible: root.description !== ""
+				wrapMode: Text.Wrap
+			}
+		}
+	}
+}

Components/ColorArcPicker.qml

@@ -0,0 +1,208 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Config
+
+Item {
+	id: root
+
+	readonly property real arcStartAngle: 0.75 * Math.PI
+	readonly property real arcSweep: 1.5 * Math.PI
+	property real currentHue: 0
+	property bool dragActive: false
+	required property var drawing
+	readonly property real handleAngle: hueToAngle(currentHue)
+	readonly property real handleCenterX: width / 2 + radius * Math.cos(handleAngle)
+	readonly property real handleCenterY: height / 2 + radius * Math.sin(handleAngle)
+	property real handleSize: 32
+	property real lastChromaticHue: 0
+	readonly property real radius: (Math.min(width, height) - handleSize) / 2
+	readonly property int segmentCount: 240
+	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+
+	function hueToAngle(hue) {
+		return arcStartAngle + arcSweep * hue;
+	}
+
+	function normalizeAngle(angle) {
+		const tau = Math.PI * 2;
+		let a = angle % tau;
+		if (a < 0)
+			a += tau;
+		return a;
+	}
+
+	function pointIsOnTrack(x, y) {
+		const cx = width / 2;
+		const cy = height / 2;
+		const dx = x - cx;
+		const dy = y - cy;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		return distance >= radius - handleSize / 2 && distance <= radius + handleSize / 2;
+	}
+
+	function syncFromPenColor() {
+		if (!drawing)
+			return;
+
+		const c = drawing.penColor;
+
+		if (c.hsvSaturation > 0) {
+			currentHue = c.hsvHue;
+			lastChromaticHue = c.hsvHue;
+		} else {
+			currentHue = lastChromaticHue;
+		}
+
+		canvas.requestPaint();
+	}
+
+	function updateHueFromPoint(x, y, force = false) {
+		const cx = width / 2;
+		const cy = height / 2;
+		const dx = x - cx;
+		const dy = y - cy;
+
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (!force && (distance < radius - handleSize / 2 || distance > radius + handleSize / 2))
+			return;
+
+		const angle = normalizeAngle(Math.atan2(dy, dx));
+		const start = normalizeAngle(arcStartAngle);
+
+		let relative = angle - start;
+		if (relative < 0)
+			relative += Math.PI * 2;
+
+		if (relative > arcSweep) {
+			const gap = Math.PI * 2 - arcSweep;
+			relative = relative < arcSweep + gap / 2 ? arcSweep : 0;
+		}
+
+		currentHue = relative / arcSweep;
+		lastChromaticHue = currentHue;
+		drawing.penColor = Qt.hsva(currentHue, drawing.penColor.hsvSaturation, drawing.penColor.hsvValue, drawing.penColor.a);
+	}
+
+	implicitHeight: 180
+	implicitWidth: 220
+
+	Component.onCompleted: syncFromPenColor()
+	onCurrentHueChanged: canvas.requestPaint()
+	onDrawingChanged: syncFromPenColor()
+	onHandleSizeChanged: canvas.requestPaint()
+	onHeightChanged: canvas.requestPaint()
+	onWidthChanged: canvas.requestPaint()
+
+	Connections {
+		function onPenColorChanged() {
+			root.syncFromPenColor();
+		}
+
+		target: root.drawing
+	}
+
+	Canvas {
+		id: canvas
+
+		anchors.fill: parent
+		renderStrategy: Canvas.Threaded
+		renderTarget: Canvas.Image
+
+		Component.onCompleted: requestPaint()
+		onPaint: {
+			const ctx = getContext("2d");
+			ctx.reset();
+			ctx.clearRect(0, 0, width, height);
+
+			const cx = width / 2;
+			const cy = height / 2;
+			const radius = root.radius;
+			const trackWidth = root.handleSize;
+
+			// Background track: always show the full hue spectrum
+			for (let i = 0; i < root.segmentCount; ++i) {
+				const t1 = i / root.segmentCount;
+				const t2 = (i + 1) / root.segmentCount;
+				const a1 = root.arcStartAngle + root.arcSweep * t1;
+				const a2 = root.arcStartAngle + root.arcSweep * t2;
+
+				ctx.beginPath();
+				ctx.arc(cx, cy, radius, a1, a2);
+				ctx.lineWidth = trackWidth;
+				ctx.lineCap = "round";
+				ctx.strokeStyle = Qt.hsla(t1, 1.0, 0.5, 1.0);
+				ctx.stroke();
+			}
+		}
+	}
+
+	Item {
+		id: handle
+
+		height: root.handleSize
+		width: root.handleSize
+		x: root.handleCenterX - width / 2
+		y: root.handleCenterY - height / 2
+		z: 1
+
+		Elevation {
+			anchors.fill: parent
+			level: handleHover.containsMouse ? 2 : 1
+			radius: rect.radius
+		}
+
+		Rectangle {
+			id: rect
+
+			anchors.fill: parent
+			color: root.thumbColor
+			radius: width / 2
+
+			MouseArea {
+				id: handleHover
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: Qt.PointingHandCursor
+				hoverEnabled: true
+			}
+
+			Rectangle {
+				anchors.centerIn: parent
+				color: root.drawing ? root.drawing.penColor : Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
+				height: width
+				radius: width / 2
+				width: parent.width - 12
+			}
+		}
+	}
+
+	MouseArea {
+		id: dragArea
+
+		acceptedButtons: Qt.LeftButton
+		anchors.fill: parent
+		hoverEnabled: true
+
+		onCanceled: {
+			root.dragActive = false;
+		}
+		onPositionChanged: mouse => {
+			if ((mouse.buttons & Qt.LeftButton) && root.dragActive)
+				root.updateHueFromPoint(mouse.x, mouse.y, true);
+		}
+		onPressed: mouse => {
+			root.dragActive = root.pointIsOnTrack(mouse.x, mouse.y);
+			if (root.dragActive)
+				root.updateHueFromPoint(mouse.x, mouse.y);
+		}
+		onReleased: {
+			root.dragActive = false;
+		}
+	}
+}

Components/ColoredIcon.qml

@@ -10,18 +10,17 @@ IconImage {
 	required property color color
 
 	asynchronous: true
-
 	layer.enabled: true
+
 	layer.effect: Coloriser {
-        sourceColor: analyser.dominantColour
 		colorizationColor: root.color
+		sourceColor: analyser.dominantColour
 	}
 
 	layer.onEnabledChanged: {
 		if (layer.enabled && status === Image.Ready)
 			analyser.requestUpdate();
 	}
-
 	onStatusChanged: {
 		if (layer.enabled && status === Image.Ready)
 			analyser.requestUpdate();

Components/Coloriser.qml

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

Components/CustomAudioSlider.qml

@@ -1,82 +1,69 @@
 import QtQuick
 import QtQuick.Templates
 import qs.Config
-import qs.Modules
 
 Slider {
 	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
-
+			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
-            bottomRightRadius: 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
-
-			Component.onCompleted: {
-				console.log(root.handle.x, implicitWidth)
-			}
-
-
+			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
-            bottomLeftRadius: root.implicitHeight / 15
 		}
 	}
-
 	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: 1000
 		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
+			anchors.fill: parent
 			cursorShape: Qt.PointingHandCursor
 		}
 	}

Components/CustomBusyIndicator.qml

@@ -3,20 +3,22 @@ import QtQuick.Controls.Basic
 
 BusyIndicator {
 	id: control
-	property color color: delegate.color
+
 	property int busySize: 64
+	property color color: delegate.color
 
 	contentItem: Item {
-        implicitWidth: control.busySize
 		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
+			width: control.busySize
+			x: parent.width / 2 - (control.busySize / 2)
+			y: parent.height / 2 - (control.busySize / 2)
 
 			Behavior on opacity {
 				OpacityAnimator {
@@ -25,29 +27,31 @@ BusyIndicator {
 			}
 
 			RotationAnimator {
-                target: item
-                running: control.visible && control.running
-                from: 0
-                to: 360
-                loops: Animation.Infinite
 				duration: 1250
+				from: 0
+				loops: Animation.Infinite
+				running: control.visible && control.running
+				target: item
+				to: 360
 			}
 
 			Repeater {
 				id: repeater
+
 				model: 6
 
 				CustomRect {
 					id: delegate
-                    x: item.width / 2 - width / 2
-                    y: item.height / 2 - height / 2
-                    implicitWidth: 10
-                    implicitHeight: 10
-                    radius: 5
-                    color: control.color
 
 					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

Components/CustomButton.qml

@@ -1,33 +1,32 @@
 import QtQuick
 import QtQuick.Controls
+import qs.Config
 
 Button {
 	id: control
 
-	required property color textColor
-	required property color bgColor
+	property color bgColor: DynamicColors.palette.m3primary
 	property int radius: 4
+	property color textColor: DynamicColors.palette.m3onPrimary
 
-	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

@@ -1,6 +1,5 @@
 import Quickshell.Widgets
 import QtQuick
-import qs.Modules
 
 ClippingRectangle {
 	id: root
@@ -8,6 +7,7 @@ ClippingRectangle {
 	color: "transparent"
 
 	Behavior on color {
-        CAnim {}
+		CAnim {
+		}
 	}
 }

Components/CustomComboBox.qml

@@ -0,0 +1,169 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.Config
+
+ComboBox {
+	id: root
+
+	property int cornerRadius: Appearance.rounding.normal
+	property int fieldHeight: 42
+	property bool filled: true
+	property real focusRingOpacity: 0.70
+	property int hPadding: 16
+	property int menuCornerRadius: 16
+	property int menuRowHeight: 46
+	property int menuVisibleRows: 7
+	property bool preferPopupWindow: false
+
+	hoverEnabled: true
+	implicitHeight: fieldHeight
+	implicitWidth: 240
+	spacing: 8
+
+	// ---------- Field background (filled/outlined + state layers + focus ring) ----------
+	background: Item {
+		anchors.fill: parent
+
+		CustomRect {
+			id: container
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surfaceVariant
+			radius: root.cornerRadius
+
+			StateLayer {
+			}
+		}
+	}
+
+	// ---------- Content ----------
+	contentItem: RowLayout {
+		anchors.fill: parent
+		anchors.leftMargin: root.hPadding
+		anchors.rightMargin: root.hPadding
+		spacing: 12
+
+		// Display text
+		CustomText {
+			Layout.fillWidth: true
+			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			font.pixelSize: 16
+			font.weight: Font.Medium
+			text: root.currentText
+			verticalAlignment: Text.AlignVCenter
+		}
+
+		// Indicator chevron (simple, replace with your icon system)
+		CustomText {
+			color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurfaceVariant
+			rotation: root.popup.visible ? 180 : 0
+			text: "▾"
+			transformOrigin: Item.Center
+			verticalAlignment: Text.AlignVCenter
+
+			Behavior on rotation {
+				NumberAnimation {
+					duration: 140
+					easing.type: Easing.OutCubic
+				}
+			}
+		}
+	}
+	popup: Popup {
+		id: p
+
+		implicitHeight: list.contentItem.height + Appearance.padding.small * 2
+		implicitWidth: root.width
+		modal: true
+		popupType: root.preferPopupWindow ? Popup.Window : Popup.Item
+		y: -list.currentIndex * (root.menuRowHeight + Appearance.spacing.small) - Appearance.padding.small
+
+		background: CustomRect {
+			color: DynamicColors.palette.m3surface
+			radius: root.menuCornerRadius
+		}
+		contentItem: ListView {
+			id: list
+
+			anchors.bottomMargin: Appearance.padding.small
+			anchors.fill: parent
+			anchors.topMargin: Appearance.padding.small
+			clip: true
+			currentIndex: root.currentIndex
+			model: root.delegateModel
+			spacing: Appearance.spacing.small
+
+			delegate: CustomRect {
+				required property int index
+				required property var modelData
+
+				anchors.horizontalCenter: parent.horizontalCenter
+				color: (index === root.currentIndex) ? DynamicColors.palette.m3primary : "transparent"
+				implicitHeight: root.menuRowHeight
+				implicitWidth: p.implicitWidth - Appearance.padding.small * 2
+				radius: Appearance.rounding.normal - Appearance.padding.small
+
+				RowLayout {
+					anchors.fill: parent
+					spacing: 10
+
+					CustomText {
+						Layout.fillWidth: true
+						color: DynamicColors.palette.m3onSurface
+						elide: Text.ElideRight
+						font.pixelSize: 15
+						text: modelData
+						verticalAlignment: Text.AlignVCenter
+					}
+
+					CustomText {
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: "✓"
+						verticalAlignment: Text.AlignVCenter
+						visible: index === root.currentIndex
+					}
+				}
+
+				StateLayer {
+					onClicked: {
+						root.currentIndex = index;
+						p.close();
+					}
+				}
+			}
+		}
+
+		// Expressive-ish open/close motion: subtle scale+fade (tune to taste). :contentReference[oaicite:5]{index=5}
+		enter: Transition {
+			Anim {
+				from: 0
+				property: "opacity"
+				to: 1
+			}
+
+			Anim {
+				from: 0.98
+				property: "scale"
+				to: 1.0
+			}
+		}
+		exit: Transition {
+			Anim {
+				from: 1
+				property: "opacity"
+				to: 0
+			}
+		}
+
+		Elevation {
+			anchors.fill: parent
+			level: 2
+			radius: root.menuCornerRadius
+			z: -1
+		}
+	}
+}

Components/CustomFlickable.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import qs.Modules
 
 Flickable {
 	id: root

Components/CustomListView.qml

@@ -1,6 +1,4 @@
 import QtQuick
-import qs.Config
-import qs.Modules
 
 ListView {
 	id: root

Components/CustomRadioButton.qml

@@ -1,56 +1,53 @@
 import QtQuick
 import QtQuick.Templates
 import qs.Config
-import qs.Modules
 
 RadioButton {
 	id: root
 
-    font.pointSize: 12
-
-    implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
+	font.pointSize: Appearance.font.size.normal
 	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
+	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 
+	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
 
-        implicitWidth: 16
-        implicitHeight: 16
-        radius: 1000
-        color: "transparent"
+		anchors.verticalCenter: parent.verticalCenter
 		border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
 		border.width: 2
-        anchors.verticalCenter: parent.verticalCenter
+		color: "transparent"
+		implicitHeight: 16
+		implicitWidth: 16
+		radius: 1000
+
+		Behavior on border.color {
+			CAnim {
+			}
+		}
 
 		StateLayer {
-            anchors.margins: -7
-            color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
-            z: -1
-
 			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 {}
+			implicitHeight: 8
+			implicitWidth: 8
+			radius: 1000
 		}
 	}
-
-    contentItem: CustomText {
-        text: root.text
-        font.pointSize: root.font.pointSize
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: outerCircle.right
-        anchors.leftMargin: 10
-    }
 }

Components/CustomRect.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import qs.Modules
 
 Rectangle {
 	id: root
@@ -7,6 +6,7 @@ Rectangle {
 	color: "transparent"
 
 	Behavior on color {
-        CAnim {}
+		CAnim {
+		}
 	}
 }

Components/CustomScrollBar.qml

@@ -1,16 +1,66 @@
 import qs.Config
-import qs.Modules
 import QtQuick
 import QtQuick.Templates
 
 ScrollBar {
 	id: root
 
-    required property Flickable flickable
-    property bool shouldBeActive
-    property real nonAnimPosition
+	property bool _updatingFromFlickable: false
+	property bool _updatingFromUser: false
 	property bool animating
+	required property Flickable flickable
+	property real nonAnimPosition
+	property bool shouldBeActive
 
+	implicitWidth: 8
+
+	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
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MouseArea {
+			id: mouse
+
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
+	}
+	Behavior on position {
+		enabled: !fullMouse.pressed
+
+		Anim {
+		}
+	}
+
+	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;
@@ -18,9 +68,6 @@ ScrollBar {
 			shouldBeActive = flickable.moving;
 	}
 
-    property bool _updatingFromFlickable: false
-    property bool _updatingFromUser: false
-
 	// Sync nonAnimPosition with Qt's automatic position binding
 	onPositionChanged: {
 		if (_updatingFromUser) {
@@ -38,7 +85,6 @@ ScrollBar {
 
 	// Sync nonAnimPosition with flickable when not animating
 	Connections {
-        target: flickable
 		function onContentYChanged() {
 			if (!animating && !fullMouse.pressed) {
 				_updatingFromFlickable = true;
@@ -52,111 +98,32 @@ ScrollBar {
 				_updatingFromFlickable = false;
 			}
 		}
-    }
 
-    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
-
-    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
-
-        MouseArea {
-            id: mouse
-
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            hoverEnabled: true
-            acceptedButtons: Qt.NoButton
-        }
-
-        Behavior on opacity {
-            Anim {}
-        }
+		target: flickable
 	}
 
 	Connections {
-        target: root.flickable
-
 		function onMovingChanged(): void {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;
 			else
 				hideDelay.restart();
 		}
+
+		target: root.flickable
 	}
 
 	Timer {
 		id: hideDelay
 
 		interval: 600
+
 		onTriggered: root.shouldBeActive = root.flickable.moving || root.hovered
 	}
 
 	CustomMouseArea {
 		id: fullMouse
 
-        anchors.fill: parent
-        preventStealing: true
-
-        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));
-                }
-            }
-        }
-
-        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;
@@ -179,11 +146,44 @@ ScrollBar {
 				}
 			}
 		}
-    }
 
-    Behavior on position {
-        enabled: !fullMouse.pressed
+		anchors.fill: parent
+		preventStealing: true
 
-        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

@@ -1,52 +1,44 @@
 import QtQuick
 import QtQuick.Templates
 import qs.Config
-import qs.Modules
 
 Slider {
 	id: root
 
 	background: Item {
 		CustomRect {
-            anchors.top: parent.top
 			anchors.bottom: parent.bottom
 			anchors.left: parent.left
-
-            implicitWidth: root.handle.x - root.implicitHeight / 2
-
+			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
-            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
-
+			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
-            bottomLeftRadius: 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
 
-        implicitWidth: 5
-        implicitHeight: 15
-        anchors.verticalCenter: parent.verticalCenter
-
-        color: DynamicColors.palette.m3primary
-        radius: 1000
-
 		MouseArea {
-            anchors.fill: parent
 			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
 			cursorShape: Qt.PointingHandCursor
 		}
 	}

Components/CustomSpinBox.qml

@@ -0,0 +1,169 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+RowLayout {
+	id: root
+
+	property string displayText: root.value.toString()
+	property bool isEditing: false
+	property real max: Infinity
+	property real min: -Infinity
+	property alias repeatRate: timer.interval
+	property real step: 1
+	property real value
+
+	signal valueModified(value: real)
+
+	spacing: Appearance.spacing.small
+
+	onValueChanged: {
+		if (!root.isEditing) {
+			root.displayText = root.value.toString();
+		}
+	}
+
+	CustomTextField {
+		id: textField
+
+		implicitHeight: upButton.implicitHeight
+		inputMethodHints: Qt.ImhFormattedNumbersOnly
+		leftPadding: Appearance.padding.normal
+		padding: Appearance.padding.small
+		rightPadding: Appearance.padding.normal
+		text: root.isEditing ? text : root.displayText
+
+		background: CustomRect {
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			implicitWidth: 100
+			radius: Appearance.rounding.full
+		}
+		validator: DoubleValidator {
+			bottom: root.min
+			decimals: root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0
+			top: root.max
+		}
+
+		onAccepted: {
+			const numValue = parseFloat(text);
+			if (!isNaN(numValue)) {
+				const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+				root.value = clampedValue;
+				root.displayText = clampedValue.toString();
+				root.valueModified(clampedValue);
+			} else {
+				text = root.displayText;
+			}
+			root.isEditing = false;
+		}
+		onActiveFocusChanged: {
+			if (activeFocus) {
+				root.isEditing = true;
+			} else {
+				root.isEditing = false;
+				root.displayText = root.value.toString();
+			}
+		}
+		onEditingFinished: {
+			if (text !== root.displayText) {
+				const numValue = parseFloat(text);
+				if (!isNaN(numValue)) {
+					const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+					root.value = clampedValue;
+					root.displayText = clampedValue.toString();
+					root.valueModified(clampedValue);
+				} else {
+					text = root.displayText;
+				}
+			}
+			root.isEditing = false;
+		}
+	}
+
+	CustomRect {
+		id: upButton
+
+		color: DynamicColors.palette.m3primary
+		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+		implicitWidth: implicitHeight
+		radius: Appearance.rounding.full
+
+		StateLayer {
+			id: upState
+
+			function onClicked(): void {
+				let newValue = Math.min(root.max, root.value + root.step);
+				// Round to avoid floating point precision errors
+				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+				root.value = newValue;
+				root.displayText = newValue.toString();
+				root.valueModified(newValue);
+			}
+
+			color: DynamicColors.palette.m3onPrimary
+
+			onPressAndHold: timer.start()
+			onReleased: timer.stop()
+		}
+
+		MaterialIcon {
+			id: upIcon
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onPrimary
+			text: "keyboard_arrow_up"
+		}
+	}
+
+	CustomRect {
+		color: DynamicColors.palette.m3primary
+		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
+		implicitWidth: implicitHeight
+		radius: Appearance.rounding.full
+
+		StateLayer {
+			id: downState
+
+			function onClicked(): void {
+				let newValue = Math.max(root.min, root.value - root.step);
+				// Round to avoid floating point precision errors
+				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+				root.value = newValue;
+				root.displayText = newValue.toString();
+				root.valueModified(newValue);
+			}
+
+			color: DynamicColors.palette.m3onPrimary
+
+			onPressAndHold: timer.start()
+			onReleased: timer.stop()
+		}
+
+		MaterialIcon {
+			id: downIcon
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onPrimary
+			text: "keyboard_arrow_down"
+		}
+	}
+
+	Timer {
+		id: timer
+
+		interval: 100
+		repeat: true
+		triggeredOnStart: true
+
+		onTriggered: {
+			if (upState.pressed)
+				upState.onClicked();
+			else if (downState.pressed)
+				downState.onClicked();
+		}
+	}
+}

Components/CustomSplitButton.qml

@@ -0,0 +1,181 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Helpers
+
+Row {
+	id: root
+
+	enum Type {
+		Filled,
+		Tonal
+	}
+
+	property alias active: menu.active
+	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property bool disabled
+	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property alias expanded: menu.expanded
+	property string fallbackIcon
+	property string fallbackText
+	property real horizontalPadding: Appearance.padding.normal
+	property alias iconLabel: iconLabel
+	property alias label: label
+	property alias menu: menu
+	property alias menuItems: menu.items
+	property bool menuOnTop
+	property alias stateLayer: stateLayer
+	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property int type: CustomSplitButton.Filled
+	property real verticalPadding: Appearance.padding.smaller
+
+	function closeDropdown(): void {
+		SettingsDropdowns.close(menu);
+	}
+
+	function openDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.open(menu, root);
+	}
+
+	function toggleDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.toggle(menu, root);
+	}
+
+	spacing: Math.floor(Appearance.spacing.small / 2)
+
+	onExpandedChanged: {
+		if (!expanded)
+			SettingsDropdowns.forget(menu);
+	}
+
+	CustomRect {
+		bottomRightRadius: Appearance.rounding.small / 2
+		color: root.disabled ? root.disabledColor : root.color
+		implicitHeight: expandBtn.implicitHeight
+		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
+		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		topRightRadius: Appearance.rounding.small / 2
+
+		StateLayer {
+			id: stateLayer
+
+			function onClicked(): void {
+				root.active?.clicked();
+			}
+
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomRightRadius: parent.bottomRightRadius
+			rect.topRightRadius: parent.topRightRadius
+		}
+
+		RowLayout {
+			id: textRow
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				id: iconLabel
+
+				Layout.alignment: Qt.AlignVCenter
+				animate: true
+				color: root.disabled ? root.disabledTextColor : root.textColor
+				fill: 1
+				text: root.active?.activeIcon ?? root.fallbackIcon
+			}
+
+			CustomText {
+				id: label
+
+				Layout.alignment: Qt.AlignVCenter
+				Layout.preferredWidth: implicitWidth
+				animate: true
+				clip: true
+				color: root.disabled ? root.disabledTextColor : root.textColor
+				text: root.active?.activeText ?? root.fallbackText
+
+				Behavior on Layout.preferredWidth {
+					Anim {
+						easing.bezierCurve: Appearance.anim.curves.emphasized
+					}
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: expandBtn
+
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
+
+		bottomLeftRadius: rad
+		color: root.disabled ? root.disabledColor : root.color
+		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
+		implicitWidth: implicitHeight
+		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		topLeftRadius: rad
+
+		Behavior on rad {
+			Anim {
+			}
+		}
+
+		StateLayer {
+			id: expandStateLayer
+
+			function onClicked(): void {
+				root.toggleDropdown();
+			}
+
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomLeftRadius: parent.bottomLeftRadius
+			rect.topLeftRadius: parent.topLeftRadius
+		}
+
+		MaterialIcon {
+			id: expandIcon
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
+			color: root.disabled ? root.disabledTextColor : root.textColor
+			rotation: root.expanded ? 180 : 0
+			text: "expand_more"
+
+			Behavior on anchors.horizontalCenterOffset {
+				Anim {
+				}
+			}
+			Behavior on rotation {
+				Anim {
+				}
+			}
+		}
+
+		Menu {
+			id: menu
+
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.right: parent.right
+			anchors.top: parent.bottom
+			anchors.topMargin: Appearance.spacing.small
+
+			states: State {
+				when: root.menuOnTop
+
+				AnchorChanges {
+					anchors.bottom: expandBtn.top
+					anchors.top: undefined
+					target: menu
+				}
+			}
+		}
+	}
+}

Components/CustomSplitButtonRow.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+Item {
+	id: root
+
+	property alias active: splitButton.active
+	property bool enabled: true
+	property alias expanded: splitButton.expanded
+	property int expandedZ: 100
+	required property string label
+	property alias menuItems: splitButton.menuItems
+	property alias type: splitButton.type
+
+	signal selected(item: MenuItem)
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	clip: false
+	z: root.expanded ? expandedZ : -1
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.normal
+
+		CustomText {
+			Layout.fillWidth: true
+			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.larger
+			text: root.label
+			z: root.expanded ? root.expandedZ : -1
+		}
+
+		CustomSplitButton {
+			id: splitButton
+
+			enabled: root.enabled
+			type: CustomSplitButton.Filled
+			z: root.expanded ? root.expandedZ : -1
+
+			menu.onItemSelected: item => {
+				root.selected(item);
+				splitButton.closeDropdown();
+			}
+			stateLayer.onClicked: {
+				splitButton.toggleDropdown();
+			}
+		}
+	}
+}

Components/CustomSwitch.qml

@@ -1,53 +1,142 @@
-import qs.Config
-import qs.Modules
 import QtQuick
 import QtQuick.Templates
 import QtQuick.Shapes
+import qs.Config
 
 Switch {
 	id: root
 
 	property int cLayer: 1
 
-    implicitWidth: implicitIndicatorWidth
 	implicitHeight: implicitIndicatorHeight
+	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-        radius: 1000
 		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-
-        implicitWidth: implicitHeight * 1.7
 		implicitHeight: 13 + 7 * 2
+		implicitWidth: implicitHeight * 1.7
+		radius: 1000
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
 
-            radius: 1000
-            color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-
-            x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
-            implicitWidth: nonAnimWidth
-            implicitHeight: parent.implicitHeight - 10
 			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
+
+			Behavior on implicitWidth {
+				Anim {
+				}
+			}
+			Behavior on x {
+				Anim {
+				}
+			}
 
 			CustomRect {
 				anchors.fill: parent
-                radius: parent.radius
-
 				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
+				radius: parent.radius
 
 				Behavior on opacity {
-                    Anim {}
+					Anim {
+					}
 				}
 			}
 
-            Behavior on x {
-                Anim {}
+			Shape {
+				id: icon
+
+				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);
 				}
 
-            Behavior on implicitWidth {
-                Anim {}
+				anchors.centerIn: parent
+				asynchronous: true
+				height: parent.implicitHeight - Appearance.padding.small * 2
+				preferredRendererType: Shape.CurveRenderer
+				width: height
+
+				Behavior on end1 {
+					PropAnim {
+					}
+				}
+				Behavior on end2 {
+					PropAnim {
+					}
+				}
+				Behavior on start1 {
+					PropAnim {
+					}
+				}
+				Behavior on start2 {
+					PropAnim {
+					}
+				}
+
+				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
+
+					Behavior on strokeColor {
+						CAnim {
+						}
+					}
+
+					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
+					}
+				}
 			}
 		}
 	}

Components/CustomText.qml

@@ -2,48 +2,50 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import qs.Config
-import qs.Modules
 
 Text {
 	id: root
 
 	property bool animate: false
-    property string animateProp: "scale"
-    property real animateFrom: 0
-    property real animateTo: 1
 	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
+	font.pointSize: Appearance.font.size.normal
+	renderType: Text.NativeRendering
+	textFormat: Text.PlainText
 
 	Behavior on color {
-        CAnim {}
+		CAnim {
+		}
 	}
-
 	Behavior on text {
 		enabled: root.animate
 
 		SequentialAnimation {
 			Anim {
-                to: root.animateFrom
 				easing.bezierCurve: MaterialEasing.standardAccel
+				to: root.animateFrom
 			}
-            PropertyAction {}
+
+			PropertyAction {
+			}
+
 			Anim {
-                to: root.animateTo
 				easing.bezierCurve: MaterialEasing.standardDecel
+				to: root.animateTo
 			}
 		}
 	}
 
 	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
+		properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
+		property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
+		target: root
 	}
 }

Components/CustomTextField.qml

@@ -2,34 +2,39 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Controls
-import qs.Helpers
 import qs.Config
-import qs.Modules
 
 TextField {
 	id: root
 
+	background: null
 	color: DynamicColors.palette.m3onSurface
-    placeholderTextColor: DynamicColors.palette.m3outline
+	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
-    cursorVisible: !readOnly
-
-    background: null
 
+	Behavior on color {
+		CAnim {
+		}
+	}
 	cursorDelegate: CustomRect {
 		id: cursor
 
 		property bool disableBlink
 
-        implicitWidth: 2
 		color: DynamicColors.palette.m3primary
+		implicitWidth: 2
 		radius: Appearance.rounding.normal
 
-        Connections {
-            target: root
+		Behavior on opacity {
+			Anim {
+				duration: Appearance.anim.durations.small
+			}
+		}
 
+		Connections {
 			function onCursorPositionChanged(): void {
 				if (root.activeFocus && root.cursorVisible) {
 					cursor.opacity = 1;
@@ -37,40 +42,34 @@ TextField {
 					enableBlink.restart();
 				}
 			}
+
+			target: root
 		}
 
 		Timer {
 			id: enableBlink
 
 			interval: 100
+
 			onTriggered: cursor.disableBlink = false
 		}
 
 		Timer {
-            running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
-            repeat: true
-            triggeredOnStart: true
 			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
+
 			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
 		}
 
 		Binding {
-            when: !root.activeFocus || !root.cursorVisible
 			cursor.opacity: 0
-        }
-
-        Behavior on opacity {
-            Anim {
-                duration: Appearance.anim.durations.small
+			when: !root.activeFocus || !root.cursorVisible
 		}
 	}
-    }
-
-    Behavior on color {
-        CAnim {}
-    }
-
 	Behavior on placeholderTextColor {
-        CAnim {}
+		CAnim {
+		}
 	}
 }

Components/CustomTextInput.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+TextInput {
+	renderType: Text.NativeRendering
+	selectedTextColor: DynamicColors.palette.m3onSecondaryContainer
+	selectionColor: DynamicColors.tPalette.colSecondaryContainer
+
+	font {
+		family: Appearance?.font.family.sans ?? "sans-serif"
+		hintingPreference: Font.PreferFullHinting
+		pixelSize: Appearance?.font.size.normal ?? 15
+	}
+}

Components/CustomTooltip.qml

@@ -4,20 +4,22 @@ 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
 
+	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
-        text: root.text
-        shown: root.internalVisibleCondition
+
 		horizontalPadding: root.horizontalPadding
+		shown: root.internalVisibleCondition
+		text: root.text
 		verticalPadding: root.verticalPadding
 	}
 }

Components/CustomTooltipContent.qml

@@ -1,47 +1,53 @@
 import QtQuick
 import qs.Components
-import qs.Modules
 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
 
+	property real horizontalPadding: 10
 	property bool isVisible: backgroundRectangle.implicitHeight > 0
+	property bool shown: false
+	required property string text
+	property real verticalPadding: 5
+
+	implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
+	implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
 
 	Rectangle {
 		id: backgroundRectangle
+
+		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
 		}
-        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
-
-        Behavior on implicitWidth {
-            Anim {}
-        }
-        Behavior on implicitHeight {
-            Anim {}
-        }
-        Behavior on opacity {
-            Anim {}
-        }
 
 		CustomText {
 			id: tooltipTextObject
+
 			anchors.centerIn: parent
-            text: root.text
 			color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
+			text: root.text
 			wrapMode: Text.Wrap
 		}
 	}

Components/CustomWindow.qml

@@ -0,0 +1,9 @@
+import Quickshell
+import Quickshell.Wayland
+
+PanelWindow {
+	required property string name
+
+	WlrLayershell.namespace: `ZShell-${name}`
+	color: "transparent"
+}

Components/Elevation.qml

@@ -1,18 +1,18 @@
 import qs.Config
-import qs.Modules
 import QtQuick
 import QtQuick.Effects
 
 RectangularShadow {
-    property int 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
+	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
 	offset.y: dp / 2
+	spread: -dp * 0.3 + (dp * 0.1) ** 2
 
 	Behavior on dp {
-        Anim {}
+		Anim {
+		}
 	}
 }

Components/ExtraIndicator.qml

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

Components/FilledSlider.qml

@@ -1,146 +1,29 @@
 import QtQuick
-import QtQuick.Templates
-import qs.Helpers
 import qs.Config
-import qs.Modules
 
-Slider {
+BaseStyledSlider {
 	id: root
 
-    required property string icon
-    property real oldValue
-    property bool initialized
-	property color color: DynamicColors.palette.m3secondary
+	trackContent: Component {
+		Item {
+			property var groove
+			readonly property real handleHeight: handleItem ? handleItem.height : 0
+			property var handleItem
+			readonly property real handleWidth: handleItem ? handleItem.width : 0
 
-    orientation: Qt.Vertical
+			// Set by BaseStyledSlider's Loader
+			property var rootSlider
 
-    background: CustomRect {
-        color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-        radius: Appearance.rounding.full
+			anchors.fill: parent
 
 			CustomRect {
-            anchors.left: parent.left
-            anchors.right: parent.right
-
-            y: root.handle.y
-            implicitHeight: parent.height - y
-
-            color: root.color
-            radius: parent.radius
-        }
-    }
-
-    handle: Item {
-        id: handle
-
-        property alias moving: icon.moving
-
-        y: root.visualPosition * (root.availableHeight - height)
-        implicitWidth: root.width
-        implicitHeight: root.width
-
-        Elevation {
-            anchors.fill: parent
-            radius: rect.radius
-            level: handleInteraction.containsMouse ? 2 : 1
-        }
-
-        CustomRect {
-            id: rect
-
-            anchors.fill: parent
-
-            color: DynamicColors.palette.m3inverseSurface
-            radius: Appearance.rounding.full
-
-            MouseArea {
-                id: handleInteraction
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.NoButton
-            }
-
-            MaterialIcon {
-                id: icon
-
-                property bool moving
-
-                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;
-                }
-
-                text: root.icon
-                color: DynamicColors.palette.m3inverseOnSurface
-                anchors.centerIn: parent
-
-                onMovingChanged: anim.restart()
-
-                Binding {
-                    id: binding
-
-                    target: icon
-                    property: "text"
-                    value: Math.round(root.value * 100)
-                    when: false
-                }
-
-                SequentialAnimation {
-                    id: anim
-
-                    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
+				color: rootSlider?.color
+				height: rootSlider?.isVertical ? handleHeight + (1 - rootSlider?.visualPosition) * (groove?.height - handleHeight) : groove?.height
+				radius: groove?.radius
+				width: rootSlider?.isHorizontal ? handleWidth + rootSlider?.visualPosition * (groove?.width - handleWidth) : groove?.width
+				x: rootSlider?.isHorizontal ? (rootSlider?.mirrored ? groove?.width - width : 0) : 0
+				y: rootSlider?.isVertical ? groove?.height - height : 0
 			}
 		}
 	}
 }
-    }
-
-    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();
-    }
-
-    Timer {
-        id: stateChangeDelay
-
-        interval: 500
-        onTriggered: {
-            if (!root.pressed)
-                handle.moving = false;
-        }
-    }
-
-    Behavior on value {
-        Anim {
-            duration: Appearance.anim.durations.large
-        }
-    }
-}

Components/GradientSlider.qml

@@ -0,0 +1,47 @@
+import QtQuick
+import qs.Config
+
+BaseStyledSlider {
+	id: root
+
+	property real alpha: 1.0
+	property real brightness: 1.0
+	property string channel: "saturation"
+	readonly property color currentColor: Qt.hsva(hue, channel === "saturation" ? value : saturation, channel === "brightness" ? value : brightness, alpha)
+	property real hue: 0.0
+	property real saturation: 1.0
+
+	from: 0
+	to: 1
+
+	trackContent: Component {
+		Item {
+			property var groove
+			property var handleItem
+			property var rootSlider
+
+			anchors.fill: parent
+
+			Rectangle {
+				anchors.fill: parent
+				antialiasing: true
+				color: "transparent"
+				radius: groove?.radius ?? 0
+
+				gradient: Gradient {
+					orientation: rootSlider?.isHorizontal ? Gradient.Horizontal : Gradient.Vertical
+
+					GradientStop {
+						color: root.channel === "saturation" ? Qt.hsva(root.hue, 0.0, root.brightness, root.alpha) : Qt.hsva(root.hue, root.saturation, 0.0, root.alpha)
+						position: 0.0
+					}
+
+					GradientStop {
+						color: root.channel === "saturation" ? Qt.hsva(root.hue, 1.0, root.brightness, root.alpha) : Qt.hsva(root.hue, root.saturation, 1.0, root.alpha)
+						position: 1.0
+					}
+				}
+			}
+		}
+	}
+}

Components/IconButton.qml

@@ -1,5 +1,4 @@
 import qs.Config
-import qs.Modules
 import QtQuick
 
 CustomRect {
@@ -11,55 +10,59 @@ CustomRect {
 		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 alias stateLayer: stateLayer
-    property alias label: label
-    property alias radiusAnim: radiusAnim
-
-    property bool internalChecked
 	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 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)
+	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
 
 	signal clicked
 
-    onCheckedChanged: internalChecked = checked
-
-    radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
-
-    implicitWidth: implicitHeight
 	implicitHeight: label.implicitHeight + padding * 2
+	implicitWidth: implicitHeight
+	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
+
+	Behavior on radius {
+		Anim {
+			id: radiusAnim
+
+		}
+	}
+
+	onCheckedChanged: internalChecked = checked
 
 	StateLayer {
 		id: stateLayer
 
-        color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-        disabled: root.disabled
-
 		function onClicked(): void {
 			if (root.toggle)
 				root.internalChecked = !root.internalChecked;
 			root.clicked();
 		}
+
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
 	}
 
 	MaterialIcon {
@@ -70,13 +73,8 @@ CustomRect {
 		fill: !root.toggle || root.internalChecked ? 1 : 0
 
 		Behavior on fill {
-            Anim {}
-        }
-    }
-
-    Behavior on radius {
 			Anim {
-            id: radiusAnim
+			}
 		}
 	}
 }

Components/MarqueeText.qml

@@ -0,0 +1,221 @@
+import QtQuick
+import qs.Config
+
+Item {
+	id: root
+
+	property alias anim: marqueeAnim
+	property bool animate: false
+	property color color: DynamicColors.palette.m3onSurface
+	property int fadeStrengthAnimMs: 180
+	property real fadeStrengthIdle: 0.0
+	property real fadeStrengthMoving: 1.0
+	property alias font: elideText.font
+	property int gap: 40
+	property alias horizontalAlignment: elideText.horizontalAlignment
+	property bool leftFadeEnabled: false
+	property real leftFadeStrength: overflowing && leftFadeEnabled ? fadeStrengthMoving : fadeStrengthIdle
+	property int leftFadeWidth: 28
+	property bool marqueeEnabled: true
+	readonly property bool overflowing: metrics.width > root.width
+	property int pauseMs: 1200
+	property real pixelsPerSecond: 40
+	property real rightFadeStrength: overflowing ? fadeStrengthMoving : fadeStrengthIdle
+	property int rightFadeWidth: 28
+	property bool sliding: false
+	property alias text: elideText.text
+
+	function durationForDistance(px): int {
+		return Math.max(1, Math.round(Math.abs(px) / root.pixelsPerSecond * 1000));
+	}
+
+	function resetMarquee() {
+		marqueeAnim.stop();
+		strip.x = 0;
+		root.sliding = false;
+		root.leftFadeEnabled = false;
+
+		if (root.marqueeEnabled && root.overflowing && root.visible) {
+			marqueeAnim.restart();
+		}
+	}
+
+	clip: true
+	implicitHeight: elideText.implicitHeight
+
+	Behavior on leftFadeStrength {
+		Anim {
+		}
+	}
+	Behavior on rightFadeStrength {
+		Anim {
+		}
+	}
+
+	onTextChanged: resetMarquee()
+	onVisibleChanged: if (!visible)
+		resetMarquee()
+	onWidthChanged: resetMarquee()
+
+	TextMetrics {
+		id: metrics
+
+		font: elideText.font
+		text: elideText.text
+	}
+
+	CustomText {
+		id: elideText
+
+		anchors.verticalCenter: parent.verticalCenter
+		animate: root.animate
+		animateProp: "scale,opacity"
+		color: root.color
+		elide: Text.ElideNone
+		visible: !root.overflowing
+		width: root.width
+	}
+
+	Item {
+		id: marqueeViewport
+
+		anchors.fill: parent
+		clip: true
+		layer.enabled: true
+		visible: root.overflowing
+
+		layer.effect: OpacityMask {
+			maskSource: rightFadeMask
+		}
+
+		Item {
+			id: strip
+
+			anchors.verticalCenter: parent.verticalCenter
+			height: t1.implicitHeight
+			width: t1.width + root.gap + t2.width
+			x: 0
+
+			CustomText {
+				id: t1
+
+				animate: root.animate
+				animateProp: "opacity"
+				color: root.color
+				text: elideText.text
+			}
+
+			CustomText {
+				id: t2
+
+				animate: root.animate
+				animateProp: "opacity"
+				color: root.color
+				text: t1.text
+				x: t1.width + root.gap
+			}
+		}
+
+		SequentialAnimation {
+			id: marqueeAnim
+
+			running: false
+
+			onFinished: pauseTimer.restart()
+
+			ScriptAction {
+				script: {
+					root.sliding = true;
+					root.leftFadeEnabled = true;
+				}
+			}
+
+			Anim {
+				duration: root.durationForDistance(t1.width)
+				easing.bezierCurve: Easing.Linear
+				easing.type: Easing.Linear
+				from: 0
+				property: "x"
+				target: strip
+				to: -t1.width
+			}
+
+			ScriptAction {
+				script: {
+					root.leftFadeEnabled = false;
+				}
+			}
+
+			Anim {
+				duration: root.durationForDistance(root.gap)
+				easing.bezierCurve: Easing.Linear
+				easing.type: Easing.Linear
+				from: -t1.width
+				property: "x"
+				target: strip
+				to: -(t1.width + root.gap)
+			}
+
+			ScriptAction {
+				script: {
+					root.sliding = false;
+					strip.x = 0;
+				}
+			}
+		}
+
+		Timer {
+			id: pauseTimer
+
+			interval: root.pauseMs
+			repeat: false
+			running: true
+
+			onTriggered: {
+				if (root.marqueeEnabled)
+					marqueeAnim.start();
+			}
+		}
+	}
+
+	Rectangle {
+		id: rightFadeMask
+
+		readonly property real fadeStartPos: {
+			const w = Math.max(1, width);
+			return Math.max(0, Math.min(1, (w - root.rightFadeWidth) / w));
+		}
+		readonly property real leftFadeEndPos: {
+			const w = Math.max(1, width);
+			return Math.max(0, Math.min(1, root.leftFadeWidth / w));
+		}
+
+		anchors.fill: marqueeViewport
+		layer.enabled: true
+		visible: false
+
+		gradient: Gradient {
+			orientation: Gradient.Horizontal
+
+			GradientStop {
+				color: Qt.rgba(1, 1, 1, 1.0 - root.leftFadeStrength)
+				position: 0.0
+			}
+
+			GradientStop {
+				color: Qt.rgba(1, 1, 1, 1.0)
+				position: rightFadeMask.leftFadeEndPos
+			}
+
+			GradientStop {
+				color: Qt.rgba(1, 1, 1, 1.0)
+				position: rightFadeMask.fadeStartPos
+			}
+
+			GradientStop {
+				color: Qt.rgba(1, 1, 1, 1.0 - root.rightFadeStrength)
+				position: 1.0
+			}
+		}
+	}
+}

Components/MaterialIcon.qml

@@ -5,7 +5,7 @@ CustomText {
 	property int grade: DynamicColors.light ? 0 : -25
 
 	font.family: "Material Symbols Rounded"
-    font.pointSize: 15
+	font.pointSize: Appearance.font.size.larger
 	font.variableAxes: ({
 			FILL: fill.toFixed(1),
 			GRAD: grade,

Components/Menu.qml

@@ -0,0 +1,115 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+Elevation {
+	id: root
+
+	property MenuItem active: items[0] ?? null
+	property bool expanded
+	property list<MenuItem> items
+
+	signal itemSelected(item: MenuItem)
+
+	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	implicitWidth: Math.max(200, column.implicitWidth)
+	level: 2
+	opacity: root.expanded ? 1 : 0
+	radius: Appearance.rounding.normal
+
+	Behavior on implicitHeight {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
+	Behavior on opacity {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+		}
+	}
+
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
+
+		ColumnLayout {
+			id: column
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
+
+			Repeater {
+				model: root.items
+
+				CustomRect {
+					id: item
+
+					readonly property bool active: modelData === root.active
+					required property int index
+					required property MenuItem modelData
+
+					Layout.fillWidth: true
+					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
+
+					CustomRect {
+						anchors.fill: parent
+						anchors.leftMargin: Appearance.padding.small
+						anchors.rightMargin: Appearance.padding.small
+						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						radius: Appearance.rounding.normal - Appearance.padding.small
+
+						StateLayer {
+							function onClicked(): void {
+								root.itemSelected(item.modelData);
+								root.active = item.modelData;
+								root.expanded = false;
+							}
+
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+						}
+					}
+
+					RowLayout {
+						id: menuOptionRow
+
+						anchors.fill: parent
+						anchors.margins: Appearance.padding.normal
+						spacing: Appearance.spacing.small
+
+						MaterialIcon {
+							Layout.alignment: Qt.AlignVCenter
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
+							text: item.modelData.icon
+						}
+
+						CustomText {
+							Layout.alignment: Qt.AlignVCenter
+							Layout.fillWidth: true
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							text: item.modelData.text
+						}
+
+						Loader {
+							Layout.alignment: Qt.AlignVCenter
+							active: item.modelData.trailingIcon.length > 0
+							visible: active
+
+							sourceComponent: MaterialIcon {
+								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.trailingIcon
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

Components/MenuItem.qml

@@ -0,0 +1,12 @@
+import QtQuick
+
+QtObject {
+	property string activeIcon: icon
+	property string activeText: text
+	property string icon
+	required property string text
+	property string trailingIcon
+	property var value
+
+	signal clicked
+}

Components/OpacityMask.qml

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

Components/PathMenu.qml

@@ -0,0 +1,76 @@
+import QtQuick
+
+Path {
+	id: root
+
+	required property real viewHeight
+	required property real viewWidth
+
+	startX: root.viewWidth / 2
+	startY: 0
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.25
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (1 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.45
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (2 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.70
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (3 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 1.00
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (4 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.70
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (5 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.45
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.25
+	}
+}

Components/PathViewMenu.qml

@@ -0,0 +1,180 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Config
+
+Elevation {
+	id: root
+
+	required property int currentIndex
+	property bool expanded
+	required property int from
+	property color insideTextColor: DynamicColors.palette.m3onPrimary
+	property int itemHeight
+	property int listHeight: 200
+	property color outsideTextColor: DynamicColors.palette.m3onSurfaceVariant
+	readonly property var spinnerModel: root.range(root.from, root.to)
+	required property int to
+	property Item triggerItem
+
+	signal itemSelected(item: int)
+
+	function range(first, last) {
+		let out = [];
+		for (let i = first; i <= last; ++i)
+			out.push(i);
+		return out;
+	}
+
+	implicitHeight: root.expanded ? view.implicitHeight : 0
+	level: root.expanded ? 2 : 0
+	radius: itemHeight / 2
+	visible: implicitHeight > 0
+	z: root.expanded ? 100 : 0
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+
+	onExpandedChanged: {
+		if (!root.expanded)
+			root.itemSelected(view.currentIndex + 1);
+	}
+
+	Component {
+		id: spinnerDelegate
+
+		Item {
+			id: wrapper
+
+			readonly property color delegateTextColor: wrapper.PathView.view ? wrapper.PathView.view.delegateTextColor : "white"
+			required property var modelData
+
+			height: root.itemHeight
+			opacity: wrapper.PathView.itemOpacity
+			visible: wrapper.PathView.onPath
+			width: wrapper.PathView.view ? wrapper.PathView.view.width : 0
+			z: wrapper.PathView.isCurrentItem ? 100 : Math.round(wrapper.PathView.itemScale * 100)
+
+			CustomText {
+				anchors.centerIn: parent
+				color: wrapper.delegateTextColor
+				font.pointSize: Appearance.font.size.large
+				text: wrapper.modelData
+			}
+		}
+	}
+
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
+		z: root.z
+
+		// Main visible spinner: normal/outside text color
+		PathView {
+			id: view
+
+			property color delegateTextColor: root.outsideTextColor
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			clip: true
+			currentIndex: root.currentIndex - 1
+			delegate: spinnerDelegate
+			dragMargin: width
+			highlightRangeMode: PathView.StrictlyEnforceRange
+			implicitHeight: root.listHeight
+			model: root.spinnerModel
+			pathItemCount: 7
+			preferredHighlightBegin: 0.5
+			preferredHighlightEnd: 0.5
+			snapMode: PathView.SnapToItem
+
+			path: PathMenu {
+				viewHeight: view.height
+				viewWidth: view.width
+			}
+		}
+
+		// The selection rectangle itself
+		CustomRect {
+			id: selectionRect
+
+			anchors.verticalCenter: parent.verticalCenter
+			color: DynamicColors.palette.m3primary
+			height: root.itemHeight
+			radius: root.itemHeight / 2
+			width: parent.width
+			z: 2
+		}
+
+		// Hidden source: same PathView, but with the "inside selection" text color
+		Item {
+			id: selectedTextSource
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			PathView {
+				id: selectedTextView
+
+				property color delegateTextColor: root.insideTextColor
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				clip: true
+				currentIndex: view.currentIndex
+				delegate: spinnerDelegate
+				dragMargin: view.dragMargin
+				highlightRangeMode: view.highlightRangeMode
+				implicitHeight: root.listHeight
+				interactive: false
+				model: view.model
+
+				// Keep this PathView visually locked to the real one
+				offset: view.offset
+				pathItemCount: view.pathItemCount
+				preferredHighlightBegin: view.preferredHighlightBegin
+				preferredHighlightEnd: view.preferredHighlightEnd
+				snapMode: view.snapMode
+
+				path: PathMenu {
+					viewHeight: selectedTextView.height
+					viewWidth: selectedTextView.width
+				}
+			}
+		}
+
+		// Mask matching the selection rectangle
+		Item {
+			id: selectionMask
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			CustomRect {
+				color: "white"
+				height: selectionRect.height
+				radius: selectionRect.radius
+				width: selectionRect.width
+				x: selectionRect.x
+				y: selectionRect.y
+			}
+		}
+
+		// Only show the "inside selection" text where the mask exists
+		MultiEffect {
+			anchors.fill: selectedTextSource
+			maskEnabled: true
+			maskInverted: false
+			maskSource: selectionMask
+			source: selectedTextSource
+			z: 3
+		}
+	}
+}

Components/SpinBoxRow.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+CustomRect {
+	id: root
+
+	required property string label
+	required property real max
+	required property real min
+	property var onValueModified: function (value) {}
+	property real step: 1
+	required property real value
+
+	Layout.fillWidth: true
+	color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+	radius: Appearance.rounding.normal
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.normal
+
+		CustomText {
+			Layout.fillWidth: true
+			text: root.label
+		}
+
+		CustomSpinBox {
+			max: root.max
+			min: root.min
+			step: root.step
+			value: root.value
+
+			onValueModified: value => {
+				root.onValueModified(value);
+			}
+		}
+	}
+}

Components/StateLayer.qml

@@ -1,12 +1,11 @@
 import qs.Config
-import qs.Modules
 import QtQuick
 
 MouseArea {
 	id: root
 
-    property bool disabled
 	property color color: DynamicColors.palette.m3onSurface
+	property bool disabled
 	property real radius: parent?.radius ?? 0
 	property alias rect: hoverLayer
 
@@ -14,11 +13,11 @@ MouseArea {
 	}
 
 	anchors.fill: parent
-
-    enabled: !disabled
 	cursorShape: disabled ? undefined : Qt.PointingHandCursor
+	enabled: !disabled
 	hoverEnabled: true
 
+	onClicked: event => !disabled && onClicked(event)
 	onPressed: event => {
 		if (disabled)
 			return;
@@ -32,40 +31,42 @@ MouseArea {
 		rippleAnim.restart();
 	}
 
-    onClicked: event => !disabled && onClicked(event)
-
 	SequentialAnimation {
 		id: rippleAnim
 
+		property real radius
 		property real x
 		property real y
-        property real radius
 
 		PropertyAction {
-            target: ripple
 			property: "x"
+			target: ripple
 			value: rippleAnim.x
 		}
+
 		PropertyAction {
-            target: ripple
 			property: "y"
+			target: ripple
 			value: rippleAnim.y
 		}
+
 		PropertyAction {
-            target: ripple
 			property: "opacity"
+			target: ripple
 			value: 0.08
 		}
+
 		Anim {
-            target: ripple
-            properties: "implicitWidth,implicitHeight"
-            from: 0
-            to: rippleAnim.radius * 2
 			easing.bezierCurve: MaterialEasing.standardDecel
-        }
-        Anim {
+			from: 0
+			properties: "implicitWidth,implicitHeight"
 			target: ripple
+			to: rippleAnim.radius * 2
+		}
+
+		Anim {
 			property: "opacity"
+			target: ripple
 			to: 0
 		}
 	}
@@ -75,17 +76,16 @@ MouseArea {
 
 		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
 
 		CustomRect {
 			id: ripple
 
-            radius: 1000
+			border.pixelAligned: false
 			color: root.color
 			opacity: 0
-			border.pixelAligned: false
+			radius: 1000
 
 			transform: Translate {
 				x: -ripple.width / 2

Components/Toast/ToastItem.qml

@@ -1,9 +1,7 @@
 import ZShell
 import QtQuick
 import QtQuick.Layouts
-import qs.Modules
 import qs.Components
-import qs.Helpers
 import qs.Config
 
 CustomRect {
@@ -13,20 +11,6 @@ CustomRect {
 
 	anchors.left: parent.left
 	anchors.right: parent.right
-    implicitHeight: layout.implicitHeight + Appearance.padding.smaller * 2
-
-    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;
-    }
-
-    border.width: 1
 	border.color: {
 		let colour = DynamicColors.palette.m3outlineVariant;
 		if (root.modelData.type === Toast.Success)
@@ -37,26 +21,42 @@ CustomRect {
 			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
+
+	Behavior on border.color {
+		CAnim {
+		}
+	}
 
 	Elevation {
 		anchors.fill: parent
-        radius: parent.radius
-        opacity: parent.opacity
-        z: -1
 		level: 3
+		opacity: parent.opacity
+		radius: parent.radius
+		z: -1
 	}
 
 	RowLayout {
 		id: layout
 
 		anchors.fill: parent
-        anchors.margins: Appearance.padding.smaller
 		anchors.leftMargin: Appearance.padding.normal
+		anchors.margins: Appearance.padding.smaller
 		anchors.rightMargin: Appearance.padding.normal
 		spacing: Appearance.spacing.normal
 
 		CustomRect {
-            radius: Appearance.rounding.normal
 			color: {
 				if (root.modelData.type === Toast.Success)
 					return DynamicColors.palette.m3success;
@@ -66,15 +66,14 @@ CustomRect {
 					return DynamicColors.palette.m3error;
 				return DynamicColors.palette.m3surfaceContainerHigh;
 			}
-
-            implicitWidth: implicitHeight
 			implicitHeight: icon.implicitHeight + Appearance.padding.smaller * 2
+			implicitWidth: implicitHeight
+			radius: Appearance.rounding.normal
 
 			MaterialIcon {
 				id: icon
 
 				anchors.centerIn: parent
-                text: root.modelData.icon
 				color: {
 					if (root.modelData.type === Toast.Success)
 						return DynamicColors.palette.m3onSuccess;
@@ -85,6 +84,7 @@ CustomRect {
 					return DynamicColors.palette.m3onSurfaceVariant;
 				}
 				font.pointSize: Math.round(Appearance.font.size.large * 1.2)
+				text: root.modelData.icon
 			}
 		}
 
@@ -96,7 +96,6 @@ CustomRect {
 				id: title
 
 				Layout.fillWidth: true
-                text: root.modelData.title
 				color: {
 					if (root.modelData.type === Toast.Success)
 						return DynamicColors.palette.m3onSuccessContainer;
@@ -106,14 +105,13 @@ CustomRect {
 						return DynamicColors.palette.m3onErrorContainer;
 					return DynamicColors.palette.m3onSurface;
 				}
-                font.pointSize: Appearance.font.size.normal
 				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.normal
+				text: root.modelData.title
 			}
 
 			CustomText {
 				Layout.fillWidth: true
-                textFormat: Text.StyledText
-                text: root.modelData.message
 				color: {
 					if (root.modelData.type === Toast.Success)
 						return DynamicColors.palette.m3onSuccessContainer;
@@ -123,13 +121,11 @@ CustomRect {
 						return DynamicColors.palette.m3onErrorContainer;
 					return DynamicColors.palette.m3onSurface;
 				}
-                opacity: 0.8
 				elide: Text.ElideRight
+				opacity: 0.8
+				text: root.modelData.message
+				textFormat: Text.StyledText
 			}
 		}
 	}
-
-    Behavior on border.color {
-        CAnim {}
-    }
 }

Components/Toast/Toasts.qml

@@ -1,19 +1,17 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import qs.Config
-import qs.Modules
 import ZShell
 import Quickshell
 import QtQuick
+import qs.Components
+import qs.Config
 
 Item {
 	id: root
 
-    readonly property int spacing: Appearance.spacing.small
 	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++) {
@@ -23,6 +21,7 @@ Item {
 		}
 		return h;
 	}
+	implicitWidth: Config.utilities.sizes.toastWidth - Appearance.padding.normal * 2
 
 	Repeater {
 		id: repeater
@@ -41,10 +40,12 @@ Item {
 				}
 				return toasts;
 			}
+
 			onValuesChanged: root.flagChanged()
 		}
 
-        ToastWrapper {}
+		ToastWrapper {
+		}
 	}
 
 	component ToastWrapper: MouseArea {
@@ -52,7 +53,6 @@ Item {
 
 		required property int index
 		required property Toast modelData
-
 		readonly property bool previewHidden: {
 			let extraHidden = 0;
 			for (let i = 0; i < index; i++)
@@ -61,14 +61,8 @@ Item {
 			return index >= Config.utilities.maxToasts + extraHidden;
 		}
 
-        onPreviewHiddenChanged: {
-            if (initAnim.running && previewHidden)
-                initAnim.stop();
-        }
-
-        opacity: modelData.closed || previewHidden ? 0 : 1
-        scale: modelData.closed || previewHidden ? 0.7 : 1
-
+		acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
+		anchors.bottom: parent.bottom
 		anchors.bottomMargin: {
 			root.flag; // Force update
 			let y = 0;
@@ -79,43 +73,62 @@ Item {
 			}
 			return y;
 		}
-
 		anchors.left: parent.left
 		anchors.right: parent.right
-        anchors.bottom: parent.bottom
 		implicitHeight: toastInner.implicitHeight
+		opacity: modelData.closed || previewHidden ? 0 : 1
+		scale: modelData.closed || previewHidden ? 0.7 : 1
 
-        acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
-        onClicked: modelData.close()
+		Behavior on anchors.bottomMargin {
+			Anim {
+				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			}
+		}
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
+			}
+		}
 
 		Component.onCompleted: modelData.lock(this)
+		onClicked: modelData.close()
+		onPreviewHiddenChanged: {
+			if (initAnim.running && previewHidden)
+				initAnim.stop();
+		}
 
 		Anim {
 			id: initAnim
 
-            Component.onCompleted: running = !toast.previewHidden
-
-            target: toast
-            properties: "opacity,scale"
-            from: 0
-            to: 1
 			duration: Appearance.anim.durations.expressiveDefaultSpatial
 			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			from: 0
+			properties: "opacity,scale"
+			target: toast
+			to: 1
+
+			Component.onCompleted: running = !toast.previewHidden
 		}
 
 		ParallelAnimation {
 			running: toast.modelData.closed
-            onStarted: toast.anchors.bottomMargin = toast.anchors.bottomMargin
+
 			onFinished: toast.modelData.unlock(toast)
+			onStarted: toast.anchors.bottomMargin = toast.anchors.bottomMargin
 
 			Anim {
-                target: toast
 				property: "opacity"
+				target: toast
 				to: 0
 			}
+
 			Anim {
-                target: toast
 				property: "scale"
+				target: toast
 				to: 0.7
 			}
 		}
@@ -125,20 +138,5 @@ Item {
 
 			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
-            }
-        }
 	}
 }

Config/AccentColor.qml

@@ -1,7 +1,8 @@
 import Quickshell.Io
 
 JsonObject {
-    property Accents accents: Accents {}
+	property Accents accents: Accents {
+	}
 
 	component Accents: JsonObject {
 		property string primary: "#4080ff"

Config/Appearance.qml

@@ -3,12 +3,12 @@ pragma Singleton
 import Quickshell
 
 Singleton {
+	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	readonly property AppearanceConf.FontStuff font: Config.appearance.font
+	readonly property AppearanceConf.Padding padding: Config.appearance.padding
 	// Literally just here to shorten accessing stuff :woe:
 	// Also kinda so I can keep accessing it with `Appearance.xxx` instead of `Conf.appearance.xxx`
 	readonly property AppearanceConf.Rounding rounding: Config.appearance.rounding
 	readonly property AppearanceConf.Spacing spacing: Config.appearance.spacing
-    readonly property AppearanceConf.Padding padding: Config.appearance.padding
-    readonly property AppearanceConf.FontStuff font: Config.appearance.font
-    readonly property AppearanceConf.Anim anim: Config.appearance.anim
 	readonly property AppearanceConf.Transparency transparency: Config.appearance.transparency
 }

Config/AppearanceConf.qml

@@ -1,94 +1,97 @@
 import Quickshell.Io
 
 JsonObject {
-    property Rounding rounding: Rounding {}
-    property Spacing spacing: Spacing {}
-    property Padding padding: Padding {}
-    property FontStuff font: FontStuff {}
-    property Anim anim: Anim {}
-    property Transparency transparency: Transparency {}
-
-    component Rounding: JsonObject {
-        property real scale: 1
-        property int small: 12 * scale
-        property int normal: 17 * scale
-        property int large: 25 * scale
-        property int full: 1000 * scale
+	property Anim anim: Anim {
+	}
+	property FontStuff font: FontStuff {
+	}
+	property Padding padding: Padding {
+	}
+	property Rounding rounding: Rounding {
+	}
+	property Spacing spacing: Spacing {
+	}
+	property Transparency transparency: Transparency {
 	}
 
-    component Spacing: JsonObject {
-        property real scale: 1
-        property int small: 7 * scale
-        property int smaller: 10 * scale
-        property int normal: 12 * scale
-        property int larger: 15 * scale
-        property int large: 20 * scale
+	component Anim: JsonObject {
+		property AnimCurves curves: AnimCurves {
 		}
-
-    component Padding: JsonObject {
-        property real scale: 1
-        property int small: 5 * scale
-        property int smaller: 7 * scale
-        property int normal: 10 * scale
-        property int larger: 12 * scale
-        property int large: 15 * scale
+		property AnimDurations durations: AnimDurations {
 		}
-
-    component FontFamily: JsonObject {
-        property string sans: "Segoe UI Variable Text"
-        property string mono: "CaskaydiaCove NF"
-        property string material: "Material Symbols Rounded"
-        property string clock: "Rubik"
+		property real mediaGifSpeedAdjustment: 300
+		property real sessionGifSpeed: 0.7
 	}
-
-    component FontSize: JsonObject {
-        property real scale: 1
-        property int small: 11 * scale
-        property int smaller: 12 * scale
-        property int normal: 13 * scale
-        property int larger: 15 * scale
-        property int large: 18 * scale
-        property int extraLarge: 28 * scale
-    }
-
-    component FontStuff: JsonObject {
-        property FontFamily family: FontFamily {}
-        property FontSize size: FontSize {}
-    }
-
 	component AnimCurves: JsonObject {
 		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
 		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
 		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
+		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
 		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
 		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
 		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-        property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-        property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-        property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
 	}
-
 	component AnimDurations: JsonObject {
-        property real scale: 1
-        property int small: 200 * scale
-        property int normal: 400 * scale
-        property int large: 600 * scale
-        property int extraLarge: 1000 * scale
-        property int expressiveFastSpatial: 350 * scale
 		property int expressiveDefaultSpatial: 500 * scale
 		property int expressiveEffects: 200 * scale
+		property int expressiveFastSpatial: 350 * scale
+		property int extraLarge: 1000 * scale
+		property int large: 600 * scale
+		property int normal: 400 * scale
+		property real scale: 1
+		property int small: 200 * scale
 	}
-
-    component Anim: JsonObject {
-        property real mediaGifSpeedAdjustment: 300
-        property real sessionGifSpeed: 0.7
-        property AnimCurves curves: AnimCurves {}
-        property AnimDurations durations: AnimDurations {}
+	component FontFamily: JsonObject {
+		property string clock: "Rubik"
+		property string material: "Material Symbols Rounded"
+		property string mono: "CaskaydiaCove NF"
+		property string sans: "Segoe UI Variable Text"
+	}
+	component FontSize: JsonObject {
+		property int extraLarge: 28 * scale
+		property int large: 18 * scale
+		property int larger: 15 * scale
+		property int normal: 13 * scale
+		property real scale: 1
+		property int small: 11 * scale
+		property int smaller: 12 * scale
+	}
+	component FontStuff: JsonObject {
+		property FontFamily family: FontFamily {
+		}
+		property FontSize size: FontSize {
+		}
+	}
+	component Padding: JsonObject {
+		property int large: 15 * scale
+		property int larger: 12 * scale
+		property int normal: 10 * scale
+		property real scale: 1
+		property int small: 5 * scale
+		property int smaller: 7 * scale
+		property int smallest: 2 * scale
+	}
+	component Rounding: JsonObject {
+		property int full: 1000 * scale
+		property int large: 25 * scale
+		property int normal: 17 * scale
+		property real scale: 1
+		property int small: 12 * scale
+		property int smallest: 8 * scale
+	}
+	component Spacing: JsonObject {
+		property int large: 20 * scale
+		property int larger: 15 * scale
+		property int normal: 12 * scale
+		property real scale: 1
+		property int small: 7 * scale
+		property int smaller: 10 * scale
 	}
-
 	component Transparency: JsonObject {
-        property bool enabled: false
 		property real base: 0.85
+		property bool enabled: false
 		property real layers: 0.4
 	}
 }

Config/BackgroundConfig.qml

@@ -2,6 +2,6 @@ import Quickshell.Io
 import qs.Config
 
 JsonObject {
-    property int wallFadeDuration: MaterialEasing.standardTime
 	property bool enabled: true
+	property int wallFadeDuration: MaterialEasing.standardTime
 }

Config/BarConfig.qml

@@ -2,9 +2,7 @@ import Quickshell.Io
 
 JsonObject {
 	property bool autoHide: false
-	property int rounding: 8
-	property Popouts popouts: Popouts {}
-
+	property int border: 8
 	property list<var> entries: [
 		{
 			id: "workspaces",
@@ -14,6 +12,10 @@ JsonObject {
 			id: "audio",
 			enabled: true
 		},
+		{
+			id: "media",
+			enabled: true
+		},
 		{
 			id: "resources",
 			enabled: true
@@ -38,6 +40,10 @@ JsonObject {
 			id: "spacer",
 			enabled: true
 		},
+		{
+			id: "hyprsunset",
+			enabled: true
+		},
 		{
 			id: "tray",
 			enabled: true
@@ -59,14 +65,18 @@ JsonObject {
 			enabled: true
 		},
 	]
+	property int height: 34
+	property Popouts popouts: Popouts {
+	}
+	property int rounding: 8
 
 	component Popouts: JsonObject {
-		property bool tray: true
-		property bool audio: true
 		property bool activeWindow: true
-		property bool resources: true
+		property bool audio: true
 		property bool clock: true
 		property bool network: true
+		property bool resources: true
+		property bool tray: true
 		property bool upower: true
 	}
 }

Config/Config.qml

@@ -4,27 +4,28 @@ import Quickshell
 import Quickshell.Io
 import ZShell
 import QtQuick
-import qs.Modules as Modules
 import qs.Helpers
 import qs.Paths
 
 Singleton {
 	id: root
 
+	property alias appearance: adapter.appearance
 	property alias background: adapter.background
 	property alias barConfig: adapter.barConfig
+	property alias colors: adapter.colors
+	property alias dashboard: adapter.dashboard
+	property alias dock: adapter.dock
+	property alias general: adapter.general
+	property alias launcher: adapter.launcher
 	property alias lock: adapter.lock
-	property alias overview: adapter.overview
-	property alias services: adapter.services
 	property alias notifs: adapter.notifs
+	property alias osd: adapter.osd
+	property alias overview: adapter.overview
+	property bool recentlySaved: false
+	property alias services: adapter.services
 	property alias sidebar: adapter.sidebar
 	property alias utilities: adapter.utilities
-	property alias general: adapter.general
-	property alias dashboard: adapter.dashboard
-	property alias appearance: adapter.appearance
-	property alias osd: adapter.osd
-	property alias launcher: adapter.launcher
-	property alias colors: adapter.colors
 
 	function save(): void {
 		saveTimer.restart();
@@ -32,42 +33,77 @@ Singleton {
 		recentSaveCooldown.restart();
 	}
 
-	property bool recentlySaved: false
-
-	ElapsedTimer {
-		id: timer
+	function saveNoToast(): void {
+		saveTimer.restart();
 	}
 
-	Timer {
-		id: saveTimer
-
-		interval: 500
-		onTriggered: {
-			timer.restart();
-			try {
-				let config = {};
-				try {
-					config = JSON.parse(fileView.text());
-				} catch (e) {
-					config = {};
+	function serializeAppearance(): var {
+		return {
+			rounding: {
+				scale: appearance.rounding.scale
+			},
+			spacing: {
+				scale: appearance.spacing.scale
+			},
+			padding: {
+				scale: appearance.padding.scale
+			},
+			font: {
+				family: {
+					sans: appearance.font.family.sans,
+					mono: appearance.font.family.mono,
+					material: appearance.font.family.material,
+					clock: appearance.font.family.clock
+				},
+				size: {
+					scale: appearance.font.size.scale
+				}
+			},
+			anim: {
+				mediaGifSpeedAdjustment: appearance.anim.mediaGifSpeedAdjustment,
+				sessionGifSpeed: appearance.anim.sessionGifSpeed,
+				durations: {
+					scale: appearance.anim.durations.scale
+				}
+			},
+			transparency: {
+				enabled: appearance.transparency.enabled,
+				base: appearance.transparency.base,
+				layers: appearance.transparency.layers
+			}
+		};
 	}
 
-				config = root.serializeConfig();
-
-				fileView.setText(JSON.stringify(config, null, 4));
-			} catch (e) {
-				Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
-			}
-		}
+	function serializeBackground(): var {
+		return {
+			wallFadeDuration: background.wallFadeDuration,
+			enabled: background.enabled
+		};
 	}
 
-	Timer {
-		id: recentSaveCooldown
-
-		interval: 2000
-		onTriggered: {
-			root.recentlySaved = false;
+	function serializeBar(): var {
+		return {
+			autoHide: barConfig.autoHide,
+			rounding: barConfig.rounding,
+			border: barConfig.border,
+			height: barConfig.height,
+			popouts: {
+				tray: barConfig.popouts.tray,
+				audio: barConfig.popouts.audio,
+				activeWindow: barConfig.popouts.activeWindow,
+				resources: barConfig.popouts.resources,
+				clock: barConfig.popouts.clock,
+				network: barConfig.popouts.network,
+				upower: barConfig.popouts.upower
+			},
+			entries: barConfig.entries
+		};
 	}
+
+	function serializeColors(): var {
+		return {
+			schemeType: colors.schemeType
+		};
 	}
 
 	function serializeConfig(): var {
@@ -84,25 +120,105 @@ Singleton {
 			osd: serializeOsd(),
 			background: serializeBackground(),
 			launcher: serializeLauncher(),
-			colors: serializeColors()
-		}
+			colors: serializeColors(),
+			dock: serializeDock()
+		};
 	}
 
-	function serializeBar(): var {
+	function serializeDashboard(): var {
 		return {
-			autoHide: barConfig.autoHide,
-			rounding: barConfig.rounding,
-			popouts: {
-				tray: barConfig.popouts.tray,
-				audio: barConfig.popouts.audio,
-				activeWindow: barConfig.popouts.activeWindow,
-				resources: barConfig.popouts.resources,
-				clock: barConfig.popouts.clock,
-				network: barConfig.popouts.network,
-				upower: barConfig.popouts.upower
+			enabled: dashboard.enabled,
+			mediaUpdateInterval: dashboard.mediaUpdateInterval,
+			resourceUpdateInterval: dashboard.resourceUpdateInterval,
+			dragThreshold: dashboard.dragThreshold,
+			performance: {
+				showBattery: dashboard.performance.showBattery,
+				showGpu: dashboard.performance.showGpu,
+				showCpu: dashboard.performance.showCpu,
+				showMemory: dashboard.performance.showMemory,
+				showStorage: dashboard.performance.showStorage,
+				showNetwork: dashboard.performance.showNetwork
 			},
-			entries: barConfig.entries
+			sizes: {
+				tabIndicatorHeight: dashboard.sizes.tabIndicatorHeight,
+				tabIndicatorSpacing: dashboard.sizes.tabIndicatorSpacing,
+				infoWidth: dashboard.sizes.infoWidth,
+				infoIconSize: dashboard.sizes.infoIconSize,
+				dateTimeWidth: dashboard.sizes.dateTimeWidth,
+				mediaWidth: dashboard.sizes.mediaWidth,
+				mediaProgressSweep: dashboard.sizes.mediaProgressSweep,
+				mediaProgressThickness: dashboard.sizes.mediaProgressThickness,
+				resourceProgessThickness: dashboard.sizes.resourceProgessThickness,
+				weatherWidth: dashboard.sizes.weatherWidth,
+				mediaCoverArtSize: dashboard.sizes.mediaCoverArtSize,
+				mediaVisualiserSize: dashboard.sizes.mediaVisualiserSize,
+				resourceSize: dashboard.sizes.resourceSize
 			}
+		};
+	}
+
+	function serializeDock(): var {
+		return {
+			enable: dock.enable,
+			height: dock.height,
+			hoverToReveal: dock.hoverToReveal,
+			pinnedApps: dock.pinnedApps,
+			pinnedOnStartup: dock.pinnedOnStartup,
+			ignoredAppRegexes: dock.ignoredAppRegexes
+		};
+	}
+
+	function serializeGeneral(): var {
+		return {
+			logo: general.logo,
+			wallpaperPath: general.wallpaperPath,
+			desktopIcons: general.desktopIcons,
+			color: {
+				mode: general.color.mode,
+				smart: general.color.smart,
+				scheduleDark: general.color.scheduleDark,
+				scheduleHyprsunset: general.color.scheduleHyprsunset,
+				scheduleHyprsunsetStart: general.color.scheduleHyprsunsetStart,
+				hyprsunsetTemp: general.color.hyprsunsetTemp,
+				scheduleHyprsunsetEnd: general.color.scheduleHyprsunsetEnd,
+				schemeGeneration: general.color.schemeGeneration,
+				scheduleDarkStart: general.color.scheduleDarkStart,
+				scheduleDarkEnd: general.color.scheduleDarkEnd,
+				neovimColors: general.color.neovimColors
+			},
+			apps: {
+				terminal: general.apps.terminal,
+				audio: general.apps.audio,
+				playback: general.apps.playback,
+				explorer: general.apps.explorer
+			},
+			idle: {
+				timeouts: general.idle.timeouts
+			}
+		};
+	}
+
+	function serializeLauncher(): var {
+		return {
+			maxAppsShown: launcher.maxAppsShown,
+			maxWallpapers: launcher.maxWallpapers,
+			actionPrefix: launcher.actionPrefix,
+			specialPrefix: launcher.specialPrefix,
+			useFuzzy: {
+				apps: launcher.useFuzzy.apps,
+				actions: launcher.useFuzzy.actions,
+				schemes: launcher.useFuzzy.schemes,
+				variants: launcher.useFuzzy.variants,
+				wallpapers: launcher.useFuzzy.wallpapers
+			},
+			sizes: {
+				itemWidth: launcher.sizes.itemWidth,
+				itemHeight: launcher.sizes.itemHeight,
+				wallpaperWidth: launcher.sizes.wallpaperWidth,
+				wallpaperHeight: launcher.sizes.wallpaperHeight
+			},
+			actions: launcher.actions
+		};
 	}
 
 	function serializeLock(): var {
@@ -119,48 +235,11 @@ Singleton {
 		};
 	}
 
-	function serializeGeneral(): var {
-		return {
-			logo: general.logo,
-			wallpaperPath: general.wallpaperPath,
-			color: {
-				wallust: general.color.wallust,
-				mode: general.color.mode,
-				schemeGeneration: general.color.schemeGeneration,
-				scheduleDarkStart: general.color.scheduleDarkStart,
-				scheduleDarkEnd: general.color.scheduleDarkEnd,
-				neovimColors: general.color.neovimColors
-			},
-			apps: {
-				terminal: general.apps.terminal,
-				audio: general.apps.audio,
-				playback: general.apps.playback,
-				explorer: general.apps.explorer,
-			},
-			idle: {
-				timouts: general.idle.timeouts
-			}
-		}
-	}
-
-    function serializeServices(): var {
-        return {
-            weatherLocation: services.weatherLocation,
-            useFahrenheit: services.useFahrenheit,
-            useTwelveHourClock: services.useTwelveHourClock,
-            gpuType: services.gpuType,
-            audioIncrement: services.audioIncrement,
-            brightnessIncrement: services.brightnessIncrement,
-            maxVolume: services.maxVolume,
-            defaultPlayer: services.defaultPlayer,
-            playerAliases: services.playerAliases
-        };
-    }
-
 	function serializeNotifs(): var {
 		return {
 			expire: notifs.expire,
 			defaultExpireTimeout: notifs.defaultExpireTimeout,
+			appNotifCooldown: notifs.appNotifCooldown,
 			clearThreshold: notifs.clearThreshold,
 			expandThreshold: notifs.expandThreshold,
 			actionOnClick: notifs.actionOnClick,
@@ -173,6 +252,36 @@ Singleton {
 		};
 	}
 
+	function serializeOsd(): var {
+		return {
+			enabled: osd.enabled,
+			hideDelay: osd.hideDelay,
+			enableBrightness: osd.enableBrightness,
+			enableMicrophone: osd.enableMicrophone,
+			allMonBrightness: osd.allMonBrightness,
+			sizes: {
+				sliderWidth: osd.sizes.sliderWidth,
+				sliderHeight: osd.sizes.sliderHeight
+			}
+		};
+	}
+
+	function serializeServices(): var {
+		return {
+			weatherLocation: services.weatherLocation,
+			useFahrenheit: services.useFahrenheit,
+			ddcutilService: services.ddcutilService,
+			useTwelveHourClock: services.useTwelveHourClock,
+			gpuType: services.gpuType,
+			audioIncrement: services.audioIncrement,
+			brightnessIncrement: services.brightnessIncrement,
+			maxVolume: services.maxVolume,
+			defaultPlayer: services.defaultPlayer,
+			playerAliases: services.playerAliases,
+			visualizerBars: services.visualizerBars
+		};
+	}
+
 	function serializeSidebar(): var {
 		return {
 			enabled: sidebar.enabled,
@@ -210,113 +319,42 @@ Singleton {
 		};
 	}
 
-    function serializeDashboard(): var {
-        return {
-            enabled: dashboard.enabled,
-            mediaUpdateInterval: dashboard.mediaUpdateInterval,
-            dragThreshold: dashboard.dragThreshold,
-            sizes: {
-                tabIndicatorHeight: dashboard.sizes.tabIndicatorHeight,
-                tabIndicatorSpacing: dashboard.sizes.tabIndicatorSpacing,
-                infoWidth: dashboard.sizes.infoWidth,
-                infoIconSize: dashboard.sizes.infoIconSize,
-                dateTimeWidth: dashboard.sizes.dateTimeWidth,
-                mediaWidth: dashboard.sizes.mediaWidth,
-                mediaProgressSweep: dashboard.sizes.mediaProgressSweep,
-                mediaProgressThickness: dashboard.sizes.mediaProgressThickness,
-                resourceProgessThickness: dashboard.sizes.resourceProgessThickness,
-                weatherWidth: dashboard.sizes.weatherWidth,
-                mediaCoverArtSize: dashboard.sizes.mediaCoverArtSize,
-                mediaVisualiserSize: dashboard.sizes.mediaVisualiserSize,
-                resourceSize: dashboard.sizes.resourceSize
-            }
-        };
+	ElapsedTimer {
+		id: timer
+
 	}
 
-    function serializeOsd(): var {
-        return {
-            enabled: osd.enabled,
-            hideDelay: osd.hideDelay,
-            enableBrightness: osd.enableBrightness,
-            enableMicrophone: osd.enableMicrophone,
-			allMonBrightness: osd.allMonBrightness,
-            sizes: {
-                sliderWidth: osd.sizes.sliderWidth,
-                sliderHeight: osd.sizes.sliderHeight
-            }
-        };
+	Timer {
+		id: saveTimer
+
+		interval: 500
+
+		onTriggered: {
+			timer.restart();
+			try {
+				let config = {};
+				try {
+					config = JSON.parse(fileView.text());
+				} catch (e) {
+					config = {};
 				}
 
-	function serializeLauncher(): var {
-		return {
-			maxAppsShown: launcher.maxAppsShown,
-			maxWallpapers: launcher.maxWallpapers,
-			actionPrefix: launcher.actionPrefix,
-			specialPrefix: launcher.specialPrefix,
-            useFuzzy: {
-                apps: launcher.useFuzzy.apps,
-                actions: launcher.useFuzzy.actions,
-                schemes: launcher.useFuzzy.schemes,
-                variants: launcher.useFuzzy.variants,
-                wallpapers: launcher.useFuzzy.wallpapers
-            },
-			sizes: {
-				itemWidth: launcher.sizes.itemWidth,
-				itemHeight: launcher.sizes.itemHeight,
-				wallpaperWidth: launcher.sizes.wallpaperWidth,
-				wallpaperHeight: launcher.sizes.wallpaperHeight
-			},
-			actions: launcher.actions
+				config = root.serializeConfig();
+
+				fileView.setText(JSON.stringify(config, null, 4));
+			} catch (e) {
+				Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
+			}
 		}
 	}
 
-	function serializeBackground(): var {
-		return {
-			wallFadeDuration: background.wallFadeDuration,
-			enabled: background.enabled
-		}
-	}
+	Timer {
+		id: recentSaveCooldown
 
-    function serializeAppearance(): var {
-        return {
-            rounding: {
-                scale: appearance.rounding.scale
-            },
-            spacing: {
-                scale: appearance.spacing.scale
-            },
-            padding: {
-                scale: appearance.padding.scale
-            },
-            font: {
-                family: {
-                    sans: appearance.font.family.sans,
-                    mono: appearance.font.family.mono,
-                    material: appearance.font.family.material,
-                    clock: appearance.font.family.clock
-                },
-                size: {
-                    scale: appearance.font.size.scale
-                }
-            },
-            anim: {
-                mediaGifSpeedAdjustment: 300,
-                sessionGifSpeed: 0.7,
-                durations: {
-                    scale: appearance.anim.durations.scale
-                }
-            },
-            transparency: {
-                enabled: appearance.transparency.enabled,
-                base: appearance.transparency.base,
-                layers: appearance.transparency.layers
-            }
-        };
-    }
+		interval: 2000
 
-	function serializeColors(): var {
-		return {
-			schemeType: colors.schemeType,
+		onTriggered: {
+			root.recentlySaved = false;
 		}
 	}
 
@@ -324,7 +362,6 @@ Singleton {
 		id: fileView
 
 		path: `${Paths.config}/config.json`
-
 		watchChanges: true
 
 		onFileChanged: {
@@ -335,9 +372,13 @@ Singleton {
 				reload();
 			}
 		}
-
+		onLoadFailed: err => {
+			if (err !== FileViewError.FileNotFound)
+				Toaster.toast(qsTr("Failed to read config"), FileViewError.toString(err), "settings_alert", Toast.Warning);
+		}
 		onLoaded: {
 			ModeScheduler.checkStartup();
+			Hyprsunset.checkStartup();
 			try {
 				JSON.parse(text());
 				const elapsed = timer.elapsedMs();
@@ -351,30 +392,41 @@ Singleton {
 				Toaster.toast(qsTr("Failed to load config"), e.message, "settings_alert", Toast.Error);
 			}
 		}
-
-		onLoadFailed: err => {
-			if ( err !== FileViewError.FileNotFound )
-				Toaster.toast(qsTr("Failed to read config"), FileViewError.toString(err), "settings_alert", Toast.Warning);
-		}
-
 		onSaveFailed: err => Toaster.toast(qsTr("Failed to save config"), FileViewError.toString(err), "settings_alert", Toast.Error)
 
 		JsonAdapter {
 			id: adapter
-            property BackgroundConfig background: BackgroundConfig {}
-            property BarConfig barConfig: BarConfig {}
-            property LockConf lock: LockConf {}
-			property Overview overview: Overview {}
-			property Services services: Services {}
-			property NotifConfig notifs: NotifConfig {}
-			property SidebarConfig sidebar: SidebarConfig {}
-			property UtilConfig utilities: UtilConfig {}
-			property General general: General {}
-			property DashboardConfig dashboard: DashboardConfig {}
-			property AppearanceConf appearance: AppearanceConf {}
-			property Osd osd: Osd {}
-			property Launcher launcher: Launcher {}
-			property Colors colors: Colors {}
+
+			property AppearanceConf appearance: AppearanceConf {
+			}
+			property BackgroundConfig background: BackgroundConfig {
+			}
+			property BarConfig barConfig: BarConfig {
+			}
+			property Colors colors: Colors {
+			}
+			property DashboardConfig dashboard: DashboardConfig {
+			}
+			property DockConfig dock: DockConfig {
+			}
+			property General general: General {
+			}
+			property Launcher launcher: Launcher {
+			}
+			property LockConf lock: LockConf {
+			}
+			property NotifConfig notifs: NotifConfig {
+			}
+			property Osd osd: Osd {
+			}
+			property Overview overview: Overview {
+			}
+			property Services services: Services {
+			}
+			property SidebarConfig sidebar: SidebarConfig {
+			}
+			property UtilConfig utilities: UtilConfig {
+			}
 		}
 	}
 }

Config/DashboardConfig.qml

@@ -1,24 +1,36 @@
 import Quickshell.Io
 
 JsonObject {
+	property int dragThreshold: 50
 	property bool enabled: true
 	property int mediaUpdateInterval: 500
-    property int dragThreshold: 50
-    property Sizes sizes: Sizes {}
+	property Performance performance: Performance {
+	}
+	property int resourceUpdateInterval: 1000
+	property Sizes sizes: Sizes {
+	}
 
+	component Performance: JsonObject {
+		property bool showBattery: true
+		property bool showCpu: true
+		property bool showGpu: true
+		property bool showMemory: true
+		property bool showNetwork: true
+		property bool showStorage: true
+	}
 	component Sizes: JsonObject {
-        readonly property int tabIndicatorHeight: 3
-        readonly property int tabIndicatorSpacing: 5
-        readonly property int infoWidth: 200
-        readonly property int infoIconSize: 25
 		readonly property int dateTimeWidth: 110
-        readonly property int mediaWidth: 200
+		readonly property int infoIconSize: 25
+		readonly property int infoWidth: 200
+		readonly property int mediaCoverArtSize: 150
 		readonly property int mediaProgressSweep: 180
 		readonly property int mediaProgressThickness: 8
-        readonly property int resourceProgessThickness: 10
-        readonly property int weatherWidth: 250
-        readonly property int mediaCoverArtSize: 150
 		readonly property int mediaVisualiserSize: 80
+		readonly property int mediaWidth: 200
+		readonly property int resourceProgessThickness: 10
 		readonly property int resourceSize: 200
+		readonly property int tabIndicatorHeight: 3
+		readonly property int tabIndicatorSpacing: 5
+		readonly property int weatherWidth: 250
 	}
 }

Config/DockConfig.qml

@@ -0,0 +1,10 @@
+import Quickshell.Io
+
+JsonObject {
+	property bool enable: false
+	property real height: 60
+	property bool hoverToReveal: true
+	property list<string> ignoredAppRegexes: []
+	property list<string> pinnedApps: ["org.kde.dolphin", "kitty",]
+	property bool pinnedOnStartup: false
+}

Config/DynamicColors.qml

@@ -11,24 +11,22 @@ import qs.Paths
 Singleton {
 	id: root
 
-    property bool showPreview
-    property string scheme
+	readonly property M3Palette current: M3Palette {
+	}
+	property bool currentLight
 	property string flavour
 	readonly property bool light: showPreview ? previewLight : currentLight
-    property bool currentLight
-    property bool previewLight
 	readonly property M3Palette palette: showPreview ? preview : current
-    readonly property M3TPalette tPalette: M3TPalette {}
-    readonly property M3Palette current: M3Palette {}
-    readonly property M3Palette preview: M3Palette {}
-    readonly property Transparency transparency: Transparency {}
-    readonly property alias wallLuminance: analyser.luminance
-
-    function getLuminance(c: color): real {
-        if (c.r == 0 && c.g == 0 && c.b == 0)
-            return 0;
-        return Math.sqrt(0.299 * (c.r ** 2) + 0.587 * (c.g ** 2) + 0.114 * (c.b ** 2));
+	readonly property M3Palette preview: M3Palette {
 	}
+	property bool previewLight
+	property string scheme
+	property bool showPreview
+	readonly property M3TPalette tPalette: M3TPalette {
+	}
+	readonly property Transparency transparency: Transparency {
+	}
+	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
 		const luminance = getLuminance(c);
@@ -42,6 +40,12 @@ Singleton {
 		return Qt.rgba(r, g, b, a);
 	}
 
+	function getLuminance(c: color): real {
+		if (c.r == 0 && c.g == 0 && c.b == 0)
+			return 0;
+		return Math.sqrt(0.299 * (c.r ** 2) + 0.587 * (c.g ** 2) + 0.114 * (c.b ** 2));
+	}
+
 	function layer(c: color, layer: var): color {
 		if (!transparency.enabled)
 			return c;
@@ -49,12 +53,6 @@ Singleton {
 		return layer === 0 ? Qt.alpha(c, transparency.base) : alterColor(c, transparency.layers, layer ?? 1);
 	}
 
-    function on(c: color): color {
-        if (c.hslLightness < 0.5)
-            return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1);
-        return Qt.hsla(c.hslHue, c.hslSaturation, 0.1, 1);
-    }
-
 	function load(data: string, isPreview: bool): void {
 		const colors = isPreview ? preview : current;
 		const scheme = JSON.parse(data);
@@ -74,9 +72,22 @@ Singleton {
 		}
 	}
 
+	function on(c: color): color {
+		if (c.hslLightness < 0.5)
+			return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1);
+		return Qt.hsla(c.hslHue, c.hslSaturation, 0.1, 1);
+	}
+
+	function setMode(mode: string): void {
+		Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", mode]);
+		Config.general.color.mode = mode;
+		Config.save();
+	}
+
 	FileView {
 		path: `${Paths.state}/scheme.json`
 		watchChanges: true
+
 		onFileChanged: reload()
 		onLoaded: root.load(text(), false)
 	}
@@ -87,192 +98,189 @@ Singleton {
 		source: WallpaperPath.currentWallpaperPath
 	}
 
-    component Transparency: QtObject {
-        readonly property bool enabled: Appearance.transparency.enabled
-        readonly property real base: Appearance.transparency.base - (root.light ? 0.1 : 0)
-        readonly property real layers: Appearance.transparency.layers
-    }
-
-    component M3TPalette: QtObject {
-        readonly property color m3primary_paletteKeyColor: root.layer(root.palette.m3primary_paletteKeyColor)
-        readonly property color m3secondary_paletteKeyColor: root.layer(root.palette.m3secondary_paletteKeyColor)
-        readonly property color m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
-        readonly property color m3neutral_paletteKeyColor: root.layer(root.palette.m3neutral_paletteKeyColor)
-        readonly property color m3neutral_variant_paletteKeyColor: root.layer(root.palette.m3neutral_variant_paletteKeyColor)
-        readonly property color m3background: root.layer(root.palette.m3background, 0)
-        readonly property color m3onBackground: root.layer(root.palette.m3onBackground)
-        readonly property color m3surface: root.layer(root.palette.m3surface, 0)
-        readonly property color m3surfaceDim: root.layer(root.palette.m3surfaceDim, 0)
-        readonly property color m3surfaceBright: root.layer(root.palette.m3surfaceBright, 0)
-        readonly property color m3surfaceContainerLowest: root.layer(root.palette.m3surfaceContainerLowest)
-        readonly property color m3surfaceContainerLow: root.layer(root.palette.m3surfaceContainerLow)
-        readonly property color m3surfaceContainer: root.layer(root.palette.m3surfaceContainer)
-        readonly property color m3surfaceContainerHigh: root.layer(root.palette.m3surfaceContainerHigh)
-        readonly property color m3surfaceContainerHighest: root.layer(root.palette.m3surfaceContainerHighest)
-        readonly property color m3onSurface: root.layer(root.palette.m3onSurface)
-        readonly property color m3surfaceVariant: root.layer(root.palette.m3surfaceVariant, 0)
-        readonly property color m3onSurfaceVariant: root.layer(root.palette.m3onSurfaceVariant)
-        readonly property color m3inverseSurface: root.layer(root.palette.m3inverseSurface, 0)
-        readonly property color m3inverseOnSurface: root.layer(root.palette.m3inverseOnSurface)
-        readonly property color m3outline: root.layer(root.palette.m3outline)
-        readonly property color m3outlineVariant: root.layer(root.palette.m3outlineVariant)
-        readonly property color m3shadow: root.layer(root.palette.m3shadow)
-        readonly property color m3scrim: root.layer(root.palette.m3scrim)
-        readonly property color m3surfaceTint: root.layer(root.palette.m3surfaceTint)
-        readonly property color m3primary: root.layer(root.palette.m3primary)
-        readonly property color m3onPrimary: root.layer(root.palette.m3onPrimary)
-        readonly property color m3primaryContainer: root.layer(root.palette.m3primaryContainer)
-        readonly property color m3onPrimaryContainer: root.layer(root.palette.m3onPrimaryContainer)
-        readonly property color m3inversePrimary: root.layer(root.palette.m3inversePrimary)
-        readonly property color m3secondary: root.layer(root.palette.m3secondary)
-        readonly property color m3onSecondary: root.layer(root.palette.m3onSecondary)
-        readonly property color m3secondaryContainer: root.layer(root.palette.m3secondaryContainer)
-        readonly property color m3onSecondaryContainer: root.layer(root.palette.m3onSecondaryContainer)
-        readonly property color m3tertiary: root.layer(root.palette.m3tertiary)
-        readonly property color m3onTertiary: root.layer(root.palette.m3onTertiary)
-        readonly property color m3tertiaryContainer: root.layer(root.palette.m3tertiaryContainer)
-        readonly property color m3onTertiaryContainer: root.layer(root.palette.m3onTertiaryContainer)
-        readonly property color m3error: root.layer(root.palette.m3error)
-        readonly property color m3onError: root.layer(root.palette.m3onError)
-        readonly property color m3errorContainer: root.layer(root.palette.m3errorContainer)
-        readonly property color m3onErrorContainer: root.layer(root.palette.m3onErrorContainer)
-        readonly property color m3success: root.layer(root.palette.m3success)
-        readonly property color m3onSuccess: root.layer(root.palette.m3onSuccess)
-        readonly property color m3successContainer: root.layer(root.palette.m3successContainer)
-        readonly property color m3onSuccessContainer: root.layer(root.palette.m3onSuccessContainer)
-        readonly property color m3primaryFixed: root.layer(root.palette.m3primaryFixed)
-        readonly property color m3primaryFixedDim: root.layer(root.palette.m3primaryFixedDim)
-        readonly property color m3onPrimaryFixed: root.layer(root.palette.m3onPrimaryFixed)
-        readonly property color m3onPrimaryFixedVariant: root.layer(root.palette.m3onPrimaryFixedVariant)
-        readonly property color m3secondaryFixed: root.layer(root.palette.m3secondaryFixed)
-        readonly property color m3secondaryFixedDim: root.layer(root.palette.m3secondaryFixedDim)
-        readonly property color m3onSecondaryFixed: root.layer(root.palette.m3onSecondaryFixed)
-        readonly property color m3onSecondaryFixedVariant: root.layer(root.palette.m3onSecondaryFixedVariant)
-        readonly property color m3tertiaryFixed: root.layer(root.palette.m3tertiaryFixed)
-        readonly property color m3tertiaryFixedDim: root.layer(root.palette.m3tertiaryFixedDim)
-        readonly property color m3onTertiaryFixed: root.layer(root.palette.m3onTertiaryFixed)
-        readonly property color m3onTertiaryFixedVariant: root.layer(root.palette.m3onTertiaryFixedVariant)
-    }
-
-    component M3Palette: QtObject {
-        property color m3primary_paletteKeyColor: "#a8627b"
-        property color m3secondary_paletteKeyColor: "#8e6f78"
-        property color m3tertiary_paletteKeyColor: "#986e4c"
-        property color m3neutral_paletteKeyColor: "#807477"
-        property color m3neutral_variant_paletteKeyColor: "#837377"
-        property color m3background: "#191114"
-        property color m3onBackground: "#efdfe2"
-        property color m3surface: "#191114"
-        property color m3surfaceDim: "#191114"
-        property color m3surfaceBright: "#403739"
-        property color m3surfaceContainerLowest: "#130c0e"
-        property color m3surfaceContainerLow: "#22191c"
-        property color m3surfaceContainer: "#261d20"
-        property color m3surfaceContainerHigh: "#31282a"
-        property color m3surfaceContainerHighest: "#3c3235"
-        property color m3onSurface: "#efdfe2"
-        property color m3surfaceVariant: "#514347"
-        property color m3onSurfaceVariant: "#d5c2c6"
-        property color m3inverseSurface: "#efdfe2"
-        property color m3inverseOnSurface: "#372e30"
-        property color m3outline: "#9e8c91"
-        property color m3outlineVariant: "#514347"
-        property color m3shadow: "#000000"
-        property color m3scrim: "#000000"
-        property color m3surfaceTint: "#ffb0ca"
-        property color m3primary: "#ffb0ca"
-        property color m3onPrimary: "#541d34"
-        property color m3primaryContainer: "#6f334a"
-        property color m3onPrimaryContainer: "#ffd9e3"
-        property color m3inversePrimary: "#8b4a62"
-        property color m3secondary: "#e2bdc7"
-        property color m3onSecondary: "#422932"
-        property color m3secondaryContainer: "#5a3f48"
-        property color m3onSecondaryContainer: "#ffd9e3"
-        property color m3tertiary: "#f0bc95"
-        property color m3onTertiary: "#48290c"
-        property color m3tertiaryContainer: "#b58763"
-        property color m3onTertiaryContainer: "#000000"
-        property color m3error: "#ffb4ab"
-        property color m3onError: "#690005"
-        property color m3errorContainer: "#93000a"
-        property color m3onErrorContainer: "#ffdad6"
-        property color m3success: "#B5CCBA"
-        property color m3onSuccess: "#213528"
-        property color m3successContainer: "#374B3E"
-        property color m3onSuccessContainer: "#D1E9D6"
-        property color m3primaryFixed: "#ffd9e3"
-        property color m3primaryFixedDim: "#ffb0ca"
-        property color m3onPrimaryFixed: "#39071f"
-        property color m3onPrimaryFixedVariant: "#6f334a"
-        property color m3secondaryFixed: "#ffd9e3"
-        property color m3secondaryFixedDim: "#e2bdc7"
-        property color m3onSecondaryFixed: "#2b151d"
-        property color m3onSecondaryFixedVariant: "#5a3f48"
-        property color m3tertiaryFixed: "#ffdcc3"
-        property color m3tertiaryFixedDim: "#f0bc95"
-        property color m3onTertiaryFixed: "#2f1500"
-        property color m3onTertiaryFixedVariant: "#623f21"
-    }
-
 	component M3MaccchiatoPalette: QtObject {
-		property color m3primary_paletteKeyColor: "#6a73ac"
-		property color m3secondary_paletteKeyColor: "#72758e"
-		property color m3tertiary_paletteKeyColor: "#9b6592"
+		property color m3background: "#131317"
+		property color m3error: "#ffb4ab"
+		property color m3errorContainer: "#93000a"
+		property color m3inverseOnSurface: "#303034"
+		property color m3inversePrimary: "#525b92"
+		property color m3inverseSurface: "#e4e1e7"
 		property color m3neutral_paletteKeyColor: "#77767b"
 		property color m3neutral_variant_paletteKeyColor: "#767680"
-		property color m3background: "#131317"
 		property color m3onBackground: "#e4e1e7"
+		property color m3onError: "#690005"
+		property color m3onErrorContainer: "#ffdad6"
+		property color m3onPrimary: "#232c60"
+		property color m3onPrimaryContainer: "#ffffff"
+		property color m3onPrimaryFixed: "#0b154b"
+		property color m3onPrimaryFixedVariant: "#3a4378"
+		property color m3onSecondary: "#2c2f44"
+		property color m3onSecondaryContainer: "#b1b3ce"
+		property color m3onSecondaryFixed: "#171a2e"
+		property color m3onSecondaryFixedVariant: "#42455c"
+		property color m3onSuccess: "#213528"
+		property color m3onSuccessContainer: "#D1E9D6"
+		property color m3onSurface: "#e4e1e7"
+		property color m3onSurfaceVariant: "#c6c5d1"
+		property color m3onTertiary: "#4c1f48"
+		property color m3onTertiaryContainer: "#000000"
+		property color m3onTertiaryFixed: "#340831"
+		property color m3onTertiaryFixedVariant: "#66365f"
+		property color m3outline: "#90909a"
+		property color m3outlineVariant: "#46464f"
+		property color m3primary: "#bac3ff"
+		property color m3primaryContainer: "#6a73ac"
+		property color m3primaryFixed: "#dee0ff"
+		property color m3primaryFixedDim: "#bac3ff"
+		property color m3primary_paletteKeyColor: "#6a73ac"
+		property color m3scrim: "#000000"
+		property color m3secondary: "#c3c5e0"
+		property color m3secondaryContainer: "#42455c"
+		property color m3secondaryFixed: "#dfe1fd"
+		property color m3secondaryFixedDim: "#c3c5e0"
+		property color m3secondary_paletteKeyColor: "#72758e"
+		property color m3shadow: "#000000"
+		property color m3success: "#B5CCBA"
+		property color m3successContainer: "#374B3E"
 		property color m3surface: "#131317"
-		property color m3surfaceDim: "#131317"
 		property color m3surfaceBright: "#39393d"
-		property color m3surfaceContainerLowest: "#0e0e12"
-		property color m3surfaceContainerLow: "#1b1b1f"
 		property color m3surfaceContainer: "#1f1f23"
 		property color m3surfaceContainerHigh: "#2a2a2e"
 		property color m3surfaceContainerHighest: "#353438"
-		property color m3onSurface: "#e4e1e7"
-		property color m3surfaceVariant: "#46464f"
-		property color m3onSurfaceVariant: "#c6c5d1"
-		property color m3inverseSurface: "#e4e1e7"
-		property color m3inverseOnSurface: "#303034"
-		property color m3outline: "#90909a"
-		property color m3outlineVariant: "#46464f"
-		property color m3shadow: "#000000"
-		property color m3scrim: "#000000"
+		property color m3surfaceContainerLow: "#1b1b1f"
+		property color m3surfaceContainerLowest: "#0e0e12"
+		property color m3surfaceDim: "#131317"
 		property color m3surfaceTint: "#bac3ff"
-		property color m3primary: "#bac3ff"
-		property color m3onPrimary: "#232c60"
-		property color m3primaryContainer: "#6a73ac"
-		property color m3onPrimaryContainer: "#ffffff"
-		property color m3inversePrimary: "#525b92"
-		property color m3secondary: "#c3c5e0"
-		property color m3onSecondary: "#2c2f44"
-		property color m3secondaryContainer: "#42455c"
-		property color m3onSecondaryContainer: "#b1b3ce"
+		property color m3surfaceVariant: "#46464f"
 		property color m3tertiary: "#f1b3e5"
-		property color m3onTertiary: "#4c1f48"
 		property color m3tertiaryContainer: "#b77ead"
-		property color m3onTertiaryContainer: "#000000"
-		property color m3error: "#ffb4ab"
-		property color m3onError: "#690005"
-		property color m3errorContainer: "#93000a"
-		property color m3onErrorContainer: "#ffdad6"
-		property color m3primaryFixed: "#dee0ff"
-		property color m3primaryFixedDim: "#bac3ff"
-		property color m3onPrimaryFixed: "#0b154b"
-		property color m3onPrimaryFixedVariant: "#3a4378"
-		property color m3secondaryFixed: "#dfe1fd"
-		property color m3secondaryFixedDim: "#c3c5e0"
-		property color m3onSecondaryFixed: "#171a2e"
-		property color m3onSecondaryFixedVariant: "#42455c"
 		property color m3tertiaryFixed: "#ffd7f4"
 		property color m3tertiaryFixedDim: "#f1b3e5"
-		property color m3onTertiaryFixed: "#340831"
-		property color m3onTertiaryFixedVariant: "#66365f"
-		property color m3success: "#B5CCBA"
+		property color m3tertiary_paletteKeyColor: "#9b6592"
+	}
+	component M3Palette: QtObject {
+		property color m3background: "#191114"
+		property color m3error: "#ffb4ab"
+		property color m3errorContainer: "#93000a"
+		property color m3inverseOnSurface: "#372e30"
+		property color m3inversePrimary: "#8b4a62"
+		property color m3inverseSurface: "#efdfe2"
+		property color m3neutral_paletteKeyColor: "#807477"
+		property color m3neutral_variant_paletteKeyColor: "#837377"
+		property color m3onBackground: "#efdfe2"
+		property color m3onError: "#690005"
+		property color m3onErrorContainer: "#ffdad6"
+		property color m3onPrimary: "#541d34"
+		property color m3onPrimaryContainer: "#ffd9e3"
+		property color m3onPrimaryFixed: "#39071f"
+		property color m3onPrimaryFixedVariant: "#6f334a"
+		property color m3onSecondary: "#422932"
+		property color m3onSecondaryContainer: "#ffd9e3"
+		property color m3onSecondaryFixed: "#2b151d"
+		property color m3onSecondaryFixedVariant: "#5a3f48"
 		property color m3onSuccess: "#213528"
-		property color m3successContainer: "#374B3E"
 		property color m3onSuccessContainer: "#D1E9D6"
+		property color m3onSurface: "#efdfe2"
+		property color m3onSurfaceVariant: "#d5c2c6"
+		property color m3onTertiary: "#48290c"
+		property color m3onTertiaryContainer: "#000000"
+		property color m3onTertiaryFixed: "#2f1500"
+		property color m3onTertiaryFixedVariant: "#623f21"
+		property color m3outline: "#9e8c91"
+		property color m3outlineVariant: "#514347"
+		property color m3primary: "#ffb0ca"
+		property color m3primaryContainer: "#6f334a"
+		property color m3primaryFixed: "#ffd9e3"
+		property color m3primaryFixedDim: "#ffb0ca"
+		property color m3primary_paletteKeyColor: "#a8627b"
+		property color m3scrim: "#000000"
+		property color m3secondary: "#e2bdc7"
+		property color m3secondaryContainer: "#5a3f48"
+		property color m3secondaryFixed: "#ffd9e3"
+		property color m3secondaryFixedDim: "#e2bdc7"
+		property color m3secondary_paletteKeyColor: "#8e6f78"
+		property color m3shadow: "#000000"
+		property color m3success: "#B5CCBA"
+		property color m3successContainer: "#374B3E"
+		property color m3surface: "#191114"
+		property color m3surfaceBright: "#403739"
+		property color m3surfaceContainer: "#261d20"
+		property color m3surfaceContainerHigh: "#31282a"
+		property color m3surfaceContainerHighest: "#3c3235"
+		property color m3surfaceContainerLow: "#22191c"
+		property color m3surfaceContainerLowest: "#130c0e"
+		property color m3surfaceDim: "#191114"
+		property color m3surfaceTint: "#ffb0ca"
+		property color m3surfaceVariant: "#514347"
+		property color m3tertiary: "#f0bc95"
+		property color m3tertiaryContainer: "#b58763"
+		property color m3tertiaryFixed: "#ffdcc3"
+		property color m3tertiaryFixedDim: "#f0bc95"
+		property color m3tertiary_paletteKeyColor: "#986e4c"
+	}
+	component M3TPalette: QtObject {
+		readonly property color m3background: root.layer(root.palette.m3background, 0)
+		readonly property color m3error: root.layer(root.palette.m3error)
+		readonly property color m3errorContainer: root.layer(root.palette.m3errorContainer)
+		readonly property color m3inverseOnSurface: root.layer(root.palette.m3inverseOnSurface)
+		readonly property color m3inversePrimary: root.layer(root.palette.m3inversePrimary)
+		readonly property color m3inverseSurface: root.layer(root.palette.m3inverseSurface, 0)
+		readonly property color m3neutral_paletteKeyColor: root.layer(root.palette.m3neutral_paletteKeyColor)
+		readonly property color m3neutral_variant_paletteKeyColor: root.layer(root.palette.m3neutral_variant_paletteKeyColor)
+		readonly property color m3onBackground: root.layer(root.palette.m3onBackground)
+		readonly property color m3onError: root.layer(root.palette.m3onError)
+		readonly property color m3onErrorContainer: root.layer(root.palette.m3onErrorContainer)
+		readonly property color m3onPrimary: root.layer(root.palette.m3onPrimary)
+		readonly property color m3onPrimaryContainer: root.layer(root.palette.m3onPrimaryContainer)
+		readonly property color m3onPrimaryFixed: root.layer(root.palette.m3onPrimaryFixed)
+		readonly property color m3onPrimaryFixedVariant: root.layer(root.palette.m3onPrimaryFixedVariant)
+		readonly property color m3onSecondary: root.layer(root.palette.m3onSecondary)
+		readonly property color m3onSecondaryContainer: root.layer(root.palette.m3onSecondaryContainer)
+		readonly property color m3onSecondaryFixed: root.layer(root.palette.m3onSecondaryFixed)
+		readonly property color m3onSecondaryFixedVariant: root.layer(root.palette.m3onSecondaryFixedVariant)
+		readonly property color m3onSuccess: root.layer(root.palette.m3onSuccess)
+		readonly property color m3onSuccessContainer: root.layer(root.palette.m3onSuccessContainer)
+		readonly property color m3onSurface: root.layer(root.palette.m3onSurface)
+		readonly property color m3onSurfaceVariant: root.layer(root.palette.m3onSurfaceVariant)
+		readonly property color m3onTertiary: root.layer(root.palette.m3onTertiary)
+		readonly property color m3onTertiaryContainer: root.layer(root.palette.m3onTertiaryContainer)
+		readonly property color m3onTertiaryFixed: root.layer(root.palette.m3onTertiaryFixed)
+		readonly property color m3onTertiaryFixedVariant: root.layer(root.palette.m3onTertiaryFixedVariant)
+		readonly property color m3outline: root.layer(root.palette.m3outline)
+		readonly property color m3outlineVariant: root.layer(root.palette.m3outlineVariant)
+		readonly property color m3primary: root.layer(root.palette.m3primary)
+		readonly property color m3primaryContainer: root.layer(root.palette.m3primaryContainer)
+		readonly property color m3primaryFixed: root.layer(root.palette.m3primaryFixed)
+		readonly property color m3primaryFixedDim: root.layer(root.palette.m3primaryFixedDim)
+		readonly property color m3primary_paletteKeyColor: root.layer(root.palette.m3primary_paletteKeyColor)
+		readonly property color m3scrim: root.layer(root.palette.m3scrim)
+		readonly property color m3secondary: root.layer(root.palette.m3secondary)
+		readonly property color m3secondaryContainer: root.layer(root.palette.m3secondaryContainer)
+		readonly property color m3secondaryFixed: root.layer(root.palette.m3secondaryFixed)
+		readonly property color m3secondaryFixedDim: root.layer(root.palette.m3secondaryFixedDim)
+		readonly property color m3secondary_paletteKeyColor: root.layer(root.palette.m3secondary_paletteKeyColor)
+		readonly property color m3shadow: root.layer(root.palette.m3shadow)
+		readonly property color m3success: root.layer(root.palette.m3success)
+		readonly property color m3successContainer: root.layer(root.palette.m3successContainer)
+		readonly property color m3surface: root.layer(root.palette.m3surface, 0)
+		readonly property color m3surfaceBright: root.layer(root.palette.m3surfaceBright, 0)
+		readonly property color m3surfaceContainer: root.layer(root.palette.m3surfaceContainer)
+		readonly property color m3surfaceContainerHigh: root.layer(root.palette.m3surfaceContainerHigh)
+		readonly property color m3surfaceContainerHighest: root.layer(root.palette.m3surfaceContainerHighest)
+		readonly property color m3surfaceContainerLow: root.layer(root.palette.m3surfaceContainerLow)
+		readonly property color m3surfaceContainerLowest: root.layer(root.palette.m3surfaceContainerLowest)
+		readonly property color m3surfaceDim: root.layer(root.palette.m3surfaceDim, 0)
+		readonly property color m3surfaceTint: root.layer(root.palette.m3surfaceTint)
+		readonly property color m3surfaceVariant: root.layer(root.palette.m3surfaceVariant, 0)
+		readonly property color m3tertiary: root.layer(root.palette.m3tertiary)
+		readonly property color m3tertiaryContainer: root.layer(root.palette.m3tertiaryContainer)
+		readonly property color m3tertiaryFixed: root.layer(root.palette.m3tertiaryFixed)
+		readonly property color m3tertiaryFixedDim: root.layer(root.palette.m3tertiaryFixedDim)
+		readonly property color m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
+	}
+	component Transparency: QtObject {
+		readonly property real base: Appearance.transparency.base - (root.light ? 0.1 : 0)
+		readonly property bool enabled: Appearance.transparency.enabled
+		readonly property real layers: Appearance.transparency.layers
 	}
 }

Config/General.qml

@@ -2,35 +2,44 @@ import Quickshell.Io
 import Quickshell
 
 JsonObject {
+	property Apps apps: Apps {
+	}
+	property Color color: Color {
+	}
+	property bool desktopIcons: false
+	property Idle idle: Idle {
+	}
 	property string logo: ""
 	property string wallpaperPath: Quickshell.env("HOME") + "/Pictures/Wallpapers"
-	property Color color: Color {}
-	property Apps apps: Apps {}
-    property Idle idle: Idle {}
-
-	component Color: JsonObject {
-		property bool wallust: false
-		property bool schemeGeneration: true
-		property string mode: "dark"
-		property int scheduleDarkStart: 0
-		property int scheduleDarkEnd: 0
-		property bool neovimColors: false
-	}
 
 	component Apps: JsonObject {
-        property list<string> terminal: ["kitty"]
 		property list<string> audio: ["pavucontrol"]
-        property list<string> playback: ["mpv"]
 		property list<string> explorer: ["dolphin"]
+		property list<string> playback: ["mpv"]
+		property list<string> terminal: ["kitty"]
+	}
+	component Color: JsonObject {
+		property int hyprsunsetTemp: 5000
+		property string mode: "dark"
+		property bool neovimColors: false
+		property bool scheduleDark: false
+		property int scheduleDarkEnd: 0
+		property int scheduleDarkStart: 0
+		property bool scheduleHyprsunset: false
+		property int scheduleHyprsunsetEnd: 0
+		property int scheduleHyprsunsetStart: 0
+		property bool schemeGeneration: true
+		property bool smart: false
 	}
-
 	component Idle: JsonObject {
 		property list<var> timeouts: [
 			{
+				name: "Lock",
 				timeout: 180,
 				idleAction: "lock"
 			},
 			{
+				name: "Screen",
 				timeout: 300,
 				idleAction: "dpms off",
 				activeAction: "dpms on"

Config/Launcher.qml

@@ -1,37 +1,32 @@
 import Quickshell.Io
 
 JsonObject {
-	property int maxAppsShown: 10
-	property int maxWallpapers: 7
 	property string actionPrefix: ">"
-    property string specialPrefix: "@"
-    property Sizes sizes: Sizes {}
-	property UseFuzzy useFuzzy: UseFuzzy {}
-
-    component UseFuzzy: JsonObject {
-        property bool apps: false
-        property bool actions: false
-        property bool schemes: false
-        property bool variants: false
-        property bool wallpapers: false
-    }
-
-    component Sizes: JsonObject {
-        property int itemWidth: 600
-        property int itemHeight: 50
-        property int wallpaperWidth: 280
-        property int wallpaperHeight: 200
-    }
-
 	property list<var> actions: [
 		{
 			name: "Calculator",
 			icon: "calculate",
-			description: "Do simple math equations (powered by Qalc)",
+			description: "Do simple math equations",
 			command: ["autocomplete", "calc"],
 			enabled: true,
 			dangerous: false
 		},
+		{
+			name: "Light",
+			icon: "light_mode",
+			description: "Change to light mode",
+			command: ["setMode", "light"],
+			enabled: true,
+			dangerous: false
+		},
+		{
+			name: "Dark",
+			icon: "dark_mode",
+			description: "Change to dark mode",
+			command: ["setMode", "dark"],
+			enabled: true,
+			dangerous: false
+		},
 		{
 			name: "Wallpaper",
 			icon: "image",
@@ -40,6 +35,14 @@ JsonObject {
 			enabled: true,
 			dangerous: false
 		},
+		{
+			name: "Variant",
+			icon: "colors",
+			description: "Change the current scheme variant",
+			command: ["autocomplete", "variant"],
+			enabled: true,
+			dangerous: false
+		},
 		{
 			name: "Shutdown",
 			icon: "power_settings_new",
@@ -58,7 +61,7 @@ JsonObject {
 		},
 		{
 			name: "Logout",
-            icon: "exit_to_app",
+			icon: "logout",
 			description: "Log out of the current session",
 			command: ["loginctl", "terminate-user", ""],
 			enabled: true,
@@ -81,4 +84,25 @@ JsonObject {
 			dangerous: false
 		},
 	]
+	property int maxAppsShown: 10
+	property int maxWallpapers: 7
+	property Sizes sizes: Sizes {
+	}
+	property string specialPrefix: "@"
+	property UseFuzzy useFuzzy: UseFuzzy {
+	}
+
+	component Sizes: JsonObject {
+		property int itemHeight: 50
+		property int itemWidth: 600
+		property int wallpaperHeight: 200
+		property int wallpaperWidth: 280
+	}
+	component UseFuzzy: JsonObject {
+		property bool actions: false
+		property bool apps: false
+		property bool schemes: false
+		property bool variants: false
+		property bool wallpapers: false
+	}
 }

Config/LockConf.qml

@@ -1,15 +1,16 @@
 import Quickshell.Io
 
 JsonObject {
-    property bool recolorLogo: false
+	property int blurAmount: 40
 	property bool enableFprint: true
 	property int maxFprintTries: 3
-    property Sizes sizes: Sizes {}
-	property int blurAmount: 40
+	property bool recolorLogo: false
+	property Sizes sizes: Sizes {
+	}
 
 	component Sizes: JsonObject {
+		property int centerWidth: 600
 		property real heightMult: 0.7
 		property real ratio: 16 / 9
-        property int centerWidth: 600
 	}
 }

Config/MaterialEasing.qml

@@ -4,8 +4,6 @@ import Quickshell
 Singleton {
 	id: root
 
-    property real scale: Appearance.anim.durations.scale
-
 	readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
 	readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
 	readonly property int emphasizedAccelTime: 200 * scale
@@ -18,6 +16,7 @@ Singleton {
 	readonly property int expressiveEffectsTime: 200 * scale
 	readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.90, 1, 1]
 	readonly property int expressiveFastSpatialTime: 350 * scale
+	property real scale: Appearance.anim.durations.scale
 	readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
 	readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
 	readonly property int standardAccelTime: 200 * scale

Config/NotifConfig.qml

@@ -1,18 +1,20 @@
 import Quickshell.Io
 
 JsonObject {
-    property bool expire: true
-    property int defaultExpireTimeout: 5000
-    property real clearThreshold: 0.3
-    property int expandThreshold: 20
 	property bool actionOnClick: false
+	property int appNotifCooldown: 0
+	property real clearThreshold: 0.3
+	property int defaultExpireTimeout: 5000
+	property int expandThreshold: 20
+	property bool expire: true
 	property int groupPreviewNum: 3
 	property bool openExpanded: false
-    property Sizes sizes: Sizes {}
+	property Sizes sizes: Sizes {
+	}
 
 	component Sizes: JsonObject {
-        property int width: 400
-        property int image: 41
 		property int badge: 20
+		property int image: 41
+		property int width: 400
 	}
 }

Config/Osd.qml

@@ -1,15 +1,16 @@
 import Quickshell.Io
 
 JsonObject {
-    property bool enabled: true
-    property int hideDelay: 3000
+	property bool allMonBrightness: false
 	property bool enableBrightness: true
 	property bool enableMicrophone: true
-	property bool allMonBrightness: false
-    property Sizes sizes: Sizes {}
+	property bool enabled: true
+	property int hideDelay: 3000
+	property Sizes sizes: Sizes {
+	}
 
 	component Sizes: JsonObject {
-        property int sliderWidth: 30
 		property int sliderHeight: 150
+		property int sliderWidth: 30
 	}
 }

Config/Overview.qml

@@ -1,8 +1,8 @@
 import Quickshell.Io
 
 JsonObject {
-	property int rows: 2
 	property int columns: 5
-	property real scale: 0.16
 	property bool enable: false
+	property int rows: 2
+	property real scale: 0.16
 }

Config/Services.qml

@@ -2,18 +2,20 @@ import Quickshell.Io
 import QtQuick
 
 JsonObject {
-    property string weatherLocation: ""
-    property bool useFahrenheit: false
-    property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
-    property string gpuType: ""
 	property real audioIncrement: 0.1
 	property real brightnessIncrement: 0.1
-    property real maxVolume: 1.0
+	property bool ddcutilService: false
 	property string defaultPlayer: "Spotify"
+	property string gpuType: ""
+	property real maxVolume: 1.0
 	property list<var> playerAliases: [
 		{
 			"from": "com.github.th_ch.youtube_music",
 			"to": "YT Music"
 		}
 	]
+	property bool useFahrenheit: false
+	property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
+	property int visualizerBars: 30
+	property string weatherLocation: ""
 }

Config/SidebarConfig.qml

@@ -2,7 +2,8 @@ import Quickshell.Io
 
 JsonObject {
 	property bool enabled: true
-    property Sizes sizes: Sizes {}
+	property Sizes sizes: Sizes {
+	}
 
 	component Sizes: JsonObject {
 		property int width: 430

Config/Transparency.qml

@@ -1,7 +1,7 @@
 import Quickshell.Io
 
 JsonObject {
-    property bool enabled: false
 	property real base: 0.85
+	property bool enabled: false
 	property real layers: 0.4
 }

Config/UtilConfig.qml

@@ -3,31 +3,31 @@ import Quickshell.Io
 JsonObject {
 	property bool enabled: true
 	property int maxToasts: 4
-
-    property Sizes sizes: Sizes {}
-    property Toasts toasts: Toasts {}
-    property Vpn vpn: Vpn {}
+	property Sizes sizes: Sizes {
+	}
+	property Toasts toasts: Toasts {
+	}
+	property Vpn vpn: Vpn {
+	}
 
 	component Sizes: JsonObject {
-        property int width: 430
 		property int toastWidth: 430
+		property int width: 430
 	}
-
 	component Toasts: JsonObject {
-        property bool configLoaded: true
-        property bool chargingChanged: true
-        property bool gameModeChanged: true
-        property bool dndChanged: true
-        property bool audioOutputChanged: true
 		property bool audioInputChanged: true
+		property bool audioOutputChanged: true
 		property bool capsLockChanged: true
-        property bool numLockChanged: true
+		property bool chargingChanged: true
+		property bool configLoaded: true
+		property bool dndChanged: true
+		property bool gameModeChanged: true
 		property bool kbLayoutChanged: true
 		property bool kbLimit: true
-        property bool vpnChanged: true
 		property bool nowPlaying: false
+		property bool numLockChanged: true
+		property bool vpnChanged: true
 	}
-
 	component Vpn: JsonObject {
 		property bool enabled: false
 		property list<var> provider: ["netbird"]

Config/WorkspaceWidget.qml

@@ -1,6 +1,6 @@
 import Quickshell.Io
 
 JsonObject {
-    property string textColor: "black"
 	property string inactiveTextColor: "white"
+	property string textColor: "black"
 }

Daemons/Audio.qml

@@ -1,18 +1,18 @@
 pragma Singleton
 
-import qs.Config
 import ZShell.Services
 import ZShell
 import Quickshell
 import Quickshell.Services.Pipewire
 import QtQuick
+import qs.Config
 
 Singleton {
 	id: root
 
-    property string previousSinkName: ""
-    property string previousSourceName: ""
-
+	readonly property alias beatTracker: beatTracker
+	readonly property alias cava: cava
+	readonly property bool muted: !!sink?.audio?.muted
 	readonly property var nodes: Pipewire.nodes.values.reduce((acc, node) => {
 		if (!node.isStream) {
 			if (node.isSink)
@@ -29,73 +29,23 @@ Singleton {
 		sinks: [],
 		streams: []
 	})
-
-    readonly property list<PwNode> sinks: nodes.sinks
-    readonly property list<PwNode> sources: nodes.sources
-    readonly property list<PwNode> streams: nodes.streams
-
+	property string previousSinkName: ""
+	property string previousSourceName: ""
 	readonly property PwNode sink: Pipewire.defaultAudioSink
+	readonly property list<PwNode> sinks: nodes.sinks
 	readonly property PwNode source: Pipewire.defaultAudioSource
-
-    readonly property bool muted: !!sink?.audio?.muted
-    readonly property real volume: sink?.audio?.volume ?? 0
-
 	readonly property bool sourceMuted: !!source?.audio?.muted
 	readonly property real sourceVolume: source?.audio?.volume ?? 0
-
-    function setVolume(newVolume: real): void {
-        if (sink?.ready && sink?.audio) {
-            sink.audio.muted = false;
-            sink.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
-        }
-    }
-
-    function incrementVolume(amount: real): void {
-        setVolume(volume + (amount || Config.services.audioIncrement));
-    }
-
-    function decrementVolume(amount: real): void {
-        setVolume(volume - (amount || Config.services.audioIncrement));
-    }
-
-    function setSourceVolume(newVolume: real): void {
-        if (source?.ready && source?.audio) {
-            source.audio.muted = false;
-            source.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
-        }
-    }
-
-    function incrementSourceVolume(amount: real): void {
-        setSourceVolume(sourceVolume + (amount || Config.services.audioIncrement));
-    }
+	readonly property list<PwNode> sources: nodes.sources
+	readonly property list<PwNode> streams: nodes.streams
+	readonly property real volume: sink?.audio?.volume ?? 0
 
 	function decrementSourceVolume(amount: real): void {
 		setSourceVolume(sourceVolume - (amount || Config.services.audioIncrement));
 	}
 
-    function setAudioSink(newSink: PwNode): void {
-        Pipewire.preferredDefaultAudioSink = newSink;
-    }
-
-    function setAudioSource(newSource: PwNode): void {
-        Pipewire.preferredDefaultAudioSource = newSource;
-    }
-
-    function setStreamVolume(stream: PwNode, newVolume: real): void {
-        if (stream?.ready && stream?.audio) {
-            stream.audio.muted = false;
-            stream.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
-        }
-    }
-
-    function setStreamMuted(stream: PwNode, muted: bool): void {
-        if (stream?.ready && stream?.audio) {
-            stream.audio.muted = muted;
-        }
-    }
-
-    function getStreamVolume(stream: PwNode): real {
-        return stream?.audio?.volume ?? 0;
+	function decrementVolume(amount: real): void {
+		setVolume(volume - (amount || Config.services.audioIncrement));
 	}
 
 	function getStreamMuted(stream: PwNode): bool {
@@ -109,6 +59,57 @@ Singleton {
 		return stream.applicationName || stream.description || stream.name || qsTr("Unknown Application");
 	}
 
+	function getStreamVolume(stream: PwNode): real {
+		return stream?.audio?.volume ?? 0;
+	}
+
+	function incrementSourceVolume(amount: real): void {
+		setSourceVolume(sourceVolume + (amount || Config.services.audioIncrement));
+	}
+
+	function incrementVolume(amount: real): void {
+		setVolume(volume + (amount || Config.services.audioIncrement));
+	}
+
+	function setAudioSink(newSink: PwNode): void {
+		Pipewire.preferredDefaultAudioSink = newSink;
+	}
+
+	function setAudioSource(newSource: PwNode): void {
+		Pipewire.preferredDefaultAudioSource = newSource;
+	}
+
+	function setSourceVolume(newVolume: real): void {
+		if (source?.ready && source?.audio) {
+			source.audio.muted = false;
+			source.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
+		}
+	}
+
+	function setStreamMuted(stream: PwNode, muted: bool): void {
+		if (stream?.ready && stream?.audio) {
+			stream.audio.muted = muted;
+		}
+	}
+
+	function setStreamVolume(stream: PwNode, newVolume: real): void {
+		if (stream?.ready && stream?.audio) {
+			stream.audio.muted = false;
+			stream.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
+		}
+	}
+
+	function setVolume(newVolume: real): void {
+		if (sink?.ready && sink?.audio) {
+			sink.audio.muted = false;
+			sink.audio.volume = Math.max(0, Math.min(Config.services.maxVolume, newVolume));
+		}
+	}
+
+	Component.onCompleted: {
+		previousSinkName = sink?.description || sink?.name || qsTr("Unknown Device");
+		previousSourceName = source?.description || source?.name || qsTr("Unknown Device");
+	}
 	onSinkChanged: {
 		if (!sink?.ready)
 			return;
@@ -120,7 +121,6 @@ Singleton {
 
 		previousSinkName = newSinkName;
 	}
-
 	onSourceChanged: {
 		if (!source?.ready)
 			return;
@@ -133,9 +133,15 @@ Singleton {
 		previousSourceName = newSourceName;
 	}
 
-    Component.onCompleted: {
-        previousSinkName = sink?.description || sink?.name || qsTr("Unknown Device");
-        previousSourceName = source?.description || source?.name || qsTr("Unknown Device");
+	CavaProvider {
+		id: cava
+
+		bars: Config.services.visualizerBars
+	}
+
+	BeatTracker {
+		id: beatTracker
+
 	}
 
 	PwObjectTracker {

Daemons/Network.qml

@@ -0,0 +1,326 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+	id: root
+
+	readonly property AccessPoint active: networks.find(n => n.active) ?? null
+	readonly property var activeEthernet: ethernetDevices.find(d => d.connected) ?? null
+	property int ethernetDeviceCount: 0
+	property var ethernetDeviceDetails: null
+	property list<var> ethernetDevices: []
+	property bool ethernetProcessRunning: false
+	readonly property list<AccessPoint> networks: []
+	property var pendingConnection: null
+	property list<string> savedConnectionSsids: []
+	property list<string> savedConnections: []
+	readonly property bool scanning: Nmcli.scanning
+	property bool wifiEnabled: true
+	property var wirelessDeviceDetails: null
+
+	signal connectionFailed(string ssid)
+
+	function cidrToSubnetMask(cidr: string): string {
+		// Convert CIDR notation (e.g., "24") to subnet mask (e.g., "255.255.255.0")
+		const cidrNum = parseInt(cidr);
+		if (isNaN(cidrNum) || cidrNum < 0 || cidrNum > 32) {
+			return "";
+		}
+
+		const mask = (0xffffffff << (32 - cidrNum)) >>> 0;
+		const octets = [(mask >>> 24) & 0xff, (mask >>> 16) & 0xff, (mask >>> 8) & 0xff, mask & 0xff];
+
+		return octets.join(".");
+	}
+
+	function connectEthernet(connectionName: string, interfaceName: string): void {
+		Nmcli.connectEthernet(connectionName, interfaceName, result => {
+			if (result.success) {
+				getEthernetDevices();
+				// Refresh device details after connection
+				Qt.callLater(() => {
+					const activeDevice = root.ethernetDevices.find(function (d) {
+						return d.connected;
+					});
+					if (activeDevice && activeDevice.interface) {
+						updateEthernetDeviceDetails(activeDevice.interface);
+					}
+				}, 1000);
+			}
+		});
+	}
+
+	function connectToNetwork(ssid: string, password: string, bssid: string, callback: var): void {
+		// Set up pending connection tracking if callback provided
+		if (callback) {
+			const hasBssid = bssid !== undefined && bssid !== null && bssid.length > 0;
+			root.pendingConnection = {
+				ssid: ssid,
+				bssid: hasBssid ? bssid : "",
+				callback: callback
+			};
+		}
+
+		Nmcli.connectToNetwork(ssid, password, bssid, result => {
+			if (result && result.success) {
+				// Connection successful
+				if (callback)
+					callback(result);
+				root.pendingConnection = null;
+			} else if (result && result.needsPassword) {
+				// Password needed - callback will handle showing dialog
+				if (callback)
+					callback(result);
+			} else {
+				// Connection failed
+				if (result && result.error) {
+					root.connectionFailed(ssid);
+				}
+				if (callback)
+					callback(result);
+				root.pendingConnection = null;
+			}
+		});
+	}
+
+	function connectToNetworkWithPasswordCheck(ssid: string, isSecure: bool, callback: var, bssid: string): void {
+		// Set up pending connection tracking
+		const hasBssid = bssid !== undefined && bssid !== null && bssid.length > 0;
+		root.pendingConnection = {
+			ssid: ssid,
+			bssid: hasBssid ? bssid : "",
+			callback: callback
+		};
+
+		Nmcli.connectToNetworkWithPasswordCheck(ssid, isSecure, result => {
+			if (result && result.success) {
+				// Connection successful
+				if (callback)
+					callback(result);
+				root.pendingConnection = null;
+			} else if (result && result.needsPassword) {
+				// Password needed - callback will handle showing dialog
+				if (callback)
+					callback(result);
+			} else {
+				// Connection failed
+				if (result && result.error) {
+					root.connectionFailed(ssid);
+				}
+				if (callback)
+					callback(result);
+				root.pendingConnection = null;
+			}
+		}, bssid);
+	}
+
+	function disconnectEthernet(connectionName: string): void {
+		Nmcli.disconnectEthernet(connectionName, result => {
+			if (result.success) {
+				getEthernetDevices();
+				// Clear device details after disconnection
+				Qt.callLater(() => {
+					root.ethernetDeviceDetails = null;
+				});
+			}
+		});
+	}
+
+	function disconnectFromNetwork(): void {
+		// Try to disconnect - use connection name if available, otherwise use device
+		Nmcli.disconnectFromNetwork();
+		// Refresh network list after disconnection
+		Qt.callLater(() => {
+			Nmcli.getNetworks(() => {
+				syncNetworksFromNmcli();
+			});
+		}, 500);
+	}
+
+	function enableWifi(enabled: bool): void {
+		Nmcli.enableWifi(enabled, result => {
+			if (result.success) {
+				root.getWifiStatus();
+				Nmcli.getNetworks(() => {
+					syncNetworksFromNmcli();
+				});
+			}
+		});
+	}
+
+	function forgetNetwork(ssid: string): void {
+		// Delete the connection profile for this network
+		// This will remove the saved password and connection settings
+		Nmcli.forgetNetwork(ssid, result => {
+			if (result.success) {
+				// Refresh network list after deletion
+				Qt.callLater(() => {
+					Nmcli.getNetworks(() => {
+						syncNetworksFromNmcli();
+					});
+				}, 500);
+			}
+		});
+	}
+
+	function getEthernetDevices(): void {
+		root.ethernetProcessRunning = true;
+		Nmcli.getEthernetInterfaces(interfaces => {
+			root.ethernetDevices = Nmcli.ethernetDevices;
+			root.ethernetDeviceCount = Nmcli.ethernetDevices.length;
+			root.ethernetProcessRunning = false;
+		});
+	}
+
+	function getWifiStatus(): void {
+		Nmcli.getWifiStatus(enabled => {
+			root.wifiEnabled = enabled;
+		});
+	}
+
+	function hasSavedProfile(ssid: string): bool {
+		// Use Nmcli's hasSavedProfile which has the same logic
+		return Nmcli.hasSavedProfile(ssid);
+	}
+
+	function rescanWifi(): void {
+		Nmcli.rescanWifi();
+	}
+
+	function syncNetworksFromNmcli(): void {
+		const rNetworks = root.networks;
+		const nNetworks = Nmcli.networks;
+
+		// Build a map of existing networks by key
+		const existingMap = new Map();
+		for (const rn of rNetworks) {
+			const key = `${rn.frequency}:${rn.ssid}:${rn.bssid}`;
+			existingMap.set(key, rn);
+		}
+
+		// Build a map of new networks by key
+		const newMap = new Map();
+		for (const nn of nNetworks) {
+			const key = `${nn.frequency}:${nn.ssid}:${nn.bssid}`;
+			newMap.set(key, nn);
+		}
+
+		// Remove networks that no longer exist
+		for (const [key, network] of existingMap) {
+			if (!newMap.has(key)) {
+				const index = rNetworks.indexOf(network);
+				if (index >= 0) {
+					rNetworks.splice(index, 1);
+					network.destroy();
+				}
+			}
+		}
+
+		// Add or update networks from Nmcli
+		for (const [key, nNetwork] of newMap) {
+			const existing = existingMap.get(key);
+			if (existing) {
+				// Update existing network's lastIpcObject
+				existing.lastIpcObject = nNetwork.lastIpcObject;
+			} else {
+				// Create new AccessPoint from Nmcli's data
+				rNetworks.push(apComp.createObject(root, {
+					lastIpcObject: nNetwork.lastIpcObject
+				}));
+			}
+		}
+	}
+
+	function toggleWifi(): void {
+		Nmcli.toggleWifi(result => {
+			if (result.success) {
+				root.getWifiStatus();
+				Nmcli.getNetworks(() => {
+					syncNetworksFromNmcli();
+				});
+			}
+		});
+	}
+
+	function updateEthernetDeviceDetails(interfaceName: string): void {
+		Nmcli.getEthernetDeviceDetails(interfaceName, details => {
+			root.ethernetDeviceDetails = details;
+		});
+	}
+
+	function updateWirelessDeviceDetails(): void {
+		// Find the wireless interface by looking for wifi devices
+		// Pass empty string to let Nmcli find the active interface automatically
+		Nmcli.getWirelessDeviceDetails("", details => {
+			root.wirelessDeviceDetails = details;
+		});
+	}
+
+	Component.onCompleted: {
+		// Trigger ethernet device detection after initialization
+		Qt.callLater(() => {
+			getEthernetDevices();
+		});
+		// Load saved connections on startup
+		Nmcli.loadSavedConnections(() => {
+			root.savedConnections = Nmcli.savedConnections;
+			root.savedConnectionSsids = Nmcli.savedConnectionSsids;
+		});
+		// Get initial WiFi status
+		Nmcli.getWifiStatus(enabled => {
+			root.wifiEnabled = enabled;
+		});
+		// Sync networks from Nmcli on startup
+		Qt.callLater(() => {
+			syncNetworksFromNmcli();
+		}, 100);
+	}
+
+	// Sync saved connections from Nmcli when they're updated
+	Connections {
+		function onSavedConnectionSsidsChanged() {
+			root.savedConnectionSsids = Nmcli.savedConnectionSsids;
+		}
+
+		function onSavedConnectionsChanged() {
+			root.savedConnections = Nmcli.savedConnections;
+		}
+
+		target: Nmcli
+	}
+
+	Component {
+		id: apComp
+
+		AccessPoint {
+		}
+	}
+
+	Process {
+		command: ["nmcli", "m"]
+		running: true
+
+		stdout: SplitParser {
+			onRead: {
+				Nmcli.getNetworks(() => {
+					syncNetworksFromNmcli();
+				});
+				getEthernetDevices();
+			}
+		}
+	}
+
+	component AccessPoint: QtObject {
+		readonly property bool active: lastIpcObject.active
+		readonly property string bssid: lastIpcObject.bssid
+		readonly property int frequency: lastIpcObject.frequency
+		readonly property bool isSecure: security.length > 0
+		required property var lastIpcObject
+		readonly property string security: lastIpcObject.security
+		readonly property string ssid: lastIpcObject.ssid
+		readonly property int strength: lastIpcObject.strength
+	}
+}

Daemons/NotifServer.qml

@@ -16,13 +16,34 @@ import qs.Config
 Singleton {
 	id: root
 
+	readonly property var appCooldownMap: new Map()
+	property alias dnd: props.dnd
 	property list<Notif> list: []
+	property bool loaded
 	readonly property list<Notif> notClosed: list.filter(n => !n.closed)
 	readonly property list<Notif> popups: list.filter(n => n.popup)
-    property alias dnd: props.dnd
 	property alias server: server
 
-    property bool loaded
+	function shouldThrottle(appName: string): bool {
+		if (props.dnd)
+			return false;
+
+		const key = (appName || "unknown").trim().toLowerCase();
+		const cooldownSec = Config.notifs.appNotifCooldown;
+		const cooldownMs = Math.max(0, cooldownSec * 1000);
+
+		if (cooldownMs <= 0)
+			return true;
+
+		const now = Date.now();
+		const until = appCooldownMap.get(key) ?? 0;
+
+		if (now < until)
+			return false;
+
+		appCooldownMap.set(key, now + cooldownMs);
+		return true;
+	}
 
 	onListChanged: {
 		if (loaded) {
@@ -37,7 +58,9 @@ Singleton {
 
 	Timer {
 		id: saveTimer
+
 		interval: 1000
+
 		onTriggered: storage.setText(JSON.stringify(root.notClosed.map(n => ({
 					time: n.time,
 					id: n.id,
@@ -51,7 +74,7 @@ Singleton {
 					resident: n.resident,
 					hasActionIcons: n.hasActionIcons,
 					actions: n.actions
-                }))));
+				}))))
 	}
 
 	PersistentProperties {
@@ -65,19 +88,21 @@ Singleton {
 	NotificationServer {
 		id: server
 
-        keepOnReload: false
 		actionsSupported: true
 		bodyHyperlinksSupported: true
 		bodyImagesSupported: true
 		bodyMarkupSupported: true
 		imageSupported: true
+		keepOnReload: false
 		persistenceSupported: true
 
 		onNotification: notif => {
 			notif.tracked = true;
 
+			const is_popup = root.shouldThrottle(notif.appName);
+
 			const comp = notifComp.createObject(root, {
-                popup: !props.dnd,
+				popup: is_popup,
 				notification: notif
 			});
 			root.list = [comp, ...root.list];
@@ -86,15 +111,8 @@ Singleton {
 
 	FileView {
 		id: storage
-        path: `${Paths.state}/notifs.json`
 
-        onLoaded: {
-            const data = JSON.parse(text());
-            for (const notif of data)
-                root.list.push(notifComp.createObject(root, notif));
-            root.list.sort((a, b) => b.time - a.time);
-            root.loaded = true;
-        }
+		path: `${Paths.state}/notifs.json`
 
 		onLoadFailed: err => {
 			if (err === FileViewError.FileNotFound) {
@@ -102,11 +120,19 @@ Singleton {
 				setText("[]");
 			}
 		}
+		onLoaded: {
+			const data = JSON.parse(text());
+			for (const notif of data)
+				root.list.push(notifComp.createObject(root, notif));
+			root.list.sort((a, b) => b.time - a.time);
+			root.loaded = true;
+		}
 	}
 
 	CustomShortcut {
-        name: "clearnotifs"
 		description: "Clear all notifications"
+		name: "clearnotifs"
+
 		onPressed: {
 			for (const notif of root.list.slice())
 				notif.close();
@@ -114,13 +140,19 @@ Singleton {
 	}
 
 	IpcHandler {
-        target: "notifs"
-
 		function clear(): void {
 			for (const notif of root.list.slice())
 				notif.close();
 		}
 
+		function disableDnd(): void {
+			props.dnd = false;
+		}
+
+		function enableDnd(): void {
+			props.dnd = true;
+		}
+
 		function isDndEnabled(): bool {
 			return props.dnd;
 		}
@@ -129,80 +161,87 @@ Singleton {
 			props.dnd = !props.dnd;
 		}
 
-        function enableDnd(): void {
-            props.dnd = true;
+		target: "notifs"
 	}
 
-        function disableDnd(): void {
-            props.dnd = false;
+	Component {
+		id: notifComp
+
+		Notif {
 		}
 	}
 
 	component Notif: QtObject {
 		id: notif
 
-        property bool popup
-        property bool closed
-        property var locks: new Set()
-
-        property date time: new Date()
-        readonly property string timeStr: {
-            const diff = Time.date.getTime() - time.getTime();
-            const m = Math.floor(diff / 60000);
-
-            if (m < 1)
-                return qsTr("now");
-
-            const h = Math.floor(m / 60);
-            const d = Math.floor(h / 24);
-
-            if (d > 0)
-                return `${d}d`;
-            if (h > 0)
-                return `${h}h`;
-            return `${m}m`;
-        }
-
-        property Notification notification
-        property string id
-        property string summary
-        property string body
+		property list<var> actions
 		property string appIcon
 		property string appName
-        property string image
-        property real expireTimeout: 5
-        property int urgency: NotificationUrgency.Normal
-        property bool resident
-        property bool hasActionIcons
-        property list<var> actions
-
-        readonly property Timer timer: Timer {
-			property int totalTime: Config.notifs.defaultExpireTimeout
-			property int remainingTime: totalTime
-			property bool paused: false
-
-            running: !paused
-			repeat: true
-            interval: 50
-            onTriggered: {
-				remainingTime -= interval;
-
-				if ( remainingTime <= 0 ) {
-					remainingTime = 0;
-					notif.popup = false;
-					stop();
-				}
-            }
+		property string body
+		property bool closed
+		readonly property Connections conn: Connections {
+			function onActionsChanged(): void {
+				notif.actions = notif.notification.actions.map(a => ({
+							identifier: a.identifier,
+							text: a.text,
+							invoke: () => a.invoke()
+						}));
 			}
 
+			function onAppIconChanged(): void {
+				notif.appIcon = notif.notification.appIcon;
+			}
+
+			function onAppNameChanged(): void {
+				notif.appName = notif.notification.appName;
+			}
+
+			function onBodyChanged(): void {
+				notif.body = notif.notification.body;
+			}
+
+			function onClosed(): void {
+				notif.close();
+			}
+
+			function onExpireTimeoutChanged(): void {
+				notif.expireTimeout = notif.notification.expireTimeout;
+			}
+
+			function onHasActionIconsChanged(): void {
+				notif.hasActionIcons = notif.notification.hasActionIcons;
+			}
+
+			function onImageChanged(): void {
+				notif.image = notif.notification.image;
+				if (notif.notification?.image)
+					notif.dummyImageLoader.active = true;
+			}
+
+			function onResidentChanged(): void {
+				notif.resident = notif.notification.resident;
+			}
+
+			function onSummaryChanged(): void {
+				notif.summary = notif.notification.summary;
+			}
+
+			function onUrgencyChanged(): void {
+				notif.urgency = notif.notification.urgency;
+			}
+
+			target: notif.notification
+		}
 		readonly property LazyLoader dummyImageLoader: LazyLoader {
 			active: false
 
 			PanelWindow {
-                implicitWidth: Config.notifs.sizes.image
-                implicitHeight: Config.notifs.sizes.image
 				color: "transparent"
-                mask: Region {}
+				implicitHeight: Config.notifs.sizes.image
+				implicitWidth: Config.notifs.sizes.image
+
+				mask: Region {
+				}
 
 				Image {
 					function tryCache(): void {
@@ -230,70 +269,71 @@ Singleton {
 					}
 
 					anchors.fill: parent
-                    source: Qt.resolvedUrl(notif.image)
-                    fillMode: Image.PreserveAspectCrop
-                    cache: false
 					asynchronous: true
+					cache: false
+					fillMode: Image.PreserveAspectCrop
 					opacity: 0
+					source: Qt.resolvedUrl(notif.image)
 
+					onHeightChanged: tryCache()
 					onStatusChanged: tryCache()
 					onWidthChanged: tryCache()
-                    onHeightChanged: tryCache()
 				}
 			}
 		}
+		property real expireTimeout: 5
+		property bool hasActionIcons
+		property string id
+		property string image
+		property var locks: new Set()
+		property Notification notification
+		property bool popup
+		property bool resident
+		property string summary
+		property date time: new Date()
+		readonly property string timeStr: {
+			const diff = Time.date.getTime() - time.getTime();
+			const m = Math.floor(diff / 60000);
 
-        readonly property Connections conn: Connections {
-            target: notif.notification
+			if (m < 1)
+				return qsTr("now");
 
-            function onClosed(): void {
-                notif.close();
+			const h = Math.floor(m / 60);
+			const d = Math.floor(h / 24);
+
+			if (d > 0)
+				return `${d}d`;
+			if (h > 0)
+				return `${h}h`;
+			return `${m}m`;
 		}
+		readonly property Timer timer: Timer {
+			property bool paused: false
+			property int remainingTime: totalTime
+			property int totalTime: Config.notifs.defaultExpireTimeout
 
-            function onSummaryChanged(): void {
-                notif.summary = notif.notification.summary;
+			interval: 50
+			repeat: true
+			running: !paused
+
+			onTriggered: {
+				remainingTime -= interval;
+
+				if (remainingTime <= 0) {
+					remainingTime = 0;
+					notif.popup = false;
+					stop();
 				}
-
-            function onBodyChanged(): void {
-                notif.body = notif.notification.body;
 			}
-
-            function onAppIconChanged(): void {
-                notif.appIcon = notif.notification.appIcon;
 		}
+		property int urgency: NotificationUrgency.Normal
 
-            function onAppNameChanged(): void {
-                notif.appName = notif.notification.appName;
-            }
-
-            function onImageChanged(): void {
-                notif.image = notif.notification.image;
-                if (notif.notification?.image)
-                    notif.dummyImageLoader.active = true;
-            }
-
-            function onExpireTimeoutChanged(): void {
-                notif.expireTimeout = notif.notification.expireTimeout;
-            }
-
-            function onUrgencyChanged(): void {
-                notif.urgency = notif.notification.urgency;
-            }
-
-            function onResidentChanged(): void {
-                notif.resident = notif.notification.resident;
-            }
-
-            function onHasActionIconsChanged(): void {
-                notif.hasActionIcons = notif.notification.hasActionIcons;
-            }
-
-            function onActionsChanged(): void {
-                notif.actions = notif.notification.actions.map(a => ({
-                            identifier: a.identifier,
-                            text: a.text,
-                            invoke: () => a.invoke()
-                        }));
+		function close(): void {
+			closed = true;
+			if (locks.size === 0 && root.list.includes(this)) {
+				root.list = root.list.filter(n => n !== this);
+				notification?.dismiss();
+				destroy();
 			}
 		}
 
@@ -307,15 +347,6 @@ Singleton {
 				close();
 		}
 
-        function close(): void {
-            closed = true;
-            if (locks.size === 0 && root.list.includes(this)) {
-                root.list = root.list.filter(n => n !== this);
-                notification?.dismiss();
-                destroy();
-            }
-        }
-
 		Component.onCompleted: {
 			if (!notification)
 				return;
@@ -339,10 +370,4 @@ Singleton {
 					}));
 		}
 	}
-
-    Component {
-        id: notifComp
-
-        Notif {}
-    }
 }

Drawers/Backgrounds.qml

@@ -1,6 +1,8 @@
 import Quickshell
 import QtQuick
 import QtQuick.Shapes
+import qs.Components
+import qs.Config
 import qs.Modules as Modules
 import qs.Modules.Notifications as Notifications
 import qs.Modules.Notifications.Sidebar as Sidebar
@@ -8,73 +10,98 @@ import qs.Modules.Notifications.Sidebar.Utils as Utils
 import qs.Modules.Dashboard as Dashboard
 import qs.Modules.Osd as Osd
 import qs.Modules.Launcher as Launcher
+import qs.Modules.Resources as Resources
+import qs.Modules.Drawing as Drawing
+import qs.Modules.Settings as Settings
+import qs.Modules.Dock as Dock
 
 Shape {
 	id: root
 
-    required property Panels panels
 	required property Item bar
+	required property Panels panels
 	required property PersistentProperties visibilities
 
 	anchors.fill: parent
-    // anchors.margins: 8
+	anchors.margins: Config.barConfig.border
 	anchors.topMargin: bar.implicitHeight
+	asynchronous: true
 	preferredRendererType: Shape.CurveRenderer
 
-	Component.onCompleted: console.log(root.bar.implicitHeight, root.bar.anchors.topMargin)
+	Drawing.Background {
+		startX: 0
+		startY: wrapper.y - rounding
+		wrapper: root.panels.drawing
+	}
+
+	Resources.Background {
+		startX: 0 - rounding
+		startY: 0
+		wrapper: root.panels.resources
+	}
 
 	Osd.Background {
-		wrapper: root.panels.osd
-
 		startX: root.width - root.panels.sidebar.width
 		startY: (root.height - wrapper.height) / 2 - rounding
+		wrapper: root.panels.osd
 	}
 
 	Modules.Background {
-        wrapper: root.panels.popouts
 		invertBottomRounding: wrapper.x <= 0
-
-        startX: wrapper.x - 8
+		rounding: root.panels.popouts.currentName.startsWith("updates") ? Appearance.rounding.normal : Appearance.rounding.smallest
+		startX: wrapper.x - rounding
 		startY: wrapper.y
+		wrapper: root.panels.popouts
 	}
 
 	Notifications.Background {
-		wrapper: root.panels.notifications
 		sidebar: sidebar
-
 		startX: root.width
 		startY: 0
+		wrapper: root.panels.notifications
 	}
 
 	Launcher.Background {
-		wrapper: root.panels.launcher
-
 		startX: (root.width - wrapper.width) / 2 - rounding
 		startY: root.height
+		wrapper: root.panels.launcher
 	}
 
 	Dashboard.Background {
-		wrapper: root.panels.dashboard
-
 		startX: root.width - root.panels.dashboard.width - rounding
 		startY: 0
+		wrapper: root.panels.dashboard
 	}
 
 	Utils.Background {
-		wrapper: root.panels.utilities
 		sidebar: sidebar
-
 		startX: root.width
 		startY: root.height
+		wrapper: root.panels.utilities
 	}
 
 	Sidebar.Background {
 		id: sidebar
 
-		wrapper: root.panels.sidebar
 		panels: root.panels
-
 		startX: root.width
 		startY: root.panels.notifications.height
+		wrapper: root.panels.sidebar
+	}
+
+	Settings.Background {
+		id: settings
+
+		startX: (root.width - wrapper.width) / 2 - rounding
+		startY: 0
+		wrapper: root.panels.settings
+	}
+
+	Dock.Background {
+		id: dock
+
+		startX: (root.width - wrapper.width) / 2 - rounding
+		startY: root.height
+		wrapper: root.panels.dock
 	}
 }

Drawers/Drawing.qml

@@ -0,0 +1,186 @@
+import QtQuick
+
+Canvas {
+	id: root
+
+	property rect dirtyRect: Qt.rect(0, 0, 0, 0)
+	property bool frameQueued: false
+	property bool fullRepaintPending: true
+	property point lastPoint: Qt.point(0, 0)
+	property real minPointDistance: 2.0
+	property color penColor: "white"
+	property real penWidth: 4
+	property var pendingSegments: []
+	property bool strokeActive: false
+	property var strokes: []
+
+	function appendPoint(x, y) {
+		if (!strokeActive || strokes.length === 0)
+			return;
+		const dx = x - lastPoint.x;
+		const dy = y - lastPoint.y;
+
+		if ((dx * dx + dy * dy) < (minPointDistance * minPointDistance))
+			return;
+		const x1 = lastPoint.x;
+		const y1 = lastPoint.y;
+		const x2 = x;
+		const y2 = y;
+
+		strokes[strokes.length - 1].push(Qt.point(x2, y2));
+
+		pendingSegments.push({
+			dot: false,
+			x1: x1,
+			y1: y1,
+			x2: x2,
+			y2: y2
+		});
+
+		lastPoint = Qt.point(x2, y2);
+		queueDirty(segmentDirtyRect(x1, y1, x2, y2));
+	}
+
+	function beginStroke(x, y) {
+		const p = Qt.point(x, y);
+		strokes.push([p]);
+		lastPoint = p;
+		strokeActive = true;
+
+		pendingSegments.push({
+			dot: true,
+			x: x,
+			y: y
+		});
+
+		queueDirty(pointDirtyRect(x, y));
+	}
+
+	function clear() {
+		strokes = [];
+		pendingSegments = [];
+		dirtyRect = Qt.rect(0, 0, 0, 0);
+		fullRepaintPending = true;
+		markDirty(Qt.rect(0, 0, width, height));
+	}
+
+	function drawDot(ctx, x, y) {
+		ctx.beginPath();
+		ctx.arc(x, y, penWidth / 2, 0, Math.PI * 2);
+		ctx.fill();
+	}
+
+	function drawSegment(ctx, x1, y1, x2, y2) {
+		ctx.beginPath();
+		ctx.moveTo(x1, y1);
+		ctx.lineTo(x2, y2);
+		ctx.stroke();
+	}
+
+	function endStroke() {
+		strokeActive = false;
+	}
+
+	function pointDirtyRect(x, y) {
+		const pad = penWidth + 2;
+		return Qt.rect(x - pad, y - pad, pad * 2, pad * 2);
+	}
+
+	function queueDirty(r) {
+		dirtyRect = unionRects(dirtyRect, r);
+
+		if (frameQueued)
+			return;
+		frameQueued = true;
+
+		requestAnimationFrame(function () {
+			frameQueued = false;
+
+			if (dirtyRect.width > 0 && dirtyRect.height > 0) {
+				markDirty(dirtyRect);
+				dirtyRect = Qt.rect(0, 0, 0, 0);
+			}
+		});
+	}
+
+	function replayAll(ctx) {
+		ctx.clearRect(0, 0, width, height);
+
+		for (const stroke of strokes) {
+			if (!stroke || stroke.length === 0)
+				continue;
+			if (stroke.length === 1) {
+				const p = stroke[0];
+				drawDot(ctx, p.x, p.y);
+				continue;
+			}
+
+			ctx.beginPath();
+			ctx.moveTo(stroke[0].x, stroke[0].y);
+			for (let i = 1; i < stroke.length; ++i)
+				ctx.lineTo(stroke[i].x, stroke[i].y);
+			ctx.stroke();
+		}
+	}
+
+	function requestFullRepaint() {
+		fullRepaintPending = true;
+		markDirty(Qt.rect(0, 0, width, height));
+	}
+
+	function segmentDirtyRect(x1, y1, x2, y2) {
+		const pad = penWidth + 2;
+		const left = Math.min(x1, x2) - pad;
+		const top = Math.min(y1, y2) - pad;
+		const right = Math.max(x1, x2) + pad;
+		const bottom = Math.max(y1, y2) + pad;
+		return Qt.rect(left, top, right - left, bottom - top);
+	}
+
+	function unionRects(a, b) {
+		if (a.width <= 0 || a.height <= 0)
+			return b;
+		if (b.width <= 0 || b.height <= 0)
+			return a;
+
+		const left = Math.min(a.x, b.x);
+		const top = Math.min(a.y, b.y);
+		const right = Math.max(a.x + a.width, b.x + b.width);
+		const bottom = Math.max(a.y + a.height, b.y + b.height);
+
+		return Qt.rect(left, top, right - left, bottom - top);
+	}
+
+	anchors.fill: parent
+	contextType: "2d"
+	renderStrategy: Canvas.Threaded
+	renderTarget: Canvas.Image
+
+	onHeightChanged: requestFullRepaint()
+	onPaint: region => {
+		const ctx = getContext("2d");
+
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		ctx.lineWidth = penWidth;
+		ctx.strokeStyle = penColor;
+		ctx.fillStyle = penColor;
+
+		if (fullRepaintPending) {
+			fullRepaintPending = false;
+			replayAll(ctx);
+			pendingSegments = [];
+			return;
+		}
+
+		for (const seg of pendingSegments) {
+			if (seg.dot)
+				drawDot(ctx, seg.x, seg.y);
+			else
+				drawSegment(ctx, seg.x1, seg.y1, seg.x2, seg.y2);
+		}
+
+		pendingSegments = [];
+	}
+	onWidthChanged: requestFullRepaint()
+}

Drawers/DrawingInput.qml

@@ -0,0 +1,58 @@
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Config
+
+CustomMouseArea {
+	id: root
+
+	required property var bar
+	required property Drawing drawing
+	required property Panels panels
+	required property var popout
+	required property PersistentProperties visibilities
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + bar.implicitHeight;
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	anchors.fill: root.visibilities.isDrawing ? parent : undefined
+	hoverEnabled: true
+	visible: root.visibilities.isDrawing
+
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (event.buttons & Qt.LeftButton)
+			root.drawing.appendPoint(x, y);
+
+		if (root.inLeftPanel(root.popout, x, y)) {
+			root.z = -2;
+			root.panels.drawing.expanded = true;
+		}
+	}
+	onPressed: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.panels.drawing.expanded = false;
+			root.drawing.beginStroke(x, y);
+			return;
+		}
+
+		if (event.buttons & Qt.RightButton)
+			root.drawing.clear();
+	}
+	onReleased: {
+		if (root.visibilities.isDrawing)
+			root.drawing.endStroke();
+	}
+}

Drawers/Exclusions.qml

@@ -0,0 +1,41 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import qs.Config
+import qs.Components
+
+Scope {
+	id: root
+
+	required property Item bar
+	required property ShellScreen screen
+
+	ExclusionZone {
+		anchors.top: true
+		exclusiveZone: root.bar.exclusiveZone
+	}
+
+	ExclusionZone {
+		anchors.left: true
+	}
+
+	ExclusionZone {
+		anchors.right: true
+	}
+
+	ExclusionZone {
+		anchors.bottom: true
+	}
+
+	component ExclusionZone: CustomWindow {
+		exclusiveZone: Config.barConfig.border
+		implicitHeight: 1
+		implicitWidth: 1
+		name: "Bar-Exclusion"
+		screen: root.screen
+
+		mask: Region {
+		}
+	}
+}

Drawers/Interactions.qml

@@ -7,16 +7,39 @@ import qs.Modules as BarPopouts
 CustomMouseArea {
 	id: root
 
-    required property ShellScreen screen
-    required property BarPopouts.Wrapper popouts
-    required property PersistentProperties visibilities
-    required property Panels panels
 	required property Item bar
-
-    property point dragStart
 	property bool dashboardShortcutActive
+	property point dragStart
+	required property Drawing drawing
+	required property DrawingInput input
 	property bool osdShortcutActive
+	required property Panels panels
+	required property BarPopouts.Wrapper popouts
+	required property ShellScreen screen
 	property bool utilitiesShortcutActive
+	required property PersistentProperties visibilities
+
+	function inBottomPanel(panel: Item, x: real, y: real): bool {
+		return y > root.height - panel.height - Config.barConfig.border && withinPanelWidth(panel, x, y);
+	}
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+	}
+
+	function inRightPanel(panel: Item, x: real, y: real): bool {
+		return x > panel.x - Config.barConfig.border && withinPanelHeight(panel, x, y);
+	}
+
+	function inTopPanel(panel: Item, x: real, y: real): bool {
+		return y < bar.implicitHeight + panel.height && withinPanelWidth(panel, x, y);
+	}
+
+	function onWheel(event: WheelEvent): void {
+		if (event.x < bar.implicitWidth) {
+			bar.handleWheel(event.y, event.angleDelta);
+		}
+	}
 
 	function withinPanelHeight(panel: Item, x: real, y: real): bool {
 		const panelY = panel.y + bar.implicitHeight;
@@ -28,44 +51,12 @@ CustomMouseArea {
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
-    function inLeftPanel(panel: Item, x: real, y: real): bool {
-        return x < panel.x + panel.width && withinPanelHeight(panel, x, y);
-    }
-
-    function inRightPanel(panel: Item, x: real, y: real): bool {
-        return x > panel.x && withinPanelHeight(panel, x, y);
-    }
-
-    function inTopPanel(panel: Item, x: real, y: real): bool {
-        return y < bar.implicitHeight + panel.height && withinPanelWidth(panel, x, y);
-    }
-
-    function inBottomPanel(panel: Item, x: real, y: real): bool {
-        return y > root.height - panel.height && withinPanelWidth(panel, x, y);
-    }
-
-    function onWheel(event: WheelEvent): void {
-        if (event.x < bar.implicitWidth) {
-            bar.handleWheel(event.y, event.angleDelta);
-        }
-    }
-
 	anchors.fill: parent
 	hoverEnabled: true
-
-	//    onPressed: event => {
-	// 	if ( root.popouts.hasCurrent && !inTopPanel( root.popouts, event.x, event.y )) {
-	// 		root.popouts.hasCurrent = false;
-	// 	} else if (root.visibilities.sidebar && !inRightPanel( panels.sidebar, event.x, event.y )) {
-	// 		root.visibilities.sidebar = false;
-	// 	} else if (root.visibilities.dashboard && !inTopPanel( panels.dashboard, event.x, event.y )) {
-	// 		root.visibilities.dashboard = false;
-	// 	}
-	// }
+	propagateComposedEvents: true
 
 	onContainsMouseChanged: {
 		if (!containsMouse) {
-            // Only hide if not activated by shortcut
 			if (!osdShortcutActive) {
 				visibilities.osd = false;
 				root.panels.osd.hovered = false;
@@ -75,11 +66,10 @@ CustomMouseArea {
 				popouts.hasCurrent = false;
 			}
 
-            if (Config.barConfig.autoHide && !root.visibilities.sidebar && !root.visibilities.dashboard)
-                root.visibilities.bar = false;
+			if (Config.barConfig.autoHide)
+				bar.isHovered = false;
 		}
 	}
-
 	onPositionChanged: event => {
 		if (popouts.isDetached)
 			return;
@@ -89,138 +79,110 @@ CustomMouseArea {
 		const dragX = x - dragStart.x;
 		const dragY = y - dragStart.y;
 
-        // Show bar in non-exclusive mode on hover
-        if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight + bar.anchors.topMargin)
-            visibilities.bar = true;
+		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
+			root.input.z = 2;
+			root.panels.drawing.expanded = false;
+		}
+
+		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+			bar.isHovered = true;
 
 		if (panels.sidebar.width === 0) {
-            // Show osd on hover
 			const showOsd = inRightPanel(panels.osd, x, y);
 
-            // // Always update visibility based on hover if not in shortcut mode
-            if (!osdShortcutActive) {
-                visibilities.osd = showOsd;
-                root.panels.osd.hovered = showOsd;
-            } else if (showOsd) {
-                // If hovering over OSD area while in shortcut mode, transition to hover control
+			if (showOsd) {
 				osdShortcutActive = false;
 				root.panels.osd.hovered = true;
 			}
-
-            // const showSidebar = pressed && dragStart.x > bar.implicitWidth + panels.sidebar.x;
-            //
-            // // Show/hide session on drag
-            // if (pressed && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) {
-            //     if (dragX < -Config.session.dragThreshold)
-            //         visibilities.session = true;
-            //     else if (dragX > Config.session.dragThreshold)
-            //         visibilities.session = false;
-            //
-            //     // Show sidebar on drag if in session area and session is nearly fully visible
-            //     if (showSidebar && panels.session.width >= panels.session.nonAnimWidth && dragX < -Config.sidebar.dragThreshold)
-            //         visibilities.sidebar = true;
-            // } else if (showSidebar && dragX < -Config.sidebar.dragThreshold) {
-            //     // Show sidebar on drag if not in session area
-            //     visibilities.sidebar = true;
-            // }
 		} else {
 			const outOfSidebar = x < width - panels.sidebar.width;
-            // Show osd on hover
 			const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y);
 
-            // Always update visibility based on hover if not in shortcut mode
 			if (!osdShortcutActive) {
 				visibilities.osd = showOsd;
 				root.panels.osd.hovered = showOsd;
 			} else if (showOsd) {
-                // If hovering over OSD area while in shortcut mode, transition to hover control
 				osdShortcutActive = false;
 				root.panels.osd.hovered = true;
 			}
-            //
-            // // Show/hide session on drag
-            // if (pressed && outOfSidebar && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) {
-            //     if (dragX < -Config.session.dragThreshold)
-            //         visibilities.session = true;
-            //     else if (dragX > Config.session.dragThreshold)
-            //         visibilities.session = false;
-            // }
-            //
-            // // Hide sidebar on drag
-            // if (pressed && inRightPanel(panels.sidebar, dragStart.x, 0) && dragX > Config.sidebar.dragThreshold)
-            //     visibilities.sidebar = false;
 		}
 
-        // Show launcher on hover, or show/hide on drag if hover is disabled
-        // if (Config.launcher.showOnHover) {
-        //     if (!visibilities.launcher && inBottomPanel(panels.launcher, x, y))
-        //         visibilities.launcher = true;
-        // } else if (pressed && inBottomPanel(panels.launcher, dragStart.x, dragStart.y) && withinPanelWidth(panels.launcher, x, y)) {
-        //     if (dragY < -Config.launcher.dragThreshold)
-        //         visibilities.launcher = true;
-        //     else if (dragY > Config.launcher.dragThreshold)
-        //         visibilities.launcher = false;
-        // }
-        //
-        // // Show dashboard on hover
-        // const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboard, x, y);
-        //
-        // // Always update visibility based on hover if not in shortcut mode
-        // if (!dashboardShortcutActive) {
-        //     visibilities.dashboard = showDashboard;
-        // } else if (showDashboard) {
-        //     // If hovering over dashboard area while in shortcut mode, transition to hover control
-        //     dashboardShortcutActive = false;
-        // }
-        //
-        // // Show/hide dashboard on drag (for touchscreen devices)
-        // if (pressed && inTopPanel(panels.dashboard, dragStart.x, dragStart.y) && withinPanelWidth(panels.dashboard, x, y)) {
-        //     if (dragY > Config.dashboard.dragThreshold)
-        //         visibilities.dashboard = true;
-        //     else if (dragY < -Config.dashboard.dragThreshold)
-        //         visibilities.dashboard = false;
-        // }
-        //
-        // // Show utilities on hover
-        // const showUtilities = inBottomPanel(panels.utilities, x, y);
-        //
-        // // Always update visibility based on hover if not in shortcut mode
-        // if (!utilitiesShortcutActive) {
-        //     visibilities.utilities = showUtilities;
-        // } else if (showUtilities) {
-        //     // If hovering over utilities area while in shortcut mode, transition to hover control
-        //     utilitiesShortcutActive = false;
-        // }
+		if (!visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
+			visibilities.dock = true;
 
-        // Show popouts on hover
-        if (y < bar.implicitHeight) {
-            bar.checkPopout(x);
+		if (y < root.bar.implicitHeight) {
+			root.bar.checkPopout(x);
 		}
 	}
 
-    // Monitor individual visibility changes
 	Connections {
-        target: root.visibilities
+		function onDashboardChanged() {
+			if (root.visibilities.dashboard) {
+				const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
+				if (!inDashboardArea) {
+					root.dashboardShortcutActive = true;
+				}
+
+				root.visibilities.settings = false;
+				root.visibilities.sidebar = false;
+				root.popouts.hasCurrent = false;
+			} else {
+				root.dashboardShortcutActive = false;
+			}
+		}
+
+		function onIsDrawingChanged() {
+			if (!root.visibilities.isDrawing)
+				root.drawing.clear();
+		}
 
 		function onLauncherChanged() {
-            // If launcher is hidden, clear shortcut flags for dashboard and OSD
 			if (!root.visibilities.launcher) {
 				root.dashboardShortcutActive = false;
 				root.osdShortcutActive = false;
 				root.utilitiesShortcutActive = false;
 
-                // Also hide dashboard and OSD if they're not being hovered
-                const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
 				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
 
-                if (!inDashboardArea) {
-                    root.visibilities.dashboard = false;
-                }
 				if (!inOsdArea) {
 					root.visibilities.osd = false;
 					root.panels.osd.hovered = false;
 				}
 			}
+
+			if (root.visibilities.launcher) {
+				root.visibilities.dock = false;
+				root.visibilities.settings = false;
+			}
+		}
+
+		function onOsdChanged() {
+			if (root.visibilities.osd) {
+				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
+				if (!inOsdArea) {
+					root.osdShortcutActive = true;
+				}
+			} else {
+				root.osdShortcutActive = false;
+			}
+		}
+
+		function onResourcesChanged() {
+			if (root.visibilities.resources && root.popouts.currentName.startsWith("audio")) {
+				root.popouts.hasCurrent = false;
+			}
+
+			if (root.visibilities.resources)
+				root.visibilities.settings = false;
+		}
+
+		function onSettingsChanged() {
+			if (root.visibilities.settings) {
+				root.visibilities.resources = false;
+				root.visibilities.dashboard = false;
+				root.panels.popouts.hasCurrent = false;
+				root.visibilities.launcher = false;
+			}
 		}
 
 		function onSidebarChanged() {
@@ -230,49 +192,17 @@ CustomMouseArea {
 			}
 		}
 
-        function onDashboardChanged() {
-            if (root.visibilities.dashboard) {
-                // Dashboard became visible, immediately check if this should be shortcut mode
-                const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
-                if (!inDashboardArea) {
-                    root.dashboardShortcutActive = true;
-                }
-
-				root.visibilities.sidebar = false;
-				root.popouts.hasCurrent = false;
-
-            } else {
-                // Dashboard hidden, clear shortcut flag
-                root.dashboardShortcutActive = false;
-				// root.visibilities.bar = false;
-            }
-        }
-
-        function onOsdChanged() {
-            if (root.visibilities.osd) {
-                // OSD became visible, immediately check if this should be shortcut mode
-                const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
-				console.log(inOsdArea);
-                if (!inOsdArea) {
-                    root.osdShortcutActive = true;
-                }
-            } else {
-                // OSD hidden, clear shortcut flag
-                root.osdShortcutActive = false;
-            }
-        }
-
 		function onUtilitiesChanged() {
 			if (root.visibilities.utilities) {
-                // Utilities became visible, immediately check if this should be shortcut mode
 				const inUtilitiesArea = root.inBottomPanel(root.panels.utilities, root.mouseX, root.mouseY);
 				if (!inUtilitiesArea) {
 					root.utilitiesShortcutActive = true;
 				}
 			} else {
-                // Utilities hidden, clear shortcut flag
 				root.utilitiesShortcutActive = false;
 			}
 		}
+
+		target: root.visibilities
 	}
 }

Drawers/Panels.qml

@@ -1,6 +1,6 @@
 import Quickshell
 import QtQuick
-import QtQuick.Shapes
+import qs.Components
 import qs.Modules as Modules
 import qs.Modules.Notifications as Notifications
 import qs.Modules.Notifications.Sidebar as Sidebar
@@ -9,50 +9,70 @@ import qs.Modules.Dashboard as Dashboard
 import qs.Modules.Osd as Osd
 import qs.Components.Toast as Toasts
 import qs.Modules.Launcher as Launcher
+import qs.Modules.Resources as Resources
+import qs.Modules.Settings as Settings
+import qs.Modules.Drawing as Drawing
+import qs.Modules.Dock as Dock
 import qs.Config
 
 Item {
 	id: root
 
-    required property ShellScreen screen
 	required property Item bar
+	readonly property alias dashboard: dashboard
+	readonly property alias dock: dock
+	readonly property alias drawing: drawing
+	required property Canvas drawingItem
+	readonly property alias launcher: launcher
+	readonly property alias notifications: notifications
+	readonly property alias osd: osd
+	readonly property alias popouts: popouts
+	readonly property alias resources: resources
+	required property ShellScreen screen
+	readonly property alias settings: settings
+	readonly property alias sidebar: sidebar
+	readonly property alias toasts: toasts
+	readonly property alias utilities: utilities
 	required property PersistentProperties visibilities
 
-    readonly property alias popouts: popouts
-	readonly property alias sidebar: sidebar
-	readonly property alias notifications: notifications
-	readonly property alias utilities: utilities
-	readonly property alias dashboard: dashboard
-	readonly property alias osd: osd
-	readonly property alias toasts: toasts
-	readonly property alias launcher: launcher
-
 	anchors.fill: parent
-    // anchors.margins: 8
-    anchors.topMargin: Config.barConfig.autoHide && !visibilities.bar ? 0 : bar.implicitHeight
-	Behavior on anchors.topMargin {
-		Modules.Anim {}
+	anchors.margins: Config.barConfig.border
+	anchors.topMargin: bar.implicitHeight
+
+	Resources.Wrapper {
+		id: resources
+
+		anchors.left: parent.left
+		anchors.top: parent.top
+		visibilities: root.visibilities
+	}
+
+	Drawing.Wrapper {
+		id: drawing
+
+		anchors.left: parent.left
+		anchors.verticalCenter: parent.verticalCenter
+		drawing: root.drawingItem
+		screen: root.screen
+		visibilities: root.visibilities
 	}
 
 	Osd.Wrapper {
 		id: osd
 
+		anchors.right: parent.right
+		anchors.rightMargin: sidebar.width
+		anchors.verticalCenter: parent.verticalCenter
 		clip: sidebar.width > 0
 		screen: root.screen
 		visibilities: root.visibilities
-
-		anchors.verticalCenter: parent.verticalCenter
-		anchors.right: parent.right
-		anchors.rightMargin: sidebar.width
 	}
 
 	Modules.Wrapper {
 		id: popouts
 
-        screen: root.screen
-
 		anchors.top: parent.top
-
+		screen: root.screen
 		x: {
 			const off = currentCenter - nonAnimWidth / 2;
 			const diff = root.width - Math.floor(off + nonAnimWidth);
@@ -66,59 +86,74 @@ Item {
 		id: toasts
 
 		anchors.bottom: sidebar.visible ? parent.bottom : utilities.top
-		anchors.right: sidebar.left
 		anchors.margins: Appearance.padding.normal
+		anchors.right: sidebar.left
 	}
 
 	Notifications.Wrapper {
 		id: notifications
 
-		visibilities: root.visibilities
-		panels: root
-
-		anchors.top: parent.top
 		anchors.right: parent.right
+		anchors.top: parent.top
+		panels: root
+		visibilities: root.visibilities
 	}
 
 	Launcher.Wrapper {
 		id: launcher
 
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
+		panels: root
 		screen: root.screen
 		visibilities: root.visibilities
-		panels: root
-
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.bottom: parent.bottom
 	}
 
 	Utils.Wrapper {
 		id: utilities
 
-		visibilities: root.visibilities
-		sidebar: sidebar
-		popouts: popouts
-
 		anchors.bottom: parent.bottom
 		anchors.right: parent.right
+		popouts: popouts
+		sidebar: sidebar
+		visibilities: root.visibilities
 	}
 
 	Dashboard.Wrapper {
 		id: dashboard
 
-		visibilities: root.visibilities
-
 		anchors.right: parent.right
 		anchors.top: parent.top
+		visibilities: root.visibilities
 	}
 
 	Sidebar.Wrapper {
 		id: sidebar
 
-		visibilities: root.visibilities
-		panels: root
-
-		anchors.top: notifications.bottom
 		anchors.bottom: utilities.top
 		anchors.right: parent.right
+		anchors.top: notifications.bottom
+		panels: root
+		visibilities: root.visibilities
+	}
+
+	Settings.Wrapper {
+		id: settings
+
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		panels: root
+		screen: root.screen
+		visibilities: root.visibilities
+	}
+
+	Dock.Wrapper {
+		id: dock
+
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
+		panels: root
+		screen: root.screen
+		visibilities: root.visibilities
 	}
 }

Drawers/Windows.qml

@@ -0,0 +1,212 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Daemons
+import qs.Components
+import qs.Modules
+import qs.Modules.Bar
+import qs.Config
+import qs.Helpers
+import qs.Drawers
+
+Variants {
+	model: Quickshell.screens
+
+	Scope {
+		id: scope
+
+		required property var modelData
+
+		Exclusions {
+			bar: bar
+			screen: scope.modelData
+		}
+
+		CustomWindow {
+			id: win
+
+			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
+			property var root: Quickshell.shellDir
+
+			WlrLayershell.exclusionMode: ExclusionMode.Ignore
+			WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+			color: "transparent"
+			contentItem.focus: true
+			mask: visibilities.isDrawing ? null : region
+			name: "Bar"
+			screen: scope.modelData
+
+			contentItem.Keys.onEscapePressed: {
+				if (Config.barConfig.autoHide)
+					visibilities.bar = false;
+				visibilities.sidebar = false;
+				visibilities.dashboard = false;
+				visibilities.osd = false;
+				visibilities.settings = false;
+				visibilities.resources = false;
+			}
+			onHasFullscreenChanged: {
+				visibilities.launcher = false;
+				visibilities.dashboard = false;
+				visibilities.osd = false;
+				visibilities.settings = false;
+				visibilities.resources = false;
+			}
+
+			Region {
+				id: region
+
+				height: win.height - bar.implicitHeight - Config.barConfig.border
+				intersection: Intersection.Xor
+				regions: popoutRegions.instances
+				width: win.width - Config.barConfig.border * 2
+				x: Config.barConfig.border
+				y: bar.implicitHeight
+			}
+
+			anchors {
+				bottom: true
+				left: true
+				right: true
+				top: true
+			}
+
+			Variants {
+				id: popoutRegions
+
+				model: panels.children
+
+				Region {
+					required property Item modelData
+
+					height: modelData.height
+					intersection: Intersection.Subtract
+					width: modelData.width
+					x: modelData.x + Config.barConfig.border
+					y: modelData.y + bar.implicitHeight
+				}
+			}
+
+			HyprlandFocusGrab {
+				id: focusGrab
+
+				active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
+				windows: [win]
+
+				onCleared: {
+					visibilities.launcher = false;
+					visibilities.sidebar = false;
+					visibilities.dashboard = false;
+					visibilities.osd = false;
+					visibilities.settings = false;
+					visibilities.resources = false;
+					visibilities.dock = false;
+					panels.popouts.hasCurrent = false;
+				}
+			}
+
+			PersistentProperties {
+				id: visibilities
+
+				property bool bar
+				property bool dashboard
+				property bool dock
+				property bool isDrawing
+				property bool launcher
+				property bool notif: NotifServer.popups.length > 0
+				property bool osd
+				property bool resources
+				property bool settings
+				property bool sidebar
+
+				Component.onCompleted: Visibilities.load(scope.modelData, this)
+			}
+
+			Binding {
+				property: "bar"
+				target: visibilities
+				value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || visibilities.notif || visibilities.resources || visibilities.settings || bar.isHovered
+				when: Config.barConfig.autoHide
+			}
+
+			Item {
+				anchors.fill: parent
+				layer.enabled: true
+				opacity: Appearance.transparency.enabled ? DynamicColors.transparency.base : 1
+
+				layer.effect: MultiEffect {
+					blurMax: 32
+					shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
+					shadowEnabled: true
+				}
+
+				Border {
+					bar: bar
+					visibilities: visibilities
+				}
+
+				Backgrounds {
+					bar: bar
+					panels: panels
+					visibilities: visibilities
+					z: 1
+				}
+			}
+
+			Drawing {
+				id: drawing
+
+				anchors.fill: parent
+				z: 2
+			}
+
+			DrawingInput {
+				id: input
+
+				bar: bar
+				drawing: drawing
+				panels: panels
+				popout: panels.drawing
+				visibilities: visibilities
+				z: 2
+			}
+
+			Interactions {
+				id: mouseArea
+
+				anchors.fill: parent
+				bar: bar
+				drawing: drawing
+				input: input
+				panels: panels
+				popouts: panels.popouts
+				screen: scope.modelData
+				visibilities: visibilities
+				z: 1
+
+				Panels {
+					id: panels
+
+					bar: bar
+					drawingItem: drawing
+					screen: scope.modelData
+					visibilities: visibilities
+				}
+
+				BarLoader {
+					id: bar
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					popouts: panels.popouts
+					screen: scope.modelData
+					visibilities: visibilities
+				}
+			}
+		}
+	}
+}

Effects/ShadowRect.qml

@@ -3,28 +3,31 @@ import QtQuick.Effects
 
 Item {
 	id: root
+
 	property real radius
 
 	Rectangle {
 		id: shadowRect
+
 		anchors.fill: root
-        radius: root.radius
-        layer.enabled: true
 		color: "black"
+		layer.enabled: true
+		radius: root.radius
 		visible: false
 	}
 
 	MultiEffect {
 		id: effects
-        source: shadowRect
+
 		anchors.fill: shadowRect
-        shadowBlur: 2.0
-        shadowEnabled: true
-        shadowOpacity: 1
-        shadowColor: "black"
-        maskSource: shadowRect
+		autoPaddingEnabled: true
 		maskEnabled: true
 		maskInverted: true
-        autoPaddingEnabled: true
+		maskSource: shadowRect
+		shadowBlur: 2.0
+		shadowColor: "black"
+		shadowEnabled: true
+		shadowOpacity: 1
+		source: shadowRect
 	}
 }

Greeter/Center.qml

@@ -0,0 +1,388 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Paths
+import qs.Components
+import qs.Helpers
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	readonly property real centerScale: Math.min(1, screenHeight / 1440)
+	readonly property int centerWidth: Config.lock.sizes.centerWidth * centerScale
+	required property var greeter
+	required property real screenHeight
+
+	Layout.fillHeight: true
+	Layout.fillWidth: false
+	Layout.preferredWidth: centerWidth
+	spacing: Appearance.spacing.large * 2
+
+	RowLayout {
+		Layout.alignment: Qt.AlignHCenter
+		spacing: Appearance.spacing.small
+
+		CustomText {
+			Layout.alignment: Qt.AlignVCenter
+			color: DynamicColors.palette.m3secondary
+			font.bold: true
+			font.family: Appearance.font.family.clock
+			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			text: Time.hourStr
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignVCenter
+			color: DynamicColors.palette.m3primary
+			font.bold: true
+			font.family: Appearance.font.family.clock
+			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			text: ":"
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignVCenter
+			color: DynamicColors.palette.m3secondary
+			font.bold: true
+			font.family: Appearance.font.family.clock
+			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			text: Time.minuteStr
+		}
+	}
+
+	CustomText {
+		Layout.alignment: Qt.AlignHCenter
+		Layout.topMargin: -Appearance.padding.large * 2
+		color: DynamicColors.palette.m3tertiary
+		font.bold: true
+		font.family: Appearance.font.family.mono
+		font.pointSize: Math.floor(Appearance.font.size.extraLarge * root.centerScale)
+		text: Time.format("dddd, d MMMM yyyy")
+	}
+
+	CustomClippingRect {
+		Layout.alignment: Qt.AlignHCenter
+		Layout.topMargin: Appearance.spacing.large * 2
+		color: DynamicColors.tPalette.m3surfaceContainer
+		implicitHeight: root.centerWidth / 2
+		implicitWidth: root.centerWidth / 2
+		radius: Appearance.rounding.full
+
+		MaterialIcon {
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Math.floor(root.centerWidth / 4)
+			text: "person"
+		}
+
+		CachingImage {
+			id: pfp
+
+			anchors.fill: parent
+			path: `${Paths.home}/.face`
+		}
+	}
+
+	CustomText {
+		Layout.alignment: Qt.AlignHCenter
+		color: DynamicColors.palette.m3onSurfaceVariant
+		font.family: Appearance.font.family.mono
+		font.pointSize: Appearance.font.size.normal
+		font.weight: 600
+		text: root.greeter.username
+		visible: text.length > 0
+	}
+
+	CustomRect {
+		Layout.alignment: Qt.AlignHCenter
+		color: DynamicColors.tPalette.m3surfaceContainer
+		focus: true
+		implicitHeight: input.implicitHeight + Appearance.padding.small * 2
+		implicitWidth: root.centerWidth * 0.8
+		radius: Appearance.rounding.full
+
+		Keys.onPressed: event => {
+			if (root.greeter.launching)
+				return;
+
+			if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
+				inputField.placeholder.animate = false;
+
+			root.greeter.handleKey(event);
+		}
+		onActiveFocusChanged: {
+			if (!activeFocus)
+				forceActiveFocus();
+		}
+
+		StateLayer {
+			function onClicked(): void {
+				parent.forceActiveFocus();
+			}
+
+			cursorShape: Qt.IBeamCursor
+			hoverEnabled: false
+		}
+
+		RowLayout {
+			id: input
+
+			anchors.fill: parent
+			anchors.margins: Appearance.padding.small
+			spacing: Appearance.spacing.normal
+
+			Item {
+				implicitHeight: statusIcon.implicitHeight + Appearance.padding.small * 2
+				implicitWidth: implicitHeight
+
+				MaterialIcon {
+					id: statusIcon
+
+					anchors.centerIn: parent
+					animate: true
+					color: root.greeter.errorMessage ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+					opacity: root.greeter.launching ? 0 : 1
+					text: {
+						if (root.greeter.errorMessage)
+							return "error";
+						if (root.greeter.awaitingResponse)
+							return root.greeter.echoResponse ? "person" : "lock";
+						if (root.greeter.buffer.length > 0)
+							return "password";
+						return "login";
+					}
+
+					Behavior on opacity {
+						Anim {
+						}
+					}
+				}
+
+				CircularIndicator {
+					anchors.fill: parent
+					running: root.greeter.launching
+				}
+			}
+
+			InputField {
+				id: inputField
+
+				greeter: root.greeter
+			}
+
+			CustomRect {
+				color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+				implicitHeight: enterIcon.implicitHeight + Appearance.padding.small * 2
+				implicitWidth: implicitHeight
+				radius: Appearance.rounding.full
+
+				StateLayer {
+					function onClicked(): void {
+						root.greeter.submit();
+					}
+
+					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				}
+
+				MaterialIcon {
+					id: enterIcon
+
+					anchors.centerIn: parent
+					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					font.weight: 500
+					text: root.greeter.launching ? "hourglass_top" : "arrow_forward"
+				}
+			}
+		}
+	}
+
+	Item {
+		Layout.fillWidth: true
+		Layout.topMargin: -Appearance.spacing.large
+		implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
+
+		Behavior on implicitHeight {
+			Anim {
+			}
+		}
+
+		CustomText {
+			id: stateMessage
+
+			readonly property string msg: {
+				if (Hypr.kbLayout !== Hypr.defaultKbLayout) {
+					if (Hypr.capsLock && Hypr.numLock)
+						return qsTr("Caps lock and Num lock are ON.\nKeyboard layout: %1").arg(Hypr.kbLayoutFull);
+					if (Hypr.capsLock)
+						return qsTr("Caps lock is ON. Kb layout: %1").arg(Hypr.kbLayoutFull);
+					if (Hypr.numLock)
+						return qsTr("Num lock is ON. Kb layout: %1").arg(Hypr.kbLayoutFull);
+					return qsTr("Keyboard layout: %1").arg(Hypr.kbLayoutFull);
+				}
+
+				if (Hypr.capsLock && Hypr.numLock)
+					return qsTr("Caps lock and Num lock are ON.");
+				if (Hypr.capsLock)
+					return qsTr("Caps lock is ON.");
+				if (Hypr.numLock)
+					return qsTr("Num lock is ON.");
+
+				return "";
+			}
+			property bool shouldBeVisible
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			animateProp: "opacity"
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.family: Appearance.font.family.mono
+			horizontalAlignment: Qt.AlignHCenter
+			lineHeight: 1.2
+			opacity: shouldBeVisible && !message.msg ? 1 : 0
+			scale: shouldBeVisible && !message.msg ? 1 : 0.7
+			wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+			Behavior on opacity {
+				Anim {
+				}
+			}
+			Behavior on scale {
+				Anim {
+				}
+			}
+
+			onMsgChanged: {
+				if (msg) {
+					if (opacity > 0) {
+						animate = true;
+						text = msg;
+						animate = false;
+					} else {
+						text = msg;
+					}
+					shouldBeVisible = true;
+				} else {
+					shouldBeVisible = false;
+				}
+			}
+		}
+
+		CustomText {
+			id: message
+
+			readonly property bool isError: !!root.greeter.errorMessage
+			readonly property string msg: {
+				if (root.greeter.errorMessage)
+					return root.greeter.errorMessage;
+
+				if (root.greeter.launching) {
+					if (root.greeter.selectedSession && root.greeter.selectedSession.name)
+						return qsTr("Starting %1...").arg(root.greeter.selectedSession.name);
+					return qsTr("Starting session...");
+				}
+
+				if (root.greeter.awaitingResponse && root.greeter.promptMessage)
+					return root.greeter.promptMessage;
+
+				return "";
+			}
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+			font.family: Appearance.font.family.mono
+			font.pointSize: Appearance.font.size.small
+			horizontalAlignment: Qt.AlignHCenter
+			opacity: 0
+			scale: 0.7
+			wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+			onMsgChanged: {
+				if (msg) {
+					if (opacity > 0) {
+						animate = true;
+						text = msg;
+						animate = false;
+
+						exitAnim.stop();
+						if (scale < 1)
+							appearAnim.restart();
+						else
+							flashAnim.restart();
+					} else {
+						text = msg;
+						exitAnim.stop();
+						appearAnim.restart();
+					}
+				} else {
+					appearAnim.stop();
+					flashAnim.stop();
+					exitAnim.start();
+				}
+			}
+
+			Connections {
+				function onFlashMsg(): void {
+					exitAnim.stop();
+					if (message.scale < 1)
+						appearAnim.restart();
+					else
+						flashAnim.restart();
+				}
+
+				target: root.greeter
+			}
+
+			Anim {
+				id: appearAnim
+
+				properties: "scale,opacity"
+				target: message
+				to: 1
+
+				onFinished: flashAnim.restart()
+			}
+
+			SequentialAnimation {
+				id: flashAnim
+
+				loops: 2
+
+				FlashAnim {
+					to: 0.3
+				}
+
+				FlashAnim {
+					to: 1
+				}
+			}
+
+			ParallelAnimation {
+				id: exitAnim
+
+				Anim {
+					duration: Appearance.anim.durations.large
+					property: "scale"
+					target: message
+					to: 0.7
+				}
+
+				Anim {
+					duration: Appearance.anim.durations.large
+					property: "opacity"
+					target: message
+					to: 0
+				}
+			}
+		}
+	}
+
+	component FlashAnim: NumberAnimation {
+		duration: Appearance.anim.durations.small
+		easing.type: Easing.Linear
+		property: "opacity"
+		target: message
+	}
+}

Greeter/Components/Anim.qml

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

Greeter/Components/AnimatedTabIndexPair.qml

@@ -0,0 +1,24 @@
+import QtQuick
+
+QtObject {
+	id: root
+
+	property real idx1: index
+	property int idx1Duration: 100
+	property real idx2: index
+	property int idx2Duration: 300
+	required property int index
+
+	Behavior on idx1 {
+		NumberAnimation {
+			duration: root.idx1Duration
+			easing.type: Easing.OutSine
+		}
+	}
+	Behavior on idx2 {
+		NumberAnimation {
+			duration: root.idx2Duration
+			easing.type: Easing.OutSine
+		}
+	}
+}

Greeter/Components/BaseStyledSlider.qml

@@ -0,0 +1,165 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+
+Slider {
+	id: root
+
+	property color color: DynamicColors.palette.m3secondary
+	required property string icon
+	property bool initialized: false
+	readonly property bool isHorizontal: orientation === Qt.Horizontal
+	readonly property bool isVertical: orientation === Qt.Vertical
+	property real multiplier: 100
+	property real oldValue
+
+	// Wrapper components can inject their own track visuals here.
+	property Component trackContent
+
+	// Keep current behavior for existing usages.
+	orientation: Qt.Vertical
+
+	background: CustomRect {
+		id: groove
+
+		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		height: root.availableHeight
+		radius: Appearance.rounding.full
+		width: root.availableWidth
+		x: root.leftPadding
+		y: root.topPadding
+
+		Loader {
+			id: trackLoader
+
+			anchors.fill: parent
+			sourceComponent: root.trackContent
+
+			onLoaded: {
+				if (!item)
+					return;
+
+				item.rootSlider = root;
+				item.groove = groove;
+				item.handleItem = handle;
+			}
+		}
+	}
+	handle: Item {
+		id: handle
+
+		property alias moving: icon.moving
+
+		implicitHeight: Math.min(root.width, root.height)
+		implicitWidth: Math.min(root.width, root.height)
+		x: root.isHorizontal ? root.leftPadding + root.visualPosition * (root.availableWidth - width) : root.leftPadding + (root.availableWidth - width) / 2
+		y: root.isVertical ? root.topPadding + root.visualPosition * (root.availableHeight - height) : root.topPadding + (root.availableHeight - height) / 2
+
+		Elevation {
+			anchors.fill: parent
+			level: handleInteraction.containsMouse ? 2 : 1
+			radius: rect.radius
+		}
+
+		CustomRect {
+			id: rect
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3inverseSurface
+			radius: Appearance.rounding.full
+
+			MouseArea {
+				id: handleInteraction
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: Qt.PointingHandCursor
+				hoverEnabled: true
+			}
+
+			MaterialIcon {
+				id: icon
+
+				property bool moving
+
+				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.centerIn: parent
+				color: DynamicColors.palette.m3inverseOnSurface
+				text: root.icon
+
+				onMovingChanged: anim.restart()
+
+				Binding {
+					id: binding
+
+					property: "text"
+					target: icon
+					value: Math.round(root.value * root.multiplier)
+					when: false
+				}
+
+				SequentialAnimation {
+					id: anim
+
+					Anim {
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						property: "scale"
+						target: icon
+						to: 0
+					}
+
+					ScriptAction {
+						script: icon.update()
+					}
+
+					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
+		}
+	}
+
+	onPressedChanged: handle.moving = pressed
+	onValueChanged: {
+		if (!initialized) {
+			initialized = true;
+			oldValue = value;
+			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;
+		}
+	}
+}

Greeter/Components/CAnim.qml

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

Greeter/Components/CircularIndicator.qml

@@ -0,0 +1,102 @@
+import qs.Config
+import ZShell.Internal
+import QtQuick
+import QtQuick.Templates
+
+BusyIndicator {
+	id: root
+
+	enum AnimState {
+		Stopped,
+		Running,
+		Completing
+	}
+	enum AnimType {
+		Advance = 0,
+		Retreat
+	}
+
+	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
+
+	implicitHeight: implicitSize
+	implicitWidth: implicitSize
+	padding: 0
+
+	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
+
+		PropertyChanges {
+			root.internalStrokeWidth: root.strokeWidth / 3
+			root.opacity: 0
+		}
+	}
+	transitions: Transition {
+		Anim {
+			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			properties: "opacity,internalStrokeWidth"
+		}
+	}
+
+	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;
+		}
+	}
+
+	CircularIndicatorManager {
+		id: manager
+
+	}
+
+	NumberAnimation {
+		duration: manager.duration * Appearance.anim.durations.scale
+		from: 0
+		loops: Animation.Infinite
+		property: "progress"
+		running: root.animState !== CircularIndicator.Stopped
+		target: manager
+		to: 1
+	}
+
+	NumberAnimation {
+		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		from: 0
+		property: "completeEndProgress"
+		running: root.animState === CircularIndicator.Completing
+		target: manager
+		to: 1
+
+		onFinished: {
+			if (root.animState === CircularIndicator.Completing)
+				root.animState = CircularIndicator.Stopped;
+		}
+	}
+}

Greeter/Components/CircularProgress.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Config
+
+Shape {
+	id: root
+
+	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
+
+	asynchronous: true
+	preferredRendererType: Shape.CurveRenderer
+
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.bgColour
+		strokeWidth: root.strokeWidth
+
+		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 + 360 * root.vValue + root.gapAngle
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
+		}
+	}
+
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.fgColour
+		strokeWidth: root.strokeWidth
+
+		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
+		}
+	}
+}

Greeter/Components/CollapsibleSection.qml

@@ -0,0 +1,135 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	default property alias content: contentColumn.data
+	property string description: ""
+	property bool expanded: false
+	property bool nested: false
+	property bool showBackground: false
+	required property string title
+
+	signal toggleRequested
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.small
+
+	Item {
+		id: sectionHeaderItem
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
+
+		RowLayout {
+			id: titleRow
+
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: Appearance.spacing.normal
+
+			CustomText {
+				font.pointSize: Appearance.font.size.larger
+				font.weight: 500
+				text: root.title
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				rotation: root.expanded ? 180 : 0
+				text: "expand_more"
+
+				Behavior on rotation {
+					Anim {
+						duration: Appearance.anim.durations.small
+						easing.bezierCurve: Appearance.anim.curves.standard
+					}
+				}
+			}
+		}
+
+		StateLayer {
+			function onClicked(): void {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3onSurface
+			radius: Appearance.rounding.normal
+			showHoverBackground: false
+		}
+	}
+
+	Item {
+		id: contentWrapper
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+		clip: true
+
+		Behavior on Layout.preferredHeight {
+			Anim {
+				easing.bezierCurve: Appearance.anim.curves.standard
+			}
+		}
+
+		CustomRect {
+			id: backgroundRect
+
+			anchors.fill: parent
+			color: DynamicColors.transparency.enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3surfaceContainer)
+			opacity: root.showBackground && root.expanded ? 1.0 : 0.0
+			radius: Appearance.rounding.normal
+			visible: root.showBackground
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+		}
+
+		ColumnLayout {
+			id: contentColumn
+
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			opacity: root.expanded ? 1.0 : 0.0
+			spacing: Appearance.spacing.small
+			y: Appearance.spacing.small
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+
+			CustomText {
+				id: descriptionText
+
+				Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
+				Layout.fillWidth: true
+				Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.small
+				text: root.description
+				visible: root.description !== ""
+				wrapMode: Text.Wrap
+			}
+		}
+	}
+}

Greeter/Components/ColorArcPicker.qml

@@ -0,0 +1,208 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Config
+
+Item {
+	id: root
+
+	readonly property real arcStartAngle: 0.75 * Math.PI
+	readonly property real arcSweep: 1.5 * Math.PI
+	property real currentHue: 0
+	property bool dragActive: false
+	required property var drawing
+	readonly property real handleAngle: hueToAngle(currentHue)
+	readonly property real handleCenterX: width / 2 + radius * Math.cos(handleAngle)
+	readonly property real handleCenterY: height / 2 + radius * Math.sin(handleAngle)
+	property real handleSize: 32
+	property real lastChromaticHue: 0
+	readonly property real radius: (Math.min(width, height) - handleSize) / 2
+	readonly property int segmentCount: 240
+	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+
+	function hueToAngle(hue) {
+		return arcStartAngle + arcSweep * hue;
+	}
+
+	function normalizeAngle(angle) {
+		const tau = Math.PI * 2;
+		let a = angle % tau;
+		if (a < 0)
+			a += tau;
+		return a;
+	}
+
+	function pointIsOnTrack(x, y) {
+		const cx = width / 2;
+		const cy = height / 2;
+		const dx = x - cx;
+		const dy = y - cy;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		return distance >= radius - handleSize / 2 && distance <= radius + handleSize / 2;
+	}
+
+	function syncFromPenColor() {
+		if (!drawing)
+			return;
+
+		const c = drawing.penColor;
+
+		if (c.hsvSaturation > 0) {
+			currentHue = c.hsvHue;
+			lastChromaticHue = c.hsvHue;
+		} else {
+			currentHue = lastChromaticHue;
+		}
+
+		canvas.requestPaint();
+	}
+
+	function updateHueFromPoint(x, y, force = false) {
+		const cx = width / 2;
+		const cy = height / 2;
+		const dx = x - cx;
+		const dy = y - cy;
+
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (!force && (distance < radius - handleSize / 2 || distance > radius + handleSize / 2))
+			return;
+
+		const angle = normalizeAngle(Math.atan2(dy, dx));
+		const start = normalizeAngle(arcStartAngle);
+
+		let relative = angle - start;
+		if (relative < 0)
+			relative += Math.PI * 2;
+
+		if (relative > arcSweep) {
+			const gap = Math.PI * 2 - arcSweep;
+			relative = relative < arcSweep + gap / 2 ? arcSweep : 0;
+		}
+
+		currentHue = relative / arcSweep;
+		lastChromaticHue = currentHue;
+		drawing.penColor = Qt.hsva(currentHue, drawing.penColor.hsvSaturation, drawing.penColor.hsvValue, drawing.penColor.a);
+	}
+
+	implicitHeight: 180
+	implicitWidth: 220
+
+	Component.onCompleted: syncFromPenColor()
+	onCurrentHueChanged: canvas.requestPaint()
+	onDrawingChanged: syncFromPenColor()
+	onHandleSizeChanged: canvas.requestPaint()
+	onHeightChanged: canvas.requestPaint()
+	onWidthChanged: canvas.requestPaint()
+
+	Connections {
+		function onPenColorChanged() {
+			root.syncFromPenColor();
+		}
+
+		target: root.drawing
+	}
+
+	Canvas {
+		id: canvas
+
+		anchors.fill: parent
+		renderStrategy: Canvas.Threaded
+		renderTarget: Canvas.Image
+
+		Component.onCompleted: requestPaint()
+		onPaint: {
+			const ctx = getContext("2d");
+			ctx.reset();
+			ctx.clearRect(0, 0, width, height);
+
+			const cx = width / 2;
+			const cy = height / 2;
+			const radius = root.radius;
+			const trackWidth = root.handleSize;
+
+			// Background track: always show the full hue spectrum
+			for (let i = 0; i < root.segmentCount; ++i) {
+				const t1 = i / root.segmentCount;
+				const t2 = (i + 1) / root.segmentCount;
+				const a1 = root.arcStartAngle + root.arcSweep * t1;
+				const a2 = root.arcStartAngle + root.arcSweep * t2;
+
+				ctx.beginPath();
+				ctx.arc(cx, cy, radius, a1, a2);
+				ctx.lineWidth = trackWidth;
+				ctx.lineCap = "round";
+				ctx.strokeStyle = Qt.hsla(t1, 1.0, 0.5, 1.0);
+				ctx.stroke();
+			}
+		}
+	}
+
+	Item {
+		id: handle
+
+		height: root.handleSize
+		width: root.handleSize
+		x: root.handleCenterX - width / 2
+		y: root.handleCenterY - height / 2
+		z: 1
+
+		Elevation {
+			anchors.fill: parent
+			level: handleHover.containsMouse ? 2 : 1
+			radius: rect.radius
+		}
+
+		Rectangle {
+			id: rect
+
+			anchors.fill: parent
+			color: root.thumbColor
+			radius: width / 2
+
+			MouseArea {
+				id: handleHover
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: Qt.PointingHandCursor
+				hoverEnabled: true
+			}
+
+			Rectangle {
+				anchors.centerIn: parent
+				color: root.drawing ? root.drawing.penColor : Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
+				height: width
+				radius: width / 2
+				width: parent.width - 12
+			}
+		}
+	}
+
+	MouseArea {
+		id: dragArea
+
+		acceptedButtons: Qt.LeftButton
+		anchors.fill: parent
+		hoverEnabled: true
+
+		onCanceled: {
+			root.dragActive = false;
+		}
+		onPositionChanged: mouse => {
+			if ((mouse.buttons & Qt.LeftButton) && root.dragActive)
+				root.updateHueFromPoint(mouse.x, mouse.y, true);
+		}
+		onPressed: mouse => {
+			root.dragActive = root.pointIsOnTrack(mouse.x, mouse.y);
+			if (root.dragActive)
+				root.updateHueFromPoint(mouse.x, mouse.y);
+		}
+		onReleased: {
+			root.dragActive = false;
+		}
+	}
+}

Greeter/Components/ColoredIcon.qml

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

Greeter/Components/Coloriser.qml

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

Greeter/Components/CustomAudioSlider.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+
+Slider {
+	id: root
+
+	property color nonPeakColor: DynamicColors.tPalette.m3primary
+	required property real peak
+	property color peakColor: DynamicColors.palette.m3primary
+
+	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.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
+
+				Behavior on implicitWidth {
+					Anim {
+						duration: 50
+					}
+				}
+			}
+		}
+
+		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
+		}
+	}
+	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: 1000
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
+
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+		}
+	}
+}

Greeter/Components/CustomBusyIndicator.qml

@@ -0,0 +1,69 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+BusyIndicator {
+	id: control
+
+	property int busySize: 64
+	property color color: delegate.color
+
+	contentItem: Item {
+		implicitHeight: control.busySize
+		implicitWidth: control.busySize
+
+		Item {
+			id: item
+
+			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)
+
+			Behavior on opacity {
+				OpacityAnimator {
+					duration: 250
+				}
+			}
+
+			RotationAnimator {
+				duration: 1250
+				from: 0
+				loops: Animation.Infinite
+				running: control.visible && control.running
+				target: item
+				to: 360
+			}
+
+			Repeater {
+				id: repeater
+
+				model: 6
+
+				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
+						}
+					]
+				}
+			}
+		}
+	}
+}

Greeter/Components/CustomButton.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+Button {
+	id: control
+
+	property color bgColor: DynamicColors.palette.m3primary
+	property int radius: 4
+	property color textColor: DynamicColors.palette.m3onPrimary
+
+	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
+	}
+
+	StateLayer {
+		function onClicked(): void {
+			control.clicked();
+		}
+
+		radius: control.radius
+	}
+}

Greeter/Components/CustomCheckbox.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+CheckBox {
+	id: control
+
+	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 {
+		// 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 {
+			color: DynamicColors.palette.m3primary
+			implicitHeight: control.checkHeight - (y * 2)
+			implicitWidth: control.checkWidth - (x * 2)
+			radius: 3
+			visible: control.checked
+			x: 4
+			y: 4
+		}
+	}
+}