Merge remote-tracking branch 'origin/feat/settings-revamp'

Reviewed-on: #132

.clang-format

@@ -1,15 +1,15 @@
 ---
 BasedOnStyle: LLVM
 AccessModifierOffset: 0
-AlignAfterOpenBracket: Align
+AlignAfterOpenBracket: AlwaysBreak
 AlignConsecutiveAssignments: false
 AlignConsecutiveDeclarations: false
 AlignOperands: Align
 AllowAllParametersOfDeclarationOnNextLine: true
 AllowShortFunctionsOnASingleLine: Inline
-AllowShortIfStatementsOnASingleLine: Never
+AllowShortIfStatementsOnASingleLine: WithoutElse
 AlwaysBreakBeforeMultilineStrings: false
-AlwaysBreakTemplateDeclarations: Yes
+AlwaysBreakTemplateDeclarations: MultiLine
 BinPackArguments: false
 BinPackParameters: false
 BreakBeforeBraces: Attach

.clang-tidy

@@ -2,29 +2,25 @@
 Checks: >
     -*,
     bugprone-*,
+    -bugprone-throwing-static-initialization,
+    -bugprone-invalid-enum-default-initialization,
+    -bugprone-suspicious-include,
+    -bugprone-branch-clone,
+    -bugprone-easily-swappable-parameters,
+    -bugprone-narrowing-conversions,
+    -bugprone-implicit-widening-of-multiplication-result,
     clang-analyzer-*,
-    modernize-*,
-    -modernize-use-trailing-return-type,
-    performance-*,
-    readability-braces-around-statements,
+    cppcoreguidelines-init-variables,
+    misc-no-recursion,
+    concurrency-mt-unsafe,
     readability-else-after-return,
-    readability-identifier-naming,
+    readability-make-member-function-const,
     readability-redundant-*,
+    -readability-redundant-inline-specifier,
     readability-simplify-*,
-CheckOptions:
-    readability-identifier-naming.ClassCase: CamelCase
-    readability-identifier-naming.EnumCase: CamelCase
-    readability-identifier-naming.FunctionCase: camelBack
-    readability-identifier-naming.MemberCase: camelBack
-    readability-identifier-naming.MemberPrefix: m_
-    readability-identifier-naming.MethodCase: camelBack
-    readability-identifier-naming.NamespaceCase: CamelCase
-    readability-identifier-naming.ParameterCase: camelBack
-    readability-identifier-naming.PrivateMemberPrefix: m_
-    readability-identifier-naming.StaticConstantCase: UPPER_CASE
-    readability-identifier-naming.StaticConstantPrefix: k
-    readability-identifier-naming.VariableCase: camelBack
-WarningsAsErrors: "*"
+    modernize-use-override,
+    modernize-use-nullptr,
+    modernize-deprecated-headers,
 HeaderFilterRegex: ".*"
 FormatStyle: file
 

.gitea/workflows/ci-image.yml

@@ -0,0 +1,30 @@
+name: Rebuild CI Image
+
+on:
+    schedule:
+        - cron: '0 6 * * 1'
+    workflow_dispatch:
+
+jobs:
+    build:
+        runs-on: alpine
+        container:
+            image: node:26-alpine
+        env:
+            IMAGE: git.aramjonghu.nl/aramjonghu/zshell-ci:latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install Docker CLI
+              run: apk add --no-cache docker-cli
+
+            - name: Login to registry
+              run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login git.aramjonghu.nl --username aramjonghu --password-stdin
+
+            - name: Build image
+              run: docker build -t "$IMAGE" -f ci/Dockerfile .
+
+            - name: Push image
+              run: docker push "$IMAGE"

.gitea/workflows/cpp.yml

@@ -0,0 +1,29 @@
+name: C++
+
+on:
+    pull_request:
+
+jobs:
+    build:
+        runs-on: alpine
+        container:
+            image: git.aramjonghu.nl/aramjonghu/zshell-ci:latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Configure
+              run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
+
+            - name: Build
+              run: ninja -C build
+
+            - name: clang-tidy
+              run: |
+                  sed -i 's/-mno-direct-extern-access //g' build/compile_commands.json
+                  set -o pipefail
+                  run-clang-tidy -p build -j $(nproc) -header-filter="Plugins/.*" 2>&1 | \
+                    grep -v 'Suppressed\|non-user\|non-system\|unknown argument.*mno-direct\|Found compiler error\|warnings generated\.\|^Use -header-filter'

CMakeLists.txt

@@ -1,6 +1,35 @@
 cmake_minimum_required(VERSION 3.19)
 
-project(ZShell)
+if(NOT DEFINED VERSION)
+	execute_process(
+		COMMAND git describe --tags --abbrev=0
+		WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
+		OUTPUT_VARIABLE GIT_LAST_TAG
+		OUTPUT_STRIP_TRAILING_WHITESPACE
+		ERROR_QUIET
+	)
+
+	if (GIT_LAST_TAG)
+		string(REGEX REPLACE "^v" "" GIT_LAST_TAG "${GIT_LAST_TAG}")
+
+		string(REPLACE "." ";" VERSION_LIST "${GIT_LAST_TAG}")
+		list(GET VERSION_LIST 0 VERSION_MAJOR)
+		list(GET VERSION_LIST 1 VERSION_MINOR)
+
+		execute_process(
+			COMMAND git rev-list v${VERSION_MAJOR}.${VERSION_MINOR}.0..HEAD --count
+			WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
+			OUTPUT_VARIABLE VERSION_PATCH
+			OUTPUT_STRIP_TRAILING_WHITESPACE
+			ERROR_QUIET
+		)
+	endif()
+endif()
+
+set(VERSION "${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH}")
+
+project(ZShell VERSION ${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH})
+message(STATUS "ZShell version: ${VERSION}")
 
 set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
