add tray items, no menu

config/Dimensions.qml

@@ -12,6 +12,7 @@ Singleton {
     property Mpris mpris: Mpris {}
     property Clock clock: Clock {}
     property Workspace workspace: Workspace {}
+    property Tray tray: Tray {}
 
     component Bar: QtObject {
         id: bar
@@ -53,4 +54,15 @@ Singleton {
         property int verticalPadding: 6
         property int horizontalPadding: 7
     }
+
+    component Tray: QtObject {
+        id: tray
+
+        property int spacing: 5
+        property int iconSize: 18
+        property int width: 30
+        property int height: 30
+        property int verticalPadding: 6
+        property int horizontalPadding: 7
+    }
 }

modules/bar/Bar.qml

@@ -3,6 +3,7 @@ import Quickshell
 import "components"
 import "components/hyprland"
 import "components/mpris"
+import "components/tray"
 import "../../config/"
 
 Scope {
@@ -57,6 +58,10 @@ Scope {
                 Workspaces {
                     anchors.verticalCenter: parent.verticalCenter
                 }
+
+                Tray {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
             }
 
             Row {

modules/bar/components/tray/Tray.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import Quickshell.Services.SystemTray
+import "../../../../config/"
+
+Row {
+    id: root
+
+    spacing: Dimensions.tray.spacing
+
+    Repeater {
+        model: SystemTray.items
+
+        TrayItem {}
+    }
+}

modules/bar/components/tray/TrayItem.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import "../../../../config/"
+import "../../../../styled/"
+import "menu/"
+
+Loader {
+    required property SystemTrayItem modelData
+
+    active: modelData.hasMenu
+
+    onLoaded: console.log(modelData.icon)
+    sourceComponent: item
+    property Component item: Clickable {
+        id: clickable
+
+        property bool menuOpen
+
+        width: Dimensions.tray.width
+        height: Dimensions.tray.height
+
+        onClicked: menuOpen = !menuOpen
+
+        IconImage {
+            id: icon
+            anchors.margins: 6
+            anchors.fill: parent
+            asynchronous: true
+            source: {
+                let icon = modelData.icon;
+                if (icon.includes("?path=")) {
+                    const [name, path] = icon.split("?path=");
+                    icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
+                }
+                return icon;
+            }
+            anchors.centerIn: parent
+        }
+
+        // Loader {
+        //     active: menuOpen && modelData.hasMenu
+        //
+        //     property Component menu: Menu {
+        //         menu: modelData.menu
+        //     }
+        // }
+        PopupWindow {
+
+            Menu {
+                menu: modelData.menu
+            }
+        }
+    }
+}

modules/bar/components/tray/menu/Menu.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import "../../../../../styled/"
+
+ColumnLayout {
+    property QsMenuOpener menu
+
+    Repeater {
+        model: modelData.children
+
+        Loader {
+            id: loader
+            required property QsMenuEntry modelData
+
+            active: modelData.enabled
+
+            sourceComponent: menuItem
+            property Component menuItem: MenuItem {
+                menuEntry: loader.modelData
+            }
+        }
+    }
+}

modules/bar/components/tray/menu/MenuItem.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import "../../../../../styled/"
+
+Clickable {
+    id: item
+    property QsMenuEntry menuEntry
+
+    implicitWidth: text.width
+
+    Text {
+        id: text
+        text: item.menuEntry.text
+
+        padding: 8
+    }
+}