feat(ags): make closer work and change button class

config/ags/js/bar/clock.js

@@ -1,6 +1,5 @@
 const { Box, Label } = ags.Widget;
-const { execAsync } = ags.Utils;
+const { toggleWindow } = ags.App;
-const { openWindow, closeWindow } = ags.App;
 const { DateTime } = imports.gi.GLib;
 
 import { EventBox } from '../misc/cursorbox.js';
@@ -19,22 +18,16 @@ const ClockModule = ({
     ],
 });
 
-var calendarState = false;
-
 export const Clock = EventBox({
   className: 'toggle-off',
-  onPrimaryClickRelease: () => {
+  onPrimaryClickRelease: () => toggleWindow('calendar'),
-    if (calendarState) {
+  connections: [
-      Clock.toggleClassName('toggle-on', false);
+    [ags.App, (box, windowName, visible) => {
-      closeWindow('calendar');
+      if (windowName == 'calendar') {
-      calendarState = false;
+        Clock.toggleClassName('toggle-on', visible);
       }
-    else {
+    }],
-      Clock.toggleClassName('toggle-on', true);
+  ],
-      openWindow('calendar');
-      calendarState = true;
-    }
-  },
   child: Box({
     child: ClockModule({}),
   }),

config/ags/js/bar/notif-button.js

@@ -1,26 +1,20 @@
 const { Box, Label, Icon } = ags.Widget;
-const { openWindow, closeWindow } = ags.App;
+const { toggleWindow } = ags.App;
 const { Notifications } = ags.Service;
 
 import { Separator } from '../misc/separator.js';
 import { EventBox } from '../misc/cursorbox.js';
 
-var notifButtonState = false;
-
 export const NotifButton = EventBox({
   className: 'toggle-off',
-  onPrimaryClickRelease: () => {
+  onPrimaryClickRelease: () => toggleWindow('notification-center'),
-    if (notifButtonState) {
+  connections: [
-      NotifButton.toggleClassName('toggle-on', false);
+    [ags.App, (box, windowName, visible) => {
-      closeWindow('notification-center');
+      if (windowName == 'notification-center') {
-      notifButtonState = false;
+        NotifButton.toggleClassName('toggle-on', visible);
       }
-    else {
+    }],
-      NotifButton.toggleClassName('toggle-on', true);
+  ],
-      openWindow('notification-center');
-      notifButtonState = true;
-    }
-  },
   child: Box({
     className: 'notif-panel',
     vertical: false,

config/ags/js/misc/closer.js

@@ -1,13 +1,18 @@
-export const Closer = ags.Widget.Window({
+const { Window, EventBox } = ags.Widget;
+const { windows, closeWindow } = ags.App;
+
+export const Closer = Window({
   name: 'closer',
   popup: true,
   layer: 'top',
   anchor: 'top bottom left right',
 
-  child: ags.Widget.EventBox({
+  child: EventBox({
     onPrimaryClickRelease: () => {
-      ags.App.closeWindow('powermenu');
+      windows.forEach(w => {
-      ags.App.closeWindow('closer');
+        if (w.name != 'bar')
+          closeWindow(w.name)
+      });
     },
   }),
 });

config/ags/js/notifications/base.js

@@ -6,6 +6,7 @@ const { Box, Icon, Label, Button } = ags.Widget;
 import { Draggable } from '../misc/drag.js';
 import { EventBox } from '../misc/cursorbox.js'
 
+// TODO: launch app when click on icon
 const NotificationIcon = ({ appEntry, appIcon, image }) => {
   if (image) {
     return Box({