From 2a6b0a1bb29ebb40502c16b4adbcd6607709e036 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 21 Nov 2024 10:32:18 -0500
Subject: [PATCH] feat(ags): add anims to current-client

---
 nixosModules/ags/config/widgets/bar/binto.tsx |  2 +-
 .../widgets/bar/items/current-client.tsx      | 45 ++++++++++++-------
 .../config/widgets/bar/items/current-icon.tsx | 37 +++++++++------
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/nixosModules/ags/config/widgets/bar/binto.tsx b/nixosModules/ags/config/widgets/bar/binto.tsx
index f53540b3..be063eb8 100644
--- a/nixosModules/ags/config/widgets/bar/binto.tsx
+++ b/nixosModules/ags/config/widgets/bar/binto.tsx
@@ -26,7 +26,7 @@ export default () => (
             <box hexpand halign={Gtk.Align.START}>
                 <CurrentIcon />
 
-                <Separator size={8} />
+                {/* <Separator size={8} />*/}
 
                 <SysTray />
 
diff --git a/nixosModules/ags/config/widgets/bar/items/current-client.tsx b/nixosModules/ags/config/widgets/bar/items/current-client.tsx
index 4657e54e..24a5ed32 100644
--- a/nixosModules/ags/config/widgets/bar/items/current-client.tsx
+++ b/nixosModules/ags/config/widgets/bar/items/current-client.tsx
@@ -1,4 +1,5 @@
 import { bind, Variable } from 'astal';
+import { Gtk } from 'astal/gtk3';
 
 import AstalApps from 'gi://AstalApps';
 import AstalHyprland from 'gi://AstalHyprland';
@@ -15,12 +16,14 @@ export default () => {
     const focusedIcon = Variable<string>('');
     const focusedTitle = Variable<string>('');
 
-    let lastFocused: string | undefined;
+    let lastFocusedAddress: string | null;
+
 
     const updateVars = (
         client: AstalHyprland.Client | null = hyprland.get_focused_client(),
     ) => {
-        lastFocused = client?.get_address();
+        lastFocusedAddress = client ? client.get_address() : null;
+
         const app = applications.fuzzy_query(
             client?.get_class() ?? '',
         )[0];
@@ -37,7 +40,7 @@ export default () => {
 
         focusedTitle.set(client?.get_title() ?? '');
         const id = client?.connect('notify::title', (c) => {
-            if (c.get_address() !== lastFocused) {
+            if (c.get_address() !== lastFocusedAddress) {
                 c.disconnect(id);
             }
             focusedTitle.set(c.get_title());
@@ -57,22 +60,30 @@ export default () => {
     });
 
     return (
-        <box
-            className="bar-item current-window"
-            visible={bind(focusedTitle).as((title) => title !== '')}
+        <revealer
+            transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+            revealChild={bind(focusedTitle).as((title) => title !== '')}
         >
-            <icon
-                css="font-size: 32px;"
-                icon={bind(focusedIcon)}
-                visible={bind(visibleIcon)}
-            />
+            <box className="bar-item current-window">
+                <revealer
+                    transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+                    revealChild={bind(visibleIcon)}
+                >
+                    <box>
+                        <icon
+                            css="font-size: 32px;"
+                            icon={bind(focusedIcon)}
+                        />
 
-            <Separator size={8} />
+                        <Separator size={8} />
+                    </box>
+                </revealer>
 
-            <label
-                label={bind(focusedTitle)}
-                truncate
-            />
-        </box>
+                <label
+                    label={bind(focusedTitle)}
+                    truncate
+                />
+            </box>
+        </revealer>
     );
 };
diff --git a/nixosModules/ags/config/widgets/bar/items/current-icon.tsx b/nixosModules/ags/config/widgets/bar/items/current-icon.tsx
index 7883b032..8deee949 100644
--- a/nixosModules/ags/config/widgets/bar/items/current-icon.tsx
+++ b/nixosModules/ags/config/widgets/bar/items/current-icon.tsx
@@ -1,8 +1,10 @@
 import { bind, Variable } from 'astal';
+import { Gtk } from 'astal/gtk3';
 
 import AstalApps from 'gi://AstalApps';
 import AstalHyprland from 'gi://AstalHyprland';
 
+import Separator from '../../misc/separator';
 import { hyprMessage } from '../../../lib';
 
 
@@ -13,15 +15,16 @@ export default () => {
     const visibleIcon = Variable<boolean>(false);
     const focusedIcon = Variable<string>('');
 
-    let lastFocused: string | undefined;
+    let lastFocusedAddress: string | null;
 
     const updateVars = (
         client: AstalHyprland.Client | null = hyprland.get_focused_client(),
     ) => {
-        lastFocused = client?.get_address();
-        const app = applications.fuzzy_query(
-            client?.get_class() ?? '',
-        )[0];
+        lastFocusedAddress = client ? client.get_address() : null;
+
+        const app = client ?
+            applications.fuzzy_query(client.get_class())[0] :
+            null;
 
         const icon = app?.iconName;
 
@@ -34,7 +37,7 @@ export default () => {
         }
 
         const id = client?.connect('notify::title', (c) => {
-            if (c.get_address() !== lastFocused) {
+            if (c.get_address() !== lastFocusedAddress) {
                 c.disconnect(id);
             }
         });
@@ -53,14 +56,20 @@ export default () => {
     });
 
     return (
-        <box
-            className="bar-item current-window"
-            visible={bind(visibleIcon)}
+        <revealer
+            transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+            revealChild={bind(visibleIcon)}
         >
-            <icon
-                css="font-size: 32px;"
-                icon={bind(focusedIcon)}
-            />
-        </box>
+            <box>
+                <box className="bar-item current-window">
+                    <icon
+                        css="font-size: 32px;"
+                        icon={bind(focusedIcon)}
+                    />
+                </box>
+
+                <Separator size={8} />
+            </box>
+        </revealer>
     );
 };