From 7936ece744672e711d68dac2e32eb9bb1511d4fb Mon Sep 17 00:00:00 2001
From: tux <t@tux.rs>
Date: Tue, 17 Jun 2025 17:02:31 +0530
Subject: [PATCH] feat: update styles for systray

---
 widgets/bar/index.tsx  |  2 ++
 widgets/bar/style.scss | 10 ++++++++++
 widgets/bar/tray.tsx   | 20 ++++++++++++--------
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/widgets/bar/index.tsx b/widgets/bar/index.tsx
index e124fab..2a15aea 100644
--- a/widgets/bar/index.tsx
+++ b/widgets/bar/index.tsx
@@ -8,6 +8,7 @@ import { Profile } from "./profile";
 import { GPU } from "./gpu";
 import { CPU } from "./cpu";
 import { Launcher } from "./launcher";
+import { Tray } from "./tray";
 
 export const WINDOW_NAME = "bar";
 
@@ -55,6 +56,7 @@ const End = () => {
       <Profile />
       <Tailscale />
       <Battery />
+      <Tray />
       <Time />
     </box>
   );
diff --git a/widgets/bar/style.scss b/widgets/bar/style.scss
index 36f9d24..02f9a9d 100644
--- a/widgets/bar/style.scss
+++ b/widgets/bar/style.scss
@@ -67,4 +67,14 @@ window.Bar {
       -gtk-icon-size: 1.5rem;
     }
   }
+
+  .tray {
+    image {
+      -gtk-icon-size: 1.3rem;
+    }
+
+    menubutton {
+      padding: 0px 5px;
+    }
+  }
 }
diff --git a/widgets/bar/tray.tsx b/widgets/bar/tray.tsx
index a9db501..391bc9b 100644
--- a/widgets/bar/tray.tsx
+++ b/widgets/bar/tray.tsx
@@ -1,18 +1,22 @@
 import { bind } from "astal";
 import AstalTray from "gi://AstalTray";
 
+const tray = AstalTray.get_default();
+
 export const Tray = () => {
-  const tray = AstalTray.get_default();
-
-  for (const item of tray.get_items()) {
-    print(item.title);
-  }
-
   return (
-    <box cssClasses={["pill"]}>
+    <box cssClasses={["pill", "tray"]}>
       {bind(tray, "items").as((items) =>
-        items.map((item) => <image gicon={bind(item, "gicon")} />),
+        items.map((item) => <Item item={item} />),
       )}
     </box>
   );
 };
+
+const Item = ({ item }: { item: AstalTray.TrayItem }) => {
+  return (
+    <menubutton>
+      <image gicon={bind(item, "gicon")} />
+    </menubutton>
+  );
+};