Add Waybar configuration with glassmorphic theme and custom styles

home/home.nix

@@ -185,6 +185,15 @@
     x11.enable = true;
   };
   
+  # Waybar configuration with glassmorphic theme
+  programs.waybar = {
+    enable = true;
+    systemd.enable = true;
+  };
+  
+  home.file.".config/waybar/config".source = ./waybar-config.json;
+  home.file.".config/waybar/style.css".source = ./waybar-style.css;
+
   # Flatpaks are managed in system/flatpak.nix
 
   # Let Home Manager manage itself

home/waybar-config.json

@@ -0,0 +1,95 @@
+{
+  "layer": "top",
+  "position": "top",
+  "height": 40,
+  "spacing": 4,
+  
+  "modules-left": ["hyprland/workspaces", "hyprland/window"],
+  "modules-center": ["clock"],
+  "modules-right": ["pulseaudio", "network", "battery", "tray"],
+  
+  "hyprland/workspaces": {
+    "format": "{icon}",
+    "format-icons": {
+      "1": "1",
+      "2": "2", 
+      "3": "3",
+      "4": "4",
+      "5": "5",
+      "6": "6",
+      "7": "7",
+      "8": "8",
+      "9": "9",
+      "10": "10"
+    },
+    "persistent-workspaces": {
+      "*": 5
+    }
+  },
+  
+  "hyprland/window": {
+    "format": "{}",
+    "max-length": 50,
+    "separate-outputs": true
+  },
+  
+  "clock": {
+    "format": "{:%H:%M}",
+    "format-alt": "{:%A, %B %d, %Y}",
+    "tooltip-format": "<tt><small>{calendar}</small></tt>",
+    "calendar": {
+      "mode": "year",
+      "mode-mon-col": 3,
+      "weeks-pos": "right",
+      "on-scroll": 1,
+      "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>"
+      }
+    }
+  },
+  
+  "battery": {
+    "states": {
+      "warning": 30,
+      "critical": 15
+    },
+    "format": "{icon} {capacity}%",
+    "format-charging": " {capacity}%",
+    "format-plugged": " {capacity}%",
+    "format-alt": "{icon} {time}",
+    "format-icons": ["", "", "", "", ""]
+  },
+  
+  "network": {
+    "format-wifi": " {essid}",
+    "format-ethernet": " {ipaddr}",
+    "format-disconnected": "⚠ Disconnected",
+    "tooltip-format": "{ifname} via {gwaddr}",
+    "tooltip-format-wifi": " {essid} ({signalStrength}%)",
+    "on-click": "nm-connection-editor"
+  },
+  
+  "pulseaudio": {
+    "format": "{icon} {volume}%",
+    "format-muted": " Muted",
+    "format-icons": {
+      "headphone": "",
+      "hands-free": "",
+      "headset": "",
+      "phone": "",
+      "portable": "",
+      "car": "",
+      "default": ["", "", ""]
+    },
+    "on-click": "pavucontrol"
+  },
+  
+  "tray": {
+    "icon-size": 16,
+    "spacing": 10
+  }
+}

home/waybar-style.css

@@ -0,0 +1,134 @@
+* {
+  border: none;
+  border-radius: 0;
+  font-family: "FiraCode Nerd Font", "JetBrainsMono Nerd Font";
+  font-size: 13px;
+  min-height: 0;
+}
+
+window#waybar {
+  background: rgba(30, 30, 46, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #cdd6f4;
+}
+
+/* Workspaces */
+#workspaces {
+  background: rgba(49, 50, 68, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  margin: 5px 5px 5px 10px;
+  padding: 0px 5px;
+  border-radius: 15px;
+  border: 2px solid rgba(137, 180, 250, 0.3);
+}
+
+#workspaces button {
+  padding: 0px 10px;
+  margin: 4px 3px;
+  border-radius: 10px;
+  color: #cdd6f4;
+  background: transparent;
+  transition: all 0.3s ease;
+}
+
+#workspaces button.active {
+  background: rgba(137, 180, 250, 0.3);
+  color: #89b4fa;
+  border-radius: 10px;
+  box-shadow: 0 0 15px rgba(137, 180, 250, 0.4);
+}
+
+#workspaces button:hover {
+  background: rgba(137, 180, 250, 0.2);
+  border-radius: 10px;
+}
+
+/* Window title */
+#window {
+  background: rgba(49, 50, 68, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  margin: 5px 10px;
+  padding: 5px 15px;
+  border-radius: 15px;
+  border: 2px solid rgba(137, 180, 250, 0.3);
+  color: #cdd6f4;
+}
+
+/* Clock */
+#clock {
+  background: rgba(49, 50, 68, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding: 5px 20px;
+  margin: 5px 10px;
+  border-radius: 15px;
+  border: 2px solid rgba(137, 180, 250, 0.3);
+  color: #89b4fa;
+  font-weight: bold;
+}
+
+/* Right modules */
+#pulseaudio,
+#network,
+#battery,
+#tray {
+  background: rgba(49, 50, 68, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding: 5px 15px;
+  margin: 5px 5px;
+  border-radius: 15px;
+  border: 2px solid rgba(137, 180, 250, 0.3);
+}
+
+#tray {
+  margin-right: 10px;
+}
+
+#pulseaudio {
+  color: #89dceb;
+}
+
+#network {
+  color: #a6e3a1;
+}
+
+#battery {
+  color: #f9e2af;
+}
+
+#battery.charging {
+  color: #a6e3a1;
+}
+
+#battery.warning:not(.charging) {
+  color: #fab387;
+}
+
+#battery.critical:not(.charging) {
+  color: #f38ba8;
+  animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+  to {
+    opacity: 0.5;
+  }
+}
+
+/* Tooltips */
+tooltip {
+  background: rgba(30, 30, 46, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 10px;
+  border: 2px solid rgba(137, 180, 250, 0.3);
+  color: #cdd6f4;
+}
+
+tooltip label {
+  color: #cdd6f4;
+}