systray: (un)pin button, fix menu placecment (#3100)

dots/.config/quickshell/ii/modules/ii/bar/SysTray.qml

@@ -29,6 +29,11 @@ Item {
     }
 
     function setExtraWindowAndGrabFocus(window) {
+        if (root.activeMenu && root.activeMenu !== window) {
+            if (typeof root.activeMenu.close === "function")
+                root.activeMenu.close();
+            root.activeMenu = null;
+        }
         root.activeMenu = window;
         root.grabFocus();
     }

dots/.config/quickshell/ii/modules/ii/bar/SysTrayItem.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import Quickshell.Services.SystemTray
@@ -26,7 +27,11 @@ MouseArea {
             item.activate();
             break;
         case Qt.RightButton:
-            if (item.hasMenu) menu.open();
+            if (item.hasMenu)
+                if (menu.active && menu.item && typeof menu.item.close === "function")
+                    menu.item.close();
+                else 
+                    menu.open();
             break;
         }
         event.accepted = true;
@@ -44,14 +49,16 @@ MouseArea {
         sourceComponent: SysTrayMenu {
             Component.onCompleted: this.open();
             trayItemMenuHandle: root.item.menu
+            trayItemId: root.item.id
             anchor {
                 window: root.QsWindow.window
-                rect.x: root.x + (Config.options.bar.vertical ? 0 : QsWindow.window?.width)
+                item: root
-                rect.y: root.y + (Config.options.bar.vertical ? QsWindow.window?.height : 0)
+                gravity: Config.options.bar.vertical
-                rect.height: root.height
+                    ? (Config.options.bar.bottom ? Edges.Left : Edges.Right)
-                rect.width: root.width
+                    : (Config.options.bar.bottom ? Edges.Top : Edges.Bottom)
-                edges: Config.options.bar.bottom ? (Edges.Top | Edges.Left) : (Edges.Bottom | Edges.Right)
+                edges: Config.options.bar.vertical
-                gravity: Config.options.bar.bottom ? (Edges.Top | Edges.Left) : (Edges.Bottom | Edges.Right)
+                    ? (Config.options.bar.bottom ? Edges.Left : Edges.Right)
+                    : (Config.options.bar.bottom ? Edges.Top : Edges.Bottom)
             }
             onMenuOpened: (window) => root.menuOpened(window);
             onMenuClosed: {

dots/.config/quickshell/ii/modules/ii/bar/SysTrayMenu.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import qs.services
 import qs.modules.common
 import qs.modules.common.widgets
@@ -9,6 +11,7 @@ import Quickshell
 PopupWindow {
     id: root
     required property QsMenuHandle trayItemMenuHandle
+    property string trayItemId: ""
     property real popupBackgroundMargin: 0
 
     signal menuClosed
@@ -173,6 +176,48 @@ PopupWindow {
                 }
             }
         }
+        RippleButton {
+            id: pinEntry
+            buttonRadius: popupBackground.radius - popupBackground.padding
+            horizontalPadding: 12
+            implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
+            implicitHeight: 36
+            Layout.topMargin: 0
+            Layout.bottomMargin: 0
+            Layout.fillWidth: true
+
+            visible: root.trayItemId !== undefined && root.trayItemId.length > 0 && stackView.depth === 1
+            releaseAction: () => TrayService.togglePin(root.trayItemId);
+
+            contentItem: RowLayout {
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    right: parent.right
+                    leftMargin: pinEntry.horizontalPadding
+                    rightMargin: pinEntry.horizontalPadding
+                }
+                spacing: 8
+
+                MaterialSymbol {
+                    iconSize: 18
+                    text: "push_pin"
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: TrayService.isPinned(root.trayItemId) ? Translation.tr("Unpin") : Translation.tr("Pin")
+                }
+            }
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            implicitHeight: 1
+            color: Appearance.colors.colSubtext
+            Layout.topMargin: 4
+            Layout.bottomMargin: 4
+        }
 
         Repeater {
             id: menuEntriesRepeater

dots/.config/quickshell/ii/services/TrayService.qml

@@ -33,6 +33,14 @@ Singleton {
     function unpin(itemId) {
         Config.options.tray.pinnedItems = Config.options.tray.pinnedItems.filter(id => id !== itemId);
     }
+    function isPinned(itemId) {
+        for (var i = 0; i < root.pinnedItems.length; i++) {
+            if (root.pinnedItems[i].id === itemId)
+                return true;
+        }
+        return false;
+    }
+
     function togglePin(itemId) {
         var pins = Config.options.tray.pinnedItems;
         if (pins.includes(itemId)) {

dots/.config/quickshell/ii/translations/en_US.json

@@ -604,5 +604,7 @@
   "Recognize music": "Recognize music",
   "Stroke width": "Stroke width",
   "Use varying shapes for password characters": "Use varying shapes for password characters",
-  "Battery full": "Battery full"
+  "Battery full": "Battery full",
+  "Pin": "Pin",
+  "Unpin": "Unpin"
 }

dots/.config/quickshell/ii/translations/zh_CN.json

@@ -718,5 +718,7 @@
   "No applications": "没有应用",
   "Creativity": "创意",
   "Move left": "左移",
-  "Pin to Start": "固定到“开始”屏幕"
+  "Pin to Start": "固定到“开始”屏幕",
+  "Pin": "固定",
+  "Unpin": "取消固定"
 }