✨ feat(waybar): add gnome-like workspace indicator :starstruck:

waybar/config.jsonc

@@ -1,5 +1,6 @@
 {
     "position": "top",
+    "layer": "top",
     "spacing": 4, 
     "margin": 5,
     "reload_style_on_change": true,
@@ -14,8 +15,9 @@
     ],
     "modules-right": [
         "tray", 
-        "pulseaudio",
-        "bluetooth",
+        "pulseaudio", 
+        "bluetooth", 
+        "network",
 	    "custom/notifications"
     ],
 
@@ -23,10 +25,10 @@
         "all-outputs": true,
         "format": "{icon}",
         "format-icons": {
-            "urgent": "",
-            "focused": "",
-            "active": "",
-            "default": ""
+            "urgent": "",
+            "focused": "",
+            "active": "",
+            "default": ""
         },
         "persistent-workspaces": {
             "1": [],
@@ -58,6 +60,7 @@
         "format": "{class}",
         "show-empty": false,
         "icon": true,
+        "separate-outputs": true,
         "rewrite": {
             "zen-alpha": "Zen Browser",
             "firefox": "Firefox",
@@ -75,7 +78,7 @@
         "format": "", // Change to desired logo
         "tooltip": false,
         "escape": true,
-        "on-click": "wofi -s drun" // Change to desired action
+        "on-click": "anyrun" // Change to desired action
     },
     "custom/notifications": {
     	"tooltip": false,
@@ -114,10 +117,9 @@
         "spacing": 12
     },
     "clock": {
-        "timezone": "",
-        "tooltip-format": "<big>{:%Y %B}</big>\n<tt>{calendar}</tt>",
-    	"format": "{:L%a. %d, %H:%M}",
-        "format-alt": "{:%Y-%m-%d}"
+        "format": "{:L%A %d, %H:%M}",
+        "format-alt": "{:%Y-%m-%d}",
+        "tooltip-format": "<big>{:%Y %B}</big>\n<tt>{calendar}</tt>"
     },
     "cpu": {
         "format": " {usage}%",
@@ -130,8 +132,8 @@
     "temperature": {
         // "thermal-zone": 2,
         // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
-        "critical-threshold": 80,
         // "format-critical": "{temperatureC}°C {icon}",
+        "critical-threshold": 80,
         "format": "{icon} {temperatureC}°C",
         "format-icons": ["", "", ""]
     },
@@ -167,12 +169,15 @@
     },
     "network": {
         // "interface": "wlp2*", // (Optional) To force the use of this interface
-        "format-wifi": "{essid} ({signalStrength}%) ",
-        "format-ethernet": "{ipaddr}/{cidr} ",
-        "tooltip-format": "{ifname} via {gwaddr} ",
+        "format-wifi": "{icon}",
+        "format-ethernet": "",
+        "tooltip-format": "<tt>{ifname}\t{ipaddr}\n {bandwidthUpBits}\n {bandwidthDownBits}</tt>",
+        "tooltip-format-disconnected": "<tt>Disconnected</tt>",
+        "tooltip-format-wifi": "<tt>󰤨 {essid}\n {bandwidthUpBits}\n {bandwidthDownBits}</tt>",
         "format-linked": "{ifname} (No IP) ",
-        "format-disconnected": "Disconnected ⚠",
-        "format-alt": "{ifname}: {ipaddr}/{cidr}"
+        "format-disconnected": "󰤭",
+        "format-alt": "{ipaddr}/{cidr}",
+        "format-icons": [ "󰤯", "󰤟", "󰤢", "󰤥", "󰤨" ]
     },
     "pulseaudio": {
         "format": "{volume}% {icon} {format_source}",

waybar/style.css

@@ -1,6 +1,9 @@
 
 @import "../../.cache/wal/colors-waybar.css";
 
+@define-color default-workspace @color1;
+@define-color active-workspace @color2;
+
 * {
     color: @foreground;
     border-radius: 14px;
@@ -45,42 +48,30 @@ button:hover {
     background: @color1;
 }
 
+/* Workspaces */
 #workspaces {
     border-radius: 16px;
-    padding-left: 2px;
-    padding-right: 2px;
+    padding: 4px;
 }
 
 #workspaces button {
-    background: transparent;
-    font-size: 19px;
-    border-radius: 16px;
-}
-
-#workspaces button label {
-    color: @foreground;
-    margin-top: .2px;
-    margin-left: .1px;
-}
-
-#workspaces button:hover {
-    background: @hover;
+    background: @color1;
+    border-radius: 24px;
+    padding: 0 4px;
+    margin: 0 2px;
 }
 
 #workspaces button.active {
-    background: @active;
+    background: @foreground;
+    padding-left: 14px;
+    padding-right: 14px;
 }
 
 #workspaces button.urgent {
-    background-color: @color1;
-}
-
-@keyframes blink {
-    to {
-        background-color: alpha(@crust, .3);
-        color: @orange;
-    }
+    animation: pick-attention;
+    animation-duration: .5s;
 }
+/***/
 
 #custom-logo {
     padding-left: 12px;
@@ -98,24 +89,27 @@ button:hover {
 
 #battery.charging, #battery.plugged {
     color: @text;
-    background-color: alpha(@base, .3);
+    background-color: @background;
 }
 
 #battery:not(.plugged):not(.charging) {
-    background-color: alpha(@blue, .35);
+    background-color: shade(@color1, .68);
 }
 
-/* Using steps() instead of linear as a timing function to limit cpu usage */
 #battery.critical:not(.charging) {
     background-color: @color1;
     color: @foreground;
     animation-name: blink;
-    animation-duration: 0.5s;
+    animation-duration: .5s;
     animation-timing-function: steps(12);
     animation-iteration-count: infinite;
     animation-direction: alternate;
 }
 
+#network.disconnected {
+    padding-right: 15px;
+}
+
 #bluetooth {
      font-size: 14px;
 }
@@ -145,5 +139,29 @@ button:hover {
 
 #tray > .needs-attention {
     -gtk-icon-effect: highlight;
-    background: @color1;
+}
+
+@keyframes blink {
+    to {
+        background-color: alpha(@crust, .3);
+        color: @orange;
+    }
+}
+
+@keyframes pick-attention { 
+    25% {
+        background: @color3;
+    }
+
+    50% {
+        background: @color2;
+    }
+
+    75% {
+        background: @color3;
+    }
+
+    100% {
+        background: @color2;
+    }
 }