Update

waybar/.config/waybar/config

@@ -1,33 +1,17 @@
-// -*- mode: json -*-
-
 {
 	"layer": "top",
 	"position": "top",
   "font": "Fira Code Bold 12",
   "margin": 5,
 
+// ------ Left Module ------ //
 	"modules-left": [
 		"hyprland/workspaces",
-    "hyprland/window",
     "niri/workspaces",
+    "wlr/taskbar",
+    "hyprland/window",
     "niri/window"
 	],
-	"modules-center": [
-		"clock#1",
-		"clock#2",
-		"clock#3",
-	],
-	"modules-right": [
-		"tray",
-    "mpd",
-		"pulseaudio",
-    "backlight",
-    "memory",
-		"cpu",
-    "network",
-		"battery",
-		"keyboard-state"
-	],
 
 	"hyprland/workspaces": {
       "on-scroll-up": "hyprctl dispatch workspace m-1",
@@ -42,20 +26,35 @@
   },
 
   "niri/workspaces": {
-	  "format": "{output} {index}",
+	  "format": "{value}",
 	  "format-icons": {
 	  }
   },
 
   "niri/window": {
 	  "format": "{}",
-    "icon": true,
+    "icon": false,
     "separate-outputs": true,
-    "all-outputs": true,
     "offscreen-css": true
   },
+  
+  "wlr/taskbar": {
+        "format": "{icon}",
+        "tooltip-format": "{title}",
+        "on-click": "activate",
+        // "on-click-middle": "close",
+        // "on-click-right": "fullscreen"
+    },
 
-	"clock#1": {
+
+// ------ Center Module ------ //
+	"modules-center": [
+		"clock#1",
+		"clock#2",
+		"clock#3",
+	],
+  
+  "clock#1": {
 		"format": "{:%A}",
 		"tooltip": false
 	},
@@ -67,6 +66,20 @@
 		"format": "{:%d/%m/%Y}",
 		"tooltip": true
 	},
+
+
+// ------ Right Module ------- //
+  "modules-right": [
+		"tray",
+		"pulseaudio",
+    "backlight",
+    "memory",
+		"cpu",
+    "network",
+		"battery",
+		"keyboard-state"
+	],
+	
   "keyboard-state": {
     "numlock": true,
     "capslock": false,
@@ -140,29 +153,4 @@
     "tooltip-format-ethernet": "{ifname}  ",
     "tooltip-format-disconnected": "Disconnected",
   },
-  "mpd": {
-    "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ",
-    "format-disconnected": "Disconnected ",
-    "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
-    "interval": 10,
-    "consume-icons": {
-        "on": " " // Icon shows only when "consume" is on
-    },
-    "random-icons": {
-        "off": "<span color=\"#f53c3c\"></span> ", // Icon grayed out when "random" is off
-        "on": " "
-    },
-    "repeat-icons": {
-        "on": " "
-    },
-    "single-icons": {
-        "on": "1 "
-    },
-    "state-icons": {
-        "paused": "",
-        "playing": ""
-    },
-    "tooltip-format": "MPD (connected)",
-    "tooltip-format-disconnected": "MPD (disconnected)"
-  }
-}
+ }

waybar/.config/waybar/style.css

@@ -2,7 +2,7 @@
 	font-size: 12px;
 	font-family: "Fira Code", monospace;
   font-weight: bold;
-  border-radius: 8px;
+  border-radius: 10px;
 }
  
 .modules-center {
@@ -37,23 +37,26 @@ window#waybar.empty #window {
   background: transparent;
 }
 
-#workspaces {
-  background: rgba(12, 12, 12, 0.5);
+#workspaces, #taskbar {
+  background: rgba(18, 26, 23, 0.56);
 }
 
-#workspaces button {
-	padding: 0 4px;
-	color: #fdf6e3;
+#workspaces button, #taskbar button {
+	padding: 1px 4px;
+	color: #fafafa;
   border: 2px solid transparent;
 }
 
 /* button.active for hyprland, button.focused for sway */
-#workspaces button.active {
-	color: white;
-  border: 2px solid rgba(40, 170, 120, 0.9);
+#workspaces button.active, #taskbar button.active {
+	color: #ffffff;
+  border: 2px solid rgba(40, 170, 120, 1);
 }
 
-#workspaces button:hover {
+#workspaces button:hover, #taskbar button:hover {
+  color: black;
+  background-color: rgba(126,255,180,0.4);
+  border: 2px solid rgba(80, 230, 180, 1);
 	box-shadow: inherit;
 	text-shadow: inherit;
 }