workspaces and STRAIGHT STYLIN!

style.scss

@@ -22,8 +22,7 @@ button {
   font-family: inherit;
 
   label:hover {
-    color: $base;
-    background: $rosewater;
+    background: $crust;
   }
 }
 
@@ -33,7 +32,8 @@ label {
   font-family: inherit;
   color: $mauve;
   padding: 4px 12px;
-  background: $surface0;
+  background: $mantle;
+  border: 4px solid $crust;
   border-radius: 8px;
 }
 
@@ -43,20 +43,18 @@ label {
 
 .active {
   label {
-    background: $rosewater;
-    color: $base;
+    background: $crust;
   }
 }
 
 .Arch {
   -gtk-icon-size: 24px;
-  padding: 4px 8px 4px 8px;
+  padding: 4px 10px;
   border-radius: 8px;
-  background: $surface0;
+  background: $crust;
 
   &:hover {
-    background: $rosewater;
-    color: $base;
+    background: $surface0;
   }
 }
 
@@ -71,6 +69,18 @@ label {
   margin: 0 4px;
 }
 
+.Workspaces {
+  background: $mantle;
+  padding: 2px;
+  margin: 2px;
+  border-radius: 8px;
+  border: 4px solid $crust;
+
+  > * {
+    margin: 4px;
+  }
+}
+
 .WirePlumberMenu {
   contents {
     all: initial;
@@ -80,10 +90,15 @@ label {
     all: initial;
   }
 
+  button {
+    margin: 4px 0;
+  }
+
   box {
-    padding: 12px;
+    padding: 4px 12px;
     border-radius: 8px;
-    background: rgba($color: $base, $alpha: 0.9);
+    border: 4px solid $crust;
+    background: rgba($color: $mantle, $alpha: 0.9);
   }
 }
 
@@ -92,7 +107,7 @@ window.Bar {
 
   > centerbox {
     background: rgba($color: $base, $alpha: 0.75);
-    border-bottom: 1px solid $rosewater;
+    border-bottom: 4px solid $crust;
 
     > box {
       margin: 6px;

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"}