Add sound module to eww bar

.config/eww/templates/bar/eww.scss

@@ -1,4 +1,5 @@
 @import "$base_dir/modules/workspaces.scss";
+@import "$base_dir/modules/sound.scss";
 @import "$base_dir/modules/clock.scss";
 @import "$base_dir/modules/weather.scss";
 @import "$base_dir/modules/widget.scss";

.config/eww/templates/bar/modules/sound.scss

@@ -0,0 +1,12 @@
+@import "$base_dir/variables.scss";
+
+.volume-widget {
+        padding: .3rem;
+        margin: .3rem;
+        background-color: $black;
+        border-radius: 4px;
+}
+
+.volume-icon {
+        padding-right: .8rem;
+}

.config/eww/templates/bar/modules/sound.yuck

@@ -0,0 +1,20 @@
+(deflisten volume
+        :initial `{"value": 100, "is_muted": false}`
+        "$home/.config/eww/scripts/get-volume")
+
+(defwidget volume-widget[]
+        (box
+                :class "volume-widget"
+                (volume-icon)
+                (volume-text)))
+
+(defwidget volume-text[]
+        (box
+                :class "volume-icon"
+                :orientation "horizontal"
+                (label :text "${volume.value}")))
+
+(defwidget volume-icon[]
+        (label :text {volume.is_muted == true ? "󰝟" :
+                volume.value <= 33 ? "󰕿" :
+                volume.value <= 66 ? "󰖀" : "󰕾"}))

.config/eww/templates/bar/modules/widgets-panel.yuck

@@ -1,3 +1,4 @@
+(include "$base_dir/modules/sound.yuck")
 (include "$base_dir/modules/clock.yuck")
 (include "$base_dir/modules/weather.yuck")
 
@@ -5,5 +6,6 @@
         (box
                 :halign "end"
                 :space-evenly false
+                (volume-widget)
                 (weather-widget)
                 (clock)))