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

config/ags/workspaces/workspaces.js

@@ -7,7 +7,9 @@ const { execAsync, lookUpIcon } = ags.Utils;
 const { Box, Button, EventBox, Label, Icon } = ags.Widget;
 
 export const Workspace = ({ i, } = {}) =>
-EventBox({
+ags.Widget.Revealer({
+  transition: "slide_right",
+  child: EventBox({
     onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
     onHover: box => {
       box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
@@ -28,6 +30,7 @@ EventBox({
         }]
       ],
     }),
+  }),
 });
 
 var prev = Hyprland.active.workspace.id;
@@ -42,29 +45,20 @@ export const Workspaces = props => Box({
         new Promise(resolve => {
 
           Hyprland.workspaces.forEach(ws => {
-            if (ws.id > 0) {
-              workspaces.push(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;
-          }
+          box.children.forEach(rev => rev.reveal_child = false);
+          workspaces.forEach(ws => {
+            box.children[ws.id - 1].reveal_child = true;
+          });
 
         });
       }]],
+      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;
   }
 }