From e2b4af178750e63b38c0a233f54e4d0251460fdf Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Fri, 25 Jul 2025 23:30:35 -0300
Subject: [PATCH] :boom: fix(custom-dialog): close popup if closeOnClick is
 enabled on option

---
 ags/widget/CustomDialog.tsx | 81 +++++++++++++++++--------------------
 ags/widget/PopupWindow.tsx  | 22 ++++++----
 2 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/ags/widget/CustomDialog.tsx b/ags/widget/CustomDialog.tsx
index 784b0c8..537b562 100644
--- a/ags/widget/CustomDialog.tsx
+++ b/ags/widget/CustomDialog.tsx
@@ -3,7 +3,7 @@ import { Windows } from "../windows";
 import { PopupWindow } from "./PopupWindow";
 import { Separator } from "./Separator";
 import { tr } from "../i18n/intl";
-import { Accessor, For, With } from "ags";
+import { Accessor } from "ags";
 import { transformWidget, variableToBoolean, WidgetNodeType } from "../scripts/utils";
 
 
@@ -28,58 +28,49 @@ export interface CustomDialogOption {
     closeOnClick?: boolean | Accessor<boolean>;
 }
 
-function CustomDialogOption({closeOnClick = true, ...props}: CustomDialogOption & { dialog: Astal.Window }) {
-    function onClicked() {
-        props.onClick?.();
-        closeOnClick && 
-            props.dialog?.close();
-    }
-
+function CustomDialogOption({closeOnClick = true, ...props}: CustomDialogOption & {
+    dialog: Astal.Window;
+}) {
     return <Gtk.Button class="option" hexpand label={props.text} 
-      onClicked={onClicked} onActivate={onClicked}/>
+      onClicked={() => {
+          props.onClick?.();
+          closeOnClick && 
+              props.dialog?.close();
+      }} 
+    />
 }
 
 export function CustomDialog({ options = [{ text: tr("accept") }], ...props}: CustomDialogProps) {
-    return Windows.getDefault().createWindowForFocusedMonitor((mon) => 
-        <PopupWindow namespace={props.namespace ?? "custom-dialog"} monitor={mon}
+    return Windows.getDefault().createWindowForFocusedMonitor((mon) => {
+        const popup = <PopupWindow namespace={props.namespace ?? "custom-dialog"} monitor={mon}
           cssBackgroundWindow={props.cssBackground ?? "background: rgba(0, 0, 0, .3);"}
           exclusivity={Astal.Exclusivity.IGNORE} layer={Astal.Layer.OVERLAY}
-          halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER}
-          widthRequest={props.widthRequest ?? 400} heightRequest={props.heightRequest ?? 220}
-          onDestroy={props.onFinish} $={(self) => self.set_child(
+          halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} actionClosed={() => props.onFinish?.()}
+          widthRequest={props.widthRequest ?? 400} heightRequest={props.heightRequest ?? 220}>
 
-              <Gtk.Box class={props.className ?? "custom-dialog-container"}
-                orientation={Gtk.Orientation.VERTICAL}>
+            <Gtk.Box class={props.className ?? "custom-dialog-container"}
+              orientation={Gtk.Orientation.VERTICAL}>
 
-                  <Gtk.Label class={"title"} visible={variableToBoolean(props.title)} label={props.title} />
-                  <Gtk.Label class={"text"} visible={variableToBoolean(props.text)} label={props.text} 
-                    vexpand/>
-                  <Gtk.Box class={"custom-children custom-child"} visible={variableToBoolean(props.children)}
-                    orientation={props.childOrientation ?? Gtk.Orientation.VERTICAL}>
-                      {
-                        (props.children instanceof Accessor) ?
-                          (Array.isArray(props.children) ?
-                            <For each={props.children! as Accessor<Array<JSX.Element>>}>
-                                {(widget) => widget && widget}
-                            </For>
-                          : <With value={props.children as Accessor<JSX.Element>}>
-                                {(widget) => widget && widget}
-                            </With>)
-                        : (Array.isArray(props.children) ? 
-                            props.children.map(widget => widget && widget).filter(w => w)
-                          : props.children)
-                      }
-                  </Gtk.Box>
-                  <Separator alpha={.2} visible={options && options.length > 0}
-                    spacing={8} orientation={Gtk.Orientation.VERTICAL} />
+                <Gtk.Label class={"title"} visible={variableToBoolean(props.title)} label={props.title} />
+                <Gtk.Label class={"text"} visible={variableToBoolean(props.text)} label={props.text} 
+                  vexpand valign={Gtk.Align.START} />
+                <Gtk.Box class={"custom-children custom-child"} visible={variableToBoolean(props.children)}
+                  orientation={props.childOrientation ?? Gtk.Orientation.VERTICAL}>
+                    {transformWidget(props.children, (child) => child as JSX.Element)}
+                </Gtk.Box>
+                <Separator alpha={.2} visible={options && options.length > 0}
+                  spacing={8} orientation={Gtk.Orientation.VERTICAL} />
+            </Gtk.Box>
+        </PopupWindow> as Astal.Window;
 
-                  <Gtk.Box class={"options"} orientation={props.optionsOrientation ?? Gtk.Orientation.HORIZONTAL}
-                    hexpand={true} heightRequest={38} homogeneous={true}>
+        (popup.get_child()!.get_first_child()!.get_first_child() as Gtk.Box).append(
+            <Gtk.Box class={"options"} orientation={props.optionsOrientation ?? Gtk.Orientation.HORIZONTAL}
+              hexpand={true} heightRequest={38} homogeneous={true}>
 
-                      {transformWidget(options, (props) => <CustomDialogOption {...props} dialog={self} />)}
-                  </Gtk.Box>
-              </Gtk.Box> as Gtk.Box
-          )}
-        /> as Astal.Window
-    )();
+                {transformWidget(options, (props) => <CustomDialogOption {...props} dialog={popup} />)}
+            </Gtk.Box> as Gtk.Box
+        );
+
+        return popup;
+    })();
 }
