From c6d0c389b63881c911dc490a84435f5b8aff07b9 Mon Sep 17 00:00:00 2001
From: Uzair Mohammed <uzair.hamed@gmail.com>
Date: Sat, 28 Dec 2024 21:23:28 -0800
Subject: [PATCH] 1: Attempting more Waybar config

---
 home/modules/hyprland/waybar.nix | 215 ++++++++++++++++++++++++-------
 1 file changed, 165 insertions(+), 50 deletions(-)

diff --git a/home/modules/hyprland/waybar.nix b/home/modules/hyprland/waybar.nix
index f68bb11..585efd2 100644
--- a/home/modules/hyprland/waybar.nix
+++ b/home/modules/hyprland/waybar.nix
@@ -23,71 +23,186 @@
           separate-outputs = true;
         };
 
-	"custom/power" = {
-	  tooltip = false;
-	  on-click = "wlogout &";
-	  format = "";
+	# ----------------------------------------------
+
+	"tray" = {
+	  icon-size = 21;
+	  spacing = 10;
 	};
+
+	# ----------------------------------------------
+
+	"pulseaudio" = {
+	  format = "{icon} {volume}%";
+	  format-muted = " {volume}%";
+	  format-icons = {
+	    default = [ "" "" "" ];
+	  };
+	};
+
+	"backlight" = {
+	  format = "󰃠 {percent}%";
+	};
+
+	"battery" = {
+	  states = {
+	    warning = 30;
+	    critical = 15;
+	  };
+	  
+	  format = " {capacity}%";
+	  format-charging = " {capacity}%";
+	};
+
+	"clock" = {
+	  timezone = "America/Los_Angeles";
+	  tooltip-format = "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>";
+	  format-alt = "󰃭 {:%d/%m/%Y}";
+	  format = " {:%H:%M}";
+	};
+
+        "custom/power" = {
+          tooltip = false;
+          on-click = "wlogout &";
+          format = "";
+        };
       };
     };
 
     style = ''
-      @define-color base   #1e1e2e;
-      @define-color mantle #181825;
-      @define-color crust  #11111b;
+            @define-color base   #1e1e2e;
+            @define-color mantle #181825;
+            @define-color crust  #11111b;
 
-      @define-color text     #cdd6f4;
-      @define-color subtext0 #a6adc8;
-      @define-color subtext1 #bac2de;
+            @define-color text     #cdd6f4;
+            @define-color subtext0 #a6adc8;
+            @define-color subtext1 #bac2de;
 
-      @define-color surface0 #313244;
-      @define-color surface1 #45475a;
-      @define-color surface2 #585b70;
+            @define-color surface0 #313244;
+            @define-color surface1 #45475a;
+            @define-color surface2 #585b70;
 
-      @define-color overlay0 #6c7086;
-      @define-color overlay1 #7f849c;
-      @define-color overlay2 #9399b2;
+            @define-color overlay0 #6c7086;
+            @define-color overlay1 #7f849c;
+            @define-color overlay2 #9399b2;
 
-      @define-color blue      #89b4fa;
-      @define-color lavender  #b4befe;
-      @define-color sapphire  #74c7ec;
-      @define-color sky       #89dceb;
-      @define-color teal      #94e2d5;
-      @define-color green     #a6e3a1;
-      @define-color yellow    #f9e2af;
-      @define-color peach     #fab387;
-      @define-color maroon    #eba0ac;
-      @define-color red       #f38ba8;
-      @define-color mauve     #cba6f7;
-      @define-color pink      #f5c2e7;
-      @define-color flamingo  #f2cdcd;
-      @define-color rosewater #f5e0dc;
+            @define-color blue      #89b4fa;
+            @define-color lavender  #b4befe;
+            @define-color sapphire  #74c7ec;
+            @define-color sky       #89dceb;
+            @define-color teal      #94e2d5;
+            @define-color green     #a6e3a1;
+            @define-color yellow    #f9e2af;
+            @define-color peach     #fab387;
+            @define-color maroon    #eba0ac;
+            @define-color red       #f38ba8;
+            @define-color mauve     #cba6f7;
+            @define-color pink      #f5c2e7;
+            @define-color flamingo  #f2cdcd;
+            @define-color rosewater #f5e0dc;
 
-      * {
-         font-family: JetBrainsMono NF;
-	 font-size: 15px;
+            * {
+               font-family: JetBrainsMono NF;
+      	 font-size: 15px;
+            }
+
+            #custom-power {
+               background-color: @base;
+      	 color: @red;
+      	 padding: 0.5rem 1rem;
+      	 margin: 5px 0;
+      	 border-radius: 5px 20px 20px 5px;
+            }
+
+            #battery {
+               color: @green;
+            }
+
+            #battery.charging {
+               background-color: @green;
+      	 color: @base;
+            }
+
+            #battery.warning:not(.charging) {
+               background-color: @red;
+      	 color: @base;
+            }
+
+      #waybar {
+        background: transparent;
+        color: @text;
+        margin: 5px 5px;
+      }
+
+      #workspaces {
+        border-radius: 1rem;
+        margin: 5px;
+        background-color: @surface0;
+        margin-left: 1rem;
+      }
+
+      #workspaces button {
+        color: @lavender;
+        border-radius: 1rem;
+        padding: 0.4rem;
+      }
+
+      #workspaces button.active {
+        color: @sky;
+        border-radius: 1rem;
+      }
+
+      #workspaces button:hover {
+        color: @sapphire;
+        border-radius: 1rem;
+      }
+
+      #custom-music,
+      #tray,
+      #backlight,
+      #clock,
+      #battery,
+      #pulseaudio,
+      #custom-lock,
+      #clock {
+        color: @blue;
+        border-radius: 0px 1rem 1rem 0px;
+        margin-right: 1rem;
+      }
+
+      #backlight {
+        color: @yellow;
+      }
+
+      #backlight, #battery {
+          border-radius: 0;
+      }
+
+      #pulseaudio {
+        color: @maroon;
+        border-radius: 1rem 0px 0px 1rem;
+        margin-left: 1rem;
+      }
+
+      #custom-music {
+        color: @mauve;
+        border-radius: 1rem;
+      }
+
+      #custom-lock {
+          border-radius: 1rem 0px 0px 1rem;
+          color: @lavender;
       }
 
       #custom-power {
-         background-color: @base;
-	 color: @red;
-	 padding: 0.5rem 1rem;
-	 margin: 5px 0;
-	 border-radius: 5px 20px 20px 5px;
+          margin-right: 1rem;
+          border-radius: 0px 1rem 1rem 0px;
+          color: @red;
       }
 
-      #battery {
-         color: @green;
-      }
-
-      #battery.charging {
-         background-color: @green;
-	 color: @base;
-      }
-
-      #battery.warning:not(.charging) {
-         background-color: @red;
-	 color: @base;
+      #tray {
+        margin-right: 1rem;
+        border-radius: 1rem;
       }
     '';
   };