Initial commit for submenu popouts, unfinished

Reviewed-on: #90

.gitea/workflows/lint-js.yml

@@ -0,0 +1,42 @@
+name: Lint & Format (JS/TS)
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        runs-on: alpine
+        container: node:26-alpine
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git
+
+            - name: Prettier
+              continue-on-error: true
+              run: |
+                  if [ -n "$(find . \( -iname "*.js" -o -iname "*.jsx" -o -iname "*.ts" -o -iname "*.tsx" -o -iname "*.mjs" -o -iname "*.cjs" \) -print -quit)" ]; then
+                    npx --yes prettier --check "**/*.{js,jsx,ts,tsx,mjs,cjs}" --ignore-path .prettierignore
+                  else
+                    echo "No JS/TS files found"
+                  fi
+
+            - name: ESLint
+              run: |
+                  if [ -n "$(find . \( -iname "*.js" -o -iname "*.jsx" -o -iname "*.ts" -o -iname "*.tsx" -o -iname "*.mjs" -o -iname "*.cjs" \) -print -quit)" ]; then
+                    if [ -f package.json ]; then
+                      npm install --no-audit --no-fund
+                    fi
+                    if [ -f eslint.config.js ] || [ -f eslint.config.mjs ] || [ -f eslint.config.cjs ] || [ -f .eslintrc ] || [ -f .eslintrc.js ] || [ -f .eslintrc.cjs ] || [ -f .eslintrc.json ] || [ -f .eslintrc.yaml ] || [ -f .eslintrc.yml ]; then
+                      npx --yes eslint . && echo "ESLint passed" || echo "ESLint failed"
+                    else
+                      echo "No eslint config found"
+                    fi
+                  else
+                    echo "No JS/TS files found"
+                  fi

.gitea/workflows/lint-python.yml

@@ -0,0 +1,34 @@
+name: Lint & Format (Python)
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        runs-on: alpine
+        container: node:26-alpine
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git \
+                    python3 \
+                    py3-pip
+                  python3 -m venv .venv
+                  . .venv/bin/activate
+                  pip install --no-cache-dir ruff
+
+            - name: Format check
+              continue-on-error: true
+              run: |
+                  . .venv/bin/activate
+                  ruff format --check .
+
+            - name: Lint
+              run: |
+                  . .venv/bin/activate
+                  ruff check .

.gitea/workflows/lint-rust.yml

@@ -0,0 +1,72 @@
+name: Lint & Format (Rust)
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        runs-on: alpine
+        container: node:26-alpine
+        env:
+            CARGO_HOME: ${{ github.workspace }}/.cargo
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Cache cargo packages
+              uses: actions/cache@v4
+              env:
+                  cache-name: cache-cargo-packages
+              with:
+                  path: |
+                      .cargo/registry
+                      .cargo/git
+                      target
+                  key: rust-${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
+                  restore-keys: |
+                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
+                      rust-${{ runner.os }}-build-
+                      rust-
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git \
+                    cargo \
+                    rust \
+                    rustfmt \
+                    rust-clippy
+
+            - name: Format check
+              continue-on-error: true
+              run: |
+                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
+                    for manifest in $(find . -name "Cargo.toml"); do
+                      cargo fmt --manifest-path "$manifest" --check && \
+                        echo "$manifest: formatting OK" || \
+                        echo "$manifest: needs formatting"
+                    done
+                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
+                    echo "Rust files found but no Cargo.toml"
+                    exit 1
+                  else
+                    echo "No Rust project found"
+                  fi
+
+            - name: Clippy
+              run: |
+                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
+                    status=0
+                    for manifest in $(find . -name "Cargo.toml"); do
+                      cargo clippy --manifest-path "$manifest" --all-targets --all-features -- -D warnings && \
+                        echo "$manifest: Clippy passed" || \
+                        { echo "$manifest: Clippy failed"; status=1; }
+                    done
+                    exit $status
+                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
+                    echo "Rust files found but no Cargo.toml"
+                    exit 1
+                  else
+                    echo "No Rust project found"
+                  fi

.gitignore

@@ -1,3 +1,4 @@
+**/__pycache__/
 ./result/
 .pyre/
 .cache/
@@ -11,3 +12,4 @@ pkg/
 uv.lock
 .qtcreator/
 dist/
+**/target/

.prettierignore

@@ -0,0 +1,3 @@
+.venv/
+scripts/fzf.js
+scripts/fuzzysort.js

.prettierrc.json

@@ -0,0 +1,13 @@
+{
+    "semi": true,
+    "singleQuote": false,
+    "jsxSingleQuote": false,
+    "tabWidth": 4,
+    "printWidth": 80,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "proseWrap": "preserve"
+}

Components/Anim.qml

@@ -2,7 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: MaterialEasing.standardTime
-	easing.bezierCurve: MaterialEasing.standard
+	duration: Appearance.anim.durations.normal
+	easing.bezierCurve: Appearance.anim.curves.standard
 	easing.type: Easing.BezierSpline
 }

Components/CustomAudioSlider.qml

