add animation to volpop

modules/bar/Pw.qml

@@ -1,10 +1,7 @@
 import Quickshell
-import Quickshell.Services.Pipewire
 import QtQuick
 import QtQuick.Layouts
-import qs.modules.applets
 import qs.widgets
-import qs.settings
 import qs.modules.Services
 
 BarComponent {

modules/overlays/Top.qml

@@ -8,8 +8,10 @@ import qs.settings
 Variants {
     model: Quickshell.screens
     delegate: PanelWindow {
+        id: root
         required property ShellScreen modelData
-	aboveWindows: true
+        property bool shown: WidgetTracker.current !== "" && WidgetTracker.screen === modelData
+
         screen: modelData
         anchors {
             top: true
@@ -19,8 +21,11 @@ Variants {
         }
         exclusionMode: ExclusionMode.Ignore
         color: 'transparent'
-        visible: WidgetTracker.current !== "" && WidgetTracker.screen === modelData
+        visible: true
-        WlrLayershell.keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+        mask: Region {
+            item: root.shown ? dismisser : null
+        }
+        WlrLayershell.keyboardFocus: shown ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
         Item {
             anchors.fill: parent
             focus: true
@@ -30,12 +35,29 @@ Variants {
             }
             VolPopup {
                 z: 1
-		visible: WidgetTracker.current === "volume"
+		id: volPopup
+                property bool shown: WidgetTracker.current === "volume"
+                opacity: shown ? 1 : 0
+                visible: opacity > 0
                 anchors.right: parent.right
                 anchors.top: parent.top
                 anchors.topMargin: Config.cfg.bar.floating ? Config.cfg.bar.height + 20 : Config.cfg.bar.height
                 anchors.rightMargin: 10
-		
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 140
+                        easing.type: Easing.OutCubic
+                    }
+                }
+                transform: Translate {
+                    y: volPopup.shown ? 0 : -12
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: 140
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                }
             }
             WallPicker {
                 z: 1
@@ -46,8 +68,16 @@ Variants {
                 implicitWidth: 1000
                 implicitHeight: 200
                 visible: WidgetTracker.current === "wallpapers"
+                Behavior on visible {
+                    PropertyAnimation {
+                        duration: 350
+                        easing.type: Easing.InOutBack
+                        easing.overshoot: 1.2
+                    }
+                }
             }
             MouseArea {
+                id: dismisser
                 z: 0
                 anchors.fill: parent
                 acceptedButtons: Qt.LeftButton