fix(ags bar workspace): make sure highlight is always in the right place

devices/wim/config/ags/js/bar/workspaces.js

@@ -1,5 +1,5 @@
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
-import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
+import { execAsync, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 import { Box, Overlay, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import EventBox from '../misc/cursorbox.js';
@@ -28,25 +28,32 @@ const Workspace = ({ i } = {}) =>
         }),
     });
 
-export default () => Overlay({
+export default () => {
+    const updateHighlight = () => {
+        const currentId = Hyprland.active.workspace.id;
+        const indicators = highlight.get_parent().get_children()[0].child.children;
+        const currentIndex = indicators.findIndex(w => w._id == currentId);
+
+        if (currentIndex < 0)
+            return;
+
+        highlight.setStyle(`margin-left: ${16 + currentIndex * 30}px`);
+    };
+    const highlight = Box({
+        valign: 'center',
+        halign: 'start',
+        className: 'button active',
+        connections: [[Hyprland.active.workspace, updateHighlight]],
+    });
+
+    const widget = Overlay({
         setup: self => {
             self.set_overlay_pass_through(
                 self.get_children()[1],
                 true,
             );
         },
-    overlays: [Box({
+        overlays: [highlight],
-        valign: 'center',
-        halign: 'start',
-        className: 'button active',
-        connections: [[Hyprland.active.workspace, self => {
-            const currentId = Hyprland.active.workspace.id;
-            const indicators = self.get_parent().get_children()[0].child.children;
-            const currentIndex = indicators.findIndex(w => w._id == currentId);
-
-            self.setStyle(`margin-left: ${16 + currentIndex * 30}px`);
-        }]],
-    })],
         child: EventBox({
             child: Box({
                 className: 'workspaces',
@@ -81,7 +88,13 @@ export default () => Overlay({
 
                     self._updateWorkspaces(self);
                     self._refresh(self);
+
+                    // Make sure the highlight doesn't go too far
+                    timeout(10, updateHighlight);
                 }]],
             }),
         }),
     });
+
+    return widget;
+};