Added AGS workspaces and clock

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

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}

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)} />
+}

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