Integrate swaync for notifications

home/dot_config/waybar/config.jsonc

@@ -20,6 +20,7 @@
     ],
     "modules-right": [
         "clock",
+        "custom/dnd",
         "privacy",
         "idle_inhibitor",
         "pulseaudio",
@@ -192,6 +193,25 @@
         "on-click": "pavucontrol",
         "on-click-middle": "blueman-manager"
     },
+    "custom/dnd": {
+        "format": "{icon} {text}",
+        "format-icons": {
+            "notification": "<span foreground='red'><sup></sup></span>",
+            "none": "",
+            "dnd-notification": "<span foreground='red'><sup></sup></span>",
+            "dnd-none": "",
+            "inhibited-notification": "<span foreground='red'><sup></sup></span>",
+            "inhibited-none": "",
+            "dnd-inhibited-notification": "<span foreground='red'><sup></sup></span>",
+            "dnd-inhibited-none": ""
+        },
+        "return-type": "json",
+        "exec-if": "which swaync-client",
+        "exec": "swaync-client -swb",
+        "on-click": "swaync-client -t -sw",
+        "on-click-right": "swaync-client -d -sw",
+        "escape": true
+    },
     "custom/media": {
         "format": "{icon} {text}",
         "return-type": "json",

home/dot_config/waybar/style.css

@@ -105,7 +105,8 @@ button:hover {
 #idle_inhibitor,
 #scratchpad,
 #custom-power,
-#language
+#language,
+#custom-dnd
 {
     padding: 0 10px;
     background-color: @base03;
@@ -180,6 +181,10 @@ label:focus {
     border-bottom: 3px solid @cyan;
 }
 
+#custom-dnd {
+    border-bottom: 3px solid @cyan;
+}
+
 #memory {
     border-bottom: 3px solid @magenta;
 }