💥 fix(logout-menu): not showing closed state on window management

ags/style/_logout-menu.scss

@@ -1,6 +1,6 @@
 @use "./colors";
 
-.logout-menu {
+.logout-menu-container {
   background: rgba($color: colors.$bg-translucent-primary, $alpha: .4);
 
   .top {
@@ -17,6 +17,9 @@
     }
   }
   .button-row {
+    $radius: 32px;
+
+    all: unset;
     margin: 0 150px;
 
     & > button {
@@ -24,24 +27,25 @@
         -gtk-icon-size: 128px;
       }
 
-      &:focus {
+      &:focus-visible {
         box-shadow: inset 0 0 0 5px colors.$fg-primary;
       }
 
-      margin: {
+      &:active {
-        left: 4px;
+        border-radius: calc($radius - 6px);
-        right: 4px;
       }
+
+      margin: 0 4px;
       border-radius: 6px;
 
-      &:first-child {
+      &:first-child:not(:active) {
-        border-top-left-radius: 28px;
+        border-top-left-radius: $radius;
-        border-bottom-left-radius: 28px;
+        border-bottom-left-radius: $radius;
       }
 
-      &:last-child {
+      &:last-child:not(:active) {
-        border-top-right-radius: 28px;
+        border-top-right-radius: $radius;
-        border-bottom-right-radius: 28px;
+        border-bottom-right-radius: $radius;
       }
     }
   }

ags/window/LogoutMenu.tsx

@@ -1,16 +1,14 @@
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import { execAsync } from "ags/process";
-import { AskPopup, AskPopupProps } from "../widget/AskPopup";
+import { AskPopup } from "../widget/AskPopup";
-import { Windows } from "../windows";
 import { Notifications } from "../scripts/notifications";
 import { NightLight } from "../scripts/nightlight";
 import { Config } from "../scripts/config";
+import { time } from "../scripts/utils";
 
 import AstalNotifd from "gi://AstalNotifd";
 import Gio from "gi://Gio?version=2.0";
 import GObject from "gi://GObject?version=2.0";
-import { time } from "../scripts/utils";
-import { onCleanup } from "ags";
 
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
@@ -28,108 +26,102 @@ export const LogoutMenu = (mon: number) =>
                   self.destroy();
           }));
 
-          onCleanup(() => conns.forEach((id, obj) => obj.disconnect(id)));
+          conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
+              obj.disconnect(id))));
       }}>
 
-        <Gtk.Box class={"logout-menu"} orientation={Gtk.Orientation.VERTICAL} 
+        <Gtk.Box class={"logout-menu-container"} orientation={Gtk.Orientation.VERTICAL} 
           $={(self) => {
               const conns: Map<GObject.Object, number> = new Map();
               const gestureClick = Gtk.GestureClick.new();
               
               self.add_controller(gestureClick);
+              gestureClick.set_button(0);
 
               conns.set(gestureClick, gestureClick.connect("released", (gesture) => {
                   if(gesture.get_current_button() === Gdk.BUTTON_PRIMARY) {
-                      Windows.getDefault().close("logout-menu");
+                      (self.get_root() as Astal.Window|null)?.close();
                       return true;
                   }
               }));
 
-              onCleanup(() => conns.forEach((id, obj) => obj.disconnect(id)));
+              conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
+                  obj.disconnect(id))));
           }}>
             
-            <Gtk.Box class={"top"} hexpand={true} vexpand={false} 
+            <Gtk.Box class={"top"} hexpand vexpand={false} 
               orientation={Gtk.Orientation.VERTICAL} valign={Gtk.Align.START}>
 
                 <Gtk.Label class={"time"} label={time(t => t.format("%H:%M")!)} />
                 <Gtk.Label class={"date"} label={time(d => d.format("%A, %B %d %Y")!)} />
             </Gtk.Box>
 
-            <Gtk.Box class={"button-row"} homogeneous={true} heightRequest={360} valign={Gtk.Align.CENTER}
+            <Gtk.Box class={"button-row"} homogeneous heightRequest={360} valign={Gtk.Align.CENTER}
               vexpand>
                 <Gtk.Button class={"poweroff"} iconName={"system-shutdown-symbolic"}
-                  onClicked={() => AskPopup(poweroffAsk)} onActivate={() => 
+                  onClicked={() => AskPopup({
-                      AskPopup(poweroffAsk)}
+                      title: "Power Off",
+                      text: "Are you sure you want to power off? Unsaved work will be lost.",
+                      onAccept: () => {
+                          Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
+                              NightLight.getDefault().saveData();
+
+                          execAsync("systemctl poweroff");
+                      }
+                  })}
                 />
                 <Gtk.Button class={"reboot"} iconName={"arrow-circular-top-right-symbolic"}
