audio popout changes, slider inset icons added

Reviewed-on: #117

.clang-format

@@ -0,0 +1,58 @@
+---
+BasedOnStyle: LLVM
+AccessModifierOffset: 0
+AlignAfterOpenBracket: Align
+AlignConsecutiveAssignments: false
+AlignConsecutiveDeclarations: false
+AlignOperands: Align
+AllowAllParametersOfDeclarationOnNextLine: true
+AllowShortFunctionsOnASingleLine: Inline
+AllowShortIfStatementsOnASingleLine: Never
+AlwaysBreakBeforeMultilineStrings: false
+AlwaysBreakTemplateDeclarations: Yes
+BinPackArguments: false
+BinPackParameters: false
+BreakBeforeBraces: Attach
+BreakBeforeTernaryOperators: true
+BreakConstructorInitializers: BeforeComma
+ColumnLimit: 80
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+ConstructorInitializerIndentWidth: 4
+ContinuationIndentWidth: 4
+Cpp11BracedListStyle: true
+DerivePointerAlignment: false
+FixNamespaceComments: true
+IndentCaseLabels: false
+IndentWidth: 4
+KeepEmptyLinesAtTheStartOfBlocks: false
+Language: Cpp
+MaxEmptyLinesToKeep: 2
+NamespaceIndentation: None
+PenaltyBreakAssignment: 10
+PenaltyBreakBeforeFirstCallParameter: 100
+PenaltyBreakComment: 300
+PenaltyBreakFirstLessLess: 120
+PenaltyBreakString: 1000
+PenaltyExcessCharacter: 100
+PenaltyReturnTypeOnItsOwnLine: 200
+PointerAlignment: Left
+ReflowComments: false
+SortIncludes: false
+SpaceAfterCStyleCast: false
+SpaceAfterTemplateKeyword: true
+SpaceBeforeAssignmentOperators: true
+SpaceBeforeCpp11BracedList: false
+SpaceBeforeCtorInitializerColon: true
+SpaceBeforeInheritanceColon: true
+SpaceBeforeParens: ControlStatements
+SpaceBeforeRangeBasedForLoopColon: true
+SpaceInEmptyParentheses: false
+SpacesBeforeTrailingComments: 1
+SpacesInAngles: false
+SpacesInContainerLiterals: false
+SpacesInCStyleCastParentheses: false
+SpacesInParentheses: false
+SpacesInSquareBrackets: false
+Standard: c++20
+TabWidth: 4
+UseTab: Always

.clang-tidy

@@ -0,0 +1,31 @@
+---
+Checks: >
+    -*,
+    bugprone-*,
+    clang-analyzer-*,
+    modernize-*,
+    -modernize-use-trailing-return-type,
+    performance-*,
+    readability-braces-around-statements,
+    readability-else-after-return,
+    readability-identifier-naming,
+    readability-redundant-*,
+    readability-simplify-*,
+CheckOptions:
+    readability-identifier-naming.ClassCase: CamelCase
+    readability-identifier-naming.EnumCase: CamelCase
+    readability-identifier-naming.FunctionCase: camelBack
+    readability-identifier-naming.MemberCase: camelBack
+    readability-identifier-naming.MemberPrefix: m_
+    readability-identifier-naming.MethodCase: camelBack
+    readability-identifier-naming.NamespaceCase: CamelCase
+    readability-identifier-naming.ParameterCase: camelBack
+    readability-identifier-naming.PrivateMemberPrefix: m_
+    readability-identifier-naming.StaticConstantCase: UPPER_CASE
+    readability-identifier-naming.StaticConstantPrefix: k
+    readability-identifier-naming.VariableCase: camelBack
+WarningsAsErrors: "*"
+HeaderFilterRegex: ".*"
+FormatStyle: file
+
+...

.gitea/workflows/lint-js.yml

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

.gitea/workflows/lint-python.yml

@@ -0,0 +1,65 @@
+name: Python
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        runs-on: alpine
+        container: node:26-alpine
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git \
+                    python3 \
+                    py3-pip
+                  python3 -m venv .venv
+                  . .venv/bin/activate
+                  pip install --no-cache-dir ruff
+
+            - name: Format check
+              continue-on-error: true
+              run: |
+                  . .venv/bin/activate
+                  ruff format --check .
+
+            - name: Lint
+              run: |
+                  . .venv/bin/activate
+                  ruff check .
+
+    test:
+        runs-on: alpine
+        container: node:26-alpine
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git \
+                    python3 \
+                    py3-pip \
+                    py3-pillow \
+                    build-base
+                  python3 -m venv .venv
+                  . .venv/bin/activate
+                  pip install --no-cache-dir \
+                    typer \
+                    pillow \
+                    materialyoucolor \
+                    jinja2 \
+                    pytest
+
+            - name: Test
+              run: |
+                  . .venv/bin/activate
+                  cd cli
+                  python -m pytest tests/ -v

.gitea/workflows/lint-rust.yml

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

.gitignore

@@ -13,3 +13,5 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
+**/test-plugins/
+**/Charts/

.prettierignore

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

.prettierrc.json

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

CMakeLists.txt

@@ -25,12 +25,20 @@ add_compile_options(
 
 if("plugin" IN_LIST ENABLE_MODULES)
 	add_subdirectory(Plugins)
+
 endif()
 
 if("shell" IN_LIST ENABLE_MODULES)
 	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
         install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
     endforeach()
-	install(FILES shell.qml DESTINATION "${INSTALL_QSCONFDIR}")
+
+	# Disable watching for changes
+	file(READ shell.qml SHELL_QML)
+	string(REPLACE "settings.watchFiles: true" "settings.watchFiles: false" SHELL_QML "${SHELL_QML}")
+	file(WRITE "${CMAKE_BINARY_DIR}/qml/shell.qml" "${SHELL_QML}")
+	install(FILES "${CMAKE_BINARY_DIR}/qml/shell.qml" DESTINATION "${INSTALL_QSCONFDIR}")
+
+	# Greeter
 	install(DIRECTORY Greeter/ DESTINATION "${INSTALL_GREETERCONFDIR}")
 endif()

Components/Anim.qml

@@ -2,7 +2,62 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: Appearance.anim.durations.normal
+	enum Type {
-	easing.bezierCurve: Appearance.anim.curves.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		Standard,
+		StandardLarge,
+		StandardExtraLarge,
+		EmphasizedSmall,
+		Emphasized,
+		EmphasizedLarge,
+		EmphasizedExtraLarge,
+		FastSpatial,
+		DefaultSpatial,
+		SlowSpatial,
+		FastEffects,
+		DefaultEffects,
+		SlowEffects
+	}
+
+	property int type: Anim.DefaultSpatial
+
+	duration: {
+		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
+			return Appearance.anim.durations.normal;
+
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.durations.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.durations.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.durations.large;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.durations.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.durations.expressiveEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.durations.expressiveSlowEffects;
+
+		const types = ["small", "normal", "large", "extraLarge"];
+		const idx = type % 4; // 0-7 are the 4 standard types
+		return Appearance.anim.durations[types[idx]];
+	}
+	easing.bezierCurve: {
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.curves.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.curves.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.curves.expressiveSlowSpatial;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.curves.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.curves.expressiveDefaultEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.curves.expressiveSlowEffects;
+
+		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
+			return Appearance.anim.curves.emphasized;
+		return Appearance.anim.curves.standard;
+	}
 }

Components/CollapsibleSection.qml

@@ -59,15 +59,15 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.toggleRequested();
-				root.expanded = !root.expanded;
-			}
-
 			anchors.fill: parent
 			color: DynamicColors.palette.m3onSurface
 			radius: Appearance.rounding.normal
 			showHoverBackground: false
+
+			onClicked: {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
 		}
 	}
 

Components/CustomButton.qml

@@ -23,10 +23,10 @@ Button {
 	}
 
 	StateLayer {
-		function onClicked(): void {
+		radius: control.radius
+
+		onClicked: {
 			control.clicked();
 		}
-
-		radius: control.radius
 	}
 }

Components/CustomListView.qml

@@ -3,11 +3,29 @@ import QtQuick
 ListView {
 	id: root
 
+	property bool doneFakeFlick
+
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {
+		onRunningChanged: {
+			if (!running && !root.doneFakeFlick) {
+				root.doneFakeFlick = true;
+				root.flick(1, 1);
+				root.flick(-1, -1);
+				Qt.callLater(() => root.cancelFlick());
+			}
+		}
+
 		Anim {
 			properties: "x,y"
 		}
 	}
+
+	Timer {
+		interval: 10
+		running: root.doneFakeFlick
+
+		onTriggered: root.doneFakeFlick = false
+	}
 }

Components/CustomRadioButton.qml

@@ -33,13 +33,13 @@ RadioButton {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.click();
-			}
-
 			anchors.margins: -7
 			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
 			z: -1
