add notifications

Colors.qml

@@ -3,20 +3,20 @@ import QtQuick
 import Quickshell
 
 Singleton {
-	readonly property color base00: "#011840" 
+	readonly property color base00: "#192e31" 
-	readonly property color base01: "#1e315a"
+	readonly property color base01: "#324643"
-	readonly property color base02: "#3c4b73"
+	readonly property color base02: "#4a5f54"
-	readonly property color base03: "#5a648c"
+	readonly property color base03: "#627865"
-	readonly property color base04: "#777ea5"
+	readonly property color base04: "#7b9077"
-	readonly property color base05: "#9597be"
+	readonly property color base05: "#93a988"
-	readonly property color base06: "#b3b0d7"
+	readonly property color base06: "#acc29a"
-	readonly property color base07: "#d0caf0"
+	readonly property color base07: "#c4daab"
-	readonly property color base08: "#2b5b89"
+	readonly property color base08: "#23b39c"
-	readonly property color base09: "#245382"
+	readonly property color base09: "#26b49f"
-	readonly property color base0A: "#204c78"
+	readonly property color base0A: "#26b09a"
-	readonly property color base0B: "#396491"
+	readonly property color base0B: "#24ad97"
-	readonly property color base0C: "#2a5780"
+	readonly property color base0C: "#25ae9a"
-	readonly property color base0D: "#325d87"
+	readonly property color base0D: "#25ae9a"
-	readonly property color base0E: "#19426b"
+	readonly property color base0E: "#25ac92"
-	readonly property color base0F: "#0a315b"
+	readonly property color base0F: "#30b79a"
 }

modules/notifications/NotiServer.qml

@@ -0,0 +1,13 @@
+pragma ComponentBehavior: Bound
+pragma Singleton
+import Quickshell.Services.Notifications
+import QtQuick
+
+NotificationServer {
+    bodyMarkupSupported: true
+    persistenceSupported: true
+    imageSupported: true
+    onNotification: notification => {
+        notification.tracked = true;
+    }
+}

modules/notifications/Notification.qml

@@ -0,0 +1,73 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.settings
+
+Variants {
+    model: Quickshell.screens
+    delegate: WlrLayershell {
+        id: root
+        required property var modelData
+        screen: modelData
+
+        anchors {
+            top: true
+            right: true
+            bottom: true
+        }
+        margins {
+            top: Settings.config.floating ? Settings.config.barHeight + Settings.config.margins + 10 : Settings.config.barHeight + 10
+            right: 10
+            left: 10
+        }
+
+        mask: Region {
+            item: notifList
+        }
+        implicitHeight: notifList.contentHeight + 20
+        implicitWidth: modelData.width / 8
+
+        layer: WlrLayer.Overlay
+        exclusionMode: ExclusionMode.Ignore
+
+        color: "transparent"
+
+        ListView {
+            id: notifList
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: 10
+            height: contentHeight
+
+            model: NotiServer.trackedNotifications
+            delegate: NotificationCard {}
+            add: Transition {
+                NumberAnimation {
+                    property: "x"
+                    from: notifList.width
+                    to: 0
+                    duration: 400
+                    easing.type: Easing.OutExpo
+                }
+            }
+            remove: Transition {
+                NumberAnimation {
+                    property: "x"
+                    from: 0
+                    to: notifList.width
+                    duration: 400
+                    easing.type: Easing.OutExpo
+                }
+            }
+
+            move: Transition {
+                NumberAnimation {
+                    properties: "y"
+                    duration: 300
+                }
+            }
+        }
+    }
+}

modules/notifications/NotificationCard.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import qs.settings
+import QtQuick.Layouts
+import qs
+import qs.modules.Bar
+import qs.widgets
+import Quickshell.Widgets
+
+Rectangle {
+    id: notifyItem
+    required property var modelData
+    implicitWidth: ListView.view ? ListView.view.width : 300
+    implicitHeight: fullLayout.implicitHeight + 20
+    color: dismissArea.containsMouse ? Colors.base01 : Colors.base02
+    radius: Settings.config.rounding
+    border.width: 2
+    border.color: Colors.base07
+    Timer {
+        id: dismissTimer
+        interval: 5000
+        running: true
+        onTriggered: {
+            parent.modelData.expire();
+        }
+    }
+
+    RowLayout {
+        id: fullLayout
+        anchors.margins: 10
+        anchors.fill: parent
+        spacing: 10
+
+        ClippingWrapperRectangle {
+            id: notiIcon
+            radius: notifyItem.radius - notifyItem.radius / 3
+            implicitWidth: 64
+            color: "transparent"
+            implicitHeight: 64
+            visible: notifyItem.modelData.image !== ""
+            IconImage {
+                source: notifyItem.modelData.image
+                visible: notifyItem.modelData.image !== ""
+                implicitSize: 64
+                asynchronous: true
+            }
+        }
+
+        ColumnLayout {
+            id: textLayout
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignTop
+            spacing: 2
+
+            CText {
+                id: summary
+                text: notifyItem.modelData.summary
+                font.bold: true
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+                onTextChanged: {
+                    dismissTimer.restart();
+                }
+            }
+
+            CText {
+                text: notifyItem.modelData.body
+                font.pixelSize: Settings.config.fontSize - 2
+                maximumLineCount: 2
+                wrapMode: Text.WordWrap
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+            }
+        }
+    }
+
+    MouseArea {
+        id: dismissArea
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton
+        onClicked: notifyItem.modelData.dismiss()
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+    }
+}

settings/settings.json

@@ -1,6 +1,6 @@
 {
     "barHeight": 32,
-    "currentWall": "/home/lucy/.walls/mooon.png",
+    "currentWall": "/home/lucy/.walls/walkingcastle.png",
     "floating": true,
     "font": "Maple Mono NF",
     "fontSize": 14,

shell.qml

@@ -5,6 +5,7 @@ import qs.modules.Bar
 import qs.modules.ipc
 import qs.modules.wallpaper
 import qs.modules.widgets.wallpicker
+import qs.modules.notifications
 
 ShellRoot {
     id: root
@@ -12,4 +13,5 @@ ShellRoot {
     Ipc {}
     Wallpaper {}
     WallPicker {}
+    Notification {}
 }