1 files changed, 25 insertions, 1 deletions

diff --git a/widget/Bar.tsx b/widget/bar/Bar.tsx
index 02aa3ba..b057cdb 100644
--- a/widget/Bar.tsx
+++ b/widget/bar/Bar.tsx
@@ -1,5 +1,6 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { exec, GLib, Variable } from "astal"
+import { bind, exec, GLib, Variable } from "astal"
+import AstalTray from "gi://AstalTray?version=0.1";
 
 type NiriWorkspace = {
   id: number,
@@ -58,6 +59,28 @@ function Workspaces(args: WorkspacesArguments) {
 }
 
 
+function Tray() {
+  // BUG: personally I have one fantom icon being along other tray icons
+  // For now I don't have any ideas why this is happening
+  // TODO: rewrite this using more elements, as this is really restricted design
+  const tray = AstalTray.get_default();
+
+  return <box cssClasses={["Tray"]}>
+    {bind(tray, "items").as(items =>
+      items.map(item =>
+        <menubutton
+          setup={self => self.insert_action_group("dbusmenu", item.actionGroup)}
+          tooltipText={bind(item, "tooltipMarkup")}
+        >
+          <image gicon={bind(item, "gicon")} />
+          {Gtk.PopoverMenu.new_from_model(item.menuModel)}
+        </menubutton>
+      )
+    )}
+  </box>
+}
+
+
 type TimeArguments = {
   format: string,
 };
@@ -91,6 +114,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       </box>
 
       <box halign={Gtk.Align.END}>
+        <Tray />
         <Time format="%I:%M:%S %p %Z" />
       </box>
     </centerbox>