modules/home/ags/app/style.scss

@@ -5,9 +5,7 @@ $radius: 12px; // keep in sync with RADIUS in Bar.tsx
 $spacing: 8px;
 $padding: 8px;
 $border-width: 1px;
-// one step lighter than the card fill so section outlines read against
+$border-color: $base02;
-// the dropdown background and the widgets they surround
-$border-color: $base03;
 $border: $border-width solid $border-color;
 $transition: 180ms;
 $fg: $base05;
@@ -213,7 +211,7 @@ scrollbar {
     .volume,
     .microphone,
     .brightness {
-        padding: 0 4px;
+        padding: 2px 4px;
     }
 
     button {
@@ -391,6 +389,30 @@ scale {
             background: $hover-overlay;
         }
     }
+
+    switch {
+        background: $base03;
+        border-radius: 999px;
+        min-width: 34px;
+        min-height: 16px;
+        margin: 1px 0;
+
+        slider {
+            background: $base05;
+            border-radius: 999px;
+            min-width: 12px;
+            min-height: 12px;
+            margin: 2px;
+        }
+    }
+
+    switch:checked {
+        background: $primary-bg;
+
+        slider {
+            background: $primary-fg;
+        }
+    }
 }
 
 .wifi-status,
@@ -420,9 +442,15 @@ scale {
     }
 }
 
-.device-row {
+.device-item {
+    padding: 5px 7px;
+    border-radius: 6px;
     margin: 1px 0;
 
+    icon {
+        font-size: 16px;
+    }
+
     .device-name {
         margin: 0 6px;
     }
@@ -438,6 +466,10 @@ scale {
         opacity: 0.7;
         margin-right: 2px;
     }
+
+    &:hover {
+        background: $hover-overlay;
+    }
 }
 
 // media player card

modules/home/ags/app/widget/Bluetooth.tsx

@@ -48,42 +48,14 @@ const pillLabel = Variable.derive(
 )
 
 // ported from AlfheimOS: icon, name, battery, busy icon while connecting,
-// whole row toggles the bluez connected state
+// switch reflecting the bluez connected state
 function DeviceItem(device: AstalBluetooth.Device) {
     const battery = bind(device, "battery_percentage")
     const connecting = bind(device, "connecting")
-    const connected = Variable.derive(
-        [bind(device, "connected"), connecting],
-        (c, busy) => c && !busy,
-    )
     // bluez reports br-connection-busy when attempts pile up, so debounce
     let lastAttempt = 0
-
-    function toggle() {
-        if (connecting.get()) return
-        // skip retries within the debounce window
-        const now = Date.now()
-        if (now - lastAttempt < 1500) return
-        lastAttempt = now
-        const state = !device.connected
-        // bluez rejects connects while the controller is busy scanning
-        if (state) setDiscovery(false)
-        // vala async: begin with a callback, finish() throws
-        const done = (_source: AstalBluetooth.Device, res: Gio.AsyncResult) => {
-            try {
-                if (state) device.connect_device_finish(res)
-                else device.disconnect_device_finish(res)
-            } catch (e) {
-                console.error(e)
-            }
-        }
-        if (state) device.connect_device(done)
-        else device.disconnect_device(done)
-    }
-
     return (
-        <button className="device-row" onClicked={toggle}>
+        <box className="device-item">
-            <box>
             <icon
                 icon={
                     device.icon
@@ -107,12 +79,33 @@ function DeviceItem(device: AstalBluetooth.Device) {
                 icon="view-refresh-symbolic"
                 visible={connecting}
             />
-                <icon
+            <switch
-                    visible={connected()}
+                visible={connecting.as((c) => !c)}
-                    icon="object-select-symbolic"
+                active={bind(device, "connected")}
+                onStateSet={(_, state) => {
+                    // bluez rejects connects while the controller is busy scanning
+                    if (state) setDiscovery(false)
+                    // skip no-ops and retries within the debounce window
+                    const now = Date.now()
+                    if (state === device.connected || now - lastAttempt < 1500) {
+                        return true
+                    }
+                    lastAttempt = now
+                    // vala async: begin with a callback, finish() throws
+                    const done = (_source: AstalBluetooth.Device, res: Gio.AsyncResult) => {
+                        try {
+                            if (state) device.connect_device_finish(res)
+                            else device.disconnect_device_finish(res)
+                        } catch (e) {
+                            console.error(e)
+                        }
+                    }
+                    if (state) device.connect_device(done)
+                    else device.disconnect_device(done)
+                    return true
+                }}
             />
         </box>
-        </button>
     )
 }