@@ -15,11 +44,11 @@ set(INSTALL_QSCONFDIR "etc/xdg/quickshell/zshell" CACHE STRING "Quickshell confi
 set(INSTALL_GREETERCONFDIR "etc/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
 
 add_compile_options(
-    -Wall -Wextra -Wpedantic -Wshadow -Wconversion
-    -Wold-style-cast -Wnull-dereference -Wdouble-promotion
-    -Wformat=2 -Wfloat-equal -Woverloaded-virtual
-    -Wsign-conversion -Wredundant-decls -Wswitch
-    -Wunreachable-code
+	-Wall -Wextra -Wpedantic -Wshadow -Wconversion
+	-Wold-style-cast -Wnull-dereference -Wdouble-promotion
+	-Wformat=2 -Wfloat-equal -Woverloaded-virtual
+	-Wsign-conversion -Wredundant-decls -Wswitch
+	-Wunreachable-code
 )
 
 
@@ -30,8 +59,8 @@ endif()
 
 if("shell" IN_LIST ENABLE_MODULES)
 	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
-        install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
-    endforeach()
+		install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
+	endforeach()
 
 	# Disable watching for changes
 	file(READ shell.qml SHELL_QML)

Components/CustomFlickable.qml

@@ -4,12 +4,30 @@ import qs.Helpers
 Flickable {
 	id: root
 
+	property bool doneFakeFlick
+
 	interactive: !Visibilities.getForActive().isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {
+		onRunningChanged: {
+			if (!running && !root.doneFakeFlick) {
+				root.doneFakeFlick = true;
+				root.flick(1, 1);
+				root.flick(-1, -1);
+				Qt.callLater(() => root.cancelFlick());
+			}
+		}
+
 		Anim {
 			properties: "x,y"
 		}
 	}
+
+	Timer {
+		interval: 10
+		running: root.doneFakeFlick
+
+		onTriggered: root.doneFakeFlick = false
+	}
 }

Components/CustomSpinBox.qml

@@ -1,180 +1,132 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
-import QtQuick.Layouts
+import QtQuick.Templates
 import qs.Config
 
-RowLayout {
+DoubleSpinBox {
 	id: root
 
-	property string displayText: root.value.toString()
-	property bool isEditing: false
-	property real max: Infinity
-	property real min: -Infinity
-	property alias repeatRate: timer.interval
-	property real step: 1
-	property real value
+	property int cLayer: 1
+	property int repeatDecay: 50
+	property int repeatRate: 400
 
-	signal valueModified(value: real)
+	function decrease(): void {
+		let newValue = Math.max(from, value - stepSize);
+		const decimals = stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0;
+		newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+		value = newValue;
+		valueModified();
+	}
 
+	function increase(): void {
+		let newValue = Math.min(to, value + stepSize);
+		const decimals = stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0;
+		newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+		value = newValue;
+		valueModified();
+	}
+
+	decimals: stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0
+	editable: true
+	implicitHeight: Math.max(up.indicator.implicitHeight, down.indicator.implicitHeight, contentItem.implicitHeight) + topPadding + bottomPadding
+	implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
+	leftPadding: up.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
+	rightPadding: down.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
 	spacing: Appearance.spacing.small
 
-	onValueChanged: {
-		if (!root.isEditing) {
-			root.displayText = root.value.toString();
-		}
-	}
-
-	CustomTextField {
-		id: textField
-
-		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
-		implicitHeight: upButton.implicitHeight
+	contentItem: TextFieldBase {
+		horizontalAlignment: TextField.AlignHCenter
+		implicitWidth: 65
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.normal
-		padding: Appearance.padding.small
-		rightPadding: Appearance.padding.normal
-		text: root.isEditing ? text : root.displayText
+		leftPadding: Appearance.padding.larger
+		readOnly: !root.editable
+		rightPadding: Appearance.padding.larger
+		text: root.textFromValue(root.value, root.locale)
+		validator: root.validator
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
-			implicitWidth: 100
-			radius: Appearance.rounding.full
-		}
-		validator: DoubleValidator {
-			bottom: root.min
-			decimals: root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0
-			top: root.max
-		}
-
-		onAccepted: {
-			const numValue = parseFloat(text);
-			if (!isNaN(numValue)) {
-				const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
-				root.value = clampedValue;
-				root.displayText = clampedValue.toString();
-				root.valueModified(clampedValue);
-			} else {
-				text = root.displayText;
-			}
-			root.isEditing = false;
-		}
-		onActiveFocusChanged: {
-			if (activeFocus) {
-				root.isEditing = true;
-			} else {
-				root.isEditing = false;
-				root.displayText = root.value.toString();
-			}
-		}
-		onEditingFinished: {
-			if (text !== root.displayText) {
-				const numValue = parseFloat(text);
-				if (!isNaN(numValue)) {
-					const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
-					root.value = clampedValue;
-					root.displayText = clampedValue.toString();
-					root.valueModified(clampedValue);
-				} else {
-					text = root.displayText;
-				}
-			}
-			root.isEditing = false;
+			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+			radius: Appearance.rounding.extraSmall
 		}
 	}
+	down.indicator: IconButton {
+		id: downButton
 
-	CustomRect {
+		bottomRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		icon: "remove"
+		isRound: true
+		label.anchors.horizontalCenterOffset: pressed ? 0 : 2
+		padding: Appearance.padding.extraSmall
+		topRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		type: IconButton.Text
+
+		Behavior on bottomRightRadius {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		Behavior on label.anchors.horizontalCenterOffset {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		Behavior on topRightRadius {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+	up.indicator: IconButton {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: upIcon.implicitHeight + Appearance.padding.extraSmall * 2
-		implicitWidth: implicitHeight
-		radius: upState.pressed ? Appearance.rounding.small : Appearance.rounding.normal
+		anchors.right: parent.right
+		bottomLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		icon: "add"
+		isRound: true
+		label.anchors.horizontalCenterOffset: pressed ? 0 : -2
+		padding: Appearance.padding.extraSmall
+		topLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		type: IconButton.Text
 
-		Behavior on radius {
+		Behavior on bottomLeftRadius {
 			Anim {
-				type: Anim.FastEffects
+				type: Anim.DefaultEffects
 			}
 		}
-
-		StateLayer {
-			id: upState
-
-			color: DynamicColors.palette.m3onPrimary
-
-			onClicked: {
-				let newValue = Math.min(root.max, root.value + root.step);
-				// Round to avoid floating point precision errors
-				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
-				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
-				root.value = newValue;
-				root.displayText = newValue.toString();
-				root.valueModified(newValue);
-			}
-			onPressAndHold: timer.start()
-			onReleased: timer.stop()
-		}
-
-		MaterialIcon {
-			id: upIcon
-
-			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
-			text: "keyboard_arrow_up"
-		}
-	}
-
-	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: downIcon.implicitHeight + Appearance.padding.extraSmall * 2
-		implicitWidth: implicitHeight
-		radius: downState.pressed ? Appearance.rounding.small : Appearance.rounding.normal
-
-		Behavior on radius {
+		Behavior on label.anchors.horizontalCenterOffset {
 			Anim {
-				type: Anim.FastEffects
+				type: Anim.DefaultEffects
 			}
 		}
-
-		StateLayer {
-			id: downState
-
-			color: DynamicColors.palette.m3onPrimary
-
-			onClicked: {
-				let newValue = Math.max(root.min, root.value - root.step);
-				// Round to avoid floating point precision errors
-				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
-				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
-				root.value = newValue;
-				root.displayText = newValue.toString();
-				root.valueModified(newValue);
+		Behavior on topLeftRadius {
+			Anim {
+				type: Anim.DefaultEffects
 			}
-			onPressAndHold: timer.start()
-			onReleased: timer.stop()
-		}
-
-		MaterialIcon {
-			id: downIcon
-
-			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
-			text: "keyboard_arrow_down"
 		}
 	}
 
 	Timer {
 		id: timer
 
-		interval: 100
+		interval: root.repeatRate
 		repeat: true
+		running: upButton.pressed || downButton.pressed
 		triggeredOnStart: true
 
+		onRunningChanged: {
+			if (!running)
+				interval = root.repeatRate;
+		}
 		onTriggered: {
-			if (upState.pressed)
-				upState.onClicked();
-			else if (downState.pressed)
-				downState.onClicked();
+			if (upButton.pressed)
+				root.increase();
+			else if (downButton.pressed)
+				root.decrease();
+			if (interval > root.repeatDecay)
+				interval -= root.repeatDecay;
 		}
 	}
 }

Components/CustomTextField.qml

@@ -1,77 +1,295 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Shapes
 import qs.Config
 
-TextField {
+TextFieldBase {
 	id: root
 
-	property int cursorHeight: root.height
+	enum TextFieldType {
+		Outlined,
+		Filled
+	}
 
-	background: null
-	color: DynamicColors.palette.m3onSurface
-	cursorVisible: !readOnly
-	font.family: Appearance.font.family.sans
-	font.pointSize: Appearance.font.size.smaller
-	placeholderTextColor: DynamicColors.palette.m3outline
-	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
+	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
+	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
+	property bool emptyIsValid: true
+	property string errorText
+	readonly property int filledOffset: type === CustomTextField.Filled ? Appearance.spacing.small : 0
+	readonly property int horizontalPadding: Appearance.padding.large
+	property bool isError
+	property string leadingIcon
+	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
+	readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.extraSmall * 2
+	property real outlineGapScale: activeFocus || text ? 1 : 0
+	property int radius: Appearance.rounding.small
+	readonly property real smallFontScale: smallFontSize / font.pointSize
+	property int smallFontSize: Appearance.font.size.small
+	property string supportingText
+	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Appearance.spacing.extraSmall : 0
+	property string trailingIcon
+	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
+	property int type: CustomTextField.Outlined
+	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
+	property var validate // Regex or function
 
-	Behavior on color {
-		CAnim {
+	bottomPadding: Appearance.padding.large + supportingTextOffset - filledOffset
+	leftPadding: horizontalPadding + leadingOffset
+	rightPadding: horizontalPadding + trailingOffset
+	topPadding: Appearance.padding.large + filledOffset
+
+	background: Loader {
+		anchors.bottomMargin: root.supportingTextOffset
+		anchors.fill: parent
+		sourceComponent: root.type === CustomTextField.Filled ? filledComp : outlineComp
+
+		StateLayer {
+			id: stateLayer
+
+			cursorShape: Qt.IBeamCursor
+			enabled: !root.activeFocus
+			manualPressOverride: tapHandler.pressed
+			radius: root.type === CustomTextField.Outlined ? root.clampedRadius : 0
+			topLeftRadius: root.clampedRadius
+			topRightRadius: root.clampedRadius
+
+			onClicked: root.focus = true
 		}
 	}
-	cursorDelegate: CustomRect {
-		id: cursor
-
-		property bool disableBlink
-
-		color: DynamicColors.palette.m3primary
-		implicitWidth: 2
-		radius: Appearance.rounding.normal
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.small
-			}
+	Behavior on outlineGapScale {
+		Anim {
+			type: Anim.DefaultEffects
 		}
+	}
 
-		Connections {
-			function onCursorPositionChanged(): void {
-				if (root.activeFocus && root.cursorVisible) {
-					cursor.opacity = 1;
-					cursor.disableBlink = true;
-					enableBlink.restart();
+	onEditingFinished: {
+		if (!valid)
+			isError = true;
+	}
+	onPressed: {
+		if (stateLayer.enabled)
+			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
+	}
+	onTextEdited: {
+		if (isError)
+			isError = false;
+	}
+
+	Item {
+		id: contentWrapper
+
+		anchors.bottomMargin: root.supportingTextOffset
+		anchors.fill: parent
+
+		CustomText {
+			id: placeholder
+
+			anchors.left: parent.left
+			anchors.leftMargin: root.leftPadding
+			anchors.topMargin: Appearance.padding.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : root.text ? DynamicColors.palette.m3outline : root.placeholderTextColor)
+			font.family: root.font.family
+			font.pointSize: root.font.pointSize
+			font.variableAxes: root.font.variableAxes
+			font.weight: root.font.weight
+			renderType: Text.QtRendering
+			text: root.placeholderText
+
+			states: [
+				State {
+					name: "smallOutlined"
+					when: root.type === CustomTextField.Outlined && (root.activeFocus || root.text)
+
+					PropertyChanges {
+						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + -Appearance.spacing.extraSmall
+						placeholder.scale: root.smallFontScale
+					}
+
+					AnchorChanges {
+						anchors.verticalCenter: contentWrapper.top
+						target: placeholder
+					}
+				},
+				State {
+					name: "smallFilled"
+					when: root.type === CustomTextField.Filled && (root.activeFocus || root.text)
+
+					PropertyChanges {
+						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + root.leadingOffset
+						placeholder.scale: root.smallFontScale
+					}
+
+					AnchorChanges {
+						anchors.top: contentWrapper.top
+						anchors.verticalCenter: undefined
+						target: placeholder
+					}
+				}
+			]
+			transitions: Transition {
+				Anim {
+					properties: "scale,leftMargin"
+					type: Anim.DefaultEffects
+				}
+
+				AnchorAnim {
+					duration: Appearance.anim.durations.expressiveEffects
+					easing: Appearance.anim.curves.expressiveDefaultEffects
 				}
 			}
-
-			target: root
 		}
 
-		Timer {
-			id: enableBlink
+		Loader {
+			id: leadingIconLoader
 
-			interval: 100
+			active: root.leadingIcon
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.larger
+			anchors.verticalCenter: parent.verticalCenter
 
-			onTriggered: cursor.disableBlink = false
+			sourceComponent: MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.large
+				text: root.leadingIcon
+			}
 		}
 
-		Timer {
-			interval: 500
-			repeat: true
-			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
-			triggeredOnStart: true
+		Loader {
+			id: trailingIconLoader
 
-			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
-		}
+			active: root.trailingIcon
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.larger
+			anchors.verticalCenter: parent.verticalCenter
 
-		Binding {
-			cursor.opacity: 0
-			when: !root.activeFocus || !root.cursorVisible
+			sourceComponent: MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.large
+				text: root.trailingIcon
+			}
 		}
 	}
-	Behavior on placeholderTextColor {
-		CAnim {
+
+	Loader {
+		id: supportingTextLoader
+
+		active: root.effectiveSupportingText
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.leftMargin: root.horizontalPadding
+
+		sourceComponent: CustomText {
+			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant
+			font.pointSize: Appearance.font.size.small
+			text: root.effectiveSupportingText
+		}
+	}
+
+	TapHandler {
+		id: tapHandler
+	}
+
+	Component {
+		id: outlineComp
+
+		Shape {
+			id: bg
+
+			asynchronous: true
+			preferredRendererType: Shape.CurveRenderer
+
+			ShapePath {
+				capStyle: ShapePath.RoundCap
+				fillColor: "transparent"
+				startX: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2 + root.outlineGap * root.outlineGapScale
+				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				strokeWidth: root.activeFocus ? 2 : 1
+
+				Behavior on strokeColor {
+					CAnim {
+					}
+				}
+				Behavior on strokeWidth {
+					Anim {
+					}
+				}
+
+				PathLine {
+					x: bg.width - root.clampedRadius
+				}
+
+				PathArc {
+					radiusX: root.clampedRadius
+					radiusY: root.clampedRadius
+					x: bg.width
+					y: root.clampedRadius
+				}
+
+				PathLine {
+					x: bg.width
+					y: bg.height - root.clampedRadius
+				}
+
+				PathArc {
+					radiusX: root.clampedRadius
+					radiusY: root.clampedRadius
+					x: bg.width - root.clampedRadius
+					y: bg.height
+				}
+
+				PathLine {
+					x: root.clampedRadius
+					y: bg.height
+				}
+
+				PathArc {
+					radiusX: root.clampedRadius
+					radiusY: root.clampedRadius
+					x: 0
+					y: bg.height - root.clampedRadius
+				}
+
+				PathLine {
+					x: 0
+					y: root.clampedRadius
+				}
+
+				PathArc {
+					radiusX: root.clampedRadius
+					radiusY: root.clampedRadius
+					x: root.clampedRadius
+					y: 0
+				}
+
+				PathLine {
+					x: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2
+				}
+			}
+		}
+	}
+
+	Component {
+		id: filledComp
+
+		CustomRect {
+			color: root.activeFocus ? DynamicColors.tPalette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainerHigh
+			topLeftRadius: root.clampedRadius
+			topRightRadius: root.clampedRadius
+
+			CustomRect {
+				anchors.bottom: parent.bottom
+				anchors.left: parent.left
+				anchors.right: parent.right
+				color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				implicitHeight: root.activeFocus ? 2 : 1
+
+				Behavior on implicitHeight {
+					Anim {
+					}
+				}
+			}
 		}
 	}
 }

Components/M3TextField.qml

@@ -0,0 +1,309 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Config
+
+Item {
+	id: root
+
+	enum Variant {
+		Outlined,
+		Filled
+	}
+
+	readonly property color accent: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline))
+	readonly property real disabledOpacity: 0.38
+	readonly property string effectiveTrailingIcon: root.trailingIcon.length > 0 ? root.trailingIcon : (root.password ? (field.echoMode === TextInput.Password ? "visibility" : "visibility_off") : (root.isError ? "error" : ""))
+	property string errorText: ""
+	readonly property alias field: field
+	readonly property bool floating: focused || hasContent || prefixText.length > 0
+	readonly property bool focused: field.activeFocus
+	readonly property bool hasContent: field.text.length > 0
+	readonly property color iconColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant))
+	property int inputMethodHints: Qt.ImhNone
+	property bool isError: false
+	property string label: ""
+	readonly property color labelColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : (focused ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant))
+	property string leadingIcon: ""
+	property int maxLength: 0
+	property color notchColor: DynamicColors.palette.m3surface
+	readonly property bool outlined: variant === M3TextField.Variant.Outlined
+	property bool password: false
+	property string placeholder: ""
+	property string prefixText: ""
+	property string suffixText: ""
+	readonly property color supportColor: !root.enabled ? DynamicColors.palette.m3onSurface : (isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant)
+	property string supportingText: ""
+	property alias text: field.text
+	property string trailingIcon: ""
+	readonly property bool trailingInteractive: root.password && root.trailingIcon.length === 0
+	property var validator: null
+	property int variant: M3TextField.Variant.Outlined
+
+	signal accepted
+
+	function forceFieldFocus(): void {
+		field.forceActiveFocus();
+	}
+
+	implicitHeight: 56 + (supportRow.visible ? supportRow.implicitHeight + Appearance.spacing.extraSmall : 0)
+	implicitWidth: 240
+
+	CustomRect {
+		id: filledBg
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		color: root.enabled ? (root.focused ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1) : DynamicColors.palette.m3surfaceContainerHigh) : DynamicColors.palette.m3onSurface
+		implicitHeight: 56
+		opacity: root.enabled ? 1 : 0.04 // M3 filled disabled container @ 4%
+
+		topLeftRadius: Appearance.rounding.small
+		topRightRadius: Appearance.rounding.small
+		visible: !root.outlined
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+
+		StateLayer {
+			anchors.fill: parent
+			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+			enabled: root.enabled
+			topLeftRadius: Appearance.rounding.small
+			topRightRadius: Appearance.rounding.small
+
+			onClicked: field.forceActiveFocus()
+		}
+
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: root.accent
+			implicitHeight: root.focused || root.isError ? 2 : 1
+			opacity: root.enabled ? 1 : root.disabledOpacity
+
+			Behavior on color {
+				CAnim {
+				}
+			}
+			Behavior on implicitHeight {
+				Anim {
+					type: Anim.StandardSmall
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: outline
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		border.color: root.accent
+		border.width: root.focused || root.isError ? 2 : 1
+		color: "transparent"
+		implicitHeight: 56
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		radius: Appearance.rounding.small
+		visible: root.outlined
+
+		Behavior on border.color {
+			CAnim {
+			}
+		}
+		Behavior on border.width {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+
+		StateLayer {
+			anchors.fill: parent
+			anchors.margins: outline.border.width
+			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+			enabled: root.enabled
+			radius: Appearance.rounding.small
+
+			onClicked: field.forceActiveFocus()
+		}
+	}
+
+	Rectangle {
+		color: root.notchColor
+		height: outline.border.width
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		visible: root.outlined && root.floating && root.label.length > 0
+		width: labelText.width + Appearance.spacing.extraSmall
+		x: labelText.x - Appearance.spacing.extraSmall / 2
+		y: 0
+	}
+
+	CustomText {
+		id: labelText
+
+		color: root.labelColor
+		font.pointSize: root.floating ? Appearance.font.size.small : Appearance.font.size.medium
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		text: root.label
+		visible: root.label.length > 0
+		x: root.floating ? (Appearance.padding.larger + Appearance.spacing.extraSmall / 2) : (leading.visible ? leading.x + leading.width + Appearance.spacing.small : Appearance.padding.larger)
+		y: root.floating ? (root.outlined ? -height / 2 : Appearance.padding.extraSmall) : (56 - height) / 2
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+		Behavior on x {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+		Behavior on y {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+	}
+
+	MaterialIcon {
+		id: leading
+
+		anchors.left: parent.left
+		anchors.leftMargin: Appearance.padding.larger
+		anchors.top: parent.top
+		anchors.topMargin: (56 - height) / 2
+		color: root.iconColor
+		font.pointSize: Appearance.font.size.medium
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		text: root.leadingIcon
+		visible: root.leadingIcon.length > 0
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+	}
+
+	MaterialIcon {
+		id: trailing
+
+		anchors.right: parent.right
+		anchors.rightMargin: Appearance.padding.larger
+		anchors.top: parent.top
+		anchors.topMargin: (56 - height) / 2
+		color: root.isError ? DynamicColors.palette.m3error : (root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface)
+		font.pointSize: Appearance.font.size.medium
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		text: root.effectiveTrailingIcon
+		visible: root.effectiveTrailingIcon.length > 0
+
+		MouseArea {
+			anchors.fill: parent
+			anchors.margins: -Appearance.padding.small
+			cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+			enabled: root.trailingInteractive && root.enabled
+
+			onClicked: field.echoMode = field.echoMode === TextInput.Password ? TextInput.Normal : TextInput.Password
+		}
+	}
+
+	CustomText {
+		id: prefix
+
+		anchors.left: leading.visible ? leading.right : parent.left
+		anchors.leftMargin: leading.visible ? Appearance.spacing.small : Appearance.padding.larger
+		anchors.top: parent.top
+		anchors.topMargin: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
+		color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface
+		font.pointSize: Appearance.font.size.medium
+		height: 56
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		text: root.prefixText
+		verticalAlignment: Text.AlignVCenter
+		visible: root.prefixText.length > 0 && root.floating
+	}
+
+	CustomText {
+		id: suffix
+
+		anchors.right: trailing.visible ? trailing.left : parent.right
+		anchors.rightMargin: trailing.visible ? Appearance.spacing.small : Appearance.padding.larger
+		anchors.top: parent.top
+		anchors.topMargin: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
+		color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurface
+		font.pointSize: Appearance.font.size.medium
+		height: 56
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		text: root.suffixText
+		verticalAlignment: Text.AlignVCenter
+		visible: root.suffixText.length > 0 && root.floating
+	}
+
+	CustomTextField {
+		id: field
+
+		anchors.left: prefix.visible ? prefix.right : (leading.visible ? leading.right : parent.left)
+		anchors.leftMargin: prefix.visible ? Appearance.spacing.extraSmall : (leading.visible ? Appearance.spacing.small : Appearance.padding.larger)
+		anchors.right: suffix.visible ? suffix.left : (trailing.visible ? trailing.left : parent.right)
+		anchors.rightMargin: suffix.visible ? Appearance.spacing.extraSmall : (trailing.visible ? Appearance.spacing.small : Appearance.padding.larger)
+		anchors.top: parent.top
+		color: DynamicColors.palette.m3onSurface
+		echoMode: root.password ? TextInput.Password : TextInput.Normal
+		enabled: root.enabled
+		font.pointSize: Appearance.font.size.medium
+		height: 56
+		inputMethodHints: root.inputMethodHints
+		maximumLength: root.maxLength > 0 ? root.maxLength : 32767
+		opacity: root.enabled ? 1 : root.disabledOpacity
+		placeholderText: root.focused ? root.placeholder : ""
+		topPadding: root.floating && !root.outlined ? Appearance.font.size.small + Appearance.padding.extraSmall : 0
+		validator: root.validator
+		verticalAlignment: TextInput.AlignVCenter
+
+		onAccepted: root.accepted()
+		onTextEdited: if (root.isError)
+			root.isError = false
+	}
+
+	Item {
+		id: supportRow
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.topMargin: 56 + Appearance.spacing.extraSmall
+		implicitHeight: Math.max(supportText.implicitHeight, counter.implicitHeight)
+		visible: (root.isError && root.errorText.length > 0) || root.supportingText.length > 0 || root.maxLength > 0
+
+		CustomText {
+			id: supportText
+
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.larger
+			anchors.right: counter.visible ? counter.left : parent.right
+			anchors.rightMargin: Appearance.spacing.small
+			color: root.supportColor
+			font.pointSize: Appearance.font.size.small
+			opacity: root.enabled ? 1 : root.disabledOpacity
+			text: root.isError && root.errorText.length > 0 ? root.errorText : root.supportingText
+			wrapMode: Text.WordWrap
+		}
+
+		CustomText {
+			id: counter
+
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.larger
+			color: root.supportColor
+			font.pointSize: Appearance.font.size.small
+			opacity: root.enabled ? 1 : root.disabledOpacity
+			text: `${root.text.length}/${root.maxLength}`
+			visible: root.maxLength > 0
+		}
+	}
+}

Components/Menu.qml

@@ -30,8 +30,9 @@ MouseArea {
 	signal itemSelected(item: MenuItem)
 
 	anchors.fill: parent
-	cursorShape: undefined
+	cursorShape: expanded ? Qt.ArrowCursor : undefined
 	enabled: expanded
+	hoverEnabled: expanded
 	layer.enabled: opacity < 1
 	opacity: expanded ? 1 : 0
 	parent: {

Components/SearchBar.qml

@@ -0,0 +1,94 @@
+import QtQuick
+import qs.Config
+
+TextFieldBase {
+	id: root
+
+	readonly property alias bg: bg
+	readonly property alias clearIcon: clearIcon
+	readonly property alias searchIcon: searchIcon
+
+	bottomPadding: Appearance.padding.large
+	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Appearance.spacing.small
+	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Appearance.spacing.small
+	topPadding: Appearance.padding.large
+
+	background: CustomRect {
+		id: bg
+
+		anchors.fill: parent
+		color: DynamicColors.tPalette.m3surfaceContainer
+		radius: Appearance.rounding.full
+
+		StateLayer {
+			id: stateLayer
+
+			cursorShape: Qt.IBeamCursor
+			enabled: !root.activeFocus
+			manualPressOverride: tapHandler.pressed
+
+			onClicked: root.focus = true
+		}
+	}
+
+	onPressed: {
+		if (stateLayer.enabled)
+			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
+	}
+
+	CustomText {
+		id: placeholder
+
+		anchors.left: parent.left
+		anchors.leftMargin: root.leftPadding
+		anchors.verticalCenter: parent.verticalCenter
+		color: root.placeholderTextColor
+		font: root.font
+		opacity: root.text ? 0 : 1
+		text: root.placeholderText
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+
+	MaterialIcon {
+		id: searchIcon
+
+		anchors.left: parent.left
+		anchors.leftMargin: Appearance.padding.large
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3onSurfaceVariant
+		font.pointSize: Appearance.font.size.large
+		text: "search"
+	}
+
+	IconButton {
+		id: clearIcon
+
+		anchors.right: parent.right
+		anchors.rightMargin: Appearance.padding.larger
+		anchors.verticalCenter: parent.verticalCenter
+		enabled: root.text
+		icon: "clear"
+		opacity: root.text ? 1 : 0
+		radius: Appearance.rounding.full
+		radiusMorph: false
+		stateLayer.hoverEnabled: enabled
+		type: IconButton.Text
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+
+		onClicked: root.clear()
+	}
+
+	TapHandler {
+		id: tapHandler
+	}
+}

Components/StateLayer.qml

@@ -20,6 +20,7 @@ MouseArea {
 		return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
 	}
 	property real endRadiusAtPress
+	property bool manualHoverOverride
 	property bool manualPressOverride
 	property real pressX: width / 2
 	property real pressY: height / 2
@@ -27,7 +28,7 @@ MouseArea {
 	readonly property alias rect: base
 	property bool shapeMorph
 	property bool showHoverBackground: true
-	property real stateOpacity: containsMouse ? 0.08 : 0
+	property real stateOpacity: containsMouse || manualHoverOverride ? 0.08 : 0
 	property alias topLeftRadius: base.topLeftRadius
 	property alias topRightRadius: base.topRightRadius
 

Components/TextFieldBase.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+
+TextField {
+	id: root
+
+	color: DynamicColors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font.pointSize: Appearance.font.size.small
+	implicitHeight: contentHeight + topPadding + bottomPadding
+	implicitWidth: contentWidth + leftPadding + rightPadding
+	placeholderTextColor: DynamicColors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
+	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
+	selectedTextColor: color
+	selectionColor: Qt.alpha(DynamicColors.palette.m3primary, 0.4)
+	verticalAlignment: TextInput.AlignVCenter
+
+	Behavior on color {
+		CAnim {
+		}
+	}
+	cursorDelegate: Item {
+	}
+	Behavior on selectionColor {
+		CAnim {
+		}
+	}
+
+	CustomRect {
+		id: cursor
+
+		property bool disableBlink
+
+		color: DynamicColors.palette.m3primary
+		implicitHeight: root.cursorRectangle.height
+		implicitWidth: 1.5
+		radius: Appearance.rounding.large
+		x: root.cursorRectangle.x
+		y: root.cursorRectangle.y
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+		Behavior on x {
+			Anim {
+				duration: Appearance.anim.durations.expressiveFastEffects
+				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
+			}
+		}
+
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
+				}
+			}
+
+			target: root
+		}
+
+		Timer {
+			id: enableBlink
+
+			interval: 500
+
+			onTriggered: cursor.disableBlink = false
+		}
+
+		Timer {
+			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
+
+			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+		}
+
+		Binding {
+			cursor.opacity: 0
+			when: !root.activeFocus || !root.cursorVisible
+		}
+	}
+}

Components/VerticalFadeFlickable.qml

@@ -7,7 +7,7 @@ CustomFlickable {
 	id: root
 
 	property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
-	property real fadeAmount: 0.2
+	property real fadeAmount: 0.1
 	property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
 
 	function fadeShouldBeActive(isStart: bool): bool {

Components/VerticalFadeListView.qml

@@ -0,0 +1,72 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Effects
+
+CustomListView {
+	id: root
+
+	property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
+	property real fadeAmount: 0.1
+	property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
+
+	function fadeShouldBeActive(isStart: bool): bool {
+		// When content is smaller than flickable size, hide fade when rebound starts
+		if (contentHeight + topMargin + bottomMargin < height && rebound.running && ((isStart ? verticalOvershoot > 0 : verticalOvershoot < 0)))
+			return false;
+
+		if (isStart)
+			return visibleArea.yPosition > 0;
+		return visibleArea.yPosition + visibleArea.heightRatio < 1;
+	}
+
+	flickableDirection: Flickable.VerticalFlick
+	layer.enabled: true
+	orientation: ListView.Vertical
+
+	Behavior on bottomFadeOpacity {
+		Anim {
+			type: Anim.SlowEffects
+		}
+	}
+	layer.effect: Mask {
+		maskSource: mask
+
+		Rectangle {
+			id: mask
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			gradient: Gradient {
+				orientation: Gradient.Vertical
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, root.topFadeOpacity)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: root.fadeAmount
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: 1 - root.fadeAmount
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, root.bottomFadeOpacity)
+					position: 1
+				}
+			}
+		}
+	}
+	Behavior on topFadeOpacity {
+		Anim {
+			type: Anim.SlowEffects
+		}
+	}
+}

Config/BarConfig.qml

@@ -72,6 +72,12 @@ JsonObject {
 		property bool upower: true
 	}
 	component Tray: JsonObject {
+		property bool showAudio: true
+		property bool showBluetooth: false
+		property bool showMicrophone: true
+		property bool showNetwork: false
+		property bool showPower: true
+		property bool showWifi: false
 		property int trayIconSize: 24
 	}
 }

Config/Config.qml

@@ -12,7 +12,7 @@ Singleton {
 
 	property alias appearance: adapter.appearance
 	property alias background: adapter.background
-	property alias barConfig: adapter.barConfig
+	property alias bar: adapter.bar
 	property alias clipboard: adapter.clipboard
 	property alias colors: adapter.colors
 	property alias dashboard: adapter.dashboard
@@ -20,6 +20,7 @@ Singleton {
 	property alias general: adapter.general
 	property alias launcher: adapter.launcher
 	property alias lock: adapter.lock
+	property bool migratingLegacyBar: false
 	property alias notifs: adapter.notifs
 	property alias osd: adapter.osd
 	property alias overview: adapter.overview
@@ -29,6 +30,41 @@ Singleton {
 	property alias sidebar: adapter.sidebar
 	property alias utilities: adapter.utilities
 
+	function applyLegacyBarConfig(legacy): void {
+		const tray = legacy.tray ?? {};
+		const popouts = legacy.popouts ?? {};
+
+		bar.autoHide = pick(legacy.autoHide, bar.autoHide);
+		bar.hideWhenNotif = pick(legacy.hideWhenNotif, bar.hideWhenNotif);
+		bar.rounding = pick(legacy.rounding, bar.rounding);
+		bar.border = pick(legacy.border, bar.border);
+		bar.smoothing = pick(legacy.smoothing, bar.smoothing);
+		bar.height = pick(legacy.height, bar.height);
+		bar.tray.trayIconSize = pick(tray.trayIconSize, bar.tray.trayIconSize);
+		bar.popouts.tray = pick(popouts.tray, bar.popouts.tray);
+		bar.popouts.audio = pick(popouts.audio, bar.popouts.audio);
+		bar.popouts.activeWindow = pick(popouts.activeWindow, bar.popouts.activeWindow);
+		bar.popouts.resources = pick(popouts.resources, bar.popouts.resources);
+		bar.popouts.clock = pick(popouts.clock, bar.popouts.clock);
+		bar.popouts.network = pick(popouts.network, bar.popouts.network);
+		bar.popouts.upower = pick(popouts.upower, bar.popouts.upower);
+		bar.entries = pick(legacy.entries, bar.entries);
+	}
+
+	function migrateLegacyBarConfig(raw): bool {
+		if (raw.bar !== undefined || raw.barConfig === undefined)
+			return false;
+
+		migratingLegacyBar = true;
+		applyLegacyBarConfig(raw.barConfig);
+		migratingLegacyBar = false;
+		return true;
+	}
+
+	function pick(value, fallback) {
+		return value === undefined ? fallback : value;
+	}
+
 	function save(): void {
 		saveTimer.restart();
 		recentlySaved = true;
@@ -39,348 +75,6 @@ Singleton {
 		saveTimer.restart();
 	}
 
-	function serializeAppearance(): var {
-		return {
-			rounding: {
-				scale: appearance.rounding.scale
-			},
-			spacing: {
-				scale: appearance.spacing.scale
-			},
-			padding: {
-				scale: appearance.padding.scale
-			},
-			deform: {
-				scale: appearance.deform.scale
-			},
-			font: {
-				family: {
-					sans: appearance.font.family.sans,
-					mono: appearance.font.family.mono,
-					material: appearance.font.family.material,
-					clock: appearance.font.family.clock
-				},
-				size: {
-					scale: appearance.font.size.scale
-				}
-			},
-			anim: {
-				mediaGifSpeedAdjustment: appearance.anim.mediaGifSpeedAdjustment,
-				sessionGifSpeed: appearance.anim.sessionGifSpeed,
-				durations: {
-					scale: appearance.anim.durations.scale
-				}
-			},
-			transparency: {
-				enabled: appearance.transparency.enabled,
-				base: appearance.transparency.base,
-				layers: appearance.transparency.layers
-			}
-		};
-	}
-
-	function serializeBackground(): var {
-		return {
-			wallFadeDuration: background.wallFadeDuration,
-			enabled: background.enabled,
-			alignX: background.alignX,
-			sourceClipX: background.sourceClipX,
-			sourceClipY: background.sourceClipY,
-			sourceClipW: background.sourceClipW,
-			sourceClipH: background.sourceClipH,
-			alignY: background.alignY,
-			zoom: background.zoom
-		};
-	}
-
-	function serializeBar(): var {
-		return {
-			autoHide: barConfig.autoHide,
-			hideWhenNotif: barConfig.hideWhenNotif,
-			rounding: barConfig.rounding,
-			border: barConfig.border,
-			smoothing: barConfig.smoothing,
-			height: barConfig.height,
-			tray: {
-				trayIconSize: barConfig.tray.trayIconSize
-			},
-			popouts: {
-				tray: barConfig.popouts.tray,
-				audio: barConfig.popouts.audio,
-				activeWindow: barConfig.popouts.activeWindow,
-				resources: barConfig.popouts.resources,
-				clock: barConfig.popouts.clock,
-				network: barConfig.popouts.network,
-				upower: barConfig.popouts.upower
-			},
-			entries: barConfig.entries
-		};
-	}
-
-	function serializeClipboard(): var {
-		return {
-			enabled: clipboard.enabled,
-			maxEntriesShown: clipboard.maxEntriesShown,
-			sizes: {
-				width: clipboard.sizes.width,
-				previewWidth: clipboard.sizes.previewWidth,
-				minPreviewWidth: clipboard.sizes.minPreviewWidth,
-				itemHeight: clipboard.sizes.itemHeight
-			}
-		};
-	}
-
-	function serializeColors(): var {
-		return {
-			schemeType: colors.schemeType,
-			presets: {
-				name: colors.presets.name,
-				variant: colors.presets.variant,
-				accent: colors.presets.accent
-			}
-		};
-	}
-
-	function serializeConfig(): var {
-		return {
-			barConfig: serializeBar(),
-			lock: serializeLock(),
-			general: serializeGeneral(),
-			services: serializeServices(),
-			notifs: serializeNotifs(),
-			sidebar: serializeSidebar(),
-			utilities: serializeUtilities(),
-			dashboard: serializeDashboard(),
-			appearance: serializeAppearance(),
-			osd: serializeOsd(),
-			background: serializeBackground(),
-			launcher: serializeLauncher(),
-			colors: serializeColors(),
-			dock: serializeDock(),
-			screenshot: serializeScreenshot(),
-			clipboard: serializeClipboard()
-		};
-	}
-
-	function serializeDashboard(): var {
-		return {
-			enabled: dashboard.enabled,
-			mediaUpdateInterval: dashboard.mediaUpdateInterval,
-			resourceUpdateInterval: dashboard.resourceUpdateInterval,
-			dragThreshold: dashboard.dragThreshold,
-			performance: {
-				showBattery: dashboard.performance.showBattery,
-				showGpu: dashboard.performance.showGpu,
-				showCpu: dashboard.performance.showCpu,
-				showMemory: dashboard.performance.showMemory,
-				showStorage: dashboard.performance.showStorage,
-				showNetwork: dashboard.performance.showNetwork
-			},
-			sizes: {
-				tabIndicatorHeight: dashboard.sizes.tabIndicatorHeight,
-				tabIndicatorSpacing: dashboard.sizes.tabIndicatorSpacing,
-				infoWidth: dashboard.sizes.infoWidth,
-				infoIconSize: dashboard.sizes.infoIconSize,
-				dateTimeWidth: dashboard.sizes.dateTimeWidth,
-				mediaWidth: dashboard.sizes.mediaWidth,
-				mediaProgressSweep: dashboard.sizes.mediaProgressSweep,
-				mediaProgressThickness: dashboard.sizes.mediaProgressThickness,
-				resourceProgessThickness: dashboard.sizes.resourceProgessThickness,
-				weatherWidth: dashboard.sizes.weatherWidth,
-				mediaCoverArtSize: dashboard.sizes.mediaCoverArtSize,
-				mediaVisualizerSize: dashboard.sizes.mediaVisualizerSize,
-				resourceSize: dashboard.sizes.resourceSize
-			}
-		};
-	}
-
-	function serializeDock(): var {
-		return {
-			enable: dock.enable,
-			height: dock.height,
-			hoverToReveal: dock.hoverToReveal,
-			pinnedApps: dock.pinnedApps,
-			pinnedOnStartup: dock.pinnedOnStartup,
-			ignoredAppRegexes: dock.ignoredAppRegexes
-		};
-	}
-
-	function serializeGeneral(): var {
-		return {
-			logo: general.logo,
-			wallpaperPath: general.wallpaperPath,
-			showOverFullscreen: general.showOverFullscreen,
-			desktopIcons: general.desktopIcons,
-			dateFormat: general.dateFormat,
-			color: {
-				mode: general.color.mode,
-				smart: general.color.smart,
-				scheduleDark: general.color.scheduleDark,
-				scheduleHyprsunset: general.color.scheduleHyprsunset,
-				scheduleHyprsunsetStart: general.color.scheduleHyprsunsetStart,
-				hyprsunsetTemp: general.color.hyprsunsetTemp,
-				scheduleHyprsunsetEnd: general.color.scheduleHyprsunsetEnd,
-				schemeGeneration: general.color.schemeGeneration,
-				scheduleDarkStart: general.color.scheduleDarkStart,
-				scheduleDarkEnd: general.color.scheduleDarkEnd,
-				neovimColors: general.color.neovimColors
-			},
-			apps: {
-				terminal: general.apps.terminal,
-				audio: general.apps.audio,
-				playback: general.apps.playback,
-				explorer: general.apps.explorer
-			},
-			idle: {
-				timeouts: general.idle.timeouts
-			},
-			battery: {
-				popupThresholds: general.battery.popupThresholds,
-				critPerc: general.battery.critPerc
-			}
-		};
-	}
-
-	function serializeLauncher(): var {
-		return {
-			maxAppsShown: launcher.maxAppsShown,
-			maxWallpapers: launcher.maxWallpapers,
-			uwsm: launcher.uwsm,
-			actionPrefix: launcher.actionPrefix,
-			specialPrefix: launcher.specialPrefix,
-			useFuzzy: {
-				apps: launcher.useFuzzy.apps,
-				actions: launcher.useFuzzy.actions,
-				schemes: launcher.useFuzzy.schemes,
-				variants: launcher.useFuzzy.variants,
-				wallpapers: launcher.useFuzzy.wallpapers
-			},
-			sizes: {
-				itemWidth: launcher.sizes.itemWidth,
-				itemHeight: launcher.sizes.itemHeight,
-				wallpaperWidth: launcher.sizes.wallpaperWidth,
-				wallpaperHeight: launcher.sizes.wallpaperHeight
-			},
-			actions: launcher.actions
-		};
-	}
-
-	function serializeLock(): var {
-		return {
-			recolorLogo: lock.recolorLogo,
-			enableFprint: lock.enableFprint,
-			showNotifContent: lock.showNotifContent,
-			showNotifIcon: lock.showNotifIcon,
-			maxFprintTries: lock.maxFprintTries,
-			blurAmount: lock.blurAmount,
-			sizes: {
-				heightMult: lock.sizes.heightMult,
-				ratio: lock.sizes.ratio,
-				centerWidth: lock.sizes.centerWidth
-			}
-		};
-	}
-
-	function serializeNotifs(): var {
-		return {
-			expire: notifs.expire,
-			defaultExpireTimeout: notifs.defaultExpireTimeout,
-			appNotifCooldown: notifs.appNotifCooldown,
-			clearThreshold: notifs.clearThreshold,
-			expandThreshold: notifs.expandThreshold,
-			actionOnClick: notifs.actionOnClick,
-			groupPreviewNum: notifs.groupPreviewNum,
-			sizes: {
-				width: notifs.sizes.width,
-				image: notifs.sizes.image,
-				badge: notifs.sizes.badge
-			}
-		};
-	}
-
-	function serializeOsd(): var {
-		return {
-			enabled: osd.enabled,
-			hideDelay: osd.hideDelay,
-			enableBrightness: osd.enableBrightness,
-			enableMicrophone: osd.enableMicrophone,
-			allMonBrightness: osd.allMonBrightness,
-			sizes: {
-				sliderWidth: osd.sizes.sliderWidth,
-				sliderHeight: osd.sizes.sliderHeight
-			}
-		};
-	}
-
-	function serializeScreenshot(): var {
-		return {
-			enable_pp: screenshot.enable_pp,
-			mode: screenshot.mode,
-			radius: screenshot.radius,
-			shadow: screenshot.shadow,
-			rounding: screenshot.rounding,
-			shadow_blur: screenshot.shadow_blur,
-			shadow_color: screenshot.shadow_color,
-			shadow_offset_x: screenshot.shadow_offset_x,
-			shadow_offset_y: screenshot.shadow_offset_y
-		};
-	}
-
-	function serializeServices(): var {
-		return {
-			weatherLocation: services.weatherLocation,
-			updates: services.updates,
-			useFahrenheit: services.useFahrenheit,
-			minBrightness: services.minBrightness,
-			ddcutilService: services.ddcutilService,
-			useTwelveHourClock: services.useTwelveHourClock,
-			gpuType: services.gpuType,
-			audioIncrement: services.audioIncrement,
-			brightnessIncrement: services.brightnessIncrement,
-			maxVolume: services.maxVolume,
-			defaultPlayer: services.defaultPlayer,
-			playerAliases: services.playerAliases,
-			visualizerBars: services.visualizerBars
-		};
-	}
-
-	function serializeSidebar(): var {
-		return {
-			enabled: sidebar.enabled,
-			sizes: {
-				width: sidebar.sizes.width
-			}
-		};
-	}
-
-	function serializeUtilities(): var {
-		return {
-			enabled: utilities.enabled,
-			maxToasts: utilities.maxToasts,
-			sizes: {
-				width: utilities.sizes.width,
-				toastWidth: utilities.sizes.toastWidth
-			},
-			toasts: {
-				configLoaded: utilities.toasts.configLoaded,
-				chargingChanged: utilities.toasts.chargingChanged,
-				gameModeChanged: utilities.toasts.gameModeChanged,
-				dndChanged: utilities.toasts.dndChanged,
-				audioOutputChanged: utilities.toasts.audioOutputChanged,
-				audioInputChanged: utilities.toasts.audioInputChanged,
-				capsLockChanged: utilities.toasts.capsLockChanged,
-				numLockChanged: utilities.toasts.numLockChanged,
-				kbLayoutChanged: utilities.toasts.kbLayoutChanged,
-				vpnChanged: utilities.toasts.vpnChanged,
-				nowPlaying: utilities.toasts.nowPlaying
-			},
-			vpn: {
-				enabled: utilities.vpn.enabled,
-				provider: utilities.vpn.provider
-			}
-		};
-	}
-
 	ElapsedTimer {
 		id: timer
 	}
@@ -392,20 +86,7 @@ Singleton {
 
 		onTriggered: {
 			timer.restart();
-			try {
-				let config = {};
-				try {
-					config = JSON.parse(fileView.text());
-				} catch (e) {
-					config = {};
-				}
-
-				config = root.serializeConfig();
-
-				fileView.setText(JSON.stringify(config, null, 4));
-			} catch (e) {
-				Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
-			}
+			fileView.writeAdapter();
 		}
 	}
 
@@ -425,6 +106,10 @@ Singleton {
 		path: `${Paths.config}/config.json`
 		watchChanges: true
 
+		onAdapterUpdated: {
+			if (!root.migratingLegacyBar)
+				root.save();
+		}
 		onFileChanged: {
 			if (!root.recentlySaved) {
 				timer.restart();
@@ -441,7 +126,11 @@ Singleton {
 			ModeScheduler.checkStartup();
 			Hyprsunset.checkStartup();
 			try {
-				JSON.parse(text());
+				const raw = JSON.parse(text());
+				const migrated = root.migrateLegacyBarConfig(raw);
+				if (migrated)
+					root.save();
+
 				const elapsed = timer.elapsedMs();
 
 				if (adapter.utilities.toasts.configLoaded && !root.recentlySaved) {
@@ -462,7 +151,7 @@ Singleton {
 			}
 			property BackgroundConfig background: BackgroundConfig {
 			}
-			property BarConfig barConfig: BarConfig {
+			property BarConfig bar: BarConfig {
 			}
 			property ClipboardConfig clipboard: ClipboardConfig {
 			}

Config/DashboardConfig.qml

@@ -1,7 +1,6 @@
 import Quickshell.Io
 
 JsonObject {
-	property int dragThreshold: 50
 	property bool enabled: true
 	property int mediaUpdateInterval: 500
 	property Performance performance: Performance {
@@ -11,6 +10,7 @@ JsonObject {
 	}
 
 	component Performance: JsonObject {
+		property bool enabled: true
 		property bool showBattery: true
 		property bool showCpu: true
 		property bool showGpu: true

Config/Launcher.qml

@@ -84,6 +84,11 @@ JsonObject {
 			dangerous: false
 		},
 	]
+	property int dragThreshold: 50
+	property bool enableDangerousActions: false
+	property bool enabled: true
+	property list<string> favoriteApps: []
+	property list<string> hiddenApps: []
 	property int maxAppsShown: 10
 	property int maxWallpapers: 7
 	property Sizes sizes: Sizes {

Config/NotifConfig.qml

@@ -9,6 +9,7 @@ JsonObject {
 	property bool expire: true
 	property int groupPreviewNum: 3
 	property bool openExpanded: false
+	property bool showInFullscreen: true
 	property Sizes sizes: Sizes {
 	}
 

Config/SidebarConfig.qml

@@ -1,6 +1,7 @@
 import Quickshell.Io
 
 JsonObject {
+	property int dragThreshold: 30
 	property bool enabled: true
 	property Sizes sizes: Sizes {
 	}

Daemons/NotifServer.qml

@@ -25,7 +25,7 @@ Singleton {
 	property alias server: server
 
 	function shouldThrottle(appName: string): bool {
-		if (props.dnd)
+		if (props.dnd || [...Visibilities.screens.values()].some(v => v.sidebar))
 			return false;
 
 		const key = (appName || "unknown").trim().toLowerCase();
@@ -49,11 +49,6 @@ Singleton {
 		if (loaded) {
 			saveTimer.restart();
 		}
-		if (root.list.length > 0) {
-			HasNotifications.hasNotifications = true;
-		} else {
-			HasNotifications.hasNotifications = false;
-		}
 	}
 
 	Timer {

Drawers/Exclusions.qml

@@ -44,7 +44,7 @@ Scope {
 	}
 
 	component ExclusionZone: CustomWindow {
-		exclusiveZone: Config.barConfig.border
+		exclusiveZone: Config.bar.border
 		implicitHeight: 1
 		implicitWidth: 1
 		name: "Bar-Exclusion"

Drawers/Interactions.qml

@@ -21,15 +21,15 @@ Item {
 	required property PersistentProperties visibilities
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		return y > root.height - panel.height - Config.barConfig.border && withinPanelWidth(panel, x, y);
+		return y > root.height - panel.height - Config.bar.border && withinPanelWidth(panel, x, y);
 	}
 
 	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+		return x < panel.x + panel.width + Config.bar.border && withinPanelHeight(panel, x, y);
 	}
 
 	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x - Config.barConfig.border && withinPanelHeight(panel, x, y);
+		return x > panel.x - Config.bar.border && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
@@ -75,7 +75,7 @@ Item {
 			const dragX = x - centroid.pressPosition.x;
 			const dragY = y - centroid.pressPosition.y;
 
-			if (centroid.pressPosition.y >= root.screen.height - Config.barConfig.border && centroid.pressPosition.x > root.screen.width / 5 && dragY < -200)
+			if (centroid.pressPosition.y >= root.screen.height - Config.bar.border && centroid.pressPosition.x > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
 				root.visibilities.launcher = true;
 
 			if (root.singleGestureTriggered)
@@ -91,7 +91,7 @@ Item {
 				}
 			}
 
-			if (centroid.pressPosition.y > root.screen.height - Config.barConfig.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
+			if (centroid.pressPosition.y > root.screen.height - Config.bar.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
 				root.visibilities.clipboard = true;
 
 			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight && centroid.pressPosition.x > root.screen.width / 5 && !root.visibilities.launcher)
@@ -100,17 +100,17 @@ Item {
 					root.singleGestureTriggered = true;
 				}
 
-			if (centroid.pressPosition.x > root.screen.width - Config.barConfig.border && centroid.pressPosition.y < (root.screen.height / 2) && dragX < -20) {
+			if (centroid.pressPosition.x > root.screen.width - Config.bar.border && centroid.pressPosition.y < (root.screen.height / 2) && dragX < -Config.sidebar.dragThreshold) {
 				root.visibilities.sidebar = true;
 				root.singleGestureTriggered = true;
 			}
 
-			if (centroid.pressPosition.x >= root.screen.width - Config.barConfig.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
+			if (centroid.pressPosition.x >= root.screen.width - Config.bar.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
 				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
 				root.singleGestureTriggered = true;
 			}
 
-			if (centroid.pressPosition.x <= Config.barConfig.border && dragX > 20) {
+			if (centroid.pressPosition.x <= Config.bar.border && dragX > 20) {
 				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
 				root.singleGestureTriggered = true;
 			}
@@ -174,7 +174,7 @@ Item {
 					root.popouts.hasCurrent = false;
 				}
 
-				if (Config.barConfig.autoHide)
+				if (Config.bar.autoHide)
 					root.bar.isHovered = false;
 			}
 		}
@@ -193,7 +193,7 @@ Item {
 				return;
 			}
 
-			if (!root.visibilities.bar && Config.barConfig.autoHide && y < root.bar.implicitHeight)
+			if (!root.visibilities.bar && Config.bar.autoHide && y < root.bar.implicitHeight)
 				root.bar.isHovered = true;
 
 			if (root.panels.sidebar.width === 0) {

Drawers/Panels.qml

@@ -10,7 +10,7 @@ import qs.Modules.Osd as Osd
 import qs.Components.Toast as Toasts
 import qs.Modules.Launcher as Launcher
 import qs.Modules.Resources as Resources
-import qs.Modules.SettingsNew as Settings
+import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
 import qs.Modules.Clipboard as Clipboard

Drawers/Regions.qml

@@ -0,0 +1,89 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Modules.Bar as Bar
+
+Region {
+	id: root
+
+	required property Bar.BarLoader bar
+	readonly property real borderThickness: win.borderThickness
+	readonly property alias menuPopoutRegion: menuPopoutRegion
+	required property Panels panels
+	required property var win
+
+	height: win.height - bar.implicitHeight - win.borderThickness - win.dragMaskPadding * 2
+	intersection: Intersection.Xor
+	width: win.width - win.borderThickness * 2 - win.dragMaskPadding * 2
+	x: win.borderThickness + win.dragMaskPadding
+	y: bar.implicitHeight + win.dragMaskPadding
+
+	R {
+		panel: root.panels.dashboardWrapper
+	}
+
+	R {
+		panel: root.panels.launcher
+	}
+
+	R {
+		id: sidebarRegion
+
+		panel: root.panels.sidebar
+		width: panel.width * (1 - root.panels.sidebar.offsetScale) + root.borderThickness
+		x: root.win.width - width
+	}
+
+	R {
+		panel: root.panels.osdWrapper
+		width: panel.width * (1 - root.panels.osd.offsetScale) + root.borderThickness
+		x: root.win.width - width
+	}
+
+	R {
+		panel: root.panels.notifications
+	}
+
+	R {
+		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.borderThickness
+		panel: root.panels.utilities
+		y: root.win.height - height
+	}
+
+	R {
+		panel: root.panels.popoutsWrapper
+	}
+
+	R {
+		panel: root.panels.resourcesWrapper
+	}
+
+	R {
+		panel: root.panels.settingsWrapper
+	}
+
+	R {
+		panel: root.panels.dock
+	}
+
+	R {
+		panel: root.panels.clipboard
+	}
+
+	Region {
+		id: menuPopoutRegion
+
+		intersection: Intersection.Subtract
+	}
+
+	component R: Region {
+		required property Item panel
+
+		height: panel.height
+		intersection: Intersection.Subtract
+		width: panel.width
+		x: panel.x + root.borderThickness
+		y: panel.y + root.bar.implicitHeight
+	}
+}

Drawers/Windows.qml

@@ -18,9 +18,9 @@ CustomWindow {
 	id: root
 
 	readonly property alias bar: bar
-	readonly property real borderLayoutThickness: hasFullscreen ? 0 : Config.barConfig.border
-	readonly property real borderRounding: Config.barConfig.rounding * (1 - fsTransitionProg)
-	readonly property real borderThickness: Config.barConfig.border * (1 - fsTransitionProg)
+	readonly property real borderLayoutThickness: hasFullscreen ? 0 : Config.bar.border
+	readonly property real borderRounding: Config.bar.rounding * (1 - fsTransitionProg)
+	readonly property real borderThickness: Config.bar.border * (1 - fsTransitionProg)
 	readonly property int dragMaskPadding: {
 		if (focusGrab.active)
 			return 0;
@@ -44,7 +44,7 @@ CustomWindow {
 	readonly property bool hasFullscreenOnNormalWs: monitor?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false
 	readonly property bool hasSpecialWorkspace: (monitor?.lastIpcObject.specialWorkspace?.name.length ?? 0) > 0
 	readonly property alias interactionWrapper: interactions
-	readonly property alias menuRegion: menuPopoutRegion
+	readonly property alias menuRegion: regions.menuPopoutRegion
 	readonly property HyprlandMonitor monitor: Hypr.monitorFor(screen)
 	property var root: Quickshell.shellDir
 	readonly property real sdfBorderOffset: 2 * fsTransitionProg
@@ -56,7 +56,7 @@ CustomWindow {
 	WlrLayershell.layer: (fsTransitionProg > 0 && Config.general.showOverFullscreen) || (hasSpecialWorkspace && hasFullscreenOnNormalWs) ? WlrLayer.Overlay : WlrLayer.Top
 	color: "transparent"
 	contentItem.focus: true
-	mask: visibilities.isDrawing ? null : (hasFullscreen ? emptyRegion : region)
+	mask: visibilities.isDrawing ? null : (hasFullscreen ? emptyRegion : regions)
 	name: "Bar"
 
 	Behavior on fsTransitionProg {
@@ -69,7 +69,7 @@ CustomWindow {
 	}
 
 	contentItem.Keys.onEscapePressed: {
-		if (Config.barConfig.autoHide)
+		if (Config.bar.autoHide)
 			visibilities.bar = false;
 		visibilities.launcher = false;
 		visibilities.sidebar = false;
@@ -93,12 +93,6 @@ CustomWindow {
 		panels.popouts.hasCurrent = false;
 	}
 
-	Region {
-		id: menuPopoutRegion
-
-		intersection: Intersection.Subtract
-	}
-
 	Region {
 		id: emptyRegion
 
@@ -106,17 +100,21 @@ CustomWindow {
 		width: panels.notifications.width
 		x: panels.notifications.x + root.borderThickness
 		y: panels.notifications.y + bar.implicitHeight
+
+		Region {
+			height: panels.osd.height
+			width: panels.osdWrapper.width * (1 - panels.osd.offsetScale) + root.borderThickness
+			x: root.width - width
+			y: panels.osdWrapper.y + bar.implicitHeight
+		}
 	}
 
-	Region {
-		id: region
+	Regions {
+		id: regions
 
-		height: root.height - bar.implicitHeight - root.borderThickness - root.dragMaskPadding * 2
-		intersection: Intersection.Xor
-		regions: [...popoutRegions.instances, menuPopoutRegion]
-		width: root.width - root.borderThickness * 2 - root.dragMaskPadding * 2
-		x: root.borderThickness + root.dragMaskPadding
-		y: bar.implicitHeight + root.dragMaskPadding
+		bar: bar
+		panels: panels
+		win: root
 	}
 
 	anchors {
@@ -126,22 +124,6 @@ CustomWindow {
 		top: true
 	}
 
-	Variants {
-		id: popoutRegions
-
-		model: panels.children
-
-		Region {
-			required property Item modelData
-
-			height: modelData.height
-			intersection: Intersection.Subtract
-			width: modelData.width
-			x: modelData.x + root.borderThickness
-			y: modelData.y + bar.implicitHeight
-		}
-	}
-
 	HyprlandFocusGrab {
 		id: focusGrab
 
@@ -190,8 +172,8 @@ CustomWindow {
 	Binding {
 		property: "bar"
 		target: visibilities
-		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.barConfig.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
-		when: Config.barConfig.autoHide
+		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.bar.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
+		when: Config.bar.autoHide
 	}
 
 	Item {
@@ -211,7 +193,7 @@ CustomWindow {
 			id: blobGroup
 
 			color: root.surfaceColor
-			smoothing: Config.barConfig.smoothing
+			smoothing: Config.bar.smoothing
 		}
 
 		BlobInvertedRect {

Helpers/HasNotifications.qml

@@ -1,16 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Io
-
-Singleton {
-	id: root
-
-	property alias hasNotifications: adapter.hasNotifications
-
-	JsonObject {
-		id: adapter
-
-		property bool hasNotifications: false
-	}
-}

Helpers/Strings.qml

@@ -0,0 +1,26 @@
+pragma Singleton
+
+import Quickshell
+
+Singleton {
+	property var _regexCache: ({})
+
+	function testRegexList(filterList: list<string>, target: string): bool {
+		const regexChecker = /^\^.*\$$/;
+		for (const filter of filterList) {
+			if (regexChecker.test(filter)) {
+				let re = _regexCache[filter];
+				if (!re) {
+					re = new RegExp(filter);
+					_regexCache[filter] = re;
+				}
+				if (re.test(target))
+					return true;
+			} else {
+				if (filter === target)
+					return true;
+			}
+		}
+		return false;
+	}
+}

Helpers/SystemInfo.qml

@@ -1,17 +1,30 @@
 pragma Singleton
 
-import qs.Config
+import QtQuick
 import Quickshell
 import Quickshell.Io
-import QtQuick
+import qs.Config
+import qs.Paths
 
 Singleton {
 	id: root
 
+	property string boardName
+	property string boardVendor
+	readonly property string device: {
+		if (!boardName)
+			return boardVendor;
+		if (!boardVendor || boardName.toLowerCase().startsWith(boardVendor.toLowerCase()))
+			return boardName;
+		return `${boardVendor} ${boardName}`;
+	}
+	property string firmware
+	property string hostname
 	property bool isDefaultLogo: true
+	property string kernel
 	property string osId
 	property list<string> osIdLike
-	property string osLogo
+	property string osLogo: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/logo.svg`)
 	property string osName
 	property string osPrettyName
 	readonly property string shell: Quickshell.env("SHELL").split("/").pop()
@@ -19,6 +32,12 @@ Singleton {
 	readonly property string user: Quickshell.env("USER")
 	readonly property string wm: Quickshell.env("XDG_CURRENT_DESKTOP") || Quickshell.env("XDG_SESSION_DESKTOP")
 
+	function sanitiseDmi(s: string): string {
+		const t = s.trim();
+		const junk = ["to be filled by o.e.m.", "system product name", "system manufacturer", "system version", "default string", "o.e.m.", "not specified", "not applicable", "unknown", "none", ""];
+		return junk.includes(t.toLowerCase()) ? "" : t;
+	}
+
 	FileView {
 		id: osRelease
 
@@ -35,7 +54,10 @@ Singleton {
 			root.osIdLike = fd("ID_LIKE").split(" ");
 
 			const logo = Quickshell.iconPath(fd("LOGO"), true);
-			if (Config.general.logo) {
+			if (Config.general.logo === "zshell") {
+				root.osLogo = Qt.resolvedUrl(`${Quickshell.shellDir}/assets/logo.svg`);
+				root.isDefaultLogo = true;
+			} else if (Config.general.logo) {
 				root.osLogo = Quickshell.iconPath(Config.general.logo, true) || "file://" + Paths.absolutePath(Config.general.logo);
 				root.isDefaultLogo = false;
 			} else if (logo) {
@@ -53,6 +75,39 @@ Singleton {
 		target: Config.general
 	}
 
+	FileView {
+		path: "/proc/sys/kernel/osrelease"
+
+		onLoaded: root.kernel = text().trim()
+	}
+
+	FileView {
+		path: "/proc/sys/kernel/hostname"
+
+		onLoaded: root.hostname = text().trim()
+	}
+
+	FileView {
+		path: "/sys/class/dmi/id/sys_vendor"
+		printErrors: false
+
+		onLoaded: root.boardVendor = root.sanitiseDmi(text())
+	}
+
+	FileView {
+		path: "/sys/class/dmi/id/product_name"
+		printErrors: false
+
+		onLoaded: root.boardName = root.sanitiseDmi(text())
+	}
+
+	FileView {
+		path: "/sys/class/dmi/id/bios_version"
+		printErrors: false
+
+		onLoaded: root.firmware = root.sanitiseDmi(text())
+	}
+
 	Timer {
 		interval: 15000
 		repeat: true
@@ -69,12 +124,15 @@ Singleton {
 		onLoaded: {
 			const up = parseInt(text().split(" ")[0] ?? 0);
 
-			const hours = Math.floor(up / 3600);
+			const days = Math.floor(up / 86400);
+			const hours = Math.floor((up % 86400) / 3600);
 			const minutes = Math.floor((up % 3600) / 60);
 
 			let str = "";
+			if (days > 0)
+				str += `${days} day${days === 1 ? "" : "s"}`;
 			if (hours > 0)
-				str += `${hours} hour${hours === 1 ? "" : "s"}`;
+				str += `${str ? ", " : ""}${hours} hour${hours === 1 ? "" : "s"}`;
 			if (minutes > 0 || !str)
 				str += `${str ? ", " : ""}${minutes} minute${minutes === 1 ? "" : "s"}`;
 			root.uptime = str;

Helpers/SystemUsage.qml

@@ -1,269 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Io
-import QtQuick
-import qs.Config
-
-Singleton {
-	id: root
-
-	property string autoGpuType: "NONE"
-	property real gpuMemTotal: 0
-	property real gpuMemUsed
-	property string gpuName
-	property real gpuPerc
-	property real gpuTemp
-	readonly property string gpuType: Config.services.gpuType.toUpperCase() || autoGpuType
-	property int refCount
-
-	function cleanCpuName(name: string): string {
-		return name.replace(/\(R\)/gi, "").replace(/\(TM\)/gi, "").replace(/CPU/gi, "").replace(/\d+th Gen /gi, "").replace(/\d+nd Gen /gi, "").replace(/\d+rd Gen /gi, "").replace(/\d+st Gen /gi, "").replace(/Core /gi, "").replace(/Processor/gi, "").replace(/\s+/g, " ").trim();
-	}
-
-	function cleanGpuName(name: string): string {
-		return name.replace(/NVIDIA GeForce /gi, "").replace(/NVIDIA /gi, "").replace(/AMD Radeon /gi, "").replace(/AMD /gi, "").replace(/Intel /gi, "").replace(/\(R\)/gi, "").replace(/\(TM\)/gi, "").replace(/Graphics/gi, "").replace(/\s+/g, " ").trim();
-	}
-
-	function formatKib(kib: real): var {
-		const mib = 1024;
-		const gib = 1024 ** 2;
-		const tib = 1024 ** 3;
-
-		if (kib >= tib)
-			return {
-				value: kib / tib,
-				unit: "TiB"
-			};
-		if (kib >= gib)
-			return {
-				value: kib / gib,
-				unit: "GiB"
-			};
-		if (kib >= mib)
-			return {
-				value: kib / mib,
-				unit: "MiB"
-			};
-		return {
-			value: kib,
-			unit: "KiB"
-		};
-	}
-
-	Timer {
-		interval: Config.dashboard.resourceUpdateInterval
-		repeat: true
-		running: root.refCount > 0
-		triggeredOnStart: true
-
-		onTriggered: {
-			if (root.gpuType === "GENERIC") {
-				gpuUsage.running = true;
-				sensors.running = true;
-			}
-
-			if (root.gpuType === "GENERIC" && root.gpuMemTotal === 0)
-				oneshotMemAmd.running = true;
-		}
-	}
-
-	Process {
-		id: gpuNameDetect
-
-		command: ["sh", "-c", "nvidia-smi --query-gpu=name --format=csv,noheader 2>/dev/null || lspci 2>/dev/null | grep -i 'vga\\|3d\\|display' | head -1"]
-		running: true
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				const output = text.trim();
-				if (!output)
-					return;
-
-				// Check if it's from nvidia-smi (clean GPU name)
-				if (output.toLowerCase().includes("nvidia") || output.toLowerCase().includes("geforce") || output.toLowerCase().includes("rtx") || output.toLowerCase().includes("gtx")) {
-					root.gpuName = root.cleanGpuName(output);
-				} else {
-					// Parse lspci output: extract name from brackets or after colon
-					const bracketMatch = output.match(/\[([^\]]+)\]/);
-					if (bracketMatch) {
-						root.gpuName = root.cleanGpuName(bracketMatch[1]);
-					} else {
-						const colonMatch = output.match(/:\s*(.+)/);
-						if (colonMatch)
-							root.gpuName = root.cleanGpuName(colonMatch[1]);
-					}
-				}
-			}
-		}
-	}
-
-	Process {
-		id: gpuTypeCheck
-
-		command: ["sh", "-c", "if command -v nvidia-smi &>/dev/null && nvidia-smi -L &>/dev/null; then echo NVIDIA; elif ls /sys/class/drm/card*/device/gpu_busy_percent 2>/dev/null | grep -q .; then echo GENERIC; else echo NONE; fi"]
-		running: !Config.services.gpuType
-
-		stdout: StdioCollector {
-			onStreamFinished: root.autoGpuType = text.trim()
-		}
-	}
-
-	Process {
-		id: oneshotMem
-
-		command: ["nvidia-smi", "--query-gpu=memory.total", "--format=csv,noheader,nounits"]
-		running: root.gpuType === "NVIDIA" && root.gpuMemTotal === 0
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				root.gpuMemTotal = Number(this.text.trim());
-				oneshotMem.running = false;
-			}
-		}
-	}
-
-	Process {
-		id: oneshotMemAmd
-
-		command: ["sh", "-c", "cat /sys/class/drm/card*/device/mem_info_vram_total"]
-		running: root.gpuType === "GENERIC" && root.gpuMemTotal === 0
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				const values = text.trim().split("\n").map(v => parseInt(v, 10)).filter(v => Number.isFinite(v));
-
-				if (values.length > 0) {
-					const totalBytes = values.reduce((a, b) => a + b, 0);
-					root.gpuMemTotal = totalBytes / (1024 * 1024);
-				}
-
-				oneshotMemAmd.running = false;
-			}
-		}
-	}
-
-	Process {
-		id: gpuUsageNvidia
-
-		command: ["/usr/bin/nvidia-smi", "--query-gpu=utilization.gpu,temperature.gpu,memory.used", "--format=csv,noheader,nounits", "-lms", "1000"]
-		running: root.refCount > 0 && root.gpuType === "NVIDIA"
-
-		stdout: SplitParser {
-			onRead: data => {
-				const parts = String(data).trim().split(/\s*,\s*/);
-				if (parts.length < 3)
-					return;
-
-				const usageRaw = parseInt(parts[0], 10);
-				const tempRaw = parseInt(parts[1], 10);
-				const memRaw = parseInt(parts[2], 10);
-
-				if (!Number.isFinite(usageRaw) || !Number.isFinite(tempRaw) || !Number.isFinite(memRaw))
-					return;
-
-				const newGpuPerc = Math.max(0, Math.min(1, usageRaw / 100));
-				const newGpuTemp = tempRaw;
-				const newGpuMemUsed = root.gpuMemTotal > 0 ? Math.max(0, Math.min(1, memRaw / root.gpuMemTotal)) : 0;
-
-				// Only publish meaningful changes to avoid needless binding churn / repaints
-				if (Math.abs(root.gpuPerc - newGpuPerc) >= 0.01)
-					root.gpuPerc = newGpuPerc;
-
-				if (Math.abs(root.gpuTemp - newGpuTemp) >= 1)
-					root.gpuTemp = newGpuTemp;
-
-				if (Math.abs(root.gpuMemUsed - newGpuMemUsed) >= 0.01)
-					root.gpuMemUsed = newGpuMemUsed;
-			}
-		}
-	}
-
-	Process {
-		id: gpuUsage
-
-		command: root.gpuType === "GENERIC" ? ["sh", "-c", "paste -d ' ' /sys/class/drm/card*/device/gpu_busy_percent /sys/class/drm/card*/device/mem_info_vram_used"] : ["echo"]
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				if (root.gpuType === "GENERIC") {
-					const lines = text.trim().split("\n");
-
-					let percSum = 0;
-					let memSum = 0;
-					let count = 0;
-
-					for (const line of lines) {
-						const parts = line.trim().split(/\s+/);
-						if (parts.length < 2)
-							continue;
-
-						const gpuBusy = parseInt(parts[0], 10);
-						const memUsed = parseInt(parts[1], 10);
-
-						if (!Number.isFinite(gpuBusy) || !Number.isFinite(memUsed))
-							continue;
-
-						percSum += gpuBusy;
-						memSum += memUsed;
-						count++;
-					}
-
-					if (count > 0) {
-						// GPU usage %
-						root.gpuPerc = (percSum / count) / 100;
-
-						// VRAM usage (bytes → MiB → normalized)
-						const memUsedMiB = memSum / (1024 * 1024);
-
-						const newGpuMemUsed = root.gpuMemTotal > 0 ? Math.max(0, Math.min(1, memUsedMiB / root.gpuMemTotal)) : 0;
-
-						if (Math.abs(root.gpuMemUsed - newGpuMemUsed) >= 0.01)
-							root.gpuMemUsed = newGpuMemUsed;
-					}
-				} else {
-					root.gpuPerc = 0;
-					root.gpuTemp = 0;
-				}
-			}
-		}
-	}
-
-	Process {
-		id: sensors
-
-		command: ["sensors"]
-		environment: ({
-				LANG: "C.UTF-8",
-				LC_ALL: "C.UTF-8"
-			})
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				let eligible = false;
-				let sum = 0;
-				let count = 0;
-
-				for (const line of text.trim().split("\n")) {
-					if (line === "Adapter: PCI adapter")
-						eligible = true;
-					else if (line === "")
-						eligible = false;
-					else if (eligible) {
-						let match = line.match(/^(temp[0-9]+|GPU core|edge)+:\s+\+([0-9]+\.[0-9]+)(°| )C/);
-						if (!match)
-							// Fall back to junction/mem if GPU doesn't have edge temp (for AMD GPUs)
-							match = line.match(/^(junction|mem)+:\s+\+([0-9]+\.[0-9]+)(°| )C/);
-
-						if (match) {
-							sum += parseFloat(match[2]);
-							count++;
-						}
-					}
-				}
-
-				root.gpuTemp = count > 0 ? sum / count : 0;
-			}
-		}
-	}
-}

Modules/Bar/Bar.qml

@@ -57,15 +57,15 @@ RowLayout {
 		const item = ch.item;
 		const itemWidth = item.implicitWidth;
 
-		if (id === "audio" && Config.barConfig.popouts.audio) {
+		if (id === "audio" && Config.bar.popouts.audio) {
 			popouts.currentName = "audio";
 			popouts.currentCenter = Qt.binding(() => item.mapToItem(root, itemWidth / 2, 0).x);
 			popouts.hasCurrent = true;
-		} else if (id === "network" && Config.barConfig.popouts.network) {
+		} else if (id === "network" && Config.bar.popouts.network) {
 			popouts.currentName = "network";
 			popouts.currentCenter = Qt.binding(() => item.mapToItem(root, itemWidth / 2, 0).x);
 			popouts.hasCurrent = true;
-		} else if (id === "upower" && Config.barConfig.popouts.upower) {
+		} else if (id === "upower" && Config.bar.popouts.upower) {
 			popouts.currentName = "upower";
 			popouts.currentCenter = Qt.binding(() => item.mapToItem(root, itemWidth / 2, 0).x);
 			popouts.hasCurrent = true;
@@ -81,8 +81,8 @@ RowLayout {
 	Repeater {
 		id: repeater
 
-		// model: Config.barConfig.entries.filted(n => n.index > 50).sort(n => n.index)
-		model: Config.barConfig.entries
+		// model: Config.bar.entries.filted(n => n.index > 50).sort(n => n.index)
+		model: Config.bar.entries
 
 		DelegateChooser {
 			role: "id"

Modules/Bar/BarLoader.qml

@@ -15,15 +15,15 @@ import qs.Modules.Network
 Item {
 	id: root
 
-	readonly property int contentHeight: Config.barConfig.height + padding * 2
-	readonly property int exclusiveZone: Config.barConfig.autoHide ? Config.barConfig.border : contentHeight
+	readonly property int contentHeight: Config.bar.height + padding * 2
+	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentHeight
 	required property bool fullscreen
 	property bool isHovered
-	readonly property int padding: Math.max(Appearance.padding.smaller, Config.barConfig.border)
+	readonly property int padding: Math.max(Appearance.padding.smaller, Config.bar.border)
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
-	readonly property bool shouldBeVisible: !fullscreen && (!Config.barConfig.autoHide || visibilities.bar || isHovered)
+	readonly property bool shouldBeVisible: !fullscreen && (!Config.bar.autoHide || visibilities.bar || isHovered)
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
@@ -31,8 +31,8 @@ Item {
 		content.item?.checkPopout(x);
 	}
 
-	implicitHeight: fullscreen ? 0 : Config.barConfig.border
-	visible: height > Config.barConfig.border
+	implicitHeight: fullscreen ? 0 : Config.bar.border
+	visible: height > Config.bar.border
 
 	states: State {
 		name: "visible"

Modules/Bar/Border.qml

@@ -38,11 +38,11 @@ Item {
 
 		Rectangle {
 			anchors.fill: parent
-			anchors.margins: Config.barConfig.border + 1
+			anchors.margins: Config.bar.border + 1
 			anchors.topMargin: root.bar.implicitHeight + 1
-			radius: Config.barConfig.border > 0 ? Config.barConfig.rounding : 0
-			topLeftRadius: Config.barConfig.rounding
-			topRightRadius: Config.barConfig.rounding
+			radius: Config.bar.border > 0 ? Config.bar.rounding : 0
+			topLeftRadius: Config.bar.rounding
+			topRightRadius: Config.bar.rounding
 		}
 	}
 }

Modules/Clock.qml

@@ -14,7 +14,7 @@ CustomRect {
 	required property PersistentProperties visibilities
 
 	color: visibilities.dashboard ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
 	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
 	radius: Appearance.rounding.full
 

Modules/Dashboard/Dash/Resources.qml

@@ -24,8 +24,8 @@ Item {
 		service: Cpu
 	}
 
-	Ref {
-		service: SystemUsage
+	ServiceRef {
+		service: Gpu
 	}
 
 	ColumnLayout {
@@ -52,13 +52,13 @@ Item {
 		Resource {
 			fgColor: DynamicColors.palette.m3tertiary
 			icon: "gamepad"
-			value: SystemUsage.gpuPerc
+			value: Gpu.percentage
 		}
 
 		Resource {
 			fgColor: DynamicColors.palette.m3primary
 			icon: "host"
-			value: SystemUsage.gpuMemUsed
+			value: Gpu.memoryUsed / Gpu.memoryTotal
 		}
 
 		Resource {

Modules/HyprsunsetWidget.qml

@@ -9,7 +9,7 @@ CustomRect {
 	property bool tempEnabled: Hyprsunset.enabled
 
 	color: root.tempEnabled ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
 	implicitWidth: implicitHeight
 	radius: Appearance.rounding.full
 

Modules/Launcher/AppList.qml

@@ -10,7 +10,7 @@ import qs.Config
 CustomListView {
 	id: root
 
-	required property CustomTextField search
+	required property SearchBar search
 	required property PersistentProperties visibilities
 
 	highlightFollowsCurrentItem: false

Modules/Launcher/Content.qml

@@ -16,13 +16,13 @@ Item {
 	readonly property int rounding: Appearance.rounding.large
 	required property PersistentProperties visibilities
 
-	implicitHeight: searchWrapper.height + listWrapper.height + padding * 2
+	implicitHeight: search.height + listWrapper.height + padding * 2
 	implicitWidth: listWrapper.width + padding * 2
 
 	Item {
 		id: listWrapper
 
-		anchors.bottom: searchWrapper.top
+		anchors.bottom: search.top
 		anchors.bottomMargin: root.padding
 		anchors.horizontalCenter: parent.horizontalCenter
 		implicitHeight: list.height + root.padding
@@ -32,7 +32,7 @@ Item {
 			id: list
 
 			content: root
-			maxHeight: root.maxHeight - searchWrapper.implicitHeight - root.padding * 3
+			maxHeight: root.maxHeight - search.implicitHeight - root.padding * 3
 			padding: root.padding
 			panels: root.panels
 			rounding: root.rounding
@@ -41,131 +41,69 @@ Item {
 		}
 	}
 
-	CustomRect {
-		id: searchWrapper
+	SearchBar {
+		id: search
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.margins: root.padding
 		anchors.right: parent.right
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-		implicitHeight: Math.max(searchIcon.implicitHeight, search.implicitHeight, clearIcon.implicitHeight)
-		radius: Appearance.rounding.smallest
+		bottomPadding: Appearance.padding.larger
+		placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
+		topPadding: Appearance.padding.larger
 
-		MaterialIcon {
-			id: searchIcon
-
-			anchors.left: parent.left
-			anchors.leftMargin: root.padding + 10
-			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3onSurfaceVariant
-			text: "search"
+		Component.onCompleted: {
+			console.log(search.color);
+			console.log(search.placeholderTextColor);
+			forceActiveFocus();
 		}
-
-		CustomTextField {
-			id: search
-
-			anchors.left: searchIcon.right
-			anchors.leftMargin: Appearance.spacing.small
-			anchors.right: clearIcon.left
-			anchors.rightMargin: Appearance.spacing.small
-			bottomPadding: Appearance.padding.larger
-			placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
-			topPadding: Appearance.padding.larger
-
-			Component.onCompleted: forceActiveFocus()
-			Keys.onDownPressed: list.currentList?.decrementCurrentIndex()
-			Keys.onEscapePressed: root.visibilities.launcher = false
-			Keys.onPressed: event => {
-				if (!Config.launcher.vimKeybinds)
-					return;
-
-				if (event.modifiers & Qt.ControlModifier) {
-					if (event.key === Qt.Key_J) {
-						list.currentList?.incrementCurrentIndex();
-						event.accepted = true;
-					} else if (event.key === Qt.Key_K) {
-						list.currentList?.decrementCurrentIndex();
-						event.accepted = true;
-					}
-				} else if (event.key === Qt.Key_Tab) {
+		Keys.onDownPressed: list.currentList?.decrementCurrentIndex()
+		Keys.onEscapePressed: root.visibilities.launcher = false
+		Keys.onPressed: event => {
+			if (event.modifiers & Qt.ControlModifier) {
+				if (event.key === Qt.Key_J) {
 					list.currentList?.incrementCurrentIndex();
 					event.accepted = true;
-				} else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+				} else if (event.key === Qt.Key_K) {
 					list.currentList?.decrementCurrentIndex();
 					event.accepted = true;
 				}
+			} else if (event.key === Qt.Key_Tab) {
+				list.currentList?.incrementCurrentIndex();
+				event.accepted = true;
+			} else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+				list.currentList?.decrementCurrentIndex();
+				event.accepted = true;
 			}
-			Keys.onUpPressed: list.currentList?.incrementCurrentIndex()
-			onAccepted: {
-				const currentItem = list.currentList?.currentItem;
-				if (currentItem) {
-					if (list.showWallpapers) {
-						if (DynamicColors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
-							Wallpapers.previewColourLock = true;
-						Wallpapers.setWallpaper(currentItem.modelData.path);
-						root.visibilities.launcher = false;
-					} else if (text.startsWith(Config.launcher.actionPrefix)) {
-						if (text.startsWith(`${Config.launcher.actionPrefix}calc `))
-							currentItem.onClicked();
-						else
-							currentItem.modelData.onClicked(list.currentList);
-					} else {
-						Apps.launch(currentItem.modelData);
-						root.visibilities.launcher = false;
-					}
+		}
+		Keys.onUpPressed: list.currentList?.incrementCurrentIndex()
+		onAccepted: {
+			const currentItem = list.currentList?.currentItem;
+			if (currentItem) {
+				if (list.showWallpapers) {
+					if (DynamicColors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
+						Wallpapers.previewColourLock = true;
+					Wallpapers.setWallpaper(currentItem.modelData.path);
+					root.visibilities.launcher = false;
+				} else if (text.startsWith(Config.launcher.actionPrefix)) {
+					if (text.startsWith(`${Config.launcher.actionPrefix}calc `))
+						currentItem.onClicked();
+					else
+						currentItem.modelData.onClicked(list.currentList);
+				} else {
+					Apps.launch(currentItem.modelData);
+					root.visibilities.launcher = false;
 				}
 			}
-
-			Connections {
-				function onLauncherChanged(): void {
-					if (!root.visibilities.launcher)
-						search.text = "";
-				}
-
-				target: root.visibilities
-			}
 		}
 
-		MaterialIcon {
-			id: clearIcon
-
-			anchors.right: parent.right
-			anchors.rightMargin: root.padding + 10
-			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3onSurfaceVariant
-			opacity: {
-				if (!search.text)
-					return 0;
-				if (mouse.pressed)
-					return 0.7;
-				if (mouse.containsMouse)
-					return 0.8;
-				return 1;
-			}
-			text: "close"
-			width: search.text ? implicitWidth : implicitWidth / 2
-
-			Behavior on opacity {
-				Anim {
-					duration: Appearance.anim.durations.small
-				}
-			}
-			Behavior on width {
-				Anim {
-					duration: Appearance.anim.durations.small
-				}
+		Connections {
+			function onLauncherChanged(): void {
+				if (!root.visibilities.launcher)
+					search.text = "";
 			}
 
-			MouseArea {
-				id: mouse
-
-				anchors.fill: parent
-				cursorShape: search.text ? Qt.PointingHandCursor : undefined
-				hoverEnabled: true
-
-				onClicked: search.text = ""
-			}
+			target: root.visibilities
 		}
 	}
 }

Modules/Launcher/ContentList.qml

@@ -17,7 +17,7 @@ Item {
 	required property int padding
 	required property var panels
 	required property int rounding
-	required property CustomTextField search
+	required property SearchBar search
 	readonly property bool showWallpapers: search.text.startsWith(`${Config.launcher.actionPrefix}wallpaper `)
 	required property PersistentProperties visibilities
 

Modules/Launcher/Items/AppItem.qml

@@ -65,5 +65,20 @@ Item {
 				width: root.width - icon.width - Appearance.rounding.normal * 2
 			}
 		}
+
+		Loader {
+			id: favoriteIcon
+
+			active: root.modelData && Strings.testRegexList(Config.launcher.favoriteApps, root.modelData.id)
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			asynchronous: true
+
+			sourceComponent: MaterialIcon {
+				color: DynamicColors.palette.m3primary
+				fill: 1
+				text: "favorite"
+			}
+		}
 	}
 }

Modules/Launcher/Services/Actions.qml

@@ -19,7 +19,7 @@ Searcher {
 	Variants {
 		id: variants
 
-		model: Config.launcher.actions.filter(a => (a.enabled ?? true))
+		model: Config.launcher.actions.filter(a => (a.enabled ?? true) && (Config.launcher.enableDangerousActions || !(a.dangerous ?? false)))
 
 		Action {
 		}

Modules/Launcher/Services/Apps.qml

@@ -74,7 +74,8 @@ Searcher {
 	AppDb {
 		id: appDb
 
-		entries: DesktopEntries.applications.values
+		entries: DesktopEntries.applications.values.filter(a => !Strings.testRegexList(Config.launcher.hiddenApps, a.id))
+		favoriteApps: Config.launcher.favoriteApps
 		path: `${Paths.state}/apps.sqlite`
 	}
 }

Modules/Launcher/WallpaperList.qml

@@ -22,7 +22,7 @@ PathView {
 		let outerMargins = 0;
 		if ((visibilities.utilities || visibilities.sidebar) && panels.utilities.implicitWidth > outerMargins)
 			outerMargins = panels.utilities.implicitWidth;
-		const maxWidth = screen.width - Config.barConfig.rounding * 4 - (barMargins + outerMargins) * 2;
+		const maxWidth = screen.width - Config.bar.rounding * 4 - (barMargins + outerMargins) * 2;
 
 		if (maxWidth <= 0)
 			return 0;
@@ -37,7 +37,7 @@ PathView {
 		return visible;
 	}
 	required property var panels
-	required property CustomTextField search
+	required property SearchBar search
 	required property var visibilities
 
 	cacheItemCount: 4

Modules/MediaWidget.qml

@@ -12,7 +12,7 @@ CustomRect {
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
 	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
 	radius: Appearance.rounding.full
 

Modules/NotifBell.qml

@@ -1,8 +1,7 @@
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
 import qs.Config
-import qs.Helpers
+import qs.Daemons
 import qs.Components
 
 CustomRect {
@@ -12,7 +11,7 @@ CustomRect {
 	required property PersistentProperties visibilities
 
 	color: visibilities.sidebar ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
 	implicitWidth: implicitHeight
 	radius: Appearance.rounding.full
 
@@ -24,7 +23,7 @@ CustomRect {
 		fill: root.visibilities.sidebar ? 1 : 0
 		font.family: "Material Symbols Rounded"
 		font.pointSize: Appearance.font.size.larger
-		text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4"
+		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
 
 		Behavior on color {
 			CAnim {

Modules/Notifications/Content.qml

@@ -1,11 +1,12 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import qs.Config
-import qs.Daemons
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
+import qs.Components
+import qs.Config
+import qs.Daemons
+import qs.Helpers
 
 Item {
 	id: root
@@ -72,7 +73,15 @@ Item {
 				}
 			}
 			model: ScriptModel {
-				values: NotifServer.popups.filter(n => !n.closed)
+				values: {
+					const popups = NotifServer.popups.filter(n => !n.closed);
+
+					if (!Config.notifs.showInFullscreen) {
+						if (Hypr.monitorFor(root.panels.screen).activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false)
+							return [];
+					}
+					return popups;
+				}
 			}
 			move: Transition {
 				Anim {

Modules/Notifications/Sidebar/Utils/Background.qml

@@ -7,7 +7,7 @@ ShapePath {
 	id: root
 
 	readonly property bool flatten: wrapper.height < rounding * 2
-	readonly property real rounding: Config.barConfig.rounding
+	readonly property real rounding: Config.bar.rounding
 	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
 	required property var sidebar
 	required property Wrapper wrapper

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

@@ -73,6 +73,7 @@ CustomRect {
 			CustomSplitButton {
 				active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0]
 				enabled: !Recorder.running
+				menuOnTop: true
 
 				menuItems: [
 					MenuItem {

Modules/Resources.qml

@@ -16,7 +16,7 @@ CustomRect {
 
 	clip: true
 	color: visibilities.resources ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
 	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
 	radius: Appearance.rounding.full
 
@@ -34,8 +34,8 @@ CustomRect {
 		implicitHeight: root.implicitHeight
 		spacing: Appearance.spacing.smaller
 
-		Ref {
-			service: SystemUsage
+		ServiceRef {
+			service: Gpu
 		}
 
 		ServiceRef {
@@ -70,7 +70,7 @@ CustomRect {
 			icon: "gamepad"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3tertiary
-			percentage: SystemUsage.gpuPerc
+			percentage: Gpu.percentage
 		}
 
 		Resource {
@@ -78,7 +78,7 @@ CustomRect {
 			icon: "developer_board"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
-			percentage: SystemUsage.gpuMemUsed
+			percentage: Gpu.memoryUsed / Gpu.memoryTotal
 		}
 	}
 }

Modules/Resources/Content.qml

@@ -55,18 +55,18 @@ Item {
 				WrappedLoader {
 					id: gpuCard
 
-					active: Config.dashboard.performance.showGpu && SystemUsage.gpuType !== ""
+					active: Config.dashboard.performance.showGpu && Gpu.type !== Gpu.None
 
 					sourceComponent: HeroCard {
 						accent: DynamicColors.palette.m3secondary
 						icon: "desktop_windows"
 						label: qsTr("GPU")
-						subLabel: SystemUsage.gpuName
-						temperature: SystemUsage.gpuTemp
-						usage: SystemUsage.gpuPerc
+						subLabel: Gpu.name
+						temperature: Gpu.temperature
+						usage: Gpu.percentage
 
-						Ref {
-							service: SystemUsage
+						ServiceRef {
+							service: Gpu
 						}
 					}
 				}

Modules/Settings/Categories.qml

@@ -1,370 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import Quickshell.Widgets
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Modules as Modules
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	required property Item content
-
-	signal settingSelected(string category, string section, string settingName)
-
-	// Function to select category by key
-	function selectCategory(categoryKey: string) {
-		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 + clayout.anchors.margins * 2
-	implicitWidth: clayout.contentWidth + clayout.anchors.margins * 2
-
-	ListModel {
-		id: systemCats
-
-		ListElement {
-			_index: 0
-			icon: "settings"
-			key: "general"
-			name: "General"
-		}
-
-		ListElement {
-			_index: 1
-			icon: "build_circle"
-			key: "services"
-			name: "Services"
-		}
-
-		ListElement {
-			_index: 2
-			icon: "notifications"
-			key: "notifications"
-			name: "Notifications"
-		}
-
-		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 {
-			_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 {
-			_index: 13
-			icon: "colors"
-			key: "appearance"
-			name: "Appearance"
-		}
-	}
-
-	CustomClippingRect {
-		anchors.fill: parent
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.normal
-
-		CustomFlickable {
-			id: clayout
-
-			anchors.fill: parent
-			anchors.margins: Appearance.padding.extraSmall
-			contentHeight: contentItem.childrenRect.height
-			contentWidth: contentItem.childrenRect.width
-			flickableDirection: Flickable.VerticalFlick
-
-			ColumnLayout {
-				anchors.horizontalCenter: parent.horizontalCenter
-				anchors.top: parent.top
-				spacing: Appearance.spacing.normal
-
-				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
-					// 		}
-					// 	}
-					// }
-				}
-			}
-		}
-	}
-
-	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
-
-		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
-
-			anchors.left: parent.left
-			anchors.margins: Appearance.padding.smaller
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-
-			MaterialIcon {
-				id: icon
-
-				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-				Layout.fillHeight: true
-				Layout.leftMargin: Appearance.padding.small
-				Layout.preferredWidth: icon.contentWidth
-				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
-
-				Behavior on fill {
-					Anim {
-					}
-				}
-			}
-
-			CustomText {
-				id: text
-
-				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-				Layout.leftMargin: Appearance.spacing.normal
-				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-				text: categoryItem.name
-				verticalAlignment: Text.AlignVCenter
-			}
-		}
-
-		StateLayer {
-			id: layer
-
-			color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-
-			onClicked: {
-				root.content.setCategory(categoryItem.key, categoryItem._index);
-				categoryItem.view.currentIndex = categoryItem.index;
-			}
-		}
-	}
-}

Modules/Settings/Categories/Appearance.qml

@@ -1,162 +0,0 @@
-import QtQuick
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	id: root
-
-	SettingsSection {
-		sectionId: "Scale"
-
-		SettingsHeader {
-			name: "Scale"
-		}
-
-		SettingSpinBox {
-			name: "Rounding scale"
-			object: Config.appearance.rounding
-			setting: "scale"
-			step: 0.1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Spacing scale"
-			object: Config.appearance.spacing
-			setting: "scale"
-			step: 0.1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Padding scale"
-			object: Config.appearance.padding
-			setting: "scale"
-			step: 0.1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Font size scale"
-			object: Config.appearance.font.size
-			setting: "scale"
-			step: 0.1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Animation duration scale"
-			object: Config.appearance.anim.durations
-			setting: "scale"
-			step: 0.1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Deform animation scale"
-			object: Config.appearance.deform
-			setting: "scale"
-			step: 0.1
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Fonts"
-
-		SettingsHeader {
-			name: "Fonts"
-		}
-
-		SettingListView {
-			name: "Sans family"
-			object: Config.appearance.font.family
-			setting: "sans"
-			stringList: Qt.fontFamilies()
-		}
-
-		Separator {
-		}
-
-		SettingListView {
-			name: "Monospace family"
-			object: Config.appearance.font.family
-			setting: "mono"
-			stringList: Qt.fontFamilies()
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Animation"
-
-		SettingsHeader {
-			name: "Animation"
-		}
-
-		SettingSpinBox {
-			name: "Media GIF speed adjustment"
-			object: Config.appearance.anim
-			setting: "mediaGifSpeedAdjustment"
-			step: 10
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 5
-			min: 0
-			name: "Session GIF speed"
-			object: Config.appearance.anim
-			setting: "sessionGifSpeed"
-			step: 0.1
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Transparency"
-
-		SettingsHeader {
-			name: "Transparency"
-		}
-
-		SettingSwitch {
-			name: "Enable transparency"
-			object: Config.appearance.transparency
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 1
-			min: 0
-			name: "Base opacity"
-			object: Config.appearance.transparency
-			setting: "base"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 1
-			min: 0
-			name: "Layer opacity"
-			object: Config.appearance.transparency
-			setting: "layers"
-			step: 0.05
-		}
-	}
-}

Modules/Settings/Categories/Background.qml

@@ -1,48 +0,0 @@
-import Quickshell
-import QtQuick.Layouts
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	id: root
-
-	required property ShellScreen screen
-
-	SettingsSection {
-		sectionId: "Wallpaper"
-
-		SettingsHeader {
-			name: "Wallpaper"
-		}
-
-		SettingSwitch {
-			name: "Enable wallpaper rendering"
-			object: Config.background
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Fade duration"
-			object: Config.background
-			setting: "wallFadeDuration"
-			step: 50
-		}
-
-		Separator {
-		}
-
-		WallpaperCropper {
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Wallpapers"
-
-		WallpaperGrid {
-		}
-	}
-}

Modules/Settings/Categories/Bar.qml

@@ -1,217 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Bar"
-
-		SettingsHeader {
-			name: "Bar"
-		}
-
-		SettingSwitch {
-			name: "Auto hide"
-			object: Config.barConfig
-			setting: "autoHide"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Height"
-			object: Config.barConfig
-			setting: "height"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Rounding"
-			object: Config.barConfig
-			setting: "rounding"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Border"
-			object: Config.barConfig
-			setting: "border"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Smoothing"
-			object: Config.barConfig
-			setting: "smoothing"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Tray"
-
-		SettingsHeader {
-			name: "System tray"
-		}
-
-		SettingSpinBox {
-			min: 16
-			name: "Tray icon size"
-			object: Config.barConfig.tray
-			setting: "trayIconSize"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Popouts"
-
-		SettingsHeader {
-			name: "Popouts"
-		}
-
-		SettingSwitch {
-			name: "Tray"
-			object: Config.barConfig.popouts
-			setting: "tray"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Audio"
-			object: Config.barConfig.popouts
-			setting: "audio"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Active window"
-			object: Config.barConfig.popouts
-			setting: "activeWindow"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Resources"
-			object: Config.barConfig.popouts
-			setting: "resources"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Clock"
-			object: Config.barConfig.popouts
-			setting: "clock"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Network"
-			object: Config.barConfig.popouts
-			setting: "network"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Power"
-			object: Config.barConfig.popouts
-			setting: "upower"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Entries"
-
-		SettingsHeader {
-			name: "Entries"
-		}
-
-		SettingBarEntryList {
-			name: "Bar entries"
-			object: Config.barConfig
-			setting: "entries"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Dock"
-
-		SettingsHeader {
-			name: "Dock"
-		}
-
-		SettingSwitch {
-			name: "Enable dock"
-			object: Config.dock
-			setting: "enable"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Dock height"
-			object: Config.dock
-			setting: "height"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Hover to reveal"
-			object: Config.dock
-			setting: "hoverToReveal"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Pin on startup"
-			object: Config.dock
-			setting: "pinnedOnStartup"
-		}
-
-		Separator {
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add pinned app")
-			name: "Pinned apps"
-			object: Config.dock
-			setting: "pinnedApps"
-		}
-
-		Separator {
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add ignored regex")
-			name: "Ignored app regexes"
-			object: Config.dock
-			setting: "ignoredAppRegexes"
-		}
-	}
-}

Modules/Settings/Categories/Dashboard.qml

@@ -1,218 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Dashboard"
-
-		SettingsHeader {
-			name: "Dashboard"
-		}
-
-		SettingSwitch {
-			name: "Enable dashboard"
-			object: Config.dashboard
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Media update interval"
-			object: Config.dashboard
-			setting: "mediaUpdateInterval"
-			step: 50
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Resource update interval"
-			object: Config.dashboard
-			setting: "resourceUpdateInterval"
-			step: 50
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Drag threshold"
-			object: Config.dashboard
-			setting: "dragThreshold"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Performance"
-
-		SettingsHeader {
-			name: "Performance"
-		}
-
-		SettingSwitch {
-			name: "Show battery"
-			object: Config.dashboard.performance
-			setting: "showBattery"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show GPU"
-			object: Config.dashboard.performance
-			setting: "showGpu"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show CPU"
-			object: Config.dashboard.performance
-			setting: "showCpu"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show memory"
-			object: Config.dashboard.performance
-			setting: "showMemory"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show storage"
-			object: Config.dashboard.performance
-			setting: "showStorage"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show network"
-			object: Config.dashboard.performance
-			setting: "showNetwork"
-		}
-	}
-
-	// SettingsSection {
-	// 	sectionId: "Layout Sizes"
-	//
-	// 	SettingsHeader {
-	// 		name: "Layout Sizes"
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Tab indicator height"
-	// 		value: String(Config.dashboard.sizes.tabIndicatorHeight)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Tab indicator spacing"
-	// 		value: String(Config.dashboard.sizes.tabIndicatorSpacing)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Info width"
-	// 		value: String(Config.dashboard.sizes.infoWidth)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Info icon size"
-	// 		value: String(Config.dashboard.sizes.infoIconSize)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Date time width"
-	// 		value: String(Config.dashboard.sizes.dateTimeWidth)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Media width"
-	// 		value: String(Config.dashboard.sizes.mediaWidth)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Media progress sweep"
-	// 		value: String(Config.dashboard.sizes.mediaProgressSweep)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Media progress thickness"
-	// 		value: String(Config.dashboard.sizes.mediaProgressThickness)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Resource progress thickness"
-	// 		value: String(Config.dashboard.sizes.resourceProgessThickness)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Weather width"
-	// 		value: String(Config.dashboard.sizes.weatherWidth)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Media cover art size"
-	// 		value: String(Config.dashboard.sizes.mediaCoverArtSize)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Media visualiser size"
-	// 		value: String(Config.dashboard.sizes.mediaVisualiserSize)
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingReadOnly {
-	// 		name: "Resource size"
-	// 		value: String(Config.dashboard.sizes.resourceSize)
-	// 	}
-	// }
-}

Modules/Settings/Categories/General.qml

@@ -1,308 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import qs.Modules.Settings.Controls
-import qs.Config
-import qs.Components
-import qs.Helpers
-
-SettingsPage {
-	id: root
-
-	function schemeTypeItem(items, value) {
-		for (let i = 0; i < items.length; i++) {
-			const item = items[i];
-			if (item.value === value)
-				return item;
-		}
-
-		return items[0] ?? null;
-	}
-
-	SettingsSection {
-		sectionId: "General"
-
-		SettingsHeader {
-			name: "General"
-		}
-
-		SettingInput {
-			name: "Logo"
-			object: Config.general
-			setting: "logo"
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "Wallpaper path"
-			object: Config.general
-			setting: "wallpaperPath"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Desktop icons"
-			object: Config.general
-			setting: "desktopIcons"
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "Date format"
-			object: Config.general
-			setting: "dateFormat"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Color"
-		z: 1
-
-		SettingsHeader {
-			name: "Color"
-		}
-
-		CustomSplitButtonRow {
-			active: Config.general.color.mode === "light" ? menuItems[0] : menuItems[1]
-			enabled: Config.general.color.schemeGeneration
-			label: qsTr("Scheme mode")
-
-			menuItems: [
-				MenuItem {
-					icon: "light_mode"
-					text: qsTr("Light")
-					value: "light"
-				},
-				MenuItem {
-					icon: "dark_mode"
-					text: qsTr("Dark")
-					value: "dark"
-				}
-			]
-
-			onSelected: item => {
-				Config.general.color.mode = item.value;
-				Config.save();
-
-				if (item.value === "light")
-					ModeScheduler.applyLightMode();
-				else if (item.value === "dark")
-					ModeScheduler.applyDarkMode();
-			}
-		}
-
-		Separator {
-		}
-
-		CustomSplitButtonRow {
-			id: schemeType
-
-			active: root.schemeTypeItem(menuItems, Config.colors.schemeType)
-			enabled: Config.general.color.schemeGeneration
-			label: qsTr("Scheme type")
-
-			menuItems: [
-				MenuItem {
-					icon: "palette"
-					text: qsTr("Vibrant")
-					value: "vibrant"
-				},
-				MenuItem {
-					icon: "gesture"
-					text: qsTr("Expressive")
-					value: "expressive"
-				},
-				MenuItem {
-					icon: "contrast"
-					text: qsTr("Monochrome")
-					value: "monochrome"
-				},
-				MenuItem {
-					icon: "tonality"
-					text: qsTr("Neutral")
-					value: "neutral"
-				},
-				MenuItem {
-					icon: "gradient"
-					text: qsTr("Tonal spot")
-					value: "tonal-spot"
-				},
-				MenuItem {
-					icon: "target"
-					text: qsTr("Fidelity")
-					value: "fidelity"
-				},
-				MenuItem {
-					icon: "article"
-					text: qsTr("Content")
-					value: "content"
-				},
-				MenuItem {
-					icon: "colors"
-					text: qsTr("Rainbow")
-					value: "rainbow"
-				},
-				MenuItem {
-					icon: "nutrition"
-					text: qsTr("Fruit salad")
-					value: "fruit-salad"
-				}
-			]
-
-			onSelected: item => {
-				Config.colors.schemeType = item.value;
-				Config.save();
-
-				Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--scheme", item.value]);
-			}
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Automatic color scheme"
-			object: Config.general.color
-			setting: "schemeGeneration"
-		}
-
-		Separator {
-			shouldBeActive: Config.general.color.schemeGeneration ? 0 : 1
-		}
-
-		SchemesListView {
-			name: "Color scheme presets"
-			object: Config.colors.presets
-			setting: "name"
-			shouldBeActive: Config.general.color.schemeGeneration ? 0 : 1
-			stringList: FetchPresets.presetNames()
-		}
-
-		Separator {
-			shouldBeActive: Config.colors.presets.name !== "" && !Config.general.color.schemeGeneration
-		}
-
-		SchemesListView {
-			name: "Preset variant"
-			object: Config.colors.presets
-			setting: "variant"
-			shouldBeActive: Config.colors.presets.name !== "" && !Config.general.color.schemeGeneration
-			stringList: FetchPresets.variantNames(Config.colors.presets.name)
-
-			onOptionSet: item => {
-				Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--preset", `${Config.colors.presets.name.toLowerCase()}:${item}`]);
-			}
-		}
-
-		Separator {
-			shouldBeActive: Config.colors.presets.variant !== "" && FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant).length > 0 && !Config.general.color.schemeGeneration
-		}
-
-		SchemesListView {
-			name: "Preset accent"
-			object: Config.colors.presets
-			setting: "accent"
-			shouldBeActive: Config.colors.presets.variant !== "" && FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant).length > 0 && !Config.general.color.schemeGeneration
-			stringList: FetchPresets.accents(Config.colors.presets.name, Config.colors.presets.variant)
-
-			onOptionSet: item => {
-				Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--preset", `${Config.colors.presets.name.toLowerCase()}:${Config.colors.presets.variant}`, "--accent", `${item}`]);
-			}
-		}
-
-		Separator {
-			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
-		}
-
-		SettingSwitch {
-			name: "Smart color scheme"
-			object: Config.general.color
-			setting: "smart"
-			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
-		}
-
-		Separator {
-			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
-		}
-
-		TimeInput {
-			name: "Schedule dark mode"
-			object: Config.general.color
-			settings: ["scheduleDark", "scheduleDarkStart", "scheduleDarkEnd"]
-			shouldBeActive: Config.general.color.schemeGeneration
-		}
-
-		Separator {
-		}
-
-		HyprTimeInput {
-			name: "Schedule Hyprsunset"
-			object: Config.general.color
-			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"
-
-		SettingsHeader {
-			name: "Default Apps"
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add terminal command")
-			name: "Terminal"
-			object: Config.general.apps
-			setting: "terminal"
-		}
-
-		Separator {
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add audio command")
-			name: "Audio"
-			object: Config.general.apps
-			setting: "audio"
-		}
-
-		Separator {
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add playback command")
-			name: "Playback"
-			object: Config.general.apps
-			setting: "playback"
-		}
-
-		Separator {
-		}
-
-		SettingStringList {
-			addLabel: qsTr("Add explorer command")
-			name: "Explorer"
-			object: Config.general.apps
-			setting: "explorer"
-		}
-	}
-}

Modules/Settings/Categories/Launcher.qml

@@ -1,165 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Launcher"
-
-		SettingsHeader {
-			name: "Launcher"
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Max apps shown"
-			object: Config.launcher
-			setting: "maxAppsShown"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Max wallpapers shown"
-			object: Config.launcher
-			setting: "maxWallpapers"
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "Action prefix"
-			object: Config.launcher
-			setting: "actionPrefix"
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "Special prefix"
-			object: Config.launcher
-			setting: "specialPrefix"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Use UWSM launch command"
-			object: Config.launcher
-			setting: "uwsm"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Fuzzy Search"
-
-		SettingsHeader {
-			name: "Fuzzy Search"
-		}
-
-		SettingSwitch {
-			name: "Apps"
-			object: Config.launcher.useFuzzy
-			setting: "apps"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Actions"
-			object: Config.launcher.useFuzzy
-			setting: "actions"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Schemes"
-			object: Config.launcher.useFuzzy
-			setting: "schemes"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Variants"
-			object: Config.launcher.useFuzzy
-			setting: "variants"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Wallpapers"
-			object: Config.launcher.useFuzzy
-			setting: "wallpapers"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Sizes"
-
-		SettingsHeader {
-			name: "Sizes"
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Item width"
-			object: Config.launcher.sizes
-			setting: "itemWidth"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Item height"
-			object: Config.launcher.sizes
-			setting: "itemHeight"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Wallpaper width"
-			object: Config.launcher.sizes
-			setting: "wallpaperWidth"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Wallpaper height"
-			object: Config.launcher.sizes
-			setting: "wallpaperHeight"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Actions"
-
-		SettingsHeader {
-			name: "Actions"
-		}
-
-		SettingActionList {
-			name: "Launcher actions"
-			object: Config.launcher
-			setting: "actions"
-		}
-	}
-}

Modules/Settings/Categories/Lockscreen.qml

@@ -1,125 +0,0 @@
-import qs.Modules.Settings.Categories.Lockscreen
-import qs.Modules.Settings.Controls
-import qs.Helpers
-import qs.Config
-
-SettingsPage {
-	id: root
-
-	SettingsSection {
-		sectionId: "Lockscreen"
-
-		SettingsHeader {
-			name: "Lockscreen"
-		}
-
-		SettingSwitch {
-			name: "Recolor logo"
-			object: Config.lock
-			setting: "recolorLogo"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Enable fingerprint"
-			object: Config.lock
-			setting: "enableFprint"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Max fingerprint tries"
-			object: Config.lock
-			setting: "maxFprintTries"
-			step: 1
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show notification details"
-			object: Config.lock
-			setting: "showNotifContent"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Show notification icon"
-			object: Config.lock
-			setting: "showNotifIcon"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 0
-			name: "Blur amount"
-			object: Config.lock
-			setting: "blurAmount"
-			step: 1
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 2
-			min: 0.1
-			name: "Height multiplier"
-			object: Config.lock.sizes
-			setting: "heightMult"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 4
-			min: 0.5
-			name: "Aspect ratio"
-			object: Config.lock.sizes
-			setting: "ratio"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 100
-			name: "Center width"
-			object: Config.lock.sizes
-			setting: "centerWidth"
-			step: 10
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Greeter"
-
-		SettingsHeader {
-			name: "Greeter"
-		}
-
-		SettingsIconButton {
-			name: "Install wallpaper and color scheme to greeter"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Idle"
-
-		Idle {
-		}
-	}
-}

Modules/Settings/Categories/Lockscreen/Idle.qml

@@ -1,115 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Modules.Settings.Controls
-
-ColumnLayout {
-	id: root
-
-	property bool shouldBeActive: true
-
-	function addTimeoutEntry() {
-		let list = [...Config.general.idle.timeouts];
-
-		list.push({
-			name: "New Entry",
-			timeout: 600,
-			idleAction: "lock"
-		});
-
-		Config.general.idle.timeouts = list;
-		Config.save();
-	}
-
-	function deleteTimeoutEntry(index) {
-		let list = [...Config.general.idle.timeouts];
-		list.splice(index, 1);
-		Config.general.idle.timeouts = list;
-		Config.save();
-	}
-
-	function updateTimeoutEntry(i, key, value) {
-		const list = [...Config.general.idle.timeouts];
-		let entry = list[i];
-
-		entry[key] = value;
-		list[i] = entry;
-
-		Config.general.idle.timeouts = list;
-		Config.save();
-	}
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	height: shouldBeActive ? implicitHeight : 0
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	spacing: Appearance.spacing.smaller
-	visible: opacity > 0
-
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-	Behavior on y {
-		Anim {
-		}
-	}
-
-	Settings {
-		name: "Idle Monitors"
-	}
-
-	Repeater {
-		model: [...Config.general.idle.timeouts]
-
-		SettingList {
-			Layout.fillWidth: true
-			anchors.left: undefined
-			anchors.right: undefined
-
-			onAddActiveActionRequested: {
-				root.updateTimeoutEntry(index, "activeAction", "");
-			}
-			onDeleteRequested: function (index) {
-				root.deleteTimeoutEntry(index);
-			}
-			onFieldEdited: function (key, value) {
-				root.updateTimeoutEntry(index, key, value);
-			}
-		}
-	}
-
-	IconButton {
-		font.pointSize: Appearance.font.size.large
-		icon: "add"
-
-		onClicked: root.addTimeoutEntry()
-	}
-
-	component Settings: CustomRect {
-		id: settingsItem
-
-		required property string name
-
-		Layout.preferredHeight: 60
-		Layout.preferredWidth: 200
-
-		CustomText {
-			id: text
-
-			anchors.fill: parent
-			font.bold: true
-			font.pointSize: Appearance.font.size.large * 2
-			text: settingsItem.name
-			verticalAlignment: Text.AlignVCenter
-		}
-	}
-}

Modules/Settings/Categories/Notifications.qml

@@ -1,116 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Notifications"
-
-		SettingsHeader {
-			name: "Notifications"
-		}
-
-		SettingSwitch {
-			name: "Expire notifications"
-			object: Config.notifs
-			setting: "expire"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Default expire timeout"
-			min: 0
-			object: Config.notifs
-			setting: "defaultExpireTimeout"
-			step: 100
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "App notification cooldown"
-			min: 0
-			object: Config.notifs
-			setting: "appNotifCooldown"
-			step: 100
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Clear threshold"
-			max: 1
-			min: 0
-			object: Config.notifs
-			setting: "clearThreshold"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Expand threshold"
-			min: 0
-			object: Config.notifs
-			setting: "expandThreshold"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Action on click"
-			object: Config.notifs
-			setting: "actionOnClick"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Group preview count"
-			min: 1
-			object: Config.notifs
-			setting: "groupPreviewNum"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Sizes"
-
-		SettingsHeader {
-			name: "Sizes"
-		}
-
-		SettingSpinBox {
-			name: "Width"
-			min: 1
-			object: Config.notifs.sizes
-			setting: "width"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Image size"
-			min: 1
-			object: Config.notifs.sizes
-			setting: "image"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Badge size"
-			min: 1
-			object: Config.notifs.sizes
-			setting: "badge"
-		}
-	}
-}

Modules/Settings/Categories/Osd.qml

@@ -1,81 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "On Screen Display"
-
-		SettingsHeader {
-			name: "On Screen Display"
-		}
-
-		SettingSwitch {
-			name: "Enable OSD"
-			object: Config.osd
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Hide delay"
-			min: 0
-			object: Config.osd
-			setting: "hideDelay"
-			step: 100
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Enable brightness OSD"
-			object: Config.osd
-			setting: "enableBrightness"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Enable microphone OSD"
-			object: Config.osd
-			setting: "enableMicrophone"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Brightness on all monitors"
-			object: Config.osd
-			setting: "allMonBrightness"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Sizes"
-
-		SettingsHeader {
-			name: "Sizes"
-		}
-
-		SettingSpinBox {
-			name: "Slider width"
-			min: 1
-			object: Config.osd.sizes
-			setting: "sliderWidth"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Slider height"
-			min: 1
-			object: Config.osd.sizes
-			setting: "sliderHeight"
-		}
-	}
-}

Modules/Settings/Categories/Screenshot.qml

@@ -1,150 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-import qs.Components
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Screenshot"
-
-		SettingsHeader {
-			name: "Screenshot"
-		}
-
-		SettingSwitch {
-			name: "Enable effects"
-			object: Config.screenshot
-			setting: "enable_pp"
-		}
-
-		Separator {
-		}
-
-		CustomSplitButtonRow {
-			active: Config.screenshot.mode === "manual" ? menuItems[0] : menuItems[1]
-			enabled: Config.screenshot.enable_pp
-			label: qsTr("Effects mode")
-
-			menuItems: [
-				MenuItem {
-					icon: "build"
-					text: qsTr("Manual")
-					value: "manual"
-				},
-				MenuItem {
-					icon: "rotate_auto"
-					text: qsTr("Auto")
-					value: "auto"
-				}
-			]
-
-			onSelected: item => {
-				Config.screenshot.mode = item.value;
-				Config.save();
-			}
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual"
-		}
-
-		SettingSwitch {
-			enabled: Config.screenshot.enable_pp
-			name: "Enable rounded corners"
-			object: Config.screenshot
-			setting: "rounding"
-			shouldBeActive: Config.screenshot.mode === "manual"
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.rounding
-		}
-
-		SettingSpinBox {
-			enabled: Config.screenshot.enable_pp
-			min: 0
-			name: "Corner radius"
-			object: Config.screenshot
-			setting: "radius"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.rounding
-			step: 1
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual"
-		}
-
-		SettingSwitch {
-			enabled: Config.screenshot.enable_pp
-			name: "Enable shadow"
-			object: Config.screenshot
-			setting: "shadow"
-			shouldBeActive: Config.screenshot.mode === "manual"
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-		}
-
-		SettingSpinBox {
-			enabled: Config.screenshot.enable_pp
-			min: 0
-			name: "Shadow blur amount"
-			object: Config.screenshot
-			setting: "shadow_blur"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-			step: 1
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-		}
-
-		// SettingSwitch {
-		// 	name: "Shadow color broken atm"
-		// 	object: Config.Screenshot
-		// 	setting: "shadow_color"
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
-		// }
-		//
-		// Separator {
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
-		// }
-
-		// SettingSpinBox {
-		// 	min: 1
-		// 	name: "Shadow passes"
-		// 	object: Config.screenshot
-		// 	setting: "shadow_blur_passes"
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
-		// 	step: 1
-		// }
-		//
-		// Separator {
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
-		// }
-
-		SettingSpinBox {
-			enabled: Config.screenshot.enable_pp
-			min: 0
-			name: "Shadow offset X"
-			object: Config.screenshot
-			setting: "shadow_offset_x"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-			step: 1
-		}
-
-		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-		}
-
-		SettingSpinBox {
-			enabled: Config.screenshot.enable_pp
-			min: 0
-			name: "Shadow offset Y"
-			object: Config.screenshot
-			setting: "shadow_offset_y"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
-			step: 1
-		}
-	}
-}

Modules/Settings/Categories/Services.qml

@@ -1,145 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Services"
-
-		SettingsHeader {
-			name: "Services"
-		}
-
-		SettingInput {
-			name: "Weather location"
-			object: Config.services
-			setting: "weatherLocation"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Check for updates"
-			object: Config.services
-			setting: "updates"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Use Fahrenheit"
-			object: Config.services
-			setting: "useFahrenheit"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Use twelve hour clock"
-			object: Config.services
-			setting: "useTwelveHourClock"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Enable ddcutil service"
-			object: Config.services
-			setting: "ddcutilService"
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "GPU type"
-			object: Config.services
-			setting: "gpuType"
-		}
-	}
-
-	SettingsSection {
-		sectionId: "Media"
-
-		SettingsHeader {
-			name: "Media"
-		}
-
-		SettingSpinBox {
-			max: 1
-			min: 0
-			name: "Audio increment"
-			object: Config.services
-			setting: "audioIncrement"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 1
-			min: 0
-			name: "Brightness increment"
-			object: Config.services
-			setting: "brightnessIncrement"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 1.0
-			min: 0
-			name: "Minimum brightness"
-			object: Config.services
-			setting: "minBrightness"
-			step: 0.01
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			max: 5
-			min: 0
-			name: "Max volume"
-			object: Config.services
-			setting: "maxVolume"
-			step: 0.05
-		}
-
-		Separator {
-		}
-
-		SettingInput {
-			name: "Default player"
-			object: Config.services
-			setting: "defaultPlayer"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Visualizer resolution"
-			object: Config.services
-			setting: "visualizerBars"
-			step: 1
-		}
-
-		Separator {
-		}
-
-		SettingAliasList {
-			name: "Player aliases"
-			object: Config.services
-			setting: "playerAliases"
-		}
-	}
-}

Modules/Settings/Categories/Sidebar.qml

@@ -1,28 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Sidebar"
-
-		SettingsHeader {
-			name: "Sidebar"
-		}
-
-		SettingSwitch {
-			name: "Enable sidebar"
-			object: Config.sidebar
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			name: "Width"
-			min: 1
-			object: Config.sidebar.sizes
-			setting: "width"
-		}
-	}
-}

Modules/Settings/Categories/SystemUpdates.qml

@@ -1,197 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick.Layouts
-import QtQuick
-import qs.Config
-import qs.Helpers
-import qs.Components
-import qs.Modules.Settings.Controls
-
-CustomClippingRect {
-	id: root
-
-	radius: Appearance.rounding.normal - Appearance.padding.smaller
-
-	ColumnLayout {
-		anchors.fill: parent
-
-		RowLayout {
-			Layout.fillWidth: true
-			Layout.margins: Appearance.padding.large
-			spacing: Appearance.spacing.large
-
-			MaterialIcon {
-				font.pointSize: Appearance.font.size.larger * 4
-				text: "update"
-			}
-
-			ColumnLayout {
-				CustomText {
-					font.pointSize: Appearance.font.size.large * 2
-					text: "System updates"
-				}
-
-				RowLayout {
-					id: row
-
-					Layout.fillWidth: true
-
-					CustomText {
-						id: text
-
-						Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-						Layout.fillWidth: true
-						font.pointSize: Appearance.font.size.larger
-						text: `${Updates.availableUpdates} available updates`
-					}
-
-					CustomRect {
-						Layout.preferredHeight: 40
-						Layout.preferredWidth: 150
-						color: Updates.updating ? DynamicColors.layer(DynamicColors.palette.m3outline, 2) : DynamicColors.palette.m3primary
-						radius: Appearance.rounding.full
-
-						RowLayout {
-							anchors.centerIn: parent
-
-							MaterialIcon {
-								animate: true
-								color: DynamicColors.palette.m3onPrimary
-								font.pointSize: Appearance.font.size.large
-								text: Updates.updating ? "update" : "download"
-							}
-
-							CustomText {
-								color: Updates.updating ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onPrimary
-								text: "Update all"
-							}
-						}
-
-						StateLayer {
-							color: DynamicColors.palette.m3onPrimary
-							enabled: !Updates.updating
-
-							onClicked: Updates.performSystemUpdate()
-						}
-					}
-				}
-			}
-		}
-
-		CustomListView {
-			id: view
-
-			readonly property int itemHeight: 50 + Appearance.padding.smaller * 2
-
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-			clip: true
-			contentHeight: height
-			spacing: Appearance.spacing.normal
-
-			delegate: CustomRect {
-				id: update
-
-				required property var modelData
-				readonly property list<string> sections: modelData.update.split(" ")
-
-				color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: view.itemHeight
-				implicitWidth: parent.width
-				radius: Appearance.rounding.small - Appearance.padding.small
-
-				RowLayout {
-					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
-					anchors.rightMargin: Appearance.padding.smaller
-
-					MaterialIcon {
-						font.pointSize: Appearance.font.size.large * 2
-						text: "package_2"
-					}
-
-					ColumnLayout {
-						Layout.fillWidth: true
-
-						CustomText {
-							Layout.fillWidth: true
-							Layout.preferredHeight: 25
-							elide: Text.ElideRight
-							font.pointSize: Appearance.font.size.large
-							text: update.sections[0]
-						}
-
-						CustomText {
-							Layout.fillWidth: true
-							color: DynamicColors.palette.m3onSurfaceVariant
-							text: Updates.formatUpdateTime(update.modelData.timestamp)
-						}
-					}
-
-					RowLayout {
-						Layout.fillHeight: true
-						Layout.preferredWidth: 500
-
-						MarqueeText {
-							id: versionFrom
-
-							Layout.fillHeight: true
-							Layout.preferredWidth: 225
-							animate: true
-							color: DynamicColors.palette.m3tertiary
-							font.pointSize: Appearance.font.size.large
-							horizontalAlignment: Text.AlignHCenter
-							marqueeEnabled: true
-							pauseMs: 4000
-							text: update.sections[1]
-							width: 225
-						}
-
-						MaterialIcon {
-							Layout.fillHeight: true
-							color: DynamicColors.palette.m3secondary
-							font.pointSize: Appearance.font.size.extraLarge
-							horizontalAlignment: Text.AlignHCenter
-							text: "arrow_right_alt"
-							verticalAlignment: Text.AlignVCenter
-						}
-
-						MarqueeText {
-							id: versionTo
-
-							Layout.fillHeight: true
-							Layout.preferredWidth: 225
-							animate: true
-							color: DynamicColors.palette.m3primary
-							font.pointSize: Appearance.font.size.large
-							horizontalAlignment: Text.AlignHCenter
-							marqueeEnabled: true
-							pauseMs: 4000
-							text: update.sections[3]
-							width: 225
-						}
-					}
-
-					IconButton {
-						Layout.preferredHeight: width
-						icon: "download"
-
-						onClicked: {
-							Updates.performPackageUpdate(update.sections[0]);
-						}
-					}
-				}
-			}
-			model: ScriptModel {
-				id: script
-
-				objectProp: "update"
-				values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
-							update,
-							timestamp
-						}))
-			}
-		}
-	}
-}

Modules/Settings/Categories/Utilities.qml

@@ -1,245 +0,0 @@
-import qs.Modules.Settings.Controls
-import qs.Config
-
-SettingsPage {
-	SettingsSection {
-		sectionId: "Utilities"
-
-		SettingsHeader {
-			name: "Utilities"
-		}
-
-		SettingSwitch {
-			name: "Enable utilities"
-			object: Config.utilities
-			setting: "enabled"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Max toasts"
-			object: Config.utilities
-			setting: "maxToasts"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Panel width"
-			object: Config.utilities.sizes
-			setting: "width"
-		}
-
-		Separator {
-		}
-
-		SettingSpinBox {
-			min: 1
-			name: "Toast width"
-			object: Config.utilities.sizes
-			setting: "toastWidth"
-		}
-	}
-
-	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"
-
-		SettingsHeader {
-			name: "Toasts"
-		}
-
-		SettingSwitch {
-			name: "Config loaded"
-			object: Config.utilities.toasts
-			setting: "configLoaded"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Charging changed"
-			object: Config.utilities.toasts
-			setting: "chargingChanged"
-		}
-
-		Separator {
-		}
-
-		SettingSwitch {
-			name: "Game mode changed"
-			object: Config.utilities.toasts
-			setting: "gameModeChanged"
-		}
-
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Do not disturb changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "dndChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Audio output changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "audioOutputChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Audio input changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "audioInputChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Caps lock changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "capsLockChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Num lock changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "numLockChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Keyboard layout changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "kbLayoutChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "VPN changed"
-		// 	object: Config.utilities.toasts
-		// 	setting: "vpnChanged"
-		// }
-		//
-		// Separator {
-		// }
-		//
-		// SettingSwitch {
-		// 	name: "Now playing"
-		// 	object: Config.utilities.toasts
-		// 	setting: "nowPlaying"
-		// }
-	}
-
-	// SettingsSection {
-	// 	sectionId: "VPN"
-	//
-	// 	SettingsHeader {
-	// 		name: "VPN"
-	// 	}
-	//
-	// 	SettingSwitch {
-	// 		name: "Enable VPN integration"
-	// 		object: Config.utilities.vpn
-	// 		setting: "enabled"
-	// 	}
-	//
-	// 	Separator {
-	// 	}
-	//
-	// 	SettingStringList {
-	// 		name: "Provider"
-	// 		addLabel: qsTr("Add VPN provider")
-	// 		object: Config.utilities.vpn
-	// 		setting: "provider"
-	// 	}
-	// }
-}

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/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

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Config
 import qs.Components
-import qs.Modules.SettingsNew
+import qs.Modules.Settings
 
 ConnectedRect {
 	id: root

Modules/Settings/Common/PageBase.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Modules.SettingsNew
+import qs.Modules.Settings
 import qs.Components
 import qs.Config
 
@@ -25,6 +25,8 @@ ColumnLayout {
 		implicitWidth: header.implicitWidth
 		z: 1
 
+		onClicked: focus = true
+
 		RowLayout {
 			id: header
 
@@ -64,6 +66,11 @@ ColumnLayout {
 		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/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

@@ -52,12 +52,12 @@ ConnectedRect {
 		}
 
 		CustomSpinBox {
-			max: root.to
-			min: root.from
-			step: root.stepSize
+			from: root.from
+			stepSize: root.stepSize
+			to: root.to
 			value: root.value
 
-			onValueModified: v => root.moved(v)
+			onValueModified: root.moved(value)
 		}
 	}
 }

Modules/Settings/Common/StackPage.qml

@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Components
-import qs.Modules.SettingsNew
+import qs.Modules.Settings
 import qs.Config
 
 StackView {
@@ -104,7 +104,7 @@ StackView {
 		id: logCat
 
 		defaultLogLevel: LoggingCategory.Info
-		name: "caelestia.nexus"
+		name: "ZShell.settings"
 	}
 
 	Connections {

Modules/Settings/Common/TimeInput.qml

@@ -8,19 +8,9 @@ import qs.Helpers
 CustomClippingRect {
 	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");
-	}
 	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");
-	}
 
 	signal applySettings(startTime: int, endTime: int)
 	signal close
@@ -78,7 +68,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: startHourField
 
 					function setConfigText(setting: string): string {
@@ -94,7 +84,6 @@ CustomClippingRect {
 					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
@@ -198,7 +187,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: startMinuteField
 
 					function setConfigText(setting: string): string {
@@ -214,7 +203,6 @@ CustomClippingRect {
 					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
@@ -317,7 +305,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: endHourField
 
 					function setConfigText(setting: string): string {
@@ -333,7 +321,6 @@ CustomClippingRect {
 					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
@@ -437,7 +424,7 @@ CustomClippingRect {
 					}
 				}
 
-				CustomTextField {
+				TextFieldBase {
 					id: endMinuteField
 
 					function setConfigText(setting: string): string {
@@ -453,7 +440,6 @@ CustomClippingRect {
 					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

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;
+			}
+		}
+	}
+}

Modules/Settings/Content.qml

@@ -1,398 +1,76 @@
 pragma ComponentBehavior: Bound
 
-import Quickshell
-import Quickshell.Widgets
 import QtQuick
-import QtQuick.Controls
+import ZShell.Blobs
 import qs.Components
-import qs.Modules as Modules
-import qs.Modules.Settings.Categories as Cat
 import qs.Config
-import qs.Helpers
 
-Item {
+CustomClippingRect {
 	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: ""
-	property string pendingSetting: ""
-	required property ShellScreen screen
-	required property PersistentProperties visibilities
+	property color blobColor: DynamicColors.tPalette.m3surfaceContainerLow
+	readonly property real ratio: 16.0 / 9.0
+	readonly property SettingsState sState: SettingsState {
+		id: sState
 
-	function scrollToSetting(section: string, settingName: string) {
-		root.pendingSection = section;
-		root.pendingSetting = settingName;
-		scrollTimer.restart();
+		onClose: root.close()
 	}
 
-	function setCategory(category: string, index: int): void {
-		currentIndex = index;
-		currentCategory = category;
-	}
+	signal close
 
-	implicitHeight: nonAnimHeight
-	implicitWidth: nonAnimWidth
+	implicitHeight: sState.screen.height * 0.7
+	implicitWidth: implicitHeight * ratio
+	radius: Appearance.rounding.large + Appearance.padding.normal
 
-	Timer {
-		id: scrollTimer
-
-		interval: 50
-
-		onTriggered: {
-			if (root.pendingSection && stack.currentItem) {
-				stack.currentItem.scrollToSectionAndHighlight(root.pendingSection, root.pendingSetting);
-				root.pendingSection = "";
-				root.pendingSetting = "";
-			}
+	Behavior on blobColor {
+		CAnim {
 		}
 	}
 
-	Connections {
-		function onCurrentCategoryChanged() {
-			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
+	TapHandler {
+		onTapped: root.focus = true
 	}
 
-	CustomClippingRect {
-		id: viewWrapper
+	BlobGroup {
+		id: blobGroup
 
+		color: root.blobColor
+		smoothing: Appearance.rounding.normal
+	}
+
+	BlobInvertedRect {
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.smaller
-		radius: Appearance.rounding.large - Appearance.padding.smaller
-
-		SettingsSearch {
-			id: searchBar
-
-			anchors.left: parent.left
-			anchors.right: parent.right
-			anchors.top: parent.top
-
-			onSettingSelected: (category, section, settingName) => {
-				layout.selectCategory(category);
-				root.scrollToSetting(section, settingName);
-			}
-		}
-
-		Item {
-			id: view
-
-			anchors.bottom: parent.bottom
-			anchors.left: parent.left
-			anchors.top: searchBar.bottom
-			anchors.topMargin: Appearance.spacing.smaller
-			implicitWidth: layout.implicitWidth
-
-			Categories {
-				id: layout
-
-				anchors.fill: parent
-				content: root
-
-				onSettingSelected: (category, section, settingName) => {
-					root.scrollToSetting(section, settingName);
-				}
-			}
-		}
-
-		CustomClippingRect {
-			id: categoryContent
-
-			anchors.bottom: parent.bottom
-			anchors.left: view.right
-			anchors.leftMargin: Appearance.spacing.smaller
-			anchors.right: parent.right
-			anchors.top: searchBar.bottom
-			anchors.topMargin: Appearance.spacing.smaller
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: Appearance.rounding.normal
-
-			StackView {
-				id: stack
-
-				anchors.fill: parent
-				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
-						}
-					}
-				}
-			}
-		}
+		borderBottom: Appearance.padding.normal
+		borderLeft: navPane.width + navPane.anchors.margins * 2
+		borderRight: Appearance.padding.normal
+		borderTop: Appearance.padding.normal
+		group: blobGroup
+		opacity: root.blobColor.a
+		radius: Appearance.rounding.large
 	}
 
-	Component {
-		id: general
+	NavPane {
+		id: navPane
 
-		Cat.General {
-		}
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.top: parent.top
+		sState: root.sState
+		width: Math.min(600, Math.round(root.width / 3))
 	}
 
-	Component {
-		id: background
-
-		Cat.Background {
-			screen: root.screen
-		}
+	Pages {
+		anchors.bottom: parent.bottom
+		anchors.left: navPane.right
+		anchors.leftMargin: navPane.anchors.margins + anchors.margins
+		anchors.margins: Appearance.padding.extraLarge
+		anchors.right: parent.right
+		anchors.top: parent.top
+		sState: root.sState
 	}
 
-	Component {
-		id: appearance
-
-		Cat.Appearance {
-		}
-	}
-
-	Component {
-		id: bar
-
-		Cat.Bar {
-		}
-	}
-
-	Component {
-		id: lockscreen
-
-		Cat.Lockscreen {
-		}
-	}
-
-	Component {
-		id: services
-
-		Cat.Services {
-		}
-	}
-
-	Component {
-		id: notifications
-
-		Cat.Notifications {
-		}
-	}
-
-	Component {
-		id: sidebar
-
-		Cat.Sidebar {
-		}
-	}
-
-	Component {
-		id: utilities
-
-		Cat.Utilities {
-		}
-	}
-
-	Component {
-		id: dashboard
-
-		Cat.Dashboard {
-		}
-	}
-
-	Component {
-		id: osd
-
-		Cat.Osd {
-		}
-	}
-
-	Component {
-		id: launcher
-
-		Cat.Launcher {
-		}
-	}
-
-	Component {
-		id: screenshot
-
-		Cat.Screenshot {
-		}
-	}
-
-	Component {
-		id: updates
-
-		Cat.SystemUpdates {
-		}
+	PopupOverlay {
+		anchors.fill: parent
 	}
 }

Modules/Settings/Controls/HyprTimeInput.qml

@@ -1,660 +0,0 @@
-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/SchemesListView.qml

@@ -1,161 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-import qs.Components
-
-Item {
-	id: root
-
-	required property string name
-	required property var object
-	property alias row: row
-	required property string setting
-	property bool shouldBeActive: true
-	required property list<var> stringList
-
-	signal optionSet(option: string)
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: shouldBeActive ? row.height : 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 {
-		}
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-
-		CustomText {
-			id: text
-
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		CustomClippingRect {
-			Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5
-			Layout.preferredWidth: 500
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: (21 + Appearance.padding.normal) * Appearance.rounding.scale
-
-			CustomRect {
-				id: searchBox
-
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.normal
-				anchors.right: parent.right
-				anchors.top: parent.top
-				color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: 42
-				radius: Appearance.rounding.full
-
-				MaterialIcon {
-					id: searchIcon
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.leftMargin: Appearance.padding.large
-					anchors.top: parent.top
-					font.pointSize: Appearance.font.size.large
-					text: "search"
-					verticalAlignment: Text.AlignVCenter
-				}
-
-				CustomTextField {
-					id: textSearch
-
-					anchors.left: searchIcon.right
-					anchors.leftMargin: Appearance.spacing.small
-					anchors.right: parent.right
-					anchors.rightMargin: Appearance.spacing.normal
-					anchors.verticalCenter: parent.verticalCenter
-					placeholderText: "Search..."
-				}
-			}
-
-			CustomClippingRect {
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.normal
-				anchors.right: parent.right
-				anchors.top: searchBox.bottom
-				bottomLeftRadius: 21
-				bottomRightRadius: 21
-
-				CustomListView {
-					anchors.fill: parent
-					clip: true
-					spacing: Appearance.spacing.small
-
-					delegate: CustomRect {
-						id: delegate
-
-						required property string modelData
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						implicitHeight: 42
-						radius: Appearance.rounding.smallest
-
-						CustomText {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							text: modelData
-							verticalAlignment: Text.AlignVCenter
-						}
-
-						MaterialIcon {
-							anchors.fill: parent
-							anchors.rightMargin: Appearance.padding.normal
-							color: DynamicColors.palette.m3primary
-							font.pointSize: Appearance.font.size.large
-							horizontalAlignment: Text.AlignRight
-							text: "check_circle"
-							verticalAlignment: Text.AlignVCenter
-							visible: root.object[root.setting] === delegate.modelData
-						}
-
-						StateLayer {
-							onClicked: {
-								root.object[root.setting] = delegate.modelData;
-								root.optionSet(delegate.modelData);
-								Config.save();
-							}
-						}
-					}
-					model: ScriptModel {
-						values: {
-							const values = root.stringList;
-							const search = textSearch.text;
-							var regex = new RegExp(search, "i");
-
-							return values.filter(n => regex.test(n));
-						}
-					}
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/Separator.qml

@@ -1,31 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-
-CustomRect {
-	id: root
-
-	property bool shouldBeActive: true
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	color: DynamicColors.tPalette.m3outlineVariant
-	implicitHeight: shouldBeActive ? 1 : 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 {
-		}
-	}
-}

Modules/Settings/Controls/SettingActionList.qml

@@ -1,282 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-ColumnLayout {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property string setting
-	property bool shouldBeActive: true
-
-	function addAction() {
-		const list = [...root.object[root.setting]];
-		list.push({
-			name: "New Action",
-			icon: "bolt",
-			description: "",
-			command: [],
-			enabled: true,
-			dangerous: false
-		});
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	function removeAction(index) {
-		const list = [...root.object[root.setting]];
-		list.splice(index, 1);
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	function updateAction(index, key, value) {
-		const list = [...root.object[root.setting]];
-		const entry = list[index];
-		entry[key] = value;
-		list[index] = entry;
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	height: shouldBeActive ? implicitHeight : 0
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	spacing: Appearance.spacing.smaller
-	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
-		z: -1
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.normal
-			}
-		}
-	}
-
-	CustomText {
-		Layout.fillWidth: true
-		font.pointSize: Appearance.font.size.larger
-		text: root.name
-	}
-
-	Repeater {
-		model: [...root.object[root.setting]]
-
-		CustomRect {
-			required property int index
-			required property var modelData
-
-			Layout.fillWidth: true
-			Layout.preferredHeight: layout.implicitHeight + Appearance.padding.normal * 2
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: Appearance.rounding.normal
-
-			ColumnLayout {
-				id: layout
-
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.normal
-				anchors.right: parent.right
-				anchors.verticalCenter: parent.verticalCenter
-				spacing: Appearance.spacing.small
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						font.pointSize: Appearance.font.size.larger
-						text: modelData.name ?? qsTr("Action")
-					}
-
-					IconButton {
-						font.pointSize: Appearance.font.size.large
-						icon: "delete"
-						type: IconButton.Tonal
-
-						onClicked: root.removeAction(index)
-					}
-				}
-
-				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Name")
-					}
-
-					CustomRect {
-						Layout.preferredHeight: 33
-						Layout.preferredWidth: 350
-						color: DynamicColors.tPalette.m3surfaceContainerHigh
-						radius: Appearance.rounding.full
-
-						CustomTextField {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							anchors.rightMargin: Appearance.padding.normal
-							text: modelData.name ?? ""
-
-							onEditingFinished: root.updateAction(index, "name", text)
-						}
-					}
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Icon")
-					}
-
-					CustomRect {
-						Layout.preferredHeight: 33
-						Layout.preferredWidth: 350
-						color: DynamicColors.tPalette.m3surfaceContainerHigh
-						radius: Appearance.rounding.full
-
-						CustomTextField {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							anchors.rightMargin: Appearance.padding.normal
-							text: modelData.icon ?? ""
-
-							onEditingFinished: root.updateAction(index, "icon", text)
-						}
-					}
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Description")
-					}
-
-					CustomRect {
-						Layout.preferredHeight: 33
-						Layout.preferredWidth: 350
-						color: DynamicColors.tPalette.m3surfaceContainerHigh
-						radius: Appearance.rounding.full
-
-						CustomTextField {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							anchors.rightMargin: Appearance.padding.normal
-							text: modelData.description ?? ""
-
-							onEditingFinished: root.updateAction(index, "description", text)
-						}
-					}
-				}
-
-				StringListEditor {
-					Layout.fillWidth: true
-					addLabel: qsTr("Add command argument")
-					anchors.left: undefined
-					anchors.right: undefined
-					values: [...(modelData.command ?? [])]
-
-					onListEdited: function (values) {
-						root.updateAction(index, "command", values);
-					}
-				}
-
-				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Enabled")
-					}
-
-					CustomSwitch {
-						checked: modelData.enabled ?? true
-
-						onToggled: root.updateAction(index, "enabled", checked)
-					}
-				}
-
-				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Dangerous")
-					}
-
-					CustomSwitch {
-						checked: modelData.dangerous ?? false
-
-						onToggled: root.updateAction(index, "dangerous", checked)
-					}
-				}
-			}
-		}
-	}
-
-	RowLayout {
-		Layout.fillWidth: true
-
-		IconButton {
-			font.pointSize: Appearance.font.size.large
-			icon: "add"
-
-			onClicked: root.addAction()
-		}
-
-		CustomText {
-			Layout.fillWidth: true
-			text: qsTr("Add action")
-		}
-	}
-}

Modules/Settings/Controls/SettingAliasList.qml

@@ -1,203 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-CustomRect {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property string setting
-	property bool shouldBeActive: true
-
-	function addAlias() {
-		const list = [...root.object[root.setting]];
-		list.push({
-			from: "",
-			to: ""
-		});
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	function removeAlias(index) {
-		const list = [...root.object[root.setting]];
-		list.splice(index, 1);
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	function updateAlias(index, key, value) {
-		const list = [...root.object[root.setting]];
-		const entry = [...list[index]];
-		entry[key] = value;
-		list[index] = entry;
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	height: shouldBeActive ? layout.implicitHeight : 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
-		z: -1
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.normal
-			}
-		}
-	}
-
-	ColumnLayout {
-		id: layout
-
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.smaller
-
-		CustomText {
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		Repeater {
-			model: [...root.object[root.setting]]
-
-			Item {
-				required property int index
-				required property var modelData
-
-				Layout.fillWidth: true
-				Layout.preferredHeight: layout.implicitHeight + Appearance.padding.smaller * 2
-
-				CustomRect {
-					anchors.left: parent.left
-					anchors.right: parent.right
-					anchors.top: parent.top
-					anchors.topMargin: -(Appearance.spacing.smaller / 2)
-					color: DynamicColors.tPalette.m3outlineVariant
-					implicitHeight: 1
-					visible: index !== 0
-				}
-
-				ColumnLayout {
-					id: layout
-
-					anchors.left: parent.left
-					anchors.margins: Appearance.padding.small
-					anchors.right: parent.right
-					anchors.verticalCenter: parent.verticalCenter
-					spacing: Appearance.spacing.small
-
-					RowLayout {
-						Layout.fillWidth: true
-
-						CustomText {
-							Layout.fillWidth: true
-							text: qsTr("From")
-						}
-
-						CustomRect {
-							Layout.preferredHeight: 33
-							Layout.preferredWidth: Math.max(Math.min(fromTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
-							color: DynamicColors.tPalette.m3surfaceContainerHigh
-							radius: Appearance.rounding.full
-
-							CustomTextField {
-								id: fromTextField
-
-								anchors.centerIn: parent
-								horizontalAlignment: Text.AlignHCenter
-								implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550)
-								text: modelData.from ?? ""
-
-								onEditingFinished: root.updateAlias(index, "from", text)
-							}
-						}
-
-						IconButton {
-							font.pointSize: Appearance.font.size.large
-							icon: "delete"
-							type: IconButton.Tonal
-
-							onClicked: root.removeAlias(index)
-						}
-					}
-
-					RowLayout {
-						Layout.fillWidth: true
-
-						CustomText {
-							Layout.fillWidth: true
-							text: qsTr("To")
-						}
-
-						CustomRect {
-							Layout.preferredHeight: 33
-							Layout.preferredWidth: Math.max(Math.min(toTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
-							color: DynamicColors.tPalette.m3surfaceContainerHigh
-							radius: Appearance.rounding.full
-
-							CustomTextField {
-								id: toTextField
-
-								anchors.centerIn: parent
-								horizontalAlignment: Text.AlignHCenter
-								implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550)
-								text: modelData.to ?? ""
-
-								onEditingFinished: root.updateAlias(index, "to", text)
-							}
-						}
-					}
-				}
-			}
-		}
-
-		RowLayout {
-			Layout.fillWidth: true
-
-			IconButton {
-				font.pointSize: Appearance.font.size.large
-				icon: "add"
-
-				onClicked: root.addAlias()
-			}
-
-			CustomText {
-				Layout.fillWidth: true
-				text: qsTr("Add alias")
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -1,241 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import QtQml.Models
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	property bool dragActive: false
-	property real dragHeight: 0
-	property real dragStartX: 0
-	property real dragStartY: 0
-	property real dragX: 0
-	property real dragY: 0
-	property var draggedModelData: null
-	property string draggedUid: ""
-	property bool dropAnimating: false
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	property var pendingCommitEntries: []
-	required property string setting
-	property bool shouldBeActive: true
-	property int uidCounter: 0
-	property var visualEntries: []
-
-	function ensureVisualEntries() {
-		if (!root.dragActive && !root.dropAnimating)
-			root.rebuildVisualEntries();
-	}
-
-	function iconForId(id) {
-		switch (id) {
-		case "workspaces":
-			return "dashboard";
-		case "audio":
-			return "volume_up";
-		case "media":
-			return "play_arrow";
-		case "resources":
-			return "monitoring";
-		case "updates":
-			return "system_update";
-		case "dash":
-			return "space_dashboard";
-		case "spacer":
-			return "horizontal_rule";
-		case "activeWindow":
-			return "web_asset";
-		case "tray":
-			return "widgets";
-		case "upower":
-			return "battery_full";
-		case "network":
-			return "wifi";
-		case "clock":
-			return "schedule";
-		case "notifBell":
-			return "notifications";
-		default:
-			return "drag_indicator";
-		}
-	}
-
-	function indexForUid(uid) {
-		for (let i = 0; i < root.visualEntries.length; i++) {
-			if (root.visualEntries[i].uid === uid)
-				return i;
-		}
-
-		return -1;
-	}
-
-	function labelForId(id) {
-		switch (id) {
-		case "workspaces":
-			return qsTr("Workspaces");
-		case "audio":
-			return qsTr("Audio");
-		case "media":
-			return qsTr("Media");
-		case "resources":
-			return qsTr("Resources");
-		case "updates":
-			return qsTr("Updates");
-		case "dash":
-			return qsTr("Dash");
-		case "spacer":
-			return qsTr("Spacer");
-		case "activeWindow":
-			return qsTr("Title");
-		case "tray":
-			return qsTr("Tray");
-		case "upower":
-			return qsTr("Power");
-		case "network":
-			return qsTr("Network");
-		case "clock":
-			return qsTr("Clock");
-		case "notifBell":
-			return qsTr("Notifs");
-		case "hyprsunset":
-			return qsTr("Night light");
-		default:
-			return id;
-		}
-	}
-
-	function rebuildVisualEntries() {
-		const entries = root.object[root.setting] ?? [];
-		const next = [];
-
-		for (let i = 0; i < entries.length; i++) {
-			const entry = entries[i];
-			let existing = null;
-
-			for (let j = 0; j < root.visualEntries.length; j++) {
-				if (root.visualEntries[j].entry === entry) {
-					existing = root.visualEntries[j];
-					break;
-				}
-			}
-
-			if (existing)
-				next.push(existing);
-			else
-				next.push({
-					uid: `entry-${root.uidCounter++}`,
-					entry
-				});
-		}
-
-		root.visualEntries = next;
-	}
-
-	function updateEntry(index, value) {
-		const list = [...root.object[root.setting]];
-		const entry = list[index];
-		entry.enabled = value;
-		list[index] = entry;
-		root.object[root.setting] = list;
-		Config.save();
-	}
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: shouldBeActive ? layout.implicitHeight : 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: root.rebuildVisualEntries()
-
-	CustomRect {
-		anchors.fill: parent
-		anchors.margins: -Appearance.padding.smaller
-		color: DynamicColors.palette.m3primaryContainer
-		opacity: root.highlighted ? 0.5 : 0
-		radius: Appearance.rounding.small
-		z: -1
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.normal
-			}
-		}
-	}
-
-	RowLayout {
-		id: layout
-
-		anchors.fill: parent
-
-		// spacing: Appearance.spacing.smaller
-
-		DelegateModel {
-			id: visualModel
-
-			delegate: entryDelegate
-
-			model: ScriptModel {
-				objectProp: "uid"
-				values: root.visualEntries
-			}
-		}
-
-		Repeater {
-			delegate: entryDelegate
-			model: visualModel
-		}
-	}
-
-	Component {
-		id: entryDelegate
-
-		IconButton {
-			required property int index
-			required property var modelData
-
-			Layout.fillWidth: true
-			Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? 18 : internalChecked ? 7 : 0)
-			checked: modelData.entry.enabled ?? true
-			font: Appearance.font.family.sans
-			// icon: root.iconForId(modelData.entry.id)
-			icon: root.labelForId(modelData.entry.id)
-			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
-			visible: !["spacer", "upower", "dash", "audio"].some(prefix => modelData.entry.id.startsWith(prefix))
-
-			Behavior on Layout.preferredWidth {
-				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
-				}
-			}
-
-			onClicked: root.updateEntry(index, internalChecked)
-		}
-	}
-}

Modules/Settings/Controls/SettingHyprSpinner.qml

@@ -1,214 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property list<string> settings
-	property bool shouldBeActive: true
-
-	function commitChoice(choice: int, setting: string): void {
-		root.object[setting] = choice;
-		Config.save();
-	}
-
-	function formattedValue(setting: string): string {
-		const value = root.object[setting];
-
-		if (value === null || value === undefined)
-			return "";
-
-		return String(value);
-	}
-
-	function hourToAmPm(hour) {
-		var h = Number(hour) % 24;
-		var d = new Date(2000, 0, 1, h, 0, 0);
-		return Qt.formatTime(d, "h AP");
-	}
-
-	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
-				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.hourToAmPm(root.object[root.settings[0]])).arg(root.hourToAmPm(root.object[root.settings[1]]))
-			}
-		}
-
-		ColumnLayout {
-			id: optionLayout
-
-			Layout.fillHeight: true
-			Layout.preferredWidth: 100
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("Enabled: ")
-				}
-
-				CustomSwitch {
-					id: enabledSwitch
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					checked: root.object[root.settings[2]]
-
-					onToggled: {
-						root.object[root.settings[2]] = checked;
-						Config.save();
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-				z: setting2.expanded ? -1 : 1
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("Start: ")
-				}
-
-				SpinnerButton {
-					id: setting1
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
-					Layout.preferredWidth: height * 2
-					currentIndex: root.object[root.settings[0]]
-					enabled: enabledSwitch.checked
-					text: root.formattedValue(root.settings[0])
-
-					menu.onItemSelected: item => {
-						root.commitChoice(item, root.settings[0]);
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-				z: setting1.expanded ? -1 : 1
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("End: ")
-				}
-
-				SpinnerButton {
-					id: setting2
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
-					Layout.preferredWidth: height * 2
-					currentIndex: root.object[root.settings[1]]
-					enabled: enabledSwitch.checked
-					text: root.formattedValue(root.settings[1])
-
-					menu.onItemSelected: item => {
-						root.commitChoice(item, root.settings[1]);
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-				z: -2
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("Temp: ")
-				}
-
-				CustomRect {
-					id: rect
-
-					Layout.preferredHeight: 33
-					Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.normal * 2, 200), 50)
-					color: DynamicColors.tPalette.m3surfaceContainerHigh
-					radius: Appearance.rounding.full
-
-					CustomTextField {
-						id: textField
-
-						anchors.centerIn: parent
-						horizontalAlignment: Text.AlignHCenter
-						implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 200)
-						text: root.formattedValue(root.settings[3])
-
-						onEditingFinished: {
-							root.object[root.settings[3]] = textField.text;
-							Config.save();
-						}
-					}
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingInput.qml

@@ -1,99 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property string setting
-	property bool shouldBeActive: true
-
-	function formattedValue(): string {
-		const value = root.object[root.setting];
-
-		if (value === null || value === undefined)
-			return "";
-
-		return String(value);
-	}
-
-	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
-
-		CustomText {
-			id: text
-
-			Layout.alignment: Qt.AlignLeft
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		CustomRect {
-			id: rect
-
-			Layout.preferredHeight: 33
-			Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.large * 2, 550), 50)
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
-			radius: Appearance.rounding.full
-
-			CustomTextField {
-				id: textField
-
-				anchors.centerIn: parent
-				horizontalAlignment: Text.AlignHCenter
-				implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550)
-				text: root.formattedValue()
-
-				onEditingFinished: {
-					root.object[root.setting] = textField.text;
-					Config.save();
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingList.qml

@@ -1,297 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-
-Item {
-	id: root
-
-	required property int index
-	required property var modelData
-	property bool shouldBeActive: true
-
-	signal addActiveActionRequested
-	signal deleteRequested(int index)
-	signal fieldEdited(string key, var value)
-
-	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 {
-		}
-	}
-
-	CustomRect {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.top: parent.top
-		anchors.topMargin: -(Appearance.spacing.smaller / 2)
-		color: DynamicColors.tPalette.m3outlineVariant
-		implicitHeight: 1
-		visible: root.index !== 0
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.large
-
-		Item {
-			id: nameCell
-
-			property string draftName: ""
-			property bool editing: false
-
-			function beginEdit() {
-				draftName = root.modelData.name ?? "";
-				editing = true;
-				nameEditor.forceActiveFocus();
-			}
-
-			function cancelEdit() {
-				draftName = root.modelData.name ?? "";
-				editing = false;
-			}
-
-			function commitEdit() {
-				editing = false;
-
-				if (draftName !== (root.modelData.name ?? "")) {
-					root.fieldEdited("name", draftName);
-				}
-			}
-
-			Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-			Layout.fillHeight: true
-			Layout.preferredWidth: root.width / 2
-
-			HoverHandler {
-				id: nameHover
-			}
-
-			HoverIconButton {
-				id: editButton
-
-				anchors.left: parent.left
-				anchors.verticalCenter: parent.verticalCenter
-				font.pointSize: Appearance.font.size.large
-				icon: "edit"
-				shouldBeVisible: nameHover.hovered && !nameCell.editing
-
-				onClicked: nameCell.beginEdit()
-			}
-
-			CustomText {
-				anchors.left: parent.left
-				anchors.leftMargin: nameHover.hovered ? editButton.width + Appearance.spacing.smaller * 2 : 0
-				anchors.right: deleteButton.left
-				anchors.rightMargin: Appearance.spacing.small
-				anchors.verticalCenter: parent.verticalCenter
-				elide: Text.ElideRight    // enable if CustomText supports it
-				font.pointSize: Appearance.font.size.larger
-				text: root.modelData.name
-				visible: !nameCell.editing
-
-				Behavior on anchors.leftMargin {
-					Anim {
-					}
-				}
-			}
-
-			HoverIconButton {
-				id: deleteButton
-
-				anchors.right: parent.right
-				anchors.verticalCenter: parent.verticalCenter
-				font.pointSize: Appearance.font.size.large
-				icon: "delete"
-				shouldBeVisible: nameHover.hovered && !nameCell.editing
-
-				onClicked: root.deleteRequested(root.index)
-			}
-
-			CustomRect {
-				anchors.left: parent.left
-				anchors.verticalCenter: parent.verticalCenter
-				color: DynamicColors.tPalette.m3surface
-				implicitHeight: nameEditor.implicitHeight + (Appearance.padding.normal * 2)
-				implicitWidth: Math.min(nameEditor.contentWidth + (Appearance.padding.normal * 2), parent.width - Appearance.padding.normal)
-				radius: Appearance.rounding.small
-				visible: nameCell.editing
-
-				CustomTextField {
-					id: nameEditor
-
-					anchors.centerIn: parent
-					horizontalAlignment: Text.AlignHCenter
-					implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, nameCell.width - Appearance.padding.normal)
-					text: nameCell.draftName
-
-					Keys.onEscapePressed: {
-						nameCell.cancelEdit();
-					}
-					onEditingFinished: {
-						nameCell.commitEdit();
-					}
-					onTextEdited: {
-						nameCell.draftName = nameEditor.text;
-					}
-				}
-			}
-		}
-
-		VSeparator {
-		}
-
-		ColumnLayout {
-			id: cLayout
-
-			Layout.fillWidth: true
-
-			RowLayout {
-				Layout.fillWidth: true
-
-				CustomText {
-					Layout.fillWidth: true
-					text: qsTr("Timeout")
-				}
-
-				CustomRect {
-					Layout.preferredHeight: 33
-					Layout.preferredWidth: Math.max(Math.min(timeField.contentWidth + Appearance.padding.normal * 3, 200), 50)
-					color: DynamicColors.tPalette.m3surface
-					radius: Appearance.rounding.small
-
-					CustomTextField {
-						id: timeField
-
-						anchors.centerIn: parent
-						horizontalAlignment: Text.AlignHCenter
-						text: String(root.modelData.timeout ?? "")
-
-						onEditingFinished: {
-							root.fieldEdited("timeout", Number(text));
-						}
-					}
-				}
-			}
-
-			Separator {
-				Layout.fillWidth: true
-				anchors.left: undefined
-				anchors.right: undefined
-			}
-
-			RowLayout {
-				Layout.fillWidth: true
-
-				CustomText {
-					Layout.fillWidth: true
-					text: qsTr("Idle Action")
-				}
-
-				CustomRect {
-					Layout.preferredHeight: 33
-					Layout.preferredWidth: Math.max(Math.min(idleField.contentWidth + Appearance.padding.normal * 3, 200), 50)
-					color: DynamicColors.tPalette.m3surface
-					radius: Appearance.rounding.small
-
-					CustomTextField {
-						id: idleField
-
-						anchors.centerIn: parent
-						horizontalAlignment: Text.AlignHCenter
-						text: root.modelData.idleAction ?? ""
-
-						onEditingFinished: {
-							root.fieldEdited("idleAction", text);
-						}
-					}
-				}
-			}
-
-			Separator {
-				Layout.fillWidth: true
-				anchors.left: undefined
-				anchors.right: undefined
-			}
-
-			Item {
-				Layout.fillWidth: true
-				implicitHeight: activeActionRow.visible ? activeActionRow.implicitHeight : addButtonRow.implicitHeight
-
-				RowLayout {
-					id: activeActionRow
-
-					anchors.left: parent.left
-					anchors.right: parent.right
-					visible: root.modelData.activeAction !== undefined
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("Active Action")
-					}
-
-					CustomRect {
-						Layout.preferredHeight: 33
-						Layout.preferredWidth: Math.max(Math.min(actionField.contentWidth + Appearance.padding.normal * 3, 200), 50)
-						color: DynamicColors.tPalette.m3surface
-						radius: Appearance.rounding.small
-
-						CustomTextField {
-							id: actionField
-
-							anchors.centerIn: parent
-							horizontalAlignment: Text.AlignHCenter
-							text: root.modelData.activeAction ?? ""
-
-							onEditingFinished: {
-								root.fieldEdited("activeAction", text);
-							}
-						}
-					}
-				}
-
-				RowLayout {
-					id: addButtonRow
-
-					anchors.left: parent.left
-					anchors.right: parent.right
-					visible: root.modelData.activeAction === undefined
-
-					IconButton {
-						id: button
-
-						Layout.alignment: Qt.AlignLeft
-						font.pointSize: Appearance.font.size.large
-						icon: "add"
-
-						onClicked: root.addActiveActionRequested()
-					}
-
-					CustomText {
-						Layout.alignment: Qt.AlignLeft
-						text: qsTr("Add active action")
-					}
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingListView.qml

@@ -1,163 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-import qs.Components
-
-Item {
-	id: root
-
-	required property string name
-	required property var object
-	property alias row: row
-	required property string setting
-	property bool shouldBeActive: true
-	required property list<var> stringList
-
-	signal optionSet
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: shouldBeActive ? row.height : 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 {
-		}
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-
-		CustomText {
-			id: text
-
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		CustomClippingRect {
-			id: fontArea
-
-			Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5
-			Layout.preferredWidth: 500
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: (21 + Appearance.padding.normal) * Appearance.rounding.scale
-
-			CustomRect {
-				id: searchBox
-
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.normal
-				anchors.right: parent.right
-				anchors.top: parent.top
-				color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: 42
-				radius: Appearance.rounding.full
-
-				MaterialIcon {
-					id: searchIcon
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.leftMargin: Appearance.padding.large
-					anchors.top: parent.top
-					font.pointSize: Appearance.font.size.large
-					text: "search"
-					verticalAlignment: Text.AlignVCenter
-				}
-
-				CustomTextField {
-					id: fontSearch
-
-					anchors.left: searchIcon.right
-					anchors.leftMargin: Appearance.spacing.small
-					anchors.right: parent.right
-					anchors.rightMargin: Appearance.spacing.normal
-					anchors.verticalCenter: parent.verticalCenter
-					placeholderText: "Search..."
-				}
-			}
-
-			CustomClippingRect {
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.normal
-				anchors.right: parent.right
-				anchors.top: searchBox.bottom
-				bottomLeftRadius: 21
-				bottomRightRadius: 21
-
-				CustomListView {
-					anchors.fill: parent
-					clip: true
-					spacing: Appearance.spacing.small
-
-					delegate: CustomRect {
-						id: fontDelegate
-
-						required property string modelData
-
-						anchors.left: parent.left
-						anchors.right: parent.right
-						implicitHeight: 42
-						radius: Appearance.rounding.smallest
-
-						CustomText {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							text: modelData
-							verticalAlignment: Text.AlignVCenter
-						}
-
-						MaterialIcon {
-							anchors.fill: parent
-							anchors.rightMargin: Appearance.padding.normal
-							color: DynamicColors.palette.m3primary
-							font.pointSize: Appearance.font.size.large
-							horizontalAlignment: Text.AlignRight
-							text: "check_circle"
-							verticalAlignment: Text.AlignVCenter
-							visible: root.object[root.setting] === fontDelegate.modelData
-						}
-
-						StateLayer {
-							onClicked: {
-								root.object[root.setting] = fontDelegate.modelData;
-								root.optionSet();
-								Config.save();
-							}
-						}
-					}
-					model: ScriptModel {
-						values: {
-							const values = root.stringList;
-							const search = fontSearch.text;
-							var regex = new RegExp(search, "i");
-
-							return values.filter(n => regex.test(n));
-						}
-					}
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingReadOnly.qml

@@ -1,70 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	property bool shouldBeActive: true
-	required property string value
-
-	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
-
-		CustomText {
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		CustomText {
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.family: Appearance.font.family.mono
-			font.pointSize: Appearance.font.size.normal
-			text: root.value
-		}
-	}
-}

Modules/Settings/Controls/SettingSpinBox.qml

@@ -1,81 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	property real max: Infinity
-	property real min: -Infinity
-	required property string name
-	required property var object
-	required property string setting
-	property bool shouldBeActive: true
-	property real step: 1
-
-	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
-
-		CustomText {
-			Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		CustomSpinBox {
-			Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-			max: root.max
-			min: root.min
-			step: root.step
-			value: Number(root.object[root.setting] ?? 0)
-
-			onValueModified: function (value) {
-				root.object[root.setting] = value;
-				Config.save();
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingSpinner.qml

@@ -1,180 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property list<string> settings
-	property bool shouldBeActive: true
-
-	function commitChoice(choice: int, setting: string): void {
-		root.object[setting] = choice;
-		Config.save();
-	}
-
-	function formattedValue(setting: string): string {
-		const value = root.object[setting];
-
-		if (value === null || value === undefined)
-			return "";
-
-		return String(value);
-	}
-
-	function hourToAmPm(hour) {
-		var h = Number(hour) % 24;
-		var d = new Date(2000, 0, 1, h, 0, 0);
-		return Qt.formatTime(d, "h AP");
-	}
-
-	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
-				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.hourToAmPm(root.object[root.settings[0]])).arg(root.hourToAmPm(root.object[root.settings[1]]))
-			}
-		}
-
-		ColumnLayout {
-			id: optionLayout
-
-			Layout.fillHeight: true
-			Layout.preferredWidth: 100
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("Enabled: ")
-				}
-
-				CustomSwitch {
-					id: enabledSwitch
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					checked: root.object[root.settings[2]]
-
-					onToggled: {
-						root.object[root.settings[2]] = checked;
-						Config.save();
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-				z: setting2.expanded ? -1 : 1
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("Start: ")
-				}
-
-				SpinnerButton {
-					id: setting1
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
-					Layout.preferredWidth: height * 2
-					currentIndex: root.object[root.settings[0]]
-					enabled: enabledSwitch.checked
-					text: root.formattedValue(root.settings[0])
-
-					menu.onItemSelected: item => {
-						root.commitChoice(item, root.settings[0]);
-					}
-				}
-			}
-
-			RowLayout {
-				Layout.preferredWidth: optionLayout.width
-				z: setting1.expanded ? -1 : 1
-
-				CustomText {
-					Layout.alignment: Qt.AlignLeft | Qt.AlignHCenter
-					Layout.fillWidth: true
-					text: qsTr("End: ")
-				}
-
-				SpinnerButton {
-					id: setting2
-
-					Layout.alignment: Qt.AlignRight | Qt.AlignHCenter
-					Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
-					Layout.preferredWidth: height * 2
-					currentIndex: root.object[root.settings[1]]
-					enabled: enabledSwitch.checked
-					text: root.formattedValue(root.settings[1])
-
-					menu.onItemSelected: item => {
-						root.commitChoice(item, root.settings[1]);
-					}
-				}
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingStringList.qml

@@ -1,78 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	property string addLabel: qsTr("Add entry")
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	required property var object
-	required property string setting
-	property bool shouldBeActive: true
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: shouldBeActive ? layout.implicitHeight : 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
-			}
-		}
-	}
-
-	ColumnLayout {
-		id: layout
-
-		anchors.left: parent.left
-		anchors.right: parent.right
-		spacing: Appearance.spacing.small
-
-		CustomText {
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		StringListEditor {
-			Layout.fillWidth: true
-			addLabel: root.addLabel
-			anchors.left: undefined
-			anchors.right: undefined
-			anchors.verticalCenter: undefined
-			values: [...(root.object[root.setting] ?? [])]
-
-			onListEdited: function (values) {
-				root.object[root.setting] = values;
-				Config.save();
-			}
-		}
-	}
-}