Drawers/Interactions.qml

@@ -96,25 +96,25 @@ CustomMouseArea {
 			if (dragY < -10)
 				visibilities.dock = true;
 
-		if (panels.sidebar.width === 0) {
-			const showOsd = inRightPanel(panels.osd, x, y);
+			if (panels.sidebar.width === 0) {
+				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.osd, 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;
+				if (!osdShortcutActive) {
+					visibilities.osd = showOsd;
+					root.panels.osd.hovered = showOsd;
+				} else if (showOsd) {
+					osdShortcutActive = false;
+					root.panels.osd.hovered = true;
+				}
 			}
-		}
 
 		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
 			visibilities.dock = true;

Drawers/Panels.qml

@@ -20,15 +20,18 @@ Item {
 
 	required property Item bar
 	readonly property alias dashboard: dashboard
+	readonly property alias dashboardWrapper: dashboardWrapper
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
 	required property Canvas drawingItem
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
+	readonly property alias osdWrapper: osdWrapper
 	readonly property alias popouts: popouts.content
 	readonly property alias popoutsWrapper: popouts
 	readonly property alias resources: resources
+	readonly property alias resourcesWrapper: resourcesWrapper
 	required property ShellScreen screen
 	readonly property alias settings: settings
 	readonly property alias sidebar: sidebar
@@ -40,12 +43,43 @@ Item {
 	anchors.margins: Config.barConfig.border
 	anchors.topMargin: bar.implicitHeight
 
-	Resources.Wrapper {
-		id: resources
+	Item {
+		id: resourcesWrapper
 
 		anchors.left: parent.left
 		anchors.top: parent.top
-		visibilities: root.visibilities
+		clip: true
+		implicitHeight: resources.implicitHeight * (1 - resources.offsetScale)
+		implicitWidth: resources.implicitWidth
+
+		Resources.Wrapper {
+			id: resources
+
+			anchors.left: parent.left
+			anchors.top: parent.top
+			visibilities: root.visibilities
+		}
+	}
+
+	Item {
+		id: osdWrapper
+
+		anchors.right: parent.right
+		anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
+		anchors.verticalCenter: parent.verticalCenter
+		clip: sidebar.visible
+		implicitHeight: osd.implicitHeight
+		implicitWidth: osd.implicitWidth * (1 - osd.offsetScale)
+
+		Osd.Wrapper {
+			id: osd
+
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			screen: root.screen
+			sidebarOrSessionVisible: sidebar.visible
+			visibilities: root.visibilities
+		}
 	}
 
 	Drawing.Wrapper {
@@ -58,17 +92,6 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Osd.Wrapper {
-		id: osd
-
-		anchors.right: parent.right
-		anchors.rightMargin: sidebar.width
-		anchors.verticalCenter: parent.verticalCenter
-		clip: sidebar.width > 0
-		screen: root.screen
-		visibilities: root.visibilities
-	}
-
 	Modules.ClipWrapper {
 		id: popouts
 
@@ -90,6 +113,7 @@ Item {
 		anchors.right: parent.right
 		anchors.top: parent.top
 		panels: root
+		sidebarPanel: sidebar
 		visibilities: root.visibilities
 	}
 
@@ -113,12 +137,33 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Dashboard.Wrapper {
-		id: dashboard
+	Item {
+		id: dashboardWrapper
+
+		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
 		anchors.right: parent.right
 		anchors.top: parent.top
-		visibilities: root.visibilities
+		clip: true
+		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
+		implicitWidth: dashboard.implicitWidth
+
+		Behavior on offsetScale {
+			Anim {
+				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			}
+		}
+
+		Dashboard.Wrapper {
+			id: dashboard
+
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.topMargin: (-implicitHeight - 5) * offsetScale
+			offsetScale: dashboardWrapper.offsetScale
+			visibilities: root.visibilities
+		}
 	}
 
 	Sidebar.Wrapper {
@@ -134,7 +179,9 @@ Item {
 	Settings.Wrapper {
 		id: settings
 
-		anchors.centerIn: parent
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		// anchors.centerIn: parent
 		panels: root
 		screen: root.screen
 		visibilities: root.visibilities

Drawers/Windows.qml

@@ -170,15 +170,19 @@ Variants {
 				PanelBg {
 					id: dashBg
 
-					deformAmount: 0.15 * Config.appearance.deform.scale
+					deformAmount: 0.08 * Config.appearance.deform.scale
+					implicitHeight: panels.dashboard.height
+					implicitWidth: panels.dashboard.width
 					panel: panels.dashboard
 					radius: Appearance.rounding.normal
+					x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
+					y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight
 				}
 
 				PanelBg {
 					id: launcherBg
 
-					deformAmount: 0.15 * Config.appearance.deform.scale
+					deformAmount: 0.08 * Config.appearance.deform.scale
 					panel: panels.launcher
 					radius: Appearance.rounding.smallest + 5
 				}
@@ -187,8 +191,8 @@ Variants {
 					id: sidebarBg
 
 					bottomLeftRadius: 0
-					deformAmount: 0.1 * Config.appearance.deform.scale
-					exclude: panels.sidebar.offsetscale > 0.08 ? [] : [utilsBg]
+					deformAmount: 0.08 * Config.appearance.deform.scale
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
 					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
 					panel: panels.sidebar
 				}
@@ -197,8 +201,12 @@ Variants {
 					id: osdBg
 
 					deformAmount: 0.1 * Config.appearance.deform.scale
+					implicitHeight: panels.osd.height
+					implicitWidth: panels.osd.width
 					panel: panels.osd
 					radius: 20
+					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
+					y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
 				}
 
 				PanelBg {
@@ -219,24 +227,38 @@ Variants {
 				PanelBg {
 					id: popoutBg
 
-					deformAmount: 0.15 * Config.appearance.deform.scale
+					property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
+
+					deformAmount: panels.popouts.isDetached ? 0.05 * Config.appearance.deform.scale : panels.popouts.hasCurrent ? 0.15 * Config.appearance.deform.scale : 0.1 * Config.appearance.deform.scale
+					implicitHeight: panels.popouts.height * (1 + extraHeight)
 					implicitWidth: panels.popouts.width
-					panel: panels.popoutsWrapper
+					panel: panels.popouts
 					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : Appearance.rounding.smallest
+					x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
+					y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+
+					Behavior on extraHeight {
+						Anim {
+						}
+					}
 				}
 
 				PanelBg {
 					id: resourcesBg
 
-					deformAmount: 0.15 * Config.appearance.deform.scale
+					deformAmount: 0.08 * Config.appearance.deform.scale
+					implicitHeight: panels.resources.height
+					implicitWidth: panels.resources.width
 					panel: panels.resources
 					radius: Appearance.rounding.normal
+					x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
+					y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
 				}
 
 				PanelBg {
 					id: settingsBg
 
-					deformAmount: 0.1 * Config.appearance.deform.scale
+					deformAmount: 0.08 * Config.appearance.deform.scale
 					panel: panels.settings
 					radius: Appearance.rounding.large
 					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
@@ -246,7 +268,7 @@ Variants {
 				PanelBg {
 					id: dockBg
 
-					deformAmount: 0.15 * Config.appearance.deform.scale
+					deformAmount: 0.08 * Config.appearance.deform.scale
 					panel: panels.dock
 					radius: Appearance.rounding.normal
 				}
@@ -342,7 +364,7 @@ Variants {
 		required property Item panel
 
 		deformScale: deformAmount / 10000
-		group: panel.width > 0 && panel.height > 0 ? blobGroup : null
+		group: blobGroup
 		implicitHeight: panel.height
 		implicitWidth: panel.width
 		radius: Appearance.rounding.smallest

Modules/ClipWrapper.qml

@@ -17,12 +17,16 @@ Item {
 	implicitWidth: content.implicitWidth
 	visible: width > 0 && height > 0
 	x: {
-		const off = content.currentCenter - content.nonAnimWidth / 2;
+		if (content.isDetached)
+			return (parent.width - content.nonAnimWidth) / 2;
+
+		const off = content.currentCenter - Config.barConfig.border - content.nonAnimWidth / 2;
 		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
 		if (diff < 0)
 			return off + diff;
 		return Math.floor(Math.max(off, 0));
 	}
+	y: content.isDetached ? (parent.height - content.nonAnimHeight) / 2 : 0
 
 	Behavior on offsetScale {
 		Anim {

Modules/Dashboard/Wrapper.qml

@@ -15,78 +15,26 @@ Item {
 		reloadableId: "dashboardState"
 	}
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
+	required property real offsetScale
+	readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	opacity: 1 - offsetScale
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.dashboard && Config.dashboard.enabled
+	// visible: offsetScale < 1
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
+	Loader {
+		id: content
 
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
+		active: root.shouldBeActive || root.visible
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: Appearance.anim.durations.extraLarge
-		running: true
-
-		onTriggered: {
-			content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible);
-			content.visible = true;
-		}
-	}
-
-	CustomClippingRect {
-		anchors.fill: parent
-
-		Loader {
-			id: content
-
-			active: true
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			visible: false
-
-			sourceComponent: Content {
-				state: root.dashState
-				visibilities: root.visibilities
-			}
+		sourceComponent: Content {
+			state: root.dashState
+			visibilities: root.visibilities
 		}
 	}
 }

Modules/Dock/Wrapper.qml

@@ -11,97 +11,36 @@ Item {
 	property int contentHeight
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.dock
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	readonly property bool shouldBeActive: visibilities.dock
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	Behavior on implicitWidth {
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
+
+	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.small
-		}
-	}
-
-	onShouldBeActiveChanged: {
-		if (shouldBeActive) {
-			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
-		} else {
-			showAnim.stop();
-			hideAnim.start();
-		}
-	}
-
-	SequentialAnimation {
-		id: showAnim
-
-		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
-		}
-	}
-
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: Appearance.anim.durations.small
-
-		onRunningChanged: {
-			if (running && !root.shouldBeActive) {
-				content.visible = false;
-				content.active = true;
-			} else {
-				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
-			}
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: false
 		anchors.left: parent.left
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			panels: root.panels
 			screen: root.screen
 			visibilities: root.visibilities
-
-			Component.onCompleted: root.contentHeight = implicitHeight
 		}
-
-		Component.onCompleted: timer.start()
 	}
 }

Modules/Launcher/Wrapper.qml

@@ -21,55 +21,33 @@ Item {
 	}
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.launcher
 	required property PersistentProperties visibilities
+	readonly property bool shouldBeActive: visibilities.launcher
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
-
-	onMaxHeightChanged: timer.start()
 	onShouldBeActiveChanged: {
 		if (shouldBeActive) {
+			implicitHeight = Qt.binding(() => content.implicitHeight);
 			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
 		} else {
-			showAnim.stop();
-			hideAnim.start();
+			implicitHeight = implicitHeight;
 		}
 	}
 
-	SequentialAnimation {
-		id: showAnim
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
 
+	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
-		}
-	}
+	onMaxHeightChanged: timer.start()
 
 	Connections {
 		function onEnabledChanged(): void {
@@ -105,10 +83,6 @@ Item {
 				root.contentHeight = Math.min(root.maxHeight, content.implicitHeight);
 				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
 				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
 			}
 		}
 	}
@@ -119,7 +93,6 @@ Item {
 		active: false
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		visible: false
 
 		sourceComponent: Content {
 			maxHeight: root.maxHeight

Modules/Notifications/Sidebar/Utils/Wrapper.qml

@@ -20,69 +20,29 @@ Item {
 	required property Item sidebar
 	required property var visibilities
 
-	implicitHeight: 0
-	implicitWidth: sidebar.visible ? sidebar.width : Config.utilities.sizes.width
-	visible: height > 0
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.shouldBeActive
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight + 8 * 2
+	implicitWidth: sidebar.width * (1 - sidebar.offsetScale)
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight + 8 * 2
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: 1000
-		running: true
-
-		onTriggered: {
-			content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-			content.visible = true;
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			implicitWidth: root.implicitWidth - 8 * 2

Modules/Notifications/Sidebar/Wrapper.qml

@@ -12,57 +12,36 @@ Item {
 	}
 	required property var visibilities
 
-	implicitWidth: 0
-	visible: width > 0
+	readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.sidebar
+	visible: offsetScale < 1
+	anchors.rightMargin: (-implicitWidth - 5) * offsetScale
+	implicitWidth: Config.sidebar.sizes.width
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitWidth: Config.sidebar.sizes.width
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		}
-	]
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.bottom: parent.bottom
 		anchors.bottomMargin: 0
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
 
+		active: root.shouldBeActive || root.visible
+
 		sourceComponent: Content {
 			implicitWidth: Config.sidebar.sizes.width - 8 * 2
 			props: root.props
 			visibilities: root.visibilities
 		}
-
-		Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible)
 	}
 }

Modules/Notifications/Wrapper.qml

@@ -6,10 +6,11 @@ Item {
 	id: root
 
 	required property Item panels
+	required property Item sidebarPanel
 	required property var visibilities
 
 	implicitHeight: content.implicitHeight
-	implicitWidth: Math.max(panels.sidebar.width, content.implicitWidth)
+	implicitWidth: content.implicitWidth
 	visible: height > 0
 
 	states: State {
@@ -22,8 +23,8 @@ Item {
 	}
 	transitions: Transition {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 			property: "implicitHeight"
 			target: root
 		}

Modules/Osd/Wrapper.qml

@@ -26,40 +26,22 @@ Item {
 		timer.restart();
 	}
 
+	property real offsetScale: shouldBeActive ? 0 : 1
+	required property bool sidebarOrSessionVisible
+	property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0
+
+	visible: offsetScale < 1
+	anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
+	implicitWidth: content.implicitWidth
 	implicitHeight: content.implicitHeight
-	implicitWidth: 0
-	visible: width > 0
+	opacity: 1 - offsetScale
 
-	states: State {
-		name: "visible"
-		when: root.shouldBeActive
-
-		PropertyChanges {
-			root.implicitWidth: content.implicitWidth
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		}
-	]
 
 	Component.onCompleted: {
 		volume = Audio.volume;
@@ -113,26 +95,22 @@ Item {
 		}
 	}
 
-	CustomClippingRect {
-		anchors.fill: parent
+	Loader {
+		id: content
 
-		Loader {
-			id: content
+		anchors.left: parent.left
+		anchors.verticalCenter: parent.verticalCenter
 
-			anchors.left: parent.left
-			anchors.verticalCenter: parent.verticalCenter
+		active: root.shouldBeActive || root.visible
 
-			sourceComponent: Content {
-				brightness: root.brightness
-				monitor: root.monitor
-				muted: root.muted
-				sourceMuted: root.sourceMuted
-				sourceVolume: root.sourceVolume
-				visibilities: root.visibilities
-				volume: root.volume
-			}
-
-			Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible)
+		sourceComponent: Content {
+			brightness: root.brightness
+			monitor: root.monitor
+			muted: root.muted
+			sourceMuted: root.sourceMuted
+			sourceVolume: root.sourceVolume
+			visibilities: root.visibilities
+			volume: root.volume
 		}
 	}
 }

Modules/Resources/Wrapper.qml

@@ -9,78 +9,34 @@ Item {
 	id: root
 
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
+	property real offsetScale: shouldBeActive ? 0 : 1
+	readonly property bool shouldBeActive: root.visibilities.resources
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	anchors.topMargin: (-implicitHeight - 5) * offsetScale
+	clip: true
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.resources
-
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
-	Timer {
-		id: timer
+	Loader {
+		id: content
 
-		interval: Appearance.anim.durations.extraLarge
-		running: true
+		active: root.shouldBeActive || root.visible
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
-		onTriggered: {
-			content.active = Qt.binding(() => (root.visibilities.resources) || root.visible);
-			content.visible = true;
-		}
-	}
-
-	CustomClippingRect {
-		anchors.fill: parent
-
-		Loader {
-			id: content
-
-			active: true
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			visible: false
-
-			sourceComponent: Content {
-				padding: Appearance.padding.normal
-				visibilities: root.visibilities
-			}
+		sourceComponent: Content {
+			padding: Appearance.padding.normal
+			visibilities: root.visibilities
 		}
 	}
 }

Modules/SysTray/Popouts/AudioPopup.qml

@@ -18,8 +18,8 @@ Item {
 	readonly property int topMargin: 0
 	required property var wrapper
 
-	implicitHeight: layout.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.small * 2
+	implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
+	implicitWidth: 400 + Appearance.padding.small * 2
 
 	CustomRect {
 		anchors.left: parent.left
@@ -38,184 +38,15 @@ Item {
 		}
 	}
 
-	ColumnLayout {
-		id: layout
+	VolumesTab {
+		id: vol
 
-		// anchors.centerIn: parent
 		anchors.left: parent.left
 		anchors.margins: Appearance.padding.small
 		anchors.right: parent.right
-		anchors.top: parent.top
-		implicitWidth: stack.currentItem ? stack.currentItem.childrenRect.height : 0
-		spacing: 12
-
-		RowLayout {
-			id: tabBar
-
-			property int tabHeight: 36
-
-			Layout.fillWidth: true
-			spacing: 6
-
-			CustomClippingRect {
-				Layout.fillWidth: true
-				Layout.preferredHeight: tabBar.tabHeight
-				color: stack.currentIndex === 0 ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-				radius: root.rounding
-
-				StateLayer {
-					function onClicked(): void {
-						stack.currentIndex = 0;
-					}
-
-					CustomText {
-						anchors.centerIn: parent
-						color: stack.currentIndex === 0 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
-						text: qsTr("Volumes")
-					}
-				}
-			}
-
-			CustomClippingRect {
-				Layout.fillWidth: true
-				Layout.preferredHeight: tabBar.tabHeight
-				color: stack.currentIndex === 1 ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-				radius: root.rounding
-
-				StateLayer {
-					function onClicked(): void {
-						stack.currentIndex = 1;
-					}
-
-					CustomText {
-						anchors.centerIn: parent
-						color: stack.currentIndex === 1 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
-						text: qsTr("Devices")
-					}
-				}
-			}
-		}
-
-		StackLayout {
-			id: stack
-
-			Layout.fillWidth: true
-			Layout.preferredHeight: currentIndex === 0 ? vol.childrenRect.height : dev.childrenRect.height
-			currentIndex: 0
-
-			// Behavior on Layout.preferredHeight {
-			// 	Anim {
-			// 		duration: MaterialEasing.expressiveEffectsTime
-			// 		easing.bezierCurve: MaterialEasing.expressiveEffects
-			// 	}
-			// }
-			Behavior on currentIndex {
-				SequentialAnimation {
-					ParallelAnimation {
-						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							property: "opacity"
-							target: stack
-							to: 0
-						}
-
-						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							property: "scale"
-							target: stack
-							to: 0.9
-						}
-					}
-
-					PropertyAction {
-					}
-
-					ParallelAnimation {
-						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							property: "opacity"
-							target: stack
-							to: 1
-						}
-
-						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							property: "scale"
-							target: stack
-							to: 1
-						}
-					}
-				}
-			}
-
-			VolumesTab {
-				id: vol
-			}
-
-			DevicesTab {
-				id: dev
-			}
-		}
+		anchors.verticalCenter: parent.verticalCenter
 	}
 
-	component DevicesTab: Item {
-		implicitHeight: deviceColumn.height + Appearance.padding.normal
-		implicitWidth: deviceColumn.width + Appearance.padding.normal
-
-		ColumnLayout {
-			id: deviceColumn
-
-			anchors.centerIn: parent
-			spacing: 12
-
-			ButtonGroup {
-				id: sinks
-			}
-
-			ButtonGroup {
-				id: sources
-			}
-
-			CustomText {
-				font.weight: 500
-				text: qsTr("Output device")
-			}
-
-			Repeater {
-				model: Audio.sinks
-
-				CustomRadioButton {
-					required property PwNode modelData
-
-					ButtonGroup.group: sinks
-					checked: Audio.sink?.id === modelData.id
-					text: modelData.description
-
-					onClicked: Audio.setAudioSink(modelData)
-				}
-			}
-
-			CustomText {
-				Layout.topMargin: 10
-				font.weight: 500
-				text: qsTr("Input device")
-			}
-
-			Repeater {
-				model: Audio.sources
-
-				CustomRadioButton {
-					required property PwNode modelData
-
-					ButtonGroup.group: sources
-					checked: Audio.source?.id === modelData.id
-					text: modelData.description
-
-					onClicked: Audio.setAudioSource(modelData)
-				}
-			}
-		}
-	}
 	component VolumesTab: ColumnLayout {
 		spacing: 12
 

Modules/Updates/UpdatesPopout.qml

@@ -25,7 +25,7 @@ CustomClippingRect {
 		anchors.centerIn: parent
 		height: 200
 		visible: script.values.length === 0
-		width: 300
+		width: 600
 
 		MaterialIcon {
 			id: noUpdatesIcon

Modules/Wrapper.qml

@@ -15,6 +15,7 @@ Item {
 	property real currentCenter
 	property alias currentName: popoutState.currentName
 	property string detachedMode
+	readonly property bool isDetached: detachedMode.length > 0
 	property alias hasCurrent: popoutState.hasCurrent
 	readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight
 	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
@@ -50,8 +51,6 @@ Item {
 	implicitWidth: nonAnimWidth
 
 	Behavior on implicitHeight {
-		enabled: root.offsetScale < 1
-
 		Anim {
 			duration: root.animLength
 			easing.bezierCurve: root.animCurve

shell.qml

@@ -1,6 +1,6 @@
 //@ pragma UseQApplication
 //@ pragma Env QSG_RENDER_LOOP=threaded
-//@ pragma Env QSG_RHI_BACKEND=vulkan
+// @ pragma Env QSG_RHI_BACKEND=vulkan
 //@ pragma Env QSG_USE_SIMPLE_ANIMATION_DRIVER=0
 //@ pragma Env QS_NO_RELOAD_POPUP=1
 //@ pragma Env QT_SCALE_FACTOR_ROUNDING_POLICY=Round