fix(ags audio): misc fixes

nixosModules/ags/config/widgets/audio/main.tsx

@@ -24,23 +24,44 @@ export default () => {
             transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}
         >
 
-            <scrollable name="outputs" hscroll={Gtk.PolicyType.NEVER}>
+            <scrollable
+                name="outputs"
+                hscroll={Gtk.PolicyType.NEVER}
+
+                setup={(self) => setTimeout(() => {
+                    self.add((
                         <box vertical>
                             {bind(audio, 'speakers').as(Streams)}
                         </box>
-            </scrollable>
+                    ));
+                }, 1000)}
+            />
 
-            <scrollable name="inputs" hscroll={Gtk.PolicyType.NEVER}>
+            <scrollable
+                name="inputs"
+                hscroll={Gtk.PolicyType.NEVER}
+
+                setup={(self) => setTimeout(() => {
+                    self.add((
                         <box vertical>
                             {bind(audio, 'microphones').as(Streams)}
                         </box>
-            </scrollable>
+                    ));
+                }, 1000)}
+            />
 
-            <scrollable name="profiles" hscroll={Gtk.PolicyType.NEVER}>
+            <scrollable
+                name="profiles"
+                hscroll={Gtk.PolicyType.NEVER}
+
+                setup={(self) => setTimeout(() => {
+                    self.add((
                         <box vertical>
                             {bind(audio, 'devices').as(Profiles)}
                         </box>
-            </scrollable>
+                    ));
+                }, 1000)}
+            />
 
         </stack>
     ) as Widget.Stack;

nixosModules/ags/config/widgets/audio/profiles.tsx

@@ -5,7 +5,9 @@ import AstalWp from 'gi://AstalWp';
 import { ComboBoxText } from '../misc/subclasses';
 
 
-export default (devices: AstalWp.Device[]) => devices.map((device) => (
+export default (devices: AstalWp.Device[]) => devices
+    .sort((a, b) => a.description.localeCompare(b.description))
+    .map((device) => (
         <box className="stream" vertical>
 
             <label label={bind(device, 'description')} />
@@ -41,4 +43,4 @@ export default (devices: AstalWp.Device[]) => devices.map((device) => (
             />
 
         </box>
-));
+    ));

nixosModules/ags/config/widgets/audio/streams.tsx

@@ -10,7 +10,9 @@ import Separator from '../misc/separator';
 export default (streams: AstalWp.Endpoint[]) => {
     let group: RadioButton | undefined;
 
-    return streams.map((stream) => (
+    return streams
+        .sort((a, b) => a.description.localeCompare(b.description))
+        .map((stream) => (
             <box className="stream" vertical>
 
                 <box className="title">
@@ -19,8 +21,6 @@ export default (streams: AstalWp.Endpoint[]) => {
                         cursor="pointer"
                         css="margin-top: 1px;"
 
-                    active={bind(stream, 'isDefault')}
-
                         onRealize={(self) => {
                             if (!group) {
                                 group = self;
@@ -28,6 +28,11 @@ export default (streams: AstalWp.Endpoint[]) => {
                             else {
                                 self.group = group;
                             }
+
+                            self.active = stream.isDefault;
+                            self.hook(stream, 'notify::is-default', () => {
+                                self.active = stream.isDefault;
+                            });
                         }}
 
                         onButtonReleaseEvent={() => {