feat: migrate to ags v3

widgets/bar/workspace.tsx

@@ -1,37 +1,33 @@
-import { Variable, bind } from "astal";
-import { Gdk, Gtk } from "astal/gtk4";
-import { ButtonProps } from "astal/gtk4/widget";
+import { createBinding, createComputed } from "ags";
+import { Gdk, Gtk } from "ags/gtk4";
 import AstalHyprland from "gi://AstalHyprland";
 
-type WsButtonProps = ButtonProps & {
+type WsButtonProps = {
   ws: AstalHyprland.Workspace;
 };
 
-const Workspace = ({ ws, ...props }: WsButtonProps) => {
+const Workspace = ({ ws }: WsButtonProps) => {
   const hyprland = AstalHyprland.get_default();
-  const classNames = Variable.derive(
-    [bind(hyprland, "focusedWorkspace"), bind(hyprland, "clients")],
-    (fws, _) => {
-      const classes = ["workspace-button"];
+  const focusedWorkspace = createBinding(hyprland, "focusedWorkspace");
 
-      const active = fws.id == ws.id;
-      active && classes.push("active");
+  const classNames = createComputed([focusedWorkspace], (fws) => {
+    const classes = ["workspace-button"];
 
-      const occupied = hyprland.get_workspace(ws.id)?.get_clients().length > 0;
-      occupied && classes.push("occupied");
-      return classes;
-    },
-  );
+    const active = fws.id == ws.id;
+    active && classes.push("active");
+
+    const occupied = hyprland.get_workspace(ws.id)?.get_clients().length > 0;
+    occupied && classes.push("occupied");
+    return classes;
+  });
 
   return (
     <button
-      cssClasses={classNames()}
-      onDestroy={() => classNames.drop()}
+      cssClasses={classNames}
       valign={Gtk.Align.CENTER}
       halign={Gtk.Align.CENTER}
       onClicked={() => ws.focus()}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
-      {...props}
     />
   );
 };
@@ -49,14 +45,11 @@ export const WorkspaceButton = () => {
 
 export const FocusedClient = () => {
   const hyprland = AstalHyprland.get_default();
-  const focused = bind(hyprland, "focusedClient");
+  const focused = createBinding(hyprland, "focusedClient");
 
   return (
     <box cssClasses={["focused-client"]} visible={focused.as(Boolean)}>
-      {focused.as(
-        (client) =>
-          client && <label label={bind(client, "initialTitle").as(String)} />,
-      )}
+      <label label={focused((client) => client.title)} />
     </box>
   );
 };