feat(agsV2): add notif-button in bar

nixosModules/ags/v2/app.ts

@@ -5,7 +5,7 @@ import style from './style.scss';
 import Bar from './widgets/bar/wim';
 import BgFade from './widgets/bg-fade/main';
 import Corners from './widgets/corners/main';
-import { NotifPopups } from './widgets/notifs/main';
+import { NotifPopups, NotifCenter } from './widgets/notifs/main';
 
 import MonitorClicks from './services/monitor-clicks';
 
@@ -18,6 +18,7 @@ App.start({
         BgFade();
         Corners();
         NotifPopups();
+        NotifCenter();
 
         new MonitorClicks();
     },

nixosModules/ags/v2/services/monitor-clicks.ts

@@ -113,6 +113,7 @@ export default class MonitorClicks extends GObject.Object {
             return;
         }
 
+        try {
             const layers = JSON.parse(await hyprMessage('j/layers')) as LayerResult;
             const pos = JSON.parse(await hyprMessage('j/cursorpos')) as CursorPos;
 
@@ -182,4 +183,8 @@ export default class MonitorClicks extends GObject.Object {
                 }
             });
         }
+        catch (e) {
+            console.log(e);
+        }
+    }
 }

nixosModules/ags/v2/widgets/bar/fullscreen.tsx

