notifications: better destroy animation

.config/quickshell/modules/common/widgets/NotificationWidget.qml

@@ -24,8 +24,8 @@ Item {
     Behavior on implicitHeight {
         enabled: enableAnimation
         NumberAnimation {
-            duration: Appearance.animation.elementDecelFast.duration
+            duration: Appearance.animation.elementDecel.duration
-            easing.type: Appearance.animation.elementDecelFast.type
+            easing.type: Appearance.animation.elementDecel.type
         }
     }
 
@@ -33,16 +33,33 @@ Item {
         root.ready = true
     }
 
-    function fancyDestroy() {
+    function destroyWithAnimation() {
-        implicitHeight = 0
+        notificationRowWrapper.anchors.left = undefined
-        notificationRowWrapper.anchors.top = undefined
+        notificationRowWrapper.anchors.right = undefined
-        notificationRowWrapper.anchors.bottom = root.bottom
+        notificationRowWrapper.anchors.fill = undefined
-        destroyTimer.start()
+        notificationBackground.anchors.left = undefined
+        notificationBackground.anchors.right = undefined
+        notificationBackground.anchors.fill = undefined
+        notificationRowWrapper.x = width
+        notificationBackground.x = width
+        destroyTimer1.start()
     }
 
     Timer {
-        id: destroyTimer
+        id: destroyTimer1
-        interval: Appearance.animation.elementDecelFast.duration
+        interval: Appearance.animation.elementDecel.duration / 2
+        repeat: false
+        onTriggered: {
+            notificationRowWrapper.anchors.top = undefined
+            notificationRowWrapper.anchors.bottom = root.bottom
+            implicitHeight = 0
+            destroyTimer2.start()
+        }
+    }
+
+    Timer {
+        id: destroyTimer2
+        interval: Appearance.animation.elementDecel.duration
         repeat: false
         onTriggered: {
             root.destroy()
@@ -61,12 +78,30 @@ Item {
     }
 
     // Background
-    Rectangle {
+    Item {
+        id: notificationBackgroundWrapper
+
         anchors.fill: parent
+        implicitHeight: notificationColumnLayout.implicitHeight
         anchors.topMargin: notificationListSpacing
-        color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
+
-            Appearance.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
+        Rectangle {
-        radius: Appearance.rounding.normal
+            id: notificationBackground
+            anchors.fill: parent
+            anchors.bottom: parent.bottom
+
+            color: (notificationObject.urgency == NotificationUrgency.Critical) ? 
+                Appearance.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
+            radius: Appearance.rounding.normal
+
+            Behavior on x {
+                enabled: enableAnimation
+                NumberAnimation {
+                    duration: Appearance.animation.elementDecel.duration
+                    easing.type: Appearance.animation.elementDecel.type
+                }
+            }
+        }
     }
 
 
@@ -76,6 +111,15 @@ Item {
         anchors.right: parent.right
         anchors.top: parent.top
         implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
+
+        Behavior on x {
+            enabled: enableAnimation
+            NumberAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+            }
+        }
+
         ColumnLayout {
             id: notificationColumnLayout
             anchors.left: parent.left

.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml

@@ -44,7 +44,7 @@ Item {
             for (let i = notificationWidgetList.length - 1; i >= 0; i--) {
                 const widget = notificationWidgetList[i];
                 if (widget && widget.notificationObject && widget.notificationObject.id === id) {
-                    widget.fancyDestroy();
+                    widget.destroyWithAnimation();
                     notificationWidgetList.splice(i, 1);
                 }
             }
@@ -53,7 +53,10 @@ Item {
 
     Flickable { // Scrollable window
         id: flickable
-        anchors.fill: parent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: statusRow.top
         contentHeight: columnLayout.height
         clip: true
 
@@ -66,4 +69,19 @@ Item {
             // Notifications are added by the above signal handlers
         }
     }
+
+    RowLayout {
+        id: statusRow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        StyledText {
+            Layout.margins: 10
+            Layout.bottomMargin: 5
+            Layout.alignment: Qt.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            text: `${notificationWidgetList.length} Notifications`
+        }
+    }
 }