From 76b46b18070adb2b98ed7652cb019db0aee7bb65 Mon Sep 17 00:00:00 2001
From: Joshua Yuen <joshuayuen99@gmail.com>
Date: Sat, 12 Sep 2026 01:33:41 -0400
Subject: [PATCH] Added AGS workspaces and clock

---
 modules/home/ags/app/style.scss            | 17 +++++++++++++++++
 modules/home/ags/app/widget/Bar.tsx        | 10 ++++++++--
 modules/home/ags/app/widget/Clock.tsx      | 10 ++++++++++
 modules/home/ags/app/widget/Workspaces.tsx | 20 ++++++++++++++++++++
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 modules/home/ags/app/widget/Clock.tsx
 create mode 100644 modules/home/ags/app/widget/Workspaces.tsx

diff --git a/modules/home/ags/app/style.scss b/modules/home/ags/app/style.scss
index 9e4d14c..d589338 100644
--- a/modules/home/ags/app/style.scss
+++ b/modules/home/ags/app/style.scss
@@ -17,3 +17,20 @@
     padding: 4px 12px;
     color: $base05;
 }
+
+.ws {
+    min-width: 20px;
+    border-radius: 6px;
+    margin: 0 2px;
+    padding: 0 6px;
+}
+
+.ws.active {
+    background: $base0D;
+    color: $base00;
+}
+
+.clock {
+    font-weight: bold;
+    margin: 0 8px;
+}
diff --git a/modules/home/ags/app/widget/Bar.tsx b/modules/home/ags/app/widget/Bar.tsx
index b4a7fdf..6a31361 100644
--- a/modules/home/ags/app/widget/Bar.tsx
+++ b/modules/home/ags/app/widget/Bar.tsx
@@ -1,4 +1,6 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk3"
+import Workspaces from "./Workspaces"
+import Clock from "./Clock"
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
@@ -17,12 +19,16 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
                     className="bar-left"
                     halign={Gtk.Align.START}
                     valign={Gtk.Align.CENTER}
-                />
+                >
+                    <Workspaces />
+                </box>
                 <box
                     className="bar-center"
                     halign={Gtk.Align.CENTER}
                     valign={Gtk.Align.CENTER}
-                />
+                >
+                    <Clock />
+                </box>
                 <box
                     className="bar-right"
                     halign={Gtk.Align.END}
diff --git a/modules/home/ags/app/widget/Clock.tsx b/modules/home/ags/app/widget/Clock.tsx
new file mode 100644
index 0000000..eeda39b
--- /dev/null
+++ b/modules/home/ags/app/widget/Clock.tsx
@@ -0,0 +1,10 @@
+import GLib from "gi://GLib"
+import { Variable, bind } from "astal"
+
+const time = Variable("").poll(1000, () =>
+    GLib.DateTime.new_now_local().format("%I:%M %p")!.replace(/^0/, "")
+)
+
+export default function Clock() {
+    return <label className="clock" label={bind(time)} />
+}
diff --git a/modules/home/ags/app/widget/Workspaces.tsx b/modules/home/ags/app/widget/Workspaces.tsx
new file mode 100644
index 0000000..7d91321
--- /dev/null
+++ b/modules/home/ags/app/widget/Workspaces.tsx
@@ -0,0 +1,20 @@
+import Hyprland from "gi://AstalHyprland"
+import { bind } from "astal"
+
+const hypr = Hyprland.get_default()
+const focused = bind(hypr, "focused-workspace").as((ws) => ws?.id ?? -1)
+
+export default function Workspaces() {
+    return (
+        <box className="workspaces">
+            {[1, 2, 3, 4, 5].map((i) => (
+                <button
+                    className={focused.as((f) => (f === i ? "ws active" : "ws"))}
+                    onClicked={() => hypr.dispatch("workspace", String(i))}
+                >
+                    <label label={String(i)} />
+                </button>
+            ))}
+        </box>
+    )
+}