fix(Bluetooth): update codec selection and error handling

Fixes #2240

quickshell/Modules/ControlCenter/ControlCenterPopout.qml

@@ -314,6 +314,7 @@ DankPopout {
         id: bluetoothDetailComponent
         BluetoothDetail {
             id: bluetoothDetail
+            bluetoothCodecModalRef: contentLoader.item ? contentLoader.item.bluetoothCodecSelector : null
             onShowCodecSelector: function (device) {
                 if (contentLoader.item && contentLoader.item.bluetoothCodecSelector) {
                     contentLoader.item.bluetoothCodecSelector.show(device);

quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -15,6 +15,8 @@ Item {
     property var availableCodecs: []
     property string currentCodec: ""
     property bool isLoading: false
+    property string statusMessage: ""
+    property bool statusIsError: false
 
     readonly property bool deviceValid: device !== null && device.connected && BluetoothService.isAudioDevice(device)
 
@@ -29,6 +31,8 @@ Item {
         isLoading = true;
         availableCodecs = [];
         currentCodec = "";
+        statusMessage = "";
+        statusIsError = false;
         visible = true;
         modalVisible = true;
         queryCodecs();
@@ -60,6 +64,16 @@ Item {
             availableCodecs = codecs;
             currentCodec = current;
             isLoading = false;
+            if (BluetoothService.pactlChecked && !BluetoothService.pactlAvailable) {
+                statusMessage = I18n.tr("Codec switching is unavailable because pactl was not found");
+                statusIsError = true;
+            } else if (codecs.length === 0) {
+                statusMessage = I18n.tr("No codecs found");
+                statusIsError = false;
+            } else {
+                statusMessage = "";
+                statusIsError = false;
+            }
         });
     }
 
@@ -123,7 +137,7 @@ Item {
     Rectangle {
         id: modalBackground
         anchors.fill: parent
-        color: Qt.rgba(0, 0, 0, 0.5)
+        color: Qt.rgba(0, 0, 0, BlurService.enabled ? 0.72 : 0.5)
         opacity: modalVisible ? 1 : 0
 
         Behavior on opacity {
@@ -141,7 +155,7 @@ Item {
         focus: root.visible
         enabled: root.visible
 
-        Keys.onEscapePressed: {
+        Keys.onEscapePressed: event => {
             root.hide();
             event.accepted = true;
         }
@@ -153,9 +167,9 @@ Item {
         width: 320
         height: contentColumn.implicitHeight + Theme.spacingL * 2
         radius: Theme.cornerRadius
-        color: Theme.floatingSurface
-        border.color: Theme.outlineMedium
-        border.width: Theme.layerOutlineWidth
+        color: Theme.withAlpha(Theme.surfaceContainer, BlurService.enabled ? 0.96 : Theme.popupTransparency)
+        border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineMedium
+        border.width: BlurService.enabled ? BlurService.borderWidth : Theme.layerOutlineWidth
         opacity: modalVisible ? 1 : 0
         scale: modalVisible ? 1 : 0.9
 
@@ -221,16 +235,24 @@ Item {
             }
 
             StyledText {
-                text: isLoading ? I18n.tr("Loading codecs...") : I18n.tr("Current: %1").arg(currentCodec)
+                text: {
+                    if (isLoading)
+                        return I18n.tr("Loading codecs...");
+                    if (statusMessage.length > 0)
+                        return statusMessage;
+                    return I18n.tr("Current: %1").arg(currentCodec);
+                }
                 font.pixelSize: Theme.fontSizeSmall
-                color: isLoading ? Theme.primary : Theme.surfaceTextMedium
+                color: statusIsError ? Theme.error : (isLoading ? Theme.primary : Theme.surfaceTextMedium)
                 font.weight: Font.Medium
+                wrapMode: Text.WordWrap
+                width: parent.width
             }
 
             Column {
                 width: parent.width
                 spacing: Theme.spacingXS
-                visible: !isLoading
+                visible: !isLoading && availableCodecs.length > 0
 
                 Repeater {
                     model: availableCodecs

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -23,12 +23,47 @@ Rectangle {
     color: Theme.nestedSurface
     border.color: Theme.outlineMedium
     border.width: Theme.layerOutlineWidth
+    focus: true
 
     property var bluetoothCodecModalRef: null
     property var devicesBeingPaired: new Set()
 
     signal showCodecSelector(var device)
 
+    Component.onDestruction: closeTransientSurfaces()
+    onVisibleChanged: {
+        if (!visible)
+            closeTransientSurfaces();
+    }
+
+    Connections {
+        target: PopoutService.controlCenterPopout
+        function onShouldBeVisibleChanged() {
+            const popout = PopoutService.controlCenterPopout;
+            if (!popout || !popout.shouldBeVisible)
+                root.closeTransientSurfaces();
+        }
+    }
+
+    Keys.onPressed: event => {
+        if (event.key !== Qt.Key_Escape)
+            return;
+        if (bluetoothContextMenu.visible) {
+            bluetoothContextMenu.close();
+            event.accepted = true;
+            return;
+        }
+        PopoutService.closeControlCenter();
+        event.accepted = true;
+    }
+
+    function closeTransientSurfaces() {
+        if (bluetoothContextMenu.visible)
+            bluetoothContextMenu.close();
+        if (bluetoothCodecModalRef?.modalVisible)
+            bluetoothCodecModalRef.hide();
+    }
+
     function isDeviceBeingPaired(deviceAddress) {
         return devicesBeingPaired.has(deviceAddress);
     }
@@ -600,6 +635,8 @@ Rectangle {
         width: 150
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
+        onClosed: Qt.callLater(() => root.forceActiveFocus())
+
         property var currentDevice: null
 
         readonly property bool hasDevice: currentDevice !== null
@@ -607,10 +644,10 @@ Rectangle {
         readonly property bool showCodecOption: hasDevice && deviceConnected && BluetoothService.isAudioDevice(currentDevice)
 
         background: Rectangle {
-            color: BlurService.enabled ? Theme.surfaceContainer : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            color: Theme.withAlpha(Theme.surfaceContainer, BlurService.enabled ? 0.96 : Theme.popupTransparency)
             radius: Theme.cornerRadius
-            border.width: 0
-            border.color: Theme.outlineStrong
+            border.width: BlurService.enabled ? BlurService.borderWidth : 0
+            border.color: BlurService.enabled ? BlurService.borderColor : Theme.outlineStrong
         }
 
         MenuItem {