refactor!: start migration to latest ags

widget/workspaces.tsx

@@ -1,23 +1,35 @@
-import { bind } from "astal"
-import { Gdk } from "astal/gtk3"
+import { Gdk } from "ags/gtk4"
 import AstalHyprland from "gi://AstalHyprland?version=0.1"
+import { createBinding, For } from "gnim"
 
 export default function Workspaces({ monitor }: { monitor: Gdk.Monitor }) {
   const hypr = AstalHyprland.get_default()
+  const workspaces = createBinding(hypr, "workspaces").as(wss => wss.sort((a, b) => a.id - b.id))
 
-  return <box className="workspaces">
-    {bind(hypr, "workspaces").as(wss => wss.filter(ws => !(ws.id >= -99 && ws.id <= -2))
-      .sort((a, b) => a.id - b.id)
-      .map(ws => {
-        if (ws.monitor.model !== monitor.model) return <></>
-        return (
-          <button
-            className={bind(hypr, "focusedWorkspace").as(fw =>
-              ws === fw ? "focused" : "")}
-            onClicked={() => ws.focus()}>
-            {ws.id}
+  return (
+    <box class="workspaces">
+      <For each={workspaces}>
+        {(ws) => (
+          <button class={createBinding(hypr, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "")}>
+            <label label={ws.id.toString()} />
           </button>
-        )
-      }))}
-  </box>
+        )}
+      </For>
+    </box>
+  )
+  // return <box className="workspaces">
+  //   {bind(hypr, "workspaces").as(wss => wss.filter(ws => !(ws.id >= -99 && ws.id <= -2))
+  //     .sort((a, b) => a.id - b.id)
+  //     .map(ws => {
+  //       if (ws.monitor.model !== monitor.model) return <></>
+  //       return (
+  //         <button
+  //           className={bind(hypr, "focusedWorkspace").as(fw =>
+  //             ws === fw ? "focused" : "")}
+  //           onClicked={() => ws.focus()}>
+  //           {ws.id}
+  //         </button>
+  //       )
+  //     }))}
+  // </box>
 }