waybar: add network widget, margins, border and rounded corners

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

config/waybar/config

@@ -2,6 +2,8 @@
   "layer": "top",
   "position": "top",
   "height": 24,
+  "margin-left": 250,
+  "margin-right": 250,
   "modules-left": ["custom/nurgle", "sway/workspaces"],
 
   "custom/nurgle": {
@@ -9,7 +11,7 @@
     "tooltip": false
   },
   "modules-center": ["clock"],
-  "modules-right": ["cpu", "battery"],
+  "modules-right": ["custom/network", "cpu", "battery"],
 
   "sway/workspaces": {
     "disable-scroll": true
@@ -20,6 +22,12 @@
     "interval": 60
   },
 
+  "custom/network": {
+    "exec": "~/.local/bin/waybar-network.sh",
+    "interval": 2,
+    "format": "{}"
+  },
+
   "cpu": {
     "format": "CPU {usage}%",
     "interval": 2

config/waybar/network.sh

@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+CACHE="/tmp/waybar-net"
+iface=$(ip route get 8.8.8.8 2>/dev/null | awk '{for(i=1;i<=NF;i++) if($i=="dev") print $(i+1)}' | head -1)
+
+if [ -z "$iface" ]; then
+  echo "↑0B ↓0B"
+  exit 0
+fi
+
+rx=$(cat /sys/class/net/$iface/statistics/rx_bytes 2>/dev/null || echo 0)
+tx=$(cat /sys/class/net/$iface/statistics/tx_bytes 2>/dev/null || echo 0)
+now=$(date +%s%3N)
+
+if [ -f "$CACHE" ]; then
+  read -r prev_rx prev_tx prev_time < "$CACHE"
+  dt=$(( now - prev_time ))
+  [ "$dt" -le 0 ] && dt=1000
+  up=$(( (tx - prev_tx) * 1000 / dt ))
+  down=$(( (rx - prev_rx) * 1000 / dt ))
+else
+  up=0; down=0
+fi
+
+echo "$rx $tx $now" > "$CACHE"
+
+fmt() {
+  local b=$1
+  if   [ "$b" -ge 1073741824 ]; then printf "%4s" "$(( b / 1073741824 ))G"
+  elif [ "$b" -ge 1048576 ];    then printf "%4s" "$(( b / 1048576 ))M"
+  elif [ "$b" -ge 1024 ];       then printf "%4s" "$(( b / 1024 ))K"
+  else printf "%4s" "${b}B"
+  fi
+}
+
+echo "↑$(fmt "$up")/s ↓$(fmt "$down")/s"

config/waybar/style.css

@@ -1,6 +1,6 @@
 * {
   font-family: JetBrainsMono Nerd Font;
-  font-size: 13px;
+  font-size: 18px;
   border: none;
   border-radius: 0;
   min-height: 0;
@@ -9,6 +9,8 @@
 window#waybar {
   background: #0a0a0a;
   color: #f3eeea;
+  border: 1px solid #560500;
+  border-radius: 8px;
 }
 
 #custom-nurgle {
@@ -39,6 +41,11 @@ window#waybar {
   color: #f3eeea;
 }
 
+#custom-network {
+  color: #f3eeea;
+  padding: 0 8px;
+}
+
 #cpu {
   color: #f3eeea;
   padding: 0 8px;