feat: a seperate bar section for cpu, ram and swap

waybar/config.jsonc

@@ -5,20 +5,21 @@
     // "position": "bottom", // Waybar position (top|bottom|left|right)
     "height": 30, // Waybar height (to be removed for auto height)
     // "width": 1280, // Waybar width
-    "spacing": 4, // Gaps between modules (4px)
+    "spacing": 0, // Gaps between modules (4px)
     // Choose the order of the modules
     "modules-left": [
-        "hyprland/workspaces"
+        "hyprland/workspaces",
+        "cpu",
+        "memory",
+        "memory#swap"
     ],
     "modules-center": [
         "mpd"
     ],
     "modules-right": [
         "pulseaudio",
-        "network",
-        "cpu",
-        "memory",
         "battery",
+        "network",
         "tray",
         "clock"
     ],
@@ -141,13 +142,26 @@
         }
     },
     "cpu": {
-        "format": "{usage} 󰒔",
+        "format": "󰓅 {load:2.0f}%",
         "tooltip": false,
-        "interval": 3
+        "interval": 3,
+        "format-icons": [
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ]
     },
     "memory": {
-        "format": "{} 󰐤",
+        "format": "󰧑 {percentage}%",
-        "interval": 3
+        "interval": 3,
+        "format-icons": [
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ]
+    },
+    "memory#swap": {
+        "format": "󰋊 {swapPercentage}%",
+        "interval": 3,
+        "format-icons": [
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ]
     },
     "temperature": {
         // "thermal-zone": 2,
@@ -168,14 +182,15 @@
             "warning": 30,
             "critical": 18
         },
-        "format": "{capacity} {icon}",
+        "format": "{capacity}% {icon}",
-        "format-full": "{capacity} {icon}",
+        "format-full": "{capacity}% {icon}",
-        "format-charging": "{capacity} ",
+        "format-charging": "{capacity}% {icon}󱐋",
-        "format-plugged": "{capacity} ",
+        "format-plugged": "{capacity}% {icon}",
         "format-alt": "{time} {icon}",
         // "format-good": "", // An empty format will hide the module
-        "format-full": "",
+        "format-full": "󰋑",
-        "format-icons": ["", "", "", "", ""]
+        "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""],
+        "tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}"
     },
     "battery#bat2": {
         "bat": "BAT2"
@@ -193,30 +208,27 @@
     },
     "network": {
         // "interface": "wlp2*", // (Optional) To force the use of this interface
-        "format-wifi": "{signalStrength} 直",
+        "format-wifi": "{icon}",
         "format-ethernet": "{ipaddr}/{cidr} ",
         "tooltip-format": "{essid} {ifname} via {gwaddr} ",
         "format-linked": "{ifname} (No IP) ",
-        "format-disconnected": "睊",
+        "format-disconnected": "󰤫",
+        "format-icons": [
+          "󰤯", "󰤟", "󰤢", "󰤥", "󰤨"
+        ],
         "on-click": "hyprctl dispatch exec, [float; move center] kitty -e nmtui"
     },
     "pulseaudio": {
         // "scroll-step": 1, // %, can be a float
-        "format": "{format_source}{volume} {icon}",
+        "format": "{format_source} {volume}%",
-        "format-bluetooth": "{format_source}{volume} 󰂰",
+        "format-bluetooth": "{format_source}󰂰 {volume}%",
         "format-bluetooth-muted": "{format_source} 󰂲",
-        "format-muted": "{format_source} 󰖁",
+        "format-muted": "󰖁",
         "format-source": "",
         "format-source-muted": "   ",
-        "format-icons": {
+        "format-icons": [
-            "headphone": "",
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
-            //"hands-free": "",
+        ],
-            //"headset": "",
-            "phone": "",
-            "portable": "",
-            "car": "",
-            "default": ["", "", ""]
-        },
         "on-click": "pwvucontrol"
     },
     "custom/media": {

waybar/style.css

@@ -5,7 +5,7 @@
 @define-color text-primary #ffffff;
 @define-color text-secondary #888888;
 @define-color accent-color #E96375;
-@define-color accent-alt #f97385;
+@define-color accent-alt #faa7b3;
 @define-color warning #FFAA00;
 @define-color danger #FF0000;
 @define-color success #AAFFAA;
@@ -36,7 +36,7 @@ window#waybar.chromium {
 }
 
 /* Common module styling */
-.modules-left, .modules-right, #mpd.playing, #mpd.paused {
+.modules-right, #mpd.playing, #mpd.paused {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
     border: 3px solid @border-color;
     border-top: none;
@@ -67,6 +67,16 @@ window#waybar.chromium {
 }
 
 /* Workspaces */
+#workspaces {
+    background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+    border: 3px solid @border-color;
+    border-top: none;
+    border-left: none;
+    border-radius: 0 0 10px 0;
+    margin-right: 10px;
+    padding-right: 5px;
+}
+
 #workspaces button {
     padding: 0 5px;
     background-color: transparent;
@@ -92,6 +102,33 @@ window#waybar.chromium {
     animation: blink-attention 2s infinite;
 }
 
+#cpu, #memory, #memory.swap {
+  background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
+  margin: 0;
+}
+
+#cpu {
+  margin-left: 20px;
+  border: 3px solid @border-color;
+  border-top: none;
+  border-right: none;
+  border-radius: 0 0 0 10px;
+}
+
+#memory {
+  border: 3px solid @border-color;
+  border-left: none;
+  border-top: none;
+  border-right: none;
+}
+
+#memory.swap {
+  border: 3px solid @border-color;
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 10px 0;
+}
+
 /* Module base styling */
 #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight,
 #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
@@ -102,7 +139,7 @@ window#waybar.chromium {
 }
 
 /* Hover effects */
-#clock:hover, #battery:hover, #cpu:hover, #memory:hover, #disk:hover,
+#clock:hover, #battery:hover, #disk:hover,
 #temperature:hover, #backlight:hover, #network:hover, #pulseaudio:hover,
 #wireplumber:hover, #custom-media:hover, #mode:hover, #idle_inhibitor:hover,
 #scratchpad:hover, #power-profiles-daemon:hover {