Add multi-monitor support

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/user/gui/astal/config/widget/Bar.tsx

@@ -3,12 +3,24 @@ import Launcher from './components/Launcher';
 import Workspace from './components/Workspaces';
 import Date from './components/Date';
 import Systray from './components/Tray';
+import Hyprland from "gi://AstalHyprland";
 
 const anchor = Astal.WindowAnchor.TOP
   | Astal.WindowAnchor.LEFT
   | Astal.WindowAnchor.RIGHT;
 
-export default (monitor: Gdk.Monitor) => <window
+const hyprland = Hyprland.get_default();
+
+function getHyprlandMonitor(gdkmonitor: Gdk.Monitor) {
+  const display = Gdk.Display.get_default()!;
+  const screen = display.get_default_screen();
+  for (let i = 0; i < display.get_n_monitors(); ++i) {
+    if (gdkmonitor === display.get_monitor(i))
+      return hyprland.get_monitor_by_name(screen.get_monitor_plug_name(i)!);
+  }
+}
+
+export default (monitor: Gdk.Monitor, index: number) => <window
   className='bar'
   gdkmonitor={monitor}
   exclusivity={Astal.Exclusivity.EXCLUSIVE}
@@ -17,7 +29,7 @@ export default (monitor: Gdk.Monitor) => <window
   <centerbox className='widgets'>
     <box hexpand halign={Gtk.Align.START}>
       <Launcher />
-      <Workspace />
+      <Workspace monitor={getHyprlandMonitor(monitor)!} />
     </box>
     <box hexpand halign={Gtk.Align.CENTER}>
       <Date />