Add eww

.config/eww/eww.scss

@@ -0,0 +1,103 @@
+@import "colors.scss";
+
+* {
+  font-family: 'JetBrainsMono NF';
+  font-size: 13px;
+}
+
+.bar, tooltip {
+  background-image: linear-gradient(160deg, $background1, $background2), linear-gradient(160deg, $accent1, $accent2);
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+}
+
+.bar {
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+}
+
+.bar > * > *:nth-child(even) {
+  color: $accent1;
+  scale slider {
+    background-color: $disabled;
+  }
+  scale trough {
+    background-color: $background1;
+  }
+  scale trough highlight {
+    background-color: $accent1;
+  }
+}
+
+.bar > * > *:nth-child(odd) {
+  color: $accent2;
+  scale slider {
+    background-color: $disabled2;
+  }
+  scale trough {
+    background-color: $background2;
+  }
+  scale trough highlight {
+    background-color: $accent2;
+  }
+}
+
+label {
+  padding: 6px;
+}
+
+scale {
+  padding: 0 4px;
+}
+
+scale slider {
+  min-height: 1px;
+  min-width: 1px;
+}
+
+scale trough {
+  min-height: 6px;
+  min-width: 60px;
+}
+
+progressbar trough {
+  border: 2px solid $accent2;
+  border-radius: 16px;
+}
+
+progress {
+  background-color: $accent1;
+  border-radius: 16px;
+}
+
+circular-progress > * {
+  margin: 1px;
+  font-size: 11px;
+}
+
+tooltip {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+calendar.selected {
+  background-color: $accent2;
+}
+
+.alert {
+  background-color: rgba($bad, 0.33);
+}
+
+.crit {
+  background-color: rgba($bad, 0.66);
+  animation-name: blink;
+  animation-duration: 1.5s;
+  animation-timing-function: steps(2, start);
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink {
+  to {
+    background-color: transparent;
+  }
+}

.config/eww/eww.yuck

@@ -0,0 +1,111 @@
+; Brightness
+(defpoll brightness :interval "1m" "cat /sys/class/backlight/amdgpu_bl1/brightness")
+(defvar brightness-icons '["", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]')
+(defvar brightness-slide false)
+
+; Battery
+(defvar battery-icons '{"Full": {"10": "󰂄"}, "Charging": ["󰢟", "󰢜", "󰂆", "󰂇", "󰂈", "󰢝", "󰂉", "󰢞", "󰂊", "󰂋", "󰂅"], "Discharging": ["󰂎", "󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"]}')
+
+; DateTime
+(defpoll datetime :interval "1s" "date +'%a %e %b %X'")
+(defpoll month :interval "1m" "date +'%m'")
+(defpoll day :interval "1m" "date +'%d'")
+(defpoll year :interval "1m" "date +'%Y'")
+
+
+
+; Widgets
+(defwidget bar-left []
+  (box :halign "start"
+       :space-evenly false
+  )
+)
+
+(defwidget bar-right []
+  (box :halign "end"
+       :space-evenly false
+    (brightness :brightness {brightness})
+    (battery :percent {EWW_BATTERY.BAT0.capacity}
+             :status {EWW_BATTERY.BAT0.status}
+    )
+    (ram)
+    (cpu-temp)
+    (label :text " ${round(EWW_CPU.avg, 0)}%"
+           :tooltip " ${arraylength(EWW_CPU.cores)} cores available"
+    )
+    (tooltip
+      (calendar :day {day}
+                :month {month}
+                :year {year}
+      )
+      (label :text "󰥔 ${datetime}")
+    )
+  )
+)
+
+(defwidget brightness [brightness]
+  (eventbox :onhover "${EWW_CMD} update brightness-slide=true"
+            :onhoverlost "${EWW_CMD} update brightness-slide=false"
+    (box :space-evenly false
+      (label :text "${brightness-icons[round(brightness / 18.2, 0)]} ${round(brightness /255 * 100, 0)}%")
+      (revealer :transition "slideleft"
+                :reveal {brightness-slide}
+        (scale :value {brightness}
+               :min 0
+               :max 255
+               :onchange "echo {} > /sys/class/backlight/amdgpu_bl1/brightness; eww update brightness={}"
+        )
+      )
+    )
+  )
+)
+
+(defwidget battery [percent status]
+  (label :text "${battery-icons[status][round(percent / 10, 0)]} ${percent}%"
+         :tooltip "${percent}% (${status})"
+         :class "${percent <= 30 ? percent <= 15 ? 'crit' : 'alert' : ''}"
+  )
+)
+
+(defwidget ram []
+  (label :text " ${round(EWW_RAM.used_mem / 1073741824, 2)}GiB"
+         :tooltip " ${round(EWW_RAM.used_mem / 1073741824, 2)}GiB out of ${round(EWW_RAM.total_mem / 1073741824, 2)}GiB used"
+  )
+)
+
+(defwidget threshold [val unit alert-val crit-val icon alert-icon crit-icon]
+  (label :text "${val < alert-val ? icon : (val < crit-val ? alert-icon : crit-icon)} ${round(val, 0)}${unit}"
+         :class "${val < alert-val ? '' : (val < crit-val ? 'alert' : 'crit')}"
+  )
+)
+
+(defwidget cpu-temp []
+  (threshold :val {EWW_TEMPS.K10TEMP_TCTL}
+             :unit "°C"
+             :alert-val 65
+             :crit-val 75
+             :icon "󱃃"
+             :alert-icon "󰔏"
+             :crit-icon "󰸁"
+  )
+)
+
+
+; Bar
+(defwidget bar []
+  (box
+    (bar-left)
+    (bar-right)
+  )
+)
+
+(defwindow bar :monitor 0
+               :geometry (geometry :x "0%"
+                                   :y "0%"
+                                   :width "100%"
+                                   :anchor "top center"
+                         )
+               :stacking "fg"
+               :exclusive true
+  (bar)
+)

.config/hypr/hyprland.d/bindings.conf

@@ -71,8 +71,8 @@ binde = , XF86AudioRaiseVolume, exec, swayosd-client --output-volume=raise
 binde = , XF86AudioLowerVolume, exec, swayosd-client --output-volume=lower
 binde = , XF86AudioMute, exec, swayosd-client --output-volume=mute-toggle
 binde = , XF86AudioMicMute, exec, swayosd-client --input-volume=mute-toggle
-bindel = , XF86MonBrightnessUp, exec, swayosd-client --brightness raise
+bindel = , XF86MonBrightnessUp, exec, swayosd-client --brightness raise; eww update brightness=$(cat /sys/class/backlight/amdgpu_bl1/brightness)
-bindel = , XF86MonBrightnessDown, exec, swayosd-client --brightness lower
+bindel = , XF86MonBrightnessDown, exec, swayosd-client --brightness lower; eww update brightness=$(cat /sys/class/backlight/amdgpu_bl1/brightness)
 
 # Media keys
 bindl = , XF86AudioPlay, exec, playerctl play-pause

README.md

@@ -14,7 +14,7 @@ cfg pull
 Required packages:
 
 ```
-paru -S blueman bottom cliphist fastfetch firefox git gnome-keyring grim hyprcursor hypridle hyprland hyprlock hyprpaper imagemagick jq kitty mako networkmanager network-manager-applet nm-connection-editor noto-fonts noto-fonts-cjk noto-fonts-emoji oh-my-zsh-git otf-font-awesome pacman-contrib pastel pavucontrol pipewire-alsa pipewire-jack pipewire-pulse polkit-gnome python-pywal python-pywalfox rose-pine-cursor rose-pine-hyprcursor slurp swayosd-git ttf-jetbrains-mono-nerd udiskie waybar wl-clipboard wlogout wofi xdg-desktop-portal-hyprland zoxide zsh zsh-autosuggestions
+paru -S blueman bottom cliphist eww fastfetch firefox git gnome-keyring grim hyprcursor hypridle hyprland hyprlock hyprpaper imagemagick jq kitty mako networkmanager network-manager-applet nm-connection-editor noto-fonts noto-fonts-cjk noto-fonts-emoji oh-my-zsh-git otf-font-awesome pacman-contrib pastel pavucontrol pipewire-alsa pipewire-jack pipewire-pulse polkit-gnome python-pywal python-pywalfox rose-pine-cursor rose-pine-hyprcursor slurp swayosd-git ttf-jetbrains-mono-nerd udiskie waybar wl-clipboard wlogout wofi xdg-desktop-portal-hyprland zoxide zsh zsh-autosuggestions
 ```
 
 Optional packages: