New Tray menu management, potential fix for #108

Modules/Bar/TrayMenu.qml

@@ -7,335 +7,121 @@ import qs.Services
 import qs.Widgets
 
 PopupWindow {
-  id: trayMenu
+  id: root
-
   property QsMenuHandle menu
   property var anchorItem: null
   property real anchorX
   property real anchorY
+  property bool isSubMenu: false
+  property bool isHovered: rootMouseArea.containsMouse
 
   implicitWidth: Style.baseWidgetSize * 5.625 * scaling
-  implicitHeight: Math.max(60 * scaling, listView.contentHeight + (Style.marginMedium * 2 * scaling))
+
+  // Use the content height of the Flickable for implicit height
+  implicitHeight: Math.min(Screen.height * 0.9, flickable.contentHeight + (Style.marginMedium * 2 * scaling))
   visible: false
   color: Color.transparent
-
+  anchor.item: anchorItem
-  anchor.item: anchorItem ? anchorItem : null
   anchor.rect.x: anchorX
-  anchor.rect.y: anchorY - 4
+  anchor.rect.y: anchorY - (isSubMenu ? 0 : 4)
-
-  // Recursive function to destroy all open submenus in delegate tree, safely avoiding infinite recursion
-  function destroySubmenusRecursively(item) {
-    if (!item || !item.contentItem)
-      return
-    var children = item.contentItem.children
-    for (var i = 0; i < children.length; ++i) {
-      var child = children[i]
-      if (child.subMenu) {
-        child.subMenu.hideMenu()
-        child.subMenu.destroy()
-        child.subMenu = null
-      }
-      // Recursively destroy submenus only if the child has contentItem to prevent issues
-      if (child.contentItem) {
-        destroySubmenusRecursively(child)
-      }
-    }
-  }
 
   function showAt(item, x, y) {
     if (!item) {
       Logger.warn("TrayMenu", "anchorItem is undefined, won't show menu.")
       return
     }
+
+    if (!opener.children || opener.children.values.length === 0) {
+      //Logger.warn("TrayMenu", "Menu not ready, delaying show")
+      Qt.callLater(() => showAt(item, x, y))
+      return
+    }
+
     anchorItem = item
     anchorX = x
     anchorY = y
+
     visible = true
     forceActiveFocus()
-    Qt.callLater(() => trayMenu.anchor.updateAnchor())
+
+    // Force update after showing. This should now be more reliable.
+    Qt.callLater(() => {
+                   root.anchor.updateAnchor()
+                 })
   }
 
   function hideMenu() {
     visible = false
-    destroySubmenusRecursively(listView)
+
+    // Clean up all submenus recursively
+    for (var i = 0; i < columnLayout.children.length; i++) {
+      const child = columnLayout.children[i]
+      if (child?.subMenu) {
+        child.subMenu.hideMenu()
+        child.subMenu.destroy()
+        child.subMenu = null
+      }
+    }
+  }
+
+  // Full-sized, transparent MouseArea to track the mouse.
+  MouseArea {
+    id: rootMouseArea
+    anchors.fill: parent
+    hoverEnabled: true
   }
 
   Item {
     anchors.fill: parent
-    Keys.onEscapePressed: trayMenu.hideMenu()
+    Keys.onEscapePressed: root.hideMenu()
   }
 
   QsMenuOpener {
     id: opener
-    menu: trayMenu.menu
+    menu: root.menu
   }
 
   Rectangle {
-    id: bg
     anchors.fill: parent
-    color: Color.mSurface
+    color: Color.mSurfaceVariant
     border.color: Color.mOutline
     border.width: Math.max(1, Style.borderThin * scaling)
     radius: Style.radiusMedium * scaling
-    z: 0
   }
 
-  ListView {
+  Flickable {
-    id: listView
+    id: flickable
     anchors.fill: parent
     anchors.margins: Style.marginMedium * scaling
-    spacing: 0
+    contentHeight: columnLayout.implicitHeight
-    interactive: false
+    interactive: true
-    enabled: trayMenu.visible
     clip: true
 
-    model: ScriptModel {
+    // Use a ColumnLayout to handle menu item arrangement
-      values: opener.children ? [...opener.children.values] : []
+    ColumnLayout {
-    }
+      id: columnLayout
+      width: flickable.width
+      spacing: 0
 
-    delegate: Rectangle {
+      Repeater {
-      id: entry
+        model: opener.children ? [...opener.children.values] : []
-      required property var modelData
-
-      width: listView.width
-      height: (modelData?.isSeparator) ? 8 * scaling : Math.max(32 * scaling, text.height + 8)
-      color: Color.transparent
-
-      property var subMenu: null
-
-      NDivider {
-        anchors.centerIn: parent
-        width: parent.width - (Style.marginMedium * scaling * 2)
-        visible: modelData?.isSeparator ?? false
-      }
-
-      Rectangle {
-        id: bg
-        anchors.fill: parent
-        color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
-        radius: Style.radiusSmall * scaling
-        visible: !(modelData?.isSeparator ?? false)
-
-        RowLayout {
-          anchors.fill: parent
-          anchors.leftMargin: Style.marginMedium * scaling
-          anchors.rightMargin: Style.marginMedium * scaling
-          spacing: Style.marginSmall * scaling
-
-          NText {
-            id: text
-            Layout.fillWidth: true
-            color: (modelData?.enabled
-                    ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.applyOpacity(
-                                 Color.mOnSurface, 64)
-            text: modelData?.text ?? ""
-            font.pointSize: Style.fontSizeSmall * scaling
-            verticalAlignment: Text.AlignVCenter
-            elide: Text.ElideRight
-          }
-
-          Image {
-            Layout.preferredWidth: Style.marginLarge * scaling
-            Layout.preferredHeight: Style.marginLarge * scaling
-            source: modelData?.icon ?? ""
-            visible: (modelData?.icon ?? "") !== ""
-            fillMode: Image.PreserveAspectFit
-          }
-
-          // Chevron right for optional submenu
-          NIcon {
-            text: modelData?.hasChildren ? "menu" : ""
-            font.pointSize: Style.fontSizeSmall * scaling
-            verticalAlignment: Text.AlignVCenter
-            visible: modelData?.hasChildren ?? false
-            color: Color.mOnSurface
-          }
-        }
-
-        MouseArea {
-          id: mouseArea
-          anchors.fill: parent
-          hoverEnabled: true
-          enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && trayMenu.visible
-
-          onClicked: {
-            if (modelData && !modelData.isSeparator) {
-              if (modelData.hasChildren) {
-                // Submenus open on hover; ignore click here
-                return
-              }
-              modelData.triggered()
-              trayMenu.hideMenu()
-            }
-          }
-
-          onEntered: {
-            if (!trayMenu.visible)
-              return
-
-            if (modelData?.hasChildren) {
-              // Close sibling submenus immediately
-              for (var i = 0; i < listView.contentItem.children.length; i++) {
-                const sibling = listView.contentItem.children[i]
-                if (sibling !== entry && sibling.subMenu) {
-                  sibling.subMenu.hideMenu()
-                  sibling.subMenu.destroy()
-                  sibling.subMenu = null
-                }
-              }
-              if (entry.subMenu) {
-                entry.subMenu.hideMenu()
-                entry.subMenu.destroy()
-                entry.subMenu = null
-              }
-              var globalPos = entry.mapToGlobal(0, 0)
-              var submenuWidth = 180 * scaling
-              var gap = 12 * scaling
-              var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
-              var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap
-
-              entry.subMenu = subMenuComponent.createObject(trayMenu, {
-                                                              "menu": modelData,
-                                                              "anchorItem": entry,
-                                                              "anchorX": anchorX,
-                                                              "anchorY": 0
-                                                            })
-              entry.subMenu.showAt(entry, anchorX, 0)
-            } else {
-              // Hovered item without submenu; close siblings
-              for (var i = 0; i < listView.contentItem.children.length; i++) {
-                const sibling = listView.contentItem.children[i]
-                if (sibling.subMenu) {
-                  sibling.subMenu.hideMenu()
-                  sibling.subMenu.destroy()
-                  sibling.subMenu = null
-                }
-              }
-              if (entry.subMenu) {
-                entry.subMenu.hideMenu()
-                entry.subMenu.destroy()
-                entry.subMenu = null
-              }
-            }
-          }
-
-          onExited: {
-            if (entry.subMenu && !entry.subMenu.containsMouse()) {
-              entry.subMenu.hideMenu()
-              entry.subMenu.destroy()
-              entry.subMenu = null
-            }
-          }
-        }
-      }
-
-      // Simplified containsMouse without recursive calls to avoid stack overflow
-      function containsMouse() {
-        return mouseArea.containsMouse
-      }
-
-      Component.onDestruction: {
-        if (subMenu) {
-          subMenu.destroy()
-          subMenu = null
-        }
-      }
-    }
-  }
-
-  // -----------------------------------------
-  // Sub Component
-  // -----------------------------------------
-  Component {
-    id: subMenuComponent
-
-    PopupWindow {
-      id: subMenu
-      implicitWidth: Style.baseWidgetSize * 5.625 * scaling
-      implicitHeight: Math.max(40, listView.contentHeight + 12)
-      visible: false
-      color: Color.transparent
-
-      property QsMenuHandle menu
-      property var anchorItem: null
-      property real anchorX
-      property real anchorY
-
-      anchor.item: anchorItem ? anchorItem : null
-      anchor.rect.x: anchorX
-      anchor.rect.y: anchorY
-
-      function showAt(item, x, y) {
-        if (!item) {
-          Logger.warn("TrayMenu", "SubComponent anchorItem is undefined, not showing menu.")
-          return
-        }
-        anchorItem = item
-        anchorX = x
-        anchorY = y
-        visible = true
-        Qt.callLater(() => subMenu.anchor.updateAnchor())
-      }
-
-      function hideMenu() {
-        visible = false
-        // Close all submenus recursively in this submenu
-        for (var i = 0; i < listView.contentItem.children.length; i++) {
-          const child = listView.contentItem.children[i]
-          if (child.subMenu) {
-            child.subMenu.hideMenu()
-            child.subMenu.destroy()
-            child.subMenu = null
-          }
-        }
-      }
-
-      // Simplified containsMouse avoiding recursive calls
-      function containsMouse() {
-        return subMenu.containsMouse
-      }
-
-      Item {
-        anchors.fill: parent
-        Keys.onEscapePressed: subMenu.hideMenu()
-      }
-
-      QsMenuOpener {
-        id: opener
-        menu: subMenu.menu
-      }
-
-      Rectangle {
-        id: bg
-        anchors.fill: parent
-        color: Color.mSurface
-        border.color: Color.mOutline
-        border.width: Math.max(1, Style.borderThin * scaling)
-        radius: Style.radiusMedium * scaling
-        z: 0
-      }
-
-      ListView {
-        id: listView
-        anchors.fill: parent
-        anchors.margins: Style.marginSmall * scaling
-        spacing: Style.marginTiny * scaling
-        interactive: false
-        enabled: subMenu.visible
-        clip: true
-
-        model: ScriptModel {
-          values: opener.children ? [...opener.children.values] : []
-        }
 
         delegate: Rectangle {
           id: entry
           required property var modelData
 
-          width: listView.width
+          Layout.preferredWidth: parent.width
-          height: (modelData?.isSeparator) ? 8 * scaling : Math.max(32 * scaling, subText.height + 8)
+          Layout.preferredHeight: {
-          color: Color.transparent
+            if (modelData?.isSeparator) {
+              return 8 * scaling
+            } else {
+              // Calculate based on text content
+              const textHeight = text.contentHeight || (Style.fontSizeSmall * scaling * 1.2)
+              return Math.max(32 * scaling, textHeight + 8)
+            }
+          }
 
+          color: Color.transparent
           property var subMenu: null
 
           NDivider {
@@ -345,12 +131,10 @@ PopupWindow {
           }
 
           Rectangle {
-            id: bg
             anchors.fill: parent
             color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
             radius: Style.radiusSmall * scaling
             visible: !(modelData?.isSeparator ?? false)
-            property color hoverTextColor: mouseArea.containsMouse ? Color.mOnSurface : Color.mOnSurface
 
             RowLayout {
               anchors.fill: parent
@@ -359,9 +143,11 @@ PopupWindow {
               spacing: Style.marginSmall * scaling
 
               NText {
-                id: subText
+                id: text
                 Layout.fillWidth: true
-                color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Color.applyOpacity(Color.mOnSurface, 64)
+                color: (modelData?.enabled
+                        ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.applyOpacity(
+                                     Color.mOnSurface, 64)
                 text: modelData?.text ?? ""
                 font.pointSize: Style.fontSizeSmall * scaling
                 verticalAlignment: Text.AlignVCenter
@@ -376,12 +162,12 @@ PopupWindow {
                 fillMode: Image.PreserveAspectFit
               }
 
-              // TBC a Square UTF-8?
               NIcon {
-                text: modelData?.hasChildren ? "\uE5CC" : ""
+                text: modelData?.hasChildren ? "menu" : ""
                 font.pointSize: Style.fontSizeSmall * scaling
                 verticalAlignment: Text.AlignVCenter
                 visible: modelData?.hasChildren ?? false
+                color: Color.mOnSurface
               }
             }
 
@@ -389,82 +175,69 @@ PopupWindow {
               id: mouseArea
               anchors.fill: parent
               hoverEnabled: true
-              enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false)
+              enabled: (modelData?.enabled ?? true) && !(modelData?.isSeparator ?? false) && root.visible
 
               onClicked: {
-                if (modelData && !modelData.isSeparator) {
+                if (modelData && !modelData.isSeparator && !modelData.hasChildren) {
-                  if (modelData.hasChildren) {
-                    return
-                  }
                   modelData.triggered()
-                  trayMenu.hideMenu()
+                  root.hideMenu()
                 }
               }
 
               onEntered: {
-                if (subMenu && !subMenu.visible) {
+                if (!root.visible)
                   return
+
+                // Close all sibling submenus
+                for (var i = 0; i < columnLayout.children.length; i++) {
+                  const sibling = columnLayout.children[i]
+                  if (sibling !== entry && sibling?.subMenu) {
+                    sibling.subMenu.hideMenu()
+                    sibling.subMenu.destroy()
+                    sibling.subMenu = null
+                  }
                 }
 
+                // Create submenu if needed
                 if (modelData?.hasChildren) {
-                  for (var i = 0; i < listView.contentItem.children.length; i++) {
-                    const sibling = listView.contentItem.children[i]
-                    if (sibling !== entry && sibling.subMenu) {
-                      sibling.subMenu.hideMenu()
-                      sibling.subMenu.destroy()
-                      sibling.subMenu = null
-                    }
-                  }
                   if (entry.subMenu) {
                     entry.subMenu.hideMenu()
                     entry.subMenu.destroy()
-                    entry.subMenu = null
                   }
-                  var globalPos = entry.mapToGlobal(0, 0)
-                  var submenuWidth = 180 * scaling
-                  var gap = 12 * scaling
-                  var openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
-                  var anchorX = openLeft ? -submenuWidth - gap : entry.width + gap
 
-                  entry.subMenu = subMenuComponent.createObject(subMenu, {
+                  const globalPos = entry.mapToGlobal(0, 0)
-                                                                  "menu": modelData,
+                  const submenuWidth = Style.baseWidgetSize * 5.625 * scaling
-                                                                  "anchorItem": entry,
+                  const gap = 12 * scaling
-                                                                  "anchorX": anchorX,
+                  const openLeft = (globalPos.x + entry.width + submenuWidth > Screen.width)
-                                                                  "anchorY": 0
+                  const anchorX = openLeft ? -submenuWidth - gap : entry.width + gap
-                                                                })
+
-                  entry.subMenu.showAt(entry, anchorX, 0)
+                  // Create submenu
-                } else {
+                  entry.subMenu = Qt.createComponent("TrayMenu.qml").createObject(root, {
-                  for (var i = 0; i < listView.contentItem.children.length; i++) {
+                                                                                    "menu": modelData,
-                    const sibling = listView.contentItem.children[i]
+                                                                                    "anchorItem": entry,
-                    if (sibling.subMenu) {
+                                                                                    "anchorX": anchorX,
-                      sibling.subMenu.hideMenu()
+                                                                                    "anchorY": 0,
-                      sibling.subMenu.destroy()
+                                                                                    "isSubMenu": true
-                      sibling.subMenu = null
+                                                                                  })
-                    }
+
-                  }
                   if (entry.subMenu) {
-                    entry.subMenu.hideMenu()
+                    entry.subMenu.showAt(entry, anchorX, 0)
-                    entry.subMenu.destroy()
-                    entry.subMenu = null
                   }
                 }
               }
 
               onExited: {
-                if (entry.subMenu && !entry.subMenu.containsMouse()) {
+                Qt.callLater(() => {
-                  entry.subMenu.hideMenu()
+                               if (entry.subMenu && !entry.subMenu.isHovered) {
-                  entry.subMenu.destroy()
+                                 entry.subMenu.hideMenu()
-                  entry.subMenu = null
+                                 entry.subMenu.destroy()
-                }
+                                 entry.subMenu = null
+                               }
+                             })
               }
             }
           }
 
-          // Simplified & safe containsMouse avoiding recursion
-          function containsMouse() {
-            return mouseArea.containsMouse
-          }
-
           Component.onDestruction: {
             if (subMenu) {
               subMenu.destroy()