remove old Settings, rename new

Modules/Settings/Common/AudioDeviceList.qml

@@ -0,0 +1,96 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs.Components
+import qs.Config
+
+ItemList {
+	id: root
+
+	property int currentId: -1
+	property string iconName: "speaker"
+	property var nodes: []
+
+	signal selected(node: PwNode)
+
+	last: true
+	showList: true
+
+	delegate: Item {
+		id: device
+
+		readonly property bool active: device.modelData?.id === root.currentId
+		required property int index
+		required property PwNode modelData
+
+		anchors.left: root.list.contentItem.left
+		anchors.right: root.list.contentItem.right
+		implicitHeight: deviceLayout.implicitHeight + deviceLayout.anchors.margins * 2
+
+		StateLayer {
+			bottomLeftRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
+			bottomRightRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
+			radius: Appearance.rounding.extraSmall
+
+			onClicked: root.selected(device.modelData)
+		}
+
+		RowLayout {
+			id: deviceLayout
+
+			anchors.fill: parent
+			anchors.leftMargin: Appearance.padding.largeIncreased
+			anchors.margins: Appearance.padding.large
+			anchors.rightMargin: Appearance.padding.largeIncreased
+			spacing: Appearance.spacing.normal
+
+			CustomRect {
+				color: device.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+				implicitHeight: devIcon.implicitHeight + Appearance.padding.normal * 2
+				implicitWidth: implicitHeight
+				radius: Appearance.rounding.full
+
+				MaterialIcon {
+					id: devIcon
+
+					anchors.centerIn: parent
+					color: device.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+					fill: device.active ? 1 : 0
+					font.pointSize: Appearance.font.size.large
+					text: root.iconName
+
+					Behavior on fill {
+						Anim {
+						}
+					}
+				}
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.smaller
+				text: device.modelData?.description || device.modelData?.name || qsTr("Unknown")
+			}
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3primary
+				font.pointSize: Appearance.font.size.large
+				opacity: device.active ? 1 : 0
+				text: "check"
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.DefaultEffects
+					}
+				}
+			}
+		}
+	}
+	model: ScriptModel {
+		values: [...root.nodes].sort((a, b) => (a.description || a.name || "").localeCompare(b.description || b.name || ""))
+	}
+}

Modules/Settings/Common/BlobPopup.qml

@@ -0,0 +1,128 @@
+import QtQuick
+import ZShell.Blobs
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property real animDriver
+	property alias color: blobGroup.color
+	default required property Item content
+	property bool hoverOverride
+	readonly property alias hovered: btn.containsMouse
+	property alias icon: icon.text
+	property bool open
+	property int padding
+	property bool pressOverride
+	property int topMovement: Appearance.padding.large
+
+	implicitHeight: btn.implicitHeight * 0.9
+	implicitWidth: btn.implicitWidth * 0.9
+
+	Binding {
+		property: "opacity"
+		target: root.content
+		value: root.animDriver
+	}
+
+	BlobGroup {
+		id: blobGroup
+
+		color: DynamicColors.palette.m3surfaceContainerHighest
+		cornerFill: false
+		smoothing: Appearance.rounding.medium
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+	}
+
+	BlobRect {
+		id: btnRect
+
+		anchors.fill: parent
+		anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Appearance.padding.extraSmall : 0) + (root.open ? -Appearance.padding.extraSmall : 0)
+		group: blobGroup
+		radius: root.open ? Appearance.rounding.large : Appearance.rounding.medium
+
+		Behavior on anchors.margins {
+			Anim {
+			}
+		}
+		Behavior on radius {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+
+	BlobRect {
+		id: rect
+
+		anchors.right: parent.right
+		anchors.top: parent.top
+		deformScale: 0.00001
+		group: blobGroup
+		implicitHeight: parent.height
+		implicitWidth: parent.width
+		radius: Appearance.rounding.small + Appearance.padding.small
+
+		states: State {
+			name: "open"
+			when: root.open
+
+			PropertyChanges {
+				rect.anchors.rightMargin: root.width - Appearance.spacing.small
+				rect.anchors.topMargin: -root.topMovement
+				rect.implicitHeight: root.content.implicitHeight + root.padding * 2
+				rect.implicitWidth: root.content.implicitWidth + root.padding * 2
+				root.animDriver: 1
+			}
+		}
+		transitions: Transition {
+			Anim {
+				properties: "rightMargin,implicitWidth"
+			}
+
+			Anim {
+				duration: Appearance.anim.durations.expressiveFastEffects
+				easing.bezierCurve: Appearance.anim.curves.expressiveFastEffects
+				properties: "topMargin,implicitHeight"
+			}
+
+			Anim {
+				property: "animDriver"
+				type: Anim.DefaultEffects
+			}
+		}
+
+		MouseArea { // MouseArea to catch inputs
+			anchors.fill: parent
+			children: [root.content]
+			clip: true
+		}
+	}
+
+	MouseArea {
+		id: btn
+
+		anchors.centerIn: parent
+		cursorShape: Qt.PointingHandCursor
+		hoverEnabled: true
+		implicitHeight: icon.implicitHeight + Appearance.padding.extraSmall * 2
+		implicitWidth: implicitHeight
+
+		onClicked: root.open = !root.open
+
+		MaterialIcon {
+			id: icon
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.medium
+			text: "view_apps"
+		}
+	}
+}

