Initial commit for submenu popouts, unfinished

Config/Config.qml

@@ -242,7 +242,6 @@ Singleton {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
 			showNotifContent: lock.showNotifContent,
-			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {

Config/LockConf.qml

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

Drawers/Panels.qml

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

Drawers/Windows.qml

@@ -64,7 +64,7 @@ Variants {
 
 				height: win.height - bar.implicitHeight - Config.barConfig.border
 				intersection: Intersection.Xor
-				regions: popoutRegions.instances
+				regions: [...popoutRegions.instances, ...subMenuRegions.instances]
 				width: win.width - Config.barConfig.border * 2
 				x: Config.barConfig.border
 				y: bar.implicitHeight
@@ -93,6 +93,22 @@ Variants {
 				}
 			}
 
+			Variants {
+				id: subMenuRegions
+
+				model: panels.traySubmenus.children
+
+				Region {
+					required property Item modelData
+
+					height: modelData.height
+					intersection: Intersection.Subtract
+					width: modelData.width
+					x: modelData.x + panels.traySubmenus.x + Config.barConfig.border
+					y: modelData.y + panels.traySubmenus.y + bar.implicitHeight
+				}
+			}
+
 			HyprlandFocusGrab {
 				id: focusGrab
 
@@ -302,6 +318,18 @@ Variants {
 					panel: panels.drawing
 					radius: Appearance.rounding.normal
 				}
+
+				Repeater {
+					model: panels.traySubmenus.children
+
+					PanelBg {
+						required property Item modelData
+
+						deformAmount: 0.1
+						panel: modelData
+						radius: 20 * Appearance.rounding.scale
+					}
+				}
 			}
 
 			Drawing {

Greeter/GreeterState.qml

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

Helpers/UPower.qml

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

Modules/Content.qml

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

Modules/Lock/NotifGroup.qml

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

Modules/Lock/Pam.qml

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

Modules/PopoutState.qml

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

Modules/Settings/Categories/Background.qml

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

Modules/Settings/Categories/Lockscreen.qml

@@ -50,15 +50,6 @@ SettingsPage {
 		Separator {
 		}
 
-		SettingSwitch {
-			name: "Show notification icon"
-			object: Config.lock
-			setting: "showNotifIcon"
-		}
-
-		Separator {
-		}
-
 		SettingSpinBox {
 			min: 0
 			name: "Blur amount"

Modules/Settings/Content.qml

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

Modules/Settings/Controls/WallpaperCropper.qml

@@ -1,260 +1,113 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Controls
 import Quickshell
-import Quickshell.Hyprland
-import ZShell.Internal
 import qs.Config
 import qs.Components
 import qs.Helpers
 
 Item {
-	id: wrapper
+	id: root
 
-	property bool changesMade: false
+	Image {
+		id: imageView
 
-	signal requestCrop
+		property real displayH: paintedHeight
-
+		property real displayW: paintedWidth
-	Layout.fillWidth: true
+		property real displayX: (width - paintedWidth) * 0.5
-	Layout.preferredHeight: 400
+		property real displayY: (height - paintedHeight) * 0.5
-
+		property real scaleX: sourceW / displayW
-	IconButton {
+		property real scaleY: sourceH / displayH
-		anchors.margins: Appearance.padding.normal
+		property real sourceH: Quickshell.screens[0].height
-		anchors.right: parent.right
+		property real sourceW: Quickshell.screens[0].width
-		anchors.top: parent.top
-		icon: "check"
-		opacity: wrapper.changesMade ? 1 : 0
-		scale: wrapper.changesMade ? 1 : 0
-		z: 2
-
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
-		}
-
-		onClicked: {
-			wrapper.requestCrop();
-			wrapper.changesMade = false;
-		}
-	}
-
-	RowLayout {
-		id: root
 
 		anchors.fill: parent
-		spacing: Appearance.spacing.normal
+		fillMode: Image.PreserveAspectFit
+		smooth: true
+		source: Wallpapers.current
+	}
 
-		Repeater {
+	Item {
-			model: ScriptModel {
+		id: overlay
-				values: [...Quickshell.screens].sort((a, b) => {
+
-					return a.x - b.x;
+		clip: true
-				})
+		height: imageView.displayH
+		width: imageView.displayW
+		x: imageView.displayX
+		y: imageView.displayY
+
+		CustomRect {
+			id: cropRect
+
+			property real aspectRatio: Quickshell.screens[0].width / Quickshell.screens[0].height
+			readonly property rect sourceRect: Qt.rect(x * imageView.scaleX, y * imageView.scaleY, width * imageView.scaleX, height * imageView.scaleY)
+			property real zoom: Config.background.zoom
+
+			function clampToBounds() {
+				x = Math.max(0, Math.min(x, overlay.width - width));
+
+				y = Math.max(0, Math.min(y, overlay.height - height));
 			}
 
-			Item {
+			border.color: DynamicColors.palette.m3primary
-				id: delegate
+			border.width: 2
+			color: DynamicColors.tPalette.m3primary
+			height: width / aspectRatio
+			radius: Appearance.rounding.small
+			visible: imageView.status === Image.Ready
+			width: Math.min(overlay.width / zoom, overlay.height * aspectRatio / zoom)
+			x: Config.background.sourceClipX / imageView.scaleX
+			y: Config.background.sourceClipY / imageView.scaleY
+		}
 
-				required property ShellScreen modelData
+		MouseArea {
+			function updateCrop(mouseX, mouseY) {
+				let nx = mouseX - cropRect.width * 0.5;
+				let ny = mouseY - cropRect.height * 0.5;
 
-				function applyCrop(): void {
+				nx = Math.max(0, Math.min(nx, overlay.width - cropRect.width));
-					const croprect = cropRect.mapToItem(scaledImg, 0, 0, cropRect.width, cropRect.height);
-					const upscaledRect = Qt.rect((croprect.x - cropRect.imageX) / scaledImg.paintedWidth, (croprect.y - cropRect.imageY) / scaledImg.paintedHeight, croprect.width / scaledImg.paintedWidth, croprect.height / scaledImg.paintedHeight);
-					Wallpapers.setCrop(delegate.modelData.name, upscaledRect, croprect, cropRect.zoom);
-				}
 
-				function zoomClipRect(zoom: real): void {
+				ny = Math.max(0, Math.min(ny, overlay.height - cropRect.height));
-					let oldCenterX = cropRect.x + cropRect.width * 0.5;
-					let oldCenterY = cropRect.y + cropRect.height * 0.5;
 
-					cropRect.zoom = zoom;
+				cropRect.x = nx;
+				cropRect.y = ny;
+			}
 
-					cropRect.x = oldCenterX - cropRect.width * 0.5;
+			anchors.fill: parent
-					cropRect.y = oldCenterY - cropRect.height * 0.5;
+			hoverEnabled: true
+			preventStealing: true
 
-					cropRect.clampToBounds();
+			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;
 
-				Layout.fillHeight: true
+				if (wheel.angleDelta.y > 0)
-				Layout.fillWidth: true
+					cropRect.zoom *= 1.1;
+				else
+					cropRect.zoom /= 1.1;
 
-				Connections {
+				cropRect.zoom = Math.max(1.0, Math.min(cropRect.zoom, 10.0));
-					function onRequestCrop(): void {
+				Config.background.zoom = cropRect.zoom;
-						delegate.applyCrop();
-					}
 
-					target: wrapper
+				cropRect.x = oldCenterX - cropRect.width * 0.5;
-				}
+				cropRect.y = oldCenterY - cropRect.height * 0.5;
 
-				RowLayout {
+				cropRect.clampToBounds();
-					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: cropRect.zoom
-
-						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) {
-							scaledImg.displayData = Wallpapers.getCrop(delegate.modelData.name);
-							cropRect.zoom = Wallpapers.getCrop(delegate.modelData.name).zoom;
-							cropRect.restoreFromData();
-						}
-					}
-					onSourceChanged: cropRect.clampToBounds()
-					onStatusChanged: if (scaledImg.status == Image.Ready)
-						cropRect.clampToBounds()
-
-					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
-					}
-
-					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: scaledImg.displayData.zoom
-
-						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 = scaledImg.displayData;
-
-							if (data && data.scaledX !== 0 || data.scaledY !== 0 || data.scaledWidth !== 0 || data.scaledHeight !== 0) {
-								x = data.scaledX;
-								y = data.scaledY;
-
-								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: clampToBounds()
-						onHeightChanged: clampToBounds()
-						onWidthChanged: clampToBounds()
-					}
-
-					MouseArea {
-						id: mouse
-
-						function updateCrop(mouseX, mouseY) {
-							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

@@ -23,13 +23,26 @@ GridView {
 	delegate: Item {
 		required property int index
 		readonly property bool isCurrent: modelData && modelData.path === Wallpapers.actualCurrent
-		readonly property real itemMargin: Appearance.spacing.normal
+		readonly property real itemMargin: Appearance.spacing.normal / 2
-		readonly property real itemRadius: Appearance.rounding.small
+		readonly property real itemRadius: Appearance.rounding.normal
 		required property var modelData
 
 		height: root.cellHeight
 		width: root.cellWidth
 
+		StateLayer {
+			function onClicked(): void {
+				Wallpapers.setWallpaper(modelData.path);
+			}
+
+			anchors.bottomMargin: itemMargin
+			anchors.fill: parent
+			anchors.leftMargin: itemMargin
+			anchors.rightMargin: itemMargin
+			anchors.topMargin: itemMargin
+			radius: itemRadius
+		}
+
 		CustomClippingRect {
 			id: image
 
@@ -40,6 +53,8 @@ GridView {
 			anchors.topMargin: itemMargin
 			antialiasing: true
 			color: DynamicColors.tPalette.m3surfaceContainer
+			layer.enabled: true
+			layer.smooth: true
 			radius: itemRadius
 
 			CachingImage {
@@ -85,33 +100,6 @@ GridView {
 				}
 			}
 
-			Rectangle {
-				anchors.fill: parent
-				antialiasing: true
-				border.color: DynamicColors.palette.m3primary
-				border.width: isCurrent ? 2 : 0
-				color: "transparent"
-				radius: itemRadius + 2
-				smooth: true
-
-				Behavior on border.width {
-					NumberAnimation {
-						duration: 150
-						easing.type: Easing.OutQuad
-					}
-				}
-
-				MaterialIcon {
-					anchors.margins: Appearance.padding.small
-					anchors.right: parent.right
-					anchors.top: parent.top
-					color: DynamicColors.palette.m3primary
-					font.pointSize: Appearance.font.size.large
-					text: "check_circle"
-					visible: isCurrent
-				}
-			}
-
 			Timer {
 				id: fallbackTimer
 
@@ -124,17 +112,35 @@ GridView {
 			}
 		}
 
-		StateLayer {
+		Rectangle {
-			function onClicked(): void {
-				Wallpapers.setWallpaper(modelData.path);
-			}
-
 			anchors.bottomMargin: itemMargin
 			anchors.fill: parent
 			anchors.leftMargin: itemMargin
 			anchors.rightMargin: itemMargin
 			anchors.topMargin: itemMargin
-			radius: itemRadius
+			antialiasing: true
+			border.color: DynamicColors.palette.m3primary
+			border.width: isCurrent ? 2 : 0
+			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
+			}
 		}
 	}
 }

Modules/SysTray/Popouts/SubMenu.qml

@@ -0,0 +1,158 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import qs.Components
+import qs.Modules
+import qs.Config
+
+Column {
+	id: menu
+
+	property int biggestWidth: 0
+	required property QsMenuHandle handle
+	required property int level
+	required property PopoutState popouts
+	required property ShellScreen screen
+	property bool shown: true
+
+	height: childrenRect.height
+	opacity: shown ? 1 : 0
+	padding: 0
+	scale: shown ? 1 : 0.8
+	spacing: 4
+	width: biggestWidth
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	QsMenuOpener {
+		id: menuOpener
+
+		menu: menu.handle
+	}
+
+	Repeater {
+		model: menuOpener.children
+
+		CustomRect {
+			id: item
+
+			required property int index
+			required property QsMenuEntry modelData
+
+			color: modelData.isSeparator ? DynamicColors.palette.m3outlineVariant : "transparent"
+			implicitHeight: modelData.isSeparator ? 1 : children.implicitHeight
+			implicitWidth: menu.biggestWidth
+			radius: Appearance.rounding.full
+			visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
+
+			Loader {
+				id: children
+
+				active: !item.modelData.isSeparator
+				anchors.left: parent.left
+				anchors.right: parent.right
+				asynchronous: true
+
+				sourceComponent: Item {
+					implicitHeight: 30
+
+					StateLayer {
+						function onClicked(): void {
+							const entry = item.modelData;
+							if (entry.hasChildren) {
+								menu.popouts.pushSubmenu(menu.level, entry, item, menu.biggestWidth);
+							} else {
+								entry.triggered();
+								menu.popouts.hasCurrent = false;
+							}
+						}
+
+						disabled: !item.modelData.enabled
+						radius: item.radius
+					}
+
+					Loader {
+						id: icon
+
+						active: item.modelData.icon !== ""
+						anchors.right: parent.right
+						anchors.rightMargin: 10
+						anchors.verticalCenter: parent.verticalCenter
+						asynchronous: true
+
+						sourceComponent: Item {
+							implicitHeight: label.implicitHeight
+							implicitWidth: label.implicitHeight
+
+							IconImage {
+								id: iconImage
+
+								implicitSize: parent.implicitHeight
+								source: item.modelData.icon
+								visible: false
+							}
+
+							MultiEffect {
+								anchors.fill: iconImage
+								colorization: 1.0
+								colorizationColor: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+								source: iconImage
+							}
+						}
+					}
+
+					CustomText {
+						id: label
+
+						anchors.left: parent.left
+						anchors.leftMargin: 10
+						anchors.verticalCenter: parent.verticalCenter
+						color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+						text: labelMetrics.elidedText
+					}
+
+					TextMetrics {
+						id: labelMetrics
+
+						font.family: label.font.family
+						font.pointSize: label.font.pointSize
+						text: item.modelData.text
+
+						Component.onCompleted: {
+							var biggestWidth = menu.biggestWidth;
+							var currentWidth = labelMetrics.width + (item.modelData.icon ?? "" ? 30 : 0) + (item.modelData.hasChildren ? 30 : 0) + 20;
+							if (currentWidth > biggestWidth) {
+								menu.biggestWidth = currentWidth;
+							}
+						}
+					}
+
+					Loader {
+						id: expand
+
+						active: item.modelData.hasChildren
+						anchors.right: parent.right
+						anchors.verticalCenter: parent.verticalCenter
+						asynchronous: true
+
+						sourceComponent: MaterialIcon {
+							color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+							text: "chevron_right"
+						}
+					}
+				}
+			}
+		}
+	}
+}

Modules/SysTray/Popouts/TrayMenuPopout.qml

@@ -1,251 +1,16 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Widgets
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
 import qs.Components
 import qs.Modules
 import qs.Config
 
-StackView {
+SubMenu {
 	id: root
 
-	property int biggestWidth: 0
+	handle: trayItem
-	required property PopoutState popouts
+	level: 0
-	property int rootWidth: 0
+
 	required property QsMenuHandle trayItem
-
-	implicitHeight: currentItem.implicitHeight
-	implicitWidth: currentItem.implicitWidth
-
-	initialItem: SubMenu {
-		handle: root.trayItem
-	}
-	popEnter: NoAnim {
-	}
-	popExit: NoAnim {
-	}
-	pushEnter: NoAnim {
-	}
-	pushExit: NoAnim {
-	}
-
-	Component {
-		id: subMenuComp
-
-		SubMenu {
-		}
-	}
-
-	component NoAnim: Transition {
-		NumberAnimation {
-			duration: 0
-		}
-	}
-	component SubMenu: Column {
-		id: menu
-
-		required property QsMenuHandle handle
-		property bool isSubMenu
-		property bool shown
-
-		opacity: shown ? 1 : 0
-		padding: 0
-		scale: shown ? 1 : 0.8
-		spacing: 4
-
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
-		}
-
-		Component.onCompleted: shown = true
-		StackView.onActivating: shown = true
-		StackView.onDeactivating: shown = false
-		StackView.onRemoved: destroy()
-
-		QsMenuOpener {
-			id: menuOpener
-
-			menu: menu.handle
-		}
-
-		Repeater {
-			model: menuOpener.children
-
-			CustomRect {
-				id: item
-
-				required property int index
-				required property QsMenuEntry modelData
-
-				color: modelData.isSeparator ? DynamicColors.palette.m3outlineVariant : "transparent"
-				implicitHeight: modelData.isSeparator ? 1 : children.implicitHeight
-				implicitWidth: root.biggestWidth
-				radius: Appearance.rounding.full
-				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
-
-				Loader {
-					id: children
-
-					active: !item.modelData.isSeparator
-					anchors.left: parent.left
-					anchors.right: parent.right
-					asynchronous: true
-
-					sourceComponent: Item {
-						implicitHeight: 30
-
-						StateLayer {
-							function onClicked(): void {
-								const entry = item.modelData;
-								if (entry.hasChildren) {
-									root.rootWidth = root.biggestWidth;
-									root.biggestWidth = 0;
-									root.push(subMenuComp.createObject(null, {
-										handle: entry,
-										isSubMenu: true
-									}));
-								} else {
-									item.modelData.triggered();
-									root.popouts.hasCurrent = false;
-								}
-							}
-
-							disabled: !item.modelData.enabled
-							radius: item.radius
-						}
-
-						Loader {
-							id: icon
-
-							active: item.modelData.icon !== ""
-							anchors.right: parent.right
-							anchors.rightMargin: 10
-							anchors.verticalCenter: parent.verticalCenter
-							asynchronous: true
-
-							sourceComponent: Item {
-								implicitHeight: label.implicitHeight
-								implicitWidth: label.implicitHeight
-
-								IconImage {
-									id: iconImage
-
-									implicitSize: parent.implicitHeight
-									source: item.modelData.icon
-									visible: false
-								}
-
-								MultiEffect {
-									anchors.fill: iconImage
-									colorization: 1.0
-									colorizationColor: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
-									source: iconImage
-								}
-							}
-						}
-
-						CustomText {
-							id: label
-
-							anchors.left: parent.left
-							anchors.leftMargin: 10
-							anchors.verticalCenter: parent.verticalCenter
-							color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
-							text: labelMetrics.elidedText
-						}
-
-						TextMetrics {
-							id: labelMetrics
-
-							font.family: label.font.family
-							font.pointSize: label.font.pointSize
-							text: item.modelData.text
-
-							Component.onCompleted: {
-								var biggestWidth = root.biggestWidth;
-								var currentWidth = labelMetrics.width + (item.modelData.icon ?? "" ? 30 : 0) + (item.modelData.hasChildren ? 30 : 0) + 20;
-								if (currentWidth > biggestWidth) {
-									root.biggestWidth = currentWidth;
-								}
-							}
-						}
-
-						Loader {
-							id: expand
-
-							active: item.modelData.hasChildren
-							anchors.right: parent.right
-							anchors.verticalCenter: parent.verticalCenter
-							asynchronous: true
-
-							sourceComponent: MaterialIcon {
-								color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
-								text: "chevron_right"
-							}
-						}
-					}
-				}
-			}
-		}
-
-		Loader {
-			id: loader
-
-			active: menu.isSubMenu
-			asynchronous: true
-
-			sourceComponent: Item {
-				implicitHeight: 30
-				implicitWidth: back.implicitWidth
-
-				Item {
-					anchors.bottom: parent.bottom
-					implicitHeight: 30
-					implicitWidth: root.biggestWidth
-
-					CustomRect {
-						anchors.fill: parent
-						color: DynamicColors.palette.m3secondaryContainer
-						radius: Appearance.rounding.full
-
-						StateLayer {
-							function onClicked(): void {
-								root.pop();
-								root.biggestWidth = root.rootWidth;
-							}
-
-							color: DynamicColors.palette.m3onSecondaryContainer
-							radius: parent.radius
-						}
-					}
-
-					Row {
-						id: back
-
-						anchors.verticalCenter: parent.verticalCenter
-
-						MaterialIcon {
-							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
-							text: "chevron_left"
-						}
-
-						CustomText {
-							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
-							text: qsTr("Back")
-						}
-					}
-				}
-			}
-		}
-	}
 }

Modules/SysTray/TrayItem.qml

@@ -1,6 +1,5 @@
 import QtQuick.Layouts
 import QtQuick
-import QtQuick.VectorImage
 import Quickshell
 import Quickshell.Services.SystemTray
 import qs.Modules

Modules/Wallpaper/WallBackground.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
 import qs.Components
 import qs.Helpers
@@ -13,73 +12,31 @@ Item {
 	required property ShellScreen screen
 	property string source: Wallpapers.current
 
-	function refreshData(): void {
-		Hyprland.refreshMonitors();
-		const scale = Hyprland.monitorFor(root.screen).scale;
-		if (scale > 0 && img.resScale !== scale) {
-			img.resScale = scale;
-			img.sourceSize.width = root.screen.width * scale;
-		}
-		const displayData = Wallpapers.getCrop(root.screen.name);
-		const displayRect = Qt.rect(img.sourceSize.width * displayData.x, img.implicitHeight * displayData.y, img.sourceSize.width * displayData.width, img.implicitHeight * displayData.height);
-		img.anchors.fill = null;
-		img.zoom = displayData.zoom;
-		img.x = -(displayRect.x * displayData.zoom / img.resScale);
-		img.y = -(displayRect.y * displayData.zoom / img.resScale);
-	}
-
 	anchors.fill: parent
 
 	Image {
 		id: img
 
-		property int displayH
+		anchors.fill: parent
-		property int displayW
-		property real resScale
-		property real zoom: 1.0
-
 		asynchronous: true
 		fillMode: Image.PreserveAspectCrop
-		height: implicitHeight * zoom / resScale
 		opacity: 1
 		retainWhileLoading: true
 		source: root.source
-		sourceSize.width: root.screen.width * resScale
+		sourceClipRect: Wallpapers.recentlyChanged ? null : Qt.rect(Config.background.sourceClipX, Config.background.sourceClipY, Config.background.sourceClipW, Config.background.sourceClipH)
-		width: implicitWidth * zoom / resScale
+		sourceSize.height: root.screen.height
+		sourceSize.width: root.screen.width
 
-		Behavior on height {
+		onSourceChanged: {
-			Anim {
+			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();
 			}
-		}
+			Wallpapers.recentlyChanged = true;
-		Behavior on width {
-			Anim {
-			}
-		}
-		Behavior on x {
-			Anim {
-			}
-		}
-		Behavior on y {
-			Anim {
-			}
-		}
-
-		onStatusChanged: {
-			if (img.status == Image.Ready) {
-				root.refreshData();
-			}
-		}
-
-		Connections {
-			function onAdapterUpdated(): void {
-				root.refreshData();
-			}
-
-			function onLoaded(): void {
-				root.refreshData();
-			}
-
-			target: Wallpapers.monitorCrops
 		}
 	}
 }

Modules/Wrapper.qml

@@ -15,13 +15,14 @@ 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 bool isDetached: detachedMode.length > 0
 	readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight
 	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
 	required property real offsetScale
 	property string queuedMode
 	required property ShellScreen screen
+	property alias state: popoutState
 
 	function close(): void {
 		hasCurrent = false;
@@ -79,6 +80,7 @@ Item {
 
 		sourceComponent: Content {
 			popouts: popoutState
+			screen: root.screen
 		}
 	}
 

scripts/SettingsIndex.mjs

@@ -311,13 +311,6 @@ export const settingsIndex = [
         section: "Lockscreen",
         keywords: ["notification", "hide", "privacy"],
     },
-    {
-        name: "Show notification icon",
-        category: "lockscreen",
-        categoryName: "Lockscreen",
-        section: "Lockscreen",
-        keywords: ["notification", "hide", "icon"],
-    },
     {
         name: "Blur amount",
         category: "lockscreen",