Nix-ify waybar config

flake.nix

@@ -163,6 +163,9 @@
                 hyprland.homeManagerModules.default
                 ./home/work.nix
                 ./home/desktop/hyprland.nix
+                ./home/desktop/waybar/main.nix
+                ./home/desktop/waybar/laptop.nix
+                ./home/desktop/waybar/vertical.nix
                 ./home/gui
               ];
               home = {
@@ -172,17 +175,9 @@
               };
               programs.neovim.package = pkgs.neovim-nightly;
               programs.waybar.settings = {
-                main."output" = "eDP-1";
+                main."output" = "desc:Iiyama North America PLB2403WS 0574281251316";
-                ext = {
+                laptop."output" = "eDP-1";
-                  "include" = [
+                vertical."output" = "desc:Dell Inc. DELL U2417H 5K9YD872FY1L";
-                    "~/.config/waybar/modules.json"
-                    "~/.config/waybar/layout.json"
-                  ];
-                  "output" = "!eDP-1";
-                  "modules-left" = ["clock" "cpu" "memory" "temperature"];
-                  "modules-center" = ["wlr/workspaces"];
-                  "modules-right" = ["pulseaudio" "bluetooth" "network#compact" "battery" "tray"];
-                };
               };
               xdg.configFile."hypr/hyprpaper.conf".text = ''
                 preload = ${wallpapers.outputs.default}

home/desktop/hyprland.nix

