From 54e216b5ec762d1a77d9fa3de1167f8a6c5eec89 Mon Sep 17 00:00:00 2001
From: Janis Hutz <info@janishutz.com>
Date: Fri, 25 Apr 2025 17:22:07 +0200
Subject: [PATCH] [AGS] Fixes for bar

---
 config/astal/app.ts                 | 35 +++++++++++++++++++++++++----
 config/astal/components/bar/Bar.tsx | 18 +++++++++++++--
 config/astal/util/colours.scss      |  4 ++--
 config/astal/util/hyprland.ts       | 28 +++++++++++++++++++++++
 4 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 config/astal/util/hyprland.ts

diff --git a/config/astal/app.ts b/config/astal/app.ts
index 856547e..7563857 100644
--- a/config/astal/app.ts
+++ b/config/astal/app.ts
@@ -2,18 +2,44 @@ import { App } from "astal/gtk4"
 import style from "./style.scss"
 import Bar from "./components/bar/Bar";
 import AstalHyprland from "gi://AstalHyprland?version=0.1";
+import { hyprToGdk } from "./util/hyprland";
 
 App.start({
     instanceName: "runner",
     css: style,
     main() {
         const hypr = AstalHyprland.get_default();
-        const monitors = App.get_monitors();
-        for (let index = 0; index < monitors.length; index++) {
-            Bar.Bar( monitors[ index ] );
+        const bars = new Map<number, string>();
+
+        const barCreator = ( monitor: AstalHyprland.Monitor ) => {
+            const gdkMonitor = hyprToGdk( monitor );
+            if ( gdkMonitor ) {
+                print( 'Bar added for screen ' + monitor.get_id() );
+                bars.set( monitor.get_id(), Bar.BarLauncher( gdkMonitor ) );
+            }
         }
 
-        // TODO: Handle monitor add
+        for (const monitor of hypr.monitors) {
+            barCreator( monitor );
+        }
+
+        hypr.connect( 'monitor-added', ( _, monitor ) => {
+            barCreator( monitor );
+        } );
+
+        hypr.connect( 'monitor-removed', ( _, monitor ) => {
+            const windowName = bars.get( monitor );
+            if ( windowName ) {
+                const win = App.get_window( windowName );
+                if ( win ) {
+                    App.toggle_window( windowName );
+                    win.set_child( null );
+                    App.remove_window( win );
+                    print( 'Bar removed for screen', monitor );
+                }
+                bars.delete( monitor );
+            }
+        } );
     },
     requestHandler(request, res) {
         const args = request.trimStart().split( ' ' );
@@ -26,3 +52,4 @@ App.start({
         }
     },
 })
+
diff --git a/config/astal/components/bar/Bar.tsx b/config/astal/components/bar/Bar.tsx
index 3a1c273..969c917 100644
--- a/config/astal/components/bar/Bar.tsx
+++ b/config/astal/components/bar/Bar.tsx
@@ -5,13 +5,15 @@ import QuickView from "./modules/QuickView";
 import SystemInfo from "./modules/SystemInfo";
 import { CenterBox } from "astal/gtk4/widget";
 
-const Bar = (gdkmonitor: Gdk.Monitor) => {
+const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } ) => {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
     return (
         <window
             gdkmonitor={gdkmonitor}
             cssClasses={["Bar"]}
+            name={name}
+            namespace={"bar"}
             exclusivity={Astal.Exclusivity.EXCLUSIVE}
             anchor={TOP | LEFT | RIGHT}
             visible
@@ -50,7 +52,19 @@ const cliHandler = (args: string[]): string => {
     return "Not implemented";
 };
 
+const BarLauncher = ( monitor: Gdk.Monitor ) =>  {
+    const windowName = `bar-${monitor.get_connector()}`
+    const createBar = () => {
+        return <Bar gdkmonitor={monitor} name={windowName}></Bar>
+    }
+
+    // Actually start the bar
+    createBar();
+
+    return windowName;
+}
+
 export default {
-    Bar,
+    BarLauncher,
     cliHandler,
 };
diff --git a/config/astal/util/colours.scss b/config/astal/util/colours.scss
index 4b51248..cadbdd1 100644
--- a/config/astal/util/colours.scss
+++ b/config/astal/util/colours.scss
@@ -1,4 +1,4 @@
 $fg-color: #E6E6E6;
 $bg-color: #141414;
-$accent-color: #154881;
-$accent-color-2: #ABADCD;
+$accent-color: #B27BD1;
+$accent-color-2: #5F50A6;
diff --git a/config/astal/util/hyprland.ts b/config/astal/util/hyprland.ts
new file mode 100644
index 0000000..2ef9fb6
--- /dev/null
+++ b/config/astal/util/hyprland.ts
@@ -0,0 +1,28 @@
+// ┌                                               ┐
+// │  From https://github.com/Neurarian/matshell   │
+// └                                               ┘
+import { App, Gdk } from "astal/gtk4";
+import Hyprland from "gi://AstalHyprland";
+
+/* Match Hyprland monitor to GDK monitor
+THIS MAY NOT WORK AS INTENDED IF YOU HAVE MONITORS OF THE SAME MODEL
+I did not find a more elegant solution to this. 
+On my setup GDK coordinates and hyprland coordinates are flipped,
+so I cant match by coordinates. */
+
+export function hyprToGdk(monitor: Hyprland.Monitor): Gdk.Monitor | null {
+    const monitors = App.get_monitors();
+    if (!monitors || monitors.length === 0) return null;
+
+    for (let gdkmonitor of monitors) {
+        if (
+            monitor &&
+            gdkmonitor &&
+            monitor.get_name() === gdkmonitor.get_connector()
+        )
+            return gdkmonitor;
+    }
+
+    // Default monitor with null safety
+    return monitors.length > 0 ? monitors[0] : null;
+}