many improvements

Modals/NotificationModal.qml

@@ -9,43 +9,41 @@ import qs.Modules.Notifications.Center
 import qs.Services
 import qs.Widgets
 
-DankModal {
+Item {
-    id: notificationModal
+    id: root
+    
+    // Keyboard controller defined outside modal to ensure proper creation order
+    NotificationKeyboardController {
+        id: modalKeyboardController
+        listView: null
+        isOpen: notificationModal.notificationModalOpen
+        onClose: function() { notificationModal.hide() }
+    }
+
+    property alias notificationModal: notificationModal
+    
+    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()
+        modalKeyboardController.reset()
         
         // Set the listView reference when modal is shown
-        console.log("SHOW: keyboardController:", !!keyboardController, "notificationListRef:", !!notificationListRef)
+        if (modalKeyboardController && notificationListRef) {
-        if (keyboardController && notificationListRef) {
+            modalKeyboardController.listView = notificationListRef
-            console.log("FIXING listView reference in show()")
+            modalKeyboardController.rebuildFlatNavigation()
-            keyboardController.listView = notificationListRef
-            keyboardController.rebuildFlatNavigation()
         }
     }
 
     function hide() {
         notificationModalOpen = false
-        keyboardController.reset()
+        modalKeyboardController.reset()
     }
 
     function toggle() {
@@ -88,8 +86,7 @@ DankModal {
         }
 
         function toggle() {
-            console.log("IPC toggle() called")
+            notificationModal.toggle()
-                        notificationModal.toggle()
             return "NOTIFICATION_MODAL_TOGGLE_SUCCESS"
         }
 
@@ -104,7 +101,7 @@ DankModal {
             focus: true
             
             Keys.onPressed: function(event) {
-                keyboardController.handleKey(event)
+                modalKeyboardController.handleKey(event)
             }
             
             Component.onCompleted: {
@@ -151,7 +148,7 @@ DankModal {
                             width: 32
                             height: 32
                             radius: Theme.cornerRadius
-                            color: helpButtonArea.containsMouse ? Theme.primaryHover : (keyboardController.showKeyboardHints ? Theme.primaryPressed : "transparent")
+                            color: helpButtonArea.containsMouse ? Theme.primaryHover : (modalKeyboardController.showKeyboardHints ? Theme.primaryPressed : "transparent")
                             border.color: Theme.primary
                             border.width: 1
 
@@ -168,7 +165,7 @@ DankModal {
                                 anchors.fill: parent
                                 hoverEnabled: true
                                 cursorShape: Qt.PointingHandCursor
-                                onClicked: keyboardController.showKeyboardHints = !keyboardController.showKeyboardHints
+                                onClicked: modalKeyboardController.showKeyboardHints = !modalKeyboardController.showKeyboardHints
                             }
                         }
 
@@ -214,16 +211,14 @@ DankModal {
                         
                         anchors.fill: parent
                         anchors.margins: Theme.spacingS
-                        keyboardController: notificationModal.keyboardController
+                        keyboardController: modalKeyboardController
                         enableKeyboardNavigation: true
                         
                         Component.onCompleted: {
-                            console.log("ListView onCompleted: keyboardController:", !!keyboardController)
                             notificationModal.notificationListRef = notificationList
-                            if (keyboardController) {
+                            if (modalKeyboardController) {
-                                console.log("SETTING listView reference")
+                                modalKeyboardController.listView = notificationList
-                                keyboardController.listView = notificationList
+                                modalKeyboardController.rebuildFlatNavigation()
-                                keyboardController.rebuildFlatNavigation()
                             }
                         }
                     }
@@ -239,7 +234,7 @@ DankModal {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.margins: Theme.spacingL
-                showHints: keyboardController.showKeyboardHints
+                showHints: modalKeyboardController.showKeyboardHints
             }
 
             Connections {
@@ -265,4 +260,5 @@ DankModal {
 
         }
     }
+}
 }

Modules/Notifications/Center/KeyboardNavigatedNotificationList.qml

@@ -20,6 +20,19 @@ DankListView {
     model: NotificationService.groupedNotifications
     spacing: Theme.spacingL
     
+    // Timer to periodically ensure selected item stays visible during active keyboard navigation
+    Timer {
+        id: positionPreservationTimer
+        interval: 200
+        running: keyboardController && keyboardController.keyboardNavigationActive
+        repeat: true
+        onTriggered: {
+            if (keyboardController && keyboardController.keyboardNavigationActive) {
+                keyboardController.ensureVisible()
+            }
+        }
+    }
+    
     NotificationEmptyState {
         visible: listView.count === 0
         anchors.centerIn: parent
@@ -28,7 +41,8 @@ DankListView {
     // Override position restoration during keyboard nav
     onModelChanged: {
         if (keyboardController && keyboardController.keyboardNavigationActive) {
-            // Preserve scroll position during model updates
+            // Rebuild navigation and preserve position aggressively
+            keyboardController.rebuildFlatNavigation()
             Qt.callLater(function() {
                 if (keyboardController && keyboardController.keyboardNavigationActive) {
                     keyboardController.ensureVisible()
@@ -42,13 +56,6 @@ DankListView {
         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
@@ -65,16 +72,15 @@ DankListView {
                 
                 isGroupSelected: {
                     // Force re-evaluation when selection changes
-                    if (!keyboardController) return false
+                    if (!keyboardController || !keyboardController.keyboardNavigationActive) 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
+                    if (!keyboardController || !keyboardController.keyboardNavigationActive) return -1
                     keyboardController.selectionVersion // Trigger re-evaluation
                     if (!listView.keyboardActive) return -1
                     const selection = keyboardController.getCurrentSelection()
@@ -84,23 +90,6 @@ DankListView {
                 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
-            }
         }
         
     }
@@ -116,8 +105,32 @@ DankListView {
                 }
                 
                 keyboardController.rebuildFlatNavigation()
+                
+                // If keyboard navigation is active, ensure selected item stays visible
+                if (keyboardController.keyboardNavigationActive) {
+                    Qt.callLater(function() {
+                        keyboardController.ensureVisible()
+                    })
+                }
             }
         }
+        
+        function onExpandedGroupsChanged() {
+            if (keyboardController && keyboardController.keyboardNavigationActive) {
+                Qt.callLater(function() {
+                    keyboardController.ensureVisible()
+                })
+            }
+        }
+        
+        function onExpandedMessagesChanged() {
+            if (keyboardController && keyboardController.keyboardNavigationActive) {
+                Qt.callLater(function() {
+                    keyboardController.ensureVisible()
+                })
+            }
+        }
+        
         target: NotificationService
     }
     

Modules/Notifications/Center/NotificationCard.qml

@@ -34,18 +34,47 @@ Rectangle {
     return baseHeight
   }
   radius: Theme.cornerRadius
-  color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+  color: {
-                 Theme.surfaceVariant.b, 0.1)
+    // Keyboard selection highlighting for collapsed groups
-  border.color: notificationGroup?.latestNotification?.urgency
+    if (isGroupSelected && keyboardNavigationActive && !expanded) {
-                === NotificationUrgency.Critical ? Qt.rgba(Theme.primary.r,
+      return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.15)
-                                                           Theme.primary.g,
+    }
-                                                           Theme.primary.b,
+    // Subtle group highlighting when navigating within expanded group
-                                                           0.3) : Qt.rgba(
+    if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
-                                                     Theme.outline.r,
+      return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
-                                                     Theme.outline.g,
+    }
-                                                     Theme.outline.b, 0.05)
+    return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
-  border.width: notificationGroup?.latestNotification?.urgency
+  }
-                === NotificationUrgency.Critical ? 2 : 1
+  border.color: {
+    // Keyboard selection highlighting for collapsed groups
+    if (isGroupSelected && keyboardNavigationActive && !expanded) {
+      return Theme.primary
+    }
+    // Subtle group border when navigating within expanded group
+    if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
+      return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.4)
+    }
+    // Critical notification styling
+    if (notificationGroup?.latestNotification?.urgency === NotificationUrgency.Critical) {
+      return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+    }
+    return Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.05)
+  }
+  border.width: {
+    // Keyboard selection highlighting for collapsed groups
+    if (isGroupSelected && keyboardNavigationActive && !expanded) {
+      return 2
+    }
+    // Subtle group border when navigating within expanded group
+    if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
+      return 1.5
+    }
+    // Critical notification styling
+    if (notificationGroup?.latestNotification?.urgency === NotificationUrgency.Critical) {
+      return 2
+    }
+    return 1
+  }
   clip: true
 
   Rectangle {
@@ -265,6 +294,19 @@ Rectangle {
     Item {
       width: parent.width
       height: 40
+      
+      // Subtle background for expanded group header when navigating within
+      Rectangle {
+        anchors.fill: parent
+        radius: Theme.cornerRadius / 2
+        color: (keyboardNavigationActive && selectedNotificationIndex >= 0) 
+               ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
+               : "transparent"
+        border.color: (keyboardNavigationActive && selectedNotificationIndex >= 0)
+                      ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+                      : "transparent"
+        border.width: (keyboardNavigationActive && selectedNotificationIndex >= 0) ? 1 : 0
+      }
 
       Row {
         anchors.left: parent.left
@@ -275,7 +317,8 @@ Rectangle {
 
         StyledText {
           text: notificationGroup?.appName || ""
-          color: Theme.surfaceText
+          color: (keyboardNavigationActive && selectedNotificationIndex >= 0) 
+                 ? Theme.primary : Theme.surfaceText
           font.pixelSize: Theme.fontSizeLarge
           font.weight: Font.Bold
           anchors.verticalCenter: parent.verticalCenter

Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -123,18 +123,26 @@ PanelWindow {
       }
     }
 
-    Column {
+    FocusScope {
       id: contentColumn
 
       anchors.fill: parent
       anchors.margins: Theme.spacingL
-      spacing: Theme.spacingM
       focus: true
+      
       Component.onCompleted: {
         if (notificationHistoryVisible)
           forceActiveFocus()
       }
-      Keys.onPressed: keyboardController.handleKey
+      
+      Keys.onPressed: function(event) {
+        keyboardController.handleKey(event)
+      }
+      
+      Column {
+        id: contentColumnInner
+        anchors.fill: parent
+        spacing: Theme.spacingM
 
       Connections {
         function onNotificationHistoryVisibleChanged() {
@@ -156,7 +164,7 @@ PanelWindow {
         id: notificationList
 
         width: parent.width
-        height: parent.height - notificationHeader.height - contentColumn.spacing
+        height: parent.height - notificationHeader.height - contentColumnInner.spacing
         // keyboardController set via Component.onCompleted to avoid binding loop
         enableKeyboardNavigation: true
         
@@ -167,7 +175,9 @@ PanelWindow {
           }
         }
       }
-    }
+      
+      } // Column
+    } // FocusScope
 
     Connections {
       function onNotificationsChanged() {

Modules/Notifications/Center/NotificationKeyboardController.qml

@@ -33,7 +33,6 @@ QtObject {
         
         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]
@@ -65,8 +64,6 @@ QtObject {
         }
         
         flatNavigation = nav
-        console.log("rebuildFlatNavigation: nav.length:", nav.length, "selectedFlatIndex:", selectedFlatIndex)
-        // Highlight is now handled by NotificationCard properties
         updateSelectedIndexFromId()
         isRebuilding = false
     }
@@ -80,16 +77,36 @@ QtObject {
             
             if (selectedItemType === "group" && item.type === "group" && item.groupKey === selectedGroupKey) {
                 selectedFlatIndex = i
+                selectionVersion++  // Trigger UI update
                 return
             } else if (selectedItemType === "notification" && item.type === "notification" && String(item.notificationId) === String(selectedNotificationId)) {
                 selectedFlatIndex = i
+                selectionVersion++  // Trigger UI update
                 return
             }
         }
         
-        // If not found, default to first item
+        // If not found, try to find the same group but select the group header instead
-        selectedFlatIndex = 0
+        if (selectedItemType === "notification") {
-        updateSelectedIdFromIndex()
+            for (var j = 0; j < flatNavigation.length; j++) {
+                var groupItem = flatNavigation[j]
+                if (groupItem.type === "group" && groupItem.groupKey === selectedGroupKey) {
+                    selectedFlatIndex = j
+                    selectedItemType = "group"
+                    selectedNotificationId = ""
+                    selectionVersion++  // Trigger UI update
+                    return
+                }
+            }
+        }
+        
+        // If still not found, clamp to valid range and update
+        if (flatNavigation.length > 0) {
+            selectedFlatIndex = Math.min(selectedFlatIndex, flatNavigation.length - 1)
+            selectedFlatIndex = Math.max(selectedFlatIndex, 0)
+            updateSelectedIdFromIndex()
+            selectionVersion++  // Trigger UI update
+        }
     }
     
     function updateSelectedIdFromIndex() {
@@ -116,10 +133,8 @@ QtObject {
         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()
     }
@@ -350,20 +365,22 @@ QtObject {
         const currentItem = flatNavigation[selectedFlatIndex]
         
         if (keyboardNavigationActive && currentItem && currentItem.groupIndex >= 0) {
-            // For individual notifications in expanded groups, we still position based on the group
+            // Always center the selected item for better visibility
-            // but we need to ensure the notification is visible within that group
+            // This ensures the selected item stays in view even when new notifications arrive
             if (currentItem.type === "notification") {
-                // Position at the group containing the selected notification
+                // For individual notifications, center on the group but bias towards the notification
-                listView.positionViewAtIndex(currentItem.groupIndex, ListView.Contain)
+                listView.positionViewAtIndex(currentItem.groupIndex, ListView.Center)
             } else {
                 // For group headers, center on the group
                 listView.positionViewAtIndex(currentItem.groupIndex, ListView.Center)
             }
+            
+            // Force immediate update
+            listView.forceLayout()
         }
     }
     
     function handleKey(event) {
-        console.log("HANDLEKEY CALLED:", event.key)
         if (event.key === Qt.Key_Escape) {
             if (keyboardNavigationActive) {
                 keyboardNavigationActive = false
@@ -373,16 +390,15 @@ QtObject {
                 event.accepted = true
             }
         } else if (event.key === Qt.Key_Down || event.key === 16777237) {
-            console.log("DOWN KEY DETECTED")
             if (!keyboardNavigationActive) {
                 keyboardNavigationActive = true
+                rebuildFlatNavigation()  // Ensure we have fresh navigation data
                 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
@@ -391,16 +407,15 @@ QtObject {
                 event.accepted = true
             }
         } else if (event.key === Qt.Key_Up || event.key === 16777235) {
-            console.log("UP KEY DETECTED")
             if (!keyboardNavigationActive) {
                 keyboardNavigationActive = true
+                rebuildFlatNavigation()  // Ensure we have fresh navigation data
                 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
@@ -445,12 +460,10 @@ QtObject {
     
     // Get current selection info for UI
     function getCurrentSelection() {
-        if (!keyboardNavigationActive || selectedFlatIndex >= flatNavigation.length) {
+        if (!keyboardNavigationActive || selectedFlatIndex < 0 || 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
     }
 }