feat: new waybar

hypr/hyprland.conf

@@ -23,7 +23,6 @@ $powermodemenu = $HOME/.config/rofi/scripts/dmenu_powermodemenu.sh
 $browser = env GTK_THEME=Adwaita:light zen-browser
 $privateBrowser = env GTK_THEME=Adwaita:light zen-browser --private-window
 $notificationCenter = pkill rofi & swaync-client -t -sw || notify-send --hint int:transient:1 "Error SwayNC is down"
-$waybar = GTK_THEME="Simply_Circles_Dark" waybar -c "$HOME/.config/waybar/config_top.jsonc" -s "$HOME/.config/waybar/style_top.css" &
 
 $mpdpass = kapuchinamusica
 
@@ -41,8 +40,7 @@ exec-once = gsettings set org.gnome.desktop.interface color-scheme "prefer-dark"
 # exec-once = hyprpaper
 exec-once = swww-daemon
 exec-once = ~/.config/hypr/scripts/autofreeze_swww.sh
-exec-once = $waybar 
+exec-once = ~/.config/waybar/run.sh 
-exec-once = $dock
 exec-once = swaync
 exec-once = hypridle 
 exec-once = hyprsunset
@@ -58,10 +56,6 @@ exec-once = touch /tmp/toggle_ssocks
 exec-once = ~/.config/hypr/scripts/toggle_proxy.sh
 exec-once = nextcloud --background &
 exec-once = [workspace 8 silent] AyuGram 
-# exec-once = [workspace 7 silent] superproductivity
-# exec-once = nm-applet &
-# exec-once = waybar & hyprpaper & firefox
-
 
 #############################
 ### ENVIRONMENT VARIABLES ###
