Add do not disturb toggle and bar indicator

modules/home/ags/app/widget/Notifications.tsx

@@ -1,11 +1,38 @@
 import GLib from "gi://GLib"
 import { App, Astal, Gdk, Gtk } from "astal/gtk3"
 import Notifd from "gi://AstalNotifd"
-import { bind } from "astal"
+import { Variable, bind } from "astal"
 import { MAX_TIMEOUT } from "../notif-config"
 
 const notifd = Notifd.get_default()
 
+export const dndIcon = Variable.derive([bind(notifd, "dontDisturb")], (dnd) =>
+    dnd
+        ? "notifications-disabled-symbolic"
+        : "preferences-system-notifications-symbolic",
+)
+
+export function DndToggle() {
+    return (
+        <box
+            className={bind(notifd, "dontDisturb").as((v) =>
+                v ? "toggle-button active" : "toggle-button",
+            )}
+        >
+            <button
+                className="toggle-pill"
+                hexpand
+                onClicked={() => (notifd.dontDisturb = !notifd.dontDisturb)}
+            >
+                <box hexpand>
+                    <icon className="icon" icon={dndIcon()} />
+                    <label className="label" label="Do Not Disturb" />
+                </box>
+            </button>
+        </box>
+    )
+}
+
 notifd.default_timeout = MAX_TIMEOUT
 
 // notifications restored from the daemon's cache on startup are stale

modules/home/ags/app/widget/QuickSettings.tsx

@@ -9,7 +9,7 @@ import { bluetoothIndicator, BluetoothSection } from "./Bluetooth"
 import { BrightnessRow } from "./Brightness"
 import { MediaSection } from "./Media"
 import { batteryIcon, batteryPercent, BatterySection } from "./Battery"
-import { NotificationCard } from "./Notifications"
+import { NotificationCard, DndToggle, dndIcon } from "./Notifications"
 
 const speaker = AstalWp.get_default().audio.default_speaker!
 const mic = AstalWp.get_default().audio.default_microphone
@@ -83,7 +83,7 @@ export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
         >
             <box spacing={6}>
                 <box className="notif-indicator" spacing={3}>
-                    <icon icon="preferences-system-notifications-symbolic" />
+                    <icon icon={dndIcon()} />
                     <label
                         className="notif-count"
                         label={notifCount.as((n) => `${n}`)}
@@ -139,6 +139,7 @@ export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
                 </box>
             )}
             <BrightnessRow />
+            <DndToggle />
             <WifiSection open={open} />
             <BluetoothSection open={open} />
             <MediaSection />