Eww: Modularized and improved CSS

modules/home/wayland/apps/eww/bar/modules/sys.yuck

@@ -4,38 +4,40 @@
 
 (deflisten battery :initial '{"visible":false,"percentage":0.0,"color":"#FFFFFF"}' "scripts/sys/battery")
 
-(defwidget sys []
-  (button
-    :onclick "${EWW_CMD} open --toggle sys"
-    (box
+(defwidget sys-mod []
+  (module
+    (button
       :class "module"
+      :onclick "${EWW_CMD} open --toggle sys"
+      (box
       :orientation "v"
-      (circular-progress
-        :value {EWW_CPU.avg}
-        :class "cpubar"
-        :thickness 6
-        (label :class "icon-text" :text "C"))
+        (circular-progress
+          :value {EWW_CPU.avg}
+          :class "cpubar"
+          :thickness 6
+          (label :class "icon-text" :text "C"))
 
-      (circular-progress
-        :value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
-        :class "gpubar"
-        :thickness 6
-        (label :class "icon-text" :text "G"))
+        (circular-progress
+          :value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
+          :class "gpubar"
+          :thickness 6
+          (label :class "icon-text" :text "G"))
 
-      (circular-progress
-        :value {100*memory.used/memory.total}
-        :class "membar"
-        :thickness 6
-        :tooltip "${memory.human.used} / ${memory.human.total}"
-        (label :class "icon-text" :text "M"))
+        (circular-progress
+          :value {100*memory.used/memory.total}
+          :class "membar"
+          :thickness 6
+          :tooltip "${memory.human.used} / ${memory.human.total}"
+          (label :class "icon-text" :text "M"))
 
-      (circular-progress
-        :value {battery.percentage}
-        :class "batbar"
-        :visible {battery.visible}
-        :style "color: ${battery.color};"
-        :thickness 6
-        (label :class "icon-text" :text "B"))
+        (circular-progress
+          :value {battery.percentage}
+          :class "batbar"
+          :visible {battery.visible}
+          :style "color: ${battery.color};"
+          :thickness 6
+          (label :class "icon-text" :text "B"))
+      )
     )
   )
 )