@@ -99,7 +93,7 @@ env = HYPRCURSOR_SIZE,24
 # https://wiki.hyprland.org/Configuring/Variables/#general
 general {
     gaps_in = 12.5
-    gaps_out = 20
+    gaps_out = 12
 
     border_size = 1
 
@@ -514,8 +508,8 @@ bindl = , XF86AudioPause, exec, playerctl play-pause
 bindl = , XF86AudioPlay, exec, playerctl play-pause
 bindl = , XF86AudioPrev, exec, playerctl previous
 
-# Toggle waybar & dock
+# Toggle waybar
-bind = $mainMod SHIFT, B, exec, ~/.config/hypr/scripts/toggle_waybar.sh
+bind = $mainMod SHIFT, B, exec, ~/.config/waybar/run.sh toggle
 
 # Toggle grayscale mode
 bind = $mainMod CTRL, G, exec, ~/.config/hypr/scripts/grayscale-toggle.sh
@@ -711,11 +705,6 @@ layerrule = blur, waybar
 layerrule = ignorealpha 0.6, waybar
 layerrule = animation slide top, waybar
 
-# nwg-dock
-layerrule = ignorezero, nwg-dock
-layerrule = blur, nwg-dock
-layerrule = animation slide bottom, nwg-dock
-
 # Adjustments for certain workspaces
 workspace = special:magic, gapsin:20, gapsout:50, shadow:false
 workspace = 9, gapsin:15, gapsout:40 

waybar/config_bottom.jsonc

@@ -0,0 +1,124 @@
+// -*- mode: jsonc -*-
+{
+    "output": [
+        "eDP-1",
+        "HDMI-A-1"
+    ],
+    "height": 30,
+    "margin-left": 5,
+    "margin-right": 5,
+    "margin-bottom": 5,
+    "position": "bottom",
+    "layer": "top",
+    "spacing": 0,
+    "reload_style_on_change": true,
+    "modules-left": [
+        "mpd"
+    ],
+    "modules-center": [
+    "wlr/taskbar",
+    "custom/launcher"
+    ],
+    "modules-right": [
+        "cpu",
+        "memory",
+        "temperature"
+    ],
+    "custom/separator_invisible": {
+        "format": " ",
+        "interval": "once",
+        "tooltip": false
+    },
+    "custom/launcher": {
+        "format": "󱗼",
+        "interval": "once",
+        "on-click": "$HOME/.config/rofi/launchers/type-1/launcher.sh",
+        "tooltip-format": "Open launcher"
+    },
+    "tray": {
+        "icon-size": 18,
+        "spacing": 10,
+        "icons": {
+            "blueman": "bluetooth",
+            "TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png"
+        }
+    },
+    "wlr/taskbar": {
+        "all-outputs": false,
+        "format": "{icon}",
+        "icon-size": 25,
+        "icon-theme": "Retro Art - Red Kolya",
+        "tooltip-format": "{title}",
+        "on-click": "activate",
+        "on-click-middle": "close",
+        "ignore-list": [
+            "Alacritty"
+        ],
+        "app_ids-mapping": {
+            "firefoxdeveloperedition": "firefox-developer-edition"
+        },
+        "rewrite": {
+            "Firefox Web Browser": "Firefox",
+            "Foot Server": "Terminal",
+            ".*(steam_app_[0-9]+).*": "Game"
+        }
+    },
+    "cpu": {
+        "format": "{icon}",
+        "tooltip": false,
+        "interval": 3,
+        "format-icons": [
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ],
+        "states": {
+            "s1": 0,
+            "s2": 10,
+            "s3": 30,
+            "s4": 50,
+            "s5": 70
+        }
+    },
+    "memory": {
+        "format": "{icon}",
+        "interval": 3,
+        "format-icons": [
+          "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ],
+        "states": {
+            "s1": 20,
+            "s2": 30,
+            "s3": 50,
+            "s4": 60,
+            "s4": 70
+        }
+    },
+    "temperature": {
+        "format": "{icon}",
+        "interval": 10,
+        "format-icons": [
+          "󰄰", "󰄰", "󰄰", "󰄰", "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
+        ],
+        "warning-threshold": 60,
+        "critical-threshold": 80
+    },
+    "mpd": {
+        "password": "kapuchinamusica",
+        "artist-len": 30,
+        "title-len": 31,
+        "unknown-tag": "n/a",
+        "format": "{stateIcon} {titleSmart}",
+        "interval": 1,
+        "single-icons": {
+            "on": "1 "
+        },
+        "state-icons": {
+            "paused": "",
+            "playing": ""
+        },
+        "tooltip-format": "MPD (connected)",
+        "tooltip-format-disconnected": "MPD (disconnected)",
+        "format-stopped": "",
+        "on-click": "mpc toggle --password kapuchinamusica"
+    }
+
+}

waybar/config_top.jsonc

@@ -5,12 +5,13 @@
         "HDMI-A-1"
     ],
     "height": 30,
-    "width": 1900,
+    "margin-left": 5,
+    "margin-right": 5,
+    "margin-top": 5,
     "spacing": 0,
     "reload_style_on_change": true,
     "modules-left": [
-        "custom/separator_invisible",
+        "tray",
-        "mpd",
         "custom/pomodoro"
     ],
     "modules-center": [
@@ -21,9 +22,16 @@
         "pulseaudio/slider",
         "battery",
         "network",
-        "clock",
+        "clock"
-        "custom/separator_invisible"
     ],
+    "tray": {
+        "icon-size": 18,
+        "spacing": 10,
+        "icons": {
+            "blueman": "bluetooth",
+            "TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png"
+        }
+    },
     "hyprland/workspaces": {
         "disable-scroll": true,
         "all-outputs": false,
@@ -128,8 +136,8 @@
         "format-muted": "{format_source} ",
         "format-bluetooth": "{format_source} 󰂰",
         "format-bluetooth-muted": "{format_source} 󰂲",
-        "format-source": "",
+        "format-source": "󰍬",
-        "format-source-muted": "",
+        "format-source-muted": "󰍭",
         "on-click": "pwvucontrol"
     },
     "pulseaudio/slider": {

waybar/run.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+DIR="$HOME/.config/waybar"
+
+TOP_CONFIG="$DIR/config_top.jsonc"
+TOP_STYLE="$DIR/style/style_top.css"
+
+BOTTOM_CONFIG="$DIR/config_bottom.jsonc"
+BOTTOM_STYLE="$DIR/style/style_bottom.css"
+
+kill_bars() {
+    if pgrep waybar > /dev/null; then
+        pkill waybar
+        return 0
+    fi
+    return 1
+}
+
+run_bars() {
+    waybar -c "$TOP_CONFIG" -s "$TOP_STYLE" &
+    waybar -c "$BOTTOM_CONFIG" -s "$BOTTOM_STYLE" &
+    return 0
+}
+
+case "$1" in
+    "")
+        kill_bars 
+        run_bars
+        ;;
+    toggle)
+        kill_bars
+        if [ $? -eq 1 ]; then
+            run_bars
+        fi
+        ;;
+    kill)
+        kill_bars
+        ;;
+    *)
+        echo "Usage: $0 [toggle | kill]"
+        exit 1
+        ;;
+esac

