Fix duplicate user tag and logo in download cards by removing old elements before updating

public/app.js

@@ -444,6 +444,71 @@ function renderDownloads() {
 }
 
 function updateDownloadCard(card, download) {
+  // Remove old header-right container if it exists (to prevent duplicates)
+  const oldRightSide = card.querySelector('.download-header-right');
+  if (oldRightSide) {
+    oldRightSide.remove();
+  }
+
+  // Remove old user badges directly in header (old structure)
+  const oldBadges = card.querySelectorAll('.download-header .download-user-badge');
+  oldBadges.forEach(badge => badge.remove());
+
+  // Remove old client logo directly in header (old structure)
+  const oldLogo = card.querySelector('.download-header .download-client-logo-wrapper');
+  if (oldLogo) {
+    oldLogo.remove();
+  }
+
+  // Add new right-side container with user badge and logo
+  const header = card.querySelector('.download-header');
+  if (header) {
+    const rightSide = document.createElement('div');
+    rightSide.className = 'download-header-right';
+
+    if (showAll && download.tagBadges && download.tagBadges.length > 0) {
+      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) {
+      const matchedBadge = document.createElement('span');
+      matchedBadge.className = 'download-user-badge';
+      matchedBadge.textContent = download.matchedUserTag;
+      rightSide.appendChild(matchedBadge);
+    }
+
+    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 = () => {
+        clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase();
+        clientLogoWrapper.classList.add('fallback');
+      };
+
+      clientLogoWrapper.appendChild(clientLogo);
+      rightSide.appendChild(clientLogoWrapper);
+    }
+
+    header.appendChild(rightSide);
+  }
+
   // Update status
   const statusEl = card.querySelector('.download-status');
   if (statusEl && statusEl.textContent !== download.status) {