diff --git a/nixosModules/ags/config/widgets/bluetooth/_index.scss b/nixosModules/ags/config/widgets/bluetooth/_index.scss
index b747edd1..2b66102a 100644
--- a/nixosModules/ags/config/widgets/bluetooth/_index.scss
+++ b/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;
diff --git a/nixosModules/ags/config/widgets/bluetooth/device.tsx b/nixosModules/ags/config/widgets/bluetooth/device.tsx
index 62c11d17..08579bf7 100644
--- a/nixosModules/ags/config/widgets/bluetooth/device.tsx
+++ b/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) => {
- const rev = (
-
-
- TODO: add buttons here
-
-
- ) as Widget.Revealer;
+@register()
+export default class DeviceWidget extends Widget.Revealer {
+ readonly dev: AstalBluetooth.Device;
- const button = (
-
+ );
+
+ super({
+ revealChild: false,
+ transitionType: Gtk.RevealerTransitionType.SLIDE_DOWN,
+
+ child: (
+
+ {button}
+ {rev}
+
+ ),
+ });
+
+ this.dev = dev;
+
+ this.connect('realize', () => idle(() => {
+ this.revealChild = true;
+ }));
+ };
};
diff --git a/nixosModules/ags/config/widgets/bluetooth/main.tsx b/nixosModules/ags/config/widgets/bluetooth/main.tsx
index e8d6c8aa..c077e05e 100644
--- a/nixosModules/ags/config/widgets/bluetooth/main.tsx
+++ b/nixosModules/ags/config/widgets/bluetooth/main.tsx
@@ -12,6 +12,45 @@ import DeviceWidget from './device';
export default () => {
const bluetooth = AstalBluetooth.get_default();
+ const deviceList = (
+
+ {
+ self.children = bluetooth.devices
+ .filter((dev) => dev.name)
+ .map((dev) => );
+
+ self.hook(bluetooth, 'device-added', (_, dev) => {
+ if (dev.name) {
+ self.add();
+ }
+ });
+
+ 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);
+ }
+ });
+ }}
+ >
+
+
+ );
+
return (
{
}
}}
>
-
+
- {bind(bluetooth, 'devices').as((devices) => devices
- .filter((dev) => dev.name)
- .map((dev) => DeviceWidget(dev)))}
+ {deviceList}
);
};