feat: add dnd toggle button

widgets/control-center/notification-list.tsx

@@ -1,11 +1,53 @@
-import { Gtk } from "ags/gtk4";
+import { Gdk, Gtk } from "ags/gtk4";
+import Notifd from "gi://AstalNotifd";
+import { createComputed, createBinding } from "ags";
 
 export const NotificationList = () => {
   const { VERTICAL } = Gtk.Orientation;
 
+  const notifd = Notifd.get_default();
+  const isDndMode = createBinding(notifd, "dont-disturb");
+
+  const toggleDndMode = () => {
+    const currentDnd = notifd.get_dont_disturb();
+    notifd.set_dont_disturb(!currentDnd);
+  };
+
+  const notificationIcon = createComputed([isDndMode], (dndMode) => {
+    if (dndMode) {
+      return "fa-bell-off-symbolic";
+    }
+
+    return "fa-bell-symbolic";
+  });
+
   return (
-    <box vexpand orientation={VERTICAL} spacing={20}>
-      <label label="Notifications" />
+    <box
+      vexpand
+      hexpand
+      orientation={VERTICAL}
+      spacing={20}
+      cssClasses={["notification-list"]}
+    >
+      <box hexpand>
+        <label label="Notifications" />
+        <box hexpand halign={Gtk.Align.END} spacing={10}>
+          <button
+            onClicked={toggleDndMode}
+            tooltipText={isDndMode((dnd) =>
+              dnd ? "Disable Do Not Disturb" : "Enable Do Not Disturb",
+            )}
+            cursor={Gdk.Cursor.new_from_name("pointer", null)}
+            class={isDndMode((dnd) => (dnd ? "focus" : ""))}
+          >
+            <image iconName={notificationIcon} />
+          </button>
+
+          <button cursor={Gdk.Cursor.new_from_name("pointer", null)}>
+            <image iconName="fa-broom-symbolic" />
+          </button>
+        </box>
+      </box>
       <box vexpand cssClasses={["pill"]}></box>
     </box>
   );

widgets/notifications/index.tsx

@@ -1,4 +1,10 @@
-import { For, createState, onCleanup } from "ags";
+import {
+  For,
+  createBinding,
+  createComputed,
+  createState,
+  onCleanup,
+} from "ags";
 import { Astal, Gdk, Gtk } from "ags/gtk4";
 import AstalNotifd from "gi://AstalNotifd";
 import { Notification } from "./notification";
@@ -7,6 +13,7 @@ export const WINDOW_NAME = "notifications";
 
 export const Notifications = (gdkmonitor: Gdk.Monitor) => {
   const notifd = AstalNotifd.get_default();
+  const isDndMode = createBinding(notifd, "dont-disturb");
 
   const { TOP, RIGHT } = Astal.WindowAnchor;
 
@@ -33,13 +40,20 @@ export const Notifications = (gdkmonitor: Gdk.Monitor) => {
     notifd.disconnect(resolvedHandler);
   });
 
+  const shouldShowWindow = createComputed(
+    [notifications, isDndMode],
+    (notifs, dndEnabled) => {
+      return !dndEnabled && notifs.length > 0;
+    },
+  );
+
   return (
     <window
       $={(self) => onCleanup(() => self.destroy())}
       name={WINDOW_NAME}
       cssClasses={["notifications"]}
       gdkmonitor={gdkmonitor}
-      visible={notifications((ns) => ns.length > 0)}
+      visible={shouldShowWindow}
       anchor={TOP | RIGHT}
     >
       <box orientation={Gtk.Orientation.VERTICAL} spacing={10}>