waybar/style/colors.css

@@ -5,7 +5,7 @@
 @define-color border-color rgba(90, 104, 115, 0.8); /* Matches --noti-border-color */
 @define-color text-primary #ffffff;
 @define-color text-secondary alpha(@text-primary,.2);
-@define-color accent-color #D58399;
+@define-color accent #E83C82;
 @define-color attention #FFFF00;
 @define-color warning #FFAA00;
 @define-color danger #FF0000;

waybar/style/style_bottom.css

@@ -0,0 +1,366 @@
+/* --------------------------------------------------------------------------
+   IMPORTS & GLOBAL STYLES
+   -------------------------------------------------------------------------- */
+@import "colors.css";
+
+/* --------------------------------------------------------------------------
+   BASE CONTAINER
+   -------------------------------------------------------------------------- */
+window#waybar {
+  /* Layout & Box Model */
+  /* border: 1px solid @border-color; */
+  /* border-bottom: none; */
+  /* border-radius: 10px 10px 0 0; */
+  
+  /* Typography */
+  font-family: "Iosevka Nerd Font Propo";
+  font-size: 15px;
+  
+  /* Colors */
+  background-color: transparent;
+  /* color: @text-primary; */
+  
+  /* Effects & Transitions */
+  /* transition-property: background-color; */
+  /* transition-duration: 0.5s; */
+}
+
+/* Window States */
+window#waybar.hidden {
+  opacity: 0.2;
+}
+
+window#waybar.termite {
+  background-color: #3F3F3F;
+}
+
+window#waybar.chromium {
+  background-color: #000000;
+  border: none;
+}
+
+/* --------------------------------------------------------------------------
+   MODULE COMMON STYLES
+   -------------------------------------------------------------------------- */
+/* Common styling applied to all modules */
+#mpd,
+#custom-pomodoro,
+#clock,
+#battery,
+#network,
+#pulseaudio,
+#pulseaudio-slider,
+#custom-separator,
+#custom-launcher,
+#tray,
+#taskbar,
+#cpu,
+#memory,
+#temperature,
+#scratchpad {
+  padding: 0 10px;
+  color: @text-primary;
+  transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
+}
+
+/* --------------------------------------------------------------------------
+   WORKSPACES
+   -------------------------------------------------------------------------- */
+#workspaces {
+  font-size: 18px;
+  background-color: transparent;
+}
+
+#workspaces button {
+  padding: 0 6px;
+  min-width: 20px;
+  background-color: transparent;
+  color: alpha(@accent, 0.5);
+  border: none;
+  border-radius: 0;
+}
+
+/* Workspace States */
+#workspaces button.empty {
+  color: @text-secondary;
+}
+
+#workspaces button.active.hosting-monitor {
+  color: @accent;
+  text-shadow: 0px 0px 8px @accent;
+  animation: hover 0.8s 1;
+}
+
+#workspaces button.urgent {
+  color: @attention;
+  font-weight: 700;
+  text-shadow: 0px 0px 8px @attention;
+  transition: color 0.5s, box-shadow 0.5s, background 0.5s;
+}
+
+#workspaces button:hover {
+  color: @foreground;
+  background-color: transparent;
+  text-shadow: 0px 0px 2px rgba(233, 99, 117, 1);
+}
+
+/* --------------------------------------------------------------------------
+   TASKBAR
+   -------------------------------------------------------------------------- */
+#taskbar {
+    padding-left: 0;
+}
+
+#taskbar button {
+    padding: 0;
+    min-height: 30px;
+    min-width: 40px;
+}
+
+#taskbar image {
+    min-width: 40px;
+    min-height: 20px;
+}
+
+#taskbar.empty {
+    padding-right: 0;
+}
+
+/* --------------------------------------------------------------------------
+   CPU
+   -------------------------------------------------------------------------- */
+#cpu {
+    font-size: 20px;
+}
+
+/* --------------------------------------------------------------------------
+   MEMORY
+   -------------------------------------------------------------------------- */
+#memory {
+    font-size: 20px;
+    padding: 0;
+}
+
+/* --------------------------------------------------------------------------
+   TEMPERATURE
+   -------------------------------------------------------------------------- */
+#temperature {
+    font-size: 20px;
+}
+
+/* --------------------------------------------------------------------------
+   SIDE PANEL GROUPS
+   -------------------------------------------------------------------------- */
+.modules-left, .modules-center, .modules-right {
+  /* Layout & Box Model */
+  border: 1px solid @border-color;
+  border-radius: 12px;
+   
+  /* Colors */
+  background-color: @bg-panel;
+  /* color: @text-primary; */
+  
+  /* Effects & Transitions */
+  /* transition-property: background-color; */
+  /* transition-duration: 0.5s; */
+}
+
+.modules-left {
+}
+
+.modules-right {
+}
+
+/* --------------------------------------------------------------------------
+   AUDIO CONTROL MODULES
+   -------------------------------------------------------------------------- */
+#pulseaudio {
+  padding-right: 0;
+  border-right: none;
+}
+
+#pulseaudio-slider slider {
+  min-height: 0px;
+  min-width: 0px;
+  opacity: 0;
+  background-image: none;
+  border: none;
+  box-shadow: none;
+}
+
+#pulseaudio-slider trough {
+  min-height: 10px;
+  min-width: 25px;
+  border-radius: 5px;
+  background: alpha(@text-primary, 0.2);
+}
+
+#pulseaudio-slider highlight {
+  min-width: 10px;
+  border-radius: 5px;
+  background: @text-primary;
+}
+
+/* --------------------------------------------------------------------------
+   CUSTOM MODULES
+   -------------------------------------------------------------------------- */
+#custom-pomodoro {
+  color: @text-secondary;
+  border-radius: 0 0 10px 10px;
+}
+
+#custom-launcher {
+    font-size: 23px;
+    padding-left: 0;
+}
+
+/* --------------------------------------------------------------------------
+   STATE-BASED STYLES
+   -------------------------------------------------------------------------- */
+
+/* TASKBAR STATES */
+#taskbar button {
+    transition: none;
+}
+
+#taskbar button.active {
+    background: radial-gradient(circle, alpha(@accent, 1) 0%, alpha(@accent, 1) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 25, 0) 100%);
+    transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+/* POMODORO STATES */
+#custom-pomodoro.work {
+  color: @accent;
+}
+
+#custom-pomodoro.break {
+  color: @success;
+  text-shadow: 0px 0px 4px rgba(0, 255, 0, 1);
+}
+
+#custom-pomodoro.pause {
+  color: @attention;
+  text-shadow: 0px 0px 4px @attention;
+}
+
+/* MPD STATES */
+#mpd {
+  font-weight: 700;
+  transition: color 2s, background 2s;
+}
+
+#mpd.playing {
+  color: @accent;
+}
+
+#mpd.stopped {
+  color: transparent;
+  background: transparent;
+}
+
+#mpd.paused {
+  font-weight: normal;
+  color: @text-secondary;
+}
+
+/* BATTERY STATES */
+#battery.charging,
+#battery.plugged {
+  color: @success;
+  text-shadow: 0px 0px 8px @success;
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+#battery.warning:not(.charging) {
+  color: @warning;
+  text-shadow: 0px 0px 8px @warning;
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+#battery.critical:not(.charging) {
+  color: @danger;
+  text-shadow: 0px 0px 8px @danger;
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+/* CPU && MEMORY STATES */
+#cpu.s1, #memory.s1, #temperature.s1 {
+  color: @text-primary;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s2, #memory.s2 {
+  color: @text-primary;
+  text-shadow: 0px 0px 2px @text-primary;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s3, #memory.s3 {
+  color: @attention;
+  text-shadow: 0px 0px 2px @attention;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s4, #memory.s4, #temperature.warning {
+  color: @warning;
+  text-shadow: 0px 0px 2px @warning;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+#cpu.s5, #memory.s5, #temperature.critical {
+  color: @danger;
+  text-shadow: 0px 0px 2px @danger;
+  transition: color 0.3s, text-shadow 0.3s, background 0.3s;
+}
+
+/* --------------------------------------------------------------------------
+   HOVER EFFECTS
+   -------------------------------------------------------------------------- */
+#mpd.playing:hover,
+#mpd.paused:hover,
+#clock:hover,
+#battery:hover,
+#network:hover,
+#pulseaudio:hover,
+#custom-pomodoro:hover,
+#custom-launcher:hover,
+#scratchpad:hover,
+#tray:hover,
+#taskbar:hover,
+#cpu:hover,
+#memory:hover
+#temperature:hover {
+  color: @accent;
+  text-shadow: 0px 0px 8px @accent;
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+#pulseaudio-slider:hover highlight {
+  background: @accent;
+  box-shadow: 0px 0px 8px @accent;
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+/* --------------------------------------------------------------------------
+   LAYOUT UTILITIES
+   -------------------------------------------------------------------------- */
+#window,
+#workspaces {
+  margin: 0 0px;
+}
+
+.modules-left > widget:first-child > #workspaces {
+  margin-left: 0;
+}
+
+.modules-right > widget:last-child > #workspaces {
+  margin-right: 0;
+}
+
+/* --------------------------------------------------------------------------
+   ANIMATIONS
+   -------------------------------------------------------------------------- */
+@keyframes hover {
+    0% { color: @text-primary; }
+    100% { color: @accent; }
+}

