Add animations everywhere

Modules/Bar/NotificationHistoryPanel.qml

@@ -15,17 +15,56 @@ NLoader {
     NPanel {
       id: notificationPanel
 
+      // Override hide function to animate first
+      function hide() {
+        // Start hide animation
+        notificationRect.scaleValue = 0.8
+        notificationRect.opacityValue = 0.0
+        
+        // Hide after animation completes
+        hideTimer.start()
+      }
+
       Connections {
         target: notificationPanel
         ignoreUnknownSignals: true
         function onDismissed() {
+          // Start hide animation
+          notificationRect.scaleValue = 0.8
+          notificationRect.opacityValue = 0.0
+          
+          // Hide after animation completes
+          hideTimer.start()
+        }
+      }
+
+      // Also handle visibility changes from external sources
+      onVisibleChanged: {
+        if (!visible && notificationRect.opacityValue > 0) {
+          // Start hide animation
+          notificationRect.scaleValue = 0.8
+          notificationRect.opacityValue = 0.0
+          
+          // Hide after animation completes
+          hideTimer.start()
+        }
+      }
+
+      // Timer to hide panel after animation
+      Timer {
+        id: hideTimer
+        interval: Style.animationSlow
+        repeat: false
+        onTriggered: {
           notificationPanel.visible = false
+          notificationPanel.dismissed()
         }
       }
 
       WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
 
       Rectangle {
+        id: notificationRect
         color: Colors.backgroundSecondary
         radius: Style.radiusMedium * scaling
         border.color: Colors.backgroundTertiary
@@ -37,6 +76,36 @@ NLoader {
         anchors.topMargin: Style.marginTiny * scaling
         anchors.rightMargin: Style.marginTiny * scaling
 
+        // Animation properties
+        property real scaleValue: 0.8
+        property real opacityValue: 0.0
+
+        scale: scaleValue
+        opacity: opacityValue
+
+        // Animate in when component is completed
+        Component.onCompleted: {
+          scaleValue = 1.0
+          opacityValue = 1.0
+        }
+
+        // Animation behaviors
+        Behavior on scale {
+          NumberAnimation {
+            duration: Style.animationSlow
+            easing.type: Easing.OutExpo
+
+          }
+        }
+
+        Behavior on opacity {
+          NumberAnimation {
+            duration: Style.animationNormal
+            easing.type: Easing.OutQuad
+
+          }
+        }
+
         ColumnLayout {
           anchors.fill: parent
           anchors.margins: Style.marginLarge * scaling
@@ -72,7 +141,7 @@ NLoader {
               icon: "close"
               sizeMultiplier: 0.8
               onClicked: {
-                notificationPanel.visible = false
+                notificationPanel.hide()
               }
             }
           }