Add notifications and notification center

NotifCenter.qml

@@ -0,0 +1,176 @@
+import Quickshell
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+PanelWindow {
+    id: root
+    anchors {
+        top: true
+        right: true
+        bottom: true
+    }
+    visible: false
+    exclusiveZone: 1
+    implicitWidth: 500
+    color: "transparent"
+
+    function open() {
+        root.visible = true;
+    }
+    function close() {
+        exitAnim.start();
+    }
+    function toggle() {
+        if (exitAnim.running) return;
+        if (root.visible) close();
+        else open();
+    }
+
+    required property var tracked
+
+    Rectangle {
+        color: "#222"
+        anchors.fill: parent
+        Text {
+            id: title
+            anchors {
+                left: parent.left
+                top: parent.top
+                leftMargin: 12
+                topMargin: 12
+            }
+            text: "Notifications"
+            font.pixelSize: 20
+            font.family: "Comfortaa"
+            font.bold: true
+            color: "white"
+        }
+        Button {
+            anchors {
+                top: parent.top
+                right: parent.right
+            }
+            width: clearAllText.width + 32
+            height: clearAllText.height + 30
+            Text {
+                id: clearAllText
+                anchors {
+                    right: parent.right
+                    top: parent.top
+                    bottom: parent.bottom
+                    topMargin: 14
+                    rightMargin: 16
+                }
+                color: "white"
+                font.pixelSize: 16
+                font.family: "Comfortaa"
+                text: "Clear All"
+            }
+            onClicked: {while (root.tracked.values.length) {
+                root.tracked.values[0].tracked = false;
+            }}
+            property var hover: HoverHandler { }
+            background: Rectangle {
+                anchors {
+                    fill: parent
+                    topMargin: 6
+                    leftMargin: 8
+                    bottomMargin: 6
+                    rightMargin: 8
+                }
+                radius: 12
+                color: parent.hover.hovered ? "#333" : "#222"
+                Behavior on color { PropertyAnimation {
+                    duration: 150
+                }}
+            }
+        }
+        ListView {
+            anchors {
+                fill: parent
+                topMargin: 48
+            }
+            model: root.tracked
+            spacing: 10
+            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
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        topMargin: 16
+                        leftMargin: 16 + (notifIcon.source == "" ? 0 : 44)
+                        rightMargin: 16
+                    }
+                    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
+            }
+        }
+        transform: Translate {
+            NumberAnimation on x {
+                running: root.visible
+                from: root.implicitWidth
+                to: 0
+                duration: 300
+                easing.type: Easing.OutQuint
+            }
+            NumberAnimation on x {
+                id: exitAnim
+                to: root.implicitWidth
+                duration: 300
+                easing.type: Easing.InQuint
+                onFinished: root.visible = false
+            }
+        }
+    }
+}