add waybar to hyprland

homes/modules/de/waybar/colors.css

@@ -0,0 +1,19 @@
+@define-color colorbg #26233a;
+@define-color colorfg #eb6f92;
+
+@define-color color00 #26233a; /* black   (Overlay) */
+@define-color color01 #eb6f92; /* red     (Love)    */
+@define-color color02 #9ccfd8; /* green   (Foam)    */
+@define-color color03 #f6c177; /* yellow  (Gold)    */
+@define-color color04 #31748f; /* blue    (Pine)    */
+@define-color color05 #c4a7e7; /* magenta (Iris)    */
+@define-color color06 #ebbcba; /* cyan    (Rose)    */
+@define-color color07 #e0def4; /* white   (Text)    */
+@define-color color08 #47435d; /* bright black   (lighter Overlay) */
+@define-color color09 #ff98ba; /* bright red     (lighter Love)    */
+@define-color color10 #c5f9ff; /* bright green   (lighter Foam)    */
+@define-color color11 #ffeb9e; /* bright yellow  (lighter Gold)    */
+@define-color color12 #5b9ab7; /* bright blue    (lighter Pine)    */
+@define-color color13 #eed0ff; /* bright magenta (lighter Iris)    */
+@define-color color14 #ffe5e3; /* bright cyan    (lighter Rose)    */
+@define-color color15 #fefcff; /* bright white   (lighter Text)    */

homes/modules/de/waybar/default.nix

@@ -0,0 +1,101 @@
+{upkgs, ...}: {
+  programs.waybar = {
+    enable = true;
+    settings = {
+      mainBar = {
+        layer = "top";
+        position = "top";
+        height = 30;
+        # modules-left = ["hyprland/workspaces" "wlr/taskbar" "custom/media"];
+        modules-left = ["hyprland/workspaces" "wlr/taskbar"];
+        modules-center = ["clock"];
+        modules-right = ["cpu" "memory" "network" "pulseaudio" "privacy" "tray"];
+
+        # left
+        "hyprland/workspaces" = {
+          format = "{id}";
+        };
+        "ext/workspaces" = {
+          # not enabled yet, hyprland and mango need two different configs ;-;
+          format = "{id}";
+          ignore-hidden = true;
+          on-click = "activate";
+        };
+        "wlr/taskbar" = {
+          format = "{icon}";
+          icon-size = 12;
+        };
+        # "custom/media" = {
+        #   exec = "auroramedia";
+        #   return-type = "json";
+        #   escape = true;
+        #   restart-interval = 1;
+        # };
+
+        # center
+        "clock" = {
+          format = "{:%Y %b %a %d %H:%M:%S}";
+          interval = 1;
+          tooltip = false;
+        };
+
+        # right
+        "cpu" = {
+          format = "  {usage}%";
+          interval = 1;
+        };
+        "memory" = {
+          format = "  {used:0.1f} / {total:0.1f} GiB";
+          interval = 1;
+        };
+        "network" = {
+          format = "{bandwidthUpBytes}   {bandwidthDownBytes}  {ifname}";
+          format-wifi = "  {bandwidthUpBytes}   {bandwidthDownBytes} ";
+          format-ethernet = "󰈀  {bandwidthUpBytes}   {bandwidthDownBytes} ";
+          format-disconnected = "no internet ~ rawr! ~ x3"; # empty format hides module
+          interval = 1;
+          max-length = 32;
+        };
+        "pulseaudio" = {
+          format = "{icon}  {volume}%";
+          format-muted = "  {volume}%";
+          format-icons = {
+            default = [
+              ""
+              ""
+              ""
+            ];
+          };
+          "scroll-step" = 5;
+        };
+        "privacy" = {
+          icon-size = 12;
+          icon-spacing = 5;
+          transition-duration = 200;
+          modules = [
+            {
+              type = "screenshare";
+              tooltip = true;
+              tooltip-icon-size = 12;
+            }
+            {
+              type = "audio-in";
+              tooltip = true;
+              tooltip-icon-size = 12;
+            }
+          ];
+        };
+        "tray" = {
+          icon-size = 12;
+          spacing = 10;
+          # fixes spotify not showing up when "close button should minimize the Spotify window" is false
+          show-passive-items = true;
+        };
+      };
+    };
+
+    style =
+      builtins.readFile ./colors.css
+      + builtins.readFile ./style.css;
+  };
+}

