From f5883d4929f7860c004d45eaa1caed7fd979c1c6 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Wed, 20 May 2026 00:14:20 +0100
Subject: [PATCH] Add download client logos to filter UI with fallback handling

---
 public/app.js                          | 16 ++++++++++++++++
 public/images/clients/deluge.svg       |  1 +
 public/images/clients/qbittorrent.svg  |  1 +
 public/images/clients/rtorrent.svg     |  4 ++++
 public/images/clients/sabnzbd.svg      |  1 +
 public/images/clients/transmission.svg |  1 +
 public/style.css                       | 26 ++++++++++++++++++++++++++
 7 files changed, 50 insertions(+)
 create mode 100644 public/images/clients/deluge.svg
 create mode 100644 public/images/clients/qbittorrent.svg
 create mode 100644 public/images/clients/rtorrent.svg
 create mode 100644 public/images/clients/sabnzbd.svg
 create mode 100644 public/images/clients/transmission.svg

diff --git a/public/app.js b/public/app.js
index 153ef0b..8a35496 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1174,6 +1174,21 @@ function updateDownloadClientFilter() {
       toggleClientSelection(index, e.target.checked);
     });
 
+    // Add client icon
+    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} icon`;
+    iconImg.onerror = () => {
+      // Fallback to text if image fails to load
+      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 = checkboxId;
@@ -1184,6 +1199,7 @@ function updateDownloadClientFilter() {
     typeBadge.textContent = client.type;
 
     option.appendChild(checkbox);
+    option.appendChild(iconWrapper);
     option.appendChild(label);
     option.appendChild(typeBadge);
 
diff --git a/public/images/clients/deluge.svg b/public/images/clients/deluge.svg
new file mode 100644
index 0000000..48b984b
--- /dev/null
+++ b/public/images/clients/deluge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="m256.1 2.6 142 217.2c91 139.2-4.7 289.6-142.1 289.6S22.8 358.9 113.9 219.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#4c90e8;stroke:#094491;stroke-width:3.1904"/><path d="M306.7 255.2c-77.6-31.7-118.4 49.2-105.4 87C229.5 424.4 335.8 445 414.2 308c0 0 .8 16.5 1.7 24.4 10.5 99.9-73.5 163.4-158.6 162.2s-111.1-34.3-136.2-72.3C80.4 360.6 90.5 260 145.2 212.9c62.5-51.6 131.2-24 161.5 42.3" style="fill-rule:evenodd;clip-rule:evenodd;fill:#094491"/><path d="M257.9 225.3c-87 2.1-103.5 102.3-79.4 145.3 33.5 59.7 84.3 71.2 153.8 49.1-39.7 43.2-121.2 54.6-176.5-7.1-38.1-42.4-41.4-101.6-15-151.1 26.5-49.4 79.2-63.2 117.1-36.2" style="fill-rule:evenodd;clip-rule:evenodd;fill:#83b8f9"/></svg>
\ No newline at end of file
diff --git a/public/images/clients/qbittorrent.svg b/public/images/clients/qbittorrent.svg
new file mode 100644
index 0000000..bb1249e
--- /dev/null
+++ b/public/images/clients/qbittorrent.svg
@@ -0,0 +1 @@
+<svg height="1024" viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="348.2829" x2="782.05951" y1="0" y2="786.48322"><stop offset="0" stop-color="#72b4f5"/><stop offset="1" stop-color="#356ebf"/></linearGradient><g fill="none" fill-rule="evenodd" transform="matrix(.97656268 0 0 .9765624 11.999908 12.000051)"><circle cx="512" cy="512" fill="url(#a)" r="496" stroke="#daefff" stroke-width="32"/><path d="m712.898 332.399q66.657 0 103.38 45.671 37.03 45.364 37.03 128.684 0 83.32-37.34 129.61-37.03 45.98-103.07 45.98-33.02 0-60.484-12.035-27.156-12.344-45.672-37.649h-3.703l-10.8 43.512h-36.724v-480.172h51.227v116.65q0 39.191-2.469 70.359h2.47q35.796-50.61 106.155-50.61zm-7.406 42.894q-52.46 0-75.605 30.242-23.145 29.934-23.145 101.219 0 71.285 23.762 102.145 23.761 30.55 76.222 30.55 47.215 0 70.36-34.254 23.144-34.562 23.144-99.058 0-66.04-23.144-98.442-23.145-32.402-71.594-32.402z" fill="#fff"/><path d="m317.273 639.45q51.227 0 74.68-27.466 23.453-27.464 24.996-92.578v-11.418q0-70.976-24.07-102.144-24.07-31.168-76.223-31.168-45.055 0-69.125 35.18-23.762 34.87-23.762 98.75 0 63.879 23.454 97.515 23.761 33.328 70.05 33.328zm-7.715 42.894q-65.421 0-102.144-45.98-36.723-45.981-36.723-128.376 0-83.011 37.032-129.609 37.03-46.598 103.07-46.598 69.433 0 106.773 52.461h2.778l7.406-46.289h40.426v490.047h-51.227v-144.73q0-30.86 3.395-52.461h-4.012q-35.488 51.535-106.774 51.535z" fill="#c8e8ff"/></g></svg>
\ No newline at end of file
diff --git a/public/images/clients/rtorrent.svg b/public/images/clients/rtorrent.svg
new file mode 100644
index 0000000..89e47c6
--- /dev/null
+++ b/public/images/clients/rtorrent.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <circle cx="10" cy="10" r="9" fill="#FF6B35"/>
+  <text x="10" y="14" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">r</text>
+</svg>
diff --git a/public/images/clients/sabnzbd.svg b/public/images/clients/sabnzbd.svg
new file mode 100644
index 0000000..b8d2ef7
--- /dev/null
+++ b/public/images/clients/sabnzbd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="#f5f5f5000" stroke="#f5f5f5" stroke-linejoin="round" stroke-width="74" d="M200.4 39.3h598.1v437.8h161l-460.1 483L39.4 477h161z"/><path fill="#ffb300" fill-rule="evenodd" d="M200.4 39.3h598.1v437.8h161l-460.1 483-460-483h161z"/><path fill="#ffca28" fill-rule="evenodd" d="M499.4 960.2 201.1 39.4h596.7z"/><path fill="#f5f5f5000" stroke="#f5f5f5" stroke-linecap="round" stroke-linejoin="round" stroke-width="74" d="M329.2 843.5H83v-51.8h146.1v-45.9H83V596.9h246.2v51.5H183.1v45.9h146.1zm292.2 0H375.2V694.3h146.1v-45.9H375.2v-51.5h246.2zm-146.1-97.8h46v46h-46zm192.1 97.8v-344h100.1v97.4h146.1v246.6zm100.1-195.2h46v143.4h-46z"/><path fill="#0f0f0f" fill-rule="evenodd" d="M329.2 843.5H83v-51.8h146.1v-45.9H83V596.9h246.2v51.5H183.1v45.9h146.1zm292.2 0H375.2V694.3h146.1v-45.9H375.2v-51.5h246.2zm-146.1-51.8h46v-46h-46zm192.1 51.9v-344h100.1V597h146.1v246.6zm100.1-51.9h46V648.4h-46z"/></svg>
\ No newline at end of file
diff --git a/public/images/clients/transmission.svg b/public/images/clients/transmission.svg
new file mode 100644
index 0000000..04560ee
--- /dev/null
+++ b/public/images/clients/transmission.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="svg5186" x="0" y="0" style="enable-background:new 0 0 512 512" version="1.1" viewBox="0 0 512 512"><style>.st18{fill:none;stroke:#fff;stroke-linecap:round}</style><filter id="filter9771" width="1.06" height="1.28" x="-.03" y="-.14"><feGaussianBlur id="feGaussianBlur9773" stdDeviation=".52"/></filter><g id="layer1"><g style="opacity:.2824;filter:url(#filter9771);enable-background:new"><path id="rect9761" d="M40.5 409h431.1c14.7 0 26.6 11.9 26.6 26.6v49.9c0 14.7-11.9 26.6-26.6 26.6H40.5c-14.7 0-26.6-11.9-26.6-26.6v-49.9c0-14.7 11.9-26.6 26.6-26.6" style="fill:#2e3436"/></g><linearGradient id="path5232_00000058576920555416522510000016935891415215423419_" x1="257.658" x2="257.658" y1="321.649" y2="64.535" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#787b76"/><stop offset=".871" style="stop-color:#babcb9"/><stop offset="1" style="stop-color:#787b76"/></linearGradient><path id="path5232" d="M94.8 150.1c-13.6-.5-27.3 11.3-28.5 25.6C56 260 40.8 344.3 33 428.5v35.4c.4 18.3 12.4 30.5 25.6 32.9h400.1c11.3-.3 23.9-8.1 23.5-23.1v-45.5l-36-245.2c-2.9-15-15.8-31-33.6-32.9z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5232_00000058576920555416522510000016935891415215423419_);stroke:#555753;stroke-width:1"/><linearGradient id="path5230_00000128454780994748310510000007092261228009905591_" x1="260.014" x2="265.792" y1="166.111" y2="271.557" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#f0f2ef"/><stop offset="1" style="stop-color:#cdd1c8"/></linearGradient><path id="path5230" d="M101.7 416.2c-13.1-1.4-22.3-10-22-25.7l22-184.8c3.4-12.3 11.4-22.2 24-22.2h253.4c12.6-.4 25.1 8.3 28.4 18.7l27.9 186.4c.7 17-6.3 26.8-18.1 26.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5230_00000128454780994748310510000007092261228009905591_);stroke:#555753;stroke-width:1"/><linearGradient id="path5197_00000006689332825260170750000007963860549997984920_" x1="255.848" x2="255.848" y1="201.852" y2="135.51" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#555753"/><stop offset="1" style="stop-color:#2e3436"/></linearGradient><linearGradient id="path5197_00000052802538007258154920000008719694013745319332_" x1="255.799" x2="253.526" y1="186.293" y2="277.071" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#888a85"/><stop offset="1" style="stop-color:#2e3436"/></linearGradient><path id="path5197" d="m215.8 194.5-23.8 139h-34.3l92.8 59.6 103.6-59.6h-34.3l-21.7-139z" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5197_00000006689332825260170750000007963860549997984920_);stroke:url(#path5197_00000052802538007258154920000008719694013745319332_)"/><linearGradient id="rect5224_00000167378108370139695280000003496694304969247617_" x1="257.048" x2="257.048" y1="490.657" y2="451.65" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#c00"/><stop offset=".365" style="stop-color:#ef0000"/><stop offset="1" style="stop-color:#a00"/></linearGradient><path id="rect5224" d="M135.2 10.5h243.6c32 0 58 10.3 58 22.9v24.2c0 12.7-26 22.9-58 22.9H135.2c-32 0-58-10.3-58-22.9V33.4c.1-12.6 26-22.9 58-22.9" style="fill:url(#rect5224_00000167378108370139695280000003496694304969247617_);stroke:#930000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"/><linearGradient id="rect5896_00000069389731644706871400000005848080282515370678_" x1="257.039" x2="257.039" y1="491.798" y2="445.273" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#fff"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></linearGradient><path id="rect5896" d="M110.2 22.7h293.7c11.7 0 21.2 6.6 21.2 14.8v16c0 8.2-9.5 14.8-21.2 14.8H110.2C98.5 68.2 89 61.6 89 53.5v-16c0-8.2 9.5-14.8 21.2-14.8" style="opacity:.5833;fill:none;stroke:url(#rect5896_00000069389731644706871400000005848080282515370678_);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;enable-background:new"/><linearGradient id="path5881_00000139273475127190173840000003664081353357937311_" x1="253.497" x2="244.732" y1="141.169" y2="352.838" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#f9f9f9"/><stop offset="1" style="stop-color:#eeeeec;stop-opacity:.6204"/></linearGradient><path id="path5881" d="M101.6 161.4c-12.9-.5-25.8 10.6-27 24l-32.2 232c.1 1.4.4 3 .7 4.4v33.1c.4 17.1 11.7 28.2 24.3 30.4H447c10.7-.3 22.3-7.3 21.9-21.3v-42.5c.1-.3.3-.7.3-1l-.3-2.4v-2.4h-.3L435 191.8c-2.8-14.1-15-28.7-31.8-30.4z" style="opacity:.2454;fill:none;stroke:url(#path5881_00000139273475127190173840000003664081353357937311_);stroke-width:1;enable-background:new"/><linearGradient id="path5926_00000080198606214203198090000004507462762851665313_" x1="256.964" x2="256.964" y1="315.943" y2="303.572" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#000"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></linearGradient><path id="path5926" d="m97.2 304.5 21.2-91.9 277.7.7 20.6 103.8-13.6-104.9c-2.6-11.6-8.7-22.8-19.9-22.5l-253.3-.5c-16.5-.5-19.8 10.2-23.5 23z" style="opacity:.2083;fill-rule:evenodd;clip-rule:evenodd;fill:url(#path5926_00000080198606214203198090000004507462762851665313_);enable-background:new"/><linearGradient id="rect5226_00000161598652057951830900000004632129501683187641_" x1="256.939" x2="256.939" y1="507.619" y2="330.712" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#babdb6"/><stop offset=".133" style="stop-color:#eeeeec"/><stop offset="1" style="stop-color:#babdb6"/></linearGradient><path id="rect5226" d="M228.4 0h57.1c6.9 0 12.4 5.6 12.4 12.4v275.2c0 6.9-5.6 12.4-12.4 12.4h-57.1c-6.9 0-12.4-5.6-12.4-12.4V12.4C215.9 5.6 221.5 0 228.4 0" style="fill:url(#rect5226_00000161598652057951830900000004632129501683187641_);stroke:#888a85;stroke-linecap:round;stroke-linejoin:round"/><linearGradient id="rect5244_00000025407472243848991930000000544946367935788717_" x1="257.328" x2="256.817" y1="208.343" y2="294.14" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#2e3436"/><stop offset="1" style="stop-color:#2e3436;stop-opacity:0"/></linearGradient><path id="rect5244" d="M222.5 212.7h69.1c6.9 0 12.4 5.6 12.4 12.4v68.1c0 6.9-5.6 12.4-12.4 12.4h-69.1c-6.9 0-12.4-5.6-12.4-12.4v-68.1c0-6.8 5.5-12.4 12.4-12.4" style="fill:url(#rect5244_00000025407472243848991930000000544946367935788717_)"/><path id="path5879" d="M111.2 437.8H436" style="opacity:.4352;fill:none;stroke:#fff;stroke-linecap:round;enable-background:new"/><path id="rect5892" d="M239.3 11.9H274c6.9 0 12.4 5.6 12.4 12.4V276c0 6.9-5.6 12.4-12.4 12.4h-34.7c-6.9 0-12.4-5.6-12.4-12.4V24.3c0-6.9 5.5-12.4 12.4-12.4" style="opacity:.2269;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;enable-background:new"/><g id="g5972" style="opacity:.6204"><path id="path5831" d="M215.4 310.8H297" style="fill:none;stroke:#888a85;stroke-linecap:round"/><path id="path5833" d="M209.9 333.9h92.6" style="opacity:.6806;fill:none;stroke:#888a85;stroke-linecap:round;enable-background:new"/><path id="path5958" d="M213.5 322.4h86.1" style="fill:none;stroke:#5d5d5c;stroke-linecap:round"/><path id="path5960" d="M208.8 345.3h95.6" style="opacity:.6806;fill:none;stroke:#5d5d5c;stroke-width:1;stroke-linecap:round;enable-background:new"/></g><path id="path9791" d="M145.4 322.5h36.3" class="st18"/><path id="path9803" d="M331 321.8h36.3" class="st18"/><path id="path5119" d="M95 437.9c0 3.3-2.6 6-5.8 6s-5.8-2.7-5.8-6 2.6-6 5.8-6 5.8 2.7 5.8 6" style="opacity:.335;fill:#fff;enable-background:new"/></g></svg>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 10f67b1..cfe9d05 100644
--- a/public/style.css
+++ b/public/style.css
@@ -842,6 +842,32 @@ body {
   color: var(--text-secondary);
 }
 
+/* Client icon */
+.download-client-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.download-client-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.download-client-icon.fallback {
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-alt);
+  border-radius: 3px;
+  color: var(--text-primary);
+}
+
 .history-header {
   display: flex;
   align-items: center;