feat: add screen height to font functions in Config. Added actions, inline Reply and urgency to NotificationBody

.gitignore

@@ -3,3 +3,4 @@ Colors.qml
 modules/wlogout/scripts/helper.sh
 config/path/ConfigPath.qml
 config/path/WallpaperPath.qml
+modules/notification/assets/notification.ogg

config/Config.qml

@@ -20,6 +20,11 @@ QtObject {
     function font_size_small(spaceHeight) { return Math.floor(spaceHeight * 0.625) }
     function font_size_tiny(spaceHeight) { return Math.floor(spaceHeight * 0.4) }
 
+    function screen_height_to_font_tiny(screenHeight) {return Math.round(9 * screenHeight / 1080)}
+    function screen_height_to_font_small(screenHeight) {return Math.round(12 * screenHeight / 1080)}
+    function screen_height_to_font_medium(screenHeight) {return Math.round(16 * screenHeight / 1080)}
+    function screen_height_to_font_big(screenHeight) {return Math.round(22 * screenHeight / 1080)}
+
     readonly property int small_radius: 8
     readonly property int radius: 16
     function small_radius_fun(barHeight) { return Math.floor(barHeight / 8) }
@@ -69,4 +74,6 @@ QtObject {
 
         return maxWidth;
     }
+
+    property string debug: "Notification"
 }

install.sh

@@ -105,6 +105,15 @@ download \
   "$SCRIPT_DIR/modules/jl/assets/correct.svg" \
   "correct.svg"
 
+# ----------------------------
+# Sounds
+# ----------------------------
+
+download \
+  "https://raw.githubusercontent.com/akx/Notifications/master/OGG/Chord.ogg" \
+  "$SCRIPT_DIR/modules/notification/assets/notification.ogg" \
+  "notification.ogg"
+
 # ----------------------------
 # Nerd Font
 # ----------------------------

modules/bar/Bar.qml

@@ -73,6 +73,7 @@ PanelWindow {
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}
+            NotificationButton {}
             // AudioSource{}
             AudioSink{}
             Battery{}

modules/bar/states/Audio/DefaultSourceState.qml

