feat(waybar): add tailscale indicator

scottames · Dec 29, 2024 · e93df78 · e93df78
1 parent 5fe07fe
commit e93df78
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/home/private_dot_config/waybar/config.jsonc b/home/private_dot_config/waybar/config.jsonc
@@ -17,9 +17,10 @@
     "temperature",
     "power-profiles-daemon",
     "disk",
-    "battery",
     "backlight",
     "network",
+    "custom/tailscale",
+    "battery",
     "pulseaudio",
     "custom/lock",
     "custom/power"
@@ -124,6 +125,20 @@
       "󰁹"
     ]
   },
+  "custom/tailscale": {
+    "exec": "~/.config/waybar/scripts/tailscale.sh",
+    "interval": 10,
+    "format": "{}",
+    "tooltip": true,
+    "return-type": "json"
+  },
+  "network#tailscale": {
+    "interface": "tailscale0",
+    "format": "󰌆",
+    "format-disconnected": "󰌊",
+    "tooltip-format": "{ifname}: {bandwidthUpBits} {bandwidthDownBits}",
+    "tooltip-format-disconnected": "disconnected",
+  },
   "network": {
     "format-wifi": " ",
     "format-ethernet": "",

diff --git a/home/private_dot_config/waybar/scripts/executable_tailscale.sh b/home/private_dot_config/waybar/scripts/executable_tailscale.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+if tailscale status &>/dev/null; then
+  if tailscale exit-node list | grep -q selected; then
+    tooltip=$(tailscale exit-node list | grep selected | awk '{print $2" "$3}')
+    echo "{\"text\": \" \", \"class\": \"enabled\", \"tooltip\": \"${tooltip}\"}"
+  else
+    tooltip="No exit-node assigned"
+    echo "{\"text\": \" \", \"class\": \"disabled\", \"tooltip\": \"${tooltip}\"}"
+  fi
+else
+  tooltip="Tailscale is not connected"
+  echo "{\"text\": \" \", \"class\": \"disabled\", \"tooltip\": \"${tooltip}\"}"
+fi
diff --git a/home/private_dot_config/waybar/style.css b/home/private_dot_config/waybar/style.css
@@ -57,6 +57,7 @@ tooltip {
 #custom-caffeine,
 #custom-lock,
 #custom-power,
+#custom-tailscale,
 #disk,
 #battery,
 #cpu,
@@ -98,7 +99,8 @@ tooltip {
 #battery {
   color: @green;
   border-left: 0px;
-  border-right: 0px;
+  border-radius: 0 10px 10px 0;
+  margin-right: 10px;
 }
 
 #clock {
@@ -156,8 +158,17 @@ tooltip {
 #network {
   color: @text;
   border-left: 0px;
-  border-radius: 0 10px 10px 0;
-  margin-right: 10px;
+  border-right: 0px;
+}
+
+#custom-tailscale {
+  color: @text;
+  border-left: 0px;
+  border-right: 0px;
+  color: @red;
+}
+#custom-tailscale.enabled {
+  color: @green;
 }
 
 #custom-power {