DRYing the project

app/static/js/bulk-select.js

@@ -5,6 +5,9 @@
 (function() {
   'use strict';
 
+  // Use shared TagUtils module
+  const { getTagIcon, getTagDisplayName, getTagDisplayNameForOverlay, escapeHtml, createTagChipHtml } = window.TagUtils || {};
+
   const state = {
     isSelectMode: false,
     selectedIds: new Set(),
@@ -263,7 +266,7 @@
 
     dom.commonTags.innerHTML = tags.map(t => {
       const icon = getTagIcon(t.kind);
-      const display = t.name.includes(':') ? t.name.split(':')[1] : t.name;
+      const display = getTagDisplayName(t.name, t.kind);
       const escapedName = escapeHtml(t.name);
       const escapedDisplay = escapeHtml(display);
       return `<span class="tag-chip removable" data-name="${escapedName}">
@@ -471,7 +474,7 @@
 
     dom.autocomplete.innerHTML = tags.map((t, i) => {
       const icon = getTagIcon(t.kind);
-      const displayName = t.name.includes(':') ? t.name.split(':')[1] : t.name;
+      const displayName = getTagDisplayName(t.name, t.kind);
       return `<div class="tag-autocomplete-item" data-index="${i}" data-name="${escapeHtml(t.name)}">
         <span>${icon} ${escapeHtml(displayName)}</span>
         <span class="tag-kind">${t.kind || 'user'}</span>
@@ -491,41 +494,9 @@
     autocompleteSelectedIndex = index;
   }
 
-  // ---------------------------
-  // Helpers
-  // ---------------------------
-  function getTagIcon(kind) {
-    const icons = {
-      artist: '🎨',
-      archive: '🗜️',
-      character: '👤',
-      series: '📺',
-      fandom: '🎭',
-      rating: '⚠️',
-      source: '🌐',
-      post: '📌'
-    };
-    return icons[kind] || '#';
-  }
-
-  function escapeHtml(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-  }
-
   // ---------------------------
   // Tag Refresh for Gallery Items
   // ---------------------------
-  function getTagDisplayName(name, kind) {
-    // Strip prefix for known prefixed kinds
-    if (['artist', 'character', 'series', 'fandom', 'rating'].includes(kind)) {
-      return name.includes(':') ? name.split(':', 2)[1] : name;
-    }
-    // Regular tags get a # prefix
-    return '#' + name;
-  }
-
   async function refreshItemTags(imageId) {
     // Find the gallery item
     const item = document.querySelector(`.img-clickable[data-id="${imageId}"]`);
@@ -555,14 +526,8 @@
         item.appendChild(overlay);
       }
 
-      // Render tags with icons
-      overlay.innerHTML = visibleTags.map(t => {
-        const displayName = getTagDisplayName(t.name, t.kind);
-        const icon = getTagIcon(t.kind);
-        const encodedName = encodeURIComponent(t.name);
-        const prefix = icon !== '#' ? icon + ' ' : '#';
-        return `<a class="tag-chip" href="/gallery?tag=${encodedName}" title="Filter by ${escapeHtml(t.name)}" onclick="event.stopPropagation()">${prefix}${escapeHtml(displayName)}</a>`;
-      }).join('');
+      // Render tags with icons using shared utility
+      overlay.innerHTML = visibleTags.map(t => createTagChipHtml(t)).join('');
 
     } catch (e) {
       console.error('Failed to refresh tags for image', imageId, e);