Start on new bar

modules/user/modules/quickshell/shell/OverlayWidget.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import Quickshell
+
+Item {
+	required property PopupSurface popupSurface;
+	required property real expandedWidth;
+	required property real expandedHeight;
+	required default property Item widget;
+
+	property bool expanded: false;
+
+	onExpandedChanged: {
+		animateTo(expanded ? 1.0 : 0.0)
+		if (expanded) popupSurface.activeOverlay = this
+	}
+
+	readonly property bool fullyCollapsed: animationProgress == 0.0;
+
+	onFullyCollapsedChanged: {
+		if (fullyCollapsed && popupSurface.activeOverlay == this) {
+			popupSurface.activeOverlay = null;
+		}
+	}
+
+	readonly property rect collapsedLayerRect: {
+		//console.log(`schrodinger's coordinate space: ${popupSurface.width} ${popupSurface.height}`);
+		const w = popupSurface.width;
+		const h = popupSurface.height;
+		return this.mapToItem(popupSurface.contentItem, 0, 0, width, height);
+	}
+
+	readonly property rect expandedLayerRect: popupSurface.expandedPosition(this)
+
+	readonly property rect layerRect: {
+		return Qt.rect(
+			ShellGlobals.popoutXCurve.interpolate(animationProgress, collapsedLayerRect.x, expandedLayerRect.x),
+			ShellGlobals.popoutYCurve.interpolate(animationProgress, collapsedLayerRect.y, expandedLayerRect.y),
+			ShellGlobals.popoutXCurve.interpolate(animationProgress, collapsedLayerRect.width, expandedLayerRect.width),
+			ShellGlobals.popoutYCurve.interpolate(animationProgress, collapsedLayerRect.height, expandedLayerRect.height),
+		);
+	}
+
+	implicitWidth: widget.implicitWidth
+	implicitHeight: widget.implicitHeight
+
+	Component.onCompleted: {
+		popupSurface.connectOverlay(this)
+		widget.x = Qt.binding(() => layerRect.x);
+		widget.y = Qt.binding(() => layerRect.y);
+		widget.width = Qt.binding(() => layerRect.width);
+		widget.height = Qt.binding(() => layerRect.height);
+	}
+	Component.onDestruction: {
+		popupSurface.disconnectOverlay(this)
+	}
+
+	function animateTo(target: real) {
+		animationProgressInternal = target * 1000
+	}
+
+	property real animationProgress: animationProgressInternal * 0.001
+	property real animationProgressInternal: 0.0 // animations seem to only have int precision
+
+	Behavior on animationProgressInternal {
+		SmoothedAnimation { velocity: 3000 }
+	}
+
+	MouseArea {
+		id: mouseArea
+		anchors.fill: parent
+		hoverEnabled: true
+		onPressed: expanded = false
+
+		Rectangle {
+			anchors.fill: parent
+			border.color: ShellGlobals.colors.widgetOutline
+			border.width: 1
+			radius: 5
+			color: "transparent"
+			opacity: mouseArea.containsMouse ? 1.0 : 0.0
+
+			Behavior on opacity {
+				SmoothedAnimation { velocity: 4 }
+			}
+		}
+	}
+}