From d5a24064e9d8fcb9d738e32b20d231bcd82d821e Mon Sep 17 00:00:00 2001
From: tux <t@tux.rs>
Date: Sat, 31 May 2025 18:38:21 +0530
Subject: [PATCH] feat: add tray and time widget

---
 flake.nix            |  2 ++
 widget/bar/index.tsx |  4 ++++
 widget/bar/time.tsx  | 12 ++++++++++++
 widget/bar/tray.tsx  | 18 ++++++++++++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 widget/bar/time.tsx
 create mode 100644 widget/bar/tray.tsx

diff --git a/flake.nix b/flake.nix
index 468ee2c..b6e0932 100644
--- a/flake.nix
+++ b/flake.nix
@@ -33,6 +33,7 @@
           hyprland
           apps
           battery
+          tray
         ];
       };
 
@@ -51,6 +52,7 @@
               hyprland
               apps
               battery
+              tray
             ];
           })
         ];
diff --git a/widget/bar/index.tsx b/widget/bar/index.tsx
index 5c45a77..7df8795 100644
--- a/widget/bar/index.tsx
+++ b/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>
   );
 };
diff --git a/widget/bar/time.tsx b/widget/bar/time.tsx
new file mode 100644
index 0000000..fb11998
--- /dev/null
+++ b/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()} />
+  );
+};
diff --git a/widget/bar/tray.tsx b/widget/bar/tray.tsx
new file mode 100644
index 0000000..34530b6
--- /dev/null
+++ b/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>
+  );
+};