From e3f90d54f4b0fc07ac73087837fcce38ddb567f3 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sat, 23 May 2026 09:36:41 +0100
Subject: [PATCH] fix(ui): add brand icons and type badges to download client
 filter dropdown (resolves #39)

---
 client/src/ui/filters.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/filters.js b/client/src/ui/filters.js
index 25eb145..a8f56b9 100644
--- a/client/src/ui/filters.js
+++ b/client/src/ui/filters.js
@@ -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);
   });