fix typings

widget/WirePlumber.tsx

@@ -7,13 +7,14 @@ const WirePlumber = function () {
   const audio = AstalWp.get_default()?.audio!;
 
   const speakers = bind(audio, "speakers");
+  const defaultSpeaker = speakers.as((speakers) =>
+    speakers.find((speaker) => speaker.is_default),
+  );
 
-  return speakers.as((speakers) => {
-    const defaultSpeaker = speakers.find((speaker) => speaker.is_default);
-    if (!defaultSpeaker) {
-      return <></>;
-    }
   return (
+    <>
+      {defaultSpeaker.as((defaultSpeaker) =>
+        defaultSpeaker ? (
           <menubutton
             onScroll={(_, __, dy) => {
               defaultSpeaker.set_volume(
@@ -37,22 +38,28 @@ const WirePlumber = function () {
             />
             <popover cssClasses={["WirePlumberMenu"]}>
               <box vertical>
-            {speakers.map((speaker) => (
+                {speakers.as((speakers) =>
+                  speakers.map((speaker) => (
                     <button
-                cssClasses={bind(speaker, "is_default").as((is_default) => [
+                      cssClasses={bind(speaker, "is_default").as(
-                  is_default ? "active" : "",
+                        (is_default) => [is_default ? "active" : ""],
-                ])}
+                      )}
                       cursor={Gdk.Cursor.new_from_name("pointer", null)}
                       onClicked={() => speaker.set_is_default(true)}
                     >
                       {speaker.description}
                     </button>
-            ))}
+                  )),
+                )}
               </box>
             </popover>
           </menubutton>
+        ) : (
+          <></>
+        ),
+      )}
+    </>
   );
-  });
 };
 
 export default WirePlumber;