feat(ags): use revealers to make workspace widget cleaner

config/ags/workspaces/workspaces.js

@@ -6,27 +6,30 @@ const { Hyprland, Applications } = ags.Service;
 const { execAsync, lookUpIcon } = ags.Utils;
 const { Box, Button, EventBox, Label, Icon } = ags.Widget;
 
-export const Workspace = ({ i, } = {}) => 
+export const Workspace = ({ i, } = {}) =>
-EventBox({
+ags.Widget.Revealer({
-  onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
+  transition: "slide_right",
-  onHover: box => {
+  child: EventBox({
-    box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
+    onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
-  },
+    onHover: box => {
-  onHoverLost: box => {
+      box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
-    box.window.set_cursor(null);
+    },
-  },
+    onHoverLost: box => {
-  child: Box({
+      box.window.set_cursor(null);
-    className: 'button',
+    },
-    child: Label(`${i}`),
+    child: Box({
-    connections: [
+      className: 'button',
-      [Hyprland, btn => {
+      child: Label(`${i}`),
-        const { workspaces, active } = Hyprland;
+      connections: [
-        const occupied = workspaces.has(i) && workspaces.get(i).windows > 0;
+        [Hyprland, btn => {
-        btn.toggleClassName('active', active.workspace.id === i);
+          const { workspaces, active } = Hyprland;
-        btn.toggleClassName('occupied', occupied);
+          const occupied = workspaces.has(i) && workspaces.get(i).windows > 0;
-        btn.toggleClassName('empty', !occupied);
+          btn.toggleClassName('active', active.workspace.id === i);
-      }]
+          btn.toggleClassName('occupied', occupied);
-    ],
+          btn.toggleClassName('empty', !occupied);
+        }]
+      ],
+    }),
   }),
 });
 
@@ -42,29 +45,20 @@ export const Workspaces = props => Box({
         new Promise(resolve => {
 
           Hyprland.workspaces.forEach(ws => {
-            if (ws.id > 0) {
+            if (ws.id > 0) workspaces.push(ws);
-              workspaces.push(ws);
-            }
           });
 
           resolve();
         }).then(value => {
 
-          if (workspaces.length > 0) {
+          box.children.forEach(rev => rev.reveal_child = false);
-            let currentId = Hyprland.active.workspace.id;
+          workspaces.forEach(ws => {
-            let qtyChange = Number(currentId - box.children.length);
+            box.children[ws.id - 1].reveal_child = true;
-
+          });
-            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;
-          }
 
         });
       }]],
+      children: Array.from({ length: 10 }, (_, i) => i + 1).map(i => Workspace({ i: i})),
     }),
   })],
 });

config/ags/workspaces/workspaces.scss

@@ -16,12 +16,15 @@
   
   .empty {
     border: none;
+    transition: border-color 0.3s ease-in-out;
   }
   .occupied {
     border: 2px solid $bg;
     background: $contrastbg;
+    transition: border-color 0.3s ease-in-out;
   }
   .active {
     border: 2px solid #50fa7b;
+    transition: border-color 0.3s ease-in-out;
   }
 }