nixos-config/modules/home-manager/hypr/waybar.nix

{inputs, pkgs, ...}: 
{
    # required to autoload fonts from packages installed via Home Manager
    fonts.fontconfig.enable = true;

    # waybar requires font-awesome
    home.packages = [
        pkgs.font-awesome
        pkgs.font-awesome_5
        pkgs.fira-code
        pkgs.pavucontrol
    ];

    # enable waybar
    programs.waybar.enable = true;
    programs.waybar = {
        settings = {
        
            mainBar = {
                margin-top = 5;
                margin-bottom = 5;
                margin-left = 5;
                margin-right = 5;
                height = 42;
                layer = "top";
                position = "top";
                # height = 30;
                # output = [
                #     "eDP-1"
                #     "HDMI-A-1"
                # ];
                modules-left = [
                    "hyprland/workspaces"
                    "hyprland/window"

                ];
                modules-center = [
                    "clock"
                    "custom/notification"
                ];
                modules-right = [
                    # "temperature"
                    # "group/expand"
                    # "bluetooth"
                    "pulseaudio"
                    # "network"
                    # "mpd"
                    "battery"
                    "backlight"
                    "tray"
                ];

                # module specific settings
                "hyprland/workspaces" = {
                    format = "{icon}";
                    format-icons = {
                        active = "";
                        default = "";
                        empty = "";
                    };
                };
                "custom/notification" = {
                    tooltip = false;
                    format = "";
                    on-click = "swaync-client -t -sw";
                    escape = true;
                };
                "clock" = {
                    format = "{:%H:%M}";
                    interval = 1;   
                    tooltip-format = "<tt>{calendar}</tt>";
                    calendar = {
                        "format" = {
                            "today" = "<span color='#fAfBfC'><b>{}</b></span>";
                        };
                    };
                };

                # "network" = {
                #     "format-wifi" = "";
                #     "format-ethernet" ="";
                #     "format-disconnected" = "";
                #     "tooltip-format-disconnected" = "Error";
                #     "tooltip-format-wifi" = "{essid} ({signalStrength}%) ";
                #     "tooltip-format-ethernet" = "{ifname} 🖧 ";
                #     "on-click" = "kitty nmtui";
                # };
                "bluetooth" = {
                    format-on = "󰂯";
                    format-off = "BT-off";
                    format-disabled = "󰂲";
                    format-connected-battery = "{device_battery_percentage}% 󰂯";
                    format-alt = "{device_alias} 󰂯";
                    tooltip-format = "{controller_alias}\t{controller_address}\n\n{num_connections} connected";
                    tooltip-format-connected = "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}";
                    tooltip-format-enumerate-connected = "{device_alias}\n{device_address}";
                    tooltip-format-enumerate-connected-battery = "{device_alias}\n{device_address}\n{device_battery_percentage}%";
                    on-click-right = "blueman-manager";
                }; 
                "battery" = {
                    interval = 60;
                    states = {
                        good = 80;
                        warning = 30;
                        critical = 10;
                    };
                    format = "{capacity}% {icon}";
                    format-charging = "{capacity}% 󰂄";
                    format-plugged = "{capacity}% 󰂄 ";
                    format-icons = [ "󰁻" "󰁼" "󰁾" "󰂀" "󰂂" "󰁹" ];
                };

                "pulseaudio" = {
                    reverse-scrolling = 1;
                    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 = {
                        headphone = "";
                        hands-free = "";
                        headset = "";
                        phone = "";
                        portable = "";
                        car = "";
                        default = ["奄" "奔" "墳"];
                    };
                    on-click = "pavucontrol";
                    min-length = 13;
                };
                "tray" = {
                    spacing = 5;
                };
            };
        };

        style = ''
            * {
                border: none;
                border-radius: 0;
                /* `otf-font-awesome` is required to be installed for icons */
                font-family: Liberation Mono;
                min-height: 20px;
            }

            window#waybar {
                background: transparent;
            }

            window#waybar.hidden {
                opacity: 0.2;
            }

            #workspaces {
                margin-right: 8px;
                border-radius: 10px;
                transition: none;
                background: #383c4a;
            }

            #workspaces button {
                transition: none;
                color: #7c818c;
                background: transparent;
                padding: 5px;
                font-size: 18px;
            }

            #workspaces button.persistent {
                color: #7c818c;
                font-size: 12px;
            }

            /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
            #workspaces button:hover {
                transition: none;
                box-shadow: inherit;
                text-shadow: inherit;
                border-radius: inherit;
                color: #383c4a;
                background: #7c818c;
            }

            #workspaces button.focused {
                color: white;
            }

            #language {
                padding-left: 16px;
                padding-right: 8px;
                border-radius: 10px 0px 0px 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #keyboard-state {
                margin-right: 8px;
                padding-right: 16px;
                border-radius: 0px 10px 10px 0px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #custom-pacman {
                padding-left: 16px;
                padding-right: 8px;
                border-radius: 10px 0px 0px 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #custom-mail {
                margin-right: 8px;
                padding-right: 16px;
                border-radius: 0px 10px 10px 0px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #mode {
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #clock {
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px 0px 0px 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #custom-weather {
                padding-right: 16px;
                border-radius: 0px 10px 10px 0px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #pulseaudio {
                margin-right: 8px;
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #pulseaudio.muted {
                background-color: #90b1b1;
                color: #2a5c45;
            }

            #custom-mem {
                margin-right: 8px;
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #temperature {
                margin-right: 8px;
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #temperature.critical {
                background-color: #eb4d4b;
            }

            #backlight {
                margin-right: 8px;
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #battery {
                margin-right: 8px;
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            #battery.charging {
                color: #ffffff;
                background-color: #26A65B;
            }

            #battery.warning:not(.charging) {
                background-color: #ffbe61;
                color: black;
            }

            #battery.critical:not(.charging) {
                background-color: #f53c3c;
                color: #ffffff;
                animation-name: blink;
                animation-duration: 0.5s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }

            #tray {
                padding-left: 16px;
                padding-right: 16px;
                border-radius: 10px;
                transition: none;
                color: #ffffff;
                background: #383c4a;
            }

            @keyframes blink {
                to {
                    background-color: #ffffff;
                    color: #000000;
                }
            }
        '';
    };
}