nix-config/systems/x86_64-linux/navis/hyprland/waybar.nix

{
  config,
  lib,
  pkgs,
  ...
}: let
  palette = config.colorScheme.palette;
  betterTransition = "all 0.3s cubic-bezier(.55,-0.68,.48,1.682)";
in {
  programs.waybar = {
    enable = true;
    package = pkgs.waybar;
    settings = [
      {
        layer = "top";
        position = "top";

        modules-center = ["hyprland/workspaces"];

        modules-left = [
          "custom/startmenu"
          "hyprland/window"
          "pulseaudio"
          "cpu"
          "memory"
        ];

        modules-right = [
          "mpris"
          "network"
          "custom/notification"
          "tray"
          "clock"
        ];

        "mpris" = {
          format = "{player_icon} {title} - {artist}";
          format-paused = "{status_icon} {title} - {artist}";
          player-icons.default = "󰝚";
          status-icons.paused = "󰏤";
          max-length = 40;
        };

        "hyprland/workspaces" = {
          format = "{name}";
          format-icons = {
            default = " ";
            active = " ";
            urgent = " ";
          };
          on-scroll-up = "hyprctl dispatch workspace e-1";
          on-scroll-down = "hyprctl dispatch workspace e+1";
        };

        "clock" = {
          format = " {:L%I:%M %p}";
          tooltip = true;
          tooltip-format = "<big>{:%A, %d.%B %Y }</big>\n<tt><small>{calendar}</small></tt>";
        };

        "hyprland/window" = {
          max-length = 40;
          rewrite = {
            "" = "󰍹 Desktop";
            "(.*) — Firefox Nightly" = "󰈹 $1";
            "Slack" = "󰒱 Slack";
            ".*?Discord \\| @?(.*)" = "󰙯 $1";
            "wezterm" = " WezTerm";
            "Telegram(?: \\((\\d+)\\))?" = " Telegram";
            "Steam" = "󰓓 Steam";
          };
        };

        "memory" = {
          interval = 5;
          format = " {}%";
          tooltip = true;
        };

        "cpu" = {
          interval = 5;
          format = " {usage:2}%";
          tooltip = true;
        };

        "disk" = {
          format = " {free}";
          tooltip = true;
        };

        "network" = {
          format-icons = [
            "󰤯"
            "󰤟"
            "󰤢"
            "󰤥"
            "󰤨"
          ];
          format-ethernet = " {bandwidthDownOctets}";
          format-wifi = "{icon} {essid}";
          format-disconnected = "󰤮";
          tooltip = false;
        };

        "tray" = {
          spacing = 12;
        };

        "pulseaudio" = {
          format = "{icon} {volume}% {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 = {
            headphone = "";
            hands-free = "";
            headset = "󰋎";
            phone = "";
            portable = "";
            car = "";
            default = [
              ""
              ""
              ""
            ];
          };
          on-click = "sleep 0.1 && pavucontrol";
        };

        "custom/startmenu" = {
          tooltip = false;
          format = " ";
          on-click = "rofi -show drun";
        };

        "custom/notification" = {
          tooltip = false;
          format = "{icon} {}";
          format-icons = {
            notification = "<span foreground='red'><sup></sup></span>";
            none = "";
            dnd-notification = "<span foreground='red'><sup></sup></span>";
            dnd-none = "";
            inhibited-notification = "<span foreground='red'><sup></sup></span>";
            inhibited-none = "";
            dnd-inhibited-notification = "<span foreground='red'><sup></sup></span>";
            dnd-inhibited-none = "";
          };
          return-type = "json";
          exec = "swaync-client -swb";
          on-click = "swaync-client -t &";
          escape = true;
        };
      }
    ];

    style = lib.concatStrings [
      ''
        * {
          border:        none;
          border-radius: 0px;
          font-family:   Maple Mono NF;
          font-size:     16px;
          min-height:    0px;
        }

        window#waybar {
          background-color: #${palette.base00};
        }

        #workspaces {
          background:    #${palette.base01};
          border-radius: 16px;
          color:         #${palette.base00};
          margin:        4px 4px;
          padding:       8px 5px;
        }

        #workspaces button {
          animation:       gradient_horizontal 15s ease infinite;
          background:      linear-gradient(45deg, #${palette.base0E}, #${palette.base0F}, #${palette.base0D}, #${palette.base09});
          background-size: 300% 300%;
          border-radius:   16px;
          color:           #${palette.base00};
          font-weight:     bold;
          margin:          0px 3px;
          opacity:         0.5;
          padding:         0px 5px;
          transition:      ${betterTransition};
        }

        #workspaces button.active {
          animation:       gradient_horizontal 15s ease infinite;
          background:      linear-gradient(45deg, #${palette.base0E}, #${palette.base0F}, #${palette.base0D}, #${palette.base09});
          background-size: 300% 300%;
          border-radius:   16px;
          color:           #${palette.base00};
          font-weight:     bold;
          margin:          0px 3px;
          min-width:       40px;
          opacity:         1.0;
          padding:         0px 5px;
          transition:      ${betterTransition};
        }

        #workspaces button:hover {
          animation:       gradient_horizontal 15s ease infinite;
          background:      linear-gradient(45deg, #${palette.base0E}, #${palette.base0F}, #${palette.base0D}, #${palette.base09});
          background-size: 300% 300%;
          border-radius:   16px;
          color:           #${palette.base00};
          font-weight:     bold;
          opacity:         0.8;
          transition:      ${betterTransition};
        }

        @keyframes gradient_horizontal {
          0%   { background-position: 0%   50%; }
          50%  { background-position: 100% 50%; }
          100% { background-position: 0%   50%; }
        }

        @keyframes swiping {
          0%   { background-position: 0%   200%; }
          100% { background-position: 200% 200%; }
        }

        tooltip {
          background:    #${palette.base00};
          border:        1px solid #${palette.base0E};
          border-radius: 12px;
        }

        tooltip label {
          color: #${palette.base07};
        }

        #window, #pulseaudio, #cpu, #memory, #idle_inhibitor {
          background:    #${palette.base01};
          border-radius: 24px 10px 24px 10px;
          color:         #${palette.base05};
          font-weight:   bold;
          margin:        4px 0px;
          margin-left:   7px;
          padding:       0px 18px;
        }

        #custom-startmenu {
          background:    #${palette.base01};
          border-radius: 0px 0px 40px 0px;
          color:         #${palette.base0D};
          font-size:     28px;
          margin:        0px;
          padding:       0px 30px 0px 15px;
        }

        #mpris, #network, #custom-notification, #tray {
          background:    #${palette.base01};
          border-radius: 10px 24px 10px 24px;
          color:         #${palette.base05};
          font-weight:   bold;
          margin:        4px 0px;
          margin-right:  7px;
          padding:       0px 18px;
        }

        #clock {
          animation:       gradient_horizontal 15s ease infinite;
          background:      linear-gradient(45deg, #${palette.base0C}, #${palette.base0F}, #${palette.base0B}, #${palette.base08});
          background-size: 300% 300%;
          border-radius:   0px 0px 0px 40px;
          color:           #${palette.base00};
          font-weight:     bold;
          margin:          0px;
          padding:         0px 15px 0px 30px;
        }
      ''
    ];
  };
}