diff --git a/ags/widget/PopupWindow.tsx b/ags/widget/PopupWindow.tsx
index a08ffbe..61a0435 100644
--- a/ags/widget/PopupWindow.tsx
+++ b/ags/widget/PopupWindow.tsx
@@ -7,12 +7,12 @@ import GObject from "ags/gobject";
 
 
 type PopupWindowSpecificProps = {
-    $?: (self: Astal.Window, container: Gtk.Box) => void;
+    $?: (self: Astal.Window) => void;
     children?: WidgetNodeType;
     /** Stylesheet for the background of the popup-window */
     cssBackgroundWindow?: string;
     class?: string | Accessor<string>;
-    onCloseRequest?: (self: Astal.Window) => void|boolean;
+    actionClosed?: (self: Astal.Window) => void|boolean;
     actionClickedOutside?: (self: Astal.Window) => void;
     actionKeyPressed?: (self: Astal.Window, keyval: number, keycode: number) => void;
 };
@@ -64,7 +64,11 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
         "visible",
         "marginLeft",
         "marginRight",
-        "marginBottom"
+        "marginBottom",
+        "hexpand",
+        "vexpand",
+        "actionClosed",
+        "$"
     ])} namespace={props.namespace ?? "popup-window"} class={
           (props.class instanceof Accessor) ? 
               ((props.namespace instanceof Accessor) ?
@@ -73,7 +77,8 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
                : props.class.as(clss => `popup-window ${clss} ${props.namespace ?? ""}`))
           : `popup-window ${props.class ?? ""} ${props.namespace ?? ""}`
       } keymode={Astal.Keymode.EXCLUSIVE} exclusivity={props.exclusivity ?? Astal.Exclusivity.NORMAL}
-      anchor={TOP | LEFT | BOTTOM | RIGHT} visible={false} onCloseRequest={props.onCloseRequest}
+      anchor={TOP | LEFT | BOTTOM | RIGHT} visible={false} 
+      onCloseRequest={(self) => props.actionClosed?.(self)}
       $={(self) => {
           const conns: Map<GObject.Object, number> = new Map();
           const gestureClick = Gtk.GestureClick.new();
@@ -120,7 +125,10 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
           conns.set(self, self.connect("close-request", () => conns.forEach((id, obj) =>
               obj.disconnect(id))));
 
-          props.$?.(self, self.get_first_child()!.get_first_child()!.get_first_child() as Gtk.Box);
+          conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
+              obj.disconnect(id))));
+
+          props.$?.(self);
       }}>
           <Gtk.Box hexpand={false} vexpand={false}>
               <Gtk.Box class={"popup-window-container"} halign={props.halign} 
@@ -145,9 +153,7 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
                     conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
                         obj.disconnect(id))));
                 }}>
-                  <Gtk.Box>
-                      {props.children}
-                  </Gtk.Box>
+                  {props.children}
               </Gtk.Box>
           </Gtk.Box>
     </Astal.Window> as Astal.Window;