feat: rework waybar on desktop

users/youwen/linux/waybar/desktop/default.nix

@@ -1,91 +1,126 @@
 {
+  # home.file.".config/waybar/config".source = ./config.jsonc;
   programs.waybar = {
     enable = true;
+    style = ./style.css;
+    systemd.enable = true;
     settings = {
       mainBar = {
+        name = "bar0";
+
         layer = "top";
         position = "top";
-        height = 24;
+
-        width = 1600;
+        height = 16;
-        reload-style-on-change = true;
+        # "width" = 1920;
-        margin = "10px 0px 0px 0px";
+
-        modules-left = ["hyprland/window" "hyprland/workspaces"];
+        "margin" = "5px 10px 0px 10px";
-        modules-right = ["backlight" "group/adjustable" "custom/weather"];
+        "spacing" = 10;
-        modules-center = ["network" "group/hardware" "clock"];
+
-        "hyprland/workspaces" = {
+        "mode" = "top";
-          active-only = false;
+        # "exclusive" = true;
-          all-outputs = false;
+
+        # "output" = "eDP-1";
+
+        reload_style_on_change = true;
+
+        modules-left = ["hyprland/workspaces"];
+        modules-center = ["hyprland/window"];
+        modules-right = [
+          "tray"
+          "idle_inhibitor"
+          "backlight"
+          "wireplumber"
+          "battery"
+          "disk"
+          "memory"
+          "cpu"
+          "temperature"
+          "clock"
+        ];
+
+        idle_inhibitor = {
           format = "{icon}";
-          persistent-workspaces = {
+          format-icons = {
-            eDP-1 = [1];
+            activated = "󰛊 ";
-            DP-1 = [2 3 4 5];
+            deactivated = "󰾫 ";
           };
         };
-        "group/hardware" = {
+
-          orientation = "inherit";
+        backlight = {
-          modules = ["cpu" "memory" "battery"];
+          interval = 2;
+          format = "󰖨 {percent}%";
+          on-scroll-up = "brightnessctl set +4";
+          on-scroll-down = "brightnessctl set 4-";
         };
-        "group/adjustable" = {
+
-          orientation = "inherit";
+        wireplumber = {
-          drawer = {
+          format = "{icon} {volume}%";
-            transition-duration = 500;
+          format-muted = "󰝟 ";
-            transition-left-to-right = true;
+          on-click = "pamixer -t";
-          };
+          on-scroll-up = "pamixer set 5%+";
-          modules = ["pulseaudio" "mpris"];
+          on-scroll-down = "pamixer set 5%-";
+          format-icons = ["" "" "" "" ""];
         };
-        "custom/weather" = {
+
-          orientation = "horizontal";
+        battery = {
-          exec = ''curl wttr.in/?format="%l:%20%t"'';
           interval = 10;
+          format = "{icon}{capacity}%";
+          format-icons = ["󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹"];
+          tooltip = true;
+          tooltip-format = "{timeTo}";
         };
-        cpu = {
+
-          interval = 10;
+        disk = {
-          format = "{usage}%  ";
+          intervel = 30;
+          format = "󰋊 {percentage_used}%";
+          tooltip-format = "{used} used out of {total} on \"{path}\" ({percentage_used}%)";
         };
+
         memory = {
           interval = 10;
-          format = "{percentage}%  ";
+          format = " {used}";
+          tooltip-format = "{used}GiB used of {total}GiB ({percentage}%)";
         };
-        # mpris = {
+
-        #   format-playing = "    {title}  ";
+        cpu = {
-        #   format-paused = " 󰏤 {title}  ";
+          interval = 10;
-        #   format-stopped = "Nothing Playing";
+          format = " {usage}%";
-        # };
-        tray = {spacing = 10;};
-        clock = {format = "{:%a %b %d, %I:%M %p} ";};
-        backlight = {
-          device = "intel_backlight";
-          format = "{percent}% {icon}";
-          format-icons = ["󰃞" "󰃠"];
         };
-        battery = {
+
-          states = {
+        temperature = {
-            good = 95;
+          interval = 10;
-            warning = 20;
+        };
-            critical = 10;
+
+        clock = {
+          interval = 1;
+          format = "{:%H:%M:%S}";
+        };
+
+        "hyprland/workspaces" = {
+          show-special = true;
+          persistent-workspaces = {
+            "*" = [1 2 3 4 5 6 7 8 9 10];
+          };
+          format = "{icon}";
+          format-icons = {
+            active = "";
+            empty = "";
+            default = "";
+            urgent = "";
+            special = "󰠱";
           };
-          format = "{capacity}% {icon}";
-          format-icons = ["󰁻" "󰁽" "󰁿" "󰂀" "󰁹"];
         };
-        "hyprland/window" = {format = "{class}";};
+        "hyprland/window" = {
-        network = {
+          icon = true;
-          format-wifi = "{essid} ";
+          icon-size = 20;
-          format-linked = "{ifname} (No IP) ";
+          max-length = 50;
-          format-disconnected = "Disconnected ⚠";
+          rewrite = {
-          format-alt = "{ifname}: {ipaddr}/{cidr}";
+            "(.*) — LibreWolf" = "$1";
-        };
+            "^$" = "👾";
-        pulseaudio = {
+          };
-          format = "{volume}% {icon}  {format_source}";
-          format-bluetooth = "{volume}% {icon}  {format_source}";
-          format-bluetooth-muted = " {icon} {format_source}";
-          format-muted = " {format_source}";
-          format-source = "{volume}% ";
-          format-source-muted = "";
-          format-icons = {default = ["" "" ""];};
         };
       };
     };
-    style = ./waybar.css;
-    systemd.enable = true;
   };
 }

users/youwen/linux/waybar/desktop/style.css

@@ -0,0 +1,67 @@
+window#waybar {
+    font-family: "CaskaydiaCove Nerd Font";
+    background-color: rgba(0,0,0,0);
+    font-size: 0.8rem;
+    border-radius: 0.5rem;
+}
+
+.modules-left, .modules-center {
+    opacity: 1;
+    background: linear-gradient(45deg, rgb(214, 39, 200), rgb(5, 83, 252));
+    border-radius: 0.5rem;
+    padding: 2px;
+}
+
+.modules-right {
+    opacity: 1;
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 0.5rem;
+    padding: 2px 2px 2px 10px
+}
+
+/* label.module {
+    margin-left: -1px;
+} */
+
+#workspaces {
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 0.5rem;
+    padding: 0 2px;
+}
+
+#workspaces button {
+    font-size: 0.6rem;
+    padding: 0 0.3rem 0 0;
+}
+
+#window {
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 0.5rem;
+    padding: 2px 5px;
+}
+
+#clock {
+    font-weight: bolder;
+    border-radius: 0.5rem;
+    padding: 0 3px 0 0;
+}
+
+#battery {
+    color: lightgreen;
+}
+
+#memory {
+    color: lightpink;
+}
+
+#disk {
+    color: lightskyblue;
+}
+
+#cpu {
+    color: lightgoldenrodyellow;
+}
+
+#temperature {
+    color: lightslategray;
+}

