Merge branch 'feat/task-runner-ci'

Reviewed-on: #164

-a

@@ -1,3 +0,0 @@
-
-#omz revision: d2b7f557cceaddb16ba89bbf8200d8a8df35c4d8
-#omz fpath: /home/zach/.oh-my-zsh/plugins/colored-man-pages /home/zach/.oh-my-zsh/plugins/universalarchive /home/zach/.oh-my-zsh/plugins/tldr /home/zach/.oh-my-zsh/plugins/extract /home/zach/.oh-my-zsh/plugins/copypath /home/zach/.oh-my-zsh/plugins/cp /home/zach/.oh-my-zsh/plugins/conda-env /home/zach/.oh-my-zsh/plugins/command-not-found /home/zach/.oh-my-zsh/plugins/dirhistory /home/zach/.oh-my-zsh/plugins/copybuffer /home/zach/.oh-my-zsh/plugins/copyfile /home/zach/.oh-my-zsh/custom/plugins/fast-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-autosuggestions /home/zach/.oh-my-zsh/plugins/archlinux /home/zach/.oh-my-zsh/plugins/web-search /home/zach/.oh-my-zsh/plugins/sudo /home/zach/.oh-my-zsh/plugins/git /home/zach/.oh-my-zsh/functions /home/zach/.oh-my-zsh/completions /home/zach/.oh-my-zsh/custom/functions /home/zach/.oh-my-zsh/custom/completions /home/zach/tools/ripgrep/complete /home/linuxbrew/.linuxbrew/share/zsh/site-functions /home/zach/.oh-my-zsh/plugins/colored-man-pages /home/zach/.oh-my-zsh/plugins/universalarchive /home/zach/.oh-my-zsh/plugins/tldr /home/zach/.oh-my-zsh/plugins/extract /home/zach/.oh-my-zsh/plugins/copypath /home/zach/.oh-my-zsh/plugins/cp /home/zach/.oh-my-zsh/plugins/conda-env /home/zach/.oh-my-zsh/plugins/command-not-found /home/zach/.oh-my-zsh/plugins/dirhistory /home/zach/.oh-my-zsh/plugins/copybuffer /home/zach/.oh-my-zsh/plugins/copyfile /home/zach/.oh-my-zsh/custom/plugins/fast-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-autosuggestions /home/zach/.oh-my-zsh/plugins/archlinux /home/zach/.oh-my-zsh/plugins/web-search /home/zach/.oh-my-zsh/plugins/sudo /home/zach/.oh-my-zsh/plugins/git /home/zach/.oh-my-zsh/functions /home/zach/.oh-my-zsh/completions /home/zach/.oh-my-zsh/custom/functions /home/zach/.oh-my-zsh/custom/completions /home/zach/.oh-my-zsh/cache/completions /home/zach/tools/ripgrep/complete /home/linuxbrew/.linuxbrew/share/zsh/site-functions /usr/local/share/zsh/site-functions /usr/share/zsh/site-functions /usr/share/zsh/functions/Calendar /usr/share/zsh/functions/Chpwd /usr/share/zsh/functions/Completion /usr/share/zsh/functions/Completion/Base /usr/share/zsh/functions/Completion/Linux /usr/share/zsh/functions/Completion/Unix /usr/share/zsh/functions/Completion/X /usr/share/zsh/functions/Completion/Zsh /usr/share/zsh/functions/Exceptions /usr/share/zsh/functions/MIME /usr/share/zsh/functions/Math /usr/share/zsh/functions/Misc /usr/share/zsh/functions/Newuser /usr/share/zsh/functions/Prompts /usr/share/zsh/functions/TCP /usr/share/zsh/functions/VCS_Info /usr/share/zsh/functions/VCS_Info/Backends /usr/share/zsh/functions/Zftp /usr/share/zsh/functions/Zle /home/zach/.zfunc

.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 {} +
-                  git diff --exit-code && echo "clang-format: passed"
+                    -exec clang-format --dry-run -Werror --style=file {} +
 
-    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
-              run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
-
-            - 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
+            - name: Cache CMake build
+              uses: actions/cache@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 | \
-                    grep -v 'Suppressed\|non-user\|non-system\|unknown argument.*mno-direct\|Found compiler error\|warnings generated\.\|^Use -header-filter'
+                  run-clang-tidy -p build -j "$(nproc)" \
+                      -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 }}-build-
-                      rust-
+                      rust-${{ runner.os }}-cargo-
 
-            - name: Install tools
+            - name: Clippy (with compile check)
               run: |
-                  apk add --no-cache \
-                    git \
-                    cargo \
-                    rust
-
-            - name: Cargo check
-              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
+                  manifests=$(find . \( -name .cargo -o -name .git -o -name target \) -prune -o -name Cargo.toml -print)
+                  if [ -z "$manifests" ]; then
+                    if [ -n "$(find . \( -name .cargo -o -name target \) -prune -o -name '*.rs' -print -quit)" ]; then
+                      echo "Rust files found but no Cargo.toml"
+                      exit 1
+                    fi
                     echo "No Rust project found"
+                    exit 0
                   fi
-
-    fmt:
-        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-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
+                  status=0
+                  for manifest in $manifests; do
+                    if (cd "$(dirname "$manifest")" && cargo clippy --all-targets --locked -- -D warnings); then
+                      echo "$manifest: Clippy passed"
+                    else
+                      echo "$manifest: Clippy failed"
+                      status=1
+                    fi
+                  done
+                  exit $status
 
             - name: Format check
               run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    status=0
-                    for manifest in $(find . -name "Cargo.toml"); do
-                      cargo fmt --manifest-path "$manifest" --check && \
-                        echo "$manifest: formatting OK" || \
-                        { echo "$manifest: needs formatting"; status=1; }
-                    done
-                    exit $status
-                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
-                    echo "Rust files found but no Cargo.toml"
-                    exit 1
-                  else
-                    echo "No Rust project found"
-                  fi
-
-    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
+                  manifests=$(find . \( -name .cargo -o -name .git -o -name target \) -prune -o -name Cargo.toml -print)
+                  if [ -z "$manifests" ]; then
+                    if [ -n "$(find . \( -name .cargo -o -name target \) -prune -o -name '*.rs' -print -quit)" ]; then
+                      echo "Rust files found but no Cargo.toml"
+                      exit 1
+                    fi
                     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
-				centerY: root.size / 2
+				centerX: root.centerX
+				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
-		y: root.size / 2 + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2
+		// Rounded in local device pixels: the dot's own size is a whole even
+		// 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/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/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 QtQuick
-import ZShell
+import ZShell.Services
 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: []
-	property bool loaded
-	readonly property list<Notif> notClosed: list.filter(n => !n.closed)
-	readonly property list<Notif> popups: list.filter(n => n.popup)
-	property alias server: server
+	readonly property alias groups: store.groups
+	property alias list: store.rows
+	readonly property alias popupGroups: store.popupGroups
+	readonly property list<NotificationRow> notClosed: store.rows.filter(n => !n.closed)
+	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;
-
-			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;
+			store.insert(notif, root.shouldThrottle(notif.appName));
 		}
 	}
 
