fixed battery display

waybar/config.jsonc

@@ -5,7 +5,7 @@
     "height": 35,
     "modules-left": ["hyprland/workspaces", "hyprland/window"],
     "modules-center": [],
-    "modules-right": ["tray", "wireplumber", "network", "cpu", "memory", "custom/tlp", "battery", "clock", "custom/power"],
+    "modules-right": ["tray", "wireplumber", "network", "cpu", "memory", "custom/tlp", "clock", "custom/power"],
 
     "hyprland/workspaces": {
         "format": "{icon}",

waybar/scripts/tlp-profile.sh

@@ -1,24 +1,54 @@
 #!/bin/bash
 
-# Get the current power source from tlp-stat
+# --- Configuration ---
-power_source=$(tlp-stat -s | grep -i "power source" | awk '{print $4}')
+CRITICAL_THRESHOLD=15
+WARNING_THRESHOLD=50
+# ---------------------
 
-if [ "$power_source" == "AC" ]; then
+# Get the battery path from upower
-    # On AC power
+battery_path=$(upower -e | grep 'BAT')
-    icon=""
+
-    tooltip="TLP Profile: AC"
+# Handle case where no battery is found
-    class="ac"
+if [ -z "$battery_path" ]; then
-elif [ "$power_source" == "battery" ]; then
+    # Check if we are on AC power anyway
-    # On Battery power
+    if [[ $(tlp-stat -s | grep "Power source" | awk '{print $4}') == "AC" ]]; then
-    icon=""
+        printf '{"text": "", "tooltip": "AC Power (No Battery)", "class": "ac"}\n'
-    tooltip="TLP Profile: Battery"
+    else
-    class="bat"
+        printf '{"text": "", "tooltip": "Error: Battery not found", "class": "unknown"}\n'
-else
+    fi
-    # Fallback for unknown state
+    exit 0
-    icon=""
-    tooltip="TLP Profile: Unknown"
-    class="unknown"
 fi
 
-# Output in JSON format for Waybar
+# Get battery percentage and state
-printf '{"text": "%s", "tooltip": "%s", "class": "%s"}\n' "$icon" "$tooltip" "$class" 
+percentage=$(upower -i "$battery_path" | grep "percentage" | awk '{print $2}' | tr -d '%')
+state=$(upower -i "$battery_path" | grep "state" | awk '{print $2}')
+tlp_profile=$(tlp-stat -s | grep "Power source" | awk '{print $4}')
+
+# Set icon, class, and tooltip based on state and percentage
+if [ "$state" == "charging" ] || [ "$tlp_profile" == "AC" ]; then
+    icon=""
+    class="charging"
+    tooltip="TLP: AC | Charging at ${percentage}%"
+elif [ "$state" == "discharging" ]; then
+    tooltip="TLP: Battery | Discharging at ${percentage}%"
+    if [ "$percentage" -le "$CRITICAL_THRESHOLD" ]; then
+        icon="" # Very low
+        class="critical"
+    elif [ "$percentage" -le "$WARNING_THRESHOLD" ]; then
+        icon="" # Low
+        class="warning"
+    elif [ "$percentage" -le 85 ]; then
+        icon="" # Healthy
+        class="bat"
+    else
+        icon="" # Full
+        class="bat"
+    fi
+else # Fallback for "fully-charged", "pending-charge", etc.
+    icon=""
+    class="charging"
+    tooltip="TLP: AC | Fully Charged at ${percentage}%"
+fi
+
+# Output JSON for Waybar
+printf '{"text": "%s    %s%%", "tooltip": "%s", "class": "%s"}\n' "$icon" "$percentage" "$tooltip" "$class"

waybar/style.css

@@ -12,7 +12,7 @@
 
 window#waybar {
   background-color: alpha(@base, 0.6);
-  margin: 10px;
+  padding: 10px;
   transition-property: background-color;
   transition-duration: 0.5s;
   color: @text;
@@ -78,51 +78,46 @@ window#waybar.hidden {
 
 #custom-tlp {
     padding: 0 10px;
-	padding-right: 10px;
+	min-width: 10px;
-	margin-right: 0;
 }
 
-#custom-tlp.ac {
+#custom-tlp.charging {
-    color: @green; /* Catppuccin Green for AC power */
+    color: @teal; 
+  	border-bottom: 3px solid @teal;
 }
 
 #custom-tlp.bat {
-    color: @yellow; /* Catppuccin Yellow for Battery power */
+	color: @sapphire;
+  	border-bottom: 3px solid @sapphire;
 }
 