@@ -19,7 +19,7 @@ Slider {
 			bottomRightRadius: root.implicitHeight / 15
 			color: root.nonPeakColor
 			implicitWidth: root.handle.x - root.implicitHeight
-			radius: 1000
+			radius: Appearance.rounding.full
 			topRightRadius: root.implicitHeight / 15
 
 			CustomRect {
@@ -29,7 +29,7 @@ Slider {
 				bottomRightRadius: root.implicitHeight / 15
 				color: root.peakColor
 				implicitWidth: parent.width * root.peak
-				radius: 1000
+				radius: Appearance.rounding.full
 				topRightRadius: root.implicitHeight / 15
 
 				Behavior on implicitWidth {
@@ -49,7 +49,7 @@ Slider {
 			bottomLeftRadius: root.implicitHeight / 15
 			color: DynamicColors.tPalette.m3surfaceContainer
 			implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
-			radius: 1000
+			radius: Appearance.rounding.full
 			topLeftRadius: root.implicitHeight / 15
 		}
 	}
@@ -58,7 +58,7 @@ Slider {
 		color: DynamicColors.palette.m3primary
 		implicitHeight: 15
 		implicitWidth: 5
-		radius: 1000
+		radius: Appearance.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		MouseArea {

Components/CustomButton.qml

@@ -6,7 +6,7 @@ Button {
 	id: control
 
 	property color bgColor: DynamicColors.palette.m3primary
-	property int radius: 4
+	property int radius: Appearance.rounding.smallest / 2
 	property color textColor: DynamicColors.palette.m3onPrimary
 
 	background: CustomRect {

Components/CustomCheckbox.qml

@@ -22,7 +22,7 @@ CheckBox {
 		color: DynamicColors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: 4
+		radius: Appearance.rounding.smallest / 2
 
 		CustomRect {
 			color: DynamicColors.palette.m3primary

Components/CustomRadioButton.qml

@@ -25,7 +25,7 @@ RadioButton {
 		color: "transparent"
 		implicitHeight: 16
 		implicitWidth: 16
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Behavior on border.color {
 			CAnim {
@@ -47,7 +47,7 @@ RadioButton {
 			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
 			implicitHeight: 8
 			implicitWidth: 8
-			radius: 1000
+			radius: Appearance.rounding.full
 		}
 	}
 }

Components/CustomScrollBar.qml

@@ -29,7 +29,7 @@ ScrollBar {
 				return 0.6;
 			return 0;
 		}
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Behavior on opacity {
 			Anim {

Components/CustomSlider.qml

@@ -5,15 +5,17 @@ import qs.Config
 Slider {
 	id: root
 
+	property color color: DynamicColors.palette.m3primary
+
 	background: Item {
 		CustomRect {
 			anchors.bottom: parent.bottom
 			anchors.left: parent.left
 			anchors.top: parent.top
 			bottomRightRadius: root.implicitHeight / 6
-			color: DynamicColors.palette.m3primary
+			color: root.color
 			implicitWidth: root.handle.x - root.implicitHeight / 2
-			radius: 1000
+			radius: Appearance.rounding.full
 			topRightRadius: root.implicitHeight / 6
 		}
 
@@ -24,16 +26,16 @@ Slider {
 			bottomLeftRadius: root.implicitHeight / 6
 			color: DynamicColors.tPalette.m3surfaceContainer
 			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-			radius: 1000
+			radius: Appearance.rounding.full
 			topLeftRadius: root.implicitHeight / 6
 		}
 	}
 	handle: CustomRect {
 		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3primary
+		color: root.color
 		implicitHeight: 15
 		implicitWidth: 5
-		radius: 1000
+		radius: Appearance.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		MouseArea {

Components/CustomSwitch.qml

@@ -15,7 +15,7 @@ Switch {
 		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
 		implicitHeight: 13 + 7 * 2
 		implicitWidth: implicitHeight * 1.7
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
@@ -24,7 +24,7 @@ Switch {
 			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
 			implicitHeight: parent.implicitHeight - 10
 			implicitWidth: nonAnimWidth
-			radius: 1000
+			radius: Appearance.rounding.full
 			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
 
 			Behavior on implicitWidth {

Components/CustomTooltipContent.qml

@@ -22,7 +22,7 @@ Item {
 		implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
 		implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
 		opacity: shown ? 1 : 0
-		radius: 8
+		radius: Appearance.rounding.smallest
 
 		Behavior on implicitHeight {
 			Anim {

Components/ExtraIndicator.qml

@@ -10,7 +10,7 @@ CustomRect {
 	implicitHeight: count.implicitHeight + 4 * 2
 	implicitWidth: count.implicitWidth + 8 * 2
 	opacity: extra > 0 ? 1 : 0
-	radius: 8
+	radius: Appearance.rounding.smallest
 	scale: extra > 0 ? 1 : 0.5
 
 	Behavior on opacity {

Components/HoverIconButton.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+IconButton {
+	id: root
+
+	required property bool shouldBeVisible
+
+	opacity: 0
+	scale: 0
+	visible: root.scale > 0
+
+	Behavior on opacity {
+		Anim {
+			duration: Appearance.anim.durations.small
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	onShouldBeVisibleChanged: {
+		if (root.shouldBeVisible) {
+			root.opacity = 1;
+			root.scale = 1;
+		} else {
+			root.opacity = 0;
+			root.scale = 0;
+		}
+	}
+}

Components/IconButton.qml

@@ -41,12 +41,11 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
-
 		}
 	}
 

Components/MarqueeText.qml

@@ -102,6 +102,7 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
+				font.pointSize: elideText.font.pointSize
 				text: elideText.text
 			}
 
@@ -111,6 +112,7 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
+				font.pointSize: elideText.font.pointSize
 				text: t1.text
 				x: t1.width + root.gap
 			}

Components/StateLayer.qml

@@ -85,7 +85,7 @@ MouseArea {
 			border.pixelAligned: false
 			color: root.color
 			opacity: 0
-			radius: 1000
+			radius: Appearance.rounding.full
 
 			transform: Translate {
 				x: -ripple.width / 2

Config/Appearance.qml

@@ -4,6 +4,7 @@ import Quickshell
 
 Singleton {
 	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
 	// Literally just here to shorten accessing stuff :woe:

Config/AppearanceConf.qml

@@ -3,6 +3,8 @@ import Quickshell.Io
 JsonObject {
 	property Anim anim: Anim {
 	}
+	property Deform deform: Deform {
+	}
 	property FontStuff font: FontStuff {
 	}
 	property Padding padding: Padding {
@@ -43,6 +45,9 @@ JsonObject {
 		property real scale: 1
 		property int small: 200 * scale
 	}
+	component Deform: JsonObject {
+		property real scale: 1
+	}
 	component FontFamily: JsonObject {
 		property string clock: "Rubik"
 		property string material: "Material Symbols Rounded"
@@ -66,8 +71,8 @@ JsonObject {
 	}
 	component Padding: JsonObject {
 		property int large: 15 * scale
-		property int larger: 12 * scale
-		property int normal: 10 * scale
+		property int larger: 13 * scale
+		property int normal: 9 * scale
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
@@ -75,18 +80,18 @@ JsonObject {
 	}
 	component Rounding: JsonObject {
 		property int full: 1000 * scale
-		property int large: 25 * scale
-		property int normal: 17 * scale
+		property int large: 24 * scale
+		property int normal: 18 * scale
 		property real scale: 1
 		property int small: 12 * scale
 		property int smallest: 8 * scale
 	}
 	component Spacing: JsonObject {
 		property int large: 20 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
 		property int normal: 12 * scale
 		property real scale: 1
-		property int small: 7 * scale
+		property int small: 8 * scale
 		property int smaller: 10 * scale
 	}
 	component Transparency: JsonObject {

Config/BackgroundConfig.qml

@@ -4,4 +4,11 @@ import qs.Config
 JsonObject {
 	property bool enabled: true
 	property int wallFadeDuration: MaterialEasing.standardTime
+	property real alignX: 0.5
+	property real alignY: 0.5
+	property real zoom: 1.0
+	property real sourceClipX: 0
+	property real sourceClipY: 0
+	property real sourceClipW: 0
+	property real sourceClipH: 0
 }

Config/BarConfig.qml

@@ -8,10 +8,6 @@ JsonObject {
 			id: "workspaces",
 			enabled: true
 		},
-		{
-			id: "audio",
-			enabled: true
-		},
 		{
 			id: "media",
 			enabled: true
@@ -24,10 +20,6 @@ JsonObject {
 			id: "updates",
 			enabled: true
 		},
-		{
-			id: "dash",
-			enabled: true
-		},
 		{
 			id: "spacer",
 			enabled: true
@@ -48,10 +40,6 @@ JsonObject {
 			id: "tray",
 			enabled: true
 		},
-		{
-			id: "upower",
-			enabled: false
-		},
 		{
 			id: "network",
 			enabled: false
@@ -70,6 +58,7 @@ JsonObject {
 	property Popouts popouts: Popouts {
 	}
 	property int rounding: 8
+	property int smoothing: 32
 
 	component Popouts: JsonObject {
 		property bool activeWindow: true

Config/Config.qml

@@ -23,6 +23,7 @@ Singleton {
 	property alias osd: adapter.osd
 	property alias overview: adapter.overview
 	property bool recentlySaved: false
+	property alias screenshot: adapter.screenshot
 	property alias services: adapter.services
 	property alias sidebar: adapter.sidebar
 	property alias utilities: adapter.utilities
@@ -48,6 +49,9 @@ Singleton {
 			padding: {
 				scale: appearance.padding.scale
 			},
+			deform: {
+				scale: appearance.deform.scale
+			},
 			font: {
 				family: {
 					sans: appearance.font.family.sans,
@@ -77,7 +81,14 @@ Singleton {
 	function serializeBackground(): var {
 		return {
 			wallFadeDuration: background.wallFadeDuration,
-			enabled: background.enabled
+			enabled: background.enabled,
+			alignX: background.alignX,
+			sourceClipX: background.sourceClipX,
+			sourceClipY: background.sourceClipY,
+			sourceClipW: background.sourceClipW,
+			sourceClipH: background.sourceClipH,
+			alignY: background.alignY,
+			zoom: background.zoom
 		};
 	}
 
@@ -87,6 +98,7 @@ Singleton {
 			hideWhenNotif: barConfig.hideWhenNotif,
 			rounding: barConfig.rounding,
 			border: barConfig.border,
+			smoothing: barConfig.smoothing,
 			height: barConfig.height,
 			popouts: {
 				tray: barConfig.popouts.tray,
@@ -122,7 +134,8 @@ Singleton {
 			background: serializeBackground(),
 			launcher: serializeLauncher(),
 			colors: serializeColors(),
-			dock: serializeDock()
+			dock: serializeDock(),
+			screenshot: serializeScreenshot()
 		};
 	}
 
@@ -174,6 +187,7 @@ Singleton {
 			logo: general.logo,
 			wallpaperPath: general.wallpaperPath,
 			desktopIcons: general.desktopIcons,
+			dateFormat: general.dateFormat,
 			color: {
 				mode: general.color.mode,
 				smart: general.color.smart,
@@ -203,6 +217,7 @@ Singleton {
 		return {
 			maxAppsShown: launcher.maxAppsShown,
 			maxWallpapers: launcher.maxWallpapers,
+			uwsm: launcher.uwsm,
 			actionPrefix: launcher.actionPrefix,
 			specialPrefix: launcher.specialPrefix,
 			useFuzzy: {
@@ -226,6 +241,7 @@ Singleton {
 		return {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
+			showNotifContent: lock.showNotifContent,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {
@@ -267,9 +283,24 @@ Singleton {
 		};
 	}
 
+	function serializeScreenshot(): var {
+		return {
+			enable_pp: screenshot.enable_pp,
+			mode: screenshot.mode,
+			corner_radius: screenshot.corner_radius,
+			drop_shadow: screenshot.drop_shadow,
+			rounded_corners: screenshot.rounded_corners,
+			shadow_blur_radius: screenshot.shadow_blur_radius,
+			shadow_color: screenshot.shadow_color,
+			shadow_offset_x: screenshot.shadow_offset_x,
+			shadow_offset_y: screenshot.shadow_offset_y
+		};
+	}
+
 	function serializeServices(): var {
 		return {
 			weatherLocation: services.weatherLocation,
+			updates: services.updates,
 			useFahrenheit: services.useFahrenheit,
 			ddcutilService: services.ddcutilService,
 			useTwelveHourClock: services.useTwelveHourClock,
@@ -322,7 +353,6 @@ Singleton {
 
 	ElapsedTimer {
 		id: timer
-
 	}
 
 	Timer {
@@ -422,6 +452,8 @@ Singleton {
 			}
 			property Overview overview: Overview {
 			}
+			property Screenshot screenshot: Screenshot {
+			}
 			property Services services: Services {
 			}
 			property SidebarConfig sidebar: SidebarConfig {

Config/DynamicColors.qml

@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Io
+import Quickshell.Hyprland
 import QtQuick
 import ZShell
 import qs.Helpers
@@ -78,12 +79,59 @@ Singleton {
 		return Qt.hsla(c.hslHue, c.hslSaturation, 0.1, 1);
 	}
 
+	function reloadHyprRules(): void {
+		const blur = transparency.enabled ? 1 : 0;
+		const alpha = transparency.base - 0.03;
+
+		const rules = `
+			hl.layer_rule({
+				match = { namespace = "ZShell-Bar" },
+				blur = ${blur}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Bar" },
+				ignore_alpha = ${alpha}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Auth" },
+				blur = ${blur}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Auth" },
+				ignore_alpha = ${alpha}
+			})
+		`;
+
+		Hypr.extras.message(`eval ${rules}`);
+	}
+
 	function setMode(mode: string): void {
 		Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", mode]);
 		Config.general.color.mode = mode;
 		Config.save();
 	}
 
+	Component.onCompleted: debounceTimer.triggered()
+
+	Connections {
+		function onUsingLuaChanged(): void {
+			root.reloadHyprRules();
+		}
+
+		target: Hyprland
+	}
+
+	Connections {
+		function onConfigReloaded(): void {
+			root.reloadHyprRules();
+		}
+
+		target: Hypr
+	}
+
 	FileView {
 		path: `${Paths.state}/scheme.json`
 		watchChanges: true
@@ -92,72 +140,20 @@ Singleton {
 		onLoaded: root.load(text(), false)
 	}
 
+	Timer {
+		id: debounceTimer
+
+		interval: 300
+
+		onTriggered: root.reloadHyprRules()
+	}
+
 	ImageAnalyser {
 		id: analyser
 
 		source: WallpaperPath.currentWallpaperPath
 	}
 
-	component M3MaccchiatoPalette: QtObject {
-		property color m3background: "#131317"
-		property color m3error: "#ffb4ab"
-		property color m3errorContainer: "#93000a"
-		property color m3inverseOnSurface: "#303034"
-		property color m3inversePrimary: "#525b92"
-		property color m3inverseSurface: "#e4e1e7"
-		property color m3neutral_paletteKeyColor: "#77767b"
-		property color m3neutral_variant_paletteKeyColor: "#767680"
-		property color m3onBackground: "#e4e1e7"
-		property color m3onError: "#690005"
-		property color m3onErrorContainer: "#ffdad6"
-		property color m3onPrimary: "#232c60"
-		property color m3onPrimaryContainer: "#ffffff"
-		property color m3onPrimaryFixed: "#0b154b"
-		property color m3onPrimaryFixedVariant: "#3a4378"
-		property color m3onSecondary: "#2c2f44"
-		property color m3onSecondaryContainer: "#b1b3ce"
-		property color m3onSecondaryFixed: "#171a2e"
-		property color m3onSecondaryFixedVariant: "#42455c"
-		property color m3onSuccess: "#213528"
-		property color m3onSuccessContainer: "#D1E9D6"
-		property color m3onSurface: "#e4e1e7"
-		property color m3onSurfaceVariant: "#c6c5d1"
-		property color m3onTertiary: "#4c1f48"
-		property color m3onTertiaryContainer: "#000000"
-		property color m3onTertiaryFixed: "#340831"
-		property color m3onTertiaryFixedVariant: "#66365f"
-		property color m3outline: "#90909a"
-		property color m3outlineVariant: "#46464f"
-		property color m3primary: "#bac3ff"
-		property color m3primaryContainer: "#6a73ac"
-		property color m3primaryFixed: "#dee0ff"
-		property color m3primaryFixedDim: "#bac3ff"
-		property color m3primary_paletteKeyColor: "#6a73ac"
-		property color m3scrim: "#000000"
-		property color m3secondary: "#c3c5e0"
-		property color m3secondaryContainer: "#42455c"
-		property color m3secondaryFixed: "#dfe1fd"
-		property color m3secondaryFixedDim: "#c3c5e0"
-		property color m3secondary_paletteKeyColor: "#72758e"
-		property color m3shadow: "#000000"
-		property color m3success: "#B5CCBA"
-		property color m3successContainer: "#374B3E"
-		property color m3surface: "#131317"
-		property color m3surfaceBright: "#39393d"
-		property color m3surfaceContainer: "#1f1f23"
-		property color m3surfaceContainerHigh: "#2a2a2e"
-		property color m3surfaceContainerHighest: "#353438"
-		property color m3surfaceContainerLow: "#1b1b1f"
-		property color m3surfaceContainerLowest: "#0e0e12"
-		property color m3surfaceDim: "#131317"
-		property color m3surfaceTint: "#bac3ff"
-		property color m3surfaceVariant: "#46464f"
-		property color m3tertiary: "#f1b3e5"
-		property color m3tertiaryContainer: "#b77ead"
-		property color m3tertiaryFixed: "#ffd7f4"
-		property color m3tertiaryFixedDim: "#f1b3e5"
-		property color m3tertiary_paletteKeyColor: "#9b6592"
-	}
 	component M3Palette: QtObject {
 		property color m3background: "#191114"
 		property color m3error: "#ffb4ab"
@@ -279,8 +275,11 @@ Singleton {
 		readonly property color m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
 	}
 	component Transparency: QtObject {
-		readonly property real base: Appearance.transparency.base - (root.light ? 0.1 : 0)
+		readonly property real base: Math.max(0, Math.min(1, Appearance.transparency.base - (root.light ? 0.1 : 0)))
 		readonly property bool enabled: Appearance.transparency.enabled
 		readonly property real layers: Appearance.transparency.layers
+
+		onBaseChanged: debounceTimer.restart()
+		onEnabledChanged: debounceTimer.restart()
 	}
 }

Config/General.qml

@@ -6,6 +6,7 @@ JsonObject {
 	}
 	property Color color: Color {
 	}
+	property string dateFormat: "ddd d MMM - hh:mm:ss"
 	property bool desktopIcons: false
 	property Idle idle: Idle {
 	}

Config/Launcher.qml

@@ -91,6 +91,7 @@ JsonObject {
 	property string specialPrefix: "@"
 	property UseFuzzy useFuzzy: UseFuzzy {
 	}
+	property bool uwsm: true
 
 	component Sizes: JsonObject {
 		property int itemHeight: 50

Config/LockConf.qml

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

Config/Screenshot.qml

@@ -0,0 +1,13 @@
+import Quickshell.Io
+
+JsonObject {
+	property real corner_radius: 12.0
+	property bool drop_shadow: true
+	property bool enable_pp: true
+	property string mode: "manual"
+	property bool rounded_corners: false
+	property real shadow_blur_radius: 22.0
+	property list<int> shadow_color: [0, 0, 0, 160]
+	property real shadow_offset_x: 5.0
+	property real shadow_offset_y: 5.0
+}

Config/Services.qml

@@ -14,6 +14,7 @@ JsonObject {
 			"to": "YT Music"
 		}
 	]
+	property bool updates: true
 	property bool useFahrenheit: false
 	property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
 	property int visualizerBars: 30

Daemons/NotifServer.qml

@@ -113,11 +113,12 @@ Singleton {
 		id: storage
 
 		path: `${Paths.state}/notifs.json`
+		printErrors: false
 
 		onLoadFailed: err => {
 			if (err === FileViewError.FileNotFound) {
 				root.loaded = true;
-				setText("[]");
+				Qt.callLater(() => setText("[]"));
 			}
 		}
 		onLoaded: {

Drawers/Backgrounds.qml

@@ -48,7 +48,7 @@ Shape {
 
 	Modules.Background {
 		invertBottomRounding: wrapper.x <= 0
-		rounding: root.panels.popouts.currentName.startsWith("updates") ? Appearance.rounding.normal : Appearance.rounding.smallest
+		rounding: root.panels.popouts.currentName.startsWith("updates") || root.panels.popouts.currentName.startsWith("audio") ? Appearance.rounding.normal : Appearance.rounding.smallest
 		startX: wrapper.x - rounding
 		startY: wrapper.y
 		wrapper: root.panels.popouts

Drawers/Drawing.qml

@@ -3,184 +3,33 @@ import QtQuick
 Canvas {
 	id: root
 
-	property rect dirtyRect: Qt.rect(0, 0, 0, 0)
-	property bool frameQueued: false
-	property bool fullRepaintPending: true
-	property point lastPoint: Qt.point(0, 0)
-	property real minPointDistance: 2.0
 	property color penColor: "white"
 	property real penWidth: 4
-	property var pendingSegments: []
-	property bool strokeActive: false
-	property var strokes: []
+	property var points: []
 
-	function appendPoint(x, y) {
-		if (!strokeActive || strokes.length === 0)
+	function clear(): void {
+		var ctx = getContext('2d');
+		root.points = [];
+		ctx.reset();
+		root.requestPaint();
+	}
+
+	renderStrategy: Canvas.Cooperative
+
+	onPaint: {
+		if (points.length < 2)
 			return;
-		const dx = x - lastPoint.x;
-		const dy = y - lastPoint.y;
-
-		if ((dx * dx + dy * dy) < (minPointDistance * minPointDistance))
-			return;
-		const x1 = lastPoint.x;
-		const y1 = lastPoint.y;
-		const x2 = x;
-		const y2 = y;
-
-		strokes[strokes.length - 1].push(Qt.point(x2, y2));
-
-		pendingSegments.push({
-			dot: false,
-			x1: x1,
-			y1: y1,
-			x2: x2,
-			y2: y2
-		});
-
-		lastPoint = Qt.point(x2, y2);
-		queueDirty(segmentDirtyRect(x1, y1, x2, y2));
-	}
-
-	function beginStroke(x, y) {
-		const p = Qt.point(x, y);
-		strokes.push([p]);
-		lastPoint = p;
-		strokeActive = true;
-
-		pendingSegments.push({
-			dot: true,
-			x: x,
-			y: y
-		});
-
-		queueDirty(pointDirtyRect(x, y));
-	}
-
-	function clear() {
-		strokes = [];
-		pendingSegments = [];
-		dirtyRect = Qt.rect(0, 0, 0, 0);
-		fullRepaintPending = true;
-		markDirty(Qt.rect(0, 0, width, height));
-	}
-
-	function drawDot(ctx, x, y) {
-		ctx.beginPath();
-		ctx.arc(x, y, penWidth / 2, 0, Math.PI * 2);
-		ctx.fill();
-	}
-
-	function drawSegment(ctx, x1, y1, x2, y2) {
-		ctx.beginPath();
-		ctx.moveTo(x1, y1);
-		ctx.lineTo(x2, y2);
-		ctx.stroke();
-	}
-
-	function endStroke() {
-		strokeActive = false;
-	}
-
-	function pointDirtyRect(x, y) {
-		const pad = penWidth + 2;
-		return Qt.rect(x - pad, y - pad, pad * 2, pad * 2);
-	}
-
-	function queueDirty(r) {
-		dirtyRect = unionRects(dirtyRect, r);
-
-		if (frameQueued)
-			return;
-		frameQueued = true;
-
-		requestAnimationFrame(function () {
-			frameQueued = false;
-
-			if (dirtyRect.width > 0 && dirtyRect.height > 0) {
-				markDirty(dirtyRect);
-				dirtyRect = Qt.rect(0, 0, 0, 0);
-			}
-		});
-	}
-
-	function replayAll(ctx) {
-		ctx.clearRect(0, 0, width, height);
-
-		for (const stroke of strokes) {
-			if (!stroke || stroke.length === 0)
-				continue;
-			if (stroke.length === 1) {
-				const p = stroke[0];
-				drawDot(ctx, p.x, p.y);
-				continue;
-			}
-
-			ctx.beginPath();
-			ctx.moveTo(stroke[0].x, stroke[0].y);
-			for (let i = 1; i < stroke.length; ++i)
-				ctx.lineTo(stroke[i].x, stroke[i].y);
-			ctx.stroke();
-		}
-	}
-
-	function requestFullRepaint() {
-		fullRepaintPending = true;
-		markDirty(Qt.rect(0, 0, width, height));
-	}
-
-	function segmentDirtyRect(x1, y1, x2, y2) {
-		const pad = penWidth + 2;
-		const left = Math.min(x1, x2) - pad;
-		const top = Math.min(y1, y2) - pad;
-		const right = Math.max(x1, x2) + pad;
-		const bottom = Math.max(y1, y2) + pad;
-		return Qt.rect(left, top, right - left, bottom - top);
-	}
-
-	function unionRects(a, b) {
-		if (a.width <= 0 || a.height <= 0)
-			return b;
-		if (b.width <= 0 || b.height <= 0)
-			return a;
-
-		const left = Math.min(a.x, b.x);
-		const top = Math.min(a.y, b.y);
-		const right = Math.max(a.x + a.width, b.x + b.width);
-		const bottom = Math.max(a.y + a.height, b.y + b.height);
-
-		return Qt.rect(left, top, right - left, bottom - top);
-	}
-
-	anchors.fill: parent
-	contextType: "2d"
-	renderStrategy: Canvas.Threaded
-	renderTarget: Canvas.Image
-
-	onHeightChanged: requestFullRepaint()
-	onPaint: region => {
-		const ctx = getContext("2d");
-
+		var ctx = root.getContext('2d');
+		ctx.save();
+		ctx.lineWidth = root.penWidth;
+		ctx.strokeStyle = root.penColor;
 		ctx.lineCap = "round";
-		ctx.lineJoin = "round";
-		ctx.lineWidth = penWidth;
-		ctx.strokeStyle = penColor;
-		ctx.fillStyle = penColor;
-
-		if (fullRepaintPending) {
-			fullRepaintPending = false;
-			replayAll(ctx);
-			pendingSegments = [];
-			return;
-		}
-
-		for (const seg of pendingSegments) {
-			if (seg.dot)
-				drawDot(ctx, seg.x, seg.y);
-			else
-				drawSegment(ctx, seg.x1, seg.y1, seg.x2, seg.y2);
-		}
-
-		pendingSegments = [];
+		ctx.beginPath();
+		ctx.moveTo(points[0].x, points[0].y);
+		for (var i = 1; i < points.length; i++)
+			ctx.lineTo(points[i].x, points[i].y);
+		ctx.stroke();
+		points = points.slice(points.length - 2);
+		ctx.restore();
 	}
-	onWidthChanged: requestFullRepaint()
 }

Drawers/DrawingInput.qml

@@ -30,8 +30,10 @@ CustomMouseArea {
 		const x = event.x;
 		const y = event.y;
 
-		if (event.buttons & Qt.LeftButton)
-			root.drawing.appendPoint(x, y);
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
+		}
 
 		if (root.inLeftPanel(root.popout, x, y)) {
 			root.z = -2;
@@ -44,7 +46,8 @@ CustomMouseArea {
 
 		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
 			root.panels.drawing.expanded = false;
-			root.drawing.beginStroke(x, y);
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
 			return;
 		}
 
@@ -52,7 +55,6 @@ CustomMouseArea {
 			root.drawing.clear();
 	}
 	onReleased: {
-		if (root.visibilities.isDrawing)
-			root.drawing.endStroke();
+		root.drawing.points = [];
 	}
 }

Drawers/Exclusions.qml

@@ -12,22 +12,37 @@ Scope {
 	required property ShellScreen screen
 
 	ExclusionZone {
+		id: top
+
 		anchors.top: true
 		exclusiveZone: root.bar.exclusiveZone
 	}
 
 	ExclusionZone {
+		id: left
+
 		anchors.left: true
 	}
 
 	ExclusionZone {
+		id: right
+
 		anchors.right: true
 	}
 
 	ExclusionZone {
+		id: bottom
+
 		anchors.bottom: true
 	}
 
+	Timer {
+		interval: 5000
+		running: true
+
+		onTriggered: console.log("top height:", top.exclusiveZone, "left width:", left.exclusiveZone, "right width:", right.exclusiveZone, "bottom height:", bottom.exclusiveZone)
+	}
+
 	component ExclusionZone: CustomWindow {
 		exclusiveZone: Config.barConfig.border
 		implicitHeight: 1

Drawers/Interactions.qml

@@ -52,8 +52,9 @@ CustomMouseArea {
 	}
 
 	anchors.fill: parent
+	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
 	hoverEnabled: true
-	propagateComposedEvents: true
+	propagateComposedEvents: false
 
 	onContainsMouseChanged: {
 		if (!containsMouse) {
@@ -71,24 +72,32 @@ CustomMouseArea {
 		}
 	}
 	onPositionChanged: event => {
-		if (popouts.isDetached)
-			return;
-
 		const x = event.x;
 		const y = event.y;
 		const dragX = x - dragStart.x;
 		const dragY = y - dragStart.y;
 
 		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
-			root.input.z = 2;
+			// root.input.z = 2;
 			root.panels.drawing.expanded = false;
 		}
 
 		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
 			bar.isHovered = true;
 
+		if (pressed && dragStart.y < bar.implicitHeight) {
+			if (dragY > 20)
+				visibilities.settings = true;
+			else if (dragY < -20)
+				visibilities.settings = false;
+		}
+
+		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
+			if (dragY < -10)
+				visibilities.dock = true;
+
 		if (panels.sidebar.width === 0) {
-			const showOsd = inRightPanel(panels.osd, x, y);
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
 
 			if (showOsd) {
 				osdShortcutActive = false;
@@ -96,7 +105,7 @@ CustomMouseArea {
 			}
 		} else {
 			const outOfSidebar = x < width - panels.sidebar.width;
-			const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y);
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
 
 			if (!osdShortcutActive) {
 				visibilities.osd = showOsd;
@@ -107,13 +116,14 @@ CustomMouseArea {
 			}
 		}
 
-		if (!visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
+		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
 			visibilities.dock = true;
 
 		if (y < root.bar.implicitHeight) {
 			root.bar.checkPopout(x);
 		}
 	}
+	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -168,7 +178,7 @@ CustomMouseArea {
 		}
 
 		function onResourcesChanged() {
-			if (root.visibilities.resources && root.popouts.currentName.startsWith("audio")) {
+			if (root.visibilities.resources && (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))) {
 				root.popouts.hasCurrent = false;
 			}
 
@@ -180,6 +190,7 @@ CustomMouseArea {
 			if (root.visibilities.settings) {
 				root.visibilities.resources = false;
 				root.visibilities.dashboard = false;
+				root.visibilities.sidebar = false;
 				root.panels.popouts.hasCurrent = false;
 				root.visibilities.launcher = false;
 			}
@@ -188,6 +199,7 @@ CustomMouseArea {
 		function onSidebarChanged() {
 			if (root.visibilities.sidebar) {
 				root.visibilities.dashboard = false;
+				root.visibilities.settings = false;
 				root.popouts.hasCurrent = false;
 			}
 		}

Drawers/Panels.qml

@@ -13,6 +13,7 @@ import qs.Modules.Resources as Resources
 import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
+import qs.Modules.SysTray.Popouts as SysPopouts
 import qs.Config
 
 Item {
@@ -20,18 +21,24 @@ Item {
 
 	required property Item bar
 	readonly property alias dashboard: dashboard
+	readonly property alias dashboardWrapper: dashboardWrapper
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
 	required property Canvas drawingItem
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
-	readonly property alias popouts: popouts
+	readonly property alias osdWrapper: osdWrapper
+	readonly property alias popouts: popouts.content
+	readonly property alias popoutsWrapper: popouts
 	readonly property alias resources: resources
+	readonly property alias resourcesWrapper: resourcesWrapper
 	required property ShellScreen screen
 	readonly property alias settings: settings
+	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
 
@@ -39,12 +46,43 @@ Item {
 	anchors.margins: Config.barConfig.border
 	anchors.topMargin: bar.implicitHeight
 
-	Resources.Wrapper {
-		id: resources
+	Item {
+		id: resourcesWrapper
 
 		anchors.left: parent.left
 		anchors.top: parent.top
-		visibilities: root.visibilities
+		clip: true
+		implicitHeight: resources.implicitHeight * (1 - resources.offsetScale)
+		implicitWidth: resources.implicitWidth
+
+		Resources.Wrapper {
+			id: resources
+
+			anchors.left: parent.left
+			anchors.top: parent.top
+			visibilities: root.visibilities
+		}
+	}
+
+	Item {
+		id: osdWrapper
+
+		anchors.right: parent.right
+		anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
+		anchors.verticalCenter: parent.verticalCenter
+		clip: sidebar.visible
+		implicitHeight: osd.implicitHeight
+		implicitWidth: osd.implicitWidth * (1 - osd.offsetScale)
+
+		Osd.Wrapper {
+			id: osd
+
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			screen: root.screen
+			sidebarOrSessionVisible: sidebar.visible
+			visibilities: root.visibilities
+		}
 	}
 
 	Drawing.Wrapper {
@@ -57,29 +95,84 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Osd.Wrapper {
-		id: osd
+	Item {
+		id: traySubmenus
 
-		anchors.right: parent.right
-		anchors.rightMargin: sidebar.width
-		anchors.verticalCenter: parent.verticalCenter
-		clip: sidebar.width > 0
-		screen: root.screen
-		visibilities: root.visibilities
+		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.Wrapper {
+	Modules.ClipWrapper {
 		id: popouts
 
 		anchors.top: parent.top
 		screen: root.screen
-		x: {
-			const off = currentCenter - nonAnimWidth / 2;
-			const diff = root.width - Math.floor(off + nonAnimWidth);
-			if (diff < 0)
-				return off + diff;
-			return Math.floor(Math.max(off, 0));
-		}
 	}
 
 	Toasts.Toasts {
@@ -96,6 +189,7 @@ Item {
 		anchors.right: parent.right
 		anchors.top: parent.top
 		panels: root
+		sidebarPanel: sidebar
 		visibilities: root.visibilities
 	}
 
@@ -119,12 +213,33 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Dashboard.Wrapper {
-		id: dashboard
+	Item {
+		id: dashboardWrapper
+
+		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
 		anchors.right: parent.right
 		anchors.top: parent.top
-		visibilities: root.visibilities
+		clip: true
+		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
+		implicitWidth: dashboard.implicitWidth
+
+		Behavior on offsetScale {
+			Anim {
+				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			}
+		}
+
+		Dashboard.Wrapper {
+			id: dashboard
+
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.topMargin: (-implicitHeight - 5) * offsetScale
+			offsetScale: dashboardWrapper.offsetScale
+			visibilities: root.visibilities
+		}
 	}
 
 	Sidebar.Wrapper {
@@ -137,14 +252,25 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Settings.Wrapper {
-		id: settings
+	Item {
+		id: settingsWrapper
 
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		panels: root
-		screen: root.screen
-		visibilities: root.visibilities
+		clip: true
+		implicitHeight: settings.implicitHeight * (1 - settings.offsetScale)
+		implicitWidth: settings.implicitWidth
+
+		Settings.Wrapper {
+			id: settings
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.top: parent.top
+			// anchors.centerIn: parent
+			panels: root
+			screen: root.screen
+			visibilities: root.visibilities
+		}
 	}
 
 	Dock.Wrapper {

Drawers/Windows.qml

@@ -3,8 +3,10 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Effects
 import Quickshell
+import Quickshell.Io
 import Quickshell.Wayland
 import Quickshell.Hyprland
+import ZShell.Blobs
 import qs.Daemons
 import qs.Components
 import qs.Modules
@@ -62,7 +64,7 @@ Variants {
 
 				height: win.height - bar.implicitHeight - Config.barConfig.border
 				intersection: Intersection.Xor
-				regions: popoutRegions.instances
+				regions: [...popoutRegions.instances, ...subMenuRegions.instances]
 				width: win.width - Config.barConfig.border * 2
 				x: Config.barConfig.border
 				y: bar.implicitHeight
@@ -91,6 +93,22 @@ Variants {
 				}
 			}
 
+			Variants {
+				id: subMenuRegions
+
+				model: panels.traySubmenus.children
+
+				Region {
+					required property Item modelData
+
+					height: modelData.height
+					intersection: Intersection.Subtract
+					width: modelData.width
+					x: modelData.x + panels.traySubmenus.x + Config.barConfig.border
+					y: modelData.y + panels.traySubmenus.y + bar.implicitHeight
+				}
+			}
+
 			HyprlandFocusGrab {
 				id: focusGrab
 
@@ -126,6 +144,14 @@ Variants {
 				Component.onCompleted: Visibilities.load(scope.modelData, this)
 			}
 
+			IpcHandler {
+				function toggleLauncher(fix: string): void {
+					visibilities.launcher = !visibilities.launcher;
+				}
+
+				target: "visibilities"
+			}
+
 			Binding {
 				property: "bar"
 				target: visibilities
@@ -144,16 +170,165 @@ Variants {
 					shadowEnabled: true
 				}
 
-				Border {
-					bar: bar
-					visibilities: visibilities
+				BlobGroup {
+					id: blobGroup
+
+					color: DynamicColors.palette.m3surface
+					smoothing: Config.barConfig.smoothing
+
+					Behavior on color {
+						CAnim {
+						}
+					}
 				}
 
-				Backgrounds {
-					bar: bar
-					panels: panels
-					visibilities: visibilities
-					z: 1
+				BlobInvertedRect {
+					anchors.fill: parent
+					anchors.margins: -50
+					borderBottom: Config.barConfig.border - anchors.margins
+					borderLeft: Config.barConfig.border - anchors.margins
+					borderRight: Config.barConfig.border - anchors.margins
+					borderTop: bar.implicitHeight - anchors.margins
+					group: blobGroup
+					radius: Config.barConfig.rounding
+				}
+
+				PanelBg {
+					id: dashBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.dashboard.height * (1 + extraHeight)
+					implicitWidth: panels.dashboard.width
+					panel: panels.dashboardWrapper
+					radius: Appearance.rounding.normal
+					x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
+					y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+				}
+
+				PanelBg {
+					id: launcherBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.launcher.height * (1 + extraHeight)
+					panel: panels.launcher
+					radius: Appearance.rounding.smallest + 5
+					y: panels.launcher.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: sidebarBg
+
+					bottomLeftRadius: 0
+					deformAmount: 0.04
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
+					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
+					panel: panels.sidebar
+				}
+
+				PanelBg {
+					id: osdBg
+
+					deformAmount: 0.1
+					implicitHeight: panels.osd.height
+					implicitWidth: panels.osd.width
+					panel: panels.osdWrapper
+					radius: 20
+					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
+					y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: notifsBg
+
+					panel: panels.notifications
+				}
+
+				PanelBg {
+					id: utilsBg
+
+					deformAmount: panels.sidebar.visible ? (0.1) : (0.1)
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
+					panel: panels.utilities
+					topLeftRadius: 0
+				}
+
+				PanelBg {
+					id: popoutBg
+
+					property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
+
+					deformAmount: panels.popouts.isDetached ? 0.05 : panels.popouts.hasCurrent ? 0.15 : 0.1
+					implicitHeight: panels.popouts.height * (1 + extraHeight)
+					implicitWidth: panels.popouts.width
+					panel: panels.popoutsWrapper
+					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : 20 * Appearance.rounding.scale
+					x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
+					y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+
+					Behavior on extraHeight {
+						Anim {
+						}
+					}
+				}
+
+				PanelBg {
+					id: resourcesBg
+
+					deformAmount: 0.05
+					implicitHeight: panels.resources.height
+					implicitWidth: panels.resources.width
+					panel: panels.resourcesWrapper
+					radius: Appearance.rounding.normal
+					x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
+					y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: settingsBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.03
+					implicitHeight: panels.settings.height * (1 + extraHeight)
+					implicitWidth: panels.settings.width
+					panel: panels.settings
+					radius: Appearance.rounding.large
+					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
+					topRightRadius: Appearance.rounding.large + Appearance.padding.smaller
+					x: panels.settingsWrapper.x + panels.settings.x + Config.barConfig.border
+					y: panels.settingsWrapper.y + panels.settings.y + bar.implicitHeight - panels.settings.height * extraHeight
+				}
+
+				PanelBg {
+					id: dockBg
+
+					deformAmount: 0.08
+					panel: panels.dock
+					radius: Appearance.rounding.normal
+				}
+
+				PanelBg {
+					id: drawingBg
+
+					deformAmount: 0.08
+					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
+					}
 				}
 			}
 
@@ -195,6 +370,37 @@ Variants {
 					drawingItem: drawing
 					screen: scope.modelData
 					visibilities: visibilities
+
+					dashboard.transform: Matrix4x4 {
+						matrix: dashBg.deformMatrix
+					}
+					dock.transform: Matrix4x4 {
+						matrix: dockBg.deformMatrix
+					}
+					launcher.transform: Matrix4x4 {
+						matrix: launcherBg.deformMatrix
+					}
+					notifications.transform: Matrix4x4 {
+						matrix: notifsBg.deformMatrix
+					}
+					osd.transform: Matrix4x4 {
+						matrix: osdBg.deformMatrix
+					}
+					popouts.transform: Matrix4x4 {
+						matrix: popoutBg.deformMatrix
+					}
+					resources.transform: Matrix4x4 {
+						matrix: resourcesBg.deformMatrix
+					}
+					settings.transform: Matrix4x4 {
+						matrix: settingsBg.deformMatrix
+					}
+					sidebar.transform: Matrix4x4 {
+						matrix: sidebarBg.deformMatrix
+					}
+					utilities.transform: Matrix4x4 {
+						matrix: utilsBg.deformMatrix
+					}
 				}
 
 				BarLoader {
@@ -203,10 +409,24 @@ Variants {
 					anchors.left: parent.left
 					anchors.right: parent.right
 					popouts: panels.popouts
+					popoutsWrapper: panels.popoutsWrapper
 					screen: scope.modelData
 					visibilities: visibilities
 				}
 			}
 		}
 	}
+
+	component PanelBg: BlobRect {
+		property real deformAmount: 0.15
+		required property Item panel
+
+		deformScale: (deformAmount * Config.appearance.deform.scale) / 10000
+		group: blobGroup
+		implicitHeight: panel.height
+		implicitWidth: panel.width
+		radius: Appearance.rounding.smallest
+		x: panel.x + Config.barConfig.border
+		y: panel.y + bar.implicitHeight
+	}
 }

Greeter/Components/CustomAudioSlider.qml

@@ -19,7 +19,7 @@ Slider {
 			bottomRightRadius: root.implicitHeight / 15
 			color: root.nonPeakColor
 			implicitWidth: root.handle.x - root.implicitHeight
-			radius: 1000
+			radius: Appearance.rounding.full
 			topRightRadius: root.implicitHeight / 15
 
 			CustomRect {
@@ -29,7 +29,7 @@ Slider {
 				bottomRightRadius: root.implicitHeight / 15
 				color: root.peakColor
 				implicitWidth: parent.width * root.peak
-				radius: 1000
+				radius: Appearance.rounding.full
 				topRightRadius: root.implicitHeight / 15
 
 				Behavior on implicitWidth {
@@ -49,7 +49,7 @@ Slider {
 			bottomLeftRadius: root.implicitHeight / 15
 			color: DynamicColors.tPalette.m3surfaceContainer
 			implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
-			radius: 1000
+			radius: Appearance.rounding.full
 			topLeftRadius: root.implicitHeight / 15
 		}
 	}
@@ -58,7 +58,7 @@ Slider {
 		color: DynamicColors.palette.m3primary
 		implicitHeight: 15
 		implicitWidth: 5
-		radius: 1000
+		radius: Appearance.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		MouseArea {

Greeter/Components/CustomButton.qml

@@ -6,7 +6,7 @@ Button {
 	id: control
 
 	property color bgColor: DynamicColors.palette.m3primary
-	property int radius: 4
+	property int radius: Appearance.rounding.smallest / 2
 	property color textColor: DynamicColors.palette.m3onPrimary
 
 	background: CustomRect {

Greeter/Components/CustomCheckbox.qml

@@ -22,7 +22,7 @@ CheckBox {
 		color: DynamicColors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: 4
+		radius: Appearance.rounding.smallest / 2
 
 		CustomRect {
 			color: DynamicColors.palette.m3primary

Greeter/Components/CustomRadioButton.qml

@@ -25,7 +25,7 @@ RadioButton {
 		color: "transparent"
 		implicitHeight: 16
 		implicitWidth: 16
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Behavior on border.color {
 			CAnim {
@@ -47,7 +47,7 @@ RadioButton {
 			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
 			implicitHeight: 8
 			implicitWidth: 8
-			radius: 1000
+			radius: Appearance.rounding.full
 		}
 	}
 }

Greeter/Components/CustomScrollBar.qml

@@ -29,7 +29,7 @@ ScrollBar {
 				return 0.6;
 			return 0;
 		}
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Behavior on opacity {
 			Anim {

Greeter/Components/CustomSlider.qml

@@ -13,7 +13,7 @@ Slider {
 			bottomRightRadius: root.implicitHeight / 6
 			color: DynamicColors.palette.m3primary
 			implicitWidth: root.handle.x - root.implicitHeight / 2
-			radius: 1000
+			radius: Appearance.rounding.full
 			topRightRadius: root.implicitHeight / 6
 		}
 
@@ -24,7 +24,7 @@ Slider {
 			bottomLeftRadius: root.implicitHeight / 6
 			color: DynamicColors.tPalette.m3surfaceContainer
 			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-			radius: 1000
+			radius: Appearance.rounding.full
 			topLeftRadius: root.implicitHeight / 6
 		}
 	}
@@ -33,7 +33,7 @@ Slider {
 		color: DynamicColors.palette.m3primary
 		implicitHeight: 15
 		implicitWidth: 5
-		radius: 1000
+		radius: Appearance.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		MouseArea {

Greeter/Components/CustomSwitch.qml

@@ -15,7 +15,7 @@ Switch {
 		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
 		implicitHeight: 13 + 7 * 2
 		implicitWidth: implicitHeight * 1.7
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
@@ -24,7 +24,7 @@ Switch {
 			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
 			implicitHeight: parent.implicitHeight - 10
 			implicitWidth: nonAnimWidth
-			radius: 1000
+			radius: Appearance.rounding.full
 			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
 
 			Behavior on implicitWidth {

Greeter/Components/CustomTooltipContent.qml

@@ -22,7 +22,7 @@ Item {
 		implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
 		implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
 		opacity: shown ? 1 : 0
-		radius: 8
+		radius: Appearance.rounding.smallest
 
 		Behavior on implicitHeight {
 			Anim {

Greeter/Components/ExtraIndicator.qml

@@ -10,7 +10,7 @@ CustomRect {
 	implicitHeight: count.implicitHeight + 4 * 2
 	implicitWidth: count.implicitWidth + 8 * 2
 	opacity: extra > 0 ? 1 : 0
-	radius: 8
+	radius: Appearance.rounding.smallest
 	scale: extra > 0 ? 1 : 0.5
 
 	Behavior on opacity {

Greeter/Components/StateLayer.qml

@@ -85,7 +85,7 @@ MouseArea {
 			border.pixelAligned: false
 			color: root.color
 			opacity: 0
-			radius: 1000
+			radius: Appearance.rounding.full
 
 			transform: Translate {
 				x: -ripple.width / 2

Greeter/Helpers/SystemUsage.qml

@@ -346,7 +346,6 @@ Singleton {
 
 		stdout: StdioCollector {
 			onStreamFinished: {
-				console.log("this is running");
 				if (root.gpuType === "GENERIC") {
 					const percs = text.trim().split("\n");
 					const sum = percs.reduce((acc, d) => acc + parseInt(d, 10), 0);

Greeter/Helpers/Users.qml

@@ -7,23 +7,30 @@ import QtQuick
 Singleton {
 	id: root
 
-	// The list of users that can log in graphically
-	// Each user object has: username, uid, home, shell, gecos (full name), face (avatar path)
+	readonly property string defaultUserFile: "/etc/zshell-greeter/default-user"
+	property int selectedIndex: 0
+	readonly property var selectedUser: selectedIndex >= 0 && selectedIndex < users.length ? users[selectedIndex] : null
+	readonly property string selectedUsername: selectedUser ? selectedUser.username : ""
 	property var users: []
 
-	// The currently selected user index
-	property int selectedIndex: 0
+	function saveDefaultUser(): void {
+		if (selectedUser) {
+			defaultUserStorage.setText(selectedUser.username);
+		}
+	}
 
-	// The currently selected user object (or null if none)
-	readonly property var selectedUser: selectedIndex >= 0 && selectedIndex < users.length ? users[selectedIndex] : null
+	function selectNext(): void {
+		if (users.length === 0)
+			return;
+		selectedIndex = (selectedIndex + 1) % users.length;
+	}
 
-	// Convenience property for the selected username
-	readonly property string selectedUsername: selectedUser ? selectedUser.username : ""
+	function selectPrevious(): void {
+		if (users.length === 0)
+			return;
+		selectedIndex = (selectedIndex - 1 + users.length) % users.length;
+	}
 
-	// Path to store the default user preference
-	readonly property string defaultUserFile: "/etc/zshell-greeter/default-user"
-
-	// Select a user by username
 	function selectUser(username: string): bool {
 		for (let i = 0; i < users.length; i++) {
 			if (users[i].username === username) {
@@ -34,28 +41,6 @@ Singleton {
 		return false;
 	}
 
-	// Select the next user in the list (wraps around)
-	function selectNext(): void {
-		if (users.length === 0)
-			return;
-		selectedIndex = (selectedIndex + 1) % users.length;
-	}
-
-	// Select the previous user in the list (wraps around)
-	function selectPrevious(): void {
-		if (users.length === 0)
-			return;
-		selectedIndex = (selectedIndex - 1 + users.length) % users.length;
-	}
-
-	// Save the current user as the default for next login
-	function saveDefaultUser(): void {
-		if (selectedUser) {
-			defaultUserStorage.setText(selectedUser.username);
-		}
-	}
-
-	// Process to fetch the list of graphical users
 	Process {
 		id: userLister
 
@@ -67,13 +52,10 @@ Singleton {
 				try {
 					root.users = JSON.parse(text);
 
-					// If we have users and no selection yet, try to select the default user
 					if (root.users.length > 0) {
-						// Try to load the default user
 						if (defaultUserStorage.loaded) {
 							const defaultUsername = defaultUserStorage.text().trim();
 							if (defaultUsername && !root.selectUser(defaultUsername)) {
-								// Default user not found, select first user
 								root.selectedIndex = 0;
 							}
 						} else {
@@ -87,15 +69,14 @@ Singleton {
 		}
 	}
 
-	// FileView for persisting the default user
 	FileView {
 		id: defaultUserStorage
 
 		path: root.defaultUserFile
 		preload: true
 
+		onLoadFailed: {}
 		onLoaded: {
-			// If users are already loaded, try to select the default user
 			if (root.users.length > 0) {
 				const defaultUsername = text().trim();
 				if (defaultUsername) {
@@ -103,10 +84,5 @@ Singleton {
 				}
 			}
 		}
-
-		onLoadFailed: {
-			// File doesn't exist yet, that's fine - we'll create it on first save
-			console.log("No default user file found, will use first user");
-		}
 	}
 }

Greeter/UserDock.qml

@@ -67,6 +67,7 @@ ColumnLayout {
 
 			anchors.fill: parent
 			clip: true
+			currentIndex: root.greeter.selectedUser ? root.greeter.users.indexOf(root.greeter.selectedUser) : -1
 			highlightFollowsCurrentItem: false
 			model: root.greeter.users
 			spacing: Appearance.spacing.small
@@ -84,7 +85,7 @@ ColumnLayout {
 
 				StateLayer {
 					function onClicked(): void {
-						users.currentIndex = index;
+						root.greeter.selectUser(modelData.username);
 					}
 				}
 
@@ -95,11 +96,23 @@ ColumnLayout {
 					anchors.margins: Appearance.padding.normal
 					spacing: Appearance.spacing.normal
 
-					MaterialIcon {
-						color: user.index === users.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurfaceVariant
-						fill: 1
-						font.pointSize: Appearance.font.size.extraLarge
-						text: modelData.kind === "x11" ? "tv" : "account_circle"
+					CustomClippingRect {
+						Layout.preferredHeight: 50
+						Layout.preferredWidth: 50
+						radius: Appearance.rounding.full
+
+						MaterialIcon {
+							anchors.centerIn: parent
+							color: user.index === users.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurfaceVariant
+							fill: 1
+							font.pointSize: Appearance.font.size.extraLarge
+							text: modelData.kind === "x11" ? "tv" : "account_circle"
+						}
+
+						CachingImage {
+							anchors.fill: parent
+							path: modelData.face
+						}
 					}
 
 					ColumnLayout {

Greeter/UserImage.qml

@@ -7,7 +7,7 @@ Item {
 
 	ClippingRectangle {
 		anchors.fill: parent
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Image {
 			id: userImage

Greeter/scripts/get-users

@@ -1,14 +1,5 @@
 #!/usr/bin/env python3
-"""
-Get users that are allowed to log in graphically.
-
-Criteria for a user to be considered a "graphical login" user:
-1. UID >= 1000 (regular user, not a system account)
-2. Has a valid login shell (not /sbin/nologin, /bin/false, etc.)
-3. Has a home directory that exists
-
-Output: JSON array of user objects with username, uid, home, shell, and face (avatar path)
-"""
+import glob
 import json
 import os
 import pwd
@@ -27,21 +18,59 @@ INVALID_SHELLS = {
 
 # Minimum UID for regular users (typically 1000 on most Linux distributions)
 MIN_UID = 1000
+GREETER_IMAGES_DIR = "/etc/zshell-greeter/images"
 
 
 def get_face_path(home: str, username: str) -> str:
     """Get the path to the user's face/avatar image if it exists."""
+    greeter_candidates = [
+        os.path.join(GREETER_IMAGES_DIR, f"{username}.face"),
+        os.path.join(GREETER_IMAGES_DIR, f"{username}.face.icon"),
+    ]
+
+    for path in greeter_candidates:
+        if os.path.isfile(path):
+            return path
+
+    for path in sorted(glob.glob(os.path.join(GREETER_IMAGES_DIR, f"{username}.*"))):
+        if os.path.isfile(path):
+            return path
+
+    direct_path = os.path.join(GREETER_IMAGES_DIR, username)
+    if os.path.isfile(direct_path):
+        return direct_path
+
+    accountsservice_user = f"/var/lib/AccountsService/users/{username}"
+    if os.path.isfile(accountsservice_user):
+        try:
+            with open(accountsservice_user, "r", encoding="utf-8") as handle:
+                for line in handle:
+                    if line.startswith("Icon="):
+                        icon_path = line.split("=", 1)[1].strip()
+                        if icon_path:
+                            if not os.path.isabs(icon_path):
+                                icon_path = os.path.join("/var/lib/AccountsService/icons", icon_path)
+                            if os.path.isfile(icon_path):
+                                return icon_path
+        except OSError:
+            pass
+
     # Check common locations for user avatars
     candidates = [
         os.path.join(home, ".face"),
         os.path.join(home, ".face.icon"),
         f"/var/lib/AccountsService/icons/{username}",
+        f"/usr/share/pixmaps/faces/{username}",
     ]
 
     for path in candidates:
         if os.path.isfile(path):
             return path
 
+    for path in sorted(glob.glob(f"/var/lib/AccountsService/icons/{username}.*")):
+        if os.path.isfile(path):
+            return path
+
     return ""
 
 
@@ -74,7 +103,7 @@ def main():
             "uid": pw.pw_uid,
             "home": pw.pw_dir,
             "shell": pw.pw_shell,
-            "gecos": pw.pw_gecos.split(",")[0] if pw.pw_gecos else "",  # Full name from GECOS field
+            "gecos": pw.pw_gecos.split(",")[0] if pw.pw_gecos else "",
             "face": get_face_path(pw.pw_dir, pw.pw_name),
         })
 

Helpers/GameMode.qml

@@ -0,0 +1,72 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import ZShell
+import qs.Config
+
+Singleton {
+	id: root
+
+	property alias enabled: props.enabled
+
+	function setHyprConf(): void {
+		Hypr.extras.applyOptions({
+			"animations.enabled": 0,
+			"decoration.shadow.enabled": 0,
+			"decoration.blur.enabled": 0,
+			"general.border_size": 0,
+			"decoration.rounding": 0
+		});
+	}
+
+	onEnabledChanged: {
+		if (enabled) {
+			setHyprConf();
+			if (Config.utilities.toasts.gameModeChanged)
+				Toaster.toast(qsTr("Game mode enabled"), qsTr("Disabled Hyprland animations, blur, shadows and corner radius"), "gamepad");
+		} else {
+			Hypr.extras.message("reload");
+			if (Config.utilities.toasts.gameModeChanged)
+				Toaster.toast(qsTr("Game mode disabled"), qsTr("Hyprland settings restored"), "gamepad");
+		}
+	}
+
+	PersistentProperties {
+		id: props
+
+		property bool enabled: Hypr.options["animations:enabled"] === 0
+
+		reloadableId: "gamemode"
+	}
+
+	Connections {
+		function onConfigReloaded(): void {
+			if (props.enabled)
+				root.setHyprConf();
+		}
+
+		target: Hypr
+	}
+
+	IpcHandler {
+		function disable(): void {
+			props.enabled = false;
+		}
+
+		function enable(): void {
+			props.enabled = true;
+		}
+
+		function isEnabled(): bool {
+			return props.enabled;
+		}
+
+		function toggle(): void {
+			props.enabled = !props.enabled;
+		}
+
+		target: "gameMode"
+	}
+}

Helpers/Network.qml

@@ -1,11 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Networking
-
-Singleton {
-	id: root
-
-	property NetworkDevice activeDevice: devices.find(d => d.connected)
-	property list<NetworkDevice> devices: Networking.devices.values
-}

Helpers/NetworkUsage.qml

@@ -1,17 +1,14 @@
 pragma Singleton
 
-import qs.Config
-
+import QtQuick
 import Quickshell
 import Quickshell.Io
-
-import QtQuick
+import ZShell.Internal
+import qs.Config
 
 Singleton {
 	id: root
 
-	property var _downloadHistory: []
-
 	// Private properties
 	property real _downloadSpeed: 0
 	property real _downloadTotal: 0
@@ -25,12 +22,11 @@ Singleton {
 	property real _prevRxBytes: 0
 	property real _prevTimestamp: 0
 	property real _prevTxBytes: 0
-	property var _uploadHistory: []
 	property real _uploadSpeed: 0
 	property real _uploadTotal: 0
 
-	// History of speeds for sparkline (most recent at end)
-	readonly property var downloadHistory: _downloadHistory
+	// History buffers for sparkline
+	readonly property CircularBuffer downloadBuffer: _downloadBuffer
 
 	// Current speeds in bytes per second
 	readonly property real downloadSpeed: _downloadSpeed
@@ -39,7 +35,7 @@ Singleton {
 	readonly property real downloadTotal: _downloadTotal
 	readonly property int historyLength: 30
 	property int refCount: 0
-	readonly property var uploadHistory: _uploadHistory
+	readonly property CircularBuffer uploadBuffer: _uploadBuffer
 	readonly property real uploadSpeed: _uploadSpeed
 	readonly property real uploadTotal: _uploadTotal
 
@@ -139,6 +135,18 @@ Singleton {
 		};
 	}
 
+	CircularBuffer {
+		id: _downloadBuffer
+
+		capacity: root.historyLength + 1
+	}
+
+	CircularBuffer {
+		id: _uploadBuffer
+
+		capacity: root.historyLength + 1
+	}
+
 	FileView {
 		id: netDevFile
 
@@ -190,25 +198,11 @@ Singleton {
 				root._downloadSpeed = rxDelta / timeDelta;
 				root._uploadSpeed = txDelta / timeDelta;
 
-				const maxHistory = root.historyLength + 1;
+				if (root._downloadSpeed >= 0 && isFinite(root._downloadSpeed))
+					_downloadBuffer.push(root._downloadSpeed);
 
-				if (root._downloadSpeed >= 0 && isFinite(root._downloadSpeed)) {
-					let newDownHist = root._downloadHistory.slice();
-					newDownHist.push(root._downloadSpeed);
-					if (newDownHist.length > maxHistory) {
-						newDownHist.shift();
-					}
-					root._downloadHistory = newDownHist;
-				}
-
-				if (root._uploadSpeed >= 0 && isFinite(root._uploadSpeed)) {
-					let newUpHist = root._uploadHistory.slice();
-					newUpHist.push(root._uploadSpeed);
-					if (newUpHist.length > maxHistory) {
-						newUpHist.shift();
-					}
-					root._uploadHistory = newUpHist;
-				}
+				if (root._uploadSpeed >= 0 && isFinite(root._uploadSpeed))
+					_uploadBuffer.push(root._uploadSpeed);
 			}
 
 			// Calculate totals with overflow handling

Helpers/Picker.qml

@@ -66,7 +66,8 @@ MouseArea {
 
 	function save(): void {
 		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
-		ZShellIo.saveItem(screencopy, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => Quickshell.execDetached(["swappy", "-f", path]));
+		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--image"] : ["swappy", "-f"];
+		ZShellIo.saveItem(screencopy, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => Quickshell.execDetached([...cmd, path]));
 		closeAnim.start();
 	}
 

Helpers/PixelSnap.qml

@@ -0,0 +1,6 @@
+pragma Singleton
+
+import Quickshell
+
+Singleton {
+}

Helpers/Recorder.qml

@@ -0,0 +1,41 @@
+// pragma Singleton
+//
+// import Quickshell
+// import QtQuick
+//
+// Singleton {
+// 	id: root
+//
+// 	function start(extraArgs = []): void {
+// 		needsStart = true;
+// 		startArgs = extraArgs;
+// 		checkProc.running = true;
+// 	}
+//
+// 	PersistentProperties {
+// 		id: props
+//
+// 		property real elapsed: 0
+// 		property bool paused: false
+// 		property bool running: false
+//
+// 		reloadableId: "recorder"
+// 	}
+//
+// 	Process {
+// 		id: checkProc
+//
+// 		command: ["pidof", "gpu-screen-recorder"]
+// 		running: true
+//
+// 		onExited: code => {
+// 			props.running = code === 0;
+//
+// 			if (code === 0) {
+// 				if (root.needsStop) {
+// 					Quickshell.execDetached(["zshell-cli"]);
+// 				}
+// 			}
+// 		}
+// 	}
+// }

Helpers/SystemUsage.qml

@@ -81,6 +81,9 @@ Singleton {
 			meminfo.reload();
 			if (root.gpuType === "GENERIC")
 				gpuUsage.running = true;
+
+			if (root.gpuType === "GENERIC" && root.gpuMemTotal === 0)
+				oneshotMemAmd.running = true;
 		}
 	}
 
@@ -303,6 +306,26 @@ Singleton {
 		}
 	}
 
+	Process {
+		id: oneshotMemAmd
+
+		command: ["sh", "-c", "cat /sys/class/drm/card*/device/mem_info_vram_total"]
+		running: root.gpuType === "GENERIC" && root.gpuMemTotal === 0
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const values = text.trim().split("\n").map(v => parseInt(v, 10)).filter(v => Number.isFinite(v));
+
+				if (values.length > 0) {
+					const totalBytes = values.reduce((a, b) => a + b, 0);
+					root.gpuMemTotal = totalBytes / (1024 * 1024);
+				}
+
+				oneshotMemAmd.running = false;
+			}
+		}
+	}
+
 	Process {
 		id: gpuUsageNvidia
 
@@ -342,15 +365,45 @@ Singleton {
 	Process {
 		id: gpuUsage
 
-		command: root.gpuType === "GENERIC" ? ["sh", "-c", "cat /sys/class/drm/card*/device/gpu_busy_percent"] : ["echo"]
+		command: root.gpuType === "GENERIC" ? ["sh", "-c", "paste -d ' ' /sys/class/drm/card*/device/gpu_busy_percent /sys/class/drm/card*/device/mem_info_vram_used"] : ["echo"]
 
 		stdout: StdioCollector {
 			onStreamFinished: {
-				console.log("this is running");
 				if (root.gpuType === "GENERIC") {
-					const percs = text.trim().split("\n");
-					const sum = percs.reduce((acc, d) => acc + parseInt(d, 10), 0);
-					root.gpuPerc = sum / percs.length / 100;
+					const lines = text.trim().split("\n");
+
+					let percSum = 0;
+					let memSum = 0;
+					let count = 0;
+
+					for (const line of lines) {
+						const parts = line.trim().split(/\s+/);
+						if (parts.length < 2)
+							continue;
+
+						const gpuBusy = parseInt(parts[0], 10);
+						const memUsed = parseInt(parts[1], 10);
+
+						if (!Number.isFinite(gpuBusy) || !Number.isFinite(memUsed))
+							continue;
+
+						percSum += gpuBusy;
+						memSum += memUsed;
+						count++;
+					}
+
+					if (count > 0) {
+						// GPU usage %
+						root.gpuPerc = (percSum / count) / 100;
+
+						// VRAM usage (bytes → MiB → normalized)
+						const memUsedMiB = memSum / (1024 * 1024);
+
+						const newGpuMemUsed = root.gpuMemTotal > 0 ? Math.max(0, Math.min(1, memUsedMiB / root.gpuMemTotal)) : 0;
+
+						if (Math.abs(root.gpuMemUsed - newGpuMemUsed) >= 0.01)
+							root.gpuMemUsed = newGpuMemUsed;
+					}
 				} else {
 					root.gpuPerc = 0;
 					root.gpuTemp = 0;

Helpers/Time.qml

@@ -1,18 +1,23 @@
 pragma Singleton
 
 import Quickshell
+import QtQuick
+import qs.Config
 
 Singleton {
-	readonly property string amPmStr: timeComponents[2] ?? ""
+	id: root
+
 	readonly property date date: clock.date
+	readonly property string dateStr: format(Config.general.dateFormat)
 	property alias enabled: clock.enabled
 	readonly property string hourStr: timeComponents[0] ?? ""
 	readonly property int hours: clock.hours
 	readonly property string minuteStr: timeComponents[1] ?? ""
 	readonly property int minutes: clock.minutes
+	readonly property string secondStr: timeComponents[2] ?? ""
 	readonly property int seconds: clock.seconds
 	readonly property list<string> timeComponents: timeStr.split(":")
-	readonly property string timeStr: format("hh:mm")
+	readonly property string timeStr: format("hh:mm:ss")
 
 	function format(fmt: string): string {
 		return Qt.formatDateTime(clock.date, fmt);

Helpers/Updates.qml

@@ -5,14 +5,19 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Paths
+import qs.Config
 
 Singleton {
 	id: root
 
 	property int availableUpdates: 0
+	property string cmd: ""
+	property bool commandReady
 	property bool loaded
 	property double now: Date.now()
 	property var updates: ({})
+	property bool updating
+	property string updatingPackage: ""
 
 	function formatUpdateTime(timestamp) {
 		const diffMs = root.now - timestamp;
@@ -32,6 +37,22 @@ Singleton {
 		return Qt.formatDateTime(new Date(timestamp), "dd hh:mm");
 	}
 
+	function performPackageUpdate(pkg: string): void {
+		if (root.cmd === "pacman")
+			pkgUpdateProc.command = ["pkexec", root.cmd, "--noconfirm", "-Sy", pkg];
+		else
+			pkgUpdateProc.command = [root.cmd, "--noconfirm", "--sudo", "pkexec", "-Sy", pkg];
+		pkgUpdateProc.running = true;
+	}
+
+	function performSystemUpdate(): void {
+		if (root.cmd === "pacman")
+			sysUpdateProc.command = ["pkexec", root.cmd, "--noconfirm", "-Syu"];
+		else
+			sysUpdateProc.command = [root.cmd, "--noconfirm", "--sudo", "pkexec", "-Syu"];
+		sysUpdateProc.running = true;
+	}
+
 	onUpdatesChanged: {
 		if (!root.loaded)
 			return;
@@ -43,13 +64,14 @@ Singleton {
 	Timer {
 		interval: 1
 		repeat: true
-		running: true
+		running: Config.services.updates
 
 		onTriggered: {
-			if (!root.loaded)
+			if (!root.loaded || !root.commandReady)
 				return;
 
-			updatesProc.running = true;
+			if (Config.services.updates)
+				updatesProc.running = true;
 			interval = 5000;
 		}
 	}
@@ -62,10 +84,59 @@ Singleton {
 		onTriggered: root.now = Date.now()
 	}
 
+	Process {
+		id: cmdDetect
+
+		command: ["sh", "-c", "command -v checkupdates || command -v yay || command -v paru"]
+		running: true
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const cmd = this.text.trim();
+				let helper;
+
+				if (cmd.length > 0) {
+					helper = cmd.split("/").pop();
+				} else {
+					helper = "pacman";
+				}
+
+				if (helper === "checkupdates") {
+					updatesProc.command = [helper];
+				} else {
+					updatesProc.command = [helper, "-Qu"];
+				}
+				root.commandReady = true;
+			}
+		}
+	}
+
+	Process {
+		id: updateCmdDetect
+
+		command: ["sh", "-c", "command -v yay || command -v paru"]
+		running: true
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const cmd = this.text.trim();
+				let helper;
+
+				if (cmd.length > 0) {
+					helper = cmd.split("/").pop();
+				} else {
+					helper = "pacman";
+				}
+
+				root.cmd = helper;
+			}
+		}
+	}
+
 	Process {
 		id: updatesProc
 
-		command: ["checkupdates"]
+		command: []
 		running: false
 
 		stdout: StdioCollector {
@@ -85,6 +156,44 @@ Singleton {
 		}
 	}
 
+	Process {
+		id: sysUpdateProc
+
+		command: []
+		running: false
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				root.updating = false;
+			}
+		}
+
+		onRunningChanged: {
+			if (running)
+				root.updating = true;
+		}
+	}
+
+	Process {
+		id: pkgUpdateProc
+
+		command: []
+		running: false
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				root.updating = false;
+			}
+		}
+
+		onRunningChanged: {
+			if (running) {
+				root.updatingPackage = command[command.length - 1];
+				root.updating = true;
+			}
+		}
+	}
+
 	Timer {
 		id: saveTimer
 

Helpers/Wallpapers.qml

@@ -14,6 +14,7 @@ Searcher {
 	property string actualCurrent: WallpaperPath.currentWallpaperPath
 	readonly property string current: showPreview ? previewPath : actualCurrent
 	property string previewPath
+	property bool recentlyChanged
 	property bool showPreview: false
 
 	function preview(path: string): void {
@@ -27,6 +28,8 @@ Searcher {
 		actualCurrent = path;
 		WallpaperPath.currentWallpaperPath = path;
 		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}`]);
 	}
 
 	function stopPreview(): void {

Modules/AudioWidget.qml

@@ -1,96 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import Quickshell.Io
-import Quickshell.Services.Pipewire
-import qs.Daemons
-import qs.Modules
-import qs.Config
-import qs.Components
-
-CustomRect {
-	id: root
-
-	property color barColor: DynamicColors.palette.m3primary
-	property color textColor: DynamicColors.palette.m3onSurface
-
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
-	implicitWidth: 150
-	radius: Appearance.rounding.full
-
-	Behavior on implicitWidth {
-		NumberAnimation {
-			duration: 300
-			easing.type: Easing.OutCubic
-		}
-	}
-
-	Component.onCompleted: console.log(root.height, root.implicitHeight)
-
-	RowLayout {
-		id: layout
-
-		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.small
-		anchors.verticalCenter: parent.verticalCenter
-		width: root.implicitWidth - Appearance.padding.small * 3
-
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			animate: true
-			color: Audio.muted ? DynamicColors.palette.m3error : root.textColor
-			font.pointSize: Appearance.font.size.larger
-			text: Audio.muted ? "volume_off" : "volume_up"
-		}
-
-		CustomRect {
-			Layout.fillWidth: true
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-			implicitHeight: 4
-			radius: 20
-
-			CustomRect {
-				id: sinkVolumeBar
-
-				color: Audio.muted ? DynamicColors.palette.m3error : root.barColor
-				implicitWidth: parent.width * (Audio.volume ?? 0)
-				radius: parent.radius
-
-				anchors {
-					bottom: parent.bottom
-					left: parent.left
-					top: parent.top
-				}
-			}
-		}
-
-		MaterialIcon {
-			Layout.alignment: Qt.AlignVCenter
-			animate: true
-			color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor
-			font.pointSize: Appearance.font.size.larger
-			text: Audio.sourceMuted ? "mic_off" : "mic"
-		}
-
-		CustomRect {
-			Layout.fillWidth: true
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-			implicitHeight: 4
-			radius: 20
-
-			CustomRect {
-				id: sourceVolumeBar
-
-				color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.barColor
-				implicitWidth: parent.width * (Audio.sourceVolume ?? 0)
-				radius: parent.radius
-
-				anchors {
-					bottom: parent.bottom
-					left: parent.left
-					top: parent.top
-				}
-			}
-		}
-	}
-}

Modules/Bar/Bar.qml

@@ -7,7 +7,8 @@ import qs.Components
 import qs.Modules
 import qs.Config
 import qs.Helpers
-import qs.Modules.UPower
+import qs.Modules.SysTray
+import qs.Modules.SysTray.Widgets
 import qs.Modules.Network
 import qs.Modules.Updates
 
@@ -15,6 +16,7 @@ RowLayout {
 	id: root
 
 	required property Wrapper popouts
+	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
@@ -31,6 +33,24 @@ RowLayout {
 		if (visibilities.sidebar || visibilities.dashboard || visibilities.resources || visibilities.settings)
 			return;
 
+		if (ch.id === "tray") {
+			const tray = ch.item;
+			const localPos = tray.mapFromItem(root, x, height / 2);
+			const sub = tray.getHoveredSubItem(localPos.x, localPos.y);
+			if (sub) {
+				popouts.currentName = sub.id;
+				popouts.currentCenter = Qt.binding(() => {
+					const centerX = sub.item.mapToItem(root, sub.item.width / 2, 0).x;
+					return centerX;
+				});
+				popouts.hasCurrent = true;
+				return;
+			}
+
+			if (!popouts.currentName.startsWith("traymenu"))
+				popouts.hasCurrent = false;
+		}
+
 		const id = ch.id;
 		const top = ch.x;
 		const item = ch.item;
@@ -93,15 +113,6 @@ RowLayout {
 				}
 			}
 
-			DelegateChoice {
-				roleValue: "audio"
-
-				delegate: WrappedLoader {
-					sourceComponent: AudioWidget {
-					}
-				}
-			}
-
 			DelegateChoice {
 				roleValue: "tray"
 
@@ -165,15 +176,6 @@ RowLayout {
 				}
 			}
 
-			DelegateChoice {
-				roleValue: "upower"
-
-				delegate: WrappedLoader {
-					sourceComponent: UPowerWidget {
-					}
-				}
-			}
-
 			DelegateChoice {
 				roleValue: "network"
 

Modules/Bar/BarLoader.qml

@@ -8,7 +8,8 @@ import qs.Components
 import qs.Modules
 import qs.Config
 import qs.Helpers
-import qs.Modules.UPower
+import qs.Modules.SysTray
+import qs.Modules.SysTray.Widgets
 import qs.Modules.Network
 
 Item {
@@ -19,6 +20,7 @@ Item {
 	property bool isHovered
 	readonly property int padding: Math.max(Appearance.padding.smaller, Config.barConfig.border)
 	required property Wrapper popouts
+	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
 	readonly property bool shouldBeVisible: (!Config.barConfig.autoHide || visibilities.bar || isHovered)
 	readonly property int vPadding: 6
@@ -75,6 +77,7 @@ Item {
 		sourceComponent: Bar {
 			height: root.contentHeight
 			popouts: root.popouts
+			popoutsWrapper: root.popoutsWrapper
 			screen: root.screen
 			visibilities: root.visibilities
 		}

Modules/ClipWrapper.qml

@@ -0,0 +1,61 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	readonly property alias content: content
+	property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	required property ShellScreen screen
+
+	clip: true
+	implicitHeight: content.implicitHeight * (1 - offsetScale)
+	implicitWidth: content.implicitWidth
+	visible: width > 0 && height > 0
+	x: {
+		if (content.isDetached)
+			return (parent.width - content.nonAnimWidth) / 2;
+
+		const off = content.currentCenter - Config.barConfig.border - content.nonAnimWidth / 2;
+		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
+		if (diff < 0)
+			return off + diff;
+		return Math.floor(Math.max(off, 0));
+	}
+	y: content.isDetached ? (parent.height - content.nonAnimHeight) / 2 : 0
+
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
+	Behavior on x {
+		enabled: root.offsetScale < 1
+
+		Anim {
+			duration: content.animLength
+			easing.bezierCurve: content.animCurve
+		}
+	}
+	Behavior on y {
+		Anim {
+			duration: content.animLength
+			easing.bezierCurve: content.animCurve
+		}
+	}
+
+	Wrapper {
+		id: content
+
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		anchors.topMargin: (-implicitHeight - 5) * root.offsetScale
+		offsetScale: root.offsetScale
+		screen: root.screen
+	}
+}

Modules/Clock.qml

@@ -3,7 +3,7 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Config
 import qs.Modules
-import qs.Helpers as Helpers
+import qs.Helpers
 import qs.Components
 
 CustomRect {
@@ -23,6 +23,7 @@ CustomRect {
 
 		anchors.centerIn: parent
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		font: Appearance.font.family.mono
 		text: Time.dateStr
 
 		Behavior on color {

Modules/Content.qml

@@ -7,7 +7,7 @@ import qs.Config
 import qs.Components
 import qs.Modules.WSOverview
 import qs.Modules.Network
-import qs.Modules.UPower
+import qs.Modules.SysTray.Popouts
 import qs.Modules.Updates
 
 Item {
@@ -15,7 +15,8 @@ Item {
 
 	readonly property Item current: currentPopout?.item ?? null
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
-	required property Item wrapper
+	required property PopoutState popouts
+	required property ShellScreen screen
 
 	implicitHeight: (currentPopout?.implicitHeight ?? 0) + 5 * 2
 	implicitWidth: (currentPopout?.implicitWidth ?? 0) + 5 * 2
@@ -49,40 +50,32 @@ Item {
 
 				Connections {
 					function onHasCurrentChanged(): void {
-						if (root.wrapper.hasCurrent && trayMenu.shouldBeActive) {
+						if (root.popouts.hasCurrent && trayMenu.shouldBeActive) {
 							trayMenu.sourceComponent = null;
 							trayMenu.sourceComponent = trayMenuComponent;
 						}
 					}
 
-					target: root.wrapper
+					target: root.popouts
 				}
 
 				Component {
 					id: trayMenuComponent
 
 					TrayMenuPopout {
-						popouts: root.wrapper
+						popouts: root.popouts
+						screen: root.screen
 						trayItem: trayMenu.modelData.menu
 					}
 				}
 			}
 		}
 
-		Popout {
-			name: "overview"
-
-			sourceComponent: OverviewPopout {
-				screen: root.wrapper.screen
-				wrapper: root.wrapper
-			}
-		}
-
 		Popout {
 			name: "upower"
 
 			sourceComponent: UPowerPopout {
-				wrapper: root.wrapper
+				wrapper: root.popouts
 			}
 		}
 
@@ -90,7 +83,7 @@ Item {
 			name: "network"
 
 			sourceComponent: NetworkPopout {
-				wrapper: root.wrapper
+				wrapper: root.popouts
 			}
 		}
 
@@ -98,7 +91,7 @@ Item {
 			name: "updates"
 
 			sourceComponent: UpdatesPopout {
-				wrapper: root.wrapper
+				wrapper: root.popouts
 			}
 		}
 	}
@@ -107,12 +100,13 @@ Item {
 		id: popout
 
 		required property string name
-		readonly property bool shouldBeActive: root.wrapper.currentName === name
+		readonly property bool shouldBeActive: root.popouts.currentName === name
 
 		active: false
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.top: parent.top
-		anchors.topMargin: 5
+		// anchors.horizontalCenter: parent.horizontalCenter
+		// anchors.top: parent.top
+		// anchors.topMargin: 5
+		anchors.centerIn: parent
 		opacity: 0
 		scale: 0.8
 

Modules/DashWidget.qml

@@ -1,31 +0,0 @@
-import Quickshell
-import QtQuick
-import qs.Config
-import qs.Helpers
-import qs.Components
-
-CustomRect {
-	id: root
-
-	required property PersistentProperties visibilities
-
-	anchors.bottom: parent.bottom
-	anchors.bottomMargin: 6
-	anchors.top: parent.top
-	anchors.topMargin: 6
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitWidth: 40
-	radius: 1000
-
-	StateLayer {
-		onClicked: {
-			root.visibilities.dashboard = !root.visibilities.dashboard;
-		}
-	}
-
-	MaterialIcon {
-		anchors.centerIn: parent
-		color: DynamicColors.palette.m3onSurface
-		text: "widgets"
-	}
-}

Modules/Dashboard/Dash.qml

@@ -11,22 +11,12 @@ GridLayout {
 	id: root
 
 	readonly property bool dashboardVisible: visibilities.dashboard
-	property int radius: 6
+	property int radius: Appearance.rounding.smallest
 	required property PersistentProperties state
 	required property PersistentProperties visibilities
 
 	columnSpacing: Appearance.spacing.smaller
-	opacity: 0
 	rowSpacing: Appearance.spacing.smaller
-	scale: 0.9
-
-	onDashboardVisibleChanged: {
-		if (dashboardVisible) {
-			openAnim.start();
-		} else {
-			closeAnim.start();
-		}
-	}
 
 	ParallelAnimation {
 		id: openAnim
@@ -110,7 +100,6 @@ GridLayout {
 
 		Resources {
 			id: resources
-
 		}
 	}
 
@@ -124,7 +113,6 @@ GridLayout {
 
 		Media {
 			id: media
-
 		}
 	}
 

Modules/Dashboard/Dash/User.qml

@@ -18,7 +18,7 @@ Row {
 		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
 		implicitHeight: info.implicitHeight
 		implicitWidth: info.implicitHeight
-		radius: 8
+		radius: Appearance.rounding.smallest
 
 		MaterialIcon {
 			anchors.centerIn: parent

Modules/Dashboard/Tabs.qml

@@ -83,7 +83,7 @@ Item {
 			anchors.top: parent.top
 			color: DynamicColors.palette.m3primary
 			implicitHeight: parent.implicitHeight * 2
-			radius: 1000
+			radius: Appearance.rounding.full
 		}
 	}
 
@@ -184,7 +184,7 @@ Item {
 				anchors.verticalCenter: parent.verticalCenter
 				color: "transparent"
 				implicitHeight: parent.height + 8 * 2
-				radius: 8
+				radius: Appearance.rounding.smallest
 
 				CustomRect {
 					id: stateLayer
@@ -204,7 +204,7 @@ Item {
 
 					color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 					opacity: 0
-					radius: 1000
+					radius: Appearance.rounding.full
 
 					transform: Translate {
 						x: -ripple.width / 2

Modules/Dashboard/Wrapper.qml

@@ -15,78 +15,25 @@ Item {
 		reloadableId: "dashboardState"
 	}
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
+	required property real offsetScale
+	readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.dashboard && Config.dashboard.enabled
+	Loader {
+		id: content
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
+		active: root.shouldBeActive || root.visible
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: Appearance.anim.durations.extraLarge
-		running: true
-
-		onTriggered: {
-			content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible);
-			content.visible = true;
-		}
-	}
-
-	CustomClippingRect {
-		anchors.fill: parent
-
-		Loader {
-			id: content
-
-			active: true
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			visible: false
-
-			sourceComponent: Content {
-				state: root.dashState
-				visibilities: root.visibilities
-			}
+		sourceComponent: Content {
+			state: root.dashState
+			visibilities: root.visibilities
 		}
 	}
 }

Modules/DesktopIcons/DesktopIconDelegate.qml

@@ -202,7 +202,7 @@ Item {
 			anchors.margins: 4
 			color: "white"
 			opacity: root.selectedIcons.includes(filePath) ? 0.2 : 0.0
-			radius: 8
+			radius: Appearance.rounding.smallest
 
 			Behavior on opacity {
 				Anim {
@@ -262,7 +262,7 @@ Item {
 				anchors.margins: 4
 				color: "white"
 				opacity: parent.containsMouse ? 0.1 : 0.0
-				radius: 8
+				radius: Appearance.rounding.smallest
 
 				Behavior on opacity {
 					Anim {

Modules/Dock/Wrapper.qml

@@ -11,97 +11,36 @@ Item {
 	property int contentHeight
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.dock
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	readonly property bool shouldBeActive: visibilities.dock
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	Behavior on implicitWidth {
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
+
+	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.small
-		}
-	}
-
-	onShouldBeActiveChanged: {
-		if (shouldBeActive) {
-			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
-		} else {
-			showAnim.stop();
-			hideAnim.start();
-		}
-	}
-
-	SequentialAnimation {
-		id: showAnim
-
-		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
-		}
-	}
-
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: Appearance.anim.durations.small
-
-		onRunningChanged: {
-			if (running && !root.shouldBeActive) {
-				content.visible = false;
-				content.active = true;
-			} else {
-				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
-			}
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: false
 		anchors.left: parent.left
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			panels: root.panels
 			screen: root.screen
 			visibilities: root.visibilities
-
-			Component.onCompleted: root.contentHeight = implicitHeight
 		}
-
-		Component.onCompleted: timer.start()
 	}
 }

Modules/Drawing/Wrapper.qml

@@ -12,90 +12,29 @@ Item {
 
 	required property Canvas drawing
 	property bool expanded: true
+	property real offsetScale: shouldBeActive ? 0 : 1
 	required property ShellScreen screen
 	readonly property bool shouldBeActive: visibilities.isDrawing
 	required property var visibilities
 
+	anchors.leftMargin: (-implicitWidth - 5) * offsetScale
 	implicitHeight: content.implicitHeight
-	implicitWidth: 0
-	visible: width > 0
+	implicitWidth: root.expanded ? content.implicitWidth : icon.implicitWidth
+	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
-	states: [
-		State {
-			name: "hidden"
-			when: !root.shouldBeActive
-
-			PropertyChanges {
-				root.implicitWidth: 0
-			}
-
-			PropertyChanges {
-				icon.opacity: 0
-			}
-
-			PropertyChanges {
-				content.opacity: 0
-			}
-		},
-		State {
-			name: "collapsed"
-			when: root.shouldBeActive && !root.expanded
-
-			PropertyChanges {
-				root.implicitWidth: icon.implicitWidth
-			}
-
-			PropertyChanges {
-				icon.opacity: 1
-			}
-
-			PropertyChanges {
-				content.opacity: 0
-			}
-		},
-		State {
-			name: "visible"
-			when: root.shouldBeActive && root.expanded
-
-			PropertyChanges {
-				root.implicitWidth: content.implicitWidth
-			}
-
-			PropertyChanges {
-				icon.opacity: 0
-			}
-
-			PropertyChanges {
-				content.opacity: 1
-			}
+	Behavior on implicitWidth {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
-	]
-	transitions: [
-		Transition {
-			from: "*"
-			to: "*"
-
-			ParallelAnimation {
-				Anim {
-					easing.bezierCurve: MaterialEasing.expressiveEffects
-					property: "implicitWidth"
-					target: root
-				}
-
-				Anim {
-					duration: Appearance.anim.durations.small
-					property: "opacity"
-					target: icon
-				}
-
-				Anim {
-					duration: Appearance.anim.durations.small
-					property: "opacity"
-					target: content
-				}
-			}
+	}
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
-	]
+	}
 
 	onVisibleChanged: {
 		if (!visible)
@@ -109,8 +48,12 @@ Item {
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		height: content.contentItem.height
-		opacity: 1
+		opacity: root.expanded ? 0 : 1
 
+		Behavior on opacity {
+			Anim {
+			}
+		}
 		sourceComponent: MaterialIcon {
 			font.pointSize: Appearance.font.size.larger
 			text: "arrow_forward_ios"
@@ -122,7 +65,12 @@ Item {
 
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
+		opacity: root.expanded ? 1 : 0
 
+		Behavior on opacity {
+			Anim {
+			}
+		}
 		sourceComponent: Content {
 			drawing: root.drawing
 			visibilities: root.visibilities

Modules/Launcher/AppList.qml

@@ -73,7 +73,7 @@ CustomListView {
 		implicitHeight: root.currentItem?.implicitHeight ?? 0
 		implicitWidth: root.width
 		opacity: 0.08
-		radius: 8
+		radius: Appearance.rounding.smallest
 		y: root.currentItem?.y ?? 0
 
 		Behavior on y {

Modules/Launcher/Background.qml

@@ -7,7 +7,7 @@ ShapePath {
 	id: root
 
 	readonly property bool flatten: wrapper.height < rounding * 2
-	readonly property real rounding: Config.barConfig.rounding + 5
+	readonly property real rounding: Appearance.rounding.smallest + 5
 	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
 	required property Wrapper wrapper
 

Modules/Launcher/Content.qml

@@ -50,7 +50,7 @@ Item {
 		anchors.right: parent.right
 		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
 		implicitHeight: Math.max(searchIcon.implicitHeight, search.implicitHeight, clearIcon.implicitHeight)
-		radius: 8
+		radius: Appearance.rounding.smallest
 
 		MaterialIcon {
 			id: searchIcon

Modules/Launcher/Items/ActionItem.qml

@@ -19,7 +19,7 @@ Item {
 			root.modelData?.onClicked(root.list);
 		}
 
-		radius: Appearance.rounding.normal
+		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Items/AppItem.qml

@@ -23,7 +23,7 @@ Item {
 			root.visibilities.launcher = false;
 		}
 
-		radius: 8
+		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Items/CalcItem.qml

@@ -27,7 +27,7 @@ Item {
 			root.onClicked();
 		}
 
-		radius: Appearance.rounding.normal
+		radius: Appearance.rounding.smallest
 	}
 
 	RowLayout {

Modules/Launcher/Items/VariantItem.qml

@@ -18,7 +18,7 @@ Item {
 			root.modelData?.onClicked(root.list);
 		}
 
-		radius: Appearance.rounding.normal
+		radius: Appearance.rounding.smallest
 	}
 
 	Item {

Modules/Launcher/Services/Apps.qml

@@ -9,17 +9,19 @@ import qs.Paths
 Searcher {
 	id: root
 
+	readonly property list<string> command: Config.launcher.uwsm ? ["app2unit", "--"] : []
+
 	function launch(entry: DesktopEntry): void {
 		appDb.incrementFrequency(entry.id);
 
 		if (entry.runInTerminal)
 			Quickshell.execDetached({
-				command: ["app2unit", "--", ...Config.general.apps.terminal, `${Quickshell.shellDir}/assets/wrap_term_launch.sh`, ...entry.command],
+				command: [...root.command, ...Config.general.apps.terminal, `${Quickshell.shellDir}/assets/wrap_term_launch.sh`, ...entry.command],
 				workingDirectory: entry.workingDirectory
 			});
 		else
 			Quickshell.execDetached({
-				command: ["app2unit", "--", ...entry.command],
+				command: [...root.command, ...entry.command],
 				workingDirectory: entry.workingDirectory
 			});
 	}

Modules/Launcher/Services/SchemeVariants.qml

@@ -26,7 +26,7 @@ Searcher {
 			description: qsTr("Pastel palette with a low chroma.")
 			icon: "android"
 			name: qsTr("Tonal Spot")
-			variant: "tonalspot"
+			variant: "tonal-spot"
 		},
 		Variant {
 			description: qsTr("Hue-shifted, artistic or playful colors.")

Modules/Launcher/Wrapper.qml

@@ -15,59 +15,39 @@ Item {
 			max -= panels.resources.nonAnimHeight;
 		if (visibilities.dashboard && panels.dashboard.x < root.x + root.implicitWidth)
 			max -= panels.dashboard.nonAnimHeight;
+		if (panels.popouts.currentName.startsWith("updates"))
+			max -= panels.popouts.nonAnimHeight;
 		return max;
 	}
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.launcher
 	required property PersistentProperties visibilities
+	readonly property bool shouldBeActive: visibilities.launcher
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
-
-	onMaxHeightChanged: timer.start()
 	onShouldBeActiveChanged: {
 		if (shouldBeActive) {
+			implicitHeight = Qt.binding(() => content.implicitHeight);
 			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
 		} else {
-			showAnim.stop();
-			hideAnim.start();
+			implicitHeight = implicitHeight;
 		}
 	}
 
-	SequentialAnimation {
-		id: showAnim
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
 
+	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
-		}
-	}
+	onMaxHeightChanged: timer.start()
 
 	Connections {
 		function onEnabledChanged(): void {
@@ -103,10 +83,6 @@ Item {
 				root.contentHeight = Math.min(root.maxHeight, content.implicitHeight);
 				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
 				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
 			}
 		}
 	}
@@ -117,7 +93,6 @@ Item {
 		active: false
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		visible: false
 
 		sourceComponent: Content {
 			maxHeight: root.maxHeight

Modules/Lock/IdleMonitors.qml

@@ -8,21 +8,25 @@ import qs.Helpers
 Scope {
 	id: root
 
+	readonly property bool enabled: !Players.list.some(p => p.isPlaying)
 	required property Lock lock
-	readonly property bool enabled: !Players.list.some( p => p.isPlaying )
 
-	function handleIdleAction( action: var ): void {
-		if ( !action )
+	function handleIdleAction(action: var): void {
+		if (!action)
 			return;
 
-		if ( action === "lock" )
+		if (action === "lock")
 			lock.lock.locked = true;
-		else if ( action === "unlock" )
+		else if (action === "unlock")
 			lock.lock.locked = false;
-		else if ( typeof action === "string" )
-			Hypr.dispatch( action );
+		else if (action === "dpms on")
+			Hypr.dispatch('hl.dsp.dpms({ action = "enable" })');
+		else if (action === "dpms off")
+			Hypr.dispatch('hl.dsp.dpms({ action = "disable" })');
+		else if (typeof action === "string")
+			Hypr.dispatch(action);
 		else
-			Quickshell.execDetached( action );
+			Quickshell.execDetached(action);
 	}
 
 	Variants {
@@ -33,7 +37,8 @@ Scope {
 
 			enabled: root.enabled && modelData.timeout > 0 ? true : false
 			timeout: modelData.timeout
-			onIsIdleChanged: root.handleIdleAction( isIdle ? modelData.idleAction : modelData.activeAction )
+
+			onIsIdleChanged: root.handleIdleAction(isIdle ? modelData.idleAction : modelData.activeAction)
 		}
 	}
 }

Modules/Lock/LockSurface.qml

@@ -150,6 +150,7 @@ WlSessionLockSurface {
 		id: background
 
 		anchors.fill: parent
+		fillMode: Image.PreserveAspectCrop
 		source: WallpaperPath.lockscreenBg
 	}
 

Modules/Lock/NotifGroup.qml

@@ -284,6 +284,8 @@ CustomRect {
 		Layout.fillWidth: true
 		color: root.urgency === "critical" ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
 		text: {
+			if (!Config.lock.showNotifContent)
+				return "Unlock to view";
 			const summary = modelData.summary.replace(/\n/g, " ");
 			const body = modelData.body.replace(/\n/g, " ");
 			const color = root.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline;

Modules/Lock/UserImage.qml

@@ -8,7 +8,7 @@ Item {
 
 	ClippingRectangle {
 		anchors.fill: parent
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		Image {
 			id: userImage

Modules/Notifications/Content.qml

@@ -25,6 +25,9 @@ Item {
 			height += list.itemAtIndex(i)?.nonAnimHeight ?? 0;
 
 		if (visibilities && panels) {
+			if (panels.popouts.hasCurrent && (panels.popouts.currentCenter + (panels.popouts.current?.width / 2)) > panels.notifications.x || visibilities.dashboard)
+				return 0;
+
 			if (visibilities.osd) {
 				const h = panels.osd.y - 8 * 2 - padding * 2;
 				if (height > h)
@@ -51,7 +54,7 @@ Item {
 		anchors.fill: parent
 		anchors.margins: root.padding
 		color: "transparent"
-		radius: 4
+		radius: Appearance.rounding.smallest / 2
 
 		CustomListView {
 			id: list
@@ -126,7 +129,7 @@ Item {
 					color: "transparent"
 					implicitHeight: notif.implicitHeight
 					implicitWidth: notif.implicitWidth
-					radius: 4
+					radius: Appearance.rounding.smallest / 2
 
 					Notification {
 						id: notif
@@ -194,8 +197,7 @@ Item {
 	}
 
 	component Anim: NumberAnimation {
-		duration: MaterialEasing.expressiveEffectsTime
-		easing.bezierCurve: MaterialEasing.expressiveEffects
-		easing.type: Easing.BezierSpline
+		duration: Appearance.anim.durations.expressiveDefaultSpatial
+		easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 	}
 }

Modules/Notifications/Notification.qml

@@ -115,7 +115,7 @@ CustomRect {
 				sourceComponent: ClippingRectangle {
 					implicitHeight: Config.notifs.sizes.image
 					implicitWidth: Config.notifs.sizes.image
-					radius: 1000
+					radius: Appearance.rounding.full
 
 					Image {
 						anchors.fill: parent
@@ -142,7 +142,7 @@ CustomRect {
 					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2) : DynamicColors.palette.m3secondaryContainer
 					implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 					implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
-					radius: 1000
+					radius: Appearance.rounding.full
 
 					Loader {
 						id: icon
@@ -312,7 +312,7 @@ CustomRect {
 					}
 
 					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-					radius: 1000
+					radius: Appearance.rounding.full
 				}
 
 				MaterialIcon {
@@ -431,7 +431,7 @@ CustomRect {
 		color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
 		implicitHeight: actionText.height + 4 * 2
 		implicitWidth: actionText.width + 8 * 2
-		radius: 1000
+		radius: Appearance.rounding.full
 
 		StateLayer {
 			function onClicked(): void {
@@ -439,7 +439,7 @@ CustomRect {
 			}
 
 			color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurface
-			radius: 1000
+			radius: Appearance.rounding.full
 		}
 
 		CustomText {

Modules/Notifications/Sidebar/Background.qml

@@ -1,7 +1,7 @@
-import qs.Components
-import qs.Config
 import QtQuick
 import QtQuick.Shapes
+import qs.Components
+import qs.Config
 
 ShapePath {
 	id: root
@@ -10,7 +10,7 @@ ShapePath {
 	readonly property real notifsRoundingX: panels.notifications.height > 0 && notifsWidthDiff < rounding * 2 ? notifsWidthDiff / 2 : rounding
 	readonly property real notifsWidthDiff: panels.notifications.width - wrapper.width
 	required property var panels
-	readonly property real rounding: 8
+	readonly property real rounding: Config.barConfig.rounding
 	readonly property real utilsRoundingX: utilsWidthDiff < rounding * 2 ? utilsWidthDiff / 2 : rounding
 	readonly property real utilsWidthDiff: panels.utilities.width - wrapper.width
 	required property Wrapper wrapper

Modules/Notifications/Sidebar/Content.qml

@@ -19,7 +19,7 @@ Item {
 			Layout.fillHeight: true
 			Layout.fillWidth: true
 			color: DynamicColors.tPalette.m3surfaceContainerLow
-			radius: 8
+			radius: Appearance.rounding.smallest
 
 			NotifDock {
 				props: root.props

Modules/Notifications/Sidebar/Notif.qml

@@ -19,11 +19,12 @@ CustomRect {
 	required property var visibilities
 
 	color: {
-		const c = root.modelData.urgency === "critical" ? DynamicColors.palette.m3secondaryContainer : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
+		const c = root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondaryContainer : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
 		return expanded ? c : Qt.alpha(c, 0);
 	}
 	implicitHeight: nonAnimHeight
 	radius: 6
+	state: expanded ? "expanded" : ""
 
 	Behavior on implicitHeight {
 		Anim {
@@ -33,7 +34,6 @@ CustomRect {
 	}
 	states: State {
 		name: "expanded"
-		when: root.expanded
 
 		PropertyChanges {
 			compactBody.anchors.margins: 10
@@ -63,10 +63,10 @@ CustomRect {
 
 		anchors.left: parent.left
 		anchors.top: parent.top
-		color: root.modelData.urgency === "critical" ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+		color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
 		elide: Text.ElideRight
 		maximumLineCount: 1
-		text: root.modelData.summary
+		text: root.modelData?.summary ?? ""
 		width: parent.width
 		wrapMode: Text.WordWrap
 	}
@@ -76,7 +76,7 @@ CustomRect {
 
 		anchors.left: parent.left
 		anchors.top: parent.top
-		text: root.modelData.summary
+		text: root.modelData?.summary ?? ""
 		visible: false
 	}
 
@@ -90,9 +90,9 @@ CustomRect {
 		shouldBeActive: !root.expanded
 
 		sourceComponent: CustomText {
-			color: root.modelData.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline
+			color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline
 			elide: Text.ElideRight
-			text: root.modelData.body.replace(/\n/g, " ")
+			text: String(root.modelData?.body ?? "").replace(/\n/g, " ")
 			textFormat: Text.StyledText
 		}
 	}
@@ -108,7 +108,7 @@ CustomRect {
 			animate: true
 			color: DynamicColors.palette.m3outline
 			font.pointSize: 11
-			text: root.modelData.timeStr
+			text: root.modelData?.timeStr ?? ""
 		}
 	}
 
@@ -130,8 +130,8 @@ CustomRect {
 				id: body
 
 				Layout.fillWidth: true
-				color: root.modelData.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurface
-				text: root.modelData.body.replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
+				color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurface
+				text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
 				textFormat: Text.MarkdownText
 				wrapMode: Text.WordWrap
 
@@ -148,14 +148,51 @@ CustomRect {
 	}
 
 	component WrappedLoader: Loader {
+		id: comp
+
 		required property bool shouldBeActive
 
-		active: opacity > 0
-		opacity: shouldBeActive ? 1 : 0
+		active: false
+		opacity: 0
 
-		Behavior on opacity {
-			Anim {
+		states: State {
+			name: "active"
+			when: comp.shouldBeActive
+
+			PropertyChanges {
+				comp.active: true
+				comp.opacity: 1
 			}
 		}
+		transitions: [
+			Transition {
+				from: ""
+				to: "active"
+
+				SequentialAnimation {
+					PropertyAction {
+						property: "active"
+					}
+
+					Anim {
+						property: "opacity"
+					}
+				}
+			},
+			Transition {
+				from: "active"
+				to: ""
+
+				SequentialAnimation {
+					Anim {
+						property: "opacity"
+					}
+
+					PropertyAction {
+						property: "active"
+					}
+				}
+			}
+		]
 	}
 }

Modules/Notifications/Sidebar/NotifActionList.qml

@@ -35,7 +35,7 @@ Item {
 					{
 						isClose: true
 					},
-					...root.notif.actions,
+					...(root.notif?.actions ?? ""),
 					{
 						isCopy: true
 					}
@@ -97,7 +97,7 @@ Item {
 						id: actionInner
 
 						anchors.centerIn: parent
-						sourceComponent: action.modelData.isClose || action.modelData.isCopy ? iconBtn : root.notif.hasActionIcons ? iconComp : textComp
+						sourceComponent: action.modelData.isClose || action.modelData.isCopy ? iconBtn : root.notif?.hasActionIcons ? iconComp : textComp
 					}
 
 					Component {

Modules/Notifications/Sidebar/NotifDock.qml

@@ -129,20 +129,27 @@ Item {
 	Timer {
 		id: clearTimer
 
-		interval: 50
+		interval: Math.max(15, Math.min(80, 69.8 - 12.3 * Math.log(NotifServer.notClosed.length)))
 		repeat: true
+		triggeredOnStart: true
 
 		onTriggered: {
-			let next = null;
-			for (let i = 0; i < notifList.repeater.count; i++) {
-				next = notifList.repeater.itemAt(i);
-				if (!next?.closed)
-					break;
-			}
-			if (next)
-				next.closeAll();
-			else
+			const first = NotifServer.notClosed[0];
+			if (!first) {
 				stop();
+				return;
+			}
+
+			const appName = first.appName;
+			let cleared = 0;
+			for (const n of NotifServer.notClosed.filter(n => n.appName === appName)) {
+				n.close();
+				cleared++;
+				if (cleared > 30) {
+					interval = 5;
+					return;
+				}
+			}
 		}
 	}
 
@@ -171,7 +178,7 @@ Item {
 			font.pointSize: Math.round(18 * 1.2)
 			icon: "clear_all"
 			padding: 8
-			radius: 8
+			radius: Appearance.rounding.full
 
 			onClicked: clearTimer.start()
 

Modules/Notifications/Sidebar/NotifDockList.qml

@@ -1,60 +1,47 @@
 pragma ComponentBehavior: Bound
 
+import Quickshell
+import QtQuick
+import ZShell.Components
 import qs.Components
 import qs.Config
 import qs.Modules
 import qs.Daemons
-import Quickshell
-import QtQuick
 
-Item {
+LazyListView {
 	id: root
 
 	required property Flickable container
-	property bool flag
 	required property Props props
-	readonly property alias repeater: repeater
-	readonly property int spacing: 8
-	required property var visibilities
+	required property PersistentProperties visibilities
 
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: {
-		const item = repeater.itemAt(repeater.count - 1);
-		return item ? item.y + item.implicitHeight : 0;
-	}
-
-	Repeater {
-		id: repeater
-
-		model: ScriptModel {
-			values: {
-				const map = new Map();
-				for (const n of NotifServer.notClosed)
-					map.set(n.appName, null);
-				for (const n of NotifServer.list)
-					map.set(n.appName, null);
-				return [...map.keys()];
-			}
-
-			onValuesChanged: root.flagChanged()
-		}
+	anchors.left: parent?.left
+	anchors.right: parent?.right
+	asynchronous: true
+	cacheBuffer: 400
+	implicitHeight: contentHeight
+	readyDelay: 1
+	removeDuration: Appearance.anim.durations.normal
+	spacing: Appearance.spacing.small
+	useCustomViewport: true
+	viewport: Qt.rect(0, container.contentY, width, container.height)
 
+	delegate: Component {
 		MouseArea {
 			id: notif
 
 			readonly property bool closed: notifInner.notifCount === 0
 			required property int index
 			required property string modelData
-			readonly property alias nonAnimHeight: notifInner.nonAnimHeight
 			property int startY
 
 			function closeAll(): void {
-				for (const n of NotifServer.notClosed.filter(n => n.appName === modelData)) {
-					n.close();
-				}
+				clearTimer.start();
 			}
 
+			LazyListView.preferredHeight: closed ? 0 : notifInner.nonAnimHeight
+			LazyListView.trackViewport: !notifInner.expanded && notifInner.nonAnimHeight < notifInner.implicitHeight
+			LazyListView.visibleHeight: notifInner.implicitHeight
 			acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
 			cursorShape: pressed ? Qt.ClosedHandCursor : undefined
 			drag.axis: Drag.XAxis
@@ -62,39 +49,39 @@ Item {
 			enabled: !closed
 			hoverEnabled: true
 			implicitHeight: notifInner.implicitHeight
-			implicitWidth: root.width
+			opacity: LazyListView.removing || closed || LazyListView.adding ? 0 : 1
 			preventStealing: true
-			y: {
-				root.flag; // Force update
-				let y = 0;
-				for (let i = 0; i < index; i++) {
-					const item = repeater.itemAt(i);
-					if (!item.closed)
-						y += item.nonAnimHeight + root.spacing;
-				}
-				return y;
-			}
+			scale: LazyListView.removing || closed ? 0.6 : LazyListView.adding ? 0 : 1
 
-			containmentMask: QtObject {
-				function contains(p: point): bool {
-					if (!root.container.contains(notif.mapToItem(root.container, p)))
-						return false;
-					return notifInner.contains(p);
+			Behavior on opacity {
+				Anim {
+				}
+			}
+			Behavior on scale {
+				Anim {
+					duration: Appearance.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
+					duration: Appearance.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on y {
+				enabled: notif.LazyListView.ready
+
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
+					duration: Appearance.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 				}
 			}
 
+			onDoubleClicked: event => {
+				if (event.button === Qt.LeftButton)
+					notifInner.toggleExpand(!notifInner.expanded);
+			}
 			onPositionChanged: event => {
 				if (pressed) {
 					const diffY = event.y - startY;
@@ -116,39 +103,22 @@ Item {
 					closeAll();
 			}
 
-			ParallelAnimation {
-				running: true
+			Timer {
+				id: clearTimer
 
-				Anim {
-					from: 0
-					property: "opacity"
-					target: notif
-					to: 1
-				}
+				interval: 15
+				repeat: true
+				triggeredOnStart: true
 
-				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
-					from: 0
-					property: "scale"
-					target: notif
-					to: 1
-				}
-			}
+				onTriggered: {
+					const notifs = NotifServer.notClosed.filter(n => n.appName === notif.modelData);
+					if (notifs.length === 0) {
+						stop();
+						return;
+					}
 
-			ParallelAnimation {
-				running: notif.closed
-
-				Anim {
-					property: "opacity"
-					target: notif
-					to: 0
-				}
-
-				Anim {
-					property: "scale"
-					target: notif
-					to: 0.6
+					for (const n of notifs.slice(0, 30))
+						n.close();
 				}
 			}
 
@@ -162,4 +132,30 @@ Item {
 			}
 		}
 	}
+	model: ScriptModel {
+		values: {
+			const map = new Map();
+			for (const n of NotifServer.notClosed)
+				map.set(n.appName, null);
+			for (const n of NotifServer.list)
+				map.set(n.appName, null);
+			return [...map.keys()];
+		}
+	}
+
+	onViewportAdjustNeeded: d => {
+		if (contentYAnim.running)
+			contentYAnim.complete();
+		contentYAnim.to = Math.max(0, container.contentY + d);
+		contentYAnim.start();
+	}
+
+	Anim {
+		id: contentYAnim
+
+		duration: Appearance.anim.durations.expressiveDefaultSpatial
+		easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		property: "contentY"
+		target: root.container
+	}
 }