proper anim for action center stackview

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContent.qml

@@ -12,7 +12,7 @@ import qs.modules.waffle.actionCenter.mainPage
 WBarAttachedPanelContent {
     id: root
 
-    contentItem: StackView { // TODO: Make this a WStackView with proper anim
+    contentItem: WStackView {
         id: stackView
         anchors.fill: parent
         implicitWidth: initItem.implicitWidth

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContext.qml

@@ -11,9 +11,7 @@ Singleton {
 
     function push(component) {
         if (stackView) {
-            item = stackView.push(component)
-            stackView.implicitWidth = item.implicitWidth
-            stackView.implicitHeight = item.implicitHeight
+            stackView.push(component)
         }
     }
 

dots/.config/quickshell/ii/modules/waffle/actionCenter/volumeControl/VolumeControl.qml

@@ -10,7 +10,7 @@ import qs.modules.common.widgets
 import qs.modules.waffle.looks
 import qs.modules.waffle.actionCenter
 
-Rectangle {
+Item {
     id: root
     implicitWidth: 360
     implicitHeight: 352

dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml

@@ -78,9 +78,8 @@ Item {
         }
     }
 
-    Rectangle {
+    Item {
         id: contentArea
-        color: "red"
         z: 0
         anchors.fill: borderRect
         anchors.margins: borderRect.border.width

dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml

@@ -0,0 +1,86 @@
+import QtQuick
+import QtQuick.Controls
+import qs.modules.waffle.looks
+
+StackView {
+    id: root
+    property real moveDistance: 20
+    property int pushDuration: 100
+    property list<real> bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+    clip: true
+
+    property alias color: background.color
+    background: Rectangle {
+        id: background
+        color: Looks.colors.bgPanelBody
+    }
+
+    pushEnter: Transition {
+        XAnimator {
+            from: -root.moveDistance
+            to: 0
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+        NumberAnimation {
+            properties: "opacity"
+            from: 0
+            to: 1
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+    }
+    pushExit: Transition {
+        XAnimator {
+            from: 0
+            to: root.moveDistance
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+        NumberAnimation {
+            properties: "opacity"
+            from: 1
+            to: 0
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+    }
+    popEnter: Transition {
+        XAnimator {
+            from: root.moveDistance
+            to: 0
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+        NumberAnimation {
+            properties: "opacity"
+            from: 0
+            to: 1
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+    }
+    popExit: Transition {
+        XAnimator {
+            from: 0
+            to: -root.moveDistance
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+        NumberAnimation {
+            properties: "opacity"
+            from: 1
+            to: 0
+            duration: root.pushDuration
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: root.bezierCurve
+        }
+    }
+}