feat(bar): add speaker and microphone controls

widgets/bar/index.tsx

@@ -10,6 +10,7 @@ import { Tailscale } from "./tailscale";
 import { Time } from "./time";
 import { Tray } from "./tray";
 import { FocusedClient, WorkspaceButton } from "./workspace";
+import { Volume } from "./volume";
 
 export const WINDOW_NAME = "bar";
 
@@ -42,6 +43,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
           <GPU />
           <Profile />
           <Tailscale />
+          <Volume />
           <Battery />
           <Tray />
           <Time />

widgets/bar/volume.tsx

@@ -0,0 +1,36 @@
+import { createBinding } from "ags";
+import AstalWp from "gi://AstalWp";
+
+export const Volume = () => {
+  const { defaultSpeaker: speaker, defaultMicrophone: microphone } =
+    AstalWp.get_default()!;
+
+  const speakerIsMuted = createBinding(speaker, "mute");
+
+  return (
+    <>
+      <box cssClasses={["pill", "volume"]} spacing={5}>
+        <image
+          iconName={speakerIsMuted((val) =>
+            val ? "fa-speaker-muted-symbolic" : "fa-speaker-symbolic",
+          )}
+        />
+
+        <slider
+          widthRequest={100}
+          onChangeValue={({ value }) => speaker.set_volume(value)}
+          value={createBinding(speaker, "volume")}
+        />
+      </box>
+
+      <box cssClasses={["pill", "volume"]} spacing={5}>
+        <image iconName="fa-microphone-symbolic" />
+        <slider
+          widthRequest={100}
+          onChangeValue={({ value }) => microphone.set_volume(value)}
+          value={createBinding(microphone, "volume")}
+        />
+      </box>
+    </>
+  );
+};