Initial commit for submenu popouts, unfinished

.clang-format

@@ -1,58 +0,0 @@
----
-BasedOnStyle: LLVM
-AccessModifierOffset: 0
-AlignAfterOpenBracket: Align
-AlignConsecutiveAssignments: false
-AlignConsecutiveDeclarations: false
-AlignOperands: Align
-AllowAllParametersOfDeclarationOnNextLine: true
-AllowShortFunctionsOnASingleLine: Inline
-AllowShortIfStatementsOnASingleLine: Never
-AlwaysBreakBeforeMultilineStrings: false
-AlwaysBreakTemplateDeclarations: Yes
-BinPackArguments: false
-BinPackParameters: false
-BreakBeforeBraces: Attach
-BreakBeforeTernaryOperators: true
-BreakConstructorInitializers: BeforeComma
-ColumnLimit: 80
-ConstructorInitializerAllOnOneLineOrOnePerLine: true
-ConstructorInitializerIndentWidth: 4
-ContinuationIndentWidth: 4
-Cpp11BracedListStyle: true
-DerivePointerAlignment: false
-FixNamespaceComments: true
-IndentCaseLabels: false
-IndentWidth: 4
-KeepEmptyLinesAtTheStartOfBlocks: false
-Language: Cpp
-MaxEmptyLinesToKeep: 2
-NamespaceIndentation: None
-PenaltyBreakAssignment: 10
-PenaltyBreakBeforeFirstCallParameter: 100
-PenaltyBreakComment: 300
-PenaltyBreakFirstLessLess: 120
-PenaltyBreakString: 1000
-PenaltyExcessCharacter: 100
-PenaltyReturnTypeOnItsOwnLine: 200
-PointerAlignment: Left
-ReflowComments: false
-SortIncludes: false
-SpaceAfterCStyleCast: false
-SpaceAfterTemplateKeyword: true
-SpaceBeforeAssignmentOperators: true
-SpaceBeforeCpp11BracedList: false
-SpaceBeforeCtorInitializerColon: true
-SpaceBeforeInheritanceColon: true
-SpaceBeforeParens: ControlStatements
-SpaceBeforeRangeBasedForLoopColon: true
-SpaceInEmptyParentheses: false
-SpacesBeforeTrailingComments: 1
-SpacesInAngles: false
-SpacesInContainerLiterals: false
-SpacesInCStyleCastParentheses: false
-SpacesInParentheses: false
-SpacesInSquareBrackets: false
-Standard: c++20
-TabWidth: 4
-UseTab: Always

.clang-tidy

@@ -1,31 +0,0 @@
----
-Checks: >
-    -*,
-    bugprone-*,
-    clang-analyzer-*,
-    modernize-*,
-    -modernize-use-trailing-return-type,
-    performance-*,
-    readability-braces-around-statements,
-    readability-else-after-return,
-    readability-identifier-naming,
-    readability-redundant-*,
-    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: "*"
-HeaderFilterRegex: ".*"
-FormatStyle: file
-
-...

.gitea/workflows/lint-python.yml

@@ -1,4 +1,4 @@
-name: Python
+name: Lint & Format (Python)
 
 on:
     pull_request:
@@ -32,34 +32,3 @@ jobs:
               run: |
                   . .venv/bin/activate
                   ruff check .
-
-    test:
-        runs-on: alpine
-        container: node:26-alpine
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    python3 \
-                    py3-pip \
-                    py3-pillow \
-                    build-base
-                  python3 -m venv .venv
-                  . .venv/bin/activate
-                  pip install --no-cache-dir \
-                    typer \
-                    pillow \
-                    materialyoucolor \
-                    jinja2 \
-                    pytest
-
-            - name: Test
-              run: |
-                  . .venv/bin/activate
-                  cd cli
-                  python -m pytest tests/ -v

.gitea/workflows/lint-rust.yml

@@ -38,18 +38,15 @@ jobs:
                     rustfmt \
                     rust-clippy
 
-            - id: format-check
+            - name: Format check
-              name: Format check
               continue-on-error: true
               run: |
                   if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    status=0
                     for manifest in $(find . -name "Cargo.toml"); do
                       cargo fmt --manifest-path "$manifest" --check && \
                         echo "$manifest: formatting OK" || \
-                        { echo "$manifest: needs formatting"; status=1; }
+                        echo "$manifest: needs formatting"
                     done
-                    exit $status
                   elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
                     echo "Rust files found but no Cargo.toml"
                     exit 1
@@ -57,8 +54,7 @@ jobs:
                     echo "No Rust project found"
                   fi
 
-            - id: clippy
+            - name: Clippy
-              name: Clippy
               run: |
                   if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
                     status=0
@@ -74,12 +70,3 @@ jobs:
                   else
                     echo "No Rust project found"
                   fi
-
-            - name: Check results
-              if: always()
-              run: |
-                  if [ "${{ steps.format-check.outcome }}" = "failure" ] || [ "${{ steps.clippy.outcome }}" = "failure" ]; then
-                    echo "One or more checks failed"
-                    exit 1
-                  fi
-                  echo "All checks passed"

.gitignore

@@ -13,5 +13,3 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
-**/test-plugins/
-**/Charts/

CMakeLists.txt

@@ -25,20 +25,12 @@ add_compile_options(
 
 if("plugin" IN_LIST ENABLE_MODULES)
 	add_subdirectory(Plugins)
-
 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(FILES shell.qml DESTINATION "${INSTALL_QSCONFDIR}")
-	# Disable watching for changes
-	file(READ shell.qml SHELL_QML)
-	string(REPLACE "settings.watchFiles: true" "settings.watchFiles: false" SHELL_QML "${SHELL_QML}")
-	file(WRITE "${CMAKE_BINARY_DIR}/qml/shell.qml" "${SHELL_QML}")
-	install(FILES "${CMAKE_BINARY_DIR}/qml/shell.qml" DESTINATION "${INSTALL_QSCONFDIR}")
-
-	# Greeter
 	install(DIRECTORY Greeter/ DESTINATION "${INSTALL_GREETERCONFDIR}")
 endif()

Components/CustomSlider.qml

@@ -10,35 +10,31 @@ Slider {
 	background: Item {
 		CustomRect {
 			anchors.bottom: parent.bottom
-			anchors.bottomMargin: root.implicitHeight / 6
 			anchors.left: parent.left
 			anchors.top: parent.top
-			anchors.topMargin: root.implicitHeight / 6
 			bottomRightRadius: root.implicitHeight / 6
 			color: root.color
-			implicitWidth: root.handle.x - root.implicitHeight / 6
+			implicitWidth: root.handle.x - root.implicitHeight / 2
-			radius: root.implicitHeight / 6
+			radius: Appearance.rounding.full
 			topRightRadius: root.implicitHeight / 6
 		}
 
 		CustomRect {
 			anchors.bottom: parent.bottom
-			anchors.bottomMargin: root.implicitHeight / 6
 			anchors.right: parent.right
 			anchors.top: parent.top
-			anchors.topMargin: root.implicitHeight / 6
 			bottomLeftRadius: root.implicitHeight / 6
-			color: DynamicColors.tPalette.m3surfaceContainerHighest
+			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-			radius: root.implicitHeight / 6
+			radius: Appearance.rounding.full
 			topLeftRadius: root.implicitHeight / 6
 		}
 	}
 	handle: CustomRect {
 		anchors.verticalCenter: parent.verticalCenter
 		color: root.color
-		implicitHeight: root.implicitHeight
+		implicitHeight: 15
-		implicitWidth: root.implicitHeight / 4.5
+		implicitWidth: 5
 		radius: Appearance.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 

Components/CustomSpinBox.qml

@@ -28,7 +28,6 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
-		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
 		leftPadding: Appearance.padding.normal
@@ -37,7 +36,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -86,7 +85,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -114,13 +113,13 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -148,7 +147,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_down"
 		}
 	}

Components/CustomSplitButton.qml

@@ -35,10 +35,14 @@ Row {
 	}
 
 	function openDropdown(): void {
+		if (root.disabled)
+			return;
 		SettingsDropdowns.open(menu, root);
 	}
 
 	function toggleDropdown(): void {
+		if (root.disabled)
+			return;
 		SettingsDropdowns.toggle(menu, root);
 	}
 
@@ -51,7 +55,7 @@ Row {
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: !root.enabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandBtn.implicitHeight
 		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -65,7 +69,7 @@ Row {
 			}
 
 			color: root.textColor
-			disabled: !root.enabled
+			disabled: root.disabled
 			rect.bottomRightRadius: parent.bottomRightRadius
 			rect.topRightRadius: parent.topRightRadius
 		}
@@ -82,7 +86,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -94,7 +98,7 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
@@ -112,7 +116,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: !root.enabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -131,7 +135,7 @@ Row {
 			}
 
 			color: root.textColor
-			disabled: !root.enabled
+			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
 		}
@@ -141,7 +145,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: !root.enabled ? root.disabledTextColor : root.textColor
+			color: root.disabled ? root.disabledTextColor : root.textColor
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 

Components/CustomSplitButtonRow.qml

@@ -8,34 +8,20 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property alias buttonAlias: splitButton
 	property bool enabled: true
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
 	property alias menuItems: splitButton.menuItems
