From 1338b65aaa5755eef3bae50297b478db85bf33f5 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Wed, 20 Aug 2025 23:05:02 +0700
Subject: [PATCH] bar: tray overflow menu

---
 .../quickshell/ii/modules/bar/BarContent.qml  |  1 +
 .../quickshell/ii/modules/bar/StyledPopup.qml |  2 +-
 .config/quickshell/ii/modules/bar/SysTray.qml | 67 +++++++++++++++++--
 .../quickshell/ii/modules/common/Config.qml   |  1 +
 .../verticalBar/VerticalBarContent.qml        |  1 +
 5 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/.config/quickshell/ii/modules/bar/BarContent.qml b/.config/quickshell/ii/modules/bar/BarContent.qml
index e6bc137e8..35d42a009 100644
--- a/.config/quickshell/ii/modules/bar/BarContent.qml
+++ b/.config/quickshell/ii/modules/bar/BarContent.qml
@@ -317,6 +317,7 @@ Item { // Bar content region
                 visible: root.useShortenedForm === 0
                 Layout.fillWidth: false
                 Layout.fillHeight: true
+                invertSide: Config?.options.bar.bottom
             }
 
             Item {
diff --git a/.config/quickshell/ii/modules/bar/StyledPopup.qml b/.config/quickshell/ii/modules/bar/StyledPopup.qml
index 47c19ef21..02d3c7895 100644
--- a/.config/quickshell/ii/modules/bar/StyledPopup.qml
+++ b/.config/quickshell/ii/modules/bar/StyledPopup.qml
@@ -8,7 +8,7 @@ import Quickshell.Wayland
 LazyLoader {
     id: root
 
-    property MouseArea hoverTarget
+    property Item hoverTarget
     default property Item contentItem
 
     active: hoverTarget && hoverTarget.containsMouse
diff --git a/.config/quickshell/ii/modules/bar/SysTray.qml b/.config/quickshell/ii/modules/bar/SysTray.qml
index e315ff56d..45b2b3e62 100644
--- a/.config/quickshell/ii/modules/bar/SysTray.qml
+++ b/.config/quickshell/ii/modules/bar/SysTray.qml
@@ -2,6 +2,7 @@ import qs.modules.common
 import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import Quickshell.Services.SystemTray
 
 Item {
@@ -9,18 +10,76 @@ Item {
     implicitWidth: gridLayout.implicitWidth
     implicitHeight: gridLayout.implicitHeight
     property bool vertical: false
+    property bool invertSide: false
+    property bool trayOverflowOpen: false
+
+    property list<var> pinnedItems: SystemTray.items.values.filter(i => Config.options.bar.tray.pinnedItems.includes(i.id))
+    property list<var> unpinnedItems: SystemTray.items.values.filter(i => !Config.options.bar.tray.pinnedItems.includes(i.id))
 
     GridLayout {
         id: gridLayout
         columns: root.vertical ? 1 : -1
         anchors.fill: parent
-        rowSpacing: 10
+        rowSpacing: 6
         columnSpacing: 15
 
-        Repeater {
-            model: SystemTray.items
+        RippleButton {
+            id: trayOverflowButton
+            visible: root.unpinnedItems.length > 0
+            toggled: root.trayOverflowOpen
+            property bool containsMouse: hovered
 
-            SysTrayItem {
+            onClicked: root.trayOverflowOpen = !root.trayOverflowOpen
+
+            Layout.fillHeight: !root.vertical
+            Layout.fillWidth: root.vertical
+            background.implicitWidth: 24
+            background.implicitHeight: 24
+            background.anchors.centerIn: this
+            colBackgroundToggled: Appearance.colors.colSecondaryContainer
+            colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
+            colRippleToggled: Appearance.colors.colSecondaryContainerActive
+
+            contentItem: MaterialSymbol {
+                anchors.centerIn: parent
+                iconSize: Appearance.font.pixelSize.larger
+                text: "expand_more"
+                horizontalAlignment: Text.AlignHCenter
+                color: root.trayOverflowOpen ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnLayer2
+                rotation: (root.trayOverflowOpen ? 180 : 0) - (90 * root.vertical) + (180 * root.invertSide)
+                Behavior on rotation {
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+            }
+
+            StyledPopup {
+                hoverTarget: trayOverflowButton
+                active: root.trayOverflowOpen
+                
+                GridLayout {
+                    anchors.centerIn: parent
+                    columns: 4
+
+                    Repeater {
+                        model: root.unpinnedItems
+
+                        delegate: SysTrayItem {
+                            required property SystemTrayItem modelData
+                            item: modelData
+                            Layout.fillHeight: !root.vertical
+                            Layout.fillWidth: root.vertical
+                        }
+                    }
+                }
+            }
+        }
+
+        Repeater {
+            model: ScriptModel {
+                values: root.pinnedItems
+            }
+
+            delegate: SysTrayItem {
                 required property SystemTrayItem modelData
                 item: modelData
                 Layout.fillHeight: !root.vertical
diff --git a/.config/quickshell/ii/modules/common/Config.qml b/.config/quickshell/ii/modules/common/Config.qml
index 4055d7854..c938a5f86 100644
--- a/.config/quickshell/ii/modules/common/Config.qml
+++ b/.config/quickshell/ii/modules/common/Config.qml
@@ -162,6 +162,7 @@ Singleton {
                 }
                 property JsonObject tray: JsonObject {
                     property bool monochromeIcons: true
+                    property list<string> pinnedItems: [ "Fcitx" ]
                 }
                 property JsonObject workspaces: JsonObject {
                     property bool monochromeIcons: true
diff --git a/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml b/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml
index 43752946f..448ff2f36 100644
--- a/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml
+++ b/.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml
@@ -202,6 +202,7 @@ Item { // Bar content region
                 vertical: true
                 Layout.fillWidth: true
                 Layout.fillHeight: false
+                invertSide: Config?.options.bar.bottom
             }
 
             RippleButton { // Right sidebar button