[AGS] Bar: Done (WiFi still missing, will be added at some later point)

config/astal/components/QuickActions/modules/Bluetooth/Device.tsx

@@ -0,0 +1,72 @@
+import { bind } from "astal";
+import AstalBluetooth from "gi://AstalBluetooth";
+
+const BTDevice = ({ device }: { device: AstalBluetooth.Device }) => {
+    return (
+        <button
+            visible={bind(device, "name").as(n => n !== null)}
+            child={
+                <centerbox
+                    startWidget={
+                        <box>
+                            <image
+                                iconName={"chronometer-reset"}
+                                tooltipText={"Device is currently connecting"}
+                                visible={bind(device, "connecting")}
+                            ></image>
+                            <image
+                                iconName={bind(device, "icon")}
+                                marginEnd={3}
+                            ></image>
+                        </box>
+                    }
+                    centerWidget={
+                        <label
+                            label={bind(device, "name").as(n => n ?? "No name")}
+                            marginEnd={5}
+                        ></label>
+                    }
+                    endWidget={
+                        <box>
+                            <label
+                                label={bind(device, "batteryPercentage").as(
+                                    bat => (bat >= 0 ? bat + "%" : "?%"),
+                                )}
+                                tooltipText={"Device's battery percentage"}
+                                marginEnd={3}
+                            ></label>
+                            <image
+                                iconName={bind(device, "paired").as(v =>
+                                    v ? "network-bluetooth-activated-symbolic" : "bluetooth-disconnected-symbolic",
+                                )}
+                            ></image>
+                            <button tooltipText={"Device trusted status"} child={
+                                <image
+                                    iconName={bind(device, "trusted").as(v =>
+                                        v ? "checkbox" : "window-close-symbolic",
+                                    )}
+                                ></image>
+                            } onClicked={() => device.set_trusted( !device.get_trusted() )}
+                            cssClasses={[ 'button-no-margin' ]}
+                            ></button>
+                        </box>
+                    }
+                ></centerbox>
+            }
+            onClicked={() => {
+                connectOrPair( device );
+            }}
+        ></button>
+    );
+};
+
+const connectOrPair = (device: AstalBluetooth.Device) => {
+    if ( device.get_paired() ) {
+        device.connect_device(() => { });
+        // Show failed message if tried to connect and failed
+    } else {
+        device.pair();
+    }
+};
+
+export default BTDevice;