feat: eww system status component

hypr-configs/hyprland/eww/assets/scss/_components.scss

@@ -61,3 +61,20 @@
     margin-bottom: 16px;
   }
 }
+
+.system-status {
+  .progress {
+    color: $accent;
+    background-color: $surface1;
+  }
+
+  .icon {
+    border-radius: 100%;
+    background-color: $surface0;
+
+    label {
+      font-family: "Symbols Nerd Font";
+      font-size: get-token(font-sizes, extra);
+    }
+  }
+}

hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss

@@ -68,25 +68,6 @@
   margin: 5px;
 }
 
-.circiconcontain {
-  border-radius: 70px;
-  background-color: $surface0;
-}
-
-.circiconcontain label {
-  font-family: "Symbols Nerd Font";
-  font-size: 30px;
-  min-width: 1em;
-  min-height: 1em;
-  border-radius: 70px;
-  color: $white0;
-}
-
-.circsys {
-  color: $accent;
-  background-color: $surface1;
-}
-
 .revcal {
   font-size: 13px;
 }

hypr-configs/hyprland/eww/eww.yuck

@@ -3,6 +3,7 @@
 (include "./src/-components/_helpers.yuck")
 (include "./src/-components/_separator.yuck")
 (include "./src/-components/_sliders.yuck")
+(include "./src/-components/_stats.yuck")
 
 (include "./src/-modules/_language.yuck")
 (include "./src/-modules/_system-tray.yuck")

hypr-configs/hyprland/eww/src/-components/_stats.yuck

@@ -0,0 +1,21 @@
+(defwidget SystemStatus [icon val]
+  (box
+    :class "system-status"
+    
+    (overlay
+      (circular-progress
+        :halign "center"
+        :valign "center"
+        :class "progress"
+        :thickness 40
+      :value val)
+      
+      (box
+        :class "icon"
+        :halign "center"
+        :valign "center"
+        :height 55
+        :width 55
+        (label :text icon)))
+  )
+)

hypr-configs/hyprland/eww/src/windows/_control-panel.yuck

@@ -6,8 +6,8 @@
     :valign "fill"
     :vexpand true
     
-    (User )
-    (chooser)
+    (User)
+    (SystemMonitor)
     ; (weather)
     
     ; (MediaPlayer :h 160 :permashow true)
@@ -144,18 +144,16 @@
           ))
       ))))
 
-(defwidget sysinfo []
-  (revealer
-    :reveal reveal5
-    :transition "slideup"
+(defwidget SystemMonitor []
   (box
     :orientation "h"
+    :class "panel-widget"
     :height 140
-      (systat :icon "󰻠" :val { EWW_CPU.avg })
-      (systat :icon "󰍛" :val { EWW_RAM.used_mem_perc })
-      (systat :icon "󰈐" :val { gpu })
-      (systat :icon "" :val { EWW_BATTERY.BAT0.capacity })
-    )))
+    (SystemStatus :icon "󰻠" :val { EWW_CPU.avg })
+    (SystemStatus :icon "󰍛" :val { EWW_RAM.used_mem_perc })
+    (SystemStatus :icon "󰈐" :val { gpu })
+    (SystemStatus :icon "" :val { EWW_BATTERY.BAT0.capacity })
+  ))
 
 (defwidget wmslider [name val onchange max reset]
   (box
@@ -180,22 +178,7 @@
       :style "padding: 0px 8px 0px 3px;"
     "")))
 
-(defwidget systat [icon val]
-  (overlay
-    (circular-progress
-      :halign "center"
-      :valign "center"
-      :class "circsys"
-      :thickness 40
-    :value val)
 
-    (box
-      :class "circiconcontain"
-      :halign "center"
-      :valign "center"
-      :height 55
-      :width 55
-      (label :text icon))))
 
 (defwidget User []
   (revealer