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

src/windows/notificationtoast/NotificationToasts.qml

@@ -11,45 +11,28 @@ 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
-    color: "transparent"
+
-    height: 500
+    mask: Region {
+        item: popups
+
+        Region {
+            intersection: Intersection.Combine
+            height: popupcol.count * 26 + popupcol.count * popupcol.spacing + (mouseArea.containsMouse * 114)
             width: 300
+        }
+    }
+
+    color: "transparent"
+    height: popupcol.count * 26 + 300
+    width: 300
+
+    MouseArea {
+        id: mouseArea
+        hoverEnabled: true
+        anchors.fill: parent
+
         ListView {
             id: popupcol
             anchors.margins: lbar.width * 0.2
@@ -57,6 +40,7 @@ PopupWindow {
             model: ListModel {
                 id: data
                 Component.onCompleted: () => {
+                    console.log(popupcol.count);
                     Notifications.d.notification.connect(e => {
                         data.insert(0, e);
                     });
@@ -76,6 +60,10 @@ PopupWindow {
                 }
             }
             remove: Transition {
+                PropertyAction {
+                    property: "ListView.delayRemove"
+                    value: true
+                }
                 ParallelAnimation {
                     NumberAnimation {
                         property: "opacity"
@@ -88,9 +76,14 @@ PopupWindow {
                         duration: 300
                     }
                 }
+                PropertyAction {
+                    property: "ListView.delayRemove"
+                    value: true
+                }
             }
 
             spacing: 10
             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
                 }
 
+                Item {
+                    Layout.fillHeight: true
+                    Layout.rightMargin: 16
                     Button {
                         onClicked: toast.close()
-                    width: 16
                         height: 16
+                        width: 16
+                    }
                 }
             }
 
@@ -69,7 +75,6 @@ MouseArea {
             when: toast.containsMouse
             PropertyChanges {
                 target: toast
-                width: 250
                 height: 140
             }
         }