notifications: reverse order top to bottom, fix warnings

Modules/Notifications/NotificationPopup.qml

@@ -8,32 +8,36 @@ import qs.Services
 import qs.Widgets
 
 PanelWindow {
-    id: root
+    id: win
 
-    required property var notificationData // Individual notification wrapper
+    required property var notificationData
     required property string notificationId
     readonly property bool isPopup: notificationData.popup
     readonly property int expireTimeout: notificationData.notification.expireTimeout
-    property int verticalOffset: notificationData && notificationData.initialOffset || 0
+    
-    property bool initialAnimation: true
+    property int screenY: 0
-    property bool fadingOut: false
+    onScreenYChanged: margins.top = Theme.barHeight + 16 + screenY
-    property bool slideOut: false
+    Behavior on screenY {
-    property bool entering: true
+        enabled: !exiting
+        NumberAnimation {
+            duration: 220
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    property int rowHeight: 132
+    property bool exiting: false
 
     signal entered()
     signal exitFinished()
 
-    visible: isPopup || fadingOut || slideOut
+    visible: true
     WlrLayershell.layer: WlrLayershell.Overlay
     WlrLayershell.exclusiveZone: -1
     WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
     color: "transparent"
     implicitWidth: 400
-    implicitHeight: 116 // Individual notifications have fixed height
+    implicitHeight: 116
-    Component.onCompleted: {
-        initialAnimation = false; // kicks the right→left slide-in
-        enterDelay.start(); // start TTL after entrance
-    }
 
     anchors {
         top: true
@@ -41,46 +45,50 @@ PanelWindow {
     }
 
     margins {
-        top: Theme.barHeight + 16 + verticalOffset
+        top: Theme.barHeight + 16
         right: 12
     }
 
-    Timer {
+    Item {
-        id: enterDelay
+        id: content
+        anchors.fill: parent
 
-        interval: Anims.durMed // must match the entrance duration
+        transform: Translate {
-        repeat: false
+            id: tx
-        onTriggered: notificationData.timer.start()
+            x: 400
+            Behavior on x {
+                NumberAnimation {
+                    id: xAnim
+                    duration: 240
+                    easing.type: Easing.OutCubic
+                    onRunningChanged: {
+                        if (!running && win && !win.exiting && Math.abs(tx.x) < 0.5) win.entered();
+                        if (!running && win && win.exiting && Math.abs(tx.x - 96) < 0.5) maybeFinishExit();
+                    }
                 }
-
-    Timer {
-        id: forceHideTimer
-
-        interval: 500 // Force hide after 500ms if stuck
-        repeat: false
-        onTriggered: {
-            console.warn("NotificationPopup: Forcing exit for stuck notification");
-            exitFinished();
             }
         }
 
-    Connections {
+        opacity: win.exiting ? 0 : 1
-        function onPopupChanged() {
+        Behavior on opacity {
-            if (!notificationData.popup) {
+            NumberAnimation {
-                if (notificationData.removedByLimit)
+                id: fadeAnim
-                    slideOut = true;
+                duration: 200
-                else
+                easing.type: Easing.OutCubic
-                    fadingOut = true;
+                onRunningChanged: if (!running && win && win.exiting && content && content.opacity === 0) maybeFinishExit()
-                // Start force hide timer as safety net
-                forceHideTimer.start();
-                // When a notification is no longer a popup, we want to remove it from the visible list
-                // so that other notifications can move into its place.
-                NotificationService.removeFromVisibleNotifications(notificationData);
             }
         }
 
-        target: notificationData
+        scale: win.exiting ? 0.98 : 1.0
+        Behavior on scale {
+            NumberAnimation {
+                duration: 160
+                easing.type: Easing.OutCubic
             }
+        }
+
+        layer.enabled: (Math.abs(tx.x) > 0.5) || win.exiting
+        layer.smooth: true
 
         Rectangle {
             property var shadowLayers: [shadowLayer1, shadowLayer2, shadowLayer3]
@@ -92,13 +100,9 @@ PanelWindow {
             border.color: notificationData.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
             border.width: notificationData.urgency === 2 ? 2 : 1
             clip: true
-        opacity: (fadingOut || slideOut) ? 0 : 1
-        scale: slideOut ? 0.98 : 1
 
-        // Shadow layers - marked for resource cleanup
             Rectangle {
                 id: shadowLayer1
-
                 anchors.fill: parent
                 anchors.margins: -3
                 color: "transparent"
@@ -110,7 +114,6 @@ PanelWindow {
 
             Rectangle {
                 id: shadowLayer2
-
                 anchors.fill: parent
                 anchors.margins: -2
                 color: "transparent"
@@ -122,7 +125,6 @@ PanelWindow {
 
             Rectangle {
                 id: shadowLayer3
-
                 anchors.fill: parent
                 color: "transparent"
                 border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
@@ -131,7 +133,6 @@ PanelWindow {
                 z: -1
             }
 
-        // Critical notification accent
             Rectangle {
                 anchors.fill: parent
                 radius: parent.radius
@@ -155,14 +156,11 @@ PanelWindow {
                         position: 0.021
                         color: "transparent"
                     }
-
                 }
-
             }
 
             Item {
                 id: notificationContent
-
                 anchors.top: parent.top
                 anchors.left: parent.left
                 anchors.right: parent.right
@@ -173,7 +171,6 @@ PanelWindow {
 
                 Rectangle {
                     id: iconContainer
-
                     readonly property bool hasNotificationImage: notificationData.image && notificationData.image !== ""
                     readonly property bool appIconIsImage: notificationData.appIcon && (notificationData.appIcon.startsWith("file://") || notificationData.appIcon.startsWith("http://") || notificationData.appIcon.startsWith("https://"))
                     property alias iconImage: iconImage
@@ -189,7 +186,6 @@ PanelWindow {
 
                     IconImage {
                         id: iconImage
-
                         anchors.fill: parent
                         anchors.margins: 2
                         asynchronous: true
@@ -220,12 +216,10 @@ PanelWindow {
                         font.weight: Font.Bold
                         color: Theme.primaryText
                     }
-
                 }
 
                 Rectangle {
                     id: textContainer
-
                     anchors.left: iconContainer.right
                     anchors.leftMargin: 12
                     anchors.right: closeButton.left
@@ -292,14 +286,11 @@ PanelWindow {
                                 Qt.openUrlExternally(link);
                             }
                         }
-
                     }
-
                 }
 
                 DankActionButton {
                     id: closeButton
-
                     anchors.right: parent.right
                     anchors.top: parent.top
                     iconName: "close"
@@ -310,13 +301,10 @@ PanelWindow {
                         notificationData.popup = false;
                     }
                 }
-
             }
 
-        // Main hover area for persistence and click handling
             MouseArea {
                 id: cardHoverArea
-
                 anchors.fill: parent
                 hoverEnabled: true
                 acceptedButtons: Qt.LeftButton
@@ -328,85 +316,59 @@ PanelWindow {
                 onExited: {
                     if (notificationData.popup)
                         notificationData.timer.restart();
-
                 }
                 onClicked: {
                     notificationData.popup = false;
                 }
             }
+        }
+    }
 
-        Behavior on opacity {
+    Component.onCompleted: {
-            NumberAnimation {
+        enterDelay.start();
-                duration: 180
+        Qt.callLater(() => { tx.x = 0; });
-                easing.type: Easing.BezierSpline
+    }
-                easing.bezierCurve: Anims.emphasized
+
-                onRunningChanged: {
+    Timer {
-                    if (!running && opacity === 0) {
+        id: enterDelay
-                        forceHideTimer.stop(); // Cancel force hide since animation completed normally
+        interval: Anims.durMed
-                        exitFinished();
+        repeat: false
+        onTriggered: notificationData.timer.start()
+    }
+
+    Connections {
+        target: notificationData
+        function onPopupChanged() {
+            if (!notificationData.popup && !win.exiting) {
+                win.exiting = true;
+                win.screenY = win.screenY;
+                tx.x = 96;
+                exitWatchdog.restart();
+                forceCleanupTimer.restart();
+                NotificationService.removeFromVisibleNotifications(notificationData);
             }
         }
     }
 
+    Timer {
+        id: exitWatchdog
+        interval: 500
+        repeat: false
+        onTriggered: if (win) win.exitFinished()
     }
     
-        Behavior on scale {
+    Timer {
-            NumberAnimation {
+        id: forceCleanupTimer
-                duration: 160
+        interval: 2000
-                easing.type: Easing.OutCubic
+        repeat: false
+        onTriggered: if (win) win.exitFinished()
     }
 
-        }
+    function maybeFinishExit() {
-
+        if (win && win.exiting && content && Math.abs(tx.x - 96) < 0.5 && content.opacity === 0) {
-        transform: Translate {
+            exitWatchdog.stop();
-            x: {
+            forceCleanupTimer.stop();
-                if (initialAnimation)
+            win.exitFinished();
-                    return 400;
- // start off-screen right
-                if (slideOut)
-                    return 64;
- // gentle nudge on exit (was 400)
-                return 0;
-            }
-
-            Behavior on x {
-                enabled: initialAnimation || slideOut
-
-                NumberAnimation {
-                    id: xAnim
-
-                    duration: Anims.durMed
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: slideOut ? Anims.emphasized : Anims.emphasizedDecel
-                    onRunningChanged: {
-                        if (!running) {
-                            if (!slideOut) {
-                                // entrance finished
-                                entering = false;
-                                entered();
-                            } else {
-                                // exit finished
-                                forceHideTimer.stop();
-                                // Cancel force hide since slide completed normally
-                                exitFinished();
         }
     }
 }
-                }
-
-            }
-
-        }
-
-    }
-
-    Behavior on verticalOffset {
-        NumberAnimation {
-            duration: Anims.durMed
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Anims.emphasized
-        }
-
-    }
-
-}

Modules/Notifications/NotificationPopupManager.qml

@@ -6,166 +6,100 @@ import qs.Services
 QtObject {
     id: manager
 
-    property var popupLoaders: []
     property int maxTargetNotifications: 3
     property int baseNotificationHeight: 132
-    property bool dismissalInProgress: false
+    property int topMargin: 0
+    property var popupWindows: []
 
-    property Timer dismissalTimer: Timer {
+    property Component popupComponent: Component {
-        interval: 200
+        NotificationPopup {
-        repeat: false
+            property var wrapper
-        onTriggered: dismissNextOldest()
+            notificationData: wrapper
-    }
+            notificationId: wrapper.notification.id
-
+            rowHeight: manager.baseNotificationHeight
-    property Component popupLoaderComponent: Component {
+            onEntered: manager._onPopupEntered(this)
-        Loader {
+            onExitFinished: manager._onPopupExitFinished(this)
-            id: popupLoader
-
-            property var notifWrapper
-
-            active: false
-            asynchronous: true
-
-            sourceComponent: NotificationPopup {
-                id: popup
-
-                notificationData: popupLoader.notifWrapper
-                notificationId: popupLoader.notifWrapper ? popupLoader.notifWrapper.notification.id : ""
-                onEntered: manager._onPopupEntered(popupLoader)
-                onSlideOutChanged: {
-                    if (slideOut) {
-                        manager._onPopupExitStarted(popupLoader);
-                    }
-                }
-                onExitFinished: manager._onPopupExitFinished(popupLoader)
-            }
         }
     }
 
     property Connections notificationConnections: Connections {
-        function onVisibleNotificationsChanged() {
-            syncPopupsWithQueue(NotificationService.visibleNotifications);
-        }
-
         target: NotificationService
-    }
+        function onVisibleNotificationsChanged() {
-
+            manager._sync(NotificationService.visibleNotifications);
-    function _createPopupLoader(notifWrapper) {
-        const L = popupLoaderComponent.createObject(manager, {
-            "notifWrapper": notifWrapper
-        });
-        popupLoaders.push(L);
-        return L;
-    }
-
-    function _destroyPopupLoader(L) {
-        const i = popupLoaders.indexOf(L);
-        if (i !== -1) {
-            popupLoaders.splice(i, 1);
-            popupLoaders = popupLoaders.slice();
-        }
-        L.active = false;
-        L.sourceComponent = null;
-    }
-
-    function _activeItems() {
-        return popupLoaders.filter((L) => {
-            return L.item && L.item.notificationData && L.item.notificationData.popup;
-        });
-    }
-
-    function _stableItems() {
-        return _activeItems().filter((L) => {
-            return !L.item.entering;
-        });
-    }
-
-    function repositionAll() {
-        const stable = _stableItems();
-        for (let i = 0; i < stable.length; ++i) {
-            const it = stable[i].item;
-            if (it)
-                it.verticalOffset = i * baseNotificationHeight;
-
         }
     }
 
-    function syncPopupsWithQueue(newWrappers) {
+    function _hasWindowFor(w) { return popupWindows.some(p => p && p.notificationData === w); }
+
+    function _sync(newWrappers) {
         for (let w of newWrappers) {
-            if (!popupLoaders.some((L) => {
+            if (!_hasWindowFor(w)) _insertNewestAtTop(w);
-                return L.notifWrapper === w;
-            })) {
-                const L = _createPopupLoader(w);
-                const actives = _activeItems().length;
-                w.initialOffset = actives * baseNotificationHeight;
-                L.active = true;
         }
+        for (let p of popupWindows.slice()) {
+            if (newWrappers.indexOf(p.notificationData) === -1 && p && !p.exiting) {
+                p.notificationData.removedByLimit = true;
+                p.notificationData.popup = false;
             }
-        for (let L of popupLoaders.slice()) {
-            if (newWrappers.indexOf(L.notifWrapper) === -1)
-                _destroyPopupLoader(L);
-
-        }
-        repositionAll();
-    }
-
-    function _onPopupEntered(L) {
-        repositionAll();
-        maybeStartOverflow();
-    }
-
-    function _onPopupExitStarted(L) {
-        const it = L.item;
-        if (!it)
-            return ;
-
-        if (it.shadowLayers) {
-            for (let layer of it.shadowLayers) {
-                if (layer)
-                    layer.visible = false;
-
-            }
-        }
-        if (it.iconContainer && it.iconContainer.iconImage) {
-            it.iconContainer.iconImage.source = "";
         }
     }
 
-    function _onPopupExitFinished(L) {
+    function _insertNewestAtTop(wrapper) {
-        NotificationService.releaseWrapper(L.notifWrapper);
+        for (let p of popupWindows) {
-        _destroyPopupLoader(L);
+            if (p && p.notificationData && p.notificationData.popup && !p.exiting) {
-        repositionAll();
+                p.screenY = p.screenY + baseNotificationHeight;
-        maybeStartOverflow();
+            }
         }
 
-    function maybeStartOverflow() {
+        const win = popupComponent.createObject(null, { wrapper: wrapper, screenY: topMargin });
-        const active = _activeItems();
+        if (!win) {
-        if (dismissalInProgress)
+            console.warn("Popup create failed");
-            return ;
-
-        if (active.length > maxTargetNotifications)
-            startSequentialDismissal();
-
-    }
-
-    function startSequentialDismissal() {
-        dismissalInProgress = true;
-        dismissNextOldest();
-    }
-
-    function dismissNextOldest() {
-        const active = _activeItems();
-        if (active.length <= maxTargetNotifications) {
-            dismissalInProgress = false;
             return;
         }
-        const oldest = active[0].item;
+        popupWindows.push(win);
-        if (oldest) {
+        _maybeStartOverflow();
-            oldest.notificationData.removedByLimit = true;
+    }
-            oldest.notificationData.popup = false;
+
-            dismissalTimer.restart();
+    function _active() {
+        return popupWindows.filter(p => p && p.notificationData && p.notificationData.popup);
+    }
+
+    function _bottom() {
+        let b = null, max = -1;
+        for (let p of _active()) {
+            if (!p.exiting && p.screenY > max) {
+                max = p.screenY;
+                b = p;
+            }
+        }
+        return b;
+    }
+
+    function _maybeStartOverflow() {
+        if (_active().length <= maxTargetNotifications + 1) return;
+        const b = _bottom();
+        if (b && !b.exiting) {
+            b.notificationData.removedByLimit = true;
+            b.notificationData.popup = false;
         }
     }
 
-
+    function _onPopupEntered(p) {
+        // Entry completed
+    }
+
+    function _onPopupExitFinished(p) {
+        const i = popupWindows.indexOf(p);
+        if (i !== -1) {
+            popupWindows.splice(i, 1);
+            popupWindows = popupWindows.slice();
+        }
+        if (NotificationService.releaseWrapper) NotificationService.releaseWrapper(p.notificationData);
+        p.destroy();
+
+        const survivors = _active().filter(s => !s.exiting).sort((a,b) => a.screenY - b.screenY);
+        for (let k = 0; k < survivors.length; ++k)
+            survivors[k].screenY = topMargin + k * baseNotificationHeight;
+
+        _maybeStartOverflow();
+    }
 }

Services/NotificationService.qml

@@ -20,6 +20,7 @@ Singleton {
     property int maxVisibleNotifications: 3
     property bool addGateBusy: false
     property int enterAnimMs: 400
+    property int seqCounter: 0
     
     Timer {
         id: addGate
@@ -82,6 +83,7 @@ Singleton {
         property bool removedByLimit: false
         property bool isPersistent: true
         property int initialOffset: 0
+        property int seq: 0
         
         onPopupChanged: {
             if (!popup) {
@@ -217,6 +219,7 @@ Singleton {
         const [next, ...rest] = notificationQueue;
         notificationQueue = rest;
 
+        next.seq = ++seqCounter;
         visibleNotifications = [...visibleNotifications, next];
         next.popup = true;