Merge branch 'feat/task-runner-ci'

Reviewed-on: #164

.gersemirc

@@ -0,0 +1,3 @@
+indent: tabs
+list_expansion: favour-expansion
+definitions: [Plugins/cmake/qml-module.cmake, Plugins/gersemi/qt-add-shaders.cmake]

.gitea/workflows/ci-image.yml

@@ -18,7 +18,7 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Install Docker CLI
-              run: apk add --no-cache docker-cli
+              run: apk add --no-cache docker-cli docker-cli-buildx
 
             - name: Login to registry
               run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login git.aramjonghu.dev --username aramjonghu --password-stdin

.gitea/workflows/cpp.yml

@@ -17,46 +17,47 @@ jobs:
               run: |
                   find . \( -name '*.cpp' -o -name '*.h' -o -name '*.hpp' \) \
                     -not -path './build/*' \
-                    -exec clang-format -i --style=file {} +
+                    -exec clang-format --dry-run -Werror --style=file {} +
-                  git diff --exit-code && echo "clang-format: passed"
 
-    build:
+    build & lint:
         runs-on: alpine
         container:
             image: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
         steps:
             - name: Checkout
               uses: actions/checkout@v4
               with:
                   fetch-depth: 0
 
-            - name: Configure
+            - name: Cache CMake build
-              run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
+              uses: actions/cache@v4
-
-            - name: Build
-              run: ninja -C build
-
-    clang-tidy:
-        runs-on: alpine
-        container:
-            image: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
               with:
-                  fetch-depth: 0
+                  path: build
+                  key: cpp-build-${{ hashFiles('CMakeLists.txt', '**/CMakeLists.txt') }}
+                  restore-keys: |
+                      cpp-build-
+
+            - name: Cache ccache
+              uses: actions/cache@v4
+              with:
+                  path: ~/.ccache
+                  key: ccache-${{ runner.os }}-${{ github.sha }}
+                  restore-keys: |
+                      ccache-${{ runner.os }}-
 
             - name: Configure
               run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
 
             - name: Build
               run: ninja -C build
+              env:
+                  CMAKE_CXX_COMPILER_LAUNCHER: ccache
 
             - name: clang-tidy
               run: |
                   sed -i 's/-mno-direct-extern-access //g' build/compile_commands.json
                   set -o pipefail
-                  run-clang-tidy -p build -j $(nproc) -header-filter="Plugins/.*" 2>&1 | \
+                  run-clang-tidy -p build -j "$(nproc)" \
-                    grep -v 'Suppressed\|non-user\|non-system\|unknown argument.*mno-direct\|Found compiler error\|warnings generated\.\|^Use -header-filter'
+                      -source-filter="^$(pwd)/Plugins/" \
+                      -header-filter=".*Plugins/.*" \
+                      -removed-arg=-mno-direct-extern-access

.gitea/workflows/js-ts.yml

@@ -4,7 +4,7 @@ on:
     pull_request:
 
 jobs:
-    fmt:
+    fmt & lint:
         runs-on: alpine
         container: node:26-alpine
 
@@ -24,20 +24,6 @@ jobs:
                   else
                     echo "No JS/TS files found"
                   fi
-
-    lint:
-        runs-on: alpine
-        container: node:26-alpine
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git
-
             - 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

.gitea/workflows/python.yml

@@ -7,7 +7,7 @@ on:
     pull_request:
 
 jobs:
-    static:
+    fmt & lint:
         runs-on: debian
         container: node:26-trixie-slim
 
@@ -33,7 +33,7 @@ jobs:
                   . .venv/bin/activate
                   ruff check .
 
-    verify:
+    test & nuitka build:
         if: always()
         runs-on: debian
         container: node:26-trixie-slim
@@ -64,4 +64,4 @@ jobs:
             - name: Nuitka module check
               run: |
                   . .venv/bin/activate
-                  nuitka --module --include-package=zshell cli/src/zshell/
+                  nuitka --module --include-package=zshell cli/src/zshell/

.gitea/workflows/rust.yml

@@ -4,149 +4,77 @@ on:
     pull_request:
 
 jobs:
-    build:
+    clippy & fmt:
         runs-on: alpine
-        container: node:26-alpine
+        container: rust:alpine
         env:
             CARGO_HOME: ${{ github.workspace }}/.cargo
 
         steps:
+            - name: Install node for actions
+              run: |
+                  apk add --no-cache nodejs git
+
+            - name: Install rust components
+              run: |
+                  rustup component add clippy rustfmt
+                  cargo clippy --version
+                  rustfmt --version
+
             - 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-build-${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
+                  key: rust-build-${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
                   restore-keys: |
-                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
+                      rust-${{ runner.os }}-cargo-
-                      rust-${{ runner.os }}-build-
-                      rust-
 
-            - name: Install tools
+            - name: Clippy (with compile check)
               run: |
-                  apk add --no-cache \
+                  manifests=$(find . \( -name .cargo -o -name .git -o -name target \) -prune -o -name Cargo.toml -print)
-                    git \
+                  if [ -z "$manifests" ]; then
-                    cargo \
+                    if [ -n "$(find . \( -name .cargo -o -name target \) -prune -o -name '*.rs' -print -quit)" ]; then
-                    rust
+                      echo "Rust files found but no Cargo.toml"
-
+                      exit 1
-            - name: Cargo check
+                    fi
-              run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    for manifest in $(find . -name "Cargo.toml"); do
-                      cargo check --manifest-path "$manifest" && \
-                        echo "$manifest: check passed" || \
-                        { echo "$manifest: check failed"; exit 1; }
-                    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"
+                    exit 0
                   fi
-
+                  status=0
-    fmt:
+                  for manifest in $manifests; do
-        runs-on: alpine
+                    if (cd "$(dirname "$manifest")" && cargo clippy --all-targets --locked -- -D warnings); then
-        container: node:26-alpine
+                      echo "$manifest: Clippy passed"
-        env:
+                    else
-            CARGO_HOME: ${{ github.workspace }}/.cargo
+                      echo "$manifest: Clippy failed"
-
+                      status=1
-        steps:
+                    fi
-            - name: Checkout
+                  done
-              uses: actions/checkout@v4
+                  exit $status
-
-            - name: Cache cargo packages
-              uses: actions/cache@v4
-              env:
-                  cache-name: cache-cargo-packages
-              with:
-                  path: |
-                      .cargo/registry
-                      .cargo/git
-                      target
-                  key: rust-fmt-${{ runner.os }}-${{ 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
 
             - name: Format check
               run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
+                  manifests=$(find . \( -name .cargo -o -name .git -o -name target \) -prune -o -name Cargo.toml -print)
-                    status=0
+                  if [ -z "$manifests" ]; then
-                    for manifest in $(find . -name "Cargo.toml"); do
+                    if [ -n "$(find . \( -name .cargo -o -name target \) -prune -o -name '*.rs' -print -quit)" ]; then
-                      cargo fmt --manifest-path "$manifest" --check && \
+                      echo "Rust files found but no Cargo.toml"
-                        echo "$manifest: formatting OK" || \
+                      exit 1
-                        { echo "$manifest: needs formatting"; status=1; }
+                    fi
-                    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
-
-    clippy:
-        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-clippy-${{ runner.os }}-${{ 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 \
-                    rust-clippy
-
-            - 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"
+                    exit 0
                   fi
+                  status=0
+                  for manifest in $manifests; do
+                    if (cd "$(dirname "$manifest")" && cargo fmt --check); then
+                      echo "$manifest: formatting OK"
+                    else
+                      echo "$manifest: needs formatting"
+                      status=1
+                    fi
+                  done
+                  exit $status

.gitignore

@@ -1,23 +1,38 @@
-**/__pycache__/
 ./result/
 .pyre/
-.cache/
-.venv/
-.qmlls.ini
-build/
-compile_commands.json
-testpython
 pkg/
 *.tar.*
-uv.lock
-.qtcreator/
 dist/
 **/target/
 **/test-plugins/
 **/Charts/
 network-dev/
-**/zshell.build/
 **/zshell.dist/
+
+# Qml
+.qtcreator/
+.qmlls.ini
+
+# CMake compile artifacts
+.cache/
+compile_commands.json
+build/
+
+# Cargo home (CI sets CARGO_HOME inside the workspace)
+.cargo/
+
+# Python
+uv.lock
+testpython
+.venv/
+**/__pycache__/
+
+# Nuitka compile
+**/zshell.pyi
+**/zshell.cpython-*
+**/zshell.build/
+
+# Agents stuff
 .opencode/
 run-agent.sh
 AGENTS.md

Components/ButtonBase.qml

@@ -51,7 +51,7 @@ CustomRect {
 		if (internalChecked)
 			return checkedRadius;
 		if (isRound)
-			return implicitHeight / 2 * Math.min(1, Tokens.rounding.scale);
+			return (height ?? implicitHeight) / 2 * Math.min(1, Tokens.rounding.scale);
 		return defaultRadius;
 	}
 

Components/CircularProgress.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Shapes
+import ZShell
 import ZShell.Components
 import ZShell.Config
 import qs.Services
@@ -9,21 +10,50 @@ import qs.Services
 Item {
 	id: root
 
-	readonly property real arcRadius: (size - padding - strokeWidth * (1 + waveAmplitude * 2)) / 2
+	// Ring geometry, quantized in the item's own device pixel space and never
+	// against its position: the parent layout places the item on the device
+	// grid, so these values cannot change when the item moves (no jitter), and
+	// the ring stays crisp wherever it lands.
+	// Device-pixel center of the ring: an even stroke width wants a pixel
+	// boundary, an odd one a pixel center. Floored, matching
+	// WavyLineRenderer::snapCenterDev, so the wave and this background arc
+	// always land on the same center even when the box's device size is odd.
+	readonly property real centerDev: Math.floor(
+		sizeDev / 2 - strokeParity / 2
+	) + strokeParity / 2
+	readonly property real centerX: centerDev / dpr
+	readonly property real centerY: centerDev / dpr
+	// Whole device pixels, and one pixel of slack on the outer edge: the ring's
+	// antialias feather needs somewhere to fade, otherwise it is cut flat at
+	// the top/left/right/bottom of the item rect.
+	readonly property real arcRadius: Math.max(
+		1,
+		Math.floor(
+			(sizeDev - Math.round(padding * dpr) - strokeDev * (1 + waveAmplitude * 2) - 2) / 2
+		)
+	) / dpr
 	property color bgColor: Colors.palette.m3secondaryContainer
 	property real clampedVal: Math.max(1 / 360, Math.min(1, isNaN(value) ? 0 : value))
 	readonly property real dotAngleRad: (startAngle + sweepAngle - gapAngle * (sweepAngle < 360 ? 0 : 1)) * Math.PI / 180
+	readonly property real dpr: ZUtils.dprFor(root)
 	property color fgColor: Colors.palette.m3primary
-	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
+	readonly property real gapAngle: ((spacing + strokeLogical) / (arcRadius || 1)) * (180 / Math.PI)
 	property alias hasEndIndicator: dot.active
 	property real implicitSize
 	property int padding: 0
-	readonly property real size: Math.min(width, height)
+	// The item's own size in whole device pixels. Never adjusted upwards: the
+	// texture is exactly this wide, so ring values derived from it cannot spill
+	// past the item's bounds.
+	readonly property real size: sizeDev / dpr
+	readonly property real sizeDev: Math.round(Math.min(width, height) * dpr)
 	property int spacing: Tokens.spacing.small
+	readonly property real strokeDev: Math.max(1, Math.round(strokeWidth * dpr))
+	readonly property real strokeLogical: strokeDev / dpr
+	readonly property real strokeParity: strokeDev % 2
 	property int startAngle: -90
 	property int strokeWidth: Tokens.padding.extraSmall
 	property int sweepAngle: 360
-	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
+	readonly property real thickness: strokeLogical * (1 + waveAmplitude) * 2
 	property real value
 	property alias waveAmplitude: wave.amplitudeMultiplier
 	property alias waveDuration: waveProgAnim.duration
@@ -43,18 +73,17 @@ Item {
 			capStyle: ShapePath.RoundCap
 			fillColor: "transparent"
 			strokeColor: root.bgColor
-			strokeWidth: Math.min(1, remainingArc.sweepAngle) * root.strokeWidth
+			strokeWidth: Math.max(1, Math.round(Math.min(1, remainingArc.sweepAngle) * root.strokeDev)) / root.dpr
 
 			Behavior on strokeColor {
-				CAnim {
+				CAnim {}
-				}
 			}
 
 			PathAngleArc {
 				id: remainingArc
 
-				centerX: root.size / 2
+				centerX: root.centerX
-				centerY: root.size / 2
+				centerY: root.centerY
 				radiusX: root.arcRadius
 				radiusY: root.arcRadius
 				startAngle: root.startAngle + root.clampedVal * root.sweepAngle + root.gapAngle
@@ -68,11 +97,12 @@ Item {
 
 		amplitudeMultiplier: root.wavy ? 0.5 : 0
 		anchors.fill: parent
-		anchors.margins: -lineWidth * amplitudeMultiplier
+		anchors.margins: -Math.round(lineWidth * amplitudeMultiplier * root.dpr) / root.dpr
 		color: root.fgColor
 		frequency: 8
 		fullAngle: root.sweepAngle
 		lineWidth: root.strokeWidth
+		objectName: "wave"
 		pathType: WavyLine.Arc
 		radius: root.arcRadius
 		startAngle: root.startAngle
@@ -84,8 +114,7 @@ Item {
 			}
 		}
 		Behavior on color {
-			CAnim {
+			CAnim {}
-			}
 		}
 		Anim on waveProgress {
 			id: waveProgAnim
@@ -103,8 +132,11 @@ Item {
 	Loader {
 		id: dot
 
-		x: root.size / 2 + root.arcRadius * Math.cos(root.dotAngleRad) - width / 2
+		// Rounded in local device pixels: the dot's own size is a whole even
-		y: root.size / 2 + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2
+		// device count, so an integral local position puts its center on the grid
+		// whatever the ring's angle, and moving the gauge moves the dot with it.
+		x: Math.round((root.centerX + root.arcRadius * Math.cos(root.dotAngleRad) - width / 2) * root.dpr) / root.dpr
+		y: Math.round((root.centerY + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2) * root.dpr) / root.dpr
 
 		sourceComponent: CustomRect {
 			color: root.fgColor

Components/ClipRect.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell
 import ZShell.Components
 
 Item {
@@ -19,7 +20,7 @@ Item {
 	}
 
 	ShaderEffectSource {
-		id: source
+		id: src
 
 		hideSource: true
 		sourceItem: contentItem
@@ -27,7 +28,7 @@ Item {
 
 	RoundedMask {
 		anchors.fill: parent
-		source: source
+		source: src
 		topLeftRadius: root.topLeftRadius
 		topRightRadius: root.topRightRadius
 		bottomRightRadius: root.bottomRightRadius

Components/ColorArcPicker.qml

@@ -160,8 +160,7 @@ Item {
 		Behavior on color {
 			enabled: false
 
-			CAnim {
+			CAnim {}
-			}
 		}
 	}
 

Components/Coloriser.qml

@@ -8,7 +8,6 @@ MultiEffect {
 	colorization: 1
 
 	Behavior on colorizationColor {
-		CAnim {
+		CAnim {}
-		}
 	}
 }

Components/CustomClippingRect.qml

@@ -7,7 +7,6 @@ ClippingRectangle {
 	color: "transparent"
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 }

Components/CustomClippingWrapperRect.qml

@@ -7,7 +7,6 @@ ClippingWrapperRectangle {
 	color: "transparent"
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 }

Components/CustomProgressBar.qml

@@ -96,6 +96,8 @@ ProgressBar {
 
 				anchors.right: parent.right
 				implicitWidth: parent.width - wave.implicitWidth - Tokens.spacing.extraSmall
+				anchors.top: parent.top
+				anchors.bottom: parent.bottom
 			}
 
 			Line {
@@ -197,7 +199,6 @@ ProgressBar {
 	component Line: CustomRect {
 		property point bounds
 
-		anchors.verticalCenter: parent.verticalCenter
 		color: root.bgColor
 		implicitHeight: parent.height
 		implicitWidth: bounds.y - bounds.x

Components/CustomSwitch.qml

@@ -105,20 +105,16 @@ Switch {
 				width: height
 
 				Behavior on end1 {
-					PropAnim {
+					PropAnim {}
-					}
 				}
 				Behavior on end2 {
-					PropAnim {
+					PropAnim {}
-					}
 				}
 				Behavior on start1 {
-					PropAnim {
+					PropAnim {}
-					}
 				}
 				Behavior on start2 {
-					PropAnim {
+					PropAnim {}
-					}
 				}
 
 				ShapePath {
@@ -134,8 +130,7 @@ Switch {
 					strokeWidth: 16 * 0.15
 
 					Behavior on strokeColor {
-						CAnim {
+						CAnim {}
-						}
 					}
 
 					PathLine {

Components/CustomText.qml

@@ -20,8 +20,7 @@ Text {
 	textFormat: Text.PlainText
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 	Behavior on text {
 		enabled: root.animate
@@ -33,8 +32,7 @@ Text {
 				type: Anim.FastEffects
 			}
 
-			PropertyAction {
+			PropertyAction {}
-			}
 
 			TAnim {
 				target: root

Components/FadeImage.qml

@@ -65,8 +65,7 @@ Image {
 				value: root.source
 			}
 
-			PropertyAction {
+			PropertyAction {}
-			}
 
 			ScriptAction {
 				script: root.maybeStartInAnim()

Components/KineticFlickable.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import qs.Services
+
+Flickable {
+	id: root
+
+	interactive: !ShellState.forActive().isDrawing
+
+	rebound: Transition {
+		Anim {
+			properties: "x,y"
+			type: Anim.FastEffects
+		}
+	}
+
+	readonly property KineticWheelScroller _scroller: KineticWheelScroller {
+		id: wheelScroller
+		anchors.fill: parent
+		parent: root
+		z: 12
+		flickable: root
+	}
+}

Components/KineticWheelScroller.qml

@@ -0,0 +1,653 @@
+import QtQuick
+
+// Taken from hyprfm: https://github.com/soyeb-jim285/hyprfm/blob/main/src/qml/views/KineticWheelScroller.qml
+// Adapted to fit this project where needed.
+
+// Deliberately not a MouseArea: a MouseArea claims the arrow cursor for its
+// whole area, which silently killed every cursorShape in the views this
+// overlays (column resize grips, pointer hands). A WheelHandler on a plain
+// Item takes wheel events without touching the cursor.
+Item {
+	id: root
+
+	required property var flickable
+
+	property real wheelStep: 56
+	property real mouseWheelMultiplier: 1.0
+	property real touchpadMultiplier: 1.35
+	property real minVelocity: 480
+	property real maxVelocity: 5200
+	property real kineticGain: 1.35
+	property real smoothing: 0.72
+	property real edgeEpsilon: 1.0
+	// Browser-style overscroll: larger visible rubber-band, softer
+	// resistance, and a springy settle on release.
+	property real overshootLimit: 140
+	property real overshootResistance: 0.38
+	property real maxOvershootInput: 520
+	// Bounce magnitude per unit of impact velocity. Keep this deliberately
+	// small: slow edge hits should settle, not fire a visibly faster bounce.
+	property real kineticBounceGain: 0.018
+	property real maxKineticBounceInput: 90
+	// Minimum impact velocity that actually produces a visible bounce.
+	// Very slow landings skip bounce entirely — matches what browsers do
+	// when a fling decays to near-zero before reaching the edge.
+	property real minBounceVelocity: 260
+
+	property real velocity: 0
+	property double lastWheelTimestamp: 0
+	property bool kineticCandidate: false
+	property real overshootInput: 0
+	property real overshootReleaseVelocity: 0
+	property real pendingKineticBounceVelocity: 0
+	// Set by runKineticGlide when the glide will clamp against an edge.
+	// It is the glide velocity at the instant of impact, which drives the
+	// elastic bounce amount and duration — browser-style: slow impact
+	// makes a small gentle bounce; fast impact makes a big springy one.
+	property real pendingImpactVelocity: 0
+
+	// Browser-style exponential-feeling glide replaces the linear
+	// flickDeceleration decay. Tail uses OutQuart — soft landing.
+	property real kineticTau: 0.42
+
+	property real mouseGlideTime: 0.09      // decay time constant (s); higher = longer coast
+	property real mouseAccelWindow: 140     // ms between notches that counts as "continuous"
+	property real mouseAccelStep: 0.15      // extra impulse multiplier per consecutive notch
+	property real mouseMaxAccel: 2.5
+	property real mouseSnap: 0.2   // fraction of each notch applied instantly (0 = fully glided, 1 = no smoothing)
+
+	property real mouseVelocity: 0
+	property int mouseDir: 0
+	property int mouseStreak: 0
+	property double mouseLastTime: 0
+
+	// Escape hatch if auto-detection misjudges a device
+	property bool forceMouseWheel: false
+
+	readonly property real visualOvershoot: overshootInput < 0 ? rubberDistance(-overshootInput) : -rubberDistance(overshootInput)
+
+	signal scrollStarted
+
+	WheelHandler {
+		id: wheelHandler
+		acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+		// `blocking` decides whether the event continues to the Flickable
+		// underneath; handleWheel() flips it per event (the old MouseArea
+		// code toggled wheel.accepted for the same purpose).
+		onWheel: wheel => root.handleWheel(wheel)
+	}
+
+	function isMouseWheel(wheel) {
+		if (forceMouseWheel)
+			return true;
+		var ay = wheel.angleDelta.y;
+		if (ay === 0)
+			return false;
+		return Math.abs(ay) % 120 === 0;
+	}
+
+	function minimumContentY() {
+		if (!flickable)
+			return 0;
+
+		return flickable.originY;
+	}
+
+	function maximumContentY() {
+		if (!flickable)
+			return 0;
+
+		return Math.max(minimumContentY(), minimumContentY() + flickable.contentHeight - flickable.height);
+	}
+
+	function boundedContentY(value) {
+		return Math.max(minimumContentY(), Math.min(maximumContentY(), value));
+	}
+
+	function rubberDistance(distance) {
+		if (distance <= 0)
+			return 0;
+
+		var scaled = (distance * overshootResistance) / overshootLimit;
+		return overshootLimit * (1 - 1 / (1 + scaled));
+	}
+
+	function setOvershootInput(value) {
+		overshootInput = Math.max(-maxOvershootInput, Math.min(maxOvershootInput, value));
+	}
+
+	function hasOvershoot() {
+		return Math.abs(overshootInput) > edgeEpsilon;
+	}
+
+	function absorbOvershoot(delta) {
+		if (!hasOvershoot())
+			return delta;
+
+		var sameDirection = (overshootInput < 0 && delta < 0) || (overshootInput > 0 && delta > 0);
+
+		if (sameDirection) {
+			setOvershootInput(overshootInput + delta);
+			return 0;
+		}
+
+		var combined = overshootInput + delta;
+		if ((overshootInput < 0 && combined < 0) || (overshootInput > 0 && combined > 0)) {
+			setOvershootInput(combined);
+			return 0;
+		}
+
+		setOvershootInput(0);
+		return combined;
+	}
+
+	function deltaFor(wheel) {
+		var rawDelta;
+		if (isMouseWheel(wheel))
+			rawDelta = (wheel.angleDelta.y / 120.0) * wheelStep * mouseWheelMultiplier;
+		else
+			rawDelta = wheel.pixelDelta.y !== 0 ? wheel.pixelDelta.y * touchpadMultiplier : (wheel.angleDelta.y / 120.0) * wheelStep * mouseWheelMultiplier;
+
+		return wheel.inverted ? rawDelta : -rawDelta;
+	}
+
+	function shouldUseKinetic(wheel, gap) {
+		return wheel.pixelDelta.y !== 0 || (wheel.phase !== Qt.NoScrollPhase && wheel.angleDelta.y === 0);
+	}
+
+	function scrollBy(delta) {
+		if (!flickable || Math.abs(delta) < 0.01)
+			return;
+		kineticBounceSequence.stop();
+		bounceBackAnimation.stop();
+
+		var remainingDelta = absorbOvershoot(delta);
+		if (Math.abs(remainingDelta) < 0.01)
+			return;
+		var minY = minimumContentY();
+		var maxY = maximumContentY();
+		var next = flickable.contentY + remainingDelta;
+
+		if (next < minY) {
+			flickable.contentY = minY;
+			setOvershootInput(overshootInput + next - minY);
+			return;
+		}
+
+		if (next > maxY) {
+			flickable.contentY = maxY;
+			setOvershootInput(overshootInput + next - maxY);
+			return;
+		}
+
+		flickable.contentY = next;
+	}
+
+	function remainingDistanceFor(velocityValue) {
+		if (!flickable)
+			return 0;
+
+		if (velocityValue > 0)
+			return Math.max(0, maximumContentY() - flickable.contentY);
+
+		if (velocityValue < 0)
+			return Math.max(0, flickable.contentY - minimumContentY());
+
+		return 0;
+	}
+
+	function clampedContentVelocity(velocityValue) {
+		if (!flickable || velocityValue === 0)
+			return 0;
+
+		var remaining = remainingDistanceFor(velocityValue);
+		if (remaining <= edgeEpsilon)
+			return 0;
+
+		var maxAllowed = Math.sqrt(2 * flickable.flickDeceleration * remaining);
+		var magnitude = Math.min(Math.abs(velocityValue), maxAllowed);
+		return velocityValue < 0 ? -magnitude : magnitude;
+	}
+
+	function resetState() {
+		velocity = 0;
+		lastWheelTimestamp = 0;
+		kineticCandidate = false;
+		pendingKineticBounceVelocity = 0;
+		pendingImpactVelocity = 0;
+		overshootReleaseVelocity = 0;
+		finishTimer.stop();
+		kineticAnim.stop();
+		kineticBounceSequence.stop();
+		bounceBackAnimation.stop();
+		stopMouseGlide();
+	}
+
+	function bounceBack() {
+		if (!hasOvershoot()) {
+			setOvershootInput(0);
+			overshootReleaseVelocity = 0;
+			return;
+		}
+
+		var mag = Math.min(1.0, Math.abs(overshootInput) / maxOvershootInput);
+		var speed = Math.abs(overshootReleaseVelocity);
+		var duration = speed >= minBounceVelocity ? Math.round(Math.max(280, Math.min(620, Math.abs(overshootInput) / speed * 1600))) : Math.round(380 + mag * 260);
+
+		kineticBounceSequence.stop();
+		bounceBackAnimation.stop();
+		bounceBackAnimation.duration = duration;
+		bounceBackAnimation.from = overshootInput;
+		bounceBackAnimation.to = 0;
+		overshootReleaseVelocity = 0;
+		bounceBackAnimation.start();
+	}
+
+	function triggerKineticBounce(contentVelocity) {
+		if (!flickable || contentVelocity === 0)
+			return;
+		var atTop = flickable.contentY <= minimumContentY() + edgeEpsilon;
+		var atBottom = flickable.contentY >= maximumContentY() - edgeEpsilon;
+		if ((contentVelocity < 0 && !atTop) || (contentVelocity > 0 && !atBottom))
+			return;
+		var speed = Math.abs(contentVelocity);
+		var effectiveVelocity = contentVelocity;
+		if (speed < minBounceVelocity)
+			effectiveVelocity = (contentVelocity < 0 ? -1 : 1) * Math.max(90, speed * 0.6);
+
+		var target = Math.max(-maxKineticBounceInput, Math.min(maxKineticBounceInput, effectiveVelocity * kineticBounceGain));
+		if (Math.abs(target) < 2.5)
+			target = contentVelocity < 0 ? -2.5 : 2.5;
+
+		var mag = Math.min(1.0, Math.abs(target) / maxKineticBounceInput);
+		var inDur = Math.round(150 + mag * 120);
+		var outDur = Math.round(320 + mag * 300);
+
+		kineticBounceSequence.stop();
+		bounceBackAnimation.stop();
+		overshootReleaseVelocity = 0;
+		overshootInput = 0;
+		kineticBounceIn.from = 0;
+		kineticBounceIn.to = target;
+		kineticBounceIn.duration = inDur;
+		kineticBounceOut.from = target;
+		kineticBounceOut.to = 0;
+		kineticBounceOut.duration = outDur;
+		kineticBounceSequence.start();
+	}
+
+	function stopAndSettle() {
+		kineticAnim.stop();
+		if (flickable && flickable.flicking)
+			flickable.cancelFlick();
+
+		resetState();
+		bounceBack();
+	}
+
+	function runKineticGlide(contentVelocity) {
+		// contentVelocity > 0 means the content should scroll downward
+		// (contentY increases), matching deltaFor()'s sign convention.
+		if (!flickable || contentVelocity === 0) {
+			pendingImpactVelocity = 0;
+			return false;
+		}
+
+		var current = flickable.contentY;
+		var unclampedTarget = current + contentVelocity * kineticTau;
+		var target = boundedContentY(unclampedTarget);
+		var distUnclamped = Math.abs(unclampedTarget - current);
+		var distActual = Math.abs(target - current);
+		if (distActual < 4) {
+			pendingImpactVelocity = 0;
+			return false;
+		}
+
+		// If the glide is clipped by an edge, compute the velocity at the
+		// moment of impact using the OutQuart velocity profile. That is
+		// the velocity the bounce should feed on — gentle impacts get
+		// gentle bounces, hard impacts get big springy ones.
+		var hitsEdge = distActual + 0.5 < distUnclamped;
+		if (hitsEdge && distUnclamped > 0) {
+			var f = distActual / distUnclamped;        // fraction covered
+			// OutQuart: y = 1 - (1-x)^4, so velocity fraction at distance
+			// fraction f equals (1-f)^(3/4) (times the constant peak).
+			var velFraction = Math.pow(Math.max(0, 1 - f), 0.75);
+			pendingImpactVelocity = contentVelocity * velFraction;
+		} else {
+			pendingImpactVelocity = 0;
+		}
+
+		kineticAnim.stop();
+		kineticAnim.from = current;
+		kineticAnim.to = target;
+		// Duration from distance and velocity; clamped so short flicks
+		// stay snappy and long flicks don't run forever.
+		kineticAnim.duration = Math.round(Math.min(1400, Math.max(180, distActual / Math.abs(contentVelocity) * 1800)));
+		kineticAnim.start();
+		return true;
+	}
+
+	function atEdgeFor(contentVelocity) {
+		if (!flickable)
+			return false;
+		if (contentVelocity > 0)
+			return flickable.contentY >= maximumContentY() - edgeEpsilon;
+		if (contentVelocity < 0)
+			return flickable.contentY <= minimumContentY() + edgeEpsilon;
+		return false;
+	}
+
+	function finishScroll() {
+		if (!flickable)
+			return;
+		finishTimer.stop();
+
+		if (hasOvershoot()) {
+			velocity = 0;
+			lastWheelTimestamp = 0;
+			kineticCandidate = false;
+			pendingKineticBounceVelocity = 0;
+			pendingImpactVelocity = 0;
+			kineticAnim.stop();
+			bounceBack();
+			return;
+		}
+
+		var rawContentVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, velocity * kineticGain));
+		var contentVelocity = clampedContentVelocity(rawContentVelocity);
+		var useKinetic = kineticCandidate && Math.abs(rawContentVelocity) >= minVelocity;
+
+		velocity = 0;
+		lastWheelTimestamp = 0;
+		kineticCandidate = false;
+
+		if (useKinetic) {
+			if (atEdgeFor(rawContentVelocity)) {
+				// Already at the edge — fling bounces immediately.
+				pendingKineticBounceVelocity = 0;
+				triggerKineticBounce(rawContentVelocity);
+			} else if (Math.abs(contentVelocity) >= minVelocity && runKineticGlide(contentVelocity)) {
+				// Glide started — bounce fires on kineticAnim.onFinished
+				// if it lands at an edge.
+				pendingKineticBounceVelocity = contentVelocity;
+			} else {
+				pendingKineticBounceVelocity = 0;
+				flickable.returnToBounds();
+			}
+		} else {
+			pendingKineticBounceVelocity = 0;
+			flickable.returnToBounds();
+		}
+	}
+
+	function handleWheel(wheel) {
+		wheelHandler.blocking = true;
+		if (!enabled || !visible || !flickable || !flickable.visible || !flickable.interactive) {
+			wheelHandler.blocking = false;
+			return;
+		}
+
+		if (wheel.modifiers !== Qt.NoModifier) {
+			wheelHandler.blocking = false;
+			return;
+		}
+
+		if (maximumContentY() <= minimumContentY()) {
+			wheelHandler.blocking = false;
+			return;
+		}
+
+		var delta = deltaFor(wheel);
+		if (delta === 0) {
+			wheelHandler.blocking = false;
+			return;
+		}
+
+		// Cancel any in-flight glide — user input always wins, position
+		// stays where it is, then new delta is applied from there.
+		if (kineticAnim.running) {
+			pendingKineticBounceVelocity = 0;
+			pendingImpactVelocity = 0;
+			kineticAnim.stop();
+		}
+		kineticBounceSequence.stop();
+		bounceBackAnimation.stop();
+		if (flickable.flicking) {
+			pendingKineticBounceVelocity = 0;
+			pendingImpactVelocity = 0;
+			flickable.cancelFlick();
+		}
+
+		var now = Date.now();
+		var isTouchpad = !isMouseWheel(wheel) && (wheel.pixelDelta.y !== 0 || (wheel.phase !== Qt.NoScrollPhase && wheel.angleDelta.y === 0));
+		if (!isTouchpad) {
+			velocity = 0;
+			lastWheelTimestamp = 0;
+			kineticCandidate = false;
+			scrollStarted();
+			handleMouseDelta(delta, now);
+			return;
+		}
+
+		// Touchpad path (unchanged below), but cancel any mouse glide first
+		stopMouseGlide();
+
+		var gap = lastWheelTimestamp > 0 ? now - lastWheelTimestamp : 16;
+		var dt = Math.max(8, Math.min(24, gap));
+		var instantVelocity = (delta / dt) * 1000;
+
+		kineticCandidate = kineticCandidate || shouldUseKinetic(wheel, gap);
+		scrollStarted();
+		scrollBy(delta);
+
+		if (hasOvershoot()) {
+			overshootReleaseVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, instantVelocity));
+			velocity = 0;
+			kineticCandidate = false;
+			lastWheelTimestamp = now;
+			finishTimer.restart();
+			return;
+		}
+
+		velocity = lastWheelTimestamp <= 0 ? instantVelocity : velocity * (1.0 - smoothing) + instantVelocity * smoothing;
+		lastWheelTimestamp = now;
+		finishTimer.restart();
+
+		if (wheel.phase === Qt.ScrollEnd)
+			finishScroll();
+	}
+
+	function stopMouseGlide() {
+		mouseGlide.stop();
+		mouseVelocity = 0;
+		mouseDir = 0;
+		mouseStreak = 0;
+		mouseLastTime = 0;
+	}
+
+	function handleMouseDelta(delta, now) {
+		var dir = delta > 0 ? 1 : -1;
+
+		// Edge or active overshoot: existing rubber-band path
+		if (hasOvershoot() || atEdgeFor(dir)) {
+			stopMouseGlide();
+			scrollBy(delta);
+			overshootReleaseVelocity = 0;
+			finishTimer.restart();
+			return;
+		}
+
+		var continuous = dir === mouseDir && (now - mouseLastTime) <= mouseAccelWindow;
+		if (!continuous)
+			mouseVelocity = 0;              // new gesture or reversal: start clean
+		mouseStreak = continuous ? mouseStreak + 1 : 0;
+
+		// Compute the gap BEFORE overwriting mouseLastTime
+		var gap = mouseLastTime > 0 ? Math.max(12, Math.min(mouseAccelWindow, now - mouseLastTime)) : 0;
+
+		mouseDir = dir;
+		mouseLastTime = now;
+
+		var accel = Math.min(mouseMaxAccel, 1 + mouseStreak * mouseAccelStep);
+
+		// --- velocity update (this is the part that changed) ---
+
+		// Part of the notch lands immediately
+		var instant = delta * mouseSnap;
+		flickable.contentY = boundedContentY(flickable.contentY + instant);
+
+		// The rest becomes glide velocity, stacked onto the current velocity
+		var glide = delta * (1 - mouseSnap) * accel;
+		var v = mouseVelocity + glide / mouseGlideTime;
+
+		// While notches keep arriving, don't fall below the rate they imply
+		if (continuous && gap > 0) {
+			var rate = glide / (gap / 1000);
+			if (Math.abs(rate) > Math.abs(v))
+				v = rate;
+		}
+		mouseVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, v));
+
+		// --- end velocity update ---
+
+		if (!mouseGlide.running)
+			mouseGlide.start();
+	}
+
+	function stepMouseGlide(dt) {
+		if (!flickable || flickable.dragging) {
+			stopMouseGlide();
+			return;
+		}
+
+		dt = Math.min(dt, 0.05);
+		var decay = Math.exp(-dt / mouseGlideTime);
+		// Exact integral of v0 * e^(-t/tau) over dt, so it's frame-rate independent
+		var step = mouseVelocity * mouseGlideTime * (1 - decay);
+		var next = flickable.contentY + step;
+		var minY = minimumContentY();
+		var maxY = maximumContentY();
+
+		if (next <= minY || next >= maxY) {
+			var impact = mouseVelocity;
+			flickable.contentY = next <= minY ? minY : maxY;
+			mouseGlide.stop();
+			mouseVelocity = 0;
+			mouseDir = 0;
+			mouseStreak = 0;
+			triggerKineticBounce(impact);   // bounce scales with the real impact speed
+			return;
+		}
+
+		flickable.contentY = next;
+		mouseVelocity *= decay;
+
+		if (Math.abs(mouseVelocity) < 40)   // was 8
+			stopMouseGlide();
+	}
+
+	FrameAnimation {
+		id: mouseGlide
+		onTriggered: root.stepMouseGlide(frameTime)
+	}
+
+	Timer {
+		id: finishTimer
+		interval: 45
+		repeat: false
+		onTriggered: root.finishScroll()
+	}
+
+	NumberAnimation {
+		id: kineticAnim
+		target: root.flickable
+		property: "contentY"
+		easing.type: Easing.OutQuart
+		onFinished: {
+			// Prefer the impact-time velocity (computed in runKineticGlide)
+			// so the bounce matches the residual energy at the moment the
+			// glide hit the edge — slow landings → soft bounce, fast
+			// landings → big springy bounce.
+			var bv = Math.abs(root.pendingImpactVelocity) > root.edgeEpsilon ? root.pendingImpactVelocity : root.pendingKineticBounceVelocity;
+			root.pendingImpactVelocity = 0;
+			root.pendingKineticBounceVelocity = 0;
+			if (Math.abs(bv) > root.edgeEpsilon)
+				root.triggerKineticBounce(bv);
+		}
+	}
+
+	NumberAnimation {
+		id: bounceBackAnimation
+		target: root
+		property: "overshootInput"
+		easing.type: Easing.OutCubic
+	}
+
+	SequentialAnimation {
+		id: kineticBounceSequence
+
+		NumberAnimation {
+			id: kineticBounceIn
+			target: root
+			property: "overshootInput"
+			easing.type: Easing.OutCubic
+		}
+
+		NumberAnimation {
+			id: kineticBounceOut
+			target: root
+			property: "overshootInput"
+			easing.type: Easing.OutCubic
+		}
+	}
+
+	Translate {
+		id: overshootTranslate
+		y: root.visualOvershoot
+	}
+
+	Connections {
+		target: root.flickable
+
+		function onInteractiveChanged() {
+			if (!root.flickable.interactive)
+				root.stopAndSettle();
+		}
+
+		function onContentHeightChanged() {
+			if (!root.flickable.moving) {
+				root.flickable.contentY = root.boundedContentY(root.flickable.contentY);
+				root.bounceBack();
+			}
+		}
+
+		function onHeightChanged() {
+			if (!root.flickable.moving) {
+				root.flickable.contentY = root.boundedContentY(root.flickable.contentY);
+				root.bounceBack();
+			}
+		}
+
+		function onVisibleChanged() {
+			if (!root.flickable.visible)
+				root.stopAndSettle();
+		}
+
+		function onMovementEnded() {
+			if (Math.abs(root.pendingKineticBounceVelocity) > root.edgeEpsilon) {
+				var bounceVelocity = root.pendingKineticBounceVelocity;
+				root.pendingKineticBounceVelocity = 0;
+				root.triggerKineticBounce(bounceVelocity);
+			}
+		}
+	}
+
+	Component.onCompleted: {
+		if (!flickable)
+			return;
+		flickable.flickDeceleration = 2800;
+		flickable.maximumFlickVelocity = Math.max(flickable.maximumFlickVelocity, maxVelocity);
+		flickable.contentItem.transform = [overshootTranslate];
+	}
+}

Components/LineGraph.qml

@@ -55,6 +55,21 @@ Item {
 			return ZUtils.snap(v, canvas);
 		}
 
+		// A value is plottable only if it is a real number. Everything else -
+		// null, undefined, NaN, an unparsable string from the API - is a hole, so
+		// the series splits there. Non-finite coordinates must never reach the
+		// path: one NaN lineTo makes the canvas ignore the rest of the curve, and
+		// the fill then runs from whatever y it last had straight down.
+		function numeric(v) {
+			if (typeof v === "number")
+				return Number.isFinite(v) ? v : null;
+			if (typeof v === "string") {
+				const n = Number(v);
+				return Number.isFinite(n) ? n : null;
+			}
+			return null;
+		}
+
 		function strokeCurve(ctx, pts) {
 			ctx.beginPath();
 			ctx.moveTo(pts[0].x, pts[0].y);
@@ -230,7 +245,8 @@ Item {
 			if (loAuto || hiAuto) {
 				let dmin = Infinity;
 				let dmax = -Infinity;
-				for (const v of root.values) {
+				for (const value of root.values) {
+					const v = numeric(value);
 					if (v == null)
 						continue;
 					if (v < dmin)
@@ -272,7 +288,7 @@ Item {
 			if (range <= 0 || root.xSteps < 1)
 				return;
 
-			let series = root.values;
+			let series = root.values.map(v => numeric(v));
 			if (root.smoothing > 0 && series.length > 0) {
 				const radius = Math.round(root.smoothing);
 				const raw = series;

Components/LoadingIndicator.qml

@@ -64,8 +64,7 @@ MaterialShape {
 		to: 360
 	}
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 
 	ElapsedTimer {

Components/MarqueeText.qml

@@ -47,12 +47,10 @@ Item {
 	implicitWidth: vertical ? elideText.implicitHeight : elideText.implicitWidth
 
 	Behavior on leftFadeStrength {
-		Anim {
+		Anim {}
-		}
 	}
 	Behavior on rightFadeStrength {
-		Anim {
+		Anim {}
-		}
 	}
 
 	onHeightChanged: resetMarquee()

Components/Menu.qml

@@ -35,7 +35,7 @@ MouseArea {
 	cursorShape: expanded ? Qt.ArrowCursor : undefined
 	enabled: expanded
 	hoverEnabled: expanded
-	layer.enabled: opacity < 1
+	layer.enabled: false
 	opacity: expanded ? 1 : 0
 	parent: {
 		const win = QsWindow.window;
@@ -102,8 +102,7 @@ MouseArea {
 			yScale: root.expanded ? 1 : 0.1
 
 			Behavior on yScale {
-				Anim {
+				Anim {}
-				}
 			}
 		}
 
@@ -140,8 +139,7 @@ MouseArea {
 						radius: menu.radius - column.anchors.margins
 
 						Behavior on radius {
-							Anim {
+							Anim {}
-							}
 						}
 
 						StateLayer {

Components/Notifs/NotifActions.qml

@@ -0,0 +1,120 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Notifications
+import Quickshell.Widgets
+import ZShell.Components
+import ZShell.Config
+import ZShell.Services
+import qs.Components
+import qs.Services
+
+ButtonRow {
+	id: root
+
+	required property NotificationRow notif
+	required property color buttonColour
+
+	readonly property color fillColour: notif.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : buttonColour
+	readonly property color buttonTextColour: notif.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
+
+	function invoke(action: var): void {
+		action.invoke();
+		if (!notif.resident)
+			notif.dismiss();
+	}
+
+	spacing: Tokens.spacing.extraSmall
+
+	IconButton {
+		isRound: true
+		shapeMorph: true
+		fillWidth: root.notif.actions.length === 0
+		inactiveColor: root.fillColour
+		inactiveOnColor: root.buttonTextColour
+		icon: "close"
+		padding: Tokens.padding.extraSmall
+		onClicked: root.notif.dismiss()
+	}
+
+	Repeater {
+		model: root.notif.actions
+
+		delegate: root.notif.hasActionIcons ? iconAction : textAction
+	}
+
+	IconButton {
+		isRound: true
+		shapeMorph: true
+		fillWidth: root.notif.actions.length === 0
+		inactiveColor: root.fillColour
+		inactiveOnColor: root.buttonTextColour
+		icon: copyTimer.running ? "inventory" : "content_copy"
+		padding: Tokens.padding.extraSmall
+		onClicked: {
+			Quickshell.clipboardText = root.notif.body;
+			copyTimer.restart();
+		}
+		label.animate: true
+
+		Timer {
+			id: copyTimer
+
+			interval: 3000
+		}
+	}
+
+	Component {
+		id: textAction
+
+		TextButton {
+			required property var modelData
+
+			isRound: true
+			shapeMorph: true
+			fillWidth: true
+			inactiveColor: root.fillColour
+			inactiveOnColor: root.buttonTextColour
+			text: modelData.text
+			onClicked: root.invoke(modelData)
+
+			label.horizontalAlignment: Text.AlignHCenter
+			label.anchors.left: left
+			label.anchors.right: right
+			label.anchors.verticalCenter: verticalCenter
+			label.anchors.centerIn: undefined
+			label.anchors.margins: Tokens.padding.medium
+			label.elide: Text.ElideRight
+		}
+	}
+
+	Component {
+		id: iconAction
+
+		ButtonBase {
+			id: button
+
+			required property var modelData
+
+			isRound: true
+			shapeMorph: true
+			fillWidth: true
+			padding: Tokens.padding.extraSmall
+			inactiveColor: root.fillColour
+			inactiveOnColor: root.buttonTextColour
+			implicitWidth: implicitHeight
+			implicitHeight: icon.implicitHeight + padding * 2
+			onClicked: root.invoke(modelData)
+
+			IconImage {
+				id: icon
+
+				anchors.centerIn: parent
+				implicitSize: Math.round(Tokens.font.icon.medium.pointSize * 1.3)
+				asynchronous: true
+				source: Quickshell.iconPath(button.modelData.identifier)
+			}
+		}
+	}
+}

Components/Notifs/NotifAvatar.qml

@@ -0,0 +1,201 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Shapes
+import Quickshell
+import ZShell
+import M3Shapes
+import ZShell.Config
+import qs.Components
+import qs.Helpers
+import qs.Services
+import Quickshell.Services.Notifications
+
+Item {
+	id: root
+
+	required property var owner
+	required property string image
+	required property string icon
+	required property int urgency
+	required property string summary
+	required property color lowFillColour
+	property real progress: 0
+	property string shownImage
+	property string shownIcon
+
+	readonly property color fillColour: urgency === NotificationUrgency.Critical ? Colors.palette.m3primary : urgency === NotificationUrgency.Low ? lowFillColour : Colors.palette.m3secondaryContainer
+	readonly property color iconColour: urgency === NotificationUrgency.Critical ? Colors.palette.m3onPrimary : urgency === NotificationUrgency.Low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSecondaryContainer
+
+	implicitWidth: Config.notifs.sizes.image
+	implicitHeight: Config.notifs.sizes.image
+
+	// Keeping the previously shown url avoids replaying the fade when a row
+	// swaps between its raw source and the cached blob.
+	onImageChanged: {
+		if (image && !owner.isSameImage(shownImage))
+			shownImage = image;
+	}
+	onIconChanged: {
+		if (icon && !owner.isSameAppIcon(shownIcon))
+			shownIcon = icon;
+	}
+	Component.onCompleted: {
+		shownImage = image;
+		shownIcon = icon;
+	}
+
+	Component {
+		id: imageComp
+
+		FadeImage {
+			source: Qt.resolvedUrl(root.shownImage)
+			width: Config.notifs.sizes.image
+			height: Config.notifs.sizes.image
+			fadeInLargeAnim: Anim.DefaultEffects
+		}
+	}
+
+	Component {
+		id: appIconComp
+
+		FadeIcon {
+			size: Math.round(Config.notifs.sizes.image * 0.6)
+		}
+	}
+
+	Component {
+		id: materialIconComp
+
+		MaterialIcon {
+			animate: true
+			text: Icons.getNotifIcon(root.summary, root.urgency)
+			color: root.iconColour
+			fontStyle: Tokens.font.icon.medium
+		}
+	}
+
+	MaterialShape {
+		id: bgShape
+
+		anchors.fill: parent
+		shape: contentLoader.sourceComponent === materialIconComp && root.urgency === NotificationUrgency.Critical ? MaterialShape.SoftBurst : MaterialShape.Circle
+		color: Qt.alpha(root.fillColour, 1)
+		opacity: root.fillColour.a
+
+		Behavior on color {
+			CAnim {}
+		}
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+	}
+
+	Item {
+		anchors.fill: parent
+
+		Loader {
+			id: contentLoader
+
+			anchors.centerIn: parent
+			anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0
+			asynchronous: true
+			sourceComponent: root.image ? imageComp : root.icon ? appIconComp : materialIconComp
+		}
+	}
+
+	Loader {
+		asynchronous: true
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+		active: opacity > 0
+		opacity: root.icon && root.image ? 1 : 0
+
+		sourceComponent: CustomRect {
+			implicitWidth: Config.notifs.sizes.badge
+			implicitHeight: Config.notifs.sizes.badge
+
+			color: root.fillColour
+			radius: Tokens.rounding.full
+
+			FadeIcon {
+				anchors.centerIn: parent
+				size: Math.round(Config.notifs.sizes.badge * 0.6)
+			}
+		}
+
+		Behavior on opacity {
+			Anim {
+				type: root.icon && root.image ? Anim.DefaultEffects : Anim.FastEffects
+			}
+		}
+	}
+
+	Loader {
+		asynchronous: true
+		anchors.fill: parent
+		active: root.progress > 0
+
+		sourceComponent: Shape {
+			preferredRendererType: Shape.CurveRenderer
+
+			ShapePath {
+				id: progressShape
+
+				property real sweep: root.progress * 360
+				property real spacing: root.urgency === NotificationUrgency.Critical ? Tokens.spacing.extraSmall : 0
+
+				capStyle: ShapePath.RoundCap
+				fillColor: "transparent"
+				strokeWidth: 2
+				strokeColor: Colors.palette.m3primary
+
+				PathPolyline {
+					function pointAt(angle: real): point {
+						const dist = bgShape.distanceAtAngle(angle) + progressShape.strokeWidth / 2 + progressShape.spacing;
+						const rad = angle * Math.PI / 180;
+						return Qt.point(root.width / 2 + dist * Math.sin(rad), root.height / 2 - dist * Math.cos(rad));
+					}
+
+					path: {
+						bgShape.morphProgress; // mapToItem-free dependency: re-run when the shape morphs
+						const points = [];
+						for (let angle = 0; angle < progressShape.sweep; angle += 3)
+							points.push(pointAt(angle));
+						points.push(pointAt(progressShape.sweep));
+						return points;
+					}
+				}
+
+				Behavior on sweep {
+					Anim {
+						easing: Tokens.anim.emphasizedDecel
+					}
+				}
+
+				Behavior on spacing {
+					Anim {}
+				}
+
+				Behavior on strokeColor {
+					CAnim {}
+				}
+			}
+		}
+	}
+
+	component FadeIcon: FadeImage {
+		id: fadeIcon
+
+		required property int size
+
+		width: size
+		height: size
+		source: Quickshell.iconPath(root.shownIcon)
+		fillMode: Image.PreserveAspectFit
+		fadeInLargeAnim: Anim.DefaultEffects
+	}
+}

Components/Notifs/NotifGroupCard.qml

@@ -0,0 +1,124 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+import ZShell.Components
+import ZShell.Config
+import ZShell.Services
+import qs.Components
+import qs.Services
+
+CustomRect {
+	id: root
+
+	required property NotificationGroup group
+	required property Flickable container
+	required property bool expanded
+	property bool expandable: true
+	property int baseSurface: 0
+	property int baseLayer: baseSurface
+
+	readonly property list<NotificationRow> notifs: [...group.activeNotifs]
+	readonly property bool single: notifs.length === 1
+	readonly property alias rowPressed: notifList.rowPressed
+	readonly property list<color> surfaces: [Colors.palette.m3surfaceContainer, Colors.palette.m3surfaceContainerHigh, Colors.palette.m3surfaceContainerHighest]
+	readonly property int nonAnimHeight: {
+		const headerHeight = header.implicitHeight + (expanded ? Tokens.spacing.extraSmall : 0);
+		const columnHeight = headerHeight + notifList.layoutHeight;
+		return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + Tokens.padding.medium * 2);
+	}
+
+	signal requestExpand(expand: bool)
+	signal swiped(notif: NotificationRow)
+	signal linkActivated(notif: NotificationRow)
+
+	function surface(offset: int, layer: int): color {
+		return Colors.layer(surfaces[Math.min(baseSurface + offset, surfaces.length - 1)], baseLayer + layer);
+	}
+
+	Component.onCompleted: group.lock(this)
+
+	anchors.left: parent?.left
+	anchors.right: parent?.right
+	implicitHeight: nonAnimHeight
+
+	clip: true
+	radius: Tokens.rounding.large
+	color: group.urgency === NotificationUrgency.Critical && (single || !expanded) ? Colors.palette.m3secondaryContainer : surface(0, 1)
+
+	Behavior on implicitHeight {
+		Anim {}
+	}
+
+	SnapLayout {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.margins: Tokens.padding.medium
+
+		objectName: "notif-content"
+		orientation: Qt.Horizontal
+		spacing: Tokens.spacing.medium
+
+		NotifAvatar {
+			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+			Layout.topMargin: root.expanded && !root.single ? header.implicitHeight + Tokens.spacing.extraSmall + Tokens.padding.extraSmall : 0
+			owner: root.expanded ? root.notifs[0] ?? root.group : root.group
+			image: root.expanded ? root.notifs[0]?.image ?? "" : root.group.image
+			icon: root.expanded ? root.notifs[0]?.appIcon ?? "" : root.group.appIcon
+			urgency: root.expanded ? root.notifs[0]?.urgency ?? NotificationUrgency.Normal : root.group.urgency
+			lowFillColour: root.surface(2, 2)
+			summary: root.notifs[0]?.summary ?? ""
+			progress: (root.notifs[0]?.progress ?? -1) / 100
+
+			Behavior on Layout.topMargin {
+				Anim {}
+			}
+		}
+
+		Column {
+			Layout.fillWidth: true
+			spacing: root.expanded ? Tokens.spacing.extraSmall : 0
+
+			Behavior on spacing {
+				Anim {}
+			}
+
+			NotifGroupHeader {
+				id: header
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				appName: root.group.appName
+				single: root.single
+				timeStr: root.notifs[0]?.timeStr ?? ""
+				count: root.notifs.length
+				urgency: root.group.urgency
+				pillColour: root.surface(1, 2)
+				expandable: root.expandable
+				expanded: root.expanded
+				onToggle: root.requestExpand(!root.expanded)
+			}
+
+			NotifGroupList {
+				id: notifList
+
+				notifs: root.notifs
+				expanded: root.expanded
+				single: root.single
+				headerHeight: header.implicitHeight
+				headerTitleWidth: header.titleWidth
+				expandable: root.expandable
+				container: root.container
+				itemColour: root.surface(1, 2)
+				avatarColour: root.surface(2, 2)
+				buttonColour: root.surface(2, 3)
+				onRequestExpand: expand => root.requestExpand(expand)
+				onSwiped: notif => root.swiped(notif)
+				onLinkActivated: notif => root.linkActivated(notif)
+			}
+		}
+	}
+}

Components/Notifs/NotifGroupHeader.qml

@@ -0,0 +1,156 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell.Services.Notifications
+import ZShell.Components
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+Item {
+	id: root
+
+	required property string appName
+	required property bool single
+	required property string timeStr
+	required property int count
+	required property int urgency
+	required property color pillColour
+	required property bool expandable
+	required property bool expanded
+	readonly property alias titleWidth: appName.width
+
+	readonly property color expandBtnTextColour: urgency === NotificationUrgency.Critical && !single ? Colors.palette.m3onPrimary : Colors.palette.m3onSurfaceVariant
+
+	signal toggle
+
+	implicitHeight: Math.max(appName.implicitHeight, time.implicitHeight, pill.implicitHeight)
+	objectName: "notif-header"
+
+	CustomText {
+		id: appName
+
+		anchors.left: parent.left
+		anchors.right: time.left
+		anchors.rightMargin: Tokens.spacing.small
+		anchors.verticalCenter: parent.verticalCenter
+
+		opacity: root.single && !root.expanded ? 0 : 1
+		text: root.appName
+		color: Colors.palette.m3onSurfaceVariant
+		font: Tokens.font.body.small
+		elide: Text.ElideRight
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+
+	CustomText {
+		id: time
+
+		anchors.right: pill.left
+		anchors.rightMargin: Tokens.spacing.small
+		anchors.verticalCenter: parent.verticalCenter
+
+		animate: true
+		text: root.timeStr
+		color: {
+			const col = root.urgency === NotificationUrgency.Critical && (root.single || !root.expanded) ? Colors.palette.m3secondary : Colors.palette.m3outline;
+			return root.expanded && !root.single ? Qt.alpha(col, 0) : col;
+		}
+		font: Tokens.font.body.small
+	}
+
+	CustomRect {
+		id: pill
+
+		property real horizontalPadding: root.single ? implicitHeight - expandIcon.implicitWidth : Tokens.padding.large
+		property real countSpan: root.single ? 0 : groupCount.implicitWidth + Tokens.spacing.extraSmall
+		property real iconInset: root.single ? 0 : Tokens.padding.extraSmall / 2
+
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		enabled: root.expandable
+		// StateLayer inherits this through its parent.enabled binding, so a
+		// non-expandable group gets no hover, ripple, or cursor.
+
+		implicitWidth: horizontalPadding + countSpan + (root.expandable ? expandIcon.implicitWidth : 0)
+		implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall
+
+		color: {
+			const c = root.urgency === NotificationUrgency.Critical ? Colors.palette.m3primary : root.pillColour;
+			return root.single ? Qt.alpha(c, 0) : c;
+		}
+		radius: Tokens.rounding.full
+
+		StateLayer {
+			color: root.expandBtnTextColour
+			onClicked: root.toggle()
+		}
+
+		Item {
+			anchors.left: parent.left
+			anchors.leftMargin: pill.horizontalPadding / 2 + pill.iconInset
+			anchors.verticalCenter: parent.verticalCenter
+
+			objectName: "notif-expand"
+
+			implicitWidth: groupCount.implicitWidth
+			implicitHeight: groupCount.implicitHeight
+			opacity: root.single ? 0 : 1
+
+			CustomText {
+				id: groupCount
+
+				animate: true
+				text: root.count
+				color: root.expandBtnTextColour
+				font: Tokens.font.body.small
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+		}
+
+		MaterialIcon {
+			id: expandIcon
+
+			anchors.right: parent.right
+			anchors.rightMargin: pill.horizontalPadding / 2 - pill.iconInset
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.verticalCenterOffset: root.expanded && !root.single ? -Tokens.padding.extraSmall / 2 : 0
+
+			visible: root.expandable
+			text: "expand_more"
+			color: root.expandBtnTextColour
+			rotation: root.expanded ? 180 : 0
+
+			Behavior on rotation {
+				Anim {}
+			}
+
+			Behavior on anchors.verticalCenterOffset {
+				Anim {}
+			}
+		}
+
+		Behavior on horizontalPadding {
+			Anim {}
+		}
+
+		Behavior on countSpan {
+			Anim {}
+		}
+
+		Behavior on iconInset {
+			Anim {}
+		}
+	}
+}

Components/Notifs/NotifGroupList.qml

@@ -0,0 +1,152 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import ZShell.Components
+import ZShell.Config
+import ZShell.Services
+import qs.Components
+import qs.Services
+
+LazyListView {
+	id: root
+
+	required property list<NotificationRow> notifs
+	required property bool expanded
+	required property bool expandable
+	required property bool single
+	required property Flickable container
+	property real headerHeight
+	property real headerTitleWidth
+	required property color itemColour
+	required property color avatarColour
+	required property color buttonColour
+	readonly property bool rowPressed: pressedRows > 0
+	property int pressedRows
+
+	signal requestExpand(expand: bool)
+	signal swiped(notif: NotificationRow)
+	signal linkActivated(notif: NotificationRow)
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: contentHeight
+
+	spacing: Math.round(Tokens.spacing.extraSmall)
+	asynchronous: true
+
+	readyDelay: 1
+	cacheBuffer: 400
+	removeDuration: Tokens.anim.durations.normal
+
+	useCustomViewport: true
+	viewport: {
+		tWatcher.transform; // mapToItem is not reactive so use this to trigger updates
+		return Qt.rect(0, container.contentY - mapToItem(container.contentItem, 0, 0).y, width, container.height);
+	}
+
+	model: ScriptModel {
+		// Spread, not `as Array`: `notifs` is a list<NotificationRow> property,
+		// and reading it yields a list reference that ScriptModel cannot assign.
+		values: root.expanded ? [...root.notifs] : [...root.notifs].slice(0, Config.notifs.groupPreviewNum);
+	}
+
+	delegate: Component {
+		NotifSwipeArea {
+			id: notif
+
+			required property int index
+			required property NotificationRow modelData
+
+			Component.onCompleted: modelData.ref(this)
+			Component.onDestruction: {
+				if (pressed)
+					root.pressedRows--;
+			}
+
+			LazyListView.preferredHeight: LazyListView.removing ? 0 : notifInner.nonAnimHeight
+			LazyListView.visibleHeight: LazyListView.removing ? 0 : notifInner.implicitHeight
+			implicitHeight: notifInner.implicitHeight
+
+			opacity: LazyListView.removing || LazyListView.adding ? 0 : 1
+			scale: LazyListView.removing || LazyListView.adding ? 0.7 : 1
+
+			expanded: root.expanded
+			expandable: root.expandable
+			dragExpand: false
+			hoveringLink: !!notifInner.body?.hoveredLink
+			enabled: root.expandable && root.expanded && !LazyListView.removing
+			acceptedButtons: root.single ? Qt.NoButton : Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+
+			onPressedChanged: root.pressedRows += pressed ? 1 : -1
+			onRequestExpand: expand => root.requestExpand(expand)
+			onSwiped: root.swiped(modelData)
+			onDismissed: modelData.dismiss()
+
+			Connections {
+				function onClosedChanged(): void {
+					if (notif.modelData.closed)
+						closeAnim.start();
+				}
+
+				target: notif.modelData
+			}
+
+			ParallelAnimation {
+				id: closeAnim
+
+				Anim {
+					type: Anim.DefaultEffects
+					target: notif
+					property: "opacity"
+					to: 0
+				}
+				Anim {
+					target: notif
+					property: "x"
+					to: notif.x >= 0 ? notif.width : -notif.width
+				}
+			}
+
+			NotifItem {
+				id: notifInner
+
+				anchors.fill: parent
+				modelData: notif.modelData
+				expanded: root.expanded
+				single: root.single
+				ready: notif.LazyListView.ready
+				headerHeight: root.headerHeight
+				headerTitleWidth: root.headerTitleWidth
+				showAvatar: notif.index > 0
+				expandedColour: root.itemColour
+				avatarColour: root.avatarColour
+				buttonColour: root.buttonColour
+				onLinkActivated: root.linkActivated(notif.modelData)
+			}
+
+			Behavior on y {
+				enabled: notif.LazyListView.ready
+
+				Anim {}
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+
+			Behavior on scale {
+				Anim {}
+			}
+		}
+	}
+
+	TransformWatcher {
+		id: tWatcher
+
+		a: root.container.contentItem
+		b: root
+	}
+}

Components/Notifs/NotifItem.qml

@@ -0,0 +1,287 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Notifications
+import ZShell.Components
+import ZShell.Config
+import ZShell.Services
+import qs.Components
+import qs.Services
+
+CustomRect {
+	id: root
+
+	required property NotificationRow modelData
+	required property bool expanded
+	required property color expandedColour
+	required property color avatarColour
+	required property color buttonColour
+	property bool showAvatar: true
+	property bool single: false
+	property bool ready: true
+	property real headerHeight
+	property real headerTitleWidth
+
+	readonly property bool critical: modelData.urgency === NotificationUrgency.Critical
+	readonly property bool low: modelData.urgency === NotificationUrgency.Low
+	readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null
+	readonly property real padding: single ? 0 : Tokens.padding.medium
+	readonly property real headerSummaryOffset: -(headerHeight + summaryHeightMetrics.height) / 2
+	readonly property real inset: expanded ? padding : 0
+	readonly property real summaryOffset: single && !expanded ? headerSummaryOffset : inset
+	readonly property real nonAnimHeight: {
+		if (!expanded)
+			return summaryHeightMetrics.height;
+		const contentHeight = summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + padding * 2;
+		return single ? contentHeight : Math.max(contentHeight, Config.notifs.sizes.image + Tokens.padding.extraSmall * 2);
+	}
+
+	signal linkActivated
+
+	implicitHeight: nonAnimHeight
+
+	radius: Tokens.rounding.medium
+	color: {
+		const c = root.critical ? Colors.palette.m3secondaryContainer : root.expandedColour;
+		return expanded && !single ? c : Qt.alpha(c, 0);
+	}
+
+	TextMetrics {
+		id: summaryHeightMetrics
+
+		font: dummySummary.font
+		text: " " // Use this height to prevent weird characters from changing the line height
+	}
+
+	TextMetrics {
+		id: summaryMetrics
+
+		font: dummySummary.font
+		text: root.modelData.summary
+		elide: Text.ElideRight
+		elideWidth: root.single ? root.headerTitleWidth : root.width
+	}
+
+	WrappedLoader {
+		id: avatar
+
+		shouldBeActive: root.expanded && root.showAvatar
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.topMargin: Tokens.padding.extraSmall
+		anchors.leftMargin: -(Config.notifs.sizes.image + Tokens.spacing.medium)
+
+		sourceComponent: NotifAvatar {
+			owner: root.modelData
+			image: root.modelData.image
+			icon: root.modelData.appIcon
+			urgency: root.modelData.urgency
+			lowFillColour: root.avatarColour
+			summary: root.modelData.summary
+			progress: root.modelData.progress / 100
+		}
+	}
+
+	WrappedLoader {
+		id: compactSummary
+
+		shouldBeActive: !root.expanded
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.leftMargin: root.inset
+		anchors.topMargin: root.summaryOffset
+
+		sourceComponent: CustomText {
+			animate: root.ready
+			text: summaryMetrics.elidedText
+			color: root.critical ? Colors.palette.m3onSecondaryContainer : root.low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSurface
+		}
+
+		Behavior on anchors.leftMargin {
+			Anim {}
+		}
+
+		Behavior on anchors.topMargin {
+			Anim {}
+		}
+	}
+
+	CustomText {
+		id: dummySummary
+
+		anchors.top: parent.top
+		anchors.left: parent.left
+
+		visible: false
+		text: root.modelData.summary
+	}
+
+	WrappedLoader {
+		id: compactBody
+
+		shouldBeActive: !root.expanded
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.leftMargin: root.inset + (root.single ? 0 : dummySummary.width + Tokens.spacing.small)
+		anchors.topMargin: root.single && root.expanded ? summary.implicitHeight + expandedContent.anchors.topMargin : root.inset
+
+		sourceComponent: CustomText {
+			text: root.modelData.body.replace(/\n/g, " ")
+			color: root.critical ? Colors.palette.m3secondary : root.low ? Colors.palette.m3outline : Colors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+		}
+
+		Behavior on anchors.leftMargin {
+			Anim {}
+		}
+
+		Behavior on anchors.topMargin {
+			Anim {}
+		}
+	}
+
+	WrappedLoader {
+		id: summary
+
+		shouldBeActive: root.expanded
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.leftMargin: root.inset
+		anchors.topMargin: root.summaryOffset
+		width: root.width - root.padding * 2 - timeStr.implicitWidth - Tokens.spacing.small
+
+		sourceComponent: CustomText {
+			text: root.modelData.summary
+			color: root.critical ? Colors.palette.m3onSecondaryContainer : root.low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSurface
+			wrapMode: Text.WordWrap
+		}
+
+		Behavior on anchors.leftMargin {
+			Anim {}
+		}
+
+		Behavior on anchors.topMargin {
+			Anim {}
+		}
+	}
+
+	WrappedLoader {
+		id: timeStr
+
+		shouldBeActive: root.expanded && !root.single
+		anchors.top: parent.top
+		anchors.right: parent.right
+		anchors.margins: root.inset
+
+		sourceComponent: CustomText {
+			animate: true
+			text: root.modelData.timeStr
+			color: root.critical ? Colors.palette.m3secondary : Colors.palette.m3outline
+			font: Tokens.font.body.small
+		}
+
+		Behavior on anchors.margins {
+			Anim {}
+		}
+	}
+
+	WrappedLoader {
+		id: expandedContent
+
+		shouldBeActive: root.expanded
+		anchors.top: summary.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.margins: root.inset
+		anchors.topMargin: Tokens.spacing.extraSmall
+
+		sourceComponent: ExpandedBody {}
+
+		Behavior on anchors.margins {
+			Anim {}
+		}
+	}
+
+	Behavior on implicitHeight {
+		Anim {}
+	}
+
+	component ExpandedBody: SnapLayout {
+		readonly property alias body: bodyText
+
+		orientation: Qt.Vertical
+		spacing: Tokens.spacing.medium
+
+		CustomText {
+			id: bodyText
+
+			Layout.fillWidth: true
+			textFormat: Text.MarkdownText
+			text: root.modelData.body.replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body here! :/")
+			color: root.critical ? Colors.palette.m3secondary : root.low ? Colors.palette.m3outline : Colors.palette.m3onSurfaceVariant
+			wrapMode: Text.WordWrap
+
+			onLinkActivated: link => {
+				Qt.openUrlExternally(link);
+				root.linkActivated();
+			}
+		}
+
+		NotifActions {
+			Layout.fillWidth: true
+			notif: root.modelData
+			buttonColour: root.buttonColour
+		}
+	}
+	component WrappedLoader: Loader {
+		id: comp
+
+		required property bool shouldBeActive
+
+		active: false
+		opacity: 0
+
+		// Makes the loader load on the same frame shouldBeActive becomes true, which ensures size is set
+		states: State {
+			name: "active"
+			when: comp.shouldBeActive
+
+			PropertyChanges {
+				comp.opacity: 1
+				comp.active: true
+			}
+		}
+		transitions: [
+			Transition {
+				from: ""
+				to: "active"
+
+				SequentialAnimation {
+					PropertyAction {
+						property: "active"
+					}
+					Anim {
+						type: Anim.DefaultEffects
+						property: "opacity"
+					}
+				}
+			},
+			Transition {
+				from: "active"
+				to: ""
+
+				SequentialAnimation {
+					Anim {
+						type: Anim.DefaultEffects
+						property: "opacity"
+					}
+					PropertyAction {
+						property: "active"
+					}
+				}
+			}
+		]
+	}
+}

Components/Notifs/NotifSwipeArea.qml

@@ -0,0 +1,70 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import ZShell.Config
+import qs.Components
+
+MouseArea {
+	id: root
+
+	required property bool expanded
+	property bool expandable: true
+	property bool dragExpand: expandable
+	property bool hoveringLink
+	property int startY
+	property real lastX
+	property real lastMoveTime
+	property real velocity
+
+	signal swiped
+	signal dismissed
+	signal requestExpand(expand: bool)
+
+	hoverEnabled: true
+	cursorShape: hoveringLink ? Qt.PointingHandCursor : pressedButtons === Qt.LeftButton ? Qt.ClosedHandCursor : undefined
+	acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+	preventStealing: dragExpand
+
+	drag.target: pressedButtons === Qt.LeftButton ? this : null
+	drag.axis: Drag.XAxis
+
+	onPressed: event => {
+		startY = event.y;
+		lastX = x;
+		lastMoveTime = Date.now();
+		velocity = 0;
+		if (event.button === Qt.RightButton && expandable)
+			requestExpand(!expanded);
+		else if (event.button === Qt.MiddleButton)
+			dismissed();
+	}
+	onPositionChanged: event => {
+		if (pressedButtons !== Qt.LeftButton)
+			return;
+
+		const now = Date.now();
+		const dt = now - lastMoveTime;
+		if (dt > 0) {
+			velocity = (velocity + (x - lastX) / dt * 1000) / 2;
+			lastX = x;
+			lastMoveTime = now;
+		}
+
+		if (dragExpand) {
+			const diffY = event.y - startY;
+			if (Math.abs(diffY) > Config.notifs.expandThreshold)
+				requestExpand(diffY > 0);
+		}
+	}
+	onReleased: {
+		const flung = Date.now() - lastMoveTime < 100 && Math.sign(velocity) === Math.sign(x) && Math.abs(velocity) > Config.notifs.clearVelocity;
+		if (!flung && Math.abs(x) < width * Config.notifs.clearThreshold)
+			x = 0;
+		else
+			swiped();
+	}
+
+	Behavior on x {
+		Anim {}
+	}
+}

Components/SplitButton.qml

@@ -103,8 +103,7 @@ Row {
 		topLeftRadius: rad
 
 		Behavior on rad {
-			Anim {
+			Anim {}
-			}
 		}
 
 		StateLayer {
@@ -128,12 +127,10 @@ Row {
 			text: "expand_more"
 
 			Behavior on anchors.horizontalCenterOffset {
-				Anim {
+				Anim {}
-				}
 			}
 			Behavior on rotation {
-				Anim {
+				Anim {}
-				}
 			}
 		}
 	}

Components/Toast/Toasts.qml

@@ -44,8 +44,7 @@ Item {
 			onValuesChanged: root.flagChanged()
 		}
 
-		ToastWrapper {
+		ToastWrapper {}
-		}
 	}
 
 	component ToastWrapper: MouseArea {
@@ -86,12 +85,10 @@ Item {
 			}
 		}
 		Behavior on opacity {
-			Anim {
+			Anim {}
-			}
 		}
 		Behavior on scale {
-			Anim {
+			Anim {}
-			}
 		}
 
 		Component.onCompleted: modelData.lock(this)

Components/WavyTopRect.qml

@@ -20,8 +20,7 @@ Shape {
 		strokeWidth: 0
 
 		Behavior on fillColor {
-			CAnim {
+			CAnim {}
-			}
 		}
 
 		PathSvg {

Daemons/Audio.qml

@@ -141,7 +141,6 @@ Singleton {
 
 	BeatTracker {
 		id: beatTracker
-
 	}
 
 	PwObjectTracker {

Daemons/Network.qml

@@ -295,8 +295,7 @@ Singleton {
 	Component {
 		id: apComp
 
-		AccessPoint {
+		AccessPoint {}
-		}
 	}
 
 	Process {

Daemons/Nmcli.qml

@@ -1081,15 +1081,13 @@ Singleton {
 	Component {
 		id: commandProc
 
-		CommandProcess {
+		CommandProcess {}
-		}
 	}
 
 	Component {
 		id: apComp
 
-		AccessPoint {
+		AccessPoint {}
-		}
 	}
 
 	Timer {
@@ -1310,7 +1308,6 @@ Singleton {
 		}
 		stdout: StdioCollector {
 			id: stdoutCollector
-
 		}
 
 		onExited: code => {

Daemons/NotifServer.qml

@@ -4,14 +4,11 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import Quickshell.Io
 import Quickshell.Services.Notifications
-import Quickshell.Hyprland
+import ZShell.Services
-import QtQuick
-import ZShell
 import qs.Components
-import qs.Modules
 import qs.Helpers
-import qs.Services
 import qs.Paths
+import qs.Services
 import ZShell.Config
 
 Singleton {
@@ -19,11 +16,11 @@ Singleton {
 
 	readonly property var appCooldownMap: new Map()
 	property alias dnd: props.dnd
-	property list<Notif> list: []
+	readonly property alias groups: store.groups
-	property bool loaded
+	property alias list: store.rows
-	readonly property list<Notif> notClosed: list.filter(n => !n.closed)
+	readonly property alias popupGroups: store.popupGroups
-	readonly property list<Notif> popups: list.filter(n => n.popup)
+	readonly property list<NotificationRow> notClosed: store.rows.filter(n => !n.closed)
-	property alias server: server
+	readonly property list<NotificationRow> popups: store.rows.filter(n => n.popup)
 
 	function shouldThrottle(appName: string): bool {
 		if (props.dnd || ShellState.anySidebarOpen())
@@ -46,33 +43,6 @@ Singleton {
 		return true;
 	}
 
-	onListChanged: {
-		if (loaded) {
-			saveTimer.restart();
-		}
-	}
-
-	Timer {
-		id: saveTimer
-
-		interval: 1000
-
-		onTriggered: storage.setText(JSON.stringify(root.notClosed.map(n => ({
-					time: n.time,
-					id: n.id,
-					summary: n.summary,
-					body: n.body,
-					appIcon: n.appIcon,
-					appName: n.appName,
-					image: n.image,
-					expireTimeout: n.expireTimeout,
-					urgency: n.urgency,
-					resident: n.resident,
-					hasActionIcons: n.hasActionIcons,
-					actions: n.actions
-				}))))
-	}
-
 	PersistentProperties {
 		id: props
 
@@ -81,6 +51,12 @@ Singleton {
 		reloadableId: "notifs"
 	}
 
+	NotificationStore {
+		id: store
+
+		path: `${Paths.state}/notifs.sqlite`
+	}
+
 	NotificationServer {
 		id: server
 
@@ -89,40 +65,12 @@ Singleton {
 		bodyImagesSupported: true
 		bodyMarkupSupported: true
 		imageSupported: true
-		keepOnReload: false
+		keepOnReload: true
 		persistenceSupported: true
 
 		onNotification: notif => {
 			notif.tracked = true;
-
+			store.insert(notif, root.shouldThrottle(notif.appName));
-			const is_popup = root.shouldThrottle(notif.appName);
-
-			const comp = notifComp.createObject(root, {
-				popup: is_popup,
-				notification: notif
-			});
-			root.list = [comp, ...root.list];
-		}
-	}
-
-	FileView {
-		id: storage
-
-		path: `${Paths.state}/notifs.json`
-		printErrors: false
-
-		onLoadFailed: err => {
-			if (err === FileViewError.FileNotFound) {
-				root.loaded = true;
-				Qt.callLater(() => setText("[]"));
-			}
-		}
-		onLoaded: {
-			const data = JSON.parse(text());
-			for (const notif of data)
-				root.list.push(notifComp.createObject(root, notif));
-			root.list.sort((a, b) => b.time - a.time);
-			root.loaded = true;
 		}
 	}
 
@@ -130,16 +78,12 @@ Singleton {
 		description: "Clear all notifications"
 		name: "clearnotifs"
 
-		onPressed: {
+		onPressed: store.clear()
-			for (const notif of root.list.slice())
-				notif.close();
-		}
 	}
 
 	IpcHandler {
 		function clear(): void {
-			for (const notif of root.list.slice())
+			store.clear();
-				notif.close();
 		}
 
 		function disableDnd(): void {
@@ -160,192 +104,4 @@ Singleton {
 
 		target: "notifs"
 	}
-
-	Component {
-		id: notifComp
-
-		Notif {
-		}
-	}
-
-	component Notif: QtObject {
-		id: notif
-
-		property list<var> actions
-		property string appIcon
-		property string appName
-		property string body
-		property string cachedImageSource: ""
-		property bool cachingImage: false
-		property bool closed
-		readonly property Connections conn: Connections {
-			function onActionsChanged(): void {
-				notif.actions = notif.notification.actions.map(a => ({
-							identifier: a.identifier,
-							text: a.text,
-							invoke: () => a.invoke()
-						}));
-			}
-
-			function onAppIconChanged(): void {
-				notif.appIcon = notif.notification.appIcon;
-			}
-
-			function onAppNameChanged(): void {
-				notif.appName = notif.notification.appName;
-			}
-
-			function onBodyChanged(): void {
-				notif.body = notif.notification.body;
-			}
-
-			function onClosed(): void {
-				notif.close();
-			}
-
-			function onExpireTimeoutChanged(): void {
-				notif.expireTimeout = notif.notification.expireTimeout;
-			}
-
-			function onHasActionIconsChanged(): void {
-				notif.hasActionIcons = notif.notification.hasActionIcons;
-			}
-
-			function onHintsChanged(): void {
-				notif.hints = notif.notification.hints;
-			}
-
-			function onImageChanged(): void {
-				notif.imageSource = notif.notification.image || "";
-				notif.image = notif.imageSource;
-				notif.cacheImageIfNeeded();
-			}
-
-			function onResidentChanged(): void {
-				notif.resident = notif.notification.resident;
-			}
-
-			function onSummaryChanged(): void {
-				notif.summary = notif.notification.summary;
-			}
-
-			function onUrgencyChanged(): void {
-				notif.urgency = notif.notification.urgency;
-			}
-
-			target: notif.notification
-		}
-		property real expireTimeout: 5
-		property bool hasActionIcons
-		property var hints
-		property string image
-		property string imageSource
-		property var locks: new Set()
-		property string notifId
-		property Notification notification
-		property bool popup
-		property bool resident
-		property string summary
-		property date time: new Date()
-		readonly property string timeStr: {
-			const diff = Time.date.getTime() - time.getTime();
-			const m = Math.floor(diff / 60000);
-
-			if (m < 1)
-				return qsTr("now");
-
-			const h = Math.floor(m / 60);
-			const d = Math.floor(h / 24);
-
-			if (d > 0)
-				return `${d}d`;
-			if (h > 0)
-				return `${h}h`;
-			return `${m}m`;
-		}
-		readonly property Timer timer: Timer {
-			property bool paused: false
-			property int remainingTime: totalTime
-			property int totalTime: Config.notifs.defaultExpireTimeout
-
-			interval: 50
-			repeat: true
-			running: !paused
-
-			onTriggered: {
-				remainingTime -= interval;
-
-				if (remainingTime <= 0) {
-					remainingTime = 0;
-					notif.popup = false;
-					stop();
-				}
-			}
-		}
-		property int urgency: NotificationUrgency.Normal
-
-		function cacheImageIfNeeded(): void {
-			const source = imageSource;
-
-			if (!source || cachingImage)
-				return;
-
-			if (cachedImageSource === source)
-				return;
-
-			cachingImage = true;
-
-			ZShellIo.cacheImage(Qt.resolvedUrl(source), Paths.notifimagecache, (path, url) => {
-				cachedImageSource = source;
-				image = path;
-				cachingImage = false;
-			}, () => {
-				cachingImage = false;
-			});
-		}
-
-		function close(): void {
-			closed = true;
-			if (locks.size === 0 && root.list.includes(this)) {
-				root.list = root.list.filter(n => n !== this);
-				notification?.dismiss();
-				destroy();
-			}
-		}
-
-		function lock(item: Item): void {
-			locks.add(item);
-		}
-
-		function unlock(item: Item): void {
-			locks.delete(item);
-			if (closed)
-				close();
-		}
-
-		Component.onCompleted: {
-			if (!notification)
-				return;
-
-			notifId = notification.id;
-			summary = notification.summary;
-			body = notification.body;
-			appIcon = notification.appIcon;
-			appName = notification.appName;
-			imageSource = notification.image || "";
-			image = imageSource;
-			hints = notification.hints;
-			expireTimeout = notification.expireTimeout;
-			urgency = notification.urgency;
-			resident = notification.resident;
-			hasActionIcons = notification.hasActionIcons;
-			actions = notification.actions.map(a => ({
-						identifier: a.identifier,
-						text: a.text,
-						invoke: () => a.invoke()
-					}));
-
-			cacheImageIfNeeded();
-		}
-	}
 }

Drawers/Drawing.qml

@@ -4,12 +4,16 @@ import Quickshell
 import QtQuick
 import ZShell.Internal
 import qs.Components
+import qs.Services
 
 Item {
 	id: root
 
 	readonly property alias content: contentLoader.item
+
 	required property ScreenState screenState
+	property rect holeRect
+	property real holeRadius: 0
 
 	Loader {
 		id: contentLoader
@@ -18,6 +22,9 @@ Item {
 		anchors.fill: parent
 
 		sourceComponent: StrokeCanvas {
+			anchors.fill: parent
+			hole: root.holeRect
+			holeRadius: root.holeRadius
 			penColor: root.screenState.penColor
 			penWidth: root.screenState.penWidth
 		}

Drawers/DrawingInput.qml

@@ -0,0 +1,95 @@
+import Quickshell
+import QtQuick
+import ZShell.Config
+import qs.Components
+
+CustomMouseArea {
+	id: root
+
+	required property real borderThickness
+	required property Drawing drawing
+	required property Panels panels
+	required property ScreenState screenState
+	required property EdgeGeometry geometry
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + geometry.insetTop(borderThickness);
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	anchors.fill: parent
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	cursorShape: Qt.BlankCursor
+	enabled: z > 0
+	hoverEnabled: true
+	focus: root.screenState.isDrawing
+	z: 2
+
+	Binding {
+		target: root.drawing.content
+		property: "hoverPoint"
+		value: Qt.point(root.mouseX, root.mouseY)
+	}
+
+	Keys.onPressed: e => {
+		const mod = e.modifiers;
+		const key = e.key;
+
+		if ((key == Qt.Key_Z) && (mod & Qt.ControlModifier) && (mod & Qt.ShiftModifier)) {
+			root.drawing.content.redo();
+			e.accepted = true;
+		} else if ((key == Qt.Key_Z) && (mod & Qt.ControlModifier)) {
+			root.drawing.content.undoLastGroup();
+			e.accepted = true;
+		}
+	}
+
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (!drawing.content.hoverVisible)
+			drawing.content.showHover();
+
+		if (event.buttons & Qt.LeftButton) {
+			drawing.content.appendPoint(x, y);
+			return;
+		}
+
+		if (!(event.buttons & Qt.LeftButton) && inLeftPanel(panels.drawing, x, y)) {
+			z = -2;
+			panels.drawing.expand();
+			drawing.content.hideHover();
+		}
+	}
+	onPressed: event => {
+		const x = event.x;
+		const y = event.y;
+
+		panels.drawing.collapse();
+
+		if (event.buttons & Qt.LeftButton) {
+			panels.drawing.collapse();
+			drawing.content.beginStroke(x, y);
+			return;
+		}
+
+		if (event.button & Qt.RightButton) {
+			drawing.content.clear();
+			return;
+		}
+	}
+	onReleased: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (event.button & Qt.LeftButton) {
+			drawing.content.endStroke();
+			drawing.content.showHover();
+		}
+	}
+}

Drawers/Interactions.qml

@@ -1,25 +1,33 @@
 import Quickshell
 import QtQuick
 import ZShell.Config
+import ZShell.Internal
 import qs.Components
 import qs.Helpers
 import qs.Modules.Bar.Popouts
 
-Item {
+CustomMouseArea {
 	id: root
 
+	required property Drawing drawing
+	required property DrawingInput input
+
 	required property Item bar
 	required property real borderThickness
-	property bool dashboardShortcutActive
-	required property Drawing drawing
 	required property EdgeGeometry geometry
-	property bool osdShortcutActive
+
 	required property Panels panels
 	required property Wrapper popouts
+
 	required property ShellScreen screen
+	required property ScreenState screenState
+
+	property bool dashboardShortcutActive
+	property point dragStart
+	property bool osdShortcutActive
+	property bool setInitialPoint: false
 	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
-	required property ScreenState screenState
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
 		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
@@ -56,124 +64,116 @@ Item {
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
+	acceptedButtons: bar.fullscreen ? Qt.NoButton : Qt.AllButtons
 	anchors.fill: parent
+	hoverEnabled: true
 
-	DragHandler {
+	onContainsMouseChanged: {
-		id: singleHandler
+		if (!containsMouse) {
-
+			if (!osdShortcutActive) {
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+				screenState.osd = false;
-		dragThreshold: 0
+				panels.osd.hovered = false;
-		enabled: !root.screenState.isDrawing
-		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfSameType | PointerHandler.ApprovesTakeOverByAnything
-		maximumPointCount: 1
-		minimumPointCount: 1
-		target: null
-
-		onActiveChanged: {
-			if (!active)
-				root.singleGestureTriggered = false;
-		}
-		onCentroidChanged: {
-			const x = centroid.position.x;
-			const y = centroid.position.y;
-			const pressX = centroid.pressPosition.x;
-			const pressY = centroid.pressPosition.y;
-			const dragX = x - pressX;
-			const dragY = y - pressY;
-
-			if (pressY >= root.screen.height - Config.bar.border && pressX > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-				root.screenState.launcher = true;
-
-			if (root.singleGestureTriggered)
-				return;
-
-			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, pressX, pressY);
-
-			if (inDashboard && root.withinPanelWidth(root.panels.dashboardWrapper, x, y)) {
-				if (dragY > Config.dashboard.dragThreshold) {
-					root.screenState.dashboard = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -Config.dashboard.dragThreshold) {
-					root.screenState.dashboard = false;
-					root.singleGestureTriggered = true;
-				}
 			}
 
-			if (root.geometry.insetTop(root.borderThickness) > pressY && (Config.dashboard.showOnHover || !inDashboard)) {
+			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-				if (dragY > 20) {
+				popouts.hasCurrent = false;
-					root.screenState.settings = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
-					root.screenState.settings = false;
-					root.singleGestureTriggered = true;
-				}
 			}
 
-			if (pressY > root.screen.height - root.geometry.insetBottom(root.borderThickness) && pressX < root.screen.width / 5 && dragY < -50)
+			if (Config.bar.autoHide || bar.fullscreen)
-				root.screenState.clipboard = true;
+				bar.isHovered = false;
 
-			if (!Config.dock.hoverToReveal && pressY > root.screen.height - root.geometry.insetTop(root.borderThickness) && pressX > root.screen.width / 5 && !root.screenState.launcher)
+			if (screenState.dashboard && Config.dashboard.showOnHover)
-				if (dragY < -10) {
+				screenState.dashboard = false;
-					root.screenState.dock = true;
-					root.singleGestureTriggered = true;
-				}
-
-			if (pressX > root.screen.width - Config.bar.border && pressY < (root.screen.height / 2) && dragX < -Config.sidebar.dragThreshold) {
-				root.screenState.sidebar = true;
-				root.singleGestureTriggered = true;
-			}
-
-			if (pressX >= root.screen.width - Config.bar.border && pressY > (root.screen.height / 2) && dragX < -20) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
-
-			if (pressX <= Config.bar.border && dragX > 20) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
 		}
 	}
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+		const dragX = x - dragStart.x;
+		const dragY = y - dragStart.y;
 
-	PointHandler {
+		if (screenState.isDrawing && !inLeftPanel(panels.drawing, x, y)) {
-		id: drawingHandler
+			input.z = 2;
+			panels.drawing.collapse();
+		}
 
-		property bool setInitialPoint: false
+		if (root.bar.fullscreen && !root.bar.isHovered)
+			unhideTimer.start();
 
-		acceptedButtons: Qt.LeftButton | Qt.RightButton
+		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-		enabled: root.screenState.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
+			screenState.launcher = true;
 
-		onActiveChanged: {
+		const entryAt = bar.entryAt(geometry.axisPos(x, y));
-			if (!active) {
+		const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboardWrapper, x, y) && (!entryAt || entryAt === "activeWindow");
-				setInitialPoint = false;
+
-				root.drawing.content.endStroke();
+		if (!dashboardShortcutActive) {
-			} else {
+			screenState.dashboard = showDashboard;
-				root.panels.drawing.collapse();
+		} else if (showDashboard) {
+			dashboardShortcutActive = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && withinPanelWidth(panels.dashboardWrapper, x, y)) {
+			if (dragY > Config.dashboard.dragThreshold)
+				screenState.dashboard = true;
+			else if (dragY < -Config.dashboard.dragThreshold)
+				screenState.dashboard = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && !inTopPanel(panels.dashboardWrapper, dragStart.x, dragStart.y)) {
+			if (dragY > 20) {
+				screenState.settings = true;
+			} else if (dragY < -20) {
+				screenState.settings = false;
 			}
 		}
-		onPointChanged: {
-			if (!active)
-				return;
-			const x = point.position.x;
-			const y = point.position.y;
-			const origX = point.pressPosition.x;
-			const origY = point.pressPosition.y;
 
-			if (point.pressedButtons & Qt.RightButton) {
+		if (pressed && dragStart.y > screen.height - geometry.insetBottom(borderThickness) && dragStart.x < screen.width / 5 && dragY < -50)
-				root.drawing.content.clear();
+			screenState.clipboard = true;
-				return;
+
+		if (pressed && !Config.dock.hoverToReveal && dragStart.y > screen.height - geometry.insetTop(borderThickness) && dragStart.x > screen.width / 5 && !screenState.launcher)
+			if (dragY < -10)
+				screenState.dock = true;
+
+		if (pressed && dragStart.x > screen.width - Config.bar.border && dragStart.y < (screen.height / 2) && dragX < -Config.sidebar.dragThreshold)
+			screenState.sidebar = true;
+
+		if (pressed && dragStart.x >= screen.width - Config.bar.border && dragStart.y > (screen.height / 2) && dragX < -20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+
+		if (pressed && dragStart.x <= Config.bar.border && dragX > 20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
+
+		if (!screenState.bar && Config.bar.autoHide && geometry.barContains(x, y, true))
+			bar.isHovered = true;
+
+		if (panels.sidebar.offsetScale === 1) {
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
 			}
-			if (x === 0 && y === 0 && origX === 0 && origY === 0)
+		} else {
-				return;
+			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
 
-			if (!setInitialPoint) {
+			if (!osdShortcutActive) {
-				setInitialPoint = true;
+				screenState.osd = showOsd;
-				root.drawing.content.beginStroke(origX, origY);
+				panels.osd.hovered = showOsd;
-				return;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
 			}
-
-			root.drawing.content.appendPoint(x, y);
 		}
+
+		if (Config.dock.enable && Config.dock.hoverToReveal && !screenState.dock && !screenState.launcher && inBottomPanel(panels.dock, x, y))
+			screenState.dock = true;
+
+		if (geometry.barContains(x, y))
+			bar.checkPopout(geometry.axisPos(x, y));
+	}
+	onPressed: event => {
+		dragStart = Qt.point(event.x, event.y);
 	}
 
 	Timer {
@@ -184,98 +184,20 @@ Item {
 		running: false
 
 		onTriggered: {
-			if (hoverHandler.hovered)
+			if (root.containsMouse)
 				root.bar.isHovered = true;
 		}
 	}
 
-	HoverHandler {
-		id: hoverHandler
-
-		cursorShape: root.screenState.isDrawing && !root.inLeftPanel(root.panels.drawing, point.position.x, point.position.y) ? Qt.BlankCursor : undefined
-
-		onHoveredChanged: {
-			if (!hovered) {
-				if (!root.osdShortcutActive) {
-					root.screenState.osd = false;
-					root.panels.osd.hovered = false;
-				}
-
-				if (!root.popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-					root.popouts.hasCurrent = false;
-				}
-
-				if (Config.bar.autoHide || root.bar.fullscreen)
-					root.bar.isHovered = false;
-
-				if (root.screenState.dashboard && Config.dashboard.showOnHover)
-					root.screenState.dashboard = false;
-			}
-		}
-		onPointChanged: {
-			const x = point.position.x;
-			const y = point.position.y;
-
-			if (root.screenState.isDrawing) {
-				if (root.inLeftPanel(root.panels.drawing, x, y) && !(drawingHandler.point.pressedButtons & Qt.LeftButton)) {
-					root.panels.drawing.expand();
-					root.drawing.content.hideHover();
-					return;
-				}
-
-				root.drawing.content.showHover(x, y);
-				return;
-			}
-
-			if (!root.screenState.bar && Config.bar.autoHide && root.geometry.barContains(x, y, true))
-				root.bar.isHovered = true;
-
-			if (root.bar.fullscreen && !root.bar.isHovered)
-				unhideTimer.start();
-
-			if (root.panels.sidebar.offsetScale === 1) {
-				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			} else {
-				const outOfSidebar = x < root.width - root.panels.sidebar.width * (1 - root.panels.sidebar.offsetScale);
-				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (!root.osdShortcutActive) {
-					root.screenState.osd = showOsd;
-					root.panels.osd.hovered = showOsd;
-				} else if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			}
-
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.screenState.dock && !root.screenState.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.screenState.dock = true;
-
-			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, x, y);
-
-			if (Config.dashboard.showOnHover)
-				root.screenState.dashboard = inDashboard;
-
-			if (root.geometry.barContains(x, y))
-				root.bar.checkPopout(root.geometry.axisPos(x, y));
-		}
-	}
-
 	Connections {
-		function onDashboardChanged() {
+		function onDashboardChanged(): void {
 			if (root.screenState.dashboard) {
-				const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
+				const inDashboardArea = root.inTopPanel(root.panels.dashboardWrapper, root.mouseX, root.mouseY);
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
-				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
-					root.screenState.launcher = false;
 
+				root.screenState.launcher = false;
 				root.screenState.settings = false;
 				root.screenState.sidebar = false;
 				root.screenState.resources = false;
@@ -285,12 +207,15 @@ Item {
 			}
 		}
 
-		function onIsDrawingChanged() {
+		function onIsDrawingChanged(): void {
-			if (!root.screenState.isDrawing)
+			if (root.screenState.isDrawing) {
-				root.drawing.clear();
+				root.drawing.content.showHover();
+			} else {
+				root.drawing.content.clear();
+			}
 		}
 
-		function onLauncherChanged() {
+		function onLauncherChanged(): void {
 			if (!root.screenState.launcher) {
 				root.dashboardShortcutActive = false;
 				root.osdShortcutActive = false;
@@ -305,16 +230,13 @@ Item {
 			}
 
 			if (root.screenState.launcher) {
-				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
+				root.screenState.dashboard = false;
-					root.screenState.dashboard = false;
-				}
-
 				root.screenState.dock = false;
 				root.screenState.settings = false;
 			}
 		}
 
-		function onOsdChanged() {
+		function onOsdChanged(): void {
 			if (root.screenState.osd) {
 				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
 				if (!inOsdArea) {
@@ -325,7 +247,7 @@ Item {
 			}
 		}
 
-		function onResourcesChanged() {
+		function onResourcesChanged(): void {
 			if (root.screenState.resources) {
 				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
 					root.popouts.hasCurrent = false;
@@ -335,7 +257,7 @@ Item {
 			}
 		}
 
-		function onSettingsChanged() {
+		function onSettingsChanged(): void {
 			if (root.screenState.settings) {
 				root.screenState.resources = false;
 				root.screenState.dashboard = false;
@@ -345,9 +267,10 @@ Item {
 			}
 		}
 
-		function onSidebarChanged() {
+		function onSidebarChanged(): void {
 			if (root.screenState.sidebar) {
-				root.screenState.dashboard = false;
+				if (root.panels.dashboardWrapper.x + root.panels.dashboardWrapper.width > root.panels.sidebar.x)
+					root.screenState.dashboard = false;
 				root.screenState.settings = false;
 				root.popouts.hasCurrent = false;
 			}

Drawers/Interactions2.qml

@@ -1,315 +0,0 @@
-import Quickshell
-import QtQuick
-import ZShell.Config
-import ZShell.Internal
-import qs.Components
-import qs.Helpers
-import qs.Modules.Bar.Popouts
-
-CustomMouseArea {
-	id: root
-
-	required property Item bar
-	required property real borderThickness
-	property bool dashboardShortcutActive
-	property point dragStart
-	required property Drawing drawing
-	required property EdgeGeometry geometry
-	property bool osdShortcutActive
-	required property Panels panels
-	required property Wrapper popouts
-	required property ShellScreen screen
-	required property ScreenState screenState
-	property bool setInitialPoint: false
-	property bool singleGestureTriggered: false
-	property bool utilitiesShortcutActive
-
-	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
-	}
-
-	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
-	}
-
-	function inPopoutArea(x: real, y: real): bool {
-		const panel = panels.popoutsWrapper;
-		if (!geometry.horizontal)
-			return inLeftPanel(panel, x, y);
-		return withinPanelWidth(panel, x, y) && withinPanelHeight(panel, x, y);
-	}
-
-	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
-	}
-
-	function inTopPanel(panel: Item, x: real, y: real): bool {
-		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
-	}
-
-	function withinPanelHeight(panel: Item, x: real, y: real): bool {
-		const panelY = panel.y + geometry.insetTop(borderThickness);
-		return y >= panelY && y <= panelY + panel.height;
-	}
-
-	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + geometry.insetLeft(borderThickness);
-		return x >= panelX && x <= panelX + panel.width;
-	}
-
-	acceptedButtons: bar.fullscreen ? Qt.NoButton : Qt.AllButtons
-	anchors.fill: parent
-	hoverEnabled: true
-
-	onContainsMouseChanged: {
-		if (!containsMouse) {
-			if (!osdShortcutActive) {
-				screenState.osd = false;
-				panels.osd.hovered = false;
-			}
-
-			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-				popouts.hasCurrent = false;
-			}
-
-			if (Config.bar.autoHide || bar.fullscreen)
-				bar.isHovered = false;
-
-			if (screenState.dashboard && Config.dashboard.showOnHover)
-				screenState.dashboard = false;
-		}
-	}
-	onPositionChanged: event => {
-		const x = event.x;
-		const y = event.y;
-		const dragX = x - dragStart.x;
-		const dragY = y - dragStart.y;
-
-		if (screenState.isDrawing) {
-			if (pressed) {
-				drawing.content.appendPoint(x, y);
-			} else {
-				if (inLeftPanel(panels.drawing, x, y)) {
-					if (!(pressedButtons & Qt.LeftButton)) {
-						panels.drawing.expand();
-						drawing.content.hideHover();
-						Cursor.clearOverride();
-					}
-				} else {
-					Cursor.setOverride(Qt.BlankCursor);
-					drawing.content.showHover(x, y);
-				}
-			}
-			if (drawing.content.hoverVisible)
-				drawing.content.showHover(x, y);
-			return;
-		}
-
-		if (root.bar.fullscreen && !root.bar.isHovered)
-			unhideTimer.start();
-
-		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-			screenState.launcher = true;
-
-		const entryAt = bar.entryAt(geometry.axisPos(x, y));
-		const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboardWrapper, x, y) && (!entryAt || entryAt === "activeWindow");
-
-		if (!dashboardShortcutActive) {
-			screenState.dashboard = showDashboard;
-		} else if (showDashboard) {
-			dashboardShortcutActive = false;
-		}
-
-		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && withinPanelWidth(panels.dashboardWrapper, x, y)) {
-			if (dragY > Config.dashboard.dragThreshold)
-				screenState.dashboard = true;
-			else if (dragY < -Config.dashboard.dragThreshold)
-				screenState.dashboard = false;
-		}
-
-		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && !inTopPanel(panels.dashboardWrapper, dragStart.x, dragStart.y)) {
-			if (dragY > 20) {
-				screenState.settings = true;
-			} else if (dragY < -20) {
-				screenState.settings = false;
-			}
-		}
-
-		if (pressed && dragStart.y > screen.height - geometry.insetBottom(borderThickness) && dragStart.x < screen.width / 5 && dragY < -50)
-			screenState.clipboard = true;
-
-		if (pressed && !Config.dock.hoverToReveal && dragStart.y > screen.height - geometry.insetTop(borderThickness) && dragStart.x > screen.width / 5 && !screenState.launcher)
-			if (dragY < -10)
-				screenState.dock = true;
-
-		if (pressed && dragStart.x > screen.width - Config.bar.border && dragStart.y < (screen.height / 2) && dragX < -Config.sidebar.dragThreshold)
-			screenState.sidebar = true;
-
-		if (pressed && dragStart.x >= screen.width - Config.bar.border && dragStart.y > (screen.height / 2) && dragX < -20)
-			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
-
-		if (pressed && dragStart.x <= Config.bar.border && dragX > 20)
-			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-
-		if (!screenState.bar && Config.bar.autoHide && geometry.barContains(x, y, true))
-			bar.isHovered = true;
-
-		if (panels.sidebar.offsetScale === 1) {
-			const showOsd = inRightPanel(panels.osdWrapper, x, y);
-
-			if (showOsd) {
-				osdShortcutActive = false;
-				panels.osd.hovered = true;
-			}
-		} else {
-			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
-			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
-
-			if (!osdShortcutActive) {
-				screenState.osd = showOsd;
-				panels.osd.hovered = showOsd;
-			} else if (showOsd) {
-				osdShortcutActive = false;
-				panels.osd.hovered = true;
-			}
-		}
-
-		if (Config.dock.enable && Config.dock.hoverToReveal && !screenState.dock && !screenState.launcher && inBottomPanel(panels.dock, x, y))
-			screenState.dock = true;
-
-		if (geometry.barContains(x, y))
-			bar.checkPopout(geometry.axisPos(x, y));
-	}
-	onPressed: event => {
-		dragStart = Qt.point(event.x, event.y);
-
-		if (screenState.isDrawing) {
-			if (event.button & Qt.RightButton) {
-				drawing.content.clear();
-				return;
-			}
-
-			if (!inLeftPanel(panels.drawing, mouseX, mouseY))
-				drawing.content.beginStroke(event.x, event.y);
-		}
-	}
-	onPressedChanged: {
-		if (!pressed) {
-			if (screenState.isDrawing) {
-				setInitialPoint = false;
-				drawing.content.endStroke();
-				if (!inLeftPanel(panels.drawing, mouseX, mouseY))
-					drawing.content.showHover(mouseX, mouseY);
-			}
-		} else {
-			if (screenState.isDrawing) {
-				panels.drawing.collapse();
-			}
-		}
-	}
-
-	Timer {
-		id: unhideTimer
-
-		interval: Config.bar.revealDelay
-		repeat: false
-		running: false
-
-		onTriggered: {
-			if (root.containsMouse)
-				root.bar.isHovered = true;
-		}
-	}
-
-	Connections {
-		function onDashboardChanged(): void {
-			if (root.screenState.dashboard) {
-				const inDashboardArea = root.inTopPanel(root.panels.dashboardWrapper, root.mouseX, root.mouseY);
-				if (!inDashboardArea) {
-					root.dashboardShortcutActive = true;
-				}
-
-				root.screenState.launcher = false;
-				root.screenState.settings = false;
-				root.screenState.sidebar = false;
-				root.screenState.resources = false;
-				root.popouts.hasCurrent = false;
-			} else {
-				root.dashboardShortcutActive = false;
-			}
-		}
-
-		function onIsDrawingChanged(): void {
-			if (root.screenState.isDrawing) {
-				Cursor.setOverride(Qt.BlankCursor);
-			} else {
-				Cursor.clearOverride();
-			}
-		}
-
-		function onLauncherChanged(): void {
-			if (!root.screenState.launcher) {
-				root.dashboardShortcutActive = false;
-				root.osdShortcutActive = false;
-				root.utilitiesShortcutActive = false;
-
-				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
-
-				if (!inOsdArea) {
-					root.screenState.osd = false;
-					root.panels.osd.hovered = false;
-				}
-			}
-
-			if (root.screenState.launcher) {
-				root.screenState.dashboard = false;
-				root.screenState.dock = false;
-				root.screenState.settings = false;
-			}
-		}
-
-		function onOsdChanged(): void {
-			if (root.screenState.osd) {
-				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
-				if (!inOsdArea) {
-					root.osdShortcutActive = true;
-				}
-			} else {
-				root.osdShortcutActive = false;
-			}
-		}
-
-		function onResourcesChanged(): void {
-			if (root.screenState.resources) {
-				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
-					root.popouts.hasCurrent = false;
-
-				root.screenState.settings = false;
-				root.screenState.dashboard = false;
-			}
-		}
-
-		function onSettingsChanged(): void {
-			if (root.screenState.settings) {
-				root.screenState.resources = false;
-				root.screenState.dashboard = false;
-				root.screenState.sidebar = false;
-				root.panels.popouts.hasCurrent = false;
-				root.screenState.launcher = false;
-			}
-		}
-
-		function onSidebarChanged(): void {
-			if (root.screenState.sidebar) {
-				if (root.panels.dashboardWrapper.x + root.panels.dashboardWrapper.width > root.panels.sidebar.x)
-					root.screenState.dashboard = false;
-				root.screenState.settings = false;
-				root.popouts.hasCurrent = false;
-			}
-		}
-
-		target: root.screenState
-	}
-}

Drawers/Panels.qml

@@ -74,7 +74,7 @@ Item {
 		id: osdWrapper
 
 		anchors.right: parent.right
-		anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
+		anchors.rightMargin: (sidebar.width - 5) * (1 - sidebar.offsetScale)
 
 		y: ZUtils.snap((parent.height - implicitHeight) / 2, root)
 
@@ -86,7 +86,8 @@ Item {
 		Osd.Wrapper {
 			id: osd
 
-			anchors.fill: parent
+			anchors.right: parent.right
+
 			screen: root.screen
 			screenState: root.screenState
 			sidebarOrSessionVisible: sidebar.visible
@@ -127,6 +128,7 @@ Item {
 		panels: root
 		screenState: root.screenState
 		sidebarPanel: sidebar
+		topPadding: Math.max(root.anchors.topMargin, root.anchors.bottomMargin)
 	}
 
 	Launcher.Wrapper {
@@ -154,8 +156,10 @@ Item {
 
 		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
-		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
+
+		x: ZUtils.snap((parent.width - implicitWidth) / 2, dashboardWrapper)
+
 		clip: offsetScale > 0
 		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
 		implicitWidth: dashboard.implicitWidth
@@ -180,7 +184,7 @@ Item {
 
 		anchors.bottom: utilities.top
 		anchors.right: parent.right
-		anchors.top: notifications.bottom
+		anchors.top: parent.top
 		panels: root
 		screenState: root.screenState
 	}
@@ -194,8 +198,11 @@ Item {
 		Settings.Wrapper {
 			id: settings
 
-			anchors.centerIn: parent
+			x: ZUtils.snap((parent.width - implicitWidth) / 2, settings)
-			anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
+			y: ZUtils.snap((parent.height - implicitHeight) / 2 - (implicitHeight + 5 + (parent.height - implicitHeight) / 2) * offsetScale, settings)
+
+			// anchors.centerIn: parent
+			// anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
 			panels: root
 			screen: root.screen
 			screenState: root.screenState

Drawers/Windows.qml

@@ -2,16 +2,14 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell
-import Quickshell.Io
 import Quickshell.Wayland
 import Quickshell.Hyprland
 import ZShell.Blobs
+import ZShell.Config
 import qs.Daemons
 import qs.Components
 import qs.Modules.Bar
-import ZShell.Config
 import qs.Helpers
 import qs.Drawers
 import qs.Services
@@ -56,7 +54,7 @@ CustomWindow {
 	property color surfaceColor: Colors.tPalette.m3surface
 
 	WlrLayershell.exclusionMode: ExclusionMode.Ignore
-	WlrLayershell.keyboardFocus: screenState.screenshot ? WlrKeyboardFocus.Exclusive : screenState.launcher || screenState.settings || screenState.sidebar ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+	WlrLayershell.keyboardFocus: screenState.screenshot ? WlrKeyboardFocus.Exclusive : screenState.launcher || screenState.settings || screenState.sidebar || screenState.isDrawing ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 	WlrLayershell.layer: (fsTransitionProg > 0 && Config.general.showOverFullscreen) || (hasSpecialWorkspace && hasFullscreenOnNormalWs) ? WlrLayer.Overlay : WlrLayer.Top
 	color: "transparent"
 	mask: screenState.isDrawing || screenState.screenshot ? null : (hasFullscreen && !bar.isHovered ? emptyRegion : regions)
@@ -192,7 +190,7 @@ CustomWindow {
 			anchors.fill: parent
 			color: root.surfaceColor
 			shadowColor: Qt.alpha(Colors.palette.m3shadow, Math.max(0, root.shadowOpacity))
-			shadowRadius: 18
+			shadowRadius: 10
 			smoothing: Config.bar.smoothing
 		}
 
@@ -248,7 +246,6 @@ CustomWindow {
 
 			atRestOverride: panels.osd.offsetScale < 0.99
 			deformAmount: 0.1
-			implicitHeight: panels.osd.height
 			implicitWidth: panels.osd.width
 			panel: panels.osdWrapper
 			radius: 20
@@ -260,7 +257,7 @@ CustomWindow {
 
 			atRestOverride: panel.implicitHeight > 0
 			panel: panels.notifications
-			radius: Tokens.rounding.large
+			radius: Tokens.rounding.large + Tokens.padding.small
 		}
 
 		PanelBg {
@@ -308,7 +305,7 @@ CustomWindow {
 		PanelBg {
 			id: settingsBg
 
-			deformAmount: 0.03
+			deformAmount: 0.01
 			panel: panels.settings
 			radius: Tokens.rounding.largeIncreased + Tokens.padding.small
 		}
@@ -347,12 +344,31 @@ CustomWindow {
 	Drawing {
 		id: drawing
 
+		readonly property int extraWidth: drawingBg.radius * 2
+
 		anchors.fill: parent
+		holeRect: Qt.rect(root.borderThickness + panels.drawing.x - extraWidth, panels.drawing.y + bar.implicitHeight, panels.drawing.implicitWidth + extraWidth, panels.drawing.implicitHeight)
+		holeRadius: drawingBg.radius
 		screenState: root.screenState
 		z: 2
 	}
 
-	Interactions2 {
+	LazyLoader {
+		id: lazyLoader
+
+		activeAsync: root.screenState.isDrawing
+
+		component: DrawingInput {
+			borderThickness: root.borderLayoutThickness
+			drawing: drawing
+			panels: panels
+			screenState: root.screenState
+			geometry: geometry
+			parent: root.contentItem
+		}
+	}
+
+	Interactions {
 		id: interactions
 
 		anchors.fill: parent
@@ -365,6 +381,8 @@ CustomWindow {
 		popouts: panels.popouts
 		screen: root.screen
 		screenState: root.screenState
+		input: lazyLoader.item
+		z: 1
 
 		Panels {
 			id: panels
@@ -442,6 +460,7 @@ CustomWindow {
 			parent: root.contentItem
 			screen: root.screen
 			screenState: root.screenState
+			z: 4
 		}
 	}
 

Greeter/Components/CircularProgress.qml

@@ -46,8 +46,7 @@ Item {
 			strokeWidth: Math.min(1, remainingArc.sweepAngle) * root.strokeWidth
 
 			Behavior on strokeColor {
-				CAnim {
+				CAnim {}
-				}
 			}
 
 			PathAngleArc {
@@ -84,8 +83,7 @@ Item {
 			}
 		}
 		Behavior on color {
-			CAnim {
+			CAnim {}
-			}
 		}
 		Anim on waveProgress {
 			id: waveProgAnim

Greeter/Components/CustomClippingRect.qml

@@ -7,7 +7,6 @@ ClippingRectangle {
 	color: "transparent"
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 }

Greeter/Components/CustomText.qml

@@ -20,8 +20,7 @@ Text {
 	textFormat: Text.PlainText
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 	Behavior on text {
 		enabled: root.animate
@@ -33,8 +32,7 @@ Text {
 				type: Anim.FastEffects
 			}
 
-			PropertyAction {
+			PropertyAction {}
-			}
 
 			TAnim {
 				target: root

Greeter/Components/FadeImage.qml

@@ -65,8 +65,7 @@ Image {
 				value: root.source
 			}
 
-			PropertyAction {
+			PropertyAction {}
-			}
 
 			ScriptAction {
 				script: root.maybeStartInAnim()

Greeter/Components/LoadingIndicator.qml

@@ -64,8 +64,7 @@ MaterialShape {
 		to: 360
 	}
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 
 	ElapsedTimer {

Greeter/Helpers/Weather.qml

@@ -200,6 +200,5 @@ Singleton {
 
 	ElapsedTimer {
 		id: timer
-
 	}
 }

Greeter/shell.qml

@@ -16,7 +16,6 @@ ShellRoot {
 
 	GreeterState {
 		id: greeter
-
 	}
 
 	GreeterSurface {

Helpers/Brightness.qml

@@ -69,8 +69,7 @@ Singleton {
 
 		model: Quickshell.screens
 
-		Monitor {
+		Monitor {}
-		}
 	}
 
 	Process {

Helpers/IdleInhibitor.qml

@@ -33,8 +33,7 @@ Singleton {
 			implicitHeight: 0
 			implicitWidth: 0
 
-			mask: Region {
+			mask: Region {}
-			}
 		}
 	}
 

Helpers/Wallpapers.qml

@@ -5,7 +5,7 @@ import Quickshell
 import Quickshell.Io
 import QtQuick
 import ZShell.Models
-import ZShell.Internal
+import ZShell.Wallpaper
 import ZShell.Config
 import qs.Components
 import qs.Services
@@ -16,24 +16,48 @@ Searcher {
 	id: root
 
 	property string actualCurrent: WallpaperPath.currentWallpaperPath
-	property alias crops: adapter.monitorCrops
 	readonly property string current: showPreview ? previewPath : actualCurrent
-	property alias monitorCrops: monitorCrops
+	readonly property string currentThumbnail: thumbnailFor(current)
+	readonly property bool currentIsVideo: isVideoPath(current)
 	property bool pendingPreviewClear
 	property bool previewColorLock
 	property string previewPath
 	property bool recentlyChanged
 	property bool showPreview: false
+	property int cropVersion: 0
 
-	function getCategoryFor(w: FileSystemEntry): string {
+	function getCategoryFor(w: WallpaperEntry): string {
 		let category = w.parentDir.slice(Paths.wallsdir.length + 1);
 		if (category.includes("/"))
 			category = category.slice(0, category.indexOf("/"));
 		return category;
 	}
 
+	readonly property var videoExts: ["mp4", "mkv", "webm", "avi", "mov", "wmv", "flv", "m4v", "mpg", "mpeg", "3gp", "ogv", "ts", "vob"]
+
+	function isVideoPath(path: string): bool {
+		if (!path)
+			return false;
+		const dot = path.lastIndexOf(".");
+		if (dot < 0)
+			return false;
+		return videoExts.includes(path.slice(dot + 1).toLowerCase());
+	}
+
+	function thumbnailFor(path: string): string {
+		if (!path)
+			return "";
+
+		for (const entry of root.list) {
+			if (entry.path === path)
+				return entry.thumbnailPath || path;
+		}
+
+		return path;
+	}
+
 	function getCrop(screen: string): var {
-		return root.crops[screen];
+		return wallpapers.crop(root.current, screen);
 	}
 
 	function preview(path: string): void {
@@ -50,19 +74,18 @@ Searcher {
 		else if (zoom > 5.0)
 			zoom = 5.0;
 
-		root.crops[screen] = {
+		wallpapers.setCrop(root.current, screen, {
 			x: rect.x,
 			y: rect.y,
 			width: rect.width,
 			height: rect.height,
 			zoom: zoom
-		};
+		});
 	}
 
 	function setWallpaper(path: string): void {
 		actualCurrent = path;
 		WallpaperPath.currentWallpaperPath = path;
-		Quickshell.screens.forEach(n => setCrop(n.name, Qt.rect(0, 0, 1, 1), 1.0));
 		Quickshell.execDetached(["zshell-cli", "wallpaper", "lockscreen", "--input-image", `${root.actualCurrent}`, "--output-path", `${Paths.state}/lockscreen_bg.png`, "--blur-amount", `${Config.lock.blurAmount}`]);
 		if (Config.colors.schemeGen)
 			Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--image-path", `${root.actualCurrent}`, "--scheme", `${Config.colors.schemeType}`, "--mode", `${Config.colors.mode}`]);
@@ -96,38 +119,13 @@ Searcher {
 		target: "wallpaper"
 	}
 
-	FileView {
+	WallpaperDb {
-		id: monitorCrops
-
-		path: `${Paths.state}/wallpaper-crops.json`
-		watchChanges: true
-
-		onAdapterUpdated: cropWriteDelay.restart()
-		onFileChanged: reload()
-
-		JsonAdapter {
-			id: adapter
-
-			property var monitorCrops: ({})
-		}
-	}
-
-	Timer {
-		id: cropWriteDelay
-
-		interval: 100
-		repeat: false
-		running: false
-
-		onTriggered: monitorCrops.writeAdapter()
-	}
-
-	FileSystemModel {
 		id: wallpapers
 
-		filter: FileSystemModel.Images
+		dbPath: `${Paths.state}/wallpapers.sqlite`
+		cacheSize: wallpaper.largestBufferSize
+		requireHardwareCodec: true
 		path: Config.general.wallpaperPath
-		recursive: true
 	}
 
 	Process {
@@ -146,36 +144,100 @@ Searcher {
 	WallpaperService {
 		id: wallpaper
 
+		dbPath: wallpapers.dbPath
 		path: root.current
 	}
 
+	Connections {
+		target: wallpapers
+
+		function onCacheStored(path: string): void {
+			if (path === root.current)
+				wallpaper.invalidateCache();
+		}
+
+		function onCropsChanged(path: string): void {
+			if (path === root.current)
+				root.cropVersion++;
+		}
+	}
+
 	Variants {
+		id: screenVariants
 		model: Quickshell.screens
 
 		WallpaperObject {
-			readonly property var crops: root.getCrop(modelData.name)
+			id: obj
 			required property var modelData
 
-			cropHeight: crops?.height ?? 1.0
+			// Crop animation only for edits, never for wallpaper swaps.
-			cropWidth: crops?.width ?? 1.0
+			property bool animateCrop: false
-			cropX: crops?.x ?? 0.0
+
-			cropY: crops?.y ?? 0.0
 			screen: modelData.name
 			service: wallpaper
-			zoom: crops?.zoom ?? 1.0
+
+			// Apply the wallpaper's own crop. Driven off the service's pathChanged
+			// (which fires after applyPath has snapshotted the outgoing frame with
+			// the outgoing crop) and off crop edits, never as a reactive binding on
+			// the wallpaper path — so a swap applies the incoming crop atomically
+			// after the base is captured.
+			function seedCrop(): void {
+				// Load the current wallpaper's crop without pushing: the service
+				// already read it from the database. This only seeds the values so
+				// a later edit animates from the right starting point.
+				obj.syncCrop(root.getCrop(modelData.name));
+			}
+
+			// Apply an edited crop: assign via the setters so the Behaviors animate
+			// the numbers and push each intermediate value to the service.
+			function editCrop(): void {
+				const c = root.getCrop(modelData.name);
+				obj.cropX = c?.x ?? 0.0;
+				obj.cropY = c?.y ?? 0.0;
+				obj.cropWidth = c?.width ?? 1.0;
+				obj.cropHeight = c?.height ?? 1.0;
+				obj.zoom = c?.zoom ?? 1.0;
+			}
+
+			Component.onCompleted: seedCrop()
+			onScreenChanged: seedCrop()
 
 			Behavior on cropHeight {
+				enabled: obj.animateCrop
 				Anim {}
 			}
 			Behavior on cropWidth {
+				enabled: obj.animateCrop
 				Anim {}
 			}
 			Behavior on cropX {
+				enabled: obj.animateCrop
 				Anim {}
 			}
 			Behavior on cropY {
+				enabled: obj.animateCrop
 				Anim {}
 			}
 		}
 	}
+
+	Connections {
+		target: wallpaper
+		function onPathChanged(): void {
+			for (const obj of screenVariants.instances) {
+				obj.animateCrop = false;
+				obj.seedCrop();
+			}
+		}
+	}
+
+	Connections {
+		target: root
+		function onCropVersionChanged(): void {
+			for (const obj of screenVariants.instances) {
+				obj.animateCrop = true;
+				obj.editCrop();
+			}
+		}
+	}
 }

Modules/Bar/Bar.qml

@@ -8,6 +8,7 @@ import ZShell.Components
 import qs.Components
 import qs.Modules.Bar.Components
 import qs.Modules.Bar.Popouts
+import ZShell
 
 SnapLayout {
 	id: root
@@ -23,7 +24,7 @@ SnapLayout {
 
 	function axisCenterOf(item: Item): real {
 		const c = item.mapToItem(root, item.implicitWidth / 2, item.implicitHeight / 2);
-		return horizontal ? Math.floor(c.x) : Math.floor(c.y);
+		return horizontal ? ZUtils.snap(c.x, item) : ZUtils.snap(c.y, item);
 	}
 
 	function checkPopout(pos: real): void {
@@ -249,8 +250,7 @@ SnapLayout {
 				roleValue: "network"
 
 				delegate: EntryWrapper {
-					NetworkWidget {
+					NetworkWidget {}
-					}
 				}
 			}
 

Modules/Bar/Components/Clock.qml

@@ -46,7 +46,9 @@ WidgetBase {
 	}
 	required property SnapLayout loader
 	required property Wrapper popouts
-	readonly property real size: horizontal ? timeText.contentWidth + Tokens.padding.medium * 2 : verticalColumn.implicitHeight + Tokens.padding.medium * 2
+	readonly property int roundedWidth: Math.round(timeText.implicitWidth)
+	readonly property int evenWidth: roundedWidth % 2 === 0 ? roundedWidth : roundedWidth + 1
+	readonly property real size: horizontal ? evenWidth + Tokens.padding.medium * 2 : verticalColumn.implicitHeight + Tokens.padding.medium * 2
 	required property ScreenState screenState
 
 	implicitHeight: horizontal ? baseSize : size

Modules/Bar/Components/Common/BatteryIcon.qml

@@ -24,7 +24,7 @@ Row {
 		color: Battery.getColors(root.percentage, root.devState).bg
 		height: root.batHeight
 		radius: root.radius
-		width: root.batWidth
+		width: root.batWidth - 1
 
 		CustomText {
 			color: Battery.getColors(root.percentage, root.devState).fg

Modules/Bar/Components/MediaWidget.qml

@@ -14,7 +14,7 @@ WidgetBase {
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
 	implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.small * 2
-	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.small * 2 : baseSize
+	implicitWidth: horizontal ? (layout.implicitWidth % 2 === 0 ? layout.implicitWidth : layout.implicitWidth + 1) + Tokens.padding.small * 2 : baseSize
 	radius: Tokens.rounding.full
 
 	Behavior on implicitHeight {

Modules/Bar/Components/Resource.qml

@@ -13,7 +13,6 @@ GridLayout {
 	property real animatedPercentage: 0
 	readonly property real arcStartAngle: 0.75 * Math.PI
 	readonly property real arcSweep: 1.5 * Math.PI
-	readonly property real dpr: (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1
 	required property bool horizontal
 	property string icon
 	required property color iconColor
@@ -24,17 +23,12 @@ GridLayout {
 	property bool warning: percentage * 100 >= warningThreshold
 	property int warningThreshold: 80
 
-	function snap(v) {
-		return Math.round(v * dpr) / dpr;
-	}
-
 	columnSpacing: Tokens.spacing.medium
 	columns: horizontal ? -1 : 1
 	percentage: 0
 
 	Behavior on animatedPercentage {
-		Anim {
+		Anim {}
-		}
 	}
 
 	Component.onCompleted: animatedPercentage = percentage
@@ -60,7 +54,7 @@ GridLayout {
 		Layout.preferredHeight: root.horizontal ? icon.implicitHeight - Tokens.padding.extraSmall : 4
 		Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth
 		color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
-		radius: Math.min(width, height) / 2
+		radius: Tokens.rounding.full
 
 		Item {
 			id: clipper
@@ -70,18 +64,20 @@ GridLayout {
 			anchors.left: root.horizontal ? undefined : parent.left
 			anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
 			clip: true
-			height: root.horizontal ? root.snap(root.percentage * track.height) : track.height * 2
+			implicitHeight: root.horizontal ? root.percentage * track.height : track.height * 2
-			width: root.horizontal ? track.width * 2 : root.snap(root.percentage * track.width)
+			implicitWidth: root.horizontal ? track.width * 2 : root.percentage * track.width
 
 			CustomRect {
 				anchors.bottom: root.horizontal ? parent.bottom : undefined
 				anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
 				anchors.left: root.horizontal ? undefined : parent.left
 				anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
+
 				color: root.mainColor
-				height: track.height
 				radius: track.radius
-				width: track.width
+
+				implicitHeight: track.height
+				implicitWidth: track.width
 			}
 		}
 	}

Modules/Bar/Components/Resources.qml

@@ -34,6 +34,7 @@ WidgetBase {
 		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
 		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
 		columnSpacing: Tokens.spacing.small
+		rowSpacing: 0
 		columns: root.horizontal ? -1 : 1
 
 		ServiceRef {
@@ -52,6 +53,7 @@ WidgetBase {
 			Layout.alignment: Qt.AlignVCenter
 			Layout.fillHeight: root.horizontal
 			Layout.fillWidth: !root.horizontal
+
 			horizontal: root.horizontal
 			icon: "memory"
 			iconColor: root.screenState.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface

Modules/Bar/Components/StatusIcons.qml

@@ -32,7 +32,7 @@ WidgetBase {
 		return -1;
 	}
 	readonly property real size: horizontal ? grid.implicitWidth + grid.anchors.leftMargin + grid.anchors.rightMargin : grid.implicitHeight + grid.anchors.bottomMargin + grid.anchors.topMargin
-	readonly property int spacing: Tokens.spacing.medium / 2
+	readonly property int spacing: Tokens.spacing.extraSmall
 
 	// Entries that can shrink to nothing, spacing included
 	function collapsed(entry: var): bool {
@@ -134,8 +134,8 @@ WidgetBase {
 		Layout.rightMargin: root.horizontal ? Math.round(rightGap) : 0
 		Layout.topMargin: root.horizontal ? 0 : Math.round(leftGap)
 		children: item
-		implicitHeight: item?.implicitHeight ?? 0
+		implicitHeight: item?.height ?? item?.implicitHeight ?? 0
-		implicitWidth: item?.implicitWidth ?? 0
+		implicitWidth: item?.width ?? item?.implicitWidth ?? 0
 
 		Behavior on leftGap {
 			Anim {

Modules/Bar/Components/StatusIcons/AudioWidget.qml

@@ -7,7 +7,7 @@ import qs.Components
 import qs.Services
 
 MaterialIcon {
-	id: speaker
+	id: root
 
 	required property bool horizontal
 
@@ -16,6 +16,8 @@ MaterialIcon {
 	fill: 1
 	fontStyle: Tokens.font.icon.small
 	text: Audio.muted ? "volume_off" : "volume_up"
+	width: Math.round(implicitWidth)
+	height: Math.round(implicitHeight)
 
 	Behavior on Layout.maximumWidth {
 		Anim {}

Modules/Bar/Components/StatusIcons/MicWidget.qml

@@ -7,7 +7,7 @@ import qs.Components
 import qs.Services
 
 MaterialIcon {
-	id: mic
+	id: root
 
 	required property bool horizontal
 
@@ -16,6 +16,8 @@ MaterialIcon {
 	fill: 1
 	fontStyle: Tokens.font.icon.small
 	text: Audio.sourceMuted ? "mic_off" : "mic"
+	width: Math.round(implicitWidth)
+	height: Math.round(implicitHeight)
 
 	Behavior on Layout.maximumWidth {
 		Anim {}

Modules/Bar/Components/Workspaces.qml

@@ -12,13 +12,14 @@ import qs.Services
 Item {
 	id: root
 
-	property real activeWorkspaceMargin: Math.ceil(Tokens.padding.medium / 4)
+	property real activeWorkspaceMargin: Tokens.padding.extraSmall / 2
+	readonly property int spacing: Tokens.spacing.extraSmall / 2
 	readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1
 	required property bool horizontal
 	readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
 	required property ShellScreen screen
 	readonly property real shortSize: Math.max(Config.bar.height, Tokens.sizes.bar.innerSize)
-	readonly property real size: (workspaceButtonWidth * workspacesShown) + activeWorkspaceMargin * 2
+	readonly property real size: (workspaceButtonWidth * workspacesShown) + (spacing * Math.max(0, workspacesShown - 1)) + activeWorkspaceMargin * 2
 	property int workspaceButtonWidth: (horizontal ? bgRect.implicitHeight : bgRect.implicitWidth) - root.activeWorkspaceMargin * 2
 	property int workspaceIndexInGroup: (effectiveActiveWorkspaceId - 1) % root.workspacesShown
 	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
@@ -59,15 +60,17 @@ Item {
 
 			anchors.fill: parent
 			anchors.margins: root.activeWorkspaceMargin
-			columnSpacing: 0
+			columnSpacing: root.spacing
 			columns: root.horizontal ? root.workspacesShown : 1
-			rowSpacing: 0
+			rowSpacing: root.spacing
 			rows: root.horizontal ? 1 : root.workspacesShown
+			layer.enabled: true
+			layer.mipmap: true
 
 			Repeater {
 				model: root.workspaces
 
-				Button {
+				CustomRect {
 					id: button
 
 					required property int index
@@ -75,27 +78,19 @@ Item {
 
 					implicitHeight: indicator.indicatorThickness
 					implicitWidth: indicator.indicatorThickness
-					width: root.workspaceButtonWidth
+					radius: Tokens.rounding.full
 
-					background: Item {
+					CustomText {
-						id: workspaceButtonBackground
+						anchors.centerIn: parent
-
+						color: Colors.palette.m3onSecondaryContainer
-						implicitHeight: root.workspaceButtonWidth
+						text: button.modelData?.name ?? ""
-						implicitWidth: root.workspaceButtonWidth
-
-						CustomText {
-							anchors.centerIn: parent
-							color: Colors.palette.m3onSecondaryContainer
-							elide: Text.ElideRight
-							horizontalAlignment: Text.AlignHCenter
-							text: button.modelData?.name ?? ""
-							verticalAlignment: Text.AlignVCenter
-						}
 					}
 
-					onPressed: {
+					StateLayer {
-						const ws = button.modelData.name;
+						onPressed: {
-						Hyprland.dispatch(Hyprland.usingLua ? `hl.dsp.focus({ workspace= "${ws}"})` : `workspace ${ws}`);
+							const ws = button.modelData.name;
+							Hyprland.dispatch(Hyprland.usingLua ? `hl.dsp.focus({ workspace= "${ws}"})` : `workspace ${ws}`);
+						}
 					}
 				}
 			}
@@ -104,8 +99,10 @@ Item {
 		CustomRect {
 			id: indicator
 
-			property real indicatorLength: (Math.abs(idxPair.idx1 - idxPair.idx2) + 1) * root.workspaceButtonWidth
+			readonly property real step: root.workspaceButtonWidth + root.spacing
-			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
+
+			property real indicatorLength: (Math.abs(idxPair.idx1 - idxPair.idx2) + 1) * root.workspaceButtonWidth + Math.abs(idxPair.idx1 - idxPair.idx2) * root.spacing
+			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * step + root.activeWorkspaceMargin
 			property real indicatorThickness: root.workspaceButtonWidth
 
 			anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
@@ -129,9 +126,10 @@ Item {
 				implicitHeight: grid.height
 				implicitWidth: grid.width
 				source: grid
+				autoPaddingEnabled: false
 				sourceColor: Colors.palette.m3onSurface
-				x: root.horizontal ? -indicator.x + 3 : 0
+				x: root.horizontal ? -indicator.x + root.activeWorkspaceMargin : 0
-				y: root.horizontal ? 0 : -indicator.y + 3
+				y: root.horizontal ? 0 : -indicator.y + root.activeWorkspaceMargin
 			}
 		}
 	}

Modules/Bar/Popouts/ClipWrapper.qml

@@ -4,6 +4,7 @@ import QtQuick
 import Quickshell
 import qs.Components
 import ZShell.Config
+import ZShell
 
 Item {
 	id: root
@@ -36,7 +37,7 @@ Item {
 		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
 		if (diff < 0)
 			return off + diff;
-		return Math.floor(Math.max(off, 0));
+		return ZUtils.snap(Math.max(off, 0), root);
 	}
 	y: {
 		if (horizontal)
@@ -46,12 +47,11 @@ Item {
 		const diff = parent.height - Math.floor(off + content.nonAnimHeight);
 		if (diff < 0)
 			return off + diff;
-		return Math.max(off, 0);
+		return ZUtils.snap(Math.max(off, 0), root);
 	}
 
 	Behavior on offsetScale {
-		Anim {
+		Anim {}
-		}
 	}
 	Behavior on x {
 		enabled: !root.horizontal || root.offsetScale < 1

Modules/Bar/Popouts/Content.qml

@@ -13,6 +13,7 @@ Item {
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
 	required property bool horizontal
 	required property PopoutState popouts
+	required property Wrapper wrapper
 
 	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.smaller * 2
 	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.smaller * 2
@@ -98,10 +99,10 @@ Item {
 		readonly property bool shouldBeActive: root.popouts.currentName === name
 
 		active: false
-		anchors.centerIn: opacity === 1 ? undefined : parent
+		anchors.centerIn: parent
 		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.top: opacity === 1 ? parent.top : undefined
+		// anchors.top: opacity === 1 ? parent.top : undefined
-		anchors.topMargin: Tokens.padding.smaller
+		// anchors.topMargin: Tokens.padding.smaller
 		opacity: 0
 		scale: 0.8
 

Modules/Bar/Popouts/TrayMenuPopout.qml

@@ -16,7 +16,7 @@ StackView {
 	id: root
 
 	readonly property int itemHeight: 30
-	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.extraSmall) * Tokens.rounding.scale
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.smaller) * Tokens.rounding.scale
 	required property PopoutState popouts
 	property int rootWidth: 0
 	required property QsMenuHandle trayItem
@@ -27,20 +27,15 @@ StackView {
 	initialItem: SubMenu {
 		handle: root.trayItem
 	}
-	popEnter: NoAnim {
+	popEnter: NoAnim {}
-	}
+	popExit: NoAnim {}
-	popExit: NoAnim {
+	pushEnter: NoAnim {}
-	}
+	pushExit: NoAnim {}
-	pushEnter: NoAnim {
-	}
-	pushExit: NoAnim {
-	}
 
 	Component {
 		id: subMenuComp
 
-		SubMenu {
+		SubMenu {}
-		}
 	}
 
 	component NoAnim: Transition {
@@ -49,8 +44,8 @@ StackView {
 		}
 	}
 	component SubMenu: SnapLayout {
-orientation: Qt.Vertical
 		id: menu
+		orientation: Qt.Vertical
 
 		required property QsMenuHandle handle
 		property bool isSubMenu
@@ -61,12 +56,10 @@ orientation: Qt.Vertical
 		spacing: Tokens.spacing.extraSmall
 
 		Behavior on opacity {
-			Anim {
+			Anim {}
-			}
 		}
 		Behavior on scale {
-			Anim {
+			Anim {}
-			}
 		}
 
 		Component.onCompleted: shown = true

Modules/Bar/Popouts/Wrapper.qml

@@ -2,6 +2,7 @@ import Quickshell
 import QtQuick
 import qs.Components
 import ZShell.Config
+import ZShell
 
 Item {
 	id: root
@@ -26,8 +27,8 @@ Item {
 		detachedMode = "";
 	}
 
-	implicitHeight: nonAnimHeight
+	implicitHeight: ZUtils.snap(nonAnimHeight, root)
-	implicitWidth: nonAnimWidth
+	implicitWidth: ZUtils.snap(nonAnimWidth, root)
 
 	Behavior on implicitHeight {
 		enabled: root.offsetScale < 1
@@ -57,6 +58,7 @@ Item {
 		shouldBeActive: root.hasCurrent
 
 		sourceComponent: Content {
+			wrapper: root
 			horizontal: root.horizontal
 			popouts: popoutState
 		}

Modules/Clipboard/Content.qml

@@ -55,7 +55,7 @@ Item {
 		}
 	}
 
-	ClipRect {
+	CustomRect {
 		id: preview
 
 		anchors.bottom: parent.bottom
@@ -65,6 +65,7 @@ Item {
 		color: Colors.tPalette.m3surfaceContainer
 		implicitWidth: ClipHistory.previewIsImage ? Math.max(Math.min(imagePreview.sourceSize.width + Tokens.padding.large * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) : Math.max(Math.min(textPreviewColumn.width + textPreviewColumn.anchors.margins * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth)
 		radius: 25
+		clip: true
 
 		Behavior on implicitWidth {
 			Anim {}
@@ -229,11 +230,12 @@ Item {
 					anchors.fill: parent
 					spacing: Tokens.spacing.small
 
-					ClipRect {
+					Item {
 						id: textRect
 
 						Layout.fillHeight: true
 						Layout.fillWidth: true
+						clip: true
 
 						Item {
 							id: textWrapper

Modules/Dashboard/Dash/Calendar.qml

@@ -309,12 +309,10 @@ orientation: Qt.Vertical
 							}
 						}
 						Behavior on x {
-							Anim {
+							Anim {}
-							}
 						}
 						Behavior on y {
-							Anim {
+							Anim {}
-							}
 						}
 
 						onTodayItemChanged: {

Modules/Dashboard/Dash/Resources.qml

@@ -30,8 +30,8 @@ Item {
 	}
 
 	SnapLayout {
-orientation: Qt.Vertical
 		id: layout
+		orientation: Qt.Vertical
 
 		anchors.bottom: parent.bottom
 		anchors.margins: Tokens.padding.large
@@ -77,7 +77,7 @@ orientation: Qt.Vertical
 
 		required property string icon
 
-		implicitSize: ZUtils.snap((root.height - layout.anchors.margins * 2 - layout.spacing * 4) / 5, root)
+		implicitSize: (root.height - layout.anchors.margins * 2 - layout.spacing * 4) / 5
 
 		Behavior on clampedVal {
 			Anim {}

Modules/Dashboard/Media/BackgroundShapes.qml

@@ -33,8 +33,7 @@ Item {
 	Repeater {
 		id: shapes
 
-		DriftingShape {
+		DriftingShape {}
-		}
 	}
 
 	FrameAnimation {
@@ -80,8 +79,7 @@ Item {
 		shape: root.shapePool[Math.floor(Math.random() * root.shapePool.length)]
 
 		Behavior on color {
-			CAnim {
+			CAnim {}
-			}
 		}
 		Behavior on opacity {
 			Anim {

Modules/Dashboard/Media/CoverArt.qml

@@ -18,8 +18,7 @@ Item {
 	layer.enabled: true
 
 	Behavior on fallbackColor {
-		CAnim {
+		CAnim {}
-		}
 	}
 	layer.effect: MultiEffect {
 		blurMax: 1

Modules/Dashboard/Media/LyricsInfo.qml

@@ -17,7 +17,7 @@ Item {
 	implicitWidth: btn.implicitWidth * 0.9
 	implicitHeight: btn.implicitHeight * 0.9
 
-	BlobGroup {
+	BlobGroup2 {
 		id: blobGroup
 
 		color: Colors.palette.m3surfaceContainerHighest
@@ -29,7 +29,7 @@ Item {
 		}
 	}
 
-	BlobRect {
+	BlobRect2 {
 		id: btnRect
 
 		anchors.fill: parent
@@ -42,7 +42,7 @@ Item {
 		}
 	}
 
-	BlobRect {
+	BlobRect2 {
 		id: rect
 
 		anchors.right: parent.right
@@ -143,8 +143,8 @@ Item {
 			]
 
 			SnapLayout {
-orientation: Qt.Vertical
 				id: layout
+				orientation: Qt.Vertical
 
 				anchors.centerIn: parent
 				spacing: Tokens.spacing.extraSmall

Modules/Dashboard/Weather/Graphs.qml

@@ -42,7 +42,7 @@ SnapLayout {
 	}
 
 	SnapLayout {
-orientation: Qt.Vertical
+		orientation: Qt.Vertical
 		Layout.fillWidth: true
 		Layout.fillHeight: true
 		Layout.preferredWidth: root.width / 2
@@ -71,11 +71,11 @@ orientation: Qt.Vertical
 				id: tempGraph
 
 				anchors.fill: parent
-				values: root.forecastToday.map(e => e.tempC)
+				values: root.forecastToday.map(e => e?.tempC ?? null)
 				verticalLineStep: 3
 				xSteps: 24
 				horizontalLineStep: 10
-				minHorizontalLines: 4
+				minHorizontalLines: 3
 				yPaddingTop: horizontalLineStep
 				yPaddingBottom: horizontalLineStep
 				xLabel: i => root.formatHour(i)
@@ -95,7 +95,7 @@ orientation: Qt.Vertical
 	}
 
 	SnapLayout {
-orientation: Qt.Vertical
+		orientation: Qt.Vertical
 		Layout.fillWidth: true
 		Layout.fillHeight: true
 		Layout.preferredWidth: root.width / 2
@@ -132,7 +132,7 @@ orientation: Qt.Vertical
 				yPaddingTop: 20
 				verticalLineStep: 3
 				lastXLine: false
-				horizontalLineStep: 20
+				horizontalLineStep: 30
 				xLabel: i => root.formatHour(i)
 				yLabel: v => v + "%"
 

Modules/DesktopIcons/DesktopIconDelegate.qml

@@ -54,14 +54,12 @@ Item {
 	Behavior on x {
 		enabled: !mouseArea.drag.active && !root.isSnapping && !root.iconsRoot.selectedIcons.includes(root.filePath)
 
-		Anim {
+		Anim {}
-		}
 	}
 	Behavior on y {
 		enabled: !mouseArea.drag.active && !root.isSnapping && !root.iconsRoot.selectedIcons.includes(root.filePath)
 
-		Anim {
+		Anim {}
-		}
 	}
 
 	Item {
@@ -85,8 +83,7 @@ Item {
 			y: (root.iconsRoot.selectedIcons.includes(root.filePath) && root.iconsRoot.dragLeader !== "" && root.iconsRoot.dragLeader !== root.filePath) ? root.iconsRoot.groupDragY : 0
 		}
 		transitions: Transition {
-			Anim {
+			Anim {}
-			}
 		}
 
 		onXChanged: {
@@ -208,8 +205,7 @@ Item {
 			radius: Tokens.rounding.small
 
 			Behavior on opacity {
-				Anim {
+				Anim {}
-				}
 			}
 		}
 
@@ -268,8 +264,7 @@ Item {
 				radius: Tokens.rounding.small
 
 				Behavior on opacity {
-					Anim {
+					Anim {}
-					}
 				}
 			}
 		}

Modules/Dock/Parts/DockAppButton.qml

@@ -87,8 +87,7 @@ CustomRect {
 	Loader {
 		active: isSeparator
 
-		sourceComponent: DockSeparator {
+		sourceComponent: DockSeparator {}
-		}
 
 		anchors {
 			fill: parent

Modules/Launcher/Items/WallpaperTile.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import Quickshell
 import QtQuick
 import ZShell.Config
@@ -9,7 +11,7 @@ Item {
 	id: root
 
 	required property bool isCurrent
-	required property var modelData // FileSystemEntry-like {path, relativePath}
+	required property var modelData
 	required property real tileHeight
 	required property real tileWidth
 	required property ScreenState screenState
@@ -29,25 +31,75 @@ Item {
 		radius: Tokens.rounding.small
 		y: Tokens.padding.large
 
-		MaterialIcon {
+		Loader {
+			active: opacity > 0
 			anchors.centerIn: parent
-			color: Colors.tPalette.m3outline
+			opacity: img.status === Image.Ready ? 0 : 1
-			fontStyle: Tokens.font.icon.builders.extraLarge.scale(2).weight(Font.DemiBold).build()
+
-			text: "image"
+			Behavior on opacity {
+				Anim {}
+			}
+			sourceComponent: CustomRect {
+				color: Colors.palette.m3primaryContainer
+				implicitHeight: loadingIndicator.implicitSize + Tokens.padding.large * 2
+				implicitWidth: loadingIndicator.implicitSize + Tokens.padding.large * 2
+				radius: Tokens.rounding.full
+
+				LoadingIndicator {
+					id: loadingIndicator
+
+					anchors.centerIn: parent
+					containsIcon: true
+					implicitSize: Math.min(image.width, image.height) * 0.3
+				}
+			}
 		}
 
-		CachingImage {
+		Image {
+			id: img
 			anchors.bottom: parent.bottom
 			anchors.horizontalCenter: parent.horizontalCenter
 			anchors.top: parent.top
-			cache: true
+			asynchronous: true
 			fillMode: Image.PreserveAspectCrop
 			height: root.tileHeight
-			path: root.modelData ? root.modelData.path : ""
+			source: root.modelData ? root.modelData.thumbnailPath : ""
 			smooth: root.isCurrent
 			sourceSize.height: root.tileHeight
 			sourceSize.width: root.tileHeight * (16 / 9)
 			width: root.tileHeight * (16 / 9)
+
+			opacity: status === Image.Ready ? 1 : 0
+			Behavior on opacity {
+				Anim {
+					type: Anim.SlowEffects
+				}
+			}
+
+			Loader {
+				opacity: root.modelData.isVideo && img.status === Image.Ready ? 1 : 0
+				active: opacity > 0
+				anchors.centerIn: parent
+				Behavior on opacity {
+					Anim {
+						type: Anim.SlowEffects
+					}
+				}
+
+				sourceComponent: CustomRect {
+					implicitWidth: videoIcon.implicitWidth + Tokens.padding.extraLarge * 2
+					implicitHeight: implicitWidth
+					radius: Tokens.rounding.full
+					color: Colors.tPalette.m3surface
+
+					MaterialIcon {
+						id: videoIcon
+						anchors.centerIn: parent
+						text: "video_library"
+						fontStyle: Tokens.font.icon.extraLarge
+					}
+				}
+			}
 		}
 
 		StateLayer {

Modules/Launcher/Services/Actions.qml

@@ -22,8 +22,7 @@ Searcher {
 
 		model: Config.launcher.actions.values.filter(a => (a.enabled ?? true) && (Config.launcher.enableDangerousActions || !(a.dangerous ?? false)))
 
-		Action {
+		Action {}
-		}
 	}
 
 	component Action: QtObject {

Modules/Lock/Content.qml

@@ -6,14 +6,13 @@ import qs.Components
 import qs.Helpers
 import qs.Services
 
-ClipRect {
+Item {
 	id: root
 
 	required property var lock
 
 	implicitHeight: layout.implicitHeight
 	implicitWidth: layout.implicitWidth
-	radius: Tokens.rounding.largeIncreased
 
 	SnapLayout {
 		id: layout
@@ -54,24 +53,10 @@ ClipRect {
 			lock: root.lock
 		}
 
-		SnapLayout {
+		NotifDock {
 			Layout.fillWidth: true
-
+			Layout.fillHeight: true
-			spacing: Tokens.spacing.medium
+			lock: root.lock
-			orientation: Qt.Vertical
-
-			CustomRect {
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-				bottomRightRadius: Tokens.rounding.largeIncreased
-				color: Colors.tPalette.m3surfaceContainer
-				radius: Tokens.rounding.small
-				topRightRadius: Tokens.rounding.largeIncreased
-
-				NotifDock {
-					lock: root.lock
-				}
-			}
 		}
 	}
 }

Modules/Lock/LockSurface.qml

@@ -221,9 +221,9 @@ WlSessionLockSurface {
 
 			anchors.fill: parent
 			color: Colors.palette.m3surface
-			layer.enabled: true
 			opacity: Colors.transparency.enabled ? Colors.transparency.base : 1
 			radius: lockContent.radius
+			layer.enabled: true
 
 			layer.effect: MultiEffect {
 				blurMax: 15

Modules/Lock/Media.qml

@@ -7,39 +7,44 @@ import qs.Components
 import qs.Helpers
 import qs.Services
 
-ClipRect {
+Item {
 	id: root
 
 	required property var lock
 
-	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Tokens.rounding.small
-
-	FadeImage {
-		id: image
 
+	ClipRect {
 		anchors.fill: parent
-		asynchronous: true
-		fillMode: Image.PreserveAspectCrop
-		layer.enabled: true
-		opacity: status === Image.Ready ? 1 : 0
-		source: Players.getArtUrl(Players.active)
-		sourceSize: {
-			const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
-			return Qt.size(width * dpr, height * dpr);
-		}
 
-		Behavior on opacity {
+		color: Colors.tPalette.m3surfaceContainer
-			Anim {
+		radius: Tokens.rounding.small
-				type: Anim.StandardExtraLarge
+		bottomLeftRadius: Tokens.rounding.largeIncreased
-			}
+
-		}
+		FadeImage {
+			id: image
 
-		CustomRect {
 			anchors.fill: parent
-			color: Colors.palette.m3surface
+			asynchronous: true
-			opacity: 0.7
+			fillMode: Image.PreserveAspectCrop
+			opacity: status === Image.Ready ? 1 : 0
+			source: Players.getArtUrl(Players.active)
+			sourceSize: {
+				const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+				return Qt.size(width * dpr, height * dpr);
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.StandardExtraLarge
+				}
+			}
+
+			CustomRect {
+				anchors.fill: parent
+				color: Colors.palette.m3surface
+				opacity: 0.7
+			}
 		}
 	}
 
@@ -79,7 +84,7 @@ ClipRect {
 			spacing: Tokens.spacing.extraSmall
 
 			IconButton {
-				enabled: Players.active?.canGoPrevious
+				enabled: Players.active?.canGoPrevious ?? false
 				icon: "skip_previous"
 				isRound: true
 				shapeMorph: true
@@ -90,7 +95,7 @@ ClipRect {
 
 			IconButton {
 				checked: Players.active?.isPlaying ?? false
-				enabled: Players.active?.canTogglePlaying
+				enabled: Players.active?.canTogglePlaying ?? false
 				icon: Players.active?.isPlaying ? "pause" : "play_arrow"
 				implicitWidth: implicitHeight + Tokens.padding.largeIncreased * 2
 				isRound: true
@@ -100,7 +105,7 @@ ClipRect {
 			}
 
 			IconButton {
-				enabled: Players.active?.canGoNext
+				enabled: Players.active?.canGoNext ?? false
 				icon: "skip_next"
 				isRound: true
 				shapeMorph: true

Modules/Lock/NotifDock.qml

@@ -6,135 +6,168 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Components
 import ZShell.Config
+import ZShell.Services
 import qs.Modules
 import qs.Components
+import qs.Components.Notifs
 import qs.Helpers
 import qs.Daemons
 import qs.Services
 
-SnapLayout {
+CustomRect {
 	id: root
 
 	required property var lock
 
-	anchors.fill: parent
+	bottomRightRadius: Tokens.rounding.largeIncreased
-	anchors.margins: Tokens.padding.large
+	color: Colors.tPalette.m3surfaceContainer
+	radius: Tokens.rounding.small
+	topRightRadius: Tokens.rounding.largeIncreased
 
-	orientation: Qt.Vertical
+	SnapLayout {
-	spacing: Tokens.spacing.small
+		anchors.fill: parent
+		anchors.margins: Tokens.padding.large
 
-	CustomText {
+		orientation: Qt.Vertical
-		Layout.fillWidth: true
+		spacing: Tokens.spacing.small
-		color: Colors.palette.m3outline
-		elide: Text.ElideRight
-		font: Tokens.font.mono.builders.small.weight(Font.Medium).build()
-		text: NotifServer.list.length > 0 ? qsTr("%1 notification%2").arg(NotifServer.list.length).arg(NotifServer.list.length === 1 ? "" : "s") : qsTr("Notifications")
-	}
 
-	ClipRect {
+		CustomText {
-		id: clipRect
+			Layout.fillWidth: true
+			color: Colors.palette.m3outline
+			elide: Text.ElideRight
+			font: Tokens.font.mono.builders.small.weight(Font.Medium).build()
+			text: NotifServer.notClosed.length > 0 ? qsTr("%1 notification%2").arg(NotifServer.notClosed.length).arg(NotifServer.notClosed.length === 1 ? "" : "s") : qsTr("Notifications")
+		}
 
-		Layout.fillHeight: true
+		Item {
-		Layout.fillWidth: true
+			Layout.fillHeight: true
-		color: "transparent"
+			Layout.fillWidth: true
-		radius: Tokens.rounding.small
 
-		Loader {
+			Loader {
-			active: opacity > 0
+				active: opacity > 0
-			anchors.centerIn: parent
+				anchors.centerIn: parent
-			opacity: NotifServer.list.length > 0 ? 0 : 1
+				opacity: NotifServer.notClosed.length > 0 ? 0 : 1
 
-			Behavior on opacity {
+				Behavior on opacity {
-				Anim {
+					Anim {
-					duration: Tokens.anim.durations.extraLarge
+						duration: Tokens.anim.durations.extraLarge
-				}
-			}
-			sourceComponent: SnapLayout {
-				spacing: Tokens.spacing.largeIncreased
-				orientation: Qt.Vertical
-
-				Image {
-					asynchronous: true
-					fillMode: Image.PreserveAspectFit
-					layer.enabled: true
-					source: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/dino.png`)
-					sourceSize.width: clipRect.width * 0.8
-
-					layer.effect: Coloriser {
-						brightness: 1
-						colorizationColor: Colors.palette.m3outlineVariant
 					}
 				}
-
+				sourceComponent: CustomText {
-				CustomText {
-					Layout.alignment: Qt.AlignHCenter
 					color: Colors.palette.m3outlineVariant
 					font: Tokens.font.headline.builders.small.width(90).build()
 					text: qsTr("No Notifications")
 				}
 			}
+
+			CustomListView {
+				id: list
+
+				anchors.fill: parent
+				clip: true
+				orientation: Qt.Vertical
+				spacing: Tokens.spacing.small
+
+				add: Transition {
+					Anim {
+						from: 0
+						property: "opacity"
+						to: 1
+					}
+
+					Anim {
+						duration: Tokens.anim.durations.expressiveDefaultSpatial
+						easing: Tokens.anim.expressiveDefaultSpatial
+						from: 0
+						property: "scale"
+						to: 1
+					}
+				}
+				delegate: NotifRow {}
+				displaced: Transition {
+					Anim {
+						properties: "opacity,scale"
+						to: 1
+					}
+
+					Anim {
+						duration: Tokens.anim.durations.expressiveDefaultSpatial
+						easing: Tokens.anim.expressiveDefaultSpatial
+						property: "y"
+					}
+				}
+				model: ScriptModel {
+					values: [...NotifServer.groups].filter(g => g.count > 0)
+				}
+				move: Transition {
+					Anim {
+						properties: "opacity,scale"
+						to: 1
+					}
+
+					Anim {
+						duration: Tokens.anim.durations.expressiveDefaultSpatial
+						easing: Tokens.anim.expressiveDefaultSpatial
+						property: "y"
+					}
+				}
+				remove: Transition {
+					Anim {
+						property: "opacity"
+						to: 0
+					}
+
+					Anim {
+						property: "scale"
+						to: 0.6
+					}
+				}
+			}
+		}
+	}
+
+	component NotifRow: Item {
+		id: row
+
+		required property NotificationGroup modelData
+		property bool expanded: false
+
+		function dismissAll(): void {
+			for (const n of [...modelData.activeNotifs])
+				n.dismiss();
 		}
 
-		CustomListView {
+		implicitHeight: card.implicitHeight
-			anchors.fill: parent
+		implicitWidth: list.width
-			clip: true
-			spacing: Tokens.spacing.small
 
-			add: Transition {
+		NotifSwipeArea {
-				Anim {
+			id: area
-					from: 0
-					property: "opacity"
-					to: 1
-				}
 
-				Anim {
+			implicitHeight: card.implicitHeight
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
+			implicitWidth: row.implicitWidth
-					easing: Tokens.anim.expressiveDefaultSpatial
-					from: 0
-					property: "scale"
-					to: 1
-				}
-			}
-			delegate: NotifGroup {}
-			displaced: Transition {
-				Anim {
-					properties: "opacity,scale"
-					to: 1
-				}
 
-				Anim {
+			expanded: row.expanded
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
+			onDismissed: row.dismissAll()
-					easing: Tokens.anim.expressiveDefaultSpatial
+			onRequestExpand: expand => row.expanded = expand
-					property: "y"
+			onSwiped: row.dismissAll()
-				}
-			}
-			model: ScriptModel {
-				values: {
-					const list = NotifServer.notClosed.map(n => [n.appName, null]);
-					return [...new Map(list).keys()];
-				}
-			}
-			move: Transition {
-				Anim {
-					properties: "opacity,scale"
-					to: 1
-				}
 
-				Anim {
+			Item {
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
+				anchors.top: parent.top
-					easing: Tokens.anim.expressiveDefaultSpatial
-					property: "y"
-				}
-			}
-			remove: Transition {
-				Anim {
-					property: "opacity"
-					to: 0
-				}
 
-				Anim {
+				implicitHeight: card.implicitHeight
-					property: "scale"
+				implicitWidth: row.implicitWidth
-					to: 0.6
+
+				clip: true
+
+				NotifGroupCard {
+					id: card
+
+					baseLayer: 1
+					container: list
+					expanded: row.expanded
+					group: row.modelData
+					onRequestExpand: expand => row.expanded = expand
+					onSwiped: notif => notif.dismiss()
 				}
 			}
 		}

Modules/Lock/NotifGroup.qml

@@ -1,324 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import Quickshell.Widgets
-import Quickshell.Services.Notifications
-import QtQuick
-import QtQuick.Layouts
-import ZShell.Components
-import ZShell.Config
-import qs.Modules
-import qs.Components
-import qs.Helpers
-import qs.Daemons
-import qs.Services
-
-CustomRect {
-	id: root
-
-	readonly property string appIcon: notifs.find(n => n.appIcon.length > 0)?.appIcon ?? ""
-	property bool expanded
-	readonly property string image: notifs.find(n => n.image.length > 0)?.image ?? ""
-	required property string modelData
-	readonly property list<var> notifs: NotifServer.list.filter(notif => notif.appName === modelData)
-	readonly property string urgency: notifs.some(n => n.urgency === NotificationUrgency.Critical) ? "critical" : notifs.some(n => n.urgency === NotificationUrgency.Normal) ? "normal" : "low"
-
-	anchors.left: parent?.left
-	anchors.right: parent?.right
-	clip: true
-	color: root.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
-	implicitHeight: content.implicitHeight + Tokens.padding.small * 2
-	radius: Tokens.rounding.medium
-
-	Behavior on implicitHeight {
-		Anim {
-			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing: Tokens.anim.expressiveDefaultSpatial
-		}
-	}
-
-	SnapLayout {
-		id: content
-
-		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
-		anchors.right: parent.right
-		anchors.top: parent.top
-
-		spacing: Tokens.spacing.medium
-
-		Item {
-			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-			implicitHeight: Config.notifs.sizes.image
-			implicitWidth: Config.notifs.sizes.image
-
-			Component {
-				id: imageComp
-
-				Image {
-					asynchronous: true
-					cache: false
-					fillMode: Image.PreserveAspectCrop
-					height: Config.notifs.sizes.image
-					source: Qt.resolvedUrl(root.image)
-					visible: Config.lock.showNotifIcon
-					width: Config.notifs.sizes.image
-				}
-			}
-
-			Component {
-				id: appIconComp
-
-				ColoredIcon {
-					color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-					implicitSize: Math.round(Config.notifs.sizes.image * 0.6)
-					layer.enabled: root.appIcon.endsWith("symbolic")
-					source: Quickshell.iconPath(root.appIcon)
-				}
-			}
-
-			Component {
-				id: materialIconComp
-
-				MaterialIcon {
-					color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-					fontStyle: Tokens.font.icon.large
-					text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
-				}
-			}
-
-			ClipRect {
-				anchors.fill: parent
-				color: root.urgency === "critical" ? Colors.palette.m3error : root.urgency === "low" ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 3) : Colors.palette.m3secondaryContainer
-				radius: Tokens.rounding.full
-
-				Loader {
-					anchors.centerIn: parent
-					sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp
-				}
-			}
-
-			Loader {
-				active: root.appIcon && root.image
-				anchors.bottom: parent.bottom
-				anchors.right: parent.right
-
-				sourceComponent: CustomRect {
-					color: root.urgency === "critical" ? Colors.palette.m3error : root.urgency === "low" ? Colors.palette.m3surfaceContainerHighest : Colors.palette.m3secondaryContainer
-					implicitHeight: Config.notifs.sizes.badge
-					implicitWidth: Config.notifs.sizes.badge
-					radius: Tokens.rounding.full
-
-					ColoredIcon {
-						anchors.centerIn: parent
-						color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-						implicitSize: Math.round(Config.notifs.sizes.badge * 0.6)
-						layer.enabled: root.appIcon.endsWith("symbolic")
-						source: Quickshell.iconPath(root.appIcon)
-					}
-				}
-			}
-		}
-
-		SnapLayout {
-			Layout.bottomMargin: -Tokens.padding.extraSmall / 2 - (root.expanded ? 0 : spacing)
-			Layout.fillWidth: true
-			Layout.topMargin: -Tokens.padding.extraSmall
-
-			spacing: Math.round(Tokens.spacing.small / 2)
-			orientation: Qt.Vertical
-
-			SnapLayout {
-				Layout.bottomMargin: -parent.spacing
-				Layout.fillWidth: true
-
-				spacing: Tokens.spacing.small
-
-				CustomText {
-					Layout.fillWidth: true
-					color: Colors.palette.m3onSurfaceVariant
-					elide: Text.ElideRight
-					font: Tokens.font.body.small
-					text: root.modelData
-				}
-
-				CustomText {
-					animate: true
-					color: Colors.palette.m3outline
-					font: Tokens.font.body.small
-					text: root.notifs[0]?.timeStr ?? ""
-				}
-
-				CustomRect {
-					Layout.preferredWidth: root.notifs.length > Config.notifs.groupPreviewNum ? implicitWidth : 0
-					color: root.urgency === "critical" ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
-					implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall
-					implicitWidth: expandBtn.implicitWidth + Tokens.padding.small * 2
-					opacity: root.notifs.length > Config.notifs.groupPreviewNum ? 1 : 0
-					radius: Tokens.rounding.full
-
-					Behavior on Layout.preferredWidth {
-						Anim {}
-					}
-					Behavior on opacity {
-						Anim {}
-					}
-
-					StateLayer {
-						color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
-
-						onClicked: {
-							root.expanded = !root.expanded;
-						}
-					}
-
-					SnapLayout {
-						id: expandBtn
-
-						anchors.centerIn: parent
-
-						spacing: Tokens.spacing.small / 2
-
-						CustomText {
-							id: groupCount
-
-							Layout.leftMargin: Tokens.padding.extraSmall / 2
-							animate: true
-							color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
-							font: Tokens.font.body.small
-							text: root.notifs.length
-						}
-
-						MaterialIcon {
-							Layout.rightMargin: -Tokens.padding.extraSmall / 2
-							animate: true
-							color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
-							text: root.expanded ? "expand_less" : "expand_more"
-						}
-					}
-				}
-			}
-
-			Repeater {
-				model: ScriptModel {
-					values: root.notifs.slice(0, Config.notifs.groupPreviewNum)
-				}
-
-				NotifLine {
-					id: notif
-
-					ParallelAnimation {
-						running: true
-
-						Anim {
-							from: 0
-							property: "opacity"
-							target: notif
-							to: 1
-						}
-
-						Anim {
-							from: 0.7
-							property: "scale"
-							target: notif
-							to: 1
-						}
-
-						Anim {
-							from: 0
-							property: "preferredHeight"
-							target: notif.Layout
-							to: notif.implicitHeight
-						}
-					}
-
-					ParallelAnimation {
-						running: notif.modelData.closed
-
-						onFinished: notif.modelData.unlock(notif)
-
-						Anim {
-							property: "opacity"
-							target: notif
-							to: 0
-						}
-
-						Anim {
-							property: "scale"
-							target: notif
-							to: 0.7
-						}
-
-						Anim {
-							property: "preferredHeight"
-							target: notif.Layout
-							to: 0
-						}
-					}
-				}
-			}
-
-			Loader {
-				Layout.fillWidth: true
-				Layout.preferredHeight: root.expanded ? implicitHeight : 0
-				active: opacity > 0
-				opacity: root.expanded ? 1 : 0
-
-				Behavior on opacity {
-					Anim {}
-				}
-				sourceComponent: SnapLayout {
-					orientation: Qt.Vertical
-					spacing: Tokens.spacing.extraSmall
-
-					Repeater {
-						model: ScriptModel {
-							values: root.notifs.slice(Config.notifs.groupPreviewNum)
-						}
-
-						NotifLine {}
-					}
-				}
-			}
-		}
-	}
-
-	component NotifLine: CustomText {
-		id: notifLine
-
-		required property NotifServer.Notif modelData
-
-		Layout.fillWidth: true
-		color: root.urgency === "critical" ? Colors.palette.m3onSecondaryContainer : Colors.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" ? Colors.palette.m3secondary : Colors.palette.m3outline;
-
-			if (metrics.text === metrics.elidedText)
-				return `${summary} <span style='color:${color}'>${body}</span>`;
-
-			const t = metrics.elidedText.length - 3;
-			if (t < summary.length)
-				return `${summary.slice(0, t)}...`;
-
-			return `${summary} <span style='color:${color}'>${body.slice(0, t - summary.length)}...</span>`;
-		}
-		textFormat: Text.MarkdownText
-
-		Component.onCompleted: modelData.lock(this)
-		Component.onDestruction: modelData.unlock(this)
-
-		TextMetrics {
-			id: metrics
-
-			elide: Text.ElideRight
-			elideWidth: notifLine.width
-			font.family: notifLine.font.family
-			font.pointSize: notifLine.font.pointSize
-			text: `${notifLine.modelData.summary} ${notifLine.modelData.body}`.replace(/\n/g, " ")
-		}
-	}
-}

Modules/Lock/Weather/BriefInfo.qml

@@ -18,7 +18,7 @@ orientation: Qt.Vertical
 		Layout.alignment: Qt.AlignHCenter
 		animate: true
 		color: Colors.palette.m3onSurfaceVariant
-		font: Tokens.font.title.large
+		font: Tokens.font.body.large
 		text: Weather.description
 	}
 
@@ -31,7 +31,7 @@ orientation: Qt.Vertical
 
 			animate: true
 			color: Colors.palette.m3primary
-			font: Tokens.font.body.large
+			font: Tokens.font.title.large
 			text: Weather.temp
 		}
 
@@ -39,6 +39,7 @@ orientation: Qt.Vertical
 			animate: true
 			color: Colors.palette.m3secondary
 			text: Weather.icon
+			fontStyle: Tokens.font.icon.large
 		}
 	}
 
@@ -55,7 +56,7 @@ orientation: Qt.Vertical
 		Layout.alignment: Qt.AlignHCenter
 		animate: true
 		color: Colors.palette.m3onSurfaceVariant
-		font: Tokens.font.body.normal
+		font: Tokens.font.body.medium
 		text: {
 			const today = Weather.forecast[0];
 			return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC));

Modules/Lock/Weather/Forecast.qml

@@ -37,7 +37,7 @@ CustomRect {
 		}
 	}
 
-	VerticalFadeListView {
+	CustomListView {
 		id: layout
 
 		anchors.bottom: parent.bottom
@@ -46,7 +46,13 @@ CustomRect {
 		anchors.margins: Tokens.padding.large
 		anchors.right: parent.right
 		implicitHeight: contentItem.childrenRect.height
-		model: Weather.hourlyForecast
+		currentIndex: Weather.currentHourIndex
+		// highlightFollowsCurrentItem: true
+		// preferredHighlightEnd: currentItem.implicitWidth
+		// preferredHighlightBegin: 0
+		// highlightRangeMode: ListView.ApplyRange
+		clip: true
+		model: Weather.hourlyForecast.slice(Weather.currentHourIndex - 1)
 		orientation: VerticalFadeListView.Horizontal
 		spacing: Tokens.spacing.medium
 
@@ -54,6 +60,7 @@ CustomRect {
 orientation: Qt.Vertical
 			id: hour
 
+			readonly property bool current: ListView.view.currentItem === this
 			readonly property var cond: modelData
 			required property int index
 			required property var modelData
@@ -62,7 +69,7 @@ orientation: Qt.Vertical
 
 			MaterialShape {
 				Layout.alignment: Qt.AlignHCenter
-				color: Qt.alpha(Colors.palette.m3primary, hour.index === Weather.currentHourIndex ? 1 : 0)
+				color: Qt.alpha(Colors.palette.m3primary, hour.current ? 1 : 0)
 				implicitSize: temp.implicitHeight + Tokens.padding.small * 2
 				shape: MaterialShape.Cookie4Sided
 
@@ -74,7 +81,7 @@ orientation: Qt.Vertical
 					id: temp
 
 					anchors.centerIn: parent
-					color: hour.index === Weather.currentHourIndex ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+					color: hour.current ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 					font: Tokens.font.body.medium
 					text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
 				}
@@ -98,7 +105,7 @@ orientation: Qt.Vertical
 				Layout.topMargin: Tokens.spacing.extraSmall
 				color: Colors.palette.m3onSurfaceVariant
 				font: Tokens.font.body.small
-				text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
+				text: hour.current ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
 			}
 		}
 	}

Modules/Lock/WeatherInfo.qml

@@ -19,6 +19,7 @@ CustomRect {
 		return base + brief.anchors.topMargin;
 	}
 	radius: Tokens.rounding.small
+	topLeftRadius: Tokens.rounding.largeIncreased
 
 	Timer {
 		interval: 900000 // 15 minutes
@@ -48,7 +49,6 @@ CustomRect {
 		anchors.right: parent.right
 		asynchronous: true
 
-		sourceComponent: Forecast {
+		sourceComponent: Forecast {}
-		}
 	}
 }

Modules/Notifications/Content.qml

@@ -1,18 +1,23 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Widgets
 import QtQuick
-import ZShell.Config
+import ZShell
 import ZShell.Components
+import ZShell.Config
+import ZShell.Services
 import qs.Components
+import qs.Components.Notifs
 import qs.Daemons
 import qs.Helpers
 
 Item {
 	id: root
 
-	readonly property int padding: Tokens.padding.smaller
+	readonly property int padding: Tokens.padding.small
+	readonly property int clamped: ZUtils.clamp(padding - Config.bar.border, 0, padding)
+
+	required property int topPadding
 	required property Item panels
 	required property ScreenState screenState
 
@@ -20,13 +25,10 @@ Item {
 	anchors.right: parent.right
 	anchors.top: parent.top
 	implicitHeight: {
-		const count = list.count;
+		if (list.count === 0)
-		if (count === 0)
 			return 0;
 
-		let height = (count - 1) * Tokens.spacing.small;
+		let height = list.layoutHeight;
-		for (let i = 0; i < count; i++)
-			height += (list.itemAtIndex(i) as NotifWrapper)?.nonAnimHeight ?? 0;
 
 		if (panels.popouts.hasCurrent && (panels.popouts.currentCenter + (panels.popouts.current?.width / 2)) > panels.notifications.x)
 			return 0;
@@ -40,7 +42,7 @@ Item {
 				height = h;
 		}
 
-		return Math.min(((QsWindow.window as QsWindow)?.screen?.height ?? 0) - 1 * 2, height + padding * 2);
+		return Math.min(((QsWindow.window as QsWindow)?.screen?.height ?? 0) + padding - clamped * 2 - topPadding, height + padding * 2);
 	}
 
 	implicitWidth: Config.notifs.sizes.width + padding * 2
@@ -53,36 +55,55 @@ Item {
 		anchors.fill: parent
 		anchors.margins: root.padding
 		clip: true
-		// radius: Tokens.rounding.large - root.padding
 
-		CustomListView {
+		KineticFlickable {
-			id: list
+			id: view
 
 			anchors.fill: parent
-			cacheBuffer: (QsWindow.window as QsWindow)?.screen.height ?? 0
-			orientation: Qt.Vertical
-			spacing: 0
 
-			delegate: NotifWrapper {}
+			contentHeight: list.implicitHeight
-			displaced: Transition {
+			contentWidth: width
-				Anim {
+			flickableDirection: Flickable.VerticalFlick
-					property: "y"
-				}
-			}
-			model: ScriptModel {
-				values: {
-					const popups = NotifServer.popups.filter(n => !n.closed);
 
-					if (!Config.notifs.showInFullscreen) {
+			LazyListView {
-						if (Hypr.monitorFor(root.panels.screen).activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false)
+				id: list
-							return [];
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				implicitHeight: contentHeight
+
+				spacing: Tokens.spacing.medium
+				readyDelay: 1
+				cacheBuffer: (QsWindow.window as QsWindow)?.screen.height ?? 0
+				removeDuration: Tokens.anim.durations.normal
+
+				useCustomViewport: true
+				viewport: Qt.rect(0, view.contentY, width, view.height)
+
+				model: ScriptModel {
+					values: {
+						if (!Config.notifs.showInFullscreen) {
+							if (Hypr.monitorFor(root.panels.screen).activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false)
+								return [];
+						}
+						return [...NotifServer.popupGroups];
 					}
-					return popups;
 				}
-			}
+
-			move: Transition {
+				delegate: NotifWrapper {}
+
+				onViewportAdjustNeeded: d => {
+					if (contentYAnim.running)
+						contentYAnim.complete();
+					contentYAnim.to = Math.max(0, view.contentY + d);
+					contentYAnim.start();
+				}
+
 				Anim {
-					property: "y"
+					id: contentYAnim
+
+					target: view
+					property: "contentY"
 				}
 			}
 		}
@@ -95,74 +116,106 @@ Item {
 	component NotifWrapper: Item {
 		id: wrapper
 
-		property int idx
+		required property NotificationGroup modelData
-		required property int index
+		property bool expanded: Config.notifs.openExpanded
-		required property NotifServer.Notif modelData
+		readonly property bool holding: area.containsMouse || area.pressed || card.rowPressed
-		readonly property alias nonAnimHeight: notif.nonAnimHeight
 
-		implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Tokens.spacing.small)
+		function forEachPopup(fn: var): void {
-		implicitWidth: notif.implicitWidth
+			for (const n of [...card.notifs])
-
+				fn(n);
-		ListView.onRemove: removeAnim.start()
-		onIndexChanged: {
-			if (index !== -1)
-				idx = index;
 		}
 
-		SequentialAnimation {
+		function holdPopups(): void {
-			id: removeAnim
+			forEachPopup(n => n.holdPopup());
-
-			PropertyAction {
-				property: "ListView.delayRemove"
-				target: wrapper
-				value: true
-			}
-
-			PropertyAction {
-				property: "enabled"
-				target: wrapper
-				value: false
-			}
-
-			PropertyAction {
-				property: "implicitHeight"
-				target: wrapper
-				value: 0
-			}
-
-			PropertyAction {
-				property: "z"
-				target: wrapper
-				value: 1
-			}
-
-			Anim {
-				property: "x"
-				target: notif
-				to: (notif.x >= 0 ? Config.notifs.sizes.width : -Config.notifs.sizes.width) * 2
-			}
-
-			PropertyAction {
-				property: "ListView.delayRemove"
-				target: wrapper
-				value: false
-			}
 		}
 
-		CustomRect {
+		LazyListView.trackViewport: !expanded && card.nonAnimHeight < card.implicitHeight
+		LazyListView.preferredHeight: LazyListView.removing ? 0 : card.nonAnimHeight
+		LazyListView.visibleHeight: LazyListView.removing ? 0 : card.implicitHeight
+		LazyListView.onRemovingChanged: {
+			if (!wrapper.LazyListView.removing)
+				return;
+
+			slideOut.to = (area.x >= 0 ? root.implicitWidth : -root.implicitWidth) * 2;
+			slideOut.start();
+		}
+
+		implicitWidth: area.implicitWidth
+		implicitHeight: card.implicitHeight
+
+		enabled: !LazyListView.removing
+		z: LazyListView.removing ? 1 : 0
+
+		onHoldingChanged: {
+			if (holding)
+				holdPopups();
+			else
+				forEachPopup(n => n.releasePopup());
+		}
+
+		Connections {
+			function onNotifsChanged(): void {
+				if (wrapper.holding)
+					wrapper.holdPopups();
+			}
+
+			target: wrapper.modelData
+		}
+
+		Anim {
+			id: slideOut
+
+			target: area
+			property: "x"
+			duration: Tokens.anim.durations.normal
+			easing: Tokens.anim.emphasized
+		}
+
+		Item {
 			anchors.top: parent.top
-			anchors.topMargin: wrapper.idx === 0 ? 0 : 8
-			color: "transparent"
-			implicitHeight: notif.implicitHeight
-			implicitWidth: notif.implicitWidth
-			radius: Tokens.rounding.small
 
-			Notification {
+			implicitWidth: area.implicitWidth
-				id: notif
+			implicitHeight: card.implicitHeight
+			clip: true
+
+			NotifSwipeArea {
+				id: area
 
 				implicitWidth: root.implicitWidth - root.padding * 2
-				modelData: wrapper.modelData
+				implicitHeight: card.implicitHeight
+				x: wrapper.LazyListView.adding ? implicitWidth : 0
+
+				expanded: wrapper.expanded
+
+				onRequestExpand: expand => wrapper.expanded = expand
+				onSwiped: wrapper.forEachPopup(n => n.dismissPopup())
+				onDismissed: wrapper.forEachPopup(n => n.dismiss())
+				onClicked: event => {
+					if (!Config.notifs.actionOnClick || event.button !== Qt.LeftButton || card.notifs.length !== 1)
+						return;
+
+					const actions = card.notifs[0].actions;
+					if (actions.length === 1)
+						actions[0].invoke();
+				}
+
+				NotifGroupCard {
+					id: card
+
+					group: wrapper.modelData
+					container: view
+					expanded: wrapper.expanded
+					onRequestExpand: expand => wrapper.expanded = expand
+					onSwiped: notif => notif.dismissPopup()
+					onLinkActivated: notif => notif.dismissPopup()
+				}
 			}
 		}
+
+		Behavior on y {
+			enabled: wrapper.LazyListView.ready
+
+			Anim {}
+		}
 	}
 }

Modules/Notifications/Notification.qml

@@ -1,510 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Shapes
-import Quickshell
-import Quickshell.Services.Notifications
-import ZShell.Components
-import qs.Daemons
-import qs.Helpers
-import ZShell.Config
-import qs.Components
-import qs.Services
-
-CustomRect {
-	id: root
-
-	property bool expanded: Config.notifs.openExpanded
-	readonly property bool hasAppIcon: modelData.appIcon.length > 0
-	readonly property bool hasImage: modelData.image.length > 0
-	required property NotifServer.Notif modelData
-	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? Tokens.spacing.extraSmall * 2 + appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
-
-	color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondaryContainer : Colors.tPalette.m3surfaceContainer
-	implicitHeight: inner.implicitHeight
-	radius: Tokens.rounding.large - Tokens.padding.smaller
-	x: implicitWidth
-
-	Behavior on x {
-		Anim {
-			easing: Tokens.anim.emphasizedDecel
-		}
-	}
-
-	Component.onCompleted: {
-		x = 0;
-		modelData.lock(this);
-	}
-	Component.onDestruction: modelData.unlock(this)
-
-	MouseArea {
-		property int startY
-
-		acceptedButtons: Qt.LeftButton | Qt.MiddleButton
-		anchors.fill: parent
-		cursorShape: root.expanded && body.hoveredLink ? Qt.PointingHandCursor : pressed ? Qt.ClosedHandCursor : undefined
-		drag.axis: Drag.XAxis
-		drag.target: parent
-		hoverEnabled: true
-		preventStealing: true
-
-		onClicked: event => {
-			if (!Config.notifs.actionOnClick || event.button !== Qt.LeftButton)
-				return;
-
-			const actions = root.modelData.actions;
-			if (actions.length === 1)
-				actions[0].invoke();
-		}
-		onEntered: root.modelData.timer.stop()
-		onExited: {
-			if (!pressed)
-				root.modelData.timer.start();
-		}
-		onPositionChanged: event => {
-			if (pressed) {
-				const diffY = event.y - startY;
-				if (Math.abs(diffY) > Config.notifs.expandThreshold)
-					root.expanded = diffY > 0;
-			}
-		}
-		onPressed: event => {
-			root.modelData.timer.stop();
-			startY = event.y;
-			if (event.button === Qt.MiddleButton)
-				root.modelData.close();
-		}
-		onReleased: event => {
-			if (!containsMouse)
-				root.modelData.timer.start();
-
-			if (Math.abs(root.x) < root.implicitWidth * Config.notifs.clearThreshold)
-				root.x = 0;
-			else
-				root.modelData.popup = false;
-		}
-
-		Item {
-			id: inner
-
-			anchors.left: parent.left
-			anchors.margins: Tokens.padding.small
-			anchors.right: parent.right
-			anchors.top: parent.top
-			implicitHeight: root.nonAnimHeight
-
-			Behavior on implicitHeight {
-				Anim {}
-			}
-
-			Loader {
-				id: image
-
-				active: root.hasImage
-				anchors.left: parent.left
-				anchors.top: parent.top
-				asynchronous: true
-				height: Config.notifs.sizes.image
-				visible: root.hasImage || root.hasAppIcon
-				width: Config.notifs.sizes.image
-
-				sourceComponent: ClipRect {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) : Colors.palette.m3secondaryContainer
-					implicitHeight: Config.notifs.sizes.image
-					implicitWidth: Config.notifs.sizes.image
-					radius: Tokens.rounding.full
-
-					Image {
-						anchors.fill: parent
-						asynchronous: true
-						cache: false
-						fillMode: Image.PreserveAspectCrop
-						source: Qt.resolvedUrl(root.modelData.image)
-						sourceSize: {
-							const size = Config.notifs.sizes.image * ((QsWindow.window as QsWindow)?.devicePixelRatio ?? 1);
-							return Qt.size(size, size);
-						}
-					}
-				}
-			}
-
-			Loader {
-				id: appIcon
-
-				active: root.hasAppIcon || !root.hasImage
-				anchors.bottom: root.hasImage ? image.bottom : undefined
-				anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter
-				anchors.right: root.hasImage ? image.right : undefined
-				anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter
-				asynchronous: true
-
-				sourceComponent: CustomRect {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) : Colors.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: Tokens.rounding.full
-
-					Loader {
-						id: icon
-
-						active: root.hasAppIcon
-						anchors.centerIn: parent
-						asynchronous: true
-						height: Math.round(parent.width * 0.6)
-						width: Math.round(parent.width * 0.6)
-
-						sourceComponent: ColoredIcon {
-							anchors.fill: parent
-							color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-							layer.enabled: root.modelData.appIcon.endsWith("symbolic")
-							source: Quickshell.iconPath(root.modelData.appIcon)
-						}
-					}
-
-					Loader {
-						active: !root.hasAppIcon
-						anchors.centerIn: parent
-						anchors.verticalCenterOffset: 1
-						asynchronous: true
-
-						sourceComponent: MaterialIcon {
-							color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-							text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
-							fontStyle: Tokens.font.icon.medium
-						}
-					}
-				}
-			}
-
-			Shape {
-				id: progressIndicator
-
-				anchors.centerIn: appIcon
-				height: appIcon.implicitHeight + progressShape.strokeWidth * 2
-				preferredRendererType: Shape.CurveRenderer
-				width: appIcon.implicitWidth + progressShape.strokeWidth * 2
-
-				ShapePath {
-					id: progressShape
-
-					capStyle: ShapePath.RoundCap
-					fillColor: "transparent"
-					strokeColor: Colors.palette.m3primary
-					strokeWidth: 2
-
-					PathAngleArc {
-						id: progressArc
-
-						centerX: progressIndicator.width / 2
-						centerY: progressIndicator.height / 2
-						radiusX: progressIndicator.width / 2 - Tokens.padding.extraSmall / 2
-						radiusY: progressIndicator.height / 2 - Tokens.padding.extraSmall / 2
-						startAngle: -90
-						sweepAngle: ((root.modelData.hints.value ?? 0) / 100) * 360
-
-						Behavior on sweepAngle {
-							Anim {
-								easing: Tokens.anim.emphasizedDecel
-							}
-						}
-					}
-				}
-			}
-
-			CustomText {
-				id: appName
-
-				anchors.left: image.right
-				anchors.leftMargin: Tokens.spacing.small
-				anchors.top: parent.top
-				animate: true
-				color: Colors.palette.m3onSurfaceVariant
-				maximumLineCount: 1
-				opacity: root.expanded ? 1 : 0
-				text: appNameMetrics.elidedText
-				font: Tokens.font.label.medium
-
-				Behavior on opacity {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-			}
-
-			TextMetrics {
-				id: appNameMetrics
-
-				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Tokens.spacing.small * 3
-				font: appName.font
-				text: root.modelData.appName
-			}
-
-			CustomText {
-				id: summary
-
-				anchors.left: image.right
-				anchors.leftMargin: Tokens.spacing.small
-				anchors.top: parent.top
-				animate: true
-				height: implicitHeight
-				maximumLineCount: 1
-				text: summaryMetrics.elidedText
-
-				Behavior on height {
-					Anim {}
-				}
-				states: State {
-					name: "expanded"
-					when: root.expanded
-
-					PropertyChanges {
-						body.anchors.topMargin: Tokens.spacing.extraSmall
-						bodyPreview.anchors.topMargin: Tokens.spacing.extraSmall
-						summary.anchors.topMargin: Tokens.spacing.extraSmall
-						summary.maximumLineCount: undefined
-					}
-
-					AnchorChanges {
-						anchors.top: appName.bottom
-						target: summary
-					}
-				}
-				transitions: Transition {
-					PropertyAction {
-						property: "maximumLineCount"
-						target: summary
-					}
-
-					Anim {
-						property: "topMargin"
-					}
-
-					AnchorAnim {}
-				}
-			}
-
-			TextMetrics {
-				id: summaryMetrics
-
-				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Tokens.spacing.small * 3
-				font: summary.font
-				text: root.modelData.summary
-			}
-
-			CustomText {
-				id: timeSep
-
-				anchors.left: summary.right
-				anchors.leftMargin: Tokens.spacing.small
-				anchors.top: parent.top
-				color: Colors.palette.m3onSurfaceVariant
-				text: "•"
-				font: Tokens.font.body.small
-
-				states: State {
-					name: "expanded"
-					when: root.expanded
-
-					AnchorChanges {
-						anchors.left: appName.right
-						target: timeSep
-					}
-				}
-				transitions: Transition {
-					AnchorAnim {}
-				}
-			}
-
-			CustomText {
-				id: time
-
-				anchors.left: timeSep.right
-				anchors.leftMargin: Tokens.spacing.small
-				anchors.top: parent.top
-				animate: true
-				color: Colors.palette.m3onSurfaceVariant
-				font: Tokens.font.body.small
-				horizontalAlignment: Text.AlignLeft
-				text: root.modelData.timeStr
-			}
-
-			Item {
-				id: expandBtn
-
-				anchors.right: parent.right
-				anchors.top: parent.top
-				anchors.topMargin: -Tokens.padding.extraSmall
-				implicitHeight: expandIcon.implicitHeight
-				implicitWidth: expandIcon.implicitHeight
-
-				StateLayer {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
-					radius: Tokens.rounding.full
-
-					onClicked: root.expanded = !root.expanded
-				}
-
-				MaterialIcon {
-					id: expandIcon
-
-					anchors.centerIn: parent
-					anchors.verticalCenterOffset: root.expanded ? -1 : 1
-					rotation: root.expanded ? 180 : 0
-					text: "expand_more"
-					fontStyle: Tokens.font.icon.medium
-
-					Behavior on anchors.verticalCenterOffset {
-						Anim {}
-					}
-					Behavior on rotation {
-						Anim {}
-					}
-				}
-			}
-
-			CustomText {
-				id: bodyPreview
-
-				anchors.left: summary.left
-				anchors.right: expandBtn.left
-				anchors.rightMargin: Tokens.spacing.small
-				anchors.top: summary.bottom
-				animate: true
-				color: Colors.palette.m3onSurfaceVariant
-				font: Tokens.font.body.small
-				opacity: root.expanded ? 0 : 1
-				text: bodyPreviewMetrics.elidedText
-				textFormat: Text.MarkdownText
-
-				Behavior on opacity {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-			}
-
-			TextMetrics {
-				id: bodyPreviewMetrics
-
-				elide: Text.ElideRight
-				elideWidth: bodyPreview.width
-				font: bodyPreview.font
-				text: root.modelData.body
-			}
-
-			CustomText {
-				id: body
-
-				anchors.left: summary.left
-				anchors.right: expandBtn.left
-				anchors.rightMargin: Tokens.spacing.small
-				anchors.top: summary.bottom
-				animate: true
-				color: Colors.palette.m3onSurfaceVariant
-				height: text ? implicitHeight : 0
-				font: Tokens.font.body.medium
-				opacity: root.expanded ? 1 : 0
-				text: root.modelData.body
-				textFormat: Text.MarkdownText
-				wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-
-				Behavior on opacity {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-
-				onLinkActivated: link => {
-					if (!root.expanded)
-						return;
-
-					Quickshell.execDetached(["app2unit", "-O", "--", link]);
-					root.modelData.popup = false;
-				}
-			}
-
-			ButtonRow {
-				id: actions
-
-				anchors.left: parent.left
-				anchors.right: parent.right
-				anchors.top: body.bottom
-				anchors.topMargin: Tokens.spacing.small
-				opacity: root.expanded ? 1 : 0
-				spacing: Tokens.spacing.extraSmall
-
-				Behavior on opacity {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-
-				IconButton {
-					enabled: root.expanded
-					fillWidth: root.modelData.actions.length === 0
-					icon: "close"
-					font: Tokens.font.icon.builders.small.size(14).build()
-					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
-					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
-					isRound: true
-					padding: Tokens.padding.extraSmall
-					shapeMorph: true
-
-					onClicked: root.modelData.close()
-				}
-
-				Repeater {
-					model: root.modelData.actions
-
-					TextButton {
-						required property var modelData
-
-						enabled: root.expanded
-						fillWidth: true
-						implicitWidth: label.implicitWidth
-						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
-						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
-						isRound: true
-						label.anchors.centerIn: undefined
-						label.anchors.left: left
-						label.anchors.margins: Tokens.padding.small
-						label.anchors.right: right
-						label.anchors.verticalCenter: verticalCenter
-						label.elide: Text.ElideRight
-						label.horizontalAlignment: Text.AlignHCenter
-						shapeMorph: true
-						text: modelData.text
-
-						onClicked: modelData.invoke()
-					}
-				}
-
-				IconButton {
-					enabled: root.expanded
-					fillWidth: root.modelData.actions.length === 0
-					icon: copyTimer.running ? "inventory" : "content_copy"
-					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
-					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
-					isRound: true
-					label.animate: true
-					padding: Tokens.padding.extraSmall
-					shapeMorph: true
-					font: Tokens.font.icon.builders.small.size(14).build()
-
-					onClicked: {
-						Quickshell.clipboardText = root.modelData.body;
-						copyTimer.restart();
-					}
-
-					Timer {
-						id: copyTimer
-
-						interval: 3000
-					}
-				}
-			}
-		}
-	}
-}

Modules/Notifications/Wrapper.qml

@@ -8,6 +8,7 @@ Item {
 	required property Item panels
 	required property Item sidebarPanel
 	required property ScreenState screenState
+	required property int topPadding
 
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth
@@ -18,5 +19,6 @@ Item {
 
 		panels: root.panels
 		screenState: root.screenState
+		topPadding: root.topPadding
 	}
 }

Modules/Osd/Wrapper.qml

@@ -18,7 +18,7 @@ Item {
 	property real offsetScale: shouldBeActive ? 0 : 1
 	required property ShellScreen screen
 	readonly property bool shouldBeActive: screenState.osd && Config.osd.enabled && !(screenState.utilities && Config.utilities.enabled)
-	property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0
+	property real sidebarOffset: sidebarOrSessionVisible ? 0 : 0
 	required property bool sidebarOrSessionVisible
 	property bool sourceMuted
 	property real sourceVolume

Modules/Resources/Cards/BatteryTank.qml

@@ -16,8 +16,7 @@ ClipRect {
 	radius: Tokens.rounding.largeIncreased
 
 	Behavior on animPerc {
-		Anim {
+		Anim {}
-		}
 	}
 
 	Contents {

Modules/Resources/Cards/HeroCard.qml

@@ -21,6 +21,8 @@ CustomRect {
 	implicitWidth: ZUtils.snapCeil(450, root)
 	radius: Tokens.rounding.largeIncreased
 
+	objectName: "card-rect"
+
 	ClipRect {
 		anchors.fill: parent
 		radius: parent.radius
@@ -93,6 +95,8 @@ CustomRect {
 		anchors.left: parent.left
 		anchors.margins: Tokens.padding.largeIncreased
 
+		objectName: "progress-layout"
+
 		spacing: Tokens.spacing.extraSmall
 		orientation: Qt.Vertical
 
@@ -114,7 +118,7 @@ CustomRect {
 
 		CustomProgressBar {
 			fgColor: root.accent
-			implicitHeight: Tokens.padding.small
+			implicitHeight: Tokens.padding.extraSmall
 			indeterminate: isNaN(root.usage) || isNaN(root.temperature)
 			value: root.temperature / 100
 		}

Modules/Resources/Cards/MemoryCard.qml

@@ -62,8 +62,8 @@ CustomRect {
 			}
 
 			SnapLayout {
-orientation: Qt.Vertical
 				id: usageColumn
+				orientation: Qt.Vertical
 
 				anchors.centerIn: parent
 				anchors.verticalCenterOffset: Tokens.padding.extraSmall

Modules/Resources/Cards/NetworkCard.qml

@@ -51,7 +51,7 @@ CustomRect {
 				id: sparkline
 
 				property bool initialized: false
-				property real smoothMax: targetMax
+				property real smoothMax: targetMax * 1.6
 				property real targetMax: 1024
 
 				anchors.fill: parent
@@ -74,7 +74,7 @@ CustomRect {
 				Component.onCompleted: {
 					sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024);
 
-					sparkline.smoothMax = Qt.binding(() => sparkline.targetMax);
+					sparkline.smoothMax = Qt.binding(() => sparkline.targetMax * 1.6);
 
 					sparkline.initialized = true;
 				}

Modules/Resources/Wrapper.qml

@@ -28,8 +28,7 @@ Item {
 
 	Behavior on offsetScale {
 		Anim {
-			duration: Tokens.anim.durations.expressiveDefaultSpatial
+			type: Anim.DefaultSpatial
-			easing: Tokens.anim.expressiveDefaultSpatial
 		}
 	}
 

Modules/Settings/Common/ConnectedRect.qml

@@ -22,8 +22,7 @@ CustomRect {
 	topRightRadius: first ? Tokens.rounding.largeIncreased : Tokens.rounding.extraSmall
 
 	Behavior on opacity {
-		Anim {
+		Anim {}
-		}
 	}
 
 	CustomRect {

Modules/Settings/Common/PageBase.qml

@@ -9,7 +9,6 @@ import ZShell.Config
 import qs.Services
 
 SnapLayout {
-orientation: Qt.Vertical
 	id: root
 
 	property bool animateScroll: false
@@ -69,6 +68,7 @@ orientation: Qt.Vertical
 	}
 
 	spacing: Tokens.spacing.largeIncreased
+	orientation: Qt.Vertical
 
 	Component.onCompleted: applySearchAnchor()
 

Modules/Settings/Common/SectionHeader.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Components
 import ZShell.Config
 import qs.Components
 import qs.Services
@@ -10,7 +11,7 @@ CustomText {
 	Layout.bottomMargin: Tokens.spacing.extraSmall
 	Layout.fillWidth: true
 	Layout.leftMargin: Tokens.padding.extraSmall
-	Layout.topMargin: first ? 0 : Tokens.spacing.largeIncreased - ((parent as ColumnLayout).spacing ?? 0)
+	Layout.topMargin: first ? 0 : Tokens.spacing.largeIncreased - ((parent as SnapLayout).spacing ?? 0)
 	color: Colors.palette.m3onSurfaceVariant
 	elide: Text.ElideRight
 	font: Tokens.font.label.medium