feat(ags): add workspace widget WIP

config/ags/style.scss

@@ -5,3 +5,4 @@
 @import "/home/matt/.nix/config/ags/colors.scss";
 @import "/home/matt/.nix/config/ags/powermenu/powermenu.scss";
 @import "/home/matt/.nix/config/ags/traybuttons/traybuttons.scss";
+@import "/home/matt/.nix/config/ags/workspaces/workspaces.scss";

config/ags/traybuttons/traybuttons.js

@@ -1,9 +1,10 @@
 import Gdk from 'gi://Gdk';
 const display = Gdk.Display.get_default();
 import { CurrentWindow } from 'file:///home/matt/.nix/config/ags/current-window/current-window.js';
+import { Workspaces } from 'file:///home/matt/.nix/config/ags/workspaces/workspaces.js';
 
 const Separator = () => ags.Widget.Box({
-  style: 'min-width: 8px; min-height: 8px',
+  style: 'min-width: 12px;',
 });
 
 ags.Utils.subprocess(
@@ -127,6 +128,10 @@ export const LeftBar = ags.Widget.Window({
 
           HeartToggle,
 
+          Separator(),
+
+          Workspaces(),
+
         ],
       }),
 

config/ags/workspaces/workspaces.js

@@ -0,0 +1,70 @@
+// https://github.com/Aylur/dotfiles/blob/f03e58ba0d3b56f1144631c179ab27357e466753/.config/ags/modules/hyprland.js#L4
+import Gdk from 'gi://Gdk';
+const display = Gdk.Display.get_default();
+const { App } = ags;
+const { Hyprland, Applications } = ags.Service;
+const { execAsync, lookUpIcon } = ags.Utils;
+const { Box, Button, EventBox, Label, Icon } = ags.Widget;
+
+export const Workspace = ({ i, } = {}) => 
+EventBox({
+  onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
+  onHover: box => {
+    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+  },
+  onHoverLost: box => {
+    box.window.set_cursor(null);
+  },
+  child: Box({
+    className: 'button',
+    child: Label(`${i}`),
+    connections: [
+      [Hyprland, btn => {
+        const { workspaces, active } = Hyprland;
+        const occupied = workspaces.has(i) && workspaces.get(i).windows > 0;
+        btn.toggleClassName('active', active.workspace.id === i);
+        btn.toggleClassName('occupied', occupied);
+        btn.toggleClassName('empty', !occupied);
+      }]
+    ],
+  }),
+});
+
+var prev = Hyprland.active.workspace.id;
+
+export const Workspaces = props => Box({
+  className: 'workspaces panel-button',
+  children: [EventBox({
+    child: Box({
+      connections: [[Hyprland, box => {
+        let workspaces = [];
+
+        new Promise(resolve => {
+
+          Hyprland.workspaces.forEach(ws => {
+            if (ws.id > 0) {
+              workspaces.push(ws);
+            }
+          });
+
+          resolve();
+        }).then(value => {
+
+          if (workspaces.length > 0) {
+            let currentId = Hyprland.active.workspace.id;
+            let qtyChange = Number(currentId - box.children.length);
+
+            if (qtyChange != 0 && currentId != prev) {
+              box.get_children().forEach(ch => ch.destroy());
+              box.children = Array.from(
+                { length: Math.max(...workspaces.map(ws => ws.id)) },
+                (_, i) => i + 1).map(i => Workspace({ i: i}));
+            }
+            prev = currentId;
+          }
+
+        });
+      }]],
+    }),
+  })],
+});

config/ags/workspaces/workspaces.scss

@@ -0,0 +1,27 @@
+.workspaces {
+  background-color: $bg;
+  border-radius: 80px;
+  border: 2px solid #1b1b1b;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 12px;
+  padding-right: 12px;
+
+  .button {
+    margin: 2px;
+    min-width: 20px;
+    border-radius: 100%;
+    * {color: transparent;}
+  }
+  
+  .empty {
+    border: none;
+  }
+  .occupied {
+    border: 2px solid $bg;
+    background: $contrastbg;
+  }
+  .active {
+    border: 2px solid #50fa7b;
+  }
+}