configured notification to waybar

Signed-off-by: thomas <thomas.williams29899@gmail.com>

dotfiles/.config/waybar/config

@@ -1,5 +1,5 @@
 {
-    "modules-left": ["battery", "clock#date", "clock","custom/updater", "custom/launcher"],
+    "modules-left": ["custom/notification", "battery", "clock#date", "clock","custom/updater", "custom/launcher"],
     "modules-center": ["hyprland/workspaces"],
     "modules-right": ["network", "bluetooth", "pulseaudio", "custom/power"],
 
@@ -144,5 +144,25 @@
         "on-click": "$HOME/.config/waybar/scripts/update-distro.sh",
         "tooltip": true,
         "tooltip-format": "Left Click: Update System\nArch (w/ notification)\nFedora, OpenSuse, Debian/Ubuntu click to update"
+    },
+    "custom/notification": {
+        "tooltip": true,
+        "format": "<span>{0} {icon} </span>",
+        "format-icons": {
+          "notification": "󱅫",
+          "none": "󰂜",
+          "dnd-notification": "󰂠",
+          "dnd-none": "󰪓",
+          "inhibited-notification": "󰂛",
+          "inhibited-none": "󰪑",
+          "dnd-inhibited-notification": "󰂛",
+          "dnd-inhibited-none": "󰪑"
+        },
+        "return-type": "json",
+        "exec-if": "which swaync-client",
+        "exec": "swaync-client -swb",
+        "on-click": "swaync-client -R -t -sw",
+        "on-click-right": "swaync-client -d -sw",
+        "escape": true
       }
 }

dotfiles/.config/waybar/style.css

@@ -1,6 +1,10 @@
 * {
     border: none;
-    font-family: Font Awesome, Roboto, Arial, sans-serif;
+    font-family:
+        Font Awesome,
+        Roboto,
+        Arial,
+        sans-serif;
     font-size: 13px;
     color: #ffffff;
     border-radius: 20px;
@@ -14,6 +18,15 @@ window#waybar {
     margin: 2px 10px 0 0;
 }
 
+#custom-notification {
+    font-family: "NotoSansMono Nerd Font";
+    font-size: 13px;
+    background-color: rgba(0, 43, 51, 0.85);
+    border-radius: 20px;
+    padding: 5px 2px 5px 8px;
+    margin: 5px 3px;
+}
+
 #custom-updater {
     font-size: 13px;
     background-color: rgba(0, 43, 51, 0.85);
@@ -70,7 +83,7 @@ window#waybar {
 #custom-media,
 #custom-launcher {
     font-size: 16px;
-    background-image: url('./bitwarden.svg');
+    background-image: url("./bitwarden.svg");
     background-position: center;
     background-color: rgba(0, 43, 51, 0.85);
     background-repeat: no-repeat;