stash n otifs

Common/SettingsData.qml

@@ -91,6 +91,9 @@ Singleton {
   property real cornerRadius: 12
   property bool notificationOverlayEnabled: false
   property bool topBarAutoHide: false
+  property int notificationTimeoutLow: 5000
+  property int notificationTimeoutNormal: 5000  
+  property int notificationTimeoutCritical: 0
 
   readonly property string defaultFontFamily: "Inter Variable"
   readonly property string defaultMonoFontFamily: "Fira Code"
@@ -257,6 +260,9 @@ Singleton {
         cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
         notificationOverlayEnabled = settings.notificationOverlayEnabled !== undefined ? settings.notificationOverlayEnabled : false
         topBarAutoHide = settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false
+        notificationTimeoutLow = settings.notificationTimeoutLow !== undefined ? settings.notificationTimeoutLow : 5000
+        notificationTimeoutNormal = settings.notificationTimeoutNormal !== undefined ? settings.notificationTimeoutNormal : 5000
+        notificationTimeoutCritical = settings.notificationTimeoutCritical !== undefined ? settings.notificationTimeoutCritical : 0
         applyStoredTheme()
         detectAvailableIconThemes()
         detectQtTools()
@@ -327,7 +333,10 @@ Singleton {
                                           "dockAutoHide": dockAutoHide,
                                           "cornerRadius": cornerRadius,
                                           "notificationOverlayEnabled": notificationOverlayEnabled,
-                                          "topBarAutoHide": topBarAutoHide
+                                          "topBarAutoHide": topBarAutoHide,
+                                          "notificationTimeoutLow": notificationTimeoutLow,
+                                          "notificationTimeoutNormal": notificationTimeoutNormal,
+                                          "notificationTimeoutCritical": notificationTimeoutCritical
                                         }, null, 2))
   }
 
@@ -754,6 +763,21 @@ Singleton {
     saveSettings()
   }
 
