icons, width and centering

Modules/TrayItem.qml

@@ -44,6 +44,7 @@ MouseArea {
         ImageAnalyser {
             id: analyser
             sourceItem: icon
+            rescaleSize: 20
         }
 
         TrayMenu {
@@ -51,8 +52,10 @@ MouseArea {
             menu: root.item.menu
             anchor.item: root
             anchor.edges: Edges.Bottom
-            anchor.margins {
+            onVisibleChanged: {
-                left: -270
+                if ( grab.active && !visible ) {
+                    grab.active = false;
+                }
             }
             HyprlandFocusGrab {
                 id: grab

Modules/TrayMenu.qml

@@ -3,17 +3,27 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell.Hyprland
 
 PopupWindow {
     id: root
     required property QsMenuHandle menu
-    property int height: entryCount * ( entryHeight + 3 )
+    property int height: {
+        let count = 0;
+        for (let i = 0; i < repeater.count; i++) {
+            if (!repeater.itemAt(i).modelData.isSeparator) count++;
+        }
+        return count * (entryHeight + 3);
+    }
     property int entryHeight: 30
-    property int entryCount: 0
+    property int maxWidth
-    implicitWidth: 300
+    implicitWidth: maxWidth + 20
     implicitHeight: height
     color: "transparent"
+    anchor.margins {
+        left: -implicitWidth
+    }
 
     QsMenuOpener {
         id: menuOpener
@@ -36,18 +46,28 @@ PopupWindow {
                 model: menuOpener.children
                 Rectangle {
                     id: menuItem
+                    property bool containsMouseAndEnabled: mouseArea.containsMouse && menuItem.modelData.enabled
+                    property bool containsMouseAndNotEnabled: mouseArea.containsMouse && !menuItem.modelData.enabled
                     width: root.implicitWidth
                     Layout.maximumWidth: parent.width
                     Layout.fillHeight: true
                     height: root.entryHeight
-                    color: mouseArea.containsMouse && !modelData.isSeparator ? "#15FFFFFF" : "transparent"
+                    color: modelData.isSeparator ? "transparent" : containsMouseAndEnabled ? "#15FFFFFF" : containsMouseAndNotEnabled ? "#08FFFFFF" : "transparent"
                     radius: 4
                     visible: modelData.isSeparator ? false : true
                     required property QsMenuEntry modelData
 
+                    TextMetrics {
+                        id: textMetrics
+                        font: menuText.font
+                        text: menuItem.modelData.text
+                    }
+
                     Component.onCompleted: {
-                        if ( !modelData.isSeparator ) {
+                        // Measure text width to determine maximumWidth
-                            root.entryCount += 1;
+                        var textWidth = textMetrics.width + 20 + (iconImage.width > 0 ? iconImage.width + 10 : 0);
+                        if ( textWidth > root.maxWidth ) {
+                            root.maxWidth = textWidth
                         }
                     }
 
@@ -60,8 +80,10 @@ PopupWindow {
                         acceptedButtons: Qt.LeftButton
                         onClicked: {
                             if ( !menuItem.modelData.hasChildren ) {
-                                menuItem.modelData.triggered();
+                                if ( menuItem.modelData.enabled ) {
-                                root.visible = false;
+                                    menuItem.modelData.triggered();
+                                    root.visible = false;
+                                }
                             } else {
                                 subMenuComponent.createObject( null, {
                                     menu: menuItem.modelData,
@@ -75,12 +97,30 @@ PopupWindow {
                         }
                     }
 
-                    Text {
+                    RowLayout {
-                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.fill: parent
-                        anchors.left: parent.left
+                        Text {
-                        anchors.leftMargin: 10
+                            id: menuText
-                        text: menuItem.modelData.text
+                            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                        color: "white"
+                            Layout.leftMargin: 10
+                            text: menuItem.modelData.text
+                            color: menuItem.modelData.enabled ? "white" : "gray"
+                        }
+                        Image {
+                            id: iconImage
+                            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                            Layout.rightMargin: 10
+                            Layout.maximumWidth: 20
+                            Layout.maximumHeight: 20
+                            source: menuItem.modelData.icon
+                            sourceSize.width: width
+                            sourceSize.height: height
+                            fillMode: Image.PreserveAspectFit
+                            layer.enabled: true
+                            layer.effect: ColorOverlay {
+                                color: menuItem.modelData.enabled ? "white" : "gray"
+                            }
+                        }
                     }
                 }
             }

shell.qml

@@ -3,5 +3,5 @@ import Quickshell
 
 Scope {
     Bar {}
-    Wallpaper {}
+    // Wallpaper {}
 }