Run ags on the correct monitor

home/ags/files/Bar.tsx

@@ -99,7 +99,7 @@ function Memory(): JSX.Element {
         const line = out.split('\n').find(line => line.includes('Mem:'));
         if (!line) return "N/A";
         const split = line.split(/\s+/).map(Number);
-        return ((split[2]-split[5]) / 1000000).toFixed(2) + "GB";
+        return (split[2] / 1000000).toFixed(2) + "GB";
     });
     return <label
         className="item blue"
@@ -151,6 +151,7 @@ function Right() : JSX.Element {
 }
 
 function BatteryIcon(): JSX.Element {
+    if (!battery.online) return <box />;
     const icon_name = bind(battery, "percentage").as((percentage) => {
         const thresholds = [...Array(11).keys()].map( i => i * 10);
         const icon = thresholds.find(threshold => threshold >= percentage * 100)
@@ -215,19 +216,19 @@ function Workspaces() : JSX.Element {
     return (
         <box className="workspaces">
             {bind(hyprland, "workspaces").as((wss) =>
-                wss
+                <box>
-                .sort((a, b) => a.id - b.id)
+                    {bind(hyprland, "focusedMonitor").as((fm) =>
-                .filter(ws => ws && ws.get_monitor().get_id() === hyprland.get_focused_monitor().get_id())
+                        wss.sort((a, b) => a.id - b.id)
+                        .filter(ws => ws && ws.get_monitor().get_id() === fm.get_id())
                         .map((ws) => (
                             <button
-                        className={bind(hyprland, "focusedWorkspace").as((fw) =>
+                                className={bind(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
-                            ws === fw ? "focused" : "",
-                        )}
                                 onClicked={() => ws.focus()}
                             >
                                 {`${ws.id}`.slice(-1)}
                             </button>
-                )),
+                        )))}
+                </box>
             )}
         </box>
     );

home/ags/files/app.ts

@@ -1,13 +1,29 @@
-import { App } from "astal/gtk3"
+import { App, Gdk } from "astal/gtk3"
 import style from "./style.scss"
 import Bar from "./Bar"
+import Hyprland from "gi://AstalHyprland";
 import NotificationPopups from "./notifications/NotificationPopups"
 
+function find_main_monitor(): Hyprland.Monitor {
+    const hyprland = Hyprland.get_default();
+    let monitors = hyprland.get_monitors()
+    for (let i = 0; i < monitors.length; i++) {
+        for (const monitor of ["eDP", "DP", "HDMI-A"]) {
+            if (monitors[i].get_name() == monitor + "-" + i) {
+                return monitors[i]
+            }
+        }
+    }
+    return monitors[0]
+}
+
 App.start({
     css: style,
     iconTheme: "Papirus",
     main() {
-        App.get_monitors().map(Bar)
+        let mainMonitor = find_main_monitor()
-        App.get_monitors().map(NotificationPopups)
+        let gtkMonitor = App.get_monitors()[Number(mainMonitor.get_id())]
+        Bar(gtkMonitor)
+        NotificationPopups(gtkMonitor)
     },
 })