+
+			onClicked: {
+				root.click();
+			}
 		}
 
 		CustomRect {

Components/CustomScrollBar.qml

@@ -1,6 +1,6 @@
-import qs.Config
 import QtQuick
 import QtQuick.Templates
+import qs.Config
 
 ScrollBar {
 	id: root
@@ -12,7 +12,7 @@ ScrollBar {
 	property real nonAnimPosition
 	property bool shouldBeActive
 
-	implicitWidth: 8
+	implicitWidth: mouse.containsMouse ? Appearance.padding.extraSmall * 2 : Appearance.padding.extraSmall
 
 	contentItem: CustomRect {
 		anchors.left: parent.left
@@ -33,6 +33,7 @@ ScrollBar {
 
 		Behavior on opacity {
 			Anim {
+				type: Anim.DefaultEffects
 			}
 		}
 
@@ -40,9 +41,16 @@ ScrollBar {
 			id: mouse
 
 			acceptedButtons: Qt.NoButton
-			anchors.fill: parent
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
 			cursorShape: Qt.PointingHandCursor
 			hoverEnabled: true
+			implicitWidth: Appearance.padding.extraSmall * 2
+		}
+	}
+	Behavior on implicitWidth {
+		Anim {
 		}
 	}
 	Behavior on position {
@@ -86,23 +94,19 @@ ScrollBar {
 	// Sync nonAnimPosition with flickable when not animating
 	Connections {
 		function onContentYChanged() {
-			if (!animating && !fullMouse.pressed) {
+			if (!root.animating && !fullMouse.pressed) {
-				_updatingFromFlickable = true;
+				root._updatingFromFlickable = true;
-				const contentHeight = flickable.contentHeight;
+				const contentHeight = root.flickable.contentHeight;
-				const height = flickable.height;
+				const height = root.flickable.height;
 				if (contentHeight > height) {
-					nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+					root.nonAnimPosition = Math.max(0, Math.min(1, root.flickable.contentY / (contentHeight - height)));
 				} else {
-					nonAnimPosition = 0;
+					root.nonAnimPosition = 0;
 				}
-				_updatingFromFlickable = false;
+				root._updatingFromFlickable = false;
 			}
 		}
 
-		target: flickable
-	}
-
-	Connections {
 		function onMovingChanged(): void {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;

Components/CustomSlider.qml

@@ -1,47 +1,199 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
+import ZShell.Components
+import ZShell
+import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property color color: DynamicColors.palette.m3primary
+	property bool animateWave
+	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property real filledWidth
+	property alias inset: inset
+	property color insetColor: enabled ? (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary) : DynamicColors.palette.m3onSurface
+	property string insetIcon: ""
+	property real pos: visualPosition
+	property int radius: Appearance.rounding.small
+	property int waveDuration: 1000
+	property real waveFrequency: 6
+	property bool wavy
+
+	signal interaction(v: real)
+
+	implicitHeight: 12
+	implicitWidth: 200
+
+	contentItem: Item {
+		anchors.fill: parent
 
-	background: Item {
 		CustomRect {
-			anchors.bottom: parent.bottom
+			id: remaining
-			anchors.left: parent.left
+
-			anchors.top: parent.top
+			anchors.left: handle.right
-			bottomRightRadius: root.implicitHeight / 6
+			anchors.leftMargin: Appearance.spacing.extraSmall
-			color: root.color
+			anchors.right: parent.right
-			implicitWidth: root.handle.x - root.implicitHeight / 2
+			anchors.verticalCenter: parent.verticalCenter
-			radius: Appearance.rounding.full
+			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			topRightRadius: root.implicitHeight / 6
+			color: root.bgColor
+			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
+			opacity: Math.min(width, 12) / 12
+			radius: root.radius
+			topLeftRadius: Appearance.rounding.extraSmall / 2
 		}
 
 		CustomRect {
-			anchors.bottom: parent.bottom
 			anchors.right: parent.right
-			anchors.top: parent.top
+			anchors.rightMargin: 4 * remaining.opacity
-			bottomLeftRadius: root.implicitHeight / 6
+			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: root.fgColor
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			implicitHeight: 4 * remaining.opacity
+			implicitWidth: implicitHeight
+			opacity: remaining.opacity
 			radius: Appearance.rounding.full
-			topLeftRadius: root.implicitHeight / 6
+		}
+
+		CustomRect {
+			id: handle
+
+			anchors.left: filled.right
+			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.fgColor
+			implicitHeight: {
+				const t = ZUtils.clamp((parent.height - 12) / 16, 0, 1);
+				const lerp = (a, b) => a + (b - a) * t;
+				return parent.height * (mouse.pressed ? lerp(3.5, 1.5) : lerp(3, 1.2));
+			}
+			implicitWidth: 4
+			radius: Appearance.rounding.full
+
+			Behavior on implicitHeight {
+				Anim {
+					type: Anim.FastSpatial
+				}
+			}
+		}
+
+		Loader {
+			id: filled
+
+			anchors.left: parent.left
+			anchors.verticalCenter: parent.verticalCenter
+			asynchronous: true
+			sourceComponent: root.wavy ? waveComp : lineComp
+		}
+
+		MaterialIcon {
+			id: inset
+
+			readonly property bool attached: root.pos < 0.1
+			property real dockT: attached ? 1 : 0
+
+			anchors.bottom: parent.bottom
+			anchors.top: parent.top
+			color: root.insetColor
+			font.pixelSize: Appearance.font.size.smaller * 2
+			text: root.insetIcon
+			verticalAlignment: Text.AlignVCenter
+			visible: !root.wavy && root.insetIcon !== ""
+			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
+
+			Behavior on dockT {
+				Anim {
+				}
+			}
+		}
+
+		Component {
+			id: lineComp
+
+			CustomRect {
+				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				color: root.fgColor
+				implicitHeight: root.height
+				implicitWidth: root.filledWidth
+				radius: root.radius
+				topRightRadius: Appearance.rounding.extraSmall / 2
+			}
+		}
+
+		Component {
+			id: waveComp
+
+			WavyLine {
+				color: root.fgColor
+				frequency: root.waveFrequency
+				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
+				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
+				implicitWidth: root.filledWidth
+				lineWidth: root.height * 0.7
+				startX: x
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+				Anim on waveProgress {
+					duration: root.waveDuration
+					easing.type: Easing.Linear
+					from: 0
+					loops: Animation.Infinite
+					paused: !root.animateWave
+					running: true
+					to: 1
+				}
+			}
 		}
 	}
-	handle: CustomRect {
+	Behavior on filledWidth {
-		anchors.verticalCenter: parent.verticalCenter
+		id: widthBehavior
-		color: root.color
-		implicitHeight: 15
-		implicitWidth: 5
-		radius: Appearance.rounding.full
-		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		MouseArea {
+		Anim {
-			acceptedButtons: Qt.NoButton
+		}
-			anchors.fill: parent
+	}
-			cursorShape: Qt.PointingHandCursor
+
+	Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
+
+	Binding {
+		id: posBinding
+
+		property: "pos"
+		target: root
+		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
+		when: mouse.pressed
+	}
+
+	MouseArea {
+		id: mouse
+
+		property real dragMovement
+		property real pressStartPos
+		property real pressStartX
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		implicitHeight: handle.implicitHeight
+		preventStealing: true
+
+		onPositionChanged: e => {
+			dragMovement = (e.x - pressStartX) / width;
+			root.interaction(posBinding.value);
+		}
+		onPressed: e => {
+			widthBehavior.enabled = false;
+			pressStartX = e.x;
+			pressStartPos = root.visualPosition;
+		}
+		onReleased: e => {
+			root.interaction(posBinding.value);
+			widthBehavior.enabled = true;
+			dragMovement = 0;
 		}
 	}
 }

Components/CustomSpinBox.qml

@@ -28,6 +28,7 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
+		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
 		leftPadding: Appearance.padding.normal
@@ -36,7 +37,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -85,7 +86,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -93,7 +94,9 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.min(root.max, root.value + root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -102,9 +105,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -113,13 +113,13 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,7 +127,9 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.max(root.min, root.value - root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -136,9 +138,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -147,7 +146,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_down"
 		}
 	}

Components/CustomSplitButton.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
-import qs.Helpers
 
 Row {
 	id: root
@@ -12,66 +11,46 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color colour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
 	property bool disabled
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledTextColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.normal
+	property real horizontalPadding: Appearance.padding.larger
-	property alias iconLabel: iconLabel
+	readonly property alias iconLabel: iconLabel
-	property alias label: label
+	readonly property alias label: label
-	property alias menu: menu
+	readonly property alias menu: menu
 	property alias menuItems: menu.items
 	property bool menuOnTop
-	property alias stateLayer: stateLayer
+	property real minLeftWidth
-	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	readonly property alias stateLayer: stateLayer
+	property color textColour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.smaller
+	property real verticalPadding: Appearance.padding.small
 
-	function closeDropdown(): void {
+	spacing: Math.floor(Appearance.spacing.extraSmall)
-		SettingsDropdowns.close(menu);
-	}
-
-	function openDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.open(menu, root);
-	}
-
-	function toggleDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.toggle(menu, root);
-	}
-
-	spacing: Math.floor(Appearance.spacing.small / 2)
-
-	onExpandedChanged: {
-		if (!expanded)
-			SettingsDropdowns.forget(menu);
-	}
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
+		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
 		topRightRadius: Appearance.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
 
-			function onClicked(): void {
+			bottomRightRadius: parent.bottomRightRadius
-				root.active?.clicked();
+			color: root.textColour
-			}
-
-			color: root.textColor
 			disabled: root.disabled
-			rect.bottomRightRadius: parent.bottomRightRadius
+			topRightRadius: parent.topRightRadius
-			rect.topRightRadius: parent.topRightRadius
+
+			onClicked: root.active?.clicked()
 		}
 
 		RowLayout {
@@ -86,7 +65,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -98,12 +77,12 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
 					Anim {
-						easing.bezierCurve: Appearance.anim.curves.emphasized
+						type: Anim.Emphasized
 					}
 				}
 			}
@@ -116,7 +95,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -130,14 +109,12 @@ Row {
 		StateLayer {
 			id: expandStateLayer
 
-			function onClicked(): void {
+			color: root.textColour
-				root.toggleDropdown();
-			}
-
-			color: root.textColor
 			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
+
+			onClicked: root.expanded = !root.expanded
 		}
 
 		MaterialIcon {
@@ -145,7 +122,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: root.disabled ? root.disabledTextColor : root.textColor
+			color: root.disabled ? root.disabledTextColour : root.textColour
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 
@@ -158,24 +135,14 @@ Row {
 				}
 			}
 		}
+	}
 
-		Menu {
+	Menu {
-			id: menu
+		id: menu
 
-			anchors.bottomMargin: Appearance.spacing.small
+		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
-			anchors.right: parent.right
+		attachTo: expandBtn
-			anchors.top: parent.bottom
+		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
-			anchors.topMargin: Appearance.spacing.small
+		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
-
-			states: State {
-				when: root.menuOnTop
-
-				AnchorChanges {
-					anchors.bottom: expandBtn.top
-					anchors.top: undefined
-					target: menu
-				}
-			}
-		}
 	}
 }

Components/CustomSplitButtonRow.qml

@@ -8,19 +8,32 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property bool enabled: true
+	property alias buttonAlias: splitButton
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
 	property alias menuItems: splitButton.menuItems
+	property bool shouldBeActive: true
 	property alias type: splitButton.type
 
 	signal selected(item: MenuItem)
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.right: parent.right
 	clip: false
-	z: root.expanded ? expandedZ : -1
+	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -36,7 +49,6 @@ Item {
 			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
 			font.pointSize: Appearance.font.size.larger
 			text: root.label
-			z: root.expanded ? root.expandedZ : -1
 		}
 
 		CustomSplitButton {
@@ -44,14 +56,16 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: root.expanded ? root.expandedZ : -1
+			z: 2
 
 			menu.onItemSelected: item => {
 				root.selected(item);
-				splitButton.closeDropdown();
+			// splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.toggleDropdown();
+				// splitButton.toggleDropdown();
+				splitButton.expanded = !splitButton.expanded;
+				console.log(root.z);
 			}
 		}
 	}

Components/CustomSwitch.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Templates
 import QtQuick.Shapes
+import QtQuick.Templates
 import qs.Config
 
 Switch {
@@ -12,38 +12,41 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: 13 + 7 * 2
+		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
 
 		CustomRect {
-			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - 10
+			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -63,14 +66,14 @@ Switch {
 				}
 				property point end2: {
 					if (root.pressed)
-						return Qt.point(width, height / 2);
+						return Qt.point(width * 0.8, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.85, height * 0.2);
 					return Qt.point(width * 0.85, height * 0.15);
 				}
 				property point start1: {
 					if (root.pressed)
-						return Qt.point(width * 0.1, height / 2);
+						return Qt.point(width * 0.2, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.15, height / 2);
 					return Qt.point(width * 0.15, height * 0.15);
@@ -88,7 +91,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.small * 2
+				height: parent.implicitHeight - Appearance.padding.larger
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -110,11 +113,11 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+					capStyle: ShapePath.RoundCap
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {
@@ -148,8 +151,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: MaterialEasing.expressiveEffectsTime
+		duration: Appearance.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: MaterialEasing.expressiveEffects
+		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-		easing.type: Easing.BezierSpline
 	}
 }

Components/CustomText.qml

@@ -15,6 +15,7 @@ Text {
 	color: DynamicColors.palette.m3onSurface
 	font.family: Appearance.font.family.sans
 	font.pointSize: Appearance.font.size.normal
+	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Components/Elevation.qml

@@ -1,6 +1,6 @@
-import qs.Config
 import QtQuick
 import QtQuick.Effects
+import qs.Config
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
@@ -13,6 +13,7 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
+			type: Anim.SlowEffects
 		}
 	}
 }

Components/HoverIconButton.qml

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

Components/IconButton.qml

@@ -41,12 +41,11 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
-
 		}
 	}
 
@@ -55,14 +54,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		function onClicked(): void {
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+
+		onClicked: {
 			if (root.toggle)
 				root.internalChecked = !root.internalChecked;
 			root.clicked();
 		}
-
-		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-		disabled: root.disabled
 	}
 
 	MaterialIcon {

Components/Menu.qml

@@ -2,109 +2,169 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import qs.Config
+import qs.Drawers
 
-Elevation {
+MouseArea {
 	id: root
 
+	enum Side {
+		Top,
+		Bottom,
+		Left,
+		Right
+	}
+
 	property MenuItem active: items[0] ?? null
+	property int attachSideX: Menu.Right
+	property int attachSideY: Menu.Bottom
+	required property Item attachTo
 	property bool expanded
 	property list<MenuItem> items
+	property real marginX
+	property real marginY
+	property int thisSideX: Menu.Right
+	property int thisSideY: Menu.Top
 
 	signal itemSelected(item: MenuItem)
 
-	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	anchors.fill: parent
-	implicitWidth: Math.max(200, column.implicitWidth)
+	enabled: expanded
-	level: 2
+	layer.enabled: opacity < 1
-	opacity: root.expanded ? 1 : 0
+	opacity: expanded ? 1 : 0
-	radius: Appearance.rounding.normal
+	parent: {
-
+		const win = QsWindow.window;
-	Behavior on implicitHeight {
+		const contentWin = win as Windows;
-		Anim {
+		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-		}
 	}
+
 	Behavior on opacity {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			type: Anim.DefaultEffects
 		}
 	}
 
-	CustomClippingRect {
+	onClicked: expanded = false
-		anchors.fill: parent
-		color: DynamicColors.palette.m3surfaceContainer
-		radius: parent.radius
 
-		ColumnLayout {
+	TransformWatcher {
-			id: column
+		id: watcher
 
-			anchors.left: parent.left
+		a: root.parent
-			anchors.right: parent.right
+		b: root.attachTo
-			anchors.verticalCenter: parent.verticalCenter
+	}
-			spacing: 5
 
-			Repeater {
+	Elevation {
-				model: root.items
+		id: menu
 
-				CustomRect {
+		implicitHeight: column.implicitHeight + column.anchors.margins * 2
-					id: item
+		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
+		level: 2
+		radius: Appearance.rounding.medium
+		x: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideX === Menu.Left ? 0 : item.width;
+			if (root.thisSideX === Menu.Right)
+				off -= width;
+			return item.mapToItem(root.parent, off, 0).x + root.marginX;
+		}
+		y: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideY === Menu.Top ? 0 : item.height;
+			if (root.thisSideY === Menu.Bottom)
+				off -= height;
+			return item.mapToItem(root.parent, 0, off).y + root.marginY;
+		}
 
-					readonly property bool active: modelData === root.active
+		transform: Scale {
-					required property int index
+			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
-					required property MenuItem modelData
+			yScale: root.expanded ? 1 : 0.1
 
-					Layout.fillWidth: true
+			Behavior on yScale {
-					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+				Anim {
-					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
+				}
+			}
+		}
+
+		CustomRect {
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surfaceContainerLow
+			radius: parent.radius
+
+			ColumnLayout {
+				id: column
+
+				anchors.fill: parent
+				anchors.margins: Appearance.padding.extraSmall
+				spacing: Appearance.spacing.extraSmall
+
+				Repeater {
+					id: repeater
+
+					model: root.items
 
 					CustomRect {
-						anchors.fill: parent
+						id: item
-						anchors.leftMargin: Appearance.padding.small
+
-						anchors.rightMargin: Appearance.padding.small
+						readonly property bool active: modelData === root.active
-						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						required property int index
-						radius: Appearance.rounding.normal - Appearance.padding.small
+						required property MenuItem modelData
+
+						Layout.fillWidth: true
+						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						radius: Appearance.rounding.small
+
+						Behavior on radius {
+							Anim {
+							}
+						}
 
 						StateLayer {
-							function onClicked(): void {
+							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+
+							onClicked: {
 								root.itemSelected(item.modelData);
 								root.active = item.modelData;
+								item.modelData.clicked();
 								root.expanded = false;
 							}
-
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							disabled: !root.expanded
-						}
-					}
-
-					RowLayout {
-						id: menuOptionRow
-
-						anchors.fill: parent
-						anchors.margins: Appearance.padding.normal
-						spacing: Appearance.spacing.small
-
-						MaterialIcon {
-							Layout.alignment: Qt.AlignVCenter
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
-							text: item.modelData.icon
 						}
 
-						CustomText {
+						RowLayout {
-							Layout.alignment: Qt.AlignVCenter
+							id: menuOptionRow
-							Layout.fillWidth: true
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							text: item.modelData.text
-						}
 
-						Loader {
+							anchors.fill: parent
-							Layout.alignment: Qt.AlignVCenter
+							anchors.margins: Appearance.padding.larger
-							active: item.modelData.trailingIcon.length > 0
+							spacing: Appearance.spacing.small
-							visible: active
 
-							sourceComponent: MaterialIcon {
+							MaterialIcon {
-								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								Layout.alignment: Qt.AlignVCenter
-								text: item.modelData.trailingIcon
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								text: item.modelData.icon
+							}
+
+							CustomText {
+								Layout.alignment: Qt.AlignVCenter
+								Layout.fillWidth: true
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.text
+							}
+
+							Loader {
+								Layout.alignment: Qt.AlignVCenter
+								active: item.modelData.trailingIcon.length > 0
+								asynchronous: true
+								visible: active
+
+								sourceComponent: MaterialIcon {
+									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									text: item.modelData.trailingIcon
+								}
 							}
 						}
 					}

Components/StateLayer.qml

@@ -1,15 +1,53 @@
-import qs.Config
 import QtQuick
+import QtQuick.Shapes
+import ZShell
+import ZShell.Components
+import qs.Helpers
+import qs.Config
 
 MouseArea {
 	id: root
 
-	property color color: DynamicColors.palette.m3onSurface
+	property alias bottomLeftRadius: base.bottomLeftRadius
+	property alias bottomRightRadius: base.bottomRightRadius
+	property real circleRadius
+	property alias color: base.color
 	property bool disabled
-	property real radius: parent?.radius ?? 0
+	readonly property real endRadius: {
-	property alias rect: hoverLayer
+		const d1 = distSq(0, 0);
+		const d2 = distSq(width, 0);
+		const d3 = distSq(0, height);
+		const d4 = distSq(width, height);
+		return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
+	}
+	property real endRadiusAtPress
+	property bool manualPressOverride
+	property real pressX: width / 2
+	property real pressY: height / 2
+	property alias radius: base.radius
+	readonly property alias rect: base
+	property bool shapeMorph
+	property bool showHoverBackground: true
+	property real stateOpacity: containsMouse ? 0.08 : 0
+	property alias topLeftRadius: base.topLeftRadius
+	property alias topRightRadius: base.topRightRadius
 
-	function onClicked(): void {
+	function clamp(r: real): real {
+		return Math.max(0, Math.min(r, width / 2, height / 2));
+	}
+
+	function distSq(x: real, y: real): real {
+		return (pressX - x) ** 2 + (pressY - y) ** 2;
+	}
+
+	function press(x: real, y: real): void {
+		pressX = x;
+		pressY = y;
+		fadeAnim.complete();
+		circleRadius = 0;
+		circle.opacity = 0.1;
+		rippleAnim.restart();
+		endRadiusAtPress = endRadius;
 	}
 
 	anchors.fill: parent
@@ -17,79 +55,146 @@ MouseArea {
 	enabled: !disabled
 	hoverEnabled: true
 
-	onClicked: event => !disabled && onClicked(event)
+	Behavior on stateOpacity {
-	onPressed: event => {
+		Anim {
-		if (disabled)
+			type: Anim.DefaultEffects
-			return;
+		}
-
-		rippleAnim.x = event.x;
-		rippleAnim.y = event.y;
-
-		const dist = (ox, oy) => ox * ox + oy * oy;
-		rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
-
-		rippleAnim.restart();
 	}
 
-	SequentialAnimation {
+	onCircleRadiusChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onClicked: event => !disabled && onClicked(event)
+	onManualPressOverrideChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onPressed: e => press(e.x, e.y)
+	onPressedChanged: {
+		if (!(pressed || manualPressOverride) && !rippleAnim.running && circle.opacity > 0)
+			fadeAnim.start();
+	}
+
+	Anim {
 		id: rippleAnim
 
-		property real radius
+		alwaysRunToEnd: true
-		property real x
+		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		property real y
+		easing.bezierCurve: Appearance.anim.curves.standard
-
+		property: "circleRadius"
-		PropertyAction {
+		target: root
-			property: "x"
+		to: root.endRadius
-			target: ripple
-			value: rippleAnim.x
-		}
-
-		PropertyAction {
-			property: "y"
-			target: ripple
-			value: rippleAnim.y
-		}
-
-		PropertyAction {
-			property: "opacity"
-			target: ripple
-			value: 0.08
-		}
-
-		Anim {
-			easing.bezierCurve: MaterialEasing.standardDecel
-			from: 0
-			properties: "implicitWidth,implicitHeight"
-			target: ripple
-			to: rippleAnim.radius * 2
-		}
-
-		Anim {
-			property: "opacity"
-			target: ripple
-			to: 0
-		}
 	}
 
-	CustomClippingRect {
+	Anim {
-		id: hoverLayer
+		id: fadeAnim
+
+		property: "opacity"
+		target: circle
+		to: 0
+		type: Anim.SlowEffects
+	}
+
+	CustomRect {
+		id: base
 
 		anchors.fill: parent
-		border.pixelAligned: false
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
-		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		radius: root.radius
+		color: DynamicColors.palette.m3onSurface
+		opacity: root.stateOpacity
+		// Pick up radius from parent if it has one (parent can be anything with radius props)
+		// qmllint disable missing-property
+		radius: root.parent?.radius ?? 0
+		topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
+		topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
+		// qmllint enable missing-property
+	}
 
-		CustomRect {
+	Shape {
-			id: ripple
+		id: circle
 
-			border.pixelAligned: false
+		anchors.fill: parent
-			color: root.color
+		opacity: 0
-			opacity: 0
+		preferredRendererType: Shape.CurveRenderer
-			radius: Appearance.rounding.full
 
-			transform: Translate {
+		ShapePath {
-				x: -ripple.width / 2
+			fillColor: base.color
-				y: -ripple.height / 2
+			startX: root.clamp(base.topLeftRadius)
+			startY: 0
+			strokeColor: "transparent"
+			strokeWidth: 0
+
+			fillGradient: RadialGradient {
+				centerRadius: root.circleRadius
+				centerX: root.pressX
+				centerY: root.pressY
+				focalX: centerX
+				focalY: centerY
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: ZUtils.clamp(1 - 0.2 * root.endRadius / root.circleRadius, 0.01, 0.99)
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, ZUtils.clamp((root.circleRadius / root.endRadius - 0.9) / 0.1, 0, 1))
+					position: 1
+				}
+			}
+
+			PathLine {
+				x: root.width - root.clamp(base.topRightRadius)
+				y: 0
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topRightRadius)
+				radiusY: root.clamp(base.topRightRadius)
+				relativeX: root.clamp(base.topRightRadius)
+				relativeY: root.clamp(base.topRightRadius)
+			}
+
+			PathLine {
+				x: root.width
+				y: root.height - root.clamp(base.bottomRightRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomRightRadius)
+				radiusY: root.clamp(base.bottomRightRadius)
+				relativeX: -root.clamp(base.bottomRightRadius)
+				relativeY: root.clamp(base.bottomRightRadius)
+			}
+
+			PathLine {
+				x: root.clamp(base.bottomLeftRadius)
+				y: root.height
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomLeftRadius)
+				radiusY: root.clamp(base.bottomLeftRadius)
+				relativeX: -root.clamp(base.bottomLeftRadius)
+				relativeY: -root.clamp(base.bottomLeftRadius)
+			}
+
+			PathLine {
+				x: 0
+				y: root.clamp(base.topLeftRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topLeftRadius)
+				radiusY: root.clamp(base.topLeftRadius)
+				x: root.clamp(base.topLeftRadius)
+				y: 0
 			}
 		}
 	}

Config/Appearance.qml

@@ -7,8 +7,6 @@ Singleton {
 	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
-	// Literally just here to shorten accessing stuff :woe:
-	// Also kinda so I can keep accessing it with `Appearance.xxx` instead of `Conf.appearance.xxx`
 	readonly property AppearanceConf.Rounding rounding: Config.appearance.rounding
 	readonly property AppearanceConf.Spacing spacing: Config.appearance.spacing
 	readonly property AppearanceConf.Transparency transparency: Config.appearance.transparency

Config/AppearanceConf.qml

@@ -28,9 +28,13 @@ JsonObject {
 		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
 		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
 		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
 		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
 		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
 		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
+		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
+		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
 		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
 		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
 		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
@@ -38,7 +42,9 @@ JsonObject {
 	component AnimDurations: JsonObject {
 		property int expressiveDefaultSpatial: 500 * scale
 		property int expressiveEffects: 200 * scale
+		property int expressiveFastEffects: 150 * scale
 		property int expressiveFastSpatial: 350 * scale
+		property int expressiveSlowEffects: 300 * scale
 		property int extraLarge: 1000 * scale
 		property int large: 600 * scale
 		property int normal: 400 * scale
@@ -57,7 +63,8 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
+		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -70,23 +77,28 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int large: 15 * scale
+		property int extraLargeIncreased: 32 * scale
-		property int larger: 13 * scale
+		property int extraSmall: 4 * scale
-		property int normal: 9 * scale
+		property int large: 16 * scale
+		property int larger: 12 * scale
+		property int normal: 8 * scale
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
 		property int smallest: 2 * scale
 	}
 	component Rounding: JsonObject {
+		property int extraSmall: 4 * scale
 		property int full: 1000 * scale
 		property int large: 24 * scale
+		property int medium: 16 * scale
 		property int normal: 18 * scale
 		property real scale: 1
 		property int small: 12 * scale
 		property int smallest: 8 * scale
 	}
 	component Spacing: JsonObject {
+		property int extraSmall: 4 * scale
 		property int large: 20 * scale
 		property int larger: 16 * scale
 		property int normal: 12 * scale

Config/BackgroundConfig.qml

@@ -7,4 +7,8 @@ JsonObject {
 	property real alignX: 0.5
 	property real alignY: 0.5
 	property real zoom: 1.0
+	property real sourceClipX: 0
+	property real sourceClipY: 0
+	property real sourceClipW: 0
+	property real sourceClipH: 0
 }

Config/BarConfig.qml

@@ -58,6 +58,9 @@ JsonObject {
 	property Popouts popouts: Popouts {
 	}
 	property int rounding: 8
+	property int smoothing: 32
+	property Tray tray: Tray {
+	}
 
 	component Popouts: JsonObject {
 		property bool activeWindow: true
@@ -68,4 +71,7 @@ JsonObject {
 		property bool tray: true
 		property bool upower: true
 	}
+	component Tray: JsonObject {
+		property int trayIconSize: 24
+	}
 }

Config/Colors.qml

@@ -1,5 +1,13 @@
 import Quickshell.Io
 
 JsonObject {
+	property Presets presets: Presets {
+	}
 	property string schemeType: "vibrant"
+
+	component Presets: JsonObject {
+		property string accent: ""
+		property string name: ""
+		property string variant: ""
+	}
 }

Config/Config.qml

@@ -83,6 +83,10 @@ Singleton {
 			wallFadeDuration: background.wallFadeDuration,
 			enabled: background.enabled,
 			alignX: background.alignX,
+			sourceClipX: background.sourceClipX,
+			sourceClipY: background.sourceClipY,
+			sourceClipW: background.sourceClipW,
+			sourceClipH: background.sourceClipH,
 			alignY: background.alignY,
 			zoom: background.zoom
 		};
@@ -94,7 +98,11 @@ Singleton {
 			hideWhenNotif: barConfig.hideWhenNotif,
 			rounding: barConfig.rounding,
 			border: barConfig.border,
+			smoothing: barConfig.smoothing,
 			height: barConfig.height,
+			tray: {
+				trayIconSize: barConfig.tray.trayIconSize
+			},
 			popouts: {
 				tray: barConfig.popouts.tray,
 				audio: barConfig.popouts.audio,
@@ -110,7 +118,12 @@ Singleton {
 
 	function serializeColors(): var {
 		return {
-			schemeType: colors.schemeType
+			schemeType: colors.schemeType,
+			presets: {
+				name: colors.presets.name,
+				variant: colors.presets.variant,
+				accent: colors.presets.accent
+			}
 		};
 	}
 
@@ -204,6 +217,10 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
+			},
+			battery: {
+				popupThresholds: general.battery.popupThresholds,
+				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -236,6 +253,8 @@ Singleton {
 		return {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
+			showNotifContent: lock.showNotifContent,
+			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {
@@ -281,10 +300,10 @@ Singleton {
 		return {
 			enable_pp: screenshot.enable_pp,
 			mode: screenshot.mode,
-			corner_radius: screenshot.corner_radius,
+			radius: screenshot.radius,
-			drop_shadow: screenshot.drop_shadow,
+			shadow: screenshot.shadow,
-			rounded_corners: screenshot.rounded_corners,
+			rounding: screenshot.rounding,
-			shadow_blur_radius: screenshot.shadow_blur_radius,
+			shadow_blur: screenshot.shadow_blur,
 			shadow_color: screenshot.shadow_color,
 			shadow_offset_x: screenshot.shadow_offset_x,
 			shadow_offset_y: screenshot.shadow_offset_y

Config/DynamicColors.qml

@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Io
+import Quickshell.Hyprland
 import QtQuick
 import ZShell
 import qs.Helpers
@@ -29,9 +30,10 @@ Singleton {
 	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
-		const luminance = getLuminance(c);
+		const initLuminance = getLuminance(c);
+		const luminance = Math.max(initLuminance, 0.001);
 
-		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (1 - transparency.base) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
+		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (0.2 + 0.3 * (1 - transparency.base)) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
 		const scale = (luminance + offset) / luminance;
 		const r = Math.max(0, Math.min(1, c.r * scale));
 		const g = Math.max(0, Math.min(1, c.g * scale));
@@ -79,10 +81,32 @@ Singleton {
 	}
 
 	function reloadHyprRules(): void {
-		const barStr = "keyword layerrule %1 %2, match:namespace ZShell-Bar";
+		const blur = transparency.enabled ? 1 : 0;
-		const authStr = "keyword layerrule %1 %2, match:namespace ZShell-Auth";
+		const alpha = transparency.base - 0.03;
-		Hypr.extras.batchMessage([barStr.arg("blur").arg(transparency.enabled ? 1 : 0), barStr.arg("ignore_alpha").arg(transparency.base - 0.03)]);
+
-		Hypr.extras.batchMessage([authStr.arg("blur").arg(transparency.enabled ? 1 : 0), authStr.arg("ignore_alpha").arg(transparency.base - 0.03)]);
+		const rules = `
+			hl.layer_rule({
+				match = { namespace = "ZShell-Bar" },
+				blur = ${blur}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Bar" },
+				ignore_alpha = ${alpha}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Auth" },
+				blur = ${blur}
+			})
+
+			hl.layer_rule({
+				match = { namespace = "ZShell-Auth" },
+				ignore_alpha = ${alpha}
+			})
+		`;
+
+		Hypr.extras.message(`eval ${rules}`);
 	}
 
 	function setMode(mode: string): void {
@@ -91,8 +115,20 @@ Singleton {
 		Config.save();
 	}
 
+	function swapRG(c: color): color {
+		return Qt.rgba(c.g, c.r, c.b, c.a);
+	}
+
 	Component.onCompleted: debounceTimer.triggered()
 
+	Connections {
+		function onUsingLuaChanged(): void {
+			root.reloadHyprRules();
+		}
+
+		target: Hyprland
+	}
+
 	Connections {
 		function onConfigReloaded(): void {
 			root.reloadHyprRules();

Config/General.qml

@@ -4,6 +4,8 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
+	property Battery battery: Battery {
+	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -19,6 +21,17 @@ JsonObject {
 		property list<string> playback: ["mpv"]
 		property list<string> terminal: ["kitty"]
 	}
+	component Battery: JsonObject {
+		property int critPerc: 5
+		property list<var> popupThresholds: [
+			{
+				perc: 20,
+				name: qsTr("Low battery"),
+				message: qsTr("Battery is low"),
+				icon: "battery_android_frame_2"
+			},
+		]
+	}
 	component Color: JsonObject {
 		property int hyprsunsetTemp: 5000
 		property string mode: "dark"

Config/LockConf.qml

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

Config/Screenshot.qml

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

Daemons/BatteryService.qml

@@ -0,0 +1,70 @@
+import Quickshell
+import Quickshell.Services.UPower
+import QtQuick
+import ZShell
+import qs.Config
+import qs.Components.Toast
+import qs.Helpers
+
+Scope {
+	id: root
+
+	readonly property list<var> popupThresholds: [...Config.general.battery.popupThresholds].sort((a, b) => b.perc - a.perc)
+
+	function nearestThresholdAbove(p: real): var {
+		const thresholds = [...root.popupThresholds];
+		for (const perc of thresholds) {
+			if (p < perc.perc)
+				return perc;
+		}
+
+		return null;
+	}
+
+	Connections {
+		function onOnBatteryChanged(): void {
+			if (!Battery.ready)
+				return;
+
+			if (Battery.onBattery) {
+				if (Config.utilities.toasts.chargingChanged)
+					Toaster.toast(qsTr("Charger unplugged"), qsTr("Battery is discharging"), "power_off");
+				const p = Battery.currentPerc * 100;
+				const perc = root.nearestThresholdAbove(p);
+				if (perc)
+					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
+			} else {
+				if (Config.utilities.toasts.chargingChanged)
+					Toaster.toast(qsTr("Charger plugged in"), qsTr("Battery is charging"), "power");
+			}
+		}
+
+		target: Battery
+	}
+
+	Connections {
+		function onCurrentPercChanged(): void {
+			if (!Battery.onBattery)
+				return;
+
+			const p = Battery.currentPerc * 100;
+			for (const perc of root.popupThresholds) {
+				if (p == perc.perc) {
+					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery perc is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
+				}
+			}
+		}
+
+		function onReadyChanged(): void {
+			if (!Battery.ready)
+				return;
+
+			const p = Battery.currentPerc * 100;
+			const perc = root.nearestThresholdAbove(p);
+			if (perc)
+				Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
+		}
+
+		target: Battery
+	}
+}

Daemons/NotifServer.qml

@@ -179,6 +179,8 @@ Singleton {
 		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 {
@@ -214,9 +216,9 @@ Singleton {
 			}
 
 			function onImageChanged(): void {
-				notif.image = notif.notification.image;
+				notif.imageSource = notif.notification.image || "";
-				if (notif.notification?.image)
+				notif.image = notif.imageSource;
-					notif.dummyImageLoader.active = true;
+				notif.cacheImageIfNeeded();
 			}
 
 			function onResidentChanged(): void {
@@ -233,60 +235,12 @@ Singleton {
 
 			target: notif.notification
 		}
-		readonly property LazyLoader dummyImageLoader: LazyLoader {
-			active: false
-
-			PanelWindow {
-				color: "transparent"
-				implicitHeight: Config.notifs.sizes.image
-				implicitWidth: Config.notifs.sizes.image
-
-				mask: Region {
-				}
-
-				Image {
-					function tryCache(): void {
-						if (status !== Image.Ready || width != Config.notifs.sizes.image || height != Config.notifs.sizes.image)
-							return;
-
-						const cacheKey = notif.appName + notif.summary + notif.id;
-						let h1 = 0xdeadbeef, h2 = 0x41c6ce57, ch;
-						for (let i = 0; i < cacheKey.length; i++) {
-							ch = cacheKey.charCodeAt(i);
-							h1 = Math.imul(h1 ^ ch, 2654435761);
-							h2 = Math.imul(h2 ^ ch, 1597334677);
-						}
-						h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
-						h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-						h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
-						h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
-						const hash = (h2 >>> 0).toString(16).padStart(8, 0) + (h1 >>> 0).toString(16).padStart(8, 0);
-
-						const cache = `${Paths.notifimagecache}/${hash}.png`;
-						ZShellIo.saveItem(this, Qt.resolvedUrl(cache), () => {
-							notif.image = cache;
-							notif.dummyImageLoader.active = false;
-						});
-					}
-
-					anchors.fill: parent
-					asynchronous: true
-					cache: false
-					fillMode: Image.PreserveAspectCrop
-					opacity: 0
-					source: Qt.resolvedUrl(notif.image)
-
-					onHeightChanged: tryCache()
-					onStatusChanged: tryCache()
-					onWidthChanged: tryCache()
-				}
-			}
-		}
 		property real expireTimeout: 5
 		property bool hasActionIcons
-		property string id
 		property string image
+		property string imageSource
 		property var locks: new Set()
+		property string notifId
 		property Notification notification
 		property bool popup
 		property bool resident
@@ -329,6 +283,26 @@ Singleton {
 		}
 		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)) {
@@ -352,14 +326,13 @@ Singleton {
 			if (!notification)
 				return;
 
-			id = notification.id;
+			notifId = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			image = notification.image;
+			imageSource = notification.image || "";
-			if (notification?.image)
+			image = imageSource;
-				dummyImageLoader.active = true;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -369,6 +342,8 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
+
+			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

@@ -1,107 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Shapes
-import qs.Components
-import qs.Config
-import qs.Modules as Modules
-import qs.Modules.Notifications as Notifications
-import qs.Modules.Notifications.Sidebar as Sidebar
-import qs.Modules.Notifications.Sidebar.Utils as Utils
-import qs.Modules.Dashboard as Dashboard
-import qs.Modules.Osd as Osd
-import qs.Modules.Launcher as Launcher
-import qs.Modules.Resources as Resources
-import qs.Modules.Drawing as Drawing
-import qs.Modules.Settings as Settings
-import qs.Modules.Dock as Dock
-
-Shape {
-	id: root
-
-	required property Item bar
-	required property Panels panels
-	required property PersistentProperties visibilities
-
-	anchors.fill: parent
-	anchors.margins: Config.barConfig.border
-	anchors.topMargin: bar.implicitHeight
-	asynchronous: true
-	preferredRendererType: Shape.CurveRenderer
-
-	Drawing.Background {
-		startX: 0
-		startY: wrapper.y - rounding
-		wrapper: root.panels.drawing
-	}
-
-	Resources.Background {
-		startX: 0 - rounding
-		startY: 0
-		wrapper: root.panels.resources
-	}
-
-	Osd.Background {
-		startX: root.width - root.panels.sidebar.width
-		startY: (root.height - wrapper.height) / 2 - rounding
-		wrapper: root.panels.osd
-	}
-
-	Modules.Background {
-		invertBottomRounding: wrapper.x <= 0
-		rounding: root.panels.popouts.currentName.startsWith("updates") || root.panels.popouts.currentName.startsWith("audio") ? Appearance.rounding.normal : Appearance.rounding.smallest
-		startX: wrapper.x - rounding
-		startY: wrapper.y
-		wrapper: root.panels.popouts
-	}
-
-	Notifications.Background {
-		sidebar: sidebar
-		startX: root.width
-		startY: 0
-		wrapper: root.panels.notifications
-	}
-
-	Launcher.Background {
-		startX: (root.width - wrapper.width) / 2 - rounding
-		startY: root.height
-		wrapper: root.panels.launcher
-	}
-
-	Dashboard.Background {
-		startX: root.width - root.panels.dashboard.width - rounding
-		startY: 0
-		wrapper: root.panels.dashboard
-	}
-
-	Utils.Background {
-		sidebar: sidebar
-		startX: root.width
-		startY: root.height
-		wrapper: root.panels.utilities
-	}
-
-	Sidebar.Background {
-		id: sidebar
-
-		panels: root.panels
-		startX: root.width
-		startY: root.panels.notifications.height
-		wrapper: root.panels.sidebar
-	}
-
-	Settings.Background {
-		id: settings
-
-		startX: (root.width - wrapper.width) / 2 - rounding
-		startY: 0
-		wrapper: root.panels.settings
-	}
-
-	Dock.Background {
-		id: dock
-
-		startX: (root.width - wrapper.width) / 2 - rounding
-		startY: root.height
-		wrapper: root.panels.dock
-	}
-}

Drawers/Drawers.qml

@@ -0,0 +1,25 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+
+Variants {
+	model: Quickshell.screens
+
+	Scope {
+		id: scope
+
+		required property ShellScreen modelData
+
+		Exclusions {
+			bar: content.bar
+			screen: scope.modelData
+		}
+
+		Windows {
+			id: content
+
+			screen: scope.modelData
+		}
+	}
+}

Drawers/Drawing.qml

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

Drawers/DrawingInput.qml

@@ -22,18 +22,20 @@ CustomMouseArea {
 	}
 
 	acceptedButtons: Qt.LeftButton | Qt.RightButton
-	anchors.fill: root.visibilities.isDrawing ? parent : undefined
+	enabled: z > 0
 	hoverEnabled: true
 	visible: root.visibilities.isDrawing
 
 	onPositionChanged: event => {
 		const x = event.x;
 		const y = event.y;
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
+			return;
+		}
 
-		if (event.buttons & Qt.LeftButton)
+		if (!(event.buttons & Qt.LeftButton) && root.inLeftPanel(root.popout, x, y)) {
-			root.drawing.appendPoint(x, y);
-
-		if (root.inLeftPanel(root.popout, x, y)) {
 			root.z = -2;
 			root.panels.drawing.expanded = true;
 		}
@@ -44,7 +46,8 @@ CustomMouseArea {
 
 		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
 			root.panels.drawing.expanded = false;
-			root.drawing.beginStroke(x, y);
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
 			return;
 		}
 
@@ -52,7 +55,6 @@ CustomMouseArea {
 			root.drawing.clear();
 	}
 	onReleased: {
-		if (root.visibilities.isDrawing)
+		root.drawing.points = [];
-			root.drawing.endStroke();
 	}
 }

Drawers/Exclusions.qml

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

Drawers/Interactions.qml

@@ -2,20 +2,21 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
+import qs.Helpers
 import qs.Modules as BarPopouts
 
-CustomMouseArea {
+Item {
 	id: root
 
 	required property Item bar
 	property bool dashboardShortcutActive
-	property point dragStart
 	required property Drawing drawing
 	required property DrawingInput input
 	property bool osdShortcutActive
 	required property Panels panels
 	required property BarPopouts.Wrapper popouts
 	required property ShellScreen screen
+	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
 	required property PersistentProperties visibilities
 
@@ -52,78 +53,123 @@ CustomMouseArea {
 	}
 
 	anchors.fill: parent
-	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-	hoverEnabled: true
-	propagateComposedEvents: false
 
-	onContainsMouseChanged: {
+	DragHandler {
-		if (!containsMouse) {
+		id: singleHandler
-			if (!osdShortcutActive) {
+
-				visibilities.osd = false;
+		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-				root.panels.osd.hovered = false;
+		dragThreshold: 0
+		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 dragX = x - centroid.pressPosition.x;
+			const dragY = y - centroid.pressPosition.y;
+
+			if (centroid.pressPosition.y >= root.screen.height - Config.barConfig.border && dragY < -200)
+				root.visibilities.launcher = true;
+
+			if (root.singleGestureTriggered)
+				return;
+
+			if (centroid.pressPosition.y < root.bar.implicitHeight) {
+				if (dragY > 20) {
+					root.visibilities.settings = true;
+					root.singleGestureTriggered = true;
+				} else if (dragY < -20) {
+					root.visibilities.settings = false;
+					root.singleGestureTriggered = true;
+				}
 			}
 
-			if (!popouts.currentName.startsWith("traymenu")) {
+			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight)
-				popouts.hasCurrent = false;
+				if (dragY < -10) {
+					root.visibilities.dock = true;
+					root.singleGestureTriggered = true;
+				}
+
+			if (centroid.pressPosition.x > root.screen.width - Config.barConfig.border && centroid.pressPosition.y < (root.screen.height / 2) && dragX < -20) {
+				root.visibilities.sidebar = true;
+				root.singleGestureTriggered = true;
 			}
 
-			if (Config.barConfig.autoHide)
+			if (centroid.pressPosition.x >= root.screen.width - Config.barConfig.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
-				bar.isHovered = false;
+				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+				root.singleGestureTriggered = true;
+			}
+
+			if (centroid.pressPosition.x <= Config.barConfig.border && dragX > 20) {
+				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
+				root.singleGestureTriggered = true;
+			}
 		}
 	}
-	onPositionChanged: event => {
-		const x = event.x;
-		const y = event.y;
-		const dragX = x - dragStart.x;
-		const dragY = y - dragStart.y;
 
-		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
+	HoverHandler {
-			root.input.z = 2;
+		id: hoverHandler
-			root.panels.drawing.expanded = false;
+
+		onHoveredChanged: {
+			if (!hovered) {
+				if (!root.osdShortcutActive) {
+					root.visibilities.osd = false;
+					root.panels.osd.hovered = false;
+				}
+
+				if (!root.popouts.currentName.startsWith("traymenu")) {
+					root.popouts.hasCurrent = false;
+				}
+
+				if (Config.barConfig.autoHide)
+					root.bar.isHovered = false;
+			}
 		}
+		onPointChanged: {
+			const x = point.position.x;
+			const y = point.position.y;
 
-		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+			if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
-			bar.isHovered = true;
+				root.input.z = 2;
+				root.panels.drawing.expanded = false;
+			}
 
-		if (pressed && dragStart.y < bar.implicitHeight) {
+			if (!root.visibilities.bar && Config.barConfig.autoHide && y < root.bar.implicitHeight)
-			if (dragY > 20)
+				root.bar.isHovered = true;
-				visibilities.settings = true;
-			else if (dragY < -20)
-				visibilities.settings = false;
-		}
 
-		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
+			if (root.panels.sidebar.width === 0) {
-			if (dragY < -10)
+				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-				visibilities.dock = true;
-
-			if (panels.sidebar.width === 0) {
-				const showOsd = inRightPanel(panels.osdWrapper, x, y);
 
 				if (showOsd) {
-					osdShortcutActive = false;
+					root.osdShortcutActive = false;
 					root.panels.osd.hovered = true;
 				}
 			} else {
-				const outOfSidebar = x < width - panels.sidebar.width;
+				const outOfSidebar = x < root.width - root.panels.sidebar.width;
-				const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
+				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
 
-				if (!osdShortcutActive) {
+				if (!root.osdShortcutActive) {
-					visibilities.osd = showOsd;
+					root.visibilities.osd = showOsd;
 					root.panels.osd.hovered = showOsd;
 				} else if (showOsd) {
-					osdShortcutActive = false;
+					root.osdShortcutActive = false;
 					root.panels.osd.hovered = true;
 				}
 			}
 
-		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
+			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
-			visibilities.dock = true;
+				root.visibilities.dock = true;
 
-		if (y < root.bar.implicitHeight) {
+			if (y < root.bar.implicitHeight)
-			root.bar.checkPopout(x);
+				root.bar.checkPopout(x);
 		}
 	}
-	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -132,6 +178,8 @@ CustomMouseArea {
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
+				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
+					root.visibilities.launcher = false;
 
 				root.visibilities.settings = false;
 				root.visibilities.sidebar = false;
@@ -161,6 +209,10 @@ CustomMouseArea {
 			}
 
 			if (root.visibilities.launcher) {
+				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
+					root.visibilities.dashboard = false;
+				}
+
 				root.visibilities.dock = false;
 				root.visibilities.settings = false;
 			}

Drawers/Panels.qml

@@ -34,6 +34,7 @@ Item {
 	readonly property alias resourcesWrapper: resourcesWrapper
 	required property ShellScreen screen
 	readonly property alias settings: settings
+	readonly property alias settingsWrapper: settingsWrapper
 	readonly property alias sidebar: sidebar
 	readonly property alias toasts: toasts
 	readonly property alias utilities: utilities
@@ -176,15 +177,25 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Settings.Wrapper {
+	Item {
-		id: settings
+		id: settingsWrapper
 
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		// anchors.centerIn: parent
+		clip: true
-		panels: root
+		implicitHeight: settings.implicitHeight * (1 - settings.offsetScale)
-		screen: root.screen
+		implicitWidth: settings.implicitWidth
-		visibilities: root.visibilities
+
+		Settings.Wrapper {
+			id: settings
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.top: parent.top
+			// anchors.centerIn: parent
+			panels: root
+			screen: root.screen
+			visibilities: root.visibilities
+		}
 	}
 
 	Dock.Wrapper {

Drawers/Windows.qml

@@ -9,370 +9,380 @@ import Quickshell.Hyprland
 import ZShell.Blobs
 import qs.Daemons
 import qs.Components
-import qs.Modules
 import qs.Modules.Bar
 import qs.Config
 import qs.Helpers
 import qs.Drawers
 
-Variants {
+CustomWindow {
-	model: Quickshell.screens
+	id: root
 
-	Scope {
+	readonly property alias bar: bar
-		id: scope
+	readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
+	readonly property alias interactionWrapper: interactions
+	property var root: Quickshell.shellDir
 
-		required property var modelData
+	WlrLayershell.exclusionMode: ExclusionMode.Ignore
+	// WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+	color: "transparent"
+	contentItem.focus: true
+	mask: visibilities.isDrawing ? null : region
+	name: "Bar"
 
-		Exclusions {
+	contentItem.Keys.onEscapePressed: {
-			bar: bar
+		if (Config.barConfig.autoHide)
-			screen: scope.modelData
+			visibilities.bar = false;
+		visibilities.sidebar = false;
+		visibilities.dashboard = false;
+		visibilities.osd = false;
+		visibilities.settings = false;
+		visibilities.resources = false;
+	}
+	onHasFullscreenChanged: {
+		visibilities.launcher = false;
+		visibilities.dashboard = false;
+		visibilities.osd = false;
+		visibilities.settings = false;
+		visibilities.resources = false;
+	}
+
+	Region {
+		id: region
+
+		height: root.height - bar.implicitHeight - Config.barConfig.border
+		intersection: Intersection.Xor
+		regions: popoutRegions.instances
+		width: root.width - Config.barConfig.border * 2
+		x: Config.barConfig.border
+		y: bar.implicitHeight
+	}
+
+	anchors {
+		bottom: true
+		left: true
+		right: true
+		top: true
+	}
+
+	Variants {
+		id: popoutRegions
+
+		model: panels.children
+
+		Region {
+			required property Item modelData
+
+			height: modelData.height
+			intersection: Intersection.Subtract
+			width: modelData.width
+			x: modelData.x + Config.barConfig.border
+			y: modelData.y + bar.implicitHeight
+		}
+	}
+
+	HyprlandFocusGrab {
+		id: focusGrab
+
+		active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
+		windows: [root]
+
+		onCleared: {
+			visibilities.launcher = false;
+			visibilities.sidebar = false;
+			visibilities.dashboard = false;
+			visibilities.osd = false;
+			visibilities.settings = false;
+			visibilities.resources = false;
+			visibilities.dock = false;
+			panels.popouts.hasCurrent = false;
+		}
+	}
+
+	PersistentProperties {
+		id: visibilities
+
+		property bool bar
+		property bool dashboard
+		property bool dock
+		property bool isDrawing
+		property bool launcher
+		property bool notif: NotifServer.popups.length > 0
+		property bool osd
+		property bool resources
+		property bool settings
+		property bool sidebar
+
+		Component.onCompleted: Visibilities.load(root.screen, this)
+	}
+
+	IpcHandler {
+		function toggleLauncher(fix: string): void {
+			visibilities.launcher = !visibilities.launcher;
 		}
 
-		CustomWindow {
+		target: "visibilities"
-			id: win
+	}
 
-			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
+	Binding {
-			property var root: Quickshell.shellDir
+		property: "bar"
+		target: visibilities
+		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.barConfig.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
+		when: Config.barConfig.autoHide
+	}
 
-			WlrLayershell.exclusionMode: ExclusionMode.Ignore
+	Item {
-			WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+		anchors.fill: parent
-			color: "transparent"
+		layer.enabled: true
-			contentItem.focus: true
+		opacity: Appearance.transparency.enabled ? DynamicColors.transparency.base : 1
-			mask: visibilities.isDrawing ? null : region
-			name: "Bar"
-			screen: scope.modelData
 
-			contentItem.Keys.onEscapePressed: {
+		layer.effect: MultiEffect {
-				if (Config.barConfig.autoHide)
+			blurMax: 32
-					visibilities.bar = false;
+			shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
-				visibilities.sidebar = false;
+			shadowEnabled: true
-				visibilities.dashboard = false;
+		}
-				visibilities.osd = false;
-				visibilities.settings = false;
-				visibilities.resources = false;
-			}
-			onHasFullscreenChanged: {
-				visibilities.launcher = false;
-				visibilities.dashboard = false;
-				visibilities.osd = false;
-				visibilities.settings = false;
-				visibilities.resources = false;
-			}
 
-			Region {
+		BlobGroup {
-				id: region
+			id: blobGroup
 
-				height: win.height - bar.implicitHeight - Config.barConfig.border
+			color: DynamicColors.palette.m3surface
-				intersection: Intersection.Xor
+			smoothing: Config.barConfig.smoothing
-				regions: popoutRegions.instances
-				width: win.width - Config.barConfig.border * 2
-				x: Config.barConfig.border
-				y: bar.implicitHeight
-			}
 
-			anchors {
+			Behavior on color {
-				bottom: true
+				CAnim {
-				left: true
-				right: true
-				top: true
-			}
-
-			Variants {
-				id: popoutRegions
-
-				model: panels.children
-
-				Region {
-					required property Item modelData
-
-					height: modelData.height
-					intersection: Intersection.Subtract
-					width: modelData.width
-					x: modelData.x + Config.barConfig.border
-					y: modelData.y + bar.implicitHeight
 				}
 			}
+		}
 
-			HyprlandFocusGrab {
+		BlobInvertedRect {
-				id: focusGrab
+			anchors.fill: parent
+			anchors.margins: -50
+			borderBottom: Config.barConfig.border - anchors.margins
+			borderLeft: Config.barConfig.border - anchors.margins
+			borderRight: Config.barConfig.border - anchors.margins
+			borderTop: bar.implicitHeight - anchors.margins
+			group: blobGroup
+			radius: Config.barConfig.rounding
+		}
 
-				active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
+		PanelBg {
-				windows: [win]
+			id: dashBg
 
-				onCleared: {
+			property real extraHeight: 0.2
-					visibilities.launcher = false;
+
-					visibilities.sidebar = false;
+			deformAmount: 0.06
-					visibilities.dashboard = false;
+			implicitHeight: panels.dashboard.height * (1 + extraHeight)
-					visibilities.osd = false;
+			implicitWidth: panels.dashboard.width
-					visibilities.settings = false;
+			panel: panels.dashboardWrapper
-					visibilities.resources = false;
+			radius: Appearance.rounding.normal
-					visibilities.dock = false;
+			x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
-					panels.popouts.hasCurrent = false;
+			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+		}
+
+		PanelBg {
+			id: launcherBg
+
+			property real extraHeight: 0.2
+
+			deformAmount: 0.06
+			implicitHeight: panels.launcher.height * (1 + extraHeight)
+			panel: panels.launcher
+			radius: Appearance.rounding.smallest + 5
+			y: panels.launcher.y + bar.implicitHeight
+		}
+
+		PanelBg {
+			id: sidebarBg
+
+			bottomLeftRadius: 0
+			deformAmount: 0.04
+			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
+			implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
+			panel: panels.sidebar
+		}
+
+		PanelBg {
+			id: osdBg
+
+			deformAmount: 0.1
+			implicitHeight: panels.osd.height
+			implicitWidth: panels.osd.width
+			panel: panels.osdWrapper
+			radius: 20
+			x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
+			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
+		}
+
+		PanelBg {
+			id: notifsBg
+
+			panel: panels.notifications
+			radius: Appearance.rounding.normal
+		}
+
+		PanelBg {
+			id: utilsBg
+
+			deformAmount: panels.sidebar.visible ? (0.1) : (0.1)
+			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
+			panel: panels.utilities
+			topLeftRadius: 0
+		}
+
+		PanelBg {
+			id: popoutBg
+
+			property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
+
+			deformAmount: panels.popouts.isDetached ? 0.05 : panels.popouts.hasCurrent ? 0.15 : 0.1
+			implicitHeight: panels.popouts.height * (1 + extraHeight)
+			implicitWidth: panels.popouts.width
+			panel: panels.popoutsWrapper
+			radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : 20 * Appearance.rounding.scale
+			x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
+			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+
+			Behavior on extraHeight {
+				Anim {
 				}
 			}
+		}
 
-			PersistentProperties {
+		PanelBg {
-				id: visibilities
+			id: resourcesBg
 
-				property bool bar
+			deformAmount: 0.05
-				property bool dashboard
+			implicitHeight: panels.resources.height
-				property bool dock
+			implicitWidth: panels.resources.width
-				property bool isDrawing
+			panel: panels.resourcesWrapper
-				property bool launcher
+			radius: Appearance.rounding.normal
-				property bool notif: NotifServer.popups.length > 0
+			x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
-				property bool osd
+			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
-				property bool resources
+		}
-				property bool settings
-				property bool sidebar
 
-				Component.onCompleted: Visibilities.load(scope.modelData, this)
+		PanelBg {
+			id: settingsBg
+
+			property real extraHeight: 0.2
+
+			deformAmount: 0.03
+			implicitHeight: panels.settings.height * (1 + extraHeight)
+			implicitWidth: panels.settings.width
+			panel: panels.settings
+			radius: Appearance.rounding.large
+			topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
+			topRightRadius: Appearance.rounding.large + Appearance.padding.smaller
+			x: panels.settingsWrapper.x + panels.settings.x + Config.barConfig.border
+			y: panels.settingsWrapper.y + panels.settings.y + bar.implicitHeight - panels.settings.height * extraHeight
+		}
+
+		PanelBg {
+			id: dockBg
+
+			deformAmount: 0.08
+			panel: panels.dock
+			radius: Appearance.rounding.normal
+		}
+
+		PanelBg {
+			id: drawingBg
+
+			deformAmount: 0.08
+			panel: panels.drawing
+			radius: Appearance.rounding.normal
+		}
+	}
+
+	Loader {
+		id: drawingLoader
+
+		active: visibilities.isDrawing
+		anchors.fill: parent
+
+		sourceComponent: Drawing {
+			id: drawing
+		}
+	}
+
+	Loader {
+		id: inputLoader
+
+		active: visibilities.isDrawing
+		anchors.fill: parent
+		z: 2
+
+		sourceComponent: DrawingInput {
+			id: input
+
+			bar: bar
+			drawing: drawingLoader.item
+			panels: panels
+			popout: panels.drawing
+			visibilities: visibilities
+		}
+	}
+
+	Interactions {
+		id: interactions
+
+		anchors.fill: parent
+		bar: bar
+		drawing: drawingLoader.item
+		enabled: true
+		input: inputLoader.item
+		panels: panels
+		popouts: panels.popouts
+		screen: root.screen
+		visibilities: visibilities
+
+		Panels {
+			id: panels
+
+			bar: bar
+			drawingItem: drawingLoader.item
+			screen: root.screen
+			visibilities: visibilities
+
+			dashboard.transform: Matrix4x4 {
+				matrix: dashBg.deformMatrix
 			}
-
+			dock.transform: Matrix4x4 {
-			IpcHandler {
+				matrix: dockBg.deformMatrix
-				function toggleLauncher(fix: string): void {
-					visibilities.launcher = !visibilities.launcher;
-				}
-
-				target: "visibilities"
 			}
-
+			launcher.transform: Matrix4x4 {
-			Binding {
+				matrix: launcherBg.deformMatrix
-				property: "bar"
-				target: visibilities
-				value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.barConfig.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
-				when: Config.barConfig.autoHide
 			}
-
+			notifications.transform: Matrix4x4 {
-			Item {
+				matrix: notifsBg.deformMatrix
-				anchors.fill: parent
-				layer.enabled: true
-				opacity: Appearance.transparency.enabled ? DynamicColors.transparency.base : 1
-
-				layer.effect: MultiEffect {
-					blurMax: 32
-					shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
-					shadowEnabled: true
-				}
-
-				BlobGroup {
-					id: blobGroup
-
-					color: DynamicColors.palette.m3surface
-
-					Behavior on color {
-						CAnim {
-						}
-					}
-				}
-
-				BlobInvertedRect {
-					anchors.fill: parent
-					anchors.margins: -50
-					borderBottom: Config.barConfig.border - anchors.margins
-					borderLeft: Config.barConfig.border - anchors.margins
-					borderRight: Config.barConfig.border - anchors.margins
-					borderTop: bar.implicitHeight - anchors.margins
-					group: blobGroup
-					radius: Config.barConfig.rounding
-				}
-
-				PanelBg {
-					id: dashBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					implicitHeight: panels.dashboard.height
-					implicitWidth: panels.dashboard.width
-					panel: panels.dashboard
-					radius: Appearance.rounding.normal
-					x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
-					y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight
-				}
-
-				PanelBg {
-					id: launcherBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					panel: panels.launcher
-					radius: Appearance.rounding.smallest + 5
-				}
-
-				PanelBg {
-					id: sidebarBg
-
-					bottomLeftRadius: 0
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
-					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
-					panel: panels.sidebar
-				}
-
-				PanelBg {
-					id: osdBg
-
-					deformAmount: 0.1 * Config.appearance.deform.scale
-					implicitHeight: panels.osd.height
-					implicitWidth: panels.osd.width
-					panel: panels.osd
-					radius: 20
-					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
-					y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
-				}
-
-				PanelBg {
-					id: notifsBg
-
-					panel: panels.notifications
-				}
-
-				PanelBg {
-					id: utilsBg
-
-					deformAmount: panels.sidebar.visible ? (0.1 * Config.appearance.deform.scale) : (0.1 * Config.appearance.deform.scale)
-					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
-					panel: panels.utilities
-					topLeftRadius: 0
-				}
-
-				PanelBg {
-					id: popoutBg
-
-					property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
-
-					deformAmount: panels.popouts.isDetached ? 0.05 * Config.appearance.deform.scale : panels.popouts.hasCurrent ? 0.15 * Config.appearance.deform.scale : 0.1 * Config.appearance.deform.scale
-					implicitHeight: panels.popouts.height * (1 + extraHeight)
-					implicitWidth: panels.popouts.width
-					panel: panels.popouts
-					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : Appearance.rounding.smallest
-					x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
-					y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
-
-					Behavior on extraHeight {
-						Anim {
-						}
-					}
-				}
-
-				PanelBg {
-					id: resourcesBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					implicitHeight: panels.resources.height
-					implicitWidth: panels.resources.width
-					panel: panels.resources
-					radius: Appearance.rounding.normal
-					x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
-					y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
-				}
-
-				PanelBg {
-					id: settingsBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					panel: panels.settings
-					radius: Appearance.rounding.large
-					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
-					topRightRadius: Appearance.rounding.large + Appearance.padding.smaller
-				}
-
-				PanelBg {
-					id: dockBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					panel: panels.dock
-					radius: Appearance.rounding.normal
-				}
-
-				PanelBg {
-					id: drawingBg
-
-					deformAmount: 0.08 * Config.appearance.deform.scale
-					panel: panels.drawing
-					radius: Appearance.rounding.normal
-				}
 			}
-
+			osd.transform: Matrix4x4 {
-			Drawing {
+				matrix: osdBg.deformMatrix
-				id: drawing
-
-				anchors.fill: parent
-				z: 2
 			}
-
+			popouts.transform: Matrix4x4 {
-			DrawingInput {
+				matrix: popoutBg.deformMatrix
-				id: input
-
-				bar: bar
-				drawing: drawing
-				panels: panels
-				popout: panels.drawing
-				visibilities: visibilities
-				z: 2
 			}
-
+			resources.transform: Matrix4x4 {
-			Interactions {
+				matrix: resourcesBg.deformMatrix
-				id: mouseArea
-
-				anchors.fill: parent
-				bar: bar
-				drawing: drawing
-				input: input
-				panels: panels
-				popouts: panels.popouts
-				screen: scope.modelData
-				visibilities: visibilities
-				z: 1
-
-				Panels {
-					id: panels
-
-					bar: bar
-					drawingItem: drawing
-					screen: scope.modelData
-					visibilities: visibilities
-
-					dashboard.transform: Matrix4x4 {
-						matrix: dashBg.deformMatrix
-					}
-					dock.transform: Matrix4x4 {
-						matrix: dockBg.deformMatrix
-					}
-					launcher.transform: Matrix4x4 {
-						matrix: launcherBg.deformMatrix
-					}
-					notifications.transform: Matrix4x4 {
-						matrix: notifsBg.deformMatrix
-					}
-					osd.transform: Matrix4x4 {
-						matrix: osdBg.deformMatrix
-					}
-					popouts.transform: Matrix4x4 {
-						matrix: popoutBg.deformMatrix
-					}
-					resources.transform: Matrix4x4 {
-						matrix: resourcesBg.deformMatrix
-					}
-					settings.transform: Matrix4x4 {
-						matrix: settingsBg.deformMatrix
-					}
-					sidebar.transform: Matrix4x4 {
-						matrix: sidebarBg.deformMatrix
-					}
-					utilities.transform: Matrix4x4 {
-						matrix: utilsBg.deformMatrix
-					}
-				}
-
-				BarLoader {
-					id: bar
-
-					anchors.left: parent.left
-					anchors.right: parent.right
-					popouts: panels.popouts
-					popoutsWrapper: panels.popoutsWrapper
-					screen: scope.modelData
-					visibilities: visibilities
-				}
 			}
+			settings.transform: Matrix4x4 {
+				matrix: settingsBg.deformMatrix
+			}
+			sidebar.transform: Matrix4x4 {
+				matrix: sidebarBg.deformMatrix
+			}
+			utilities.transform: Matrix4x4 {
+				matrix: utilsBg.deformMatrix
+			}
+		}
+
+		BarLoader {
+			id: bar
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			popouts: panels.popouts
+			popoutsWrapper: panels.popoutsWrapper
+			screen: root.screen
+			visibilities: visibilities
 		}
 	}
 
@@ -380,7 +390,7 @@ Variants {
 		property real deformAmount: 0.15
 		required property Item panel
 
-		deformScale: deformAmount / 10000
+		deformScale: (deformAmount * Config.appearance.deform.scale) / 10000
 		group: blobGroup
 		implicitHeight: panel.height
 		implicitWidth: panel.width

Greeter/Center.qml

@@ -118,12 +118,12 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				parent.forceActiveFocus();
-			}
-
 			cursorShape: Qt.IBeamCursor
 			hoverEnabled: false
+
+			onClicked: {
+				parent.forceActiveFocus();
+			}
 		}
 
 		RowLayout {
@@ -179,11 +179,11 @@ ColumnLayout {
 				radius: Appearance.rounding.full
 
 				StateLayer {
-					function onClicked(): void {
+					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
+					onClicked: {
 						root.greeter.submit();
 					}
-
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				}
 
 				MaterialIcon {

Greeter/Components/Anim.qml

@@ -2,7 +2,62 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: MaterialEasing.standardTime
+	enum Type {
-	easing.bezierCurve: MaterialEasing.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		Standard,
+		StandardLarge,
+		StandardExtraLarge,
+		EmphasizedSmall,
+		Emphasized,
+		EmphasizedLarge,
+		EmphasizedExtraLarge,
+		FastSpatial,
+		DefaultSpatial,
+		SlowSpatial,
+		FastEffects,
+		DefaultEffects,
+		SlowEffects
+	}
+
+	property int type: Anim.DefaultSpatial
+
+	duration: {
+		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
+			return Appearance.anim.durations.normal;
+
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.durations.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.durations.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.durations.large;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.durations.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.durations.expressiveEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.durations.expressiveSlowEffects;
+
+		const types = ["small", "normal", "large", "extraLarge"];
+		const idx = type % 4; // 0-7 are the 4 standard types
+		return Appearance.anim.durations[types[idx]];
+	}
+	easing.bezierCurve: {
+		if (type === Anim.FastSpatial)
+			return Appearance.anim.curves.expressiveFastSpatial;
+		if (type === Anim.DefaultSpatial)
+			return Appearance.anim.curves.expressiveDefaultSpatial;
+		if (type === Anim.SlowSpatial)
+			return Appearance.anim.curves.expressiveSlowSpatial;
+		if (type === Anim.FastEffects)
+			return Appearance.anim.curves.expressiveFastEffects;
+		if (type === Anim.DefaultEffects)
+			return Appearance.anim.curves.expressiveDefaultEffects;
+		if (type === Anim.SlowEffects)
+			return Appearance.anim.curves.expressiveSlowEffects;
+
+		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
+			return Appearance.anim.curves.emphasized;
+		return Appearance.anim.curves.standard;
+	}
 }

Greeter/Components/CollapsibleSection.qml

@@ -59,15 +59,15 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.toggleRequested();
-				root.expanded = !root.expanded;
-			}
-
 			anchors.fill: parent
 			color: DynamicColors.palette.m3onSurface
 			radius: Appearance.rounding.normal
 			showHoverBackground: false
+
+			onClicked: {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
 		}
 	}
 

Greeter/Components/CustomButton.qml

@@ -23,10 +23,10 @@ Button {
 	}
 
 	StateLayer {
-		function onClicked(): void {
+		radius: control.radius
+
+		onClicked: {
 			control.clicked();
 		}
-
-		radius: control.radius
 	}
 }

Greeter/Components/CustomRadioButton.qml

@@ -33,13 +33,13 @@ RadioButton {
 		}
 
 		StateLayer {
-			function onClicked(): void {
-				root.click();
-			}
-
 			anchors.margins: -7
 			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
 			z: -1
+
+			onClicked: {
+				root.click();
+			}
 		}
 
 		CustomRect {

Greeter/Components/CustomSlider.qml

@@ -1,45 +1,174 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
+import ZShell.Components
+import ZShell
+import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	background: Item {
+	property bool animateWave
+	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property real filledWidth
+	property real pos: visualPosition
+	property int waveDuration: 1000
+	property real waveFrequency: 6
+	property bool wavy
+
+	signal interaction(v: real)
+
+	implicitHeight: 12
+	implicitWidth: 200
+
+	contentItem: Item {
+		anchors.fill: parent
+
 		CustomRect {
-			anchors.bottom: parent.bottom
+			id: remaining
-			anchors.left: parent.left
+
-			anchors.top: parent.top
+			anchors.left: handle.right
-			bottomRightRadius: root.implicitHeight / 6
+			anchors.leftMargin: Appearance.spacing.extraSmall
-			color: DynamicColors.palette.m3primary
+			anchors.right: parent.right
-			implicitWidth: root.handle.x - root.implicitHeight / 2
+			anchors.verticalCenter: parent.verticalCenter
-			radius: Appearance.rounding.full
+			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			topRightRadius: root.implicitHeight / 6
+			color: root.bgColor
+			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
+			opacity: Math.min(width, 12) / 12
+			radius: Appearance.rounding.small
+			topLeftRadius: Appearance.rounding.extraSmall / 2
 		}
 
 		CustomRect {
-			anchors.bottom: parent.bottom
 			anchors.right: parent.right
-			anchors.top: parent.top
+			anchors.rightMargin: 4 * remaining.opacity
-			bottomLeftRadius: root.implicitHeight / 6
+			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: root.fgColor
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			implicitHeight: 4 * remaining.opacity
+			implicitWidth: implicitHeight
+			opacity: remaining.opacity
 			radius: Appearance.rounding.full
-			topLeftRadius: root.implicitHeight / 6
+		}
+
+		CustomRect {
+			id: handle
+
+			anchors.left: filled.right
+			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			color: root.fgColor
+			implicitHeight: {
+				const mult = parent.height <= 12 ? 3 : 1.2;
+				const pressMult = parent.height <= 12 ? 4 : 1.5;
+				return parent.height * (mouse.pressed ? pressMult : mult);
+			}
+			implicitWidth: 4
+			radius: Appearance.rounding.full
+
+			Behavior on implicitHeight {
+				Anim {
+					type: Anim.FastSpatial
+				}
+			}
+		}
+
+		Loader {
+			id: filled
+
+			anchors.left: parent.left
+			anchors.verticalCenter: parent.verticalCenter
+			asynchronous: true
+			sourceComponent: root.wavy ? waveComp : lineComp
+		}
+
+		Component {
+			id: lineComp
+
+			CustomRect {
+				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				color: root.fgColor
+				implicitHeight: root.height
+				implicitWidth: root.filledWidth
+				radius: Appearance.rounding.small
+				topRightRadius: Appearance.rounding.extraSmall / 2
+			}
+		}
+
+		Component {
+			id: waveComp
+
+			WavyLine {
+				color: root.fgColor
+				frequency: root.waveFrequency
+				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
+				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
+				implicitWidth: root.filledWidth
+				lineWidth: root.height * 0.7
+				startX: x
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+				Anim on waveProgress {
+					duration: root.waveDuration
+					easing.type: Easing.Linear
+					from: 0
+					loops: Animation.Infinite
+					paused: !root.animateWave
+					running: true
+					to: 1
+				}
+			}
 		}
 	}
-	handle: CustomRect {
+	Behavior on filledWidth {
-		anchors.verticalCenter: parent.verticalCenter
+		id: widthBehavior
-		color: DynamicColors.palette.m3primary
-		implicitHeight: 15
-		implicitWidth: 5
-		radius: Appearance.rounding.full
-		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		MouseArea {
+		Anim {
-			acceptedButtons: Qt.NoButton
+		}
-			anchors.fill: parent
+	}
-			cursorShape: Qt.PointingHandCursor
+
+	Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
+
+	Binding {
+		id: posBinding
+
+		property: "pos"
+		target: root
+		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
+		when: mouse.pressed
+	}
+
+	MouseArea {
+		id: mouse
+
+		property real dragMovement
+		property real pressStartPos
+		property real pressStartX
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		implicitHeight: handle.implicitHeight
+		preventStealing: true
+
+		onPositionChanged: e => {
+			dragMovement = (e.x - pressStartX) / width;
+			root.interaction(posBinding.value);
+		}
+		onPressed: e => {
+			widthBehavior.enabled = false;
+			pressStartX = e.x;
+			pressStartPos = root.visualPosition;
+		}
+		onReleased: e => {
+			root.interaction(posBinding.value);
+			widthBehavior.enabled = true;
+			dragMovement = 0;
 		}
 	}
 }

Greeter/Components/CustomSpinBox.qml

@@ -28,6 +28,7 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
+		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
 		leftPadding: Appearance.padding.normal
@@ -36,7 +37,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -85,7 +86,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -93,7 +94,9 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.min(root.max, root.value + root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -102,9 +105,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -113,13 +113,13 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,7 +127,9 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				let newValue = Math.max(root.min, root.value - root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -136,9 +138,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -147,7 +146,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
-import qs.Helpers
 
 Row {
 	id: root
@@ -12,66 +11,46 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color colour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
 	property bool disabled
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledTextColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.normal
+	property real horizontalPadding: Appearance.padding.larger
-	property alias iconLabel: iconLabel
+	readonly property alias iconLabel: iconLabel
-	property alias label: label
+	readonly property alias label: label
-	property alias menu: menu
+	readonly property alias menu: menu
 	property alias menuItems: menu.items
 	property bool menuOnTop
-	property alias stateLayer: stateLayer
+	property real minLeftWidth
-	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	readonly property alias stateLayer: stateLayer
+	property color textColour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.smaller
+	property real verticalPadding: Appearance.padding.small
 
-	function closeDropdown(): void {
+	spacing: Math.floor(Appearance.spacing.extraSmall)
-		SettingsDropdowns.close(menu);
-	}
-
-	function openDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.open(menu, root);
-	}
-
-	function toggleDropdown(): void {
-		if (root.disabled)
-			return;
-		SettingsDropdowns.toggle(menu, root);
-	}
-
-	spacing: Math.floor(Appearance.spacing.small / 2)
-
-	onExpandedChanged: {
-		if (!expanded)
-			SettingsDropdowns.forget(menu);
-	}
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
+		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
 		topRightRadius: Appearance.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
 
-			function onClicked(): void {
+			bottomRightRadius: parent.bottomRightRadius
-				root.active?.clicked();
+			color: root.textColour
-			}
-
-			color: root.textColor
 			disabled: root.disabled
-			rect.bottomRightRadius: parent.bottomRightRadius
+			topRightRadius: parent.topRightRadius
-			rect.topRightRadius: parent.topRightRadius
+
+			onClicked: root.active?.clicked()
 		}
 
 		RowLayout {
@@ -86,7 +65,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -98,12 +77,12 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: root.disabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColour : root.textColour
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
 					Anim {
-						easing.bezierCurve: Appearance.anim.curves.emphasized
+						type: Anim.Emphasized
 					}
 				}
 			}
@@ -116,7 +95,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: root.disabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -130,14 +109,12 @@ Row {
 		StateLayer {
 			id: expandStateLayer
 
-			function onClicked(): void {
+			color: root.textColour
-				root.toggleDropdown();
-			}
-
-			color: root.textColor
 			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
+
+			onClicked: root.expanded = !root.expanded
 		}
 
 		MaterialIcon {
@@ -145,7 +122,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: root.disabled ? root.disabledTextColor : root.textColor
+			color: root.disabled ? root.disabledTextColour : root.textColour
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 
@@ -158,24 +135,14 @@ Row {
 				}
 			}
 		}
+	}
 
-		Menu {
+	Menu {
-			id: menu
+		id: menu
 
-			anchors.bottomMargin: Appearance.spacing.small
+		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
-			anchors.right: parent.right
+		attachTo: expandBtn
-			anchors.top: parent.bottom
+		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
-			anchors.topMargin: Appearance.spacing.small
+		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
-
-			states: State {
-				when: root.menuOnTop
-
-				AnchorChanges {
-					anchors.bottom: expandBtn.top
-					anchors.top: undefined
-					target: menu
-				}
-			}
-		}
 	}
 }

Greeter/Components/CustomSplitButtonRow.qml

@@ -8,19 +8,32 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property bool enabled: true
+	property alias buttonAlias: splitButton
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
 	property alias menuItems: splitButton.menuItems
+	property bool shouldBeActive: true
 	property alias type: splitButton.type
 
 	signal selected(item: MenuItem)
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.right: parent.right
 	clip: false
-	z: root.expanded ? expandedZ : -1
+	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -36,7 +49,6 @@ Item {
 			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
 			font.pointSize: Appearance.font.size.larger
 			text: root.label
-			z: root.expanded ? root.expandedZ : -1
 		}
 
 		CustomSplitButton {
@@ -44,14 +56,16 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: root.expanded ? root.expandedZ : -1
+			z: 2
 
 			menu.onItemSelected: item => {
 				root.selected(item);
-				splitButton.closeDropdown();
+			// splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.toggleDropdown();
+				// splitButton.toggleDropdown();
+				splitButton.expanded = !splitButton.expanded;
+				console.log(root.z);
 			}
 		}
 	}

Greeter/Components/CustomSwitch.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Templates
 import QtQuick.Shapes
+import QtQuick.Templates
 import qs.Config
 
 Switch {
@@ -12,38 +12,41 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: 13 + 7 * 2
+		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
 
 		CustomRect {
-			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - 10
+			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
+					type: Anim.FastSpatial
 				}
 			}
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
 				Behavior on opacity {
 					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -63,14 +66,14 @@ Switch {
 				}
 				property point end2: {
 					if (root.pressed)
-						return Qt.point(width, height / 2);
+						return Qt.point(width * 0.8, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.85, height * 0.2);
 					return Qt.point(width * 0.85, height * 0.15);
 				}
 				property point start1: {
 					if (root.pressed)
-						return Qt.point(width * 0.1, height / 2);
+						return Qt.point(width * 0.2, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.15, height / 2);
 					return Qt.point(width * 0.15, height * 0.15);
@@ -88,7 +91,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.small * 2
+				height: parent.implicitHeight - Appearance.padding.larger
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -110,11 +113,11 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+					capStyle: ShapePath.RoundCap
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {
@@ -148,8 +151,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: MaterialEasing.expressiveEffectsTime
+		duration: Appearance.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: MaterialEasing.expressiveEffects
+		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-		easing.type: Easing.BezierSpline
 	}
 }

Greeter/Components/CustomText.qml

@@ -15,6 +15,7 @@ Text {
 	color: DynamicColors.palette.m3onSurface
 	font.family: Appearance.font.family.sans
 	font.pointSize: Appearance.font.size.normal
+	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Greeter/Components/Elevation.qml

@@ -1,6 +1,6 @@
-import qs.Config
 import QtQuick
 import QtQuick.Effects
+import qs.Config
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
@@ -13,6 +13,7 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
+			type: Anim.SlowEffects
 		}
 	}
 }

Greeter/Components/HoverIconButton.qml

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

Greeter/Components/IconButton.qml

@@ -41,12 +41,11 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
-
 		}
 	}
 
@@ -55,14 +54,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		function onClicked(): void {
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+
+		onClicked: {
 			if (root.toggle)
 				root.internalChecked = !root.internalChecked;
 			root.clicked();
 		}
-
-		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-		disabled: root.disabled
 	}
 
 	MaterialIcon {

Greeter/Components/MarqueeText.qml

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

Greeter/Components/Menu.qml

@@ -2,109 +2,169 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import qs.Config
+import qs.Drawers
 
-Elevation {
+MouseArea {
 	id: root
 
+	enum Side {
+		Top,
+		Bottom,
+		Left,
+		Right
+	}
+
 	property MenuItem active: items[0] ?? null
+	property int attachSideX: Menu.Right
+	property int attachSideY: Menu.Bottom
+	required property Item attachTo
 	property bool expanded
 	property list<MenuItem> items
+	property real marginX
+	property real marginY
+	property int thisSideX: Menu.Right
+	property int thisSideY: Menu.Top
 
 	signal itemSelected(item: MenuItem)
 
-	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	anchors.fill: parent
-	implicitWidth: Math.max(200, column.implicitWidth)
+	enabled: expanded
-	level: 2
+	layer.enabled: opacity < 1
-	opacity: root.expanded ? 1 : 0
+	opacity: expanded ? 1 : 0
-	radius: Appearance.rounding.normal
+	parent: {
-
+		const win = QsWindow.window;
-	Behavior on implicitHeight {
+		const contentWin = win as Windows;
-		Anim {
+		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-		}
 	}
+
 	Behavior on opacity {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			type: Anim.DefaultEffects
 		}
 	}
 
-	CustomClippingRect {
+	onClicked: expanded = false
-		anchors.fill: parent
-		color: DynamicColors.palette.m3surfaceContainer
-		radius: parent.radius
 
-		ColumnLayout {
+	TransformWatcher {
-			id: column
+		id: watcher
 
-			anchors.left: parent.left
+		a: root.parent
-			anchors.right: parent.right
+		b: root.attachTo
-			anchors.verticalCenter: parent.verticalCenter
+	}
-			spacing: 5
 
-			Repeater {
+	Elevation {
-				model: root.items
+		id: menu
 
-				CustomRect {
+		implicitHeight: column.implicitHeight + column.anchors.margins * 2
-					id: item
+		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
+		level: 2
+		radius: Appearance.rounding.medium
+		x: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideX === Menu.Left ? 0 : item.width;
+			if (root.thisSideX === Menu.Right)
+				off -= width;
+			return item.mapToItem(root.parent, off, 0).x + root.marginX;
+		}
+		y: {
+			watcher.transform;
+			const item = root.attachTo;
+			let off = root.attachSideY === Menu.Top ? 0 : item.height;
+			if (root.thisSideY === Menu.Bottom)
+				off -= height;
+			return item.mapToItem(root.parent, 0, off).y + root.marginY;
+		}
 
-					readonly property bool active: modelData === root.active
+		transform: Scale {
-					required property int index
+			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
-					required property MenuItem modelData
+			yScale: root.expanded ? 1 : 0.1
 
-					Layout.fillWidth: true
+			Behavior on yScale {
-					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+				Anim {
-					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
+				}
+			}
+		}
+
+		CustomRect {
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surfaceContainerLow
+			radius: parent.radius
+
+			ColumnLayout {
+				id: column
+
+				anchors.fill: parent
+				anchors.margins: Appearance.padding.extraSmall
+				spacing: Appearance.spacing.extraSmall
+
+				Repeater {
+					id: repeater
+
+					model: root.items
 
 					CustomRect {
-						anchors.fill: parent
+						id: item
-						anchors.leftMargin: Appearance.padding.small
+
-						anchors.rightMargin: Appearance.padding.small
+						readonly property bool active: modelData === root.active
-						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						required property int index
-						radius: Appearance.rounding.normal - Appearance.padding.small
+						required property MenuItem modelData
+
+						Layout.fillWidth: true
+						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						radius: Appearance.rounding.small
+
+						Behavior on radius {
+							Anim {
+							}
+						}
 
 						StateLayer {
-							function onClicked(): void {
+							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+
+							onClicked: {
 								root.itemSelected(item.modelData);
 								root.active = item.modelData;
+								item.modelData.clicked();
 								root.expanded = false;
 							}
-
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							disabled: !root.expanded
-						}
-					}
-
-					RowLayout {
-						id: menuOptionRow
-
-						anchors.fill: parent
-						anchors.margins: Appearance.padding.normal
-						spacing: Appearance.spacing.small
-
-						MaterialIcon {
-							Layout.alignment: Qt.AlignVCenter
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
-							text: item.modelData.icon
 						}
 
-						CustomText {
+						RowLayout {
-							Layout.alignment: Qt.AlignVCenter
+							id: menuOptionRow
-							Layout.fillWidth: true
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							text: item.modelData.text
-						}
 
-						Loader {
+							anchors.fill: parent
-							Layout.alignment: Qt.AlignVCenter
+							anchors.margins: Appearance.padding.larger
-							active: item.modelData.trailingIcon.length > 0
+							spacing: Appearance.spacing.small
-							visible: active
 
-							sourceComponent: MaterialIcon {
+							MaterialIcon {
-								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								Layout.alignment: Qt.AlignVCenter
-								text: item.modelData.trailingIcon
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								text: item.modelData.icon
+							}
+
+							CustomText {
+								Layout.alignment: Qt.AlignVCenter
+								Layout.fillWidth: true
+								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.text
+							}
+
+							Loader {
+								Layout.alignment: Qt.AlignVCenter
+								active: item.modelData.trailingIcon.length > 0
+								asynchronous: true
+								visible: active
+
+								sourceComponent: MaterialIcon {
+									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									text: item.modelData.trailingIcon
+								}
 							}
 						}
 					}

Greeter/Components/PathViewMenu.qml

@@ -29,6 +29,7 @@ Elevation {
 	level: root.expanded ? 2 : 0
 	radius: itemHeight / 2
 	visible: implicitHeight > 0
+	z: root.expanded ? 100 : 0
 
 	Behavior on implicitHeight {
 		Anim {
@@ -68,6 +69,7 @@ Elevation {
 		anchors.fill: parent
 		color: DynamicColors.palette.m3surfaceContainer
 		radius: parent.radius
+		z: root.z
 
 		// Main visible spinner: normal/outside text color
 		PathView {

Greeter/Components/StateLayer.qml

@@ -1,15 +1,53 @@
-import qs.Config
 import QtQuick
+import QtQuick.Shapes
+import ZShell
+import ZShell.Components
+import qs.Helpers
+import qs.Config
 
 MouseArea {
 	id: root
 
-	property color color: DynamicColors.palette.m3onSurface
+	property alias bottomLeftRadius: base.bottomLeftRadius
+	property alias bottomRightRadius: base.bottomRightRadius
+	property real circleRadius
+	property alias color: base.color
 	property bool disabled
-	property real radius: parent?.radius ?? 0
+	readonly property real endRadius: {
-	property alias rect: hoverLayer
+		const d1 = distSq(0, 0);
+		const d2 = distSq(width, 0);
+		const d3 = distSq(0, height);
+		const d4 = distSq(width, height);
+		return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
+	}
+	property real endRadiusAtPress
+	property bool manualPressOverride
+	property real pressX: width / 2
+	property real pressY: height / 2
+	property alias radius: base.radius
+	readonly property alias rect: base
+	property bool shapeMorph
+	property bool showHoverBackground: true
+	property real stateOpacity: containsMouse ? 0.08 : 0
+	property alias topLeftRadius: base.topLeftRadius
+	property alias topRightRadius: base.topRightRadius
 
-	function onClicked(): void {
+	function clamp(r: real): real {
+		return Math.max(0, Math.min(r, width / 2, height / 2));
+	}
+
+	function distSq(x: real, y: real): real {
+		return (pressX - x) ** 2 + (pressY - y) ** 2;
+	}
+
+	function press(x: real, y: real): void {
+		pressX = x;
+		pressY = y;
+		fadeAnim.complete();
+		circleRadius = 0;
+		circle.opacity = 0.1;
+		rippleAnim.restart();
+		endRadiusAtPress = endRadius;
 	}
 
 	anchors.fill: parent
@@ -17,79 +55,146 @@ MouseArea {
 	enabled: !disabled
 	hoverEnabled: true
 
-	onClicked: event => !disabled && onClicked(event)
+	Behavior on stateOpacity {
-	onPressed: event => {
+		Anim {
-		if (disabled)
+			type: Anim.DefaultEffects
-			return;
+		}
-
-		rippleAnim.x = event.x;
-		rippleAnim.y = event.y;
-
-		const dist = (ox, oy) => ox * ox + oy * oy;
-		rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
-
-		rippleAnim.restart();
 	}
 
-	SequentialAnimation {
+	onCircleRadiusChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onClicked: event => !disabled && onClicked(event)
+	onManualPressOverrideChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onPressed: e => press(e.x, e.y)
+	onPressedChanged: {
+		if (!(pressed || manualPressOverride) && !rippleAnim.running && circle.opacity > 0)
+			fadeAnim.start();
+	}
+
+	Anim {
 		id: rippleAnim
 
-		property real radius
+		alwaysRunToEnd: true
-		property real x
+		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		property real y
+		easing.bezierCurve: Appearance.anim.curves.standard
-
+		property: "circleRadius"
-		PropertyAction {
+		target: root
-			property: "x"
+		to: root.endRadius
-			target: ripple
-			value: rippleAnim.x
-		}
-
-		PropertyAction {
-			property: "y"
-			target: ripple
-			value: rippleAnim.y
-		}
-
-		PropertyAction {
-			property: "opacity"
-			target: ripple
-			value: 0.08
-		}
-
-		Anim {
-			easing.bezierCurve: MaterialEasing.standardDecel
-			from: 0
-			properties: "implicitWidth,implicitHeight"
-			target: ripple
-			to: rippleAnim.radius * 2
-		}
-
-		Anim {
-			property: "opacity"
-			target: ripple
-			to: 0
-		}
 	}
 
-	CustomClippingRect {
+	Anim {
-		id: hoverLayer
+		id: fadeAnim
+
+		property: "opacity"
+		target: circle
+		to: 0
+		type: Anim.SlowEffects
+	}
+
+	CustomRect {
+		id: base
 
 		anchors.fill: parent
-		border.pixelAligned: false
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
-		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		radius: root.radius
+		color: DynamicColors.palette.m3onSurface
+		opacity: root.stateOpacity
+		// Pick up radius from parent if it has one (parent can be anything with radius props)
+		// qmllint disable missing-property
+		radius: root.parent?.radius ?? 0
+		topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
+		topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
+		// qmllint enable missing-property
+	}
 
-		CustomRect {
+	Shape {
-			id: ripple
+		id: circle
 
-			border.pixelAligned: false
+		anchors.fill: parent
-			color: root.color
+		opacity: 0
-			opacity: 0
+		preferredRendererType: Shape.CurveRenderer
-			radius: Appearance.rounding.full
 
-			transform: Translate {
+		ShapePath {
-				x: -ripple.width / 2
+			fillColor: base.color
-				y: -ripple.height / 2
+			startX: root.clamp(base.topLeftRadius)
+			startY: 0
+			strokeColor: "transparent"
+			strokeWidth: 0
+
+			fillGradient: RadialGradient {
+				centerRadius: root.circleRadius
+				centerX: root.pressX
+				centerY: root.pressY
+				focalX: centerX
+				focalY: centerY
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, 1)
+					position: ZUtils.clamp(1 - 0.2 * root.endRadius / root.circleRadius, 0.01, 0.99)
+				}
+
+				GradientStop {
+					color: Qt.alpha(base.color, ZUtils.clamp((root.circleRadius / root.endRadius - 0.9) / 0.1, 0, 1))
+					position: 1
+				}
+			}
+
+			PathLine {
+				x: root.width - root.clamp(base.topRightRadius)
+				y: 0
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topRightRadius)
+				radiusY: root.clamp(base.topRightRadius)
+				relativeX: root.clamp(base.topRightRadius)
+				relativeY: root.clamp(base.topRightRadius)
+			}
+
+			PathLine {
+				x: root.width
+				y: root.height - root.clamp(base.bottomRightRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomRightRadius)
+				radiusY: root.clamp(base.bottomRightRadius)
+				relativeX: -root.clamp(base.bottomRightRadius)
+				relativeY: root.clamp(base.bottomRightRadius)
+			}
+
+			PathLine {
+				x: root.clamp(base.bottomLeftRadius)
+				y: root.height
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.bottomLeftRadius)
+				radiusY: root.clamp(base.bottomLeftRadius)
+				relativeX: -root.clamp(base.bottomLeftRadius)
+				relativeY: -root.clamp(base.bottomLeftRadius)
+			}
+
+			PathLine {
+				x: 0
+				y: root.clamp(base.topLeftRadius)
+			}
+
+			PathArc {
+				radiusX: root.clamp(base.topLeftRadius)
+				radiusY: root.clamp(base.topLeftRadius)
+				x: root.clamp(base.topLeftRadius)
+				y: 0
 			}
 		}
 	}

Greeter/Config/Appearance.qml

@@ -4,10 +4,9 @@ import Quickshell
 
 Singleton {
 	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
-	// Literally just here to shorten accessing stuff :woe:
-	// Also kinda so I can keep accessing it with `Appearance.xxx` instead of `Conf.appearance.xxx`
 	readonly property AppearanceConf.Rounding rounding: Config.appearance.rounding
 	readonly property AppearanceConf.Spacing spacing: Config.appearance.spacing
 	readonly property AppearanceConf.Transparency transparency: Config.appearance.transparency

Greeter/Config/AppearanceConf.qml

@@ -3,6 +3,8 @@ import Quickshell.Io
 JsonObject {
 	property Anim anim: Anim {
 	}
+	property Deform deform: Deform {
+	}
 	property FontStuff font: FontStuff {
 	}
 	property Padding padding: Padding {
@@ -26,9 +28,13 @@ JsonObject {
 		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
 		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
 		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
 		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
 		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
 		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
+		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
+		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
 		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
 		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
 		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
@@ -36,13 +42,18 @@ JsonObject {
 	component AnimDurations: JsonObject {
 		property int expressiveDefaultSpatial: 500 * scale
 		property int expressiveEffects: 200 * scale
+		property int expressiveFastEffects: 150 * scale
 		property int expressiveFastSpatial: 350 * scale
+		property int expressiveSlowEffects: 300 * scale
 		property int extraLarge: 1000 * scale
 		property int large: 600 * scale
 		property int normal: 400 * scale
 		property real scale: 1
 		property int small: 200 * scale
 	}
+	component Deform: JsonObject {
+		property real scale: 1
+	}
 	component FontFamily: JsonObject {
 		property string clock: "Rubik"
 		property string material: "Material Symbols Rounded"
@@ -52,7 +63,8 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
+		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -65,28 +77,33 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int large: 15 * scale
+		property int extraLargeIncreased: 32 * scale
+		property int extraSmall: 4 * scale
+		property int large: 16 * scale
 		property int larger: 12 * scale
-		property int normal: 10 * scale
+		property int normal: 8 * scale
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
 		property int smallest: 2 * scale
 	}
 	component Rounding: JsonObject {
+		property int extraSmall: 4 * scale
 		property int full: 1000 * scale
-		property int large: 25 * scale
+		property int large: 24 * scale
-		property int normal: 17 * scale
+		property int medium: 16 * scale
+		property int normal: 18 * scale
 		property real scale: 1
 		property int small: 12 * scale
 		property int smallest: 8 * scale
 	}
 	component Spacing: JsonObject {
+		property int extraSmall: 4 * scale
 		property int large: 20 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
 		property int normal: 12 * scale
 		property real scale: 1
-		property int small: 7 * scale
+		property int small: 8 * scale
 		property int smaller: 10 * scale
 	}
 	component Transparency: JsonObject {

Greeter/Config/BackgroundConfig.qml

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

Greeter/Config/BarConfig.qml

@@ -8,10 +8,6 @@ JsonObject {
 			id: "workspaces",
 			enabled: true
 		},
-		{
-			id: "audio",
-			enabled: true
-		},
 		{
 			id: "media",
 			enabled: true
@@ -24,10 +20,6 @@ JsonObject {
 			id: "updates",
 			enabled: true
 		},
-		{
-			id: "dash",
-			enabled: true
-		},
 		{
 			id: "spacer",
 			enabled: true
@@ -41,12 +33,12 @@ JsonObject {
 			enabled: true
 		},
 		{
-			id: "tray",
+			id: "hyprsunset",
 			enabled: true
 		},
 		{
-			id: "upower",
+			id: "tray",
-			enabled: false
+			enabled: true
 		},
 		{
 			id: "network",
@@ -62,9 +54,13 @@ JsonObject {
 		},
 	]
 	property int height: 34
+	property bool hideWhenNotif: false
 	property Popouts popouts: Popouts {
 	}
 	property int rounding: 8
+	property int smoothing: 32
+	property Tray tray: Tray {
+	}
 
 	component Popouts: JsonObject {
 		property bool activeWindow: true
@@ -75,4 +71,7 @@ JsonObject {
 		property bool tray: true
 		property bool upower: true
 	}
+	component Tray: JsonObject {
+		property int trayIconSize: 24
+	}
 }

Greeter/Config/Colors.qml

@@ -1,5 +1,13 @@
 import Quickshell.Io
 
 JsonObject {
+	property Presets presets: Presets {
+	}
 	property string schemeType: "vibrant"
+
+	component Presets: JsonObject {
+		property string accent: ""
+		property string name: ""
+		property string variant: ""
+	}
 }

Greeter/Config/Config.qml

@@ -4,8 +4,6 @@ import Quickshell
 import Quickshell.Io
 import ZShell
 import QtQuick
-import qs.Helpers
-import qs.Paths
 
 Singleton {
 	id: root
@@ -23,6 +21,7 @@ Singleton {
 	property alias osd: adapter.osd
 	property alias overview: adapter.overview
 	property bool recentlySaved: false
+	property alias screenshot: adapter.screenshot
 	property alias services: adapter.services
 	property alias sidebar: adapter.sidebar
 	property alias utilities: adapter.utilities
@@ -48,6 +47,9 @@ Singleton {
 			padding: {
 				scale: appearance.padding.scale
 			},
+			deform: {
+				scale: appearance.deform.scale
+			},
 			font: {
 				family: {
 					sans: appearance.font.family.sans,
@@ -77,16 +79,28 @@ Singleton {
 	function serializeBackground(): var {
 		return {
 			wallFadeDuration: background.wallFadeDuration,
-			enabled: background.enabled
+			enabled: background.enabled,
+			alignX: background.alignX,
+			sourceClipX: background.sourceClipX,
+			sourceClipY: background.sourceClipY,
+			sourceClipW: background.sourceClipW,
+			sourceClipH: background.sourceClipH,
+			alignY: background.alignY,
+			zoom: background.zoom
 		};
 	}
 
 	function serializeBar(): var {
 		return {
 			autoHide: barConfig.autoHide,
+			hideWhenNotif: barConfig.hideWhenNotif,
 			rounding: barConfig.rounding,
 			border: barConfig.border,
+			smoothing: barConfig.smoothing,
 			height: barConfig.height,
+			tray: {
+				trayIconSize: barConfig.tray.trayIconSize
+			},
 			popouts: {
 				tray: barConfig.popouts.tray,
 				audio: barConfig.popouts.audio,
@@ -102,7 +116,12 @@ Singleton {
 
 	function serializeColors(): var {
 		return {
-			schemeType: colors.schemeType
+			schemeType: colors.schemeType,
+			presets: {
+				name: colors.presets.name,
+				variant: colors.presets.variant,
+				accent: colors.presets.accent
+			}
 		};
 	}
 
@@ -121,7 +140,8 @@ Singleton {
 			background: serializeBackground(),
 			launcher: serializeLauncher(),
 			colors: serializeColors(),
-			dock: serializeDock()
+			dock: serializeDock(),
+			screenshot: serializeScreenshot()
 		};
 	}
 
@@ -172,11 +192,16 @@ Singleton {
 		return {
 			logo: general.logo,
 			wallpaperPath: general.wallpaperPath,
-			username: general.username,
 			desktopIcons: general.desktopIcons,
+			dateFormat: general.dateFormat,
 			color: {
 				mode: general.color.mode,
 				smart: general.color.smart,
+				scheduleDark: general.color.scheduleDark,
+				scheduleHyprsunset: general.color.scheduleHyprsunset,
+				scheduleHyprsunsetStart: general.color.scheduleHyprsunsetStart,
+				hyprsunsetTemp: general.color.hyprsunsetTemp,
+				scheduleHyprsunsetEnd: general.color.scheduleHyprsunsetEnd,
 				schemeGeneration: general.color.schemeGeneration,
 				scheduleDarkStart: general.color.scheduleDarkStart,
 				scheduleDarkEnd: general.color.scheduleDarkEnd,
@@ -190,6 +215,10 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
+			},
+			battery: {
+				popupThresholds: general.battery.popupThresholds,
+				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -198,6 +227,7 @@ Singleton {
 		return {
 			maxAppsShown: launcher.maxAppsShown,
 			maxWallpapers: launcher.maxWallpapers,
+			uwsm: launcher.uwsm,
 			actionPrefix: launcher.actionPrefix,
 			specialPrefix: launcher.specialPrefix,
 			useFuzzy: {
@@ -221,6 +251,8 @@ Singleton {
 		return {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
+			showNotifContent: lock.showNotifContent,
+			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {
@@ -262,9 +294,24 @@ Singleton {
 		};
 	}
 
+	function serializeScreenshot(): var {
+		return {
+			enable_pp: screenshot.enable_pp,
+			mode: screenshot.mode,
+			radius: screenshot.radius,
+			shadow: screenshot.shadow,
+			rounding: screenshot.rounding,
+			shadow_blur: screenshot.shadow_blur,
+			shadow_color: screenshot.shadow_color,
+			shadow_offset_x: screenshot.shadow_offset_x,
+			shadow_offset_y: screenshot.shadow_offset_y
+		};
+	}
+
 	function serializeServices(): var {
 		return {
 			weatherLocation: services.weatherLocation,
+			updates: services.updates,
 			useFahrenheit: services.useFahrenheit,
 			ddcutilService: services.ddcutilService,
 			useTwelveHourClock: services.useTwelveHourClock,
@@ -317,7 +364,6 @@ Singleton {
 
 	ElapsedTimer {
 		id: timer
-
 	}
 
 	Timer {
@@ -415,6 +461,8 @@ Singleton {
 			}
 			property Overview overview: Overview {
 			}
+			property Screenshot screenshot: Screenshot {
+			}
 			property Services services: Services {
 			}
 			property SidebarConfig sidebar: SidebarConfig {

Greeter/Config/DynamicColors.qml

@@ -29,9 +29,10 @@ Singleton {
 	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
-		const luminance = getLuminance(c);
+		const initLuminance = getLuminance(c);
+		const luminance = Math.max(initLuminance, 0.001);
 
-		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (1 - transparency.base) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
+		const offset = (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.2 : 0.3) * (0.2 + 0.3 * (1 - transparency.base)) * (1 + wallLuminance * (light ? (layer == 1 ? 3 : 1) : 2.5));
 		const scale = (luminance + offset) / luminance;
 		const r = Math.max(0, Math.min(1, c.r * scale));
 		const g = Math.max(0, Math.min(1, c.g * scale));
@@ -84,6 +85,10 @@ Singleton {
 		Config.save();
 	}
 
+	function swapRG(c: color): color {
+		return Qt.rgba(c.g, c.r, c.b, c.a);
+	}
+
 	FileView {
 		path: "/etc/zshell-greeter/scheme.json"
 		watchChanges: true
@@ -95,69 +100,9 @@ Singleton {
 	ImageAnalyser {
 		id: analyser
 
-		source: WallpaperPath.currentWallpaperPath
+		source: WallpaperPath.lockscreenBg
 	}
 
-	component M3MaccchiatoPalette: QtObject {
-		property color m3background: "#131317"
-		property color m3error: "#ffb4ab"
-		property color m3errorContainer: "#93000a"
-		property color m3inverseOnSurface: "#303034"
-		property color m3inversePrimary: "#525b92"
-		property color m3inverseSurface: "#e4e1e7"
-		property color m3neutral_paletteKeyColor: "#77767b"
-		property color m3neutral_variant_paletteKeyColor: "#767680"
-		property color m3onBackground: "#e4e1e7"
-		property color m3onError: "#690005"
-		property color m3onErrorContainer: "#ffdad6"
-		property color m3onPrimary: "#232c60"
-		property color m3onPrimaryContainer: "#ffffff"
-		property color m3onPrimaryFixed: "#0b154b"
-		property color m3onPrimaryFixedVariant: "#3a4378"
-		property color m3onSecondary: "#2c2f44"
-		property color m3onSecondaryContainer: "#b1b3ce"
-		property color m3onSecondaryFixed: "#171a2e"
-		property color m3onSecondaryFixedVariant: "#42455c"
-		property color m3onSuccess: "#213528"
-		property color m3onSuccessContainer: "#D1E9D6"
-		property color m3onSurface: "#e4e1e7"
-		property color m3onSurfaceVariant: "#c6c5d1"
-		property color m3onTertiary: "#4c1f48"
-		property color m3onTertiaryContainer: "#000000"
-		property color m3onTertiaryFixed: "#340831"
-		property color m3onTertiaryFixedVariant: "#66365f"
-		property color m3outline: "#90909a"
-		property color m3outlineVariant: "#46464f"
-		property color m3primary: "#bac3ff"
-		property color m3primaryContainer: "#6a73ac"
-		property color m3primaryFixed: "#dee0ff"
-		property color m3primaryFixedDim: "#bac3ff"
-		property color m3primary_paletteKeyColor: "#6a73ac"
-		property color m3scrim: "#000000"
-		property color m3secondary: "#c3c5e0"
-		property color m3secondaryContainer: "#42455c"
-		property color m3secondaryFixed: "#dfe1fd"
-		property color m3secondaryFixedDim: "#c3c5e0"
-		property color m3secondary_paletteKeyColor: "#72758e"
-		property color m3shadow: "#000000"
-		property color m3success: "#B5CCBA"
-		property color m3successContainer: "#374B3E"
-		property color m3surface: "#131317"
-		property color m3surfaceBright: "#39393d"
-		property color m3surfaceContainer: "#1f1f23"
-		property color m3surfaceContainerHigh: "#2a2a2e"
-		property color m3surfaceContainerHighest: "#353438"
-		property color m3surfaceContainerLow: "#1b1b1f"
-		property color m3surfaceContainerLowest: "#0e0e12"
-		property color m3surfaceDim: "#131317"
-		property color m3surfaceTint: "#bac3ff"
-		property color m3surfaceVariant: "#46464f"
-		property color m3tertiary: "#f1b3e5"
-		property color m3tertiaryContainer: "#b77ead"
-		property color m3tertiaryFixed: "#ffd7f4"
-		property color m3tertiaryFixedDim: "#f1b3e5"
-		property color m3tertiary_paletteKeyColor: "#9b6592"
-	}
 	component M3Palette: QtObject {
 		property color m3background: "#191114"
 		property color m3error: "#ffb4ab"
@@ -279,8 +224,11 @@ Singleton {
 		readonly property color m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
 	}
 	component Transparency: QtObject {
-		readonly property real base: Appearance.transparency.base - (root.light ? 0.1 : 0)
+		readonly property real base: Math.max(0, Math.min(1, Appearance.transparency.base - (root.light ? 0.1 : 0)))
 		readonly property bool enabled: Appearance.transparency.enabled
 		readonly property real layers: Appearance.transparency.layers
+
+		onBaseChanged: debounceTimer.restart()
+		onEnabledChanged: debounceTimer.restart()
 	}
 }

Greeter/Config/General.qml

@@ -4,13 +4,15 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
+	property Battery battery: Battery {
+	}
 	property Color color: Color {
 	}
+	property string dateFormat: "ddd d MMM - hh:mm:ss"
 	property bool desktopIcons: false
 	property Idle idle: Idle {
 	}
 	property string logo: ""
-	property string username: ""
 	property string wallpaperPath: Quickshell.env("HOME") + "/Pictures/Wallpapers"
 
 	component Apps: JsonObject {
@@ -19,11 +21,27 @@ JsonObject {
 		property list<string> playback: ["mpv"]
 		property list<string> terminal: ["kitty"]
 	}
+	component Battery: JsonObject {
+		property int critPerc: 5
+		property list<var> popupThresholds: [
+			{
+				perc: 20,
+				name: qsTr("Low battery"),
+				message: qsTr("Battery is low"),
+				icon: "battery_android_frame_2"
+			},
+		]
+	}
 	component Color: JsonObject {
+		property int hyprsunsetTemp: 5000
 		property string mode: "dark"
 		property bool neovimColors: false
+		property bool scheduleDark: false
 		property int scheduleDarkEnd: 0
 		property int scheduleDarkStart: 0
+		property bool scheduleHyprsunset: false
+		property int scheduleHyprsunsetEnd: 0
+		property int scheduleHyprsunsetStart: 0
 		property bool schemeGeneration: true
 		property bool smart: false
 	}

Greeter/Config/Launcher.qml

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

Greeter/Config/LockConf.qml

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

Greeter/Config/Screenshot.qml

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

Greeter/Config/Services.qml

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

Greeter/GreeterState.qml

@@ -16,27 +16,14 @@ Scope {
 	property bool launching: false
 	property string promptMessage: ""
 	readonly property var selectedSession: sessionIndex >= 0 ? sessions[sessionIndex] : null
+	readonly property var selectedUser: Users.selectedUser
 	property int sessionIndex: sessions.length > 0 ? 0 : -1
 	property var sessions: []
+	readonly property string userFace: selectedUser ? selectedUser.face : ""
+	readonly property string username: Users.selectedUsername
 
 	// User handling - now uses the Users singleton
 	readonly property var users: Users.users
-	readonly property var selectedUser: Users.selectedUser
-	readonly property string username: Users.selectedUsername
-	readonly property string userFace: selectedUser ? selectedUser.face : ""
-
-	// User selection functions (delegate to Users singleton)
-	function selectUser(username: string): bool {
-		return Users.selectUser(username);
-	}
-
-	function selectNextUser(): void {
-		Users.selectNext();
-	}
-
-	function selectPreviousUser(): void {
-		Users.selectPrevious();
-	}
 
 	signal flashMsg
 
@@ -58,11 +45,11 @@ Scope {
 
 			event.accepted = true;
 			return;
-		}
+		} else if (event.key === Qt.Key_Escape) {
-
+			buffer = "";
-		if (event.text && !/[\r\n]/.test(event.text)) {
+		} else if (" abcdefghijklmnopqrstuvwxyz1234567890`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?".includes(event.text.toLowerCase())) {
+			// No illegal characters (you are insane if you use unicode in your password)
 			buffer += event.text;
-			event.accepted = true;
 		}
 	}
 
@@ -81,6 +68,19 @@ Scope {
 		Greetd.launch(selectedSession.command, [], true);
 	}
 
+	function selectNextUser(): void {
+		Users.selectNext();
+	}
+
+	function selectPreviousUser(): void {
+		Users.selectPrevious();
+	}
+
+	// User selection functions (delegate to Users singleton)
+	function selectUser(username: string): bool {
+		return Users.selectUser(username);
+	}
+
 	function submit(): void {
 		errorMessage = "";
 

Greeter/Helpers/SystemUsage.qml

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

Greeter/Helpers/Users.qml

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

Greeter/SessionDock.qml

@@ -83,7 +83,7 @@ ColumnLayout {
 				radius: Appearance.rounding.normal - Appearance.padding.smaller
 
 				StateLayer {
-					function onClicked(): void {
+					onClicked: {
 						root.greeter.sessionIndex = index;
 					}
 				}

Greeter/UserDock.qml

@@ -84,7 +84,7 @@ ColumnLayout {
 				radius: Appearance.rounding.normal - Appearance.padding.smaller
 
 				StateLayer {
-					function onClicked(): void {
+					onClicked: {
 						root.greeter.selectUser(modelData.username);
 					}
 				}

Helpers/Battery.qml

@@ -0,0 +1,32 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Services.UPower
+import qs.Config
+
+Singleton {
+	id: root
+
+	readonly property var colors: {
+		if (deviceState === UPowerDeviceState.Charging || deviceState === UPowerDeviceState.FullyCharged)
+			return {
+				fg: DynamicColors.swapRG(DynamicColors.palette.m3error),
+				bg: DynamicColors.swapRG(DynamicColors.palette.m3onError)
+			};
+		else if (currentPerc <= 0.2)
+			return {
+				fg: DynamicColors.palette.m3error,
+				bg: DynamicColors.palette.m3onError
+			};
+		else
+			return {
+				fg: DynamicColors.palette.m3onSurface,
+				bg: DynamicColors.palette.m3surface
+			};
+	}
+	readonly property real currentPerc: UPower.displayDevice.percentage
+	readonly property var deviceState: UPower.displayDevice.state
+	readonly property bool isLaptop: UPower.displayDevice.isLaptopBattery
+	readonly property bool onBattery: UPower.onBattery
+	readonly property bool ready: UPower.displayDevice.ready
+}

Helpers/FetchPresets.qml

@@ -0,0 +1,63 @@
+// FetchPresets.qml
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+	id: root
+
+	property var parsedPresets: ({})
+	readonly property var presets: parsedPresets
+	property bool ready: false
+
+	function accents(presetName, variantName) {
+		const variant = parsedPresets[presetName]?.variants?.[variantName];
+
+		return variant?.accents ?? [];
+	}
+
+	function defaultAccent(presetName, variantName) {
+		const variant = parsedPresets[presetName]?.variants?.[variantName];
+
+		return variant?.default_accent ?? "";
+	}
+
+	function modes(presetName, variantName) {
+		const variant = parsedPresets[presetName]?.variants?.[variantName];
+
+		return variant?.modes ?? [];
+	}
+
+	function presetNames() {
+		return Object.keys(parsedPresets);
+	}
+
+	function variantNames(presetName) {
+		const preset = parsedPresets[presetName];
+
+		if (!preset || !preset.variants)
+			return [];
+
+		return Object.keys(preset.variants);
+	}
+
+	Process {
+		command: ["zshell-cli", "scheme", "list-presets", "--json"]
+		running: true
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				try {
+					const parsed = JSON.parse(text);
+
+					root.parsedPresets = parsed.presets ?? {};
+					root.ready = true;
+				} catch (e) {
+					console.error("Failed to parse presets JSON:", e);
+				}
+			}
+		}
+	}
+}

Helpers/GameMode.qml

@@ -13,11 +13,11 @@ Singleton {
 
 	function setHyprConf(): void {
 		Hypr.extras.applyOptions({
-			"animations:enabled": 0,
+			"animations.enabled": 0,
-			"decoration:shadow:enabled": 0,
+			"decoration.shadow.enabled": 0,
-			"decoration:blur:enabled": 0,
+			"decoration.blur.enabled": 0,
-			"general:border_size": 0,
+			"general.border_size": 0,
-			"decoration:rounding": 0
+			"decoration.rounding": 0
 		});
 	}
 
@@ -36,7 +36,7 @@ Singleton {
 	PersistentProperties {
 		id: props
 
-		property bool enabled: Hypr.options["animations:enabled"] === 0
+		property bool enabled: Hypr.options.animations.enabled === 0
 
 		reloadableId: "gamemode"
 	}

Helpers/Hypr.qml

@@ -158,6 +158,5 @@ Singleton {
 
 	HyprExtras {
 		id: extras
-
 	}
 }

Helpers/Hyprsunset.qml

@@ -2,12 +2,13 @@ pragma Singleton
 
 import Quickshell
 import QtQuick
+import ZShell.Services
 import qs.Config
 
 Singleton {
 	id: root
 
-	property bool enabled
+	readonly property bool enabled: service.enabled
 	readonly property int end: Config.general.color.scheduleHyprsunsetEnd
 	property bool manualToggle: false
 	readonly property int start: Config.general.color.scheduleHyprsunsetStart
@@ -17,69 +18,20 @@ Singleton {
 		if (!Config.general.color.scheduleHyprsunset)
 			return;
 
-		var now = new Date();
+		service.apply();
-		if (now.getHours() >= root.start || now.getHours() < root.end) {
-			root.startNightLight(root.temp);
-		} else {
-			root.stopNightLight();
-		}
-	}
-
-	function startNightLight(temp: int): void {
-		Quickshell.execDetached(["hyprctl", "hyprsunset", "temperature", `${temp}`]);
-		root.enabled = true;
-	}
-
-	function stopNightLight(): void {
-		Quickshell.execDetached(["hyprctl", "hyprsunset", "identity"]);
-		root.enabled = false;
 	}
 
 	function toggleNightLight(): void {
-		if (enabled)
+		service.manualToggle = true;
-			stopNightLight();
+		service.toggle();
-		else
-			startNightLight(temp);
 	}
 
-	onManualToggleChanged: {
+	HyprsunsetManager {
-		if (root.manualToggle)
+		id: service
-			manualTimer.start();
-	}
 
-	Timer {
+		activeAuto: Config.general.color.scheduleHyprsunset
-		id: manualTimer
+		endTime: root.end
-
+		startTime: root.start
-		interval: 60000 * 60
+		temp: root.temp
-		repeat: false
-		running: false
-
-		onTriggered: {
-			root.manualToggle = false;
-		}
-	}
-
-	Timer {
-		interval: 5000
-		repeat: true
-		running: true
-		triggeredOnStart: true
-
-		onTriggered: {
-			if (!Config.general.color.scheduleHyprsunset)
-				return;
-
-			if (root.manualToggle)
-				return;
-
-			var now = new Date();
-			if (now.getHours() >= root.start || now.getHours() < root.end) {
-				if (!root.enabled)
-					root.startNightLight(root.temp);
-			} else {
-				if (root.enabled)
-					root.stopNightLight();
-			}
-		}
 	}
 }

Helpers/ModeScheduler.qml

@@ -12,7 +12,7 @@ Singleton {
 
 	readonly property int darkEnd: Config.general.color.scheduleDarkEnd
 	readonly property int darkStart: Config.general.color.scheduleDarkStart
-	readonly property bool enabled: Config.general.color.scheduleDark
+	readonly property bool enabled: Config.general.color.scheduleDark && Config.general.color.schemeGeneration
 
 	function applyDarkMode() {
 		Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--mode", "dark"]);

Helpers/Picker.qml

@@ -26,16 +26,23 @@ MouseArea {
 			return (bc.pinned - ac.pinned) || ((bc.fullscreen !== 0) - (ac.fullscreen !== 0)) || (bc.floating - ac.floating);
 		});
 	}
+	readonly property int cornerRadius: Hypr.options.decoration.rounding
 	property real ex: screen.width
 	property real ey: screen.height
 	required property LazyLoader loader
 	property bool onClient
-	property real realBorderWidth: onClient ? (Hypr.options["general:border_size"] ?? 1) : 2
+	property real realBorderWidth: onClient ? (Hypr.options.general.border_size ?? 1) : 2
-	property real realRounding: onClient ? (Hypr.options["decoration:rounding"] ?? 0) : 0
+	property real realRounding: onClient ? (Hypr.options.decoration.rounding ?? 0) : 0
 	property real rsx: Math.min(sx, ex)
 	property real rsy: Math.min(sy, ey)
+	readonly property real scaleRatio: Hypr.monitorFor(screen).scale
 	required property ShellScreen screen
 	property real sh: Math.abs(sy - ey)
+	readonly property color shadowColor: Hypr.options.decoration.shadow.color
+	readonly property bool shadowEnabled: Hypr.options.decoration.shadow.enabled
+	readonly property var shadowOffset: Hypr.options.decoration.shadow.offset
+	readonly property int shadowRange: Hypr.options.decoration.shadow.range
+	readonly property int shadowRenderPower: Hypr.options.decoration.shadow.render_power
 	property real ssx
 	property real ssy
 	property real sw: Math.abs(sx - ex)
@@ -66,7 +73,14 @@ MouseArea {
 
 	function save(): void {
 		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
-		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--image"] : ["swappy", "-f"];
+		const rounding = root.cornerRadius > 0;
+		const shadow_blur = root.shadowRange / root.shadowRenderPower;
+		const r = Math.floor(root.shadowColor.r * 256);
+		const g = Math.floor(root.shadowColor.g * 256);
+		const b = Math.floor(root.shadowColor.b * 256);
+		const a = Math.floor(root.shadowColor.a * 256);
+		const args = Config.screenshot.mode === "auto" ? ["--rounding", `${rounding}`, "--radius", root.cornerRadius, "--shadow", root.shadowEnabled, "--shadow-blur", `${shadow_blur}`, "--shadow-color", `${r},${g},${b},${a}`, "--shadow-offset-x", root.shadowOffset[0], "--shadow-offset-y", root.shadowOffset[1]] : [];
+		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--scale", root.scaleRatio, ...args, "--image"] : ["swappy", "-f"];
 		ZShellIo.saveItem(screencopy, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => Quickshell.execDetached([...cmd, path]));
 		closeAnim.start();
 	}

Helpers/Recorder.qml

@@ -1,41 +1,82 @@
-// pragma Singleton
+pragma Singleton
-//
+
-// import Quickshell
+import Quickshell
-// import QtQuick
+import Quickshell.Io
-//
+import QtQuick
-// Singleton {
+
-// 	id: root
+Singleton {
-//
+	id: root
-// 	function start(extraArgs = []): void {
+
-// 		needsStart = true;
+	readonly property alias elapsed: props.elapsed
-// 		startArgs = extraArgs;
+	property bool needsPause
-// 		checkProc.running = true;
+	property bool needsStart
-// 	}
+	property bool needsStop
-//
+	readonly property alias paused: props.paused
-// 	PersistentProperties {
+	readonly property alias running: props.running
-// 		id: props
+	property list<string> startArgs
-//
+
-// 		property real elapsed: 0
+	function start(extraArgs = []): void {
-// 		property bool paused: false
+		needsStart = true;
-// 		property bool running: false
+		startArgs = extraArgs;
-//
+		checkProc.running = true;
-// 		reloadableId: "recorder"
+	}
-// 	}
+
-//
+	function stop(): void {
-// 	Process {
+		needsStop = true;
-// 		id: checkProc
+		checkProc.running = true;
-//
+	}
-// 		command: ["pidof", "gpu-screen-recorder"]
+
-// 		running: true
+	function togglePause(): void {
-//
+		needsPause = true;
-// 		onExited: code => {
+		checkProc.running = true;
-// 			props.running = code === 0;
+	}
-//
+
-// 			if (code === 0) {
+	PersistentProperties {
-// 				if (root.needsStop) {
+		id: props
-// 					Quickshell.execDetached(["zshell-cli"]);
+
-// 				}
+		property real elapsed: 0
-// 			}
+		property bool paused: false
-// 		}
+		property bool running: false
-// 	}
+
-// }
+		reloadableId: "recorder"
+	}
+
+	Process {
+		id: checkProc
+
+		command: ["pidof", "gpu-screen-recorder"]
+		running: true
+
+		onExited: code => {
+			props.running = code === 0;
+
+			if (code === 0) {
+				if (root.needsStop) {
+					Quickshell.execDetached(["zshell-cli", "record", "record"]);
+					props.running = false;
+					props.paused = false;
+				} else if (root.needsPause) {
+					Quickshell.execDetached(["zshell-cli", "record", "record", "-p"]);
+					props.paused = !props.paused;
+				}
+			} else if (root.needsStart) {
+				Quickshell.execDetached(["zshell-cli", "record", "record", ...root.startArgs]);
+				props.running = true;
+				props.paused = false;
+				props.elapsed = 0;
+			}
+
+			root.needsStart = false;
+			root.needsStop = false;
+			root.needsPause = false;
+		}
+	}
+
+	Connections {
+		function onSecondsChanged(): void {
+			props.elapsed++;
+		}
+
+		target: Time // qmllint disable incompatible-type
+	}
+}

Helpers/Searcher.qml

@@ -1,7 +1,7 @@
-import Quickshell
 import "../scripts/fzf.js" as Fzf
 import "../scripts/fuzzysort.js" as Fuzzy
 import QtQuick
+import Quickshell
 
 Singleton {
 	property var extraOpts: ({})

Helpers/SystemUsage.qml

@@ -17,6 +17,7 @@ Singleton {
 	property var disks: []
 	property real gpuMemTotal: 0
 	property real gpuMemUsed
+	property string gpuName
 	property real gpuPerc
 	property real gpuTemp
 	readonly property string gpuType: Config.services.gpuType.toUpperCase() || autoGpuType

Helpers/UPower.qml

@@ -1,12 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Services.UPower
-
-Singleton {
-	id: root
-
-	readonly property list<UPowerDevice> devices: UPower.devices.values
-	readonly property UPowerDevice displayDevice: UPower.displayDevice
-	readonly property bool onBattery: UPower.onBattery
-}

Helpers/Wallpapers.qml

@@ -1,7 +1,9 @@
 pragma Singleton
+pragma ComponentBehavior: Bound
 
 import Quickshell
 import Quickshell.Io
+import QtQuick
 import ZShell.Models
 import qs.Config
 import qs.Modules
@@ -12,10 +14,17 @@ Searcher {
 	id: root
 
 	property string actualCurrent: WallpaperPath.currentWallpaperPath
+	property alias crops: adapter.monitorCrops
 	readonly property string current: showPreview ? previewPath : actualCurrent
+	property alias monitorCrops: monitorCrops
 	property string previewPath
+	property bool recentlyChanged
 	property bool showPreview: false
 
+	function getCrop(screen: string): var {
+		return root.crops[screen];
+	}
+
 	function preview(path: string): void {
 		previewPath = path;
 		if (Config.general.color.schemeGeneration)
@@ -23,9 +32,33 @@ Searcher {
 		showPreview = true;
 	}
 
+	function setCrop(screen: string, rect: rect, scaledRect: rect, zoom: real): void {
+		let updated = Object.assign({}, root.crops);
+
+		if (zoom <= 0)
+			zoom = 1.0;
+		else if (zoom > 5.0)
+			zoom = 5.0;
+
+		updated[screen] = {
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height,
+			scaledX: scaledRect.x,
+			scaledY: scaledRect.y,
+			scaledWidth: scaledRect.width,
+			scaledHeight: scaledRect.height,
+			zoom: zoom
+		};
+
+		root.crops = updated;
+	}
+
 	function setWallpaper(path: string): void {
 		actualCurrent = path;
 		WallpaperPath.currentWallpaperPath = path;
+		Quickshell.screens.forEach(n => setCrop(n.name, Qt.rect(0, 0, 1, 1), Qt.rect(0, 0, 0, 0), 1.0));
 		Quickshell.execDetached(["zshell-cli", "wallpaper", "lockscreen", "--input-image", `${root.actualCurrent}`, "--output-path", `${Paths.state}/lockscreen_bg.png`, "--blur-amount", `${Config.lock.blurAmount}`]);
 		if (Config.general.color.schemeGeneration)
 			Quickshell.execDetached(["zshell-cli", "scheme", "generate", "--image-path", `${root.actualCurrent}`, "--scheme", `${Config.colors.schemeType}`, "--mode", `${Config.general.color.mode}`]);
@@ -52,6 +85,22 @@ Searcher {
 		target: "wallpaper"
 	}
 
+	FileView {
+		id: monitorCrops
+
+		path: `${Paths.state}/wallpaper-crops.json`
+		watchChanges: true
+
+		onAdapterUpdated: writeAdapter()
+		onFileChanged: reload()
+
+		JsonAdapter {
+			id: adapter
+
+			property var monitorCrops: ({})
+		}
+	}
+
 	FileSystemModel {
 		id: wallpapers
 

Modules/Background.qml

@@ -1,68 +0,0 @@
-import QtQuick
-import QtQuick.Shapes
-import qs.Components
-import qs.Config
-
-ShapePath {
-	id: root
-
-	readonly property bool flatten: wrapper.height < rounding * 2
-	property real ibr: invertBottomRounding ? -1 : 1
-	required property bool invertBottomRounding
-	property real rounding: Appearance.rounding.smallest
-	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
-	required property Wrapper wrapper
-
-	fillColor: DynamicColors.palette.m3surface
-	strokeWidth: -1
-
-	Behavior on fillColor {
-		CAnim {
-		}
-	}
-
-	PathArc {
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: root.roundingY
-	}
-
-	PathLine {
-		relativeX: 0
-		relativeY: root.wrapper.height - root.roundingY - root.roundingY * root.ibr
-	}
-
-	PathArc {
-		direction: root.invertBottomRounding ? PathArc.Clockwise : PathArc.Counterclockwise
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: root.roundingY * root.ibr
-	}
-
-	PathLine {
-		relativeX: root.wrapper.width - root.rounding * 2
-		relativeY: 0
-	}
-
-	PathArc {
-		direction: PathArc.Counterclockwise
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: -root.roundingY
-	}
-
-	PathLine {
-		relativeX: 0
-		relativeY: -(root.wrapper.height - root.roundingY * 2)
-	}
-
-	PathArc {
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: -root.roundingY
-	}
-}

Modules/Clock.qml

@@ -23,7 +23,7 @@ CustomRect {
 
 		anchors.centerIn: parent
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-		font: Appearance.font.family.mono
+		font: Appearance.font.family.mono // qmllint disable incompatible-type
 		text: Time.dateStr
 
 		Behavior on color {

Modules/DashWidget.qml

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

Modules/Dashboard/Background.qml

@@ -1,65 +0,0 @@
-import qs.Components
-import qs.Config
-import QtQuick
-import QtQuick.Shapes
-
-ShapePath {
-	id: root
-
-	readonly property bool flatten: wrapper.height < rounding * 2
-	readonly property real rounding: Appearance.rounding.normal
-	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
-	required property Wrapper wrapper
-
-	fillColor: DynamicColors.palette.m3surface
-	strokeWidth: -1
-
-	Behavior on fillColor {
-		CAnim {
-		}
-	}
-
-	PathArc {
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: root.roundingY
-	}
-
-	PathLine {
-		relativeX: 0
-		relativeY: root.wrapper.height - root.roundingY * 2
-	}
-
-	PathArc {
-		direction: PathArc.Counterclockwise
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: root.roundingY
-	}
-
-	PathLine {
-		relativeX: root.wrapper.width - root.rounding * 2
-		relativeY: 0
-	}
-
-	PathArc {
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: root.roundingY
-	}
-
-	PathLine {
-		relativeX: 0
-		relativeY: -(root.wrapper.height)
-	}
-
-	PathArc {
-		radiusX: root.rounding
-		radiusY: Math.min(root.rounding, root.wrapper.height)
-		relativeX: root.rounding
-		relativeY: -root.roundingY
-	}
-}

Modules/Dashboard/Dash/Calendar.qml

@@ -49,11 +49,11 @@ CustomMouseArea {
 				StateLayer {
 					id: prevMonthStateLayer
 
-					function onClicked(): void {
+					radius: Appearance.rounding.full
+
+					onClicked: {
 						root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
 					}
-
-					radius: Appearance.rounding.full
 				}
 
 				MaterialIcon {
@@ -73,10 +73,6 @@ CustomMouseArea {
 				implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
 
 				StateLayer {
-					function onClicked(): void {
-						root.state.currentDate = new Date();
-					}
-
 					anchors.fill: monthYearDisplay
 					anchors.leftMargin: -Appearance.padding.normal
 					anchors.margins: -Appearance.padding.small
@@ -86,6 +82,10 @@ CustomMouseArea {
 						return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
 					}
 					radius: Appearance.rounding.full
+
+					onClicked: {
+						root.state.currentDate = new Date();
+					}
 				}
 
 				CustomText {
@@ -107,11 +107,11 @@ CustomMouseArea {
 				StateLayer {
 					id: nextMonthStateLayer
 
-					function onClicked(): void {
+					radius: Appearance.rounding.full
+
+					onClicked: {
 						root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
 					}
-
-					radius: Appearance.rounding.full
 				}
 
 				MaterialIcon {

Modules/Dashboard/Dash/Media.qml

@@ -295,12 +295,12 @@ Item {
 		StateLayer {
 			id: controlState
 
-			function onClicked(): void {
-				control.onClicked();
-			}
-
 			color: control.canUse ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
 			disabled: !control.canUse
+
+			onClicked: {
+				control.onClicked();
+			}
 			// radius: Appearance.rounding.full
 		}
 

Modules/Dashboard/Wrapper.qml

@@ -20,7 +20,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	implicitHeight: content.implicitHeight
-	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	implicitWidth: content.implicitWidth || 854
 	opacity: 1 - offsetScale
 	visible: offsetScale < 1