-                  onClicked={() => AskPopup(rebootAsk)} onActivate={() => AskPopup(rebootAsk)}
+                  onClicked={() => AskPopup({
+                      title: "Reboot",
+                      text: "Are you sure you want to Reboot? Unsaved work will be lost.",
+                      onAccept: () => {
+                          Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
+                              NightLight.getDefault().saveData();
+
+                          execAsync("systemctl reboot");
+                      }
+                  })}
                 />
                 <Gtk.Button class={"suspend"} iconName={"weather-clear-night-symbolic"}
-                  onClicked={() => AskPopup(suspendAsk)} onActivate={() => AskPopup(suspendAsk)}
+                  onClicked={() => AskPopup({
+                      title: "Suspend",
+                      text: "Are you sure you want to Suspend?",
+                      onAccept: () => execAsync("systemctl suspend")
+                  })}
                 />
                 <Gtk.Button class={"logout"} iconName={"system-log-out-symbolic"}
-                  onClicked={() => AskPopup(logoutAsk)} onActivate={() => AskPopup(logoutAsk)}
+                  onClicked={() => AskPopup({
+                      title: "Log out",
+                      text: "Are you sure you want to log out? Your session will be ended.",
+                      onAccept: () => {
+                          Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
+                              NightLight.getDefault().saveData();
+
+                          execAsync(`hyprctl dispatch exit`).catch((err: Gio.IOErrorEnum) => 
+                              Notifications.getDefault().sendNotification({
+                                  appName: "colorshell",
+                                  summary: "Couldn't exit Hyprland",
+                                  body: `An error occurred and colorshell couldn't exit Hyprland. Stderr: \n${
+                                      err.message ? `${err.message}\n` : ""}${err.stack}`,
+                                  urgency: AstalNotifd.Urgency.NORMAL,
+                                  actions: [{
+                                      text: "Report Issue on colorshell",
+                                      onAction: () => execAsync(
+                                          `xdg-open https://github.com/retrozinndev/colorshell/issues/new`
+                                      ).catch((err: Gio.IOErrorEnum) => 
+                                          Notifications.getDefault().sendNotification({
+                                              appName: "colorshell",
+                                              summary: "Couldn't open link",
+                                              body: `Do you have \`xdg-utils\` installed? Stderr: \n${
+                                                  err.message ? `${err.message}\n` : ""}${err.stack}`
+                                          })
+                                      )
+                                  }]
+                              })
+                          )
+                      }
+                  })}
                 />
             </Gtk.Box>
         </Gtk.Box>
     </Astal.Window> as Astal.Window;
-
-const logoutAsk: AskPopupProps = {
-    title: "Log out",
-    text: "Are you sure you want to log out? Your session will be ended.",
-    onAccept: () => {
-        Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
-            NightLight.getDefault().saveData();
-
-        execAsync(`hyprctl dispatch exit`).catch((err: Gio.IOErrorEnum) => 
-            Notifications.getDefault().sendNotification({
-                appName: "colorshell",
-                summary: "Couldn't exit Hyprland",
-                body: `An error occurred and colorshell couldn't exit Hyprland. Stderr: \n${
-                    err.message ? `${err.message}\n` : ""}${err.stack}`,
-                urgency: AstalNotifd.Urgency.NORMAL,
-                actions: [{
-                    text: "Report Issue on colorshell",
-                    onAction: () => execAsync(
-                        `xdg-open https://github.com/retrozinndev/colorshell/issues/new`
-                    ).catch((err: Gio.IOErrorEnum) => 
-                        Notifications.getDefault().sendNotification({
-                            appName: "colorshell",
-                            summary: "Couldn't open link",
-                            body: `Do you have \`xdg-utils\` installed? Stderr: \n${
-                                err.message ? `${err.message}\n` : ""}${err.stack}`
-                        })
-                    )
-                }]
-            })
-        )
-    }
-};
-
-const suspendAsk: AskPopupProps = {
-    title: "Suspend",
-    text: "Are you sure you want to Suspend?",
-    onAccept: () => execAsync("systemctl suspend")
-};
-
-const rebootAsk: AskPopupProps = {
-    title: "Reboot",
-    text: "Are you sure you want to Reboot? Unsaved work will be lost.",
-    onAccept: () => {
-        Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
-            NightLight.getDefault().saveData();
-
-        execAsync("systemctl reboot");
-    }
-};
-
-const poweroffAsk: AskPopupProps = {
-    title: "Power Off",
-    text: "Are you sure you want to power off? Unsaved work will be lost.",
-    onAccept: () => {
-        Config.getDefault().getProperty("night_light.save_on_shutdown", "boolean") && 
-            NightLight.getDefault().saveData();
-
-        execAsync("systemctl poweroff");
-    }
-};