ags: add volume slider

modules/home/ags/style/main.scss

@@ -1 +1,2 @@
 @import "bar.scss";
+@import "slider.scss";

modules/home/ags/style/slider.scss

@@ -0,0 +1,3 @@
+.slider {
+  min-width: 200px;
+}

modules/home/ags/widget/Bar.ts

@@ -1,10 +1,14 @@
 import GLib from "gi://GLib";
+import VolumeSlider from "./VolumeSlider";
 
 export const clock = Variable(GLib.DateTime.new_now_local(), {
-    poll: [1000, () => GLib.DateTime.new_now_local()],
-})
+  poll: [1000, () => GLib.DateTime.new_now_local()],
+});
 
-export const time = Utils.derive([clock], (c) => c.format("%B %d - %H:%M") ?? "")
+export const time = Utils.derive(
+  [clock],
+  (c) => c.format("%B %d - %H:%M") ?? "",
+);
 
 export const Start = () =>
   Widget.Box({
@@ -17,15 +21,15 @@ export const Center = () =>
   Widget.Box({
     hpack: "center",
     child: Widget.Label({
-			label: time.bind(),
-		})
+      label: time.bind(),
+    }),
   });
 
 export const End = () =>
   Widget.Box({
     hexpand: true,
     hpack: "end",
-    child: Widget.Icon("nixos-symbolic"),
+    child: VolumeSlider(),
   });
 
 export const Bar = (monitor = 0) =>

modules/home/ags/widget/VolumeSlider.ts

@@ -0,0 +1,20 @@
+const audio = await Service.import("audio");
+
+export const VolumeSlider = (type: "speaker" | "microphone" = "speaker") =>
+  Widget.Box({
+    children: [
+			Widget.Label({
+				label: audio[type].bind("volume").transform(v => Math.round(v * 100).toString()),
+			}),
+      Widget.Slider({
+        className: "slider",
+        hexpand: true,
+        drawValue: false,
+
+        onChange: ({ value }) => (audio[type].volume = value),
+        value: audio[type].bind("volume"),
+      }),
+    ],
+  });
+
+export default VolumeSlider;