+  function setNotificationTimeoutLow(timeout) {
+    notificationTimeoutLow = timeout
+    saveSettings()
+  }
+
+  function setNotificationTimeoutNormal(timeout) {
+    notificationTimeoutNormal = timeout
+    saveSettings()
+  }
+
+  function setNotificationTimeoutCritical(timeout) {
+    notificationTimeoutCritical = timeout
+    saveSettings()
+  }
+
   function _shq(s) {
     return "'" + String(s).replace(/'/g, "'\\''") + "'"
   }

Modals/NotificationModal.qml

@@ -0,0 +1,268 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import Quickshell
+import Quickshell.Io
+import Quickshell.Widgets
+import qs.Common
+import qs.Modules.Notifications.Center
+import qs.Services
+import qs.Widgets
+
+DankModal {
+    id: notificationModal
+
+    property bool notificationModalOpen: false
+    property var notificationListRef: null
+    
+    // Keyboard controller for navigation
+    NotificationKeyboardController {
+        id: keyboardController
+        listView: null  // Set later to avoid binding loop
+        isOpen: notificationModalOpen
+        onClose: function() { hide() }
+        
+        Component.onCompleted: {
+            console.log("KeyboardController created")
+        }
+    }
+
+
+
+    function show() {
+        console.log("NotificationModal.show() called")
+        notificationModalOpen = true
+        keyboardController.reset()
+        
+        // Set the listView reference when modal is shown
+        console.log("SHOW: keyboardController:", !!keyboardController, "notificationListRef:", !!notificationListRef)
+        if (keyboardController && notificationListRef) {
+            console.log("FIXING listView reference in show()")
+            keyboardController.listView = notificationListRef
+            keyboardController.rebuildFlatNavigation()
+        }
+    }
+
+    function hide() {
+        notificationModalOpen = false
+        keyboardController.reset()
+    }
+
+    function toggle() {
+        if (notificationModalOpen)
+            hide()
+        else
+            show()
+    }
+
+    
+
+    visible: notificationModalOpen
+    width: 500
+    height: 700
+    keyboardFocus: "ondemand"
+    backgroundColor: Theme.popupBackground()
+    cornerRadius: Theme.cornerRadius
+    borderColor: Theme.outlineMedium
+    borderWidth: 1
+    enableShadow: true
+
+    onVisibleChanged: {
+        if (visible && !notificationModalOpen)
+            show()
+    }
+
+    onBackgroundClicked: {
+        notificationModalOpen = false
+    }
+
+    IpcHandler {
+        function open() {
+            notificationModal.show()
+            return "NOTIFICATION_MODAL_OPEN_SUCCESS"
+        }
+
+        function close() {
+            notificationModal.hide()
+            return "NOTIFICATION_MODAL_CLOSE_SUCCESS"
+        }
+
+        function toggle() {
+            console.log("IPC toggle() called")
+                        notificationModal.toggle()
+            return "NOTIFICATION_MODAL_TOGGLE_SUCCESS"
+        }
+
+        target: "notifications"
+    }
+
+    content: Component {
+        FocusScope {
+            id: notificationKeyHandler
+
+            anchors.fill: parent
+            focus: true
+            
+            Keys.onPressed: function(event) {
+                keyboardController.handleKey(event)
+            }
+            
+            Component.onCompleted: {
+                forceActiveFocus()
+            }
+
+            Column {
+                anchors.fill: parent
+                anchors.margins: Theme.spacingL
+                spacing: Theme.spacingL
+
+                Rectangle {
+                    width: parent.width
+                    height: 48
+                    color: "transparent"
+
+                    Row {
+                        anchors.left: parent.left
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "notifications"
+                            size: Theme.iconSize
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: "Notification Center"
+                            font.pixelSize: Theme.fontSizeXLarge
+                            font.weight: Font.Bold
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    Row {
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        spacing: Theme.spacingS
+
+                        Rectangle {
+                            width: 32
+                            height: 32
+                            radius: Theme.cornerRadius
+                            color: helpButtonArea.containsMouse ? Theme.primaryHover : (keyboardController.showKeyboardHints ? Theme.primaryPressed : "transparent")
+                            border.color: Theme.primary
+                            border.width: 1
+
+                            StyledText {
+                                text: "?"
+                                font.pixelSize: Theme.fontSizeMedium
+                                font.weight: Font.Bold
+                                color: Theme.primary
+                                anchors.centerIn: parent
+                            }
+
+                            MouseArea {
+                                id: helpButtonArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: keyboardController.showKeyboardHints = !keyboardController.showKeyboardHints
+                            }
+                        }
+
+                        Rectangle {
+                            width: clearAllText.implicitWidth + Theme.spacingM
+                            height: 32
+                            radius: Theme.cornerRadius
+                            color: clearAllArea.containsMouse ? Theme.primaryHover : "transparent"
+                            border.color: Theme.primary
+                            border.width: 1
+                            visible: NotificationService.groupedNotifications.length > 0
+
+                            StyledText {
+                                id: clearAllText
+                                text: "Clear All"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.primary
+                                anchors.centerIn: parent
+                            }
+
+                            MouseArea {
+                                id: clearAllArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: NotificationService.clearAllNotifications()
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: parent.height - y
+                    radius: Theme.cornerRadius
+                    color: Theme.surfaceLight
+                    border.color: Theme.outlineLight
+                    border.width: 1
+                    clip: false
+
+                    KeyboardNavigatedNotificationList {
+                        id: notificationList
+                        
+                        anchors.fill: parent
+                        anchors.margins: Theme.spacingS
+                        keyboardController: notificationModal.keyboardController
+                        enableKeyboardNavigation: true
+                        
+                        Component.onCompleted: {
+                            console.log("ListView onCompleted: keyboardController:", !!keyboardController)
+                            notificationModal.notificationListRef = notificationList
+                            if (keyboardController) {
+                                console.log("SETTING listView reference")
+                                keyboardController.listView = notificationList
+                                keyboardController.rebuildFlatNavigation()
+                            }
+                        }
+                    }
+
+                }
+
+            }
+
+            // Keyboard hints overlay
+            NotificationKeyboardHints {
+                id: keyboardHints
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: Theme.spacingL
+                showHints: keyboardController.showKeyboardHints
+            }
+
+            Connections {
+                function onNotificationModalOpenChanged() {
+                    if (notificationModal.notificationModalOpen) {
+                        Qt.callLater(function () {
+                            notificationKeyHandler.forceActiveFocus()
+                        })
+                    }
+                }
+                target: notificationModal
+            }
+
+
+            Connections {
+                function onOpened() {
+                    Qt.callLater(function () {
+                        notificationKeyHandler.forceActiveFocus()
+                    })
+                }
+                target: notificationModal
+            }
+
+        }
+    }
+}

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
     }
   }
 

Services/NotificationService.qml

@@ -69,6 +69,7 @@ Singleton {
     bodyMarkupSupported: true
     imageSupported: true
     inlineReplySupported: true
+    persistenceSupported: true
 
     onNotification: notif => {
       notif.tracked = true
@@ -106,11 +107,24 @@ Singleton {
     }
 
     readonly property Timer timer: Timer {
-      interval: 5000
+      interval: {
+        if (!wrapper.notification) return 5000
+        
+        switch (wrapper.notification.urgency) {
+          case NotificationUrgency.Low:
+            return SettingsData.notificationTimeoutLow
+          case NotificationUrgency.Critical:
+            return SettingsData.notificationTimeoutCritical
+          default:
+            return SettingsData.notificationTimeoutNormal
+        }
+      }
       repeat: false
       running: false
       onTriggered: {
-        wrapper.popup = false
+        if (interval > 0) {
+          wrapper.popup = false
+        }
       }
     }
     
@@ -302,6 +316,11 @@ Singleton {
     visibleNotifications = [...visibleNotifications, next]
     next.popup = true
 
+    // Start timeout timer if timeout > 0 (0 means never timeout)
+    if (next.timer.interval > 0) {
+      next.timer.start()
+    }
+
     addGateBusy = true
     addGate.restart()
   }

shell.qml

@@ -125,6 +125,10 @@ ShellRoot {
     id: clipboardHistoryModalPopup
   }
 
+  NotificationModal {
+    id: notificationModal
+  }
+
   LazyLoader {
     id: processListModalLoader