fix(ui): add brand icons and type badges to download client filter dropdown (resolves #39)
Build and Push Docker Image / build (push) Successful in 50s
Licence Check / Licence compatibility and copyright header verification (push) Successful in 1m37s
CI / Security audit (push) Successful in 2m2s
CI / Tests & coverage (push) Successful in 2m26s
CI / Swagger Validation & Coverage (push) Successful in 2m32s
Build and Push Docker Image / build (push) Successful in 50s
Licence Check / Licence compatibility and copyright header verification (push) Successful in 1m37s
CI / Security audit (push) Successful in 2m2s
CI / Tests & coverage (push) Successful in 2m26s
CI / Swagger Validation & Coverage (push) Successful in 2m32s
This commit is contained in:
@@ -46,21 +46,40 @@ export function updateDownloadClientFilter() {
|
||||
|
||||
state.downloadClients.forEach((client, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'filter-item';
|
||||
item.className = 'download-client-option';
|
||||
item.dataset.index = index;
|
||||
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.className = 'download-client-checkbox';
|
||||
checkbox.id = `client-${index}`;
|
||||
checkbox.checked = state.selectedDownloadClients.includes(index);
|
||||
checkbox.addEventListener('change', () => toggleClientSelection(index));
|
||||
|
||||
const iconWrapper = document.createElement('span');
|
||||
iconWrapper.className = 'download-client-icon';
|
||||
const iconImg = document.createElement('img');
|
||||
iconImg.src = `/images/clients/${client.type}.svg`;
|
||||
iconImg.alt = `${client.name || client.type} icon`;
|
||||
iconImg.onerror = () => {
|
||||
iconWrapper.textContent = client.type.charAt(0).toUpperCase();
|
||||
iconWrapper.classList.add('fallback');
|
||||
};
|
||||
iconWrapper.appendChild(iconImg);
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.className = 'download-client-option-label';
|
||||
label.htmlFor = `client-${index}`;
|
||||
label.textContent = client.name || `${client.type} (${client.id})`;
|
||||
|
||||
const typeBadge = document.createElement('span');
|
||||
typeBadge.className = 'download-client-type';
|
||||
typeBadge.textContent = client.type;
|
||||
|
||||
item.appendChild(checkbox);
|
||||
item.appendChild(iconWrapper);
|
||||
item.appendChild(label);
|
||||
item.appendChild(typeBadge);
|
||||
filterList.appendChild(item);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user