notifs/toasts: reworked notifications and toasts and how they display and work together. see pull request comment.

3 files changed, 135 insertions, 0 deletions

diff --git a/modules/drawers/Drawers.qml b/modules/drawers/Drawers.qml
index 2ba79a4..5337917 100644
--- a/modules/drawers/Drawers.qml
+++ b/modules/drawers/Drawers.qml
@@ -140,6 +140,7 @@ Variants {
                 property bool dashboard
                 property bool utilities
                 property bool sidebar
+                property bool notifications
 
                 Component.onCompleted: Visibilities.load(scope.modelData, this)
             }
diff --git a/modules/drawers/Interactions.qml b/modules/drawers/Interactions.qml
index 9579b15..10190a4 100644
--- a/modules/drawers/Interactions.qml
+++ b/modules/drawers/Interactions.qml
@@ -198,6 +198,52 @@ CustomMouseArea {
             utilitiesShortcutActive = false;
         }
 
+        // Show notifications panel on hover
+        // Try using inTopPanel first (works when panel is visible), fallback to corner detection only when panel is collapsed
+        const panelHeight = panels.notifications.height || panels.notifications.implicitHeight || 0;
+        const panelWidth = panels.notifications.width || panels.notifications.implicitWidth || Config.notifs.sizes.width;
+        const panelX = bar.implicitWidth + panels.notifications.x;
+        const isPanelCollapsed = panelHeight < 10; // Consider collapsed if height is very small
+        
+        let showNotifications = inTopPanel(panels.notifications, x, y);
+        
+        // Only use fallback corner detection when panel is collapsed
+        if (!showNotifications && isPanelCollapsed) {
+            // Use panel's actual width and position for fallback, with some padding
+            const cornerPadding = Config.border.rounding || 20;
+            showNotifications = x >= panelX - cornerPadding && 
+                               x <= panelX + panelWidth + cornerPadding && 
+                               y < Config.border.thickness + cornerPadding;
+        }
+        
+        // Check if mouse is over the clear all button area
+        // Button is positioned to the left of the notification panel
+        if (!showNotifications && panels.notifications.height > 0 && panels.clearAllButton && panels.clearAllButton.visible) {
+            const buttonX = bar.implicitWidth + panels.clearAllButton.x;
+            const buttonY = Config.border.thickness + panels.clearAllButton.y;
+            const buttonWidth = panels.clearAllButton.width;
+            const buttonHeight = panels.clearAllButton.height;
+            
+            const inButtonArea = x >= buttonX && 
+                                x <= buttonX + buttonWidth && 
+                                y >= buttonY && 
+                                y <= buttonY + buttonHeight;
+            
+            if (inButtonArea) {
+                showNotifications = true;
+            }
+        }
+        
+        // Show or hide notification panel based on hover
+        if (panels.notifications.content) {
+            if (showNotifications) {
+                panels.notifications.content.show();
+            } else {
+                // Hide if not hovering over panel or button
+                panels.notifications.content.shouldShow = false;
+            }
+        }
+
         // Show popouts on hover
         if (x < bar.implicitWidth) {
             bar.checkPopout(y);
diff --git a/modules/drawers/Panels.qml b/modules/drawers/Panels.qml
index 4ce1182..8b5a251 100644
--- a/modules/drawers/Panels.qml
+++ b/modules/drawers/Panels.qml
@@ -8,6 +8,10 @@ import qs.modules.bar.popouts as BarPopouts
 import qs.modules.utilities as Utilities
 import qs.modules.utilities.toasts as Toasts
 import qs.modules.sidebar as Sidebar
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.services
 import Quickshell
 import QtQuick
 
@@ -27,6 +31,7 @@ Item {
     readonly property alias utilities: utilities
     readonly property alias toasts: toasts
     readonly property alias sidebar: sidebar
+    readonly property alias clearAllButton: clearAllButton
 
     anchors.fill: parent
     anchors.margins: Config.border.thickness
@@ -54,6 +59,89 @@ Item {
         anchors.right: parent.right
     }
 
+    // Clear all notifications button - positioned to the left of the notification panel
+    Item {
+        id: clearAllButton
+
+        readonly property bool hasNotifications: Notifs.notClosed.length > 0
+        readonly property bool panelVisible: notifications.height > 0 || notifications.implicitHeight > 0
+        readonly property bool shouldShow: hasNotifications && panelVisible
+
+        anchors.top: notifications.top
+        anchors.right: notifications.left
+        anchors.rightMargin: Appearance.padding.normal
+        anchors.topMargin: Appearance.padding.large
+
+        width: button.implicitWidth
+        height: button.implicitHeight
+        enabled: shouldShow
+
+        IconButton {
+            id: button
+
+            icon: "clear_all"
+            radius: Appearance.rounding.normal
+            padding: Appearance.padding.normal
+            font.pointSize: Math.round(Appearance.font.size.large * 1.2)
+
+            onClicked: {
+                // Clear all notifications
+                for (const notif of Notifs.list.slice())
+                    notif.close();
+            }
+
+            Elevation {
+                anchors.fill: parent
+                radius: parent.radius
+                z: -1
+                level: button.stateLayer.containsMouse ? 4 : 3
+            }
+        }
+
+        // Keep notification panel visible when hovering over the button
+        MouseArea {
+            anchors.fill: button
+            hoverEnabled: true
+            acceptedButtons: Qt.NoButton
+            onEntered: {
+                if (notifications.content && Notifs.notClosed.length > 0) {
+                    notifications.content.show();
+                }
+            }
+            onExited: {
+                // Panel will be hidden by Interactions.qml if mouse is not over panel or button
+            }
+        }
+
+        Behavior on opacity {
+            Anim {
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+            }
+        }
+
+        Behavior on scale {
+            Anim {
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+            }
+        }
+
+        opacity: shouldShow ? 1 : 0
+        scale: shouldShow ? 1 : 0.5
+    }
+
+    Notifications.NotificationToasts {
+        id: notificationToasts
+
+        panels: root
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: Config.border.thickness
+        anchors.rightMargin: Config.border.thickness
+    }
+
     Session.Wrapper {
         id: session