Add download client logo to download card with right-side positioning

public/app.js

@@ -582,7 +582,7 @@ function createDownloadCard(download) {
   
   const header = document.createElement('div');
   header.className = 'download-header';
-  
+
   const type = document.createElement('span');
   type.className = `download-type ${download.type}`;
   if (download.type === 'series') {
@@ -595,11 +595,11 @@ function createDownloadCard(download) {
   } else {
     type.textContent = download.type;
   }
-  
+
   const status = document.createElement('span');
   status.className = `download-status ${download.status}`;
   status.textContent = download.status;
-  
+
   header.appendChild(type);
   header.appendChild(status);
 
@@ -619,6 +619,58 @@ function createDownloadCard(download) {
     blBtn.addEventListener('click', () => handleBlocklistSearch(blBtn, download));
     header.appendChild(blBtn);
   }
+
+  // Right side container for user badge and client logo
+  const rightSide = document.createElement('div');
+  rightSide.className = 'download-header-right';
+
+  if (showAll && download.tagBadges && download.tagBadges.length > 0) {
+    // In showAll mode: render all tags classified by whether they match an Emby user.
+    // Unmatched (no known Emby user) → amber, leftmost.
+    // Matched → show Emby display name in accent colour, rightmost.
+    const unmatched = download.tagBadges.filter(b => !b.matchedUser);
+    const matched = download.tagBadges.filter(b => b.matchedUser);
+    for (const b of unmatched) {
+      const badge = document.createElement('span');
+      badge.className = 'download-user-badge unmatched';
+      badge.textContent = b.label;
+      rightSide.appendChild(badge);
+    }
+    for (const b of matched) {
+      const badge = document.createElement('span');
+      badge.className = 'download-user-badge';
+      badge.textContent = b.matchedUser;
+      rightSide.appendChild(badge);
+    }
+  } else if (download.matchedUserTag) {
+    // Normal (non-showAll) view: show only the current user's matched tag
+    const matchedBadge = document.createElement('span');
+    matchedBadge.className = 'download-user-badge';
+    matchedBadge.textContent = download.matchedUserTag;
+    rightSide.appendChild(matchedBadge);
+  }
+
+  // Add client logo
+  if (download.client) {
+    const clientLogoWrapper = document.createElement('span');
+    clientLogoWrapper.className = 'download-client-logo-wrapper';
+
+    const clientLogo = document.createElement('img');
+    clientLogo.className = 'download-client-logo';
+    clientLogo.src = `/images/clients/${download.client}.svg`;
+    clientLogo.alt = `${download.instanceName || download.client} icon`;
+    clientLogo.title = download.instanceName || download.client;
+    clientLogo.onerror = () => {
+      // Fallback to text if image fails to load
+      clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase();
+      clientLogoWrapper.classList.add('fallback');
+    };
+
+    clientLogoWrapper.appendChild(clientLogo);
+    rightSide.appendChild(clientLogoWrapper);
+  }
+
+  header.appendChild(rightSide);
   
   const title = document.createElement('h3');
   title.className = 'download-title';
@@ -676,6 +728,26 @@ function createDownloadCard(download) {
     matchedBadge.textContent = download.matchedUserTag;
     header.appendChild(matchedBadge);
   }
+
+  // Add client logo
+  if (download.client) {
+    const clientLogoWrapper = document.createElement('span');
+    clientLogoWrapper.className = 'download-client-logo-wrapper';
+
+    const clientLogo = document.createElement('img');
+    clientLogo.className = 'download-client-logo';
+    clientLogo.src = `/images/clients/${download.client}.svg`;
+    clientLogo.alt = `${download.instanceName || download.client} icon`;
+    clientLogo.title = download.instanceName || download.client;
+    clientLogo.onerror = () => {
+      // Fallback to text if image fails to load
+      clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase();
+      clientLogoWrapper.classList.add('fallback');
+    };
+
+    clientLogoWrapper.appendChild(clientLogo);
+    header.appendChild(clientLogoWrapper);
+  }
   
   const details = document.createElement('div');
   details.className = 'download-details';