waybar: Add custom widget to list active VPN connections

waybar/config

@@ -4,7 +4,7 @@
     "height": 24,
     "modules-left": ["sway/workspaces", "sway/mode"],
     "modules-center": ["cpu", "memory", "tray"],
-    "modules-right": ["custom/timew", "clock#time", "clock#date"],
+    "modules-right": ["custom/vpn", "custom/timew", "clock#time", "clock#date"],
     "sway/mode": {
         "format": "<span style=\"italic\">{}</span>"
     },
@@ -22,8 +22,15 @@
         "interval": 60,
         "format": "{: %d.%m.%Y}"
     },
+    "custom/vpn": {
+        "format": " {}",
+        "max-length": 60,
+        "escape": true,
+        "interval": 60,
+        "exec": "nmcli -f name,type --terse connection show --active | grep vpn | cut -d : -f 1 | awk -v d=', ' '{s=(NR==1?s:s d)$0}END{print s}' -"
+    },
     "custom/timew": {
-        "format": "{}",
+        "format": " {}",
         "max-length": 40,
         "escape": true,
         "interval": 60,

waybar/style.css

@@ -40,6 +40,8 @@ window#waybar.hidden {
 #network,
 #pulseaudio,
 #custom-media,
+#custom-vpn,
+#custom-timew,
 #tray,
 #mode,
 #idle_inhibitor,