From cb617cbb919964630d16a1fe085a6358bfd465b6 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Fri, 27 Sep 2024 21:14:58 -0400
Subject: [PATCH] feat(agsV2): add workspaces and fix types

---
 lib/mk-types/default.nix                      |   5 +-
 lib/mk-types/package-lock.json                | Bin 51200 -> 66736 bytes
 lib/mk-types/package.json                     |   2 +-
 .../ags/v2/widgets/bar/fullscreen.tsx         |   6 +-
 .../ags/v2/widgets/bar/items/battery.tsx      |   7 +-
 .../v2/widgets/bar/items/current-client.tsx   |  14 +-
 .../ags/v2/widgets/bar/items/workspaces.tsx   | 167 ++++++++++++++++++
 nixosModules/ags/v2/widgets/bar/style.scss    |  29 ++-
 nixosModules/ags/v2/widgets/bar/wim.tsx       |   5 +
 9 files changed, 215 insertions(+), 20 deletions(-)
 create mode 100644 nixosModules/ags/v2/widgets/bar/items/workspaces.tsx

diff --git a/lib/mk-types/default.nix b/lib/mk-types/default.nix
index abd74e61..fc397453 100644
--- a/lib/mk-types/default.nix
+++ b/lib/mk-types/default.nix
@@ -12,7 +12,7 @@ in
     pname = "${pname}-types";
     version = "0.0.0";
 
-    npmDepsHash = "sha256-8De8tRUKzRhD1jyx0anYNPMhxZyIr2nI45HdK6nb8jI=";
+    npmDepsHash = "sha256-3ll4Xd5F8ZH/7q/gOF0jgerM6QRk71d93XIwtDssfxU=";
 
     src = ./.;
     dontNpmBuild = true;
@@ -22,8 +22,7 @@ in
           ${concatMapStringsSep "\n" (p: "-g ${p.package.dev}/share/gir-1.0 \\") withGirNames}
           -g ${ts-for-gir-src}/girs \
           --ignoreVersionConflicts \
-          --package \
-          -e gjs -o ./types
+          -o ./types
     '';
 
     installPhase = ''
diff --git a/lib/mk-types/package-lock.json b/lib/mk-types/package-lock.json
index 47c396a27bdef11fbfda9bd4a6204701b2e270db..50c538187628906896b4afe6fb22b0a4db7b4fb6 100644
GIT binary patch
delta 7146
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

