refactor(ags): use export default where possible and make windows funcs so they're only called in config.js

hosts/wim/config/ags/config.js

@@ -1,18 +1,16 @@
 import { App, Utils } from './imports.js';
 
-import { Powermenu }              from './js/powermenu.js';
+import Closer         from './js/misc/closer.js';
+import Powermenu      from './js/powermenu.js';
 import { Bar }        from './js/bar/main.js';
-import { NotificationCenter }     from './js/notifications/center.js';
-import { NotificationsPopupList } from './js/notifications/popup.js'
-import { Calendar }               from './js/date.js';
-import { QuickSettings }          from './js/quick-settings/main.js';
+import NotifCenter    from './js/notifications/center.js';
+import NotifPopups    from './js/notifications/popup.js'
+import Calendar       from './js/date.js';
+import QuickSettings  from './js/quick-settings/main.js';
 import Overview       from './js/overview/main.js';
 import AppLauncher    from './js/applauncher/main.js';
 import * as Corners   from './js/screen-corners.js';
 
-import { Closer, closeAll }       from './js/misc/closer.js';
-globalThis.closeAll = () => closeAll();
-
 
 const scss = App.configDir + '/scss/main.scss';
 const css  = App.configDir + '/style.css';
@@ -35,15 +33,15 @@ export default {
     'applauncher': 500,
   },
   windows: [
-    Powermenu,
-    Bar,
-    Closer,
-    NotificationCenter,
-    NotificationsPopupList,
-    Calendar,
-    QuickSettings,
-    Overview,
-    AppLauncher,
+    Powermenu(),
+    Bar(),
+    Closer(),
+    NotifCenter(),
+    NotifPopups(),
+    Calendar(),
+    QuickSettings(),
+    Overview(),
+    AppLauncher(),
     Corners.Bottomleft(),
     Corners.Bottomright(),
   ],

hosts/wim/config/ags/js/applauncher/main.js

@@ -114,8 +114,7 @@ const Applauncher = ({ windowName = 'applauncher' } = {}) => {
   });
 };
 
-// FIXME: make it unfocusable
-export default PopupWindow({
+export default () => PopupWindow({
   name: 'applauncher',
   focusable: true,
   child: Applauncher(),

hosts/wim/config/ags/js/bar/main.js

@@ -17,15 +17,14 @@ import { Revealer }         from './fullscreen.js';
 //import KeyboardLayout       from './keyboard-layout.js';
 
 
-export const Bar = Window({
+export const Bar = () => Window({
   name: 'bar',
   layer: 'overlay',
   anchor: [ 'top', 'left', 'right' ],
   exclusive: true,
   child: Revealer({
     child: CenterBox({
-      className: 'transparent',
-      style: 'margin: 5px',
+      className: 'bar',
       vertical: false,
 
       startWidget: Box({

hosts/wim/config/ags/js/date.js

@@ -72,7 +72,7 @@ const CalendarWidget = () => Box({
   }),
 });
 
-export const Calendar = PopupWindow({
+export default () => PopupWindow({
   anchor: [ 'top', 'right' ],
   margin: [ 8, 182, 0, 0],
   name: 'calendar',

hosts/wim/config/ags/js/misc/closer.js

@@ -14,13 +14,14 @@ const ALWAYS_OPEN = [
 ];
 
 
-export const closeAll = () => {
+const closeAll = () => {
   App.windows.forEach(w => {
     if (!ALWAYS_OPEN.some(window => window === w.name))
       App.closeWindow(w.name)
   });
   App.closeWindow('closer');
 };
+globalThis.closeAll = () => closeAll();
 
 Pointers.connect('new-line', (_, out) => {
   if (out) {
@@ -59,7 +60,7 @@ Pointers.connect('new-line', (_, out) => {
   }
 })
 
-export const Closer = Window({
+export default () => Window({
   name: 'closer',
   popup: true,
   layer: 'top',

hosts/wim/config/ags/js/notifications/base.js

@@ -6,7 +6,6 @@ import GLib from 'gi://GLib';
 
 import { Draggable } from '../misc/drag.js';
 import { EventBox } from '../misc/cursorbox.js'
-import { closeAll } from '../misc/closer.js';
 
 
 const NotificationIcon = notif => {
@@ -19,7 +18,7 @@ const NotificationIcon = notif => {
       iconCmd = box => {
         if (!box.get_parent().get_parent().get_parent().get_parent().get_parent()._dragging) {
           execAsync(['bash', '-c', `$AGS_PATH/launch-app.sh ${app.app.get_string('StartupWMClass')} ${app.app.get_string('Exec')}`]).catch(print);
-          closeAll();
+          globalThis.closeAll();
         }
       }
     }
@@ -28,7 +27,7 @@ const NotificationIcon = notif => {
         if (!box.get_parent().get_parent().get_parent().get_parent().get_parent()._dragging) {
           execAsync(['bash', '-c', `$AGS_PATH/launch-app.sh discord ${app.app.get_string('Exec')}`])
             .catch(print);
-          closeAll();
+          globalThis.closeAll();
         }
       }
     }

hosts/wim/config/ags/js/notifications/center.js

@@ -134,7 +134,7 @@ const NotificationCenterWidget = Box({
   ],
 });
 
-export const NotificationCenter = PopupWindow({
+export default () => PopupWindow({
   name: 'notification-center',
   anchor: [ 'top', 'right' ],
   margin: [ 8, 60, 0, 0 ],

hosts/wim/config/ags/js/notifications/popup.js

@@ -77,7 +77,7 @@ const PopupList = ({ transition = 'none' } = {}) => Box({
   ],
 });
 
-export const NotificationsPopupList = Window({
+export default () => Window({
   name: `notifications`,
   anchor: [ 'top', 'left' ],
   child: PopupList(),

hosts/wim/config/ags/js/overview/main.js

@@ -11,7 +11,7 @@ function update(box) {
   updateClients(box);
 }
 
-export default PopupWindow({
+export default () => PopupWindow({
   name: 'overview',
   transition: 'crossfade',
 

hosts/wim/config/ags/js/powermenu.js

@@ -37,7 +37,7 @@ const PowermenuWidget = CenterBox({
   }),
 });
 
-export const Powermenu = PopupWindow({
+export default () => PopupWindow({
   name: 'powermenu',
   transition: 'crossfade',
   child: PowermenuWidget,

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

@@ -69,7 +69,7 @@ const QuickSettingsWidget = Box({
   ],
 });
 
-export const QuickSettings = PopupWindow({
+export default () => PopupWindow({
   name: 'quick-settings',
   anchor: [ 'top', 'right' ],
   margin: [ 8, 5, 0, ],

hosts/wim/config/ags/scss/widgets/traybuttons.scss

@@ -1,3 +1,7 @@
+.bar {
+  margin: 5px;
+}
+
 .osk-toggle,
 .tablet-toggle,
 .heart-toggle {

hosts/wim/config/ags/style.css

@@ -44,6 +44,9 @@ undershoot {
 .powermenu-clickhandler {
   background-color: black; }
 
+.bar {
+  margin: 5px; }
+
 .osk-toggle,
 .tablet-toggle,
 .heart-toggle {