Modules/Settings/Common/ConnectedRect.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import qs.Components
+import qs.Config
+
+CustomRect {
+	property bool first
+	property bool last
+
+	bottomLeftRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
+	bottomRightRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
+	color: DynamicColors.tPalette.m3surfaceContainer
+	topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
+	topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
+}

Modules/Settings/Common/InfoRow.qml

@@ -0,0 +1,78 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property string icon
+	property color iconColor: DynamicColors.palette.m3onSurfaceVariant
+	property alias label: label.text
+	property Component leadingComponent: icon ? iconComp : null
+	property string subtext
+	property alias value: value.text
+
+	Layout.fillWidth: true
+	implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins * 2
+
+	Component {
+		id: iconComp
+
+		MaterialIcon {
+			color: root.iconColor
+			font.pointSize: Appearance.font.size.small
+			text: root.icon
+		}
+	}
+
+	RowLayout {
+		id: rowLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.larger
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.small
+
+		Loader {
+			active: root.leadingComponent
+			sourceComponent: root.leadingComponent
+			visible: root.leadingComponent
+		}
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				text: root.subtext
+				visible: root.subtext
+			}
+		}
+
+		CustomText {
+			id: value
+
+			Layout.maximumWidth: root.width / 2
+			color: DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			font.pointSize: Appearance.font.size.small
+			horizontalAlignment: Text.AlignRight
+		}
+	}
+}

Modules/Settings/Common/ItemList.qml

@@ -0,0 +1,116 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property alias delegate: list.delegate
+	property int extraHeight
+	readonly property alias list: list
+	property alias model: list.model
+	property string placeholderIcon
+	property string placeholderText
+	property bool showList
+
+	Layout.fillWidth: true
+	clip: true
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Appearance.padding.extraLarge * 2) + extraHeight
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+
+	Loader {
+		id: placeholder
+
+		active: opacity > 0
+		anchors.centerIn: parent
+		opacity: root.showList && list.count > 0 ? 0 : 1
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		sourceComponent: ColumnLayout {
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialIcon {
+				Layout.alignment: Qt.AlignHCenter
+				animate: true
+				color: DynamicColors.palette.m3outline
+				font.pointSize: Appearance.font.size.large
+				text: root.placeholderIcon
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignHCenter
+				animate: true
+				color: DynamicColors.palette.m3outline
+				font.pointSize: Appearance.font.size.large
+				text: root.placeholderText
+			}
+		}
+	}
+
+	ListView {
+		id: list
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		interactive: false
+		opacity: root.showList ? 1 : 0
+		spacing: 0
+
+		add: Transition {
+			Anim {
+				from: 0
+				property: "opacity"
+				to: 1
+				type: Anim.DefaultEffects
+			}
+		}
+		displaced: Transition {
+			Anim {
+				property: "opacity"
+				to: 1
+				type: Anim.DefaultEffects
+			}
+
+			Anim {
+				property: "y"
+			}
+		}
+		move: Transition {
+			Anim {
+				property: "opacity"
+				to: 1
+				type: Anim.DefaultEffects
+			}
+
+			Anim {
+				property: "y"
+			}
+		}
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		remove: Transition {
+			Anim {
+				property: "opacity"
+				to: 0
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+}

Modules/Settings/Common/NavRow.qml

@@ -0,0 +1,70 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property alias icon: icon.text
+	property alias status: status.text
+	property alias text: label.text
+
+	signal clicked
+
+	Layout.fillWidth: true
+	implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2
+
+	StateLayer {
+		onClicked: root.clicked()
+	}
+
+	RowLayout {
+		id: navLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.normal
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.normal
+
+		MaterialIcon {
+			id: icon
+
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.large
+		}
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+			}
+
+			CustomText {
+				id: status
+
+				Layout.fillWidth: true
+				animate: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				visible: text
+			}
+		}
+
+		MaterialIcon {
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.medium
+			text: "chevron_right"
+		}
+	}
+}

