show notif icon true by default

Reviewed-on: #91

Config/Config.qml

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

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 {
 	}
 

Drawers/Panels.qml

@@ -13,7 +13,6 @@ 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 {
@@ -38,7 +37,6 @@ 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
 
@@ -95,79 +93,6 @@ 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, ...subMenuRegions.instances]
+				regions: popoutRegions.instances
 				width: win.width - Config.barConfig.border * 2
 				x: Config.barConfig.border
 				y: bar.implicitHeight
@@ -93,22 +93,6 @@ 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
 
@@ -318,18 +302,6 @@ 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 {

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,35 @@ 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}`]);
@@ -53,6 +87,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/Content.qml

@@ -16,7 +16,6 @@ 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
@@ -64,7 +63,6 @@ Item {
 
 					TrayMenuPopout {
 						popouts: root.popouts
-						screen: root.screen
 						trayItem: trayMenu.modelData.menu
 					}
 				}

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/PopoutState.qml

@@ -1,36 +1,8 @@
 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,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
 		}
 	}
 

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"

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/WallpaperCropper.qml

@@ -1,113 +1,260 @@
+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 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
-	}
+	Layout.fillWidth: true
+	Layout.preferredHeight: 400
 
-	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 {
+					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);
+				}
 
-				cropRect.zoom = Math.max(1.0, Math.min(cropRect.zoom, 10.0));
-				Config.background.zoom = cropRect.zoom;
+				function zoomClipRect(zoom: real): void {
+					let oldCenterX = cropRect.x + cropRect.width * 0.5;
+					let oldCenterY = cropRect.y + cropRect.height * 0.5;
 
-				cropRect.x = oldCenterX - cropRect.width * 0.5;
-				cropRect.y = oldCenterY - cropRect.height * 0.5;
+					cropRect.zoom = zoom;
 
-				cropRect.clampToBounds();
+					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: 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,26 +23,13 @@ GridView {
 	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 +40,6 @@ GridView {
 			anchors.topMargin: itemMargin
 			antialiasing: true
 			color: DynamicColors.tPalette.m3surfaceContainer
-			layer.enabled: true
-			layer.smooth: true
 			radius: itemRadius
 
 			CachingImage {
@@ -100,6 +85,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 +124,17 @@ 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
 		}
 	}
 }

Modules/SysTray/Popouts/SubMenu.qml

@@ -1,158 +0,0 @@
-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,16 +1,251 @@
 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
 
-SubMenu {
+StackView {
 	id: root
 
-	handle: trayItem
-	level: 0
-
+	property int biggestWidth: 0
+	required property PopoutState popouts
+	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,5 +1,6 @@
 import QtQuick.Layouts
 import QtQuick
+import QtQuick.VectorImage
 import Quickshell
 import Quickshell.Services.SystemTray
 import qs.Modules

Modules/Wallpaper/WallBackground.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
+import Quickshell.Hyprland
 import QtQuick
 import qs.Components
 import qs.Helpers
@@ -12,31 +13,73 @@ 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
 
-		anchors.fill: parent
+		property int displayH
+		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
-		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
+		sourceSize.width: root.screen.width * resScale
+		width: implicitWidth * zoom / resScale
 
-		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 height {
+			Anim {
 			}
-			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,14 +15,13 @@ Item {
 	property real currentCenter
 	property alias currentName: popoutState.currentName
 	property string detachedMode
-	property alias hasCurrent: popoutState.hasCurrent
 	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 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;
@@ -80,7 +79,6 @@ Item {
 
 		sourceComponent: Content {
 			popouts: popoutState
-			screen: root.screen
 		}
 	}
 

scripts/SettingsIndex.mjs

@@ -311,6 +311,13 @@ 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",