initial commit, primitive loading of QML code outside of shell directory

.clang-format

@@ -1,58 +0,0 @@
----
-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

@@ -1,31 +0,0 @@
----
-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-rust.yml

@@ -38,18 +38,15 @@ jobs:
                     rustfmt \
                     rust-clippy
 
-            - id: format-check
+            - name: 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; }
+                        echo "$manifest: needs formatting"
                     done
-                    exit $status
                   elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
                     echo "Rust files found but no Cargo.toml"
                     exit 1
@@ -57,8 +54,7 @@ jobs:
                     echo "No Rust project found"
                   fi
 
-            - id: clippy
+            - name: Clippy
-              name: Clippy
               run: |
                   if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
                     status=0
@@ -74,12 +70,3 @@ jobs:
                   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,5 +13,3 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
-**/test-plugins/
-**/Charts/

CMakeLists.txt

@@ -25,7 +25,6 @@ add_compile_options(
 
 if("plugin" IN_LIST ENABLE_MODULES)
 	add_subdirectory(Plugins)
-
 endif()
 
 if("shell" IN_LIST ENABLE_MODULES)

Components/AnchorAnim.qml

@@ -1,51 +0,0 @@
-import QtQuick
-import qs.Config
-
-AnchorAnimation {
-	enum Type {
-		StandardSmall = 0,
-		Standard,
-		StandardLarge,
-		StandardExtraLarge,
-		EmphasizedSmall,
-		Emphasized,
-		EmphasizedLarge,
-		EmphasizedExtraLarge,
-		FastSpatial,
-		DefaultSpatial,
-		SlowSpatial
-	}
-
-	property int type: AnchorAnim.DefaultSpatial
-
-	duration: {
-		if (type < AnchorAnim.StandardSmall || type > AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-
-		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.large;
-
-		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
-		return Appearance.anim.durations[types[idx]];
-	}
-	easing.bezierCurve: {
-		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
-
-		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Appearance.anim.curves.standard;
-		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
-
-		return Appearance.anim.curves.expressiveDefaultSpatial;
-	}
-}

Components/Anim.qml

@@ -2,62 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	enum Type {
+	duration: Appearance.anim.durations.normal
-		StandardSmall = 0,
+	easing.bezierCurve: Appearance.anim.curves.standard
-		Standard,
+	easing.type: Easing.BezierSpline
-		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;
-		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/BaseStyledSlider.qml

@@ -12,8 +12,11 @@ Slider {
 	readonly property bool isVertical: orientation === Qt.Vertical
 	property real multiplier: 100
 	property real oldValue
+
+	// Wrapper components can inject their own track visuals here.
 	property Component trackContent
 
+	// Keep current behavior for existing usages.
 	orientation: Qt.Vertical
 
 	background: CustomRect {

Components/ButtonBase.qml

@@ -1,87 +0,0 @@
-import QtQuick
-import qs.Config
-
-CustomRect {
-	id: root
-
-	enum ButtonType {
-		Filled,
-		Tonal,
-		Text
-	}
-
-	property color activeColor
-	property color activeOnColor
-	property bool checked
-	property real checkedRadius: Appearance.rounding.medium
-	property real defaultRadius: Appearance.rounding.large
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledOnColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
-	property bool fillWidth
-	property font font: ({
-			family: Appearance.font.family.sans,
-			pointSize: Appearance.font.size.larger,
-			bold: false
-		})
-	property real horizontalPadding: padding
-	readonly property alias hovered: stateLayer.containsMouse
-	required implicitHeight
-	required implicitWidth
-	property color inactiveColor
-	property color inactiveOnColor
-	property bool internalChecked
-	property bool isRound
-	property bool isToggle
-	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
-	property real padding
-	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Appearance.rounding.small
-	readonly property alias radiusAnim: radiusAnim
-	property bool radiusMorph: true
-	property alias shapeMorph: stateLayer.shapeMorph
-	property real shapeMorphExpansion: shapeMorph && pressed ? 24 : 0
-	readonly property alias stateLayer: stateLayer
-	property int type: ButtonBase.Filled
-	property real verticalPadding: padding
-
-	signal clicked
-
-	color: type === ButtonBase.Text ? "transparent" : !enabled ? disabledColor : internalChecked ? activeColor : inactiveColor
-	radius: {
-		if (radiusMorph && pressed)
-			return pressedRadius;
-		if (internalChecked)
-			return checkedRadius;
-		if (isRound)
-			return (height || implicitHeight) / 2 * Math.min(1, Appearance.rounding.scale);
-		return defaultRadius;
-	}
-
-	Behavior on radius {
-		Anim {
-			id: radiusAnim
-
-			type: Anim.DefaultEffects
-		}
-	}
-	Behavior on shapeMorphExpansion {
-		Anim {
-			type: Anim.FastSpatial
-		}
-	}
-
-	onCheckedChanged: internalChecked = checked
-
-	StateLayer {
-		id: stateLayer
-
-		color: root.internalChecked ? root.activeOnColor : root.inactiveOnColor
-		enabled: root.enabled
-
-		onClicked: {
-			if (root.isToggle)
-				root.internalChecked = !root.internalChecked;
-			root.clicked();
-		}
-	}
-}

Components/CircularIndicator.qml

@@ -17,8 +17,8 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColour: DynamicColors.palette.m3primary
 	property real implicitSize: Appearance.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
@@ -31,8 +31,8 @@ BusyIndicator {
 
 	contentItem: CircularProgress {
 		anchors.fill: parent
-		bgColor: root.bgColor
+		bgColour: root.bgColour
-		fgColor: root.fgColor
+		fgColour: root.fgColour
 		padding: root.padding
 		rotation: manager.rotation
 		startAngle: manager.startFraction * 360
@@ -73,6 +73,7 @@ BusyIndicator {
 
 	CircularIndicatorManager {
 		id: manager
+
 	}
 
 	NumberAnimation {

Components/CircularProgress.qml

@@ -1,116 +1,66 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Shapes
-import ZShell.Components
 import qs.Config
 
-Item {
+Shape {
 	id: root
 
-	readonly property real arcRadius: (size - padding - strokeWidth * (1 + waveAmplitude * 2)) / 2
+	readonly property real arcRadius: (size - padding - strokeWidth) / 2
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
-	property real clampedVal: Math.max(1 / 360, Math.min(1, isNaN(value) ? 0 : value))
+	property color fgColour: DynamicColors.palette.m3primary
-	readonly property real dotAngleRad: (startAngle + sweepAngle - gapAngle * (sweepAngle < 360 ? 0 : 1)) * Math.PI / 180
-	property color fgColor: DynamicColors.palette.m3primary
 	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
-	property alias hasEndIndicator: dot.active
-	property real implicitSize
 	property int padding: 0
 	readonly property real size: Math.min(width, height)
 	property int spacing: Appearance.spacing.small
 	property int startAngle: -90
-	property int strokeWidth: Appearance.padding.small
+	property int strokeWidth: Appearance.padding.smaller
-	property int sweepAngle: 360
+	readonly property real vValue: value || 1 / 360
-	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
 	property real value
-	property alias waveAmplitude: wave.amplitudeMultiplier
-	property alias waveDuration: waveProgAnim.duration
-	property alias waveFrequency: wave.frequency
-	property bool wavePaused
-	property bool wavy: false
 
-	implicitHeight: implicitSize
+	asynchronous: true
-	implicitWidth: implicitSize
+	preferredRendererType: Shape.CurveRenderer
 
-	Shape {
+	ShapePath {
-		asynchronous: true
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
-		opacity: Math.min(1, remainingArc.sweepAngle)
+		fillColor: "transparent"
-		preferredRendererType: Shape.CurveRenderer
+		strokeColor: root.bgColour
+		strokeWidth: root.strokeWidth
 
-		ShapePath {
+		Behavior on strokeColor {
-			capStyle: ShapePath.RoundCap
-			fillColor: "transparent"
-			strokeColor: root.bgColor
-			strokeWidth: Math.min(1, remainingArc.sweepAngle) * root.strokeWidth
-
-			Behavior on strokeColor {
-				CAnim {
-				}
-			}
-
-			PathAngleArc {
-				id: remainingArc
-
-				centerX: root.size / 2
-				centerY: root.size / 2
-				radiusX: root.arcRadius
-				radiusY: root.arcRadius
-				startAngle: root.startAngle + root.clampedVal * root.sweepAngle + root.gapAngle
-				sweepAngle: Math.max(1 / 360, root.sweepAngle * (1 - root.clampedVal) - root.gapAngle * (root.sweepAngle < 360 ? 1 : 2))
-			}
-		}
-	}
-
-	WavyLine {
-		id: wave
-
-		amplitudeMultiplier: root.wavy ? 0.5 : 0
-		anchors.fill: parent
-		anchors.margins: -lineWidth * amplitudeMultiplier
-		color: root.fgColor
-		frequency: 8
-		fullAngle: root.sweepAngle
-		lineWidth: root.strokeWidth
-		pathType: WavyLine.Arc
-		radius: root.arcRadius
-		startAngle: root.startAngle
-		value: root.clampedVal
-
-		Behavior on amplitudeMultiplier {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on color {
 			CAnim {
+				duration: Appearance.anim.durations.large
 			}
 		}
-		Anim on waveProgress {
-			id: waveProgAnim
 
-			duration: 2000
+		PathAngleArc {
-			easing.type: Easing.Linear
+			centerX: root.size / 2
-			from: 0
+			centerY: root.size / 2
-			loops: Animation.Infinite
+			radiusX: root.arcRadius
-			paused: root.wavePaused || wave.amplitudeMultiplier === 0
+			radiusY: root.arcRadius
-			running: true
+			startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
-			to: 1
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
 		}
 	}
 
-	Loader {
+	ShapePath {
-		id: dot
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.fgColour
+		strokeWidth: root.strokeWidth
 
-		x: root.size / 2 + root.arcRadius * Math.cos(root.dotAngleRad) - width / 2
+		Behavior on strokeColor {
-		y: root.size / 2 + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2
+			CAnim {
+				duration: Appearance.anim.durations.large
+			}
+		}
 
-		sourceComponent: CustomRect {
+		PathAngleArc {
-			color: root.fgColor
+			centerX: root.size / 2
-			implicitHeight: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
+			centerY: root.size / 2
-			implicitWidth: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
+			radiusX: root.arcRadius
-			opacity: Math.min(1, remainingArc.sweepAngle)
+			radiusY: root.arcRadius
-			radius: Appearance.rounding.full
+			startAngle: root.startAngle
+			sweepAngle: 360 * root.vValue
 		}
 	}
 }

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/ColorArcPicker.qml

@@ -45,10 +45,10 @@ Item {
 	}
 
 	function syncFromPenColor() {
-		if (!drawing.drawingState)
+		if (!drawing)
 			return;
 
-		const c = drawing.drawingState.penColor;
+		const c = drawing.penColor;
 
 		if (c.hsvSaturation > 0) {
 			currentHue = c.hsvHue;
@@ -85,20 +85,12 @@ Item {
 
 		currentHue = relative / arcSweep;
 		lastChromaticHue = currentHue;
-		drawing.drawingState.penColor = Qt.hsva(currentHue, drawing.drawingState.penColor.hsvSaturation, drawing.drawingState.penColor.hsvValue, drawing.drawingState.penColor.a);
+		drawing.penColor = Qt.hsva(currentHue, drawing.penColor.hsvSaturation, drawing.penColor.hsvValue, drawing.penColor.a);
 	}
 
 	implicitHeight: 180
 	implicitWidth: 220
 
-	Behavior on currentHue {
-		enabled: !root.dragActive
-
-		Anim {
-			type: Anim.StandardLarge
-		}
-	}
-
 	Component.onCompleted: syncFromPenColor()
 	onCurrentHueChanged: canvas.requestPaint()
 	onDrawingChanged: syncFromPenColor()
@@ -111,7 +103,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing.drawingState
+		target: root.drawing
 	}
 
 	Canvas {
@@ -149,21 +141,6 @@ Item {
 		}
 	}
 
-	CustomRect {
-		anchors.centerIn: parent
-		color: root.drawing?.drawingState.penColor
-		implicitHeight: implicitWidth
-		implicitWidth: canvas.height - root.handleSize - Appearance.padding.extraLarge * 2
-		radius: Appearance.rounding.full
-
-		Behavior on color {
-			enabled: false
-
-			CAnim {
-			}
-		}
-	}
-
 	Item {
 		id: handle
 
@@ -197,7 +174,7 @@ Item {
 
 			Rectangle {
 				anchors.centerIn: parent
-				color: Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
+				color: root.drawing ? root.drawing.penColor : Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
 				height: width
 				radius: width / 2
 				width: parent.width - 12

Components/CustomButton.qml

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

Components/CustomClippingWrapperRect.qml

@@ -1,13 +0,0 @@
-import Quickshell.Widgets
-import QtQuick
-
-ClippingWrapperRectangle {
-	id: root
-
-	color: "transparent"
-
-	Behavior on color {
-		CAnim {
-		}
-	}
-}

Components/CustomFlickable.qml

@@ -1,10 +1,8 @@
 import QtQuick
-import qs.Helpers
 
 Flickable {
 	id: root
 
-	interactive: !Visibilities.getForActive().isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {

Components/CustomListView.qml

@@ -1,33 +1,13 @@
 import QtQuick
-import qs.Helpers
 
 ListView {
 	id: root
 
-	property bool doneFakeFlick
-
-	interactive: !Visibilities.getForActive().isDrawing
 	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/CustomProgressBar.qml

@@ -1,237 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Templates
-import ZShell
-import ZShell.Components
-import ZShell.Internal
-import qs.Config
-
-ProgressBar {
-	id: root
-
-	enum IndeterminateAnimState {
-		Running,
-		Completing,
-		Stopped
-	}
-
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
-	property int indeterminateAnimState: CustomProgressBar.Stopped
-	property real waveAmplitude: 0.5
-	property int waveDuration: 1000
-	property int waveFrequency: 6
-	property bool wavePaused
-	property bool wavy
-
-	function toBounds(startFrac: real, endFrac: real, gapSize: real): point {
-		startFrac = ZUtils.clamp(startFrac, 0, 1);
-		endFrac = ZUtils.clamp(endFrac, 0, 1);
-
-		// Ramp down gap size
-		const GAP_RAMP_DOWN_THRESHOLD = 0.01;
-		gapSize += height / 2;
-		const startGapSize = (gapSize * ZUtils.clamp(startFrac, 0, GAP_RAMP_DOWN_THRESHOLD) / GAP_RAMP_DOWN_THRESHOLD);
-		const endGapSize = (gapSize * (1 - ZUtils.clamp(endFrac, 1 - GAP_RAMP_DOWN_THRESHOLD, 1)) / GAP_RAMP_DOWN_THRESHOLD);
-		const start = width * startFrac + startGapSize;
-		const end = width * endFrac - endGapSize;
-
-		return start >= end ? Qt.point(0, 0) : Qt.point(start, end);
-	}
-
-	function updateIAnimState(): void {
-		if (indeterminate) {
-			manager.completeEndProgress = 0;
-			indeterminateAnimState = CustomProgressBar.Running;
-		} else if (indeterminateAnimState === CustomProgressBar.Running) {
-			indeterminateAnimState = CustomProgressBar.Completing;
-		}
-	}
-
-	implicitHeight: 4
-	implicitWidth: 200
-
-	contentItem: Loader {
-		anchors.fill: parent
-		asynchronous: true
-		sourceComponent: root.indeterminate || root.indeterminateAnimState !== CustomProgressBar.Stopped ? indeterminateComp : determinateComp
-	}
-
-	Component.onCompleted: updateIAnimState()
-	onIndeterminateChanged: updateIAnimState()
-
-	LinearIndicatorManager {
-		id: manager
-
-		gap: Appearance.spacing.extraSmall
-
-		Anim on completeEndProgress {
-			duration: manager.completeEndDuration
-			running: root.indeterminateAnimState === CustomProgressBar.Completing
-			to: 1
-
-			onFinished: {
-				if (root.indeterminateAnimState === CustomProgressBar.Completing)
-					root.indeterminateAnimState = CustomProgressBar.Stopped;
-			}
-		}
-		Anim on progress {
-			duration: manager.duration
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			running: root.indeterminateAnimState !== CustomProgressBar.Stopped
-			to: 1
-		}
-	}
-
-	Component {
-		id: determinateComp
-
-		Item {
-			Line {
-				id: remaining
-
-				anchors.right: parent.right
-				implicitWidth: parent.width - wave.implicitWidth - Appearance.spacing.extraSmall
-			}
-
-			Line {
-				property real implicitSize
-
-				anchors.right: parent.right
-				anchors.rightMargin: (parent.height - implicitHeight) / 2
-				anchors.verticalCenter: parent.verticalCenter
-				color: root.fgColor
-				implicitHeight: implicitSize
-				implicitWidth: implicitSize
-				radius: Appearance.rounding.full
-
-				Behavior on implicitSize {
-					Anim {
-						type: Anim.FastSpatial
-					}
-				}
-
-				Component.onCompleted: implicitSize = Qt.binding(() => parent.width - wave.implicitWidth < parent.height ? parent.height : 4)
-			}
-
-			Wave {
-				id: wave
-
-				anchors.left: parent.left
-
-				Behavior on implicitWidth {
-					Anim {
-					}
-				}
-
-				Component.onCompleted: implicitWidth = Qt.binding(() => parent.width * root.visualPosition)
-			}
-		}
-	}
-
-	Component {
-		id: indeterminateComp
-
-		Item {
-			id: content
-
-			Line {
-				bounds: {
-					const i = manager.activeIndicators[0]; // qmllint disable unresolved-type
-					return i ? root.toBounds(0, i.startFraction, i.gapSize / 2) : Qt.point(0, 0);
-				}
-			}
-
-			Line {
-				bounds: {
-					const i = manager.activeIndicators[manager.activeIndicators.length - 1]; // qmllint disable unresolved-type
-					return i ? root.toBounds(i.endFraction, 1, i.gapSize / 2) : Qt.point(0, 0);
-				}
-			}
-
-			Instantiator {
-				model: Math.max(manager.activeIndicators.length, 1) - 1 // qmllint disable unresolved-type
-
-				delegate: Line {
-					readonly property LinearIndicatorSegment cur: manager.activeIndicators[index] // qmllint disable unresolved-type
-					required property int index
-					readonly property LinearIndicatorSegment next: manager.activeIndicators[index + 1 % manager.activeIndicators.length] // qmllint disable unresolved-type
-
-					bounds: root.toBounds(cur.endFraction, next.startFraction, cur.gapSize / 2)
-				}
-
-				onObjectAdded: (_, obj) => content.data.push(obj)
-				onObjectRemoved: (_, obj) => {
-					const idx = content.data.indexOf(obj);
-					if (idx !== -1)
-						content.data.splice(idx, 1);
-				}
-			}
-
-			Instantiator {
-				model: manager.activeIndicators // qmllint disable unresolved-type
-
-				delegate: Wave {
-					readonly property point bounds: root.toBounds(modelData.startFraction, modelData.endFraction, modelData.gapSize / 2)
-					required property LinearIndicatorSegment modelData
-
-					color: root.fgColor
-					implicitWidth: bounds.y - bounds.x
-					x: bounds.x
-				}
-
-				onObjectAdded: (_, obj) => content.data.push(obj)
-				onObjectRemoved: (_, obj) => {
-					const idx = content.data.indexOf(obj);
-					if (idx !== -1)
-						content.data.splice(idx, 1);
-				}
-			}
-		}
-	}
-
-	component Line: CustomRect {
-		property point bounds
-
-		anchors.verticalCenter: parent.verticalCenter
-		color: root.bgColor
-		implicitHeight: parent.height
-		implicitWidth: bounds.y - bounds.x
-		radius: Appearance.rounding.full
-		x: bounds.x
-	}
-	component Wave: WavyLine {
-		id: wave
-
-		amplitudeMultiplier: root.wavy ? root.waveAmplitude : 0
-		anchors.verticalCenter: parent.verticalCenter
-		color: root.fgColor
-		frequency: root.waveFrequency
-		fullLength: parent.width
-		implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
-		lineWidth: parent.height
-		startX: x
-
-		Behavior on amplitudeMultiplier {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on color {
-			CAnim {
-			}
-		}
-		Anim on waveProgress {
-			duration: root.waveDuration
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			paused: wave.amplitudeMultiplier === 0 || root.wavePaused
-			running: true
-			to: 1
-		}
-	}
-}

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,25 +1,49 @@
+import qs.Config
 import QtQuick
 import QtQuick.Templates
-import qs.Helpers
-import qs.Config
 
 ScrollBar {
 	id: root
 
-	readonly property real effectiveSize: Math.max(nonAnimHeight, root.minimumSize)
+	property bool _updatingFromFlickable: false
-	readonly property real effectiveTravel: Math.max(0, 1 - root.effectiveSize)
+	property bool _updatingFromUser: false
+	property bool animating
 	required property Flickable flickable
-	readonly property real nonAnimHeight: flickable.height / flickable.contentHeight
+	property real nonAnimPosition
-	readonly property real nonAnimY: flickable.contentY / flickable.contentHeight
-	readonly property real rawTravel: Math.max(0, 1 - root.nonAnimHeight)
-	readonly property bool reversed: flickable instanceof ListView && flickable.verticalLayoutDirection === ListView.BottomToTop
 	property bool shouldBeActive
-	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
-	enabled: !Visibilities.getForActive().isDrawing
+	implicitWidth: 8
-	implicitWidth: Appearance.padding.extraSmall * 2
 
-	contentItem: Item {
+	contentItem: CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		color: DynamicColors.palette.m3secondary
+		opacity: {
+			if (root.size === 1)
+				return 0;
+			if (fullMouse.pressed)
+				return 1;
+			if (mouse.containsMouse)
+				return 0.8;
+			if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: Appearance.rounding.full
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MouseArea {
+			id: mouse
+
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
 	}
 	Behavior on position {
 		enabled: !fullMouse.pressed
@@ -28,15 +52,58 @@ ScrollBar {
 		}
 	}
 
+	Component.onCompleted: {
+		if (flickable) {
+			const contentHeight = flickable.contentHeight;
+			const height = flickable.height;
+			if (contentHeight > height) {
+				nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+			}
+		}
+	}
 	onHoveredChanged: {
 		if (hovered)
-			shouldBeActive = hovered;
+			shouldBeActive = true;
 		else
-			hideDelay.restart();
+			shouldBeActive = flickable.moving;
+	}
+
+	// Sync nonAnimPosition with Qt's automatic position binding
+	onPositionChanged: {
+		if (_updatingFromUser) {
+			_updatingFromUser = false;
+			return;
+		}
+		if (position === nonAnimPosition) {
+			animating = false;
+			return;
+		}
+		if (!animating && !_updatingFromFlickable && !fullMouse.pressed) {
+			nonAnimPosition = position;
+		}
+	}
+
+	// Sync nonAnimPosition with flickable when not animating
+	Connections {
+		function onContentYChanged() {
+			if (!animating && !fullMouse.pressed) {
+				_updatingFromFlickable = true;
+				const contentHeight = flickable.contentHeight;
+				const height = flickable.height;
+				if (contentHeight > height) {
+					nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+				} else {
+					nonAnimPosition = 0;
+				}
+				_updatingFromFlickable = false;
+			}
+		}
+
+		target: flickable
 	}
 
 	Connections {
-		function onMovingChanged() {
+		function onMovingChanged(): void {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;
 			else
@@ -46,57 +113,6 @@ ScrollBar {
 		target: root.flickable
 	}
 
-	CustomClippingRect {
-		anchors.bottom: parent.bottom
-		anchors.right: parent.right
-		anchors.top: parent.top
-		implicitWidth: handle.implicitWidth
-		radius: Appearance.rounding.full
-
-		CustomRect {
-			id: handle
-
-			anchors.right: parent.right
-			color: DynamicColors.palette.m3secondary
-			implicitHeight: root.height * root.effectiveSize
-			implicitWidth: fullMouse.pressed || fullMouse.containsMouse ? Appearance.padding.extraSmall * 2 : Appearance.padding.extraSmall
-			opacity: {
-				if (!root.enabled)
-					return 0;
-				if (root.size === 1)
-					return 0;
-				if (fullMouse.pressed)
-					return 1;
-				if (fullMouse.containsMouse)
-					return 0.8;
-				if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
-					return 0.6;
-				return 0;
-			}
-			radius: Appearance.rounding.full
-			y: root.reversed ? root.height * (1 + root.nonAnimY) * root.travelScale : root.height * root.nonAnimY * root.travelScale
-
-			Behavior on implicitWidth {
-				Anim {
-				}
-			}
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-
-			MouseArea {
-				id: mouse
-
-				acceptedButtons: Qt.NoButton
-				anchors.fill: parent
-				cursorShape: Qt.PointingHandCursor
-				hoverEnabled: true
-			}
-		}
-	}
-
 	Timer {
 		id: hideDelay
 
@@ -108,55 +124,66 @@ ScrollBar {
 	CustomMouseArea {
 		id: fullMouse
 
-		property real pressOffset: 0
+		function onWheel(event: WheelEvent): void {
-
+			root.animating = true;
-		function contentYFromThumbTop(thumbTop) {
+			root._updatingFromUser = true;
-			var visualPos = root.effectiveTravel > 0 ? thumbTop / root.travelScale : 0;
+			let newPos = root.nonAnimPosition;
-
+			if (event.angleDelta.y > 0)
-			return root.reversed ? (visualPos - 1) * root.flickable.contentHeight : visualPos * root.flickable.contentHeight;
+				newPos = Math.max(0, root.nonAnimPosition - 0.1);
-		}
+			else if (event.angleDelta.y < 0)
-
+				newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
-		function updateFromEvent(event) {
+			root.nonAnimPosition = newPos;
-			var posInTrack = event.y / root.height;
+			// Update flickable position
-			var thumbTop = posInTrack - pressOffset;
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
-			thumbTop = Math.max(0, Math.min(root.effectiveTravel, thumbTop));
+			if (root.flickable) {
-
+				const contentHeight = root.flickable.contentHeight;
-			root.flickable.contentY = contentYFromThumbTop(thumbTop);
+				const height = root.flickable.height;
-		}
+				if (contentHeight > height) {
-
+					const maxContentY = contentHeight - height;
-		function visualThumbTop() {
+					const maxPos = 1 - root.size;
-			const visualPos = root.reversed ? (1 + root.nonAnimY) : root.nonAnimY;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
-			return visualPos * root.travelScale;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 
 		anchors.fill: parent
-		cursorShape: undefined
-		hoverEnabled: true
 		preventStealing: true
 
 		onPositionChanged: event => {
-			if (pressed)
+			root._updatingFromUser = true;
-				updateFromEvent(event);
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 		onPressed: event => {
-			var currentTop = visualThumbTop();
+			root.animating = true;
-			var currentBottom = currentTop + root.effectiveSize;
+			root._updatingFromUser = true;
-			var clickPos = event.y / root.height;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
-
+			root.nonAnimPosition = newPos;
-			var clickedInsideThumb = clickPos >= currentTop && clickPos <= currentBottom;
+			// Update flickable position
-
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
-			if (clickedInsideThumb) {
+			if (root.flickable) {
-				pressOffset = clickPos - currentTop;
+				const contentHeight = root.flickable.contentHeight;
-			} else {
+				const height = root.flickable.height;
-				pressOffset = root.effectiveSize / 2;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
 			}
-
-			updateFromEvent(event);
-		}
-		onWheel: event => {
-			var delta = event.angleDelta.y > 0 ? -0.1 : 0.1;
-			var newPos = Math.max(0, Math.min(1 - root.size, root.position + delta));
-			root.position = newPos;
 		}
 	}
 }

Components/CustomSlider.qml

@@ -1,201 +1,47 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Templates
-import ZShell.Components
-import ZShell
-import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property bool animateWave
+	property color color: DynamicColors.palette.m3primary
-	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 {
-			id: remaining
-
-			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			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.right: parent.right
-			anchors.rightMargin: 4 * remaining.opacity
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: 4 * remaining.opacity
-			implicitWidth: implicitHeight
-			opacity: remaining.opacity
-			radius: Appearance.rounding.full
-		}
-
-		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.width ? (root.width - handle.implicitWidth - handle.anchors.leftMargin) * root.pos < inset.paintedWidth + Appearance.spacing.extraSmall * 2 : false
-			property real dockT: attached ? 1 : 0
-
 			anchors.bottom: parent.bottom
+			anchors.left: parent.left
 			anchors.top: parent.top
-			color: root.insetColor
+			bottomRightRadius: root.implicitHeight / 6
-			font.pixelSize: Appearance.font.size.smaller * 2
+			color: root.color
-			text: root.insetIcon
+			implicitWidth: root.handle.x - root.implicitHeight / 2
-			verticalAlignment: Text.AlignVCenter
+			radius: Appearance.rounding.full
-			visible: !root.wavy && root.insetIcon !== ""
+			topRightRadius: root.implicitHeight / 6
-			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
-
-			Behavior on dockT {
-				Anim {
-				}
-			}
 		}
 
-		Component {
+		CustomRect {
-			id: lineComp
+			anchors.bottom: parent.bottom
-
+			anchors.right: parent.right
-			CustomRect {
+			anchors.top: parent.top
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
+			bottomLeftRadius: root.implicitHeight / 6
-				color: root.fgColor
+			color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: root.height
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-				implicitWidth: root.filledWidth
+			radius: Appearance.rounding.full
-				radius: root.radius
+			topLeftRadius: root.implicitHeight / 6
-				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
-				}
-			}
 		}
 	}
-	Behavior on filledWidth {
+	handle: CustomRect {
-		id: widthBehavior
-
-		Anim {
-		}
-	}
-
-	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
+		color: root.color
-		preventStealing: true
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		onPositionChanged: e => {
+		MouseArea {
-			dragMovement = (e.x - pressStartX) / width;
+			acceptedButtons: Qt.NoButton
-			root.interaction(posBinding.value);
+			anchors.fill: parent
-		}
+			cursorShape: Qt.PointingHandCursor
-		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,7 +28,6 @@ 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
@@ -37,7 +36,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -86,7 +85,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -94,9 +93,7 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			color: DynamicColors.palette.m3onPrimary
+			function onClicked(): void {
-
-			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;
@@ -105,6 +102,9 @@ 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: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,9 +127,7 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			color: DynamicColors.palette.m3onPrimary
+			function onClicked(): void {
-
-			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;
@@ -138,6 +136,9 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -146,7 +147,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_down"
 		}
 	}

Components/CustomSplitButton.qml

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

Components/CustomSplitButtonRow.qml

@@ -9,6 +9,7 @@ Item {
 
 	property alias active: splitButton.active
 	property alias buttonAlias: splitButton
+	property bool enabled: true
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
@@ -24,7 +25,7 @@ Item {
 	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
-	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+	z: root.expanded ? expandedZ : -1
 
 	Behavior on opacity {
 		Anim {
@@ -49,6 +50,7 @@ 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 {
@@ -56,13 +58,14 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: 2
+			z: root.expanded ? root.expandedZ : -1
 
 			menu.onItemSelected: item => {
 				root.selected(item);
+				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
+				splitButton.toggleDropdown();
 			}
 		}
 	}

Components/CustomSwitch.qml

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

Components/CustomText.qml

@@ -27,25 +27,24 @@ Text {
 		enabled: root.animate
 
 		SequentialAnimation {
-			TAnim {
+			Anim {
-				target: root
+				easing.bezierCurve: MaterialEasing.standardAccel
 				to: root.animateFrom
-				type: Anim.FastEffects
 			}
 
 			PropertyAction {
 			}
 
-			TAnim {
+			Anim {
-				target: root
+				easing.bezierCurve: MaterialEasing.standardDecel
 				to: root.animateTo
-				type: Anim.DefaultEffects
 			}
 		}
 	}
 
-	component TAnim: Anim {
+	component Anim: NumberAnimation {
 		duration: root.animateDuration / 2
+		easing.type: Easing.BezierSpline
 		properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
 		property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
 		target: root

Components/CustomTextField.qml

@@ -7,8 +7,6 @@ import qs.Config
 TextField {
 	id: root
 
-	property int cursorHeight: root.height
-
 	background: null
 	color: DynamicColors.palette.m3onSurface
 	cursorVisible: !readOnly

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,7 +13,6 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
-			type: Anim.SlowEffects
 		}
 	}
 }

Components/IconButton.qml

@@ -1,45 +1,78 @@
-import QtQuick
 import qs.Config
+import QtQuick
 
-ButtonBase {
+CustomRect {
 	id: root
 
-	property alias icon: label.text
+	enum Type {
-	readonly property alias label: label
+		Filled,
-
+		Tonal,
-	activeColor: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+		Text
-	activeOnColor: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
-	implicitHeight: {
-		const h = label.implicitHeight + padding * 2;
-		if (h % 2 !== 0)
-			return h + 1;
-		return h;
 	}
-	implicitWidth: implicitHeight
+
-	inactiveColor: {
+	property color activeColour: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-		if (!isToggle && type === IconButton.Filled)
+	property color activeOnColour: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	property bool checked
+	property bool disabled
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledOnColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property alias font: label.font
+	property alias icon: label.text
+	property color inactiveColour: {
+		if (!toggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3primary;
 		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
 	}
-	inactiveOnColor: {
+	property color inactiveOnColour: {
-		if (!isToggle && type === IconButton.Filled)
+		if (!toggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3onPrimary;
 		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
 	}
-	padding: type === IconButton.Text ? Appearance.padding.extraSmall / 2 : Appearance.padding.small
+	property bool internalChecked
+	property alias label: label
+	property real padding: type === IconButton.Text ? 10 / 2 : 7
+	property alias radiusAnim: radiusAnim
+	property alias stateLayer: stateLayer
+	property bool toggle
+	property int type: IconButton.Filled
+
+	signal clicked
+
+	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)) * Appearance.rounding.scale
+
+	Behavior on radius {
+		Anim {
+			id: radiusAnim
+		}
+	}
+
+	onCheckedChanged: internalChecked = checked
+
+	StateLayer {
+		id: stateLayer
+
+		function onClicked(): void {
+			if (root.toggle)
+				root.internalChecked = !root.internalChecked;
+			root.clicked();
+		}
+
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+	}
 
 	MaterialIcon {
 		id: label
 
 		anchors.centerIn: parent
-		anchors.verticalCenterOffset: 1
+		color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-		color: root.onColor
+		fill: !root.toggle || root.internalChecked ? 1 : 0
-		fill: !root.isToggle || root.internalChecked ? 1 : 0
-		font.pointSize: root.font.pointSize
 
 		Behavior on fill {
 			Anim {
-				type: Anim.DefaultEffects
 			}
 		}
 	}

Components/IconTextButton.qml

@@ -1,70 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-
-ButtonBase {
-	id: root
-
-	property alias icon: iconLabel.text
-	readonly property alias iconLabel: iconLabel
-	readonly property alias label: label
-	property alias text: label.text
-
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-	activeOnColor: {
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
-	}
-	horizontalPadding: Appearance.padding.larger
-	implicitHeight: row.implicitHeight + verticalPadding * 2
-	implicitWidth: row.implicitWidth + horizontalPadding * 2
-	inactiveColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
-	}
-	inactiveOnColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
-	}
-	verticalPadding: Appearance.padding.small
-
-	RowLayout {
-		id: row
-
-		anchors.centerIn: parent
-		spacing: Appearance.spacing.small
-
-		MaterialIcon {
-			id: iconLabel
-
-			Layout.alignment: Qt.AlignVCenter
-			color: root.onColor
-			fill: root.internalChecked ? 1 : 0
-			font: {
-				const f = Qt.font(root.font);
-				f.pointSize = Math.round(root.font.pointSize * 1.2);
-				f.family = "Material Symbols Rounded";
-				return f;
-			}
-
-			Behavior on fill {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-		}
-
-		CustomText {
-			id: label
-
-			Layout.alignment: Qt.AlignVCenter
-			color: root.onColor
-			font: root.font
-		}
-	}
-}

Components/MaterialIcon.qml

@@ -1,26 +1,15 @@
 import qs.Config
 
 CustomText {
-	id: root
+	property real fill
-
-	readonly property list<int> allowed: [20, 24, 40, 48]
-	property real fill: 0
 	property int grade: DynamicColors.light ? 0 : -25
-	readonly property int opsz: clampOpsz(optical)
-	property int optical: fontInfo.pixelSize
-
-	function clampOpsz(value): int {
-		return allowed.reduce((closest, current) => {
-			return Math.abs(current - value) < Math.abs(closest - value) ? current : closest;
-		});
-	}
 
 	font.family: "Material Symbols Rounded"
 	font.pointSize: Appearance.font.size.larger
 	font.variableAxes: ({
-			FILL: fill,
+			FILL: fill.toFixed(1),
 			GRAD: grade,
-			opsz: opsz,
+			opsz: fontInfo.pixelSize,
 			wght: fontInfo.weight
 		})
 }

Components/Menu.qml

@@ -2,185 +2,109 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import qs.Config
-import qs.Drawers
 
-MouseArea {
+Elevation {
 	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)
 
-	anchors.fill: parent
+	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
-	cursorShape: undefined
+	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;
-		const contentWin = win as Windows;
-		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-	}
 
+	Behavior on implicitHeight {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
 	Behavior on opacity {
 		Anim {
-			type: Anim.DefaultEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
 		}
 	}
 
-	onClicked: expanded = false
+	CustomClippingRect {
-	onExpandedChanged: {
+		anchors.fill: parent
-		const win = QsWindow.window;
+		color: DynamicColors.palette.m3surfaceContainer
-		const contentWin = win as Windows;
+		radius: parent.radius
-		if (expanded) {
-			contentWin.menuRegion.x = menu.x;
-			contentWin.menuRegion.y = menu.y;
-			contentWin.menuRegion.width = menu.width;
-			contentWin.menuRegion.height = menu.height;
-		} else {
-			contentWin.menuRegion.x = 0;
-			contentWin.menuRegion.y = 0;
-			contentWin.menuRegion.width = 0;
-			contentWin.menuRegion.height = 0;
-		}
-	}
 
-	TransformWatcher {
+		ColumnLayout {
-		id: watcher
+			id: column
 
-		a: root.parent
+			anchors.left: parent.left
-		b: root.attachTo
+			anchors.right: parent.right
-	}
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
 
-	Elevation {
+			Repeater {
-		id: menu
+				model: root.items
 
-		implicitHeight: column.implicitHeight + column.anchors.margins * 2
+				CustomRect {
-		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
+					id: item
-		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;
-		}
 
-		transform: Scale {
+					readonly property bool active: modelData === root.active
-			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
+					required property int index
-			yScale: root.expanded ? 1 : 0.1
+					required property MenuItem modelData
 
-			Behavior on yScale {
+					Layout.fillWidth: true
-				Anim {
+					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
-				}
+					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 {
-						id: item
+						anchors.fill: parent
-
+						anchors.leftMargin: Appearance.padding.small
-						readonly property bool active: modelData === root.active
+						anchors.rightMargin: Appearance.padding.small
-						required property int index
+						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
-						required property MenuItem modelData
+						radius: Appearance.rounding.normal - Appearance.padding.small
-
-						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 {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							function onClicked(): void {
-							enabled: 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
 						}
 
-						RowLayout {
+						CustomText {
-							id: menuOptionRow
+							Layout.alignment: Qt.AlignVCenter
+							Layout.fillWidth: true
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							text: item.modelData.text
+						}
 
-							anchors.fill: parent
+						Loader {
-							anchors.margins: Appearance.padding.larger
+							Layout.alignment: Qt.AlignVCenter
-							spacing: Appearance.spacing.small
+							active: item.modelData.trailingIcon.length > 0
+							visible: active
 
-							MaterialIcon {
+							sourceComponent: MaterialIcon {
-								Layout.alignment: Qt.AlignVCenter
+								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								text: item.modelData.trailingIcon
-								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,198 +1,95 @@
-import QtQuick
-import QtQuick.Shapes
-import ZShell
-import ZShell.Components
-import qs.Helpers
 import qs.Config
+import QtQuick
 
 MouseArea {
 	id: root
 
-	property alias bottomLeftRadius: base.bottomLeftRadius
+	property color color: DynamicColors.palette.m3onSurface
-	property alias bottomRightRadius: base.bottomRightRadius
+	property bool disabled
-	property real circleRadius
+	property real radius: parent?.radius ?? 0
-	property alias color: base.color
+	property alias rect: hoverLayer
-	readonly property real endRadius: {
-		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 clamp(r: real): real {
+	function onClicked(): void {
-		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
-	cursorShape: !enabled ? undefined : Qt.PointingHandCursor
+	cursorShape: disabled ? undefined : Qt.PointingHandCursor
-	enabled: parent.enabled && !Visibilities.getForActive().isDrawing
+	enabled: !disabled
 	hoverEnabled: true
 
-	Behavior on stateOpacity {
+	onClicked: event => !disabled && onClicked(event)
+	onPressed: event => {
+		if (disabled)
+			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 {
+		id: rippleAnim
+
+		property real radius
+		property real x
+		property real y
+
+		PropertyAction {
+			property: "x"
+			target: ripple
+			value: rippleAnim.x
+		}
+
+		PropertyAction {
+			property: "y"
+			target: ripple
+			value: rippleAnim.y
+		}
+
+		PropertyAction {
+			property: "opacity"
+			target: ripple
+			value: 0.08
+		}
+
 		Anim {
-			type: Anim.DefaultEffects
+			easing.bezierCurve: MaterialEasing.standardDecel
+			from: 0
+			properties: "implicitWidth,implicitHeight"
+			target: ripple
+			to: rippleAnim.radius * 2
+		}
+
+		Anim {
+			property: "opacity"
+			target: ripple
+			to: 0
 		}
 	}
 
-	onCircleRadiusChanged: {
+	CustomClippingRect {
-		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+		id: hoverLayer
-			fadeAnim.start();
-	}
-	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
-
-		alwaysRunToEnd: true
-		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Appearance.anim.curves.standard
-		property: "circleRadius"
-		target: root
-		to: root.endRadius
-	}
-
-	Anim {
-		id: fadeAnim
-
-		property: "opacity"
-		target: circle
-		to: 0
-		type: Anim.SlowEffects
-	}
-
-	CustomRect {
-		id: base
 
 		anchors.fill: parent
-		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
+		border.pixelAligned: false
-		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
+		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
-		color: DynamicColors.palette.m3onSurface
+		radius: root.radius
-		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
-	}
 
-	Shape {
+		CustomRect {
-		id: circle
+			id: ripple
 
-		anchors.fill: parent
+			border.pixelAligned: false
-		opacity: 0
+			color: root.color
-		preferredRendererType: Shape.CurveRenderer
+			opacity: 0
+			radius: Appearance.rounding.full
 
-		ShapePath {
+			transform: Translate {
-			fillColor: base.color
+				x: -ripple.width / 2
-			startX: root.clamp(base.topLeftRadius)
+				y: -ripple.height / 2
-			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
 			}
 		}
 	}

Components/TextButton.qml

@@ -1,40 +0,0 @@
-import QtQuick
-import qs.Config
-
-ButtonBase {
-	id: root
-
-	readonly property alias label: label
-	property alias text: label.text
-
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-	activeOnColor: {
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
-	}
-	horizontalPadding: Appearance.padding.normal
-	implicitHeight: label.implicitHeight + verticalPadding * 2
-	implicitWidth: label.implicitWidth + horizontalPadding * 2
-	inactiveColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
-	}
-	inactiveOnColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
-	}
-	verticalPadding: Appearance.padding.small
-
-	CustomText {
-		id: label
-
-		anchors.centerIn: parent
-		color: root.onColor
-		font: root.font
-	}
-}

Config/Appearance.qml

@@ -7,6 +7,8 @@ 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,13 +28,9 @@ 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]
@@ -42,9 +38,7 @@ 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
@@ -63,8 +57,7 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 16 * scale
+		property int larger: 15 * scale
-		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -77,30 +70,23 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int extraLarge: 28 * scale
+		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 largeIncreased: 20 * 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/BarConfig.qml

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

Config/ClipboardConfig.qml

@@ -1,15 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int maxEntriesShown: 10
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int itemHeight: 60
-		property int minPreviewWidth: 200
-		property int previewWidth: 500
-		property int width: 500
-	}
-}

Config/Config.qml

@@ -13,7 +13,6 @@ Singleton {
 	property alias appearance: adapter.appearance
 	property alias background: adapter.background
 	property alias barConfig: adapter.barConfig
-	property alias clipboard: adapter.clipboard
 	property alias colors: adapter.colors
 	property alias dashboard: adapter.dashboard
 	property alias dock: adapter.dock
@@ -23,6 +22,7 @@ Singleton {
 	property alias notifs: adapter.notifs
 	property alias osd: adapter.osd
 	property alias overview: adapter.overview
+	property alias plugins: adapter.plugins
 	property bool recentlySaved: false
 	property alias screenshot: adapter.screenshot
 	property alias services: adapter.services
@@ -101,9 +101,6 @@ Singleton {
 			border: barConfig.border,
 			smoothing: barConfig.smoothing,
 			height: barConfig.height,
-			tray: {
-				trayIconSize: barConfig.tray.trayIconSize
-			},
 			popouts: {
 				tray: barConfig.popouts.tray,
 				audio: barConfig.popouts.audio,
@@ -117,19 +114,6 @@ Singleton {
 		};
 	}
 
-	function serializeClipboard(): var {
-		return {
-			enabled: clipboard.enabled,
-			maxEntriesShown: clipboard.maxEntriesShown,
-			sizes: {
-				width: clipboard.sizes.width,
-				previewWidth: clipboard.sizes.previewWidth,
-				minPreviewWidth: clipboard.sizes.minPreviewWidth,
-				itemHeight: clipboard.sizes.itemHeight
-			}
-		};
-	}
-
 	function serializeColors(): var {
 		return {
 			schemeType: colors.schemeType,
@@ -158,7 +142,7 @@ Singleton {
 			colors: serializeColors(),
 			dock: serializeDock(),
 			screenshot: serializeScreenshot(),
-			clipboard: serializeClipboard()
+			plugins: serializePlugins()
 		};
 	}
 
@@ -188,7 +172,7 @@ Singleton {
 				resourceProgessThickness: dashboard.sizes.resourceProgessThickness,
 				weatherWidth: dashboard.sizes.weatherWidth,
 				mediaCoverArtSize: dashboard.sizes.mediaCoverArtSize,
-				mediaVisualizerSize: dashboard.sizes.mediaVisualizerSize,
+				mediaVisualiserSize: dashboard.sizes.mediaVisualiserSize,
 				resourceSize: dashboard.sizes.resourceSize
 			}
 		};
@@ -209,7 +193,6 @@ Singleton {
 		return {
 			logo: general.logo,
 			wallpaperPath: general.wallpaperPath,
-			showOverFullscreen: general.showOverFullscreen,
 			desktopIcons: general.desktopIcons,
 			dateFormat: general.dateFormat,
 			color: {
@@ -233,10 +216,6 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
-			},
-			battery: {
-				popupThresholds: general.battery.popupThresholds,
-				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -312,14 +291,21 @@ Singleton {
 		};
 	}
 
+	function serializePlugins(): var {
+		return {
+			enabled: plugins.enabled,
+			entries: plugins.entries
+		};
+	}
+
 	function serializeScreenshot(): var {
 		return {
 			enable_pp: screenshot.enable_pp,
 			mode: screenshot.mode,
-			radius: screenshot.radius,
+			corner_radius: screenshot.corner_radius,
-			shadow: screenshot.shadow,
+			drop_shadow: screenshot.drop_shadow,
-			rounding: screenshot.rounding,
+			rounded_corners: screenshot.rounded_corners,
-			shadow_blur: screenshot.shadow_blur,
+			shadow_blur_radius: screenshot.shadow_blur_radius,
 			shadow_color: screenshot.shadow_color,
 			shadow_offset_x: screenshot.shadow_offset_x,
 			shadow_offset_y: screenshot.shadow_offset_y
@@ -331,7 +317,6 @@ Singleton {
 			weatherLocation: services.weatherLocation,
 			updates: services.updates,
 			useFahrenheit: services.useFahrenheit,
-			minBrightness: services.minBrightness,
 			ddcutilService: services.ddcutilService,
 			useTwelveHourClock: services.useTwelveHourClock,
 			gpuType: services.gpuType,
@@ -464,8 +449,6 @@ Singleton {
 			}
 			property BarConfig barConfig: BarConfig {
 			}
-			property ClipboardConfig clipboard: ClipboardConfig {
-			}
 			property Colors colors: Colors {
 			}
 			property DashboardConfig dashboard: DashboardConfig {
@@ -484,6 +467,8 @@ Singleton {
 			}
 			property Overview overview: Overview {
 			}
+			property PluginConfig plugins: PluginConfig {
+			}
 			property Screenshot screenshot: Screenshot {
 			}
 			property Services services: Services {

Config/DashboardConfig.qml

@@ -25,7 +25,7 @@ JsonObject {
 		readonly property int mediaCoverArtSize: 150
 		readonly property int mediaProgressSweep: 180
 		readonly property int mediaProgressThickness: 8
-		readonly property int mediaVisualizerSize: 200
+		readonly property int mediaVisualiserSize: 80
 		readonly property int mediaWidth: 200
 		readonly property int resourceProgessThickness: 10
 		readonly property int resourceSize: 200

Config/DynamicColors.qml

@@ -115,10 +115,6 @@ Singleton {
 		Config.save();
 	}
 
-	function swapRG(c: color): color {
-		return Qt.rgba(c.g, c.r, c.b, c.a);
-	}
-
 	Component.onCompleted: debounceTimer.triggered()
 
 	Connections {

Config/General.qml

@@ -4,8 +4,6 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
-	property Battery battery: Battery {
-	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -13,30 +11,14 @@ JsonObject {
 	property Idle idle: Idle {
 	}
 	property string logo: ""
-	property bool showOverFullscreen: true
 	property string wallpaperPath: Quickshell.env("HOME") + "/Pictures/Wallpapers"
 
 	component Apps: JsonObject {
-		property list<string> archiver: ["ark"]
 		property list<string> audio: ["pavucontrol"]
-		property list<string> document: ["libreoffice"]
-		property list<string> editor: ["kate"]
 		property list<string> explorer: ["dolphin"]
-		property list<string> image: ["imv"]
 		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/PluginConfig.qml

@@ -0,0 +1,11 @@
+import Quickshell.Io
+
+JsonObject {
+	property bool enabled: false
+	property list<var> entries: [
+		{
+			id: "Plugin",
+			enabled: false
+		},
+	]
+}

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 real radius: 12.0
+	property bool rounded_corners: false
-	property bool rounding: false
+	property real shadow_blur_radius: 22.0
-	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

Config/Services.qml

@@ -8,7 +8,6 @@ JsonObject {
 	property string defaultPlayer: "Spotify"
 	property string gpuType: ""
 	property real maxVolume: 1.0
-	property real minBrightness: 0.01
 	property list<var> playerAliases: [
 		{
 			"from": "com.github.th_ch.youtube_music",

Daemons/BatteryService.qml

@@ -1,70 +0,0 @@
-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,8 +179,6 @@ 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 {
@@ -215,14 +213,10 @@ Singleton {
 				notif.hasActionIcons = notif.notification.hasActionIcons;
 			}
 
-			function onHintsChanged(): void {
-				notif.hints = notif.notification.hints;
-			}
-
 			function onImageChanged(): void {
-				notif.imageSource = notif.notification.image || "";
+				notif.image = notif.notification.image;
-				notif.image = notif.imageSource;
+				if (notif.notification?.image)
-				notif.cacheImageIfNeeded();
+					notif.dummyImageLoader.active = true;
 			}
 
 			function onResidentChanged(): void {
@@ -239,13 +233,60 @@ 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 var hints
+		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
@@ -288,26 +329,6 @@ 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)) {
@@ -331,14 +352,14 @@ Singleton {
 			if (!notification)
 				return;
 
-			notifId = notification.id;
+			id = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			imageSource = notification.image || "";
+			image = notification.image;
-			image = imageSource;
+			if (notification?.image)
-			hints = notification.hints;
+				dummyImageLoader.active = true;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -348,8 +369,6 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
-
-			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

@@ -0,0 +1,107 @@
+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

@@ -1,25 +0,0 @@
-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

@@ -1,30 +1,35 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
 import QtQuick
-import ZShell.Internal
 
-Item {
+Canvas {
 	id: root
 
-	readonly property alias content: contentLoader.item
+	property color penColor: "white"
-	readonly property PersistentProperties drawingState: PersistentProperties {
+	property real penWidth: 4
-		property color penColor: "white"
+	property var points: []
-		property int penWidth: 4
 
-		reloadableId: "drawingState"
+	function clear(): void {
+		var ctx = getContext('2d');
+		root.points = [];
+		ctx.reset();
+		root.requestPaint();
 	}
-	required property PersistentProperties visibilities
 
-	Loader {
+	renderStrategy: Canvas.Cooperative
-		id: contentLoader
 
-		active: root.visibilities.isDrawing
+	onPaint: {
-		anchors.fill: parent
+		if (points.length < 2)
-
+			return;
-		sourceComponent: StrokeCanvas {
+		var ctx = root.getContext('2d');
-			penColor: root.drawingState.penColor
+		ctx.save();
-			penWidth: root.drawingState.penWidth
+		ctx.lineWidth = root.penWidth;
-		}
+		ctx.strokeStyle = root.penColor;
+		ctx.lineCap = "round";
+		ctx.beginPath();
+		ctx.moveTo(points[0].x, points[0].y);
+		for (var i = 1; i < points.length; i++)
+			ctx.lineTo(points[i].x, points[i].y);
+		ctx.stroke();
+		points = points.slice(points.length - 2);
+		ctx.restore();
 	}
 }

Drawers/DrawingInput.qml

@@ -0,0 +1,60 @@
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Config
+
+CustomMouseArea {
+	id: root
+
+	required property var bar
+	required property Drawing drawing
+	required property Panels panels
+	required property var popout
+	required property PersistentProperties visibilities
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + bar.implicitHeight;
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	anchors.fill: root.visibilities.isDrawing ? parent : undefined
+	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();
+		}
+
+		if (root.inLeftPanel(root.popout, x, y)) {
+			root.z = -2;
+			root.panels.drawing.expanded = true;
+		}
+	}
+	onPressed: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.panels.drawing.expanded = false;
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
+			return;
+		}
+
+		if (event.buttons & Qt.RightButton)
+			root.drawing.clear();
+	}
+	onReleased: {
+		root.drawing.points = [];
+	}
+}

Drawers/Interactions.qml

@@ -2,21 +2,20 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
-import qs.Helpers
 import qs.Modules as BarPopouts
 
-Item {
+CustomMouseArea {
 	id: root
 
 	required property Item bar
-	required property real borderThickness
 	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
 
@@ -48,181 +47,83 @@ Item {
 	}
 
 	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + root.borderThickness;
+		const panelX = panel.x;
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
 	anchors.fill: parent
+	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+	hoverEnabled: true
+	propagateComposedEvents: false
 
-	DragHandler {
+	onContainsMouseChanged: {
-		id: singleHandler
+		if (!containsMouse) {
-
+			if (!osdShortcutActive) {
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+				visibilities.osd = false;
-		dragThreshold: 0
+				root.panels.osd.hovered = false;
-		enabled: !root.visibilities.isDrawing
-		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfSameType | PointerHandler.ApprovesTakeOverByAnything
-		maximumPointCount: 1
-		minimumPointCount: 1
-		target: null
-
-		onActiveChanged: {
-			if (!active)
-				root.singleGestureTriggered = false;
-		}
-		onCentroidChanged: {
-			const x = centroid.position.x;
-			const y = centroid.position.y;
-			const dragX = x - centroid.pressPosition.x;
-			const dragY = y - centroid.pressPosition.y;
-
-			if (centroid.pressPosition.y >= root.screen.height - Config.barConfig.border && centroid.pressPosition.x > root.screen.width / 5 && 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 (centroid.pressPosition.y > root.screen.height - Config.barConfig.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
+			if (!popouts.currentName.startsWith("traymenu")) {
-				root.visibilities.clipboard = true;
+				popouts.hasCurrent = false;
-
-			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight && centroid.pressPosition.x > root.screen.width / 5 && !root.visibilities.launcher)
-				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 (centroid.pressPosition.x >= root.screen.width - Config.barConfig.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
+			if (Config.barConfig.autoHide)
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+				bar.isHovered = false;
-				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;
 
-	PointHandler {
+		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
-		id: drawingHandler
+			// root.input.z = 2;
+			root.panels.drawing.expanded = false;
+		}
 
-		property bool setInitialPoint: false
+		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+			bar.isHovered = true;
 
-		acceptedButtons: Qt.LeftButton | Qt.RightButton
+		if (pressed && dragStart.y < bar.implicitHeight) {
-		enabled: root.visibilities.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
+			if (dragY > 20)
+				visibilities.settings = true;
+			else if (dragY < -20)
+				visibilities.settings = false;
+		}
 
-		onActiveChanged: {
+		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
-			if (!active) {
+			if (dragY < -10)
-				setInitialPoint = false;
+				visibilities.dock = true;
-				root.drawing.content.endStroke();
+
-			} else {
+		if (panels.sidebar.width === 0) {
-				root.panels.drawing.collapse();
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
+			}
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width;
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
+
+			if (!osdShortcutActive) {
+				visibilities.osd = showOsd;
+				root.panels.osd.hovered = showOsd;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
 			}
 		}
-		onPointChanged: {
-			if (!active)
-				return;
-			const x = point.position.x;
-			const y = point.position.y;
-			const origX = point.pressPosition.x;
-			const origY = point.pressPosition.y;
 
-			if (point.pressedButtons & Qt.RightButton) {
+		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
-				root.drawing.content.clear();
+			visibilities.dock = true;
-				return;
-			}
-			if (x === 0 && y === 0 && origX === 0 && origY === 0)
-				return;
 
-			if (!setInitialPoint) {
+		if (y < root.bar.implicitHeight) {
-				setInitialPoint = true;
+			root.bar.checkPopout(x);
-				root.drawing.content.beginStroke(origX, origY);
-				return;
-			}
-
-			root.drawing.content.appendPoint(x, y);
-		}
-	}
-
-	HoverHandler {
-		id: hoverHandler
-
-		cursorShape: root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, point.position.x, point.position.y) ? Qt.BlankCursor : undefined
-
-		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 (root.visibilities.isDrawing) {
-				if (root.inLeftPanel(root.panels.drawing, x, y) && !(drawingHandler.point.pressedButtons & Qt.LeftButton)) {
-					root.panels.drawing.expand();
-					root.drawing.content.hideHover();
-					return;
-				}
-
-				root.drawing.content.showHover(x, y);
-				return;
-			}
-
-			if (!root.visibilities.bar && Config.barConfig.autoHide && y < root.bar.implicitHeight)
-				root.bar.isHovered = true;
-
-			if (root.panels.sidebar.width === 0) {
-				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			} else {
-				const outOfSidebar = x < root.width - root.panels.sidebar.width;
-				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (!root.osdShortcutActive) {
-					root.visibilities.osd = showOsd;
-					root.panels.osd.hovered = showOsd;
-				} else if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			}
-
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.visibilities.dock = true;
-
-			if (y < root.bar.implicitHeight)
-				root.bar.checkPopout(x);
 		}
 	}
+	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -231,8 +132,6 @@ Item {
 				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;
@@ -262,10 +161,6 @@ Item {
 			}
 
 			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

@@ -13,20 +13,17 @@ import qs.Modules.Resources as Resources
 import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
-import qs.Modules.Clipboard as Clipboard
 import qs.Config
 
 Item {
 	id: root
 
 	required property Item bar
-	required property real borderThickness
-	readonly property alias clipboard: clipboard
 	readonly property alias dashboard: dashboard
 	readonly property alias dashboardWrapper: dashboardWrapper
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
-	required property var drawingItem
+	required property Canvas drawingItem
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -44,7 +41,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	anchors.fill: parent
-	anchors.margins: borderThickness
+	anchors.margins: Config.barConfig.border
 	anchors.topMargin: bar.implicitHeight
 
 	Item {
@@ -100,7 +97,6 @@ Item {
 		id: popouts
 
 		anchors.top: parent.top
-		borderThickness: root.borderThickness
 		screen: root.screen
 	}
 
@@ -211,13 +207,4 @@ Item {
 		screen: root.screen
 		visibilities: root.visibilities
 	}
-
-	Clipboard.Wrapper {
-		id: clipboard
-
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
-		screen: root.screen
-		visibilities: root.visibilities
-	}
 }

Drawers/Windows.qml

@@ -9,460 +9,383 @@ 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
 
-CustomWindow {
+Variants {
-	id: root
+	model: Quickshell.screens
 
-	readonly property alias bar: bar
+	Scope {
-	readonly property real borderLayoutThickness: hasFullscreen ? 0 : Config.barConfig.border
+		id: scope
-	readonly property real borderRounding: Config.barConfig.rounding * (1 - fsTransitionProg)
-	readonly property real borderThickness: Config.barConfig.border * (1 - fsTransitionProg)
-	readonly property int dragMaskPadding: {
-		if (focusGrab.active)
-			return 0;
 
-		if (monitor?.lastIpcObject.specialWorkspace?.name || monitor?.activeWorkspace.lastIpcObject.windows > 0)
+		required property var modelData
-			return 0;
 
-		return 100;
+		Exclusions {
-	}
+			bar: bar
-	property real fsTransitionProg: hasFullscreen ? 1 : 0
+			screen: scope.modelData
-	readonly property bool hasFullscreen: {
-		if (hasSpecialWorkspace) {
-			const specialName = monitor?.lastIpcObject.specialWorkspace?.name;
-			if (!specialName)
-				return false;
-			const specialWs = Hypr.workspaces.values.find(ws => ws.name === specialName);
-			return specialWs?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false;
-		}
-		return hasFullscreenOnNormalWs;
-	}
-	readonly property bool hasFullscreenOnNormalWs: monitor?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false
-	readonly property bool hasSpecialWorkspace: (monitor?.lastIpcObject.specialWorkspace?.name.length ?? 0) > 0
-	readonly property alias interactionWrapper: interactions
-	readonly property alias menuRegion: menuPopoutRegion
-	readonly property HyprlandMonitor monitor: Hypr.monitorFor(screen)
-	property var root: Quickshell.shellDir
-	readonly property real sdfBorderOffset: 2 * fsTransitionProg
-	readonly property real shadowOpacity: 0.7 * (1 - fsTransitionProg)
-	property color surfaceColor: DynamicColors.tPalette.m3surface
-
-	WlrLayershell.exclusionMode: ExclusionMode.Ignore
-	WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.settings ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
-	WlrLayershell.layer: (fsTransitionProg > 0 && Config.general.showOverFullscreen) || (hasSpecialWorkspace && hasFullscreenOnNormalWs) ? WlrLayer.Overlay : WlrLayer.Top
-	color: "transparent"
-	contentItem.focus: true
-	mask: visibilities.isDrawing ? null : (hasFullscreen ? emptyRegion : region)
-	name: "Bar"
-
-	Behavior on fsTransitionProg {
-		Anim {
-		}
-	}
-	Behavior on surfaceColor {
-		CAnim {
-		}
-	}
-
-	contentItem.Keys.onEscapePressed: {
-		if (Config.barConfig.autoHide)
-			visibilities.bar = false;
-		visibilities.launcher = false;
-		visibilities.sidebar = false;
-		visibilities.dashboard = false;
-		visibilities.osd = false;
-		visibilities.settings = false;
-		visibilities.resources = false;
-		visibilities.dock = false;
-		visibilities.clipboard = false;
-		panels.popouts.hasCurrent = false;
-	}
-	onHasFullscreenChanged: {
-		visibilities.launcher = false;
-		visibilities.sidebar = false;
-		visibilities.dashboard = false;
-		visibilities.osd = false;
-		visibilities.settings = false;
-		visibilities.resources = false;
-		visibilities.clipboard = false;
-		visibilities.dock = false;
-		panels.popouts.hasCurrent = false;
-	}
-
-	Region {
-		id: menuPopoutRegion
-
-		intersection: Intersection.Subtract
-	}
-
-	Region {
-		id: emptyRegion
-
-		height: panels.notifications.height
-		width: panels.notifications.width
-		x: panels.notifications.x + root.borderThickness
-		y: panels.notifications.y + bar.implicitHeight
-	}
-
-	Region {
-		id: region
-
-		height: root.height - bar.implicitHeight - root.borderThickness - root.dragMaskPadding * 2
-		intersection: Intersection.Xor
-		regions: [...popoutRegions.instances, menuPopoutRegion]
-		width: root.width - root.borderThickness * 2 - root.dragMaskPadding * 2
-		x: root.borderThickness + root.dragMaskPadding
-		y: bar.implicitHeight + root.dragMaskPadding
-	}
-
-	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 + root.borderThickness
-			y: modelData.y + bar.implicitHeight
-		}
-	}
-
-	HyprlandFocusGrab {
-		id: focusGrab
-
-		active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.clipboard || (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.clipboard = false;
-			visibilities.dock = false;
-			panels.popouts.hasCurrent = false;
-		}
-	}
-
-	PersistentProperties {
-		id: visibilities
-
-		property bool bar
-		property bool clipboard
-		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;
 		}
 
-		target: "visibilities"
+		CustomWindow {
-	}
+			id: win
 
-	Binding {
+			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
-		property: "bar"
+			property var root: Quickshell.shellDir
-		target: visibilities
-		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.barConfig.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
-		when: Config.barConfig.autoHide
-	}
 
-	Item {
+			WlrLayershell.exclusionMode: ExclusionMode.Ignore
-		id: surface
+			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"
+			screen: scope.modelData
 
-		anchors.fill: parent
+			contentItem.Keys.onEscapePressed: {
-		layer.enabled: true
+				if (Config.barConfig.autoHide)
-		opacity: root.surfaceColor.a
+					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;
+			}
 
-		layer.effect: MultiEffect {
+			Region {
-			blurMax: 32
+				id: region
-			shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, Math.max(0, root.shadowOpacity))
-			shadowEnabled: true
-		}
 
-		BlobGroup {
+				height: win.height - bar.implicitHeight - Config.barConfig.border
-			id: blobGroup
+				intersection: Intersection.Xor
+				regions: popoutRegions.instances
+				width: win.width - Config.barConfig.border * 2
+				x: Config.barConfig.border
+				y: bar.implicitHeight
+			}
 
-			color: root.surfaceColor
+			anchors {
-			smoothing: Config.barConfig.smoothing
+				bottom: true
-		}
+				left: true
+				right: true
+				top: true
+			}
 
-		BlobInvertedRect {
+			Variants {
-			anchors.fill: parent
+				id: popoutRegions
-			anchors.margins: -50
-			borderBottom: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderRight: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderTop: bar.implicitHeight - anchors.margins - root.sdfBorderOffset
-			group: blobGroup
-			radius: root.borderRounding
-		}
 
-		PanelBg {
+				model: panels.children
-			id: dashBg
 
-			property real extraHeight: 0.2
+				Region {
+					required property Item modelData
 
-			deformAmount: 0.06
+					height: modelData.height
-			implicitHeight: panels.dashboard.height * (1 + extraHeight)
+					intersection: Intersection.Subtract
-			implicitWidth: panels.dashboard.width
+					width: modelData.width
-			panel: panels.dashboardWrapper
+					x: modelData.x + Config.barConfig.border
-			radius: Appearance.rounding.normal
+					y: modelData.y + bar.implicitHeight
-			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
-			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 + root.borderThickness
-			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
-		}
-
-		PanelBg {
-			id: notifsBg
-
-			panel: panels.notifications
-			radius: Appearance.rounding.normal
-		}
-
-		PanelBg {
-			id: utilsBg
-
-			deformAmount: 0.1
-			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
-			panel: panels.utilities
-			topLeftRadius: 0
-		}
-
-		PanelBg {
-			id: popoutBg
-
-			property real extraHeight: 0.2
-
-			deformAmount: panels.popouts.currentName.startsWith("traymenu") ? 0.15 : 0.08
-			implicitHeight: panels.popouts.height * (1 + extraHeight)
-			implicitWidth: panels.popouts.width
-			panel: panels.popoutsWrapper
-			radius: panels.popouts.current?.panelRadius ?? Appearance.rounding.normal
-			x: panels.popoutsWrapper.x + panels.popouts.x + root.borderThickness
-			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
-
-			Behavior on extraHeight {
-				Anim {
 				}
 			}
-		}
 
-		PanelBg {
+			HyprlandFocusGrab {
-			id: resourcesBg
+				id: focusGrab
 
-			deformAmount: 0.05
+				active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
-			implicitHeight: panels.resources.height
+				windows: [win]
-			implicitWidth: panels.resources.width
-			panel: panels.resourcesWrapper
-			radius: Appearance.rounding.large
-			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
-		}
 
-		PanelBg {
+				onCleared: {
-			id: settingsBg
+					visibilities.launcher = false;
-
+					visibilities.sidebar = false;
-			property real extraHeight: 0.2
+					visibilities.dashboard = false;
-
+					visibilities.osd = false;
-			deformAmount: 0.03
+					visibilities.settings = false;
-			implicitHeight: panels.settings.height * (1 + extraHeight)
+					visibilities.resources = false;
-			implicitWidth: panels.settings.width
+					visibilities.dock = false;
-			panel: panels.settings
+					panels.popouts.hasCurrent = false;
-			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 + root.borderThickness
-			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
-		}
-
-		PanelBg {
-			id: clipboardBg
-
-			deformAmount: 0.03
-			panel: panels.clipboard
-			radius: 29
-		}
-	}
-
-	Drawing {
-		id: drawing
-
-		anchors.fill: parent
-		layer.enabled: true
-		visibilities: visibilities
-		z: 2
-
-		layer.effect: MultiEffect {
-			maskEnabled: true
-			maskInverted: true
-			maskSource: maskSource
-		}
-	}
-
-	Item {
-		id: maskSource
-
-		anchors.fill: parent
-		layer.enabled: true
-		visible: false
-
-		CustomRect {
-			readonly property int extraWidth: radius
-
-			color: "white"
-			implicitHeight: panels.drawing.height
-			implicitWidth: panels.drawing.width + extraWidth
-			radius: drawingBg.radius
-			x: -extraWidth + root.borderThickness + panels.drawing.x
-			y: panels.drawing.y + bar.implicitHeight
-		}
-	}
-
-	Interactions {
-		id: interactions
-
-		anchors.fill: parent
-		bar: bar
-		borderThickness: root.borderLayoutThickness
-		drawing: drawing
-		enabled: true
-		panels: panels
-		popouts: panels.popouts
-		screen: root.screen
-		visibilities: visibilities
-
-		Panels {
-			id: panels
-
-			bar: bar
-			borderThickness: root.borderThickness
-			drawingItem: drawing
-			screen: root.screen
-			visibilities: visibilities
-
-			clipboard.transform: Matrix4x4 {
-				matrix: clipboardBg.deformMatrix
 			}
-			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 {
+			PersistentProperties {
-			id: bar
+				id: visibilities
 
-			anchors.left: parent.left
+				property bool bar
-			anchors.right: parent.right
+				property bool dashboard
-			enabled: !visibilities.isDrawing
+				property bool dock
-			fullscreen: root.hasFullscreen
+				property bool isDrawing
-			popouts: panels.popouts
+				property bool launcher
-			popoutsWrapper: panels.popoutsWrapper
+				property bool notif: NotifServer.popups.length > 0
-			screen: root.screen
+				property bool osd
-			visibilities: visibilities
+				property bool resources
+				property bool settings
+				property bool sidebar
+
+				Component.onCompleted: Visibilities.load(scope.modelData, this)
+			}
+
+			IpcHandler {
+				function toggleLauncher(fix: string): void {
+					visibilities.launcher = !visibilities.launcher;
+				}
+
+				target: "visibilities"
+			}
+
+			Binding {
+				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
+			}
+
+			Item {
+				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
+					smoothing: Config.barConfig.smoothing
+
+					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
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.dashboard.height * (1 + extraHeight)
+					implicitWidth: panels.dashboard.width
+					panel: panels.dashboardWrapper
+					radius: Appearance.rounding.normal
+					x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
+					y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+				}
+
+				PanelBg {
+					id: launcherBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.launcher.height * (1 + extraHeight)
+					panel: panels.launcher
+					radius: Appearance.rounding.smallest + 5
+					y: panels.launcher.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: sidebarBg
+
+					bottomLeftRadius: 0
+					deformAmount: 0.04
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
+					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
+					panel: panels.sidebar
+				}
+
+				PanelBg {
+					id: osdBg
+
+					deformAmount: 0.1
+					implicitHeight: panels.osd.height
+					implicitWidth: panels.osd.width
+					panel: panels.osdWrapper
+					radius: 20
+					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
+					y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: notifsBg
+
+					panel: panels.notifications
+				}
+
+				PanelBg {
+					id: utilsBg
+
+					deformAmount: panels.sidebar.visible ? (0.1) : (0.1)
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
+					panel: panels.utilities
+					topLeftRadius: 0
+				}
+
+				PanelBg {
+					id: popoutBg
+
+					property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
+
+					deformAmount: panels.popouts.isDetached ? 0.05 : panels.popouts.hasCurrent ? 0.15 : 0.1
+					implicitHeight: panels.popouts.height * (1 + extraHeight)
+					implicitWidth: panels.popouts.width
+					panel: panels.popoutsWrapper
+					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : 20 * Appearance.rounding.scale
+					x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
+					y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+
+					Behavior on extraHeight {
+						Anim {
+						}
+					}
+				}
+
+				PanelBg {
+					id: resourcesBg
+
+					deformAmount: 0.05
+					implicitHeight: panels.resources.height
+					implicitWidth: panels.resources.width
+					panel: panels.resourcesWrapper
+					radius: Appearance.rounding.normal
+					x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
+					y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: settingsBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.03
+					implicitHeight: panels.settings.height * (1 + extraHeight)
+					implicitWidth: panels.settings.width
+					panel: panels.settings
+					radius: Appearance.rounding.large
+					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
+					topRightRadius: Appearance.rounding.large + Appearance.padding.smaller
+					x: panels.settingsWrapper.x + panels.settings.x + Config.barConfig.border
+					y: panels.settingsWrapper.y + panels.settings.y + bar.implicitHeight - panels.settings.height * extraHeight
+				}
+
+				PanelBg {
+					id: dockBg
+
+					deformAmount: 0.08
+					panel: panels.dock
+					radius: Appearance.rounding.normal
+				}
+
+				PanelBg {
+					id: drawingBg
+
+					deformAmount: 0.08
+					panel: panels.drawing
+					radius: Appearance.rounding.normal
+				}
+			}
+
+			Drawing {
+				id: drawing
+
+				anchors.fill: parent
+				z: 2
+			}
+
+			DrawingInput {
+				id: input
+
+				bar: bar
+				drawing: drawing
+				panels: panels
+				popout: panels.drawing
+				visibilities: visibilities
+				z: 2
+			}
+
+			Interactions {
+				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
+				}
+			}
 		}
 	}
 
@@ -475,7 +398,7 @@ CustomWindow {
 		implicitHeight: panel.height
 		implicitWidth: panel.width
 		radius: Appearance.rounding.smallest
-		x: panel.x + root.borderThickness
+		x: panel.x + Config.barConfig.border
 		y: panel.y + bar.implicitHeight
 	}
 }

Extensions/FetchPlugins.qml

@@ -0,0 +1,18 @@
+pragma Singleton
+
+import Quickshell
+import ZShell.Models
+
+Singleton {
+	id: root
+
+	property alias plugins: plugins.entries
+
+	FileSystemModel {
+		id: plugins
+
+		nameFilters: ["*.qml"]
+		path: Quickshell.env("HOME") + "/.config/zshell"
+		recursive: false
+	}
+}

Extensions/LoadExtensions.qml

@@ -0,0 +1,17 @@
+import Quickshell
+import QtQuick
+import ZShell.Models
+import qs.Config
+
+Repeater {
+	model: FetchPlugins.plugins
+
+	LazyLoader {
+		required property FileSystemEntry modelData
+
+		activeAsync: Config.plugins.entries.some(p => {
+			return p.id === modelData.baseName && p.enabled;
+		})
+		source: modelData.path
+	}
+}

Greeter/Center.qml

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

Greeter/Components/Anim.qml

@@ -2,62 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	enum Type {
+	duration: MaterialEasing.standardTime
-		StandardSmall = 0,
+	easing.bezierCurve: MaterialEasing.standard
-		Standard,
+	easing.type: Easing.BezierSpline
-		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 {
-		radius: control.radius
+		function onClicked(): void {
-
-		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,174 +1,45 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Templates
-import ZShell.Components
-import ZShell
-import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property bool animateWave
+	background: Item {
-	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 {
-			id: remaining
+			anchors.bottom: parent.bottom
-
-			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			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.right: parent.right
-			anchors.rightMargin: 4 * remaining.opacity
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: 4 * remaining.opacity
-			implicitWidth: implicitHeight
-			opacity: remaining.opacity
-			radius: Appearance.rounding.full
-		}
-
-		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
+			anchors.top: parent.top
-			asynchronous: true
+			bottomRightRadius: root.implicitHeight / 6
-			sourceComponent: root.wavy ? waveComp : lineComp
+			color: DynamicColors.palette.m3primary
+			implicitWidth: root.handle.x - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topRightRadius: root.implicitHeight / 6
 		}
 
-		Component {
+		CustomRect {
-			id: lineComp
+			anchors.bottom: parent.bottom
-
+			anchors.right: parent.right
-			CustomRect {
+			anchors.top: parent.top
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
+			bottomLeftRadius: root.implicitHeight / 6
-				color: root.fgColor
+			color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: root.height
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
-				implicitWidth: root.filledWidth
+			radius: Appearance.rounding.full
-				radius: Appearance.rounding.small
+			topLeftRadius: root.implicitHeight / 6
-				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
-				}
-			}
 		}
 	}
-	Behavior on filledWidth {
+	handle: CustomRect {
-		id: widthBehavior
-
-		Anim {
-		}
-	}
-
-	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
+		color: DynamicColors.palette.m3primary
-		preventStealing: true
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		onPositionChanged: e => {
+		MouseArea {
-			dragMovement = (e.x - pressStartX) / width;
+			acceptedButtons: Qt.NoButton
-			root.interaction(posBinding.value);
+			anchors.fill: parent
-		}
+			cursorShape: Qt.PointingHandCursor
-		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,7 +28,6 @@ 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
@@ -37,7 +36,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -86,7 +85,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -94,9 +93,7 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			color: DynamicColors.palette.m3onPrimary
+			function onClicked(): void {
-
-			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;
@@ -105,6 +102,9 @@ 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: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,9 +127,7 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			color: DynamicColors.palette.m3onPrimary
+			function onClicked(): void {
-
-			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;
@@ -138,6 +136,9 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -146,7 +147,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

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

Greeter/Components/CustomSplitButtonRow.qml

@@ -8,32 +8,19 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property alias buttonAlias: splitButton
+	property bool enabled: true
 	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)
 
-	anchors.left: parent.left
+	Layout.fillWidth: true
-	anchors.right: parent.right
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	clip: false
-	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	z: root.expanded ? expandedZ : -1
-	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
@@ -49,6 +36,7 @@ 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 {
@@ -56,13 +44,14 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: 2
+			z: root.expanded ? root.expandedZ : -1
 
 			menu.onItemSelected: item => {
 				root.selected(item);
+				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
+				splitButton.toggleDropdown();
 			}
 		}
 	}

Greeter/Components/CustomSwitch.qml

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

Greeter/Components/CustomText.qml

@@ -15,7 +15,6 @@ 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,7 +13,6 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
-			type: Anim.SlowEffects
 		}
 	}
 }

Greeter/Components/HoverIconButton.qml

@@ -1,33 +0,0 @@
-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,11 +41,12 @@ 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)) * Appearance.rounding.scale
+	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
+
 		}
 	}
 
@@ -54,14 +55,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		function onClicked(): void {
-		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,7 +102,6 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
-				font.pointSize: elideText.font.pointSize
 				text: elideText.text
 			}
 
@@ -112,7 +111,6 @@ 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,169 +2,109 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import qs.Config
-import qs.Drawers
 
-MouseArea {
+Elevation {
 	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)
 
-	anchors.fill: parent
+	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
-	enabled: expanded
+	implicitWidth: Math.max(200, column.implicitWidth)
-	layer.enabled: opacity < 1
+	level: 2
-	opacity: expanded ? 1 : 0
+	opacity: root.expanded ? 1 : 0
-	parent: {
+	radius: Appearance.rounding.normal
-		const win = QsWindow.window;
-		const contentWin = win as Windows;
-		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-	}
 
+	Behavior on implicitHeight {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
 	Behavior on opacity {
 		Anim {
-			type: Anim.DefaultEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
 		}
 	}
 
-	onClicked: expanded = false
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
 
-	TransformWatcher {
+		ColumnLayout {
-		id: watcher
+			id: column
 
-		a: root.parent
+			anchors.left: parent.left
-		b: root.attachTo
+			anchors.right: parent.right
-	}
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
 
-	Elevation {
+			Repeater {
-		id: menu
+				model: root.items
 
-		implicitHeight: column.implicitHeight + column.anchors.margins * 2
+				CustomRect {
-		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
+					id: item
-		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;
-		}
 
-		transform: Scale {
+					readonly property bool active: modelData === root.active
-			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
+					required property int index
-			yScale: root.expanded ? 1 : 0.1
+					required property MenuItem modelData
 
-			Behavior on yScale {
+					Layout.fillWidth: true
-				Anim {
+					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
-				}
+					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 {
-						id: item
+						anchors.fill: parent
-
+						anchors.leftMargin: Appearance.padding.small
-						readonly property bool active: modelData === root.active
+						anchors.rightMargin: Appearance.padding.small
-						required property int index
+						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
-						required property MenuItem modelData
+						radius: Appearance.rounding.normal - Appearance.padding.small
-
-						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 {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							function onClicked(): void {
-							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
 						}
 
-						RowLayout {
+						CustomText {
-							id: menuOptionRow
+							Layout.alignment: Qt.AlignVCenter
+							Layout.fillWidth: true
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							text: item.modelData.text
+						}
 
-							anchors.fill: parent
+						Loader {
-							anchors.margins: Appearance.padding.larger
+							Layout.alignment: Qt.AlignVCenter
-							spacing: Appearance.spacing.small
+							active: item.modelData.trailingIcon.length > 0
+							visible: active
 
-							MaterialIcon {
+							sourceComponent: MaterialIcon {
-								Layout.alignment: Qt.AlignVCenter
+								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								text: item.modelData.trailingIcon
-								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,7 +29,6 @@ Elevation {
 	level: root.expanded ? 2 : 0
 	radius: itemHeight / 2
 	visible: implicitHeight > 0
-	z: root.expanded ? 100 : 0
 
 	Behavior on implicitHeight {
 		Anim {
@@ -69,7 +68,6 @@ 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,53 +1,15 @@
-import QtQuick
-import QtQuick.Shapes
-import ZShell
-import ZShell.Components
-import qs.Helpers
 import qs.Config
+import QtQuick
 
 MouseArea {
 	id: root
 
-	property alias bottomLeftRadius: base.bottomLeftRadius
+	property color color: DynamicColors.palette.m3onSurface
-	property alias bottomRightRadius: base.bottomRightRadius
-	property real circleRadius
-	property alias color: base.color
 	property bool disabled
-	readonly property real endRadius: {
+	property real radius: parent?.radius ?? 0
-		const d1 = distSq(0, 0);
+	property alias rect: hoverLayer
-		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 clamp(r: real): real {
+	function onClicked(): void {
-		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
@@ -55,146 +17,79 @@ MouseArea {
 	enabled: !disabled
 	hoverEnabled: true
 
-	Behavior on stateOpacity {
+	onClicked: event => !disabled && onClicked(event)
+	onPressed: event => {
+		if (disabled)
+			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 {
+		id: rippleAnim
+
+		property real radius
+		property real x
+		property real y
+
+		PropertyAction {
+			property: "x"
+			target: ripple
+			value: rippleAnim.x
+		}
+
+		PropertyAction {
+			property: "y"
+			target: ripple
+			value: rippleAnim.y
+		}
+
+		PropertyAction {
+			property: "opacity"
+			target: ripple
+			value: 0.08
+		}
+
 		Anim {
-			type: Anim.DefaultEffects
+			easing.bezierCurve: MaterialEasing.standardDecel
+			from: 0
+			properties: "implicitWidth,implicitHeight"
+			target: ripple
+			to: rippleAnim.radius * 2
+		}
+
+		Anim {
+			property: "opacity"
+			target: ripple
+			to: 0
 		}
 	}
 
-	onCircleRadiusChanged: {
+	CustomClippingRect {
-		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+		id: hoverLayer
-			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
-
-		alwaysRunToEnd: true
-		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Appearance.anim.curves.standard
-		property: "circleRadius"
-		target: root
-		to: root.endRadius
-	}
-
-	Anim {
-		id: fadeAnim
-
-		property: "opacity"
-		target: circle
-		to: 0
-		type: Anim.SlowEffects
-	}
-
-	CustomRect {
-		id: base
 
 		anchors.fill: parent
-		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
+		border.pixelAligned: false
-		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
+		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
-		color: DynamicColors.palette.m3onSurface
+		radius: root.radius
-		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
-	}
 
-	Shape {
+		CustomRect {
-		id: circle
+			id: ripple
 
-		anchors.fill: parent
+			border.pixelAligned: false
-		opacity: 0
+			color: root.color
-		preferredRendererType: Shape.CurveRenderer
+			opacity: 0
+			radius: Appearance.rounding.full
 
-		ShapePath {
+			transform: Translate {
-			fillColor: base.color
+				x: -ripple.width / 2
-			startX: root.clamp(base.topLeftRadius)
+				y: -ripple.height / 2
-			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,9 +4,10 @@ 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,8 +3,6 @@ import Quickshell.Io
 JsonObject {
 	property Anim anim: Anim {
 	}
-	property Deform deform: Deform {
-	}
 	property FontStuff font: FontStuff {
 	}
 	property Padding padding: Padding {
@@ -28,13 +26,9 @@ 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]
@@ -42,18 +36,13 @@ 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"
@@ -63,8 +52,7 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 16 * scale
+		property int larger: 15 * scale
-		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -77,33 +65,28 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int extraLargeIncreased: 32 * scale
+		property int large: 15 * scale
-		property int extraSmall: 4 * scale
-		property int large: 16 * scale
 		property int larger: 12 * scale
-		property int normal: 8 * scale
+		property int normal: 10 * 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 large: 25 * scale
-		property int medium: 16 * scale
+		property int normal: 17 * 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 larger: 15 * scale
 		property int normal: 12 * scale
 		property real scale: 1
-		property int small: 8 * scale
+		property int small: 7 * scale
 		property int smaller: 10 * scale
 	}
 	component Transparency: JsonObject {

Greeter/Config/BackgroundConfig.qml

@@ -4,11 +4,4 @@ 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,6 +8,10 @@ JsonObject {
 			id: "workspaces",
 			enabled: true
 		},
+		{
+			id: "audio",
+			enabled: true
+		},
 		{
 			id: "media",
 			enabled: true
@@ -20,6 +24,10 @@ JsonObject {
 			id: "updates",
 			enabled: true
 		},
+		{
+			id: "dash",
+			enabled: true
+		},
 		{
 			id: "spacer",
 			enabled: true
@@ -33,12 +41,12 @@ JsonObject {
 			enabled: true
 		},
 		{
-			id: "hyprsunset",
+			id: "tray",
 			enabled: true
 		},
 		{
-			id: "tray",
+			id: "upower",
-			enabled: true
+			enabled: false
 		},
 		{
 			id: "network",
@@ -54,13 +62,9 @@ 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
@@ -71,7 +75,4 @@ JsonObject {
 		property bool tray: true
 		property bool upower: true
 	}
-	component Tray: JsonObject {
-		property int trayIconSize: 24
-	}
 }

Greeter/Config/Colors.qml

@@ -1,13 +1,5 @@
 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,6 +4,8 @@ import Quickshell
 import Quickshell.Io
 import ZShell
 import QtQuick
+import qs.Helpers
+import qs.Paths
 
 Singleton {
 	id: root
@@ -21,7 +23,6 @@ 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
@@ -47,9 +48,6 @@ Singleton {
 			padding: {
 				scale: appearance.padding.scale
 			},
-			deform: {
-				scale: appearance.deform.scale
-			},
 			font: {
 				family: {
 					sans: appearance.font.family.sans,
@@ -79,28 +77,16 @@ 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,
@@ -116,12 +102,7 @@ Singleton {
 
 	function serializeColors(): var {
 		return {
-			schemeType: colors.schemeType,
+			schemeType: colors.schemeType
-			presets: {
-				name: colors.presets.name,
-				variant: colors.presets.variant,
-				accent: colors.presets.accent
-			}
 		};
 	}
 
@@ -140,8 +121,7 @@ Singleton {
 			background: serializeBackground(),
 			launcher: serializeLauncher(),
 			colors: serializeColors(),
-			dock: serializeDock(),
+			dock: serializeDock()
-			screenshot: serializeScreenshot()
 		};
 	}
 
@@ -192,16 +172,11 @@ 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,
@@ -215,10 +190,6 @@ Singleton {
 			},
 			idle: {
 				timeouts: general.idle.timeouts
-			},
-			battery: {
-				popupThresholds: general.battery.popupThresholds,
-				critPerc: general.battery.critPerc
 			}
 		};
 	}
@@ -227,7 +198,6 @@ Singleton {
 		return {
 			maxAppsShown: launcher.maxAppsShown,
 			maxWallpapers: launcher.maxWallpapers,
-			uwsm: launcher.uwsm,
 			actionPrefix: launcher.actionPrefix,
 			specialPrefix: launcher.specialPrefix,
 			useFuzzy: {
@@ -251,8 +221,6 @@ Singleton {
 		return {
 			recolorLogo: lock.recolorLogo,
 			enableFprint: lock.enableFprint,
-			showNotifContent: lock.showNotifContent,
-			showNotifIcon: lock.showNotifIcon,
 			maxFprintTries: lock.maxFprintTries,
 			blurAmount: lock.blurAmount,
 			sizes: {
@@ -294,24 +262,9 @@ 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,
@@ -364,6 +317,7 @@ Singleton {
 
 	ElapsedTimer {
 		id: timer
+
 	}
 
 	Timer {
@@ -461,8 +415,6 @@ Singleton {
 			}
 			property Overview overview: Overview {
 			}
-			property Screenshot screenshot: Screenshot {
-			}
 			property Services services: Services {
 			}
 			property SidebarConfig sidebar: SidebarConfig {

Greeter/Config/DynamicColors.qml

@@ -29,10 +29,9 @@ Singleton {
 	readonly property alias wallLuminance: analyser.luminance
 
 	function alterColor(c: color, a: real, layer: int): color {
-		const initLuminance = getLuminance(c);
+		const luminance = getLuminance(c);
-		const luminance = Math.max(initLuminance, 0.001);
 
-		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 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 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));
@@ -85,10 +84,6 @@ 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
@@ -100,9 +95,69 @@ Singleton {
 	ImageAnalyser {
 		id: analyser
 
-		source: WallpaperPath.lockscreenBg
+		source: WallpaperPath.currentWallpaperPath
 	}
 
+	component M3MaccchiatoPalette: QtObject {
+		property color m3background: "#131317"
+		property color m3error: "#ffb4ab"
+		property color m3errorContainer: "#93000a"
+		property color m3inverseOnSurface: "#303034"
+		property color m3inversePrimary: "#525b92"
+		property color m3inverseSurface: "#e4e1e7"
+		property color m3neutral_paletteKeyColor: "#77767b"
+		property color m3neutral_variant_paletteKeyColor: "#767680"
+		property color m3onBackground: "#e4e1e7"
+		property color m3onError: "#690005"
+		property color m3onErrorContainer: "#ffdad6"
+		property color m3onPrimary: "#232c60"
+		property color m3onPrimaryContainer: "#ffffff"
+		property color m3onPrimaryFixed: "#0b154b"
+		property color m3onPrimaryFixedVariant: "#3a4378"
+		property color m3onSecondary: "#2c2f44"
+		property color m3onSecondaryContainer: "#b1b3ce"
+		property color m3onSecondaryFixed: "#171a2e"
+		property color m3onSecondaryFixedVariant: "#42455c"
+		property color m3onSuccess: "#213528"
+		property color m3onSuccessContainer: "#D1E9D6"
+		property color m3onSurface: "#e4e1e7"
+		property color m3onSurfaceVariant: "#c6c5d1"
+		property color m3onTertiary: "#4c1f48"
+		property color m3onTertiaryContainer: "#000000"
+		property color m3onTertiaryFixed: "#340831"
+		property color m3onTertiaryFixedVariant: "#66365f"
+		property color m3outline: "#90909a"
+		property color m3outlineVariant: "#46464f"
+		property color m3primary: "#bac3ff"
+		property color m3primaryContainer: "#6a73ac"
+		property color m3primaryFixed: "#dee0ff"
+		property color m3primaryFixedDim: "#bac3ff"
+		property color m3primary_paletteKeyColor: "#6a73ac"
+		property color m3scrim: "#000000"
+		property color m3secondary: "#c3c5e0"
+		property color m3secondaryContainer: "#42455c"
+		property color m3secondaryFixed: "#dfe1fd"
+		property color m3secondaryFixedDim: "#c3c5e0"
+		property color m3secondary_paletteKeyColor: "#72758e"
+		property color m3shadow: "#000000"
+		property color m3success: "#B5CCBA"
+		property color m3successContainer: "#374B3E"
+		property color m3surface: "#131317"
+		property color m3surfaceBright: "#39393d"
+		property color m3surfaceContainer: "#1f1f23"
+		property color m3surfaceContainerHigh: "#2a2a2e"
+		property color m3surfaceContainerHighest: "#353438"
+		property color m3surfaceContainerLow: "#1b1b1f"
+		property color m3surfaceContainerLowest: "#0e0e12"
+		property color m3surfaceDim: "#131317"
+		property color m3surfaceTint: "#bac3ff"
+		property color m3surfaceVariant: "#46464f"
+		property color m3tertiary: "#f1b3e5"
+		property color m3tertiaryContainer: "#b77ead"
+		property color m3tertiaryFixed: "#ffd7f4"
+		property color m3tertiaryFixedDim: "#f1b3e5"
+		property color m3tertiary_paletteKeyColor: "#9b6592"
+	}
 	component M3Palette: QtObject {
 		property color m3background: "#191114"
 		property color m3error: "#ffb4ab"
@@ -224,11 +279,8 @@ Singleton {
 		readonly property color m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
 	}
 	component Transparency: QtObject {
-		readonly property real base: Math.max(0, Math.min(1, Appearance.transparency.base - (root.light ? 0.1 : 0)))
+		readonly property real base: 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,15 +4,13 @@ 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 {
@@ -21,27 +19,11 @@ 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,7 +91,6 @@ JsonObject {
 	property string specialPrefix: "@"
 	property UseFuzzy useFuzzy: UseFuzzy {
 	}
-	property bool uwsm: true
 
 	component Sizes: JsonObject {
 		property int itemHeight: 50

Greeter/Config/LockConf.qml

@@ -5,8 +5,6 @@ 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

@@ -1,13 +0,0 @@
-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,7 +14,6 @@ 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/SessionDock.qml

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

Greeter/UserDock.qml

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

Helpers/AppSearch.qml

@@ -1,13 +1,19 @@
 pragma Singleton
 
 import Quickshell
-import qs.Helpers
+import Quickshell.Io
+import "../scripts/levendist.js" as Levendist
 import "../scripts/fuzzysort.js" as Fuzzy
+import qs.Config
 
 Singleton {
 	id: root
 
-	readonly property list<DesktopEntry> list: Array.from(DesktopEntries.applications.values)
+	readonly property list<DesktopEntry> list: Array.from(DesktopEntries.applications.values).filter((app, index, self) => index === self.findIndex(t => (t.id === app.id)))
+	readonly property var preppedIcons: list.map(a => ({
+				name: Fuzzy.prepare(`${a.icon} `),
+				entry: a
+			}))
 	readonly property var preppedNames: list.map(a => ({
 				name: Fuzzy.prepare(`${a.name} `),
 				entry: a
@@ -30,7 +36,8 @@ Singleton {
 			"replace": "system-lock-screen"
 		}
 	]
-	property real scoreThreshold: 0.2
+	readonly property real scoreGapThreshold: 0.1
+	readonly property real scoreThreshold: 0.6
 	property var substitutions: ({
 			"code-url-handler": "visual-studio-code",
 			"Code": "visual-studio-code",
@@ -38,27 +45,64 @@ Singleton {
 			"pavucontrol-qt": "pavucontrol",
 			"wps": "wps-office2019-kprometheus",
 			"wpsoffice": "wps-office2019-kprometheus",
-			"footclient": "foot",
+			"footclient": "foot"
-			"zen": "zen-browser"
 		})
 
-	signal reload
+	function bestFuzzyEntry(search: string, preppedList: list<var>, key: string): var {
-
+		const results = Fuzzy.go(search, preppedList, {
-	function fuzzyQuery(search: string): var {
+			key: key,
-		return Fuzzy.go(search, preppedNames, {
+			threshold: root.scoreThreshold,
-			all: true,
+			limit: 2
-			key: "name"
-		}).map(r => {
-			return r.obj.entry;
 		});
+
+		if (!results || results.length === 0)
+			return null;
+
+		const best = results[0];
+		const second = results.length > 1 ? results[1] : null;
+
+		if (second && (best.score - second.score) < root.scoreGapThreshold)
+			return null;
+
+		return best.obj.entry;
+	}
+
+	function fuzzyQuery(search: string, preppedList: list<var>): var {
+		const entry = bestFuzzyEntry(search, preppedList, "name");
+		return entry ? [entry] : [];
+	}
+
+	function getKebabNormalizedAppName(str: string): string {
+		return str.toLowerCase().replace(/\s+/g, "-");
+	}
+
+	function getReverseDomainNameAppName(str: string): string {
+		return str.split('.').slice(-1)[0];
+	}
+
+	function getUndescoreToKebabAppName(str: string): string {
+		return str.toLowerCase().replace(/_/g, "-");
 	}
 
 	function guessIcon(str) {
 		if (!str || str.length == 0)
 			return "image-missing";
 
+		if (iconExists(str))
+			return str;
+
+		const entry = DesktopEntries.byId(str);
+		if (entry)
+			return entry.icon;
+
+		const heuristicEntry = DesktopEntries.heuristicLookup(str);
+		if (heuristicEntry)
+			return heuristicEntry.icon;
+
 		if (substitutions[str])
 			return substitutions[str];
+		if (substitutions[str.toLowerCase()])
+			return substitutions[str.toLowerCase()];
 
 		for (let i = 0; i < regexSubstitutions.length; i++) {
 			const substitution = regexSubstitutions[i];
@@ -67,25 +111,35 @@ Singleton {
 				return replacedName;
 		}
 
-		if (iconExists(str))
+		const lowercased = str.toLowerCase();
-			return str;
+		if (iconExists(lowercased))
+			return lowercased;
 
-		let guessStr = str;
+		const reverseDomainNameAppName = getReverseDomainNameAppName(str);
-		guessStr = str.split('.').slice(-1)[0].toLowerCase();
+		if (iconExists(reverseDomainNameAppName))
-		if (iconExists(guessStr))
+			return reverseDomainNameAppName;
-			return guessStr;
-		guessStr = str.toLowerCase().replace(/\s+/g, "-");
-		if (iconExists(guessStr))
-			return guessStr;
-		const searchResults = root.fuzzyQuery(str);
-		if (searchResults.length > 0) {
-			const firstEntry = searchResults[0];
-			guessStr = firstEntry.icon;
-			if (iconExists(guessStr))
-				return guessStr;
-		}
 
-		return str;
+		const lowercasedDomainNameAppName = reverseDomainNameAppName.toLowerCase();
+		if (iconExists(lowercasedDomainNameAppName))
+			return lowercasedDomainNameAppName;
+
+		const kebabNormalizedGuess = getKebabNormalizedAppName(str);
+		if (iconExists(kebabNormalizedGuess))
+			return kebabNormalizedGuess;
+
+		const undescoreToKebabGuess = getUndescoreToKebabAppName(str);
+		if (iconExists(undescoreToKebabGuess))
+			return undescoreToKebabGuess;
+
+		const iconSearchResult = fuzzyQuery(str, preppedIcons);
+		if (iconSearchResult && iconExists(iconSearchResult.icon))
+			return iconSearchResult.icon;
+
+		const nameSearchResult = root.fuzzyQuery(str, preppedNames);
+		if (nameSearchResult && iconExists(nameSearchResult.icon))
+			return nameSearchResult.icon;
+
+		return "application-x-executable";
 	}
 
 	function iconExists(iconName) {

Helpers/Battery.qml

@@ -1,34 +0,0 @@
-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
-	readonly property real timeToEmpty: UPower.displayDevice.timeToEmpty
-	readonly property real timeToFull: UPower.displayDevice.timeToFull
-}

Helpers/Brightness.qml

@@ -232,7 +232,7 @@ Singleton {
 		}
 
 		function setBrightness(value: real): void {
-			value = Math.max(Config.services.minBrightness, Math.min(1, value));
+			value = Math.max(0, Math.min(1, value));
 			const rounded = Math.round(value * 100);
 			if (Math.round(brightness * 100) === rounded)
 				return;

Helpers/ClipHistory.qml

@@ -1,249 +0,0 @@
-pragma Singleton
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import Quickshell.Io
-import qs.Config
-import "../scripts/fuzzysort.js" as Fuzzy
-
-Singleton {
-	id: root
-
-	property string cliphistBinary: "cliphist"
-	property string currentEntry: ""
-	property list<string> entries: []
-	property real pasteDelay: 0.05
-	readonly property var preparedEntries: entries.map(a => ({
-				name: Fuzzy.prepare(displayText(a)),
-				entry: a
-			}))
-	property string previewImageFile: "/tmp/qs-cliphist-preview.img"
-	property string previewImageSource: ""
-	property bool previewIsImage: false
-	property list<var> previewText: []
-	property int previewToken: 0
-	property real scoreThreshold: 0.2
-
-	function copy(entry): void {
-		Quickshell.execDetached(["bash", "-c", `printf '${shellSingleQuoteEscape(entry)}' | ${root.cliphistBinary} decode | wl-copy`]);
-	}
-
-	function deleteEntry(entry): void {
-		deleteProc.deleteEntry(entry);
-	}
-
-	function displayText(entry): string {
-		return entry.replace(/^\s*\d+\s+/, "");
-	}
-
-	function entryIsImage(entry): bool {
-		return !!(/^\d+\t\[\[.*binary data.*\d+x\d+.*\]\]$/.test(entry));
-	}
-
-	function escapeHtml(str): string {
-		return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-	}
-
-	function fuzzyQuery(search: string): var {
-		if (search.trim() === "") {
-			return entries;
-		}
-		return Fuzzy.go(search, preparedEntries, {
-			all: true,
-			key: "name"
-		}).map(r => {
-			return r.obj.entry;
-		});
-	}
-
-	function paste(entry): void {
-		Quickshell.execDetached(["bash", "-c", `printf '${shellSingleQuoteEscape(entry)}' | ${root.cliphistBinary} decode | wl-copy && wl-paste`]);
-	}
-
-	function processPreviewLines(text: string): var {
-		if (text === "")
-			return [];
-		const lines = text.split("\n");
-		let minIndent = Infinity;
-		for (let i = 0; i < lines.length; i++) {
-			const m = lines[i].match(/^(\s*)/);
-			const indent = m ? m[1].length : 0;
-			if (lines[i].trim().length > 0 && indent < minIndent)
-				minIndent = indent;
-		}
-		if (minIndent === Infinity)
-			minIndent = 0;
-		const result = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			const indentMatch = line.match(/^(\s*)/);
-			const indentLen = indentMatch ? indentMatch[1].length : 0;
-			const stripped = line.slice(Math.min(minIndent, indentLen));
-			result.push({
-				line: i + 1,
-				text: stripped
-			});
-		}
-		return result;
-	}
-
-	function refresh(): void {
-		readProc.buffer = [];
-		readProc.running = true;
-	}
-
-	function refreshPreview(): void {
-		previewToken += 1;
-		const token = previewToken;
-
-		if (!currentEntry) {
-			previewText = [];
-			previewImageSource = "";
-			previewIsImage = false;
-			return;
-		}
-
-		previewImageSource = "";
-		previewIsImage = entryIsImage(currentEntry);
-
-		if (previewIsImage) {
-			previewImageProc.token = token;
-			previewImageProc.running = true;
-		} else {
-			previewTextProc.token = token;
-			previewTextProc.running = true;
-		}
-	}
-
-	function shellSingleQuoteEscape(str): string {
-		return String(str).replace(/'/g, "'\\''");
-	}
-
-	function wipe(): void {
-		wipeProc.running = true;
-	}
-
-	Process {
-		id: deleteProc
-
-		property string entry: ""
-
-		function deleteEntry(entry) {
-			deleteProc.entry = entry;
-			deleteProc.running = true;
-			deleteProc.entry = "";
-		}
-
-		command: ["bash", "-c", `echo '${root.shellSingleQuoteEscape(deleteProc.entry)}' | ${root.cliphistBinary} delete`]
-
-		onExited: (exitCode, exitStatus) => {
-			root.refresh();
-		}
-	}
-
-	Process {
-		id: wipeProc
-
-		command: [root.cliphistBinary, "wipe"]
-
-		onExited: (exitCode, exitStatus) => {
-			root.refresh();
-		}
-	}
-
-	Connections {
-		function onClipboardTextChanged() {
-			delayedUpdateTimer.restart();
-		}
-
-		target: Quickshell
-	}
-
-	Timer {
-		id: delayedUpdateTimer
-
-		interval: 50
-		repeat: false
-
-		onTriggered: {
-			root.refresh();
-		}
-	}
-
-	Process {
-		id: previewTextProc
-
-		property int token: 0
-
-		command: ["bash", "-c", `
-            printf '%s' '${root.shellSingleQuoteEscape(root.currentEntry)}' | ${root.cliphistBinary} decode
-        `]
-		running: false
-
-		stdout: StdioCollector {
-			onStreamFinished: {
-				if (previewTextProc.token !== root.previewToken)
-					return;
-				root.previewText = root.processPreviewLines(this.text);
-			}
-		}
-	}
-
-	Process {
-		id: previewImageProc
-
-		property int token: 0
-
-		command: ["bash", "-c", `
-            set -euo pipefail
-            tmp='${root.shellSingleQuoteEscape(root.previewImageFile)}'
-            printf '%s' '${root.shellSingleQuoteEscape(root.currentEntry)}' | ${root.cliphistBinary} decode > "$tmp"
-        `]
-		running: false
-
-		onExited: (exitCode, exitStatus) => {
-			if (token !== root.previewToken)
-				return;
-			if (exitCode !== 0) {
-				console.error("[Cliphist] image preview failed", exitCode, exitStatus);
-				return;
-			}
-
-			root.previewImageSource = "";
-			Qt.callLater(() => {
-				root.previewImageSource = `file://${root.previewImageFile}`;
-			});
-		}
-	}
-
-	Process {
-		id: readProc
-
-		property list<string> buffer: []
-
-		command: [root.cliphistBinary, "list"]
-
-		stdout: SplitParser {
-			onRead: line => {
-				readProc.buffer.push(line);
-			}
-		}
-
-		onExited: (exitCode, exitStatus) => {
-			if (exitCode === 0) {
-				root.entries = readProc.buffer;
-			} else {
-				console.error("[Cliphist] Failed to refresh with code", exitCode, "and status", exitStatus);
-			}
-		}
-	}
-
-	IpcHandler {
-		function update(): void {
-			root.refresh();
-		}
-
-		target: "cliphistService"
-	}
-}

Helpers/GameMode.qml

@@ -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,5 +158,6 @@ Singleton {
 
 	HyprExtras {
 		id: extras
+
 	}
 }

Helpers/Hyprsunset.qml

@@ -2,13 +2,12 @@ pragma Singleton
 
 import Quickshell
 import QtQuick
-import ZShell.Services
 import qs.Config
 
 Singleton {
 	id: root
 
-	readonly property bool enabled: service.enabled
+	property bool enabled
 	readonly property int end: Config.general.color.scheduleHyprsunsetEnd
 	property bool manualToggle: false
 	readonly property int start: Config.general.color.scheduleHyprsunsetStart
@@ -18,20 +17,69 @@ Singleton {
 		if (!Config.general.color.scheduleHyprsunset)
 			return;
 
-		service.apply();
+		var now = new Date();
+		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 {
-		service.manualToggle = true;
+		if (enabled)
-		service.toggle();
+			stopNightLight();
+		else
+			startNightLight(temp);
 	}
 
-	HyprsunsetManager {
+	onManualToggleChanged: {
-		id: service
+		if (root.manualToggle)
+			manualTimer.start();
+	}
 
-		activeAuto: Config.general.color.scheduleHyprsunset
+	Timer {
-		endTime: root.end
+		id: manualTimer
-		startTime: root.start
+
-		temp: root.temp
+		interval: 60000 * 60
+		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

@@ -42,24 +42,11 @@ Singleton {
 	function checkStartup() {
 		if (!root.enabled)
 			return;
-
 		var now = new Date();
-		var nowMinutes = now.getHours() * 60 + now.getMinutes();
+		if (now.getHours() >= darkStart || now.getHours() < darkEnd) {
-
+			applyDarkMode();
-		var isDarkTime;
-
-		if (root.darkStart <= root.darkEnd) {
-			isDarkTime = (nowMinutes >= root.darkStart && nowMinutes < root.darkEnd);
 		} else {
-			isDarkTime = (nowMinutes >= root.darkStart || nowMinutes < root.darkEnd);
+			applyLightMode();
-		}
-
-		if (isDarkTime) {
-			if (DynamicColors.light)
-				root.applyDarkMode();
-		} else {
-			if (!DynamicColors.light)
-				root.applyLightMode();
 		}
 	}
 
@@ -73,19 +60,8 @@ Singleton {
 		onTriggered: {
 			if (!root.enabled)
 				return;
-
 			var now = new Date();
-			var nowMinutes = now.getHours() * 60 + now.getMinutes();
+			if (now.getHours() >= root.darkStart || now.getHours() < root.darkEnd) {
-
-			var isDarkTime;
-
-			if (root.darkStart <= root.darkEnd) {
-				isDarkTime = (nowMinutes >= root.darkStart && nowMinutes < root.darkEnd);
-			} else {
-				isDarkTime = (nowMinutes >= root.darkStart || nowMinutes < root.darkEnd);
-			}
-
-			if (isDarkTime) {
 				if (DynamicColors.light)
 					root.applyDarkMode();
 			} else {

Helpers/NetworkUsage.qml

@@ -39,21 +39,6 @@ Singleton {
 	readonly property real uploadSpeed: _uploadSpeed
 	readonly property real uploadTotal: _uploadTotal
 
-function resetSampling(): void {
-	netDevFile.reload();
-
-	const content = netDevFile.text();
-	if (!content)
-		return;
-
-	const data = root.parseNetDev(content);
-	const now = Date.now();
-
-	root._prevRxBytes = data.rx;
-	root._prevTxBytes = data.tx;
-	root._prevTimestamp = now;
-}
-
 	function formatBytes(bytes: real): var {
 		// Handle negative or invalid values
 		if (bytes < 0 || isNaN(bytes) || !isFinite(bytes)) {
@@ -171,15 +156,10 @@ function resetSampling(): void {
 	Timer {
 		interval: Config.dashboard.resourceUpdateInterval
 		repeat: true
-		running: true
+		running: root.refCount > 0
 		triggeredOnStart: true
 
 		onTriggered: {
-			if (root.refCount <= 0) {
-				root.resetSampling();
-				return;
-			}
-
 			netDevFile.reload();
 			const content = netDevFile.text();
 			if (!content)

Helpers/Picker.qml

@@ -26,23 +26,16 @@ 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)
@@ -73,14 +66,7 @@ MouseArea {
 
 	function save(): void {
 		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
-		const rounding = root.cornerRadius > 0;
+		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--image"] : ["swappy", "-f"];
-		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/SystemUsage.qml

@@ -0,0 +1,463 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import qs.Config
+
+Singleton {
+	id: root
+
+	property string autoGpuType: "NONE"
+	property string cpuName: ""
+	property real cpuPerc
+	property real cpuTemp
+
+	// Individual disks: Array of { mount, used, total, free, perc }
+	property var disks: []
+	property real gpuMemTotal: 0
+	property real gpuMemUsed
+	property real gpuPerc
+	property real gpuTemp
+	readonly property string gpuType: Config.services.gpuType.toUpperCase() || autoGpuType
+	property real lastCpuIdle
+	property real lastCpuTotal
+	readonly property real memPerc: memTotal > 0 ? memUsed / memTotal : 0
+	property real memTotal
+	property real memUsed
+	property int refCount
+	readonly property real storagePerc: {
+		let totalUsed = 0;
+		let totalSize = 0;
+		for (const disk of disks) {
+			totalUsed += disk.used;
+			totalSize += disk.total;
+		}
+		return totalSize > 0 ? totalUsed / totalSize : 0;
+	}
+
+	function cleanCpuName(name: string): string {
+		return name.replace(/\(R\)/gi, "").replace(/\(TM\)/gi, "").replace(/CPU/gi, "").replace(/\d+th Gen /gi, "").replace(/\d+nd Gen /gi, "").replace(/\d+rd Gen /gi, "").replace(/\d+st Gen /gi, "").replace(/Core /gi, "").replace(/Processor/gi, "").replace(/\s+/g, " ").trim();
+	}
+
+	function cleanGpuName(name: string): string {
+		return name.replace(/NVIDIA GeForce /gi, "").replace(/NVIDIA /gi, "").replace(/AMD Radeon /gi, "").replace(/AMD /gi, "").replace(/Intel /gi, "").replace(/\(R\)/gi, "").replace(/\(TM\)/gi, "").replace(/Graphics/gi, "").replace(/\s+/g, " ").trim();
+	}
+
+	function formatKib(kib: real): var {
+		const mib = 1024;
+		const gib = 1024 ** 2;
+		const tib = 1024 ** 3;
+
+		if (kib >= tib)
+			return {
+				value: kib / tib,
+				unit: "TiB"
+			};
+		if (kib >= gib)
+			return {
+				value: kib / gib,
+				unit: "GiB"
+			};
+		if (kib >= mib)
+			return {
+				value: kib / mib,
+				unit: "MiB"
+			};
+		return {
+			value: kib,
+			unit: "KiB"
+		};
+	}
+
+	Timer {
+		interval: Config.dashboard.resourceUpdateInterval
+		repeat: true
+		running: root.refCount > 0
+		triggeredOnStart: true
+
+		onTriggered: {
+			stat.reload();
+			meminfo.reload();
+			if (root.gpuType === "GENERIC")
+				gpuUsage.running = true;
+
+			if (root.gpuType === "GENERIC" && root.gpuMemTotal === 0)
+				oneshotMemAmd.running = true;
+		}
+	}
+
+	Timer {
+		interval: 60000 * 120
+		repeat: true
+		running: true
+		triggeredOnStart: true
+
+		onTriggered: {
+			storage.running = true;
+		}
+	}
+
+	Timer {
+		interval: Config.dashboard.resourceUpdateInterval * 5
+		repeat: true
+		running: root.refCount > 0
+		triggeredOnStart: true
+
+		onTriggered: {
+			sensors.running = true;
+		}
+	}
+
+	FileView {
+		id: cpuinfoInit
+
+		path: "/proc/cpuinfo"
+
+		onLoaded: {
+			const nameMatch = text().match(/model name\s*:\s*(.+)/);
+			if (nameMatch)
+				root.cpuName = root.cleanCpuName(nameMatch[1]);
+		}
+	}
+
+	FileView {
+		id: stat
+
+		path: "/proc/stat"
+
+		onLoaded: {
+			const data = text().match(/^cpu\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/);
+			if (data) {
+				const stats = data.slice(1).map(n => parseInt(n, 10));
+				const total = stats.reduce((a, b) => a + b, 0);
+				const idle = stats[3] + (stats[4] ?? 0);
+
+				const totalDiff = total - root.lastCpuTotal;
+				const idleDiff = idle - root.lastCpuIdle;
+				const newCpuPerc = totalDiff > 0 ? (1 - idleDiff / totalDiff) : 0;
+
+				root.lastCpuTotal = total;
+				root.lastCpuIdle = idle;
+
+				if (Math.abs(newCpuPerc - root.cpuPerc) >= 0.01)
+					root.cpuPerc = newCpuPerc;
+			}
+		}
+	}
+
+	FileView {
+		id: meminfo
+
+		path: "/proc/meminfo"
+
+		onLoaded: {
+			const data = text();
+			const total = parseInt(data.match(/MemTotal: *(\d+)/)[1], 10) || 1;
+			const used = (root.memTotal - parseInt(data.match(/MemAvailable: *(\d+)/)[1], 10)) || 0;
+
+			if (root.memTotal !== total)
+				root.memTotal = total;
+
+			if (Math.abs(used - root.memUsed) >= 16384)
+				root.memUsed = used;
+		}
+	}
+
+	Process {
+		id: storage
+
+		command: ["lsblk", "-b", "-o", "NAME,SIZE,TYPE,FSUSED,FSSIZE", "-P"]
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const diskMap = {};  // Map disk name -> { name, totalSize, used, fsTotal }
+				const lines = text.trim().split("\n");
+
+				for (const line of lines) {
+					if (line.trim() === "")
+						continue;
+					const nameMatch = line.match(/NAME="([^"]+)"/);
+					const sizeMatch = line.match(/SIZE="([^"]+)"/);
+					const typeMatch = line.match(/TYPE="([^"]+)"/);
+					const fsusedMatch = line.match(/FSUSED="([^"]*)"/);
+					const fssizeMatch = line.match(/FSSIZE="([^"]*)"/);
+
+					if (!nameMatch || !typeMatch)
+						continue;
+
+					const name = nameMatch[1];
+					const type = typeMatch[1];
+					const size = parseInt(sizeMatch?.[1] || "0", 10);
+					const fsused = parseInt(fsusedMatch?.[1] || "0", 10);
+					const fssize = parseInt(fssizeMatch?.[1] || "0", 10);
+
+					if (type === "disk") {
+						// Skip zram (swap) devices
+						if (name.startsWith("zram"))
+							continue;
+
+						// Initialize disk entry
+						if (!diskMap[name]) {
+							diskMap[name] = {
+								name: name,
+								totalSize: size,
+								used: 0,
+								fsTotal: 0
+							};
+						}
+					} else if (type === "part") {
+						// Find parent disk (remove trailing numbers/p+numbers)
+						let parentDisk = name.replace(/p?\d+$/, "");
+						// For nvme devices like nvme0n1p1, parent is nvme0n1
+						if (name.match(/nvme\d+n\d+p\d+/))
+							parentDisk = name.replace(/p\d+$/, "");
+
+						// Aggregate partition usage to parent disk
+						if (diskMap[parentDisk]) {
+							diskMap[parentDisk].used += fsused;
+							diskMap[parentDisk].fsTotal += fssize;
+						}
+					}
+				}
+
+				const diskList = [];
+				let totalUsed = 0;
+				let totalSize = 0;
+
+				for (const diskName of Object.keys(diskMap).sort()) {
+					const disk = diskMap[diskName];
+					// Use filesystem total if available, otherwise use disk size
+					const total = disk.fsTotal > 0 ? disk.fsTotal : disk.totalSize;
+					const used = disk.used;
+					const perc = total > 0 ? used / total : 0;
+
+					// Convert bytes to KiB for consistency with formatKib
+					diskList.push({
+						mount: disk.name  // Using 'mount' property for compatibility
+						,
+						used: used / 1024,
+						total: total / 1024,
+						free: (total - used) / 1024,
+						perc: perc
+					});
+
+					totalUsed += used;
+					totalSize += total;
+				}
+
+				root.disks = diskList;
+			}
+		}
+	}
+
+	Process {
+		id: gpuNameDetect
+
+		command: ["sh", "-c", "nvidia-smi --query-gpu=name --format=csv,noheader 2>/dev/null || lspci 2>/dev/null | grep -i 'vga\\|3d\\|display' | head -1"]
+		running: true
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const output = text.trim();
+				if (!output)
+					return;
+
+				// Check if it's from nvidia-smi (clean GPU name)
+				if (output.toLowerCase().includes("nvidia") || output.toLowerCase().includes("geforce") || output.toLowerCase().includes("rtx") || output.toLowerCase().includes("gtx")) {
+					root.gpuName = root.cleanGpuName(output);
+				} else {
+					// Parse lspci output: extract name from brackets or after colon
+					const bracketMatch = output.match(/\[([^\]]+)\]/);
+					if (bracketMatch) {
+						root.gpuName = root.cleanGpuName(bracketMatch[1]);
+					} else {
+						const colonMatch = output.match(/:\s*(.+)/);
+						if (colonMatch)
+							root.gpuName = root.cleanGpuName(colonMatch[1]);
+					}
+				}
+			}
+		}
+	}
+
+	Process {
+		id: gpuTypeCheck
+
+		command: ["sh", "-c", "if command -v nvidia-smi &>/dev/null && nvidia-smi -L &>/dev/null; then echo NVIDIA; elif ls /sys/class/drm/card*/device/gpu_busy_percent 2>/dev/null | grep -q .; then echo GENERIC; else echo NONE; fi"]
+		running: !Config.services.gpuType
+
+		stdout: StdioCollector {
+			onStreamFinished: root.autoGpuType = text.trim()
+		}
+	}
+
+	Process {
+		id: oneshotMem
+
+		command: ["nvidia-smi", "--query-gpu=memory.total", "--format=csv,noheader,nounits"]
+		running: root.gpuType === "NVIDIA" && root.gpuMemTotal === 0
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				root.gpuMemTotal = Number(this.text.trim());
+				oneshotMem.running = false;
+			}
+		}
+	}
+
+	Process {
+		id: oneshotMemAmd
+
+		command: ["sh", "-c", "cat /sys/class/drm/card*/device/mem_info_vram_total"]
+		running: root.gpuType === "GENERIC" && root.gpuMemTotal === 0
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const values = text.trim().split("\n").map(v => parseInt(v, 10)).filter(v => Number.isFinite(v));
+
+				if (values.length > 0) {
+					const totalBytes = values.reduce((a, b) => a + b, 0);
+					root.gpuMemTotal = totalBytes / (1024 * 1024);
+				}
+
+				oneshotMemAmd.running = false;
+			}
+		}
+	}
+
+	Process {
+		id: gpuUsageNvidia
+
+		command: ["/usr/bin/nvidia-smi", "--query-gpu=utilization.gpu,temperature.gpu,memory.used", "--format=csv,noheader,nounits", "-lms", "1000"]
+		running: root.refCount > 0 && root.gpuType === "NVIDIA"
+
+		stdout: SplitParser {
+			onRead: data => {
+				const parts = String(data).trim().split(/\s*,\s*/);
+				if (parts.length < 3)
+					return;
+
+				const usageRaw = parseInt(parts[0], 10);
+				const tempRaw = parseInt(parts[1], 10);
+				const memRaw = parseInt(parts[2], 10);
+
+				if (!Number.isFinite(usageRaw) || !Number.isFinite(tempRaw) || !Number.isFinite(memRaw))
+					return;
+
+				const newGpuPerc = Math.max(0, Math.min(1, usageRaw / 100));
+				const newGpuTemp = tempRaw;
+				const newGpuMemUsed = root.gpuMemTotal > 0 ? Math.max(0, Math.min(1, memRaw / root.gpuMemTotal)) : 0;
+
+				// Only publish meaningful changes to avoid needless binding churn / repaints
+				if (Math.abs(root.gpuPerc - newGpuPerc) >= 0.01)
+					root.gpuPerc = newGpuPerc;
+
+				if (Math.abs(root.gpuTemp - newGpuTemp) >= 1)
+					root.gpuTemp = newGpuTemp;
+
+				if (Math.abs(root.gpuMemUsed - newGpuMemUsed) >= 0.01)
+					root.gpuMemUsed = newGpuMemUsed;
+			}
+		}
+	}
+
+	Process {
+		id: gpuUsage
+
+		command: root.gpuType === "GENERIC" ? ["sh", "-c", "paste -d ' ' /sys/class/drm/card*/device/gpu_busy_percent /sys/class/drm/card*/device/mem_info_vram_used"] : ["echo"]
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				if (root.gpuType === "GENERIC") {
+					const lines = text.trim().split("\n");
+
+					let percSum = 0;
+					let memSum = 0;
+					let count = 0;
+
+					for (const line of lines) {
+						const parts = line.trim().split(/\s+/);
+						if (parts.length < 2)
+							continue;
+
+						const gpuBusy = parseInt(parts[0], 10);
+						const memUsed = parseInt(parts[1], 10);
+
+						if (!Number.isFinite(gpuBusy) || !Number.isFinite(memUsed))
+							continue;
+
+						percSum += gpuBusy;
+						memSum += memUsed;
+						count++;
+					}
+
+					if (count > 0) {
+						// GPU usage %
+						root.gpuPerc = (percSum / count) / 100;
+
+						// VRAM usage (bytes → MiB → normalized)
+						const memUsedMiB = memSum / (1024 * 1024);
+
+						const newGpuMemUsed = root.gpuMemTotal > 0 ? Math.max(0, Math.min(1, memUsedMiB / root.gpuMemTotal)) : 0;
+
+						if (Math.abs(root.gpuMemUsed - newGpuMemUsed) >= 0.01)
+							root.gpuMemUsed = newGpuMemUsed;
+					}
+				} else {
+					root.gpuPerc = 0;
+					root.gpuTemp = 0;
+				}
+			}
+		}
+	}
+
+	Process {
+		id: sensors
+
+		command: ["sensors"]
+		environment: ({
+				LANG: "C.UTF-8",
+				LC_ALL: "C.UTF-8"
+			})
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				let cpuTemp = text.match(/(?:Package id [0-9]+|Tdie):\s+((\+|-)[0-9.]+)(°| )C/);
+				if (!cpuTemp)
+					// If AMD Tdie pattern failed, try fallback on Tctl
+					cpuTemp = text.match(/Tctl:\s+((\+|-)[0-9.]+)(°| )C/);
+
+				if (cpuTemp && Math.abs(parseFloat(cpuTemp[1]) - root.cpuTemp) >= 0.5)
+					root.cpuTemp = parseFloat(cpuTemp[1]);
+
+				if (root.gpuType !== "GENERIC")
+					return;
+
+				let eligible = false;
+				let sum = 0;
+				let count = 0;
+
+				for (const line of text.trim().split("\n")) {
+					if (line === "Adapter: PCI adapter")
+						eligible = true;
+					else if (line === "")
+						eligible = false;
+					else if (eligible) {
+						let match = line.match(/^(temp[0-9]+|GPU core|edge)+:\s+\+([0-9]+\.[0-9]+)(°| )C/);
+						if (!match)
+							// Fall back to junction/mem if GPU doesn't have edge temp (for AMD GPUs)
+							match = line.match(/^(junction|mem)+:\s+\+([0-9]+\.[0-9]+)(°| )C/);
+
+						if (match) {
+							sum += parseFloat(match[2]);
+							count++;
+						}
+					}
+				}
+
+				root.gpuTemp = count > 0 ? sum / count : 0;
+			}
+		}
+	}
+}

Helpers/UPower.qml

@@ -0,0 +1,26 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Services.UPower
+
+Singleton {
+	id: root
+
+	readonly property real batteryPercent: UPower.displayDevice.percentage
+	readonly property list<UPowerDevice> devices: UPower.devices.values
+	readonly property UPowerDevice displayDevice: UPower.displayDevice
+	readonly property bool onBattery: UPower.onBattery
+	// property bool toastShown
+	//
+	// Connections {
+	// 	target: UPower
+	//
+	// 	function onPercentageChanged(): {
+	// 		if (root.batteryPercent >= 0.2 && toastShown)
+	// 			return;
+	//
+	// 		root.toastShown = true;
+	// 		Toaster.toast(qsTr("Battery "))
+	// 	}
+	// }
+}