homes/modules/de/waybar/style.css

@@ -0,0 +1,164 @@
+* {
+  border: none;
+  border-radius: 0;
+  font-family: 'GeistMono Nerd Font';
+  font-size: 15px;
+  font-weight: bold;
+  min-height: 10px;
+}
+window#waybar {
+  background: rgba(0, 0, 0, 0);
+}
+/*
+adds a margin around the edge of the taskbar, surrounding the modules,
+spacing it out from the edge of the screen and windows below
+*/
+window#waybar > box {
+  margin: 0px 12px;
+}
+
+tooltip {
+  background: @colorbg;
+  color: @colorfg;
+  opacity: 0.9;
+  padding: 4px;
+  border-radius: 12px;
+  border: 1px solid @color01;
+}
+tooltip label {
+  background: rgba(0, 0, 0, 0);
+  color: @colorfg;
+}
+
+#clock,
+#memory,
+#network,
+#workspaces,
+#taskbar,
+#cpu,
+#pulseaudio,
+#privacy,
+#tray,
+#custom-media {
+  background: @colorbg;
+  color: @colorfg;
+  opacity: 0.9;
+  padding: 4px 16px;
+  border-radius: 32px;
+  border: 1px solid @color01;
+}
+
+/*
+left-side modules
+*/
+#workspaces,
+#taskbar,
+#custom-media {
+  margin: 4px 4px 4px 0px;
+}
+
+/*
+center modules
+*/
+#clock {
+  margin: 4px 0px 4px 0px;
+}
+
+/*
+right-side modules
+*/
+#memory,
+#network,
+#cpu,
+#pulseaudio,
+#tray,
+#privacy {
+  margin: 4px 0px 4px 4px;
+}
+
+#workspaces,
+#taskbar {
+  padding: 0px;
+}
+
+#taskbar.empty {
+  opacity: 0;
+  padding: 0px;
+  margin: 0px;
+  border: none;
+}
+#tray.empty {
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+/*
+  connects the workspace and taskbar together :3
+*/
+/*
+#workspaces {
+  margin: 4px 0px 4px 12px;
+  padding: 0px 8px 0px 0px;
+  border-radius: 100px 0px 0px 100px;
+  border-width: 1px 0px 1px 1px;
+}
+#taskbar {
+  margin: 4px 0px 4px 0px;
+  padding: 0px 0px 0px 8px;
+  border-radius: 0px 100px 100px 0px;
+}
+*/
+
+#cpu {
+  margin: 4px 0 4px 0;
+  border-radius: 32px 0px 0px 32px;
+}
+#memory {
+  margin: 4px 0 4px 0;
+  border-radius: 0px;
+  border-width: 1px 0px 1px 0px;
+}
+#network {
+  margin: 4px 0 4px 0;
+  border-radius: 0px 32px 32px 0px;
+}
+
+#workspaces button {
+  padding: 2px 4px;
+  border-radius: 32px;
+  color: @colorfg;
+}
+#workspaces button:hover {
+  background: @colorfg;
+  color: @colorbg;
+  opacity: 0.8;
+}
+#workspaces button.active {
+  background: @colorfg;
+  color: @colorbg;
+}
+
+#taskbar button {
+  padding: 2px 4px;
+  border-radius: 32px;
+  color: @colorfg;
+}
+#taskbar button:hover {
+  background: @colorfg;
+  color: @colorbg;
+  opacity: 0.8;
+}
+#taskbar button.active {
+  background: @colorfg;
+  color: @colorbg;
+}
+/*
+  icons in each button on the taskbar to correct
+  for them not being properly centred sometimes :3
+*/
+#taskbar button box image {
+  padding-left: 2px;
+}
+

homes/modules/wm/hyprland/default.nix

@@ -44,6 +44,7 @@
         # TODO: make these independent of hyprland, add these to the
         "mako &"
         "awww-daemon &"
+        "waybar &"
 
         # "wl-paste --type text --watch cliphist store"
         # "wl-paste --type image --watch cliphist store"