wactioncenter: bluetooth menu

dots/.config/quickshell/ii/assets/icons/fluent/arrow-clockwise-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/arrow-clockwise.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5a7.5 7.5 0 1 0 7.419 6.392c-.067-.454.265-.892.724-.892.37 0 .696.256.752.623A9 9 0 1 1 18 5.292V4.25a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h1.35a7.474 7.474 0 0 0-5.1-2Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/arrow-counterclockwise-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.75a7.25 7.25 0 1 1-7.201 6.406C4.867 10.568 4.44 10 3.849 10c-.515 0-.968.358-1.03.87A9.25 9.25 0 1 0 6.25 4.754V4.25a1 1 0 0 0-2.001 0v2.698A9.322 9.322 0 0 0 4.216 7h.034v.25a1 1 0 0 0 1 1h3a1 1 0 0 0 0-2h-.666A7.219 7.219 0 0 1 12 4.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/arrow-counterclockwise.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5a7.5 7.5 0 1 1-7.419 6.392c.067-.454-.265-.892-.724-.892a.749.749 0 0 0-.752.623A9 9 0 1 0 6 5.292V4.25a.75.75 0 0 0-1.5 0v3c0 .414.336.75.75.75h3a.75.75 0 0 0 0-1.5H6.9a7.473 7.473 0 0 1 5.1-2Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/phone-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.75 2A2.25 2.25 0 0 1 18 4.25v15.5A2.25 2.25 0 0 1 15.75 22h-7.5A2.25 2.25 0 0 1 6 19.75V4.25A2.25 2.25 0 0 1 8.25 2h7.5Zm-2.5 16h-2.5a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/phone.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.75 2A2.25 2.25 0 0 1 18 4.25v15.5A2.25 2.25 0 0 1 15.75 22h-7.5A2.25 2.25 0 0 1 6 19.75V4.25A2.25 2.25 0 0 1 8.25 2h7.5Zm0 1.5h-7.5a.75.75 0 0 0-.75.75v15.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75Zm-2.501 14a.75.75 0 0 1 .002 1.5l-2.5.004a.75.75 0 0 1-.002-1.5l2.5-.004Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/modules/common/widgets/StyledSwitch.qml