Modules/Settings/Common/OverlayRow.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+import qs.Modules.Settings
+
+ConnectedRect {
+	id: root
+
+	property alias checked: switchButton.checked
+	property int horizontalPadding: Appearance.padding.largeIncreased
+	required property Component popup
+	property alias subtext: subtext.text
+	property alias text: text.text
+	property int verticalPadding: Appearance.padding.normal
+
+	signal clicked(checked: bool)
+
+	Layout.fillWidth: true
+	implicitHeight: layout.implicitHeight + verticalPadding * 2
+
+	Column {
+		id: layout
+
+		anchors.left: parent.left
+		anchors.leftMargin: root.horizontalPadding
+		anchors.right: icon.left
+		anchors.rightMargin: Appearance.padding.normal
+		anchors.verticalCenter: parent.verticalCenter
+
+		CustomText {
+			id: text
+
+			font.pointSize: Appearance.font.size.smaller
+		}
+
+		CustomText {
+			id: subtext
+
+			color: DynamicColors.palette.m3outline
+			font.pointSize: Appearance.font.size.small
+			wrapMode: Text.WordWrap
+		}
+	}
+
+	MaterialIcon {
+		id: icon
+
+		anchors.right: switchButton.left
+		anchors.rightMargin: Appearance.spacing.normal
+		anchors.verticalCenter: parent.verticalCenter
+		text: "open_in_new"
+	}
+
+	StateLayer {
+		onClicked: PopupManager.requestOpen(root.popup)
+	}
+
+	CustomSwitch {
+		id: switchButton
+
+		anchors.right: parent.right
+		anchors.rightMargin: root.horizontalPadding
+		anchors.verticalCenter: parent.verticalCenter
+
+		onClicked: root.clicked(checked)
+	}
+}

Modules/Settings/Common/PageBase.qml

@@ -0,0 +1,76 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Modules.Settings
+import qs.Components
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	readonly property int cappedWidth: Math.min(800, width)
+	default property Item contentChild
+	readonly property alias flickable: flickable
+	property bool isSubPage
+	required property SettingsState sState
+	required property string title
+
+	spacing: Appearance.spacing.large
+
+	MouseArea { // Prevent clicks from reaching flickable
+		Layout.bottomMargin: -flickable.topMargin // Extra height to block clicks on flickable top margin
+
+		implicitHeight: header.implicitHeight - Layout.bottomMargin
+		implicitWidth: header.implicitWidth
+		z: 1
+
+		onClicked: focus = true
+
+		RowLayout {
+			id: header
+
+			spacing: Appearance.spacing.large
+
+			Loader {
+				active: root.isSubPage
+				asynchronous: true
+				visible: active
+
+				sourceComponent: IconButton {
+					icon: "arrow_back"
+					inactiveColor: DynamicColors.tPalette.m3surfaceContainerHigh
+					inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+					isRound: true
+					type: IconButton.Tonal
+
+					onClicked: root.sState.closeSubPage()
+				}
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.large
+				text: root.title
+			}
+		}
+	}
+
+	VerticalFadeFlickable {
+		id: flickable
+
+		Layout.fillHeight: true
+		Layout.fillWidth: true
+		Layout.topMargin: -topMargin
+		bottomMargin: Appearance.padding.extraLarge
+		contentHeight: root.contentChild?.implicitHeight ?? 0
+		contentItem.children: [root.contentChild]
+		fadeAmount: 0.1
+		topMargin: Appearance.padding.large
+
+		TapHandler {
+			onTapped: flickable.focus = true
+		}
+	}
+}

Modules/Settings/Common/PopupRow.qml

