notifs: slide to remove

config/NotifsConfig.qml

@@ -5,6 +5,8 @@ import QtQuick
 
 Singleton {
     readonly property int defaultExpireTimeout: 3000
+    readonly property real clearThreshold: 0.3
+    readonly property int expandThreshold: 30
     readonly property Sizes sizes: Sizes {}
 
     component Sizes: QtObject {

modules/notifications/Notification.qml

@@ -20,8 +20,48 @@ StyledRect {
     color: Colours.palette.m3surfaceContainer
     radius: Appearance.rounding.normal
     implicitWidth: NotifsConfig.sizes.width
+    implicitHeight: inner.height
+
+    MouseArea {
+        property int startY
+
+        anchors.fill: parent
+        hoverEnabled: true
+        preventStealing: true
+
+        onEntered: root.modelData.timer.stop()
+        onExited: root.modelData.timer.start()
+
+        drag.target: parent
+        drag.axis: Drag.XAxis
+
+        onPressed: event => startY = event.y
+        onReleased: event => {
+            if (Math.abs(root.x) < NotifsConfig.sizes.width * NotifsConfig.clearThreshold)
+                root.x = 0;
+            else
+                root.modelData.popup = false;
+        }
+        onPositionChanged: event => {
+            if (pressed) {
+                const diffY = event.y - startY;
+                if (Math.abs(diffY) > NotifsConfig.expandThreshold)
+                    root.expanded = diffY > 0;
+            }
+        }
+    }
+
+    Behavior on x {
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+        }
+    }
 
     Item {
+        id: inner
+
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
@@ -160,6 +200,11 @@ StyledRect {
                 text: root.expanded ? "expand_less" : "expand_more"
                 font.pointSize: Appearance.font.size.smaller
             }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.expanded = !root.expanded
+            }
         }
 
         StyledText {