@@ -1,8 +1,6 @@
 import qs.modules.common
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
-import Qt5Compat.GraphicalEffects
 
 /**
  * Material 3 switch. See https://m3.material.io/components/switch/overview

dots/.config/quickshell/ii/modules/ii/sidebarRight/bluetoothDevices/BluetoothDialog.qml

@@ -44,20 +44,7 @@ WindowDialog {
         animateAppearance: false
 
         model: ScriptModel {
-            values: [...Bluetooth.devices.values].sort((a, b) => {
+            values: BluetoothStatus.friendlyDeviceList
-                // Connected -> paired -> others
-                let conn = (b.connected - a.connected) || (b.paired - a.paired);
-                if (conn !== 0) return conn;
-
-                // Ones with meaningful names before MAC addresses
-                const macRegex = /^([0-9A-Fa-f]{2}-){5}[0-9A-Fa-f]{2}$/;
-                const aIsMac = macRegex.test(a.name);
-                const bIsMac = macRegex.test(b.name);
-                if (aIsMac !== bIsMac) return aIsMac ? 1 : -1;
-
-                // Alphabetical by name
-                return a.name.localeCompare(b.name);
-            })
         }
         delegate: BluetoothDeviceItem {
             required property BluetoothDevice modelData

dots/.config/quickshell/ii/modules/waffle/actionCenter/ExpandableChoiceButton.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.services.network
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+WChoiceButton {
+    id: root
+
+    property bool expanded: false
+    checked: expanded
+    clip: true
+
+    horizontalPadding: 12
+    verticalPadding: 6
+    animateChoiceHighlight: false
+
+    Behavior on implicitHeight {
+        animation: Looks.transition.resize.createObject(this)
+    }
+    onClicked: expanded = !expanded
+}

dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterMoreButton.qml

@@ -0,0 +1,23 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+    implicitHeight: 40
+    implicitWidth: contentItem.implicitWidth + 30
+    color: "transparent"
+
+    contentItem: Item {
+        id: contentItem
+        anchors.centerIn: parent
+        implicitWidth: buttonText.implicitWidth
+
+        WText {
+            id: buttonText
+            anchors.centerIn: parent
+            color: root.pressed ? Looks.colors.fg : Looks.colors.fg1
+            text: root.text
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/actionCenter/bluetooth/BluetoothControl.qml

@@ -0,0 +1,129 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import Quickshell.Bluetooth
+import qs
+import qs.services
+import qs.services.network
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+Item {
+    id: root
+
+    Component.onCompleted: {
+        if (Bluetooth.defaultAdapter.enabled) Bluetooth.defaultAdapter.discovering = true;
+    }
+    Component.onDestruction: {
+        Bluetooth.defaultAdapter.discovering = false;
+    }
+
+    PageColumn {
+        anchors.fill: parent
+
+        BodyRectangle {
+            implicitHeight: 400
+            implicitWidth: 50
+
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: 4
+                spacing: 4
+
+                ColumnLayout {
+                    implicitHeight: headerRow.implicitHeight
+                    Layout.fillWidth: true
+                    spacing: 0
+                    RowLayout {
+                        Layout.fillWidth: true
+                        spacing: 0
+                        HeaderRow {
+                            id: headerRow
+                            Layout.fillWidth: true
+                            title: qsTr("Bluetooth")
+                        }
+                        WSwitch {
+                            id: toggleSwitch
+                            Layout.rightMargin: 12
+                            checked: Bluetooth.defaultAdapter?.enabled ?? false
+                            onCheckedChanged: {
+                                if (Bluetooth.defaultAdapter) {
+                                    Bluetooth.defaultAdapter.enabled = checked;
+                                    if (checked) {
+                                        Bluetooth.defaultAdapter.discovering = true;
+                                    } else {
+                                        Bluetooth.defaultAdapter.discovering = false;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    FadeLoader {
+                        Layout.leftMargin: -4
+                        Layout.rightMargin: -4
+                        Layout.fillWidth: true
+                        shown: Bluetooth.defaultAdapter?.discovering ?? false
+                        visible: true
+                        sourceComponent: WIndeterminateProgressBar {}
+                    }
+                }
+
+                StyledListView {
+                    id: listView
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    animateAppearance: false
+
+                    contentHeight: contentLayout.implicitHeight
+                    contentWidth: width
+                    clip: true
+                    spacing: 4
+
+                    model: ScriptModel {
+                        values: BluetoothStatus.friendlyDeviceList
+                    }
+                    delegate: BluetoothDeviceItem {
+                        required property BluetoothDevice modelData
+                        device: modelData
+                        width: ListView.view.width
+                    }
+                }
+            }
+        }
+
+        Separator {}
+
+        FooterRectangle {
+            FooterMoreButton {
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                }
+                text: qsTr("More Bluetooth settings")
+                onClicked: {
+                    Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "sidebarLeft", "toggle"]);
+                    Quickshell.execDetached(["bash", "-c", Config.options.apps.bluetooth]);
+                }
+            }
+            WPanelFooterButton {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                enabled: !Bluetooth.defaultAdapter?.discovering && Bluetooth.defaultAdapter?.enabled
+
+                onClicked: {
+                    Bluetooth.defaultAdapter.discovering = true;
+                }
+
+                contentItem: FluentIcon {
+                    icon: "arrow-counterclockwise"
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/actionCenter/bluetooth/BluetoothDeviceItem.qml

@@ -0,0 +1,92 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Bluetooth
+import qs
+import qs.services
+import qs.services.network
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+ExpandableChoiceButton {
+    id: root
+    required property BluetoothDevice device
+
+    contentItem: RowLayout {
+        id: contentItem
+        spacing: 20
+
+        // Device icon
+        FluentIcon {
+            Layout.topMargin: 4
+            Layout.bottomMargin: 4
+            Layout.alignment: Qt.AlignTop
+            icon: WIcons.bluetoothDeviceIcon(root?.device)
+            implicitSize: 18
+        }
+
+        ColumnLayout {
+            Layout.topMargin: 4
+            Layout.bottomMargin: 4
+            Layout.alignment: Qt.AlignTop
+            Layout.fillWidth: true
+            spacing: 1
+
+            Behavior on Layout.topMargin {
+                animation: Looks.transition.move.createObject(this)
+            }
+
+            WText {
+                // Network name
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                font.pixelSize: Looks.font.pixelSize.large
+                text: root.device?.name || Translation.tr("Unknown device")
+            }
+            WText { // Status
+                id: statusText
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                font.pixelSize: Looks.font.pixelSize.large
+                color: Looks.colors.subfg
+                visible: root.device?.connected || root.expanded
+                Behavior on opacity {
+                    animation: Looks.transition.opacity.createObject(this)
+                }
+                text: {
+                    if (!root.device?.paired)
+                        return Translation.tr("Not connected");
+                    let statusText = root.device?.connected ? Translation.tr("Connected") : Translation.tr("Paired");
+                    if (!root.device?.batteryAvailable)
+                        return statusText;
+                    statusText += ` • ${Math.round(root.device?.battery * 100)}%`;
+                    return statusText;
+                }
+            }
+
+            WButton {
+                Layout.alignment: Qt.AlignRight
+                horizontalAlignment: Text.AlignHCenter
+                visible: root.expanded
+                checked: !(root.device?.connected ?? false)
+                colBackground: Looks.colors.bg2
+                colBackgroundHover: Looks.colors.bg2Hover
+                colBackgroundActive: Looks.colors.bg2Active
+                implicitHeight: 30
+                implicitWidth: 148
+                text: root.device?.connected ? Translation.tr("Disconnect") : Translation.tr("Connect")
+
+                onClicked: {
+                    if (root.device?.connected) {
+                        root.device.disconnect();
+                    } else {
+                        root.device.connect();
+                    }
+                }
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/actionCenter/toggles/ActionCenterTogglesDelegateChooser.qml

@@ -10,6 +10,7 @@ import qs.modules.common.models.quickToggles
 import qs.modules.common.widgets
 import qs.modules.waffle.looks
 import qs.modules.waffle.actionCenter.wifi
+import qs.modules.waffle.actionCenter.bluetooth
 
 DelegateChooser {
     id: root
@@ -29,6 +30,9 @@ DelegateChooser {
             toggleModel: BluetoothToggle {}
             name: toggleModel.statusText
             icon: WIcons.bluetoothIcon
+            menu: Component {
+                BluetoothControl {}
+            }
         }
     }
     DelegateChoice {

dots/.config/quickshell/ii/modules/waffle/actionCenter/wifi/WWifiNetworkItem.qml

@@ -11,30 +11,16 @@ import qs.modules.common.widgets
 import qs.modules.waffle.looks
 import qs.modules.waffle.actionCenter
 
-WChoiceButton {
+ExpandableChoiceButton {
     id: root
     required property WifiAccessPoint wifiNetwork
 
-    property bool expanded: false
-    checked: expanded
-    clip: true
-
-    horizontalPadding: 12
-    verticalPadding: 6
-    animateChoiceHighlight: false
-
-    Behavior on implicitHeight {
-        animation: Looks.transition.resize.createObject(this)
-    }
-
-    onClicked: expanded = !expanded
-
     contentItem: RowLayout {
         id: contentItem
         spacing: 12
 
         FluentIcon { // Duotone hack
-        Layout.bottomMargin: 2
+            Layout.bottomMargin: 2
             Layout.alignment: Qt.AlignTop
             property int strength: root.wifiNetwork?.strength ?? 0
             icon: "wifi-1"

dots/.config/quickshell/ii/modules/waffle/actionCenter/wifi/WifiControl.qml

@@ -14,8 +14,6 @@ import qs.modules.waffle.actionCenter
 
 Item {
     id: root
-    implicitWidth: 360
-    implicitHeight: 352
 
     Component.onCompleted: {
         Network.rescanWifi();
@@ -37,29 +35,31 @@ Item {
                     implicitHeight: headerRow.implicitHeight
                     Layout.fillWidth: true
                     spacing: 0
-                    HeaderRow {
+                    RowLayout {
-                        id: headerRow
                         Layout.fillWidth: true
-                        title: qsTr("Wi-Fi")
+                        spacing: 0
+                        HeaderRow {
+                            id: headerRow
+                            Layout.fillWidth: true
+                            title: qsTr("Wi-Fi")
+                        }
+                        WSwitch {
+                            id: toggleSwitch
+                            Layout.rightMargin: 12
+                            checked: Network.wifiStatus !== "disabled"
+                            onCheckedChanged: {
+                                Network.enableWifi(checked);
+                                Network.rescanWifi();
+                            }
+                        }
                     }
                     FadeLoader {
                         Layout.leftMargin: -4
                         Layout.rightMargin: -4
                         Layout.fillWidth: true
                         shown: Network.wifiScanning
-                        sourceComponent: StyledIndeterminateProgressBar {
+                        visible: true
-                            id: progressBar
+                        sourceComponent: WIndeterminateProgressBar {}
-                            implicitHeight: 3
-                            background: null
-                            layer.enabled: true
-                            layer.effect: OpacityMask {
-                                maskSource: Rectangle {
-                                    width: progressBar.width
-                                    height: progressBar.height
-                                    radius: progressBar.height / 2
-                                }
-                            }
-                        }
                     }
                 }
 
@@ -89,30 +89,29 @@ Item {
         Separator {}
 
         FooterRectangle {
-            WButton {
+            FooterMoreButton {
-                id: moreSettingsButton
                 anchors {
                     verticalCenter: parent.verticalCenter
                     left: parent.left
                 }
-                implicitHeight: 40
+                text: qsTr("More Internet settings")
-                implicitWidth: contentItem.implicitWidth + 30
-                color: "transparent"
-
                 onClicked: {
                     Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "sidebarLeft", "toggle"]);
                     Quickshell.execDetached(["bash", "-c", Config.options.apps.network]);
                 }
+            }
+            WPanelFooterButton {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                enabled: !Network.wifiScanning
 
-                contentItem: Item {
+                onClicked: {
-                    anchors.centerIn: parent
+                    Network.rescanWifi();
-                    implicitWidth: buttonText.implicitWidth
+                }
-                    WText {
+
-                        id: buttonText
+                contentItem: FluentIcon {
-                        anchors.centerIn: parent
+                    icon: "arrow-counterclockwise"
-                        text: qsTr("More Internet settings")
-                        color: moreSettingsButton.pressed ? Looks.colors.fg : Looks.colors.fg1
-                    }
                 }
             }
         }

dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml

@@ -17,7 +17,7 @@ Singleton {
     property string iconsPath: `${Directories.assetsPath}/icons/fluent`
     property bool dark: Appearance.m3colors.darkmode
 
-    property real backgroundTransparency: 0.13
+    property real backgroundTransparency: 0.11
     property real panelBackgroundTransparency: 0.12
     property real panelLayerTransparency: root.dark ? 0.9 : 0.7
     property real contentTransparency: root.dark ? 0.9 : 0.5
@@ -48,6 +48,7 @@ Singleton {
         property color fg: "#000000"
         property color fg1: "#626262"
         property color inactiveIcon: "#C4C4C4"
+        property color controlBgInactive: '#555458'
         property color controlBg: '#807F85'
         property color controlBgHover: '#57575B'
         property color controlFg: "#FFFFFF"
@@ -74,6 +75,7 @@ Singleton {
         property color fg: "#FFFFFF"
         property color fg1: "#D1D1D1"
         property color inactiveIcon: "#494949"
+        property color controlBgInactive: "#CDCECF"
         property color controlBg: "#9B9B9B"
         property color controlBgHover: "#CFCED1"
         property color controlFg: "#454545"
@@ -104,6 +106,7 @@ Singleton {
         property color fg: root.dark ? root.darkColors.fg : root.lightColors.fg
         property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
         property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
+        property color controlBgInactive: root.dark ? root.darkColors.controlBgInactive : root.lightColors.controlBgInactive
         property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
         property color controlBgHover: root.dark ? root.darkColors.controlBgHover : root.lightColors.controlBgHover
         property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg

dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml

@@ -19,6 +19,7 @@ Button {
     property color colForegroundToggled: Looks.colors.accentFg
     property alias backgroundOpacity: backgroundRect.opacity
     property color color: {
+        if (!root.enabled) return colBackground;
         if (root.checked) {
             if (root.down) {
                 return root.colBackgroundToggledActive;

dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml

@@ -107,4 +107,20 @@ Singleton {
         icon = AppSearch.guessIcon(node?.properties["node.name"] ?? "");
         return icon;
     }
+
+    function bluetoothDeviceIcon(device) {
+        const systemIconName = device?.icon || "";
+        if (systemIconName.includes("headset") || systemIconName.includes("headphones"))
+            return "headphones";
+        if (systemIconName.includes("audio"))
+            return "speaker";
+        if (systemIconName.includes("phone"))
+            return "phone";
+        if (systemIconName.includes("mouse"))
+            return "bluetooth";
+        if (systemIconName.includes("keyboard"))
+            return "keyboard";
+        return "bluetooth";
+    }
+
 }

dots/.config/quickshell/ii/modules/waffle/looks/WIndeterminateProgressBar.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import Qt5Compat.GraphicalEffects
+import qs
+import qs.services
+import qs.services.network
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+StyledIndeterminateProgressBar {
+    id: progressBar
+    implicitHeight: 3
+    background: null
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: Rectangle {
+            width: progressBar.width
+            height: progressBar.height
+            radius: progressBar.height / 2
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/looks/WPanelFooterButton.qml

@@ -16,6 +16,7 @@ Button {
     property color color
     property color colForeground: Looks.colors.fg
     color: {
+        if (!root.enabled) return colBackground;
         if (root.down) {
             return root.colBackgroundActive
         } else if ((root.hovered && !root.down) || root.checked) {

dots/.config/quickshell/ii/modules/waffle/looks/WSwitch.qml

@@ -0,0 +1,69 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+Switch {
+    id: root
+    
+    PointingHandInteraction {}
+
+    implicitWidth: 40
+    implicitHeight: 20
+    property real indicatorHeight: 12
+    property real indicatorPressedHeight: 14
+    property real indicatorPressedWidth: 17
+    property color checkedColor: Looks.colors.accent
+    property color uncheckedColor: Looks.colors.bg1
+    property color borderColor: Looks.colors.controlBgInactive
+
+    readonly property real indicatorPressedWidthDiff: indicatorPressedWidth - indicatorHeight
+    
+    background: Rectangle {
+        width: parent.width
+        height: parent.height
+        radius: height / 2
+        color: root.checked ? root.checkedColor : root.uncheckedColor
+        border.width: 1
+        border.color: root.checked ? root.checkedColor : root.borderColor
+
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+        Behavior on border.color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+    }
+
+    // Custom thumb styling
+    indicator: Rectangle {
+        implicitWidth: (root.pressed || root.down) ? root.indicatorPressedWidth : root.indicatorHeight
+        implicitHeight: (root.pressed || root.down) ? root.indicatorPressedHeight : root.indicatorHeight
+        radius: height / 2
+        color: root.checked ? Looks.colors.accentFg : root.borderColor
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: {
+            if (root.checked) {
+                return 24 - (root.pressed || root.down ? root.indicatorPressedWidthDiff : 0);
+            } else {
+                return (root.pressed || root.down) ? 3 : 4
+            }
+        }
+
+        Behavior on anchors.leftMargin {
+            animation: Looks.transition.enter.createObject(this)
+        }
+        Behavior on implicitWidth {
+            animation: Looks.transition.resize.createObject(this)
+        }
+        Behavior on implicitHeight {
+            animation: Looks.transition.resize.createObject(this)
+        }
+        Behavior on color {
+            animation: Looks.transition.color.createObject(this)
+        }
+    }
+}

dots/.config/quickshell/ii/services/BluetoothStatus.qml

@@ -6,9 +6,6 @@ import Quickshell.Bluetooth
 import Quickshell.Io
 import QtQuick
 
-/**
- * Network service with nmcli.
- */
 Singleton {
     id: root
 
@@ -17,4 +14,24 @@ Singleton {
     readonly property BluetoothDevice firstActiveDevice: Bluetooth.defaultAdapter?.devices.values.find(device => device.connected) ?? null
     readonly property int activeDeviceCount: Bluetooth.defaultAdapter?.devices.values.filter(device => device.connected).length ?? 0
     readonly property bool connected: Bluetooth.devices.values.some(d => d.connected)
+
+    function sortFunction(a, b) {
+        // Ones with meaningful names before MAC addresses
+        const macRegex = /^([0-9A-Fa-f]{2}-){5}[0-9A-Fa-f]{2}$/;
+        const aIsMac = macRegex.test(a.name);
+        const bIsMac = macRegex.test(b.name);
+        if (aIsMac !== bIsMac)
+            return aIsMac ? 1 : -1;
+
+        // Alphabetical by name
+        return a.name.localeCompare(b.name);
+    }
+    property list<var> connectedDevices: Bluetooth.devices.values.filter(d => d.connected).sort(sortFunction)
+    property list<var> pairedButNotConnectedDevices: Bluetooth.devices.values.filter(d => d.paired && !d.connected).sort(sortFunction)
+    property list<var> unpairedDevices: Bluetooth.devices.values.filter(d => !d.paired && !d.connected).sort(sortFunction)
+    property list<var> friendlyDeviceList: [
+        ...connectedDevices,
+        ...pairedButNotConnectedDevices,
+        ...unpairedDevices
+    ]
 }