feat(ags): start working on bluetooth

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

@@ -19,7 +19,8 @@
             background-color: color.adjust(colors.$window_bg_color, $lightness: 3%);
         }
 
-        &.network icon {
+        &.network icon,
+        &.bluetooth icon {
             min-width: 30px;
         }
 

nixosModules/ags/config/widgets/bar/items/bluetooth.tsx

@@ -0,0 +1,67 @@
+import { bind, Variable } from 'astal';
+import { App, Gtk } from 'astal/gtk3';
+
+import AstalBluetooth from 'gi://AstalBluetooth';
+
+import PopupWindow from '../../misc/popup-window';
+
+
+export default () => {
+    const bluetooth = AstalBluetooth.get_default();
+
+    const Hovered = Variable(false);
+
+    return (
+        <button
+            className="bar-item bluetooth"
+            cursor="pointer"
+
+            onHover={() => Hovered.set(true)}
+            onHoverLost={() => Hovered.set(false)}
+
+            onButtonReleaseEvent={(self) => {
+                const win = App.get_window('win-bluetooth') as PopupWindow;
+
+                win.set_x_pos(
+                    self.get_allocation(),
+                    'right',
+                );
+
+                win.visible = !win.visible;
+            }}
+        >
+            {bind(bluetooth, 'isPowered').as((isPowered) => {
+                if (!isPowered) {
+                    return (<icon icon="bluetooth-disabled-symbolic" />);
+                }
+                else {
+                    return (
+                        <box>
+                            {bind(bluetooth, 'isConnected').as((isConnected) => {
+                                const device = bluetooth.get_devices().find((dev) => dev.connected);
+
+                                if (!isConnected || !device) {
+                                    return (<icon icon="bluetooth-active-symbolic" />);
+                                }
+                                else {
+                                    return (
+                                        <>
+                                            <icon icon={bind(device, 'icon')} />
+
+                                            <revealer
+                                                revealChild={bind(Hovered)}
+                                                transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
+                                            >
+                                                <label label={bind(device, 'name')} />
+                                            </revealer>
+                                        </>
+                                    );
+                                }
+                            })}
+                        </box>
+                    );
+                }
+            })}
+        </button>
+    );
+};

nixosModules/ags/config/widgets/bar/wim.tsx

@@ -2,6 +2,7 @@ import { Astal, Gtk } from 'astal/gtk3';
 
 import Audio from './items/audio';
 import Battery from './items/battery';
+import Bluetooth from './items/bluetooth';
 import Brightness from './items/brightness';
 import Clock from './items/clock';
 import CurrentClient from './items/current-client';
@@ -48,6 +49,10 @@ export default () => (
 
                 <Separator size={8} />
 
+                <Bluetooth />
+
+                <Separator size={8} />
+
                 <NotifButton />
 
                 <Separator size={8} />