working bar

widget/workspaces.tsx

@@ -0,0 +1,24 @@
+import Hyprland from "gi://AstalHyprland"
+import { bind, } from "astal"
+
+export default function Workspaces() {
+  const hypr = Hyprland.get_default()
+
+  return <box cssClasses={["Workspaces"]}>
+    {bind(hypr, "workspaces").as((workspaces) =>
+      workspaces
+        .filter(ws => !(ws.id >= -99 && ws.id < -2))
+        .sort((a, b) => a.id - b.id)
+        .map((ws) => (
+          <button
+            onClicked={() => ws.focus()}
+            cssClasses={bind(hypr, "focusedWorkspace").as((active) =>
+              ws === active ? ["focused"] : [],
+            )}
+          >
+            {ws.id}
+          </button>
+        )),
+    )}
+  </box >
+}