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';

public/style.css

@@ -1402,7 +1402,6 @@ body {
   text-transform: capitalize;
   background: var(--accent-light);
   color: var(--accent);
-  margin-left: auto;
   white-space: nowrap;
 }
 
@@ -1412,6 +1411,38 @@ body {
   margin-left: 0;
 }
 
+/* Download client logo in card */
+.download-header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.download-client-logo-wrapper {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.download-client-logo {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.download-client-logo-wrapper.fallback {
+  font-size: 10px;
+  font-weight: bold;
+  background: var(--surface-alt);
+  border-radius: 2px;
+  color: var(--text-primary);
+}
+
 /* ===== Status Button ===== */
 .status-btn {
   padding: 4px 12px;