@@ -130,16 +78,12 @@ Singleton {
 		description: "Clear all notifications"
 		name: "clearnotifs"
 
-		onPressed: {
-			for (const notif of root.list.slice())
-				notif.close();
-		}
+		onPressed: store.clear()
 	}
 
 	IpcHandler {
 		function clear(): void {
-			for (const notif of root.list.slice())
-				notif.close();
+			store.clear();
 		}
 
 		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 {
-		id: singleHandler
-
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-		dragThreshold: 0
-		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;
-				}
+	onContainsMouseChanged: {
+		if (!containsMouse) {
+			if (!osdShortcutActive) {
+				screenState.osd = false;
+				panels.osd.hovered = false;
 			}
 
-			if (root.geometry.insetTop(root.borderThickness) > pressY && (Config.dashboard.showOnHover || !inDashboard)) {
-				if (dragY > 20) {
-					root.screenState.settings = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
-					root.screenState.settings = false;
-					root.singleGestureTriggered = true;
-				}
+			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
+				popouts.hasCurrent = false;
 			}
 
-			if (pressY > root.screen.height - root.geometry.insetBottom(root.borderThickness) && pressX < root.screen.width / 5 && dragY < -50)
-				root.screenState.clipboard = true;
+			if (Config.bar.autoHide || bar.fullscreen)
+				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 (dragY < -10) {
-					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;
-			}
+			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;
 
-	PointHandler {
-		id: drawingHandler
+		if (screenState.isDrawing && !inLeftPanel(panels.drawing, x, y)) {
+			input.z = 2;
+			panels.drawing.collapse();
+		}
 
-		property bool setInitialPoint: false
+		if (root.bar.fullscreen && !root.bar.isHovered)
+			unhideTimer.start();
 
-		acceptedButtons: Qt.LeftButton | Qt.RightButton
-		enabled: root.screenState.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
+		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
+			screenState.launcher = true;
 
-		onActiveChanged: {
-			if (!active) {
-				setInitialPoint = false;
-				root.drawing.content.endStroke();
-			} else {
-				root.panels.drawing.collapse();
+		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;
 			}
 		}
-		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) {
-				root.drawing.content.clear();
-				return;
+		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;
 			}
-			if (x === 0 && y === 0 && origX === 0 && origY === 0)
-				return;
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
 
-			if (!setInitialPoint) {
-				setInitialPoint = true;
-				root.drawing.content.beginStroke(origX, origY);
-				return;
+			if (!osdShortcutActive) {
+				screenState.osd = showOsd;
+				panels.osd.hovered = showOsd;
+			} 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() {
-			if (!root.screenState.isDrawing)
-				root.drawing.clear();
+		function onIsDrawingChanged(): void {
+			if (root.screenState.isDrawing) {
+				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
-			anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
+			x: ZUtils.snap((parent.width - implicitWidth) / 2, settings)
+			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 {}
 		}
 	}
 

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 {

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.topMargin: Tokens.padding.smaller
+		// anchors.top: opacity === 1 ? parent.top : undefined
+		// 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 {
-	}
-	popExit: NoAnim {
-	}
-	pushEnter: NoAnim {
-	}
-	pushExit: NoAnim {
-	}
+	popEnter: NoAnim {}
+	popExit: 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
-	implicitWidth: nonAnimWidth
+	implicitHeight: ZUtils.snap(nonAnimHeight, root)
+	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/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/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

@@ -53,24 +53,10 @@ Item {
 			lock: root.lock
 		}
 
-		SnapLayout {
+		NotifDock {
 			Layout.fillWidth: true
-
-			spacing: Tokens.spacing.medium
-			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
-				}
-			}
+			Layout.fillHeight: true
+			lock: root.lock
 		}
 	}
 }

Modules/Lock/NotifDock.qml

@@ -6,8 +6,10 @@ 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
@@ -23,7 +25,6 @@ CustomRect {
 	topRightRadius: Tokens.rounding.largeIncreased
 
 	SnapLayout {
-		orientation: Qt.Vertical
 		anchors.fill: parent
 		anchors.margins: Tokens.padding.large
 
@@ -35,7 +36,7 @@ CustomRect {
 			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")
+			text: NotifServer.notClosed.length > 0 ? qsTr("%1 notification%2").arg(NotifServer.notClosed.length).arg(NotifServer.notClosed.length === 1 ? "" : "s") : qsTr("Notifications")
 		}
 
 		Item {
@@ -45,29 +46,26 @@ CustomRect {
 			Loader {
 				active: opacity > 0
 				anchors.centerIn: parent
-				opacity: NotifServer.list.length > 0 ? 0 : 1
+				opacity: NotifServer.notClosed.length > 0 ? 0 : 1
 
 				Behavior on opacity {
 					Anim {
 						duration: Tokens.anim.durations.extraLarge
 					}
 				}
-				sourceComponent: SnapLayout {
-					orientation: Qt.Vertical
-					spacing: Tokens.spacing.largeIncreased
-
-					CustomText {
-						Layout.alignment: Qt.AlignHCenter
-						color: Colors.palette.m3outlineVariant
-						font: Tokens.font.headline.builders.small.width(90).build()
-						text: qsTr("No Notifications")
-					}
+				sourceComponent: CustomText {
+					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 {
@@ -85,7 +83,7 @@ CustomRect {
 						to: 1
 					}
 				}
-				delegate: NotifGroup {}
+				delegate: NotifRow {}
 				displaced: Transition {
 					Anim {
 						properties: "opacity,scale"
@@ -99,10 +97,7 @@ CustomRect {
 					}
 				}
 				model: ScriptModel {
-					values: {
-						const list = NotifServer.notClosed.map(n => [n.appName, null]);
-						return [...new Map(list).keys()];
-					}
+					values: [...NotifServer.groups].filter(g => g.count > 0)
 				}
 				move: Transition {
 					Anim {
@@ -130,4 +125,51 @@ CustomRect {
 			}
 		}
 	}
+
+	component NotifRow: Item {
+		id: row
+
+		required property NotificationGroup modelData
+		property bool expanded: false
+
+		function dismissAll(): void {
+			for (const n of [...modelData.activeNotifs])
+				n.dismiss();
+		}
+
+		implicitHeight: card.implicitHeight
+		implicitWidth: list.width
+
+		NotifSwipeArea {
+			id: area
+
+			implicitHeight: card.implicitHeight
+			implicitWidth: row.implicitWidth
+
+			expanded: row.expanded
+			onDismissed: row.dismissAll()
+			onRequestExpand: expand => row.expanded = expand
+			onSwiped: row.dismissAll()
+
+			Item {
+				anchors.top: parent.top
+
+				implicitHeight: card.implicitHeight
+				implicitWidth: row.implicitWidth
+
+				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/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 (count === 0)
+		if (list.count === 0)
 			return 0;
 
-		let height = (count - 1) * Tokens.spacing.small;
-		for (let i = 0; i < count; i++)
-			height += (list.itemAtIndex(i) as NotifWrapper)?.nonAnimHeight ?? 0;
+		let height = list.layoutHeight;
 
 		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 {
-			id: list
+		KineticFlickable {
+			id: view
 
 			anchors.fill: parent
-			cacheBuffer: (QsWindow.window as QsWindow)?.screen.height ?? 0
-			orientation: Qt.Vertical
-			spacing: 0
 
-			delegate: NotifWrapper {}
-			displaced: Transition {
-				Anim {
-					property: "y"
-				}
-			}
-			model: ScriptModel {
-				values: {
-					const popups = NotifServer.popups.filter(n => !n.closed);
+			contentHeight: list.implicitHeight
+			contentWidth: width
+			flickableDirection: Flickable.VerticalFlick
 
-					if (!Config.notifs.showInFullscreen) {
-						if (Hypr.monitorFor(root.panels.screen).activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false)
-							return [];
+			LazyListView {
+				id: list
+
+				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 int index
-		required property NotifServer.Notif modelData
-		readonly property alias nonAnimHeight: notif.nonAnimHeight
+		required property NotificationGroup modelData
+		property bool expanded: Config.notifs.openExpanded
+		readonly property bool holding: area.containsMouse || area.pressed || card.rowPressed
 
-		implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Tokens.spacing.small)
-		implicitWidth: notif.implicitWidth
-
-		ListView.onRemove: removeAnim.start()
-		onIndexChanged: {
-			if (index !== -1)
-				idx = index;
+		function forEachPopup(fn: var): void {
+			for (const n of [...card.notifs])
+				fn(n);
 		}
 
-		SequentialAnimation {
-			id: removeAnim
-
-			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
-			}
+		function holdPopups(): void {
+			forEachPopup(n => n.holdPopup());
 		}
 
-		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 {
-				id: notif
+			implicitWidth: area.implicitWidth
+			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
-			easing: Tokens.anim.expressiveDefaultSpatial
+			type: Anim.DefaultSpatial
 		}
 	}
 

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

Modules/Settings/Pages/Apps/AllApps.qml

@@ -18,10 +18,12 @@ PageBase {
 	title: qsTr("All apps")
 
 	SnapLayout {
-orientation: Qt.Vertical
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
+
 		spacing: Tokens.spacing.extraSmall / 2
+		orientation: Qt.Vertical
+
 		width: root.cappedWidth
 
 		Repeater {
@@ -54,6 +56,7 @@ orientation: Qt.Vertical
 					anchors.leftMargin: Tokens.padding.largeIncreased
 					anchors.margins: Tokens.padding.small
 					anchors.rightMargin: Tokens.padding.largeIncreased
+
 					spacing: Tokens.spacing.medium
 
 					IconImage {
@@ -63,8 +66,9 @@ orientation: Qt.Vertical
 					}
 
 					SnapLayout {
-orientation: Qt.Vertical
 						Layout.fillWidth: true
+
+						orientation: Qt.Vertical
 						spacing: 0
 
 						CustomText {

Modules/Settings/Pages/PanelsPage.qml

@@ -1,4 +1,4 @@
-import QtQuick.Layouts
+import QtQuick
 import ZShell.Components
 import ZShell.Config
 import qs.Modules.Settings.Common
@@ -9,9 +9,11 @@ PageBase {
 	title: qsTr("Panels")
 
 	SnapLayout {
-orientation: Qt.Vertical
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
+
+		orientation: Qt.Vertical
+
 		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 

Modules/Sidebar/Notif.qml

@@ -1,198 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import ZShell.Config
-import qs.Components
-import qs.Services
-import qs.Daemons
-import ZShell.Components
-
-CustomRect {
-	id: root
-
-	readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null
-	required property bool expanded
-	required property NotifServer.Notif modelData
-	readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + Tokens.padding.medium * 2 : summaryHeightMetrics.height
-	required property ScreenState screenState
-
-	color: {
-		const c = root.modelData?.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2);
-		return expanded ? c : Qt.alpha(c, 0);
-	}
-	implicitHeight: nonAnimHeight
-	radius: Tokens.rounding.large - Tokens.padding.small
-	state: expanded ? "expanded" : ""
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-	states: State {
-		name: "expanded"
-
-		PropertyChanges {
-			compactBody.anchors.margins: Tokens.padding.medium
-			dummySummary.anchors.margins: Tokens.padding.medium
-			expandedContent.anchors.margins: Tokens.padding.medium
-			summary.anchors.margins: Tokens.padding.medium
-			summary.maximumLineCount: Number.MAX_SAFE_INTEGER
-			summary.width: root.width - Tokens.padding.medium * 2 - timeStr.implicitWidth - Tokens.spacing.small
-			timeStr.anchors.margins: Tokens.padding.medium
-		}
-	}
-	transitions: Transition {
-		Anim {
-			properties: "margins,width,maximumLineCount"
-		}
-	}
-
-	TextMetrics {
-		id: summaryHeightMetrics
-
-		font: summary.font
-		text: " " // Use this height to prevent weird characters from changing the line height
-	}
-
-	CustomText {
-		id: summary
-
-		anchors.left: parent.left
-		anchors.top: parent.top
-		color: root.modelData?.urgency === "critical" ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
-		elide: Text.ElideRight
-		maximumLineCount: 1
-		text: root.modelData?.summary ?? ""
-		width: parent.width
-		wrapMode: Text.WordWrap
-	}
-
-	CustomText {
-		id: dummySummary
-
-		anchors.left: parent.left
-		anchors.top: parent.top
-		text: root.modelData?.summary ?? ""
-		visible: false
-	}
-
-	WrappedLoader {
-		id: compactBody
-
-		anchors.left: dummySummary.right
-		anchors.leftMargin: Tokens.spacing.small
-		anchors.right: parent.right
-		anchors.top: parent.top
-		shouldBeActive: !root.expanded
-
-		sourceComponent: CustomText {
-			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline
-			elide: Text.ElideRight
-			text: String(root.modelData?.body ?? "").replace(/\n/g, " ")
-		}
-	}
-
-	WrappedLoader {
-		id: timeStr
-
-		anchors.right: parent.right
-		anchors.top: parent.top
-		shouldBeActive: root.expanded
-
-		sourceComponent: CustomText {
-			animate: true
-			color: Colors.palette.m3outline
-			text: root.modelData?.timeStr ?? ""
-		}
-	}
-
-	WrappedLoader {
-		id: expandedContent
-
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.top: summary.bottom
-		anchors.topMargin: Tokens.spacing.extraSmall
-		shouldBeActive: root.expanded
-
-		sourceComponent: ExpandedBody {}
-	}
-
-	component ExpandedBody: SnapLayout {
-		readonly property alias body: bodyText
-
-		spacing: Tokens.spacing.medium
-		orientation: Qt.Vertical
-
-		CustomText {
-			id: bodyText
-
-			Layout.fillWidth: true
-			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface
-			text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
-			textFormat: Text.MarkdownText
-			wrapMode: Text.WordWrap
-
-			onLinkActivated: link => {
-				Qt.openUrlExternally(link);
-				root.screenState.sidebar = false;
-			}
-		}
-
-		NotifActionList {
-			notif: root.modelData
-		}
-	}
-	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.active: true
-				comp.opacity: 1
-			}
-		}
-		transitions: [
-			Transition {
-				from: ""
-				to: "active"
-
-				SequentialAnimation {
-					PropertyAction {
-						property: "active"
-					}
-
-					Anim {
-						property: "opacity"
-						type: Anim.DefaultEffects
-					}
-				}
-			},
-			Transition {
-				from: "active"
-				to: ""
-
-				SequentialAnimation {
-					Anim {
-						property: "opacity"
-						type: Anim.DefaultEffects
-					}
-
-					PropertyAction {
-						property: "active"
-					}
-				}
-			}
-		]
-	}
-}

Modules/Sidebar/NotifActionList.qml

@@ -1,126 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
-import ZShell.Config
-import ZShell.Components
-import qs.Components
-import qs.Effects
-import qs.Services
-import qs.Daemons
-
-Item {
-	id: root
-
-	required property NotifServer.Notif notif
-
-	Layout.fillWidth: true
-	implicitHeight: actionList.implicitHeight
-
-	SnapLayout {
-		id: actionList
-
-		anchors.fill: parent
-		spacing: Tokens.spacing.extraSmall
-
-		Repeater {
-			model: [
-				{
-					isClose: true
-				},
-				...(root.notif?.actions ?? []),
-				{
-					isCopy: true
-				}
-			]
-
-			CustomRect {
-				id: action
-
-				required property var modelData
-
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-				Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? Tokens.padding.large : 0)
-				color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 4)
-				implicitHeight: actionInner.implicitHeight + Tokens.padding.small
-				implicitWidth: actionInner.implicitWidth + Tokens.padding.medium * 2
-				radius: actionStateLayer.pressed ? Tokens.rounding.medium / 2 : Tokens.rounding.large
-
-				Behavior on Layout.preferredWidth {
-					Anim {
-						type: Anim.FastSpatial
-					}
-				}
-				Behavior on radius {
-					Anim {
-						type: Anim.FastSpatial
-					}
-				}
-
-				Timer {
-					id: copyTimer
-
-					interval: 3000
-
-					onTriggered: actionInner.item.text = "content_copy"
-				}
-
-				StateLayer {
-					id: actionStateLayer
-
-					onClicked: {
-						if (action.modelData.isClose) {
-							root.notif.close();
-						} else if (action.modelData.isCopy) {
-							Quickshell.clipboardText = root.notif.body;
-							actionInner.item.text = "inventory";
-							copyTimer.start();
-						} else if (action.modelData.invoke) {
-							action.modelData.invoke();
-						} else if (!root.notif.resident) {
-							root.notif.close();
-						}
-					}
-				}
-
-				Loader {
-					id: actionInner
-
-					anchors.centerIn: parent
-					sourceComponent: action.modelData.isClose || action.modelData.isCopy ? iconBtn : root.notif?.hasActionIcons ? iconComp : textComp
-				}
-
-				Component {
-					id: iconBtn
-
-					MaterialIcon {
-						animate: action.modelData.isCopy ?? false
-						color: Colors.palette.m3onSurfaceVariant
-						text: action.modelData.isCopy ? "content_copy" : "close"
-					}
-				}
-
-				Component {
-					id: iconComp
-
-					IconImage {
-						asynchronous: true
-						source: Quickshell.iconPath(action.modelData.identifier)
-					}
-				}
-
-				Component {
-					id: textComp
-
-					CustomText {
-						color: Colors.palette.m3onSurfaceVariant
-						text: action.modelData.text
-					}
-				}
-			}
-		}
-	}
-}

Modules/Sidebar/NotifDock.qml

@@ -7,100 +7,113 @@ import QtQuick.Layouts
 import ZShell.Components
 import ZShell.Config
 import qs.Components
-import qs.Modules
 import qs.Daemons
+import qs.Modules
 import qs.Services
 
 Item {
 	id: root
 
-	readonly property int notifCount: NotifServer.list.reduce((acc, n) => n.closed ? acc : acc + 1, 0)
 	required property ScreenState screenState
+	readonly property int notifCount: NotifServer.notClosed.length
 
 	anchors.fill: parent
 	anchors.margins: Tokens.padding.small
 
-	Component.onCompleted: NotifServer.list.forEach(n => n.popup = false)
+	Component.onCompleted: NotifServer.list.forEach(n => n.dismissPopup())
 
 	Item {
 		id: title
 
-		anchors.left: parent.left
-		anchors.margins: 4
-		anchors.right: parent.right
 		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.margins: Tokens.padding.extraSmall
+
 		implicitHeight: Math.max(count.implicitHeight, titleText.implicitHeight)
 
 		CustomText {
 			id: count
 
+			anchors.verticalCenter: parent.verticalCenter
 			anchors.left: parent.left
 			anchors.leftMargin: root.notifCount > 0 ? 0 : -width - titleText.anchors.leftMargin
-			anchors.verticalCenter: parent.verticalCenter
+			opacity: root.notifCount > 0 ? 1 : 0
+
+			text: root.notifCount
 			color: Colors.palette.m3outline
 			font: Tokens.font.label.large
-			opacity: root.notifCount > 0 ? 1 : 0
-			text: root.notifCount
 
 			Behavior on anchors.leftMargin {
 				Anim {}
 			}
+
 			Behavior on opacity {
-				Anim {}
+				Anim {
+					type: Anim.DefaultEffects
+				}
 			}
 		}
 
 		CustomText {
 			id: titleText
 
-			anchors.left: count.right
-			anchors.leftMargin: 7
-			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			color: Colors.palette.m3outline
-			elide: Text.ElideRight
-			font: Tokens.font.label.large
+			anchors.left: count.right
+			anchors.right: parent.right
+			anchors.leftMargin: Tokens.spacing.extraSmall
+
 			text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
+			color: Colors.palette.m3outline
+			font: Tokens.font.label.large
+			elide: Text.ElideRight
 		}
 	}
 
 	Item {
 		id: clipRect
 
-		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: title.bottom
-		anchors.topMargin: 10
+		anchors.bottom: parent.bottom
+		anchors.topMargin: Tokens.spacing.medium
+
+		clip: true
 
 		Loader {
-			active: opacity > 0
+			asynchronous: true
 			anchors.centerIn: parent
+			active: opacity > 0
 			opacity: root.notifCount > 0 ? 0 : 1
 
-			Behavior on opacity {
-				Anim {}
-			}
 			sourceComponent: SnapLayout {
-				spacing: 20
 				orientation: Qt.Vertical
+				spacing: Tokens.spacing.extraLarge
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
+					text: qsTr("No notifications")
 					color: Colors.palette.m3outlineVariant
 					font: Tokens.font.headline.builders.small.width(90).build()
-					text: qsTr("No Notifications")
+				}
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.StandardExtraLarge
 				}
 			}
 		}
 
-		CustomFlickable {
+		KineticFlickable {
 			id: view
 
 			anchors.fill: parent
-			contentHeight: notifList.implicitHeight
-			contentWidth: width
+
 			flickableDirection: Flickable.VerticalFlick
+			contentWidth: width
+			contentHeight: notifList.implicitHeight
 
 			CustomScrollBar.vertical: CustomScrollBar {
 				flickable: view
@@ -109,8 +122,8 @@ Item {
 			NotifDockList {
 				id: notifList
 
-				container: view
 				screenState: root.screenState
+				container: view
 			}
 		}
 	}
@@ -118,21 +131,19 @@ Item {
 	Timer {
 		id: clearTimer
 
-		interval: Math.max(15, Math.min(80, 69.8 - 12.3 * Math.log(NotifServer.notClosed.length)))
 		repeat: true
 		triggeredOnStart: true
-
+		interval: Math.max(15, Math.min(80, 69.8 - 12.3 * Math.log(NotifServer.notClosed.length)))
 		onTriggered: {
-			const first = NotifServer.notClosed[0];
-			if (!first) {
+			const group = NotifServer.groups[0];
+			if (!group) {
 				stop();
 				return;
 			}
 
-			const appName = first.appName;
 			let cleared = 0;
-			for (const n of NotifServer.notClosed.filter(n => n.appName === appName)) {
-				n.close();
+			for (const n of [...group.activeNotifs]) {
+				n.dismiss();
 				cleared++;
 				if (cleared > 30) {
 					interval = 5;
@@ -143,33 +154,40 @@ Item {
 	}
 
 	Loader {
-		active: opacity > 0
-		anchors.bottom: parent.bottom
-		anchors.margins: Tokens.padding.small
+		asynchronous: true
 		anchors.right: parent.right
-		opacity: root.notifCount > 0 ? 1 : 0
-		scale: root.notifCount > 0 ? 1 : 0.5
+		anchors.bottom: parent.bottom
+		anchors.margins: Tokens.padding.medium
+
+		scale: root.notifCount > 0 ? 1 : 0.5
+		opacity: root.notifCount > 0 ? 1 : 0
+		active: opacity > 0
 
-		Behavior on opacity {
-			Anim {}
-		}
-		Behavior on scale {
-			Anim {}
-		}
 		sourceComponent: IconButton {
 			id: clearBtn
 
-			font: Tokens.font.icon.large
 			icon: "clear_all"
+			font: Tokens.font.icon.large
 			isRound: true
-
 			onClicked: clearTimer.start()
 
 			Elevation {
 				anchors.fill: parent
-				level: clearBtn.stateLayer.containsMouse ? 4 : 3
 				radius: parent.radius
 				z: -1
+				level: clearBtn.stateLayer.containsMouse ? 4 : 3
+			}
+		}
+
+		Behavior on scale {
+			Anim {
+				type: Anim.FastSpatial
+			}
+		}
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
 			}
 		}
 	}

Modules/Sidebar/NotifDockList.qml

@@ -4,8 +4,10 @@ import QtQuick
 import Quickshell
 import ZShell.Components
 import ZShell.Config
-import qs.Daemons
+import ZShell.Services
 import qs.Components
+import qs.Components.Notifs
+import qs.Daemons
 import qs.Services
 
 LazyListView {
@@ -16,121 +18,12 @@ LazyListView {
 
 	anchors.left: parent?.left
 	anchors.right: parent?.right
-	asynchronous: true
-	cacheBuffer: 400
 	implicitHeight: contentHeight
-	readyDelay: 1
-	removeDuration: Tokens.anim.durations.normal
+
 	spacing: Tokens.spacing.small
-	useCustomViewport: true
-	viewport: Qt.rect(0, container.contentY, width, container.height)
-
-	delegate: Component {
-		MouseArea {
-			id: notif
-
-			readonly property bool closed: notifInner.notifCount === 0
-			required property int index
-			required property string modelData
-			property int startY
-
-			function closeAll(): void {
-				clearTimer.start();
-			}
-
-			LazyListView.preferredHeight: closed ? 0 : notifInner.nonAnimHeight
-			LazyListView.trackViewport: !notifInner.expanded && notifInner.nonAnimHeight < notifInner.implicitHeight
-			LazyListView.visibleHeight: notifInner.implicitHeight
-			acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-			cursorShape: pressed ? Qt.ClosedHandCursor : undefined
-			drag.axis: Drag.XAxis
-			drag.target: this
-			enabled: !closed
-			hoverEnabled: true
-			implicitHeight: notifInner.implicitHeight
-			opacity: LazyListView.removing || closed || LazyListView.adding ? 0 : 1
-			preventStealing: true
-			scale: LazyListView.removing || closed ? 0.6 : LazyListView.adding ? 0 : 1
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-			Behavior on scale {
-				Anim {
-				}
-			}
-			Behavior on x {
-				Anim {
-				}
-			}
-			Behavior on y {
-				enabled: notif.LazyListView.ready
-
-				Anim {
-				}
-			}
-
-			onPositionChanged: event => {
-				if (pressed) {
-					const diffY = event.y - startY;
-					if (Math.abs(diffY) > Config.notifs.expandThreshold)
-						notifInner.toggleExpand(diffY > 0);
-				}
-			}
-			onPressed: event => {
-				startY = event.y;
-				if (event.button === Qt.RightButton)
-					notifInner.toggleExpand(!notifInner.expanded);
-				else if (event.button === Qt.MiddleButton)
-					closeAll();
-			}
-			onReleased: event => {
-				if (Math.abs(x) < width * Config.notifs.clearThreshold)
-					x = 0;
-				else
-					closeAll();
-			}
-
-			Timer {
-				id: clearTimer
-
-				interval: 15
-				repeat: true
-				triggeredOnStart: true
-
-				onTriggered: {
-					const notifs = NotifServer.notClosed.filter(n => n.appName === notif.modelData);
-					if (notifs.length === 0) {
-						stop();
-						return;
-					}
-
-					for (const n of notifs.slice(0, 30))
-						n.close();
-				}
-			}
-
-			NotifGroup {
-				id: notifInner
-
-				container: root.container
-				modelData: notif.modelData
-				screenState: root.screenState
-			}
-		}
-	}
-	model: ScriptModel {
-		values: {
-			const map = new Map();
-			for (const n of NotifServer.notClosed)
-				map.set(n.appName, null);
-			for (const n of NotifServer.list)
-				map.set(n.appName, null);
-			return [...map.keys()];
-		}
-	}
+	readyDelay: 1
+	cacheBuffer: 400
+	asynchronous: true
 
 	onViewportAdjustNeeded: d => {
 		if (contentYAnim.running)
@@ -139,10 +32,121 @@ LazyListView {
 		contentYAnim.start();
 	}
 
+	useCustomViewport: true
+	viewport: Qt.rect(0, container.contentY, width, container.height)
+
+	removeDuration: Tokens.anim.durations.normal
+
+	model: ScriptModel {
+		values: [...NotifServer.groups]
+	}
+
+	delegate: Component {
+		NotifSwipeArea {
+			id: notif
+
+			required property int index
+			required property NotificationGroup modelData
+
+			readonly property bool closed: card.notifs.length === 0
+
+			function toggleExpand(expand: bool): void {
+				if (expand) {
+					if (!expanded)
+						root.screenState.expandedNotifs.push(modelData.appName);
+				} else if (expanded) {
+					root.screenState.expandedNotifs.splice(root.screenState.expandedNotifs.indexOf(modelData.appName), 1);
+				}
+			}
+
+			function closeAll(): void {
+				clearTimer.start();
+			}
+
+			Component.onDestruction: {
+				if (closed && expanded)
+					toggleExpand(false);
+			}
+
+			LazyListView.trackViewport: !expanded && card.nonAnimHeight < card.implicitHeight
+			LazyListView.preferredHeight: closed ? 0 : card.nonAnimHeight
+			LazyListView.visibleHeight: card.implicitHeight
+			implicitHeight: card.implicitHeight
+
+			opacity: LazyListView.removing || closed || LazyListView.adding ? 0 : 1
+			scale: LazyListView.adding ? 0 : 1
+
+			expanded: root.screenState.expandedNotifs.includes(modelData.appName)
+			enabled: !closed
+
+			onClosedChanged: {
+				if (closed)
+					slideOut.start();
+			}
+			onRequestExpand: expand => toggleExpand(expand)
+			onSwiped: closeAll()
+			onDismissed: closeAll()
+
+			Anim {
+				id: slideOut
+
+				target: notif
+				property: "x"
+				to: notif.x >= 0 ? notif.width : -notif.width
+			}
+
+			Timer {
+				id: clearTimer
+
+				interval: 15
+				repeat: true
+				triggeredOnStart: true
+				onTriggered: {
+					const notifs = [...notif.modelData.activeNotifs];
+					if (notifs.length === 0) {
+						stop();
+						return;
+					}
+
+					for (const n of notifs.slice(0, 30))
+						n.dismiss();
+				}
+			}
+
+			NotifGroupCard {
+				id: card
+
+				group: notif.modelData
+				container: root.container
+				expanded: notif.expanded
+				baseLayer: 1
+				onRequestExpand: expand => notif.toggleExpand(expand)
+				onSwiped: notif => notif.dismiss()
+				onLinkActivated: root.screenState.sidebar = false
+			}
+
+			Behavior on y {
+				enabled: notif.LazyListView.ready
+
+				Anim {}
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+
+			Behavior on scale {
+				Anim {}
+			}
+		}
+	}
+
 	Anim {
 		id: contentYAnim
 
-		property: "contentY"
 		target: root.container
+		property: "contentY"
 	}
 }

Modules/Sidebar/NotifGroup.qml

@@ -1,251 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Services.Notifications
-import ZShell.Config
-import qs.Components
-import qs.Services
-import qs.Helpers
-import qs.Daemons
-import ZShell.Components
-
-CustomRect {
-	id: root
-
-	readonly property list<var> activeNotifs: notifs.filter(n => !n.closed)
-	readonly property string appIcon: activeNotifs.find(n => n.appIcon.length > 0)?.appIcon ?? ""
-	required property Flickable container
-	readonly property bool expanded: screenState.expandedNotifs.includes(modelData)
-	readonly property string image: activeNotifs.find(n => n.image.length > 0)?.image ?? ""
-	required property string modelData
-	readonly property int nonAnimHeight: {
-		const headerHeight = header.implicitHeight + (root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0);
-		const columnHeight = headerHeight + notifList.layoutHeight;
-		return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + Tokens.padding.small * 2);
-	}
-	readonly property int notifCount: activeNotifs.length
-	readonly property list<var> notifs: NotifServer.list.filter(n => n.appName === modelData)
-	required property ScreenState screenState
-	readonly property int urgency: {
-		if (activeNotifs.find(n => n.urgency === NotificationUrgency.Critical))
-			return NotificationUrgency.Critical;
-		if (activeNotifs.find(n => n.urgency === NotificationUrgency.Normal))
-			return NotificationUrgency.Normal;
-		return NotificationUrgency.Low;
-	}
-
-	function toggleExpand(expand: bool): void {
-		if (expand) {
-			if (!expanded)
-				screenState.expandedNotifs.push(modelData);
-		} else if (expanded) {
-			screenState.expandedNotifs.splice(screenState.expandedNotifs.indexOf(modelData), 1);
-		}
-	}
-
-	anchors.left: parent?.left
-	anchors.right: parent?.right
-	clip: true
-	color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
-	implicitHeight: nonAnimHeight
-	radius: Tokens.rounding.large
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-
-	Component.onDestruction: {
-		if (notifCount === 0 && expanded)
-			screenState.expandedNotifs.splice(screenState.expandedNotifs.indexOf(modelData), 1);
-	}
-
-	SnapLayout {
-		id: content
-
-		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
-		anchors.right: parent.right
-		anchors.top: parent.top
-
-		objectName: "notif-content"
-
-		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)
-					sourceSize: {
-						const size = Config.notifs.sizes.image * ((QsWindow.window as QsWindow)?.devicePixelRatio ?? 1);
-						return Qt.size(size, size);
-					}
-					width: Config.notifs.sizes.image
-				}
-			}
-
-			Component {
-				id: appIconComp
-
-				ColoredIcon {
-					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.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 === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-					text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency)
-				}
-			}
-
-			ClipRect {
-				anchors.fill: parent
-				color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHigh, 3) : Colors.palette.m3secondaryContainer
-				radius: Tokens.rounding.full
-
-				Loader {
-					anchors.centerIn: parent
-					anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0
-					asynchronous: true
-					sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp
-				}
-			}
-
-			Loader {
-				active: root.appIcon && root.image
-				anchors.bottom: parent.bottom
-				anchors.right: parent.right
-				asynchronous: true
-
-				sourceComponent: CustomRect {
-					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3secondaryContainer
-					implicitHeight: Config.notifs.sizes.badge
-					implicitWidth: Config.notifs.sizes.badge
-					radius: Tokens.rounding.full
-
-					ColoredIcon {
-						anchors.centerIn: parent
-						color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.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 {
-			id: column
-
-			Layout.fillWidth: true
-
-			spacing: root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0
-			orientation: Qt.Vertical
-
-			objectName: "notif-column"
-
-			Behavior on spacing {
-				Anim {}
-			}
-
-			SnapLayout {
-				id: header
-
-				Layout.fillWidth: true
-
-				spacing: Tokens.spacing.small
-
-				objectName: "notif-header"
-
-				CustomText {
-					Layout.fillWidth: true
-					color: Colors.palette.m3onSurfaceVariant
-					elide: Text.ElideRight
-					text: root.modelData
-				}
-
-				CustomText {
-					animate: true
-					color: Colors.palette.m3outline
-					text: root.activeNotifs[0]?.timeStr ?? ""
-				}
-
-				CustomRect {
-					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHigh, 3)
-					implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall
-					implicitWidth: expandBtn.implicitWidth + Tokens.padding.large
-					radius: Tokens.rounding.full
-
-					StateLayer {
-						color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
-
-						onClicked: root.toggleExpand(!root.expanded)
-					}
-
-					SnapLayout {
-						id: expandBtn
-
-						anchors.centerIn: parent
-						spacing: Tokens.spacing.extraSmall
-
-						objectName: "notif-expand"
-
-						CustomText {
-							id: groupCount
-
-							Layout.leftMargin: Tokens.padding.extraSmall / 2
-							animate: true
-							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant
-							text: root.notifCount
-						}
-
-						MaterialIcon {
-							Layout.rightMargin: -Tokens.padding.extraSmall / 2
-							Layout.topMargin: root.expanded ? -Math.floor(Tokens.padding.extraSmall) : 0
-							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant
-							rotation: root.expanded ? 180 : 0
-							text: "expand_more"
-
-							Behavior on Layout.topMargin {
-								Anim {}
-							}
-							Behavior on rotation {
-								Anim {}
-							}
-						}
-					}
-				}
-			}
-
-			NotifGroupList {
-				id: notifList
-
-				Layout.fillWidth: true
-
-				container: root.container
-				expanded: root.expanded
-				notifs: root.notifs
-				screenState: root.screenState
-
-				onRequestToggleExpand: expand => root.toggleExpand(expand)
-			}
-		}
-	}
-}

Modules/Sidebar/NotifGroupList.qml

@@ -1,147 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import ZShell.Components
-import ZShell.Config
-import qs.Daemons
-import qs.Components
-import qs.Services
-
-LazyListView {
-	id: root
-
-	required property Flickable container
-	required property bool expanded
-	required property list<var> notifs
-	required property ScreenState screenState
-
-	signal requestToggleExpand(expand: bool)
-
-	asynchronous: true
-	cacheBuffer: 400
-	implicitHeight: contentHeight
-	readyDelay: 1
-	removeDuration: Tokens.anim.durations.normal
-	spacing: Math.round(Tokens.spacing.extraSmall)
-	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);
-	}
-
-	delegate: Component {
-		MouseArea {
-			id: notif
-
-			required property int index
-			required property NotifServer.Notif modelData
-			property int startY
-
-			LazyListView.preferredHeight: modelData?.closed || LazyListView.removing ? 0 : notifInner.nonAnimHeight
-			LazyListView.visibleHeight: modelData?.closed || LazyListView.removing ? 0 : notifInner.implicitHeight
-			acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-			cursorShape: notifInner.body?.hoveredLink ? Qt.PointingHandCursor : pressed ? Qt.ClosedHandCursor : undefined
-			drag.axis: Drag.XAxis
-			drag.target: this
-			enabled: !(modelData?.closed ?? true)
-			hoverEnabled: true
-			implicitHeight: notifInner.implicitHeight
-			opacity: LazyListView.removing || LazyListView.adding ? 0 : 1
-			preventStealing: !root.expanded
-			scale: LazyListView.removing || LazyListView.adding ? 0.7 : 1
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-			Behavior on scale {
-				Anim {}
-			}
-			Behavior on x {
-				Anim {}
-			}
-			Behavior on y {
-				enabled: notif.LazyListView.ready
-
-				Anim {}
-			}
-
-			Component.onCompleted: modelData?.lock(this)
-			Component.onDestruction: modelData?.unlock(this)
-			onPositionChanged: event => {
-				if (pressed && !root.expanded) {
-					const diffY = event.y - startY;
-					if (Math.abs(diffY) > Config.notifs.expandThreshold)
-						root.requestToggleExpand(diffY > 0);
-				}
-			}
-			onPressed: event => {
-				startY = event.y;
-				if (event.button === Qt.RightButton)
-					root.requestToggleExpand(!root.expanded);
-				else if (event.button === Qt.MiddleButton)
-					modelData?.close();
-			}
-			onReleased: event => {
-				if (Math.abs(x) < width * Config.notifs.clearThreshold)
-					x = 0;
-				else
-					modelData?.close();
-			}
-
-			ParallelAnimation {
-				running: notif.modelData?.closed ?? false
-
-				onFinished: notif.modelData?.unlock(notif)
-
-				Anim {
-					property: "opacity"
-					target: notif
-					to: 0
-					type: Anim.DefaultEffects
-				}
-
-				Anim {
-					property: "x"
-					target: notif
-					to: notif.x >= 0 ? notif.width : -notif.width
-				}
-			}
-
-			Notif {
-				id: notifInner
-
-				anchors.fill: parent
-				expanded: root.expanded
-				modelData: notif.modelData
-				screenState: root.screenState
-			}
-		}
-	}
-	model: ScriptModel {
-		values: {
-			if (root.expanded)
-				return root.notifs as Array;
-
-			let count = 0;
-			let i = 0;
-			const previewNum = Config.notifs.groupPreviewNum;
-			while (i < root.notifs.length && count < previewNum) {
-				if (!(root.notifs[i]?.closed ?? true))
-					count++;
-				i++;
-			}
-
-			return root.notifs.slice(0, i) as Array;
-		}
-	}
-
-	TransformWatcher {
-		id: tWatcher
-
-		a: root.container.contentItem
-		b: root
-	}
-}

Modules/Sidebar/Utils/Background.qml

@@ -17,8 +17,7 @@ ShapePath {
 	strokeWidth: -1
 
 	Behavior on fillColor {
-		CAnim {
-		}
+		CAnim {}
 	}
 
 	PathLine {

Plugins/CMakeLists.txt

@@ -6,6 +6,7 @@ find_package(Qt6 REQUIRED COMPONENTS
 	GuiPrivate
 	Quick
 	CanvasPainter
+	CanvasPainterTools
 	QuickPrivate
 	QuickLayouts
 	QuickLayoutsPrivate

Plugins/ZShell/Blobs/blobgroup.cpp

@@ -2,7 +2,17 @@
 #include "blobinvertedrect.hpp"
 #include "blobshape.hpp"
 
-BlobGroup::BlobGroup(QObject* parent) : QObject(parent) {}
+#include <algorithm>
+
+namespace {
+constexpr int k_pumpMs = 16;
+} // namespace
+
+BlobGroup::BlobGroup(QObject* parent) : QObject(parent) {
+	m_physicsPump.setInterval(k_pumpMs);
+	m_physicsPump.setTimerType(Qt::CoarseTimer);
+	connect(&m_physicsPump, &QTimer::timeout, this, &BlobGroup::pumpPhysics);
+}
 
 BlobGroup::~BlobGroup() {
 	for (auto* shape : std::as_const(m_shapes))
@@ -12,6 +22,7 @@ BlobGroup::~BlobGroup() {
 }
 
 void BlobGroup::setSmoothing(qreal s) {
+	if (s < 0.5) s = 0.5;
 	if (qFuzzyCompare(m_smoothing, s)) return;
 	m_smoothing = s;
 	emit smoothingChanged();
@@ -73,7 +84,6 @@ void BlobGroup::markShapeDirty(BlobShape* source) {
 	source->polish();
 	source->update();
 
-	// Use cached padded rects to find spatial neighbors
 	const float pad = static_cast<float>(m_smoothing) * 2.0f;
 	const QRectF srcRect(
 		static_cast<double>(source->m_cachedPaddedX - pad),
@@ -103,6 +113,33 @@ void BlobGroup::markShapeDirty(BlobShape* source) {
 void BlobGroup::ensurePhysicsUpdated() {
 	if (m_physicsUpdated) return;
 	m_physicsUpdated = true;
+	for (auto* shape : std::as_const(m_shapes)) {
+		shape->updatePhysics();
+		if (shape->needsFrame()) {
+			shape->polish();
+			shape->update();
+		}
+	}
+}
+
+void BlobGroup::requestPhysics() {
+	if (!m_physicsPump.isActive()) m_physicsPump.start();
+}
+
+void BlobGroup::pumpPhysics() {
 	for (auto* shape : std::as_const(m_shapes))
 		shape->updatePhysics();
+
+	const bool anyMoving = std::any_of(
+		m_shapes.cbegin(), m_shapes.cend(), [](const BlobShape* shape) {
+			return shape->needsFrame();
+		});
+
+	if (!anyMoving) {
+		m_physicsPump.stop();
+		return;
+	}
+
+	markDirty();
+	m_physicsUpdated = true;
 }

Plugins/ZShell/Blobs/blobgroup.hpp

@@ -4,6 +4,7 @@
 #include <qlist.h>
 #include <qobject.h>
 #include <qqmlengine.h>
+#include <qtimer.h>
 
 class BlobShape;
 class BlobInvertedRect;
@@ -51,16 +52,21 @@ class BlobGroup : public QObject {
 	void markShapeDirty(BlobShape* source);
 	void ensurePhysicsUpdated();
 
+	void requestPhysics();
+
 	signals:
 	void smoothingChanged();
 	void colorChanged();
 	void cornerFillChanged();
 
 	private:
+	void pumpPhysics();
+
 	qreal m_smoothing = 32.0;
 	QColor m_color{0x44, 0x88, 0xff};
 	bool m_cornerFill = true;
 	QList<BlobShape*> m_shapes;
 	BlobInvertedRect* m_invertedRect = nullptr;
 	bool m_physicsUpdated = false;
+	QTimer m_physicsPump;
 };

Plugins/ZShell/Blobs/blobgroup2.cpp

@@ -29,8 +29,15 @@ static float cornerFillFactor(float sd, float smoothFactor) {
 	return std::max(outside, inside);
 }
 
+namespace {
+constexpr int k_pumpMs = 16;
+} // namespace
+
 BlobGroup2::BlobGroup2(QQuickItem* parent) : QQuickItem(parent) {
 	setFlag(ItemHasContents);
+	m_physicsPump.setInterval(k_pumpMs);
+	m_physicsPump.setTimerType(Qt::CoarseTimer);
+	connect(&m_physicsPump, &QTimer::timeout, this, &BlobGroup2::pumpPhysics);
 }
 
 BlobGroup2::~BlobGroup2() {
@@ -41,6 +48,7 @@ BlobGroup2::~BlobGroup2() {
 }
 
 void BlobGroup2::setSmoothing(qreal s) {
+	if (s < 0.5) s = 0.5;
 	if (qFuzzyCompare(m_smoothing, s)) return;
 	m_smoothing = s;
 	emit smoothingChanged();
@@ -101,17 +109,11 @@ void BlobGroup2::clearInvertedRect(BlobInvertedRect2* rect) {
 void BlobGroup2::markDirty() {
 	m_physicsUpdated = false;
 	m_dataBuilt = false;
-	// Physics runs during polish, before the render pass. The panel content is
-	// transformed by deformMatrix from QML, so the matrix has to be final for this
-	// frame; building the data in updatePaintNode would let the transform lag one
-	// frame behind the material.
 	polish();
 	update();
 }
 
 void BlobGroup2::updatePolish() {
-	// The group is the only thing that draws, so it also drives the shapes'
-	// physics.
 	ensureDataBuilt();
 }
 
@@ -122,32 +124,53 @@ void BlobGroup2::ensurePhysicsUpdated() {
 		shape->updatePhysics();
 }
 
+void BlobGroup2::requestPhysics() {
+	if (!m_physicsPump.isActive()) m_physicsPump.start();
+}
+
+void BlobGroup2::pumpPhysics() {
+	for (auto* shape : std::as_const(m_shapes))
+		shape->updatePhysics();
+
+	m_physicsUpdated = true;
+
+	const bool anyMoving = std::any_of(
+		m_shapes.cbegin(), m_shapes.cend(), [](const BlobShape2* shape) {
+			return shape->needsFrame();
+		});
+
+	if (!anyMoving) {
+		m_physicsPump.stop();
+		return;
+	}
+
+	m_dataBuilt = false;
+	polish();
+	update();
+}
+
 void BlobGroup2::ensureDataBuilt() {
 	if (m_dataBuilt) return;
 	ensurePhysicsUpdated();
 
-	// Physics can request the next frame through markDirty(); the data is
-	// refreshed here anyway, so the flag is set after it runs.
 	m_dataBuilt = true;
 	m_data.rects.clear();
 	m_bounds = QRectF();
+	m_data.hasInverted = false;
+	m_data.invertedRadius = 0;
+	memset(m_data.invertedOuter, 0, sizeof(m_data.invertedOuter));
+	memset(m_data.invertedInner, 0, sizeof(m_data.invertedInner));
+	memset(m_data.invertedOuterRadii, 0, sizeof(m_data.invertedOuterRadii));
 
 	const float smoothFactor = static_cast<float>(m_smoothing);
-	// The same reach the shader uses to decide whether a rect can contribute, plus
-	// the shadow, so every pixel the shader can give a value to is inside the node.
 	const double extent = static_cast<double>(smoothFactor) * 1.5 +
 						  static_cast<double>(m_shadowRadius);
 
-	// Group order, no pruning by proximity: the shader sees this list for every pixel. A
-	// shape that is not pushing is not in the list at all: shapes here are data for the
-	// group draw, so leaving a panel at rest out means it cannot define any part of the
-	// edge. A closing panel is still in the list while its curve runs out, even with no
-	// size left, which is what keeps the bounce.
-	// entryShapes maps a shared entry back to the shape it came from.
+	const bool dropAtRest = m_invertedRect != nullptr;
 	QVector<BlobShape2*> entryShapes;
 
 	for (auto* shape : std::as_const(m_shapes)) {
-		if (!shape->isMoving()) continue;
+		if (dropAtRest && !shape->isMoving()) continue;
 		if (shape->width() <= 0 || shape->height() <= 0) continue;
 		if (static_cast<int>(m_data.rects.size()) >= BlobGroupData::kMaxRects)
 			continue;
@@ -194,7 +217,6 @@ void BlobGroup2::ensureDataBuilt() {
 
 	const int count = static_cast<int>(m_data.rects.size());
 
-	// Exclusion gates only the smooth blend.
 	for (int i = 0; i < count; ++i) {
 		int mask = 0;
 		BlobShape2* const si = entryShapes[i];
@@ -214,10 +236,11 @@ void BlobGroup2::ensureDataBuilt() {
 		BlobShape2* const si = entryShapes[i];
 		float fTr = 1.0f, fBr = 1.0f, fBl = 1.0f, fTl = 1.0f;
 
-		const float cTrX = ri.cx + ri.hw, cTrY = ri.cy - ri.hh;
-		const float cBrX = ri.cx + ri.hw, cBrY = ri.cy + ri.hh;
-		const float cBlX = ri.cx - ri.hw, cBlY = ri.cy + ri.hh;
-		const float cTlX = ri.cx - ri.hw, cTlY = ri.cy - ri.hh;
+		const float dcx = ri.cx + ri.offsetX, dcy = ri.cy + ri.offsetY;
+		const float cTrX = dcx + ri.hw, cTrY = dcy - ri.hh;
+		const float cBrX = dcx + ri.hw, cBrY = dcy + ri.hh;
+		const float cBlX = dcx - ri.hw, cBlY = dcy + ri.hh;
+		const float cTlX = dcx - ri.hw, cTlY = dcy - ri.hh;
 
 		if (cornerFill) {
 			for (int j = 0; j < count; ++j) {
@@ -227,37 +250,41 @@ void BlobGroup2::ensureDataBuilt() {
 				if (si->isCornerExcluded(sj) || sj->isCornerExcluded(si))
 					continue;
 				const auto& rj = m_data.rects[j];
+				const float jcx = rj.cx + rj.offsetX;
+				const float jcy = rj.cy + rj.offsetY;
 				fTr = std::min(
 					fTr,
 					cornerFillFactor(
-						cpuSdBox(cTrX, cTrY, rj.cx, rj.cy, rj.hw, rj.hh),
+						cpuSdBox(cTrX, cTrY, jcx, jcy, rj.hw, rj.hh),
 						smoothFactor));
 				fBr = std::min(
 					fBr,
 					cornerFillFactor(
-						cpuSdBox(cBrX, cBrY, rj.cx, rj.cy, rj.hw, rj.hh),
+						cpuSdBox(cBrX, cBrY, jcx, jcy, rj.hw, rj.hh),
 						smoothFactor));
 				fBl = std::min(
 					fBl,
 					cornerFillFactor(
-						cpuSdBox(cBlX, cBlY, rj.cx, rj.cy, rj.hw, rj.hh),
+						cpuSdBox(cBlX, cBlY, jcx, jcy, rj.hw, rj.hh),
 						smoothFactor));
 				fTl = std::min(
 					fTl,
 					cornerFillFactor(
-						cpuSdBox(cTlX, cTlY, rj.cx, rj.cy, rj.hw, rj.hh),
+						cpuSdBox(cTlX, cTlY, jcx, jcy, rj.hw, rj.hh),
 						smoothFactor));
 			}
 		}
 
-		ri.radius[0] = std::max(ri.radius[0] * fTr, minR);
-		ri.radius[1] = std::max(ri.radius[1] * fBr, minR);
-		ri.radius[2] = std::max(ri.radius[2] * fBl, minR);
-		ri.radius[3] = std::max(ri.radius[3] * fTl, minR);
+		ri.radius[0] = ri.radius[0] > 0.0f ? std::max(ri.radius[0] * fTr, minR)
+										   : 0.0f;
+		ri.radius[1] = ri.radius[1] > 0.0f ? std::max(ri.radius[1] * fBr, minR)
+										   : 0.0f;
+		ri.radius[2] = ri.radius[2] > 0.0f ? std::max(ri.radius[2] * fBl, minR)
+										   : 0.0f;
+		ri.radius[3] = ri.radius[3] > 0.0f ? std::max(ri.radius[3] * fTl, minR)
+										   : 0.0f;
 	}
 
-	// Inverted rect. The frame term is evaluated for every pixel in the bounds,
-	// so the group flag cannot be gated per shape.
 	if (!m_invertedRect) return;
 
 	auto* inv = static_cast<BlobShape2*>(m_invertedRect);
@@ -297,6 +324,8 @@ void BlobGroup2::ensureDataBuilt() {
 	m_data.invertedInner[2] = innerHW;
 	m_data.invertedInner[3] = innerHH;
 
+	inv->outerCornerRadii(m_data.invertedOuterRadii);
+
 	m_bounds = m_bounds.united(QRectF(
 		static_cast<double>(outerCX) - static_cast<double>(outerHW) - extent,
 		static_cast<double>(outerCY) - static_cast<double>(outerHH) - extent,
@@ -311,7 +340,6 @@ void BlobGroup2::fillMaterial(BlobMaterial* material) {
 	material->m_paddedH = static_cast<float>(m_bounds.height());
 
 	material->m_smoothFactor = static_cast<float>(m_smoothing);
-	// The single group draw has no owner, so the shader skips the ownership test.
 	material->m_myIndex = -2;
 	material->m_color = m_color;
 	material->m_hasInverted = m_data.hasInverted ? 1 : 0;
@@ -324,6 +352,10 @@ void BlobGroup2::fillMaterial(BlobMaterial* material) {
 		material->m_invertedInner,
 		data().invertedInner,
 		sizeof(data().invertedInner));
+	memcpy(
+		material->m_invertedOuterRadii,
+		data().invertedOuterRadii,
+		sizeof(data().invertedOuterRadii));
 
 	material->m_shadowRadius = static_cast<float>(m_shadowRadius);
 	material->m_shadowColor[0] = static_cast<float>(m_shadowColor.redF());
@@ -339,8 +371,6 @@ void BlobGroup2::fillMaterial(BlobMaterial* material) {
 }
 
 QSGNode* BlobGroup2::updatePaintNode(QSGNode* oldNode, UpdatePaintNodeData*) {
-	// Data is built during polish. This only covers a render pass that happens
-	// without one.
 	ensureDataBuilt();
 
 	if (m_data.rects.isEmpty() && !m_data.hasInverted) {
@@ -364,10 +394,6 @@ QSGNode* BlobGroup2::updatePaintNode(QSGNode* oldNode, UpdatePaintNodeData*) {
 		node->setFlag(QSGNode::OwnsMaterial);
 	}
 
-	// The shader evaluates the field at the scene position a vertex maps to, so
-	// the group item itself must not be transformed. The vertex positions are the
-	// bounds in this item's frame; the material carries the same rect in scene
-	// coordinates.
 	auto* v = node->geometry()->vertexDataAsTexturedPoint2D();
 	const QPointF p0 = mapFromScene(m_bounds.topLeft());
 	const QPointF p1 = mapFromScene(m_bounds.bottomRight());

Plugins/ZShell/Blobs/blobgroup2.hpp

@@ -9,22 +9,13 @@
 #include <qquickitem.h>
 #include <qrect.h>
 #include <qsgnode.h>
+#include <qtimer.h>
 #include <qvector.h>
 
 class BlobShape2;
 class BlobInvertedRect2;
 
-// One shared valuation for a whole group, drawn by one node.
-//
-// The shapes here are data only: they say where the material should be. The group
-// draws a single quad over everything the shader can evaluate, so a pixel cannot
-// be evaluated by one shape and missed by another, and no second draw can
-// disagree with the first. That is what makes overlapping shapes read as one
-// surface - one value, one writer, one alpha per pixel.
 struct BlobGroupData {
-	// The shader reads rectData[80] = 16 entries, and excludeMask is a 32-bit
-	// mask. The shared list is capped at 16, in group order, so the cap is the
-	// same list for every pixel.
 	static constexpr int kMaxRects = 16;
 
 	QVector<BlobRectData> rects;
@@ -32,6 +23,7 @@ struct BlobGroupData {
 	float invertedRadius = 0;
 	float invertedOuter[4] = {};
 	float invertedInner[4] = {};
+	float invertedOuterRadii[4] = {};
 };
 
 class BlobGroup2 : public QQuickItem {
@@ -91,10 +83,10 @@ class BlobGroup2 : public QQuickItem {
 
 	[[nodiscard]] const BlobGroupData& data() const { return m_data; }
 
-	// One draw per group, so a change to any shape changes the value for every
-	// pixel. Refresh the whole group.
 	void markDirty();
 
+	void requestPhysics();
+
 	signals:
 	void smoothingChanged();
 	void colorChanged();
@@ -110,6 +102,7 @@ class BlobGroup2 : public QQuickItem {
 	void ensurePhysicsUpdated();
 	void ensureDataBuilt();
 	void fillMaterial(BlobMaterial* material);
+	void pumpPhysics();
 
 	qreal m_smoothing = 32.0;
 	QColor m_color{0x44, 0x88, 0xff};
@@ -120,9 +113,8 @@ class BlobGroup2 : public QQuickItem {
 	BlobInvertedRect2* m_invertedRect = nullptr;
 	bool m_physicsUpdated = false;
 	bool m_dataBuilt = false;
+	QTimer m_physicsPump;
 	BlobGroupData m_data;
 
-	// Scene-space union of what the shader can evaluate for any shape. The node
-	// covers exactly this, so gaps are not possible.
 	QRectF m_bounds;
 };

Plugins/ZShell/Blobs/blobinvertedrect.cpp

@@ -11,28 +11,24 @@
 BlobInvertedRect::BlobInvertedRect(QQuickItem* parent) : BlobShape(parent) {}
 
 static void setFrameIndices(quint16* idx) {
-	// Top strip: 0-1-4, 1-5-4
 	idx[0] = 0;
 	idx[1] = 1;
 	idx[2] = 4;
 	idx[3] = 1;
 	idx[4] = 5;
 	idx[5] = 4;
-	// Right strip: 1-2-5, 2-6-5
 	idx[6] = 1;
 	idx[7] = 2;
 	idx[8] = 5;
 	idx[9] = 2;
 	idx[10] = 6;
 	idx[11] = 5;
-	// Bottom strip: 2-3-6, 3-7-6
 	idx[12] = 2;
 	idx[13] = 3;
 	idx[14] = 6;
 	idx[15] = 3;
 	idx[16] = 7;
 	idx[17] = 6;
-	// Left strip: 3-0-7, 0-4-7
 	idx[18] = 3;
 	idx[19] = 0;
 	idx[20] = 7;
@@ -50,17 +46,20 @@ QSGNode* BlobInvertedRect::updatePaintNode(
 
 	const float pad = static_cast<float>(m_group->smoothing());
 
-	// Compute inner hole boundary in local coords
-	// Inset past the inner border edge by 2x smoothing to cover the blend zone
 	const float inset = pad * 2.0f;
 	const float holeLeft = static_cast<float>(m_borderLeft) + inset;
 	const float holeTop = static_cast<float>(m_borderTop) + inset;
 	const float holeRight = static_cast<float>(width() - m_borderRight) - inset;
 	const float holeBot = static_cast<float>(height() - m_borderBottom) - inset;
 
-	// If the hole is too small or invalid, fall back to full quad
-	if (holeLeft >= holeRight || holeTop >= holeBot)
+	if (holeLeft >= holeRight || holeTop >= holeBot) {
+		auto* oldGeoNode = static_cast<QSGGeometryNode*>(oldNode);
+		if (oldNode && oldGeoNode->geometry()->vertexCount() != 4) {
+			delete oldNode;
+			oldNode = nullptr;
+		}
 		return BlobShape::updatePaintNode(oldNode, nullptr);
+	}
 
 	auto* node = static_cast<QSGGeometryNode*>(oldNode);
 
@@ -87,7 +86,6 @@ QSGNode* BlobInvertedRect::updatePaintNode(
 		node->setFlag(QSGNode::OwnsMaterial);
 	}
 
-	// Outer bounds (local coords)
 	const float x0 = static_cast<float>(m_localPaddedRect.x());
 	const float y0 = static_cast<float>(m_localPaddedRect.y());
 	const float x1 = x0 + static_cast<float>(m_localPaddedRect.width());
@@ -95,15 +93,12 @@ QSGNode* BlobInvertedRect::updatePaintNode(
 	const float w = x1 - x0;
 	const float h = y1 - y0;
 
-	// Update vertex positions and texture coordinates
 	auto* v = node->geometry()->vertexDataAsTexturedPoint2D();
 
-	// Outer corners
 	v[0].set(x0, y0, 0.0f, 0.0f);
 	v[1].set(x1, y0, 1.0f, 0.0f);
 	v[2].set(x1, y1, 1.0f, 1.0f);
 	v[3].set(x0, y1, 0.0f, 1.0f);
-	// Inner corners (hole)
 	v[4].set(holeLeft, holeTop, (holeLeft - x0) / w, (holeTop - y0) / h);
 	v[5].set(holeRight, holeTop, (holeRight - x0) / w, (holeTop - y0) / h);
 	v[6].set(holeRight, holeBot, (holeRight - x0) / w, (holeBot - y0) / h);
@@ -111,7 +106,6 @@ QSGNode* BlobInvertedRect::updatePaintNode(
 
 	node->markDirty(QSGNode::DirtyGeometry);
 
-	// Update material uniforms
 	auto* material = static_cast<BlobMaterial*>(node->material());
 	material->m_paddedX = m_cachedPaddedX;
 	material->m_paddedY = m_cachedPaddedY;
@@ -218,7 +212,7 @@ void BlobInvertedRect::outerCornerRadii(float out[4]) const {
 	const auto base = std::min(static_cast<float>(m_outerRadius), maxR);
 	out[0] = std::min(
 		m_outerTopRightRadius >= 0 ? static_cast<float>(m_outerTopRightRadius)
-								  : base,
+								   : base,
 		maxR);
 	out[1] = std::min(
 		m_outerBottomRightRadius >= 0

Plugins/ZShell/Blobs/blobinvertedrect.hpp

@@ -59,12 +59,15 @@ class BlobInvertedRect : public BlobShape {
 
 	void setOuterRadius(qreal v);
 
-	// Per-corner outer radii. -1 falls back to outerRadius (mirrors BlobRect).
-	[[nodiscard]] qreal outerTopLeftRadius() const { return m_outerTopLeftRadius; }
+	[[nodiscard]] qreal outerTopLeftRadius() const {
+		return m_outerTopLeftRadius;
+	}
 
 	void setOuterTopLeftRadius(qreal v);
 
-	[[nodiscard]] qreal outerTopRightRadius() const { return m_outerTopRightRadius; }
+	[[nodiscard]] qreal outerTopRightRadius() const {
+		return m_outerTopRightRadius;
+	}
 
 	void setOuterTopRightRadius(qreal v);
 

Plugins/ZShell/Blobs/blobinvertedrect2.cpp

@@ -1,6 +1,8 @@
 #include "blobinvertedrect2.hpp"
 #include "blobgroup2.hpp"
 
+#include <algorithm>
+
 BlobInvertedRect2::BlobInvertedRect2(QQuickItem* parent) : BlobShape2(parent) {}
 
 BlobInvertedRect2::~BlobInvertedRect2() {
@@ -35,6 +37,64 @@ void BlobInvertedRect2::setBorderBottom(qreal v) {
 	if (m_group) m_group->markDirty();
 }
 
+void BlobInvertedRect2::setOuterRadius(qreal v) {
+	if (qFuzzyCompare(m_outerRadius, v)) return;
+	m_outerRadius = v;
+	emit outerRadiusChanged();
+	if (m_group) m_group->markDirty();
+}
+
+void BlobInvertedRect2::setOuterTopLeftRadius(qreal v) {
+	if (qFuzzyCompare(m_outerTopLeftRadius, v)) return;
+	m_outerTopLeftRadius = v;
+	emit outerTopLeftRadiusChanged();
+	if (m_group) m_group->markDirty();
+}
+
+void BlobInvertedRect2::setOuterTopRightRadius(qreal v) {
+	if (qFuzzyCompare(m_outerTopRightRadius, v)) return;
+	m_outerTopRightRadius = v;
+	emit outerTopRightRadiusChanged();
+	if (m_group) m_group->markDirty();
+}
+
+void BlobInvertedRect2::setOuterBottomLeftRadius(qreal v) {
+	if (qFuzzyCompare(m_outerBottomLeftRadius, v)) return;
+	m_outerBottomLeftRadius = v;
+	emit outerBottomLeftRadiusChanged();
+	if (m_group) m_group->markDirty();
+}
+
+void BlobInvertedRect2::setOuterBottomRightRadius(qreal v) {
+	if (qFuzzyCompare(m_outerBottomRightRadius, v)) return;
+	m_outerBottomRightRadius = v;
+	emit outerBottomRightRadiusChanged();
+	if (m_group) m_group->markDirty();
+}
+
+void BlobInvertedRect2::outerCornerRadii(float out[4]) const {
+	const auto maxR = static_cast<float>(std::min(width(), height())) * 0.5f;
+	const auto base = std::min(static_cast<float>(m_outerRadius), maxR);
+	out[0] = std::min(
+		m_outerTopRightRadius >= 0 ? static_cast<float>(m_outerTopRightRadius)
+								   : base,
+		maxR);
+	out[1] = std::min(
+		m_outerBottomRightRadius >= 0
+			? static_cast<float>(m_outerBottomRightRadius)
+			: base,
+		maxR);
+	out[2] = std::min(
+		m_outerBottomLeftRadius >= 0
+			? static_cast<float>(m_outerBottomLeftRadius)
+			: base,
+		maxR);
+	out[3] = std::min(
+		m_outerTopLeftRadius >= 0 ? static_cast<float>(m_outerTopLeftRadius)
+								  : base,
+		maxR);
+}
+
 void BlobInvertedRect2::registerWithGroup() {
 	if (m_group) m_group->setInvertedRect(this);
 }

Plugins/ZShell/Blobs/blobinvertedrect2.hpp

@@ -19,6 +19,21 @@ class BlobInvertedRect2 : public BlobShape2 {
 	Q_PROPERTY(
 		qreal borderBottom READ borderBottom WRITE setBorderBottom NOTIFY
 			borderBottomChanged)
+	Q_PROPERTY(
+		qreal outerRadius READ outerRadius WRITE setOuterRadius NOTIFY
+			outerRadiusChanged)
+	Q_PROPERTY(
+		qreal outerTopLeftRadius READ outerTopLeftRadius WRITE
+			setOuterTopLeftRadius NOTIFY outerTopLeftRadiusChanged)
+	Q_PROPERTY(
+		qreal outerTopRightRadius READ outerTopRightRadius WRITE
+			setOuterTopRightRadius NOTIFY outerTopRightRadiusChanged)
+	Q_PROPERTY(
+		qreal outerBottomLeftRadius READ outerBottomLeftRadius WRITE
+			setOuterBottomLeftRadius NOTIFY outerBottomLeftRadiusChanged)
+	Q_PROPERTY(
+		qreal outerBottomRightRadius READ outerBottomRightRadius WRITE
+			setOuterBottomRightRadius NOTIFY outerBottomRightRadiusChanged)
 
 	public:
 	explicit BlobInvertedRect2(QQuickItem* parent = nullptr);
@@ -40,13 +55,48 @@ class BlobInvertedRect2 : public BlobShape2 {
 
 	void setBorderBottom(qreal v);
 
+	[[nodiscard]] qreal outerRadius() const { return m_outerRadius; }
+
+	void setOuterRadius(qreal v);
+
+	[[nodiscard]] qreal outerTopLeftRadius() const {
+		return m_outerTopLeftRadius;
+	}
+
+	void setOuterTopLeftRadius(qreal v);
+
+	[[nodiscard]] qreal outerTopRightRadius() const {
+		return m_outerTopRightRadius;
+	}
+
+	void setOuterTopRightRadius(qreal v);
+
+	[[nodiscard]] qreal outerBottomLeftRadius() const {
+		return m_outerBottomLeftRadius;
+	}
+
+	void setOuterBottomLeftRadius(qreal v);
+
+	[[nodiscard]] qreal outerBottomRightRadius() const {
+		return m_outerBottomRightRadius;
+	}
+
+	void setOuterBottomRightRadius(qreal v);
+
 	signals:
 	void borderLeftChanged();
 	void borderRightChanged();
 	void borderTopChanged();
 	void borderBottomChanged();
+	void outerRadiusChanged();
+	void outerTopLeftRadiusChanged();
+	void outerTopRightRadiusChanged();
+	void outerBottomLeftRadiusChanged();
+	void outerBottomRightRadiusChanged();
 
 	protected:
+	void outerCornerRadii(float out[4]) const override;
+
 	void registerWithGroup() override;
 	void unregisterFromGroup() override;
 
@@ -55,4 +105,10 @@ class BlobInvertedRect2 : public BlobShape2 {
 	qreal m_borderRight = 0;
 	qreal m_borderTop = 0;
 	qreal m_borderBottom = 0;
+
+	qreal m_outerRadius = 0;
+	qreal m_outerTopLeftRadius = -1;
+	qreal m_outerTopRightRadius = -1;
+	qreal m_outerBottomLeftRadius = -1;
+	qreal m_outerBottomRightRadius = -1;
 };