feat: align close button to right and fix egregious masking workaround

src/windows/notificationtoast/NotificationToasts.qml

@@ -11,86 +11,79 @@ PopupWindow {
         rect.x: lbar.width * 1.2
         window: popups.win
     }
-    mask: Region {
-        id: mask
-        item: popupcol
-        intersection: Intersection.Xor
-        Region {
-            item: popupcol.children[0]
-            intersection: Intersection.Xor
-        }
-
-        Region {
-            item: popupcol.children[1]
-            intersection: Intersection.Xor
-        }
-
-        Region {
-            item: popupcol.children[2]
-            intersection: Intersection.Xor
-        }
-
-        Region {
-            item: popupcol.children[3]
-            intersection: Intersection.Xor
-        }
-
-        Region {
-            item: popupcol.children[4]
-            intersection: Intersection.Xor
-        }
-
-        Region {
-            item: popupcol.children[5]
-            intersection: Intersection.Xor
-        }
-    }
 
     visible: true
+
+    mask: Region {
+        item: popups
+
+        Region {
+            intersection: Intersection.Combine
+            height: popupcol.count * 26 + popupcol.count * popupcol.spacing + (mouseArea.containsMouse * 114)
+            width: 300
+        }
+    }
+
     color: "transparent"
-    height: 500
+    height: popupcol.count * 26 + 300
     width: 300
-    ListView {
+
-        id: popupcol
+    MouseArea {
-        anchors.margins: lbar.width * 0.2
+        id: mouseArea
+        hoverEnabled: true
         anchors.fill: parent
-        model: ListModel {
+
-            id: data
+        ListView {
-            Component.onCompleted: () => {
+            id: popupcol
-                Notifications.d.notification.connect(e => {
+            anchors.margins: lbar.width * 0.2
-                    data.insert(0, e);
+            anchors.fill: parent
-                });
+            model: ListModel {
-            }
+                id: data
-        }
+                Component.onCompleted: () => {
-        addDisplaced: Transition {
+                    console.log(popupcol.count);
-            NumberAnimation {
+                    Notifications.d.notification.connect(e => {
-                properties: "x,y"
+                        data.insert(0, e);
-                duration: 100
+                    });
-            }
-        }
-        add: Transition {
-            NumberAnimation {
-                properties: "y"
-                from: -50
-                duration: 1000
-            }
-        }
-        remove: Transition {
-            ParallelAnimation {
-                NumberAnimation {
-                    property: "opacity"
-                    to: 0
-                    duration: 300
                 }
+            }
+            addDisplaced: Transition {
+                NumberAnimation {
+                    properties: "x,y"
+                    duration: 100
+                }
+            }
+            add: Transition {
                 NumberAnimation {
                     properties: "y"
-                    to: -100
+                    from: -50
-                    duration: 300
+                    duration: 1000
+                }
+            }
+            remove: Transition {
+                PropertyAction {
+                    property: "ListView.delayRemove"
+                    value: true
+                }
+                ParallelAnimation {
+                    NumberAnimation {
+                        property: "opacity"
+                        to: 0
+                        duration: 300
+                    }
+                    NumberAnimation {
+                        properties: "y"
+                        to: -100
+                        duration: 300
+                    }
+                }
+                PropertyAction {
+                    property: "ListView.delayRemove"
+                    value: true
                 }
             }
-        }
 
-        spacing: 10
+            spacing: 10
-        delegate: Toast {}
+            delegate: Toast {}
+        }
     }
 }

src/windows/notificationtoast/Toast.qml

@@ -25,7 +25,7 @@ MouseArea {
 
     hoverEnabled: true
     height: 26
-    width: 200
+    width: parent.width
 
     BRectangle {
         id: box
@@ -35,23 +35,29 @@ MouseArea {
             anchors.fill: parent
             anchors.margins: 5
 
-            Row {
+            RowLayout {
-                Layout.fillWidth: true
+                width: parent.width
 
                 IconImage {
-                    source: Quickshell.iconPath(toast.appIcon)
+                    source: toast.appIcon ? Quickshell.iconPath(toast.appIcon) : ""
-                    height: 16
+                    height: parent.height
+                    width: height
                     visible: toast.appIcon
                 }
 
                 Text {
                     text: (toast.appIcon ? " " : toast.appName + ": ") + toast.summary
+                    Layout.fillWidth: true
                 }
 
-                Button {
+                Item {
-                    onClicked: toast.close()
+                    Layout.fillHeight: true
-                    width: 16
+                    Layout.rightMargin: 16
-                    height: 16
+                    Button {
+                        onClicked: toast.close()
+                        height: 16
+                        width: 16
+                    }
                 }
             }
 
@@ -69,7 +75,6 @@ MouseArea {
             when: toast.containsMouse
             PropertyChanges {
                 target: toast
-                width: 250
                 height: 140
             }
         }