notifs: better sliding

Wrap with clippingrect so x doesnt reset when element is added/removed
Also clippingrect rounds the ends when sliding

2 files changed, 18 insertions, 10 deletions

diff --git a/modules/notifications/Content.qml b/modules/notifications/Content.qml
index ecf2c0d..71cf0cf 100644
--- a/modules/notifications/Content.qml
+++ b/modules/notifications/Content.qml
@@ -2,6 +2,7 @@ import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import Quickshell
+import Quickshell.Widgets
 import QtQuick
 
 Item {
@@ -34,20 +35,25 @@ Item {
             return Math.max(61, height);
         }
 
-        clip: true
         orientation: Qt.Vertical
         spacing: Appearance.spacing.smaller
         interactive: false
 
-        delegate: Notification {}
+        delegate: ClippingRectangle {
+            id: wrapper
 
-        add: Transition {
-            Anim {
-                property: "x"
-                from: NotifsConfig.sizes.width
-                to: 0
-                duration: Appearance.anim.durations.large
-                easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+            required property Notifs.Notif modelData
+            readonly property alias nonAnimHeight: notif.nonAnimHeight
+
+            color: "transparent"
+            radius: notif.radius
+            implicitWidth: notif.width
+            implicitHeight: notif.height
+
+            Notification {
+                id: notif
+
+                modelData: wrapper.modelData
             }
         }
 
diff --git a/modules/notifications/Notification.qml b/modules/notifications/Notification.qml
index 03b0311..3844aaf 100644
--- a/modules/notifications/Notification.qml
+++ b/modules/notifications/Notification.qml
@@ -18,12 +18,14 @@ StyledRect {
     readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
     property bool expanded
 
-    clip: true
     color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
     radius: Appearance.rounding.normal
     implicitWidth: NotifsConfig.sizes.width
     implicitHeight: inner.height
 
+    x: NotifsConfig.sizes.width
+    Component.onCompleted: x = 0
+
     MouseArea {
         property int startY