feat: add tray and time widget

flake.nix

@@ -33,6 +33,7 @@
           hyprland
           apps
           battery
+          tray
         ];
       };
 
@@ -51,6 +52,7 @@
               hyprland
               apps
               battery
+              tray
             ];
           })
         ];

widget/bar/index.tsx

@@ -3,6 +3,8 @@ import { FocusedClient, WorkspaceButton } from "./workspace";
 import { Battery } from "./battery";
 import { Launcher } from "./launcher";
 import { Tailscale } from "./tailscale";
+import { Tray } from "./tray";
+import { Time } from "./time";
 
 export const WINDOW_NAME = "bar";
 
@@ -46,6 +48,8 @@ const End = () => {
     <box spacing={15}>
       <Tailscale />
       <Battery />
+      <Tray />
+      <Time />
     </box>
   );
 };

widget/bar/time.tsx

@@ -0,0 +1,12 @@
+import { GLib, Variable } from "astal";
+
+export const Time = () => {
+  const time = Variable("").poll(
+    1000,
+    () => GLib.DateTime.new_now_local().format("%I:%M:%S %p")!,
+  );
+
+  return (
+    <label cssClasses={["time"]} onDestroy={() => time.drop()} label={time()} />
+  );
+};

widget/bar/tray.tsx

@@ -0,0 +1,18 @@
+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);
+  }
+
+  return (
+    <box cssClasses={["tray"]}>
+      {bind(tray, "items").as((items) =>
+        items.map((item) => <image gicon={bind(item, "gicon")} />),
+      )}
+    </box>
+  );
+};