fix notif popup anims

.config/quickshell/modules/notificationPopup/NotificationPopup.qml

@@ -33,76 +33,80 @@ Scope {
             }
 
             mask: Region {
-                item: columnLayout
+                item: listview.contentItem
             }
 
             color: "transparent"
             implicitWidth: Appearance.sizes.notificationPopupWidth
 
-            // Signal handlers to add/remove notifications
+            ListView { // Scrollable window
-            Connections {
+                id: listview
-                target: Notifications
+                anchors.top: parent.top
-                function onNotify(notification) {
+                anchors.bottom: parent.bottom
-                    if (GlobalStates.sidebarRightOpen) {
+                anchors.horizontalCenter: parent.horizontalCente
-                        return
+                implicitWidth: parent.width - Appearance.sizes.elevationMargin * 2
-                    }
-                    // notificationRepeater.model = [notification, ...notificationRepeater.model]
-                    const notif = root.notifComponent.createObject(columnLayout, { 
-                        notificationObject: notification,
-                        popup: true
-                    });
-                    notificationWidgetList.unshift(notif)
 
-                    // Remove stuff from t he column, add back
+                add: Transition {
-                    for (let i = 0; i < notificationWidgetList.length; i++) {
+                    animations: [
-                        if (notificationWidgetList[i].parent === columnLayout) {
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
-                            notificationWidgetList[i].parent = null;
+                            properties: "opacity,scale",
-                        }
+                            from: 0,
-                    }
+                            to: 1,
+                        }),
+                    ]
+                }
 
-                    // Add notification widgets to the column
+                addDisplaced: Transition {
-                    for (let i = 0; i < notificationWidgetList.length; i++) {
+                    animations: [
-                        if (notificationWidgetList[i].parent === null) {
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
-                            notificationWidgetList[i].parent = columnLayout;
+                            property: "y",
-                        }
+                        }),
-                    }
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
+                            properties: "opacity,scale",
+                            to: 1,
+                        }),
+                    ]
                 }
-                function onDiscard(id) {
+                
-                    for (let i = notificationWidgetList.length - 1; i >= 0; i--) {
+                displaced: Transition {
-                        const widget = notificationWidgetList[i];
+                    animations: [
-                        if (widget && widget.notificationObject && widget.notificationObject.id === id) {
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
-                            widget.destroyWithAnimation();
+                            property: "y",
-                            notificationWidgetList.splice(i, 1);
+                        }),
-                        }
+                    ]
-                    }
                 }
-                function onTimeout(id) {
+                move: Transition {
-                    for (let i = notificationWidgetList.length - 1; i >= 0; i--) {
+                    animations: [
-                        const widget = notificationWidgetList[i];
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
-                        if (widget && widget.notificationObject && widget.notificationObject.id === id) {
+                            property: "y",
-                            widget.destroyWithAnimation();
+                        }),
-                            notificationWidgetList.splice(i, 1);
+                    ]
-                        }
-                    }
                 }
-                function onDiscardAll() {
-                    for (let i = notificationWidgetList.length - 1; i >= 0; i--) {
-                        const widget = notificationWidgetList[i];
-                        if (widget && widget.notificationObject) {
-                            widget.destroyWithAnimation();
-                        }
-                    }
-                    notificationWidgetList = [];
-                }
-            }
 
-            ColumnLayout { // Scrollable window content
+                remove: Transition {
-                id: columnLayout
+                    animations: [
-                anchors.horizontalCenter: parent.horizontalCenter
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
-                width: parent.width - Appearance.sizes.elevationMargin * 2
+                            property: "x",
-                spacing: 0 // The widgets themselves have margins for spacing
+                            to: listview.width,
+                        }),
+                        Appearance.animation.elementMove.numberAnimation.createObject(this, {
+                            property: "opacity",
+                            to: 0,
+                        })
+                    ]
+                }
 
-                // Notifications are added by the above signal handlers
+                model: ScriptModel {
+                    values: Notifications.popupList.slice().reverse()
+                }
+                delegate: NotificationWidget {
+                    required property var modelData
+                    id: notificationWidget
+                    popup: true
+                    anchors.left: parent?.left
+                    anchors.right: parent?.right
+                    notificationObject: modelData
+                }
             }
 
         }

.config/quickshell/services/Notifications.qml

@@ -12,6 +12,7 @@ Singleton {
 	id: root
     property var filePath: `${XdgDirectories.cache}/notifications/notifications.json`
     property var list: []
+    property var popupList: []
     // Quickshell's notification IDs starts at 1 on each run, while saved notifications
     // can already contain higher IDs. This is for avoiding id collisions
     property int idOffset
@@ -53,6 +54,7 @@ Singleton {
                 "urgency": notification.urgency.toString(),
             }
 			root.list = [...root.list, newNotifObject];
+            root.popupList = [...root.popupList, newNotifObject];
             root.notify(newNotifObject);
             notifFileView.setText(JSON.stringify(root.list, null, 2))
         }
@@ -69,6 +71,7 @@ Singleton {
         if (notifServerIndex !== -1) {
             notifServer.trackedNotifications.values[notifServerIndex].dismiss()
         }
+        root.popupList = root.popupList.filter((notif) => notif.id !== id);
         root.discard(id);
     }
 
@@ -83,6 +86,8 @@ Singleton {
     }
 
     function timeoutNotification(id) {
+        const index = root.list.findIndex((notif) => notif.id === id);
+        root.popupList = root.popupList.filter((notif) => notif.id !== id);
         root.timeout(id);
     }
 
@@ -90,6 +95,7 @@ Singleton {
         root.list.forEach((notif) => {
             root.timeout(notif.id);
         })
+        root.popupList = []
     }
 
     function attemptInvokeAction(id, notifIdentifier) {
@@ -100,7 +106,7 @@ Singleton {
             action.invoke()
         } 
         // else console.log("Notification not found in server: " + id)
-        root.discard(id);
+        // root.discard(id);
     }
 
     function triggerListChange() {