feat: basic notifications

Also fix pixel issue with notif area background
Add more log rules to run script

5 files changed, 204 insertions, 23 deletions

diff --git a/modules/bar/components/TrayItem.qml b/modules/bar/components/TrayItem.qml
index b7ffdec..5ce45ee 100644
--- a/modules/bar/components/TrayItem.qml
+++ b/modules/bar/components/TrayItem.qml
@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import "root:/widgets"
 import "root:/config"
 import Quickshell
 import Quickshell.Widgets
@@ -53,18 +54,9 @@ MouseArea {
         active: BarConfig.tray.recolourIcons
         asynchronous: true
 
-        sourceComponent: MultiEffect {
+        sourceComponent: Colouriser {
             source: icon
             colorizationColor: root.colour
-            colorization: 1
-
-            Behavior on colorizationColor {
-                ColorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
-            }
         }
     }
 }
diff --git a/modules/notifications/Background.qml b/modules/notifications/Background.qml
index e3289af..a0ed11e 100644
--- a/modules/notifications/Background.qml
+++ b/modules/notifications/Background.qml
@@ -49,6 +49,10 @@ Shape {
             radiusX: root.rounding
             radiusY: root.rounding
         }
+        PathLine {
+            relativeX: 1
+            relativeY: 0
+        }
 
         Behavior on fillColor {
             ColorAnimation {
diff --git a/modules/notifications/Content.qml b/modules/notifications/Content.qml
index 86cef8b..7fdd000 100644
--- a/modules/notifications/Content.qml
+++ b/modules/notifications/Content.qml
@@ -7,16 +7,18 @@ import QtQuick
 Column {
     id: root
 
-    // padding: Appearance.padding.large
+    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)
+    Repeater {
+        model: ScriptModel {
+            values: [...Notifs.list]
+        }
+
+        Notification {}
     }
 }
diff --git a/modules/notifications/Notification.qml b/modules/notifications/Notification.qml
new file mode 100644
index 0000000..a3fa171
--- /dev/null
+++ b/modules/notifications/Notification.qml
@@ -0,0 +1,188 @@
+pragma ComponentBehavior: Bound
+
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Effects
+
+StyledRect {
+    id: root
+
+    required property Notifs.Notif modelData
+    readonly property bool hasImage: modelData.image.length > 0
+    readonly property bool hasAppIcon: modelData.appIcon.length > 0
+    readonly property int imageSize: summary.height + bodyPreview.height
+    property bool expanded
+
+    color: Colours.palette.m3surfaceContainer
+    radius: Appearance.rounding.normal
+    implicitWidth: NotifsConfig.sizes.width
+
+    Item {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Appearance.padding.normal
+
+        implicitHeight: summary.height + bodyPreview.height + anchors.margins * 2
+
+        Loader {
+            id: image
+
+            active: root.hasImage
+            asynchronous: true
+
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -parent.anchors.margins
+            width: root.hasImage || root.hasAppIcon ? root.imageSize : 0
+            height: root.hasImage || root.hasAppIcon ? root.imageSize : 0
+            visible: root.hasImage || root.hasAppIcon
+
+            sourceComponent: ClippingRectangle {
+                radius: Appearance.rounding.full
+                width: root.imageSize
+                height: root.imageSize
+
+                Image {
+                    anchors.fill: parent
+                    source: Qt.resolvedUrl(root.modelData.image)
+                    fillMode: Image.PreserveAspectCrop
+                    cache: false
+                    asynchronous: true
+                }
+            }
+
+            states: State {
+                name: "expanded"
+                when: root.expanded
+
+                AnchorChanges {
+                    anchors.verticalCenter: undefined
+                    anchors.top: image.parent.top
+                }
+            }
+        }
+
+        Loader {
+            id: appIcon
+
+            active: root.hasAppIcon
+            asynchronous: true
+
+            anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter
+            anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter
+            anchors.right: root.hasImage ? image.right : undefined
+            anchors.bottom: root.hasImage ? image.bottom : undefined
+
+            sourceComponent: StyledRect {
+                radius: Appearance.rounding.full
+                color: Colours.palette.m3tertiaryContainer
+                implicitWidth: root.hasImage ? NotifsConfig.sizes.badge : root.imageSize
+                implicitHeight: root.hasImage ? NotifsConfig.sizes.badge : root.imageSize
+
+                IconImage {
+                    id: icon
+
+                    anchors.centerIn: parent
+                    visible: false
+                    implicitSize: Math.round(parent.width * 0.6)
+                    source: Quickshell.iconPath(root.modelData.appIcon)
+                    asynchronous: true
+                }
+
+                Colouriser {
+                    anchors.fill: icon
+                    source: icon
+                    colorizationColor: Colours.palette.m3onTertiaryContainer
+                }
+            }
+
+            states: State {
+                name: "expanded"
+                when: !root.hasImage && root.expanded
+
+                AnchorChanges {
+                    anchors.verticalCenter: undefined
+                    anchors.top: image.parent.top
+                }
+            }
+        }
+
+        StyledText {
+            id: summary
+
+            anchors.top: parent.top
+            anchors.left: image.right
+            anchors.leftMargin: Appearance.spacing.small
+
+            text: root.modelData.summary
+            maximumLineCount: 1
+        }
+
+        StyledText {
+            id: timeSep
+
+            anchors.top: parent.top
+            anchors.left: summary.right
+            anchors.leftMargin: Appearance.spacing.small
+
+            text: "•"
+            color: Colours.palette.m3onSurfaceVariant
+            font.pointSize: Appearance.font.size.small
+        }
+
+        StyledText {
+            id: time
+
+            anchors.top: parent.top
+            anchors.left: timeSep.right
+            anchors.leftMargin: Appearance.spacing.small
+
+            animate: true
+            horizontalAlignment: Text.AlignLeft
+            text: root.modelData.timeStr
+            color: Colours.palette.m3onSurfaceVariant
+            font.pointSize: Appearance.font.size.small
+        }
+
+        StyledRect {
+            id: expandBtn
+
+            anchors.right: parent.right
+            anchors.top: parent.top
+
+            MaterialIcon {
+                animate: true
+                text: root.expanded ? "expand_less" : "expand_more"
+                font.pointSize: Appearance.font.size.smaller
+            }
+        }
+
+        StyledText {
+            id: bodyPreview
+
+            anchors.left: summary.left
+            anchors.right: expandBtn.left
+            anchors.top: summary.bottom
+            anchors.rightMargin: Appearance.spacing.small
+
+            text: bodyPreviewMetrics.elidedText
+            color: Colours.palette.m3onSurfaceVariant
+            font.pointSize: Appearance.font.size.small
+        }
+
+        TextMetrics {
+            id: bodyPreviewMetrics
+
+            text: root.modelData.body
+            font.family: bodyPreview.font.family
+            font.pointSize: bodyPreview.font.pointSize
+            elide: Text.ElideRight
+            elideWidth: bodyPreview.width
+        }
+    }
+}
diff --git a/modules/notifications/Notifications.qml b/modules/notifications/Notifications.qml
index 2c73802..fa01d33 100644
--- a/modules/notifications/Notifications.qml
+++ b/modules/notifications/Notifications.qml
@@ -12,14 +12,7 @@ Variants {
         id: root
 
         required property ShellScreen modelData
-        property bool osdVisible
-
-        Timer {
-            // running: true
-            repeat: true
-            interval: 2000
-            onTriggered: root.osdVisible = !root.osdVisible
-        }
+        property bool osdVisible: Notifs.list.length > 0
 
         LazyLoader {
             loading: true
@@ -38,7 +31,9 @@ Variants {
 
                 anchors.top: true
                 anchors.bottom: true
+                anchors.left: true
                 anchors.right: true
+
                 width: wrapper.width
                 height: wrapper.height