idek atp

NotifCenter.qml

@@ -2,6 +2,7 @@ import Quickshell
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import "NotificationBox.qml"
 
 PanelWindow {
     id: root
@@ -11,7 +12,7 @@ PanelWindow {
         bottom: true
     }
     visible: false
-    exclusiveZone: 1
+    exclusionMode: ExclusionMode.Normal
     implicitWidth: 500
     color: "transparent"
 
@@ -58,7 +59,6 @@ PanelWindow {
                 anchors {
                     right: parent.right
                     top: parent.top
-                    bottom: parent.bottom
                     topMargin: 14
                     rightMargin: 16
                 }
@@ -91,69 +91,49 @@ PanelWindow {
                 fill: parent
                 topMargin: 48
             }
-            model: root.tracked
             spacing: 10
+
+            add: Transition { NumberAnimation {
+                property: "translateX"
+                from: root.width
+                to: 0
+                duration: 300
+                easing.type: Easing.OutBack
+                easing.overshoot: 0.7
+            }}
+            remove: Transition { NumberAnimation {
+                property: "translateX"
+                from: 0
+                to: root.width
+                duration: 150
+                easing.type: Easing.InQuint
+            }}
+            displaced: Transition { NumberAnimation {
+                property: "y"
+                duration: 300
+                easing.type: Easing.InOutCubic
+            }}
+
+            model: root.tracked
             delegate: Button {
                 anchors {
                     left: parent.left
                     right: parent.right
-                    margins: 12
                 }
-                height: notifContent.childrenRect.height + 32
-                Image {
-                    id: notifIcon
-                    anchors {
-                        verticalCenter: parent.verticalCenter
-                        left: parent.left
-                        leftMargin: 12
-                    }
-                    width: 40
-                    height: 40
-                    source: Quickshell.iconPath(modelData.appIcon, true)
-                }
-                Column {
-                    id: notifContent
+                height: notifBox.height
+                background: NotificationBox {
+                    id: notifBox
+                    notification: modelData
                     anchors {
                         left: parent.left
                         right: parent.right
-                        top: parent.top
-                        topMargin: 16
-                        leftMargin: 16 + (notifIcon.source == "" ? 0 : 44)
-                        rightMargin: 16
+                        leftMargin: 12
+                        rightMargin: 12
                     }
-                    spacing: 6
-                    Text {
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                        }
-                        color: "white"
-                        font.family: "Comfortaa"
-                        font.pixelSize: 16
-                        text: modelData.summary
-                        elide: Text.ElideRight
-                        wrapMode: Text.Wrap
-                        maximumLineCount: 2
-                    }
-                    Text {
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                        }
-                        color: "white"
-                        font.family: "Comfortaa"
-                        font.pixelSize: 12
-                        text: modelData.body
-                        elide: Text.ElideRight
-                        wrapMode: Text.Wrap
-                        maximumLineCount: 4
-                    }
-                }
-                background: Rectangle {
-                    color: "#333"
-                    radius: 12
                 }
                 onClicked: modelData.tracked = false
+                property real translateX: 0
+                transform: Translate { x: translateX }
             }
         }
         transform: Translate {