@@ -24,8 +24,8 @@
   };
 in {
   imports = [
+    ./waybar
     ./swaylock.nix
-    ./waybar.nix
     ./gtk.nix
     ./dunst.nix
     ./rofi.nix

home/desktop/waybar.nix

@@ -1,41 +0,0 @@
-{
-  pkgs,
-  lib,
-  ...
-}: {
-  home.packages = with pkgs; [
-    (nerdfonts.override {fonts = ["FiraCode"];})
-    networkmanagerapplet
-    bluez
-  ];
-  xdg.configFile."waybar" = {
-    source = ./config/waybar;
-    recursive = true;
-  };
-  programs.waybar = {
-    enable = true;
-    settings.main = {
-      "include" = [
-        "~/.config/waybar/modules.json"
-        "~/.config/waybar/layout.json"
-      ];
-      "modules-left" = lib.mkDefault [
-        "clock"
-        "cpu"
-        "memory"
-        "temperature"
-      ];
-      "modules-center" = lib.mkDefault [
-        "wlr/workspaces"
-      ];
-      "modules-right" = lib.mkDefault [
-        "pulseaudio"
-        "bluetooth"
-        "network#compact"
-        "backlight"
-        "battery"
-        "tray"
-      ];
-    };
-  };
-}

home/desktop/waybar/default.nix

@@ -0,0 +1,11 @@
+{pkgs, ...}: {
+  home.packages = with pkgs; [
+    (nerdfonts.override {fonts = ["FiraCode"];})
+    networkmanagerapplet
+    bluez
+  ];
+  programs.waybar = {
+    enable = true;
+    style = ./style.css;
+  };
+}

home/desktop/waybar/laptop.nix

@@ -0,0 +1,42 @@
+{...}: let
+  modules = import ./modules.nix;
+in {
+  imports = [./default.nix];
+  programs.waybar.settings.laptop = {
+    layer = "top";
+    position = "top";
+    spacing = 10;
+    margin-top = 10;
+    margin-left = 20;
+    margin-right = 20;
+    margin-bottom = 5;
+    "modules-left" = [
+      "clock#compact"
+      "cpu"
+      "memory"
+      "temperature"
+    ];
+    "modules-center" = [
+      "wlr/workspaces"
+    ];
+    "modules-right" = [
+      "pulseaudio"
+      "bluetooth"
+      "network#compact"
+      "backlight"
+      "battery"
+      "tray"
+    ];
+    "clock#compact" = modules."clock#compact";
+    cpu = modules.cpu;
+    memory = modules.memory;
+    temperature = modules.temperature;
+    "wlr/workspaces" = modules."wlr/workspaces";
+    pulseaudio = modules.pulseaudio;
+    bluetooth = modules.bluetooth;
+    "network#compact" = modules."network#compact";
+    backlight = modules.backlight;
+    battery = modules.battery;
+    tray = modules.tray;
+  };
+}

home/desktop/waybar/main.nix

@@ -0,0 +1,41 @@
+{...}: let
+  modules = import ./modules.nix;
+in {
+  imports = [./default.nix];
+  programs.waybar.settings.main = {
+    layer = "top";
+    position = "top";
+    spacing = 10;
+    margin-top = 10;
+    margin-left = 20;
+    margin-right = 20;
+    margin-bottom = 5;
+    "modules-left" = [
+      "clock"
+      "cpu"
+      "memory"
+      "temperature"
+    ];
+    "modules-center" = [
+      "wlr/workspaces"
+    ];
+    "modules-right" = [
+      "pulseaudio"
+      "bluetooth"
+      "network"
+      "battery"
+      "tray"
+    ];
+    clock = modules.clock;
+    cpu = modules.cpu;
+    memory = modules.memory;
+    temperature = modules.temperature;
+    "wlr/workspaces" = modules."wlr/workspaces";
+    pulseaudio = modules.pulseaudio;
+    bluetooth = modules.bluetooth;
+    network = modules.network;
+    backlight = modules.backlight;
+    battery = modules.battery;
+    tray = modules.tray;
+  };
+}

home/desktop/waybar/modules.nix

@@ -0,0 +1,188 @@
+{
+  keyboard-state = {
+    numlock = true;
+    capslock = true;
+    format = "{name} {icon}";
+    format-icons = {
+      locked = "";
+      unlocked = "";
+    };
+  };
+  tray.spacing = 10;
+  clock = {
+    format = "{:%A %Y-%m-%d 󰃭 | %R 󰅐 }";
+    tooltip-format = "<tt>{calendar}</tt>";
+    calendar = {
+      mode = "year";
+      mode-mon-col = 3;
+      weeks-pos = "right";
+      on-scroll = 1;
+      on-click-right = "mode";
+      format = {
+        months = "<span color='#ffead3'><b>{}</b></span>";
+        days = "<span color='#ecc6d9'><b>{}</b></span>";
+        weeks = "<span color='#99ffdd'><b>W{}</b></span>";
+        weekdays = "<span color='#ffcc66'><b>{}</b></span>";
+        today = "<span color='#ff6699'><b><u>{}</u></b></span>";
+      };
+    };
+    actions = {
+      on-click-right = "mode";
+      on-click-forward = "tz_up";
+      on-click-backward = "tz_down";
+      on-scroll-up = "shift_up";
+      on-scroll-down = "shift_down";
+    };
+  };
+  "clock#compact" = {
+    format = "{:%R 󰅐 }";
+    tooltip-format = "{:%A %Y-%m-%d 󰃭 }";
+  };
+  cpu = {
+    format = "{usage}% 󰻠";
+    tooltip = false;
+  };
+  memory.format = "{}% 󰍛";
+  temperature = {
+    critical-threshold = 80;
+    format = "{temperatureC}°C {icon}";
+    format-icons = [
+      "󱃃"
+      "󰔏"
+      "󱃂"
+    ];
+  };
+  backlight = {
+    format = "{percent}% {icon}";
+    format-icons = [
+      ""
+      ""
+      ""
+      ""
+      ""
+      ""
+      ""
+      ""
+      ""
+    ];
+  };
+  battery = {
+    states = {
+      warning = 30;
+      critical = 15;
+    };
+    format = "{capacity}% {icon}";
+    format-charging = "{capacity}% 󰂄";
+    format-plugged = "{capacity}% 󰚥";
+    format-alt = "{time} {icon}";
+    format-icons = [
+      "󱃍"
+      "󰁺"
+      "󰁻"
+      "󰁼"
+      "󰁽"
+      "󰁾"
+      "󰁿"
+      "󰂀"
+      "󰂁"
+      "󰂂"
+      "󰁹"
+    ];
+  };
+  network = {
+    format-wifi = "{essid} ({signalStrength}%) 󰖩";
+    format-ethernet = "Connected 󰈁";
+    tooltip-format = "{ifname}";
+    format-linked = "{ifname} (No IP) 󰈁";
+    format-disconnected = "Disconnected 󰈂";
+    format-alt = "{ifname}: {ipaddr}/{cidr}";
+    on-click = "nm-connection-editor";
+  };
+  "network#compact" = {
+    format-wifi = "({signalStrength}%) 󰖩";
+    format-ethernet = "󰈁";
+    tooltip-format = "{essid}";
+    format-linked = "(No IP) 󰈁";
+    format-disconnected = "󰈂";
+    on-click = "nm-connection-editor";
+  };
+  bluetooth = {
+    format = "󰂯 {status}";
+    format-disabled = "󰂲 {status}";
+    format-off = "󰂲 {status}";
+    format-on = "󰂯 {status}";
+    format-connected = "󰂱 {device_alias}";
+    on-click = "blueman-manager";
+  };
+  pulseaudio = {
+    scroll-step = 5;
+    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";
+  };
+  "pulseaudio#compact" = {
+    scroll-step = 5;
+    format = "{icon} {format_source}";
+    format-bluetooth = "{icon} {format_source}";
+    format-bluetooth-muted = "󰝟 {icon} {format_source}";
+    format-muted = "󰝟 {format_source}";
+    format-source = "󰍬";
+    format-source-muted = "󰍭";
+    format-icons = {
+      headphone = "󰋋";
+      hands-free = "󰥰";
+      headset = "󰋎";
+      phone = "󰏲";
+      portable = "󰏳";
+      car = "󰄍";
+      default = [
+        "󰕿"
+        "󰖀"
+        "󰕾"
+      ];
+    };
+    on-click = "pavucontrol";
+  };
+  "custom/power" = {
+    format = "󰐥";
+    on-click = "powermenu";
+  };
+  "wlr/workspaces" = {
+    on-click = "activate";
+    disable-scroll = true;
+    all-outputs = true;
+    format = "{icon}";
+    format-icons = {
+      "1" = "󰟀";
+      "2" = "󰅴";
+      "3" = "󰈹";
+      "4" = "󰝰";
+      "5" = "󰭹";
+      "6" = "";
+      "7" = "󰓓";
+      "8" = "󰣙";
+      urgent = "";
+      default = "󰣘";
+    };
+    sort-by-name = true;
+    sort-by-coordinates = false;
+    sort-by-number = false;
+  };
+}

home/desktop/waybar/style.css

@@ -0,0 +1,151 @@
+@define-color base   #24273a;
+@define-color mantle #1e2030;
+@define-color crust  #181926;
+
+@define-color text     #cad3f5;
+@define-color subtext0 #a5adcb;
+@define-color subtext1 #b8c0e0;
+
+@define-color surface0 #363a4f;
+@define-color surface1 #494d64;
+@define-color surface2 #5b6078;
+
+@define-color overlay0 #6e738d;
+@define-color overlay1 #8087a2;
+@define-color overlay2 #939ab7;
+
+@define-color blue      #8aadf4;
+@define-color lavender  #b7bdf8;
+@define-color sapphire  #7dc4e4;
+@define-color sky       #91d7e3;
+@define-color teal      #8bd5ca;
+@define-color green     #a6da95;
+@define-color yellow    #eed49f;
+@define-color peach     #f5a97f;
+@define-color maroon    #ee99a0;
+@define-color red       #ed8796;
+@define-color mauve     #c6a0f6;
+@define-color pink      #f5bde6;
+@define-color flamingo  #f0c6c6;
+@define-color rosewater #f4dbd6;
+
+* {
+    border: none;
+    border-radius: 10px;
+    font-family: "FiraCode Nerd Font";
+    font-size: 18px;
+}
+
+window#waybar {
+    background: transparent;
+}
+window#waybar.hidden {
+    opacity: 0.2;
+}
+#window {
+    margin-top: 6px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 10px;
+    transition: none;
+    color: transparent;
+    background: transparent;
+}
+
+#workspaces button {
+    transition: none;
+    color: @overlay0;
+    box-shadow: inset 0 -3px transparent;
+    border-radius: 2px;
+}
+#workspaces button.active,
+#workspaces button.focused {
+    color: @base;
+}
+#workspaces button:hover {
+    transition: none;
+    box-shadow: inherit;
+    text-shadow: inherit;
+    color: @base;
+    border-color: #e8a2af;
+    color: @base;
+}
+#workspaces button.focused:hover {
+    color: @base;
+}
+
+/* left section */
+#clock,
+#cpu,
+#memory,
+#temperature,
+/* centre section */
+#workspaces,
+/* right section */
+#pulseaudio,
+#bluetooth,
+#network,
+#backlight,
+#battery,
+#tray {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    transition: none;
+    color: @crust;
+    background: @lavender;
+}
+
+#clock {
+    background: @lavender;
+}
+#cpu {
+    background: @pink;
+}
+#memory {
+    background: @mauve;
+}
+#temperature {
+    background: @red;
+}
+#workspaces {
+    background: @yellow;
+}
+#pulseaudio {
+    background: @green;
+}
+#bluetooth {
+    background: @teal;
+}
+#network {
+    background: @sky;
+}
+#backlight {
+    background: @sapphire;
+}
+#battery {
+    background: @blue;
+}
+#battery.charging,
+#battery.plugged {
+    background-color: @blue;
+}
+#battery.critical:not(.charging) {
+    background-color: @blue;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+@keyframes blink {
+to {
+    color: @red;
+}
+}
+#tray {
+    color: @base;
+}

home/desktop/waybar/vertical.nix

@@ -0,0 +1,20 @@
+{...}: let
+  modules = import ./modules.nix;
+in {
+  imports = [./default.nix];
+  programs.waybar.settings = {
+    vertical = {
+      layer = "top";
+      position = "top";
+      spacing = 10;
+      margin-top = 10;
+      margin-left = 20;
+      margin-right = 20;
+      margin-bottom = 5;
+      "modules-left" = [];
+      "modules-center" = ["wlr/workspaces"];
+      "modules-right" = [];
+      "wlr/workspaces" = modules."wlr/workspaces";
+    };
+  };
+}