waybar/style/style_top.css

@@ -8,21 +8,21 @@
    -------------------------------------------------------------------------- */
 window#waybar {
   /* Layout & Box Model */
-  border: 1px solid @border-color;
+  /* border: 1px solid @border-color; */
-  border-top: none;
+  /* border-bottom: none; */
-  border-radius: 0 0 10px 10px;
+  /* border-radius: 10px 10px 0 0; */
   
   /* Typography */
   font-family: "Iosevka Nerd Font Propo";
   font-size: 15px;
   
   /* Colors */
-  background-color: @bg-panel;
+  background-color: transparent;
-  color: @text-primary;
+  /* color: @text-primary; */
   
   /* Effects & Transitions */
-  transition-property: background-color;
+  /* transition-property: background-color; */
-  transition-duration: 0.5s;
+  /* transition-duration: 0.5s; */
 }
 
 /* Window States */
@@ -51,7 +51,8 @@ window#waybar.chromium {
 #pulseaudio,
 #pulseaudio-slider,
 #custom-separator,
-#scratchpad {
+#scratchpad,
+#tray {
   padding: 0 10px;
   color: @text-primary;
   transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
@@ -69,7 +70,7 @@ window#waybar.chromium {
   padding: 0 6px;
   min-width: 20px;
   background-color: transparent;
