audio popout changes, slider inset icons added

Components/CustomListView.qml

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

Components/CustomScrollBar.qml

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

Components/CustomSlider.qml

@@ -14,7 +14,11 @@ Slider {
 	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
@@ -38,7 +42,7 @@ Slider {
 			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
+			radius: root.radius
 			topLeftRadius: Appearance.rounding.extraSmall / 2
 		}
 
@@ -61,9 +65,9 @@ Slider {
 			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);
+				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
@@ -84,6 +88,27 @@ Slider {
 			sourceComponent: root.wavy ? waveComp : lineComp
 		}
 
+		MaterialIcon {
+			id: inset
+
+			readonly property bool attached: root.pos < 0.1
+			property real dockT: attached ? 1 : 0
+
+			anchors.bottom: parent.bottom
+			anchors.top: parent.top
+			color: root.insetColor
+			font.pixelSize: Appearance.font.size.smaller * 2
+			text: root.insetIcon
+			verticalAlignment: Text.AlignVCenter
+			visible: !root.wavy && root.insetIcon !== ""
+			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
+
+			Behavior on dockT {
+				Anim {
+				}
+			}
+		}
+
 		Component {
 			id: lineComp
 
@@ -92,7 +117,7 @@ Slider {
 				color: root.fgColor
 				implicitHeight: root.height
 				implicitWidth: root.filledWidth
-				radius: Appearance.rounding.small
+				radius: root.radius
 				topRightRadius: Appearance.rounding.extraSmall / 2
 			}
 		}