Hyprland Dynamic Workspaces, and how to manage them

[inkeaton]

Hi!
I've been using AGS for a while (btw, really cool project :)). I use Hyprland, and, coming from EWW, i initially found it difficult to manage the dynamic workspaces that you can have in Hyprland.

The main problem is that Hyprland generates those workspaces on demand, and still calls them by number. So, if i initially have workspaces (1, 2, 3), and delete 1, i'll have (2, 3). Now, the workspace in position 1 is 2, and 2 is 3. This makes it more difficult to assign the button's link to the workspace

If i then recreate 1, i'll have (2, 3, 1). The relationship between the workspace and its position is still different.

Now it's been a while since i wrote this code, but i solved it this way:

function get_wsp_in_i(i) {
    let tmp = Hyprland.workspaces;
    // sort by id
    tmp.sort((a,b) => a.id - b.id);
    return tmp[i.toString() - 1].id;
}

// Dynamic Hyprland Workspaces button 
const Workspaces = () => Widget.Box({
    className: 'bar-wsp-pll',
    hpack: "center",
    // TO IMPROVE: Use a sub-property of Hyprland to find out when to update
    connections: [[Hyprland, self => {
        // generates an array of buttons, indicating the ws
        const arr = Array.from({ length: Hyprland.workspaces.length }, (_, i) => i + 1);
        self.children = arr.map(i => Widget.Button({
            // a bit stupid, but works
            onPrimaryClick: () => execAsync(`hyprctl dispatch workspace ${get_wsp_in_i(i)}`),
            className: Hyprland.active.workspace.id == get_wsp_in_i(i) ? 'bar-wsp-foc' : 'bar-wsp', 
        }));
    }]],
});

(I hope it's not that bad, i'm not very familiar with JS)

I was wondering if some of you has a better solution to this, because i think it's very inefficient.
Thanks in advance

[kotontrion]

The most inefficient thing in this is the destruction and recreation of every ws button on every change.
I wrote a dynamic ws indicator a few days ago, but didn't like it, so went back to persistent.

What I have done, is connecting to the workspace-added/removed signals. When a new Hyprland workspace is created, I create a button for it and insert it at the correct position. When Hyperland destroys a workspace I remove the button. This prevents unnecessary widget creation/destruction.
Note that I used workspace names instead of their ids, but if you don't specify names, they default to the id, the only difference would be that the position is alphanumeric so eg workspace 10 would be displayed before 2. You might want to switch everything over to ids, or modify the position calculation.

So here is what i wrote.

const WorkspaceButton = (name) => Widget.EventBox({
  class_name: "ws-button",
  attribute: {name: name},
  on_primary_click_release: () => Hyprland.sendMessage(`dispatch workspace name:${name}`),
  child: Widget.Label({
    label: name,
    class_name: "ws-button-label"
  })
})
  .hook(Hyprland.active.workspace, (button) => {
    button.toggleClassName("active", Hyprland.active.workspace.name === name);
  });

const Workspaces = () => Widget.Box({
  class_name: "ws-container",
  attribute: {
    ws: new Map(),
    onAdded: (box, ws) => {
      if(!ws) return;
      const wsButton = WorkspaceButton(ws);
      box.attribute.ws.set(ws, wsButton);
      const pos = box.children.filter(button => button.attribute.name <= ws ).length;
      box.add(wsButton);
      box.reorder_child(wsButton, pos);
      box.show_all()
    },
    onRemoved: (box, ws) => {
      if(!ws) return;
      const wsButton = box.attribute.ws.get(ws);
      box.remove(wsButton);
      wsButton.destroy();
      box.attribute.ws.delete(ws);
    }
  },
  setup: (box) => {
    const connID = Hyprland.connect("notify::workspaces", () => {
      Hyprland.workspaces.forEach(ws => box.attribute.onAdded(box, ws.name));
      Hyprland.disconnect(connID)
    })
  }
})
  .hook(Hyprland, (box, ws) => box.attribute.onAdded(box, ws),"workspace-added")
  .hook(Hyprland, (box, ws) => box.attribute.onRemoved(box, ws),"workspace-removed")

This is quite the change. So here are a few smaller improvements that could be done on your approach:

• subscribe to the notify::workspaces signal
• use properties to store the ws id

connections: [[Hyprland, self => {
        // generates an array of buttons, indicating the ws
        self.children = Hyprland.workspaces.map(ws => {
            const button = Widget.Button({
                    properties: [["id", ws.id]],
                    onPrimaryClick: () => execAsync(`hyprctl dispatch workspace ${button._id}`),
                    className: Hyprland.active.workspace.id == button._id ? 'bar-wsp-foc' : 'bar-wsp', 
            });
            return button;
        });
    }, "notify::workspaces"]],

Note: i didn't try this though. also you should move over to the new syntax using .hook and attribute.

[inkeaton]

Kooha-2024-02-02-10-33-46.webm

I've adapted the code you've given me in my configuration and it works quite well! (Maybe a bit weird when the workspace gets destroyed, but it's partly a matter of animations...)

I've written the code for my bar in September, and from what i've seen both the wiki and the program have grown a lot since then! i need to update and refactor it all...

Thanks again, have a nice day :)

[rafaeljacov]

I just sorted the workspaces array. Isn't that a simpler solution?

[playfulCloud]

@rafaeljacov There is working solution in Ayalur personal repo