stash n otifs

Modules/Notifications/Center/KeyboardNavigatedNotificationList.qml

@@ -0,0 +1,124 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+DankListView {
+    id: listView
+    
+    property var keyboardController: null
+    property bool enableKeyboardNavigation: false
+    property int currentSelectedGroupIndex: -1
+    property bool keyboardActive: false
+    
+    
+    // Compatibility aliases for NotificationList
+    property alias count: listView.count
+    property alias listContentHeight: listView.contentHeight
+    
+    clip: true
+    model: NotificationService.groupedNotifications
+    spacing: Theme.spacingL
+    
+    NotificationEmptyState {
+        visible: listView.count === 0
+        anchors.centerIn: parent
+    }
+    
+    // Override position restoration during keyboard nav
+    onModelChanged: {
+        if (keyboardController && keyboardController.keyboardNavigationActive) {
+            // Preserve scroll position during model updates
+            Qt.callLater(function() {
+                if (keyboardController && keyboardController.keyboardNavigationActive) {
+                    keyboardController.ensureVisible()
+                }
+            })
+        }
+    }
+    
+    delegate: Item {
+        required property var modelData
+        required property int index
+        
+        readonly property bool isExpanded: NotificationService.expandedGroups[modelData?.key] || false
+        readonly property bool isHighlighted: {
+            if (!keyboardController) return false
+            keyboardController.selectionVersion // Trigger re-evaluation
+            if (!listView.keyboardActive) return false
+            const selection = keyboardController.getCurrentSelection()
+            return selection.type === "group" && selection.groupIndex === index
+        }
+        
+        width: ListView.view.width
+        height: notificationCardWrapper.height
+        
+        Item {
+            id: notificationCardWrapper
+            width: parent.width
+            height: notificationCard.height
+            
+            NotificationCard {
+                id: notificationCard
+                width: parent.width
+                notificationGroup: modelData
+                
+                isGroupSelected: {
+                    // Force re-evaluation when selection changes
+                    if (!keyboardController) return false
+                    keyboardController.selectionVersion // Trigger re-evaluation
+                    if (!listView.keyboardActive) return false
+                    const selection = keyboardController.getCurrentSelection()
+                    console.log("isGroupSelected check for index", index, "selection:", JSON.stringify(selection))
+                    return selection.type === "group" && selection.groupIndex === index
+                }
+                selectedNotificationIndex: {
+                    // Force re-evaluation when selection changes
+                    if (!keyboardController) return -1
+                    keyboardController.selectionVersion // Trigger re-evaluation
+                    if (!listView.keyboardActive) return -1
+                    const selection = keyboardController.getCurrentSelection()
+                    return (selection.type === "notification" && selection.groupIndex === index) 
+                           ? selection.notificationIndex : -1
+                }
+                keyboardNavigationActive: listView.keyboardActive
+            }
+            
+            // Group-level overlay only for collapsed groups when selected
+            Rectangle {
+                anchors.fill: parent
+                visible: {
+                    if (!isHighlighted) return false
+                    if (!keyboardController) return false
+                    const selection = keyboardController.getCurrentSelection()
+                    // Only show group overlay when selecting collapsed groups
+                    return selection.type === "group" && (!modelData || !NotificationService.expandedGroups[modelData.key])
+                }
+                
+                color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
+                border.color: Theme.primary
+                border.width: 2
+                radius: Theme.cornerRadius
+                z: 10
+            }
+        }
+        
+    }
+    
+
+    // Connect to notification changes and rebuild navigation
+    Connections {
+        function onGroupedNotificationsChanged() {
+            if (keyboardController) {
+                if (keyboardController.isTogglingGroup) {
+                    keyboardController.rebuildFlatNavigation()
+                    return
+                }
+                
+                keyboardController.rebuildFlatNavigation()
+            }
+        }
+        target: NotificationService
+    }
+    
+}

Modules/Notifications/Center/NotificationCard.qml

