Extract renderTagBadges helper to eliminate 4x tag-badge rendering duplication

client/src/ui/downloads.js

@@ -4,6 +4,34 @@ import { state } from '../state.js';
 import { formatSize, formatSpeed, formatEpisodeInfo, escapeHtml } from '../utils/format.js';
 import { handleBlocklistSearch } from '../api.js';
 
+export function renderTagBadges(tagBadges, showAll, matchedUserTag) {
+  const fragment = document.createDocumentFragment();
+
+  if (showAll && tagBadges && tagBadges.length > 0) {
+    const unmatched = tagBadges.filter(b => !b.matchedUser);
+    const matched = 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;
+      fragment.appendChild(badge);
+    }
+    for (const b of matched) {
+      const badge = document.createElement('span');
+      badge.className = 'download-user-badge';
+      badge.textContent = b.matchedUser;
+      fragment.appendChild(badge);
+    }
+  } else if (matchedUserTag) {
+    const matchedBadge = document.createElement('span');
+    matchedBadge.className = 'download-user-badge';
+    matchedBadge.textContent = matchedUserTag;
+    fragment.appendChild(matchedBadge);
+  }
+
+  return fragment;
+}
+
 export function renderDownloads() {
   const downloadsList = document.getElementById('downloads-list');
   const noDownloads = document.getElementById('no-downloads');
@@ -97,27 +125,8 @@ export function updateDownloadCard(card, download) {
     const rightSide = document.createElement('div');
     rightSide.className = 'download-header-right';
 
-    if (state.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);
-    }
+    const badges = renderTagBadges(download.tagBadges, state.showAll, download.matchedUserTag);
+    rightSide.appendChild(badges);
 
     header.appendChild(rightSide);
   }
@@ -301,31 +310,8 @@ export function createDownloadCard(download) {
   const rightSide = document.createElement('div');
   rightSide.className = 'download-header-right';
 
-  if (state.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);
-  }
+  const badges = renderTagBadges(download.tagBadges, state.showAll, download.matchedUserTag);
+  rightSide.appendChild(badges);
 
   header.appendChild(rightSide);
 
@@ -380,32 +366,6 @@ export function createDownloadCard(download) {
     infoDiv.appendChild(movie);
   }
 
-  if (state.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;
-      header.appendChild(badge);
-    }
-    for (const b of matched) {
-      const badge = document.createElement('span');
-      badge.className = 'download-user-badge';
-      badge.textContent = b.matchedUser;
-      header.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;
-    header.appendChild(matchedBadge);
-  }
-
   // Add client logo
   if (download.client) {
     const clientLogoWrapper = document.createElement('span');

client/src/ui/history.js

@@ -4,6 +4,7 @@ import { state, HISTORY_REFRESH_MS } from '../state.js';
 import { loadHistory as apiLoadHistory } from '../api.js';
 import { saveHistoryDays, saveIgnoreAvailable } from '../utils/storage.js';
 import { formatDate, formatEpisodeInfo, escapeHtml } from '../utils/format.js';
+import { renderTagBadges } from './downloads.js';
 
 export function initHistoryControls() {
   const daysInput = document.getElementById('history-days');
@@ -146,27 +147,8 @@ export function createHistoryCard(item) {
     header.appendChild(instBadge);
   }
 
-  if (state.showAll && item.tagBadges && item.tagBadges.length > 0) {
-    const unmatched = item.tagBadges.filter(b => !b.matchedUser);
-    const matched = item.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;
-      header.appendChild(badge);
-    }
-    for (const b of matched) {
-      const badge = document.createElement('span');
-      badge.className = 'download-user-badge';
-      badge.textContent = b.matchedUser;
-      header.appendChild(badge);
-    }
-  } else if (item.matchedUserTag) {
-    const badge = document.createElement('span');
-    badge.className = 'download-user-badge';
-    badge.textContent = item.matchedUserTag;
-    header.appendChild(badge);
-  }
+  const badges = renderTagBadges(item.tagBadges, state.showAll, item.matchedUserTag);
+  header.appendChild(badges);
 
   info.appendChild(header);