@@ -0,0 +1,121 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Components
+import qs.Config
+import qs.Drawers
+
+ConnectedRect {
+	id: root
+
+	default required property Item content
+	property alias icon: icon.text
+	property bool keepPopupAsChild
+	readonly property alias popup: popup
+	property alias status: status.text
+	property alias text: label.text
+
+	Layout.fillWidth: true
+	implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2
+
+	StateLayer {
+		id: stateLayer
+
+		manualHoverOverride: popup.hovered && !popup.open
+
+		onClicked: popup.open = true
+	}
+
+	RowLayout {
+		id: navLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.normal
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.normal
+
+		MaterialIcon {
+			id: icon
+
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.larger
+		}
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+			}
+
+			CustomText {
+				id: status
+
+				Layout.fillWidth: true
+				animate: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				visible: text
+			}
+		}
+
+		Item {
+			id: triggerArea
+
+			implicitHeight: popup.implicitHeight
+			implicitWidth: popup.implicitWidth
+
+			TransformWatcher {
+				id: tWatcher
+
+				a: area.parent
+				b: triggerArea
+			}
+
+			MouseArea {
+				id: area
+
+				anchors.fill: parent
+				cursorShape: popup.open ? Qt.ArrowCursor : undefined
+				enabled: popup.open
+				hoverEnabled: popup.open
+				parent: {
+					if (root.keepPopupAsChild)
+						return triggerArea;
+
+					const win = QsWindow.window;
+					const contentWin = win as Windows; // If inside the drawer content window, put it inside the interaction wrapper so hover works
+					return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
+				}
+				z: popup.animDriver > 0 ? 1 : 0
+
+				onClicked: popup.open = false
+
+				BlobPopup {
+					id: popup
+
+					color: open || hovered || stateLayer.containsMouse ? DynamicColors.palette.m3secondaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					content: root.content
+					hoverOverride: stateLayer.containsMouse
+					padding: Appearance.padding.small
+					pressOverride: stateLayer.pressed
+					x: {
+						tWatcher.transform;
+						return triggerArea.mapToItem(area.parent, 0, 0).x;
+					}
+					y: {
+						tWatcher.transform;
+						return triggerArea.mapToItem(area.parent, 0, 0).y;
+					}
+				}
+			}
+		}
+	}
+}

Modules/Settings/Common/SectionHeader.qml

@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomText {
+	property bool first
+
+	Layout.bottomMargin: Appearance.spacing.extraSmall
+	Layout.fillWidth: true
+	Layout.leftMargin: Appearance.padding.small
+	Layout.topMargin: first ? 0 : Appearance.spacing.large - ((parent as ColumnLayout).spacing ?? 0)
+	color: DynamicColors.palette.m3onSurfaceVariant
+	elide: Text.ElideRight
+	font.pointSize: Appearance.font.size.medium
+}

Modules/Settings/Common/SelectRow.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property alias active: splitButton.active
+	property alias fallbackIcon: splitButton.fallbackIcon
+	property alias fallbackText: splitButton.fallbackText
+	property alias menuItems: splitButton.menuItems
+	property alias menuOnTop: splitButton.menuOnTop
+	property string subtext
+	property alias text: label.text
+
+	signal selected(item: MenuItem)
+
+	Layout.fillWidth: true
+	clip: false
+	implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins * 2
+	z: splitButton.expanded ? 1 : 0
+
+	RowLayout {
+		id: rowLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.normal
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.small
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.smaller
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				text: root.subtext
+				visible: root.subtext
+			}
+		}
+
+		CustomSplitButton {
+			id: splitButton
+
+			type: CustomSplitButton.Tonal
+
+			menu.onItemSelected: item => root.selected(item)
+			stateLayer.onClicked: splitButton.expanded = !splitButton.expanded
+		}
+	}
+}

Modules/Settings/Common/SliderRow.qml

@@ -0,0 +1,81 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property alias icon: slider.insetIcon
+	property alias label: label.text
+	property real value
+	property alias valueLabel: valueLabel.text
+
+	signal moved(value: real)
+
+	Layout.fillWidth: true
+	implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins + rowLayout.anchors.topMargin
+
+	RowLayout {
+		id: rowLayout
+
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.topMargin: Appearance.padding.large
+		spacing: Appearance.spacing.small
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.small
+
+			RowLayout {
+				Layout.fillWidth: true
+				spacing: Appearance.spacing.small
+
+				CustomText {
+					id: label
+
+					Layout.fillWidth: true
+					elide: Text.ElideRight
+					font.pointSize: Appearance.font.size.small
+				}
+
+				CustomText {
+					id: valueLabel
+
+					color: DynamicColors.palette.m3outline
+					font.pointSize: Appearance.font.size.small
+				}
+			}
+
+			CustomMouseArea {
+				function onWheel(event: WheelEvent): void {
+					const step = Config.services.audioIncrement;
+					if (event.angleDelta.y > 0)
+						root.moved(Math.min(1, root.value + step));
+					else if (event.angleDelta.y < 0)
+						root.moved(Math.max(0, root.value - step));
+				}
+
+				Layout.fillWidth: true
+				implicitHeight: Appearance.padding.larger * 3
+
+				CustomSlider {
+					id: slider
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					anchors.verticalCenter: parent.verticalCenter
+					enabled: root.enabled
+					implicitHeight: parent.implicitHeight
+					radius: Appearance.rounding.small
+					value: root.value
+
+					onInteraction: v => root.moved(v)
+				}
+			}
+		}
+	}
+}

