workspaces and STRAIGHT STYLIN!

widget/Bar.tsx

@@ -9,6 +9,7 @@ import Tray from "./Tray";
 import SwayNC from "./SwayNC";
 import WirePlumber from "./WirePlumber";
 import Memory from "./Memory";
+import Workspaces from "./Hyprland/workspaces";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@@ -25,6 +26,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       <centerbox cssName="centerbox">
         <box halign={Gtk.Align.START}>
           <OS />
+          <Workspaces />
           <Tray />
           <Hyprland.Client />
         </box>

widget/Hyprland/workspaces.tsx

@@ -0,0 +1,44 @@
+import { bind } from "astal";
+import { Gdk } from "astal/gtk4";
+import Hyprland from "gi://AstalHyprland";
+
+const Workspaces = function () {
+  const hyprland = Hyprland.get_default();
+
+  const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
+    workspaces
+      .filter((workspace) => workspace.id > 0)
+      .sort((a, b) => {
+        if (a.id > b.id) {
+          return 1;
+        } else if (a.id < b.id) {
+          return -1;
+        }
+        return 0;
+      }),
+  );
+  const focusedWorkspace = bind(hyprland, "focused_workspace");
+  const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
+    workspaces.filter((workspace) => workspace.id < 0),
+  );
+
+  return (
+    <box cssClasses={["Workspaces"]}>
+      {workspaces.as((workspaces) => {
+        return workspaces.map((workspace) => (
+          <button
+            cursor={Gdk.Cursor.new_from_name("pointer", null)}
+            cssClasses={focusedWorkspace.as((focused) => [
+              focused.id === workspace.id ? "active" : "",
+            ])}
+            onClicked={() => workspace.focus()}
+          >
+            {workspace?.name}
+          </button>
+        ));
+      })}
+    </box>
+  );
+};
+
+export default Workspaces;

widget/Tray.tsx

@@ -1,5 +1,5 @@
 import { bind } from "astal";
-import { Gtk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 import AstalTray from "gi://AstalTray";
 
 const Tray = function () {
@@ -16,7 +16,7 @@ const Tray = function () {
       {trayItems.as((items) =>
         items.map((item) => {
           return (
-            <menubutton>
+            <menubutton cursor={Gdk.Cursor.new_from_name("pointer", null)}>
               <image
                 tooltip_text={item.title || item.tooltip.title}
                 file={item.iconName || "NONE"}