Merge branch 'main' into module/wifi

Modules/Lock/Content.qml

@@ -4,76 +4,66 @@ import qs.Components
 import qs.Helpers
 import qs.Config
 
-RowLayout {
+CustomClippingRect {
 	id: root
 
 	required property var lock
 
-	spacing: Appearance.spacing.large * 2
+	implicitHeight: layout.implicitHeight
+	implicitWidth: layout.implicitWidth
+	radius: Appearance.rounding.large
 
-	ColumnLayout {
-		Layout.fillWidth: true
-		spacing: Appearance.spacing.normal
+	RowLayout {
+		id: layout
 
-		CustomRect {
+		anchors.fill: parent
+		spacing: Appearance.spacing.large * 2
+
+		ColumnLayout {
 			Layout.fillWidth: true
-			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitHeight: weather.implicitHeight
-			radius: Appearance.rounding.small
-			topLeftRadius: Appearance.rounding.large
+			spacing: Appearance.spacing.normal
 
 			WeatherInfo {
 				id: weather
 
+				Layout.fillWidth: true
 				rootHeight: root.height
 			}
-		}
-
-		CustomRect {
-			Layout.fillWidth: true
-			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitHeight: resources.implicitHeight
-			radius: Appearance.rounding.small
 
 			Resources {
 				id: resources
 
+				Layout.fillWidth: true
 			}
-		}
-
-		CustomClippingRect {
-			Layout.fillHeight: true
-			Layout.fillWidth: true
-			bottomLeftRadius: Appearance.rounding.large
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: Appearance.rounding.small
 
 			Media {
 				id: media
 
+				Layout.fillHeight: true
+				Layout.fillWidth: true
 				lock: root.lock
 			}
 		}
-	}
 
-	Center {
-		lock: root.lock
-	}
+		Center {
+			lock: root.lock
+		}
 
-	ColumnLayout {
-		Layout.fillWidth: true
-		spacing: Appearance.spacing.normal
-
-		CustomRect {
-			Layout.fillHeight: true
+		ColumnLayout {
 			Layout.fillWidth: true
-			bottomRightRadius: Appearance.rounding.large
-			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: Appearance.rounding.small
-			topRightRadius: Appearance.rounding.large
+			spacing: Appearance.spacing.normal
 
-			NotifDock {
-				lock: root.lock
+			CustomRect {
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+				bottomRightRadius: Appearance.rounding.large
+				color: DynamicColors.tPalette.m3surfaceContainer
+				radius: Appearance.rounding.small
+				topRightRadius: Appearance.rounding.large
+
+				NotifDock {
+					lock: root.lock
+				}
 			}
 		}
 	}

Modules/Lock/Media.qml

@@ -1,201 +1,110 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Layouts
-import qs.Modules
+import Quickshell
+import ZShell.Components
 import qs.Components
-import qs.Helpers
 import qs.Config
+import qs.Helpers
 
-Item {
+CustomClippingRect {
 	id: root
 
 	required property var lock
 
-	anchors.fill: parent
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
+	radius: Appearance.rounding.small
+
+	FadeImage {
+		id: image
 
-	Image {
 		anchors.fill: parent
 		asynchronous: true
 		fillMode: Image.PreserveAspectCrop
 		layer.enabled: true
 		opacity: status === Image.Ready ? 1 : 0
-		source: Players.active?.trackArtUrl ?? ""
-		sourceSize.height: height
-		sourceSize.width: width
-
-		layer.effect: OpacityMask {
-			maskSource: mask
+		source: Players.getArtUrl(Players.active)
+		sourceSize: {
+			const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+			return Qt.size(width * dpr, height * dpr);
 		}
+
 		Behavior on opacity {
 			Anim {
-				duration: Appearance.anim.durations.extraLarge
+				type: Anim.StandardExtraLarge
 			}
 		}
-	}
 
-	Rectangle {
-		id: mask
-
-		anchors.fill: parent
-		layer.enabled: true
-		visible: false
-
-		gradient: Gradient {
-			orientation: Gradient.Horizontal
-
-			GradientStop {
-				color: Qt.rgba(0, 0, 0, 0.5)
-				position: 0
-			}
-
-			GradientStop {
-				color: Qt.rgba(0, 0, 0, 0.2)
-				position: 0.4
-			}
-
-			GradientStop {
-				color: Qt.rgba(0, 0, 0, 0)
-				position: 0.8
-			}
+		CustomRect {
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surface
+			opacity: 0.7
 		}
 	}
 
 	ColumnLayout {
 		id: layout
 
-		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
-
-		CustomText {
-			Layout.bottomMargin: Appearance.spacing.larger
-			Layout.topMargin: Appearance.padding.large
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.family: Appearance.font.family.mono
-			font.weight: 500
-			text: qsTr("Now playing")
-		}
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.extraLarge
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.extraSmall
 
 		CustomText {
 			Layout.fillWidth: true
 			animate: true
 			color: DynamicColors.palette.m3primary
 			elide: Text.ElideRight
-			font.family: Appearance.font.family.mono
-			font.pointSize: Appearance.font.size.large
-			font.weight: 600
+			font.pointSize: Appearance.font.size.medium
 			horizontalAlignment: Text.AlignHCenter
-			text: Players.active?.trackArtist ?? qsTr("No media")
+			text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
 		}
 
 		CustomText {
 			Layout.fillWidth: true
 			animate: true
+			color: DynamicColors.palette.m3onSurfaceVariant
 			elide: Text.ElideRight
-			font.family: Appearance.font.family.mono
-			font.pointSize: Appearance.font.size.larger
+			font.pointSize: Appearance.font.size.small
 			horizontalAlignment: Text.AlignHCenter
-			text: Players.active?.trackTitle ?? qsTr("No media")
+			text: (Players.active?.trackArtist ?? qsTr("Try playing some music!")) || qsTr("Unknown artist")
 		}
 
-		RowLayout {
+		ButtonRow {
 			Layout.alignment: Qt.AlignHCenter
-			Layout.bottomMargin: Appearance.padding.large
-			Layout.topMargin: Appearance.spacing.large * 1.2
-			spacing: Appearance.spacing.large
-
-			PlayerControl {
-				function onClicked(): void {
-					if (Players.active?.canGoPrevious)
-						Players.active.previous();
-				}
+			Layout.topMargin: Appearance.spacing.small
+			spacing: Appearance.spacing.extraSmall
 
+			IconButton {
+				enabled: Players.active?.canGoPrevious
 				icon: "skip_previous"
+				isRound: true
+				shapeMorph: true
+				type: IconButton.Tonal
+
+				onClicked: Players.active?.previous()
 			}
 
-			PlayerControl {
-				function onClicked(): void {
-					if (Players.active?.canTogglePlaying)
-						Players.active.togglePlaying();
-				}
+			IconButton {
+				checked: Players.active?.isPlaying ?? false
+				enabled: Players.active?.canTogglePlaying
+				icon: Players.active?.isPlaying ? "pause" : "play_arrow"
+				implicitWidth: implicitHeight + Appearance.padding.largeIncreased * 2
+				isRound: true
+				shapeMorph: true
 
-				active: Players.active?.isPlaying ?? false
-				animate: true
-				icon: active ? "pause" : "play_arrow"
-				level: active ? 2 : 1
-				set_color: "Primary"
+				onClicked: Players.active?.togglePlaying()
 			}
 
-			PlayerControl {
-				function onClicked(): void {
-					if (Players.active?.canGoNext)
-						Players.active.next();
-				}
-
+			IconButton {
+				enabled: Players.active?.canGoNext
 				icon: "skip_next"
-			}
-		}
-	}
+				isRound: true
+				shapeMorph: true
+				type: IconButton.Tonal
 
-	component PlayerControl: CustomRect {
-		id: control
-
-		property bool active
-		property alias animate: controlIcon.animate
-		property alias icon: controlIcon.text
-		property int level: 1
-		property string set_color: "Secondary"
-
-		function onClicked(): void {
-		}
-
-		Layout.preferredWidth: implicitWidth + (controlState.pressed ? Appearance.padding.normal * 2 : active ? Appearance.padding.small * 2 : 0)
-		color: active ? DynamicColors.palette[`m3${set_color.toLowerCase()}`] : DynamicColors.palette[`m3${set_color.toLowerCase()}Container`]
-		implicitHeight: controlIcon.implicitHeight + Appearance.padding.normal * 2
-		implicitWidth: controlIcon.implicitWidth + Appearance.padding.large * 2
-		radius: active || controlState.pressed ? Appearance.rounding.small : Appearance.rounding.normal
-
-		Behavior on Layout.preferredWidth {
-			Anim {
-				duration: Appearance.anim.durations.expressiveFastSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-			}
-		}
-		Behavior on radius {
-			Anim {
-				duration: Appearance.anim.durations.expressiveFastSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-			}
-		}
-
-		Elevation {
-			anchors.fill: parent
-			level: controlState.containsMouse && !controlState.pressed ? control.level + 1 : control.level
-			radius: parent.radius
-			z: -1
-		}
-
-		StateLayer {
-			id: controlState
-
-			color: control.active ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
-
-			onClicked: {
-				control.onClicked();
-			}
-		}
-
-		MaterialIcon {
-			id: controlIcon
-
-			anchors.centerIn: parent
-			color: control.active ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
-			fill: control.active ? 1 : 0
-			font.pointSize: Appearance.font.size.large
-
-			Behavior on fill {
-				Anim {
-				}
+				onClicked: Players.active?.next()
 			}
 		}
 	}

Modules/Lock/Resources.qml

@@ -1,81 +1,82 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
+import M3Shapes
 import ZShell.Services
 import qs.Components
-import qs.Helpers
 import qs.Config
+import qs.Effects
 
-GridLayout {
+CustomRect {
 	id: root
 
-	anchors.left: parent.left
-	anchors.margins: Appearance.padding.large
-	anchors.right: parent.right
-	columnSpacing: Appearance.spacing.large
-	columns: 2
-	rowSpacing: Appearance.spacing.large
-	rows: 1
+	readonly property real fontScale: {
+		const diff = width / 391 - 1; // 391 is the width at 1080 height screen
+		return 1 + Math.pow(Math.abs(diff), 0.8) * Math.sign(diff);
+	}
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
+	radius: Appearance.rounding.small
+
+	ServiceRef {
+		service: Cpu
+	}
 
 	ServiceRef {
 		service: Memory
 	}
 
 	ServiceRef {
-		service: Cpu
+		service: Storage
 	}
 
-	Resource {
-		Layout.bottomMargin: Appearance.padding.large
-		Layout.topMargin: Appearance.padding.large
-		fgColor: DynamicColors.palette.m3primary
-		icon: "memory"
-		value: Cpu.percentage
+	RowLayout {
+		id: layout
+
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.large
+		spacing: Appearance.spacing.large
+
+		Resource {
+			id: cpu
+
+			fgColor: DynamicColors.palette.m3primary
+			icon: "memory"
+			value: Cpu.percentage
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3tertiary
+			icon: "memory_alt"
+			value: Memory.percentage
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3secondary
+			icon: "hard_disk"
+			value: Storage.percentage
+		}
 	}
 
-	Resource {
-		Layout.bottomMargin: Appearance.padding.large
-		Layout.topMargin: Appearance.padding.large
-		fgColor: DynamicColors.palette.m3secondary
-		icon: "memory_alt"
-		value: Memory.percentage
-	}
-
-	component Resource: CustomRect {
+	component Resource: CircularProgress {
 		id: res
 
-		required property color fgColor
 		required property string icon
-		required property real value
 
 		Layout.fillWidth: true
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-		implicitHeight: width
-		radius: Appearance.rounding.large
+		implicitSize: width
 
-		Behavior on value {
+		Behavior on clampedVal {
 			Anim {
-				duration: Appearance.anim.durations.large
 			}
 		}
 
-		CircularProgress {
-			id: circ
-
-			anchors.fill: parent
-			bgColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 3)
-			fgColor: res.fgColor
-			padding: Appearance.padding.large * 3
-			strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
-			value: res.value
-		}
-
 		MaterialIcon {
-			id: icon
-
 			anchors.centerIn: parent
 			color: res.fgColor
-			font.pointSize: (circ.arcRadius * 0.7) || 1
-			font.weight: 600
+			font.pointSize: Appearance.font.size.extraLarge
 			text: res.icon
 		}
 	}

Modules/Lock/Weather/BriefInfo.qml

@@ -0,0 +1,62 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+ColumnLayout {
+	id: root
+
+	required property int rootHeight
+
+	spacing: Appearance.spacing.extraSmall
+
+	CustomText {
+		Layout.alignment: Qt.AlignHCenter
+		animate: true
+		color: DynamicColors.palette.m3onSurfaceVariant
+		font.pointSize: Appearance.font.size.large
+		text: Weather.description
+	}
+
+	RowLayout {
+		Layout.alignment: Qt.AlignHCenter
+		spacing: Appearance.spacing.small
+
+		CustomText {
+			id: temp
+
+			animate: true
+			color: DynamicColors.palette.m3primary
+			font.pointSize: Appearance.font.size.large
+			text: Weather.temp
+		}
+
+		MaterialIcon {
+			animate: true
+			color: DynamicColors.palette.m3secondary
+			text: Weather.icon
+		}
+	}
+
+	CustomText {
+		Layout.alignment: Qt.AlignHCenter
+		animate: true
+		color: DynamicColors.palette.m3onSurfaceVariant
+		font.pointSize: Appearance.font.size.large
+		text: qsTr("Feels like %1").arg(Weather.temp)
+		visible: root.rootHeight > 550
+	}
+
+	CustomText {
+		Layout.alignment: Qt.AlignHCenter
+		animate: true
+		color: DynamicColors.palette.m3onSurfaceVariant
+		font.pointSize: Appearance.font.size.medium
+		text: {
+			const today = Weather.forecast[0];
+			return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC));
+		}
+		visible: root.rootHeight > 550
+	}
+}

Modules/Lock/Weather/Forecast.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Layouts
+import M3Shapes
+import ZShell
+import qs.Components
+import qs.Helpers
+import qs.Config
+
+CustomRect {
+	id: root
+
+	color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+	implicitHeight: header.anchors.margins + header.implicitHeight + Appearance.spacing.small + layout.implicitHeight + layout.anchors.bottomMargin
+	radius: Appearance.rounding.small
+
+	RowLayout {
+		id: header
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.top: parent.top
+		spacing: Appearance.spacing.small
+
+		MaterialIcon {
+			Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
+			font.pointSize: Appearance.font.size.medium
+			text: "schedule"
+		}
+
+		CustomText {
+			id: title
+
+			font.pointSize: Appearance.font.size.medium
+			text: qsTr("Hourly forecast")
+		}
+	}
+
+	VerticalFadeListView {
+		id: layout
+
+		anchors.bottom: parent.bottom
+		anchors.bottomMargin: Appearance.padding.largeIncreased
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		implicitHeight: contentItem.childrenRect.height
+		model: Weather.hourlyForecast
+		orientation: VerticalFadeListView.Horizontal
+		spacing: Appearance.spacing.normal
+
+		delegate: ColumnLayout {
+			id: hour
+
+			readonly property var cond: modelData
+			required property int index
+			required property var modelData
+
+			spacing: Appearance.spacing.extraSmall
+
+			MaterialShape {
+				Layout.alignment: Qt.AlignHCenter
+				color: Qt.alpha(DynamicColors.palette.m3primary, hour.index === 0 ? 1 : 0)
+				implicitSize: temp.implicitHeight + Appearance.padding.normal * 2
+				shape: MaterialShape.Cookie4Sided
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+
+				CustomText {
+					id: temp
+
+					anchors.centerIn: parent
+					color: hour.index === 0 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					font.pointSize: Appearance.font.size.medium
+					text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
+				}
+			}
+
+			MaterialIcon {
+				Layout.alignment: Qt.AlignHCenter
+				color: DynamicColors.palette.m3secondary
+				font.pointSize: Appearance.font.size.extraLarge
+				text: hour.cond.icon
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignHCenter
+				color: DynamicColors.palette.m3primary
+				text: hour.cond.precipChance + "%"
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignHCenter
+				Layout.topMargin: Appearance.spacing.extraSmall
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.small
+				text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
+			}
+		}
+	}
+}

Modules/Lock/WeatherInfo.qml

@@ -1,162 +1,23 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
-import QtQuick.Layouts
+import qs.Modules.Lock.Weather
+import qs.Config
 import qs.Components
 import qs.Helpers
-import qs.Config
 
-ColumnLayout {
+CustomRect {
 	id: root
 
 	required property int rootHeight
+	readonly property bool showForecast: rootHeight >= 700
 
-	anchors.left: parent.left
-	anchors.margins: Appearance.padding.large * 2
-	anchors.right: parent.right
-	spacing: Appearance.spacing.small
-
-	Loader {
-		Layout.alignment: Qt.AlignHCenter
-		Layout.bottomMargin: -Appearance.padding.large
-		Layout.topMargin: Appearance.padding.large * 2
-		active: root.rootHeight > 610
-		visible: active
-
-		sourceComponent: CustomText {
-			color: DynamicColors.palette.m3primary
-			font.pointSize: Appearance.font.size.extraLarge
-			font.weight: 500
-			text: qsTr("Weather")
-		}
-	}
-
-	RowLayout {
-		Layout.fillWidth: true
-		spacing: Appearance.spacing.large
-
-		MaterialIcon {
-			animate: true
-			color: DynamicColors.palette.m3secondary
-			font.pointSize: Appearance.font.size.extraLarge * 2.5
-			text: Weather.icon
-		}
-
-		ColumnLayout {
-			spacing: Appearance.spacing.small
-
-			CustomText {
-				Layout.fillWidth: true
-				animate: true
-				color: DynamicColors.palette.m3secondary
-				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.large
-				font.weight: 500
-				text: Weather.description
-			}
-
-			CustomText {
-				Layout.fillWidth: true
-				animate: true
-				color: DynamicColors.palette.m3onSurfaceVariant
-				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.normal
-				text: qsTr("Humidity: %1%").arg(Weather.humidity)
-			}
-		}
-
-		Loader {
-			Layout.rightMargin: Appearance.padding.smaller
-			active: root.width > 400
-			visible: active
-
-			sourceComponent: ColumnLayout {
-				spacing: Appearance.spacing.small
-
-				CustomText {
-					Layout.fillWidth: true
-					animate: true
-					color: DynamicColors.palette.m3primary
-					elide: Text.ElideLeft
-					font.pointSize: Appearance.font.size.extraLarge
-					font.weight: 500
-					horizontalAlignment: Text.AlignRight
-					text: Weather.temp
-				}
-
-				CustomText {
-					Layout.fillWidth: true
-					animate: true
-					color: DynamicColors.palette.m3outline
-					elide: Text.ElideLeft
-					font.pointSize: Appearance.font.size.smaller
-					horizontalAlignment: Text.AlignRight
-					text: qsTr("Feels like: %1").arg(Weather.feelsLike)
-				}
-			}
-		}
-	}
-
-	Loader {
-		id: forecastLoader
-
-		Layout.bottomMargin: Appearance.padding.large * 2
-		Layout.fillWidth: true
-		Layout.topMargin: Appearance.spacing.smaller
-		active: root.rootHeight > 820
-		visible: active
-
-		sourceComponent: RowLayout {
-			spacing: Appearance.spacing.large
-
-			Repeater {
-				model: {
-					const forecast = Weather.hourlyForecast;
-					const count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5;
-					if (!forecast)
-						return Array.from({
-							length: count
-						}, () => null);
-
-					return forecast.slice(0, count);
-				}
-
-				ColumnLayout {
-					id: forecastHour
-
-					required property var modelData
-
-					Layout.fillWidth: true
-					spacing: Appearance.spacing.small
-
-					CustomText {
-						Layout.fillWidth: true
-						color: DynamicColors.palette.m3outline
-						font.pointSize: Appearance.font.size.larger
-						horizontalAlignment: Text.AlignHCenter
-						text: {
-							const hour = forecastHour.modelData?.hour ?? 0;
-							return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`;
-						}
-					}
-
-					MaterialIcon {
-						Layout.alignment: Qt.AlignHCenter
-						font.pointSize: Appearance.font.size.extraLarge * 1.5
-						font.weight: 500
-						text: forecastHour.modelData?.icon ?? "cloud_alert"
-					}
-
-					CustomText {
-						Layout.alignment: Qt.AlignHCenter
-						color: DynamicColors.palette.m3secondary
-						font.pointSize: Appearance.font.size.larger
-						text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C`
-					}
-				}
-			}
-		}
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: {
+		const base = brief.implicitHeight + brief.anchors.topMargin;
+		if (showForecast)
+			return base + Appearance.spacing.large + forecast.implicitHeight + forecast.anchors.margins;
+		return base + brief.anchors.topMargin;
 	}
+	radius: Appearance.rounding.small
 
 	Timer {
 		interval: 900000 // 15 minutes
@@ -166,4 +27,27 @@ ColumnLayout {
 
 		onTriggered: Weather.reload()
 	}
+
+	BriefInfo {
+		id: brief
+
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		anchors.topMargin: Appearance.padding.extraLarge
+		rootHeight: root.rootHeight
+	}
+
+	Loader {
+		id: forecast
+
+		active: root.showForecast
+		anchors.bottom: parent.bottom
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		asynchronous: true
+
+		sourceComponent: Forecast {
+		}
+	}
 }

Modules/Osd/Content.qml

@@ -102,15 +102,13 @@ Item {
 					to: 1.0
 					value: root.brightness
 
-					onPressedChanged: {
-						if (!pressed) {
-							if (Config.osd.allMonBrightness) {
-								for (const mon of Brightness.monitors) {
-									mon.setBrightness(value);
-								}
-							} else {
-								root.monitor?.setBrightness(value);
+					onMoved: {
+						if (Config.osd.allMonBrightness) {
+							for (const mon of Brightness.monitors) {
+								mon.setBrightness(value);
 							}
+						} else {
+							root.monitor?.setBrightness(value);
 						}
 					}
 				}

Modules/Polkit/Polkit.qml

@@ -28,9 +28,7 @@ Scope {
 		visible: false
 
 		Connections {
-			target: root
-
-			onShouldShowChanged: {
+			function onShouldShowChanged(): void {
 				if (root.shouldShow) {
 					panelWindow.visible = true;
 					openAnim.start();
@@ -38,6 +36,8 @@ Scope {
 					closeAnim.start();
 				}
 			}
+
+			target: root
 		}
 
 		Anim {

Modules/Settings/Common/WallItem.qml

@@ -32,6 +32,31 @@ Item {
 			implicitHeight: width
 			radius: Appearance.rounding.large
 
+			Loader {
+				active: opacity > 0
+				anchors.centerIn: parent
+				opacity: img.status === Image.Ready ? 0 : 1
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
+				sourceComponent: CustomRect {
+					color: DynamicColors.palette.m3primaryContainer
+					implicitHeight: loadingIndicator.implicitSize + Appearance.padding.large * 2
+					implicitWidth: loadingIndicator.implicitSize + Appearance.padding.large * 2
+					radius: Appearance.rounding.full
+
+					LoadingIndicator {
+						id: loadingIndicator
+
+						anchors.centerIn: parent
+						containsIcon: true
+						implicitSize: Math.min(imgWrapper.width, imgWrapper.height) * 0.3
+					}
+				}
+			}
+
 			Image {
 				id: img
 

Modules/Settings/NavPane/NavLocations.qml

@@ -148,154 +148,200 @@ VerticalFadeFlickable {
 			}
 		}
 
-		ListView {
+		Column {
 			id: resultList
 
 			Layout.fillWidth: true
-			cacheBuffer: 10000
-			implicitHeight: contentHeight
-			interactive: false
 			spacing: Appearance.padding.large
 
-			delegate: ColumnLayout {
-				id: group
+			add: Transition {
+				Anim {
+					from: 0
+					property: "opacity"
+					to: 1
+					type: Anim.DefaultEffects
+				}
+			}
+			move: Transition {
+				Anim {
+					properties: "x,y"
+				}
 
-				required property int index
-				required property var modelData
+				Anim {
+					property: "opacity"
+					to: 1
+					type: Anim.DefaultEffects
+				}
+			}
 
-				spacing: Appearance.spacing.small
-				width: resultList.width
-
-				RowLayout {
-					Layout.fillWidth: true
-					Layout.leftMargin: Appearance.padding.small
-					spacing: Appearance.spacing.small
-
-					MaterialIcon {
-						color: DynamicColors.palette.m3primary
-						font.pointSize: Appearance.font.size.large
-						text: group.modelData.icon
-					}
-
-					CustomText {
-						Layout.fillWidth: true
-						color: DynamicColors.palette.m3primary
-						elide: Text.ElideRight
-						font.pointSize: Appearance.font.size.large
-						text: group.modelData.page
-					}
+			Repeater {
+				model: ScriptModel {
+					objectProp: "pageIdx"
+					values: root.groups
 				}
 
 				ColumnLayout {
-					Layout.fillWidth: true
-					spacing: Appearance.spacing.extraSmall / 2
+					id: group
 
-					Repeater {
-						model: group.modelData.entries
+					required property int index
+					required property var modelData
 
-						CustomRect {
-							id: result
+					spacing: Appearance.spacing.small
+					width: resultList.width
 
-							required property int index
-							readonly property bool isFirst: index === 0
-							readonly property bool isLast: index === group.modelData.entries.length - 1
-							required property var modelData
+					RowLayout {
+						Layout.fillWidth: true
+						Layout.leftMargin: Appearance.padding.small
+						spacing: Appearance.spacing.small
 
+						MaterialIcon {
+							color: DynamicColors.palette.m3primary
+							fill: 1
+							font.pointSize: Appearance.font.size.large
+							text: group.modelData.icon
+						}
+
+						CustomText {
 							Layout.fillWidth: true
-							bottomLeftRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
-							bottomRightRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
-							color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-							implicitHeight: {
-								const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2;
-								return h % 2 === 0 ? h : h + 1;
-							}
-							topLeftRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
-							topRightRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
+							color: DynamicColors.palette.m3secondary
+							elide: Text.ElideRight
+							font.pointSize: Appearance.font.size.large
+							text: group.modelData.page
+						}
+					}
 
-							RadiusBehavior on bottomLeftRadius {
+					Column {
+						id: cardList
+
+						Layout.fillWidth: true
+						spacing: Appearance.spacing.extraSmall / 2
+
+						add: Transition {
+							Anim {
+								from: 0
+								property: "opacity"
+								to: 1
+								type: Anim.DefaultEffects
 							}
-							RadiusBehavior on bottomRightRadius {
-							}
-							RadiusBehavior on topLeftRadius {
-							}
-							RadiusBehavior on topRightRadius {
+						}
+						move: Transition {
+							Anim {
+								properties: "x,y"
 							}
 
-							ColumnLayout {
-								id: resultLayout
+							Anim {
+								property: "opacity"
+								to: 1
+								type: Anim.DefaultEffects
+							}
+						}
 
-								anchors.fill: parent
-								anchors.margins: Appearance.padding.large
-								anchors.rightMargin: result.modelData.togglePath ? toggle.width + Appearance.padding.large * 2 : Appearance.padding.large
-								spacing: Appearance.spacing.small / 2
+						Repeater {
+							model: ScriptModel {
+								objectProp: "anchor"
+								values: group.modelData.entries
+							}
 
-								CustomText {
-									Layout.fillWidth: true
-									color: DynamicColors.palette.m3onSurfaceVariant
-									elide: Text.ElideRight
-									font.pointSize: Appearance.font.size.small
-									text: {
-										const labels = result.modelData.crumbLabels.slice(1);
-										const section = result.modelData.section;
-										const parts = section && section !== labels[labels.length - 1] ? labels.concat(section) : labels;
-										return parts.join("  \u203a  ");
+							CustomRect {
+								id: result
+
+								required property int index
+								readonly property bool isFirst: index === 0
+								readonly property bool isLast: index === group.modelData.entries.length - 1
+								required property var modelData
+
+								bottomLeftRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
+								bottomRightRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
+								color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+								implicitHeight: {
+									const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2;
+									return h % 2 === 0 ? h : h + 1;
+								}
+								topLeftRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
+								topRightRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
+								width: cardList.width
+
+								RadiusBehavior on bottomLeftRadius {
+								}
+								RadiusBehavior on bottomRightRadius {
+								}
+								RadiusBehavior on topLeftRadius {
+								}
+								RadiusBehavior on topRightRadius {
+								}
+
+								ColumnLayout {
+									id: resultLayout
+
+									anchors.fill: parent
+									anchors.margins: Appearance.padding.large
+									anchors.rightMargin: result.modelData.togglePath ? toggle.width + Appearance.padding.large * 2 : Appearance.padding.large
+									spacing: Appearance.spacing.small / 2
+
+									CustomText {
+										Layout.fillWidth: true
+										color: DynamicColors.palette.m3onSurfaceVariant
+										elide: Text.ElideRight
+										font.pointSize: Appearance.font.size.small
+										text: {
+											const labels = result.modelData.crumbLabels.slice(1);
+											const section = result.modelData.section;
+											const parts = section && section !== labels[labels.length - 1] ? labels.concat(section) : labels;
+											return parts.join("  \u203a  ");
+										}
+										visible: text.length > 0
+									}
+
+									CustomText {
+										Layout.fillWidth: true
+										color: DynamicColors.palette.m3onSurface
+										elide: Text.ElideRight
+										font.pointSize: Appearance.font.size.medium
+										text: SettingsSearcher.highlight(result.modelData.title, root.search, DynamicColors.palette.m3primary)
+										textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
+									}
+
+									CustomText {
+										Layout.fillWidth: true
+										color: DynamicColors.palette.m3outline
+										elide: Text.ElideRight
+										font.pointSize: Appearance.font.size.small
+										text: SettingsSearcher.highlight(result.modelData.subtext, root.search, DynamicColors.palette.m3primary)
+										textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
+										visible: result.modelData.subtext.length > 0
 									}
-									visible: text.length > 0
 								}
 
-								CustomText {
-									Layout.fillWidth: true
-									color: DynamicColors.palette.m3onSurface
-									elide: Text.ElideRight
-									font.pointSize: Appearance.font.size.medium
-									text: SettingsSearcher.highlight(result.modelData.title, root.search, DynamicColors.palette.m3primary)
-									textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
+								StateLayer {
+									id: layer
+
+									z: 1
+
+									onClicked: {
+										root.sState.jumpToSetting(result.modelData.pageIdx, result.modelData.subPath, result.modelData.anchor);
+									}
 								}
 
-								CustomText {
-									Layout.fillWidth: true
-									color: DynamicColors.palette.m3outline
-									elide: Text.ElideRight
-									font.pointSize: Appearance.font.size.small
-									text: SettingsSearcher.highlight(result.modelData.subtext, root.search, DynamicColors.palette.m3primary)
-									textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
-									visible: result.modelData.subtext.length > 0
+								CustomSwitch {
+									id: toggle
+
+									anchors.right: parent.right
+									anchors.rightMargin: Appearance.padding.large
+									anchors.verticalCenter: parent.verticalCenter
+									cLayer: 3
+									checked: result.modelData.toggleValue
+									scale: 0.85
+									transformOrigin: Item.Right
+									visible: result.modelData.togglePath
+									z: 2
+
+									onToggled: result.modelData.setToggle(checked)
 								}
 							}
-
-							StateLayer {
-								id: layer
-
-								z: 1
-
-								onClicked: {
-									root.sState.jumpToSetting(result.modelData.pageIdx, result.modelData.subPath, result.modelData.anchor);
-								}
-							}
-
-							CustomSwitch {
-								id: toggle
-
-								anchors.right: parent.right
-								anchors.rightMargin: Appearance.padding.large
-								anchors.verticalCenter: parent.verticalCenter
-								cLayer: 3
-								checked: result.modelData.toggleValue
-								scale: 0.85
-								transformOrigin: Item.Right
-								visible: result.modelData.togglePath
-								z: 2
-
-								onToggled: result.modelData.setToggle(checked)
-							}
 						}
 					}
 				}
 			}
-			model: ScriptModel {
-				objectProp: "pageIdx"
-				values: root.groups
-			}
 		}
 
 		CustomText {

Modules/Settings/Pages/Panels/Bar/BarClock.qml

@@ -48,7 +48,6 @@ PageBase {
 			Layout.topMargin: Appearance.spacing.extraSmall / 2 - parent.spacing
 			active: root.clockFormats.find(item => item.value === Config.general.dateFormat)
 			first: true
-			last: true
 			menuItems: root.clockFormats
 			settingAnchor: "bar-clock-format"
 			subtext: qsTr("Change how time is displayed in the widget")
@@ -58,5 +57,15 @@ PageBase {
 				Config.general.dateFormat = item.value;
 			}
 		}
+
+		ToggleRow {
+			checked: Config.services.useTwelveHourClock
+			last: true
+			settingAnchor: "bar-clock-twelve-hour"
+			subtext: qsTr("Format timestamps for twelve or twenty-four hours in UI")
+			text: qsTr("Twelve hour clock")
+
+			onToggled: Config.services.useTwelveHourClock = checked
+		}
 	}
 }

Modules/Wallpaper/WallBackground.qml

@@ -12,10 +12,10 @@ Item {
 	id: root
 
 	property bool completed
-	property real cropHeight: displayData.height ?? 1.0
-	property real cropWidth: displayData.width ?? 1.0
-	property real cropX: displayData.x ?? 0.0
-	property real cropY: displayData.y ?? 0.0
+	property real cropHeight: displayData?.height ?? 1.0
+	property real cropWidth: displayData?.width ?? 1.0
+	property real cropX: displayData?.x ?? 0.0
+	property real cropY: displayData?.y ?? 0.0
 	property WallpaperImage current
 	readonly property var displayData: Wallpapers.getCrop(screen.name)
 	required property ShellScreen screen