delta 2154
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
QKl`^ccf~jV`O}^M0nG^u9{>OV

diff --git a/lib/mk-types/package.json b/lib/mk-types/package.json
index 3aaa4533..5027ded4 100644
--- a/lib/mk-types/package.json
+++ b/lib/mk-types/package.json
@@ -1,5 +1,5 @@
 {
     "dependencies": {
-        "@ts-for-gir/cli": "^3.3.0"
+        "@ts-for-gir/cli": "4.0.0-beta.16"
     }
 }
diff --git a/nixosModules/ags/v2/widgets/bar/fullscreen.tsx b/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
index 9ae89b65..a73603ca 100644
--- a/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
+++ b/nixosModules/ags/v2/widgets/bar/fullscreen.tsx
@@ -51,7 +51,10 @@ export default ({
     gdkmonitor = Gdk.Display.get_default()?.get_monitor(0) as Gdk.Monitor,
     child,
     ...rest
-}: Widget.WindowProps) => {
+}: {
+    anchor: Astal.WindowAnchor
+    gdkmonitor?: Gdk.Monitor
+} & Widget.WindowProps) => {
     const monitor = get_hyprland_monitor_desc(gdkmonitor);
     const BarVisible = Variable(true);
 
@@ -143,7 +146,6 @@ export default ({
             name={`bar-${monitor}`}
             layer={Astal.Layer.OVERLAY}
             gdkmonitor={gdkmonitor}
-            margins={[-1, -1, -1, -1]}
             anchor={anchor}
             {...rest}
         >
diff --git a/nixosModules/ags/v2/widgets/bar/items/battery.tsx b/nixosModules/ags/v2/widgets/bar/items/battery.tsx
index 2b8c84c8..883ca22d 100644
--- a/nixosModules/ags/v2/widgets/bar/items/battery.tsx
+++ b/nixosModules/ags/v2/widgets/bar/items/battery.tsx
@@ -1,4 +1,4 @@
-import { bind, Widget } from 'astal';
+import { bind } from 'astal';
 
 import AstalBattery from 'gi://AstalBattery';
 const Battery = AstalBattery.get_default();
@@ -7,12 +7,11 @@ import Separator from '../../misc/separator';
 
 
 const LOW_BATT = 20;
-const SPACING = 8;
 
 export default () => (
     <box className="bar-item battery">
         <icon
-            setup={(self: Widget.Icon) => {
+            setup={(self) => {
                 const update = () => {
                     const percent = Math.round(Battery.get_percentage() * 100);
                     const level = Math.floor(percent / 10) * 10;
@@ -37,7 +36,7 @@ export default () => (
             }}
         />
 
-        <Separator size={SPACING} />
+        <Separator size={8} />
 
         <label label={bind(Battery, 'percentage').as((v) => `${Math.round(v * 100)}%`)} />
     </box>
diff --git a/nixosModules/ags/v2/widgets/bar/items/current-client.tsx b/nixosModules/ags/v2/widgets/bar/items/current-client.tsx
index e355bee0..b25b6f45 100644
--- a/nixosModules/ags/v2/widgets/bar/items/current-client.tsx
+++ b/nixosModules/ags/v2/widgets/bar/items/current-client.tsx
@@ -1,6 +1,4 @@
-import { bind, Widget } from 'astal';
-
-import Pango from 'gi://Pango?version=1.0';
+import { bind } from 'astal';
 
 import AstalApps from 'gi://AstalApps?version=0.1';
 const Applications = AstalApps.Apps.new();
@@ -11,8 +9,6 @@ const Hyprland = AstalHyprland.get_default();
 import Separator from '../../misc/separator';
 
 
-const SPACING = 8;
-
 export default () => {
     const focused = bind(Hyprland, 'focusedClient');
 
@@ -23,10 +19,10 @@ export default () => {
         >
             <icon
                 css="font-size: 32px;"
-                setup={(self: Widget.Icon) => {
+                setup={(self) => {
                     self.hook(Hyprland, 'notify::focused-client', () => {
                         const app = Applications.query(
-                            Hyprland.get_focused_client().get_class(),
+                            Hyprland.get_focused_client()?.get_class() ?? '',
                             false,
                         )[0];
 
@@ -35,12 +31,12 @@ export default () => {
                 }}
             />
 
-            <Separator size={SPACING} />
+            <Separator size={8} />
 
             {focused.as((client) => (client && (
                 <label
                     label={bind(client, 'title').as(String)}
-                    truncate={Pango.EllipsizeMode.END}
+                    truncate
                 />
             )))}
         </box>
diff --git a/nixosModules/ags/v2/widgets/bar/items/workspaces.tsx b/nixosModules/ags/v2/widgets/bar/items/workspaces.tsx
new file mode 100644
index 00000000..bc836908
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/bar/items/workspaces.tsx
@@ -0,0 +1,167 @@
+import { Gtk, idle, timeout, Widget } from 'astal';
+
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+const Hyprland = AstalHyprland.get_default();
+
+
+const URGENT_DURATION = 1000;
+
+const Workspace = ({ id = 0 }) => (
+    <revealer
+        name={id.toString()}
+        transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+    >
+        <eventbox
+            cursor="pointer"
+            tooltip_text={id.toString()}
+
+            onClickRelease={() => {
+                Hyprland.message_async(`dispatch workspace ${id}`, () => { /**/ });
+            }}
+        >
+            <box
+                valign={Gtk.Align.CENTER}
+                className="button"
+
+                setup={(self) => idle(() => {
+                    const update = (
+                        _: Widget.Box,
+                        addr?: string,
+                    ) => {
+                        const workspace = Hyprland.get_workspace(id);
+                        const occupied = workspace && workspace.get_clients().length > 0;
+
+                        self.toggleClassName('occupied', occupied);
+
+                        if (!addr) {
+                            return;
+                        }
+
+                        // Deal with urgent windows
+                        const client = Hyprland.get_client(addr);
+                        const isThisUrgent = client &&
+                          client.workspace.id === id;
+
+                        if (isThisUrgent) {
+                            self.toggleClassName('urgent', true);
+
+                            // Only show for a sec when urgent is current workspace
+                            if (Hyprland.get_focused_workspace().get_id() === id) {
+                                timeout(URGENT_DURATION, () => {
+                                    self.toggleClassName('urgent', false);
+                                });
+                            }
+                        }
+                    };
+
+                    self
+                        .hook(Hyprland, 'event', update)
+
+                        // Deal with urgent windows
+                        .hook(Hyprland, 'urgent', update)
+
+                        .hook(Hyprland, 'notify::focused-workspace', () => {
+                            if (Hyprland.get_focused_workspace().get_id() === id) {
+                                self.toggleClassName('urgent', false);
+                            }
+                        });
+                })}
+            />
+        </eventbox>
+    </revealer>
+);
+
+export default () => {
+    const L_PADDING = 2;
+    const WS_WIDTH = 30;
+
+    const updateHighlight = (self: Widget.Box) => {
+        const currentId = Hyprland.get_focused_workspace().get_id().toString();
+
+        const indicators = ((self.get_parent() as Widget.Overlay)
+            .child as Widget.Box)
+            .children as Widget.Revealer[];
+
+        const currentIndex = indicators.findIndex((w) => w.name === currentId);
+
+        if (currentIndex >= 0) {
+            self.css = `margin-left: ${L_PADDING + (currentIndex * WS_WIDTH)}px`;
+        }
+    };
+
+    const highlight = (
+        <box
+            className="button active"
+
+            valign={Gtk.Align.CENTER}
+            halign={Gtk.Align.START}
+
+            setup={(self) => {
+                self.hook(Hyprland, 'notify::focused-workspace', updateHighlight);
+            }}
+        />
+    ) as Widget.Box;
+
+    let workspaces: Widget.Revealer[] = [];
+
+    return (
+        <box
+            className="bar-item"
+        >
+            <overlay
+                className="workspaces"
+                passThrough
+                overlay={highlight}
+            >
+                <box
+                    setup={(self) => {
+                        const refresh = () => {
+                            (self.children as Widget.Revealer[]).forEach((rev) => {
+                                rev.reveal_child = false;
+                            });
+
+                            workspaces.forEach((ws) => {
+                                ws.reveal_child = true;
+                            });
+                        };
+
+                        const updateWorkspaces = () => {
+                            Hyprland.get_workspaces().forEach((ws) => {
+                                const currentWs = (self.children as Widget.Revealer[])
+                                    .find((ch) => ch.name === ws.id.toString());
+
+                                if (!currentWs && ws.id > 0) {
+                                    self.add(Workspace({ id: ws.id }));
+                                }
+                            });
+
+                            // Make sure the order is correct
+                            workspaces.forEach((workspace, i) => {
+                                (workspace.get_parent() as Widget.Box)
+                                    .reorder_child(workspace, i);
+                            });
+                        };
+
+                        self.hook(Hyprland, 'event', () => {
+                            workspaces = (self.children as Widget.Revealer[])
+                                .filter((ch) => {
+                                    return Hyprland.get_workspaces().find((ws) => {
+                                        return ws.id.toString() === ch.name;
+                                    });
+                                })
+                                .sort((a, b) => parseInt(a.name ?? '0') - parseInt(b.name ?? '0'));
+
+                            updateWorkspaces();
+                            refresh();
+
+                            // Make sure the highlight doesn't go too far
+                            const TEMP_TIMEOUT = 100;
+
+                            timeout(TEMP_TIMEOUT, () => updateHighlight(highlight));
+                        });
+                    }}
+                />
+            </overlay>
+        </box>
+    );
+};
diff --git a/nixosModules/ags/v2/widgets/bar/style.scss b/nixosModules/ags/v2/widgets/bar/style.scss
index 1c243a1b..59cb985e 100644
--- a/nixosModules/ags/v2/widgets/bar/style.scss
+++ b/nixosModules/ags/v2/widgets/bar/style.scss
@@ -4,7 +4,7 @@
         border-radius: 7px;
         background-color: darken($window_bg_color, 3%);
         font-size: 20px;
-        min-height: 30px;
+        min-height: 35px;
 
         .battery icon {
             &.charging {
@@ -15,5 +15,32 @@
                 color: red;
             }
         }
+
+        .workspaces {
+            .button {
+                margin: 0 2.5px;
+                min-height: 22px;
+                min-width: 22px;
+                border-radius: 100%;
+                border: 2px solid transparent;
+            }
+
+            .occupied {
+                border: 2px solid $window_bg_color;
+                background: $accent_color;
+                transition: background-color 0.6s ease-in-out;
+            }
+
+            .urgent {
+                border: 2px solid $window_bg_color;
+                background: red;
+                transition: background-color 0.6s ease-in-out;
+            }
+
+            .active {
+                border: 2px solid #50fa7b;
+                transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+            }
+        }
     }
 }
diff --git a/nixosModules/ags/v2/widgets/bar/wim.tsx b/nixosModules/ags/v2/widgets/bar/wim.tsx
index 75d79b27..2ad3c8b6 100644
--- a/nixosModules/ags/v2/widgets/bar/wim.tsx
+++ b/nixosModules/ags/v2/widgets/bar/wim.tsx
@@ -3,6 +3,7 @@ import { Astal, Gtk } from 'astal';
 import Battery from './items/battery';
 import Clock from './items/clock';
 import CurrentClient from './items/current-client';
+import Workspaces from './items/workspaces';
 
 import BarRevealer from './fullscreen';
 import Separator from '../misc/separator';
@@ -20,6 +21,10 @@ export default () => (
 
         <centerbox className="bar widget">
             <box hexpand halign={Gtk.Align.START}>
+                <Workspaces />
+
+                <Separator size={8} />
+
                 <CurrentClient />
             </box>