diff --git a/assets/icons/hicolor/scalable/devices/fa-bell-off-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-bell-off-symbolic.svg
new file mode 100644
index 0000000..79c7193
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-bell-off-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-bell-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-bell-symbolic.svg
new file mode 100644
index 0000000..0f6b924
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-bell-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/assets/icons/hicolor/scalable/devices/fa-broom-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-broom-symbolic.svg
new file mode 100644
index 0000000..8cf3af6
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-broom-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/style/_control-center.scss b/style/_control-center.scss
index 756cc10..cdde102 100644
--- a/style/_control-center.scss
+++ b/style/_control-center.scss
@@ -61,6 +61,27 @@ window.control-center {
}
}
+ .notification-list {
+ .focus {
+ background: $accent;
+ }
+
+ button {
+ background-color: $inactive-color;
+ border-radius: calc($rounded / 1.5);
+ padding: 10px;
+ transition: color 100ms;
+
+ &:hover {
+ background-color: rgba($accent, 1);
+ }
+
+ image {
+ -gtk-icon-size: 1.2rem;
+ }
+ }
+ }
+
.footer {
label {
color: $accent;
diff --git a/widgets/control-center/notification-list.tsx b/widgets/control-center/notification-list.tsx
index bc0f671..2ab9524 100644
--- a/widgets/control-center/notification-list.tsx
+++ b/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 (
-
-
+
+
+
+
+
+
+
+
+
);
diff --git a/widgets/notifications/index.tsx b/widgets/notifications/index.tsx
index de0c088..dfe8fd5 100644
--- a/widgets/notifications/index.tsx
+++ b/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 (
onCleanup(() => self.destroy())}
name={WINDOW_NAME}
cssClasses={["notifications"]}
gdkmonitor={gdkmonitor}
- visible={notifications((ns) => ns.length > 0)}
+ visible={shouldShowWindow}
anchor={TOP | RIGHT}
>