ags: add volume icon

modules/home/ags/style/main.scss

@@ -1,4 +1,4 @@
 @import "bar.scss";
-@import "workspaces.scss";
-@import "slider.scss";
 @import "screen-corners.scss";
+@import "workspaces.scss";
+@import "volume.scss";

modules/home/ags/style/volume.scss

@@ -0,0 +1,18 @@
+.slider {
+  min-width: 10em;
+
+  slider {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  trough {
+    min-height: 1em;
+    background-color: #{"@scrollbar_outline_color"};
+
+    &,
+    highlight {
+      border-radius: 2em;
+    }
+  }
+}

modules/home/ags/style/workspaces.scss

@@ -3,11 +3,11 @@
     min-width: 0em;
     min-height: 0.5em;
     border-radius: 2em;
-    color: #{"@view_color"};
+    background-color: #{"@scrollbar_outline_color"};
 
     &.active {
       min-width: 1em;
-      background-color: #{"@view_fg_color"};
+      background-color: #{"@accent_color"};
     }
   }
 }

modules/home/ags/widget/Bar.ts

@@ -1,6 +1,6 @@
 import Workspaces from "./Workspaces";
 import Clock from "./Clock";
-import VolumeSlider from "./VolumeSlider";
+import Volume from "./Volume";
 import PowerMenu from "./PowerMenu";
 
 export const Start = () =>
@@ -22,7 +22,7 @@ export const End = () =>
     hexpand: true,
     hpack: "end",
     spacing: 10,
-    children: [VolumeSlider(), PowerMenu()],
+    children: [Volume(), PowerMenu()],
   });
 
 export const Bar = (monitor = 0) =>

modules/home/ags/widget/Volume.ts

@@ -0,0 +1,35 @@
+const audio = await Service.import("audio");
+
+export enum Type {
+  Speaker = "speaker",
+  Microphone = "microphone",
+}
+
+export const VolumeSlider = (type = Type.Speaker) =>
+  Widget.Slider({
+    className: "slider",
+    hexpand: true,
+    drawValue: false,
+
+    onChange: ({ value }) => (audio[type].volume = value),
+    value: audio[type].bind("volume"),
+  });
+
+function getIcon(volume: number) {
+  const icons = ["muted", "low", "medium", "high", "overamplified"];
+  const i = Math.ceil(volume * (icons.length - 1));
+  return `audio-volume-${icons[i]}-symbolic`;
+}
+
+export const VolumeIcon = (type = Type.Speaker) =>
+  Widget.Icon({
+    icon: audio[type].bind("volume").as((v) => getIcon(v)),
+  });
+
+export const Volume = (type = Type.Speaker) =>
+  Widget.Box({
+    className: "volume-slider",
+    children: [VolumeIcon(type), VolumeSlider(type)],
+  });
+
+export default Volume;