feat: notification popup area

modules/notifications/Background.qml

@@ -0,0 +1,61 @@
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property real wrapperWidth
+    required property real wrapperHeight
+    readonly property real rounding: BorderConfig.rounding
+    readonly property bool flatten: wrapperHeight < rounding * 2
+    readonly property real roundingY: flatten ? wrapperHeight / 2 : rounding
+
+    preferredRendererType: Shape.CurveRenderer
+    opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
+
+    ShapePath {
+        strokeWidth: -1
+        fillColor: BorderConfig.colour
+
+        startX: root.wrapperWidth
+
+        PathLine {}
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapperHeight)
+        }
+        PathLine {
+            relativeX: 0
+            y: root.flatten ? root.roundingY : root.wrapperHeight - root.rounding
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapperHeight)
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            x: root.wrapperWidth - root.rounding - 1
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.rounding
+            radiusX: root.rounding
+            radiusY: root.rounding
+        }
+
+        Behavior on fillColor {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+}

modules/notifications/Content.qml

@@ -0,0 +1,22 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import Quickshell
+import QtQuick
+
+Column {
+    id: root
+
+    // padding: Appearance.padding.large
+
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+
+    spacing: Appearance.spacing.normal
+
+    StyledRect {
+        width: 300
+        height: 100
+        // color: Qt.rgba(255, 0, 0, 0.4)
+    }
+}

modules/notifications/Notifications.qml

@@ -0,0 +1,79 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import Quickshell
+import Quickshell.Wayland
+import QtQuick
+
+Variants {
+    model: Quickshell.screens
+
+    Scope {
+        id: root
+
+        required property ShellScreen modelData
+        property bool osdVisible
+
+        Timer {
+            running: true
+            repeat: true
+            interval: 2000
+            onTriggered: root.osdVisible = !root.osdVisible
+        }
+
+        LazyLoader {
+            loading: true
+
+            StyledWindow {
+                id: win
+
+                screen: root.modelData
+                name: "notifications"
+                visible: wrapper.shouldBeVisible
+                exclusionMode: ExclusionMode.Normal
+
+                mask: Region {
+                    item: wrapper
+                }
+
+                anchors.top: true
+                anchors.bottom: true
+                anchors.right: true
+                width: wrapper.width
+                height: wrapper.height
+
+                Background {
+                    id: bg
+
+                    visible: false
+
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+
+                    wrapperWidth: wrapper.width
+                    wrapperHeight: Math.min(wrapper.height, content.height)
+                }
+
+                LayerShadow {
+                    source: bg
+                }
+
+                Wrapper {
+                    id: wrapper
+
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+
+                    implicitWidth: content.width + bg.rounding
+
+                    osdVisible: root.osdVisible
+                    contentHeight: content.height
+
+                    Content {
+                        id: content
+                    }
+                }
+            }
+        }
+    }
+}

modules/notifications/Wrapper.qml

@@ -0,0 +1,62 @@
+import "root:/config"
+import QtQuick
+
+Item {
+    id: root
+
+    required property bool osdVisible
+    required property real contentHeight
+    property bool shouldBeVisible
+
+    visible: height > 0
+    height: 0
+
+    states: State {
+        name: "visible"
+        when: root.osdVisible
+
+        PropertyChanges {
+            root.height: contentHeight
+            root.shouldBeVisible: true
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            SequentialAnimation {
+                PropertyAction {
+                    target: root
+                    property: "shouldBeVisible"
+                }
+                NumberAnimation {
+                    target: root
+                    property: "height"
+                    duration: Appearance.anim.durations.large
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+                }
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            SequentialAnimation {
+                NumberAnimation {
+                    target: root
+                    property: "height"
+                    duration: Appearance.anim.durations.normal
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.emphasizedAccel
+                }
+                PropertyAction {
+                    target: root
+                    property: "shouldBeVisible"
+                }
+            }
+        }
+    ]
+}

shell.qml

@@ -1,8 +1,9 @@
 import "modules/bar"
 import "modules/launcher"
 import "modules/osd"
-import "modules/background"
+import "modules/notifications"
 import "modules/drawers"
+import "modules/background"
 import Quickshell
 
 ShellRoot {
@@ -11,4 +12,5 @@ ShellRoot {
     Osd {}
     Background {}
     Drawers {}
+    Notifications {}
 }