Fix astal client monitoring

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/user/gui/astal/config/widget/components/Workspaces.tsx

@@ -6,16 +6,13 @@ const hyprland = Hyprland.get_default();
 const BLOCK_SIZE = 10;
 
 const Workspace = ({ id }: { id: number }) => {
-  let maybeWorkspace: Variable<Hyprland.Workspace | undefined>;
-  let occupied: Variable<boolean>;
+  let clients: Variable<string[]>;
 
   try {
     const workspace = hyprland.get_workspace(id);
-    maybeWorkspace = Variable(workspace);
-    occupied = Variable(workspace.clients.length > 0);
+    clients = Variable(workspace.clients.map((client) => client.address));
   } catch (_) {
-    maybeWorkspace = Variable(undefined);
-    occupied = Variable(false);
+    clients = Variable([]);
   }
 
   const active = Variable.derive(
@@ -25,20 +22,38 @@ const Workspace = ({ id }: { id: number }) => {
 
   hyprland.connect("workspace-added", (_, workspace) => {
     if (workspace.id != id) return;
-    maybeWorkspace.set(workspace);
-    occupied.set(workspace.clients.length > 0);
-    workspace.connect("clients", (clients) => occupied.set(clients.length > 0));
+    clients.set(workspace.clients.map((client) => client.address));
   });
 
   hyprland.connect("workspace-removed", (_, workspaceId) => {
     if (workspaceId != id) return;
-    maybeWorkspace.set(undefined);
-    occupied.set(false);
+    clients.set([]);
   });
 
-  const className = Variable.derive([active, occupied], (active, occupied) => {
+  hyprland.connect("client-added", (_hyprland, client) => {
+    if (client.workspace.id != id) return;
+    clients.set([...clients.get(), client.address]);
+  });
+
+  // Explicit separate event handling instead of Variable.derive(workspaces, clients)
+  // because client-moved events appear to be broken if done that way.
+  hyprland.connect("client-moved", (_hyprland, client, workspace) => {
+    if (workspace.id == id) {
+      clients.set([...clients.get(), client.address]);
+    } else {
+      clients.set(
+        clients.get().filter((oldClient) => oldClient != client.address),
+      );
+    }
+  });
+
+  hyprland.connect("client-removed", (_hyprland, address) => {
+    clients.set(clients.get().filter((oldClient) => oldClient != address));
+  });
+
+  const className = Variable.derive([active, clients], (active, clients) => {
     if (active) return "button active";
-    if (occupied) return "button occupied";
+    if (clients.length > 0) return "button occupied";
     return "button";
   });