fix(hyprland): switch workspaces module and add active workspace styling

.config/waybar/config.jsonc

@@ -2,7 +2,7 @@
 {
     "spacing": 2, // Gaps between modules (4px)
     "modules-left": [
-        "sway/workspaces",
+        "hyprland/workspaces",
         "sway/mode",
         "sway/scratchpad",
         "sway/window"

.config/waybar/style.css

@@ -49,7 +49,7 @@ button:hover {
 
 #workspaces button {
     padding: 0 4px;
-    /*background-color: transparent;*/
+    background-color: transparent;
     color: #ffffff;
 }
 
@@ -57,15 +57,25 @@ button:hover {
     background: rgba(0, 0, 0, 0.2);
 }
 
-#workspaces button.focused {
-    background-color: #64727D;
-    /*box-shadow: inset 0 -3px #ffffff;*/
+#workspaces button.active {
+    background-color: #eb4d4b;
+    box-shadow: inset 0 -3px #ffffff;
+    color: #ffffff;
+    font-weight: bold;
 }
 
 #workspaces button.urgent {
     background-color: #eb4d4b;
 }
 
+#workspaces button.visible {
+    background-color: #64727D;
+}
+
+#workspaces button.empty {
+    background-color: transparent;
+}
+
 #mode {
     background-color: #64727D;
     box-shadow: inset 0 -3px #ffffff;
@@ -93,17 +103,17 @@ button:hover {
 }
 
 #window,
-#workspaces {
+#workspaces-hyprland {
     margin: 0 4px;
 }
 
 /* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
+.modules-left > widget:first-child > #workspaces-hyprland {
     margin-left: 0;
 }
 
 /* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
+.modules-right > widget:last-child > #workspaces-hyprland {
     margin-right: 0;
 }