bar: tray overflow menu

.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 {

.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

.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

.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

.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