@@ -7,20 +7,20 @@ import Quickshell.Services.Pipewire
 Item {
     id: root
 
-    PwObjectTracker {
-        objects: [ Pipewire.defaultAudioSource ]
-    }
-
     property var audioSource: Pipewire.defaultAudioSource
 
-    property bool exists: audioSource != null
+    property bool exists: audioSource != null && audioSource.ready
     property bool mute: audioSource?.audio?.muted ?? false
     property real volume: Math.round((audioSource?.audio?.volume ?? 0) * 1000) / 10
 
     property bool volumeChanged: false
 
+    PwObjectTracker {
+        objects: [ root.audioSource ]
+    }
+
 	Connections {
-		target: audioSource?.audio
+		target: root.audioSource?.audio
 
 		function onVolumeChanged() {
 			root.volumeChanged = true;

modules/bar/widgets/NotificationButton.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import "../../notification/notificationServer/"
+import "../../../config"
+
+MouseArea {
+    id: notificationButton
+    width: Math.max(bar.height, notificationText.width + Config.spacing)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+
+    onClicked: {
+        NotificationS.soundEnabled = !NotificationS.soundEnabled
+    }
+    
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: Config.radius_fun(notificationButton.height)
+
+        Text {
+            id: notificationText
+            anchors.centerIn: parent
+            // text: Quickshell.iconPath("discord") 
+            text: NotificationS.soundEnabled ? "󰂚" : "󰂛"
+            font.pixelSize: Config.bigIconSize(bar.height)
+            font.family: Config.font
+            color: Colors.secondaryContainer_fg
+        }
+
+        // Image{
+        //     id: iconImage
+        //     source: Quickshell.iconPath("discord")
+        //     width: Config.bigIconSize(notificationButton.height)
+        //     height: Config.bigIconSize(notificationButton.height)
+        // }
+    }
+}

modules/notification/Notification.qml

@@ -1,22 +1,31 @@
 import QtQuick
 import Quickshell
+import Quickshell.Hyprland
 import Quickshell.Services.Notifications
 import "../../config"
 import "./notificationServer"
 
 PanelWindow {
-    mask: Region {}
+    // mask: Region {}
 
     id: notificationWindow
 
+    focusable: true
+
     anchors.top: true
     anchors.left: true
 
-    implicitHeight: screen.height/6
+    // implicitHeight: screen.height/6
-    implicitWidth: screen.width/6
+    implicitHeight: contentHeight+(content.spacing*(notificationListModel.count-1))
+    implicitWidth: contentWidth
+
 
     color: "transparent"
 
+    ListModel {
+        id: notificationListModel
+    }
+
     Connections {
         target: NotificationS
 
@@ -24,18 +33,12 @@ PanelWindow {
             if (!NotificationS.correctMonitor(screen))
                 return
             if (NotificationS.correctMonitor(screen)) {
-                console.log("[Notification]: This notification belongs to me!", screen.x, screen.y)
+                Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: This notification belongs to me! ")
-                // currentNotifications.push(notification)
+                notificationListModel.append({notificationData: notification})
-                // currentNotifications = currentNotifications
-                currentNotification = notification
-                currentNotifications = currentNotifications.concat([notification])
             }
         }
     }
 
-    property var currentNotification: null
-    property var currentNotifications: []
-
     Rectangle {
         anchors.fill: parent
 
@@ -44,29 +47,59 @@ PanelWindow {
         color: "transparent"
 
         Column {
+            id: content
             anchors.fill: parent
-            anchors.margins: 10
+            spacing: -2
-            spacing: 5
 
             Repeater {
-                model: currentNotifications
+                id: notificationRepeater
+                model: notificationListModel
 
                 delegate: NotificationBody {
                     required property int index
+                    required property var notificationData
+                    screen: notificationWindow.screen
 
-                    notification: currentNotifications[index]
+                    notification: notificationData
-                    width: notificationWindow.width
+
+                    onDismissed: function(notification, dismiss) {
+                        const appName = notification.appName
+                        const id = notification.id
+                        const summary = notification.summary
+                        if (dismiss) {
+                            Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Dissmiss: " + appName + " " + id + " - " + summary)
+                            notification.dismiss()
+                            notificationListModel.remove(index)
+                        } else {
+                            Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Close: " + appName + " " + id + " - " + summary)
+                            notificationListModel.remove(index)
+                        }
+                    }
                 }
+                onItemAdded: updateContentSize()
+                onItemRemoved: updateContentSize()
             }
         }
     }
-    Component.onCompleted: {
-        console.log(
-            "[Notification]:",
-            NotificationS,
-            "notification:",
-            NotificationS.newestNotification
 
-        )
+    property real contentWidth: 0
+    property real contentHeight: 0
+
+    function updateContentSize() {
+        let width = 0
+        let height = 0
+
+        for (let i = 0; i < notificationRepeater.count; ++i) {
+            let item = notificationRepeater.itemAt(i)
+
+            if (item) {
+                width = Math.max(width, item.width)
+                height += item.height
+            }
+        }
+
+        contentWidth = width
+        contentHeight = height
+        Config.debug == "Notification" && console.log("[updateContentSize] contentWidth:", contentWidth, "contentHeight:", contentHeight)
     }
 }

modules/notification/NotificationBody.qml

@@ -1,69 +1,360 @@
 import QtQuick
 import Quickshell
 import "../../config"
+import QtQuick.Layouts
+import QtQuick.Controls
 
 Rectangle {
     id: root
 
+    //TODO: urgency, expireTimeoutText, ...
+
     required property var notification
+    required property var screen
+    property var urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0
 
+    property bool closing: false
 
-    Component.onCompleted: {
+    property real duration: ( notification.hasInlineReply ? 5000000000 : 1)
-        console.log(
+    //     notification.expireTimeout > 0 ? notification.expireTimeout :
-            "[NotificationBody]:",
+    //     urgency ? urgency * 2000 :
-            notification,
+    //     5000
-            "notification:",
+    // )
-            notification.appName
+
-        )
+    signal dismissed(var notification, bool dismiss)
+
+    implicitWidth: screen.width/7
+    // implicitHeight: screen.height/7
+    implicitHeight: contentRowRectangle.height+(notification.actions.length>0?actionRowRectangle.height:0)+(notification.hasInlineReply?inlineReplyRectangle.height:0)+progressBar.height
+
+    color: textBGColor
+    border.width: Config.border_width
+    border.color: textColor
+
+    property string textColor: urgency != 3 ? Colors.primary : Colors.tertiary
+    property string textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)
+
+    function closeNotification(dismiss){
+        if (closing) {
+            return
+        }
+        closing = true
+        root.dismissed(root.notification, dismiss)
     }
 
-    implicitWidth: parent ? parent.width : 300
+    MouseArea {
-    implicitHeight: content.implicitHeight + 20
+        id: mouseArea
-
-    color: "transparent"
-
-    border.width: Config.border_width
-    border.color: Colors.primary
-
-    Column {
-        id: content
-
         anchors.fill: parent
-        anchors.margins: 10
+        hoverEnabled: true
-
+        onClicked: {
-        spacing: 5
+            root.closeNotification(true)
-
+        }
-        Text {
+    }
+    Column {
+        id: contentColumn
+        anchors.fill: parent
+        spacing: 0
+        // spacing: Config.spacing
+        Rectangle{
+            id: contentRowRectangle
+            height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
             width: parent.width
+            color: "transparent"
+            border.width: Config.border_width
+            border.color: textColor
+            Row {
+                id: contentRow
+                anchors.fill: parent
+                anchors.margins: 10
+                spacing: Config.spacing*4
 
-            text: root.notification?.appName ?? ""
+                // Left side: icon + icon information
-            font.family: Config.font
+                Rectangle{
-            font.pixelSize: 18
+                    id: iconRectangle
-            color: Colors.primary
+                    width: childrenRect.width
+                    height: childrenRect.height
+                    color: "transparent"
+                    Column {
+                        id: iconColumn
+                        // height: Math.max(childrenRect.height, contentBodyColumn.height)
+                        width: 1.25*128
+                        spacing: Config.spacing
 
-            elide: Text.ElideRight
+                        Image {
+                            id: iconImage
+
+                            width: screen.width/30
+                            height: iconImage.width
+                            anchors.horizontalCenter: parent.horizontalCenter
+
+                            source: (
+                                notification.appIcon ? Quickshell.iconPath(notification.appIcon) :
+                                notification.image ? notification.image :
+                                Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) ? Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) :
+                                Quickshell.iconPath("notifications")
+                            )
+
+                            fillMode: Image.PreserveAspectFit
+                            asynchronous: true
+                        }
+
+                        Text {
+                            id: summaryText
+                            // height: implicitHeight + font.pixelSize + Config.spacing
+
+                            text: root.notification.summary
+                            visible: root.notification.summary ? true : false
+                            width: iconColumn.width
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
+                            color: textColor
+
+                            wrapMode: Text.Wrap
+                            horizontalAlignment: Text.AlignHCenter
+                        }
+                    }
+                }
+
+                // Right side: notification information
+                Rectangle{
+                    id: contentRectangle
+                    width: childrenRect.width
+                    height: childrenRect.height
+                    color: "transparent"
+                    Column {
+                        id: contentBodyColumn
+                        width: root.width - iconColumn.width
+                        spacing: Config.spacing
+
+                        Text {
+                            id: bodyText
+                            text: root.notification.body
+                            visible: root.notification.body ? true : false
+
+                            width: contentBodyColumn.width
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                            color: textColor
+                            wrapMode: Text.Wrap
+                        }
+                    }
+                }
+            }
         }
 
-        Text {
+        Rectangle{
-            width: parent.width
+            id: actionRowRectangle
+            width: root.width
+            height: Config.screen_height_to_font_tiny(screen.height)+2*Config.spacing
+            border.width: Config.border_width
+            border.color: textColor
+            color: "transparent"
+            visible: notification.actions.length > 0
+            Row{
+                id: actionsRow
+                spacing: Config.spacing
+                anchors.fill: parent
+                anchors.margins: Config.spacing
 
-            text: root.notification?.summary ?? ""
+                Repeater {
-            font.family: Config.font
+                    id: notificationActionRepeater
-            font.pixelSize: 22
+                    model: notification.actions
-            color: Colors.primary
 
-            wrapMode: Text.Wrap
+                    delegate: MouseArea{
+                        id: actionMouseArea
+                        width: actionsRow.width/notification.actions.length
+                        height: actionRectangle.height
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+
+                        Rectangle {
+                            id: actionRectangle
+                            width: parent.width
+                            height: actionRow.height
+                            color: actionMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                            border.color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                            border.width: Config.border_width
+                            radius: Config.radius_fun(actionRectangle.height)*2
+
+                            Row{
+                                id: actionRow
+                                width: childrenRect.width
+                                height: childrenRect.height
+                                anchors.centerIn: parent
+
+                                Image{
+                                    id: actionIcon
+                                    visible: notification.hasActionIcons
+                                }
+
+                                Text {
+                                    text: modelData.text
+                                    width: Math.min(actionRectangle.width - (actionIcon.visible ? actionIcon.width : 0), implicitWidth)
+                                    font.family: Config.font
+                                    font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                                    color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                }
+                            }
+                        }
+
+                        onClicked: {
+                            modelData.invoke()
+                            if (!notification.resident) {
+                                root.closeNotification(true)
+                            } else {
+                                root.closeNotification(false)
+                            }
+                        }
+                    }
+                }
+            }
         }
 
-        Text {
+        Rectangle {
-            width: parent.width
+            id: inlineReplyRectangle
+            width: root.width
+            height: Config.screen_height_to_font_small(screen.height)+2*Config.spacing
+            border.width: Config.border_width
+            border.color: textColor
+            color: "transparent"
+            visible: notification.hasInlineReply
 
-            text: root.notification?.body ?? ""
+            function sendReply(message) {
-            font.family: Config.font
+                console.log("BEFORE sendInlineReply", notification.id, notification.resident)
-            font.pixelSize: 16
+                notification.sendInlineReply(message)
-            color: Colors.primary
+                inlineReplyTextField.focus = false
+                console.log("AFTER sendInlineReply", notification.id)
 
-            wrapMode: Text.Wrap
+                if (!notification.resident) {
+                    root.closeNotification(true)
+                } else {
+                    root.closeNotification(false)
+                }
+            }
+
+            Row {
+                id: inlineReplyRow
+                spacing: Config.spacing
+                anchors.fill: parent
+                anchors.margins: Config.spacing
+                TextField {
+                    id: inlineReplyTextField
+                    width: parent.width - inlineReplyButtonMouseArea.width
+                    height: inlineReplyButtonText.height
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    placeholderText: notification.hints["x-kde-reply-placeholder-text"] != null ? notification.hints["x-kde-reply-placeholder-text"] : notification.inlineReplyPlaceholder
+                    placeholderTextColor: inlineReplyTextField.activeFocus ? Colors.secondary_fg : Colors.secondary
+                    font.family: Config.font
+                    leftPadding: Config.spacing
+
+                    background: Rectangle {
+                        radius: Config.radius
+                        color: inlineReplyTextField.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
+                        border.color: inlineReplyTextField.activeFocus ? Colors.tertiary : Colors.primary
+                        border.width: Config.border_width
+                    }
+
+                    onAccepted: {
+                        console.log("[NotificationBodyInlineReply]: Enter pressed:", inlineReplyTextField.text)
+                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
+                    }
+
+                }
+
+                MouseArea {
+                    id: inlineReplyButtonMouseArea
+                    width: inlineReplyButtonText.width + 2*Config.spacing
+                    height: inlineReplyButtonText.height
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    Rectangle {
+                        id: inlineReplyButtonRectangle
+                        width: inlineReplyButtonText.width + 2*Config.spacing
+                        height: inlineReplyButtonText.height
+                        color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                        border.color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                        border.width: Config.border_width
+                        radius: inlineReplyButtonRectangle.height*0.5
+                        Text {
+                            id: inlineReplyButtonText
+                            text: "SEND"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
+                            color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                            anchors.centerIn: parent
+                        }
+                    }
+                    onClicked: {
+                        console.log("[NotificationBodyInlineReply]: Pressed SEND:", inlineReplyTextField.text)
+                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
+                    }
+                }
+            }
+        }
+
+        // Timeout progress bar
+        Rectangle {
+            id: progressBar
+            // anchors.bottom: parent.bottom
+            // anchors.left: parent.left
+            height: Config.screen_height_to_font_tiny(screen.height)
+            color: textColor
+
+            property real progress: 1.0
+            width: parent.width * progress
+
+            NumberAnimation on progress {
+                id: anim
+                running: root.duration > 0
+                from: 1.0
+                to: 0.0
+                duration: root.duration 
+                paused: mouseArea.containsMouse
+
+                onFinished: root.closeNotification(false)
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if(Config.debug == "Notification"){
+            console.log("\x1b[31m[NotificationBody]:"+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.inlineReplyPlaceholder: " + notification.inlineReplyPlaceholder +"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.body: " + notification.body+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.lastGeneration: " + notification.lastGeneration+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.appName: " + notification.appName+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.image: " + notification.image+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.expireTimeout: " + notification.expireTimeout+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.resident: " + notification.resident+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.id: " + notification.id+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.actions: " + notification.actions+"\x1b[0m")
+            if (notification.actions != []) {
+                for (const notificationAction of notification.actions) {
+                    console.log("\x1b[31m\t"+"notification.actions: "+ notificationAction+"\x1b[0m")
+                    console.log("\x1b[31m\t"+"notification.actions.text: "+ notificationAction.text+"\x1b[0m")
+                    console.log("\x1b[31m\t"+"notification.actions.identifier: "+ notificationAction.identifier+"\x1b[0m")
+                }
+            }
+            console.log("\x1b[31m\t"+"notification.urgency: " + notification.urgency+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.appIcon: " + notification.appIcon + " | " + Quickshell.iconPath(notification.appIcon)+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.desktopEntry: " + notification.desktopEntry+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hints: " + notification.hints+"\x1b[0m")
+            for (const item of Object.keys(notification.hints)) {
+                console.log("\x1b[31m\t"+"notification.hints[\""+ item +"\"]: " + notification.hints[item]+"\x1b[0m")
+            }
+            console.log("\x1b[31m\t"+"notification.summary: " + notification.summary+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.transient: " + notification.transient+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hasInlineReply: " + notification.hasInlineReply+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hasActionIcons: " + notification.hasActionIcons+"\x1b[0m")
+            
+            console.log("\x1b[31m\t"+"image.source: " + iconImage.source+"\x1b[0m")
+            console.log("\x1b[31m\t"+"urgency: " + urgency+"\x1b[0m")
+            console.log("\x1b[31m\t"+"duration: " + duration+"\x1b[0m")
         }
     }
 }

modules/notification/notificationServer/NotificationServer.qml

@@ -2,15 +2,17 @@ pragma Singleton
 
 import QtQuick
 import Quickshell
+import Quickshell.Io
 import Quickshell.Hyprland
 import Quickshell.Services.Notifications
+import "../../../config"
 
 Item {
     id: notificationServerState
 
     property var focusedMonitor: null
     property var newestNotification: null
-    property var trackedNotifications: [] // TODO
+    property bool soundEnabled: true
 
     signal notificationReceived(var notification)
 
@@ -18,33 +20,79 @@ Item {
         return (Hyprland.monitorFor(screen) === focusedMonitor)
     }
 
-    NotificationServer {
+    Process {
-        id: notificationServer
+        id: notificationSound
-        onNotification: function(notification) {
+        command: ["pw-play", "--volume", "0.25", Config.configDir + "/modules/notification/assets/notification.ogg"]
-            if(notification.lastGeneration){
+        function play() {
-                console.log(
+            if (running)
-                    "[NotificationServer] Closing Notification:",
-                    notification.appName, notification.id, notification.summary, notification.body
-                )
-                notification.dismiss()
                 return
-            }
+            Config.debug == "Notification" && console.log(
-            notification.tracked = true
+                "[NotificationSound] Playing:", Config.configDir + "/modules/notification/assets/notification.ogg"
-            console.log(
-                "[NotificationServer] Notification received:",
-                notification.appName, notification.id, notification.summary, notification.body
             )
-            notificationReceived(notification)
+            notificationSound.startDetached()
-            Hyprland.refreshMonitors()
-            waitTimer.start()
         }
     }
 
-    Timer {
+    NotificationServer {
-        id: waitTimer
+        id: notificationServer
-        interval: 2000
+
-        repeat: false
+        actionsSupported: true
-        onTriggered: focusedMonitor = Hyprland.focusedMonitor
+        bodyHyperlinksSupported: true
+        bodyImagesSupported: true
+        actionIconsSupported: true
+        imageSupported: true
+        persistenceSupported: true
+        bodyMarkupSupported: true
+        inlineReplySupported: true
+
+        onNotification: function(notification) {
+            // if(notification.lastGeneration){
+            //     console.log(
+            //         "[NotificationServer] Closing Notification:",
+            //         notification.appName, notification.id, notification.summary, notification.body
+            //     )
+            //     notification.dismiss()
+            //     return
+            // }
+            notification.tracked = true
+            Config.debug == "Notification" && console.log(
+                "[NotificationServer] Notification received:",
+                notification.appName, notification.id, notification.summary, notification.body
+            )
+
+            let timer = notificationTimerComponent.createObject(
+                notificationServerState,
+                { notification: notification }
+            )
+
+            Hyprland.refreshMonitors()
+            timer.start()
+        }
     }
 
+    Component {
+        id: notificationTimerComponent
+
+        Timer {
+            required property var notification
+
+            interval: 2000
+            repeat: false
+
+            onTriggered: {
+                focusedMonitor = Hyprland.focusedMonitor
+                notificationReceived(notification)
+                if(!notification.lastGeneration && notificationServerState.soundEnabled){
+                    notificationSound.play()
+                }
+
+                // destroy()
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        focusedMonitor = Hyprland.focusedMonitor
+        Config.debug == "Notification" && console.log("[NotificationServer]: Component completed")
+    }
 }

modules/wlogout/WLogout.qml

@@ -62,7 +62,7 @@ Variants {
 			MouseArea {
 				anchors.fill: parent
 				onClicked: {
-					console.log("clicked ???, closing Wallpaper Picker")
+					console.log("clicked Background, closing Wallpaper Picker")
 					wlogoutLoader.active = false
 				}
 				GridLayout {

modules/wp/WallpaperPicker.qml

@@ -55,6 +55,7 @@ PanelWindow {
 
             color: "white"
             placeholderTextColor: "#888"
+            font.family: Config.font
 
             background: Rectangle {
 
@@ -67,7 +68,7 @@ PanelWindow {
             Keys.onReleased: (event) => {
                 if (event.key === Qt.Key_Escape) {
                     console.log("Escape pressed inside TextField")
-                    console.log("Pressed Escape, closing Wallpaper Picker")
+                    // console.log("Pressed Escape, closing Wallpaper Picker")
                     // wallpaperLoader.active = false
                     filterText.text = ""
                     filterText.focus = false
@@ -75,6 +76,13 @@ PanelWindow {
                     pickerScope.focus = true
                 }
             }
+            onAccepted: {
+                console.log("Enter pressed inside TextField")
+                filterText.text = ""
+                filterText.focus = false
+                event.accepted = true
+                pickerScope.focus = true
+            }
         }
 
         

shell.qml

@@ -40,4 +40,12 @@ ShellRoot {
     function openWlogout() {
         wlLoader.openWlogout()
     }
+
+    GlobalShortcut {
+        name: "QsReload"
+
+        onPressed: {
+            Quickshell.reload(false)
+        }
+    }
 }