-  color: alpha(@accent-color, 0.5);
+  color: alpha(@accent, 0.5);
   border: none;
   border-radius: 0;
 }
@@ -80,8 +81,8 @@ window#waybar.chromium {
 }
 
 #workspaces button.active.hosting-monitor {
-  color: @accent-color;
+  color: @accent;
-  text-shadow: 0px 0px 8px @accent-color;
+  text-shadow: 0px 0px 8px @accent;
   animation: hover 0.8s 1;
 }
 
@@ -101,14 +102,24 @@ window#waybar.chromium {
 /* --------------------------------------------------------------------------
    SIDE PANEL GROUPS
    -------------------------------------------------------------------------- */
+.modules-left, .modules-center, .modules-right {
+  /* Layout & Box Model */
+  border: 1px solid @border-color;
+  border-radius: 12px;
+   
+  /* Colors */
+  background-color: @bg-panel;
+  /* color: @text-primary; */
+  
+  /* Effects & Transitions */
+  /* transition-property: background-color; */
+  /* transition-duration: 0.5s; */
+}
+
 .modules-left {
-  border-left: none;
-  border-radius: 0 0 10px 0;
 }
 
 .modules-right {
-  border-right: none;
-  border-radius: 0 0 0 10px;
 }
 
 /* --------------------------------------------------------------------------
@@ -155,7 +166,7 @@ window#waybar.chromium {
 
 /* POMODORO STATES */
 #custom-pomodoro.work {
-  color: @accent-color;
+  color: @accent;
 }
 
 #custom-pomodoro.break {
@@ -175,7 +186,7 @@ window#waybar.chromium {
 }
 
 #mpd.playing {
-  color: @accent-color;
+  color: @accent;
 }
 
 #mpd.stopped {
@@ -219,15 +230,15 @@ window#waybar.chromium {
 #pulseaudio:hover,
 #custom-pomodoro:hover,
 #scratchpad:hover,
-#power-profiles-daemon:hover {
+#tray:hover {
-  color: @accent-color;
+  color: @accent;
-  text-shadow: 0px 0px 8px @accent-color;
+  text-shadow: 0px 0px 8px @accent;
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
 #pulseaudio-slider:hover highlight {
-  background: @accent-color;
+  background: @accent;
-  box-shadow: 0px 0px 8px @accent-color;
+  box-shadow: 0px 0px 8px @accent;
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
@@ -252,5 +263,5 @@ window#waybar.chromium {
    -------------------------------------------------------------------------- */
 @keyframes hover {
     0% { color: @text-primary; }
-    100% { color: @accent-color; }
+    100% { color: @accent; }
 }