Gandalf/sofarr
Public Access
0
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases 59 Wiki Activity

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
Details
Licence Check / Licence compatibility and copyright header verification (push) Successful in 1m37s
Details
CI / Security audit (push) Successful in 2m2s
Details
CI / Tests & coverage (push) Successful in 2m26s
Details
CI / Swagger Validation & Coverage (push) Successful in 2m32s
Details

Browse Source
This commit is contained in:
Gronod
2026-05-23 09:36:41 +01:00
parent a006cb4a37
commit e3f90d54f4
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui/filters.js
+20 -1
View File
@@ -46,21 +46,40 @@ export function updateDownloadClientFilter() {
state.downloadClients.forEach((client, index) => { state.downloadClients.forEach((client, index) => {
const item = document.createElement('div'); const item = document.createElement('div');
item.className = 'filter-item'; item.className = 'download-client-option';
item.dataset.index = index; item.dataset.index = index;
const checkbox = document.createElement('input'); const checkbox = document.createElement('input');
checkbox.type = 'checkbox'; checkbox.type = 'checkbox';
checkbox.className = 'download-client-checkbox';
checkbox.id = `client-${index}`; checkbox.id = `client-${index}`;
checkbox.checked = state.selectedDownloadClients.includes(index); checkbox.checked = state.selectedDownloadClients.includes(index);
checkbox.addEventListener('change', () => toggleClientSelection(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'); const label = document.createElement('label');
label.className = 'download-client-option-label';
label.htmlFor = `client-${index}`; label.htmlFor = `client-${index}`;
label.textContent = client.name || `${client.type} (${client.id})`; 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(checkbox);
item.appendChild(iconWrapper);
item.appendChild(label); item.appendChild(label);
item.appendChild(typeBadge);
filterList.appendChild(item); filterList.appendChild(item);
}); });