feat: add multi-monitor support

app.ts

@@ -1,14 +1,12 @@
 import app from "ags/gtk4/app";
 import GLib from "gi://GLib";
 import style from "./style/main.scss";
-import windows from "./windows";
+import { Main } from "./main";
 
 const icons = `${GLib.get_user_config_dir()}/tpanel/assets/icons`;
 
 app.start({
   css: style,
   icons: icons,
-  main() {
-    windows.map((win) => app.get_monitors().map(win));
-  },
+  main: Main,
 });

main.tsx

@@ -0,0 +1,25 @@
+import { For, This, createBinding } from "ags";
+import app from "ags/gtk4/app";
+import { Bar } from "./widgets/bar";
+import { Launcher } from "./widgets/launcher";
+import { Notifications } from "./widgets/notifications";
+import { ControlCenter } from "./widgets/control-center";
+import { WallpaperManager } from "./widgets/wallpaper-manager";
+
+export const Main = () => {
+  const monitors = createBinding(app, "monitors");
+
+  return (
+    <For each={monitors}>
+      {(monitor) => (
+        <This this={app}>
+          <Bar gdkmonitor={monitor} />
+          <Launcher gdkmonitor={monitor} />
+          <Notifications gdkmonitor={monitor} />
+          <ControlCenter gdkmonitor={monitor} />
+          <WallpaperManager gdkmonitor={monitor} />
+        </This>
+      )}
+    </For>
+  );
+};

widgets/bar/index.tsx

@@ -8,10 +8,11 @@ import { Tray } from "./tray";
 import { WorkspaceButton } from "./workspace";
 import { Bluetooth } from "./bluetooth";
 import { Cava } from "./cava";
+import { onCleanup } from "gnim";
 
 export const WINDOW_NAME = "bar";
 
-export const Bar = (gdkmonitor: Gdk.Monitor) => {
+export const Bar = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const { TOP } = Astal.WindowAnchor;
 
   return (
@@ -24,6 +25,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
       anchor={TOP}
       widthRequest={1200}
       application={app}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <centerbox>
         <box spacing={10} $type="start">

widgets/control-center/index.tsx

@@ -5,10 +5,11 @@ import { Header } from "./header";
 import { NotificationList } from "./notification-list";
 import { SlidingControls } from "./sliding-controls";
 import { SystemInfo } from "./system-info";
+import { onCleanup } from "ags";
 
 export const WINDOW_NAME = "control-center";
 
-export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
+export const ControlCenter = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const { TOP, BOTTOM, RIGHT } = Astal.WindowAnchor;
   const { VERTICAL } = Gtk.Orientation;
 
@@ -20,6 +21,7 @@ export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
       application={app}
       keymode={Astal.Keymode.ON_DEMAND}
       anchor={TOP | BOTTOM | RIGHT}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
       <box vexpand orientation={VERTICAL} spacing={20}>

widgets/launcher/index.tsx

@@ -1,4 +1,4 @@
-import { createState, For } from "ags";
+import { createState, For, onCleanup } from "ags";
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import app from "ags/gtk4/app";
 import AstalApps from "gi://AstalApps";
@@ -59,7 +59,7 @@ const AppSearch = () => {
   );
 };
 
-export const Launcher = (gdkmonitor: Gdk.Monitor) => {
+export const Launcher = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   return (
     <window
       name={WINDOW_NAME}
@@ -72,6 +72,7 @@ export const Launcher = (gdkmonitor: Gdk.Monitor) => {
         if (visible) searchEntry.grab_focus();
         else searchEntry.set_text("");
       }}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
 

widgets/notifications/index.tsx

@@ -11,7 +11,7 @@ import { Notification } from "./notification";
 
 export const WINDOW_NAME = "notifications";
 
-export const Notifications = (gdkmonitor: Gdk.Monitor) => {
+export const Notifications = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
   const notifd = AstalNotifd.get_default();
   const isDndMode = createBinding(notifd, "dont-disturb");
 

widgets/wallpaper-manager/index.tsx

@@ -1,3 +1,4 @@
+import { onCleanup } from "ags";
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import app from "ags/gtk4/app";
 import { exec } from "ags/process";
@@ -10,7 +11,11 @@ export const WINDOW_NAME = "wallpaper-manager";
 const wallpaperPath = `/home/tux/Wallpapers/new`;
 const imageFormats = [".jpeg", ".jpg", ".webp", ".png"];
 
-export const WallpaperManager = (gdkmonitor: Gdk.Monitor) => {
+export const WallpaperManager = ({
+  gdkmonitor,
+}: {
+  gdkmonitor: Gdk.Monitor;
+}) => {
   const { TOP, BOTTOM, LEFT } = Astal.WindowAnchor;
   const { VERTICAL } = Gtk.Orientation;
   const wallpaperList = getWallpaperList(wallpaperPath);
@@ -23,6 +28,7 @@ export const WallpaperManager = (gdkmonitor: Gdk.Monitor) => {
       application={app}
       keymode={Astal.Keymode.ON_DEMAND}
       anchor={TOP | BOTTOM | LEFT}
+      $={(self) => onCleanup(() => self.destroy())}
     >
       <Gtk.EventControllerKey onKeyPressed={onKey} />
       <scrolledwindow>

windows.ts

@@ -1,7 +0,0 @@
-import { Bar } from "./widgets/bar";
-import { Launcher } from "./widgets/launcher";
-import { Notifications } from "./widgets/notifications";
-import { ControlCenter } from "./widgets/control-center";
-import { WallpaperManager } from "./widgets/wallpaper-manager";
-
-export default [Bar, Launcher, Notifications, ControlCenter, WallpaperManager];