refactor(ags): make a better popuWindow widget

config/ags/js/applauncher/main.js

@@ -1,8 +1,9 @@
 import { App, Applications, Widget } from '../../imports.js';
-const { Label, Box, Icon, Button, Scrollable, Entry, Window, EventBox } = Widget;
+const { Label, Box, Icon, Button, Scrollable, Entry, EventBox } = Widget;
+const { getWindow } = App
 
 import { Separator } from '../misc/separator.js';
-import { PopUp } from '../misc/popup.js';
+import { PopupWindow } from '../misc/popup.js';
 
 const icons = {
   apps: {
@@ -114,21 +115,15 @@ const Applauncher = ({ windowName = 'applauncher' } = {}) => {
 };
 
 // FIXME: make it so I don't have to click to trigger onHoverLost
-export default Window({
+export default PopupWindow({
   name: 'applauncher',
-  popup: true,
-  focusable: true,
-  layer: 'overlay',
   child: EventBox({
-    onHover: box => {
-      box.get_parent().focusable = true
+    onHover: () => {
+      getWindow('applauncher').focusable = true;
     },
-    onHoverLost: box => {
-      box.get_parent().focusable = false
+    onHoverLost: () => {
+      getWindow('applauncher').focusable = false;
     },
-    child: PopUp({
-      name: 'applauncher',
     child: Applauncher(),
   }),
-  }),
 });

config/ags/js/bar/workspaces.js

@@ -16,7 +16,6 @@ Revealer({
     onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
     child: Box({
       className: 'button',
-      child: Label(`${i}`),
       connections: [
         [Hyprland, btn => {
           const occupied = Hyprland.getWorkspace(i)?.windows > 0;

config/ags/js/date.js

@@ -1,11 +1,11 @@
 import { Widget } from '../imports.js';
-const { Box, Label, Window } = Widget;
+const { Box, Label } = Widget;
 
 import Gtk from 'gi://Gtk';
 import GLib from 'gi://GLib';
 const { DateTime } = GLib;
 
-import { PopUp } from './misc/popup.js';
+import { PopupWindow } from './misc/popup.js';
 
 
 const Divider = () => Box({
@@ -72,14 +72,9 @@ const CalendarWidget = () => Box({
   }),
 });
 
-export const Calendar = Window({
-  name: 'calendar',
-  layer: 'overlay',
-  popup: true,
+export const Calendar = PopupWindow({
   anchor: [ 'top', 'right' ],
   margin: [ 8, 182, 0, 0],
-
-  child: PopUp({
   name: 'calendar',
   child: Box({
     className: 'date',
@@ -89,5 +84,4 @@ export const Calendar = Window({
       CalendarWidget(),
     ],
   }),
-  }),
 });

config/ags/js/misc/popup.js

@@ -1,12 +1,23 @@
 import { App, Widget } from '../../imports.js';
-const { Revealer, Box } = Widget;
+const { Revealer, Box, Window } = Widget;
 const { openWindow } = App;
 
 
-export const PopUp = ({name, child, transition = 'slide_down', ...params}) => Box({
+export const PopupWindow = ({
+  name,
+  child,
+  transition = 'slide_down',
+  ...params
+}) => Window({
+  name,
+  popup: true,
+  visible: false,
+  layer: 'overlay',
+  ...params,
+
+  child: Box({
     style: 'min-height:1px; min-width:1px',
     child: Revealer({
-    ...params,
       transition,
       transitionDuration: 500,
       connections: [[App, (revealer, currentName, visible) => {
@@ -19,4 +30,5 @@ export const PopUp = ({name, child, transition = 'slide_down', ...params}) => Bo
       }]],
       child: child,
     }),
+  }),
 });

config/ags/js/notifications/center.js

@@ -1,11 +1,11 @@
 import { Notifications, App, Utils, Widget } from '../../imports.js';
-const { Button, Label, Box, Icon, Scrollable, Window, Revealer } = Widget;
+const { Button, Label, Box, Icon, Scrollable, Revealer } = Widget;
 const { timeout } = Utils;
 const { getWindow } = App;
 
 import Notification from './base.js';
 import { EventBox } from '../misc/cursorbox.js';
-import { PopUp } from '../misc/popup.js';
+import { PopupWindow } from '../misc/popup.js';
 
 
 const ClearButton = () => EventBox({
@@ -135,15 +135,9 @@ const NotificationCenterWidget = Box({
   ],
 });
 
-export const NotificationCenter = Window({
+export const NotificationCenter = PopupWindow({
   name: 'notification-center',
-  layer: 'overlay',
   anchor: [ 'top', 'right' ],
-  popup: true,
   margin: [ 8, 60, 0, 0 ],
-
-  child: PopUp({
-    name: 'notification-center',
   child: NotificationCenterWidget,
-  }),
 });

config/ags/js/overview/main.js

@@ -1,17 +1,12 @@
 import { Hyprland, Widget } from '../../imports.js';
-const { Window, Box } = Widget;
+const { Box } = Widget;
 
-import { PopUp } from '../misc/popup.js';
+import { PopupWindow } from '../misc/popup.js';
 import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
 import { updateClients } from './clients.js';
 
 
-export default Window({
-  name: 'overview',
-  layer: 'overlay',
-  popup: true,
-
-  child: PopUp({
+export default PopupWindow({
   name: 'overview',
   transition: 'crossfade',
 
@@ -48,5 +43,4 @@ export default Window({
     ],
   }),
 
-  }),
 });

config/ags/js/powermenu.js

@@ -1,7 +1,7 @@
 import { Widget } from '../imports.js';
-const { Window, CenterBox, Label } = Widget;
+const { CenterBox, Label } = Widget;
 
-import { PopUp } from './misc/popup.js';
+import { PopupWindow } from './misc/popup.js';
 import { Button } from './misc/cursorbox.js'
 
 
@@ -37,13 +37,8 @@ const PowermenuWidget = CenterBox({
   }),
 });
 
-export const Powermenu = Window({
-  name: 'powermenu',
-  popup: true,
-  layer: 'overlay',
-  child: PopUp({
+export const Powermenu = PopupWindow({
   name: 'powermenu',
   transition: 'crossfade',
   child: PowermenuWidget,
-  }),
 });

config/ags/js/quick-settings/main.js

@@ -1,5 +1,5 @@
 import { Mpris, Widget } from '../../imports.js';
-const { Window, Box, Label, Revealer, Icon } = Widget;
+const { Box, Label, Revealer, Icon } = Widget;
 
 import Gtk from 'gi://Gtk';
 
@@ -7,7 +7,7 @@ import { ButtonGrid } from './button-grid.js';
 import { SliderBox } from './slider-box.js';
 import Player from '../media-player/player.js';
 import { EventBox } from '../misc/cursorbox.js';
-import { PopUp } from '../misc/popup.js';
+import { PopupWindow } from '../misc/popup.js';
 
 
 const QuickSettingsWidget = Box({
@@ -69,14 +69,9 @@ const QuickSettingsWidget = Box({
   ],
 });
 
-export const QuickSettings = Window({
+export const QuickSettings = PopupWindow({
   name: 'quick-settings',
-  layer: 'overlay',
   anchor: [ 'top', 'right' ],
-  popup: true,
   margin: [ 8, 5, 0, ],
-  child: PopUp({
-    name: 'quick-settings',
   child: QuickSettingsWidget,
-  }),
 });