prettier osd

modules/Osd.qml

@@ -3,46 +3,88 @@ import Quickshell
 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
 
-    visible: M.OsdState.visible
+    // Stay visible while animating out
+    visible: M.OsdState.visible || hideAnim.running
     color: "transparent"
 
     WlrLayershell.layer: WlrLayer.Overlay
     WlrLayershell.exclusiveZone: 0
     WlrLayershell.namespace: "nova-osd"
+    mask: Region {}
 
-    anchors.bottom: true
+    anchors.top: true
     anchors.left: true
 
-    margins.bottom: Math.round(screen.height / 3)
+    margins.top: 0
     margins.left: Math.round((screen.width - implicitWidth) / 2)
 
     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 }
+        NumberAnimation { target: content; property: "y"; to: 0; duration: 200; easing.type: Easing.OutCubic }
+    }
+
+    ParallelAnimation {
+        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 }
+    }
+
+    Item {
+        id: content
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: root.implicitHeight
+        opacity: 0
+        y: -height
+
+        // Background — flush with bar above
         Rectangle {
             anchors.fill: parent
             color: M.Theme.base00
             opacity: Math.max(M.Theme.barOpacity, 0.85)
-        radius: M.Theme.radius
+            topLeftRadius: 0
+            topRightRadius: 0
+            bottomLeftRadius: M.Theme.radius
+            bottomRightRadius: M.Theme.radius
         }
 
         Row {
             anchors.centerIn: parent
             spacing: 10
 
+            // Icon
             Text {
                 text: M.OsdState.icon
-            color: M.Theme.base05
+                color: M.Theme.base0D
-            font.pixelSize: M.Theme.fontSize + 4
+                font.pixelSize: M.Theme.fontSize + 6
                 font.family: M.Theme.iconFontFamily
                 anchors.verticalCenter: parent.verticalCenter
             }
 
+            // Progress bar
             Item {
                 width: 120
                 height: 6
@@ -59,16 +101,22 @@ PanelWindow {
                     height: parent.height
                     color: M.Theme.base0D
                     radius: 3
+
+                    Behavior on width {
+                        NumberAnimation { duration: 120; easing.type: Easing.OutCubic }
+                    }
                 }
             }
 
+            // Percentage
             Text {
                 text: Math.round(M.OsdState.value * 100) + "%"
                 color: M.Theme.base05
                 font.pixelSize: M.Theme.fontSize
                 font.family: M.Theme.fontFamily
                 anchors.verticalCenter: parent.verticalCenter
-            width: 30
+                width: 32
+            }
         }
     }
 }