From e8094f5d29a000514d0ca7720052bfedc1e55b7e Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Sat, 18 Jan 2025 20:34:19 +1100
Subject: bar: bluetooth devices

---
 .../icons/caelestia-bluetooth-device-symbolic.svg  |  6 ++
 scss/bar.scss                                      |  9 +++
 src/modules/bar.tsx                                | 89 ++++++++++++++--------
 3 files changed, 71 insertions(+), 33 deletions(-)
 create mode 100644 assets/icons/caelestia-bluetooth-device-symbolic.svg

diff --git a/assets/icons/caelestia-bluetooth-device-symbolic.svg b/assets/icons/caelestia-bluetooth-device-symbolic.svg
new file mode 100644
index 0000000..86b126f
--- /dev/null
+++ b/assets/icons/caelestia-bluetooth-device-symbolic.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="128" height="128" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd">
+            <path d="M9.00553049,9.09762359 L9.00553049,4 C9.00553049,3.12761864 10.0317148,2.69004793 10.6606665,3.24382091 L10.7403339,3.3217199 L15.3111206,8.27340543 C15.6715217,8.66383994 15.6600247,9.26064253 15.3045564,9.6371766 L15.216432,9.71996479 L12.4826517,11.9976955 L15.2168235,14.2781149 C15.6246647,14.6182724 15.6909323,15.2111346 15.3877981,15.6306432 L15.3112739,15.7241817 L10.7404873,20.678114 C10.1488415,21.3193544 9.09779432,20.9449025 9.01123422,20.1112902 L9.00553049,20 L9.00553049,14.8947629 L8.36532009,15.4281734 C7.94101118,15.781699 7.31045167,15.7243178 6.95692602,15.3000089 C6.63059464,14.9083391 6.65438507,14.3409292 6.99370654,13.9778955 L7.08509045,13.8916148 L9.00553049,12.2915428 L9.00553049,11.7019502 L7.08469887,10.0998922 C6.66057024,9.74615033 6.60351053,9.11556165 6.95725244,8.69143301 C7.28378345,8.29992966 7.84620754,8.22119509 8.26439085,8.48962627 L8.36571168,8.56398659 L9.00553049,9.09762359 L9.00553049,4 L9.00553049,9.09762359 Z M11.0055305,13.3700381 L11.0055305,17.4414967 L13.1284383,15.1406365 L11.0055305,13.3700381 Z M18.8818126,7.23876677 C19.3022301,6.88062215 19.9333794,6.9311043 20.291524,7.3515218 C21.3872593,8.63777952 22,10.2703887 22,11.9949347 C22,13.7248622 21.3834157,15.3621939 20.2814798,16.6501128 C19.9224324,17.0697596 19.291176,17.1188851 18.8715292,16.7598377 C18.4518825,16.4007904 18.4027569,15.769534 18.7618043,15.3498872 C19.5566103,14.4209351 20,13.2435196 20,11.9949347 C20,10.7502267 19.5593778,9.57621638 18.7690576,8.6484782 C18.410913,8.2280607 18.4613951,7.59691139 18.8818126,7.23876677 Z M16.6166672,9.23876677 C17.0370847,8.88062215 17.668234,8.9311043 18.0263786,9.3515218 C18.6506,10.0842805 19,11.0152349 19,11.9974674 C19,12.9827668 18.6484092,13.9164117 18.0206587,14.6501128 C17.6616114,15.0697596 17.030355,15.1188851 16.6107082,14.7598377 C16.1910614,14.4007904 16.1419359,13.769534 16.5009833,13.3498872 C16.8216038,12.9751529 17,12.5014241 17,11.9974674 C17,11.4950729 16.8227185,11.0227174 16.5039122,10.6484782 C16.1457676,10.2280607 16.1962497,9.59691139 16.6166672,9.23876677 Z M11.0055305,6.5576505 L11.0055305,10.6251831 L13.1278913,8.85687474 L11.0055305,6.5576505 Z" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/scss/bar.scss b/scss/bar.scss
index 12c8df3..0ceac94 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -84,6 +84,15 @@
 
     .status-icons {
         color: scheme.$rosewater;
+
+        .bluetooth {
+            @include lib.spacing(10);
+
+            // The spacing doesn't look right for some reason so this
+            & > :first-child:not(:last-child) {
+                margin-right: lib.s(5);
+            }
+        }
     }
 
     .pkg-updates {
diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 97787fc..fbcfb10 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -324,49 +324,72 @@ const Network = () => (
     </button>
 );
 
-const Bluetooth = () => (
+const BluetoothDevice = (device: AstalBluetooth.Device) => (
     <button
+        visible={bind(device, "connected")}
         onClick={(self, event) => {
             if (event.button === Astal.MouseButton.PRIMARY) togglePopup(self, event, "bluetooth-devices");
-            else if (event.button === Astal.MouseButton.SECONDARY) AstalBluetooth.get_default().toggle();
+            else if (event.button === Astal.MouseButton.SECONDARY)
+                device.disconnect_device((_, res) => device.disconnect_device_finish(res));
             else if (event.button === Astal.MouseButton.MIDDLE)
                 execAsync("uwsm app -- blueman-manager").catch(console.error);
         }}
-        setup={self => {
-            const bluetooth = AstalBluetooth.get_default();
-            const tooltipText = Variable("");
-            const update = () => {
-                const devices = bluetooth.get_devices().filter(d => d.connected);
-                tooltipText.set(
-                    devices.length > 0
-                        ? `Connected devices: ${devices.map(d => d.alias).join(", ")}`
-                        : "No connected devices"
-                );
-            };
-            const hookDevice = (device: AstalBluetooth.Device) => {
-                self.hook(device, "notify::connected", update);
-                self.hook(device, "notify::alias", update);
-            };
-            bluetooth.get_devices().forEach(hookDevice);
-            self.hook(bluetooth, "device-added", (_, device) => {
-                hookDevice(device);
-                update();
-            });
-            update();
-            setupCustomTooltip(self, bind(tooltipText));
-        }}
+        setup={self => setupCustomTooltip(self, bind(device, "alias"))}
     >
-        <stack
-            transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
-            transitionDuration={120}
-            shown={bind(AstalBluetooth.get_default(), "isPowered").as(p => (p ? "enabled" : "disabled"))}
-        >
-            <label className="icon" label="bluetooth" name="enabled" />
-            <label className="icon" label="bluetooth_disabled" name="disabled" />
-        </stack>
+        <icon
+            icon={bind(device, "icon").as(i =>
+                Astal.Icon.lookup_icon(`${i}-symbolic`) ? `${i}-symbolic` : "caelestia-bluetooth-device-symbolic"
+            )}
+        />
     </button>
 );
 
+const Bluetooth = () => (
+    <box className="bluetooth">
+        <button
+            onClick={(self, event) => {
+                if (event.button === Astal.MouseButton.PRIMARY) togglePopup(self, event, "bluetooth-devices");
+                else if (event.button === Astal.MouseButton.SECONDARY) AstalBluetooth.get_default().toggle();
+                else if (event.button === Astal.MouseButton.MIDDLE)
+                    execAsync("uwsm app -- blueman-manager").catch(console.error);
+            }}
+            setup={self => {
+                const bluetooth = AstalBluetooth.get_default();
+                const tooltipText = Variable("");
+                const update = () => {
+                    const devices = bluetooth.get_devices().filter(d => d.connected);
+                    tooltipText.set(
+                        devices.length > 0
+                            ? `Connected devices: ${devices.map(d => d.alias).join(", ")}`
+                            : "No connected devices"
+                    );
+                };
+                const hookDevice = (device: AstalBluetooth.Device) => {
+                    self.hook(device, "notify::connected", update);
+                    self.hook(device, "notify::alias", update);
+                };
+                bluetooth.get_devices().forEach(hookDevice);
+                self.hook(bluetooth, "device-added", (_, device) => {
+                    hookDevice(device);
+                    update();
+                });
+                update();
+                setupCustomTooltip(self, bind(tooltipText));
+            }}
+        >
+            <stack
+                transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
+                transitionDuration={120}
+                shown={bind(AstalBluetooth.get_default(), "isPowered").as(p => (p ? "enabled" : "disabled"))}
+            >
+                <label className="icon" label="bluetooth" name="enabled" />
+                <label className="icon" label="bluetooth_disabled" name="disabled" />
+            </stack>
+        </button>
+        {bind(AstalBluetooth.get_default(), "devices").as(d => d.map(BluetoothDevice))}
+    </box>
+);
+
 const StatusIcons = () => (
     <box className="module status-icons">
         <Network />
-- 
cgit v1.2.3-freya