networks + bluetooth: highlight active

scss/popdowns/bluetoothdevices.scss

@@ -38,6 +38,10 @@ $-accent: scheme.$rosewater;
                     background-color: scheme.$surface1;
                 }
             }
+
+            &.active {
+                color: $-accent;
+            }
         }
     }
 }

scss/popdowns/networks.scss

@@ -38,6 +38,10 @@ $-accent: scheme.$rosewater;
                     background-color: scheme.$surface1;
                 }
             }
+
+            &.active {
+                color: $-accent;
+            }
         }
     }
 }

src/modules/popdowns/bluetoothdevices.tsx

@@ -4,7 +4,7 @@ import AstalBluetooth from "gi://AstalBluetooth";
 import PopdownWindow from "../../widgets/popdownwindow";
 
 const BluetoothDevice = (device: AstalBluetooth.Device) => (
-    <box className="device">
+    <box className={bind(device, "connected").as(c => `device ${c ? "active" : ""}`)}>
         <icon
             className="icon"
             icon={bind(device, "icon").as(i =>

src/modules/popdowns/networks.tsx

@@ -4,7 +4,11 @@ import AstalNetwork from "gi://AstalNetwork";
 import PopdownWindow from "../../widgets/popdownwindow";
 
 const Network = (accessPoint: AstalNetwork.AccessPoint) => (
-    <box className="network">
+    <box
+        className={bind(AstalNetwork.get_default().wifi, "activeAccessPoint").as(
+            a => `network ${a === accessPoint ? "active" : ""}`
+        )}
+    >
         <icon className="icon" icon={bind(accessPoint, "iconName")} />
         <label
             truncate