@@ -20,11 +20,12 @@ Hyprland.connect('event', async() => {
         m1.size === m2.size &&
         Array.from(m1.keys()).every((key) => m1.get(key) === m2.get(key));
 
+    try {
         const newMonitors = JSON.parse(await hyprMessage('j/monitors')) as AstalHyprland.Monitor[];
 
         const fs = FullscreenState.get();
         const fsClients = Hyprland.get_clients().filter((c) => {
-        const mon = newMonitors.find((monitor) => monitor.id === c.get_monitor().id);
+            const mon = newMonitors.find((monitor) => monitor.id === c.get_monitor()?.id);
 
             return c.fullscreenClient !== 0 &&
                 c.workspace.id === mon?.activeWorkspace.id;
@@ -48,6 +49,10 @@ Hyprland.connect('event', async() => {
                 clientAddrs,
             });
         }
+    }
+    catch (e) {
+        console.log(e);
+    }
 });
 
 export default ({

nixosModules/ags/v2/widgets/bar/items/current-client.tsx

@@ -39,7 +39,12 @@ export default () => {
     Hyprland.connect('notify::focused-client', () => updateVars());
     Hyprland.connect('client-removed', () => updateVars());
     Hyprland.connect('client-added', async() => {
+        try {
             updateVars(Hyprland.get_client(JSON.parse(await hyprMessage('j/activewindow')).address));
+        }
+        catch (e) {
+            console.log(e);
+        }
     });
 
     return (

nixosModules/ags/v2/widgets/bar/items/notif-button.tsx

@@ -0,0 +1,59 @@
+import { bind } from 'astal';
+import { App } from 'astal/gtk3';
+
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+const Notifications = AstalNotifd.get_default();
+
+import Separator from '../../misc/separator';
+
+const SPACING = 4;
+
+// Types
+import { PopupWindow } from '../../misc/popup-window';
+
+
+export default () => (
+    <button
+        className="bar-item"
+        cursor="pointer"
+
+        onButtonReleaseEvent={(self) => {
+            const win = App.get_window('win-notif-center') as PopupWindow;
+
+            win.set_x_pos(
+                self.get_allocation(),
+                'right',
+            );
+
+            win.visible = !win.visible;
+        }}
+
+        setup={(self) => {
+            App.connect('window-toggled', (_, win) => {
+                if (win.name === 'win-notif-center') {
+                    self.toggleClassName('toggle-on', win.visible);
+                }
+            });
+        }}
+    >
+        <box>
+            <icon
+                icon={bind(Notifications, 'notifications').as((notifs) => {
+                    if (Notifications.dontDisturb) {
+                        return 'notification-disabled-symbolic';
+                    }
+                    else if (notifs.length > 0) {
+                        return 'notification-new-symbolic';
+                    }
+                    else {
+                        return 'notification-symbolic';
+                    }
+                })}
+            />
+
+            <Separator size={SPACING} />
+
+            <label label={bind(Notifications, 'notifications').as((n) => String(n.length))} />
+        </box>
+    </button>
+);

nixosModules/ags/v2/widgets/bar/items/workspaces.tsx

@@ -19,7 +19,7 @@ const Workspace = ({ id = 0 }) => (
             tooltip_text={id.toString()}
 
             onClickRelease={() => {
-                hyprMessage(`dispatch workspace ${id}`);
+                hyprMessage(`dispatch workspace ${id}`).catch(console.log);
             }}
         >
             <box

nixosModules/ags/v2/widgets/bar/style.scss

@@ -8,6 +8,12 @@
         font-size: 20px;
         min-height: 35px;
 
+        transition: background-color 300ms;
+
+        &:hover {
+            background-color: lighten($window_bg_color, 3%);
+        }
+
         &.battery icon {
             &.charging {
                 color: green;

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -3,6 +3,7 @@ import { Astal, Gtk } from 'astal/gtk3';
 import Battery from './items/battery';
 import Clock from './items/clock';
 import CurrentClient from './items/current-client';
+import NotifButton from './items/notif-button';
 import SysTray from './items/tray';
 import Workspaces from './items/workspaces';
 
@@ -39,6 +40,10 @@ export default () => (
             </box>
 
             <box hexpand halign={Gtk.Align.END}>
+                <NotifButton />
+
+                <Separator size={8} />
+
                 <Battery />
 
                 <Separator size={2} />

nixosModules/ags/v2/widgets/misc/popup-window.tsx

@@ -1,8 +1,8 @@
-import { App, Astal, Widget } from 'astal/gtk3';
+import { App, Astal, Gtk, Widget } from 'astal/gtk3';
 import { register, property } from 'astal/gobject';
 import { Binding, idle } from 'astal';
 
-import { hyprMessage } from '../../lib';
+import { get_hyprland_monitor, hyprMessage } from '../../lib';
 
 /* Types */
 type CloseType = 'none' | 'stay' | 'released' | 'clicked';
@@ -60,7 +60,7 @@ export class PopupWindow extends Widget.Window {
         App.add_window(this);
 
         const setTransition = (_: PopupWindow, t: HyprTransition | Binding<HyprTransition>) => {
-            hyprMessage(`keyword layerrule animation ${t}, ${this.name}`);
+            hyprMessage(`keyword layerrule animation ${t}, ${this.name}`).catch(console.log);
         };
 
         this.connect('notify::transition', setTransition);
@@ -82,6 +82,34 @@ export class PopupWindow extends Widget.Window {
             }
         });
     };
+
+    set_x_pos(
+        alloc: Gtk.Allocation,
+        side = 'right' as 'left' | 'right',
+    ) {
+        const monitor = this.gdkmonitor ??
+          this.get_display().get_monitor_at_point(alloc.x, alloc.y);
+
+        // @ts-expect-error this should exist
+        const transform = get_hyprland_monitor(monitor)?.transform;
+
+        let width: number;
+
+        if (transform && (transform === 1 || transform === 3)) {
+            width = monitor.get_geometry().height;
+        }
+        else {
+            width = monitor.get_geometry().width;
+        }
+
+        this.margin_right = side === 'right' ?
+                (width - alloc.x - alloc.width) :
+                this.margin_right;
+
+        this.margin_left = side === 'right' ?
+                this.margin_left :
+                (alloc.x - alloc.width);
+    }
 }
 
 export default (props: PopupWindowProps) => new PopupWindow(props);

nixosModules/ags/v2/widgets/notifs/gesture.tsx

@@ -63,6 +63,7 @@ export class NotifGestureWrapper extends Widget.EventBox {
     public dragging: boolean;
 
     private async get_hovered(): Promise<boolean> {
+        try {
             const layers = JSON.parse(await hyprMessage('j/layers')) as LayerResult;
             const cursorPos = JSON.parse(await hyprMessage('j/cursorpos')) as CursorPos;
 
@@ -91,13 +92,18 @@ export class NotifGestureWrapper extends Widget.EventBox {
                             .reduce((prev, curr) => prev + curr, 0);
 
                         if (cursorPos.y >= thisY && cursorPos.y <= thisY + (popups[index][1] ?? 0)) {
-                        if (cursorPos.x >= notifLayer.x && cursorPos.x <= notifLayer.x + notifLayer.w) {
+                            if (cursorPos.x >= notifLayer.x &&
+                                cursorPos.x <= notifLayer.x + notifLayer.w) {
                                 return true;
                             }
                         }
                     }
                 }
             }
+        }
+        catch (e) {
+            console.log(e);
+        }
 
         return false;
     }

nixosModules/ags/v2/widgets/notifs/main.tsx

@@ -1,5 +1,7 @@
 import { Astal } from 'astal/gtk3';
 
+import PopupWindow from '../misc/popup-window';
+
 import Popups from './popups';
 
 
@@ -13,3 +15,12 @@ export const NotifPopups = () => (
         <Popups />
     </window>
 );
+
+export const NotifCenter = () => (
+    <PopupWindow
+        name="notif-center"
+        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT}
+    >
+        <box css="min-height: 100px; min-width: 100px; background: black;" />
+    </PopupWindow>
+);