flyout animations

modules/Osd.qml

@@ -4,16 +4,28 @@ import Quickshell.Wayland
 import "." as M
 
 // OSD overlay — slides out from the bar, centered on screen.
-// Attached to the bar (square top corners, flush below it).
 PanelWindow {
     id: root
 
     required property var screen
 
-    // Stay visible while animating out
-    visible: M.OsdState.visible || hideAnim.running
+    visible: _winVisible
     color: "transparent"
 
+    property bool _winVisible: false
+    property bool _shown: M.OsdState.visible
+
+    on_ShownChanged: {
+        if (_shown) {
+            _winVisible = true;
+            hideAnim.stop();
+            showAnim.start();
+        } else {
+            showAnim.stop();
+            hideAnim.start();
+        }
+    }
+
     WlrLayershell.layer: WlrLayer.Overlay
     WlrLayershell.exclusiveZone: 0
     WlrLayershell.namespace: "nova-osd"
@@ -28,18 +40,6 @@ PanelWindow {
     implicitWidth: 200
     implicitHeight: 48
 
-    // Slide + fade animation state
-    property bool _shown: M.OsdState.visible
-    on_ShownChanged: {
-        if (_shown) {
-            hideAnim.stop();
-            showAnim.start();
-        } else {
-            showAnim.stop();
-            hideAnim.start();
-        }
-    }
-
     ParallelAnimation {
         id: showAnim
         NumberAnimation { target: content; property: "opacity"; to: 1; duration: 150; easing.type: Easing.OutCubic }
@@ -50,6 +50,7 @@ PanelWindow {
         id: hideAnim
         NumberAnimation { target: content; property: "opacity"; to: 0; duration: 250; easing.type: Easing.InCubic }
         NumberAnimation { target: content; property: "y"; to: -content.height; duration: 250; easing.type: Easing.InCubic }
+        onFinished: root._winVisible = false
     }
 
     Item {
@@ -60,7 +61,6 @@ PanelWindow {
         opacity: 0
         y: -height
 
-        // Background — flush with bar above
         Rectangle {
             anchors.fill: parent
             color: M.Theme.base00
@@ -75,7 +75,6 @@ PanelWindow {
             anchors.centerIn: parent
             spacing: 10
 
-            // Icon
             Text {
                 text: M.OsdState.icon
                 color: M.Theme.base0D
@@ -84,7 +83,6 @@ PanelWindow {
                 anchors.verticalCenter: parent.verticalCenter
             }
 
-            // Progress bar
             Item {
                 width: 120
                 height: 6
@@ -108,7 +106,6 @@ PanelWindow {
                 }
             }
 
-            // Percentage
             Text {
                 text: Math.round(M.OsdState.value * 100) + "%"
                 color: M.Theme.base05