refactor(ags bt): add devices dynamically

nixosModules/ags/config/widgets/bluetooth/_index.scss

@@ -5,15 +5,15 @@
     margin-top: 0;
 
     .toggle-button {
-        background-color: colors.$window_bg_color;
+        padding: 4px;
+        min-width: 30px;
+        min-height: 30px;
 
         transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 
         box-shadow: 2px 1px 2px colors.$accent-color;
-
-        padding: 4px;
-
         margin: 4px 4px 4px 4px;
+        background-color: colors.$window_bg_color;
 
         &.active {
             box-shadow: 0 0 0 white;

nixosModules/ags/config/widgets/bluetooth/device.tsx

@@ -1,12 +1,17 @@
-import { bind } from 'astal';
+import { bind, idle } from 'astal';
 import { Gtk, Widget } from 'astal/gtk3';
+import { register } from 'astal/gobject';
 
 import AstalBluetooth from 'gi://AstalBluetooth';
 
 import Separator from '../misc/separator';
 
 
-export default (dev: AstalBluetooth.Device) => {
+@register()
+export default class DeviceWidget extends Widget.Revealer {
+    readonly dev: AstalBluetooth.Device;
+
+    constructor({ dev }: { dev: AstalBluetooth.Device }) {
         const rev = (
             <revealer
                 transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
@@ -48,10 +53,22 @@ export default (dev: AstalBluetooth.Device) => {
             </button>
         );
 
-    return (
+        super({
+            revealChild: false,
+            transitionType: Gtk.RevealerTransitionType.SLIDE_DOWN,
+
+            child: (
                 <box vertical>
                     {button}
                     {rev}
                 </box>
-    );
+            ),
+        });
+
+        this.dev = dev;
+
+        this.connect('realize', () => idle(() => {
+            this.revealChild = true;
+        }));
+    };
 };

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

@@ -12,6 +12,45 @@ import DeviceWidget from './device';
 export default () => {
     const bluetooth = AstalBluetooth.get_default();
 
+    const deviceList = (
+        <scrollable
+            className="list"
+
+            css="min-height: 200px;"
+            hscroll={Gtk.PolicyType.NEVER}
+            vscroll={Gtk.PolicyType.AUTOMATIC}
+        >
+            <box
+                vertical
+                setup={(self) => {
+                    self.children = bluetooth.devices
+                        .filter((dev) => dev.name)
+                        .map((dev) => <DeviceWidget dev={dev} />);
+
+                    self.hook(bluetooth, 'device-added', (_, dev) => {
+                        if (dev.name) {
+                            self.add(<DeviceWidget dev={dev} />);
+                        }
+                    });
+
+                    self.hook(bluetooth, 'device-removed', (_, dev) => {
+                        const children = self.children as DeviceWidget[];
+                        const devWidget = children.find((ch) => ch.dev === dev);
+
+                        if (devWidget) {
+                            devWidget.revealChild = false;
+
+                            setTimeout(() => {
+                                devWidget.destroy();
+                            }, devWidget.transitionDuration + 100);
+                        }
+                    });
+                }}
+            >
+            </box>
+        </scrollable>
+    );
+
     return (
         <box
             className="bluetooth widget"
@@ -53,15 +92,13 @@ export default () => {
                         }
                     }}
                 >
-                    <icon icon="emblem-synchronizing-symbolic" css="font-size: 20px;" />
+                    <icon icon="emblem-synchronizing-symbolic" css="font-size: 30px;" />
                 </ToggleButton>
             </centerbox>
 
             <Separator size={8} vertical />
 
-            {bind(bluetooth, 'devices').as((devices) => devices
-                .filter((dev) => dev.name)
-                .map((dev) => DeviceWidget(dev)))}
+            {deviceList}
         </box>
     );
 };