users/youwen/linux/waybar/desktop/waybar.css

@@ -1,102 +0,0 @@
-* {
-  font-size: 10px;
-  font-family: CaskaydiaCove Nerd Font;
-}
-
-window#waybar {
-  border-bottom: 0px solid #ffffff;
-  background: transparent;
-  transition-property: none;
-  transition-duration: 0s;
-}
-
-#workspaces {
-  background: #24273a;
-  padding: 0px 2px 0px 2px;
-  margin: 0px 0px 0px 5px;
-  border-radius: 5px;
-}
-
-#workspaces {
-  background: #24273a;
-  padding: 0px 5px 0px 5px;
-  margin: 0px 0px 0px 5px;
-  border-radius: 5px;
-}
-
-#workspaces button,
-#workspaces button:hover {
-  padding: 0;
-  background-color: #24273a;
-  /* color: @color4; */
-}
-#workspaces button.active,
-#workspaces button:hover {
-  /* color: @color8; */
-}
-
-#clock,
-#pulseaudio,
-#network,
-#battery,
-#tray,
-#mpris,
-#cpu,
-#memory,
-#temperature,
-#custom-weather,
-#window,
-#backlight {
-  background-color: #24273a;
-  /* color: @color4; */
-  opacity: 1;
-  border-radius: 5px;
-  padding: 1px 10px 1px 10px;
-  margin: 0px 5px 0px 0px;
-}
-#backlight {
-  margin-right: 0px;
-  padding-right: 3px;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-#mpris {
-  padding-left: 0px;
-  margin-left: 0px;
-  margin-right: 5px;
-  padding-right: 0px;
-}
-#pulseaudio {
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: 0px;
-  margin-right: 5px;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-#memory,
-#cpu {
-  padding-right: 2px;
-  /* border-top-right-radius: 0px; */
-  /* border-bottom-right-radius: 0px; */
-  /* border-right-width: 0px; */
-}
-#memory,
-#battery {
-  margin-left: 0px;
-  padding-left: 2px;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-left-width: 0px;
-}
-#battery {
-  padding-right: 13px;
-}
-#custom-weather {
-  margin-right: 0px;
-}
-
-#window {
-  margin-right: 0px;
-  margin-left: 0px;
-}