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,57 +1,74 @@
-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()
-    const rev = (
+export default class DeviceWidget extends Widget.Revealer {
-        <revealer
+    readonly dev: AstalBluetooth.Device;
-            transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
-        >
-            <box>
-                TODO: add buttons here
-            </box>
-        </revealer>
-    ) as Widget.Revealer;
 
-    const button = (
+    constructor({ dev }: { dev: AstalBluetooth.Device }) {
-        <button
+        const rev = (
-            onButtonReleaseEvent={() => {
+            <revealer
-                rev.revealChild = !rev.revealChild;
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
-            }}
+            >
-        >
+                <box>
-            <box>
+                    TODO: add buttons here
-                <icon
+                </box>
-                    icon={bind(dev, 'connected').as((isConnected) => isConnected ?
+            </revealer>
-                        'check-active-symbolic' :
+        ) as Widget.Revealer;
-                        'check-mixed-symbolic')}
 
-                    css={bind(dev, 'paired').as((isPaired) => isPaired ?
+        const button = (
-                        '' :
+            <button
-                        'opacity: 0;')}
+                onButtonReleaseEvent={() => {
-                />
+                    rev.revealChild = !rev.revealChild;
+                }}
+            >
+                <box>
+                    <icon
+                        icon={bind(dev, 'connected').as((isConnected) => isConnected ?
+                            'check-active-symbolic' :
+                            'check-mixed-symbolic')}
 
-                <Separator size={8} />
+                        css={bind(dev, 'paired').as((isPaired) => isPaired ?
+                            '' :
+                            'opacity: 0;')}
+                    />
 
-                <icon
+                    <Separator size={8} />
-                    icon={bind(dev, 'icon').as((iconName) =>
-                        iconName ? `${iconName}-symbolic` : 'help-browser-symbolic')}
-                />
 
-                <Separator size={8} />
+                    <icon
+                        icon={bind(dev, 'icon').as((iconName) =>
+                            iconName ? `${iconName}-symbolic` : 'help-browser-symbolic')}
+                    />
 
-                <label label={bind(dev, 'name')} />
+                    <Separator size={8} />
-            </box>
-        </button>
-    );
 
-    return (
+                    <label label={bind(dev, 'name')} />
-        <box vertical>
+                </box>
-            {button}
+            </button>
-            {rev}
+        );
-        </box>
+
-    );
+        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
+            {deviceList}
-                .filter((dev) => dev.name)
-                .map((dev) => DeviceWidget(dev)))}
         </box>
     );
 };