refacor

widget/modules/Workspaces/Workspaces.scss

@@ -0,0 +1,31 @@
+.Workspaces {
+    button {
+        all: unset;
+        background-color: black;
+        border-radius: 25px;
+
+        &:hover label {
+            background-color: gray;
+            border-color: black;
+            color: white;
+        }
+
+        &:active label {
+            background-color: white;
+            color: black;
+        }
+    }
+
+    label {
+        transition: 300ms;
+        padding: 5px 15px;
+        border-radius: 20px;
+        border: 1pt solid transparent;
+    }
+
+    .focused label {
+        background-color: white;
+        color: black;
+        border-color: #{"@theme_accent_color"};
+    }
+}

widget/modules/Workspaces/Workspaces.tsx

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