From b74db6f1fa9e483bbf6ece242e78f4c575b582a0 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Mon, 4 Sep 2023 12:44:14 -0400
Subject: [PATCH] feat(ags): use revealers to make workspace widget cleaner

---
 config/ags/workspaces/workspaces.js   | 66 ++++++++++++---------------
 config/ags/workspaces/workspaces.scss |  3 ++
 2 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/config/ags/workspaces/workspaces.js b/config/ags/workspaces/workspaces.js
index 7f769c7..35aef89 100644
--- a/config/ags/workspaces/workspaces.js
+++ b/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, } = {}) => 
-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);
-      }]
-    ],
+export const Workspace = ({ i, } = {}) =>
+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'));
+    },
+    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);
+        }]
+      ],
+    }),
   }),
 });
 
@@ -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})),
     }),
   })],
 });
diff --git a/config/ags/workspaces/workspaces.scss b/config/ags/workspaces/workspaces.scss
index b235137..3a98e22 100644
--- a/config/ags/workspaces/workspaces.scss
+++ b/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;
   }
 }