Modules/Settings/Common/SpinRow.qml

@@ -0,0 +1,63 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property real from: 0
+	property real stepSize: 1
+	property string subtext
+	property alias text: label.text
+	property real to: 99
+	property real value
+
+	signal moved(value: real)
+
+	Layout.fillWidth: true
+	implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins * 2
+
+	RowLayout {
+		id: rowLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.normal
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.small
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.smaller
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				text: root.subtext
+				visible: root.subtext
+			}
+		}
+
+		CustomSpinBox {
+			from: root.from
+			stepSize: root.stepSize
+			to: root.to
+			value: root.value
+
+			onValueModified: root.moved(value)
+		}
+	}
+}

Modules/Settings/Common/StackPage.qml

@@ -0,0 +1,125 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Components
+import qs.Modules.Settings
+import qs.Config
+
+StackView {
+	id: root
+
+	readonly property int animMovement: Appearance.padding.extraLarge * 2
+	default property list<Component> pages
+	required property SettingsState sState
+
+	function openSubPage(idx: int, immediate: bool): void {
+		const page = pages[idx];
+		if (page) {
+			push(page, {
+				sState
+			}, immediate ? StackView.Immediate : StackView.PushTransition);
+		} else {
+			console.warn(logCat, "Attempted to open invalid sub-page index", idx);
+			sState.closeSubPage();
+		}
+	}
+
+	clip: busy
+
+	popEnter: Transition {
+		SequentialAnimation {
+			PropertyAction {
+				property: "opacity"
+				value: 0
+			}
+
+			PauseAnimation {
+				duration: Appearance.anim.durations.expressiveEffects
+			}
+
+			ParallelAnimation {
+				Anim {
+					property: "opacity"
+					to: 1
+					type: Anim.SlowEffects
+				}
+
+				Anim {
+					from: -root.animMovement
+					property: "x"
+					to: 0
+					type: Anim.SlowEffects
+				}
+			}
+		}
+	}
+	popExit: Transition {
+		Anim {
+			property: "opacity"
+			to: 0
+			type: Anim.DefaultEffects
+		}
+	}
+	pushEnter: Transition {
+		SequentialAnimation {
+			PropertyAction {
+				property: "opacity"
+				value: 0
+			}
+
+			PauseAnimation {
+				duration: Appearance.anim.durations.expressiveEffects
+			}
+
+			ParallelAnimation {
+				Anim {
+					property: "opacity"
+					to: 1
+					type: Anim.SlowEffects
+				}
+
+				Anim {
+					from: root.animMovement
+					property: "x"
+					to: 0
+					type: Anim.SlowEffects
+				}
+			}
+		}
+	}
+	pushExit: Transition {
+		Anim {
+			property: "opacity"
+			to: 0
+			type: Anim.DefaultEffects
+		}
+	}
+
+	Component.onCompleted: {
+		openSubPage(0, true);
+		for (const page of sState.subPageIdxStack)
+			openSubPage(page, true);
+	}
+
+	LoggingCategory {
+		id: logCat
+
+		defaultLogLevel: LoggingCategory.Info
+		name: "ZShell.settings"
+	}
+
+	Connections {
+		function onSubPageClosed(): void {
+			if (root.depth < root.sState.subPageIdxStack.length) {
+				console.log(logCat, "Attempted to close page while depth < stack depth. Ignoring.");
+				return;
+			}
+			root.pop();
+		}
+
+		function onSubPageOpened(idx: int): void {
+			root.openSubPage(idx, false);
+		}
+
+		target: root.sState
+	}
+}

Modules/Settings/Common/TimeInput.qml

