popouts: better bluetooth popout

1 files changed, 70 insertions, 11 deletions

diff --git a/modules/bar/popouts/Bluetooth.qml b/modules/bar/popouts/Bluetooth.qml
index aefdf4d..5b1127f 100644
--- a/modules/bar/popouts/Bluetooth.qml
+++ b/modules/bar/popouts/Bluetooth.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.widgets
+import qs.services
 import qs.config
 import qs.utils
 import Quickshell
@@ -11,30 +12,64 @@ import QtQuick.Layouts
 ColumnLayout {
     id: root
 
-    spacing: Appearance.spacing.small / 2
+    spacing: Appearance.spacing.small
 
     StyledText {
-        Layout.bottomMargin: Appearance.spacing.small
+        Layout.topMargin: Appearance.padding.normal
+        Layout.rightMargin: Appearance.padding.small
         text: qsTr("Bluetooth %1").arg(BluetoothAdapterState.toString(Bluetooth.defaultAdapter?.state).toLowerCase())
+        font.weight: 500
+    }
+
+    Toggle {
+        label: qsTr("Enabled")
+        checked: Bluetooth.defaultAdapter?.enabled ?? false
+        toggle.onToggled: {
+            const adapter = Bluetooth.defaultAdapter;
+            if (adapter)
+                adapter.enabled = checked;
+        }
+    }
+
+    Toggle {
+        label: qsTr("Discovering")
+        checked: Bluetooth.defaultAdapter?.discovering ?? false
+        toggle.onToggled: {
+            const adapter = Bluetooth.defaultAdapter;
+            if (adapter)
+                adapter.discovering = checked;
+        }
     }
 
     StyledText {
-        text: qsTr("%n connected device(s)", "", Bluetooth.devices.values.filter(d => d.connected).length)
+        Layout.topMargin: Appearance.spacing.small
+        Layout.rightMargin: Appearance.padding.small
+        text: {
+            const devices = Bluetooth.devices.values;
+            let available = qsTr("%1 device%2 available").arg(devices.length).arg(devices.length === 1 ? "" : "s");
+            const connected = devices.filter(d => d.connected).length;
+            if (connected > 0)
+                available += qsTr(" (%1 connected)").arg(connected);
+            return available;
+        }
+        color: Colours.palette.m3onSurfaceVariant
+        font.pointSize: Appearance.font.size.small
     }
 
     Repeater {
         model: ScriptModel {
-            values: [...Bluetooth.devices.values].sort((a, b) => (b.connected - a.connected) || (b.paired - a.paired))
+            values: [...Bluetooth.devices.values].sort((a, b) => (b.connected - a.connected) || (b.paired - a.paired)).slice(0, 5)
         }
 
         RowLayout {
             id: device
 
-            required property var modelData
+            required property BluetoothDevice modelData
             readonly property bool loading: device.modelData.state === BluetoothDeviceState.Connecting || device.modelData.state === BluetoothDeviceState.Disconnecting
 
             Layout.fillWidth: true
-            spacing: Appearance.spacing.small / 2
+            Layout.rightMargin: Appearance.padding.small
+            spacing: Appearance.spacing.small
 
             opacity: 0
             scale: 0.7
@@ -53,20 +88,24 @@ ColumnLayout {
             }
 
             MaterialIcon {
-                Layout.rightMargin: Appearance.spacing.small
                 text: Icons.getBluetoothIcon(device.modelData.icon)
             }
 
             StyledText {
+                Layout.leftMargin: Appearance.spacing.small / 2
+                Layout.rightMargin: Appearance.spacing.small / 2
                 Layout.fillWidth: true
                 text: device.modelData.name
             }
 
-            Item {
+            StyledRect {
                 id: connectBtn
 
                 implicitWidth: implicitHeight
-                implicitHeight: connectIcon.implicitHeight + Appearance.padding.small * 2
+                implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
+
+                radius: Appearance.rounding.full
+                color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3primary : Colours.palette.m3surface
 
                 StyledBusyIndicator {
                     anchors.centerIn: parent
@@ -83,7 +122,7 @@ ColumnLayout {
                 }
 
                 StateLayer {
-                    radius: Appearance.rounding.full
+                    color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
                     disabled: device.loading
 
                     function onClicked(): void {
@@ -97,6 +136,7 @@ ColumnLayout {
                     anchors.centerIn: parent
                     animate: true
                     text: device.modelData.connected ? "link_off" : "link"
+                    color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
 
                     opacity: device.loading ? 0 : 1
 
@@ -108,7 +148,7 @@ ColumnLayout {
 
             Loader {
                 asynchronous: true
-                active: device.modelData.paired
+                active: device.modelData.bonded
                 sourceComponent: Item {
                     implicitWidth: connectBtn.implicitWidth
                     implicitHeight: connectBtn.implicitHeight
@@ -130,6 +170,25 @@ ColumnLayout {
         }
     }
 
+    component Toggle: RowLayout {
+        required property string label
+        property alias checked: toggle.checked
+        property alias toggle: toggle
+
+        Layout.fillWidth: true
+        Layout.rightMargin: Appearance.padding.small
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: parent.label
+        }
+
+        StyledSwitch {
+            id: toggle
+        }
+    }
+
     component Anim: NumberAnimation {
         duration: Appearance.anim.durations.normal
         easing.type: Easing.BezierSpline