✨ ags(bar, notifications, control-center): add status icons to bar, notification history fixed, notification history below control-center

ags/window/ControlCenter.ts

@@ -1,35 +1,58 @@
-import { Gtk, Widget } from "astal/gtk3";
+import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import { QuickActions } from "../widget/control-center/QuickActions";
 import { Tiles } from "../widget/control-center/Tiles";
 import { Sliders } from "../widget/control-center/Sliders";
-import { PopupWindow, PopupWindowProps } from "../widget/PopupWindow";
 import { hidePages, PagesWidget } from "../widget/control-center/Pages";
 import { NotifHistory } from "../widget/control-center/NotifHistory";
 
 const connections: Array<number> = [];
+const { TOP, LEFT, BOTTOM, RIGHT } = Astal.WindowAnchor;
 
-export const ControlCenter: Widget.Window = PopupWindow({
-    className: "control-center",
+export const ControlCenter = new Widget.Window({
     namespace: "control-center",
-    marginTop: 10,
-    marginRight: 10,
-    monitor: 0,
-    onClose: () => hidePages(),
-    halign: Gtk.Align.END,
-    valign: Gtk.Align.START,
+    className: "control-center",
+    anchor: TOP | BOTTOM | LEFT | RIGHT,
+    exclusivity: Astal.Exclusivity.NORMAL,
+    keymode: Astal.Keymode.EXCLUSIVE,
+    layer: Astal.Layer.OVERLAY,
+    focusOnMap: true,
     visible: false,
-    vexpand: true,
+    monitor: 0,
+    onDestroy: (_) => connections.map(id => _.disconnect(id)),
+    onButtonPressEvent: (_, event: Gdk.Event) => {
+        const [, posX, posY] = event.get_coords();
+        const childAllocation = _.get_child()!.get_allocation();
+
+        if((posX < childAllocation.x || posX > (childAllocation.x + childAllocation.width)) || 
+           (posY < childAllocation.y || posY > (childAllocation.y + childAllocation.height))) {
+            _.hide();
+            hidePages();
+        }
+    },
+    onKeyPressEvent: (_, event: Gdk.Event) => {
+        if(event.get_keyval()[1] === Gdk.KEY_Escape) {
+            _.hide();
+            hidePages();
+        }
+    },
     child: new Widget.Box({
-        orientation: Gtk.Orientation.VERTICAL,
-        expand: true,
+        className: "popup",
+        halign: Gtk.Align.END,
+        css: `.popup {
+            margin-top: 10px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }`,
         vexpand: true,
+        widthRequest: 400,
+        onButtonPressEvent: () => true,
+        orientation: Gtk.Orientation.VERTICAL,
         children: [
             new Widget.Box({
                 className: "control-center-container",
                 orientation: Gtk.Orientation.VERTICAL,
                 widthRequest: 400,
                 vexpand: false,
-                hexpand: true,
                 children: [
                     QuickActions, 
                     Sliders,
@@ -40,7 +63,7 @@ export const ControlCenter: Widget.Window = PopupWindow({
             NotifHistory
         ]
     } as Widget.BoxProps)
-} as PopupWindowProps);
+} as Widget.WindowProps);
 
 connections.push(ControlCenter.connect("hide", (_) => {
     hidePages();