feat: update styles for systray

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>
   );

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;
+    }
+  }
 }

widgets/bar/tray.tsx

@@ -1,18 +1,22 @@
 import { bind } from "astal";
 import AstalTray from "gi://AstalTray";
 
-export const Tray = () => {
 const tray = AstalTray.get_default();
 
-  for (const item of tray.get_items()) {
-    print(item.title);
-  }
-
+export const Tray = () => {
   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>
+  );
+};