waffles: popup notifs

dots/.config/quickshell/ii/modules/waffle/notificationCenter/WSingleNotification.qml

@@ -15,6 +15,9 @@ MouseArea {
     required property var notification
     property bool expanded: notification.actions.length > 0
     property string groupExpandControlMessage: ""
+
+    readonly property bool isPopup: notification?.popup ?? false
+
     signal groupExpandToggle
     hoverEnabled: true
 
@@ -56,8 +59,8 @@ MouseArea {
     Rectangle {
         id: contentItem
         width: parent.width
-        color: Looks.colors.bgPanelBody
-        radius: Looks.radius.medium
+        color: root.isPopup ? Looks.colors.bg0 : Looks.colors.bgPanelBody
+        radius: root.isPopup ? Looks.radius.large : Looks.radius.medium
         property real padding: 12
         implicitHeight: notificationContent.implicitHeight + padding * 2
         implicitWidth: notificationContent.implicitWidth + padding * 2
@@ -157,9 +160,9 @@ MouseArea {
 
         NotificationHeaderButton {
             Layout.rightMargin: 4
-            opacity: root.containsMouse ? 1 : 0
+            opacity: (root.containsMouse || root.isPopup) ? 1 : 0
             icon.name: "dismiss"
-            implicitSize: 12
+            implicitSize: 14
             onClicked: root.dismiss()
         }
     }

dots/.config/quickshell/ii/modules/waffle/notificationPopup/WaffleNotificationPopup.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.notificationCenter
+
+Scope {
+    id: notificationPopup
+
+    PanelWindow {
+        id: root
+        visible: (Notifications.popupList.length > 0) && !GlobalStates.screenLocked
+        screen: Quickshell.screens.find(s => s.name === Hyprland.focusedMonitor?.name) ?? null
+
+        WlrLayershell.namespace: "quickshell:notificationPopup"
+        WlrLayershell.layer: WlrLayer.Overlay
+        exclusiveZone: 0
+
+        anchors {
+            top: true
+            right: true
+            bottom: true
+        }
+
+        mask: Region {
+            item: listview.contentItem
+        }
+
+        color: "transparent"
+        implicitWidth: listview.implicitWidth
+
+        WListView {
+            id: listview
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+                left: parent.left
+            }
+            leftMargin: 16
+            rightMargin: 16
+            topMargin: 16
+            bottomMargin: 16
+
+            height: Math.min(contentItem.height + topMargin + bottomMargin, parent.height)
+            width: parent.width - Appearance.sizes.elevationMargin * 2
+            
+            implicitWidth: 396
+            spacing:12
+
+            model: ScriptModel {
+                values: Notifications.popupList
+            }
+            delegate: WSingleNotification {
+                required property var modelData
+                notification: modelData
+                width: ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/services/Notifications.qml

@@ -135,8 +135,8 @@ Singleton {
 
     property var groupsByAppName: groupsForList(root.list)
     property var popupGroupsByAppName: groupsForList(root.popupList)
-    property var appNameList: appNameListForGroups(root.groupsByAppName)
-    property var popupAppNameList: appNameListForGroups(root.popupGroupsByAppName)
+    property list<string> appNameList: appNameListForGroups(root.groupsByAppName)
+    property list<string> popupAppNameList: appNameListForGroups(root.popupGroupsByAppName)
 
     // Quickshell's notification IDs starts at 1 on each run, while saved notifications
     // can already contain higher IDs. This is for avoiding id collisions

dots/.config/quickshell/ii/shell.qml

@@ -32,6 +32,7 @@ import qs.modules.waffle.background
 import qs.modules.waffle.bar
 import qs.modules.waffle.lock
 import qs.modules.waffle.notificationCenter
+import qs.modules.waffle.notificationPopup
 import qs.modules.waffle.onScreenDisplay
 import qs.modules.waffle.polkit
 import qs.modules.waffle.screenSnip
@@ -88,6 +89,7 @@ ShellRoot {
     PanelLoader { identifier: "wBackground"; component: WaffleBackground {} }
     PanelLoader { identifier: "wLock"; component: WaffleLock {} }
     PanelLoader { identifier: "wNotificationCenter"; component: WaffleNotificationCenter {} }
+    PanelLoader { identifier: "wNotificationPopup"; component: WaffleNotificationPopup {} }
     PanelLoader { identifier: "wOnScreenDisplay"; component: WaffleOSD {} }
     PanelLoader { identifier: "wPolkit"; component: WafflePolkit {} }
     PanelLoader { identifier: "wScreenSnip"; component: WScreenSnip {} }
@@ -106,7 +108,7 @@ ShellRoot {
     property list<string> families: ["ii", "waffle"]
     property var panelFamilies: ({
         "ii": ["iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"],
-        "waffle": ["wActionCenter", "wBar", "wBackground", "wLock", "wNotificationCenter", "wOnScreenDisplay", "wTaskView", "wPolkit", "wScreenSnip", "wSessionScreen", "wStartMenu", "iiCheatsheet", "iiNotificationPopup", "iiOnScreenKeyboard", "iiOverlay", "iiWallpaperSelector"],
+        "waffle": ["wActionCenter", "wBar", "wBackground", "wLock", "wNotificationCenter", "wNotificationPopup", "wOnScreenDisplay", "wTaskView", "wPolkit", "wScreenSnip", "wSessionScreen", "wStartMenu", "iiCheatsheet", "iiOnScreenKeyboard", "iiOverlay", "iiWallpaperSelector"],
     })
     function cyclePanelFamily() {
         const currentIndex = families.indexOf(Config.options.panelFamily)