feat(ags): fix centerCursor and add perMonitor

nixosModules/ags/config/app.ts

@@ -2,7 +2,6 @@
 // TODO: quick-settings
 // TODO: music player stuff
 // TODO: on-screen-keyboard
-// TODO: GSR
 
 import GLib from 'gi://GLib';
 

nixosModules/ags/config/configurations/binto.ts

@@ -6,6 +6,7 @@ export default async() => {
 
     const AppLauncher = (await import('../widgets/applauncher/main')).default;
     const Bar = (await import('../widgets/bar/binto')).default;
+    const BgLayer = (await import('../widgets/bg-layer/main')).default;
     const Calendar = (await import('../widgets/date/binto')).default;
     const Clipboard = (await import('../widgets/clipboard/main')).default;
     const { NotifPopups, NotifCenter } = await import('../widgets/notifs/binto');
@@ -13,7 +14,7 @@ export default async() => {
     const PowerMenu = (await import('../widgets/powermenu/main')).default;
     const Screenshot = (await import('../widgets/screenshot/main')).default;
 
-    const { closeAll } = await import('../lib');
+    const { closeAll, perMonitor } = await import('../lib');
     const Brightness = (await import('../services/brightness')).default;
     const GSR = (await import('../services/gpu-screen-recorder')).default;
     const MonitorClicks = (await import('../services/monitor-clicks')).default;
@@ -48,6 +49,8 @@ export default async() => {
         main: () => {
             execAsync('hyprpaper').catch(() => { /**/ });
 
+            perMonitor((monitor) => BgLayer(monitor, false));
+
             AppLauncher();
             Bar();
             Calendar();

nixosModules/ags/config/configurations/wim.ts

@@ -6,7 +6,7 @@ export default async() => {
 
     const AppLauncher = (await import('../widgets/applauncher/main')).default;
     const Bar = (await import('../widgets/bar/wim')).default;
-    const BgFade = (await import('../widgets/bg-fade/main')).default;
+    const BgLayer = (await import('../widgets/bg-layer/main')).default;
     const Calendar = (await import('../widgets/date/wim')).default;
     const Clipboard = (await import('../widgets/clipboard/main')).default;
     const Corners = (await import('../widgets/corners/main')).default;
@@ -16,7 +16,7 @@ export default async() => {
     const PowerMenu = (await import('../widgets/powermenu/main')).default;
     const Screenshot = (await import('../widgets/screenshot/main')).default;
 
-    const { closeAll } = await import('../lib');
+    const { closeAll, perMonitor } = await import('../lib');
     const Brightness = (await import('../services/brightness')).default;
     const MonitorClicks = (await import('../services/monitor-clicks')).default;
 
@@ -54,9 +54,10 @@ export default async() => {
         main: () => {
             execAsync('hyprpaper').catch(() => { /**/ });
 
+            perMonitor((monitor) => BgLayer(monitor, true));
+
             AppLauncher();
             Bar();
-            BgFade();
             Calendar();
             Clipboard();
             Corners();

nixosModules/ags/config/lib.ts

@@ -1,4 +1,4 @@
-import { App, Gdk } from 'astal/gtk3';
+import { App, Gdk, Gtk } from 'astal/gtk3';
 
 import AstalHyprland from 'gi://AstalHyprland';
 const Hyprland = AstalHyprland.get_default();
@@ -83,7 +83,7 @@ export const hyprMessage = (message: string) => new Promise<string>((
 export const centerCursor = (): void => {
     let x: number;
     let y: number;
-    const monitor = Hyprland.get_monitors().find((m) => m.focused) as AstalHyprland.Monitor;
+    const monitor = Hyprland.get_focused_monitor();
 
     switch (monitor.transform) {
         case 1:
@@ -119,3 +119,29 @@ export const closeAll = () => {
             App.get_window(w.name)?.set_visible(false);
         });
 };
+
+export const perMonitor = (window: (monitor: Gdk.Monitor) => Gtk.Widget) => {
+    const display = Gdk.Display.get_default();
+    const windows = new Map<Gdk.Monitor, Gtk.Widget>();
+
+    const createWindow = (monitor: Gdk.Monitor) => {
+        windows.set(monitor, window(monitor));
+    };
+
+    for (let m = 0; m < (display?.get_n_monitors() ?? 0); m++) {
+        const monitor = display?.get_monitor(m);
+
+        if (monitor) {
+            createWindow(monitor);
+        }
+    }
+
+    display?.connect('monitor-added', (_, monitor) => {
+        createWindow(monitor);
+    });
+
+    display?.connect('monitor-removed', (_, monitor) => {
+        windows.get(monitor)?.destroy();
+        windows.delete(monitor);
+    });
+};

nixosModules/ags/config/widgets/bg-fade/main.tsx

@@ -1,24 +0,0 @@
-import { Astal } from 'astal/gtk3';
-
-
-export default () => {
-    return (
-        <window
-            name="bg-fade"
-            layer={Astal.Layer.BACKGROUND}
-            exclusivity={Astal.Exclusivity.IGNORE}
-            anchor={
-                Astal.WindowAnchor.TOP |
-                Astal.WindowAnchor.BOTTOM |
-                Astal.WindowAnchor.LEFT |
-                Astal.WindowAnchor.RIGHT
-            }
-            css={`
-                background-image: -gtk-gradient (linear,
-                    left top, left bottom,
-                    from(rgba(0, 0, 0, 0.5)),
-                    to(rgba(0, 0, 0, 0)));
-            `}
-        />
-    );
-};

nixosModules/ags/config/widgets/bg-layer/main.tsx

@@ -0,0 +1,35 @@
+import { Astal, Gdk } from 'astal/gtk3';
+
+
+export default (
+    monitor = Gdk.Display.get_default()?.get_monitor(0) as Gdk.Monitor,
+    gradient = true,
+) => {
+    return (
+        <window
+            name="bg-layer"
+            namespace="bg-layer"
+            gdkmonitor={monitor}
+            layer={Astal.Layer.BACKGROUND}
+            exclusivity={Astal.Exclusivity.IGNORE}
+            anchor={
+                Astal.WindowAnchor.TOP |
+                Astal.WindowAnchor.BOTTOM |
+                Astal.WindowAnchor.LEFT |
+                Astal.WindowAnchor.RIGHT
+            }
+            css={
+                gradient ?
+                    `
+                        background-image: -gtk-gradient (linear,
+                            left top, left bottom,
+                            from(rgba(0, 0, 0, 0.5)),
+                            to(rgba(0, 0, 0, 0)));
+                    ` :
+                    `
+                        background-color: rgba(0, 0, 0, 0.4);
+                    `
+            }
+        />
+    );
+};