feat(ags): use hyprland desc for monitor names in the code

modules/ags/config/ts/bar/binto.ts

@@ -1,6 +1,7 @@
 const { Box, CenterBox } = Widget;
 
 import Separator from '../misc/separator.ts';
+import { get_gdkmonitor_from_desc } from '../lib.ts';
 
 import BarRevealer from './fullscreen.ts';
 
@@ -12,7 +13,7 @@ import SysTray from './items/systray.ts';
 const PADDING = 20;
 
 export default () => BarRevealer({
-    monitor: 1,
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
     exclusivity: 'exclusive',
     anchor: ['bottom', 'left', 'right'],
     bar: Box({

modules/ags/config/ts/bar/fullscreen.ts

@@ -1,17 +1,24 @@
 const Hyprland = await Service.import('hyprland');
 const { Box, EventBox, Revealer, Window } = Widget;
 
+import Gdk from 'gi://Gdk?version=3.0';
+
+import {
+    get_hyprland_monitor_desc,
+    get_monitor_desc_from_id,
+} from '../lib.ts';
+
 
 const FullscreenState = Variable({
-    monitors: [] as number[],
-    clientAddrs: new Map() as Map<number, string>,
+    monitors: [] as string[],
+    clientAddrs: new Map() as Map<string, string>,
 });
 
 Hyprland.connect('event', (hyprObj) => {
     const arrayEquals = (a1: unknown[], a2: unknown[]) =>
         a1.sort().toString() === a2.sort().toString();
 
-    const mapEquals = (m1: Map<number, string>, m2: Map<number, string>) =>
+    const mapEquals = (m1: Map<string, string>, m2: Map<string, string>) =>
         m1.size === m2.size &&
         Array.from(m1.keys()).every((key) => m1.get(key) === m2.get(key));
 
@@ -23,8 +30,13 @@ Hyprland.connect('event', (hyprObj) => {
             c.workspace.id === mon?.activeWorkspace.id;
     });
 
-    const monitors = fsClients.map((c) => c.monitor);
-    const clientAddrs = new Map(fsClients.map((c) => [c.monitor, c.address]));
+    const monitors = fsClients.map((c) =>
+        get_monitor_desc_from_id(c.monitor));
+
+    const clientAddrs = new Map(fsClients.map((c) => [
+        get_monitor_desc_from_id(c.monitor),
+        c.address,
+    ]));
 
     const hasChanged =
         !arrayEquals(monitors, fs.monitors) ||
@@ -38,7 +50,13 @@ Hyprland.connect('event', (hyprObj) => {
     }
 });
 
-export default ({ anchor, bar, monitor = 0, ...rest }) => {
+export default ({
+    anchor,
+    bar,
+    gdkmonitor = Gdk.Display.get_default()?.get_primary_monitor() as Gdk.Monitor,
+    ...rest
+}) => {
+    const monitor = get_hyprland_monitor_desc(gdkmonitor);
     const BarVisible = Variable(true);
 
     FullscreenState.connect('changed', (v) => {
@@ -48,7 +66,7 @@ export default ({ anchor, bar, monitor = 0, ...rest }) => {
     const barCloser = Window({
         name: `bar-${monitor}-closer`,
         visible: false,
-        monitor,
+        gdkmonitor,
         anchor: ['top', 'bottom', 'left', 'right'],
         layer: 'overlay',
 
@@ -108,7 +126,7 @@ export default ({ anchor, bar, monitor = 0, ...rest }) => {
     return Window({
         name: `bar-${monitor}`,
         layer: 'overlay',
-        monitor,
+        gdkmonitor,
         margins: [-1, -1, -1, -1],
         anchor,
         ...rest,

modules/ags/config/ts/lib.ts

@@ -0,0 +1,32 @@
+const Hyprland = await Service.import('hyprland');
+
+import Gdk from 'gi://Gdk?version=3.0';
+
+
+export const get_hyprland_monitor_desc = (monitor: Gdk.Monitor): string => {
+    const manufacturer = monitor.manufacturer?.replace(',', '');
+    const model = monitor.model?.replace(',', '');
+    const start = `${manufacturer} ${model}`;
+
+    return `desc:${Hyprland.monitors.find((m) => m.description.startsWith(start))?.description}`;
+};
+
+export const get_gdkmonitor_from_desc = (desc: string): Gdk.Monitor => {
+    const display = Gdk.Display.get_default();
+
+    for (let m = 0; m < (display?.get_n_monitors() ?? 0); m++) {
+        const monitor = display?.get_monitor(m);
+
+        if (monitor && desc === get_hyprland_monitor_desc(monitor)) {
+            return monitor;
+        }
+    }
+
+    throw Error(`Monitor ${desc} not found`);
+};
+
+export const get_monitor_desc_from_id = (id: number): string => {
+    const monitor = Hyprland.monitors.find((m) => m.id === id);
+
+    return `desc:${monitor?.description}`;
+};

modules/ags/config/ts/lockscreen/main.ts

@@ -8,6 +8,7 @@ import Lock from 'gi://GtkSessionLock?version=0.1';
 import Vars from './vars.ts';
 
 import Separator from '../misc/separator.ts';
+import { get_hyprland_monitor_desc } from '../lib.ts';
 
 /* Types */
 import { Box as AgsBox } from 'types/widgets/box';
@@ -163,16 +164,9 @@ const PasswordPrompt = (monitor: Gdk.Monitor, visible: boolean) => {
     });
 };
 
-const getHyprlandMonitorDesc = (monitor: Gdk.Monitor) => {
-    const manufacturer = monitor.manufacturer?.replace(',', '');
-    const model = monitor.model?.replace(',', '');
-
-    return `desc:${manufacturer} ${model}`;
-};
-
 const createWindow = (monitor: Gdk.Monitor) => {
-    const hyprDesc = getHyprlandMonitorDesc(monitor);
-    const entryVisible = Vars.mainMonitor.startsWith(hyprDesc) || Vars.dupeLockscreen;
+    const hyprDesc = get_hyprland_monitor_desc(monitor);
+    const entryVisible = Vars.mainMonitor === hyprDesc || Vars.dupeLockscreen;
     const win = PasswordPrompt(monitor, entryVisible);
 
     windows.set(monitor, win);

modules/ags/config/ts/notifications/binto.ts

@@ -4,13 +4,14 @@ import NotifCenterWidget from './center.ts';
 import PopUpsWidget from './popup.ts';
 
 import PopupWindow from '../misc/popup.ts';
+import { get_gdkmonitor_from_desc } from '../lib.ts';
 
 
 export const NotifPopups = () => Window({
     name: 'notifications',
     anchor: ['bottom', 'left'],
     layer: 'overlay',
-    monitor: 1,
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
 
     child: PopUpsWidget(),
 });
@@ -20,7 +21,7 @@ export const NotifCenter = () => PopupWindow({
     name: 'notification-center',
     anchor: ['bottom', 'right'],
     transition: 'slide bottom',
-    monitor: 1,
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Samsung Electric Company C27JG5x HTOM100586'),
 
     child: NotifCenterWidget(),
 });

modules/ags/config/ts/screenshot/main.ts

@@ -88,6 +88,7 @@ export default () => {
         },
     });
 
+    // TODO: highlight monitor when hovered
     const monitorsButton = CursorBox({
         class_name: 'header-btn',