@@ -0,0 +1,581 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Components
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+CustomClippingRect {
+	id: root
+
+	required property var object
+	required property list<string> settings
+	property bool shouldBeActive: true
+
+	signal applySettings(startTime: int, endTime: int)
+	signal close
+
+	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;
+	}
+
+	color: DynamicColors.palette.m3surfaceContainer
+	implicitHeight: column.implicitHeight + column.anchors.margins * 2 + buttonRow.implicitHeight + buttonRow.anchors.topMargin
+	implicitWidth: column.implicitWidth + column.anchors.margins * 2
+	radius: Appearance.rounding.large
+
+	ColumnLayout {
+		id: column
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.top: parent.top
+		spacing: Appearance.spacing.normal
+
+		CustomText {
+			text: qsTr("Select time")
+		}
+
+		RowLayout {
+			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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+						}
+					}
+				}
+
+				TextFieldBase {
+					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
+					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
+					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 {
+			CustomText {
+				Layout.preferredWidth: spacer.x + spacer.width
+				text: qsTr("Start")
+			}
+
+			CustomText {
+				Layout.preferredWidth: endMinuteRect.width + endHourRect.width
+				text: qsTr("End")
+			}
+		}
+	}
+
+	RowLayout {
+		id: buttonRow
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.top: column.bottom
+		anchors.topMargin: Appearance.spacing.normal
+
+		Item {
+			id: buttonSpacer
+
+			Layout.fillWidth: true
+		}
+
+		ButtonRow {
+			spacing: Appearance.spacing.normal
+
+			IconTextButton {
+				font.pointSize: Appearance.font.size.normal
+				icon: "close"
+				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+				text: "Cancel"
+
+				onClicked: root.close()
+			}
+
+			IconTextButton {
+				font.pointSize: Appearance.font.size.normal
+				icon: "check"
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+				text: "Apply"
+
+				onClicked: {
+					const start = root.convertToMinutes(parseInt(startHourField.text)) + parseInt(startMinuteField.text);
+					const end = root.convertToMinutes(parseInt(endHourField.text)) + parseInt(endMinuteField.text);
+					root.applySettings(start, end);
+				}
+			}
+		}
+	}
+}

Modules/Settings/Common/ToggleRow.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomSwitch {
+	id: root
+
+	readonly property alias bg: bg
+	property alias first: bg.first
+	property alias last: bg.last
+	property string subtext
+
+	Layout.fillWidth: true
+	cLayer: 2
+	horizontalPadding: Appearance.padding.largeIncreased
+	implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
+	implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
+	indicator.anchors.right: right
+	indicator.anchors.rightMargin: root.horizontalPadding
+	indicator.anchors.verticalCenter: verticalCenter
+	verticalPadding: Appearance.padding.normal
+
+	background: ConnectedRect {
+		id: bg
+
+		StateLayer {
+			id: stateLayer
+
+			manualPressOverride: root.pressed
+		}
+	}
+	contentItem: Item {
+		anchors.left: parent.left
+		anchors.leftMargin: root.horizontalPadding
+		anchors.right: root.indicator.left
+		anchors.rightMargin: Appearance.spacing.normal
+		implicitHeight: column.implicitHeight
+		implicitWidth: column.implicitWidth
+
+		Column {
+			id: column
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				elide: Text.ElideRight
+				font: {
+					const f = Qt.font(label.font);
+					f.pointSize = Appearance.font.size.smaller;
+					return f;
+				}
+				text: root.text
+			}
+
+			CustomText {
+				id: subtext
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font: {
+					const f = Qt.font(subtext.font);
+					f.pointSize = Appearance.font.size.small;
+					return f;
+				}
+				text: root.subtext
+				visible: root.subtext
+			}
+		}
+	}
+
+	onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
+}

Modules/Settings/Common/WallItem.qml

@@ -0,0 +1,62 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property alias imgHeight: imgWrapper.implicitHeight
+	property alias radius: imgWrapper.radius
+	property alias source: img.source
+
+	signal clicked
+
+	Layout.fillWidth: true
+	implicitHeight: layout.implicitHeight
+
+	ColumnLayout {
+		id: layout
+
+		anchors.fill: parent
+		spacing: Appearance.spacing.small
+
+		CustomClippingRect {
+			id: imgWrapper
+
+			Layout.fillWidth: true
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitHeight: width
+			radius: Appearance.rounding.large
+
+			Image {
+				id: img
+
+				anchors.fill: parent
+				asynchronous: true
+				fillMode: Image.PreserveAspectCrop
+				opacity: status === Image.Ready ? 1 : 0
+				retainWhileLoading: true
+				sourceSize: {
+					const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+					return Qt.size(width * dpr, height * dpr);
+				}
+
+				Behavior on opacity {
+					Anim {
+						type: Anim.SlowEffects
+					}
+				}
+			}
+		}
+	}
+
+	StateLayer {
+		anchors.bottomMargin: layout.implicitHeight - imgWrapper.implicitHeight
+
+		onClicked: root.clicked()
+	}
+}

Modules/Settings/Common/WallpaperCropper.qml

