Merge branch 'main' into module/wifi

Modules/Bar/Bar.qml

@@ -17,6 +17,7 @@ RowLayout {
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
+	required property bool fullscreen
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
@@ -90,6 +91,7 @@ RowLayout {
 
 				delegate: WrappedLoader {
 					sourceComponent: HyprsunsetWidget {
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -108,6 +110,7 @@ RowLayout {
 				delegate: WrappedLoader {
 					sourceComponent: Workspaces {
 						screen: root.screen
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -119,6 +122,7 @@ RowLayout {
 					sourceComponent: TrayWidget {
 						loader: root
 						popouts: root.popouts
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -129,6 +133,7 @@ RowLayout {
 				delegate: WrappedLoader {
 					sourceComponent: Resources {
 						visibilities: root.visibilities
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -138,6 +143,7 @@ RowLayout {
 
 				delegate: WrappedLoader {
 					sourceComponent: UpdatesWidget {
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -149,6 +155,7 @@ RowLayout {
 					sourceComponent: NotifBell {
 						popouts: root.popouts
 						visibilities: root.visibilities
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -161,6 +168,7 @@ RowLayout {
 						loader: root
 						popouts: root.popouts
 						visibilities: root.visibilities
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -171,6 +179,7 @@ RowLayout {
 				delegate: WrappedLoader {
 					sourceComponent: WindowTitle {
 						bar: root
+						visible: !root.fullscreen
 					}
 				}
 			}
@@ -180,6 +189,7 @@ RowLayout {
 
 				delegate: WrappedLoader {
 					sourceComponent: MediaWidget {
+						visible: !root.fullscreen
 					}
 				}
 			}

Modules/Bar/BarLoader.qml

@@ -16,12 +16,13 @@ Item {
 
 	readonly property int contentHeight: Config.barConfig.height + padding * 2
 	readonly property int exclusiveZone: Config.barConfig.autoHide ? Config.barConfig.border : contentHeight
+	required property bool fullscreen
 	property bool isHovered
 	readonly property int padding: Math.max(Appearance.padding.smaller, Config.barConfig.border)
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
-	readonly property bool shouldBeVisible: (!Config.barConfig.autoHide || visibilities.bar || isHovered)
+	readonly property bool shouldBeVisible: !fullscreen && (!Config.barConfig.autoHide || visibilities.bar || isHovered)
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
@@ -29,7 +30,7 @@ Item {
 		content.item?.checkPopout(x);
 	}
 
-	implicitHeight: Config.barConfig.border
+	implicitHeight: fullscreen ? 0 : Config.barConfig.border
 	visible: height > Config.barConfig.border
 
 	states: State {
@@ -74,6 +75,7 @@ Item {
 		anchors.right: parent.right
 
 		sourceComponent: Bar {
+			fullscreen: root.fullscreen
 			height: root.contentHeight
 			popouts: root.popouts
 			popoutsWrapper: root.popoutsWrapper

Modules/ClipWrapper.qml

@@ -8,6 +8,7 @@ import qs.Config
 Item {
 	id: root
 
+	required property real borderThickness
 	readonly property alias content: content
 	property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
 	required property ShellScreen screen
@@ -17,21 +18,15 @@ Item {
 	implicitWidth: content.implicitWidth
 	visible: width > 0 && height > 0
 	x: {
-		if (content.isDetached)
-			return (parent.width - content.nonAnimWidth) / 2;
-
-		const off = content.currentCenter - Config.barConfig.border - content.nonAnimWidth / 2;
+		const off = content.currentCenter - borderThickness - content.nonAnimWidth / 2;
 		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
 		if (diff < 0)
 			return off + diff;
 		return Math.floor(Math.max(off, 0));
 	}
-	y: content.isDetached ? (parent.height - content.nonAnimHeight) / 2 : 0
 
 	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 	Behavior on x {

Modules/Clipboard/Content.qml

@@ -0,0 +1,357 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Components
+import qs.Helpers
+import qs.Config
+
+Item {
+	id: root
+
+	readonly property int itemHeight: Config.clipboard.sizes.itemHeight
+	required property ShellScreen screen
+	required property PersistentProperties visibilities
+
+	implicitHeight: search.implicitHeight + entries.anchors.topMargin + ((view.spacing + itemHeight) * Config.clipboard.maxEntriesShown) - view.spacing
+	implicitWidth: Config.clipboard.sizes.width + preview.width + preview.anchors.leftMargin
+
+	Component.onCompleted: {
+		if (ClipHistory.entries.length === 0)
+			ClipHistory.refresh();
+		searchField.forceActiveFocus();
+	}
+
+	CustomClippingRect {
+		id: search
+
+		anchors.left: parent.left
+		anchors.right: entries.right
+		anchors.top: parent.top
+		color: DynamicColors.tPalette.m3surfaceContainer
+		implicitHeight: 50
+		radius: Appearance.rounding.full
+
+		MaterialIcon {
+			id: searchIcon
+
+			anchors.left: parent.left
+			anchors.margins: Appearance.padding.large
+			anchors.verticalCenter: parent.verticalCenter
+			text: "search"
+		}
+
+		CustomTextField {
+			id: searchField
+
+			anchors.bottom: parent.bottom
+			anchors.left: searchIcon.right
+			anchors.leftMargin: Appearance.spacing.small
+			anchors.right: parent.right
+			anchors.top: parent.top
+			color: DynamicColors.palette.m3onSurface
+			placeholderText: "Search clipboard history..."
+
+			Keys.onDownPressed: view.incrementCurrentIndex()
+			Keys.onUpPressed: view.decrementCurrentIndex()
+			onAccepted: {
+				ClipHistory.copy(view.currentItem.modelData);
+				root.visibilities.clipboard = false;
+			}
+		}
+	}
+
+	CustomClippingRect {
+		id: preview
+
+		anchors.bottom: parent.bottom
+		anchors.left: entries.right
+		anchors.leftMargin: Appearance.spacing.normal
+		anchors.top: parent.top
+		color: DynamicColors.tPalette.m3surfaceContainer
+		implicitWidth: ClipHistory.previewIsImage ? Math.max(Math.min(imagePreview.sourceSize.width + Appearance.padding.large * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) : Math.max(Math.min(textPreviewColumn.width + textPreviewColumn.anchors.margins * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth)
+		radius: 25
+
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+
+		Column {
+			id: textPreviewColumn
+
+			anchors.left: parent.left
+			anchors.leftMargin: 0
+			anchors.margins: Appearance.padding.normal
+			anchors.top: parent.top
+			visible: !ClipHistory.previewIsImage
+
+			Repeater {
+				id: processedLines
+
+				model: ClipHistory.previewText
+
+				Row {
+					id: lineRow
+
+					required property int index
+					required property var modelData
+
+					spacing: Appearance.spacing.normal
+
+					CustomRect {
+						color: lineRow.index % 2 ? DynamicColors.tPalette.m3surfaceContainer : "transparent"
+						implicitHeight: lineText.paintedHeight + Appearance.padding.extraSmall * 2
+						implicitWidth: 50
+
+						CustomText {
+							id: number
+
+							anchors.margins: Appearance.padding.large
+							anchors.right: parent.right
+							anchors.verticalCenter: parent.verticalCenter
+							color: DynamicColors.palette.m3onSurfaceVariant
+							font.pointSize: Appearance.font.size.small
+							text: lineRow.modelData.line
+						}
+					}
+
+					Repeater {
+						model: lineRow.modelData.text.split("\t").slice(1)
+
+						RowLayout {
+							height: lineText.height
+							width: lineText.height + Appearance.spacing.extraSmall
+
+							Item {
+								Layout.fillHeight: true
+								Layout.fillWidth: true
+
+								CustomRect {
+									anchors.centerIn: parent
+									color: DynamicColors.tPalette.m3surfaceContainer
+									implicitHeight: parent.height / 8
+									implicitWidth: parent.height / 8
+									radius: Appearance.rounding.full
+								}
+							}
+
+							Item {
+								Layout.fillHeight: true
+								Layout.fillWidth: true
+
+								CustomRect {
+									anchors.centerIn: parent
+									color: DynamicColors.tPalette.m3surfaceContainer
+									implicitHeight: parent.height / 8
+									implicitWidth: parent.height / 8
+									radius: Appearance.rounding.full
+								}
+							}
+
+							Item {
+								Layout.fillHeight: true
+								Layout.fillWidth: true
+
+								CustomRect {
+									anchors.centerIn: parent
+									color: DynamicColors.tPalette.m3surfaceContainer
+									implicitHeight: parent.height / 8
+									implicitWidth: parent.height / 8
+									radius: Appearance.rounding.full
+								}
+							}
+						}
+					}
+
+					CustomText {
+						id: lineText
+
+						color: DynamicColors.palette.m3onSurface
+						font.family: ClipHistory.previewIsCode ? Appearance.font.family.mono : Appearance.font.family.sans
+						height: lineText.paintedHeight + Appearance.padding.extraSmall * 2
+						text: lineRow.modelData.text.trim()
+						verticalAlignment: Text.AlignVCenter
+						wrapMode: Text.Wrap
+					}
+				}
+			}
+		}
+
+		Image {
+			id: imagePreview
+
+			anchors.centerIn: parent
+			asynchronous: true
+			cache: false
+			fillMode: Image.PreserveAspectFit
+			mipmap: true
+			retainWhileLoading: true
+			smooth: true
+			source: ClipHistory.previewImageSource
+			visible: ClipHistory.previewIsImage && ClipHistory.previewImageSource !== ""
+			width: Math.min(sourceSize.width, Config.clipboard.sizes.previewWidth)
+		}
+	}
+
+	Item {
+		id: entries
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.top: search.bottom
+		anchors.topMargin: Appearance.spacing.normal
+		implicitWidth: Config.clipboard.sizes.width
+
+		CustomListView {
+			id: view
+
+			anchors.fill: parent
+			cacheBuffer: (root.itemHeight + spacing) * 2
+			highlightFollowsCurrentItem: false
+			highlightRangeMode: ListView.ApplyRange
+			preferredHighlightBegin: 0
+			preferredHighlightEnd: height
+			spacing: Appearance.spacing.normal
+
+			CustomScrollBar.vertical: CustomScrollBar {
+				flickable: view
+				minimumSize: 0.1
+			}
+			delegate: CustomRect {
+				id: clipItem
+
+				readonly property bool isImage: ClipHistory.entryIsImage(modelData)
+				required property string modelData
+
+				implicitHeight: root.itemHeight
+				implicitWidth: view.width
+				radius: textLayer.pressed ? (Appearance.rounding.small / 2) : Appearance.rounding.small
+
+				Behavior on radius {
+					Anim {
+						type: Anim.FastEffects
+					}
+				}
+
+				RowLayout {
+					anchors.fill: parent
+					spacing: Appearance.spacing.small
+
+					CustomClippingRect {
+						id: textRect
+
+						Layout.fillHeight: true
+						Layout.fillWidth: true
+
+						Item {
+							id: textWrapper
+
+							anchors.fill: parent
+							layer.enabled: true
+
+							layer.effect: OpacityMask {
+								maskSource: fadeMask
+							}
+
+							MaterialIcon {
+								id: icon
+
+								anchors.left: parent.left
+								anchors.margins: Appearance.padding.normal
+								anchors.verticalCenter: parent.verticalCenter
+								font.pointSize: Appearance.font.size.large
+								text: clipItem.isImage ? "image" : "text_fields"
+							}
+
+							CustomText {
+								id: text
+
+								anchors.left: icon.right
+								anchors.margins: Appearance.spacing.normal
+								anchors.verticalCenter: parent.verticalCenter
+								elide: Text.ElideRight
+								text: clipItem.isImage ? qsTr("Image") : ClipHistory.displayText(clipItem.modelData)
+							}
+						}
+
+						CustomRect {
+							id: fadeMask
+
+							anchors.fill: parent
+							layer.enabled: true
+							visible: false
+
+							gradient: Gradient {
+								orientation: Gradient.Horizontal
+
+								GradientStop {
+									color: Qt.rgba(1, 1, 1, 1.0)
+									position: 0.85
+								}
+
+								GradientStop {
+									color: Qt.rgba(1, 1, 1, 0)
+									position: 1.0
+								}
+							}
+						}
+					}
+
+					IconButton {
+						Layout.fillHeight: true
+						Layout.margins: Appearance.padding.normal
+						Layout.preferredWidth: height
+						icon: "delete"
+						inactiveColor: Qt.alpha(DynamicColors.palette.m3error, 0.8)
+						inactiveOnColor: DynamicColors.palette.m3onError
+						isToggle: false
+
+						onClicked: ClipHistory.deleteEntry(clipItem.modelData)
+					}
+				}
+
+				StateLayer {
+					id: textLayer
+
+					onClicked: ClipHistory.copy(clipItem.modelData)
+				}
+			}
+			highlight: CustomRect {
+				color: DynamicColors.palette.m3onSurface
+				implicitHeight: view.currentItem?.height ?? 0
+				implicitWidth: view.width
+				opacity: 0.08
+				radius: Appearance.rounding.small
+				y: view.currentItem?.y ?? 0
+
+				Behavior on y {
+					Anim {
+						duration: Appearance.anim.durations.small
+						easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					}
+				}
+			}
+			model: ScriptModel {
+				values: ClipHistory.fuzzyQuery(searchField.text)
+			}
+
+			onCurrentItemChanged: {
+				if (!currentItem)
+					return;
+
+				ClipHistory.currentEntry = currentItem.modelData;
+				ClipHistory.refreshPreview();
+			}
+			onVisibleChanged: currentIndex = 0
+
+			CustomClippingWrapperRect {
+				anchors.fill: parent
+				child: view.contentItem
+				radius: Appearance.rounding.small
+			}
+		}
+	}
+}

Modules/Clipboard/Wrapper.qml

@@ -0,0 +1,41 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property int contentHeight
+	property real offsetScale: shouldBeActive ? 0 : 1
+	required property ShellScreen screen
+	readonly property bool shouldBeActive: visibilities.clipboard && Config.clipboard.enabled
+	required property PersistentProperties visibilities
+
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
+	implicitWidth: content.implicitWidth + Appearance.padding.normal * 2 || 400
+	opacity: 1 - offsetScale
+	visible: offsetScale < 1
+
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
+
+	Loader {
+		id: content
+
+		active: root.shouldBeActive || root.visible
+		anchors.centerIn: parent
+
+		sourceComponent: Content {
+			screen: root.screen
+			visibilities: root.visibilities
+		}
+	}
+}

Modules/Clock.qml

@@ -34,6 +34,7 @@ CustomRect {
 
 	StateLayer {
 		acceptedButtons: Qt.LeftButton
+		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
 		onClicked: {
 			root.visibilities.dashboard = !root.visibilities.dashboard;

Modules/Content.qml

@@ -16,8 +16,8 @@ Item {
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
 	required property PopoutState popouts
 
-	implicitHeight: (currentPopout?.implicitHeight ?? 0) + 5 * 2
-	implicitWidth: (currentPopout?.implicitWidth ?? 0) + 5 * 2
+	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Appearance.padding.small * 2
+	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Appearance.padding.small * 2
 
 	Item {
 		id: content
@@ -27,7 +27,7 @@ Item {
 		Popout {
 			name: "audio"
 
-			sourceComponent: AudioPopup {
+			sourceComponent: AudioPopout {
 				wrapper: root.wrapper
 			}
 		}
@@ -72,7 +72,6 @@ Item {
 			name: "upower"
 
 			sourceComponent: UPowerPopout {
-				wrapper: root.popouts
 			}
 		}
 

Modules/Dashboard/Content.qml

@@ -10,9 +10,9 @@ import qs.Components
 Item {
 	id: root
 
+	required property PersistentProperties dashState
 	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
 	readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
-	required property PersistentProperties state
 	required property PersistentProperties visibilities
 
 	implicitHeight: nonAnimHeight
@@ -59,7 +59,7 @@ Item {
 					index: 0
 
 					sourceComponent: Dash {
-						state: root.state
+						dashState: root.dashState
 						visibilities: root.visibilities
 					}
 				}

Modules/Dashboard/Dash.qml

@@ -10,9 +10,9 @@ import qs.Modules.Dashboard.Dash
 GridLayout {
 	id: root
 
+	required property PersistentProperties dashState
 	readonly property bool dashboardVisible: visibilities.dashboard
 	property int radius: Appearance.rounding.smallest
-	required property PersistentProperties state
 	required property PersistentProperties visibilities
 
 	columnSpacing: Appearance.spacing.smaller
@@ -60,7 +60,7 @@ GridLayout {
 		User {
 			id: user
 
-			state: root.state
+			dashState: root.dashState
 		}
 	}
 
@@ -86,7 +86,7 @@ GridLayout {
 		Calendar {
 			id: calendar
 
-			state: root.state
+			dashState: root.dashState
 		}
 	}
 

Modules/Dashboard/Dash/Calendar.qml

@@ -1,25 +1,50 @@
 pragma ComponentBehavior: Bound
 
+import Quickshell
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Components
-import qs.Helpers
 import qs.Config
-import qs.Modules
 
 CustomMouseArea {
 	id: root
 
-	readonly property int currMonth: state.currentDate.getMonth()
-	readonly property int currYear: state.currentDate.getFullYear()
-	required property var state
+	property int activeGrid: 1
+	required property PersistentProperties dashState
+	property bool initialized: false
+	property int month1
+	property int month2
+	readonly property int realCurrMonth: dashState.currentDate.getMonth()
+	readonly property int realCurrYear: dashState.currentDate.getFullYear()
+	property int year1
+	property int year2
+
+	function handleDateChange() {
+		const currM = activeGrid === 1 ? month1 : month2;
+		const currY = activeGrid === 1 ? year1 : year2;
+		if (realCurrMonth !== currM || realCurrYear !== currY) {
+			monthChangeAnim.direction = (realCurrYear > currY || (realCurrYear === currY && realCurrMonth > currM)) ? -1 : 1;
+
+			if (activeGrid === 1) {
+				month2 = realCurrMonth;
+				year2 = realCurrYear;
+				activeGrid = 2;
+			} else {
+				month1 = realCurrMonth;
+				year1 = realCurrYear;
+				activeGrid = 1;
+			}
+			if (initialized)
+				monthChangeAnim.restart();
+		}
+	}
 
 	function onWheel(event: WheelEvent): void {
 		if (event.angleDelta.y > 0)
-			root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
+			root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1);
 		else if (event.angleDelta.y < 0)
-			root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+			root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1);
 	}
 
 	acceptedButtons: Qt.MiddleButton
@@ -27,102 +52,160 @@ CustomMouseArea {
 	anchors.right: parent.right
 	implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
 
-	onClicked: root.state.currentDate = new Date()
+	Component.onCompleted: {
+		month1 = realCurrMonth;
+		year1 = realCurrYear;
+		month2 = realCurrMonth;
+		year2 = realCurrYear;
+
+		initialized = true;
+	}
+	onClicked: root.dashState.currentDate = new Date()
+	onRealCurrMonthChanged: handleDateChange()
+	onRealCurrYearChanged: handleDateChange()
+
+	SequentialAnimation {
+		id: monthChangeAnim
+
+		property int direction: 0
+
+		ScriptAction {
+			script: {
+				if (activeGrid === 1) {
+					titleTranslate1.x = -monthChangeAnim.direction * titleClip.width;
+					grid1Translate.x = -monthChangeAnim.direction * gridClip.width;
+					titleTranslate2.x = 0;
+					grid2Translate.x = 0;
+				} else {
+					titleTranslate2.x = -monthChangeAnim.direction * titleClip.width;
+					grid2Translate.x = -monthChangeAnim.direction * gridClip.width;
+					titleTranslate1.x = 0;
+					grid1Translate.x = 0;
+				}
+			}
+		}
+
+		ParallelAnimation {
+			Anim {
+				property: "x"
+				target: titleTranslate1
+				to: root.activeGrid === 1 ? 0 : monthChangeAnim.direction * titleClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: grid1Translate
+				to: root.activeGrid === 1 ? 0 : monthChangeAnim.direction * gridClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: titleTranslate2
+				to: root.activeGrid === 2 ? 0 : monthChangeAnim.direction * titleClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: grid2Translate
+				to: root.activeGrid === 2 ? 0 : monthChangeAnim.direction * gridClip.width
+				type: Anim.DefaultSpatial
+			}
+		}
+	}
 
 	ColumnLayout {
 		id: inner
 
 		anchors.fill: parent
 		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.small
+		spacing: Appearance.spacing.extraSmall
 
 		RowLayout {
 			id: monthNavigationRow
 
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Appearance.spacing.extraSmall
 
-			Item {
-				implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
-				implicitWidth: implicitHeight
+			IconButton {
+				icon: "chevron_left"
+				padding: Appearance.padding.small
+				type: IconButton.Text
 
-				StateLayer {
-					id: prevMonthStateLayer
-
-					function onClicked(): void {
-						root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
-					}
-
-					radius: Appearance.rounding.full
-				}
-
-				MaterialIcon {
-					id: prevMonthText
-
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: 700
-					text: "chevron_left"
-				}
+				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1)
 			}
 
 			Item {
+				Layout.fillHeight: true
 				Layout.fillWidth: true
-				implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
-				implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
+				implicitHeight: monthYearDisplay1.implicitHeight + Appearance.padding.extraSmall * 2
+				implicitWidth: monthYearDisplay1.implicitWidth + Appearance.padding.large * 2
 
 				StateLayer {
-					function onClicked(): void {
-						root.state.currentDate = new Date();
+					color: DynamicColors.palette.m3primary
+					enabled: {
+						const now = new Date();
+						return root.realCurrMonth !== now.getMonth() || root.realCurrYear !== now.getFullYear();
+					}
+					radius: pressed ? Appearance.rounding.small : Appearance.rounding.large
+
+					Behavior on radius {
+						Anim {
+							type: Anim.DefaultEffects
+						}
 					}
 
-					anchors.fill: monthYearDisplay
-					anchors.leftMargin: -Appearance.padding.normal
-					anchors.margins: -Appearance.padding.small
-					anchors.rightMargin: -Appearance.padding.normal
-					disabled: {
-						const now = new Date();
-						return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
-					}
-					radius: Appearance.rounding.full
+					onClicked: root.dashState.currentDate = new Date()
 				}
 
-				CustomText {
-					id: monthYearDisplay
+				Item {
+					id: titleClip
 
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3primary
-					font.capitalization: Font.Capitalize
-					font.pointSize: Appearance.font.size.normal
-					font.weight: 500
-					text: grid.title
+					anchors.fill: parent
+					clip: true
+
+					CustomText {
+						id: monthYearDisplay1
+
+						anchors.centerIn: parent
+						// qmllint enable missing-property
+						color: DynamicColors.palette.m3primary
+
+						// qmllint disable missing-property
+						text: grid1.item ? grid1.item.title : ""
+						visible: root.activeGrid === 1 || monthChangeAnim.running
+
+						transform: Translate {
+							id: titleTranslate1
+						}
+					}
+
+					CustomText {
+						id: monthYearDisplay2
+
+						anchors.centerIn: parent
+						// qmllint enable missing-property
+						color: DynamicColors.palette.m3primary
+
+						// qmllint disable missing-property
+						text: grid2.item ? grid2.item.title : ""
+						visible: root.activeGrid === 2 || monthChangeAnim.running
+
+						transform: Translate {
+							id: titleTranslate2
+						}
+					}
 				}
 			}
 
-			Item {
-				implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
-				implicitWidth: implicitHeight
+			IconButton {
+				icon: "chevron_right"
+				padding: Appearance.padding.small
+				type: IconButton.Text
 
-				StateLayer {
-					id: nextMonthStateLayer
-
-					function onClicked(): void {
-						root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
-					}
-
-					radius: Appearance.rounding.full
-				}
-
-				MaterialIcon {
-					id: nextMonthText
-
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: 700
-					text: "chevron_right"
-				}
+				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1)
 			}
 		}
 
@@ -130,109 +213,170 @@ CustomMouseArea {
 			id: daysRow
 
 			Layout.fillWidth: true
-			locale: grid.locale
+			locale: Qt.locale()
 
 			delegate: CustomText {
 				required property var model
 
-				color: (model.day === 0) ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurfaceVariant
-				font.weight: 500
+				color: (model.day === 0) ? DynamicColors.palette.m3tertiary : DynamicColors.palette.m3onSurface
 				horizontalAlignment: Text.AlignHCenter
-				text: model.shortName
+				text: Qt.locale("en_US").standaloneDayName(model.day, Locale.ShortFormat)
 			}
 		}
 
 		Item {
+			id: gridClip
+
 			Layout.fillWidth: true
-			implicitHeight: grid.implicitHeight
+			clip: true
+			implicitHeight: grid1.implicitHeight
 
-			MonthGrid {
-				id: grid
+			Component {
+				id: gridComp
 
-				anchors.fill: parent
-				locale: Qt.locale("en_SE")
-				month: root.currMonth
-				spacing: 3
-				year: root.currYear
+				Item {
+					id: internalGridContainer
 
-				delegate: Item {
-					id: dayItem
+					property int month
+					property alias title: internalGrid.title
+					property int year
 
-					required property var model
+					implicitHeight: internalGrid.implicitHeight
 
-					implicitHeight: text.implicitHeight + Appearance.padding.small * 2
-					implicitWidth: implicitHeight
+					MonthGrid {
+						id: internalGrid
 
-					CustomText {
-						id: text
+						anchors.fill: parent
+						locale: daysRow.locale
+						month: internalGridContainer.month
+						spacing: 3
+						title: `${Qt.locale("en_US").standaloneMonthName(month, Locale.LongFormat)} ${year}`
+						year: internalGridContainer.year
 
-						anchors.centerIn: parent
-						color: {
-							const dayOfWeek = dayItem.model.date.getUTCDay();
-							if (dayOfWeek === 6)
-								return DynamicColors.palette.m3secondary;
+						delegate: Item {
+							id: dayItem
 
-							return DynamicColors.palette.m3onSurfaceVariant;
+							required property var model
+
+							implicitHeight: text.implicitHeight + Appearance.padding.normal * 2
+							implicitWidth: implicitHeight
+
+							CustomText {
+								id: text
+
+								anchors.centerIn: parent
+								color: {
+									const dayOfWeek = dayItem.model.date.getDay();
+									if (dayOfWeek === 0)
+										return DynamicColors.palette.m3tertiary;
+
+									return DynamicColors.palette.m3onSurfaceVariant;
+								}
+								horizontalAlignment: Text.AlignHCenter
+								opacity: dayItem.model.today || dayItem.model.month === internalGrid.month ? 1 : 0.4
+								text: internalGrid.locale.toString(dayItem.model.day)
+							}
+						}
+					}
+
+					CustomRect {
+						id: todayIndicator
+
+						property Item today
+						readonly property Item todayItem: internalGrid.contentItem.children.find(c => c.model.today) ?? null
+
+						clip: true
+						color: DynamicColors.palette.m3primary
+						implicitHeight: width
+						implicitWidth: today ? (Math.max(today.implicitWidth, today.implicitHeight) - Appearance.padding.extraSmall) : 0
+						opacity: todayItem ? 1 : 0
+						radius: Appearance.rounding.full
+						scale: todayItem ? 1 : 0.7
+						x: today ? today.x + (today.width - implicitWidth) / 2 : 0
+						y: today ? today.y + Appearance.padding.extraSmall / 2 : 0
+
+						Behavior on opacity {
+							Anim {
+								type: Anim.DefaultEffects
+							}
+						}
+						Behavior on scale {
+							Anim {
+								type: Anim.FastSpatial
+							}
+						}
+						Behavior on x {
+							Anim {
+							}
+						}
+						Behavior on y {
+							Anim {
+							}
+						}
+
+						onTodayItemChanged: {
+							if (todayItem)
+								today = todayItem;
+						}
+
+						Coloriser {
+							colorizationColor: DynamicColors.palette.m3onPrimary
+							implicitHeight: internalGrid.height
+							implicitWidth: internalGrid.width
+							source: internalGrid
+							sourceColor: DynamicColors.palette.m3onSurface
+							x: -todayIndicator.x
+							y: -todayIndicator.y
 						}
-						font.pointSize: Appearance.font.size.normal
-						font.weight: 500
-						horizontalAlignment: Text.AlignHCenter
-						opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
-						text: grid.locale.toString(dayItem.model.day)
 					}
 				}
 			}
 
-			CustomRect {
-				id: todayIndicator
+			Loader {
+				id: grid1
 
-				property Item today
-				readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
+				anchors.fill: parent
+				sourceComponent: gridComp
+				visible: root.activeGrid === 1 || monthChangeAnim.running
 
-				clip: true
-				color: DynamicColors.palette.m3primary
-				implicitHeight: today?.implicitHeight ?? 0
-				implicitWidth: today?.implicitWidth ?? 0
-				opacity: todayItem ? 1 : 0
-				radius: Appearance.rounding.full
-				scale: todayItem ? 1 : 0.7
-				x: today ? today.x + (today.width - implicitWidth) / 2 : 0
-				y: today?.y ?? 0
-
-				Behavior on opacity {
-					Anim {
-					}
-				}
-				Behavior on scale {
-					Anim {
-					}
-				}
-				Behavior on x {
-					Anim {
-						duration: Appearance.anim.durations.expressiveDefaultSpatial
-						easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-					}
-				}
-				Behavior on y {
-					Anim {
-						duration: Appearance.anim.durations.expressiveDefaultSpatial
-						easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-					}
+				transform: Translate {
+					id: grid1Translate
 				}
 
-				onTodayItemChanged: {
-					if (todayItem)
-						today = todayItem;
+				Binding {
+					property: "month"
+					target: grid1.item
+					value: root.month1
 				}
 
-				Coloriser {
-					colorizationColor: DynamicColors.palette.m3onPrimary
-					implicitHeight: grid.height
-					implicitWidth: grid.width
-					source: grid
-					sourceColor: DynamicColors.palette.m3onSurface
-					x: -todayIndicator.x
-					y: -todayIndicator.y
+				Binding {
+					property: "year"
+					target: grid1.item
+					value: root.year1
+				}
+			}
+
+			Loader {
+				id: grid2
+
+				anchors.fill: parent
+				sourceComponent: gridComp
+				visible: root.activeGrid === 2 || monthChangeAnim.running
+
+				transform: Translate {
+					id: grid2Translate
+				}
+
+				Binding {
+					property: "month"
+					target: grid2.item
+					value: root.month2
+				}
+
+				Binding {
+					property: "year"
+					target: grid2.item
+					value: root.year2
 				}
 			}
 		}

Modules/Dashboard/Dash/Media.qml

@@ -4,6 +4,7 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
+import QtQuick.Effects
 import ZShell.Services
 import qs.Daemons
 import qs.Components
@@ -15,7 +16,7 @@ Item {
 
 	property real playerProgress: {
 		const active = Players.active;
-		return active?.length ? active.position / active.length : 0;
+		return active?.length ? (active.position % active.length) / active.length : 0;
 	}
 	property int rowHeight: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
 
@@ -45,49 +46,85 @@ Item {
 	Shape {
 		id: visualizer
 
-		readonly property real barW: Math.max(0, (width - gap * (bars - 1)) / bars)
 		readonly property int bars: Config.services.visualizerBars
-		property color color: DynamicColors.palette.m3primary
-		readonly property real gap: Appearance.spacing.small
+		property color color: DynamicColors.palette.m3tertiary
+		property color fillColor: Qt.alpha(color, 0.25)
 
 		anchors.fill: layout
+		anchors.leftMargin: -(shape.strokeWidth / 2)
+		layer.enabled: true
 		asynchronous: true
-		data: visualizerBars.instances
 		preferredRendererType: Shape.CurveRenderer
-	}
-
-	Variants {
-		id: visualizerBars
-
-		model: Array.from({
-			length: Config.services.visualizerBars
-		}, (_, i) => i)
 
 		ShapePath {
-			id: visualizerBar
-
-			readonly property real magnitude: value * Config.dashboard.sizes.mediaVisualiserSize
-			required property int modelData
-			readonly property real value: Math.max(1e-3, Audio.cava.values[modelData])
-
-			capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
-			startX: (visualizer.barW / 2) + modelData * (visualizer.barW + visualizer.gap)
-			startY: layout.y + layout.height
+			id: shape
 			strokeColor: visualizer.color
-			strokeWidth: visualizer.barW
+			fillColor: visualizer.fillColor
+			strokeWidth: 2
 
-			Behavior on strokeColor {
-				CAnim {
+			PathSvg {
+				path: shape.curvePath
+			}
+
+			property string curvePath: {
+				const values = Audio.cava.values;
+				const n = values.length;
+
+				if (n < 2)
+					return "";
+
+				const h = layout.height + shape.strokeWidth / 2;
+				const w = layout.width + shape.strokeWidth;
+
+				function x(i) {
+					return i * w / (n - 1);
 				}
-			}
 
-			PathLine {
-				relativeX: 0
-				relativeY: -visualizerBar.magnitude
+				function y(i) {
+					return h - values[i] * Config.dashboard.sizes.mediaVisualizerSize;
+				}
+
+				let d = `M 0 ${h} `;
+				d += `L ${x(0)} ${y(0)} `;
+
+				for (let i = 0; i < n - 1; ++i) {
+					const x0 = x(i);
+					const y0 = y(i);
+
+					const x1 = x(i + 1);
+					const y1 = y(i + 1);
+
+					const prev = Math.max(0, i - 1);
+					const next = Math.min(n - 1, i + 2);
+
+					const c1x = x0 + (x1 - x(prev)) / 6;
+					const c1y = y0 + (y1 - y(prev)) / 6;
+
+					const c2x = x1 - (x(next) - x0) / 6;
+					const c2y = y1 - (y(next) - y0) / 6;
+
+					d += `C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x1} ${y1} `;
+				}
+
+				d += `L ${w} ${h} `;
+				d += `L 0 ${h} Z`;
+
+				return d;
 			}
 		}
 	}
 
+	CustomRect {
+		anchors.fill: visualizer
+
+		color: Qt.alpha(DynamicColors.palette.m3shadow, 0.2)
+		layer.enabled: true
+		layer.effect: MultiEffect {
+			maskEnabled: true
+			maskSource: visualizer
+		}
+	}
+
 	Shape {
 		preferredRendererType: Shape.CurveRenderer
 
@@ -295,12 +332,12 @@ Item {
 		StateLayer {
 			id: controlState
 
-			function onClicked(): void {
+			color: control.canUse ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
+			enabled: control.canUse
+
+			onClicked: {
 				control.onClicked();
 			}
-
-			color: control.canUse ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
-			disabled: !control.canUse
 			// radius: Appearance.rounding.full
 		}
 

Modules/Dashboard/Dash/Resources.qml

@@ -1,92 +1,89 @@
 import QtQuick
+import QtQuick.Layouts
+import ZShell.Services
 import qs.Components
 import qs.Helpers
 import qs.Config
 
-Row {
+Item {
 	id: root
 
 	anchors.bottom: parent.bottom
 	anchors.top: parent.top
-	padding: Appearance.padding.large
-	spacing: Appearance.spacing.large
+	implicitWidth: layout.implicitWidth + layout.anchors.margins * 4
 
-	Ref {
-		service: SystemUsage
+	ServiceRef {
+		service: Storage
 	}
 
-	Resource {
-		color: DynamicColors.palette.m3primary
-		icon: "memory"
-		value: SystemUsage.cpuPerc
+	ServiceRef {
+		service: Memory
 	}
 
-	Resource {
-		color: DynamicColors.palette.m3secondary
-		icon: "memory_alt"
-		value: SystemUsage.memPerc
+	ServiceRef {
+		service: Cpu
 	}
 
-	Resource {
-		color: DynamicColors.palette.m3tertiary
-		icon: "gamepad"
-		value: SystemUsage.gpuPerc
+	ServiceRef {
+		service: Gpu
 	}
 
-	Resource {
-		color: DynamicColors.palette.m3primary
-		icon: "host"
-		value: SystemUsage.gpuMemUsed
-	}
-
-	Resource {
-		color: DynamicColors.palette.m3secondary
-		icon: "hard_disk"
-		value: SystemUsage.storagePerc
-	}
-
-	component Resource: Item {
-		id: res
-
-		required property color color
-		required property string icon
-		required property real value
+	ColumnLayout {
+		id: layout
 
 		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.margins: Appearance.padding.large
 		anchors.top: parent.top
-		implicitWidth: icon.implicitWidth
+		spacing: Appearance.spacing.normal
 
-		Behavior on value {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
+		Resource {
+			fgColor: DynamicColors.palette.m3primary
+			icon: "memory"
+			value: Cpu.percentage
 		}
 
-		CustomRect {
-			anchors.bottom: icon.top
-			anchors.bottomMargin: Appearance.spacing.small
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.top: parent.top
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-			implicitWidth: Config.dashboard.sizes.resourceProgessThickness
-			radius: Appearance.rounding.full
+		Resource {
+			fgColor: DynamicColors.palette.m3secondary
+			icon: "memory_alt"
+			value: Memory.percentage
+		}
 
-			CustomRect {
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.right: parent.right
-				color: res.color
-				implicitHeight: res.value * parent.height
-				radius: Appearance.rounding.full
+		Resource {
+			fgColor: DynamicColors.palette.m3tertiary
+			icon: "gamepad"
+			value: Gpu.percentage
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3primary
+			icon: "host"
+			value: Gpu.memoryUsed / Gpu.memoryTotal
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3secondary
+			icon: "hard_disk"
+			value: Storage.percentage
+		}
+	}
+
+	component Resource: CircularProgress {
+		id: res
+
+		required property string icon
+
+		Layout.fillHeight: true
+		implicitSize: height
+
+		Behavior on clampedVal {
+			Anim {
 			}
 		}
 
 		MaterialIcon {
-			id: icon
-
-			anchors.bottom: parent.bottom
-			color: res.color
+			anchors.centerIn: parent
+			color: res.fgColor
 			text: res.icon
 		}
 	}

Modules/Dashboard/Dash/User.qml

@@ -9,7 +9,7 @@ import QtQuick
 Row {
 	id: root
 
-	required property PersistentProperties state
+	required property PersistentProperties dashState
 
 	padding: 20
 	spacing: 12

Modules/Dashboard/Wrapper.qml

@@ -32,7 +32,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 
 		sourceComponent: Content {
-			state: root.dashState
+			dashState: root.dashState
 			visibilities: root.visibilities
 		}
 	}

Modules/DesktopIcons/DesktopIconContextMenu.qml

@@ -6,227 +6,264 @@ import qs.Components
 import qs.Config
 
 Item {
-    id: contextMenu
+	id: contextMenu
 
-    anchors.fill: parent
-    z: 999
-    visible: false
+	property real menuX: 0
+	property real menuY: 0
+	property var targetAppEntry: null
+	property string targetFilePath: ""
+	property bool targetIsDir: false
+	property var targetPaths: []
 
-    property string targetFilePath: ""
-    property bool targetIsDir: false
-    property var targetAppEntry: null
+	signal openFileRequested(string path, bool isDir)
+	signal renameRequested(string path)
 
-    property var targetPaths: []
+	function close() {
+		visible = false;
+	}
 
-    signal openFileRequested(string path, bool isDir)
-    signal renameRequested(string path)
+	function openAt(mouseX, mouseY, path, isDir, appEnt, parentW, parentH, selectionArray) {
+		targetFilePath = path;
+		targetIsDir = isDir;
+		targetAppEntry = appEnt;
 
-    property real menuX: 0
-    property real menuY: 0
+		targetPaths = (selectionArray && selectionArray.length > 0) ? selectionArray : [path];
 
-    CustomClippingRect {
-        id: popupBackground
-        readonly property real padding: Appearance.padding.small
+		menuX = Math.floor(Math.min(mouseX, parentW - popupBackground.implicitWidth));
+		menuY = Math.floor(Math.min(mouseY, parentH - popupBackground.implicitHeight));
 
-        x: contextMenu.menuX
-        y: contextMenu.menuY
+		visible = true;
+	}
 
-        color: DynamicColors.tPalette.m3surface
-        radius: Appearance.rounding.normal
+	anchors.fill: parent
+	visible: false
+	z: 999
 
-        implicitWidth: menuLayout.implicitWidth + padding * 2
-        implicitHeight: menuLayout.implicitHeight + padding * 2
+	CustomClippingRect {
+		id: popupBackground
 
-        Behavior on opacity { Anim {} }
-        opacity: contextMenu.visible ? 1 : 0
+		readonly property real padding: Appearance.padding.small
 
-        ColumnLayout {
-            id: menuLayout
-            anchors.centerIn: parent
-            spacing: 0
+		color: DynamicColors.tPalette.m3surface
+		implicitHeight: menuLayout.implicitHeight + padding * 2
+		implicitWidth: menuLayout.implicitWidth + padding * 2
+		opacity: contextMenu.visible ? 1 : 0
+		radius: Appearance.rounding.normal
+		x: contextMenu.menuX
+		y: contextMenu.menuY
 
-            CustomRect {
-                Layout.preferredWidth: 160
-                radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: openRow.implicitHeight + Appearance.padding.small * 2
+		Behavior on opacity {
+			Anim {
+			}
+		}
 
-                RowLayout {
-                    id: openRow
-                    spacing: 8
-                    anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+		ColumnLayout {
+			id: menuLayout
 
-                    MaterialIcon { text: "open_in_new"; font.pointSize: 20 }
-                    CustomText { text: "Open"; Layout.fillWidth: true }
-                }
+			anchors.centerIn: parent
+			spacing: 0
 
-                StateLayer {
-                    anchors.fill: parent
+			CustomRect {
+				Layout.preferredWidth: 160
+				implicitHeight: openRow.implicitHeight + Appearance.padding.small * 2
+				radius: popupBackground.radius - popupBackground.padding
 
-                    onClicked: {
-                        for (let i = 0; i < contextMenu.targetPaths.length; i++) {
-                            let p = contextMenu.targetPaths[i];
-                            if (p === contextMenu.targetFilePath) {
-                                if (p.endsWith(".desktop") && contextMenu.targetAppEntry) contextMenu.targetAppEntry.execute()
-                                else contextMenu.openFileRequested(p, contextMenu.targetIsDir)
-                            } else {
-                                Quickshell.execDetached(["xdg-open", p])
-                            }
-                        }
-                        contextMenu.close()
-                    }
-                }
-            }
+				RowLayout {
+					id: openRow
 
-            CustomRect {
-                Layout.fillWidth: true
-                radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: openWithRow.implicitHeight + Appearance.padding.small * 2
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					spacing: 8
 
-                RowLayout {
-                    id: openWithRow
-                    spacing: 8
-                    anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+					MaterialIcon {
+						font.pointSize: 20
+						text: "open_in_new"
+					}
 
-                    MaterialIcon { text: contextMenu.targetIsDir ? "terminal" : "apps"; font.pointSize: 20 }
-                    CustomText { text: contextMenu.targetIsDir ? "Open in terminal" : "Open with..."; Layout.fillWidth: true }
-                }
+					CustomText {
+						Layout.fillWidth: true
+						text: "Open"
+					}
+				}
 
-                StateLayer {
-                    anchors.fill: parent
+				StateLayer {
+					anchors.fill: parent
+
+					onClicked: {
+						for (let i = 0; i < contextMenu.targetPaths.length; i++) {
+							let p = contextMenu.targetPaths[i];
+							if (p === contextMenu.targetFilePath) {
+								if (p.endsWith(".desktop") && contextMenu.targetAppEntry)
+									contextMenu.targetAppEntry.execute();
+								else
+									contextMenu.openFileRequested(p, contextMenu.targetIsDir);
+							} else {
+								Quickshell.execDetached(["xdg-open", p]);
+							}
+						}
+						contextMenu.close();
+					}
+				}
+			}
+
+			CustomRect {
+				Layout.fillWidth: true
+				implicitHeight: openWithRow.implicitHeight + Appearance.padding.small * 2
+				radius: popupBackground.radius - popupBackground.padding
+
+				RowLayout {
+					id: openWithRow
+
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					spacing: 8
+
+					MaterialIcon {
+						font.pointSize: 20
+						text: contextMenu.targetIsDir ? "terminal" : "apps"
+					}
+
+					CustomText {
+						Layout.fillWidth: true
+						text: contextMenu.targetIsDir ? "Open in terminal" : "Open with..."
+					}
+				}
+
+				StateLayer {
+					anchors.fill: parent
 
 					onClicked: {
 						if (contextMenu.targetIsDir) {
-							Quickshell.execDetached([Config.general.apps.terminal, "--working-directory", contextMenu.targetFilePath])
+							Quickshell.execDetached([Config.general.apps.terminal, "--working-directory", contextMenu.targetFilePath]);
 						} else {
-							Quickshell.execDetached(["xdg-open", contextMenu.targetFilePath])
+							Quickshell.execDetached(["xdg-open", contextMenu.targetFilePath]);
 						}
-						contextMenu.close()
+						contextMenu.close();
 					}
-                }
-            }
+				}
+			}
 
-            CustomRect {
-                Layout.fillWidth: true
-                implicitHeight: 1
-                color: DynamicColors.palette.m3outlineVariant
-                Layout.topMargin: 4
-                Layout.bottomMargin: 4
-            }
+			CustomRect {
+				Layout.bottomMargin: 4
+				Layout.fillWidth: true
+				Layout.topMargin: 4
+				color: DynamicColors.palette.m3outlineVariant
+				implicitHeight: 1
+			}
 
-            CustomRect {
-                Layout.fillWidth: true
-                radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: copyPathRow.implicitHeight + Appearance.padding.small * 2
+			CustomRect {
+				Layout.fillWidth: true
+				implicitHeight: copyPathRow.implicitHeight + Appearance.padding.small * 2
+				radius: popupBackground.radius - popupBackground.padding
 
-                RowLayout {
-                    id: copyPathRow
-                    spacing: 8
-                    anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+				RowLayout {
+					id: copyPathRow
 
-                    MaterialIcon { text: "content_copy"; font.pointSize: 20 }
-                    CustomText { text: "Copy path"; Layout.fillWidth: true }
-                }
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					spacing: 8
 
-                StateLayer {
-                    anchors.fill: parent
+					MaterialIcon {
+						font.pointSize: 20
+						text: "content_copy"
+					}
 
-                    onClicked: {
-                        Quickshell.execDetached(["wl-copy", contextMenu.targetPaths.join("\n")])
-                        contextMenu.close()
-                    }
-                }
-            }
+					CustomText {
+						Layout.fillWidth: true
+						text: "Copy path"
+					}
+				}
 
-            CustomRect {
-                Layout.fillWidth: true
-                visible: contextMenu.targetPaths.length === 1
-                radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: renameRow.implicitHeight + Appearance.padding.small * 2
+				StateLayer {
+					anchors.fill: parent
 
-                RowLayout {
-                    id: renameRow
-                    spacing: 8
-                    anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+					onClicked: {
+						Quickshell.execDetached(["wl-copy", contextMenu.targetPaths.join("\n")]);
+						contextMenu.close();
+					}
+				}
+			}
 
-                    MaterialIcon { text: "edit"; font.pointSize: 20 }
-                    CustomText { text: "Rename"; Layout.fillWidth: true }
-                }
+			CustomRect {
+				Layout.fillWidth: true
+				implicitHeight: renameRow.implicitHeight + Appearance.padding.small * 2
+				radius: popupBackground.radius - popupBackground.padding
+				visible: contextMenu.targetPaths.length === 1
 
-                StateLayer {
-                    anchors.fill: parent
+				RowLayout {
+					id: renameRow
 
-                    onClicked: {
-                        contextMenu.renameRequested(contextMenu.targetFilePath)
-                        contextMenu.close()
-                    }
-                }
-            }
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					spacing: 8
 
-            Rectangle {
-                Layout.fillWidth: true
-                implicitHeight: 1
-                color: DynamicColors.palette.m3outlineVariant
-                Layout.topMargin: 4
-                Layout.bottomMargin: 4
-            }
+					MaterialIcon {
+						font.pointSize: 20
+						text: "edit"
+					}
 
-            CustomRect {
-                Layout.fillWidth: true
-                radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: deleteRow.implicitHeight + Appearance.padding.small * 2
+					CustomText {
+						Layout.fillWidth: true
+						text: "Rename"
+					}
+				}
 
-                RowLayout {
-                    id: deleteRow
-                    spacing: 8
-                    anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+				StateLayer {
+					anchors.fill: parent
 
-                    MaterialIcon {
-                        text: "delete"
-                        font.pointSize: 20
-                        color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
-                    }
+					onClicked: {
+						contextMenu.renameRequested(contextMenu.targetFilePath);
+						contextMenu.close();
+					}
+				}
+			}
 
-                    CustomText {
-                        text: "Move to trash"
-                        Layout.fillWidth: true
-                        color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
-                    }
-                }
+			Rectangle {
+				Layout.bottomMargin: 4
+				Layout.fillWidth: true
+				Layout.topMargin: 4
+				color: DynamicColors.palette.m3outlineVariant
+				implicitHeight: 1
+			}
 
-                StateLayer {
-                    id: deleteButton
-                    anchors.fill: parent
-                    color: DynamicColors.tPalette.m3error
+			CustomRect {
+				Layout.fillWidth: true
+				implicitHeight: deleteRow.implicitHeight + Appearance.padding.small * 2
+				radius: popupBackground.radius - popupBackground.padding
 
-                    onClicked: {
-                        let cmd = ["gio", "trash"].concat(contextMenu.targetPaths)
-                        Quickshell.execDetached(cmd)
-                        contextMenu.close()
-                    }
-                }
-            }
-        }
-    }
+				RowLayout {
+					id: deleteRow
 
-    function openAt(mouseX, mouseY, path, isDir, appEnt, parentW, parentH, selectionArray) {
-        targetFilePath = path
-        targetIsDir = isDir
-        targetAppEntry = appEnt
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					spacing: 8
 
-        targetPaths = (selectionArray && selectionArray.length > 0) ? selectionArray : [path]
+					MaterialIcon {
+						color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
+						font.pointSize: 20
+						text: "delete"
+					}
 
-        menuX = Math.floor(Math.min(mouseX, parentW - popupBackground.implicitWidth))
-        menuY = Math.floor(Math.min(mouseY, parentH - popupBackground.implicitHeight))
+					CustomText {
+						Layout.fillWidth: true
+						color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
+						text: "Move to trash"
+					}
+				}
 
-        visible = true
-    }
+				StateLayer {
+					id: deleteButton
 
-    function close() {
-        visible = false
-    }
+					anchors.fill: parent
+					color: DynamicColors.tPalette.m3error
+
+					onClicked: {
+						let cmd = ["gio", "trash"].concat(contextMenu.targetPaths);
+						Quickshell.execDetached(cmd);
+						contextMenu.close();
+					}
+				}
+			}
+		}
+	}
 }

Modules/DesktopIcons/DesktopIconDelegate.qml

@@ -6,16 +6,19 @@ import qs.Components
 import qs.Helpers
 
 Item {
-	id: delegateRoot
+	id: root
 
 	property var appEntry: fileName.endsWith(".desktop") ? DesktopEntries.byId(DesktopUtils.getAppId(fileName)) : null
-	property bool fileIsDir: model.isDir
-	property string fileName: model.fileName
-	property string filePath: model.filePath
-	property int gridX: model.gridX
-	property int gridY: model.gridY
+	required property var contextMenu
+	property bool fileIsDir: modelData.isDir
+	property string fileName: modelData.fileName
+	property string filePath: modelData.filePath
+	property int gridX: modelData.gridX
+	property int gridY: modelData.gridY
+	required property Item iconsRoot
 	property bool isSnapping: snapAnimX.running || snapAnimY.running
 	property bool lassoActive
+	required property var modelData
 	property string resolvedIcon: {
 		if (fileName.endsWith(".desktop")) {
 			if (appEntry && appEntry.icon && appEntry.icon !== "")
@@ -29,8 +32,8 @@ Item {
 	}
 
 	function compensateAndSnap(absVisX, absVisY) {
-		dragContainer.x = absVisX - delegateRoot.x;
-		dragContainer.y = absVisY - delegateRoot.y;
+		dragContainer.x = absVisX - root.x;
+		dragContainer.y = absVisY - root.y;
 		snapAnimX.start();
 		snapAnimY.start();
 	}
@@ -43,19 +46,19 @@ Item {
 		return dragContainer.y;
 	}
 
-	height: root.cellHeight
-	width: root.cellWidth
-	x: gridX * root.cellWidth
-	y: gridY * root.cellHeight
+	height: root.iconsRoot.cellHeight
+	width: root.iconsRoot.cellWidth
+	x: gridX * root.iconsRoot.cellWidth
+	y: gridY * root.iconsRoot.cellHeight
 
 	Behavior on x {
-		enabled: !mouseArea.drag.active && !isSnapping && !root.selectedIcons.includes(filePath)
+		enabled: !mouseArea.drag.active && !root.isSnapping && !root.iconsRoot.selectedIcons.includes(root.filePath)
 
 		Anim {
 		}
 	}
 	Behavior on y {
-		enabled: !mouseArea.drag.active && !isSnapping && !root.selectedIcons.includes(filePath)
+		enabled: !mouseArea.drag.active && !root.isSnapping && !root.iconsRoot.selectedIcons.includes(root.filePath)
 
 		Anim {
 		}
@@ -78,8 +81,8 @@ Item {
 			}
 		}
 		transform: Translate {
-			x: (root.selectedIcons.includes(filePath) && root.dragLeader !== "" && root.dragLeader !== filePath) ? root.groupDragX : 0
-			y: (root.selectedIcons.includes(filePath) && root.dragLeader !== "" && root.dragLeader !== filePath) ? root.groupDragY : 0
+			x: (root.iconsRoot.selectedIcons.includes(root.filePath) && root.iconsRoot.dragLeader !== "" && root.iconsRoot.dragLeader !== root.filePath) ? root.iconsRoot.groupDragX : 0
+			y: (root.iconsRoot.selectedIcons.includes(root.filePath) && root.iconsRoot.dragLeader !== "" && root.iconsRoot.dragLeader !== root.filePath) ? root.iconsRoot.groupDragY : 0
 		}
 		transitions: Transition {
 			Anim {
@@ -88,14 +91,14 @@ Item {
 
 		onXChanged: {
 			if (mouseArea.drag.active) {
-				root.dragLeader = filePath;
-				root.groupDragX = x;
+				root.iconsRoot.dragLeader = root.filePath;
+				root.iconsRoot.groupDragX = x;
 			}
 		}
 		onYChanged: {
 			if (mouseArea.drag.active) {
-				root.dragLeader = filePath;
-				root.groupDragY = y;
+				root.iconsRoot.dragLeader = root.filePath;
+				root.iconsRoot.groupDragY = y;
 			}
 		}
 
@@ -127,10 +130,10 @@ Item {
 				anchors.horizontalCenter: parent.horizontalCenter
 				implicitSize: 48
 				source: {
-					if (delegateRoot.resolvedIcon.startsWith("file://") || delegateRoot.resolvedIcon.startsWith("/")) {
-						return delegateRoot.resolvedIcon;
+					if (root.resolvedIcon.startsWith("file://") || root.resolvedIcon.startsWith("/")) {
+						return root.resolvedIcon;
 					} else {
-						return Quickshell.iconPath(delegateRoot.resolvedIcon, fileIsDir ? "folder" : "text-x-generic");
+						return Quickshell.iconPath(root.resolvedIcon, root.fileIsDir ? "folder" : "text-x-generic");
 					}
 				}
 			}
@@ -147,7 +150,7 @@ Item {
 					maximumLineCount: 2
 					style: Text.Outline
 					styleColor: "black"
-					text: (appEntry && appEntry.name !== "") ? appEntry.name : fileName
+					text: (root.appEntry && root.appEntry.name !== "") ? root.appEntry.name : root.fileName
 					visible: !renameLoader.active
 					wrapMode: Text.Wrap
 				}
@@ -155,7 +158,7 @@ Item {
 				Loader {
 					id: renameLoader
 
-					active: root.editingFilePath === filePath
+					active: root.iconsRoot.editingFilePath === root.filePath
 					anchors.centerIn: parent
 					height: 24
 					width: 110
@@ -165,7 +168,7 @@ Item {
 						anchors.margins: 2
 						color: "white"
 						horizontalAlignment: Text.AlignHCenter
-						text: fileName
+						text: root.fileName
 						wrapMode: Text.Wrap
 
 						Component.onCompleted: {
@@ -174,22 +177,22 @@ Item {
 						}
 						Keys.onPressed: function (event) {
 							if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-								if (text.trim() !== "" && text !== fileName) {
+								if (text.trim() !== "" && text !== root.fileName) {
 									let newName = text.trim();
-									let newPath = filePath.substring(0, filePath.lastIndexOf('/') + 1) + newName;
+									let newPath = root.filePath.substring(0, root.filePath.lastIndexOf('/') + 1) + newName;
 
-									Quickshell.execDetached(["mv", filePath, newPath]);
+									Quickshell.execDetached(["mv", root.filePath, newPath]);
 								}
-								root.editingFilePath = "";
+								root.iconsRoot.editingFilePath = "";
 								event.accepted = true;
 							} else if (event.key === Qt.Key_Escape) {
-								root.editingFilePath = "";
+								root.iconsRoot.editingFilePath = "";
 								event.accepted = true;
 							}
 						}
 						onActiveFocusChanged: {
-							if (!activeFocus && root.editingFilePath === filePath) {
-								root.editingFilePath = "";
+							if (!activeFocus && root.iconsRoot.editingFilePath === root.filePath) {
+								root.iconsRoot.editingFilePath = "";
 							}
 						}
 					}
@@ -201,7 +204,7 @@ Item {
 			anchors.fill: parent
 			anchors.margins: 4
 			color: "white"
-			opacity: root.selectedIcons.includes(filePath) ? 0.2 : 0.0
+			opacity: root.iconsRoot.selectedIcons.includes(root.filePath) ? 0.2 : 0.0
 			radius: Appearance.rounding.smallest
 
 			Behavior on opacity {
@@ -215,45 +218,45 @@ Item {
 
 			acceptedButtons: Qt.LeftButton | Qt.RightButton
 			anchors.fill: parent
-			cursorShape: root.lassoActive ? undefined : Qt.PointingHandCursor
+			cursorShape: root.iconsRoot.lassoActive ? undefined : Qt.PointingHandCursor
 			drag.target: dragContainer
 			hoverEnabled: true
 
 			onClicked: mouse => {
-				root.forceActiveFocus();
+				root.iconsRoot.forceActiveFocus();
 
 				if (mouse.button === Qt.RightButton) {
-					if (!root.selectedIcons.includes(filePath)) {
-						root.selectedIcons = [filePath];
+					if (!root.iconsRoot.selectedIcons.includes(root.filePath)) {
+						root.iconsRoot.selectedIcons = [root.filePath];
 					}
-					let pos = mapToItem(root, mouse.x, mouse.y);
-					root.contextMenu.openAt(pos.x, pos.y, filePath, fileIsDir, appEntry, root.width, root.height, root.selectedIcons);
+					let pos = mapToItem(root.iconsRoot, mouse.x, mouse.y);
+					root.contextMenu.openAt(pos.x, pos.y, root.filePath, root.fileIsDir, root.appEntry, root.iconsRoot.width, root.iconsRoot.height, root.iconsRoot.selectedIcons);
 				} else {
-					root.selectedIcons = [filePath];
+					root.iconsRoot.selectedIcons = [root.filePath];
 					root.contextMenu.close();
 				}
 			}
 			onDoubleClicked: mouse => {
 				if (mouse.button === Qt.LeftButton) {
-					if (filePath.endsWith(".desktop") && appEntry)
-						appEntry.execute();
+					if (root.filePath.endsWith(".desktop") && root.appEntry)
+						root.appEntry.execute();
 					else
-						root.exec(filePath, fileIsDir);
+						root.iconsRoot.exec(root.filePath, root.fileIsDir);
 				}
 			}
 			onPressed: mouse => {
-				if (mouse.button === Qt.LeftButton && !root.selectedIcons.includes(filePath)) {
-					root.selectedIcons = [filePath];
+				if (mouse.button === Qt.LeftButton && !root.iconsRoot.selectedIcons.includes(root.filePath)) {
+					root.iconsRoot.selectedIcons = [root.filePath];
 				}
 			}
 			onReleased: {
 				if (drag.active) {
-					let absoluteX = delegateRoot.x + dragContainer.x;
-					let absoluteY = delegateRoot.y + dragContainer.y;
-					let snapX = Math.max(0, Math.round(absoluteX / root.cellWidth));
-					let snapY = Math.max(0, Math.round(absoluteY / root.cellHeight));
+					let absoluteX = root.x + dragContainer.x;
+					let absoluteY = root.y + dragContainer.y;
+					let snapX = Math.max(0, Math.round(absoluteX / root.iconsRoot.cellWidth));
+					let snapY = Math.max(0, Math.round(absoluteY / root.iconsRoot.cellHeight));
 
-					root.performMassDrop(filePath, snapX, snapY);
+					root.iconsRoot.performMassDrop(root.filePath, snapX, snapY);
 				}
 			}
 

Modules/DesktopIcons/DesktopIcons.qml

@@ -1,11 +1,12 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import Quickshell
-import qs.Modules
+import ZShell.Services
 import qs.Helpers
 import qs.Config
 import qs.Components
 import qs.Paths
-import ZShell.Services
 
 Item {
 	id: root
@@ -23,7 +24,33 @@ Item {
 	property real startY: 0
 
 	function exec(filePath, isDir) {
-		const cmd = ["xdg-open", filePath];
+		let type = DesktopUtils.getFileType(filePath, isDir);
+		let cmd = [];
+		switch (type) {
+		case "image":
+			cmd = [Config.general.apps.image, filePath];
+			break;
+		case "video":
+			cmd = [Config.general.apps.playback, filePath];
+			break;
+		case "audio":
+			cmd = [Config.general.apps.audio, filePath];
+			break;
+		case "archive":
+			cmd = [Config.general.apps.archiver, filePath];
+			break;
+		case "directory":
+			cmd = [Config.general.apps.explorer, filePath];
+			break;
+		case "text":
+			cmd = [Config.general.apps.editor, filePath];
+			break;
+		case "document":
+			cmd = [Config.general.apps.document, filePath];
+			break;
+		default:
+			cmd = ["xdg-open", filePath];
+		}
 		Quickshell.execDetached(cmd);
 	}
 
@@ -57,6 +84,7 @@ Item {
 		root.groupDragY = 0;
 	}
 
+	anchors.fill: parent
 	focus: true
 
 	Keys.onPressed: event => {
@@ -67,6 +95,8 @@ Item {
 	DesktopModel {
 		id: desktopModel
 
+		rows: Math.max(1, Math.floor(gridArea.height / root.cellHeight))
+
 		Component.onCompleted: loadDirectory(FileUtils.trimFileProtocol(Paths.desktop))
 	}
 
@@ -133,10 +163,10 @@ Item {
 				lasso.width = Math.abs(mouse.x - root.startX);
 				lasso.height = Math.abs(mouse.y - root.startY);
 
-				let minCol = Math.floor((lasso.x - gridArea.x) / cellWidth);
-				let maxCol = Math.floor((lasso.x + lasso.width - gridArea.x) / cellWidth);
-				let minRow = Math.floor((lasso.y - gridArea.y) / cellHeight);
-				let maxRow = Math.floor((lasso.y + lasso.height - gridArea.y) / cellHeight);
+				let minCol = Math.floor((lasso.x - gridArea.x) / root.cellWidth);
+				let maxCol = Math.floor((lasso.x + lasso.width - gridArea.x) / root.cellWidth);
+				let minRow = Math.floor((lasso.y - gridArea.y) / root.cellHeight);
+				let maxRow = Math.floor((lasso.y + lasso.height - gridArea.y) / root.cellHeight);
 
 				let newSelection = [];
 				for (let i = 0; i < gridArea.children.length; i++) {
@@ -158,10 +188,10 @@ Item {
 			} else {
 				bgContextMenu.close();
 				root.selectedIcons = [];
-				root.startX = Math.floor(mouse.x);
-				root.startY = Math.floor(mouse.y);
-				lasso.x = Math.floor(mouse.x);
-				lasso.y = Math.floor(mouse.y);
+				root.startX = mouse.x;
+				root.startY = mouse.y;
+				lasso.x = mouse.x;
+				lasso.y = mouse.y;
 				lasso.width = 0;
 				lasso.height = 0;
 				lasso.showLasso();
@@ -178,15 +208,15 @@ Item {
 		anchors.fill: parent
 		anchors.margins: 20
 		anchors.topMargin: 40
-		visible: true
 
 		Repeater {
 			model: desktopModel
 
 			delegate: DesktopIconDelegate {
-				property int itemIndex: index
+				required property int index
 
-				lassoActive: root.lassoActive
+				contextMenu: desktopMenu
+				iconsRoot: root
 			}
 		}
 	}
@@ -202,6 +232,5 @@ Item {
 
 	BackgroundContextMenu {
 		id: bgContextMenu
-
 	}
 }

Modules/Drawing/Content.qml

@@ -1,33 +1,35 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Layouts
+import ZShell.Components
 import qs.Config
 import qs.Components
 
 Item {
 	id: root
 
-	readonly property var colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#a855f7", "#ec4899", "#ffffff", "#000000"]
-	required property Canvas drawing
+	readonly property var colors1: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4"]
+	readonly property var colors2: ["#3b82f6", "#a855f7", "#ec4899", "#ffffff", "#000000"]
+	required property var drawing
 	required property var visibilities
+	required property Wrapper wrapper
 
 	function syncFromPenColor() {
 		if (!drawing)
 			return;
 
 		if (!saturationSlider.pressed)
-			saturationSlider.value = drawing.penColor.hsvSaturation;
+			saturationSlider.value = drawing.drawingState.penColor.hsvSaturation;
 
 		if (!brightnessSlider.pressed)
-			brightnessSlider.value = drawing.penColor.hsvValue;
+			brightnessSlider.value = drawing.drawingState.penColor.hsvValue;
 	}
 
 	function updatePenColorFromHsv() {
 		if (!drawing)
 			return;
 
-		drawing.penColor = Qt.hsva(huePicker.currentHue, saturationSlider.value, brightnessSlider.value, drawing.penColor.a);
+		drawing.drawingState.penColor = Qt.hsva(huePicker.currentHue, saturationSlider.value, brightnessSlider.value, drawing.drawingState.penColor.a);
 	}
 
 	implicitHeight: column.height + Appearance.padding.larger * 2
@@ -40,7 +42,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing
+		target: root.drawing.drawingState
 	}
 
 	Column {
@@ -58,13 +60,14 @@ Item {
 		GradientSlider {
 			id: saturationSlider
 
+			anchors.left: parent.left
+			anchors.right: parent.right
 			brightness: brightnessSlider.value
 			channel: "saturation"
 			from: 0
 			hue: huePicker.currentHue
 			icon: "\ue40a"
 			implicitHeight: 30
-			implicitWidth: palette.width
 			orientation: Qt.Horizontal
 			to: 1
 
@@ -74,12 +77,13 @@ Item {
 		GradientSlider {
 			id: brightnessSlider
 
+			anchors.left: parent.left
+			anchors.right: parent.right
 			channel: "brightness"
 			from: 0
 			hue: huePicker.currentHue
 			icon: "\ue1ac"
 			implicitHeight: 30
-			implicitWidth: palette.width
 			orientation: Qt.Horizontal
 			saturation: saturationSlider.value
 			to: 1
@@ -87,65 +91,117 @@ Item {
 			onMoved: root.updatePenColorFromHsv()
 		}
 
-		GridLayout {
-			id: palette
+		ButtonRow {
+			id: row1
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			columns: 5
-			rowSpacing: 8
-			rows: 2
+			spacing: Appearance.spacing.normal
 
 			Repeater {
-				model: root.colors
+				model: root.colors1
 
-				delegate: Item {
-					id: colorCircle
+				delegate: ColorButton {
+					row: row1
+				}
+			}
+		}
 
-					required property color modelData
-					readonly property bool selected: Qt.colorEqual(root.drawing.penColor, modelData)
+		ButtonRow {
+			id: row2
 
-					Layout.fillWidth: true
-					height: 28
+			anchors.left: parent.left
+			anchors.right: parent.right
+			spacing: Appearance.spacing.normal
 
-					CustomRect {
-						anchors.centerIn: parent
-						border.color: Qt.rgba(0, 0, 0, 0.25)
-						border.width: Qt.colorEqual(modelData, "#ffffff") ? 1 : 0
-						color: colorCircle.modelData
-						height: 20
-						radius: width / 2
-						width: 20
-					}
+			Repeater {
+				model: root.colors2
 
-					CustomRect {
-						anchors.centerIn: parent
-						border.color: selected ? "#ffffff" : Qt.rgba(1, 1, 1, 0.28)
-						border.width: selected ? 3 : 1
-						color: "transparent"
-						height: parent.height
-						radius: width / 2
-						width: parent.height
-
-						StateLayer {
-							onClicked: root.drawing.penColor = colorCircle.modelData
-						}
-					}
+				delegate: ColorButton {
+					row: row2
 				}
 			}
 		}
 
 		FilledSlider {
+			anchors.left: parent.left
+			anchors.right: parent.right
 			from: 1
 			icon: "border_color"
 			implicitHeight: 30
-			implicitWidth: palette.width
 			multiplier: 1
 			orientation: Qt.Horizontal
 			to: 45
-			value: root.drawing.penWidth
+			value: root.drawing.drawingState.penWidth
 
-			onMoved: root.drawing.penWidth = value
+			onMoved: root.drawing.drawingState.penWidth = value
+		}
+
+		ButtonRow {
+			anchors.left: parent.left
+			anchors.right: parent.right
+			spacing: Appearance.spacing.small
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: "close"
+				inactiveColor: DynamicColors.palette.m3error
+				inactiveOnColor: DynamicColors.palette.m3onError
+				isRound: true
+				shapeMorph: true
+				text: "Exit"
+
+				onClicked: root.visibilities.isDrawing = false
+			}
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: "ink_eraser"
+				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				isRound: true
+				shapeMorph: true
+				text: "Clear"
+
+				onClicked: root.drawing.content.clear()
+			}
 		}
 	}
+
+	IconButton {
+		anchors.margins: Appearance.padding.normal
+		anchors.right: parent.right
+		anchors.top: parent.top
+		checked: root.wrapper.pinned
+		icon: "keep"
+		isToggle: true
+		shapeMorph: true
+
+		onClicked: {
+			root.wrapper.togglePinned();
+		}
+	}
+
+	component ColorButton: IconButton {
+		id: colorButton
+
+		readonly property real buttonSize: (row.width - row.spacing * 4) / 5
+		required property color modelData
+		required property ButtonRow row
+
+		fillWidth: false
+		font.pointSize: Appearance.font.size.normal
+		icon: ""
+		implicitHeight: buttonSize
+		implicitWidth: buttonSize
+		inactiveColor: modelData
+		inactiveOnColor: DynamicColors.on(modelData)
+		isRound: true
+		shapeMorph: true
+		shapeMorphExpansion: pressed ? 12 : 0
+
+		onClicked: root.drawing.drawingState.penColor = modelData
+	}
 }

Modules/Drawing/Wrapper.qml

@@ -10,13 +10,36 @@ import qs.Daemons
 Item {
 	id: root
 
-	required property Canvas drawing
+	required property var drawing
 	property bool expanded: true
 	property real offsetScale: shouldBeActive ? 0 : 1
+	property bool pinned: false
 	required property ShellScreen screen
 	readonly property bool shouldBeActive: visibilities.isDrawing
 	required property var visibilities
 
+	function collapse(): void {
+		if (pinned)
+			return;
+
+		expanded = false;
+	}
+
+	function expand(): void {
+		expanded = true;
+	}
+
+	function toggleExpanded(): void {
+		if (pinned)
+			return;
+
+		expanded = !expanded;
+	}
+
+	function togglePinned(): void {
+		pinned = !pinned;
+	}
+
 	anchors.leftMargin: (-implicitWidth - 5) * offsetScale
 	implicitHeight: content.implicitHeight
 	implicitWidth: root.expanded ? content.implicitWidth : icon.implicitWidth
@@ -44,7 +67,7 @@ Item {
 	Loader {
 		id: icon
 
-		active: root.shouldBeActive || root.visible
+		active: (root.shouldBeActive || root.visible) && opacity > 0
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		asynchronous: true
@@ -63,7 +86,7 @@ Item {
 	Loader {
 		id: content
 
-		active: root.shouldBeActive || root.visible
+		active: (root.shouldBeActive || root.visible) && opacity > 0
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		asynchronous: true
@@ -76,6 +99,7 @@ Item {
 		sourceComponent: Content {
 			drawing: root.drawing
 			visibilities: root.visibilities
+			wrapper: root
 		}
 	}
 }

Modules/HyprsunsetWidget.qml

@@ -24,6 +24,12 @@ CustomRect {
 		anchors.centerIn: parent
 		animate: true
 		color: root.tempEnabled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		fill: root.tempEnabled ? 1 : 0
 		text: root.tempEnabled ? "lightbulb" : "light_off"
+
+		Behavior on fill {
+			Anim {
+			}
+		}
 	}
 }

Modules/Launcher/Items/ActionItem.qml

@@ -15,11 +15,11 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		function onClicked(): void {
+		radius: Appearance.rounding.smallest
+
+		onClicked: {
 			root.modelData?.onClicked(root.list);
 		}
-
-		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Items/AppItem.qml

@@ -18,12 +18,12 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		function onClicked(): void {
+		radius: Appearance.rounding.smallest
+
+		onClicked: {
 			Apps.launch(root.modelData);
 			root.visibilities.launcher = false;
 		}
-
-		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Items/CalcItem.qml

@@ -23,11 +23,11 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		function onClicked(): void {
+		radius: Appearance.rounding.smallest
+
+		onClicked: {
 			root.onClicked();
 		}
-
-		radius: Appearance.rounding.smallest
 	}
 
 	RowLayout {
@@ -76,12 +76,12 @@ Item {
 			StateLayer {
 				id: stateLayer
 
-				function onClicked(): void {
+				color: DynamicColors.palette.m3onTertiary
+
+				onClicked: {
 					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.terminal, "fish", "-C", `exec qalc -i '${root.math}'`]);
 					root.list.visibilities.launcher = false;
 				}
-
-				color: DynamicColors.palette.m3onTertiary
 			}
 
 			CustomText {

Modules/Launcher/Items/VariantItem.qml

@@ -14,11 +14,11 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		function onClicked(): void {
+		radius: Appearance.rounding.smallest
+
+		onClicked: {
 			root.modelData?.onClicked(root.list);
 		}
-
-		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Items/WallpaperItem.qml

@@ -33,12 +33,12 @@ Item {
 	}
 
 	StateLayer {
-		function onClicked(): void {
+		radius: Appearance.rounding.normal
+
+		onClicked: {
 			Wallpapers.setWallpaper(root.modelData.path);
 			root.visibilities.launcher = false;
 		}
-
-		radius: Appearance.rounding.normal
 	}
 
 	Elevation {

Modules/Lock/Center.qml

@@ -108,12 +108,12 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				parent.forceActiveFocus();
-			}
-
 			cursorShape: Qt.IBeamCursor
 			hoverEnabled: false
+
+			onClicked: {
+				parent.forceActiveFocus();
+			}
 		}
 
 		RowLayout {
@@ -167,11 +167,11 @@ ColumnLayout {
 				radius: Appearance.rounding.full
 
 				StateLayer {
-					function onClicked(): void {
+					color: root.lock.pam.buffer ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
+					onClicked: {
 						root.lock.pam.passwd.start();
 					}
-
-					color: root.lock.pam.buffer ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				}
 
 				MaterialIcon {

Modules/Lock/Media.qml

@@ -178,11 +178,11 @@ Item {
 		StateLayer {
 			id: controlState
 
-			function onClicked(): void {
+			color: control.active ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
+
+			onClicked: {
 				control.onClicked();
 			}
-
-			color: control.active ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
 		}
 
 		MaterialIcon {

Modules/Lock/NotifGroup.qml

@@ -161,11 +161,11 @@ CustomRect {
 					}
 
 					StateLayer {
-						function onClicked(): void {
+						color: root.urgency === "critical" ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+
+						onClicked: {
 							root.expanded = !root.expanded;
 						}
-
-						color: root.urgency === "critical" ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
 					}
 
 					RowLayout {

Modules/Lock/Resources.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Modules
+import ZShell.Services
 import qs.Components
 import qs.Helpers
 import qs.Config
@@ -16,30 +16,34 @@ GridLayout {
 	rowSpacing: Appearance.spacing.large
 	rows: 1
 
-	Ref {
-		service: SystemUsage
+	ServiceRef {
+		service: Memory
+	}
+
+	ServiceRef {
+		service: Cpu
 	}
 
 	Resource {
 		Layout.bottomMargin: Appearance.padding.large
 		Layout.topMargin: Appearance.padding.large
-		colour: DynamicColors.palette.m3primary
+		fgColor: DynamicColors.palette.m3primary
 		icon: "memory"
-		value: SystemUsage.cpuPerc
+		value: Cpu.percentage
 	}
 
 	Resource {
 		Layout.bottomMargin: Appearance.padding.large
 		Layout.topMargin: Appearance.padding.large
-		colour: DynamicColors.palette.m3secondary
+		fgColor: DynamicColors.palette.m3secondary
 		icon: "memory_alt"
-		value: SystemUsage.memPerc
+		value: Memory.percentage
 	}
 
 	component Resource: CustomRect {
 		id: res
 
-		required property color colour
+		required property color fgColor
 		required property string icon
 		required property real value
 
@@ -58,8 +62,8 @@ GridLayout {
 			id: circ
 
 			anchors.fill: parent
-			bgColour: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 3)
-			fgColour: res.colour
+			bgColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 3)
+			fgColor: res.fgColor
 			padding: Appearance.padding.large * 3
 			strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
 			value: res.value
@@ -69,7 +73,7 @@ GridLayout {
 			id: icon
 
 			anchors.centerIn: parent
-			color: res.colour
+			color: res.fgColor
 			font.pointSize: (circ.arcRadius * 0.7) || 1
 			font.weight: 600
 			text: res.icon

Modules/NotifBell.qml

@@ -21,6 +21,7 @@ CustomRect {
 
 		anchors.centerIn: parent
 		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		fill: root.visibilities.sidebar ? 1 : 0
 		font.family: "Material Symbols Rounded"
 		font.pointSize: Appearance.font.size.larger
 		text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4"
@@ -29,10 +30,14 @@ CustomRect {
 			CAnim {
 			}
 		}
+		Behavior on fill {
+			Anim {
+			}
+		}
 	}
 
 	StateLayer {
-		cursorShape: Qt.PointingHandCursor
+		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
 		onClicked: {
 			root.visibilities.sidebar = !root.visibilities.sidebar;

Modules/Notifications/Content.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.Components
 import qs.Config
 import qs.Daemons
@@ -20,28 +22,26 @@ Item {
 		if (count === 0)
 			return 0;
 
-		let height = (count - 1) * 8;
+		let height = (count - 1) * Appearance.spacing.small;
 		for (let i = 0; i < count; i++)
-			height += list.itemAtIndex(i)?.nonAnimHeight ?? 0;
+			height += (list.itemAtIndex(i) as NotifWrapper)?.nonAnimHeight ?? 0;
 
-		if (visibilities && panels) {
-			if (panels.popouts.hasCurrent && (panels.popouts.currentCenter + (panels.popouts.current?.width / 2)) > panels.notifications.x || visibilities.dashboard)
-				return 0;
+		if (panels.popouts.hasCurrent && (panels.popouts.currentCenter + (panels.popouts.current?.width / 2)) > panels.notifications.x || visibilities.dashboard)
+			return 0;
 
-			if (visibilities.osd) {
-				const h = panels.osd.y - 8 * 2 - padding * 2;
-				if (height > h)
-					height = h;
-			}
-
-			if (visibilities.session) {
-				const h = panels.session.y - 8 * 2 - padding * 2;
-				if (height > h)
-					height = h;
-			}
+		if (visibilities.osd) {
+			const h = panels.osd.y - Appearance.spacing.small * 2 - padding * 2;
+			if (height > h)
+				height = h;
 		}
 
-		return Math.min((QsWindow.window?.screen?.height ?? 0) - 1 * 2, height + padding * 2);
+		if (visibilities.session) {
+			const h = panels.session.y - Appearance.spacing.small * 2 - padding * 2;
+			if (height > h)
+				height = h;
+		}
+
+		return Math.min(((QsWindow.window as QsWindow)?.screen?.height ?? 0) - 1 * 2, height + padding * 2);
 	}
 	implicitWidth: Config.notifs.sizes.width + padding * 2
 
@@ -60,83 +60,11 @@ Item {
 			id: list
 
 			anchors.fill: parent
-			cacheBuffer: QsWindow.window?.screen.height ?? 0
+			cacheBuffer: (QsWindow.window as QsWindow)?.screen.height ?? 0
 			orientation: Qt.Vertical
 			spacing: 0
 
-			delegate: Item {
-				id: wrapper
-
-				property int idx
-				required property int index
-				required property NotifServer.Notif modelData
-				readonly property alias nonAnimHeight: notif.nonAnimHeight
-
-				implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Appearance.spacing.small)
-				implicitWidth: notif.implicitWidth
-
-				ListView.onRemove: removeAnim.start()
-				onIndexChanged: {
-					if (index !== -1)
-						idx = index;
-				}
-
-				SequentialAnimation {
-					id: removeAnim
-
-					PropertyAction {
-						property: "ListView.delayRemove"
-						target: wrapper
-						value: true
-					}
-
-					PropertyAction {
-						property: "enabled"
-						target: wrapper
-						value: false
-					}
-
-					PropertyAction {
-						property: "implicitHeight"
-						target: wrapper
-						value: 0
-					}
-
-					PropertyAction {
-						property: "z"
-						target: wrapper
-						value: 1
-					}
-
-					Anim {
-						duration: MaterialEasing.expressiveEffectsTime
-						easing.bezierCurve: MaterialEasing.expressiveEffects
-						property: "x"
-						target: notif
-						to: (notif.x >= 0 ? Config.notifs.sizes.width : -Config.notifs.sizes.width) * 2
-					}
-
-					PropertyAction {
-						property: "ListView.delayRemove"
-						target: wrapper
-						value: false
-					}
-				}
-
-				ClippingRectangle {
-					anchors.top: parent.top
-					anchors.topMargin: wrapper.idx === 0 ? 0 : 8
-					color: "transparent"
-					implicitHeight: notif.implicitHeight
-					implicitWidth: notif.implicitWidth
-					radius: Appearance.rounding.smallest / 2
-
-					Notification {
-						id: notif
-
-						modelData: wrapper.modelData
-					}
-				}
+			delegate: NotifWrapper {
 			}
 			displaced: Transition {
 				Anim {
@@ -158,4 +86,79 @@ Item {
 		duration: Appearance.anim.durations.expressiveDefaultSpatial
 		easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 	}
+	component NotifWrapper: Item {
+		id: wrapper
+
+		property int idx
+		required property int index
+		required property NotifServer.Notif modelData
+		readonly property alias nonAnimHeight: notif.nonAnimHeight
+
+		implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Appearance.spacing.small)
+		implicitWidth: notif.implicitWidth
+
+		ListView.onRemove: removeAnim.start()
+		onIndexChanged: {
+			if (index !== -1)
+				idx = index;
+		}
+
+		SequentialAnimation {
+			id: removeAnim
+
+			PropertyAction {
+				property: "ListView.delayRemove"
+				target: wrapper
+				value: true
+			}
+
+			PropertyAction {
+				property: "enabled"
+				target: wrapper
+				value: false
+			}
+
+			PropertyAction {
+				property: "implicitHeight"
+				target: wrapper
+				value: 0
+			}
+
+			PropertyAction {
+				property: "z"
+				target: wrapper
+				value: 1
+			}
+
+			Anim {
+				duration: MaterialEasing.expressiveEffectsTime
+				easing.bezierCurve: MaterialEasing.expressiveEffects
+				property: "x"
+				target: notif
+				to: (notif.x >= 0 ? Config.notifs.sizes.width : -Config.notifs.sizes.width) * 2
+			}
+
+			PropertyAction {
+				property: "ListView.delayRemove"
+				target: wrapper
+				value: false
+			}
+		}
+
+		ClippingRectangle {
+			anchors.top: parent.top
+			anchors.topMargin: wrapper.idx === 0 ? 0 : 8
+			color: "transparent"
+			implicitHeight: notif.implicitHeight
+			implicitWidth: notif.implicitWidth
+			radius: Appearance.rounding.small
+
+			Notification {
+				id: notif
+
+				implicitWidth: root.implicitWidth - root.padding * 2
+				modelData: wrapper.modelData
+			}
+		}
+	}
 }

Modules/Notifications/Notification.qml

@@ -1,15 +1,14 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import qs.Config
-import qs.Modules
+import QtQuick
+import QtQuick.Shapes
+import Quickshell
+import Quickshell.Services.Notifications
+import ZShell.Components
 import qs.Daemons
 import qs.Helpers
-import Quickshell
-import Quickshell.Widgets
-import Quickshell.Services.Notifications
-import QtQuick
-import QtQuick.Layouts
+import qs.Config
+import qs.Components
 
 CustomRect {
 	id: root
@@ -18,17 +17,16 @@ CustomRect {
 	readonly property bool hasAppIcon: modelData.appIcon.length > 0
 	readonly property bool hasImage: modelData.image.length > 0
 	required property NotifServer.Notif modelData
-	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
+	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? Appearance.spacing.extraSmall * 2 + appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
 
 	color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondaryContainer : DynamicColors.tPalette.m3surfaceContainer
 	implicitHeight: inner.implicitHeight
-	implicitWidth: Config.notifs.sizes.width
-	radius: 6
-	x: Config.notifs.sizes.width
+	radius: Appearance.rounding.small
+	x: implicitWidth
 
 	Behavior on x {
 		Anim {
-			easing.bezierCurve: MaterialEasing.expressiveEffects
+			easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
 		}
 	}
 
@@ -54,7 +52,7 @@ CustomRect {
 				return;
 
 			const actions = root.modelData.actions;
-			if (actions?.length === 1)
+			if (actions.length === 1)
 				actions[0].invoke();
 		}
 		onEntered: root.modelData.timer.stop()
@@ -79,7 +77,7 @@ CustomRect {
 			if (!containsMouse)
 				root.modelData.timer.start();
 
-			if (Math.abs(root.x) < Config.notifs.sizes.width * Config.notifs.clearThreshold)
+			if (Math.abs(root.x) < root.implicitWidth * Config.notifs.clearThreshold)
 				root.x = 0;
 			else
 				root.modelData.popup = false;
@@ -89,15 +87,13 @@ CustomRect {
 			id: inner
 
 			anchors.left: parent.left
-			anchors.margins: 8
+			anchors.margins: Appearance.padding.normal
 			anchors.right: parent.right
 			anchors.top: parent.top
 			implicitHeight: root.nonAnimHeight
 
 			Behavior on implicitHeight {
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
 				}
 			}
 
@@ -112,7 +108,8 @@ CustomRect {
 				visible: root.hasImage || root.hasAppIcon
 				width: Config.notifs.sizes.image
 
-				sourceComponent: ClippingRectangle {
+				sourceComponent: CustomClippingRect {
+					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2) : DynamicColors.palette.m3secondaryContainer
 					implicitHeight: Config.notifs.sizes.image
 					implicitWidth: Config.notifs.sizes.image
 					radius: Appearance.rounding.full
@@ -122,8 +119,11 @@ CustomRect {
 						asynchronous: true
 						cache: false
 						fillMode: Image.PreserveAspectCrop
-						mipmap: true
 						source: Qt.resolvedUrl(root.modelData.image)
+						sourceSize: {
+							const size = Config.notifs.sizes.image * ((QsWindow.window as QsWindow)?.devicePixelRatio ?? 1);
+							return Qt.size(size, size);
+						}
 					}
 				}
 			}
@@ -153,8 +153,9 @@ CustomRect {
 						height: Math.round(parent.width * 0.6)
 						width: Math.round(parent.width * 0.6)
 
-						sourceComponent: CustomIcon {
+						sourceComponent: ColoredIcon {
 							anchors.fill: parent
+							color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
 							layer.enabled: root.modelData.appIcon.endsWith("symbolic")
 							source: Quickshell.iconPath(root.modelData.appIcon)
 						}
@@ -163,34 +164,67 @@ CustomRect {
 					Loader {
 						active: !root.hasAppIcon
 						anchors.centerIn: parent
-						anchors.horizontalCenterOffset: -18 * 0.02
-						anchors.verticalCenterOffset: 18 * 0.02
+						anchors.verticalCenterOffset: 1
 						asynchronous: true
 
 						sourceComponent: MaterialIcon {
 							color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
-							font.pointSize: 18
 							text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
 						}
 					}
 				}
 			}
 
+			Shape {
+				id: progressIndicator
+
+				anchors.centerIn: appIcon
+				height: appIcon.implicitHeight + progressShape.strokeWidth * 2
+				preferredRendererType: Shape.CurveRenderer
+				width: appIcon.implicitWidth + progressShape.strokeWidth * 2
+
+				ShapePath {
+					id: progressShape
+
+					capStyle: ShapePath.RoundCap
+					fillColor: "transparent"
+					strokeColor: DynamicColors.palette.m3primary
+					strokeWidth: 2
+
+					PathAngleArc {
+						id: progressArc
+
+						centerX: progressIndicator.width / 2
+						centerY: progressIndicator.height / 2
+						radiusX: progressIndicator.width / 2 - Appearance.padding.extraSmall / 2
+						radiusY: progressIndicator.height / 2 - Appearance.padding.extraSmall / 2
+						startAngle: -90
+						sweepAngle: ((root.modelData.hints.value ?? 0) / 100) * 360
+
+						Behavior on sweepAngle {
+							Anim {
+								easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+							}
+						}
+					}
+				}
+			}
+
 			CustomText {
 				id: appName
 
 				anchors.left: image.right
-				anchors.leftMargin: 10
+				anchors.leftMargin: Appearance.spacing.small
 				anchors.top: parent.top
 				animate: true
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
 				maximumLineCount: 1
 				opacity: root.expanded ? 1 : 0
 				text: appNameMetrics.elidedText
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -199,9 +233,8 @@ CustomRect {
 				id: appNameMetrics
 
 				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - 7 * 3
-				font.family: appName.font.family
-				font.pointSize: appName.font.pointSize
+				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+				font: appName.font
 				text: root.modelData.appName
 			}
 
@@ -209,9 +242,10 @@ CustomRect {
 				id: summary
 
 				anchors.left: image.right
-				anchors.leftMargin: 10
+				anchors.leftMargin: Appearance.spacing.small
 				anchors.top: parent.top
 				animate: true
+				font.pointSize: Appearance.font.size.small
 				height: implicitHeight
 				maximumLineCount: 1
 				text: summaryMetrics.elidedText
@@ -225,6 +259,9 @@ CustomRect {
 					when: root.expanded
 
 					PropertyChanges {
+						body.anchors.topMargin: Appearance.spacing.extraSmall
+						bodyPreview.anchors.topMargin: Appearance.spacing.extraSmall
+						summary.anchors.topMargin: Appearance.spacing.extraSmall
 						summary.maximumLineCount: undefined
 					}
 
@@ -239,10 +276,11 @@ CustomRect {
 						target: summary
 					}
 
-					AnchorAnimation {
-						duration: MaterialEasing.expressiveEffectsTime
-						easing.bezierCurve: MaterialEasing.expressiveEffects
-						easing.type: Easing.BezierSpline
+					Anim {
+						property: "topMargin"
+					}
+
+					AnchorAnim {
 					}
 				}
 			}
@@ -251,9 +289,8 @@ CustomRect {
 				id: summaryMetrics
 
 				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - 7 * 3
-				font.family: summary.font.family
-				font.pointSize: summary.font.pointSize
+				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+				font: summary.font
 				text: root.modelData.summary
 			}
 
@@ -261,10 +298,9 @@ CustomRect {
 				id: timeSep
 
 				anchors.left: summary.right
-				anchors.leftMargin: 7
+				anchors.leftMargin: Appearance.spacing.small
 				anchors.top: parent.top
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
 				text: "•"
 
 				states: State {
@@ -277,10 +313,7 @@ CustomRect {
 					}
 				}
 				transitions: Transition {
-					AnchorAnimation {
-						duration: MaterialEasing.expressiveEffectsTime
-						easing.bezierCurve: MaterialEasing.expressiveEffects
-						easing.type: Easing.BezierSpline
+					AnchorAnim {
 					}
 				}
 			}
@@ -289,11 +322,11 @@ CustomRect {
 				id: time
 
 				anchors.left: timeSep.right
-				anchors.leftMargin: 7
+				anchors.leftMargin: Appearance.spacing.small
 				anchors.top: parent.top
 				animate: true
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
+				font.pointSize: Appearance.font.size.small
 				horizontalAlignment: Text.AlignLeft
 				text: root.modelData.timeStr
 			}
@@ -303,25 +336,33 @@ CustomRect {
 
 				anchors.right: parent.right
 				anchors.top: parent.top
-				implicitHeight: expandIcon.height
-				implicitWidth: expandIcon.height
+				anchors.topMargin: -Appearance.padding.extraSmall
+				implicitHeight: expandIcon.implicitHeight
+				implicitWidth: expandIcon.implicitHeight
 
 				StateLayer {
-					function onClicked() {
-						root.expanded = !root.expanded;
-					}
-
 					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
 					radius: Appearance.rounding.full
+
+					onClicked: root.expanded = !root.expanded
 				}
 
 				MaterialIcon {
 					id: expandIcon
 
 					anchors.centerIn: parent
-					animate: true
-					font.pointSize: 13
-					text: root.expanded ? "expand_less" : "expand_more"
+					anchors.verticalCenterOffset: root.expanded ? -1 : 1
+					rotation: root.expanded ? 180 : 0
+					text: "expand_more"
+
+					Behavior on anchors.verticalCenterOffset {
+						Anim {
+						}
+					}
+					Behavior on rotation {
+						Anim {
+						}
+					}
 				}
 			}
 
@@ -330,17 +371,18 @@ CustomRect {
 
 				anchors.left: summary.left
 				anchors.right: expandBtn.left
-				anchors.rightMargin: 7
+				anchors.rightMargin: Appearance.spacing.small
 				anchors.top: summary.bottom
 				animate: true
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
+				font.pointSize: Appearance.font.size.small
 				opacity: root.expanded ? 0 : 1
 				text: bodyPreviewMetrics.elidedText
 				textFormat: Text.MarkdownText
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -350,8 +392,7 @@ CustomRect {
 
 				elide: Text.ElideRight
 				elideWidth: bodyPreview.width
-				font.family: bodyPreview.font.family
-				font.pointSize: bodyPreview.font.pointSize
+				font: bodyPreview.font
 				text: root.modelData.body
 			}
 
@@ -360,11 +401,10 @@ CustomRect {
 
 				anchors.left: summary.left
 				anchors.right: expandBtn.left
-				anchors.rightMargin: 7
+				anchors.rightMargin: Appearance.spacing.small
 				anchors.top: summary.bottom
 				animate: true
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
 				height: text ? implicitHeight : 0
 				opacity: root.expanded ? 1 : 0
 				text: root.modelData.body
@@ -373,6 +413,7 @@ CustomRect {
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 
@@ -385,83 +426,89 @@ CustomRect {
 				}
 			}
 
-			RowLayout {
+			ButtonRow {
 				id: actions
 
-				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.left: parent.left
+				anchors.right: parent.right
 				anchors.top: body.bottom
-				anchors.topMargin: 7
+				anchors.topMargin: Appearance.spacing.small
 				opacity: root.expanded ? 1 : 0
-				spacing: 10
+				spacing: Appearance.spacing.extraSmall
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 
-				Action {
-					modelData: QtObject {
-						readonly property string text: qsTr("Close")
+				IconButton {
+					enabled: root.expanded
+					fillWidth: root.modelData.actions.length === 0
+					icon: "close"
+					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+					isRound: true
+					padding: Appearance.padding.extraSmall
+					shapeMorph: true
 
-						function invoke(): void {
-							root.modelData.close();
-						}
-					}
+					onClicked: root.modelData.close()
 				}
 
 				Repeater {
 					model: root.modelData.actions
 
-					delegate: Component {
-						Action {
+					TextButton {
+						required property var modelData
+
+						enabled: root.expanded
+						fillWidth: true
+						font: {
+							const f = Qt.font(font);
+							f.pointSize = Appearance.font.size.small;
+							return f;
 						}
+						implicitWidth: label.implicitWidth
+						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+						isRound: true
+						label.anchors.centerIn: undefined
+						label.anchors.left: left
+						label.anchors.margins: Appearance.padding.normal
+						label.anchors.right: right
+						label.anchors.verticalCenter: verticalCenter
+						label.elide: Text.ElideRight
+						label.horizontalAlignment: Text.AlignHCenter
+						shapeMorph: true
+						text: modelData.text
+
+						onClicked: modelData.invoke()
+					}
+				}
+
+				IconButton {
+					enabled: root.expanded
+					fillWidth: root.modelData.actions.length === 0
+					icon: copyTimer.running ? "inventory" : "content_copy"
+					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+					isRound: true
+					label.animate: true
+					padding: Appearance.padding.extraSmall
+					shapeMorph: true
+
+					onClicked: {
+						Quickshell.clipboardText = root.modelData.body;
+						copyTimer.restart();
+					}
+
+					Timer {
+						id: copyTimer
+
+						interval: 3000
 					}
 				}
 			}
 		}
 	}
-
-	component Action: CustomRect {
-		id: action
-
-		required property var modelData
-
-		Layout.preferredHeight: actionText.height + 4 * 2
-		Layout.preferredWidth: actionText.width + 8 * 2
-		color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-		implicitHeight: actionText.height + 4 * 2
-		implicitWidth: actionText.width + 8 * 2
-		radius: Appearance.rounding.full
-
-		StateLayer {
-			function onClicked(): void {
-				action.modelData.invoke();
-			}
-
-			color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurface
-			radius: Appearance.rounding.full
-		}
-
-		CustomText {
-			id: actionText
-
-			anchors.centerIn: parent
-			color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: 10
-			text: actionTextMetrics.elidedText
-		}
-
-		TextMetrics {
-			id: actionTextMetrics
-
-			elide: Text.ElideRight
-			elideWidth: {
-				const numActions = root.modelData.actions.length + 1;
-				return (inner.width - actions.spacing * (numActions - 1)) / numActions - 8 * 2;
-			}
-			font.family: actionText.font.family
-			font.pointSize: actionText.font.pointSize
-			text: action.modelData.text
-		}
-	}
 }

Modules/Notifications/Sidebar/Content.qml

@@ -13,7 +13,7 @@ Item {
 		id: layout
 
 		anchors.fill: parent
-		spacing: 8
+		spacing: Appearance.spacing.small
 
 		CustomRect {
 			Layout.fillHeight: true
@@ -29,7 +29,7 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.topMargin: 8 - layout.spacing
+			Layout.topMargin: Appearance.padding.normal - layout.spacing
 			color: DynamicColors.tPalette.m3outlineVariant
 			implicitHeight: 1
 		}

Modules/Notifications/Sidebar/NotifActionList.qml

@@ -78,7 +78,7 @@ Item {
 					StateLayer {
 						id: actionStateLayer
 
-						function onClicked(): void {
+						onClicked: {
 							if (action.modelData.isClose) {
 								root.notif.close();
 							} else if (action.modelData.isCopy) {

Modules/Notifications/Sidebar/NotifDock.qml

@@ -17,7 +17,7 @@ Item {
 	required property var visibilities
 
 	anchors.fill: parent
-	anchors.margins: 8
+	anchors.margins: Appearance.padding.normal
 
 	Component.onCompleted: NotifServer.list.forEach(n => n.popup = false)
 
@@ -156,7 +156,7 @@ Item {
 	Loader {
 		active: opacity > 0
 		anchors.bottom: parent.bottom
-		anchors.margins: 8
+		anchors.margins: Appearance.padding.normal
 		anchors.right: parent.right
 		opacity: root.notifCount > 0 ? 1 : 0
 		scale: root.notifCount > 0 ? 1 : 0.5

Modules/Notifications/Sidebar/NotifGroup.qml

@@ -171,11 +171,11 @@ CustomRect {
 					radius: Appearance.rounding.full
 
 					StateLayer {
-						function onClicked(): void {
+						color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+
+						onClicked: {
 							root.toggleExpand(!root.expanded);
 						}
-
-						color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
 					}
 
 					RowLayout {

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

@@ -72,7 +72,7 @@ CustomRect {
 
 			CustomSplitButton {
 				active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0]
-				disabled: Recorder.running
+				enabled: !Recorder.running
 
 				menuItems: [
 					MenuItem {
@@ -267,8 +267,8 @@ CustomRect {
 				checked: Recorder.paused
 				font.pointSize: Appearance.font.size.large
 				icon: Recorder.paused ? "play_arrow" : "pause"
+				isToggle: true
 				label.animate: true
-				toggle: true
 				type: IconButton.Tonal
 
 				onClicked: {
@@ -280,8 +280,8 @@ CustomRect {
 			IconButton {
 				font.pointSize: Appearance.font.size.large
 				icon: "stop"
-				inactiveColour: DynamicColors.palette.m3error
-				inactiveOnColour: DynamicColors.palette.m3onError
+				inactiveColor: DynamicColors.palette.m3error
+				inactiveOnColor: DynamicColors.palette.m3onError
 
 				onClicked: Recorder.stop()
 			}

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

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

Modules/Notifications/Wrapper.qml

@@ -10,7 +10,7 @@ Item {
 	required property var visibilities
 
 	implicitHeight: content.implicitHeight
-	implicitWidth: Math.max(sidebarPanel.width * (1 - sidebarPanel.offsetScale), content.implicitWidth)
+	implicitWidth: content.implicitWidth
 	visible: height > 0
 
 	Content {

Modules/Osd/Content.qml

@@ -97,7 +97,9 @@ Item {
 
 				FilledSlider {
 					anchors.fill: parent
+					from: Config.services.minBrightness
 					icon: `brightness_${(Math.round(value * 6) + 1)}`
+					to: 1.0
 					value: root.brightness
 
 					onPressedChanged: {

Modules/Resources.qml

@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import QtQuick.Layouts
+import ZShell.Services
 import qs.Helpers
 import qs.Modules
 import qs.Config
@@ -16,10 +17,12 @@ CustomRect {
 	clip: true
 	color: visibilities.resources ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
 	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.normal * 2
+	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
 	radius: Appearance.rounding.full
 
 	StateLayer {
+		color: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
 		onClicked: root.visibilities.resources = !root.visibilities.resources
 	}
 
@@ -27,11 +30,20 @@ CustomRect {
 		id: rowLayout
 
 		anchors.centerIn: parent
+		anchors.horizontalCenterOffset: -2
 		implicitHeight: root.implicitHeight
 		spacing: Appearance.spacing.smaller
 
-		Ref {
-			service: SystemUsage
+		ServiceRef {
+			service: Gpu
+		}
+
+		ServiceRef {
+			service: Cpu
+		}
+
+		ServiceRef {
+			service: Memory
 		}
 
 		Resource {
@@ -39,8 +51,8 @@ CustomRect {
 			Layout.fillHeight: true
 			icon: "memory"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3primary
-			percentage: SystemUsage.cpuPerc
+			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
+			percentage: Cpu.percentage
 			warningThreshold: 95
 		}
 
@@ -48,8 +60,8 @@ CustomRect {
 			Layout.fillHeight: true
 			icon: "memory_alt"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3secondaryContainer : DynamicColors.palette.m3secondary
-			percentage: SystemUsage.memPerc
+			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3secondary
+			percentage: Memory.percentage
 			warningThreshold: 80
 		}
 
@@ -57,16 +69,16 @@ CustomRect {
 			Layout.fillHeight: true
 			icon: "gamepad"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3tertiaryContainer : DynamicColors.palette.m3tertiary
-			percentage: SystemUsage.gpuPerc
+			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3tertiary
+			percentage: Gpu.percentage
 		}
 
 		Resource {
 			Layout.fillHeight: true
 			icon: "developer_board"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3primary
-			percentage: SystemUsage.gpuMemUsed
+			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
+			percentage: Gpu.memoryUsed / Gpu.memoryTotal
 		}
 	}
 }

Modules/Resources/Cards/BatteryTank.qml

@@ -0,0 +1,134 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.UPower
+import qs.Components
+import qs.Config
+
+CustomClippingRect {
+	id: root
+
+	property real animPerc: UPower.displayDevice.percentage
+
+	color: DynamicColors.palette.m3secondaryContainer
+	implicitWidth: 120
+	radius: Appearance.rounding.large
+
+	Behavior on animPerc {
+		Anim {
+		}
+	}
+
+	Contents {
+		id: layout
+
+		accentColor: DynamicColors.palette.m3primary
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.larger
+		subTextColor: DynamicColors.palette.m3onSurfaceVariant
+		textColor: DynamicColors.palette.m3onSurface
+	}
+
+	CustomRect {
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		clip: true
+		color: DynamicColors.palette.m3secondary
+		implicitHeight: parent.height * root.animPerc
+		radius: Appearance.rounding.extraSmall
+
+		Contents {
+			accentColor: DynamicColors.palette.m3primaryContainer
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.margins: layout.anchors.margins
+			anchors.right: parent.right
+			height: layout.height
+			subTextColor: DynamicColors.palette.m3secondaryContainer
+			textColor: DynamicColors.palette.m3onSecondary
+		}
+	}
+
+	component Contents: ColumnLayout {
+		id: contents
+
+		required property color accentColor
+		readonly property bool charging: [UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state)
+		required property color subTextColor
+		required property color textColor
+
+		spacing: 0
+
+		MaterialIcon {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			color: contents.accentColor
+			text: "battery_full"
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			color: contents.textColor
+			text: qsTr("Battery")
+		}
+
+		Item {
+			Layout.fillHeight: true
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignRight
+			animate: true
+			color: contents.subTextColor
+			text: {
+				if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
+					return qsTr("Full");
+
+				if (contents.charging)
+					return qsTr("Charging");
+
+				const s = UPower.displayDevice.timeToEmpty;
+				if (s === 0)
+					return qsTr("...");
+
+				const hr = Math.floor(s / 3600);
+				const min = Math.floor((s % 3600) / 60);
+				if (hr > 0)
+					return `${hr}h ${min}m`;
+
+				return `${min}m`;
+			}
+		}
+
+		RowLayout {
+			Layout.alignment: Qt.AlignRight
+			Layout.bottomMargin: -Appearance.padding.small
+			Layout.rightMargin: -Appearance.padding.extraSmall
+			Layout.topMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialIcon {
+				color: contents.accentColor
+				fill: 1
+				opacity: contents.charging ? 1 : 0
+				scale: contents.charging ? 1 : 0
+				text: "bolt"
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.FastEffects
+					}
+				}
+				Behavior on scale {
+					Anim {
+						type: Anim.FastSpatial
+					}
+				}
+			}
+
+			CustomText {
+				color: contents.accentColor
+				text: `${Math.round(UPower.displayDevice.percentage * 100)}%`
+			}
+		}
+	}
+}

Modules/Resources/Cards/HeroCard.qml

@@ -0,0 +1,138 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomClippingRect {
+	id: root
+
+	required property color accent
+	required property string icon
+	required property string label
+	required property string subLabel
+	required property real temperature
+	required property real usage
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Appearance.spacing.large, usageColumn.implicitHeight + usageLabel.implicitHeight) + Appearance.padding.large * 2
+	implicitWidth: 450
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	CustomRect {
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.top: parent.top
+		color: Qt.alpha(root.accent, 0.05)
+		implicitWidth: parent.width * root.usage
+
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+	}
+
+	CircularProgress {
+		id: tempProg
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.top: parent.top
+		fgColor: root.accent
+		implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Appearance.padding.larger * 2
+		spacing: Appearance.spacing.extraSmall
+		strokeWidth: Appearance.padding.extraSmall
+		value: root.usage
+
+		Behavior on clampedVal {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			id: icon
+
+			anchors.centerIn: parent
+			color: root.accent
+			text: root.icon
+		}
+	}
+
+	ColumnLayout {
+		anchors.left: tempProg.right
+		anchors.margins: Appearance.spacing.large
+		anchors.right: usageColumn.left
+		anchors.verticalCenter: tempProg.verticalCenter
+		spacing: Appearance.spacing.extraSmall
+
+		CustomText {
+			color: root.accent
+			text: root.label
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			color: DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			text: root.subLabel
+		}
+	}
+
+	ColumnLayout {
+		id: detailsRow
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.extraSmall
+
+		RowLayout {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialIcon {
+				Layout.topMargin: Math.round(fontInfo.pointSize * 0.08)
+				color: root.temperature > 90 ? DynamicColors.palette.m3error : root.accent
+				fill: 1
+				text: root.temperature > 90 ? "thermometer_alert" : "thermometer"
+			}
+
+			CustomText {
+				text: `${Math.ceil(root.temperature)}°${"C"}`
+			}
+		}
+
+		CustomProgressBar {
+			fgColor: root.accent
+			implicitHeight: Appearance.padding.small
+			indeterminate: isNaN(root.usage) || isNaN(root.temperature)
+			value: root.temperature / 100
+		}
+	}
+
+	Column {
+		id: usageColumn
+
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		anchors.rightMargin: 32
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: 0
+
+		CustomText {
+			id: usageLabel
+
+			anchors.right: parent.right
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.normal
+			text: qsTr("Usage")
+		}
+
+		CustomText {
+			anchors.right: parent.right
+			color: root.accent
+			font.pointSize: Appearance.font.size.extraLarge
+			font.weight: Font.Medium
+			text: isNaN(root.usage) ? "...%" : Math.round(root.usage * 100) + "%"
+		}
+	}
+}

Modules/Resources/Cards/MemoryCard.qml

@@ -0,0 +1,86 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Services
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	readonly property color accent: DynamicColors.palette.m3tertiary
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+	implicitWidth: layout.implicitWidth + Appearance.padding.extraLargeIncreased * 2
+	radius: Appearance.rounding.medium
+
+	ServiceRef {
+		service: Memory
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.centerIn: parent
+		spacing: Appearance.spacing.extraSmall
+
+		RowLayout {
+			Layout.leftMargin: -Appearance.padding.extraSmall
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: root.accent
+				fill: 1
+				text: "memory_alt"
+			}
+
+			CustomText {
+				text: qsTr("Memory")
+			}
+		}
+
+		CircularProgress {
+			Layout.alignment: Qt.AlignHCenter
+			Layout.topMargin: Appearance.spacing.large
+			fgColor: root.accent
+			implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.largeIncreased * 2
+			startAngle: -225
+			sweepAngle: 270
+			value: Memory.percentage
+
+			Behavior on clampedVal {
+				Anim {
+				}
+			}
+
+			ColumnLayout {
+				id: usageColumn
+
+				anchors.centerIn: parent
+				anchors.verticalCenterOffset: Appearance.padding.extraSmall
+				spacing: 0
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					color: root.accent
+					font.pointSize: Appearance.font.size.large
+					text: Math.round(Memory.percentage * 100) + "%"
+				}
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					color: DynamicColors.palette.m3onSurfaceVariant
+					text: qsTr("Used")
+				}
+			}
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignHCenter
+			text: {
+				const fmt = UsageFmt.formatKib(Memory.used, Memory.total);
+				return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
+			}
+		}
+	}
+}

Modules/Resources/Cards/NetworkCard.qml

@@ -0,0 +1,198 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Internal
+import qs.Modules.Resources
+import qs.Helpers
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	required property Wrapper wrapper
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: 220
+	implicitWidth: 300
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	Ref {
+		service: NetworkUsage
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.bottomMargin: Appearance.padding.larger
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.large
+		spacing: 0
+
+		RowLayout {
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3primary
+				text: "swap_vert"
+			}
+
+			CustomText {
+				text: qsTr("Network")
+			}
+		}
+
+		Item {
+			Layout.bottomMargin: Appearance.spacing.small
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+			Layout.topMargin: Appearance.spacing.larger
+
+			SparklineItem {
+				id: sparkline
+
+				property bool initialized: false
+				property real smoothMax: targetMax
+				property real targetMax: 1024
+
+				anchors.fill: parent
+				historyLength: NetworkUsage.historyLength
+				line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
+				line1Color: DynamicColors.palette.m3secondary
+				line1FillAlpha: 0.15
+				line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
+				line2Color: DynamicColors.palette.m3tertiary
+				line2FillAlpha: 0.2
+				maxValue: smoothMax
+				slideProgress: 1
+
+				Behavior on smoothMax {
+					enabled: sparkline.initialized
+
+					Anim {
+					}
+				}
+
+				Component.onCompleted: {
+					sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
+
+					sparkline.smoothMax = Qt.binding(() => sparkline.targetMax);
+
+					sparkline.initialized = true;
+				}
+
+				Connections {
+					function onValuesChanged(): void {
+						sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
+						slideAnim.restart();
+					}
+
+					target: NetworkUsage.downloadBuffer
+				}
+
+				NumberAnimation {
+					id: slideAnim
+
+					duration: Config.dashboard.resourceUpdateInterval
+					easing.type: Easing.Linear
+					from: 0
+					property: "slideProgress"
+					target: sparkline
+					to: 1
+				}
+			}
+
+			// "Collecting data" placeholder
+			CustomText {
+				anchors.centerIn: parent
+				color: DynamicColors.palette.m3outline
+				text: qsTr("Collecting data...")
+				visible: NetworkUsage.downloadBuffer.count < 2
+			}
+		}
+
+		// Download row
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3tertiary
+				text: "download"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Download")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3tertiary
+				text: {
+					const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
+					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
+				}
+			}
+		}
+
+		// Upload row
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3secondary
+				text: "upload"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Upload")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3secondary
+				text: {
+					const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
+					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
+				}
+			}
+		}
+
+		// Session totals
+		RowLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: "history"
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: qsTr("Total")
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			CustomText {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				text: {
+					const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
+					const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
+					return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
+				}
+			}
+		}
+	}
+}

Modules/Resources/Cards/StorageCard.qml

@@ -0,0 +1,128 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import ZShell.Services
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	readonly property color accent: DynamicColors.palette.m3secondary
+	readonly property real percentage: Storage.primaryDisk?.perc ?? 0
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+	implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
+	radius: Appearance.rounding.large - Appearance.padding.normal
+
+	ServiceRef {
+		service: Storage
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: 0
+
+		RowLayout {
+			id: row
+
+			Layout.alignment: Qt.AlignHCenter
+			spacing: Appearance.spacing.large
+
+			CircularProgress {
+				fgColor: root.accent
+				implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.large * 2
+				startAngle: -225
+				sweepAngle: 270
+				value: root.percentage
+
+				Behavior on clampedVal {
+					Anim {
+					}
+				}
+
+				ColumnLayout {
+					id: usageColumn
+
+					anchors.centerIn: parent
+					spacing: 0
+
+					MaterialIcon {
+						Layout.alignment: Qt.AlignHCenter
+						color: root.accent
+						font.pointSize: Appearance.font.size.medium
+						text: "hard_drive"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignHCenter
+						color: root.accent
+						font.pointSize: Appearance.font.size.large
+						text: Math.round(root.percentage * 100) + "%"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignHCenter
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: qsTr("Used")
+					}
+				}
+			}
+
+			ColumnLayout {
+				spacing: Appearance.spacing.extraSmall
+
+				CustomText {
+					text: qsTr("Storage")
+				}
+
+				CustomText {
+					color: root.accent
+					text: {
+						if (!Storage.primaryDisk)
+							return qsTr("No disks detected");
+
+						const fmt = UsageFmt.formatKib(Storage.primaryDisk.used, Storage.primaryDisk.total);
+						return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
+					}
+				}
+			}
+		}
+
+		CustomSplitButton {
+			Layout.alignment: Qt.AlignHCenter
+			active: menuItems.find(m => m.modelData === Storage.primaryDisk) ?? menuItems[0] ?? null
+			enabled: Storage.disks.length
+			fallbackIcon: "storage"
+			fallbackText: qsTr("No disks")
+			menuItems: disks.instances
+			minLeftWidth: row.implicitWidth * 0.6
+			type: CustomSplitButton.Tonal
+
+			menu.onItemSelected: item => Storage.manualPrimaryDisk = (item as DiskItem).modelData
+
+			Variants {
+				id: disks
+
+				model: Storage.disks
+
+				DiskItem {
+				}
+			}
+		}
+	}
+
+	component DiskItem: MenuItem {
+		required property var modelData
+
+		activeIcon: "storage"
+		icon: modelData === Storage.primaryDisk ? "check" : ""
+		text: modelData.mount
+	}
+}

Modules/Resources/Content.qml

@@ -1,42 +1,27 @@
-import Quickshell
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
-import Quickshell.Services.UPower
-import ZShell.Internal
-import qs.Components
+import ZShell.Services
+import qs.Modules.Resources.Cards
 import qs.Helpers
+import qs.Components
 import qs.Config
 
 Item {
 	id: root
 
-	readonly property int minWidth: 400 + 400 + Appearance.spacing.normal + 120 + Appearance.padding.large * 2
-	readonly property real nonAnimHeight: content.implicitHeight + Appearance.padding.normal * 2
-	readonly property real nonAnimWidth: Math.max(minWidth, content.implicitWidth) + Appearance.padding.normal * 2
-	required property real padding
-	required property PersistentProperties visibilities
+	required property Wrapper wrapper
 
-	function displayTemp(temp: real): string {
-		return `${Math.ceil(temp)}°C`;
-	}
-
-	implicitHeight: nonAnimHeight
-	implicitWidth: nonAnimWidth
+	implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
+	implicitWidth: content.implicitWidth
 
 	RowLayout {
 		id: content
 
 		anchors.left: parent.left
-		anchors.leftMargin: root.padding
+		anchors.margins: Appearance.padding.normal
 		anchors.right: parent.right
-		anchors.rightMargin: root.padding
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.normal
-
-		Ref {
-			service: SystemUsage
-		}
+		spacing: Appearance.spacing.larger
 
 		ColumnLayout {
 			id: mainColumn
@@ -45,748 +30,94 @@ Item {
 			spacing: Appearance.spacing.normal
 
 			RowLayout {
-				Layout.fillWidth: true
 				spacing: Appearance.spacing.normal
-				visible: Config.dashboard.performance.showCpu || (Config.dashboard.performance.showGpu && SystemUsage.gpuType !== "NONE")
+				visible: cpuCard.active || gpuCard.active
 
-				HeroCard {
-					Layout.fillWidth: true
-					Layout.minimumWidth: 400
-					Layout.preferredHeight: 150
-					accentColor: DynamicColors.palette.m3primary
-					icon: "memory"
-					mainLabel: qsTr("Usage")
-					mainValue: `${Math.round(SystemUsage.cpuPerc * 100)}%`
-					secondaryLabel: qsTr("Temp")
-					secondaryValue: root.displayTemp(SystemUsage.cpuTemp)
-					temperature: SystemUsage.cpuTemp
-					title: SystemUsage.cpuName ? `CPU - ${SystemUsage.cpuName}` : qsTr("CPU")
-					usage: SystemUsage.cpuPerc
-					visible: Config.dashboard.performance.showCpu
+				WrappedLoader {
+					id: cpuCard
+
+					active: Config.dashboard.performance.showCpu
+
+					sourceComponent: HeroCard {
+						accent: DynamicColors.palette.m3primary
+						icon: "memory"
+						label: qsTr("CPU")
+						subLabel: Cpu.name
+						temperature: Cpu.temperature
+						usage: Cpu.percentage
+
+						ServiceRef {
+							service: Cpu
+						}
+					}
 				}
 
-				HeroCard {
-					Layout.fillWidth: true
-					Layout.minimumWidth: 400
-					Layout.preferredHeight: 150
-					accentColor: DynamicColors.palette.m3secondary
-					icon: "desktop_windows"
-					mainLabel: qsTr("Usage")
-					mainValue: `${Math.round(SystemUsage.gpuPerc * 100)}%`
-					secondaryLabel: qsTr("Temp")
-					secondaryValue: root.displayTemp(SystemUsage.gpuTemp)
-					temperature: SystemUsage.gpuTemp
-					title: SystemUsage.gpuName ? `GPU - ${SystemUsage.gpuName}` : qsTr("GPU")
-					usage: SystemUsage.gpuPerc
-					visible: Config.dashboard.performance.showGpu && SystemUsage.gpuType !== "NONE"
+				WrappedLoader {
+					id: gpuCard
+
+					active: Config.dashboard.performance.showGpu && Gpu.type !== Gpu.None
+
+					sourceComponent: HeroCard {
+						accent: DynamicColors.palette.m3secondary
+						icon: "desktop_windows"
+						label: qsTr("GPU")
+						subLabel: Gpu.name
+						temperature: Gpu.temperature
+						usage: Gpu.percentage
+
+						ServiceRef {
+							service: Gpu
+						}
+					}
 				}
 			}
 
 			RowLayout {
-				Layout.fillWidth: true
 				spacing: Appearance.spacing.normal
-				visible: Config.dashboard.performance.showMemory || Config.dashboard.performance.showStorage || Config.dashboard.performance.showNetwork
+				visible: storageCard.active || networkCard.active || memoryCard.active
 
-				GaugeCard {
-					Layout.fillWidth: !Config.dashboard.performance.showStorage && !Config.dashboard.performance.showNetwork
-					Layout.minimumWidth: 250
-					Layout.preferredHeight: 220
-					accentColor: DynamicColors.palette.m3tertiary
-					icon: "memory_alt"
-					percentage: SystemUsage.memPerc
-					subtitle: {
-						const usedFmt = SystemUsage.formatKib(SystemUsage.memUsed);
-						const totalFmt = SystemUsage.formatKib(SystemUsage.memTotal);
-						return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`;
+				WrappedLoader {
+					id: storageCard
+
+					active: Config.dashboard.performance.showStorage
+
+					sourceComponent: StorageCard {
 					}
-					title: qsTr("Memory")
-					visible: Config.dashboard.performance.showMemory
 				}
 
-				StorageGaugeCard {
-					Layout.fillWidth: !Config.dashboard.performance.showNetwork
-					Layout.minimumWidth: 250
-					Layout.preferredHeight: 220
-					visible: Config.dashboard.performance.showStorage
+				WrappedLoader {
+					id: memoryCard
+
+					active: Config.dashboard.performance.showMemory
+
+					sourceComponent: MemoryCard {
+					}
 				}
 
-				NetworkCard {
-					Layout.fillWidth: true
-					Layout.minimumWidth: 200
-					Layout.preferredHeight: 220
-					visible: Config.dashboard.performance.showNetwork
+				WrappedLoader {
+					id: networkCard
+
+					active: Config.dashboard.performance.showNetwork
+
+					sourceComponent: NetworkCard {
+						wrapper: root.wrapper
+					}
 				}
 			}
 		}
 
-		BatteryTank {
-			Layout.preferredHeight: mainColumn.implicitHeight
-			Layout.preferredWidth: 120
-			visible: UPower.displayDevice.isLaptopBattery && Config.dashboard.performance.showBattery
+		WrappedLoader {
+			Layout.fillWidth: false
+			active: Battery.isLaptop && Config.dashboard.performance.showBattery
+
+			sourceComponent: BatteryTank {
+			}
 		}
 	}
 
-	component BatteryTank: CustomClippingRect {
-		id: batteryTank
-
-		property color accentColor: DynamicColors.palette.m3primary
-		property real animatedPercentage: 0
-		property bool isCharging: UPower.displayDevice.state === UPowerDeviceState.Charging
-		property real percentage: UPower.displayDevice.percentage
-
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.large - Appearance.padding.normal
-
-		Behavior on animatedPercentage {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-
-		Component.onCompleted: animatedPercentage = percentage
-		onPercentageChanged: animatedPercentage = percentage
-
-		// Background Fill
-		CustomRect {
-			anchors.bottom: parent.bottom
-			anchors.left: parent.left
-			anchors.right: parent.right
-			color: Qt.alpha(batteryTank.accentColor, 0.15)
-			height: parent.height * batteryTank.animatedPercentage
-		}
-
-		ColumnLayout {
-			anchors.fill: parent
-			anchors.margins: Appearance.padding.large
-			spacing: Appearance.spacing.small
-
-			// Header Section
-			ColumnLayout {
-				Layout.fillWidth: true
-				spacing: Appearance.spacing.small
-
-				MaterialIcon {
-					color: batteryTank.accentColor
-					font.pointSize: Appearance.font.size.large
-					text: {
-						if (!UPower.displayDevice.isLaptopBattery) {
-							if (PowerProfiles.profile === PowerProfile.PowerSaver)
-								return "energy_savings_leaf";
-
-							if (PowerProfiles.profile === PowerProfile.Performance)
-								return "rocket_launch";
-
-							return "balance";
-						}
-						if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
-							return "battery_full";
-
-						const perc = UPower.displayDevice.percentage;
-						const charging = [UPowerDeviceState.Charging, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state);
-						if (perc >= 0.99)
-							return "battery_full";
-
-						let level = Math.floor(perc * 7);
-						if (charging && (level === 4 || level === 1))
-							level--;
-
-						return charging ? `battery_charging_${(level + 3) * 10}` : `battery_${level}_bar`;
-					}
-				}
-
-				CustomText {
-					Layout.fillWidth: true
-					color: DynamicColors.palette.m3onSurface
-					font.pointSize: Appearance.font.size.normal
-					text: qsTr("Battery")
-				}
-			}
-
-			Item {
-				Layout.fillHeight: true
-			}
-
-			// Bottom Info Section
-			ColumnLayout {
-				Layout.fillWidth: true
-				spacing: -4
-
-				CustomText {
-					Layout.alignment: Qt.AlignRight
-					color: batteryTank.accentColor
-					font.pointSize: Appearance.font.size.extraLarge
-					font.weight: Font.Medium
-					text: `${Math.round(batteryTank.percentage * 100)}%`
-				}
-
-				CustomText {
-					Layout.alignment: Qt.AlignRight
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.smaller
-					text: {
-						if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
-							return qsTr("Full");
-
-						if (batteryTank.isCharging)
-							return qsTr("Charging");
-
-						const s = UPower.displayDevice.timeToEmpty;
-						if (s === 0)
-							return qsTr("...");
-
-						const hr = Math.floor(s / 3600);
-						const min = Math.floor((s % 3600) / 60);
-						if (hr > 0)
-							return `${hr}h ${min}m`;
-
-						return `${min}m`;
-					}
-				}
-			}
-		}
-	}
-	component CardHeader: RowLayout {
-		property color accentColor: DynamicColors.palette.m3primary
-		property string icon
-		property string title
-
+	component WrappedLoader: Loader {
+		Layout.fillHeight: true
 		Layout.fillWidth: true
-		spacing: Appearance.spacing.small
-
-		MaterialIcon {
-			color: parent.accentColor
-			fill: 1
-			font.pointSize: Appearance.spacing.large
-			text: parent.icon
-		}
-
-		CustomText {
-			Layout.fillWidth: true
-			elide: Text.ElideRight
-			font.pointSize: Appearance.font.size.normal
-			text: parent.title
-		}
-	}
-	component GaugeCard: CustomRect {
-		id: gaugeCard
-
-		property color accentColor: DynamicColors.palette.m3primary
-		property real animatedPercentage: 0
-		readonly property real arcStartAngle: 0.75 * Math.PI
-		readonly property real arcSweep: 1.5 * Math.PI
-		property string icon
-		property real percentage: 0
-		property string subtitle
-		property string title
-
-		clip: true
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.large - Appearance.padding.normal
-
-		Behavior on animatedPercentage {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-
-		Component.onCompleted: animatedPercentage = percentage
-		onPercentageChanged: animatedPercentage = percentage
-
-		ColumnLayout {
-			anchors.fill: parent
-			anchors.margins: Appearance.padding.large
-			spacing: Appearance.spacing.smaller
-
-			CardHeader {
-				accentColor: gaugeCard.accentColor
-				icon: gaugeCard.icon
-				title: gaugeCard.title
-			}
-
-			Item {
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-
-				ArcGauge {
-					accentColor: gaugeCard.accentColor
-					anchors.centerIn: parent
-					height: width
-					percentage: gaugeCard.animatedPercentage
-					startAngle: gaugeCard.arcStartAngle
-					sweepAngle: gaugeCard.arcSweep
-					trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-					width: Math.min(parent.width, parent.height)
-				}
-
-				CustomText {
-					anchors.centerIn: parent
-					color: gaugeCard.accentColor
-					font.pointSize: Appearance.font.size.extraLarge
-					font.weight: Font.Medium
-					text: `${Math.round(gaugeCard.percentage * 100)}%`
-				}
-			}
-
-			CustomText {
-				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.smaller
-				text: gaugeCard.subtitle
-			}
-		}
-	}
-	component HeroCard: CustomClippingRect {
-		id: heroCard
-
-		property color accentColor: DynamicColors.palette.m3primary
-		property real animatedTemp: 0
-		property real animatedUsage: 0
-		property string icon
-		property string mainLabel
-		property string mainValue
-		readonly property real maxTemp: 100
-		property string secondaryLabel
-		property string secondaryValue
-		readonly property real tempProgress: Math.min(1, Math.max(0, temperature / maxTemp))
-		property real temperature: 0
-		property string title
-		property real usage: 0
-
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.large - Appearance.padding.normal
-
-		Behavior on animatedTemp {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-		Behavior on animatedUsage {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-
-		Component.onCompleted: {
-			animatedUsage = usage;
-			animatedTemp = tempProgress;
-		}
-		onTempProgressChanged: animatedTemp = tempProgress
-		onUsageChanged: animatedUsage = usage
-
-		CustomRect {
-			anchors.bottom: parent.bottom
-			anchors.left: parent.left
-			anchors.top: parent.top
-			color: Qt.alpha(heroCard.accentColor, 0.15)
-			implicitWidth: parent.width * heroCard.animatedUsage
-		}
-
-		CardHeader {
-			accentColor: heroCard.accentColor
-			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.large
-			anchors.top: parent.top
-			anchors.topMargin: Math.round(Appearance.padding.large * 1.2)
-			icon: heroCard.icon
-			title: heroCard.title
-			width: parent.width - anchors.leftMargin - usageColumn.anchors.rightMargin - usageLabel.width - Appearance.spacing.normal
-		}
-
-		Column {
-			anchors.bottom: parent.bottom
-			anchors.bottomMargin: Math.round(Appearance.padding.large * 1.3)
-			anchors.left: parent.left
-			anchors.margins: Math.round(Appearance.padding.large * 1.2)
-			anchors.right: parent.right
-			spacing: Appearance.spacing.small
-
-			Row {
-				spacing: Appearance.spacing.small
-
-				CustomText {
-					font.pointSize: Appearance.font.size.normal
-					font.weight: Font.Medium
-					text: heroCard.secondaryValue
-				}
-
-				CustomText {
-					anchors.baseline: parent.children[0].baseline
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					text: heroCard.secondaryLabel
-				}
-			}
-
-			ProgressBar {
-				bgColor: Qt.alpha(heroCard.accentColor, 0.2)
-				fgColor: heroCard.accentColor
-				implicitHeight: 6
-				implicitWidth: parent.width * 0.5
-				value: heroCard.tempProgress
-			}
-		}
-
-		Column {
-			id: usageColumn
-
-			anchors.margins: Appearance.padding.large
-			anchors.right: parent.right
-			anchors.rightMargin: 32
-			anchors.verticalCenter: parent.verticalCenter
-			spacing: 0
-
-			CustomText {
-				id: usageLabel
-
-				anchors.right: parent.right
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.normal
-				text: heroCard.mainLabel
-			}
-
-			CustomText {
-				anchors.right: parent.right
-				color: heroCard.accentColor
-				font.pointSize: Appearance.font.size.extraLarge
-				font.weight: Font.Medium
-				text: heroCard.mainValue
-			}
-		}
-	}
-	component NetworkCard: CustomRect {
-		id: networkCard
-
-		property color accentColor: DynamicColors.palette.m3primary
-
-		clip: true
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.large - Appearance.padding.normal
-
-		Ref {
-			service: NetworkUsage
-		}
-
-		ColumnLayout {
-			anchors.fill: parent
-			anchors.margins: Appearance.padding.large
-			spacing: Appearance.spacing.small
-
-			CardHeader {
-				accentColor: networkCard.accentColor
-				icon: "swap_vert"
-				title: qsTr("Network")
-			}
-
-			// Sparkline graph
-			Item {
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-
-				SparklineItem {
-					id: sparkline
-
-					property real smoothMax: targetMax
-					property real targetMax: 1024
-
-					anchors.fill: parent
-					historyLength: NetworkUsage.historyLength
-					line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
-					line1Color: DynamicColors.palette.m3secondary
-					line1FillAlpha: 0.15
-					line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
-					line2Color: DynamicColors.palette.m3tertiary
-					line2FillAlpha: 0.2
-					maxValue: smoothMax
-
-					Behavior on smoothMax {
-						Anim {
-							duration: Appearance.anim.durations.large
-						}
-					}
-
-					Connections {
-						function onValuesChanged(): void {
-							sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
-							slideAnim.restart();
-						}
-
-						target: NetworkUsage.downloadBuffer
-					}
-
-					NumberAnimation {
-						id: slideAnim
-
-						duration: Config.dashboard.resourceUpdateInterval
-						from: 0
-						property: "slideProgress"
-						target: sparkline
-						to: 1
-					}
-				}
-
-				// "No data" placeholder
-				CustomText {
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					opacity: 0.6
-					text: qsTr("Collecting data...")
-					visible: NetworkUsage.downloadBuffer.count < 2
-				}
-			}
-
-			// Download row
-			RowLayout {
-				Layout.fillWidth: true
-				spacing: Appearance.spacing.normal
-
-				MaterialIcon {
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					text: "download"
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					text: qsTr("Download")
-				}
-
-				Item {
-					Layout.fillWidth: true
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: Font.Medium
-					text: {
-						const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
-						return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
-					}
-				}
-			}
-
-			// Upload row
-			RowLayout {
-				Layout.fillWidth: true
-				spacing: Appearance.spacing.normal
-
-				MaterialIcon {
-					color: DynamicColors.palette.m3secondary
-					font.pointSize: Appearance.font.size.normal
-					text: "upload"
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					text: qsTr("Upload")
-				}
-
-				Item {
-					Layout.fillWidth: true
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3secondary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: Font.Medium
-					text: {
-						const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
-						return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
-					}
-				}
-			}
-
-			// Session totals
-			RowLayout {
-				Layout.fillWidth: true
-				spacing: Appearance.spacing.normal
-
-				MaterialIcon {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.normal
-					text: "history"
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					text: qsTr("Total")
-				}
-
-				Item {
-					Layout.fillWidth: true
-				}
-
-				CustomText {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.small
-					text: {
-						const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
-						const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
-						return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
-					}
-				}
-			}
-		}
-	}
-	component ProgressBar: CustomRect {
-		id: progressBar
-
-		property real animatedValue: 0
-		property color bgColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-		property color fgColor: DynamicColors.palette.m3primary
-		property real value: 0
-
-		color: bgColor
-		radius: Appearance.rounding.full
-
-		Behavior on animatedValue {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-
-		Component.onCompleted: animatedValue = value
-		onValueChanged: animatedValue = value
-
-		CustomRect {
-			anchors.bottom: parent.bottom
-			anchors.left: parent.left
-			anchors.top: parent.top
-			color: progressBar.fgColor
-			radius: Appearance.rounding.full
-			width: parent.width * progressBar.animatedValue
-		}
-	}
-	component StorageGaugeCard: CustomRect {
-		id: storageGaugeCard
-
-		property color accentColor: DynamicColors.palette.m3secondary
-		property real animatedPercentage: 0
-		readonly property real arcStartAngle: 0.75 * Math.PI
-		readonly property real arcSweep: 1.5 * Math.PI
-		readonly property var currentDisk: SystemUsage.disks.length > 0 ? SystemUsage.disks[currentDiskIndex] : null
-		property int currentDiskIndex: 0
-		property int diskCount: 0
-
-		clip: true
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.large - Appearance.padding.normal
-
-		Behavior on animatedPercentage {
-			Anim {
-				duration: Appearance.anim.durations.large
-			}
-		}
-
-		Component.onCompleted: {
-			diskCount = SystemUsage.disks.length;
-			if (currentDisk)
-				animatedPercentage = currentDisk.perc;
-		}
-		onCurrentDiskChanged: {
-			if (currentDisk)
-				animatedPercentage = currentDisk.perc;
-		}
-
-		// Update diskCount and animatedPercentage when disks data changes
-		Connections {
-			function onDisksChanged() {
-				if (SystemUsage.disks.length !== storageGaugeCard.diskCount)
-					storageGaugeCard.diskCount = SystemUsage.disks.length;
-
-				// Update animated percentage when disk data refreshes
-				if (storageGaugeCard.currentDisk)
-					storageGaugeCard.animatedPercentage = storageGaugeCard.currentDisk.perc;
-			}
-
-			target: SystemUsage
-		}
-
-		MouseArea {
-			anchors.fill: parent
-
-			onWheel: wheel => {
-				if (wheel.angleDelta.y > 0)
-					storageGaugeCard.currentDiskIndex = (storageGaugeCard.currentDiskIndex - 1 + storageGaugeCard.diskCount) % storageGaugeCard.diskCount;
-				else if (wheel.angleDelta.y < 0)
-					storageGaugeCard.currentDiskIndex = (storageGaugeCard.currentDiskIndex + 1) % storageGaugeCard.diskCount;
-			}
-		}
-
-		ColumnLayout {
-			anchors.fill: parent
-			anchors.margins: Appearance.padding.large
-			spacing: Appearance.spacing.smaller
-
-			CardHeader {
-				accentColor: storageGaugeCard.accentColor
-				icon: "hard_disk"
-				title: {
-					const base = qsTr("Storage");
-					if (!storageGaugeCard.currentDisk)
-						return base;
-
-					return `${base} - ${storageGaugeCard.currentDisk.mount}`;
-				}
-
-				// Scroll hint icon
-				MaterialIcon {
-					ToolTip.delay: 500
-					ToolTip.text: qsTr("Scroll to switch disks")
-					ToolTip.visible: hintHover.hovered
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.normal
-					opacity: 0.7
-					text: "unfold_more"
-					visible: storageGaugeCard.diskCount > 1
-
-					HoverHandler {
-						id: hintHover
-					}
-				}
-			}
-
-			Item {
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-
-				ArcGauge {
-					accentColor: storageGaugeCard.accentColor
-					anchors.centerIn: parent
-					height: width
-					percentage: storageGaugeCard.animatedPercentage
-					startAngle: storageGaugeCard.arcStartAngle
-					sweepAngle: storageGaugeCard.arcSweep
-					trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-					width: Math.min(parent.width, parent.height)
-				}
-
-				CustomText {
-					anchors.centerIn: parent
-					color: storageGaugeCard.accentColor
-					font.pointSize: Appearance.font.size.extraLarge
-					font.weight: Font.Medium
-					text: storageGaugeCard.currentDisk ? `${Math.round(storageGaugeCard.currentDisk.perc * 100)}%` : "—"
-				}
-			}
-
-			CustomText {
-				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.smaller
-				text: {
-					if (!storageGaugeCard.currentDisk)
-						return "—";
-
-					const usedFmt = SystemUsage.formatKib(storageGaugeCard.currentDisk.used);
-					const totalFmt = SystemUsage.formatKib(storageGaugeCard.currentDisk.total);
-					return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`;
-				}
-			}
-		}
+		visible: active
 	}
 }

Modules/Resources/Wrapper.qml

@@ -34,8 +34,7 @@ Item {
 		anchors.centerIn: parent
 
 		sourceComponent: Content {
-			padding: Appearance.padding.normal
-			visibilities: root.visibilities
+			wrapper: root
 		}
 	}
 }

Modules/Settings/Categories.qml

@@ -18,103 +18,142 @@ Item {
 
 	// Function to select category by key
 	function selectCategory(categoryKey: string) {
-		for (let i = 0; i < listModel.count; i++) {
-			if (listModel.get(i).key === categoryKey) {
-				clayout.currentIndex = i;
-				root.content.currentCategory = categoryKey;
+		for (let i = 0; i < appearanceCats.count; i++) {
+			const item = appearanceCats.get(i);
+			if (item.key === categoryKey) {
+				appearanceView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
+				return;
+			}
+		}
+		for (let i = 0; i < systemCats.count; i++) {
+			const item = systemCats.get(i);
+			if (item.key === categoryKey) {
+				sysView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
+				return;
+			}
+		}
+		for (let i = 0; i < panelCats.count; i++) {
+			const item = panelCats.get(i);
+			if (item.key === categoryKey) {
+				panelsView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
 				return;
 			}
 		}
 	}
 
-	implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + Appearance.padding.smaller * 2
-	implicitWidth: clayout.contentWidth + Appearance.padding.smaller * 2
+	implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + clayout.anchors.margins * 2
+	implicitWidth: clayout.contentWidth + clayout.anchors.margins * 2
 
 	ListModel {
-		id: listModel
+		id: systemCats
 
 		ListElement {
+			_index: 0
 			icon: "settings"
 			key: "general"
 			name: "General"
 		}
 
 		ListElement {
-			icon: "wallpaper"
-			key: "wallpaper"
-			name: "Wallpaper"
-		}
-
-		ListElement {
-			icon: "settop_component"
-			key: "bar"
-			name: "Bar"
-		}
-
-		ListElement {
-			icon: "lock"
-			key: "lockscreen"
-			name: "Lockscreen"
-		}
-
-		ListElement {
+			_index: 1
 			icon: "build_circle"
 			key: "services"
 			name: "Services"
 		}
 
 		ListElement {
+			_index: 2
 			icon: "notifications"
 			key: "notifications"
 			name: "Notifications"
 		}
 
 		ListElement {
-			icon: "view_sidebar"
-			key: "sidebar"
-			name: "Sidebar"
-		}
-
-		ListElement {
+			_index: 3
 			icon: "handyman"
 			key: "utilities"
 			name: "Utilities"
 		}
 
 		ListElement {
+			_index: 4
+			icon: "cached"
+			key: "updates"
+			name: "Updates"
+		}
+	}
+
+	ListModel {
+		id: panelCats
+
+		ListElement {
+			_index: 5
+			icon: "settop_component"
+			key: "bar"
+			name: "Bar"
+		}
+
+		ListElement {
+			_index: 6
+			icon: "lock"
+			key: "lockscreen"
+			name: "Lockscreen"
+		}
+
+		ListElement {
+			_index: 7
+			icon: "view_sidebar"
+			key: "sidebar"
+			name: "Sidebar"
+		}
+
+		ListElement {
+			_index: 8
 			icon: "dashboard"
 			key: "dashboard"
 			name: "Dashboard"
 		}
 
 		ListElement {
-			icon: "colors"
-			key: "appearance"
-			name: "Appearance"
-		}
-
-		ListElement {
+			_index: 9
 			icon: "display_settings"
 			key: "osd"
 			name: "On screen display"
 		}
 
 		ListElement {
+			_index: 10
 			icon: "rocket_launch"
 			key: "launcher"
 			name: "Launcher"
 		}
+	}
+
+	ListModel {
+		id: appearanceCats
 
 		ListElement {
+			_index: 11
+			icon: "wallpaper"
+			key: "wallpaper"
+			name: "Wallpaper"
+		}
+
+		ListElement {
+			_index: 12
 			icon: "screenshot_region"
 			key: "screenshot"
 			name: "Screenshot"
 		}
 
 		ListElement {
-			icon: "cached"
-			key: "updates"
-			name: "Updates"
+			_index: 13
+			icon: "colors"
+			key: "appearance"
+			name: "Appearance"
 		}
 	}
 
@@ -123,34 +162,113 @@ Item {
 		color: DynamicColors.tPalette.m3surfaceContainer
 		radius: Appearance.rounding.normal
 
-		CustomListView {
+		CustomFlickable {
 			id: clayout
 
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.margins: Appearance.padding.smaller
-			anchors.top: parent.top
-			boundsBehavior: Flickable.StopAtBounds
+			anchors.fill: parent
+			anchors.margins: Appearance.padding.extraSmall
+			contentHeight: contentItem.childrenRect.height
 			contentWidth: contentItem.childrenRect.width
-			highlightFollowsCurrentItem: false
-			implicitWidth: contentItem.childrenRect.width
-			model: listModel
-			spacing: 5
+			flickableDirection: Flickable.VerticalFlick
 
-			delegate: Category {
-			}
-			highlight: CustomRect {
-				color: DynamicColors.palette.m3primary
-				implicitHeight: clayout.currentItem?.implicitHeight ?? 0
-				implicitWidth: clayout.width
-				radius: Appearance.rounding.normal - Appearance.padding.smaller
-				y: clayout.currentItem?.y ?? 0
+			ColumnLayout {
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: parent.top
+				spacing: Appearance.spacing.normal
 
-				Behavior on y {
-					Anim {
-						duration: Appearance.anim.durations.small
-						easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+				CustomListView {
+					id: sysView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: systemCats
+					spacing: 2
+
+					delegate: Category {
+						view: sysView
 					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: sysView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: sysView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: sysView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
+				}
+
+				CustomListView {
+					id: panelsView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					contentWidth: contentItem.childrenRect.width
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: panelCats
+					spacing: 2
+
+					delegate: Category {
+						view: panelsView
+					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: panelsView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: panelsView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: panelsView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
+				}
+
+				CustomListView {
+					id: appearanceView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					contentWidth: contentItem.childrenRect.width
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: appearanceCats
+					spacing: 2
+
+					delegate: Category {
+						view: appearanceView
+					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: appearanceView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: appearanceView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: appearanceView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
 				}
 			}
 		}
@@ -159,14 +277,44 @@ Item {
 	component Category: CustomRect {
 		id: categoryItem
 
+		required property int _index
+		readonly property bool first: index === 0
 		required property string icon
 		required property int index
 		required property string key
+		readonly property bool last: index === view.model.count - 1
 		required property string name
+		readonly property bool selected: key === root.content.currentCategory
+		required property ListView view
 
-		implicitHeight: 42
-		implicitWidth: 250
-		radius: Appearance.rounding.normal - Appearance.padding.smaller
+		bottomLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
+		bottomRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
+		color: selected ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
+		implicitHeight: 50
+		implicitWidth: 256
+		topLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
+		topRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
+
+		Behavior on bottomLeftRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on bottomRightRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on topLeftRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on topRightRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
 
 		RowLayout {
 			id: layout
@@ -181,9 +329,10 @@ Item {
 
 				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 				Layout.fillHeight: true
+				Layout.leftMargin: Appearance.padding.small
 				Layout.preferredWidth: icon.contentWidth
-				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-				fill: categoryItem.index === clayout.currentIndex ? 1 : 0
+				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				fill: categoryItem.key === root.content.currentCategory ? 1 : 0
 				font.pointSize: Appearance.font.size.small * 2
 				text: categoryItem.icon
 				verticalAlignment: Text.AlignVCenter
@@ -201,7 +350,7 @@ Item {
 				Layout.fillHeight: true
 				Layout.fillWidth: true
 				Layout.leftMargin: Appearance.spacing.normal
-				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				text: categoryItem.name
 				verticalAlignment: Text.AlignVCenter
 			}
@@ -210,9 +359,11 @@ Item {
 		StateLayer {
 			id: layer
 
+			color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
 			onClicked: {
-				root.content.currentCategory = categoryItem.key;
-				clayout.currentIndex = categoryItem.index;
+				root.content.setCategory(categoryItem.key, categoryItem._index);
+				categoryItem.view.currentIndex = categoryItem.index;
 			}
 		}
 	}

Modules/Settings/Categories/General.qml

@@ -1,6 +1,7 @@
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import qs.Modules.Settings.Controls
 import qs.Config
 import qs.Components
@@ -62,6 +63,7 @@ SettingsPage {
 
 	SettingsSection {
 		sectionId: "Color"
+		z: 1
 
 		SettingsHeader {
 			name: "Color"
@@ -105,7 +107,6 @@ SettingsPage {
 			active: root.schemeTypeItem(menuItems, Config.colors.schemeType)
 			enabled: Config.general.color.schemeGeneration
 			label: qsTr("Scheme type")
-			z: 2
 
 			menuItems: [
 				MenuItem {
@@ -231,26 +232,37 @@ SettingsPage {
 			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
 		}
 
-		SettingSpinner {
+		TimeInput {
 			name: "Schedule dark mode"
 			object: Config.general.color
-			settings: ["scheduleDarkStart", "scheduleDarkEnd", "scheduleDark"]
-			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
+			settings: ["scheduleDark", "scheduleDarkStart", "scheduleDarkEnd"]
+			shouldBeActive: Config.general.color.schemeGeneration
 		}
 
 		Separator {
 		}
 
-		SettingHyprSpinner {
+		HyprTimeInput {
 			name: "Schedule Hyprsunset"
 			object: Config.general.color
-			settings: ["scheduleHyprsunsetStart", "scheduleHyprsunsetEnd", "scheduleHyprsunset", "hyprsunsetTemp"]
+			settings: ["scheduleHyprsunset", "scheduleHyprsunsetStart", "scheduleHyprsunsetEnd", "hyprsunsetTemp"]
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 20000
+			min: 1000
+			name: "Hyprsunset temperature"
+			object: Config.general.color
+			setting: "hyprsunsetTemp"
+			step: 200
 		}
 	}
 
 	SettingsSection {
 		sectionId: "Default Apps"
-		z: -1
 
 		SettingsHeader {
 			name: "Default Apps"

Modules/Settings/Categories/Services.qml

@@ -92,6 +92,18 @@ SettingsPage {
 		Separator {
 		}
 
+		SettingSpinBox {
+			max: 1.0
+			min: 0
+			name: "Minimum brightness"
+			object: Config.services
+			setting: "minBrightness"
+			step: 0.01
+		}
+
+		Separator {
+		}
+
 		SettingSpinBox {
 			max: 5
 			min: 0
@@ -115,7 +127,7 @@ SettingsPage {
 
 		SettingSpinBox {
 			min: 1
-			name: "Visualizer bars"
+			name: "Visualizer resolution"
 			object: Config.services
 			setting: "visualizerBars"
 			step: 1

Modules/Settings/Categories/SystemUpdates.qml

@@ -70,7 +70,7 @@ CustomClippingRect {
 
 						StateLayer {
 							color: DynamicColors.palette.m3onPrimary
-							disabled: Updates.updating
+							enabled: !Updates.updating
 
 							onClicked: Updates.performSystemUpdate()
 						}

Modules/Settings/Categories/Utilities.qml

@@ -46,6 +46,75 @@ SettingsPage {
 		}
 	}
 
+	SettingsSection {
+		sectionId: "Clipboard"
+
+		SettingsHeader {
+			name: "Clipboard"
+		}
+
+		SettingSwitch {
+			name: "Enable clipboard history viewer"
+			object: Config.clipboard
+			setting: "enabled"
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 20
+			min: 1
+			name: "Max entries visible"
+			object: Config.clipboard
+			setting: "maxEntriesShown"
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 80
+			min: 30
+			name: "Entry height"
+			object: Config.clipboard.sizes
+			setting: "itemHeight"
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 700
+			min: 300
+			name: "Entry width"
+			object: Config.clipboard.sizes
+			setting: "width"
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 1800
+			min: 50
+			name: "Minimum preview width"
+			object: Config.clipboard.sizes
+			setting: "minPreviewWidth"
+		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			max: 1800
+			min: 50
+			name: "Maximum preview width"
+			object: Config.clipboard.sizes
+			setting: "previewWidth"
+		}
+	}
+
 	SettingsSection {
 		sectionId: "Toasts"
 

Modules/Settings/Content.qml

@@ -14,6 +14,8 @@ Item {
 	id: root
 
 	property string currentCategory: "general"
+	property int currentIndex: 0
+	property int lastIndex: 0
 	readonly property real nonAnimHeight: Math.floor(screen.height / 1.5) + viewWrapper.anchors.margins * 2
 	readonly property real nonAnimWidth: view.implicitWidth + Math.floor(screen.width / 2) + viewWrapper.anchors.margins * 2
 	property string pendingSection: ""
@@ -27,8 +29,9 @@ Item {
 		scrollTimer.restart();
 	}
 
-	function selectCategory(categoryKey: string) {
-		layout.selectCategory(categoryKey);
+	function setCategory(category: string, index: int): void {
+		currentIndex = index;
+		currentCategory = category;
 	}
 
 	implicitHeight: nonAnimHeight
@@ -50,35 +53,88 @@ Item {
 
 	Connections {
 		function onCurrentCategoryChanged() {
-			stack.pop();
-			if (currentCategory === "general")
-				stack.push(general);
-			else if (currentCategory === "wallpaper")
-				stack.push(background);
-			else if (currentCategory === "bar")
-				stack.push(bar);
-			else if (currentCategory === "appearance")
-				stack.push(appearance);
-			else if (currentCategory === "lockscreen")
-				stack.push(lockscreen);
-			else if (currentCategory === "services")
-				stack.push(services);
-			else if (currentCategory === "notifications")
-				stack.push(notifications);
-			else if (currentCategory === "sidebar")
-				stack.push(sidebar);
-			else if (currentCategory === "utilities")
-				stack.push(utilities);
-			else if (currentCategory === "dashboard")
-				stack.push(dashboard);
-			else if (currentCategory === "osd")
-				stack.push(osd);
-			else if (currentCategory === "launcher")
-				stack.push(launcher);
-			else if (currentCategory === "screenshot")
-				stack.push(screenshot);
-			else if (currentCategory === "updates")
-				stack.push(updates);
+			if (root.currentCategory === "general") {
+				stack.replaceCurrentItem(general, [], StackView.PopTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "wallpaper") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(background, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(background, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "bar") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(bar, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(bar, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "appearance") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(appearance, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(appearance, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "lockscreen") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(lockscreen, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(lockscreen, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "services") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(services, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(services, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "notifications") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(notifications, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(notifications, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "sidebar") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(sidebar, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(sidebar, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "utilities") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(utilities, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(utilities, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "dashboard") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(dashboard, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(dashboard, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "osd") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(osd, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(osd, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "launcher") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(launcher, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(launcher, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "screenshot") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(screenshot, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(screenshot, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "updates") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(updates, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(updates, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			}
 		}
 
 		target: root
@@ -99,7 +155,7 @@ Item {
 			anchors.top: parent.top
 
 			onSettingSelected: (category, section, settingName) => {
-				root.selectCategory(category);
+				layout.selectCategory(category);
 				root.scrollToSetting(section, settingName);
 			}
 		}
@@ -141,8 +197,102 @@ Item {
 				id: stack
 
 				anchors.fill: parent
-				anchors.margins: Appearance.padding.smaller
 				initialItem: general
+
+				popEnter: Transition {
+					SequentialAnimation {
+						Anim {
+							duration: 0
+							from: 0
+							property: "opacity"
+							to: 0
+						}
+
+						PauseAnimation {
+							duration: Appearance.anim.durations.expressiveEffects
+						}
+
+						ParallelAnimation {
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 0
+								property: "opacity"
+								to: 1
+							}
+
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: -50
+								property: "y"
+								to: 0
+							}
+						}
+					}
+				}
+				popExit: Transition {
+					ParallelAnimation {
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 1
+							property: "opacity"
+							to: 0
+						}
+
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 0
+							property: "y"
+							to: 50
+						}
+					}
+				}
+				pushEnter: Transition {
+					SequentialAnimation {
+						Anim {
+							duration: 0
+							from: 0
+							property: "opacity"
+							to: 0
+						}
+
+						PauseAnimation {
+							duration: Appearance.anim.durations.expressiveEffects
+						}
+
+						ParallelAnimation {
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 0
+								property: "opacity"
+								to: 1
+							}
+
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 50
+								property: "y"
+								to: 0
+							}
+						}
+					}
+				}
+				pushExit: Transition {
+					ParallelAnimation {
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 1
+							property: "opacity"
+							to: 0
+						}
+
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 0
+							property: "y"
+							to: -50
+						}
+					}
+				}
 			}
 		}
 	}

Modules/Settings/Controls/HyprTimeInput.qml

@@ -0,0 +1,660 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+Item {
+	id: root
+
+	readonly property string endTime: {
+		var d = new Date(0, 0, 0, 0, 0, 0, 0);
+		d.setMinutes(object[settings[2]]);
+		return Qt.formatTime(d, "hh:mm AP");
+	}
+	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
+	required property string name
+	required property var object
+	required property list<string> settings
+	property bool shouldBeActive: true
+	readonly property string startTime: {
+		var d = new Date(0, 0, 0, 0, 0, 0, 0);
+		d.setMinutes(object[settings[1]]);
+		return Qt.formatTime(d, "hh:mm AP");
+	}
+
+	function commitChoice(choice: int, setting: string): void {
+		root.object[setting] = choice;
+		Config.save();
+		Hyprsunset.checkStartup();
+	}
+
+	function convertHour(timeValue: int): int {
+		return Math.floor(timeValue / 60);
+	}
+
+	function convertMinute(timeValue: int): int {
+		return timeValue % 60;
+	}
+
+	function convertToMinutes(hour: int, minute: int): int {
+		return hour * 60 + minute;
+	}
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
+	Rectangle {
+		anchors.fill: parent
+		anchors.margins: -Appearance.padding.smaller
+		color: DynamicColors.palette.m3primaryContainer
+		opacity: root.highlighted ? 0.5 : 0
+		radius: Appearance.rounding.small
+
+		Behavior on opacity {
+			Anim {
+				duration: Appearance.anim.durations.normal
+			}
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		ColumnLayout {
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+
+			CustomText {
+				id: text
+
+				Layout.alignment: Qt.AlignLeft
+				Layout.fillWidth: true
+				font.pointSize: Appearance.font.size.larger
+				text: root.name
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignLeft
+				Layout.preferredWidth: Math.min(contentWidth, optionLayout.x - Appearance.spacing.normal)
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				text: qsTr("Hyprsunset will turn on at %1, and turn off at %2.").arg(root.startTime).arg(root.endTime)
+				wrapMode: Text.WordWrap
+			}
+		}
+
+		ColumnLayout {
+			id: optionLayout
+
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+
+			RowLayout {
+				CustomText {
+					Layout.preferredWidth: spacer.x + spacer.width
+					text: qsTr("Start")
+				}
+
+				CustomText {
+					Layout.preferredWidth: endMinuteRect.width + endHourRect.width
+					text: qsTr("End")
+				}
+
+				CustomText {
+					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
+					text: qsTr("Enabled: ")
+				}
+
+				CustomSwitch {
+					id: enabledSwitch
+
+					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
+					checked: root.object[root.settings[0]]
+
+					onToggled: {
+						root.object[root.settings[0]] = checked;
+						Config.save();
+					}
+				}
+			}
+
+			RowLayout {
+				Layout.fillHeight: true
+
+				CustomRect {
+					id: startHourRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: startHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: startHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: startHourField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: startHourField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertHour(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[1])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (startHourField.text.length >= 2) {
+									startHourField.text = "0" + startHourField.text[0];
+								} else if (startHourField.text.length === 1) {
+									startHourField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								startHourField.text = setConfigText(root.settings[1]);
+								startHourField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								startHourField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								startMinuteField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								endMinuteField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = startHourField.text.length;
+
+								if (textLen >= 2 && startHourField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(startHourField.text + digit);
+								} else {
+									val = parseInt(startHourField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(23, val));
+
+								if (textLen >= 2 && val < 10) {
+									startHourField.text = "0" + val;
+								} else {
+									startHourField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
+						}
+						onTextEdited: {
+							if (startHourField.text === "")
+								return;
+							var val = parseInt(startHourField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== startHourField.text)
+								startHourField.text = newText;
+						}
+					}
+				}
+
+				CustomText {
+					id: startSeparator
+
+					font.pointSize: Appearance.font.size.extraLarge
+					text: ":"
+				}
+
+				CustomRect {
+					id: startMinuteRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: startMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: startMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: startMinuteField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: startMinuteField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertMinute(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[1])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (startMinuteField.text.length >= 2) {
+									startMinuteField.text = "0" + startMinuteField.text[0];
+								} else if (startMinuteField.text.length === 1) {
+									startMinuteField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								startMinuteField.text = setConfigText(root.settings[1]);
+								startMinuteField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								startMinuteField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								endHourField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								startHourField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = startMinuteField.text.length;
+
+								if (textLen >= 2 && startMinuteField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(startMinuteField.text + digit);
+								} else {
+									val = parseInt(startMinuteField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(59, val));
+
+								if (textLen >= 2 && val < 10) {
+									startMinuteField.text = "0" + val;
+								} else {
+									startMinuteField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
+						}
+						onTextEdited: {
+							if (startMinuteField.text === "")
+								return;
+							var val = parseInt(startMinuteField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== startMinuteField.text)
+								startMinuteField.text = newText;
+						}
+					}
+				}
+
+				Item {
+					id: spacer
+
+					Layout.preferredWidth: Appearance.spacing.large
+				}
+
+				CustomRect {
+					id: endHourRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: endHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: endHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: endHourField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: endHourField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertHour(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[2])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (endHourField.text.length >= 2) {
+									endHourField.text = "0" + endHourField.text[0];
+								} else if (endHourField.text.length === 1) {
+									endHourField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								endHourField.text = setConfigText(root.settings[2]);
+								endHourField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								endHourField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								endMinuteField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								startMinuteField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = endHourField.text.length;
+
+								if (textLen >= 2 && endHourField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(endHourField.text + digit);
+								} else {
+									val = parseInt(endHourField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(23, val));
+
+								if (textLen >= 2 && val < 10) {
+									endHourField.text = "0" + val;
+								} else {
+									endHourField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
+						}
+						onTextEdited: {
+							if (endHourField.text === "")
+								return;
+							var val = parseInt(endHourField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== endHourField.text)
+								endHourField.text = newText;
+						}
+					}
+				}
+
+				CustomText {
+					id: endSeparator
+
+					font.pointSize: Appearance.font.size.extraLarge
+					text: ":"
+				}
+
+				CustomRect {
+					id: endMinuteRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: endMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: endMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: endMinuteField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: endMinuteField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertMinute(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[2])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (endMinuteField.text.length >= 2) {
+									endMinuteField.text = "0" + endMinuteField.text[0];
+								} else if (endMinuteField.text.length === 1) {
+									endMinuteField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								endMinuteField.text = setConfigText(root.settings[2]);
+								endMinuteField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								endMinuteField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								startHourField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								endHourField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = endMinuteField.text.length;
+
+								if (textLen >= 2 && endMinuteField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(endMinuteField.text + digit);
+								} else {
+									val = parseInt(endMinuteField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(59, val));
+
+								if (textLen >= 2 && val < 10) {
+									endMinuteField.text = "0" + val;
+								} else {
+									endMinuteField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
+						}
+						onTextEdited: {
+							if (endMinuteField.text === "")
+								return;
+							var val = parseInt(endMinuteField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== endMinuteField.text)
+								endMinuteField.text = newText;
+						}
+					}
+				}
+			}
+
+			RowLayout {
+				Layout.fillWidth: true
+
+				CustomText {
+					id: startHour
+
+					Layout.preferredWidth: startSeparator.x + startSeparator.width
+					text: qsTr("Hour")
+				}
+
+				CustomText {
+					id: startMinute
+
+					Layout.preferredWidth: spacer.x + spacer.width - x
+					text: qsTr("Minute")
+				}
+
+				CustomText {
+					Layout.preferredWidth: endSeparator.x + endSeparator.width - x
+					text: qsTr("Hour")
+				}
+
+				CustomText {
+					text: qsTr("Minute")
+				}
+			}
+		}
+	}
+}

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -221,11 +221,11 @@ Item {
 			font: Appearance.font.family.sans
 			// icon: root.iconForId(modelData.entry.id)
 			icon: root.labelForId(modelData.entry.id)
-			inactiveColour: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+			inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+			isToggle: true
 			radius: stateLayer.pressed ? 6 / 2 : internalChecked ? 6 : 8
 			radiusAnim.duration: MaterialEasing.expressiveEffectsTime
 			radiusAnim.easing.bezierCurve: MaterialEasing.expressiveEffects
-			toggle: true
 			visible: !["spacer", "upower", "dash", "audio"].some(prefix => modelData.entry.id.startsWith(prefix))
 
 			Behavior on Layout.preferredWidth {

Modules/Settings/Controls/SettingsPage.qml

@@ -1,25 +1,21 @@
 import QtQuick
-import QtQuick.Layouts
+import QtQuick.Controls
 import qs.Components
 import qs.Config
 import qs.Helpers
 
-CustomClippingRect {
+Item {
 	id: root
 
 	default property alias contentData: clayout.data
 
-	// Find and scroll to a section by its sectionId, then highlight a specific setting
 	function scrollToSectionAndHighlight(sectionId: string, settingName: string): bool {
-		// Find the section with matching sectionId
 		for (let i = 0; i < clayout.children.length; i++) {
 			const section = clayout.children[i];
 			if (section.sectionId === sectionId) {
-				// Scroll to the section with some padding
 				const targetY = section.y - Appearance.padding.normal;
 				flickable.contentY = Math.max(0, Math.min(targetY, flickable.contentHeight - flickable.height));
 
-				// Use the singleton to highlight the setting
 				SettingsHighlight.highlight(settingName);
 				return true;
 			}
@@ -27,14 +23,15 @@ CustomClippingRect {
 		return false;
 	}
 
-	radius: Appearance.rounding.normal - Appearance.padding.smaller
-
 	CustomFlickable {
 		id: flickable
 
 		anchors.fill: parent
+		// for future:
+		// anchors.leftMargin: Appearance.padding.extraLarge
+		// anchors.rightMargin: Appearance.padding.extraLarge
 		clip: true
-		contentHeight: clayout.implicitHeight
+		contentHeight: clayout.implicitHeight + clayout.anchors.margins * 2
 
 		CustomScrollBar.vertical: CustomScrollBar {
 			flickable: flickable
@@ -64,7 +61,9 @@ CustomClippingRect {
 			id: clayout
 
 			anchors.left: parent.left
+			anchors.margins: Appearance.padding.extraSmall
 			anchors.right: parent.right
+			anchors.top: parent.top
 			spacing: Appearance.spacing.small
 
 			// move: Transition {

Modules/Settings/Controls/SettingsSection.qml

@@ -14,7 +14,7 @@ CustomRect {
 	anchors.right: parent.right
 	color: DynamicColors.tPalette.m3surfaceContainer
 	implicitHeight: layout.height + contentPadding * 2
-	radius: Appearance.rounding.normal - Appearance.padding.smaller
+	radius: Appearance.rounding.normal - Appearance.padding.extraSmall
 
 	Behavior on implicitHeight {
 		Anim {

Modules/Settings/Controls/SpinnerButton.qml

@@ -44,11 +44,11 @@ CustomRect {
 	}
 
 	StateLayer {
-		function onClicked(): void {
+		visible: root.enabled
+
+		onClicked: {
 			SettingsDropdowns.toggle(menu, root);
 		}
-
-		visible: root.enabled
 	}
 
 	PathViewMenu {

Modules/Settings/Controls/TimeInput.qml

@@ -0,0 +1,661 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+Item {
+	id: root
+
+	readonly property string endTime: {
+		var d = new Date(0, 0, 0, 0, 0, 0, 0);
+		d.setMinutes(object[settings[2]]);
+		return Qt.formatTime(d, "hh:mm AP");
+	}
+	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
+	required property string name
+	required property var object
+	required property list<string> settings
+	property bool shouldBeActive: true
+	readonly property string startTime: {
+		var d = new Date(0, 0, 0, 0, 0, 0, 0);
+		d.setMinutes(object[settings[1]]);
+		return Qt.formatTime(d, "hh:mm AP");
+	}
+
+	function commitChoice(choice: int, setting: string): void {
+		root.object[setting] = choice;
+		Config.save();
+		ModeScheduler.checkStartup();
+	}
+
+	function convertHour(timeValue: int): int {
+		return Math.floor(timeValue / 60);
+	}
+
+	function convertMinute(timeValue: int): int {
+		return timeValue % 60;
+	}
+
+	function convertToMinutes(hour: int, minute: int): int {
+		return hour * 60 + minute;
+	}
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
+	Rectangle {
+		anchors.fill: parent
+		anchors.margins: -Appearance.padding.smaller
+		color: DynamicColors.palette.m3primaryContainer
+		opacity: root.highlighted ? 0.5 : 0
+		radius: Appearance.rounding.small
+
+		Behavior on opacity {
+			Anim {
+				duration: Appearance.anim.durations.normal
+			}
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		ColumnLayout {
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+
+			CustomText {
+				id: text
+
+				Layout.alignment: Qt.AlignLeft
+				Layout.fillWidth: true
+				font.pointSize: Appearance.font.size.larger
+				text: root.name
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignLeft
+				Layout.preferredWidth: Math.min(contentWidth, optionLayout.x - Appearance.spacing.normal)
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				text: qsTr("Dark mode will turn on at %1, and turn off at %2.").arg(root.startTime).arg(root.endTime)
+				wrapMode: Text.WordWrap
+			}
+		}
+
+		ColumnLayout {
+			id: optionLayout
+
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+
+			RowLayout {
+				CustomText {
+					Layout.preferredWidth: spacer.x + spacer.width
+					text: qsTr("Start")
+				}
+
+				CustomText {
+					Layout.preferredWidth: endMinuteRect.width + endHourRect.width
+					text: qsTr("End")
+				}
+
+				CustomText {
+					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
+					text: qsTr("Enabled: ")
+				}
+
+				CustomSwitch {
+					id: enabledSwitch
+
+					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
+					checked: root.object[root.settings[0]]
+
+					onToggled: {
+						root.object[root.settings[0]] = checked;
+						Config.save();
+						ModeScheduler.checkStartup();
+					}
+				}
+			}
+
+			RowLayout {
+				Layout.fillHeight: true
+
+				CustomRect {
+					id: startHourRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: startHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: startHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: startHourField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: startHourField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertHour(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[1])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (startHourField.text.length >= 2) {
+									startHourField.text = "0" + startHourField.text[0];
+								} else if (startHourField.text.length === 1) {
+									startHourField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								startHourField.text = setConfigText(root.settings[1]);
+								startHourField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								startHourField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								startMinuteField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								endMinuteField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = startHourField.text.length;
+
+								if (textLen >= 2 && startHourField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(startHourField.text + digit);
+								} else {
+									val = parseInt(startHourField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(23, val));
+
+								if (textLen >= 2 && val < 10) {
+									startHourField.text = "0" + val;
+								} else {
+									startHourField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
+						}
+						onTextEdited: {
+							if (startHourField.text === "")
+								return;
+							var val = parseInt(startHourField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== startHourField.text)
+								startHourField.text = newText;
+						}
+					}
+				}
+
+				CustomText {
+					id: startSeparator
+
+					font.pointSize: Appearance.font.size.extraLarge
+					text: ":"
+				}
+
+				CustomRect {
+					id: startMinuteRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: startMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: startMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: startMinuteField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: startMinuteField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertMinute(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[1])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (startMinuteField.text.length >= 2) {
+									startMinuteField.text = "0" + startMinuteField.text[0];
+								} else if (startMinuteField.text.length === 1) {
+									startMinuteField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								startMinuteField.text = setConfigText(root.settings[1]);
+								startMinuteField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								startMinuteField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								endHourField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								startHourField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = startMinuteField.text.length;
+
+								if (textLen >= 2 && startMinuteField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(startMinuteField.text + digit);
+								} else {
+									val = parseInt(startMinuteField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(59, val));
+
+								if (textLen >= 2 && val < 10) {
+									startMinuteField.text = "0" + val;
+								} else {
+									startMinuteField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(startHourField.text), parseInt(startMinuteField.text)), root.settings[1]);
+						}
+						onTextEdited: {
+							if (startMinuteField.text === "")
+								return;
+							var val = parseInt(startMinuteField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== startMinuteField.text)
+								startMinuteField.text = newText;
+						}
+					}
+				}
+
+				Item {
+					id: spacer
+
+					Layout.preferredWidth: Appearance.spacing.large
+				}
+
+				CustomRect {
+					id: endHourRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: endHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: endHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: endHourField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: endHourField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertHour(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[2])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (endHourField.text.length >= 2) {
+									endHourField.text = "0" + endHourField.text[0];
+								} else if (endHourField.text.length === 1) {
+									endHourField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								endHourField.text = setConfigText(root.settings[2]);
+								endHourField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								endHourField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								endMinuteField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								startMinuteField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = endHourField.text.length;
+
+								if (textLen >= 2 && endHourField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(endHourField.text + digit);
+								} else {
+									val = parseInt(endHourField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(23, val));
+
+								if (textLen >= 2 && val < 10) {
+									endHourField.text = "0" + val;
+								} else {
+									endHourField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
+						}
+						onTextEdited: {
+							if (endHourField.text === "")
+								return;
+							var val = parseInt(endHourField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== endHourField.text)
+								endHourField.text = newText;
+						}
+					}
+				}
+
+				CustomText {
+					id: endSeparator
+
+					font.pointSize: Appearance.font.size.extraLarge
+					text: ":"
+				}
+
+				CustomRect {
+					id: endMinuteRect
+
+					Layout.preferredHeight: 72
+					Layout.preferredWidth: 96
+					color: endMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					implicitHeight: 72
+					implicitWidth: 96
+					radius: Appearance.rounding.small
+
+					CustomRect {
+						anchors.fill: parent
+						border.color: endMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+						border.width: endMinuteField.focus ? 2 : 0
+						radius: parent.radius - border.width
+
+						Behavior on border.width {
+							Anim {
+							}
+						}
+					}
+
+					CustomTextField {
+						id: endMinuteField
+
+						function setConfigText(setting: string): string {
+							var val = root.convertMinute(root.object[setting]);
+							if (val === 0) {
+								return "00";
+							}
+							return String(val);
+						}
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						clip: true
+						color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+						cursorHeight: height - Appearance.padding.normal * 2
+						font.family: "Roboto"
+						font.letterSpacing: -0.25
+						font.pixelSize: 56
+						font.weight: 400
+						horizontalAlignment: TextInput.AlignHCenter
+						text: setConfigText(root.settings[2])
+						verticalAlignment: TextInput.AlignVCenter
+
+						Keys.onPressed: event => {
+							if (event.key === Qt.Key_Backspace) {
+								event.accepted = true;
+								if (endMinuteField.text.length >= 2) {
+									endMinuteField.text = "0" + endMinuteField.text[0];
+								} else if (endMinuteField.text.length === 1) {
+									endMinuteField.text = "0";
+								}
+								return;
+							} else if (event.key === Qt.Key_Escape) {
+								event.accepted = true;
+								endMinuteField.text = setConfigText(root.settings[2]);
+								endMinuteField.focus = false;
+							} else if (event.key === Qt.Key_Return) {
+								endMinuteField.focus = false;
+								return;
+							} else if (event.key === Qt.Key_Tab) {
+								startHourField.focus = true;
+							} else if (event.key === Qt.Key_Backtab) {
+								endHourField.focus = true;
+							}
+
+							if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
+								event.accepted = true;
+								var digit = event.text;
+								var textLen = endMinuteField.text.length;
+
+								if (textLen >= 2 && endMinuteField.text[0] !== '0') {
+									return;
+								}
+
+								var val = 0;
+								if (textLen === 0) {
+									val = parseInt(digit);
+								} else if (textLen === 1) {
+									val = parseInt(endMinuteField.text + digit);
+								} else {
+									val = parseInt(endMinuteField.text[1] + digit);
+								}
+
+								val = Math.max(0, Math.min(59, val));
+
+								if (textLen >= 2 && val < 10) {
+									endMinuteField.text = "0" + val;
+								} else {
+									endMinuteField.text = val.toString();
+								}
+							}
+
+							event.accepted = true;
+						}
+						onCursorPositionChanged: cursorPosition = 2
+						onEditingFinished: {
+							root.commitChoice(root.convertToMinutes(parseInt(endHourField.text), parseInt(endMinuteField.text)), root.settings[2]);
+						}
+						onTextEdited: {
+							if (endMinuteField.text === "")
+								return;
+							var val = parseInt(endMinuteField.text);
+							if (isNaN(val))
+								return;
+							val = Math.max(0, Math.min(23, val));
+							var newText = val.toString();
+							if (newText !== endMinuteField.text)
+								endMinuteField.text = newText;
+						}
+					}
+				}
+			}
+
+			RowLayout {
+				Layout.fillWidth: true
+
+				CustomText {
+					id: startHour
+
+					Layout.preferredWidth: startSeparator.x + startSeparator.width
+					text: qsTr("Hour")
+				}
+
+				CustomText {
+					id: startMinute
+
+					Layout.preferredWidth: spacer.x + spacer.width - x
+					text: qsTr("Minute")
+				}
+
+				CustomText {
+					Layout.preferredWidth: endSeparator.x + endSeparator.width - x
+					text: qsTr("Hour")
+				}
+
+				CustomText {
+					text: qsTr("Minute")
+				}
+			}
+		}
+	}
+}

Modules/Settings/Controls/WallpaperCropper.qml

@@ -94,7 +94,7 @@ Item {
 					const finalRect = Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent);
 
 					// We just pass the percentages directly to the backend
-					Wallpapers.setCrop(delegate.modelData.name, finalRect, finalRect, cropRect.zoom);
+					Wallpapers.setCrop(delegate.modelData.name, finalRect, cropRect.zoom);
 				}
 
 				function zoomClipRect(zoom: real): void {
@@ -131,24 +131,22 @@ Item {
 					anchors.left: parent.left
 					anchors.right: parent.right
 					implicitHeight: 30
-					spacing: Appearance.spacing.large
-
-					CustomText {
-						text: qsTr("Crop scale")
-					}
 
 					CustomSlider {
 						id: zoomSlider
 
 						Layout.fillWidth: true
-						Layout.preferredHeight: 30
+						Layout.leftMargin: Appearance.padding.normal
+						Layout.preferredHeight: Appearance.padding.larger * 3
+						Layout.rightMargin: Appearance.padding.normal
 						from: 1.0
-						implicitHeight: 30
+						implicitHeight: Appearance.padding.larger * 3
+						insetIcon: "crop"
 						to: 5.0
 						value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
 
-						onMoved: {
-							delegate.zoomClipRect(value);
+						onInteraction: value => {
+							delegate.zoomClipRect(1 + (value * 4));
 							wrapper.changesMade = true;
 						}
 					}
@@ -167,7 +165,7 @@ Item {
 					anchors.top: parent.top
 					asynchronous: true
 					fillMode: Image.PreserveAspectFit
-					// retainWhileLoading: true
+					retainWhileLoading: true
 					source: Wallpapers.current
 					sourceSize.height: parent.height
 					sourceSize.width: parent.width
@@ -202,7 +200,7 @@ Item {
 					Loader {
 						id: cropRectLoader
 
-						active: scaledImg.paintedWidth > 0 && scaledImg.status == Image.Ready
+						active: scaledImg.paintedWidth > 0
 
 						sourceComponent: Component {
 							CustomRect {

Modules/Settings/Controls/WallpaperGrid.qml

@@ -131,16 +131,16 @@ GridView {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				Wallpapers.setWallpaper(modelData.path);
-			}
-
 			anchors.bottomMargin: itemMargin
 			anchors.fill: parent
 			anchors.leftMargin: itemMargin
 			anchors.rightMargin: itemMargin
 			anchors.topMargin: itemMargin
 			radius: itemRadius
+
+			onClicked: {
+				Wallpapers.setWallpaper(modelData.path);
+			}
 		}
 	}
 	Behavior on opacity {

Modules/Shortcuts.qml

@@ -59,4 +59,13 @@ Scope {
 			visibilities.settings = !visibilities.settings;
 		}
 	}
+
+	CustomShortcut {
+		name: "toggle-clipboard"
+
+		onPressed: {
+			const visibilities = Visibilities.getForActive();
+			visibilities.clipboard = !visibilities.clipboard;
+		}
+	}
 }

Modules/SysTray/Popouts/AudioPopout.qml

@@ -19,7 +19,7 @@ Item {
 	required property var wrapper
 
 	implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: 400 + Appearance.padding.small * 2
+	implicitWidth: 500 + Appearance.padding.small * 2
 
 	CustomRect {
 		anchors.left: parent.left
@@ -52,56 +52,16 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 50 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
 			color: DynamicColors.tPalette.m3surfaceContainer
 			radius: root.rounding
 
-			Item {
-				id: sinkIcon
-
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.leftMargin: Appearance.padding.normal
-				anchors.top: parent.top
-				implicitWidth: childrenRect.width
-
-				CustomRect {
-					anchors.centerIn: parent
-					color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-					implicitHeight: 40
-					implicitWidth: 40
-					radius: Appearance.rounding.full
-
-					MaterialIcon {
-						anchors.alignWhenCentered: false
-						anchors.centerIn: parent
-						animate: true
-						color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-						font.pointSize: 22
-						text: Audio.muted ? "volume_off" : "volume_up"
-					}
-
-					StateLayer {
-						color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-
-						onClicked: {
-							const audio = Audio.sink?.audio;
-							if (audio)
-								audio.muted = !audio.muted;
-						}
-					}
-				}
-			}
-
 			ColumnLayout {
-				anchors.bottom: parent.bottom
-				anchors.bottomMargin: Appearance.padding.smallest
-				anchors.left: sinkIcon.right
-				anchors.leftMargin: Appearance.spacing.normal
-				anchors.right: parent.right
-				anchors.rightMargin: Appearance.padding.large
-				anchors.top: parent.top
+				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Appearance.padding.larger
+				anchors.rightMargin: Appearance.padding.larger
 				anchors.topMargin: Appearance.padding.smaller
 
 				RowLayout {
@@ -111,34 +71,53 @@ Item {
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 						Layout.fillWidth: true
-						text: "Output Volume"
+						text: "Output volume"
 					}
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
 					}
 				}
 
-				CustomMouseArea {
-					Layout.bottomMargin: 5
-					Layout.fillHeight: true
-					Layout.fillWidth: true
+				RowLayout {
+					spacing: Appearance.spacing.large
 
-					CustomSlider {
-						anchors.left: parent.left
-						anchors.right: parent.right
-						color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: parent.height
-						value: Audio.volume
+					CustomMouseArea {
+						Layout.bottomMargin: Appearance.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Appearance.padding.larger * 3
 
-						Behavior on value {
-							Anim {
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+							fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
+							value: Audio.volume
+
+							Behavior on value {
+								Anim {
+								}
 							}
-						}
 
-						onMoved: Audio.setVolume(value)
+							onInteraction: value => Audio.setVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Appearance.padding.normal
+						checked: !Audio.muted
+
+						onToggled: {
+							const audio = Audio.sink?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
 					}
 				}
 			}
@@ -146,7 +125,7 @@ Item {
 
 		CustomClippingRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 50 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
 			color: DynamicColors.tPalette.m3surfaceContainer
 			radius: root.rounding
@@ -173,51 +152,11 @@ Item {
 				}
 			}
 
-			Item {
-				id: sourceIcon
-
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.leftMargin: Appearance.padding.normal
-				anchors.top: parent.top
-				implicitWidth: childrenRect.width
-
-				CustomRect {
-					anchors.centerIn: parent
-					color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-					implicitHeight: 40
-					implicitWidth: 40
-					radius: Appearance.rounding.full
-
-					MaterialIcon {
-						anchors.alignWhenCentered: false
-						anchors.centerIn: parent
-						animate: true
-						color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-						font.pointSize: 22
-						text: Audio.sourceMuted ? "mic_off" : "mic"
-					}
-
-					StateLayer {
-						color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-
-						onClicked: {
-							const audio = Audio.source?.audio;
-							if (audio)
-								audio.muted = !audio.muted;
-						}
-					}
-				}
-			}
-
 			ColumnLayout {
-				anchors.bottom: parent.bottom
-				anchors.bottomMargin: Appearance.padding.smallest
-				anchors.left: sourceIcon.right
-				anchors.leftMargin: Appearance.spacing.normal
-				anchors.right: parent.right
-				anchors.rightMargin: Appearance.padding.large
-				anchors.top: parent.top
+				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Appearance.padding.larger
+				anchors.rightMargin: Appearance.padding.larger
 				anchors.topMargin: Appearance.padding.smaller
 
 				RowLayout {
@@ -227,34 +166,53 @@ Item {
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 						Layout.fillWidth: true
-						text: "Input Volume"
+						text: "Input volume"
 					}
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
 					}
 				}
 
-				CustomMouseArea {
-					Layout.bottomMargin: 5
-					Layout.fillHeight: true
-					Layout.fillWidth: true
+				RowLayout {
+					spacing: Appearance.spacing.large
 
-					CustomSlider {
-						anchors.left: parent.left
-						anchors.right: parent.right
-						color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: parent.height
-						value: Audio.sourceVolume
+					CustomMouseArea {
+						Layout.bottomMargin: Appearance.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Appearance.padding.larger * 3
 
-						Behavior on value {
-							Anim {
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.sourceMuted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+							fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.sourceMuted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
+							value: Audio.sourceVolume
+
+							Behavior on value {
+								Anim {
+								}
 							}
-						}
 
-						onMoved: Audio.setSourceVolume(value)
+							onInteraction: value => Audio.setSourceVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Appearance.padding.normal
+						checked: !Audio.sourceMuted
+
+						onToggled: {
+							const audio = Audio.source?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
 					}
 				}
 			}
@@ -280,7 +238,7 @@ Item {
 				required property var modelData
 
 				Layout.fillWidth: true
-				Layout.preferredHeight: 50 + Appearance.spacing.smaller * 2
+				Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
 				Layout.topMargin: root.topMargin
 				color: DynamicColors.tPalette.m3surfaceContainer
 				radius: root.rounding
@@ -307,43 +265,6 @@ Item {
 					}
 				}
 
-				Item {
-					id: appBoxIcon
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.leftMargin: Appearance.padding.normal
-					anchors.top: parent.top
-					implicitWidth: childrenRect.width
-
-					CustomRect {
-						anchors.centerIn: parent
-						color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: 40
-						implicitWidth: 40
-						radius: Appearance.rounding.full
-
-						MaterialIcon {
-							id: icon
-
-							anchors.centerIn: parent
-							animate: true
-							color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-							font.pointSize: 22
-							text: appBox.modelData.audio.muted ? "volume_off" : "volume_up"
-						}
-
-						StateLayer {
-							color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-							radius: Appearance.rounding.full
-
-							onClicked: {
-								appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
-							}
-						}
-					}
-				}
-
 				TextMetrics {
 					id: metrics
 
@@ -353,13 +274,10 @@ Item {
 				}
 
 				ColumnLayout {
-					anchors.bottom: parent.bottom
-					anchors.bottomMargin: Appearance.padding.smallest
-					anchors.left: appBoxIcon.right
-					anchors.leftMargin: Appearance.spacing.normal
-					anchors.right: parent.right
-					anchors.rightMargin: Appearance.padding.large
-					anchors.top: parent.top
+					anchors.bottomMargin: Appearance.padding.smaller
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.larger
+					anchors.rightMargin: Appearance.padding.larger
 					anchors.topMargin: Appearance.padding.smaller
 
 					RowLayout {
@@ -375,25 +293,45 @@ Item {
 
 						CustomText {
 							Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+							color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 							font.bold: true
 							text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
 						}
 					}
 
-					CustomMouseArea {
-						Layout.bottomMargin: 5
-						Layout.fillHeight: true
-						Layout.fillWidth: true
+					RowLayout {
+						spacing: Appearance.spacing.large
 
-						CustomSlider {
-							anchors.left: parent.left
-							anchors.right: parent.right
-							color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-							implicitHeight: parent.height
-							value: appBox.modelData.audio.volume
+						CustomMouseArea {
+							Layout.bottomMargin: Appearance.padding.normal
+							Layout.fillWidth: true
+							Layout.preferredHeight: Appearance.padding.larger * 3
 
-							onMoved: {
-								Audio.setStreamVolume(appBox.modelData, value);
+							CustomSlider {
+								anchors.left: parent.left
+								anchors.right: parent.right
+								bgColor: appBox.modelData.audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+								fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+								implicitHeight: parent.height
+								insetColor: appBox.modelData.audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+								insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
+								value: appBox.modelData.audio.volume
+
+								Behavior on value {
+									Anim {
+									}
+								}
+
+								onInteraction: value => Audio.setStreamVolume(appBox.modelData, value)
+							}
+						}
+
+						CustomSwitch {
+							Layout.bottomMargin: Appearance.padding.normal
+							checked: !appBox.modelData.audio.muted
+
+							onToggled: {
+								appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
 							}
 						}
 					}

Modules/SysTray/Popouts/TrayMenuPopout.qml

@@ -13,6 +13,8 @@ StackView {
 	id: root
 
 	property int biggestWidth: 0
+	readonly property int itemHeight: 30
+	readonly property int panelRadius: ((itemHeight / 2) + Appearance.padding.small) * Appearance.rounding.scale
 	required property PopoutState popouts
 	property int rootWidth: 0
 	required property QsMenuHandle trayItem
@@ -100,10 +102,13 @@ StackView {
 					asynchronous: true
 
 					sourceComponent: Item {
-						implicitHeight: 30
+						implicitHeight: root.itemHeight
 
 						StateLayer {
-							function onClicked(): void {
+							enabled: item.modelData.enabled
+							radius: item.radius
+
+							onClicked: {
 								const entry = item.modelData;
 								if (entry.hasChildren) {
 									root.rootWidth = root.biggestWidth;
@@ -117,9 +122,6 @@ StackView {
 									root.popouts.hasCurrent = false;
 								}
 							}
-
-							disabled: !item.modelData.enabled
-							radius: item.radius
 						}
 
 						Loader {
@@ -217,13 +219,13 @@ StackView {
 						radius: Appearance.rounding.full
 
 						StateLayer {
-							function onClicked(): void {
+							color: DynamicColors.palette.m3onSecondaryContainer
+							radius: parent.radius
+
+							onClicked: {
 								root.pop();
 								root.biggestWidth = root.rootWidth;
 							}
-
-							color: DynamicColors.palette.m3onSecondaryContainer
-							radius: parent.radius
 						}
 					}
 

Modules/SysTray/Popouts/UPowerPopout.qml

@@ -3,16 +3,97 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell.Services.UPower
 import qs.Config
+import qs.Helpers
 import qs.Components
-import qs.Modules
 
-Item {
+Column {
 	id: root
 
-	required property var wrapper
+	readonly property int panelRadius: ((profiles.height / 2) + Appearance.padding.small) * Appearance.rounding.scale
 
-	implicitHeight: profiles.implicitHeight
-	implicitWidth: profiles.implicitWidth
+	spacing: Appearance.spacing.normal
+
+	Loader {
+		active: Battery.isLaptop
+
+		CustomText {
+			text: qsTr("Remaining: %1%").arg(Math.round(UPower.displayDevice.percentage * 100))
+		}
+	}
+
+	CustomText {
+		function formatSeconds(s: int, fallback: string): string {
+			const day = Math.floor(s / 86400);
+			const hr = Math.floor(s / 3600) % 60;
+			const min = Math.floor(s / 60) % 60;
+
+			let comps = [];
+			if (day > 0)
+				comps.push(`${day} days`);
+			if (hr > 0)
+				comps.push(`${hr} hours`);
+			if (min > 0)
+				comps.push(`${min} mins`);
+
+			return comps.join(", ") || fallback;
+		}
+
+		anchors.left: parent.left
+		anchors.leftMargin: Appearance.padding.normal
+		text: Battery.isLaptop ? qsTr("Time %1: %2").arg(Battery.onBattery ? "remaining" : "until charged").arg(Battery.onBattery ? formatSeconds(Battery.timeToEmpty, "Calculating...") : formatSeconds(Battery.timeToFull, "Fully charged!")) : qsTr("Power profile: %1").arg(PowerProfile.toString(PowerProfiles.profile))
+	}
+
+	Loader {
+		active: PowerProfiles.degradationReason !== PerformanceDegradationReason.None
+		anchors.horizontalCenter: parent.horizontalCenter
+		asynchronous: true
+		height: active ? ((item as Item)?.implicitHeight ?? 0) : 0
+
+		sourceComponent: CustomRect {
+			color: DynamicColors.palette.m3error
+			implicitHeight: child.implicitHeight + Appearance.padding.large
+			implicitWidth: child.implicitWidth + Appearance.padding.larger * 2
+			radius: Appearance.rounding.large
+
+			Column {
+				id: child
+
+				anchors.centerIn: parent
+
+				Row {
+					anchors.horizontalCenter: parent.horizontalCenter
+					spacing: Appearance.spacing.small
+
+					MaterialIcon {
+						anchors.verticalCenter: parent.verticalCenter
+						anchors.verticalCenterOffset: -font.pointSize / 10
+						color: DynamicColors.palette.m3onError
+						text: "warning"
+					}
+
+					CustomText {
+						anchors.verticalCenter: parent.verticalCenter
+						color: DynamicColors.palette.m3onError
+						font.family: Appearance.font.family.mono
+						text: qsTr("Performance Degraded")
+					}
+
+					MaterialIcon {
+						anchors.verticalCenter: parent.verticalCenter
+						anchors.verticalCenterOffset: -font.pointSize / 10
+						color: DynamicColors.palette.m3onError
+						text: "warning"
+					}
+				}
+
+				CustomText {
+					anchors.horizontalCenter: parent.horizontalCenter
+					color: DynamicColors.palette.m3onError
+					text: qsTr("Reason: %1").arg(PerformanceDegradationReason.toString(PowerProfiles.degradationReason))
+				}
+			}
+		}
+	}
 
 	CustomRect {
 		id: profiles
@@ -28,10 +109,9 @@ Item {
 
 		anchors.horizontalCenter: parent.horizontalCenter
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: Math.max(saver.implicitHeight, balance.implicitHeight, perf.implicitHeight) + 5 * 2 + saverLabel.contentHeight
-		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + 8 * 2 + saverLabel.contentWidth
-		// color: "transparent"
-		radius: (20 - Appearance.padding.small) * Appearance.rounding.scale
+		implicitHeight: indicator.height + Appearance.padding.extraSmall * 2
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.larger * 2 + Appearance.spacing.small * 8
+		radius: Appearance.rounding.full
 
 		CustomRect {
 			id: indicator
@@ -64,10 +144,7 @@ Item {
 				}
 			]
 			transitions: Transition {
-				AnchorAnimation {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
-					easing.type: Easing.BezierSpline
+				AnchorAnim {
 				}
 			}
 		}
@@ -76,62 +153,28 @@ Item {
 			id: saver
 
 			anchors.left: parent.left
-			anchors.leftMargin: 25
-			anchors.top: parent.top
-			anchors.topMargin: 8
-			icon: "nest_eco_leaf"
+			anchors.leftMargin: Appearance.padding.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			icon: "energy_savings_leaf"
 			profile: PowerProfile.PowerSaver
-			text: "Power Saver"
-		}
-
-		CustomText {
-			id: saverLabel
-
-			anchors.horizontalCenter: saver.horizontalCenter
-			anchors.top: saver.bottom
-			font.bold: true
-			text: saver.text
 		}
 
 		Profile {
 			id: balance
 
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.top: parent.top
-			anchors.topMargin: 8
-			icon: "power_settings_new"
+			anchors.centerIn: parent
+			icon: "balance"
 			profile: PowerProfile.Balanced
-			text: "Balanced"
-		}
-
-		CustomText {
-			id: balanceLabel
-
-			anchors.horizontalCenter: balance.horizontalCenter
-			anchors.top: balance.bottom
-			font.bold: true
-			text: balance.text
 		}
 
 		Profile {
 			id: perf
 
 			anchors.right: parent.right
-			anchors.rightMargin: 25
-			anchors.top: parent.top
-			anchors.topMargin: 8
+			anchors.rightMargin: Appearance.padding.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
 			icon: "bolt"
 			profile: PowerProfile.Performance
-			text: "Performance"
-		}
-
-		CustomText {
-			id: perfLabel
-
-			anchors.horizontalCenter: perf.horizontalCenter
-			anchors.top: perf.bottom
-			font.bold: true
-			text: perf.text
 		}
 	}
 
@@ -147,18 +190,17 @@ Item {
 	component Profile: Item {
 		required property string icon
 		required property int profile
-		required property string text
 
-		implicitHeight: icon.implicitHeight + 5 * 2
-		implicitWidth: icon.implicitHeight + 5 * 2
+		implicitHeight: icon.implicitHeight + Appearance.padding.small
+		implicitWidth: icon.implicitHeight + Appearance.padding.small
 
 		StateLayer {
-			function onClicked(): void {
-				PowerProfiles.profile = parent.profile;
-			}
-
 			color: profiles.current === parent.icon ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			radius: Appearance.rounding.full
+
+			onClicked: {
+				PowerProfiles.profile = parent.profile;
+			}
 		}
 
 		MaterialIcon {
@@ -168,10 +210,12 @@ Item {
 			color: profiles.current === text ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			fill: profiles.current === text ? 1 : 0
 			font.pointSize: Appearance.font.size.large * 2
+			grade: DynamicColors.light ? 0 : (text === "balance" ? -25 : 0)
 			text: parent.icon
 
 			Behavior on fill {
 				Anim {
+					type: Anim.DefaultEffects
 				}
 			}
 		}

Modules/SysTray/TrayItem.qml

@@ -45,14 +45,15 @@ Item {
 	CustomRect {
 		anchors.fill: parent
 		anchors.margins: 3
-		color: root.current ? DynamicColors.palette.m3primary : "transparent"
+		color: Config.general.color.scheduleDark && root.current ? DynamicColors.palette.m3primary : "transparent"
 		radius: Appearance.rounding.full
 
 		StateLayer {
 			acceptedButtons: Qt.LeftButton | Qt.RightButton
 			anchors.fill: parent
+			color: Config.general.color.scheduleDark && root.current ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
-			onClicked: {
+			onClicked: mouse => {
 				if (mouse.button === Qt.LeftButton) {
 					root.item.activate();
 					console.log(icon.source + "\n" + root.item.id);

Modules/SysTray/TrayWidget.qml

@@ -2,12 +2,10 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import Quickshell.Services.SystemTray
 import qs.Components
 import qs.Config
 import qs.Modules.SysTray.Widgets
-import qs.Modules.SysTray.Popouts
 import qs.Modules
 
 RowLayout {
@@ -17,11 +15,37 @@ RowLayout {
 	required property RowLayout loader
 	required property Wrapper popouts
 
+	function closestRowChild(row, x) {
+		let child = row.childAt(x, row.height / 2);
+		if (child)
+			return child;
+
+		let closest = null;
+		let closestDistance = Infinity;
+
+		for (let i = 0; i < row.children.length; ++i) {
+			let c = row.children[i];
+
+			if (!c.visible || c.width <= 0)
+				continue;
+
+			let centerX = c.x + c.width / 2;
+			let dist = Math.abs(x - centerX);
+
+			if (dist < closestDistance) {
+				closestDistance = dist;
+				closest = c;
+			}
+		}
+
+		return closest;
+	}
+
 	function getHoveredSubItem(localX, localY) {
 		let modPos = mapToItem(sysTrayMod, localX, localY);
 		if (sysTrayMod.contains(Qt.point(modPos.x, modPos.y))) {
 			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
-			let child = sysModRow.childAt(modRowPos.x, modRowPos.y);
+			let child = closestRowChild(sysModRow, modRowPos.x);
 			if (child) {
 				if (child.objectName === "audioWidget" && Config.barConfig.popouts.audio)
 					return {

Modules/SysTray/Widgets/AudioWidget.qml

@@ -14,6 +14,8 @@ RowLayout {
 	property color textColor: DynamicColors.palette.m3onSurface
 
 	MaterialIcon {
+		id: mic
+
 		Layout.alignment: Qt.AlignVCenter
 		animate: true
 		color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -102,20 +102,16 @@ Item {
 		active: !Battery.isLaptop
 		anchors.centerIn: parent
 
-		sourceComponent: RowLayout {
-			id: upowerIcon
-
-			MaterialIcon {
-				Layout.alignment: Qt.AlignVCenter
-				animate: true
-				fill: 1
-				text: {
-					if (PowerProfiles.profile === PowerProfile.PowerSaver)
-						return "nest_eco_leaf";
-					if (PowerProfiles.profile === PowerProfile.Performance)
-						return "bolt";
-					return "power_settings_new";
-				}
+		sourceComponent: MaterialIcon {
+			Layout.alignment: Qt.AlignVCenter
+			animate: true
+			fill: 1
+			text: {
+				if (PowerProfiles.profile === PowerProfile.PowerSaver)
+					return "energy_savings_leaf";
+				if (PowerProfiles.profile === PowerProfile.Performance)
+					return "bolt";
+				return "balance";
 			}
 		}
 	}

Modules/Wallpaper/WallBackground.qml

@@ -11,82 +11,98 @@ import ZShell.Internal
 Item {
 	id: root
 
+	property bool completed
+	property real cropHeight: displayData.height ?? 1.0
+	property real cropWidth: displayData.width ?? 1.0
+	property real cropX: displayData.x ?? 0.0
+	property real cropY: displayData.y ?? 0.0
+	property WallpaperImage current
+	readonly property var displayData: Wallpapers.getCrop(screen.name)
 	required property ShellScreen screen
+	property size screenResolution: Qt.size(screen.width * screenScale, screen.height * screenScale)
+	property real screenScale: Hyprland.monitorFor(screen).scale
 	property string source: Wallpapers.current
 
-	function refreshData(): void {
-		Hyprland.refreshMonitors();
-		let scale = Hyprland.monitorFor(root.screen).scale;
-		if (scale <= 0)
-			scale = 1.0; // Fallback to avoid zeroes on initialization
-
-		if (root.screen.width > 0 && root.screen.height > 0) {
-			img.screenResolution = Qt.size(root.screen.width * scale, root.screen.height * scale);
-		}
-
-		const displayData = Wallpapers.getCrop(root.screen.name);
-
-		if (displayData) {
-			img.cropX = displayData.x !== undefined ? displayData.x : 0.0;
-			img.cropY = displayData.y !== undefined ? displayData.y : 0.0;
-			img.cropWidth = (displayData.width !== undefined && displayData.width > 0) ? displayData.width : 1.0;
-			img.cropHeight = (displayData.height !== undefined && displayData.height > 0) ? displayData.height : 1.0;
-		}
-	}
-
 	anchors.fill: parent
 
-	Component.onCompleted: root.refreshData()
+	Component.onCompleted: {
+		Hyprland.refreshMonitors();
 
-	Connections {
-		function onHeightChanged() {
-			root.refreshData();
-		}
-
-		function onWidthChanged() {
-			root.refreshData();
-		}
-
-		target: root.screen
+		if (source)
+			Qt.callLater(() => {
+				current = imgComp.createObject(this, {
+					source
+				});
+				completed = true;
+			});
+	}
+	onSourceChanged: {
+		if (!source)
+			current = null;
+		else
+			current = imgComp.createObject(this, {
+				source: source
+			});
 	}
 
-	WallpaperImage {
-		id: img
+	Component {
+		id: imgComp
 
-		anchors.fill: parent
-		source: root.source
+		WallpaperImage {
+			id: img
 
-		Behavior on cropHeight {
-			Anim {
-			}
-		}
-		Behavior on cropWidth {
-			Anim {
-			}
-		}
-		Behavior on cropX {
-			Anim {
-			}
-		}
-		Behavior on cropY {
-			Anim {
-			}
-		}
-		Behavior on zoom {
-			Anim {
-			}
-		}
+			anchors.fill: parent
+			cropHeight: root.cropHeight
+			cropWidth: root.cropWidth
+			cropX: root.cropX
+			cropY: root.cropY
+			opacity: 0
+			screenResolution: root.screenResolution
+			source: root.source
 
-		Connections {
-			function onAdapterUpdated(): void {
-				root.refreshData();
+			Behavior on cropHeight {
+				Anim {
+					id: heightAnim
+				}
+			}
+			Behavior on cropWidth {
+				Anim {
+					id: widthAnim
+				}
+			}
+			Behavior on cropX {
+				Anim {
+					id: xAnim
+				}
+			}
+			Behavior on cropY {
+				Anim {
+					id: yAnim
+				}
+			}
+			Anim on opacity {
+				id: anim
+
+				from: 0
+				running: false
+				to: 1
+				type: Anim.SlowEffects
 			}
 
-			function onLoaded(): void {
-				root.refreshData();
+			onStatusChanged: {
+				if (status === Image.Ready) {
+					anim.start();
+				}
 			}
 
-			target: Wallpapers.monitorCrops
+			Timer {
+				id: destroyTimer
+
+				interval: anim.duration * 2
+				running: root.current !== img && root.current?.status === Image.Ready
+
+				onTriggered: Qt.callLater(() => img.destroy())
+			}
 		}
 	}
 }

Modules/Wrapper.qml

@@ -27,7 +27,6 @@ Item {
 		detachedMode = "";
 	}
 
-	focus: hasCurrent
 	implicitHeight: nonAnimHeight
 	implicitWidth: nonAnimWidth