Skip to content

Improve BLE device chooser with sorting and filtering #2545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sensei-hacker wants to merge 3 commits into
base: maintenance-9.x
Choose a base branch
from
Open

Improve BLE device chooser with sorting and filtering #2545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60cf39a
Improve BLE device chooser with sorting and filtering
sensei-hacker Jan 30, 2026
77ca061
bluetooth device chooser: remove breaking CSS
sensei-hacker Jan 31, 2026
14f8bf2
bluetooth device chooser: make dialog taller
sensei-hacker Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions js/libraries/bluetooth-device-chooser/bt-device-chooser-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
</head>
<body>
<h1>Select Bluetooth device:</h1>
<input type="text" id="search" placeholder="Filter devices..." autocomplete="off">
<div id="list">
<div id="cancel" class="item">
Cancel
Expand Down
70 changes: 58 additions & 12 deletions js/libraries/bluetooth-device-chooser/bt-device-chooser-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,71 @@
import './bt-device-chooser-style.css'

document.addEventListener("DOMContentLoaded", () => {
window.electronAPI.bleScan(data => {
data.forEach(device => {
var dev = document.getElementById(device.deviceId)
if (dev) {
dev.parentElement.removeChild(dev);
}
var item = document.createElement('div');
item.className = 'item'
// Store all discovered devices
const devices = new Map();

// Get DOM elements
const searchInput = document.getElementById('search');
const listElement = document.getElementById('list');
const cancelElement = document.getElementById('cancel');

// Render devices in sorted and filtered order
function renderDevices() {
const searchText = searchInput.value.toLowerCase().trim();

// Get all devices except cancel button
const existingDevices = Array.from(listElement.querySelectorAll('.item:not(#cancel)'));
existingDevices.forEach(el => el.remove());

// Sort devices alphabetically by name
const sortedDevices = Array.from(devices.values()).sort((a, b) => {
return a.deviceName.localeCompare(b.deviceName);
});

// Filter devices based on search text
const filteredDevices = sortedDevices.filter(device => {
if (!searchText) return true;
const deviceText = `${device.deviceName} ${device.deviceId}`.toLowerCase();
return deviceText.includes(searchText);
});

// Render filtered and sorted devices
filteredDevices.forEach(device => {
const item = document.createElement('div');
item.className = 'item';
item.id = device.deviceId;
item.addEventListener('click', () => {
window.electronAPI.deviceSelected(item.id);
window.close();
});
var text = device.deviceName + ' (' + device.deviceId + ')';
item.appendChild(document.createTextNode(text.length > 45 ? device.deviceName.substring(0, 45) : text.substring(0, 45)));
document.getElementById('list').prepend(item);
const MAX_DEVICE_NAME_LENGTH = 45;
const text = `${device.deviceName} (${device.deviceId})`;
const displayText = text.length > MAX_DEVICE_NAME_LENGTH ? text.substring(0, MAX_DEVICE_NAME_LENGTH) : text;
item.appendChild(document.createTextNode(displayText));

// Insert before cancel button to keep it at the bottom
listElement.insertBefore(item, cancelElement);
});
}

// Handle search input changes
searchInput.addEventListener('input', () => {
renderDevices();
});
document.getElementById('cancel').addEventListener('click', () => {

// Handle device scan updates
window.electronAPI.bleScan(data => {
data.forEach(device => {
devices.set(device.deviceId, device);
});
renderDevices();
});

// Handle cancel button
cancelElement.addEventListener('click', () => {
window.close();
});

// Initial render (in case devices were already discovered)
renderDevices();
});
24 changes: 20 additions & 4 deletions js/libraries/bluetooth-device-chooser/bt-device-chooser-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,35 @@ h1 {
color: white;
}

#id {
#search {
width: 345px;
padding: 10px;
margin: 5px;
font-size: 14px;
border: 1px solid whitesmoke;
background-color: #1a1a1a;
color: white;
box-sizing: border-box;
}

#search::placeholder {
color: #888;
}

#search:focus {
outline: none;
border-color: rgb(88, 88, 192);
background-color: #2a2a2a;
}


#list {
color: white;
}

.item {
margin: 5px;
padding: 5px;
height: 40px;
line-height: 40px;
width: 345px;
display: inline-block;
vertical-align: middle;
border: 1px solid whitesmoke;
Expand All @@ -35,4 +50,5 @@ h1 {

#cancel {
text-align: center;
display: block;
}
2 changes: 1 addition & 1 deletion js/main/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function createDeviceChooser() {
bluetoothDeviceChooser = new BrowserWindow({
parent: mainWindow,
width: 410,
height: 400,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'bt-device-chooser-preload.mjs'),
}
Expand Down