@@ -0,0 +1,342 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import ZShell.Components
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+Item {
+	id: wrapper
+
+	property int buttonRowHeight: Appearance.padding.large * 3
+	property bool changesMade: false
+	readonly property var currentScreen: screens.length > selectedScreenIndex ? screens[selectedScreenIndex] : null
+	property var screens: []
+	property int selectedScreenIndex: 0
+	property bool shouldBeActive: true
+
+	function applyCrop(): void {
+		if (!cropRectLoader.item || !currentScreen)
+			return;
+
+		const cropRect = cropRectLoader.item;
+
+		const cropXPercent = (cropRect.x - cropRect.imageX) / scaledImg.paintedWidth;
+		const cropYPercent = (cropRect.y - cropRect.imageY) / scaledImg.paintedHeight;
+		const cropWidthPercent = cropRect.width / scaledImg.paintedWidth;
+		const cropHeightPercent = cropRect.height / scaledImg.paintedHeight;
+
+		Wallpapers.setCrop(currentScreen.name, Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent), cropRect.zoom);
+	}
+
+	function refreshScreens(): void {
+		screens = [...Quickshell.screens].sort((a, b) => a.x - b.x);
+		selectedScreenIndex = 0;
+	}
+
+	function selectScreen(index: int): void {
+		if (index < 0 || index >= screens.length || index === selectedScreenIndex)
+			return;
+
+		selectedScreenIndex = index;
+
+		if (cropRectLoader.item)
+			Qt.callLater(syncCropToScreen);
+	}
+
+	function syncCropToScreen(): void {
+		if (cropRectLoader.item)
+			cropRectLoader.item.restoreFromData();
+	}
+
+	function zoomClipRect(zoom: real): void {
+		if (!cropRectLoader.item)
+			return;
+
+		const cropRect = cropRectLoader.item;
+
+		const centerX = cropRect.x + cropRect.width * 0.5;
+		const centerY = cropRect.y + cropRect.height * 0.5;
+
+		cropRect.zoom = zoom;
+
+		cropRect.x = centerX - cropRect.width * 0.5;
+		cropRect.y = centerY - cropRect.height * 0.5;
+
+		cropRect.clampToBounds();
+	}
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? 430 : 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 {
+		}
+	}
+
+	Component.onCompleted: {
+		refreshScreens();
+		Qt.callLater(syncCropToScreen);
+	}
+	onSelectedScreenIndexChanged: {
+		Qt.callLater(syncCropToScreen);
+	}
+
+	IconButton {
+		anchors.margins: Appearance.padding.normal
+		anchors.right: parent.right
+		anchors.top: parent.top
+		icon: "check"
+		opacity: wrapper.changesMade ? 1 : 0
+		scale: wrapper.changesMade ? 1 : 0
+		z: 2
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
+			}
+		}
+
+		onClicked: {
+			wrapper.applyCrop();
+			wrapper.changesMade = false;
+		}
+	}
+
+	ButtonRow {
+		id: screenSelector
+
+		anchors.bottom: scaledImg.top
+		anchors.bottomMargin: Appearance.spacing.normal
+		anchors.left: parent.left
+		anchors.leftMargin: Appearance.padding.extraLarge * 2
+		anchors.right: parent.right
+		anchors.rightMargin: Appearance.padding.extraLarge * 2
+		anchors.top: parent.top
+		spacing: Appearance.spacing.small
+
+		Repeater {
+			model: wrapper.screens
+
+			delegate: TextButton {
+				required property int index
+				readonly property bool isCurrent: wrapper.selectedScreenIndex === index
+				required property var modelData
+
+				fillWidth: true
+				inactiveColor: isCurrent ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3surfaceContainer, 0.7)
+				inactiveOnColor: isCurrent ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+				isRound: true
+				shapeMorph: true
+				text: modelData.name
+
+				onClicked: wrapper.selectScreen(index)
+			}
+		}
+	}
+
+	RowLayout {
+		id: sliderLayout
+
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		implicitHeight: 30
+
+		CustomSlider {
+			id: zoomSlider
+
+			Layout.fillWidth: true
+			Layout.leftMargin: Appearance.padding.normal
+			Layout.preferredHeight: Appearance.padding.larger * 3
+			Layout.rightMargin: Appearance.padding.normal
+			from: 1.0
+			implicitHeight: Appearance.padding.larger * 3
+			insetIcon: "crop"
+			to: 5.0
+			value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
+
+			onInteraction: value => {
+				wrapper.zoomClipRect(1 + (value * 4));
+				wrapper.changesMade = true;
+			}
+		}
+	}
+
+	Image {
+		id: scaledImg
+
+		property var displayData
+		property real monitorScale: 1.0
+
+		anchors.bottom: sliderLayout.top
+		anchors.bottomMargin: Appearance.spacing.normal
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.topMargin: wrapper.buttonRowHeight + Appearance.spacing.normal
+		// anchors.top: screenSelector.bottom
+		asynchronous: true
+		fillMode: Image.PreserveAspectFit
+		retainWhileLoading: true
+		source: Wallpapers.current
+		sourceSize.height: parent.height
+		sourceSize.width: parent.width
+
+		onPaintedWidthChanged: {
+			if (paintedWidth > 0 && cropRectLoader.item) {
+				if (!wrapper.screens.length)
+					wrapper.refreshScreens();
+
+				wrapper.syncCropToScreen();
+			}
+		}
+		onSourceChanged: {
+			if (cropRectLoader.item) {
+				if (!wrapper.screens.length)
+					wrapper.refreshScreens();
+
+				wrapper.syncCropToScreen();
+			}
+		}
+		onStatusChanged: {
+			if (scaledImg.status == Image.Ready && cropRectLoader.item) {
+				if (!wrapper.screens.length)
+					wrapper.refreshScreens();
+
+				wrapper.syncCropToScreen();
+			}
+		}
+
+		Loader {
+			id: cropRectLoader
+
+			active: scaledImg.status === Image.Ready
+
+			sourceComponent: Component {
+				CustomRect {
+					id: cropRect
+
+					property real aspectRatio: wrapper.currentScreen ? wrapper.currentScreen.width / wrapper.currentScreen.height : 1
+					readonly property real baseHeight: baseWidth / aspectRatio
+					readonly property real baseWidth: {
+						let fittedHeight = scaledImg.paintedHeight;
+						let fittedWidth = fittedHeight * aspectRatio;
+
+						if (fittedWidth > scaledImg.paintedWidth) {
+							fittedWidth = scaledImg.paintedWidth;
+							fittedHeight = fittedWidth / aspectRatio;
+						}
+
+						return fittedWidth;
+					}
+					readonly property real imageX: (scaledImg.width - scaledImg.paintedWidth) / 2
+					readonly property real imageY: (scaledImg.height - scaledImg.paintedHeight) / 2
+					property real imgAspectRatio: scaledImg.paintedWidth / scaledImg.paintedHeight
+					property real zoom: 1.0
+
+					function centerInImage() {
+						x = imageX + (scaledImg.paintedWidth - width) / 2;
+						y = imageY + (scaledImg.paintedHeight - height) / 2;
+					}
+
+					function clampToBounds() {
+						x = Math.max(imageX, Math.min(x, imageX + scaledImg.paintedWidth - width));
+						y = Math.max(imageY, Math.min(y, imageY + scaledImg.paintedHeight - height));
+					}
+
+					function restoreFromData() {
+						let data = Wallpapers.getCrop(wrapper.currentScreen.name);
+
+						console.log(data.x, data.y);
+
+						if (data && (Math.abs(data.x) > 0.001 || Math.abs(data.y) > 0.001 || Math.abs(data.width - 1.0) > 0.001 || Math.abs(data.height - 1.0) > 0.001)) {
+							zoom = data.zoom > 0 ? data.zoom : 1.0;
+							x = imageX + (data.x * scaledImg.paintedWidth);
+							y = imageY + (data.y * scaledImg.paintedHeight);
+
+							clampToBounds();
+						} else {
+							zoom = 1.0;
+							centerInImage();
+						}
+					}
+
+					border.color: DynamicColors.palette.m3primary
+					border.width: 2
+					height: baseHeight / zoom
+					opacity: 1
+					width: baseWidth / zoom
+
+					Behavior on opacity {
+						Anim {
+						}
+					}
+
+					Component.onCompleted: {
+						restoreFromData();
+					}
+					onHeightChanged: clampToBounds()
+					onWidthChanged: clampToBounds()
+				}
+			}
+		}
+
+		MouseArea {
+			id: mouse
+
+			function updateCrop(mouseX, mouseY) {
+				if (!cropRectLoader.item)
+					return;
+
+				const cropRect = cropRectLoader.item;
+
+				let nx = mouseX - cropRect.width * 0.5;
+				let ny = mouseY - cropRect.height * 0.5;
+
+				nx = Math.max(cropRect.imageX, Math.min(nx, cropRect.imageX + scaledImg.paintedWidth - cropRect.width));
+				ny = Math.max(cropRect.imageY, Math.min(ny, cropRect.imageY + scaledImg.paintedHeight - cropRect.height));
+
+				cropRect.x = nx;
+				cropRect.y = ny;
+			}
+
+			anchors.fill: parent
+			hoverEnabled: true
+			preventStealing: true
+
+			onPositionChanged: mouse => {
+				if (pressed) {
+					updateCrop(mouse.x, mouse.y);
+					wrapper.changesMade = true;
+				}
+			}
+			onPressed: mouse => {
+				updateCrop(mouse.x, mouse.y);
+				wrapper.changesMade = true;
+			}
+			onReleased: {
+				wrapper.changesMade = true;
+			}
+		}
+	}
+}