-	property bool shouldBeActive: true
 	property alias type: splitButton.type
 
 	signal selected(item: MenuItem)
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	clip: false
-	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
 	z: root.expanded ? expandedZ : -1
 
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-
 	RowLayout {
 		id: row
 

Components/CustomSwitch.qml

@@ -12,7 +12,7 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
 		implicitHeight: 13 + 7 * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
@@ -21,7 +21,7 @@ Switch {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
 			implicitHeight: parent.implicitHeight - 10
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
@@ -38,7 +38,7 @@ Switch {
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
@@ -114,7 +114,7 @@ Switch {
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {

Components/CustomText.qml

@@ -15,7 +15,6 @@ Text {
 	color: DynamicColors.palette.m3onSurface
 	font.family: Appearance.font.family.sans
 	font.pointSize: Appearance.font.size.normal
-	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Config/BarConfig.qml

@@ -59,8 +59,6 @@ JsonObject {
 	}
 	property int rounding: 8
 	property int smoothing: 32
-	property Tray tray: Tray {
-	}
 
 	component Popouts: JsonObject {
 		property bool activeWindow: true
@@ -71,7 +69,4 @@ JsonObject {
 		property bool tray: true
 		property bool upower: true
 	}
-	component Tray: JsonObject {
-		property int trayIconSize: 24
-	}
 }

Config/Colors.qml

@@ -1,13 +1,5 @@
 import Quickshell.Io
 
 JsonObject {
-	property Presets presets: Presets {
-	}
 	property string schemeType: "vibrant"
-
-	component Presets: JsonObject {
-		property string accent: ""
-		property string name: ""
-		property string variant: ""
-	}
 }

Config/Config.qml

@@ -100,9 +100,6 @@ Singleton {
 			border: barConfig.border,
 			smoothing: barConfig.smoothing,
 			height: barConfig.height,
-			tray: {
-				trayIconSize: barConfig.tray.trayIconSize
-			},
 			popouts: {
 				tray: barConfig.popouts.tray,
 				audio: barConfig.popouts.audio,
@@ -118,12 +115,7 @@ Singleton {
 
 	function serializeColors(): var {
 		return {
-			schemeType: colors.schemeType,
+			schemeType: colors.schemeType
-			presets: {
-				name: colors.presets.name,
-				variant: colors.presets.variant,
-				accent: colors.presets.accent
-			}
 		};
 	}
 
@@ -217,10 +209,6 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
-			},
-			battery: {
-				popupThresholds: general.battery.popupThresholds,
-				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -254,7 +242,6 @@ Singleton {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
 			showNotifContent: lock.showNotifContent,
-			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {
@@ -300,10 +287,10 @@ Singleton {
 		return {
 			enable_pp: screenshot.enable_pp,
 			mode: screenshot.mode,
-			radius: screenshot.radius,
+			corner_radius: screenshot.corner_radius,
-			shadow: screenshot.shadow,
+			drop_shadow: screenshot.drop_shadow,
-			rounding: screenshot.rounding,
+			rounded_corners: screenshot.rounded_corners,
-			shadow_blur: screenshot.shadow_blur,
+			shadow_blur_radius: screenshot.shadow_blur_radius,
 			shadow_color: screenshot.shadow_color,
 			shadow_offset_x: screenshot.shadow_offset_x,
 			shadow_offset_y: screenshot.shadow_offset_y

Config/DynamicColors.qml

@@ -30,10 +30,9 @@ Singleton {
 	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
-		const initLuminance = getLuminance(c);
+		const luminance = getLuminance(c);
-		const luminance = Math.max(initLuminance, 0.001);
 
-		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (0.2 + 0.3 * (1 - transparency.base)) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
+		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (1 - transparency.base) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
 		const scale = (luminance + offset) / luminance;
 		const r = Math.max(0, Math.min(1, c.r * scale));
 		const g = Math.max(0, Math.min(1, c.g * scale));
@@ -115,10 +114,6 @@ Singleton {
 		Config.save();
 	}
 
-	function swapRG(c: color): color {
-		return Qt.rgba(c.g, c.r, c.b, c.a);
-	}
-
 	Component.onCompleted: debounceTimer.triggered()
 
 	Connections {

Config/General.qml

@@ -4,8 +4,6 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
-	property Battery battery: Battery {
-	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -21,17 +19,6 @@ JsonObject {
 		property list<string> playback: ["mpv"]
 		property list<string> terminal: ["kitty"]
 	}
-	component Battery: JsonObject {
-		property int critPerc: 5
-		property list<var> popupThresholds: [
-			{
-				perc: 20,
-				name: qsTr("Low battery"),
-				message: qsTr("Battery is low"),
-				icon: "battery_android_frame_2"
-			},
-		]
-	}
 	component Color: JsonObject {
 		property int hyprsunsetTemp: 5000
 		property string mode: "dark"

Config/LockConf.qml

@@ -6,7 +6,6 @@ JsonObject {
 	property int maxFprintTries: 3
 	property bool recolorLogo: false
 	property bool showNotifContent: false
-	property bool showNotifIcon: true
 	property Sizes sizes: Sizes {
 	}
 

Config/Screenshot.qml

@@ -1,12 +1,12 @@
 import Quickshell.Io
 
 JsonObject {
+	property real corner_radius: 12.0
+	property bool drop_shadow: true
 	property bool enable_pp: true
 	property string mode: "manual"
-	property real radius: 12.0
+	property bool rounded_corners: false
-	property bool rounding: false
+	property real shadow_blur_radius: 22.0
-	property bool shadow: true
-	property real shadow_blur: 22.0
 	property list<int> shadow_color: [0, 0, 0, 160]
 	property real shadow_offset_x: 5.0
 	property real shadow_offset_y: 5.0

Daemons/BatteryService.qml

@@ -1,70 +0,0 @@
-import Quickshell
-import Quickshell.Services.UPower
-import QtQuick
-import ZShell
-import qs.Config
-import qs.Components.Toast
-import qs.Helpers
-
-Scope {
-	id: root
-
-	readonly property list<var> popupThresholds: [...Config.general.battery.popupThresholds].sort((a, b) => b.perc - a.perc)
-
-	function nearestThresholdAbove(p: real): var {
-		const thresholds = [...root.popupThresholds];
-		for (const perc of thresholds) {
-			if (p < perc.perc)
-				return perc;
-		}
-
-		return null;
-	}
-
-	Connections {
-		function onOnBatteryChanged(): void {
-			if (!Battery.ready)
-				return;
-
-			if (Battery.onBattery) {
-				if (Config.utilities.toasts.chargingChanged)
-					Toaster.toast(qsTr("Charger unplugged"), qsTr("Battery is discharging"), "power_off");
-				const p = Battery.currentPerc * 100;
-				const perc = root.nearestThresholdAbove(p);
-				if (perc)
-					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-			} else {
-				if (Config.utilities.toasts.chargingChanged)
-					Toaster.toast(qsTr("Charger plugged in"), qsTr("Battery is charging"), "power");
-			}
-		}
-
-		target: Battery
-	}
-
-	Connections {
-		function onCurrentPercChanged(): void {
-			if (!Battery.onBattery)
-				return;
-
-			const p = Battery.currentPerc * 100;
-			for (const perc of root.popupThresholds) {
-				if (p == perc.perc) {
-					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery perc is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-				}
-			}
-		}
-
-		function onReadyChanged(): void {
-			if (!Battery.ready)
-				return;
-
-			const p = Battery.currentPerc * 100;
-			const perc = root.nearestThresholdAbove(p);
-			if (perc)
-				Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-		}
-
-		target: Battery
-	}
-}

Daemons/NotifServer.qml

@@ -179,8 +179,6 @@ Singleton {
 		property string appIcon
 		property string appName
 		property string body
-		property string cachedImageSource: ""
-		property bool cachingImage: false
 		property bool closed
 		readonly property Connections conn: Connections {
 			function onActionsChanged(): void {
@@ -216,9 +214,9 @@ Singleton {
 			}
 
 			function onImageChanged(): void {
-				notif.imageSource = notif.notification.image || "";
+				notif.image = notif.notification.image;
-				notif.image = notif.imageSource;
+				if (notif.notification?.image)
-				notif.cacheImageIfNeeded();
+					notif.dummyImageLoader.active = true;
 			}
 
 			function onResidentChanged(): void {
@@ -235,12 +233,60 @@ Singleton {
 
 			target: notif.notification
 		}
+		readonly property LazyLoader dummyImageLoader: LazyLoader {
+			active: false
+
+			PanelWindow {
+				color: "transparent"
+				implicitHeight: Config.notifs.sizes.image
+				implicitWidth: Config.notifs.sizes.image
+
+				mask: Region {
+				}
+
+				Image {
+					function tryCache(): void {
+						if (status !== Image.Ready || width != Config.notifs.sizes.image || height != Config.notifs.sizes.image)
+							return;
+
+						const cacheKey = notif.appName + notif.summary + notif.id;
+						let h1 = 0xdeadbeef, h2 = 0x41c6ce57, ch;
+						for (let i = 0; i < cacheKey.length; i++) {
+							ch = cacheKey.charCodeAt(i);
+							h1 = Math.imul(h1 ^ ch, 2654435761);
+							h2 = Math.imul(h2 ^ ch, 1597334677);
+						}
+						h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+						h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+						h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+						h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+						const hash = (h2 >>> 0).toString(16).padStart(8, 0) + (h1 >>> 0).toString(16).padStart(8, 0);
+
+						const cache = `${Paths.notifimagecache}/${hash}.png`;
+						ZShellIo.saveItem(this, Qt.resolvedUrl(cache), () => {
+							notif.image = cache;
+							notif.dummyImageLoader.active = false;
+						});
+					}
+
+					anchors.fill: parent
+					asynchronous: true
+					cache: false
+					fillMode: Image.PreserveAspectCrop
+					opacity: 0
+					source: Qt.resolvedUrl(notif.image)
+
+					onHeightChanged: tryCache()
+					onStatusChanged: tryCache()
+					onWidthChanged: tryCache()
+				}
+			}
+		}
 		property real expireTimeout: 5
 		property bool hasActionIcons
+		property string id
 		property string image
-		property string imageSource
 		property var locks: new Set()
-		property string notifId
 		property Notification notification
 		property bool popup
 		property bool resident
@@ -283,26 +329,6 @@ Singleton {
 		}
 		property int urgency: NotificationUrgency.Normal
 
-		function cacheImageIfNeeded(): void {
-			const source = imageSource;
-
-			if (!source || cachingImage)
-				return;
-
-			if (cachedImageSource === source)
-				return;
-
-			cachingImage = true;
-
-			ZShellIo.cacheImage(Qt.resolvedUrl(source), Paths.notifimagecache, (path, url) => {
-				cachedImageSource = source;
-				image = path;
-				cachingImage = false;
-			}, () => {
-				cachingImage = false;
-			});
-		}
-
 		function close(): void {
 			closed = true;
 			if (locks.size === 0 && root.list.includes(this)) {
@@ -326,13 +352,14 @@ Singleton {
 			if (!notification)
 				return;
 
-			notifId = notification.id;
+			id = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			imageSource = notification.image || "";
+			image = notification.image;
-			image = imageSource;
+			if (notification?.image)
+				dummyImageLoader.active = true;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -342,8 +369,6 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
-
-			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

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

Drawers/Drawing.qml

@@ -23,7 +23,6 @@ Canvas {
 		ctx.save();
 		ctx.lineWidth = root.penWidth;
 		ctx.strokeStyle = root.penColor;
-		ctx.lineJoin = "round";
 		ctx.lineCap = "round";
 		ctx.beginPath();
 		ctx.moveTo(points[0].x, points[0].y);

Drawers/DrawingInput.qml

@@ -22,20 +22,20 @@ CustomMouseArea {
 	}
 
 	acceptedButtons: Qt.LeftButton | Qt.RightButton
-	enabled: z > 0
+	anchors.fill: root.visibilities.isDrawing ? parent : undefined
 	hoverEnabled: true
 	visible: root.visibilities.isDrawing
 
 	onPositionChanged: event => {
 		const x = event.x;
 		const y = event.y;
+
 		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
 			root.drawing.points.push(Qt.point(x, y));
 			root.drawing.requestPaint();
-			return;
 		}
 
-		if (!(event.buttons & Qt.LeftButton) && root.inLeftPanel(root.popout, x, y)) {
+		if (root.inLeftPanel(root.popout, x, y)) {
 			root.z = -2;
 			root.panels.drawing.expanded = true;
 		}

Drawers/Interactions.qml

@@ -2,21 +2,20 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
-import qs.Helpers
 import qs.Modules as BarPopouts
 
-Item {
+CustomMouseArea {
 	id: root
 
 	required property Item bar
 	property bool dashboardShortcutActive
+	property point dragStart
 	required property Drawing drawing
 	required property DrawingInput input
 	property bool osdShortcutActive
 	required property Panels panels
 	required property BarPopouts.Wrapper popouts
 	required property ShellScreen screen
-	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
 	required property PersistentProperties visibilities
 
@@ -53,123 +52,78 @@ Item {
 	}
 
 	anchors.fill: parent
+	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+	hoverEnabled: true
+	propagateComposedEvents: false
 
-	DragHandler {
+	onContainsMouseChanged: {
-		id: singleHandler
+		if (!containsMouse) {
-
+			if (!osdShortcutActive) {
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+				visibilities.osd = false;
-		dragThreshold: 0
+				root.panels.osd.hovered = false;
-		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfDifferentType | PointerHandler.ApprovesTakeOverByAnything
-		maximumPointCount: 1
-		minimumPointCount: 1
-		target: null
-
-		onActiveChanged: {
-			if (!active)
-				root.singleGestureTriggered = false;
-		}
-		onCentroidChanged: {
-			const x = centroid.position.x;
-			const y = centroid.position.y;
-			const dragX = x - centroid.pressPosition.x;
-			const dragY = y - centroid.pressPosition.y;
-
-			if (centroid.pressPosition.y >= root.screen.height - Config.barConfig.border && dragY < -200)
-				root.visibilities.launcher = true;
-
-			if (root.singleGestureTriggered)
-				return;
-
-			if (centroid.pressPosition.y < root.bar.implicitHeight) {
-				if (dragY > 20) {
-					root.visibilities.settings = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
-					root.visibilities.settings = false;
-					root.singleGestureTriggered = true;
-				}
 			}
 
-			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight)
+			if (!popouts.currentName.startsWith("traymenu")) {
-				if (dragY < -10) {
+				popouts.hasCurrent = false;
-					root.visibilities.dock = true;
-					root.singleGestureTriggered = true;
-				}
-
-			if (centroid.pressPosition.x > root.screen.width - Config.barConfig.border && centroid.pressPosition.y < (root.screen.height / 2) && dragX < -20) {
-				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 (Config.barConfig.autoHide)
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+				bar.isHovered = false;
-				root.singleGestureTriggered = true;
-			}
-
-			if (centroid.pressPosition.x <= Config.barConfig.border && dragX > 20) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
 		}
 	}
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+		const dragX = x - dragStart.x;
+		const dragY = y - dragStart.y;
 
-	HoverHandler {
+		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
-		id: hoverHandler
+			// root.input.z = 2;
+			root.panels.drawing.expanded = false;
+		}
 
-		onHoveredChanged: {
+		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
-			if (!hovered) {
+			bar.isHovered = true;
-				if (!root.osdShortcutActive) {
-					root.visibilities.osd = false;
-					root.panels.osd.hovered = false;
-				}
 
-				if (!root.popouts.currentName.startsWith("traymenu")) {
+		if (pressed && dragStart.y < bar.implicitHeight) {
-					root.popouts.hasCurrent = false;
+			if (dragY > 20)
-				}
+				visibilities.settings = true;
+			else if (dragY < -20)
+				visibilities.settings = false;
+		}
 
-				if (Config.barConfig.autoHide)
+		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
-					root.bar.isHovered = false;
+			if (dragY < -10)
+				visibilities.dock = true;
+
+		if (panels.sidebar.width === 0) {
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
+			}
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width;
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
+
+			if (!osdShortcutActive) {
+				visibilities.osd = showOsd;
+				root.panels.osd.hovered = showOsd;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
 			}
 		}
-		onPointChanged: {
-			const x = point.position.x;
-			const y = point.position.y;
 
-			if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
+		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
-				root.input.z = 2;
+			visibilities.dock = true;
-				root.panels.drawing.expanded = false;
-			}
 
-			if (!root.visibilities.bar && Config.barConfig.autoHide && y < root.bar.implicitHeight)
+		if (y < root.bar.implicitHeight) {
-				root.bar.isHovered = true;
+			root.bar.checkPopout(x);
-
-			if (root.panels.sidebar.width === 0) {
-				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			} else {
-				const outOfSidebar = x < root.width - root.panels.sidebar.width;
-				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (!root.osdShortcutActive) {
-					root.visibilities.osd = showOsd;
-					root.panels.osd.hovered = showOsd;
-				} else if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			}
-
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.visibilities.dock = true;
-
-			if (y < root.bar.implicitHeight)
-				root.bar.checkPopout(x);
 		}
 	}
+	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -178,8 +132,6 @@ Item {
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
-				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
-					root.visibilities.launcher = false;
 
 				root.visibilities.settings = false;
 				root.visibilities.sidebar = false;
@@ -209,10 +161,6 @@ Item {
 			}
 
 			if (root.visibilities.launcher) {
-				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
-					root.visibilities.dashboard = false;
-				}
-
 				root.visibilities.dock = false;
 				root.visibilities.settings = false;
 			}

Drawers/Panels.qml

@@ -13,6 +13,7 @@ import qs.Modules.Resources as Resources
 import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
+import qs.Modules.SysTray.Popouts as SysPopouts
 import qs.Config
 
 Item {
@@ -37,6 +38,7 @@ Item {
 	readonly property alias settingsWrapper: settingsWrapper
 	readonly property alias sidebar: sidebar
 	readonly property alias toasts: toasts
+	readonly property alias traySubmenus: traySubmenus
 	readonly property alias utilities: utilities
 	required property PersistentProperties visibilities
 
@@ -93,6 +95,79 @@ Item {
 		visibilities: root.visibilities
 	}
 
+	Item {
+		id: traySubmenus
+
+		Repeater {
+			model: popouts.content.state.submenus
+
+			CustomClippingRect {
+				id: subMenuWrapper
+
+				required property int index
+				required property var modelData
+				property real targetX: 0
+				property real targetY: 0
+
+				function updatePosition() {
+					let sourceItem = modelData.sourceItem;
+					if (!sourceItem || !sourceItem.parent)
+						return;
+
+					let mapped = sourceItem.mapToItem(root, 0, -Appearance.padding.small);
+
+					let rightX = mapped.x + modelData.sourceWidth + Config.barConfig.border;
+					let leftX = mapped.x - implicitWidth - Config.barConfig.border;
+
+					if (rightX + implicitWidth > root.width) {
+						targetX = leftX;
+					} else {
+						targetX = rightX;
+					}
+
+					targetY = mapped.y;
+
+					if (targetY + implicitHeight > root.height) {
+						targetY = root.height - implicitHeight;
+					}
+					if (targetY < 0)
+						targetY = 0;
+				}
+
+				implicitHeight: subMenuContent.implicitHeight + Appearance.padding.small * 2
+				implicitWidth: subMenuContent.implicitWidth + Appearance.padding.small * 2
+				radius: Appearance.rounding.normal
+				x: targetX
+				y: targetY
+
+				Behavior on implicitHeight {
+					Anim {
+					}
+				}
+				Behavior on implicitWidth {
+					Anim {
+					}
+				}
+
+				Component.onCompleted: {
+					updatePosition();
+				}
+				onImplicitHeightChanged: updatePosition()
+				onImplicitWidthChanged: updatePosition()
+
+				SysPopouts.SubMenu {
+					id: subMenuContent
+
+					anchors.centerIn: parent
+					handle: subMenuWrapper.modelData.handle
+					level: subMenuWrapper.index + 1
+					popouts: root.popouts.state
+					screen: root.screen
+				}
+			}
+		}
+	}
+
 	Modules.ClipWrapper {
 		id: popouts
 

Drawers/Windows.qml

@@ -35,7 +35,7 @@ Variants {
 			property var root: Quickshell.shellDir
 
 			WlrLayershell.exclusionMode: ExclusionMode.Ignore
-			// WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+			WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 			color: "transparent"
 			contentItem.focus: true
 			mask: visibilities.isDrawing ? null : region
@@ -64,7 +64,7 @@ Variants {
 
 				height: win.height - bar.implicitHeight - Config.barConfig.border
 				intersection: Intersection.Xor
-				regions: popoutRegions.instances
+				regions: [...popoutRegions.instances, ...subMenuRegions.instances]
 				width: win.width - Config.barConfig.border * 2
 				x: Config.barConfig.border
 				y: bar.implicitHeight
@@ -93,6 +93,22 @@ Variants {
 				}
 			}
 
+			Variants {
+				id: subMenuRegions
+
+				model: panels.traySubmenus.children
+
+				Region {
+					required property Item modelData
+
+					height: modelData.height
+					intersection: Intersection.Subtract
+					width: modelData.width
+					x: modelData.x + panels.traySubmenus.x + Config.barConfig.border
+					y: modelData.y + panels.traySubmenus.y + bar.implicitHeight
+				}
+			}
+
 			HyprlandFocusGrab {
 				id: focusGrab
 
@@ -229,7 +245,6 @@ Variants {
 					id: notifsBg
 
 					panel: panels.notifications
-					radius: Appearance.rounding.normal
 				}
 
 				PanelBg {
@@ -303,36 +318,36 @@ Variants {
 					panel: panels.drawing
 					radius: Appearance.rounding.normal
 				}
-			}
 
-			Loader {
+				Repeater {
-				id: drawingLoader
+					model: panels.traySubmenus.children
 
-				active: visibilities.isDrawing
+					PanelBg {
-				anchors.fill: parent
+						required property Item modelData
-				z: 2
 
-				sourceComponent: Drawing {
+						deformAmount: 0.1
-					id: drawing
+						panel: modelData
+						radius: 20 * Appearance.rounding.scale
+					}
 				}
 			}
 
-			Loader {
+			Drawing {
-				id: inputLoader
+				id: drawing
 
-				active: visibilities.isDrawing
 				anchors.fill: parent
 				z: 2
+			}
 
-				sourceComponent: DrawingInput {
+			DrawingInput {
-					id: input
+				id: input
 
-					bar: bar
+				bar: bar
-					drawing: drawingLoader.item
+				drawing: drawing
-					panels: panels
+				panels: panels
-					popout: panels.drawing
+				popout: panels.drawing
-					visibilities: visibilities
+				visibilities: visibilities
-				}
+				z: 2
 			}
 
 			Interactions {
@@ -340,9 +355,8 @@ Variants {
 
 				anchors.fill: parent
 				bar: bar
-				drawing: drawingLoader.item
+				drawing: drawing
-				enabled: true
+				input: input
-				input: inputLoader.item
 				panels: panels
 				popouts: panels.popouts
 				screen: scope.modelData
@@ -353,7 +367,7 @@ Variants {
 					id: panels
 
 					bar: bar
-					drawingItem: drawingLoader.item
+					drawingItem: drawing
 					screen: scope.modelData
 					visibilities: visibilities
 

Greeter/GreeterState.qml

@@ -16,14 +16,27 @@ Scope {
 	property bool launching: false
 	property string promptMessage: ""
 	readonly property var selectedSession: sessionIndex >= 0 ? sessions[sessionIndex] : null
-	readonly property var selectedUser: Users.selectedUser
 	property int sessionIndex: sessions.length > 0 ? 0 : -1
 	property var sessions: []
-	readonly property string userFace: selectedUser ? selectedUser.face : ""
-	readonly property string username: Users.selectedUsername
 
 	// User handling - now uses the Users singleton
 	readonly property var users: Users.users
+	readonly property var selectedUser: Users.selectedUser
+	readonly property string username: Users.selectedUsername
+	readonly property string userFace: selectedUser ? selectedUser.face : ""
+
+	// User selection functions (delegate to Users singleton)
+	function selectUser(username: string): bool {
+		return Users.selectUser(username);
+	}
+
+	function selectNextUser(): void {
+		Users.selectNext();
+	}
+
+	function selectPreviousUser(): void {
+		Users.selectPrevious();
+	}
 
 	signal flashMsg
 
@@ -45,11 +58,11 @@ Scope {
 
 			event.accepted = true;
 			return;
-		} else if (event.key === Qt.Key_Escape) {
+		}
-			buffer = "";
+
-		} else if (" abcdefghijklmnopqrstuvwxyz1234567890`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?".includes(event.text.toLowerCase())) {
+		if (event.text && !/[\r\n]/.test(event.text)) {
-			// No illegal characters (you are insane if you use unicode in your password)
 			buffer += event.text;
+			event.accepted = true;
 		}
 	}
 
@@ -68,19 +81,6 @@ Scope {
 		Greetd.launch(selectedSession.command, [], true);
 	}
 
-	function selectNextUser(): void {
-		Users.selectNext();
-	}
-
-	function selectPreviousUser(): void {
-		Users.selectPrevious();
-	}
-
-	// User selection functions (delegate to Users singleton)
-	function selectUser(username: string): bool {
-		return Users.selectUser(username);
-	}
-
 	function submit(): void {
 		errorMessage = "";
 

Helpers/Battery.qml

@@ -1,32 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Services.UPower
-import qs.Config
-
-Singleton {
-	id: root
-
-	readonly property var colors: {
-		if (deviceState === UPowerDeviceState.Charging || deviceState === UPowerDeviceState.FullyCharged)
-			return {
-				fg: DynamicColors.swapRG(DynamicColors.palette.m3error),
-				bg: DynamicColors.swapRG(DynamicColors.palette.m3onError)
-			};
-		else if (currentPerc <= 0.2)
-			return {
-				fg: DynamicColors.palette.m3error,
-				bg: DynamicColors.palette.m3onError
-			};
-		else
-			return {
-				fg: DynamicColors.palette.m3onSurface,
-				bg: DynamicColors.palette.m3surface
-			};
-	}
-	readonly property real currentPerc: UPower.displayDevice.percentage
-	readonly property var deviceState: UPower.displayDevice.state
-	readonly property bool isLaptop: UPower.displayDevice.isLaptopBattery
-	readonly property bool onBattery: UPower.onBattery
-	readonly property bool ready: UPower.displayDevice.ready
-}

Helpers/FetchPresets.qml

@@ -1,63 +0,0 @@
-// FetchPresets.qml
-pragma Singleton
-
-import QtQuick
-import Quickshell
-import Quickshell.Io
-
-Singleton {
-	id: root
-
-	property var parsedPresets: ({})
-	readonly property var presets: parsedPresets
-	property bool ready: false
-
-	function accents(presetName, variantName) {
-		const variant = parsedPresets[presetName]?.variants?.[variantName];
-
-		return variant?.accents ?? [];
-	}
-
-	function defaultAccent(presetName, variantName) {
-		const variant = parsedPresets[presetName]?.variants?.[variantName];
-
-		return variant?.default_accent ?? "";
-	}
-
-	function modes(presetName, variantName) {
-		const variant = parsedPresets[presetName]?.variants?.[variantName];
-
-		return variant?.modes ?? [];
-	}
-
-	function presetNames() {
-		return Object.keys(parsedPresets);
-	}
-
-	function variantNames(presetName) {
-		const preset = parsedPresets[presetName];
-
-		if (!preset || !preset.variants)
-			return [];
-
-		return Object.keys(preset.variants);
-	}
-
-	Process {
-		command: ["zshell-cli", "scheme", "list-presets", "--json"]
-		running: true
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				try {
-					const parsed = JSON.parse(text);
-
-					root.parsedPresets = parsed.presets ?? {};
-					root.ready = true;
-				} catch (e) {
-					console.error("Failed to parse presets JSON:", e);
-				}
-			}
-		}
-	}
-}

Helpers/GameMode.qml

@@ -36,7 +36,7 @@ Singleton {
 	PersistentProperties {
 		id: props
 
-		property bool enabled: Hypr.options.animations.enabled === 0
+		property bool enabled: Hypr.options["animations:enabled"] === 0
 
 		reloadableId: "gamemode"
 	}

Helpers/Hypr.qml

@@ -158,5 +158,6 @@ Singleton {
 
 	HyprExtras {
 		id: extras
+
 	}
 }

Helpers/Hyprsunset.qml

@@ -2,13 +2,12 @@ pragma Singleton
 
 import Quickshell
 import QtQuick
-import ZShell.Services
 import qs.Config
 
 Singleton {
 	id: root
 
-	readonly property bool enabled: service.enabled
+	property bool enabled
 	readonly property int end: Config.general.color.scheduleHyprsunsetEnd
 	property bool manualToggle: false
 	readonly property int start: Config.general.color.scheduleHyprsunsetStart
@@ -18,20 +17,69 @@ Singleton {
 		if (!Config.general.color.scheduleHyprsunset)
 			return;
 
-		service.apply();
+		var now = new Date();
+		if (now.getHours() >= root.start || now.getHours() < root.end) {
+			root.startNightLight(root.temp);
+		} else {
+			root.stopNightLight();
+		}
+	}
+
+	function startNightLight(temp: int): void {
+		Quickshell.execDetached(["hyprctl", "hyprsunset", "temperature", `${temp}`]);
+		root.enabled = true;
+	}
+
+	function stopNightLight(): void {
+		Quickshell.execDetached(["hyprctl", "hyprsunset", "identity"]);
+		root.enabled = false;
 	}
 
 	function toggleNightLight(): void {
-		service.manualToggle = true;
+		if (enabled)
-		service.toggle();
+			stopNightLight();
+		else
+			startNightLight(temp);
 	}
 
-	HyprsunsetManager {
+	onManualToggleChanged: {
-		id: service
+		if (root.manualToggle)
+			manualTimer.start();
+	}
 
-		activeAuto: Config.general.color.scheduleHyprsunset
+	Timer {
-		endTime: root.end
+		id: manualTimer
-		startTime: root.start
+
-		temp: root.temp
+		interval: 60000 * 60
+		repeat: false
+		running: false
+
+		onTriggered: {
+			root.manualToggle = false;
+		}
+	}
+
+	Timer {
+		interval: 5000
+		repeat: true
+		running: true
+		triggeredOnStart: true
+
+		onTriggered: {
+			if (!Config.general.color.scheduleHyprsunset)
+				return;
+
+			if (root.manualToggle)
+				return;
+
+			var now = new Date();
+			if (now.getHours() >= root.start || now.getHours() < root.end) {
+				if (!root.enabled)
+					root.startNightLight(root.temp);
+			} else {
+				if (root.enabled)
+					root.stopNightLight();
+			}
+		}
 	}
 }

Helpers/ModeScheduler.qml

@@ -12,7 +12,7 @@ Singleton {
 
 	readonly property int darkEnd: Config.general.color.scheduleDarkEnd
 	readonly property int darkStart: Config.general.color.scheduleDarkStart
-	readonly property bool enabled: Config.general.color.scheduleDark && Config.general.color.schemeGeneration
+	readonly property bool enabled: Config.general.color.scheduleDark
 
 	function applyDarkMode() {
 		Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", "dark"]);

Helpers/Picker.qml

@@ -26,23 +26,16 @@ MouseArea {
 			return (bc.pinned - ac.pinned) || ((bc.fullscreen !== 0) - (ac.fullscreen !== 0)) || (bc.floating - ac.floating);
 		});
 	}
-	readonly property int cornerRadius: Hypr.options.decoration.rounding
 	property real ex: screen.width
 	property real ey: screen.height
 	required property LazyLoader loader
 	property bool onClient
-	property real realBorderWidth: onClient ? (Hypr.options.general.border_size ?? 1) : 2
+	property real realBorderWidth: onClient ? (Hypr.options["general:border_size"] ?? 1) : 2
-	property real realRounding: onClient ? (Hypr.options.decoration.rounding ?? 0) : 0
+	property real realRounding: onClient ? (Hypr.options["decoration:rounding"] ?? 0) : 0
 	property real rsx: Math.min(sx, ex)
 	property real rsy: Math.min(sy, ey)
-	readonly property real scaleRatio: Hypr.monitorFor(screen).scale
 	required property ShellScreen screen
 	property real sh: Math.abs(sy - ey)
-	readonly property color shadowColor: Hypr.options.decoration.shadow.color
-	readonly property bool shadowEnabled: Hypr.options.decoration.shadow.enabled
-	readonly property var shadowOffset: Hypr.options.decoration.shadow.offset
-	readonly property int shadowRange: Hypr.options.decoration.shadow.range
-	readonly property int shadowRenderPower: Hypr.options.decoration.shadow.render_power
 	property real ssx
 	property real ssy
 	property real sw: Math.abs(sx - ex)
@@ -73,14 +66,7 @@ MouseArea {
 
 	function save(): void {
 		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
-		const rounding = root.cornerRadius > 0;
+		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--image"] : ["swappy", "-f"];
-		const shadow_blur = root.shadowRange / root.shadowRenderPower;
-		const r = Math.floor(root.shadowColor.r * 256);
-		const g = Math.floor(root.shadowColor.g * 256);
-		const b = Math.floor(root.shadowColor.b * 256);
-		const a = Math.floor(root.shadowColor.a * 256);
-		const args = Config.screenshot.mode === "auto" ? ["--rounding", `${rounding}`, "--radius", root.cornerRadius, "--shadow", root.shadowEnabled, "--shadow-blur", `${shadow_blur}`, "--shadow-color", `${r},${g},${b},${a}`, "--shadow-offset-x", root.shadowOffset[0], "--shadow-offset-y", root.shadowOffset[1]] : [];
-		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--scale", root.scaleRatio, ...args, "--image"] : ["swappy", "-f"];
 		ZShellIo.saveItem(screencopy, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => Quickshell.execDetached([...cmd, path]));
 		closeAnim.start();
 	}

Helpers/Recorder.qml

@@ -1,82 +1,41 @@
-pragma Singleton
+// pragma Singleton
-
+//
-import Quickshell
+// import Quickshell
-import Quickshell.Io
+// import QtQuick
-import QtQuick
+//
-
+// Singleton {
-Singleton {
+// 	id: root
-	id: root
+//
-
+// 	function start(extraArgs = []): void {
-	readonly property alias elapsed: props.elapsed
+// 		needsStart = true;
-	property bool needsPause
+// 		startArgs = extraArgs;
-	property bool needsStart
+// 		checkProc.running = true;
-	property bool needsStop
+// 	}
-	readonly property alias paused: props.paused
+//
-	readonly property alias running: props.running
+// 	PersistentProperties {
-	property list<string> startArgs
+// 		id: props
-
+//
-	function start(extraArgs = []): void {
+// 		property real elapsed: 0
-		needsStart = true;
+// 		property bool paused: false
-		startArgs = extraArgs;
+// 		property bool running: false
-		checkProc.running = true;
+//
-	}
+// 		reloadableId: "recorder"
-
+// 	}
-	function stop(): void {
+//
-		needsStop = true;
+// 	Process {
-		checkProc.running = true;
+// 		id: checkProc
-	}
+//
-
+// 		command: ["pidof", "gpu-screen-recorder"]
-	function togglePause(): void {
+// 		running: true
-		needsPause = true;
+//
-		checkProc.running = true;
+// 		onExited: code => {
-	}
+// 			props.running = code === 0;
-
+//
-	PersistentProperties {
+// 			if (code === 0) {
-		id: props
+// 				if (root.needsStop) {
-
+// 					Quickshell.execDetached(["zshell-cli"]);
-		property real elapsed: 0
+// 				}
-		property bool paused: false
+// 			}
-		property bool running: false
+// 		}
-
+// 	}
-		reloadableId: "recorder"
+// }
-	}
-
-	Process {
-		id: checkProc
-
-		command: ["pidof", "gpu-screen-recorder"]
-		running: true
-
-		onExited: code => {
-			props.running = code === 0;
-
-			if (code === 0) {
-				if (root.needsStop) {
-					Quickshell.execDetached(["zshell-cli", "record", "record"]);
-					props.running = false;
-					props.paused = false;
-				} else if (root.needsPause) {
-					Quickshell.execDetached(["zshell-cli", "record", "record", "-p"]);
-					props.paused = !props.paused;
-				}
-			} else if (root.needsStart) {
-				Quickshell.execDetached(["zshell-cli", "record", "record", ...root.startArgs]);
-				props.running = true;
-				props.paused = false;
-				props.elapsed = 0;
-			}
-
-			root.needsStart = false;
-			root.needsStop = false;
-			root.needsPause = false;
-		}
-	}
-
-	Connections {
-		function onSecondsChanged(): void {
-			props.elapsed++;
-		}
-
-		target: Time // qmllint disable incompatible-type
-	}
-}

Helpers/Searcher.qml

@@ -1,7 +1,7 @@
+import Quickshell
 import "../scripts/fzf.js" as Fzf
 import "../scripts/fuzzysort.js" as Fuzzy
 import QtQuick
-import Quickshell
 
 Singleton {
 	property var extraOpts: ({})

Helpers/SystemUsage.qml

@@ -17,7 +17,6 @@ Singleton {
 	property var disks: []
 	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

Helpers/UPower.qml

@@ -0,0 +1,12 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Services.UPower
+
+Singleton {
+	id: root
+
+	readonly property list<UPowerDevice> devices: UPower.devices.values
+	readonly property UPowerDevice displayDevice: UPower.displayDevice
+	readonly property bool onBattery: UPower.onBattery
+}

Helpers/Wallpapers.qml

@@ -1,9 +1,7 @@
 pragma Singleton
-pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Io
-import QtQuick
 import ZShell.Models
 import qs.Config
 import qs.Modules
@@ -14,17 +12,11 @@ Searcher {
 	id: root
 
 	property string actualCurrent: WallpaperPath.currentWallpaperPath
-	property alias crops: adapter.monitorCrops
 	readonly property string current: showPreview ? previewPath : actualCurrent
-	property alias monitorCrops: monitorCrops
 	property string previewPath
 	property bool recentlyChanged
 	property bool showPreview: false
 
-	function getCrop(screen: string): var {
-		return root.crops[screen];
-	}
-
 	function preview(path: string): void {
 		previewPath = path;
 		if (Config.general.color.schemeGeneration)
@@ -32,33 +24,9 @@ Searcher {
 		showPreview = true;
 	}
 
-	function setCrop(screen: string, rect: rect, scaledRect: rect, zoom: real): void {
-		let updated = Object.assign({}, root.crops);
-
-		if (zoom <= 0)
-			zoom = 1.0;
-		else if (zoom > 5.0)
-			zoom = 5.0;
-
-		updated[screen] = {
-			x: rect.x,
-			y: rect.y,
-			width: rect.width,
-			height: rect.height,
-			scaledX: scaledRect.x,
-			scaledY: scaledRect.y,
-			scaledWidth: scaledRect.width,
-			scaledHeight: scaledRect.height,
-			zoom: zoom
-		};
-
-		root.crops = updated;
-	}
-
 	function setWallpaper(path: string): void {
 		actualCurrent = path;
 		WallpaperPath.currentWallpaperPath = path;
-		Quickshell.screens.forEach(n => setCrop(n.name, Qt.rect(0, 0, 1, 1), Qt.rect(0, 0, 0, 0), 1.0));
 		Quickshell.execDetached(["zshell-cli", "wallpaper", "lockscreen", "--input-image", `${root.actualCurrent}`, "--output-path", `${Paths.state}/lockscreen_bg.png`, "--blur-amount", `${Config.lock.blurAmount}`]);
 		if (Config.general.color.schemeGeneration)
 			Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--image-path", `${root.actualCurrent}`, "--scheme", `${Config.colors.schemeType}`, "--mode", `${Config.general.color.mode}`]);
@@ -85,22 +53,6 @@ Searcher {
 		target: "wallpaper"
 	}
 
-	FileView {
-		id: monitorCrops
-
-		path: `${Paths.state}/wallpaper-crops.json`
-		watchChanges: true
-
-		onAdapterUpdated: writeAdapter()
-		onFileChanged: reload()
-
-		JsonAdapter {
-			id: adapter
-
-			property var monitorCrops: ({})
-		}
-	}
-
 	FileSystemModel {
 		id: wallpapers
 

Modules/Background.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	property real ibr: invertBottomRounding ? -1 : 1
+	required property bool invertBottomRounding
+	property real rounding: Appearance.rounding.smallest
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY - root.roundingY * root.ibr
+	}
+
+	PathArc {
+		direction: root.invertBottomRounding ? PathArc.Clockwise : PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY * root.ibr
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height - root.roundingY * 2)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+}

Modules/Clock.qml

@@ -23,7 +23,7 @@ CustomRect {
 
 		anchors.centerIn: parent
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-		font: Appearance.font.family.mono // qmllint disable incompatible-type
+		font: Appearance.font.family.mono
 		text: Time.dateStr
 
 		Behavior on color {

Modules/Content.qml

@@ -16,6 +16,7 @@ Item {
 	readonly property Item current: currentPopout?.item ?? null
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
 	required property PopoutState popouts
+	required property ShellScreen screen
 
 	implicitHeight: (currentPopout?.implicitHeight ?? 0) + 5 * 2
 	implicitWidth: (currentPopout?.implicitWidth ?? 0) + 5 * 2
@@ -63,6 +64,7 @@ Item {
 
 					TrayMenuPopout {
 						popouts: root.popouts
+						screen: root.screen
 						trayItem: trayMenu.modelData.menu
 					}
 				}

Modules/Dashboard/Background.qml

@@ -0,0 +1,65 @@
+import qs.Components
+import qs.Config
+import QtQuick
+import QtQuick.Shapes
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: Appearance.rounding.normal
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+}

Modules/Dashboard/Wrapper.qml

@@ -20,7 +20,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	implicitHeight: content.implicitHeight
-	implicitWidth: content.implicitWidth || 854
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
 	opacity: 1 - offsetScale
 	visible: offsetScale < 1
 

Modules/Dock/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: Appearance.rounding.normal
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height - root.roundingY * 2)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+}

Modules/Dock/Wrapper.qml

@@ -9,17 +9,18 @@ Item {
 	id: root
 
 	property int contentHeight
-	property real offsetScale: shouldBeActive ? 0 : 1
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.dock && Config.dock.enable
 	required property PersistentProperties visibilities
 
+	readonly property bool shouldBeActive: visibilities.dock
+	property real offsetScale: shouldBeActive ? 0 : 1
+
+	visible: offsetScale < 1
 	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 400
 	opacity: 1 - offsetScale
-	visible: offsetScale < 1
 
 	Behavior on offsetScale {
 		Anim {
@@ -31,10 +32,10 @@ Item {
 	Loader {
 		id: content
 
-		active: root.shouldBeActive || root.visible
 		anchors.left: parent.left
 		anchors.top: parent.top
-		asynchronous: true
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			panels: root.panels

Modules/Drawing/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.width < rounding * 2
+	readonly property real rounding: Appearance.rounding.normal
+	readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.roundingX * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.rounding * 2
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: -root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: -(root.wrapper.width - root.roundingX * 2)
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: -root.roundingX
+		relativeY: root.rounding
+	}
+}

Modules/Drawing/Wrapper.qml

@@ -44,10 +44,10 @@ Item {
 	Loader {
 		id: icon
 
-		active: root.shouldBeActive || root.visible
+		active: Qt.binding(() => root.shouldBeActive || root.visible)
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		asynchronous: true
+		height: content.contentItem.height
 		opacity: root.expanded ? 0 : 1
 
 		Behavior on opacity {
@@ -63,10 +63,8 @@ Item {
 	Loader {
 		id: content
 
-		active: root.shouldBeActive || root.visible
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		asynchronous: true
 		opacity: root.expanded ? 1 : 0
 
 		Behavior on opacity {
@@ -77,5 +75,7 @@ Item {
 			drawing: root.drawing
 			visibilities: root.visibilities
 		}
+
+		Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible)
 	}
 }

Modules/Launcher/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: Appearance.rounding.smallest + 5
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height - root.roundingY * 2)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+}

Modules/Launcher/Wrapper.qml

@@ -4,7 +4,6 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
-import qs.Modules.Launcher.Services
 
 Item {
 	id: root
@@ -12,24 +11,34 @@ Item {
 	property int contentHeight
 	readonly property real maxHeight: {
 		let max = screen.height - Appearance.spacing.large * 2;
-		if (visibilities.resources && panels.resourcesWrapper.x + panels.resourcesWrapper.width > root.x)
+		if (visibilities.resources)
 			max -= panels.resources.nonAnimHeight;
-		if (panels.popouts.hasCurrent)
+		if (visibilities.dashboard && panels.dashboard.x < root.x + root.implicitWidth)
-			if (panels.popouts.current.x + panels.popouts.current.width > root.x && panels.popouts.current.x < root.x + root.width)
+			max -= panels.dashboard.nonAnimHeight;
-				max -= panels.popouts.nonAnimHeight;
+		if (panels.popouts.currentName.startsWith("updates"))
+			max -= panels.popouts.nonAnimHeight;
 		return max;
 	}
-	property real offsetScale: shouldBeActive ? 0 : 1
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.launcher
 	required property PersistentProperties visibilities
+	readonly property bool shouldBeActive: visibilities.launcher
+	property real offsetScale: shouldBeActive ? 0 : 1
 
+	onShouldBeActiveChanged: {
+		if (shouldBeActive) {
+			implicitHeight = Qt.binding(() => content.implicitHeight);
+			timer.stop();
+		} else {
+			implicitHeight = implicitHeight;
+		}
+	}
+
+	visible: offsetScale < 1
 	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 400
 	opacity: 1 - offsetScale
-	visible: offsetScale < 1
 
 	Behavior on offsetScale {
 		Anim {
@@ -38,26 +47,61 @@ Item {
 		}
 	}
 
-	Component.onCompleted: Qt.callLater(() => Apps)
+	onMaxHeightChanged: timer.start()
-	onShouldBeActiveChanged: {
+
-		if (shouldBeActive)
+	Connections {
-			implicitHeight = Qt.binding(() => content.implicitHeight);
+		function onEnabledChanged(): void {
-		else
+			timer.start();
-			implicitHeight = implicitHeight;
+		}
+
+		function onMaxShownChanged(): void {
+			timer.start();
+		}
+
+		target: Config.launcher
+	}
+
+	Connections {
+		function onValuesChanged(): void {
+			if (DesktopEntries.applications.values.length < Config.launcher.maxAppsShown)
+				timer.start();
+		}
+
+		target: DesktopEntries.applications
+	}
+
+	Timer {
+		id: timer
+
+		interval: Appearance.anim.durations.small
+
+		onRunningChanged: {
+			if (running && !root.shouldBeActive) {
+				content.visible = false;
+				content.active = true;
+			} else {
+				root.contentHeight = Math.min(root.maxHeight, content.implicitHeight);
+				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
+				content.visible = true;
+			}
+		}
 	}
 
 	Loader {
 		id: content
 
-		active: root.shouldBeActive || root.visible
+		active: false
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		asynchronous: true
 
 		sourceComponent: Content {
 			maxHeight: root.maxHeight
 			panels: root.panels
 			visibilities: root.visibilities
+
+			Component.onCompleted: root.contentHeight = implicitHeight
 		}
+
+		Component.onCompleted: timer.start()
 	}
 }

Modules/Lock/IdleMonitors.qml

@@ -2,7 +2,6 @@ pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Wayland
-import ZShell.Internal
 import qs.Config
 import qs.Helpers
 
@@ -30,10 +29,6 @@ Scope {
 			Quickshell.execDetached(action);
 	}
 
-    LidWatcher {
-        onAboutToSleep: root.lock.lock.locked = true
-    }
-
 	Variants {
 		model: Config.general.idle.timeouts
 

Modules/Lock/NotifGroup.qml

@@ -58,7 +58,6 @@ CustomRect {
 					fillMode: Image.PreserveAspectCrop
 					height: Config.notifs.sizes.image
 					source: Qt.resolvedUrl(root.image)
-					visible: Config.lock.showNotifIcon
 					width: Config.notifs.sizes.image
 				}
 			}

Modules/Lock/Pam.qml

@@ -30,8 +30,6 @@ Scope {
 			} else {
 				buffer = buffer.slice(0, -1);
 			}
-		} else if (event.key === Qt.Key_Escape) {
-			buffer = "";
 		} else if (" abcdefghijklmnopqrstuvwxyz1234567890`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?".includes(event.text.toLowerCase())) {
 			// No illegal characters (you are insane if you use unicode in your password)
 			buffer += event.text;

Modules/Notifications/Background.qml

@@ -0,0 +1,59 @@
+import qs.Components
+import qs.Config
+import QtQuick
+import QtQuick.Shapes
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: 8
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property var sidebar
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathLine {
+		relativeX: -(root.wrapper.width + root.rounding)
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.sidebar.notifsRoundingX
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.sidebar.notifsRoundingX
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.height > 0 ? root.wrapper.width - root.rounding - root.sidebar.notifsRoundingX : root.wrapper.width
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: root.rounding
+		relativeX: root.rounding
+		relativeY: root.rounding
+	}
+}

Modules/Notifications/Content.qml

@@ -8,7 +8,7 @@ import QtQuick
 Item {
 	id: root
 
-	readonly property int padding: Appearance.padding.smaller
+	readonly property int padding: 6
 	required property Item panels
 	required property PersistentProperties visibilities
 
@@ -54,7 +54,7 @@ Item {
 		anchors.fill: parent
 		anchors.margins: root.padding
 		color: "transparent"
-		radius: Appearance.rounding.normal - root.padding
+		radius: Appearance.rounding.smallest / 2
 
 		CustomListView {
 			id: list
@@ -72,7 +72,7 @@ Item {
 				required property NotifServer.Notif modelData
 				readonly property alias nonAnimHeight: notif.nonAnimHeight
 
-				implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Appearance.spacing.small)
+				implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : 8)
 				implicitWidth: notif.implicitWidth
 
 				ListView.onRemove: removeAnim.start()
@@ -151,6 +151,48 @@ Item {
 					property: "y"
 				}
 			}
+
+			ExtraIndicator {
+				anchors.top: parent.top
+				extra: {
+					const count = list.count;
+					if (count === 0)
+						return 0;
+
+					const scrollY = list.contentY;
+
+					let height = 0;
+					for (let i = 0; i < count; i++) {
+						height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + 8;
+
+						if (height - 8 >= scrollY)
+							return i;
+					}
+
+					return count;
+				}
+			}
+
+			ExtraIndicator {
+				anchors.bottom: parent.bottom
+				extra: {
+					const count = list.count;
+					if (count === 0)
+						return 0;
+
+					const scrollY = list.contentHeight - (list.contentY + list.height);
+
+					let height = 0;
+					for (let i = count - 1; i >= 0; i--) {
+						height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + 8;
+
+						if (height - 8 >= scrollY)
+							return count - i - 1;
+					}
+
+					return 0;
+				}
+			}
 		}
 	}
 

Modules/Notifications/Sidebar/Background.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.width < rounding * 2
+	readonly property real notifsRoundingX: panels.notifications.height > 0 && notifsWidthDiff < rounding * 2 ? notifsWidthDiff / 2 : rounding
+	readonly property real notifsWidthDiff: panels.notifications.width - wrapper.width
+	required property var panels
+	readonly property real rounding: Config.barConfig.rounding
+	readonly property real utilsRoundingX: utilsWidthDiff < rounding * 2 ? utilsWidthDiff / 2 : rounding
+	readonly property real utilsWidthDiff: panels.utilities.width - wrapper.width
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathLine {
+		relativeX: -root.wrapper.width - root.notifsRoundingX
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: root.notifsRoundingX
+		radiusY: root.rounding
+		relativeX: root.notifsRoundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.rounding * 2
+	}
+
+	PathArc {
+		radiusX: root.utilsRoundingX
+		radiusY: root.rounding
+		relativeX: -root.utilsRoundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width + root.utilsRoundingX
+		relativeY: 0
+	}
+}

Modules/Notifications/Sidebar/Notif.qml

@@ -136,10 +136,7 @@ CustomRect {
 				wrapMode: Text.WordWrap
 
 				onLinkActivated: link => {
-					if (Config.launcher.uwsm)
+					Quickshell.execDetached(["app2unit", "-O", "--", link]);
-						Quickshell.execDetached(["app2unit", "-O", "--", link]);
-					else
-						Quickshell.execDetached(["xdg-open", link]);
 					root.visibilities.sidebar = false;
 				}
 			}

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

@@ -1,290 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-CustomRect {
-	id: root
-
-	required property var props
-	required property PersistentProperties visibilities
-
-	Layout.fillWidth: true
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Appearance.rounding.smallest
-
-	ColumnLayout {
-		id: layout
-
-		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.normal
-
-		RowLayout {
-			spacing: Appearance.spacing.normal
-			z: 1
-
-			CustomRect {
-				color: Recorder.running ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3secondaryContainer
-				implicitHeight: {
-					const h = icon.implicitHeight + Appearance.padding.smaller * 2;
-					return h - (h % 2);
-				}
-				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
-
-				MaterialIcon {
-					id: icon
-
-					anchors.centerIn: parent
-					anchors.horizontalCenterOffset: -0.5
-					anchors.verticalCenterOffset: 1.5
-					color: Recorder.running ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSecondaryContainer
-					font.pointSize: Appearance.font.size.large
-					text: "screen_record"
-				}
-			}
-
-			ColumnLayout {
-				Layout.fillWidth: true
-				spacing: 0
-
-				CustomText {
-					Layout.fillWidth: true
-					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.normal
-					text: qsTr("Screen Recorder")
-				}
-
-				CustomText {
-					Layout.fillWidth: true
-					color: DynamicColors.palette.m3onSurfaceVariant
-					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.small
-					text: Recorder.paused ? qsTr("Recording paused") : Recorder.running ? qsTr("Recording running") : qsTr("Recording off")
-				}
-			}
-
-			CustomSplitButton {
-				active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0]
-				disabled: Recorder.running
-
-				menuItems: [
-					MenuItem {
-						activeText: qsTr("Fullscreen")
-						icon: "fullscreen"
-						text: qsTr("Record fullscreen")
-
-						onClicked: Recorder.start()
-					},
-					MenuItem {
-						activeText: qsTr("Region")
-						icon: "screenshot_region"
-						text: qsTr("Record region")
-
-						onClicked: Recorder.start(["-r"])
-					},
-					MenuItem {
-						activeText: qsTr("Fullscreen")
-						icon: "select_to_speak"
-						text: qsTr("Record fullscreen with sound")
-
-						onClicked: Recorder.start(["-s"])
-					},
-					MenuItem {
-						activeText: qsTr("Region")
-						icon: "volume_up"
-						text: qsTr("Record region with sound")
-
-						onClicked: Recorder.start(["-s", "-r"])
-					}
-				]
-
-				menu.onItemSelected: item => root.props.recordingMode = item.icon + item.text
-			}
-		}
-
-		Loader {
-			id: listOrControls
-
-			property bool running: Recorder.running
-
-			Layout.fillWidth: true
-			Layout.preferredHeight: implicitHeight
-			asynchronous: true
-			sourceComponent: running ? recordingControls : recordingList
-
-			Behavior on Layout.preferredHeight {
-				id: locHeightAnim
-
-				enabled: false
-
-				Anim {
-				}
-			}
-			Behavior on running {
-				SequentialAnimation {
-					ParallelAnimation {
-						Anim {
-							duration: Appearance.anim.durations.small
-							easing: Appearance.anim.curves.standardAccel
-							property: "scale"
-							target: listOrControls
-							to: 0.7
-						}
-
-						Anim {
-							duration: Appearance.anim.durations.small
-							easing: Appearance.anim.curves.standardAccel
-							property: "opacity"
-							target: listOrControls
-							to: 0
-						}
-					}
-
-					PropertyAction {
-						property: "enabled"
-						target: locHeightAnim
-						value: true
-					}
-
-					PropertyAction {
-					}
-
-					PropertyAction {
-						property: "enabled"
-						target: locHeightAnim
-						value: false
-					}
-
-					ParallelAnimation {
-						Anim {
-							duration: Appearance.anim.durations.small
-							easing: Appearance.anim.curves.standardDecel
-							property: "scale"
-							target: listOrControls
-							to: 1
-						}
-
-						Anim {
-							duration: Appearance.anim.durations.small
-							easing: Appearance.anim.curves.standardDecel
-							property: "opacity"
-							target: listOrControls
-							to: 1
-						}
-					}
-				}
-			}
-		}
-	}
-
-	Component {
-		id: recordingList
-
-		RecordingList {
-			props: root.props
-			visibilities: root.visibilities
-		}
-	}
-
-	Component {
-		id: recordingControls
-
-		RowLayout {
-			spacing: Appearance.spacing.normal
-
-			CustomRect {
-				color: Recorder.paused ? DynamicColors.palette.m3tertiary : DynamicColors.palette.m3error
-				implicitHeight: recText.implicitHeight + Appearance.padding.smaller * 2
-				implicitWidth: recText.implicitWidth + Appearance.padding.normal * 2
-				radius: Appearance.rounding.full
-
-				Behavior on implicitWidth {
-					Anim {
-					}
-				}
-				SequentialAnimation on opacity {
-					alwaysRunToEnd: true
-					loops: Animation.Infinite
-					running: !Recorder.paused
-
-					Anim {
-						duration: Appearance.anim.durations.large
-						easing: Appearance.anim.curves.emphasizedAccel
-						from: 1
-						to: 0
-					}
-
-					Anim {
-						duration: Appearance.anim.durations.extraLarge
-						easing: Appearance.anim.curves.emphasizedDecel
-						from: 0
-						to: 1
-					}
-				}
-
-				CustomText {
-					id: recText
-
-					anchors.centerIn: parent
-					animate: true
-					color: Recorder.paused ? DynamicColors.palette.m3onTertiary : DynamicColors.palette.m3onError
-					font.family: Appearance.font.family.mono
-					text: Recorder.paused ? "PAUSED" : "REC"
-				}
-			}
-
-			CustomText {
-				font.pointSize: Appearance.font.size.normal
-				text: {
-					const elapsed = Recorder.elapsed;
-
-					const hours = Math.floor(elapsed / 3600);
-					const mins = Math.floor((elapsed % 3600) / 60);
-					const secs = Math.floor(elapsed % 60).toString().padStart(2, "0");
-
-					let time;
-					if (hours > 0)
-						time = `${hours}:${mins.toString().padStart(2, "0")}:${secs}`;
-					else
-						time = `${mins}:${secs}`;
-
-					return qsTr("Recording for %1").arg(time);
-				}
-			}
-
-			Item {
-				Layout.fillWidth: true
-			}
-
-			IconButton {
-				checked: Recorder.paused
-				font.pointSize: Appearance.font.size.large
-				icon: Recorder.paused ? "play_arrow" : "pause"
-				label.animate: true
-				toggle: true
-				type: IconButton.Tonal
-
-				onClicked: {
-					Recorder.togglePause();
-					internalChecked = Recorder.paused;
-				}
-			}
-
-			IconButton {
-				font.pointSize: Appearance.font.size.large
-				icon: "stop"
-				inactiveColour: DynamicColors.palette.m3error
-				inactiveOnColour: DynamicColors.palette.m3onError
-
-				onClicked: Recorder.stop()
-			}
-		}
-	}
-}

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

@@ -1,226 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
-import ZShell.Models
-import qs.Components
-import qs.Helpers
-import qs.Paths
-import qs.Config
-
-ColumnLayout {
-	id: root
-
-	required property var props
-	required property PersistentProperties visibilities
-
-	spacing: 0
-
-	WrapperMouseArea {
-		Layout.fillWidth: true
-		cursorShape: Qt.PointingHandCursor
-
-		onClicked: root.props.recordingListExpanded = !root.props.recordingListExpanded
-
-		RowLayout {
-			spacing: Appearance.spacing.smaller
-
-			MaterialIcon {
-				Layout.alignment: Qt.AlignVCenter
-				font.pointSize: Appearance.font.size.large
-				text: "list"
-			}
-
-			CustomText {
-				Layout.alignment: Qt.AlignVCenter
-				Layout.fillWidth: true
-				font.pointSize: Appearance.font.size.normal
-				text: qsTr("Recordings")
-			}
-
-			IconButton {
-				icon: root.props.recordingListExpanded ? "unfold_less" : "unfold_more"
-				label.animate: true
-				type: IconButton.Text
-
-				onClicked: root.props.recordingListExpanded = !root.props.recordingListExpanded
-			}
-		}
-	}
-
-	CustomListView {
-		id: list
-
-		Layout.fillWidth: true
-		Layout.rightMargin: -Appearance.spacing.small
-		clip: true
-		implicitHeight: (Appearance.font.size.larger + Appearance.padding.small) * (root.props.recordingListExpanded ? 10 : 3)
-
-		CustomScrollBar.vertical: CustomScrollBar {
-			flickable: list
-		}
-		add: Transition {
-			Anim {
-				from: 0
-				property: "opacity"
-				to: 1
-			}
-
-			Anim {
-				from: 0.5
-				property: "scale"
-				to: 1
-			}
-		}
-		delegate: RowLayout {
-			id: recording
-
-			property string baseName
-			required property FileSystemEntry modelData
-
-			anchors.left: list.contentItem.left
-			anchors.right: list.contentItem.right
-			anchors.rightMargin: Appearance.spacing.small
-			spacing: Appearance.spacing.small / 2
-
-			Component.onCompleted: baseName = modelData.baseName
-
-			CustomText {
-				Layout.fillWidth: true
-				Layout.rightMargin: Appearance.spacing.small / 2
-				color: DynamicColors.palette.m3onSurfaceVariant
-				elide: Text.ElideRight
-				text: {
-					const time = recording.baseName;
-					const matches = time.match(/^recording_(\d{4})(\d{2})(\d{2})_(\d{2})-(\d{2})-(\d{2})/);
-					if (!matches)
-						return time;
-					const date = new Date(...matches.slice(1));
-					date.setMonth(date.getMonth() - 1);
-					return qsTr("Recording at %1").arg(Qt.formatDateTime(date, Qt.locale()));
-				}
-			}
-
-			IconButton {
-				icon: "play_arrow"
-				type: IconButton.Text
-
-				onClicked: {
-					root.visibilities.sidebar = false;
-					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.playback, recording.modelData.path]);
-				}
-			}
-
-			IconButton {
-				icon: "folder"
-				type: IconButton.Text
-
-				onClicked: {
-					root.visibilities.sidebar = false;
-					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.explorer, recording.modelData.path]);
-				}
-			}
-		}
-		displaced: Transition {
-			Anim {
-				properties: "opacity,scale"
-				to: 1
-			}
-
-			Anim {
-				property: "y"
-			}
-		}
-		Behavior on implicitHeight {
-			Anim {
-			}
-		}
-		model: FileSystemModel {
-			nameFilters: ["recording_*.mp4"]
-			path: Paths.recsdir
-			sortReverse: true
-		}
-		remove: Transition {
-			Anim {
-				property: "opacity"
-				to: 0
-			}
-
-			Anim {
-				property: "scale"
-				to: 0.5
-			}
-		}
-
-		Loader {
-			active: opacity > 0
-			anchors.centerIn: parent
-			asynchronous: true
-			opacity: list.count === 0 ? 1 : 0
-
-			Behavior on opacity {
-				Anim {
-				}
-			}
-			sourceComponent: ColumnLayout {
-				spacing: Appearance.spacing.small
-
-				MaterialIcon {
-					Layout.alignment: Qt.AlignHCenter
-					Layout.preferredHeight: root.props.recordingListExpanded ? implicitHeight : 0
-					color: DynamicColors.palette.m3outline
-					font.pointSize: Appearance.font.size.extraLarge
-					opacity: root.props.recordingListExpanded ? 1 : 0
-					scale: root.props.recordingListExpanded ? 1 : 0
-					text: "scan_delete"
-
-					Behavior on Layout.preferredHeight {
-						Anim {
-						}
-					}
-					Behavior on opacity {
-						Anim {
-						}
-					}
-					Behavior on scale {
-						Anim {
-						}
-					}
-				}
-
-				RowLayout {
-					spacing: Appearance.spacing.smaller
-
-					MaterialIcon {
-						Layout.alignment: Qt.AlignHCenter
-						Layout.preferredWidth: !root.props.recordingListExpanded ? implicitWidth : 0
-						color: DynamicColors.palette.m3outline
-						opacity: !root.props.recordingListExpanded ? 1 : 0
-						scale: !root.props.recordingListExpanded ? 1 : 0
-						text: "scan_delete"
-
-						Behavior on Layout.preferredWidth {
-							Anim {
-							}
-						}
-						Behavior on opacity {
-							Anim {
-							}
-						}
-						Behavior on scale {
-							Anim {
-							}
-						}
-					}
-
-					CustomText {
-						color: DynamicColors.palette.m3outline
-						text: qsTr("No recordings found")
-					}
-				}
-			}
-		}
-	}
-}

Modules/Notifications/Sidebar/Utils/Content.qml

@@ -1,14 +1,13 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
 import qs.Modules.Notifications.Sidebar.Utils.Cards
 import qs.Config
+import QtQuick
+import QtQuick.Layouts
 
 Item {
 	id: root
 
 	required property Item popouts
-	required property PersistentProperties props
+	required property var props
 	required property var visibilities
 
 	implicitHeight: layout.implicitHeight
@@ -23,12 +22,6 @@ Item {
 		IdleInhibit {
 		}
 
-		Record {
-			props: root.props
-			visibilities: root.visibilities
-			z: 1
-		}
-
 		Toggles {
 			popouts: root.popouts
 			visibilities: root.visibilities

Modules/Osd/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.width < rounding * 2
+	readonly property real rounding: 10
+	readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: -root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: -(root.wrapper.width - root.roundingX * 3)
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding * 2, root.wrapper.width)
+		radiusY: root.rounding * 2
+		relativeX: -root.roundingX * 2
+		relativeY: root.rounding * 2
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.rounding * 4
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding * 2, root.wrapper.width)
+		radiusY: root.rounding * 2
+		relativeX: root.roundingX * 2
+		relativeY: root.rounding * 2
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.roundingX * 3
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: root.roundingX
+		relativeY: root.rounding
+	}
+}

Modules/Osd/Content.qml

@@ -100,14 +100,12 @@ Item {
 					icon: `brightness_${(Math.round(value * 6) + 1)}`
 					value: root.brightness
 
-					onPressedChanged: {
+					onMoved: {
-						if (!pressed) {
+						if (Config.osd.allMonBrightness) {
-							if (Config.osd.allMonBrightness) {
+							root.monitor?.setBrightness(value);
-								for (const mon of Brightness.monitors) {
+						} else {
-									mon.setBrightness(value);
+							for (const mon of Brightness.monitors) {
-								}
+								mon.setBrightness(value);
-							} else {
-								root.monitor?.setBrightness(value);
 							}
 						}
 					}

Modules/PopoutState.qml

@@ -1,8 +1,36 @@
 import QtQuick
 
 QtObject {
+	id: root
+
 	property string currentName
 	property bool hasCurrent
+	property var submenus: []
 
 	signal detachRequested(mode: string)
+
+	function clearSubmenus(): void {
+		submenus = [];
+	}
+
+	function closeSubmenus(level: int): void {
+		submenus = submenus.slice(0, level);
+	}
+
+	function pushSubmenu(level: int, handle: var, sourceItem: var, sourceWidth: int): void {
+		let newSubmenus = submenus.slice(0, level);
+		newSubmenus.push({
+			"handle": handle,
+			"sourceItem": sourceItem,
+			"sourceWidth": sourceWidth
+		});
+		submenus = newSubmenus;
+	}
+
+	onCurrentNameChanged: {
+		root.clearSubmenus();
+	}
+	onHasCurrentChanged: {
+		root.clearSubmenus();
+	}
 }

Modules/Resources/Background.qml

@@ -0,0 +1,65 @@
+import qs.Components
+import qs.Config
+import QtQuick
+import QtQuick.Shapes
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: Appearance.rounding.normal
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height - root.roundingY * 2)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+}

Modules/Resources/Wrapper.qml

@@ -8,7 +8,7 @@ import qs.Config
 Item {
 	id: root
 
-	readonly property real nonAnimHeight: content.item?.nonAnimHeight ?? 0
+	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
 	property real offsetScale: shouldBeActive ? 0 : 1
 	readonly property bool shouldBeActive: root.visibilities.resources
 	required property PersistentProperties visibilities
@@ -31,7 +31,8 @@ Item {
 		id: content
 
 		active: root.shouldBeActive || root.visible
-		anchors.centerIn: parent
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
 		sourceComponent: Content {
 			padding: Appearance.padding.normal

Modules/Settings/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real rounding: Appearance.rounding.large
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.roundingY, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: root.roundingY
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: -(root.wrapper.height - root.roundingY * 2)
+	}
+
+	PathArc {
+		radiusX: root.rounding
+		radiusY: Math.min(root.rounding, root.wrapper.height)
+		relativeX: root.rounding
+		relativeY: -root.roundingY
+	}
+}

Modules/Settings/Categories/Appearance.qml

@@ -1,4 +1,3 @@
-import QtQuick
 import qs.Modules.Settings.Controls
 import qs.Config
 
@@ -81,7 +80,6 @@ SettingsPage {
 			name: "Sans family"
 			object: Config.appearance.font.family
 			setting: "sans"
-			stringList: Qt.fontFamilies()
 		}
 
 		Separator {
@@ -91,7 +89,6 @@ SettingsPage {
 			name: "Monospace family"
 			object: Config.appearance.font.family
 			setting: "mono"
-			stringList: Qt.fontFamilies()
 		}
 	}
 

Modules/Settings/Categories/Background.qml

@@ -1,4 +1,3 @@
-import Quickshell
 import QtQuick.Layouts
 import qs.Modules.Settings.Controls
 import qs.Config
@@ -6,8 +5,6 @@ import qs.Config
 SettingsPage {
 	id: root
 
-	required property ShellScreen screen
-
 	SettingsSection {
 		sectionId: "Wallpaper"
 
@@ -36,6 +33,8 @@ SettingsPage {
 		}
 
 		WallpaperCropper {
+			Layout.fillWidth: true
+			Layout.preferredHeight: 600
 		}
 	}
 
@@ -43,6 +42,7 @@ SettingsPage {
 		sectionId: "Wallpapers"
 
 		WallpaperGrid {
+			Layout.fillWidth: true
 		}
 	}
 }

Modules/Settings/Categories/Bar.qml

@@ -56,21 +56,6 @@ SettingsPage {
 		}
 	}
 
-	SettingsSection {
-		sectionId: "Tray"
-
-		SettingsHeader {
-			name: "System tray"
-		}
-
-		SettingSpinBox {
-			min: 16
-			name: "Tray icon size"
-			object: Config.barConfig.tray
-			setting: "trayIconSize"
-		}
-	}
-
 	SettingsSection {
 		sectionId: "Popouts"
 

Modules/Settings/Categories/Dashboard.qml

@@ -19,8 +19,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 0
 			name: "Media update interval"
+			min: 0
 			object: Config.dashboard
 			setting: "mediaUpdateInterval"
 			step: 50
@@ -30,8 +30,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 0
 			name: "Resource update interval"
+			min: 0
 			object: Config.dashboard
 			setting: "resourceUpdateInterval"
 			step: 50
@@ -41,8 +41,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 0
 			name: "Drag threshold"
+			min: 0
 			object: Config.dashboard
 			setting: "dragThreshold"
 		}
@@ -107,112 +107,112 @@ SettingsPage {
 		}
 	}
 
-	// SettingsSection {
+	SettingsSection {
-	// 	sectionId: "Layout Sizes"
+		sectionId: "Layout Sizes"
-	//
+
-	// 	SettingsHeader {
+		SettingsHeader {
-	// 		name: "Layout Sizes"
+			name: "Layout Sizes"
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Tab indicator height"
+			name: "Tab indicator height"
-	// 		value: String(Config.dashboard.sizes.tabIndicatorHeight)
+			value: String(Config.dashboard.sizes.tabIndicatorHeight)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Tab indicator spacing"
+			name: "Tab indicator spacing"
-	// 		value: String(Config.dashboard.sizes.tabIndicatorSpacing)
+			value: String(Config.dashboard.sizes.tabIndicatorSpacing)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Info width"
+			name: "Info width"
-	// 		value: String(Config.dashboard.sizes.infoWidth)
+			value: String(Config.dashboard.sizes.infoWidth)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Info icon size"
+			name: "Info icon size"
-	// 		value: String(Config.dashboard.sizes.infoIconSize)
+			value: String(Config.dashboard.sizes.infoIconSize)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Date time width"
+			name: "Date time width"
-	// 		value: String(Config.dashboard.sizes.dateTimeWidth)
+			value: String(Config.dashboard.sizes.dateTimeWidth)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Media width"
+			name: "Media width"
-	// 		value: String(Config.dashboard.sizes.mediaWidth)
+			value: String(Config.dashboard.sizes.mediaWidth)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Media progress sweep"
+			name: "Media progress sweep"
-	// 		value: String(Config.dashboard.sizes.mediaProgressSweep)
+			value: String(Config.dashboard.sizes.mediaProgressSweep)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Media progress thickness"
+			name: "Media progress thickness"
-	// 		value: String(Config.dashboard.sizes.mediaProgressThickness)
+			value: String(Config.dashboard.sizes.mediaProgressThickness)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Resource progress thickness"
+			name: "Resource progress thickness"
-	// 		value: String(Config.dashboard.sizes.resourceProgessThickness)
+			value: String(Config.dashboard.sizes.resourceProgessThickness)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Weather width"
+			name: "Weather width"
-	// 		value: String(Config.dashboard.sizes.weatherWidth)
+			value: String(Config.dashboard.sizes.weatherWidth)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Media cover art size"
+			name: "Media cover art size"
-	// 		value: String(Config.dashboard.sizes.mediaCoverArtSize)
+			value: String(Config.dashboard.sizes.mediaCoverArtSize)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Media visualiser size"
+			name: "Media visualiser size"
-	// 		value: String(Config.dashboard.sizes.mediaVisualiserSize)
+			value: String(Config.dashboard.sizes.mediaVisualiserSize)
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingReadOnly {
+		SettingReadOnly {
-	// 		name: "Resource size"
+			name: "Resource size"
-	// 		value: String(Config.dashboard.sizes.resourceSize)
+			value: String(Config.dashboard.sizes.resourceSize)
-	// 	}
+		}
-	// }
+	}
 }

Modules/Settings/Categories/General.qml

@@ -1,6 +1,4 @@
 import Quickshell
-import QtQuick
-import QtQuick.Layouts
 import qs.Modules.Settings.Controls
 import qs.Config
 import qs.Components
@@ -69,7 +67,6 @@ SettingsPage {
 
 		CustomSplitButtonRow {
 			active: Config.general.color.mode === "light" ? menuItems[0] : menuItems[1]
-			enabled: Config.general.color.schemeGeneration
 			label: qsTr("Scheme mode")
 
 			menuItems: [
@@ -103,7 +100,6 @@ SettingsPage {
 			id: schemeType
 
 			active: root.schemeTypeItem(menuItems, Config.colors.schemeType)
-			enabled: Config.general.color.schemeGeneration
 			label: qsTr("Scheme type")
 			z: 2
 
@@ -173,69 +169,21 @@ SettingsPage {
 		}
 
 		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
 		}
 
 		SettingSpinner {
 			name: "Schedule dark mode"
 			object: Config.general.color
 			settings: ["scheduleDarkStart", "scheduleDarkEnd", "scheduleDark"]
-			shouldBeActive: Config.general.color.schemeGeneration ? 1 : 0
 		}
 
 		Separator {

Modules/Settings/Categories/Lockscreen.qml

@@ -1,6 +1,5 @@
 import qs.Modules.Settings.Categories.Lockscreen
 import qs.Modules.Settings.Controls
-import qs.Helpers
 import qs.Config
 
 SettingsPage {
@@ -51,15 +50,6 @@ SettingsPage {
 		Separator {
 		}
 
-		SettingSwitch {
-			name: "Show notification icon"
-			object: Config.lock
-			setting: "showNotifIcon"
-		}
-
-		Separator {
-		}
-
 		SettingSpinBox {
 			min: 0
 			name: "Blur amount"
@@ -104,18 +94,6 @@ SettingsPage {
 		}
 	}
 
-	SettingsSection {
-		sectionId: "Greeter"
-
-		SettingsHeader {
-			name: "Greeter"
-		}
-
-		SettingsIconButton {
-			name: "Install wallpaper and color scheme to greeter"
-		}
-	}
-
 	SettingsSection {
 		sectionId: "Idle"
 

Modules/Settings/Categories/Lockscreen/Idle.qml

@@ -9,8 +9,6 @@ import qs.Modules.Settings.Controls
 ColumnLayout {
 	id: root
 
-	property bool shouldBeActive: true
-
 	function addTimeoutEntry() {
 		let list = [...Config.general.idle.timeouts];
 
@@ -42,26 +40,8 @@ ColumnLayout {
 		Config.save();
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	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"
@@ -72,8 +52,6 @@ ColumnLayout {
 
 		SettingList {
 			Layout.fillWidth: true
-			anchors.left: undefined
-			anchors.right: undefined
 
 			onAddActiveActionRequested: {
 				root.updateTimeoutEntry(index, "activeAction", "");

Modules/Settings/Categories/Screenshot.qml

@@ -20,8 +20,7 @@ SettingsPage {
 		}
 
 		CustomSplitButtonRow {
-			active: Config.screenshot.mode === "manual" ? menuItems[0] : menuItems[1]
+			// active: true
-			enabled: Config.screenshot.enable_pp
 			label: qsTr("Effects mode")
 
 			menuItems: [
@@ -44,107 +43,88 @@ SettingsPage {
 		}
 
 		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual"
+			visible: 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"
+			setting: "corner_radius"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.rounding
 			step: 1
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual"
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		SettingSwitch {
-			enabled: Config.screenshot.enable_pp
+			name: "Enable drop shadow"
-			name: "Enable shadow"
 			object: Config.screenshot
-			setting: "shadow"
+			setting: "drop_shadow"
-			shouldBeActive: Config.screenshot.mode === "manual"
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
+			visible: Config.screenshot.mode === "manual"
+		}
+
+		SettingSwitch {
+			name: "Enable rounded corners"
+			object: Config.screenshot
+			setting: "rounded_corners"
+			visible: Config.screenshot.mode === "manual"
+		}
+
+		Separator {
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		SettingSpinBox {
-			enabled: Config.screenshot.enable_pp
 			min: 0
-			name: "Shadow blur amount"
+			name: "Shadow blur radius"
 			object: Config.screenshot
-			setting: "shadow_blur"
+			setting: "shadow_blur_radius"
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
 			step: 1
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
+			visible: Config.screenshot.mode === "manual"
 		}
 
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Shadow color broken atm"
+			name: "Shadow color broken atm"
-		// 	object: Config.Screenshot
+			object: Config.Screenshot
-		// 	setting: "shadow_color"
+			setting: "shadow_color"
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
+			visible: Config.screenshot.mode === "manual"
-		// }
+		}
-		//
-		// Separator {
-		// 	shouldBeActive: Config.screenshot.mode === "manual"
-		// }
 
-		// SettingSpinBox {
+		Separator {
-		// 	min: 1
+			visible: Config.screenshot.mode === "manual"
-		// 	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
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		Separator {
-			shouldBeActive: Config.screenshot.mode === "manual" && Config.screenshot.shadow
+			visible: Config.screenshot.mode === "manual"
 		}
 
 		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
+			visible: Config.screenshot.mode === "manual"
 		}
 	}
 }

Modules/Settings/Categories/Utilities.qml

@@ -19,8 +19,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 1
 			name: "Max toasts"
+			min: 1
 			object: Config.utilities
 			setting: "maxToasts"
 		}
@@ -29,8 +29,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 1
 			name: "Panel width"
+			min: 1
 			object: Config.utilities.sizes
 			setting: "width"
 		}
@@ -39,8 +39,8 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			min: 1
 			name: "Toast width"
+			min: 1
 			object: Config.utilities.sizes
 			setting: "toastWidth"
 		}
@@ -77,100 +77,100 @@ SettingsPage {
 			setting: "gameModeChanged"
 		}
 
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Do not disturb changed"
+			name: "Do not disturb changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "dndChanged"
+			setting: "dndChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Audio output changed"
+			name: "Audio output changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "audioOutputChanged"
+			setting: "audioOutputChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Audio input changed"
+			name: "Audio input changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "audioInputChanged"
+			setting: "audioInputChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Caps lock changed"
+			name: "Caps lock changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "capsLockChanged"
+			setting: "capsLockChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Num lock changed"
+			name: "Num lock changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "numLockChanged"
+			setting: "numLockChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Keyboard layout changed"
+			name: "Keyboard layout changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "kbLayoutChanged"
+			setting: "kbLayoutChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "VPN changed"
+			name: "VPN changed"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "vpnChanged"
+			setting: "vpnChanged"
-		// }
+		}
-		//
+
-		// Separator {
+		Separator {
-		// }
+		}
-		//
+
-		// SettingSwitch {
+		SettingSwitch {
-		// 	name: "Now playing"
+			name: "Now playing"
-		// 	object: Config.utilities.toasts
+			object: Config.utilities.toasts
-		// 	setting: "nowPlaying"
+			setting: "nowPlaying"
-		// }
+		}
 	}
 
-	// SettingsSection {
+	SettingsSection {
-	// 	sectionId: "VPN"
+		sectionId: "VPN"
-	//
+
-	// 	SettingsHeader {
+		SettingsHeader {
-	// 		name: "VPN"
+			name: "VPN"
-	// 	}
+		}
-	//
+
-	// 	SettingSwitch {
+		SettingSwitch {
-	// 		name: "Enable VPN integration"
+			name: "Enable VPN integration"
-	// 		object: Config.utilities.vpn
+			object: Config.utilities.vpn
-	// 		setting: "enabled"
+			setting: "enabled"
-	// 	}
+		}
-	//
+
-	// 	Separator {
+		Separator {
-	// 	}
+		}
-	//
+
-	// 	SettingStringList {
+		SettingStringList {
-	// 		name: "Provider"
+			name: "Provider"
-	// 		addLabel: qsTr("Add VPN provider")
+			addLabel: qsTr("Add VPN provider")
-	// 		object: Config.utilities.vpn
+			object: Config.utilities.vpn
-	// 		setting: "provider"
+			setting: "provider"
-	// 	}
+		}
-	// }
+	}
 }

Modules/Settings/Content.qml

@@ -1,5 +1,3 @@
-pragma ComponentBehavior: Bound
-
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
@@ -22,6 +20,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	function scrollToSetting(section: string, settingName: string) {
+		// Wait for the StackView transition to complete, then scroll
 		root.pendingSection = section;
 		root.pendingSetting = settingName;
 		scrollTimer.restart();
@@ -158,7 +157,6 @@ Item {
 		id: background
 
 		Cat.Background {
-			screen: root.screen
 		}
 	}
 

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

@@ -6,26 +6,7 @@ import qs.Config
 CustomRect {
 	id: root
 
-	property bool shouldBeActive: true
+	Layout.fillWidth: true
-
+	Layout.preferredHeight: 1
-	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

@@ -13,7 +13,6 @@ ColumnLayout {
 	required property string name
 	required property var object
 	required property string setting
-	property bool shouldBeActive: true
 
 	function addAction() {
 		const list = [...root.object[root.setting]];
@@ -45,26 +44,8 @@ ColumnLayout {
 		Config.save();
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	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
@@ -127,9 +108,6 @@ ColumnLayout {
 				}
 
 				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -210,8 +188,6 @@ ColumnLayout {
 				StringListEditor {
 					Layout.fillWidth: true
 					addLabel: qsTr("Add command argument")
-					anchors.left: undefined
-					anchors.right: undefined
 					values: [...(modelData.command ?? [])]
 
 					onListEdited: function (values) {
@@ -220,9 +196,6 @@ ColumnLayout {
 				}
 
 				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -241,9 +214,6 @@ ColumnLayout {
 				}
 
 				Separator {
-					Layout.fillWidth: true
-					anchors.left: undefined
-					anchors.right: undefined
 				}
 
 				RowLayout {

Modules/Settings/Controls/SettingAliasList.qml

@@ -6,14 +6,13 @@ import qs.Components
 import qs.Config
 import qs.Helpers
 
-CustomRect {
+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 addAlias() {
 		const list = [...root.object[root.setting]];
@@ -41,25 +40,8 @@ CustomRect {
 		Config.save();
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	spacing: Appearance.spacing.smaller
-	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
@@ -76,128 +58,115 @@ CustomRect {
 		}
 	}
 
-	ColumnLayout {
+	CustomText {
-		id: layout
+		Layout.fillWidth: true
+		font.pointSize: Appearance.font.size.larger
+		text: root.name
+	}
 
-		anchors.left: parent.left
+	Repeater {
-		anchors.right: parent.right
+		model: [...root.object[root.setting]]
-		anchors.verticalCenter: parent.verticalCenter
+
-		spacing: Appearance.spacing.smaller
+		Item {
+			required property int index
+			required property var modelData
 
-		CustomText {
 			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
+			Layout.preferredHeight: layout.implicitHeight + Appearance.padding.smaller * 2
-			text: root.name
-		}
 
-		Repeater {
+			CustomRect {
-			model: [...root.object[root.setting]]
+				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
+			}
 
-			Item {
+			ColumnLayout {
-				required property int index
+				id: layout
-				required property var modelData
 
-				Layout.fillWidth: true
+				anchors.left: parent.left
-				Layout.preferredHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+				anchors.margins: Appearance.padding.small
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				spacing: Appearance.spacing.small
 
-				CustomRect {
+				RowLayout {
-					anchors.left: parent.left
+					Layout.fillWidth: true
-					anchors.right: parent.right
-					anchors.top: parent.top
-					anchors.topMargin: -(Appearance.spacing.smaller / 2)
-					color: DynamicColors.tPalette.m3outlineVariant
-					implicitHeight: 1
-					visible: index !== 0
-				}
 
-				ColumnLayout {
+					CustomText {
-					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
+						text: qsTr("From")
+					}
 
-						CustomText {
+					CustomRect {
-							Layout.fillWidth: true
+						Layout.fillWidth: true
-							text: qsTr("From")
+						Layout.preferredHeight: 33
-						}
+						color: DynamicColors.tPalette.m3surfaceContainerHigh
+						radius: Appearance.rounding.full
 
-						CustomRect {
+						CustomTextField {
-							Layout.preferredHeight: 33
+							anchors.fill: parent
-							Layout.preferredWidth: Math.max(Math.min(fromTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
+							anchors.leftMargin: Appearance.padding.normal
-							color: DynamicColors.tPalette.m3surfaceContainerHigh
+							anchors.rightMargin: Appearance.padding.normal
-							radius: Appearance.rounding.full
+							text: modelData.from ?? ""
 
-							CustomTextField {
+							onEditingFinished: root.updateAlias(index, "from", text)
-								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 {
+					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")
+					}
 
-						CustomText {
+					CustomRect {
-							Layout.fillWidth: true
+						Layout.fillWidth: true
-							text: qsTr("To")
+						Layout.preferredHeight: 33
-						}
+						color: DynamicColors.tPalette.m3surface
+						radius: Appearance.rounding.small
 
-						CustomRect {
+						CustomTextField {
-							Layout.preferredHeight: 33
+							anchors.fill: parent
-							Layout.preferredWidth: Math.max(Math.min(toTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
+							anchors.leftMargin: Appearance.padding.normal
-							color: DynamicColors.tPalette.m3surfaceContainerHigh
+							anchors.rightMargin: Appearance.padding.normal
-							radius: Appearance.rounding.full
+							text: modelData.to ?? ""
 
-							CustomTextField {
+							onEditingFinished: root.updateAlias(index, "to", text)
-								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
+	RowLayout {
-
+		Layout.fillWidth: true
-			IconButton {
+
-				font.pointSize: Appearance.font.size.large
+		IconButton {
-				icon: "add"
+			font.pointSize: Appearance.font.size.large
-
+			icon: "add"
-				onClicked: root.addAlias()
+
-			}
+			onClicked: root.addAlias()
-
+		}
-			CustomText {
+
-				Layout.fillWidth: true
+		CustomText {
-				text: qsTr("Add alias")
+			Layout.fillWidth: true
-			}
+			text: qsTr("Add alias")
-		}
+		}
 	}
 }

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -25,7 +25,6 @@ Item {
 	required property var object
 	property var pendingCommitEntries: []
 	required property string setting
-	property bool shouldBeActive: true
 	property int uidCounter: 0
 	property var visualEntries: []
 
@@ -147,25 +146,8 @@ Item {
 		Config.save();
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	implicitHeight: layout.implicitHeight
-	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()
 

Modules/Settings/Controls/SettingHyprSpinner.qml

@@ -11,7 +11,6 @@ Item {
 	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;
@@ -33,25 +32,8 @@ Item {
 		return Qt.formatTime(d, "h AP");
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingInput.qml

@@ -11,7 +11,6 @@ Item {
 	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];
@@ -22,25 +21,8 @@ Item {
 		return String(value);
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingList.qml

@@ -8,31 +8,13 @@ Item {
 
 	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
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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
@@ -194,9 +176,6 @@ Item {
 			}
 
 			Separator {
-				Layout.fillWidth: true
-				anchors.left: undefined
-				anchors.right: undefined
 			}
 
 			RowLayout {
@@ -228,9 +207,6 @@ Item {
 			}
 
 			Separator {
-				Layout.fillWidth: true
-				anchors.left: undefined
-				anchors.right: undefined
 			}
 
 			Item {

Modules/Settings/Controls/SettingListView.qml

@@ -11,32 +11,10 @@ Item {
 
 	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
+	Layout.fillWidth: true
-
+	Layout.preferredHeight: row.height
-	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
@@ -142,18 +120,17 @@ Item {
 						StateLayer {
 							onClicked: {
 								root.object[root.setting] = fontDelegate.modelData;
-								root.optionSet();
 								Config.save();
 							}
 						}
 					}
 					model: ScriptModel {
 						values: {
-							const values = root.stringList;
+							const fonts = Qt.fontFamilies();
 							const search = fontSearch.text;
 							var regex = new RegExp(search, "i");
 
-							return values.filter(n => regex.test(n));
+							return fonts.filter(n => regex.test(n));
 						}
 					}
 				}

Modules/Settings/Controls/SettingReadOnly.qml

@@ -9,28 +9,10 @@ Item {
 
 	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
 	required property string name
-	property bool shouldBeActive: true
 	required property string value
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingSpinBox.qml

@@ -13,28 +13,10 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
-	property bool shouldBeActive: true
 	property real step: 1
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingSpinner.qml

@@ -11,7 +11,6 @@ Item {
 	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;
@@ -33,25 +32,8 @@ Item {
 		return Qt.formatTime(d, "h AP");
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingStringList.qml

@@ -12,27 +12,9 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
-	property bool shouldBeActive: true
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: layout.implicitHeight
-	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
@@ -64,9 +46,6 @@ Item {
 		StringListEditor {
 			Layout.fillWidth: true
 			addLabel: root.addLabel
-			anchors.left: undefined
-			anchors.right: undefined
-			anchors.verticalCenter: undefined
 			values: [...(root.object[root.setting] ?? [])]
 
 			onListEdited: function (values) {

Modules/Settings/Controls/SettingSwitch.qml

@@ -11,27 +11,9 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
-	property bool shouldBeActive: true
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	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

Modules/Settings/Controls/SettingsHeader.qml

@@ -7,13 +7,9 @@ CustomRect {
 	id: root
 
 	required property string name
-	property bool shouldBeActive: true
 
-	implicitHeight: 60
+	Layout.preferredHeight: 60
-	implicitWidth: 200
+	Layout.preferredWidth: 200
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	visible: opacity > 0
 
 	CustomText {
 		anchors.fill: parent

Modules/Settings/Controls/SettingsIconButton.qml

@@ -1,83 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Paths
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	property alias button: iButton
-	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
-	required property string name
-	property bool shouldBeActive: true
-
-	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 | Qt.AlignVCenter
-			Layout.fillWidth: true
-			font.pointSize: Appearance.font.size.larger
-			text: root.name
-		}
-
-		IconButton {
-			id: iButton
-
-			Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-			icon: "download"
-
-			onClicked: {
-				const lockBg = `${Paths.state}/lockscreen_bg.png`;
-				const scheme = `${Paths.state}/scheme.json`;
-				const face = `${Paths.home}/.face`;
-				const destination = "/etc/zshell-greeter/images";
-				Quickshell.execDetached(["pkexec", "sh", "-c", `mkdir -p ${destination}; cp ${lockBg} ${destination}; cp ${scheme} /etc/zshell-greeter; cp ${face} ${destination}`]);
-			}
-		}
-	}
-}

Modules/Settings/Controls/SettingsPage.qml

@@ -60,18 +60,12 @@ CustomClippingRect {
 			}
 		}
 
-		Column {
+		ColumnLayout {
 			id: clayout
 
 			anchors.left: parent.left
 			anchors.right: parent.right
 			spacing: Appearance.spacing.small
-
-			// move: Transition {
-			// 	Anim {
-			// 		properties: "y"
-			// 	}
-			// }
 		}
 	}
 }

Modules/Settings/Controls/SettingsSection.qml

@@ -10,39 +10,18 @@ CustomRect {
 	property real contentPadding: Appearance.padding.large
 	property string sectionId: ""
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: layout.implicitHeight + contentPadding * 2
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: layout.height + contentPadding * 2
 	radius: Appearance.rounding.normal - Appearance.padding.smaller
 
-	Behavior on implicitHeight {
+	ColumnLayout {
-		Anim {
-		}
-	}
-	Behavior on y {
-		Anim {
-		}
-	}
-
-	Column {
 		id: layout
 
 		anchors.left: parent.left
 		anchors.margins: root.contentPadding
 		anchors.right: parent.right
-		anchors.top: parent.top
+		anchors.verticalCenter: parent.verticalCenter
-		// anchors.verticalCenter: parent.verticalCenter
 		spacing: Appearance.spacing.normal
-
-		Behavior on height {
-			Anim {
-			}
-		}
-		move: Transition {
-			Anim {
-				properties: "y"
-			}
-		}
 	}
 }

Modules/Settings/Controls/SpinnerButton.qml

@@ -12,29 +12,12 @@ CustomRect {
 	property alias expanded: menu.expanded
 	property alias label: label
 	property alias menu: menu
-	property bool shouldBeActive: true
 	property alias text: label.text
 
 	color: enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-	opacity: shouldBeActive ? 1 : 0
 	radius: Appearance.rounding.full
-	scale: shouldBeActive ? 1 : 0.8
-	visible: opacity > 0
 	z: expanded ? 100 : 0
 
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-	Behavior on y {
-		Anim {
-		}
-	}
-
 	CustomText {
 		id: label
 

Modules/Settings/Controls/StringListEditor.qml

@@ -9,7 +9,6 @@ ColumnLayout {
 	id: root
 
 	property string addLabel: qsTr("Add entry")
-	property bool shouldBeActive: true
 	property var values: []
 
 	signal listEdited(var values)
@@ -32,26 +31,8 @@ ColumnLayout {
 		root.listEdited(list);
 	}
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	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 {
-		}
-	}
 
 	Repeater {
 		model: [...root.values]

Modules/Settings/Controls/WallpaperCropper.qml

@@ -1,315 +1,113 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import Quickshell
-import Quickshell.Hyprland
-import ZShell.Internal
 import qs.Config
 import qs.Components
 import qs.Helpers
 
 Item {
-	id: wrapper
+	id: root
 
-	property bool changesMade: false
+	Image {
-	property bool shouldBeActive: true
+		id: imageView
 
-	signal requestCrop
+		property real displayH: paintedHeight
-
+		property real displayW: paintedWidth
-	anchors.left: parent.left
+		property real displayX: (width - paintedWidth) * 0.5
-	anchors.right: parent.right
+		property real displayY: (height - paintedHeight) * 0.5
-	implicitHeight: shouldBeActive ? 400 : 0
+		property real scaleX: sourceW / displayW
-	opacity: shouldBeActive ? 1 : 0
+		property real scaleY: sourceH / displayH
-	scale: shouldBeActive ? 1 : 0.8
+		property real sourceH: Quickshell.screens[0].height
-	visible: opacity > 0
+		property real sourceW: Quickshell.screens[0].width
-
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-	Behavior on y {
-		Anim {
-		}
-	}
-
-	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.requestCrop();
-			wrapper.changesMade = false;
-		}
-	}
-
-	RowLayout {
-		id: root
 
 		anchors.fill: parent
-		spacing: Appearance.spacing.normal
+		fillMode: Image.PreserveAspectFit
+		smooth: true
+		source: Wallpapers.current
+	}
 
-		Repeater {
+	Item {
-			model: ScriptModel {
+		id: overlay
-				values: [...Quickshell.screens].sort((a, b) => {
+
-					return a.x - b.x;
+		clip: true
-				})
+		height: imageView.displayH
+		width: imageView.displayW
+		x: imageView.displayX
+		y: imageView.displayY
+
+		CustomRect {
+			id: cropRect
+
+			property real aspectRatio: Quickshell.screens[0].width / Quickshell.screens[0].height
+			readonly property rect sourceRect: Qt.rect(x * imageView.scaleX, y * imageView.scaleY, width * imageView.scaleX, height * imageView.scaleY)
+			property real zoom: Config.background.zoom
+
+			function clampToBounds() {
+				x = Math.max(0, Math.min(x, overlay.width - width));
+
+				y = Math.max(0, Math.min(y, overlay.height - height));
 			}
 
-			Item {
+			border.color: DynamicColors.palette.m3primary
-				id: delegate
+			border.width: 2
+			color: DynamicColors.tPalette.m3primary
+			height: width / aspectRatio
+			radius: Appearance.rounding.small
+			visible: imageView.status === Image.Ready
+			width: Math.min(overlay.width / zoom, overlay.height * aspectRatio / zoom)
+			x: Config.background.sourceClipX / imageView.scaleX
+			y: Config.background.sourceClipY / imageView.scaleY
+		}
 
-				required property ShellScreen modelData
+		MouseArea {
+			function updateCrop(mouseX, mouseY) {
+				let nx = mouseX - cropRect.width * 0.5;
+				let ny = mouseY - cropRect.height * 0.5;
 
-				function applyCrop(): void {
+				nx = Math.max(0, Math.min(nx, overlay.width - cropRect.width));
-					if (!cropRectLoader.item)
-						return;
-					const cropRect = cropRectLoader.item;
 
-					// We need to calculate the exact percentage coordinates that map perfectly
+				ny = Math.max(0, Math.min(ny, overlay.height - cropRect.height));
-					// to our C++ backend, regardless of current display scaling
-					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;
 
-					const finalRect = Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent);
+				cropRect.x = nx;
+				cropRect.y = ny;
+			}
 
-					// We just pass the percentages directly to the backend
+			anchors.fill: parent
-					Wallpapers.setCrop(delegate.modelData.name, finalRect, finalRect, cropRect.zoom);
+			hoverEnabled: true
-				}
+			preventStealing: true
 
-				function zoomClipRect(zoom: real): void {
+			onPositionChanged: mouse => {
-					if (!cropRectLoader.item)
+				if (pressed)
-						return;
+					updateCrop(mouse.x, mouse.y);
-					const cropRect = cropRectLoader.item;
+			}
+			onPressed: mouse => {
+				updateCrop(mouse.x, mouse.y);
+			}
+			onReleased: {
+				Wallpapers.recentlyChanged = false;
+				Config.background.sourceClipX = cropRect.sourceRect.x;
+				Config.background.sourceClipY = cropRect.sourceRect.y;
+				Config.background.sourceClipW = cropRect.sourceRect.width;
+				Config.background.sourceClipH = cropRect.sourceRect.height;
+				Config.save();
+			}
+			onWheel: wheel => {
+				let oldCenterX = cropRect.x + cropRect.width * 0.5;
+				let oldCenterY = cropRect.y + cropRect.height * 0.5;
 
-					let oldCenterX = cropRect.x + cropRect.width * 0.5;
+				if (wheel.angleDelta.y > 0)
-					let oldCenterY = cropRect.y + cropRect.height * 0.5;
+					cropRect.zoom *= 1.1;
+				else
+					cropRect.zoom /= 1.1;
 
-					cropRect.zoom = zoom;
+				cropRect.zoom = Math.max(1.0, Math.min(cropRect.zoom, 10.0));
+				Config.background.zoom = cropRect.zoom;
 
-					cropRect.x = oldCenterX - cropRect.width * 0.5;
+				cropRect.x = oldCenterX - cropRect.width * 0.5;
-					cropRect.y = oldCenterY - cropRect.height * 0.5;
+				cropRect.y = oldCenterY - cropRect.height * 0.5;
 
-					cropRect.clampToBounds();
+				cropRect.clampToBounds();
-				}
-
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-
-				Connections {
-					function onRequestCrop(): void {
-						delegate.applyCrop();
-					}
-
-					target: wrapper
-				}
-
-				RowLayout {
-					id: sliderLayout
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.right: parent.right
-					implicitHeight: 30
-					spacing: Appearance.spacing.large
-
-					CustomText {
-						text: qsTr("Crop scale")
-					}
-
-					CustomSlider {
-						id: zoomSlider
-
-						Layout.fillWidth: true
-						Layout.preferredHeight: 30
-						from: 1.0
-						implicitHeight: 30
-						to: 5.0
-						value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
-
-						onMoved: {
-							delegate.zoomClipRect(value);
-							wrapper.changesMade = true;
-						}
-					}
-				}
-
-				CachingImage {
-					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
-					asynchronous: true
-					fillMode: Image.PreserveAspectFit
-					// retainWhileLoading: true
-					source: Wallpapers.current
-					sourceSize.height: parent.height
-					sourceSize.width: parent.width
-
-					onPaintedWidthChanged: {
-						if (paintedWidth > 0 && cropRectLoader.item) {
-							cropRectLoader.item.restoreFromData();
-						}
-					}
-					onSourceChanged: {
-						if (cropRectLoader.item) {
-							cropRectLoader.item.restoreFromData();
-						}
-					}
-					onStatusChanged: {
-						if (scaledImg.status == Image.Ready && cropRectLoader.item) {
-							cropRectLoader.item.restoreFromData();
-						}
-					}
-
-					CustomText {
-						id: monitorId
-
-						anchors.centerIn: parent
-						color: Qt.alpha(DynamicColors.palette.m3surface, 0.85)
-						font.pointSize: Appearance.font.size.large * 4
-						style: Text.Outline
-						styleColor: DynamicColors.palette.m3onSurface
-						text: delegate.modelData.name
-					}
-
-					Loader {
-						id: cropRectLoader
-
-						active: scaledImg.paintedWidth > 0 && scaledImg.status == Image.Ready
-
-						sourceComponent: Component {
-							CustomRect {
-								id: cropRect
-
-								property real aspectRatio: delegate.modelData.width / delegate.modelData.height
-								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(delegate.modelData.name);
-
-									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/Controls/WallpaperGrid.qml

@@ -12,30 +12,37 @@ GridView {
 
 	readonly property int columnsCount: Math.max(1, Math.floor(width / minCellWidth))
 	readonly property int minCellWidth: 200 + Appearance.spacing.normal
-	property bool shouldBeActive: true
 
-	anchors.left: parent.left
+	Layout.preferredHeight: contentHeight
-	anchors.right: parent.right
 	cellHeight: 140 + Appearance.spacing.normal
 	cellWidth: width / columnsCount
 	clip: true
-	implicitHeight: shouldBeActive ? contentHeight : 0
 	interactive: false
 	model: Wallpapers.list
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	visible: opacity > 0
 
 	delegate: Item {
 		required property int index
 		readonly property bool isCurrent: modelData && modelData.path === Wallpapers.actualCurrent
-		readonly property real itemMargin: Appearance.spacing.normal
+		readonly property real itemMargin: Appearance.spacing.normal / 2
-		readonly property real itemRadius: Appearance.rounding.small
+		readonly property real itemRadius: Appearance.rounding.normal
 		required property var modelData
 
 		height: root.cellHeight
 		width: root.cellWidth
 
+		StateLayer {
+			function onClicked(): void {
+				Wallpapers.setWallpaper(modelData.path);
+			}
+
+			anchors.bottomMargin: itemMargin
+			anchors.fill: parent
+			anchors.leftMargin: itemMargin
+			anchors.rightMargin: itemMargin
+			anchors.topMargin: itemMargin
+			radius: itemRadius
+		}
+
 		CustomClippingRect {
 			id: image
 
@@ -46,6 +53,8 @@ GridView {
 			anchors.topMargin: itemMargin
 			antialiasing: true
 			color: DynamicColors.tPalette.m3surfaceContainer
+			layer.enabled: true
+			layer.smooth: true
 			radius: itemRadius
 
 			CachingImage {
@@ -91,33 +100,6 @@ GridView {
 				}
 			}
 
-			Rectangle {
-				anchors.fill: parent
-				antialiasing: true
-				border.color: DynamicColors.palette.m3primary
-				border.width: isCurrent ? 2 : 0
-				color: "transparent"
-				radius: itemRadius + 2
-				smooth: true
-
-				Behavior on border.width {
-					NumberAnimation {
-						duration: 150
-						easing.type: Easing.OutQuad
-					}
-				}
-
-				MaterialIcon {
-					anchors.margins: Appearance.padding.small
-					anchors.right: parent.right
-					anchors.top: parent.top
-					color: DynamicColors.palette.m3primary
-					font.pointSize: Appearance.font.size.large
-					text: "check_circle"
-					visible: isCurrent
-				}
-			}
-
 			Timer {
 				id: fallbackTimer
 
@@ -130,29 +112,35 @@ GridView {
 			}
 		}
 
-		StateLayer {
+		Rectangle {
-			function onClicked(): void {
-				Wallpapers.setWallpaper(modelData.path);
-			}
-
 			anchors.bottomMargin: itemMargin
 			anchors.fill: parent
 			anchors.leftMargin: itemMargin
 			anchors.rightMargin: itemMargin
 			anchors.topMargin: itemMargin
-			radius: itemRadius
+			antialiasing: true
-		}
+			border.color: DynamicColors.palette.m3primary
-	}
+			border.width: isCurrent ? 2 : 0
-	Behavior on opacity {
+			color: "transparent"
-		Anim {
+			radius: itemRadius - border.width
-		}
+			smooth: true
-	}
+
-	Behavior on scale {
+			Behavior on border.width {
-		Anim {
+				NumberAnimation {
-		}
+					duration: 150
-	}
+					easing.type: Easing.OutQuad
-	Behavior on y {
+				}
-		Anim {
+			}
+
+			MaterialIcon {
+				anchors.margins: Appearance.padding.small
+				anchors.right: parent.right
+				anchors.top: parent.top
+				color: DynamicColors.palette.m3primary
+				font.pointSize: Appearance.font.size.large
+				text: "check_circle"
+				visible: isCurrent
+			}
 		}
 	}
 }

Modules/Settings/Wrapper.qml

@@ -32,9 +32,10 @@ Item {
 		Loader {
 			id: content
 
-			active: root.shouldBeActive || root.visible
+			active: true
 			anchors.bottom: parent.bottom
 			anchors.horizontalCenter: parent.horizontalCenter
+			visible: true
 
 			sourceComponent: Content {
 				screen: root.screen