✨ ags(control-center/pages): rename page mixer to sound, add default endpoint options, add microphone page

ags/widget/control-center/Sliders.ts

@@ -2,7 +2,8 @@ import { bind } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import { Wireplumber } from "../../scripts/volume";
 import { Pages } from "./Pages";
-import { PageMixer } from "./pages/Mixer";
+import { PageSound } from "./pages/Sound";
+import { PageMicrophone } from "./pages/Microphone";
 
 export function Sliders() {
     const slidersPages = new Pages();
@@ -33,7 +34,7 @@ export function Sliders() {
                         image: new Widget.Icon({
                             icon: "go-next-symbolic",
                         } as Widget.IconProps),
-                        onClick: (_) => slidersPages.toggle(PageMixer())
+                        onClick: (_) => slidersPages.toggle(PageSound())
                     } as Widget.ButtonProps)
                 ])
             } as Widget.BoxProps),
@@ -52,7 +53,14 @@ export function Sliders() {
                         value: bind(source, "volume").as((vol) => Math.floor(vol * 100)),
                         max: Wireplumber.getDefault().getMaxSourceVolume(),
                         onDragged: (slider) => source.volume = slider.value / 100
-                    } as Widget.SliderProps)
+                    } as Widget.SliderProps),
+                    new Widget.Button({
+                        className: "more",
+                        image: new Widget.Icon({
+                            icon: "go-next-symbolic",
+                        } as Widget.IconProps),
+                        onClick: (_) => slidersPages.toggle(PageMicrophone())
+                    } as Widget.ButtonProps)
                 ])
             } as Widget.BoxProps),
             slidersPages

ags/widget/control-center/pages/Microphone.ts

@@ -0,0 +1,35 @@
+import { bind } from "astal";
+import { Page, PageButton, PageProps } from "./Page";
+import AstalWp from "gi://AstalWp?version=0.1";
+import { Wireplumber } from "../../../scripts/volume";
+import { Astal, Widget } from "astal/gtk3";
+import { tr } from "../../../i18n/intl";
+
+
+export function PageMicrophone(): Page {
+    return new Page({
+        id: "microphone",
+        title: tr("control_center.pages.microphone.title"),
+        description: tr("control_center.pages.microphone.description"),
+        children: bind(Wireplumber.getWireplumber(), "endpoints").as((endpoints) => [
+            new Widget.Label({
+                className: "sub-header",
+                label: tr("devices"),
+                setup: (self) => self.set_alignment(0, .5)
+            } as Widget.LabelProps),
+            ...endpoints.filter(ep => ep.mediaClass === AstalWp.MediaClass.AUDIO_MICROPHONE).map((ep) =>
+                PageButton({
+                    className: bind(ep, "isDefault").as(isDefault => isDefault ? "default" : ""),
+                    icon: Astal.Icon.lookup_icon(ep.icon) ? ep.icon : "audio-input-microphone-symbolic",
+                    title: ep.name ?? "Microphone",
+                    onClick: () => ep.set_is_default(true),
+                    endWidget: new Widget.Icon({
+                        icon: "object-select-symbolic",
+                        visible: bind(ep, "isDefault"),
+                        css: "font-size: 18px;"
+                    } as Widget.IconProps)
+                })
+            )
+        ])
+    } as PageProps);
+}

ags/widget/control-center/pages/Sound.ts

@@ -1,17 +1,40 @@
-import { Page, PageProps } from "./Page";
+import { Page, PageButton, PageProps } from "./Page";
 import { bind } from "astal";
-import { Gtk, Widget } from "astal/gtk3";
+import { Astal, Gtk, Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp";
 import { getAppIcon } from "../../../scripts/apps";
 import { Wireplumber } from "../../../scripts/volume";
 import { tr } from "../../../i18n/intl";
 
-export function PageMixer(): Page {
+export function PageSound(): Page {
     return new Page({
-        id: "mixer",
+        id: "sound",
-        title: tr("control_center.pages.mixer.title"),
+        title: tr("control_center.pages.sound.title"),
-        description: tr("control_center.pages.mixer.description"),
+        description: tr("control_center.pages.sound.description"),
         children: bind(Wireplumber.getWireplumber(), "endpoints").as((endpoints) => [
+            new Widget.Label({
+                className: "sub-header",
+                label: tr("devices"),
+                setup: (self) => self.set_alignment(0, .5)
+            } as Widget.LabelProps),
+            ...endpoints.filter(ep => ep.mediaClass === AstalWp.MediaClass.AUDIO_SPEAKER).map((ep) =>
+                PageButton({
+                    className: bind(ep, "isDefault").as(isDefault => isDefault ? "default" : ""),
+                    icon: Astal.Icon.lookup_icon(ep.icon) ? ep.icon : "audio-card-symbolic",
+                    title: ep.name ?? "Speaker",
+                    onClick: () => ep.set_is_default(true),
+                    endWidget: new Widget.Icon({
+                        icon: "object-select-symbolic",
+                        visible: bind(ep, "isDefault"),
+                        css: "font-size: 18px;"
+                    } as Widget.IconProps)
+                })
+            ),
+            new Widget.Label({
+                className: "sub-header",
+                label: tr("apps"),
+                setup: (self) => self.set_alignment(0, .5)
+            } as Widget.LabelProps),
             ...endpoints.filter((ep) => ep.mediaClass === AstalWp.MediaClass.AUDIO_STREAM ||
                 ep.mediaClass === AstalWp.MediaClass.VIDEO_STREAM).map((ep) => 
                     new Widget.EventBox({