Merge branch 'main' into zshell-img-tools

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
@@ -19,26 +20,17 @@ Item {
 			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 +39,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/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/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/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/Lockscreen.qml

@@ -103,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/Controls/SettingActionList.qml

@@ -127,6 +127,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -207,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) {
@@ -215,6 +220,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {
@@ -233,6 +241,9 @@ ColumnLayout {
 				}
 
 				Separator {
+					Layout.fillWidth: true
+					anchors.left: undefined
+					anchors.right: undefined
 				}
 
 				RowLayout {

Modules/Settings/Controls/SettingAliasList.qml

@@ -6,7 +6,7 @@ import qs.Components
 import qs.Config
 import qs.Helpers
 
-ColumnLayout {
+CustomRect {
 	id: root
 
 	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
@@ -43,10 +43,9 @@ ColumnLayout {
 
 	anchors.left: parent.left
 	anchors.right: parent.right
-	height: shouldBeActive ? implicitHeight : 0
+	height: shouldBeActive ? layout.implicitHeight : 0
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
-	spacing: Appearance.spacing.smaller
 	visible: opacity > 0
 
 	Behavior on opacity {
@@ -77,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/SettingList.qml

@@ -194,6 +194,9 @@ Item {
 			}
 
 			Separator {
+				Layout.fillWidth: true
+				anchors.left: undefined
+				anchors.right: undefined
 			}
 
 			RowLayout {
@@ -225,6 +228,9 @@ Item {
 			}
 
 			Separator {
+				Layout.fillWidth: true
+				anchors.left: undefined
+				anchors.right: undefined
 			}
 
 			Item {

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