remove obsolete background files

Reviewed-on: #103

.gitea/workflows/lint-python.yml

@@ -1,4 +1,4 @@
-name: Lint & Format (Python)
+name: Python
 
 on:
     pull_request:
@@ -32,3 +32,34 @@ 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

.gitignore

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

CMakeLists.txt

@@ -31,6 +31,13 @@ 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/CustomSplitButtonRow.qml

@@ -8,20 +8,34 @@ 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)
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
 	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/CustomText.qml

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

Config/Colors.qml

@@ -1,5 +1,13 @@
 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,6 +100,9 @@ Singleton {
 			border: barConfig.border,
 			smoothing: barConfig.smoothing,
 			height: barConfig.height,
+			tray: {
+				trayIconSize: barConfig.tray.trayIconSize
+			},
 			popouts: {
 				tray: barConfig.popouts.tray,
 				audio: barConfig.popouts.audio,
@@ -115,7 +118,12 @@ Singleton {
 
 	function serializeColors(): var {
 		return {
-			schemeType: colors.schemeType
+			schemeType: colors.schemeType,
+			presets: {
+				name: colors.presets.name,
+				variant: colors.presets.variant,
+				accent: colors.presets.accent
+			}
 		};
 	}
 
@@ -209,6 +217,10 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
+			},
+			battery: {
+				popupThresholds: general.battery.popupThresholds,
+				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -242,6 +254,7 @@ Singleton {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
 			showNotifContent: lock.showNotifContent,
+			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {

Config/DynamicColors.qml

@@ -30,9 +30,10 @@ Singleton {
 	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
-		const luminance = getLuminance(c);
+		const initLuminance = getLuminance(c);
+		const luminance = Math.max(initLuminance, 0.001);
 
-		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 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 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));

Config/General.qml

@@ -4,6 +4,8 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
+	property Battery battery: Battery {
+	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -19,6 +21,17 @@ 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,6 +6,7 @@ JsonObject {
 	property int maxFprintTries: 3
 	property bool recolorLogo: false
 	property bool showNotifContent: false
+	property bool showNotifIcon: true
 	property Sizes sizes: Sizes {
 	}
 

Daemons/Battery.qml

@@ -0,0 +1,47 @@
+import Quickshell
+import Quickshell.Services.UPower
+import QtQuick
+import ZShell
+import qs.Config
+import qs.Components.Toast
+
+Scope {
+	id: root
+
+	readonly property real currentPerc: UPower.displayDevice.percentage
+	readonly property list<var> popupThresholds: [...Config.general.battery.popupThresholds].sort((a, b) => b.perc - a.perc)
+
+	Connections {
+		function onOnBatteryChanged(): void {
+			if (UPower.onBattery) {
+				if (Config.utilities.toasts.chargingChanged)
+					Toaster.toast(qsTr("Charger unplugged"), qsTr("Battery is discharging"), "power_off");
+			} else {
+				if (Config.utilities.toasts.chargingChanged)
+					Toaster.toast(qsTr("Charger plugged in"), qsTr("Battery is charging"), "power");
+				for (const level of root.popupThresholds)
+					level.warned = false;
+			}
+		}
+
+		target: UPower
+	}
+
+	Connections {
+		function onPercentageChanged(): void {
+			if (!UPower.onBattery)
+				return;
+
+			const p = UPower.displayDevice.percentage * 100;
+			for (const perc of root.popupThresholds) {
+				if (p <= perc.perc && !perc.warned) {
+					perc.warned = true;
+					console.log(perc.warned + "\n" + [...Config.general.battery.popupThresholds][0].warned);
+					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);
+				}
+			}
+		}
+
+		target: UPower.displayDevice
+	}
+}

Daemons/NotifServer.qml

@@ -179,6 +179,8 @@ 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 {
@@ -214,9 +216,9 @@ Singleton {
 			}
 
 			function onImageChanged(): void {
-				notif.image = notif.notification.image;
-				if (notif.notification?.image)
-					notif.dummyImageLoader.active = true;
+				notif.imageSource = notif.notification.image || "";
+				notif.image = notif.imageSource;
+				notif.cacheImageIfNeeded();
 			}
 
 			function onResidentChanged(): void {
@@ -233,60 +235,12 @@ 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
@@ -329,6 +283,26 @@ 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)) {
@@ -352,14 +326,13 @@ Singleton {
 			if (!notification)
 				return;
 
-			id = notification.id;
+			notifId = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			image = notification.image;
-			if (notification?.image)
-				dummyImageLoader.active = true;
+			imageSource = notification.image || "";
+			image = imageSource;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -369,6 +342,8 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
+
+			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

@@ -1,107 +0,0 @@
-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,6 +23,7 @@ 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
-	anchors.fill: root.visibilities.isDrawing ? parent : undefined
+	enabled: z > 0
 	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 (root.inLeftPanel(root.popout, x, y)) {
+		if (!(event.buttons & Qt.LeftButton) && root.inLeftPanel(root.popout, x, y)) {
 			root.z = -2;
 			root.panels.drawing.expanded = true;
 		}

Drawers/Interactions.qml

@@ -78,7 +78,7 @@ CustomMouseArea {
 		const dragY = y - dragStart.y;
 
 		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
-			// root.input.z = 2;
+			root.input.z = 2;
 			root.panels.drawing.expanded = false;
 		}
 
@@ -132,6 +132,8 @@ CustomMouseArea {
 				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;
@@ -161,6 +163,11 @@ CustomMouseArea {
 			}
 
 			if (root.visibilities.launcher) {
+				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
+					console.log("true");
+					root.visibilities.dashboard = false;
+				}
+
 				root.visibilities.dock = false;
 				root.visibilities.settings = false;
 			}

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
@@ -229,6 +229,7 @@ Variants {
 					id: notifsBg
 
 					panel: panels.notifications
+					radius: Appearance.rounding.normal
 				}
 
 				PanelBg {
@@ -304,22 +305,34 @@ Variants {
 				}
 			}
 
-			Drawing {
-				id: drawing
+			Loader {
+				id: drawingLoader
 
+				active: visibilities.isDrawing
 				anchors.fill: parent
 				z: 2
+
+				sourceComponent: Drawing {
+					id: drawing
+				}
 			}
 
-			DrawingInput {
-				id: input
+			Loader {
+				id: inputLoader
 
-				bar: bar
-				drawing: drawing
-				panels: panels
-				popout: panels.drawing
-				visibilities: visibilities
+				active: visibilities.isDrawing
+				anchors.fill: parent
 				z: 2
+
+				sourceComponent: DrawingInput {
+					id: input
+
+					bar: bar
+					drawing: drawingLoader.item
+					panels: panels
+					popout: panels.drawing
+					visibilities: visibilities
+				}
 			}
 
 			Interactions {
@@ -327,8 +340,8 @@ Variants {
 
 				anchors.fill: parent
 				bar: bar
-				drawing: drawing
-				input: input
+				drawing: drawingLoader.item
+				input: inputLoader.item
 				panels: panels
 				popouts: panels.popouts
 				screen: scope.modelData
@@ -339,7 +352,7 @@ Variants {
 					id: panels
 
 					bar: bar
-					drawingItem: drawing
+					drawingItem: drawingLoader.item
 					screen: scope.modelData
 					visibilities: visibilities
 

Greeter/GreeterState.qml

@@ -16,27 +16,14 @@ 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
 
@@ -58,11 +45,11 @@ Scope {
 
 			event.accepted = true;
 			return;
-		}
-
-		if (event.text && !/[\r\n]/.test(event.text)) {
+		} 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;
-			event.accepted = true;
 		}
 	}
 
@@ -81,6 +68,19 @@ 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/FetchPresets.qml

@@ -0,0 +1,63 @@
+// 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/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
+	readonly property bool enabled: Config.general.color.scheduleDark && Config.general.color.schemeGeneration
 
 	function applyDarkMode() {
 		Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", "dark"]);

Helpers/Recorder.qml

@@ -1,41 +1,82 @@
-// pragma Singleton
-//
-// import Quickshell
-// import QtQuick
-//
-// Singleton {
-// 	id: root
-//
-// 	function start(extraArgs = []): void {
-// 		needsStart = true;
-// 		startArgs = extraArgs;
-// 		checkProc.running = true;
-// 	}
-//
-// 	PersistentProperties {
-// 		id: props
-//
-// 		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"]);
-// 				}
-// 			}
-// 		}
-// 	}
-// }
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+	id: root
+
+	readonly property alias elapsed: props.elapsed
+	property bool needsPause
+	property bool needsStart
+	property bool needsStop
+	readonly property alias paused: props.paused
+	readonly property alias running: props.running
+	property list<string> startArgs
+
+	function start(extraArgs = []): void {
+		needsStart = true;
+		startArgs = extraArgs;
+		checkProc.running = true;
+	}
+
+	function stop(): void {
+		needsStop = true;
+		checkProc.running = true;
+	}
+
+	function togglePause(): void {
+		needsPause = true;
+		checkProc.running = true;
+	}
+
+	PersistentProperties {
+		id: props
+
+		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,6 +17,7 @@ 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

@@ -6,7 +6,21 @@ import Quickshell.Services.UPower
 Singleton {
 	id: root
 
+	readonly property real batteryPercent: UPower.displayDevice.percentage
 	readonly property list<UPowerDevice> devices: UPower.devices.values
 	readonly property UPowerDevice displayDevice: UPower.displayDevice
 	readonly property bool onBattery: UPower.onBattery
+	// property bool toastShown
+	//
+	// Connections {
+	// 	target: UPower
+	//
+	// 	function onPercentageChanged(): {
+	// 		if (root.batteryPercent >= 0.2 && toastShown)
+	// 			return;
+	//
+	// 		root.toastShown = true;
+	// 		Toaster.toast(qsTr("Battery "))
+	// 	}
+	// }
 }

Helpers/Wallpapers.qml

@@ -1,7 +1,9 @@
 pragma Singleton
+pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Io
+import QtQuick
 import ZShell.Models
 import qs.Config
 import qs.Modules
@@ -12,11 +14,17 @@ 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)
@@ -24,9 +32,33 @@ 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}`]);
@@ -53,6 +85,22 @@ 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

@@ -1,68 +0,0 @@
-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/Dashboard/Background.qml

@@ -1,65 +0,0 @@
-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 // Hard coded fallback for first open
+	implicitWidth: content.implicitWidth || 854
 	opacity: 1 - offsetScale
 	visible: offsetScale < 1
 

Modules/Dock/Background.qml

@@ -1,66 +0,0 @@
-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,18 +9,17 @@ 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 {
@@ -32,10 +31,10 @@ Item {
 	Loader {
 		id: content
 
+		active: root.shouldBeActive || root.visible
 		anchors.left: parent.left
 		anchors.top: parent.top
-
-		active: root.shouldBeActive || root.visible
+		asynchronous: true
 
 		sourceComponent: Content {
 			panels: root.panels

Modules/Drawing/Background.qml

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

Modules/Launcher/Background.qml

@@ -1,66 +0,0 @@
-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,6 +4,7 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
+import qs.Modules.Launcher.Services
 
 Item {
 	id: root
@@ -11,34 +12,24 @@ Item {
 	property int contentHeight
 	readonly property real maxHeight: {
 		let max = screen.height - Appearance.spacing.large * 2;
-		if (visibilities.resources)
+		if (visibilities.resources && panels.resourcesWrapper.x + panels.resourcesWrapper.width > root.x)
 			max -= panels.resources.nonAnimHeight;
-		if (visibilities.dashboard && panels.dashboard.x < root.x + root.implicitWidth)
-			max -= panels.dashboard.nonAnimHeight;
-		if (panels.popouts.currentName.startsWith("updates"))
-			max -= panels.popouts.nonAnimHeight;
+		if (panels.popouts.hasCurrent)
+			if (panels.popouts.current.x + panels.popouts.current.width > root.x && panels.popouts.current.x < root.x + root.width)
+				max -= panels.popouts.nonAnimHeight;
 		return max;
 	}
+	property real offsetScale: shouldBeActive ? 0 : 1
 	required property var panels
 	required property ShellScreen screen
-	required property PersistentProperties visibilities
 	readonly property bool shouldBeActive: visibilities.launcher
-	property real offsetScale: shouldBeActive ? 0 : 1
+	required property PersistentProperties visibilities
 
-	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 {
@@ -47,61 +38,26 @@ Item {
 		}
 	}
 
-	onMaxHeightChanged: timer.start()
-
-	Connections {
-		function onEnabledChanged(): void {
-			timer.start();
-		}
-
-		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;
-			}
-		}
+	Component.onCompleted: Qt.callLater(() => Apps)
+	onShouldBeActiveChanged: {
+		if (shouldBeActive)
+			implicitHeight = Qt.binding(() => content.implicitHeight);
+		else
+			implicitHeight = implicitHeight;
 	}
 
 	Loader {
 		id: content
 
-		active: false
+		active: root.shouldBeActive || root.visible
 		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/NotifGroup.qml

@@ -58,6 +58,7 @@ 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,6 +30,8 @@ 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

@@ -1,59 +0,0 @@
-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: 6
+	readonly property int padding: Appearance.padding.smaller
 	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.smallest / 2
+		radius: Appearance.rounding.normal - root.padding
 
 		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 : 8)
+				implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Appearance.spacing.small)
 				implicitWidth: notif.implicitWidth
 
 				ListView.onRemove: removeAnim.start()
@@ -151,48 +151,6 @@ 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

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

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

@@ -0,0 +1,290 @@
+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

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

Modules/Osd/Background.qml

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

Modules/Resources/Background.qml

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

Modules/Settings/Background.qml

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

Modules/Settings/Categories/Background.qml

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

Modules/Settings/Categories/Bar.qml

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

Modules/Settings/Categories/General.qml

@@ -1,4 +1,6 @@
 import Quickshell
+import QtQuick
+import QtQuick.Layouts
 import qs.Modules.Settings.Controls
 import qs.Config
 import qs.Components
@@ -67,6 +69,7 @@ SettingsPage {
 
 		CustomSplitButtonRow {
 			active: Config.general.color.mode === "light" ? menuItems[0] : menuItems[1]
+			buttonAlias.disabled: !Config.general.color.schemeGeneration
 			label: qsTr("Scheme mode")
 
 			menuItems: [
@@ -100,6 +103,7 @@ SettingsPage {
 			id: schemeType
 
 			active: root.schemeTypeItem(menuItems, Config.colors.schemeType)
+			buttonAlias.disabled: !Config.general.color.schemeGeneration
 			label: qsTr("Scheme type")
 			z: 2
 
@@ -169,21 +173,69 @@ 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

@@ -50,6 +50,15 @@ SettingsPage {
 		Separator {
 		}
 
+		SettingSwitch {
+			name: "Show notification icon"
+			object: Config.lock
+			setting: "showNotifIcon"
+		}
+
+		Separator {
+		}
+
 		SettingSpinBox {
 			min: 0
 			name: "Blur amount"
@@ -94,6 +103,18 @@ 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,6 +9,8 @@ import qs.Modules.Settings.Controls
 ColumnLayout {
 	id: root
 
+	property bool shouldBeActive: true
+
 	function addTimeoutEntry() {
 		let list = [...Config.general.idle.timeouts];
 
@@ -40,8 +42,26 @@ ColumnLayout {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Settings {
 		name: "Idle Monitors"
@@ -52,6 +72,8 @@ ColumnLayout {
 
 		SettingList {
 			Layout.fillWidth: true
+			anchors.left: undefined
+			anchors.right: undefined
 
 			onAddActiveActionRequested: {
 				root.updateTimeoutEntry(index, "activeAction", "");

Modules/Settings/Categories/Utilities.qml

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

Modules/Settings/Content.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
@@ -20,7 +22,6 @@ 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();
@@ -157,6 +158,7 @@ Item {
 		id: background
 
 		Cat.Background {
+			screen: root.screen
 		}
 	}
 

Modules/Settings/Controls/SchemesListView.qml

@@ -0,0 +1,161 @@
+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,7 +6,26 @@ import qs.Config
 CustomRect {
 	id: root
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: 1
+	property bool shouldBeActive: true
+
+	anchors.left: parent.left
+	anchors.right: parent.right
 	color: DynamicColors.tPalette.m3outlineVariant
+	implicitHeight: shouldBeActive ? 1 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 }

Modules/Settings/Controls/SettingActionList.qml

@@ -13,6 +13,7 @@ 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]];
@@ -44,8 +45,26 @@ ColumnLayout {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent
@@ -108,6 +127,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -188,6 +210,8 @@ ColumnLayout {
 				StringListEditor {
 					Layout.fillWidth: true
 					addLabel: qsTr("Add command argument")
+					anchors.left: undefined
+					anchors.right: undefined
 					values: [...(modelData.command ?? [])]
 
 					onListEdited: function (values) {
@@ -196,6 +220,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -214,6 +241,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {

Modules/Settings/Controls/SettingAliasList.qml

@@ -6,13 +6,14 @@ import qs.Components
 import qs.Config
 import qs.Helpers
 
-ColumnLayout {
+CustomRect {
 	id: root
 
 	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
 	function addAlias() {
 		const list = [...root.object[root.setting]];
@@ -40,8 +41,25 @@ ColumnLayout {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
-	spacing: Appearance.spacing.smaller
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? layout.implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent
@@ -58,115 +76,128 @@ ColumnLayout {
 		}
 	}
 
-	CustomText {
-		Layout.fillWidth: true
-		font.pointSize: Appearance.font.size.larger
-		text: root.name
-	}
+	ColumnLayout {
+		id: layout
 
-	Repeater {
-		model: [...root.object[root.setting]]
-
-		Item {
-			required property int index
-			required property var modelData
-
-			Layout.fillWidth: true
-			Layout.preferredHeight: layout.implicitHeight + Appearance.padding.smaller * 2
-
-			CustomRect {
-				anchors.left: parent.left
-				anchors.right: parent.right
-				anchors.top: parent.top
-				anchors.topMargin: -(Appearance.spacing.smaller / 2)
-				color: DynamicColors.tPalette.m3outlineVariant
-				implicitHeight: 1
-				visible: index !== 0
-			}
-
-			ColumnLayout {
-				id: layout
-
-				anchors.left: parent.left
-				anchors.margins: Appearance.padding.small
-				anchors.right: parent.right
-				anchors.verticalCenter: parent.verticalCenter
-				spacing: Appearance.spacing.small
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("From")
-					}
-
-					CustomRect {
-						Layout.fillWidth: true
-						Layout.preferredHeight: 33
-						color: DynamicColors.tPalette.m3surfaceContainerHigh
-						radius: Appearance.rounding.full
-
-						CustomTextField {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							anchors.rightMargin: Appearance.padding.normal
-							text: modelData.from ?? ""
-
-							onEditingFinished: root.updateAlias(index, "from", text)
-						}
-					}
-
-					IconButton {
-						font.pointSize: Appearance.font.size.large
-						icon: "delete"
-						type: IconButton.Tonal
-
-						onClicked: root.removeAlias(index)
-					}
-				}
-
-				RowLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						text: qsTr("To")
-					}
-
-					CustomRect {
-						Layout.fillWidth: true
-						Layout.preferredHeight: 33
-						color: DynamicColors.tPalette.m3surface
-						radius: Appearance.rounding.small
-
-						CustomTextField {
-							anchors.fill: parent
-							anchors.leftMargin: Appearance.padding.normal
-							anchors.rightMargin: Appearance.padding.normal
-							text: modelData.to ?? ""
-
-							onEditingFinished: root.updateAlias(index, "to", text)
-						}
-					}
-				}
-			}
-		}
-	}
-
-	RowLayout {
-		Layout.fillWidth: true
-
-		IconButton {
-			font.pointSize: Appearance.font.size.large
-			icon: "add"
-
-			onClicked: root.addAlias()
-		}
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.smaller
 
 		CustomText {
 			Layout.fillWidth: true
-			text: qsTr("Add alias")
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		Repeater {
+			model: [...root.object[root.setting]]
+
+			Item {
+				required property int index
+				required property var modelData
+
+				Layout.fillWidth: true
+				Layout.preferredHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+
+				CustomRect {
+					anchors.left: parent.left
+					anchors.right: parent.right
+					anchors.top: parent.top
+					anchors.topMargin: -(Appearance.spacing.smaller / 2)
+					color: DynamicColors.tPalette.m3outlineVariant
+					implicitHeight: 1
+					visible: index !== 0
+				}
+
+				ColumnLayout {
+					id: layout
+
+					anchors.left: parent.left
+					anchors.margins: Appearance.padding.small
+					anchors.right: parent.right
+					anchors.verticalCenter: parent.verticalCenter
+					spacing: Appearance.spacing.small
+
+					RowLayout {
+						Layout.fillWidth: true
+
+						CustomText {
+							Layout.fillWidth: true
+							text: qsTr("From")
+						}
+
+						CustomRect {
+							Layout.preferredHeight: 33
+							Layout.preferredWidth: Math.max(Math.min(fromTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
+							color: DynamicColors.tPalette.m3surfaceContainerHigh
+							radius: Appearance.rounding.full
+
+							CustomTextField {
+								id: fromTextField
+
+								anchors.centerIn: parent
+								horizontalAlignment: Text.AlignHCenter
+								implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550)
+								text: modelData.from ?? ""
+
+								onEditingFinished: root.updateAlias(index, "from", text)
+							}
+						}
+
+						IconButton {
+							font.pointSize: Appearance.font.size.large
+							icon: "delete"
+							type: IconButton.Tonal
+
+							onClicked: root.removeAlias(index)
+						}
+					}
+
+					RowLayout {
+						Layout.fillWidth: true
+
+						CustomText {
+							Layout.fillWidth: true
+							text: qsTr("To")
+						}
+
+						CustomRect {
+							Layout.preferredHeight: 33
+							Layout.preferredWidth: Math.max(Math.min(toTextField.contentWidth + Appearance.padding.large * 2, 550), 50)
+							color: DynamicColors.tPalette.m3surfaceContainerHigh
+							radius: Appearance.rounding.full
+
+							CustomTextField {
+								id: toTextField
+
+								anchors.centerIn: parent
+								horizontalAlignment: Text.AlignHCenter
+								implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550)
+								text: modelData.to ?? ""
+
+								onEditingFinished: root.updateAlias(index, "to", text)
+							}
+						}
+					}
+				}
+			}
+		}
+
+		RowLayout {
+			Layout.fillWidth: true
+
+			IconButton {
+				font.pointSize: Appearance.font.size.large
+				icon: "add"
+
+				onClicked: root.addAlias()
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				text: qsTr("Add alias")
+			}
 		}
 	}
 }

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -25,6 +25,7 @@ Item {
 	required property var object
 	property var pendingCommitEntries: []
 	required property string setting
+	property bool shouldBeActive: true
 	property int uidCounter: 0
 	property var visualEntries: []
 
@@ -146,8 +147,25 @@ Item {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
-	implicitHeight: layout.implicitHeight
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? layout.implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Component.onCompleted: root.rebuildVisualEntries()
 

Modules/Settings/Controls/SettingHyprSpinner.qml

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

Modules/Settings/Controls/SettingInput.qml

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

Modules/Settings/Controls/SettingList.qml

@@ -8,13 +8,31 @@ 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)
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	CustomRect {
 		anchors.left: parent.left
@@ -176,6 +194,9 @@ Item {
 			}
 
 			Separator {
+				Layout.fillWidth: true
+				anchors.left: undefined
+				anchors.right: undefined
 			}
 
 			RowLayout {
@@ -207,6 +228,9 @@ Item {
 			}
 
 			Separator {
+				Layout.fillWidth: true
+				anchors.left: undefined
+				anchors.right: undefined
 			}
 
 			Item {

Modules/Settings/Controls/SettingListView.qml

@@ -11,10 +11,32 @@ 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
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.height
+	signal optionSet
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.height : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -120,17 +142,18 @@ Item {
 						StateLayer {
 							onClicked: {
 								root.object[root.setting] = fontDelegate.modelData;
+								root.optionSet();
 								Config.save();
 							}
 						}
 					}
 					model: ScriptModel {
 						values: {
-							const fonts = Qt.fontFamilies();
+							const values = root.stringList;
 							const search = fontSearch.text;
 							var regex = new RegExp(search, "i");
 
-							return fonts.filter(n => regex.test(n));
+							return values.filter(n => regex.test(n));
 						}
 					}
 				}

Modules/Settings/Controls/SettingReadOnly.qml

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

Modules/Settings/Controls/SettingSpinBox.qml

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

Modules/Settings/Controls/SettingSpinner.qml

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

Modules/Settings/Controls/SettingStringList.qml

@@ -12,9 +12,27 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: layout.implicitHeight
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? layout.implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent
@@ -46,6 +64,9 @@ 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,9 +11,27 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	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

Modules/Settings/Controls/SettingsHeader.qml

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

Modules/Settings/Controls/SettingsIconButton.qml

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

Modules/Settings/Controls/SpinnerButton.qml

@@ -12,12 +12,29 @@ 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,6 +9,7 @@ ColumnLayout {
 	id: root
 
 	property string addLabel: qsTr("Add entry")
+	property bool shouldBeActive: true
 	property var values: []
 
 	signal listEdited(var values)
@@ -31,8 +32,26 @@ ColumnLayout {
 		root.listEdited(list);
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Repeater {
 		model: [...root.values]

Modules/Settings/Controls/WallpaperCropper.qml

@@ -1,113 +1,310 @@
+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: root
+	id: wrapper
 
-	Image {
-		id: imageView
+	property bool changesMade: false
+	property bool shouldBeActive: true
 
-		property real displayH: paintedHeight
-		property real displayW: paintedWidth
-		property real displayX: (width - paintedWidth) * 0.5
-		property real displayY: (height - paintedHeight) * 0.5
-		property real scaleX: sourceW / displayW
-		property real scaleY: sourceH / displayH
-		property real sourceH: Quickshell.screens[0].height
-		property real sourceW: Quickshell.screens[0].width
+	signal requestCrop
 
-		anchors.fill: parent
-		fillMode: Image.PreserveAspectFit
-		smooth: true
-		source: Wallpapers.current
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? 400 : 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 {
+		}
 	}
 
-	Item {
-		id: overlay
+	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
 
-		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));
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
 			}
-
-			border.color: DynamicColors.palette.m3primary
-			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
 		}
 
-		MouseArea {
-			function updateCrop(mouseX, mouseY) {
-				let nx = mouseX - cropRect.width * 0.5;
-				let ny = mouseY - cropRect.height * 0.5;
+		onClicked: {
+			wrapper.requestCrop();
+			wrapper.changesMade = false;
+		}
+	}
 
-				nx = Math.max(0, Math.min(nx, overlay.width - cropRect.width));
+	RowLayout {
+		id: root
 
-				ny = Math.max(0, Math.min(ny, overlay.height - cropRect.height));
+		anchors.fill: parent
+		spacing: Appearance.spacing.normal
 
-				cropRect.x = nx;
-				cropRect.y = ny;
+		Repeater {
+			model: ScriptModel {
+				values: [...Quickshell.screens].sort((a, b) => {
+					return a.x - b.x;
+				})
 			}
 
-			anchors.fill: parent
-			hoverEnabled: true
-			preventStealing: true
+			Item {
+				id: delegate
 
-			onPositionChanged: mouse => {
-				if (pressed)
-					updateCrop(mouse.x, mouse.y);
-			}
-			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;
+				required property ShellScreen modelData
 
-				if (wheel.angleDelta.y > 0)
-					cropRect.zoom *= 1.1;
-				else
-					cropRect.zoom /= 1.1;
+				function applyCrop(): void {
+					if (!cropRectLoader.item) return;
+					const cropRect = cropRectLoader.item;
 					
-				cropRect.zoom = Math.max(1.0, Math.min(cropRect.zoom, 10.0));
-				Config.background.zoom = cropRect.zoom;
+					// We need to calculate the exact percentage coordinates that map perfectly 
+					// 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;
 					
-				cropRect.x = oldCenterX - cropRect.width * 0.5;
-				cropRect.y = oldCenterY - cropRect.height * 0.5;
+					const finalRect = Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent);
 					
-				cropRect.clampToBounds();
+					// We just pass the percentages directly to the backend
+					Wallpapers.setCrop(delegate.modelData.name, finalRect, finalRect, cropRect.zoom);
+				}
+
+				function zoomClipRect(zoom: real): void {
+					if (!cropRectLoader.item) return;
+					const cropRect = cropRectLoader.item;
+					
+					let oldCenterX = cropRect.x + cropRect.width * 0.5;
+					let oldCenterY = cropRect.y + cropRect.height * 0.5;
+
+					cropRect.zoom = zoom;
+
+					cropRect.x = oldCenterX - cropRect.width * 0.5;
+					cropRect.y = oldCenterY - cropRect.height * 0.5;
+
+					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: 10
+						from: 1.0
+						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,37 +12,30 @@ GridView {
 
 	readonly property int columnsCount: Math.max(1, Math.floor(width / minCellWidth))
 	readonly property int minCellWidth: 200 + Appearance.spacing.normal
+	property bool shouldBeActive: true
 
-	Layout.preferredHeight: contentHeight
+	anchors.left: parent.left
+	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 / 2
-		readonly property real itemRadius: Appearance.rounding.normal
+		readonly property real itemMargin: Appearance.spacing.normal
+		readonly property real itemRadius: Appearance.rounding.small
 		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
 
@@ -53,8 +46,6 @@ GridView {
 			anchors.topMargin: itemMargin
 			antialiasing: true
 			color: DynamicColors.tPalette.m3surfaceContainer
-			layer.enabled: true
-			layer.smooth: true
 			radius: itemRadius
 
 			CachingImage {
@@ -100,6 +91,33 @@ 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
 
@@ -112,35 +130,29 @@ GridView {
 			}
 		}
 
-		Rectangle {
+		StateLayer {
+			function onClicked(): void {
+				Wallpapers.setWallpaper(modelData.path);
+			}
+
 			anchors.bottomMargin: itemMargin
 			anchors.fill: parent
 			anchors.leftMargin: itemMargin
 			anchors.rightMargin: itemMargin
 			anchors.topMargin: itemMargin
-			antialiasing: true
-			border.color: DynamicColors.palette.m3primary
-			border.width: isCurrent ? 2 : 0
-			color: "transparent"
-			radius: itemRadius - border.width
-			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
-			}
+			radius: itemRadius
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
 		}
 	}
 }

Modules/Settings/Wrapper.qml

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

Modules/SysTray/TrayItem.qml

@@ -1,7 +1,9 @@
 import QtQuick.Layouts
 import QtQuick
+import QtQuick.VectorImage
 import Quickshell
 import Quickshell.Services.SystemTray
+import qs.Helpers
 import qs.Modules
 import qs.Components
 import qs.Config
@@ -10,12 +12,36 @@ Item {
 	id: root
 
 	property bool current: popouts.currentName.startsWith(`traymenu${ind}`) && popouts.hasCurrent
-	property bool hasLoaded: false
+	readonly property real dpr: Hypr.monitorFor(loader.screen).scale
 	required property int ind
 	required property SystemTrayItem item
 	required property RowLayout loader
 	required property Wrapper popouts
 
+	function resolveIcon(app: string, icon: string): string {
+		if (app === "chrome_status_icon_1") {
+			return Quickshell.iconPath("discord-tray");
+		} else if (app === "AyuGramDesktop") {
+			if (icon === Quickshell.iconPath("com.ayugram.desktop-attention-symbolic"))
+				return Quickshell.iconPath("telegram-attention-panel");
+			else if (icon === Quickshell.iconPath("com.ayugram.desktop-mute-symbolic"))
+				return Quickshell.iconPath("telegram-mute-panel");
+			else if (icon === Quickshell.iconPath("com.ayugram.desktop-symbolic"))
+				return Quickshell.iconPath("telegram-panel");
+		} else if (app === "TelegramDesktop") {
+			if (icon === Quickshell.iconPath("org.telegram.desktop-symbolic"))
+				return Quickshell.iconPath("telegram-panel");
+			else if (icon === Quickshell.iconPath("org.telegram.desktop-attention-symbolic"))
+				return Quickshell.iconPath("telegram-attention-panel");
+			else if (icon === Quickshell.iconPath("org.telegram.desktop-mute-symbolic"))
+				return Quickshell.iconPath("telegram-mute-panel");
+		} else if (app === "steam") {
+			return Quickshell.iconPath("steam_tray_mono");
+		}
+
+		return root.item.icon;
+	}
+
 	CustomRect {
 		anchors.fill: parent
 		anchors.margins: 3
@@ -29,7 +55,8 @@ Item {
 			onClicked: {
 				if (mouse.button === Qt.LeftButton) {
 					root.item.activate();
-				} else if (mouse.button === Qt.RightButton) {
+					console.log(icon.source + "\n" + root.item.id);
+				} else if (mouse.button === Qt.RightButton && Config.barConfig.popouts.tray) {
 					root.popouts.currentName = `traymenu${root.ind}`;
 					root.popouts.currentCenter = Qt.binding(() => root.mapToItem(root.loader, root.implicitWidth / 2, 0).x);
 					root.popouts.hasCurrent = true;
@@ -47,9 +74,11 @@ Item {
 		id: icon
 
 		anchors.centerIn: parent
+		antialiasing: true
 		color: root.current ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-		implicitSize: 22
+		implicitSize: Config.barConfig.tray.trayIconSize * root.dpr
 		layer.enabled: Config.general.color.smart || Config.general.color.scheduleDark
-		source: root.item.icon
+		scale: 1 / root.dpr
+		source: root.resolveIcon(root.item.id, root.item.icon)
 	}
 }

Modules/SysTray/TrayWidget.qml

@@ -23,12 +23,12 @@ RowLayout {
 			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
 			let child = sysModRow.childAt(modRowPos.x, modRowPos.y);
 			if (child) {
-				if (child.objectName === "audioWidget")
+				if (child.objectName === "audioWidget" && Config.barConfig.popouts.audio)
 					return {
 						id: "audio",
 						item: child
 					};
-				if (child.objectName === "upowerWidget")
+				if (child.objectName === "upowerWidget" && Config.barConfig.popouts.upower)
 					return {
 						id: "upower",
 						item: child

Modules/Updates/UpdatesPopout.qml

@@ -11,150 +11,161 @@ import qs.Helpers
 CustomClippingRect {
 	id: root
 
+	readonly property bool hasUpdates: Object.keys(Updates.updates)?.length > 0
 	readonly property int itemHeight: 50 + Appearance.padding.smaller * 2
 	required property var wrapper
 
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: updatesList.visible ? updatesList.implicitHeight + Appearance.padding.small * 2 : noUpdates.height
-	implicitWidth: updatesList.visible ? updatesList.contentWidth + Appearance.padding.small * 2 : noUpdates.width
+	implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Appearance.padding.small * 2 : noUpdatesLoader.item.height
+	implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Appearance.padding.small * 2 : noUpdatesLoader.item.width
 	radius: Appearance.rounding.small
 
-	Item {
-		id: noUpdates
+	Loader {
+		id: noUpdatesLoader
 
+		active: !root.hasUpdates
 		anchors.centerIn: parent
-		height: 200
-		visible: script.values.length === 0
-		width: 600
 
-		MaterialIcon {
-			id: noUpdatesIcon
+		sourceComponent: Item {
+			id: noUpdates
 
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.top: parent.top
-			color: DynamicColors.tPalette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.extraLarge * 3
-			horizontalAlignment: Text.AlignHCenter
-			text: "check"
-		}
+			height: 200
+			width: 300
 
-		CustomText {
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.top: noUpdatesIcon.bottom
-			color: DynamicColors.tPalette.m3onSurfaceVariant
-			horizontalAlignment: Text.AlignHCenter
-			text: qsTr("No updates available")
-			verticalAlignment: Text.AlignVCenter
+			MaterialIcon {
+				id: noUpdatesIcon
+
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: parent.top
+				color: DynamicColors.tPalette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.extraLarge * 3
+				horizontalAlignment: Text.AlignHCenter
+				text: "check"
+			}
+
+			CustomText {
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: noUpdatesIcon.bottom
+				color: DynamicColors.tPalette.m3onSurfaceVariant
+				horizontalAlignment: Text.AlignHCenter
+				text: qsTr("No updates available")
+				verticalAlignment: Text.AlignVCenter
+			}
 		}
 	}
 
-	CustomListView {
-		id: updatesList
+	Loader {
+		id: updatesListLoader
 
+		active: root.hasUpdates
 		anchors.centerIn: parent
-		contentHeight: childrenRect.height
-		contentWidth: 600
-		displayMarginBeginning: root.itemHeight
-		displayMarginEnd: root.itemHeight
-		implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
-		implicitWidth: contentWidth
-		spacing: Appearance.spacing.normal
-		visible: script.values.length > 0
 
-		delegate: CustomRect {
-			id: update
+		sourceComponent: CustomListView {
+			id: updatesList
 
-			required property var modelData
-			readonly property list<string> sections: modelData.update.split(" ")
+			contentHeight: childrenRect.height
+			contentWidth: 600
+			displayMarginBeginning: root.itemHeight
+			displayMarginEnd: root.itemHeight
+			implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
+			implicitWidth: contentWidth
+			spacing: Appearance.spacing.normal
 
-			// anchors.left: parent.left
-			// anchors.right: parent.right
-			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitHeight: root.itemHeight
-			implicitWidth: 600
-			radius: Appearance.rounding.small - Appearance.padding.small
+			delegate: CustomRect {
+				id: update
 
-			RowLayout {
-				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.smaller
-				anchors.rightMargin: Appearance.padding.smaller
+				required property var modelData
+				readonly property list<string> sections: modelData.update.split(" ")
 
-				MaterialIcon {
-					font.pointSize: Appearance.font.size.large * 2
-					text: "package_2"
-				}
-
-				ColumnLayout {
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						Layout.preferredHeight: 25
-						elide: Text.ElideRight
-						font.pointSize: Appearance.font.size.large
-						text: update.sections[0]
-					}
-
-					CustomText {
-						Layout.fillWidth: true
-						color: DynamicColors.palette.m3onSurfaceVariant
-						text: Updates.formatUpdateTime(update.modelData.timestamp)
-					}
-				}
+				// anchors.left: parent.left
+				// anchors.right: parent.right
+				color: DynamicColors.tPalette.m3surfaceContainer
+				implicitHeight: root.itemHeight
+				implicitWidth: 600
+				radius: Appearance.rounding.small - Appearance.padding.small
 
 				RowLayout {
-					Layout.fillHeight: true
-					Layout.preferredWidth: 300
-
-					MarqueeText {
-						id: versionFrom
-
-						Layout.fillHeight: true
-						Layout.preferredWidth: 125
-						animate: true
-						color: DynamicColors.palette.m3tertiary
-						font.pointSize: Appearance.font.size.large
-						horizontalAlignment: Text.AlignHCenter
-						marqueeEnabled: true
-						pauseMs: 4000
-						text: update.sections[1]
-						width: 125
-					}
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.smaller
+					anchors.rightMargin: Appearance.padding.smaller
 
 					MaterialIcon {
-						Layout.fillHeight: true
-						color: DynamicColors.palette.m3secondary
-						font.pointSize: Appearance.font.size.extraLarge
-						horizontalAlignment: Text.AlignHCenter
-						text: "arrow_right_alt"
-						verticalAlignment: Text.AlignVCenter
+						font.pointSize: Appearance.font.size.large * 2
+						text: "package_2"
 					}
 
-					MarqueeText {
-						id: versionTo
+					ColumnLayout {
+						Layout.fillWidth: true
 
+						CustomText {
+							Layout.fillWidth: true
+							Layout.preferredHeight: 25
+							elide: Text.ElideRight
+							font.pointSize: Appearance.font.size.large
+							text: update.sections[0]
+						}
+
+						CustomText {
+							Layout.fillWidth: true
+							color: DynamicColors.palette.m3onSurfaceVariant
+							text: Updates.formatUpdateTime(update.modelData.timestamp)
+						}
+					}
+
+					RowLayout {
 						Layout.fillHeight: true
-						Layout.preferredWidth: 120
-						animate: true
-						color: DynamicColors.palette.m3primary
-						font.pointSize: Appearance.font.size.large
-						horizontalAlignment: Text.AlignHCenter
-						marqueeEnabled: true
-						pauseMs: 4000
-						text: update.sections[3]
-						width: 125
+						Layout.preferredWidth: 300
+
+						MarqueeText {
+							id: versionFrom
+
+							Layout.fillHeight: true
+							Layout.preferredWidth: 125
+							animate: true
+							color: DynamicColors.palette.m3tertiary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[1]
+							width: 125
+						}
+
+						MaterialIcon {
+							Layout.fillHeight: true
+							color: DynamicColors.palette.m3secondary
+							font.pointSize: Appearance.font.size.extraLarge
+							horizontalAlignment: Text.AlignHCenter
+							text: "arrow_right_alt"
+							verticalAlignment: Text.AlignVCenter
+						}
+
+						MarqueeText {
+							id: versionTo
+
+							Layout.fillHeight: true
+							Layout.preferredWidth: 120
+							animate: true
+							color: DynamicColors.palette.m3primary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[3]
+							width: 125
+						}
 					}
 				}
 			}
-		}
-		model: ScriptModel {
-			id: script
+			model: ScriptModel {
+				id: script
 
-			objectProp: "update"
-			values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
-						update,
-						timestamp
-					}))
+				objectProp: "update"
+				values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
+							update,
+							timestamp
+						}))
+			}
 		}
 	}
 }

Modules/Wallpaper/WallBackground-old.qml

@@ -1,80 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import qs.Components
-import qs.Helpers
-import qs.Config
-
-Item {
-	id: root
-
-	property Image current: one
-	property string source: Wallpapers.current
-
-	anchors.fill: parent
-
-	Component.onCompleted: {
-		if (source)
-			Qt.callLater(() => one.update());
-	}
-	onSourceChanged: {
-		if (!source) {
-			current = null;
-		} else if (current === one) {
-			two.update();
-		} else {
-			one.update();
-		}
-	}
-
-	Img {
-		id: one
-	}
-
-	Img {
-		id: two
-	}
-
-	component Img: Image {
-		id: img
-
-		function update(): void {
-			if (source === root.source) {
-				root.current = this;
-			} else {
-				source = root.source;
-			}
-		}
-
-		anchors.fill: parent
-		asynchronous: true
-		fillMode: Image.PreserveAspectCrop
-		opacity: 0
-		retainWhileLoading: true
-		scale: Wallpapers.showPreview ? 1 : 0.8
-		sourceClipRect: Qt.rect(Config.background.sourceClipX, Config.background.sourceClipY, Config.background.sourceClipW, Config.background.sourceClipH)
-
-		states: State {
-			name: "visible"
-			when: root.current === img
-
-			PropertyChanges {
-				img.opacity: 1
-				img.scale: 1
-			}
-		}
-		transitions: Transition {
-			Anim {
-				duration: Config.background.wallFadeDuration
-				properties: "opacity,scale"
-				target: img
-			}
-		}
-
-		onStatusChanged: {
-			if (status === Image.Ready) {
-				root.current = this;
-			}
-		}
-	}
-}

Modules/Wallpaper/WallBackground.qml

@@ -1,10 +1,12 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
+import Quickshell.Hyprland
 import QtQuick
 import qs.Components
 import qs.Helpers
 import qs.Config
+import ZShell.Internal
 
 Item {
 	id: root
@@ -12,31 +14,79 @@ Item {
 	required property ShellScreen screen
 	property string source: Wallpapers.current
 
+	function refreshData(): void {
+		Hyprland.refreshMonitors();
+		let scale = Hyprland.monitorFor(root.screen).scale;
+		if (scale <= 0)
+			scale = 1.0; // Fallback to avoid zeroes on initialization
+
+		if (root.screen.width > 0 && root.screen.height > 0) {
+			img.screenResolution = Qt.size(root.screen.width * scale, root.screen.height * scale);
+		}
+
+		const displayData = Wallpapers.getCrop(root.screen.name);
+
+		if (displayData) {
+			img.cropX = displayData.x !== undefined ? displayData.x : 0.0;
+			img.cropY = displayData.y !== undefined ? displayData.y : 0.0;
+			img.cropWidth = (displayData.width !== undefined && displayData.width > 0) ? displayData.width : 1.0;
+			img.cropHeight = (displayData.height !== undefined && displayData.height > 0) ? displayData.height : 1.0;
+		}
+	}
+
 	anchors.fill: parent
 
-	Image {
+	Component.onCompleted: root.refreshData()
+
+	Connections {
+		function onHeightChanged() {
+			root.refreshData();
+		}
+
+		function onWidthChanged() {
+			root.refreshData();
+		}
+
+		target: root.screen
+	}
+
+	WallpaperImage {
 		id: img
 
 		anchors.fill: parent
-		asynchronous: true
-		fillMode: Image.PreserveAspectCrop
-		opacity: 1
-		retainWhileLoading: true
 		source: root.source
-		sourceClipRect: Wallpapers.recentlyChanged ? null : Qt.rect(Config.background.sourceClipX, Config.background.sourceClipY, Config.background.sourceClipW, Config.background.sourceClipH)
-		sourceSize.height: root.screen.height
-		sourceSize.width: root.screen.width
 
-		onSourceChanged: {
-			if (Wallpapers.recentlyChanged) {
-				Config.background.sourceClipH = 0;
-				Config.background.sourceClipW = 0;
-				Config.background.sourceClipY = 0;
-				Config.background.sourceClipX = 0;
-				Config.background.zoom = 1.0;
-				Config.save();
+		Behavior on cropHeight {
+			Anim {
 			}
-			Wallpapers.recentlyChanged = true;
+		}
+		Behavior on cropWidth {
+			Anim {
+			}
+		}
+		Behavior on cropX {
+			Anim {
+			}
+		}
+		Behavior on cropY {
+			Anim {
+			}
+		}
+		Behavior on zoom {
+			Anim {
+			}
+		}
+
+		Connections {
+			function onAdapterUpdated(): void {
+				root.refreshData();
+			}
+
+			function onLoaded(): void {
+				root.refreshData();
+			}
+
+			target: Wallpapers.monitorCrops
 		}
 	}
 }

Modules/Wallpaper/Wallpaper.qml

@@ -6,7 +6,7 @@ import qs.Modules.DesktopIcons
 
 Loader {
 	active: Config.background.enabled
-	asynchronous: true
+	asynchronous: false
 
 	sourceComponent: Variants {
 		model: Quickshell.screens

Modules/Wrapper.qml

@@ -15,9 +15,8 @@ Item {
 	property real currentCenter
 	property alias currentName: popoutState.currentName
 	property string detachedMode
-	readonly property bool isDetached: detachedMode.length > 0
 	property alias hasCurrent: popoutState.hasCurrent
-	readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight
+	readonly property real nonAnimHeight: content.implicitHeight || 150
 	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
 	required property real offsetScale
 	property string queuedMode
@@ -28,29 +27,13 @@ Item {
 		detachedMode = "";
 	}
 
-	function detach(mode: string): void {
-		setAnims(true);
-		if (mode === "winfo") {
-			detachedMode = mode;
-		} else {
-			queuedMode = mode;
-			detachedMode = "any";
-		}
-		setAnims(false);
-		focus = true;
-	}
-
-	function setAnims(detach: bool): void {
-		const type = `expressive${detach ? "Slow" : "Default"}Spatial`;
-		animLength = Appearance.anim.durations[type];
-		animCurve = Appearance.anim.curves[type];
-	}
-
 	focus: hasCurrent
 	implicitHeight: nonAnimHeight
 	implicitWidth: nonAnimWidth
 
 	Behavior on implicitHeight {
+		enabled: root.offsetScale < 1
+
 		Anim {
 			duration: root.animLength
 			easing.bezierCurve: root.animCurve
@@ -72,42 +55,14 @@ Item {
 	Comp {
 		id: content
 
-		// anchors.horizontalCenter: parent.horizontalCenter
-		// anchors.top: parent.top
 		anchors.centerIn: parent
-		shouldBeActive: root.hasCurrent && !root.detachedMode
+		shouldBeActive: root.hasCurrent
 
 		sourceComponent: Content {
 			popouts: popoutState
 		}
 	}
 
-	// Comp {
-	// 	id: winfo
-	//
-	// 	anchors.centerIn: parent
-	// 	shouldBeActive: root.detachedMode === "winfo"
-	//
-	// 	sourceComponent: WindowInfo {
-	// 		client: Hypr.activeToplevel
-	// 		screen: root.screen
-	// 	}
-	// }
-	//
-	// Comp {
-	// 	id: controlCenter
-	//
-	// 	anchors.centerIn: parent
-	// 	shouldBeActive: root.detachedMode === "any"
-	//
-	// 	sourceComponent: ControlCenter {
-	// 		active: root.queuedMode
-	// 		screen: root.screen
-	//
-	// 		onClose: root.close()
-	// 	}
-	// }
-
 	component Comp: Loader {
 		id: comp
 

Plugins/ZShell/Internal/CMakeLists.txt

@@ -8,6 +8,7 @@ qml_module(ZShell-internal
 		circularbuffer.hpp circularbuffer.cpp
 		sparklineitem.hpp sparklineitem.cpp
 		arcgauge.hpp arcgauge.cpp
+		wallpaperimage.hpp wallpaperimage.cpp
     LIBRARIES
         Qt::Gui
         Qt::Quick

Plugins/ZShell/Internal/arcgauge.cpp

@@ -4,7 +4,7 @@
 #include <qpainter.h>
 #include <qpen.h>
 
-namespace caelestia::internal {
+namespace ZShell::internal {
 
 ArcGauge::ArcGauge(QQuickItem* parent)
 	: QQuickPaintedItem(parent) {
@@ -116,4 +116,4 @@ void ArcGauge::setLineWidth(qreal width) {
 	update();
 }
 
-} // namespace caelestia::internal
+} // namespace ZShell::internal

Plugins/ZShell/Internal/arcgauge.hpp

@@ -5,7 +5,7 @@
 #include <qqmlintegration.h>
 #include <qquickpainteditem.h>
 
-namespace caelestia::internal {
+namespace ZShell::internal {
 
 class ArcGauge : public QQuickPaintedItem {
 Q_OBJECT
@@ -58,4 +58,4 @@ qreal m_sweepAngle = 1.5 * M_PI;
 qreal m_lineWidth = 10.0;
 };
 
-} // namespace caelestia::internal
+} // namespace ZShell::internal

Plugins/ZShell/Internal/wallpaperimage.cpp

@@ -0,0 +1,199 @@
+#include "wallpaperimage.hpp"
+
+#include <QStandardPaths>
+#include <QCryptographicHash>
+#include <QDir>
+#include <QFileInfo>
+#include <QtConcurrent>
+#include <QSGImageNode>
+#include <QQuickWindow>
+
+namespace ZShell::internal {
+
+WallpaperImage::WallpaperImage(QQuickItem *parent)
+	: QQuickItem(parent)
+{
+	setFlag(ItemHasContents, true);
+	connect(&m_imageWatcher, &QFutureWatcher<QImage>::finished, this, &WallpaperImage::handleImageLoaded);
+}
+
+WallpaperImage::~WallpaperImage() {
+	if (m_texture) delete m_texture;
+}
+
+void WallpaperImage::setSource(const QUrl &source) {
+	if (m_source == source) return;
+	m_source = source;
+	emit sourceChanged();
+	loadImage();
+}
+
+void WallpaperImage::setScreenResolution(const QSize &screenResolution) {
+	if (m_screenResolution == screenResolution) return;
+	m_screenResolution = screenResolution;
+	emit screenResolutionChanged();
+	loadImage();
+}
+
+void WallpaperImage::setZoom(qreal zoom) {
+	if (qFuzzyCompare(m_zoom, zoom)) return;
+	m_zoom = zoom;
+	emit zoomChanged();
+	update();
+}
+
+void WallpaperImage::setCropX(qreal x) {
+	if (qFuzzyCompare(m_cropX, x)) return;
+	m_cropX = x;
+	emit cropXChanged();
+	update();
+}
+
+void WallpaperImage::setCropY(qreal y) {
+	if (qFuzzyCompare(m_cropY, y)) return;
+	m_cropY = y;
+	emit cropYChanged();
+	update();
+}
+
+void WallpaperImage::setCropWidth(qreal w) {
+    if (w <= 0.0) w = 1.0;
+    if (qFuzzyCompare(m_cropWidth, w)) return;
+    m_cropWidth = w;
+    emit cropWidthChanged();
+    update();
+}
+
+void WallpaperImage::setCropHeight(qreal h) {
+    if (h <= 0.0) h = 1.0;
+    if (qFuzzyCompare(m_cropHeight, h)) return;
+    m_cropHeight = h;
+    emit cropHeightChanged();
+    update();
+}
+
+QString WallpaperImage::getCacheFilePath() const {
+	if (m_source.isEmpty() || m_screenResolution.isEmpty()) return QString();
+
+    QString cachePath = QStandardPaths::writableLocation(QStandardPaths::GenericCacheLocation) + "/zshell/imagecache";
+	QDir().mkpath(cachePath);
+
+	// Hash the source URL + resolution
+	QString id = m_source.toString() + "_" + QString::number(m_screenResolution.width()) + "x" + QString::number(m_screenResolution.height());
+	QByteArray hash = QCryptographicHash::hash(id.toUtf8(), QCryptographicHash::Md5).toHex();
+
+	return cachePath + "/" + hash + ".png";
+}
+
+void WallpaperImage::loadImage() {
+    if (m_source.isEmpty()) return;
+
+    QString cacheFile = getCacheFilePath();
+    QString sourceFile = m_source.isLocalFile() ? m_source.toLocalFile() : m_source.toString();
+    
+    // Qt resource path correction if passed as a standard URL string
+    if (sourceFile.startsWith("qrc:/")) {
+        sourceFile = sourceFile.mid(3); // Converts "qrc:/" to ":/"
+    }
+    
+    QSize targetRes = m_screenResolution;
+
+    // Run off the main thread to avoid blocking the UI
+    QFuture<QImage> future = QtConcurrent::run([sourceFile, cacheFile, targetRes]() -> QImage {
+        if (!targetRes.isEmpty() && !cacheFile.isEmpty() && QFileInfo::exists(cacheFile)) {
+            QImage cached(cacheFile);
+            if (!cached.isNull()) return cached;
+        }
+
+        QImage original(sourceFile);
+        if (original.isNull()) return QImage();
+
+        if (targetRes.isEmpty()) {
+            // Screen resolution not set yet by QML, return the unscaled original for now to prevent a black screen
+            return original;
+        }
+
+        // Check if original is strictly larger than screen resolution
+        if (original.width() > targetRes.width() || original.height() > targetRes.height()) {
+            QImage scaled = original.scaled(targetRes, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);
+            if (!cacheFile.isEmpty()) scaled.save(cacheFile, "PNG");
+            return scaled;
+        }
+
+        // Otherwise just cache and return the original
+        if (!cacheFile.isEmpty()) original.save(cacheFile, "PNG");
+        return original;
+    });
+
+    m_imageWatcher.setFuture(future);
+}
+
+void WallpaperImage::handleImageLoaded() {
+	m_image = m_imageWatcher.result();
+	m_textureDirty = true;
+	update(); // Request redraw
+}
+
+QSGNode *WallpaperImage::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) {
+	auto *node = static_cast<QSGImageNode *>(oldNode);
+
+	if (m_image.isNull()) {
+		delete node;
+		return nullptr;
+	}
+
+	if (!node) {
+		node = window()->createImageNode();
+	}
+
+	if (m_textureDirty) {
+		if (m_texture) delete m_texture;
+        m_texture = window()->createTextureFromImage(m_image, QQuickWindow::TextureHasAlphaChannel);
+		m_textureDirty = false;
+	}
+
+	if (m_texture) {
+		node->setTexture(m_texture);
+		node->setRect(boundingRect());
+		node->setFiltering(QSGTexture::Linear);
+
+        qreal cW = m_cropWidth / m_zoom;
+        qreal cH = m_cropHeight / m_zoom;
+
+        QRectF reqRect(
+            m_cropX * m_texture->textureSize().width(),
+            m_cropY * m_texture->textureSize().height(),
+            cW * m_texture->textureSize().width(),
+            cH * m_texture->textureSize().height()
+        );
+
+        QRectF bounds = boundingRect();
+        if (bounds.isEmpty() || reqRect.isEmpty()) return node;
+
+        qreal targetRatio = bounds.width() / bounds.height();
+        qreal reqRatio = reqRect.width() / reqRect.height();
+
+        QRectF sourceRect = reqRect;
+
+        // Force 'PreserveAspectCrop' behavior on the requested region
+        if (reqRatio > targetRatio) {
+            // Requested region is too wide, center-crop the sides
+            qreal newWidth = reqRect.height() * targetRatio;
+            qreal xOffset = (reqRect.width() - newWidth) / 2.0;
+            sourceRect.setX(reqRect.x() + xOffset);
+            sourceRect.setWidth(newWidth);
+        } else if (reqRatio < targetRatio) {
+            // Requested region is too tall, center-crop the top/bottom
+            qreal newHeight = reqRect.width() / targetRatio;
+            qreal yOffset = (reqRect.height() - newHeight) / 2.0;
+            sourceRect.setY(reqRect.y() + yOffset);
+            sourceRect.setHeight(newHeight);
+        }
+
+        node->setSourceRect(sourceRect);
+	}
+
+	return node;
+}
+
+} // namespace ZShell::internal

Plugins/ZShell/Internal/wallpaperimage.hpp

@@ -0,0 +1,95 @@
+#pragma once
+
+#include <QQuickItem>
+#include <QImage>
+#include <QUrl>
+#include <QSGTexture>
+#include <QFutureWatcher>
+#include <QtQml/qqml.h>
+
+namespace ZShell::internal {
+
+class WallpaperImage : public QQuickItem {
+Q_OBJECT
+QML_NAMED_ELEMENT(WallpaperImage)
+Q_PROPERTY(QUrl source READ source WRITE setSource NOTIFY sourceChanged)
+Q_PROPERTY(QSize screenResolution READ screenResolution WRITE setScreenResolution NOTIFY screenResolutionChanged)
+Q_PROPERTY(qreal zoom READ zoom WRITE setZoom NOTIFY zoomChanged)
+
+Q_PROPERTY(qreal cropX READ cropX WRITE setCropX NOTIFY cropXChanged)
+Q_PROPERTY(qreal cropY READ cropY WRITE setCropY NOTIFY cropYChanged)
+Q_PROPERTY(qreal cropWidth READ cropWidth WRITE setCropWidth NOTIFY cropWidthChanged)
+Q_PROPERTY(qreal cropHeight READ cropHeight WRITE setCropHeight NOTIFY cropHeightChanged)
+
+public:
+explicit WallpaperImage(QQuickItem *parent = nullptr);
+~WallpaperImage() override;
+
+QUrl source() const {
+	return m_source;
+}
+void setSource(const QUrl &source);
+
+QSize screenResolution() const {
+	return m_screenResolution;
+}
+void setScreenResolution(const QSize &screenResolution);
+
+qreal zoom() const {
+	return m_zoom;
+}
+void setZoom(qreal zoom);
+
+qreal cropX() const {
+	return m_cropX;
+}
+void setCropX(qreal x);
+
+qreal cropY() const {
+	return m_cropY;
+}
+void setCropY(qreal y);
+
+qreal cropWidth() const {
+	return m_cropWidth;
+}
+void setCropWidth(qreal w);
+
+qreal cropHeight() const {
+	return m_cropHeight;
+}
+void setCropHeight(qreal h);
+
+protected:
+QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *updatePaintNodeData) override;
+
+signals:
+void sourceChanged();
+void screenResolutionChanged();
+void zoomChanged();
+void cropXChanged();
+void cropYChanged();
+void cropWidthChanged();
+void cropHeightChanged();
+
+private:
+void loadImage();
+void handleImageLoaded();
+QString getCacheFilePath() const;
+
+QUrl m_source;
+QSize m_screenResolution;
+qreal m_zoom = 1.0;
+
+qreal m_cropX = 0.0;
+qreal m_cropY = 0.0;
+qreal m_cropWidth = 1.0;
+qreal m_cropHeight = 1.0;
+
+QImage m_image;
+QSGTexture *m_texture = nullptr;
+bool m_textureDirty = false;
+QFutureWatcher<QImage> m_imageWatcher;
+};
+
+} // namespace ZShell::internal

Plugins/ZShell/writefile.cpp

@@ -1,131 +1,355 @@
 #include "writefile.hpp"
 
 #include <QtConcurrent/qtconcurrentrun.h>
+#include <QtCore/QCryptographicHash>
+#include <QtCore/QSaveFile>
+#include <QtGui/QImageReader>
+#include <QtQuick/qquickimageprovider.h>
 #include <QtQuick/qquickitemgrabresult.h>
 #include <QtQuick/qquickwindow.h>
-#include <qdir.h>
-#include <qfileinfo.h>
-#include <qfuturewatcher.h>
-#include <qqmlengine.h>
+
+#include <QDir>
+#include <QFile>
+#include <QFileInfo>
+#include <QFutureWatcher>
+#include <QImage>
+#include <QJSValue>
+#include <QQmlEngine>
+#include <QSize>
+#include <QVariant>
 
 namespace ZShell {
 
+// ============================================================
+// saveItem
+// ============================================================
+
 void ZShellIo::saveItem(QQuickItem* target, const QUrl& path) {
-    this->saveItem(target, path, QRect(), QJSValue(), QJSValue());
+	this->saveItem(target, path, QRect(), QJSValue(), QJSValue());
 }
 
 void ZShellIo::saveItem(QQuickItem* target, const QUrl& path, const QRect& rect) {
-    this->saveItem(target, path, rect, QJSValue(), QJSValue());
+	this->saveItem(target, path, rect, QJSValue(), QJSValue());
 }
 
 void ZShellIo::saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved) {
-    this->saveItem(target, path, QRect(), onSaved, QJSValue());
+	this->saveItem(target, path, QRect(), onSaved, QJSValue());
 }
 
 void ZShellIo::saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved, QJSValue onFailed) {
-    this->saveItem(target, path, QRect(), onSaved, onFailed);
+	this->saveItem(target, path, QRect(), onSaved, onFailed);
 }
 
 void ZShellIo::saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved) {
-    this->saveItem(target, path, rect, onSaved, QJSValue());
+	this->saveItem(target, path, rect, onSaved, QJSValue());
 }
 
-void ZShellIo::saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved, QJSValue onFailed) {
-    if (!target) {
-        qWarning() << "ZShellIo::saveItem: a target is required";
-        return;
-    }
+void ZShellIo::saveItem(
+	QQuickItem* target,
+	const QUrl& path,
+	const QRect& rect,
+	QJSValue onSaved,
+	QJSValue onFailed
+	) {
+	if (!target) {
+		qWarning() << "ZShellIo::saveItem: a target is required";
+		return;
+	}
 
-    if (!path.isLocalFile()) {
-        qWarning() << "ZShellIo::saveItem:" << path << "is not a local file";
-        return;
-    }
+	if (!path.isLocalFile()) {
+		qWarning() << "ZShellIo::saveItem:" << path << "is not a local file";
+		return;
+	}
 
-    if (!target->window()) {
-        qWarning() << "ZShellIo::saveItem: unable to save target" << target << "without a window";
-        return;
-    }
+	if (!target->window()) {
+		qWarning() << "ZShellIo::saveItem: unable to save target"
+		           << target
+		           << "without a window";
+		return;
+	}
 
-    auto scaledRect = rect;
-    const qreal scale = target->window()->devicePixelRatio();
-    if (rect.isValid() && !qFuzzyCompare(scale + 1.0, 2.0)) {
-        scaledRect =
-            QRectF(rect.left() * scale, rect.top() * scale, rect.width() * scale, rect.height() * scale).toRect();
-    }
+	auto scaledRect = rect;
 
-    const QSharedPointer<const QQuickItemGrabResult> grabResult = target->grabToImage();
+	const qreal scale = target->window()->devicePixelRatio();
 
-    QObject::connect(grabResult.data(), &QQuickItemGrabResult::ready, this,
-        [grabResult, scaledRect, path, onSaved, onFailed, this]() {
-            const auto future = QtConcurrent::run([=]() {
-                QImage image = grabResult->image();
+	if (rect.isValid() && !qFuzzyCompare(scale + 1.0, 2.0)) {
+		scaledRect = QRectF(
+			rect.left() * scale,
+			rect.top() * scale,
+			rect.width() * scale,
+			rect.height() * scale
+			).toRect();
+	}
 
-                if (scaledRect.isValid()) {
-                    image = image.copy(scaledRect);
-                }
+	const QSharedPointer<const QQuickItemGrabResult> grabResult =
+		target->grabToImage();
 
-                const QString file = path.toLocalFile();
-                const QString parent = QFileInfo(file).absolutePath();
-                return QDir().mkpath(parent) && image.save(file);
-            });
+	QObject::connect(
+		grabResult.data(),
+		&QQuickItemGrabResult::ready,
+		this,
+		[grabResult, scaledRect, path, onSaved, onFailed, this]() {
+			const auto future = QtConcurrent::run([grabResult, scaledRect, path]() {
+				QImage image = grabResult->image();
 
-            auto* watcher = new QFutureWatcher<bool>(this);
-            auto* engine = qmlEngine(this);
+				if (scaledRect.isValid()) {
+					image = image.copy(scaledRect);
+				}
 
-            QObject::connect(watcher, &QFutureWatcher<bool>::finished, this, [=]() {
-                if (watcher->result()) {
-                    if (onSaved.isCallable()) {
-                        onSaved.call(
-                            { QJSValue(path.toLocalFile()), engine->toScriptValue(QVariant::fromValue(path)) });
-                    }
-                } else {
-                    qWarning() << "ZShellIo::saveItem: failed to save" << path;
-                    if (onFailed.isCallable()) {
-                        onFailed.call({ engine->toScriptValue(QVariant::fromValue(path)) });
-                    }
-                }
-                watcher->deleteLater();
-            });
-            watcher->setFuture(future);
-        });
+				const QString file = path.toLocalFile();
+				const QString parent = QFileInfo(file).absolutePath();
+
+				QDir().mkpath(parent);
+
+				QSaveFile out(file);
+				if (!out.open(QIODevice::WriteOnly)) {
+					return false;
+				}
+
+				if (!image.save(&out, "PNG")) {
+					return false;
+				}
+
+				return out.commit();
+			});
+
+			auto* watcher = new QFutureWatcher<bool>(this);
+			auto* engine = qmlEngine(this);
+
+			QObject::connect(watcher, &QFutureWatcher<bool>::finished, this, [=]() {
+				if (watcher->result()) {
+					if (onSaved.isCallable() && engine) {
+						onSaved.call({
+							engine->toScriptValue(path.toLocalFile()),
+							engine->toScriptValue(path)
+						});
+					}
+				} else {
+					qWarning() << "ZShellIo::saveItem: failed to save" << path;
+					if (onFailed.isCallable() && engine) {
+						onFailed.call({
+							engine->toScriptValue(path)
+						});
+					}
+				}
+				watcher->deleteLater();
+			});
+
+			watcher->setFuture(future);
+		}
+		);
 }
 
+// ============================================================
+// cacheImage
+// ============================================================
+
+void ZShellIo::cacheImage(const QUrl& source, const QString& cacheDir) {
+	this->cacheImage(source, cacheDir, QJSValue(), QJSValue());
+}
+
+void ZShellIo::cacheImage(const QUrl& source, const QString& cacheDir, QJSValue onSaved) {
+	this->cacheImage(source, cacheDir, onSaved, QJSValue());
+}
+
+void ZShellIo::cacheImage(
+	const QUrl& source,
+	const QString& cacheDir,
+	QJSValue onSaved,
+	QJSValue onFailed
+	) {
+	if (cacheDir.isEmpty()) {
+		qWarning() << "ZShellIo::cacheImage: cacheDir is empty";
+		return;
+	}
+
+	QImage image;
+	if (!loadSourceImage(source, image)) {
+		qWarning() << "ZShellIo::cacheImage: failed to load source image" << source;
+		auto* engine = qmlEngine(this);
+		if (onFailed.isCallable() && engine) {
+			onFailed.call({
+					engine->toScriptValue(source),
+					engine->toScriptValue(cacheDir)
+				});
+		}
+		return;
+	}
+
+	const auto future = QtConcurrent::run([image, cacheDir]() -> QString {
+			if (image.isNull()) {
+				return QString();
+			}
+
+			const QImage normalized = image.convertToFormat(QImage::Format_RGBA8888);
+
+			const QByteArray bytes(
+				reinterpret_cast<const char*>(normalized.constBits()),
+				qsizetype(normalized.sizeInBytes())
+				);
+
+			const QByteArray digest =
+				QCryptographicHash::hash(bytes, QCryptographicHash::Sha256).toHex();
+
+			QDir dir(cacheDir);
+			if (!dir.exists() && !QDir().mkpath(cacheDir)) {
+				return QString();
+			}
+
+			const QString finalPath = dir.filePath(QString::fromLatin1(digest) + ".png");
+
+			if (QFile::exists(finalPath)) {
+				return finalPath;
+			}
+
+			QSaveFile out(finalPath);
+			if (!out.open(QIODevice::WriteOnly)) {
+				return QString();
+			}
+
+			if (!normalized.save(&out, "PNG")) {
+				return QString();
+			}
+
+			if (!out.commit()) {
+				return QString();
+			}
+
+			return finalPath;
+		});
+
+	auto* watcher = new QFutureWatcher<QString>(this);
+	auto* engine = qmlEngine(this);
+
+	QObject::connect(watcher, &QFutureWatcher<QString>::finished, this, [=]() {
+			const QString finalPath = watcher->result();
+
+			if (!finalPath.isEmpty()) {
+				if (onSaved.isCallable() && engine) {
+					onSaved.call({
+						engine->toScriptValue(finalPath),
+						engine->toScriptValue(QUrl::fromLocalFile(finalPath))
+					});
+				}
+			} else {
+				qWarning() << "ZShellIo::cacheImage: failed to cache" << source;
+				if (onFailed.isCallable() && engine) {
+					onFailed.call({
+						engine->toScriptValue(source),
+						engine->toScriptValue(cacheDir)
+					});
+				}
+			}
+
+			watcher->deleteLater();
+		});
+
+	watcher->setFuture(future);
+}
+
+// ============================================================
+// loadSourceImage
+// ============================================================
+
+bool ZShellIo::loadSourceImage(const QUrl& source, QImage& image) const {
+	image = QImage();
+
+	if (source.isLocalFile()) {
+		QImageReader reader(source.toLocalFile());
+		reader.setAutoTransform(true);
+		image = reader.read();
+		return !image.isNull();
+	}
+
+	if (source.scheme() == "image") {
+		auto* engine = qmlEngine(const_cast<ZShellIo*>(this));
+		if (!engine) {
+			qWarning() << "ZShellIo::loadSourceImage: no QQmlEngine";
+			return false;
+		}
+
+		const QString providerId = source.host();
+
+		const QString imageId =
+			source.path().startsWith('/')
+		? source.path().mid(1)
+		: source.path();
+
+		auto* providerBase = engine->imageProvider(providerId);
+		if (!providerBase) {
+			qWarning() << "ZShellIo::loadSourceImage: provider not found"
+			           << providerId;
+			return false;
+		}
+
+		auto* provider = dynamic_cast<QQuickImageProvider*>(providerBase);
+		if (!provider) {
+			qWarning() << "ZShellIo::loadSourceImage: provider is not a QQuickImageProvider"
+			           << providerId;
+			return false;
+		}
+
+		QSize size;
+
+		switch (provider->imageType()) {
+		case QQuickImageProvider::Image:
+			image = provider->requestImage(imageId, &size, QSize());
+			break;
+
+		case QQuickImageProvider::Pixmap:
+			image = provider->requestPixmap(imageId, &size, QSize()).toImage();
+			break;
+
+		default:
+			qWarning() << "ZShellIo::loadSourceImage: unsupported provider type"
+			           << providerId;
+			return false;
+		}
+
+		return !image.isNull();
+	}
+
+	qWarning() << "ZShellIo::loadSourceImage: unsupported source" << source;
+	return false;
+}
+
+// ============================================================
+// File ops
+// ============================================================
+
 bool ZShellIo::copyFile(const QUrl& source, const QUrl& target, bool overwrite) const {
-    if (!source.isLocalFile()) {
-        qWarning() << "ZShellIo::copyFile: source" << source << "is not a local file";
-        return false;
-    }
-    if (!target.isLocalFile()) {
-        qWarning() << "ZShellIo::copyFile: target" << target << "is not a local file";
-        return false;
-    }
+	if (!source.isLocalFile()) {
+		qWarning() << "ZShellIo::copyFile: source" << source << "is not a local file";
+		return false;
+	}
+	if (!target.isLocalFile()) {
+		qWarning() << "ZShellIo::copyFile: target" << target << "is not a local file";
+		return false;
+	}
 
-    if (overwrite) {
-        if (!QFile::remove(target.toLocalFile())) {
-            qWarning() << "ZShellIo::copyFile: overwrite was specified but failed to remove" << target.toLocalFile();
-            return false;
-        }
-    }
+	if (overwrite) {
+		QFile::remove(target.toLocalFile());
+	}
 
-    return QFile::copy(source.toLocalFile(), target.toLocalFile());
+	return QFile::copy(source.toLocalFile(), target.toLocalFile());
 }
 
 bool ZShellIo::deleteFile(const QUrl& path) const {
-    if (!path.isLocalFile()) {
-        qWarning() << "ZShellIo::deleteFile: path" << path << "is not a local file";
-        return false;
-    }
+	if (!path.isLocalFile()) {
+		qWarning() << "ZShellIo::deleteFile: path" << path << "is not a local file";
+		return false;
+	}
 
-    return QFile::remove(path.toLocalFile());
+	return QFile::remove(path.toLocalFile());
 }
 
 QString ZShellIo::toLocalFile(const QUrl& url) const {
-    if (!url.isLocalFile()) {
-        qWarning() << "ZShellIo::toLocalFile: given url is not a local file" << url;
-        return QString();
-    }
+	if (!url.isLocalFile()) {
+		qWarning() << "ZShellIo::toLocalFile: given url is not a local file" << url;
+		return QString();
+	}
 
-    return url.toLocalFile();
+	return url.toLocalFile();
 }
 
 } // namespace ZShell

Plugins/ZShell/writefile.hpp

@@ -1,31 +1,40 @@
 #pragma once
 
 #include <QtQuick/qquickitem.h>
-#include <qobject.h>
+#include <QImage>
+#include <QJSValue>
+#include <QObject>
 #include <qqmlintegration.h>
+#include <QUrl>
 
 namespace ZShell {
 
 class ZShellIo : public QObject {
 
-    Q_OBJECT
-    QML_ELEMENT
-    QML_SINGLETON
+Q_OBJECT
+QML_ELEMENT
+QML_SINGLETON
 
 public:
-    // clang-format off
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path);
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect);
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved);
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved, QJSValue onFailed);
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved);
-    Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved, QJSValue onFailed);
-    // clang-format on
+// clang-format off
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path);
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect);
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved);
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, QJSValue onSaved, QJSValue onFailed);
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved);
+Q_INVOKABLE void saveItem(QQuickItem* target, const QUrl& path, const QRect& rect, QJSValue onSaved, QJSValue onFailed);
 
-    Q_INVOKABLE bool copyFile(const QUrl& source, const QUrl& target, bool overwrite = true) const;
-    Q_INVOKABLE bool deleteFile(const QUrl& path) const;
-    Q_INVOKABLE QString toLocalFile(const QUrl& url) const;
+Q_INVOKABLE void cacheImage(const QUrl& source, const QString& cacheDir);
+Q_INVOKABLE void cacheImage(const QUrl& source, const QString& cacheDir, QJSValue onSaved);
+Q_INVOKABLE void cacheImage(const QUrl& source, const QString& cacheDir, QJSValue onSaved, QJSValue onFailed);
+// clang-format on
+
+Q_INVOKABLE bool copyFile(const QUrl& source, const QUrl& target, bool overwrite = true) const;
+Q_INVOKABLE bool deleteFile(const QUrl& path) const;
+Q_INVOKABLE QString toLocalFile(const QUrl& url) const;
+
+private:
+bool loadSourceImage(const QUrl& source, QImage& image) const;
 };
 
-
 } // namespace ZShell

README.md

@@ -216,12 +216,56 @@ Action-driven flows (`>` prefix by default) include calculator, wallpaper picker
 
 `zshell-cli` provides these subcommands:
 
-- `shell` - start/kill/log/IPC calls
-- `screenshot` - open area picker (`start`, `start-freeze`)
-- `wallpaper` - set wallpaper + generate lockscreen blur image
-- `scheme` - generate and apply dynamic/preset color schemes
+### `shell` — daemon management
 
-Note: `cli/src/zshell/subcommands/scheme.py` uses Jinja2 templating for `~/.config/zshell/templates` rendering.
+| Command | Description |
+|---------|-------------|
+| `start` | Start the shell daemon (pass `--no-daemon` to run in foreground) |
+| `kill`  | Kill the running shell daemon |
+| `restart` | Kill then restart the daemon |
+| `lock`  | Lock the session via IPC |
+| `show`  | Show the shell window via IPC |
+| `log`   | Print daemon logs |
+
+### `scheme` — color scheme generation
+
+```
+Usage: zshell-cli scheme generate [--preset <scheme>:<variant>] [--accent <accent>]
+                                   [--mode <dark|light>] [--image-path <path>]
+
+Generate a color scheme from a wallpaper image (Material You) or from
+a built-in preset.
+
+Preset selection:
+  --preset <scheme>:<variant>    Pick a built-in scheme (e.g. catppuccin:mocha)
+  --accent <name>                Accent color for schemes that support it
+                                   (catppuccin accepts: blue, green, mauve,
+                                   peach, pink, red, rosewater, etc.)
+  --mode <dark|light>            Override variant mode
+
+  If variant has both dark and light modes, the mode is auto-detected from
+  the current system or config preference.
+
+  List all available presets:
+    zshell-cli scheme list-presets         # human-readable
+    zshell-cli scheme list-presets --json  # machine-readable (QML UI)
+
+  Examples:
+    zshell-cli scheme generate --preset gruvbox:medium
+    zshell-cli scheme generate --preset catppuccin:mocha --accent green
+    zshell-cli scheme generate --preset everforest:medium --mode light
+```
+
+Note: Template rendering (Jinja2) applies generated colors to `~/.config/zshell/templates/*`.
+
+### `screenshot` — area picker
+
+- `start` — open interactive area picker
+- `start-freeze` — freeze screen then pick
+
+### `wallpaper` — wallpaper management
+
+- Set wallpaper and generate lockscreen blur background
 
 ## Greeter
 

cli/pyproject.toml

@@ -9,6 +9,7 @@ version = "0.1.0"
 dependencies = [
 	"typer",
 	"pillow",
+	"jinja2",
 	"materialyoucolor"
 ]
 
@@ -25,3 +26,7 @@ only-include = [
 
 [tool.ruff]
 line-length = 120
+
+[tool.pytest.ini_options]
+testpaths = ["tests"]
+pythonpath = ["src"]

cli/src/zshell/__init__.py

@@ -1,15 +1,52 @@
 from __future__ import annotations
-import typer
-from zshell.subcommands import shell, scheme, screenshot, wallpaper
+import sys
+from pathlib import Path
 
-app = typer.Typer()
+import typer
+from typer._completion_shared import install, _get_shell_name
+from zshell.subcommands import shell, scheme, screenshot, wallpaper, record
+
+app = typer.Typer(name="zshell-cli", add_completion=False)
 
 app.add_typer(shell.app, name="shell")
 app.add_typer(scheme.app, name="scheme")
 app.add_typer(screenshot.app, name="screenshot")
 app.add_typer(wallpaper.app, name="wallpaper")
-# app.add_typer(preset.app, name="preset")
+app.add_typer(record.app, name="record")
+
+
+def _completion_installed() -> bool:
+    shell = _get_shell_name()
+    match shell:
+        case "zsh":
+            return (Path.home() / ".zfunc" / "_zshell-cli").exists()
+        case "bash":
+            return (Path.home() / ".bash_completions" / "zshell-cli.sh").exists()
+        case "fish":
+            return (Path.home() / ".config" / "fish" / "completions" / "zshell-cli.fish").exists()
+    return False
+
+
+def _install_completion() -> None:
+    if _completion_installed():
+        print("zshell-cli: Shell completion already installed.")
+        raise typer.Exit()
+    shell = _get_shell_name()
+    if shell is None:
+        print("zshell-cli: Unable to detect shell type.", file=sys.stderr)
+        raise typer.Exit(code=1)
+    try:
+        _, path = install(prog_name="zshell-cli")
+        print(f"zshell-cli: Shell completion installed ({shell}: {path})")
+        print("zshell-cli: Restart your shell or source the file to enable tab-completion.")
+    except Exception:
+        pass
 
 
 def main() -> None:
+    if "--install-autocomplete" in sys.argv:
+        _install_completion()
+        return
+    if sys.stdout.isatty() and not _completion_installed():
+        print("zshell-cli: Tip: run with --install-autocomplete for tab completion.", file=sys.stderr)
     app()

cli/src/zshell/assets/schemes/catppuccin/catppuccin.py

@@ -1,544 +0,0 @@
-_data = {
-    "id": "catppuccin",
-    "name": "Catppuccin",
-    "version": "1.0.0",
-    "author": "Catppuccin Org",
-    "description": "Soothing pastel theme for the high-spirited!",
-    "dark": {},
-    "light": {},
-    "variants": {
-        "type": "multi",
-        "defaults": {
-            "dark": {"m3flavor": "mocha", "m3accent": "mauve"},
-            "light": {"m3flavor": "latte", "m3accent": "mauve"},
-        },
-        "flavors": [
-            {
-                "id": "latte",
-                "name": "Latte",
-                "light": {
-                    "m3surface": "#ccd0da",
-                    "m3surfaceText": "#4c4f69",
-                    "m3surfaceVariant": "#eff1f5",
-                    "m3surfaceVariantText": "#6c6f85",
-                    "m3background": "#eff1f5",
-                    "m3backgroundText": "#4c4f69",
-                    "m3outline": "#9ca0b0",
-                    "m3surfaceContainer": "#eff1f5",
-                    "m3surfaceContainerHigh": "#e6e9ef",
-                    "m3surfaceContainerHighest": "#dce0e8",
-                    "m3error": "#d20f39",
-                    "m3warning": "#fe640b",
-                    "m3info": "#1e66f5",
-                },
-            },
-            {
-                "id": "frappe",
-                "name": "Frappé",
-                "dark": {
-                    "m3surface": "#414559",
-                    "m3surfaceText": "#c6d0f5",
-                    "m3surfaceVariant": "#303446",
-                    "m3surfaceVariantText": "#a5adce",
-                    "m3background": "#303446",
-                    "m3backgroundText": "#c6d0f5",
-                    "m3outline": "#737994",
-                    "m3surfaceContainer": "#303446",
-                    "m3surfaceContainerHigh": "#292c3c",
-                    "m3surfaceContainerHighest": "#232634",
-                    "m3error": "#e78284",
-                    "m3warning": "#ef9f76",
-                    "m3info": "#8caaee",
-                },
-            },
-            {
-                "id": "macchiato",
-                "name": "Macchiato",
-                "dark": {
-                    "m3surface": "#363a4f",
-                    "m3surfaceText": "#cad3f5",
-                    "m3surfaceVariant": "#24273a",
-                    "m3surfaceVariantText": "#a5adcb",
-                    "m3background": "#24273a",
-                    "m3backgroundText": "#cad3f5",
-                    "m3outline": "#6e738d",
-                    "m3surfaceContainer": "#24273a",
-                    "m3surfaceContainerHigh": "#1e2030",
-                    "m3surfaceContainerHighest": "#181926",
-                    "m3error": "#ed8796",
-                    "m3warning": "#f5a97f",
-                    "m3info": "#8aadf4",
-                },
-            },
-            {
-                "id": "mocha",
-                "name": "Mocha",
-                "dark": {
-                    "m3surface": "#313244",
-                    "m3surfaceText": "#cdd6f4",
-                    "m3surfaceVariant": "#1e1e2e",
-                    "m3surfaceVariantText": "#a6adc8",
-                    "m3background": "#1e1e2e",
-                    "m3backgroundText": "#cdd6f4",
-                    "m3outline": "#6c7086",
-                    "m3surfaceContainer": "#1e1e2e",
-                    "m3surfaceContainerHigh": "#181825",
-                    "m3surfaceContainerHighest": "#11111b",
-                    "m3error": "#f38ba8",
-                    "m3warning": "#fab387",
-                    "m3info": "#89b4fa",
-                },
-            },
-        ],
-        "accents": [
-            {
-                "id": "rosewater",
-                "name": "Rosewater",
-                "latte": {
-                    "m3primary": "#dc8a78",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#e1a99d",
-                    "m3secondary": "#d8c7c4",
-                    "m3surfaceTint": "#e1a99d",
-                },
-                "frappe": {
-                    "m3primary": "#f2d5cf",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b8a5a6",
-                    "m3secondary": "#a2748b",
-                    "m3surfaceTint": "#b8a5a6",
-                },
-                "macchiato": {
-                    "m3primary": "#f4dbd6",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b6a6a7",
-                    "m3secondary": "#9f6f8d",
-                    "m3surfaceTint": "#b6a6a7",
-                },
-                "mocha": {
-                    "m3primary": "#f5e0dc",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b5a6a8",
-                    "m3secondary": "#9d6d87",
-                    "m3surfaceTint": "#b5a6a8",
-                },
-            },
-            {
-                "id": "flamingo",
-                "name": "Flamingo",
-                "latte": {
-                    "m3primary": "#dd7878",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#e29c9d",
-                    "m3secondary": "#d7c3c4",
-                    "m3surfaceTint": "#e29c9d",
-                },
-                "frappe": {
-                    "m3primary": "#eebebe",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b5949a",
-                    "m3secondary": "#9d6b80",
-                    "m3surfaceTint": "#b5949a",
-                },
-                "macchiato": {
-                    "m3primary": "#f0c6c6",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b3979c",
-                    "m3secondary": "#996780",
-                    "m3surfaceTint": "#b3979c",
-                },
-                "mocha": {
-                    "m3primary": "#f2cdcd",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b3999e",
-                    "m3secondary": "#98667c",
-                    "m3surfaceTint": "#b3999e",
-                },
-            },
-            {
-                "id": "pink",
-                "name": "Pink",
-                "latte": {
-                    "m3primary": "#ea76cb",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#eb9bd7",
-                    "m3secondary": "#d9c7d5",
-                    "m3surfaceTint": "#eb9bd7",
-                },
-                "frappe": {
-                    "m3primary": "#f4b8e4",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b990b5",
-                    "m3secondary": "#996e9e",
-                    "m3surfaceTint": "#b990b5",
-                },
-                "macchiato": {
-                    "m3primary": "#f5bde6",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b791b2",
-                    "m3secondary": "#95689a",
-                    "m3surfaceTint": "#b791b2",
-                },
-                "mocha": {
-                    "m3primary": "#f5c2e7",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b591b0",
-                    "m3secondary": "#966597",
-                    "m3surfaceTint": "#b591b0",
-                },
-            },
-            {
-                "id": "mauve",
-                "name": "Mauve",
-                "latte": {
-                    "m3primary": "#8839ef",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#a670f1",
-                    "m3secondary": "#c2b8d0",
-                    "m3surfaceTint": "#a670f1",
-                },
-                "frappe": {
-                    "m3primary": "#ca9ee6",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#9c7eb6",
-                    "m3secondary": "#7d6799",
-                    "m3surfaceTint": "#9c7eb6",
-                },
-                "macchiato": {
-                    "m3primary": "#c6a0f6",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#967cbe",
-                    "m3secondary": "#766597",
-                    "m3surfaceTint": "#967cbe",
-                },
-                "mocha": {
-                    "m3primary": "#cba6f7",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#977ebb",
-                    "m3secondary": "#756294",
-                    "m3surfaceTint": "#977ebb",
-                },
-            },
-            {
-                "id": "red",
-                "name": "Red",
-                "latte": {
-                    "m3primary": "#d20f39",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#da5371",
-                    "m3secondary": "#c0a0a8",
-                    "m3surfaceTint": "#da5371",
-                },
-                "frappe": {
-                    "m3primary": "#e78284",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b06a72",
-                    "m3secondary": "#8b5d66",
-                    "m3surfaceTint": "#b06a72",
-                },
-                "macchiato": {
-                    "m3primary": "#ed8796",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b16b7a",
-                    "m3secondary": "#865a69",
-                    "m3surfaceTint": "#b16b7a",
-                },
-                "mocha": {
-                    "m3primary": "#f38ba8",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b46b84",
-                    "m3secondary": "#85596b",
-                    "m3surfaceTint": "#b46b84",
-                },
-            },
-            {
-                "id": "maroon",
-                "name": "Maroon",
-                "latte": {
-                    "m3primary": "#e64553",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#e87883",
-                    "m3secondary": "#cfb7ba",
-                    "m3surfaceTint": "#e87883",
-                },
-                "frappe": {
-                    "m3primary": "#ea999c",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b27a83",
-                    "m3secondary": "#92626f",
-                    "m3surfaceTint": "#b27a83",
-                },
-                "macchiato": {
-                    "m3primary": "#ee99a0",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b27781",
-                    "m3secondary": "#8c5e6c",
-                    "m3surfaceTint": "#b27781",
-                },
-                "mocha": {
-                    "m3primary": "#eba0ac",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#ae7987",
-                    "m3secondary": "#895b6c",
-                    "m3surfaceTint": "#ae7987",
-                },
-            },
-            {
-                "id": "peach",
-                "name": "Peach",
-                "latte": {
-                    "m3primary": "#fe640b",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#f98e51",
-                    "m3secondary": "#c9b7ad",
-                    "m3surfaceTint": "#f98e51",
-                },
-                "frappe": {
-                    "m3primary": "#ef9f76",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#b67f68",
-                    "m3secondary": "#8f6a5f",
-                    "m3surfaceTint": "#b67f68",
-                },
-                "macchiato": {
-                    "m3primary": "#f5a97f",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b7836a",
-                    "m3secondary": "#8c695e",
-                    "m3surfaceTint": "#b7836a",
-                },
-                "mocha": {
-                    "m3primary": "#fab387",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b8876d",
-                    "m3secondary": "#8b6a5d",
-                    "m3surfaceTint": "#b8876d",
-                },
-            },
-            {
-                "id": "yellow",
-                "name": "Yellow",
-                "latte": {
-                    "m3primary": "#df8e1d",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#e4ac5d",
-                    "m3secondary": "#c6baaa",
-                    "m3surfaceTint": "#e4ac5d",
-                },
-                "frappe": {
-                    "m3primary": "#e5c890",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#af9b7a",
-                    "m3secondary": "#948062",
-                    "m3surfaceTint": "#af9b7a",
-                },
-                "macchiato": {
-                    "m3primary": "#eed49f",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#b2a181",
-                    "m3secondary": "#947e62",
-                    "m3surfaceTint": "#b2a181",
-                },
-                "mocha": {
-                    "m3primary": "#f9e2af",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#b8a889",
-                    "m3secondary": "#978265",
-                    "m3surfaceTint": "#b8a889",
-                },
-            },
-            {
-                "id": "green",
-                "name": "Green",
-                "latte": {
-                    "m3primary": "#40a02b",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#74b867",
-                    "m3secondary": "#9fbd9b",
-                    "m3surfaceTint": "#74b867",
-                },
-                "frappe": {
-                    "m3primary": "#a6d189",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#83a275",
-                    "m3secondary": "#648e5e",
-                    "m3surfaceTint": "#83a275",
-                },
-                "macchiato": {
-                    "m3primary": "#a6da95",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#80a57a",
-                    "m3secondary": "#5c8a61",
-                    "m3surfaceTint": "#80a57a",
-                },
-                "mocha": {
-                    "m3primary": "#a6e3a1",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#7ea87f",
-                    "m3secondary": "#5b8964",
-                    "m3surfaceTint": "#7ea87f",
-                },
-            },
-            {
-                "id": "teal",
-                "name": "Teal",
-                "latte": {
-                    "m3primary": "#179299",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#57aeb4",
-                    "m3secondary": "#93b4b7",
-                    "m3surfaceTint": "#57aeb4",
-                },
-                "frappe": {
-                    "m3primary": "#81c8be",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#699b9a",
-                    "m3secondary": "#588084",
-                    "m3surfaceTint": "#699b9a",
-                },
-                "macchiato": {
-                    "m3primary": "#8bd5ca",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#6da29f",
-                    "m3secondary": "#577e83",
-                    "m3surfaceTint": "#6da29f",
-                },
-                "mocha": {
-                    "m3primary": "#94e2d5",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#71a8a4",
-                    "m3secondary": "#588284",
-                    "m3surfaceTint": "#71a8a4",
-                },
-            },
-            {
-                "id": "sky",
-                "name": "Sky",
-                "latte": {
-                    "m3primary": "#04a5e5",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#4abcea",
-                    "m3secondary": "#a4b9c2",
-                    "m3surfaceTint": "#4abcea",
-                },
-                "frappe": {
-                    "m3primary": "#99d1db",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#79a2af",
-                    "m3secondary": "#628494",
-                    "m3surfaceTint": "#79a2af",
-                },
-                "macchiato": {
-                    "m3primary": "#91d7e3",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#71a3b0",
-                    "m3secondary": "#5e7e8c",
-                    "m3surfaceTint": "#71a3b0",
-                },
-                "mocha": {
-                    "m3primary": "#89dceb",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#69a3b3",
-                    "m3secondary": "#5a7b88",
-                    "m3surfaceTint": "#69a3b3",
-                },
-            },
-            {
-                "id": "sapphire",
-                "name": "Sapphire",
-                "latte": {
-                    "m3primary": "#209fb5",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#5db8c8",
-                    "m3secondary": "#9eb9be",
-                    "m3surfaceTint": "#5db8c8",
-                },
-                "frappe": {
-                    "m3primary": "#85c1dc",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#6b96af",
-                    "m3secondary": "#5e7b8e",
-                    "m3surfaceTint": "#6b96af",
-                },
-                "macchiato": {
-                    "m3primary": "#7dc4e4",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#6396b1",
-                    "m3secondary": "#5a7486",
-                    "m3surfaceTint": "#6396b1",
-                },
-                "mocha": {
-                    "m3primary": "#74c7ec",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#5a95b4",
-                    "m3secondary": "#567080",
-                    "m3surfaceTint": "#5a95b4",
-                },
-            },
-            {
-                "id": "blue",
-                "name": "Blue",
-                "latte": {
-                    "m3primary": "#1e66f5",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#5c90f5",
-                    "m3secondary": "#b1bacb",
-                    "m3surfaceTint": "#5c90f5",
-                },
-                "frappe": {
-                    "m3primary": "#8caaee",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#7086bc",
-                    "m3secondary": "#637195",
-                    "m3surfaceTint": "#7086bc",
-                },
-                "macchiato": {
-                    "m3primary": "#8aadf4",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#6c85bc",
-                    "m3secondary": "#5f6d8f",
-                    "m3surfaceTint": "#6c85bc",
-                },
-                "mocha": {
-                    "m3primary": "#89b4fa",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#6987bd",
-                    "m3secondary": "#5d6c8b",
-                    "m3surfaceTint": "#6987bd",
-                },
-            },
-            {
-                "id": "lavender",
-                "name": "Lavender",
-                "latte": {
-                    "m3primary": "#7287fd",
-                    "m3primaryText": "#eff1f5",
-                    "m3primaryContainer": "#97a7fb",
-                    "m3secondary": "#cdcfdd",
-                    "m3surfaceTint": "#97a7fb",
-                },
-                "frappe": {
-                    "m3primary": "#babbf1",
-                    "m3primaryText": "#303446",
-                    "m3primaryContainer": "#9192be",
-                    "m3secondary": "#7175a1",
-                    "m3surfaceTint": "#9192be",
-                },
-                "macchiato": {
-                    "m3primary": "#b7bdf8",
-                    "m3primaryText": "#24273a",
-                    "m3primaryContainer": "#8b91bf",
-                    "m3secondary": "#6b709d",
-                    "m3surfaceTint": "#8b91bf",
-                },
-                "mocha": {
-                    "m3primary": "#b4befe",
-                    "m3primaryText": "#1e1e2e",
-                    "m3primaryContainer": "#878ec0",
-                    "m3secondary": "#676d99",
-                    "m3surfaceTint": "#878ec0",
-                },
-            },
-        ],
-    },
-}

cli/src/zshell/assets/schemes/catppuccin/frappe/blue-dark.txt

@@ -0,0 +1,110 @@
+primary_paletteKeyColor ca9ee6
+secondary_paletteKeyColor 7d6799
+tertiary_paletteKeyColor f4b8e4
+neutral_paletteKeyColor 414559
+neutral_variant_paletteKeyColor 303446
+background 303446
+onBackground c6d0f5
+surface 414559
+surfaceDim 414559
+surfaceBright 55596f
+surfaceContainerLowest 292c3c
+surfaceContainerLow 363a50
+surfaceContainer 303446
+surfaceContainerHigh 292c3c
+surfaceContainerHighest 232634
+onSurface c6d0f5
+surfaceVariant 303446
+onSurfaceVariant a5adce
+inverseSurface c6d0f5
+inverseOnSurface 414559
+outline 737994
+outlineVariant 51576d
+shadow 000000
+scrim 000000
+surfaceTint 7086bc
+primary 8caaee
+onPrimary 303446
+primaryContainer 7086bc
+onPrimaryContainer ffffff
+inversePrimary 6c4f94
+secondary 637195
+onSecondary ffffff
+secondaryContainer 544874
+onSecondaryContainer cbbae8
+tertiary f4b8e4
+onTertiary 4e1e44
+tertiaryContainer bb7da9
+onTertiaryContainer 000000
+error e78284
+onError 4a0019
+errorContainer 8c2643
+onErrorContainer ffb3c6
+primaryFixed e8d4ff
+primaryFixedDim ca9ee6
+onPrimaryFixed 2a1040
+onPrimaryFixedVariant 544874
+secondaryFixed e2d4ff
+secondaryFixedDim 7d6799
+onSecondaryFixed 1a0a28
+onSecondaryFixedVariant 3a2850
+tertiaryFixed ffd7f5
+tertiaryFixedDim f4b8e4
+onTertiaryFixed 330832
+onTertiaryFixedVariant 653661
+term0 414559
+term1 e78284
+term2 a6d189
+term3 e5c890
+term4 8caaee
+term5 f4b8e4
+term6 81c8be
+term7 c6d0f5
+term8 51576d
+term9 e78284
+term10 a6d189
+term11 e5c890
+term12 8caaee
+term13 f4b8e4
+term14 81c8be
+term15 a5adce
+rosewater f2d5cf
+flamingo eebebe
+pink f4b8e4
+mauve ca9ee6
+red e78284
+maroon ea999c
+peach ef9f76
+yellow e5c890
+green a6d189
+teal 81c8be
+sky 99d1db
+sapphire 85c1dc
+blue 8caaee
+lavender babbf1
+klink 6685d1
+klinkSelection 6585d1
+kvisited 7276dd
+kvisitedSelection 7276dd
+knegative 8e70ff
+knegativeSelection 8e70ff
+kneutral c794ff
+kneutralSelection c794ff
+kpositive 54afff
+kpositiveSelection 54afff
+text c6d0f5
+subtext1 a5adce
+subtext0 7a7f9e
+overlay2 737994
+overlay1 585b70
+overlay0 45475a
+surface2 414559
+surface1 363a50
+surface0 303446
+base 303446
+mantle 292c3c
+crust 232634
+success a6d189
+onSuccess 303446
+successContainer 3b5e3b
+onSuccessContainer b6f0b1