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 => {
+    onHover: () => {
-      box.get_parent().focusable = true
+      getWindow('applauncher').focusable = true;
     },
-    onHoverLost: box => {
+    onHoverLost: () => {
-      box.get_parent().focusable = false
+      getWindow('applauncher').focusable = false;
     },
-    child: PopUp({
+    child: Applauncher(),
-      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,22 +72,16 @@ const CalendarWidget = () => Box({
   }),
 });
 
-export const Calendar = Window({
+export const Calendar = PopupWindow({
-  name: 'calendar',
-  layer: 'overlay',
-  popup: true,
   anchor: [ 'top', 'right' ],
   margin: [ 8, 182, 0, 0],
-
+  name: 'calendar',
-  child: PopUp({
+  child: Box({
-    name: 'calendar',
+    className: 'date',
-    child: Box({
+    vertical: true,
-      className: 'date',
+    children: [
-      vertical: true,
+      Time(),
-      children: [
+      CalendarWidget(),
-        Time(),
+    ],
-        CalendarWidget(),
-      ],
-    }),
   }),
 });

config/ags/js/misc/popup.js

@@ -1,22 +1,34 @@
 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 = ({
-  style: 'min-height:1px; min-width:1px',
+  name,
-  child: Revealer({
+  child,
-    ...params,
+  transition = 'slide_down',
-    transition,
+  ...params
-    transitionDuration: 500,
+}) => Window({
-    connections: [[App, (revealer, currentName, visible) => {
+  name,
-      if (currentName === name) {
+  popup: true,
-        revealer.reveal_child = visible;
+  visible: false,
+  layer: 'overlay',
+  ...params,
 
-        if (visible && name !== 'overview')
+  child: Box({
-          openWindow('closer');
+    style: 'min-height:1px; min-width:1px',
-      }
+    child: Revealer({
-    }]],
+      transition,
-    child: child,
+      transitionDuration: 500,
+      connections: [[App, (revealer, currentName, visible) => {
+        if (currentName === name) {
+          revealer.reveal_child = visible;
+
+          if (visible && name !== 'overview')
+            openWindow('closer');
+        }
+      }]],
+      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: NotificationCenterWidget,
-  child: PopUp({
-    name: 'notification-center',
-    child: NotificationCenterWidget,
-  }),
 });

config/ags/js/overview/main.js

@@ -1,52 +1,46 @@
 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({
+export default PopupWindow({
   name: 'overview',
-  layer: 'overlay',
+  transition: 'crossfade',
-  popup: true,
 
-  child: PopUp({
+  child: Box({
-    name: 'overview',
+    className: 'overview',
-    transition: 'crossfade',
+    vertical: true,
-
+    children: [
-    child: Box({
+      Box({
-      className: 'overview',
+        vertical: true,
-      vertical: true,
+        children: [
-      children: [
+          WorkspaceRow('normal', 0),
-        Box({
+        ],
-          vertical: true,
+      }),
-          children: [
+      Box({
-            WorkspaceRow('normal', 0),
+        vertical: true,
-          ],
+        children: [
-        }),
+          WorkspaceRow('special', 0),
-        Box({
+        ],
-          vertical: true,
+      }),
-          children: [
+    ],
-            WorkspaceRow('special', 0),
+    connections: [
-          ],
+      [Hyprland, box => {
-        }),
+        box._getWorkspaces(box);
-      ],
+        box._updateWorkspaces(box);
-      connections: [
+        box._updateClients(box);
-        [Hyprland, box => {
+      }],
-          box._getWorkspaces(box);
+    ],
-          box._updateWorkspaces(box);
+    properties: [
-          box._updateClients(box);
+      ['workspaces'],
-        }],
-      ],
-      properties: [
-        ['workspaces'],
-
-        ['getWorkspaces', getWorkspaces],
-        ['updateWorkspaces', updateWorkspaces],
-        ['updateClients', updateClients],
-      ],
-    }),
 
+      ['getWorkspaces', getWorkspaces],
+      ['updateWorkspaces', updateWorkspaces],
+      ['updateClients', updateClients],
+    ],
   }),
+
 });

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({
+export const Powermenu = PopupWindow({
   name: 'powermenu',
-  popup: true,
+  transition: 'crossfade',
-  layer: 'overlay',
+  child: PowermenuWidget,
-  child: PopUp({
-    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({
+  child: QuickSettingsWidget,
-    name: 'quick-settings',
-    child: QuickSettingsWidget,
-  }),
 });