wireplumber

style.scss

@@ -11,14 +11,16 @@ $rosewater: #f4dbd6;
 button {
   all: initial;
 }
+* {
+  font-family: JetBrainsMono Nerd Font;
+}
 
 window.Bar {
-  font-family: JetBrainsMono Nerd Font;
   background: transparent;
   font-weight: bold;
 
   > centerbox {
-    background: $base;
+    background: rgba($color: $base, $alpha: 0.75);
 
     > box {
       margin: 6px;
@@ -42,7 +44,6 @@ window.Bar {
 
   .Pywal {
     font-size: 18px;
-    text-align: center;
     padding: 4px 18px 4px 12px;
     border-radius: 8px;
     background: $surface0;
@@ -73,4 +74,29 @@ window.Bar {
     border-radius: 8px;
     background: $surface0;
   }
+
+  .Button-Active {
+    background: $rosewater;
+    color: $base;
+  }
+
+  .WirePlumberMenu {
+    contents {
+      all: initial;
+    }
+
+    arrow {
+      all: initial;
+    }
+
+    box {
+      padding: 12px;
+      border-radius: 8px;
+      background: rgba($color: $base, $alpha: 0.9);
+
+      & > * {
+        margin: 2px 0;
+      }
+    }
+  }
 }

widget/Bar.tsx

@@ -7,6 +7,7 @@ import OS from "./OS";
 import Pywal from "./Pywal";
 import Tray from "./Tray";
 import SwayNC from "./SwayNC";
+import WirePlumber from "./WirePlumber";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@@ -31,6 +32,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
         </box>
         <box halign={Gtk.Align.END}>
           <Pywal />
+          <WirePlumber />
           <Internet />
           <Calendar />
           <SwayNC />

widget/WirePlumber.tsx

@@ -0,0 +1,53 @@
+import { bind, derive } from "astal";
+import { Gdk } from "astal/gtk4";
+import AstalWp from "gi://AstalWp";
+
+const WirePlumber = function () {
+  const audio = AstalWp.get_default()?.audio!;
+
+  const speakers = bind(audio, "speakers");
+
+  return (
+    <menubutton>
+      {speakers.as((speakers) => {
+        const defaultSpeaker = speakers.find((speaker) => speaker.is_default);
+        if (!defaultSpeaker) {
+          return <></>;
+        }
+        return (
+          <label
+            cursor={Gdk.Cursor.new_from_name("pointer", null)}
+            label={bind(defaultSpeaker, "volume").as(
+              (volume) => `  ${Math.floor(volume * 100)}%`,
+            )}
+            cssClasses={["Button"]}
+            hasTooltip={true}
+            tooltipText={bind(defaultSpeaker, "description").as(
+              (description) => description,
+            )}
+          />
+        );
+      })}
+      <popover cssClasses={["WirePlumberMenu"]}>
+        <box vertical>
+          {speakers.as((speakers) =>
+            speakers.map((speaker) => (
+              <button
+                cssClasses={bind(speaker, "is_default").as((is_default) => [
+                  "Button",
+                  is_default ? "Button-Active" : "",
+                ])}
+                cursor={Gdk.Cursor.new_from_name("pointer", null)}
+                onClicked={() => speaker.set_is_default(true)}
+              >
+                {speaker.description}
+              </button>
+            )),
+          )}
+        </box>
+      </popover>
+    </menubutton>
+  );
+};
+
+export default WirePlumber;