initial commit for settings revamp

Components/CustomSpinBox.qml

@@ -87,9 +87,15 @@ RowLayout {
 		id: upButton
 
 		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: upIcon.implicitHeight + Appearance.padding.extraSmall * 2
 		implicitWidth: implicitHeight
-		radius: Appearance.rounding.full
+		radius: upState.pressed ? Appearance.rounding.small : Appearance.rounding.normal
+
+		Behavior on radius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
 
 		StateLayer {
 			id: upState
@@ -120,9 +126,15 @@ RowLayout {
 
 	CustomRect {
 		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: downIcon.implicitHeight + Appearance.padding.extraSmall * 2
 		implicitWidth: implicitHeight
-		radius: Appearance.rounding.full
+		radius: downState.pressed ? Appearance.rounding.small : Appearance.rounding.normal
+
+		Behavior on radius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
 
 		StateLayer {
 			id: downState

Components/FadeImage.qml

@@ -0,0 +1,79 @@
+import QtQuick
+import Quickshell
+import qs.Config
+
+Image {
+	id: root
+
+	property int fadeInAnim: Anim.DefaultEffects
+	property int fadeInLargeAnim: Anim.StandardLarge
+	property int fadeOutAnim: Anim.FastEffects
+	property bool fadingOut
+	property bool hadPrevious
+	property bool preventInit
+
+	function maybeStartInAnim(): void {
+		if (!preventInit && !opacityInAnim.running && status === Image.Ready) {
+			opacityInAnim.type = hadPrevious ? fadeInAnim : fadeInLargeAnim;
+			opacityInAnim.start();
+		}
+	}
+
+	asynchronous: true
+	fillMode: Image.PreserveAspectCrop
+	opacity: 0
+	retainWhileLoading: true
+	sourceSize: {
+		const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+		return Qt.size(width * dpr, height * dpr);
+	}
+
+	Anim on opacity {
+		id: opacityInAnim
+
+		running: false
+		to: 1
+	}
+	Behavior on source {
+		SequentialAnimation {
+			ScriptAction {
+				script: opacityInAnim.stop()
+			}
+
+			PropertyAction {
+				property: "fadingOut"
+				target: root
+				value: true
+			}
+
+			Anim {
+				property: "opacity"
+				target: root
+				to: 0
+				type: root.fadeOutAnim
+			}
+
+			PropertyAction {
+				property: "fadingOut"
+				target: root
+				value: false
+			}
+
+			PropertyAction {
+				property: "hadPrevious"
+				target: root
+				value: root.source
+			}
+
+			PropertyAction {
+			}
+
+			ScriptAction {
+				script: root.maybeStartInAnim()
+			}
+		}
+	}
+
+	onPreventInitChanged: maybeStartInAnim()
+	onStatusChanged: maybeStartInAnim()
+}

Components/IconTextButton.qml

@@ -63,6 +63,7 @@ ButtonBase {
 			id: label
 
 			Layout.alignment: Qt.AlignVCenter
+			Layout.topMargin: -1
 			color: root.onColor
 			font: root.font
 		}

Components/VerticalFadeFlickable.qml

@@ -0,0 +1,71 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Effects
+
+CustomFlickable {
+	id: root
+
+	property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
+	property real fadeAmount: 0.2
+	property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
+
+	function fadeShouldBeActive(isStart: bool): bool {
+		// When content is smaller than flickable size, hide fade when rebound starts
+		if (contentHeight + topMargin + bottomMargin < height && rebound.running && ((isStart ? verticalOvershoot > 0 : verticalOvershoot < 0)))
+			return false;
+
+		if (isStart)
+			return visibleArea.yPosition > 0;
+		return visibleArea.yPosition + visibleArea.heightRatio < 1;
+	}
+
+	flickableDirection: Flickable.VerticalFlick
+	layer.enabled: true
+
+	Behavior on bottomFadeOpacity {
+		Anim {
+			type: Anim.SlowEffects
+		}
+	}
+	layer.effect: Mask {
+		maskSource: mask
+
+		Rectangle {
+			id: mask
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			gradient: Gradient {
+				orientation: Gradient.Vertical
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, root.topFadeOpacity)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: root.fadeAmount
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: 1 - root.fadeAmount
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, root.bottomFadeOpacity)
+					position: 1
+				}
+			}
+		}
+	}
+	Behavior on topFadeOpacity {
+		Anim {
+			type: Anim.SlowEffects
+		}
+	}
+}