-#battery {
+#custom-tlp.warning {
-    color: @text;
-    padding: 0 10px;
-	padding-left: 0;
-	margin-left: 0;
-}
-
-#battery.charging, #battery.plugged {
-    color: @green;
-}
-
-#battery.warning {
     color: @yellow; 
+  	border-bottom: 3px solid @yellow;
 }
 
-#battery.critical {
+#custom-tlp.critical {
     color: @red; 
-    animation-name: blink;
+  	border-bottom: 3px solid @red;
-    animation-duration: 0.8s;
+	animation-name: blink;
-    animation-timing-function: linear;
+	animation-duration: 0.8s;
-    animation-iteration-count: infinite;
+	animation-timing-function: linear;
-    animation-direction: alternate;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
 }
 
 @keyframes blink {
-    to {
+  to {
-        color: @text;
+    color: @yellow;
-    }
+  	border-bottom: 3px solid @yellow;
+    opacity: 0.6;
+  }
 }
 
 #memory,
 #cpu {
   color: @maroon;
+  border-bottom: 3px solid @maroon;
 }
 
 
@@ -133,6 +128,7 @@ window#waybar.hidden {
 #wireplumber {
   color: @mauve;
   padding-right: 15px;
+  border-bottom: 3px solid @mauve;
 }
 
 #network {

waybar/style.css-without-borders

@@ -0,0 +1,157 @@
+
+/* ~/.config/waybar/style.css */
+@import "./catppuccin-waybar/themes/mocha.css";
+
+* {
+  border: none;
+  border-radius: 0;
+  min-height: 0;
+  font-family: JetBrainsMono Nerd Font;
+  font-size: 13px;
+}
+
+window#waybar {
+  background-color: alpha(@base, 0.6);
+  margin: 10px;
+  transition-property: background-color;
+  transition-duration: 0.5s;
+  color: @text;
+}
+
+window#waybar.hidden {
+  opacity: 0.5;
+}
+
+#workspaces {
+}
+
+#workspaces button {
+  all: initial;
+  /* Remove GTK theme values (waybar #1351) */
+  min-width: 0;
+  /* Fix weird spacing in materia (waybar #450) */
+  box-shadow: inset 0 -3px transparent;
+  /* Use box-shadow instead of border so the text isn't offset */
+  padding: 6px 18px;
+  margin: 6px 3px;
+  border-radius: 3px;
+  background-color: alpha(@base, 0.9);
+  color: @text;
+}
+
+#workspaces button.active {
+  border-bottom: 3px solid @green;
+}
+
+#workspaces button:hover {
+  box-shadow: inherit;
+  text-shadow: inherit;
+  background-color: @teal;
+  color: @base;
+}
+
+#workspaces button.urgent {
+  border-bottom: 3px solid @red;
+}
+
+#memory,
+#cpu,
+#custom-power,
+#custom-tlp,
+#battery,
+#backlight,
+#wireplumber,
+#network,
+#clock,
+#tray {
+  border-radius: 4px;
+  margin: 6px 3px;
+  padding: 6px 12px;
+  background-color: @base;
+  color: @text;
+}
+
+#custom-power {
+  color: @red;
+  padding: 6px 12px 6px 10px;
+}
+
+#custom-tlp {
+    padding: 0 10px;
+	padding-right: 10px;
+	margin-right: 0;
+}
+
+#custom-tlp.ac {
+    color: @green; /* Catppuccin Green for AC power */
+}
+
+#custom-tlp.bat {
+    color: @yellow; /* Catppuccin Yellow for Battery power */
+}
+
+#battery {
+    color: @text;
+    padding: 0 10px;
+	padding-left: 0;
+	margin-left: 0;
+}
+
+#battery.charging, #battery.plugged {
+    color: @green;
+}
+
+#battery.warning {
+    color: @yellow;
+}
+
+#battery.critical {
+    color: @red;
+    animation-name: blink;
+    animation-duration: 0.8s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@keyframes blink {
+    to {
+        color: @text;
+    }
+}
+
+#memory,
+#cpu {
+  color: @maroon;
+}
+
+
+#backlight {
+  color: @mauve;
+}
+
+#wireplumber {
+  color: @mauve;
+  padding-right: 15px;
+}
+
+#network {
+  color: @mauve;
+  padding-right: 15px;
+}
+
+#clock {
+  font-family: JetBrainsMono Nerd Font;
+  color: @mauve;
+}
+
+tooltip {
+  border-radius: 8px;
+  padding: 15px;
+  background-color: @base;
+}
+
+tooltip label {
+  padding: 5px;
+  background-color: @base;
+}