@@ -16,6 +16,11 @@ Rectangle {
   property bool descriptionExpanded: NotificationService.expandedMessages[notificationGroup?.latestNotification?.notification?.id + "_desc"]
                                      || false
   property bool userInitiatedExpansion: false
+  
+  // Selection properties for keyboard navigation
+  property bool isGroupSelected: false
+  property int selectedNotificationIndex: -1
+  property bool keyboardNavigationActive: false
 
   width: parent ? parent.width : 400
   height: {
@@ -308,8 +313,10 @@ Rectangle {
 
         delegate: Rectangle {
           required property var modelData
+          required property int index
           readonly property bool messageExpanded: NotificationService.expandedMessages[modelData?.notification?.id]
                                                   || false
+          readonly property bool isSelected: root.selectedNotificationIndex === index
 
           width: parent.width
           height: {
@@ -324,10 +331,9 @@ Rectangle {
             return baseHeight
           }
           radius: Theme.cornerRadius
-          color: "transparent"
-          border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                                Theme.outline.b, 0.05)
-          border.width: 1
+          color: isSelected ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15) : "transparent"
+          border.color: isSelected ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+          border.width: isSelected ? 2 : 1
 
           Behavior on height {
             enabled: false
@@ -498,7 +504,13 @@ Rectangle {
 
                       StyledText {
                         id: actionText
-                        text: modelData.text || ""
+                        text: {
+                          const baseText = modelData.text || ""
+                          if (keyboardNavigationActive && (isGroupSelected || selectedNotificationIndex >= 0)) {
+                            return `${baseText} (${index + 1})`
+                          }
+                          return baseText
+                        }
                         color: parent.isHovered ? Theme.primary : Theme.surfaceVariantText
                         font.pixelSize: Theme.fontSizeSmall
                         font.weight: Font.Medium
@@ -582,7 +594,13 @@ Rectangle {
 
         StyledText {
           id: actionText
-          text: modelData.text || ""
+          text: {
+            const baseText = modelData.text || ""
+            if (keyboardNavigationActive && isGroupSelected) {
+              return `${baseText} (${index + 1})`
+            }
+            return baseText
+          }
           color: parent.isHovered ? Theme.primary : Theme.surfaceVariantText
           font.pixelSize: Theme.fontSizeSmall
           font.weight: Font.Medium

Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -7,6 +7,7 @@ import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.Widgets
+import qs.Modules.Notifications.Center
 
 PanelWindow {
   id: root
@@ -16,6 +17,25 @@ PanelWindow {
   property real triggerY: Theme.barHeight + Theme.spacingXS
   property real triggerWidth: 40
   property string triggerSection: "right"
+  
+  // Keyboard navigation controller
+  NotificationKeyboardController {
+    id: keyboardController
+    listView: null  // Set later to avoid binding loop
+    isOpen: notificationHistoryVisible
+    onClose: function() { notificationHistoryVisible = false }
+  }
+  
+  // Keyboard hints overlay  
+  NotificationKeyboardHints {
+    id: keyboardHints
+    anchors.bottom: mainRect.bottom
+    anchors.left: mainRect.left
+    anchors.right: mainRect.right
+    anchors.margins: Theme.spacingL
+    showHints: keyboardController.showKeyboardHints
+    z: 200
+  }
 
   function setTriggerPosition(x, y, width, section) {
     triggerX = x
@@ -114,12 +134,7 @@ PanelWindow {
         if (notificationHistoryVisible)
           forceActiveFocus()
       }
-      Keys.onPressed: function (event) {
-        if (event.key === Qt.Key_Escape) {
-          notificationHistoryVisible = false
-          event.accepted = true
-        }
-      }
+      Keys.onPressed: keyboardController.handleKey
 
       Connections {
         function onNotificationHistoryVisibleChanged() {
@@ -137,11 +152,20 @@ PanelWindow {
         id: notificationHeader
       }
 
-      NotificationList {
+      KeyboardNavigatedNotificationList {
         id: notificationList
 
         width: parent.width
         height: parent.height - notificationHeader.height - contentColumn.spacing
+        // keyboardController set via Component.onCompleted to avoid binding loop
+        enableKeyboardNavigation: true
+        
+        Component.onCompleted: {
+          if (keyboardController && notificationList) {
+            keyboardController.listView = notificationList
+            notificationList.keyboardController = keyboardController
+          }
+        }
       }
     }
 

Modules/Notifications/Center/NotificationKeyboardController.qml

@@ -0,0 +1,456 @@
+import QtQuick
+import qs.Common
+import qs.Services
+
+QtObject {
+    id: controller
+    
+    // Properties that need to be set by parent
+    property var listView: null
+    property bool isOpen: false
+    property var onClose: null  // Function to call when closing
+    
+    // Property that changes to trigger binding updates
+    property int selectionVersion: 0
+    
+    // Keyboard navigation state
+    property bool keyboardNavigationActive: false
+    property int selectedFlatIndex: 0
+    property var flatNavigation: []
+    property int flatNavigationVersion: 0  // For triggering bindings
+    property bool showKeyboardHints: false
+    
+    // Track selection by ID for position preservation
+    property string selectedNotificationId: ""
+    property string selectedGroupKey: ""
+    property string selectedItemType: ""
+    property bool isTogglingGroup: false
+    property bool isRebuilding: false
+    
+    // Build flat navigation array
+    function rebuildFlatNavigation() {
+        isRebuilding = true
+        
+        var nav = []
+        var groups = NotificationService.groupedNotifications
+        console.log("rebuildFlatNavigation: groups.length:", groups.length)
+        
+        for (var i = 0; i < groups.length; i++) {
+            var group = groups[i]
+            var isExpanded = NotificationService.expandedGroups[group.key] || false
+            
+            // Add the group itself
+            nav.push({
+                type: "group",
+                groupIndex: i,
+                notificationIndex: -1,
+                groupKey: group.key,
+                notificationId: ""
+            })
+            
+            // If expanded, add individual notifications
+            if (isExpanded) {
+                var notifications = group.notifications || []
+                for (var j = 0; j < notifications.length; j++) {
+                    var notifId = String(notifications[j]?.notification?.id || "")
+                    nav.push({
+                        type: "notification",
+                        groupIndex: i,
+                        notificationIndex: j,
+                        groupKey: group.key,
+                        notificationId: notifId
+                    })
+                }
+            }
+        }
+        
+        flatNavigation = nav
+        console.log("rebuildFlatNavigation: nav.length:", nav.length, "selectedFlatIndex:", selectedFlatIndex)
+        // Highlight is now handled by NotificationCard properties
+        updateSelectedIndexFromId()
+        isRebuilding = false
+    }
+    
+    function updateSelectedIndexFromId() {
+        if (!keyboardNavigationActive) return
+        
+        // Find the index that matches our selected ID/key
+        for (var i = 0; i < flatNavigation.length; i++) {
+            var item = flatNavigation[i]
+            
+            if (selectedItemType === "group" && item.type === "group" && item.groupKey === selectedGroupKey) {
+                selectedFlatIndex = i
+                return
+            } else if (selectedItemType === "notification" && item.type === "notification" && String(item.notificationId) === String(selectedNotificationId)) {
+                selectedFlatIndex = i
+                return
+            }
+        }
+        
+        // If not found, default to first item
+        selectedFlatIndex = 0
+        updateSelectedIdFromIndex()
+    }
+    
+    function updateSelectedIdFromIndex() {
+        if (selectedFlatIndex >= 0 && selectedFlatIndex < flatNavigation.length) {
+            var item = flatNavigation[selectedFlatIndex]
+            selectedItemType = item.type
+            selectedGroupKey = item.groupKey
+            selectedNotificationId = item.notificationId
+        }
+    }
+    
+    function reset() {
+        selectedFlatIndex = 0
+        keyboardNavigationActive = false
+        showKeyboardHints = false
+        // Reset keyboardActive when modal is reset
+        if (listView) {
+            listView.keyboardActive = false
+        }
+        rebuildFlatNavigation()
+    }
+    
+    function selectNext() {
+        keyboardNavigationActive = true
+        if (flatNavigation.length === 0) return
+        
+        console.log("selectNext: before -", selectedFlatIndex, "flatNav.length:", flatNavigation.length)
+        selectedFlatIndex = Math.min(selectedFlatIndex + 1, flatNavigation.length - 1)
+        updateSelectedIdFromIndex()
+        console.log("selectNext: after -", selectedFlatIndex)
+        selectionVersion++
+        ensureVisible()
+    }
+    
+    function selectPrevious() {
+        keyboardNavigationActive = true
+        if (flatNavigation.length === 0) return
+        
+        selectedFlatIndex = Math.max(selectedFlatIndex - 1, 0)
+        updateSelectedIdFromIndex()
+        selectionVersion++
+        ensureVisible()
+    }
+    
+    function toggleGroupExpanded() {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        const groups = NotificationService.groupedNotifications
+        const group = groups[currentItem.groupIndex]
+        if (!group) return
+        
+        // Prevent expanding groups with < 2 notifications
+        const notificationCount = group.notifications ? group.notifications.length : 0
+        if (notificationCount < 2) return
+        
+        const wasExpanded = NotificationService.expandedGroups[group.key] || false
+        const groupIndex = currentItem.groupIndex
+        
+        isTogglingGroup = true
+        NotificationService.toggleGroupExpansion(group.key)
+        rebuildFlatNavigation()
+        
+        // Smart selection after toggle
+        if (!wasExpanded) {
+            // Just expanded - move to first notification in the group
+            for (let i = 0; i < flatNavigation.length; i++) {
+                if (flatNavigation[i].type === "notification" && flatNavigation[i].groupIndex === groupIndex) {
+                    selectedFlatIndex = i
+                    break
+                }
+            }
+        } else {
+            // Just collapsed - stay on the group header
+            for (let i = 0; i < flatNavigation.length; i++) {
+                if (flatNavigation[i].type === "group" && flatNavigation[i].groupIndex === groupIndex) {
+                    selectedFlatIndex = i
+                    break
+                }
+            }
+        }
+        
+        isTogglingGroup = false
+        ensureVisible()
+    }
+    
+    function handleEnterKey() {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        const groups = NotificationService.groupedNotifications
+        const group = groups[currentItem.groupIndex]
+        if (!group) return
+        
+        if (currentItem.type === "group") {
+            // On group: expand/collapse the group (only if it has > 1 notification)
+            const notificationCount = group.notifications ? group.notifications.length : 0
+            if (notificationCount >= 2) {
+                toggleGroupExpanded()
+            }
+        } else if (currentItem.type === "notification") {
+            // On individual notification: execute first action if available
+            const notification = group.notifications[currentItem.notificationIndex]
+            const actions = notification?.actions || []
+            if (actions.length > 0) {
+                executeAction(0)
+            }
+        }
+    }
+    
+    function toggleTextExpanded() {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        const groups = NotificationService.groupedNotifications
+        const group = groups[currentItem.groupIndex]
+        if (!group) return
+        
+        var messageId = ""
+        
+        if (currentItem.type === "group") {
+            messageId = group.latestNotification?.notification?.id + "_desc"
+        } else if (currentItem.type === "notification" && currentItem.notificationIndex >= 0 && currentItem.notificationIndex < group.notifications.length) {
+            messageId = group.notifications[currentItem.notificationIndex]?.notification?.id + "_desc"
+        }
+        
+        if (messageId) {
+            NotificationService.toggleMessageExpansion(messageId)
+        }
+    }
+    
+    function executeAction(actionIndex) {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        const groups = NotificationService.groupedNotifications
+        const group = groups[currentItem.groupIndex]
+        if (!group) return
+        
+        var actions = []
+        
+        if (currentItem.type === "group") {
+            actions = group.latestNotification?.actions || []
+        } else if (currentItem.type === "notification" && currentItem.notificationIndex >= 0 && currentItem.notificationIndex < group.notifications.length) {
+            actions = group.notifications[currentItem.notificationIndex]?.actions || []
+        }
+        
+        if (actionIndex >= 0 && actionIndex < actions.length) {
+            const action = actions[actionIndex]
+            if (action.invoke) {
+                action.invoke()
+                if (onClose) onClose()
+            }
+        }
+    }
+    
+    function clearSelected() {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        const groups = NotificationService.groupedNotifications
+        const group = groups[currentItem.groupIndex]
+        if (!group) return
+        
+        // Save current state for smart navigation
+        const currentGroupKey = group.key
+        const isNotification = currentItem.type === "notification"
+        const notificationIndex = currentItem.notificationIndex
+        const totalNotificationsInGroup = group.notifications ? group.notifications.length : 0
+        const isLastNotificationInGroup = isNotification && totalNotificationsInGroup === 1
+        const isLastNotificationInList = isNotification && notificationIndex === totalNotificationsInGroup - 1
+        
+        // Store what to select next BEFORE clearing
+        let nextTargetType = ""
+        let nextTargetGroupKey = ""
+        let nextTargetNotificationIndex = -1
+        
+        if (currentItem.type === "group") {
+            NotificationService.dismissGroup(group.key)
+            
+            // Look for next group
+            for (let i = currentItem.groupIndex + 1; i < groups.length; i++) {
+                nextTargetType = "group"
+                nextTargetGroupKey = groups[i].key
+                break
+            }
+            
+            if (!nextTargetGroupKey && currentItem.groupIndex > 0) {
+                nextTargetType = "group"
+                nextTargetGroupKey = groups[currentItem.groupIndex - 1].key
+            }
+            
+        } else if (isNotification) {
+            const notification = group.notifications[notificationIndex]
+            NotificationService.dismissNotification(notification)
+            
+            if (isLastNotificationInGroup) {
+                for (let i = currentItem.groupIndex + 1; i < groups.length; i++) {
+                    nextTargetType = "group"
+                    nextTargetGroupKey = groups[i].key
+                    break
+                }
+                
+                if (!nextTargetGroupKey && currentItem.groupIndex > 0) {
+                    nextTargetType = "group"
+                    nextTargetGroupKey = groups[currentItem.groupIndex - 1].key
+                }
+            } else if (isLastNotificationInList) {
+                nextTargetType = "group"
+                nextTargetGroupKey = currentGroupKey
+                nextTargetNotificationIndex = -1
+            } else {
+                nextTargetType = "notification"
+                nextTargetGroupKey = currentGroupKey
+                nextTargetNotificationIndex = notificationIndex
+            }
+        }
+        
+        rebuildFlatNavigation()
+        
+        // Find and select the target we identified
+        if (flatNavigation.length === 0) {
+            selectedFlatIndex = 0
+            updateSelectedIdFromIndex()
+        } else if (nextTargetGroupKey) {
+            let found = false
+            for (let i = 0; i < flatNavigation.length; i++) {
+                const item = flatNavigation[i]
+                
+                if (nextTargetType === "group" && item.type === "group" && item.groupKey === nextTargetGroupKey) {
+                    selectedFlatIndex = i
+                    found = true
+                    break
+                } else if (nextTargetType === "notification" && item.type === "notification" && 
+                          item.groupKey === nextTargetGroupKey && item.notificationIndex === nextTargetNotificationIndex) {
+                    selectedFlatIndex = i
+                    found = true
+                    break
+                }
+            }
+            
+            if (!found) {
+                selectedFlatIndex = Math.min(selectedFlatIndex, flatNavigation.length - 1)
+            }
+            
+            updateSelectedIdFromIndex()
+        } else {
+            selectedFlatIndex = Math.min(selectedFlatIndex, flatNavigation.length - 1)
+            updateSelectedIdFromIndex()
+        }
+        
+        ensureVisible()
+    }
+    
+    function ensureVisible() {
+        if (flatNavigation.length === 0 || selectedFlatIndex >= flatNavigation.length || !listView) return
+        
+        const currentItem = flatNavigation[selectedFlatIndex]
+        
+        if (keyboardNavigationActive && currentItem && currentItem.groupIndex >= 0) {
+            // For individual notifications in expanded groups, we still position based on the group
+            // but we need to ensure the notification is visible within that group
+            if (currentItem.type === "notification") {
+                // Position at the group containing the selected notification
+                listView.positionViewAtIndex(currentItem.groupIndex, ListView.Contain)
+            } else {
+                // For group headers, center on the group
+                listView.positionViewAtIndex(currentItem.groupIndex, ListView.Center)
+            }
+        }
+    }
+    
+    function handleKey(event) {
+        console.log("HANDLEKEY CALLED:", event.key)
+        if (event.key === Qt.Key_Escape) {
+            if (keyboardNavigationActive) {
+                keyboardNavigationActive = false
+                event.accepted = true
+            } else {
+                if (onClose) onClose()
+                event.accepted = true
+            }
+        } else if (event.key === Qt.Key_Down || event.key === 16777237) {
+            console.log("DOWN KEY DETECTED")
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                // Set keyboardActive on listView to show highlight
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                // Initial selection is now handled by NotificationCard properties
+                selectionVersion++
+                ensureVisible()
+                event.accepted = true
+            } else {
+                selectNext()
+                event.accepted = true
+            }
+        } else if (event.key === Qt.Key_Up || event.key === 16777235) {
+            console.log("UP KEY DETECTED")
+            if (!keyboardNavigationActive) {
+                keyboardNavigationActive = true
+                selectedFlatIndex = 0
+                updateSelectedIdFromIndex()
+                // Set keyboardActive on listView to show highlight
+                if (listView) {
+                    listView.keyboardActive = true
+                }
+                // Initial selection is now handled by NotificationCard properties
+                selectionVersion++
+                ensureVisible()
+                event.accepted = true
+            } else if (selectedFlatIndex === 0) {
+                keyboardNavigationActive = false
+                // Reset keyboardActive when navigation is disabled
+                if (listView) {
+                    listView.keyboardActive = false
+                }
+                selectionVersion++
+                event.accepted = true
+                return
+            } else {
+                selectPrevious()
+                event.accepted = true
+            }
+        } else if (keyboardNavigationActive) {
+            if (event.key === Qt.Key_Space) {
+                toggleGroupExpanded()
+                event.accepted = true
+            } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                handleEnterKey()
+                event.accepted = true
+            } else if (event.key === Qt.Key_E) {
+                toggleTextExpanded()
+                event.accepted = true
+            } else if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace) {
+                clearSelected()
+                event.accepted = true
+            } else if (event.key >= Qt.Key_1 && event.key <= Qt.Key_9) {
+                const actionIndex = event.key - Qt.Key_1
+                executeAction(actionIndex)
+                event.accepted = true
+            }
+        }
+        
+        if (event.key === Qt.Key_Question || event.key === Qt.Key_H) {
+            showKeyboardHints = !showKeyboardHints
+            event.accepted = true
+        }
+    }
+    
+    // Get current selection info for UI
+    function getCurrentSelection() {
+        if (!keyboardNavigationActive || selectedFlatIndex >= flatNavigation.length) {
+            console.log("getCurrentSelection: inactive or out of bounds")
+            return { type: "", groupIndex: -1, notificationIndex: -1 }
+        }
+        const result = flatNavigation[selectedFlatIndex] || { type: "", groupIndex: -1, notificationIndex: -1 }
+        console.log("getCurrentSelection:", JSON.stringify(result))
+        return result
+    }
+}

Modules/Notifications/Center/NotificationKeyboardHints.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+    
+    property bool showHints: false
+    
+    height: 80
+    radius: Theme.cornerRadius
+    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+    border.color: Theme.primary
+    border.width: 2
+    opacity: showHints ? 1 : 0
+    z: 100
+    
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Theme.shortDuration
+            easing.type: Theme.standardEasing
+        }
+    }
+    
+    Column {
+        anchors.centerIn: parent
+        spacing: 2
+        
+        StyledText {
+            text: "↑/↓: Nav • Space: Expand • Enter: Action/Expand • E: Text"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        
+        StyledText {
+            text: "Del: Clear • 1-9: Actions • ?: Help • Esc: Close"
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceText
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}

Modules/Notifications/Popup/NotificationPopupManager.qml

@@ -172,10 +172,16 @@ QtObject {
     if (activeWindows.length <= maxTargetNotifications + 1)
       return
 
-    const b = _bottom()
-    if (b && !b.exiting) {
-      b.notificationData.removedByLimit = true
-      b.notificationData.popup = false
+    // Find the bottom-most non-critical notification to remove
+    const candidates = activeWindows.filter(p => {
+      return p.notificationData && p.notificationData.notification && 
+             p.notificationData.notification.urgency !== 2 // NotificationUrgency.Critical = 2
+    }).sort((a, b) => b.screenY - a.screenY) // Sort by Y position, highest first
+    
+    const toRemove = candidates[0] // Get the bottom-most non-critical notification
+    if (toRemove && !toRemove.exiting) {
+      toRemove.notificationData.removedByLimit = true
+      toRemove.notificationData.popup = false
     }
   }